/* Pages de contenu SchematiX. Charte « Rail » : graphite, papier, rouge IEC.
   Autonome : aucune dépendance au bundle de l'application. */
:root{
  --bg:#f4f3ef;--paper:#fff;--ink:#0e0e0c;--ink2:#2a2a26;--mut:#6b6a64;--mut2:#9c9a92;
  --line:#dfdcd2;--accent:#d63a1f;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0a0a09;--paper:#141413;--ink:#f4f3ef;--ink2:#d9d7cf;--mut:#9d9b93;--mut2:#6f6e68;--line:#26261f}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
.bande{max-width:900px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{border-bottom-color:var(--accent)}

.tete{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
.tete .bande{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px}
.marque{font-weight:600;font-size:19px;letter-spacing:-.035em;border:0}
.marque .x{color:var(--accent);font-weight:500}
.liens{display:flex;align-items:center;gap:18px;font-size:13.5px}
.liens a{color:var(--mut);border:0}
.liens a:hover{color:var(--ink)}
.liens .cta{background:var(--ink);color:var(--bg);padding:8px 13px;font-weight:500}
.liens .cta:hover{opacity:.9;color:var(--bg)}
@media(max-width:600px){.liens{gap:12px;font-size:12.5px}.liens a:not(.cta){display:none}}

.ariane{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut2);padding:20px 0 0}
.ariane a{color:var(--mut2);border:0}
.ariane a:hover{color:var(--accent)}

article,.page{padding:0 0 72px}
h1{font-size:clamp(30px,4.4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:24px 0 0;text-wrap:balance}
h2{font-size:clamp(21px,2.6vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:52px 0 14px;scroll-margin-top:76px}
h3{font-size:17.5px;font-weight:600;letter-spacing:-.01em;margin:30px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin-bottom:8px}
strong{font-weight:600}
em{font-style:italic}

/* La réponse directe : ce qu'un moteur ou un assistant cite en premier. */
.reponse{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);padding:22px 24px;margin:28px 0 8px}
.reponse .etiq{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.reponse p{font-size:17.5px;line-height:1.55;margin-bottom:12px}
.reponse p:last-child{margin-bottom:0}

.chapo{font-size:17px;color:var(--mut);margin:16px 0 0}
.maj{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mut2);margin:14px 0 0}

/* Le tableau scrolle DANS son conteneur, jamais la page. Le conteneur est ajouté au
   build (voir enrobeTableaux) : le rédacteur écrit un <table> nu. */
.tableau{overflow-x:auto;margin:20px 0;border:1px solid var(--line)}
table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--paper);font-weight:600;font-size:13px}
.tableau table{border:0}
.tableau th:first-child,.tableau td:first-child{border-left:0}
.tableau th:last-child,.tableau td:last-child{border-right:0}
.tableau tr:first-child th,.tableau tr:first-child td{border-top:0}
.tableau tr:last-child td{border-bottom:0}

.sommaire{background:var(--paper);border:1px solid var(--line);padding:20px 24px;margin:30px 0}
.sommaire h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 12px;font-weight:500}
.sommaire ol{margin:0;padding-left:20px;font-size:14.5px}
.sommaire li{margin-bottom:5px}

.etapes{counter-reset:e;list-style:none;padding:0;margin:20px 0}
.etapes li{counter-increment:e;position:relative;padding-left:44px;margin-bottom:18px}
.etapes li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--mono);font-size:12px;color:var(--accent)}
.etapes b{display:block;font-weight:600;margin-bottom:3px}

.faq{margin-top:12px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font-weight:600;cursor:pointer;font-size:16.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--accent);font-family:var(--mono);margin-right:10px}
.faq details[open] summary::before{content:'−'}
.faq details p{margin:12px 0 0 24px;color:var(--mut)}

.encart{background:var(--ink);color:var(--bg);padding:30px 32px;margin:52px 0 0}
.encart h2{margin:0 0 10px;color:var(--bg);font-size:22px}
.encart p{color:#b9b7ae;margin-bottom:18px}
.encart .btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 18px;font-weight:500;font-size:14.5px;border:0}
.encart .btn:hover{opacity:.92;color:#fff}
.encart .second{color:var(--bg);border-bottom:1px solid #4a4944;margin-left:18px;font-size:14px}

.suite{margin-top:52px;border-top:1px solid var(--line);padding-top:24px}
.suite h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 14px;font-weight:500}
.suite ul{list-style:none;padding:0}
.suite li{margin-bottom:10px}
.suite a{font-weight:500;border:0}
.suite a:hover{color:var(--accent)}
.suite span{display:block;font-size:14px;color:var(--mut);font-weight:400}

.grille{list-style:none;padding:0;margin:32px 0 0}
.grille li{border-top:1px solid var(--line);padding:20px 0}
.grille li:last-child{border-bottom:1px solid var(--line)}
.grille a{font-size:19px;font-weight:600;letter-spacing:-.015em;border:0}
.grille a:hover{color:var(--accent)}
.grille p{margin:6px 0 0;color:var(--mut);font-size:15px}

.pied{border-top:1px solid var(--line);padding:36px 0 48px;margin-top:0}
.pied .baseline{font-size:14px;color:var(--mut);max-width:560px}
.pied .meta{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--mut2);margin:8px 0 0}
.pied a{color:var(--mut);border:0}
.pied a:hover{color:var(--accent)}