/* cartes — peaufinage 24/09 (lot B, retour Mathias : "image trop petite face a trop de texte")
   Portee : body.archive et body.category UNIQUEMENT (gabarits rubrique + Actualite). Classes
   entierement nouvelles (jr-carte2409-*, jr-cartegrid, jr-journal-*) : aucun risque de toucher
   .sd-carte, partage avec l'accueil (lot A). */

body.archive .jr-cartegrid,
body.category .jr-cartegrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;margin-top:2.2rem;
}

/* ---------- carte de base (grille) ---------- */
body.archive .jr-carte2409,
body.category .jr-carte2409{
  list-style:none;
}
body.archive .jr-carte2409-lien,
body.category .jr-carte2409-lien{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  background:var(--surf);border-radius:var(--rayon);overflow:hidden;
  box-shadow:var(--ombre);transition:transform .18s ease,box-shadow .18s ease;
}
body.archive .jr-carte2409-lien:hover,
body.category .jr-carte2409-lien:hover{
  transform:translateY(-3px);box-shadow:var(--ombre-f);
}
body.archive .jr-carte2409-lien:focus-visible,
body.category .jr-carte2409-lien:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}

/* grande image pleine largeur, ratio 3:2 — jamais la vignette 96px carree d'avant */
body.archive .jr-carte2409-img,
body.category .jr-carte2409-img{
  display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--filet);
}
body.archive .jr-carte2409-img img,
body.category .jr-carte2409-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
body.archive .jr-carte2409-img .jr-plaque,
body.category .jr-carte2409-img .jr-plaque{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-size:3rem;font-weight:700;color:var(--sur-accent,#fff);
  border-radius:0;
}

body.archive .jr-carte2409-corps,
body.category .jr-carte2409-corps{
  display:flex;flex-direction:column;gap:.55rem;padding:1.25rem 1.35rem 1.5rem;flex:1 1 auto;
}
body.archive .jr-carte2409-titre,
body.category .jr-carte2409-titre{
  display:block;font-family:var(--titre);font-weight:700;font-size:1.18rem;line-height:1.32;
  color:var(--encre);
}
body.archive .jr-carte2409-chapo,
body.category .jr-carte2409-chapo{
  display:block;font-size:.97rem;line-height:1.55;color:var(--doux);
}
body.archive .jr-carte2409-meta,
body.category .jr-carte2409-meta{
  display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--doux);
  margin-top:auto;padding-top:.4rem;white-space:nowrap;
}
body.archive .jr-carte2409-meta-sep,
body.category .jr-carte2409-meta-sep{color:var(--doux)}

/* ---------- carte "a la une" (1ere page seulement, plus grande) ---------- */
body.archive .jr-carte2409--une,
body.category .jr-carte2409--une{grid-column:1 / -1}
body.archive .jr-carte2409--une .jr-carte2409-lien,
body.category .jr-carte2409--une .jr-carte2409-lien{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;align-items:stretch;
}
body.archive .jr-carte2409--une .jr-carte2409-img,
body.category .jr-carte2409--une .jr-carte2409-img{aspect-ratio:auto;height:100%;min-height:280px}
body.archive .jr-carte2409--une .jr-carte2409-corps,
body.category .jr-carte2409--une .jr-carte2409-corps{
  justify-content:center;padding:2rem 2.2rem;gap:.8rem;
}
body.archive .jr-carte2409--une .jr-carte2409-titre,
body.category .jr-carte2409--une .jr-carte2409-titre{font-size:1.75rem;line-height:1.25}
body.archive .jr-carte2409--une .jr-carte2409-chapo,
body.category .jr-carte2409--une .jr-carte2409-chapo{font-size:1.08rem}
/* 25/09 (lot E) — retour Mathias "gros vide entre le chapo et la date" : la meta de la carte de
   grille pousse au bas grace a margin-top:auto (utile sur une carte de grille a hauteur variable),
   mais combine a justify-content:center ICI, tout l'espace libre partait dans cette marge -> le
   trio titre/chapo/meta n'etait plus un bloc compact. On neutralise l'auto UNIQUEMENT sur la
   "une" : le gap:.8rem suffit, et justify-content:center centre alors le vrai bloc (titre+chapo
   +meta) dans la hauteur de l'image, sans plus jamais de trou. */
body.archive .jr-carte2409--une .jr-carte2409-meta,
body.category .jr-carte2409--une .jr-carte2409-meta{margin-top:0;padding-top:0}

/* ---------- rubrique ACTUALITE : traitement "journal", date en evidence ---------- */
body.category .jr-journal-kicker{
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--accent-txt);
}
body.category .jr-journal-hero{margin-top:2.2rem}
body.category .jr-cartegrid--journal{margin-top:1.8rem}
body.category .jr-carte2409-date{
  display:inline-flex;align-self:flex-start;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;color:var(--sur-accent,#fff);background:var(--accent);
  padding:.3rem .65rem;border-radius:999px;white-space:nowrap;
}
body.category .jr-carte2409--journal.jr-carte2409--une .jr-carte2409-date{font-size:.85rem}

/* ---------- 1080 : la "une" garde son duo image/texte mais plus compact ---------- */
@media (max-width:1080px){
  body.archive .jr-cartegrid,
  body.category .jr-cartegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.archive .jr-carte2409--une .jr-carte2409-corps,
  body.category .jr-carte2409--une .jr-carte2409-corps{padding:1.6rem 1.8rem}
  body.archive .jr-carte2409--une .jr-carte2409-titre,
  body.category .jr-carte2409--une .jr-carte2409-titre{font-size:1.5rem}
}

/* ---------- 760 et 390 : 1 seule colonne, la "une" s'empile image-au-dessus ---------- */
@media (max-width:760px){
  body.archive .jr-cartegrid,
  body.category .jr-cartegrid{grid-template-columns:1fr;gap:1.4rem}
  body.archive .jr-carte2409--une .jr-carte2409-lien,
  body.category .jr-carte2409--une .jr-carte2409-lien{grid-template-columns:1fr}
  body.archive .jr-carte2409--une .jr-carte2409-img,
  body.category .jr-carte2409--une .jr-carte2409-img{aspect-ratio:16/9;height:auto;min-height:0}
  body.archive .jr-carte2409--une .jr-carte2409-corps,
  body.category .jr-carte2409--une .jr-carte2409-corps{padding:1.4rem 1.3rem}
  body.archive .jr-carte2409--une .jr-carte2409-titre,
  body.category .jr-carte2409--une .jr-carte2409-titre{font-size:1.35rem}
}

@media (max-width:480px){
  body.archive .jr-carte2409-corps,
  body.category .jr-carte2409-corps{padding:1.05rem 1.1rem 1.25rem}
  body.archive .jr-carte2409-titre,
  body.category .jr-carte2409-titre{font-size:1.08rem}
}

@media (prefers-reduced-motion: reduce){
  body.archive .jr-carte2409-lien,
  body.category .jr-carte2409-lien{transition:none}
  body.archive .jr-carte2409-lien:hover,
  body.category .jr-carte2409-lien:hover{transform:none}
}

/* ---------- pagination des rubriques (retour Mathias 24/09 16h20) : la liste <ul.page-numbers>
        posee par paginate_links() n'avait aucune mise en forme propre -> les <li> (display
        list-item par defaut) s'empilaient verticalement sous la grille, jusque sur le pied de
        page. .sd-pagination (style.css) ne met le NAV lui-meme qu'en flex centre : ca ne change
        rien a son unique enfant <ul>, qui doit devenir flex a son tour. ---------- */
body.archive .sd-pagination,
body.category .sd-pagination{margin-top:2.8rem;margin-bottom:2.6rem}
body.archive .sd-pagination ul.page-numbers,
body.category .sd-pagination ul.page-numbers{
  display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  justify-content:center;align-items:center;gap:.5rem;
}
body.archive .sd-pagination ul.page-numbers li,
body.category .sd-pagination ul.page-numbers li{display:flex}

/* ==========================================================================
   25/09/2026 — lot E (peaufiner) — HERO de tete de rubrique
   ui-ux-pro-max invoque pour : tete de rubrique (hero image reelle + surtitre + H1 + chapo),
   reprise de la carte "a la une".
   Retour Mathias : "tete de rubrique sans vrai hero (juste surtitre + H1 + 1 ligne) -> une tete
   de rubrique travaillee, belle, avec image au sujet, sans pave de texte qui retarde la liste".
   Vocabulaire repris de .sd-ap-hero (css/apropos-2409.css, deja valide par Mathias) : meme voile,
   meme kicker, meme "titre blanc sur image" — identite du theme, pas un nouveau style invente.
   Compact (clamp 230-320px, contre 340-500px sur la page a-propos) pour ne jamais retarder la
   liste d'articles juste en dessous (regle B-CAT-02, deja VERT — a ne pas casser). ========== */
body.archive .jr-rubhero-tete{display:block;margin-bottom:2.2rem}
body.archive .jr-rubhero{
  position:relative;isolation:isolate;border-radius:var(--rayon);overflow:hidden;
  min-height:clamp(230px,28vw,320px);
  display:flex;align-items:flex-end;
  background:linear-gradient(135deg,var(--rh-sombre,#131F22),var(--rh-clair,#1F5866));
  box-shadow:var(--ombre-f);
}
body.archive .jr-rubhero-media{position:absolute;inset:0;z-index:0}
body.archive .jr-rubhero-media img{width:100%;height:100%;object-fit:cover;display:block}
body.archive .jr-rubhero-voile{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,14,15,.88) 0%,rgba(8,14,15,.5) 48%,rgba(8,14,15,.08) 100%),
             color-mix(in srgb, var(--rh-clair,#1F5866) 18%, transparent);
}
body.archive .jr-rubhero-texte{position:relative;z-index:1;padding:clamp(1.5rem,3vw,2.3rem);max-width:56ch}
body.archive .jr-rubhero-meta{
  margin:0 0 .5rem;font-family:var(--courant,inherit);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#EDF3F2;
}
body.archive .jr-rubhero-titre{
  margin:0;font-family:var(--titre);color:#fff;
  font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance;
}
body.archive .jr-rubhero-chapo{
  margin:.6rem 0 0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.92);max-width:52ch;
}
/* rubrique sans image dispo (ex. Non classe, vide) : bandeau de couleur, jamais de trou */
body.archive .jr-rubhero--vide .jr-rubhero-texte{padding:clamp(1.7rem,3.4vw,2.6rem)}

@media (max-width:760px){
  body.archive .jr-rubhero{min-height:clamp(190px,46vw,240px)}
  body.archive .jr-rubhero-texte{padding:1.3rem 1.4rem}
  body.archive .jr-rubhero-titre{font-size:clamp(23px,6vw,28px)}
  body.archive .jr-rubhero-chapo{font-size:14.5px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
}

@media (prefers-reduced-motion: reduce){
  body.archive .jr-rubhero-media img{transition:none}
}