/* ═══════════════════════════════════════════════════════════════
   Nélio · studio GIF : la feuille de style

   Deux thèmes, la nuit (par défaut) et le jour, tirés de l'identité
   Nélio / Palama : vert nuit, crème, vert palme. Une seule couleur
   d'accent. Rayons : pilule pour ce qui se clique, 24 px pour les
   panneaux, 14 px pour les tuiles et les champs.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Outfit'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/Outfit-ExtraBold.ttf') format('truetype'); }

:root {
  color-scheme: dark;
  --fond: #0d1911;
  --fond-haut: #10201a;
  --surface: rgba(237, 230, 214, 0.045);
  --surface-forte: #13241a;
  --carte: color-mix(in srgb, var(--surface-forte) 94%, transparent);
  --surface-champ: rgba(0, 0, 0, 0.28);
  --ligne: rgba(237, 230, 214, 0.10);
  --ligne-forte: rgba(237, 230, 214, 0.22);
  --texte: #ede6d6;
  --texte-doux: rgba(237, 230, 214, 0.66);
  --texte-pale: rgba(237, 230, 214, 0.58);
  --accent: #70af5c;
  --accent-texte: #9bd884;
  --accent-voile: rgba(112, 175, 92, 0.16);
  --sur-accent: #0c1810;
  --danger: #f08a73;
  --ombre: 0 24px 60px -24px rgba(0, 6, 2, 0.75);
  --ombre-douce: 0 10px 30px -14px rgba(0, 6, 2, 0.6);
  --damier-a: #1d2a22;
  --damier-b: #26352c;
  --grain: 0.07;
  --r-pilule: 999px;
  --r-panneau: 24px;
  --r-tuile: 14px;
  --douce: cubic-bezier(0.16, 1, 0.3, 1);
  --t-hero: clamp(2.6rem, 1.4rem + 4vw, 4.6rem);
  --t-h2: clamp(1.85rem, 1.25rem + 2vw, 3rem);
  --gouttiere: clamp(16px, 4vw, 40px);
}

:root[data-theme='jour'] {
  color-scheme: light;
  --fond: #f1ead9;
  --fond-haut: #f6f0e3;
  --surface: rgba(23, 41, 28, 0.04);
  --surface-forte: #fbf7ee;
  --surface-champ: rgba(255, 255, 255, 0.7);
  --ligne: rgba(23, 41, 28, 0.11);
  --ligne-forte: rgba(23, 41, 28, 0.24);
  --texte: #17291c;
  --texte-doux: rgba(23, 41, 28, 0.70);
  --texte-pale: rgba(23, 41, 28, 0.64);
  --accent: #3f7d36;
  --accent-texte: #2f6a29;
  --accent-voile: rgba(63, 125, 54, 0.12);
  --sur-accent: #fbf7ee;
  --danger: #b8442d;
  --ombre: 0 24px 60px -26px rgba(40, 52, 30, 0.38);
  --ombre-douce: 0 10px 30px -16px rgba(40, 52, 30, 0.32);
  --damier-a: #e4dcc8;
  --damier-b: #f2ecdf;
  --grain: 0.05;
}

@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] {
    color-scheme: light;
    --fond: #f1ead9;
    --fond-haut: #f6f0e3;
    --surface: rgba(23, 41, 28, 0.04);
    --surface-forte: #fbf7ee;
    --surface-champ: rgba(255, 255, 255, 0.7);
    --ligne: rgba(23, 41, 28, 0.11);
    --ligne-forte: rgba(23, 41, 28, 0.24);
    --texte: #17291c;
    --texte-doux: rgba(23, 41, 28, 0.70);
    --texte-pale: rgba(23, 41, 28, 0.64);
    --accent: #3f7d36;
    --accent-texte: #2f6a29;
    --accent-voile: rgba(63, 125, 54, 0.12);
    --sur-accent: #fbf7ee;
    --danger: #b8442d;
    --ombre: 0 24px 60px -26px rgba(40, 52, 30, 0.38);
    --ombre-douce: 0 10px 30px -16px rgba(40, 52, 30, 0.32);
    --damier-a: #e4dcc8;
    --damier-b: #f2ecdf;
    --grain: 0.05;
  }
}

/* ─────────── Base ─────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 700px at 8% -8%, var(--accent-voile), transparent 62%),
    radial-gradient(900px 600px at 105% 18%, rgba(232, 116, 90, 0.06), transparent 60%),
    var(--fond);
  background-attachment: fixed;
  color: var(--texte);
  font: 500 1.0625rem/1.6 Outfit, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Le grain : une seule couche fixe, qui ne repeint jamais au défilement */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

img, canvas, video, svg { display: block; max-width: 100%; }
a { color: var(--accent-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--texte); }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: var(--sur-accent); }
:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; border-radius: 6px; }

.conteneur { width: min(1280px, 100%); margin-inline: auto; padding-inline: var(--gouttiere); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); font-weight: 700; transform: translateY(-160%); transition: transform 0.2s var(--douce); }
.evitement:focus { transform: none; }
[hidden] { display: none !important; }

/* ─────────── Boutons ─────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--ligne-forte); border-radius: var(--r-pilule);
  background: var(--surface); color: var(--texte);
  font-weight: 700; font-size: 0.98rem; text-decoration: none; white-space: nowrap;
  transition: transform 0.25s var(--douce), background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.bouton:hover { border-color: var(--texte-doux); transform: translateY(-1px); color: var(--texte); }
.bouton:active { transform: translateY(0) scale(0.98); }
.bouton i { font-size: 1.2em; }
.bouton-fort { background: var(--accent); border-color: transparent; color: var(--sur-accent); box-shadow: 0 10px 26px -12px rgba(112, 175, 92, 0.7); }
.bouton-fort:hover { background: var(--accent-texte); color: var(--sur-accent); border-color: transparent; }
.bouton:disabled, .bouton[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.bouton-mini { min-height: 36px; padding: 0 14px; font-size: 0.88rem; }
.lien-bouton { background: none; border: 0; padding: 4px 2px; color: var(--accent-texte); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lien-bouton:hover { color: var(--texte); }
.icone-bouton {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--ligne); border-radius: var(--r-pilule); background: var(--surface); color: var(--texte);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--douce);
}
.icone-bouton:hover { border-color: var(--ligne-forte); }
.icone-bouton:active { transform: scale(0.94); }
.icone-bouton:disabled { opacity: 0.35; cursor: not-allowed; }
.icone-bouton i { font-size: 1.15rem; }

/* ─────────── En-tête ─────────── */
.barre {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--ligne);
  background: color-mix(in srgb, var(--fond) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.barre-dedans { display: flex; align-items: center; gap: 20px; height: 66px; }
.marque { display: inline-flex; align-items: baseline; gap: 2px; color: var(--texte); text-decoration: none; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; }
.marque i { width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--accent); display: inline-block; transform: translateY(-0.04em); }
.marque:hover { color: var(--texte); }
.navigation { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.navigation a {
  padding: 8px 14px; border-radius: var(--r-pilule); color: var(--texte-doux); text-decoration: none; font-weight: 700; font-size: 0.95rem;
  transition: color 0.2s, background-color 0.2s;
}
.navigation a:hover { color: var(--texte); background: var(--surface); }
.navigation a[aria-current='page'] { color: var(--texte); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ligne); }
.bouton-discord { min-height: 40px; padding: 0 16px; background: #5865f2; border-color: transparent; color: #fff; }
.bouton-discord:hover { background: #4752c4; color: #fff; border-color: transparent; }
/* Le logo de Discord (la marque officielle), dans la couleur du texte qui l'entoure */
.logo-discord { display: none; }
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .logo-discord {
    --marque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36'%3E%3Cpath d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E");
    display: inline-block; flex: none; width: 1.16em; height: 0.88em; background-color: currentColor;
    -webkit-mask: var(--marque) center / contain no-repeat; mask: var(--marque) center / contain no-repeat;
  }
}
.compte-acces { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-pilule); border: 1px solid var(--ligne); background: var(--surface); color: var(--texte); text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: border-color 0.2s, background-color 0.2s; }
.compte-acces:hover { border-color: var(--ligne-forte); color: var(--texte); }
.compte-acces i { font-size: 1.35rem; }
.compte-invite, .compte-membre { align-items: center; gap: 8px; }
.compte-invite { display: inline-flex; }
.compte-membre { display: none; }
.compte-nom { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-compte] .compte-invite { display: none; }
[data-compte] .compte-membre { display: inline-flex; }
[data-compte] .compte-acces { padding-left: 5px; }
/* Ce qui ne se montre qu'aux visiteurs connectés, ou qu'aux autres */
[data-compte] .si-invite, :root:not([data-compte]) .si-membre { display: none !important; }
@media (max-width: 1120px) {
  .compte-acces { padding: 0; width: 40px; justify-content: center; }
  [data-compte] .compte-acces { padding: 0; border-color: transparent; background: none; }
  .compte-invite span, .compte-nom { display: none; }
}
.menu-mobile { display: none; }
@media (max-width: 900px) {
  .navigation { display: none; position: absolute; left: 0; right: 0; top: 66px; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gouttiere) 18px; background: var(--fond); border-bottom: 1px solid var(--ligne); }
  .navigation.ouvert { display: flex; }
  .navigation a { padding: 12px 14px; font-size: 1.05rem; }
  .menu-mobile { display: inline-grid; order: 2; }
  .compte-acces { margin-left: auto; order: 1; }
  .barre-dedans .bouton-discord { display: none; }
}

/* ─────────── Accueil : le haut de page ─────────── */
.hero { padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.hero-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.04em; }
.hero h1 .ligne { display: block; overflow: hidden; padding-bottom: 0.08em; white-space: nowrap; }
.hero h1 .ligne > span { display: inline-block; }
/* Avant l'animation d'entrée : rien ne clignote (classe posée dans le <head>, retirée par accueil.js) */
.entree .hero h1 .ligne > span, .entree .hero-texte, .entree .depot, .entree .scene3d-indice { visibility: hidden; }
.hero-texte { margin-top: 22px; max-width: 46ch; color: var(--texte-doux); font-size: 1.12rem; }
.depot {
  position: relative; margin-top: 30px; padding: 26px; max-width: 520px;
  border-radius: var(--r-panneau); background: var(--carte); border: 1px solid var(--ligne);
  box-shadow: var(--ombre-douce);
  /* Aucune transition sur transform ici : GSAP anime ce bloc à l'entrée et lit sa position */
  transition: border-color 0.25s, background-color 0.25s;
}
.depot::before {
  content: ''; position: absolute; inset: 10px; border-radius: 16px; pointer-events: none;
  border: 1.5px dashed var(--ligne-forte); transition: border-color 0.25s;
}
.depot.survol { border-color: var(--accent); background: var(--accent-voile); }
.depot.survol .depot-icone { transform: scale(1.14) rotate(-5deg); }
.depot.survol::before { border-color: var(--accent); }
.depot-zone { position: relative; display: flex; align-items: center; gap: 18px; padding: 8px; cursor: pointer; border-radius: 16px; }
.depot-icone { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 18px; background: var(--accent); color: var(--sur-accent); font-size: 1.7rem; box-shadow: 0 10px 24px -10px rgba(112, 175, 92, 0.8); transition: transform 0.35s var(--douce); }
.depot-zone strong { display: block; font-size: 1.2rem; letter-spacing: -0.01em; }
.depot-zone span { color: var(--texte-doux); font-size: 0.95rem; }
.depot-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding: 14px 8px 0; border-top: 1px solid var(--ligne); font-size: 0.95rem; color: var(--texte-doux); }
.puces-confiance { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--texte-doux); font-size: 0.92rem; }
.puces-confiance li { display: inline-flex; align-items: center; gap: 8px; }
.puces-confiance i { color: var(--accent-texte); font-size: 1.1rem; }

.scene3d { position: relative; aspect-ratio: 1 / 0.92; min-height: 380px; border-radius: 32px; }
.scene3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.scene3d canvas:active { cursor: grabbing; }
.scene3d-indice { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0; color: var(--texte-pale); font-size: 0.85rem; white-space: nowrap; pointer-events: none; }
.scene3d-repli { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: center; padding: 6%; }
.scene3d-repli canvas { position: static; width: 100%; height: auto; aspect-ratio: 1; border-radius: 18px; box-shadow: var(--ombre-douce); cursor: pointer; }
@media (max-width: 960px) {
  .hero-grille { grid-template-columns: minmax(0, 1fr); }
  /* Pas de hauteur minimale ici : avec le rapport largeur/hauteur, elle
     imposerait une largeur et ferait déborder la page sur téléphone */
  .scene3d { min-height: 0; aspect-ratio: 1 / 0.86; }
}

/* ─────────── Le studio ─────────── */
.section { padding-block: clamp(56px, 8vw, 110px); }
.section-tete { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 40px); }
.section-tete h2 { font-size: var(--t-h2); }
.section-tete p { margin-top: 14px; color: var(--texte-doux); font-size: 1.08rem; }
.studio { padding-top: clamp(20px, 3vw, 40px); scroll-margin-top: 70px; }

.atelier {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr);
  grid-template-areas: 'scene panneau' 'sortie sortie' 'resultat resultat';
}
.scene { grid-area: scene; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panneau { grid-area: panneau; min-width: 0; }
.sortie { grid-area: sortie; }
.resultat { grid-area: resultat; }
@media (max-width: 1060px) {
  .atelier { grid-template-columns: 1fr; grid-template-areas: 'scene' 'panneau' 'sortie' 'resultat'; }
}

.cadre {
  position: relative; display: grid; place-items: center; min-height: clamp(320px, 46vw, 540px); padding: clamp(14px, 3vw, 34px);
  border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--surface-forte);
  box-shadow: var(--ombre); overflow: hidden; isolation: isolate;
}
.cadre::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background: radial-gradient(60% 55% at 50% 45%, var(--accent-voile), transparent 70%);
}
.cadre.damier::before {
  opacity: 1;
  background: repeating-conic-gradient(var(--damier-a) 0 25%, var(--damier-b) 0 50%) 0 0 / 22px 22px;
}
.cadre canvas#apercu {
  max-width: 100%; max-height: min(62vh, 520px); width: auto; height: auto;
  border-radius: 14px; box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
  transform-origin: center; touch-action: none;
}
.atelier[data-etat='vide'] canvas#apercu { display: none; }
.vide { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 440px; }
.vide-icone { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--surface); border: 1px dashed var(--ligne-forte); font-size: 2rem; color: var(--accent-texte); }
.vide h3 { font-size: 1.35rem; }
.vide p { color: var(--texte-doux); }
.vide-exemples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.atelier:not([data-etat='vide']) .vide { display: none; }

.lecteur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-pilule); border: 1px solid var(--ligne); background: var(--carte); }
.lecteur .tete { flex: 1 1 160px; }
.lecteur-temps { min-width: 92px; color: var(--texte-doux); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.lecteur .separateur { width: 1px; height: 24px; background: var(--ligne); }
.atelier[data-etat='vide'] .lecteur, .atelier[data-etat='vide'] .info-source { opacity: 0.4; pointer-events: none; }
.info-source { color: var(--texte-pale); font-size: 0.88rem; padding-inline: 8px; }

/* Les onglets */
.panneau-boite { border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); overflow: hidden; }
.onglets { position: relative; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; border-bottom: 1px solid var(--ligne); }
.onglets::-webkit-scrollbar { display: none; }
.onglets button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 14px; border: 0; border-radius: var(--r-pilule); background: none; color: var(--texte-doux);
  font-weight: 700; font-size: 0.92rem; transition: color 0.2s;
}
.onglets button:hover { color: var(--texte); }
.onglets button[aria-selected='true'] { color: var(--sur-accent); }
.onglets button i { font-size: 1.05rem; }
.onglets-curseur { position: absolute; z-index: 0; top: 0; left: 0; height: 36px; border-radius: var(--r-pilule); background: var(--accent); transition: transform 0.45s var(--douce), width 0.45s var(--douce), height 0.45s var(--douce); }
.onglet { padding: 18px; max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 1060px) { .onglet { max-height: none; } }
.onglet-intro { margin-bottom: 14px; color: var(--texte-doux); font-size: 0.93rem; }

/* Les ambiances */
.ambiances { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ambiance {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 10px; text-align: left;
  border: 1px solid var(--ligne); border-radius: var(--r-tuile); background: var(--surface);
  transition: transform 0.3s var(--douce), border-color 0.2s, background-color 0.2s;
}
.ambiance:hover { transform: translateY(-2px); border-color: var(--ligne-forte); }
.ambiance canvas { width: 100%; aspect-ratio: 1; border-radius: 9px; background: #000; }
.ambiance strong { padding-inline: 4px; font-size: 0.92rem; line-height: 1.2; }
.ambiance small { padding-inline: 4px; color: var(--texte-pale); font-size: 0.78rem; line-height: 1.3; }
.ambiance[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-voile); box-shadow: inset 0 0 0 1px var(--accent); }
.ambiance[aria-pressed='true']::after {
  content: ''; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230c1810' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ambiances-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mes-ambiances { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mes-ambiances:empty { display: none; }
.puce-ambiance { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: var(--r-pilule); border: 1px solid var(--ligne); background: var(--surface-champ); font-size: 0.88rem; font-weight: 700; }
.puce-ambiance button { border: 0; background: none; padding: 4px; color: var(--texte-doux); display: inline-grid; place-items: center; border-radius: 50%; }
.puce-ambiance button:hover { color: var(--texte); background: var(--surface); }

/* Les réglages */
.reglage { margin-bottom: 14px; }
.reglage-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.reglage label { font-weight: 700; font-size: 0.94rem; }
.reglage output { color: var(--texte-doux); font-size: 0.85rem; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.reglage.inactif { opacity: 0.38; }
.reglage.inactif label::after { content: ' (indisponible ici)'; font-weight: 500; color: var(--texte-pale); font-size: 0.8rem; }
.groupe-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.groupe-titre h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

input[type='range'] {
  --pct: 0%;
  width: 100%; height: 22px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(to right, var(--accent) 0 var(--pct), var(--ligne-forte) var(--pct) 100%);
}
input[type='range']::-moz-range-track { height: 6px; border-radius: 99px; background: var(--ligne-forte); }
input[type='range']::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--texte); border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s var(--douce);
}
input[type='range']::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--texte); border: 3px solid var(--accent); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type='range']:focus-visible { outline: none; }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-voile), 0 0 0 6px var(--accent); }

.segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pilule); background: var(--surface-champ); border: 1px solid var(--ligne); }
.segments button { padding: 8px 10px; border: 0; border-radius: var(--r-pilule); background: none; color: var(--texte-doux); font-weight: 700; font-size: 0.88rem; transition: background-color 0.25s, color 0.25s; white-space: nowrap; }
.segments button:hover { color: var(--texte); }
.segments button[aria-pressed='true'] { background: var(--accent); color: var(--sur-accent); }
.segments button:disabled { opacity: 0.35; cursor: not-allowed; }

.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ > span, .champ > label { font-weight: 700; font-size: 0.94rem; }
.champ small { color: var(--texte-pale); font-size: 0.82rem; }
input[type='text'], input[type='number'], input[type='email'], input[type='password'], input[type='date'], input[type='time'], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-tuile);
  border: 1px solid var(--ligne-forte); background: var(--surface-champ); color: var(--texte);
  transition: border-color 0.2s, box-shadow 0.2s;
}
textarea { min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texte-pale); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-voile); }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
select option { background: var(--surface-forte); color: var(--texte); }
input[type='color'] { width: 48px; height: 44px; padding: 4px; border-radius: var(--r-tuile); border: 1px solid var(--ligne-forte); background: var(--surface-champ); cursor: pointer; }
.ligne-couleur { display: flex; align-items: center; gap: 10px; }
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-weight: 700; font-size: 0.94rem; cursor: pointer; }
.interrupteur input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 26px; border-radius: var(--r-pilule); background: var(--ligne-forte); position: relative; transition: background-color 0.25s; cursor: pointer; }
.interrupteur input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--texte); transition: transform 0.3s var(--douce); }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { transform: translateX(20px); background: var(--sur-accent); }
.interrupteur small { display: block; font-weight: 500; color: var(--texte-pale); font-size: 0.82rem; }

/* L'export */
.sortie-boite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: end; padding: 20px; border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); }
.sortie-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 18px; align-items: end; }
.sortie-champs .champ { margin: 0; }
.sortie-champs .champ-format { grid-column: span 2; }
@media (max-width: 640px) { .sortie-champs .champ-format { grid-column: auto; } }
.qualite { grid-column: 1 / -1; border-top: 1px solid var(--ligne); padding-top: 12px; }
.qualite summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--texte-doux); list-style: none; }
.qualite summary::-webkit-details-marker { display: none; }
.qualite summary i { transition: transform 0.3s var(--douce); }
.qualite[open] summary i { transform: rotate(90deg); }
.qualite-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 22px; margin-top: 16px; }
.bouton-export { min-height: 58px; padding: 0 30px; font-size: 1.05rem; }
.sortie-pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--texte-pale); font-size: 0.88rem; }
.estimation strong { color: var(--texte-doux); }
@media (max-width: 760px) { .sortie-boite { grid-template-columns: 1fr; } .bouton-export { width: 100%; } }

.progression { grid-column: 1 / -1; }
.progression-barre { height: 8px; border-radius: 99px; background: var(--ligne); overflow: hidden; }
.progression-barre i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-texte), var(--accent)); background-size: 200% 100%; animation: luire 1.4s linear infinite; transition: width 0.2s; }
@keyframes luire { to { background-position: -200% 0; } }
.progression p { margin-top: 8px; color: var(--texte-doux); font-size: 0.92rem; font-variant-numeric: tabular-nums; }

.resultat-boite { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px; border-radius: var(--r-panneau); border: 1px solid var(--accent); background: var(--accent-voile); }
.resultat-media { display: grid; place-items: center; min-height: 200px; padding: 14px; border-radius: 18px; background: repeating-conic-gradient(var(--damier-a) 0 25%, var(--damier-b) 0 50%) 0 0 / 18px 18px; }
.resultat-media img, .resultat-media video { max-height: 320px; width: auto; border-radius: 10px; }
.resultat h3 { font-size: 1.4rem; }
.resultat-details { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; }
.resultat-details li { padding: 6px 12px; border-radius: var(--r-pilule); background: var(--surface-champ); border: 1px solid var(--ligne); font-size: 0.88rem; font-weight: 700; }
.resultat-details li.ok { border-color: var(--accent); color: var(--accent-texte); }
.resultat-details li.alerte { border-color: var(--danger); color: var(--danger); }
.resultat-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.resultat-note { margin-top: 14px; color: var(--texte-doux); font-size: 0.92rem; }
.resultat-note i, .sortie-compte i { color: var(--accent-texte); vertical-align: -0.12em; }
.sortie-compte a { color: var(--accent-texte); }
/* Sans compte, l'animation se regarde : elle ne s'enregistre pas d'un clic droit ni d'un appui long */
.resultat-media.verrou img, .resultat-media.verrou video, .porte-media img, .porte-media video { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
@media (max-width: 760px) { .resultat-boite { grid-template-columns: 1fr; } }

/* ─────────── Les formats prêts à l'emploi ─────────── */
.vitrine { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 16px; }
.vitrine-case { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px; border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); overflow: hidden; }
.vitrine-case h3 { font-size: 1.15rem; }
.vitrine-case p { margin-top: 6px; color: var(--texte-doux); font-size: 0.92rem; }
.vitrine-case .mesure { color: var(--accent-texte); font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.vitrine-banniere { grid-column: span 4; grid-row: span 2; background: linear-gradient(160deg, var(--surface-forte), var(--surface)); }
.vitrine-banniere canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; box-shadow: var(--ombre); }
.vitrine-icone { grid-column: span 2; }
.vitrine-icone canvas { width: 112px; height: 112px; border-radius: 50%; box-shadow: var(--ombre-douce); }
.vitrine-emoji { grid-column: span 2; }
.message { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-champ); border: 1px solid var(--ligne); font-size: 0.95rem; }
.message canvas { width: 32px; height: 32px; flex: none; }
.vitrine-sticker { grid-column: span 3; }
.vitrine-sticker canvas { width: 140px; height: 140px; }
.vitrine-video { grid-column: span 3; background: radial-gradient(120% 100% at 100% 0%, var(--accent-voile), transparent 60%), var(--carte); }
.vitrine-video ul { margin: 6px 0 0; padding-left: 18px; color: var(--texte-doux); font-size: 0.92rem; }
@media (max-width: 960px) {
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrine-banniere { grid-column: 1 / -1; grid-row: auto; }
  .vitrine-icone, .vitrine-emoji, .vitrine-sticker, .vitrine-video { grid-column: span 1; }
}
@media (max-width: 560px) {
  .vitrine { grid-template-columns: 1fr; }
  .vitrine-icone, .vitrine-emoji, .vitrine-sticker, .vitrine-video { grid-column: auto; }
}

/* ─────────── Les trois étapes, sur une pellicule ─────────── */
.pellicule { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--r-panneau); background: var(--surface-forte); border: 1px solid var(--ligne); padding: 34px 0; overflow: hidden; }
.pellicule::before, .pellicule::after {
  content: ''; position: absolute; left: 0; right: 0; height: 12px;
  background: radial-gradient(circle at 10px 6px, var(--fond) 4px, transparent 4.5px) 0 0 / 22px 12px repeat-x;
}
.pellicule::before { top: 10px; }
.pellicule::after { bottom: 10px; }
.image-cle { padding: 26px clamp(18px, 3vw, 34px); border-right: 1px dashed var(--ligne-forte); }
.image-cle:last-child { border-right: 0; }
.image-cle .numero { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--sur-accent); font-weight: 800; }
.image-cle h3 { margin-top: 18px; font-size: 1.3rem; }
.image-cle p { margin-top: 8px; color: var(--texte-doux); }
@media (max-width: 860px) {
  .pellicule { grid-template-columns: 1fr; padding: 30px 0; }
  .image-cle { border-right: 0; border-bottom: 1px dashed var(--ligne-forte); }
  .image-cle:last-child { border-bottom: 0; }
}

/* ─────────── Les guides ─────────── */
.liste-guides { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne); }
.liste-guides a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 24px; padding: 26px 4px; border-bottom: 1px solid var(--ligne); color: var(--texte); text-decoration: none; }
.liste-guides strong { font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.1; transition: color 0.25s; }
.liste-guides span { grid-column: 1; color: var(--texte-doux); }
.liste-guides i { grid-row: 1 / span 2; grid-column: 2; font-size: 1.8rem; color: var(--texte-pale); transition: transform 0.35s var(--douce), color 0.25s; }
.liste-guides a:hover strong { color: var(--accent-texte); }
.liste-guides a:hover i { transform: translateX(6px) rotate(-45deg); color: var(--accent-texte); }

/* ─────────── Questions fréquentes ─────────── */
.questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: 0; }
.questions > div { padding: 22px 0; border-top: 1px solid var(--ligne); }
.questions dt { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.questions dd { margin: 8px 0 0; color: var(--texte-doux); }
@media (max-width: 760px) { .questions { grid-template-columns: 1fr; } }

/* ─────────── Partenaires et publicité ─────────── */
.ig-zone { padding-block: 10px 30px; }
.ig-zone > span { display: block; margin: 0 0 10px; color: var(--texte-pale); font-size: 0.85rem; }
.ig-banner-1, .ig-banner-2 { min-height: 90px; }
.ig-banner-1:empty, .ig-banner-2:empty { display: none; }
.ig-zone:has(.ig-banner-1:empty), .ig-zone:has(.ig-banner-2:empty) { display: none; }
.pub-slot { margin: 24px auto; max-width: 728px; min-height: 90px; display: flex; align-items: center; justify-content: center; }
/* Un emplacement encore vide ne laisse pas de trou dans la page */
.pub-slot:empty { display: none; }

/* ─────────── Pied de page ─────────── */
.pied { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--ligne); padding-block: 44px 34px; color: var(--texte-doux); font-size: 0.95rem; }
.pied .pub-slot { margin-bottom: 34px; }
.pied-colonnes { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 30px clamp(18px, 2.4vw, 40px); align-items: start; }
.pied-marque p { margin: 8px 0 18px; max-width: 32ch; }
.pied-colonnes nav { display: grid; gap: 9px; justify-items: start; }
.pied-colonnes h2 { margin-bottom: 4px; color: var(--texte); font-size: 0.95rem; font-weight: 800; letter-spacing: 0; }
.pied-colonnes nav a, #revoquer { color: var(--texte-doux); text-decoration: none; text-align: left; }
.pied-colonnes nav a:hover, #revoquer:hover { color: var(--texte); text-decoration: underline; }
#revoquer { background: none; border: 0; padding: 0; }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--ligne); font-size: 0.9rem; }
.theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pilule); border: 1px solid var(--ligne); background: var(--surface); }
.theme button { padding: 6px 12px; border: 0; border-radius: var(--r-pilule); background: none; color: var(--texte-doux); font-weight: 700; font-size: 0.85rem; }
.theme button[aria-pressed='true'] { background: var(--texte); color: var(--fond); }
@media (max-width: 860px) {
  .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 460px) { .pied-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* ─────────── Les pages de contenu (guides, légal, contact) ─────────── */
.page-tete { padding-block: clamp(36px, 6vw, 80px) clamp(18px, 3vw, 30px); }
.page-tete .rubrique { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pilule); background: var(--accent-voile); color: var(--accent-texte); font-weight: 700; font-size: 0.88rem; }
.page-tete h1 { margin-top: 18px; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); letter-spacing: -0.04em; max-width: 18ch; }
.page-tete .chapo { margin-top: 18px; max-width: 58ch; color: var(--texte-doux); font-size: 1.15rem; }
.page-tete .maj { margin-top: 14px; color: var(--texte-pale); font-size: 0.9rem; }
.article { max-width: 74ch; padding-bottom: 40px; }
.article > * + * { margin-top: 1.05em; }
.article h2 { margin-top: 2.2em; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
.article h3 { margin-top: 1.7em; font-size: 1.2rem; }
.article p, .article li, .article dd { color: color-mix(in srgb, var(--texte) 88%, transparent); }
.article ul, .article ol { padding-left: 1.3em; }
.article li + li { margin-top: 0.45em; }
.article dl { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--ligne); }
.article dt, .article dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.article dt { font-weight: 800; padding-right: 18px; }
@media (max-width: 640px) { .article dl { grid-template-columns: 1fr; } .article dt { border-bottom: 0; padding-bottom: 0; } }
.tableau { overflow-x: auto; border-radius: 18px; border: 1px solid var(--ligne); background: var(--carte); }
.tableau table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tableau th, .tableau td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau th { color: var(--texte-doux); font-weight: 700; font-size: 0.85rem; background: var(--surface); }
.encart { position: relative; padding: 18px 20px 18px 58px; border-radius: 18px; border: 1px solid var(--ligne); background: var(--carte); }
.encart > i.ph { position: absolute; left: 18px; top: 17px; font-size: 1.45rem; color: var(--accent-texte); }
.encart.astuce { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-voile); }
.encart.attention { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.encart.attention > i.ph { color: var(--danger); }
.cta { display: grid; gap: 6px; margin-top: 2.2em !important; padding: 26px 28px; border-radius: var(--r-panneau); background: var(--accent); color: var(--sur-accent); text-decoration: none; transition: transform 0.3s var(--douce); }
.cta:hover { color: var(--sur-accent); transform: translateY(-2px); }
.cta strong { font-size: 1.4rem; letter-spacing: -0.02em; }
.cta span { opacity: 0.85; }

.formulaire { display: grid; gap: 4px; max-width: 640px; }
.formulaire .bouton { justify-self: start; margin-top: 8px; }
.formulaire .piege { position: absolute; left: -9999px; }
.erreur-champ { color: var(--danger); font-size: 0.86rem; min-height: 1.2em; }

/* ─────────── Les comptes : inscription, connexion, mon compte ─────────── */
.avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--sur-accent); font-weight: 800; font-size: 0.95rem; line-height: 1; text-transform: uppercase; }
.avatar-grand { width: 76px; height: 76px; font-size: 2.2rem; }

.acces { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 5vw, 72px); min-height: calc(100dvh - 66px - 220px); }
.acces.seule { grid-template-columns: minmax(0, 520px); justify-content: center; }
.acces-carte { width: 100%; max-width: 520px; justify-self: end; padding: clamp(22px, 3vw, 38px); border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre-douce); }
.acces.seule .acces-carte { justify-self: center; }
.acces-carte h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); letter-spacing: -0.035em; }
.acces-chapo { margin-top: 12px; color: var(--texte-doux); }
.acces-carte .formulaire { margin-top: 24px; max-width: none; }
/* Dans les formulaires du compte, une erreur ne réserve sa place que quand elle existe */
.acces-carte .erreur-champ:empty, .carte .erreur-champ:empty { display: none; }
.acces-carte .champ, .carte .champ { margin-bottom: 12px; }
.acces-carte .encart { margin-top: 20px; }
.acces-bascule { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ligne); color: var(--texte-doux); }
.acces-bascule a { font-weight: 700; }
.acces-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 6px; font-size: 0.94rem; }
.acces-ligne .case { margin: 0; }
.formulaire .bouton-large { width: 100%; justify-self: stretch; min-height: 52px; font-size: 1.05rem; }
.bouton.occupe { pointer-events: none; opacity: 0.7; }
.bouton.occupe i { animation: tourne 0.9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

.champ-secret { position: relative; }
.champ-secret input { padding-right: 52px; }
.champ-secret .icone-bouton { position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-color: transparent; background: none; color: var(--texte-doux); }
.champ-secret .icone-bouton:hover { color: var(--texte); }
.champ-secret .icone-bouton:active { transform: none; }
input[aria-invalid='true'] { border-color: var(--danger); }
.force { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.force i { height: 4px; border-radius: 2px; background: var(--ligne-forte); transition: background-color 0.25s; }
.force[data-niveau='1'] i:nth-child(-n + 1) { background: var(--danger); }
.force[data-niveau='2'] i:nth-child(-n + 2) { background: #e0b04c; }
.force[data-niveau='3'] i:nth-child(-n + 3) { background: var(--accent); }
.force[data-niveau='4'] i { background: var(--accent); }
.case { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 2px; font-size: 0.94rem; color: var(--texte-doux); cursor: pointer; }
.case input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; border: 1.5px solid var(--ligne-forte); background: var(--surface-champ); display: inline-grid; place-items: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.case input::after { content: ''; width: 10px; height: 6px; margin-top: -2px; border-left: 2.5px solid var(--sur-accent); border-bottom: 2.5px solid var(--sur-accent); transform: rotate(-45deg) scale(0); transition: transform 0.2s var(--douce); }
.case input:checked { background: var(--accent); border-color: var(--accent); }
.case input:checked::after { transform: rotate(-45deg) scale(1); }
.case input[aria-invalid='true'] { border-color: var(--danger); }

.externes { display: grid; gap: 10px; margin-top: 22px; }
.externes::after { content: 'ou avec ton e-mail'; margin-top: 8px; color: var(--texte-pale); font-size: 0.88rem; text-align: center; }
.externes .bouton { width: 100%; min-height: 50px; }
.externes-note { color: var(--texte-pale); font-size: 0.86rem; text-align: center; }

.acces-suite { margin-top: 24px; }
.acces-suite h2 { margin-top: 16px; font-size: 1.6rem; }
.acces-suite p { margin-top: 10px; color: var(--texte-doux); }
.acces-suite .bouton { margin-top: 18px; }
.acces-note { font-size: 0.92rem; }
.acces-pastille { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--accent); color: var(--sur-accent); font-size: 1.7rem; }

.acces-atouts { max-width: 560px; }
.acces-demo { border-radius: var(--r-panneau); overflow: hidden; border: 1px solid var(--ligne); background: #000; box-shadow: var(--ombre); }
.acces-demo canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.acces-atouts ul { display: grid; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.acces-atouts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.acces-atouts li > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-tuile); background: var(--accent-voile); color: var(--accent-texte); font-size: 1.4rem; }
.acces-atouts strong { display: block; font-size: 1.08rem; letter-spacing: -0.01em; }
.acces-atouts span { color: var(--texte-doux); font-size: 0.96rem; }
@media (max-width: 900px) {
  .acces { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .acces-carte { justify-self: center; }
  .acces-atouts { justify-self: center; width: 100%; max-width: 520px; }
  .acces-demo { display: none; }
  .acces-atouts ul { margin-top: 0; }
}

.espace { padding-block: clamp(28px, 5vw, 64px) 20px; }
.espace-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.espace-tete > div { flex: 1 1 260px; min-width: 0; }
.espace-tete h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.espace-tete p { margin-top: 6px; color: var(--texte-doux); overflow-wrap: anywhere; }
.espace > .encart { margin-top: 26px; max-width: 760px; }
.espace-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.carte { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); scroll-margin-top: 86px; transition: border-color 0.3s, box-shadow 0.3s; }
.carte-large { grid-column: 1 / -1; }
.carte h2 { font-size: 1.45rem; }
.carte-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.carte-texte { margin-top: 10px; color: var(--texte-doux); }
.carte .formulaire { margin-top: 18px; max-width: none; }
.carte .formulaire .bouton { margin-top: 2px; }
.carte.attire { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-voile); }
.carte-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.liste-ambiances { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.liste-ambiances:empty { display: none; }
.liste-ambiances li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 10px; border-radius: 18px; border: 1px solid var(--ligne); background: var(--surface-champ); }
.liste-ambiances canvas { width: 72px; height: 72px; border-radius: 12px; background: #000; grid-row: 1 / span 2; }
.liste-ambiances strong { align-self: end; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-ambiances small { grid-column: 2; align-self: start; color: var(--texte-pale); font-size: 0.84rem; }
.liste-ambiances .actions { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; }
.vide { display: grid; justify-items: start; gap: 12px; margin-top: 16px; padding: 22px; border-radius: 18px; border: 1.5px dashed var(--ligne-forte); color: var(--texte-doux); }
.suppression { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.suppression summary { cursor: pointer; font-weight: 700; color: var(--danger); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.suppression summary::-webkit-details-marker { display: none; }
.suppression p { margin-top: 12px; color: var(--texte-doux); }
.bouton-danger { border-color: color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); }
.bouton-danger:hover { border-color: var(--danger); color: var(--danger); }
.espace-attente { display: grid; place-content: center; justify-items: center; gap: 14px; min-height: 46dvh; color: var(--texte-doux); }
.espace-attente i { font-size: 2rem; animation: tourne 0.9s linear infinite; }
@media (max-width: 760px) {
  .espace-grille { grid-template-columns: minmax(0, 1fr); }
  .liste-ambiances li { grid-template-columns: 60px minmax(0, 1fr); }
  .liste-ambiances canvas { width: 60px; height: 60px; }
  .liste-ambiances .actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-end; }
}

/* ─────────── Télécharger : la fenêtre qui demande un compte ─────────── */
.porte { position: fixed; inset: 0; width: min(460px, calc(100% - 32px)); height: fit-content; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(24px, 4vw, 36px); overflow: hidden auto; overscroll-behavior: contain; border: 1px solid var(--ligne-forte); border-radius: var(--r-panneau); background: var(--surface-forte); color: var(--texte); box-shadow: var(--ombre); text-align: center; }
.porte:not([open]) { display: none; }
.porte[open] { animation: porte 0.45s var(--douce); }
.porte::backdrop { background: color-mix(in srgb, var(--fond) 74%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes porte { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.porte-fermer { position: absolute; top: 14px; right: 14px; }
.porte-media { display: grid; place-items: center; width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 10px; border-radius: 18px; background: repeating-conic-gradient(var(--damier-a) 0 25%, var(--damier-b) 0 50%) 0 0 / 18px 18px; }
.porte-media img, .porte-media video { display: block; max-width: 100%; max-height: min(150px, 22vh); width: auto; border-radius: 10px; }
.porte h2 { font-size: 1.6rem; letter-spacing: -0.02em; }
.porte > p { margin-top: 10px; color: var(--texte-doux); }
.porte-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.porte-externes { display: contents; }
/* Sur un écran étroit, un libellé long passe à la ligne au lieu de dépasser */
.porte-actions .bouton { width: 100%; min-height: 50px; padding: 8px 16px; white-space: normal; line-height: 1.2; }
.porte > p.porte-note { margin-top: 14px; color: var(--texte-pale); font-size: 0.86rem; }
.porte-note i { vertical-align: -0.12em; }

/* ─────────── Dépôt sur toute la page, notifications ─────────── */
.voile-depot { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: color-mix(in srgb, var(--fond) 70%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.voile-depot div { display: grid; justify-items: center; gap: 12px; padding: 40px 56px; border-radius: 32px; border: 2px dashed var(--accent); background: var(--surface-forte); font-weight: 800; font-size: 1.5rem; box-shadow: var(--ombre); }
.voile-depot i { font-size: 3rem; color: var(--accent-texte); }
.toasts { position: fixed; z-index: 85; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; width: min(460px, calc(100% - 32px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface-forte); border: 1px solid var(--ligne-forte); box-shadow: var(--ombre); font-size: 0.95rem; pointer-events: auto; animation: toast 0.45s var(--douce); }
.toast i { font-size: 1.25rem; color: var(--accent-texte); flex: none; margin-top: 1px; }
.toast.erreur i { color: var(--danger); }
@keyframes toast { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* ─────────── Les modèles : bannières et logos déjà dessinés ─────────── */
.rubrique { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pilule); background: var(--accent-voile); color: var(--accent-texte); font-weight: 700; font-size: 0.88rem; }
.chapo { color: var(--texte-doux); font-size: 1.12rem; }
.section-tete .rubrique { margin-bottom: 14px; }

.mod-haut { position: relative; padding-block: clamp(28px, 5vw, 64px) clamp(26px, 4vw, 52px); }
.mod-haut-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mod-haut h1 { margin-top: 18px; font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.04em; }
.mod-haut .chapo { margin-top: 20px; max-width: 46ch; }
.mod-saisie { display: grid; gap: 8px; margin-top: 28px; max-width: 520px; }
.mod-saisie label { font-weight: 700; font-size: 0.94rem; }
.mod-saisie input { min-height: 64px; padding: 0 22px; border-radius: 20px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; box-shadow: var(--ombre-douce); }
.mod-haut .pastilles { margin-top: 16px; max-width: 520px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: var(--c, transparent); color: var(--texte-doux);
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35); cursor: pointer;
  transition: transform 0.25s var(--douce), box-shadow 0.2s;
}
.pastille:hover { transform: scale(1.1); }
.pastille[aria-pressed='true'], .pastille-libre.choisie { box-shadow: 0 0 0 3px var(--fond), 0 0 0 5px var(--texte); }
.pastille-libre { border: 1.5px dashed var(--ligne-forte); box-shadow: none; overflow: hidden; }
.pastille-libre input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pastille-libre i { font-size: 1.05rem; pointer-events: none; }
.pastille-libre.choisie { border-style: solid; border-color: transparent; }
.pastille-libre.choisie i { color: #fff; mix-blend-mode: difference; }
.pastille-libre:focus-within { outline: 2px solid var(--accent-texte); outline-offset: 3px; }

/* Une carte de profil : la bannière, l'avatar qui la chevauche, un nom */
.profil { position: relative; overflow: hidden; padding-bottom: 20px; border-radius: 22px; border: 1px solid var(--ligne); background: var(--surface-forte); box-shadow: var(--ombre); }
.profil-banniere canvas { width: 100%; height: auto; aspect-ratio: 17 / 6; }
.profil-avatar { position: relative; width: 23%; margin: -12% 0 0 5%; padding: 6px; border-radius: 50%; background: var(--surface-forte); }
.profil-avatar canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.profil-identite { display: grid; gap: 2px; padding: 8px 6% 0; }
.profil-identite strong { overflow: hidden; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.profil-identite span { display: inline-flex; align-items: center; gap: 7px; color: var(--texte-doux); font-size: 0.9rem; }
.profil-statut { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.profil-lignes { display: grid; gap: 9px; padding: 16px 6% 0; }
.profil-lignes i { height: 10px; border-radius: 99px; background: var(--ligne); }
.profil-lignes i:nth-child(1) { width: 72%; }
.profil-lignes i:nth-child(2) { width: 54%; }
.profil-lignes i:nth-child(3) { width: 36%; }
/* Une bannière seule (de serveur, en-tête large) : à ses vraies proportions, sans le profil autour */
.profil.seule { padding-bottom: 0; }
.profil.seule .profil-banniere canvas { aspect-ratio: auto; }
.profil.seule .profil-avatar, .profil.seule .profil-identite, .profil.seule .profil-lignes { display: none; }

.mod-vedette { position: relative; }
.mod-vedette::before { content: ''; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-voile), transparent); pointer-events: none; }
.mod-vedette .profil { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transform-origin: 60% 50%; transition: transform 0.9s var(--douce); }
.mod-vedette:hover .profil { transform: none; }
.mod-vedette canvas { cursor: pointer; }
.profil.change canvas { animation: fondu 0.7s var(--douce); }
@keyframes fondu { from { opacity: 0.25; } }
.mod-vedette-note { margin-top: 16px; color: var(--texte-pale); font-size: 0.88rem; text-align: center; }
@media (max-width: 960px) {
  .mod-haut-grille { grid-template-columns: minmax(0, 1fr); }
  .mod-vedette .profil { transform: none; }
}

/* La barre des filtres, qui suit le défilement */
.mod-barre { position: sticky; top: 66px; z-index: 40; padding-block: 10px; border-block: 1px solid var(--ligne); background: color-mix(in srgb, var(--fond) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mod-barre-dedans { display: flex; align-items: center; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.mod-barre-dedans::-webkit-scrollbar { display: none; }
.mod-barre .segments { flex: none; }
.mod-barre-nom { position: relative; flex: 0 1 260px; min-width: 170px; margin-left: auto; }
.mod-barre-nom i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texte-pale); font-size: 1.1rem; pointer-events: none; }
.mod-barre-nom input { min-height: 40px; padding: 6px 14px 6px 40px; border-radius: var(--r-pilule); font-weight: 700; }
@media (max-width: 720px) { .mod-barre-nom { display: none; } }

.mod-liste { padding-block: clamp(26px, 4vw, 44px) 10px; scroll-margin-top: 130px; }
.mod-groupe + .mod-groupe { margin-top: clamp(40px, 6vw, 72px); }
.mod-groupe-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.mod-groupe-tete h2 { font-size: var(--t-h2); }
.mod-groupe-tete p { color: var(--texte-doux); }
.mod-groupe-tete span { color: var(--texte-pale); font-variant-numeric: tabular-nums; }
.mod-grille { display: grid; gap: 16px; }
.mod-grille-bannieres { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.mod-grille-logos { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.modele {
  display: grid; align-content: start; gap: 10px; padding: 8px 8px 14px; text-align: left;
  border: 1px solid var(--ligne); border-radius: 20px; background: var(--carte); color: var(--texte);
  transition: transform 0.35s var(--douce), border-color 0.25s, box-shadow 0.3s, background-color 0.25s;
}
.modele:hover { transform: translateY(-4px); border-color: var(--ligne-forte); box-shadow: var(--ombre-douce); }
.modele:active { transform: translateY(-1px) scale(0.99); }
.modele-vue { display: block; overflow: hidden; border-radius: 14px; background: #000; }
.modele-vue canvas { width: 100%; height: auto; }
.modele-logo .modele-vue { margin: 8px 16px 2px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ligne); }
.modele-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 6px; }
.modele-pied strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.modele small { padding-inline: 6px; color: var(--texte-pale); font-size: 0.84rem; line-height: 1.35; }
.etiquette { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; }
.etiquette-gratuit { background: var(--accent-voile); color: var(--accent-texte); }
.etiquette-premium { background: var(--texte); color: var(--fond); }
@media (max-width: 520px) { .mod-grille-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Les trois offres : gratuit, Premium, Pro */
.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); }
.offre-conseillee { border-color: var(--accent); background: linear-gradient(170deg, var(--accent-voile), transparent 62%), var(--carte); box-shadow: var(--ombre-douce); }
.offre-marque { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 8px; background: var(--accent); color: var(--sur-accent); font-size: 0.78rem; font-weight: 800; }
.offre h3 { font-size: 1.3rem; }
.offre-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.offre-prix strong { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.offre-prix span { color: var(--texte-pale); font-size: 0.9rem; }
.offre-pour { min-height: 3.2em; color: var(--texte-doux); }
.offre .pass-atouts { flex: 1; }
.offre .bouton { width: 100%; white-space: normal; padding-block: 8px; line-height: 1.2; }
.pass-atouts { display: grid; align-content: start; gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.pass-atouts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; color: color-mix(in srgb, var(--texte) 88%, transparent); }
.pass-atouts li i { margin-top: 3px; color: var(--accent-texte); font-size: 1.15rem; }
.offres-note { margin-top: 20px; color: var(--texte-doux); }
@media (max-width: 900px) {
  .offres { grid-template-columns: minmax(0, 1fr); }
  .offre-pour { min-height: 0; }
}

.suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.suite-carte { display: grid; align-content: start; gap: 8px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); text-decoration: none; transition: transform 0.35s var(--douce), border-color 0.25s; }
.suite-carte:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--texte); }
.suite-carte i { font-size: 2rem; color: var(--accent-texte); }
.suite-carte strong { font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.15; }
.suite-carte span { color: var(--texte-doux); }
@media (max-width: 760px) { .suite { grid-template-columns: minmax(0, 1fr); } }

/* L'éditeur d'un modèle : l'aperçu à gauche, les réglages à droite, le bouton en bas */
.editeur {
  position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100% - 24px)); height: min(840px, calc(100vh - 24px)); height: min(840px, calc(100dvh - 24px)); max-width: none; max-height: none;
  margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--ligne-forte); border-radius: var(--r-panneau); background: var(--surface-forte); color: var(--texte); box-shadow: var(--ombre);
}
.editeur:not([open]) { display: none; }
.editeur[open] { animation: porte 0.45s var(--douce); }
.editeur::backdrop { background: color-mix(in srgb, var(--fond) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.editeur-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--ligne); }
.editeur-sorte { display: flex; align-items: center; gap: 10px; color: var(--texte-doux); font-size: 0.9rem; font-weight: 700; }
.editeur-tete h2 { margin-top: 4px; font-size: 1.7rem; letter-spacing: -0.03em; }
.editeur-mot { color: var(--texte-doux); font-size: 0.95rem; }
.editeur-boutons { display: flex; gap: 6px; flex: none; }
.editeur-corps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, 1fr); min-height: 0; }
.editeur-vue { display: grid; align-content: center; gap: 14px; min-height: 0; padding: clamp(14px, 3vw, 34px); overflow: auto; background: radial-gradient(70% 60% at 50% 40%, var(--accent-voile), transparent 72%), var(--fond); }
.editeur-vue .profil { width: 100%; max-width: 620px; margin-inline: auto; }
.editeur-lecteur { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--texte-doux); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.logo-vues { display: grid; justify-items: center; gap: 18px; }
.logo-grand { width: min(300px, 68%); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: var(--ombre); }
.logo-vues .message { width: min(100%, 360px); margin: 0; background: var(--surface-forte); }
.logo-vues .message canvas { width: 40px; height: 40px; border-radius: 50%; }
.logo-vues .message span { color: var(--texte-doux); font-size: 0.9rem; }
.logo-vues .message strong { display: block; color: var(--texte); font-size: 0.98rem; }
.editeur-reglages { min-height: 0; padding: 20px 22px; overflow-y: auto; border-left: 1px solid var(--ligne); scrollbar-width: thin; }
.options-premium { min-width: 0; margin: 20px 0 0; padding: 14px 16px 6px; border: 1px solid var(--ligne-forte); border-radius: 18px; }
.options-premium legend { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; font-weight: 800; }
.options-premium legend i { color: var(--accent-texte); font-size: 1.15rem; }
.options-note { margin: 0 0 14px; color: var(--texte-pale); font-size: 0.85rem; }
.editeur-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 22px; border-top: 1px solid var(--ligne); background: var(--surface); }
.editeur-etat { display: grid; gap: 4px; flex: 1; min-width: 0; color: var(--texte-doux); font-size: 0.92rem; }
.editeur-etat .lien-bouton { justify-self: start; padding: 0; font-size: 0.9rem; }
.editeur-etat .demande-pass { color: var(--texte); font-weight: 700; }
.editeur-resultat { display: grid; gap: 2px; color: var(--texte); }
.editeur-resultat .alerte { color: var(--danger); }
.editeur-pied .bouton-export { flex: none; }
.editeur.occupe .editeur-reglages, .editeur.occupe .editeur-boutons { opacity: 0.45; pointer-events: none; }
@media (max-width: 860px) {
  .editeur { width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .editeur-tete { padding: 12px 14px 10px; }
  .editeur-tete h2 { font-size: 1.35rem; }
  .editeur-mot { display: none; }
  .editeur-corps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
  .editeur-vue { position: sticky; top: 0; z-index: 2; padding: 12px 14px; overflow: visible; border-bottom: 1px solid var(--ligne); }
  .editeur-vue .profil { max-width: 420px; padding-bottom: 12px; }
  .editeur-vue .profil-lignes { display: none; }
  .logo-grand { width: min(170px, 46%); }
  .logo-vues { gap: 10px; }
  .editeur-reglages { overflow: visible; border-left: 0; padding: 16px 14px; }
  .editeur-pied { flex-direction: column; align-items: stretch; padding: 10px 14px 14px; }
  .editeur-pied .bouton-export { width: 100%; min-height: 52px; }
}

/* La fenêtre du pass */
.porte-pass { width: min(500px, calc(100% - 32px)); }
.porte-pastille { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 18px; background: var(--texte); color: var(--fond); font-size: 1.7rem; }
.porte .pass-atouts { margin-top: 18px; padding: 16px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--surface-champ); font-size: 0.96rem; }
.porte-attente { color: var(--texte-doux); font-size: 0.95rem; }
.pass-cle { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne); text-align: left; }
.pass-cle label { font-weight: 700; font-size: 0.92rem; }
.pass-cle input { flex: 1; min-width: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.pass-cle .erreur-champ:empty { display: none; }

/* ─────────── Les outils gratuits et le kit de serveur ─────────── */
.outil-panneau { margin-bottom: clamp(26px, 4vw, 44px); padding: clamp(18px, 3vw, 30px); border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre-douce); }
.outil-panneau > .champ:last-child, .outil-panneau > .options-premium:last-child .champ:last-child { margin-bottom: 0; }
.outil-ligne { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 14px; margin-bottom: 14px; }
.outil-ligne .champ { flex: 1 1 220px; margin: 0; }
.outil-ligne .bouton { min-height: 44px; }
.outil-note { margin-top: 12px; color: var(--texte-pale); font-size: 0.88rem; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { padding: 8px 14px; border-radius: var(--r-pilule); border: 1px solid var(--ligne-forte); background: var(--surface-champ); color: var(--texte-doux); font-weight: 700; font-size: 0.9rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--douce); }
.puce:hover { color: var(--texte); border-color: var(--texte-doux); }
.puce:active { transform: scale(0.96); }
.puce[aria-pressed='true'] { background: var(--accent); border-color: transparent; color: var(--sur-accent); }
.resultats { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.resultats.en-colonnes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.resultats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 12px 12px 16px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--surface-champ); }
.resultats .valeur { overflow-wrap: anywhere; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.resultats small { grid-column: 1; color: var(--texte-pale); font-size: 0.82rem; overflow-wrap: anywhere; }
.resultats .actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.resultats code, .tableau code { color: var(--accent-texte); font: 500 0.9rem ui-monospace, 'Cascadia Mono', Consolas, monospace; overflow-wrap: anywhere; }

.kit-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.kit-compte { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.kit-note { margin-top: 2px; max-width: 62ch; color: var(--texte-doux); font-size: 0.94rem; }
.kit-tete + .progression { margin-bottom: 16px; }
.kit-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: clamp(30px, 5vw, 56px); }
.kit-carte { display: grid; gap: 10px; padding: 8px 8px 12px; border-radius: 20px; border: 1px solid var(--ligne); background: var(--carte); }
.kit-carte canvas { width: 100%; height: auto; border-radius: 13px; background: #000; }
.kit-carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 6px; }
.kit-carte-pied strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-occupe .outil-panneau, .kit-occupe .kit-grille { opacity: 0.55; pointer-events: none; }

/* ─────────── Les tarifs ─────────── */
.tarifs-haut h1 { max-width: 20ch; }
.tarifs-haut .chapo { margin-top: 20px; max-width: 60ch; }
.pass-etat { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--accent); background: var(--accent-voile); color: var(--accent-texte); font-weight: 700; }
.pass-etat i { font-size: 1.3rem; }
.offre h2 { font-size: 1.3rem; }
.offres-note i { color: var(--accent-texte); vertical-align: -0.12em; }
.tableau th[scope='row'] { background: none; color: var(--texte); font-size: 0.95rem; }
.tableau td { font-variant-numeric: tabular-nums; }
.suite-forte { border-color: var(--accent); background: linear-gradient(170deg, var(--accent-voile), transparent 62%), var(--carte); }
.suite-carte .bouton { justify-self: start; margin-top: 10px; }
.suite-carte b { color: var(--texte); }
.produits { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.produits a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--surface-champ); color: var(--texte); text-decoration: none; transition: border-color 0.25s, transform 0.3s var(--douce); }
.produits a:hover { border-color: var(--accent); transform: translateX(3px); color: var(--texte); }
.produits b { font-size: 1.02rem; }
.produits span { grid-column: 1; color: var(--texte-doux); font-size: 0.9rem; }
.produits em { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent-texte); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ─────────── L'accueil : les modèles en vitrine, les outils, le défilé de mots ─────────── */
.hero { position: relative; }
/* Une lueur suit le pointeur dans le haut de page (--mx et --my sont posés par accueil.js) */
.hero::before { content: ''; position: absolute; inset: -66px 0 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), var(--accent-voile), transparent 70%); transition: opacity 0.6s; }
.hero.suivi::before { opacity: 1; }
.hero h1 em { font-style: normal; color: var(--accent-texte); }
.hero-suite { margin-top: 18px; color: var(--texte-doux); font-size: 0.98rem; }
.hero-suite a { font-weight: 700; }

.defile { overflow: hidden; padding-block: clamp(18px, 3vw, 34px); border-block: 1px solid var(--ligne); user-select: none; -webkit-user-select: none; }
.defile-piste { display: flex; width: max-content; gap: 0; animation: defile 46s linear infinite; }
.defile span { padding-inline: 0.42em; font-size: clamp(2.6rem, 1.4rem + 5vw, 6.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--ligne-forte); }
.defile span:nth-child(3n + 1) { color: var(--texte); -webkit-text-stroke: 0; }
.defile span:nth-child(6n + 4) { color: var(--accent-texte); }
.defile i { align-self: center; flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--accent); }
@keyframes defile { to { transform: translateX(-50%); } }

.vitrine-modeles { display: grid; gap: 16px; }
.vitrine-modeles-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: clamp(20px, 3vw, 32px); }
.vitrine-modeles-saisie input { flex: 1 1 280px; max-width: 460px; min-height: 58px; padding: 0 20px; border-radius: 18px; font-size: 1.2rem; font-weight: 700; }
.rangee-modeles { display: grid; gap: 16px; }
.rangee-bannieres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rangee-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
a.modele { text-decoration: none; }
a.modele:hover { color: var(--texte); }
@media (max-width: 900px) {
  .rangee-modeles { grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere); }
  .rangee-modeles::-webkit-scrollbar { display: none; }
  .rangee-bannieres { grid-auto-columns: min(78vw, 340px); }
  .rangee-logos { grid-auto-columns: min(42vw, 180px); }
  .rangee-modeles > * { scroll-snap-align: center; }
}

.grille-outils { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.outil-carte { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: var(--r-panneau); border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); text-decoration: none; transition: transform 0.35s var(--douce), border-color 0.25s; }
.outil-carte:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--texte); }
.outil-carte > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-tuile); background: var(--accent-voile); color: var(--accent-texte); font-size: 1.5rem; }
.outil-carte strong { margin-top: 6px; font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.15; }
.outil-carte span { color: var(--texte-doux); font-size: 0.95rem; }
.outil-carte .etiquette { position: absolute; top: 18px; right: 18px; }

/* Une lumière suit le pointeur sur les cartes (--px et --py sont posés par commun.js) */
.modele, .offre, .suite-carte, .outil-carte { background-image: radial-gradient(340px circle at var(--px, -400px) var(--py, -400px), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); background-repeat: no-repeat; }
.offre-conseillee, .suite-forte { background-image: radial-gradient(340px circle at var(--px, -400px) var(--py, -400px), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(170deg, var(--accent-voile), transparent 62%); }

/* La barre de progression de la lecture, sous l'en-tête */
@supports (animation-timeline: scroll()) {
  .barre::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); animation: avance linear both; animation-timeline: scroll(root); }
  @keyframes avance { to { transform: scaleX(1); } }
}

/* ─────────── Les outils pour monter un serveur ─────────── */
input[type='search'], input[type='url'] {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-tuile);
  border: 1px solid var(--ligne-forte); background: var(--surface-champ); color: var(--texte);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type='search']::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); cursor: pointer; }
.outil-titre { margin-bottom: 16px; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }
.outil-panneau .interrupteur:last-child { margin-bottom: 0; }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.compte { color: var(--texte-pale); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trop { color: var(--danger); font-weight: 700; }
.puces-defilent { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 4px; scrollbar-width: thin; }
.puces-defilent .puce { flex: none; }
@media (max-width: 760px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* Deux colonnes : les réglages, qui suivent le défilement, et le résultat */
.atelier-plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; margin-bottom: clamp(30px, 5vw, 56px); }
.atelier-plan > .outil-panneau { position: sticky; top: 86px; margin-bottom: 0; max-height: calc(100vh - 106px); max-height: calc(100dvh - 106px); overflow-y: auto; scrollbar-width: thin; }
.plan-apercu { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px; align-items: start; }
.plan-cote { display: grid; gap: 14px; }
.plan-cote .outil-note { margin: 0; }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-conseils { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--texte-doux); font-size: 0.9rem; line-height: 1.45; }
.plan-conseils li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.plan-conseils i { margin-top: 2px; color: var(--accent-texte); font-size: 1.15rem; }
@media (max-width: 1180px) { .plan-apercu { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .atelier-plan { grid-template-columns: minmax(0, 1fr); }
  .atelier-plan > .outil-panneau { position: static; max-height: none; overflow: visible; }
}

.tuiles-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.tuile-choix { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: var(--r-tuile); border: 1px solid var(--ligne-forte); background: var(--surface-champ); color: var(--texte-doux); font-weight: 700; font-size: 0.85rem; line-height: 1.15; transition: transform 0.25s var(--douce), background-color 0.2s, color 0.2s, border-color 0.2s; }
.tuile-choix i { font-size: 1.5rem; color: var(--accent-texte); }
.tuile-choix:hover { transform: translateY(-2px); border-color: var(--texte-doux); color: var(--texte); }
.tuile-choix:active { transform: scale(0.97); }
.tuile-choix[aria-pressed='true'] { border-color: transparent; background: var(--accent); color: var(--sur-accent); }
.tuile-choix[aria-pressed='true'] i { color: inherit; }

/* Un serveur dessiné comme dans Discord : la fenêtre, la liste des salons, les rôles */
.dc-fenetre { overflow: hidden; border-radius: 20px; border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre-douce); }
.dc-serveur { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--ligne); }
.dc-serveur strong { overflow: hidden; font-size: 1.08rem; text-overflow: ellipsis; white-space: nowrap; }
.dc-serveur span { color: var(--texte-pale); font-size: 0.8rem; white-space: nowrap; }
.dc-liste { padding: 8px 8px 14px; font-size: 0.96rem; }
.dc-categorie { display: flex; align-items: center; gap: 6px; min-height: 30px; margin-top: 12px; padding: 2px 8px; color: var(--texte-pale); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; }
.dc-categorie:first-child { margin-top: 2px; }
.dc-categorie > i:first-child { flex: none; font-size: 0.78rem; }
.dc-salon { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 8px; border-radius: 8px; color: var(--texte-doux); transition: background-color 0.15s, color 0.15s; }
.dc-liste .dc-salon:hover { background: var(--surface); color: var(--texte); }
.dc-salon > i:first-child { flex: none; color: var(--texte-pale); font-size: 1.15rem; }
.dc-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-acces { flex: none; color: var(--texte-pale); font-size: 0.95rem; }
.dc-outils { display: none; flex: none; gap: 2px; }
.dc-salon:hover .dc-outils, .dc-categorie:hover .dc-outils, .dc-outils:focus-within, .en-saisie .dc-outils { display: inline-flex; }
.dc-outils button, .dc-copier { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--texte-pale); font-size: 0.95rem; }
.dc-outils button:hover, .dc-copier:hover { background: var(--accent-voile); color: var(--accent-texte); }
.dc-copier { opacity: 0.55; }
.dc-salon:hover .dc-copier, .dc-categorie:hover .dc-copier, .dc-copier:focus-visible { opacity: 1; }
.dc-champ { flex: 1; min-width: 0; min-height: 30px !important; padding: 2px 8px !important; border-radius: 8px !important; font-size: 0.94rem; }
@media (hover: none) { .dc-outils { display: inline-flex; } .dc-copier { opacity: 1; } }
.dc-roles { padding: 16px 18px; border-radius: 20px; border: 1px solid var(--ligne); background: var(--carte); }
.dc-roles h2 { margin-bottom: 12px; font-size: 0.95rem; letter-spacing: 0; }
.dc-roles ul { display: grid; gap: 9px; margin: 0 0 14px; padding: 0; list-style: none; }
.dc-roles li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
.dc-roles li::before { content: ''; grid-row: 1 / span 2; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--c); }
.dc-roles strong { color: color-mix(in srgb, var(--c) 76%, var(--texte)); font-size: 0.98rem; }
.dc-roles span { grid-column: 2; color: var(--texte-pale); font-size: 0.82rem; line-height: 1.35; }
.dc-roles a { font-weight: 700; font-size: 0.92rem; }

/* Un nom dans tous les styles */
.styles-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 10px; }
.style-carte { display: grid; gap: 4px; padding: 8px 10px 9px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface-champ); color: var(--texte); text-align: left; transition: transform 0.25s var(--douce), border-color 0.2s, background-color 0.2s; }
.style-carte:hover { transform: translateY(-2px); border-color: var(--ligne-forte); }
.style-carte:active { transform: scale(0.985); }
.style-carte[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-voile); }
.style-carte .dc-salon { padding-inline: 2px; color: var(--texte); font-size: 1.02rem; }
.style-pied { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-inline: 2px; color: var(--texte-pale); font-size: 0.78rem; }
.style-pied strong { font-weight: 700; }

/* La bibliothèque de symboles */
.champ-recherche { flex: 2 1 280px !important; }
.assemblage { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px; border-radius: 16px; border: 1px solid var(--accent); background: var(--accent-voile); }
.assemblage input { flex: 1; min-width: 0; font-size: 1.1rem; }
.signes-groupe { margin-top: 22px; }
.signes-groupe h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 1rem; letter-spacing: 0; }
.signes-groupe h3 span { color: var(--texte-pale); font-size: 0.8rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.signes { display: flex; flex-wrap: wrap; gap: 6px; }
.signe { position: relative; display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface-champ); color: var(--texte); font-size: 1.3rem; line-height: 1; transition: transform 0.2s var(--douce), border-color 0.2s, background-color 0.2s; }
.signe:hover { transform: translateY(-2px) scale(1.06); border-color: var(--accent); background: var(--accent-voile); }
.signe:active { transform: scale(0.94); }
.signe-ligne { height: 42px; padding: 0 14px; font-size: 1rem; white-space: nowrap; }
.signe.favori::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.signes-vides { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.signe-vide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--surface-champ); }
.signe-vide strong { display: block; }
.signe-vide span { color: var(--texte-pale); font-size: 0.84rem; line-height: 1.35; }
.exemples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.exemple { display: grid; gap: 10px; align-content: start; }
.exemple-pied { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-inline: 4px; }
.exemple-pied span { color: var(--texte-pale); font-size: 0.85rem; }
.exemple-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-inline: 4px; }

/* Deux colonnes dont c'est le résultat, à droite, qui suit le défilement */
.atelier-plan.resultat-fixe { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.atelier-plan.resultat-fixe > .outil-panneau:first-child { position: static; max-height: none; overflow: visible; }
.atelier-plan.resultat-fixe > .outil-panneau:last-child { position: sticky; top: 86px; margin-bottom: 0; max-height: calc(100vh - 106px); max-height: calc(100dvh - 106px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 860px) {
  .atelier-plan.resultat-fixe { grid-template-columns: minmax(0, 1fr); }
  .atelier-plan.resultat-fixe > .outil-panneau:last-child { position: static; order: -1; max-height: none; overflow: visible; }
}

/* Un message, tel que Discord le montre (discord-markdown.js) */
.dc-messages { display: grid; gap: 14px; }
.dc-message { padding: 14px 16px 16px; border-radius: 18px; border: 1px solid var(--ligne); background: var(--carte); }
.dc-message > header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dc-message > header .compte { margin-left: auto; }
.dc-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent); color: var(--sur-accent); font-weight: 800; font-size: 0.95rem; }
.dc-app { padding: 1px 6px; border-radius: 5px; background: #5865f2; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; }
.faux-label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.94rem; }
.md { line-height: 1.5; overflow-wrap: anywhere; }
.md-ligne { min-height: 1.5em; }
.md-titre { margin: 0.5em 0 0.25em; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.md > .md-titre:first-child { margin-top: 0; }
.md-titre-1 { font-size: 1.5rem; }
.md-titre-2 { font-size: 1.25rem; }
.md-titre-3 { font-size: 1.05rem; }
.md-petit { color: var(--texte-pale); font-size: 0.8rem; }
.md-puce { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); margin-left: calc(var(--niveau, 0) * 1.2em + 0.2em); }
.md-marque { color: var(--texte-doux); }
.md-citation { margin: 2px 0; padding-left: 12px; border-left: 4px solid var(--ligne-forte); }
.md-code { padding: 1px 5px; border-radius: 5px; border: 1px solid var(--ligne); background: var(--surface-champ); font: 500 0.88em ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.md-bloc { margin: 6px 0; padding: 10px 12px; overflow-x: auto; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface-champ); font: 500 0.86rem/1.45 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre-wrap; }
.md-spoiler { border-radius: 4px; background: var(--texte); color: transparent; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.md-spoiler:not(.vu) * { color: transparent !important; background: none !important; border-color: transparent !important; }
.md-spoiler.vu { background: var(--ligne-forte); color: inherit; cursor: auto; }
.md-mention { padding: 0 4px; border-radius: 5px; background: color-mix(in srgb, #5865f2 30%, transparent); font-weight: 700; }
.md-date { padding: 0 4px; border-radius: 5px; background: var(--surface-champ); }
.md-emoji { color: var(--texte-doux); }
.md-attente { color: var(--texte-pale); }
.barre-outils { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; padding: 6px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface-champ); }
.barre-outils button { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--texte-doux); font-size: 1.2rem; transition: background-color 0.15s, color 0.15s; }
.barre-outils button:hover { background: var(--accent-voile); color: var(--accent-texte); }
.barre-outils span { width: 1px; margin: 6px 4px; background: var(--ligne-forte); }
textarea.code { font: 500 0.86rem/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre; overflow: auto; }

/* Les rôles */
.roles-liste { display: grid; gap: 8px; }
.role-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) 108px auto; align-items: center; gap: 8px; }
.role-ligne input[type='color'] { width: 44px; }
.role-code { font-variant-numeric: tabular-nums; }
.role-outils { display: inline-flex; gap: 2px; }
.role-outils .icone-bouton { width: 34px; height: 34px; }
@media (max-width: 560px) {
  .role-ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
  .role-code, .role-outils .icone-bouton:nth-child(3) { display: none; }
}
.dc-theme { padding: 14px 14px 10px; border-radius: 18px; border: 1px solid var(--ligne); }
.dc-theme h2 { margin-bottom: 10px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.03em; }
.dc-theme-sombre { background: #313338; color: #dbdee1; }
.dc-theme-sombre h2 { color: #949ba4; }
.dc-theme-clair { background: #fff; color: #313338; }
.dc-theme-clair h2 { color: #5c5e66; }
.dc-membre { display: flex; align-items: center; gap: 10px; padding: 5px 4px; }
.dc-membre > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.2; }
.dc-membre strong { overflow: hidden; font-size: 0.98rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dc-membre small { overflow: hidden; opacity: 0.6; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.dc-membre .dc-avatar { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.dc-alerte { margin-left: auto; color: #f0b232; font-size: 1.1rem; }
.degrade-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 16px 0; }
.degrade-pas { display: grid; gap: 2px; padding: 0 0 10px; overflow: hidden; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface-champ); text-align: left; transition: transform 0.2s var(--douce), border-color 0.2s; }
.degrade-pas:hover { transform: translateY(-2px); border-color: var(--ligne-forte); }
.degrade-pas::before { content: ''; height: 30px; margin-bottom: 8px; background: var(--c); }
.degrade-pas strong { padding-inline: 12px; color: color-mix(in srgb, var(--c) 80%, var(--texte)); font-size: 0.95rem; }
.degrade-pas span { padding-inline: 12px; color: var(--texte-pale); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.puce-degrade, .puce-degrade:hover { border-color: transparent; background: linear-gradient(90deg, var(--de), var(--a)); color: #10201a; }
.conv-apercu { width: 44px; height: 44px; flex: none; border-radius: var(--r-tuile); border: 1px solid var(--ligne-forte); }
.conv-resultat { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.conv-resultat strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.conv-resultat code { color: var(--texte-pale); font: 500 0.9rem ui-monospace, Consolas, monospace; }

/* Les permissions */
.perm-groupe { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.perm-groupe legend { margin-bottom: 6px; padding: 0; font-weight: 800; }
.perm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background-color 0.15s; }
.perm:hover { background: var(--surface); }
.perm input, .bilan-point input, .emb-cote input { accent-color: var(--accent); }
.perm input { width: 20px; height: 20px; }
.perm strong { display: block; font-size: 0.98rem; }
.perm small { color: var(--texte-pale); font-size: 0.84rem; line-height: 1.35; }
.perm code { color: var(--texte-pale); font: 500 0.7rem ui-monospace, Consolas, monospace; }
.perm-forte strong::after, .perm-moyenne strong::after { margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-size: 0.68rem; font-weight: 800; vertical-align: 0.1em; white-space: nowrap; }
.perm-forte strong::after { content: 'très sensible'; background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.perm-moyenne strong::after { content: 'équipe'; background: var(--surface); color: var(--texte-doux); box-shadow: inset 0 0 0 1px var(--ligne); }
@media (max-width: 620px) { .perm code { display: none; } }
.perm-alertes { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; font-size: 0.92rem; line-height: 1.45; }
.perm-alertes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface-champ); }
.perm-alertes i { margin-top: 1px; font-size: 1.2rem; }
.perm-alertes .fort { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.perm-alertes .fort i { color: var(--danger); }
.perm-alertes .calme i { color: var(--accent-texte); }
.perm-lien { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--ligne-forte); color: var(--accent-texte); font: 500 0.82rem/1.45 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.perm-lien.attente { color: var(--texte-pale); font-family: inherit; }

/* Le bilan */
.bilan-groupe { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.bilan-groupe:last-child { margin-bottom: 0; }
.bilan-groupe legend { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 0; font-weight: 800; font-size: 1.1rem; }
.bilan-groupe legend i { color: var(--accent-texte); font-size: 1.3rem; }
.bilan-point { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; transition: background-color 0.15s; }
.bilan-point:hover { background: var(--surface); }
.bilan-point input { width: 22px; height: 22px; margin-top: 2px; }
.bilan-point strong { display: block; line-height: 1.3; }
.bilan-point em { margin-left: 4px; padding: 1px 7px; border-radius: 6px; background: var(--accent-voile); color: var(--accent-texte); font-size: 0.68rem; font-style: normal; font-weight: 800; vertical-align: 0.12em; white-space: nowrap; }
.bilan-point small { color: var(--texte-pale); font-size: 0.86rem; line-height: 1.4; }
.bilan-point:has(input:checked) strong { color: var(--texte-doux); text-decoration: line-through; text-decoration-color: var(--ligne-forte); }
.bilan-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.bilan-tete h2 { font-size: 1.4rem; }
.bilan-tete p { margin-top: 4px; color: var(--texte-doux); font-size: 0.94rem; }
.anneau { --part: 0; display: grid; place-content: center; justify-items: center; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(closest-side, var(--surface-forte) 79%, transparent 80% 100%), conic-gradient(var(--accent) calc(var(--part) * 1%), var(--ligne) 0); }
.anneau strong { font-size: 2.1rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.anneau span { color: var(--texte-pale); font-size: 0.76rem; }
.bilan-jauges { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; font-size: 0.9rem; }
.bilan-jauges li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 10px; }
.jauge { height: 8px; overflow: hidden; border-radius: 99px; background: var(--ligne); }
.jauge i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.5s var(--douce); }
#bilanPrioritesBloc h3 { font-size: 1rem; letter-spacing: 0; }
.bilan-priorites { display: grid; gap: 10px; margin: 8px 0 0; padding: 0 0 0 1.2em; font-size: 0.92rem; line-height: 1.45; }
.bilan-priorites strong { display: block; }
.bilan-priorites span { color: var(--texte-doux); }
.bilan-priorites a { display: inline-block; margin-left: 4px; font-weight: 700; }
.bilan-priorites .urgent::marker { color: var(--danger); font-weight: 800; }

/* Le décodeur d'identifiant, le vérificateur d'invitation */
.sf-bloc { margin-top: 20px; }
.sf-bloc h3 { font-size: 1.15rem; }
.sf-bloc > code { display: inline-block; margin: 4px 0 2px; color: var(--texte-pale); font: 500 0.86rem ui-monospace, Consolas, monospace; }
.inv-carte { margin-top: 18px; padding: clamp(16px, 2.6vw, 24px); border-radius: 20px; border: 1px solid var(--ligne-forte); background: var(--surface-champ); }
.inv-carte > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.inv-carte img, .inv-initiale { width: 72px; height: 72px; border-radius: 22px; }
.inv-initiale { display: grid; place-items: center; background: var(--accent); color: var(--sur-accent); font-size: 2rem; font-weight: 800; }
.inv-carte h2 { font-size: 1.5rem; overflow-wrap: anywhere; }
.inv-carte header p { margin-top: 4px; color: var(--texte-doux); font-size: 0.94rem; }
.inv-chiffres { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0; padding-block: 14px; border-block: 1px solid var(--ligne); }
.inv-chiffres strong { display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.inv-chiffres span { color: var(--texte-pale); font-size: 0.86rem; }
.inv-points { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 0.95rem; }
.inv-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.inv-points i { margin-top: 3px; color: var(--accent-texte); font-size: 1.1rem; }
.inv-points .attention i { color: var(--danger); }

/* Un embed */
.dc-embed { --c: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-top: 4px; padding: 12px 14px 14px 16px; border-radius: 8px; border-left: 4px solid var(--c); background: var(--surface-champ); }
.dc-embed-corps { display: grid; gap: 8px; min-width: 0; }
.dc-embed-auteur { font-weight: 700; font-size: 0.88rem; }
.dc-embed-titre { font-weight: 800; font-size: 1.05rem; overflow-wrap: anywhere; }
a.dc-embed-titre { text-decoration: none; }
a.dc-embed-titre:hover { text-decoration: underline; }
.dc-embed-description { color: color-mix(in srgb, var(--texte) 88%, transparent); font-size: 0.93rem; }
.dc-embed-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; font-size: 0.9rem; }
.dc-embed-champs > div { grid-column: 1 / -1; min-width: 0; }
.dc-embed-champs > .en-ligne { grid-column: auto; }
.dc-embed-champs strong { display: block; margin-bottom: 2px; font-size: 0.88rem; }
.dc-embed-image { width: 100%; max-height: 300px; border-radius: 6px; object-fit: cover; }
.dc-embed-vignette { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; }
.dc-image-absente { display: grid; place-items: center; min-height: 60px; padding: 6px; border: 1px dashed var(--ligne-forte); color: var(--texte-pale); font-size: 0.8rem; text-align: center; }
.dc-embed-pied { color: var(--texte-pale); font-size: 0.78rem; }
.emb-champ { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 8px; margin-bottom: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface-champ); }
.emb-champ textarea { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
.emb-cote { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-doux); font-size: 0.86rem; white-space: nowrap; }
.emb-cote input { width: 18px; height: 18px; }

/* ─────────── Le nouvel accueil et les finitions ─────────── */
/* Le parti pris du site : des aplats, des traits fins, une seule couleur d'accent, et les vrais
   outils montrés en grand. Aucun décor, aucun halo, rien qui flotte. Une seule échelle de
   rayons : 10 px pour ce qui se clique, 16 px pour les panneaux. */
:root { --carte: var(--surface-forte); --r-pilule: 10px; --r-panneau: 16px; --r-tuile: 10px; --ombre: 0 18px 44px -24px rgba(0, 6, 2, 0.7); --ombre-douce: 0 8px 22px -14px rgba(0, 6, 2, 0.5); --grain: 0.04; }
html { scrollbar-color: var(--ligne-forte) transparent; }
body { background: var(--fond); }
@media print { body::after { display: none; } }
.interrupteur input { border-radius: 999px; }

/* La barre du haut : pleine, sans verre dépoli. Le lien courant est souligné. */
.barre { background: var(--fond); backdrop-filter: none; -webkit-backdrop-filter: none; }
.navigation a:hover { background: none; color: var(--texte); }
.navigation a[aria-current='page'] { background: none; box-shadow: none; color: var(--texte); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.bouton-discord, .bouton-discord:hover { background: none; border-color: var(--ligne-forte); color: var(--texte); }
.bouton-discord:hover { border-color: var(--texte); }

/* Les boutons : un seul bouton plein par écran, les autres au trait */
.bouton { transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.12s; }
.bouton:active { transform: translateY(1px); }
.bouton-fort { box-shadow: none; }

/* L'étiquette au-dessus d'un titre : du texte, pas une pastille */
.rubrique, .page-tete .rubrique { padding: 0; border-radius: 0; background: none; color: var(--accent-texte); font-size: 0.92rem; }
.rubrique i { display: none; }

/* Les cartes : à plat. Au survol, le trait fonce ; rien ne penche, aucune lumière ne suit le pointeur. */
.modele, .offre, .suite-carte, .outil-carte, .offre-conseillee, .suite-forte { background-image: none; }
.offre-conseillee, .suite-forte { background-color: var(--carte); }
.outil-carte, .outil-carte:hover, .suite-carte, .suite-carte:hover { transform: none; box-shadow: none; }
.outil-carte:hover, .suite-carte:hover { border-color: var(--ligne-forte); }
.outil-carte > i, .suite-carte > i, .outil-carte > strong, .suite-carte > strong { transform: none; }
/* L'étiquette « Pass » d'une carte d'outil : son texte prenait la couleur de la phrase, et ne se lisait plus */
.outil-carte .etiquette-premium { color: var(--fond); font-size: 0.76rem; }

/* ─── L'accueil ─── */
/* Le haut de page : le titre à gauche, la phrase et le champ à droite ; dessous, la planche sur toute la largeur */
.accueil-haut { padding-block: clamp(22px, 4.5vh, 48px) clamp(26px, 4vh, 44px); }
.accueil-haut-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: clamp(22px, 3.4vh, 36px) clamp(28px, 5vw, 72px); }
.accueil-haut h1 { font-size: clamp(2.3rem, 1rem + 3.4vw, 3.75rem); line-height: 1.03; letter-spacing: -0.04em; }
.accueil-haut .hero-texte { max-width: 44ch; margin: 0; font-size: 1.06rem; }
.accueil-nom { display: grid; gap: 8px; margin-top: 18px; }
.accueil-nom label { font-weight: 700; font-size: 0.94rem; }
.accueil-nom-rang { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.accueil-nom input { min-height: 52px; padding: 0 16px; border-radius: var(--r-pilule); font-size: 1.1rem; font-weight: 700; }
.accueil-nom .bouton-fort { min-height: 52px; padding-inline: 20px; }
.accueil-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vitrine-modeles .accueil-actions { margin-top: 10px; }

/* La planche : la bannière animée à gauche ; à droite le serveur, son plan et ses rôles */
.planche { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin: 0; overflow: hidden; border-radius: var(--r-panneau); border: 1px solid var(--ligne-forte); background: var(--surface-forte); }
.planche-banniere { display: block; min-height: 268px; background: #0b1c1f; }
.planche-banniere canvas { width: 100%; height: 100%; object-fit: cover; }
.planche-corps { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; border-left: 1px solid var(--ligne); }
.planche-serveur { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px 18px; border-bottom: 1px solid var(--ligne); font-size: 1.02rem; }
.planche-serveur strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planche-icone { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--sur-accent); font-size: 0.92rem; }
.planche-colonnes { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-width: 0; }
.planche-part { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-width: 0; padding: 8px 16px 14px; }
.planche-part + .planche-part { border-left: 1px solid var(--ligne); }
.planche-part > a { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--texte-doux); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.planche-part > a:hover { color: var(--accent-texte); }
.planche-roles { display: grid; align-content: start; gap: 10px; margin: 0; padding: 10px 2px 0; list-style: none; font-weight: 700; font-size: 0.9rem; }
.planche-roles li { display: flex; align-items: center; gap: 8px; min-width: 0; color: color-mix(in srgb, var(--c) 72%, var(--texte)); }
.planche-roles li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.maq-liste.dc-liste { padding: 0; font-size: 0.82rem; transition: opacity 0.26s; }
.maq-liste.change { opacity: 0; }
.maq-liste .dc-categorie { min-height: 22px; margin-top: 8px; font-size: 0.62rem; }
.maq-liste .dc-salon { min-height: 24px; gap: 6px; }
.maq-liste .dc-salon > i:first-child { font-size: 0.9rem; }

/* Trois faits, entre deux traits */
.faits dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(20px, 4vw, 56px); margin: 0; padding-block: 22px; border-block: 1px solid var(--ligne); }
.faits dt { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.faits dd { margin: 4px 0 0; color: var(--texte-doux); font-size: 0.96rem; }

/* Le parcours : à gauche, le titre et l'index des étapes restent en vue ; à droite, chaque étape et ses outils en lignes */
.parcours-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: clamp(24px, 5vw, 80px); }
.parcours-tete { position: sticky; top: 96px; }
.parcours-tete h2 { font-size: var(--t-h2); }
.parcours-tete > p { margin-top: 14px; color: var(--texte-doux); }
.parcours-index { display: grid; margin-top: 26px; border-bottom: 1px solid var(--ligne); counter-reset: etape; }
.parcours-index a { counter-increment: etape; display: grid; grid-template-columns: 1.7em minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--ligne); color: var(--texte-doux); font-weight: 700; text-decoration: none; transition: color 0.2s; }
.parcours-index a::before { content: counter(etape); color: var(--texte-pale); font-variant-numeric: tabular-nums; transition: color 0.2s; }
.parcours-index a:hover, .parcours-index a[aria-current='true'] { color: var(--texte); }
.parcours-index a[aria-current='true']::before { color: var(--accent-texte); }
.etapes { display: grid; gap: clamp(36px, 5vw, 68px); margin: 0; padding: 0; list-style: none; }
.etape { scroll-margin-top: 96px; }
.etape-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px 14px; }
.etape-numero, .etape-tete h3 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.etape-numero { color: var(--texte-pale); font-variant-numeric: tabular-nums; }
.etape-tete p { grid-column: 2; max-width: 54ch; color: var(--texte-doux); }
.etape-outils { margin-top: 18px; border-top: 1px solid var(--ligne-forte); }
.etape .outil-carte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; align-items: baseline; gap: 4px 22px; padding: 17px 2px; border: 0; border-bottom: 1px solid var(--ligne); border-radius: 0; background: none; color: var(--texte); text-decoration: none; }
.etape .outil-carte > i { display: none; }
.etape .outil-carte strong { grid-column: 1; grid-row: 1; font-size: 1.12rem; letter-spacing: -0.01em; transition: color 0.2s; }
.etape .outil-carte > span:not(.etiquette) { grid-column: 2; color: var(--texte-doux); font-size: 0.98rem; }
/* L'étiquette « Pass » d'un outil payant : au bout de son nom, dans la même colonne */
.etape .outil-carte .etiquette { position: static; grid-column: 1; grid-row: 1; justify-self: end; align-self: center; }
.etape .outil-carte::after { content: '→'; color: var(--texte-pale); font-weight: 700; transition: transform 0.25s var(--douce), color 0.2s; }
.etape .outil-carte:hover strong, .etape .outil-carte:hover::after { color: var(--accent-texte); }
.etape .outil-carte:hover::after { transform: translateX(5px); }

/* Les bannières en vitrine : une grande, cinq autour. Les toiles sont de vraies bannières, qui jouent. */
[data-page='accueil'] .rangee-bannieres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
[data-page='accueil'] .rangee-bannieres .modele { padding: 0; border: 0; border-radius: 0; background: none; }
[data-page='accueil'] .rangee-bannieres .modele:first-child { grid-column: span 2; grid-row: span 2; }
[data-page='accueil'] .rangee-bannieres .modele-vue { border-radius: var(--r-tuile); }
[data-page='accueil'] .rangee-bannieres .modele-pied { padding: 0; }
[data-page='accueil'] .rangee-bannieres .etiquette { display: none; }
[data-page='accueil'] .rangee-bannieres .modele:hover strong { color: var(--accent-texte); }

/* Le studio et Poulpi : deux blocs de texte, séparés par un trait */
[data-page='accueil'] .suite { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border-top: 1px solid var(--ligne-forte); }
[data-page='accueil'] .suite-carte { gap: 10px; padding: 26px clamp(20px, 4vw, 56px) 8px 0; border: 0; border-radius: 0; background: none; }
[data-page='accueil'] .suite-carte + .suite-carte { padding-left: clamp(20px, 4vw, 56px); padding-right: 0; border-left: 1px solid var(--ligne); }
[data-page='accueil'] .suite-carte > i { display: none; }
[data-page='accueil'] .suite-carte strong { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); letter-spacing: -0.02em; }
[data-page='accueil'] .suite-carte:hover strong { color: var(--accent-texte); }

@media (max-width: 900px) {
  .accueil-haut-grille { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .planche { grid-template-columns: minmax(0, 1fr); }
  .planche-banniere { min-height: 0; aspect-ratio: 17 / 6; }
  .planche-corps { border-left: 0; border-top: 1px solid var(--ligne); }
  .parcours-grille { grid-template-columns: minmax(0, 1fr); }
  .parcours-tete { position: static; }
  .parcours-index { display: none; }
  [data-page='accueil'] .rangee-bannieres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .accueil-nom-rang { grid-template-columns: minmax(0, 1fr); }
  .faits dl { grid-template-columns: minmax(0, 1fr); }
  .etape .outil-carte { grid-template-columns: minmax(0, 1fr) auto; }
  .etape .outil-carte > span:not(.etiquette) { grid-column: 1; grid-row: 2; }
  .etape .outil-carte::after { grid-row: 1; grid-column: 2; }
  [data-page='accueil'] .suite { grid-template-columns: minmax(0, 1fr); }
  [data-page='accueil'] .suite-carte + .suite-carte { padding-left: 0; border-left: 0; border-top: 1px solid var(--ligne); }
}

/* La page des outils : la recherche, puis une rangée par étape */
.outils-recherche { position: relative; max-width: 520px; margin-bottom: clamp(24px, 4vw, 40px); }
.outils-recherche i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--texte-pale); font-size: 1.25rem; pointer-events: none; }
.outils-recherche input { min-height: 56px; padding: 0 18px 0 50px; border-radius: var(--r-pilule); font-size: 1.1rem; font-weight: 700; }
.outils-rang { margin-bottom: clamp(30px, 5vw, 52px); }
.outils-rang > h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); }
.outils-rang > h2 span { color: var(--texte-pale); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; }

/* Le mouvement : le haut de page se pose une fois, à l'arrivée ; plus bas, chaque bloc monte en entrant à l'écran */
@media (prefers-reduced-motion: no-preference) {
  .accueil-haut h1, .accueil-haut-texte, .planche { animation: monte 0.8s var(--douce) both; }
  .accueil-haut-texte { animation-delay: 0.08s; }
  .planche { animation-delay: 0.16s; }
  @keyframes monte { from { opacity: 0; transform: translateY(18px); } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-apparait] { animation: apparait linear both; animation-timeline: view(); animation-range: entry 0% entry 34%; }
    @keyframes apparait { from { opacity: 0; transform: translateY(22px); } }
  }
}
/* ─────────── Les cookies : accepter ou refuser (js/consentement.js) ─────────── */
.tes-choix { position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(440px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 22px; border-radius: var(--r-panneau); border: 1px solid var(--ligne-forte); background: var(--surface-forte); box-shadow: var(--ombre); animation: tes-choix 0.5s var(--douce); }
.tes-choix h2 { font-size: 1.2rem; letter-spacing: -0.02em; }
.tes-choix p { margin-top: 8px; color: var(--texte-doux); font-size: 0.93rem; line-height: 1.5; }
.tes-choix-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 16px; }
.tes-choix-actions .bouton { width: 100%; }
.tes-choix-actions .lien-bouton { grid-column: 1 / -1; justify-self: start; font-size: 0.92rem; }
.tes-choix-detail { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.tes-choix-detail .bouton { margin-top: 2px; }
.tes-choix-fermer { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; }
@keyframes tes-choix { from { opacity: 0; transform: translateY(18px); } }

/* ─────────── Apparitions et transitions de page ─────────── */
@view-transition { navigation: auto; }
/* D'une page à l'autre : l'ancienne recule et se trouble, la nouvelle monte. L'en-tête, lui, ne bouge pas. */
.barre { view-transition-name: barre; }
::view-transition-old(root) { animation: 0.26s var(--douce) both sortie-page; }
::view-transition-new(root) { animation: 0.55s var(--douce) both entree-page; }
::view-transition-group(barre) { animation-duration: 0.3s; }
@keyframes sortie-page { to { opacity: 0; transform: scale(0.985); filter: blur(5px); } }
@keyframes entree-page { from { opacity: 0; transform: translateY(18px) scale(0.99); } }

@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; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(barre) { animation: none; }
  .maq-carte { animation: none; }
  .barre::after { display: none; }
  .defile-piste { animation: none; }
}