/* ==========================================================================
   Roby Taxi — refonte 2026
   Système de style. HTML/CSS natifs, zéro dépendance.
   RTL by design : uniquement des propriétés logiques (inline-start/end).
   ========================================================================== */

/* ---------- Polices (internalisées, pas de Google Fonts) ---------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-arabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-arabic-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-arabic-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-arabic-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Sous-ensembles latins de Tajawal pour les mots latins dans les pages AR */
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-latin-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ---------- Variables ---------- */
:root {
  /* Marque */
  --corail: #f96b4b;          /* marque : logo, aplats, dégradés, gros titres sur sombre */
  --corail-fonce: #c2401f;    /* texte corail sur fond clair : 5.2:1 sur blanc */
  --corail-nuit: #ff8a6e;     /* texte corail sur fond sombre */
  --orange: #f7a02b;
  --jaune: #ffcc00;           /* micro-accent : badges, soulignés, jamais en grand aplat */

  /* Neutres chauds */
  --encre: #23201d;           /* texte principal : 15.4:1 sur --fond */
  --encre-2: #5c5450;         /* texte secondaire : 6.4:1 sur --fond */
  --fond: #fffcf9;            /* fond de page, blanc chaud */
  --fond-2: #faf3ec;          /* sections alternées */
  --carte: #ffffff;
  --ligne: #eee3d9;
  --sombre: #262019;          /* sections sombres, footer */
  --sombre-2: #332a21;
  --texte-sombre: #f7f1ea;    /* texte sur sections sombres */
  --texte-sombre-2: #cbbfb4;  /* texte secondaire sur sombre : 7:1 sur --sombre */

  --degrade-marque: linear-gradient(100deg, #f7a02b 0%, #f96b4b 55%, #f65e68 100%);

  /* Typo */
  --police-titres: "Poppins", "Tajawal", system-ui, sans-serif;
  --police-texte: "Inter", "Tajawal", system-ui, sans-serif;
  --fs-affiche: clamp(2.4rem, 5.5vw, 3.9rem);
  --fs-1: clamp(1.7rem, 3.4vw, 2.4rem);
  --fs-2: clamp(1.2rem, 2vw, 1.45rem);
  --fs-3: 1.0625rem;
  --fs-corps: 1rem;
  --fs-petit: 0.875rem;

  /* Espacement (spacieux : site marketing) */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: 6rem;

  /* Divers */
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre: 0 2px 8px rgba(38, 32, 25, 0.06), 0 12px 32px rgba(38, 32, 25, 0.08);
  --ombre-forte: 0 4px 12px rgba(38, 32, 25, 0.10), 0 24px 56px rgba(38, 32, 25, 0.16);
  --transition: 200ms ease;
  --largeur: 72rem;
}

/* La typo arabe : Tajawal partout, interlignage plus généreux */
[dir="rtl"] {
  --police-titres: "Tajawal", system-ui, sans-serif;
  --police-texte: "Tajawal", system-ui, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* AUCUN DEPLACEMENT HORIZONTAL DE LA PAGE, sur aucun appareil.
   - `overflow-x: hidden` sur <html> SEUL : il s'applique a la fenetre, qui
     reste le seul conteneur de defilement. Jamais sur <body> : il en ferait un
     conteneur de defilement et casserait les blocs colles (position: sticky).
   - <body> coupe ce qui depasse avec `clip`, qui ne cree pas de conteneur.
   - overscroll-behavior : pas de glissement « precedent / suivant » ni
     d'elastique lateral au trackpad ou au doigt.
   Les zones qui defilent volontairement (.defilement-x) ne sont pas touchees. */
html { overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow: clip) { body { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--police-texte);
  font-size: var(--fs-corps);
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"] body, [dir="rtl"] { line-height: 1.75; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--corail-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }

h1, h2, h3, h4 {
  font-family: var(--police-titres);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-weight: 800; letter-spacing: 0; line-height: 1.35;
}
h1 { font-size: var(--fs-affiche); }
h2 { font-size: var(--fs-1); }
h3 { font-size: var(--fs-2); }

p { max-width: 65ch; }

:focus-visible {
  outline: 3px solid var(--corail-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}
.evitement {
  position: absolute; inset-inline-start: -200vw; top: 0;
  background: var(--encre); color: #fff; padding: var(--e-2) var(--e-3);
  z-index: 100; border-radius: 0 0 var(--rayon-petit) var(--rayon-petit);
}
.evitement:focus { inset-inline-start: var(--e-2); color: #fff; }

.conteneur {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section { padding-block: var(--e-6); }
@media (max-width: 47.9rem) { section { padding-block: var(--e-5); } }

.section-alt { background: var(--fond-2); }
.section-sombre { background: var(--sombre); color: var(--texte-sombre); }
.section-sombre h2, .section-sombre h3 { color: #fff; }
.section-sombre p { color: var(--texte-sombre-2); }
.section-sombre a { color: var(--corail-nuit); }
.section-sombre a:hover { color: #fff; }

.sur-titre {
  display: inline-block;
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: var(--fs-petit);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--corail-fonce);
  margin-block-end: var(--e-2);
}
[dir="rtl"] .sur-titre { letter-spacing: 0; font-weight: 700; }
.section-sombre .sur-titre { color: var(--jaune); }

.entete-section { max-width: 46rem; margin-block-end: var(--e-4); }
.entete-section p { margin-block-start: var(--e-2); color: var(--encre-2); font-size: var(--fs-3); }
.section-sombre .entete-section p { color: var(--texte-sombre-2); }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section.centre p { margin-inline: auto; }

/* ---------- Badge « à confirmer » : aucun chiffre inventé ---------- */
.a-confirmer {
  display: inline-block;
  vertical-align: super;
  font-size: 0.6em;
  font-weight: 600;
  font-family: var(--police-texte);
  letter-spacing: 0.02em;
  color: #7a4b00;
  background: var(--jaune);
  border-radius: 999px;
  padding: 0.1em 0.6em;
  white-space: nowrap;
}

/* ---------- Header ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 252, 249, 0.92);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--ligne);
}
/* En-tete : les libelles ne se coupent JAMAIS.
   Sans `nowrap`, les elements flex se laissent comprimer sous leur largeur
   naturelle et le texte passe a la ligne : « Roby du Coeur » sur trois lignes,
   « Commander un taxi » sur deux, l'en-tete qui grandit de 22 px. Mesure du
   2026-08-12 : la page la plus large (fr/roby-du-coeur) reclamait 1497 px de
   fenetre avec l'ancien espacement, donc elle se cassait sur TOUS les
   portables. L'espacement resserre ci-dessous ramene ce besoin a 1118 px, et
   sous 77rem c'est le menu replie qui prend le relais. */
/* ============================== LA NAVBAR ==============================
   Squelette d'ancrage. Chaque element a un ORDRE et un POINT FIXE, si bien
   qu'aucun clic, aucun changement de page et aucun changement de langue ne
   fait bouger ce qui est deja a l'ecran :

     [logo][nav]..............[CTA secondaire][Commander un taxi][langues]
       |     |         |             |                |             |
       |     |         |             |                |             +- collee au bord droit.
       |     |         |             |                |                Memes trois libelles
       |     |         |             |                |                partout : STRICTEMENT
       |     |         |             |                |                immobile, meme quand
       |     |         |             |                |                on change de langue.
       |     |         |             |                +- bord droit ancre sur la pilule.
       |     |         |             |                   Libelle constant dans une langue :
       |     |         |             |                   immobile sur les 13 pages.
       |     |         |             +- bord droit ancre sur le bouton de commande.
       |     |         |                Seul element a largeur variable (S'inscrire,
       |     |         |                Nous contacter...) : il s'etend vers l'ESPACE
       |     |         |                LIBRE, jamais vers ses voisins.
       |     |         +- ressort central (::before, flex: 1) : il absorbe toute
       |     |            la variation de largeur.
       |     +- collee au logo, dont la largeur est fixe.
       +- bord gauche.

   L'erreur des deux versions precedentes : un `margin auto` pousse un bloc
   CONTRE ses voisins, donc la position de chacun dependait de la largeur des
   autres. Ici chaque element est ancre sur un voisin de largeur constante, et
   l'unique element variable donne sur le ressort. */
.entete-inner {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 0.75rem;
  min-height: 4.5rem;
}
.entete-inner > * { flex: 0 0 auto; }
.logo { order: 1; }
/* Respiration entre la marque et la navigation. C'est une valeur FIXE, donc
   elle ne remet pas en cause l'ancrage : la nav reste calee sur le logo, dont
   la largeur ne bouge pas. Collee au logo, la barre faisait bloc compact a
   gauche avec un grand vide au centre ; ces 44 px redonnent au logo son statut
   de marque et rendent la barre lisible en trois zones. Budget : au point le
   plus serre il restait 98 px de marge, il en reste donc encore 54. */
.entete .nav-principale { order: 2; margin-inline-start: 2.25rem; }
/* le ressort : scope au site (:has) car le tunnel de commande partage cette
   classe d'en-tete avec sa propre mise en page */
.entete-inner:has(.nav-principale)::before { content: ""; flex: 1 1 0; order: 3; }
.entete-inner > .bouton-plein:not(.bouton-commander) { order: 4; }
.entete .bouton-commander { order: 5; }
/* « Mon compte » (2026-10-03) : l'espace prive du client, users.roby.taxi.
   Une icone ronde, son nom en infobulle et pour les lecteurs d'ecran : la
   barre n'avait plus que 54 px de marge a son point le plus serre. Meme ordre
   que la commande ; place avant elle dans le HTML, elle la precede. */
.entete .bouton-compte {
  order: 5; flex: 0 0 auto; inline-size: 2.75rem; block-size: 2.75rem;
  padding: 0; justify-content: center; border-color: var(--ligne); border-radius: 999px;
}
.entete .bouton-compte svg { inline-size: 1.3rem; block-size: 1.3rem; }
.entete .bouton-compte:hover { border-color: var(--encre); }
/* son double dans le menu, pour les ecrans ou l'icone n'a pas sa place */
.nav-principale .nav-compte { display: none; }
.entete .selecteur-langue { order: 6; }
.entete .bouton-nav { order: 7; }
.entete .nav-principale a,
.entete .bouton,
.entete .selecteur-langue a { white-space: nowrap; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; direction: ltr; }
.logo img { height: 3rem; width: auto; }

.nav-principale ul { display: flex; flex-wrap: nowrap; gap: 0.75rem; list-style: none; align-items: center; }
.nav-principale a {
  text-decoration: none; color: var(--encre); font-weight: 500; font-size: var(--fs-petit);
  padding: 0.4rem 0.15rem; border-block-end: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-principale a:hover { color: var(--corail-fonce); }
.nav-principale a[aria-current="page"] { color: var(--corail-fonce); border-block-end-color: var(--corail); }

/* Un peu moins de rembourrage que les boutons de contenu : c'est ce qui
   permet de garder les cinq liens, les langues et les deux appels a l'action
   sur une seule ligne jusqu'a 1232 px. */
.entete .bouton { padding-inline: 0.85rem; }

/* Budget de largeur de l'en-tete : le conteneur offre 1072 px utiles
   (1152 moins deux fois 40 px de padding). Le pire cas mesure apres ces
   reglages est fr/roby-du-coeur. Tout nouveau libelle qui fait redeborder
   ce budget doit se voir en recette : la pilule des langues decolle alors
   du bord droit, c'est le symptome. */

/* Copie du CTA secondaire deposee par main.js dans la liste du menu : invisible
   tant que la barre large l'affiche elle-meme, reaffichee dans le menu replie. */
.nav-cta-repli { display: none; }

.selecteur-langue { display: flex; gap: 2px; align-items: center; border: 1px solid var(--ligne); border-radius: 999px; padding: 3px; }
.selecteur-langue a {
  text-decoration: none; font-size: 0.78rem; font-weight: 600; color: var(--encre-2);
  padding: 0.2rem 0.55rem; border-radius: 999px; transition: background var(--transition), color var(--transition);
}
/* Dans l'en-tete, la pilule se resserre : trois libelles pour un reglage
   qu'on touche une fois par session, c'est la largeur la moins bien employee
   de la barre, et c'est elle qui finance la respiration autour du logo. */
.entete .selecteur-langue a { padding-inline: 0.4rem; }
.selecteur-langue a:hover { color: var(--encre); background: var(--fond-2); }
.selecteur-langue a[aria-current="true"] { background: var(--encre); color: #fff; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--police-titres); font-weight: 600; font-size: var(--fs-petit);
  text-decoration: none; cursor: pointer;
  padding: 0.75rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }
.bouton-plein { background: var(--corail); color: var(--encre); box-shadow: 0 4px 14px rgba(249, 107, 75, 0.35); }
.bouton-plein:hover { background: #fa7c5f; color: var(--encre); }
.bouton-contour { border-color: var(--encre); color: var(--encre); }
.bouton-contour:hover { background: var(--encre); color: #fff; }
.section-sombre .bouton-contour { border-color: var(--texte-sombre); color: var(--texte-sombre); }
.section-sombre .bouton-contour:hover { background: var(--texte-sombre); color: var(--encre); }
.bouton-grand { padding: 0.95rem 1.8rem; font-size: var(--fs-3); }

/* Burger mobile */
.bouton-nav {
  display: none; background: none; border: none; cursor: pointer;
  padding: 0.5rem; margin-inline-start: auto; color: var(--encre);
}
/* 76.9rem et non 63.9rem : en dessous de 1232 px l'en-tete francais complet
   ne tient plus sur une ligne (1118 px de contenu + les marges du conteneur).
   Mieux vaut le menu replie, deja concu pour ca, qu'un en-tete qui deborde. */
@media (max-width: 76.9rem) {
  .bouton-nav { display: inline-flex; }
  .nav-principale {
    display: none;
    /* le volet deroulant occupe toute la largeur : la respiration desktop
       le decalerait du bord */
    margin-inline-start: 0;
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--fond); border-block-end: 1px solid var(--ligne);
    padding: var(--e-3) clamp(1.25rem, 4vw, 2.5rem) var(--e-4);
    box-shadow: var(--ombre);
  }
  .nav-principale.ouverte { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: var(--e-2); }
  .nav-principale a { display: block; font-size: var(--fs-3); padding: 0.6rem 0; }
  /* Le CTA secondaire (S'inscrire, Nous contacter, Le site Roby du Coeur)
     quitte la barre ; celui de commande, lui, reste TOUJOURS visible : c'est
     le point d'entree du service en direct.
     Attention : `display: none` seul le faisait disparaitre PARTOUT, y compris
     sur tous les telephones, ou aucun menu ne le reprenait. main.js en depose
     donc une copie dans la liste du menu, reaffichee juste en dessous. */
  .entete-inner > .bouton-plein:not(.bouton-commander) { display: none; }
  .entete .nav-cta-repli { display: block; margin-block-start: var(--e-2); }
  .entete .nav-cta-repli .bouton { display: inline-flex; inline-size: 100%; }
  /* Ordre mobile : logo, CTA de commande, langues, menu. Le CTA se reduit a
     son icone et ne pousse jamais le hamburger hors de l'ecran. */
  .entete-inner { flex-wrap: nowrap; gap: 0.5rem; }
  /* le ressort du squelette desktop laisse la place au margin auto du CTA */
  .entete-inner:has(.nav-principale)::before { content: none; }
  .logo { flex: 0 1 auto; min-inline-size: 0; }
  .entete .bouton-commander {
    order: 2; margin-inline-start: auto; flex: 0 0 auto;
    padding-inline: 0.8rem; gap: 0;
  }
  /* Sur telephone et tablette, « Mon compte » passe dans le menu : en barre,
     son icone prenait sa place au logo (53 px au lieu de 105 a 375 px de
     large, plus rien a 320), et le logo ne se touche pas. */
  .entete .bouton-compte { display: none; }
  .nav-principale .nav-compte { display: list-item; }
  .entete .bouton-commander span {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%);
  }
  .selecteur-langue { order: 3; flex: 0 0 auto; }
  .bouton-nav { order: 4; flex: 0 0 auto; }
}

/* ---------- Hero ---------- */
.hero { overflow: hidden; position: relative; padding-block: var(--e-5) var(--e-6); }
.hero-grille {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--e-5); align-items: center;
}
@media (max-width: 63.9rem) { .hero-grille { grid-template-columns: 1fr; gap: var(--e-4); } }
.hero h1 { margin-block: var(--e-2) var(--e-3); }
.hero h1 .accent {
  background: var(--degrade-marque);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .hero-texte p { font-size: var(--fs-2); color: var(--encre-2); margin-block-end: var(--e-3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-block-start: var(--e-3); }
.hero-note { font-size: var(--fs-petit); color: var(--encre-2); margin-block-start: var(--e-2); }

.badge-legitimite {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 999px;
  font-size: var(--fs-petit); font-weight: 600; padding: 0.4rem 1rem; color: var(--encre);
  box-shadow: var(--ombre);
}
.badge-legitimite .puce { width: 9px; height: 9px; border-radius: 50%; background: var(--jaune); border: 2px solid var(--encre); flex-shrink: 0; }

/* Téléphone + animation du rayon de recherche (algorithme RunRequest réel) */
.hero-visuel { display: flex; justify-content: center; }
.telephone {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 320 / 650;
  background: var(--encre);
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--ombre-forte);
}
.telephone::after {
  content: ""; position: absolute; top: 24px; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 90px; height: 24px; background: var(--encre); border-radius: 999px; z-index: 3;
}
[dir="rtl"] .telephone::after { transform: translateX(50%); }
.ecran {
  position: relative; width: 100%; height: 100%;
  border-radius: 34px; overflow: hidden;
  background:
    linear-gradient(rgba(255, 252, 249, 0) 60%, rgba(255, 252, 249, 0.9)),
    repeating-linear-gradient(0deg, #f2e9df 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, #f2e9df 0 1px, transparent 1px 56px),
    linear-gradient(160deg, #fbf5ee, #f3e8dc);
}
.rue { position: absolute; background: #e8dccd; }
.rue-1 { width: 140%; height: 14px; top: 30%; inset-inline-start: -20%; transform: rotate(-14deg); }
.rue-2 { width: 14px; height: 120%; top: -10%; inset-inline-start: 62%; transform: rotate(10deg); }
.point-prise {
  position: absolute; top: 46%; inset-inline-start: 50%;
  width: 18px; height: 18px; margin: -9px;
  background: var(--corail); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); z-index: 2;
}
[dir="rtl"] .point-prise { margin-inline-start: 0; margin-inline-end: -9px; }
.rayon {
  position: absolute; top: 46%; inset-inline-start: 50%;
  width: 30px; height: 30px;
  border: 2px solid var(--corail);
  background: rgba(249, 107, 75, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rayon-expansion 5s ease-out infinite;
}
[dir="rtl"] .rayon { transform: translate(50%, -50%); }
.rayon:nth-child(2) { animation-delay: 1.6s; }
.rayon:nth-child(3) { animation-delay: 3.2s; }
@keyframes rayon-expansion {
  0%   { width: 30px;  height: 30px;  opacity: 0.9; }
  100% { width: 260px; height: 260px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rayon { animation: none; width: 160px; height: 160px; opacity: 0.35; }
}
.taxi-carte {
  position: absolute; width: 34px; height: 34px; border-radius: 10px;
  background: var(--jaune); border: 2px solid var(--encre);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  color: var(--encre);
}
.taxi-carte svg { width: 20px; height: 20px; }
.taxi-1 { top: 22%; inset-inline-start: 18%; }
.taxi-2 { top: 64%; inset-inline-start: 70%; }
.taxi-3 { top: 76%; inset-inline-start: 26%; }
.etiquette-rayon {
  position: absolute; inset-inline: 16px; bottom: 16px;
  background: var(--carte); border-radius: var(--rayon-petit);
  box-shadow: var(--ombre); padding: 0.6rem 0.9rem;
  font-size: 0.8rem; font-weight: 600; color: var(--encre);
  display: flex; align-items: center; gap: 0.5rem; z-index: 2;
}
.etiquette-rayon .puce-live { width: 8px; height: 8px; border-radius: 50%; background: var(--corail); animation: pulse-live 1.5s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse-live { 50% { opacity: 0.35; } }

/* ---------- Bandeau villes ---------- */
.bandeau-villes { border-block: 1px solid var(--ligne); padding-block: var(--e-3); background: var(--carte); }
.bandeau-villes .conteneur { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; justify-content: center; }
.bandeau-villes .ville { font-family: var(--police-titres); font-weight: 600; font-size: var(--fs-petit); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
.bandeau-villes a.ville { text-decoration: none; transition: color var(--transition); }
.bandeau-villes a.ville:hover { color: var(--corail-fonce); }
[dir="rtl"] .bandeau-villes .ville { letter-spacing: 0; }
.bandeau-villes .ville.bientot { color: var(--corail-fonce); }
.bandeau-villes .note { flex-basis: 100%; text-align: center; font-size: var(--fs-petit); color: var(--encre-2); }

/* ---------- Bifurcation passager / chauffeur ---------- */
.bifurcation { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
@media (max-width: 63.9rem) { .bifurcation { grid-template-columns: 1fr; } }
.carte-parcours {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 26rem; border-radius: var(--rayon); overflow: hidden;
  color: #fff; text-decoration: none;
  box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-parcours:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-parcours img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.carte-parcours:hover img { transform: scale(1.04); }
.carte-parcours .voile {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(38, 32, 25, 0) 30%, rgba(38, 32, 25, 0.88) 100%);
}
.carte-parcours .contenu { position: relative; padding: var(--e-4); }
.carte-parcours h3 { color: #fff; font-size: var(--fs-1); margin-block-end: var(--e-1); }
.carte-parcours p { color: rgba(255, 255, 255, 0.85); margin-block-end: var(--e-2); }
.carte-parcours .faux-lien {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--police-titres); font-weight: 600; color: var(--jaune);
}
.carte-parcours .faux-lien svg { transition: transform var(--transition); }
.carte-parcours:hover .faux-lien svg { transform: translateX(4px); }
[dir="rtl"] .carte-parcours:hover .faux-lien svg { transform: translateX(-4px); }

/* ---------- Grille des piliers / cartes ---------- */
.grille-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
@media (max-width: 63.9rem) { .grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 47.9rem) { .grille-cartes { grid-template-columns: 1fr; } }
.carte {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: var(--e-4) var(--e-3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.carte .icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(247, 160, 43, 0.16), rgba(249, 107, 75, 0.16));
  color: var(--corail-fonce); margin-block-end: var(--e-2);
}
.carte .icone svg { width: 24px; height: 24px; }
.carte h3 { font-size: var(--fs-3); margin-block-end: var(--e-1); }
.carte p { font-size: var(--fs-petit); color: var(--encre-2); }
.section-sombre .carte { background: var(--sombre-2); border-color: rgba(255, 255, 255, 0.08); }
.section-sombre .carte h3 { color: #fff; }
.section-sombre .carte p { color: var(--texte-sombre-2); }
.section-sombre .carte .icone { background: rgba(255, 204, 0, 0.12); color: var(--jaune); }

/* ---------- Chiffres ---------- */
.grille-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); text-align: center; }
@media (max-width: 47.9rem) { .grille-chiffres { grid-template-columns: 1fr; } }
.chiffre .valeur {
  font-family: var(--police-titres); font-weight: 700; font-size: var(--fs-affiche);
  background: var(--degrade-marque);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.1;
}
.chiffre .legende { color: var(--texte-sombre-2); font-size: var(--fs-3); margin-block-start: var(--e-1); }

/* ---------- Étapes ---------- */
.grille-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); counter-reset: etape; }
@media (max-width: 63.9rem) { .grille-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 47.9rem) { .grille-etapes { grid-template-columns: 1fr; } }
.etape { counter-increment: etape; position: relative; padding-block-start: var(--e-3); }
.etape::before {
  content: counter(etape);
  position: absolute; top: 0; inset-inline-start: 0;
  font-family: var(--police-titres); font-weight: 700; font-size: 2.6rem; line-height: 1;
  background: var(--degrade-marque);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.etape h3 { font-size: var(--fs-3); margin-block: var(--e-2) var(--e-1); }
.etape p { font-size: var(--fs-petit); color: var(--encre-2); }

/* ---------- Section médias (texte + image) ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); align-items: center; }
@media (max-width: 63.9rem) { .duo { grid-template-columns: 1fr; gap: var(--e-4); } }
.duo img { border-radius: var(--rayon); box-shadow: var(--ombre); width: 100%; object-fit: cover; }
.duo .texte h2 { margin-block-end: var(--e-2); }
.duo .texte p { color: var(--encre-2); margin-block-end: var(--e-2); }
.duo .texte ul { list-style: none; margin-block: var(--e-3); display: grid; gap: var(--e-2); }
.duo .texte li { display: flex; gap: 0.75rem; align-items: flex-start; }
.duo .texte li svg { flex-shrink: 0; color: var(--corail-fonce); margin-block-start: 0.2rem; width: 20px; height: 20px; }
.section-sombre .duo .texte p { color: var(--texte-sombre-2); }
.section-sombre .duo .texte li svg { color: var(--jaune); }

/* ---------- Captures d'app ---------- */
/* ==================== PARCOURS DANS L'APPLICATION ====================
   Accueil, « Comment ça marche ». Un iPhone 17 dessiné en CSS (aucune image
   de cadre) affiche les vrais écrans de l'application.

   La scène reste collée à l'écran pendant que le bloc défile ; sa hauteur
   fixe la longueur du défilement (--etapes x 55svh). js/main.js traduit la
   position de défilement en une position CONTINUE entre les étapes et pose :
     --pos sur le bloc      (0 à n-1, décimal)
     --a   sur chaque étape (1 = étape courante, 0 = à une étape ou plus)
     --d   sur chaque étape (écart signé à l'étape courante)
   Rien n'est animé par transition CSS : tout suit le doigt ou la molette,
   avec un amorti calculé en JavaScript. C'est ce qui rend le mouvement fluide.

   Ordinateur et tablette : l'iPhone sur une moitié, la suite des écrans sur
   l'autre (un rail de vignettes et de textes qui monte au fil du défilement).
   Téléphone : plein écran, l'en-tête du site s'efface.
   Sans JavaScript (.anime absent) : liste de cartes, premier écran affiché. */
.parcours-app { margin-block-start: var(--e-4); --pas: 13.5rem; --tranche: 55svh; position: relative; }
.parcours-scene {
  display: grid; justify-content: center; align-items: center;
  grid-template-columns: auto minmax(0, 27rem); gap: var(--e-5);
}
.parcours-app.anime { height: calc(var(--etapes, 10) * var(--tranche) + 100svh); }
/* Crans de défilement (posés par js/main.js), sans effet hors téléphone. */
.parcours-cran { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* Hauteur DYNAMIQUE (dvh) et non la petite (svh) : sur iPhone, quand la barre
   de Safari se replie, l'ecran gagne une centaine de pixels ; avec svh la
   scene restait courte et laissait une bande vide en bas (constate sur
   iPhone 17 le 2026-10-01). */
.parcours-app.anime .parcours-scene {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  touch-action: pan-y;   /* le doigt ne fait que defiler, jamais glisser de cote */
}
/* PLEIN ECRAN, a toutes les largeurs : tant que le parcours defile, l'en-tete
   du site s'efface (classe .parcours-plein posee par js/main.js) et la scene
   occupe toute la hauteur. Le haut et le bas sont legerement assombris, sur
   toute la largeur de la fenetre, pour cadrer la scene comme un ecran. */
.entete { transition: transform 280ms ease; }
.parcours-plein .entete { transform: translateY(-100%); }
/* RIEN NE PASSE AU-DESSUS DE LA BARRE DE NAVIGATION.
   Sur iPhone, Safari dessine aussi la page dans la zone située au-dessus de la
   fenêtre : sous sa barre d'adresse flottante et autour de la caméra. Le
   contenu qui défile y réapparaissait, par transparence, au-dessus de
   l'en-tête (retour sur iPhone 17, 2026-10-01). Deux caches opaques :
   - un prolongement de l'en-tête vers le haut, de sa propre couleur ;
   - une bande fixe juste au-dessus de la fenêtre, qui prend la couleur de la
     scène quand l'en-tête s'efface pendant le parcours.
   Sur ordinateur, tout cela est hors écran et ne change rien. */
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 60vh;
  background: var(--fond); pointer-events: none;
}
html::before {
  content: ""; position: fixed; left: 0; right: 0; top: -60vh; height: 60vh; z-index: 70;
  background: var(--fond); pointer-events: none; transition: background-color 280ms ease;
}
html.parcours-plein::before { background: var(--fond-2); }
@media (max-width: 47.9rem) {
  /* en-tête opaque sur téléphone : translucide, il laissait deviner ce qui
     défile dessous, dans le prolongement de la barre de Safari */
  .entete { background: var(--fond); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.parcours-app.anime .parcours-scene > * { position: relative; z-index: 1; }
/* Haut et bas assombris : deux voiles FIXES sur la fenetre, visibles seulement
   pendant le parcours. Fixes, donc jamais plus larges que l'ecran (l'ancienne
   version en 100vw depassait de la largeur de la barre de defilement). */
body::before, body::after {
  content: ""; position: fixed; left: 0; right: 0; height: 24vh; z-index: 61;
  pointer-events: none; opacity: 0; transition: opacity 320ms ease;
}
body::before { top: 0; background: linear-gradient(to bottom, rgba(38, 32, 25, 0.16), rgba(38, 32, 25, 0)); }
body::after { bottom: 0; background: linear-gradient(to top, rgba(38, 32, 25, 0.16), rgba(38, 32, 25, 0)); }
.parcours-plein body::before, .parcours-plein body::after { opacity: 1; }
@media (max-width: 47.9rem) { body::before { display: none; } }

/* --- L'iPhone 17 : proportions 402 x 874 pt, bord fin, Dynamic Island.
       --h-iphone règle sa taille et place les boutons latéraux. --- */
.iphone {
  position: relative; box-sizing: border-box;
  --h-iphone: min(74svh, 640px);
  height: var(--h-iphone); aspect-ratio: 422 / 894;
  padding: 2.4%;
  border-radius: 15% / 7.1%;
  background: linear-gradient(145deg, #3a3a3f 0%, #17171a 45%, #2a2a2e 100%);
  box-shadow:
    0 0 0 1.5px #8d8b88,
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 3px #0d0d0f,
    0 50px 90px -40px rgba(60, 30, 10, 0.55),
    0 18px 36px -18px rgba(38, 32, 25, 0.35);
  direction: ltr;
}
/* boutons : action et volumes à gauche, bouton latéral et Camera Control à droite */
.iphone::before, .iphone::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #6f6d6a, #a9a6a2);
}
.iphone::before { left: -3px; top: 17%; height: 4.2%; box-shadow: 0 calc(var(--h-iphone) * 0.085) 0 #8d8b88, 0 calc(var(--h-iphone) * 0.17) 0 #8d8b88; }
.iphone::after { right: -3px; top: 25%; height: 9%; box-shadow: 0 calc(var(--h-iphone) * 0.23) 0 -0.5px #8d8b88; }
.iphone-ecran {
  position: relative; width: 100%; height: 100%;
  border-radius: 12.8% / 5.9%; overflow: hidden;
  background: #fff; container-type: inline-size;
  transform: translateZ(0); /* coins arrondis nets pendant les mouvements */
}
.ios-statut {
  position: absolute; inset: 0 0 auto 0; z-index: 3; height: 12.5cqi;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 8.5cqi 7.5cqi; background: #fff; color: #111;
  font: 600 4.3cqi/1 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.ios-heure { inline-size: 18cqi; }
.ios-ilot {
  position: absolute; top: 3cqi; left: 50%; transform: translateX(-50%);
  width: 31cqi; height: 9cqi; border-radius: 99px; background: #000;
}
.ios-icones svg { display: block; width: 17cqi; height: auto; }
.iphone-images { position: absolute; inset: 12.5cqi 0 0 0; overflow: hidden; overflow: clip; contain: paint; background: #fff; }
/* UN SEUL EFFET, CHRONOMETRE : l'écran suivant apparaît en fondu par-dessus le
   précédent, en 0,7 s, sur la courbe qu'emploie apple.com. Le fondu ne suit
   PAS le doigt image par image : il part quand on change d'étape et se déroule
   à sa vitesse, que l'on défile vite ou lentement. Ni zoom ni déplacement :
   une image redimensionnée pendant le défilement devient floue sur iPhone, et
   un effet recalculé à chaque image tremble.
   .vu = écrans déjà atteints (opaques, empilés dans l'ordre) : le suivant se
   fond sur le précédent, jamais sur du blanc. */
.ecran-app {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 700ms cubic-bezier(0.4, 0, 0.6, 1);
}
.ecran-app.vu { opacity: 1; }
.parcours-app:not(.anime) .ecran-app:first-child { opacity: 1; }

/* --- Les étapes : cartes simples sans JavaScript --- */
.parcours-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.carte-etape {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: var(--e-4); box-shadow: var(--ombre-forte);
}
.vignette-etape { display: none; }
.carte-num {
  display: block; font-family: var(--police-titres); font-weight: 700;
  font-size: 3.2rem; line-height: 1;
  background: var(--degrade-marque);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.carte-etape h3 { font-size: var(--fs-2); margin-block: var(--e-2) var(--e-1); }
.carte-etape p { color: var(--encre-2); margin: 0; }
.parcours-points { display: none; }
.parcours-points button {
  width: 0.6rem; height: 0.6rem; padding: 0; border: 0; border-radius: 99px;
  background: rgba(38, 32, 25, 0.2); cursor: pointer;
  transition: width 300ms ease, background 300ms ease;
}
.parcours-points button.actif { width: 1.8rem; background: var(--corail); }

/* ORDINATEUR ET TABLETTE : une moitié pour l'iPhone, l'autre pour la suite.
   Le rail porte toutes les étapes, vignette de l'écran comprise ; il monte en
   continu (--pos) pour garder l'étape courante au milieu. Celles d'après se
   devinent dessous, estompées : on découvre les écrans à venir. */
@media (min-width: 48rem) {
  .parcours-app.anime .parcours-scene { grid-template-columns: 1fr 1fr; gap: 0; justify-content: stretch; }
  .parcours-app.anime .iphone { justify-self: center; --h-iphone: min(calc(100dvh - 5.5rem), 760px); }
  .parcours-app.anime .parcours-texte {
    height: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
  }
  .parcours-app.anime .parcours-cartes {
    position: absolute; inset-inline: 0; top: 50%; margin-block-start: calc(var(--pas) / -2);
    display: block;
    transform: translate3d(0, calc(var(--pos, 0) * -1 * var(--pas)), 0);
    will-change: transform;
  }
  .parcours-app.anime .carte-etape {
    height: var(--pas); box-sizing: border-box;
    display: grid; grid-template-columns: 5.75rem auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 1.1rem; align-items: center;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    padding: 0 var(--e-3) 0 0; padding-inline: 0 var(--e-3);
    opacity: calc(0.42 + 0.58 * var(--a, 0));
    transform: scale(calc(0.86 + 0.14 * var(--a, 0)));
    transform-origin: 0 50%;
    cursor: pointer;
  }
  [dir="rtl"] .parcours-app.anime .carte-etape { transform-origin: 100% 50%; }
  .parcours-app.anime .vignette-etape {
    display: block; grid-column: 1; grid-row: 1 / -1; align-self: center;
    width: 100%; height: auto; border-radius: 12px;
    border: 1px solid var(--ligne); box-shadow: var(--ombre);
    object-fit: cover; object-position: top center;
  }
  .parcours-app.anime .carte-num { grid-column: 2; grid-row: 1 / -1; font-size: 3.2rem; min-inline-size: 1.4em; text-align: center; }
  .parcours-app.anime .carte-etape h3 { grid-column: 3; grid-row: 2; font-size: 1.45rem; margin: 0 0 0.35rem; }
  .parcours-app.anime .carte-etape p { grid-column: 3; grid-row: 3; font-size: 1rem; line-height: 1.45; max-width: 26rem; }
}

/* TELEPHONE. Regles tirees des essais sur un vrai iPhone 17 :
   1. RIEN NE DEPEND DE LA BARRE DE SAFARI. La scene fait 100lvh (hauteur
      barre repliee, fixe) : jamais de bande vide dessous. L'iPhone se
      dimensionne sur cette meme hauteur fixe, donc il ne change pas de taille
      quand la barre apparait ou disparait (c'est ce qui le faisait trembler
      avec dvh). Barre deployee, elle recouvre simplement le bas de l'iPhone.
   2. La legende est EN HAUT, l'iPhone dessous : ce qui peut passer sous la
      barre est le bas de l'appareil, jamais le texte.
   3. L'iPhone est entier et immobile ; les ecrans et les legendes changent
      par fondu chronometre, pas au rythme du doigt.
   4. Une etape dure 70 % d'une hauteur d'ecran de defilement : assez pour
      lire, sans avoir a s'arreter. */
@media (max-width: 47.9rem) {
  .parcours-scene { grid-template-columns: 1fr; justify-items: center; gap: var(--e-3); }
  .iphone { --h-iphone: min(52svh, 470px); }
  .parcours-texte { width: 100%; }
  .carte-etape { padding: var(--e-3); text-align: center; }
  .carte-num { font-size: 2.2rem; }
  .carte-etape h3 { margin-block: var(--e-1) 0.35rem; }

  .parcours-app { --tranche: 70svh; }
  .parcours-app.anime { height: calc(var(--etapes, 10) * var(--tranche) + 100vh); height: calc(var(--etapes, 10) * var(--tranche) + 100lvh); }
  .parcours-app.anime .parcours-scene {
    height: 100vh; height: 100lvh;
    z-index: 60;
    display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    justify-items: center; align-items: start; gap: 0;
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
    padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem) 0;
    background: var(--fond-2);
    --legende: 7.6rem;
  }
  .parcours-app.anime .parcours-texte { order: 1; min-height: var(--legende); display: grid; align-items: end; padding-block-end: 0.9rem; }
  .parcours-app.anime .iphone {
    order: 2;
    /* 5.6rem : marges du haut, plus un espace net sous l'appareil pour qu'il ne
       touche pas le bas de l'ecran ni la barre de Safari */
    --h-iphone: min(calc(100vh - var(--legende) - 5.6rem), calc(86vw * 894 / 422));
    --h-iphone: min(calc(100lvh - var(--legende) - 5.6rem), calc(86vw * 894 / 422));
  }
  /* les legendes sont empilees au meme endroit ; l'ancienne s'efface vite,
     la nouvelle arrive ensuite : jamais deux textes superposes */
  .parcours-app.anime .parcours-cartes { display: grid; gap: 0; }
  .parcours-app.anime .carte-etape {
    grid-area: 1 / 1; align-self: end;
    background: none; border: 0; box-shadow: none; padding: 0;
    display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center;
    text-align: start; max-width: 26rem; margin-inline: auto; width: 100%;
    opacity: 0; transition: opacity 240ms cubic-bezier(0.4, 0, 0.6, 1);
  }
  .parcours-app.anime .carte-etape.actif { opacity: 1; transition: opacity 520ms cubic-bezier(0.4, 0, 0.6, 1) 220ms; }
  .parcours-app.anime .carte-num { font-size: 2.9rem; line-height: 0.95; grid-row: 1 / span 2; align-self: center; }
  .parcours-app.anime .carte-etape h3 { font-size: 1.15rem; line-height: 1.2; margin: 0 0 0.2rem; align-self: end; }
  .parcours-app.anime .carte-etape p {
    font-size: 0.92rem; line-height: 1.35; align-self: start;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* TELEPHONE : UN GESTE = UN ECRAN.
   Sans cela, l'elan du defilement d'iOS fait traverser trois ou quatre etapes
   d'un seul coup de doigt (retour sur iPhone 17 : « trop rapide »). Pendant
   que le parcours est epingle, le defilement de la page s'accroche a un cran
   par etape, et `scroll-snap-stop: always` interdit d'en sauter un : chaque
   geste avance ou recule d'exactement un ecran, avec l'animation native d'iOS.
   Un cran avant le bloc et un cran apres servent de sorties : arrive la, le
   parcours n'est plus epingle, la classe tombe et la page defile librement.
   Reserve aux ecrans tactiles : a la molette, un accrochage force gene. */
@media (max-width: 47.9rem) and (pointer: coarse) {
  html.parcours-plein, html.parcours-plein body { scroll-snap-type: y mandatory; }
  .parcours-cran { scroll-snap-align: start; scroll-snap-stop: always; }
}

.galerie-captures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
@media (max-width: 63.9rem) { .galerie-captures { grid-template-columns: repeat(2, 1fr); } }
.capture { text-align: center; }
.capture img {
  border-radius: 22px; border: 6px solid var(--encre);
  box-shadow: var(--ombre); margin-inline: auto; width: 100%; max-width: 240px;
}
.capture figcaption { font-size: var(--fs-petit); color: var(--encre-2); margin-block-start: var(--e-2); }
.note-captures { text-align: center; margin-block-start: var(--e-3); font-size: var(--fs-petit); color: var(--encre-2); }

/* ---------- Boutons stores ---------- */
.boutons-stores { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* Sur la page de validation d'email: le magasin de l'appareil qui lit la page
   passe devant, l'autre reste la, en retrait. Jamais cache: un agent
   utilisateur se trompe, et un bouton disparu ne se retrouve pas. */
.bouton-store.store-mis-en-avant { order: -1; box-shadow: 0 0 0 2px var(--corail, #f96b4b); }
.bouton-store.store-secondaire { opacity: .62; }
.bouton-store.store-secondaire:hover,
.bouton-store.store-secondaire:focus-visible { opacity: 1; }
.bouton-store {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--encre); color: #fff; text-decoration: none;
  border-radius: 12px; padding: 0.55rem 1.1rem; min-height: 3.25rem;
  transition: transform var(--transition), background var(--transition);
}
.bouton-store:hover { transform: translateY(-2px); background: #000; color: #fff; }
.bouton-store svg { width: 26px; height: 26px; flex-shrink: 0; }
.bouton-store .lignes { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.bouton-store .pre { font-size: 0.65rem; opacity: 0.8; }
.bouton-store .nom { font-family: var(--police-titres); font-weight: 600; font-size: 0.95rem; }
.section-sombre .bouton-store { background: #fff; color: var(--encre); }
.section-sombre .bouton-store:hover { background: var(--jaune); color: var(--encre); }

/* ---------- Bande CTA finale ---------- */
.cta-bande {
  background: var(--degrade-marque);
  border-radius: var(--rayon);
  padding: var(--e-5) var(--e-4);
  text-align: center; color: var(--encre);
}
.cta-bande h2 { color: var(--encre); margin-block-end: var(--e-2); }
.cta-bande p { margin-inline: auto; margin-block-end: var(--e-3); color: rgba(35, 32, 29, 0.85); font-size: var(--fs-3); }
.cta-bande .boutons-stores { justify-content: center; }

/* ---------- Tableaux (tarifs, comparatif) ---------- */
.defilement-x { overflow-x: auto; }
table.tableau { border-collapse: collapse; width: 100%; min-width: 34rem; }
.tableau th, .tableau td { text-align: start; padding: var(--e-2) var(--e-3); border-block-end: 1px solid var(--ligne); }
.tableau th { font-family: var(--police-titres); font-weight: 600; font-size: var(--fs-petit); text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-2); }
[dir="rtl"] .tableau th { letter-spacing: 0; }
.tableau td .oui { color: #1d7a3c; font-weight: 600; }
.tableau td .non { color: var(--encre-2); }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; }
.faq details {
  border: 1px solid var(--ligne); border-radius: var(--rayon-petit);
  background: var(--carte); margin-block-end: var(--e-2);
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--police-titres); font-weight: 600; font-size: var(--fs-3);
  padding: var(--e-3); position: relative;
  padding-inline-end: 3rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; inset-inline-end: var(--e-3); top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--corail-fonce);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 var(--e-3) var(--e-3); color: var(--encre-2); }

/* ---------- Pied de page ---------- */
.pied { background: var(--sombre); color: var(--texte-sombre-2); padding-block: var(--e-5) var(--e-3); }
.pied a { color: var(--texte-sombre-2); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--e-4); }
@media (max-width: 63.9rem) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 47.9rem) { .pied-grille { grid-template-columns: 1fr; } }
.pied h3 { color: #fff; font-size: var(--fs-petit); text-transform: uppercase; letter-spacing: 0.1em; margin-block-end: var(--e-2); }
[dir="rtl"] .pied h3 { letter-spacing: 0; }
.pied ul { list-style: none; display: grid; gap: 0.6rem; font-size: var(--fs-petit); }
.pied .pied-marque img { height: 2.5rem; width: auto; margin-block-end: var(--e-2); }
.pied .pied-marque p { font-size: var(--fs-petit); max-width: 30ch; }
.pied .boutons-stores { margin-block-start: var(--e-2); }
.pied .bouton-store { background: var(--sombre-2); }
.pied .bouton-store:hover { background: #000; }
.pied-bas {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  margin-block-start: var(--e-4); padding-block-start: var(--e-3);
  display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.pied-signature { flex-basis: 100%; }
.pied-signature a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--texte-sombre-2); text-decoration: none;
}
.pied-signature a:hover { color: #fff; text-decoration: none; }
.pied-signature img { display: inline-block; }

/* ---------- Pages intérieures ---------- */
.pagehead { padding-block: var(--e-5); background: var(--fond-2); }
.pagehead h1 { margin-block: var(--e-2); }
.pagehead p { font-size: var(--fs-2); color: var(--encre-2); }
.pagehead.pagehead-sombre { background: var(--sombre); color: var(--texte-sombre); }
.pagehead.pagehead-sombre h1 { color: #fff; }
.pagehead.pagehead-sombre p { color: var(--texte-sombre-2); }

/* Pages légales : prose */
.prose { max-width: 46rem; }
.prose h2 { font-size: var(--fs-2); margin-block: var(--e-4) var(--e-2); }
.prose h3 { font-size: var(--fs-3); margin-block: var(--e-3) var(--e-1); }
.prose p, .prose li { color: var(--encre-2); margin-block-end: var(--e-2); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose h4 { font-size: var(--fs-3); font-weight: 600; margin-block: var(--e-3) var(--e-1); color: var(--encre); }
/* Ancres : le titre ne doit pas finir sous l'en-tête collant */
.prose h2[id], .prose h3[id] { scroll-margin-top: 6.5rem; }

/* Documents juridiques longs (CGU, confidentialité, CNDP), générés par
   legal/generer.py : sommaire collant à côté du texte sur grand écran,
   replié au-dessus du texte sur téléphone. */
.doc-legal { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 64rem) {
  .doc-legal:has(.sommaire) { grid-template-columns: 17rem minmax(0, 46rem); gap: var(--e-5); }
  .doc-legal .sommaire {
    position: sticky; top: 6.5rem;
    max-height: calc(100vh - 8rem); overflow: auto;
  }
}
.sommaire {
  background: var(--fond-2); border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit); padding: var(--e-2) var(--e-3);
  font-size: var(--fs-petit);
}
.sommaire summary {
  cursor: pointer; font-family: var(--police-titres); font-weight: 600;
  color: var(--encre); padding-block: 0.25rem;
}
.sommaire ol { list-style: none; margin: var(--e-1) 0 0; padding: 0; display: grid; gap: 0.15rem; }
.sommaire a {
  display: block; padding: 0.35rem 0.5rem; border-radius: 8px;
  color: var(--encre-2); text-decoration: none; line-height: 1.35;
}
.sommaire a:hover { background: var(--carte); color: var(--encre); }
.sommaire a[aria-current="true"] { background: var(--carte); color: var(--corail-fonce); font-weight: 600; }
.bloc-societe {
  font-style: normal; background: var(--fond-2); border-radius: var(--rayon-petit);
  padding: var(--e-3); margin-block: var(--e-3); color: var(--encre-2); line-height: 1.7;
}
.renvoi-cndp a { font-weight: 600; }
.fiche-cndp {
  margin: 0 0 var(--e-3); border: 1px solid var(--ligne); border-radius: var(--rayon-petit);
  overflow: hidden;
}
.fiche-cndp > div { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; }
.fiche-cndp > div + div { border-block-start: 1px solid var(--ligne); }
.fiche-cndp dt {
  background: var(--fond-2); padding: 0.7rem var(--e-2);
  font-family: var(--police-titres); font-weight: 600; font-size: var(--fs-petit); color: var(--encre);
}
.fiche-cndp dd { margin: 0; padding: 0.7rem var(--e-2); color: var(--encre-2); }
@media (max-width: 35rem) {
  .fiche-cndp > div { grid-template-columns: 1fr; }
  .fiche-cndp dt { padding-block-end: 0.3rem; }
  .fiche-cndp dd { padding-block-start: 0.3rem; }
}

.encart-info {
  border-inline-start: 4px solid var(--jaune);
  background: var(--fond-2); border-radius: var(--rayon-petit);
  padding: var(--e-3); margin-block: var(--e-3);
  font-size: var(--fs-petit); color: var(--encre-2);
}

/* ---------- Formulaire de contact ---------- */
.formulaire-contact {
  max-width: 40rem;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: var(--e-4); display: grid; gap: var(--e-3);
  box-shadow: var(--ombre);
}
.formulaire-contact .champ { display: grid; gap: 0.4rem; }
.formulaire-contact label { font-family: var(--police-titres); font-weight: 600; font-size: var(--fs-petit); }
.formulaire-contact input, .formulaire-contact textarea {
  font: inherit; color: var(--encre);
  background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--rayon-petit);
  padding: 0.7rem 0.9rem; width: 100%;
}
.formulaire-contact input:focus-visible, .formulaire-contact textarea:focus-visible {
  outline: 3px solid var(--corail-fonce); outline-offset: 1px; border-color: var(--corail);
}
.formulaire-contact textarea { min-height: 8rem; resize: vertical; }
.formulaire-contact select {
  font: inherit; color: var(--encre);
  background: var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23262019' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat;
  background-position: right 0.9rem center; background-size: 0.75rem;
  border: 1px solid var(--ligne); border-radius: var(--rayon-petit);
  padding: 0.7rem 2.4rem 0.7rem 0.9rem; width: 100%;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
[dir="rtl"] .formulaire-contact select { background-position: left 0.9rem center; padding: 0.7rem 0.9rem 0.7rem 2.4rem; }
.formulaire-contact select:focus-visible { outline: 3px solid var(--corail-fonce); outline-offset: 1px; border-color: var(--corail); }
.formulaire-contact select:invalid { color: var(--encre-2); }
.formulaire-contact .duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
@media (max-width: 35rem) { .formulaire-contact .duo-champs { grid-template-columns: 1fr; } }
.formulaire-contact .champ-question input { max-width: 8rem; }
.formulaire-contact button[disabled] { opacity: 0.6; cursor: progress; }
/* en arabe, numeros et adresses se saisissent de gauche a droite mais s'alignent a droite */
[dir="rtl"] .formulaire-contact input[dir="ltr"] { text-align: right; }
.formulaire-contact .aide-champ { font-size: var(--fs-petit); color: var(--encre-2); }
/* Honeypot : hors écran pour les humains, rempli par les robots */
.formulaire-contact .champ-piege {
  position: absolute; inset-inline-start: -200vw; width: 1px; height: 1px;
  overflow: hidden;
}
.form-retour { font-size: var(--fs-petit); min-height: 1.2em; }
.form-retour.erreur { color: #b3261e; font-weight: 600; }
.form-retour.succes { color: #1d7a3c; font-weight: 600; }
.note-antispam { font-size: var(--fs-petit); color: var(--encre-2); max-width: 40rem; margin-block-start: var(--e-2); }

/* ---------- Bandeau cookies ---------- */
.bandeau-cookies {
  position: fixed; inset-inline: var(--e-2); bottom: var(--e-2); z-index: 90;
  max-width: 34rem; margin-inline-start: auto;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: var(--e-3); display: grid; gap: var(--e-2);
}
.bandeau-cookies p { font-size: var(--fs-petit); color: var(--encre-2); }
.bandeau-cookies a { color: var(--corail-fonce); }
.bandeau-cookies-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }

/* ---------- Apparitions au défilement ---------- */
.apparait { opacity: 0; transform: translateY(18px); transition: opacity 420ms ease, transform 420ms ease; }
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } }

/* ---------- Icônes directionnelles en RTL ---------- */
[dir="rtl"] .miroir-rtl { transform: scaleX(-1); }

/* CTA « Commander un taxi » dans la bande finale */
.cta-commander { margin-block: var(--e-3) var(--e-2); }
.cta-ou { font-size: 0.85rem; opacity: 0.75; margin-block-end: var(--e-2); }

/* ---------- CTA « Commander un taxi » de la barre de navigation ----------
   Point d'entrée permanent vers le tunnel de commande, sur les 39 pages.
   Le halo pulse doucement : signale le service en direct sans clignoter. */
.bouton-commander {
  display: inline-flex; align-items: center; gap: 0.5rem;
  position: relative;
}
.bouton-commander svg { inline-size: 19px; block-size: 19px; flex: 0 0 auto; }
.bouton-commander::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(249, 107, 75, 0.55);
  animation: pouls-commander 2.6s cubic-bezier(0.3, 0, 0.4, 1) infinite;
  pointer-events: none;
}
@keyframes pouls-commander {
  60%  { box-shadow: 0 0 0 12px rgba(249, 107, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 107, 75, 0); }
}
.bouton-commander:hover::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .bouton-commander::before { animation: none; } }
/* mobile : l'icône seule sous 26rem, le libellé reprend sa place au-delà */
@media (max-width: 26rem) {
  .bouton-commander span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .bouton-commander { padding-inline: 0.85rem; }
}