/* ===========================================================================
   SEAVEN — habillage du site public (barre, hero, rail, pied).
   Depend de seaven.css, charge avant lui.

   Parti pris de mise en page : rien n'est centre par defaut. Le contenu
   s'appuie sur une colonne de gauche, et un rail de droite porte l'etat du
   serveur. Cette asymetrie est ce qui distingue la page d'une succession
   de blocs centres.
   =========================================================================== */

/* ------------------------------------------------------------------ BARRE */
.barre{
  position: sticky;
  top: 0;
  z-index: 60;
  /* En haut de page, la barre n'existe pas : ni fond, ni flou, ni filet.
     Meme un degrade qui s'eteint laissait une lisiere visible — et le flou
     d'arriere-plan en dessinait une seconde, la ou la zone floutee s'arrete.
     Les liens restent lisibles grace au voile du hero, qui commence juste
     dessous. Elle ne reprend un fond qu'une fois defilee, quand il passe
     vraiment du contenu derriere. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .32s, border-color .32s, backdrop-filter .32s;
}
/* Une fois defilee, la barre reprend corps : elle doit alors vraiment
   separer, puisqu'il passe du contenu dessous. */
.barre.collee{
  background: linear-gradient(180deg,
              rgba(8, 15, 10, .96),
              rgba(8, 15, 10, .92));
  border-bottom-color: var(--trait);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* La barre traverse tout l'ecran, sans conteneur centre : elle se lit comme
   une couche posee au-dessus de la page plutot que comme une bande alignee
   sur le contenu. C'est ce que permet le fond en degrade qui s'eteint vers
   le bas — sans bord franc, l'alignement avec le contenu ne se voit pas. */
.barre .enveloppe{ max-width: none; }

/* Trois zones : marque a gauche, menu VRAIMENT centre, actions a droite.
   En flex avec `margin-left:auto` sur le menu, le centrage dependait de la
   longueur des deux blocs voisins — le menu derivait des qu'on ajoutait un
   lien. Avec 1fr auto 1fr, il est centre sur l'ecran, point. */
.barre__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.barre .marque{ justify-self: start; }

.marque{
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  color: var(--texte);
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.03em;
}
.marque:hover{ color: var(--texte); }
.marque img{ width: 32px; height: 32px; object-fit: contain; }
.marque span{ color: var(--accent); }

.menu{
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 4px;
}
.menu a{
  position: relative;
  /* Un libelle de menu ne se coupe jamais en deux lignes : entre 980 et
     1200 px, la colonne centrale devient juste trop etroite et « Le serveur »
     passait a la ligne, ce qui deformait toute la barre. */
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: var(--r-petit);
  color: var(--doux);
  font-size: .92rem;
  font-weight: 500;
  transition: color .22s, background .22s;
}
.menu a:hover{ color: var(--texte); background: var(--fond); }
.menu a.actif{ color: var(--texte); }
/* Le trait sous l'onglet actif marque la position, sans deplacer le texte. */
.menu a.actif::after{
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.barre__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 14px;
}

/* Le lien de compte n'est pas un bouton : deux pilules cote a cote se
   disputent l'attention, et c'est « Rejoindre » qui doit gagner. */
.lien-compte{
  padding: 8px 2px;
  color: var(--doux);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .22s;
}
.lien-compte:hover{ color: var(--texte); }

/* Reprise des actions au bas du panneau mobile. Invisible en desktop, ou
   les boutons de .barre__actions sont deja la. */
.menu__separateur,
.menu__actions{ display: none; }


.hamburger{
  display: none;
  place-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  cursor: pointer;
}
.hamburger i{
  display: block; width: 17px; height: 1.5px;
  background: var(--texte);
  transition: transform .3s var(--ease), opacity .2s;
}
.hamburger[aria-expanded="true"] i:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] i:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] i:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------------- HERO
   Deux colonnes inegales : le discours a gauche, l'etat du serveur a
   droite. La colonne de droite n'est pas decorative, elle porte l'IP et
   les chiffres, c'est-a-dire ce que le visiteur vient chercher. */
.hero{
  position: relative;
  padding-block: clamp(70px, 12vh, 130px) clamp(76px, 13vh, 140px);
  overflow: hidden;
  /* Voile sombre en haut de page : il assoit la barre collante et donne au
     hero un point de depart. Il reste translucide, le fond anime continue
     de vivre au travers. */
  background: linear-gradient(180deg,
              rgba(8, 15, 10, .84),
              rgba(8, 15, 10, .30) 46%,
              transparent 78%);
}

/* Le trait de fin va d'un bord de l'ecran a l'autre, en s'eteignant aux
   extremites. C'est lui, plus que la largeur du conteneur, qui empeche le
   hero de flotter comme une boite posee au milieu du noir. */
.hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, var(--trait) 16%, var(--trait) 84%, transparent);
}

/* Source de lumiere. Volontairement peu saturee : un halo franchement vert
   ajoute au fond anime lave toute la page (on l'avait deja constate). */
.hero__lueur{
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -32%;
  width: min(1600px, 138vw);
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(126, 240, 178, .10),
              rgba(94, 224, 138, .035) 42%,
              transparent 70%);
}

.hero__grille{
  /* Au-dessus de la lueur, qui est positionnee et la recouvrirait sinon. */
  position: relative;
  z-index: 1;
  display: grid;
  /* Colonnes presque egales : le logo extrude a besoin de place pour tourner
     sans sortir du cadre. L'ancien rapport 1.35/.85 servait la carte d'etat,
     qui est descendue en bandeau. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* Scene 3D du logo. Le canvas est place en absolu et dimensionne par le
   CSS : Three.js recoit setSize(..., false), donc il ne touche pas au style
   et se contente d'ajuster la resolution interne. Sans cette regle, le
   canvas s'afficherait a la taille de son tampon, soit 1,5 fois trop grand. */
.logo3d{
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(56vh, 500px);
}
.logo3d canvas{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.logo3d__repli{
  width: min(62%, 290px);
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .55));
}
/* La scene est en place : l'image de repli n'a plus lieu d'etre. */
.logo3d--actif .logo3d__repli{ display: none; }

@media (max-width: 900px){
  /* Sans WebGL le bloc n'affiche qu'une image fixe : lui garder la hauteur
     prevue pour une scene qui tourne creuse un trou dans la page. */
  .logo3d{ min-height: 0; margin-top: 8px; }
  .logo3d__repli{ width: min(44%, 200px); }
}

.hero h1{
  margin-bottom: 26px;
  line-height: .94;
  letter-spacing: -.035em;
}
/* Le titre reste d'une seule couleur. L'accent est reserve a l'action :
   un titre bicolore fait crier la marque, il ne la rend pas desirable. */
.hero h1 em{ font-style: normal; color: inherit; }
.hero__texte{ color: var(--doux); font-size: 1.08rem; max-width: 52ch; }

/* Bandeau de statut. Le tiret + majuscules + interlettrage + accent du
   surtitre precedent est la signature la plus reconnaissable du design
   genere automatiquement ; ici le bandeau dit quelque chose de vrai. */
.statut{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 7px 16px 7px 13px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--doux);
  font-size: .84rem;
  line-height: 1;
}
.statut b{
  color: var(--texte);
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.statut__point{
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--eteint);
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Le halo du hero est retire : le fond anime (assets/css/fond.css) porte
   desormais cette profondeur, et les deux superposes saturaient le vert
   en haut de page. */

/* ------------------------------------------------------------------- RAIL */
.rail{
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  padding: 26px;
}

/* Bandeau d'etat, sous le hero. Quatre cellules de meme poids separees par
   un filet : trois chiffres, puis l'adresse. La version d'avant alignait les
   chiffres a gauche et l'adresse a droite avec `space-between` — le milieu
   restait vide et les deux groupes flottaient chacun dans leur coin. Une
   grille repartit vraiment la largeur. */
.bandeau{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  margin-top: clamp(24px, 4vh, 48px);
  /* Surface un cran plus lisible que les blocs editoriaux : ce bandeau porte
     une action (copier l'adresse), il doit se donner comme un objet. */
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  overflow: hidden;   /* les filets des cellules s'arretent aux angles arrondis */
}
.bandeau__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

/* Une cellule = un filet a gauche, sauf la premiere. Le filet vit sur la
   cellule et non sur un separateur dedie : rien a ajouter au balisage, et
   il disparait tout seul quand la grille s'empile. */
.bandeau .stat,
.bandeau__adresse{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 26px);
}
.bandeau .stat + .stat,
.bandeau__adresse{ border-left: 1px solid var(--trait); }

/* Le nombre au-dessus de son libelle, sans toucher a l'ordre du document. */
.bandeau .stat{ flex-direction: column-reverse; }
.bandeau .stat dt{
  color: var(--eteint);
  font-size: .75rem;
  letter-spacing: .03em;
}
.bandeau .stat dd{
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

/* La cellule d'adresse porte un intitule, comme les chiffres portent le
   leur : sans lui, la boite de l'IP flottait sans rien pour l'annoncer. */
.bandeau__intitule{
  color: var(--eteint);
  font-size: .75rem;
  letter-spacing: .03em;
}
.bandeau__adresse .ip{ margin-top: 2px; }
.bandeau__note{
  margin: 0;
  color: var(--eteint);
  font-size: .78rem;
  line-height: 1.5;
}

@media (max-width: 900px){
  /* Empile : deux colonnes de chiffres puis l'adresse en pleine largeur.
     Les filets verticaux deviennent horizontaux, sinon ils separeraient des
     cellules qui ne sont plus cote a cote. */
  .bandeau{ grid-template-columns: 1fr; }
  .bandeau__adresse{ border-left: 0; border-top: 1px solid var(--trait); }
}
@media (max-width: 560px){
  .bandeau__stats{ grid-template-columns: 1fr; }
  .bandeau .stat + .stat{ border-left: 0; border-top: 1px solid var(--trait); }
}
.rail__ligne{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rail__ligne:last-of-type{ border-bottom: 0; }
.rail__ligne dt{ color: var(--doux); font-size: .88rem; }
.rail__ligne dd{
  margin: 0;
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

/* Boite IP : le texte est selectionnable, le bouton copie. */
.ip{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 11px 11px 15px;
  background: var(--encre-haut);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
}
.ip code{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: .92rem;
  user-select: all;
}

/* --------------------------------------------------------------- ETAPES
   Le numero est une vraie information : ces trois etapes se font dans
   l'ordre. Ailleurs sur le site, rien n'est numerote. */
.etapes{ display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: e; }
.etape{
  position: relative;
  padding: clamp(22px, 2.6vw, 28px) clamp(22px, 2.6vw, 28px) clamp(22px, 2.6vw, 28px) 30px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  transition: background .32s, border-color .32s;
}
.etape:hover{
  background: rgba(255, 255, 255, .042);
  border-color: var(--trait);
}
/* Barre d'accent a gauche plutot qu'une pastille : elle relie visuellement
   les trois etapes en une sequence. */
.etape::after{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent 85%);
}
.etape::before{
  counter-increment: e;
  content: counter(e, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--accent);
}
.etape h3{ margin-bottom: 8px; }
.etape p{ color: var(--doux); font-size: .93rem; }

/* -------------------------------------------------------------- JOURNAL
   Les patchnotes forment une chronologie : le rail vertical le dit. */
.journal{ position: relative; padding-left: 28px; }
.journal::before{
  content: "";
  position: absolute;
  left: 4px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), rgba(94,224,138,.04));
}
.note{ position: relative; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.note:last-child{ border-bottom: 0; }
.note::before{
  content: "";
  position: absolute;
  left: -28px; top: 27px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--encre);
  border: 2px solid var(--accent);
}
.note time{ font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; color: var(--accent); }
.note h3{ margin: 7px 0 8px; font-size: 1.05rem; }
.note p, .note li{ color: var(--doux); font-size: .93rem; }

/* -------------------------------------------------------------- PLIANTS
   Reglement et FAQ. On utilise <details> natif : il fonctionne sans
   script et reste accessible au clavier. */
.pliant{
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  overflow: hidden;
  transition: border-color .3s;
}
.pliant + .pliant{ margin-top: 9px; }
.pliant[open]{ border-color: var(--trait-vif); }
.pliant summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: .97rem;
  color: var(--texte);
}
.pliant summary::-webkit-details-marker{ display: none; }
.pliant summary::after{
  content: "+";
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform .3s var(--ease);
}
.pliant[open] summary::after{ transform: rotate(135deg); }
.pliant__corps{ padding: 0 20px 19px; color: var(--doux); font-size: .93rem; line-height: 1.72; }
.pliant__corps > *:first-child{ margin-top: 0; }

/* ------------------------------------------------------------- BOUTIQUE */
.packs{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pack{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  transition: border-color .3s, transform .4s var(--ease);
}
.pack:hover{ border-color: var(--trait-vif); transform: translateY(-3px); }
/* Le pack mis en avant est plus dense, pas seulement colore. */
.pack--phare{ border-color: var(--trait-vif); background: var(--panneau-haut); }
.pack__ruban{
  position: absolute; top: -1px; right: 20px;
  padding: 4px 11px;
  border-radius: 0 0 var(--r-petit) var(--r-petit);
  background: var(--accent); color: var(--encre);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
}
.pack__coins{
  font-family: var(--mono);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--texte);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.pack__bonus{ color: var(--accent); font-size: .84rem; font-family: var(--mono); margin-top: 2px; }
.pack__desc{ color: var(--doux); font-size: .89rem; margin: 12px 0 20px; flex: 1; }
.pack__prix{
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- GALERIE */
.galerie{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.galerie a{
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-moyen);
  border: 1px solid var(--trait);
  overflow: hidden;
  background: var(--panneau);
}
.galerie img{ width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.galerie a:hover img{ transform: scale(1.05); }

/* -------------------------------------------------------------------- PIED */
.pied{ border-top: 1px solid var(--trait); padding-block: 48px 30px; margin-top: 40px; }
.pied__haut{
  display: grid;
  gap: 36px;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: 34px;
  border-bottom: 1px solid var(--trait);
}
.pied h4{
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 15px;
}
.pied ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied ul a{ color: var(--doux); font-size: .89rem; }
.pied ul a:hover{ color: var(--texte); }
.pied__bas{
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between; align-items: center;
  padding-top: 22px;
  color: var(--eteint); font-size: .82rem;
}


/* ---------------------------------------------------------- BANDE DE JEU
   Un ruban de captures qui traverse toute la largeur, entre deux sections.
   Il montre le serveur au lieu de le decrire, et casse la succession de
   blocs de texte sans ajouter une section de plus. */
.bande{
  position: relative;
  overflow: hidden;
  padding-block: clamp(26px, 4vh, 44px);
  /* Les bords s'eteignent au lieu d'etre tranches net : sans ce masque, le
     ruban se termine sur une coupure franche au milieu d'une image. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bande__piste{
  display: flex;
  width: max-content;
  animation: bandeDefile 52s linear infinite;
}
/* On s'arrete quand le visiteur survole : une image qui file est penible a
   regarder des qu'on veut vraiment la voir. */
.bande:hover .bande__piste{ animation-play-state: paused; }

.bande__piste img{
  height: clamp(148px, 16vw, 226px);
  width: auto;
  /* L'ecart passe par une marge et non par `gap` : avec `gap`, la piste
     mesure 16 images + 15 ecarts, dont la moitie ne tombe pas exactement
     sur une serie — et la boucle saute a chaque tour. */
  margin-right: 16px;
  border-radius: var(--r-moyen);
  border: 1px solid var(--trait);
  object-fit: cover;
  /* Les captures brutes sont plus vives que la charte : on les calme un peu
     au repos pour qu'elles ne volent pas la vedette au texte. */
  opacity: .88;
  transition: opacity .32s;
}
.bande:hover .bande__piste img{ opacity: 1; }

@keyframes bandeDefile{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce){
  /* Plus de defilement : le ruban devient une rangee qu'on fait glisser. */
  .bande{ overflow-x: auto; }
  .bande__piste{ animation: none; }
}

@media (max-width: 700px){
  /* Vignettes plus basses et defilement plus lent : sur un ecran etroit,
     la meme vitesse donne l'impression que tout file. */
  .bande__piste img{ height: 128px; margin-right: 11px; }
  .bande__piste{ animation-duration: 38s; }
}

/* -------------------------------------------------------------- RESPONSIVE */
/* Desktop etroit : la barre garde ses trois zones, mais elle se resserre.
   Le menu compte six entrees plus deux actions ; sans ce palier, la colonne
   du milieu manque d'une trentaine de pixels et le dernier libelle casse. */
@media (max-width: 1200px){
  .barre__inner{ gap: 16px; }
  .menu{ gap: 0; }
  .menu a{ padding: 8px 9px; font-size: .88rem; }
  .menu a.actif::after{ left: 9px; right: 9px; }
}

@media (max-width: 980px){
  .hero__grille{ grid-template-columns: 1fr; gap: 34px; }
  .menu{
    position: fixed;
    top: 68px; left: 12px; right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px;
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: var(--r-grand);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    display: none;
  }
  .menu.ouvert{ display: flex; animation: menuIn .35s var(--ease) both; }
  @keyframes menuIn{ from{ opacity:0; transform: translateY(-12px); } to{ opacity:1; transform:none; } }
  .menu a{ padding: 13px; font-size: 1rem; }
  .menu a.actif::after{ left: 13px; right: auto; bottom: auto; top: 50%; width: 3px; height: 16px; transform: translateY(-50%); }
  .hamburger{ display: grid; }
  /* Les boutons quittent la barre, faute de place — mais ils reapparaissent
     au bas du panneau deroulant, sinon le telephone perd l'acces au compte. */
  .barre__actions .btn,
  .barre__actions .lien-compte{ display: none; }
  .menu__separateur{
    display: block;
    height: 1px;
    margin: 8px 4px;
    background: var(--trait);
  }
  .menu__actions{
    display: grid;
    gap: 8px;
    padding: 2px 4px 2px;
  }
  .menu__actions .btn{ justify-content: center; width: 100%; }
}
@media (max-width: 640px){
  .barre__inner{ height: 60px; gap: 12px; }
  .menu{ top: 60px; }
  .hero{ padding-block: 40px 56px; }
  .pied__haut{ grid-template-columns: 1fr; gap: 26px; }
  .galerie{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------- VISIONNEUSE
   Ouverte au clic sur une vignette. Sans script, les liens pointent
   directement sur l'image pleine : la galerie reste utilisable. */
.visionneuse{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(6, 10, 8, .94);
  animation: vsEntree .25s var(--ease) both;
}
.visionneuse[hidden]{ display: none; }
@keyframes vsEntree{ from{ opacity: 0; } to{ opacity: 1; } }

.visionneuse__cadre{
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.visionneuse__cadre img{
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--r-moyen);
  border: 1px solid var(--trait);
  object-fit: contain;
}
.visionneuse__cadre figcaption{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--eteint);
  text-align: center;
}

.visionneuse button{
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 50%;
  color: var(--texte);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.visionneuse button:hover{
  background: rgba(94,224,138,.14);
  border-color: var(--trait-vif);
  transform: scale(1.06);
}
.visionneuse__fermer{
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  z-index: 2;
}

@media (max-width: 640px){
  .visionneuse{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    justify-items: center;
  }
  .visionneuse__cadre{ grid-row: 1; }
  .visionneuse__prec{ grid-row: 2; justify-self: start; }
  .visionneuse__suiv{ grid-row: 2; justify-self: end; }
  .visionneuse__cadre img{ max-height: 66vh; }
}

/* Variantes utilisees dans le pied de page. */
.marque--pied{ margin-bottom: var(--e2); }
.ip--pied{ max-width: 300px; }