/* ------------------------------------------------------------------
   Page de vente — Un Jour Un Site
   Autonome : AUCUN appel distant. Les deux vignettes de la section
   « realisations » sont des fichiers locaux (dossier img/), telecharges
   une seule fois a la construction. Le visiteur ne contacte jamais
   bestcleanauto.fr ni aichronoscorp.com — seuls des LIENS y menent,
   et un lien n'est suivi que si on clique dessus.
   PAS d'overflow-x:hidden sur html/body : cela casserait l'en-tete
   collant (lecon E13).
   ------------------------------------------------------------------ */
:root{
  --encre:#12211f; --fond:#fdfcf9; --fond-alt:#f4f1e8; --carte:#fff; --trait:#e6e2d8;
  --texte:#1c2b28; --doux:#5b6b66; --pale:#616e68;
  --vert:#0f5c48; --vert-clair:#e6f2ee;
  --or:#b8801f; --or-clair:#fdf4e3; --or-fonce:#7d550d;
  --rouge:#a8341f;
  --rayon:14px;
  /* Couleur du texte POSE SUR le vert. Elle doit changer avec la clarte du
     vert : blanc sur #0f5c48 donne 7,9:1, mais blanc sur le vert clair des
     bandeaux sombres tomberait a 2,2:1 — illisible. */
  --sur-vert:#fff;
  /* Chassis du telephone : volontairement fixe dans les deux themes.
     Un cadre de telephone blanc en mode sombre ne ressemblerait a rien. */
  --chassis:#1b2624;
  --ombre-douce:0 2px 8px rgba(10,40,33,.05);
  --ombre-forte:0 26px 60px -22px rgba(10,40,33,.34);
  --titre:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --encre:#e8eceb; --fond:#101614; --fond-alt:#151d1b; --carte:#18211f; --trait:#2a3633;
    --texte:#e8eceb; --doux:#9fb0ab; --pale:#7d8d88;
    --vert:#4fc39d; --vert-clair:#10281f;
    --or:#e0aa4a; --or-clair:#2b2008; --or-fonce:#eac57e;
    --rouge:#ff8b72;
    /* --sur-vert OUBLIE ici jusqu'au 2026-08-25, alors que les deux blocs
       [data-theme] le definissaient. Consequence : pour un visiteur dont le
       SYSTEME est en mode sombre et qui n'a jamais touche au selecteur de
       theme, --sur-vert restait #fff (valeur de :root) et se posait sur le
       vert menthe --vert:#4fc39d. Soit 2,2:1 : le texte de tous les boutons
       verts du site etait invisible. Avec #06231b : 7,6:1. */
    --sur-vert:#06231b;
    --ombre-douce:0 2px 8px rgba(0,0,0,.3);
    --ombre-forte:0 26px 60px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --encre:#e8eceb; --fond:#101614; --fond-alt:#151d1b; --carte:#18211f; --trait:#2a3633;
  --texte:#e8eceb; --doux:#9fb0ab; --pale:#7d8d88;
  --vert:#4fc39d; --vert-clair:#10281f;
  --or:#e0aa4a; --or-clair:#2b2008; --or-fonce:#eac57e;
  --rouge:#ff8b72; --sur-vert:#06231b;
  --ombre-douce:0 2px 8px rgba(0,0,0,.3);
  --ombre-forte:0 26px 60px -22px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --encre:#12211f; --fond:#fdfcf9; --fond-alt:#f4f1e8; --carte:#fff; --trait:#e6e2d8;
  --texte:#1c2b28; --doux:#5b6b66; --pale:#616e68;
  --vert:#0f5c48; --vert-clair:#e6f2ee;
  --or:#b8801f; --or-clair:#fdf4e3; --or-fonce:#7d550d;
  --rouge:#a8341f; --sur-vert:#fff;
  --ombre-douce:0 2px 8px rgba(10,40,33,.05);
  --ombre-forte:0 26px 60px -22px rgba(10,40,33,.34);
}

/* ==================================================================
   BANDEAUX SOMBRES
   Le verre depoli et les halos sont un langage d'interface SOMBRE :
   sur un fond creme, un panneau translucide blanc est invisible.
   Cette classe redefinit LOCALEMENT les variables de palette — tous
   les composants existants (cartes, boutons, champs, <details>) s'y
   adaptent seuls, sans etre reecrits.
   Elle reste sombre dans les DEUX themes, volontairement.
   ================================================================== */
.sombre{
  --fond:#0a1110; --fond-alt:#0a1110; --carte:#141d1b;
  --trait:rgba(255,255,255,.10);      /* l'equivalent de border-white/10 */
  --texte:#eef3f1; --doux:#a9bcb6; --pale:#8a9d97;
  --vert:#4fc39d; --vert-clair:rgba(79,195,157,.12); --sur-vert:#06231b;
  --or:#e0aa4a; --or-clair:rgba(224,170,74,.13); --or-fonce:#efc884;
  --chassis:#26332f;
  --ombre-douce:0 2px 10px rgba(0,0,0,.4);
  --ombre-forte:0 34px 70px -28px rgba(0,0,0,.85);
  /* Halos en HSL, comme demande dans le cahier des charges. */
  --halo-vert:hsl(163 72% 45% / .30);
  --halo-or:hsl(38 78% 55% / .20);
  background:var(--fond);color:var(--texte);
}
/* Panneau de verre reutilisable. Le liseré interne clair est ce qui donne
   l'impression d'epaisseur : sans lui, le verre parait plat. */
.verre{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.10);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.zone{max-width:1060px;margin:0 auto;padding:0 22px}
img{max-width:100%}

/* -------- barre -------- */
.barre{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--fond) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--trait);
}
.barre .zone{display:flex;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px}
.logo{font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--texte);text-decoration:none;white-space:nowrap}
.logo span{color:var(--vert)}
.barre nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.barre nav a{color:var(--doux);text-decoration:none;font-size:14.5px;padding:8px 11px;border-radius:8px;white-space:nowrap}
.barre nav a:hover{background:var(--vert-clair);color:var(--vert)}
.theme{background:none;border:1px solid var(--trait);color:var(--doux);
  border-radius:8px;padding:8px 11px;cursor:pointer;font-size:14px;font-family:inherit;font-weight:600}
.theme:hover{border-color:var(--vert);color:var(--vert)}

/* Selecteur de langue : trois liens colles, un seul cadre.
   Un cadre par langue prendrait trois fois la place, et l'entete n'en a
   deja pas de reste sur un telephone de 390 px. */
.groupe-langue{display:inline-flex;border:1px solid var(--trait);border-radius:8px;overflow:hidden}
/* --doux et non --pale : mesure le 2026-08-18 avec axe-core, --pale sur
   --fond donne 2,89:1 la ou WCAG AA en exige 4,5. --doux donne 5,47:1.
   C'est une faute que j'ai introduite la veille en posant ce selecteur. */
.groupe-langue .lang{border:none;border-radius:0;padding:8px 9px;text-decoration:none;
  font-size:13px;font-weight:600;color:var(--doux);line-height:1}
.groupe-langue .lang + .lang{border-left:1px solid var(--trait)}
.groupe-langue .lang:hover{color:var(--vert);background:var(--vert-clair)}
/* La langue affichee doit se distinguer SANS couleur seule : le fond ET
   la graisse changent, pour rester lisible en cas de daltonisme. */
.groupe-langue .lang-actif{color:var(--texte);background:var(--fond-alt);font-weight:800}

/* -------- porte d'entree legere, sous les tarifs -------- */
.appel-direct{
  margin:28px auto 0;max-width:620px;text-align:center;
  padding:26px 22px;border:1px solid var(--trait);border-radius:var(--rayon);
  background:var(--fond-alt);
}
.appel-titre{font-weight:800;font-size:19px;color:var(--texte);margin:0 0 8px}
.appel-texte{color:var(--doux);margin:0 0 18px;line-height:1.6}

/* -------- vignette de realisation entierement cliquable -------- */
/* Constate le 2026-08-17 sur un vrai telephone : la vignette n'etait PAS
   cliquable. Seul le petit lien « Voir le site en ligne » sous la carte
   l'etait. Or la carte imite une fenetre de navigateur — capture, pastilles,
   badge « En ligne » — et une fenetre de navigateur, ca s'ouvre. Le
   visiteur touche l'image, rien ne se passe, et il en conclut que le site
   montre n'est peut-etre pas vraiment en ligne. C'est l'argument le plus
   lourd de la page qui se retourne.

   On etire le lien EXISTANT par-dessus la carte plutot que d'ajouter un
   gestionnaire de clic : le lien reste un vrai lien, donc atteignable au
   clavier, annonce correctement par un lecteur d'ecran, ouvrable dans un
   nouvel onglet — et l'evenement reference-ouverte part sans code en plus.

   UNIQUEMENT sur les appareils sans survol. Sur un ordinateur, la lumiere
   qui suit le curseur sur l'image continue de fonctionner : une surface
   transparente par-dessus l'intercepterait. Le clic y reste possible par
   le lien visible, qui, lui, se survole. */
@media (hover: none) and (pointer: coarse){
  .travail{position:relative}
  .travail .voir::after{content:'';position:absolute;inset:0;z-index:2}
}
@media(max-width:860px){.barre nav a.cache{display:none}}

/* Ecrans etroits : l'en-tete DEBORDAIT de 21 px a 390 px de large, et le
   bouton « Theme » etait coupe au bord droit — mesure et vu sur capture le
   2026-08-17. 390 px est la largeur des iPhone 12 a 14 et des Pixel, donc
   la plus courante.
   On RESSERRE au lieu de masquer : cacher « Tarifs » sur telephone
   retirerait le seul acces permanent au prix, sur une page de 12 000 px de
   haut. Aucun element ne disparait, tout devient un peu plus compact. */
@media(max-width:430px){
  .barre .zone{gap:6px;padding-left:12px;padding-right:12px}
  .logo{font-size:14px}
  .barre nav{gap:2px}
  .barre nav a{padding:8px 6px;font-size:13px}
  .theme{padding:8px 7px;font-size:12.5px}
  /* Le selecteur a trois liens prend environ 60 px de plus que l'ancien
     bouton unique. C'est le prix des vraies adresses /en/ et /es/, et il
     se paie ici, pas en cachant un lien de navigation. */
  .groupe-langue .lang{padding:8px 5px;font-size:12px}
}

/* Le resserrage ci-dessus s'arretait a 430 px et ne suffisait plus en
   dessous de 380 : mesure le 2026-08-26, la barre de navigation reclame
   245 px pour 336 disponibles a 360 px de large, et « Theme » etait coupe
   au bord droit. 360 px est la largeur de beaucoup d'Android.

   Le bouton de theme passe donc en pictogramme. C'est le seul element de
   la barre dont le SENS ne depend pas de son libelle : une demi-lune se
   comprend sans le mot, la ou « Tarifs » ou « Contact » ne se devinent
   pas. Il garde son aria-label, donc rien ne change au lecteur d'ecran.

   font-size:0 sur le bouton et non « display:none » sur le texte : le mot
   « Theme » reste dans le document, et reste lu a voix haute. */
@media(max-width:379px){
  .barre .zone{gap:5px;padding-left:10px;padding-right:10px}
  .logo{font-size:13px}
  .barre nav a{padding:8px 5px;font-size:12.5px}
  .groupe-langue .lang{padding:8px 4px;font-size:11.5px}
  /* 40 px de large mesures : quatre de moins que le minimum. */
  button#theme{font-size:0;padding:7px 13px;line-height:1;min-width:48px;
    display:flex;align-items:center;justify-content:center}
  /* line-height:1 et hauteur fixe : sans cela le pictogramme faisait
     grandir la barre collante de 64 a 75 px, soit autant de page en moins
     a chaque ecran. */
  button#theme::before{content:"\25D0";font-size:15px;line-height:1;display:block;height:16px}
}

/* Toutes les cibles d'ancre du site : #tarifs, #travaux, #questions,
   #final, #inclus, #comment. Sans cette marge, la barre collante recouvre
   le titre vers lequel on vient de sauter. */
:target,
section[id],
[id="haut"]{scroll-margin-top:78px}

/* -------- accroche -------- */
.accroche{
  position:relative;padding:84px 0 76px;
  background:
    radial-gradient(880px 500px at 78% 4%,  var(--halo-or,   color-mix(in srgb,var(--or) 14%,transparent)), transparent 66%),
    radial-gradient(820px 560px at 2% 96%,  var(--halo-vert, color-mix(in srgb,var(--vert) 13%,transparent)), transparent 64%),
    var(--fond);
}
.accroche .zone{display:grid;grid-template-columns:1.03fr .97fr;gap:54px;align-items:center}
/* Titre a mots permutants. Les trois formulations occupent LA MEME cellule
   de grille : la largeur se cale sur la plus longue, donc rien ne bouge
   quand elles s'echangent. Seule la premiere est lue par un lecteur d'ecran
   et par Google — les deux autres sont en aria-hidden. */
.permute{display:inline-grid;font-style:normal}
.permute .mot{
  grid-area:1/1;font-family:var(--titre);font-style:italic;font-weight:400;
  color:var(--vert);letter-spacing:-.01em;
  opacity:0;transform:translateY(.32em);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.9,.3,1);
}
.permute .mot.actif{opacity:1;transform:none}
.badge{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--or-fonce);background:var(--or-clair);padding:7px 15px;border-radius:30px;margin-bottom:22px;
  border:1px solid color-mix(in srgb,var(--or) 28%,transparent);
}
h1{font-size:clamp(32px,5.2vw,54px);line-height:1.06;margin:0 0 20px;letter-spacing:-.03em;font-weight:800}
h1 em{font-family:var(--titre);font-style:italic;font-weight:400;color:var(--vert);letter-spacing:-.01em}
.sous{font-size:clamp(17px,2.2vw,20px);color:var(--doux);max-width:52ch;margin:0 0 30px}
.boutons{display:flex;gap:12px;flex-wrap:wrap}
.bouton{
  display:inline-block;background:var(--vert);color:var(--sur-vert);text-decoration:none;
  font-weight:700;font-size:17px;padding:15px 30px;border-radius:11px;border:none;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--vert) 70%,transparent);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),filter .15s ease,box-shadow .15s ease;
}
.bouton:hover{filter:brightness(1.08);transform:translateY(-2px);
  box-shadow:0 16px 30px -12px color-mix(in srgb,var(--vert) 75%,transparent)}
/* Retour au clic : le scale fonctionne PARTOUT, y compris sur iOS ou la
   vibration est ignoree. C'est lui le vrai retour, la vibration est un bonus. */
.bouton:active{transform:scale(.97)}
.bouton.second{background:transparent;color:var(--texte);border:1.5px solid var(--trait);box-shadow:none}
.bouton.second:hover{border-color:var(--vert);box-shadow:none}
/* Un rayon de lumiere balaye le bouton toutes les 4,5 s. Anime en transform
   et jamais en `left` : seul transform est confie au compositeur, donc seul
   lui reste fluide sur un telephone d'entree de gamme. */
.bouton.brille::after{
  content:"";position:absolute;top:0;left:0;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,hsl(0 0% 100% / .40),transparent);
  animation:balaye 4.5s ease-in-out infinite;
}
@keyframes balaye{
  0%,70%{transform:translateX(-260%) skewX(-18deg)}
  100%  {transform:translateX(460%)  skewX(-18deg)}
}
.rassure{font-size:14.5px;color:var(--pale);margin-top:18px}

/* Modales Légales (Loi 25 & Mentions) */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.ouvert {
  opacity: 1; visibility: visible;
}
.modal-boite {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 18px;
  max-width: 760px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  padding: 34px 30px;
  box-shadow: var(--ombre-forte);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.ouvert .modal-boite {
  transform: translateY(0);
}
.modal-fermer {
  position: absolute; top: 18px; right: 20px;
  background: var(--fond-alt); border: 1px solid var(--trait);
  border-radius: 50%; width: 44px; height: 44px;
  font-size: 20px; cursor: pointer; color: var(--texte);
  display: flex; align-items: center; justify-content: center;
}
.modal-boite h2 { margin-top: 0; font-size: 24px; color: var(--vert); }
.modal-boite h3 { font-size: 17px; margin-top: 20px; color: var(--texte); }
.modal-boite p, .modal-boite li { font-size: 15px; color: var(--doux); line-height: 1.6; }
.modal-boite ul { padding-left: 20px; }
.btn-legal-link {
  background: none; border: none; font: inherit; color: var(--vert);
  text-decoration: underline; cursor: pointer; font-weight: 600;
  /* 24 px de haut mesures, et deux de ces boutons cote a cote dans le
     pied : en visant l'un on ouvrait l'autre. Le remplissage vertical
     agrandit la zone sans deplacer le texte. */
  padding: 11px 4px; display: inline-block; line-height: 1.2;
}
.btn-legal-link:hover { color: var(--or-fonce); }

/* -------- cadre de navigateur (heros et realisations) -------- */
.cadre{
  position:relative;border-radius:15px;overflow:hidden;background:var(--carte);
  border:1px solid var(--trait);box-shadow:var(--ombre-forte);
}
/* Lueur qui suit le curseur SUR LA BORDURE. Le masque ne laisse peindre que
   l'anneau de 1 px : sans lui, ce serait un voile vert sur toute la carte.
   Encadre dans @supports pour que, faute de masque, l'effet n'existe pas du
   tout — plutot que d'exister en moche. */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .spot::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    padding:1.5px;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
               hsl(163 82% 64% / .95), hsl(38 82% 62% / .35) 42%, transparent 68%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .35s ease;z-index:3;
  }
  .spot.actif::after,.actif .spot::after{opacity:1}
}
/* Pastille « En ligne » pulsante dans la barre d'adresse. Pas d'emoji : le
   rendu du rond vert varie trop d'un appareil a l'autre. */
.live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:800;color:var(--vert);white-space:nowrap;flex:none;letter-spacing:.02em}
.live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pouls 2.2s ease-out infinite}
@keyframes pouls{
  0%  {box-shadow:0 0 0 0 hsl(163 75% 58% / .65)}
  70% {box-shadow:0 0 0 8px hsl(163 75% 58% / 0)}
  100%{box-shadow:0 0 0 0 hsl(163 75% 58% / 0)}
}
.cadre .haut{
  display:flex;align-items:center;gap:6px;padding:10px 13px;
  background:color-mix(in srgb,var(--trait) 42%,var(--carte));
  border-bottom:1px solid var(--trait);
}
.cadre .pastille{width:10px;height:10px;border-radius:50%;background:var(--pale);opacity:.5;flex:none}
.cadre .url{
  margin-left:9px;flex:1;min-width:0;font-size:12.5px;color:var(--pale);
  background:var(--fond);border-radius:6px;padding:4px 11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cadre img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--fond-alt)}
/* Les vues empilees du cadre de la heros : toutes au meme endroit, une seule
   visible a la fois. La boite garde ses proportions meme si les images ne
   sont pas encore chargees, donc rien ne saute a l'affichage. */
.ecran{position:relative;aspect-ratio:16/10;background:var(--fond-alt);overflow:hidden}
.ecran-tel{position:relative;aspect-ratio:9/17;border-radius:12px;overflow:hidden;background:var(--fond-alt)}
.ecran .vue,.ecran-tel .vue{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;
}
.ecran .vue.actif,.ecran-tel .vue.actif{opacity:1}

/* DEUX couches, et c'est indispensable : le flottement continu et
   l'inclinaison au curseur ecrivent tous les deux dans `transform`. Sur un
   seul element, le dernier ecraserait l'autre. */
.visuel{position:relative;animation:flotte 7s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.incline{position:relative;transform-style:preserve-3d;will-change:transform}
/* Halo reactif derriere le cadre : il suit le curseur via --mx / --my. */
.incline::before{
  content:"";position:absolute;inset:-14%;z-index:-1;pointer-events:none;
  border-radius:50%;filter:blur(46px);
  background:radial-gradient(closest-side circle at var(--mx,50%) var(--my,50%),
             hsl(163 78% 52% / .55), hsl(38 80% 58% / .28) 55%, transparent 78%);
  opacity:0;transition:opacity .45s ease;
}
.incline.actif::before{opacity:1}
.tel{
  position:absolute;left:-16px;bottom:-30px;width:112px;
  border:5px solid var(--chassis);border-radius:18px;background:var(--chassis);
  box-shadow:0 18px 38px -14px rgba(0,0,0,.5);
}
.tel img{display:block;width:100%;aspect-ratio:9/17;object-fit:cover;border-radius:12px}
.legende{margin:34px 0 0;font-size:13.5px;color:var(--pale);text-align:center}

/* -------- sections -------- */
section{padding:68px 0}
.alt{background:var(--fond-alt)}
h2{font-family:var(--titre);font-size:clamp(26px,4.2vw,38px);margin:0 0 12px;
   letter-spacing:-.015em;font-weight:700;line-height:1.18}
.intro{color:var(--doux);font-size:17.5px;margin:0 0 36px;max-width:62ch}
h3{font-size:19px;margin:0 0 9px;font-weight:700}

/* -------- realisations : carrousel -------- */
/* Construit sur scroll-snap plutot que sur des transformations en JS :
   le glissement du doigt, le defilement a la molette et le clavier
   fonctionnent alors NATIVEMENT, sans une ligne de code. Le JS ne fait
   qu'avancer tout seul et tenir les points a jour. */
.carrousel{position:relative}
.piste{
  position:relative;display:flex;gap:26px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Un conteneur qui defile rogne ce qui depasse : ce retrait laisse la
     place aux ombres portees et aux halos, sinon ils seraient coupes net. */
  padding:18px 0 24px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.piste::-webkit-scrollbar{display:none}
.diapo{flex:0 0 100%;scroll-snap-align:center;min-width:0}
@media(min-width:900px){
  /* Les voisines restent visibles mais s'effacent : on voit qu'il y a une
     suite, sans que l'oeil hesite sur laquelle regarder. */
  .diapo{flex:0 0 72%;opacity:.38;transform:scale(.94);
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.9,.3,1)}
  .diapo.au-centre{opacity:1;transform:none}
}
.fleche{
  position:absolute;top:36%;z-index:5;width:48px;height:48px;border-radius:50%;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  background:color-mix(in srgb,var(--carte) 86%,transparent);
  border:1px solid var(--trait);color:var(--texte);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7);
  transition:transform .15s ease,border-color .15s ease;
}
.fleche:hover{border-color:var(--vert);transform:scale(1.09)}
.fleche svg{width:19px;height:19px}
.fleche.g{left:-10px}
.fleche.d{right:-10px}
@media(min-width:900px){.fleche{display:flex}}
.points{display:flex;gap:10px;justify-content:center;margin-top:24px}
.point{
  position:relative;width:36px;height:5px;border-radius:3px;border:0;padding:0;cursor:pointer;
  background:color-mix(in srgb,var(--trait) 95%,transparent);
  transition:background .35s ease,box-shadow .35s ease;
}
/* Barre fine a l'oeil, mais zone tactile de 44 px : exigence du Playbook. */
.point::after{content:"";position:absolute;inset:-20px -5px}
.point.actif{background:var(--vert);box-shadow:0 0 12px hsl(163 78% 60% / .85)}

.travail .meta{margin-top:20px}
.travail .meta h3{margin:0 0 3px}
.travail .lieu{color:var(--pale);font-size:14.5px;margin:0 0 12px}
.voir{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15.5px;
  /* 10 px et non 8 : la boite mesurait 42 px de haut, deux de moins que le
     minimum. Sur telephone toute la vignette est deja cliquable, mais la
     boite elle-meme doit tenir le seuil sans dependre de cette astuce. */
  text-decoration:none;color:var(--vert);padding:10px 0;
}
.voir svg{width:15px;height:15px;flex:none;transition:transform .15s ease}
.voir:hover svg{transform:translate(2px,-2px)}

/* -------- objections -------- */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.bloc{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:28px;box-shadow:var(--ombre-douce)}
.bloc .dit{font-size:16px;color:var(--doux);font-style:italic;margin:0 0 14px;padding-left:14px;border-left:3px solid var(--or)}
.bloc p:last-child{margin:0;font-size:16px}

/* -------- etapes -------- */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:e}
.etape{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:26px;counter-increment:e;box-shadow:var(--ombre-douce)}
.etape::before{
  content:counter(e);display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--vert);color:#fff;
  font-weight:800;font-size:16px;margin-bottom:15px;
}
.etape p{margin:0;font-size:15.5px;color:var(--doux)}

/* -------- tarifs -------- */
.promo{
  background:var(--or-clair);border:1px solid color-mix(in srgb,var(--or) 38%,transparent);
  border-radius:var(--rayon);padding:22px 24px;margin:0 0 34px;text-align:center;
}
.promo .titre-promo{display:block;color:var(--or-fonce);font-size:19px}
.promo p{margin:8px 0 0;font-size:15px;color:var(--doux)}
.promo p strong{color:var(--or-fonce)}
/* Compteur de rareté. Point rouge pulsant : c'est le seul rouge de la page,
   donc il attire l'oeil sans avoir besoin d'etre gros. */
.rarete{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:13px;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--or-fonce);
  background:color-mix(in srgb,var(--or) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--or) 40%,transparent);
  padding:7px 15px;border-radius:20px;
}
.rarete strong{font-size:16px;font-variant-numeric:tabular-nums}
.rarete i{width:8px;height:8px;border-radius:50%;background:var(--rouge);flex:none;
  animation:pouls-rare 2.2s ease-out infinite}
@keyframes pouls-rare{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--rouge) 65%,transparent)}
  70% {box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* align-items:stretch (la valeur par defaut) est ce qui donne aux trois
   cartes la MEME hauteur : avec `start`, chacune se contentait de la hauteur
   de son contenu, et la carte phare, plus haute a cause de son ruban,
   depassait les deux autres. */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;align-items:stretch}
.offre{background:var(--carte);border:2px solid var(--trait);border-radius:var(--rayon);
  padding:26px 28px 30px;display:flex;flex-direction:column;box-shadow:var(--ombre-douce)}
/* La carte phare se distingue par sa bordure doree animee et son ruban,
   PAS par sa taille : trois cartes de tailles differentes se lisent comme
   un defaut de mise en page, pas comme une hierarchie. */
.offre.phare{border-color:transparent;position:relative;box-shadow:var(--ombre-forte);z-index:2}
/* Bordure degradee tournante — en ::before, PAS en ::after.
   ::after est deja pris par la lueur qui suit le curseur (.spot), et deux
   effets ne peuvent pas partager le meme pseudo-element : c'est exactement
   ce qui faisait passer le cadre PAR-DESSUS le ruban « Le plus choisi ».
   @property est ce qui rend un angle animable ; sans lui, le degrade reste,
   simplement fixe. Degradation propre. */
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .offre.phare::before{
    content:"";position:absolute;inset:-2px;border-radius:calc(var(--rayon) + 2px);
    pointer-events:none;padding:2px;z-index:0;
    background:conic-gradient(from var(--angle),
      hsl(38 82% 55%), hsl(163 62% 48%), hsl(38 90% 66%), hsl(38 82% 55%));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:tourne 8s linear infinite;
  }
}
@keyframes tourne{to{--angle:360deg}}

/* Mouvement au survol des cartes de prix.
   Sous (hover:hover) uniquement : sur un ecran tactile, :hover reste colle
   apres que le doigt est parti et l'effet ne se defait plus jamais. */
@media (hover:hover) and (pointer:fine){
  .offre{transition:transform .32s cubic-bezier(.22,.9,.3,1),box-shadow .32s ease,border-color .32s ease}
  .offre:hover{transform:translateY(-10px);box-shadow:0 32px 64px -26px rgba(0,0,0,.4)}
  .offre:not(.phare):hover{border-color:color-mix(in srgb,var(--vert) 50%,var(--trait))}
  .prix .n{display:inline-block;transition:transform .32s cubic-bezier(.22,.9,.3,1)}
  .offre:hover .prix .n{transform:scale(1.07)}
}
/* Ruban DANS la carte, plus a cheval sur son bord. A cheval, il se faisait
   traverser par la bordure animee et il debordait sur la carte voisine. */
.ruban{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:var(--or);color:#2a1e06;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:20px;white-space:nowrap;margin-bottom:15px;
  position:relative;z-index:2;
}
.ruban::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#2a1e06;flex:none;
}
/* Ruban invisible sur les deux autres cartes : il reserve exactement la meme
   hauteur, donc les trois mots LIBERTE / PROPRIETE / EQUILIBRE s'alignent au
   pixel. Sans lui, la carte phare decalerait tout son contenu vers le bas. */
.ruban.vide{visibility:hidden}
@media(max-width:767px){.ruban.vide{display:none}}
.offre .nom{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin-bottom:6px}
.offre .engage{font-size:14.5px;color:var(--pale);margin-bottom:18px}
.prix{display:flex;align-items:baseline;gap:5px;margin-bottom:4px}
.prix .n{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.prix .u{font-size:16px;color:var(--doux)}
.prix-bis{font-size:14.5px;color:var(--pale);margin-bottom:14px}

/* ------------------------------------------------------------------
   Selecteur de devise ($ CAD / EUR)

   Deux vrais <button> et non des onglets factices : le clavier, le
   lecteur d'ecran et le bouton « precedent » du navigateur fonctionnent
   sans une ligne de JavaScript en plus.
   ------------------------------------------------------------------ */
/* display:flex + width:fit-content, et NON inline-flex : « margin:auto » ne
   centre pas un element inline. Verifie plutot que suppose. */
.devise-choix{
  display:flex;width:fit-content;gap:4px;margin:0 auto 26px;padding:4px;
  background:var(--fond-alt);border:1px solid var(--trait);border-radius:11px;
}
.devise-btn{
  font:inherit;font-size:14.5px;font-weight:700;color:var(--doux);
  background:transparent;border:0;border-radius:8px;padding:8px 18px;
  cursor:pointer;transition:background .18s,color .18s;
}
.devise-btn:hover{color:var(--texte)}
.devise-btn.actif{background:var(--carte);color:var(--vert);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.devise-btn:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.promo-ligne{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:var(--or-fonce);
  background:var(--or-clair);border-radius:9px;padding:7px 12px;margin-bottom:20px;
  border:1px solid color-mix(in srgb,var(--or) 32%,transparent);
}
/* La remise doit se lire AVANT le montant : « −50 % » se comprend en un coup
   d'oeil, « 119,50 $ » demande de le comparer au prix du dessus. */
.remise{
  background:var(--or);color:#2a1e06;font-size:13px;font-weight:800;
  padding:3px 9px;border-radius:6px;white-space:nowrap;letter-spacing:.01em;
}
.barre-prix{text-decoration:line-through;color:var(--pale);font-weight:600}
.remise.gros{font-size:17px;padding:5px 12px;border-radius:8px;margin-right:9px;vertical-align:2px}
.offre ul{list-style:none;padding:0;margin:0 0 24px;font-size:15.5px}
.offre li{padding:7px 0 7px 26px;position:relative;color:var(--doux)}
.offre li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:800}
.offre li.non::before{content:"—";color:var(--pale)}
.offre .bouton{margin-top:auto;text-align:center;font-size:16px;padding:14px 22px}

/* ------------------------------------------------------------------
   QUATRE BLOCS HIERARCHISES — ajoutes le 2026-08-25

   La section « Tarifs » ne presentait qu'une seule chose a vendre : le
   site. Elle en presente maintenant quatre, et un client qui lit du haut
   vers le bas doit comprendre SANS EFFORT lequel vient avant l'autre.
   D'ou le numero : ce n'est pas une decoration, c'est ce qui empeche de
   lire les quatre blocs comme quatre offres concurrentes.

   Aucune couleur nouvelle : tout sort des variables deja definies, donc
   les deux themes suivent sans une ligne de plus.
   ------------------------------------------------------------------ */
.bloc{margin-top:56px}
.bloc:first-of-type{margin-top:34px}
.bloc-tete{display:flex;gap:15px;align-items:flex-start;margin-bottom:22px}
.bloc-rang{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--vert);color:var(--sur-vert);
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--vert) 70%,transparent);
}
.bloc-tete h3{margin:0 0 4px;font-size:25px;line-height:1.2}
.bloc-tete p{margin:0;font-size:15.5px;color:var(--doux);max-width:60ch}

/* Blocs 3 et 4 : une seule offre chacun, donc une carte large et non une
   grille. Le fond vert tres clair les distingue des cartes d'abonnement
   sans reprendre le dore, reserve au « sur devis ». */
.plus{
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
  background:var(--vert-clair);border:1px solid color-mix(in srgb,var(--vert) 22%,transparent);
  border-radius:var(--rayon);padding:26px 28px;
}
.plus svg{flex:none;width:26px;height:26px;color:var(--vert);margin-top:4px}
.plus .txt{flex:1;min-width:250px}
.plus h4{margin:0 0 7px;font-size:19px;line-height:1.3}
.plus p{margin:0 0 18px;font-size:15.5px;color:var(--doux)}
.plus .bouton{font-size:16px;padding:13px 24px}
/* Signature du fournisseur. Volontairement discrete : elle rassure celui
   qui la cherche, elle ne doit pas concurrencer le titre de l'offre. */
.marque{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--vert);
  background:color-mix(in srgb,var(--vert) 12%,transparent);
  border-radius:20px;padding:4px 11px;margin-bottom:10px;
}
/* Ligne de pied d'une carte d'offre (« Carte realisee par Un Jour Un Site »).
   margin-top:auto la colle en bas quelle que soit la hauteur de la carte. */
.offre .mention{
  margin-top:auto;padding-top:14px;font-size:13px;color:var(--pale);
  border-top:1px solid var(--trait);
}
/* Un bouton qui suit une mention ne doit plus etre pousse en bas par
   `margin-top:auto` : la mention occupe deja ce role. */
.offre .mention + .bouton{margin-top:14px}
.offre .frais{font-size:14px;color:var(--doux);margin:-8px 0 14px}
@media(max-width:600px){
  .bloc-tete h3{font-size:21px}
  .plus{padding:22px 20px}
}

.detail{overflow-x:auto;margin-top:30px;border:1px solid var(--trait);
  border-radius:var(--rayon);background:var(--carte);box-shadow:var(--ombre-douce)}
/* min-width abaisse de 540 a 440 px le 2026-08-25 : le tableau ne compte
   plus que 4 colonnes (la colonne « Pour devenir proprietaire » est passee
   dans la FAQ). Garder 540 px aurait conserve un defilement lateral que
   plus rien ne justifie sur telephone. */
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:440px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--trait)}
th{background:color-mix(in srgb,var(--trait) 35%,transparent);font-size:13px;
   text-transform:uppercase;letter-spacing:.05em;color:var(--doux);font-weight:700}
tr:last-child td{border-bottom:none}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

/* -------- inclus -------- */
.inclus{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.item{display:flex;gap:12px;align-items:flex-start;background:var(--carte);
  border:1px solid var(--trait);border-radius:11px;padding:16px 18px;font-size:15.5px;
  box-shadow:var(--ombre-douce)}
.item svg{flex:none;width:21px;height:21px;color:var(--vert);margin-top:2px}

/* Option payante : deliberement dessinee autrement que les elements compris,
   pour qu'on ne puisse pas la confondre avec eux. */
.option{
  margin-top:26px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  background:var(--or-clair);border:1px dashed color-mix(in srgb,var(--or) 45%,transparent);
  border-radius:var(--rayon);padding:24px 26px;
}
.option svg{flex:none;width:24px;height:24px;color:var(--or-fonce);margin-top:3px}
.option .txt{flex:1;min-width:230px}
.option h3{margin:0 0 5px;font-size:17.5px}
.option p{margin:0;font-size:15.5px;color:var(--doux)}
.devis{
  flex:none;align-self:center;background:var(--or);color:#2a1e06;
  font-weight:800;font-size:13.5px;padding:8px 15px;border-radius:20px;white-space:nowrap;
}

/* -------- questions -------- */
details{background:var(--carte);border:1px solid var(--trait);border-radius:11px;
  margin-bottom:10px;overflow:hidden;box-shadow:var(--ombre-douce)}
summary{padding:17px 20px;cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--vert);font-size:22px;font-weight:400;flex:none}
details[open] summary::after{content:"–"}
details p{margin:0;padding:0 20px 19px;color:var(--doux);font-size:16px}

/* ==================================================================
   DEPLIANT DES OPTIONS DE LA CARTE NUMERIQUE
   ==================================================================
   Une LISTE et non un tableau, malgre les trois colonnes du cahier des
   charges. Un tableau « Option / Description / Prix » demande environ
   440 px pour rester lisible ; l'ecran le plus etroit du site en offre
   296. Il aurait donc fallu le faire defiler lateralement — c'est-a-dire
   cacher les prix hors de l'ecran, dans le bloc qui sert justement a les
   montrer. La liste dit la meme chose et tient dans la largeur.

   Le nom et le prix sur la meme ligne, la description en dessous : c'est
   l'ordre dans lequel on lit une option qu'on hesite a prendre.
   ================================================================== */
.options-corps{padding:0 20px 20px}
.options-titre{
  font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--doux);
  margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--trait);
}
.options-corps > .options-titre:first-child{margin-top:4px;padding-top:0;border-top:none}
.options-liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.options-liste li{
  background:var(--fond-alt);border:1px solid var(--trait);
  border-radius:11px;padding:14px 16px;
}
/* flex-wrap : sur un ecran etroit le prix passe sous le nom au lieu de
   le comprimer. Un prix a demi coupe ne rassure personne. */
.opt-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.opt-tete strong{font-size:16px;color:var(--texte);font-weight:700}
.opt-prix{
  font-size:15px;font-weight:800;color:var(--vert);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.options-liste p{margin:6px 0 0;padding:0;font-size:15px;color:var(--doux);line-height:1.55}
/* Les options « bientot » ne se commandent pas : pas de prix, et un cadre
   pointille pour qu'on ne les confonde pas avec ce qui est disponible. */
.options-liste li.bientot{background:transparent;border-style:dashed}
.options-liste li.bientot strong{color:var(--doux)}
.options-pied{
  margin:18px 0 0;padding:0;font-size:14px;color:var(--pale);line-height:1.55;
}
@media(max-width:430px){
  .options-corps{padding:0 15px 17px}
  .options-liste li{padding:13px 14px}
  .opt-tete strong{font-size:15.5px}
}

/* -------- appel final -------- */
#final{
  background:
    radial-gradient(760px 460px at 50% -4%, var(--halo-vert,color-mix(in srgb,var(--vert) 12%,transparent)), transparent 68%),
    radial-gradient(620px 400px at 92% 100%, var(--halo-or,transparent), transparent 62%),
    var(--fond);
}
.final{background:var(--carte);border:2px solid var(--vert);border-radius:20px;
  padding:46px 34px;text-align:center;box-shadow:var(--ombre-forte)}

/* -------- formulaire en 3 etapes -------- */
/* Jauge neon. Les trois segments restent — ils disent « 3 etapes » — mais le
   remplissage devient un scaleX progressif, pas un changement de couleur brut. */
/* Bandeau de reprise : « on a retrouve vos reponses ».
   Jamais de restauration silencieuse — la personne doit voir que ses
   anciennes reponses sont revenues, et pouvoir les effacer d'un clic. */
.reprise{
  display:none;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 22px;padding:12px 15px;border-radius:11px;
  background:var(--vert-clair);border:1px solid var(--trait);
  font-size:.93rem;line-height:1.45
}
.reprise.on{display:flex}
.reprise b{color:var(--vert)}
.reprise button{
  margin-left:auto;padding:7px 13px;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--doux);
  border:1px solid var(--chassis);font:inherit;font-size:.86rem
}
.reprise button:hover{color:var(--texte);border-color:var(--doux)}

.jauge-etapes{display:flex;gap:8px;max-width:520px;margin:0 auto 30px}
.jauge-etapes div{
  flex:1;height:6px;border-radius:4px;position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--trait) 90%,transparent);
}
.jauge-etapes div::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,hsl(163 55% 40%),hsl(163 78% 60%));
  box-shadow:0 0 14px hsl(163 78% 60% / .85),0 0 4px hsl(163 78% 60% / .9);
  transition:transform .55s cubic-bezier(.3,.9,.3,1);
}
.jauge-etapes div.faite::after{transform:scaleX(1)}

.pas{display:none;text-align:left}
/* Transition glissee entre etapes. Le basculement display est conserve :
   c'est lui qui garantit qu'on ne voit JAMAIS deux etapes a la fois. */
.pas.actif{display:block;animation:glisse-d .42s cubic-bezier(.22,.9,.3,1) both}
form[data-sens="arriere"] .pas.actif{animation-name:glisse-g}
@keyframes glisse-d{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes glisse-g{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.pas h3{font-size:20px;margin:0 0 6px}
.pas .quoi{color:var(--doux);font-size:15.5px;margin:0 0 22px}
.q{margin-bottom:18px}
.q label{display:block;font-weight:650;font-size:15.5px;margin-bottom:6px}
.q .aide{display:block;font-weight:400;color:var(--pale);font-size:14px;margin-top:2px}
.q input,.q textarea,.q select{
  width:100%;padding:13px 15px;font-size:16px;font-family:inherit;
  border:1.5px solid var(--trait);border-radius:10px;background:var(--fond);color:var(--texte);
}
.q textarea{min-height:88px;resize:vertical}
.q input:focus,.q textarea:focus,.q select:focus{
  outline:2px solid var(--vert);outline-offset:1px;border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vert) 18%,transparent);
}
/* Retour instantane, mais SEULEMENT apres que le visiteur a touche le champ :
   :user-valid et :user-invalid ne s'appliquent pas a un formulaire vierge.
   Un formulaire qui s'affiche en rouge avant qu'on ait tape quoi que ce soit
   est une faute d'accueil. */
.q input:user-valid,.q textarea:user-valid{
  border-color:color-mix(in srgb,var(--vert) 62%,var(--trait));
}
.q input:user-invalid,.q textarea:user-invalid{border-color:var(--rouge)}
.q .duo2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.q .duo2{grid-template-columns:1fr}}
.choix{display:flex;flex-wrap:wrap;gap:9px}
.choix label{
  display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:15px;
  border:1.5px solid var(--trait);border-radius:9px;padding:11px 14px;cursor:pointer;margin:0;
}
.choix label:hover{border-color:var(--vert)}
.choix input{width:auto;padding:0;margin:0}
/* La case cochee doit se voir d'un coup d'oeil : sans ce retour, on ne sait
   plus ce qu'on a selectionne dans une liste de quatorze propositions. */
.choix label:has(input:checked){
  border-color:var(--vert);
  background:color-mix(in srgb,var(--vert) 12%,transparent);
  font-weight:650;
}
/* Pastilles de couleur : le rond montre la teinte, le mot la nomme. */
.choix label.coul i{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:1px solid color-mix(in srgb,var(--texte) 25%,transparent);
}
/* Les statuts CIRA ont des libelles longs : une colonne se lit mieux qu'une
   grille, et surtout ne coupe pas les mots sur un ecran de telephone. */
.choix.colonne{flex-direction:column;gap:8px}
.choix.colonne label{width:100%;align-items:flex-start;line-height:1.45}
/* Variante discrete de <details> pour le formulaire : les cartes de la FAQ
   sont trop imposantes au milieu d'une suite de champs. */
.q details{background:transparent;border:0;margin:12px 0 0;box-shadow:none}
.q details summary{padding:0;font-size:14.5px;font-weight:600;color:var(--vert);justify-content:flex-start;gap:7px}
.q details summary::after{font-size:18px}
.q details ul{margin:12px 0 0;padding-left:20px;color:var(--doux);font-size:14.5px;line-height:1.65}
/* Jauge de precision du questionnaire */
.dj{
  margin-top:26px;padding:18px 20px;border-radius:12px;text-align:left;
  background:color-mix(in srgb,var(--vert) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--vert) 26%,transparent);
}
.dj-tete{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14.5px;color:var(--doux);margin-bottom:10px}
.dj-tete strong{color:var(--vert)}
.dj-pc{font-weight:800;font-size:16px;color:var(--vert);font-variant-numeric:tabular-nums;flex:none}
.dj-piste{height:7px;border-radius:4px;overflow:hidden;
  background:color-mix(in srgb,var(--trait) 90%,transparent)}
.dj-rempli{
  height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,hsl(163 55% 40%),hsl(163 78% 60%));
  box-shadow:0 0 12px hsl(163 78% 60% / .8);
  transition:width .5s cubic-bezier(.3,.9,.3,1);
}
.dj-aide{margin:11px 0 0;font-size:14px;color:var(--pale);line-height:1.55}
@media(prefers-reduced-motion:reduce){.dj-rempli{transition:none}}

/* Champ piege anti-robot. Sorti de l'ecran plutot que masque en
   display:none : certains robots detectent display:none et evitent le champ,
   ce qui rendrait le piege inutile. */
.piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Ecran de confirmation apres envoi reussi */
.confirmation{display:none;text-align:center;padding:14px 0 4px}
.confirmation .coche{
  width:66px;height:66px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--vert) 16%,transparent);
  border:2px solid var(--vert);color:var(--vert);
  animation:apparait-coche .55s cubic-bezier(.2,1.2,.4,1) both;
}
.confirmation .coche svg{width:32px;height:32px}
@keyframes apparait-coche{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.confirmation h3{font-family:var(--titre);font-size:27px;margin:0 0 12px;font-weight:700}
.confirmation p{color:var(--doux);font-size:16.5px;margin:0 auto 12px;max-width:46ch}
.confirmation .et-photos{color:var(--texte);font-weight:600;margin-top:22px}
@media(prefers-reduced-motion:reduce){.confirmation .coche{animation:none}}

.nav-pas{display:flex;gap:10px;justify-content:space-between;margin-top:26px}
.oblig{color:var(--rouge)}
.recap{
  background:var(--vert-clair);border-radius:11px;padding:18px 20px;margin-top:18px;
  font-size:15px;white-space:pre-wrap;display:none;text-align:left;
  max-height:260px;overflow:auto;
}

/* -------- barre d'action collante, telephone uniquement -------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:color-mix(in srgb,var(--fond) 94%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--trait);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
}
.barre-mobile.on{display:block}
.barre-mobile .bouton{display:block;width:100%;text-align:center}
@media(min-width:761px){.barre-mobile,.barre-mobile.on{display:none}}

footer{padding:46px 0 66px;border-top:1px solid var(--trait);color:var(--pale);font-size:14.5px;background:var(--fond)}
footer a{color:var(--doux)}
footer .legal{margin-top:18px;font-size:13px;line-height:1.6}
a{color:var(--vert)}

/* -------- apparition au defilement -------- */
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rev.vu{opacity:1;transform:none}

@media(max-width:900px){
  .accroche{padding:48px 0 44px;text-align:center}
  .accroche .zone{grid-template-columns:1fr;gap:52px}
  .sous{margin-left:auto;margin-right:auto}
  .boutons{justify-content:center}
  .visuel{max-width:460px;margin:0 auto}
  .tel{left:-10px;width:96px}
}
@media(max-width:640px){
  section{padding:50px 0}
  .prix .n{font-size:40px}
  .final{padding:34px 20px}
  footer{padding-bottom:104px}
}
/* ==================================================================
   GARDE-FOU DE PERFORMANCE ET D'ACCESSIBILITE
   Une animation qu'on ne peut pas couper est un defaut d'accessibilite,
   pas un effet. Tout se desactive ici — y compris les effets pilotes
   par le JS, qui lisent la meme requete media.
   ================================================================== */
@media(prefers-reduced-motion:reduce){
  .visuel,.bouton.brille::after,.live i,.offre.phare::before,.rarete i{animation:none}
  .rev{opacity:1;transform:none;transition:none}
  .pas.actif{animation:none}
  .permute .mot{transition:none}
  .jauge-etapes div::after{transition:none}
  .bouton:hover,.bouton:active{transform:none}
  .incline::before,.spot::after{display:none}
  *{scroll-behavior:auto!important}
}

/* Plan du site, dans le pied — ajoute le 2026-08-19 avec les pages internes.
   Une page sans lien entrant est une page qu'aucun moteur ne decouvre : le
   sitemap la declare, il ne la relie a rien. C'est ce bloc qui la relie. */
.plan-site{display:flex;flex-wrap:wrap;gap:7px 18px;margin:0 0 20px;padding:0 0 18px;
  border-bottom:1px solid var(--trait)}
/* padding vertical : ces liens mesuraient 37 px de haut, et ils sont
   empiles serres dans le pied — la cible d'a cote est a quelques pixels. */
.plan-site a{color:var(--doux);text-decoration:none;font-size:14.5px;
  display:inline-block;padding:6px 2px}
.plan-site a:hover{color:var(--vert);text-decoration:underline;text-underline-offset:3px}