/* Garnier et Fils (démo 4dayvelopment), direction « l'urgence, tri d'abord ».
   Palette : blanc, noir encre #0E1116, bleu cobalt #1646E0, gris #F1F2F4. Rayon 0,5 à 1 rem.
   Polices auto-hébergées (SIL OFL 1.1) : Bricolage Grotesque pour les titres, Inter pour le texte. */
/* Rend le corps masqué par le <style> du <head> (garde-fou CLS). */
body{visibility:visible}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/fonts/bricolage-grotesque-var.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/inter-var.woff2") format("woff2")}
:root{
  --blanc:#FFFFFF;
  --gris:#F1F2F4;
  --encre:#0E1116;
  --bleu:#1646E0;
  --bleu-2:#0F37B8;
  --doux:#566070;
  --trait:#DADDE3;
  --nuit:#0E1116;
  --erreur:#B3261E;
  --r:.5rem;
  --r-carte:1rem;
  --gut:max(clamp(1rem, .4rem + 3vi, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --max:78rem;
  --section:clamp(3.5rem, 2rem + 5vi, 6rem);
  --titre:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Inter",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{font:400 1rem/1.55 var(--texte);color:var(--encre);background:var(--blanc);overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px;border-radius:.25rem}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
.visuel-seul{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:var(--gut);top:-4rem;background:var(--encre);color:#fff;padding:.7rem 1rem;border-radius:var(--r);z-index:50}
.skip:focus{top:.5rem}
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
mark{background:var(--bleu);color:#fff;padding:0 .16em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- statut en direct ---------- */
.statut{background:var(--bleu);color:#fff;font-size:.9rem;font-weight:500}
.statut .wrap{display:flex;flex-wrap:wrap;gap:.15rem 1.25rem;justify-content:center;padding-block:.55rem}
.statut-demo{background:#fff;color:var(--bleu);font-weight:700;border-radius:2rem;padding:0 .6rem;font-size:.8rem;align-self:center}
.statut-point{width:.6rem;height:.6rem;border-radius:50%;background:#fff;align-self:center;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:0;z-index:30;background:var(--blanc);border-bottom:1px solid var(--trait)}
.entete .wrap{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.logo{font:800 1.4rem/1 var(--titre);letter-spacing:-.03em;text-decoration:none;white-space:nowrap;padding-block:.75rem}
.logo b{color:var(--bleu)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:1.75rem;list-style:none;padding:0}
.nav a{font-weight:500;text-decoration:none;color:var(--doux);padding-block:.75rem}
.nav a:hover{color:var(--encre)}
.tel{display:inline-flex;gap:.55rem;align-items:center;background:var(--encre);color:#fff;text-decoration:none;font-weight:600;padding:.7rem 1.05rem;border-radius:var(--r);min-height:2.75rem;white-space:nowrap}
.burger{display:none;background:none;border:1.5px solid var(--encre);border-radius:var(--r);width:2.75rem;height:2.75rem;color:var(--encre);align-items:center;justify-content:center;cursor:pointer}
.burger .ico-fermer,.burger[aria-expanded="true"] .ico-ouvrir{display:none}
.burger[aria-expanded="true"] .ico-fermer{display:block}
@media (max-width:56rem){
  .burger{display:inline-flex;margin-left:auto}
  .tel{margin-left:0}
  .tel span{display:none}
  .tel{width:2.75rem;padding:0;justify-content:center}
  .nav{position:absolute;inset:100% 0 auto;margin:0;background:var(--blanc);border-bottom:1px solid var(--trait);
    padding:.5rem var(--gut) 1rem;display:none;box-shadow:0 18px 30px -20px rgb(14 17 22 / .35)}
  .nav.ouvert{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:.9rem 0;border-bottom:1px solid var(--trait);color:var(--encre);font-weight:600}
}

/* ---------- hero + tri ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,4rem);
  align-items:start;padding-block:clamp(1.5rem,4vw,4rem)}
h1{font:800 clamp(2.5rem,1.5rem + 4.6vi,4.9rem)/.98 var(--titre);letter-spacing:-.035em}
h1 mark{display:inline-block;margin-top:.1em}
.hero-sous{color:var(--doux);font-size:1.125rem;margin:1.25rem 0 1.5rem;max-width:31rem}
.preuves{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.preuves li{border-top:2px solid var(--encre);padding-top:.6rem}
.preuves b{display:block;font:800 clamp(1.35rem,1rem + 1.2vi,1.8rem)/1.05 var(--titre);letter-spacing:-.02em}
.preuves span{display:block;color:var(--doux);font-size:.875rem;line-height:1.35;margin-top:.15rem}

.triage{border:1.5px solid var(--encre);border-radius:var(--r-carte);overflow:hidden;background:var(--blanc)}
.triage h2{font:700 1.1rem/1.3 var(--titre);padding:.9rem 1.1rem;background:var(--gris);border-bottom:1.5px solid var(--encre);
  display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
.triage h2 span{color:var(--doux);font:500 .85rem var(--texte);align-self:center}
.triage-corps{padding:1.1rem}
.cas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.chip{position:relative;display:flex;gap:.6rem;align-items:center;padding:.8rem .9rem;border:1.5px solid var(--trait);
  border-radius:.6rem;font-weight:600;cursor:pointer;min-height:3.25rem;line-height:1.25;transition:background .15s,border-color .15s,color .15s}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip:hover{border-color:var(--encre)}
.chip:has(input:checked){background:var(--bleu);border-color:var(--bleu);color:#fff}
.chip:has(input:focus-visible){outline:3px solid var(--bleu);outline-offset:2px}
.reponse{margin-top:1.15rem}
.reponse-titre{font:700 .8rem var(--texte);text-transform:uppercase;letter-spacing:.08em;color:var(--doux);margin-bottom:.7rem}
.gestes{counter-reset:g;list-style:none;padding:0;display:grid;gap:.7rem}
.gestes li{counter-increment:g;display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.7rem;align-items:start}
.gestes li::before{content:counter(g);font:700 .95rem/1 var(--titre);background:var(--encre);color:#fff;width:1.75rem;height:1.75rem;
  border-radius:.4rem;display:grid;place-items:center}
.alerte{margin-top:.9rem;font-size:.9rem;line-height:1.45;background:#FDECEA;border:1.5px solid var(--erreur);color:#6F130E;border-radius:.6rem;padding:.75rem .9rem;font-weight:600}
.cout{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--nuit);color:#fff;padding:1.1rem}
.cout b{display:block;font:800 clamp(1.45rem,1rem + 1.5vi,1.9rem)/1.05 var(--titre);letter-spacing:-.02em}
.cout span{display:block;color:#B4BBC8;font-size:.85rem;line-height:1.35;margin-top:.25rem}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:1.1rem}

.btn{display:inline-flex;gap:.55rem;align-items:center;justify-content:center;background:var(--bleu);color:#fff;font:700 1rem/1.2 var(--texte);
  text-decoration:none;padding:.85rem 1.2rem;border-radius:var(--r);border:1.5px solid var(--bleu);min-height:3rem;cursor:pointer;text-align:center}
.btn:hover{background:var(--bleu-2);border-color:var(--bleu-2)}
.btn-ligne{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-ligne:hover{background:var(--gris);border-color:var(--encre)}

/* ---------- sections ---------- */
.section{padding-block:var(--section)}
.section-tete{max-width:42rem;margin-bottom:2rem}
h2{font:800 clamp(1.9rem,1.2rem + 2.6vi,3rem)/1.05 var(--titre);letter-spacing:-.03em}
.section-tete p{color:var(--doux);font-size:1.1rem;margin-top:.9rem}
h2 mark{display:inline-block}

.liste{border:1.5px solid var(--encre);border-radius:var(--r-carte);overflow:hidden;max-width:46rem}
.liste-tete{font:700 1.1rem var(--titre);padding:.9rem 1.1rem;background:var(--gris);border-bottom:1.5px solid var(--encre);
  display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
.liste-tete span{color:var(--doux);font:500 .85rem var(--texte);align-self:center}
.ligne{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem;align-items:center;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--trait);cursor:pointer;min-height:4rem}
.ligne:hover{background:#FAFAFB}
.ligne input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.case{width:1.4rem;height:1.4rem;border:1.5px solid var(--encre);border-radius:.3rem;display:grid;place-items:center;color:transparent}
.case .ico{width:1rem;height:1rem;stroke-width:3}
.ligne:has(input:checked) .case{background:var(--bleu);border-color:var(--bleu);color:#fff}
.ligne:has(input:focus-visible){outline:3px solid var(--bleu);outline-offset:-3px}
.ligne-txt{font-weight:500}
.ligne-txt small{display:block;color:var(--doux);font-weight:400;font-size:.875rem}
.ligne b{font:700 1.15rem var(--titre);white-space:nowrap}
.total{background:var(--nuit);color:#fff;padding:1.1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.total small{display:block;color:#B4BBC8;font-size:.875rem}
.total b{display:block;font:800 2.1rem/1.1 var(--titre);letter-spacing:-.02em}
.regles{max-width:46rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem}
.regles div{border:1.5px solid var(--trait);border-radius:var(--r-carte);padding:.9rem 1rem}
.regles dt{font:700 .95rem var(--titre)}
.regles dd{color:var(--doux);font-size:.9rem;margin-top:.2rem}
.note{max-width:46rem;color:var(--doux);font-size:.9rem;margin-top:1rem}

/* ---------- zone ---------- */
.section-sombre{background:var(--nuit);color:#fff}
.section-sombre p{color:#B4BBC8}
.zone-grille{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.zone-grille h2{margin-bottom:.9rem}
.champ-zone{display:block;margin:1.5rem 0 .4rem;font-weight:600}
.select-cadre select{width:100%;max-width:22rem;font:600 1.05rem var(--texte);padding:.85rem 1rem;min-height:3.25rem;border-radius:var(--r);
  border:1.5px solid #3B4452;background:#161B22;color:#fff}
.zone-resultat{background:var(--bleu);border-radius:var(--r-carte);padding:1.6rem}
.zone-etiquette{display:block;font:700 .8rem var(--texte);text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.zone-resultat b{display:block;font:800 clamp(2.6rem,1.6rem + 4vi,4.2rem)/1 var(--titre);letter-spacing:-.04em;margin:.35rem 0 .5rem}
.zone-resultat span:last-child{color:#fff}

/* ---------- déroulé ---------- */
.etapes{list-style:none;padding:0;counter-reset:e;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.etapes li{counter-increment:e;border:1.5px solid var(--trait);border-radius:var(--r-carte);padding:1.25rem}
.etapes li::before{content:counter(e);display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.5rem;background:var(--bleu);
  color:#fff;font:800 1.1rem var(--titre);margin-bottom:1rem}
.etapes h3{font:700 1.15rem/1.25 var(--titre);letter-spacing:-.01em;margin-bottom:.5rem}
.etapes p{color:var(--doux);font-size:.95rem}

/* ---------- entreprise ---------- */
.section-gris{background:var(--gris)}
.entreprise{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.entreprise h2{margin-bottom:1rem}
.entreprise p+p{margin-top:.9rem}
.entreprise p{color:var(--doux);max-width:36rem}
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.chiffres div{background:var(--blanc);border:1.5px solid var(--trait);border-radius:var(--r-carte);padding:1.1rem}
.chiffres dt{color:var(--doux);font-size:.875rem}
.chiffres dd{font:800 clamp(1.5rem,1rem + 1.4vi,2rem)/1.1 var(--titre);letter-spacing:-.03em;margin-top:.2rem}

/* ---------- rappel ---------- */
.rappel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start;
  border:1.5px solid var(--encre);border-radius:var(--r-carte);padding:clamp(1.25rem,3vw,2.5rem)}
.rappel p{color:var(--doux);margin-top:.9rem}
.rappel-form{display:grid;gap:1rem}
.champ label{display:block;font-weight:600;margin-bottom:.35rem}
.champ input,.champ textarea{width:100%;font:400 1rem var(--texte);color:var(--encre);padding:.85rem 1rem;border:1.5px solid var(--encre);
  border-radius:var(--r);background:var(--blanc);min-height:3rem}
.champ textarea{resize:vertical}
.champ [aria-invalid="true"]{border-color:var(--erreur)}
.erreur{color:var(--erreur);font-weight:600;font-size:.9rem;margin-top:.35rem}
.erreur:empty{display:none}
.rappel p.rappel-ok{background:#E8EEFD;border:1.5px solid var(--bleu);border-radius:var(--r);padding:.8rem 1rem;color:var(--encre);margin-top:0}
.facultatif{font-weight:400;color:var(--doux)}
.champ input[type="file"]{padding:.6rem .75rem;font-size:.95rem}

/* ---------- pied ---------- */
.pied{background:var(--nuit);color:#fff;padding-block:3rem}
.pied-grille{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem}
.pied p,.pied address{color:#B4BBC8}
.pied .logo{color:#fff;display:inline-block;margin-bottom:.6rem}
.pied address{font-style:normal;display:grid;gap:.25rem}
.pied address a{color:#fff;font-weight:600;padding-block:.5rem}
.demo-mention{grid-column:1 / -1;border-top:1px solid #2A323D;padding-top:1.25rem;font-size:.875rem}

.pouce{display:none}
/* anneau de focus lisible sur les fonds sombres */
.section-sombre :focus-visible,.pied :focus-visible,.total :focus-visible,.cout :focus-visible{outline-color:#fff}

/* ---------- points de rupture : chaque palier règle un problème de contenu ---------- */
/* 4 étapes en ligne deviennent illisibles sous 64 rem : 2 colonnes */
@media (max-width:63.99rem){
  .etapes{grid-template-columns:1fr 1fr}
}
/* le tri et son titre ne tiennent plus côte à côte : on empile, titre d'abord */
@media (max-width:51.99rem){
  .hero,.zone-grille,.entreprise,.rappel{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr}
}
/* barre d'appel sous le pouce quand l'écran est tactile et étroit */
@media (max-width:47.99rem){
  html{scroll-padding-bottom:5.5rem}
  .pouce{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;position:fixed;inset-inline:0;bottom:0;z-index:25;
    padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));background:var(--blanc);
    border-top:1px solid var(--trait);box-shadow:0 -10px 24px -14px rgb(14 17 22 / .35);transition:transform .25s ease}
  .pouce .btn{min-height:2.9rem}
  .pouce.range{transform:translateY(110%)}
  .pied{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
}
/* les quatre cas et les deux boutons passent en pile sur petit téléphone */
/* sous 30 rem : une colonne pour les étapes, les chiffres et les boutons ; les quatre cas restent à deux */
@media (max-width:47.99rem){
  .regles{grid-template-columns:1fr}
}
@media (max-width:29.99rem){
  .cta,.etapes,.chiffres,.cout{grid-template-columns:1fr}
  .preuves{gap:.6rem}
  .preuves span{font-size:.8rem}
}
/* sous 23 rem : les quatre cas passent aussi en une colonne */
@media (max-width:22.99rem){
  .cas{grid-template-columns:1fr}
}
@media (max-height:30rem) and (orientation:landscape){
  .entete{position:static}
  .pouce{padding-block:.4rem calc(.4rem + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}