/* ═══════════════════════════════════════════════════════════════════════════
   Pages module — format article (/modules/*), 2026-09-26
   Le socle visuel commun : jetons de la home v2, en-tête de nuit, sommaire
   collant, colonne de lecture, encarts, cadre d'illustration, FAQ, fin.
   Chaque page garde en ligne le CSS de ses propres illustrations.
   Écrit à la main (build Tailwind figé 2026-07-03).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Jetons — les mêmes que la home v2, pour que l'œil reconnaisse la maison ═══ */
html .mod-art{
    --nuit: oklch(0.16 0.02 280); --nuit-doux: oklch(0.21 0.025 282);
    --violet: oklch(0.58 0.21 288); --bleu: oklch(0.62 0.17 250);
    --aurore: linear-gradient(118deg, var(--bleu) 0%, var(--violet) 55%, oklch(0.52 0.22 315) 100%);
    --encre: oklch(0.20 0.02 282); --gris: oklch(0.48 0.02 282); --pale: oklch(0.68 0.015 282);
    --trait: oklch(0.90 0.01 285); --voile: oklch(0.975 0.006 288); --vert: oklch(0.62 0.17 152);
    --ambre: oklch(0.78 0.16 75); --rouge: oklch(0.64 0.2 25); --turquoise: oklch(0.72 0.14 200);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--encre);
    -webkit-font-smoothing: antialiased; overflow-x: clip;
}
html .mod-art *{ box-sizing: border-box; }
html .mod-art h1, html .mod-art h2, html .mod-art h3, html .mod-art .titrage{ font-family: 'Schibsted Grotesk', 'Inter', sans-serif; letter-spacing: -0.03em; }
html .mod-art .serif{ font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
html .mod-art .murmure{ font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--pale); }
html .mod-art a{ color: inherit; }

/* ═══ En-tête sombre — la barre de navigation attend un fond de nuit ═══ */
html .mod-art .entete{ position: relative; overflow: hidden; background: var(--nuit); color: #fff; padding: 150px 24px 84px; }
html .mod-art .entete .aurore{ position: absolute; inset: -30%; pointer-events: none; filter: blur(52px);
    background: radial-gradient(38% 42% at 18% 30%, oklch(0.55 0.22 288 / .5), transparent 70%),
                radial-gradient(34% 38% at 80% 62%, oklch(0.58 0.18 248 / .4), transparent 70%); }
html .mod-art .entete .dedans{ position: relative; max-width: 860px; margin: 0 auto; }
html .mod-art .entete .murmure{ color: oklch(0.7 0.05 290); }
html .mod-art .entete h1{ font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.06; font-weight: 700; margin: 14px 0 20px; }
html .mod-art .entete .chapo{ font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55; color: oklch(0.84 0.012 285); max-width: 720px; }
html .mod-art .entete .meta{ display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font-size: 13px; color: oklch(0.68 0.02 288); }
html .mod-art .entete .meta b{ color: #fff; font-weight: 600; }
html .mod-art .cta{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; background: #fff; color: var(--encre); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
html .mod-art .cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
html .mod-art .cta--nuit{ background: var(--encre); color: #fff; }
html .mod-art .cta--nuit:hover{ box-shadow: 0 14px 34px oklch(0.2 0.02 282 / .22); }
html .mod-art .fil{ font-size: 13px; color: oklch(0.68 0.02 288); margin-bottom: 18px; }
html .mod-art .fil a{ text-decoration: none; }
html .mod-art .fil a:hover{ text-decoration: underline; }

/* ═══ Corps : sommaire collant + colonne de lecture ═══ */
html .mod-art .corps{ max-width: 1120px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 64px; justify-content: center; }
html .mod-art .sommaire{ position: sticky; top: 96px; align-self: start; font-size: 13.5px; }
html .mod-art .sommaire ol{ list-style: none; margin: 12px 0 0; padding: 0; border-left: 1px solid var(--trait); }
html .mod-art .sommaire li a{ display: block; padding: 7px 0 7px 14px; color: var(--gris); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
html .mod-art .sommaire li a:hover, html .mod-art .sommaire li a.actif{ color: var(--encre); border-color: var(--violet); }
html .mod-art .texte{ font-size: 16.5px; line-height: 1.7; }
html .mod-art .texte > p{ margin: 0 0 20px; }
html .mod-art .texte h2{ font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.15; font-weight: 600; margin: 64px 0 18px; }
html .mod-art .texte h2:first-of-type{ margin-top: 0; }
html .mod-art .texte h3{ font-size: 1.15rem; font-weight: 600; margin: 34px 0 10px; letter-spacing: -0.02em; }
html .mod-art .texte .murmure{ display: block; margin-bottom: 8px; }
html .mod-art .texte ul{ padding-left: 22px; margin: 0 0 20px; }
html .mod-art .texte li{ margin: 6px 0; }
html .mod-art .texte li::marker{ color: var(--violet); }
html .mod-art .texte a{ color: var(--encre); text-decoration: underline; text-decoration-color: var(--pale); text-underline-offset: 3px; }
html .mod-art .texte a:hover{ text-decoration-color: var(--violet); }
html .mod-art .citation{ font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 300; font-size: 1.35rem; line-height: 1.45; color: var(--encre); margin: 30px 0; padding-left: 18px; border-left: 2px solid; border-image: var(--aurore) 1; }
html .mod-art .encart{ background: var(--voile); border: 1px solid var(--trait); border-radius: 16px; padding: 20px 22px; margin: 26px 0; font-size: 15px; line-height: 1.6; }
html .mod-art .encart b{ font-weight: 600; }
html .mod-art .encart .murmure{ color: var(--violet); margin-bottom: 6px; }
html .mod-art .encart--nuit{ background: var(--nuit); color: oklch(0.86 0.01 285); border-color: transparent; }
html .mod-art .encart--nuit b{ color: #fff; }
html .mod-art .encart--nuit .murmure{ color: oklch(0.72 0.1 290); }
html .mod-art .grille{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 26px; }
html .mod-art .grille > div{ padding: 16px 18px; border: 1px solid var(--trait); border-radius: 14px; font-size: 14.5px; line-height: 1.55; }
html .mod-art .grille b{ display: block; font-weight: 600; margin-bottom: 4px; font-family: 'Schibsted Grotesk', sans-serif; letter-spacing: -0.02em; }
html .mod-art .grille span{ color: var(--gris); }

/* ═══ Illustrations : l'agenda reconstruit ═══ */
html .mod-art figure{ margin: 30px 0 34px; }
html .mod-art figcaption{ font-size: 13px; color: var(--gris); margin-top: 12px; line-height: 1.5; }
html .mod-art .cadre{ border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -40px oklch(0.2 0.02 282 / .35); }
html .mod-art .cadre .barre{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--trait); background: #fff; font-size: 12.5px; }
html .mod-art .cadre .barre .onglets{ display: flex; gap: 2px; background: var(--voile); border-radius: 8px; padding: 3px; }
html .mod-art .cadre .barre .onglets span{ padding: 4px 10px; border-radius: 6px; color: var(--gris); }
html .mod-art .cadre .barre .onglets span.on{ background: #fff; color: var(--violet); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
html .mod-art .cadre .barre .mois{ font-weight: 600; font-family: 'Schibsted Grotesk', sans-serif; }
html .mod-art .cadre .barre .plus{ background: var(--violet); color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
html .mod-art .defile{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
html .mod-art .cadre .legende{ display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; font-size: 11.5px; color: var(--gris); border-top: 1px solid var(--trait); background: var(--voile); }
html .mod-art .cadre .legende i{ display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* tunnel client */
html .mod-art .etapes{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; counter-reset: e; }
html .mod-art .etapes span{ counter-increment: e; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--trait); border-radius: 999px; font-size: 13.5px; font-weight: 500; }
html .mod-art .etapes span::before{ content: counter(e); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--aurore); color: #fff; font-size: 11px; font-weight: 700; }

/* FAQ + fin */
html .mod-art .faq{ max-width: 720px; margin: 0 auto; padding: 20px 24px 40px; }
html .mod-art .faq h2{ font-size: clamp(1.55rem, 3vw, 2.05rem); font-weight: 600; margin: 0 0 14px; }
html .mod-art .faq details{ border-bottom: 1px solid var(--trait); padding: 16px 0; }
html .mod-art .faq summary{ font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 30px; font-family: 'Schibsted Grotesk', sans-serif; letter-spacing: -0.02em; }
html .mod-art .faq summary::-webkit-details-marker{ display: none; }
html .mod-art .faq summary::after{ content: '+'; position: absolute; right: 0; top: -2px; font-size: 22px; color: var(--violet); font-weight: 300; transition: transform .2s; }
html .mod-art .faq details[open] summary::after{ transform: rotate(45deg); }
html .mod-art .faq p{ margin: 10px 0 0; color: var(--gris); font-size: 15px; line-height: 1.65; }
html .mod-art .fin{ max-width: 1120px; margin: 30px auto 70px; padding: 0 24px; }
html .mod-art .fin > div{ background: var(--nuit); color: #fff; border-radius: 26px; padding: 56px 32px; text-align: center; position: relative; overflow: hidden; }
html .mod-art .fin h2{ font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600; margin: 0 0 10px; position: relative; }
html .mod-art .fin p{ color: oklch(0.8 0.012 285); margin: 0 0 24px; position: relative; }
html .mod-art .fin .aurore{ position: absolute; inset: -40%; filter: blur(60px); pointer-events: none; opacity: .8;
    background: radial-gradient(40% 40% at 30% 40%, oklch(0.55 0.22 288 / .5), transparent 70%), radial-gradient(36% 40% at 75% 60%, oklch(0.58 0.18 248 / .4), transparent 70%); }
html .mod-art .lire-aussi{ max-width: 720px; margin: 0 auto; padding: 0 24px 30px; }
html .mod-art .lire-aussi h2{ font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; }
html .mod-art .lire-aussi ul{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html .mod-art .lire-aussi a{ display: block; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 12px; text-decoration: none; font-size: 14px; line-height: 1.4; }
html .mod-art .lire-aussi a:hover{ border-color: var(--violet); }
html .mod-art .lire-aussi a small{ display: block; color: var(--violet); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 3px; }

@media (max-width: 900px){
    html .mod-art .corps{ grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 40px; }
    html .mod-art .sommaire{ position: static; margin-bottom: 36px; }
    html .mod-art .sommaire ol{ border: 0; display: flex; flex-wrap: wrap; gap: 4px; }
    html .mod-art .sommaire li a{ border: 1px solid var(--trait); border-radius: 999px; padding: 6px 12px; margin: 0; }
    html .mod-art .sommaire li a.actif{ border-color: var(--violet); }
}
@media (max-width: 640px){
    html .mod-art .entete{ padding: 120px 20px 60px; }
    html .mod-art .grille, html .mod-art .lire-aussi ul{ grid-template-columns: 1fr; }
    html .mod-art .texte{ font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){ html .mod-art .cta{ transition: none; } }