/* ==========================================================
   AVARIS — FEUILLE DE STYLE
   ==========================================================
   Révision du 2026-10-06. Voir DESIGN.md.

   Direction : l'ordre arcane. Violet profond, or ouvragé,
   encadrements à losanges. Reprise de la maquette fournie par
   l'utilisateur.

   Réécriture complète : la feuille précédente empilait trois
   directions successives en couches de surcharges, et la
   cascade devenait impossible à prévoir.

   PRINCIPES
   • Le violet porte l'atmosphère, l'or porte l'action.
   • L'ornement est fait de losanges et de filets dorés,
     jamais d'ombres floues.
   • Tout tient SANS animation : l'utilisateur a les
     animations système coupées, et une partie des visiteurs
     aussi. Le mouvement est un supplément.
   ========================================================== */

/* ==========================================================
   1. JETONS
   ========================================================== */

:root {
  --nuit:       #0B0718;
  --nuit-haute: #130C28;
  --surface:    #1A1038;
  --releve:     #241548;

  --trait:      #3A2470;
  --trait-fort: #5B3BA8;
  /* Bordure de contrôle : 3:1 exigé par WCAG 1.4.11, un champ
     vide n'étant identifiable que par elle. */
  --bord-controle: #7B6AB8;

  --violet:       #8B5CF6;
  --violet-clair: #B79CFB;
  --violet-vif:   #A855F7;

  --or:        #C9A227;
  --or-clair:  #F0D98A;
  --or-pale:   #FBF0C8;

  --texte:  #F2EEFC;
  --doux:   #BCB0DC;
  --faible: #9387BE;

  --succes: #4ADE80;
  --alerte: #F87171;

  --rayon: 3px;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 104px;

  --largeur: 1280px;
  --gouttiere: 20px;

  --titre: "Cinzel", Georgia, "Times New Roman", serif;
  --corps: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================
   2. BASE
   ========================================================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  min-height: 100%;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* La chambre : trois foyers de lumière violette et un reflet
   doré. C'est ce qui remplace le fond uni. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%,   rgba(139, 92, 246, 0.45) 0%, transparent 62%),
    radial-gradient(ellipse 40% 35% at 6% 22%,   rgba(168, 85, 247, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 94% 22%,  rgba(168, 85, 247, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201, 162, 39, 0.10) 0%, transparent 58%);
  pointer-events: none;
}

/* Grain : sans lui les grands dégradés font des bandes
   visibles sur les écrans 8 bits. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.04;
  pointer-events: none;
  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='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* height: auto est indispensable : sans lui, l attribut
   HTML height= reste actif pendant que le CSS change la
   largeur, et l image se déforme. Le sceau sortait en
   520x440 au lieu d un carré. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color 200ms ease; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

::selection { background: var(--violet); color: #FFFFFF; }


/* ==========================================================
   3. TYPOGRAPHIE
   ==========================================================
   Cinzel porte tous les titres : c'est la lettre gravée, et
   c'est elle qui donne le registre « ordre arcane ».
   IBM Plex Sans porte le texte courant, JetBrains Mono les
   commandes et les repères.
   ========================================================== */

h1, h2, h3, .cinzel {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h3 {
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* L'or gravé : dégradé vertical clair → or → brun, c'est ce
   qui donne le relief du métal. */
.or, h1, .offre__prix strong {
  background: linear-gradient(180deg, var(--or-pale) 0%, var(--or-clair) 38%, var(--or) 68%, #8E6E18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p { max-width: 64ch; }

code, .mono { font-family: var(--mono); font-size: 0.92em; }

strong { font-weight: 600; }

.texte { color: var(--doux); font-size: 15px; }

/* Surtitre : petit, espacé, encadré de deux losanges. */
.etiquette {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--violet-clair);
}
.etiquette::before, .etiquette::after {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 auto;
  background: var(--or);
  transform: rotate(45deg);
}

.rang { display: none; }

.chiffre {
  font-family: var(--titre);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre span { font-size: 17px; color: var(--faible); }


/* ==========================================================
   4. ORNEMENT
   ==========================================================
   Le vocabulaire visuel : losanges d'or aux angles, filets
   dorés coupés d'un losange central. Il remplace les ombres.
   ========================================================== */

/* Cadre ouvragé : quatre losanges aux angles. */
.ornement { position: relative; }
.ornement::before, .ornement::after,
.ornement > .coin::before, .ornement > .coin::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  background: var(--or);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.8);
}
.ornement::before { top: -4px; left: -4px; }
.ornement::after  { top: -4px; right: -4px; }
.ornement > .coin::before { bottom: -4px; left: -4px; }
.ornement > .coin::after  { bottom: -4px; right: -4px; }

/* Filet orné : deux traits dorés et un losange au centre. */
.filet {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  margin-block: var(--e5);
}
.filet::before, .filet::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.55), transparent);
}
.filet > span {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  background: var(--or);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.9);
}


/* ==========================================================
   5. STRUCTURE
   ========================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--e5);
}

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

.section + .section { border-top: 1px solid rgba(139, 92, 246, 0.18); }

.section__entete, .bloc__entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  max-width: 760px;
  margin: 0 auto var(--e8);
  text-align: center;
}
.section__entete p:not(.etiquette),
.bloc__entete p:not(.etiquette) { color: var(--doux); font-size: 17px; }


/* ==========================================================
   6. BARRE DE NAVIGATION
   ========================================================== */

.barre {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 7, 24, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.barre__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 68px;
}

.marque { display: flex; align-items: center; gap: var(--e3); }
.marque img {
  width: 34px; height: 34px;
  border-radius: 50%;
  /* Le fichier porte sa propre transparence depuis le
     2026-10-06 : plus besoin de masque radial. */
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.9));
}
.marque span {
  font-family: var(--titre);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--or-pale), var(--or-clair) 45%, var(--or));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { display: flex; align-items: center; gap: var(--e6); }

.nav a:not(.bouton) {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 14px;
  font-weight: 500;
  color: var(--doux);
  padding-block: var(--e2);
}
.nav a:not(.bouton) .icone { width: 15px; height: 15px; color: var(--violet-clair); }
.nav a:not(.bouton)::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  transition: width 260ms var(--sortie);
}
.nav a:not(.bouton):hover { color: var(--texte); }
.nav a:not(.bouton):hover::after { width: 100%; }


/* ==========================================================
   7. BOUTONS
   ========================================================== */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e6);
  border: 1px solid transparent;
  border-radius: 40px;
  font-family: var(--corps);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease, color 200ms ease;
}

/* Le bouton principal reprend le violet Discord de la
   maquette : c'est l'action d'ajout du bot. */
.bouton--principal {
  background: linear-gradient(180deg, #8B5CF6 0%, #6D28D9 100%);
  color: #FFFFFF;
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 30px -10px rgba(139, 92, 246, 0.9);
}
.bouton--principal:hover {
  background: linear-gradient(180deg, #A78BFA 0%, #7C3AED 100%);
  border-color: var(--or-clair);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 12px 40px -10px rgba(139, 92, 246, 1);
}
.bouton--principal:active { transform: translateY(1px); }

.bouton--secondaire {
  background: rgba(26, 16, 56, 0.7);
  color: var(--or-clair);
  border-color: rgba(201, 162, 39, 0.5);
}
.bouton--secondaire:hover {
  background: rgba(36, 21, 72, 0.9);
  border-color: var(--or-clair);
  color: var(--or-pale);
  box-shadow: 0 8px 28px -12px rgba(201, 162, 39, 0.8);
}
.bouton--secondaire:active { transform: translateY(1px); }

.icone { width: 18px; height: 18px; flex: 0 0 auto; }


/* ==========================================================
   8. HÉROS
   ==========================================================
   Texte à gauche, emblème à droite, comme la maquette.
   ========================================================== */

.heros { position: relative; padding-block: var(--e8) var(--e7); overflow: hidden; }

.heros__interieur {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: var(--e8);
}

.heros__texte { display: flex; flex-direction: column; gap: var(--e4); align-items: flex-start; }
.heros__texte .etiquette { justify-content: flex-start; }
.heros__texte > p { color: var(--doux); font-size: 17px; max-width: 52ch; }

.heros h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1; }

.devise {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 26px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-clair);
  text-shadow: 0 0 26px rgba(201, 162, 39, 0.5);
}

.heros__actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e2); }

.heros__note {
  padding: var(--e2) var(--e4);
  border-left: 2px solid var(--or);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.14), transparent 75%);
  font-family: var(--mono);
  font-size: 14px;
}

/* L'emblème et son cercle d'invocation. */
.heros__sceau { position: relative; display: grid; place-items: center; }

.heros__sceau img {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  /* Le fichier porte sa propre transparence depuis le
     2026-10-06 : plus besoin de masque radial. */
  filter:
    drop-shadow(0 0 50px rgba(139, 92, 246, 0.85))
    drop-shadow(0 0 110px rgba(168, 85, 247, 0.45));
}

.anneaux { position: absolute; inset: -6%; pointer-events: none; }
.anneaux span { position: absolute; border-radius: 50%; }
.anneaux span:nth-child(1) { inset: 0;   border: 1px dashed rgba(183, 156, 251, 0.45); animation: tourner 28s linear infinite; }
.anneaux span:nth-child(2) { inset: 9%;  border: 1px solid  rgba(240, 217, 138, 0.42); animation: tourner 20s linear infinite reverse; }
.anneaux span:nth-child(3) { inset: 19%; border: 1px dotted rgba(183, 156, 251, 0.6);  animation: tourner 14s linear infinite; }

/* L'arc lumineux : c'est lui qui rend la rotation lisible. */
.anneaux::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg,
    rgba(183, 156, 251, 0.75) 26deg, transparent 58deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 49.1%, #000 49.4% 50%, transparent 50.3%);
  mask: radial-gradient(circle, transparent 0 49.1%, #000 49.4% 50%, transparent 50.3%);
  animation: tourner 16s linear infinite;
}

@keyframes tourner { to { transform: rotate(360deg); } }

.heros__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid rgba(201, 162, 39, 0.25);
}
.heros__chiffres > div { display: flex; flex-direction: column; gap: var(--e1); }
.heros__chiffres span, .heros__chiffres small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faible);
}

.heros--court { padding-block: var(--e7) var(--e6); }
.heros--court .heros__interieur { grid-template-columns: 1fr; text-align: center; }
.heros--court .heros__texte { align-items: center; }
.heros--court .heros__texte .etiquette { justify-content: center; }
.heros--court .heros__texte > p { margin-inline: auto; }


/* ==========================================================
   9. CARTES
   ==========================================================
   Encadrement ouvragé, icône dans un losange, titre gravé.
   ========================================================== */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gouttiere);
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e7) var(--e4) var(--e5);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.16) 0%, rgba(26, 16, 56, 0.9) 48%, rgba(19, 12, 40, 0.95) 100%);
  border: 1px solid rgba(201, 162, 39, 0.34);
  border-radius: var(--rayon);
  transition: border-color 220ms ease, transform 220ms var(--sortie), box-shadow 220ms ease;
}

/* Les quatre losanges d'angle. */
.carte::before, .carte::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  background: var(--or);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(201, 162, 39, 0.9);
}
.carte::before { top: -4px; left: -4px; }
.carte::after  { top: -4px; right: -4px; }

.carte:hover {
  border-color: var(--or-clair);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.25),
    0 22px 48px -24px rgba(139, 92, 246, 1);
}

/* L'icône dans son losange, en débord sur le bord supérieur. */
.carte__emblème {
  position: absolute;
  top: -22px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--releve), var(--surface));
  border: 1px solid var(--or);
  transform: rotate(45deg);
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.5);
}
.carte__emblème .icone { transform: rotate(-45deg); color: var(--or-clair); width: 20px; height: 20px; }

.carte h3 { color: var(--or-clair); }
.carte p { color: var(--doux); font-size: 14px; }

.carte__commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e1); margin-top: auto; padding-top: var(--e3); }

.carte__commandes code, .cmd, .offre__cmds code {
  padding: 2px var(--e2);
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.34);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--or-clair);
  white-space: nowrap;
}

.carte--or { border-color: var(--or); }


/* ==========================================================
   10. BLOCS ET DÉMONSTRATIONS
   ========================================================== */

.bloc { display: flex; flex-direction: column; gap: var(--e5); }
.bloc__texte { color: var(--doux); }
.bloc__compte { font-family: var(--mono); font-size: 12px; color: var(--or-clair); letter-spacing: 0.1em; }

.demo, .construire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e8);
  align-items: start;
}
.demo--inverse { direction: rtl; }
.demo--inverse > * { direction: ltr; }
.demo__texte { display: flex; flex-direction: column; gap: var(--e4); }
.demo__texte p { color: var(--doux); }

.modeles { display: flex; flex-direction: column; gap: var(--e2); }
.modele {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.14), transparent 80%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--doux);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.modele:hover {
  border-color: var(--or);
  color: var(--texte);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.2), transparent 80%);
}


/* ==========================================================
   11. ÉTAPES
   ========================================================== */

.etapes { display: flex; flex-direction: column; counter-reset: etape; max-width: 820px; margin-inline: auto; }

.etapes li {
  display: flex;
  gap: var(--e5);
  padding-block: var(--e5);
  border-top: 1px solid rgba(139, 92, 246, 0.22);
}
.etapes li:last-child { border-bottom: 1px solid rgba(139, 92, 246, 0.22); }

.etapes li::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
  color: var(--or-clair);
  padding-top: 2px;
}

.etapes li > div { display: flex; flex-direction: column; gap: var(--e2); }
.etapes strong { font-family: var(--titre); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--or-clair); }
.etapes span { color: var(--doux); font-size: 15px; }


/* ==========================================================
   12. PALIERS
   ========================================================== */

.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); align-items: start; }

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e7) var(--e5) var(--e5);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.14) 0%, rgba(26, 16, 56, 0.92) 46%, rgba(19, 12, 40, 0.96) 100%);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: var(--rayon);
}
.offre::before, .offre::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  background: var(--or);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(201, 162, 39, 0.9);
}
.offre::before { top: -4px; left: -4px; }
.offre::after  { top: -4px; right: -4px; }

.offre__ruban {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--e1) var(--e4);
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  color: #1A1206;
  border-radius: 20px;
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 18px -6px rgba(201, 162, 39, 0.9);
}

.offre__entete { display: flex; flex-direction: column; align-items: center; gap: var(--e2); text-align: center; }
.offre__entete .etiquette { font-size: 11px; }

.offre__prix { display: flex; align-items: baseline; gap: var(--e2); }
.offre__prix strong { font-family: var(--titre); font-weight: 900; font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.offre__prix span { font-family: var(--mono); font-size: 12px; color: var(--faible); }

.offre__resume { color: var(--doux); font-size: 14px; text-align: center; }

.offre__herite {
  padding-top: var(--e3);
  border-top: 1px solid rgba(201, 162, 39, 0.25);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faible);
  text-align: center;
}
.offre__herite a { color: var(--or-clair); }

.offre__sous-titre {
  font-family: var(--titre);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-clair);
  padding-top: var(--e3);
  border-top: 1px solid rgba(139, 92, 246, 0.25);
}

.offre__liste { display: flex; flex-direction: column; gap: var(--e4); }
.offre__liste--plafonds { gap: var(--e3); }
.offre__ligne { display: grid; grid-template-columns: 1fr auto; gap: var(--e1) var(--e3); align-items: baseline; }
.offre__texte { font-size: 14px; line-height: 1.5; }
.offre__valeur { font-family: var(--mono); font-size: 13px; color: var(--or-clair); font-variant-numeric: tabular-nums; }
.offre__cmds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e1); }

.offre__ligne--avenir .offre__texte { color: var(--faible); }
.offre__avenir {
  padding: 1px var(--e2);
  border: 1px dashed var(--faible);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faible);
  white-space: nowrap;
}

.offre > .bouton { margin-top: auto; }


/* ==========================================================
   13. CATALOGUE DES COMMANDES
   ==========================================================
   Liste dense : pas de cartes ornées ici, elles rendraient
   89 entrées illisibles. Sommaire collant à gauche.
   ========================================================== */

.doc { display: grid; grid-template-columns: 240px 1fr; gap: var(--e7); align-items: start; }
.doc__cote, .doc__fixe { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--e3); }

.sommaire { display: flex; flex-direction: column; gap: var(--e1); }
.sommaire a {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-left: 2px solid rgba(139, 92, 246, 0.3);
  font-size: 13px;
  color: var(--doux);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.sommaire a:hover { border-left-color: var(--violet-clair); background: rgba(139, 92, 246, 0.1); color: var(--texte); }
.sommaire a.actif {
  border-left-color: var(--or);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.16), transparent);
  color: var(--or-clair);
}
.sommaire em { font-style: normal; color: var(--faible); font-family: var(--mono); font-size: 11px; }

.recherche {
  width: 100%;
  padding: var(--e3) var(--e4);
  background: rgba(26, 16, 56, 0.8);
  border: 1px solid var(--bord-controle);
  border-radius: var(--rayon);
  color: var(--texte);
  font-family: var(--mono);
  font-size: 13px;
}
.recherche::placeholder { color: var(--faible); }
.recherche:focus { outline: none; border-color: var(--or); }

.doc__contenu { display: flex; flex-direction: column; gap: var(--e8); min-width: 0; }
.doc__note { font-family: var(--mono); font-size: 12px; color: var(--faible); }

.cmds { display: flex; flex-direction: column; }

.cmd {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: var(--e2) var(--e5);
  align-items: baseline;
  padding-block: var(--e4);
  border-top: 1px solid rgba(139, 92, 246, 0.18);
  /* Surcharge de la puce en ligne : ici .cmd est un bloc. */
  background: none;
  border-left: none; border-right: none; border-bottom: none;
  white-space: normal;
  font-family: var(--corps);
  font-size: 16px;
  color: var(--texte);
}
.cmd:last-child { border-bottom: 1px solid rgba(139, 92, 246, 0.18); }
.cmd:hover { background: linear-gradient(90deg, rgba(139, 92, 246, 0.09), transparent 70%); }

.cmd__nom { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--or-clair); overflow-wrap: anywhere; }
.cmd__corps { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.cmd__desc { color: var(--doux); font-size: 15px; }
.cmd__sous { display: flex; flex-wrap: wrap; gap: var(--e1); }
.cmd__sous span {
  padding: 1px var(--e2);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--violet-clair);
}
.cmd__ex {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--doux);
  padding-left: var(--e3);
  border-left: 1px solid rgba(201, 162, 39, 0.4);
  overflow-wrap: anywhere;
}

.aucun { color: var(--faible); font-family: var(--mono); font-size: 13px; }

/* Étiquette de palier sur une commande. */
.palier-pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px var(--e2);
  border-radius: 20px;
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.palier-pastille::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); }
.palier-pastille--gratuit { border: 1px solid rgba(183, 156, 251, 0.5); color: var(--violet-clair); }
.palier-pastille--gratuit::before { background: var(--violet-clair); }
.palier-pastille--premium { border: 1px solid rgba(139, 92, 246, 0.8); color: #C4ACFD; background: rgba(139, 92, 246, 0.14); }
.palier-pastille--premium::before { background: var(--violet); }
.palier-pastille--ultime  { border: 1px solid var(--or); color: var(--or-clair); background: rgba(201, 162, 39, 0.14); }
.palier-pastille--ultime::before { background: var(--or); }


/* ==========================================================
   14. MAQUETTES DISCORD
   ========================================================== */

.discord {
  display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e5);
  background: linear-gradient(180deg, rgba(36, 21, 72, 0.85), rgba(19, 12, 40, 0.95));
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: var(--rayon);
}
.dc-ligne { display: flex; gap: var(--e3); align-items: flex-start; }
/* Lavatar porte le vrai logo : cest le bot qui parle dans
   ces maquettes, autant quon le reconnaisse. Le fichier est
   carré et transparent, le cercle le recadre proprement. */
.dc-avatar {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--releve);
  border: 1px solid rgba(201, 162, 39, 0.45);
}
.dc-nom { font-weight: 600; font-size: 14px; }
.dc-heure { font-family: var(--mono); font-size: 11px; color: var(--faible); }
.dc-badge {
  padding: 1px 5px; border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  color: #1A1206; font-family: var(--mono); font-size: 9px; font-weight: 600; text-transform: uppercase;
}
.dc-commande { font-family: var(--mono); font-size: 13px; color: var(--or-clair); }
.dc-embed {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e4);
  background: rgba(36, 21, 72, 0.9);
  border-left: 3px solid var(--violet);
  border-radius: var(--rayon);
}
.dc-embed--or { border-left-color: var(--or); }
.dc-titre { font-weight: 600; font-size: 15px; color: var(--or-clair); }
.dc-desc { color: var(--doux); font-size: 14px; }
.dc-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e3); }
.dc-champ { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dc-champ b { font-size: 12px; }
.dc-champ span { color: var(--doux); font-family: var(--mono); font-size: 12px; }
.dc-pied { font-family: var(--mono); font-size: 11px; color: var(--faible); }
.dc-boutons { display: flex; flex-wrap: wrap; gap: var(--e2); }
.dc-bouton {
  padding: var(--e2) var(--e3);
  background: rgba(36, 21, 72, 0.9);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  font-size: 12px;
}
.dc-bouton--vert { border-color: var(--succes); color: var(--succes); }

.capture { border: 1px solid rgba(139, 92, 246, 0.3); border-radius: var(--rayon); }


/* ==========================================================
   15. PIED DE PAGE
   ========================================================== */

.pied { border-top: 1px solid rgba(201, 162, 39, 0.28); padding-block: var(--e7); }
.pied__interieur { display: flex; flex-wrap: wrap; gap: var(--e5); align-items: center; justify-content: space-between; }
.pied small { color: var(--faible); font-size: 13px; }
.pied__liens { display: flex; flex-wrap: wrap; gap: var(--e5); }
.pied__liens a { font-size: 13px; color: var(--doux); }
.pied__liens a:hover { color: var(--or-clair); }

.pied__devise {
  width: 100%;
  text-align: center;
  font-family: var(--titre);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faible);
}


/* ==========================================================
   16. TABLEAU DE BORD
   ========================================================== */

.bascule {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e4);
  background: rgba(26, 16, 56, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--rayon);
}
.dc-champ select, .dc-champ input { font-family: var(--mono); }


/* ==========================================================
   17. RÉVÉLATION DES TITRES
   ==========================================================
   .revelable n'est posée QUE par assets/typographie.js : sans
   JavaScript, rien n'est caché.
   ========================================================== */

.revelable .line { display: block; overflow: hidden; }
.revelable .line > * {
  display: inline-block;
  transform: translateY(104%);
  opacity: 0;
  transition: transform 760ms var(--sortie) var(--retard, 0ms),
              opacity 560ms ease var(--retard, 0ms);
}
.revele .line > * { transform: translateY(0); opacity: 1; }

.anime { animation: monter 700ms var(--sortie) both; }
@keyframes monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* ==========================================================
   18. ADAPTATION
   ========================================================== */

/* min-width:0 : sans lui un enfant de grille refuse de passer
   sous la largeur de son contenu et fait déborder la page. */
.doc > *, .demo > *, .construire > *, .grille > *, .offres > *,
.cmd > *, .heros__interieur > *, .barre__interieur > * { min-width: 0; }

@media (max-width: 1040px) {
  .heros__interieur { grid-template-columns: 1fr; gap: var(--e6); text-align: center; }
  .heros__texte { align-items: center; }
  .heros__texte .etiquette { justify-content: center; }
  .heros__sceau { order: -1; width: min(320px, 70vw); margin-inline: auto; }
  .heros__chiffres { justify-content: center; }
  .offres { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 1fr; gap: var(--e6); }
  .doc__cote, .doc__fixe { position: static; }
  .demo, .construire { grid-template-columns: 1fr; gap: var(--e6); }
}

@media (max-width: 860px) {
  /* Les liens descendent sur une seconde ligne plutôt que de
     disparaître : sans menu de remplacement, la page Tarifs
     devenait inatteignable au téléphone. */
  .barre__interieur {
    position: relative;
    flex-wrap: wrap;
    padding-top: 58px;
    padding-bottom: var(--e3);
    min-height: 0;
  }
  .marque { position: absolute; top: var(--e3); left: 0; }
  .nav { width: 100%; flex-wrap: wrap; gap: var(--e4); }
  .nav .bouton { position: absolute; top: var(--e2); right: 0; min-height: 40px; padding-inline: var(--e4); font-size: 13px; }
  .nav a:not(.bouton) { font-size: 13px; }
}

@media (max-width: 680px) {
  :root { --e9: 68px; --e8: 48px; }
  .grille { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cmd { grid-template-columns: 1fr; }
  .heros__chiffres { gap: var(--e5); }
  .pied__interieur { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================
   19. MOUVEMENT RÉDUIT
   ==========================================================
   Tout s'arrête — et la page reste entière, parce que la
   couleur et l'ornement ne dépendent pas du mouvement.
   ========================================================== */

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

/* ==========================================================
   20. FILTRES DE PALIER
   ==========================================================
   Dans le sommaire du catalogue : on ne garde que les
   commandes d'un palier donné. Le palier Ultime n'apparaît
   pas — il n'ouvre aucune commande supplémentaire, il lève
   les plafonds. Un bouton qui ne filtrerait rien tromperait.
   ========================================================== */

.filtres-palier { display: flex; flex-wrap: wrap; gap: var(--e2); }

.filtre-palier {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  /* 36px : en dessous, la cible devient difficile au doigt. */
  min-height: 36px;
  padding: var(--e1) var(--e3);
  background: rgba(26, 16, 56, 0.7);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 20px;
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doux);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.filtre-palier em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  color: var(--faible);
  font-variant-numeric: tabular-nums;
}

.filtre-palier:hover { border-color: var(--violet-clair); color: var(--texte); }

.filtre-palier.actif {
  border-color: var(--or);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.24), rgba(201, 162, 39, 0.08));
  color: var(--or-clair);
}
.filtre-palier.actif em { color: var(--or-clair); }

/* La pastille collée au nom de la commande. */
.cmd__nom .palier-pastille { margin-left: var(--e2); vertical-align: middle; }

/* Une commande masquée par un filtre ne doit pas laisser son
   espace : hidden seul ne suffit pas sur un enfant de grille. */
.cmd[hidden], .bloc[hidden] { display: none !important; }

/* ==========================================================
   21. LA SALLE
   ==========================================================
   Décor fourni par l'utilisateur : voûtes, bannières à
   l'emblème, braseros violets, sol gravé d'un cercle.

   Il est posé derrière le héros, pas sur toute la page : en
   fond global il entrerait en concurrence avec chaque bloc
   de texte. Ici il sert de scène au sceau, puis s'éteint.

   LISIBILITÉ AVANT DÉCOR : deux voiles le recouvrent, un
   assombrissement général et un dégradé vers le bas de page.
   Le texte reste mesuré au-dessus de 4,5:1.
   ========================================================== */

.heros {
  isolation: isolate;
  background-image:
    /* Voile du bas : la salle disparaît avant la section
       suivante, sans ligne de coupure visible. */
    linear-gradient(180deg,
      rgba(11, 7, 24, 0.55) 0%,
      rgba(11, 7, 24, 0.62) 45%,
      rgba(11, 7, 24, 0.92) 82%,
      var(--nuit) 100%),
    url("assets/salle.webp?v=1edc4b0d");
  background-size: cover, cover;
  background-position: center 18%, center 22%;
  background-repeat: no-repeat;
}

/* Les foyers de lumière du héros passent au-dessus de
   l'image : sans ça le sceau perdait son halo. */
.heros::before { z-index: 0; }
.heros__interieur { position: relative; z-index: 1; }

/* Les pages intérieures gardent la salle, très atténuée :
   l'identité continue sans que le décor reprenne la vedette
   à chaque page. */
.heros--court {
  background-image:
    linear-gradient(180deg,
      rgba(11, 7, 24, 0.84) 0%,
      rgba(11, 7, 24, 0.9) 55%,
      var(--nuit) 100%),
    url("assets/salle.webp?v=1edc4b0d");
  background-position: center 30%, center 26%;
}

@media (max-width: 860px) {
  /* Au téléphone l'image est trop large pour qu'on y
     distingue quoi que ce soit : on la resserre sur le
     centre et on l'assombrit davantage. */
  .heros, .heros--court { background-position: center 24%, 58% 24%; }
  .heros { background-image:
    linear-gradient(180deg, rgba(11,7,24,0.7) 0%, rgba(11,7,24,0.8) 50%, var(--nuit) 100%),
    url("assets/salle.webp?v=1edc4b0d"); }
}

/* ==========================================================
   22. VOILE DE LECTURE
   ==========================================================
   Mesuré après la pose du décor : quatre textes du héros
   tombaient entre 3,69 et 4,23 dans leur pire zone, sous le
   seuil AA de 4,5. Les braseros et les gravures du sol
   passent juste derrière la colonne de gauche.

   Assombrir toute l'image tuerait le décor. On pose donc un
   voile LOCAL, derrière le texte seulement, qui s'éteint
   vers la droite où se trouve le sceau.
   ========================================================== */

.heros__texte { position: relative; }

.heros__texte::before {
  content: "";
  position: absolute;
  /* Déborde largement du texte : le voile doit mourir en
     douceur, sans bord visible. */
  inset: -6% -22% -8% -14%;
  z-index: -1;
  background:
    radial-gradient(ellipse 72% 62% at 32% 50%,
      rgba(8, 5, 18, 0.88) 0%,
      rgba(8, 5, 18, 0.72) 42%,
      rgba(8, 5, 18, 0.34) 68%,
      transparent 86%);
  pointer-events: none;
}

@media (max-width: 1040px) {
  /* En colonne unique le texte est centré : le voile suit. */
  .heros__texte::before {
    inset: -5% -10%;
    background: radial-gradient(ellipse 80% 64% at 50% 50%,
      rgba(8, 5, 18, 0.9) 0%,
      rgba(8, 5, 18, 0.74) 46%,
      rgba(8, 5, 18, 0.3) 72%,
      transparent 88%);
  }
}

/* ==========================================================
   23. TABLEAU DE FACTURATION
   ==========================================================
   Un relevé, pas une facture : il manque le numéro
   séquentiel, le SIREN et la mention de TVA. La page le dit.
   ========================================================== */

.carte--large { align-items: stretch; text-align: left; }
.carte--large h3 { align-self: flex-start; }

/* Enveloppe à défilement : un tableau de six colonnes ne
   rentre pas dans un téléphone, et il ne doit pas pousser
   la page entière. */
.tableau-enveloppe { width: 100%; overflow-x: auto; }

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}
.tableau th, .tableau td {
  padding: var(--e2) var(--e3);
  text-align: left;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}
.tableau th {
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-clair);
}
.tableau tbody tr:hover { background: rgba(139, 92, 246, 0.08); }

/* Les montants s'alignent sur la virgule : c'est la seule
   façon de comparer une colonne de prix d'un coup d'œil. */
.tableau .montant {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--or-clair);
}
.tableau .discret { color: var(--faible); font-size: 13px; }
.tableau .mono { font-family: var(--mono); font-size: 12px; }

.tableau tfoot td {
  padding-top: var(--e3);
  border-bottom: none;
  font-family: var(--titre);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte);
}

/* Avis en tête de page : la vente n'est pas ouverte, et les
   mentions légales le déclarent. Une page qui affiche des
   prix sans le dire laisserait croire qu'on peut acheter. */
.avis {
  max-width: none;
  padding: var(--e4) var(--e5);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0.04) 70%, transparent);
  border-left: 3px solid var(--or);
  border-radius: var(--rayon);
  color: var(--doux);
  font-size: 15px;
}
.avis strong { color: var(--or-clair); }

/* Encadré d'avertissement dans les pages légales. */
.encadre {
  padding: var(--e4);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--rayon);
  color: var(--doux);
}
.encadre strong { color: var(--violet-clair); }


/* ==========================================
   📊 TABLEAU COMPARATIF
   ========================================== */

/* Le mot que lit un lecteur d'écran là où l'œil voit un
   signe : « tiret cadratin » ne dit rien à personne. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* C'est le cadre qui défile, jamais la page. Le tabindex n'est
   pas décoratif : sans lui, un tableau plus large que l'écran
   n'est atteignable qu'à la souris. */
.tab__cadre {
  margin-top: var(--e6);
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--nuit-haute);
  -webkit-overflow-scrolling: touch;
}

.tab__cadre:focus-visible {
  outline: 2px solid var(--violet-clair);
  outline-offset: 3px;
}

.tab {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.tab th,
.tab td {
  padding: var(--e3) var(--e4);
  text-align: center;
  border-bottom: 1px solid var(--trait);
}

.tab tbody tr:last-child th,
.tab tbody tr:last-child td {
  border-bottom: 0;
}

/* La colonne des intitulés reste lisible pendant qu'on fait
   défiler les trois autres. */
.tab tbody th[scope="row"],
.tab__coin {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: 500;
  color: var(--doux);
  background: var(--nuit-haute);
  border-right: 1px solid var(--trait);
}

.tab__coin {
  background: var(--surface);
}

.tab__tete {
  background: var(--surface);
  font-family: var(--titre);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--trait-fort);
}

.tab__tete a {
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--sortie);
}

.tab__tete a:hover,
.tab__tete a:focus-visible {
  border-bottom-color: currentColor;
}

.tab__tete span {
  display: block;
  margin-top: var(--e1);
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--faible);
}

/* Premium porte le violet de la marque, Ultime porte l'or :
   la même séparation que sur les cartes, pour qu'on relie les
   deux d'un coup d'œil. */
.tab__tete--premium a { color: var(--violet-clair); }
.tab__tete--ultime  a { color: var(--or-clair); }

/* Les intertitres de section, qui ne sont pas des données. */
.tab__groupe th {
  text-align: left;
  padding-block: var(--e2);
  background: var(--releve);
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-clair);
  border-bottom: 1px solid var(--trait-fort);
}

.tab__c--oui    { color: var(--violet-clair); font-size: 16px; }
.tab__c--non    { color: var(--faible); }
.tab__c--avenir { font-size: 14px; }

.tab__c--valeur {
  font-weight: 600;
  color: var(--texte);
}

.tab__c--infini {
  color: var(--or-clair);
  font-family: var(--titre);
  letter-spacing: 0.04em;
}

.tab__note {
  margin-top: var(--e4);
  font-size: 13px;
  color: var(--faible);
  max-width: 62ch;
}

/* ── Les deux mises en avant ──
   Premium est le palier recommandé : violet, celui de la
   marque. Ultime est le sommet : or. Mélanger les deux
   effacerait la hiérarchie que les cartes installent. */
.offre--phare {
  border-color: var(--trait-fort);
  box-shadow: 0 0 60px -26px rgba(139, 92, 246, 0.95),
              inset 0 1px 0 rgba(183, 156, 251, 0.16);
}

.offre--haut {
  border-color: var(--or);
  box-shadow: 0 0 60px -26px rgba(201, 162, 39, 0.9),
              inset 0 1px 0 rgba(251, 240, 200, 0.14);
}

.offre__ruban--premium {
  background: linear-gradient(180deg, var(--violet-clair), var(--violet));
  color: #150A2E;
  box-shadow: 0 4px 18px -6px rgba(139, 92, 246, 0.95);
}

@media (max-width: 720px) {
  .tab th,
  .tab td { padding: var(--e2) var(--e3); }
  .tab { font-size: 13px; }
}


/* ==========================================
   🔒 UTILITAIRES NÉS DE LA CSP
   ==========================================
   La politique de sécurité bloque les attributs « style= ».
   Les autoriser reviendrait à autoriser aussi ceux qu'un
   attaquant injecte — ces trois classes remplacent les quatre
   derniers styles en ligne du site. */

.section--resserree       { padding-block: var(--e6); }
.heros__actions--detachees { margin-top: var(--e6); }
.dc-pied--nu              { border: none; padding-top: var(--e2); }


/* ==========================================
   📐 MARGES UTILITAIRES
   ==========================================
   Le tableau de bord posait ces écarts en attributs « style= »
   depuis son JavaScript. La CSP les bloque — y compris quand
   c'est innerHTML qui les crée — et l'espacement disparaissait
   sans la moindre erreur visible. */

.marge-haut-3  { margin-top: var(--e3); }
.marge-haut-5  { margin-top: var(--e5); }
.marge-bas-4   { margin-bottom: var(--e4); }
.marge-bas-5   { margin-bottom: var(--e5); }
.largeur-mini  { min-width: 240px; }
.texte-attenue { color: var(--faible); }


/* Les deux portes d'une carte payante : essayer, et obtenir.
   L'essai passe devant tant que la vente n'est pas ouverte ;
   le jour où elle l'est, c'est l'inverse — on ne met pas un
   essai gratuit devant un bouton d'achat qui fonctionne. */
.offre__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.offre__actions .bouton {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}