/* ==========================================================================
   GIFR - Design System / Tokens
   Fichier global, a charger sur TOUTES les pages du site.
   Divi 5.9 : coller dans un module Code global ou dans un CSS enfant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. PROPRIETES ENREGISTREES
   Declarer une variable via @property la rend animable. Sans cela un
   transition sur --lamp ne ferait rien et la lampe s'allumerait d'un coup.
   Les navigateurs qui ne connaissent pas @property degradent proprement :
   la lampe apparait sans fondu.
   -------------------------------------------------------------------------- */
@property --lamp {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {

  /* --- ENCRE : fonds sombres. Ancre = --gi-ink-900 #0D1620, HSL(212 42% 9%).
         Bleu nuit desature, jamais de noir pur. Toute l'echelle garde la
         meme teinte et perd de la saturation en montant, sinon les niveaux
         clairs virent au bleu criard. --- */
  --gi-ink-950: #080E14;
  --gi-ink-900: #0D1620;   /* fond principal du site */
  --gi-ink-850: #121D29;
  --gi-ink-800: #172533;
  --gi-ink-750: #1D2C3D;
  --gi-ink-700: #243547;
  --gi-ink-600: #314559;
  --gi-ink-500: #41576C;

  /* --- PAPIER : surfaces claires posees sur le sombre.
         Ancre = --gi-paper-100 #F1E5D1, HSL(38 53% 88%). --- */
  --gi-paper-50:  #F8F1E5;   /* haut du degrade de carte */
  --gi-paper-100: #F1E5D1;   /* surface de carte */
  --gi-paper-200: #E7D8C1;   /* bas du degrade de carte */
  --gi-paper-300: #D3C1A6;   /* filets et separateurs sur papier */

  /* Textes sur papier. Les deux premiers empruntent la teinte de l'encre
     pour que la carte reste rattachee au systeme sombre. */
  --gi-on-paper:        #16212D;   /* titres              13.1:1 */
  --gi-on-paper-body:   #3B4754;   /* texte courant        7.6:1 */
  --gi-on-paper-muted:  #6E6353;   /* metadonnees          4.7:1 */
  --gi-on-paper-accent: #815622;   /* liens, bronze        5.1:1 */

  /* --- SABLE : textes sur fond sombre. Meme famille que le papier :
         le beige est tantot une surface, tantot une couleur de texte. --- */
  --gi-sand-50:  #F8F4EC;   /* titres              16.6:1 */
  --gi-sand-100: #F1E9DA;   /* texte courant       15.1:1 */
  --gi-sand-200: #E2D5C1;
  --gi-sand-300: #CCBCA4;   /* secondaire           9.8:1 */
  --gi-sand-400: #AD9F8A;   /* attenue              7.0:1 */
  --gi-sand-500: #8A7D6A;   /* discret              4.5:1 */
  --gi-sand-600: #655D53;   /* mentions legales */

  /* --- OR : accent unique. Legerement rechauffe (teinte 41 au lieu de 40)
         pour compenser le fond desormais plus bleu et plus sature. --- */
  --gi-gold-200: #F6E9CB;
  --gi-gold-300: #ECD8AC;   /* sur sombre          13.0:1 */
  --gi-gold-400: #DBC084;   /* sur sombre          10.3:1 */
  --gi-gold-500: #C6A55D;   /* sur sombre           7.8:1 */
  --gi-gold-600: #A4813D;
  --gi-gold-700: #735A2B;
  --gi-gold-800: #4A391C;

  /* --- Roles semantiques --- */
  --gi-bg:            var(--gi-ink-900);
  --gi-bg-elevated:   var(--gi-ink-850);
  --gi-bg-card:       var(--gi-ink-800);
  --gi-bg-card-hover: var(--gi-ink-750);

  --gi-text:        var(--gi-sand-100);
  --gi-text-strong: var(--gi-sand-50);
  --gi-text-muted:  var(--gi-sand-400);
  --gi-text-faint:  var(--gi-sand-500);
  --gi-accent:      var(--gi-gold-500);
  --gi-accent-soft: var(--gi-gold-400);

  --gi-line:        rgba(198, 165, 93, 0.20);
  --gi-line-strong: rgba(198, 165, 93, 0.42);
  --gi-line-soft:   rgba(241, 233, 218, 0.09);

  /* --- Elements de Teyvat (utilises pour les vignettes et les tags) --- */
  --el-anemo:   #74C6AC;
  --el-geo:     #E5B13A;
  --el-electro: #B189DD;
  --el-dendro:  #8FC93A;
  --el-hydro:   #4FA6E3;
  --el-pyro:    #E4694A;
  --el-cryo:    #93D4E8;

  /* --- Typographie --- */
  --gi-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --gi-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Les titres de cartes et de guides sont des phrases : ils restent en
     Inter. Cinzel n'a que des capitales, elle etoufferait une phrase. */
  --gi-font-title:   var(--gi-font-body);

  /* Echelle du texte courant et de l'interface (Inter).
     Fluide entre mobile et desktop, puis le pas global de la racine
     prend le relais au-dela de 1600 px (voir section 2). */
  --fs-xs:   0.75rem;                                  /* 12 */
  --fs-sm:   0.8125rem;                                /* 13 */
  --fs-base: 0.9375rem;                                /* 15 */
  --fs-md:   1rem;                                     /* 16 */
  --fs-lg:   clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);

  /* Titres en INTER : phrases, donc graisse 600 et interlettrage
     resserre pour compenser la largeur de la sans. */
  --fs-t-sm:  1.06rem;                                     /* titre de carte   */
  --fs-t-md:  clamp(1.10rem, 1.03rem + 0.28vw, 1.30rem);   /* titre de guide   */

  /* Titres en CINZEL : capitales, donc plus petits a impact egal et
     legerement espaces. Sans interlettrage, des capitales se collent. */
  --fs-t-lg:  clamp(1.50rem, 1.18rem + 1.40vw, 2.35rem);   /* titre de section */
  --fs-t-xl:  clamp(1.85rem, 1.15rem + 2.70vw, 3.25rem);   /* titre de hero    */
  --fs-t-2xl: clamp(2.20rem, 1.40rem + 3.60vw, 4.20rem);   /* grand titre      */

  --ls-caps-lg: 0.028em;   /* capitales de grande taille */
  --ls-caps-md: 0.05em;    /* capitales moyennes         */

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-base:  1.65;

  --ls-wide:   0.06em;
  --ls-wider:  0.14em;
  --ls-widest: 0.26em;

  /* --- Espacements --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5.5rem;
  --sp-11: 7rem;

  --gi-section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --gi-container: 1280px;
  --gi-container-wide: 1760px;   /* les grands ecrans respirent jusque la */
  --gi-measure: 68ch;            /* longueur de ligne de confort en lecture */
  --gi-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* --- Rayons --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- Ombres --- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 10px 26px -10px rgba(0, 0, 0, 0.65);
  --sh-3: 0 26px 60px -22px rgba(0, 0, 0, 0.85);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glow-gold: 0 0 24px -6px rgba(198, 165, 93, 0.55);
  --glow-gold-strong: 0 0 38px -4px rgba(219, 192, 132, 0.70);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 620ms;

  /* --- Bruit procedural, base du grain. Un seul motif, reutilise a
         plusieurs echelles via background-size. La matrice de couleur
         desature ET force l'alpha a 1 : on obtient un gris opaque dont
         seule la luminosite varie, ce qui est exactement ce qu'il faut
         pour un fondu overlay ou soft-light. --- */
  --gi-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* --- Etoile a quatre branches, servie en masque pour les titres --- */
  --gi-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.8c.6 4.3 1.6 6.9 3.4 8.6 1.7 1.7 4.3 2.7 8.6 3.3v.6c-4.3.6-6.9 1.6-8.6 3.3-1.8 1.7-2.8 4.3-3.4 8.6h-.6c-.6-4.3-1.6-6.9-3.3-8.6-1.7-1.7-4.3-2.7-8.6-3.3v-.6c4.3-.6 6.9-1.6 8.6-3.3C9.8 8.7 10.8 6.1 11.4 1.8z'/%3E%3C/svg%3E");

  /* --- Couches --- */
  --z-bg: 0;
  --z-content: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
}

/* --------------------------------------------------------------------------
   2. RESET MINIMAL
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--gi-gold-700) var(--gi-ink-900);

  /* PAS GLOBAL DES GRANDS ECRANS
     Jusqu'a 1600 px la racine vaut la taille par defaut du navigateur.
     Entre 1600 et 1920 elle monte progressivement jusqu'a +8 %, puis se
     bloque. Comme toute l'echelle (--fs-*, --sp-*, rayons) est en rem,
     un seul reglage fait grandir texte ET espacements de facon coherente.
     Le pourcentage plutot que des pixels preserve le reglage de taille
     de police choisi par la personne dans son navigateur. */
  font-size: clamp(100%, calc(60% + 0.4vw), 108%);
}

body {
  margin: 0;
  background-color: var(--gi-ink-900);
  color: var(--gi-text);
  font-family: var(--gi-font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: var(--lh-snug); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gi-gold-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: rgba(198, 165, 93, 0.32); color: var(--gi-sand-50); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gi-ink-950); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gi-gold-700), var(--gi-gold-800));
  border-radius: var(--r-pill);
  border: 2px solid var(--gi-ink-950);
}
::-webkit-scrollbar-thumb:hover { background: var(--gi-gold-600); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE UTILITAIRE
   -------------------------------------------------------------------------- */
.gi-display {
  font-family: var(--gi-font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  color: var(--gi-text-strong);
}

/* Titre de contenu : Inter en 600, resserre. C'est ce qui porte les
   titres d'articles, de guides et de fiches. */
.gi-title {
  font-family: var(--gi-font-title);
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--gi-text-strong);
}

/* Petit intitule dore au-dessus des titres de section */
.gi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--gi-font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gi-gold-400);
}
.gi-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gi-gold-500));
}

.gi-lead {
  font-size: var(--fs-lg);
  color: var(--gi-text-muted);
  line-height: 1.6;
}

.gi-muted { color: var(--gi-text-muted); }
.gi-faint { color: var(--gi-text-faint); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.gi-container {
  width: 100%;
  max-width: var(--gi-container);
  margin-inline: auto;
  padding-inline: var(--gi-gutter);
}

.gi-container--wide { max-width: var(--gi-container-wide); }

/* Garde-fou de longueur de ligne : au-dela de 75 caracteres la lecture
   decroche. A poser sur tout paragraphe de texte suivi. */
.gi-measure { max-width: var(--gi-measure); }

.gi-section { position: relative; padding-block: var(--gi-section-y); }

.gi-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
  flex-wrap: wrap;
}

/* Petite etoile doree devant les titres de section. Posee en
   pseudo-element plutot qu'en markup : elle suit automatiquement tout
   nouveau titre, y compris ceux generes par Divi. Le masque permet de
   la teinter avec une variable au lieu de figer la couleur dans le SVG. */
.gi-section-head__title::before {
  content: "";
  display: inline-block;
  width: 0.58em;
  height: 0.58em;
  margin-right: 0.44em;
  vertical-align: 0.04em;
  background-color: var(--gi-gold-400);
  -webkit-mask: var(--gi-star) center / contain no-repeat;
  mask: var(--gi-star) center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(198, 165, 93, 0.6));
}

.gi-section-head__title {
  font-family: var(--gi-font-display);
  font-size: var(--fs-t-lg);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: var(--ls-caps-lg);
  color: var(--gi-text-strong);
  margin-top: var(--sp-3);
}

/* Filet dore qui prolonge un titre de section vers la droite */
.gi-titleline {
  position: relative;
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gi-line-strong), transparent 85%);
}
.gi-titleline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--gi-gold-500);
  box-shadow: 0 0 10px rgba(198, 165, 93, 0.7);
}

/* Separateur ornemental losange */
.gi-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  color: var(--gi-gold-600);
}
.gi-divider::before,
.gi-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--gi-line-strong), transparent);
}
.gi-divider__gem {
  width: 9px;
  height: 9px;
  rotate: 45deg;
  background: var(--gi-gold-500);
  box-shadow: 0 0 12px rgba(198, 165, 93, 0.8);
}

/* --------------------------------------------------------------------------
   5. TEXTURE : GRAIN + VIGNETAGE
   Deux classes a poser sur n'importe quel conteneur en position:relative.
   -------------------------------------------------------------------------- */

/* Grain procedural en SVG inline : zero requete reseau, ~1 ko.

   Deux couches de la MEME texture a deux echelles differentes :
   une fine qui donne la fibre, une large qui donne la marbrure de ton.
   Une seule frequence produit une neige de televiseur, pas du papier.
   Le bruit est rendu opaque (alpha force a 1 par la matrice de couleur)
   pour que le fondu overlay module le contraste sans assombrir la surface. */
.gi-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.13);
  mix-blend-mode: var(--grain-blend, overlay);
  background-image: var(--gi-noise), var(--gi-noise);
  background-size:
    var(--grain-fine, 150px) var(--grain-fine, 150px),
    var(--grain-coarse, 760px) var(--grain-coarse, 760px);
  background-blend-mode: soft-light;
}

.gi-grain--strong::before { --grain-opacity: 0.22; }
.gi-grain--subtle::before { --grain-opacity: 0.07; }

/* Vignetage : assombrit les bords, donne de la profondeur.
   Deux gradients superposes, un radial large et un lineaire vertical :
   le radial seul dessine un cercle trop lisible sur les sections larges. */
.gi-vignette::after,
.gi-vignette--soft::after,
.gi-vignette--deep::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.gi-vignette::after {
  background:
    radial-gradient(120% 90% at 50% 35%,
      transparent 38%, rgba(4, 8, 13, 0.50) 86%, rgba(4, 8, 13, 0.86) 100%),
    linear-gradient(180deg,
      rgba(4, 8, 13, 0.28) 0%, transparent 18%, transparent 82%, rgba(4, 8, 13, 0.34) 100%);
}

.gi-vignette--soft::after {
  background:
    radial-gradient(135% 105% at 50% 42%,
      transparent 52%, rgba(4, 8, 13, 0.34) 90%, rgba(4, 8, 13, 0.60) 100%),
    linear-gradient(180deg,
      rgba(4, 8, 13, 0.20) 0%, transparent 16%, transparent 84%, rgba(4, 8, 13, 0.24) 100%);
}

.gi-vignette--deep::after {
  background:
    radial-gradient(110% 85% at 50% 32%,
      transparent 28%, rgba(3, 6, 10, 0.62) 82%, rgba(3, 6, 10, 0.94) 100%),
    linear-gradient(180deg,
      rgba(3, 6, 10, 0.40) 0%, transparent 20%, transparent 78%, rgba(3, 6, 10, 0.48) 100%);
}

/* Le contenu doit passer AU-DESSUS du grain et du vignetage, sinon le texte
   se salit sur les bords des sections. */
.gi-section > .gi-container,
.gi-vignette > .gi-container,
.gi-vignette--soft > .gi-container,
.gi-vignette--deep > .gi-container { position: relative; z-index: 4; }

/* Voile bleu nuit par-dessus une image de fond */
.gi-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13, 22, 32, 0.30) 0%,
    rgba(13, 22, 32, 0.55) 55%,
    rgba(13, 22, 32, 0.96) 100%);
}

/* Fond de section : degrade nuit + halo dore diffus */
.gi-bg-night {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(198, 165, 93, 0.10), transparent 62%),
    linear-gradient(180deg, var(--gi-ink-900) 0%, var(--gi-ink-850) 45%, var(--gi-ink-900) 100%);
}

.gi-bg-deep {
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(79, 166, 227, 0.07), transparent 60%),
    linear-gradient(180deg, var(--gi-ink-950) 0%, var(--gi-ink-900) 100%);
}

/* --------------------------------------------------------------------------
   6. BOUTONS
   Objectif : qu'ils ressortent vraiment. Coins coupes facon UI Genshin,
   liseres clairs, lueur doree, balayage lumineux au survol.
   -------------------------------------------------------------------------- */
.gi-btn {
  --btn-cut: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.88rem 1.65rem;
  font-family: var(--gi-font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
  clip-path: polygon(
    var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)),
    calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut)
  );
}

.gi-btn__ico { width: 18px; height: 18px; flex: none; }

/* Balayage lumineux */
.gi-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  translate: -120% 0;
  transition: translate var(--t-slow) var(--ease-out);
}
.gi-btn:hover::after { translate: 120% 0; }

/* --- Primaire : or plein --- */
.gi-btn--primary {
  color: var(--gi-ink-950);
  background: linear-gradient(160deg, var(--gi-gold-300) 0%, var(--gi-gold-500) 52%, var(--gi-gold-600) 100%);
  box-shadow:
    var(--sh-inset-top),
    0 2px 0 rgba(74, 57, 28, 0.9),
    0 14px 30px -12px rgba(198, 165, 93, 0.65),
    0 0 0 1px rgba(246, 233, 203, 0.35);
  text-shadow: 0 1px 0 rgba(246, 233, 203, 0.45);
}
.gi-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--sh-inset-top),
    0 4px 0 rgba(74, 57, 28, 0.9),
    0 22px 46px -14px rgba(219, 192, 132, 0.85),
    0 0 0 1px rgba(246, 233, 203, 0.6);
}
.gi-btn--primary:active { transform: translateY(-1px); }

/* --- Secondaire : contour dore sur verre sombre --- */
.gi-btn--ghost {
  color: var(--gi-sand-100);
  background: rgba(23, 37, 51, 0.62);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px var(--gi-line-strong),
    var(--sh-inset-top),
    0 12px 28px -14px rgba(0, 0, 0, 0.9);
}
.gi-btn--ghost:hover {
  transform: translateY(-3px);
  color: var(--gi-gold-200);
  background: rgba(36, 53, 71, 0.78);
  box-shadow:
    inset 0 0 0 1px var(--gi-gold-500),
    var(--sh-inset-top),
    0 18px 38px -16px rgba(0, 0, 0, 0.95),
    var(--glow-gold);
}
.gi-btn--ghost:active { transform: translateY(-1px); }

/* --- Tertiaire : lien flechee --- */
.gi-btn--link {
  --btn-cut: 0px;
  padding: 0.35rem 0;
  color: var(--gi-gold-400);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
}
.gi-btn--link::after { display: none; }
.gi-btn--link .gi-btn__ico { transition: translate var(--t-base) var(--ease-out); }
.gi-btn--link:hover { color: var(--gi-gold-200); }
.gi-btn--link:hover .gi-btn__ico { translate: 4px 0; }

/* --- Tailles --- */
.gi-btn--lg { padding: 1.1rem 2.4rem; font-size: var(--fs-base); --btn-cut: 14px; }
.gi-btn--sm { padding: 0.62rem 1.15rem; font-size: var(--fs-xs); --btn-cut: 8px; }

/* --------------------------------------------------------------------------
   7. CARTES ET SURFACES
   -------------------------------------------------------------------------- */
.gi-card {
  position: relative;
  border-radius: var(--r-lg);
  background-color: var(--gi-ink-850);
  /* La premiere couche est une lampe qui suit le curseur : gi-hover.js
     ecrit --mx et --my sur la carte survolee, --lamp passe de 0 a 1.
     Zero repaint de layout, uniquement une variable de gradient. */
  background-image:
    radial-gradient(260px 260px at var(--mx, 50%) var(--my, 50%),
      rgba(198, 165, 93, calc(0.16 * var(--lamp, 0))), transparent 68%),
    linear-gradient(165deg, var(--gi-ink-800) 0%, var(--gi-ink-850) 100%);
  box-shadow:
    inset 0 0 0 1px var(--gi-line-soft),
    var(--sh-2);
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    --lamp var(--t-base) linear;
}

.gi-card--hover:hover {
  transform: translateY(-7px);
  box-shadow:
    inset 0 0 0 1px var(--gi-line-strong),
    var(--sh-3),
    var(--glow-gold);
}

/* Les vignettes n'ont plus de filigrane runique : elles sont destinees a
   recevoir de vraies illustrations, une rune par-dessus ferait doublon.
   Le mouvement au survol est porte par le halo interne de .gi-thumb. */
.gi-card--hover:hover .gi-thumb::before { scale: 1.14; opacity: 0.82; }

/* Filet dore qui se dessine en haut de la carte au survol.
   Volontairement sur ::after et non ::before : ::before est reserve au
   grain de .gi-grain, et les deux classes cohabitent sur la meme carte. */
.gi-card--hover::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 6;
  background: linear-gradient(90deg, transparent, var(--gi-gold-400), transparent);
  scale: 0 1;
  transition: scale var(--t-slow) var(--ease-out);
}
.gi-card--hover:hover::after { scale: 1 1; }

/* Contenu au-dessus du grain de la carte, pour garder les glyphes nets */
.gi-card > * { position: relative; z-index: 3; }

/* --------------------------------------------------------------------------
   7 quater. NUAGE DE PARTICULES AU SURVOL
   gi-hover.js pose .gi-fx-host sur le conteneur de la carte et y insere un
   canvas qui deborde volontairement des quatre cotes. La carte reste
   au-dessus : les particules ne se voient que dans le debordement, ce qui
   donne l'impression qu'elles s'echappent de derriere elle.
   Le canvas est cree au survol et detruit apres extinction.
   -------------------------------------------------------------------------- */
.gi-fx-host { position: relative; }
.gi-fx-host > .gi-card { position: relative; z-index: 1; }
.gi-fx {
  position: absolute;
  inset: -96px -62px -22px;
  z-index: 0;
  width: auto;
  height: auto;
  pointer-events: none;
}

/* Grain des cartes sombres : discret, juste de quoi casser l'aplat */
.gi-card.gi-grain::before { --grain-opacity: 0.16; --grain-coarse: 620px; }

/* --------------------------------------------------------------------------
   7 bis. CARTE PAPIER
   Surface parchemin claire posee sur le fond sombre. Sert aux contenus
   editoriaux (actualites, guides) : le contraste beige sur nuit est la
   signature visuelle du site.
   -------------------------------------------------------------------------- */
.gi-card--paper {
  color: var(--gi-on-paper-body);
  background-color: var(--gi-paper-100);
  /* De haut en bas : brunissure des bords (papier vieilli), voile chaud
     diffus, puis le degrade de base. Les deux premieres couches font le
     travail que ferait une texture photographique, sans image. */
  background-image:
    radial-gradient(300px 300px at var(--mx, 50%) var(--my, 50%),
      rgba(255, 250, 232, calc(0.55 * var(--lamp, 0))), transparent 66%),
    radial-gradient(125% 115% at 50% 38%,
      transparent 44%, rgba(129, 86, 34, 0.10) 82%, rgba(112, 74, 28, 0.19) 100%),
    radial-gradient(85% 60% at 22% 12%, rgba(255, 252, 242, 0.75), transparent 62%),
    linear-gradient(172deg, var(--gi-paper-50) 0%, var(--gi-paper-200) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(129, 86, 34, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    var(--sh-2);
}

/* Grain du papier : nettement plus present que sur le sombre.
   La fibre est un peu plus grosse (170px) et la marbrure plus large
   (900px) pour qu'on lise du papier et non un bruit numerique. */
.gi-card--paper.gi-grain::before {
  --grain-opacity: 0.42;
  --grain-fine: 170px;
  --grain-coarse: 900px;
  --grain-blend: overlay;
}

/* Le contenu passe au-dessus du grain : la texture reste visible partout
   sur le beige, mais les glyphes restent nets. */
.gi-card--paper > * { position: relative; z-index: 3; }

.gi-card--paper.gi-card--hover:hover {
  box-shadow:
    inset 0 0 0 1px var(--gi-gold-500),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    var(--sh-3),
    var(--glow-gold);
}
.gi-card--paper.gi-card--hover::after {
  background: linear-gradient(90deg, transparent, var(--gi-gold-600), transparent);
}

/* --------------------------------------------------------------------------
   7 ter. ORNEMENTS D'ANGLE
   Quatre equerres dorees posees aux coins d'un conteneur.
   Markup : <span class="gi-corners" aria-hidden="true">4 x svg use #i-corner</span>
   -------------------------------------------------------------------------- */
.gi-corners {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  color: var(--gi-gold-600);
}
.gi-corners svg {
  position: absolute;
  width: var(--corner-size, 42px);
  height: var(--corner-size, 42px);
  opacity: 0.85;
}
.gi-corners svg:nth-child(1) { top: 0; left: 0; }
.gi-corners svg:nth-child(2) { top: 0; right: 0; rotate: 90deg; }
.gi-corners svg:nth-child(3) { bottom: 0; right: 0; rotate: 180deg; }
.gi-corners svg:nth-child(4) { bottom: 0; left: 0; rotate: 270deg; }
.gi-corners--sm { --corner-size: 24px; }
.gi-corners--lg { --corner-size: 62px; }

/* Verre sombre, pour les surfaces posees sur une image */
.gi-glass {
  background: rgba(14, 20, 30, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 0 0 1px var(--gi-line-soft), var(--sh-2);
}

/* --------------------------------------------------------------------------
   8. ETIQUETTES
   -------------------------------------------------------------------------- */
.gi-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-xs);
  font-family: var(--gi-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: rgba(198, 165, 93, 0.14);
  color: var(--gi-gold-300);
  box-shadow: inset 0 0 0 1px rgba(198, 165, 93, 0.32);
  backdrop-filter: blur(6px);
}
.gi-tag--maj    { background: rgba(79, 166, 227, 0.16); color: #A7D5F2; box-shadow: inset 0 0 0 1px rgba(79, 166, 227, 0.38); }
.gi-tag--event  { background: rgba(143, 201, 58, 0.15); color: #C4E58A; box-shadow: inset 0 0 0 1px rgba(143, 201, 58, 0.36); }
.gi-tag--guide  { background: rgba(177, 137, 221, 0.16); color: #D8C2F0; box-shadow: inset 0 0 0 1px rgba(177, 137, 221, 0.38); }
.gi-tag--live   { background: rgba(228, 105, 74, 0.16); color: #F5AE99; box-shadow: inset 0 0 0 1px rgba(228, 105, 74, 0.40); }

.gi-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--gi-text-faint);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   9. VIGNETTES GENERATIVES
   Placeholders elegants en attendant les vrais visuels.
   Remplacer .gi-thumb par une <img> lors du portage Divi.
   -------------------------------------------------------------------------- */
.gi-thumb {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--gi-ink-700), var(--gi-ink-950));
  isolation: isolate;
}
/* Vraie image (module Blog ou shortcode WordPress). Les z-index sont
   explicites : sans cela l'image se glisserait au-dessus du voile ::after
   et perdrait son degrade de lisibilite. */
.gi-thumb img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--t-slow) var(--ease-out);
}
.gi-card--hover:hover .gi-thumb img { scale: 1.06; }

.gi-thumb::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -20%;
  background:
    radial-gradient(45% 45% at 28% 26%, var(--thumb-a, var(--el-hydro)), transparent 68%),
    radial-gradient(50% 50% at 76% 70%, var(--thumb-b, var(--el-electro)), transparent 70%);
  opacity: 0.72;
  filter: blur(10px) saturate(135%);
  transition: scale var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.gi-thumb::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(250, 246, 236, 0.05) 0 1px, transparent 1px 9px),
    radial-gradient(80% 70% at 50% 40%, transparent 40%, rgba(8, 14, 20, 0.45) 100%),
    linear-gradient(180deg, transparent 42%, rgba(8, 14, 20, 0.80) 100%);
}
.gi-card--hover:hover .gi-thumb::before { scale: 1.12; opacity: 0.75; }

/* Couples de couleurs par element */
.thumb-anemo   { --thumb-a: var(--el-anemo);   --thumb-b: var(--el-hydro); }
.thumb-geo     { --thumb-a: var(--el-geo);     --thumb-b: var(--el-pyro); }
.thumb-electro { --thumb-a: var(--el-electro); --thumb-b: var(--el-hydro); }
.thumb-dendro  { --thumb-a: var(--el-dendro);  --thumb-b: var(--el-anemo); }
.thumb-hydro   { --thumb-a: var(--el-hydro);   --thumb-b: var(--el-cryo); }
.thumb-pyro    { --thumb-a: var(--el-pyro);    --thumb-b: var(--el-geo); }
.thumb-cryo    { --thumb-a: var(--el-cryo);    --thumb-b: var(--el-electro); }

/* --------------------------------------------------------------------------
   10. ANIMATIONS D'ENTREE (pilotees par gi-ui.js)
   -------------------------------------------------------------------------- */
/* Le masquage n'est applique QUE si le script a pu poser .gi-js sur
   <html>. Sans cette garde, un blocage du JS rendrait toute la page
   invisible : c'est le mode de panne le plus grave d'une animation
   d'apparition, et le plus frequent en production. */
.gi-js .gi-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.gi-js .gi-reveal.is-visible { opacity: 1; transform: none; }

@keyframes gi-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes gi-pulse-glow {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes gi-spin-slow {
  to { rotate: 360deg; }
}

/* --------------------------------------------------------------------------
   11. ACCESSIBILITE
   -------------------------------------------------------------------------- */
/* Les ancres ne doivent pas passer sous l'en-tete collant */
[id] { scroll-margin-top: 96px; }

.gi-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gi-skip-link {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -120%;
  z-index: var(--z-modal);
  padding: 0.75rem 1.5rem;
  background: var(--gi-gold-500);
  color: var(--gi-ink-950);
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: translate var(--t-base) var(--ease-out);
}
.gi-skip-link:focus { translate: -50% 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .gi-js .gi-reveal { opacity: 1; transform: none; }
}