/* ═══════════════════════════════════════════════════════════════════════════
   peau.css — LA MARQUE, ET RIEN QUE LA MARQUE
   ═══════════════════════════════════════════════════════════════════════════

   Les jetons, leurs valeurs, et la bascule clair/sombre. C'est le SEUL
   fichier du thème où une couleur ou une police a le droit d'être écrite en
   clair — c'est ici qu'on définit le vocabulaire, et interdire de le définir
   reviendrait à interdire d'avoir une charte.

   Rhabiller ce thème, c'est réécrire ce fichier et `theme.json`. Rien
   d'autre : `structure.css` ne connaît que des noms de jetons.

   ⚠️ UN JETON SOMBRE N'EST PAS UNE VARIANTE, C'EST UN COUPLE. Un fond et son
   texte doivent se renverser ENSEMBLE. Trois défauts mesurés le 21.10.2026
   venaient tous de là : un fond passait au clair pendant que son texte
   restait blanc. Quand on ajoute un `--end-x`, on se demande ce que devient
   `--end-x-texte`.

   ⚠️ ET CERTAINS NE SE RENVERSENT JAMAIS. L'ambre est un aplat clair dans les
   deux thèmes : son texte est noir dans les deux. `--end-sur-ambre` n'a donc
   délibérément pas de jumeau `--end-d-*`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ LES APLATS DE MARQUE PORTENT DU BLANC ═══════════════════════════════
   Demande du 21.10.2026 : « sur ces fonds teal, le texte blanc sort mieux ».
   Il sort mieux, et il ne passait pas — du blanc sur le turquoise de marque
   #28A8BF mesure 2,82, très en dessous du seuil AA de 4,5. Le noir y était à
   7,02, ce qui explique qu'il ait été choisi.

   On ne renonce donc pas au blanc : on fonce l'aplat. `turquoise-texte`
   #126E80 EXISTE DÉJÀ dans la palette — c'est la variante que la marque
   utilise quand le turquoise doit porter du sens sur fond clair. Le blanc y
   mesure 5,89. Aucune couleur nouvelle n'entre dans la charte, et l'écart
   avec le turquoise vif reste lisible comme une nuance de la même famille.

   LE TURQUOISE VIF RESTE partout où rien ne s'écrit dessus : la barre de
   progression, les filets, les pastilles. Un aplat qui ne porte pas de texte
   n'a pas de contraste de texte à tenir. */
:root {
  --end-plein: var(--wp--preset--color--turquoise-texte);
  --end-plein-texte: #FFFFFF;
  /* Le survol du bouton plein. Il DOIT être un jeton : #3FC0D6 en dur portait
     du texte blanc, soit 2:1. Jamais mesuré, parce qu'un survol ne se voit pas
     dans un balayage de pages. */
  --end-plein-survol: #0E5A68;
  /* L'ambre ne se renverse JAMAIS — c'est un aplat clair dans les deux
     thèmes. Son texte ne doit donc pas se renverser non plus, et ce jeton
     n'a délibérément PAS de jumeau `--end-d-*`. */
  --end-sur-ambre: #2A2420;
  /* LES COULEURS DES PLATEFORMES NE SONT PAS LA CHARTE DU SITE. Ce sont
     celles de Spotify, Apple, YouTube, LinkedIn et du RSS : elles ne se
     renversent pas avec le thème et ne se redessinent pas au goût de la
     marque. Elles sont néanmoins déclarées ICI, et non écrites dans le
     gabarit, pour deux raisons — une couleur de tiers perdue au milieu d'un
     `<svg>` n'est reprise par personne, et un site qui voudrait des pastilles
     monochromes n'a qu'à réécrire ces six lignes. */
  --end-plateforme-spotify: #1DB954;
  --end-plateforme-apple: #9933CC;
  --end-plateforme-youtube: #FF0000;
  --end-plateforme-linkedin: #0A66C2;
  --end-plateforme-rss: #F26522;
  --end-plateforme-glyphe: #FFFFFF;

  /* L'exergue de « À propos » est une carte RENVERSÉE : sombre dans une page
     claire, claire dans une page sombre. Son fond suivait `encre` et son
     texte `lecteur-texte` — deux jetons qui ne se renversent pas ensemble.
     Les trois ci-dessous le font, et c'est le seul endroit qui en décide. */
  --end-exergue-fond: var(--wp--preset--color--encre);
  --end-exergue-texte: #FFFFFF;
  --end-exergue-accent: var(--wp--preset--color--ambre);
}
/* ══ LA CARTE DU LECTEUR A SES PROPRES JETONS ═════════════════════════════
   Elle était en `encre` avec du blanc écrit en dur. Un fond sombre posé en
   dur ne se renverse pas : ni pour passer la carte en clair, ni pour le mode
   sombre du système. Les sept valeurs ci-dessous sont le SEUL endroit qui
   décide de son habillage — tout le reste s'y réfère.

   Elles ne touchent pas aux presets `lecteur-*` de `theme.json`, qui servent
   AUSSI à l'exergue de « À propos » : les renverser là-bas rendrait une
   citation blanche sur blanc.

   LA CARTE EST CLAIRE, ET POURTANT ELLE N'EST PAS UNE FICHE DE LA LISTE.
   Trois choses l'en séparent, et il en faut trois : les fiches sont en
   `carte` pur sur `papier`, la carte du lecteur est très légèrement
   turquoisée ; elle porte un filet de 2 px quand les fiches n'en ont pas ;
   elle porte une ombre portée quand les fiches sont à plat. Une seule des
   trois ne suffisait pas — 5 % de turquoise seul ne se distingue pas du
   blanc à côté d'un fond `papier` bleuté. */
:root {
  /* La recette est `color-mix(turquoise 5%, carte)`. Elle est écrite en
     clair parce que les sondes de contraste ne savent pas la résoudre :
     elles remontent alors au fond du parent et rendent 1,05 là où le rendu
     mesure 18,90 au pixel. Un faux échec coûte aussi cher qu'un vrai
     manquement — il use la confiance dans le tableau. */
  --end-l-fond: #F4FBFC;
  --end-l-texte: var(--wp--preset--color--encre);
  --end-l-douce: var(--wp--preset--color--encre-douce);
  /* `turquoise-texte` et non `turquoise` : sur un fond clair, le turquoise
     de marque tombe à 2,6 de contraste. Mesuré, et c'est la même correction
     que celle déjà faite sur la pastille de rubrique. */
  --end-l-accent: var(--wp--preset--color--turquoise-texte);
  --end-l-rail: var(--wp--preset--color--filet);
  --end-l-filet: color-mix(in srgb, var(--wp--preset--color--turquoise) 38%, transparent);
  --end-l-ombre: 0 10px 30px color-mix(in srgb, var(--wp--preset--color--encre) 13%, transparent);
}
/* ══ LE MODE SOMBRE ══════════════════════════════════════════════════════
   Il suit le réglage du système, ET il se force depuis l'en-tête.

   TROIS ÉTATS, PAS DEUX. `data-theme` absent = on suit le système ;
   `="dark"` et `="light"` = la personne a tranché pour ce navigateur. Le
   troisième état est le plus important : sans lui, un site qui a un bouton
   oublie le réglage système dès le premier clic, et ne sait plus y revenir.

   POURQUOI LES VALEURS SONT DANS `--end-d-*` ET NON DANS LES BLOCS. Il faut
   deux sélecteurs — une requête média et un attribut — et CSS ne sait pas
   les grouper. Écrire les couleurs deux fois, c'est se garantir qu'un jour
   l'une des deux copies ne sera pas mise à jour. Ici les blocs de bascule ne
   font que RÉAFFECTER ; la couleur, elle, n'est écrite qu'une fois.

   `color-scheme` n'est pas décoratif : sans lui, les ascenseurs, les champs
   et le lecteur audio de secours restent clairs au milieu d'une page sombre,
   et la recherche rend du texte noir sur noir.

   LES CONTRASTES SONT MESURÉS, pas estimés — encre sur papier 16,09 · encre
   sur carte 14,37 · encre-douce sur carte 8,14 · turquoise-texte sur carte
   9,19 · turquoise sur carte 5,95 · encre sur le fond du lecteur 12,36 ·
   encre-douce sur le fond du lecteur 7,00 · noir sur turquoise 7,02. Le
   seuil AA est à 4,5. */
:root {
  --end-d-papier: #17120E;
  --end-d-carte: #221C16;
  --end-d-encre: #F0E9DF;
  --end-d-encre-douce: #B5AA9C;
  --end-d-filet: #3A322A;
  /* Les deux couleurs de marque ne bougent pas : elles SONT la marque, et
     elles tiennent AA sur le fond sombre. Ce sont leurs variantes « texte »
     qui se renversent — en clair elles s'assombrissaient pour passer sur du
     blanc, ici elles s'éclaircissent pour la raison symétrique. */
  --end-d-turquoise-texte: #5CCFE3;
  --end-d-ambre-texte: #F2B860;
  --end-d-lecteur-fond: #1D2A2C;  /* color-mix(turquoise 10%, carte), écrit en clair */
  --end-d-lecteur-filet: color-mix(in srgb, var(--wp--preset--color--turquoise) 50%, transparent);
  --end-d-lecteur-ombre: 0 14px 38px color-mix(in srgb, #000000 55%, transparent);

  /* ── CE QUI SE RENVERSE AVEC L'APLAT, ET QU'ON AVAIT OUBLIÉ ─────────────
     `--end-plein` suit `turquoise-texte`, qui passe de #126E80 à #5CCFE3 en
     sombre : l'aplat devient CLAIR. Son texte, lui, était écrit en dur à
     #FFFFFF — blanc sur cyan clair, 1,9:1. Six surfaces étaient touchées :
     les pastilles de rubrique, les deux boutons de lecture, le lien de
     fiche, la pastille de la navigation et le survol de « s'abonner ».

     Même mécanique pour l'exergue de « À propos » : son fond suit `encre`,
     qui s'éclaircit, pendant que sa citation restait sur `lecteur-texte`,
     resté blanc. La règle est la même dans les deux cas — un fond et son
     texte se renversent ENSEMBLE ou pas du tout. */
  --end-d-plein-texte: #0A0A0A;
  --end-d-plein-survol: #8FE3F2;
  --end-d-exergue-texte: #0A0A0A;
  --end-d-exergue-accent: #8A5A10;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wp--preset--color--papier: var(--end-d-papier);
    --wp--preset--color--carte: var(--end-d-carte);
    --wp--preset--color--encre: var(--end-d-encre);
    --wp--preset--color--encre-douce: var(--end-d-encre-douce);
    --wp--preset--color--filet: var(--end-d-filet);
    --wp--preset--color--turquoise-texte: var(--end-d-turquoise-texte);
    --wp--preset--color--ambre-texte: var(--end-d-ambre-texte);
    --end-l-fond: var(--end-d-lecteur-fond);
    --end-l-accent: var(--end-d-turquoise-texte);
    --end-l-filet: var(--end-d-lecteur-filet);
    --end-l-ombre: var(--end-d-lecteur-ombre);
    --end-plein-texte: var(--end-d-plein-texte);
    --end-plein-survol: var(--end-d-plein-survol);
    --end-exergue-texte: var(--end-d-exergue-texte);
    --end-exergue-accent: var(--end-d-exergue-accent);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wp--preset--color--papier: var(--end-d-papier);
  --wp--preset--color--carte: var(--end-d-carte);
  --wp--preset--color--encre: var(--end-d-encre);
  --wp--preset--color--encre-douce: var(--end-d-encre-douce);
  --wp--preset--color--filet: var(--end-d-filet);
  --wp--preset--color--turquoise-texte: var(--end-d-turquoise-texte);
  --wp--preset--color--ambre-texte: var(--end-d-ambre-texte);
  --end-l-fond: var(--end-d-lecteur-fond);
  --end-l-accent: var(--end-d-turquoise-texte);
  --end-l-filet: var(--end-d-lecteur-filet);
  --end-l-ombre: var(--end-d-lecteur-ombre);
  --end-plein-texte: var(--end-d-plein-texte);
  --end-plein-survol: var(--end-d-plein-survol);
  --end-exergue-texte: var(--end-d-exergue-texte);
  --end-exergue-accent: var(--end-d-exergue-accent);
}

/* ── LES LOGOS SONT DES JETONS ──────────────────────────────────────────────
   Ils étaient référencés directement par `structure.css`, en `url("img/…")`.
   Le rail des jetons ne compte que les COULEURS : il ne voyait pas passer
   quatre fichiers de marque dans la couche censée n'en porter aucune — et la
   coupe du 22.10.2026 les avait laissés là, pour la même raison. Un site qui
   se rhabille réécrit ces quatre lignes, et ses logos prennent la place sans
   qu'on touche à la grammaire. */
:root {
  --end-logo: url("img/marque.svg");
  --end-logo-encre: url("img/marque-encre.svg");
  --end-logo-verrou-horizontal: url("img/verrou-horizontal.svg");
  --end-logo-verrou-vertical: url("img/verrou-vertical.svg");
  --end-onde: url("img/onde.svg");
}

/* ── LES POLICES ────────────────────────────────────────────────────────────
   Elles vivent ici et non dans `theme.json` : la reprise de la charte réécrit
   la section `settings` du thème, et des `fontFace` posés à la main s'y
   perdraient à la prochaine synchronisation. Le site rendrait en police de
   secours sans que rien ne le signale.

   Elles ne sont pas non plus dans `structure.css` : un fichier de police EST
   de la marque, au même titre qu'une couleur. Licences SIL OFL 1.1 dans
   `assets/fonts/`, à côté des fichiers. */
/* ── FRAUNCES, LA POLICE DE TITRE ─────────────────────────────
   Posée le 25.10.2026, pour écarter entredonner de la charte mère sans
   toucher à la structure : Réalisons titre en sans géométrique, ce site
   titre en serif. Les deux gardent Lato pour le texte courant — c'est là
   que la parenté reste lisible, et c'est voulu.

   UN SEUL FICHIER PAR SOUS-ENSEMBLE, parce que la fonte est VARIABLE : son
   axe `wght` couvre 100 à 900 là où Kulim Park et Lato demandent un fichier
   par graisse. 36 et 33 Kio pour toutes les graisses, contre six fichiers
   pour trois graisses de Kulim Park.

   ⚠️ `font-weight: 100 900` N'EST PAS DU LUXE. Sans la plage, le navigateur
   prend la variable pour une statique de graisse 400 et SYNTHÉTISE le gras —
   un faux-gras qui épaissit les pleins et les déliés de la même quantité, ce
   qui se voit immédiatement sur un serif à contraste.

   OFL 1.1, texte dans `fonts/OFL-Fraunces.txt` — la licence voyage avec le
   fichier, c'est la règle de la maison. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Fraunces-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Fraunces-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/KulimPark-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/KulimPark-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/KulimPark-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/KulimPark-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/KulimPark-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/KulimPark-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Lato-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Lato-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Lato-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Lato-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}