/* =============================================================================
   VALKYRIA — socle commun a toutes les pages du domaine
   www.valkyria.fr, /boutique, /blog, /changelog, /vote.

   Une seule feuille pour la charte : couleurs, polices, barre haute, pied de
   page, boutons, modules. Les pages n'ajoutent que ce qui leur est propre.
   Toute couleur passe par une variable : c'est la seule facon de retoucher la
   charte sans ouvrir sept fichiers.

   Le site assume UN SEUL theme, sombre. Ce n'est pas un oubli : un serveur
   Minecraft se regarde de nuit, et le logo est fait de glace sur fond noir.
   Chaque fond est donc peint explicitement, jamais herite.
   ========================================================================== */

@import url("/css/polices.css");

:root{
  /* --- fonds, du plus creux au plus en relief --- */
  --abysse:#06080b;
  --nuit:#0b0d12;
  --basalte:#12151c;
  --acier:#191d26;
  --fer:#262c39;
  --fer-clair:#333b4b;

  /* --- textes --- */
  --brume:#8b93a3;
  --cendre:#a7afbd;
  --givre:#cdd5e0;
  --blanc:#eef2f7;

  /* --- glace : la couleur du logo, donc l'accent du site --- */
  --glace-200:#d4ebfa;
  --glace-300:#a9d6f1;
  --glace-400:#7fc1ea;
  --glace-500:#5aa9dc;
  --glace-600:#3d87b8;

  /* --- aurore : ce qui est vivant, en ligne, reussi --- */
  --aurore-300:#a6e6c3;
  --aurore-400:#7bd3a2;
  --aurore-500:#57bd86;
  --aurore-600:#3f9a6a;

  /* --- ambre : ce qui est rare, un record, une alerte douce --- */
  --ambre-300:#f5c98d;
  --ambre-400:#f0a35e;
  --ambre-600:#b86c25;

  /* --- violet : reserve au palier Valkyrie de la boutique --- */
  --or:#b9a3ee;
  --or-2:#7850d6;
  --or-reflet:#e6dcff;

  /* --- marques exterieures --- */
  --discord:#5865f2;
  --youtube:#ff0033;
  --tiktok:#25f4ee;

  /* --- polices --- */
  --f-titre:"Archivo",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* --- mesures --- */
  --largeur:1240px;
  --gouttiere:clamp(18px,4vw,36px);
  --pas:clamp(52px,7vw,88px);
  --rayon:14px;
  --rayon-s:10px;
  --barre:66px;          /* hauteur de la barre haute */
}

/* Archivo est variable en graisse ET en chasse. Les titres prennent une chasse
   legerement elargie : c'est ce qui leur donne l'assise d'un titre de jeu
   plutot que d'un article de presse. */
.titre-jeu,h1,h2,h3,.marque-mot,.chiffre b{
  font-family:var(--f-titre);
  font-variation-settings:"wdth" 112;
  font-weight:800;
  letter-spacing:.004em;
  text-wrap:balance;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barre) + 16px)}
body{
  background:var(--nuit);
  color:var(--givre);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  /* Colonne verticale : c'est ce qui pousse le pied de page en bas de l'ecran
     sur une page courte. Sans ca, une page sans contenu affiche son pied au
     milieu du vide, ce qui la fait passer pour cassee. */
  min-height:100svh;
  display:flex;flex-direction:column;
}
main{flex:1 0 auto}
/* La boutique enveloppe tout dans .page : la colonne doit descendre d'un cran. */
.page{display:flex;flex-direction:column;flex:1 0 auto}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;border:none;background:none;color:inherit;cursor:pointer}
::selection{background:rgba(90,169,220,.32);color:var(--blanc)}
:focus-visible{outline:2px solid var(--glace-400);outline-offset:3px;border-radius:6px}

/* padding-inline et non le raccourci padding : une section qui pose ensuite son
   rythme vertical avec « padding » effacerait la gouttiere au passage, et le
   bloc se collerait au bord de l'ecran. Deja paye une fois. */
.wrap{
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:var(--gouttiere);
}
.wrap-large{max-width:1440px}

/* Passe-plat pour les lecteurs d'ecran : le lien d'evitement en haut de page. */
.saut{
  position:fixed;left:0;top:0;z-index:100;
  transform:translateY(-200%);
  background:var(--glace-400);color:var(--abysse);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;
}
.saut:focus{transform:none}

/* =========================================================================
   1. CIEL — le fond commun de toutes les pages
   ========================================================================= */
/* Deux couches fixes derriere le contenu : un voile colore tres compresse qui
   rechauffe le noir, et une neige lente. Cout total : un kilo-octet d'image. */
.ciel{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--nuit)}
.ciel::before{
  content:"";position:absolute;inset:0;
  background:url(/img/voile.webp) center/cover no-repeat;
  opacity:.18;filter:saturate(.8);
}
.ciel::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% -8%,rgba(90,169,220,.12),transparent 62%),
    radial-gradient(90% 60% at 50% 108%,rgba(6,8,11,.9),transparent 60%);
}
.neige{
  position:fixed;inset:-10% 0 0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px,rgba(238,242,247,.55) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 220px 180px,rgba(212,235,250,.45) 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 380px 90px,rgba(238,242,247,.4) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 520px 260px,rgba(169,214,241,.4) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 110px 320px,rgba(238,242,247,.35) 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 300px 420px,rgba(238,242,247,.3) 50%,transparent 51%);
  background-size:620px 480px;
  animation:tomber 46s linear infinite;
}
@keyframes tomber{to{background-position:-70px 480px}}

/* =========================================================================
   2. BARRE HAUTE — identique sur toutes les pages
   ========================================================================= */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(6,8,11,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(38,44,57,.75);
}
/* La barre gagne son fond plein des qu'on a quitte le haut de page : au-dessus
   du heros elle doit rester transparente pour ne pas couper l'image. */
.topbar.pose{background:rgba(6,8,11,.94);box-shadow:0 10px 30px -18px rgba(0,0,0,.9)}
.topbar-in{
  display:flex;align-items:center;gap:14px;
  min-height:var(--barre);
}
.marque{display:flex;align-items:center;gap:11px;flex:none}
.marque img{width:34px;height:34px;filter:drop-shadow(0 2px 8px rgba(90,169,220,.35))}
.marque-mot{
  font-size:19px;letter-spacing:.13em;color:var(--blanc);
  text-transform:uppercase;line-height:1;
}
.liens{
  display:flex;align-items:center;gap:2px;
  margin-inline:auto;
}
.liens a{
  position:relative;
  padding:9px 14px;border-radius:9px;
  font-size:14.5px;font-weight:500;color:var(--cendre);
  transition:color .16s,background .16s;white-space:nowrap;
}
.liens a:hover{color:var(--blanc);background:rgba(25,29,38,.9)}
.liens a.actif{color:var(--blanc)}
.liens a.actif::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--glace-400),transparent);
  box-shadow:0 0 10px rgba(127,193,234,.75);
}
.actions{display:flex;align-items:center;gap:9px;flex:none}

/* Le bouton hamburger n'existe qu'en dessous de 980 px. */
.burger{
  display:none;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--fer);color:var(--givre);
  align-items:center;justify-content:center;
}
.burger:hover{border-color:var(--fer-clair);background:var(--acier)}

/* La deuxieme barre : les rayons de la boutique, les rubriques d'une section.
   Fond plus sombre et texte plus petit, sinon les deux barres empilees se
   lisent comme une seule, trop haute. */
.sous-barre{
  border-top:1px solid rgba(38,44,57,.5);
  background:rgba(6,8,11,.4);
}
.sous-barre-in{display:flex;align-items:center;gap:3px;min-height:46px;flex-wrap:wrap}
/* Sur un telephone, la barre des rayons passe sur deux lignes et double sa
   hauteur. Elle defile lateralement plutot que de s'empiler. */
@media (max-width:700px){
  .sous-barre-in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .sous-barre-in::-webkit-scrollbar{display:none}
  .sous-barre a{white-space:nowrap;flex:none}
}
.sous-barre a{
  padding:6px 12px;border-radius:8px;
  font-size:13.5px;color:var(--brume);transition:color .16s,background .16s;
}
.sous-barre a:hover{color:var(--blanc);background:var(--acier)}
.sous-barre a.actif{color:var(--glace-300);background:rgba(90,169,220,.1)}
.sous-barre .droite{margin-left:auto}

/* =========================================================================
   3. BOUTONS
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border-radius:11px;
  font-size:14.5px;font-weight:600;line-height:1.2;
  border:1px solid transparent;
  transition:transform .16s,filter .18s,border-color .18s,background .18s,color .18s;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-glace{
  background:linear-gradient(180deg,var(--glace-300),var(--glace-500));
  color:#052033;
  box-shadow:0 8px 22px -12px rgba(90,169,220,.9);
}
.btn-glace:hover{filter:brightness(1.06);box-shadow:0 12px 26px -12px rgba(90,169,220,1)}
.btn-contour{border-color:var(--fer);color:var(--givre);background:rgba(18,21,28,.6)}
.btn-contour:hover{border-color:var(--glace-600);color:var(--blanc);background:rgba(25,29,38,.9)}
.btn-discord{background:var(--discord);color:#fff;box-shadow:0 8px 22px -12px rgba(88,101,242,.9)}
.btn-discord:hover{filter:brightness(1.08)}
.btn-petit{padding:8px 13px;font-size:13px;border-radius:9px}
.btn-large{width:100%}

/* =========================================================================
   4. TITRES DE SECTION
   ========================================================================= */
.oeil{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--glace-400);
}
.oeil::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--glace-500));
}
h1{font-size:clamp(34px,5.4vw,60px);line-height:1.02;color:var(--blanc);text-transform:uppercase}
h2{font-size:clamp(24px,3.2vw,34px);line-height:1.1;color:var(--blanc);text-transform:uppercase}
h3{font-size:19px;line-height:1.25;color:var(--blanc)}
.chapeau{margin-top:12px;max-width:62ch;color:var(--cendre)}
.entete-section{margin-bottom:clamp(22px,3vw,34px)}
.entete-section h2{margin-top:10px}
/* Le trait sous le titre : court, glace, il sert de reperage vertical d'un
   module a l'autre. C'est le seul ornement repete du site. */
.trait{
  width:44px;height:3px;border-radius:3px;margin-top:14px;
  background:linear-gradient(90deg,var(--glace-400),rgba(90,169,220,.15));
}

section.bloc{padding-block:var(--pas)}

/* =========================================================================
   5. MODULES (les cartes de la colonne de droite, et ailleurs)
   ========================================================================= */
.module{
  background:linear-gradient(180deg,rgba(25,29,38,.82),rgba(18,21,28,.9));
  border:1px solid rgba(38,44,57,.9);
  border-radius:var(--rayon);
  padding:20px;
}
.module + .module{margin-top:18px}
.module-titre{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--f-titre);font-variation-settings:"wdth" 108;font-weight:700;
  font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--blanc);
}
.module-titre .plus{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  color:var(--brume);text-transform:none;
}
.module-titre .plus:hover{color:var(--glace-300)}
.module .trait{margin:10px 0 16px}

/* --- chiffres --- */
/* Trois tuiles dans une colonne de 340 px : chaque libellé tient sur deux
   lignes au plus, sinon les tuiles n'ont plus la même hauteur et la rangée
   part de travers. */
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chiffre{
  background:rgba(6,8,11,.66);border:1px solid rgba(38,44,57,.8);
  border-radius:var(--rayon-s);padding:14px 6px;text-align:center;
}
.chiffre b{
  display:block;font-size:26px;line-height:1;color:var(--glace-300);
  font-variant-numeric:tabular-nums;
}
/* Une valeur qui n'est pas un nombre (« 1.21.11 ») est plus longue : à la même
   taille elle touche les bords de sa tuile. */
.chiffre.mot b{font-size:18px;letter-spacing:-.01em}
.chiffre.record b{color:var(--ambre-300)}
.chiffre.vivant b{color:var(--aurore-300)}
.chiffre span{
  display:block;margin-top:7px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brume);line-height:1.3;
}

/* --- reseaux --- */
.reseau-discord{
  display:flex;align-items:center;gap:13px;
  background:linear-gradient(120deg,#5865f2,#4752d4);
  border-radius:var(--rayon-s);padding:14px 16px;color:#fff;
  transition:filter .18s,transform .18s;
}
.reseau-discord:hover{filter:brightness(1.08);transform:translateY(-2px)}
.reseau-discord svg{flex:none;width:30px;height:30px}
.reseau-discord b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.reseau-discord span{font-size:12.5px;opacity:.85}
.reseaux{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.reseau{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--rayon-s);padding:15px 8px;color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  transition:filter .18s,transform .18s;
}
.reseau:hover{filter:brightness(1.1);transform:translateY(-2px)}
.reseau svg{width:22px;height:22px}
.reseau.yt{background:linear-gradient(140deg,#ff2d3f,#c9000f)}
.reseau.tk{background:linear-gradient(140deg,#25f4ee 0%,#151519 45%,#fe2c55 100%)}
.reseau.bt{background:linear-gradient(140deg,var(--glace-500),var(--glace-600));color:#04202f}
.reseau.eteint{
  background:rgba(6,8,11,.6);border:1px dashed var(--fer);color:var(--brume);
  cursor:default;
}
.reseau.eteint:hover{filter:none;transform:none}
.reseau.eteint small{font-size:10px;font-weight:400;opacity:.8}

/* --- liste de classement --- */
.rang{
  display:flex;align-items:center;gap:11px;
  padding-block:9px;
}
.rang + .rang{border-top:1px solid rgba(38,44,57,.55)}
.rang .pos{
  flex:none;width:22px;text-align:center;
  font-family:var(--f-mono);font-size:12.5px;font-weight:600;color:var(--brume);
}
.rang:nth-child(1) .pos{color:var(--ambre-300)}
.rang:nth-child(2) .pos{color:var(--givre)}
.rang:nth-child(3) .pos{color:var(--ambre-600)}
.rang img{
  flex:none;width:28px;height:28px;border-radius:6px;
  image-rendering:pixelated;background:var(--acier);border:1px solid var(--fer);
}
.rang .qui{flex:1;min-width:0;font-size:14px;color:var(--givre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rang .combien{
  font-family:var(--f-mono);font-size:12.5px;color:var(--glace-300);
  font-variant-numeric:tabular-nums;
}
.vide{
  padding:16px 4px;text-align:center;
  font-size:13px;color:var(--brume);
}
/* Un fil d'actualités vide laisse sinon une colonne de gauche haute de trois
   lignes en face d'une colonne de droite haute de six cents pixels. Le cadre
   occupe la place que les articles prendront. */
.fil-vide{
  display:grid;place-items:center;gap:14px;text-align:center;
  min-height:300px;padding:44px 24px;
  border:1px dashed rgba(38,44,57,.95);border-radius:var(--rayon);
  background:rgba(18,21,28,.35);
}
.fil-vide img{width:104px;height:auto;opacity:.3}
.fil-vide p{color:var(--brume);font-size:14px;max-width:34ch}

/* =========================================================================
   6. CARTES D'ARTICLE
   ========================================================================= */
.fil{display:flex;flex-direction:column;gap:20px}
.article-carte{
  display:block;overflow:hidden;
  background:linear-gradient(180deg,rgba(25,29,38,.8),rgba(18,21,28,.92));
  border:1px solid rgba(38,44,57,.9);border-radius:var(--rayon);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.article-carte:hover{
  border-color:var(--fer-clair);transform:translateY(-3px);
  box-shadow:0 28px 50px -30px rgba(0,0,0,.9);
}
.article-image{
  position:relative;aspect-ratio:21/9;overflow:hidden;
  background:linear-gradient(140deg,var(--acier),var(--abysse));
}
.article-image img{width:100%;height:100%;object-fit:cover}
.article-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,8,11,.75) 100%);
}
.article-image .etiquette{
  position:absolute;left:14px;top:14px;z-index:2;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(6,8,11,.78);border:1px solid rgba(127,193,234,.4);
  color:var(--glace-300);border-radius:999px;padding:4px 11px;
  backdrop-filter:blur(6px);
}
.article-corps{padding:20px}
.article-corps h3{font-size:clamp(19px,2.3vw,25px);text-transform:uppercase}
.article-carte:hover h3{color:var(--glace-200)}
.article-corps p{margin-top:10px;color:var(--cendre);font-size:14.5px}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.jeton{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(6,8,11,.62);border:1px solid rgba(38,44,57,.85);
  border-radius:8px;padding:5px 10px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--brume);
}
.jeton svg{width:13px;height:13px;color:var(--glace-500)}
.lire{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:13.5px;font-weight:600;color:var(--glace-300);
}
.lire svg{transition:transform .18s}
.article-carte:hover .lire svg{transform:translateX(4px)}

/* --- piliers : une rangee de cartes courtes, titre et phrase --- */
/* Partages entre l'accueil (« Deux jeux dans un seul monde ») et la boutique
   (« Comment ca marche ») : le composant vit ici, pas dans la feuille d'une
   seule page. Le nombre de colonnes suit le nombre de cartes. */
.piliers{
  display:grid;gap:16px;margin-top:34px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.piliers.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Quatre colonnes se divisent en deux, puis en une. Un auto-fit tomberait sur
   « trois plus une » aux largeurs moyennes, et la derniere s'etirerait seule. */
@media (max-width:1040px){.piliers,.piliers.trois{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.piliers,.piliers.trois{grid-template-columns:minmax(0,1fr)}}
.pilier{
  padding:24px 22px;border-radius:var(--rayon);
  background:linear-gradient(180deg,rgba(25,29,38,.7),rgba(18,21,28,.88));
  border:1px solid rgba(38,44,57,.9);
  transition:border-color .2s,transform .2s;
}
.pilier:hover{border-color:var(--fer-clair);transform:translateY(-3px)}
.pilier .rond{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(90,169,220,.12);border:1px solid rgba(90,169,220,.28);
  color:var(--glace-300);margin-bottom:15px;
}
.pilier h3{font-size:15px;letter-spacing:.07em;text-transform:uppercase}
.pilier p{margin-top:9px;font-size:14px;color:var(--cendre)}


/* =========================================================================
   7. PIED DE PAGE
   ========================================================================= */
.pied{
  margin-top:var(--pas);
  border-top:1px solid rgba(38,44,57,.7);
  background:rgba(6,8,11,.55);
  padding-block:clamp(34px,5vw,52px) 26px;
}
.pied-grille{
  display:grid;gap:32px;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
}
.pied-marque .marque{margin-bottom:14px}
.pied-marque p{color:var(--brume);font-size:14px;max-width:38ch}
.pied-sociaux{display:flex;gap:9px;margin-top:16px}
.pied-sociaux a{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--fer);color:var(--cendre);
  transition:color .18s,border-color .18s,background .18s;
}
.pied-sociaux a:hover{color:var(--blanc);border-color:var(--glace-600);background:var(--acier)}
.pied-col h4{
  font-family:var(--f-titre);font-variation-settings:"wdth" 106;font-weight:700;
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blanc);
  margin-bottom:13px;
}
.pied-col a{display:block;padding-block:5px;font-size:14px;color:var(--brume);transition:color .16s}
.pied-col a:hover{color:var(--glace-300)}
.pied-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin-top:clamp(28px,4vw,44px);padding-top:20px;
  border-top:1px solid rgba(38,44,57,.55);
  font-family:var(--f-mono);font-size:11.5px;color:var(--brume);
}
.pied-bas .mentions{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center}
/* Les liens legaux se distinguent de la phrase qui les suit. */
.pied-bas .mentions a{color:var(--cendre)}
.pied-bas a:hover{color:var(--givre)}

/* Bouton d'adresse du pied de page */
.pied-ip{
  display:inline-flex;align-items:center;gap:8px;margin-top:5px;
  font-family:var(--f-mono);font-size:13px;color:var(--glace-300);
  border:1px dashed var(--fer);border-radius:8px;padding:6px 11px;
  transition:border-color .18s,color .18s;
}
.pied-ip:hover{border-color:var(--glace-600);color:var(--glace-200)}
.pied-ip.copie{border-style:solid;border-color:var(--aurore-500);color:var(--aurore-300)}


/* =========================================================================
   8. APPARITIONS AU DEFILEMENT
   ========================================================================= */
/* La regle ne s'applique QUE si <html> porte la classe « anime », posee par un
   script en tete de page. Sans JavaScript, sans ce script, ou si le script
   echoue, rien n'est masque : la page entiere reste lisible. Un contenu cache
   en attendant un observateur est un contenu qu'on peut perdre. */
.anime .monte{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
}
.anime .monte.vu{opacity:1;transform:none}

/* Message flottant (copie d'adresse, confirmation) */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  z-index:100;opacity:0;pointer-events:none;
  font-family:var(--f-mono);font-size:12.5px;color:var(--givre);
  background:var(--acier);border:1px solid var(--fer);border-radius:11px;
  padding:11px 17px;box-shadow:0 18px 44px -12px rgba(0,0,0,.85);
  transition:opacity .25s,transform .25s;
  max-width:min(88vw,420px);text-align:center;
}
.toast.vu{opacity:1;transform:translate(-50%,0)}

/* =========================================================================
   9. ADAPTATION AUX PETITS ECRANS
   ========================================================================= */
@media (max-width:1080px){
  .pied-grille{grid-template-columns:1fr 1fr}
  .pied-marque{grid-column:1 / -1}
}
@media (max-width:979px){
  .burger{display:flex}
  /* Le menu quitte le flux et se deplie sous la barre. position:fixed et non
     absolute : la barre est collante, un menu absolu la suivrait en defilant
     et se retrouverait a mi-page. */
  .liens{
    position:fixed;left:0;right:0;top:var(--barre);
    flex-direction:column;align-items:stretch;gap:2px;
    margin:0;padding:12px var(--gouttiere) 18px;
    background:rgba(6,8,11,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--fer);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;
    max-height:calc(100svh - var(--barre));overflow-y:auto;
  }
  .liens.ouvert{transform:none;opacity:1;pointer-events:auto}
  .liens a{padding:12px 14px;font-size:16px}
  .liens a.actif::after{left:14px;right:auto;width:18px}
  .actions{margin-left:auto}
  .actions .cacher-petit{display:none}
}
@media (max-width:600px){
  .pied-grille{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr 1fr}
  .marque-mot{font-size:17px;letter-spacing:.1em}
}

/* =========================================================================
   10. MOUVEMENT REDUIT
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .anime .monte{opacity:1;transform:none}
}