/* m'Manager — feuille commune du site public.
   ---------------------------------------------------------------------------
   Le parti pris tient en une image : le registre. Une facture appartient à une
   série, elle porte un numéro, elle s'écrit dans un cahier réglé où l'on annote
   la marge. Toute la page en découle — la colonne de marge foliotée, les
   réglures, les chiffres à chasse fixe, le tampon de l'échéance.

   Deux polices, pas trois. Un serif pour ce qui se lit lentement, le sans de
   l'application pour ce qui se parcourt, et du monospace pour ce qui se compte.
   Aucune n'est chargée depuis le réseau : elles existent déjà sur la machine du
   lecteur, ce qui vaut mieux qu'un caractère qui arrive après le texte. */

:root {
    --encre: #14212b;
    --encre-2: #4d5a66;
    --encre-3: #8b95a0;
    --papier: #f7f4ee;
    --papier-2: #fffdf9;
    --papier-3: #efeae1;
    --regle: rgba(20, 33, 43, .13);
    --regle-forte: rgba(20, 33, 43, .28);
    --vert: #0e6e6b;
    --vert-profond: #0a5250;
    --vert-voile: rgba(14, 110, 107, .09);
    /* Le texte posé SUR le vert. Il bascule avec le thème, parce que le vert
       lui-même bascule : sombre il est clair, et du blanc dessus ne se lit
       plus — surtout au survol, où il s'éclaircit encore. */
    --sur-vert: #ffffff;
    --carmin: #a8322a;
    --carmin-voile: rgba(168, 50, 42, .10);
    --ocre: #9a6f26;
    --ocre-voile: rgba(154, 111, 38, .12);

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             "Hoefler Text", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
    --chiffre: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;

    --marge: 132px;
    --fluide: cubic-bezier(.22, .68, .24, 1);
    --ombre: 0 1px 2px rgba(20, 33, 43, .05), 0 10px 30px rgba(20, 33, 43, .07);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --encre: #e9e5dc;
        --encre-2: #a8a49b;
        --encre-3: #78746c;
        --papier: #14181c;
        --papier-2: #1b2126;
        --papier-3: #222a30;
        --regle: rgba(233, 229, 220, .13);
        --regle-forte: rgba(233, 229, 220, .30);
        --vert: #4fbdb2;
        --vert-profond: #63d0c4;
        --vert-voile: rgba(79, 189, 178, .12);
        --sur-vert: #0b1417;
        --carmin: #e0796e;
        --carmin-voile: rgba(224, 121, 110, .12);
        --ocre: #c9a05a;
        --ocre-voile: rgba(201, 160, 90, .14);
        --ombre: 0 1px 2px rgba(0, 0, 0, .34), 0 10px 30px rgba(0, 0, 0, .34);
    }
}

:root[data-theme="dark"] {
    --encre: #e9e5dc;
    --encre-2: #a8a49b;
    --encre-3: #78746c;
    --papier: #14181c;
    --papier-2: #1b2126;
    --papier-3: #222a30;
    --regle: rgba(233, 229, 220, .13);
    --regle-forte: rgba(233, 229, 220, .30);
    --vert: #4fbdb2;
    --vert-profond: #63d0c4;
    --vert-voile: rgba(79, 189, 178, .12);
    --sur-vert: #0b1417;
    --carmin: #e0796e;
    --carmin-voile: rgba(224, 121, 110, .12);
    --ocre: #c9a05a;
    --ocre-voile: rgba(201, 160, 90, .14);
    --ombre: 0 1px 2px rgba(0, 0, 0, .34), 0 10px 30px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: var(--papier);
    color: var(--encre);
    font-family: var(--sans);
    font-size: 17.5px;
    line-height: 1.64;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* Le grain du papier. Presque invisible — c'est le but : on ne le remarque pas,
   on remarque seulement que la page n'est pas plate. Un bruit fractal en SVG,
   posé une fois sur tout le document, coûte moins qu'une image et suit la
   fenêtre. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: .5; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

@media (prefers-color-scheme: dark) {
    body::before { mix-blend-mode: screen; opacity: .35; }
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .35; }

::selection { background: var(--vert-voile); }

:where(a, button, summary, input):focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ------------------------------------------------------------- le registre */

/* La page est un cahier : une marge étroite à gauche, où vivent le folio et les
   annotations, et le corps décalé à droite. Sur téléphone la marge disparaît —
   un cahier de poche n'en a pas — et ses annotations reprennent leur place dans
   le flux. */
.feuillet {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: var(--marge) minmax(0, 1fr);
    column-gap: 40px;
}

/* La marge porte une annotation, pas une cote de classement. Un mot écrit au
   crayon à côté du paragraphe — d'où l'italique, et non les petites capitales
   d'un registre d'archives. La première version numérotait les sections en
   chiffres romains : c'était juste, et glacial. */
.marge {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    color: var(--encre-3);
    padding-top: 11px;
}
.marge b {
    display: block; color: var(--ocre); font-style: normal; font-weight: 600;
    font-family: var(--chiffre); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; margin-bottom: 6px;
}
.marge span { display: block; }

.corps { min-width: 0; }

/* La réglure qui ouvre chaque section. Elle se trace au défilement — le geste
   de tirer un trait dans un registre — et reste tracée pour qui a demandé moins
   d'animations. */
.trait {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--regle-forte);
    transform-origin: left;
    transform: scaleX(var(--trace, 1));
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .trait { --trace: 0; }
    .trait.tracee { --trace: 1; }
}

/* Les blocs montent d'un cran en entrant dans le champ. Discret, et surtout
   sans conséquence : qui a désactivé le script ou demandé moins d'animations
   voit la page complète, immobile. */
@media (prefers-reduced-motion: no-preference) {
    .monte { opacity: 0; transform: translateY(18px); }
    .monte.venue {
        opacity: 1; transform: none;
        transition: opacity .7s var(--fluide), transform .7s var(--fluide);
    }
}

/* ------------------------------------------------------------ typographie */

h1, h2, h3, .serif {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.12;
    text-wrap: balance;
}

h1 { font-size: clamp(40px, 6.6vw, 76px); letter-spacing: -.03em; }
h2 { font-size: clamp(28px, 3.9vw, 42px); }
h3 { font-size: 21px; line-height: 1.25; }

p { color: var(--encre-2); }
strong { color: var(--encre); font-weight: 600; }
em { font-style: italic; }

a { color: var(--vert); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--vert-profond); }

.chapeau {
    font-family: var(--serif);
    font-size: clamp(19px, 2.1vw, 23px);
    line-height: 1.48;
    color: var(--encre-2);
    max-width: 30em;
}

.mesure { max-width: 33em; }
.mesure p + p { margin-top: 15px; }

/* Le folio : le titre de section, en petites capitales, comme un intitulé de
   colonne dans un cahier. */
.folio {
    font-family: var(--chiffre);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--encre-3);
    display: block;
    margin-bottom: 14px;
}

section { padding: 84px 0; }

/* --------------------------------------------------------------- boutons */

/* Le bouton. Une pastille pleine, une ombre portée qui s'accentue au survol, et
   une flèche qui avance d'un cheveu — assez pour qu'il ait l'air vivant, pas
   assez pour qu'il gigote. */
.bouton {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans);
    font-size: 16.5px; font-weight: 560; letter-spacing: -.005em;
    text-decoration: none;
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--vert);
    color: var(--sur-vert);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 33, 43, .10), 0 6px 18px var(--vert-voile);
    transition: background .2s var(--fluide), box-shadow .25s var(--fluide),
                transform .25s var(--fluide);
}
.bouton .fleche { transition: transform .28s var(--fluide); }
.bouton:hover {
    background: var(--vert-profond);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(20, 33, 43, .12), 0 14px 30px var(--vert-voile);
}
.bouton:hover .fleche { transform: translateX(4px); }
.bouton:active { transform: translateY(0); }

.bouton.creux {
    background: transparent; color: var(--vert);
    border-color: var(--regle-forte); box-shadow: none;
}
.bouton.creux:hover {
    background: var(--vert-voile); color: var(--vert-profond);
    border-color: var(--vert); box-shadow: 0 6px 18px var(--vert-voile);
}

/* ----------------------------------------------------------------- entête */

.entete {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--papier) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--regle);
}
.entete .feuillet { column-gap: 40px; align-items: center; }
.entete-barre { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; height: 68px; }

.sigle { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.sigle b { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.sigle i { font-style: normal; color: var(--vert); }

.entete nav { margin-left: auto; display: flex; gap: 26px; }
.entete nav a {
    color: var(--encre-2); text-decoration: none; font-size: 14.5px;
    padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.entete nav a:hover { color: var(--encre); border-bottom-color: var(--vert); }

/* ------------------------------------------------------------------- pied */

.pied { border-top: 1px solid var(--regle-forte); padding: 52px 0 64px; background: var(--papier-3); }
.pied .feuillet > .corps { display: grid; gap: 36px; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.pied h4 {
    font-family: var(--chiffre); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--encre-3); margin-bottom: 12px; font-weight: 500;
}
.pied ul { list-style: none; display: grid; gap: 7px; }
.pied a, .pied p, .pied li { font-size: 14.5px; color: var(--encre-2); }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--vert); }
.pied .mention { margin-top: 34px; font-size: 13px; color: var(--encre-3); max-width: 78ch; }

/* --------------------------------------------------------- pages de texte */

/* Les pages légales sont un contrat : mesure étroite, articles numérotés,
   réglures. Le même cahier, mais sans la mise en scène — on n'orne pas des
   conditions générales, on les rend lisibles. */
.acte { padding: 62px 0 96px; }
.acte h1 { font-size: clamp(32px, 4.4vw, 46px); }
.acte .chapeau { margin-top: 18px; }

.acte article { padding: 30px 0; border-top: 1px solid var(--regle); }
.acte article:first-of-type { border-top: 1px solid var(--regle-forte); margin-top: 40px; }
.acte article > h2 {
    font-size: 22px; margin-bottom: 14px;
    display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: baseline;
}
.acte article > h2 span {
    font-family: var(--chiffre); font-size: 13px; color: var(--ocre);
    letter-spacing: .04em; font-weight: 500;
}
.acte article > h2 + *, .acte article > * + * { max-width: 40em; }
.acte article p + p, .acte article ul + p, .acte article p + ul { margin-top: 13px; }
.acte article ul { list-style: none; display: grid; gap: 9px; padding-left: 2px; }
.acte article li {
    color: var(--encre-2); font-size: 16px;
    display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: baseline;
}
.acte article li::before { content: '—'; color: var(--encre-3); }
.acte h3 { font-size: 17.5px; margin-top: 22px; margin-bottom: 8px; font-family: var(--sans); font-weight: 620; }

.acte table { width: 100%; border-collapse: collapse; margin-top: 16px; max-width: 44em; }
.acte th, .acte td {
    text-align: left; padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--regle); font-size: 15.5px; vertical-align: top;
}
.acte th {
    font-family: var(--chiffre); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--encre-3); font-weight: 500;
}
.acte td:first-child { color: var(--encre); font-weight: 550; padding-right: 22px; }

.aremplir {
    background: var(--ocre-voile); color: var(--ocre);
    font-family: var(--chiffre); font-size: 13px;
    padding: 1px 7px; border-radius: 2px; white-space: nowrap;
}

.avis {
    border-left: 2px solid var(--ocre); background: var(--ocre-voile);
    padding: 18px 22px; margin: 32px 0 0; max-width: 44em;
}
.avis p { font-size: 15px; color: var(--encre-2); }
.avis p + p { margin-top: 9px; }
.avis b { color: var(--encre); }

.sommaire { margin: 36px 0 0; padding: 22px 26px; background: var(--papier-2); border: 1px solid var(--regle); }
.sommaire ol { list-style: none; counter-reset: art; display: grid; gap: 7px; }
.sommaire li { counter-increment: art; font-size: 15px; }
.sommaire li::before {
    content: counter(art, decimal-leading-zero) '  ';
    font-family: var(--chiffre); font-size: 12px; color: var(--ocre);
}
.sommaire a { color: var(--encre-2); text-decoration: none; }
.sommaire a:hover { color: var(--vert); }

/* ------------------------------------------------------------- téléphone */

@media (max-width: 900px) {
    :root { --marge: 0px; }
    .feuillet { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .marge {
        padding-top: 0; margin-bottom: 14px; font-size: 15.5px;
        display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
    }
    .marge b, .marge span { display: inline; margin: 0; }
    .marge:empty { display: none; margin: 0; }
    .entete nav { display: none; }
    .pied .feuillet > .corps { grid-template-columns: 1fr 1fr; }
    section { padding: 60px 0; }
}

@media (max-width: 560px) {
    .pied .feuillet > .corps { grid-template-columns: 1fr; }
    .acte article > h2 { grid-template-columns: 1fr; gap: 2px; }
}