/* ==========================================================================
   Le papier pointé sur une page d'outil
   ==========================================================================

   Première application de /brand-guidelines hors de la charte elle-même.
   Cette feuille se charge APRÈS shared.css et tools-suite.css et les
   corrige : elle ne réécrit pas la suite d'outils, elle la repose sur le
   papier. Tant qu'une seule page l'appelle, aucune autre ne bouge.

   Trois choses en sortent, et c'est tout ce qu'elle fait :
     · le grain de papier imité s'en va, la trame de points le remplace ;
     · le relief neumorphique s'en va, il suppose une lumière ;
     · toute surface posée sur le papier redevient opaque.

   Le champ de points est celui du site, sans une ligne de différence :
   scripts/points-champ.js. Les valeurs ci-dessous sont celles de la
   charte, reprises telles quelles.
   ========================================================================== */

:root {
    /* L'échelle d'encre en service sur pierre.gumi.ch. Une seule couleur,
       posée à des opacités qui ont chacune un emploi. */
    --encre-1:    rgba(var(--text-rgb), 1);      /* titres */
    --encre-078:  rgba(var(--text-rgb), 0.78);   /* paragraphes */
    --encre-07:   rgba(var(--text-rgb), 0.7);    /* intros */
    --encre-05:   rgba(var(--text-rgb), 0.5);    /* mentions */
    --encre-045:  rgba(var(--text-rgb), 0.45);   /* légendes */
    --filet:      rgba(var(--text-rgb), 0.14);   /* bordures */
    --filet-fin:  rgba(var(--text-rgb), 0.12);   /* bordures internes */
    --voile:      rgba(var(--text-rgb), 0.035);  /* fonds de bloc */
    --voile-fin:  rgba(var(--text-rgb), 0.022);  /* fonds légers */
    --rayon: 1.25rem;
}

/* Aucune annotation manuscrite sur cette page. L'essai en portait une, en
   marge du titre : elle répétait les seuils que l'infobulle explique et
   que les étiquettes AA/AAA affichent déjà, donc elle n'annotait rien. La
   seconde main ne sert qu'à dire ce que la page ne dit pas ; faute de
   quoi elle est un ornement.

   La déclaration de la Cedarville est partie avec elle. Une page d'outil
   qui portera une vraie note la reprendra de la charte, avec le reste du
   système de notes. */

/* ==========================================================================
   1 · Le papier
   ==========================================================================
   Le grain cream-paper est encore posé sur body par shared.css, donc sur
   toutes les pages du site. Il en partira quand le portfolio reprendra
   cette direction ; d'ici là, seules les pages qui chargent cette feuille
   s'en affranchissent. */

body {
    background-image: none;
    color: var(--encre-1);
}

/* Un seul objet pour tout le fond, dessiné par points-champ.js. Il n'a
   pas de masque : c'est le tracé lui-même qui sait où il est dense et où
   il est clair.

   Le min-height n'est pas un ornement. Le champ est en absolu dans body,
   donc « inset: 0 » lui donne la hauteur du contenu, et rien de plus. Un
   outil qui tient en un écran mesure 989 px de haut quel que soit
   l'écran : sur une fenêtre de 1440 px, le champ s'arrêtait 451 px avant
   le bas, et la remontée du bas — les 250 derniers pixels du dessin —
   tombait au milieu de la page, suivie d'une bande nue. Le champ prend
   donc au moins la hauteur de la fenêtre, et le dessin retrouve son bas
   là où l'œil l'attend. */
.points-champ {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    z-index: -2;
    color: var(--text);
    pointer-events: none;
}
.points-champ svg { display: block; overflow: visible; }

/* La rangée assombrie du titre, tracée sur une vraie rangée de la grille,
   à une encre plus forte que le champ. */
.regles {
    position: absolute;
    inset: 0;
    z-index: -1;
    color: var(--text);
    pointer-events: none;
}
.regles svg { display: block; overflow: visible; }

/* Un titre efface la trame sous lui, il ne la laisse pas le traverser.
   Un fond à la couleur du papier suffit : il est invisible sur le papier
   et il mange les points sur toute la boîte du titre. Les deux bords sont
   fondus sur l'épaisseur du rembourrage — un fond net coupe en deux le
   point qui tombe dessus, et un demi-point se voit plus qu'un entier. */
.header-container h1 {
    background-image: linear-gradient(to right,
        transparent 0, var(--bg) 0.3em,
        var(--bg) calc(100% - 0.3em), transparent 100%);
    width: fit-content;
    max-width: 100%;
    padding: 0.05em 0.36em 0.12em;
    margin-left: -0.36em;
    margin-right: -0.36em;
}

/* La charte a retiré le point après les titres : il posait une couleur là
   où rien ne se passait. Celui du logotype reste, il appartient au logo. */
.header-container h1 .dot { display: none; }

/* ==========================================================================
   2 · Les surfaces
   ==========================================================================
   Toute surface posée sur le papier est opaque. Une carte translucide
   laisse la trame lui passer au travers, et deux trames superposées ne se
   lisent plus. Le --card-bg de shared.css est un rgba : il ne convient
   plus, il est remplacé partout par le papier plus un voile. */

.right-col,
.stats-container,
.item-preview,
.bg-group,
.contrast-result,
.size-row,
.tooltip-content,
.gumi-cp {
    background-color: var(--bg);
    background-image: linear-gradient(var(--voile-fin), var(--voile-fin));
    border: 1px solid var(--filet);
    border-radius: var(--rayon);
    box-shadow: none;
}

.size-row { border-color: var(--filet-fin); border-radius: 0.8rem; }

/* Une infobulle et un sélecteur de couleur se posent sur la page, ils ne
   flottent pas au-dessus d'elle : ni ombre portée, ni surface distincte.
   Ce sont des feuilles posées sur la feuille. */
.tooltip-content,
.gumi-cp {
    background-image: none;
    border-color: var(--filet);
    border-radius: 1rem;
}

/* Le champ hexadécimal du sélecteur porte encore le creux neumorphique
   de tools-suite.css, et sa pastille un anneau à sa propre valeur : les
   deux repassent au filet. */
.gumi-cp-hex {
    background: var(--bg);
    border: 1.5px solid var(--filet);
    box-shadow: none;
    color: var(--encre-1);
    transition: border-color 0.2s ease;
}
.gumi-cp-hex:focus { border-color: var(--accent-ink); }
.gumi-cp-preview {
    border: 1px solid var(--filet);
    box-shadow: none;
}

/* ==========================================================================
   3 · Les commandes
   ==========================================================================
   Aucune ombre portée, aucun relief. Une forme pleine, un contour, ou
   rien. L'état se dit par la couleur de la bordure et du texte. */

.input-field {
    height: 52px;
    padding: 0 1.1em;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--encre-1);
    background: var(--bg);
    border: 1.5px solid var(--filet);
    border-radius: 0.6rem;
    box-shadow: none;
    transition: border-color 0.2s ease;
}
.input-field::placeholder { color: var(--encre-045); }
.input-field:focus,
.input-field:focus-visible {
    border-color: var(--accent-ink);
    box-shadow: none;
}

button.secondary {
    height: 52px;
    border-radius: 0.6rem;
    border: 1.5px solid var(--filet);
    background: var(--bg);
    color: var(--encre-1);
    box-shadow: none;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}
button.secondary:hover,
button.secondary:focus-visible,
button.secondary.active {
    color: var(--accent-ink);
    border-color: var(--accent-ink);
    box-shadow: none;
}

/* La pastille de couleur porte la couleur choisie : c'est son contenu,
   pas son style. Elle n'a donc qu'un filet, et le même rayon qu'un
   bouton pour tomber juste à côté du champ. */
.color-swatch,
.color-field-swatch {
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--filet);
    border-radius: 0.6rem;
    box-shadow: none;
    /* Un bouton ne prend pas la main tout seul : par défaut le navigateur
       lui laisse la flèche, et rien ne disait que la pastille s'ouvre. */
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.color-swatch:hover,
.color-swatch:focus-visible,
.color-field-swatch:hover { border-color: var(--accent-ink); }

.color-input-row .input-field { height: 52px; }

.control-label {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--encre-1);
}

.bg-group-divider { color: var(--encre-045); }
.bg-group-divider::before,
.bg-group-divider::after { background: var(--filet); }
.bg-image-note { color: var(--encre-05); }

/* Le retour aux outils. L'encre monte de 0,5 à 0,7 : à 15 px gras, le
   0,5 donnait 3,27:1 sur le papier, sous les 4,5 exigés par le petit
   texte — un manquement que cette page-ci est mal placée pour laisser
   passer. Le 0,7 donne 6,18:1. */
.back-link { color: var(--encre-07); }
.back-link:hover { color: var(--accent-ink); }

/* La flèche revient d'un pas vers la gauche au survol, le sens même du
   lien. Trois pixels, sur la seule flèche : le mot ne bouge pas, sinon
   c'est la ligne entière qui glisse et le geste devient un effet. */
.back-link svg { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.back-link:hover svg,
.back-link:focus-visible svg { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
    .back-link svg { transition: none; }
    .back-link:hover svg,
    .back-link:focus-visible svg { transform: none; }
}

/* L'infobulle : un contour, comme tout le reste. */
.tooltip-icon {
    background: var(--bg);
    border: 1.5px solid var(--filet);
    box-shadow: none;
    color: var(--encre-07);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.tooltip-wrapper:hover .tooltip-icon,
.tooltip-wrapper.active .tooltip-icon {
    border-color: var(--accent-ink);
    color: var(--accent-ink);
    box-shadow: none;
}
/* Un lien de la charte : à l'encre au repos, souligné d'un filet, et la
   couleur ne vient qu'au survol. La règle est écrite au §03 — « la
   couleur apparaît à quatre endroits : l'entrée courante du rail, le
   focus clavier, le survol d'un lien, et l'icône d'un projet ouvert.
   Partout ailleurs, l'encre suffit. » Un lien violet au repos la
   contredisait, et à 3,02:1 sur le papier il ne tenait pas non plus le
   petit texte.

   Le !important reste : la chaîne du lien est écrite dans les traductions
   de scripts/i18n.js, qui la posent en HTML dans l'infobulle. */
.tooltip-content a {
    color: var(--encre-1) !important;
    font-weight: 700 !important;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--filet);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.tooltip-content a:hover,
.tooltip-content a:focus-visible {
    color: var(--accent-ink) !important;
    text-decoration-color: var(--accent-ink);
}

/* Le panneau est à l'intérieur de .tooltip-wrapper, qui porte « cursor:
   pointer » pour son bouton d'aide : tout le texte de l'infobulle héritait
   donc la main, comme s'il était cliquable. Il ne l'est pas. La main ne
   reste que sur le bouton et sur le lien, les deux seules choses qu'on y
   clique ; le texte reprend le curseur de lecture. */
.tooltip-content { cursor: default; }
.tooltip-content a { cursor: pointer; }

/* « Fonctionne hors ligne » n'est pas un verdict, c'est un état de fait :
   il n'a donc pas à porter une couleur. Le vert passe dans la seule
   pastille, où il est un aplat — l'emploi pour lequel --positive est
   réglé — et le texte revient à l'encre. Il y gagne aussi en lisibilité :
   à 0,78 rem, le vert donnait 3,14:1, contre 6,18:1 pour l'encre 0,7. */
.tooltip-status.is-offline,
.tooltip-status.is-online { color: var(--encre-07); }
.tooltip-status { border-top-color: var(--filet-fin); }
.tooltip-status.is-offline .tooltip-status-dot { background: var(--positive); }
.tooltip-status.is-online .tooltip-status-dot { background: var(--accent); }

/* ==========================================================================
   4 · Les icônes
   ==========================================================================
   Lucide au trait, sans retouche : grille de 24, épaisseur 2, extrémités
   et jonctions arrondies. L'épaisseur est dans les unités du dessin, elle
   suit donc la taille affichée. */

.icone {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* shared.css et tools-suite.css visent ces icônes par « .back-link svg »
   et « .tooltip-icon svg », qui pèsent plus lourd que « .icone » seul et
   lui imposaient une épaisseur de 2,5. La règle du jeu est reprise ici au
   même poids, sur les deux emplacements. */
.back-link .icone,
.tooltip-icon .icone {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* ==========================================================================
   5 · Le verdict
   ==========================================================================
   Le seul endroit de la page où la couleur porte un sens plutôt qu'un
   état d'interaction : réussi ou non. Elle se dit comme le dit le UI kit
   de la charte, par la bordure et par le texte, et non par un aplat
   teinté qui repeindrait le papier. */

.contrast-result {
    padding: 1.5rem;
    gap: 1.2rem;
    transition: border-color 0.3s ease;
}
.contrast-result.is-pass { border-color: var(--positive); background-color: var(--bg); }
.contrast-result.is-fail { border-color: var(--negative); background-color: var(--bg); }

.ratio-value {
    font-size: 3.4rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--encre-1);
}
.rating-label { font-size: 1rem; font-weight: 800; color: var(--encre-07); }
.contrast-result.is-pass .rating-label { color: var(--positive-ink); }
.contrast-result.is-fail .rating-label { color: var(--negative); }

.contrast-meter span {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: var(--voile);
    border: 1px solid var(--filet-fin);
}
.contrast-meter span.on { border-color: transparent; }

.size-row .size-label { font-weight: 700; font-size: 0.92rem; color: var(--encre-078); }

/* Une étiquette de la charte : un filet, pas un aplat. Le vert et le
   rouge passent dans le trait et dans le texte. */
.chip {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.28rem 0.7rem;
    border-radius: 100px;
    border: 1px solid var(--filet);
    background: transparent;
    color: var(--encre-05);
}
.chip.pass { border-color: rgba(96, 150, 117, 0.55); color: var(--positive-ink); background: transparent; }
.chip.fail { border-color: rgba(197, 106, 106, 0.55); color: var(--negative); background: transparent; }

.contrast-footer { color: var(--encre-07); font-size: 0.92rem; }
/* « Corriger automatiquement » est un lien, et suit donc la règle des
   liens : à l'encre au repos, souligné d'un filet, la couleur réservée au
   survol. Il faisait l'inverse, violet au repos et noir au survol, ce qui
   posait une couleur sur une action qui ne s'était pas encore produite. */
.fix-link {
    color: var(--encre-1);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.25em;
    text-decoration-color: var(--filet);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.fix-link:hover,
.fix-link:focus-visible {
    color: var(--accent-ink);
    text-decoration-color: var(--accent-ink);
}

/* ==========================================================================
   6 · L'aperçu
   ========================================================================== */

.preview-panel {
    border-radius: var(--rayon);
    border: 1px solid var(--filet);
    min-height: 480px;
}

/* ==========================================================================
   7 · Le mouvement
   ==========================================================================
   Rien n'est caché tant que le script en tête de document n'a pas posé
   .fond-anime sur <html>, et il ne la pose ni sans JavaScript, ni quand
   le système demande moins de mouvement. */

/* Cette liste est reprise telle quelle dans scripts/outil-papier.js : les
   deux doivent rester identiques, sinon un element se cache sans que rien
   ne vienne le decouvrir. Aux quatre premiers s'ajoutent l'accordeon des
   parametres, le bouton d'action de la colonne de gauche, la rangee de la
   palette et la zone de depose des declinaisons : ils arrivaient d'un
   coup avec la page pendant que le reste montait. */
.fond-anime :where(.back-link, .header-container, .control-row, .right-col,
                   .advanced-section, .left-col button.primary,
                   .pal-actions, .left-col .drop-zone) {
    opacity: 0;
    transform: translateY(var(--anim-monte, 0.85rem));
    transition: opacity 0.6s ease var(--anim-retard, 0s),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--anim-retard, 0s);
}

/* Un transform, même à zéro, ouvre un contexte d'empilement : le z-index
   d'un élément placé à l'intérieur ne compte plus qu'entre frères, et
   l'infobulle de l'en-tête passait derrière l'aperçu. L'en-tête reçoit
   donc son propre rang, au-dessus de la grille. */
.header-container { position: relative; z-index: 20; }
/* Un titre et sa rangée sont posés au pixel près l'un sur l'autre : les
   faire glisser referait le saut de ligne qu'on cherche à supprimer. */
.fond-anime :where(.header-container) { --anim-monte: 0px; }
.fond-anime [data-anim="vu"] { opacity: 1; --anim-monte: 0px; }

.fond-anime .points-champ,
.fond-anime .regles {
    opacity: 0;
    transition: opacity 0.35s ease var(--anim-retard, 0s);
}
.fond-anime .points-champ[data-anim="vu"],
.fond-anime .regles[data-anim="vu"] { opacity: 1; }

/* ==========================================================================
   8 · Le thème sombre
   ==========================================================================
   Les tokens d'encre se recalculent seuls, ils sont écrits en --text-rgb.
   Seules les valeurs codées en dur de shared.css ont besoin d'un mot. */

:root[data-theme="dark"] .chip.pass { border-color: rgba(96, 150, 117, 0.6); color: var(--positive); }
:root[data-theme="dark"] .chip.fail { border-color: rgba(197, 106, 106, 0.6); color: var(--negative); }
:root[data-theme="dark"] .contrast-result.is-pass .rating-label { color: var(--positive); }

/* ==========================================================================
   9 · Le reste de la suite d'outils
   ==========================================================================
   Ce qui précède a été écrit pour l'analyseur de contraste, la première
   page passée au papier. Ce bloc-ci couvre les composants que portent les
   dix autres : ils suivent la même règle, aplat opaque et filet, jamais de
   lumière simulée. */

/* La zone de dépôt était un creux : une lumière venue du haut-gauche, donc
   une pièce et une profondeur. Sur du papier, une zone où déposer un
   fichier se dit par un trait discontinu, la convention du découpage. */
.drop-zone {
    background: var(--bg);
    background-image: linear-gradient(var(--voile-fin), var(--voile-fin));
    border: 1.5px dashed var(--filet);
    border-radius: var(--rayon);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--accent-ink);
    box-shadow: none;
}

/* Le sélecteur segmenté : le rail devient un contour, et c'est la pastille
   qui porte l'aplat. L'état choisi se lit donc par la forme pleine, pas par
   un creux. */
.segmented-control {
    background: var(--bg);
    background-image: linear-gradient(var(--voile-fin), var(--voile-fin));
    border: 1px solid var(--filet);
    box-shadow: none;
}
.segmented-control .slider-format {
    background: var(--encre-1);
    box-shadow: none;
}
.segmented-control label { color: var(--encre-07); }
.segmented-control label:hover { color: var(--encre-1); }
.segmented-control input:checked + label,
.segmented-control label.active { color: var(--bg); }
/* Le libelle choisi se lit en reserve sur la pastille. Les pages nomment
   leurs boutons par identifiant (« #f-png:checked ~ label[for="f-png"] »),
   trop lourd pour etre repris ici : la regle est corrigee chez elles. */

/* Le bouton rond des listes : un contour, et la bordure répond au survol. */
.icon-button {
    background: var(--bg);
    border: 1.5px solid var(--filet);
    box-shadow: none;
    color: var(--encre-1);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.icon-button:hover:not(:disabled),
.icon-button:focus-visible:not(:disabled) {
    border-color: var(--accent-ink);
    color: var(--accent-ink);
    box-shadow: none;
}
.icon-button:active:not(:disabled) { box-shadow: none; }
.icon-button:disabled { color: var(--encre-045); border-color: var(--filet-fin); }

.stats-container { border-radius: 2rem; color: var(--encre-07); }
.item-preview { border-radius: 50%; }

/* Le bouton dont l'action est impossible : pas d'aplat d'encre, un simple
   fond voile cercle d'un filet, et le mot en encre pale. Il reste lisible,
   il ne se lit plus comme un appel a cliquer. Aucune opacite ici : elle
   appartient aux apparitions, qui la mènent de 0 à 1 et perdraient contre
   ce sélecteur. tools-suite.css pose son relief en !important : il faut le
   meme poids pour le retirer. */
button.primary:disabled {
    box-shadow: none !important;
    background: var(--voile);
    border: 1px solid var(--filet);
    color: var(--encre-045);
    cursor: not-allowed;
}

/* Le theme sombre de shared.css redonne son relief a ce que cette feuille
   avait aplati : ses regles pesent « :root[data-theme] + classe », plus
   lourd qu'une classe seule. La reprise se fait donc au meme poids. Sans
   elle, les cartes, les boutons et les champs retrouvaient leur ombre des
   qu'on passait au sombre. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card:active,
:root[data-theme="dark"] .tool-card,
:root[data-theme="dark"] .tool-card:active,
:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .input-field,
:root[data-theme="dark"] .input-field:focus {
    box-shadow: none;
}
:root[data-theme="dark"] button.primary:active:not(:disabled),
:root[data-theme="dark"] .btn-primary:active {
    box-shadow: none;
}

/* ==========================================================================
   10 · Les pages de liste
   ==========================================================================
   /outils et /experimentations. Elles ne sont pas bâties comme une page
   d'outil : ce sont des « shell-page », où le papier n'est pas <body> mais
   <main class="site-content">, une feuille posée sur une table sombre. Le
   champ de points va donc dans cette feuille, et c'est elle qui perd le
   grain imité. */

.site-content { background-image: none; }

/* L'ancienne bande de points du haut de page ne tenait que les 250 premiers
   pixels. Le champ la remplace sur toute la hauteur. */
.dots-bg { display: none !important; }

.hero h1 .dot { display: none; }

/* La carte d'un outil ou d'une expérimentation : un contour qui répond au
   survol, au lieu d'un relief qui s'enfonce au clic. */
.tool-card,
.card {
    background-color: var(--bg);
    background-image: linear-gradient(var(--voile-fin), var(--voile-fin));
    border: 1px solid var(--filet);
    box-shadow: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.tool-card:hover,
.card:hover,
.tool-card:focus-visible,
.card:focus-visible { border-color: var(--accent-ink); box-shadow: none; }
.tool-card:active,
.card:active { box-shadow: none; }

.card-image {
    background-color: var(--bg);
    background-image: linear-gradient(var(--voile), var(--voile));
    box-shadow: none;
}

/* Une carte à venir reste une carte : elle se dit par l'encre, pas par un
   relief plus mou. */
.tool-card.faded,
.card.faded { border-style: dashed; }

.search-input {
    background: var(--bg);
    border: 1.5px solid var(--filet);
    box-shadow: none;
    color: var(--encre-1);
    transition: border-color 0.2s ease;
}
.search-input::placeholder { color: var(--encre-045); }
.search-input:focus { border-color: var(--accent-ink); box-shadow: none; }

.filter-btn {
    background: var(--bg);
    border: 1.5px solid var(--filet);
    box-shadow: none;
    color: var(--encre-07);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.filter-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/* Le filtre actif est le seul aplat de la rangée : c'est la forme pleine
   qui dit « celui-ci », et non une couleur de plus. */
.filter-btn.active {
    background: var(--encre-1);
    border-color: var(--encre-1);
    color: var(--bg);
    box-shadow: none;
}

/* Le bouton plein. Sa forme suffit à le distinguer : il n'a pas besoin
   d'être soulevé. L'action principale du résultat est désormais dans le
   flux de la colonne, elle ne survole plus rien : aucune ombre ne décrit
   de position, il ne reste que l'aplat. */
button.primary,
.btn-primary { box-shadow: none; }

/* Les interrupteurs : un contour et un aplat, sans creux. « .switch .slider »
   pese plus lourd qu'un selecteur simple, la reprise se fait donc au meme
   niveau. La pastille perd son ombre : sur le papier, c'est la position qui
   dit l'etat, pas l'epaisseur. */
.switch .slider,
.toggle {
    box-shadow: none;
    border: 1px solid var(--filet);
}
.switch .slider:before { box-shadow: none; }
.switch input:checked + .slider { border-color: transparent; }

/* ==========================================================================
   11 · La page d'accueil
   ==========================================================================
   Même feuille que les pages de liste : cartes, boutons et grain sont déjà
   traités plus haut. Restent trois pièces qui n'existent que là. */

/* Comme dans les études, l'image se pose sur le papier : le filet dit le
   bord, aucune ombre ne la fait flotter. */
.hero-image-container img {
    border: 1px solid var(--filet);
}

/* Le titre d'une carte au survol. Le survol d'un lien est bien l'un des
   quatre emplacements de la couleur, mais --accent donne 3,02:1 sur le
   papier, sous les 4,5 exigés à cette taille. --accent-ink en donne 5,79,
   pour la même teinte. */
.card:hover .card-title,
.tool-card:hover .tool-title {
    color: var(--accent-ink);
}

/* Le pied de page. L'adresse s'écrivait en violet au repos, une cinquième
   place pour la couleur. Elle revient à l'encre du bloc — ici le papier,
   puisque le pied est sombre — et la couleur ne reparaît que sur le trait
   qui se déplie au survol. C'est la règle du CV, où le lien de contact est
   en encre pleine et n'appelle l'accent qu'au survol. */
.footer-mail {
    color: inherit;
}