/* ============================================================================
   PyRobloxMaker — feuille de style de la REFONTE.

   CE QUI CHANGE, ET POURQUOI

   L'ancienne feuille empilait des cartes blanches arrondies avec des ombres
   portees, une grille de 22 familles en petits carres, et surtout elle demandait
   les polices « Jost » et « Cormorant » SANS JAMAIS LES FOURNIR : le navigateur
   retombait sur Georgia et system-ui. C'est le tell n°1 du site fait a la hate.

   Les principes retenus ici :

   1. DEUX POLICES, AUTO-HEBERGEES. Cormorant Garamond (serif tres contraste)
      pour les titres, Jost (sans geometrique) pour l'interface. Aucune
      dependance a un serveur tiers.
   2. ANGLES VIFS. Aucun rayon d'arrondi : c'est le signe d'un site qui assume
      ses formes au lieu de les adoucir. Le seul arrondi est sur l'avatar du
      compte, ou il a un sens.
   3. AUCUNE OMBRE PORTEE. Un filet de 1 px separe les blocs. Une ombre sur une
      carte est une decoration qui masque un manque de composition.
   4. CONTRASTE D'ECHELLE. Titres tres grands, libelles tres petits et tres
      espaces en capitales. C'est l'ecart entre ces deux extremes qui fait haut
      de gamme, pas la decoration.
   5. LE ROUGE ROBLOX COMME ACCENT UNIQUE, jamais en aplat de fond. L'encre est
      chaude (jamais un gris bleute), le papier est sable.
   6. ON REFERENCE ROBLOX PARTOUT, dans les mots et dans les gestes : chaque
      section dit ce que l'acheteur fait DANS STUDIO, avec le vocabulaire du
      metier (Studs, StarterPack, Tool, Workspace, rbxmx, Toolbox, Humanoid).
   ========================================================================== */

/* Les polices sont declarees ICI et non par @import : un @import ajoute un
   aller-retour reseau avant que le navigateur sache quoi telecharger, et le
   texte s'affiche d'abord en Georgia. */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('polices/jost.woff2') format('woff2-variations'),
       url('polices/jost.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('polices/cormorant.woff2') format('woff2-variations'),
       url('polices/cormorant.woff2') format('woff2');
}

:root{
  /* ── encres et papiers (chauds : jamais de gris bleute) ───────────────── */
  --encre:#171310;
  --encre-doux:#5d564d;
  --encre-faible:#8a8177;
  --papier:#f6f3ee;
  --papier-2:#eae4da;
  --blanc:#fffdfa;
  --trait:#ded6c9;
  --trait-fort:#c4b9a8;

  /* ── l'accent : le rouge Roblox, sobre et reserve ─────────────────────── */
  --rouge:#c8102e;
  --rouge-fonce:#9d0c23;
  --rouge-clair:#f2d7dc;

  /* ── ce que l'on retrouve dans Roblox Studio ─────────────────────────── */
  --stud:#1c7c54;          /* vert « script valide » */
  --or:#a8842c;

  /* ── typographie ──────────────────────────────────────────────────────── */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  --enveloppe:1180px;
  --filet:1px solid var(--trait);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--sans); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(180deg,rgba(200,16,46,.03),transparent 420px),
    radial-gradient(1200px 600px at 80% -10%,rgba(168,132,44,.07),transparent 70%);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;
  letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,7.4vw,5.1rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.5rem)}
p{margin:0 0 1rem}

.enveloppe{max-width:var(--enveloppe);margin:0 auto;padding:0 22px}

/* ── libelles : petits, espaces, en capitales ──────────────────────────── */
.surtitre{
  font-size:.70rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--rouge); font-weight:600; margin:0 0 .85rem;
  display:flex; align-items:center; gap:.6rem;
}
.surtitre::before{content:"";width:26px;height:1px;background:var(--rouge);flex:0 0 auto}
.surtitre.gris{color:var(--encre-faible)}
.surtitre.gris::before{background:var(--trait-fort)}

/* ── en-tete ───────────────────────────────────────────────────────────── */
.entete{
  position:sticky; top:0; z-index:40; background:rgba(246,243,238,.94);
  backdrop-filter:blur(8px); border-bottom:var(--filet);
}
.entete .barre{
  /* MEME enveloppe que les sections, mais le retrait lateral s'AJOUTE a celui de
     l'enveloppe : sans ca le logo ne s'aligne pas sur le titre (mesure : 52 px
     d'ecart a 1440 px). */
  max-width:var(--enveloppe); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:1.4rem;
}
.marque{
  font-family:var(--serif); font-size:1.45rem; font-weight:700;
  text-decoration:none; letter-spacing:-.02em; display:flex;
  align-items:baseline; gap:.28rem;
}
.marque b{color:var(--encre)}
.marque span{color:var(--rouge)}
.marque em{
  font-family:var(--sans); font-style:normal; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--encre-faible); display:block; margin-top:-2px;
}
.entete nav{display:flex; gap:1.5rem; margin-left:auto; align-items:center}
.entete nav a{
  text-decoration:none; font-size:.87rem; letter-spacing:.02em;
  color:var(--encre-doux); padding:6px 0; border-bottom:1px solid transparent;
  white-space:nowrap; transition:color .15s,border-color .15s;
}
.entete nav a:hover{color:var(--encre);border-bottom-color:var(--encre)}
.entete nav a.actif{color:var(--rouge);border-bottom-color:var(--rouge)}
.jauge a{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  border:1px solid var(--trait-fort); padding:8px 14px; font-size:.83rem;
  letter-spacing:.03em; background:var(--blanc);
}
.jauge a:hover{border-color:var(--rouge);color:var(--rouge)}
.jauge b{font-family:var(--serif);font-size:1.05rem;font-weight:700}

/* ── bandeau defilant : on parle le langage de Studio ──────────────────── */
.bandeau{
  background:var(--encre); color:var(--papier); overflow:hidden;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid #000;
}
.bandeau .piste{
  display:flex; gap:2.6rem; padding:9px 0; white-space:nowrap;
  animation:defile 42s linear infinite; width:max-content;
}
.bandeau .piste span{display:inline-flex;align-items:center;gap:.6rem}
.bandeau .piste span::before{content:"◆";color:var(--rouge);font-size:.6rem}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bandeau .piste{animation:none}}

/* ── boutons ───────────────────────────────────────────────────────────── */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-size:.9rem; font-weight:500; letter-spacing:.03em;
  padding:13px 24px; border:1px solid var(--encre); background:var(--encre);
  color:var(--papier); text-decoration:none; cursor:pointer; border-radius:0;
  transition:background .16s,color .16s,border-color .16s;
}
.bouton:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.bouton.plein{background:var(--rouge);border-color:var(--rouge);color:#fff}
.bouton.plein:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.bouton.creux{background:transparent;color:var(--encre)}
.bouton.creux:hover{background:var(--encre);color:var(--papier)}
.bouton.discret{
  background:transparent;color:var(--encre-doux);border-color:transparent;
  padding:8px 0;text-decoration:underline;text-underline-offset:4px;
}
.bouton.discret:hover{background:transparent;color:var(--rouge)}
.bouton:disabled{opacity:.42;cursor:not-allowed}

/* ── le hero : bicolore. Le texte ne se pose JAMAIS sur une image ──────── */
.hero{
  border-bottom:var(--filet);
  background:linear-gradient(180deg,var(--blanc),var(--papier));
}
.hero .grille{
  display:grid; grid-template-columns:1fr; gap:0;
  max-width:var(--enveloppe); margin:0 auto;
}
.hero .texte{padding:56px 22px 40px}
.hero .texte h1{margin:.2rem 0 1.2rem}
.hero .texte h1 i{font-style:normal;color:var(--rouge)}
.hero .texte .chapo{
  font-size:1.08rem; color:var(--encre-doux); max-width:52ch; margin-bottom:1.6rem;
}
.hero .gestes{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.4rem}

/* les trois chiffres, poses comme des mesures et non comme des decorations */
.mesures{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:var(--filet); margin-top:1.4rem;
}
.mesures div{padding:16px 14px 14px 0;border-bottom:var(--filet)}
.mesures b{
  display:block; font-family:var(--serif); font-size:clamp(1.7rem,5vw,2.5rem);
  font-weight:700; line-height:1; letter-spacing:-.02em;
}
.mesures span{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-faible); display:block; margin-top:7px;
}
.mesures em{font-style:normal;color:var(--rouge)}

/* le Studio miniature : une vraie fenetre de Studio, en CSS, avec de vrais
   mots de Roblox (Explorer, Properties, Workspace, StarterPack) */
.studio{
  border-left:var(--filet); background:var(--blanc); display:none;
  /* `start` empeche le panneau de s'etirer sur la hauteur du hero : sinon il
     reste un grand blanc sous la fenetre Studio (vu a la capture). */
  align-self:start;
}
.studio .titre{
  display:flex;align-items:center;gap:.5rem;padding:9px 12px;
  border-bottom:var(--filet);background:var(--papier-2);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-doux)
}
.studio .titre i{width:9px;height:9px;border-radius:50%;background:var(--rouge);
  font-style:normal;display:block}
.studio .corps{
  display:grid;grid-template-columns:150px 1fr 158px;height:330px;font-size:.74rem
}
.studio .arbre,.studio .props{border-right:var(--filet);overflow:hidden}
.studio .props{border-right:none;border-left:var(--filet)}
.studio .entete-col{
  padding:7px 10px;border-bottom:var(--filet);background:var(--papier-2);
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-faible)
}
.studio ul{list-style:none;margin:0;padding:6px 0}
.studio li{padding:3.5px 12px;color:var(--encre-doux);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.studio li.fort{color:var(--encre);font-weight:500}
.studio li.choisi{background:var(--rouge-clair);color:var(--rouge-fonce);font-weight:500}
.studio .vue{
  background:
    linear-gradient(180deg,#dfe8f2 0 62%,#e6e1d6 62% 100%);
  position:relative;overflow:hidden;
}
.studio .vue .grille-sol{
  position:absolute;inset:62% 0 0 0;
  background-image:
    repeating-linear-gradient(90deg,rgba(23,19,16,.09) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(23,19,16,.09) 0 1px,transparent 1px 22px);
}
/* Une BRIQUE, pas un rectangle : trois faces en isometrie. C'est la forme que
   le visiteur reconnait immediatement comme un objet Roblox. */
.studio .vue .brique{
  position:absolute;left:50%;top:46%;width:132px;height:120px;
  margin:-60px 0 0 -66px;
}
.studio .vue .brique.petit{
  left:26%;top:66%;width:76px;height:70px;margin:-35px 0 0 -38px;opacity:.9;
}
.studio .vue .brique i{position:absolute;inset:0;display:block}
.studio .vue .brique .face-dessus{
  clip-path:polygon(50% 0,100% 25%,50% 50%,0 25%);
  background:linear-gradient(120deg,#e0243f,#b70f2a);
}
.studio .vue .brique .face-gauche{
  clip-path:polygon(0 25%,50% 50%,50% 100%,0 75%);
  background:linear-gradient(180deg,#a80d25,#7d0a1c);
}
.studio .vue .brique .face-droite{
  clip-path:polygon(50% 50%,100% 25%,100% 75%,50% 100%);
  background:linear-gradient(180deg,#c8102e,#8d0b20);
}
/* le plot : le petit teton sur le dessus, signature d'une piece Roblox */
.studio .vue .brique .plot{
  position:absolute;left:50%;top:12.5%;width:26%;height:13%;
  margin-left:-13%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ee4a62,#a80d25);
}
.studio .vue .brique.petit .plot{display:none}
/* l'ombre au sol, sous la brique */
.studio .vue .brique::after{
  content:"";position:absolute;left:50%;top:78%;width:74%;height:16px;
  margin-left:-37%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(23,19,16,.22),transparent 70%);
}
.studio .vue .cote{
  position:absolute;right:9px;bottom:8px;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-faible)
}
.studio .vue .etiquette{
  position:absolute;left:50%;transform:translateX(-50%);top:14%;
  background:var(--encre);color:var(--papier);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px
}

/* ── sections ──────────────────────────────────────────────────────────── */
section{padding:64px 0;border-bottom:var(--filet)}
section.sombre{background:var(--encre);color:var(--papier);border-bottom:none}
section.sombre h2,section.sombre h3{color:var(--papier)}
section.sombre .chapo{color:#b8b0a4}
section.sombre .surtitre{color:#e79aa8}
section.sombre .surtitre::before{background:#e79aa8}
section.papier2{background:var(--papier-2)}
.tete{max-width:62ch;margin-bottom:2.2rem}
.tete .chapo{color:var(--encre-doux);font-size:1.04rem}
section.sombre .tete .chapo{color:#b8b0a4}

/* ── ce que l'acheteur obtient : trois colonnes, pas des cartes ────────── */
.obtient{display:grid;gap:0;border-top:var(--filet)}
.obtient article{
  padding:26px 26px 26px 0;border-bottom:var(--filet);
}
.obtient .num{
  font-family:var(--serif);font-size:1rem;color:var(--rouge);font-weight:700;
  letter-spacing:.06em
}
.obtient h3{margin:.5rem 0 .5rem}
.obtient p{color:var(--encre-doux);font-size:.95rem;margin:0}
.obtient code{
  font-family:var(--mono);font-size:.82rem;background:var(--papier-2);
  padding:1px 5px;border:1px solid var(--trait)
}

/* ── le mur des familles : un TABLEAU, pas une mosaique de vignettes ───── */
.familles{display:grid;grid-template-columns:1fr;border-top:var(--filet)}
.famille{
  display:flex;align-items:baseline;gap:.9rem;padding:14px 0;
  border-bottom:var(--filet);text-decoration:none;
  transition:padding-left .16s,background .16s;
}
.famille:hover{padding-left:10px;background:var(--blanc)}
.famille .nom{font-family:var(--serif);font-size:1.22rem;font-weight:600;flex:0 0 auto}
.famille .filet{flex:1;border-bottom:1px dotted var(--trait-fort);transform:translateY(-5px)}
.famille .n{
  font-size:.78rem;letter-spacing:.08em;color:var(--encre-faible);
  font-variant-numeric:tabular-nums;flex:0 0 auto
}
.famille:hover .nom{color:var(--rouge)}

/* ── les objets : grille de fiches, vifs, sans ombre ───────────────────── */
.barre-filtres{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  padding:16px 0;border-top:var(--filet);border-bottom:var(--filet);
  margin-bottom:26px
}
.barre-filtres input,.barre-filtres select{
  font-family:var(--sans);font-size:.88rem;padding:10px 12px;
  border:1px solid var(--trait-fort);background:var(--blanc);color:var(--encre);
  border-radius:0;min-height:44px
}
.barre-filtres input{flex:1;min-width:180px}
.barre-filtres input:focus,.barre-filtres select:focus{
  outline:none;border-color:var(--rouge)
}
.grille{
  display:grid;gap:22px 20px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))
}
.fiche{
  text-decoration:none;display:flex;flex-direction:column;
  border:var(--filet);background:var(--blanc);
  transition:border-color .16s,transform .16s;
}
.fiche:hover{border-color:var(--encre);transform:translateY(-3px)}
.fiche .image{
  aspect-ratio:1;background:
    radial-gradient(70% 60% at 50% 42%,var(--blanc),var(--papier-2));
  border-bottom:var(--filet);display:flex;align-items:center;justify-content:center;
  padding:10px;overflow:hidden
}
.fiche .image img{width:100%;height:100%;object-fit:contain}
.fiche .corps{padding:11px 12px 13px;display:flex;flex-direction:column;gap:.3rem;flex:1}
.fiche .fam{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-faible)
}
.fiche .nom{
  font-family:var(--serif);font-size:1.02rem;font-weight:600;line-height:1.2;
  color:var(--encre)
}
.fiche .bas{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:auto;padding-top:.5rem
}
.fiche .prix{font-weight:600;font-size:1rem}
.fiche .prix.gratuit{color:var(--stud)}
.fiche .info{font-size:.72rem;color:var(--encre-faible)}
.fiche .puce{
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stud);border:1px solid var(--stud);padding:1px 5px;
  align-self:flex-start;margin-top:.15rem
}
.fiche .puce.fonc{color:var(--rouge);border-color:var(--rouge)}

.vide{
  padding:56px 0;text-align:center;color:var(--encre-doux);
  border:1px dashed var(--trait-fort)
}

/* ── le bloc generateur, mis en avant comme un produit ─────────────────── */
.gen{display:grid;gap:0;border:1px solid #3a332c;background:#1d1815;color:var(--papier)}
.gen .texte{padding:34px 26px}
.gen h2{color:var(--papier)}
.gen .chapo{color:#bdb4a6;font-size:1rem}
.gen ul{list-style:none;padding:0;margin:1.2rem 0 0;font-size:.92rem;color:#cdc4b6}
.gen li{padding:6px 0 6px 22px;position:relative}
.gen li::before{content:"→";position:absolute;left:0;color:#e79aa8}
.gen .visuel{border-top:1px solid #3a332c;padding:26px;background:#171310}
.gen .lignes-code{
  font-family:var(--mono);font-size:.74rem;line-height:1.85;color:#9d9384;
  white-space:pre;overflow-x:auto
}
.gen .lignes-code b{color:#e79aa8;font-weight:400}
.gen .lignes-code i{color:#7fc3a0;font-style:normal}
.gen .lignes-code u{color:#d9c07a;text-decoration:none}

/* ── bandeau d'appel final ─────────────────────────────────────────────── */
.appel{
  text-align:center;padding:74px 0;
  background:linear-gradient(180deg,var(--papier),var(--blanc))
}
.appel h2{max-width:22ch;margin:0 auto 1rem}
.appel .chapo{max-width:56ch;margin:0 auto 1.8rem;color:var(--encre-doux)}
.appel .gestes{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ── pied ──────────────────────────────────────────────────────────────── */
.pied{background:var(--encre);color:#a89f92;padding:52px 0 30px;font-size:.87rem}
.pied .cols{display:grid;gap:30px}
.pied h4{
  color:var(--papier);font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 1rem;font-weight:600
}
.pied a{color:#a89f92;text-decoration:none;display:block;padding:5px 0}
.pied a:hover{color:var(--papier)}
.pied .bas{
  border-top:1px solid #332c26;margin-top:34px;padding-top:22px;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.79rem
}
.pied .marque{color:var(--papier)}

/* ── avis et messages ──────────────────────────────────────────────────── */
.avis{
  padding:14px 16px;border:1px solid var(--trait-fort);background:var(--blanc);
  font-size:.9rem;margin:0 0 1rem;border-left:3px solid var(--encre-faible)
}
.avis.bon{border-left-color:var(--stud)}
.avis.mauvais{border-left-color:var(--rouge);background:#fdf6f7}
.avis b{color:var(--encre)}

/* ── fiche objet ───────────────────────────────────────────────────────── */
.objet{display:grid;gap:30px;padding:38px 0}
.objet .visuel{border:var(--filet);background:
  radial-gradient(70% 60% at 50% 42%,var(--blanc),var(--papier-2));
  padding:20px;display:flex;align-items:center;justify-content:center}
.objet .visuel img{max-height:400px;object-fit:contain}
.objet h1{font-size:clamp(1.9rem,5vw,3rem)}
.objet .prix{
  font-family:var(--serif);font-size:2.2rem;font-weight:700;margin:.6rem 0
}
.objet .tableau{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.9rem}
.objet .tableau th,.objet .tableau td{
  text-align:left;padding:9px 10px;border-bottom:var(--filet)
}
.objet .tableau th{color:var(--encre-faible);font-weight:500;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;width:44%}
.objet .note{
  border-left:3px solid var(--or);background:var(--blanc);padding:12px 14px;
  font-size:.87rem;color:var(--encre-doux)
}
.fil{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-faible);padding:18px 0}
.fil a{text-decoration:none;color:var(--encre-doux)}
.fil a:hover{color:var(--rouge)}

/* ── pages compte / abonnement / generateur : on garde la mecanique,
      on remet la meme peau que la vitrine ─────────────────────────────── */
.enveloppe-compte{max-width:1080px;margin:0 auto;padding:38px 22px 72px}
.carte{
  border:var(--filet);background:var(--blanc);padding:24px 22px;margin:0 0 20px
}
.carte h2,.carte h3{color:var(--encre)}
.carte p,.carte li,.carte td{color:var(--encre-doux)}
.carte label{display:block;margin:14px 0;font-size:.85rem;color:var(--encre-doux)}
.carte input,.carte select{
  display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:0;
  border:1px solid var(--trait-fort);background:var(--blanc);color:var(--encre);
  font-family:var(--sans);font-size:.95rem;min-height:44px
}
.carte input:focus,.carte select:focus{outline:none;border-color:var(--rouge)}
.deux-colonnes{display:grid;gap:20px}
.compte-tete{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap}
.compte-tete h2{margin:0;font-size:1.2rem;word-break:break-all}
.solde{text-align:right}
.solde b{display:block;font-family:var(--serif);font-size:2.6rem;color:var(--rouge);
  line-height:1;font-weight:700}
.solde span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-faible)}
.histo{width:100%;border-collapse:collapse;font-size:.88rem}
.histo th,.histo td{text-align:left;padding:9px 8px;border-bottom:var(--filet)}
.histo th{color:var(--encre-faible);font-weight:500;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.histo .plus{color:var(--stud)}
.histo .moins{color:var(--or)}
.formules{display:grid;gap:18px;margin:26px 0}
.formule{
  border:var(--filet);background:var(--blanc);padding:24px 20px;
  display:flex;flex-direction:column;gap:.4rem;position:relative
}
.formule.mise-en-avant{border-color:var(--rouge);background:#fffbfc}
.ruban{
  position:absolute;top:-1px;left:-1px;background:var(--rouge);color:#fff;
  font-size:.6rem;font-weight:600;padding:4px 9px;letter-spacing:.13em;
  text-transform:uppercase
}
.formule h3{margin:.4rem 0 0;font-size:1.3rem}
.formule .prix{font-family:var(--serif);font-size:2.2rem;font-weight:700;
  color:var(--encre);margin:0}
.formule .prix small{display:block;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-faible);
  font-weight:400;margin-top:4px}
.formule .jetons{font-size:.95rem;margin:.3rem 0}
.formule .jetons b{font-family:var(--serif);font-size:1.5rem;color:var(--rouge)}
.formule .detail{color:var(--stud);font-size:.84rem;margin:0}
.formule .pour{color:var(--encre-doux);font-size:.88rem;line-height:1.55;flex:1}
.formule .bouton{margin-top:.7rem;width:100%}

.choix{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  margin-top:16px}
.pastille{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  background:var(--blanc);border:var(--filet);padding:12px 10px;cursor:pointer;
  color:var(--encre);text-align:center;font-family:var(--sans);font-size:.88rem;
  border-radius:0
}
.pastille:hover{border-color:var(--encre)}
.pastille.actif{border-color:var(--rouge);background:#fffbfc}
.pastille img{width:100%;height:110px;object-fit:contain}
.pastille b{font-family:var(--serif);font-size:1rem;font-weight:600}
.pastille span{color:var(--rouge);font-weight:600;font-size:.92rem}
.lignes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.apercu-gen{
  border:var(--filet);background:
    radial-gradient(70% 60% at 50% 42%,var(--blanc),var(--papier-2));
  min-height:250px;display:flex;align-items:center;justify-content:center;
  margin:16px 0;padding:12px
}
.apercu-gen img{max-height:330px;object-fit:contain}
.barre-gen{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap}
.cout{font-size:.94rem;line-height:1.55}
.cout b{color:var(--rouge)}
.actions{display:flex;gap:.6rem;flex-wrap:wrap}
.manque{color:var(--or)}

.etapes,.regles{color:var(--encre-doux);font-size:.95rem;padding-left:1.3rem;
  line-height:1.85}
.etapes b,.regles b{color:var(--encre)}

/* ── le vocabulaire de Roblox, montre comme tel ────────────────────────── */
.vocabulaire{display:grid;gap:0;border-top:var(--filet)}
.vocabulaire div{padding:16px 0;border-bottom:var(--filet)}
.vocabulaire dt{
  font-family:var(--mono);font-size:.86rem;color:var(--rouge);font-weight:600;
  margin-bottom:5px
}
.vocabulaire dd{margin:0;color:var(--encre-doux);font-size:.93rem}

/* ── mise en page large ────────────────────────────────────────────────── */
@media (min-width:700px){
  section{padding:80px 0}
  .hero .grille{grid-template-columns:1.06fr .94fr}
  .hero .texte{padding:78px 34px 62px 22px}
  .hero .studio{display:block;border-top:none}
  .mesures{grid-template-columns:repeat(3,1fr);margin-top:2rem}
  .mesures div{border-bottom:none;padding:20px 20px 0 0;
    border-right:var(--filet)}
  .mesures div:last-child{border-right:none;padding-right:0}
  .obtient{grid-template-columns:repeat(3,1fr);gap:0}
  .obtient article{padding:30px 30px 30px 0;border-bottom:none;
    border-right:var(--filet)}
  .obtient article:not(:first-child){padding-left:30px}
  .obtient article:last-child{border-right:none;padding-right:0}
  .familles{grid-template-columns:1fr 1fr;column-gap:44px}
  .gen{grid-template-columns:1fr 1fr}
  .gen .visuel{border-top:none;border-left:1px solid #3a332c}
  .pied .cols{grid-template-columns:2fr 1fr 1fr 1fr}
  .objet{grid-template-columns:.95fr 1.05fr;gap:48px;padding:56px 0}
  .deux-colonnes{grid-template-columns:1fr 1fr}
  .formules{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .vocabulaire{grid-template-columns:1fr 1fr;column-gap:44px}
  .grille{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (min-width:1000px){
  body{font-size:17px}
  .grille{grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:30px 24px}
}

/* ── telephone ─────────────────────────────────────────────────────────── */
@media (max-width:699px){
  .entete .barre{flex-wrap:wrap;gap:.7rem;row-gap:.55rem;padding:11px 22px}
  .entete nav{order:3;width:100%;margin-left:0;gap:1.15rem;font-size:.82rem;
    overflow-x:auto;white-space:nowrap;padding-bottom:3px}
  .entete nav a{flex:0 0 auto}
  .jauge{margin-left:auto}
  .studio{display:none}
  .grille{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 12px}
  .fiche .image{padding:7px}
  .barre-gen{flex-direction:column;align-items:stretch}
  .actions .bouton{width:100%}
  .pastille img{height:88px}
  .hero .texte{padding:40px 18px 34px}
}
@media (max-width:420px){
  .grille{grid-template-columns:1fr 1fr}
  .mesures{grid-template-columns:1fr 1fr}
}

/* ── bouton texte (deconnexion, liens discrets du compte) ─────────────── */
.lien{
  background:none;border:none;color:var(--encre-doux);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;
  font-family:var(--sans);font-size:.86rem;padding:0
}
.lien:hover{color:var(--rouge)}

/* ── l'enveloppe des pages compte / generateur / abonnement ───────────── */
.enveloppe-compte{max-width:1080px;margin:0 auto;padding:38px 22px 72px}