/* ===================================================================
   Le Carnet des Artisans — système visuel « Nuit méditerranéenne »
   Un seul fichier CSS. Pas de framework, pas de compilation.

   Sommaire
   01. Jetons (couleurs, ombres, typographie fluide, courbes)
   02. Base, grain, focus
   03. Barre de progression de lecture
   04. En-tête, navigation, menu plein écran
   05. Boutons
   06. Hero d'accueil (nuit) et hero de page intérieure
   07. Le sélecteur 1 à 5 — pièce maîtresse
   08. Bandeau des métiers
   09. Sections et en-têtes de section
   10. Étapes, démonstration, comparatif, métiers
   11. Formulaire
   12. FAQ
   13. Cartes de guides
   14. Articles, sommaire collant, encadrés
   15. Pied de page et barre d'appel mobile
   16. Révélations au défilement et mouvement réduit
   =================================================================== */


/* ==================================================================
   01. JETONS
   ================================================================== */
:root{
  /* --- fonds et encres --- */
  --nuit:#0B1F38;          /* bleu nuit de la marque */
  --nuit-2:#0E2846;
  --nuit-3:#143156;
  --encre:#061220;         /* pied de page, menu plein écran */
  --creme:#FCF9F3;         /* papier */
  --creme-2:#F5EFE3;       /* papier alterné */
  --papier:#FFFFFF;
  --trait:#E6DCC9;
  --trait-2:#D8CBB2;

  /* --- textes --- */
  --ardoise:#4B5D73;       /* texte courant sur crème — 6.4:1 */
  --doux:#5E6E82;          /* texte secondaire sur crème — 5.0:1 */
  --doux-nuit:rgba(255,255,255,.74);  /* texte secondaire sur nuit — 8.4:1 */

  /* --- accents --- */
  --brique:#C9421C;        /* actions : fond de bouton, blanc dessus 4.9:1 */
  --brique-vif:#E4572E;    /* accent décoratif, halos, pictogrammes */
  --brique-clair:#FF8259;
  --brique-lien:#B93D18;   /* liens dans le texte sur crème — 5.4:1 */
  --or:#F2A93B;            /* accent sur fond nuit — 7.7:1 */
  --or-clair:#FFD79A;

  /* --- rayons --- */
  --r-xs:8px; --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;

  /* --- ombres, par paliers : rien n'a la même profondeur --- */
  --o-1:0 1px 2px rgba(11,31,56,.05), 0 2px 6px rgba(11,31,56,.045);
  --o-2:0 2px 4px rgba(11,31,56,.055), 0 10px 24px rgba(11,31,56,.085);
  --o-3:0 4px 8px rgba(11,31,56,.06), 0 24px 56px rgba(11,31,56,.14);
  --o-4:0 10px 20px rgba(11,31,56,.09), 0 48px 100px rgba(11,31,56,.22);
  --o-nuit-3:0 4px 8px rgba(6,18,32,.2), 0 26px 60px rgba(6,18,32,.34);
  --o-nuit-4:0 10px 20px rgba(6,18,32,.24), 0 50px 110px rgba(6,18,32,.5);
  --o-cta:0 2px 4px rgba(201,66,28,.22), 0 12px 28px rgba(201,66,28,.3);
  --o-cta-survol:0 4px 8px rgba(201,66,28,.24), 0 22px 46px rgba(201,66,28,.36);

  /* --- typographie --- */
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  /* --- courbes --- */
  --ease:cubic-bezier(.22,.68,.28,1);
  --sortie:cubic-bezier(.16,1,.3,1);
  --ressort:cubic-bezier(.34,1.7,.5,1);

  /* --- rythme --- */
  --max:1280px;
  --gap:clamp(1rem,2.2vw,1.9rem);
  --section-y:clamp(3.5rem,8vw,7.5rem);
  --marge-page:clamp(1.15rem,5vw,5rem);
}


/* ==================================================================
   02. BASE
   ================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:clamp(4.5rem,9vw,6rem)}

body{
  font-family:var(--sans);
  background:var(--creme);
  color:var(--ardoise);
  font-size:clamp(1rem,.25vw + .94rem,1.09rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
::selection{background:var(--or-clair);color:var(--nuit)}

h1,h2,h3,h4{
  font-family:var(--sans);color:var(--nuit);
  font-weight:800;line-height:1.04;letter-spacing:-.035em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,1.1rem + 4.4vw,4.3rem)}
h2{font-size:clamp(1.8rem,1rem + 2.8vw,3rem);margin-bottom:.4em}
h3{font-size:clamp(1.08rem,.4vw + 1rem,1.3rem);letter-spacing:-.025em;margin-bottom:.4em}
h4{font-size:clamp(.95rem,.2vw + .9rem,1.02rem);letter-spacing:-.02em}
p + p{margin-top:1em}

a{color:var(--brique-lien);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2px}

.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}

.wrap{width:min(100% - var(--marge-page),var(--max));margin-inline:auto}
.wrap.etroit{--max:920px}

:focus-visible{outline:3px solid var(--brique);outline-offset:3px;border-radius:6px}
.nuit :focus-visible,.hero :focus-visible,.menu-plein :focus-visible,footer.site :focus-visible{outline-color:var(--or)}

/* visible uniquement des lecteurs d'écran */
.hors-ecran{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* saut au contenu, pour le clavier */
.saut{position:absolute;left:.6rem;top:-4rem;z-index:300;background:var(--nuit);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 var(--r-s) var(--r-s);font-weight:700;text-decoration:none;
  transition:top .25s var(--sortie)}
.saut:focus{top:0}

/* grain général, très discret : donne de la matière au papier et à la nuit */
.grain{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}


/* ==================================================================
   03. BARRE DE PROGRESSION
   ================================================================== */
.progression{position:fixed;inset:0 0 auto 0;height:3px;z-index:200;pointer-events:none}
.progression i{display:block;height:100%;width:0;transform-origin:left;
  background:linear-gradient(90deg,var(--brique-vif),var(--or));transition:width .12s linear}


/* ==================================================================
   04. EN-TÊTE
   ================================================================== */
header.site{
  position:sticky;top:0;z-index:100;
  background:var(--nuit);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),box-shadow .4s,border-color .4s;
}
header.site.colle{
  background:color-mix(in srgb,var(--nuit) 92%,transparent);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom-color:rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(6,18,32,.3);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:clamp(.65rem,1.3vw,1rem)}

.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.logo img{width:clamp(36px,3.2vw,44px);height:auto;transition:transform .5s var(--sortie)}
.logo:hover img{transform:rotate(-7deg) scale(1.06)}
.logo .l1{display:block;font-weight:800;font-size:clamp(.98rem,1vw,1.15rem);color:#fff;
  line-height:1.05;letter-spacing:-.03em;white-space:nowrap}
.logo .l2{display:block;font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or);font-weight:800;margin-top:3px;white-space:nowrap}

nav.principale{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
nav.principale a:not(.cta){color:rgba(255,255,255,.86);text-decoration:none;font-size:.94rem;
  font-weight:600;position:relative;padding-block:.35rem;white-space:nowrap}
nav.principale a:not(.cta)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--or);transition:width .35s var(--sortie)}
nav.principale a:not(.cta):hover{color:#fff}
nav.principale a:not(.cta):hover::after{width:100%}
nav.principale a[aria-current="page"]{color:#fff}
nav.principale a[aria-current="page"]::after{width:100%;background:rgba(255,255,255,.35)}

.cta{
  background:var(--brique);color:#fff!important;padding:.72rem 1.3rem;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:.9rem;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 2px 4px rgba(6,18,32,.3),0 10px 24px rgba(201,66,28,.28);
  transition:transform .3s var(--sortie),box-shadow .3s;
}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--brique-clair),var(--or));
  transform:translateY(101%);transition:transform .4s var(--sortie)}
.cta:hover{transform:translateY(-2px)}
.cta:hover::before{transform:translateY(0)}
.cta:active{transform:translateY(0)}

/* --- bouton et menu plein écran --- */
.burger{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;flex:none}
.burger i{display:block;height:2px;width:23px;background:#fff;border-radius:2px;margin-inline:auto;
  transition:transform .4s var(--ease),opacity .2s}
body.menu-ouvert .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-ouvert .burger i:nth-child(2){opacity:0}
body.menu-ouvert .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-plein{
  position:fixed;inset:0;z-index:90;background:var(--encre);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--marge-page) 2rem;
  clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .62s var(--sortie);
  overflow-y:auto;
}
.menu-plein::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 45% at 85% 12%,rgba(242,169,59,.20),transparent 68%),
             radial-gradient(45% 40% at 5% 92%,rgba(228,87,46,.16),transparent 70%)}
body.menu-ouvert .menu-plein{clip-path:circle(155% at calc(100% - 46px) 40px)}
.menu-plein nav{position:relative;display:flex;flex-direction:column}
.menu-plein a{
  color:#fff;text-decoration:none;font-size:clamp(1.6rem,7vw,2.4rem);font-weight:800;
  letter-spacing:-.035em;padding-block:.5rem;border-bottom:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--sortie),transform .45s var(--sortie),color .25s;
}
.menu-plein a:hover{color:var(--or)}
body.menu-ouvert .menu-plein a{opacity:1;transform:none}
body.menu-ouvert .menu-plein a:nth-child(1){transition-delay:.18s}
body.menu-ouvert .menu-plein a:nth-child(2){transition-delay:.24s}
body.menu-ouvert .menu-plein a:nth-child(3){transition-delay:.3s}
body.menu-ouvert .menu-plein a:nth-child(4){transition-delay:.36s}
body.menu-ouvert .menu-plein a:nth-child(5){transition-delay:.42s}
.menu-plein a.accent{color:var(--or);border-bottom:0}
.menu-plein .pied{position:relative;margin-top:clamp(1.5rem,4vw,2.5rem);color:var(--doux-nuit);
  font-size:.86rem;opacity:0;transition:opacity .5s .48s}
body.menu-ouvert .menu-plein .pied{opacity:1}

@media (max-width:1000px){
  nav.principale{display:none}
  .burger{display:flex}
  body.menu-ouvert{overflow:hidden}
}
@media (min-width:1001px){
  .menu-plein{display:none}
}


/* ==================================================================
   05. BOUTONS
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--brique);color:#fff;text-decoration:none;
  padding:clamp(.95rem,1.3vw,1.15rem) clamp(1.4rem,2.2vw,2rem);
  border-radius:999px;font-weight:700;border:0;font-family:inherit;
  font-size:clamp(.98rem,.5vw + .85rem,1.06rem);letter-spacing:-.01em;line-height:1.2;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:var(--o-cta);
  transition:transform .3s var(--sortie),box-shadow .3s;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--brique-clair),var(--or));
  opacity:0;transition:opacity .35s}
.btn:hover{transform:translateY(-3px);box-shadow:var(--o-cta-survol)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn .fleche{transition:transform .3s var(--sortie)}
.btn:hover .fleche{transform:translateX(5px)}

/* fantôme sur fond clair */
.btn.fantome{background:transparent;color:var(--nuit);box-shadow:none;border:1.5px solid var(--trait-2)}
.btn.fantome::before{background:var(--nuit)}
.btn.fantome:hover{color:#fff;border-color:var(--nuit);box-shadow:var(--o-2)}

/* clair sur fond nuit */
.btn.clair{background:transparent;color:#fff;box-shadow:none;border:1.5px solid rgba(255,255,255,.32)}
.btn.clair::before{background:#fff}
.btn.clair:hover{color:var(--nuit);border-color:#fff;box-shadow:var(--o-nuit-3)}

/* lien souligné à l'or, sur fond nuit */
.lien-or{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--or);
  padding-bottom:3px;transition:color .25s,border-color .25s}
.lien-or:hover{color:var(--or)}

/* lien « lire la suite » */
.lire{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-weight:700;
  font-size:.9rem;color:var(--brique-lien);text-decoration:none}
.lire .fleche{transition:transform .3s var(--sortie)}
.lire:hover .fleche,.carte:hover .lire .fleche{transform:translateX(5px)}

.retour{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;
  text-decoration:none;color:var(--or);margin-bottom:clamp(.9rem,2vw,1.4rem)}
.retour:hover{text-decoration:underline}


/* ==================================================================
   06. HERO
   ================================================================== */
.hero{
  position:relative;background:var(--nuit);color:var(--doux-nuit);overflow:clip;
  padding-block:clamp(2.4rem,6vw,5rem) clamp(3rem,7vw,6rem);
}
.hero .fond{position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(4px);
  background:radial-gradient(58% 62% at 78% 6%,rgba(242,169,59,.30),transparent 66%),
             radial-gradient(48% 55% at 6% 90%,rgba(228,87,46,.24),transparent 68%),
             radial-gradient(70% 70% at 50% -12%,rgba(20,49,86,.9),transparent 70%)}
.hero .semis{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 75% 62% at 28% 14%,#000 5%,transparent 72%);
          mask-image:radial-gradient(ellipse 75% 62% at 28% 14%,#000 5%,transparent 72%)}
.hero .wrap{position:relative;z-index:1}
.hero h1,.hero h2{color:#fff}
.hero h1 .it{color:var(--or)}
.hero a:not(.btn):not(.retour){color:var(--or)}

.hero .duo{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(1.6rem,3.6vw,4.5rem);align-items:center}
@media (max-width:1150px){.hero .duo{grid-template-columns:1fr 1fr}}
@media (max-width:940px){.hero .duo{grid-template-columns:1fr;gap:clamp(2.4rem,7vw,3.4rem)}}
@media (max-width:1150px) and (min-width:941px){.hero h1{font-size:clamp(2rem,4.4vw,3.1rem)}}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:clamp(1rem,2vw,1.6rem);
  font-size:.79rem;font-weight:700;color:#fff;line-height:1.3;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:.5rem 1.05rem .5rem .72rem;backdrop-filter:blur(6px);
}
.pastille-live{width:8px;height:8px;border-radius:50%;background:var(--or);position:relative;flex:none}
.pastille-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--or);
  animation:pulse 2.6s var(--sortie) infinite}
@keyframes pulse{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.8);opacity:0}}

/* le titre monte ligne par ligne */
.hero h1 .ligne{display:block;overflow:hidden}
.hero h1 .ligne > span{display:block;transform:translateY(108%);animation:monte .95s var(--sortie) forwards}
.hero h1 .ligne:nth-child(2) > span{animation-delay:.08s}
.hero h1 .ligne:nth-child(3) > span{animation-delay:.16s}
@keyframes monte{to{transform:none}}
@keyframes parait{to{opacity:1;transform:none}}

.hero .lead{font-size:clamp(1.05rem,.4vw + .95rem,1.22rem);max-width:54ch;
  margin-top:clamp(1.1rem,2vw,1.6rem);color:rgba(255,255,255,.84);
  opacity:0;animation:parait .8s var(--sortie) .4s forwards}
.hero .actions{margin-top:clamp(1.5rem,2.6vw,2.2rem);display:flex;gap:.85rem;flex-wrap:wrap;
  opacity:0;animation:parait .8s var(--sortie) .54s forwards}

/* le trait qui se dessine sous un mot */
.souligne{position:relative;white-space:nowrap;font-weight:700;color:#fff}
.souligne svg{position:absolute;left:-2%;bottom:-.28em;width:104%;height:.4em;overflow:visible}
.souligne path{stroke:var(--or);stroke-width:7;fill:none;stroke-linecap:round;
  stroke-dasharray:230;stroke-dashoffset:230;animation:trace 1.05s var(--sortie) .95s forwards}
@keyframes trace{to{stroke-dashoffset:0}}

.preuves{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;
  margin-top:clamp(1.6rem,3vw,2.3rem);padding-top:clamp(1.2rem,2.4vw,1.7rem);
  border-top:1px solid rgba(255,255,255,.15);
  opacity:0;animation:parait .8s var(--sortie) .66s forwards}
.preuves div{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;font-weight:600;
  color:rgba(255,255,255,.92);line-height:1.35}
.preuves div::before{content:"";width:15px;height:15px;flex:none;margin-top:.18em;background:var(--or);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* --- hero de page intérieure : même nuit, plus compact --- */
.hero.interieur{padding-block:clamp(2.2rem,5vw,4rem) clamp(2.4rem,5vw,4.2rem)}
.hero.interieur h1{font-size:clamp(2rem,1rem + 3.4vw,3.4rem)}
.hero.interieur .lead{max-width:56ch;opacity:1;animation:none}
@media (min-width:1080px){
  .hero.interieur .lead{margin-left:auto;margin-right:0;text-align:left;
    padding-left:clamp(1rem,3vw,3rem);border-left:1px solid rgba(255,255,255,.16)}
  .hero.interieur h1{max-width:22ch}
}
.hero.interieur .eyebrow,.hero.interieur .actions{opacity:1;animation:none}
.hero.interieur .fond{background:radial-gradient(60% 90% at 84% 0%,rgba(242,169,59,.24),transparent 66%),
                                 radial-gradient(50% 80% at 4% 100%,rgba(228,87,46,.18),transparent 70%)}
.hero.interieur .duo-titre{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
@media (max-width:900px){.hero.interieur .duo-titre{grid-template-columns:1fr;gap:1.2rem}}


/* ==================================================================
   07. LE SÉLECTEUR 1 À 5
   ================================================================== */
.panneau-choix{position:relative;isolation:isolate}
/* le médaillon d'illustration qui flotte derrière la carte */
.medaillon{position:absolute;right:-7%;top:-30%;width:min(54%,290px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;z-index:0;opacity:.8;filter:saturate(.95);
  -webkit-mask-image:radial-gradient(circle,#000 46%,transparent 72%);
          mask-image:radial-gradient(circle,#000 46%,transparent 72%);
  animation:flotte 11s ease-in-out infinite}
.medaillon img{width:100%;height:100%;object-fit:cover;object-position:center center}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.carte-choix{position:relative;z-index:2;background:var(--creme);border-radius:var(--r-xl);
  padding:clamp(1.4rem,2.8vw,2.25rem);box-shadow:var(--o-nuit-4);border:1px solid rgba(255,255,255,.5)}
.carte-choix::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.panneau-choix > .contour{position:absolute;inset:1.3rem -1.3rem -1.3rem 1.3rem;
  border:2px solid rgba(242,169,59,.55);border-radius:var(--r-xl);z-index:0}

/* titre de la carte du hero : la promesse, en clair, au-dessus du sélecteur */
.titre-choix{display:block;margin-bottom:clamp(.9rem,2vw,1.2rem)}
.titre-choix strong{display:block;color:var(--nuit);font-weight:800;letter-spacing:-.03em;line-height:1.15;
  font-size:clamp(1.15rem,.6vw + 1.02rem,1.4rem)}
.titre-choix span{display:block;color:var(--doux);font-size:clamp(.88rem,.2vw + .84rem,.96rem);
  margin-top:.25rem;line-height:1.35}

fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}

.bloc-selecteur legend{
  font-weight:800;color:var(--nuit);letter-spacing:-.025em;line-height:1.25;
  font-size:clamp(1.02rem,.5vw + .92rem,1.16rem);margin-bottom:.9rem}

/* un peu d'air au-dessus : la pastille choisie se soulève, il lui faut la place */
.selecteur{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.35rem,1vw,.7rem);padding-top:.45rem}
.choix{position:relative}
.choix input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.choix .pastille{
  display:grid;place-items:center;aspect-ratio:1;background:var(--papier);
  border:1.5px solid var(--trait-2);border-radius:14px;
  font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:800;color:var(--nuit);
  cursor:pointer;box-shadow:var(--o-1);
  transition:transform .42s var(--ressort),background .3s,color .3s,border-color .3s,box-shadow .35s;
}
.choix:hover .pastille{border-color:var(--nuit);transform:translateY(-4px);box-shadow:var(--o-2)}
.choix input:checked + .pastille{
  background:var(--nuit);border-color:var(--nuit);color:#fff;
  transform:translateY(-9px) scale(1.09);
  box-shadow:0 8px 16px rgba(6,18,32,.18),0 20px 40px rgba(6,18,32,.26);
}
.choix input:focus-visible + .pastille{outline:3px solid var(--brique);outline-offset:3px}
/* les rangs inférieurs au choix se teintent : la jauge se remplit */
.choix.avant .pastille{border-color:rgba(242,169,59,.8);
  background:color-mix(in srgb,var(--or-clair) 45%,#fff);color:var(--nuit)}

/* la visualisation : des téléphones qui s'allument un par un */
.rappels{display:flex;gap:.5rem;margin-top:clamp(1rem,2vw,1.35rem);min-height:44px;align-items:center}
.rappels i{
  width:clamp(32px,4.4vw,40px);height:clamp(32px,4.4vw,40px);border-radius:12px;
  background:var(--creme-2);border:1px solid var(--trait);display:grid;place-items:center;
  opacity:.4;transform:scale(.78);
  transition:opacity .45s var(--sortie),transform .5s var(--ressort),
             background .45s,border-color .45s,box-shadow .45s;
}
.rappels i svg{width:17px;height:17px;stroke:var(--doux);fill:none;stroke-width:2.1;transition:stroke .4s}
.rappels i.on{opacity:1;transform:none;background:var(--brique-vif);border-color:var(--brique);
  box-shadow:0 2px 4px rgba(228,87,46,.28),0 10px 22px rgba(228,87,46,.28)}
.rappels i.on svg{stroke:#fff}
.rappels i.sonne{animation:sonne .55s var(--ease)}
@keyframes sonne{0%,100%{transform:none}25%{transform:rotate(-11deg) scale(1.09)}60%{transform:rotate(8deg) scale(1.05)}}
.rappels i:nth-child(1){transition-delay:0s}
.rappels i:nth-child(2){transition-delay:.07s}
.rappels i:nth-child(3){transition-delay:.14s}
.rappels i:nth-child(4){transition-delay:.21s}
.rappels i:nth-child(5){transition-delay:.28s}

.note-selecteur{font-size:.88rem;margin-top:.85rem;color:var(--ardoise);line-height:1.55}
.carte-choix .btn{margin-top:1.25rem;width:100%}

@media (min-width:1151px){.medaillon{right:-2%}}
@media (max-width:1150px){.medaillon{right:-2%;top:-24%;width:min(46%,230px)}}
@media (max-width:940px){
  .panneau-choix{max-width:620px;width:100%;margin-inline:auto}
  .medaillon{right:-2%;top:-20%;width:min(42%,215px)}
}
@media (max-width:520px){
  .panneau-choix > .contour{inset:1rem -1rem -1rem 1rem}
  .choix .pastille{border-radius:11px}
}


/* ==================================================================
   08. BANDEAU DES MÉTIERS
   ================================================================== */
.bandeau{background:var(--encre);color:#fff;padding:.95rem 0;overflow:hidden;position:relative;z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.piste{display:flex;gap:2.6rem;width:max-content;animation:defile 40s linear infinite}
.bandeau:hover .piste,.bandeau:focus-within .piste{animation-play-state:paused}
.piste span{font-size:.87rem;font-weight:600;color:rgba(255,255,255,.58);white-space:nowrap;
  display:flex;align-items:center;gap:2.6rem}
.piste span::after{content:"◆";color:var(--or);font-size:.48rem}
.piste span.actif{color:#fff;font-weight:800}
@keyframes defile{to{transform:translateX(-50%)}}


/* ==================================================================
   09. SECTIONS
   ================================================================== */
section{padding-block:var(--section-y);position:relative}
section.creme{background:var(--creme-2)}
section.nuit{background:var(--nuit);color:var(--doux-nuit);overflow:clip}
section.nuit h2,section.nuit h3{color:#fff}
section.nuit .chapeau{color:rgba(255,255,255,.8)}
section.nuit a:not(.btn):not(.lien-or){color:var(--or)}
section.nuit::before{content:"";position:absolute;inset:auto -10% -35% -10%;height:70%;pointer-events:none;
  background:radial-gradient(48% 60% at 18% 100%,rgba(242,169,59,.17),transparent 70%),
             radial-gradient(40% 55% at 88% 90%,rgba(228,87,46,.13),transparent 72%)}
section.nuit > .wrap{position:relative;z-index:1}

/* semis de points, pour donner du fond aux sections claires */
section.creme::before,section.pointille::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,31,56,.07) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 82% 0%,#000,transparent 70%);
          mask-image:radial-gradient(ellipse 60% 60% at 82% 0%,#000,transparent 70%)}
section.creme > .wrap,section.pointille > .wrap{position:relative;z-index:1}

.entete{max-width:46ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.entete.centre{margin-inline:auto;text-align:center}
.entete.centre .chapeau{margin-inline:auto}
.sur-titre{display:block;font-family:var(--serif);font-style:italic;font-size:1.14rem;
  color:var(--brique-lien);margin-bottom:.45rem}
section.nuit .sur-titre{color:var(--or)}
.chapeau{max-width:64ch;font-size:clamp(1rem,.3vw + .95rem,1.12rem)}
.chapeau + .chapeau{margin-top:1em}

/* composition asymétrique sur grand écran : titre à gauche, chapeau décalé */
.entete-large{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.2rem,4vw,4rem);align-items:end;max-width:none;margin-bottom:clamp(2rem,4vw,3.4rem)}
.entete-large .chapeau{max-width:52ch}
@media (max-width:940px){.entete-large{grid-template-columns:1fr;gap:1rem;align-items:start}}


/* ==================================================================
   10. ÉTAPES, DÉMONSTRATION, COMPARATIF, MÉTIERS
   ================================================================== */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--gap)}
.etape{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-l);
  padding:clamp(1.4rem,2.4vw,2.2rem);position:relative;overflow:hidden;
  transition:transform .5s var(--sortie),box-shadow .5s,border-color .5s}
.etape::after{content:"";position:absolute;inset:auto auto -55% -18%;width:66%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(228,87,46,.12),transparent 70%);
  opacity:0;transition:opacity .5s}
.etape:hover{transform:translateY(-8px);box-shadow:var(--o-3);border-color:transparent}
.etape:hover::after{opacity:1}
.etape > *{position:relative}
.etape .n{font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,4vw,3.2rem);
  color:var(--brique-lien);line-height:.9;display:block;margin-bottom:.55rem}
.etape p{font-size:.97rem}
/* sur très grand écran, la troisième carte se décale : la ligne respire */
@media (min-width:1180px){
  .etapes.decalee > :nth-child(2){transform:translateY(1.6rem)}
  .etapes.decalee > :nth-child(2):hover{transform:translateY(calc(1.6rem - 8px))}
  .etapes.decalee > :nth-child(3){transform:translateY(3.2rem)}
  .etapes.decalee > :nth-child(3):hover{transform:translateY(calc(3.2rem - 8px))}
}

/* --- la démonstration du sélecteur, dans la section « le principe » --- */
.demo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.4rem,4vw,3rem);
  align-items:center;background:var(--papier);border:1px solid var(--trait);
  border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.6rem);box-shadow:var(--o-3);position:relative;overflow:hidden}
.demo::after{content:"";position:absolute;inset:auto -12% -60% auto;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,169,59,.16),transparent 70%);pointer-events:none}
.demo > *{position:relative}
@media (max-width:880px){.demo{grid-template-columns:1fr}}
.demo-selecteur{display:flex;gap:clamp(.4rem,1.2vw,.7rem)}
.demo-selecteur .d{width:clamp(48px,6vw,62px);aspect-ratio:1;display:grid;place-items:center;
  border-radius:14px;border:1.5px solid var(--trait-2);background:var(--creme);
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:800;color:var(--nuit);
  transition:transform .42s var(--ressort),background .3s,color .3s,border-color .3s,box-shadow .35s}
.demo-selecteur .d.avant{border-color:rgba(242,169,59,.8);background:color-mix(in srgb,var(--or-clair) 45%,#fff)}
.demo-selecteur .d.actif{background:var(--nuit);border-color:var(--nuit);color:#fff;
  transform:translateY(-8px) scale(1.07);box-shadow:var(--o-3)}
.demo-note{font-size:clamp(.98rem,.3vw + .92rem,1.08rem)}

/* --- comparatif --- */
.versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  gap:var(--gap);align-items:start}
.colonne{border-radius:var(--r-l);padding:clamp(1.5rem,2.6vw,2.4rem);position:relative}
.colonne.eux{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.colonne.nous{background:var(--creme);box-shadow:var(--o-nuit-4);color:var(--ardoise)}
.colonne.nous h3{color:var(--nuit)}
@media (min-width:1080px){.colonne.nous{transform:translateY(-1.4rem)}}
.sceau{display:inline-block;margin-bottom:.85rem;font-size:.67rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:800}
.colonne.eux .sceau{color:rgba(255,255,255,.5)}
.colonne.nous .sceau{color:var(--brique-lien)}
.colonne h3{font-size:clamp(1.15rem,.5vw + 1.05rem,1.4rem)}
.colonne ul{list-style:none;margin-top:1rem}
.colonne li{padding:.78rem 0 .78rem 2rem;position:relative;font-size:.97rem;line-height:1.5}
.colonne li + li{border-top:1px solid rgba(255,255,255,.1)}
.colonne.nous li + li{border-top-color:var(--trait)}
.colonne li::before{position:absolute;left:0;top:.78rem;font-weight:800;font-size:.9rem}
.colonne.eux li{color:rgba(255,255,255,.75)}
.colonne.eux li::before{content:"✕";color:#8FADD1}
.colonne.nous li::before{content:"✓";color:var(--brique-lien)}

/* --- métiers --- */
.metiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:.85rem;margin-top:clamp(1.8rem,3vw,2.8rem)}
@media (min-width:880px){.metiers{grid-template-columns:repeat(3,1fr)}}
.metier{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:1.05rem 1.25rem;transition:transform .4s var(--sortie),box-shadow .4s,border-color .4s}
.metier:hover{transform:translateY(-5px);box-shadow:var(--o-2)}
.metier strong{display:block;color:var(--nuit);font-size:.98rem;font-weight:800;letter-spacing:-.015em}
.metier span{display:block;font-size:.78rem;color:var(--doux);margin-top:2px}
.metier.ouvert{background:var(--nuit);border-color:var(--nuit);box-shadow:var(--o-2)}
.metier.ouvert strong{color:#fff}
.metier.ouvert span{color:var(--or);font-weight:700}


/* ==================================================================
   11. FORMULAIRE
   ================================================================== */
.form-bloc{background:var(--papier);border-radius:var(--r-xl);max-width:54rem;
  margin:clamp(1.8rem,4vw,3rem) auto 0;border:1px solid var(--trait);
  box-shadow:var(--o-4);overflow:hidden;position:relative}
.form-entete{background:var(--nuit);padding:clamp(.85rem,1.6vw,1.2rem) clamp(1.2rem,3vw,2.5rem);
  display:flex;gap:clamp(.7rem,2vw,1.6rem);flex-wrap:wrap;font-size:.79rem;font-weight:700;
  color:rgba(255,255,255,.92)}
.form-entete span{display:inline-flex;align-items:center;gap:.4rem}
.form-entete span::before{content:"✓";color:var(--or);font-weight:800}
.form-corps{padding:clamp(1.3rem,3vw,2.6rem)}

.form-bloc label{display:block;font-weight:700;color:var(--nuit);margin:1.3rem 0 .45rem;font-size:.92rem}
.form-bloc .duo-champ:first-of-type label{margin-top:0}
/* un <legend> se pose sur la bordure du fieldset et ignore le padding :
   on le remet dans le flux pour qu'il tienne dans le cadre du sélecteur. */
.form-corps > fieldset{margin-top:1.4rem}
.form-bloc legend{float:left;width:100%;font-weight:700;color:var(--nuit);font-size:.92rem;margin:0 0 .55rem}
.form-bloc fieldset > *:not(legend){clear:both}
.form-bloc legend.hors-ecran{float:none;width:1px}
.duo-champ{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}

.form-bloc input[type=text],.form-bloc input[type=tel],.form-bloc input[type=email],
.form-bloc select,.form-bloc textarea{
  width:100%;padding:.9rem 1rem;border:1.5px solid var(--trait-2);border-radius:var(--r-s);
  font-family:inherit;font-size:1rem;background:var(--creme);color:var(--nuit);
  transition:border-color .25s,background .25s,box-shadow .25s}
.form-bloc textarea{resize:vertical;min-height:5.5rem}
.form-bloc select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230B1F38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px}
.form-bloc input:focus,.form-bloc select:focus,.form-bloc textarea:focus{
  outline:none;border-color:var(--nuit);background:var(--papier);box-shadow:0 0 0 4px rgba(11,31,56,.1)}
.form-bloc input:focus-visible,.form-bloc select:focus-visible,.form-bloc textarea:focus-visible{
  outline:3px solid var(--brique);outline-offset:2px}
.form-bloc input:user-invalid,.form-bloc select:user-invalid{border-color:#B4432A}

.choix-urgence{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.8rem}
.choix-urgence label{margin:0!important;font-weight:600!important;font-size:.95rem!important;
  border:1.5px solid var(--trait-2);border-radius:var(--r-s);padding:.85rem 1.1rem;cursor:pointer;
  display:flex;align-items:center;gap:.6rem;background:var(--creme);
  transition:border-color .25s,background .25s,transform .3s var(--sortie),box-shadow .3s}
.choix-urgence label:hover{border-color:var(--nuit);transform:translateY(-2px)}
.choix-urgence label:has(input:checked){border-color:var(--nuit);background:var(--papier);box-shadow:var(--o-2)}
.choix-urgence input{accent-color:var(--brique);width:1.1rem;height:1.1rem;flex:none}
.choix-urgence input:focus-visible{outline:3px solid var(--brique);outline-offset:3px}

.form-bloc .bloc-selecteur{margin-top:1.6rem;background:var(--creme);border:1px solid var(--trait);
  border-radius:var(--r-l);padding:clamp(1.1rem,2.4vw,1.6rem)}
.form-bloc .bloc-selecteur legend{font-size:clamp(1rem,.4vw + .92rem,1.12rem);font-weight:800;
  letter-spacing:-.025em;margin:0 0 .9rem}
.form-bloc .bloc-selecteur .selecteur{grid-template-columns:repeat(5,minmax(0,1fr));max-width:26rem}
.form-bloc .bloc-selecteur .pastille{background:var(--papier)}

.note-rgpd{font-size:.84rem;margin-top:1.4rem;background:var(--creme);border:1px solid var(--trait);
  border-radius:var(--r-s);padding:.9rem 1.1rem;line-height:1.55}
.form-bloc .btn{margin-top:1.5rem;width:100%;font-size:1.06rem;padding-block:1.1rem}

/* formulaire court, page plomberie */
.form-court{max-width:34rem;margin-inline:0}
.form-court .form-corps{padding:clamp(1.3rem,3vw,2rem)}
.form-court label:first-of-type{margin-top:0}


/* ==================================================================
   12. FAQ
   ================================================================== */
details.faq{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-m);
  margin-top:.75rem;overflow:hidden;transition:box-shadow .35s,border-color .35s}
details.faq[open]{box-shadow:var(--o-2);border-color:transparent}
details.faq summary{cursor:pointer;padding:clamp(1rem,2vw,1.3rem) clamp(1.1rem,2.4vw,1.6rem);
  font-weight:700;color:var(--nuit);list-style:none;position:relative;padding-right:3.4rem;
  font-size:clamp(.99rem,.3vw + .94rem,1.06rem);letter-spacing:-.015em;line-height:1.4}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after,details.faq summary::before{content:"";position:absolute;right:1.35rem;top:50%;
  width:14px;height:2px;background:var(--brique);border-radius:2px;transition:transform .35s var(--sortie)}
details.faq summary::after{transform:translateY(-50%)}
details.faq summary::before{transform:translateY(-50%) rotate(90deg)}
details.faq[open] summary::before{transform:translateY(-50%) rotate(0)}
details.faq summary:hover{color:var(--brique-lien)}
details.faq .rep{padding:0 clamp(1.1rem,2.4vw,1.6rem) 1.4rem;animation:ouvre .35s var(--sortie)}
@keyframes ouvre{from{opacity:0;transform:translateY(-6px)}}
section.nuit details.faq{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
section.nuit details.faq summary{color:#fff}


/* ==================================================================
   13. CARTES DE GUIDES
   ================================================================== */
.grille-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--gap)}
.carte{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-l);
  padding:clamp(1.4rem,2.4vw,2.1rem);position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--sortie),box-shadow .5s,border-color .5s}
.carte::after{content:"";position:absolute;inset:-40% -30% auto auto;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,169,59,.20),transparent 70%);opacity:0;transition:opacity .5s}
.carte:hover{transform:translateY(-8px);box-shadow:var(--o-3);border-color:transparent}
.carte:hover::after{opacity:1}
.carte > *{position:relative}
.carte .rang{font-family:var(--serif);font-style:italic;color:var(--brique-lien);font-size:1.5rem;
  line-height:1;display:block;margin-bottom:.6rem}
.carte h3 a{color:var(--nuit);text-decoration:none}
.carte h3 a::after{content:"";position:absolute;inset:0}
.carte:hover h3 a{color:var(--brique-lien)}
.carte p{font-size:.96rem}
.carte .lire{margin-top:auto;padding-top:1rem}


/* ==================================================================
   14. ARTICLES
   ================================================================== */
.page-article{padding-block:clamp(2.5rem,6vw,4.5rem)}
.page-article > .wrap{--max:1140px}
.page-article > .wrap:not(.avec-sommaire){--max:940px}
/* deux colonnes sur desktop : sommaire collant à gauche, texte à droite */
.avec-sommaire{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:1000px){.avec-sommaire{grid-template-columns:1fr;gap:2rem}}

.sommaire{position:sticky;top:clamp(5rem,9vw,6.5rem);font-size:.9rem}
.sommaire h2{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--doux);
  font-weight:800;margin-bottom:.9rem}
.sommaire ol{list-style:none;counter-reset:s;border-left:1px solid var(--trait)}
.sommaire li{counter-increment:s}
.sommaire a{display:block;padding:.5rem 0 .5rem 1rem;margin-left:-1px;border-left:2px solid transparent;
  color:var(--ardoise);text-decoration:none;line-height:1.35;
  transition:color .25s,border-color .25s,padding-left .25s}
.sommaire a::before{content:counter(s) ". ";color:var(--doux);font-weight:700}
.sommaire a:hover{color:var(--nuit);padding-left:1.25rem}
.sommaire a.vu-ici{color:var(--nuit);font-weight:700;border-left-color:var(--brique)}
.sommaire a.vu-ici::before{color:var(--brique-lien)}
@media (max-width:1000px){
  .sommaire{position:static;background:var(--papier);border:1px solid var(--trait);
    border-radius:var(--r-m);padding:1.1rem 1.3rem;box-shadow:var(--o-1)}
  .sommaire ol{border-left:0}
  .sommaire a{padding-left:0;border-left:0}
  .sommaire a:hover{padding-left:.25rem}
  .sommaire a.vu-ici{border-left:0}
}

.article{max-width:58ch;font-size:clamp(1.02rem,.3vw + .95rem,1.13rem);line-height:1.72}
.article > h2{margin-top:2.4em;scroll-margin-top:clamp(4.5rem,9vw,6rem);
  font-size:clamp(1.6rem,.85rem + 2.1vw,2.4rem)}
.article > h2:first-child{margin-top:0}
.article > h3{margin-top:1.8em;font-size:clamp(1.1rem,.4vw + 1.02rem,1.28rem)}
.article ul,.article ol{margin:1.1em 0 1.1em 1.3em}
.article li{margin-top:.5em}
.article p + .encadre,.article p + .liste-verif{margin-top:1.6em}
.article .lead{font-size:clamp(1.1rem,.4vw + 1rem,1.28rem);color:var(--nuit);font-weight:500}

/* encadré, mis en valeur : cadre décalé + trait de tampon */
.encadre{position:relative;background:var(--papier);border:1px solid var(--trait);
  border-left:4px solid var(--brique);border-radius:0 var(--r-m) var(--r-m) 0;
  padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.2rem,2.4vw,1.9rem);
  margin:clamp(1.8rem,3.5vw,2.6rem) 0;box-shadow:var(--o-2);font-size:.98rem}
.encadre::after{content:"";position:absolute;inset:.8rem -.8rem -.8rem .8rem;
  border:1.5px solid rgba(242,169,59,.5);border-radius:0 var(--r-m) var(--r-m) 0;z-index:-1}
@media (max-width:760px){.encadre::after{inset:.6rem 0 -.6rem .6rem}}
.tampon-titre{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brique-lien);
  font-weight:800;display:block;margin-bottom:.5rem}

.liste-verif{list-style:none;margin:1.2em 0 0!important;background:var(--papier);
  border:1px solid var(--trait);border-radius:var(--r-m);padding:.4rem clamp(1rem,2.4vw,1.5rem)!important;
  box-shadow:var(--o-1)}
.liste-verif li{padding:.8rem 0 .8rem 2rem;position:relative;margin-top:0!important;font-size:.98rem;line-height:1.55}
.liste-verif li + li{border-top:1px solid var(--trait)}
.liste-verif li::before{content:"";position:absolute;left:0;top:1.05rem;width:16px;height:16px;
  background:var(--brique-lien);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* rappel d'action en fin d'article */
.rappel-action{margin-top:clamp(2.2rem,4vw,3rem);background:var(--nuit);color:rgba(255,255,255,.84);
  border-radius:var(--r-l);padding:clamp(1.4rem,3vw,2.2rem);position:relative;overflow:hidden;
  box-shadow:var(--o-3)}
.rappel-action::before{content:"";position:absolute;inset:auto -20% -80% auto;width:70%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(242,169,59,.22),transparent 70%);pointer-events:none}
.rappel-action > *{position:relative}
.rappel-action p{max-width:68ch}
.rappel-action a:not(.btn){color:var(--or)}
.rappel-action .btn{margin-top:1.1rem}

.apres-article{margin-top:clamp(2rem,4vw,3rem)}
.suite-lecture{margin-top:clamp(1.8rem,3vw,2.4rem);padding-top:1.3rem;border-top:1px solid var(--trait);
  font-size:.98rem}


/* ==================================================================
   15. PIED DE PAGE ET BARRE MOBILE
   ================================================================== */
footer.site{background:var(--encre);padding:clamp(2.8rem,6vw,4.5rem) 0 clamp(5rem,8vw,6rem);
  position:relative;overflow:hidden}
footer.site::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:80%;pointer-events:none;
  background:radial-gradient(40% 60% at 12% 100%,rgba(242,169,59,.12),transparent 70%)}
footer.site .wrap{position:relative}
footer.site,footer.site p,footer.site a{color:rgba(255,255,255,.72);font-size:.9rem}
footer.site a{text-decoration:none;transition:color .25s}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:clamp(1.5rem,3vw,2.4rem)}
footer.site .cols > :first-child{grid-column:span 1}
@media (min-width:1080px){footer.site .cols{grid-template-columns:1.5fr 1fr 1fr 1fr}}
footer.site h4{color:#fff;margin-bottom:.75rem;font-weight:800}
footer.site ul{list-style:none}
footer.site li{margin-top:.5rem}
footer.site .mention{margin-top:clamp(2rem,4vw,2.8rem);padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.14);font-size:.8rem}

.barre-appel{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;
  background:var(--brique);text-align:center;padding:.9rem 1rem;
  box-shadow:0 -6px 24px rgba(6,18,32,.28);
  transform:translateY(110%);transition:transform .45s var(--sortie)}
.barre-appel.visible{transform:none}
.barre-appel a{color:#fff;text-decoration:none;font-weight:700;font-size:1.01rem}
@media (max-width:1000px){.barre-appel{display:block}}


/* ==================================================================
   16. RÉVÉLATIONS
   ================================================================== */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .85s var(--sortie),transform .85s var(--sortie)}
.reveal.vu{opacity:1;transform:none}
.groupe > *{opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--sortie),transform .75s var(--sortie)}
.groupe.vu > *{opacity:1;transform:none}
.groupe.vu > *:nth-child(2){transition-delay:.1s}
.groupe.vu > *:nth-child(3){transition-delay:.2s}
.groupe.vu > *:nth-child(4){transition-delay:.3s}
.groupe.vu > *:nth-child(5){transition-delay:.4s}
.groupe.vu > *:nth-child(6){transition-delay:.5s}
/* le décalage vertical des étapes ne doit pas être écrasé par la révélation */
@media (min-width:1180px){
  .etapes.decalee.groupe.vu > :nth-child(2){transform:translateY(1.6rem)}
  .etapes.decalee.groupe.vu > :nth-child(3){transform:translateY(3.2rem)}
  .colonne.nous{transition:transform .75s var(--sortie),opacity .75s var(--sortie)}
  .versus.groupe.vu > .colonne.nous{transform:translateY(-1.4rem)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.groupe > *{opacity:1;transform:none}
  .hero h1 .ligne > span{transform:none}
  .hero .lead,.hero .actions,.preuves,.eyebrow{opacity:1;transform:none}
  .medaillon{animation:none}
  .piste{animation:none}
  .grain{display:none}
}