/* Shadow Forge — feuille de style commune à toutes les pages.
   Extraite de la maquette d accueil : dix pages ne peuvent pas
   embarquer chacune leur copie. */
/* ============================================================
   SHADOW FORGE — direction « forge »
   Métal en fusion contre acier froid. L'or est de la CHALEUR,
   pas de la décoration : il n'apparaît que sur les prix, un seul
   CTA, et ce qui est vivant. Tout le reste est en acier.
   ============================================================ */

:root{
  --forge:    #0B0B0C;   /* noir de forge */
  --steel:    #16181B;   /* acier froid — surfaces */
  --steel-2:  #1D2023;   /* acier, un cran plus haut */
  --brushed:  #2A2E33;   /* acier brossé — bordures */
  --gold:     #D4AF37;   /* l'or, conservé de la marque */
  --molten:   #FF6B1A;   /* métal en fusion — vivant seulement */
  --bone:     #E8E6E3;   /* blanc d'os — texte */
  --bone-dim: #8B8D91;   /* texte secondaire */

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Le métal est coupé, pas arrondi. Un seul rayon, minuscule. */
  --r: 2px;

  /* Hauteurs des barres fixes du haut. Elles servent à calculer celle du
     héros pour que le second bandeau affleure le bas de l'écran. */
  --h-ticker: 37px;
  --h-nav:    66px;
  --h-strip:  41px;

  /* Largeur du visuel du héros. Une seule source : l'image ET l'arête
     néon s'en servent, donc elles ne peuvent pas se désaligner. */
  --art-w: min(52vw, 900px);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;background:var(--forge)}

body{
  background:transparent;
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================ visuel de fond « graffiti »
   Couche fixe, sous tout le contenu, visible d'un bout à l'autre du site.
   Coups de brosse déchirés, éclaboussures, projections de bombe et
   coulures — le tout vectoriel, donc net sur n'importe quel écran.
   Elle est fixe et non défilante : le contenu passe DEVANT le mur, comme
   sur une façade. Un fond qui défile avec le texte redevient un motif. */
.backdrop{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background:
    /* Halos chauds : ils donnent une profondeur que le plat n'a pas. */
    radial-gradient(58vw 46vw at 78% 12%, rgba(212,175,55,.055), transparent 62%),
    radial-gradient(46vw 40vw at 12% 64%, rgba(255,107,26,.035), transparent 66%),
    url('img/backdrop.svg') center/cover no-repeat;
}

/* Texture : grain fin + stries d'usinage horizontales.
   Presque invisible, mais elle enlève le « plat » du aplat noir. */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:.16;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:.35;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(255,255,255,.012) 3px 4px
  );
}

/* ---------------------------------------------------- typographie */
.display{
  font-family:var(--display);
  font-weight:900;
  font-stretch:112%;
  text-transform:uppercase;
  letter-spacing:-.022em;
  line-height:.92;
}
.mono{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  font-weight:500;
}

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

:focus-visible{
  outline:2px solid var(--molten);
  outline-offset:3px;
}

/* Conteneur large : 1240 px laissaient 330 px de vide de chaque côté sur
   un écran de 1900. On se rapproche du bord, comme les boutiques du
   secteur, tout en gardant un retrait franc. Les longueurs de ligne
   restent maîtrisées par les max-width posées sur les paragraphes. */
.wrap{
  max-width:1680px;
  margin-inline:auto;
  padding-inline:clamp(20px, 3.4vw, 56px);
}

/* ================================================ barre du haut collante
   Le header et le bandeau forment un seul bloc fixe. Ils se compactent
   ensemble au défilement : la promo doit rester lisible tout le long du
   site, mais elle n'a pas à occuper la même place qu'à l'arrivée. */
.topbar{
  position:fixed; inset-inline:0; inset-block-start:0;
  z-index:50;
  transition:box-shadow .25s ease;
}
.topbar.is-compact{
  box-shadow:0 8px 28px rgba(0,0,0,.55);
}
/* Le contenu démarre sous la barre, sinon il passerait dessous. */
body{padding-block-start:calc(var(--h-nav) + var(--h-ticker))}

/* --- état compact : tout rétrécit, rien ne disparaît --- */
.topbar.is-compact .nav__in{height:46px}
.topbar.is-compact .brand{font-size:16px}
.topbar.is-compact .punch{width:22px;height:22px;font-size:10px}
.topbar.is-compact .nav__links a{font-size:10px}
.topbar.is-compact .ticker__rail span{font-size:9.5px;padding:5px 0;letter-spacing:.16em}
.nav__in, .brand, .punch, .nav__links a, .ticker__rail span{
  transition:height .25s ease, font-size .25s ease, padding .25s ease, width .25s ease;
}

/* ============================================ bandeau promo défilant
   Il porte une information réelle et périssable — c'est ce qui
   justifie le mouvement. Une décoration animée serait du bruit. */
.ticker{
  position:relative; z-index:3;
  background:var(--gold);
  color:var(--forge);
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.35);
}
.ticker__rail{
  display:flex; width:max-content;
  animation:slide var(--duree, 42s) linear infinite;
}
.ticker__rail span{
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em;
  padding:9px 0;
  white-space:nowrap;
}
.ticker__rail span::after{
  content:'◆';
  margin-inline:26px;
  opacity:.45;
}
@keyframes slide{ to{ transform:translateX(calc(-1 * var(--unit))) } }

/* ------------------------------------------- second bandeau, discret
   Deux bandeaux ne peuvent pas crier ensemble. Le doré porte l'offre —
   périssable, donc bruyant. Celui-ci ne fait que nommer le périmètre :
   fond sombre, texte en acier, et il défile en sens inverse pour qu'on
   ne lise pas les deux comme une seule bande. */
.strip{
  position:relative; z-index:2;
  background:rgba(22,24,27,.78);
  border-block:1px solid var(--brushed);
  overflow:hidden;
}
.strip__rail{
  display:flex; width:max-content;
  animation:slide-back var(--duree, 58s) linear infinite;
}
.strip__rail span{
  font-family:var(--mono);
  font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--bone-dim);
  padding:11px 0;
  white-space:nowrap;
}
.strip__rail span::after{
  content:'◆';
  margin-inline:24px;
  color:var(--gold); opacity:.5;
}
@keyframes slide-back{ from{ transform:translateX(calc(-1 * var(--unit))) } to{ transform:none } }

/* ------------------------------------------------------------- nav */
/* z-index 5, au-dessus de la banderole (3).
   À valeur ÉGALE, c'est l'ordre du DOM qui tranche : la banderole vient
   après la barre, elle passait donc devant. Le menu de compte, ouvert
   depuis `.nav`, restait prisonnier de ce contexte d'empilement et se
   faisait recouvrir — son `z-index:50` ne pouvait rien, un enfant ne
   sort jamais du contexte de son parent. */
.nav{
  position:relative; z-index:5;
  border-bottom:1px solid var(--brushed);
  background:rgba(11,11,12,.85);
  backdrop-filter:blur(8px);
}
.nav__in{
  display:flex; align-items:center; gap:38px;
  height:66px;
}
.brand{
  font-family:var(--display);
  font-weight:900; font-stretch:112%;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:19px;
  display:flex; align-items:center; gap:9px;
}
/* Le poinçon : marque frappée dans le métal. Signature de la page. */
.punch{
  display:inline-grid; place-items:center;
  width:26px; height:26px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 rgba(0,0,0,.6);
  clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);
}
/* L'emblème porte déjà son hexagone et ses coins transparents. Lui
   laisser le cadre octogonal du poinçon dessinerait une bordure autour
   du vide, et deux contours dorés concentriques autour d'une même
   marque. On retire donc cadre, relief et découpe : la forme vient de
   l'image. Un peu plus large qu'un poinçon plein, car son tracé est
   creux et lui donne moins de présence à surface égale. */
img.punch{
  width:30px; height:30px;
  border:0; box-shadow:none; clip-path:none;
  object-fit:contain;
  /* Le doré du fichier est plus clair que celui du site ; une ombre
     portée chaude le rattache au reste sans retoucher le PNG. */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.topbar.is-compact img.punch{width:26px;height:26px}
.nav__links{display:flex;gap:26px;margin-inline-start:auto}

/* ============================================== navigation mobile
   Sous 960 px les liens étaient purement et simplement masqués : le
   site n'avait plus de navigation du tout. Panneau latéral + bouton. */
/* Sans cadre : la zone tactile reste à 44 px — c'est le minimum
   confortable au doigt — mais elle est invisible. Un bouton bordé de
   44 px dans un header de 66 px forme un bloc qui pèse plus lourd que
   le logo, alors qu'il n'est qu'un accès secondaire. */
.burger{
  display:none;
  margin-inline-start:auto;
  width:44px; height:44px;
  background:none; border:0;
  cursor:pointer; padding:0;
  place-items:center; gap:1px;
  -webkit-tap-highlight-color:transparent;
}
.burger i{
  display:block; width:24px; height:2px; background:var(--bone);
  transition:transform .25s ease, opacity .2s ease;
}
.burger:active i{background:var(--gold)}
/* Les trois barres deviennent une croix. Le déplacement vaut exactement
   l'écart entre deux barres — 2 px de hauteur + 1 px d'espace — sinon
   les branches de la croix ne se rejoignent pas au centre. */
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-3px) rotate(-45deg)}

.drawer{
  position:fixed; inset-block:0; inset-inline-end:0;
  width:min(86vw, 380px);
  background:var(--steel);
  border-inline-start:1px solid var(--brushed);
  z-index:60;
  padding:26px 26px 34px;
  display:flex; flex-direction:column;
  transform:translateX(101%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.drawer.is-open{transform:none}
.drawer__links{list-style:none;display:flex;flex-direction:column;margin-top:14px}
.drawer__links a{
  display:block; padding:17px 0;
  border-bottom:1px solid var(--brushed);
  font-family:var(--display); font-weight:800; font-stretch:106%;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:21px;
}
.drawer__links a:active{color:var(--gold)}
.drawer .btn{margin-top:26px;text-align:center}
.drawer__foot{
  margin-top:auto; padding-top:24px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
}
/* Voile : il ferme au toucher et signale que le reste est en retrait. */
.scrim{
  position:fixed; inset:0; z-index:55;
  background:rgba(0,0,0,.66);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
  backdrop-filter:blur(2px);
}
.scrim.is-open{opacity:1;pointer-events:auto}
/* Le défilement de la page est bloqué tant que le panneau est ouvert,
   sinon le fond glisse sous les doigts pendant qu'on lit le menu. */
body.is-locked{overflow:hidden}
.nav__links a{
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--bone-dim);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.nav__links a:hover, .nav__links a[aria-current]{
  color:var(--bone); border-bottom-color:var(--gold);
}

/* ------------------------------------------------------------ héros
   Asymétrique, aligné à gauche. Pas de logo centré, pas de tache
   floue. La colonne droite est la chose la plus caractéristique de
   cet univers : une console de serveur FiveM qui démarre. */
.hero{position:relative; z-index:2; padding:0 0 0}
.hero__grid{
  display:grid; gap:0;
  /* Plus de place au texte : le titre tenait sur cinq lignes, ce qui
     poussait le second bandeau hors de l'écran. */
  grid-template-columns:1.12fr .88fr;
  align-items:center;
  /* Le héros occupe exactement ce qui reste de l'écran une fois retirés
     le bandeau, la nav et la bande du bas — donc celle-ci affleure.
     svh et non vh : sur mobile, vh compte la barre d'adresse. */
  min-height:clamp(500px, calc(100svh - var(--h-ticker) - var(--h-nav) - var(--h-strip)), 820px);
}
.hero__text{padding:48px 0}

/* ---------------------------------------------------- visuel du héros
   Image réelle, coupée en biais. Le fondu vers le noir de forge sur le
   bord gauche fait que la photo n'a pas de bordure : elle sort du fond
   au lieu d'être collée dessus. */
.hero__art{
  position:absolute; inset-block:0; inset-inline-end:0;
  width:var(--art-w);
  overflow:hidden;
  /* La coupe : franche, inclinée, à la manière d'une plaque cisaillée. */
  clip-path:polygon(13% 0, 100% 0, 100% 100%, 0 100%);
  background:var(--forge);
}
/* La capture in-game, plein cadre. Cadrage calé pour garder le
   personnage et le logo doré du dos dans le champ. */
.hero__art img{
  width:100%; height:100%;
  object-fit:cover; object-position:64% 40%;
  display:block;
}
/* Fondu latéral : la seule façon d'éviter l'effet « image posée ». */
.hero__art::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, var(--forge) 10%, rgba(11,11,12,.5) 30%, transparent 58%),
    linear-gradient(0deg, var(--forge) 1%, transparent 22%);
}
/* ------------------------------------------------------- l'arête néon
   Elle NE touche pas l'image : elle court dans le noir, à distance du
   bord. C'est ce vide entre le trait et la photo qui fait exister les
   deux — collés, ils se seraient annulés. L'inclinaison (9°) est celle
   de la coupe de l'image, pour qu'ils restent parallèles. */
/* L'arête reprend EXACTEMENT la boîte et la géométrie de l'image, puis
   se découpe en bande de 2 px le long du même tracé. Une rotation à
   angle fixe ne pouvait pas suivre une coupe exprimée en pourcentage :
   les deux ne coïncidaient qu'à une seule proportion d'écran, et le
   trait dérivait sur l'image partout ailleurs. */
.hero__edge{
  position:absolute; inset-block:0; inset-inline-end:0;
  width:var(--art-w);
  pointer-events:none; z-index:2;
  overflow:hidden;
  /* Bande de 2 px centrée sur la frontière : 1 px dans le noir,
     1 px sur l'image. Mêmes 13 % → 0 % que le clip du visuel. */
  clip-path:polygon(
    calc(13% - 1px) 0,
    calc(13% + 1px) 0,
    1px 100%,
    -1px 100%
  );
  background:linear-gradient(180deg,
    transparent 0%, rgba(212,175,55,.55) 11%, rgba(212,175,55,.55) 89%, transparent 100%);
  /* drop-shadow et non box-shadow : il s'applique APRÈS le découpage,
     donc le halo épouse la bande diagonale. Un box-shadow aurait été
     rogné par le clip-path et n'aurait rien produit. */
  filter:
    drop-shadow(0 0 4px  rgba(212,175,55,.80))
    drop-shadow(0 0 13px rgba(212,175,55,.45))
    drop-shadow(0 0 34px rgba(212,175,55,.22));
}
/* La tête lumineuse. C'est une bande horizontale pleine largeur : le
   clip-path du parent ne laisse voir que son intersection avec la
   diagonale, ce qui donne un segment qui glisse le long du tube. */
.hero__edge::before{
  content:'';
  position:absolute; inset-inline:0;
  inset-block-start:0; height:20%;
  background:linear-gradient(180deg,transparent,#fff4cf 44%,#fff4cf 56%,transparent);
  animation:travel 5s ease-in-out infinite alternate;
}
/* ease-in-out et alternate : la lumière ralentit aux deux extrémités
   avant de repartir. En linéaire elle « claquerait » à chaque bout. */
@keyframes travel{
  from{ transform:translateY(-8%) }
  to  { transform:translateY(508%) }
}

/* --------------------------------------------- bande des plateformes */
.rack{
  position:relative; z-index:2;
  border-block:1px solid var(--brushed);
  background:rgba(11,11,12,.45);
}
.rack__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--brushed)}
.eyebrow{
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--gold);
  display:flex; align-items:center; gap:11px;
  margin-bottom:26px;
}
.eyebrow::before{
  content:''; width:34px; height:1px; background:var(--gold);
}
h1{
  font-family:var(--display);
  font-weight:900; font-stretch:118%;
  text-transform:uppercase;
  letter-spacing:-.028em; line-height:.88;
  font-size:clamp(44px,6.6vw,82px);
  margin-bottom:26px;
}
h1 .cool{
  display:block;
  color:var(--brushed);
  -webkit-text-stroke:1px var(--bone-dim);
  color:transparent;
}
.lede{
  color:var(--bone-dim);
  max-width:46ch;
  margin-bottom:34px;
  font-size:17px;
}
.actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:32px}
.btn{
  font-family:var(--mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em;
  padding:15px 26px;
  border:1px solid var(--brushed);
  color:var(--bone);
  border-radius:var(--r);
  transition:border-color .18s, background .18s, color .18s;
}
.btn:hover{border-color:var(--bone-dim)}
/* Un seul bouton doré sur toute la page. C'est ce qui lui donne son poids. */
.btn--forge{
  background:var(--gold); color:var(--forge); border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--forge:hover{background:#e6c04a;border-color:#e6c04a}

.proof{
  display:flex; flex-wrap:wrap; gap:22px;
  padding-top:22px; border-top:1px solid var(--brushed);
}
.proof div{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--bone-dim);text-transform:uppercase}
.proof b{color:var(--bone);font-weight:700}

/* ------------------------------------------------ plaques plateformes
   À la place d'une illustration commandée : les quatre univers que la
   boutique équipe. Ça répond en un coup d'œil à « où suis-je ? », et
   c'est utilisable — chaque plaque est une porte d'entrée. */
.plate{
  background:rgba(11,11,12,.55);
  padding:22px 24px;
  display:flex; flex-direction:column; gap:6px;
  position:relative;
  transition:background .2s;
}
.plate:hover{background:var(--steel)}
.plate__mark{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--bone-dim); text-transform:uppercase;
}
.plate h3{
  font-family:var(--display); font-weight:900; font-stretch:112%;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:23px; line-height:1;
}
.plate .count{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--gold);
}
/* Honnêteté : une plaque sans marchandise le dit. */

/* --------------------------------------------------------- console */
.console{
  background:var(--steel);
  border:1px solid var(--brushed);
  border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
.console__bar{
  display:flex; align-items:center; gap:9px;
  padding:11px 15px;
  border-bottom:1px solid var(--brushed);
  background:var(--steel-2);
}
.console__bar .dot{width:9px;height:9px;border-radius:50%;background:var(--brushed)}
.console__bar .live{
  margin-inline-start:auto;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--molten); text-transform:uppercase;
  display:flex; align-items:center; gap:7px;
}
.console__bar .live::before{
  content:''; width:6px;height:6px;border-radius:50%;
  background:var(--molten);
  box-shadow:0 0 9px var(--molten);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.25}}

.console__body{
  padding:20px 18px 24px;
  font-family:var(--mono); font-size:12.5px;
  line-height:1.95; letter-spacing:0; text-transform:none;
}
.console__body div{opacity:0;animation:type .01s forwards}
.console__body .cmd{color:var(--bone)}
.console__body .cmd::before{content:'> ';color:var(--gold)}
.console__body .ok{color:var(--bone-dim)}
.console__body .ok b{color:var(--gold);font-weight:500}
.console__body .done{color:var(--molten);margin-top:12px}
@keyframes type{to{opacity:1}}
.caret{
  display:inline-block;width:7px;height:14px;
  background:var(--molten);vertical-align:-2px;
  animation:blink 1.05s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ------------------------------------------------------- catalogue */
.band{
  border-block:1px solid var(--brushed);
  background:linear-gradient(180deg,rgba(255,255,255,.014),transparent);
  position:relative; z-index:2;
}
.sec{position:relative;z-index:2;padding:78px 0}

/* ============================================== filigrane de section
   Le nom de la marque, énorme, rongé par un masque de bruit. Il doit se
   lire comme une texture et jamais comme un mot : au-delà de ~4 %
   d'opacité il redevient du texte et entre en concurrence avec le titre.
   Il déborde volontairement du cadre — un mot entier et centré
   ressemblerait à un logo posé, pas à une surface. */
.mark{
  position:absolute;
  /* Plein écran : le filigrane sort du conteneur pour occuper toute la
     largeur de la fenêtre. Un mot qui s'arrête aux marges se lirait
     comme un bloc de contenu, pas comme une surface. */
  inset-inline-start:50%;
  transform:translateX(-50%);
  inset-block-start:-16%;
  width:104vw; max-width:none;
  font-family:var(--display);
  font-weight:900; font-stretch:125%;
  text-transform:uppercase;
  font-size:clamp(120px,19.5vw,420px);
  line-height:.8;
  letter-spacing:-.045em;
  color:rgba(232,230,227,.035);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
  /* L'érosion : le bruit ronge les lettres comme une peinture usée. */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23g)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size:420px; mask-size:420px;
}
/* Le contenu de la section repasse au-dessus du filigrane. */
.sec > .wrap, .band .wrap{position:relative;z-index:1}
.sec__head{
  display:grid;grid-template-columns:1fr .8fr;gap:44px;
  align-items:end;margin-bottom:44px;
}
.sec__head h2{
  font-family:var(--display);font-weight:900;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.024em;line-height:.94;
  font-size:clamp(30px,3.9vw,46px);
  padding-inline-start:18px;
  border-inline-start:2px solid var(--gold);
}
.sec__head p{color:var(--bone-dim);font-size:15px}

/* ================================================ carrousel produits
   Défilement continu, mis en pause au survol d'une carte. Le ruban
   contient DEUX fois le même jeu de cartes : à -50 % de translation on
   retombe exactement sur la copie, donc la boucle est invisible. */
.carousel{
  overflow:hidden;
  border-block:1px solid var(--brushed);
  /* Les cartes s'effacent aux deux bords au lieu d'être tranchées net. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.carousel__track{
  display:flex; width:max-content; gap:18px;
  padding:22px 0;
  animation:roll var(--duree, 52s) linear infinite;
}
/* :has() plutôt qu'un survol du ruban entier — la pause se déclenche
   sur la carte, pas dans les interstices, sinon ça saccade quand la
   souris passe d'une carte à l'autre. */
.carousel__track:has(.card:hover){animation-play-state:paused}
@keyframes roll{ to{ transform:translateX(calc(-1 * var(--unit))) } }

.carousel .card{ flex:0 0 320px; width:320px; }
/* Indice discret : on ne devine pas qu'un carrousel se met en pause. */
.carousel__hint{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-dim);
  margin-top:16px; display:flex; align-items:center; gap:9px;
}
.carousel__hint::before{
  content:''; width:22px; height:1px; background:var(--gold);
}
.card{
  background:rgba(11,11,12,.62);
  backdrop-filter:blur(3px);
  padding:24px 22px 22px;
  display:flex;flex-direction:column;gap:13px;
  transition:background .2s;
  position:relative;
}
.card:hover{background:var(--steel)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card h3{
  font-family:var(--display);font-weight:800;font-stretch:106%;
  text-transform:uppercase;letter-spacing:-.012em;font-size:19px;
}
.card p{color:var(--bone-dim);font-size:13.5px;line-height:1.55;flex:1}

/* Le poinçon produit : version + frameworks, frappés dans le métal.
   Il encode une information vraie — ce n'est pas un ornement. */
.stamp{
  flex-shrink:0;
  border:1px solid var(--brushed);
  padding:6px 9px;
  text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  color:var(--bone-dim);line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  clip-path:polygon(14% 0,86% 0,100% 20%,100% 80%,86% 100%,14% 100%,0 80%,0 20%);
}
.stamp b{display:block;color:var(--gold);font-weight:700}

.card__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid var(--brushed)}
.price{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--gold);letter-spacing:0}
.price.free{color:var(--molten)}
/* Prix barré : discret et en acier. Il documente la remise sans
   crier — c'est le prix courant qui doit rester lisible. */
.was{
  font-family:var(--mono);font-size:12px;color:var(--bone-dim);
  text-decoration:line-through;text-decoration-thickness:1px;
  margin-inline-end:8px;
}
/* La remise est une chose vivante et périssable : couleur de fusion. */
.off{
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;
  color:var(--molten);border:1px solid var(--molten);
  padding:3px 6px;margin-inline-start:9px;vertical-align:2px;
}
.card__foot span.cat{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--bone-dim);text-transform:uppercase;margin-inline-start:auto;white-space:nowrap}

/* ------------------------------------------------------- chiffres */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--brushed)}
.stat{background:rgba(11,11,12,.58);backdrop-filter:blur(3px);padding:34px 24px}
.stat b{
  display:block;
  font-family:var(--display);font-weight:900;font-stretch:112%;
  font-size:44px;line-height:1;letter-spacing:-.03em;
  margin-bottom:9px;
}
.stat span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}

/* ============================================== parcours en 4 étapes
   La numérotation est justifiée ici : acheter → recevoir → installer →
   être suivi est une vraie séquence. Numéroter des blocs sans ordre
   réel serait de la décoration. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.step{position:relative;padding-top:26px}
/* Le trait qui relie les étapes : il matérialise la continuité. */
.step::before{
  content:'';
  position:absolute; inset-block-start:13px; inset-inline-start:34px;
  width:calc(100% - 20px); height:1px; background:var(--brushed);
}
.step:last-child::before{display:none}
.step__n{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1px solid var(--gold); color:var(--gold);
  font-family:var(--mono);font-size:11px;font-weight:700;
  background:var(--forge);
  clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);
}
.step h3{
  font-family:var(--display);font-weight:800;font-stretch:106%;
  text-transform:uppercase;letter-spacing:-.01em;font-size:16px;
  margin:16px 0 7px;
}
.step p{color:var(--bone-dim);font-size:14px;line-height:1.55}

/* ------------------------------------------------------------- FAQ
   <details> natif : ouverture au clavier, lisible par les lecteurs
   d'écran, et fonctionne même sans JavaScript. */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq__list{border-top:1px solid var(--brushed)}
.faq details{border-bottom:1px solid var(--brushed)}
.faq summary{
  display:flex;align-items:center;gap:18px;
  padding:19px 0; cursor:pointer; list-style:none;
  font-size:15px; font-weight:500;
  transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::before{
  content:counter(faq,decimal-leading-zero);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--bone-dim); flex-shrink:0;
}
.faq details{counter-increment:faq}
.faq__list{counter-reset:faq}
.faq summary::after{
  content:'+';
  margin-inline-start:auto;
  font-family:var(--mono);font-size:17px;color:var(--gold);
  transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{
  color:var(--bone-dim);font-size:14.5px;line-height:1.65;
  padding:0 0 21px 40px;max-width:64ch;
}

/* ------------------------------------------------- appel final + pied */
.cta{
  position:relative; z-index:2;
  padding:96px 0; text-align:center;
  border-top:1px solid var(--brushed);
  overflow:hidden;
}
.cta h2{
  font-family:var(--display);font-weight:900;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.028em;line-height:.9;
  font-size:clamp(34px,5.4vw,68px);
  margin-bottom:20px;
}
.cta p{color:var(--bone-dim);max-width:52ch;margin:0 auto 34px}
.cta .actions{justify-content:center}

/* Le grand lettrage du bas : contour seul, éclairé en dégradé de la
   gauche vers la droite — comme un néon qu'on vient d'allumer. */
.bigmark{
  position:relative;
  margin-top:66px; padding-top:34px;
  border-top:1px solid var(--brushed);
  font-family:var(--display);font-weight:900;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.86;
  font-size:clamp(46px,12.4vw,196px);
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(212,175,55,.22);
  user-select:none;
}
/* Copie superposée, allumée, révélée par une bande lumineuse qui balaie
   le lettrage. Même principe que l'arête du héros : c'est un masque qui
   se déplace, pas la couleur du texte qui change — donc les lettres
   s'allument progressivement, arête par arête. */
.bigmark span{
  position:absolute; inset-block-start:34px; inset-inline:0;
  color:transparent;
  -webkit-text-stroke:1.5px #fff2c4;
  filter:drop-shadow(0 0 7px rgba(212,175,55,.9))
         drop-shadow(0 0 26px rgba(212,175,55,.5));
  /* Le masque est 2,5 fois plus large que le lettrage : en déplaçant sa
     position de 100 % à 0 %, la bande traverse tout le mot. */
  -webkit-mask-image:linear-gradient(100deg,
    transparent 34%, rgba(0,0,0,.45) 42%, #000 50%, rgba(0,0,0,.45) 58%, transparent 66%);
          mask-image:linear-gradient(100deg,
    transparent 34%, rgba(0,0,0,.45) 42%, #000 50%, rgba(0,0,0,.45) 58%, transparent 66%);
  -webkit-mask-size:250% 100%; mask-size:250% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:sweep 7s ease-in-out infinite alternate;
}
@keyframes sweep{
  from{ -webkit-mask-position:100% 0; mask-position:100% 0 }
  to  { -webkit-mask-position:0% 0;   mask-position:0% 0 }
}

/* ---------------------------------------------------------- avis
   La structure est prête ; elle attend de vrais avis. Rien n'est
   inventé ici — un faux témoignage sur un site marchand est à la fois
   un risque juridique et le premier truc qu'un visiteur repère. */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--brushed);border:1px solid var(--brushed)}
.review{background:rgba(11,11,12,.62);backdrop-filter:blur(3px);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.review q{font-style:normal;color:var(--bone);font-size:15px;line-height:1.6;flex:1}
.review q::before{content:'« '}
.review q::after{content:' »'}
/* État vide, assumé : il indique quoi faire au lieu de faire semblant. */
.review--empty{align-items:flex-start;justify-content:center;border:1px dashed var(--brushed);background:transparent}
.review--empty p{color:var(--bone-dim);font-size:13.5px}

/* ---------------------------------------------------------- pied */
.foot{border-top:1px solid var(--brushed);padding:64px 0 30px;position:relative;z-index:2}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.foot__about p{color:var(--bone-dim);font-size:14px;margin:18px 0 22px;max-width:34ch}
.foot h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{color:var(--bone-dim);font-size:14px;transition:color .18s}
.foot ul a:hover{color:var(--bone)}
/* ------------------------------------------------ moyens de paiement
   Plaques monochromes plutôt que logos en couleur : cinq marques aux
   bleus et rouges différents dans un pied sombre feraient tache, et
   c'est le traitement habituel des marchands soignés. */
.pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pay div{
  height:30px; padding:0 11px;
  display:flex;align-items:center;gap:5px;
  border:1px solid var(--brushed);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  color:var(--bone-dim);
  font-family:var(--display);font-weight:800;font-stretch:100%;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  transition:border-color .18s,color .18s;
}
.pay div:hover{border-color:var(--bone-dim);color:var(--bone)}
.pay .mc{gap:0}
/* Les deux disques de Mastercard, dessinés plutôt qu'importés. */
.pay .mc i{
  width:13px;height:13px;border-radius:50%;
  background:currentColor;opacity:.75;display:block;
}
.pay .mc i+i{margin-inline-start:-5px;opacity:.45}
.pay .visa{font-style:italic;letter-spacing:.02em}
.pay .pp{font-style:italic}

.socials{display:flex;gap:9px}
.socials a{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--brushed);color:var(--bone-dim);
  font-family:var(--mono);font-size:10px;font-weight:700;
  transition:border-color .18s,color .18s;
}
/* `currentColor` + `fill` : un seul tracé sert l'état normal et le
   survol, au lieu de deux fichiers à garder synchronisés. */
.socials a svg{width:17px;height:17px;fill:currentColor;display:block}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.foot__legal{
  margin-top:46px;padding-top:24px;border-top:1px solid var(--brushed);
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.foot__legal p{color:var(--bone-dim);font-size:12px;max-width:76ch;line-height:1.6}
.foot__bottom{
  margin-top:22px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;align-items:center;
}
.foot__bottom span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--bone-dim)}
.status{display:flex;align-items:center;gap:8px;color:var(--bone-dim)}
.status::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 8px #22C55E;
}

/* ------------------------------------------------------ responsive */
@media(max-width:960px){
  .hero__grid,.sec__head,.faq{grid-template-columns:1fr;gap:38px;min-height:0}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px}
  .step::before{display:none}
  .reviews{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:34px}
  /* L'image passe en fond derrière le texte : la coupe verticale n'a
     plus de sens sur une colonne unique. */
  .hero__art{width:100%;max-width:none;clip-path:none;opacity:.28}
  .hero__edge{display:none}
  .hero__text{padding:60px 0}
  .rack__in{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  /* Les liens passent dans le panneau, le bouton prend leur place. */
  .nav__links{display:none}
  .burger{display:grid}
  /* Cibles tactiles : 34 px au doigt, c'est trop juste. */
  .socials a{width:44px;height:44px}
}
@media(max-width:600px){
  .grid,.stats{grid-template-columns:1fr}
  .hero{padding:52px 0 46px}
  .wrap{padding-inline:20px}
}

@media(max-width:600px){
  .carousel .card{flex-basis:280px;width:280px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .console__body div{opacity:1}
  .ticker__rail{transform:none}
  /* Sans animation, un ruban figé ne montrerait que les deux premières
     cartes. On rend la main : le carrousel devient défilable au doigt. */
  .carousel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .carousel__track{width:auto}
}

/* ============================================== badge TopV
   Classement public de créateurs. Il vit avec les autres marques de
   confiance du pied de page, pas au milieu du contenu. */
.topv{display:inline-block;margin-top:2px;line-height:0}
.topv img{height:34px;width:auto;display:block;opacity:.9;transition:opacity .18s}
.topv:hover img{opacity:1}

/* ============================================== en-tête de page
   Les pages intérieures n'ont pas de héros : cette bande tient ce rôle,
   en plus sobre. */
.phead{position:relative;z-index:2;padding:62px 0 46px;border-bottom:1px solid var(--brushed);overflow:hidden}
.phead h1{
  font-family:var(--display);font-weight:900;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.028em;line-height:.9;
  font-size:clamp(34px,5.2vw,64px);
  padding-inline-start:20px;border-inline-start:2px solid var(--gold);
}
.phead p{color:var(--bone-dim);max-width:58ch;margin-top:18px;padding-inline-start:22px}
.crumb{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:22px;display:flex;gap:9px;flex-wrap:wrap;
}
.crumb a:hover{color:var(--gold)}
.crumb span{color:var(--brushed)}

/* ============================================== filtres de boutique */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px;align-items:center}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--brushed);color:var(--bone-dim);
  cursor:pointer;background:none;transition:border-color .18s,color .18s;
}
.chip:hover{border-color:var(--bone-dim);color:var(--bone)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.08)}
.filters__count{margin-inline-start:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--bone-dim);text-transform:uppercase}

/* Grille de boutique : les cartes du carrousel, en statique. */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--brushed);border:1px solid var(--brushed)}
.shop .card{width:auto;flex:none;border-inline-end:0}

/* ============================================== fiche produit */
.product{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.gallery__main{
  aspect-ratio:16/10;background:var(--steel);border:1px solid var(--brushed);
  overflow:hidden;display:grid;place-items:center;
}
.gallery__main img{width:100%;height:100%;object-fit:cover}

.buy{border:1px solid var(--brushed);background:rgba(11,11,12,.62);backdrop-filter:blur(3px);padding:26px 24px;position:sticky;top:130px}
.buy__price{display:flex;align-items:baseline;gap:11px;margin-bottom:6px}
.buy__price .price{font-size:30px}
.buy__vat{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--bone-dim);text-transform:uppercase;margin-bottom:22px}
.buy .btn{display:block;text-align:center;margin-bottom:9px}
.spec{border-top:1px solid var(--brushed);margin-top:22px;padding-top:18px;display:flex;flex-direction:column;gap:12px}
.spec div{display:flex;gap:14px;font-size:13.5px}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);min-width:104px}
.spec dd{color:var(--bone)}

@media(max-width:960px){
  .product{grid-template-columns:1fr;gap:34px}
  .buy{position:static}
    }

/* ============================================== carte produit illustrée
   L'image mène. Les badges de framework et la remise sont POSÉS dessus
   plutôt qu'en dessous : ils qualifient le produit montré, et les sortir
   de l'image ajouterait deux lignes de hauteur à chaque carte. */
.card--art{padding:0;gap:0}
.card__art{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--steel); border-bottom:1px solid var(--brushed);
}
.card__art img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,0,.2,1);
}
.card--art:hover .card__art img{transform:scale(1.045)}
/* Voile bas : sans lui, les badges se perdent sur les images claires. */
.card__art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.25) 26%,transparent 46%);
}
.card__fw{
  position:absolute;inset-block-end:9px;inset-inline-start:10px;
  display:flex;gap:5px;flex-wrap:wrap;z-index:2;
}
.card__fw span{
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);
  padding:4px 7px;border:1px solid rgba(232,230,227,.28);
  background:rgba(11,11,12,.5);backdrop-filter:blur(4px);
}
.card__off{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--forge);background:var(--molten);
  padding:5px 9px;
  box-shadow:0 2px 14px rgba(255,107,26,.45);
}
.card--art .card__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:11px;flex:1}
.card--art h3{font-size:18px}
.card--art h3 a:hover{color:var(--gold)}
.card--art p{font-size:13.5px;flex:1}
.card--art .card__foot{padding-top:14px}

/* ============================================== barre d'outils boutique */
.tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.search{
  flex:1;min-width:220px;position:relative;
}
.search input{
  width:100%;padding:13px 15px 13px 40px;
  background:rgba(11,11,12,.6);border:1px solid var(--brushed);
  color:var(--bone);font-family:var(--body);font-size:14px;
  border-radius:var(--r);
}
.search input::placeholder{color:var(--bone-dim)}
.search input:focus{outline:none;border-color:var(--gold)}
.search::before{
  content:'';position:absolute;inset-block-start:50%;inset-inline-start:15px;
  width:13px;height:13px;margin-block-start:-7px;
  border:1.5px solid var(--bone-dim);border-radius:50%;
}
.sort{
  padding:13px 16px;background:rgba(11,11,12,.6);
  border:1px solid var(--brushed);color:var(--bone-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;border-radius:var(--r);
}

/* ============================================== catégorie vide */

/* ============================================== menu de tri
   Un vrai menu déroulant plutôt qu'un <select> natif : celui-ci se
   rendrait avec l'habillage du système, blanc sur la plupart des
   machines, en rupture totale avec le reste de la page. */
.sortbox{position:relative}
.sort{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;background:rgba(11,11,12,.6);
  border:1px solid var(--brushed);color:var(--bone-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;border-radius:var(--r);white-space:nowrap;
  transition:border-color .18s,color .18s;
}
.sort:hover{border-color:var(--bone-dim);color:var(--bone)}
.sort b{color:var(--bone);font-weight:700}
.sort__ar{transition:transform .2s;font-size:9px}
.sort[aria-expanded="true"]{border-color:var(--gold);color:var(--bone)}
.sort[aria-expanded="true"] .sort__ar{transform:rotate(180deg)}

.sort__menu{
  position:absolute;inset-block-start:calc(100% + 7px);inset-inline-end:0;
  min-width:238px;z-index:30;list-style:none;
  background:var(--steel);border:1px solid var(--brushed);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  padding:6px;
  opacity:0;transform:translateY(-7px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.sort__menu.is-open{opacity:1;transform:none;pointer-events:auto}
.sort__menu li{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;cursor:pointer;font-size:14px;
  transition:background .15s,color .15s;
}
.sort__menu li:hover{background:rgba(212,175,55,.09);color:var(--gold)}
/* La coche ne se contente pas d'être colorée : elle est présente ou
   absente, donc lisible même sans percevoir la couleur. */
.sort__menu li::after{
  content:'✓';margin-inline-start:auto;color:var(--gold);
  opacity:0;font-size:13px;
}
.sort__menu li[aria-selected="true"]::after{opacity:1}
.sort__menu li[aria-selected="true"]{color:var(--bone)}

/* ============================================== documentation
   Deux colonnes : un sommaire persistant à gauche, le contenu à droite.
   Le sommaire reste visible pendant la lecture — c'est ce qui distingue
   une documentation d'une suite d'articles. */
.docs{display:grid;grid-template-columns:290px 1fr;gap:0;position:relative;z-index:2}
.docs__side{
  border-inline-end:1px solid var(--brushed);
  padding:26px 20px 60px;
  position:sticky;inset-block-start:calc(var(--h-nav) + var(--h-ticker));
  height:calc(100svh - var(--h-nav) - var(--h-ticker));
  overflow-y:auto;
  background:rgba(11,11,12,.5);
}
.docs__brand{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--brushed);padding:13px 14px;margin-bottom:16px;
}
.docs__brand div{line-height:1.25}
.docs__brand b{
  display:block;font-family:var(--display);font-weight:900;font-stretch:106%;
  text-transform:uppercase;font-size:14px;letter-spacing:-.01em;
}
.docs__brand span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--bone-dim);text-transform:uppercase}
.docs__side h5{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);margin:22px 0 9px;
}
.docs__nav{list-style:none;display:flex;flex-direction:column;gap:1px}
.docs__nav a{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;font-size:14px;color:var(--bone-dim);
  border-inline-start:2px solid transparent;
  transition:color .16s,background .16s,border-color .16s;
}
.docs__nav a:hover{color:var(--bone);background:rgba(255,255,255,.03)}
.docs__nav a[aria-current]{color:var(--gold);background:rgba(212,175,55,.08);border-inline-start-color:var(--gold)}
.docs__nav a::after{content:'›';margin-inline-start:auto;color:var(--brushed)}
.docs__nav .ico{
  width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--brushed);font-size:13px;
}
.docs__main{padding:52px 0 78px}
.docs__stats{display:flex;gap:38px;padding-top:24px;margin-top:26px;border-top:1px solid var(--brushed)}
.docs__stats div{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.docs__stats b{color:var(--gold);font-size:17px;margin-inline-start:9px;letter-spacing:0}
.pages{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  color:var(--bone);padding:5px 8px;
  border:1px solid rgba(232,230,227,.28);background:rgba(11,11,12,.6);
  backdrop-filter:blur(4px);text-transform:uppercase;
}
@media(max-width:960px){
  .docs{grid-template-columns:1fr}
  .docs__side{position:static;height:auto;border-inline-end:0;border-bottom:1px solid var(--brushed)}
  .docs__main{padding:32px 0 56px}
}

/* ============================================== support en direct
   Bouton flottant + panneau. Il est dans l'ossature commune : un
   visiteur bloqué doit pouvoir demander de l'aide depuis n'importe
   quelle page, pas seulement depuis « Aide ». */
.help{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:70;
  width:54px;height:54px;
  display:grid;place-items:center;
  background:var(--gold);color:var(--forge);
  border:0;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%);
  transition:transform .2s ease;
}
.help:hover{transform:translateY(-2px)}
.help svg{width:24px;height:24px;fill:currentColor}
.help__dot{
  position:absolute;inset-block-start:-2px;inset-inline-end:-2px;
  width:12px;height:12px;border-radius:50%;
  background:#22C55E;border:2px solid var(--forge);
}

.panel{
  position:fixed;inset-block-end:88px;inset-inline-end:22px;z-index:71;
  width:min(92vw,376px);
  background:var(--steel);border:1px solid var(--brushed);
  box-shadow:0 26px 70px rgba(0,0,0,.7);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.panel.is-open{opacity:1;transform:none;pointer-events:auto}
.panel__head{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 18px 16px;border-bottom:1px solid var(--brushed);
}
.panel__head .eyebrow{margin:0 0 6px;font-size:9px}
.panel__head h3{
  font-family:var(--display);font-weight:900;font-stretch:106%;
  text-transform:uppercase;letter-spacing:-.015em;font-size:18px;line-height:1;
}
.panel__close{
  margin-inline-start:auto;flex-shrink:0;
  width:32px;height:32px;display:grid;place-items:center;
  background:none;border:1px solid var(--brushed);color:var(--bone-dim);
  cursor:pointer;font-size:15px;line-height:1;
  transition:border-color .18s,color .18s;
}
.panel__close:hover{border-color:var(--gold);color:var(--gold)}
.panel__body{padding:40px 26px 30px;text-align:center}
.panel__lock{
  width:60px;height:60px;margin:0 auto 22px;
  display:grid;place-items:center;
  border:1px solid var(--brushed);color:var(--gold);
  clip-path:polygon(16% 0,84% 0,100% 16%,100% 84%,84% 100%,16% 100%,0 84%,0 16%);
}
.panel__lock svg{width:24px;height:24px;fill:currentColor}
.panel__body h4{
  font-family:var(--display);font-weight:900;font-stretch:106%;
  text-transform:uppercase;letter-spacing:-.015em;font-size:19px;margin-bottom:12px;
}
.panel__body p{color:var(--bone-dim);font-size:14px;margin-bottom:24px}
.panel__body .btn{display:block}
.panel__foot{
  padding:14px 18px;border-top:1px solid var(--brushed);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);text-align:center;
}
@media(max-width:600px){
  .help{inset-block-end:16px;inset-inline-end:16px}
  .panel{inset-block-end:80px;inset-inline:16px;width:auto}
}

/* ============================================== grilles aérées
   Les cartes étaient jointives, séparées par un filet d'1 px. Ça
   convient à un tableau, pas à des produits : chacun doit se lire comme
   un objet distinct, avec son propre cadre et de l'air autour. */
.shop{
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:22px;
  background:none;
  border:0;
}
.shop .card,
.grid .card{
  border:1px solid var(--brushed);
  background:rgba(11,11,12,.62);
  position:relative;
}
.shop .card:hover,
.grid .card:hover{border-color:rgba(212,175,55,.45)}
/* Coin coupé : le métal se découpe, il ne s'arrondit pas. Un trait
   discret suffit à signer la carte sans l'encadrer davantage. */
.shop .card::after,
.grid .card::after{
  content:'';
  position:absolute;inset-block-end:0;inset-inline-end:0;
  width:14px;height:14px;
  border-block-end:1px solid var(--gold);
  transform:rotate(-45deg) translate(4px,-4px);
  transform-origin:bottom right;
  opacity:.5;transition:opacity .2s;
  pointer-events:none;
}
.shop .card:hover::after,
.grid .card:hover::after{opacity:1}

.grid{gap:22px;background:none;border:0}
.reviews{gap:22px;background:none;border:0}
.review{border:1px solid var(--brushed)}

/* ============================================== états vides, sans cadre
   Un cadre en pointillés autour du vide souligne le manque. Sans cadre,
   la place attend simplement d'être occupée. */
.review--empty{
  border:0;background:none;
  padding:26px 4px;
}

/* Le carrousel reste un ruban continu — l'espacement y viendrait rompre
   le défilement — mais ses cartes portent le même cadre. */
.carousel .card{border:1px solid var(--brushed)}
.carousel .card:hover{border-color:rgba(212,175,55,.45)}

/* ============================================== actions de carte
   Deux actions par produit : mettre de côté, ou acheter tout de suite.
   L'achat est doré et rempli — c'est l'intention principale d'une page
   boutique — mais compact, pour que dix cartes ne saturent pas l'écran
   d'aplats. Le panier reste en acier : il n'engage à rien. */
.card__buy{
  display:grid;grid-template-columns:1fr auto;gap:8px;
  padding-top:14px;margin-top:2px;
  border-top:1px solid var(--brushed);
}
.card__buy a{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 12px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--brushed);color:var(--bone);
  border-radius:var(--r);white-space:nowrap;
  transition:border-color .18s,background .18s,color .18s;
}
.card__buy a:hover{border-color:var(--bone-dim)}
.card__buy .go{
  background:var(--gold);color:var(--forge);border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
  padding-inline:18px;
}
.card__buy .go:hover{background:#e6c04a;border-color:#e6c04a}
.card__buy svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
/* Le gratuit n'a pas de panier : une seule action, pleine largeur. */
.card__buy--free{grid-template-columns:1fr}

@media(max-width:600px){
  .card__buy{grid-template-columns:1fr}
}

/* ============================================== états du support
   Deux situations très différentes : quelqu'un peut répondre tout de
   suite, ou personne n'est là. Afficher la même chose dans les deux cas
   revient à promettre une réponse qui ne viendra pas. */
.help__dot{background:var(--bone-dim)}
.help[data-etat="en-ligne"] .help__dot{
  background:#22C55E;
  animation:battement 2.6s ease-in-out infinite;
}
@keyframes battement{50%{opacity:.4}}

.etat{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;
}
.etat::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--bone-dim);flex-shrink:0;
}
.etat--on{color:#22C55E}
.etat--on::before{background:#22C55E;box-shadow:0 0 8px #22C55E}
.etat--off{color:var(--bone-dim)}

/* Les visages du support disponible. Des initiales suffisent : on
   annonce une disponibilité, pas un trombinoscope. */
.equipe{display:flex;justify-content:center;margin-bottom:22px}
.equipe span{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--steel-2);border:1px solid var(--gold);
  color:var(--gold);font-family:var(--mono);font-size:13px;font-weight:700;
  margin-inline-start:-11px;
  clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);
}
.equipe span:first-child{margin-inline-start:0}

/* Le créneau d'ouverture, quand personne n'est là. */
.horaires{
  display:flex;justify-content:space-between;gap:12px;
  border:1px solid var(--brushed);padding:12px 14px;margin-bottom:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-dim);
}
.horaires b{color:var(--bone)}

/* ============================================== discussion en direct
   Le visiteur écrit ici sans compte ; ses messages partent dans un fil
   Discord côté équipe, et les réponses reviennent. Personne ne change
   ses habitudes : il reste sur le site, l'équipe reste sur Discord. */
.panel--chat{height:min(78vh,560px)}
.chat{
  flex:1;overflow-y:auto;
  padding:20px 18px;
  display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
}
.msg{max-width:82%;display:flex;flex-direction:column;gap:5px}
.msg p{
  padding:11px 14px;font-size:14px;line-height:1.5;
  border:1px solid var(--brushed);
  background:var(--steel-2);color:var(--bone);
}
.msg__meta{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);
}
/* L'équipe à gauche, le visiteur à droite : la disposition dit qui
   parle avant même de lire le nom. */
.msg--eux{align-self:flex-start}
.msg--eux p{border-inline-start:2px solid var(--gold)}
.msg--moi{align-self:flex-end;align-items:flex-end}
.msg--moi p{
  background:rgba(212,175,55,.12);
  border-color:rgba(212,175,55,.4);
}
/* Message système : ni l'un ni l'autre, donc centré et discret. */
.msg--sys{align-self:center;max-width:100%}
.msg--sys p{
  background:none;border:0;padding:4px 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);text-align:center;
}

.typing{display:flex;gap:4px;padding:13px 14px;border:1px solid var(--brushed);background:var(--steel-2);width:fit-content}
.typing i{
  width:6px;height:6px;border-radius:50%;background:var(--bone-dim);
  animation:points 1.3s ease-in-out infinite;
}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes points{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat__form{
  display:flex;gap:8px;padding:12px;
  border-top:1px solid var(--brushed);background:rgba(11,11,12,.4);
}
.chat__form input{
  flex:1;padding:12px 14px;
  background:var(--forge);border:1px solid var(--brushed);
  color:var(--bone);font-family:var(--body);font-size:14px;
  border-radius:var(--r);
}
.chat__form input::placeholder{color:var(--bone-dim)}
.chat__form input:focus{outline:none;border-color:var(--gold)}
.chat__form button{
  width:44px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--gold);color:var(--forge);border:0;cursor:pointer;
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
  transition:background .18s;
}
.chat__form button:hover{background:#e6c04a}
.chat__form button:disabled{background:var(--brushed);color:var(--bone-dim);cursor:not-allowed;box-shadow:none}
.chat__form svg{width:17px;height:17px;fill:currentColor}

/* ============================================== visuels non rognés
   Les formats vont de 0,55 (portrait étroit) à 2,01 (large). Aucun
   cadre fixe ne peut les contenir en « cover » sans en couper — c'est
   ce qui tronquait le menu ShadowAdmin. */

/* --- Fiche produit : l'image entière, à sa hauteur naturelle --- */
.gallery__main{
  aspect-ratio:auto;
  display:block;
  padding:0;
}
.gallery__main img{
  width:100%;height:auto;
  object-fit:contain;
  display:block;
}

/* --- Cartes : le cadre reste régulier pour que la grille s'aligne,
       mais l'image y est CONTENUE. Le vide autour est comblé par une
       copie floutée du visuel : la boîte paraît pleine, et rien n'est
       coupé. --- */
.card__art{aspect-ratio:16/10}
.card__art img{
  object-fit:contain;
  position:relative;z-index:1;
  padding:10px;
}
.card__fill{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(26px) saturate(.7) brightness(.42);
  transform:scale(1.25);
}
.card--art:hover .card__art img{transform:scale(1.03)}

/* Les vignettes restent en « cover » : à 90 px de large, on cherche à
   reconnaître l'image d'un coup d'œil, pas à la lire. */

/* ============================================== galerie produit
   Cadre marqué à ses angles plutôt qu'encadré sur tout le tour : le
   visuel respire, et les équerres suffisent à le poser. */
.gallery{position:relative}
.gallery__main{
  position:relative;
  border:1px solid var(--brushed);
  background:var(--steel);
  overflow:hidden;
}
/* Équerres : deux traits dorés en diagonale opposée. */
.gallery__main::before,
.gallery__main::after{
  content:'';position:absolute;z-index:2;
  width:22px;height:22px;pointer-events:none;
}
.gallery__main::before{
  inset-block-start:9px;inset-inline-start:9px;
  border-block-start:1px solid var(--gold);border-inline-start:1px solid var(--gold);
}
.gallery__main::after{
  inset-block-end:9px;inset-inline-end:9px;
  border-block-end:1px solid var(--gold);border-inline-end:1px solid var(--gold);
}
.gallery__count{
  position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--bone);background:rgba(11,11,12,.7);
  padding:6px 10px;border:1px solid var(--brushed);
  backdrop-filter:blur(4px);
}

/* Bande de vignettes : elle défile horizontalement plutôt que de passer
   à la ligne — une galerie de vingt images ne doit pas repousser le
   reste de la page. */
.thumbs{position:relative;margin-top:9px;display:flex;align-items:center;gap:8px}
.thumbs__rail{
  display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;
  padding-bottom:6px;flex:1;
  scrollbar-width:thin;scrollbar-color:var(--brushed) transparent;
}
.thumbs__rail::-webkit-scrollbar{height:4px}
.thumbs__rail::-webkit-scrollbar-thumb{background:var(--brushed)}
.thumbs__rail button{
  flex:0 0 104px;width:104px;aspect-ratio:16/10;
  background:var(--steel);border:1px solid var(--brushed);
  padding:0;cursor:pointer;overflow:hidden;position:relative;
  transition:border-color .18s;
}
.thumbs__rail button[aria-current="true"]{border-color:var(--gold)}
.thumbs__rail img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs__nav{
  flex-shrink:0;width:30px;height:30px;
  display:grid;place-items:center;
  background:rgba(11,11,12,.6);border:1px solid var(--brushed);
  color:var(--bone-dim);cursor:pointer;font-size:13px;
  transition:border-color .18s,color .18s;
}
.thumbs__nav:hover{border-color:var(--gold);color:var(--gold)}

/* ============================================== bloc d'achat enrichi */
.pricebox{border:1px solid var(--brushed);background:rgba(11,11,12,.62);backdrop-filter:blur(3px);padding:24px 22px}
.pricebox__label{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:8px;
}
.pricebox .buy__price{margin-bottom:4px}
.pricebox .buy__price .price{font-size:34px}
.buy__actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:22px 0 0}
.buy__actions a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 12px;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--brushed);color:var(--bone);
  border-radius:var(--r);white-space:nowrap;
  transition:border-color .18s,background .18s,color .18s;
}
.buy__actions a:hover{border-color:var(--bone-dim)}
.buy__actions .go{
  background:var(--gold);color:var(--forge);border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}
.buy__actions .go:hover{background:#e6c04a;border-color:#e6c04a}
.buy__actions svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
.buy__actions .gift{padding-inline:14px}

/* Garanties : ce qui est promis, listé sous le prix. */
.assure{list-style:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--brushed);display:flex;flex-direction:column;gap:12px}
.assure li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--bone-dim)}
.assure b{color:var(--bone);font-weight:600}
.assure svg{width:16px;height:16px;fill:var(--gold);flex-shrink:0}

@media(max-width:600px){
  .buy__actions{grid-template-columns:1fr}
}

/* ============================================== fiche produit compacte
   L'essentiel — visuel, prix, bouton — doit tenir dans le premier écran.
   Un acheteur qui doit faire défiler pour trouver le prix se demande
   d'abord s'il y en a un. */

/* Bandeau réduit : sur la fiche il ne porte qu'un fil d'Ariane, le titre
   ayant rejoint la colonne d'achat. 46 px suffisent, contre 108. */
.phead--fin{padding:22px 0 18px}
.phead--fin .crumb{margin-bottom:0}

/* Cadre au format cible 1200 × 675 (16:9). Il ne dépend PAS du fichier
   affiché : c'est le cadre qui impose le format, l'image s'y loge. Les
   visuels actuels, tous de ratios différents, y sont donc présentés de
   façon homogène — et le jour où les images font réellement 1200 × 675,
   elles le rempliront au pixel près sans qu'on touche à quoi que ce soit.

   La largeur est bornée plutôt que la hauteur : avec un format fixe,
   contraindre la hauteur casserait le ratio, alors que la borner par la
   largeur laisse la hauteur suivre toute seule. */
.gallery__main{
  aspect-ratio:16/9;
  width:min(100%, 1200px, max(420px, calc((100svh - 330px) * 16 / 9)));
  margin-inline:auto;
  display:block;
}

/* L'image entière, jamais rognée, centrée dans le cadre. */
.gallery__main img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
}

/* Le vide autour est comblé par une copie floutée et assombrie du visuel
   lui-même — même principe que sur les cartes de la boutique. Le cadre
   paraît plein et coloré au lieu d'afficher deux bandes d'acier gris,
   et l'œil reste sur l'image. */
.gallery__fill{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(26px) saturate(.7) brightness(.42);
  transform:scale(1.15);   /* le flou déborde : on agrandit pour éviter
                              un liseré clair sur les bords */
  pointer-events:none;
}

/* Vignettes alignées sur le même format que le cadre. */
.thumbs__rail button{aspect-ratio:16/9}

.product{align-items:start}
.sec--produit{padding:34px 0 70px}

/* La colonne d'achat se resserre : chaque pixel gagné ici remonte le
   bouton dans l'écran. */
.sec--produit .sec--produit .pricebox{padding:20px 20px}
.sec--produit .assure{margin-top:18px;padding-top:16px;gap:10px}
.sec--produit .buy__actions{margin-top:18px}

/* Écrans bas (portables 13", fenêtres réduites) : le calcul suffit pour
   l'image, mais les marges verticales, elles, doivent aussi maigrir. */
@media(max-height:800px){
  .phead--fin{padding:16px 0 14px}
  .sec--produit{padding:24px 0 56px}
  .sec--produit .pricebox{padding:16px 18px}
  .sec--produit .assure{margin-top:14px;padding-top:13px;gap:8px}
}

/* ================================================ bas de fiche produit
   Sous le pli, le visiteur ne cherche plus le prix : il cherche des
   raisons. Description, ce que fait la ressource, comment l'installer,
   et la fiche technique — dans cet ordre, du plus général au plus
   concret. */

/* Titre à gauche, texte d'accroche à droite : le titre en 900 élargi
   pèse lourd, une colonne de texte à côté l'équilibre au lieu de le
   laisser flotter seul sur toute la largeur. */
.sec__head--split{
  display:grid; grid-template-columns:1fr .85fr; gap:52px; align-items:end;
}
.sec__head--split p{max-width:52ch;margin:0;padding-bottom:6px}
@media(max-width:900px){
  .sec__head--split{grid-template-columns:1fr;gap:18px;align-items:start}
}

/* Paragraphe de description : mesure limitée. Une ligne de texte qui
   traverse un écran 27" ne se lit pas — l'œil perd le début de la ligne
   suivante. 74 caractères est la limite haute du confortable. */
.prose{max-width:74ch;color:var(--bone-dim);font-size:16px;line-height:1.72}
.prose strong{color:var(--bone);font-weight:600}
.prose + .prose{margin-top:18px}

/* --- Chiffres clés ---------------------------------------------------
   Séparés par un filet vertical plutôt qu'encadrés : trois cadres côte
   à côte feraient concurrence aux cartes produit juste au-dessus. */
.facts{display:grid;grid-template-columns:repeat(var(--n,4),1fr);margin-top:8px}
.facts div{padding:4px 26px;border-inline-start:1px solid var(--brushed)}
.facts div:first-child{padding-inline-start:0;border-inline-start:0}
.facts b{
  display:block; font-family:var(--display); font-weight:900;
  font-stretch:112%; font-size:clamp(30px,3.2vw,42px);
  line-height:1; color:var(--bone); letter-spacing:-.02em;
}
.facts span{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
}
@media(max-width:760px){
  .facts{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .facts div:nth-child(3){padding-inline-start:0;border-inline-start:0}
}

/* --- Barre d'achat collée en bas ------------------------------------
   Elle n'apparaît qu'une fois le bloc d'achat principal sorti de
   l'écran : la montrer d'emblée ferait doublon avec lui, et un bandeau
   permanent finit par être ignoré comme une publicité. */
.buybar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:60;
  background:rgba(11,11,12,.93); backdrop-filter:blur(12px);
  border-block-start:1px solid var(--brushed);
  transform:translateY(102%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.buybar.is-on{transform:none}
.buybar__in{
  display:flex; align-items:center; gap:16px;
  padding-block:12px;
  padding-inline-end:86px;   /* place réservée à la bulle de support */
}
.buybar__vis{
  flex:0 0 54px; width:54px; aspect-ratio:16/9;
  border:1px solid var(--brushed); background:var(--steel);
  object-fit:cover; display:block;
}
.buybar__id{min-width:0;flex:1}
.buybar__id b{
  display:block; font-family:var(--display); font-weight:900;
  font-stretch:112%; text-transform:uppercase; letter-spacing:-.01em;
  font-size:16px; color:var(--bone);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.buybar__id span{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bone-dim);
}
.buybar__px{display:flex;align-items:baseline;gap:9px;flex-shrink:0}
.buybar__px .price{font-family:var(--mono);font-weight:700;font-size:21px;color:var(--bone)}
.buybar__px .was{font-family:var(--mono);font-size:13px;color:var(--bone-dim);text-decoration:line-through}
.buybar .buy__actions{margin:0;flex-shrink:0;grid-template-columns:auto auto}

/* Quand la barre est là, la bulle de support se hisse au-dessus plutôt
   que de la chevaucher. */
body.a-barre .help{inset-block-end:88px}
body.a-barre .panel{inset-block-end:154px}

@media(max-width:820px){
  .buybar__in{padding-inline-end:76px;gap:12px}
  .buybar__vis, .buybar__id span{display:none}
  .buybar__id b{font-size:14px}
  .buybar .buy__actions a{padding-inline:14px;font-size:12.5px}
}

/* Bouts de code dans le texte courant : le monospace seul ne suffit pas
   à les détacher sur fond sombre, l'or s'en charge. */
.step code, .sec__head--split code, .prose code{
  font-family:var(--mono); font-size:.9em;
  color:var(--gold); background:rgba(212,175,55,.07);
  border:1px solid rgba(212,175,55,.16);
  padding:1px 5px; white-space:nowrap;
}

/* Dégagement sous le pied de page sur les fiches produit : la barre
   d'achat est en position fixe, elle recouvrirait les mentions légales.
   La réserve est constante — pas conditionnée à l'affichage de la barre
   — sinon la page se rallongerait au moment même où la barre apparaît. */
body:has(.buybar) .foot{padding-block-end:96px}

/* Titre de carte cliquable : il garde la couleur du texte au repos —
   un titre doré au milieu d'une carte se lirait comme une alerte — et
   ne vire à l'or qu'au survol, pour signaler qu'il mène quelque part. */
.card h3 a{color:inherit;text-decoration:none;transition:color .16s}
.card h3 a:hover{color:var(--gold)}

/* Produit gratuit : un seul bouton. La grille à trois colonnes le
   laisserait rachitique dans le premier tiers — on repasse à une
   colonne pleine. Détecté sur la structure plutôt que sur une classe :
   la règle vaut partout où il n'y a qu'une action. */
.buy__actions:has(> :only-child){grid-template-columns:1fr}

/* ============================================ fiche de documentation
   Trois colonnes : les ressources à gauche, le contenu au centre, le
   sommaire de la page à droite. Le sommaire n'est pas un ornement — sur
   une page qui compte dix sections, c'est le seul moyen d'atteindre
   « Permissions » sans faire défiler à l'aveugle. */
.docs--fiche{grid-template-columns:290px minmax(0,1fr) 232px}
@media(max-width:1240px){
  .docs--fiche{grid-template-columns:290px minmax(0,1fr)}
  .docs__toc{display:none}
}

.docs__toc{
  position:sticky; align-self:start;
  inset-block-start:calc(var(--h-nav) + 28px);
  padding:52px 30px 40px 0;
  max-height:calc(100svh - var(--h-nav)); overflow-y:auto;
}
.docs__toc h5{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:14px;
}
.docs__toc ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.docs__toc a{
  display:block;padding:5px 0 5px 12px;
  border-inline-start:1px solid var(--brushed);
  color:var(--bone-dim);text-decoration:none;font-size:13px;
  transition:color .16s,border-color .16s;
}
.docs__toc a:hover{color:var(--bone)}
/* La section en cours est marquée par layout.js pendant le défilement. */
.docs__toc a.is-here{color:var(--gold);border-inline-start-color:var(--gold)}

/* --- En-tête de fiche --- */
.dmeta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;
}
.dmeta span{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-dim);
  border:1px solid var(--brushed);padding:5px 9px;
}
.dmeta b{color:var(--bone);font-weight:600}

/* --- Sections ---
   Le décalage de défilement évite que le titre visé se retrouve caché
   sous l'en-tête fixe : sans lui, cliquer « Permissions » amène la
   section pile derrière la barre de navigation. */
.dsec{margin-top:64px;scroll-margin-top:calc(var(--h-nav) + var(--h-ticker) + 24px)}
.dsec > h2{
  font-family:var(--display);font-weight:900;font-stretch:110%;
  text-transform:uppercase;letter-spacing:-.02em;font-size:26px;
  padding-inline-start:14px;border-inline-start:2px solid var(--gold);
  margin-bottom:8px;
}
/* Ancre en dièse, révélée au survol : c'est ainsi qu'on partage le lien
   d'une section précise à quelqu'un qu'on dépanne. */
.dsec > h2 a{
  color:var(--brushed);text-decoration:none;margin-inline-start:12px;
  font-size:.7em;opacity:0;transition:opacity .16s,color .16s;
}
.dsec:hover > h2 a{opacity:1}
.dsec > h2 a:hover{color:var(--gold)}
.dsec > p{color:var(--bone-dim);font-size:15px;line-height:1.7;max-width:78ch;margin-top:14px}

/* --- Tableaux de référence ---
   Filet d'1 px et lignes jointives : contrairement aux cartes produit,
   un tableau DOIT être serré, l'alignement est ce qui le rend lisible. */
.dtable{width:100%;border-collapse:collapse;margin-top:20px;font-size:13.5px}
.dtable th{
  text-align:start;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);
  font-weight:400;padding:10px 14px;border:1px solid var(--brushed);
  background:rgba(255,255,255,.018);white-space:nowrap;
}
.dtable td{
  padding:11px 14px;border:1px solid var(--brushed);
  color:var(--bone-dim);line-height:1.55;vertical-align:top;
}
.dtable tr:hover td{background:rgba(255,255,255,.02)}
.dtable code{
  font-family:var(--mono);font-size:12.5px;color:var(--gold);
  white-space:nowrap;
}
.dtable td:first-child{color:var(--bone)}
/* Un tableau large défile dans sa propre boîte : la page, elle, ne doit
   jamais partir en défilement horizontal. */
.dwrap{overflow-x:auto;margin-top:20px}
.dwrap .dtable{margin-top:0;min-width:520px}

/* --- Blocs de code --- */
.dcode{
  margin-top:20px;border:1px solid var(--brushed);
  background:rgba(11,11,12,.66);position:relative;
}
.dcode__t{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-dim);
  padding:9px 14px;border-block-end:1px solid var(--brushed);
}
.dcode pre{
  margin:0;padding:16px 14px;overflow-x:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--bone);
}
.dcode .cm{color:var(--bone-dim)}   /* commentaire */
.dcode .kw{color:var(--gold)}       /* mot-clé : ensure, add_ace…      */

/* --- Encarts d'avertissement --- */
.dnote{
  display:flex;gap:13px;margin-top:16px;padding:14px 16px;
  border:1px solid var(--brushed);border-inline-start:2px solid var(--gold);
  background:rgba(212,175,55,.04);
  color:var(--bone-dim);font-size:13.5px;line-height:1.6;
}
.dnote::before{content:'!';font-family:var(--mono);font-weight:700;color:var(--gold);flex-shrink:0}

/* --- Liste des étapes d'installation --- */
.dsteps{list-style:none;counter-reset:e;margin-top:20px;display:flex;flex-direction:column;gap:14px}
.dsteps li{
  counter-increment:e;position:relative;padding-inline-start:38px;
  color:var(--bone-dim);font-size:14.5px;line-height:1.65;
}
.dsteps li::before{
  content:counter(e,decimal-leading-zero);
  position:absolute;inset-inline-start:0;inset-block-start:0;
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold);
  border:1px solid var(--brushed);padding:3px 6px;line-height:1;
}
.dsteps code{font-family:var(--mono);font-size:.92em;color:var(--gold)}

/* La recherche de la barre latérale masque les entrées qui ne
   correspondent pas ; sans résultat, on le dit au lieu de laisser une
   liste vide sans explication. */
.docs__nav li[hidden]{display:none}
.docs__vide{
  padding:12px 14px;font-size:13px;color:var(--bone-dim);
  border:1px dashed var(--brushed);
}

/* ============================================ bouton de support, repris
   La version pleine or faisait tache : un aplat de 54 px de la couleur
   d'accent, posé par-dessus tout, criait plus fort que n'importe quel
   bouton d'achat. Le liseré doré sur corps d'acier dit la même chose
   sans hurler, et reprend le poinçon — la signature de la marque.

   Le liseré est obtenu par superposition : un clip-path rogne les
   bordures ET les box-shadow, donc ni `border` ni `box-shadow` ne
   fonctionnent ici. Le fond doré tient lieu de contour, le pseudo-élément
   en retrait d'1 px pose le corps sombre par-dessus. */
.help{
  width:48px;height:48px;
  background:var(--gold);
  box-shadow:none;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.55));
  clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);
  transition:transform .2s ease,filter .2s ease;
}
.help::before{
  content:'';position:absolute;inset:1px;
  background:var(--steel-2);
  clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);
  transition:background .18s ease;
}
.help svg{
  position:relative;z-index:1;
  width:20px;height:20px;fill:var(--gold);
  transition:fill .18s ease;
}
.help:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 26px rgba(212,175,55,.28))}
.help:hover::before{background:var(--gold)}
.help:hover svg{fill:var(--forge)}

/* La pastille d'état reprend la forme du poinçon plutôt qu'un cercle :
   sur une interface qui n'a pas un seul angle arrondi, un disque parfait
   se voit comme un cheveu sur la soupe. */
.help__dot{
  inset-block-start:-1px;inset-inline-end:-1px;
  width:11px;height:11px;
  border:0;border-radius:0;
  background:var(--forge);
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
  display:grid;place-items:center;
}
/* Par DÉFAUT la pastille est grise. Le vert est un cas particulier
   qu'il faut mériter : si jamais data-etat manque ou vaut autre chose,
   on affiche « personne » plutôt que de promettre une réponse. */
.help__dot::after{
  content:'';width:7px;height:7px;background:var(--bone-dim);
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
}
.help[data-etat="en-ligne"] .help__dot::after{
  background:#22C55E;
  animation:battement 2.6s ease-in-out infinite;
}

/* La bande de portes file désormais d'un bord à l'autre. Les plaques
   d'extrémité reprennent la marge du conteneur, sinon leur texte
   commencerait plus près du bord que tout le reste de la page. */
.rack__in > .plate:first-child{padding-inline-start:clamp(20px,3.4vw,56px)}
.rack__in > .plate:last-child{padding-inline-end:clamp(20px,3.4vw,56px)}
@media(max-width:820px){
  .rack__in{grid-template-columns:repeat(2,1fr)}
}

/* La frise de chiffres file d'un bord à l'autre, comme la bande de
   portes. Mêmes marges d'extrémité pour que le premier chiffre reste
   aligné sur le texte du reste de la page. */
.stats > .stat:first-child{padding-inline-start:clamp(20px,3.4vw,56px)}
.stats > .stat:last-child{padding-inline-end:clamp(20px,3.4vw,56px)}
@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ======================================== séquence de forge (installation)
   Remplace la frise horizontale numérotée — trop directement empruntée.
   Ici les étapes descendent comme une suite de coups frappés, reliées par
   un filet qui refroidit du doré vers l'acier à mesure qu'on s'éloigne du
   poinçon. La métaphore est la nôtre, et la lecture verticale se tient
   mieux sur un écran étroit qu'une frise à quatre colonnes.

   À droite, le server.cfg réel reste visible pendant qu'on descend : on
   lit l'étape et on voit la ligne à copier, sans aller-retour. */
.forge{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:56px;margin-top:46px;align-items:start}
@media(max-width:980px){.forge{grid-template-columns:1fr;gap:34px}}

.fstep{
  position:relative;
  display:grid; grid-template-columns:58px minmax(0,1fr); gap:24px;
  padding-block:6px 30px;
}
.fstep:last-child{padding-block-end:0}

/* Le filet part sous le poinçon et rejoint le suivant. Tracé par chaque
   étape vers la suivante plutôt que posé derrière l'ensemble : il
   s'arrête donc tout seul à la dernière. */
.fstep:not(:last-child)::before{
  content:''; position:absolute; z-index:0;
  inset-inline-start:28px; inset-block-start:52px; inset-block-end:-6px;
  width:1px;
  background:linear-gradient(180deg, var(--gold), var(--brushed) 62%);
}

/* Le poinçon frappé : creux au centre, arête claire en haut, ombre
   portée en bas — un métal qu'on a réellement enfoncé. */
.fstep__mark{
  position:relative; z-index:1;
  width:58px; height:58px;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:15px; font-weight:700;
  color:var(--gold); letter-spacing:.02em;
  background:linear-gradient(160deg, var(--brushed), var(--steel) 58%, var(--forge));
  clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 4px rgba(0,0,0,.55);
  transition:color .2s, background .2s;
}
/* L'étape survolée rougeoie : le métal est encore chaud. */
.fstep:hover .fstep__mark{
  color:var(--molten);
  background:linear-gradient(160deg, #2f2620, var(--steel) 58%, var(--forge));
}
.fstep__body{padding-top:9px;min-width:0}
.fstep h3{
  font-size:15px; font-weight:600; color:var(--bone);
  text-transform:uppercase; letter-spacing:.045em; margin-bottom:9px;
}
.fstep p{color:var(--bone-dim);font-size:14px;line-height:1.66;margin:0;max-width:56ch}
.fstep code{
  font-family:var(--mono); font-size:.9em; color:var(--gold);
  background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.16);
  padding:1px 5px; white-space:nowrap;
}

/* Le bloc de configuration accompagne la descente. */
.forge__cfg{position:sticky;inset-block-start:calc(var(--h-nav) + 26px)}
.forge__cfg .dcode{margin-top:0}
@media(max-width:980px){.forge__cfg{position:static}}

/* ============================================== le poinçon, en grand
   Il n'existait qu'en miniature sur les cartes. C'est pourtant la
   signature de la marque, et la seule pièce du dessin que personne
   d'autre n'a : il porte l'information qui compte — version et
   frameworks — au lieu de décorer.

   Sur la fiche produit il remplace la rangée de puces de framework :
   même contenu, mais frappé dans le métal plutôt que posé dessus. */
.punchmark{
  display:inline-flex; align-items:stretch;
  margin:20px 0 22px;
  background:linear-gradient(160deg, var(--brushed), var(--steel) 55%, var(--forge));
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 5px rgba(0,0,0,.5);
}
.punchmark > *{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:11px 18px;
}
.punchmark > * + *{border-inline-start:1px solid rgba(0,0,0,.45);box-shadow:inset 1px 0 0 rgba(255,255,255,.05)}
.punchmark dt{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone-dim);
}
.punchmark dd{
  margin:0; font-family:var(--mono); font-size:13px; font-weight:700;
  color:var(--gold); letter-spacing:.04em;
}
.punchmark dd.fw{color:var(--bone);font-size:11.5px;letter-spacing:.1em}
@media(max-width:520px){
  .punchmark{display:grid;grid-template-columns:1fr 1fr}
  .punchmark > * + *{border-inline-start:0;border-block-start:1px solid rgba(0,0,0,.45)}
}

/* Sur la fiche de documentation, le même objet, posé contre le titre. */
.dpunch{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;padding-inline-start:20px}
.dpunch .punchmark{margin:0}

/* Le parcours d'achat de l'accueil garde sa lecture horizontale — quatre
   étapes courtes s'y prêtent — mais adopte le langage de la forge : le
   marqueur devient un poinçon frappé, et le filet refroidit du doré vers
   l'acier au lieu d'être un trait gris uniforme. */
.step{padding-top:34px}
.step::before{
  inset-block-start:18px; inset-inline-start:44px;
  width:calc(100% - 28px);
  background:linear-gradient(90deg, var(--gold), var(--brushed) 58%);
}
.step__n{
  width:38px;height:38px;
  border:0;
  font-size:13px;
  background:linear-gradient(160deg, var(--brushed), var(--steel) 58%, var(--forge));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 4px rgba(0,0,0,.55);
  transition:color .2s, background .2s;
}
.step:hover .step__n{
  color:var(--molten);
  background:linear-gradient(160deg, #2f2620, var(--steel) 58%, var(--forge));
}
@media(max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:30px 26px}
  .step:nth-child(2)::before{display:none}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .step::before{display:none}
}

/* ==================================== connexion des comptes, en en-tête
   Deux comptes, pas deux alternatives : Discord identifie le client et
   porte son rôle ; Cfx.re est l'identité FiveM contre laquelle Tebex
   authentifie l'achat. Un bouton unique derrière une fenêtre cachait
   cela — un client connecté par l'un n'avait aucun chemin évident vers
   l'autre. Ici le bouton d'un compte déjà relié disparaît : ce qui reste
   est toujours l'action utile suivante. */
.connects{display:flex;align-items:center;gap:8px;margin-inline-start:18px;flex-shrink:0}
.connect{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px;
  border:1px solid var(--brushed);
  color:var(--bone-dim);
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition:border-color .18s, color .18s, background .18s;
}
.connect:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.06)}
.connect svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

/* Sous 1180 px le libellé tombe : l'icône suffit à reconnaître Discord,
   et la barre a besoin de sa place pour les liens. */
@media(max-width:1180px){
  .connect span{display:none}
  .connect{padding:8px 10px}
}
/* En dessous, la barre passe au menu mobile : les boutons y sont repris
   en pleine largeur, plus lisibles qu'une icône seule. */
@media(max-width:960px){
  .nav__in > .connects{display:none}
}
.connects--drawer{
  display:flex; flex-direction:column; gap:9px;
  margin:0 0 16px; width:100%;
}
.connect--large{
  justify-content:center;
  padding:13px 16px; font-size:11px;
}

/* La barre se resserre au défilement : les boutons suivent. */
.topbar.is-compact .connect{padding:6px 11px;font-size:9.5px}
.topbar.is-compact .connect svg{width:13px;height:13px}

/* ============================================ dépôt d'avis (page Avis)
   Deux états générés, un seul affiché : on ne peut écrire qu'après avoir
   acheté, et la page le montre au lieu de l'expliquer. */
.avisbox{
  border:1px solid var(--brushed);
  background:rgba(22,24,27,.55); backdrop-filter:blur(3px);
  padding:30px 28px; margin-top:38px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.avisbox > p{color:var(--bone-dim);font-size:15px;line-height:1.65;max-width:70ch}
.avisbox .connects{margin:22px 0 0}
.avisbox__ok{color:var(--bone) !important;font-weight:600}
.avisbox__note{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--brushed);
  font-size:13px;color:var(--bone-dim);
}

.avislist{display:flex;flex-direction:column;gap:1px;background:var(--brushed);margin-top:22px}
.avisline{
  display:flex;align-items:center;gap:16px;
  background:var(--forge);padding:14px 16px;
}
.avisline img{
  width:64px;aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--brushed);flex-shrink:0;
}
.avisline > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.avisline b{
  font-family:var(--display);font-weight:900;font-stretch:110%;
  text-transform:uppercase;letter-spacing:-.01em;font-size:15px;color:var(--bone);
}
.avisline span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--bone-dim);text-transform:uppercase}
.avisline .btn{padding:10px 18px;font-size:10px;flex-shrink:0}
/* Déjà écrit : la ligne reste, en retrait, pour que le client sache que
   c'est passé plutôt que de croire à une disparition. */
.avisline--done{opacity:.55}
@media(max-width:620px){
  .avisline{flex-wrap:wrap}
  .avisline .btn{width:100%;justify-content:center}
}

/* ================================================ avis, rendu complet
   Le gabarit d'un avis publié. Il n'apparaît qu'avec ?avis=exemple : la
   grille vide reste l'état par défaut, parce qu'aucun avis réel n'existe
   encore et qu'une boutique en ligne n'invente pas les siens. */
.exemple__bandeau{
  display:inline-block; margin-bottom:22px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--forge); background:var(--molten);
  padding:7px 13px;
}
.exemple__bandeau code{font-family:var(--mono);background:rgba(0,0,0,.22);padding:1px 5px}

.review--full{gap:0}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.stars{display:flex;gap:2px;font-size:14px;line-height:1;color:var(--brushed)}
.stars .on{color:var(--gold)}
.review__date{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--bone-dim);text-transform:uppercase}
.review__title{
  font-family:var(--display);font-weight:900;font-stretch:110%;
  text-transform:uppercase;letter-spacing:-.012em;font-size:16px;
  color:var(--bone);margin-bottom:10px;
}
.review--full q{font-size:14.5px;line-height:1.65;color:var(--bone-dim)}

/* La réponse de la boutique, en retrait : elle appartient à l'avis sans
   lui voler la parole. */
.review__reply{
  margin-top:16px;padding:14px 16px;
  border-inline-start:2px solid var(--gold);
  background:rgba(212,175,55,.05);
}
.review__reply span{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.review__reply p{margin:0;font-size:13.5px;line-height:1.6;color:var(--bone-dim)}

.review__who{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--brushed);
}
.review__who img{width:44px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--brushed);flex-shrink:0}
.review__who > div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.review__who b{font-size:13.5px;color:var(--bone);font-weight:600}
.review__who > div span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--bone-dim);text-transform:uppercase}
/* « Acheteur vérifié » n'est pas un badge décoratif : sans ligne de
   commande payée, l'avis n'aurait pas pu exister. */
.review__ok{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#22C55E;border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.08);padding:4px 8px;flex-shrink:0;
}
@media(max-width:1000px){.reviews{grid-template-columns:1fr}}

/* ============================================== formulaire d'avis
   Une fenêtre plutôt qu'une page : le client vient de voir la ressource
   qu'il commente, l'arracher à ce contexte lui ferait perdre le fil. */
.ecrin{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.72); backdrop-filter:blur(4px);
}
.ecrin__boite{
  width:100%; max-width:540px; max-height:90svh; overflow-y:auto;
  background:var(--steel); border:1px solid var(--brushed);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.ecrin__tete{
  display:flex; align-items:center; gap:14px;
  padding:20px 22px; border-block-end:1px solid var(--brushed);
}
.ecrin__tete img{width:56px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--brushed);flex-shrink:0}
.ecrin__tete > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ecrin__tete b{
  font-family:var(--display);font-weight:900;font-stretch:110%;
  text-transform:uppercase;letter-spacing:-.01em;font-size:16px;color:var(--bone);
}
.ecrin__tete span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#22C55E}
.ecrin__x{
  background:none;border:0;color:var(--bone-dim);cursor:pointer;
  font-size:15px;padding:6px;transition:color .16s;
}
.ecrin__x:hover{color:var(--bone)}

.ecrin__corps{padding:22px}
.ecrin__corps label{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);
}
.ecrin__corps label em{font-style:normal;opacity:.6}
.ecrin__corps input,.ecrin__corps textarea{
  width:100%;margin-bottom:20px;
  background:var(--forge);border:1px solid var(--brushed);
  color:var(--bone);font-family:var(--body);font-size:14.5px;
  padding:11px 13px;outline:none;resize:vertical;
  transition:border-color .16s;
}
.ecrin__corps input:focus,.ecrin__corps textarea:focus{border-color:var(--gold)}

/* Les étoiles se remplissent au clic. Grandes : c'est le seul champ
   obligatoire, et le premier geste du formulaire. */
.noter{display:flex;gap:4px;margin-bottom:22px}
.noter button{
  background:none;border:0;cursor:pointer;padding:2px;
  font-size:30px;line-height:1;color:var(--brushed);
  transition:color .14s,transform .14s;
}
.noter button:hover{transform:scale(1.12)}
.noter button.on{color:var(--gold)}

.ecrin__compte{margin:-12px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--bone-dim)}
.ecrin__pied{padding:18px 22px;border-block-start:1px solid var(--brushed)}
.ecrin__pied .btn{width:100%;justify-content:center}
.ecrin__pied .btn:disabled{opacity:.35;cursor:not-allowed}

/* Après l'envoi : on annonce la relecture. Sans cet écran, le client
   cherche son avis, ne le trouve pas, et croit à une suppression. */
.ecrin__fini{padding:44px 30px;text-align:center}
.ecrin__coche{
  width:52px;height:52px;margin:0 auto 20px;
  display:grid;place-items:center;font-size:24px;
  color:var(--gold);border:1px solid var(--gold);
  clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);
}
.ecrin__fini b{
  display:block;margin-bottom:12px;
  font-family:var(--display);font-weight:900;font-stretch:112%;
  text-transform:uppercase;font-size:20px;color:var(--bone);
}
.ecrin__fini p{color:var(--bone-dim);font-size:14px;line-height:1.6;max-width:42ch;margin:0 auto 26px}

/* ==================================================== panier
   Le bouton n'apparaît que si le panier contient quelque chose. Un panier
   vide affiché en permanence est du bruit ; son apparition est justement
   le signal qu'on veut donner. */
.cartbtn{
  position:relative; margin-inline-start:10px; flex-shrink:0;
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:1px solid var(--brushed); color:var(--bone-dim);
  cursor:pointer; transition:border-color .18s, color .18s;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.cartbtn:hover{border-color:var(--gold);color:var(--gold)}
.cartbtn svg{width:17px;height:17px;fill:currentColor}
.cartbtn i{
  position:absolute; inset-block-start:-6px; inset-inline-end:-6px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  background:var(--gold); color:var(--forge);
  font-family:var(--mono); font-size:10px; font-weight:700; font-style:normal;
  clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);
}

.cart{
  position:fixed; inset:0; z-index:130;
  background:rgba(0,0,0,.68); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.cart.is-open{opacity:1;pointer-events:auto}
.cart__in{
  position:absolute; inset-block:0; inset-inline-end:0;
  width:min(94vw,410px);
  background:var(--steel); border-inline-start:1px solid var(--brushed);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.cart.is-open .cart__in{transform:none}
.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-block-end:1px solid var(--brushed);
}
.cart__head b{
  font-family:var(--display); font-weight:900; font-stretch:112%;
  text-transform:uppercase; letter-spacing:-.01em; font-size:17px;
}
.cart__x{background:none;border:0;color:var(--bone-dim);cursor:pointer;font-size:14px;padding:6px}
.cart__x:hover{color:var(--bone)}

.cart__list{flex:1;overflow-y:auto;padding:8px 0}
.cart__line{
  display:flex; align-items:center; gap:13px;
  padding:13px 22px; border-block-end:1px solid var(--brushed);
}
.cart__line img{width:56px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--brushed);flex-shrink:0}
.cart__line > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cart__line b{font-size:14px;color:var(--bone);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart__line span{font-family:var(--mono);font-size:12px;color:var(--gold)}
.cart__del{background:none;border:0;color:var(--bone-dim);cursor:pointer;font-size:11px;padding:6px;flex-shrink:0}
.cart__del:hover{color:var(--molten)}

.cart__vide{padding:44px 22px;text-align:center;color:var(--bone-dim);font-size:14px}
.cart__foot{padding:20px 22px;border-block-start:1px solid var(--brushed)}
.cart__total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.cart__total span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.cart__total b{font-family:var(--mono);font-size:22px;color:var(--bone)}
.cart__go{width:100%;justify-content:center}
.cart__vat{margin-top:12px;text-align:center;font-size:11.5px;color:var(--bone-dim)}

/* ============================================ annonce de retour d'auth
   Posée en bas à droite : le haut de page porte déjà l'en-tête, la
   banderole promo et parfois la barre d'achat collante. Un bandeau de
   plus les repousserait, et le contenu sauterait au chargement. */
.annonce{
  position:fixed; z-index:60; right:18px; bottom:18px; max-width:min(420px,calc(100vw - 36px));
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px;
  background:var(--steel-2); border:1px solid var(--brushed);
  border-inline-start:2px solid var(--gold);
  color:var(--bone); font-size:13.5px; line-height:1.5;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  animation:annonce-entre .22s ease both;
}
/* L'erreur porte l'orange « métal en fusion », réservé au vivant. */
.annonce--ko{border-inline-start-color:var(--molten)}
.annonce__x{
  flex:none; margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--bone-dim); font-size:13px; line-height:1; padding:2px 0;
  transition:color .16s;
}
.annonce__x:hover{color:var(--bone)}
@keyframes annonce-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Le mouvement est décoratif : il disparaît si le visiteur l'a refusé. */
@media (prefers-reduced-motion:reduce){.annonce{animation:none}}
@media (max-width:520px){
  .annonce{right:12px; left:12px; bottom:12px; max-width:none}
}

/* ============================================ menu de compte
   Remplace les boutons de connexion une fois le visiteur identifié.
   La vignette reste petite : c'est un accès, pas une revendication. */
.compte{position:relative}
.compte__btn{
  display:grid; place-items:center; padding:0;
  background:none; border:1px solid var(--brushed); cursor:pointer;
  transition:border-color .18s;
}
.compte__btn:hover,.compte.is-open .compte__btn{border-color:var(--gold)}
.compte__vig{
  display:grid; place-items:center; width:32px; height:32px; overflow:hidden;
  background:var(--steel-2); color:var(--gold);
  font-family:var(--mono); font-size:13px; font-weight:700;
}
.compte__vig img{width:100%;height:100%;object-fit:cover;display:block}
.compte__vig--gros{width:40px;height:40px;font-size:16px;flex:none}

.compte__menu{
  position:absolute; z-index:50; top:calc(100% + 9px); inset-inline-end:0;
  min-width:250px;
  background:var(--steel); border:1px solid var(--brushed);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  animation:compte-entre .16s ease both;
}
@keyframes compte-entre{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.compte__menu{animation:none}}

/* Le bloc d'identité : d'où vient le compte, son nom, son identifiant.
   L'identifiant est ce que le client recopie pour le support — il est en
   mono et sélectionnable, pas décoratif. */
.compte__id{
  display:flex; gap:12px; align-items:center;
  padding:14px; background:var(--steel-2); border-bottom:1px solid var(--brushed);
}
.compte__id > div{min-width:0}
.compte__src{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim);
}
.compte__id b{
  display:block; font-family:var(--display); font-size:14px; color:var(--bone);
  letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.compte__num{
  display:block; font-family:var(--mono); font-size:10.5px; color:var(--bone-dim);
  user-select:all;                     /* un clic sélectionne tout l'ID */
}

.compte__liens{display:flex;flex-direction:column;padding:6px}
.compte__liens--bas{border-top:1px solid var(--brushed)}
.compte__liens a,.compte__liens button{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:13px; text-align:start;
  color:var(--bone); text-decoration:none;
  transition:background .14s,color .14s;
}
.compte__liens a:hover,.compte__liens button:hover{background:var(--steel-2);color:var(--gold)}
.compte__liens svg{width:16px;height:16px;flex:none;fill:currentColor;opacity:.75}
/* La déconnexion porte l'orange : c'est la seule action qui défait. */
.compte__sortir{color:var(--molten) !important}
.compte__sortir:hover{background:rgba(255,107,26,.09) !important;color:var(--molten) !important}
.compte__sortir[disabled]{opacity:.5;cursor:progress}

/* Dans le tiroir mobile, le menu s'ouvre en pleine largeur plutôt qu'en
   flottant : un panneau flottant dans un panneau coulissant se coupe. */
.compte--drawer{width:100%}
.compte--drawer .compte__btn{width:100%;justify-items:start;padding:8px;justify-content:flex-start}
.compte--drawer .compte__menu{position:static;min-width:0;box-shadow:none;margin-top:8px}

/* ============================================ page « My orders »
   Une commande = un bloc. Pas de tableau : sur mobile un tableau à
   quatre colonnes se replie mal, et la ligne la plus utile — ce qui a
   été acheté — s'y perd. */
.cmd{
  border:1px solid var(--brushed); background:var(--steel);
  margin-bottom:16px;
}
.cmd__tete{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 16px; background:var(--steel-2); border-bottom:1px solid var(--brushed);
}
.cmd__date{display:block;font-family:var(--display);font-size:14px;color:var(--bone)}
/* La référence sert au support : sélectionnable d'un clic. */
.cmd__ref{
  display:block; font-family:var(--mono); font-size:10.5px; color:var(--bone-dim);
  user-select:all; word-break:break-all;
}
.cmd__etat{
  flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 9px; border:1px solid;
}
.cmd__etat--ok{color:#22C55E;border-color:rgba(34,197,94,.42)}
.cmd__etat--attente{color:var(--gold);border-color:rgba(212,175,55,.42)}
.cmd__etat--mort{color:var(--bone-dim);border-color:var(--brushed)}

.cmd__lignes{list-style:none;margin:0;padding:6px 16px}
.cmd__lignes li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid rgba(42,46,51,.55);
  font-size:14px; color:var(--bone);
}
.cmd__lignes li:last-child{border-bottom:0}
.cmd__lignes em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--bone-dim)}
.cmd__lignes b{font-family:var(--mono);font-size:13px;color:var(--bone);white-space:nowrap}

.cmd__pied{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:12px 16px; border-top:1px solid var(--brushed);
}
.cmd__pied span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.cmd__pied b{font-family:var(--display);font-size:18px;color:var(--gold)}

/* État vide, partagé par « pas connecté » et « aucune commande ». */
.vide{
  border:1px solid var(--brushed); background:var(--steel);
  padding:44px 22px; text-align:center;
}
.vide p{color:var(--bone-dim);margin-bottom:18px}
.vide .connects{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media (max-width:520px){
  .cmd__tete{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Le lien d'action dans une annonce : le geste attendu doit être à portée
   de clic, pas à chercher dans l'en-tête. */
.annonce__go{
  display:inline-block; margin-inline-start:6px;
  color:var(--gold); text-decoration:underline; text-underline-offset:3px;
  font-weight:600; white-space:nowrap;
}
.annonce__go:hover{color:var(--bone)}

/* ============================================ fin de parcours
   Confirmation et annulation de paiement. Centré et aéré : c'est le seul
   moment où le visiteur n'a rien à parcourir, juste à être rassuré. */
.fin{
  max-width:620px; margin:0 auto; text-align:center;
  padding:clamp(40px,7vw,80px) clamp(20px,4vw,40px);
  border:1px solid var(--brushed); background:var(--steel);
}
.fin .eyebrow{justify-content:center}
.fin h1{
  font-family:var(--display); font-weight:900; font-stretch:118%;
  text-transform:uppercase; letter-spacing:-.028em; line-height:.95;
  font-size:clamp(30px,5vw,50px); margin:14px 0 18px;
}
.fin p{color:var(--bone-dim); line-height:1.7; max-width:52ch; margin-inline:auto}
.fin p b{color:var(--bone); font-weight:600}

/* Le sceau : la marque frappée quand l'affaire est conclue. */
.fin__sceau{
  width:64px; height:64px; margin:0 auto 26px;
  display:grid; place-items:center;
  border:1px solid var(--gold); color:var(--gold);
  clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.fin__sceau svg{width:30px;height:30px;fill:currentColor}

.fin__actes{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin:30px 0 0;
}
.fin__note{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--brushed);
  font-size:13px;
}
@media (max-width:520px){
  .fin__actes{flex-direction:column}
  .fin__actes .btn{width:100%}
}

/* ============================================ modération des avis */
.mod{border:1px solid var(--brushed);background:var(--steel);padding:18px;margin-bottom:14px}
.mod__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.mod__tete b{display:block;font-family:var(--display);font-size:15px;color:var(--bone)}
.mod__tete span{display:block;font-family:var(--mono);font-size:11px;color:var(--bone-dim);margin-top:3px}
.mod__note{flex:none;color:var(--gold);font-size:15px;letter-spacing:2px}
.mod h3{font-family:var(--display);font-size:16px;color:var(--bone);margin-bottom:7px}
.mod p{color:var(--bone-dim);font-size:14px;line-height:1.65;white-space:pre-wrap}
.mod__actes{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
/* Le rejet porte l'orange : c'est la seule action qui retire. */
.mod__rejet{color:var(--molten);border-color:rgba(255,107,26,.4)}
.mod__rejet:hover{background:rgba(255,107,26,.09)}
.mod__saisie{margin-top:14px}
.mod__saisie textarea{
  width:100%;padding:11px 13px;
  background:var(--forge);border:1px solid var(--brushed);color:var(--bone);
  font-family:var(--body);font-size:14px;line-height:1.6;resize:vertical;
}
.mod__saisie textarea:focus{outline:none;border-color:var(--gold)}
@media (max-width:520px){
  .mod__tete{flex-direction:column;gap:8px}
  .mod__actes .btn{flex:1 1 auto}
}

/* ---------------------------------------------------- marque au mobile
   `.brand` n'avait aucune règle sous 960 px : 19 px à toute largeur. Sur
   un écran de 375 px, coincée entre le burger et le panier, elle passait
   sur DEUX lignes — « SHADOW » puis « FORGE » — et l'en-tête montait de
   30 à 61 px. Rien ne cassait, mais la barre paraissait tassée et mal
   équilibrée : c'est ce que « pas responsive » veut souvent dire.

   Mesuré au rendu réel : 61 px sous 430 px, 30 px à 768 px. */
@media (max-width:560px){
  .brand{font-size:15px;gap:7px;white-space:nowrap}
  img.punch{width:26px;height:26px}
}
/* Sous 380 px, même réduit le nom ne tient plus. L'emblème seul suffit —
   c'est lui qu'on reconnaît, et il reste cliquable vers l'accueil. */
@media (max-width:380px){
  .brand__mot{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;   /* lisible par les lecteurs d'écran */
  }
}