/* =========================================================================
   tunnel.css  ·  guillaumeherbin.fr/accompagnement
   Refonte visuelle du 30/09/2026. Le HTML n'est pas modifié : toutes les
   classes existantes sont reprises telles quelles.

   Sommaire
   00. Palette et variables      05. Preuves et images
   01. Base et typographie       06. Témoignages
   02. Mise en page et blocs     07. Prix, garantie, FAQ
   03. En-tête et CTA collant    08. Capture email et formulaires
   04. Hero                      09. Pied, cookies, apparitions
   ========================================================================= */

/* ============ 00. PALETTE ET VARIABLES ==================================
   Si tes codes couleur actuels diffèrent, ils se changent ici et nulle part
   ailleurs : tout le fichier est construit sur ces variables. */
:root{
  /* jetons des formulaires et pages d'issue, rétablis */
  --vert:#1B6B3A;
  --vert-sur-sombre:#3FA76A;  /* vert lisible sur la nuit : 5,7:1 sur le voile vert */
  --vert-voile:#E8F5ED;
  --rouge:#A3231A;
  --or-pale:#FDF1E4;         /* aplat orange très pâle, fond d'encadré */
  --or-ligne:#F6D7B4;
  --ease:cubic-bezier(.2,.7,.3,1);
  --t:.22s var(--ease);
  /* fonds */
  --papier:#FBFAF8;          /* fond principal, blanc légèrement chaud */
  --papier-doux:#F3F0EA;     /* sections .bloc-doux */
  --sombre:#0C1016;          /* sections sombres, bleu-noir de tes visuels */
  --nuit-haut:#141B25;       /* dégradé haut du hero */
  --carte:#FFFFFF;           /* cartes posées sur le papier */

  /* texte */
  --encre:#12100E;           /* titres et texte principal */
  --encre-doux:#514B43;      /* texte secondaire */
  --encre-clair:#726B63;     /* mentions, légendes : 5,03:1, le minimum AA */
  --papier-sur-sombre:#F7F5F1;
  --doux-sur-sombre:#A7AEB8;

  /* accent : orange de la charte Instagram */
  --or:#FB8000;              /* aplats, traits, boutons */
  --or-fonce:#AB5600;        /* texte orange sur fond clair : 4,55:1 même sur --papier-doux */
  --or-clair:#FF9A33;        /* survol sur fond sombre */
  --or-voile:rgba(251,128,0,.10);
  --bleu-lumiere:rgba(46,104,214,.30);  /* la lumière bleue de tes photos */

  /* traits */
  --filet:rgba(18,16,14,.12);
  --filet-fort:rgba(18,16,14,.22);
  --filet-sombre:rgba(245,242,236,.16);

  /* ombres */
  --ombre-1:0 1px 2px rgba(18,16,14,.04), 0 8px 24px rgba(18,16,14,.06);
  --ombre-2:0 2px 6px rgba(18,16,14,.06), 0 18px 46px rgba(18,16,14,.10);

  /* mesures */
  --lire:min(100% - 40px, 720px);
  --large:min(100% - 40px, 1180px);
  --rythme:clamp(30px, 3.2vw, 46px);  /* resserré le 05/10 (était 56 à 120 px) */
  --rayon:3px;

  --police:"Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme:light;
}

@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============ 01. BASE ET TYPOGRAPHIE =================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--police);
  font-weight:400;
  font-size:clamp(16.5px, .35vw + 15.5px, 18.5px);
  line-height:1.65;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{
  margin:0 0 .5em;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{font-size:clamp(32px, 4.6vw, 58px);letter-spacing:-.025em}
h2{font-size:clamp(25px, 2.9vw, 38px)}
h3{font-size:clamp(18.5px, 1.2vw + 15px, 22px);letter-spacing:-.012em}

p{margin:0 0 1.15em;max-width:66ch}
p:last-child{margin-bottom:0}
b,strong{font-weight:600}
a{color:var(--encre);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--or-fonce)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--or);color:#14100B}

:focus-visible{outline:2px solid var(--or-fonce);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--encre);color:var(--papier);padding:12px 18px;
}
.skip:focus{left:12px;top:12px}

/* petites mentions sous les boutons */
.micro{
  font-size:14.5px;line-height:1.45;color:var(--encre-clair);
  margin:12px 0 0;max-width:46ch;
}
.micro b{color:var(--encre-doux)}

/* phrase de bascule en fin de bloc */
.pointe{
  font-size:clamp(19px, 1.2vw + 15px, 24px);
  font-weight:600;line-height:1.35;letter-spacing:-.015em;
  margin-top:1.1em;padding-left:18px;
  border-left:2px solid var(--or);
  max-width:56ch;
}

/* ============ 02. MISE EN PAGE ET BLOCS ================================ */
.lire{width:var(--lire);margin-inline:auto}
.large{width:var(--large);margin-inline:auto}

.bloc{padding-block:var(--rythme);position:relative}
.bloc + .bloc{border-top:1px solid transparent}

.bloc-doux{background:var(--papier-doux)}

.bloc-sombre{
  background:var(--sombre);
  color:var(--papier-sur-sombre);
}
.bloc-sombre h2,.bloc-sombre h3{color:var(--papier-sur-sombre)}
.bloc-sombre p{color:var(--doux-sur-sombre)}
.bloc-sombre .pointe{border-left-color:var(--or)}
.bloc-sombre a{color:var(--papier-sur-sombre)}

.secondaire{background:var(--papier-doux);padding-block:clamp(44px,5vw,80px)}

.titre-centre{text-align:center;max-width:22ch;margin-inline:auto}
@media (min-width:760px){.titre-centre{max-width:26ch}}
.chapo-centre{
  text-align:center;color:var(--encre-doux);max-width:60ch;
  margin-inline:auto;margin-bottom:clamp(22px,2.6vw,34px);
}

/* ============ 03. EN-TÊTE ET CTA COLLANT =============================== */
.tete{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--filet);
}
.tete .lire{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:16px;transition:padding .25s ease;
}
.tete-nom{
  font-weight:600;font-size:17px;letter-spacing:-.02em;text-decoration:none;
}
.tete-nom span{color:var(--or)}

/* l'en-tête se compacte au défilement, là où le navigateur le permet */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .tete .lire{
      animation:compacter linear both;
      animation-timeline:scroll();
      animation-range:0 220px;
    }
    @keyframes compacter{to{padding-block:10px}}
  }
}

/* boutons */
.cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;text-align:center;
  background:var(--encre);color:var(--papier);
  font-family:inherit;font-size:16.5px;font-weight:600;letter-spacing:-.005em;
  padding:17px 30px;border:1px solid var(--encre);border-radius:var(--rayon);
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease;
}
.cta::after{
  content:"";position:absolute;inset:0 auto 0 -40%;width:35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .5s ease;
}
.cta:hover{
  background:#1E1A16;color:var(--papier);
  transform:translateY(-2px);box-shadow:var(--ombre-2);
}
.cta:hover::after{left:120%}
.cta:active{transform:translateY(0)}
.bloc-sombre .cta{background:var(--or);border-color:var(--or);color:#14100B}
.bloc-sombre .cta:hover{background:var(--or-clair)}
.cta-bloc{margin-top:clamp(26px,3vw,36px)}

.relance{
  width:var(--lire);margin:clamp(24px,3vw,36px) auto 0;
}

.cta-collant{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:color-mix(in srgb, var(--papier) 94%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--filet-fort);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.cta-collant[data-visible="true"]{transform:translateY(0)}
.cta-collant .cta{width:100%;padding-block:15px}
@media (min-width:860px){.cta-collant{display:none}}
body[data-barre-basse="actif"] .pied{padding-bottom:clamp(90px,12vw,110px)}
@media (min-width:860px){body[data-barre-basse="actif"] .pied{padding-bottom:44px}}

/* ============ 04. HERO ================================================= */
.accroche{
  padding-block:clamp(32px,4vw,60px) clamp(36px,4.4vw,64px);
  overflow:hidden;
}
/* halo doré lent en fond, pure CSS, aucun fichier à charger */
.accroche::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(900px,120%);aspect-ratio:1/1;
  top:-38%;right:-22%;
  background:radial-gradient(closest-side, var(--or-voile), transparent 72%);
  animation:derive 26s ease-in-out infinite alternate;
}
@keyframes derive{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-6%,7%,0) scale(1.14)}
}
@media (prefers-reduced-motion:reduce){.accroche::before{animation:none}}
.accroche .lire{position:relative;z-index:1}

.accroche h1{margin-bottom:.55em}
/* la seconde phrase du titre, détachée de la première */
.h1-suite{display:block;margin-top:.5em}
.accroche-sous{
  font-size:clamp(17.5px,.6vw + 16px,20.5px);
  color:var(--encre-doux);max-width:58ch;
}
.accroche-preuve{
  margin-top:clamp(28px,3vw,40px);padding-top:18px;
  border-top:1px solid var(--filet);
  font-size:15.5px;color:var(--encre-clair);letter-spacing:.005em;
}

.accroche .media{margin-top:clamp(32px,4vw,52px)}
.accroche .media img{
  width:100%;max-width:520px;border-radius:2px;
  box-shadow:var(--ombre-2);
}
/* à partir du format tablette, le portrait passe à côté du texte */
@media (min-width:1000px){
  .accroche .lire{
    width:var(--large);
    display:grid;grid-template-columns:1.15fr .85fr;
    column-gap:clamp(36px,4vw,72px);row-gap:0;align-items:center;
  }
  .accroche h1,.accroche-sous,.accroche .cta-bloc{grid-column:1}
  /* le portrait s'aligne sur le titre, pas sur le milieu du bloc de texte */
  .accroche .media{grid-column:2;grid-row:1 / span 4;margin-top:0;align-self:start}
  .accroche .media img{max-width:none}
}

/* ============ 05. LISTES, PROFILS, CARTES, PREUVES ====================== */
/* les questions qui s'accumulent */
.interro{
  margin:clamp(24px,3vw,36px) 0;padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px);
  background:var(--carte);border:1px solid var(--filet);border-left:2px solid var(--or);
  border-radius:var(--rayon);box-shadow:var(--ombre-1);
}
.interro p{
  margin:0;padding:9px 0;font-size:17px;color:var(--encre-doux);
  border-bottom:1px solid var(--filet);
}
.interro p:last-child{border-bottom:0;padding-bottom:0;color:var(--encre);font-weight:600}
.interro p:first-child{padding-top:0}

/* situations A et B */
.profils{
  display:grid;gap:18px;margin-top:clamp(26px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.profil{
  background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:26px 24px;min-width:0;box-shadow:var(--ombre-1);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.profil:hover{transform:translateY(-3px);box-shadow:var(--ombre-2);border-color:var(--filet-fort)}
.profil h3{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-fonce);margin-bottom:16px;
}
.profil ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.profil li{
  font-size:16.5px;color:var(--encre-doux);padding-left:20px;position:relative;
}
.profil li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--or);
}

/* cartes du déroulé */
.cartes{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
.cartes-2{grid-template-columns:1fr}
/* quatre cartes : deux par ligne, jamais une carte seule sur sa ligne */
@media (min-width:700px){.cartes-2{grid-template-columns:repeat(2,1fr)}}
.carte-i{
  background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:28px 26px;min-width:0;box-shadow:var(--ombre-1);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.carte-i:hover{transform:translateY(-3px);box-shadow:var(--ombre-2);border-color:var(--filet-fort)}
.carte-i h3{margin-bottom:10px}
.carte-i p{font-size:16px;color:var(--encre-doux);margin:0}
.pastille{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:18px;border-radius:50%;
  background:var(--or-voile);border:1px solid rgba(251,128,0,.28);
}
.pastille svg{
  width:22px;height:22px;fill:none;stroke:var(--or-fonce);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* images de preuve */
.preuve{
  width:100%;margin-top:clamp(26px,3vw,40px);border-radius:var(--rayon);
  border:1px solid var(--filet);box-shadow:var(--ombre-2);
}
.preuve-etroite{max-width:520px;margin-inline:auto}

/* pour qui / pas pour qui : un « oui » sombre et orange qui attire l'œil,
   un « non » clair en retrait, chacun annoncé par une grosse pastille */
.duo{
  display:grid;gap:clamp(16px,2vw,24px);max-width:1040px;
  margin:clamp(28px,3.4vw,44px) auto 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  align-items:start;
}
.duo-col{min-width:0;border-radius:calc(var(--rayon) + 5px);overflow:hidden;border:1px solid var(--filet)}
.duo-tete{
  display:flex;gap:16px;align-items:center;
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);
}
.duo-icone{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.duo-icone svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.duo-etiquette{
  margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.duo-tete h3{margin:0;font-size:clamp(17px,.7vw + 14.5px,20px);line-height:1.25}
.duo-col ul{
  margin:0;padding:clamp(8px,1vw,12px) clamp(22px,2.6vw,32px) clamp(18px,2vw,24px);
  list-style:none;
}
.duo-col li{
  font-size:16px;line-height:1.45;padding:11px 0 11px 32px;position:relative;
  border-bottom:1px solid var(--filet);
}
.duo-col li:last-child{border-bottom:0}
.duo-col li::before{
  position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;line-height:1;
}
.duo-col li b{font-weight:700}

.duo-pour{background:var(--carte);border-color:rgba(251,128,0,.45);box-shadow:var(--ombre-2)}
.duo-pour .duo-tete{background:var(--sombre);color:#fff}
.duo-pour .duo-icone{background:var(--or);color:#14100B;box-shadow:0 0 0 6px rgba(251,128,0,.18)}
.duo-pour .duo-etiquette{color:var(--or)}
.duo-pour li{color:var(--encre)}
.duo-pour li b{color:var(--or-fonce)}
.duo-pour li::before{content:"✓";background:var(--or);color:#fff}

.duo-pas{background:var(--papier-doux)}
.duo-pas .duo-tete{background:#E9E5DD}
.duo-pas .duo-icone{background:#fff;color:#B4322A;border:2px solid #E3B4AE}
.duo-pas .duo-etiquette{color:#B4322A}
.duo-pas h3{color:var(--encre-doux)}
.duo-pas li{color:var(--encre-doux);border-bottom-color:rgba(0,0,0,.07)}
.duo-pas li b{color:var(--encre)}
.duo-pas li::before{content:"✕";background:#fff;color:#B4322A;border:1px solid #E3B4AE}

/* ============ 06. TÉMOIGNAGES ========================================== */
.temoins{
  display:grid;gap:18px;margin-top:clamp(26px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
.temoin{
  margin:0;padding:28px 26px;min-width:0;
  background:rgba(245,242,236,.05);
  border:1px solid var(--filet-sombre);border-radius:var(--rayon);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.temoin:hover{transform:translateY(-3px);border-color:rgba(251,128,0,.45);background:rgba(245,242,236,.08)}
.temoin blockquote{
  margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--papier-sur-sombre);
}
.temoin figcaption{
  font-size:14.5px;color:var(--doux-sur-sombre);
  padding-top:14px;border-top:1px solid var(--filet-sombre);
}
.temoin figcaption b{color:var(--or);font-weight:600}
.temoins-note{
  margin-top:clamp(24px,3vw,34px);font-size:14.5px;
  color:var(--doux-sur-sombre);max-width:62ch;
}

/* ============ 07. PRIX, GARANTIE, DISPONIBILITÉ, FAQ =================== */
.prix-bloc{
  margin-top:clamp(28px,3vw,44px);padding:clamp(28px,3.4vw,44px);
  background:var(--carte);border:1px solid var(--filet-fort);border-radius:var(--rayon);
  box-shadow:var(--ombre-2);text-align:center;
}
.prix-chiffre{
  margin:0;font-size:clamp(44px,6vw,68px);font-weight:700;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
}
.prix-chiffre small{
  font-size:.3em;font-weight:500;letter-spacing:.06em;
  color:var(--encre-clair);margin-left:6px;vertical-align:.55em;
}
.prix-liste{
  margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none;
  display:grid;gap:10px;text-align:left;
  max-width:420px;margin-inline:auto;
}
.prix-liste li{
  font-size:16.5px;color:var(--encre-doux);
  padding:0 0 10px 26px;position:relative;border-bottom:1px solid var(--filet);
}
.prix-liste li:last-child{border-bottom:0;padding-bottom:0}
.prix-liste li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--or-fonce);font-weight:700;font-size:15px;
}
.prix-bloc .cta{width:100%;max-width:420px}
.prix-bloc .micro{margin-inline:auto;text-align:center;max-width:none}

/* garantie et disponibilité, sous le prix : icône à gauche, texte à droite */
.engagements{display:grid;gap:14px;margin-top:clamp(20px,2.4vw,28px)}
.engagement{
  display:flex;gap:18px;align-items:flex-start;
  padding:clamp(20px,2.2vw,26px);background:var(--carte);
  border:1px solid var(--filet);border-radius:var(--rayon);box-shadow:var(--ombre-1);
}
.engagement .pastille{flex:none;margin:0}
.engagement h3{font-size:clamp(17px,.6vw + 15px,19.5px);margin:2px 0 6px}
.engagement p{margin:0;font-size:15.5px;color:var(--encre-doux)}
.engagement-fort{border-color:rgba(251,128,0,.42);border-left:3px solid var(--or)}
.engagement-fort .pastille{background:var(--or);border-color:var(--or)}
.engagement-fort .pastille svg{stroke:#fff}

.faq{margin-top:clamp(24px,3vw,36px)}
.faq details{border-top:1px solid var(--filet)}
.faq details:last-of-type{border-bottom:1px solid var(--filet)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:20px 44px 20px 0;
  font-size:clamp(17px,.6vw + 15.5px,19.5px);font-weight:600;
  letter-spacing:-.012em;line-height:1.4;
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--or-fonce)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:13px;height:13px;
  background:
    linear-gradient(var(--or-fonce),var(--or-fonce)) center/13px 1.6px no-repeat,
    linear-gradient(var(--or-fonce),var(--or-fonce)) center/1.6px 13px no-repeat;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .25s ease, background-size .25s ease;
}
.faq details[open] summary::after{
  transform:translateY(-50%) rotate(90deg);
  background-size:13px 1.6px, 0 0;
}
.faq .rep{padding:0 0 22px}
.faq .rep p{color:var(--encre-doux);margin:0}

/* ============ 08. CAPTURE EMAIL ET FORMULAIRES ========================= */
.capture{
  padding:clamp(28px,3.4vw,44px);border-radius:var(--rayon);
  background:var(--carte);border:1px solid var(--filet);box-shadow:var(--ombre-1);
}
.capture h2{font-size:clamp(21px,1.5vw + 16px,27px)}
.capture p{color:var(--encre-doux)}
.champ{display:grid;gap:8px}
.champ label{font-size:14.5px;font-weight:600;color:var(--encre-doux)}
input[type="email"],input[type="text"]{
  width:100%;font-family:inherit;font-size:17px;color:var(--encre);
  background:var(--papier);border:1px solid var(--filet-fort);border-radius:var(--rayon);
  padding:15px 16px;transition:border-color .18s ease, box-shadow .18s ease;
}
input[type="email"]::placeholder{color:var(--encre-clair)}
input[type="email"]:focus{
  border-color:var(--or-fonce);box-shadow:0 0 0 3px var(--or-voile);outline:none;
}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:16px}
.consent input[type="checkbox"]{
  margin:3px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--or-fonce);
}
.consent label{font-size:14.5px;line-height:1.5;color:var(--encre-doux)}
.capture-note{margin-top:12px;font-size:14px;color:var(--encre-clair)}
.capture button.cta{width:100%}
@media (min-width:640px){.capture button.cta{width:auto;min-width:320px}}

/* ============ 09. PIED, COOKIES, APPARITIONS =========================== */
.pied{
  border-top:1px solid var(--filet);
  padding-block:44px;background:var(--papier);
}
.pied-liens{
  display:flex;flex-wrap:wrap;gap:12px 26px;margin:0;font-size:15px;
}
.pied-liens a{color:var(--encre-doux);text-decoration:none;border-bottom:1px solid var(--filet-fort)}
.pied-liens a:hover{color:var(--or-fonce);border-color:var(--or)}

/* Masqué par défaut. mesure.js pose data-visible="true" tant qu'aucun choix
   n'est enregistré, et retire l'attribut au clic sur « Refuser » ou
   « Accepter ». visibility:hidden sort aussi les deux boutons du parcours
   au clavier tant que le bandeau n'est pas à l'écran. */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--sombre);color:var(--papier-sur-sombre);
  border-top:1px solid var(--or-fonce);
  padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -12px 40px rgba(0,0,0,.28);
  transform:translateY(110%);
  visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
  will-change:transform;
}
.cookies[data-visible="true"]{
  transform:translateY(0);
  visibility:visible;
  transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.cookies .lire{display:grid;gap:16px}
@media (min-width:860px){
  .cookies .lire{width:var(--large);grid-template-columns:1fr auto;align-items:center;gap:28px}
}
.cookies p{font-size:14.5px;line-height:1.55;color:var(--doux-sur-sombre);margin:0;max-width:78ch}
.cookies a{color:var(--or)}
.cookies-boutons{display:flex;gap:10px}
.cookies-boutons button{
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  padding:12px 22px;border-radius:var(--rayon);border:1px solid var(--filet-sombre);
  background:transparent;color:var(--papier-sur-sombre);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.cookies-boutons .b-refus:hover{border-color:var(--papier-sur-sombre)}
.cookies-boutons .b-accept{background:var(--or);border-color:var(--or);color:#14100B}
.cookies-boutons .b-accept:hover{background:var(--or-clair)}

/* mesure.js pose data-bandeau sur le body : le pied se dégage pour que le
   bandeau ne recouvre pas les liens légaux. */
body[data-bandeau="visible"] .pied{padding-bottom:clamp(180px,34vw,215px)}
@media (min-width:860px){
  body[data-bandeau="visible"] .pied{padding-bottom:120px}
}

/* apparitions au défilement : tunnel.js pose la classe .vu */
.js-anim [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.js-anim [data-reveal].vu{opacity:1;transform:none}
/* décalage en cascade sur les séries de cartes */
.js-anim .cartes [data-reveal]:nth-child(2),
.js-anim .temoins [data-reveal]:nth-child(2){transition-delay:.08s}
.js-anim .cartes [data-reveal]:nth-child(3),
.js-anim .temoins [data-reveal]:nth-child(3){transition-delay:.16s}
.js-anim .cartes [data-reveal]:nth-child(4),
.js-anim .temoins [data-reveal]:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js-anim [data-reveal]{opacity:1;transform:none;transition:none}
  .cookies{transition:none}
}

/* impression : on retire les habillages inutiles */
@media print{
  .tete,.cta-collant,.cookies,.cta{display:none!important}
  body{background:#fff;color:#000}
  .bloc{padding-block:24px}
}

/* =========================================================================
   10. HABILLAGE « NUIT + ORANGE »  (codes de tes visuels Instagram)
   En-tête et hero sur fond bleu-nuit, titres capitales serrées, trait
   orange tracé sous les titres, lumière bleue rasante comme sur tes photos.
   ========================================================================= */

/* --- trait orange dessiné, repris de tes visuels --- */
:root{
  --trait-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' fill='none'%3E%3Cpath d='M6 15C48 6 150 3 234 9' stroke='%23FB8000' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M22 23C74 16 158 14 214 18' stroke='%23FB8000' stroke-width='4' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");
}

/* --- titres : capitales serrées, plus de présence --- */
h1,.titre-centre{
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.03;
}
h2{font-weight:700}
.accroche h1{font-size:clamp(33px, 4.9vw, 62px)}

/* le trait orange sous le titre principal et les titres centrés */
.accroche h1::after,
.titre-centre::after{
  content:"";display:block;
  width:min(260px,62%);height:22px;margin-top:18px;
  background:var(--trait-orange) left center/100% 100% no-repeat;
}
.titre-centre::after{margin-inline:auto}

/* --- en-tête sur fond nuit --- */
.tete{
  background:color-mix(in srgb, var(--sombre) 92%, transparent);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.tete-nom{color:var(--papier-sur-sombre)}
.tete-nom:hover{color:var(--or)}
.tete-nom span{color:var(--or)}

/* --- hero sur fond nuit, lumière bleue à gauche, halo orange à droite --- */
.accroche{
  background:linear-gradient(170deg, var(--nuit-haut) 0%, var(--sombre) 60%, #090C11 100%);
  color:var(--papier-sur-sombre);
}
.accroche h1{color:#FFFFFF}
.accroche-sous{color:#C3CAD4}
.accroche-preuve{color:#8E96A2;border-top-color:rgba(255,255,255,.14)}
.accroche .micro{color:#8E96A2}
.accroche .micro b{color:#D7DCE3}
.accroche .cta{background:var(--or);border-color:var(--or);color:#14100B}
.accroche .cta:hover{background:var(--or-clair);color:#14100B}

/* la lumière bleue rasante de tes photos */
.accroche::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-18%;bottom:-30%;width:min(760px,95%);aspect-ratio:1/1;
  background:radial-gradient(closest-side, var(--bleu-lumiere), transparent 70%);
  filter:blur(6px);
}
.accroche::before{
  background:radial-gradient(closest-side, rgba(251,128,0,.22), transparent 72%);
}
.accroche .media img,
.accroche .media .demo-img{
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
}

/* --- rappels orange sur le reste de la page --- */
.profil h3{color:var(--or-fonce);letter-spacing:.12em}
.interro{border-left-color:var(--or)}
.pointe{border-left-color:var(--or)}
.temoin figcaption b{color:var(--or)}
.prix-chiffre{color:var(--encre)}
.prix-bloc{border-top:3px solid var(--or)}
.cookies{border-top-color:var(--or)}
.faq summary:hover{color:var(--or-fonce)}

/* le bouton sombre garde le noir, l'orange reste réservé aux moments clés */
.cta{background:var(--sombre);border-color:var(--sombre)}
.cta:hover{background:#16202C}
.prix-bloc .cta,.relance .cta{background:var(--or);border-color:var(--or);color:#14100B}
.prix-bloc .cta:hover,.relance .cta:hover{background:var(--or-clair);color:#14100B}
.cta-collant .cta{background:var(--or);border-color:var(--or);color:#14100B}
.cta-collant .cta:hover{background:var(--or-clair)}

/* --- portrait détouré dans le hero : pas de cadre, ombre portée sur la forme --- */
.accroche .media img{
  border:0;box-shadow:none;background:transparent;border-radius:0;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
}
/* --- visuels de preuve : le Kbis et l'aperçu du plan sont des visuels finis,
       on retire le cadre et on garde une ombre douce --- */
/* visuels détourés : l'ombre suit la forme au lieu de dessiner un rectangle */
.preuve{border:0;box-shadow:none;border-radius:0;filter:drop-shadow(0 18px 30px rgba(18,16,14,.16))}
.preuve-etroite{max-width:560px}

/* --- portrait circulaire avec halo : ombre plus discrète, le visuel a la sienne --- */
.accroche .media img{filter:drop-shadow(0 22px 40px rgba(0,0,0,.45))}

/* ============ VSL ======================================================= */
.bloc-vsl{padding-block:clamp(8px,2vw,24px) var(--rythme)}
.vsl{
  position:relative;margin:0 auto;max-width:960px;
  border-radius:var(--rayon);overflow:hidden;background:#090C11;
  box-shadow:0 24px 60px rgba(18,16,14,.22);
}
.vsl video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#090C11}
.vsl-son{
  /* en haut à droite : en bas au centre, il masquait les sous-titres de la vidéo */
  position:absolute;right:clamp(10px,2vw,20px);top:clamp(10px,2vw,20px);
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border:0;border-radius:999px;cursor:pointer;
  background:var(--or);color:#14100B;font:inherit;font-weight:700;font-size:15.5px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  animation:vsl-pouls 2.4s ease-in-out infinite;
}
.vsl-son svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vsl-son:hover{background:var(--or-clair)}
.vsl-son[hidden]{display:none}
@keyframes vsl-pouls{50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.vsl-son{animation:none}}

/* =========================================================================
   11. LES AUTRES PAGES DU TUNNEL (rétabli : perdu lors de la refonte du 30/09)
   tunnel.css est la seule feuille de style de dix pages, pas seulement de
   la page d'accompagnement : le questionnaire, les trois pages d'issue, le
   calculateur de marge, les témoignages et les deux pages juridiques n'en
   chargent aucune autre. Les règles ci-dessous sont celles de ces pages,
   transposées dans les jetons du haut de ce fichier.
   ========================================================================= */

/* --- utilitaires --- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.chapo{font-size:1.1em;color:var(--encre-doux)}
mark{
  background:linear-gradient(transparent 58%,var(--or-pale) 58%);
  box-shadow:inset 0 -2px 0 var(--or-ligne);
  color:inherit;font-weight:600;padding:0 2px;
}
/* Après .chapo, et pas avant : à spécificité égale c'est l'ordre qui tranche,
   et sur fond sombre la version claire doit gagner. */
.bloc-sombre .chapo{color:var(--doux-sur-sombre)}
/* La microcopie apparaît aussi sous le bouton du dernier appel, qui est sur
   fond sombre : sans ces deux lignes elle y retombe à 2,21:1, illisible. */
.bloc-sombre .micro{color:var(--doux-sur-sombre)}
.bloc-sombre .micro b{color:var(--papier-sur-sombre)}

/* --- bouton secondaire (calculateur de marge) --- */
.cta-2{
  background:transparent;color:var(--encre);
  border:1.5px solid var(--filet-fort);font-weight:600;
}
.cta-2:hover{
  background:var(--or-pale);border-color:var(--or);
  color:var(--encre);box-shadow:none;
}
.cta-2::after{display:none}
/* Le prix accolé au libellé du bouton, sur la page de remerciement. */
.cta-prix{font-weight:600;opacity:.78;font-size:.94em}

/* --- listes de questions (calculateur) --- */
.questions{margin-top:1.1em;display:grid;gap:12px;list-style:none;padding:0}
.questions li{padding-left:22px;position:relative;color:var(--encre-doux);line-height:1.5}
.questions li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:2px;background:var(--or);
}

/* --- déroulé numéroté (page de confirmation) --- */
.etapes{
  display:grid;gap:clamp(20px,3vw,26px);margin-top:6px;
  list-style:none;padding:0;counter-reset:e;
}
.etape{border-left:2px solid var(--filet);padding-left:20px;position:relative}
.etape::before{
  content:"";position:absolute;left:-5px;top:7px;
  width:8px;height:8px;border-radius:99px;background:var(--or);
}
.etape h3{margin-bottom:5px}
.etape p{color:var(--encre-doux);font-size:.97em}
.etapes-num .etape h3::before{
  counter-increment:e;content:counter(e) ". ";color:var(--or-fonce);
}

/* --- formulaires : questionnaire et calculateur --- */
fieldset{border:0;margin:0;padding:0;min-width:0}
label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
/* Le questionnaire empile plusieurs .champ : sans cet écart, l'intitulé d'un
   champ venait se coller au champ précédent. Le bloc de capture n'en a qu'un,
   il n'est donc pas touché. */
.champ + .champ{margin-top:20px}
.aide{
  font-weight:400;color:var(--encre-clair);font-size:13.5px;
  display:block;margin-top:3px;
}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{
  width:100%;padding:14px 15px;font:inherit;
  font-size:16px;                    /* 16 px : en dessous, iOS zoome au focus */
  border:1.5px solid var(--filet-fort);border-radius:var(--rayon);
  background:var(--carte);color:var(--encre);
  transition:border-color var(--t),box-shadow var(--t);
}
input:hover,textarea:hover,select:hover{border-color:var(--encre-clair)}
input:focus,textarea:focus,select:focus{
  border-color:var(--or-fonce);box-shadow:0 0 0 3px var(--or-voile);outline:none;
}
textarea{min-height:130px;resize:vertical}
.compteur{
  font-size:13px;color:var(--encre-clair);text-align:right;margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.compteur[data-limite="true"]{color:var(--or-fonce);font-weight:600}

/* Choix uniques : la cible tactile est l'étiquette entière, pas le petit rond. */
.choix{display:grid;gap:10px}
.choix label{
  display:flex;align-items:center;gap:13px;margin:0;
  font-weight:600;font-size:16px;
  border:1.5px solid var(--filet-fort);border-radius:var(--rayon);
  padding:15px 17px;cursor:pointer;min-height:56px;
  transition:border-color var(--t),background-color var(--t);
}
.choix label:hover{border-color:var(--encre-clair);background:var(--papier-doux)}
.choix input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:21px;height:21px;border:2px solid var(--filet-fort);border-radius:99px;
  padding:0;transition:border-color var(--t);
}
.choix input:checked{border-color:var(--or);border-width:6.5px}
.choix label:has(input:checked){border-color:var(--or);background:var(--or-pale)}
.choix input:focus-visible{outline:2px solid var(--or-fonce);outline-offset:2px}
.choix[aria-invalid="true"] label{border-color:var(--rouge)}

.erreur{
  color:var(--rouge);font-size:14px;font-weight:600;margin-top:8px;
  display:flex;gap:7px;align-items:flex-start;
}
.erreur::before{
  content:"!";flex:none;width:17px;height:17px;border-radius:99px;
  background:var(--rouge);color:#fff;font-size:12px;font-weight:700;
  display:grid;place-items:center;margin-top:1px;
}

/* --- progression du questionnaire --- */
.jauge{
  height:4px;background:var(--filet);border-radius:99px;
  overflow:hidden;margin-bottom:8px;
}
.jauge i{
  display:block;height:100%;background:var(--or);border-radius:99px;
  transition:width .3s var(--ease);
}
.jauge-txt{
  font-size:13px;color:var(--encre-clair);margin-bottom:26px;
  font-variant-numeric:tabular-nums;
}
.pas{animation:entre .28s var(--ease) both}
@keyframes entre{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pas{animation:none}}
.pas h2{font-size:clamp(1.25rem,4.4vw,1.55rem);margin-bottom:20px}
.pas-zero h2{margin-bottom:10px}
.pas-zero .chapo{font-size:1rem;margin-bottom:24px}
.nav-pas{display:flex;gap:12px;margin-top:26px;align-items:center}
.nav-pas .cta{flex:1;min-width:0;margin:0}
.retour{
  background:none;border:none;cursor:pointer;font:inherit;font-size:15px;
  color:var(--encre-clair);font-weight:600;padding:14px 4px;
  text-decoration:underline;text-underline-offset:3px;
}
.retour:hover{color:var(--encre)}

/* --- encadrés d'état (pages d'issue) --- */
.encart{
  border-radius:var(--rayon);padding:clamp(20px,3.6vw,28px);margin-bottom:26px;
}
.encart h1,.encart h2{margin-bottom:.45em}
.encart h1{font-size:clamp(1.35rem,4.6vw,1.75rem)}
.encart-ok{background:var(--vert-voile);border-left:4px solid var(--vert)}
.encart-ok h1,.encart-ok h2{color:var(--vert)}
.encart-attente{background:var(--or-pale);border-left:4px solid var(--or)}
.encart-info{background:var(--papier-doux);border:1px solid var(--filet)}

/* Réservé à ce qui reste à brancher : visible pour moi, jamais pour un visiteur. */
.a-fournir{
  border:2px dashed var(--or);background:var(--or-pale);
  border-radius:var(--rayon);padding:20px;color:var(--or-fonce);
  font-size:14.5px;line-height:1.55;
}
.a-fournir b{
  display:block;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:7px;
}
.a-fournir .media-slot{
  margin-top:12px;aspect-ratio:16/9;border-radius:var(--rayon);
  background:rgba(251,128,0,.1);display:grid;place-items:center;
  /* Sur ce fond ambré, --or-fonce ne tient plus que 4,17:1. On repasse à l'encre. */
  color:var(--encre);font-weight:600;text-align:center;padding:12px;
}

/* --- pages juridiques : CGV et confidentialité --- */
.juridique h2{
  font-size:clamp(1.15rem,3.6vw,1.4rem);margin-top:36px;margin-bottom:12px;
}
.juridique h2:first-of-type{margin-top:0}
.juridique h3{margin-top:22px;margin-bottom:8px}
.juridique p,.juridique li{color:var(--encre-doux)}
.juridique ul,.juridique ol{margin:0 0 0 20px;padding:0;display:grid;gap:8px}
.juridique p + p,.juridique ul + p,.juridique p + ul{margin-top:.9em}
.maj{font-size:13.5px;color:var(--encre-clair);margin-bottom:30px}

/* --- témoignages longs --- */
.temoignage-long{padding-block:clamp(34px,6vw,52px)}
.temoignage-long + .temoignage-long{border-top:1px solid var(--filet)}
.temoignage-tete{margin-bottom:22px}
.temoignage-tete h2{margin-bottom:6px}
.temoignage-meta{font-size:14px;color:var(--encre-clair)}
.temoignage-corps p{color:var(--encre-doux)}
.temoignage-corps p + p{margin-top:1.05em}

/* le message d'erreur global reste masqué tant qu'il est vide ([hidden] l'emporte sur display:flex) */
.erreur[hidden]{display:none}
/* dans un .champ, l'écart entre l'intitulé et la case vient déjà de la grille */
.champ label{margin-bottom:0}

/* le dernier élément d'un bloc ne rajoute pas sa marge basse à celle du bloc */
.bloc .lire > :last-child,.bloc .large > :last-child,
.bloc .lire > :last-child > :last-child,.bloc .large > :last-child > :last-child{margin-bottom:0}
.temoins-note{margin-bottom:0}
/* microcopie sous un bouton centré (dernier appel) : centrée elle aussi */
[style*="text-align:center"] .micro{margin-inline:auto}
/* contenu du document gratuit, dans le bloc de capture */
.capture-liste{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.capture-liste li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--encre-doux)}
.capture-liste li b{color:var(--encre)}
.capture-liste li::before{
  content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--or);color:#fff;font-size:11px;font-weight:700;
}
/* bouton du son plus discret sur téléphone, pour ne pas couvrir l'image */
@media (max-width:600px){
  .vsl-son{padding:8px 13px;font-size:13.5px;gap:7px}
  .vsl-son svg{width:16px;height:16px}
}

/* ============ 12. ÉCRAN D'ANALYSE =======================================
   /accompagnement/analyse/ : les quinze secondes entre le questionnaire et
   la réponse. Fond sombre, comme le hero de la page de vente. */
.page-analyse{background:var(--sombre);color:var(--papier-sur-sombre)}
.page-analyse .bloc{background:transparent}
.page-analyse h1{color:#FFFFFF;text-transform:uppercase;font-weight:700;letter-spacing:-.022em}
.page-analyse .chapo{color:var(--doux-sur-sombre)}
.page-analyse p{color:var(--doux-sur-sombre)}
.page-analyse .pied{background:transparent;border-top-color:var(--filet-sombre)}
.page-analyse .pied-liens a{color:var(--doux-sur-sombre);border-bottom-color:var(--filet-sombre)}
.page-analyse .pied-liens a:hover{color:var(--or);border-color:var(--or)}

.analyse{padding-block:clamp(56px,9vw,120px)}

.pas-analyse{
  list-style:none;margin:clamp(28px,4vw,42px) 0 0;padding:0;
  display:grid;gap:14px;max-width:46ch;
}
/* L'étape en attente est plus sourde que l'étape faite, mais elle reste du
   texte à lire : une opacité de 0,42 la faisait tomber à 2,42:1 sur le fond
   nuit. On pose donc deux couleurs explicites, mesurables, plutôt qu'un voile
   dont le résultat dépend du fond. */
.pas-analyse li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:16.5px;line-height:1.45;
  color:#7F8691;                 /* 5,20:1 sur --sombre */
  transition:color .4s ease;
}
.pas-analyse li[data-fait="oui"]{color:var(--papier-sur-sombre)}
.coche{
  flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;
  border:2px solid var(--filet-sombre);position:relative;opacity:.55;
  transition:border-color .4s ease, background-color .4s ease;
}
.pas-analyse li[data-fait="oui"] .coche{background:var(--or);border-color:var(--or);opacity:1}
/* La coche elle-même, tracée en CSS : deux traits, pas d'image à charger. */
.pas-analyse li[data-fait="oui"] .coche::after{
  content:"";position:absolute;left:6px;top:2.5px;
  width:5px;height:10px;border:solid #14100B;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
@media (prefers-reduced-motion:reduce){
  .pas-analyse li,.coche{transition:none}
}

.analyse .jauge{margin-top:clamp(30px,4vw,44px);background:var(--filet-sombre)}
.analyse .jauge i{transition:width .12s linear}
.analyse .micro{color:var(--doux-sur-sombre);margin-top:10px}

/* Les deux issues, sur fond nuit
   ------------------------------
   Les encadrés du reste du tunnel sont des aplats très pâles, faits pour du
   papier. Posés tels quels sur la nuit, ils y font une tache. On garde leur
   valeur de signal — vert pour « ton profil correspond », orange pour « pas
   maintenant » — mais en voile sur le fond, avec un texte clair.

   Mesuré sur le fond obtenu : texte #F7F5F1 à 15,9:1, accent vert #3FA76A à
   5,7:1, accent orange #FF9A33 à 7,8:1. */
.page-analyse .encart{padding:clamp(18px,3vw,24px)}
.page-analyse .encart-ok{
  background:rgba(27,107,58,.14);border-left:3px solid var(--vert-sur-sombre);
}
.page-analyse .encart-attente{
  background:var(--or-voile);border-left:3px solid var(--or);
}
.page-analyse .encart-ok p,.page-analyse .encart-attente p{
  color:var(--papier-sur-sombre);margin:0;
  font-size:clamp(1.05rem,2.6vw,1.2rem);line-height:1.35;
}
.page-analyse .encart-ok p b{color:var(--vert-sur-sombre)}
.page-analyse .encart-attente p b{color:var(--or-clair)}

/* Le script donne le focus à cette phrase pour qu'un lecteur d'écran annonce
   l'issue, au lieu de rester sur l'écran d'analyse qui vient de disparaître.
   Mais elle porte tabindex="-1" : elle n'est pas atteignable au clavier, et
   l'anneau de focus n'y signale donc rien d'actionnable. Un cadre orange
   autour d'une phrase se lit comme un défaut d'affichage. On le retire ici,
   et ici seulement — l'anneau général du site n'est pas touché. */
.page-analyse .encart p[tabindex="-1"]:focus,
.page-analyse .encart p[tabindex="-1"]:focus-visible{outline:none}

/* L'offre, sa mention légale et le calendrier forment une seule colonne.
   La liste des quatre points était centrée dans un bloc de 420 px, alors que
   le paragraphe au-dessus et la mention en dessous s'alignaient à gauche :
   trois bords gauches différents, et une mention qui flottait sans rattache.
   Le filet la relie à l'offre qu'elle commente. */
.page-analyse .prix-liste{margin-inline:0;max-width:46ch}
.page-analyse .prix-liste li{color:var(--doux-sur-sombre);border-bottom-color:var(--filet-sombre)}
.page-analyse .prix-liste + .micro{
  max-width:46ch;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--filet-sombre);
}
.page-analyse .micro a{color:var(--or)}
.page-analyse .agenda{
  background:#FFFFFF;border-radius:var(--rayon);overflow:hidden;
  margin-top:clamp(22px,3vw,30px);
}