/* ══════════════════════════════════════════════════════════════════════════
   Les Fermes de la Vie — feuille de style unique.

   Aucune dépendance : pas de framework, pas de police distante, pas d'étape de
   construction. Le site est composé de deux fichiers ; on les copie sur
   n'importe quel hébergement et il fonctionne.

   Parti pris typographique : le texte de Didier est écrit en phrases courtes,
   souvent une par ligne. Ce rythme est un choix d'écriture, pas un accident de
   mise en forme — la feuille de style le respecte (voir `.souffle` et
   `.capacites`) au lieu de ramasser ces lignes en paragraphes compacts.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Teintes sobres et chaudes : le sujet est grave mais l'intention est
     confiante. Ni le blanc clinique d'une page d'entreprise, ni le sombre
     anxiogène d'un discours d'effondrement. */
  --papier:        #faf8f4;
  --papier-teinte: #f2efe8;
  --encre:         #1f2420;
  --encre-douce:   #4a524c;
  --vert:          #2f5d46;
  --vert-clair:    #4a7d61;
  --filet:         #ddd7cc;

  --lecture:       34rem;  /* ~62 caractères : longueur de ligne confortable */
  --large:         62rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Le bouton « Regarder » conduit à la séquence suivante : on y glisse, on
     n'y saute pas. Désactivé plus bas si le visiteur a demandé moins
     d'animation. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.75;
  text-wrap: pretty;
}

/* Lien d'évitement : visible uniquement au clavier.

   Il était masqué par `left: -9999px`. En écriture de DROITE À GAUCHE, ce
   décalage cesse d'être un simple débordement ignoré : il devient une zone
   défilable de 10 000 px, et la page arabe s'ouvrait sur du vide. Constaté à
   l'écran, mesuré à 11 380 px de large pour 1 381 px visibles.

   On masque donc sans déplacer : une boîte d'un pixel, découpée. Le résultat
   est identique dans les deux sens d'écriture, et c'est aussi la méthode que
   les lecteurs d'écran suivent le mieux. */
.saut-contenu {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--vert);
  color: #fff;
  z-index: 10;
}

.saut-contenu:focus {
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  clip-path: none;
}

.bande {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.texte { max-width: var(--lecture); }

/* `.texte` est parfois porté par la bande elle-même (`class="bande texte"`).
   Sans cette règle, la largeur réduite de lecture hérite du centrage
   automatique de `.bande` : la colonne de texte se retrouve au milieu de la
   page alors que les titres restent à gauche — décalage bien visible, corrigé
   après vérification du rendu réel dans un navigateur. On garde donc le
   conteneur à sa pleine largeur et on contraint la longueur de ligne des
   enfants, qui restent alignés à gauche comme les titres. */
.bande.texte { max-width: var(--large); }
.bande.texte > * { max-width: var(--lecture); }

.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section.teinte { background: var(--papier-teinte); }

/* ── Titres ─────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--encre);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin-bottom: 1.75rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }

/* Le h4 est apparu quand les cartes de films sont passées sous une étiquette
   de famille : la famille prend le h3, la carte descend d'un cran. */
h4 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--encre);
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

p { margin: 0 0 1.15rem; }

/* ── En-tête ────────────────────────────────────────────────────────────── */

.entete {
  border-bottom: 1px solid var(--filet);
  padding-block: 1rem;
}

.titre-site {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* ── Ouverture ──────────────────────────────────────────────────────────── */

.ouverture { padding-block: clamp(4.5rem, 13vw, 10rem); }

/* Le titre recule au rang de signature : le nom du projet est déjà dans la
   barre du haut, et sur ce premier écran ce n'est pas lui qui doit frapper —
   c'est la phrase en dessous. Il reste un <h1> pour la structure du document
   et les moteurs de recherche. */
.ouverture h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  letter-spacing: 0.02em;
  color: var(--encre-douce);
  margin-bottom: 1.75rem;
}

/* L'accroche : la phrase que le visiteur doit ressentir avant d'avoir lu quoi
   que ce soit d'autre. C'est elle qui domine l'écran d'entrée. */
.accroche {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.15;
  color: var(--vert);
  font-family: Georgia, serif;
}

/* ── Rythmes de lecture ─────────────────────────────────────────────────── */

/* Phrase d'ouverture d'une section : légèrement plus grande, elle pose le ton. */
.ample {
  font-size: 1.2em;
  font-family: Georgia, serif;
  color: var(--encre);
}

/* Suite de lignes courtes (une idée par ligne). L'interligne est élargi pour
   que chaque ligne se lise comme une unité, et non comme un paragraphe coupé. */
.souffle {
  line-height: 2.1;
  color: var(--encre-douce);
}

/* Temps fort : les phrases qui doivent être RESSENTIES avant d'être
   analysées. Elles ne crient pas — elles respirent. Toute la force vient de
   la taille, de la brièveté et surtout du vide autour (`margin-block`) :
   aucun décor, aucun effet, aucune dramatisation ajoutée.
   La variante `.accent` marque les deux phrases les plus personnelles. */
.temps-fort {
  font-family: Georgia, serif;
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.1rem);
  line-height: 1.3;
  color: var(--encre);
  max-width: 24ch;
  margin-block: clamp(2.5rem, 6vw, 4rem);
}

.temps-fort.accent { color: var(--vert); }

/* Accès aux sources : présent, mais discret — il ne doit pas casser
   l'entrée (une note de bas de page par affirmation la casserait). */
.verifier {
  margin-top: -0.35rem;
  font-size: 0.88rem;
}

.verifier a {
  color: var(--encre-douce);
  text-decoration: none;
  border-bottom: 1px dotted var(--filet);
}

.verifier a:hover,
.verifier a:focus-visible { color: var(--vert); border-bottom-color: var(--vert-clair); }

.invitation {
  font-family: Georgia, serif;
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--vert);
  margin-top: 2.5rem;
}

/* ── L'accumulation (deuxième écran) ────────────────────────────────────────
   Cet écran doit tenir sur une hauteur d'écran sans devenir un pavé. Il est
   donc plus resserré que l'entrée : les respirations des temps forts y sont
   réduites, sauf autour du point d'arrêt.
   ──────────────────────────────────────────────────────────────────────── */

/* Tout ce bloc n'a qu'un but : tenir la hauteur. Mesuré à l'écran, la
   section faisait 1167 px pour un écran de 735 — donc un pavé à faire
   défiler, exactement ce qu'il ne fallait pas. Chaque valeur ci-dessous est
   un resserrement par rapport au reste du site, propre à cet écran-là. */
.accumulation { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.accumulation h2 { margin-bottom: 0.9rem; }
.accumulation p { margin-bottom: 0.7rem; }
.accumulation .temps-fort { margin-block: clamp(0.9rem, 2vw, 1.4rem); }

/* L'enchaînement : le filet vertical à gauche EST le propos. Ces lignes ne
   s'additionnent pas, elles se tiennent — le trait continu le dit sans qu'on
   ait à l'écrire, et sans illustration. */
.enchainement {
  list-style: none;
  margin: 1.1rem 0 0;
  padding-block: 0.15rem;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--vert-clair);
  max-width: 30ch;
  line-height: 1.5;
}

.enchainement li {
  padding-block: 0.15rem;
  color: var(--encre-douce);
  position: relative;
}

/* Petite marque sur le filet, en face de chaque maillon. */
.enchainement li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.5rem;
  top: 1.05em;
  width: 0.7rem;
  height: 2px;
  background: var(--vert-clair);
}

/* La dernière ligne referme la boucle : c'est elle qui dit « cycle ». */
.enchainement li:last-child {
  color: var(--vert);
  font-family: Georgia, serif;
  font-size: 1.1em;
  padding-top: 0.6rem;
}

/* Le point d'arrêt du regard. Rien après lui, sinon du vide, puis le bouton. */
.arret {
  font-family: Georgia, serif;
  font-size: clamp(2rem, 1.35rem + 3vw, 3.6rem);
  line-height: 1.1;
  color: var(--vert);
  max-width: 14ch;
  margin: clamp(1.1rem, 2.5vw, 1.75rem) 0 clamp(1.2rem, 3vw, 2rem);
}

/* Variante pour une phrase d'arrêt plus longue : 14ch la casserait en trois
   lignes hachées. */
.arret.large { max-width: 20ch; }

.zone-bouton { margin: 0; }

.bouton-approfondir {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--vert-clair);
  border-radius: 3px;
  color: var(--vert);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bouton-approfondir:hover,
.bouton-approfondir:focus-visible { background: var(--vert); color: var(--papier); }

/* Tant qu'aucun contenu d'approfondissement n'est rattaché, le bouton
   l'annonce honnêtement au lieu de promettre un lien mort. Le jour où l'URL
   est renseignée dans le HTML, il redevient actif tout seul. */
.bouton-approfondir[href="#"] {
  color: var(--encre-douce);
  border-color: var(--filet);
  border-style: dashed;
  pointer-events: none;
}

.bouton-approfondir[href="#"]::after {
  content: var(--mention-bientot, " — bientôt");
  text-transform: none;
  letter-spacing: 0;
}

/* ── Et vous ? (troisième écran) ────────────────────────────────────────────
   Écran de silence. Contrairement au précédent, il ne cherche PAS à tenir sur
   une hauteur d'écran : le vide autour des phrases fait partie du texte, et
   le raccourcir reviendrait à supprimer le temps d'arrêt qu'on cherche à
   provoquer. C'est la seule raison pour laquelle il est plus long.
   ──────────────────────────────────────────────────────────────────────── */

.question-perso { padding-block: clamp(4rem, 10vw, 7.5rem); }

/* On rouvre les respirations refermées pour l'écran « accumulation ». */
.question-perso .temps-fort,
.question-perso .arret { margin-block: clamp(3rem, 7.5vw, 5rem); }

/* Les trois relances : chacune reste seule un instant. Les entasser en
   paragraphe supprimerait exactement ce qu'on cherche. */
.relance p {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  color: var(--encre-douce);
}

.relance .et-apres {
  font-family: Georgia, serif;
  font-size: 1.3em;
  color: var(--encre);
  margin-top: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0;
}

/* Bouton d'avancée : il MÈNE quelque part, contrairement au bouton
   d'approfondissement qui attend son contenu. D'où le traitement plein — le
   visiteur doit voir qu'il peut continuer. */
.bouton-avancer {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  background: var(--vert);
  border: 1px solid var(--vert);
  border-radius: 3px;
  color: var(--papier);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bouton-avancer:hover,
.bouton-avancer:focus-visible { background: var(--vert-clair); border-color: var(--vert-clair); }

/* ── Alors, on fait quoi ? ──────────────────────────────────────────────────
   Écran court et dense : peu de mots, chacun portant. Les respirations sont
   moyennes — assez pour qu'on respire entre les coups, pas assez pour qu'on
   se disperse.
   ──────────────────────────────────────────────────────────────────────── */

.alors .temps-fort,
.alors .arret { margin-block: clamp(2rem, 5vw, 3.25rem); }

/* La ligne qui coupe. Elle ne crie pas plus fort que le reste : elle est
   simplement seule, et courte. C'est suffisant. */
.tranchant {
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.35;
  color: var(--encre);
  margin-block: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* ── Tout seul ? ──────────────────────────────────────────
   Respirations intermédiaires : moins larges que l'écran de silence qui
   précède, plus larges que l'écran resserré de l'accumulation. Cet écran
   raisonne — il n'a besoin ni de courir ni de se taire.
   ──────────────────────────────────────────────────────────────────────── */

.tout-seul .temps-fort,
.tout-seul .arret { margin-block: clamp(2.25rem, 5.5vw, 3.5rem); }

/* Les six « Qui ? ». Même rythme d'une idée par ligne que `.souffle`, mais en
   serif et un cran plus grand : ce sont elles qui portent l'écran, pas la
   petite liste de réserves plus haut. */
.interrogations {
  font-family: Georgia, serif;
  font-size: 1.15em;
  color: var(--encre);
  margin-block: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* Second titre de l'écran : il relance au lieu de conclure, donc un cran en
   dessous du titre principal. */
.titre-relance {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 0;
  max-width: 26ch;
}

/* ── Section sombre ─────────────────────────────────────────────────────────
   Modificateur générique : c'est le fond d'ancrage du site. La section qui
   l'utilisait a été supprimée (elle répétait l'écran « Alors, on fait quoi ? »),
   mais la règle reste — la vue d'ensemble de la Ferme s'y posera.
   ──────────────────────────────────────────────────────────────────────── */

.sombre { background: var(--encre); color: var(--papier); }
.sombre h2, .sombre p { color: var(--papier); }
.sombre .texte p { color: #cfd6d0; }

/* ── La Ferme en un regard ──────────────────────────────────────────────────
   Cinq cents points, et rien d'autre. Pas une case, pas une flèche, pas un
   trait : tout ce qui relierait ou empilerait ces éléments réintroduirait
   l'organigramme qu'on refuse. La seule chose qui relie les fonctions au
   champ est le fait d'être LE MÊME POINT — même forme, même taille, même
   couleur. C'est suffisant, et c'est le propos.
   ──────────────────────────────────────────────────────────────────────── */

.en-un-regard {
  --point: clamp(5px, 0.75vw, 11px);
  --ecart: clamp(3px, 0.45vw, 6px);
  --humain: rgba(250, 248, 244, 0.30);
  --humain-fonction: #8ec3a4;   /* vert éclairci : le vert du site est trop
                                   sombre pour un point de 6 px sur ce fond */
}

.population {
  display: grid;
  grid-template-columns: repeat(25, var(--point));
  gap: var(--ecart);
  width: max-content;
  max-width: 100%;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.population span {
  width: var(--point);
  height: var(--point);
  border-radius: 50%;
  background: var(--humain);
}

/* Les points d'une fonction restent GRIS tant qu'on n'a pas lu cette
   fonction : au chargement, le champ ne montre que les 500 habitants, et
   aucun sous-groupe ne peut donc être compté ni interprété comme une règle.
   Ils s'allument ensuite un groupe à la fois (voir le script en fin de page),
   ce qui montre les personnes être PRISES dans cet ensemble-là.

   Ils sont dispersés à travers tout le champ, jamais groupés dans un coin :
   c'est ce qui dit « parmi eux » plutôt que « à part ». */
.population span { transition: background-color 0.9s ease; }

.population.montre-initiatrice .f-initiatrice,
.population.montre-gestion     .f-gestion,
.population.montre-securite    .f-securite { background: var(--humain-fonction); }

.compte {
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.4rem);
  line-height: 1.25;
  color: var(--papier);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.en-un-regard .texte p { margin-bottom: 0.65rem; }

.fonctions {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 38rem;
}

.fonctions h3 {
  color: var(--papier);
  font-size: 1.15rem;
  margin: 0.5rem 0 0.35rem;
}

.fonctions p {
  color: #cfd6d0;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Le prélèvement : exactement les mêmes points que dans le champ, extraits.
   Leur NOMBRE est symbolique — il ne représente aucun effectif réel et aucun
   chiffre ne doit être déduit d'ici. L'Initiatrice, elle, n'a qu'un point,
   et celui-là est vrai. */
.prelevement {
  display: flex;
  gap: var(--ecart);
  align-items: center;
  height: var(--point);
}

.prelevement i {
  width: var(--point);
  height: var(--point);
  border-radius: 50%;
  background: var(--humain-fonction);
}

/* ── Les grandes parties ────────────────────────────────────────────────────
   Depuis que le site distingue « La Ferme » de « Une Ferme n'est pas seule »,
   chaque partie porte un titre court et un sous-titre qui dit de quoi elle
   parle. Le sous-titre n'est pas une accroche : c'est une étiquette de
   niveau, et il doit rester plus discret que le titre.
   ──────────────────────────────────────────────────────────────────────── */

.sous-titre-partie {
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.4rem);
  line-height: 1.4;
  color: var(--vert);
  margin-top: -0.75rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 30ch;
}

.sombre .sous-titre-partie { color: #8ec3a4; }

/* Sujets annoncés mais pas encore écrits. Même convention que les cartes de
   films : on l'annonce sobrement plutôt que de laisser croire que c'est là. */
.sujets-a-venir {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 2.1;
  color: var(--encre-douce);
}

.sujets-a-venir li::after {
  content: var(--mention-bientot, " — bientôt");
  color: var(--filet);
  font-size: 0.85em;
}

/* ── Protéger l'œuvre ───────────────────────────────────────────────────────
   Aucun point ici, jamais : les points représentent la population d'une
   Ferme, et ces rôles n'en font pas partie. Leur absence est ce qui dit
   « autre niveau » — sans rien écrire, et sans rien surplomber.
   ──────────────────────────────────────────────────────────────────────── */

.roles-oeuvre {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4.5vw, 3rem);
}

.roles-oeuvre > li p { margin-bottom: 0.5rem; }
.roles-oeuvre > li p:last-child { margin-bottom: 0; }

.veilles {
  list-style: none;
  margin: 0.75rem 0 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--vert-clair);
  color: var(--encre-douce);
  line-height: 1.9;
}

.proteger .temps-fort { margin-block: clamp(2.5rem, 6vw, 4rem); }

/* ── À votre disposition ────────────────────────────────────────────────────
   Bloc court, beaucoup d'air. Rien à ajouter ici : ni bouton, ni chiffre, ni
   argumentaire. Le silence autour des deux phrases fait tout le travail — et
   c'est le seul endroit du site où le ton se dépose.
   ──────────────────────────────────────────────────────────────────────── */

.a-disposition { padding-block: clamp(4rem, 10vw, 7rem); }

.a-disposition h2 {
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 20ch;
}

.a-disposition .temps-fort { margin-block: clamp(2.75rem, 6.5vw, 4.5rem); }

/* ── Découvrir : les films ──────────────────────────────────────────────── */

.titre-decouvrir {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* Étiquette de famille : volontairement PAS un titre en serif. C'est un
   repère de niveau, pas un rang. Les trois ont exactement le même traitement —
   rien ne doit laisser croire que « Protéger l'œuvre » surplombe « Dans la
   Ferme ». Le filet sous l'étiquette sépare sans hiérarchiser. */
.titre-famille {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--filet);
}

.famille + .famille { margin-top: clamp(2.75rem, 6vw, 4.25rem); }

.cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.carte {
  background: var(--papier-teinte);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  /* Repère pour la zone cliquable des cartes dont le film existe. Sans effet
     visuel : rien n'est positionné par-dessus tant qu'il n'y a pas de film. */
  position: relative;
}

.carte p {
  color: var(--encre-douce);
  font-size: 0.98rem;
  line-height: 1.6;
  flex-grow: 1;
}

.lien-film,
.mention-attente {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
}

.lien-film {
  color: var(--vert);
  text-decoration: none;
  border-bottom: 1px solid var(--vert-clair);
  padding-bottom: 2px;
}

.lien-film:hover,
.lien-film:focus-visible { color: var(--vert-clair); border-bottom-width: 2px; }

/* Tant qu'aucun film n'est rattaché (href="#"), la carte l'annonce honnêtement
   au lieu de proposer un lien qui ne mène nulle part. Le jour où l'URL est
   renseignée dans le HTML, le lien redevient actif tout seul — rien d'autre
   à modifier. */
.lien-film[href="#"] {
  color: var(--encre-douce);
  border-bottom-style: dotted;
  pointer-events: none;
  opacity: 0.75;
}
.lien-film[href="#"]::after { content: var(--mention-bientot, " — bientôt"); text-transform: none; letter-spacing: 0; }

/* Une carte dont le film existe s'ouvre en entier, pas seulement sur les deux
   mots du lien. Un seul vrai lien est conservé : on étire sa zone sensible à
   toute la carte plutôt que d'imbriquer un second lien, ce qui garde le
   clavier et les lecteurs d'écran sur une cible unique et nommée. Rien ne
   change à l'œil. */
.lien-film[href$=".mp4"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.carte:has(.lien-film[href$=".mp4"]) { cursor: pointer; }
.carte:has(.lien-film[href$=".mp4"]:hover) { border-color: var(--vert-clair); }
/* Sans `:has()`, la carte reste normale et le lien fonctionne toujours :
   la zone étirée ne dépend pas de cette règle, seulement l'effet de survol. */

.mention-attente { color: var(--encre-douce); opacity: 0.8; }

/* ── Fenêtre de film ────────────────────────────────────────────────────────
   Le film se regarde sur place. Rien ne quitte la page : ni l'ancre, ni la
   langue, ni la position dans le texte. À la fermeture, la section reprend
   exactement où elle était. */
/* La fenêtre épouse le format du film au lieu d'imposer sa largeur : sans
   cela l'image flotte au milieu d'une bande noire, et la barre de titre
   s'étire loin au-delà d'elle. */
.fenetre-film {
  border: none;
  padding: 0;
  background: transparent;
  /* Largeur calculée, pas devinée : laissée à `auto`, la fenêtre s'étire à la
     largeur intrinsèque du fichier (1920 px) et la barre de titre part bien
     au-delà de l'image. On la cale donc sur le format du film. */
  width: min(96vw, calc(78vh * 16 / 9));
  max-height: 92vh;
  color: var(--papier);
}
.fenetre-film::backdrop { background: rgba(12, 14, 12, 0.92); }
.fenetre-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
}
.fenetre-film-barre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 0.6rem;
}
.fenetre-film-titre {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
.fermer-film {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.fermer-film:hover,
.fermer-film:focus-visible {
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}

/* ── Clôture ────────────────────────────────────────────────────────────── */

.cloture { padding-block: clamp(3.5rem, 9vw, 7rem); }

.phrase-finale {
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.3;
  max-width: 22ch;
  margin-bottom: 1.5rem;
}

.phrase-finale.accent { color: var(--vert); max-width: 26ch; margin-bottom: 0; }

/* ── Page « Vérifier ces faits » ────────────────────────────────────────── */

.titre-sources {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  margin-bottom: 1.75rem;
}

/* Chaque affirmation est un titre ; sous chaque titre, où aller regarder. */
.ou-verifier {
  color: var(--encre-douce);
  margin-bottom: 2.25rem;
}

.lien-retour { color: inherit; text-decoration: none; }
.lien-retour:hover, .lien-retour:focus-visible { color: var(--vert); }

/* ── Liens sortants ─────────────────────────────────────────────────────── */

.lien-sortant {
  color: var(--vert);
  text-decoration: none;
  border-bottom: 1px solid var(--vert-clair);
}
.lien-sortant:hover, .lien-sortant:focus-visible { color: var(--vert-clair); }

/* ── Pied de page ───────────────────────────────────────────────────────── */

.pied {
  background: var(--encre);
  color: var(--papier);
  padding-block: 3rem;
}

.pied-titre {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.pied-lien { color: #cfd6d0; margin: 0; }
.pied .lien-sortant { color: #9dc3ac; border-bottom-color: #4a7d61; }

/* ── Confort de lecture et accessibilité ────────────────────────────────── */

:focus-visible { outline: 3px solid var(--vert-clair); outline-offset: 3px; }

/* ── Apparitions ────────────────────────────────────────────────────────────
   Les phrases fortes montent doucement à l'entrée dans l'écran. Rien de
   spectaculaire : juste assez pour qu'on les reçoive une par une, au lieu de
   les balayer d'un coup d'œil.

   Le masquage n'est appliqué QUE si `html` porte `js-anim`, classe posée par
   le script en fin de page. Sans JavaScript, ou si le script échoue, tout le
   texte reste visible — jamais de page blanche pour une animation.
   ──────────────────────────────────────────────────────────────────────── */

.js-anim .apparait {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js-anim .apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-anim .apparait { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

@media print {
  .sombre, .pied { background: #fff; color: #000; }
  .sombre h2, .sombre p, .pied-titre, .pied-lien { color: #000; }
}


/* ── Multilingue ────────────────────────────────────────────────────────────
   Le sélecteur est un rang de liens, rien de plus : pas de menu déroulant,
   pas de drapeau. Un drapeau désigne un pays, jamais une langue — et ce site
   s'adresse à des gens, pas à des territoires.
   ──────────────────────────────────────────────────────────────────────── */

.entete .bande {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.langues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.langues a {
  color: var(--encre-douce);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.langues a:hover,
.langues a:focus-visible { color: var(--vert); border-bottom-color: var(--vert-clair); }

/* La langue courante n'est pas un lien : on ne propose pas d'aller là où
   l'on est déjà. Elle reste lisible, simplement plus appuyée. */
.langue-active { color: var(--encre); font-weight: 600; }

/* ── Arabe (droite à gauche) ────────────────────────────────────────────────
   Tout le reste de la feuille est écrit en propriétés logiques, donc rien
   n'a besoin d'être miroité ici. Ne subsistent que les réglages propres à
   l'écriture arabe elle-même.
   ──────────────────────────────────────────────────────────────────────── */

[dir="rtl"] body {
  /* Les serifs latines n'ont pas d'équivalent arabe dans la feuille : on
     laisse le système choisir une police arabe lisible plutôt que d'imposer
     un rendu approximatif. */
  font-family: "Noto Naskh Arabic", "Amiri", "Segoe UI", Tahoma, system-ui, sans-serif;
  line-height: 1.95;   /* l'arabe respire plus bas que le latin */
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .accroche, [dir="rtl"] .temps-fort, [dir="rtl"] .arret,
[dir="rtl"] .ample, [dir="rtl"] .tranchant, [dir="rtl"] .definition,
[dir="rtl"] .compte, [dir="rtl"] .phrase-finale, [dir="rtl"] .citation-refus {
  font-family: "Noto Naskh Arabic", "Amiri", Georgia, serif;
  letter-spacing: 0;   /* l'interlettrage latin déforme les ligatures arabes */
}

/* Les libellés en capitales espacées sont une convention typographique
   latine : elle n'a pas de sens en arabe et rend le texte illisible. */
[dir="rtl"] .titre-site,
[dir="rtl"] .titre-famille,
[dir="rtl"] .lien-film,
[dir="rtl"] .mention-attente,
[dir="rtl"] .bouton-avancer,
[dir="rtl"] .bouton-approfondir,
[dir="rtl"] .pied-titre {
  text-transform: none;
  letter-spacing: 0;
}

/* Le champ des 500 points n'a pas de sens de lecture : on le laisse dans le
   sens du document pour qu'il reste aligné sur le texte qui le nomme. */
[dir="rtl"] .population { direction: rtl; }