/* ============================================================
   ELOZYA — Design system « Midnight Observatory » (refonte 2026-09)
   Nuit profonde prune/indigo · or champagne · serif gravé
   Référence : aidd_docs/memory/design.md
   ============================================================ */

/* Polices auto-hébergées (public/fonts, OFL) : aucune requête vers un tiers,
   donc aucune adresse IP de visiteur transmise à Google (RGPD). Sous-ensemble
   latin, fontes variables : une seule requête par famille. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cinzel.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italique.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/outfit.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night-900: #0a0816;
  --night-800: #110d24;
  --night-700: #181232;
  --night-600: #221943;
  --plum: #2a1b4d;
  --veil: rgba(255, 255, 255, 0.06);
  --veil-strong: rgba(255, 255, 255, 0.12);

  --gold: #d8b86a;
  --gold-bright: #f3d99b;
  --gold-deep: #a8854a;
  --moon: #e9e4f5;
  --mist: #b3aac8;
  /* #7a7196 échouait l'AA partout (4,37 max, 3,40 sur --plum) alors qu'il porte
     la classe utilitaire .dim, le footer et les libellés. Éclairci au minimum
     pour atteindre 4,5:1 sur toutes les surfaces réelles. Audité par PALETTE_PAIRS. */
  --mist-dim: #8f86ac;

  --online: #5fd1a0;
  --busy: #e8a24a;
  --offline: #6b6385;
  --danger: #e06a7c;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px -25px rgba(0, 0, 0, 0.8);
  --shadow-gold: 0 0 40px -8px rgb(var(--gold-rgb) / 0.35);

  /* Or décomposé, pour les variantes alpha : rgb(var(--gold-rgb) / .3).
     Remplace les rgba(216,184,106,…) écrits en dur (piège documenté). */
  --gold-rgb: 216 184 106;
  --moon-rgb: 233 228 245;
  --night-rgb: 10 8 22;
  --online-rgb: 95 209 160;
  --busy-rgb: 232 162 74;
  --danger-rgb: 224 106 124;

  /* Rythme : une seule échelle d'espacement pour toutes les pages. */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem;
  --header-h: 68px;
  --mesure: 64ch;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --serif: 'Cinzel', serif;
  --script: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Les contrôles de formulaire n'héritent pas de la police par défaut. */
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--moon);
  background-color: var(--night-900);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(86, 56, 145, 0.4), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(40, 30, 90, 0.5), transparent 55%),
    radial-gradient(circle at 50% 120%, rgb(var(--gold-rgb) / 0.08), transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* ---------- Le ciel ----------------------------------------------------------
   Trois couches d'étoiles à des échelles différentes : elles se répètent sur des
   tuiles de tailles distinctes, donc elles dérivent à des vitesses différentes et
   produisent une PROFONDEUR réelle (parallaxe), là où la v1 posait six points sur
   une seule tuile plein écran — invisibles, et sans relief.
   Tout est en CSS : aucune image chargée, aucun JS, aucun coût réseau.

   `body::before` = étoiles lointaines (fines, nombreuses, dérive lente)
   `html::before` = étoiles proches (plus grosses, plus rares, dérive plus vive)
   ------------------------------------------------------------------------- */

body::before,
html::before {
  content: '';
  position: fixed;
  /* Marge d'une tuile entière : la dérive (une tuile par cycle) ne révèle
     jamais de bord. Seul le côté haut/gauche déborde ; le viewport ne
     s'élargit donc pas (pas de défilement horizontal parasite). */
  top: -760px; left: -760px; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Couche lointaine : poussière d'étoiles, dense et discrète. */
body::before {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 41% 9%,  rgba(255,255,255,.50), transparent),
    radial-gradient(1px 1px at 56% 44%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 68% 77%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 79% 26%, rgba(243,217,155,.45), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 94% 88%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 6%  81%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 34% 92%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 62% 15%, rgba(255,255,255,.42), transparent),
    radial-gradient(1px 1px at 18% 47%, rgba(255,255,255,.32), transparent);
  background-size: 340px 340px;
  animation: derive-lointaine 240s linear infinite;
}

/* Couche proche : quelques astres plus francs, dont deux dorés. */
html::before {
  background-image:
    radial-gradient(1.6px 1.6px at 22% 34%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px   2px   at 71% 21%, rgba(243,217,155,.75), transparent),
    radial-gradient(1.4px 1.4px at 47% 73%, rgba(255,255,255,.70), transparent),
    radial-gradient(1.8px 1.8px at 88% 66%, rgba(255,255,255,.65), transparent),
    radial-gradient(2.2px 2.2px at 9%  57%, rgba(243,217,155,.60), transparent),
    radial-gradient(1.4px 1.4px at 60% 91%, rgba(255,255,255,.60), transparent);
  background-size: 760px 760px;
  animation: derive-proche 150s linear infinite, scintillement 9s ease-in-out infinite alternate;
}

/* La dérive est une TRANSFORMATION d'exactement une tuile par cycle : boucle
   sans à-coup, et animée par le compositeur (aucun repeint plein écran à chaque
   image, contrairement à un background-position animé). Imperceptible à l'œil,
   c'est le but : le ciel vit sans jamais attirer l'attention. Figée par
   prefers-reduced-motion (bloc d'accessibilité en fin de feuille). */
@keyframes derive-lointaine { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(340px, 340px, 0); } }
@keyframes derive-proche    { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(760px, 760px, 0); } }
@keyframes scintillement    { from { opacity: .75; }                 to { opacity: 1; } }

body > * { position: relative; z-index: 1; }

/* ---------- Surfaces du navigateur ------------------------------------------
   Sélection, ascenseur, curseur de saisie, cases à cocher : autant de surfaces
   qu'on ne dessine pas et qui arrivaient avec les défauts du navigateur — un
   bleu système au milieu d'un ciel prune. Les habiller coûte dix lignes et se
   voit sur TOUTES les pages. */
::selection { background: rgb(var(--gold-rgb) / .32); color: var(--moon); text-shadow: none; }
:root { accent-color: var(--gold); caret-color: var(--gold-bright); color-scheme: dark; }

/* Ascenseur : un filet d'or sur la nuit, jamais la barre grise du système. */
* { scrollbar-color: var(--gold-deep) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--night-800); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-deep), #6b5330);
  border: 2px solid var(--night-800); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Typographie ---------- */
/* Deux voix de titre, pas trois :
   - Cinzel (capitales gravées) pour les titres de PAGE et de SECTION (h1, h2) ;
   - Cormorant Garamond pour les titres d'objet (h3, h4 : carte, formule, étape),
     parce qu'une carte de 280 px titrée en capitales gravées devient un bloc
     compact et illisible. Le corps reste en Outfit. */
h1, h2, h3, h4 { text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; line-height: 1.12; }
h3, h4 { font-family: var(--script); font-weight: 600; letter-spacing: .005em; line-height: 1.2; }
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.2rem; }
/* Un titre de section n'est jamais collé à son premier paragraphe. */
h2 + p, h2 + .lead { margin-top: var(--space-3); }
a { color: var(--gold-bright); text-decoration: none; text-underline-offset: .2em; }
p a:not(.btn), li a:not(.btn) { text-decoration: underline; text-decoration-color: rgb(var(--gold-rgb) / .45); }
p a:not(.btn):hover, li a:not(.btn):hover { text-decoration-color: currentColor; }
nav li a:not(.btn), nav p a:not(.btn) { text-decoration: none; }
.muted { color: var(--mist); }
.dim { color: var(--mist-dim); }
.script { font-family: var(--script); font-style: italic; }
.lead { font-size: 1.15rem; color: var(--mist); max-width: var(--mesure); }
/* Sur-titre : rare (un toutes les trois sections au plus). Il nomme la
   section en clair, il ne numérote pas. */
.eyebrow {
  font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-3);
}
.chiffres { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.section { padding: var(--space-8) 0; }
/* Tête de section : titre puis texte, empilés, bornés en mesure. */
.section-tete { max-width: 46rem; margin-bottom: var(--space-6); }
.section-tete.center { margin-inline: auto; }
.section-tete .lead { margin-inline: inherit; }
.section-tete.center .lead { margin-inline: auto; }
.grid { display: grid; gap: 1.5rem; }
/* Grilles auto-responsives : colonnes fluides sans media query, pour remplacer les
   `grid-template-columns:repeat(...)` répétés en inline. Largeur mini via --col-min.
   .grid-auto = auto-fit (étire la dernière ligne) · .grid-fill = auto-fill (garde la largeur de carte). */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 260px), 1fr)); }
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(var(--col-min, 260px), 1fr)); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: 1rem; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wrap { flex-wrap: wrap; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(10,8,22,.92), rgba(10,8,22,.55));
  border-bottom: 1px solid var(--veil);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--moon); letter-spacing: .14em; white-space: nowrap; }
.brand .mark { width: 1.05em; height: 1.05em; color: var(--gold); }
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a:not(.btn) { color: var(--mist); font-size: .94rem; transition: color .2s; white-space: nowrap; }
.nav a:not(.btn):hover { color: var(--moon); }
/* « Devenir voyant » : même taille que le reste, séparé par un filet — l'espace
   pro est un second public à parité, pas une note de bas de menu. */
.nav .nav-pro { padding-left: 1.5rem; border-left: 1px solid var(--veil-strong); }
/* Les boutons dans la nav gardent leur couleur de texte propre (sinon .nav a écrase .btn-gold -> texte clair sur or). */
.nav a.btn-gold, .nav a.btn-gold:hover { color: var(--night-900); }
.nav a.btn-ghost { color: var(--moon); }

/* Bouton de menu : n'apparaît que sous 900 px (voir plus bas). */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; border-radius: 999px; color: var(--moon); cursor: pointer;
}
.nav-toggle svg.ico { width: 24px; height: 24px; }
.nav-toggle .ico-fermer { display: none; }
.site-header.menu-ouvert .nav-toggle .ico-ouvrir { display: none; }
.site-header.menu-ouvert .nav-toggle .ico-fermer { display: inline; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-header .nav {
    position: absolute; inset: var(--header-h) 0 auto; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-3) 1.25rem var(--space-5);
    background: var(--night-800); border-bottom: 1px solid var(--veil-strong);
    box-shadow: 0 30px 40px -20px rgb(var(--night-rgb) / .9);
    display: none;
  }
  .site-header.menu-ouvert .nav { display: flex; }
  .site-header .nav a:not(.btn) { padding: .85rem .25rem; font-size: 1.05rem; border-bottom: 1px solid var(--veil); }
  .site-header .nav .nav-pro { padding-left: .25rem; border-left: 0; }
  .site-header .nav .btn { margin-top: var(--space-4); padding: .85rem 1.5rem; font-size: 1rem; }
}

/* ---------- Boutons ----------------------------------------------------------
   Forme verrouillée : TOUT élément cliquable autonome est une pilule (boutons,
   filtres, créneaux, étiquettes). Les cartes sont à 16 px, les champs à 10 px.
   Pas de halo : l'or se suffit, la lueur diffuse était un effet de vitrine. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 500; font-size: .95rem; line-height: 1.2;
  padding: .8rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--night-900); font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 24px -14px rgb(var(--gold-rgb) / .9);
}
.btn-gold:hover { background: linear-gradient(180deg, #f8e6b8, var(--gold-bright)); }
.btn-ghost { background: var(--veil); color: var(--moon); border-color: var(--veil-strong); }
.btn-ghost:hover { background: var(--veil-strong); border-color: rgb(var(--gold-rgb) / .45); }
/* Action tertiaire : un lien suivi d'une flèche, sans cadre. */
.btn-lien { padding-inline: .2rem; background: none; color: var(--gold-bright); }
.btn-lien svg.ico { transition: transform .2s var(--ease); }
.btn-lien:hover svg.ico { transform: translateX(3px); }
.btn-danger { background: linear-gradient(135deg, #e06a7c, #b23b53); color: #fff; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Cartes ----------------------------------------------------------
   Le fond composite est INCHANGÉ (rgba(34,25,67,.75) sur --night-900 = #1c1538) :
   c'est la valeur auditée par PALETTE_PAIRS (src/conformite.js) comme pire cas
   de contraste. Tout ce qui est ajouté ici est une lumière de BORD — jamais un
   voile qui éclaircirait le fond du texte.

   Ce qui change : une carte n'est plus une boîte translucide posée à plat, elle
   est ÉCLAIRÉE PAR LE HAUT, comme un objet sous un ciel. Le liseré supérieur
   capte la lumière, la lueur intérieure s'éteint vers le bas. */
.card {
  position: relative;
  background: linear-gradient(160deg, rgba(34,25,67,.75), rgba(17,13,36,.85));
  border: 1px solid var(--veil); border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow), inset 0 1px 0 rgb(var(--moon-rgb) / .07);
  /* Plus de backdrop-filter : flouter un ciel déjà sombre ne changeait rien à
     l'œil mais coûtait une couche composite par carte (des dizaines par tableau
     de bord). Le fond composité audité (#1c1538) est inchangé. */
}
/* Filet de lumière sur l'arête haute : il s'estompe vers les angles, donc il se
   lit comme un reflet et non comme une bordure décorative. */
.card::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgb(var(--gold-rgb) / .3) 25%, rgb(var(--gold-rgb) / .3) 75%, transparent);
  pointer-events: none;
}
.card-hover { transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--gold-rgb) / .35);
  box-shadow: var(--shadow), inset 0 1px 0 rgb(var(--moon-rgb) / .12);
}
/* Carte entièrement cliquable : le texte garde sa couleur, pas celle du lien. */
a.card { display: block; color: inherit; }

/* ---------- Badges / statut ---------- */
.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--veil-strong); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* Le pouls ne marque QUE la présence en direct : c'est un état, pas un décor. */
.dot.online { background: var(--online); animation: pulse 2.4s infinite; }
.dot.busy { background: var(--busy); }
.dot.offline { background: var(--offline); }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 rgb(var(--online-rgb) / .5);} 50%{ box-shadow: 0 0 0 6px rgb(var(--online-rgb) / 0);} }
.status-online { color: var(--online); }
.status-busy { color: var(--busy); }
.status-offline { color: var(--offline); }

.tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; line-height: 1.3; padding: .22rem .65rem; border-radius: 999px; background: rgb(var(--gold-rgb) / .1); color: var(--gold-bright); border: 1px solid rgb(var(--gold-rgb) / .24); }
/* Minutes offertes : l'unique étiquette en aplat d'or (texte sombre, paire auditée). */
.tag-offert { background: var(--gold); color: var(--night-900); border-color: var(--gold); font-weight: 600; }
.tag-nouveau { background: transparent; border-style: dashed; }

/* ---------- Carte voyant (annuaire, accueil, re-matching) ---------- */
.carte-pro { display: flex; flex-direction: column; gap: var(--space-3); }
.carte-pro-tete { display: flex; gap: var(--space-4); align-items: center; }
.carte-pro-id { flex: 1; min-width: 0; }
.carte-pro-nom { font-size: 1.5rem; line-height: 1.15; }
.carte-pro-nom a { color: var(--moon); }
/* Toute la carte est la cible du lien (le bouton reste la cible clavier). */
.carte-pro-nom a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.carte-pro-nom a:focus-visible { outline: none; }
.carte-pro:has(.carte-pro-nom a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.carte-pro-accroche { color: var(--mist); font-size: .9rem; margin-top: .15rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.carte-pro-etat { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .4rem; font-size: .84rem; }
.presence { display: inline-flex; align-items: center; gap: .4rem; }
.presence-online { color: var(--online); }
.presence-busy { color: var(--busy); }
.presence-offline { color: var(--mist-dim); }
.carte-pro-note { display: inline-flex; align-items: center; gap: .25rem; }
.carte-pro-note svg.ico { color: var(--gold); width: 1em; height: 1em; }
.carte-pro-badges:empty { display: none; }
.carte-pro-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.carte-pro-tags:empty { display: none; }
.carte-pro-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.carte-pro-meta { font-size: .82rem; color: var(--mist-dim); display: flex; align-items: center; gap: .4rem; }
.carte-pro-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--veil); }
.carte-pro-tarif { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; }
.carte-pro-prix strong { font-family: var(--script); font-size: 1.5rem; font-weight: 600; color: var(--gold-bright); }
.carte-pro-pied .btn { position: relative; z-index: 1; }

/* Bandeau d'incitation sous l'en-tête (pro en onboarding). */
.site-header .onboarding-banner { display: block; border: 0; border-top: 1px solid rgb(var(--gold-rgb) / .25); border-radius: 0; padding: .55rem 1rem; text-align: center; font-size: .9rem; background: rgb(var(--gold-rgb) / .1); }

/* ---------- Formulaires ---------- */
label { display: block; font-size: .85rem; color: var(--mist); margin-bottom: .4rem; }
input, textarea, select {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--moon);
  background: rgba(10,8,22,.6); border: 1px solid var(--veil-strong);
  border-radius: var(--radius-sm); padding: .8rem 1rem; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .15); }
/* Accessibilité : focus clavier visible partout (remplace tout outline:none) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
textarea { resize: vertical; min-height: 90px; }
::placeholder { color: var(--mist-dim); opacity: 1; }
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) { border-color: rgb(var(--moon-rgb) / .22); }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; }
.field { margin-bottom: 1.1rem; }
/* Aide et erreur SOUS le champ (jamais le placeholder comme étiquette). */
.field-aide { display: block; margin-top: .35rem; font-size: .82rem; color: var(--mist-dim); }
.field-erreur { display: block; margin-top: .35rem; font-size: .85rem; color: var(--danger); }
[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- Avatar ---------- */
.avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.8rem; background: radial-gradient(circle at 30% 30%, var(--plum), var(--night-700));
  border: 1px solid rgb(var(--gold-rgb) / .35); flex-shrink: 0;
}
.avatar.lg { width: 84px; height: 84px; font-size: 2.3rem; }
img.avatar { object-fit: cover; }
.avatar-monogramme { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: .06em; color: var(--gold-bright); }
.avatar.lg.avatar-monogramme { font-size: 1.8rem; }

/* ---------- Hero ---------- */
.hero { padding: 6rem 0 4rem; text-align: center; }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 .glow { color: var(--gold-bright); }
.hero p.lead { font-size: 1.15rem; color: var(--mist); max-width: 40rem; margin: 0 auto 2rem; }

/* ---------- Carte du ciel (héros de l'accueil) ----------------------------
   Remplace l'orbe en dégradé plat : une couronne graduée, un écliptique, une
   constellation et la Lune en croissant. La couronne tourne — TRÈS lentement
   (deux minutes le tour) : c'est le seul mouvement autorisé, et il doit se
   remarquer seulement si on s'arrête pour le regarder. */
.carte-ciel {
  width: min(420px, 78vw);
  margin: 0 auto 1.6rem;
}
.carte-ciel svg { display: block; width: 100%; height: auto; overflow: visible; }
.carte-ciel .couronne { transform-origin: 200px 200px; animation: rotation-ciel 120s linear infinite; }
.carte-ciel .lune { transform-origin: 200px 200px; animation: respiration-lune 9s ease-in-out infinite; }
.carte-ciel .constellation { animation: eclat-constellation 7s ease-in-out infinite alternate; }

@keyframes rotation-ciel { to { transform: rotate(360deg); } }
@keyframes respiration-lune { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes eclat-constellation { from { opacity: .75; } to { opacity: 1; } }

/* ---------- Lot 09 (#14) : agenda de réservation (fiche voyant SSR) ---------- */
.slots-day { margin-bottom: 1.1rem; }
.slots-day h3 { font-family: var(--serif); font-size: 1rem; margin: 0 0 .5rem; text-transform: capitalize; }
.slot-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-chip { padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--veil-strong);
  background: var(--veil); color: var(--moon); font-size: .9rem; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.slot-chip:hover, .slot-chip:focus-visible { border-color: var(--gold); color: var(--gold-bright); background: rgb(var(--gold-rgb) / .1); }
.rdv-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem;
  background: rgba(10,8,22,.94); backdrop-filter: blur(6px); }
.rdv-modal .card { max-width: 460px; width: 100%; }
.rdv-offer { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .2rem; cursor: pointer; }

/* ---------- Utilitaires ---------- */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--veil-strong), transparent); margin: 2rem 0; }
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: var(--night-600); border: 1px solid var(--veil-strong); padding: .8rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); animation: slideUp .3s ease; }
.toast.err { border-color: var(--danger); }
.toast.ok { border-color: var(--online); }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: fadeIn .6s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; } .delay-3 { animation-delay: .3s; }

.price { font-family: var(--serif); color: var(--gold-bright); }
.hidden { display: none !important; }
footer.site-footer { border-top: 1px solid var(--veil); padding: var(--space-7) 0 var(--space-6); margin-top: var(--space-7); color: var(--mist-dim); font-size: .9rem; background: rgb(var(--night-rgb) / .55); }
.pied-grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); }
.pied-grille nav { display: flex; flex-direction: column; gap: .45rem; }
.pied-titre { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: .35rem; }
.site-footer a { color: var(--mist); font-size: .9rem; }
.site-footer a:hover { color: var(--gold-bright); }
.pied-marque p.dim { margin-top: var(--space-3); max-width: 24ch; }
.pied-mentions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: .82rem; }
@media (max-width: 760px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}

/* ============================================================
   REFONTE 2026 — Nouvelles classes (spec §9)
   Mêmes variables / rayons / ombres que le design system.
   ============================================================ */

/* ---------- Confiance (trust) ---------- */
/* Bandeau de réassurance : pictos + libellés courts, en ligne, qui passe à la ligne sur mobile */
.trust-row {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: center;
  color: var(--mist); font-size: .9rem;
}
.trust-row > * { display: inline-flex; align-items: center; gap: .5rem; }
.trust-row .ico { color: var(--gold); }

/* ---------- Icônes dessinées ------------------------------------------------
   Une seule graisse de trait, une seule grammaire, `currentColor` : elles
   prennent la couleur de leur contexte et se dimensionnent en `em`, donc elles
   suivent la typographie au lieu de flotter à côté. Remplacent les emoji, dont
   le dessin change d'un système d'exploitation à l'autre. */
svg.ico {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: currentColor;
  vertical-align: -.2em;
}
svg.ico-lg { width: 2rem; height: 2rem; }
/* Pastille d'icône : un objet posé, pour les en-têtes de carte. */
.ico-pastille {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px;
  color: var(--gold-bright); background: rgb(var(--gold-rgb) / .1); border: 1px solid rgb(var(--gold-rgb) / .28);
}
.ico-pastille svg.ico { width: 1.45rem; height: 1.45rem; }
/* Signes du zodiaque : glyphes TEXTE (U+FE0E), jamais la variante emoji. */
.signe { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif; font-variant-emoji: text; }

/* Chiffres clés de réassurance (fiche voyant / landing) */
.trust-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; text-align: center; }
.trust-stats .stat { padding: .6rem; }
.trust-stats .stat b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--gold-bright); line-height: 1.1; }
.trust-stats .stat span { font-size: .78rem; color: var(--mist-dim); letter-spacing: .04em; }

/* ---------- Numéro d'étape (cercle gravé) ---------- */

/* ---------- Simulateur de revenus (landing pro) ---------- */
.simulator { display: flex; flex-direction: column; gap: 1.2rem; }
.simulator .sim-out { font-family: var(--serif); font-size: 2rem; color: var(--gold-bright); }
/* Barre horizontale empilée : part voyant (or) + part plateforme (voile) */
.sim-bar {
  position: relative; width: 100%; height: 22px; border-radius: 999px;
  background: var(--veil); overflow: hidden; border: 1px solid var(--veil-strong);
}
.sim-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  /* Largeur posée par le JS du simulateur : pas de transition sur `width`
     (propriété de mise en page, recalcul à chaque image). */
}

/* input range stylisé (track --veil, thumb --gold), focus visible */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; padding: 0;
  background: var(--veil); border: 1px solid var(--veil-strong); border-radius: 999px; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep));
  border: 1px solid var(--gold-deep); box-shadow: var(--shadow-gold); cursor: pointer; margin-top: -1px;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep));
  border: 1px solid var(--gold-deep); box-shadow: var(--shadow-gold); cursor: pointer;
}
input[type=range]::-moz-range-track { height: 6px; background: var(--veil); border-radius: 999px; }
input[type=range]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .3); }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gold); outline-offset: 2px; }
input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Comparatif & paliers de commission ---------- */
.compare-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--veil); }
.compare-row:last-child { border-bottom: none; }
.compare-row .us { color: var(--gold-bright); font-weight: 600; }
.compare-row .them { color: var(--mist-dim); }

/* Barre de palier (40/30/20) : libellé + barre proportionnelle */
.tier-bar { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: .8rem; margin: .5rem 0; }
.tier-bar .bar { height: 12px; border-radius: 999px; background: var(--veil); overflow: hidden; }
.tier-bar .bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); }
.tier-bar .pct { font-family: var(--serif); color: var(--gold-bright); font-size: .9rem; }

/* ---------- Badges spéciaux ---------- */
.founder-badge {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .25rem .7rem; border-radius: 999px;
  font-weight: 600; color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(243,217,155,.18), rgba(168,133,74,.12));
  border: 1px solid rgb(var(--gold-rgb) / .5);
}
/* Marques dessinées en CSS (losange, coche) : aucun glyphe dont le rendu
   dépendrait de la police ou du système. */
.founder-badge::before { content: ''; width: .42rem; height: .42rem; background: currentColor; transform: rotate(45deg); }
.verified-badge {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .25rem .7rem; border-radius: 999px;
  color: var(--online); background: rgb(var(--online-rgb) / .12); border: 1px solid rgb(var(--online-rgb) / .4);
}
.verified-badge::before { content: ''; width: .28rem; height: .55rem; margin: -.15rem .05rem 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Stepper d'onboarding (3 points) ---------- */
.stepper { display: flex; align-items: flex-start; gap: 0; counter-reset: step; }
.step {
  flex: 1; position: relative; text-align: center; color: var(--mist-dim);
  font-size: .82rem; padding-top: 46px;
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); color: var(--mist-dim);
  background: var(--night-700); border: 1px solid var(--veil-strong); z-index: 1;
}
/* trait reliant les étapes */
.step::after {
  content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px;
  background: var(--veil-strong); z-index: 0;
}
.step:first-child::after { display: none; }
.step.done, .step.active { color: var(--moon); }
.step.active::before { color: var(--night-900); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold); }
.step.done::before { color: var(--online); border-color: rgb(var(--online-rgb) / .5); background: rgb(var(--online-rgb) / .12); }
.step.done::after, .step.active::after { background: var(--gold-deep); }

/* ---------- Pastilles d'état (machine à états §3) ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 500;
  padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--veil-strong); color: var(--mist);
}
.status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.verifie  { color: var(--online); background: rgb(var(--online-rgb) / .1); border-color: rgb(var(--online-rgb) / .35); }
.status-pill.en-revue { color: #7fb0e8; background: rgba(127,176,232,.1); border-color: rgba(127,176,232,.35); }
.status-pill.a-verifier { color: var(--busy); background: rgb(var(--busy-rgb) / .1); border-color: rgb(var(--busy-rgb) / .35); }
.status-pill.rejete   { color: var(--danger); background: rgb(var(--danger-rgb) / .1); border-color: rgb(var(--danger-rgb) / .35); }

/* ---------- Charte de déontologie / consentements ---------- */
.deontology {
  background: linear-gradient(160deg, rgba(34,25,67,.6), rgba(17,13,36,.7));
  /* Accent : une bordure dorée complète à basse opacité, jamais une barre
     latérale épaisse ni une lueur. */
  border: 1px solid rgb(var(--gold-rgb) / .28); border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem; color: var(--mist); font-size: .9rem;
}
.deontology ul { margin: .5rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
/* Case à cocher de consentement : ligne label cliquable */
.consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--mist); cursor: pointer; padding: .3rem 0; }
.consent input[type=checkbox] { width: auto; margin-top: .15rem; flex-shrink: 0; accent-color: var(--gold); cursor: pointer; }
.consent-rgpd { font-size: .8rem; color: var(--mist-dim); border-top: 1px solid var(--veil); margin-top: .8rem; padding-top: .8rem; }

/* ---------- Filtres annuaire ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.filters .field { margin-bottom: 0; }
.chip-filter {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none;
  font-size: .85rem; padding: .45rem .9rem; border-radius: 999px;
  background: var(--veil); color: var(--mist); border: 1px solid var(--veil-strong);
  transition: background .2s, color .2s, border-color .2s;
}
.chip-filter:hover { color: var(--moon); border-color: rgb(var(--gold-rgb) / .4); }
.chip-filter.active { background: rgb(var(--gold-rgb) / .16); color: var(--gold-bright); border-color: rgb(var(--gold-rgb) / .5); }

/* ---------- Navigation de dashboard ---------- */
.dash-nav { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--veil); margin-bottom: 1.5rem; }
.dash-nav a, .dash-nav button {
  background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: .92rem;
  color: var(--mist); padding: .7rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.dash-nav a:hover, .dash-nav button:hover { color: var(--moon); }
.dash-nav a.active, .dash-nav button.active { color: var(--gold-bright); border-bottom-color: var(--gold); }

/* ---------- Wallet / portefeuille ---------- */
.wallet-hero {
  background: linear-gradient(135deg, rgba(42,27,77,.85), rgba(17,13,36,.9));
  border: 1px solid rgb(var(--gold-rgb) / .25); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow); text-align: center;
}
.wallet-hero .balance { font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--gold-bright); line-height: 1.1; }
.wallet-hero .label { color: var(--mist); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; font-family: var(--serif); }

/* Jauge de budget hebdo */
.budget-gauge { width: 100%; height: 14px; border-radius: 999px; background: var(--veil); border: 1px solid var(--veil-strong); overflow: hidden; }
.budget-gauge > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(135deg, var(--online), #3fae85); }
.budget-gauge.warn > span { background: linear-gradient(135deg, var(--busy), #c47e2e); }
.budget-gauge.over > span { background: linear-gradient(135deg, var(--danger), #b23b53); }

/* Ligne de ledger (mouvement de compte) */
.ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--veil); font-size: .92rem; }
.ledger-row:last-child { border-bottom: none; }
.ledger-row .lbl { color: var(--mist); }
.ledger-row .amt { font-family: var(--serif); }
.ledger-row .amt.plus { color: var(--online); }
.ledger-row .amt.minus { color: var(--danger); }
.ledger-row time { color: var(--mist-dim); font-size: .8rem; }

/* Relevé mensuel (dashboard pro) */
.statement-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--veil); }
.statement-row:last-child { border-bottom: none; }
.statement-row .net { font-family: var(--serif); color: var(--gold-bright); }

/* Bandeau d'onboarding (dashboard pro non finalisé) */
.onboarding-banner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgb(var(--gold-rgb) / .14), rgba(42,27,77,.6));
  border: 1px solid rgb(var(--gold-rgb) / .4); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; color: var(--moon);
}
.onboarding-banner .grow { flex: 1; min-width: 200px; }
.onboarding-banner.muted { background: linear-gradient(135deg, rgba(127,176,232,.1), rgba(42,27,77,.6)); border-color: rgba(127,176,232,.35); }

/* ---------- Scène d'appel (call.html) ---------- */
.call-stage {
  position: relative; width: 100%; min-height: 60vh; border-radius: var(--radius);
  background: radial-gradient(circle at 50% 40%, var(--plum), var(--night-900) 70%);
  border: 1px solid var(--veil); overflow: hidden; display: grid; place-items: center;
}
/* HUD temps/coût superposé */
.hud {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: flex; gap: 1.2rem; align-items: center;
  background: rgba(10,8,22,.7); backdrop-filter: blur(10px);
  border: 1px solid var(--veil-strong); border-radius: 999px; padding: .6rem 1.2rem;
}
.hud .timer { font-family: var(--serif); font-size: 1.3rem; color: var(--moon); }
.hud .cost { font-family: var(--serif); color: var(--gold-bright); }
.hud .lbl { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--mist-dim); display: block; }
/* Contrôles d'appel (boutons ronds) */
.call-controls {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 1rem; align-items: center;
}
.call-controls .ctrl {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font-size: 1.3rem; color: var(--moon); background: var(--veil); border: 1px solid var(--veil-strong);
  transition: background .2s, transform .15s;
}
.call-controls .ctrl:hover { background: var(--veil-strong); }
.call-controls .ctrl:active { transform: scale(.94); }
.call-controls .ctrl.off { background: rgb(var(--danger-rgb) / .2); border-color: var(--danger); color: var(--danger); }
.call-controls .ctrl.hangup { background: linear-gradient(135deg, #e06a7c, #b23b53); border-color: transparent; color: #fff; width: 64px; height: 64px; }
/* Bandeau minutes offertes */
.free-min-banner {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  background: rgb(var(--online-rgb) / .12); border: 1px solid rgb(var(--online-rgb) / .4); color: var(--online);
  border-radius: 999px; padding: .45rem 1.1rem; font-size: .9rem; font-weight: 500;
}
a.free-min-banner:hover { background: rgb(var(--online-rgb) / .2); }

/* ---------- Grille zodiaque (horoscope) ---------- */
.zodiac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.zodiac-grid .sign {
  text-align: center; padding: 1.3rem .8rem; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(34,25,67,.7), rgba(17,13,36,.8));
  border: 1px solid var(--veil); transition: transform .25s, border-color .25s;
}
.zodiac-grid .sign:hover { transform: translateY(-4px); border-color: rgb(var(--gold-rgb) / .45); }
.zodiac-grid .sign .glyph { font-size: 2rem; color: var(--gold-bright); }
.zodiac-grid .sign .name { font-family: var(--serif); font-size: 1rem; margin-top: .4rem; }
.zodiac-grid .sign .dates { font-size: .74rem; color: var(--mist-dim); }

/* ---------- Carte de tarot (tirage) ---------- */
.tarot-card {
  aspect-ratio: 2 / 3; border-radius: var(--radius-sm); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--plum), var(--night-800));
  border: 1px solid rgb(var(--gold-rgb) / .4); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem; text-align: center; transition: transform .3s, box-shadow .3s;
}
.tarot-card:hover { transform: translateY(-6px) rotate(-1deg); border-color: rgb(var(--gold-rgb) / .45); }
.tarot-card .glyph { font-size: 2.6rem; color: var(--gold-bright); }
.tarot-card .title { font-family: var(--serif); font-size: 1rem; letter-spacing: .05em; }
.tarot-card.back { background-image: radial-gradient(circle at 50% 50%, rgb(var(--gold-rgb) / .12), transparent 60%); }

/* ---------- Messagerie ---------- */
/* Indicateur de frappe (3 points animés) */
.typing-dots { display: inline-flex; gap: .25rem; align-items: center; padding: .4rem 0; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--mist); animation: typing 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
/* Message payant (bulle avec sceau or) */
.paid-msg {
  position: relative; border: 1px solid rgb(var(--gold-rgb) / .4); border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(42,27,77,.6), rgba(17,13,36,.75)); padding: .9rem 1.1rem;
}
.paid-msg .seal { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--gold-bright); margin-bottom: .4rem; }
.paid-msg.locked { filter: none; }
.paid-msg.locked .body { filter: blur(5px); user-select: none; pointer-events: none; }
/* Lot 03 (#32) : lecteur vidéo d'une lecture livrée (carte .paid-msg) */
.paid-msg video { display: block; max-width: 100%; width: 320px; border-radius: 10px; margin-top: .5rem; }

/* Lot 03 (#10) : pastille or « messages non lus » sur le lien Messages du header */
.badge-unread {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: .25rem;
  border-radius: 999px; vertical-align: middle;
  font-size: .66rem; font-weight: 600; font-family: var(--sans); line-height: 1;
  color: #1a1330; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
}

/* ---------- Pages légales ---------- */

/* ============================================================
   LOT 01 — Notifications : cloche header, panneau, préférences, push
   Mêmes variables / rayons / ombres que le design system.
   ============================================================ */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--mist); transition: background .2s, color .2s;
}
.notif-bell:hover { background: var(--veil); color: var(--gold-bright); }
/* Badge rond du nombre de non-lues (masqué si 0, « 9+ » au-delà de 9) */
.badge-notif {
  position: absolute; top: 0; right: -2px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: .66rem; font-weight: 600; font-family: var(--sans); color: #1a1330;
  background: var(--gold-bright);
}
/* Panneau déroulant de la cloche */
.notif-panel {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 120;
  width: min(360px, 92vw); max-height: 70vh; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(34,25,67,.97), rgba(17,13,36,.99));
  border: 1px solid var(--veil-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; text-align: left;
  animation: fadeIn .2s ease both;
}
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--veil); }
.notif-head strong { font-family: var(--serif); letter-spacing: .04em; }
.notif-head .markall { background: none; border: none; cursor: pointer; color: var(--gold-bright); font-size: .8rem; font-family: var(--sans); padding: .2rem 0; }
.notif-head .markall:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }
.notif-item {
  display: flex; gap: .7rem; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--veil);
  padding: .8rem 1.1rem; color: var(--moon); font-family: var(--sans); font-size: .88rem;
  transition: background .15s;
}
.notif-item:hover { background: var(--veil); }
/* Pastille non-lu */
.notif-item .pastille { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: .45rem; background: transparent; }
.notif-item.unread .pastille { background: var(--gold-bright); }
.notif-item .t { font-weight: 600; }
.notif-item.unread .t { color: var(--gold-bright); }
.notif-item .b { display: block; color: var(--mist); font-size: .82rem; margin-top: .1rem; }
.notif-item time { display: block; color: var(--mist-dim); font-size: .74rem; margin-top: .2rem; }
.notif-empty { padding: 1.6rem 1.1rem; color: var(--mist); text-align: center; font-size: .9rem; }
.notif-more { display: block; width: 100%; background: none; border: none; cursor: pointer; color: var(--gold-bright); font-family: var(--sans); font-size: .82rem; padding: .7rem; }
.notif-more:hover { background: var(--veil); }
.notif-foot { padding: .7rem 1.1rem; border-top: 1px solid var(--veil); text-align: center; }
.notif-foot a { font-size: .84rem; }

/* Tableau « Préférences par canal » (dashboards) */
.prefs-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prefs-table th, .prefs-table td { padding: .7rem .5rem; border-bottom: 1px solid var(--veil); text-align: left; }
.prefs-table tr:last-child td { border-bottom: none; }
.prefs-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mist-dim); font-weight: 600; }
.prefs-table th.c, .prefs-table td.c { text-align: center; width: 90px; }
.prefs-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }

/* Bandeau d'opt-in push (toast persistant en bas, non bloquant) */
.push-banner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 190;
  width: min(560px, 94vw); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: flex-end;
  background: var(--night-600); border: 1px solid rgb(var(--gold-rgb) / .4);
  border-radius: var(--radius); padding: 1rem 1.2rem;
  box-shadow: var(--shadow); animation: slideUp .3s ease;
}
.push-banner p { flex: 1 1 100%; margin: 0; font-size: .9rem; color: var(--moon); }

@media (max-width: 760px) {
  .section { padding: var(--space-7) 0; }
  .stepper { font-size: .72rem; }
  .step { padding-top: 42px; }
  .tier-bar { grid-template-columns: 70px 1fr auto; gap: .5rem; }
  .statement-row { grid-template-columns: 1fr auto; }
  .hud { top: .6rem; right: .6rem; gap: .8rem; padding: .5rem .9rem; }
  .hud .timer { font-size: 1.1rem; }
  .call-controls { gap: .7rem; }
  .call-controls .ctrl { width: 48px; height: 48px; font-size: 1.1rem; }
  .call-controls .ctrl.hangup { width: 56px; height: 56px; }
  /* Onglets scrollables : barre de défilement visible (fine, dorée) pour signaler
     qu'il reste des onglets hors écran. */
  .dash-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; -webkit-overflow-scrolling: touch; }
  .dash-nav::-webkit-scrollbar { height: 3px; }
  .dash-nav::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
  .trust-row { gap: 1rem; font-size: .82rem; }
}

/* Lot B (#56) : bannière de maintenance (SSR + status-banner.js). */
.maintenance-banner {
  background: #b8860b;
  color: #fff;
  text-align: center;
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 600;
}
/* Lot B (#56) : pastilles d'état sur /statut.
   Deux corrections d'un coup :
   1. la barre latérale épaisse disparaît (tell d'interface générée) ;
   2. l'état ne repose plus sur la COULEUR SEULE — chaque état porte une FORME
      distincte (disque / losange / triangle), lisible en daltonisme comme en
      impression noir et blanc. Exigence WCAG 1.4.1, pas une coquetterie. */
.status-ok, .status-maintenance, .status-incident {
  position: relative;
  border: 1px solid var(--veil);
  border-radius: var(--radius-sm);
  padding-left: 2.5rem;
}
.status-ok::before, .status-maintenance::before, .status-incident::before {
  content: ''; position: absolute; left: 1rem; top: 1.15em;
  width: .62rem; height: .62rem;
}
.status-ok { border-color: rgb(var(--online-rgb) / .45); }
.status-ok::before { background: var(--online); border-radius: 999px; }
.status-maintenance { border-color: rgb(var(--busy-rgb) / .45); }
.status-maintenance::before { background: var(--busy); transform: rotate(45deg); }
.status-incident { border-color: rgb(var(--danger-rgb) / .5); }
.status-incident::before { background: var(--danger); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ============================================================
   REFONTE 2026-09 — Blocs de composition partagés
   Chaque famille de mise en page n'apparaît qu'une fois par page :
   héros scindé, bande de garanties, grille, parcours, panneau, tuiles.
   ============================================================ */

/* Héros scindé : promesse à gauche, visuel à droite. Tient dans le premier
   écran (titre sur deux lignes, sous-titre de 20 mots, deux actions). */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: var(--space-6);
  min-height: min(640px, calc(100dvh - var(--header-h)));
  padding: var(--space-7) 0 var(--space-6);
}
.hero-split h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin-bottom: var(--space-4); }
.hero-split h1 .glow { color: var(--gold-bright); }
.hero-split .lead { font-size: 1.2rem; margin-bottom: var(--space-6); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-split .carte-ciel { width: 100%; max-width: 440px; margin: 0 0 0 auto; }
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; padding-top: var(--space-5); gap: var(--space-4); }
  .hero-split .carte-ciel { order: -1; max-width: 220px; margin: 0 auto; }
  .hero-split .hero-texte { text-align: center; }
  .hero-split .lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
}
@media (max-width: 420px) {
  .hero-actions .btn { flex: 1 1 100%; }
}

/* Carte du ciel : traits portés par des classes (le jeton or reste la source). */
.carte-ciel .trait-or, .carte-ciel .trait-lune { fill: none; stroke-width: 1; }
.carte-ciel .trait-or { stroke: var(--gold); }
.carte-ciel .trait-lune { stroke: var(--moon); }
.carte-ciel .t10 { stroke-opacity: .10; } .carte-ciel .t18 { stroke-opacity: .18; }
.carte-ciel .t20 { stroke-opacity: .20; } .carte-ciel .t25 { stroke-opacity: .25; }
.carte-ciel .t30 { stroke-opacity: .30; } .carte-ciel .t55 { stroke-opacity: .55; }
.carte-ciel .astre-lune { fill: var(--moon); }
.carte-ciel .astre-or { fill: var(--gold-bright); }

/* Bande de garanties : une rangée, sous le héros, entre deux filets. */
.bande-garanties { border-block: 1px solid var(--veil); background: rgb(var(--night-rgb) / .45); }
.bande-garanties ul {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5); padding: var(--space-5) 0;
}
.bande-garanties li { display: flex; align-items: center; gap: var(--space-3); font-size: .9rem; color: var(--mist); line-height: 1.4; }
.bande-garanties strong { color: var(--moon); font-weight: 600; }
.bande-garanties .ico-pastille { flex: none; width: 2.6rem; height: 2.6rem; }
@media (max-width: 960px) { .bande-garanties ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bande-garanties ul { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Tête de section en ligne : titre à gauche, lien d'action aligné en bas. */
.tete-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }

/* État vide / chargement / erreur : composé, jamais une ligne grise isolée. */
.etat-vide {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-7) var(--space-5); text-align: center;
  border: 1px dashed var(--veil-strong); border-radius: var(--radius);
}
.etat-vide p { max-width: 42ch; }

/* Parcours en étapes : une ligne d'horizon relie les jalons. */
.parcours { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); position: relative; counter-reset: none; }
.parcours::before {
  content: ''; position: absolute; top: 1.4rem; left: 1.4rem; right: 16%;
  height: 1px; background: linear-gradient(90deg, rgb(var(--gold-rgb) / .6), rgb(var(--gold-rgb) / .08));
}
.parcours li { position: relative; }
.parcours-num {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: var(--space-4);
  border-radius: 999px; background: var(--night-800); border: 1px solid rgb(var(--gold-rgb) / .55);
  font-family: var(--serif); font-weight: 600; color: var(--gold-bright); position: relative;
}
.parcours h3 { margin-bottom: var(--space-2); }
.parcours p { max-width: 32ch; }
@media (max-width: 760px) {
  .parcours { grid-template-columns: 1fr; gap: var(--space-5); padding-left: 0; }
  .parcours::before { top: 1.4rem; bottom: 1.4rem; left: 1.4rem; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgb(var(--gold-rgb) / .6), rgb(var(--gold-rgb) / .08)); }
  .parcours > li { padding-left: 4rem; }
  .parcours > li > .parcours-num { position: absolute; left: 0; top: -.4rem; margin: 0; }
}

/* Panneau d'offre : texte à gauche, engagements à droite, un seul cadre. */
.panneau-offre {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-7);
  padding: var(--space-7); border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(600px 300px at 0% 0%, rgb(var(--gold-rgb) / .12), transparent 70%),
    linear-gradient(160deg, var(--plum), var(--night-800));
  border: 1px solid rgb(var(--gold-rgb) / .22);
}
.panneau-offre h2 { margin: var(--space-4) 0 var(--space-3); }
.panneau-offre .lead { margin-bottom: var(--space-5); }
.panneau-offre-engagements { padding-left: var(--space-7); border-left: 1px solid var(--veil-strong); align-self: center; }
.panneau-offre-engagements h3 { margin-bottom: var(--space-4); }
.liste-coches { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.liste-coches li { display: flex; gap: var(--space-3); align-items: baseline; }
.liste-coches svg.ico { color: var(--online); flex: none; transform: translateY(.15em); }
@media (max-width: 860px) {
  .panneau-offre { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) var(--space-5); }
  .panneau-offre-engagements { padding: var(--space-6) 0 0; border-left: 0; border-top: 1px solid var(--veil-strong); }
}

/* Tuiles « univers » : une grande et deux petites, rythme asymétrique. */
.tuiles-univers { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: var(--space-5); }
.card.tuile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); overflow: hidden; }
.tuile .btn-lien { margin-top: auto; padding-top: var(--space-2); }
.tuile-large {
  grid-row: span 2; justify-content: flex-end; min-height: 20rem;
  background:
    radial-gradient(420px 260px at 85% 10%, rgb(var(--gold-rgb) / .16), transparent 70%),
    linear-gradient(160deg, rgba(34,25,67,.85), rgba(17,13,36,.9));
}
.tuile-large h3 { font-size: 2rem; }
/* Grand astre en filigrane : la tuile principale porte un visuel, pas seulement du texte. */
svg.ico.tuile-filigrane { position: absolute; right: -3rem; top: -3rem; width: 17rem; height: 17rem; color: var(--gold); opacity: .13; pointer-events: none; }
.tuile-large > :not(.tuile-filigrane) { position: relative; }
.tuile-large .btn-lien { margin-top: var(--space-2); }
@media (max-width: 760px) {
  .tuiles-univers { grid-template-columns: 1fr; }
  .tuile-large { grid-row: auto; min-height: 14rem; }
}

/* ============================================================
   Pages publiques : annuaire, fiche voyant, disciplines, devenir voyant, quiz, tirage, découvrir
   ============================================================ */
/* ============================================================
   Commun à la zone
   ============================================================ */
.fil-ariane {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding-top: var(--space-5); font-size: .85rem; color: var(--mist-dim);
}
.fil-ariane svg.ico { width: .9em; height: .9em; opacity: .6; }
.fil-ariane a { color: var(--mist); }
.fil-ariane a:hover { color: var(--gold-bright); }
.fil-ariane [aria-current] { color: var(--moon); }

/* Mention légale de bas de page (18+, divertissement). */
.mention-legale { font-size: .8rem; padding-block: var(--space-5) var(--space-6); max-width: 70ch; }

/* Messages d'état dans les modales et formulaires (couleurs de jetons audités). */
.msg-alerte { color: var(--busy); }
.msg-succes { color: var(--gold-bright); }

/* Modales de la fiche (réservation, rappel) : rythme porté par des classes. */
.rdv-modal .modale-titre { font-size: 1.5rem; margin-bottom: var(--space-1); }
.rdv-modal .modale-sous-titre { margin-bottom: var(--space-4); }
.rdv-modal .modale-choix { gap: var(--space-1); }
.rdv-modal .modale-note { font-size: .85rem; }
.rdv-modal .modale-note svg.ico { color: var(--gold); }
.rdv-modal #cbForm { gap: var(--space-4); }
.rdv-modal #cbForm .field { margin: 0; }
.rdv-modal .consent span { font-size: .85rem; }
.rdv-modal #rdvRecap { margin-bottom: var(--space-2); }
.rdv-modal .modale-note + .modale-actions,
.rdv-modal #rdvRecap + .modale-note { margin-top: var(--space-2); }
.modale-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-4); }

/* Notes en étoiles (icônes, jamais de glyphes). */
.etoiles { display: inline-flex; gap: .1rem; color: var(--gold); vertical-align: -.15em; }
.etoiles svg.ico { width: 1em; height: 1em; }

/* ============================================================
   Fiche voyant (/voyant/:slug)
   ============================================================ */

/* En-tête : identité à gauche, panneau de décision à droite, tout visible
   dans le premier écran. */
.page-fiche .fiche-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-7); align-items: start;
  padding-block: var(--space-6) var(--space-7);
}
.page-fiche .fiche-identite { display: flex; gap: var(--space-6); align-items: flex-start; }
.page-fiche .fiche-portrait { flex: none; position: relative; }
/* Le portrait est encadré d'un anneau gradué, écho de la carte du ciel de l'accueil. */
.page-fiche .fiche-portrait::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px dashed rgb(var(--gold-rgb) / .35);
}
.page-fiche .fiche-avatar { width: 128px; height: 128px; font-size: 3.4rem; }
.page-fiche .fiche-avatar.avatar-monogramme { font-size: 2.6rem; }
.page-fiche .fiche-id-texte { min-width: 0; }
.page-fiche .fiche-id-texte h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-fiche .fiche-id-texte .lead { margin-top: var(--space-2); font-family: var(--script); font-style: italic; font-size: 1.45rem; color: var(--moon); }
.page-fiche .fiche-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.page-fiche .fiche-badges:not(:has(*)) { display: none; }
.page-fiche .fiche-etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.page-fiche .fiche-etat .presence { font-weight: 500; }
.page-fiche .fiche-note { display: inline-flex; align-items: center; gap: var(--space-2); }
.page-fiche .fiche-note strong { color: var(--moon); }
.page-fiche .fiche-specialites { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.page-fiche .fiche-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* Panneau de décision : un seul cadre, le prix, l'action principale. */
.page-fiche .fiche-decision {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(320px 200px at 100% 0%, rgb(var(--gold-rgb) / .12), transparent 70%),
    linear-gradient(160deg, var(--plum), var(--night-800));
  border: 1px solid rgb(var(--gold-rgb) / .25);
  box-shadow: var(--shadow);
  position: sticky; top: calc(var(--header-h) + var(--space-4));
}
.page-fiche .fiche-decision-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; margin-bottom: var(--space-1); }
.page-fiche .fiche-decision-prix strong { font-family: var(--script); font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--gold-bright); }
.page-fiche .fiche-offertes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: .85rem; margin-bottom: var(--space-2); }
.page-fiche .fiche-dispo { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgb(var(--night-rgb) / .45); border: 1px solid var(--veil); font-size: .9rem; }
.page-fiche .fiche-dispo[hidden], .page-fiche #fiche-cta-rdv[hidden] { display: none; }
.page-fiche .fiche-dispo p + p { margin-top: var(--space-1); font-size: .82rem; }
.page-fiche .fiche-dispo svg.ico { color: var(--gold); }
.page-fiche .fiche-garanties { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--veil-strong); font-size: .84rem; color: var(--mist); }
.page-fiche .fiche-garanties li { display: flex; gap: var(--space-2); align-items: baseline; }
.page-fiche .fiche-garanties svg.ico { color: var(--gold); transform: translateY(.15em); }

/* Chiffres : une bande entre deux filets, séparateurs verticaux. */
.page-fiche .fiche-chiffres { border-block: 1px solid var(--veil); background: rgb(var(--night-rgb) / .45); }
.page-fiche .fiche-chiffres dl { display: flex; flex-wrap: wrap; padding-block: var(--space-5); }
.page-fiche .fiche-chiffres dl > div { flex: 0 1 13rem; display: flex; flex-direction: column-reverse; gap: .15rem; padding: var(--space-2) var(--space-5); border-left: 1px solid var(--veil); }
.page-fiche .fiche-chiffres dl > div:first-child { border-left: 0; padding-left: 0; }
.page-fiche .fiche-chiffres dl > div[hidden] { display: none; }
.page-fiche .fiche-chiffres dd { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-bright); line-height: 1.15; }
.page-fiche .fiche-chiffres dt { font-size: .8rem; color: var(--mist-dim); letter-spacing: .03em; }

/* À propos : texte en mesure, vidéo à côté si elle existe. */
.page-fiche .fiche-apropos { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.page-fiche .fiche-apropos:not(:has(.fiche-video)) { grid-template-columns: minmax(0, 1fr); }
.page-fiche .fiche-bio .lead { color: var(--mist); line-height: 1.75; white-space: pre-line; }
.page-fiche .fiche-video h3 { margin-bottom: var(--space-3); }
.page-fiche .fiche-video video { display: block; width: 100%; max-width: 480px; border-radius: var(--radius); border: 1px solid var(--veil-strong); background: var(--night-800); }

/* Formules : une liste, prix alignés en colonne, action à droite. */
.page-fiche .formules { display: flex; flex-direction: column; border: 1px solid var(--veil); border-radius: var(--radius); background: linear-gradient(160deg, rgba(34,25,67,.75), rgba(17,13,36,.85)); }
.page-fiche .formule {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(12rem, auto);
  align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
}
.page-fiche .formule + .formule { border-top: 1px solid var(--veil); }
.page-fiche .formule h3 { font-size: 1.35rem; }
.page-fiche .formule-texte p { font-size: .88rem; margin-top: .1rem; }
.page-fiche .formule-prix { display: flex; align-items: baseline; gap: .15rem; white-space: nowrap; }
.page-fiche .formule-prix strong { font-family: var(--script); font-size: 1.7rem; font-weight: 600; color: var(--gold-bright); }
.page-fiche .formule-cta { display: flex; justify-content: flex-end; }
.page-fiche .formule-cta-pile { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.page-fiche .formules > .etat-vide { border: 0; }
.page-fiche .encart-rdv {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm); border: 1px solid rgb(var(--gold-rgb) / .3); background: rgb(var(--gold-rgb) / .07);
}
.page-fiche .encart-rdv > svg.ico { color: var(--gold); width: 1.4rem; height: 1.4rem; }
.page-fiche .encart-rdv p { flex: 1 1 16rem; }

/* Agenda : une ligne par jour, jour à gauche. */
.page-fiche .agenda .slots-day { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); border-top: 1px solid var(--veil); margin: 0; }
.page-fiche .agenda .slots-day:first-child { border-top: 0; }
.page-fiche .agenda .slots-day h3 { font-family: var(--script); font-size: 1.2rem; margin: 0; }
.page-fiche .agenda .etat-vide svg.ico { color: var(--gold); }

/* Hors appel : deux panneaux côte à côte, le forfait en large dessous. */
.page-fiche .fiche-hors-appel[hidden] { display: none; }
.page-fiche .hors-appel-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5); }
.page-fiche .hors-appel-grille:not(:has(*)) { display: none; }
.page-fiche .bloc-hors-appel {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius);
  border: 1px solid var(--veil); background: linear-gradient(160deg, rgba(34,25,67,.75), rgba(17,13,36,.85));
}
.page-fiche .bloc-hors-appel .field { width: 100%; margin: 0; }
.page-fiche .bloc-prix .price { font-family: var(--script); font-size: 1.8rem; font-weight: 600; }
.page-fiche #packMention, .page-fiche .bloc-note { font-size: .84rem; }
.page-fiche .bloc-action { margin-top: auto; padding-top: var(--space-2); }
.page-fiche .bloc-forfait {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6);
  margin-top: var(--space-5); padding: var(--space-6);
  border-radius: var(--radius); border: 1px solid rgb(var(--gold-rgb) / .22);
  background: radial-gradient(420px 220px at 0% 0%, rgb(var(--gold-rgb) / .09), transparent 70%), rgb(var(--night-rgb) / .5);
}
.page-fiche .bloc-forfait-texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.page-fiche .forfait-plans { list-style: none; display: flex; flex-direction: column; }
.page-fiche .forfait-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-top: 1px solid var(--veil); }
.page-fiche .forfait-plan:first-child { border-top: 0; padding-top: 0; }
.page-fiche .forfait-plan h4 { font-size: 1.25rem; }
.page-fiche .forfait-plan p.dim { font-size: .84rem; }
.page-fiche .forfait-prix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.page-fiche .forfait-prix .price { font-family: var(--script); font-size: 1.5rem; font-weight: 600; }
.page-fiche #forfait-msg { grid-column: 1 / -1; font-size: .85rem; }
.page-fiche #forfait-msg:empty { display: none; }

/* Avis : la note résumée à gauche (fixe), les témoignages à droite. */
.page-fiche .fiche-avis { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.page-fiche .avis-resume { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-2); }
.page-fiche .avis-resume h2 { margin-bottom: var(--space-3); }
.page-fiche .avis-note-grande { font-family: var(--serif); font-size: 3.6rem; line-height: 1; color: var(--gold-bright); }
.page-fiche .avis-note-grande .dim { font-size: 1.4rem; }
.page-fiche .avis-resume .etoiles { font-size: 1.3rem; }
.page-fiche .avis-source { font-size: .82rem; margin-top: var(--space-3); max-width: 30ch; }
.page-fiche .avis-liste { display: flex; flex-direction: column; }
.page-fiche .avis { padding-block: var(--space-5); border-top: 1px solid var(--veil); }
.page-fiche .avis:first-child { border-top: 0; padding-top: 0; }
.page-fiche .avis-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: .85rem; }
.page-fiche .avis-auteur { color: var(--moon); font-weight: 500; }
.page-fiche .avis-verifie { display: inline-flex; align-items: center; gap: .3rem; color: var(--online); font-size: .78rem; }
.page-fiche .avis-texte { margin-top: var(--space-2); font-family: var(--script); font-size: 1.3rem; line-height: 1.45; color: var(--moon); max-width: var(--mesure); }
.page-fiche .avis-verdict { display: flex; align-items: center; gap: .35rem; margin-top: var(--space-2); font-size: .82rem; color: var(--mist); }
.page-fiche .avis-verdict svg.ico { color: var(--gold); }
.page-fiche .avis-reponse { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgb(var(--moon-rgb) / .04); border: 1px solid var(--veil); font-size: .9rem; }
.page-fiche .avis-reponse p.dim { font-size: .78rem; margin-bottom: .15rem; }
.page-fiche .avis-liste .etat-vide svg.ico { width: 1.4rem; height: 1.4rem; }

@media (max-width: 960px) {
  .page-fiche .fiche-tete { grid-template-columns: 1fr; gap: var(--space-5); }
  .page-fiche .fiche-decision { position: static; }
  .page-fiche .fiche-apropos, .page-fiche .fiche-avis, .page-fiche .bloc-forfait { grid-template-columns: 1fr; gap: var(--space-5); }
  .page-fiche .avis-resume { position: static; }
  .page-fiche .formule { grid-template-columns: auto minmax(0, 1fr) auto; }
  .page-fiche .formule-cta { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .page-fiche .fiche-identite { flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
  .page-fiche .fiche-avatar { width: 104px; height: 104px; font-size: 2.8rem; }
  .page-fiche .fiche-badges, .page-fiche .fiche-etat, .page-fiche .fiche-specialites, .page-fiche .fiche-actions { justify-content: center; }
  .page-fiche .fiche-decision { padding: var(--space-5); }
  .page-fiche .fiche-chiffres dl { display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--space-3); }
  .page-fiche .fiche-chiffres dl > div { border-left: 0; padding-inline: 0; }
  .page-fiche .formule { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding: var(--space-5); }
  .page-fiche .formule-prix, .page-fiche .formule-cta { grid-column: 2; }
  .page-fiche .formule-cta .btn { white-space: normal; }
  .page-fiche .agenda .slots-day { grid-template-columns: 1fr; gap: var(--space-2); }
  .page-fiche .bloc-hors-appel, .page-fiche .bloc-forfait { padding: var(--space-5); }
  .page-fiche .forfait-plan { grid-template-columns: 1fr; gap: var(--space-2); }
  .page-fiche .forfait-prix { justify-content: flex-start; }
  .page-fiche .forfait-plan .btn { justify-self: start; }
}

/* ============================================================
   Annuaire (/pros.html)
   ============================================================ */
.page-annuaire .annuaire-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5) var(--space-7); margin-bottom: var(--space-6); }
.page-annuaire .annuaire-tete .lead { margin-top: var(--space-3); }
/* Entrée vers le quiz : un objet discret, pas une bannière. */
.page-annuaire .annuaire-quiz {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: 999px; border: 1px solid var(--veil-strong); background: var(--veil);
  color: var(--moon); transition: border-color .2s, background-color .2s;
}
.page-annuaire .annuaire-quiz:hover { border-color: rgb(var(--gold-rgb) / .45); background: var(--veil-strong); }
.page-annuaire .annuaire-quiz > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; font-size: .9rem; }
.page-annuaire .annuaire-quiz .dim { font-size: .82rem; }
.page-annuaire .annuaire-quiz > svg.ico { color: var(--gold-bright); transition: transform .2s var(--ease); }
.page-annuaire .annuaire-quiz:hover > svg.ico { transform: translateX(3px); }

/* Filtres : un panneau, champs en haut, spécialités dessous. */
.page-annuaire .annuaire-filtres {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); margin-bottom: var(--space-5);
  border-radius: var(--radius); border: 1px solid var(--veil); background: rgb(var(--night-rgb) / .5);
}
.page-annuaire .annuaire-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); gap: var(--space-4); }
.page-annuaire .annuaire-champs .field { margin: 0; }
.page-annuaire .champ-icone { position: relative; }
.page-annuaire .champ-icone svg.ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--mist-dim); pointer-events: none; }
.page-annuaire .champ-icone input { padding-left: 2.8rem; }
.page-annuaire #chips { gap: var(--space-2); }
.page-annuaire #chips:empty { display: none; }
.page-annuaire .chips-separateur { width: 1px; align-self: stretch; margin-inline: var(--space-2); background: var(--veil-strong); }
.page-annuaire .chip-offertes svg.ico { color: var(--gold); }
.page-annuaire .annuaire-resultats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); min-height: 2.4rem; margin-bottom: var(--space-4); }
.page-annuaire #count { font-size: .88rem; }
.page-annuaire #guideLink:empty { display: none; }
.page-annuaire .est-desactive { pointer-events: none; opacity: .5; }
.page-annuaire .etat-vide svg.ico { color: var(--gold); }

@media (max-width: 640px) {
  .page-annuaire .annuaire-champs { grid-template-columns: 1fr; }
  .page-annuaire .annuaire-filtres { padding: var(--space-4); }
  .page-annuaire .annuaire-quiz { width: 100%; }
  .page-annuaire .annuaire-quiz > span:nth-child(2) { flex: 1; }
  /* Spécialités : une rangée défilante plutôt qu'un mur de pastilles. */
  .page-annuaire #chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scrollbar-width: thin; }
  .page-annuaire #chips .chip-filter { flex: none; }
}

/* ============================================================
   Pages discipline (/voyance/:discipline)
   ============================================================ */
.page-discipline .discipline-tete { padding-block: var(--space-6) var(--space-6); }
.page-discipline .discipline-tete .lead { margin-top: var(--space-3); }
.page-discipline .discipline-chips { gap: var(--space-2); margin-top: var(--space-5); }
.page-discipline .discipline-liste { padding-bottom: var(--space-4); }
.page-discipline .discipline-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--space-8); align-items: start; }
/* Texte éditorial : mesure de lecture, titres d'étape en h3 visuel. */
.page-discipline .guide { max-width: var(--mesure); }
.page-discipline .guide h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: var(--space-3); }
.page-discipline .guide h2:not(:first-child) { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--veil); }
.page-discipline .guide p { color: var(--mist); font-size: 1.05rem; line-height: 1.8; }
.page-discipline .guide-aside {
  position: sticky; top: calc(var(--header-h) + var(--space-5));
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius);
  border: 1px solid rgb(var(--gold-rgb) / .22);
  background: radial-gradient(300px 200px at 100% 0%, rgb(var(--gold-rgb) / .1), transparent 70%), linear-gradient(160deg, var(--plum), var(--night-800));
}
.page-discipline .guide-aside h2 { font-family: var(--script); font-size: 1.5rem; letter-spacing: .005em; }
.page-discipline .guide-aside .btn-block { margin-top: var(--space-2); }
@media (max-width: 900px) {
  .page-discipline .discipline-guide { grid-template-columns: 1fr; gap: var(--space-6); }
  .page-discipline .guide-aside { position: static; }
}
@media (max-width: 640px) {
  .page-discipline .discipline-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; }
  .page-discipline .discipline-chips .chip-filter { flex: none; }
}

/* ============================================================
   Landing pro (/devenir-voyant.html)
   ============================================================ */
.page-pro .or { color: var(--gold-bright); }
.page-pro .pro-fondateur-ligne { margin-top: var(--space-5); }
/* Cadran de revenus : reprend .carte-ciel (traits, rotation lente de la couronne). */
.page-pro .cadran-revenus .cadran-arc { fill: none; stroke-width: 16; }
.page-pro .cadran-revenus .cadran-arc-plein { stroke: var(--gold-deep); }
.page-pro .cadran-revenus .cadran-arc-palier { stroke: var(--gold-bright); }
.page-pro .cadran-revenus .cadran-valeur { font-family: var(--serif); font-size: 40px; font-weight: 600; fill: var(--gold-bright); }
.page-pro .cadran-revenus .cadran-legende { font-family: var(--sans); font-size: 17px; letter-spacing: .18em; text-transform: uppercase; fill: var(--mist); }

/* Simulateur : réglages dans une carte, résultat dans un panneau éclairé. */
.page-pro .simulateur-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.page-pro .simulateur-reglages { padding: var(--space-6); }
.page-pro .simulator { gap: var(--space-6); }
.page-pro .sim-champ { display: flex; flex-direction: column; gap: var(--space-3); }
.page-pro .sim-champ label { margin: 0; font-size: .95rem; color: var(--moon); }
.page-pro .sim-champ .price { font-family: var(--script); font-weight: 600; font-size: 1.4rem; white-space: nowrap; }
.page-pro .sim-champ .field-aide { margin: 0; }
.page-pro .simulateur-resultat {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); border-radius: var(--radius);
  border: 1px solid rgb(var(--gold-rgb) / .25);
  background: radial-gradient(420px 240px at 100% 0%, rgb(var(--gold-rgb) / .12), transparent 70%), linear-gradient(160deg, var(--plum), var(--night-800));
}
.page-pro .sim-libelle { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.page-pro .simulator .sim-out { font-size: clamp(2.2rem, 4vw, 3rem); text-shadow: none; line-height: 1.1; }
.page-pro .sim-detail { font-size: .88rem; }
.page-pro .sim-detail strong { color: var(--moon); }
.page-pro .simulateur-resultat .sim-bar { margin-top: var(--space-4); }
.page-pro .sim-fill { box-shadow: none; }
.page-pro .sim-legende { font-size: .85rem; }
.page-pro .simulateur-resultat .divider { margin: var(--space-4) 0; }
.page-pro .simulateur-resultat .btn-block { margin-top: auto; }

/* Comparatif (sans cadre) + barème (carte), largeurs inégales. */
.page-pro .pro-bareme-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-7); margin-top: var(--space-7); align-items: start; }
.page-pro .pro-comparatif h3, .page-pro .pro-bareme h3 { font-size: 1.6rem; margin-bottom: var(--space-3); }
.page-pro .compare-liste { margin-top: var(--space-3); border-top: 1px solid var(--veil-strong); }
.page-pro .pro-note { font-size: .82rem; margin-top: var(--space-3); }
.page-pro .pro-bareme { padding: var(--space-6); }
.page-pro .pro-bareme > .muted { font-size: .92rem; }
.page-pro .tier-liste { margin-top: var(--space-5); }
.page-pro .tier-bar { grid-template-columns: 7.5rem minmax(4rem, 1fr) auto; margin: var(--space-3) 0; }
.page-pro .tier-tranche { font-size: .8rem; line-height: 1.35; }
.page-pro .tier-bar .pct { font-family: var(--sans); font-size: .85rem; color: var(--mist); }
.page-pro .tier-bar .pct strong { color: var(--gold-bright); font-weight: 600; }
.page-pro .pro-liens { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--veil); }
.page-pro .pro-liens .btn-lien { padding-inline: 0; }

/* Arguments : grille 2 × 2 à filets. */
.page-pro .pro-arguments { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--veil); }
.page-pro .pro-arguments li { display: flex; gap: var(--space-5); padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: 1px solid var(--veil); }
.page-pro .pro-arguments li:nth-child(even) { padding-left: var(--space-6); border-left: 1px solid var(--veil); }
.page-pro .pro-arguments h3 { margin-bottom: var(--space-2); }
.page-pro .pro-arguments .ico-pastille { flex: none; }

.page-pro .pro-fondateur h2 { margin-top: var(--space-4); }
.page-pro .pro-fin { justify-content: center; margin-top: var(--space-7); }

@media (max-width: 860px) {
  .page-pro .simulateur-grille, .page-pro .pro-bareme-grille { grid-template-columns: 1fr; }
  .page-pro .pro-bareme-grille { gap: var(--space-6); }
  .page-pro .pro-arguments { grid-template-columns: 1fr; }
  .page-pro .pro-arguments li, .page-pro .pro-arguments li:nth-child(even) { padding: var(--space-5) 0; border-left: 0; }
  .page-pro .hero-split .cadran-revenus { max-width: 200px; }
}
@media (max-width: 480px) {
  .page-pro .simulateur-reglages, .page-pro .simulateur-resultat, .page-pro .pro-bareme { padding: var(--space-5); }
  .page-pro .tier-bar { grid-template-columns: 1fr auto; row-gap: var(--space-1); }
  .page-pro .tier-bar .bar { grid-column: 1 / -1; grid-row: 2; }
  .page-pro .pro-arguments li { gap: var(--space-4); }
}

/* ============================================================
   Quiz d'orientation (/quiz.html et /decouvrir)
   ============================================================ */
.page-quiz { max-width: 820px; }
.page-quiz .quiz-tete { margin-bottom: var(--space-6); }
.page-quiz .quiz-tete .lead { margin-top: var(--space-3); }
:is(.page-quiz, .page-decouvrir) .quiz-panneau {
  padding: var(--space-6); border-radius: var(--radius);
  border: 1px solid var(--veil); background: linear-gradient(160deg, rgba(34,25,67,.75), rgba(17,13,36,.85));
}
:is(.page-quiz, .page-decouvrir) .quiz-etape { font-size: .85rem; }
/* Résultats : les cartes voyant se posent directement sur la page (pas de carte dans un cadre). */
:is(.page-quiz, .page-decouvrir) .quiz-panneau:has(.quiz-resultats) { padding: 0; border: 0; background: none; }
:is(.page-quiz, .page-decouvrir) .quiz-progress { height: 4px; border-radius: 999px; background: var(--veil-strong); overflow: hidden; margin: var(--space-2) 0 var(--space-5); }
:is(.page-quiz, .page-decouvrir) .quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
:is(.page-quiz, .page-decouvrir) .quiz-question { font-family: var(--script); font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: .005em; margin-bottom: var(--space-5); }
:is(.page-quiz, .page-decouvrir) .quiz-question:focus { outline: none; }
/* Options : des tuiles cliquables sur deux colonnes, icône en tête. */
:is(.page-quiz, .page-decouvrir) .quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
:is(.page-quiz, .page-decouvrir) .quiz-option { justify-content: flex-start; text-align: left; white-space: normal; padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); gap: var(--space-3); font-size: 1rem; }
:is(.page-quiz, .page-decouvrir) .quiz-option svg.ico { color: var(--gold); width: 1.3rem; height: 1.3rem; }
:is(.page-quiz, .page-decouvrir) .quiz-option[aria-pressed="true"] { border-color: var(--gold-bright); color: var(--gold-bright); background: rgb(var(--gold-rgb) / .12); }
:is(.page-quiz, .page-decouvrir) .quiz-retour { margin-top: var(--space-5); padding-inline: 0; }
:is(.page-quiz, .page-decouvrir) .quiz-resultats { display: flex; flex-direction: column; gap: var(--space-6); }
:is(.page-quiz, .page-decouvrir) .quiz-match { display: flex; flex-direction: column; gap: var(--space-3); }
:is(.page-quiz, .page-decouvrir) .quiz-score .tag { font-size: .85rem; padding: .3rem .8rem; }
:is(.page-quiz, .page-decouvrir) .raisons { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
:is(.page-quiz, .page-decouvrir) .raisons li { display: flex; gap: var(--space-2); align-items: baseline; font-size: .9rem; color: var(--mist); }
:is(.page-quiz, .page-decouvrir) .raisons svg.ico { color: var(--online); transform: translateY(.15em); }
:is(.page-quiz, .page-decouvrir) .quiz-cta-pro { align-self: flex-start; }
:is(.page-quiz, .page-decouvrir) .quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--veil); }
:is(.page-quiz, .page-decouvrir) .etat-vide svg.ico { color: var(--gold); }
@media (max-width: 480px) {
  :is(.page-quiz, .page-decouvrir) .quiz-panneau { padding: var(--space-5) var(--space-4); }
}

/* ============================================================
   Découvrir (/decouvrir) : trois étapes reliées par un filet
   ============================================================ */
.page-decouvrir { max-width: 900px; }
.page-decouvrir .decouvrir-tete { margin-bottom: var(--space-7); }
.page-decouvrir .decouvrir-tete .lead { margin-top: var(--space-3); }
.page-decouvrir .decouvrir-etapes { list-style: none; position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.page-decouvrir .decouvrir-etapes::before {
  content: ''; position: absolute; left: 1.4rem; top: 1.4rem; bottom: 1.4rem; width: 1px;
  background: linear-gradient(180deg, rgb(var(--gold-rgb) / .6), rgb(var(--gold-rgb) / .08));
}
.page-decouvrir .decouvrir-etapes > li { position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: var(--space-5); }
/* La règle mobile partagée positionne .parcours-num en absolu : ici la pastille reste dans sa colonne. */
.page-decouvrir .decouvrir-etapes .parcours-num { position: relative; top: auto; left: auto; margin: 0; }
.page-decouvrir .decouvrir-etapes h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: .35rem 0 var(--space-4); }
.page-decouvrir .decouvrir-etapes h2 + p { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.page-decouvrir .decouvrir-signe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-decouvrir .decouvrir-signe .field { margin: 0; flex: 1 1 14rem; max-width: 22rem; }
.page-decouvrir .horo-invite-tete { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-decouvrir .horo-invite-tete .signe { font-size: 1.5rem; line-height: 1; }
.page-decouvrir .horo-invite-tete h3 { font-size: 1.6rem; }
.page-decouvrir .horo-invite-tete p { font-size: .85rem; }
.page-decouvrir .horo-rubriques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.page-decouvrir .horo-rubrique h4 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.2rem; color: var(--gold-bright); margin-bottom: var(--space-1); }
.page-decouvrir .horo-rubrique h4 svg.ico { color: var(--gold); }
.page-decouvrir .horo-rubrique p { color: var(--mist); font-size: .95rem; }
.page-decouvrir #horoscopeResult .etat-vide svg.ico { color: var(--gold); }
.page-decouvrir .decouvrir-cta { padding: var(--space-6); border-radius: var(--radius); border: 1px solid rgb(var(--gold-rgb) / .22); background: radial-gradient(420px 220px at 0% 0%, rgb(var(--gold-rgb) / .1), transparent 70%), linear-gradient(160deg, var(--plum), var(--night-800)); }
.page-decouvrir .decouvrir-cta h2 { margin-top: 0; }
.page-decouvrir .decouvrir-cta .btn { margin-top: var(--space-4); }
.page-decouvrir .mention-legale { margin-top: var(--space-7); }
@media (max-width: 600px) {
  .page-decouvrir .decouvrir-etapes { gap: var(--space-7); }
  .page-decouvrir .decouvrir-etapes::before { display: none; }
  .page-decouvrir .decouvrir-etapes > li { grid-template-columns: 1fr; gap: var(--space-3); }
  .page-decouvrir .horo-rubriques { grid-template-columns: 1fr; }
  .page-decouvrir .decouvrir-signe .btn { flex: 1 1 100%; }
  .page-decouvrir .decouvrir-cta { padding: var(--space-5); }
}

/* ============================================================
   Tirage (/tirage.html)
   ============================================================ */
.page-tirage .tirage-tete { text-align: center; padding-block: var(--space-8) var(--space-6); }
.page-tirage .tirage-tete h1 { max-width: 18ch; margin-inline: auto; }
.page-tirage .tirage-tete h1 .glow { color: var(--gold-bright); }
.page-tirage .tirage-tete .lead { margin: var(--space-4) auto var(--space-6); max-width: 40rem; }
.page-tirage .tirage-tete .hero-actions { justify-content: center; }
/* Le tapis : un plateau sombre bordé d'un filet d'or, les trois positions posées dessus. */
.page-tirage .tirage-tapis { padding-bottom: var(--space-6); }
.page-tirage .tirage-positions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6);
  max-width: 820px; margin-inline: auto; padding: var(--space-6);
  border-radius: calc(var(--radius) + 8px); border: 1px solid rgb(var(--gold-rgb) / .2);
  background: radial-gradient(ellipse at 50% 0%, rgb(var(--gold-rgb) / .08), transparent 60%), rgb(var(--night-rgb) / .55);
}
.page-tirage .tirage-position { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.page-tirage .tirage-label { font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.page-tirage .tarot-card { width: 100%; max-width: 200px; }
.page-tirage .tarot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.page-tirage .tarot-card .glyph { filter: none; line-height: 1; }
.page-tirage .tarot-card .glyph svg.ico { width: 2.6rem; height: 2.6rem; }
.page-tirage .tarot-card.back .glyph { opacity: .55; }
.page-tirage .tarot-card.back .title { color: var(--mist-dim); }
.page-tirage .tarot-card::after { content: ''; position: absolute; inset: 8px; border-radius: 6px; border: 1px solid rgb(var(--gold-rgb) / .25); pointer-events: none; }
.page-tirage .tarot-card.revelee { animation: retournement .6s var(--ease) var(--delai, 0ms) both; }
@keyframes retournement { from { opacity: 0; transform: perspective(600px) rotateY(80deg); } to { opacity: 1; transform: none; } }
.page-tirage .tirage-sens { min-height: 3rem; font-size: .88rem; color: var(--mist); max-width: 26ch; }
.page-tirage .tirage-sens strong { display: block; font-family: var(--script); font-size: 1.15rem; color: var(--moon); }
.page-tirage .tirage-aide { margin-top: var(--space-4); font-size: .9rem; }
@media (max-width: 640px) {
  .page-tirage .tirage-tete { padding-top: var(--space-6); }
  /* Une position par ligne : la carte à gauche, son sens à droite. */
  .page-tirage .tirage-positions { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
  .page-tirage .tirage-position { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-1); align-items: start; text-align: left; }
  .page-tirage .tirage-position + .tirage-position { padding-top: var(--space-4); border-top: 1px solid var(--veil); }
  .page-tirage .tirage-position .tarot-card { grid-column: 1; grid-row: 1 / span 2; padding: .5rem; }
  .page-tirage .tirage-label { grid-column: 2; padding-top: var(--space-2); }
  .page-tirage .tirage-sens { grid-column: 2; min-height: 0; max-width: none; }
  .page-tirage .tarot-card .glyph svg.ico { width: 1.8rem; height: 1.8rem; }
  .page-tirage .tarot-card .title { font-size: .72rem; }
}

/* ============================================================
   Pages publiques : horoscope, aide, légal et chartes, statut, DSA, transparence, entreprise, rapports
   ============================================================ */
.zb { padding-bottom: var(--space-7); }

/* ---------- En-tête de page ------------------------------------------------ */
.zb .tete-page { max-width: 46rem; padding: var(--space-7) 0 var(--space-6); }
.zb .tete-page h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.zb .tete-page .lead { margin-top: var(--space-3); }
.zb .tete-page.center { margin-inline: auto; text-align: center; }
.zb .tete-page.center .lead { margin-inline: auto; }
.zb .tete-page .hero-actions { margin-top: var(--space-5); }
.zb .tete-page.center .hero-actions { justify-content: center; }
.zb .doc-meta { margin-top: var(--space-3); font-size: .86rem; color: var(--mist-dim); }

/* Fil d'Ariane : liste ordonnée, séparateur typographique neutre. */
.zb .fil-ariane { padding-top: var(--space-5); }
.zb .fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .86rem; color: var(--mist-dim); }
.zb .fil-ariane li + li::before { content: '/'; margin-right: .35rem; color: var(--mist-dim); }
.zb .fil-ariane a { color: var(--mist); text-decoration: none; }
.zb .fil-ariane a:hover { color: var(--gold-bright); }
.zb .fil-ariane [aria-current] { color: var(--moon); }

/* Mention de bas de page (divertissement, 18+). */
.zb .mention { max-width: var(--mesure); margin-top: var(--space-6); font-size: .82rem; color: var(--mist-dim); }
.zb .mention.center { margin-inline: auto; text-align: center; }

/* Sceau : grand médaillon gravé (signe du zodiaque, confirmation). Les anneaux
   sont des ombres INTÉRIEURES nettes, pas une lueur. */
.zb .sceau {
  display: inline-grid; place-items: center; flex: none;
  width: 5.5rem; height: 5.5rem; border-radius: 999px;
  color: var(--gold-bright);
  background: radial-gradient(circle at 30% 30%, var(--plum), var(--night-800));
  border: 1px solid rgb(var(--gold-rgb) / .45);
  box-shadow: inset 0 0 0 6px rgb(var(--night-rgb) / .55), inset 0 0 0 7px rgb(var(--gold-rgb) / .2);
}
.zb .sceau .signe { font-size: 2.5rem; line-height: 1; }
.zb .sceau svg.ico { width: 2.1rem; height: 2.1rem; }

/* Encadré sobre : cadre complet et fond à peine teinté (jamais de barre latérale). */
.zb .encadre {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgb(var(--gold-rgb) / .28); border-radius: var(--radius);
  background: rgb(var(--gold-rgb) / .05); color: var(--mist);
}
.zb .encadre > svg.ico { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .15rem; color: var(--gold); }
.zb .encadre p { max-width: 70ch; }
.zb .encadre strong { color: var(--moon); }

/* Panneau d'appel final : un seul par page, centré. */
.zb .appel-final {
  text-align: center; padding: var(--space-8) var(--space-6);
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(600px 260px at 50% 0%, rgb(var(--gold-rgb) / .1), transparent 70%),
    linear-gradient(160deg, var(--plum), var(--night-800));
  border: 1px solid rgb(var(--gold-rgb) / .22);
}
.zb .appel-final h2 { max-width: 30ch; margin-inline: auto; }
.zb .appel-final .lead { margin: var(--space-3) auto var(--space-5); }
.zb .appel-final .hero-actions { justify-content: center; }
.zb .appel-final h2 + .hero-actions { margin-top: var(--space-5); }

/* Message de formulaire (région live) : neutre par défaut, erreur en rouge. */
.zb .form-msg { min-height: 1.4em; margin-top: var(--space-2); font-size: .88rem; color: var(--mist); }
.zb .form-msg.est-erreur { color: var(--danger); }
.zb .form-msg.est-ok { color: var(--online); }
.zb .optionnel { color: var(--mist-dim); font-weight: 400; }
.zb .grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.zb .grille-champs .field-large { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .zb .grille-champs { grid-template-columns: 1fr; }
}

/* ---------- Lecture longue ------------------------------------------------- */
.zb .prose { max-width: 65ch; color: var(--mist); font-size: 1.02rem; line-height: 1.75; }
.zb .prose > * + * { margin-top: var(--space-4); }
.zb .prose h2 { margin-top: var(--space-7); font-size: 1.3rem; color: var(--moon); line-height: 1.3; }
.zb .prose h3 { margin-top: var(--space-5); font-size: 1.3rem; color: var(--moon); }
.zb .prose h2 + *, .zb .prose h3 + * { margin-top: var(--space-2); }
.zb .prose > :first-child { margin-top: 0; }
.zb .prose strong { color: var(--moon); font-weight: 600; }
.zb .prose ul, .zb .prose ol { padding-left: 1.3rem; }
.zb .prose li + li { margin-top: .4rem; }
.zb .prose li::marker { color: var(--gold); }
.zb .prose [id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

/* Document avec sommaire : sommaire collant à gauche, texte à droite. */
.zb .doc {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-8); align-items: start; padding-top: var(--space-3);
}
.zb .sommaire { position: sticky; top: calc(var(--header-h) + var(--space-5)); font-size: .88rem; }
.zb .sommaire-titre {
  margin-bottom: var(--space-3); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mist);
}
.zb .sommaire ol { list-style: none; border-left: 1px solid var(--veil-strong); }
.zb .sommaire li a {
  display: block; margin-left: -1px; padding: .32rem 0 .32rem .9rem;
  border-left: 1px solid transparent; color: var(--mist-dim); line-height: 1.35; text-decoration: none;
}
.zb .sommaire li a:hover { color: var(--moon); border-left-color: var(--gold); }
.zb .doc-pied { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--veil); }
.zb .doc-pied .btn { margin-top: var(--space-4); }
/* Flèche de retour : la flèche du jeu, retournée. */
@media (max-width: 960px) {
  .zb .doc { grid-template-columns: 1fr; gap: var(--space-5); }
  .zb .sommaire { position: static; padding: var(--space-4) var(--space-5); border: 1px solid var(--veil); border-radius: var(--radius); }
  .zb .sommaire ol { columns: 2; column-gap: var(--space-5); border-left: 0; }
  .zb .sommaire li { break-inside: avoid; }
  .zb .sommaire li a { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .zb .sommaire ol { columns: 1; }
}

/* Tableaux de texte juridique : défilement horizontal isolé sur mobile. */
.zb .table-defil { overflow-x: auto; border: 1px solid var(--veil-strong); border-radius: var(--radius-sm); }
.zb .tableau { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .92rem; }
.zb .tableau th {
  text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mist); background: rgb(var(--moon-rgb) / .04);
}
.zb .tableau th, .zb .tableau td { padding: .7rem .9rem; border-bottom: 1px solid var(--veil); vertical-align: top; }
.zb .tableau tbody tr:last-child td { border-bottom: 0; }

/* Blocs d'une page réglementaire (accessibilité, DSA, transparence). */
.zb .blocs { display: flex; flex-direction: column; gap: var(--space-4); max-width: 52rem; }
.zb .bloc > * + * { margin-top: var(--space-3); }
.zb .bloc h2 { font-size: 1.2rem; line-height: 1.3; }
.zb .bloc h3 { font-size: 1.2rem; }
.zb .bloc p, .zb .bloc li { color: var(--mist); max-width: 68ch; }
.zb .bloc strong { color: var(--moon); }
.zb .bloc ul { padding-left: 1.2rem; }
.zb .bloc li + li { margin-top: .3rem; }
.zb .bloc li::marker { color: var(--gold); }
.zb .bloc .dim { color: var(--mist-dim); font-size: .86rem; }

/* Compteurs (transparence, espace affilié). */
.zb .compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.zb .compteur {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .2rem;
  padding: var(--space-4); border: 1px solid var(--veil); border-radius: var(--radius-sm);
  background: rgb(var(--night-rgb) / .35);
}
.zb .compteur dt { font-size: .84rem; color: var(--mist); line-height: 1.35; }
.zb .compteur dd { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--gold-bright); }
.zb .compteur dd.texte { font-size: 1.2rem; }

/* Liste d'engagements (chartes) : deux colonnes de filets, pas une grille de cartes. */
.zb .engagements { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); }
.zb .engagement {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-5) 0; border-top: 1px solid var(--veil);
}
.zb .engagement .ico-pastille { width: 2.75rem; height: 2.75rem; }
.zb .engagement :is(h2, h3) {
  font-family: var(--script); font-size: 1.4rem; font-weight: 600;
  letter-spacing: 0; line-height: 1.25; color: var(--moon);
}
.zb .engagement p { margin-top: var(--space-2); color: var(--mist); max-width: 52ch; }
.zb .engagement .btn-lien { margin-top: var(--space-2); padding-left: 0; font-size: .9rem; }
.zb .engagements + .encadre { margin-top: var(--space-6); }
@media (max-width: 800px) {
  .zb .engagements { grid-template-columns: 1fr; }
}

/* Tête scindée des chartes voyant : promesse à gauche, pièce concrète à droite. */
.zb .tete-charte {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-7); align-items: center; padding: var(--space-7) 0 var(--space-6);
}
.zb .tete-charte h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin-bottom: var(--space-4); }
.zb .tete-charte .lead { margin-bottom: var(--space-5); }
.zb .tete-charte .lead strong { color: var(--gold-bright); font-weight: 500; }
@media (max-width: 900px) {
  .zb .tete-charte { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-5); }
}


/* ---------- Chartes voyant : barème, comparateur, fautes graves, classement - */
.zb .bareme h2, .zb .fautes h2, .zb .comparateur h2 { font-size: 1.3rem; }
.zb .bareme > * + *, .zb .fautes > * + * { margin-top: var(--space-3); }
.zb .paliers { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.zb .paliers .tier-bar { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem var(--space-3); margin: 0; }
.zb .paliers .tranche { grid-column: 1 / -1; font-size: .86rem; color: var(--mist); }
.zb .paliers .bar { height: 10px; }
.zb .bareme #floorNote { font-size: .82rem; }

.zb .fautes h2 { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.3; }
.zb .fautes h2 svg.ico { color: var(--danger); margin-top: .15rem; }
.zb .faute-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zb .faute-pill {
  padding: .35rem .9rem; border-radius: 999px; font-size: .86rem;
  color: var(--danger); background: rgb(var(--danger-rgb) / .08); border: 1px solid rgb(var(--danger-rgb) / .35);
}

.zb .comparateur > h2 { margin-bottom: var(--space-5); }
.zb .comparateur label strong { color: var(--gold-bright); }
.zb .cmp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.zb .cmp-col { padding: var(--space-4); border: 1px solid var(--veil-strong); border-radius: var(--radius-sm); text-align: center; }
.zb .cmp-col.us { border-color: rgb(var(--gold-rgb) / .5); background: rgb(var(--gold-rgb) / .07); }
.zb .cmp-name { font-size: .84rem; color: var(--mist); }
.zb .cmp-net { margin: .3rem 0; font-family: var(--serif); font-size: 1.6rem; color: var(--moon); }
.zb .cmp-col.us .cmp-net { color: var(--gold-bright); }
.zb .cmp-sub { font-size: .78rem; color: var(--mist-dim); }
.zb .cmp-diff { margin-top: var(--space-5); text-align: center; font-family: var(--serif); font-size: 1.15rem; }
.zb .cmp-diff strong { color: var(--gold-bright); }
.zb .cmp-note { margin-top: var(--space-3); font-size: .8rem; }
@media (max-width: 700px) {
  .zb .cmp-cols { grid-template-columns: 1fr; }
}

.zb .table-defil > .hist-attente { padding: var(--space-4) var(--space-5); }
.zb .hist-table { min-width: 0; }
@media (max-width: 640px) {
  .zb .table-defil:has(.hist-table) { border: 0; }
  .zb .hist-table thead { display: none; }
  .zb .hist-table, .zb .hist-table tbody, .zb .hist-table tr, .zb .hist-table td { display: block; width: 100%; }
  .zb .hist-table tr { margin-bottom: var(--space-3); padding: .3rem 0; border: 1px solid var(--veil-strong); border-radius: var(--radius-sm); }
  .zb .hist-table td, .zb .hist-table tbody tr:last-child td { padding: .35rem var(--space-4); border: 0; }
  .zb .hist-table td::before { content: attr(data-label); display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mist-dim); }
}

.zb .classement { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-7); padding: var(--space-6); }
.zb .classement-tete > * + * { margin-top: var(--space-3); }
.zb .classement-tete .dim { font-size: .86rem; }
.zb .composantes { display: flex; flex-direction: column; gap: var(--space-5); }
.zb .composante-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.zb .composante-tete strong { font-family: var(--script); font-size: 1.3rem; font-weight: 600; }
.zb .composante .pct { font-family: var(--serif); color: var(--gold-bright); white-space: nowrap; }
.zb .composante .bar { height: 8px; margin-top: .4rem; border-radius: 999px; background: var(--veil); overflow: hidden; }
.zb .composante .bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); }
.zb .composante p { margin-top: .35rem; font-size: .86rem; }
.zb .classement .encadre { margin-top: var(--space-5); }
.zb .page-charte-pro .doc-meta { margin-top: var(--space-4); }
@media (max-width: 860px) {
  .zb .classement { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
}

/* ---------- Horoscope ------------------------------------------------------ */
.page-horoscope .tete-horo { max-width: 56rem; margin-inline: auto; padding: var(--space-8) 0 var(--space-6); text-align: center; }
.page-horoscope .tete-horo h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.page-horoscope .tete-horo .lead { margin: var(--space-4) auto 0; }
.page-horoscope .tete-horo .glow { color: var(--gold-bright); }

.zb .zodiac-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1000px) { .zb .zodiac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .zb .zodiac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zb .zodiac-grid .sign {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: var(--space-5) var(--space-3); border-radius: var(--radius);
  color: var(--moon); background: rgb(var(--moon-rgb) / .03); border: 1px solid var(--veil);
  transition: transform .3s var(--ease), border-color .3s, background-color .3s;
}
.zb .zodiac-grid .sign:hover { transform: translateY(-3px); border-color: rgb(var(--gold-rgb) / .4); background-color: rgb(var(--gold-rgb) / .05); }
.zb .zodiac-grid .sign .glyph { font-size: 2.1rem; line-height: 1.2; color: var(--gold-bright); filter: none; }
.zb .zodiac-grid .sign .name { margin-top: .3rem; font-family: var(--script); font-size: 1.35rem; font-weight: 600; }
.zb .zodiac-grid .sign .dates { font-size: .78rem; color: var(--mist-dim); }
@media (max-width: 420px) {
  .zb .zodiac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Abonnement par email : texte à gauche, formulaire à droite. */
.zb .abonnement {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7); align-items: center; padding: var(--space-7);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(160deg, var(--plum), var(--night-800));
  border: 1px solid rgb(var(--gold-rgb) / .22);
}
.zb .abonnement h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.zb .abonnement .lead { margin-top: var(--space-3); font-size: 1.02rem; }
.zb .abonnement form .field:last-of-type { margin-bottom: var(--space-3); }
.zb .abonnement .btn { width: 100%; }
.zb .abonnement .confidentialite { margin-top: var(--space-3); font-size: .8rem; color: var(--mist-dim); }
.zb .abonnement-ok { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-5); }
.zb .abonnement-ok .sceau { width: 4rem; height: 4rem; }
.zb .abonnement-ok p { margin-top: var(--space-2); color: var(--mist); }
@media (max-width: 860px) {
  .zb .abonnement { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) var(--space-5); }
  .zb .abonnement-ok { flex-direction: column; text-align: center; }
}

/* Page signe. */
.page-signe .tete-signe { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) 0 var(--space-6); }
.page-signe .tete-signe h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.page-signe .tete-signe .eyebrow { margin-bottom: var(--space-2); }
.page-signe .signe-meta { margin-top: .35rem; color: var(--mist); }
@media (max-width: 560px) {
  .page-signe .tete-signe { flex-direction: column; gap: var(--space-3); text-align: center; }
}

/* Lecture du jour : un seul cadre, rubriques séparées par des filets. */
.zb .card.horo-lecture { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.zb .horo-rubrique { padding: var(--space-6); }
.zb .horo-rubrique:nth-child(odd) { border-right: 1px solid var(--veil); }
.zb .horo-rubrique:nth-child(n+3) { border-top: 1px solid var(--veil); }
.zb .horo-titre {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--script); font-size: 1.5rem; letter-spacing: 0; color: var(--moon);
}
.zb .horo-titre svg.ico { width: 1.3rem; height: 1.3rem; color: var(--gold); }
.zb .horo-rubrique p, .zb .horo-climat p { margin-top: var(--space-2); max-width: 48ch; font-size: 1.05rem; color: var(--mist); }
.zb .horo-climat { margin-bottom: var(--space-4); }
.zb .horo-climat p { max-width: 60ch; font-size: 1.2rem; color: var(--moon); }
.zb .horo-mentions { margin-bottom: var(--space-4); font-size: .82rem; color: var(--mist-dim); }
.zb .mot-du-jour {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .6rem;
  margin-top: var(--space-6); text-align: center;
}
.zb .mot-du-jour .mot { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .06em; color: var(--gold-bright); text-transform: none; }
.zb .reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3) var(--space-5); }
.zb .reperes p { color: var(--mist); }
.zb .reperes strong { display: block; color: var(--moon); font-weight: 600; }
@media (max-width: 700px) {
  .zb .card.horo-lecture { grid-template-columns: 1fr; }
  .zb .horo-rubrique { padding: var(--space-5); }
  .zb .horo-rubrique:nth-child(odd) { border-right: 0; }
  .zb .horo-rubrique:nth-child(n+2) { border-top: 1px solid var(--veil); }
}

/* « Lire la suite » : pilule native, pliable au clavier. */
.zb .lire-suite { margin-top: var(--space-5); }
.zb .lire-suite > summary {
  display: inline-flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer;
  padding: .7rem 1.3rem; border-radius: 999px; font-weight: 500;
  background: var(--veil); border: 1px solid var(--veil-strong); color: var(--moon);
  transition: border-color .2s, background-color .2s;
}
.zb .lire-suite > summary::-webkit-details-marker { display: none; }
.zb .lire-suite > summary:hover { border-color: rgb(var(--gold-rgb) / .45); background: var(--veil-strong); }
.zb .lire-suite > summary svg.ico { transition: transform .25s var(--ease); }
.zb .lire-suite[open] > summary svg.ico { transform: rotate(45deg); }
.zb .lire-suite-corps { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); }

/* Navigation entre signes. */
.zb .bande-signes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.zb .bande-signes .chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem;
  border-radius: 999px; font-size: .88rem; text-decoration: none;
  color: var(--mist); background: var(--veil); border: 1px solid var(--veil-strong);
  transition: color .2s, border-color .2s, background-color .2s;
}
.zb .bande-signes .chip .signe { color: var(--gold); }
.zb .bande-signes .chip:hover { color: var(--moon); border-color: rgb(var(--gold-rgb) / .45); }
.zb .bande-signes .chip.active { color: var(--gold-bright); background: rgb(var(--gold-rgb) / .14); border-color: rgb(var(--gold-rgb) / .5); }

/* Confirmation / désinscription. */
.zb .carte-retour { max-width: 34rem; margin: var(--space-8) auto; padding: var(--space-7) var(--space-6); text-align: center; }
.zb .carte-retour .sceau { margin-bottom: var(--space-4); }
.zb .carte-retour h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.zb .carte-retour p { margin-top: var(--space-3); color: var(--mist); }
.zb .carte-retour .hero-actions { justify-content: center; margin-top: var(--space-5); }

/* ---------- Centre d'aide -------------------------------------------------- */
.zb .rubriques-aide { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-4); }
.zb .rubrique-aide { display: flex; flex-direction: column; gap: var(--space-4); }
.zb .rubrique-aide h2 {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--script); font-size: 1.4rem; letter-spacing: 0; line-height: 1.2;
}
.zb .rubrique-aide .ico-pastille { width: 2.5rem; height: 2.5rem; }
.zb .rubrique-aide .ico-pastille svg.ico { width: 1.2rem; height: 1.2rem; }
.zb .liens-aide { list-style: none; }
.zb .liens-aide a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: .6rem 0; border-top: 1px solid var(--veil); color: var(--moon); text-decoration: none;
}
.zb .liens-aide a svg.ico { color: var(--gold); transition: transform .2s var(--ease); }
.zb .liens-aide a:hover { color: var(--gold-bright); }
.zb .liens-aide a:hover svg.ico { transform: translateX(3px); }

/* Questions fréquentes : titre à gauche, accordéon à droite. */
.zb .split { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: var(--space-7); align-items: start; }
@media (max-width: 860px) {
  .zb .split { grid-template-columns: 1fr; gap: var(--space-5); }
}
.zb .faq { border: 1px solid var(--veil); border-radius: var(--radius); background: rgb(var(--night-rgb) / .4); }
.zb .faq details + details { border-top: 1px solid var(--veil); }
.zb .faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); list-style: none; cursor: pointer;
  font-weight: 500; color: var(--moon); transition: color .2s;
}
.zb .faq summary::-webkit-details-marker { display: none; }
.zb .faq summary:hover { color: var(--gold-bright); }
.zb .faq summary svg.ico { color: var(--gold); transition: transform .25s var(--ease); }
.zb .faq details[open] summary svg.ico { transform: rotate(45deg); }
.zb .faq details p { max-width: 65ch; padding: 0 var(--space-5) var(--space-5); color: var(--mist); }

/* Appel au support (fin d'article, fin de centre d'aide). */
.zb .appel-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.zb .appel-support h2 { font-family: var(--script); font-size: 1.5rem; letter-spacing: 0; }
.zb .appel-support p { margin-top: var(--space-1); color: var(--mist); max-width: 52ch; }
.zb .article-aide .tag { margin-top: var(--space-3); }

/* ---------- Statut du service --------------------------------------------- */
.zb .etat-global {
  display: flex; flex-direction: column; gap: .3rem;
  padding: var(--space-5) var(--space-5) var(--space-5) 2.75rem;
  background: rgb(var(--night-rgb) / .45); font-size: 1.1rem;
}
.zb .etat-global::before { top: calc(var(--space-5) + .5em); left: 1.2rem; }
.zb .etat-global strong { color: var(--moon); }
.zb .etat-global p + p { font-size: .95rem; color: var(--mist); }
.zb .composants { list-style: none; }
.zb .composants li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .85rem 0; border-top: 1px solid var(--veil); }
.zb .composants li:first-child { border-top: 0; }
.zb .etat { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; }
.zb .etat::before { content: ''; width: .6rem; height: .6rem; flex: none; }
.zb .etat-ok { color: var(--online); }
.zb .etat-ok::before { background: var(--online); border-radius: 999px; }
.zb .etat-ko { color: var(--danger); }
.zb .etat-ko::before { background: var(--danger); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- Entreprise ----------------------------------------------------- */
.page-entreprise .entreprise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; padding-top: var(--space-7); }
.page-entreprise .entreprise h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-entreprise .entreprise .lead { margin-top: var(--space-4); }
.zb .avantages { list-style: none; display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.zb .avantages li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.zb .avantages h2 { font-family: var(--script); font-size: 1.35rem; letter-spacing: 0; line-height: 1.2; }
.zb .avantages p { margin-top: .2rem; color: var(--mist); font-size: .95rem; }
.zb .formulaire-lead h2 { font-size: 1.45rem; }
.zb .formulaire-lead > p { margin: var(--space-2) 0 var(--space-5); color: var(--mist); }
@media (max-width: 900px) {
  .page-entreprise .entreprise { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-5); }
}

/* ---------- Rapport astral ------------------------------------------------- */
.zb .offres-rapport { display: flex; flex-direction: column; gap: var(--space-3); }
.zb .offre-rapport { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.zb .offre-rapport h2 { font-family: var(--script); font-size: 1.5rem; letter-spacing: 0; }
.zb .offre-rapport p { margin-top: .2rem; color: var(--mist); font-size: .92rem; }
.zb .offre-prix { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.zb .offre-prix .price { font-size: 1.6rem; line-height: 1.1; }
.zb .offre-prix .dim { font-size: .78rem; }
@media (max-width: 480px) {
  .zb .offre-rapport { flex-direction: column; align-items: flex-start; }
  .zb .offre-prix { align-items: flex-start; }
}
.zb .colonnes-2 { columns: 2; column-gap: var(--space-6); }
.zb .colonnes-2 li { break-inside: avoid; margin-bottom: var(--space-3); }
@media (max-width: 600px) {
  .zb .colonnes-2 { columns: 1; }
}
.zb .extraits { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); }
.zb .extrait h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; letter-spacing: .04em; color: var(--gold); }
.zb .extrait p { margin-top: var(--space-2); font-family: var(--script); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--moon); }
.zb .rapport-bloc + .rapport-bloc { margin-top: var(--space-8); }
.zb .rapport-bloc .section-tete { margin-bottom: var(--space-5); }
.zb .formulaire-rapport .note { margin-top: var(--space-2); font-size: .84rem; color: var(--mist-dim); }
.zb .formulaire-rapport .btn { margin-top: var(--space-4); }
.zb .mes-rapports { margin-top: var(--space-5); }
.zb .mes-rapports h3 { margin-bottom: var(--space-3); }
.zb .ligne-rapport { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .75rem 0; border-top: 1px solid var(--veil); }
.zb .ligne-rapport .dim { font-size: .84rem; }
.zb .rapport-invite { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.zb .rapport-invite p { max-width: 48ch; color: var(--mist); }

/* Relecture d'un rapport. */
.zb .rapport-lu { max-width: 48rem; }
.zb .rapport-lu header { margin-bottom: var(--space-6); }
.zb .rapport-lu h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.zb .rapport-sections { display: flex; flex-direction: column; gap: var(--space-4); }
.zb .rapport-sections h2 { font-family: var(--script); font-size: 1.5rem; letter-spacing: 0; }
.zb .rapport-sections p { margin-top: var(--space-2); max-width: 62ch; color: var(--mist); font-size: 1.05rem; line-height: 1.7; }
.zb .rapport-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Espace affilié ------------------------------------------------- */
.zb .affilie { max-width: 46rem; margin-top: var(--space-7); }
.zb .affilie h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.zb .affilie .doc-meta { margin-bottom: var(--space-5); }
.zb .affilie code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--gold-bright); }
.zb .affilie p.muted { margin-top: var(--space-3); }

@media print {
  .site-header, .site-footer, .zb .rapport-actions { display: none; }
}

/* ---------- Ajustements ---------------------------------------------------- */
.zb .bloc ul.composants { padding-left: 0; }
.zb .liste-coches.colonnes-2 { display: block; }
.zb.page-rapport .tete-charte + .container { margin-top: var(--space-6); }
@media (max-width: 600px) {
  .zb .appel-final { padding: var(--space-7) var(--space-4); }
  .zb .tete-page { padding-top: var(--space-5); }
}

/* ============================================================
   Accès et espace client : connexion, inscription, 404, tableau de bord client, messagerie (+ modules 2FA et notifications partagés)
   ============================================================ */
/* =====================================================================
   Commun aux trois familles
   ===================================================================== */
:is(.page-acces, .page-espace, .page-messages) .note { font-size: .84rem; color: var(--mist-dim); }
:is(.page-acces, .page-espace, .page-messages) .msg-erreur { color: var(--danger); }
:is(.page-acces, .page-espace, .page-messages) .msg-ok { color: var(--online); }
:is(.page-acces, .page-espace, .page-messages) .msg-alerte { color: var(--busy); }

/* Encadré d'alerte : cadre complet discret + fond teinté, jamais de barre latérale. */
:is(.page-acces, .page-espace, .page-messages) .bandeau-alerte {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid rgb(var(--danger-rgb) / .45); background: rgb(var(--danger-rgb) / .08);
  color: var(--moon); font-size: .92rem;
}
:is(.page-acces, .page-espace, .page-messages) .bandeau-alerte svg.ico { color: var(--danger); transform: translateY(.1em); }

/* Bouton-lien sans cadre (action secondaire dans un texte). */
:is(.page-acces, .page-espace, .page-messages) .lien-bouton {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--gold-bright); text-decoration: underline; text-decoration-color: rgb(var(--gold-rgb) / .45);
  text-underline-offset: .2em;
}
:is(.page-acces, .page-espace, .page-messages) .lien-bouton:hover { text-decoration-color: currentColor; }

/* =====================================================================
   Pages d'accès : connexion, inscription, confirmation, invitation, 404
   ===================================================================== */
.page-acces main { padding-block: var(--space-7) var(--space-8); }

/* Composition en deux colonnes : formulaire, puis panneau de réassurance. */
.page-acces .acces {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: var(--space-6); align-items: start; max-width: 1040px; margin-inline: auto;
}
.page-acces .acces-form { padding: var(--space-6); }
.page-acces .acces-form h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); margin-bottom: var(--space-2); }
.page-acces .acces-form .sous-titre { color: var(--mist); margin-bottom: var(--space-5); }
.page-acces .acces-form form { margin-top: var(--space-5); }
.page-acces .acces-form .btn-block { margin-top: var(--space-2); padding-block: .95rem; }
.page-acces .acces-pied {
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--veil);
  text-align: center; color: var(--mist);
}
.page-acces .acces-erreur { margin-top: var(--space-4); }
.page-acces .demo { margin-top: var(--space-4); font-size: .82rem; color: var(--mist-dim); }
.page-acces .demo code { color: var(--mist); font-size: .9em; }

/* Libellé de champ avec lien aligné à droite (« Utiliser un code de secours »). */
.page-acces .champ-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.page-acces .champ-tete label { margin-bottom: .4rem; }
.page-acces .champ-tete .lien-bouton { font-size: .82rem; }
.page-acces .optionnel { color: var(--mist-dim); font-weight: 400; }
.page-acces #mfa-code, .page-acces #mfa-recovery { font-variant-numeric: tabular-nums; letter-spacing: .18em; }

/* Panneau de réassurance : un seul cadre teinté, aucun chiffre inventé. */
.page-acces .acces-aside {
  overflow: hidden;
  position: sticky; top: calc(var(--header-h) + var(--space-5));
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-7) var(--space-6); border-radius: var(--radius);
  background:
    radial-gradient(420px 260px at 100% 0%, rgb(var(--gold-rgb) / .12), transparent 70%),
    linear-gradient(160deg, var(--plum), var(--night-800));
  border: 1px solid rgb(var(--gold-rgb) / .2);
}
.page-acces .acces-aside .pile { display: flex; flex-direction: column; gap: var(--space-5); position: relative; }
.page-acces .acces-form > .note { margin-top: var(--space-3); text-align: center; }
.page-acces .acces-aside h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.page-acces .reassurance { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.page-acces .reassurance li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--mist); font-size: .94rem; line-height: 1.5; }
.page-acces .reassurance strong { display: block; color: var(--moon); font-weight: 600; }
.page-acces .reassurance .ico-pastille { flex: none; width: 2.4rem; height: 2.4rem; }
.page-acces .reassurance .ico-pastille svg.ico { width: 1.15rem; height: 1.15rem; }
.page-acces .acces-aside .btn-lien { align-self: flex-start; position: relative; }

/* Bascule de rôle (inscription) : un contrôle segmenté, deux pilules. */
.page-acces .bascule-role {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem;
  border-radius: 999px; background: rgb(var(--night-rgb) / .6); border: 1px solid var(--veil-strong);
}
.page-acces .bascule-role button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--mist); font-weight: 500; font-size: .92rem; transition: background-color .2s, color .2s;
}
.page-acces .bascule-role button:hover { color: var(--moon); }
.page-acces .bascule-role button[aria-pressed="true"] { background: rgb(var(--gold-rgb) / .16); color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / .45); }

.page-acces .consentements { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgb(var(--night-rgb) / .45); border: 1px solid var(--veil); }

/* Carte centrée (confirmation d'adresse, invitation). */
.page-acces .carte-centree { max-width: 34rem; margin-inline: auto; text-align: center; padding: var(--space-7) var(--space-6); }
.page-acces .carte-centree .ico-pastille { width: 3.6rem; height: 3.6rem; margin-bottom: var(--space-4); }
.page-acces .carte-centree .ico-pastille svg.ico { width: 1.7rem; height: 1.7rem; }
.page-acces .carte-centree h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: var(--space-3); }
.page-acces .carte-centree .sous-titre { color: var(--mist); margin-bottom: var(--space-5); }
.page-acces .etat-ok .ico-pastille { color: var(--online); background: rgb(var(--online-rgb) / .1); border-color: rgb(var(--online-rgb) / .35); }
.page-acces .etat-erreur .ico-pastille { color: var(--danger); background: rgb(var(--danger-rgb) / .1); border-color: rgb(var(--danger-rgb) / .35); }
.page-acces .actions-pile { display: flex; flex-direction: column; gap: var(--space-3); max-width: 22rem; margin-inline: auto; }

/* Invitation : encart bonus. */
.page-acces .encart-bonus {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  max-width: 26rem; margin: 0 auto var(--space-5); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: rgb(var(--gold-rgb) / .08); border: 1px solid rgb(var(--gold-rgb) / .28);
}
.page-acces .encart-bonus svg.ico { color: var(--gold-bright); width: 1.4rem; height: 1.4rem; }
.page-acces .encart-bonus strong { color: var(--gold-bright); }
.page-acces .mention-pied { margin-top: var(--space-5); }
.page-acces .bandeau-info {
  max-width: 34rem; margin: 0 auto var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); text-align: center; font-size: .9rem;
  background: rgb(var(--gold-rgb) / .08); border: 1px solid rgb(var(--gold-rgb) / .22);
}
.page-acces .glow { color: var(--gold-bright); }

/* 404 : un astre éteint, deux actions, trois pistes. */
.page-acces .perdu { max-width: 44rem; margin-inline: auto; text-align: center; padding-block: var(--space-6); }
.page-acces .perdu-astre { width: 5.5rem; height: 5.5rem; margin: 0 auto var(--space-5); display: grid; place-items: center; border-radius: 999px; border: 1px dashed rgb(var(--gold-rgb) / .45); color: var(--gold); }
.page-acces .perdu-astre svg.ico { width: 2.4rem; height: 2.4rem; }
.page-acces .perdu h1 { margin-bottom: var(--space-4); }
.page-acces .perdu .lead { margin: 0 auto var(--space-6); }
.page-acces .perdu .hero-actions { justify-content: center; }
.page-acces .perdu-pistes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--veil); }

@media (max-width: 860px) {
  .page-acces main { padding-block: var(--space-5) var(--space-7); }
  .page-acces .acces { grid-template-columns: 1fr; gap: var(--space-5); }
  .page-acces .acces-form { padding: var(--space-5) var(--space-4); }
  .page-acces .acces-aside { position: static; padding: var(--space-5) var(--space-4); }
  .page-acces .carte-centree { padding: var(--space-6) var(--space-4); }
}

/* =====================================================================
   Espace client (dashboard-client.html) : densité de tableau de bord
   ===================================================================== */
.page-espace main { padding-block: var(--space-6) var(--space-7); }

/* En-tête : salutation à gauche, solde toujours visible à droite. */
.page-espace .espace-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page-espace .espace-tete h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.page-espace .espace-tete #payMode { margin-top: var(--space-1); font-size: .88rem; }
.page-espace .solde-rapide {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: .45rem .5rem .45rem 1.1rem; border-radius: 999px;
  background: rgb(var(--night-rgb) / .6); border: 1px solid var(--veil-strong);
}
.page-espace .solde-rapide .lbl { font-size: .78rem; color: var(--mist); letter-spacing: .06em; text-transform: uppercase; }
.page-espace .solde-rapide strong { font-family: var(--script); font-size: 1.45rem; font-weight: 600; color: var(--gold-bright); line-height: 1; }
.page-espace .bandeaux { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.page-espace .bandeaux:not(:has(> :not(.hidden))) { display: none; }
/* Bandeaux âge / consentement / pause : même cadre, sans lueur. */
.page-espace .bandeaux .onboarding-banner { background: rgb(var(--gold-rgb) / .07); border-color: rgb(var(--gold-rgb) / .3); padding: var(--space-4) var(--space-5); }
.page-espace .bandeaux .onboarding-banner strong { font-weight: 600; }
.page-espace .bandeaux .onboarding-banner > .between { flex: 1; }
.page-espace .bandeaux .onboarding-banner .ico-pastille { flex: none; }
.page-espace .bandeaux .onboarding-banner p { margin-top: .2rem; }

/* Corps : navigation verticale à gauche, section active à droite. */
.page-espace .espace-corps { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.page-espace .dash-nav.onglets {
  position: sticky; top: calc(var(--header-h) + var(--space-4));
  flex-direction: column; flex-wrap: nowrap; gap: 1px; margin: 0; padding: var(--space-2);
  border: 1px solid var(--veil); border-radius: var(--radius); background: rgb(var(--night-rgb) / .55);
}
.page-espace .onglets-groupe {
  display: block; padding: var(--space-3) .75rem .3rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-dim);
}
.page-espace .onglets-groupe:first-child { padding-top: var(--space-2); }
.page-espace .dash-nav.onglets button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  margin: 0; padding: .5rem .75rem; border: 0; border-radius: var(--radius-sm);
  font-size: .9rem; color: var(--mist);
  transition: background-color .15s, color .15s;
}
.page-espace .dash-nav.onglets button svg.ico { color: var(--mist-dim); transition: color .15s; }
.page-espace .dash-nav.onglets button:hover { background: var(--veil); color: var(--moon); }
.page-espace .dash-nav.onglets button.active { background: rgb(var(--gold-rgb) / .12); color: var(--gold-bright); }
.page-espace .dash-nav.onglets button.active svg.ico { color: var(--gold-bright); }

/* Une seule section à la fois. */
.page-espace .dash-section { display: none; min-width: 0; }
.page-espace .dash-section.active { display: block; animation: espace-entree .35s var(--ease); }
.page-espace .dash-section:focus-visible { outline-offset: 6px; border-radius: var(--radius-sm); }
@keyframes espace-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Titres : h2 de section compact (tableau de bord), h3 d'objet. */
.page-espace .section-title { margin: 0 0 var(--space-3); }
.page-espace h2.section-title { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.page-espace h3.section-title { font-size: 1.3rem; }
.page-espace .bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.page-espace .bloc-tete .section-title { margin: 0; }
.page-espace .intro { color: var(--mist); font-size: .94rem; max-width: var(--mesure); margin: var(--space-2) 0 var(--space-5); }
.page-espace .card { padding: var(--space-5); }
.page-espace .pile { display: flex; flex-direction: column; gap: var(--space-5); }
.page-espace .liste { display: flex; flex-direction: column; gap: var(--space-3); }
.page-espace .espace-bloc { margin-top: var(--space-7); }
.page-espace .espace-bloc-serre { margin-top: var(--space-5); }
.page-espace .espace-bloc-bas { margin-bottom: var(--space-5); }
.page-espace .espace-note { margin-top: var(--space-3); }
.page-espace .espace-sections { min-width: 0; }
.page-espace .inactif { pointer-events: none; opacity: .5; }
.page-espace .badges:empty { display: none; }
.page-espace button.solde-rapide { cursor: pointer; color: var(--moon); font: inherit; transition: border-color .2s; }
.page-espace button.solde-rapide:hover { border-color: rgb(var(--gold-rgb) / .45); }
.page-espace .solde-rapide svg.ico { color: var(--gold); }
.page-espace .ligne-corps > p { margin: 0; }

/* Grilles à deux colonnes, repliées sous 1100 px (la nav prend déjà sa place). */
.page-espace .grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.page-espace .grille-2.asym { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.page-espace .grille-2.asym-inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.page-espace .grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--space-4); }

/* Formulaires compacts. */
.page-espace .form-pile { display: flex; flex-direction: column; gap: var(--space-4); }
.page-espace .form-pile .field, .page-espace .form-ligne .field { margin: 0; }
.page-espace .form-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.page-espace .form-ligne .grandit { flex: 1 1 12rem; min-width: 0; }
.page-espace .champ-court { max-width: 7rem; }
.page-espace .champ-moyen { max-width: 12rem; }
.page-espace .form-pile > .btn, .page-espace .aligne-debut { align-self: flex-start; }
.page-espace .optionnel { color: var(--mist-dim); font-weight: 400; }
.page-espace .code-saisie { letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.page-espace .champ-aide { margin-top: .35rem; font-size: .82rem; color: var(--mist-dim); }
.page-espace .message-etat { margin-top: var(--space-3); font-size: .88rem; color: var(--mist); min-height: 1.2em; }
.page-espace .message-etat:empty { margin-top: 0; min-height: 0; }
.page-espace .groupe-radios { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.page-espace .libelle-groupe { display: block; margin-bottom: .4rem; font-size: .85rem; color: var(--mist); }

/* Actions alignées à droite, qui passent à la ligne. */
.page-espace .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.page-espace .actions-debut { justify-content: flex-start; }
.page-espace .btn-xs { padding: .3rem .7rem; font-size: .78rem; }

/* ---------- Cagnotte ---------- */
.page-espace .wallet-hero {
  text-align: left; padding: var(--space-6);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
  background:
    radial-gradient(520px 240px at 100% 0%, rgb(var(--gold-rgb) / .1), transparent 70%),
    linear-gradient(160deg, var(--plum), var(--night-800));
  border-color: rgb(var(--gold-rgb) / .24);
  box-shadow: var(--shadow);
}
.page-espace .wallet-hero .label { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .14em; color: var(--mist); }
.page-espace .wallet-hero .balance { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1.05; margin-top: var(--space-2); text-shadow: none; font-variant-numeric: tabular-nums; }
.page-espace .wallet-hero #bonusLine { margin-top: var(--space-2); font-size: .9rem; color: var(--mist); }
.page-espace .wallet-hero #bonusLine.alerte { color: var(--busy); }
.page-espace .wallet-hero .actions { align-self: flex-end; }
.page-espace .montants-rapides { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.page-espace .montants-rapides .btn { font-variant-numeric: tabular-nums; }
.page-espace .lien-charte { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--space-3); font-size: .86rem; }

/* Packs : des lignes, pas des cartes dans une carte. */
.page-espace .pack-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--veil);
}
.page-espace .pack-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.page-espace .pack-ligne:first-child { padding-top: 0; }
.page-espace .pack-prix { font-family: var(--script); font-size: 1.45rem; font-weight: 600; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.page-espace .pack-detail { display: block; font-size: .82rem; color: var(--mist-dim); }
.page-espace .pack-ligne .tag { margin-left: var(--space-2); vertical-align: .2em; }

/* Jauges : libellé et montant alignés au-dessus de la barre. */
.page-espace .jauge-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); font-size: .9rem; color: var(--mist); }
.page-espace .jauge-tete .price { font-family: var(--sans); font-weight: 600; color: var(--moon); font-variant-numeric: tabular-nums; }
.page-espace .budget-gauge { height: 10px; }
.page-espace .separateur { height: 1px; background: var(--veil); margin: var(--space-5) 0; }

/* Carte « zone sensible » (pause, suppression) : cadre danger discret. */
.page-espace .carte-sensible { border-color: rgb(var(--danger-rgb) / .3); }

/* ---------- Listes de lignes (file, rendez-vous, bloqués, forfaits, bons) ---------- */
.page-espace .ligne {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(34,25,67,.75), rgba(17,13,36,.85));
  border: 1px solid var(--veil);
}
.page-espace .ligne-corps { flex: 1 1 18rem; min-width: 0; }
.page-espace .ligne-titre { font-weight: 600; color: var(--moon); }
.page-espace .ligne-meta { margin-top: .15rem; font-size: .85rem; color: var(--mist-dim); }
.page-espace .ligne-meta strong { color: var(--mist); font-weight: 600; }
.page-espace .ligne-montant { font-family: var(--script); font-size: 1.35rem; font-weight: 600; color: var(--gold-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-espace .ligne .badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--space-2); }
.page-espace .ligne .tour { color: var(--gold-bright); }

/* Lignes plates à l'intérieur d'une carte (bons, rapports, gains). */
.page-espace .ledger-row { padding: var(--space-3) 0; }
.page-espace .ledger-row:first-child { padding-top: 0; }
.page-espace .ledger-row .amt { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-espace .ledger-row .amt:not(.plus):not(.minus) { color: var(--moon); }
.page-espace .ledger-row .lbl { color: var(--moon); }
.page-espace .ledger-row time { display: block; margin-top: .1rem; }
.page-espace .ligne-bloc { display: block; }
.page-espace .code-bon { letter-spacing: .1em; color: var(--gold-bright); font-variant-numeric: tabular-nums; }

/* Relevé : tableau aligné (date, libellé, montant). */
.page-espace .releve { padding: var(--space-2) var(--space-5); }
.page-espace .releve .ledger-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: var(--space-4); }
.page-espace .releve .ledger-row:first-child { padding-top: var(--space-3); }
.page-espace .releve .ledger-row time { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Consultations ---------- */
.page-espace .consultation-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.page-espace .consultation-tete .ligne-corps { flex: 1 1 16rem; }
.page-espace .consultation-type { color: var(--mist); font-weight: 400; }
.page-espace .consultation-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--veil); }
.page-espace .review-form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--veil-strong); }
.page-espace .review-form textarea { margin: var(--space-3) 0; }
.page-espace .stars { display: inline-flex; gap: .15rem; }
.page-espace .stars button {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 999px;
  background: none; cursor: pointer; color: var(--mist-dim); transition: color .15s;
}
.page-espace .stars button svg.ico { width: 1.5rem; height: 1.5rem; }
.page-espace .stars button.on { color: var(--gold-bright); }
.page-espace .carnet-journal { display: flex; flex-direction: column; gap: .45rem; max-height: 320px; overflow-y: auto; padding-right: .3rem; }
.page-espace .carnet-bubble { max-width: 80%; padding: .5rem .8rem; border-radius: 12px; font-size: .9rem; }
.page-espace .carnet-bubble.me { align-self: flex-end; background: rgb(var(--gold-rgb) / .16); border: 1px solid rgb(var(--gold-rgb) / .3); color: var(--moon); }
.page-espace .carnet-bubble.them { align-self: flex-start; background: var(--veil-strong); color: var(--moon); }
.page-espace .carnet-bubble .meta { display: block; font-size: .74rem; margin-bottom: .15rem; color: var(--mist); }
.page-espace .avis-a-jour { margin-bottom: var(--space-6); }
.page-espace .avis-a-jour .item + .item { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--veil); }
.page-espace .note-etoiles { display: inline-flex; gap: .1rem; vertical-align: -.15em; color: var(--gold); }

/* ---------- Parrainage ---------- */
.page-espace .ref-link {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9rem; color: var(--gold-bright);
  background: rgb(var(--night-rgb) / .6); border: 1px solid var(--veil-strong); border-radius: var(--radius-sm);
  padding: .65rem .9rem; margin: var(--space-2) 0 var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-espace .ref-code { letter-spacing: .12em; color: var(--moon); font-variant-numeric: tabular-nums; }
.page-espace .carte-parrainage {
  background:
    radial-gradient(420px 220px at 100% 0%, rgb(var(--gold-rgb) / .1), transparent 70%),
    linear-gradient(160deg, var(--plum), var(--night-800));
  border-color: rgb(var(--gold-rgb) / .22);
}

/* ---------- Votre jour ---------- */
.page-espace #mj-streak { margin: var(--space-2) 0 var(--space-5); display: flex; align-items: center; gap: .45rem; }
.page-espace #mj-streak svg.ico { color: var(--busy); }
.page-espace #mj-module:empty { display: none; }
.page-espace .carte-module { margin-bottom: var(--space-5); border-color: rgb(var(--gold-rgb) / .3); }
.page-espace .module-message { margin: 0; font-family: var(--script); font-size: 1.3rem; font-weight: 600; color: var(--moon); }
.page-espace .horo-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-espace .horo-tete h3 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.page-espace .horo-tete .signe { color: var(--gold-bright); font-size: 1.2em; }
.page-espace .rubriques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin-top: var(--space-4); }
.page-espace .rubrique-titre { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-bottom: .2rem; }
.page-espace .rubrique-titre svg.ico { color: var(--gold); }
.page-espace .rubrique p { margin: 0; }
.page-espace .rubrique-large { grid-column: 1 / -1; }
.page-espace .mot-du-jour { margin-top: var(--space-4); font-size: .9rem; color: var(--mist); }
.page-espace .mot-du-jour strong { color: var(--gold-bright); font-family: var(--script); font-size: 1.2rem; }
.page-espace .mention { margin-top: var(--space-4); font-size: .78rem; color: var(--mist-dim); }
.page-espace .rituel { display: flex; align-items: center; gap: var(--space-3); }
.page-espace .rituel .ico-pastille { flex: none; }
.page-espace .rituel .ico-pastille .signe { font-size: 1.3rem; line-height: 1; }
.page-espace .echeance { padding: var(--space-3) 0; border-bottom: 1px solid var(--veil); }
.page-espace .echeance:last-child { border-bottom: 0; padding-bottom: 0; }
.page-espace .echeance:first-child { padding-top: 0; }
.page-espace .echeance p { margin: .2rem 0 0; }
.page-espace .prediction { padding: var(--space-4) 0; border-bottom: 1px solid var(--veil); }
.page-espace .prediction:first-child { padding-top: 0; }
.page-espace .prediction:last-child { border-bottom: 0; padding-bottom: 0; }
.page-espace .prediction p { margin: var(--space-2) 0 var(--space-3); }
.page-espace #mj-favoris .etat-vide, .page-espace .carte-compacte .etat-vide { padding: var(--space-5) var(--space-4); }

/* État vide dans l'espace : plus compact que sur les pages publiques. */
.page-espace .etat-vide { padding: var(--space-6) var(--space-5); gap: var(--space-2); }
.page-espace .etat-vide svg.ico { width: 1.8rem; height: 1.8rem; color: var(--gold); }
.page-espace .etat-vide .actions { justify-content: center; margin-top: var(--space-2); }
.page-espace .chargement { color: var(--mist); font-size: .92rem; }
.page-espace .erreur-charge { color: var(--danger); font-size: .92rem; }

/* Pour vous : bandeau « pourquoi » au-dessus de la carte. */
.page-espace .pv-item { display: flex; flex-direction: column; gap: var(--space-2); }
.page-espace .pv-why { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.page-espace .reason-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; padding: .22rem .7rem; border-radius: 999px; color: var(--night-900); background: var(--gold); }

/* Compte : sécurité + données, côte à côte sous la zone à onglets. */
.page-espace .espace-compte { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--veil); }
.page-espace .espace-compte > .grille-2 > section { min-width: 0; }
.page-espace .ol-etapes { margin: 0 0 var(--space-3) 1.2rem; font-size: .9rem; line-height: 1.6; }
.page-espace .codes-secours { columns: 2; list-style: none; padding: 0; margin: 0; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .95rem; font-variant-numeric: tabular-nums; }
.page-espace .codes-secours li { padding: .15rem 0; }
.page-espace .lien-casse { word-break: break-all; }

/* Préférences de notifications. */
.page-espace .prefs-table th, .page-espace .prefs-table td { padding: .6rem .5rem; }

/* Modales locales. */
.page-espace .dc-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-5);
  background: rgb(var(--night-rgb) / .9); backdrop-filter: blur(6px);
}
.page-espace .dc-modal .card { max-width: 30rem; width: 100%; }
.page-espace .dc-modal h2 { font-size: 1.45rem; margin: 0 0 var(--space-2); }
.page-espace .dc-modal .actions { margin-top: var(--space-4); }

@media (max-width: 1100px) {
  .page-espace .grille-2, .page-espace .grille-2.asym, .page-espace .grille-2.asym-inv { grid-template-columns: 1fr; }
}
/* Sous 900 px : la navigation devient une rangée défilante sous l'en-tête. */
@media (max-width: 900px) {
  .page-espace .espace-corps { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
  .page-espace .dash-nav.onglets {
    position: sticky; top: var(--header-h); z-index: 20;
    flex-direction: row; overflow-x: auto; gap: .25rem; padding: .35rem;
    margin-inline: calc(var(--space-2) * -1); border-radius: 999px;
    background: rgb(var(--night-rgb) / .92); backdrop-filter: blur(10px);
    scroll-snap-type: x proximity;
  }
  .page-espace .onglets-groupe { display: none; }
  .page-espace .dash-nav.onglets button { width: auto; flex: none; white-space: nowrap; border-radius: 999px; padding: .45rem .85rem; scroll-snap-align: start; }
  .page-espace .dash-nav.onglets button svg.ico { display: none; }
}
@media (max-width: 600px) {
  .page-espace .card { padding: var(--space-4); }
  .page-espace .wallet-hero { padding: var(--space-5) var(--space-4); }
  .page-espace .wallet-hero .actions, .page-espace .wallet-hero .actions .btn { width: 100%; }
  .page-espace .ligne { padding: var(--space-4); }
  .page-espace .actions { justify-content: flex-start; }
  .page-espace .rubriques { grid-template-columns: 1fr; }
  .page-espace .releve { padding: var(--space-1) var(--space-4); }
  .page-espace .releve .ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: .1rem var(--space-3); }
  .page-espace .releve .ledger-row time { grid-column: 1 / -1; grid-row: 2; }
  .page-espace .solde-rapide { width: 100%; justify-content: space-between; }
  .page-espace .codes-secours { columns: 1; }
  .page-espace .prefs-table th.c, .page-espace .prefs-table td.c { width: 64px; }
}

/* =====================================================================
   Messagerie (messages.html)
   ===================================================================== */
.page-messages main { padding-block: var(--space-6) var(--space-7); }
.page-messages .messagerie-tete h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.page-messages .messagerie-tete .lead { font-size: 1rem; margin-top: var(--space-2); }
.page-messages .msg-layout { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-5); min-height: 62vh; }
.page-messages .fils { padding: var(--space-2); align-self: start; }
.page-messages .fils-titre { padding: var(--space-2) var(--space-3) var(--space-2); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-dim); }
.page-messages .liste-fils { display: flex; flex-direction: column; gap: 2px; }
.page-messages .thread {
  width: 100%; text-align: left; background: none; color: var(--moon); font: inherit;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center;
  padding: .65rem .75rem; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s;
}
.page-messages .thread:hover { background: var(--veil); }
.page-messages .thread.active { background: rgb(var(--gold-rgb) / .1); border-color: rgb(var(--gold-rgb) / .3); }
.page-messages .thread .avatar { width: 40px; height: 40px; font-size: .95rem; }
.page-messages .thread-corps { display: flex; flex-direction: column; min-width: 0; }
.page-messages .thread-nom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.page-messages .thread-nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.page-messages .thread-apercu { font-size: .82rem; color: var(--mist-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-messages .compteur {
  display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem;
  border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--night-900); background: var(--gold); font-variant-numeric: tabular-nums;
}

.page-messages .conversation { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-width: 0; }
.page-messages .conv-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--veil); }
.page-messages .conv-tete .conv-nom { font-family: var(--script); font-size: 1.4rem; font-weight: 600; letter-spacing: 0; }
.page-messages .form-pile { display: flex; flex-direction: column; gap: var(--space-3); }
.page-messages .chargement { padding: var(--space-3); color: var(--mist); font-size: .9rem; }
.page-messages .erreur-charge { padding: var(--space-3); color: var(--danger); font-size: .9rem; }
.page-messages .paid-msg .seal svg.ico { width: 1em; height: 1em; }
.page-messages .answer-form { margin-top: var(--space-2); }
.page-messages .conv-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-messages .chat-log { display: flex; flex-direction: column; gap: .6rem; padding: var(--space-4); height: 52vh; overflow-y: auto; }
.page-messages .chat-log:empty::before {
  content: 'Choisissez une conversation pour afficher vos échanges.'; margin: auto; color: var(--mist-dim); font-size: .92rem; text-align: center;
}
.page-messages .conversation:has(#convActions:not(.hidden)) .chat-log:empty::before { content: 'Aucun message pour le moment. Écrivez le premier.'; }
.page-messages .fils .note { padding: 0 var(--space-3) var(--space-3); }
.page-messages .bubble { position: relative; max-width: 72%; padding: .6rem .9rem; border-radius: 16px; word-break: break-word; line-height: 1.5; }
.page-messages .bubble.me { align-self: flex-end; border-bottom-right-radius: 4px; background: rgb(var(--gold-rgb) / .18); border: 1px solid rgb(var(--gold-rgb) / .32); color: var(--moon); }
.page-messages .bubble.them { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--veil-strong); border: 1px solid transparent; }
.page-messages .bubble .t { display: block; margin-top: .2rem; font-size: .7rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.page-messages .bubble .flag-msg {
  position: absolute; top: -.6rem; right: -.6rem; display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; padding: 0; cursor: pointer; border-radius: 999px;
  background: var(--night-600); color: var(--mist); border: 1px solid var(--veil-strong);
  opacity: 0; transition: opacity .15s;
}
.page-messages .bubble .flag-msg svg.ico { width: .9rem; height: .9rem; }
.page-messages .bubble.them:hover .flag-msg, .page-messages .bubble .flag-msg:focus-visible { opacity: 1; }
@media (hover: none) { .page-messages .bubble .flag-msg { opacity: .8; } }

/* Question payante : le sceau porte une icône, plus de glyphe décoratif. */
.page-messages .paid-wrap { max-width: 80%; }
.page-messages .paid-wrap.me { align-self: flex-end; }
.page-messages .paid-wrap.them { align-self: flex-start; }
.page-messages .paid-msg { background: rgb(var(--gold-rgb) / .06); border-color: rgb(var(--gold-rgb) / .32); }
.page-messages .paid-msg .seal { font-weight: 600; letter-spacing: .02em; }
.page-messages .paid-msg .seal::before { content: none; }
.page-messages .paid-msg .question { color: var(--moon); margin: 0 0 .5rem; }
.page-messages .paid-msg .answer { color: var(--mist); margin: .4rem 0 0; padding-top: .5rem; border-top: 1px solid var(--veil); }
.page-messages .paid-msg .t { display: block; font-size: .7rem; color: var(--mist-dim); margin-top: .45rem; }
.page-messages .paid-msg .await { font-size: .82rem; color: var(--mist); font-style: italic; margin-top: .4rem; }
.page-messages .upsell { margin-top: var(--space-3); }
.page-messages .upsell p { margin: .4rem 0 0; font-size: .8rem; color: var(--mist-dim); }

.page-messages .typing-row { min-height: 1.6rem; padding: 0 var(--space-4); display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--mist-dim); }
.page-messages .compose { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--veil); }
.page-messages .compose-tabs { display: inline-flex; align-self: flex-start; gap: .2rem; padding: .2rem; border-radius: 999px; background: rgb(var(--night-rgb) / .6); border: 1px solid var(--veil); }
.page-messages .compose-tabs .btn-sm { background: none; border-color: transparent; color: var(--mist); }
.page-messages .compose-tabs .btn-sm.active { background: rgb(var(--gold-rgb) / .16); color: var(--gold-bright); border-color: rgb(var(--gold-rgb) / .4); }
.page-messages .compose-ligne { display: flex; gap: var(--space-2); align-items: center; }
.page-messages .compose-ligne input { flex: 1; min-width: 0; }
.page-messages .paid-hint { font-size: .84rem; color: var(--mist); }
.page-messages .paid-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-messages #paidPrice { font-family: var(--sans); font-weight: 600; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.page-messages #paidPrice small { display: block; font-weight: 400; font-size: .76rem; color: var(--mist-dim); }
.page-messages .offre-pack { padding: var(--space-3) var(--space-4); }
.page-messages .offre-pack p { margin: 0; font-size: .88rem; }
.page-messages .offre-pack .btn { margin-top: var(--space-2); }
.page-messages .bloque { padding: var(--space-4); }
.page-messages .fils .etat-vide { padding: var(--space-6) var(--space-3); border: 0; }
.page-messages .fils .etat-vide svg.ico { width: 1.8rem; height: 1.8rem; color: var(--gold); }

@media (max-width: 860px) {
  .page-messages .msg-layout { grid-template-columns: 1fr; min-height: 0; }
  .page-messages .chat-log { height: 56vh; }
  .page-messages .bubble { max-width: 86%; }
  .page-messages .paid-wrap { max-width: 94%; }
}
@media (max-width: 420px) {
  .page-messages .compose-ligne .btn { padding-inline: 1rem; }
}

/* =====================================================================
   Modules partagés (montés aussi sur dashboard-pro) : stylés par leur
   racine, posée par le module lui-même, et non par la classe de page.
   ===================================================================== */
/* Cloche de notifications (en-tête, toutes pages connectées). */
.notif-item .notif-texte { flex: 1; min-width: 0; }
.notif-bell svg.ico { width: 1.25rem; height: 1.25rem; }

/* Panneau 2FA (security.js : initMfaPanel). */
.module-2fa .intro { color: var(--mist); font-size: .92rem; margin: 0 0 var(--space-4); }
.module-2fa .intro .verified-badge { margin-right: var(--space-2); }
.module-2fa .note { font-size: .82rem; color: var(--mist-dim); }
.module-2fa .message-etat { margin-top: var(--space-3); font-size: .88rem; color: var(--mist); }
.module-2fa .message-etat:empty { margin-top: 0; }
.module-2fa .msg-erreur { color: var(--danger); }
.module-2fa .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.module-2fa .bandeau-codes {
  margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm);
  background: rgb(var(--gold-rgb) / .06); border: 1px solid rgb(var(--gold-rgb) / .3);
}
.module-2fa .bandeau-codes .note { margin: .2rem 0 var(--space-3); }
.module-2fa .ol-etapes { margin: 0 0 var(--space-3) 1.2rem; font-size: .9rem; line-height: 1.6; }
.module-2fa .codes-secours { columns: 2; list-style: none; padding: 0; margin: 0; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .95rem; font-variant-numeric: tabular-nums; }
.module-2fa .codes-secours li { padding: .15rem 0; }
.module-2fa .ref-link {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9rem; color: var(--gold-bright);
  background: rgb(var(--night-rgb) / .6); border: 1px solid var(--veil-strong); border-radius: var(--radius-sm);
  padding: .6rem .9rem; margin: var(--space-2) 0; overflow-wrap: anywhere;
}
.module-2fa .selection-totale { user-select: all; }
.module-2fa .lien-casse { word-break: break-all; }
.module-2fa .form-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-3); }
.module-2fa .form-ligne .field { margin: 0; }
.module-2fa .champ-moyen { max-width: 10rem; }
.module-2fa .code-saisie { letter-spacing: .18em; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .module-2fa .codes-secours { columns: 1; } }

/* Préférences de notifications (notifs.js + push.js : renderNotifPrefs). */
.module-notifs .section-title { margin: 0 0 var(--space-3); }
.module-notifs h3.section-title { font-size: 1.3rem; }
.module-notifs .intro { color: var(--mist); font-size: .94rem; margin: var(--space-2) 0 var(--space-5); }
.module-notifs > .card + .card { margin-top: var(--space-5); }
.module-notifs .table-defile { overflow-x: auto; }
.module-notifs .note { font-size: .82rem; color: var(--mist-dim); }
.module-notifs .prefs-note { margin-top: var(--space-4); }
.module-notifs [data-push-state] { gap: var(--space-3); }
.module-notifs [data-push-state] .note { flex: 1 1 100%; }
.page-espace .card .etat-vide { border: 0; padding-block: var(--space-5); }

/* ============================================================
   Espace voyant : cabinet, inscription pro (+ modales de signalement et décisions de modération partagées)
   ============================================================ */
/* ============================================================
   CABINET DU VOYANT (dashboard-pro.html)
   Densité « espace connecté » : rythme serré, chiffres tabulaires.
   ============================================================ */

.page-cabinet main.section { padding-block: var(--space-6) var(--space-7); }

/* ---------- Tête : salutation + disponibilité ---------- */
.page-cabinet .cabinet-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: var(--space-5); margin-bottom: var(--space-6);
}
.page-cabinet .cabinet-tete h1 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.page-cabinet .cabinet-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.page-cabinet .cabinet-badges:empty { display: none; }

.page-cabinet .dispo {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius);
  background: rgb(var(--night-rgb) / .55); border: 1px solid var(--veil-strong);
}
.page-cabinet .dispo-titre { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.page-cabinet .dispo-aide { font-size: .8rem; color: var(--mist-dim); max-width: 34ch; }

/* Sélecteur de présence : trois pilules jointes, état rempli + pastille. */
.page-cabinet .seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--veil-strong); border-radius: 999px; background: rgb(var(--night-rgb) / .6); }
.page-cabinet .seg button {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--mist);
  padding: .5rem 1rem; cursor: pointer; font-size: .9rem; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.page-cabinet .seg button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.page-cabinet .seg button:hover { color: var(--moon); }
.page-cabinet .seg button.active { color: var(--night-900); font-weight: 600; }
.page-cabinet .seg button.active::before { background: var(--night-900); opacity: .8; }
.page-cabinet .seg button.active.online { background: var(--online); }
.page-cabinet .seg button.active.busy { background: var(--busy); }
.page-cabinet .seg button.active.offline { background: var(--offline); color: var(--moon); }
.page-cabinet .seg button.active.offline::before { background: var(--moon); }

/* ---------- Corps : navigation latérale + panneaux ---------- */
.page-cabinet .cabinet-corps {
  display: grid; grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: var(--space-6); align-items: start;
}
.page-cabinet .cabinet-contenu { min-width: 0; }

/* Onglets : colonne verticale groupée sur grand écran. */
.page-cabinet .dash-nav {
  position: sticky; top: calc(var(--header-h) + var(--space-4));
  flex-direction: column; flex-wrap: nowrap; gap: 2px;
  margin: 0; padding: var(--space-3); border: 1px solid var(--veil);
  border-radius: var(--radius); background: rgb(var(--night-rgb) / .45);
}
.page-cabinet .dash-nav-groupe {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist-dim); padding: var(--space-3) var(--space-3) var(--space-1);
}
.page-cabinet .dash-nav-groupe:first-child { padding-top: var(--space-1); }
.page-cabinet .dash-nav button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .5rem .75rem; margin: 0; border: 0; border-radius: 999px;
  font-size: .9rem; white-space: nowrap; color: var(--mist);
  transition: background-color .2s, color .2s;
}
.page-cabinet .dash-nav button svg.ico { color: var(--mist-dim); transition: color .2s; }
.page-cabinet .dash-nav button:hover { background: var(--veil); color: var(--moon); }
.page-cabinet .dash-nav button.active { background: rgb(var(--gold-rgb) / .12); color: var(--gold-bright); }
.page-cabinet .dash-nav button.active svg.ico { color: var(--gold); }

/* ---------- Panneaux ---------- */
.page-cabinet .panel > * + * { margin-top: var(--space-4); }
.page-cabinet .panel > .panel-tete + * { margin-top: 0; }
.page-cabinet .panel > .section-suite { margin-top: var(--space-7); }
.page-cabinet .panel:focus-visible { outline-offset: 6px; border-radius: var(--radius-sm); }
.page-cabinet .panel-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4);
}
.page-cabinet .panel h2,
.page-cabinet #rgpdTitle { font-size: clamp(1.3rem, 2.1vw, 1.65rem); }
.page-cabinet .panel-tete .lead,
.page-cabinet .panel-intro { font-size: .95rem; color: var(--mist); max-width: var(--mesure); flex-basis: 100%; }
.page-cabinet .card h3 { font-size: 1.35rem; }
.page-cabinet .card h4 { font-size: 1.1rem; margin-bottom: var(--space-2); }
/* Tête de carte : titre à gauche, action à droite. */
.page-cabinet .tete-carte { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.page-cabinet .carte-intro { color: var(--mist); font-size: .9rem; margin: var(--space-1) 0 var(--space-4); max-width: var(--mesure); }
.page-cabinet .petit { font-size: .82rem; }
.page-cabinet .note-bas { font-size: .8rem; color: var(--mist-dim); margin-top: var(--space-4); }
.page-cabinet .accent { color: var(--gold-bright); }
.page-cabinet .succes { color: var(--online); }
.page-cabinet .alerte { color: var(--busy); }
.page-cabinet .danger { color: var(--danger); }
.page-cabinet .espace-haut { margin-top: var(--space-4); }
.page-cabinet .pile-serree { display: flex; flex-direction: column; gap: var(--space-3); }
.page-cabinet .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-cabinet .btn-seul { align-self: flex-start; }
.page-cabinet .etat-vide { padding: var(--space-6) var(--space-5); }
.page-cabinet .etat-vide svg.ico { width: 1.6rem; height: 1.6rem; color: var(--gold); }
.page-cabinet .etat-vide p { color: var(--mist); }
.page-cabinet .etat-erreur { color: var(--danger); }
/* Dans une carte, l'état vide reste compact : une ligne, pas un bloc. */
.page-cabinet .card .etat-vide { flex-direction: row; justify-content: center; padding: var(--space-4) var(--space-5); }
.page-cabinet .card .etat-vide svg.ico { width: 1.25rem; height: 1.25rem; }

/* Ligne de garantie (bouclier, no pay-to-rank) : fond teinté, cadre complet. */
.page-cabinet .garantie {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: rgb(var(--gold-rgb) / .06); border: 1px solid rgb(var(--gold-rgb) / .2);
  font-size: .88rem; color: var(--mist);
}
.page-cabinet .garantie > svg.ico { color: var(--gold); margin-top: .15em; }
.page-cabinet .garantie strong { color: var(--moon); }

/* ---------- Indicateurs clés ----------
   Un seul cadre découpé en cellules, plutôt que quatre cartes identiques. */
.page-cabinet .kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min, 11rem), 1fr));
  border: 1px solid var(--veil); border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, rgba(34,25,67,.75), rgba(17,13,36,.85));
}
.page-cabinet .kpis-principal { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.page-cabinet .kpi {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  box-shadow: -1px 0 0 var(--veil), 0 -1px 0 var(--veil);
}
.page-cabinet .kpi-libelle { font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.page-cabinet .kpi-valeur {
  font-family: var(--script); font-weight: 600; font-size: 2rem; line-height: 1.1;
  color: var(--gold-bright); font-variant-numeric: tabular-nums lining-nums;
}
.page-cabinet .kpi-aide { font-size: .8rem; color: var(--mist-dim); }
.page-cabinet .kpi-principal { background: rgb(var(--gold-rgb) / .07); }
.page-cabinet .kpi-principal .kpi-valeur { font-size: clamp(2.3rem, 4vw, 3rem); }
.page-cabinet .net-pulse { animation: kpi-entree .7s var(--ease) both; }
@keyframes kpi-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Barème / barres ---------- */
.page-cabinet .paliers { margin: var(--space-3) 0 var(--space-2); }
.page-cabinet .tier-bar { grid-template-columns: minmax(10rem, max-content) 1fr 4.5rem; font-variant-numeric: tabular-nums; }
.page-cabinet .tier-bar .pct { text-align: right; font-family: var(--sans); font-weight: 600; }
.page-cabinet .tier-bar .lib { font-size: .84rem; color: var(--mist); }
.page-cabinet .sim-out { text-shadow: none; font-variant-numeric: tabular-nums; }
.page-cabinet .sim-fill { box-shadow: none; }
.page-cabinet .sim-resultat { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page-cabinet .sim-commission { text-align: right; }
.page-cabinet .sim-commission .price { color: var(--mist); font-size: 1.25rem; }
.page-cabinet .jauge-fill-alerte { background: var(--busy); }
.page-cabinet .jauge-fill-danger { background: var(--danger); }
.page-cabinet .jauge + .jauge { margin-top: var(--space-4); }
.page-cabinet .jauge .sim-bar { height: 12px; margin-top: var(--space-2); }

/* Histogrammes (barres CSS pures). */
.page-cabinet .hours-hist { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 120px; }
.page-cabinet .hours-hist .hb,
.page-cabinet .days-hist .db { background: var(--veil); border-radius: 3px 3px 0 0; min-height: 2px; }
.page-cabinet .hours-hist .hb.on,
.page-cabinet .days-hist .db.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); }
.page-cabinet .hours-axis { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: .3rem; font-size: .66rem; color: var(--mist-dim); text-align: center; font-variant-numeric: tabular-nums; }
.page-cabinet .days-hist { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: 110px; }

/* ---------- Tableaux et relevés ---------- */
.page-cabinet .tableau-defile { overflow-x: auto; }
.page-cabinet .evo-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.page-cabinet .evo-table th,
.page-cabinet .evo-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--veil); text-align: right; white-space: nowrap; }
.page-cabinet .evo-table th:first-child,
.page-cabinet .evo-table td:first-child { text-align: left; }
.page-cabinet .evo-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mist-dim); font-weight: 600; }
.page-cabinet .evo-table tbody tr:hover { background: rgb(var(--moon-rgb) / .03); }
.page-cabinet .evo-table tr:last-child td { border-bottom: 0; }
.page-cabinet .statement-row,
.page-cabinet .ledger-row { font-variant-numeric: tabular-nums; }
.page-cabinet .statement-row .net,
.page-cabinet .ledger-row .amt { font-family: var(--sans); font-weight: 600; }
.page-cabinet .statement-row .net.danger { color: var(--danger); }
.page-cabinet .sous-titre-liste { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mist-dim); margin: var(--space-5) 0 var(--space-1); }
.page-cabinet .ligne-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--veil); }
.page-cabinet .ligne-liste:last-child { border-bottom: 0; }
.page-cabinet .fiche-societe { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; font-size: .92rem; }
.page-cabinet .fiche-societe dt { color: var(--mist); }
.page-cabinet .fiche-societe dd { margin: 0; font-weight: 500; }

/* ---------- Formulaires ---------- */
.page-cabinet .form-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 160px), 1fr)); gap: 0 var(--space-4); align-items: end; }
.page-cabinet .form-grille .field { margin-bottom: var(--space-3); }
.page-cabinet .form-grille > .btn { margin-bottom: var(--space-3); }
.page-cabinet .champ-court { max-width: 11rem; }
.page-cabinet .form-en-ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
/* Champs alignés par le haut (une aide peut suivre l'un d'eux) : le bouton est
   décalé de la hauteur d'un libellé pour s'aligner sur les champs. */
.page-cabinet .form-en-ligne > .btn { margin-top: 1.76rem; }
.page-cabinet .form-en-ligne > .btn-sm { margin-top: 2.15rem; }
.page-cabinet .form-en-ligne .field { margin: 0; }
.page-cabinet .form-en-ligne .field-large { flex: 1 1 14rem; }
.page-cabinet .option-ligne { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; margin: var(--space-4) 0 0; color: var(--moon); font-size: .92rem; }
.page-cabinet .option-ligne input { width: auto; margin-top: .2rem; flex: none; }
.page-cabinet .compteur { text-align: right; }
.page-cabinet .etat-message { font-size: .85rem; margin-top: var(--space-2); min-height: 1.2em; }

/* ---------- Offres ---------- */
.page-cabinet .offre { display: flex; flex-direction: column; gap: var(--space-3); }
.page-cabinet .offre-type { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.page-cabinet .offre-type svg.ico { color: var(--gold); }
.page-cabinet .offre-prix { display: flex; align-items: center; gap: var(--space-2); }
.page-cabinet .offre-prix input { max-width: 7rem; }
.page-cabinet .badge-actif { color: var(--online); border-color: rgb(var(--online-rgb) / .4); }
.page-cabinet .badge-alerte { color: var(--gold-bright); border-color: rgb(var(--gold-rgb) / .4); }
.page-cabinet .badge-heure { color: var(--night-900); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.page-cabinet .btn-icone { padding-inline: .7rem; }

/* ---------- Listes de cartes (consultations, avis, questions, RDV) ---------- */
.page-cabinet .liste-cartes { display: flex; flex-direction: column; gap: var(--space-3); }
.page-cabinet .liste-cartes > .card { padding: var(--space-4) var(--space-5); }
.page-cabinet .meta { font-size: .8rem; color: var(--mist-dim); }
.page-cabinet .etoiles { display: inline-flex; gap: 1px; color: var(--gold); }
.page-cabinet .reponse-avis { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgb(var(--gold-rgb) / .06); border: 1px solid var(--veil); }
.page-cabinet .transcription { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--veil-strong); }
.page-cabinet .transcription-fil { display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.page-cabinet .refus-video { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid rgb(var(--danger-rgb) / .4); background: rgb(var(--danger-rgb) / .08); font-size: .88rem; }

/* ---------- Agenda ---------- */
.page-cabinet .jour-dispo { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4); }
.page-cabinet .jour-fenetres { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-cabinet .jour-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-cabinet .jour-ajout select { width: auto; padding: .45rem .7rem; font-size: .9rem; }
.page-cabinet .fenetre { gap: .5rem; font-variant-numeric: tabular-nums; }
.page-cabinet .fenetre button { display: inline-grid; place-items: center; background: none; border: 0; padding: 0; color: var(--gold-bright); cursor: pointer; }

/* ---------- Mini-CRM ---------- */
.page-cabinet .crm-outils { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.page-cabinet .crm-outils .field { flex: 1 1 18rem; max-width: 26rem; margin: 0; }
.page-cabinet .crm-export { max-width: 22rem; }
.page-cabinet .crm-item { cursor: pointer; }
.page-cabinet .crm-item:hover { border-color: rgb(var(--gold-rgb) / .3); }
.page-cabinet .crm-sheet { border-top: 1px solid var(--veil-strong); margin-top: var(--space-3); padding-top: var(--space-3); cursor: auto; }
.page-cabinet .crm-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.page-cabinet .crm-tags:empty { display: none; }
.page-cabinet .crm-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; padding: .2rem .65rem; border-radius: 999px; background: var(--veil); color: var(--mist); border: 1px solid transparent; }
.page-cabinet .crm-tag.on { background: rgb(var(--gold-rgb) / .12); color: var(--gold-bright); border-color: rgb(var(--gold-rgb) / .35); cursor: pointer; }
.page-cabinet .crm-tag.choisi { background: rgb(var(--gold-rgb) / .28); border-color: var(--gold); }
.page-cabinet .crm-tag[role="button"] { cursor: pointer; }
.page-cabinet .note-marque { color: var(--gold); }

/* ---------- Studio visibilité ---------- */
.page-cabinet .compteurs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: .92rem; color: var(--mist); }
.page-cabinet .compteurs strong { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.page-cabinet .lien-titre { font-size: .8rem; font-weight: 600; color: var(--mist); }
.page-cabinet .lien-partage {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .88rem; color: var(--gold-bright);
  background: rgb(var(--night-rgb) / .6); border: 1px solid var(--veil-strong); border-radius: var(--radius-sm);
  padding: .6rem .85rem; margin: var(--space-2) 0 var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-cabinet .score-ligne { font-size: 1.05rem; }
.page-cabinet .score-ligne strong { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.page-cabinet .leviers { margin: var(--space-2) 0 0; padding-left: 1.1rem; color: var(--mist); }

/* ---------- Support (grille 2 colonnes) ---------- */
.page-cabinet .grille-support { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

/* ---------- RGPD ---------- */
.page-cabinet .rgpd { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--veil); }
.page-cabinet .rgpd .card { max-width: 40rem; margin-top: var(--space-4); }

/* ---------- Bandeaux (onboarding, sanction, annonces) ---------- */
.page-cabinet .onboarding-banner { gap: var(--space-4); }
.page-cabinet .onboarding-banner .bandeau-titre { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.page-cabinet .onboarding-banner .bandeau-titre svg.ico { color: var(--gold); }
.page-cabinet .onboarding-banner.alerte-sanction .bandeau-titre svg.ico { color: var(--busy); }
.page-cabinet #onboardingBanner,
.page-cabinet #sanctionBanner { margin-bottom: var(--space-4); }
.page-cabinet #payoutMfaNotice { margin: var(--space-3) 0; }

/* ---------- Modales (appel entrant, suppression, recours DSA) ---------- */
.page-cabinet .incoming,
.page-cabinet .dc-modal {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: var(--space-5); background: rgb(6 4 15 / .92);
}
.page-cabinet .incoming .card,
.page-cabinet .dc-modal .card { width: 100%; max-width: 30rem; }
.page-cabinet .incoming h2,
.page-cabinet .dc-modal h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.page-cabinet .modale-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.page-cabinet .appel-entrant { text-align: center; max-width: 24rem; }
.page-cabinet .appel-entrant .modale-actions { justify-content: center; }
/* Sonnerie : un anneau qui s'élargit et s'efface (transform + opacity). */
.page-cabinet .ring2 {
  position: relative; display: grid; place-items: center;
  width: 84px; height: 84px; margin: 0 auto var(--space-4); border-radius: 50%;
  color: var(--night-900); background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}
.page-cabinet .ring2 svg.ico { width: 2rem; height: 2rem; }
.page-cabinet .ring2::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold); animation: sonnerie 1.4s var(--ease) infinite;
}
@keyframes sonnerie { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.page-cabinet .inc-crm {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4); text-align: left; font-size: .86rem;
  border: 1px solid var(--veil-strong); border-radius: var(--radius-sm);
}
.page-cabinet .inc-crm strong { display: inline-flex; align-items: center; gap: .4rem; }
.page-cabinet .inc-crm svg.ico { color: var(--gold); }

/* ---------- Modules partagés possédés par la zone ----------
   Classes propres à un module JS (préfixe unique) : elles s'appliquent quelle
   que soit la page qui importe le module, d'où l'absence de classe de page. */

/* moderation-decisions.js (cabinet voyant + espace client) */
.decision-modo { display: flex; flex-direction: column; gap: var(--space-2); }
.decision-modo + .decision-modo { margin-top: var(--space-3); }
.decision-modo h3 { font-size: 1.2rem; }
.decision-modo-note { font-size: .82rem; }
.decision-modo-recours { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--mist); }
.decision-modo-recours svg.ico { color: var(--gold); }
.decision-modo-modale { width: 100%; max-width: 35rem; }
.decision-modo-modale h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.decision-modo-modale > p { margin-bottom: var(--space-3); font-size: .9rem; }
.decision-modo-actions,
.report-modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* moderation.js : modale « Signaler » (fiche voyant, messagerie, appel) */
.report-modal {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: var(--space-5); background: rgb(var(--night-rgb) / .94);
}
.report-modal-carte { width: 100%; max-width: 29rem; text-align: left; }
.report-modal-carte h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.report-modal-carte > p.muted { font-size: .9rem; margin-bottom: var(--space-4); }

/* video-upload.js (cabinet + inscription) */
.video-etat { display: flex; align-items: center; gap: .5rem; }
.video-etat.succes { color: var(--online); }
.video-etat.refus { color: var(--danger); }
.video-apercu { display: block; width: 100%; max-width: 320px; border-radius: var(--radius-sm); margin-top: var(--space-3); }
.video-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.video-actions:empty { display: none; }

/* ---------- Repli mobile ---------- */
@media (max-width: 1000px) {
  .page-cabinet .kpis-principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-cabinet .kpis-principal .kpi-principal { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .page-cabinet .cabinet-tete { grid-template-columns: 1fr; align-items: start; gap: var(--space-4); }
  .page-cabinet .cabinet-corps { grid-template-columns: 1fr; gap: var(--space-5); }
  /* Onglets : une rangée défilante, tous visibles par glissement. */
  .page-cabinet .dash-nav {
    position: static; flex-direction: row; overflow-x: auto; gap: var(--space-1);
    padding: var(--space-2); border-radius: 999px; scrollbar-width: none;
  }
  .page-cabinet .dash-nav::-webkit-scrollbar { display: none; }
  .page-cabinet .dash-nav-groupe { display: none; }
  .page-cabinet .dash-nav button { width: auto; flex: none; padding: .5rem .9rem; }
  .page-cabinet .grille-support { grid-template-columns: 1fr; }
  .page-cabinet .jour-dispo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-cabinet .dispo { padding: var(--space-3) var(--space-4); }
  .page-cabinet .seg { display: flex; }
  .page-cabinet .seg button { flex: 1; justify-content: center; padding-inline: .5rem; font-size: .85rem; }
  .page-cabinet .kpi { padding: var(--space-3) var(--space-4); }
  .page-cabinet .kpi-valeur { font-size: 1.6rem; }
  .page-cabinet .tier-bar { grid-template-columns: 1fr auto; row-gap: .3rem; }
  .page-cabinet .tier-bar > :first-child { grid-column: 1 / -1; }
  .page-cabinet .sim-commission { text-align: left; }
  .page-cabinet .fiche-societe { grid-template-columns: 1fr; gap: 0; }
  .page-cabinet .fiche-societe dd { margin-bottom: var(--space-2); }
  .page-cabinet .card { padding: var(--space-4); }
}

/* ============================================================
   PARCOURS D'INSCRIPTION DU VOYANT (onboarding-pro.html)
   ============================================================ */
.page-onboarding-pro main.section { max-width: 46rem; padding-block: var(--space-7); }
.page-onboarding-pro .ob-tete h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.page-onboarding-pro .ob-tete .lead { margin: var(--space-3) 0 var(--space-6); }

/* Stepper : liste ordonnée sans puce, pastilles numérotées reliées. */
.page-onboarding-pro .stepper { list-style: none; margin: 0 0 var(--space-6); }
.page-onboarding-pro .step { font-size: .88rem; }
.page-onboarding-pro .step.active::before { color: var(--night-900); background: var(--gold); border-color: var(--gold); box-shadow: none; }
/* Étape faite : la pastille garde son numéro (aucun glyphe), teintée vert. */
.page-onboarding-pro .step.done::before {
  content: counter(step); color: var(--online); border-color: rgb(var(--online-rgb) / .5);
  /* Fond opaque : le trait de liaison ne doit pas traverser la pastille. */
  background: linear-gradient(rgb(var(--online-rgb) / .14), rgb(var(--online-rgb) / .14)), var(--night-700);
}
/* Encadré de charte : cadre complet discret, sans lueur intérieure. */
.page-onboarding-pro .deontology { box-shadow: none; background: rgb(var(--gold-rgb) / .05); }
.page-onboarding-pro .step.done::after,
.page-onboarding-pro .step.active::after { background: rgb(var(--gold-rgb) / .55); }
.page-onboarding-pro .step.active { font-weight: 600; }

.page-onboarding-pro .ob-panel { display: none; }
.page-onboarding-pro .ob-panel.active { display: block; animation: ob-entree .4s var(--ease) both; }
@keyframes ob-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-onboarding-pro .ob-panel > .card + .card { margin-top: var(--space-4); }
.page-onboarding-pro .card h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.page-onboarding-pro .carte-intro { color: var(--mist); margin: var(--space-2) 0 var(--space-5); }
.page-onboarding-pro .precision { font-weight: 400; color: var(--mist-dim); }
.page-onboarding-pro .form-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 var(--space-4); }
.page-onboarding-pro .champ-court { max-width: 10rem; }
.page-onboarding-pro .zone-verif { margin: var(--space-5) 0; }
.page-onboarding-pro .ob-help { font-size: .88rem; margin-top: var(--space-3); line-height: 1.5; }
.page-onboarding-pro .espace-haut { margin-top: var(--space-4); }
.page-onboarding-pro .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Société vérifiée : cadre complet teinté vert (plus de barre latérale). */
.page-onboarding-pro .adoub {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
  border: 1px solid rgb(var(--online-rgb) / .4); background: rgb(var(--online-rgb) / .07);
}
.page-onboarding-pro .adoub h3 { display: flex; align-items: center; gap: .5rem; color: var(--online); margin-bottom: var(--space-2); font-size: 1.25rem; }
.page-onboarding-pro .adoub dl,
.page-onboarding-pro .recap dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; font-size: .92rem; }
.page-onboarding-pro .adoub dt,
.page-onboarding-pro .recap dt { color: var(--mist); }
.page-onboarding-pro .adoub dd,
.page-onboarding-pro .recap dd { margin: 0; }
.page-onboarding-pro .adoub p { font-size: .88rem; color: var(--mist); }
.page-onboarding-pro .recap { margin-bottom: var(--space-5); }

/* Bascule « passer en ligne ». */
.page-onboarding-pro .go-toggle {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
  border: 1px solid var(--veil-strong); background: rgb(var(--night-rgb) / .5);
}
.page-onboarding-pro .go-toggle > div { flex: 1 1 16rem; }
.page-onboarding-pro .go-toggle.ready { border-color: rgb(var(--online-rgb) / .5); background: rgb(var(--online-rgb) / .06); }
.page-onboarding-pro .go-hint { font-size: .88rem; margin-top: var(--space-1); color: var(--mist); }
.page-onboarding-pro .lien-plus-tard { display: inline-block; margin-top: var(--space-4); font-size: .88rem; color: var(--mist); text-decoration: underline; text-decoration-color: var(--veil-strong); }

.page-onboarding-pro .ob-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }

@media (max-width: 560px) {
  .page-onboarding-pro .card { padding: var(--space-5) var(--space-4); }
  .page-onboarding-pro .stepper { font-size: .78rem; }
  .page-onboarding-pro .adoub dl,
  .page-onboarding-pro .recap dl { grid-template-columns: 1fr; gap: 0; }
  .page-onboarding-pro .adoub dd,
  .page-onboarding-pro .recap dd { margin-bottom: var(--space-2); }
  .page-onboarding-pro .ob-nav .btn { flex: 1 1 100%; }
}

/* ============================================================
   Consultation en direct et console d'administration
   ============================================================ */
/* ============================================================
   CONSULTATION EN DIRECT (call.html)
   Principe : l'argent visible et jamais subi. Le HUD reste lisible à tout
   instant, les chiffres ne « dansent » pas (chasse fixe), aucun halo.
   ============================================================ */

.page-appel main.section { padding-top: var(--space-5); }

/* Scène : un seul fond, sans lueur dorée. */
.page-appel .call-stage {
  min-height: min(68vh, 720px);
  background: radial-gradient(circle at 50% 38%, var(--plum), var(--night-900) 72%);
  border-color: var(--veil-strong);
}

/* Vidéos WebRTC. */
.page-appel #remoteVideo { width: 100%; height: 100%; object-fit: cover; background: var(--night-900); position: absolute; inset: 0; }
.page-appel #localVideo {
  position: absolute; bottom: 6.5rem; right: 1rem; z-index: 2;
  width: 22%; max-width: 200px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--veil-strong);
  background: var(--night-900); box-shadow: var(--shadow);
}

/* Attente / connexion : un disque sobre et une onde qui s'éloigne
   (transform + opacity uniquement). */
.page-appel .call-overlay {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  text-align: center; padding: var(--space-5);
  background: radial-gradient(circle at 50% 40%, rgb(42 27 77 / .55), rgb(var(--night-rgb) / .96));
}
.page-appel .call-overlay h2 { margin: 0 0 var(--space-2); font-size: clamp(1.5rem, 3vw, 2rem); }
.page-appel .pulse-ring {
  position: relative; display: grid; place-items: center;
  width: 5.5rem; height: 5.5rem; margin: 0 auto var(--space-5); border-radius: 999px;
  color: var(--gold-bright); background: var(--night-800);
  border: 1px solid rgb(var(--gold-rgb) / .45);
}
.page-appel .pulse-ring svg.ico { width: 2rem; height: 2rem; }
.page-appel .pulse-ring::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgb(var(--gold-rgb) / .5);
  animation: appel-onde 2.2s var(--ease) infinite;
}
@keyframes appel-onde { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* Identité du pair + état réseau (haut gauche). */
.page-appel .peer-id {
  position: absolute; top: 1rem; left: 1rem; z-index: 2; display: flex; gap: .6rem; align-items: center;
  background: rgb(var(--night-rgb) / .78); backdrop-filter: blur(10px);
  border: 1px solid var(--veil-strong); border-radius: 999px; padding: .4rem .5rem .4rem .95rem;
}
.page-appel .peer-id .peer-name { font-family: var(--script); font-weight: 600; font-size: 1.1rem; color: var(--moon); }
.page-appel .peer-id .net { font-size: .78rem; color: var(--mist); }

/* Minutes offertes (haut centre). */
.page-appel .free-min-wrap { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; }
.page-appel .free-min-wrap small { display: block; color: var(--mist); font-size: .74rem; margin-top: .3rem; }

/* HUD de facturation : trois valeurs empilées libellé / chiffre,
   séparées par un filet. Chiffres en Outfit à chasse fixe : la valeur change
   toutes les 5 s, une fonte à chasse variable ferait sautiller le bloc. */
.page-appel .hud {
  gap: 0; padding: .55rem .4rem;
  background: rgb(var(--night-rgb) / .82);
}
.page-appel .hud > div { display: flex; flex-direction: column; padding: 0 1rem; }
.page-appel .hud > div + div { border-left: 1px solid var(--veil-strong); }
.page-appel .hud .lbl { font-size: .66rem; letter-spacing: .14em; color: var(--mist); }
.page-appel .hud .timer,
.page-appel .hud .cost,
.page-appel .hud .solde {
  font-family: var(--sans); font-weight: 600; font-size: 1.2rem; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.page-appel .hud .timer { color: var(--moon); }
.page-appel .hud .cost { color: var(--gold-bright); }
.page-appel .hud .solde { color: var(--moon); }
/* Premier gain du voyant : une seule pulsation d'opacité. */
.page-appel .hud .net-pulse { animation: appel-gain 1.6s ease-in-out 1; }
@keyframes appel-gain { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Contrôles : pilules rondes, icônes du jeu partagé. */
.page-appel .call-controls { gap: var(--space-4); z-index: 4; } /* au-dessus de l'overlay d'attente (z-index 3) : Raccrocher reste cliquable pendant la sonnerie */
.page-appel .call-controls .ctrl {
  width: 3.5rem; height: 3.5rem; padding: 0;
  background: rgb(var(--night-rgb) / .72); border-color: var(--veil-strong);
  backdrop-filter: blur(8px);
}
.page-appel .call-controls .ctrl svg.ico { width: 1.4rem; height: 1.4rem; }
.page-appel .call-controls .ctrl:hover { background: var(--night-600); border-color: rgb(var(--moon-rgb) / .3); }
.page-appel .call-controls .ctrl.off { background: rgb(var(--danger-rgb) / .18); border-color: var(--danger); color: var(--danger); }
/* Un contrôle coupé se lit aussi par la forme : icône barrée dédiée. */
.page-appel .call-controls .ctrl .ico-coupe,
.page-appel .call-controls .ctrl.off .ico-actif { display: none; }
.page-appel .call-controls .ctrl.off .ico-coupe { display: inline; }
.page-appel .call-controls .ctrl.hangup { width: 4rem; height: 4rem; background: #b23b53; border-color: transparent; color: #fff; }
.page-appel .call-controls .ctrl.hangup:hover { background: #c4455f; }

/* Tirage partagé (vignette haut droit). */
.page-appel #tirageThumb {
  position: absolute; top: 5rem; right: 1rem; z-index: 2; width: 24%; max-width: 170px;
  border-radius: var(--radius-sm); border: 1px solid var(--veil-strong); cursor: pointer; box-shadow: var(--shadow);
}
.page-appel .tirage-plein { max-width: 92vw; max-height: 92vh; text-align: center; }
.page-appel .tirage-plein img { max-width: 92vw; max-height: 80vh; border-radius: var(--radius-sm); }
.page-appel .tirage-plein .btn { margin-top: var(--space-4); }

/* Consultation écrite. */
.page-appel .chat-stage { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.page-appel .chat-net { align-self: flex-start; margin-bottom: var(--space-2); color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.page-appel .chat-cout { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-2) var(--space-4); border: 1px solid var(--veil-strong); border-radius: var(--radius-sm); font-size: .84rem; color: var(--mist); }
.page-appel .chat-tete { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.page-appel .chat-cout strong { color: var(--moon); font-weight: 600; }
.page-appel .chat-cout.hidden { display: none; }
.page-appel .chat-log { height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; padding: var(--space-4) var(--space-2); }
.page-appel .chat-form { margin-top: var(--space-2); }
.page-appel .chat-form input { flex: 1; min-width: 0; }
.page-appel .bubble { max-width: 75%; padding: .6rem .95rem; border-radius: 14px; font-size: .95rem; overflow-wrap: anywhere; }
.page-appel .bubble.me { align-self: flex-end; background: var(--gold); color: var(--night-900); border-bottom-right-radius: 4px; }
.page-appel .bubble.them { align-self: flex-start; background: var(--veil-strong); color: var(--moon); border-bottom-left-radius: 4px; }
.page-appel img.bubble { max-width: 60%; padding: 0; cursor: pointer; }
.page-appel .chat-mention { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .8rem; margin-top: var(--space-3); }

/* Bandeaux d'état (grâce, pause, incident) et de déconnexion : dans le flux,
   au-dessus de la scène. Jamais posés sur le HUD : l'argent reste lisible.
   Cadre complet teinté, jamais de lueur. */
.page-appel .appel-bandeaux { display: flex; flex-direction: column; gap: var(--space-2); }
.page-appel .appel-bandeaux:has(> :not(.hidden)) { margin-bottom: var(--space-3); }
.page-appel #stateBanner,
.page-appel #dcBanner {
  padding: .7rem 1.15rem; font-size: .92rem; text-align: center;
  border-radius: var(--radius-sm); color: var(--moon);
  animation: slideUp .3s var(--ease);
}
.page-appel #stateBanner { background: rgb(var(--busy-rgb) / .1); border: 1px solid rgb(var(--busy-rgb) / .55); }
.page-appel #dcBanner {
  background: rgb(var(--danger-rgb) / .1); border: 1px solid rgb(var(--danger-rgb) / .55);
  display: flex; gap: .4rem 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
}

/* Panneaux non bloquants (repli téléphone, prolonger) : rangée sous la scène.
   Quand l'un d'eux est ouvert, la scène se resserre pour que scène, contrôles
   et panneau tiennent ensemble dans l'écran. */
.page-appel .appel-panneaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 36rem)); justify-content: center; gap: var(--space-3); }
.page-appel .appel-panneaux:has(> :not(.hidden)) { margin-top: var(--space-4); }
.page-appel main:has(.appel-panneaux > :not(.hidden)) .call-stage { min-height: min(54vh, 560px); }
.page-appel .appel-panneaux > .card { padding: var(--space-4) var(--space-5); animation: slideUp .3s var(--ease); }
.page-appel #extendPanel { text-align: center; }
.page-appel .panneau-titre { margin: 0 0 .2rem; }
.page-appel .panneau-texte { margin: .2rem 0 .8rem; font-size: .9rem; }
.page-appel .montants { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.page-appel .note-fine { font-size: .8rem; margin-top: var(--space-3); }
.page-appel .lien-discret { font-size: .82rem; }

/* Repli téléphone (sous la scène). */
.page-appel .repli-pstn { border-color: rgb(var(--gold-rgb) / .3); }
.page-appel .repli-pstn p { display: flex; gap: .6rem; align-items: baseline; margin: 0 0 var(--space-3); }
.page-appel .repli-pstn p > svg.ico { color: var(--gold); transform: translateY(.15em); }
.page-appel .bandeau-rdv { display: flex; gap: .6rem; align-items: baseline; margin-bottom: var(--space-4); border-color: rgb(var(--gold-rgb) / .3); }
.page-appel .bandeau-rdv > svg.ico { color: var(--gold); transform: translateY(.15em); }

/* Modales. */
.page-appel .call-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-5);
  background: rgb(var(--night-rgb) / .94); backdrop-filter: blur(6px); overflow-y: auto;
}
.page-appel .call-modal.hidden { display: none; }
/* margin:auto = centrage « sûr » : une modale plus haute que l'écran défile
   depuis son haut au lieu d'être rognée (place-items:center la coupait). */
.page-appel .call-modal { place-items: start stretch; }
.page-appel .call-modal > * { margin: auto; }
.page-appel .call-modal > .card { max-width: 480px; width: 100%; }
.page-appel .call-modal .card.a-gauche { text-align: left; }
.page-appel .modale-titre { margin: 0 0 var(--space-3); font-size: clamp(1.35rem, 3vw, 1.7rem); }
.page-appel .modale-texte { font-size: .95rem; }
.page-appel .modale-texte strong { color: var(--moon); }
.page-appel .modale-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-5); }
.page-appel .modale-actions .btn { flex: 1 1 auto; }
.page-appel .modale-note { font-size: .82rem; margin-top: var(--space-3); display: flex; gap: .45rem; align-items: baseline; }
.page-appel .modale-note > svg.ico { color: var(--gold); transform: translateY(.15em); }
.page-appel .consent-renonce { margin: var(--space-4) 0; font-size: .9rem; }
.page-appel .field-aide { margin-top: .35rem; }
.page-appel #preflightState { font-size: .85rem; margin: var(--space-3) 0 0; min-height: 1.2rem; color: var(--mist); }
.page-appel #preflightState.err { color: var(--danger); }
.page-appel #preflightState.warn { color: var(--busy); }
.page-appel #pstnMsg { font-size: .85rem; margin: .2rem 0; }

/* Écran de fin. */
.page-appel .fin-sceau { margin: 0 auto var(--space-4); }
.page-appel .fin-titre { margin-bottom: var(--space-2); }
.page-appel .fin-note { font-size: .85rem; margin-top: .35rem; }
.page-appel .fin-note.positif { color: var(--online); }
.page-appel #sumDetail .price { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-appel #sumDetail h2.price { font-size: 2.2rem; margin-top: .1rem; }
.page-appel #sumDetail h3.price { font-size: 1.4rem; }
.page-appel .fin-bloc { margin-top: var(--space-5); }
.page-appel .fin-bloc.a-gauche { text-align: left; }
.page-appel .fin-bloc h3 { margin: .2rem 0; }
.page-appel .fin-liens { color: var(--mist); font-size: .85rem; margin-top: var(--space-3); display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; }
.page-appel .fin-liens a { display: inline-flex; align-items: center; gap: .35rem; }
.page-appel .fin-liens a.dim { color: var(--mist); }
.page-appel .fin-liens a.dim:hover { color: var(--moon); }
.page-appel .fin-retour { margin-top: var(--space-5); }
.page-appel #quickNoteText { margin-top: .3rem; }
.page-appel #quickNoteSave { margin-top: var(--space-2); }
.page-appel .rematch-sous-titre { font-size: .85rem; margin: var(--space-4) 0 var(--space-2); }
.page-appel .rematch-indice { font-size: .85rem; margin: 0 0 var(--space-2); }
.page-appel #rematchSimilaires { gap: .8rem; }
.page-appel .fin-titre-centre { text-align: center; }

/* Notation : étoiles du jeu d'icônes, cibles de 44 px. */
.page-appel .stars { display: inline-flex; gap: .15rem; cursor: pointer; margin: .4rem 0 .8rem; }
.page-appel .stars span {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px;
  color: var(--mist-dim); transition: color .15s, transform .15s var(--ease);
}
.page-appel .stars span svg.ico { width: 1.8rem; height: 1.8rem; }
.page-appel .stars span:hover { transform: scale(1.1); }
.page-appel .stars span.on { color: var(--gold-bright); }
.page-appel .notation { text-align: center; }
.page-appel #reviewSend { margin-top: var(--space-2); }
.page-appel #reviewDone { font-size: .88rem; margin-top: var(--space-3); }

@media (max-width: 760px) {
  .page-appel main.section { padding-top: var(--space-3); }
  .page-appel .call-stage { min-height: 72vh; }
  /* Panneaux : feuille basse fixe, la scène se resserre au-dessus. */
  .page-appel .appel-panneaux {
    position: fixed; left: .6rem; right: .6rem; bottom: .6rem; z-index: 90;
    display: flex; flex-direction: column; max-height: 48vh; overflow-y: auto;
  }
  .page-appel .appel-panneaux:has(> :not(.hidden)) { margin-top: 0; }
  .page-appel .appel-panneaux > .card { padding: var(--space-3) var(--space-4); background: var(--night-700); box-shadow: 0 -20px 40px -20px rgb(var(--night-rgb) / .9); }
  .page-appel main:has(.appel-panneaux > :not(.hidden)) .call-stage { min-height: 46vh; }
  .page-appel .panneau-texte { margin-bottom: .5rem; }
  .page-appel .note-fine { margin-top: .5rem; }
  .page-appel #localVideo { bottom: 5.8rem; width: 32%; }
  .page-appel .peer-id { padding: .3rem .4rem .3rem .75rem; max-width: calc(100% - 2rem); }
  .page-appel .peer-id .peer-name { font-size: 1rem; }
  /* HUD : pleine largeur sous l'identité, pour ne jamais la chevaucher. */
  .page-appel .hud { top: 3.6rem; left: .6rem; right: .6rem; justify-content: space-between; padding: .45rem .2rem; }
  .page-appel .hud > div { padding: 0 .7rem; flex: 1; }
  .page-appel .hud .timer, .page-appel .hud .cost, .page-appel .hud .solde { font-size: 1.05rem; }
  .page-appel .hud .lbl { font-size: .6rem; letter-spacing: .1em; }
  .page-appel .free-min-wrap { top: 3.6rem; width: calc(100% - 1.2rem); }
  .page-appel #tirageThumb { top: 7.6rem; width: 30%; }
  .page-appel .call-controls .ctrl { width: 3rem; height: 3rem; }
  .page-appel .call-controls .ctrl.hangup { width: 3.5rem; height: 3.5rem; }
  .page-appel .bubble { max-width: 88%; }
}

/* ============================================================
   CONSOLE D'ADMINISTRATION (admin.html + js/lot-k-admin.js)
   Outil interne dense : lisibilité et alignement avant tout.
   Aucun effet décoratif, chiffres tabulaires, titres ramenés à l'échelle
   d'un outil (le h2 de vitrine à 2,35 rem écrasait chaque bloc).
   ============================================================ */

.page-admin { padding-top: var(--space-6); }
.page-admin h1 { font-size: clamp(1.8rem, 3vw, 2.35rem); }
.page-admin h2 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 0; letter-spacing: .03em; }
.page-admin h3 { font-size: 1.2rem; margin: 0 0 var(--space-2); }
.page-admin h4 { font-size: 1.05rem; margin: 0; }
.page-admin .lead { font-size: 1rem; margin-top: var(--space-2); }
.page-admin label { font-size: .8rem; }
.page-admin code { font-size: .82rem; color: var(--mist); overflow-wrap: anywhere; }

/* Sommaire des sections : barre collée sous l'en-tête. */
.page-admin .admin-sommaire {
  position: sticky; top: var(--header-h); z-index: 30;
  margin: var(--space-5) 0 var(--space-2); padding: var(--space-2) 0;
  background: rgb(var(--night-rgb) / .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--veil);
}
.page-admin .admin-sommaire ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; }
.page-admin .admin-sommaire a {
  display: inline-block; padding: .3rem .75rem; border-radius: 999px;
  font-size: .8rem; color: var(--mist); border: 1px solid transparent; white-space: nowrap;
}
.page-admin .admin-sommaire a { text-decoration: none; }
.page-admin .admin-sommaire a:hover { color: var(--moon); border-color: var(--veil-strong); background: var(--veil); }

/* Sections. */
.page-admin .admin-section { margin-top: var(--space-5); overflow-x: auto; scroll-margin-top: calc(var(--header-h) + 5rem); }
.page-admin .admin-section-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.page-admin .admin-sous-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.page-admin .admin-sous-tete h3 { margin: 0; }
.page-admin .admin-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.page-admin .admin-intro { color: var(--mist); font-size: .85rem; max-width: 92ch; margin: 0 0 var(--space-4); }
.page-admin .admin-intro.serre { margin-bottom: var(--space-3); color: var(--mist-dim); font-size: .82rem; }
.page-admin .divider { margin: var(--space-5) 0; }

/* Formulaires. */
.page-admin .admin-form-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-bottom: var(--space-4); }
.page-admin .admin-form-pile { display: flex; flex-direction: column; gap: .75rem; max-width: 640px; }
.page-admin .admin-form-ligne .field,
.page-admin .admin-form-pile .field,
.page-admin .admin-sous-tete .field { margin: 0; }
.page-admin .admin-form-pile > .btn { align-self: flex-start; }
.page-admin input, .page-admin select, .page-admin textarea { padding: .6rem .8rem; font-size: .92rem; }
.page-admin .champ-large { flex: 1; min-width: 12rem; }
.page-admin .champ-l { min-width: 11rem; }
.page-admin .champ-m { min-width: 9rem; }
.page-admin .w-court { max-width: 8rem; }
.page-admin .w-moyen { max-width: 11rem; }
.page-admin .w-long { max-width: 17rem; }
.page-admin .w-recherche { max-width: 18rem; }
.page-admin .code-json { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .85rem; }
.page-admin .case-ligne { display: flex; align-items: center; gap: .45rem; margin: 0 .2rem .55rem; font-size: .85rem; color: var(--mist); }
.page-admin .case-ligne input { width: auto; }
.page-admin .opt { font-weight: 400; color: var(--mist-dim); }

/* Filtres de file (pilules). */
.page-admin .admin-tabs { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.page-admin .admin-tabs button {
  border: 1px solid var(--veil-strong); background: transparent; color: var(--mist);
  padding: .4rem .9rem; border-radius: 999px; cursor: pointer; font-size: .82rem;
  font-variant-numeric: tabular-nums; transition: color .2s, background-color .2s, border-color .2s;
}
.page-admin .admin-tabs button:hover { color: var(--moon); border-color: rgb(var(--moon-rgb) / .3); }
.page-admin .admin-tabs button.active { background: rgb(var(--gold-rgb) / .14); color: var(--gold-bright); border-color: rgb(var(--gold-rgb) / .45); }

/* Tableaux : chiffres tabulaires, en-têtes discrets, lignes séparées. */
.page-admin .rev-table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.page-admin .rev-table th,
.page-admin .rev-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--veil); vertical-align: top; }
.page-admin .rev-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--mist); font-weight: 600; white-space: nowrap; border-bottom-color: var(--veil-strong); }
.page-admin .rev-table tbody tr:hover td { background: rgb(var(--moon-rgb) / .025); }
.page-admin .rev-table tr:last-child td { border-bottom: none; }
.page-admin .rev-table .num { text-align: right; white-space: nowrap; }
.page-admin .rev-table .large { max-width: 20rem; }
.page-admin .rev-table .petit { font-size: .78rem; }
.page-admin .rev-table video { width: 100%; max-width: 15rem; border-radius: 8px; }

/* Pastilles d'état : couleur ET libellé (jamais la couleur seule). */
.page-admin .reason-pill {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; line-height: 1.35;
  padding: .16rem .55rem; border-radius: 999px; white-space: nowrap;
  background: var(--veil); color: var(--mist); border: 1px solid var(--veil);
}
.page-admin .reason-pill + .reason-pill { margin-left: .15rem; }
.page-admin .reason-pill.is-ok { background: rgb(var(--online-rgb) / .12); color: var(--online); border-color: rgb(var(--online-rgb) / .3); }
.page-admin .reason-pill.is-warn { background: rgb(var(--busy-rgb) / .12); color: var(--busy); border-color: rgb(var(--busy-rgb) / .32); }
.page-admin .reason-pill.is-ko { background: rgb(var(--danger-rgb) / .12); color: var(--danger); border-color: rgb(var(--danger-rgb) / .35); }
.page-admin .reason-pill.is-or { background: rgb(var(--gold-rgb) / .12); color: var(--gold-bright); border-color: rgb(var(--gold-rgb) / .32); }
.page-admin .pastilles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.page-admin .pastilles .reason-pill + .reason-pill { margin-left: 0; }
.page-admin .masked { color: var(--mist-dim); font-style: italic; font-family: var(--script); }
.page-admin .statut-ok { display: inline-flex; align-items: center; gap: .3rem; color: var(--online); }
.page-admin .statut-ko { display: inline-flex; align-items: center; gap: .3rem; color: var(--danger); }
.page-admin .texte-alerte { color: var(--danger); }
.page-admin .row-actions { display: flex; gap: .4rem; white-space: nowrap; }
.page-admin .row-actions.wrap { flex-wrap: wrap; }

/* Tuiles d'agrégats (Ops). */
.page-admin .ops-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; }
.page-admin .ops-tuile { padding: .75rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--veil); background: rgb(var(--night-rgb) / .4); }
.page-admin .ops-tuile-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--mist); margin: 0; }
.page-admin .ops-tuile-val { font-size: 1.3rem; font-weight: 600; line-height: 1.3; margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.page-admin .ops-tuile-sub { font-size: .76rem; color: var(--mist-dim); margin: .15rem 0 0; }
.page-admin .tendance { display: inline-flex; align-items: center; gap: .25rem; }
.page-admin .tendance.hausse { color: var(--gold-bright); }
.page-admin .tendance.hausse svg.ico { transform: rotate(-45deg); }
.page-admin .tendance.baisse { color: var(--mist); }
.page-admin .tendance.baisse svg.ico { transform: rotate(45deg); }

/* Blocs internes (expériences, recours, sanctions, fil support) :
   un cadre fin, pas une carte dans la carte. */
.page-admin .admin-bloc { padding: .9rem 1rem; margin-bottom: .7rem; border-radius: var(--radius-sm); border: 1px solid var(--veil-strong); background: rgb(var(--night-rgb) / .35); }
.page-admin .admin-bloc.is-equipe { background: rgb(var(--gold-rgb) / .06); border-color: rgb(var(--gold-rgb) / .22); }
.page-admin .admin-bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.page-admin .admin-bloc-meta { font-size: .78rem; color: var(--mist-dim); margin: .3rem 0 .4rem; }
.page-admin .admin-bloc p.corps { margin: 0; white-space: pre-wrap; }
.page-admin #supportDetail, .page-admin #opsReconDetail { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--veil); }

/* États vides : compacts dans un outil dense (17 files sur une page). */
.page-admin .etat-vide {
  flex-direction: row; justify-content: flex-start; text-align: left; gap: .6rem;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: var(--mist);
}
.page-admin .etat-vide p { max-width: none; margin: 0; }
.page-admin .etat-vide svg.ico { color: var(--mist-dim); }
.page-admin .etat-vide.is-ok svg.ico { color: var(--online); }
.page-admin .etat-erreur { display: flex; gap: .5rem; align-items: baseline; color: var(--danger); font-size: .9rem; }
.page-admin .etat-erreur svg.ico { transform: translateY(.15em); }
.page-admin .chargement { color: var(--mist-dim); font-size: .9rem; }

/* Formulaires inline des files (refus média, décision litige). */
.page-admin .m-reject-form { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; min-width: 14rem; }
.page-admin .claim-form { display: grid; gap: .45rem; margin-top: .5rem; min-width: 14rem; max-width: 19rem; }
.page-admin .claim-form label { font-size: .78rem; color: var(--mist); }
.page-admin .claim-form input, .page-admin .claim-form textarea { display: block; margin-top: .25rem; padding: .45rem .6rem; font-size: .85rem; }
.page-admin .claim-form .claim-err, .page-admin .m-reject-err { margin: 0; font-size: .78rem; color: var(--danger); }
.page-admin .claim-form .claim-note { margin: 0; font-size: .74rem; color: var(--mist-dim); }
.page-admin .contexte-media { font-size: .8rem; margin-top: .5rem; max-width: 18rem; color: var(--mist); }
.page-admin .contexte-media p { margin: .2rem 0 0; }
.page-admin .contexte-media .alerte { display: flex; gap: .35rem; align-items: baseline; color: var(--busy); margin: 0 0 .3rem; }

/* Barème : une ligne par palier. */
.page-admin .bareme-tier { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.page-admin .bareme-tier .bt-up { max-width: 11rem; }
.page-admin .bareme-tier .bt-rate { max-width: 5.5rem; }
.page-admin .bareme-tier .bt-del { padding: .45rem .7rem; }
.page-admin .bareme-tier span { font-size: .88rem; }
.page-admin #baremeVersions { margin-bottom: var(--space-5); }
.page-admin #affMsg { font-size: .85rem; margin: 0 0 .6rem; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .page-admin .admin-sommaire { position: static; }
  .page-admin .admin-sommaire ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  /* Tableaux en fiches : chaque cellule porte son libellé (data-label). */
  .page-admin .rev-table thead { display: none; }
  .page-admin .rev-table, .page-admin .rev-table tbody, .page-admin .rev-table tr, .page-admin .rev-table td { display: block; width: 100%; }
  .page-admin .rev-table tr { border: 1px solid var(--veil-strong); border-radius: 12px; margin-bottom: .8rem; padding: .35rem .2rem; }
  .page-admin .rev-table td { border: none; padding: .35rem .8rem; max-width: none; }
  .page-admin .rev-table .num { text-align: left; }
  .page-admin .rev-table td::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); margin-bottom: .1rem; }
  .page-admin .rev-table td[data-label=""]::before { display: none; }
  .page-admin .row-actions { flex-wrap: wrap; white-space: normal; }
  .page-admin .admin-section { overflow-x: visible; }
  .page-admin .ops-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-admin .ops-tuile-val { font-size: 1.1rem; }
  .page-admin .w-recherche, .page-admin .w-long, .page-admin .w-moyen { max-width: none; }
  .page-admin .admin-form-ligne > .field, .page-admin .champ-large, .page-admin .champ-l, .page-admin .champ-m { flex: 1 1 100%; min-width: 0; }
}

/* Utilitaires de la console. */
.page-admin .sans-marge { margin: 0; }
.page-admin .admin-tabs-bloc { display: flex; margin-bottom: var(--space-4); }
.page-admin fieldset { border: 0; padding: 0; min-width: 0; }
.page-admin fieldset legend { margin: 0 0 .4rem; padding: 0; color: var(--mist); font-size: .8rem; }
.page-admin .admin-bloc .field { margin: var(--space-3) 0; }
.page-admin .pastilles-bloc { margin-bottom: var(--space-3); }

/* ── Accessibilité transverse (WCAG 2.1 AA) ─────────────────────────────────
   Ajoutées avec l'audit d'accessibilité front. Couvrent les 44 pages (statiques
   + SSR via layout.html). */

/* 2.4.1 Contournement de blocs : lien d'évitement masqué hors focus clavier.
   Cible <main id="contenu" tabindex="-1"> (posé par layout.html et renderHeader). */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  padding: .6rem 1rem;
  background: var(--night-600); color: var(--gold-bright);
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  transition: top .2s;
}
.skip-link:focus { top: 8px; }

/* Texte réservé aux lecteurs d'écran (ex. h1 invisible d'une page d'appel). */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 1.4.1/4.1.2 : item de navigation courant, au-delà de la seule couleur. */
.nav a[aria-current="page"] { color: var(--gold-bright); }

/* 2.3.3/1.4.13 : respect de « réduire les animations » du système. Neutralise
   les animations infinies (twinkle, pulse, float, ring, typing) et le smooth-scroll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── L3 : console consultations admin (chantier décisions E2E 2026-09) ─── */
.page-admin .liste-puces { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.page-admin .liste-resultats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* ─── /L3 ─── */

/* ─── L5 : historiques et relevés (chantier décisions E2E 2026-09) ─── */
/* Lien « Reçu » inline dans une ligne de relevé nominatif (EX-REL-2). */
.lien-recu-releve {
  margin-left: .5rem;
  font-size: .82rem;
  white-space: nowrap;
}
/* Détail nominatif (client/consultation) sous un mois de relevé pro (EX-REL-2). */
.statement-detail { margin: 0 0 .6rem; }
.statement-row-detail {
  padding: .4rem 0;
  font-size: .85rem;
  color: var(--mist);
  grid-template-columns: 1fr auto auto;
}
.statement-row-detail .net { font-family: var(--sans); color: var(--mist); }

/* ─── L4 : écran de séance — tarif, alerte fin d'offert, identité du chat ────
   Décisions E2E 2026-09 (EX-SEA-1 à EX-SEA-6). Bloc ajouté en fin de fichier
   (convention du chantier) : les règles ci-dessous priment par ordre de source
   sur celles, de même spécificité, du bloc "CONSULTATION EN DIRECTE" plus haut. */

/* EX-SEA-3 : tarif figé sur l'appel, à côté de l'identité du pair. flex-wrap
   permet au badge de passer à la ligne plutôt que de déborder (3 éléments
   dans un conteneur initialement prévu pour 2). */
.page-appel .peer-id { flex-wrap: wrap; row-gap: .3rem; }
.page-appel .peer-id .tarif-badge { font-size: .78rem; color: var(--gold-bright); font-variant-numeric: tabular-nums; }

/* EX-SEA-4 : alerte non bloquante à 60 s de la fin des minutes offertes. */
.page-appel #freeEndBanner {
  padding: .7rem 1.15rem; font-size: .92rem; text-align: center;
  border-radius: var(--radius-sm); color: var(--moon);
  background: rgb(var(--gold-rgb) / .1); border: 1px solid rgb(var(--gold-rgb) / .5);
  display: flex; gap: .4rem 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
  animation: slideUp .3s var(--ease);
}
.page-appel .freeend-actions { display: flex; gap: .5rem; }

/* EX-SEA-6 : en-tête de chat nominatif (nom + badge « Nouveau client »/rang + tarif). */
.page-appel .chat-tete { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.page-appel .chat-interlocuteur { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.page-appel .chat-peer-nom { font-family: var(--script); font-weight: 600; font-size: 1.05rem; color: var(--moon); }
.page-appel .chat-badge { font-size: .72rem; }
.page-appel .chat-tarif { font-size: .82rem; color: var(--gold-bright); font-variant-numeric: tabular-nums; }

/* EX-SEA-6 : chaque bulle porte l'heure et l'auteur, dans une zone distincte
   du texte (jamais dans le flux de lecture principal). */
.page-appel .bulle-meta { display: flex; gap: .5rem; font-size: .7rem; opacity: .72; margin-bottom: .15rem; }
.page-appel .bubble.me .bulle-meta { justify-content: flex-end; }
.page-appel .bulle-heure { font-variant-numeric: tabular-nums; }

/* EX-SEA-6 : indicateur « en train d'écrire », zone d'annonce distincte du fil. */
.page-appel .chat-typing { min-height: 1.1rem; font-size: .8rem; color: var(--mist); margin: -.2rem 0 var(--space-2); }

/* EX-SEA-5 : ventilation offert/facturé sous la durée de l'écran de fin. */
.page-appel #sumVentilation { margin-top: -.3rem; font-size: .88rem; }

/* Recette 2026-10 (P3) : refus au démarrage (crédit / budget), dans l'overlay d'attente. */
.page-appel #refus { max-width: 30rem; }
.page-appel #refus .pulse-ring { margin-inline: auto; }
.page-appel #refus .modale-actions { justify-content: center; }