/* « Pour aller plus loin » (gaf) — COMPOSANT PARTAGE avec la page d'accueil.
 * Transplante de la home (commit e85c50c).
 *
 * Extrait de tests/page-cellules/index.html (maquette generee par
 * build-cellules.py). Ne pas editer a la main sans reporter le changement
 * dans la maquette, sinon la prochaine regeneration ecrasera la difference.
 */

/* ══ CSS TRANSPLANTÉ : « l'affiche » (gaf) — home e85c50c ══ */
/* ══ « NOS GUIDES » — L'AFFICHE ═══════════════════════════════════════════════
   Remplace la liste de trois pavés gris (retirée le 2026-08-12). Le fond blanc
   est DÉCLARÉ, il n'est pas hérité : `.gaf` figure donc dans la liste des
   `:not()` de l'alternance plus haut, sans quoi la parité (0,2,0) écraserait
   ce (0,1,0) au premier décalage de blocs. Le blanc n'est pas un défaut ici :
   entre le #F8F7F4 de la zone desservie et le #1A1A1A du CTA final, il fait la
   page de magazine — et c'est le fond sur lequel les contrastes ci-dessous ont
   été calculés. */
.gaf{background:var(--color-white)}

/* Le bandeau-titre. Le <h2> ne change pas de texte et ne reçoit aucune
   accroche : le filet noir de 2 px suffit à poser le registre « une de
   journal ». Objet graphique #1A1A1A sur blanc (~15,9:1). */
.gaf__tete{border-bottom:2px solid var(--color-dark);
  padding-bottom:.5rem;margin-bottom:clamp(1rem,3.5vw,1.5rem)}
.gaf__tete h2{margin:0}

/* MOBILE : une colonne — l'affiche, les deux entrées de sommaire, la sortie.
   La hiérarchie ne repose PAS sur la position mais sur la masse : la vedette
   fait ~288 px avec du texte blanc sur photo, les secondaires ~110 px avec une
   vignette de 112 px et du texte noir sur blanc. Empilés ou côte à côte, on ne
   peut pas les confondre.
   >= 768 px : vedette pleine largeur, les deux secondaires côte à côte.
   >= 1024 px : deux colonnes asymétriques, vedette à gauche (1,2 fr). */
.gaf__compo{display:grid;gap:clamp(1.1rem,3.5vw,1.5rem)}
@media (min-width:1024px){
  .gaf__compo{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:1.75rem;align-items:stretch}
}

/* LA VEDETTE — le lien EST le panneau : <a> en bloc, photo en fond, texte
   dedans. Un seul arrêt clavier, et le `:focus-visible` (3 px #1A1A1A, offset
   2) se dessine tout autour du panneau sur le blanc de la section — pas besoin
   d'un lien étiré à `::after`.
   PAS DE HAUTEUR IMPOSÉE : la hauteur vient du texte plus le `padding-top`, la
   photo est en `position:absolute` et remplit ce que le texte a décidé. Aucun
   texte ne peut donc déborder de son voile, à aucune largeur, et le décalage
   de mise en page est nul par construction. */
.gaf__une{position:relative;display:block;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--color-dark);
  text-decoration:none;isolation:isolate;height:100%}
.gaf__une img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
/* Le voile : un dégradé vertical, pas un aplat, pour que le haut de la photo
   reste net. Les paliers tiennent la zone de texte (le bas ~40 %) sous une
   opacité >= 0,80. PIRE CAS, pixel de photo blanc pur sous le texte : #090909
   à 0,80 sur blanc donne #3A3A3A, sur lequel le blanc est à 11,4:1. */
.gaf__une::before{content:'';position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(9,9,9,.94) 0%,rgba(9,9,9,.88) 30%,rgba(9,9,9,.72) 50%,
    rgba(9,9,9,.30) 75%,rgba(9,9,9,0) 100%)}
/* `display:block` N'EST PAS COSMÉTIQUE : c'est un <span> (un <div> dans un <a>
   serait un flux invalide), et un élément INLINE peint son `padding-top` sans
   que celui-ci compte dans la hauteur. Sans cette ligne le panneau retombe à
   168 px au lieu de 288 et l'affiche n'existe plus — mesuré, aucune erreur,
   aucun symptôme ailleurs. */
.gaf__une-txt{display:block;position:relative;z-index:2;
  padding:clamp(9.5rem,34vw,13rem) clamp(1.15rem,4vw,1.75rem)
          clamp(1.15rem,4vw,1.75rem)}
/* Le filet jaune court : seul ornement du bloc. Objet graphique #F5C518 sur le
   voile sombre, 10,68:1. Le jaune ne porte JAMAIS de texte ici. */
.gaf__une-txt::before{content:'';display:block;width:44px;height:3px;
  background:var(--color-primary);border-radius:2px;margin-bottom:.7rem}
/* Le titre de la vedette est PLUS GROS que le <h2> de la section (30 px contre
   22 px à 1280 px). Inversion assumée : dans une une, le titre de l'article
   domine le nom de la rubrique ; le filet noir tient le <h2> comme repère.
   DM Sans 700 — la seule graisse forte embarquée en woff2. */
.gaf__une-titre{display:block;font-family:var(--font-display);
  font-weight:700;line-height:1.18;letter-spacing:-.01em;
  color:var(--color-white);
  font-size:clamp(1.375rem,1.05rem + 1.6vw,1.875rem)}
.gaf__une-accroche{display:block;margin-top:.5rem;
  font-family:var(--font-body);font-size:var(--font-size-small);
  line-height:1.45;color:var(--color-gray-light)}

/* LE SOMMAIRE — rangée vignette + texte. Pas de carte, pas de fond, pas
   d'ombre : un filet d'1 px les sépare. L'absence totale de décor les
   distingue de la vedette autant que leur taille.
   La colonne est en flex pour que la sortie soit poussée en bas par
   `margin-top:auto` à partir de 1024 px : les deux colonnes se ferment alors
   sur la même ligne. */
.gaf__col{display:flex;flex-direction:column}
.gaf__secs{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:768px) and (max-width:1023px){
  .gaf__secs{grid-template-columns:repeat(2,1fr);gap:0 1.25rem}
}
.gaf__sec{border-top:1px solid var(--color-gray-light)}
.gaf__secs > .gaf__sec:last-child{border-bottom:1px solid var(--color-gray-light)}
@media (min-width:768px) and (max-width:1023px){
  .gaf__secs > .gaf__sec:last-child{border-bottom:none}
  .gaf__secs{border-bottom:1px solid var(--color-gray-light)}
}
/* Le lien EST la rangée entière. Cible tactile : ~112 px de haut, très
   au-dessus des 44 px. */
.gaf__sec-lien{display:flex;gap:.9rem;align-items:flex-start;
  padding:.85rem 0;text-decoration:none;color:inherit}
/* LA VIGNETTE — 4/3, jamais carré : les trois sources sont en 4/3 natif et un
   cadre carré rognerait 25 % de la largeur, ce que la vue de Givet (la Meuse
   en travers du cadre) ne supporte pas. `aspect-ratio` + `object-fit:cover` :
   la boîte est réservée avant l'image et rien ne peut se déformer.
   112 puis 132 px : la contrainte dure de guide-couvin-400.webp veut
   <= ~300 px CSS. À 132 px, un écran 2x demande 264 px sur les 400 fournis. */
.gaf__vign{flex:0 0 auto;width:112px;aspect-ratio:4 / 3;height:auto;
  object-fit:cover;border-radius:var(--radius-sm);
  background:var(--color-gray-light)}
@media (min-width:1024px){.gaf__vign{width:132px}}
.gaf__sec-titre{display:block;font-family:var(--font-display);
  font-weight:600;font-size:.9375rem;line-height:1.25;color:var(--color-dark)}
/* #595959 sur blanc = 5,32:1, au-dessus du 4,5:1 exigé pour ce corps. */
.gaf__sec-accroche{display:block;margin-top:.3rem;
  font-size:.8125rem;line-height:1.4;color:var(--color-gray)}

/* La sortie vers le blog. Même idiome que l'ancien `.hm-guides-more` : hors du
   sommaire, sans vignette, sans filet, avec la flèche qui glisse au survol.
   Rien ne peut le lire comme un quatrième guide.
   Couleur --color-primary-text (#7A6200), 5,88:1 sur blanc — surtout pas
   --color-primary-dark (#D9AD00, 2,12:1, échec franc).
   `inline-block` + padding/margin négatifs : cible tactile à ~46 px sans
   décaler la ligne. Il porte SA cible ici, il n'est plus dans le sélecteur
   groupé de fin de feuille. */
.gaf__more{margin:1.1rem 0 0;font-size:.9rem}
@media (min-width:1024px){.gaf__more{margin-top:auto;padding-top:1.1rem}}
.gaf__more a{display:inline-block;font-family:var(--font-display);
  font-weight:600;padding:.75rem .35rem;margin:-.75rem -.35rem}
.gaf__more a span{display:inline-block;margin-left:.15rem}

/* Deux effets, au survol seulement, donc absents au doigt. Rien n'est animé à
   l'apparition, aucune classe n'est ajoutée par JS : ce bloc n'a pas de script.
   La requête empêche même la déclaration des transitions sous
   `prefers-reduced-motion`. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .gaf__une img{transition:transform var(--duration-normal) var(--ease-out)}
  .gaf__une:hover img{transform:scale(1.03)}
  .gaf__vign{transition:transform var(--duration-fast) var(--ease-out)}
  .gaf__sec-lien:hover .gaf__vign{transform:translateX(2px)}
  .gaf__more a span{transition:transform var(--duration-fast) var(--ease-out)}
  .gaf__more a:hover span{transform:translateX(3px)}
}
@media (hover:hover) and (pointer:fine){
  .gaf__sec-lien:hover .gaf__sec-titre{color:var(--color-primary-text)}
}