/* Le Journal « Frites & Crampons » (nick, 12 octobre 2026) : le livre de marque appliqué aux seules pages du Journal, sous
   main.journal. Les deux premiers blocs sont les jetons de la marque (tokens.json de la maquette, préfixés --fc-) : les seuls
   littéraux de couleur de la feuille (exception nommée dans tests/test_charte_v2.py et test_reglages.py). Le thème Nuit | Jour
   du site choisit celui de la marque. Barlow et Barlow Condensed (OFL) sont servies par le site. */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-latin.81419bf5abb5.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-latin.8e986e86d57e.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700-latin.15481e4eab6d.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700-latin.e1180918b873.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-800-latin.b1b7dd5dbcea.woff2") format("woff2"); }
.journal {
  --fc-orange: #e78d46;
  --fc-nuit-500: #5487b0;
  --fc-fond: #0f182c;
  --fc-fond-eleve: #1e2e45;
  --fc-encre: #ffffff;
  --fc-encre-sourdine: #9fb0c6;
  --fc-accent-texte: #e78d46;
  --fc-sur-accent: #000000;
  --fc-bande: #ffffff;
  --fc-sur-bande: #000000;
  --fc-accent-sur-bande: #ad4d14;
  --fc-trait: #345272;
  --fc-voile: #e78d461f;
}
[data-theme="jour"] .journal {
  --fc-fond: #ffffff;
  --fc-fond-eleve: #f3f5f8;
  --fc-encre: #000000;
  --fc-encre-sourdine: #345272;
  --fc-accent-texte: #ad4d14;
  --fc-bande: #000000;
  --fc-sur-bande: #ffffff;
  --fc-accent-sur-bande: #e78d46;
  --fc-trait: #d5dbe4;
  --fc-voile: #ad4d1414;
}
.journal {
  --fc-accent: var(--fc-orange); --fc-trait-fort: var(--fc-nuit-500); --fc-anneau-focus: 0 0 0 2px var(--fc-fond), 0 0 0 4px var(--fc-accent-texte);
  --fc-titre: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --fc-texte: Barlow, "Helvetica Neue", Arial, sans-serif;
  --fc-rayon-s: 4px; --fc-rayon-m: 8px;
  /* Les composants du site (boutons, puces, fil des réponses, champs) prennent les couleurs et les polices de la marque. */
  --nuit: var(--fc-fond); --nuit-2: var(--fc-fond); --ardoise: var(--fc-fond-eleve); --ardoise-2: var(--fc-fond-eleve);
  --parchemin: var(--fc-encre); --brume: var(--fc-encre-sourdine); --pierre: var(--fc-encre-sourdine);
  --or: var(--fc-accent-texte); --or-clair: var(--fc-accent-texte); --or-contour: var(--fc-accent); --iris: var(--fc-accent-texte);
  --or-fond: var(--fc-accent); --or-fond-clair: var(--fc-accent); --sur-or: var(--fc-sur-accent); --or-voile: var(--fc-voile);
  --bronze: var(--fc-trait-fort); --cadre: var(--fc-trait-fort); --trait: var(--fc-trait); --trait-doux: var(--fc-trait);
  --club-1: var(--fc-accent); --r-md: var(--fc-rayon-m); --r-lg: var(--fc-rayon-m);
  --font-display: var(--fc-titre); --f-display: var(--fc-titre); --font-texte: var(--fc-texte); --f-texte: var(--fc-texte);
  --font-data: var(--fc-texte); --f-data: var(--fc-texte);
  background: var(--fc-fond); color: var(--fc-encre); font: 400 17px/27px var(--fc-texte); font-variant-numeric: tabular-nums;
}
.journal :focus-visible { outline: 2px solid transparent; outline-offset: 0; box-shadow: var(--fc-anneau-focus); }
.journal a:not([class]) { color: var(--fc-accent-texte); }
.journal a:not([class]):hover { color: var(--fc-encre); }
.journal :is(h1, h2, h3) { color: var(--fc-encre); overflow-wrap: break-word; }
.journal h2 { font: 700 24px/26px var(--fc-titre); letter-spacing: .02em; }
.journal img { border-radius: 0; }

/* Styles de texte de la marque ; rien sous 14 px (règle du site : la légende et le surtitre de la maquette montent à 14 px). */
.fc-titre-une { font: 800 clamp(48px, 12vw, 72px)/.9 var(--fc-titre); letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.journal .fc-titre-section { font: 700 clamp(34px, 8vw, 48px)/.92 var(--fc-titre); letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.journal .fc-titre-article { font: 700 clamp(26px, 6vw, 32px)/1 var(--fc-titre); letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.journal .fc-titre-bloc { font: 700 24px/26px var(--fc-titre); letter-spacing: .02em; text-transform: uppercase; margin: var(--esp-7) 0 var(--esp-4); }
.fc-surtitre, .journal .eyebrow { font: 700 14px/18px var(--fc-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--fc-encre-sourdine); margin: 0; }
.fc-chapo, .journal .lead { font: 500 20px/30px var(--fc-texte); color: var(--fc-encre); margin: 0; max-width: 62ch; }
.fc-legende, .journal .article-meta { font: 400 14px/20px var(--fc-texte); color: var(--fc-encre-sourdine); }

/* La tête : le badge (ou le nom en texte courant, l'esperluette en orange), le titre, et le réseau à nœuds à droite. */
.fc-tete { position: relative; display: flex; gap: var(--esp-5); align-items: center; padding-block: var(--esp-2) var(--esp-5); }
.fc-tete-texte { display: grid; gap: var(--esp-2); min-width: 0; flex: 1; }
.fc-badge { flex: none; display: block; padding: 12px; margin: -12px; border-radius: var(--r-pilule); }
.fc-badge img { display: block; width: 96px; height: 96px; }
.fc-nom { margin: 0; font: 500 20px/1 var(--fc-texte); }
.journal .fc-nom a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--fc-encre); text-decoration: none; }
.fc-esperluette { color: var(--fc-accent-texte); padding-inline: .1em; }
.fc-motif { flex: none; fill: none; stroke: var(--fc-encre-sourdine); stroke-width: 1px; }
.fc-motif circle { fill: var(--fc-encre-sourdine); stroke: none; }
.fc-tete .fc-motif { align-self: flex-end; }

/* Le bandeau du badge : une bande pleine à angles droits, haute de 32 px, texte en capitales. */
.fc-bandeau, .journal h2.fc-bandeau { display: flex; align-items: center; justify-content: center; min-height: 32px; margin: 0 0 var(--esp-5); padding: 6px var(--esp-4); background: var(--fc-bande); color: var(--fc-sur-bande); font: 700 15px/20px var(--fc-texte); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.journal h2.fc-bandeau { justify-content: flex-start; margin-block: var(--esp-6) var(--esp-3); }
.article-sources:has(.fc-bandeau) { border-top: 0; }

/* Les rubriques : des puces à angles de 4 px ; la rubrique ouverte est la seule pastille orange. */
.journal .filtres { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-6); }
.journal .filtres .chip, .journal .fc-pages .btn { border-radius: var(--fc-rayon-s); font: 700 14px/1 var(--fc-texte); letter-spacing: .04em; text-transform: uppercase; color: var(--fc-encre); border-color: var(--fc-trait-fort); background: transparent; }
.journal .filtres .chip.actif { background: var(--fc-accent); border-color: var(--fc-accent); color: var(--fc-sur-accent); }
.journal .btn { font: 700 15px/1.2 var(--fc-texte); letter-spacing: .04em; border-radius: var(--fc-rayon-m); }
.journal .chip, .journal .badge { border-radius: var(--fc-rayon-s); }

/* Les cartes : image à angles droits, surtitre, titre condensé, légende ; la une prend toute la largeur et le double anneau. */
.fc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--esp-6) var(--esp-5); margin-bottom: var(--esp-6); }
.fc-carte { display: grid; align-content: start; gap: var(--esp-3); color: var(--fc-encre); text-decoration: none; padding-bottom: var(--esp-4); border-bottom: 1px solid var(--fc-trait); }
.journal a.fc-carte { color: var(--fc-encre); }
.fc-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fc-fond-eleve); }
.fc-image-motif { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--fc-fond-eleve); }
.fc-image-motif .fc-motif { width: 60%; height: auto; }
.journal :is(.panneau, .fil, .tuile) { border-color: var(--fc-trait); }
.fc-carte-texte { display: grid; gap: var(--esp-2); }
.fc-carte:hover :is(h2, h3) { text-decoration: underline; text-decoration-color: var(--fc-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fc-une { grid-column: 1 / -1; margin: 13px 13px var(--esp-4); padding: var(--esp-4); border: 0; background: var(--fc-fond); box-shadow: 0 0 0 4px var(--fc-encre), 0 0 0 12px var(--fc-fond), 0 0 0 13px var(--fc-accent); }
.journal .fc-une:focus-visible { box-shadow: 0 0 0 4px var(--fc-encre), 0 0 0 12px var(--fc-fond), 0 0 0 16px var(--fc-accent-texte); }
@media (min-width: 900px) {
  .fc-une { grid-template-columns: 3fr 2fr; gap: var(--esp-6); align-items: center; }
  .fc-une .fc-carte-texte { gap: var(--esp-3); }
}
@media (max-width: 719px) {
  .fc-tete .fc-motif { display: none; }
  .fc-une { margin-inline: 12px; padding: var(--esp-3); }
  .journal .fc-chapo, .journal .lead { font-size: 18px; line-height: 27px; }
}
.fc-pages { display: flex; gap: var(--esp-3); flex-wrap: wrap; }

/* L'article : titre condensé, chapô, texte en Barlow 17/27, intertitres en capitales, sources sous le bandeau. */
.journal .article .page-head { gap: var(--esp-3); }
.journal .article-corps { font: 400 17px/27px var(--fc-texte); }
.journal .article-corps :is(h2, h3) { font: 700 24px/26px var(--fc-titre); letter-spacing: .02em; text-transform: uppercase; margin: var(--esp-6) 0 var(--esp-3); }
.journal .article-corps a { color: var(--fc-accent-texte); text-decoration: underline; }
.journal .article-corps blockquote { border-left: 4px solid var(--fc-accent); color: var(--fc-encre); }
.journal .article-corps :is(th, td) { border-bottom: 1px solid var(--fc-trait); }
.journal .article-corps td { text-align: right; }
.journal .article-corps td:first-child { text-align: left; }
.journal .glossaire dt { font: 700 24px/26px var(--fc-titre); text-transform: uppercase; color: var(--fc-encre); }

/* L'état vide : un panneau élevé, le réseau à nœuds au-dessus du titre. */
.journal .etat-vide { background: var(--fc-fond-eleve); border: 0; border-radius: var(--fc-rayon-m); padding: var(--esp-5); color: var(--fc-encre); }
.journal .etat-vide h2 { font: 700 clamp(26px, 6vw, 32px)/1 var(--fc-titre); text-transform: uppercase; }
.journal .etat-vide .fc-motif { width: 144px; height: 90px; }
@media (prefers-reduced-motion: no-preference) {
  .fc-carte .fc-image img { transition: opacity var(--duree-courte) ease; }
  .fc-carte:hover .fc-image img { opacity: .88; }
}