@charset "UTF-8";
/* ==========================================================================
   A.G. — Adel Gouadjelia — taxi conventionné et TPMR
   Digibro Création — devis DC-2026-0XX
   --------------------------------------------------------------------------
   Direction artistique « la nuit et le papier ».
   Le site suit le trajet : on part de l'habitacle du van dans la nuit
   (accueil, services, zones desservies) et on arrive au papier
   (tarifs, questions, formulaire), là où le visiteur doit lire et saisir.

   Geste unique : la pente à 8 %, pente maximale tolérée par la
   réglementation française pour une rampe d'accès. Toutes les obliques du
   site — transitions de section, filets de titre, filet de la carte PMR —
   sont tracées à cette pente. Aucune autre diagonale, aucun dégradé
   décoratif, aucune ombre portée sur fond sombre.

   Aucune valeur de couleur, de police ou d'espacement hors du bloc :root.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {

  /* --- 1.1 Palette -------------------------------------------------------
     Le noir et le blanc sont les couleurs principales : aucune teinte dans
     les fonds, aucune teinte dans les textes, aucune teinte dans les filets.
     Les gris sont strictement neutres (R = V = B).
     L'ambre est la seule exception, et il n'est jamais décoratif : il ne
     colore que ce qui se clique ou s'appelle.
     Contrastes calculés, pas estimés — voir 1.3. */
  --c-nuit:          #000000;  /* noir pur : fond des sections sombres */
  --c-habitacle:     #121212;  /* un cran au-dessus : cartes et surfaces élevées */
  --c-habitacle-cl:  #1F1F1F;  /* survol des surfaces élevées */
  --c-papier:        #FFFFFF;  /* blanc pur : fond des zones de lecture */
  --c-gris-papier:   #F4F4F4;  /* surfaces posées sur le blanc : tableaux, encadrés, formulaire */
  --c-blanc:         #FFFFFF;  /* texte inverse et fond des champs de saisie */
  --c-acier:         #B4B4B4;  /* gris neutre : pictogrammes, filets, texte secondaire sur noir */

  --c-signal:        #F2A93B;  /* ambre du lumineux de toit — SEULE couleur d'action */
  --c-signal-vif:    #FFC163;  /* survol de l'ambre */
  --c-signal-encre:  #8A5008;  /* ambre assombri : le seul ambre autorisé à porter du texte sur fond blanc */

  /* États de formulaire. Dérivés de la palette, pas des rouges et verts
     d'interface génériques : le rouge est désaturé vers le bordeaux et le
     vert vers le sapin, pour rester dans le registre du site. */
  --c-erreur:        #A3121B;  /* 7,44:1 sur blanc */
  --c-erreur-voile:  #FBEBEC;
  --c-succes:        #1D6B2E;  /* 5,46:1 sur blanc */
  --c-succes-voile:  #E8F2E9;
  --c-signal-voile:  #FCF5E9;  /* fond d'une option cochée */

  /* --- 1.2 Dérivés de texte --------------------------------------------- */
  --c-encre:         #000000;  /* la page n'a qu'une encre : le noir */
  --c-ardoise:       #525252;  /* gris neutre : texte secondaire — AAA aussi bien sur le
                                  blanc (7,81:1) que sur le gris des surfaces (7,10:1) */
  --c-texte-clair:   #EDEDED;  /* blanc cassé neutre : le blanc pur sur noir pur bave chez
                                  les lecteurs astigmates, exactement l'audience du client */
  --c-filet-sombre:  #333333;
  --c-filet-clair:   #D6D6D6;

  /* --- 1.3 Rôles sémantiques ---------------------------------------------
     Ratios WCAG vérifiés au calcul :
       texte-clair / nuit ......... 17,94:1   AAA
       texte-clair / habitacle .... 16,00:1   AAA
       acier / nuit ............... 10,13:1   AAA
       signal / nuit .............. 10,51:1   AAA
       encre / papier ............. 21,00:1   AAA
       encre / gris-papier ........ 19,09:1   AAA
       ardoise / papier ...........  7,81:1   AAA texte courant
       encre / signal ............. 10,51:1   AAA (libellé des boutons d'action)
       blanc / signal-encre .......  6,50:1   AA, AAA au-delà de 18,66 px gras  */
  --fond-nuit:            var(--c-nuit);
  --fond-papier:          var(--c-papier);
  --fond-carte:           var(--c-habitacle);
  --fond-carte-survol:    var(--c-habitacle-cl);
  --fond-saisie:          var(--c-blanc);
  --fond-surface-claire:  var(--c-gris-papier);

  --texte-sur-nuit:       var(--c-texte-clair);
  --texte-sur-nuit-2:     var(--c-acier);
  --texte-sur-papier:     var(--c-encre);
  --texte-sur-papier-2:   var(--c-ardoise);
  --texte-lien-clair:     var(--c-signal-encre);

  --filet-sur-nuit:       var(--c-filet-sombre);
  --filet-sur-papier:     var(--c-filet-clair);
  --filet-appuye:         var(--c-acier);
  --bord-saisie:          var(--c-ardoise);
  --picto:                var(--c-acier);

  --action-fond:          var(--c-signal);
  --action-fond-survol:   var(--c-signal-vif);
  --action-texte:         var(--c-encre);
  --focus:                var(--c-signal);
  --focus-sur-clair:      var(--c-signal-encre);
  --etat-erreur:          var(--c-erreur);
  --etat-erreur-fond:     var(--c-erreur-voile);
  --etat-succes:          var(--c-succes);
  --etat-succes-fond:     var(--c-succes-voile);
  --option-cochee:        var(--c-signal-voile);

  /* --- 1.4 Typographie ---------------------------------------------------
     Texte  : Atkinson Hyperlegible, dessinée par le Braille Institute pour
              les lecteurs malvoyants. Sur un site de transport PMR, ce n'est
              pas un choix esthétique : c'est le même argument que la rampe.
     Display: Bricolage Grotesque, variable, porte les titres, le numéro de
              téléphone et le monogramme A.G.                               */
  --f-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --f-texte:   'Atkinson Hyperlegible', 'Verdana', sans-serif;

  --g-normal:   400;
  --g-gras:     700;
  --g-display:  800;

  /* Échelle. Base à 19 px, jamais moins de 17 px nulle part sur le site. */
  --text-xs:    1rem;       /* 16 px — plancher absolu imposé par le brief */
  --text-sm:    1.0625rem;  /* 17 px — légendes, libellés */
  --text-base:  1.1875rem;  /* 19 px — texte courant */
  --text-lg:    1.3125rem;  /* 21 px */
  --text-xl:    1.5625rem;  /* 25 px */
  --text-2xl:   1.9375rem;  /* 31 px */
  --text-3xl:   2.5rem;     /* 40 px */
  --text-4xl:   3rem;       /* 48 px */
  --text-5xl:   4.25rem;    /* 68 px */

  --interligne-titre: 1.08;
  --interligne-texte: 1.65;
  --mesure: 62ch;           /* longueur de ligne plafonnée */

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

  /* --- 1.6 Rayons --------------------------------------------------------
     Volontairement discrets et non uniformes : les surfaces d'information
     sont plus carrées que les surfaces d'action. */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* --- 1.7 Ombres — réservées aux surfaces posées sur fond CLAIR -----------
     Sur fond sombre, une carte monte par sa couleur, jamais par un flou noir. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .10);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .12);
  /* Seule ombre autorisée sur fond sombre : elle détache le bouton d'appel
     collant du contenu qui défile dessous, c'est une fonction, pas un décor. */
  --shadow-collant: 0 6px 20px rgba(0, 0, 0, .45);

  /* --- 1.8 Transitions --------------------------------------------------- */
  --transition:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- 1.9 Géométrie de la rampe -----------------------------------------
     8 % de pente = 4,574° d'inclinaison. Les deux valeurs sont liées :
     ne jamais modifier l'une sans l'autre. */
  --pente:        0.08;
  --pente-angle:  -4.574deg;
  --pente-hauteur: min(8vw, 104px);

  /* --- 1.10 Gabarit ------------------------------------------------------ */
  --largeur-max:  1200px;
  --gouttiere:    var(--space-5);
  --entete-h:     68px;
  --cible:        48px;   /* cible tactile minimale imposée par le brief */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--fond-nuit);
  color: var(--texte-sur-nuit);
  font-family: var(--f-texte);
  font-size: var(--text-base);
  font-weight: var(--g-normal);
  line-height: var(--interligne-texte);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--g-display);
  line-height: var(--interligne-titre);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p, li { max-width: var(--mesure); }
p  { margin: 0 0 var(--space-4); }
ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; }

strong, b { font-weight: var(--g-gras); }

/* Focus : visible et contrasté partout, y compris au clavier seul. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.sur-papier :focus-visible { outline-color: var(--focus-sur-clair); }

::selection { background: var(--c-signal); color: var(--c-encre); }

/* ==========================================================================
   3. UTILITAIRES DE STRUCTURE
   ========================================================================== */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--space-16); }
/* Deux sections consécutives de même fond : une seule respiration entre elles. */
.section--suite { padding-top: 0; }

.sur-nuit   { background: var(--fond-nuit);   color: var(--texte-sur-nuit); }
.sur-papier { background: var(--fond-papier); color: var(--texte-sur-papier); }

/* Lien d'évitement — première cible du clavier */
.lien-evitement {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-24));
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: var(--space-3) var(--space-5);
  background: var(--action-fond);
  color: var(--action-texte);
  font-weight: var(--g-gras);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition);
}
.lien-evitement:focus { top: 0; }

.visuellement-masque {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 3.1 La pente à 8 % -------------------------------------------------
   Transition entre une section sombre et une section claire. La pente monte
   toujours vers la droite : une rampe ne s'incline pas dans deux sens. */
.pente {
  height: var(--pente-hauteur);
  position: relative;
  overflow: hidden;
}
.pente::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.pente--vers-papier      { background: var(--c-nuit); }
.pente--vers-papier::after { background: var(--c-papier); }
.pente--vers-nuit        { background: var(--c-papier); }
.pente--vers-nuit::after { background: var(--c-nuit); }

/* --- 3.2 Filet de titre de section, tracé à la pente de la rampe --------- */
.filet-section {
  display: block;
  width: 104px;
  height: 4px;
  margin-bottom: var(--space-5);
  background: var(--c-signal);
  transform: rotate(var(--pente-angle));
  transform-origin: left center;
  border-radius: var(--radius-full);
}
.sur-nuit .filet-section { background: var(--c-acier); }

.titre-section { margin-bottom: var(--space-3); }

.chapo {
  font-size: var(--text-lg);
  max-width: var(--mesure);
  margin-bottom: var(--space-10);
}
.sur-nuit   .chapo { color: var(--texte-sur-nuit-2); }
.sur-papier .chapo { color: var(--texte-sur-papier-2); }

/* ==========================================================================
   4. BOUTONS ET LIENS
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--f-display);
  font-size: var(--text-lg);
  font-weight: var(--g-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:hover  { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

/* L'ambre ne sert qu'à ce qui se clique ou s'appelle. */
.bouton--action {
  background: var(--action-fond);
  color: var(--action-texte);
}
.bouton--action:hover { background: var(--action-fond-survol); }

.bouton--fantome {
  background: transparent;
  color: var(--texte-sur-nuit);
  border-color: var(--filet-appuye);
}
.bouton--fantome:hover { background: var(--c-habitacle-cl); border-color: var(--c-texte-clair); }

.bouton--fantome-clair {
  background: transparent;
  color: var(--texte-sur-papier);
  border-color: var(--bord-saisie);
}
.bouton--fantome-clair:hover { background: var(--fond-surface-claire); }

.bouton [data-lucide] { width: 24px; height: 24px; flex: none; }

/* Le libellé forme un seul élément flex : sans cela, « Appeler le » et le
   numéro deviennent deux items côte à côte et se répartissent de travers
   dès que le bouton est trop étroit. Le numéro, lui, ne se coupe jamais. */
.bouton__libelle { text-align: center; }
.bouton__tel { white-space: nowrap; }

/* Sous 420 px, le libellé d'appel complet tient sur une ligne à 19 px. */
@media (max-width: 419px) {
  .bouton { font-size: var(--text-base); padding-inline: var(--space-4); }
}

/* Lien de contact en ligne */
.lien-souligne {
  color: var(--texte-lien-clair);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: var(--g-gras);
}
.sur-nuit .lien-souligne { color: var(--c-signal); }
.lien-souligne:hover { text-decoration-thickness: 3px; }

/* ==========================================================================
   5. EN-TÊTE ET NAVIGATION
   ========================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-nuit);
  border-bottom: 1px solid var(--filet-sur-nuit);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--entete-h);
}

/* Monogramme A.G. — SVG inline, contours réels de Bricolage Grotesque */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--texte-sur-nuit);
  padding: var(--space-2) 0;
}
.logo__svg { height: 32px; width: auto; display: block; }
.logo__lettre { fill: currentColor; }
.logo__point  { fill: var(--c-signal); }

.nav__bascule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  min-width: var(--cible);
  min-height: var(--cible);
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--texte-sur-nuit);
  font-family: var(--f-display);
  font-size: var(--text-sm);
  font-weight: var(--g-display);
  border: 2px solid var(--filet-appuye);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav__bascule [data-lucide] { width: 22px; height: 22px; }
.nav__bascule[aria-expanded="true"] .nav__icone-ouvrir,
.nav__bascule[aria-expanded="false"] .nav__icone-fermer { display: none; }

.nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding: var(--space-2) var(--space-3);
  color: var(--texte-sur-nuit);
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.nav__lien:hover { background: var(--c-habitacle-cl); }
.nav__lien[aria-current="true"] { color: var(--c-signal); }

/* Mobile : panneau déroulant */
@media (max-width: 899px) {
  .nav__panneau {
    display: none;
    padding-bottom: var(--space-4);
    border-top: 1px solid var(--filet-sur-nuit);
  }
  .nav__panneau.est-ouvert { display: block; }
  .nav__liste { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); }
  .nav__lien { font-size: var(--text-base); padding-inline: var(--space-4); }
  .nav__appel { margin-top: var(--space-3); width: 100%; }
}

@media (min-width: 900px) {
  .nav__bascule { display: none; }
  /* Un seul display pour .nav__panneau : la déclaration !important qui ouvrait
     ce bloc écrasait le flex déclaré plus bas et renvoyait le bouton d'appel
     à la ligne, sous les liens. */
  .nav__panneau { display: flex !important; align-items: center; }
  .nav__liste { display: flex; align-items: center; gap: var(--space-1); }
  .entete__barre { gap: var(--space-8); }
  .nav__appel {
    min-height: var(--cible);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-base);
    margin-left: var(--space-4);
  }
}

/* ==========================================================================
   6. ACCUEIL (HERO)
   ========================================================================== */
.hero { padding-block: var(--space-12) var(--space-16); }

.hero__grille { display: grid; gap: var(--space-10); }

.hero h1 { margin-bottom: var(--space-5); font-size: clamp(2.125rem, 8vw, 3rem); }

.hero__sous-titre {
  font-size: var(--text-base);
  color: var(--texte-sur-nuit-2);
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--filet-sur-nuit);
}

/* Bandeau de réassurance — quatre faits, pas de séparateurs décoratifs */
.reassurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.reassurance li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  padding: var(--space-3) var(--space-4);
  background: var(--fond-carte);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--g-gras);
  line-height: 1.3;
}
.reassurance [data-lucide] { width: 22px; height: 22px; flex: none; color: var(--picto); }

@media (min-width: 768px) {
  .hero h1 { font-size: var(--text-5xl); }
  .hero__sous-titre { font-size: var(--text-lg); }
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .bouton { flex: 1 1 280px; }
  .reassurance { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .hero__grille { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--space-16); }
  .hero__bandeau { margin-top: var(--space-12); }
  /* La colonne de texte retrécit : les deux boutons repassent l'un sous
     l'autre plutôt que de couper « Appeler le 06 44 16 52 99 » en deux.
     Le flex-basis de 280 px hérité du palier tablette devient une HAUTEUR
     une fois l'axe principal vertical : il faut le neutraliser. */
  .hero__actions { flex-direction: column; max-width: 420px; }
  .hero__actions .bouton { flex: 0 0 auto; }
}

/* ==========================================================================
   7. SERVICES
   ========================================================================== */
.services__grille {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
}

.carte {
  padding: var(--space-6);
  background: var(--fond-carte);
  border: 1px solid var(--filet-sur-nuit);
  border-radius: var(--radius-md);
  transition: background-color var(--transition);
}
.carte:hover { background: var(--fond-carte-survol); }
.carte h3 { margin-bottom: var(--space-3); font-size: var(--text-lg); }
.carte p  { margin-bottom: 0; color: var(--texte-sur-nuit-2); font-size: var(--text-sm); }
.carte__picto {
  display: block;
  width: 34px; height: 34px;
  margin-bottom: var(--space-4);
  color: var(--picto);
}

/* La carte PMR ne partage pas le gabarit des sept autres : c'est le seul
   service que ses confrères ne peuvent pas assurer. */
.carte--phare {
  position: relative;
  background: var(--c-habitacle-cl);
  border-color: var(--filet-appuye);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.carte--phare .filet-section {
  width: 88px;
  height: 5px;
  background: var(--c-signal);
  margin-bottom: var(--space-4);
}
.carte--phare h3 { font-size: var(--text-2xl); }
.carte--phare p  { color: var(--texte-sur-nuit); font-size: var(--text-base); }
.carte--phare .carte__picto { width: 44px; height: 44px; color: var(--c-signal); }

.carte__media { margin: var(--space-6) 0 0; }
.carte__media img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--filet-appuye);
}
@media (min-width: 1000px) { .carte__media { margin: 0; } }

@media (min-width: 640px)  { .services__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .services__grille { grid-template-columns: repeat(3, 1fr); }
  .carte--phare { grid-column: 1 / -1; display: grid; grid-template-columns: 64px 1fr minmax(240px, 300px); gap: var(--space-8); align-items: start; padding: var(--space-10); }
  .carte--phare .carte__picto { margin-bottom: 0; width: 56px; height: 56px; }
}

/* --- 7.1 Bloc véhicule --------------------------------------------------- */
.bloc { margin-bottom: var(--space-16); }
.bloc:last-child { margin-bottom: 0; }

.duo {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-12);
}
.duo:last-child { margin-bottom: 0; }
.duo figure { margin: 0; }
.duo img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--filet-sur-nuit);
}
.duo h4 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.duo p  { color: var(--texte-sur-nuit-2); margin-bottom: 0; }

@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  /* Une ligne sur deux inverse le sens de lecture : le regard ne prend pas
     l'habitude de sauter la colonne image. */
  .duo--inverse .duo__media { order: 2; }
}

/* --- 7.2 Bloc avis ------------------------------------------------------- */
.avis__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--texte-sur-nuit-2);
}
.avis__note {
  font-family: var(--f-display);
  font-size: var(--text-xl);
  font-weight: var(--g-display);
  color: var(--texte-sur-nuit);
}
.avis__etoiles { display: inline-flex; gap: 2px; color: var(--c-signal); }
.avis__etoiles [data-lucide] { width: 20px; height: 20px; }

.avis__grille {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.avis {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--fond-carte);
  border: 1px solid var(--filet-sur-nuit);
  border-radius: var(--radius-md);
}
.avis blockquote {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  white-space: pre-line;   /* les retours à la ligne des verbatims Google sont conservés */
}
/* Repli d'un avis trop long. La hauteur est posée en pixels par main.js, et
   non par -webkit-line-clamp : ce dernier exige « display: -webkit-box », un
   mode hérité que le navigateur « blockifie » ici, le blockquote étant enfant
   d'un conteneur flex. Le résultat n'était fiable que sur certains moteurs.
   Si le script ne s'exécute pas, aucun repli n'est appliqué et l'avis reste
   affiché en entier plutôt que tronqué sans recours. */
.avis blockquote.est-repliee {
  position: relative;
  overflow: hidden;
}
/* Le texte s'éteint au lieu de se couper net : la troncature se voit. */
.avis blockquote.est-repliee::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.4em;
  background: linear-gradient(to bottom, transparent, var(--fond-carte));
  pointer-events: none;
}
.avis:has(.avis__plus) blockquote { margin-bottom: var(--space-3); }

.avis__plus {
  align-self: flex-start;
  min-height: var(--cible);
  margin-bottom: var(--space-5);
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  color: var(--c-signal);
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.avis__plus:hover { color: var(--c-signal-vif); }

.avis__auteur {
  margin-top: auto;
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-sm);
}
.avis__source {
  display: block;
  font-family: var(--f-texte);
  font-weight: var(--g-normal);
  font-size: var(--text-xs);
  color: var(--texte-sur-nuit-2);
}

@media (min-width: 700px)  { .avis__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .avis__grille { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   8. TARIFS
   ========================================================================== */
.tableau-enveloppe {
  overflow-x: auto;
  margin-bottom: var(--space-6);
  border: 1px solid var(--filet-sur-papier);
  border-radius: var(--radius-md);
  background: var(--fond-surface-claire);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
caption {
  text-align: left;
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-4) var(--space-2);
}
th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--filet-sur-papier);
  vertical-align: top;
}
thead th {
  font-family: var(--f-display);
  font-weight: var(--g-display);
  color: var(--texte-sur-papier);
  border-bottom-width: 2px;
  border-bottom-color: var(--bord-saisie);
}
tbody th { hyphens: auto; }

/* Sous 640 px, un tableau de tarifs qui déborde devient un tableau que
   personne ne lit. On resserre la gouttière et on descend d'un cran dans
   l'échelle — sans jamais passer sous le plancher de 17 px. */
@media (max-width: 639px) {
  caption { font-size: var(--text-base); padding: var(--space-4) var(--space-3) var(--space-2); }
  th, td { padding: var(--space-3) var(--space-3); }
  thead th { font-size: var(--text-sm); }
  td.montant { font-size: var(--text-sm); }
  .tableau-enveloppe { border-radius: var(--radius-sm); }
}
tbody th { font-weight: var(--g-gras); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.encadre .montant {
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

td.montant {
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-base);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tarifs__grille { display: grid; gap: var(--space-8); margin-bottom: var(--space-10); }
@media (min-width: 900px) { .tarifs__grille { grid-template-columns: repeat(2, 1fr); align-items: start; } }

.encadre {
  padding: var(--space-6);
  background: var(--fond-surface-claire);
  border-left: 5px solid var(--c-signal-encre);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}
.encadre h3 { font-size: var(--text-lg); }
.encadre p:last-child { margin-bottom: 0; }

.encadre--sombre {
  background: var(--fond-carte);
  color: var(--texte-sur-nuit);
  border-left-color: var(--c-signal);
  box-shadow: none;
}
.encadre--sombre p { color: var(--texte-sur-nuit-2); }

.regles { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.regles li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
}
.regles li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 20px; height: 3px;
  background: var(--c-signal-encre);
  transform: rotate(var(--pente-angle));
  border-radius: var(--radius-full);
}
.sur-nuit .regles li::before { background: var(--c-acier); }

.mention-legale-tarifs {
  font-size: var(--text-xs);
  color: var(--texte-sur-papier-2);
  border-top: 1px solid var(--filet-sur-papier);
  padding-top: var(--space-5);
  max-width: none;
}

/* ==========================================================================
   9. ZONES DESSERVIES
   ========================================================================== */
.zones__grille { display: grid; gap: var(--space-8); }
.zone h3 { margin-bottom: var(--space-4); }
.zone__liste { list-style: none; padding: 0; margin: 0; }
.zone__liste li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--filet-sur-nuit);
  font-size: var(--text-sm);
  color: var(--texte-sur-nuit-2);
}
.zone__liste li:last-child { border-bottom: 0; }
.zone__picto { width: 28px; height: 28px; color: var(--picto); margin-bottom: var(--space-3); display: block; }

@media (min-width: 700px)  { .zones__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .zones__grille { grid-template-columns: repeat(4, 1fr); } }

.zones__longue-distance {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: var(--fond-carte);
  border-radius: var(--radius-lg);
  border: 1px solid var(--filet-sur-nuit);
}
.zones__longue-distance h3 { margin-bottom: var(--space-3); }
.zones__longue-distance p  { color: var(--texte-sur-nuit-2); }
@media (min-width: 900px) {
  .zones__longue-distance { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; }
  .zones__longue-distance p { margin-bottom: 0; }
}

/* ==========================================================================
   10. QUESTIONS FRÉQUENTES
   ========================================================================== */
.faq { list-style: none; padding: 0; margin: 0 0 var(--space-16); max-width: 900px; }
.faq details {
  background: var(--fond-surface-claire);
  border: 1px solid var(--filet-sur-papier);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--cible);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-lg);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  border-right: 3px solid var(--c-signal-encre);
  border-bottom: 3px solid var(--c-signal-encre);
  transform: rotate(45deg) translateY(-4px);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-4px); }
.faq details[open] summary { border-bottom: 1px solid var(--filet-sur-papier); }
.faq__reponse { padding: var(--space-5); }
.faq__reponse p:last-child { margin-bottom: 0; }

/* ==========================================================================
   11. CONTACT ET FORMULAIRE
   ========================================================================== */
.contact__grille { display: grid; gap: var(--space-12); }
@media (min-width: 1000px) { .contact__grille { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-16); align-items: start; } }

.contact__telephone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--f-display);
  font-size: var(--text-3xl);
  font-weight: var(--g-display);
  color: var(--texte-sur-papier);
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  padding: var(--space-2) 0;
  min-height: var(--cible);
}
.contact__telephone:hover { color: var(--c-signal-encre); }
.contact__telephone [data-lucide] { width: 32px; height: 32px; color: var(--c-signal-encre); flex: none; }

.coordonnees { list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.coordonnees li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--filet-sur-papier);
  max-width: none;
}
.coordonnees [data-lucide] { width: 24px; height: 24px; flex: none; color: var(--c-ardoise); margin-top: 2px; }
.coordonnees__intitule { display: block; font-weight: var(--g-gras); }
.coordonnees__valeur   { font-size: var(--text-sm); color: var(--texte-sur-papier-2); }

/* --- 11.1 Formulaire ----------------------------------------------------- */
.formulaire {
  background: var(--fond-surface-claire);
  border: 1px solid var(--filet-sur-papier);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
@media (min-width: 700px) { .formulaire { padding: var(--space-10); } }

.champs { display: grid; gap: var(--space-5); border: 0; padding: 0; margin: 0 0 var(--space-6); }
@media (min-width: 700px) {
  .champs { grid-template-columns: repeat(2, 1fr); }
  .champ--large { grid-column: 1 / -1; }
}
.champs legend {
  font-family: var(--f-display);
  font-weight: var(--g-display);
  font-size: var(--text-lg);
  padding: 0;
  margin-bottom: var(--space-4);
}

.champ { display: flex; flex-direction: column; gap: var(--space-2); }
.champ label { font-weight: var(--g-gras); font-size: var(--text-sm); }
.champ__facultatif { font-weight: var(--g-normal); color: var(--texte-sur-papier-2); }
.champ__aide {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--texte-sur-papier-2);
  max-width: var(--mesure);
}

/* Un exemple en placeholder doit rester lisible : le gris par défaut des
   navigateurs tombe sous le seuil AA. */
::placeholder { color: var(--texte-sur-papier-2); opacity: 1; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  min-height: var(--cible);
  padding: var(--space-3) var(--space-4);
  font-family: var(--f-texte);
  font-size: var(--text-base);
  color: var(--texte-sur-papier);
  background: var(--fond-saisie);
  border: 2px solid var(--bord-saisie);
  border-radius: var(--radius-md);
}
textarea { min-height: 128px; resize: vertical; line-height: var(--interligne-texte); }
select { background-image: none; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-sur-clair);
  outline-offset: 1px;
  border-color: var(--focus-sur-clair);
}
[aria-invalid="true"] { border-color: var(--etat-erreur); border-width: 3px; }

.erreur {
  display: none;
  font-size: var(--text-sm);
  font-weight: var(--g-gras);
  color: var(--etat-erreur);
}
.erreur.est-visible { display: block; }

.option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: var(--cible);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--filet-sur-papier);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color var(--transition), background-color var(--transition);
}
.option:hover { border-color: var(--bord-saisie); }
.option:has(input:checked) { border-color: var(--c-signal-encre); background: var(--option-cochee); }
.option input[type="checkbox"] {
  flex: none;
  width: 26px; height: 26px;
  margin: 0;
  accent-color: var(--c-signal-encre);
  cursor: pointer;
}
.option span { padding-top: 2px; }
.consentement { margin-bottom: var(--space-6); }
.consentement .option { align-items: flex-start; }

/* Piège à robots — invisible et hors du parcours clavier */
.appat {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulaire__envoi { width: 100%; }

.etat-envoi {
  display: none;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.etat-envoi.est-visible { display: block; }
.etat-envoi p:last-child { margin-bottom: 0; }
.etat-envoi--succes { background: var(--etat-succes-fond); border-left: 5px solid var(--etat-succes); color: var(--texte-sur-papier); }
.etat-envoi--echec  { background: var(--etat-erreur-fond); border-left: 5px solid var(--etat-erreur); color: var(--texte-sur-papier); }
.etat-envoi__secours {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--f-display);
  font-size: var(--text-2xl);
  font-weight: var(--g-display);
  color: var(--texte-sur-papier);
  text-decoration: none;
  min-height: var(--cible);
}
.etat-envoi__secours:hover { color: var(--c-signal-encre); }

.bouton[aria-busy="true"] { opacity: .75; cursor: progress; }

/* ==========================================================================
   12. PIED DE PAGE
   ========================================================================== */
.pied { padding-block: var(--space-12) var(--space-10); border-top: 1px solid var(--filet-sur-nuit); }
.pied__grille { display: grid; gap: var(--space-8); }
@media (min-width: 800px) { .pied__grille { grid-template-columns: 1.2fr 1fr 1fr; } }

.pied h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.pied p, .pied li { font-size: var(--text-sm); color: var(--texte-sur-nuit-2); }
.pied__liste { list-style: none; padding: 0; margin: 0; }
.pied__liste li { padding: var(--space-1) 0; }
.pied__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--texte-sur-nuit);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pied__liste a:hover { color: var(--c-signal); }

.pied__logo { margin-bottom: var(--space-5); display: inline-block; }
.pied__logo .logo__svg { height: 40px; }

.pied__mentions {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--filet-sur-nuit);
  font-size: var(--text-xs);
  color: var(--texte-sur-nuit-2);
  max-width: none;
}

/* ==========================================================================
   13. BOUTON D'APPEL COLLANT — mobile uniquement
   ========================================================================== */
.appel-collant {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 60;
  box-shadow: var(--shadow-collant);
}
body { padding-bottom: calc(56px + var(--space-8)); }

@media (min-width: 768px) {
  .appel-collant { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   14. PAGES LÉGALES
   ========================================================================== */
.page-legale { padding-block: var(--space-16) var(--space-24); }
.page-legale h1 { font-size: var(--text-3xl); margin-bottom: var(--space-8); }
.page-legale h2 { font-size: var(--text-xl); margin-top: var(--space-12); }
.page-legale h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.page-legale .conteneur > * { max-width: 76ch; }
.page-legale dl { margin: 0 0 var(--space-6); max-width: 76ch; }
.page-legale dt { font-weight: var(--g-gras); margin-top: var(--space-4); }
.page-legale dd { margin: 0 0 var(--space-2); color: var(--texte-sur-papier-2); }
.page-legale address { font-style: normal; }
.retour {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--cible);
  margin-bottom: var(--space-8);
  font-weight: var(--g-gras);
  color: var(--texte-lien-clair);
}
.retour [data-lucide] { width: 20px; height: 20px; }

/* ==========================================================================
   15. MOUVEMENT
   Le mouvement répond au scroll ou à un clic, jamais au hasard. Une seule
   animation orchestrée au chargement, et des filets qui se déploient à la
   pente de la rampe. Rien ne monte en fondu section après section.
   ========================================================================== */
@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;
  }
  .bouton:hover { transform: none; }
}

/* ==========================================================================
   16. IMPRESSION — les tarifs et les coordonnées doivent sortir lisibles
   ========================================================================== */
@media print {
  .entete, .appel-collant, .nav__bascule, .formulaire, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .sur-nuit { background: #fff !important; color: #000 !important; }
  .sur-nuit .chapo, .carte p, .zone__liste li { color: #000 !important; }
  .pente { display: none; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}