/* Styles partagés par toutes les pages publiques (landing, services, pages légales).
   Fichier statique simple, pas de build Vite nécessaire pour ce premier palier. */

:root {
  /* Identité du site (2026-08-09, révisée le même jour) : jaune-or #FACC15 + univers chocolat
     chaud (crème/ivoire/chocolat), différenciation volontaire face à la concurrence
     (Gozem/inDrive/Bolt sont tous verts). Le vert n'est PLUS une couleur de marque sur le site
     public — il reste réservé aux statuts fonctionnels de l'app Pro (chauffeur disponible,
     statut actif, validation, course acceptée), jamais à l'identité visuelle marketing.
     --brand-dark est une teinte plus soutenue pour le texte/liens sur fond clair (contraste).
     --ink sert à la fois de couleur de texte la plus sombre ET de fond des surfaces sombres
     (header foncé au survol, footer, bezel du téléphone) : un seul token, chocolat profond. */
  --brand: #facc15;
  --brand-dark: #a16207;
  --ink: #2a1b0e;
  --muted: #6e5a42;
  --line: #ecdfc4;

  /* Palette chaude (crème/ivoire/chocolat) pour l'alternance de sections et les cartes. */
  --cream: #fbf3e2;       /* fond de page par défaut */
  --cream-deep: #f4e7cb;  /* bandeau de section alterné (plus soutenu que --cream) */
  --card-bg: #fffcf4;     /* fond ivoire des cartes, se détache du fond crème */
  --card-border: #e9d9b4; /* bordure discrète brun-or */
  --card-shadow: 0 14px 30px -20px rgba(69, 26, 3, .28);
  --choc-700: #78350f;
  --choc-900: #2b1608;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--cream); color: var(--ink);
}
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Bandeau de section alterné (ivoire chaud), utilisé entre deux sections sur fond crème par
   défaut pour créer un rythme visuel crème / ivoire / chocolat sans jamais repasser au blanc. */
.wash-ivory { background: var(--cream-deep); }

/* ---------- HEADER / NAV ---------- */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,252,244,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; max-width: 1080px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 17px; text-decoration: none; flex-shrink: 0; }
.logo .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--brand); }
.logo img { height: 96px; width: auto; max-width: 320px; object-fit: contain; }

.site-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.site-nav a {
  position: relative;
  font-size: 13.5px; font-weight: 700; color: var(--muted); text-decoration: none;
  padding: 9px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.site-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  border-radius: 999px; background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .15s ease;
}
.site-nav a:hover { background: var(--cream-deep); color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.active { color: var(--ink); }
.site-nav a.active::after { transform: scaleX(1); }

.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700; color: var(--muted); background: none; border: none; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
  font-family: inherit;
}
.nav-dropdown-btn::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  border-radius: 999px; background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .15s ease;
}
.nav-dropdown-btn:hover { background: var(--cream-deep); color: var(--ink); }
.nav-dropdown-btn:hover::after { transform: scaleX(1); }
.nav-dropdown-btn.active { color: var(--ink); }
.nav-dropdown-btn.active::after { transform: scaleX(1); }
.nav-dropdown-btn svg { transition: transform .15s ease; }
.nav-dropdown-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px -20px rgba(43,22,8,.35); padding: 6px;
  min-width: 200px; display: none; flex-direction: column; gap: 2px;
}
.nav-dropdown-menu.open { display: flex; }
.nav-dropdown-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); text-decoration: none; border-left: 3px solid transparent;
}
.nav-dropdown-menu a:hover { background: var(--cream-deep); }
.nav-dropdown-menu a.active {
  background: #fef3c7; color: var(--brand-dark); font-weight: 800;
  border-left-color: var(--brand-dark);
}
.nav-dropdown-menu a.active .check { color: var(--brand-dark); flex-shrink: 0; }
.nav-dropdown-sep { height: 1px; background: var(--line); margin: 4px 2px; }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.cta-download {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand); color: var(--ink); font-size: 13.5px; font-weight: 800;
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 18px -8px rgba(250,204,21,.6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-download:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(250,204,21,.7); }
@media (max-width: 560px) { .cta-download span, .cta-download { font-size: 12.5px; padding: 8px 12px; } }

.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 999px; border: none; background: transparent; color: var(--ink); cursor: pointer;
  transition: background .15s ease;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--cream-deep); }

@media (max-width: 900px) {
  header.site .bar { flex-wrap: wrap; row-gap: 8px; }
  /* Le logo (upload admin, ratio variable) est fixé à 96px de haut avec max-width:320px en
     desktop — sur un écran de 320-390px ça dépasse la largeur utile à lui seul. On plafonne en
     unités viewport (pas une taille fixe arbitraire) pour qu'il reste le plus grand possible
     sans jamais dépasser l'écran, ratio préservé (pas d'écrasement, juste une mise à l'échelle). */
  .logo img { height: auto; width: auto; max-width: 45vw; max-height: 72px; }
  .footer-brand .logo img { max-width: 45vw; max-height: 72px; }
  .header-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--card-bg); border-bottom: 1px solid var(--line);
    padding: 10px 16px 16px; box-shadow: 0 20px 40px -24px rgba(43,22,8,.35);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 14px; border-radius: 10px; }
  .site-nav a::after { display: none; }
  .site-nav a:hover { background: var(--cream-deep); }

  .nav-toggle { display: inline-flex; }

  /* Le sous-menu Services reste toujours déplié dans le panneau mobile (déjà un clic pour
     l'ouvrir via le hamburger, pas besoin d'un second niveau de repli). */
  .nav-dropdown-btn { width: 100%; justify-content: space-between; padding: 12px 14px; border-radius: 10px; }
  .nav-dropdown-btn::after { display: none; }
  .nav-dropdown-btn svg { transform: none !important; }
  .nav-dropdown-menu {
    display: flex; position: static; box-shadow: none; border: none; padding: 2px 0 2px 14px;
    min-width: 0;
  }
  .nav-dropdown-sep { display: none; }
}

.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 5px; justify-content: center; height: 36px;
  padding: 0 10px 0 9px; border-radius: 999px; border: none; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-switch-btn .lang-current { font-size: 12.5px; font-weight: 800; }
.lang-switch-btn:hover, .lang-switch-btn[aria-expanded="true"] { background: var(--cream-deep); color: var(--ink); }

.lang-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px -20px rgba(43,22,8,.35); padding: 6px;
  min-width: 168px; display: none; flex-direction: column; gap: 2px;
}
.lang-switch-menu.open { display: flex; }
.lang-switch-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.lang-switch-menu a:hover { background: var(--cream-deep); }
.lang-switch-menu a.active { background: #fef3c7; color: var(--brand-dark); font-weight: 800; }
.lang-switch-menu .flag { border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(43,22,8,.12); }

/* ---------- BOUTONS STORE (réutilisés hors landing aussi) ---------- */
.store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 14px; text-decoration: none;
  font-weight: 700; font-size: 13.5px; transition: transform .15s ease;
}
.store-btn:hover { transform: translateY(-1px); }
.store-btn.play { background: var(--brand); color: var(--ink); }
.store-btn.apple {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.18); cursor: default; position: relative;
}
.store-btn .lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn .lines small { font-size: 10px; font-weight: 500; opacity: .85; }
.soon-badge {
  position: absolute; top: -9px; right: -8px; background: #f59e0b; color: #1c1400;
  font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}

/* ---------- HERO (réutilisé landing + services, couleurs via --hero-to/--hero-span) ---------- */
.hero {
  /* Défaut = identité chocolat/or du site (utilisé par l'accueil et "Devenir partenaire").
     Les pages service définissent leur propre teinte par service via style inline. */
  --hero-to: #78350f; --hero-span: #facc15;
  background: linear-gradient(160deg, var(--ink) 0%, var(--hero-to) 100%);
  color: #fff; padding: 56px 0 72px; overflow: hidden;
}
.hero .inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
/* Sans min-width:0, une image avec une largeur intrinsèque large (attribut width= sur <img>,
   utilisé pour réserver le bon ratio avant chargement) empêche sa colonne de grille de rétrécir
   en dessous de cette taille, ce qui élargit toute la page sur mobile (bug réel constaté à
   375px : la largeur du document dépassait le viewport, texte du hero coupé). */
.hero .inner > * { min-width: 0; }
@media (max-width: 860px) { .hero .inner { grid-template-columns: 1fr; } }
.hero .eyebrow {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.hero h1 { font-size: 38px; line-height: 1.15; font-weight: 900; margin: 0 0 16px; }
.hero h1 span { color: var(--hero-span); }
.hero p.lead { font-size: 15.5px; color: rgba(255,255,255,.75); line-height: 24px; margin: 0 0 28px; max-width: 480px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }

/* Phone mockup — vraie interface de réservation stylisée (zone carte + fiche flottante),
   pas une capture d'écran réelle mais une composition crédible : le HTML des pages reste
   3 ".chip" simples (contenu piloté par les traductions), tout l'habillage vient d'ici. */
.phone-frame {
  width: 220px; height: 440px; margin: 0 auto; border-radius: 34px; padding: 10px;
  background: #1c0f05; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.phone-screen {
  height: 100%; border-radius: 26px; overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 28% 66%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 32%, rgba(255,255,255,.9) 0 4px, transparent 5px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.3) 0 2px, transparent 2px 16px),
    linear-gradient(190deg, var(--hero-to) 0%, var(--ink) 62%);
  background-repeat: no-repeat;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; gap: 8px;
}
.phone-screen::before {
  /* Fiche flottante (bottom sheet) qui porte les .chip, pour lire comme une vraie interface
     de réservation plutôt qu'une simple pile d'étiquettes sur fond dégradé. */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(180deg, rgba(255,252,244,0) 0%, var(--card-bg) 22%);
  border-radius: 22px 22px 0 0;
}
.phone-screen .chip {
  position: relative; z-index: 1;
  background: var(--card-bg); color: var(--ink); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 10px 12px 10px 26px; font-size: 11px; font-weight: 700;
  box-shadow: 0 6px 14px -8px rgba(69,26,3,.35);
}
.phone-screen .chip::before {
  content: ''; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 999px; background: var(--brand-dark);
}
.phone-screen .chip.cta {
  background: var(--hero-span); color: var(--ink); text-align: center; padding-left: 12px;
  box-shadow: 0 8px 18px -8px rgba(250,204,21,.6);
}
.phone-screen .chip.cta::before { display: none; }

/* Visuel réel (audit 2026-08-13) — remplace le mockup .phone-frame quand une vraie image est
   fournie (landing + pages service, voir ServiceController::presentation()/heroImage). Même
   habillage visuel que le mockup (cadre sombre, ombre profonde) pour rester cohérent avec le
   hero existant, mais dimensionné pour une illustration large plutôt qu'un écran de téléphone. */
.hero-visual {
  border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
  background: rgba(255,255,255,.06);
}
.hero-visual img { display: block; width: 100%; height: auto; }

/* ---------- SECTIONS ALTERNÉES IMAGE / TEXTE (accueil, audit 2026-08-13) ---------- */
.feature-row { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
/* Même correctif que .hero .inner ci-dessus — indispensable ici aussi (images larges dans une
   grille), sinon le même débordement horizontal se reproduit sur chaque section. */
.feature-row > * { min-width: 0; }
.feature-row.reverse .feature-media { order: 2; }
.feature-row.reverse .feature-text { order: 1; }
@media (max-width: 860px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; }
  .feature-row.reverse .feature-media, .feature-row .feature-media { order: 1; }
  .feature-row.reverse .feature-text, .feature-row .feature-text { order: 2; }
}
.feature-media {
  border-radius: 22px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow); min-height: 260px; display: flex; align-items: center; justify-content: center;
}
.feature-media img { display: block; width: 100%; height: auto; }
/* Sections sans photo dédiée (ex: taximètre, covoiturage) — grande icône plutôt qu'un visuel
   forcé et incohérent, même esprit que .service-icon mais à l'échelle d'un visuel de section. */
.feature-media.icon-only { padding: 60px 0; }
.feature-media.icon-only .icon-badge {
  width: 108px; height: 108px; border-radius: 28px; display: flex; align-items: center; justify-content: center;
}
.feature-text .eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: 10px;
}
.feature-text h2 { font-size: 25px; font-weight: 900; margin: 0 0 12px; line-height: 1.2; }
.feature-text p.lead { font-size: 14.5px; color: var(--muted); line-height: 23px; margin: 0 0 18px; max-width: 480px; }
.feature-points { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feature-points li {
  display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.feature-points li svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-dark); }
.feature-text .btn-cta {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 800; padding: 12px 20px; border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature-text .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(43,22,8,.4); }
.feature-row-section + .feature-row-section { padding-top: 0; }

/* ---------- COMMENT ÇA MARCHE (réutilisé landing + services + partenaires) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 22px 18px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); }
.step .num {
  width: 30px; height: 30px; border-radius: 10px; background: var(--brand); color: var(--ink);
  font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.step h4 { font-size: 14.5px; font-weight: 800; margin: 0 0 6px; }
.step p { font-size: 12.5px; color: var(--muted); line-height: 19px; margin: 0; }

/* ---------- FAQ (accordéon, réutilisé /aide + pages services) ---------- */
.faq-item { border: 1px solid var(--card-border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 16px 18px; font-size: 14.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 18px; font-weight: 400; color: var(--muted); flex-shrink: 0; transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 18px 18px; font-size: 13.5px; color: var(--muted); line-height: 22px; white-space: pre-line; }

/* ---------- SECTION HEAD (réutilisé landing + services) ---------- */
.section { padding: 64px 0; }
.section-head { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.section-head .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-dark); }
.section-head h2 { font-size: 26px; font-weight: 900; margin: 8px 0 8px; }
.section-head p { font-size: 14px; color: var(--muted); line-height: 22px; margin: 0; }

/* ---------- FOOTER ---------- */
footer.site { background: var(--ink); color: rgba(255,255,255,.7); padding: 40px 0 24px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.footer-brand { max-width: 260px; }
.footer-brand .logo { color: #fff; }
.footer-brand .logo img { height: 96px; width: auto; max-width: 100%; object-fit: contain; }
.footer-brand p { font-size: 12.5px; line-height: 20px; color: rgba(255,255,255,.5); margin-top: 10px; }
.footer-brand .footer-address { display: flex; align-items: flex-start; gap: 6px; }
.footer-brand .footer-address svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }
.footer-col h5 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); margin: 0 0 12px; }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; margin-bottom: 8px; }
.footer-col a:hover { color: var(--brand); }
.footer-col a.phone-line { margin-bottom: 4px; }
.footer-col .phone-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.4); margin-bottom: 1px; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 34px; height: 34px; border-radius: 10px; background: rgba(250,204,21,.12); color: var(--brand);
  display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.socials a:hover { background: rgba(250,204,21,.24); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; font-size: 12px; color: rgba(255,255,255,.4); text-align: center; }