/* Pages « ressources » du site (27/10/2026) : des articles à lire, dans la charte du site (jetons.css).
   Elles répondent chacune à une question que les clients tapent dans un moteur de recherche. */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--nuit); color: var(--encre);
       font: var(--g-normale) var(--t-3)/1.7 var(--discours); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }

/* ─── barre du haut : la même marque que l'accueil ─── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(8,18,14,.86); backdrop-filter: blur(14px);
       border-bottom: 1px solid var(--nuit-trait); }
.nav .wrap { display: flex; align-items: center; gap: var(--e-5); min-height: calc(64px + var(--k) * .017);
             width: min(var(--max), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.nav ul { display: flex; gap: var(--e-5); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { color: var(--encre-2); text-decoration: none; font-size: var(--t-2); font-weight: var(--g-forte); }
.nav ul a:hover { color: var(--accent); }
.nav .btn { white-space: nowrap; }
@media (max-width: 900px) { .nav ul { display: none; } .nav .btn { margin-left: auto; } }
.marque { display: inline-flex; align-items: center; text-decoration: none; color: var(--encre); }
.marque .mot { font-family: "Montserrat", var(--discours); font-weight: 800; font-size: calc(26px + var(--k) * .007);
               letter-spacing: .03em; line-height: 1.05; color: var(--encre); }
.marque .mot .carb { color: var(--accent); }
.marque .mot small { display: block; font-size: .3em; font-weight: 600; letter-spacing: .22em; margin: .3em 0 0 .1em;
                     text-transform: uppercase; color: var(--encre-2); }
.marque .lettrine, .marque .ligne { display: flex; align-items: center; }
.marque .bloc { display: flex; flex-direction: column; }
.marque .bigc { color: var(--encre); }
.marque .bigc svg { height: 1.62em; width: auto; display: block; margin-right: .04em; }
.marque .o svg { width: .8em; height: .8em; display: block; margin: 0 .06em 0 .02em; }

/* ─── l'article ─── */
main { width: min(calc(760px + var(--k) * .2), 100% - 2 * var(--gouttiere)); margin: 0 auto; padding: var(--e-8) 0 var(--e-9); }
.fil { font-size: var(--t-1); color: var(--encre-3); }
.fil a { color: var(--encre-2); text-decoration: none; }
.kicker { display: block; margin-top: var(--e-6); font: var(--g-forte) var(--t-1)/1 var(--discours);
          letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
h1 { margin: var(--e-4) 0 var(--e-5); font-size: clamp(32px, 4vw, calc(52px + var(--k) * .014)); line-height: 1.08;
     letter-spacing: var(--ls-titre); font-weight: var(--g-titre); }
h2 { margin: var(--e-8) 0 var(--e-4); font-size: var(--t-6); line-height: 1.15; letter-spacing: -.02em; }
h3 { margin: var(--e-6) 0 var(--e-3); font-size: var(--t-4); }
p, li, dd { color: var(--encre-2); }
p { margin: 0 0 var(--e-4); }
.lead { font-size: var(--t-4); line-height: 1.55; color: var(--encre-2); }
strong { color: var(--encre); }
ol, ul { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
li { margin: var(--e-2) 0; }
ol.etapes { list-style: none; padding: 0; counter-reset: e; }
ol.etapes li { position: relative; padding-left: calc(var(--e-7) + var(--e-2)); margin: var(--e-5) 0; counter-increment: e; }
ol.etapes li::before { content: counter(e); position: absolute; left: 0; top: 0; width: var(--e-7); height: var(--e-7);
                       border-radius: var(--r-controle); background: var(--accent-doux); color: var(--accent);
                       display: grid; place-items: center; font: var(--g-titre) var(--t-4)/1 var(--donnee); }
.mono { font-family: var(--donnee); font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; margin: var(--e-4) 0 var(--e-2); background: var(--nuit-2);
        border: 1px solid var(--nuit-trait); border-radius: var(--r-objet); overflow: hidden; font-size: var(--t-2); }
th { background: var(--nuit-3); color: var(--encre); text-align: left; padding: var(--e-3) var(--e-4); font-weight: var(--g-forte); }
td { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--nuit-trait); color: var(--encre-2); }
td.n, th.n { text-align: right; font-family: var(--donnee); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau { overflow-x: auto; }
@media (max-width: 640px) { th, td { padding: var(--e-2); } .tableau table { font-size: var(--t-1); } }   /* le tableau des seuils tient sans glisser, même en 360 px */
.legende { font-size: var(--t-1); color: var(--encre-3); }

dl { margin: var(--e-5) 0; }
dt { margin-top: var(--e-5); font-weight: var(--g-titre); color: var(--encre); font-size: var(--t-4); scroll-margin-top: 96px; }
dd { margin: var(--e-2) 0 0; }

/* encadrés à sens fixe : vert = ce que fait l'outil, jaune = sa limite */
.encadre { margin: var(--e-7) 0 var(--e-4); padding: var(--e-5) var(--e-6); background: var(--nuit-2);
           border: 1px solid var(--nuit-trait); border-left: 3px solid var(--accent); border-radius: var(--r-objet); }
.encadre.limite { margin-top: var(--e-4); border-left-color: var(--reserve); }
.encadre h2 { margin: 0 0 var(--e-3); font-size: var(--t-4); }
.encadre.limite h2 { color: var(--reserve); }
.encadre p:last-child { margin-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

.autres { margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--nuit-trait); }
.autres h2 { margin-top: 0; font-size: var(--t-4); }
.autres ul { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.autres a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--nuit-trait); }
.autres a:hover { color: var(--accent); border-bottom-color: var(--accent); }

footer { border-top: 1px solid var(--nuit-trait); padding: var(--e-6) 0 var(--e-7); }
footer .wrap { width: min(var(--max), 100% - 2 * var(--gouttiere)); margin-inline: auto; font-size: var(--t-2); color: var(--encre-2); }
footer strong { color: var(--encre); }
footer .mentions-lien { display: inline-block; margin-top: var(--e-3); font-size: var(--t-1); color: var(--encre-3); text-decoration: none; }
/* au doigt, des liens de 17 px de haut se ratent : zone de 44 px */
@media (pointer: coarse) { footer a { display: inline-block; padding-block: 14px; } footer .mentions-lien { margin-top: 0; } }