/* ====== Taxi Erwann – Styles ====== */
:root{
  --brand:#e2e3e9;        /* marine navy */
  --brand-2:#0ea5e9;      /* light sea */
  --text:#f2f8f8;
  --muted:#64748b;
  --bg:#122d47;
  --white:#2e2d2d;
  --accent:#fbbf24;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; color:var(--text); background:var(--bg);
}

:root {
  --sb-bg: #1a1a1a;
  --sb-width-full: 240px;
  --sb-width-collapsed: 70px;
  --gray-text: #a0a0a0;
  --hover-bg: #2d2d2d;
}

body {
  margin-left: var(--sb-width-collapsed);
  transition: margin-left 0.3s ease;
}

/* Sidebar principale */
.sidebar {
  position: fixed;
  left: 0; top: 0; height: 100%;
  width: var(--sb-width-collapsed);
  background: var(--sb-bg);
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
  border-right: 1px solid #333;
}

/* Expansion au survol (Desktop) */
.sidebar:hover {
  width: var(--sb-width-full);
}

.sidebar-header {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  height: 70px;
}

.sidebar-logo { width: 40px; height: 40px; border-radius: 5px; flex-shrink: 0; }

.sidebar-brand-name {
  color: white;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.sidebar:hover .sidebar-brand-name { opacity: 1; }

/* Liens de navigation */
.nav-link {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  color: var(--gray-text);
  text-decoration: none;
  transition: all 0.3s ease; /* Transition pour le déplacement */
}

.nav-link .icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  margin-right: 30px;
}

.nav-link .text { opacity: 0; transition: opacity 0.2s; }
.sidebar:hover .nav-link .text { opacity: 1; }

/* Effet HOVER : Gris + Déplacement latéral */
.nav-link:hover {
  background-color: var(--hover-bg);
  color: #ffffff;
  padding-left: 32px; /* Déplacement vers la droite au clic/hover */
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  body { margin-left: 0; }
  .sidebar {
    left: -80px; /* Caché */
    width: 70px;
  }
  .sidebar.active {
    left: 0;
    width: var(--sb-width-full);
  }
  .sidebar.active .text, .sidebar.active .sidebar-brand-name { opacity: 1; }
  
  .mobile-toggle {
    position: fixed;
    top: 15px; left: 15px;
    z-index: 2100;
    background: var(--sb-bg);
    color: white; border: 1px solid #444;
    padding: 10px; border-radius: 5px;
    display: block;
  }
}

@media (min-width: 769px) {
  .mobile-toggle { display: none; }
}

.container{max-width:1100px;margin:0 auto;padding:16px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.btn{
  display:inline-block; padding:14px 20px; border-radius:10px;
  background:var(--brand); color:var(--white); font-weight:700;
  border:2px solid transparent; transition:.2s;
}
.btn:hover{background:var(--white); color:var(--brand); border-color:var(--brand); text-decoration:none}
.btn-outline{background:transparent; color:var(--brand); border-color:var(--brand)}
.badge{background:var(--accent); color:#222; padding:4px 10px; border-radius:999px; font-weight:700;font-size:12px}

header.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(6px);
  background:rgba(18, 16, 46, 0.9); border-bottom:1px solid #1c1e22;
}
.brand{display:flex; gap:12px; align-items:center}
.brand img{height:42px; width:auto; border-radius:6px}
.brand .name{font-size:22px; font-weight:800; color:var(--brand)}
nav.primary{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
nav.primary a{padding:10px 6px; font-weight:600; color:#f0f2f7}
nav.primary a.active{color:var(--brand)}
.header-row{display:flex; justify-content:space-between; align-items:center; padding-top: 1.5rem;}

 
.hero{
  background: radial-gradient(1200px 500px at 75% -10%, #c7d2fe 0%, transparent 60%);
}
.hero .grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center;
}
.hero h1{font-size:48px; line-height:1.05; margin:12px 0}
.hero p{font-size:18px; color:var(--muted)}
.hero .call{display:flex; gap:12px; align-items:center; margin-top:18px}
.phone{
  font-size:28px; font-weight:900; letter-spacing:.5px; color:var(--brand);
}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}

.card{
  background:var(--white); border:1px solid #e5e7eb; border-radius:16px;
  padding:18px; box-shadow:0 4px 14px rgba(2,6,23,.04);
}
.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px}

.section-title{font-size:28px; margin:8px 0 18px;}
 @media (max-width: 768px) {.hero .grid{display:flex; gap:8px; flex-wrap:wrap;}
    }
footer{
  background:#0b1220; color:#cbd5e1; margin-top:40px; margin-bottom: 3rem;
}
footer a{color:#93c5fd}
.footer-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:22px}

.cta-fixed{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; background:rgba(255,255,255,.92);
  border:1px solid #e5e7eb; border-radius:999px; padding:8px; z-index:60;
  box-shadow:0 8px 30px rgba(2,6,23,.18);
}
.cta-fixed a{padding:10px 14px; border-radius:999px; font-weight:800}
.cta-fixed .call{background:var(--accent); color:#111}
.cta-fixed .reserve{background:var(--brand); color:#747171}

.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e5e7eb; padding:12px; text-align:left}
input,select,textarea{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff
}
label{font-weight:700; display:block; margin:12px 0 6px}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
form .row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
.alert{padding:12px 14px; background:#646666; border:1px solid #bae6fd; border-radius:12px; margin-bottom:12px}

.hero-emblem {
  /* 1. Centrage de l'élément lui-même (grâce à la largeur de 82%) */
  width: 65%;
  margin: 0 auto; /* Centre le bloc horizontalement */

  /* 2. Centrage du contenu à l'intérieur */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 3. Correction du dégradé (50% 50% pour un centrage parfait) */
  background: radial-gradient(circle at 50% 50%, #ffffff 30%, #eaf2ff 70%);

  /* Esthétique */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  
  /* Optionnel : ajoutez une hauteur ou un aspect-ratio pour voir le centrage vertical */
  min-height: 200px; 
}
.hero-emblem img{max-width:80%; height:auto; border-radius:12px;}

.office {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;            /* Prend toute la largeur disponible */
  max-width: 100%;       /* Empêche de dépasser le parent */
  overflow: hidden;       /* Coupe tout ce qui dépasse */
 
}

.office img {
  display: block; border-radius:12px;
  /* On utilise max-width 100% pour que l'image ne dépasse jamais le .office */
  max-width: 100%; 
  height: auto;    /* Garde les proportions */}
  
  
.hero2{
  background: radial-gradient(1200px 500px at 75% -10%,);
}
.container2{max-width:1100px;margin:0 auto;padding:16px}
.hero2 .grid2{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center;
}
.hero-emblem2 img{max-width:40%; height:auto; border-radius:12px}
.hero-emblem3 img{max-width:60%; height:auto; border-radius:12px}

.small{font-size:13px; color:var(--muted)}
hr.sep{border:none; border-top:1px dashed #e5e7eb; margin:24px 0}

/* Icônes réseaux sociaux */
.social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }

.social-links a svg {width: 30px; height: 30px; fill: #f5f5f5; background: #222; border-radius: 50%; padding: 5px;
  border: 1px solid #444; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.5);}

.social-links a:hover svg { fill: #111; background: #c49b3f; /* Doré élégant */ border-color: #c49b3f; transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);}

.dinard {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  width: 100%;            /* Prend toute la largeur disponible */
  max-width: 100%;       /* Empêche de dépasser le parent */
  overflow: hidden;       /* Coupe tout ce qui dépasse */
 
}

.dinard img {
  display: block; border-radius:12px;
  /* On utilise max-width 100% pour que l'image ne dépasse jamais le .office */
  max-width: 100%; 
  height: auto;    /* Garde les proportions */}