/* ==========================================================================
   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; }
@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; }
.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;
  }
  .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 ---------- */
.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); }
.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; }
.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 .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; }
}