/* Feuille partagée du site v2 — ossature et mobilier (SPEC-SITE-V2 §2.1).
   Prototype BKL-065-3, branche v2-proto.
   Le système typographique est déclaré dans fonts.css, lié séparément :
   ses @font-face sont recopiés VERBATIM du spécimen validé le 20/07,
   pour qu'aucun unicode-range ne dépende d'une saisie. */

:root {
  --ink: #1a1a18;
  --ink-soft: #4a4a46;
  --ink-muted: #6c6c67;
  --paper: #faf8f4;
  --paper-alt: #f1ede4;
  --line: #d8d3c6;
  --accent: #7a3b2e;
  /* Le système typographique et la variable de rôle --volet sont déclarés
     dans mobilier.css, la seule feuille que TOUTES les pages partagent.
     Ici, on ne fait qu'accorder les tons du mobilier à la palette du chrome. */
  --mobilier-filet: #d8d3c6;
  --mobilier-attenue: #6c6c67;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.7;
}

a { color: var(--accent); }

header.hero {
  padding: 5rem 1.5rem 3.5rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}

header.hero .eyebrow {
  font-family: var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-bottom: 1.2rem;
}

header.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}

header.hero .subtitle {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 38rem;
  margin: 0 auto;
}

header.hero .meta {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 1.6rem;
}

a.back-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink-muted);
  margin-top: 1.2rem;
}

a.back-link:hover { color: var(--accent); }

nav.toc {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.2rem 1.5rem;
  font-family: var(--sans);
  border-bottom: 1px solid var(--line);
}

nav.toc .toc-title {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}

nav.toc ol {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

nav.toc li {
  counter-increment: toc;
  margin-bottom: 0.55rem;
  break-inside: avoid;
  font-size: 0.92rem;
}

nav.toc li::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--accent);
  font-weight: 600;
}

nav.toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
nav.toc a:hover { border-bottom-color: var(--accent); }

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}

main.wide { max-width: 56rem; }

section { margin-bottom: 3.6rem; scroll-margin-top: 2rem; }

section .num {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 1.1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
}

h3 { font-size: 1.12rem; font-weight: 600; margin: 1.8rem 0 0.6rem; color: var(--ink); }

p { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: 1.04rem; }

ul, ol.content-list { margin: 0 0 1.1rem; padding-left: 1.3rem; color: var(--ink-soft); }
li { margin-bottom: 0.5rem; }

blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.3rem;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink);
}

blockquote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 0.4rem;
}

.notice {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
}

.fiche-layout {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.fiche-layout .poster {
  flex: 0 0 150px;
  margin: 0;
}

.fiche-layout .poster img {
  width: 100%;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.fiche-layout .fact-grid {
  flex: 1;
  min-width: 220px;
  margin: 0;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.8rem 0;
  font-family: var(--sans);
}

.fact-grid div { background: var(--paper); padding: 0.9rem 1rem; }
.fact-grid .label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3rem; }
.fact-grid .value { font-size: 0.92rem; color: var(--ink); }

table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-family: var(--sans); font-size: 0.92rem; }
table caption { text-align: left; font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); }
td { color: var(--ink-soft); }

ul.sources { font-family: var(--sans); font-size: 0.9rem; }
ul.sources li { margin-bottom: 0.7rem; }
ul.sources a { word-break: break-word; }

/* Homepage: film cards */
.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  margin: 0 0 1rem;
}

.film-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.film-card .poster-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}

.film-card .poster-placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--ink-muted);
}

.film-card.no-poster .poster-thumb { display: none; }
.film-card.no-poster .poster-placeholder { display: flex; }

.film-card .card-body {
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.film-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
}

.film-card .film-meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-bottom: 0.7rem;
}

.film-card p {
  font-size: 0.94rem;
  flex-grow: 1;
}

.film-card a.read-more {
  font-family: var(--sans);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--accent);
  align-self: flex-start;
}

.film-card a.read-more:hover { text-decoration: underline; }

.empty-state {
  font-family: var(--sans);
  color: var(--ink-muted);
  font-size: 0.95rem;
  border: 1px dashed var(--line);
  padding: 1.5rem;
  text-align: center;
}

/* Request form */
form.request-form {
  font-family: var(--sans);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  padding: 1.6rem 1.6rem 1.8rem;
  border-radius: 4px;
}

form.request-form .field {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

form.request-form label {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

form.request-form label .req {
  color: var(--accent);
}

form.request-form input {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}

/* ÉCART P-40 de la recette 065-4, corrigé au rétrofit 065-5.
   Cette règle déclarait `outline: none` au focus des 3 champs du formulaire.
   Plus spécifique que le `input:focus-visible` de mobilier.css et chargée
   après lui, elle le neutralisait : le seul repère restant au clavier était
   un changement de COULEUR de bordure — exactement ce que P-22 proscrit
   ailleurs sur le site. Le focus au pointeur n'a pas besoin d'anneau ; le
   focus au CLAVIER, si. `:focus-visible` fait la distinction, `:focus` non. */
form.request-form input:focus {
  border-color: var(--accent);
}

form.request-form input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

form.request-form button {
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.6rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0.4rem;
}

form.request-form button:hover { background: var(--accent); }

form.request-form .form-note {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 0.8rem;
}

.fallback-panel {
  font-family: var(--sans);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1.2rem 1.4rem;
  margin-top: 1rem;
}

.fallback-panel .fallback-title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.fallback-panel p {
  font-size: 0.88rem;
}

.fallback-panel pre {
  font-family: var(--sans);
  font-size: 0.85rem;
  white-space: pre-wrap;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  padding: 0.8rem 1rem;
  margin: 0 0 0.9rem;
  color: var(--ink);
}

.fallback-panel button {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.fallback-panel button:hover { background: var(--accent); }

.fallback-panel .copy-feedback {
  display: none;
  margin: 0 0 0 0.8rem;
  color: var(--accent);
  font-size: 0.82rem;
}

.fallback-panel .copy-feedback:not([hidden]) {
  display: inline-block;
}

footer {
  border-top: 1px solid var(--line);
  padding: 2.2rem 1.5rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-muted);
  background: var(--paper-alt);
}

@media (max-width: 600px) {
  nav.toc ol { columns: 1; }
  header.hero { padding: 3.5rem 1.2rem 2.5rem; }
}

/* ==========================================================================
   CHROME DES 6 PAGES DU MENU — ajouté par le prototype BKL-065-3
   Ce qui suit ne concerne QUE les pages d'accueil, de vues filtrées et
   éditoriales. Le mobilier commun aux 33 pages d'analyse vit dans
   mobilier.css. L'identité bespoke des analyses reste dans les pages.
   ========================================================================== */

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.6rem; }

header.chrome { background: var(--paper); }
nav.menu a:hover { color: var(--accent); }
a.lien-retour:hover { color: var(--accent); }
footer { border-top: 1px solid var(--line); background: var(--paper-alt); }

/* --- Le seuil (§3.1) ------------------------------------------------------ */
.seuil { padding: 4.2rem 0 3rem; border-bottom: 1px solid var(--line); }
.seuil .seuil-in { max-width: 40rem; }

.seuil h1 {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.14; color: var(--ink);
  margin: 0 0 1.1rem; letter-spacing: -0.015em;
}

.seuil p { font-size: 1.06rem; margin: 0 0 1rem; }

.seuil .appui {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-muted);
  border-left: 2px solid var(--line); padding-left: 0.9rem; margin-top: 1.6rem;
}

/* Emplacement réservé à un texte d'auteur d'AH (§2.4) — jamais rédigé ici. */
.reserve-auteur {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-muted);
  border: 1px dashed var(--line); padding: 1.2rem 1.4rem; margin: 0 0 1.4rem;
  background: var(--paper-alt);
}

.reserve-auteur .etiquette {
  font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent); display: block; margin-bottom: 0.5rem;
}

/* --- L'objet en une (§3.2, P-06 ; régime deux-cartes BKL-CIN 30/07/2026,
   proposition d'amendement de P-06/P-51 au rapport) --------------------- */
.une { padding: 3.2rem 0 1rem; }

.une .cartel {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); margin-bottom: 1rem;
}

/* Correction 30/07/2026 (retour AH sur capture) : « Dernière analyse
   publiée » et « À la une » doivent lire sur LA MÊME LIGNE — le badge
   vivait dans la carte et poussait l'affiche de la carte promue plus bas
   que celle de la dernière publiée (lignes désalignées). Le cartel devient
   un en-tête à deux colonnes, miroir exact de la grille de .bloc-une : le
   badge en sort, les deux affiches repartent au même niveau. */
.une .cartel.couple {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  align-items: center;
}

.une .cartel .cartel-droite { text-align: right; }

/* Badge de promotion (BKL-CIN accueil-deux-cartes, gate AH 30/07/2026) :
   marque la colonne que AH a choisi de pousser en une (mécanisme
   `promotion: true`, corpus.js/rendUne). Fond --accent / texte --paper —
   ratio ~7,9:1, largement au-dessus du seuil AA (P-39). Ne dépend d'aucune
   couleur de palette bespoke : l'accueil n'utilise que la feuille
   partagée style.css, jamais une identité bespoke par film. Vit dans le
   cartel (en-tête), plus dans la carte, depuis la correction du 30/07. */
.cartel .badge-promue {
  display: inline-block;
  font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.12em; padding: 0.28rem 0.55rem;
  background: var(--accent); color: var(--paper); border-radius: 3px;
}

/* Une seule carte occupe toute la largeur si le corpus n'a qu'une entrée ;
   sinon dernière publiée + (promue OU avant-dernière) se partagent la
   grille en deux, à poids égal (gate AH 30/07 : « Égales »). La classe
   .couple est réutilisée telle quelle — sa mécanique de grille (§9.3.2,
   P-38) ne change pas, seul ce qui la remplit change. */
.bloc-une {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}

.bloc-une.couple { grid-template-columns: 1fr 1fr; }

.carte-une {
  background: var(--paper); padding: 1.8rem 1.9rem;
  display: flex; flex-direction: column;
  /* ÉCART P-38 corrigé au rétrofit 065-5 : élément de grille, la carte porte
     un `min-width: auto` implicite qui l'empêche de descendre sous la largeur
     de son contenu — elle débordait de 25 px à 320 px. */
  min-width: 0;
  /* BKL-CIN-087 (gate AH 06/08) : lien étendu — ancrage du ::after ci-dessous. */
  position: relative;
}

.carte-une[data-volet="etude"] { background: var(--paper-alt); }

.carte-une .affiche {
  width: 100%; max-width: 100%; height: auto; display: block;
  margin: 0 0 0.9rem; border: 1px solid var(--line);
}

/* Égalisation des affiches (BKL-CIN 30/07/2026, gate AH « contain, hauteur
   commune, calée en bas ») : deux affiches à ratio naturel différent (ex.
   carrée vs élancée) rendaient des cartes de hauteur différente et
   décalaient les lignes CRITIQUE/titre/sous-titre. ERRATUM (même séance,
   retour AH sur capture) : une hauteur ABSOLUE (rem) désaccordait dès que
   la largeur fluide des cartes rétrécissait entre le stack mobile et le
   plein desktop — grand vide au-dessus des affiches. Remplacé par
   aspect-ratio : les deux cartes ayant TOUJOURS la même largeur (grille
   1fr/1fr), un ratio commun donne une hauteur commune à toute largeur.
   2/3 est calé sur le ratio de l'affiche la plus élancée du corpus actuel
   (quasi zéro lettrebox pour elle) ; object-fit: contain (image entière,
   aucun recadrage) ; l'affiche plus carrée se cale en bas via
   object-position. Ne s'applique qu'en vue deux-cartes desktop : les
   cartes empilées mobile n'ont pas besoin d'égalisation (revert au 640px
   ci-dessous). */
.bloc-une.couple .carte-une .affiche {
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center bottom;
  background: inherit;
}

.carte-une .pastille {
  font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.14em; padding: 0.2rem 0 0.3rem; align-self: flex-start;
  color: var(--accent); margin-bottom: 0.9rem;
  border-bottom: var(--volet);
}

.carte-une h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  color: var(--ink); margin: 0 0 0.3rem; line-height: 1.2;
}

.carte-une .meta {
  font-family: var(--sans); font-size: 0.78rem; color: var(--ink-muted);
  margin-bottom: 0.8rem;
}

.carte-une p {
  font-size: 0.96rem; flex-grow: 1; margin: 0 0 1rem;
  /* BKL-CIN-087 : passe au-dessus du lien étendu (::after ci-dessous) pour que
     le résumé reste sélectionnable à la souris — compromis gate AH 06/08 :
     cliquer PRÉCISÉMENT dans ce texte ne suit plus le lien, le reste de la
     carte oui. */
  position: relative; z-index: 1;
}

.carte-une .lien {
  font-family: var(--sans); font-size: 0.86rem; text-decoration: none;
  align-self: flex-start;
}

/* BKL-CIN-087 (gate AH 06/08, option B) : lien étendu — l'ancre "Lire
   l'analyse" reste l'unique lien de la carte (un seul lien annoncé au lecteur
   d'écran), mais un ::after positionné sur toute la carte (grâce au
   position:relative de .carte-une) en étend la cible cliquable. P-40 : le
   focus au clavier reste porté par l'ancre elle-même, :focus-visible natif
   intact, tab-order inchangé. */
.carte-une .lien::after {
  content: ""; position: absolute; inset: 0; cursor: pointer;
}

.une .liaison {
  text-align: center; font-family: var(--mono); font-size: 0.68rem;
  color: var(--ink-muted); letter-spacing: 0.1em; padding: 0.9rem 0 0;
}

/* --- Le corpus : liste unique et recherche (§3.1, §4) --------------------- */
.corpus { padding: 3.4rem 0 5rem; }

.corpus .barre {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line);
}

.corpus .barre h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); margin: 0; margin-right: auto; border: none; padding: 0;
}

.corpus input[type=search] {
  font-family: var(--sans); font-size: 0.9rem; padding: 0.45rem 0.7rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink); min-width: 15rem;
}

/* Facettes : n'apparaissent que si elles discriminent (P-13), le volet étant
   exempté (P-52). Le masquage est décidé par le script, jamais par le CSS. */
.facettes { display: flex; gap: 1.4rem; flex-wrap: wrap; padding: 0.9rem 0 0; }

.facette { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }

.facette .titre-facette {
  font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-muted);
}

button.filtre {
  font-family: var(--sans); font-size: 0.78rem; padding: 0.32rem 0.7rem;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  cursor: pointer;
}

button.filtre[aria-pressed=true] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.compte {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-muted);
  padding: 0.9rem 0 0.2rem;
}

ol.liste { list-style: none; margin: 0; padding: 0; }
ol.liste li { border-bottom: 1px solid var(--line); margin: 0; }

ol.liste a.entree {
  display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.4rem;
  padding: 0.95rem 0.2rem; text-decoration: none; color: inherit; align-items: baseline;
}

ol.liste a.entree:hover { background: var(--paper-alt); }

ol.liste .t {
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--ink);
}

/* Marqueur de volet dans l'index : même filet que le cartouche (P-21).
   La mention « Étude » en toutes lettres reste le marqueur infaillible (P-22) :
   le filet ne porte jamais seul la distinction. */
ol.liste .marq {
  font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-soft);
  padding: 0 0 0.18rem; margin-left: 0.55rem; vertical-align: 0.12em;
  border-bottom: var(--volet);
}

ol.liste .neuf {
  font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent); margin-left: 0.55rem; vertical-align: 0.12em;
}

ol.liste .d {
  font-family: var(--sans); font-size: 0.82rem; color: var(--ink-muted); grid-column: 1;
}

ol.liste .a {
  font-family: var(--mono); font-size: 0.76rem; color: var(--ink-muted);
  grid-row: 1/3; align-self: center;
}

.vide {
  font-family: var(--sans); color: var(--ink-muted); padding: 2rem 0; text-align: center;
}

@media (max-width: 640px) {
  .bloc-une.couple { grid-template-columns: 1fr; }
  .bloc-une.couple .carte-une .affiche {
    aspect-ratio: auto; height: auto; object-fit: initial; object-position: initial; background: none;
  }
  .une .cartel.couple {
    grid-template-columns: 1fr; gap: 0.4rem; justify-items: start;
  }
  .une .cartel .cartel-droite { text-align: left; }
  ol.liste a.entree { grid-template-columns: 1fr; }
  ol.liste .a { grid-row: auto; }
}