@charset "UTF-8";
/* ==========================================================================
   A.E Services Taxi — feuille de style
   Digibro Création — devis DC-2026-047
   Toutes les valeurs de couleur et de typographie proviennent de
   « Charte A.E Services Taxi.pdf », édition 01 — 2026.
   Aucune valeur en dur hors de ce bloc :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES — hébergées localement, aucune requête externe
   Archivo et Karla sont des fontes variables : un fichier par sous-ensemble
   couvre toutes les graisses de la charte (Archivo 500/600/800, Karla 400/700).
   Grâce aux unicode-range, le français ne charge que les deux fichiers latin.
   Licences OFL jointes dans fonts/.
   -------------------------------------------------------------------------- */
/* Ordre volontaire : pour chaque famille, « latin-ext » est déclaré AVANT
   « latin ». Le œ (U+0153) appartient aux deux plages de la déclaration
   Google ; à égalité, le navigateur retient la dernière @font-face qui
   correspond. Dans l'ordre inverse, le mot « cœur » de la section Zones
   déclenchait à lui seul le téléchargement de karla-latin-ext.woff2. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {

  /* --- 2.1 Palette — charte page 3, valeurs exactes -------------------- */
  --c-nuit:    #0E3A52;  /* Bleu Nuit    — textes, titres, fonds pleins soutenus */
  --c-taxi:    #2A7DB8;  /* Bleu Taxi    — couleur de marque : logo, bandeaux, téléphone */
  --c-soin:    #6FBEDC;  /* Bleu Soin    — pictogrammes, filets, éléments de rappel */
  --c-ciel:    #A8D5E8;  /* Bleu Ciel    — aplats secondaires, route du symbole */
  --c-papier:  #EDF5F9;  /* Bleu Papier  — fond dominant des documents et des écrans */
  --c-ardoise: #6B7A83;  /* Gris Ardoise — mentions légales, légendes, texte secondaire */
  --c-blanc:   #FFFFFF;  /* charte page 3 : « le blanc au fond des documents » */

  /* --- 2.2 Dérivés réservés au texte ----------------------------------
     Signalé à Hugo, arbitrage du 5 septembre 2026 : trois usages prévus par
     la charte échouent au contraste WCAG AA une fois appliqués à des
     caractères — Gris Ardoise sur blanc 4,43:1 et Bleu Taxi sur blanc 4,45:1,
     pour un seuil de 4,5:1. Ces deux valeurs, d'un cran plus foncées,
     ne servent QUE lorsque la couleur porte du texte. Les aplats, filets,
     pictogrammes et le logo utilisent les valeurs de charte ci-dessus. */
  --c-ardoise-texte: #556169;  /* 6,36:1 sur blanc — 5,77:1 sur Bleu Papier */
  --c-taxi-texte:    #1D5E8A;  /* 6,95:1 sur blanc — 6,30:1 sur Bleu Papier */

  /* --- 2.3 Rôles sémantiques ------------------------------------------- */
  --fond:              var(--c-papier);
  --fond-surface:      var(--c-blanc);
  --fond-soutenu:      var(--c-nuit);
  --fond-secondaire:   var(--c-ciel);

  --texte:             var(--c-nuit);
  --texte-secondaire:  var(--c-ardoise-texte);
  --texte-inverse:     var(--c-blanc);
  --texte-sur-soutenu: var(--c-ciel);   /* 7,65:1 sur Bleu Nuit */
  --texte-marque:      var(--c-taxi-texte);

  --filet:             var(--c-ciel);
  --filet-sur-soutenu: var(--c-taxi);   /* un filet Bleu Ciel serait trop vif sur l'aplat Nuit */
  --filet-appuye:      var(--c-soin);
  --picto:             var(--c-soin);
  --picto-sur-soutenu: var(--c-ciel);

  /* Un aplat qui porte du texte relève lui aussi de l'arbitrage « option B » :
     blanc sur Bleu Taxi ne donne que 4,45:1, insuffisant dès que le libellé
     descend sous 18,66 px gras. L'aplat d'action prend donc le dérivé, ce qui
     porte le couple à 6,95:1 quelle que soit la taille du libellé.
     Bleu Taxi de charte reste employé partout où il ne porte pas de texte :
     damier, filets, pictogrammes, logo. */
  --action-fond:       var(--c-taxi-texte);
  --action-texte:      var(--c-blanc);   /* 6,95:1 */
  --action-fond-actif: var(--c-nuit);    /* 12,03:1 */
  --focus:             var(--c-nuit);

  /* --- 2.4 Typographie — charte page 4 --------------------------------- */
  --f-display: 'Archivo', 'Archivo Fallback', sans-serif;  /* titres, logotype, téléphone */
  --f-texte:   'Karla', 'Karla Fallback', sans-serif;      /* textes, formulaires, mentions */

  --g-medium:    500;  /* Archivo Medium */
  --g-semibold:  600;  /* Archivo SemiBold */
  --g-extrabold: 800;  /* Archivo ExtraBold */
  --g-regular:   400;  /* Karla Regular */
  --g-bold:      700;  /* Karla Bold */

  /* Corps et interlignages : valeurs de la table « Hiérarchie de référence ».
     Le texte courant est fixé à 17 px, haut de la fourchette 15–17 px de la
     charte, pour respecter le minimum de 16 px imposé sur mobile par le brief. */
  --t-titre:      clamp(2.5rem, 1.86rem + 2.73vw, 3.5rem);      /* 40 → 56 px */
  --t-soustitre:  clamp(1.5rem, 1.34rem + 0.68vw, 1.875rem);    /* 24 → 30 px */
  --t-intertitre: clamp(1rem, 0.95rem + 0.21vw, 1.125rem);      /* 16 → 18 px */
  --t-courant:    1.0625rem;                                    /* 17 px */
  --t-mention:    0.75rem;                                      /* 12 px */
  --t-label:      clamp(0.6875rem, 0.63rem + 0.26vw, 0.875rem); /* 11 → 14 px */

  --i-titre:      1;
  --i-soustitre:  1.15;
  --i-intertitre: 1.3;
  --i-courant:    1.6;
  --i-mention:    1.4;
  --i-label:      1.2;

  --ls-label: 0.3em;  /* charte : « Archivo Semibold, interlettrage 0,3 em » */

  /* --- 2.5 Espacements — système 4 pt ---------------------------------- */
  --e-1:  4px;   --e-2:  8px;   --e-3: 12px;   --e-4: 16px;
  --e-5: 20px;   --e-6: 24px;   --e-8: 32px;   --e-10: 40px;
  --e-12: 48px;  --e-16: 64px;  --e-20: 80px;  --e-24: 96px;

  /* --- 2.6 Rayons ------------------------------------------------------
     Non spécifiés par la charte. Dérivés du symbole du logo, dont toutes les
     extrémités sont pleinement arrondies : pilule sur les éléments d'action,
     rayon court sur les surfaces. Rien d'uniforme. */
  --r-pilule:  9999px;
  --r-surface: 6px;
  --r-filet:   2px;

  /* --- 2.7 Ombres ------------------------------------------------------
     Aucune. Charte page 6 : « JAMAIS : ni jaune, ni ombre portée ».
     La séparation passe par un filet 1 px ou un changement d'aplat. */
  --trait: 1px solid var(--filet);

  /* --- 2.8 Damier taxi — charte page 5 ---------------------------------
     « Le damier taxi, retenu en deux bleus, ferme le bas des documents. »
     Seul ornement du site. CSS pur, aucune image, aucun octet réseau. */
  --damier-case: 8px;
  --damier-haut: 16px;  /* deux rangées */

  /* --- 2.9 Gabarit ------------------------------------------------------ */
  --largeur-page:  1140px;
  --largeur-texte: 62ch;   /* charte implicite : ligne courte, lecture rapide */
  --marge-page:    var(--e-5);
  --hauteur-entete: 72px;

  /* --- 2.10 Mouvement ---------------------------------------------------
     Discret. Le brief interdit parallaxes et animations lourdes ;
     la charte demande « aucun effet spectaculaire ». */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root { --marge-page: var(--e-8); --hauteur-entete: 88px; }
}
@media (min-width: 1200px) {
  :root { --marge-page: var(--e-10); }
}

/* Métriques de repli, pour que la substitution de police ne décale rien
   pendant le chargement (CLS). */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 98%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Karla Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 96%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   3. RÉINITIALISATION ET BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--e-4));
}

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-courant);
  font-weight: var(--g-regular);
  line-height: var(--i-courant);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2 { font-family: var(--f-display); }

h1 {
  font-size: var(--t-titre);
  font-weight: var(--g-extrabold);
  line-height: var(--i-titre);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-soustitre);
  font-weight: var(--g-semibold);
  line-height: var(--i-soustitre);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h3 {
  font-family: var(--f-texte);
  font-size: var(--t-intertitre);
  font-weight: var(--g-bold);
  line-height: var(--i-intertitre);
}

p { max-width: var(--largeur-texte); }

a { color: var(--texte-marque); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--texte); }

img { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   4. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-filet);
}

.lien-evitement {
  position: absolute;
  left: var(--e-2);
  top: var(--e-2);
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--fond-soutenu);
  color: var(--texte-inverse);
  font-weight: var(--g-bold);
  border-radius: var(--r-surface);
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: translateY(0); color: var(--texte-inverse); }

.visuellement-masque {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   5. GABARIT
   -------------------------------------------------------------------------- */
.contenu {
  width: 100%;
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

.section { padding-block: var(--e-16); }
@media (min-width: 768px) { .section { padding-block: var(--e-24); } }

.section--surface { background: var(--fond-surface); }
.section--soutenue { background: var(--fond-soutenu); color: var(--texte-sur-soutenu); }
.section--soutenue h2, .section--soutenue h3 { color: var(--texte-inverse); }

/* Numéro de section — reprend le système de numérotation de la charte
   (« 01 — LE LOGO », « 02 — COULEURS »). L'interlettrage de 0,3 em prévu par
   la charte pour les sur-titres disloque un nombre à deux chiffres (« 0 1 ») :
   il est réduit ici et reste disponible via --ls-label pour un libellé de mots.
   Le filet Bleu Soin remplace le tiret cadratin du document imprimé. */
.numero-section {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  font-family: var(--f-display);
  font-size: var(--t-label);
  font-weight: var(--g-semibold);
  line-height: var(--i-label);
  letter-spacing: 0.12em;
  color: var(--texte-marque);
}
.numero-section::after {
  content: "";
  width: var(--e-8);
  height: 2px;
  border-radius: var(--r-filet);
  background: var(--filet-appuye);
}
.section--soutenue .numero-section { color: var(--picto-sur-soutenu); }
.section--soutenue .numero-section::after { background: var(--picto); }

/* Damier taxi — ferme le bas de chaque grande section */
.damier {
  height: var(--damier-haut);
  background-image: repeating-conic-gradient(
    var(--c-taxi) 0% 25%,
    var(--c-ciel) 0% 50%
  );
  background-size: calc(var(--damier-case) * 2) calc(var(--damier-case) * 2);
}

.mention {
  font-size: var(--t-mention);
  line-height: var(--i-mention);
  color: var(--texte-secondaire);
}

/* --------------------------------------------------------------------------
   6. COQUE — en-tête, navigation, boutons, barre d'appel, pied
   Composants partagés par les trois pages. Le contenu des sections
   arrive aux étapes suivantes.
   -------------------------------------------------------------------------- */

/* --- 6.1 Boutons ------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;              /* cible tactile — brief §5 */
  padding: var(--e-3) var(--e-6);
  font-family: var(--f-display);
  font-size: var(--t-intertitre);
  font-weight: var(--g-semibold); /* ≥ 18 px gras : seuil de contraste 3:1 */
  line-height: var(--i-label);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-pilule);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.bouton--action {
  background: var(--action-fond);
  color: var(--action-texte);
  border-color: var(--action-fond);
}
.bouton--action:hover,
.bouton--action:focus-visible {
  background: var(--action-fond-actif);
  border-color: var(--action-fond-actif);
  color: var(--action-texte);
}

.bouton--secondaire {
  background: transparent;
  color: var(--texte);
  border-color: var(--texte);
}
.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
  background: var(--fond-soutenu);
  color: var(--texte-inverse);
}

/* --- 6.2 En-tête -------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fond);
  border-bottom: var(--trait);
}

.entete__contenu {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--hauteur-entete);
}

.bloc-marque {
  display: inline-flex;
  align-items: center;
  min-height: 44px;  /* cible tactile — brief §5 */
  margin-right: auto;
}
.bloc-marque img { height: 44px; width: auto; }

/* --- 6.4 Appel permanent -----------------------------------------------
   La barre collante de bas d'écran a été retirée le 5 septembre 2026, jugée
   trop envahissante. L'appel prend deux formes selon la largeur :
   · sous 768 px, une pastille flottante en bas à droite, effacée dès qu'un
     vrai bouton d'appel est à l'écran — un seul point d'appel à la fois ;
   · au-delà, le numéro en toutes lettres dans l'en-tête, qui est collant.
   Le brief §5 demandait une barre en bas ; ce que la consigne visait — un
   appel toujours à portée de pouce — reste tenu. */
.entete__appel { display: none; }

.appel-flottant {
  position: fixed;
  right: var(--e-4);
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--action-fond);
  color: var(--action-texte);
  /* Un anneau en réserve, pas une ombre portée : la charte interdit l'ombre.
     Il détache la pastille du contenu qu'elle survole. */
  border: 3px solid var(--fond);
  border-radius: var(--r-pilule);
  transition: opacity var(--transition), transform var(--transition),
              background-color var(--transition);
}
.appel-flottant:hover,
.appel-flottant:focus-visible { background: var(--fond-soutenu); color: var(--action-texte); }

.appel-flottant--masque {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}


/* --- 6.3 Navigation ----------------------------------------------------- */
.bascule-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  background: transparent;
  border: var(--trait);
  border-radius: var(--r-pilule);
  color: var(--texte);
  font-family: var(--f-display);
  font-size: var(--t-label);
  font-weight: var(--g-semibold);
  letter-spacing: 0.05em;
  cursor: pointer;
}
.bascule-nav__traits {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.bascule-nav__traits::before,
.bascule-nav__traits::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.bascule-nav__traits::before { top: -5px; }
.bascule-nav__traits::after  { top: 5px; }

.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--fond-surface);
  border-bottom: var(--trait);
  padding: var(--e-2) var(--marge-page) var(--e-4);
}
.nav[data-ouvert="true"] { display: block; }

.nav__liste a {
  display: block;
  padding: var(--e-4) 0;
  border-bottom: var(--trait);
  color: var(--texte);
  font-family: var(--f-display);
  font-weight: var(--g-semibold);
  text-decoration: none;
}
.nav__liste li:last-child a { border-bottom: 0; }
.nav__liste a:hover { color: var(--texte-marque); }

@media (min-width: 768px) {
  .bascule-nav { display: none; }
  /* Sur bureau l'appel revient dans l'en-tête, après les liens, à
     l'extrémité droite. L'ordre du DOM reste celui de la tabulation. */
  .entete__appel { display: inline-flex; order: 1; }
  .appel-flottant { display: none; }
  .bloc-marque img { height: 56px; }

  .nav {
    display: block;
    position: static;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .nav__liste { display: flex; gap: var(--e-6); }
  .nav__liste a { padding: var(--e-2) 0; border: 0; font-size: var(--t-courant); }
}

/* --- 6.5 Pied de page --------------------------------------------------- */
.pied {
  background: var(--fond-soutenu);
  color: var(--texte-sur-soutenu);
}
.pied .damier { margin-bottom: var(--e-12); }
.pied__contenu { padding-bottom: var(--e-12); display: grid; gap: var(--e-8); }
.pied a { color: var(--texte-inverse); }
.pied a:hover { color: var(--picto-sur-soutenu); }
.pied__coordonnees { display: grid; gap: var(--e-4); }

/* Coordonnées du pied — traitées comme des coordonnées, pas comme des liens
   de navigation : Archivo, pictogramme, aucun soulignement. Les deux liens
   légaux qui suivent restent en Karla souligné, séparés par un filet. */
.pied__contacts { display: grid; gap: var(--e-1); }
.pied__contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: var(--g-semibold);
  text-decoration: none;
}
.pied__contacts .picto { color: var(--picto); transition: color var(--transition); }
.pied__contacts a:hover .picto,
.pied__contacts a:focus-visible .picto { color: var(--texte-inverse); }

.pied__contacts .pied__tel {
  font-size: clamp(1.375rem, 1.26rem + 0.5vw, 1.625rem);  /* 22 → 26 px */
  font-weight: var(--g-extrabold);
  letter-spacing: -0.01em;
}
.pied__contacts .pied__email { font-size: var(--t-courant); }

/* Liens légaux — cible tactile de 44 px, souligné conservé pour les
   distinguer nettement des coordonnées ci-dessus. */
.pied__liens {
  padding-top: var(--e-4);
  border-top: 1px solid var(--filet-sur-soutenu);
}
.pied__liens ul { display: grid; }
.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-texte);
}
.pied .mention { color: var(--c-ciel); max-width: var(--largeur-texte); }

/* Signature de l'agence — dernière ligne du document, détachée des mentions
   du client par un filet pour qu'on ne les confonde pas. */
.pied__signature {
  margin: 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--filet-sur-soutenu);
  font-size: var(--t-mention);
  line-height: var(--i-mention);
  color: var(--c-ciel);
}
.pied__signature a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* cible tactile — la ligne est seule, aucun risque de chevauchement */
  font-family: var(--f-display);
  font-weight: var(--g-semibold);
  text-decoration: none;
}
.pied__signature a:hover,
.pied__signature a:focus-visible { text-decoration: underline; }

@media (min-width: 768px) {
  .pied__contenu {
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: var(--e-16);
  }
  .pied .mention,
  .pied__signature { grid-column: 1 / -1; }
}

/* --- 6.6 Pages légales -------------------------------------------------- */
.contenu--etroit { max-width: calc(var(--largeur-texte) + var(--marge-page) * 2); }
.page-legale .entete { position: static; }
.page-legale main { background: var(--fond-surface); }

/* --------------------------------------------------------------------------
   7. SECTION 01 — ACCUEIL
   Ordre mobile : titre, sous-titre, actions, réassurance, photo.
   La photo passe en dernier : placée plus haut, elle repousserait le bouton
   d'appel sous la ligne de flottaison, ce qui contredit l'objectif du brief
   (appeler en moins de trois secondes).
   Aucun texte n'est posé sur la photo — le ciel et le champ sont trop clairs
   pour garantir un contraste AA.
   -------------------------------------------------------------------------- */
.accueil__grille { display: grid; gap: var(--e-10); }

/* Rôle « Sous-titre » de la charte : Archivo Semibold 24–30 px, interligne 1,15 */
.accueil__soustitre {
  margin-top: var(--e-5);
  font-family: var(--f-display);
  font-size: var(--t-soustitre);
  font-weight: var(--g-semibold);
  line-height: var(--i-soustitre);
  color: var(--texte);
  text-wrap: pretty;
}

.accueil__actions { display: grid; gap: var(--e-3); margin-top: var(--e-8); }

.bouton--grand {
  min-height: 56px;
  padding-inline: var(--e-6);
  font-size: clamp(1.0625rem, 0.99rem + 0.34vw, 1.3125rem); /* 17 → 21 px */
  white-space: nowrap;
}

/* Bandeau de réassurance — les filets naissent de l'écart de grille,
   conformément au principe « aucune ombre, séparation par filet ». */
.reassurance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--filet);
  border-block: 1px solid var(--filet);
}
.reassurance li {
  padding: var(--e-4) var(--e-4) var(--e-4) 0;
  background: var(--fond);
  font-weight: var(--g-bold);   /* charte : « Bold pour les intertitres et les libellés » */
  font-size: var(--t-intertitre);
  line-height: var(--i-intertitre);
}
.reassurance li:nth-child(even) { padding-left: var(--e-4); }

.accueil__visuel { margin: 0; }
.accueil__visuel img {
  width: 100%;
  border-radius: var(--r-surface);
}

@media (min-width: 768px) {
  .accueil__grille {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: var(--e-12);
    row-gap: var(--e-12);
    align-items: center;
  }
  .accueil__texte  { grid-column: 1; grid-row: 1; }
  .accueil__visuel { grid-column: 2; grid-row: 1; }
  .reassurance {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, 1fr);
  }
  .reassurance li { padding-left: var(--e-4); }
  .reassurance li:first-child { padding-left: 0; }
  .accueil__actions { grid-auto-flow: column; justify-content: start; gap: var(--e-4); }
}

/* --------------------------------------------------------------------------
   8. INTRODUCTION DE SECTION
   -------------------------------------------------------------------------- */
.section__intro {
  margin-top: var(--e-5);
  margin-bottom: var(--e-10);
  font-size: var(--t-intertitre);
  color: var(--texte);
}

/* --------------------------------------------------------------------------
   9. SECTION 02 — SERVICES
   Sept prestations, liste fermée. La carte « Taxi conventionné » se distingue
   par un aplat Bleu Nuit pleine largeur : c'est le service à plus haute
   fréquence, il ne doit pas se confondre avec les six autres.
   Aucune ombre : la hiérarchie passe par l'aplat et le filet.
   -------------------------------------------------------------------------- */
.service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
}
.service__picto { color: var(--picto); }
.service__corps h3 { margin-bottom: var(--e-2); }
.service__corps p { color: var(--texte); }

/* Carte mise en avant */
.service--majeur {
  grid-template-columns: 1fr;
  gap: var(--e-3);
  padding: var(--e-6);
  margin-bottom: var(--e-6);
  background: var(--fond-soutenu);
  border-radius: var(--r-surface);
  color: var(--texte-inverse);
}
.service--majeur .service__picto { color: var(--picto-sur-soutenu); }
.service--majeur h3 {
  font-family: var(--f-display);
  font-size: var(--t-soustitre);
  font-weight: var(--g-semibold);
  line-height: var(--i-soustitre);
}
.service--majeur p { color: var(--texte-sur-soutenu); max-width: var(--largeur-texte); }

/* Les six autres */
.services__grille { display: grid; gap: var(--e-4); }
.services__grille .service {
  padding: var(--e-5);
  background: var(--fond-surface);
  border: var(--trait);
  border-radius: var(--r-surface);
}

/* Bloc véhicule électrique */
.vehicule {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-12);
  padding: var(--e-6);
  background: var(--fond-secondaire);
  border-radius: var(--r-surface);
}
.vehicule__visuel { margin: 0; }
.vehicule__visuel img { width: 100%; border-radius: var(--r-surface); }
.vehicule__texte h3 {
  margin-bottom: var(--e-4);
  font-family: var(--f-display);
  font-size: var(--t-soustitre);
  font-weight: var(--g-semibold);
  line-height: var(--i-soustitre);
}
.vehicule__texte p + p { margin-top: var(--e-4); }

@media (min-width: 768px) {
  .services__grille { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
  .service--majeur { grid-template-columns: auto 1fr; gap: var(--e-6); padding: var(--e-8); }
  .vehicule {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: var(--e-10);
    padding: var(--e-8);
  }
  /* Le paragraphe unique ne fait que trois lignes : la source, presque carrée
     (959 × 788), laissait une colonne à moitié vide. Recadrage en 16/10, qui
     abaisse la photo sans la rétrécir — le lumineux de toit reste dans le
     cadre, le rognage ne touche que le ciel et la chaussée. */
  .vehicule__visuel img { aspect-ratio: 16 / 10; object-fit: cover; }
}
@media (min-width: 1200px) {
  .services__grille { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   10. SECTION 03 — ZONES DESSERVIES
   Les communes sont réparties en groupes plutôt qu'en une liste unique.
   Aucune carte Google : coût de performance disproportionné pour un site
   où personne ne se déplace au siège (brief §4).
   -------------------------------------------------------------------------- */
.zones__groupes { display: grid; gap: var(--e-8); }
.zone h3 { margin-bottom: var(--e-3); padding-bottom: var(--e-3); border-bottom: var(--trait); }
.zone ul { display: grid; gap: var(--e-2); }
/* Dix communes en colonne unique allongent inutilement la page sur mobile ;
   les noms sont courts, deux colonnes suffisent. */
.zone__liste--compacte { grid-template-columns: repeat(2, 1fr); column-gap: var(--e-4); }
.zone li { color: var(--texte); }
.zone__reste { margin-top: var(--e-3); color: var(--texte-secondaire); }

.zones__points {
  margin-top: var(--e-10);
  padding: var(--e-6);
  background: var(--fond-surface);
  border-left: 3px solid var(--filet-appuye);
  border-radius: var(--r-surface);
}
.zones__points h3 { margin-bottom: var(--e-3); }
.zones__points ul { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.zones__points li { font-weight: var(--g-bold); }

.zones__france {
  margin-top: var(--e-8);
  font-family: var(--f-display);
  font-size: var(--t-soustitre);
  font-weight: var(--g-semibold);
  line-height: var(--i-soustitre);
  max-width: var(--largeur-texte);
}

@media (min-width: 768px) {
  .zones__groupes { grid-template-columns: repeat(3, 1fr); gap: var(--e-10); align-items: start; }
  .zone__liste--compacte { grid-template-columns: 1fr; }
  .zones__points { padding: var(--e-8); }
}

/* --------------------------------------------------------------------------
   11. SECTION 04 — CONTACT
   Le numéro est ici l'élément le plus grand de l'écran, comme au recto de la
   carte de visite de la charte.
   -------------------------------------------------------------------------- */
.contact__grille { display: grid; gap: var(--e-12); }

.contact__invite { font-size: var(--t-intertitre); margin-bottom: var(--e-4); }

.contact__tel {
  display: inline-block;
  padding-block: var(--e-2);   /* interligne 1,0 : sans cela le lien fait 32 px de haut */
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.36rem + 1.66vw, 2.5rem);  /* 28 → 40 px */
  font-weight: var(--g-extrabold);
  line-height: var(--i-titre);
  letter-spacing: -0.01em;
  color: var(--texte);
  text-decoration: none;
}
.contact__tel:hover, .contact__tel:focus-visible { color: var(--texte-marque); }

.contact__liens { display: grid; gap: var(--e-4); margin-top: var(--e-6); justify-items: start; }
.contact__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: var(--g-semibold);
  font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);  /* 20 → 24 px */
}

.contact__horaires { margin-top: var(--e-8); display: grid; gap: var(--e-2); }
/* Charte : « Bold pour les intertitres et les libellés ». */
.contact__horaires dt {
  margin-bottom: var(--e-1);
  font-family: var(--f-texte);
  font-size: var(--t-intertitre);
  font-weight: var(--g-bold);
  line-height: var(--i-intertitre);
  color: var(--texte);
}
.contact__horaires dd { margin: 0 0 var(--e-4); max-width: var(--largeur-texte); }
.contact__horaires dd:last-child { margin-bottom: 0; }

.contact__complement { padding-top: var(--e-4); }

@media (min-width: 768px) {
  /* Le téléphone ouvre la section sur toute la largeur — c'est l'action la
     plus rapide. En dessous, le formulaire occupe la première colonne et la
     disponibilité la seconde, plus étroite : elle ne tient qu'en quelques
     lignes et n'a pas besoin de plus. */
  .contact__grille {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: var(--e-16);
    align-items: start;
  }
  .contact__complement { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   12. PAGES LÉGALES
   Sobres : ni hero, ni pictogramme, ni aplat. Seule la typographie de la
   charte porte la page. Karla Regular pour le corps, comme le prescrit la
   ligne « Mention légale » de la hiérarchie.
   -------------------------------------------------------------------------- */
.legale__maj {
  margin-top: var(--e-4);
  color: var(--texte-secondaire);
}

.legale section { margin-top: var(--e-12); }

.legale h2 {
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: var(--trait);
  font-size: var(--t-soustitre);
}

.legale h3 {
  margin-top: var(--e-6);
  margin-bottom: var(--e-2);
}

.legale p + p { margin-top: var(--e-4); }
/* Une fiche qui suit un paragraphe a besoin d'un intervalle, sans quoi les
   deux blocs se lisent d'une traite. */
.legale p + .legale__fiche { margin-top: var(--e-5); }
.legale ul { margin-top: var(--e-4); display: grid; gap: var(--e-4); }
.legale ul li { padding-left: var(--e-4); border-left: 2px solid var(--filet); }

/* Bloc d'identité de l'éditeur : présenté comme une fiche, pas comme du texte
   courant. Karla Regular, interligne resserré, aucune décoration. */
.legale__fiche {
  margin: 0;
  font-style: normal;
  line-height: 1.8;
}
.legale__fiche a { color: var(--texte-marque); }

.legale strong { font-weight: var(--g-bold); }

/* --------------------------------------------------------------------------
   13. MOUVEMENT
   Trois animations, pas une de plus. La charte demande « aucun effet
   spectaculaire » et le brief interdit parallaxes et animations lourdes.

   Aucun « fade-and-slide-up » section par section : c'est le réflexe le plus
   reconnaissable et il alourdit une page qu'on parcourt en urgence.

   Tout est neutralisé par la règle « prefers-reduced-motion » de la section 4,
   et les états initiaux masqués ne s'appliquent que sous .anim, une classe
   posée par le JavaScript. Sans JavaScript, rien n'est jamais caché.
   -------------------------------------------------------------------------- */

/* --- 13.1 Une seule entrée orchestrée au chargement ---------------------- */
@keyframes entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.accueil .numero-section,
.accueil h1,
.accueil__soustitre,
.accueil__actions,
.reassurance,
.accueil__visuel {
  animation: entree 420ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.accueil h1           { animation-delay:  60ms; }
.accueil__soustitre   { animation-delay: 110ms; }
.accueil__actions     { animation-delay: 160ms; }  /* appelable dès ~580 ms */
.reassurance          { animation-delay: 210ms; }
.accueil__visuel      { animation-delay: 260ms; }

/* --- 13.2 Le damier se trace au défilement ------------------------------
   Repris du symbole du logo, où la route s'échappe de la croix vers la
   droite. Seul mouvement lié au défilement de tout le site. */
.anim .damier {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.anim .damier.vu { clip-path: inset(0 0 0 0); }

/* --- 13.3 Réponses au survol et au focus --------------------------------
   Le mouvement répond à une action, jamais au hasard. Ni ombre ni
   agrandissement : la charte interdit l'ombre portée, et un agrandissement
   sans ombre se lit comme un défaut de rendu. Le filet et le pictogramme
   suffisent à marquer la carte visée. */
.services__grille .service {
  transition: border-color var(--transition), background-color var(--transition);
}
.services__grille .service:hover { border-color: var(--filet-appuye); }

.service__picto { transition: color var(--transition); }
.services__grille .service:hover .service__picto { color: var(--texte-marque); }

.accueil__visuel img,
.vehicule__visuel img { transition: filter var(--transition); }
.accueil__visuel:hover img,
.vehicule__visuel:hover img { filter: saturate(1.08); }

/* --------------------------------------------------------------------------
   14. FORMULAIRE DE DEMANDE DE COURSE
   Karla pour les champs, comme le prescrit la charte (« Karla pour les textes
   courants, les formulaires et les mentions légales »). Aucune ombre : les
   champs sont délimités par un filet, l'état actif par un filet plus appuyé.
   -------------------------------------------------------------------------- */
.contact__grille {
  margin-top: var(--e-12);
  padding-top: var(--e-10);
  border-top: var(--trait);
}
.formulaire { margin: 0; }
.formulaire h3 {
  font-family: var(--f-display);
  font-size: var(--t-soustitre);
  font-weight: var(--g-semibold);
  line-height: var(--i-soustitre);
}
.formulaire__intro {
  margin-top: var(--e-3);
  margin-bottom: var(--e-8);
  color: var(--texte);
}

.formulaire__champs { display: grid; gap: var(--e-5); }

.champ { display: grid; gap: var(--e-2); margin: 0; max-width: none; }
.champ label { font-weight: var(--g-bold); font-size: var(--t-intertitre); }

.champ__requis {
  margin-left: var(--e-1);
  font-size: var(--t-mention);
  font-weight: var(--g-regular);
  color: var(--texte-secondaire);
  text-decoration: none;
  border: 0;
}

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ input[type="date"],
.champ input[type="time"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;                 /* cible tactile — brief §5 */
  padding: var(--e-3) var(--e-4);
  background: var(--fond-surface);
  border: 1px solid var(--filet-appuye);
  border-radius: var(--r-surface);
  color: var(--texte);
  font-size: var(--t-courant);      /* 17 px : pas de zoom automatique sur iOS */
  transition: border-color var(--transition);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ select { appearance: none; background-image: none; }

.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--texte-marque); }

.champ__aide {
  font-size: var(--t-mention);
  line-height: var(--i-mention);
  color: var(--texte-secondaire);
}

/* Message d'erreur : masqué tant qu'il est vide, pour ne pas creuser
   d'espace sous les champs valides. */
.champ__erreur {
  font-size: var(--t-mention);
  line-height: var(--i-mention);
  font-weight: var(--g-bold);
  color: var(--texte);
}
.champ__erreur:empty { display: none; }
.champ--invalide input,
.champ--invalide select,
.champ--invalide textarea { border-width: 2px; border-color: var(--texte); }

@media (min-width: 560px) {
  .champ--double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4);
  }
}

/* Consentement RGPD : la case précède un libellé long, il ne doit pas
   passer sous elle. */
.champ--consentement {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e-3);
  margin-top: var(--e-3);
}
.champ--consentement input {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  accent-color: var(--action-fond);
}
.champ--consentement label { font-weight: var(--g-regular); font-size: var(--t-courant); }
.champ--consentement .champ__erreur { grid-column: 1 / -1; }

/* Piège à robots — hors flux et hors champ du clavier, jamais lu à voix haute. */
.honeypot {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formulaire__envoi {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-4);
  justify-items: start;
}
.formulaire__etat { margin: 0; font-weight: var(--g-bold); }
.formulaire__etat:empty { display: none; }
.formulaire__etat a { color: var(--texte); }

.formulaire__champs[data-envoi="en-cours"] button { pointer-events: none; opacity: 0.7; }

@media (min-width: 768px) {
  .formulaire__champs { max-width: 34rem; }
}