/* 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}
/* Un tableau large ne doit jamais elargir la colonne : il defile dans son cadre. */
.fiche-grille>*{min-width:0}
.fiche-texte .scroll table{min-width:560px}
.fiche-texte .rub:first-child h2{margin-top:0}
.fiche-texte .faq{margin-top:14px}
@media(max-width:1000px){
  .fiche-grille{grid-template-columns:minmax(0,1fr);gap:28px}
  .fiche-sommaire{position:static;background:var(--papier-fort);border-top:0;padding:18px 20px}
}

/* ===== Texte justifié sur tout le site, sans colonne vide à droite =====
   Les paragraphes et listes du contenu occupent toute la largeur de leur
   colonne et sont justifiés, avec coupure des mots en fin de ligne. Les
   blocs de moins de 320 px de large (cartes en grille, frises : classe
   .etroit posée par le script du gabarit), les tableaux et les surtitres
   restent alignés à gauche, la justification y creusant des blancs. */
main p:not(.over):not(.eyebrow):not(.role),main li,.rappel .rp-lede{
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
main p,main li{max-width:none!important}
main td,main th,main td p,main td li,main .etroit{text-align:left!important;hyphens:manual;-webkit-hyphens:manual}
.faq .rep{padding-right:0}
.accueil .faq .rep p{font-size:16px;line-height:1.7}
.accroche-cabinet{text-align:center;margin:0 0 30px}
.accroche-cabinet span{display:block;text-wrap:balance}
.accroche-cabinet span+span{margin-top:7px}