/* Hallmark · shape: la veillée, une page qui se lit comme une nuit, de la lampe allumée au mot de la fin · genre: editorial · theme: custom · job: listen · idea: "Unicy répond aux questions qu’on tape à vingt-trois heures, au lit, à la lumière de la lampe et de l’écran" · vibe: "nuit chaude, lampe de chevet, écran bleu pâle" · built: WordPress, portage de la maquette D choisie par Florian le 28/10/2026
 * paper: oklch(17% 0.018 28) · accent: oklch(80% 0.09 235) · display: Rozha One · body: Onest · hero: le nom du magazine en tête, puis la chambre en pleine largeur · nav: wordmark à gauche, liens texte à droite · footer: le mot de la fin, description et quatre derniers articles, puis une ligne de liens utiles · signature: la phrase « Il ignore mes messages mais ne me bloque pas » en très grand
 * axes: dark/high-contrast-serif/chromatic-blue · posture: Restrained · articles: fond clair (unc-jour), règle du parc · copy: verbatim (titres d’articles et bio repris du site) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: E, les titres réels tiennent mal au budget de mots ; sommaire en deux colonnes, sans vide latéral */
/* Hallmark · waive 49b · titres réels des quatre derniers articles en pied de page · un titre d’article Unicy ne se raccourcit pas, il passe sur deux lignes au plus sur téléphone */
/* Hallmark · waive 38iii · le em est toute la seconde ligne du h1, romain, même couleur, à une seconde taille · la règle du parc impose un em pour la ligne qui dit la nature du magazine sous le nom Unicy */
/* Hallmark · waive 79 · la chambre en pleine largeur fait partie du premier écran et descend jusqu’au pli, sous le nom et le chapô · la photo de la lampe est le hero, pas un vide */
/* Hallmark · waive 24b · margin-top -10px et -5px sur la pastille et la coche des points à retenir · règle du parc : pictogramme centré sur la ligne par top 50 % et une demi-hauteur négative */
/* Hallmark · answered F15 · deux largeurs de conteneur : 1400 px pour le magazine, 900 px pour toute la page article, image comprise · règle du parc pour les sites refondus */
/* Hallmark · dismissed F4 · le bouton plein des quiz de la chaîne de contenu n’apparaît que dans le corps d’un article, jamais à côté de l’action du magazine */
/* Hallmark · dismissed 40 · les boutons de choix des quiz ne vivent que dans .prose, sur la page article claire, encre 15,8:1 sur papier ; le linter les mesure avec les jetons de nuit */
/* Hallmark · dismissed 77 · la page article a deux sections, la lecture et la suite : c’est un article, pas une page d’accueil */
/* Hallmark · dismissed 25 · la description du pied de page est une phrase unique de lede, à 30ch, sous le seuil de 28ch des ledes d’une phrase */
/* Hallmark · dismissed F17 · le libellé « Céréales du petit-déjeuner » est l’étiquette d’une colonne du graphique de l’observatoire, sur deux ou trois lignes */
/* Hallmark · waive 59 · rubriques et pages utilitaires : l’en-tête et sa liste forment une seule section, 40 px suffisent entre le compte d’articles et la liste · une page de rubrique se lit d’un trait */
/* Hallmark · waive 78 · contact : les deux intertitres de la colonne de gauche sont des étiquettes de formulaire à 32 px, pas des têtes de section · la page n’a qu’une section, le formulaire */
/*
Theme Name: Unicy
Theme URI: https://www.unicy.fr/
Author: Unicy
Description: Thème du magazine Unicy. Nuit chaude, lampe de chevet, écran bleu pâle. Lecture des articles sur fond clair.
Version: 1.0.1
Requires PHP: 8.0
Text Domain: unicy
*/

/* ================================================================
   JETONS
   Contrastes calculés (WCAG 2.x), page de nuit :
   encre / papier 16,1:1 ; encre-2 / papier 11,0:1 ; gris / papier 6,6:1 ;
   accent / papier 10,4:1 (liens, filets) ; texte du bouton sur accent 10,4:1 ;
   filet / papier 1,6:1 (décoratif seulement).
   Page article (unc-jour) :
   encre #261918 / papier #FAF6F1 15,8:1 ; encre-2 9,4:1 ; gris 5,6:1 ;
   accent #005E8F 6,5:1 (liens) ; papier sur accent 6,5:1 (bouton).
   ================================================================ */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  /* Gamme typographique fermée : dix pas, aucune taille hors gamme. */
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem;
  --text-section: clamp(2.5rem, 2.6vw + 1rem, 3.75rem); --text-display-s: clamp(2.375rem, 4.2vw + 0.5rem, 4.75rem); --text-display: clamp(5rem, 8.5vw + 1rem, 9.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1400px; --container-article: 900px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500;
  --color-paper: oklch(17% 0.018 28); --color-paper-2: oklch(21% 0.02 28); --color-paper-3: oklch(25% 0.022 28);
  --color-ink: oklch(94% 0.012 70); --color-ink-2: oklch(82% 0.018 60); --color-muted: oklch(68% 0.02 50);
  --color-rule: oklch(33% 0.02 30); --color-rule-2: oklch(45% 0.02 35); --color-scrim: oklch(17% 0.018 28 / 0.72); --color-veil: oklch(12% 0.015 28 / 0.7);
  --color-accent: oklch(80% 0.09 235); --color-accent-2: oklch(86% 0.07 235); --color-accent-ink: oklch(17% 0.018 28); --color-focus: oklch(80% 0.14 235);
  /* Code Nutri-Score : sémantique, réservé aux graphiques. Un filet du fond sépare les segments. */
  --ns-a: oklch(52% 0.13 152); --ns-b: oklch(72% 0.17 128); --ns-c: oklch(86% 0.17 95); --ns-d: oklch(70% 0.17 58); --ns-e: oklch(60% 0.2 33);
  --font-display: "Rozha One", ui-serif, Georgia, serif; --font-body: "Onest", ui-sans-serif, system-ui, sans-serif;
  /* Un seul système de formes : doux, 6 px ; 2 px pour les barres de données ; rond pour le portrait. */
  --radius: 6px; --radius-barre: 2px; --radius-rond: 50%;
  --nav-h: 76px;
  /* Valeurs par défaut des variables posées en ligne par les gabarits (rang d'un segment, part d'une note). */
  --i: 0; --p: 0;
}
/* Page article : la lecture repose sur un papier clair, encre sombre, même accent.
   Les valeurs vivent sur :root (jetons jour), la classe ne fait que les rebrancher. */
:root {
  --jour-paper: oklch(97.5% 0.008 70); --jour-paper-2: oklch(94.5% 0.011 70); --jour-paper-3: oklch(91% 0.013 70);
  --jour-ink: oklch(23% 0.02 28); --jour-ink-2: oklch(38% 0.02 35); --jour-muted: oklch(50% 0.02 40);
  --jour-rule: oklch(86% 0.012 60); --jour-rule-2: oklch(74% 0.014 50);
  --jour-accent: oklch(46% 0.11 240); --jour-accent-2: oklch(38% 0.11 240); --jour-focus: oklch(50% 0.16 240);
}
.unc-jour {
  --color-paper: var(--jour-paper); --color-paper-2: var(--jour-paper-2); --color-paper-3: var(--jour-paper-3);
  --color-ink: var(--jour-ink); --color-ink-2: var(--jour-ink-2); --color-muted: var(--jour-muted);
  --color-rule: var(--jour-rule); --color-rule-2: var(--jour-rule-2);
  --color-accent: var(--jour-accent); --color-accent-2: var(--jour-accent-2); --color-accent-ink: var(--jour-paper); --color-focus: var(--jour-focus);
}

/* ================================================================
   SOCLE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* clip et jamais hidden : un hidden ferait du body un conteneur de défilement. */
html { overflow-x: clip; max-width: 100%; color-scheme: dark; scroll-padding-top: var(--space-3xl); scrollbar-color: var(--color-muted) var(--color-paper); }
body { margin: 0; max-width: 100%; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.unc-jour { color-scheme: light; }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-color: var(--color-rule-2); text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
a:hover { color: var(--color-accent-2); text-decoration-color: var(--color-accent); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-synthesis: none; letter-spacing: -0.02em; line-height: 1.05; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.insec { white-space: nowrap; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius); }
.skip:focus-visible { top: var(--space-md); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cadre { position: relative; overflow: hidden; background: var(--color-paper-2); }
.cadre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.legende { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 44ch; }
.vide { margin-top: var(--space-lg); color: var(--color-muted); }
.vide a { color: var(--color-accent); }

/* ================================================================
   EN-TETE ET MENU
   ================================================================ */
.tete { position: relative; z-index: var(--z-sticky-nav); }
.tete__rang { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.marque { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; }
.marque svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--color-accent); }
.marque span { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.01em; line-height: 1; }
.marque:hover { color: var(--color-ink); }
.liens { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.liens a:hover { color: var(--color-ink); }
.liens a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.menu-ouvrir { display: none; }
.bouton-texte { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius); background: transparent; color: var(--color-ink); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.bouton-texte:hover { background: var(--color-paper-3); }
.bouton-texte:active { transform: translateY(1px); }
.bouton-texte:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.volet { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; padding: var(--space-md) var(--gutter) var(--space-2xl); background: var(--color-paper); overflow-y: auto; }
.volet[hidden] { display: none !important; }
.volet__haut { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.volet ul { margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
/* Liens du menu ouvert toujours à l'encre de la page, quelle que soit la page. */
.volet a { display: block; padding: var(--space-xs) 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; color: var(--color-ink) !important; text-decoration: none; }
@media (max-width: 60rem) {
  .liens { display: none; }
  .menu-ouvrir { display: inline-flex; align-items: center; }
  .tete { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ================================================================
   ACCUEIL
   ================================================================ */
.ouverture { padding-top: var(--space-lg); }
.manchette { align-items: end; padding-bottom: var(--space-xl); }
.manchette h1 { grid-column: 1 / span 8; font-size: var(--text-display); line-height: 0.86; letter-spacing: -0.03em; }
.manchette h1 em { display: block; margin-top: var(--space-lg); font-style: normal; font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-ink); }
.manchette__droite { grid-column: 9 / span 4; display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--space-2xs); }
.chapo { font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-2); max-width: 30ch; }
.action { display: inline-flex; align-items: center; min-height: 50px; padding: 0 var(--space-lg); border-radius: var(--radius); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.action:hover { background: var(--color-accent-2); color: var(--color-accent-ink); }
.action:active { transform: translateY(1px); }
.action:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.chambre { position: relative; height: clamp(380px, calc(100svh - 360px), 620px); margin: 0; }
.chambre > .cadre { height: 100%; }
.chambre img { object-position: 50% 74%; filter: brightness(0.66) saturate(1.12) sepia(0.18) contrast(1.06); }
.chambre::after { content: ""; position: absolute; inset: auto 0 0 0; height: 16%; z-index: 2; background: linear-gradient(to top, var(--color-paper), transparent); pointer-events: none; }

.phrase { padding-top: var(--section-gap-s); }
.phrase__amorce { grid-column: 1 / span 6; color: var(--color-muted); }
.phrase h2 { grid-column: 1 / -1; margin-top: var(--space-md); font-size: clamp(2.5rem, 6.4vw, 6.75rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 16ch; }
.phrase h2 a { text-decoration: none; }
.phrase h2 a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.phrase__renvoi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); margin-top: var(--space-lg); }
.phrase__renvoi a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); }
.phrase__bas { margin-top: var(--space-3xl); align-items: start; }
.tasse { grid-column: 1 / span 5; margin: 0; }
.tasse .cadre { aspect-ratio: 4 / 5; min-height: 440px; border-radius: var(--radius); }
.tasse img { object-position: 60% 50%; }
.questions { grid-column: 7 / span 6; padding-top: var(--space-2xl); }
.questions h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; letter-spacing: 0; color: var(--color-ink-2); }
.questions ul { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.questions li + li { border-top: 1px solid var(--color-rule); }
.questions a { display: grid; gap: var(--space-2xs); padding: var(--space-lg) 0; text-decoration: none; }
.questions a b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); line-height: 1.2; color: var(--color-ink); }
.questions a span { font-size: var(--text-sm); color: var(--color-muted); }
.questions a:hover b { color: var(--color-accent-2); }

.sommaire { padding-top: var(--section-gap-l); }
.sommaire__haut { align-items: end; }
.sommaire__tete { grid-column: 1 / span 7; }
.sommaire__tete h2 { font-size: var(--text-section); max-width: 16ch; }
.sommaire__tete p { margin-top: var(--space-md); color: var(--color-ink-2); }
.cote-photo { grid-column: 9 / span 4; margin: 0; }
.cote-photo .cadre { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.filtres { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
.filtre { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.filtre:hover { background: var(--color-paper-3); color: var(--color-ink); }
.filtre:active { transform: translateY(1px); }
.filtre:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filtre[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-ink); background: var(--color-paper-2); }
.filtre small { font-size: var(--text-xs); color: var(--color-muted); margin-left: var(--space-2xs); }
.etat { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }
.liste { columns: 2; column-gap: var(--space-3xl); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.liste > li { break-inside: avoid; border-top: 1px solid var(--color-rule); }
.liste > li[hidden] { display: none; }
.liste > li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-xl); align-items: baseline; padding: var(--space-md) 0; text-decoration: none; }
.liste b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); text-wrap: balance; }
.liste span { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.liste > li > a:hover b { color: var(--color-accent-2); }

.placard { margin-top: var(--section-gap-l); padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); background: var(--color-paper-2); color: var(--color-ink); }
.placard__tete { grid-column: 1 / span 5; }
.placard__tete h2 { font-size: var(--text-section); max-width: 12ch; }
.placard__tete p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 46ch; }
.lien-fort { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-xl); color: var(--color-accent); font-weight: 600; text-underline-offset: 0.3em; }
.duel { grid-column: 7 / span 6; display: grid; gap: var(--space-2xl); }
.duel figure { margin: 0; }
.duel__chiffre { display: block; font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1; font-variant-numeric: tabular-nums; }
.duel figcaption { margin-top: var(--space-xs); color: var(--color-ink-2); }
.duel .barre { margin-top: var(--space-md); }
.placard__note { grid-column: 7 / span 6; margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }

/* Barre empilée A à E, partagée avec l'observatoire. */
.barre { display: flex; height: 22px; gap: var(--space-3xs); border-radius: var(--radius-barre); overflow: hidden; }
.barre i { display: block; height: 100%; min-width: 0; transform-origin: left center; }
.barre .a, .spectre__barre .a { background: var(--ns-a); } .barre .b, .spectre__barre .b { background: var(--ns-b); } .barre .c, .spectre__barre .c { background: var(--ns-c); } .barre .d, .spectre__barre .d { background: var(--ns-d); } .barre .e, .spectre__barre .e { background: var(--ns-e); }
.notes { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: var(--space-sm) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.notes li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.notes li::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-barre); background: var(--sw); flex-shrink: 0; }
.notes .a { --sw: var(--ns-a); } .notes .b { --sw: var(--ns-b); } .notes .c { --sw: var(--ns-c); } .notes .d { --sw: var(--ns-d); } .notes .e { --sw: var(--ns-e); }
.js [data-reveal] .barre i { transform: scaleX(0); transition: transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.js [data-reveal].is-in .barre i { transform: none; }

.rubriques { padding-top: var(--section-gap); }
.rubriques h2 { grid-column: 1 / span 9; font-size: var(--text-section); max-width: 22ch; }
.portes { grid-column: 1 / -1; margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.portes li { border-bottom: 1px solid var(--color-rule); }
.portes a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-xl); padding: var(--space-lg) 0; text-decoration: none; }
.portes b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem); line-height: 1; letter-spacing: -0.025em; color: var(--color-ink); }
.portes span { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.portes a:hover b { color: var(--color-accent-2); }

.marine { margin-top: var(--section-gap-l); }
.marine__nuit { position: relative; min-height: clamp(760px, 72vw, 1080px); display: flex; align-items: center; }
.marine__nuit > .cadre { position: absolute; inset: 0; }
.marine__nuit > .cadre img { object-position: 50% 30%; filter: brightness(0.62) saturate(1.05) sepia(0.12); }
.marine__nuit::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to left, var(--color-paper) 8%, var(--color-scrim) 42%, transparent 66%), linear-gradient(to top, var(--color-paper), transparent 12%), linear-gradient(to bottom, var(--color-paper), transparent 10%); pointer-events: none; }
.marine__lettre { position: relative; z-index: 3; display: flex; justify-content: flex-end; padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.marine__texte { width: min(100%, 31rem); display: grid; gap: var(--space-md); font-size: var(--text-lg); line-height: 1.55; }
.marine h2 { font-size: var(--text-3xl); line-height: 1.05; margin-bottom: var(--space-sm); }
.marine__bio { display: grid; gap: var(--space-md); }
.marine__bio p, .marine__bio ul { margin: 0; }
.marine__bio ul { padding-left: 1.1em; }
.marine__signe { margin-top: var(--space-md); display: flex; align-items: baseline; gap: var(--space-lg); }
.marine__signe b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); }
.marine__signe a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); }
.marine--fiche { margin-top: 0; }
.marine--fiche .marine__nuit { min-height: clamp(640px, 56vw, 900px); }
.marine--fiche .marine__lettre { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.marine--fiche .marine__texte { font-size: var(--text-md); gap: var(--space-sm); }
.marine--fiche h1 { font-size: var(--text-display-s); }
.marine__role { color: var(--color-ink-2); }

/* ================================================================
   PIED DE PAGE
   ================================================================ */
.fin { margin-top: var(--section-gap-l); padding-top: var(--space-3xl); padding-bottom: var(--space-xl); border-top: 1px solid var(--color-rule); }
.fin__haut { align-items: start; }
.fin__qui { grid-column: 1 / span 5; }
.fin__qui p { margin-top: var(--space-lg); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; max-width: 30ch; }
.fin__recents { grid-column: 7 / span 6; }
.fin h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-muted); }
.fin__recents ul { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.fin__recents li + li { border-top: 1px solid var(--color-rule); }
.fin__recents a { display: block; padding: var(--space-sm) 0; color: var(--color-ink-2); text-decoration: none; }
.fin__recents a:hover { color: var(--color-accent-2); }
.fin__bas { margin-top: var(--space-3xl); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.fin__utiles { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-lg); }
.fin__utiles ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.fin__utiles a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.fin__droits { font-size: var(--text-sm); color: var(--color-muted); }
.fin__credits { flex-basis: 100%; font-size: var(--text-xs); color: var(--color-muted); }

/* ================================================================
   OBSERVATOIRE
   ================================================================ */
.obs-tete { padding-top: var(--space-2xl); align-items: end; }
.obs-tete__texte { grid-column: 1 / span 7; }
.obs-tete h1 { font-size: var(--text-display-s); line-height: 1; max-width: 20ch; }
.obs-tete .chapo { margin-top: var(--space-lg); max-width: 40ch; }
.fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); margin: var(--space-2xl) 0 0; max-width: 40rem; }
.fiche div { border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.fiche dt { font-size: var(--text-sm); color: var(--color-muted); }
.fiche dd { margin: var(--space-3xs) 0 0; font-variant-numeric: tabular-nums; }
.fiche a { color: var(--color-accent); }
.obs-photo { grid-column: 9 / span 4; margin: 0; }
.obs-photo .cadre { aspect-ratio: 4 / 5; min-height: 440px; border-radius: var(--radius); }
.obs-photo img { object-position: 45% 50%; }
.outils { margin-top: var(--space-4xl); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.outils h2 { font-size: var(--text-section); }
.outils__ctrl { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); }
.champ { display: grid; gap: var(--space-2xs); }
.champ label, .tri legend { font-size: var(--text-sm); color: var(--color-ink-2); }
.champ input { width: 18rem; max-width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.champ input::placeholder { color: var(--color-muted); }
.champ input:hover { background: var(--color-paper-3); }
.champ input:focus-visible { outline-color: var(--color-focus); }
.tri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.tri legend { width: 100%; margin-bottom: var(--space-2xs); padding: 0; }
.tri input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tri label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius); color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.tri label:hover { background: var(--color-paper-3); }
.tri input:checked + label { border-color: var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); }
.tri input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.spectre { margin-top: var(--section-gap-s); }
.spectre h2 { font-size: var(--text-section); }
.spectre__fig { margin: var(--space-xl) 0 0; }
.spectre__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.spectre__cols a { display: grid; grid-template-rows: 300px auto auto; align-content: start; gap: var(--space-xs); height: 100%; text-decoration: none; color: var(--color-ink-2); }
.spectre__barre { order: 1; display: flex; flex-direction: column-reverse; gap: var(--space-3xs); border-radius: var(--radius-barre); overflow: hidden; }
.spectre__barre i { display: block; flex: var(--p) 1 0; min-height: 0; }
.spectre__nom { order: 3; font-size: var(--text-xs); line-height: 1.3; }
.spectre__val { order: 2; font-size: var(--text-sm); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.spectre__cols a:hover .spectre__nom { color: var(--color-accent-2); }
.spectre__bornes { display: flex; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.spectre__bornes p { max-width: 46ch; color: var(--color-ink-2); }
.spectre__bornes p:last-child { text-align: right; }
.spectre__bornes b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1.05; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.rayons { margin: 0; padding: 0; list-style: none; }
.rayon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-sm); padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-xl); }
.rayon[hidden] { display: none; }
.rayon:target { background: var(--color-paper-2); }
.rayon__nom { grid-column: 1 / span 4; }
.rayon h3 { font-size: var(--text-2xl); line-height: 1.1; }
.rayon__total { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.rayon__graph { grid-column: 5 / span 8; }
.rayon__graph .barre { height: 26px; }
.rayon__lecture { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 62ch; }
.lecture { margin-top: var(--section-gap); }
.lecture h2 { align-self: start; grid-column: 1 / span 5; font-size: var(--text-section); max-width: 12ch; }
.lecture__corps { grid-column: 7 / span 6; display: grid; gap: var(--space-lg); color: var(--color-ink-2); }
.lecture__corps > p:first-child { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; color: var(--color-ink); }
.lecture__corps a { color: var(--color-accent); }
.journal { margin: 0; padding: 0; list-style: none; }
.journal li { padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.journal time { color: var(--color-ink); }

/* ================================================================
   PAGES, RUBRIQUES, CONTACT, PLAN
   ================================================================ */
.ariane { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.ariane a { color: var(--color-ink-2); text-decoration: none; }
.ariane a:hover { color: var(--color-accent-2); }
.ariane > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.page-tete { padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
.page-tete h1 { margin-top: var(--space-lg); font-size: var(--text-display-s); line-height: 1; max-width: 18ch; }
.page-corps { padding-top: var(--space-xl); }
.titre-section { font-size: var(--text-section); margin-bottom: var(--space-md); }
.texte { max-width: 54ch; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.texte h2 { margin-top: var(--space-xl); font-size: var(--text-2xl); }
.texte a { color: var(--color-accent); }
.texte img, .texte picture { border-radius: var(--radius); }
.texte--legal h2 { font-size: var(--text-xl); }
.fiche--lettre { margin-top: var(--space-md); font-size: var(--text-md); }

.rubrique-tete { position: relative; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.rubrique-tete--photo { min-height: 460px; display: flex; align-items: flex-end; }
.rubrique-tete__fond { position: absolute; inset: 0; }
/* Texte clair sur voile sombre d'au moins 0,65 (règle du parc). */
.rubrique-tete--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--color-paper) 0%, var(--color-veil) 45%, var(--color-veil) 100%); }
.rubrique-tete__texte { position: relative; z-index: 2; }
.rubrique-tete h1 { margin-top: var(--space-lg); font-size: var(--text-display-s); line-height: 1; }
.rubrique-tete__compte { margin-top: var(--space-sm); color: var(--color-ink-2); }
.rubrique-tete__desc { margin-top: var(--space-lg); max-width: 62ch; color: var(--color-ink); }
.rubrique-tete__desc p + p { margin-top: var(--space-sm); }
.rubrique-corps { padding-top: var(--space-xl); }
.tete-de-liste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.tete-de-liste li { grid-column: span 4; }
.tete-de-liste__une { grid-column: span 8 !important; grid-row: span 2; }
.tete-de-liste a { display: grid; gap: var(--space-sm); text-decoration: none; }
.tete-de-liste .cadre { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.tete-de-liste__une .cadre { aspect-ratio: 16 / 10; }
.tete-de-liste h3 { font-size: var(--text-xl); line-height: 1.3; }
.tete-de-liste__une h3 { font-size: var(--text-3xl); line-height: 1.15; }
.tete-de-liste span:not(.cadre) { font-size: var(--text-sm); color: var(--color-muted); }
.tete-de-liste a:hover h3 { color: var(--color-accent-2); }
.fond-rubrique { margin-top: var(--section-gap-s); padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); background: var(--color-paper-2); }
.fond-rubrique__corps { max-width: 70ch; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.fond-rubrique__corps h2 { font-size: var(--text-section); color: var(--color-ink); }
.fond-rubrique__corps ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-xs); }

.contact { align-items: start; }
.contact__mots { grid-column: 1 / span 5; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.contact__mots h2 { font-size: var(--text-2xl); color: var(--color-ink); }
.contact__mots h2 + p { margin-top: calc(-1 * var(--space-xs)); }
.contact__mots p + h2 { margin-top: var(--space-xl); }
.contact__mots a { color: var(--color-accent); }
.contact__form { grid-column: 7 / span 6; }
/* Contact Form 7 : champs dans des p séparés par des br. */
.wpcf7-form p { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0 0 var(--space-md); }
.wpcf7-form br { display: none; }
.wpcf7-form label { font-size: var(--text-sm); color: var(--color-ink-2); }
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7-form textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.wpcf7-form textarea { min-height: 180px; resize: vertical; }
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--color-muted); }
.wpcf7-form input:focus-visible, .wpcf7-form textarea:focus-visible { outline-color: var(--color-focus); }
input.wpcf7-submit { align-self: flex-start; min-height: 50px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
input.wpcf7-submit:hover { background: var(--color-accent-2); }
input.wpcf7-submit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
input.wpcf7-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.wpcf7-not-valid-tip { font-size: var(--text-sm); color: var(--ns-e); }
.wpcf7 form .wpcf7-response-output { margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius); color: var(--color-ink); }

.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-3xl); }
.plan__rubrique h2 { font-size: var(--text-2xl); }
.plan__rubrique h2 a { text-decoration: none; }
.plan__rubrique ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.plan__rubrique li { border-top: 1px solid var(--color-rule); }
.plan__rubrique li a { display: block; padding: var(--space-xs) 0; color: var(--color-ink-2); text-decoration: none; }
.plan__rubrique li a:hover { color: var(--color-accent-2); }

/* ================================================================
   ARTICLE (fond clair)
   Le corps a la largeur du conteneur d'article, exactement comme l'image :
   seuls les paragraphes sont plafonnés à une mesure de lecture.
   ================================================================ */
.article .container, .suite .container { max-width: calc(var(--container-article) + 2 * var(--gutter)); }
.article__tete { padding-top: var(--space-2xl); }
.article__rubrique { margin-top: var(--space-lg); }
.article__rubrique a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.article__tete h1 { margin-top: var(--space-xs); font-size: var(--text-section); line-height: 1.08; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.article__meta a { color: var(--color-ink-2); }
.article__etoiles { display: flex; align-items: center; }
.article__image { margin-top: var(--space-xl); margin-bottom: 0; }
.article__image img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius); }
.article__resume { margin-top: var(--space-xl); }
.article__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.article__tags a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.signature { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-2); }
.signature__photo { width: 120px; height: 120px; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-rond); }
.signature__nom { font-size: var(--text-2xl); }
.signature__titre { color: var(--color-muted); font-size: var(--text-sm); }
.signature__bio { margin-top: var(--space-sm); color: var(--color-ink-2); display: grid; gap: var(--space-xs); }
.signature__liens { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); margin-top: var(--space-md); }
.signature__liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); }
.suite { margin-top: var(--section-gap-s); }
.suite h2 { font-size: var(--text-3xl); }
.suite__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.suite__liste a { display: grid; gap: var(--space-sm); text-decoration: none; }
.suite__liste img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.suite__liste h3 { font-size: var(--text-lg); line-height: 1.3; }
.suite__liste span { font-size: var(--text-sm); color: var(--color-muted); }
.suite__liste a:hover h3 { color: var(--color-accent-2); }

.prose { margin-top: var(--space-xl); color: var(--color-ink); font-size: var(--text-lg); line-height: 1.7; }
.prose > * + * { margin-top: var(--space-md); }
.prose > p, .prose > ul, .prose > ol { max-width: 62ch; }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.15; }
.prose h3 { margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.2; }
.prose a { color: var(--color-accent); text-decoration-color: currentColor; }
.prose img { border-radius: var(--radius); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.prose blockquote { margin-left: 0; margin-right: 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { padding: var(--space-sm); text-align: left; border-bottom: 1px solid var(--color-rule); }
.prose th { font-weight: 600; border-bottom: 2px solid var(--color-ink-2); }

/* ---------- Blocs de la chaîne de contenu ----------
   Sélecteurs sur la FIN du nom de classe, toujours qualifiés par .prose :
   le préfixe change à chaque version de la chaîne (jvc sur Unicy au
   28/10/2026). Repris du custom_css de l'ancien thème, dans le vocabulaire
   de ce thème. Pictogrammes en mask-image : ils prennent l'accent. */
.prose [class$="-key"] { margin: var(--space-xl) 0; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper); overflow: hidden; }
.prose [class$="-key-bar"] { height: 4px; background: var(--color-accent); }
.prose [class$="-key-in"] { position: relative; padding: var(--space-lg) var(--space-lg); }
.prose [class$="-key-top"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.prose [class$="-kick"], .prose [class$="-cnt"] { display: block; margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); letter-spacing: 0; text-transform: none; }
.prose [class$="-key-h"] { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); line-height: 1.25; color: var(--color-ink); }
.prose [class$="-key"] ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; max-width: none; }
.prose [class$="-key"] li { position: relative; margin: 0; padding: var(--space-sm) 0 var(--space-sm) 36px; border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); line-height: 1.55; }
.prose [class$="-key"] li:last-child { border-bottom: 0; }
/* Pastille et coche centrées sur la ligne, jamais calées en haut. */
.prose [class$="-key"] li::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: var(--radius-rond); background: color-mix(in oklab, var(--color-accent) 16%, transparent); }
.prose [class$="-key"] li::after { content: ""; position: absolute; left: 4px; top: 50%; margin-top: -5px; width: 12px; height: 10px; background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose [class$="-badge"] { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 28px; padding: 0 var(--space-sm); border: 1px solid var(--color-accent); border-radius: var(--radius); font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); background: transparent; white-space: nowrap; }
.prose [class$="-badge"]::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose [class$="-foot"] { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.prose [class$="-foot"] span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.prose [class$="-foot"] span::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: var(--color-accent); }
.prose [class$="-foot"] span:nth-child(1)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose [class$="-foot"] span:nth-child(2)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose [class$="-foot"] span:nth-child(3)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose [class$="-grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-md); margin: var(--space-xl) 0; }
.prose [class$="-card"] { position: relative; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); }
.prose [class$="-num"] { font-variant-numeric: tabular-nums; position: absolute; top: var(--space-xs); right: var(--space-sm); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-rule-2); }
.prose [class$="-ico"] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 0 var(--space-sm); color: var(--color-accent); }
.prose [class$="-ico"] svg { width: 22px; height: 22px; }
.prose [class$="-card-t"] { margin: 0 0 var(--space-2xs); font-weight: 600; color: var(--color-ink); }
.prose [class$="-card-x"] { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; }
.prose [class$="-quote"], .prose [class$="-out"] { margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border-left: 2px solid var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); font-style: normal; }
.prose [class$="-out"]:empty { display: none; }
.prose [class$="-tool"] { margin: var(--space-xl) 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper); }
.prose [class$="-tool"] label { display: block; margin: 0 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.prose [class$="-rng"] { width: 100%; margin: var(--space-2xs) 0 var(--space-md); accent-color: var(--color-accent); }
.prose [class$="-val"] { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; color: var(--color-accent); }
.prose [class$="-gauge"] { height: 10px; margin: var(--space-sm) 0; border-radius: var(--radius-barre); background: var(--color-paper-3); overflow: hidden; }
.prose [class$="-gauge"] i { display: block; height: 100%; width: 100%; background: var(--color-accent); transform-origin: left center; }
.prose [class$="-pick"] { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-2xs) 0 var(--space-md); }
.prose [class$="-pick"] button { flex: 1 1 8rem; min-height: 44px; padding: var(--space-sm); border: 1px solid var(--color-rule-2) !important; border-radius: var(--radius); background: var(--color-paper) !important; color: var(--color-ink) !important; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out); }
.prose [class$="-pick"] button:hover { border-color: var(--color-accent) !important; }
.prose [class$="-pick"] button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.prose [class$="-pick"] button.on { border-color: var(--color-accent) !important; background: var(--color-paper-2) !important; }
.prose [class$="-pick"] button:disabled { cursor: default; }
.prose [class*="-step"]:not(.on) { display: none; }
.prose [class*="-nav"]:not(.on), .prose [class*="-done"]:not(.on) { display: none; }
.prose [class*="-nav"].on { display: block; margin: var(--space-md) 0 0; text-align: right; }
.prose [class*="-nav"] button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius); background: var(--color-accent) !important; color: var(--color-accent-ink) !important; font-weight: 600; cursor: pointer; }
.prose [class*="-nav"] button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.prose [class*="-done"].on { display: block; margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border-left: 2px solid var(--color-accent); background: var(--color-paper-2); font-weight: 600; }
.prose [class$="-quiz-item"] { margin: var(--space-md) 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.prose [class$="-quiz-item"]:last-child { border-bottom: 0; padding-bottom: 0; }
.prose [class$="-quiz-item"] > p { margin: 0 0 var(--space-xs); font-weight: 600; }
.prose [class$="-faq"] { margin: var(--space-xl) 0; }
.prose [class$="-q"] { margin: 0; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.prose [class$="-q"] summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); cursor: pointer; list-style: none; }
.prose [class$="-q"] summary::-webkit-details-marker { display: none; }
.prose [class$="-q"] summary h3 { margin: 0; font-size: var(--text-lg); }
.prose [class$="-q"] summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.prose [class$="-q"][open] summary::after { transform: rotate(-135deg); }
.prose [class$="-q"] p { margin: var(--space-sm) 0 0; color: var(--color-ink-2); }
.prose [class$="-src"] { margin: var(--space-xl) 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper-2); }
.prose [class$="-src"] h2 { margin: 0 0 var(--space-sm); font-size: var(--text-xl); }
.prose [class$="-src"] ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.prose [class$="-src"] li { margin: 0; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.prose [class$="-src"] li:last-child { border-bottom: 0; }
.prose [class$="-src"] a { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.prose [class$="-src"] a:hover { color: var(--color-accent); }
.prose [class$="-tag"] { display: inline-block; margin: 0 var(--space-xs) 0 0; padding: 0 var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); background: transparent; letter-spacing: 0; text-transform: none; }
/* Tableaux : encre sombre sur fond clair, !important pour battre le CSS en ligne des anciens articles. */
.prose [class$="-tab"] { width: 100%; margin: var(--space-xl) 0; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-paper); }
.prose [class$="-tab"] th { padding: var(--space-sm); text-align: left; font-weight: 600; background: var(--color-paper-2) !important; color: var(--color-ink) !important; border-bottom: 2px solid var(--color-accent); }
.prose [class$="-tab"] td { padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2) !important; background: transparent !important; }
.prose [class$="-img"] { border-radius: var(--radius); }
.prose [class$="-key-in"] > :first-child, .prose [class$="-tool"] > :first-child, .prose [class$="-quote"] > :first-child { margin-top: 0; }
.prose [class$="-key-in"] > :last-child, .prose [class$="-tool"] > :last-child, .prose [class$="-quote"] > :last-child { margin-bottom: 0; }

/* Plugins : sommaire, notation, résumé. */
.prose #ez-toc-container { width: 100%; margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper-2); box-shadow: none; }
.prose #ez-toc-container .ez-toc-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--color-ink); }
.prose #ez-toc-container a { color: var(--color-ink-2); text-decoration: none; }
.prose #ez-toc-container a:hover { color: var(--color-accent); }
.kk-star-ratings { margin: 0 !important; }
.kk-star-ratings .kksr-legend { font-size: var(--text-sm); color: var(--color-muted); }

/* ================================================================
   MOUVEMENT
   Une seule révélation, visible par défaut sans script.
   ================================================================ */
.js [data-reveal-fade] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js [data-reveal-fade].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal-fade] { opacity: 1; transform: none; }
  .js [data-reveal] .barre i { transform: none; }
}

/* ================================================================
   PALIERS
   ================================================================ */
@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; }
  .manchette h1, .manchette__droite { grid-column: 1 / -1; }
  .manchette__droite { margin-top: var(--space-xl); }
  .chambre { height: auto; aspect-ratio: 4 / 5; max-height: 640px; }
  .chambre img { object-position: 38% 50%; }
  .phrase h2, .phrase__amorce, .phrase__renvoi, .tasse, .questions { grid-column: 1 / -1; }
  .questions { padding-top: var(--space-xl); }
  .sommaire__tete, .cote-photo { grid-column: 1 / -1; }
  .cote-photo { margin-top: var(--space-xl); }
  .liste { columns: 1; margin-top: var(--space-xl); }
  .placard__tete, .duel, .placard__note { grid-column: 1 / -1; }
  .duel { margin-top: var(--space-2xl); }
  .rubriques h2 { grid-column: 1 / -1; }
  .marine__nuit { display: block; min-height: 0; }
  .marine__nuit > .cadre { position: relative; aspect-ratio: 4 / 5; }
  .marine__nuit::after { background: linear-gradient(to top, var(--color-paper) 0%, transparent 30%); bottom: auto; aspect-ratio: 4 / 5; height: auto; }
  .marine__lettre { padding-top: var(--space-xl); padding-bottom: 0; justify-content: flex-start; }
  .fin__qui, .fin__recents { grid-column: 1 / -1; }
  .fin__recents { margin-top: var(--space-2xl); }
  .obs-tete__texte, .obs-photo { grid-column: 1 / -1; }
  .obs-photo { margin-top: var(--space-2xl); }
  .obs-photo .cadre { aspect-ratio: 16 / 10; min-height: 0; }
  .rayon__nom, .rayon__graph { grid-column: 1 / -1; }
  .spectre__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .spectre__cols a { grid-template-rows: none; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 3.5rem; align-items: center; min-height: 32px; }
  .spectre__barre { order: 2; flex-direction: row; height: 14px; }
  .spectre__nom { order: 1; font-size: var(--text-sm); }
  .spectre__val { order: 3; text-align: right; }
  .spectre__bornes { flex-direction: column; }
  .spectre__bornes p:last-child { text-align: left; }
  .lecture h2, .lecture__corps, .contact__mots, .contact__form { grid-column: 1 / -1; }
  .lecture__corps, .contact__form { margin-top: var(--space-xl); }
  .tete-de-liste li, .tete-de-liste__une { grid-column: 1 / -1 !important; grid-row: auto; }
  .plan { grid-template-columns: minmax(0, 1fr); }
  .suite__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; }
  .liste > li > a, .portes a { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .tasse .cadre { min-height: 0; }
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .champ, .champ input { width: 100%; }
  .outils__ctrl { width: 100%; }
  .signature { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: var(--text-md); }
}