/* Polices auto-hébergées — aucun appel à un serveur tiers, aucune fuite d'adresse IP. */
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-400.woff2) format("woff2");
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-500.woff2) format("woff2");
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-400.woff2) format("woff2");
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-500.woff2) format("woff2");
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-600.woff2) format("woff2");
           font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-700.woff2) format("woff2");
           font-weight:700;font-style:normal;font-display:swap}

:root{--papier:#FAF8F2;--papier-fort:#F1EDE1;--blanc:#FFF;--encre:#111111;--bande:#000;
        --filet:#E3DFD3;--filet-fort:#C9C4B4;--jaune:#F6BD14;--or:#8A6206;--brique:#A33B1E;
        --gris:#4C4C48;--gris-clair:#6B6B64;--sur-noir:#B0B0AA;--ok:#2F6B3C;
        /* Dix-sept endroits demandaient « IBM Plex Mono », qui n'a jamais ete
           chargee : chiffres et dates tombaient sur la police a chasse fixe du
           systeme, differente d'une machine a l'autre. Une pile explicite, sans
           octet supplementaire, plutot qu'une police fantome. */
        --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
  *{box-sizing:border-box}
  body{margin:0;background:var(--papier);color:var(--encre);
       font-family:Archivo,"Helvetica Neue",Helvetica,sans-serif;font-size:15px;line-height:1.6;
       -webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:Newsreader,Georgia,"Times New Roman",serif;font-weight:500;margin:0;text-wrap:balance}
  p{margin:0}
  /* Un paragraphe issu d'un decoupage garde sa classe et prend .suite : sans
     marge propre il se collerait au precedent, p{margin:0} etant global.
     Specificite (0,1,0), donc les rythmes locaux (.clair p+p, .faq .rep p+p,
     .etapes p+p) restent prioritaires. */
  .suite{margin-top:.72em}
  .wrap{max-width:1200px;margin:0 auto;padding:0 64px}
  .band{padding:84px 0;border-top:1px solid var(--filet)}
  .band.first{padding-top:56px;border-top:0}
  .band.noir{background:var(--bande);color:#fff;border-top:0}
  .band.fort{background:var(--papier-fort)}
  h1{font-size:62px;line-height:1.04;letter-spacing:-.02em;max-width:15ch}
  h2{font-size:38px;line-height:1.12;letter-spacing:-.015em}
  h3{font-size:25px;line-height:1.2}
  .h4{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:19px;line-height:1.25}
  .over{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--or)}
  .over.j{color:var(--jaune)}.over.g{color:var(--gris-clair)}
  .lede{font-size:17px;line-height:1.62;color:var(--gris);max-width:70ch}
  .band.noir .lede{color:var(--sur-noir)}
  .cap{font-size:13px;line-height:1.55;color:var(--gris-clair)}
  .band.noir .cap{color:var(--sur-noir)}
  .rule2{border:0;border-top:2px solid var(--encre);width:64px;margin:0 0 28px}
  .band.noir .rule2{border-top-color:var(--jaune)}
  .grid{display:grid;gap:24px}
  .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
  .card{background:var(--blanc);border:1px solid var(--filet);padding:28px;display:flex;flex-direction:column}
  .card.mis{border:2px solid var(--encre)}
  .band.noir .card{background:#0A0A0A;border-color:#2A2A28}
  .scroll{overflow-x:auto;border:1px solid var(--filet);background:var(--blanc)}
  /* Un enfant de grille ne descend pas sous sa largeur de contenu sans ceci :
     un tableau large ferait alors deborder toute la page au lieu de defiler. */
  .grid>*{min-width:0}
  .scroll{max-width:100%}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
     color:var(--gris-clair);padding:14px 18px;border-bottom:2px solid var(--encre);vertical-align:bottom}
  th.mis{background:var(--papier-fort);color:var(--encre)}
  td{padding:14px 18px;border-bottom:1px solid var(--filet);vertical-align:top}
  td.mis{background:var(--papier-fort)}
  td.lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
         color:var(--gris-clair);white-space:nowrap;width:1%}
  tr:last-child td{border-bottom:0}
  .price{font-family:Newsreader,Georgia,serif;font-size:25px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .price.hi{border-bottom:2px solid var(--jaune);display:inline-block}
  .line{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
        padding:12px 0;border-bottom:1px solid var(--filet)}
  .line:last-of-type{border-bottom:0}
  .band.noir .line{border-bottom-color:#2A2A28}
  .btn{display:inline-flex;align-items:center;background:var(--jaune);color:var(--encre);
       padding:17px 28px;font-size:15px;font-weight:700;line-height:1}
  .btn.s{background:transparent;border:1px solid var(--filet-fort)}
  .band.noir .btn.s{border-color:#3A3A36;color:#fff}
  .past{width:34px;height:34px;background:var(--jaune);color:var(--encre);display:flex;
        align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
  .warn{border-left:3px solid var(--jaune);padding-left:20px}
  .liv{border-top:1px solid var(--filet);margin-top:auto;padding-top:14px}
  .qa{border-top:1px solid var(--filet);padding:22px 0}
  .qa:last-child{border-bottom:1px solid var(--filet)}
  .ess{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--filet)}
  .ess:last-child{border-bottom:0}
  .ess .n{font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1;color:var(--gris-clair);padding-top:2px}
  .retenir{background:var(--bande);color:#fff;padding:22px 26px;margin-top:28px;
           display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
  .retenir .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
              color:var(--jaune);white-space:nowrap;padding-top:3px}
  .retenir p{font-size:15px;line-height:1.6;color:#fff}
  .band.fort .retenir,.band .retenir{background:var(--bande)}
  .tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:32px;border-top:2px solid var(--encre)}
  .tl.tl4{grid-template-columns:repeat(4,1fr)}
  .tl>div{padding:20px 20px 0 0;border-right:1px solid var(--filet)}
  .tl>div:last-child{border-right:0;padding-right:0}
  .tl .j{font-family:Newsreader,Georgia,serif;font-size:25px;line-height:1;margin-bottom:10px}
  .tl .j span{color:var(--or)}
  .band.noir .tl .j span,.bilan .tl .j span{color:var(--jaune)}
  .chk{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--filet)}
  .chk:last-child{border-bottom:0}
  .chk .b{width:18px;height:18px;border:2px solid var(--encre);margin-top:3px}
  .chk.non .b{border-color:var(--brique);position:relative}
  .chk.non .b::before,.chk.non .b::after{content:"";position:absolute;left:2px;top:6px;width:10px;height:2px;
                                          background:var(--brique)}
  .chk.non .b::before{transform:rotate(45deg)}
  .chk.non .b::after{transform:rotate(-45deg)}
  .chk.oui .b{border-color:var(--ok);position:relative}
  .chk.oui .b::after{content:"";position:absolute;left:3px;top:4px;width:7px;height:4px;
                     border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
  .oui,.non{font-weight:700}
  .oui{color:var(--ok)}.non{color:var(--brique)}
  @media(max-width:900px){.wrap{padding:0 20px}h1{font-size:38px}h2{font-size:28px}
    .band{padding:44px 0}.g2,.g3,.g4{grid-template-columns:1fr}
    .tl{grid-template-columns:1fr}.tl>div{border-right:0;border-bottom:1px solid var(--filet);padding:18px 0}
    .retenir{grid-template-columns:1fr;gap:10px}}


/* ===== En-tête ===== */
.nav{max-width:1200px;margin:0 auto;padding:16px 64px;display:flex;align-items:center;
     justify-content:space-between;gap:32px}
.nav .logo{display:flex;align-items:center;gap:12px;text-decoration:none;border:0}
.nav .mark{width:82px;height:auto;flex-shrink:0;display:block}
footer .signature{display:flex;align-items:center;gap:14px;margin:0 0 14px}
footer .signature .mark{width:96px;height:auto;flex-shrink:0;display:block}
footer .signature span{font-family:Newsreader,Georgia,serif;font-size:23px;line-height:1.12;color:#fff;
  white-space:nowrap}
.nav .nom{font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.1;color:var(--encre)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px}
.nav a{color:var(--gris);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--jaune)}
header{border-bottom:1px solid var(--filet);background:var(--papier);position:sticky;top:0;z-index:20}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--jaune);color:var(--encre);padding:12px 18px;z-index:50}

/* ===== Pied de page ===== */
/* Le pied de page est partage par toutes les pages, mais trois d'entre elles
   redefinissent .wrap dans leur style local (780 px, 900 px) : le pied s'y
   retrouvait plus etroit et decale. Il a donc son propre conteneur, qu'aucune
   page ne peut atteindre. Meme correction que pour la bande de rappel. */
.pied-wrap{max-width:1200px;margin:0 auto;padding:0 64px}
footer{background:var(--bande);color:#fff;padding:56px 0 36px}
/* La premiere colonne porte la signature : logo + « Votre Référent / Qualité »
   sur deux lignes. A 1.4fr il ne restait que 135 px au texte, qui repassait a
   la ligne tout seul et cassait le <br> voulu. */
footer .cols{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:32px}
footer .ftit{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
             color:var(--jaune);margin:0 0 12px;font-family:Archivo,sans-serif}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:7px}
footer a{color:#fff;text-decoration:none;font-size:14px;border:0}
footer a:hover{color:var(--jaune)}
footer .social{margin-top:14px}
footer .social a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--sur-noir)}
footer .social a:hover{color:var(--jaune)}
footer .social svg{flex:none;opacity:.85}
footer .social a:hover svg{opacity:1}
footer .legal{border-top:1px solid #2A2A28;margin-top:36px;padding-top:20px}

/* ===== Liens et accessibilité ===== */
a{color:var(--or)}
.band a{color:var(--or)}
/* Sur fond noir, l'or tombe a 3,83:1. Le jaune y passe a 12,2:1. */
.band.noir a,.bilan a{color:var(--jaune)}
.band.noir a{color:var(--jaune)}
/* La couleur de lien ne doit pas l'emporter sur celle des boutons :
   un bouton plein reste noir sur jaune, un bouton bordé reste blanc sur fond noir. */
.band .btn:not(.s),.bilan .btn:not(.s){color:var(--encre)}
.band.noir .btn.s,.bilan .btn.s{color:#fff}
:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}
a.btn,button.btn{text-decoration:none;border:0;cursor:pointer;font-family:Archivo,sans-serif}
a.btn.s{border:1px solid var(--filet-fort)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:900px){
  .nav{padding:12px 20px}
  /* L'adresse info@votrereferentqualite.com ne se coupe pas : en deux colonnes
     elle imposait 235 px a gauche et 90 px a droite, ou « Qui vous / accompagne »
     se brisait. Une seule colonne sous 560 px, et min-width:0 au-dessus. */
  footer .cols{grid-template-columns:1fr 1fr}
  footer .cols>*{min-width:0}
  footer .cols a{overflow-wrap:anywhere}
}

/* ===== Navigation mobile ===== */
.burger{display:none;background:transparent;border:1px solid var(--filet-fort);padding:14px 18px;min-height:44px;
        font:600 13px/1 Archivo,sans-serif;color:var(--encre);cursor:pointer;letter-spacing:.06em;
        text-transform:uppercase}
.burger[aria-expanded="true"]{background:var(--encre);color:#fff;border-color:var(--encre)}
/* Aucun libelle du menu ne se coupe en deux lignes. Logo, six entrees et
   bouton demandent 940 px : en dessous de 1 080 px d'ecran, le bouton Menu
   prend le relais, au lieu de laisser le menu se tasser sur deux lignes. */
.nav ul a,.nav .nom,.nav>.btn{white-space:nowrap}
.nav .logo,.nav>.btn{flex-shrink:0}
@media(max-width:1079px){
  .nav{flex-wrap:wrap;gap:12px}
  .nav .logo{margin-right:auto}
  .burger{display:block;order:3}
  .nav>.btn{order:2;padding:12px 18px;font-size:13px}
  .nav ul{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;
          border-top:1px solid var(--filet);padding-top:6px;margin-top:4px}
  .nav ul[data-ouvert="oui"]{display:flex}
  .nav ul li{border-bottom:1px solid var(--filet)}
  .nav ul li:last-child{border-bottom:0}
  .nav ul a{display:block;padding:14px 2px;font-size:15px}
}

/* ===== Pages de texte : mentions, CGV, confidentialité ===== */
.doc{max-width:820px}
.doc h2{font-size:27px;border-top:2px solid var(--encre);padding-top:18px;margin:52px 0 6px}
.doc h2:first-of-type{margin-top:36px}
.doc h2 .n{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
           color:var(--or);display:block;margin-bottom:8px}
.doc h3{font-size:19px;margin:26px 0 6px}
.doc p{font-size:15.5px;line-height:1.66;color:var(--gris);margin-top:10px;max-width:74ch}
.doc p b,.doc li b{color:var(--encre);font-weight:600}
.doc ul{margin:12px 0 0;padding-left:0;list-style:none}
.doc ul li{font-size:15.5px;line-height:1.6;color:var(--gris);padding-left:20px;position:relative;margin-bottom:9px;max-width:74ch}
.doc ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:2px;background:var(--jaune)}
.doc .maj{font-size:13px;color:var(--gris-clair);border-left:3px solid var(--filet-fort);padding-left:16px;margin-top:8px}
.doc .fiche{background:var(--blanc);border:1px solid var(--filet);padding:24px 26px;margin-top:18px}
.doc .fiche dl{margin:0;display:grid;grid-template-columns:200px 1fr;gap:1px 20px}
.doc .fiche dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
               color:var(--gris-clair);padding:9px 0;border-bottom:1px solid var(--filet)}
.doc .fiche dd{margin:0;font-size:15px;color:var(--encre);padding:9px 0;border-bottom:1px solid var(--filet)}
.doc .fiche dl>dt:last-of-type,.doc .fiche dl>dd:last-of-type{border-bottom:0}
@media(max-width:560px){footer .cols{grid-template-columns:1fr;gap:26px}}
@media(max-width:700px){.doc .fiche dl{grid-template-columns:1fr;gap:0}
  .doc .fiche dt{border-bottom:0;padding-bottom:0}}
/* Un titre d'article est une phrase descriptive, pas une accroche de trois mots :
   a 62 px il partait sur quatre lignes en laissant la moitie droite vide. */

/* ===== Articles repris du blog ===== */
/* Variante de .doc : les articles n'ont pas d'articles numerotes, le filet epais
   au-dessus de chaque h2 des pages juridiques serait de trop. */
.doc ol{margin:12px 0 0;padding-left:0;list-style:none;counter-reset:n}
.doc ol li{font-size:15.5px;line-height:1.6;color:var(--gris);padding-left:30px;position:relative;
  margin-bottom:9px;max-width:74ch;counter-increment:n}
.doc ol li::before{content:counter(n) ".";position:absolute;left:0;top:0;
  font-family:Archivo,sans-serif;font-size:13px;font-weight:700;color:var(--or);
  font-variant-numeric:tabular-nums}
.doc ol.refs{margin-top:14px}
.doc ol.refs li{font-size:13.5px;line-height:1.55;color:var(--gris-clair);margin-bottom:6px}
.doc ol.refs li::before{color:var(--gris-clair);font-weight:600}
/* Les tableaux sortaient de la mesure de lecture et faisaient sauter le bord
   droit de la colonne a chaque section. */

/* Liste des articles sur la page Ressources */
@media(max-width:700px){
}

.doc .sommaire{background:var(--papier-fort);padding:24px 26px;margin-top:28px}
.doc .sommaire ol{margin:10px 0 0;padding-left:20px;columns:2;column-gap:36px}
.doc .sommaire li{font-size:14.5px;line-height:1.5;margin-bottom:7px;break-inside:avoid}
@media(max-width:700px){.doc .sommaire ol{columns:1}}

/* ===================================================================
   Dispositifs de copie — pédagogie et réassurance
   =================================================================== */

/* « En clair » — la traduction en langage courant d'un point technique */
.clair{background:var(--blanc);border-left:3px solid var(--jaune);padding:18px 22px;margin-top:18px;max-width:74ch}
.clair .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
          color:var(--or);margin-bottom:8px}
.clair p{font-size:15.5px;line-height:1.62;color:var(--encre)}
.clair p+p{margin-top:9px}
.band.fort .clair{background:var(--blanc)}
.band.noir .clair{background:#0A0A0A;border-left-color:var(--jaune)}
.band.noir .clair p{color:#fff}
.band.noir .clair .t{color:var(--jaune)}

/* Encadré de réassurance — ce qui se passe si ça se passe mal */
.rass{border:1px solid var(--filet);background:var(--blanc);padding:26px 28px;margin-top:22px}
.rass h3{font-size:21px;margin-bottom:10px}
.rass .pts{margin-top:16px;display:grid;gap:12px}
/* La puce occupe la premiere colonne, le texte la seconde. Sans cette regle,
   un second paragraphe retombe dans la colonne de 22 px et se lit un mot par
   ligne : c'est ce qui est arrive quand la passe « deux phrases par paragraphe »
   a coupe ces blocs en deux. */
.rass .pt{display:grid;grid-template-columns:22px 1fr;gap:6px 14px;align-items:start}
.rass .pt>p{grid-column:2}
.rass .pt>.m{grid-column:1;grid-row:1}
.rass .pt .m{width:16px;height:16px;border:2px solid var(--ok);border-radius:50%;margin-top:4px;position:relative}
.rass .pt .m::after{content:"";position:absolute;left:3px;top:4px;width:6px;height:3px;
                    border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.rass .pt p{font-size:15px;line-height:1.55;color:var(--gris)}
.rass .pt p b{color:var(--encre)}

/* Ce qu'il faut retenir — clôture de page */
.bilan{background:var(--bande);color:#fff;padding:34px 38px;margin-top:44px}
.bilan .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--jaune)}
.bilan h2{color:#fff;font-size:29px;margin:12px 0 18px;max-width:26ch}
.bilan ol{margin:0;padding:0;list-style:none;counter-reset:b}
.bilan li{counter-increment:b;position:relative;padding:13px 0 13px 50px;
          border-top:1px solid #2A2A28;font-size:15.5px;line-height:1.55;color:var(--sur-noir)}
.bilan li::before{content:counter(b,decimal-leading-zero);position:absolute;left:0;top:13px;
                  font-family:Newsreader,Georgia,serif;font-size:17px;color:var(--jaune);line-height:1.55}
.bilan li b{color:#fff;font-weight:600}
.bilan .fin{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:700px){.bilan{padding:26px 22px}.bilan h2{font-size:24px}}

/* Questions fréquentes */
.faq{margin-top:26px}
.faq details{border-top:1px solid var(--filet)}
.faq details:last-of-type{border-bottom:1px solid var(--filet)}
.faq summary{cursor:pointer;padding:19px 34px 19px 0;position:relative;list-style:none;
             font-family:Newsreader,Georgia,serif;font-size:19px;line-height:1.3;color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--or);border-bottom:2px solid var(--or);
                    transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--or)}
.faq .rep{padding:0 34px 22px 0}
.faq .rep p{font-size:15.5px;line-height:1.64;color:var(--gris);max-width:78ch}
.faq .rep p+p{margin-top:10px}
.faq .rep b{color:var(--encre)}

/* Bandeau d'échéance */
.echeance{background:var(--jaune);color:var(--encre);padding:18px 0}
.echeance .in{max-width:1200px;margin:0 auto;padding:0 64px;display:flex;gap:10px 26px;
              align-items:baseline;flex-wrap:wrap}
.echeance .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.echeance p{font-size:15px;line-height:1.5;font-weight:500}
.echeance a{color:var(--encre);font-weight:700;white-space:nowrap}
@media(max-width:900px){.echeance .in{padding:0 20px}}

/* Preuve chiffrée — bandeau de chiffres */
.preuve{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--encre)}
.preuve>div{padding:22px 24px 6px 0;border-right:1px solid var(--filet)}
.preuve>div:last-child{border-right:0;padding-right:0}
.preuve .n{font-family:Newsreader,Georgia,serif;font-size:40px;line-height:1;letter-spacing:-.02em}
.preuve .n span{color:var(--or)}
.preuve p{font-size:13.5px;line-height:1.5;color:var(--gris);margin-top:10px}
.band.noir .preuve{border-top-color:var(--jaune)}
.band.noir .preuve>div{border-right-color:#2A2A28}
.band.noir .preuve .n{color:#fff}
.band.noir .preuve .n span{color:var(--jaune)}
.band.noir .preuve p{color:var(--sur-noir)}
@media(max-width:900px){.preuve{grid-template-columns:1fr 1fr}
  .preuve>div{border-right:0;border-bottom:1px solid var(--filet);padding:18px 0}}

/* Lexique */
.lex{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filet);
     border:1px solid var(--filet);margin-top:26px}
.lex>div{background:var(--blanc);padding:20px 22px}
.lex dt{font-family:Newsreader,Georgia,serif;font-size:19px;line-height:1.25;margin-bottom:7px}
.lex dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--gris)}
.lex dd b{color:var(--encre)}
@media(max-width:800px){.lex{grid-template-columns:1fr}}

/* Étapes numérotées, plus vendeuses que la liste .ess */
.etapes{margin-top:28px;display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet)}
.etapes>div{background:var(--blanc);padding:24px 26px;display:grid;grid-template-columns:44px 1fr;gap:20px}
.etapes .n{font-family:Newsreader,Georgia,serif;font-size:27px;line-height:1;color:var(--or);
           padding-top:2px;font-variant-numeric:tabular-nums}
.etapes h3{font-size:20px;margin-bottom:7px}
.etapes p{font-size:15px;line-height:1.6;color:var(--gris);max-width:70ch}
.etapes p+p{margin-top:8px}
.etapes .d{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
           color:var(--gris-clair);margin-top:10px}
@media(max-width:700px){.etapes>div{grid-template-columns:1fr;gap:8px}}

/* Comparatif « avec / sans » */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--filet);
     border:1px solid var(--filet);margin-top:24px}
.duo>div{background:var(--blanc);padding:24px 26px}
.duo>div.mieux{background:var(--papier-fort);border-top:3px solid var(--jaune)}
.duo h3{font-size:19px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--filet)}
.duo ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.duo li{font-size:14.5px;line-height:1.52;color:var(--gris);padding-left:22px;position:relative}
.duo li::before{position:absolute;left:0;top:0;font-weight:700}
.duo>div:not(.mieux) li::before{content:"×";color:var(--brique);font-size:16px}
.duo>div.mieux li::before{content:"✓";color:var(--ok);font-size:13px;top:1px}
@media(max-width:800px){.duo{grid-template-columns:1fr}}

/* Appel à l'action de fin de bande */
.cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta .note{font-size:13.5px;color:var(--gris-clair);line-height:1.5}
.band.noir .cta .note{color:var(--sur-noir)}

/* --- Capture de contacts : bloc de rappel et lettre de veille --------------
   Les deux formulaires passent par Netlify Forms. Tout champ transmis doit
   exister dans le formulaire statique de base.njk, sinon Netlify le jette
   en silence. */
.rappel{background:var(--bande);color:#fff;border-top:0}
.rp-wrap{max-width:1200px;margin:0 auto;padding:0 64px}
/* Les deux colonnes sont de hauteurs tres differentes : centrer evite que le
   texte de gauche laisse un grand vide sous lui. */
.rp-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center}
.rappel h2{color:#fff;font-size:30px;max-width:18ch}
.rappel .rp-lede{font-size:17px;line-height:1.62;color:var(--sur-noir);max-width:48ch;margin-top:14px}
.rappel .rp-lede b{color:#fff;font-weight:600}
.rappel .ou{margin-top:18px;font-size:14px;line-height:1.65;color:var(--sur-noir)}
.rappel .ou a{color:var(--jaune)}
/* Une seule colonne : un formulaire de rappel se lit de haut en bas, sans
   que l'oeil ait a choisir entre deux champs sur la meme ligne. */
/* Deux colonnes pour les champs courts : le formulaire tient en moins de
   hauteur, et la colonne de texte a cote cesse de laisser un grand vide. */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;max-width:540px}
.fg .large{grid-column:1/-1}
.fld label{display:block;font-size:13.5px;font-weight:600;color:#fff;margin-bottom:7px}
.fld label .opt{font-weight:400;color:var(--sur-noir)}
.fld input,.fld textarea{font:inherit;font-size:16px;width:100%;min-height:52px;padding:14px 16px;
  background:#131311;border:1px solid #3A3A36;color:#fff;border-radius:0}
.fld textarea{min-height:76px;resize:vertical;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:#6E6E68}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--jaune);outline-offset:1px;border-color:var(--jaune)}
.fld .err{font-size:12.5px;color:#F2A5A5;margin-top:5px;min-height:1px}
.oc{display:flex;gap:11px;align-items:flex-start;margin-top:18px;max-width:520px}
.oc input{margin:3px 0 0;accent-color:var(--jaune);width:17px;height:17px;flex:none}
.oc label{font-size:12.5px;line-height:1.6;color:var(--sur-noir)}
.oc label a{color:var(--jaune)}
.rappel .envoi{font-size:13.5px;line-height:1.6;margin-top:14px;color:var(--sur-noir)}
.rappel .envoi.ok{color:#8FD6A2}
.rappel .envoi.ko{color:#F2A5A5}
/* Sur fond noir, un bouton jaune a demi transparent vire au kaki. Un aplat
   gris dit mieux « pas encore actif ». */
.rappel button.btn[disabled]{opacity:1;background:#26261F;color:#B4B4AC;cursor:not-allowed;
  border:1px solid #3A3A33}
.rappel .rp-note{font-size:12px;line-height:1.55;color:#7C7C76;margin-top:16px;max-width:520px}
@media(max-width:900px){
  /* Adnane, 23 septembre : sur telephone l'en-tete faisait 146 px, colles en
     haut, soit 17 % de l'ecran pris en permanence pendant toute la lecture.
     Il defile desormais avec la page. Le menu et le bouton de rendez-vous se
     retrouvent en remontant en haut. */
  header{position:static}
  .nav .mark{width:64px}
  footer .signature .mark{width:76px}
  .rp-wrap{padding:0 20px}
  .pied-wrap{padding:0 20px}
  .rp-grid{grid-template-columns:1fr;gap:30px}
  .fg{grid-template-columns:1fr}
}

/* Lettre de veille : bande claire, une seule ligne de saisie */
.veille{border:1px solid var(--filet);background:var(--papier-fort);padding:28px 30px}
.veille .v-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--or)}
.veille h3{font-size:23px;margin:9px 0 10px;max-width:30ch}
.veille p{font-size:14.5px;line-height:1.6;color:var(--gris);max-width:70ch}
.veille .v-ligne{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:flex-start}
.veille input[type=email]{font:inherit;font-size:15px;min-height:48px;padding:13px 14px;flex:1 1 280px;
  border:1px solid var(--filet-fort);background:var(--blanc);color:var(--encre)}
.veille input[type=email]:focus{outline:2px solid var(--or);outline-offset:1px}
.veille .btn{margin:0}
.veille .oc label{color:var(--gris)}
.veille .oc input{accent-color:var(--or)}
.veille .oc label a{color:var(--or)}
.veille .envoi{font-size:13.5px;line-height:1.6;margin-top:12px;color:var(--gris-clair)}
.veille .envoi.ok{color:var(--ok)}
.veille .envoi.ko{color:var(--brique)}
.veille .err{font-size:12.5px;color:var(--brique);margin-top:5px}
.veille button[disabled]{opacity:.5;cursor:not-allowed}
.veille .v-note{font-size:12px;line-height:1.55;color:var(--gris-clair);margin-top:12px}

/* ===================================================================
   Bibliothèque : page d'accueil des rayons et gabarit de fiche
   =================================================================== */
/* L'en-tete reste colle au-dessus de 900 px : une ancre doit atterrir sous lui. */
.rub,.rayon,#la-veille,#rayons{scroll-margin-top:136px}
@media(max-width:900px){.rub,.rayon,#la-veille,#rayons{scroll-margin-top:16px}}

/* Accueil : les huit rayons */
.rayons{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filet);
  border:1px solid var(--filet);margin-top:34px}
.rayon{background:var(--blanc);padding:26px 28px 24px;display:flex;flex-direction:column;gap:8px}
.rayon .num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--or);
  font-variant-numeric:tabular-nums}
.rayon .num::before{content:"Rayon "}
.rayon .cap{font-size:14px;max-width:52ch}
.rayon .a-paraitre{margin-top:auto;padding-top:10px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--gris-clair)}
.liste-fiches{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--filet)}
.liste-fiches li{border-bottom:1px solid var(--filet)}
.liste-fiches a{display:block;padding:10px 22px 10px 0;font-size:14.5px;color:var(--encre);
  text-decoration:none;position:relative}
.liste-fiches a::after{content:"→";position:absolute;right:0;top:10px;color:var(--or)}
.liste-fiches a:hover{color:var(--or)}
@media(max-width:800px){.rayons{grid-template-columns:1fr}.rayon{padding:22px 20px}}

/* Accueil : le plan commun des fiches */
.plan-fiche{list-style:none;counter-reset:r;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:0 44px;max-width:1000px}
.plan-fiche li{counter-increment:r;display:grid;grid-template-columns:34px 1fr;gap:2px 0;
  padding:14px 0;border-top:1px solid var(--filet)}
.plan-fiche li::before{content:counter(r);grid-row:span 2;font-family:var(--mono);font-size:13px;
  font-weight:600;color:var(--or);padding-top:2px}
.plan-fiche b{font-weight:600;font-size:15px}
.plan-fiche span{font-size:13.5px;line-height:1.55;color:var(--gris-clair)}
@media(max-width:800px){.plan-fiche{grid-template-columns:1fr}}

/* Cartes qui sont des liens entiers */
a.card.lien-fiche{text-decoration:none;color:var(--encre);border-bottom:1px solid var(--filet);
  transition:border-color .15s}
a.card.lien-fiche:hover{border-color:var(--encre)}
a.card.lien-fiche .h4::after{content:" →";color:var(--or)}
.outils .card .btn{margin-top:auto}
.outils .card .cap:last-of-type{margin-bottom:18px}

/* Fiche : en-tête */
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13px}
.ariane li{color:var(--gris-clair)}
.ariane li+li::before{content:"›";margin:0 9px;color:var(--filet-fort)}
.ariane a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--filet-fort)}
.ariane a:hover{color:var(--encre);border-bottom-color:var(--jaune)}
.ariane [aria-current]{color:var(--encre)}
.h1-fiche{margin-top:22px;font-size:52px;max-width:22ch}
.verif{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--gris)}
.verif .pastille{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
@media(max-width:900px){.h1-fiche{font-size:34px}}

/* Fiche : sommaire à gauche, texte à droite */
.band.fiche-corps{padding-top:48px}
.fiche-grille{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
.fiche-sommaire{position:sticky;top:136px;border-top:2px solid var(--encre);padding-top:14px}
.fiche-sommaire ol{list-style:none;counter-reset:s;margin:12px 0 0;padding:0}
.fiche-sommaire li{counter-increment:s;display:grid;grid-template-columns:22px 1fr;
  padding:7px 0;border-bottom:1px solid var(--filet);font-size:13.5px;line-height:1.4}
.fiche-sommaire li::before{content:counter(s);font-family:var(--mono);font-size:12px;color:var(--or)}
.fiche-sommaire a{color:var(--gris);text-decoration:none}
.fiche-sommaire a:hover{color:var(--encre)}
.fiche-texte{max-width:none}
.fiche-texte .rub:first-child h2{margin-top:0}
.fiche-texte .faq{margin-top:14px}
@media(max-width:1000px){
  .fiche-grille{grid-template-columns:1fr;gap:28px}
  .fiche-sommaire{position:static;background:var(--papier-fort);border-top:0;padding:18px 20px}
}