/* ==========================================================================
   Go Lyon — feuille de style du site
   Extraite du gabarit valide par le client le 24 aout 2026.
   Reference : design-systems/DS-GO-LYON.html

   Regle : cette feuille est la SEULE source de style du site. Aucune page
   ne redefinit un jeton ni ne pose de style inline structurant. Une valeur
   qui manque se rajoute ici, pas dans la page.
   ========================================================================== */

/* Les deux polices du site, declarees ICI et nulle part ailleurs.

   Elles vivaient dans un <style> du <head> de chaque page. faire-theme.py
   retire les <style> en construisant le thème, en supposant que la feuille
   les portait : elle ne les portait pas. Resultat, le site WordPress mis en
   ligne le 31/08 n'avait AUCUNE police declaree et retombait sur les polices
   systeme, sans qu'aucun controle ne le signale.

   Les chemins sont relatifs a CETTE feuille, jamais a la page : `fonts/` est
   son dossier voisin aussi bien dans site-navigable/assets/ que dans
   wp-content/themes/go-lyon/assets/. Un chemin relatif a la page casserait
   dans l'un des deux. */
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --noir:#060505; --nuit:#0B0A08; --plaque:#100E0B; --coeur:#15120D;
  /* Le fond de page en composantes, pour les voiles de decor qui doivent
     le faire reapparaitre par transparence. */
  --noir-rgb:6,5,5;
  /* Le fond sombre et son texte, nommes pour les blocs qui restent
     sombres a l'interieur d'une section claire — la tuile vedette. */
  --sombre-haut:#15120D; --sombre-bas:#0B0A08; --sur-sombre:#F9F6EF;
  /* La teinte doree vit ici et nulle part ailleurs. Tout le reste la
     consomme par --or-rgb : changer l or du site tient en une ligne. */
  --or-rgb:198,154,46;
  --or:#C69A2E; --or-vif:#E2C583; --or-terne:#B99646;
  --texte:#F9F6EF; --gris:#BDB6A8; --sur-or:#0A0908;
  /* Le vert de WhatsApp. Ce n'est pas une couleur de la charte et il n'a pas a
     le devenir : il ne sert qu'a la pastille du choix d'appel, parce qu'un
     logo de messagerie se reconnait a sa couleur avant son dessin. Declare ici
     pour qu'aucune page n'ait a le recopier en dur. */
  --whatsapp:#25D366; --whatsapp-rgb:37,211,102;
  --fil:rgba(247,243,234,.09); --fil-or:rgba(var(--or-rgb),.24);
  --ressort:cubic-bezier(.32,.72,0,1);
  --r-xl:2rem; --r-l:1.5rem; --r-m:1rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--texte);font-family:'General Sans',system-ui,sans-serif;
  font-size:1.15rem;line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.mono{font-family:'Clash Display',system-ui,sans-serif;font-weight:600;letter-spacing:-.022em;word-spacing:.05em;line-height:.99;text-wrap:balance}
p{color:var(--gris);max-width:62ch;font-size:1.05rem}

/* Blocs de prose. Le gabarit n'avait qu'un paragraphe par bloc ; les pages du
   site en enchainent plusieurs, et sans cette regle ils se collent. */
.prose{max-width:64ch}
.prose p{max-width:none}
.prose p+p{margin-top:16px}
.prose b,.prose strong{color:var(--texte);font-weight:600}
a{color:inherit;text-decoration:none}
.zone{width:min(1320px,100% - 32px);margin-inline:auto;position:relative;z-index:2}
section{padding:84px 0;position:relative}

/* ---- nappes lumineuses + grain, fixes et hors flux ---- */
.nappe{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.n1{width:70vw;height:70vw;top:-26vw;right:-22vw;background:radial-gradient(circle,rgba(var(--or-rgb),.20),transparent 66%)}
.n2{width:58vw;height:58vw;top:52%;left:-24vw;background:radial-gradient(circle,rgba(124,100,32,.20),transparent 68%)}
.n3{width:44vw;height:44vw;bottom:-14vw;right:-10vw;background:radial-gradient(circle,rgba(243,220,140,.10),transparent 70%)}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.035;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ================= DOUBLE LISERÉ ================= */
.coque{background:rgba(247,243,234,.035);border:1px solid var(--fil);border-radius:var(--r-xl);padding:6px;position:relative}
.coque.doree{border-color:var(--fil-or);background:rgba(var(--or-rgb),.05)}
.noyau{background:linear-gradient(168deg,var(--coeur),var(--plaque) 62%,var(--nuit));
 border-radius:calc(var(--r-xl) - 6px);box-shadow:inset 0 1px 1px rgba(255,255,255,.10);padding:30px 24px;height:100%}

/* ================= NAV ÎLOT FLOTTANT ================= */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--or);color:var(--sur-or);
 padding:14px 22px;border-radius:0 0 var(--r-m) 0;font-weight:600}
.skip-link:focus{left:0}

/* Focus visible sur tout ce qui se navigue au clavier. :focus-visible ne se declenche
   qu au clavier, la souris ne dessine donc aucun anneau. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
 outline:2px solid var(--or);outline-offset:3px;border-radius:6px}
.cta:focus-visible{outline-offset:4px}

.bandeau .num{font-family:'Clash Display';font-size:12px;letter-spacing:.2em;color:var(--sur-or);
 background:var(--or);border-radius:999px;padding:4px 11px;flex:0 0 auto;font-weight:600}
.bandeau .quoi{font-size:12.5px;color:var(--gris);line-height:1.45}
.bandeau .quoi b{color:var(--texte);font-weight:600}
@media(max-width:640px){
  .bandeau{padding:8px 12px;gap:9px}
  .ilot{top:74px}
  .bandeau .quoi{font-size:11px;text-align:left}
}
.ilot{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:60;width:max-content;max-width:calc(100% - 24px)}
/*  ANCRES. L'ilot de navigation flotte par-dessus la page : un lien qui pointe
    une section precise (le carrousel d'avis renvoie aux mentions legales)
    arrivait pile dessous, titre masque. La marge s'applique au seul element
    vise par le fragment d'URL, donc elle ne deplace rien d'autre.
    La hauteur est declaree ici et nulle part ailleurs : go-lyon.js la relit
    pour reposer l'ancre apres le chargement, ou le saut natif tombe a cote.  */
:root{--ancre-haut:126px}
:target{scroll-margin-top:var(--ancre-haut)}
/*  Apres la regle de base, sinon elle la reecrirait : le bloc mobile de l'ilot
    est declare plus haut dans le fichier.  */
@media(max-width:640px){ :root{--ancre-haut:144px} }
.ilot-int{display:flex;align-items:center;gap:10px;background:rgba(11,10,8,.9);backdrop-filter:blur(26px) saturate(1.2);
 border:1px solid var(--fil);border-radius:999px;padding:7px 7px 7px 20px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.sceau{font-family:'Clash Display';font-size:.98rem;letter-spacing:.24em;color:var(--or);white-space:nowrap;
 display:flex;align-items:center;min-height:44px}
.ilot nav{display:none;gap:2px}
.ilot nav a{display:flex;align-items:center;min-height:44px;padding:0 15px;font-size:.9rem;color:var(--gris);
 border-radius:999px;transition:color .7s var(--ressort),background .7s var(--ressort)}
.ilot nav a:hover{color:var(--texte);background:rgba(247,243,234,.06)}
.appel{display:none;align-items:center;gap:9px;min-height:44px;padding:0 6px 0 18px;background:var(--or);color:var(--sur-or);
 border-radius:999px;font-weight:600;font-size:.9rem;transition:transform .7s var(--ressort)}
.appel:active{transform:scale(.98)}
.jeton{width:32px;height:32px;border-radius:999px;background:rgba(10,9,8,.14);display:grid;place-items:center;
 transition:transform .7s var(--ressort)}
.appel:hover .jeton{transform:translate(3px,-1px) scale(1.05)}
.jeton svg{width:14px;height:14px}
.levier{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:rgba(247,243,234,.06);
 border:none;cursor:pointer;color:var(--texte)}
.levier i{display:block;width:17px;height:1.5px;background:currentColor;border-radius:2px;position:absolute;
 transition:transform .7s var(--ressort),opacity .4s var(--ressort)}
.levier i:nth-child(1){transform:translateY(-5px)}
.levier i:nth-child(3){transform:translateY(5px)}
body.ouvert .levier i:nth-child(1){transform:rotate(45deg)}
body.ouvert .levier i:nth-child(2){opacity:0}
body.ouvert .levier i:nth-child(3){transform:rotate(-45deg)}


/* ---- MEGA MENU ----------------------------------------------------------
   La navigation d'origine portait cinq liens pour vingt-cinq pages. Chaque
   onglet garde son libelle CLIQUABLE vers le hub et confie l'ouverture du
   panneau a un bouton distinct : un mega menu dont l'entete n'est pas un lien
   oblige a traverser le panneau pour atteindre le hub. */
.onglet{position:relative;display:flex;align-items:center}
/* prolonge la zone de survol jusqu’au panneau : sans ce pont, le pointeur
   traverse le padding de la barre et le menu se ferme sous lui */
.onglet::after{content:"";position:absolute;left:-6px;right:-6px;top:100%;
 height:30px;display:none}
.onglet.ouvert::after{display:block}
.onglet-lien,.onglet-seul{display:flex;align-items:center;min-height:44px;padding:0 8px 0 15px;
 font-size:.9rem;color:var(--gris);border-radius:999px;transition:color .3s var(--ressort),background .3s var(--ressort)}
.onglet-seul{padding:0 15px}
/* la pilule de survol : elle doit valoir pour le lien comme pour le bouton
   de l’onglet sans hub, et rester visible tant que son panneau est ouvert */
.onglet-lien:hover,.onglet-seul:hover,.onglet:hover .onglet-lien,
.onglet.ouvert .onglet-lien{color:var(--texte);background:rgba(247,243,234,.06)}
.onglet.ouvert .onglet-solo{color:var(--or)}
.onglet-ouvre svg{transition:transform .3s var(--ressort)}
.onglet-ouvre{display:grid;place-items:center;width:26px;min-height:44px;padding:0 6px 0 0;
 background:none;border:0;color:var(--gris);cursor:pointer;
 transition:color .3s var(--ressort),transform .3s var(--ressort)}
.onglet-ouvre svg{width:13px;height:13px}
/* l’onglet sans hub porte son libelle DANS le bouton : il doit alors
   reprendre la mise en forme d’un libelle, pas celle d’un chevron seul */
/* ================= OU SUIS-JE =================
   Mounir, 26/08 : « on ne voit pas le lien actif dans le header sur lequel on
   se trouve ». Sur un site de 35 pages, un visiteur arrive par Google au
   milieu de l'arborescence et n'a aucun repere.

   Trois niveaux, du plus fort au plus discret :
     - la PAGE COURANTE, aria-current="page" : dorée et soulignée d'un filet
     - l'ONGLET QUI LA CONTIENT, .onglet.actif : doré, sans filet
     - le reste, inchangé

   Le marquage est pose a la generation, pas en JS : pas de scintillement, et
   il tient sans JavaScript. */
.ilot nav [aria-current="page"],
.onglet.actif > .onglet-lien,
.onglet.actif > .onglet-solo,
/* `data-section` est pose par go_lyon_marquer_actif() cote theme (07/10/2026).
   Il dit la meme chose que `.onglet.actif`, sur le LIEN plutot que sur son
   conteneur, parce que le marquage se fait sur les href. On le branche ici au
   lieu de lui ecrire un style a part : ce bloc tient deja la hierarchie des
   trois niveaux, en ajouter un quatrieme ailleurs dans la feuille, c'est
   exactement ce qui a produit le double soulignement du 07/10. */
.ilot nav [data-section]{color:var(--or)}
/* Le filet ne se met QUE sur la page exacte : le mettre aussi sur l'onglet
   parent ferait deux traits dores dans la barre et on ne saurait plus lequel
   designe la page. */
.ilot nav > .onglet > [aria-current="page"],
.ilot nav > [aria-current="page"]{position:relative}
.ilot nav > .onglet > [aria-current="page"]::before,
.ilot nav > [aria-current="page"]::before{content:"";position:absolute;
 left:14px;right:14px;bottom:6px;height:1.5px;border-radius:2px;background:var(--or)}
/* Dans le panneau, la page courante prend le fond dore plutot qu'un filet :
   les cartes sont deja separees, un trait de plus serait du bruit. */
.mega a[aria-current="page"]{background:rgba(var(--or-rgb),.10)}
.mega a[aria-current="page"] b{color:var(--or)}
/* Menu mobile : meme hierarchie, et la section qui contient la page est
   ouverte d'office par le generateur. */
/* `.voile .voile-sous a` plus bas dans la feuille a exactement la meme
   specificite : a egalite, c'est l'ordre qui decide et elle gagnait. On
   qualifie par le conteneur plutot que d'ajouter un !important. Troisieme
   fois que ce piege se presente sur ce site. */
.voile .voile-sous a[aria-current="page"],.voile .voile-seul[aria-current="page"]{color:var(--or)}
.voile .voile-sous a[aria-current="page"]::before{content:"";display:inline-block;
 width:14px;height:1.5px;border-radius:2px;background:var(--or);
 vertical-align:middle;margin-right:9px}

.onglet-solo{display:flex;align-items:center;width:auto;gap:7px;
 padding:0 12px 0 15px;white-space:nowrap;font-family:inherit;
 font-size:.9rem;cursor:pointer}
.onglet-solo svg{margin-left:-2px}
.onglet:hover .onglet-ouvre,.onglet.ouvert .onglet-ouvre{color:var(--or)}
.onglet.ouvert .onglet-ouvre svg{transform:rotate(180deg)}

/* Le panneau colle a la barre et son padding-top fait le pont : sans lui,
   traverser l’espace vide fait retomber le :hover et le menu se ferme
   sous le pointeur. Le decor descend donc sur .mega-int. */
.mega{position:fixed;top:100%;left:50%;transform:translate(-50%,-8px);
 width:min(980px,calc(100vw - 32px));padding-top:14px;
 opacity:0;visibility:hidden;pointer-events:none;z-index:55;
 transition:opacity .34s var(--ressort),transform .34s var(--ressort),visibility .34s}
.mega.la{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega-int{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:18px;
 border-radius:var(--r-xl);background:rgba(11,10,8,.96);
 backdrop-filter:blur(30px) saturate(1.2);border:1px solid var(--fil-or);
 box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ilot nav .mega a{display:block;padding:12px 14px;border-radius:var(--r-m);border:1px solid transparent;
 transition:background .3s var(--ressort),border-color .3s var(--ressort)}
.ilot nav .mega a:hover{background:rgba(var(--or-rgb),.08);border-color:var(--fil-or)}
.ilot nav .mega a b{display:block;color:var(--texte);font-weight:600;font-size:.96rem;line-height:1.3}
.ilot nav .mega a span{display:block;color:var(--gris);font-size:.83rem;line-height:1.4;margin-top:3px}

/* le menu plein ecran reprend la meme arborescence, en sections depliables */
.voile-bloc{width:100%;max-width:520px;border-bottom:1px solid var(--fil)}
.voile .voile-bloc summary{display:flex;align-items:center;justify-content:space-between;
 list-style:none;cursor:pointer;padding:15px 0;font-family:'Clash Display';
 font-size:clamp(1.5rem,7vw,2.1rem);color:var(--texte)}
.voile-bloc summary::-webkit-details-marker{display:none}
.voile-bloc summary svg{width:20px;height:20px;color:var(--or);transition:transform .3s var(--ressort)}
.voile-bloc[open] summary svg{transform:rotate(180deg)}
.voile-sous{display:grid;padding:2px 0 16px}
.voile .voile-sous a{font-family:'General Sans';font-size:1.02rem;color:var(--gris);padding:9px 0;opacity:1;transform:none}
.voile .voile-sous a:hover{color:var(--or)}
.voile .voile-seul{font-family:'Clash Display';font-size:clamp(1.5rem,7vw,2.1rem);
 color:var(--texte);padding:15px 0;width:100%;max-width:520px;border-bottom:1px solid var(--fil)}

.voile{position:fixed;inset:0;z-index:55;background:rgba(6,5,5,.86);backdrop-filter:blur(30px);
 display:flex;flex-direction:column;align-items:center;padding:132px 28px 40px;gap:0;
 overflow-y:auto;overscroll-behavior:contain;
 opacity:0;visibility:hidden;transition:opacity .7s var(--ressort),visibility .7s}
body.ouvert .voile{opacity:1;visibility:visible}
/* le menu plein ecran ne concerne que le mobile : la barre le remplace
   au-dessus de 900 px, ou le hamburger disparait */
@media(min-width:900px){.voile{display:none}}
.voile a{font-family:'Clash Display';font-size:clamp(2.1rem,11vw,3.4rem);color:var(--texte);padding:9px 0;
 opacity:0;transform:translateY(48px);transition:opacity .8s var(--ressort),transform .8s var(--ressort)}
body.ouvert .voile a{opacity:1;transform:none}
body.ouvert .voile a:nth-child(1){transition-delay:.10s}
body.ouvert .voile a:nth-child(2){transition-delay:.16s}
body.ouvert .voile a:nth-child(3){transition-delay:.22s}
body.ouvert .voile a:nth-child(4){transition-delay:.28s}
body.ouvert .voile a:nth-child(5){transition-delay:.34s}

/* ================= BOUTONS ================= */
.cta{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 8px 0 26px;border-radius:999px;
 font-weight:600;font-size:1rem;border:1px solid transparent;transition:transform .7s var(--ressort),box-shadow .7s var(--ressort)}
.cta:active{transform:scale(.98)}
.cta-or{background:var(--or);color:var(--sur-or);box-shadow:0 10px 34px rgba(var(--or-rgb),.18)}
.cta-or:hover{box-shadow:0 18px 54px rgba(var(--or-rgb),.30)}
.cta-fil{border-color:var(--fil-or);color:var(--or)}
.cta-fil:hover{background:rgba(var(--or-rgb),.07)}
.bulle{width:38px;height:38px;border-radius:999px;background:rgba(10,9,8,.15);display:grid;place-items:center;
 transition:transform .7s var(--ressort)}
.cta-fil .bulle{background:rgba(var(--or-rgb),.12)}
.cta:hover .bulle{transform:translate(4px,-2px) scale(1.06)}
.bulle svg{width:15px;height:15px}

.macaron{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--fil-or);background:rgba(var(--or-rgb),.07);
 border-radius:999px;padding:7px 15px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:600}
.intitule{margin-bottom:44px}
/* la mesure vit sur le titre, jamais sur le conteneur : l unite ch se calcule
   sur la taille de police de l element, pas sur celle de son parent. */
/* Les bornes du gabarit etaient calees sur des titres courts de maquette :
   15ch cassait un vrai H2 de 45 signes sur trois lignes, dans une zone qui en
   fait 1 340 px de large. La mesure reste confortable a 24ch et 62ch, et le
   bloc cesse de paraitre ecrase contre le vide. */
.intitule h2{font-size:clamp(2.3rem,7.4vw,4.1rem);margin:20px 0 18px;max-width:20ch}
.intitule p{font-size:1.18rem;max-width:62ch;line-height:1.65}

/* ================= HÉROS, cascade en Z ================= */
.heros{min-height:100dvh;display:flex;align-items:center;padding:150px 0 72px}
/* En-tete des pages document, mentions legales et confidentialite. Elles ne
   peuvent pas reprendre .heros : le min-height de 100dvh ouvrirait un plein
   ecran vide avant le premier paragraphe. Il leur faut le degagement sous la
   barre flottante, et rien d'autre. */
.tete-doc{padding:150px 0 8px}
.tete-doc h1{font-size:clamp(2.1rem,7vw,3.2rem);margin:22px 0 18px}
.tete-doc p{max-width:60ch}
.heros h1{font-size:clamp(2.6rem,11.4vw,4.6rem);margin:26px 0 24px}
.heros h1 .filet{-webkit-text-stroke:1.2px var(--or);color:transparent;display:block}
.heros .amorce{font-size:1.1rem;max-width:46ch;margin-bottom:36px}
.duo-cta{display:flex;flex-wrap:wrap;gap:12px}
/* ---- triptyque photo ---- */
.triptyque{display:grid;gap:16px}
.vue{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--fil);aspect-ratio:4/3}
.vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ressort)}
.vue:hover img{transform:scale(1.04)}
.vue figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px;
 background:linear-gradient(to top,rgba(6,5,5,.94),rgba(6,5,5,.6) 55%,transparent)}
.vue .etiq{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);font-weight:600;margin-bottom:6px}
.vue .dit{font-size:1.15rem;color:var(--texte);font-weight:500}

/* ---- reperage de chapitre : marque la coupure entre deux sections ---- */
.chapitre{display:flex;align-items:center;gap:20px;padding:0 0 8px}
.chapitre .no{font-family:'Clash Display';font-size:clamp(3.2rem,11vw,5.2rem);line-height:.8;
 color:transparent;-webkit-text-stroke:1.2px rgba(var(--or-rgb),.42);font-variant-numeric:tabular-nums}
/* Sur une section sombre SANS photo de fond, le contour a 42 % tombe a
   2,16:1 pour un seuil de 3. Toutes les sections sombres de l'accueil
   portaient un decor dont les zones eclairees le rattrapaient : c'est la
   page aeroport qui a fait apparaitre le cas. 62 % donne 3,47:1. */
section:not(.clair):not(.bande-or) .chapitre .no{-webkit-text-stroke-color:rgba(var(--or-rgb),.62)}
.chapitre .barre{flex:1;height:1px;background:linear-gradient(90deg,var(--fil-or),transparent)}
.chapitre .lib{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--or);font-weight:600;white-space:nowrap}

/* ---- fil d'Ariane ----------------------------------------------------------
   Trente-quatre pages portaient deja un BreadcrumbList en donnees structurees
   et AUCUNE ne l'affichait. Google demande que les donnees structurees
   decrivent un contenu visible : le fil est donc construit A PARTIR de ce bloc
   par generateurs/fil-ariane.py, et ne peut pas le contredire.

   Il se pose en tete de la premiere section apres le hero, donc sur fond clair.
   Les couleurs viennent des jetons : ils basculent seuls si la section change
   de peau. */
.ariane{padding:0 0 22px}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
 align-items:center;gap:0 10px;font-size:13px;color:var(--gris)}
.ariane li{display:flex;align-items:center;gap:10px;min-height:28px}
/* Le separateur est dessine, pas ecrit : un caractere dans le HTML serait lu a
   voix haute par un lecteur d'ecran a chaque etape. */
.ariane li + li::before{content:"";width:5px;height:5px;border-right:1px solid var(--fil-or);
 border-top:1px solid var(--fil-or);transform:rotate(45deg);flex:0 0 auto}
.ariane a{color:var(--gris);text-decoration:none;border-bottom:1px solid transparent;
 transition:color .4s var(--ressort),border-color .4s var(--ressort)}
.ariane a:hover{color:var(--or);border-bottom-color:var(--fil-or)}
.ariane [aria-current]{color:var(--texte);font-weight:500}

/* ---- bandeau de consentement (Complianz) -----------------------------------
   Complianz genere sa propre feuille a partir de reglages stockes EN BASE
   WordPress : ni versionnes, ni relus, et son interface les a deja
   reinitialises une fois sous nos yeux le 22/09. L'habillage vit donc ICI, en
   redefinissant les variables que le greffon expose, avec les jetons du design
   system. Si la base repart aux valeurs par defaut, le bandeau reste en nuit et
   or.

   Refuser pese autant qu'accepter : meme taille, meme graisse, bordure doree
   pleine. La CNIL sanctionne un refus rendu moins visible que l'acceptation. */
.cmplz-cookiebanner{
 --cmplz_banner_background_color:var(--plaque);
 --cmplz_banner_border_color:var(--fil-or);
 --cmplz_banner_border_radius:var(--r-l);
 --cmplz_banner_border_width:1px;
 --cmplz_text_color:var(--texte);
 --cmplz_hyperlink_color:var(--or-vif);
 --cmplz_button_accept_background_color:var(--or);
 --cmplz_button_accept_border_color:var(--or);
 --cmplz_button_accept_text_color:var(--sur-or);
 --cmplz_button_deny_background_color:transparent;
 --cmplz_button_deny_border_color:var(--or);
 --cmplz_button_deny_text_color:var(--texte);
 --cmplz_button_settings_background_color:transparent;
 --cmplz_button_settings_border_color:var(--fil-or);
 --cmplz_button_settings_text_color:var(--gris);
 --cmplz_button_border_radius:999px;
 --cmplz_slider_active_color:var(--or);
 --cmplz_slider_bullet_color:var(--sur-or);
 --cmplz_slider_inactive_color:var(--gris);
 --cmplz_category_header_always_active_color:var(--or);
 font-family:'General Sans',system-ui,sans-serif;
 box-shadow:0 30px 80px rgba(var(--noir-rgb),.6)}
.cmplz-cookiebanner .cmplz-title{font-family:'Clash Display';font-weight:600;letter-spacing:.01em}
.cmplz-cookiebanner .cmplz-btn{font-weight:600;min-height:48px;
 transition:transform .5s var(--ressort),background-color .5s var(--ressort)}
.cmplz-cookiebanner .cmplz-btn:active{transform:scale(.98)}
.cmplz-cookiebanner .cmplz-accept:hover{background-color:var(--or-vif)}
.cmplz-cookiebanner .cmplz-deny:hover{background-color:rgba(var(--or-rgb),.12)}
/* L'ecran « Personnaliser ». Complianz y pose un gris clair ECRIT EN DUR,
   rgba(239,239,239,.5), sans variable pour le redefinir : trouve a l'ecran le
   22/09, il faisait des bandes grises sur fond nuit. On reprend la surface du
   macaron, un voile d'or et son filet. Ses chevrons sont des images noires : on
   les retourne, sinon ils disparaissent sur fond sombre. */
/* `body` en tete : la regle de Complianz porte TROIS classes et se charge
   apres la notre, elle gagnait a egalite. Verifie dans la cascade le 22/09. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category{background-color:rgba(var(--or-rgb),.06);
 border:1px solid var(--fil-or);border-radius:var(--r-m)}
.cmplz-cookiebanner .cmplz-category .cmplz-icon{filter:invert(.92)}

/* ---- document fabrique par un greffon ----------------------------------------
   Aujourd'hui : la politique de cookies de Complianz, rendue par page.php dans
   la mise en page des pages legales. Le texte arrive avec la feuille generique
   de Complianz, qui le vise par #cmplz-document : un identifiant, qui l'emporte
   sur toute classe. On reprend donc le meme identifiant, precede de notre
   classe, pour lui donner la typographie des autres pages legales. */
.doc-greffon{max-width:760px}
.doc-greffon #cmplz-document{font-family:'General Sans',system-ui,sans-serif;
 font-size:1rem;line-height:1.7;color:var(--gris);max-width:none}
.doc-greffon #cmplz-document h2,.doc-greffon #cmplz-document h3{font-family:'Clash Display';
 color:var(--texte);line-height:1.2;font-weight:600}
.doc-greffon #cmplz-document h2{font-size:1.5rem;margin:52px 0 14px}
.doc-greffon #cmplz-document h3{font-size:1.15rem;margin:32px 0 10px}
.doc-greffon #cmplz-document p,.doc-greffon #cmplz-document li{color:var(--gris)}
.doc-greffon #cmplz-document a{color:var(--or);text-underline-offset:3px}
.doc-greffon #cmplz-document table{width:100%;border-collapse:collapse;font-size:.92rem}
.doc-greffon #cmplz-document th,.doc-greffon #cmplz-document td{border-bottom:1px solid var(--fil);
 padding:10px 8px;text-align:left;vertical-align:top}
/* La zone « Gerez vos reglages de consentement » du document reprend les
   variables de Complianz, declarees sur :root : « Toujours active » y sortait en
   vert, sa couleur par defaut. On les redefinit sur le conteneur, comme pour le
   bandeau, et on donne a ses categories la meme surface doree. Pas de filtre sur
   les chevrons ici : le fond est clair, ils y sont deja lisibles. */
.doc-greffon{--cmplz_category_header_always_active_color:var(--or);
 --cmplz_slider_active_color:var(--or);--cmplz_slider_bullet_color:var(--sur-or)}
/* identifiant repris : la regle de Complianz vise #cmplz-manage-consent-container */
body .doc-greffon #cmplz-manage-consent-container .cmplz-categories .cmplz-category{background-color:rgba(var(--or-rgb),.06);
 border:1px solid var(--fil-or);border-radius:var(--r-m)}

/* Le lien du pied de page qui rouvre le bandeau. La CNIL impose que retirer son
   consentement soit aussi simple que le donner : il doit rester accessible sur
   toutes les pages. C'est un bouton, puisqu'il n'emmene nulle part ; on
   l'habille comme ses voisins, les liens legaux. */
.cmplz-manage-consent{background:none;border:0;padding:0;font:inherit;color:inherit;
 cursor:pointer;text-align:left}
.cmplz-manage-consent:hover{color:var(--or)}

/* ---- entete a deux colonnes : le titre a gauche, une note utile a droite ---- */
.intitule .note{display:none}

/* La classe .entree porte sa propre declaration transition et, a specificite egale,
   elle gagne sur celle du composant : les etats de survol ne s animaient pas du tout.
   Deux classes reprennent la main. Et rien n anime plus padding-left, qui declenche
   un recalcul de mise en page a chaque image et rend le mouvement abrupt. */
.tableau .vol,.arenes .arene{transition:background .55s var(--ressort),
 box-shadow .55s var(--ressort),transform .55s var(--ressort)}
/* transition : voir la regle commune .tableau .vol,.arenes .arene plus haut */
.registre .ligne{transition:background .55s var(--ressort),box-shadow .55s var(--ressort)}
.flotte .gamme{transition:transform .7s var(--ressort),border-color .7s var(--ressort)}
.bento2 .tuile2{transition:transform .7s var(--ressort),border-color .7s var(--ressort)}
.grille-bord .item-bord{transition:border-color .6s var(--ressort),background .6s var(--ressort)}
.entree.la{transition:opacity .95s var(--ressort),transform .95s var(--ressort),filter .95s var(--ressort),
 background .55s var(--ressort),box-shadow .55s var(--ressort),border-color .7s var(--ressort)}

@media(min-width:900px){
  .intitule.duo{display:grid;grid-template-columns:1.12fr .88fr;column-gap:64px;align-items:end}
  .intitule.duo .macaron{grid-column:1;justify-self:start}
  .intitule.duo h2{grid-column:1}
  .intitule.duo p{grid-column:1;margin-bottom:0}
  .intitule.duo .note{display:block;grid-column:2;grid-row:2 / span 2;align-self:end;
   border-left:1px solid var(--fil-or);padding:18px 22px 18px 26px;max-width:38ch;
   background:linear-gradient(90deg,rgba(6,5,5,.82),rgba(6,5,5,.5));backdrop-filter:blur(7px);
   border-radius:0 var(--r-m) var(--r-m) 0}
  .intitule.duo .note span{display:block;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
   color:var(--or-terne);font-weight:600;margin-bottom:12px}
  .intitule.duo .note p{font-size:1.06rem;line-height:1.7;max-width:none}
}


/* ---- DECOR : photo de fond de section, revelee d un seul cote ---- */
section{position:relative}
.decor{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.decor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;
 will-change:transform}
.decor::after{content:"";position:absolute;inset:0}
/* la photo sort par la droite, le texte reste sur du noir a gauche */
.decor-droite img{object-position:70% 50%;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%);
 mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%)}
.decor-droite::after{background:linear-gradient(90deg,var(--noir) 16%,rgba(6,5,5,.82) 42%,rgba(6,5,5,.35) 78%,rgba(6,5,5,.6))}
/* la photo sort par la gauche */
.decor-gauche img{object-position:30% 50%;
 -webkit-mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%);
 mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%)}
.decor-gauche::after{background:linear-gradient(270deg,var(--noir) 16%,rgba(6,5,5,.82) 44%,rgba(6,5,5,.4) 80%,rgba(6,5,5,.6))}
/* la photo occupe le bas, le titre reste lisible en haut */
.decor-bas img{object-position:50% 62%;
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 40%,#000 78%);
 mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 40%,#000 78%)}
.decor-bas::after{background:linear-gradient(180deg,var(--noir) 14%,rgba(6,5,5,.7) 48%,rgba(6,5,5,.5))}
section > .zone{position:relative;z-index:1}
@media(max-width:899px){
  .decor img{opacity:.32;object-position:50% 50%;
   -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%);
   mask-image:linear-gradient(180deg,transparent 0%,#000 45%)}
  .decor::after{background:linear-gradient(180deg,var(--noir) 10%,rgba(6,5,5,.78) 45%,rgba(6,5,5,.72))}
}


/* le heros porte le vehicule : sa photo est plus presente que celle des autres sections.
   Sous 900 px il n y a plus de colonne libre : le texte passe SUR la photo,
   donc on baisse la photo et on renforce le voile, sinon le titre devient illisible. */
.heros .decor img{opacity:.4;object-position:62% 46%}
.heros .decor::after{background:
 linear-gradient(180deg,rgba(6,5,5,.9) 6%,rgba(6,5,5,.82) 46%,rgba(6,5,5,.94)),
 linear-gradient(90deg,rgba(6,5,5,.86),rgba(6,5,5,.4) 70%)}
@media(min-width:900px){
  .heros .decor img{opacity:.92;object-position:64% 52%}
  .heros .decor-droite img{-webkit-mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.3) 26%,#000 56%);
   mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.3) 26%,#000 56%)}
  .heros .decor-droite::after{background:
   linear-gradient(90deg,var(--noir) 12%,rgba(6,5,5,.86) 34%,rgba(6,5,5,.28) 62%,rgba(6,5,5,.05) 88%),
   linear-gradient(180deg,rgba(6,5,5,.55),transparent 32%,rgba(6,5,5,.7))}
}

#ski .decor img{opacity:.8;object-position:66% 46%}
/* le tableau des departs passe par-dessus la photo : on assombrit la moitie basse */
#ski .decor::after{background:
 linear-gradient(90deg,var(--noir) 14%,rgba(6,5,5,.8) 40%,rgba(6,5,5,.3) 74%,rgba(6,5,5,.5)),
 linear-gradient(180deg,transparent 18%,rgba(6,5,5,.72) 50%,rgba(6,5,5,.93))}
#lieux .decor img{opacity:.6;object-position:76% 42%}
#parcours .decor img{opacity:.62;object-position:78% 46%}
/* la colonne de droite du parcours passe sur la partie eclairee : on la protege */
#parcours .decor::after{background:
 linear-gradient(90deg,var(--noir) 12%,rgba(6,5,5,.88) 40%,rgba(6,5,5,.68) 72%,rgba(6,5,5,.78))}
.finale .decor img{opacity:.5;object-position:50% 55%}

/* mobile : la photo ne peut pas etre un fond lisible sous le titre, elle devient un bloc */
.vitre{margin:30px calc(50% - 50vw) 4px;position:relative;overflow:hidden}
.vitre img{display:block;width:100%;height:230px;object-fit:cover;object-position:62% 52%}
/* LE FONDU SUR LES QUATRE COTES, ET PAS SEULEMENT EN HAUT ET EN BAS.
   Mounir, le 05/10/2026 : « la photo n'est plus en fond mais sur le devant,
   c'est pas tres beau. » Le bloc existait depuis le 24/08 mais ne se voyait
   pas : l'image generee qu'il portait etait une scene de nuit presque noire,
   qui se confondait avec la page. Une vraie photo, forcement plus claire,
   a rendu visibles ses deux bords francs — a gauche et a droite, la ou il
   touche le bord de l'ecran.
   Les deux degrades font maintenant emerger la photo du noir au lieu de l'y
   poser. Ne pas supprimer la vitre pour autant : sous 900 px le fond du heros
   est a 0,4 d'opacite sous un voile epais, et sans elle le visiteur n'aurait
   plus aucune image du vehicule en haut de page. */
.vitre::after{content:"";position:absolute;inset:0;
 background:
  linear-gradient(90deg,var(--noir),transparent 16%,transparent 84%,var(--noir)),
  linear-gradient(180deg,var(--noir),transparent 26%,transparent 62%,rgba(6,5,5,.85))}
@media(min-width:900px){.vitre{display:none}}


/* ===== A BORD : ce qui est offert, ce qui est en option ===== */
.bord{display:grid;gap:34px}
.vue-bord{border:1px solid var(--fil-or);border-radius:var(--r-xl);overflow:hidden;padding:6px;
 background:rgba(var(--or-rgb),.05)}
.vue-bord{overflow:hidden}
.vue-bord img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
 border-radius:calc(var(--r-xl) - 6px);
 /* survol documente par le DS et jamais implemente */
 transition:transform 1.1s var(--ressort)}
.vue-bord:hover img{transform:scale(1.04)}
.lib-bord{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--or);font-weight:600;margin-bottom:16px}
.grille-bord{display:grid;gap:12px}
.item-bord{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:center;
 padding:15px 18px;border:1px solid var(--fil);border-radius:var(--r-m);
 background:linear-gradient(168deg,var(--coeur),var(--nuit));
 transition:border-color .7s var(--ressort)}
.item-bord:hover{border-color:var(--fil-or)}
.item-bord svg{width:44px;height:44px;stroke-width:1;color:var(--or);padding:9px;
 border:1px solid var(--fil-or);border-radius:999px}
.item-bord b{display:block;color:var(--texte);font-weight:600;font-size:1.02rem;line-height:1.35}
.item-bord span{font-size:.88rem;color:var(--gris);line-height:1.45}
.grille-bord.options .item-bord{background:none}
.grille-bord.options .item-bord svg{color:var(--or-terne);border-color:var(--fil)}
@media(min-width:640px){.grille-bord{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .bord{grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
  .grille-bord{grid-template-columns:repeat(3,1fr)}
  .grille-bord.options{grid-template-columns:repeat(2,1fr)}
}

/* ===== calculateur dans le heros ===== */
/* en colonne unique, le calculateur suit le rang de paiement : il lui faut sa
   propre respiration, sinon la carte vient mordre sur les logos. */
.calc-heros{margin-top:38px}
.calc-heros .coque{width:100%}
.calc-heros .noyau{background:rgba(11,10,8,.86);backdrop-filter:blur(20px);padding:30px 26px}
.calc-heros h2{font-size:clamp(1.5rem,4.4vw,1.9rem);margin:16px 0 8px}
.calc-heros .sous{font-size:.98rem;margin-bottom:24px}
.calc-heros .cta-or{width:100%;justify-content:space-between}
.calc-heros .reserve{margin-top:20px;padding-top:16px;border-top:1px solid var(--fil);
 font-size:.86rem;color:var(--gris)}

/* ---- FLOTTE : cartes compactes, photo en tete ---- */
.flotte{display:grid;gap:16px}
/* display:block explicite : les cartes de gamme sont des <a> sur les pages du
   site, et un <a> sans display retomberait en inline et casserait la grille */
.gamme{display:block;border:1px solid var(--fil);border-radius:var(--r-xl);overflow:hidden;
 background:linear-gradient(168deg,var(--coeur),var(--nuit));
 transition:transform .7s var(--ressort),border-color .7s var(--ressort)}
.gamme:hover{transform:translateY(-6px);border-color:var(--fil-or)}
.gamme.phare{border-color:var(--fil-or)}
.gamme .photo{position:relative;aspect-ratio:16/7;overflow:hidden}
.gamme .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 transition:transform 1.2s var(--ressort)}
.gamme:hover .photo img{transform:scale(1.06)}
.gamme .photo::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(6,5,5,.42),rgba(6,5,5,.12) 45%,rgba(6,5,5,.9))}
.gamme .cap{position:absolute;left:18px;bottom:14px;z-index:2;display:flex;align-items:baseline;gap:9px}
.gamme .cap b{font-family:'Clash Display';font-size:2.5rem;line-height:1;color:var(--or);
 font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.gamme .cap span{font-size:.92rem;color:var(--texte);font-weight:500}
.gamme .rang{position:absolute;right:18px;top:16px;z-index:2;font-size:11px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--or);font-weight:600;background:rgba(6,5,5,.66);
 backdrop-filter:blur(10px);border:1px solid var(--fil-or);border-radius:999px;padding:6px 13px}
.gamme .corps{padding:18px 22px 22px}
.gamme h3{font-size:1.26rem;margin-bottom:6px}
.gamme .modeles{font-size:.92rem;color:var(--or-terne);margin-bottom:11px;line-height:1.5}
.gamme p{font-size:.99rem;line-height:1.6}
.gamme .liste{margin-top:15px;display:flex;flex-wrap:wrap;gap:7px}
.gamme .liste span{font-size:.83rem;color:var(--gris);border:1px solid var(--fil);border-radius:999px;padding:5px 12px}

/* La surcharge servait a ELARGIR au-dela des 15ch d'origine. La base est
   passee a 24ch : cette ligne retrecirait desormais le titre, elle saute. */
#flotte{padding-top:96px;padding-bottom:96px}


/* ---- EQUIPE : ce qui manquait le plus, la dimension humaine ---- */
.equipe{display:grid;gap:34px}
.equipe .dit{font-size:clamp(1.5rem,5.4vw,2.1rem);line-height:1.3;font-family:'Clash Display';
 color:var(--texte);letter-spacing:-.015em;margin-bottom:18px}
.equipe .dit em{font-style:normal;color:var(--or)}
.equipe .signe{font-size:.95rem;color:var(--gris)}
.reperes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fil);
 border:1px solid var(--fil);border-radius:var(--r-l);overflow:hidden;margin-top:30px}
.repere{background:var(--nuit);padding:22px 20px}
/* Taille fluide et non fixe : a 2,1rem, « 3 semaines » ne tenait pas dans une
   colonne de 130px et le mot sortait de la cellule. C'est le composant qui
   s'adapte, pas la donnee qu'on abrege. */
.repere b{display:block;font-family:'Clash Display';font-size:clamp(1.45rem,6.4vw,2.1rem);line-height:1.05;color:var(--or);
 font-variant-numeric:tabular-nums;letter-spacing:-.04em;
 /* le resserrement des lettres ecrase aussi l'espace des mots : « 1,95 m » se
    lisait « 1,95m ». On la rend au mot, sans toucher aux lettres. */
 word-spacing:.18em}
/* Enfant DIRECT, sinon la regle attrape aussi le span insecable place dans le
   <b> : la valeur se retrouvait affichee a la taille de sa legende. Un nouveau
   composant herite toujours des regles de son conteneur. */
.repere > span{display:block;margin-top:9px;font-size:.9rem;color:var(--gris);line-height:1.45;
 overflow-wrap:break-word}
/* Une cellule de grille refuse par defaut de descendre sous la largeur de son
   contenu le plus large. Le nombre, en Clash Display 2,1rem, elargissait la
   colonne et la legende sortait du cadre de 22px a 390px : le defaut ne poussait
   pas la page, il se contentait de rogner le texte. */
.repere{min-width:0}
/* Quatre colonnes dans la coque etroite du hero rendent la derniere illisible :
   le composant a ete dessine pour une pleine largeur. Dans une coque, il reste
   a deux colonnes a toutes les largeurs. */
.coque .reperes{grid-template-columns:1fr 1fr}

/* la photo vient de la fiche Google du client : c est la seule image reelle de la page */
/* la photo est bornee : au-dela elle deseequilibre la colonne de texte,
   qui porte pourtant l'argument de la section */
.portrait{max-width:520px;position:relative;border:1px solid var(--fil-or);border-radius:var(--r-xl);
 overflow:hidden;background:rgba(var(--or-rgb),.05);padding:6px}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1080/600;object-fit:cover;
 border-radius:calc(var(--r-xl) - 6px)}
.portrait figcaption{padding:15px 16px 8px;font-size:.86rem;color:var(--or-terne);line-height:1.55}

@media(min-width:900px){
  .equipe{grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
  .reperes{grid-template-columns:repeat(4,1fr)}
}

/* ---- HEROS : la photo EST le fond, plus de cadre ---- */
.heros .rail-bas{width:min(780px,100%);margin-top:34px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
 padding-top:22px;border-top:1px solid var(--fil)}
.heros .rail-bas span{font-size:.94rem;color:var(--gris);display:flex;align-items:center;gap:9px}
.heros .rail-bas span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or);flex:0 0 auto}

/* ---- bandes : chaque section a sa peau ---- */
.bande-claire{background:linear-gradient(180deg,rgba(247,243,234,.045),rgba(247,243,234,.015));
 border-top:1px solid var(--fil);border-bottom:1px solid var(--fil)}
.bande-or{background:linear-gradient(180deg,rgba(var(--or-rgb),.09),rgba(var(--or-rgb),.02));
 border-top:1px solid var(--fil-or);border-bottom:1px solid var(--fil-or)}

/* ================= SECTIONS SOMBRES =================
   Elles sont quatre et doivent se ressembler. Avant, la lueur doree venait de
   nappes fixes au viewport : elle traversait les sections sans fond propre et
   evitait les autres, d ou une section eclairee et la suivante plate. Chaque
   section sombre porte maintenant sa propre lueur, au meme endroit et a la
   meme intensite. */
section:not(.clair):not(.bande-or){
 background:
  radial-gradient(110% 78% at 84% 0%,rgba(var(--or-rgb),.11),transparent 58%),
  radial-gradient(86% 66% at 2% 100%,rgba(var(--or-rgb),.055),transparent 60%),
  var(--noir)}

/* ================= SECTIONS CLAIRES =================
   Le client trouvait la page trop sombre. Une section .clair redefinit les
   jetons de surface POUR SES DESCENDANTS : tout ce qui utilise var(--texte),
   var(--coeur), var(--fil)... bascule sans qu on touche aux composants.
   Ne restent a reprendre que les valeurs ecrites en dur, ci-dessous. */
section.clair{
  /* DEUX valeurs de surface claire, pas plus : la section et la carte.
     Le blanc pur et les niveaux intermediaires faisaient sentir chaque
     passage d une section a l autre. */
  --noir:#F5F1E7; --noir-rgb:245,241,231; --nuit:#F9F6EE; --plaque:#FBF9F3; --coeur:#FCFAF4;
  --texte:#14120E; --gris:#5A5449;
  /* Les deux bornes du degrade de fond d'une section claire. Elles
     etaient recopiees en dur dans la regle : nommees, elles suivent. */
  --creme-haut:#F4EFE3; --creme-bas:#F1ECDF;
  --or:#6F5610;          /* l or vif ne se lit pas sur creme : deux valeurs foncees */
  --or-terne:#7A5F12;    /* mesure a 4,7:1 sur le creme le plus fonce */
  --sur-or:#0A0908;
  --fil:rgba(20,18,14,.14); --fil-or:rgba(122,95,18,.30);
  /* INDISPENSABLE. Les titres ne declarent aucune couleur : ils heritent la
     valeur DEJA CALCULEE sur body, soit le blanc du theme sombre. Redefinir
     --texte ici ne les touche pas. Il faut reposer color sur la section pour
     que l heritage reparte du jeton local. */
  color:var(--texte);
  background:linear-gradient(180deg,var(--creme-haut),var(--plaque) 16%,var(--plaque) 82%,var(--creme-bas));
  border-top:none;border-bottom:none}
/* Aucun fondu entre les sections : la coupure franche est celle du gabarit
   d origine. Un degrade de jonction ajoutait une barre grise que personne
   n avait demandee. */
section.clair > .zone{z-index:2}
/* filet uniquement entre deux sections claires : contre du noir, le contraste
   fait deja la separation */
section.clair + section.clair{border-top:1px solid rgba(20,18,14,.10)}
/* la variation entre sections claires ne passe plus par la couleur : c est
   la construction de chaque section qui les distingue. */

/* les voiles blancs deviennent des voiles encre */
section.clair .coque{background:rgba(20,18,14,.028)}
section.clair .coque.doree{background:rgba(var(--or-rgb),.13);border-color:rgba(122,95,18,.32)}
section.clair .noyau{box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
section.clair .tuile2{background:var(--coeur)}
/* la tuile vedette garde sa photo de nuit : son texte reste celui du theme
   sombre, sinon il passe en encre sur une image noire */
/* elle ne fabrique pas de nouvelles valeurs : elle reprend telles quelles
   celles du theme sombre, sinon la palette se met a compter des exceptions */
/* La tuile vedette reste sombre dans une section claire : il faut lui rendre
   AUSSI les filets sombres. Sans --fil-or, le cercle de sa fleche etait dessine
   en brun a 30 % sur une photo de nuit, donc invisible : la seule tuile qui
   porte une photo etait la seule a ne pas montrer qu'elle est cliquable. */
section.clair .tuile2.vedette{--texte:#F9F6EF;--gris:#BDB6A8;--or-terne:#B99646;
 /* --or aussi. Sans lui, l'icone de la vedette sortait en #6F5610, le brun
    du theme clair, sur une photo de nuit : invisible. Le piege du theme par
    section, pour la troisieme fois. Toute valeur doree redefinie ici doit
    l'etre en entier. */
 --or:#E2C583;
 --fil:rgba(249,246,239,.14);--fil-or:rgba(var(--or-rgb),.34);
 color:var(--sur-sombre);background:linear-gradient(168deg,var(--sombre-haut),var(--sombre-bas))}
section.clair .etiq2{background:rgba(20,18,14,.04)}

/* le bouton plein garde l or VIF : c est un aplat, pas du texte */
section.clair .cta-or{background:rgb(var(--or-rgb));color:var(--sur-or);box-shadow:0 10px 30px rgba(122,95,18,.20)}
section.clair .cta-or:hover{box-shadow:0 18px 46px rgba(122,95,18,.28)}
section.clair .cta-fil:hover{background:rgba(122,95,18,.08)}
section.clair .cta-fil .bulle{background:rgba(122,95,18,.12)}

/* ornements : le filet du numero de chapitre disparaitrait a l identique */
section.clair .chapitre .no{-webkit-text-stroke-color:rgba(122,95,18,.52)}
section.clair .chapitre .barre{background:linear-gradient(90deg,rgba(122,95,18,.36),transparent)}
/* chiffre d etape : porteur d information, il ne peut pas rester a 42 % */
section.clair .borne .rang{color:var(--or-terne)}

/* ombres : une ombre de nuit ecrase un fond clair */
section.clair .vue,section.clair .cadre{box-shadow:0 24px 60px rgba(20,18,14,.12)}

/* #lieux passe en clair alors qu il porte une photo de fond : ses voiles
   etaient calcules pour du noir, ils viraient la photo au charbon. */
section.clair .decor img{opacity:.42}
/* #lieux et #parcours portent des reglages de photo scopes par identifiant :
   ils l emportent sur la regle .clair ci-dessus. On les reprend au meme niveau
   de specificite, sinon leur voile reste noir au milieu d une section claire. */
#lieux.clair .decor img,#parcours.clair .decor img{opacity:.4}
/* Le voile ne doit JAMAIS retomber a zero de ce cote : la colonne de droite du
   parcours passe sur la partie eclairee de la photo d'aeroport, et les etapes
   02 et 04 y tombaient a 4,2:1 de contraste moyen, sous le seuil AA. Mesure au
   pixel sur le fond reellement peint, pas sur la couleur de section. */
#parcours.clair .decor::after{background:linear-gradient(90deg,var(--noir) 18%,rgba(var(--noir-rgb),.95) 48%,rgba(var(--noir-rgb),.88) 74%,rgba(var(--noir-rgb),.8))}
@media(max-width:899px){
  #lieux.clair .decor img,#parcours.clair .decor img{opacity:.28}
  #parcours.clair .decor::after{background:linear-gradient(180deg,var(--noir) 10%,rgba(var(--noir-rgb),.88) 45%,rgba(246,242,232,.84))}
}
/* l aparte lateral etait un verre noir code en dur : sur fond clair son texte,
   passe en encre, devenait illisible */
section.clair .intitule.duo .note{
 background:linear-gradient(90deg,rgba(251,249,243,.92),rgba(251,249,243,.6));
 border-left-color:rgba(122,95,18,.34)}
/* Ce voile retombait a transparent des 88 %, c'est-a-dire exactement au bord
   droit ou se posent les pastilles et les fins de ligne. C'est ce trou qui
   effacait le chevron de #lieux, et j'avais traite le symptome en lui
   collant un disque opaque. Un voile pose sous du contenu ne descend jamais
   a zero ; la photo reste visible a 32 %. */
section.clair .decor-droite::after{background:linear-gradient(90deg,var(--noir) 14%,rgba(var(--noir-rgb),.92) 42%,rgba(var(--noir-rgb),.78) 70%,rgba(var(--noir-rgb),.68))}
section.clair .decor-gauche::after{background:linear-gradient(270deg,var(--noir) 14%,rgba(var(--noir-rgb),.92) 42%,rgba(var(--noir-rgb),.78) 70%,rgba(var(--noir-rgb),.68))}
section.clair .decor-bas::after{background:linear-gradient(180deg,var(--noir) 12%,rgba(var(--noir-rgb),.82) 46%,rgba(246,242,232,.55))}
@media(max-width:899px){
  section.clair .decor::after{background:linear-gradient(180deg,var(--noir) 10%,rgba(var(--noir-rgb),.88) 45%,rgba(246,242,232,.84))}
}

/* le voile de la tuile vedette etait un aplat noir a 95 % au milieu de cartes
   blanches : on le resserre sur la zone de texte et on laisse voir la photo */
section.clair .tuile2.vedette::after{
 background:linear-gradient(to top,rgba(8,7,6,.94) 4%,rgba(8,7,6,.82) 22%,rgba(8,7,6,.3) 44%,transparent 62%)}
section.clair .tuile2.vedette img{opacity:1}

/* ---- PRESTATIONS : bento asymetrique, une tuile domine ---- */
.bento2{display:grid;gap:16px}
.tuile2{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--fil);
 background:linear-gradient(168deg,var(--coeur),var(--nuit));padding:32px 28px;
 display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;
 transition:transform .7s var(--ressort),border-color .7s var(--ressort)}
.tuile2:hover{transform:translateY(-6px);border-color:var(--fil-or)}
.tuile2 .haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.tuile2 .no{font-family:'Clash Display';font-size:1.05rem;color:var(--or-terne);font-variant-numeric:tabular-nums}
/* Icone de prestation. Le systeme n'a pas d'image pour chaque service et n'en
   aura pas : ce serait cinq visuels de mise en situation de plus, a remplacer
   par des vraies photos. L'icone de trait donne l'identite sans la dette. La
   tuile vedette n'en porte pas, sa photo EST son identite : c'est ce qui garde
   la hierarchie du bento. */
/* L'icone tient la place du numero dans l'en-tete : un repere a gauche, la
   fleche a droite. Les six prestations ne sont pas une sequence, contrairement
   aux etapes du parcours et aux regles de tarification, qui gardent leur
   numero. Alignee en HAUT, pas au centre : le cercle de la fleche fait 44 px,
   un centrage renverrait l'icone 7 px plus bas que le repere qu'elle remplace. */
.tuile2 .ico{display:block;width:30px;height:30px;flex:0 0 auto;align-self:flex-start;
 margin-top:2px;color:var(--or);transition:transform .7s var(--ressort)}
.tuile2 .ico svg{width:100%;height:100%;display:block}
.tuile2:hover .ico{transform:translate(-2px,-3px)}
.tuile2 h3{font-size:clamp(1.4rem,5.4vw,1.9rem);margin:20px 0 10px}
.tuile2 p{font-size:1.05rem;line-height:1.58}
.tuile2 .fleche{width:44px;height:44px;border-radius:999px;border:1px solid var(--fil-or);display:grid;place-items:center;
 color:var(--or);transition:transform .7s var(--ressort),background .7s var(--ressort)}
.tuile2:hover .fleche{transform:translate(4px,-4px);background:rgba(var(--or-rgb),.14)}
.tuile2 .fleche svg{width:16px;height:16px}
.tuile2.vedette{min-height:400px;justify-content:flex-end}
.tuile2.vedette img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;z-index:0;
 transition:transform 1.2s var(--ressort)}
.tuile2.vedette:hover img{transform:scale(1.06)}
.tuile2.vedette::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(to top,rgba(6,5,5,.95) 30%,rgba(6,5,5,.58) 60%,rgba(6,5,5,.06))}
.tuile2.vedette>*{position:relative;z-index:2}
.tuile2.vedette h3{font-size:clamp(1.9rem,7vw,2.6rem)}

/* ---- SKI : tableau des departs ---- */
/* Un numero de telephone ne se coupe jamais en fin de ligne : le defaut
   est latent sur tout libelle qui en contient un, il ne se declenche que
   selon la longueur du texte qui precede. */
.insecable{white-space:nowrap}

.tableau{border-top:1px solid var(--fil-or)}
/* En-tete de tableau de prix. Sans lui, le tableau se lit hors contexte : le
   visiteur prend le prix de la ligne la moins chere pour le plancher de la
   gamme. Le trajet de reference doit etre DANS le tableau, pas dans le
   paragraphe au-dessus, qui se saute. */
.tableau-tete{display:flex;align-items:baseline;justify-content:space-between;
 gap:16px;padding:14px 18px 13px;border-bottom:1px solid var(--fil);
 background:rgba(var(--or-rgb),.05)}
.tableau-tete .lib-t,.tableau-tete .val-t{font-size:11.5px;letter-spacing:.2em;
 text-transform:uppercase;font-weight:600;color:var(--or-terne)}
.tableau-tete .val-t{white-space:nowrap}
/* Ligne de socle : la reponse a « a partir de combien », que le tableau ne
   donne pas puisqu'il montre un trajet precis. */
.socle{margin:26px 0 56px;padding-left:18px;border-left:1px solid var(--fil-or);
 font-size:1.02rem;line-height:1.65;max-width:70ch}
.socle b{color:var(--texte);font-weight:600}
.vol{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;padding:22px 0;
 border-bottom:1px solid var(--fil);padding-left:18px;box-shadow:inset 3px 0 0 transparent}
/* Survol commun aux deux lignes pleine largeur, .vol et .arene : decalage de
   14px, barre doree a gauche, fond dore a 6 %. Le decalage etait ecrit dans le
   DS et absent du code depuis le debut. */
.vol:hover,.arene:hover{
 background:linear-gradient(90deg,rgba(var(--or-rgb),.06),transparent 46%);
 box-shadow:inset 3px 0 0 var(--or)}
/* Le glissement s'arrete au bureau : sous 900px la zone n'a plus la marge pour
   l'absorber et la page debordait de 2px a l'horizontale. La barre doree et la
   teinte, elles, restent a toutes les largeurs. */
@media(min-width:900px){
  .vol.la:hover,.arene.la:hover{transform:translateX(14px)}
}
.vol .dest{font-family:'Clash Display';font-size:clamp(1.5rem,6vw,2.2rem);color:var(--texte);line-height:1}
.vol .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:1rem;color:var(--gris)}
.vol .meta b{color:var(--or);font-weight:600;font-variant-numeric:tabular-nums}
.vol .duree2{font-family:'Clash Display';font-size:1.5rem;color:var(--or);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- UNE LIGNE QUI EST UN LIEN DOIT SE VOIR ----
   Dans le gabarit, les lignes de stations et de lieux etaient des <article> :
   rien a signaler. Sur le site elles ouvrent chacune leur page, et sans ce
   chevron le visiteur ne sait pas qu'il peut cliquer. Le pastillage est en
   position absolue pour ne pas ajouter de colonne a la grille de la ligne. */
/* Meme pastille que .tuile2 .fleche : 44 px, filet dore, fond transparent qui
   ne se remplit qu'au survol, icone de 16. Une seule facon de dire « ceci
   ouvre une page » sur tout le site. Le nom evite .ouvre, deja pris par le
   guillemet geant de .temoin. */
a.vol,a.arene{position:relative;padding-right:62px}
.chevron{position:absolute;right:0;top:50%;transform:translateY(-50%);
 width:44px;height:44px;border-radius:999px;border:1px solid var(--fil-or);
 display:grid;place-items:center;color:var(--or);pointer-events:none;
 transition:transform .7s var(--ressort),background .7s var(--ressort)}
.chevron svg{width:16px;height:16px}
a.vol:hover .chevron,a.arene:hover .chevron,
a.vol:focus-visible .chevron,a.arene:focus-visible .chevron{
 background:rgba(var(--or-rgb),.14);transform:translateY(-50%) translate(4px,-4px)}

/* Meme intention sur les cartes de flotte, en libelle plutot qu'en pastille */
.lien-fiche{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
 font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or-terne);
 transition:gap .7s var(--ressort)}
.lien-fiche svg{width:14px;height:14px}
a.gamme:hover .lien-fiche,a.arene:hover .lien-fiche{gap:15px}

/* ---- EQUIPEMENTS : capacites monumentales ---- */
.arenes{display:grid;gap:0;border-top:1px solid var(--fil)}
.arene{display:grid;gap:6px 32px;padding:30px 0;border-bottom:1px solid var(--fil);align-items:baseline;
 padding-left:18px;box-shadow:inset 3px 0 0 transparent}
/* survol : voir la regle commune .vol:hover,.arene:hover plus haut */
.arene .jauge{font-family:'Clash Display';font-size:clamp(2.4rem,9vw,3.6rem);line-height:.9;color:var(--or);
 font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.arene .jauge small{font-family:'General Sans';font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--or-terne);display:block;margin-top:8px;font-weight:600;line-height:1.35}
.arene h3{font-size:clamp(1.4rem,5.4vw,1.9rem);margin-bottom:8px}
.arene p{font-size:1.05rem}

/* ---- ENTREPRISES : bande doree, carte de compte ---- */
.compte{display:grid;gap:28px}
.compte .fiche{border:1px solid var(--fil-or);border-radius:var(--r-xl);padding:8px;background:rgba(var(--or-rgb),.06)}
.compte .dedans{background:linear-gradient(168deg,var(--coeur),var(--nuit));border-radius:calc(var(--r-xl) - 8px);
 padding:36px 30px;box-shadow:inset 0 1px 1px rgba(255,255,255,.10)}
.compte ul{list-style:none;display:grid;gap:18px}
.compte li{display:grid;grid-template-columns:24px 1fr;gap:14px;font-size:1.08rem;color:var(--gris);align-items:start;line-height:1.55}
.compte li b{color:var(--texte);font-weight:600}
.compte .coche{width:24px;height:24px;border-radius:999px;border:1px solid var(--fil-or);position:relative;margin-top:3px}
.compte .coche::after{content:"";position:absolute;left:8px;top:6px;width:5px;height:10px;
 border-right:1.7px solid var(--or);border-bottom:1.7px solid var(--or);transform:rotate(42deg)}

@media(min-width:900px){
  .bento2{grid-template-columns:repeat(3,1fr)}
  .tuile2.vedette{grid-column:span 2;grid-row:span 2}
  .vol{grid-template-columns:1.1fr 1fr auto}
  .vol .meta{grid-column:auto}
  .arene{grid-template-columns:250px 1fr}
  .arene .jauge{font-size:3.4rem;white-space:nowrap}
  /* le nowrap ci-dessus protege le CHIFFRE ; la legende, elle, doit
     pouvoir revenir a la ligne sinon elle deborde de la colonne */
  .arene .jauge small{white-space:normal}
  .compte{grid-template-columns:.92fr 1.08fr;align-items:center;gap:64px}
}
/* ---- flux d avis facon module Google ---- */
.avis-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}
.score{display:flex;align-items:center;gap:14px}
.score .note{font-family:'Clash Display';font-size:3rem;color:var(--texte);line-height:1;font-variant-numeric:tabular-nums}
.score .cnt{font-size:.96rem;color:var(--gris)}
.etoiles{display:inline-flex;gap:3px}
.etoiles i{width:15px;height:15px;background:var(--or);display:block;
 clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.etoiles i.demi{background:linear-gradient(90deg,var(--or) 55%,rgba(var(--or-rgb),.25) 55%)}
.flux{display:grid;gap:16px}
.billet{background:linear-gradient(168deg,var(--coeur),var(--nuit));border:1px solid var(--fil);
 border-radius:var(--r-l);padding:24px 22px}
.billet .qui{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.billet .rond{width:42px;height:42px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center;
 background:rgba(var(--or-rgb),.14);border:1px solid var(--fil-or);color:var(--or);font-weight:600;font-size:1.05rem}
.billet b{display:block;font-size:.98rem;color:var(--texte);font-weight:600}
.billet .quand{font-size:.85rem;color:var(--gris)}
.billet .g{margin-left:auto;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
 border:1px solid var(--fil);font-family:'Clash Display';font-size:.86rem;color:var(--gris)}
.billet p{font-size:1.05rem;margin-top:12px;line-height:1.6}
/* ---- CARROUSEL D AVIS ----
   Meme mecanique que le ruban des destinations : deux copies de la piste et
   une translation de la moitie de sa largeur, ce qui boucle sans saut. La
   seconde copie est aria-hidden, un lecteur d ecran ne lit pas deux fois.
   Le defilement s arrete au survol et au focus clavier, et il n existe pas
   du tout pour qui a demande moins d animation. */
.carrousel{position:relative;overflow:hidden;padding:4px 0;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rail{display:flex;align-items:stretch;gap:16px;width:max-content;
 animation:defile-avis 96s linear infinite;will-change:transform}
.carrousel:hover .rail,.carrousel:focus-within .rail{animation-play-state:paused}
.rail .billet{width:min(80vw,400px);flex:0 0 auto;display:flex;flex-direction:column}
@keyframes defile-avis{to{transform:translateX(calc(var(--decalage,calc(50% + 8px)) * -1))}}
@media (prefers-reduced-motion:reduce){
  .rail{animation:none}
  .carrousel{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .rail .billet{scroll-snap-align:start}
}

/* ================= RUBAN ================= */
.ruban{border-top:1px solid var(--fil);border-bottom:1px solid var(--fil);padding:19px 0;overflow:hidden;white-space:nowrap}
.piste{display:inline-flex;animation:file 46s linear infinite;will-change:transform}
.piste span{font-family:'Clash Display';font-size:.94rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
 display:inline-flex;align-items:center;padding-right:52px}
.piste span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--or);margin-left:52px}
@keyframes file{to{transform:translateX(-50%)}}

/* ================= SIMULATEUR, en chevauchement ================= */
/* pas de z-index ici : l ordre du DOM suffit. Un z-index sur la section la
   faisait passer devant toutes les sections suivantes, dont les villes. */
.simulateur{position:relative}
.simulateur h2{font-size:clamp(1.6rem,5.4vw,2.1rem);margin-bottom:8px}
.simulateur .sous{font-size:.95rem;margin-bottom:28px}
/* Le simulateur et le rappel sont de vrais <form> : un bouton de soumission
   herite des styles du navigateur, il faut les neutraliser pour qu'il redevienne
   un .cta. Il occupe toute la largeur de la grille, comme le lien qu'il remplace. */
.saisies,.rappel{display:grid;gap:14px;margin-bottom:20px}
button.cta{font-family:inherit;font-size:1rem;border:1px solid transparent;cursor:pointer}
.saisies button.cta{grid-column:1/-1;justify-self:start;margin-top:6px}
/* le bloc final est centre : son bouton l'est aussi */
.rappel button.cta{grid-column:1/-1;justify-self:center;margin-top:6px}
.rappel{margin-top:26px;text-align:left}
@media(min-width:700px){
  .rappel{grid-template-columns:1fr 1fr}
  /* L'e-mail ET le trajet prennent les deux colonnes. La regle ne visait que
     le troisieme champ ; le quatrieme, « Votre trajet », restait sur une
     demi-colonne alors que c'est le plus long des quatre, et son contenu y
     etait tronque — d'autant plus depuis que le bouton « Laisser mon numero »
     le prerempli avec le trajet complet (vu par Mounir le 30/09). */
  .rappel .saisie:nth-of-type(n+3){grid-column:1/-1}
}
.saisie label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-terne);margin-bottom:9px;font-weight:600}
.saisie .enveloppe{background:rgba(247,243,234,.03);border:1px solid var(--fil);border-radius:var(--r-m);padding:4px}
.saisie input,.saisie select{width:100%;min-height:50px;padding:0 15px;background:rgba(6,5,5,.55);color:var(--texte);
 border:0;border-radius:calc(var(--r-m) - 4px);font-family:inherit;font-size:1rem;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.05)}
.saisie input:focus,.saisie select:focus{outline:2px solid var(--or);outline-offset:2px}

/*  L'ALLER-RETOUR, ajoute le 02/10/2026. La case et la date du retour prennent
    toute la largeur : sur deux colonnes, la case se retrouvait seule a cote
    d'un champ vide et le lien entre les deux ne se voyait plus. La date
    n'apparait qu'une fois la case cochee, comme sur l'ancien calculateur du
    client.  */
.saisies .bascule-ar,.saisies .quand-retour{grid-column:1/-1}
.saisie label.choix-ar{display:inline-flex;align-items:center;gap:11px;
 cursor:pointer;font-size:.95rem;letter-spacing:0;text-transform:none;
 color:var(--texte);margin-bottom:0;font-weight:500}
/* La case reste un controle NATIF : le navigateur sait le rendre accessible
   au clavier et aux lecteurs d'ecran mieux qu'un faux dessine en CSS.
   `accent-color` ne colore que l'etat COCHE ; decochee, la case gardait le
   rendu clair du systeme, soit un carre blanc au milieu d'un formulaire
   nuit (vu le 02/10/2026 sur la fiche minibus). `color-scheme:dark` dit au
   navigateur de dessiner ses controles en version sombre : la case decochee
   suit le fond, et l'or revient quand elle est cochee. */
.saisie label.choix-ar input{width:19px;height:19px;min-height:0;flex:0 0 auto;
 padding:0;background:none;border-radius:4px;accent-color:var(--or);
 color-scheme:dark;cursor:pointer}
.saisie label.choix-ar:hover{color:var(--or)}
.simulateur .cta-or{width:100%;justify-content:space-between}
.reserve{margin-top:16px;font-size:.86rem;color:var(--or-terne);border-top:1px dashed var(--fil);padding-top:14px}

/* ================= CHIFFRES ================= */
.chiffres{display:grid;gap:14px}
.chiffres .noyau{display:flex;flex-direction:column;justify-content:space-between;min-height:190px}
.chiffres .grand{font-family:'Clash Display';font-size:clamp(3.4rem,15vw,5rem);line-height:.82;color:var(--or);
 font-variant-numeric:tabular-nums;letter-spacing:-.05em;margin-bottom:14px}
.chiffres .quoi{font-size:.98rem;font-weight:600;margin-bottom:5px}
.chiffres .detail{font-size:.94rem;color:var(--gris)}

/* ================= FLOTTE, plaques empilées ================= */
.flotte{display:grid;gap:18px}
/* ================= PRESTATIONS, split éditorial ================= */
.registre{border-top:1px solid var(--fil)}
.ligne{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--fil);
 padding-left:18px;box-shadow:inset 3px 0 0 transparent}
.ligne:hover{box-shadow:inset 3px 0 0 var(--or);background:linear-gradient(90deg,rgba(var(--or-rgb),.05),transparent 42%)}
.ligne .idx{font-family:'Clash Display';font-size:.86rem;color:var(--or-terne);font-variant-numeric:tabular-nums}
.ligne h3,.ligne h2{font-size:clamp(1.35rem,5vw,1.85rem);margin-bottom:9px}
/* Registre de PRIX : la colonne de gauche porte un montant, pas un rang. Elle
   reprend la jauge monumentale du design system, alignee sur le titre et non
   sur la ligne de base du paragraphe. */
.registre.montants .ligne{align-items:start;gap:26px}
.registre.montants .idx{font-size:clamp(1.7rem,5.4vw,2.5rem);line-height:1;
 color:var(--or);letter-spacing:-.03em;white-space:nowrap;
 min-width:4ch;display:inline-block;padding-top:2px}
.ligne p{font-size:.95rem}

/* ================= TARIFICATION ================= */
.regles{display:grid;gap:14px}
.regle{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:22px 0;border-bottom:1px solid var(--fil)}
.regle .cle{font-family:'Clash Display';font-size:1.9rem;color:var(--or);line-height:1;font-variant-numeric:tabular-nums}
.regle h3{font-size:1.24rem;margin-bottom:8px;letter-spacing:-.01em}
.regle p{font-size:1.02rem}

/* ================= PARCOURS ================= */
.parcours{display:grid;gap:0;position:relative}
.borne{position:relative;padding:0 0 40px 34px}
.borne::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
 background:var(--noir);border:1.5px solid var(--or)}
.borne::after{content:"";position:absolute;left:5.5px;top:21px;bottom:-4px;width:1px;background:var(--fil)}
.borne:last-child::after{display:none}
.borne .rang{font-family:'Clash Display';font-size:2.4rem;color:rgba(var(--or-rgb),.42);line-height:1;
 font-variant-numeric:tabular-nums;margin-bottom:2px}
/* Le chiffre d'etape porte une information, il ne peut pas rester a 42 %.
   Le theme clair avait deja sa correction plus haut ; le sombre n'en avait pas
   eu besoin tant que le parcours vivait dans une section claire. La page
   aeroport le place sur fond sombre, ou 42 % donne 2,16:1 pour un seuil de 3.
   62 % donne 3,47:1 sur #060505. */
section:not(.clair):not(.bande-or) .borne .rang{color:rgba(var(--or-rgb),.62)}
.borne h3{font-size:1.32rem;margin-bottom:9px;letter-spacing:-.01em}
.borne p{font-size:1.02rem}

/* ================= ZONES ================= */
/* ---- ZONE DE PRISE EN CHARGE ----
   Le visiteur ne veut pas lire vingt-deux noms de communes : il veut savoir si
   la sienne y est. On lui donne un filtre, et une reponse quand elle n y est pas. */
.couverture{display:grid;gap:26px}
.chercheur-lib{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--or-terne);font-weight:600;margin-bottom:12px}
.chercheur-champ{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 20px;
 border:1px solid var(--fil);border-radius:999px;background:var(--coeur);
 transition:border-color .7s var(--ressort)}
.chercheur-champ:focus-within{border-color:var(--fil-or)}
.chercheur-champ svg{width:19px;height:19px;flex:0 0 auto;color:var(--or)}
.chercheur-champ input{flex:1;min-width:0;border:0;background:none;outline:none;
 /* le champ remplit son conteneur : cliquer a cote du curseur doit le
    focaliser, et la cible passe de 23 a 44 px */
 align-self:stretch;min-height:44px;
 font-family:inherit;font-size:1.05rem;color:var(--texte)}
.chercheur-champ input::placeholder{color:var(--gris)}
.chercheur-champ input::-webkit-search-cancel-button{-webkit-appearance:none}
.chercheur-note{font-size:.96rem;margin-top:14px}
.communes{list-style:none;margin:0;padding:0;columns:1;column-gap:44px}
.communes li{break-inside:avoid;display:flex;align-items:baseline;justify-content:space-between;
 gap:14px;padding:13px 2px;border-bottom:1px solid var(--fil)}
.communes li[hidden]{display:none}
.communes b{font-family:'Clash Display';font-weight:600;letter-spacing:-.02em;
 font-size:1.16rem;color:var(--texte)}
.communes b sup{font-size:.6em;vertical-align:super}
/* Cinq communes sur soixante-neuf ont leur propre page. Un lien invisible au
   milieu de soixante-quatre libelles inertes ne serait jamais clique : il lui
   faut un soulignement, la couleur seule ne suffisant pas (WCAG 1.4.1). */
.communes b a{position:relative;color:var(--or-terne);text-decoration:underline;
 text-decoration-color:var(--fil-or);text-underline-offset:4px;
 transition:text-decoration-color .45s var(--ressort)}
/* Le libelle fait 22 px de haut. On agrandit la BOITE a 44 px par du
   remplissage, et on annule l'effet sur la ligne par une marge negative de
   meme valeur : la liste garde son rythme, le doigt gagne 22 px. Etendre par
   ::after ne suffit pas, la boite mesuree reste celle du texte. */
.communes b a{display:inline-block;padding:11px 10px;margin:-11px -10px}
.communes b a:hover,.communes b a:focus-visible{text-decoration-color:var(--or)}
.communes span{font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
 white-space:nowrap}
.chercheur-vide{color:var(--or);font-size:1.02rem;border-left:1px solid var(--fil-or);
 padding-left:16px}
.couverture-liste{min-width:0}
/* Bouton secondaire. Il etait dessine avec --fil, le filet neutre : sur creme
   cela fait un contour brun a 14 % que l'oeil ne trouve pas. Il porte desormais
   le filet dore et un fond dore leger, dans les deux themes. Il reste
   subordonne a .cta-or, qui seul a droit a l'aplat plein. */
.tout-voir{margin-top:18px;display:inline-flex;align-items:center;gap:11px;
 min-height:48px;padding:0 24px;border-radius:999px;cursor:pointer;
 border:1px solid var(--fil-or);background:rgba(var(--or-rgb),.09);
 font-family:inherit;font-size:.96rem;font-weight:600;color:var(--or);
 transition:border-color .7s var(--ressort),background .7s var(--ressort),
            transform .7s var(--ressort)}
.tout-voir:hover,.tout-voir:focus-visible{background:rgba(var(--or-rgb),.17);
 border-color:var(--or-terne);transform:translateY(-2px)}
.tout-voir:active{transform:translateY(0) scale(.98)}
/* sur fond sombre, l'aplat dore doit rester discret pour ne pas concurrencer
   le bouton plein qui vit dans la meme section */
section:not(.clair) .tout-voir{background:rgba(var(--or-rgb),.07)}
section:not(.clair) .tout-voir:hover{background:rgba(var(--or-rgb),.14)}
.tout-voir[hidden]{display:none}
@media(min-width:760px){.communes{columns:2}}
@media(min-width:1100px){
  .couverture{grid-template-columns:minmax(0,21rem) 1fr;gap:56px;align-items:start}
  .chercheur{position:sticky;top:132px}
  .communes{columns:2}
  .chercheur-vide{grid-column:2}
}

/* ================= AVIS ================= */
.temoin .noyau{padding:44px 30px}
.temoin .ouvre{font-family:'Clash Display';font-size:7rem;line-height:.5;color:rgba(var(--or-rgb),.16);display:block;margin-bottom:-14px}
.temoin blockquote{font-family:'Clash Display';font-size:clamp(1.45rem,6vw,2.3rem);font-weight:500;color:var(--texte);
 line-height:1.14;margin-bottom:22px;max-width:22ch}
.temoin cite{font-style:normal;font-size:.86rem;color:var(--gris)}

/* ================= FAQ ================= */
.questions details{border-bottom:1px solid var(--fil);padding:24px 0}
.questions summary{cursor:pointer;font-weight:600;font-size:1.06rem;list-style:none;display:flex;align-items:center;
 justify-content:space-between;gap:22px;min-height:44px}
.questions summary::-webkit-details-marker{display:none}
.questions .croix{width:36px;height:36px;flex:0 0 auto;border-radius:999px;border:1px solid var(--fil);position:relative;
 transition:transform .55s var(--ressort),border-color .55s var(--ressort),background .55s var(--ressort)}
.questions .croix::before,.questions .croix::after{content:"";position:absolute;top:50%;left:50%;
 width:13px;height:1.5px;background:var(--or);border-radius:2px;transform:translate(-50%,-50%)}
.questions .croix::after{transform:translate(-50%,-50%) rotate(90deg)}
.questions details[open] .croix{transform:rotate(45deg);border-color:var(--fil-or);background:rgba(var(--or-rgb),.09)}
.questions p{font-size:1.06rem;margin-top:14px}

/* ================= FINALE ================= */
.finale .noyau{padding:52px 30px;text-align:center;background:
 radial-gradient(120% 130% at 50% 0%,rgba(var(--or-rgb),.16),transparent 62%),linear-gradient(168deg,var(--coeur),var(--nuit))}
.finale h2{font-size:clamp(2rem,8vw,3.2rem);margin-bottom:16px}
.finale p{margin:0 auto 32px}
.finale .duo-cta{justify-content:center}

footer{border-top:1px solid var(--fil);padding:72px 0 118px;font-size:1.02rem;color:var(--gris);position:relative;z-index:2}
footer .colonnes{display:grid;gap:34px;margin-bottom:44px}
footer h4{font-family:'Clash Display';color:var(--texte);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
footer li{list-style:none}
footer li a{display:inline-flex;align-items:center;min-height:44px;transition:color .7s var(--ressort)}
footer li a:hover{color:var(--or)}
/* La ligne de mentions ferme le pied : les obligations legales a gauche, la
   signature d'agence a droite. Elle vit DANS la `.zone` — un `</div>` orphelin
   l'en sortait, et elle s'etalait sur toute la largeur de l'ecran pendant que
   le reste du pied restait aligne. */
footer .mentions{border-top:1px solid var(--fil);padding-top:24px;font-size:.88rem;
 display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
 gap:10px 32px}
footer .mentions a{display:inline-block;padding:5px 0;color:var(--gris);border-bottom:1px solid var(--fil);
 transition:color .6s var(--ressort),border-color .6s var(--ressort)}
footer .mentions a:hover{color:var(--or);border-bottom-color:var(--fil-or)}
footer .mentions .rk{color:var(--pale,var(--gris))}

/* Les deux valeurs qui etaient posees en ligne dans le pied. */
footer .sceau{margin-bottom:14px}
footer .adresse-pied{font-size:.9rem;max-width:34ch;margin-bottom:24px}

.quai{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* le quai est fixe : on reserve sa hauteur en bas de page, sinon il masque le pied */
body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
.quai a{background:rgba(11,10,8,.82);backdrop-filter:blur(20px);border:1px solid var(--fil);min-height:58px;
 border-radius:999px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.94rem}
.quai a.majeur{background:var(--or);color:var(--sur-or);border-color:transparent}
.quai svg{width:16px;height:16px}

/* ===== LE CHOIX D'APPEL : telephone ou WhatsApp =====
   Demande de Yassine, posee le 06/10/2026 : un client qui touche « Appeler »
   choisit entre l'appel classique et WhatsApp.

   IL N'Y A PAS D'ATTRIBUT `hidden` SUR CE BLOC, ET C'EST VOULU. Il suit la
   mecanique du menu plein ecran : presente dans le DOM, invisible par
   `visibility`, revelee par une classe. Sans JavaScript elle reste donc
   invisible ET les boutons gardent leur href : le site appelle ou mene au
   simulateur directement, comme avant. Le defaut du 27/08 — des pages vides
   quand le script ne charge pas — ne peut pas se reproduire ici.

   LA CLASSE EST SUR LA FEUILLE, PAS SUR LE BODY. Il y en a deux depuis le
   09/10/2026 : le choix d'appel et le choix de reservation. Avec un etat porte
   par le corps du document, le second bouton ouvrait les deux a la fois.

   ELLE EST CENTREE, Y COMPRIS SUR MOBILE, et ce n'est pas le reflexe habituel :
   une feuille d'action se colle normalement en bas, sous le pouce. Deux raisons
   de ne pas le faire ici, vues a l'ecran le 06/10/2026 :
     - le bandeau de consentement occupe justement le bas de l'ecran tant que le
       visiteur n'a pas repondu, et il sort du plugin Complianz avec un
       z-index de 99999 que notre echelle ne depassera pas. Collee en bas, la
       feuille disparaissait dessous et le bouton « Appeler » semblait mort ;
     - au centre, les deux cohabitent : on voit que le clic a fait quelque chose.
   Plan 200, le plus haut de l'echelle du document : il faut passer au-dessus de
   l'ilot de navigation, qui est a 60 et restait sinon par-dessus le voile. */
.choix{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;justify-content:center;
 padding:20px;background:rgba(var(--noir-rgb),.86);backdrop-filter:blur(30px);
 opacity:0;visibility:hidden;transition:opacity .6s var(--ressort),visibility .6s}
.choix.ouverte{opacity:1;visibility:visible}
.choix-fond{position:absolute;inset:0;background:none;border:none;cursor:pointer}
.choix-boite{position:relative;width:100%;max-width:420px;margin:0 auto;padding:24px 20px 16px;
 background:var(--plaque);border:1px solid var(--fil);border-radius:var(--r-xl);
 box-shadow:0 18px 50px rgba(0,0,0,.55);
 transform:translateY(22px);transition:transform .6s var(--ressort)}
.choix.ouverte .choix-boite{transform:none}
.choix-titre{font-size:.95rem;color:var(--gris);text-align:center;margin:0 0 18px}
.choix-voie{display:flex;align-items:center;gap:14px;min-height:64px;padding:0 18px;margin-bottom:10px;
 background:rgba(247,243,234,.05);border:1px solid var(--fil);border-radius:var(--r-l);
 transition:background .6s var(--ressort),border-color .6s var(--ressort)}
.choix-voie:hover{background:rgba(247,243,234,.09);border-color:var(--fil-or)}
.choix-pastille{flex:none;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
 background:rgba(var(--or-rgb),.14);color:var(--or)}
.choix-pastille.verte{background:rgba(var(--whatsapp-rgb),.16);color:var(--whatsapp)}
.choix-pastille svg{width:19px;height:19px}
.choix-dit{display:flex;flex-direction:column;gap:2px}
.choix-dit b{font-size:1rem;font-weight:600;color:var(--texte)}
.choix-dit span{font-size:.86rem;color:var(--gris)}
.choix-fermer{display:block;width:100%;min-height:48px;background:none;border:none;cursor:pointer;
 color:var(--gris);font-size:.9rem;font-family:inherit}



/* ===== moyens de paiement, version compacte du heros ===== */
.paie-mini{width:min(780px,100%);margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.lib-mini{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--or-terne);font-weight:600;flex:0 0 auto}
.mp-rang{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.mp{display:grid;place-items:center;height:22px;min-width:30px;padding:0 5px;border-radius:4px;
 background:rgba(247,243,234,.06);transition:background .5s var(--ressort)}
.mp:hover{background:rgba(247,243,234,.11)}
.mp svg{width:15px;height:15px;color:var(--gris)}
.mp.texte{font-family:'Clash Display';font-weight:600;font-size:.6rem;letter-spacing:.06em;color:var(--gris)}

/* ===== moyens de paiement, pied de page ===== */
.paiements{margin-top:72px;padding-top:40px;padding-bottom:8px;border-top:1px solid var(--fil)}
.titre-p{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
 font-weight:600;margin-bottom:20px}
.marques{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.marque-p{display:grid;place-items:center;width:62px;height:42px;border-radius:var(--r-m);
 background:rgba(247,243,234,.05);border:1px solid var(--fil);
 transition:background .5s var(--ressort),border-color .5s var(--ressort)}
.marque-p:hover{background:rgba(247,243,234,.09);border-color:var(--fil-or)}
.marque-p svg{width:26px;height:26px;color:var(--gris)}
.marque-p.texte{font-family:'Clash Display';font-weight:600;font-size:.78rem;
 letter-spacing:.08em;color:var(--gris)}
.note-p{margin-top:18px;font-size:.86rem;color:var(--gris);max-width:64ch;line-height:1.6}
/*  La mention d'origine des avis renvoie aux mentions legales : sans cette
    regle le lien portait la couleur du texte, sans soulignement, et rien ne
    disait qu'on pouvait cliquer. Meme traitement que la mention des CGV.  */
/* ================= LIENS DANS LE TEXTE ================= */
/*  LE MAILLAGE INTERNE DOIT SE VOIR, SINON IL N'EXISTE PAS.
    Le 04/10/2026, les premiers liens editoriaux poses dans les paragraphes
    etaient rendus `color:inherit` par la regle generale de la ligne 60 : meme
    couleur que le texte, aucun soulignement. Ils etaient cliquables et
    personne ne pouvait le deviner. C'est le piege que decrit
    docs/acquis/contenu-maillage-interne.md : « les liens etaient bien presents
    et cliquables, mais peu mis en valeur par le theme, le ressenti pas de
    maillage etait juste ».

    `:not([class])` vise les liens ECRITS DANS LA PHRASE et eux seuls : les
    boutons, les cartes et les liens habilles portent tous une classe et gardent
    leur rendu. La couleur suit `--or`, qui vaut l'or vif sur fond nuit et le
    brun fonce en section claire : lisible sur les deux, c'est a ca qu'elle
    sert. Le soulignement est pose a distance du texte et s'affirme au survol,
    plutot que de barrer les jambages des lettres. */
main p a:not([class]), main li a:not([class]){
 color:var(--or);text-decoration:underline;text-decoration-thickness:1px;
 text-underline-offset:3px;text-decoration-color:rgba(var(--or-rgb),.45);
 transition:text-decoration-color .18s ease,color .18s ease}
main p a:not([class]):hover, main li a:not([class]):hover{
 color:var(--or-vif);text-decoration-color:rgba(var(--or-rgb),.9)}
section.clair main p a:not([class]):hover,
section.clair p a:not([class]):hover{color:var(--or)}

.note-p a{color:var(--or-terne);text-decoration:underline;
 text-decoration-color:var(--fil-or);text-underline-offset:4px}
.note-p a:hover{color:var(--or)}

/* ============ MOUVEMENT ============
   Tout passe par transform et opacity. Aucune dependance a un CDN :
   ce qui est structurel ne doit jamais tomber avec un serveur tiers. */

/* entree : montee lourde avec flou, decalee par le rang de l element */
html.anim .entree{opacity:0;transform:translateY(58px) scale(.985);filter:blur(10px);
 transition:opacity .95s var(--ressort),transform .95s var(--ressort),filter .95s var(--ressort);
 transition-delay:calc(var(--r,0) * 85ms)}
html.anim .entree.la{opacity:1;transform:none;filter:none}

/* titre : chaque ligne se leve derriere un masque, l une apres l autre */
.ligne-masque{display:block;overflow:hidden}
.ligne-masque > i{display:block;font-style:normal;transform:translateY(105%);
 transition:transform 1.05s var(--ressort);transition-delay:calc(var(--r,0) * 105ms)}
.la .ligne-masque > i,.ligne-masque.la > i{transform:none}

/* filet dore qui se trace sous les reperes de chapitre */
.chapitre .barre{transform-origin:left center;transform:scaleX(0);
 transition:transform 1.2s var(--ressort) .1s}
.chapitre.la .barre{transform:scaleX(1)}

/* Les lignes pleine largeur arrivent une par une, en glissant. Vaut pour le
   tableau de departs ET pour la ligne monumentale : deux composants de la
   meme famille ne peuvent pas entrer differemment dans la meme page. */
html.anim .vol,html.anim .arene{opacity:0;transform:translateX(-26px);
 transition:opacity .8s var(--ressort),transform .8s var(--ressort);
 transition-delay:calc(var(--r,0) * 70ms)}
html.anim .vol.la,html.anim .arene.la{opacity:1;transform:none}

/* la photo de fond derive lentement pendant le defilement */
.decor img{transform:translate3d(0,var(--par,0px),0) scale(1.045)}

/* pression physique sur les boutons */
.cta:active{transform:scale(.975)}

/* le simulateur respire quand il entre dans le champ */
.coque.doree{transition:box-shadow 1.4s var(--ressort)}
.coque.doree.la{box-shadow:0 40px 120px -40px rgba(var(--or-rgb),.28)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html .entree,html .vol,html .arene{opacity:1;transform:none;filter:none}
  .ligne-masque > i{transform:none}
  .chapitre .barre{transform:none}
  .decor img{transform:none}
}

@media(min-width:900px){
  section{padding:118px 0}
  .zone{width:min(1320px,100% - 72px)}
  .ilot nav,.appel{display:flex}
  .levier{display:none}
  .heros{padding:128px 0 56px}
  .heros-grille{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center;width:100%}
  .calc-heros{margin-top:0}
  /* Le gabarit portait un titre court de 29 signes. Les vrais H1 du site
     contiennent le mot-cle et font 40 a 55 signes : a 11ch et 5,8rem ils
     tombaient sur cinq lignes. La colonne du heros borne desormais la casse. */
  .heros h1{font-size:clamp(3.1rem,4.4vw,4rem)}
  .saisies{grid-template-columns:1fr 1fr}
  .simulateur .cta-or{width:auto;min-width:280px}
  .chiffres{grid-template-columns:repeat(3,1fr)}
  .flotte{grid-template-columns:repeat(2,1fr);gap:20px}
  .ligne{grid-template-columns:auto 1.1fr 1.2fr;gap:34px;align-items:center}
  .regles{grid-template-columns:1fr 1fr;column-gap:56px}
  .parcours{grid-template-columns:repeat(2,1fr);column-gap:56px}
  .borne:nth-child(even){margin-top:70px}
  /* Un parcours a TROIS etapes ne se met pas sur deux colonnes : la
     troisieme se retrouve seule sous la premiere, le fil vertical la relie
     en sautant la deuxieme, et la deuxieme flotte a droite sans fil. Le
     lecteur suit alors 01 puis 03. Seule la page entreprises est dans ce
     cas ; les six autres parcours en ont quatre, ou les deux colonnes
     forment deux fils coherents. */
  .parcours:has(> .borne:nth-child(3):last-child){grid-template-columns:1fr}
  .parcours:has(> .borne:nth-child(3):last-child) .borne:nth-child(even){margin-top:0}
  /* Deux colonnes REELLES, pas huit cellules : sans rangee commune, ouvrir
     une question ne pousse que celles qui la suivent dans sa colonne, et
     aucune voisine n'est etiree ni laissee avec un trou sous elle. */
  .questions{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start}
  .temoin .noyau,.finale .noyau{padding:78px 64px}
  .triptyque{grid-template-columns:1.35fr 1fr;align-items:stretch}
  .vue{aspect-ratio:auto}
  .triptyque{min-height:420px}
  .flux{grid-template-columns:repeat(3,1fr)}
  .quai{display:none}
  body{padding-bottom:0}
  footer{padding-bottom:72px}
  footer .colonnes{grid-template-columns:2.4fr 1fr 1fr 1.2fr}
  .split-titre{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
  .split-titre .intitule{position:sticky;top:120px;margin-bottom:0}
}


/* ================= LCP : PAS D'ANIMATION AU-DESSUS DE LA LIGNE DE FLOTTAISON
   Le LCP est compte quand l'element atteint son paint FINAL. Une animation
   d'entree sur le heros le retarde donc d'autant, et l'element le plus grand
   de la page est justement le texte du heros. Mesure du 26/08 sur l'accueil
   en 390 px : LCP a 1 256 ms sur `.amorce.entree`, retenu par sa propre
   transition. Les sections plus bas gardent l'animation, elles ne sont pas
   dans le premier ecran.
   Piege documente dans le playbook site-build, mesure sur Mery'clean :
   1 889 ms -> 558 ms. ================= */
.heros .entree,.tete-doc .entree{opacity:1 !important;transform:none !important;
 filter:none !important;transition:none !important}
/* ---- espacements des motifs, retires du HTML ----
   Ces regles remplacent 163 attributs `style` poses page par page. Le design
   system demande de ne pas inventer de valeur : une intention, une regle, une
   seule valeur. Quand deux valeurs coexistaient pour le meme motif, on garde
   la majoritaire. */

/* Le macaron annonce toujours un titre. L'ecart etait pose en ligne, a 20 px
   sur 35 pages et 18 px sur 32 autres, pour exactement le meme motif. */
.macaron + h2{margin-top:20px}

/* Intitule dont le bloc suivant porte deja sa marge haute. */
.intitule.serre{margin-bottom:0}

/* Le duo de boutons suit son bloc de texte ; la variante serree sert quand il
   ferme une carte plutot qu'une section. */
.duo-cta{margin-top:32px}
.duo-cta.serre{margin-top:14px}

/* Le socle est un encadre de precision. Il suit soit un bloc de texte, soit
   directement son titre, d'ou les deux variantes. */
.socle.suite{margin:22px 0 0}
.socle.colle{margin:0 0 4px}

/* Une valeur mise en avant dans une phrase. C'etait `style="color:var(--or)"`
   repete onze fois. */
b.or{color:var(--or)}

/* Paragraphe de precision sous une liste ou un tableau. */
p.suite{margin-top:16px}

/* Deux calages isoles du bord de page et du lien de repli. */
.lib-bord.espace{margin-top:28px}
.tout-voir.espace{margin-top:22px}
.tout-voir.suite{margin-left:10px}

/* ---- la FAQ en deux colonnes ----
   `.colonne-q` etait employee sur onze pages sans qu'aucune regle ne la
   definisse : les deux colonnes s'empilaient et le conteneur ne faisait rien.
   Bascule a 900 px, comme toutes les grilles du site. */
.questions{display:grid;gap:0 56px}
@media(min-width:900px){.questions{grid-template-columns:1fr 1fr}}
.colonne-q{min-width:0}

/* ================= SIMULATEUR : SUGGESTIONS ET RESULTAT =================
   Ajoute le 31/08/2026, quand le simulateur est passe de facade a calcul reel.

   AUCUNE VALEUR NOUVELLE : la liste reprend la forme du champ qu'elle prolonge
   (meme fond, meme filet, meme rayon), le resultat reprend celle de `.coque`,
   et les montants empruntent la graisse tabulaire des `.chiffres`. Tout vient
   des jetons. */

.saisie{position:relative}

.suggestions{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);
 background:var(--plaque);border:1px solid var(--fil-or);border-radius:var(--r-m);
 padding:6px;margin:0;list-style:none;max-height:290px;overflow-y:auto;
 box-shadow:0 18px 40px rgba(var(--noir-rgb),.55)}
.suggestions:empty{display:none}

.suggestions li{padding:11px 13px;border-radius:calc(var(--r-m) - 6px);cursor:pointer;
 font-size:.94rem;color:var(--texte);display:flex;align-items:flex-start;gap:10px;
 line-height:1.35;transition:background .2s var(--ressort)}
.suggestions li:hover,.suggestions li[aria-selected="true"]{background:rgba(var(--or-rgb),.14)}

/* Les destinations que Go Lyon dessert nommement se distinguent des adresses
   quelconques : c'est ce qui fait comprendre au visiteur qu'elles sont au
   catalogue. */
.suggestions .pastille{flex:0 0 auto;width:7px;height:7px;padding:0;margin-top:7px;
 border-radius:999px;background:var(--fil)}
.suggestions .desservi .pastille{background:var(--or)}

/* UNE COMMUNE N'EST PAS UNE DESTINATION, c'est un detour vers une rue : elle se
   lit comme une etape, pas comme un choix. La mention « preciser l'adresse »
   reprend le gabarit de `.resultat .trajet` — meme taille, meme or terne, aucune
   valeur nouvelle. */
.suggestions .commune .pastille{background:var(--or-terne)}
.suggestions .precise{flex:0 0 auto;font-size:.86rem;color:var(--or-terne);
 align-self:center}

/* L'ADRESSE S'AFFICHE EN ENTIER. Elle etait tronquee a l'ellipse — « 21 rue de
   la Roche 3808… » — ce qui empeche de distinguer deux communes homonymes,
   justement ce que la liste sert a trancher. */
.suggestions .libelle{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}

.resultat{margin-top:18px;border-top:1px dashed var(--fil);padding-top:16px}
.resultat[hidden]{display:none}
.resultat .trajet{font-size:.86rem;color:var(--or-terne);margin-bottom:16px}

.offres{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.offres li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
 padding:13px 15px;background:rgba(247,243,234,.03);border:1px solid var(--fil);
 border-radius:var(--r-m)}
/* LA MISE EN AVANT SUIT LA SELECTION, PAS LE RANG. Elle etait posee sur
   `:first-child`, ce qui convenait tant que la liste ne se choisissait pas :
   depuis que le visiteur retient un vehicule, la surbrillance resterait sur le
   moins cher pendant qu'il en a coche un autre. Le premier est selectionne
   d'office, donc le rendu au premier affichage ne bouge pas. */
.offres li.choisie{border-color:var(--fil-or);background:rgba(var(--or-rgb),.08)}
/* Le fond dore seul suffisait a dire « le moins cher ». Il ne suffit plus a
   dire « celui que vous avez retenu » : mesure sur mobile, la teinte vaut 8 %
   d'opacite et le filet 24 %, on ne distingue pas la carte cochee des autres.
   On reprend le motif que le DS emploie deja pour la page courante du menu,
   `color:var(--or)` sur le libelle. Aucune valeur nouvelle. */
.offres li.choisie .vehicule{color:var(--or)}

/* LES DEUX SORTIES PRENNENT LA LARGEUR DU PANNEAU. Le DS l'impose deja au
   bouton principal du calculateur (`.calc-heros .cta-or`, plus haut) : sous un
   bouton pleine largeur, une pilule etroite alignee a gauche fait bancal.
   Memes declarations que la regle d'origine, appliquees au second bouton. */
.resultat .duo-cta .cta,
.resultat .saisies button.cta{width:100%;justify-content:space-between}
/* Les champs de contact apparaissent sous les prix, dans le meme panneau : ils
   n'ont pas besoin de la marge basse que `.saisies` porte pour separer le
   formulaire d'estimation de ce qui le suit. */
.resultat .saisies{margin-bottom:0}
/* La ligne du total emprunte la carte des offres, mais elle ne se coche pas :
   la main du curseur promettrait une action qui n'existe pas. */
.resultat .offres.total li{cursor:default}
/* LE PARCOURS EN ETAPES RESPIRE. Mounir, 10/09 : « tout est un tout petit peu
   ecrase, ca ne respire pas assez entre les cases », a toutes les etapes.
   L'ecart entre les cartes passe de 8 a 12 px, leur marge interieure de 13-15 a
   16-18 px, et chaque bloc s'ecarte du precedent de 16 px, 20 avant les
   boutons. Uniquement dans le bloc du calculateur, et uniquement des valeurs
   que la feuille emploie deja ailleurs : aucune valeur nouvelle. */
.resultat .offres{gap:12px;margin-top:16px}
.resultat .offres li{padding:16px 18px}
.resultat .avertissement{margin-top:16px}
.resultat .saisies{margin-top:16px}
.resultat .duo-cta.serre{margin-top:20px}
.offres li{cursor:pointer}
.offres label{display:flex;align-items:baseline;justify-content:space-between;
 gap:14px;width:100%;cursor:pointer}
/* Le bouton radio reste dans le parcours clavier, il n'est simplement pas
   dessine : c'est la carte entiere qui sert de cible, ce qui donne 44 px de
   haut au doigt plutot qu'un cercle de 16 px. */
.offres input{position:absolute;width:1px;height:1px;opacity:0}
.offres li:focus-within{border-color:var(--fil-or)}
.offres .vehicule{font-weight:600}
.offres .places{display:block;font-size:.8rem;color:var(--gris);font-weight:400}
.offres .montant{font-family:'Clash Display';font-size:1.5rem;color:var(--or);
 font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.offres .ttc{font-size:.72rem;color:var(--or-terne);margin-left:5px;letter-spacing:.04em}

/* LA MENTION D'ACCEPTATION DES CGV, au-dessus du bouton qui engage. Elle
   reprend `.reserve`, la note du formulaire d'estimation : meme taille, meme
   filet, c'est une precision et non un champ. Dans la grille des saisies elle
   prend la ligne entiere, comme le bouton qu'elle precede ; le filet et
   l'ecart de la grille suffisent a la detacher, d'ou la marge haute annulee.
   La largeur maximale des paragraphes (62ch) est levee : sinon son filet
   s'arretait 40 px avant le bord du bouton (vu a 1440 px le 22/09). Son lien
   se souligne comme celui des communes : la couleur seule ne dit pas qu'un
   mot se clique (WCAG 1.4.1). */
.saisies .reserve{grid-column:1/-1;margin-top:0;max-width:none}
/* LE LIEN D'UNE NOTE, quel que soit le bloc qui la porte. Ecrit d'abord pour
   la seule mention des CGV (.saisies .reserve a), le selecteur a ete elargi le
   12/10/2026 quand la note du simulateur a recu a son tour un lien, vers le
   formulaire de rappel. Deux regles identiques a tenir ensemble valaient moins
   qu'une seule : aucune autre note du site ne portait de lien a cette date. */
.reserve a{color:var(--or);text-decoration:underline;text-decoration-color:var(--fil-or);
 text-underline-offset:4px}
/* « Réserver avec obligation de paiement » est la formule de l'article L221-14,
   on ne la raccourcit pas : sur telephone elle tient sur deux lignes. Avec
   l'interligne du corps (1,72), ces deux lignes remplissaient les 56 px du
   bouton jusqu'aux bords (mesure a 390 px le 22/09). Interligne resserre, un
   peu d'air en haut et en bas, lignes equilibrees et calees a gauche comme les
   libelles d'une ligne. Sur une ligne, la hauteur minimale l'emporte : les
   autres boutons du tunnel ne bougent pas. */
.resultat .saisies button.cta{line-height:1.3;padding-block:8px;text-align:left;text-wrap:balance}

.avertissement{margin-top:12px;font-size:.86rem;color:var(--or-terne)}
.avertissement[hidden]{display:none}

.calcul-en-cours{opacity:.55;pointer-events:none}

/* A partir de 900 px la grille des saisies passe a deux colonnes, et la liste
   se retrouve a la largeur d'une demi-colonne : bien trop etroit pour une
   adresse complete. On la laisse alors s'etendre au-dela de son champ.

   Les champs PAIRS occupent la colonne de droite : leur liste s'ancre a
   droite, sinon elle s'etend vers l'exterieur et sort de la carte. */
@media(min-width:900px){
  .saisie .suggestions{min-width:100%;width:max-content;max-width:min(460px,42vw)}
  .saisie:nth-child(2n) .suggestions{left:auto;right:0}
}

/* ================= CONTACT FORM 7 =================
   Ajoute le 31/08/2026, quand les formulaires de rappel sont passes sous CF7
   pour s'aligner sur le reste du parc.

   PEU DE REGLES, PARCE QUE LE MARKUP CF7 REPREND CELUI DU SITE. Le champ du
   formulaire, cote administration, est ecrit avec `.saisie`, `label` et
   `.enveloppe` : la feuille les habille deja. Il ne reste ici que ce que CF7
   ajoute de son propre chef. */

.wpcf7-form{display:grid;gap:14px;margin-top:26px;text-align:left}
.wpcf7-form p{margin:0}

/* CF7 rend un <input type="submit"> : il ne peut pas contenir la bulle et sa
   fleche, contrairement au <button> du site. On reprend donc la pilule doree
   sans son ornement, et on compense le retrait interieur qu'elle reservait. */
.wpcf7-form .wpcf7-submit{grid-column:1/-1;justify-self:center;margin-top:6px;
 min-height:56px;padding:0 30px;border:0;cursor:pointer;border-radius:999px;
 background:var(--or);color:var(--sur-or);font-family:'Clash Display';
 font-weight:600;font-size:1rem;box-shadow:0 10px 34px rgba(var(--or-rgb),.18);
 transition:box-shadow .4s var(--ressort),transform .4s var(--ressort)}
.wpcf7-form .wpcf7-submit:hover{box-shadow:0 18px 54px rgba(var(--or-rgb),.30);
 transform:translateY(-1px)}
.wpcf7-form .wpcf7-submit:disabled{opacity:.55;cursor:default;transform:none}

/* Le message de reponse et les erreurs de champ. Ils sont invisibles tant que
   CF7 ne les remplit pas : sans regle, ils sortent aux styles du navigateur,
   en rouge vif sur fond noir. */
.wpcf7 form .wpcf7-response-output{grid-column:1/-1;margin:16px 0 0;padding:13px 16px;
 border:1px solid var(--fil-or);border-radius:var(--r-m);font-size:.92rem;
 color:var(--texte);background:rgba(var(--or-rgb),.08)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:rgba(220,90,70,.5);
 background:rgba(220,90,70,.12)}
.wpcf7-not-valid-tip{margin-top:6px;font-size:.84rem;color:var(--or-vif)}
.wpcf7-form .wpcf7-spinner{margin:10px auto 0;display:block}

/* LE CHAMP PIEGE. Il doit etre invisible pour un humain et lisible pour un
   robot : `display:none` serait ignore par les robots qui lisent le HTML, donc
   on le sort de l'ecran plutot que de le masquer. `aria-hidden` et `tabindex`
   l'ecartent des lecteurs d'ecran et du parcours au clavier. */
.wpcf7-form .piege{position:absolute;left:-9999px;width:1px;height:1px;
 overflow:hidden}

/* ================= AVIS GOOGLE : LA LARGEUR, ET RIEN D'AUTRE =================
   Le widget TrustIndex est enfant direct de la section, donc sans largeur
   maximum : il s'etale d'un bord a l'autre de l'ecran alors que tout le reste
   du site tient dans `.zone`.

   Le carrousel d'origine debordait lui aussi, mais il portait un fondu sur ses
   4 % lateraux : le debordement etait alors visiblement voulu. Le widget n'a
   pas ce fondu et ses cartes sont tranchees net au bord de l'ecran.

   Mounir a tranche le 31/08 : on le ramene a la largeur du site. Le 07/10,
   il a decide d'habiller aussi les cartes au design system, comme sur les
   autres sites du parc : voir le bloc « AVIS GOOGLE : L'HABILLAGE » plus bas.
   La consigne du 31/08 (« le style natif, on n'y touche pas ») ne vaut plus.

   ⚠ NE PAS VISER `.ti-widget` : sa propre feuille pose
   `.ti-widget.ti-goog{width:100%}`, qui est plus specifique qu'une regle a une
   seule classe ET qui se charge apres la notre. Une regle `.ti-widget{...}` ici
   n'a aucun effet dans un vrai navigateur — elle a l'air de marcher en test
   automatise parce que la feuille de TrustIndex, elle, ne s'y charge pas.

   ON NE VISE RIEN QUI APPARTIENNE A TRUSTINDEX. Son balisage se transforme
   pendant le chargement — le `<pre>` de depart disparait, le div conteneur perd
   `data-template-id` pour `data-ti-widget-inited` — et deux regles ecrites sur
   ces reperes ont deja lache en production. On contraint donc par la position :
   TOUT enfant direct de la section des avis qui n'est pas notre propre
   conteneur. Peu importe ce que le plugin depose, ca tombe dedans.

   La specificite (un id + une classe) passe devant le `width:100%` que le
   plugin pose sur deux classes, et le fait sans `!important`. */
#avis > *:not(.zone){width:min(1320px,100% - 32px);margin-inline:auto}
/* `.zone` passe a 72px de marges au-dela de 900 px : sans ce second
   palier le widget depasse de 20 px de chaque cote, ce qui se voit. */
@media(min-width:900px){
  #avis > *:not(.zone){width:min(1320px,100% - 72px)}
}

/* ================= AVIS GOOGLE : L'HABILLAGE =================
   Decide par Mounir le 07/10/2026. Le widget est toujours dans
   `section#avis.clair` (35 pages) : tout est ecrit sous `#avis`, avec les
   jetons de la section claire, sans aucune valeur nouvelle.

   Ces regles visent les classes de TrustIndex, qui peut les renommer a une
   mise a jour : verifier a l'oeil apres chaque mise a jour du plugin. Sa
   feuille se charge apres la notre, d'ou les `!important`.

   On ne style PAS la vignette de l'entreprise (`.ti-footer .ti-profile-img`) :
   un arrondi y fait apparaitre le vide autour de la photo. Ni l'interligne du
   texte des avis : le widget coupe le texte a 4 lignes avec le sien.

   Les etoiles sont des images : le filtre amene leur jaune au `--or-rgb`
   (198,154,46), calcule au canvas, ecart de 2 sur 765. */
#avis .ti-widget.ti-goog,#avis .ti-widget.ti-goog *{font-family:'General Sans',system-ui,sans-serif}
#avis .ti-widget.ti-goog .ti-review-item>.ti-inner{background:var(--coeur)!important;border:1px solid var(--fil)!important;
 border-radius:var(--r-l)!important;box-shadow:none!important;
 transition:transform .7s var(--ressort),border-color .7s var(--ressort)!important}
#avis .ti-widget.ti-goog .ti-review-item>.ti-inner:hover{transform:translateY(-6px);border-color:var(--fil-or)!important}
#avis .ti-widget.ti-goog .ti-name{font-family:'Clash Display',system-ui,sans-serif;font-weight:600!important;color:var(--texte)!important}
#avis .ti-widget.ti-goog .ti-date{color:var(--gris)!important}
#avis .ti-widget.ti-goog .ti-review-content,#avis .ti-widget.ti-goog .ti-review-content *{color:var(--texte)!important}
#avis .ti-widget.ti-goog .ti-read-more,#avis .ti-widget.ti-goog .ti-read-more *{color:var(--or)!important;opacity:1!important;font-weight:600!important}
#avis .ti-widget.ti-goog img.ti-star{filter:hue-rotate(-4deg) saturate(.75) brightness(.84)}
#avis .ti-widget.ti-goog .ti-footer .ti-rating-text,#avis .ti-widget.ti-goog .ti-footer .ti-rating-text *{color:var(--gris)!important}
#avis .ti-widget.ti-goog .ti-footer .ti-rating-text strong{color:var(--texte)!important}
#avis .ti-widget.ti-goog .ti-footer strong.ti-rating-large{font-family:'Clash Display',system-ui,sans-serif;font-weight:600!important;
 letter-spacing:.2em!important;color:var(--texte)!important}
#avis .ti-widget.ti-goog .ti-controls .ti-next,#avis .ti-widget.ti-goog .ti-controls .ti-prev{background-color:var(--coeur)!important;
 outline:1px solid var(--fil-or)!important}
#avis .ti-widget.ti-goog .ti-controls .ti-next::before,#avis .ti-widget.ti-goog .ti-controls .ti-prev::before{border-color:var(--or)!important}
#avis .ti-widget.ti-goog .ti-controls .ti-next:hover,#avis .ti-widget.ti-goog .ti-controls .ti-prev:hover{background-color:rgb(var(--or-rgb))!important;outline-color:rgb(var(--or-rgb))!important}
#avis .ti-widget.ti-goog .ti-controls .ti-next:hover::before,#avis .ti-widget.ti-goog .ti-controls .ti-prev:hover::before{border-color:var(--sur-or)!important}

/* Entre 900 et 1140 px, la barre n'a pas la place de ses neuf entrees :
   il lui faut 1111 px, et sa largeur suit min(1320px, 100% - 72px). A 1200 px
   de fenetre il tient EXACTEMENT, 1131 pour 1131, sans un pixel de marge.
   Le seuil est donc a 1240 px, ce qui en laisse 57. En dessous, c'est le
   menu au levier qui sert, avec exactement les memes destinations. */
@media(min-width:900px) and (max-width:1239px){
  .ilot nav,.appel{display:none}
  .levier{display:grid}
  .voile{display:flex}
}