/* ==========================================================================
   CNX — pages de lecture (guides, pages légales, 404)
   S'appuie sur cnx.css. Reprend les classes déjà présentes dans ces pages,
   pour les mettre au langage visuel de la landing sans toucher au contenu :
   le texte, les titres et les liens qui portent le référencement restent tels quels.
   ========================================================================== */

body{background:var(--bg)}

/* En-tête : le même que la landing, logo en trois cases et retour */
.pnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.pnav .container{display:flex;align-items:center;justify-content:space-between;height:68px}
.pnav .right{display:flex;align-items:center;gap:10px}
.pnav .back{font-size:14px;color:var(--ink-2)}
.pnav .back:hover{color:var(--ink)}
@media (max-width:560px){.pnav .btn{display:none}}

/* Colonne de lecture */
.wrap{max-width:760px;margin:0 auto;padding:56px var(--gutter) 40px}
.top{display:none} /* ancien en-tête, remplacé par .pnav */

.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-mid);margin-bottom:14px}
.wrap h1{font-size:clamp(30px,4.2vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin:0 0 14px}
.meta,.updated{font-size:14px;color:var(--ink-3);margin-bottom:28px}
.lede{font-size:19px;line-height:1.7;color:var(--ink-2);margin:0 0 28px}
.wrap h2{font-size:clamp(22px,2.4vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:48px 0 14px}
.wrap h3{font-size:18px;font-weight:600;margin:30px 0 10px}
.wrap p{font-size:17px;line-height:1.75;color:var(--ink-2);margin:0 0 16px}
.wrap ul,.wrap ol{margin:0 0 20px;padding-left:22px;color:var(--ink-2)}
.wrap li{font-size:17px;line-height:1.7;margin:0 0 8px;padding-left:4px}
.wrap li::marker{color:var(--accent-mid)}
.wrap a{color:var(--accent-mid);text-decoration:underline;text-decoration-color:var(--accent-glow);text-underline-offset:3px}
.wrap a:hover{text-decoration-color:var(--accent-mid)}
.wrap strong{color:var(--ink);font-weight:600}
.wrap dl{margin:0 0 20px}
.wrap dt{font-weight:600;color:var(--ink);margin-top:14px}
.wrap dd{margin:4px 0 0;color:var(--ink-2)}

/* Encadré « En bref » */
.note{margin:0 0 30px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--accent-mid)!important;border-radius:var(--r);background:var(--bg-muted);font-size:16px;line-height:1.7;color:var(--ink-2)}
.note strong{color:var(--ink)}

/* Tableaux */
.tscroll{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r)}
.wrap table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.wrap .tscroll table{margin:0}
.wrap table:not(.tscroll table){margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wrap th,.wrap td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
.wrap thead th{background:var(--bg-muted);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.wrap tbody th{font-weight:600;color:var(--ink)}
.wrap td{color:var(--ink-2)}
.wrap tbody tr:last-child td,.wrap tbody tr:last-child th{border-bottom:0}

/* Maquette de score dans les guides */
.demo{margin:8px 0 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.demo .r{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.demo .r:last-child{border-bottom:0}
.demo .c{font-size:15px;color:var(--ink-2);line-height:1.6}
.demo .m{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap}
.hit,.demo .m.hit{background:var(--ok-wash);color:var(--ok)}
.part,.demo .m.part{background:var(--mid-wash);color:var(--mid)}
.miss,.demo .m.miss{background:var(--ko-wash);color:var(--ko)}

/* Appel à l'action en fin de guide */
.cta{position:relative;overflow:hidden;margin:48px 0 8px;padding:36px 34px;border-radius:var(--r-xl);background:var(--black);color:#fff;isolation:isolate}
.cta::before{content:"";position:absolute;width:320px;height:320px;right:-110px;top:-150px;border-radius:50%;background:rgba(122,79,115,.5);filter:blur(60px);z-index:-1}
.wrap .cta h3{margin:0 0 8px;font-size:22px;color:#fff;letter-spacing:-.02em}
.wrap .cta p{margin:0 0 20px;color:rgba(255,255,255,.72);font-size:16px}
.wrap .cta a{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-sm);background:#fff;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.wrap .cta a:hover{background:#F4F4F5}

/* Hub des guides : cartes */
a.article{display:block;margin:0 0 14px;padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;text-decoration:none!important;transition:transform .25s,box-shadow .25s,border-color .25s}
a.article:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D4D4D8}
a.article .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-mid)}
.wrap a.article h2{margin:8px 0 6px;font-size:20px;color:var(--ink)}
.wrap a.article p{margin:0;font-size:15px;color:var(--ink-3)}

/* Page 404 */
.liens{margin-top:32px}
.wrap .liens h2{font-size:18px;margin:0 0 12px}
.liens ul{list-style:none;padding:0}
.liens li{padding:0}

/* DPA : modèle de contrat avec champs à compléter */
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:22px 24px;margin:0 0 20px}
.code{font-family:var(--mono);font-size:14px;background:var(--bg-sunken);padding:2px 6px;border-radius:4px}
.draft{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);background:var(--mid-wash);color:var(--mid);font-size:12px;font-weight:600}
.blank{display:inline-block;min-width:140px;border-bottom:1px dashed var(--ink-4);color:var(--ink-4)}
.todo{background:var(--mid-wash);color:var(--mid);padding:1px 5px;border-radius:4px}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}
.sign>div{padding:18px;border:1px solid var(--line);border-radius:var(--r)}
.sign .lbl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:560px){.sign{grid-template-columns:1fr}}

/* Pied de page de lecture */
.wrap>footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.wrap>footer a{color:var(--ink-2);text-decoration:none}
.wrap>footer a:hover{color:var(--ink)}

/* Modèles téléchargeables */
.dls{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 30px}
.wrap a.dl{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:var(--r-sm);background:var(--black);color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.wrap a.dl:hover{background:var(--black-hover)}
.wrap a.dl.alt{background:#fff;color:var(--ink);border:1px solid var(--line)}
.wrap a.dl.alt:hover{border-color:#D4D4D8;background:var(--bg-muted)}
.dl svg{width:17px;height:17px;flex:none}
.dlnote{margin:-18px 0 30px;font-size:13px;color:var(--ink-3)}

/* Sommaire */
.toc{margin:0 0 34px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.toc strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{font-size:15px;margin:0 0 4px}
.wrap .toc a{text-decoration:none;color:var(--ink-2)}
.wrap .toc a:hover{color:var(--accent-mid)}

/* Modèle de mail ou de prompt, copiable */
.tpl{position:relative;margin:0 0 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.tpl .th{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-2);background:var(--bg-muted);font-size:13px;color:var(--ink-3)}
.tpl .th b{color:var(--ink);font-weight:600}
.tpl pre{margin:0;padding:16px 18px;white-space:pre-wrap;font:14.5px/1.65 var(--font);color:var(--ink-2)}
.tpl.prompt pre{font:13.5px/1.65 var(--mono)}
.copy{flex:none;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.copy:hover{border-color:var(--ink-3)}

/* FAQ dans une page de lecture */
.wrap .faq{margin:0 0 20px}
.wrap .faq summary{font-size:16px}
.wrap .faq details p{font-size:15.5px}

/* Hub : sections de guides */
.hubsec{margin:44px 0 0}
.hubsec>h2{font-size:14px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)!important;margin:0 0 14px!important}
.hubmodels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 10px}
.wrap a.hm{display:block;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;text-decoration:none}
.wrap a.hm:hover{border-color:#D4D4D8;box-shadow:var(--shadow)}
.hm small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-mid)}
.hm b{display:block;margin:6px 0 4px;font-size:16px;color:var(--ink)}
.hm span{font-size:13.5px;color:var(--ink-3)}