/* ==========================================================================
   GIFR, refonte 2026 : pages d'archive
   --------------------------------------------------------------------------
   A charger APRES gi-tokens.css. Ne redefinit aucun token.
   Reprend telles quelles les briques de gi-accueil.css : .gi-post, .gi-thumb,
   .gi-tag, .gi-card--paper, .gi-btn. Ce fichier n'ajoute que ce qui manquait :
   l'en-tete d'archive, la carte vedette, la pagination et l'etat vide.

   Paliers : 1280, 1080, 900, 760, 620, 400. Ce sont ceux de gi-accueil.css,
   aucun palier neuf n'a ete invente.
   ========================================================================== */

/* ==========================================================================
   A1. EN-TETE D'ARCHIVE
   ========================================================================== */
.gi-arch-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  background:
    radial-gradient(70% 130% at 12% 0%, rgba(198, 165, 93, 0.10), transparent 62%),
    radial-gradient(60% 120% at 92% 100%, rgba(79, 166, 227, 0.07), transparent 66%),
    linear-gradient(180deg, var(--gi-ink-950), var(--gi-ink-900) 100%);
}

/* Filet dore de bas de bande, la meme signature que les separateurs */
.gi-arch-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--gi-line-strong) 22%, var(--gi-line-strong) 78%, transparent);
  z-index: 5;
}

/* FLEX ET NON GRID, et c'est une correction mesuree. La version en grille
   posait `minmax(0,1fr) auto` : sur une archive sans bloc redacteur, la
   deuxieme piste vaut zero mais LE GAP RESTE, et le bloc de titre perdait
   48 px de large sans que rien ne le montre a l'ecran. En flex, un enfant
   unique prend toute la place. Bonus : Divi pose ses conteneurs en flex,
   les deux DOM se comportent donc pareil et B18 n'a qu'a forcer la
   direction. */
.gi-arch-head__inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-6) var(--sp-8);
  flex-wrap: wrap;
}
.gi-arch-head__text { flex: 1 1 17rem; min-width: 0; }
/* La une prend la plus grosse part : c'est elle qu'on vient voir. */
.gi-arch-head__inner > .gi-hero-post { flex: 2 1 38rem; }
.gi-arch-head__inner > .gi-author { flex: 1 1 26rem; }

/* --- Titre --- */
.gi-arch-head__title {
  font-family: var(--gi-font-display);
  font-size: var(--fs-t-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps-lg);
  color: var(--gi-sand-50);
  text-wrap: balance;
}

/* Ornement : etoile a quatre branches en masque, deja servie par les titres
   de section. Reprise ici pour rattacher l'archive au reste du site. */
.gi-arch-head__ornament {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--sp-4);
}
.gi-arch-head__ornament::before,
.gi-arch-head__ornament::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, var(--gi-gold-600), transparent);
}
.gi-arch-head__ornament::before { width: 54px; }
.gi-arch-head__ornament::after {
  width: 100%;
  max-width: 220px;
  background: linear-gradient(90deg, var(--gi-gold-800), transparent);
}
.gi-arch-head__star {
  width: 13px;
  height: 13px;
  flex: none;
  background: var(--gi-gold-500);
  -webkit-mask: var(--gi-star) center / contain no-repeat;
          mask: var(--gi-star) center / contain no-repeat;
}



/* ==========================================================================
   A2. LA UNE DU BANDEAU
   --------------------------------------------------------------------------
   LE MEME GABARIT DE CARTE QUE LA GRILLE, a la lettre : memes classes, memes
   noeuds, meme ordre. `.gi-hero-post` s'ajoute par-dessus et le CSS fait le
   reste. C'est ce qui permet de n'avoir qu'UN gabarit de carte sur tout le
   site, et de ne pas payer une deuxieme fois les pieges du portage.

   Elle a demenage ici le 29/07, apres un premier jet ou elle etait la
   premiere carte de la grille, en 2x2. Ce que le demenagement a regle, et
   c'est plus qu'une affaire de gout : la carte changeait de taille au survol,
   parce que sa vignette prenait la hauteur disponible et que la hauteur des
   rangees dependait des cartes voisines. Dans le bandeau, sa hauteur ne
   depend de personne.
   ========================================================================== */
.gi-hero-post.gi-hero-post {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 1px var(--gi-gold-500),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 4px rgba(198, 165, 93, 0.10),
    var(--sh-3);
}
.gi-hero-post .gi-post__link {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}

/* La vignette prend un bon tiers et toute la hauteur de la carte. */
.gi-hero-post .gi-post__thumb {
  flex: 0 0 38%;
  aspect-ratio: auto;
  min-height: 250px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

/* Ici le ruban SE MONTRE, et il est le seul de la page. */
.gi-hero-post .gi-post__feat {
  display: inline-flex;
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 4;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.8rem;
  border-radius: var(--r-pill);
  font-family: var(--gi-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gi-ink-950);
  background: linear-gradient(160deg, var(--gi-gold-200), var(--gi-gold-500));
  box-shadow: var(--glow-gold-strong);
}
.gi-hero-post .gi-post__feat svg { width: 11px; height: 11px; }

.gi-hero-post .gi-post__body {
  flex: 1;
  gap: 0.6rem;
  padding: var(--sp-6);
  justify-content: center;
}
.gi-hero-post .gi-post__date { font-size: 0.75rem; }
.gi-hero-post .gi-post__title {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem);
  line-height: 1.2;
}
.gi-hero-post .gi-post__excerpt {
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* « Lire la suite » devient un vrai bouton, sans un noeud de plus dans le
   gabarit : c'est le meme module, restyle par le contexte. */
.gi-hero-post .gi-post__more {
  margin-top: var(--sp-4);
  padding: 0.78rem 1.4rem;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  color: var(--gi-on-paper);
  background: linear-gradient(160deg, var(--gi-gold-300), var(--gi-gold-500));
  box-shadow: 0 6px 18px -8px rgba(74, 57, 28, 0.85);
  transition: box-shadow var(--t-base), filter var(--t-base);
}
.gi-hero-post:hover .gi-post__more {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px -8px rgba(74, 57, 28, 0.95);
}

/* PAS DE SOULEVEMENT AU SURVOL. `.gi-card--hover` remonte la carte de sept
   pixels : sur une carte de grille c'est juste, sur une carte de bandeau
   haute de 300 px ca fait bouger tout le bandeau. Le survol se dit ici par la
   lueur et le bouton, pas par le mouvement. */
.gi-hero-post.gi-card--hover:hover { transform: none; }

/* ==========================================================================
   A3. BLOC REDACTEUR  (archive d'auteur uniquement)
   ========================================================================== */
.gi-author {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--gi-ink-800), var(--gi-ink-850));
  box-shadow: inset 0 0 0 1px var(--gi-line), var(--sh-2);
}
.gi-author__avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  color: rgba(248, 244, 236, 0.72);
  box-shadow: 0 0 0 2px var(--gi-ink-900), 0 0 0 3px var(--gi-line-strong);
}
.gi-author__avatar svg { width: 40px; height: 40px; }

/* L'AVATAR EST UNE IMAGE SOUS DIVI, ET RIEN NE LE DISAIT ICI.

   La maquette y pose un <svg>, un sigle generique, et la feuille ne
   dimensionnait que lui. Sous Divi c'est un module Image : `.gi-author__avatar`
   contient un <img>, et souvent une enveloppe `.et_pb_image_wrap` entre les
   deux. Sans les trois regles qui suivent, l'image sort a sa taille naturelle
   au milieu d'un cercle de 84 px : soit minuscule, soit debordante et rognee
   n'importe comment.

   L'enveloppe est neutralisee plutot que masquee : elle doit rester dans le
   flux pour porter la taille, contrairement a `.gi-passthrough` qui, lui,
   efface son enveloppe. */
.gi-author__avatar .et_pb_image_wrap,
.gi-author__avatar picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gi-author__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.gi-author__body { display: grid; gap: 0.3rem; }
.gi-author__role {
  font-family: var(--gi-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gi-gold-500);
}
.gi-author__name {
  font-family: var(--gi-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps-md);
  color: var(--gi-sand-50);
}
.gi-author__bio {
  max-width: 40ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--gi-text-muted);
}
.gi-author__links {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.gi-author__links a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--gi-sand-400);
  box-shadow: inset 0 0 0 1px var(--gi-line-soft);
  transition: color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.gi-author__links a:hover {
  color: var(--gi-gold-300);
  background: rgba(198, 165, 93, 0.10);
  box-shadow: inset 0 0 0 1px var(--gi-line-strong);
}
.gi-author__links svg { width: 15px; height: 15px; }

/* ==========================================================================
   A4. CORPS DE L'ARCHIVE
   ========================================================================== */
.gi-arch-body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--gi-section-y);
  background:
    radial-gradient(55% 45% at 82% 8%, rgba(177, 137, 221, 0.06), transparent 68%),
    linear-gradient(180deg, var(--gi-ink-900), var(--gi-ink-950) 100%);
}
.gi-arch-body__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Barre au-dessus de la grille : intitule + filet.

   LE FILET EST UN PSEUDO-ELEMENT DU CONTENEUR, pas un element. Sur un
   conteneur flex en LIGNE, un pseudo-element est un enfant de flex de plein
   droit : il s'etire, il se place apres le libelle, et il se comporte
   exactement pareil sous Divi, ou aucun module vide n'aurait a exister pour
   le porter. Un element de moins des deux cotes. */
.gi-arch-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.gi-arch-bar::after {
  content: "";
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gi-line-strong), transparent 85%);
}
.gi-arch-bar__label {
  font-family: var(--gi-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gi-gold-400);
  white-space: nowrap;
}

/* --- La grille, uniforme. Douze cartes, quatre colonnes, rien de special
       sur la premiere : LA UNE A DEMENAGE DANS LE BANDEAU, et c'est ce qui a
       fait tomber d'un coup la mise en avant par `:first-child`, le
       redimensionnement au survol qu'elle provoquait, et le besoin d'un
       gabarit de carte a deux visages. --- */
.gi-arch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.gi-arch-grid > * { min-width: 0; }
.gi-arch-grid > li { display: flex; }   /* maquette seulement */

/* Le ruban « A la une » vit dans TOUTES les cartes, il ne s'affiche que sur
   celle du bandeau. Le laisser dans le gabarit ne coute qu'un module, et
   evite d'avoir deux gabarits de carte a entretenir. */
.gi-post__feat { display: none; }


/* ==========================================================================
   A5. PAGINATION
   --------------------------------------------------------------------------
   DEUX LIENS, PAS UNE SUITE DE NUMEROS. Le module de Divi est `post-nav`,
   constate dans un export reel : c'est une navigation precedent/suivant, avec
   des libelles personnalisables. La maquette a suivi le module plutot que
   l'inverse, un dessin qu'on ne sait pas produire ne servant a rien.

   LA FEUILLE VISE LES LIENS, PAS LEUR ENVELOPPE. Le balisage interne de
   `post-nav` n'a pas encore ete lu sur un rendu reel : `.gi-pagination a`
   habille ce qu'il produit, quel qu'il soit, et le groupe qui porte
   `.gi-pagination` donne le point d'accroche de la mise en page. A resserrer
   quand le DOM aura ete lu.
   ========================================================================== */
.gi-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--gi-line-soft);
}

/* AUCUN !important, ET AUCUNE COULEUR : TOUT CA EST NATIF DESORMAIS.

   Historique, parce qu'il vaut d'etre retenu. Les boutons sont sortis noirs
   sur noir. Premier essai, `.gi-pagination a`, (0,1,1) : echec. Deuxieme,
   classe doublee, (0,2,1) : echec. Troisieme, `!important` : ca passait, mais
   c'etait une victoire contre le mauvais adversaire.

   L'export du 30/07 a montre le vrai coupable : le module `post-nav` a un
   groupe de reglages `links.decoration.font`, et ce qu'on y met sort dans le
   CSS DE PAGE de Divi, en fin de body. On ne se battait pas contre un defaut
   de Divi, on se battait contre un reglage vide qu'on n'avait pas rempli.

   La couleur, le fond, le filet et le rayon sont donc poses DANS LE MODULE,
   par `gen_archive.py`. Ils gagnent sans forcer, et ils restent modifiables a
   la souris dans le Builder, ce qu'une regle enterree ici ne permettait pas.

   Ce qui reste a la feuille : ce que le module ne sait pas faire, c'est-a-dire
   la famille de police, l'interlettrage, les capitales, les espacements et le
   comportement au survol. */

.gi-pagination.gi-pagination a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  font-family: var(--gi-font-display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--t-fast), background-color var(--t-fast);
}

/* Le survol reste ici : le module n'expose pas d'etat de survol constate.
   Deux classes plus une pseudo-classe valent (0,3,1), au-dessus de ce que
   Divi ecrit pour l'etat au repos. */
.gi-pagination.gi-pagination a:hover {
  color: var(--gi-gold-200);
  background-color: rgba(198, 165, 93, 0.14);
}

/* PAS DE CHEVRONS, ET C'EST LA MESURE QUI A TRANCHE. La maquette en portait
   un par lien, retourne pour celui de gauche. Le module `post-nav` ne rend
   que deux libelles : les chevrons creusaient un ecart de 21 px, la largeur
   du glyphe plus son ecart. On ne dessine pas ce que le module ne sait pas
   produire, meme quand c'est joli. */

/* UN LIEN SANS LIBELLE NE DOIT PAS LAISSER UNE PASTILLE VIDE. Le module rend
   ses deux liens meme quand il n'y a pas de page suivante, et le libelle est
   alors vide : on obtenait un rectangle sombre qui n'annonce rien et qui ne
   mene nulle part. Meme famille de repli que l'etiquette vide en B10. */
.gi-pagination.gi-pagination a:empty,
.gi-pagination.gi-pagination a:has(> :only-child:empty) { display: none; }

/* Bout de liste. Divi rend probablement un seul lien plutot qu'un lien
   desactive : la regle sert la maquette, et ne genera pas si elle ne sert
   jamais. */
.gi-pagination a.is-disabled {
  color: var(--gi-sand-600);
  pointer-events: none;
  opacity: 0.45;
}

/* Un seul lien restant : il se centre au lieu de se coller a un bord. */
.gi-pagination:has(a:only-child) { justify-content: center; }

/* ==========================================================================
   A6. ARCHIVE VIDE
   --------------------------------------------------------------------------
   Divi ecrit « Aucun resultat trouve » a la place d'une boucle vide. Ce bloc
   est notre message a nous, et il se substitue au sien : masquer le sien ne
   suffit pas, une archive vide doit dire quelque chose.
   ========================================================================== */
.gi-arch-empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) var(--sp-5);
  text-align: center;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--gi-ink-850), var(--gi-ink-900));
  box-shadow: inset 0 0 0 1px var(--gi-line-soft);
}
.gi-arch-empty__star {
  width: 34px;
  height: 34px;
  background: var(--gi-gold-600);
  -webkit-mask: var(--gi-star) center / contain no-repeat;
          mask: var(--gi-star) center / contain no-repeat;
}
.gi-arch-empty__title {
  font-family: var(--gi-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps-md);
  color: var(--gi-sand-50);
}
.gi-arch-empty__desc {
  max-width: 46ch;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--gi-text-muted);
}
.gi-arch-empty .gi-btn { margin-top: var(--sp-3); }

/* ==========================================================================
   A7. RESPONSIVE
   --------------------------------------------------------------------------
   Les six paliers sont ceux de gi-accueil.css. Lire chaque bloc en entier.
   ========================================================================== */

/* --- 1280px : la grille passe a 3 colonnes, la vedette garde ses 2x2 --- */
@media (max-width: 1280px) {
  .gi-arch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 1080px : 2 colonnes. La vedette prend toute la largeur sur une seule
       rangee, sinon elle mangerait la moitie de la page a elle seule. --- */
@media (max-width: 1080px) {
  .gi-arch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 900px : l'en-tete passe en une colonne, le bloc redacteur repasse
       au-dessus du titre plutot qu'a cote --- */
/* --- 1080px : la une passe SOUS le titre, en pleine largeur. Elle garde sa
       forme couchee, qui lui va tres bien sur toute la largeur. --- */
@media (max-width: 1080px) {
  .gi-arch-head__inner { flex-direction: column; align-items: stretch; }
  .gi-arch-head__text { flex: none; width: 100%; }
  .gi-arch-head__inner > .gi-hero-post,
  .gi-arch-head__inner > .gi-author { flex: none; width: 100%; }
  .gi-author { order: -1; }
}

/* --- 760px : la une se redresse, l'image repasse au-dessus du texte --- */
@media (max-width: 760px) {
  .gi-hero-post.gi-hero-post,
  .gi-hero-post .gi-post__link { flex-direction: column; }
  .gi-hero-post .gi-post__thumb {
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .gi-hero-post .gi-post__body { padding: var(--sp-5); }
}

/* --- 760px : une seule colonne --- */
@media (max-width: 760px) {
  .gi-arch-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
  .gi-arch-bar { flex-wrap: wrap; gap: var(--sp-3); }
}

/* --- 620px : reglages fins mobile --- */
@media (max-width: 620px) {
  .gi-author {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }
  .gi-author__avatar { width: 64px; height: 64px; }
  .gi-author__avatar svg { width: 30px; height: 30px; }
  /* Les deux liens passent l'un sous l'autre plutot que de se serrer. */
  .gi-pagination { flex-direction: column; align-items: stretch; }
  .gi-pagination a { justify-content: center; }
}

/* --- 400px : tres petits ecrans --- */
@media (max-width: 400px) {
}

/* ==========================================================================
   A8. OUTIL DE MAQUETTE, A NE PAS PORTER
   --------------------------------------------------------------------------
   Le selecteur de cas n'existe que dans ce fichier de demonstration. Il ne
   fait partie ni du dessin, ni du portage.
   ========================================================================== */
.gi-demo {
  position: sticky;
  top: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.6rem var(--gi-gutter);
  background: #1B0F0F;
  box-shadow: inset 0 -1px 0 rgba(228, 105, 74, 0.45);
}
.gi-demo__label {
  margin-right: var(--sp-3);
  font-family: var(--gi-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #F5AE99;
}
.gi-demo button {
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  font-family: var(--gi-font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--gi-sand-300);
  background: rgba(241, 233, 218, 0.05);
  box-shadow: inset 0 0 0 1px rgba(241, 233, 218, 0.12);
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.gi-demo button:hover { color: var(--gi-sand-50); }
.gi-demo button[aria-pressed="true"] {
  color: var(--gi-ink-950);
  background: linear-gradient(160deg, var(--gi-gold-300), var(--gi-gold-500));
}

/* Chaque cas de figure ne montre que ses propres blocs */
[data-cas="categorie"] [data-cas-only]:not([data-cas-only~="categorie"]),
[data-cas="guides"]    [data-cas-only]:not([data-cas-only~="guides"]),
[data-cas="auteur"]    [data-cas-only]:not([data-cas-only~="auteur"]),
[data-cas="vide"]      [data-cas-only]:not([data-cas-only~="vide"]) { display: none !important; }