/* =========================================================================
   PAGES ARTICLES (liste et page d'article) : feuille de page v7
   Chargee APRES styles.css, par ces deux pages SEULEMENT. Elle ne redefinit
   aucun jeton de :root, ni .carte, ni .bande, ni .entete, ni .entete--clair,
   ni une @keyframes partagee : elle ajoute ce qui n'appartient qu'a la
   rubrique. Toutes ses classes portent le prefixe `ar-` (articles), sauf les
   quelques recolorations d'en-tete clair expliquees en section 2.
   Mode d'emploi des fondations : `11-fondations-v7.md` section 1.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. L'en-tete a deux colonnes : le texte a gauche, le visuel a DROITE
   (decision D). Sous 900 px, une seule colonne : le visuel passe sous le
   texte sans qu'aucune regle ne le deplace, l'ordre du document suffit.
   ------------------------------------------------------------------------- */

/* Un en-tete CLAIR n'a pas de fondu a couvrir : le grand remplissage bas de
   `.entete` (jusqu'a 120 px) y devient un trou. Mesure sur capture a 1280 :
   200 px de blanc entre le bas du visuel et la premiere carte. */
.ar-entete { padding-bottom: clamp(38px, 4.6vw, 62px); }

/* P2 (17/09). `.entete--clair` porte sur son propre fond une lueur tres pale,
   `radial-gradient(130% 95% at 88% -14%, rgba(74,126,245,.09), transparent 58%)`,
   posee par les fondations « pour qu'il ne soit pas un aplat ». Mesure : sur
   blanc elle vaut #eff3fe et couvre la moitie haute de la boite. Contre la
   barre de navigation NUIT, elle ne se lit pas comme une lueur mais comme une
   ombre sale qui descend de la barre, donc comme un defaut de jonction ; la
   decision C dit en-tete CLAIR. Causalite verifiee par sonde : neutralisee, le
   voile disparait entierement. Eteinte ICI, par ma classe, sans jamais
   redefinir `.entete--clair` (interdit 2 des fondations) : les autres pages a
   en-tete clair gardent leur reglage tant que leur proprietaire ne tranche pas. */
.ar-entete { background-image: none; }

@media (min-width: 900px) {
  /* Le visuel occupe la moitie de la largeur de l'en-tete : c'est un objet
     central, pas un picto dans un coin. Le texte se cale au milieu de sa
     hauteur. */
  .ar-tete { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; }
  /* Sur la page d'un article, le meme dessin en plus petit : la rubrique se
     reconnait, mais le titre de l'article reste le premier objet lu. */
  .ar-tete--article { grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); }
}

/* La hauteur du visuel commande celle de l'en-tete : le texte etant centre
   contre lui, chaque pixel de trop devient du blanc de part et d'autre. */
.ar-scene { display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; }
.ar-visuel--petit .ar-scene { max-width: 340px; }
/* Sous 900 px le visuel passe sous le texte : plafonne plus bas, sinon ses
   marges internes deviennent un grand blanc entre l'intro et la premiere
   carte, et cale a GAUCHE, sur l'axe du texte (centre sous un texte aligne a
   gauche, le dessin flottait sans appui). Les deux constates a 768. */
@media (max-width: 899px) {
  .ar-scene { max-width: 440px; margin-inline: 0; }
}

/* -------------------------------------------------------------------------
   2. En-tete CLAIR : ce que `.entete--clair` ne pouvait pas savoir
   `styles.css` remonte la tete d'un article dans le bandeau SOMBRE : titre en
   `--jour`, chapo en clair, etiquette sur un filet translucide (regles
   `.entete .article__titre` et suivantes). Sur un en-tete clair, ces trois
   lignes seraient du blanc sur du blanc. Seules ces deux pages posent un
   `.article__titre` dans un en-tete, donc la correction vit ici et nulle part
   ailleurs. Mesures de contraste : journal `12-articles-v7.md` section 5.
   ------------------------------------------------------------------------- */

.entete--clair .article__titre { color: var(--encre); }
.entete--clair .article__chapo { color: var(--encre-mi); }
.entete--clair .article__meta { color: var(--gris); }
.entete--clair .article__meta .article__etiquette {
  background: var(--carte);
  color: var(--accent-profond);
}

/* -------------------------------------------------------------------------
   3. LA PLUME ET L'ENCRIER (contrat 1.4, decision A.5, redessines le 17/09)
   Au trait monochrome `--encre` sur le blanc de l'en-tete clair, epaisseur
   CONSTANTE, bouts ronds, sans remplissage. Le relief ne vient d'aucun aplat
   mais d'un ombrage HACHURE, comme dans une gravure : une trame plus fine que
   le trait de contour, ce qui suffit a la faire lire comme une valeur et non
   comme un dessin. Les deux seules zones non tracees sont l'ombre douce au sol
   et, seule piece en couleur, l'encre qui sort du bec.
   ------------------------------------------------------------------------- */

.ar-trait {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* La trame d'ombrage est plus fine que le contour : c'est ce rapport qui la
   fait lire comme une valeur grise, et non comme un second dessin. */
.ar-hachure {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.1;
  stroke-linecap: round;
}
/* L'ombre posee au sol : le seul aplat du dessin, et il est demande. */
.ar-ombre { fill: var(--encre); opacity: 0.09; stroke: none; }

/* L'encre. Les quatre arrets SONT ceux de `--degrade-bouton` : ses deux
   valeurs portent 6,2:1 et 5,1:1 sur blanc, donc l'encre reste lisible comme
   objet graphique (seuil 3:1). Un degrade d'ornement, plus clair, tombait
   sous ce seuil.
   Le trait est coupe en TROIS morceaux d'epaisseurs decroissantes : c'est la
   seule facon d'amincir un trait vers la droite sans animer `stroke-width`
   (interdit par la charte de mouvement) ni remplacer le trait par une forme
   pleine, qui ne se tracerait plus au pointille. Les raccords tombent la ou le
   trait est le plus calme, apres la boucle, et les bouts ronds les ferment. */
.ar-encre {
  fill: none;
  stroke: url(#ar-degrade-encre);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ar-encre--1 { stroke-width: 2.9; }
.ar-encre--2 { stroke-width: 2.1; }
.ar-encre--3 { stroke-width: 1.35; }
.ar-arret-a, .ar-arret-d { stop-color: var(--accent-profond); }
.ar-arret-b, .ar-arret-c { stop-color: var(--accent-sombre); }

/* La version reduite de la page d'article : le MEME dessin a 65 % (340 px pour
   520). L'epaisseur y est compensee PARTIELLEMENT, pas totalement. Mesure sur
   rendu : a compensation totale (1,7 devient 2,6) le col de l'encrier
   s'empatait, ses deux ellipses se rejoignant en un bandeau, et l'encre
   devenait grasse ; sans compensation du tout le trait tombait a 1,11 px,
   trop maigre sur un ecran non retina. A 2,1, le trait apparent vaut 1,37 px :
   net, et la trame respire encore. */
.ar-visuel--petit .ar-trait { stroke-width: 2.1; }
.ar-visuel--petit .ar-hachure { stroke-width: 1.35; }
.ar-visuel--petit .ar-encre--1 { stroke-width: 3.55; }
.ar-visuel--petit .ar-encre--2 { stroke-width: 2.55; }
.ar-visuel--petit .ar-encre--3 { stroke-width: 1.65; }

/* --- L'animation, une seule par ecran ------------------------------------
   Le trait d'encre se trace depuis le bec, la plume s'incline comme si elle
   ecrivait, EN PHASE avec le trace, puis le trait s'estompe et se retrace.
   Un seul objet anime, deux mouvements du meme geste, boucle de 11 s
   (contrat 1.4 : 10 a 12 s). Rien ne bouge sans script : l'etat par defaut est
   le trait ENTIEREMENT trace.
   Les trois morceaux se tracent l'un APRES l'autre (boucle, puis envol, puis
   queue) : le geste reste unique a l'oeil. `pathLength="1000"` sur chacun, donc
   la longueur reelle des chemins n'entre jamais dans la feuille. */

.js-anim .ar-encre { stroke-dasharray: 1000; }
.js-anim .ar-encre--1 { animation: ar-tracer-1 11s ease-in-out infinite; }
.js-anim .ar-encre--2 { animation: ar-tracer-2 11s ease-in-out infinite; }
.js-anim .ar-encre--3 { animation: ar-tracer-3 11s ease-in-out infinite; }
.js-anim .ar-plume {
  transform-box: view-box;
  transform-origin: 186px 302px; /* la pointe exacte du bec */
  animation: ar-ecrire 11s ease-in-out infinite;
}

/* Un morceau reste cache (`stroke-dashoffset: 1000`) jusqu'a son tour, tient
   trace jusqu'a 72 %, s'estompe, puis se remet en position cachee pendant qu'il
   est invisible : c'est ce qui evite tout saut au recommencement. */
@keyframes ar-tracer-1 {
  0%, 2%  { stroke-dashoffset: 1000; opacity: 1; }
  30%     { stroke-dashoffset: 0; opacity: 1; }
  72%     { stroke-dashoffset: 0; opacity: 1; }
  88%     { stroke-dashoffset: 0; opacity: 0; }
  89%     { stroke-dashoffset: 1000; opacity: 0; }
  100%    { stroke-dashoffset: 1000; opacity: 1; }
}
@keyframes ar-tracer-2 {
  0%, 30% { stroke-dashoffset: 1000; opacity: 1; }
  40%     { stroke-dashoffset: 0; opacity: 1; }
  72%     { stroke-dashoffset: 0; opacity: 1; }
  88%     { stroke-dashoffset: 0; opacity: 0; }
  89%     { stroke-dashoffset: 1000; opacity: 0; }
  100%    { stroke-dashoffset: 1000; opacity: 1; }
}
@keyframes ar-tracer-3 {
  0%, 40% { stroke-dashoffset: 1000; opacity: 1; }
  46%     { stroke-dashoffset: 0; opacity: 1; }
  72%     { stroke-dashoffset: 0; opacity: 1; }
  88%     { stroke-dashoffset: 0; opacity: 0; }
  89%     { stroke-dashoffset: 1000; opacity: 0; }
  100%    { stroke-dashoffset: 1000; opacity: 1; }
}
/* Quatre appuis, comme une main qui forme des lettres, puis la plume se
   redresse et attend le prochain trace. Amplitude 2,6 degres. */
@keyframes ar-ecrire {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(-2.6deg); }
  18%  { transform: rotate(-0.6deg); }
  28%  { transform: rotate(-2.4deg); }
  38%  { transform: rotate(-0.8deg); }
  46%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* -------------------------------------------------------------------------
   4. LA CLOTURE SUR BANDE SOMBRE (decision C : la bande vit en BAS)
   `.bande--bas` porte deja le fond, la lueur, le fondu en haut seulement et
   la remontee vers `--nuit` qui la colle au pied. Ici, seulement la mise en
   place de son contenu, et le paraphe d'encre qui ferme la rubrique : le meme
   degrade que le trait de l'en-tete, dans ses valeurs claires, parce que
   `--accent-profond` sur nuit ne mesure que 2,96:1.
   ------------------------------------------------------------------------- */

/* La bande rejoint le pied : inutile d'empiler son remplissage bas et celui
   du pied, l'ensemble sonnait creux sur la capture. */
.ar-bande { padding-bottom: clamp(34px, 4.2vw, 58px); }

/* Le fondu d'une bande est peint DANS sa boite, en haut : le contenu doit
   commencer sous lui. A 390 px le fondu mesure 56 px et le remplissage de la
   bande 46 px, donc dix pixels de contenu tombaient dans du blanc a 80 %. */
.ar-cloture {
  display: grid;
  justify-items: center;
  gap: clamp(22px, 3vw, 32px);
  padding-top: clamp(16px, 2.2vw, 28px);
}
/* Le paraphe ferme la rubrique sur le meme geste que l'en-tete : un trait
   d'encre au meme degrade, qui se trace une fois.
   RESERVE HONNETE, 17/09 : sa serpentine est celle du PREMIER dessin de cette
   page. Le redessin de la plume (P1) a change la geometrie du trait de
   l'en-tete, et la bande sombre du bas m'etait explicitement interdite par le
   brief de correction : le paraphe ne cite donc plus le meme attribut `d`.
   L'ecart est reversible en une edition, et il est propose dans
   `17-plume-v7.md` avec les valeurs exactes a poser. */
.ar-paraphe { display: block; width: clamp(210px, 36vw, 330px); height: auto; }
.ar-paraphe-trait {
  fill: none;
  stroke: url(#ar-degrade-paraphe);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ar-arret-clair-a, .ar-arret-clair-d { stop-color: var(--accent); }
.ar-arret-clair-b, .ar-arret-clair-c { stop-color: var(--accent-clair); }

/* Le paraphe se trace UNE fois, a l'arrivee dans la vue, avec la duree
   d'entree du site : c'est une entree, pas une boucle. Sans script il est
   deja trace, et le mouvement reduit le laisse tel quel. */
.js-anim .ar-paraphe-trait { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.js-anim .est-visible .ar-paraphe-trait {
  animation: ar-tracer-une-fois var(--duree-entree) var(--courbe) forwards;
}
@keyframes ar-tracer-une-fois {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------------------
   5. Mouvement reduit : aucune boucle, aucune entree, l'etat final affiche.
   Les selecteurs reprennent le prefixe `.js-anim` pour peser exactement
   autant que les regles qu'ils annulent (une regle plus legere ne gagnerait
   pas, et l'animation continuerait de tourner).
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js-anim .ar-encre,
  .js-anim .ar-encre--1,
  .js-anim .ar-encre--2,
  .js-anim .ar-encre--3 {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .js-anim .ar-plume { animation: none; transform: none; }
  .js-anim .ar-paraphe-trait,
  .js-anim .est-visible .ar-paraphe-trait {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* -------------------------------------------------------------------------
   5 bis. IMPRESSION : neutraliser MON masquage
   `styles.css` remet l'opacite a 1 partout a l'impression, mais il ne connait
   pas mes deux masquages par pointilles : sur le papier, rien ne defile, donc
   `est-visible` n'arrive jamais et le paraphe resterait un trait invisible.
   L'etat final, ici aussi.
   ------------------------------------------------------------------------- */

@media print {
  .js-anim .ar-encre,
  .js-anim .ar-encre--1,
  .js-anim .ar-encre--2,
  .js-anim .ar-encre--3,
  .js-anim .ar-paraphe-trait,
  .js-anim .est-visible .ar-paraphe-trait {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   6. La liste et la page de lecture
   La carte d'article porte deja `.carte` : ombre, filet interieur, anneau
   degrade au survol et lueur qui suit le curseur viennent des fondations,
   rien a reecrire. Reste ce qui appartient a la rubrique.
   ------------------------------------------------------------------------- */

/* La section se rapproche de l'en-tete clair : 200 px de blanc entre le visuel
   et la carte au premier jet, 96 px apres (A2, aucun trou). */
.ar-liste { padding-top: clamp(20px, 2.6vw, 34px); }
/* P3 (17/09). `styles.css` donne a la carte unique toute la largeur de la
   grille en la plafonnant a 720 px ; je la centrais dans cette largeur, ce qui
   la decalait vers la droite alors que le kicker, le titre et l'intro de
   l'en-tete sont alignes a gauche. Le titre doit vivre pres de son contenu
   (DA A2) : la carte revient donc sur l'axe gauche du texte, qui est le bord
   interieur du meme `.conteneur`. La grille garde ses deux colonnes des le
   deuxieme article, ce reglage ne visant que le cas `:only-child`. */
.ar-liste .gabarit__grille > .carte-article:only-child { margin-inline: 0; }

/* La colonne de lecture d'un article ne change pas de largeur ni
   d'interlignage : `.article` (66ch) et `.article__corps` restent ceux de la
   v6. Seuls les intertitres arrivent en fondu monte, jamais les paragraphes :
   un texte qui apparait ligne a ligne se lit mal. Cette regle vit donc dans
   le HTML (un `data-anim` sur chaque `h2`), pas ici. */