/* ONLY STREAM — site web.
 *
 * Mobile d'abord : tout est pensé pour un téléphone tenu à une main, puis
 * élargi (640 px : tablette, 1024 px : ordinateur). Règles tenues partout :
 *  - aucune page ne défile horizontalement ;
 *  - cibles tactiles de 44 px au moins ;
 *  - champs en 16 px : en dessous, Safari sur iPhone zoome à la saisie ;
 *  - marges des encoches (safe-area) respectées.
 * Palette reprise du bridge : nuit #0a0a12, violet #a855f7, cyan #22d3ee.
 */
:root {
  --fond: #0a0a12;
  --fond-2: #0e0e18;
  --panneau: #14141f;
  --panneau-2: #1b1b29;
  --bord: #262639;
  --bord-2: #32324a;
  --texte: #eceaf6;
  --doux: #9694ad;
  --violet: #a855f7;
  --violet-2: #7c3aed;
  --cyan: #22d3ee;
  --erreur: #ff6b6b;
  --ok: #35d07f;
  --rayon: 14px;
  --rayon-l: 20px;
  --ombre: 0 2px 6px rgba(0, 0, 0, .32), 0 18px 44px rgba(0, 0, 0, .38);
  --liseré: linear-gradient(150deg, rgba(168, 85, 247, .55), rgba(34, 211, 238, .18) 38%, transparent 68%);
  --tempo: .25s cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(168, 85, 247, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34, 211, 238, .08), transparent 60%),
    var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}
body.etroit main { max-width: 480px; }

a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #67e8f9; }
h1, h2 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 6vw, 2.8rem); }
h2 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
/* Une adresse e-mail très longue ne doit pas élargir la page. */
p, h1, h2, label { overflow-wrap: anywhere; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--bord);
  background: rgba(10, 10, 18, .85);
  backdrop-filter: blur(10px);
  /* Sur téléphone, l'en-tête passe sur deux lignes : collé en haut, il
     mangerait de la hauteur d'écran à chaque défilement. Il ne se fixe qu'à
     partir de la tablette, où il tient sur une ligne (voir plus bas). */
  position: static;
  z-index: 10;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--texte);
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
}
.marque__point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  box-shadow: 0 0 14px rgba(168, 85, 247, .7);
}
.entete__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.entete__nav a:not(.bouton), .lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--doux);
  text-decoration: none;
  font: inherit;
}
.entete__nav a:not(.bouton):hover, .lien:hover { color: var(--texte); }
.lien { background: none; border: 0; padding: 0; cursor: pointer; }
.en-ligne { display: inline; margin: 0; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--violet), var(--violet-2));
  color: #fff;
  /* Propriétés séparées : « font: … inherit » est invalide et le navigateur
     ignorerait la ligne entière (bouton en police par défaut, 13 px). */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(168, 85, 247, .8);
  transition: transform var(--tempo), box-shadow var(--tempo), background var(--tempo);
}
.bouton:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(168, 85, 247, .95); }
.bouton--petit { min-height: 44px; padding: 0 16px; font-size: .95rem; }
.bouton--plein { width: 100%; }
.bouton--fantome { background: transparent; border-color: var(--bord-2); box-shadow: none; }
.bouton--fantome:hover { border-color: var(--violet); box-shadow: none; }
.bouton--google { width: 100%; background: #fff; color: #1f1f1f; box-shadow: none; }
.bouton--google:hover { color: #1f1f1f; background: #f1f1f4; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .bouton { transition: none; }
  .bouton:hover { transform: none; }
}

/* ── Accueil ─────────────────────────────────────────────────────────── */
.heros { padding: 28px 0 32px; }
.surtitre { color: var(--cyan); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8em; }
.chapeau { color: var(--doux); font-size: 1.05rem; max-width: 62ch; }
.heros__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

.grille-trois { display: grid; grid-template-columns: 1fr; gap: 14px; }

.carte {
  position: relative;
  padding: 20px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-l);
  background: linear-gradient(180deg, var(--panneau), var(--fond-2));
  box-shadow: var(--ombre);
}
.carte h2 { margin-bottom: .4em; }
.carte p { color: var(--doux); margin: 0; }
.carte--a-venir { padding-bottom: 54px; }
.pastille {
  position: absolute;
  left: 20px;
  bottom: 18px;
  padding: 4px 10px;
  border: 1px solid var(--bord-2);
  border-radius: 999px;
  color: var(--doux);
  font-size: .78rem;
  letter-spacing: .04em;
}

/* ── Formulaires ─────────────────────────────────────────────────────── */
.panneau {
  margin-top: 12px;
  padding: 24px 18px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-l);
  background: linear-gradient(180deg, var(--panneau), var(--fond-2));
  box-shadow: var(--ombre);
}
.panneau h1 { font-size: 1.6rem; }
.formulaire { display: grid; gap: 16px; margin-top: 8px; }
.formulaire label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.aide { color: var(--doux); font-weight: 400; font-size: .85rem; }
.formulaire input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--bord-2);
  border-radius: 12px;
  background: var(--fond);
  color: var(--texte);
  font-family: inherit;
  font-size: 16px;               /* 16 px : pas de zoom forcé sur iPhone */
  line-height: 1.2;
}
.formulaire input:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 3px rgba(168, 85, 247, .25); }
.formulaire .bouton { margin-top: 4px; }

.alerte { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; font-size: .95rem; }
.alerte--erreur { border: 1px solid rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .1); color: #ffd4d4; }
.alerte--info { border: 1px solid rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .08); color: #c9f6fd; }
/* Notes flottantes (notes.js) : en bas au milieu, discrètes, éphémères. */
.notes { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 1000; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); pointer-events: none; }
.note { max-width: 560px; padding: 10px 18px; border: 1px solid rgba(34, 211, 238, .35); border-radius: 14px; background: rgba(14, 14, 24, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #d9f8fd; font-size: .9rem; text-align: center; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .85); cursor: pointer; pointer-events: auto; opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .35s var(--ressort); }
.note--visible { opacity: 1; transform: none; }
.note--erreur { border-color: rgba(255, 107, 107, .55); color: #ffd4d4; }
@media (prefers-reduced-motion: reduce) { .note { transition: opacity .2s ease; transform: none; } }

.separateur { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--doux); font-size: .85rem; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--bord); }
.bas-de-carte { margin: 18px 0 0; color: var(--doux); text-align: center; font-size: .95rem; }

.mention { margin: 16px 0 0; color: var(--doux); font-size: .85rem; text-align: center; }

/* ── Mon espace : onglets ────────────────────────────────────────────── */
/* Sur téléphone, les onglets défilent DANS leur bande (la page, elle, ne
   défile jamais de côté) ; l'onglet courant est ramené au centre par script. */
.sous-nav { margin: 0 -16px 4px; }
.sous-nav ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 4px 16px 10px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sous-nav ul::-webkit-scrollbar { display: none; }
.sous-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--panneau);
  color: var(--doux);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
.sous-nav a:hover { color: var(--texte); border-color: var(--bord-2); }
.sous-nav a[aria-current="page"] { border-color: transparent; background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; }
.compte { margin-left: 6px; padding: 2px 9px; border: 1px solid var(--bord-2); border-radius: 999px; color: var(--doux); font-size: .8rem; font-weight: 600; vertical-align: middle; }

/* « Prêt pour le live » : ce qui reste à faire saute aux yeux. */
.verifs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.verif { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); }
.verif__symbole { display: grid; place-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bord-2); color: var(--texte); font-weight: 800; font-size: .85rem; }
.verif__titre { flex: 1 1 200px; overflow-wrap: anywhere; }
.verif__lien {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--bord-2);
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}
.verif__lien:hover { border-color: var(--cyan); }
.verif--ok { opacity: .8; }
.verif--ok .verif__symbole { background: rgba(53, 208, 127, .2); color: var(--ok); }
.verif--a-faire { border-color: rgba(168, 85, 247, .55); }
.verif--a-faire .verif__symbole { background: var(--violet); }
.verif--attente .verif__symbole { background: rgba(34, 211, 238, .2); color: var(--cyan); }
.verif--attention { border-color: rgba(255, 180, 90, .5); }
.verif--attention .verif__symbole { background: rgba(255, 180, 90, .25); color: #ffc98a; }
.pret--ok { border-color: rgba(53, 208, 127, .45); }
.pret--ok h2 { color: var(--ok); }
.bloc .suite { margin: 14px 0 0; }
.etapes { margin: 16px 0; padding-left: 1.3em; color: var(--doux); }
.etapes li { margin-bottom: .6em; }
.etapes strong { color: var(--texte); }

/* ── Pendant le live : pause, « Tout arrêter », pilote ────────────────── */
.direct__boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-bottom: 12px; }
.direct__boutons .bouton { width: 100%; }
.bloc .direct__forme + .direct__forme { margin-top: 0; }
.direct--pause { border-color: rgba(255, 180, 90, .55); }
.direct--pause .direct__pause { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 10px 26px -10px rgba(34, 197, 94, .8); }
/* Préfixé par .bloc : « .carte p » (texte doux) passerait devant. */
.bloc .alerte--pause, .pilote__corps .alerte--pause { margin: 0 0 12px; border: 1px solid rgba(255, 180, 90, .5); background: rgba(255, 180, 90, .1); color: #ffe2bf; font-weight: 600; }
.bloc .alerte--pause[hidden] { display: none; }
.bloc .direct__retour { margin: 0 0 10px; color: var(--cyan); font-size: .92rem; }
.bloc .direct__retour:empty { display: none; }
/* Premier appui sur « Tout arrêter » : le bouton change de ton. */
.arme .bouton--danger { background: #fff; color: #b91c1c; box-shadow: 0 0 0 3px rgba(239, 68, 68, .6); }
.pilote__tete { padding-bottom: 12px; }
.direct__boutons--gros .bouton { min-height: 72px; font-size: 1.15rem; border-radius: 16px; }
/* La grille aligne ses boutons : pas de marge entre formulaires voisins. */
.bloc .pilote__retour-espace { margin: 8px 0 0; }
.verification { display: grid; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(168, 85, 247, .55); border-radius: 12px; background: var(--fond); }
.bloc .verification p { margin: 0; color: var(--texte); font-size: .95rem; }
.bloc .verification--ok, .ov-pop .verification--ok { color: var(--ok); border-color: rgba(53, 208, 127, .45); }
.liens-pilote { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.bloc .liens-pilote form + form { margin-top: 0; }
.regle__options { border-top: 1px solid var(--bord); padding-top: 4px; }
.regle__options summary { padding: 10px 0; color: var(--cyan); cursor: pointer; font-weight: 600; }
.regle__options .champ { max-width: 320px; }

.bloc .match-carte__texte { margin: 0; color: var(--texte); font-size: 1rem; font-variant-numeric: tabular-nums; }
.match-carte--vide .match-carte__texte { color: var(--doux); font-size: .92rem; }

/* ── Console ONLY IT ─────────────────────────────────────────────────── */
.pastille-etat { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--bord-2); color: var(--texte); vertical-align: middle; }
.pastille-etat--direct { background: rgba(53, 208, 127, .2); color: var(--ok); }
.pastille-etat--attente { background: rgba(34, 211, 238, .18); color: var(--cyan); }
.pastille-etat--erreur { background: rgba(255, 107, 107, .2); color: var(--erreur); }
.pastille-etat--attention { background: rgba(255, 180, 90, .2); color: #ffc98a; }
.admin-liste, .admin-comptes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.admin-liste li, .admin-compte { padding: 10px 12px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); overflow-wrap: anywhere; }
.admin-compte__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
.admin-compte__email { font-weight: 700; }
.admin-compte__detail { font-size: .88rem; line-height: 1.5; }
.texte-erreur { color: var(--erreur); }
.journal-admin { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.journal-admin__ligne { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; padding: 3px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.journal-admin__ligne time { color: var(--doux); }
.journal-admin__ligne--erreur { background: rgba(255, 107, 107, .1); color: #ffd4d4; }

.bloc .rejeu__etat { margin: 0 0 10px; color: var(--cyan); font-weight: 600; }
.bloc .rejeu__etat:empty { display: none; }

/* ── Bilans ──────────────────────────────────────────────────────────── */
.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; margin: 14px 0; }
.chiffre { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); }
.chiffre__valeur { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.chiffre__libelle { color: var(--doux); font-size: .85rem; }
.evolution { font-size: .82rem; font-weight: 700; color: var(--doux); }
.evolution--hausse { color: var(--ok); }
.evolution--baisse { color: var(--erreur); }
.bloc .bilan__matchs { margin: 0 0 8px; color: var(--texte); }
.top-bilan, .fideles { display: grid; gap: 6px; margin: 0; padding-left: 1.4em; }
.top-bilan li { padding: 4px 0; }
.top-bilan li span + span { margin-left: 10px; color: var(--doux); }
.fideles li { padding: 6px 0; border-bottom: 1px solid var(--bord); }
.fideles__nom { display: block; overflow-wrap: anywhere; }
.fideles__detail { color: var(--doux); font-size: .88rem; }
.historique { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.historique li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); font-size: .92rem; }
.historique__date { font-weight: 700; min-width: 5em; }
.vider-fidelite { margin-top: 14px; }

/* ── Tableau de bord ─────────────────────────────────────────────────── */
.bandeau { padding: 12px 0 24px; }
.espace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bloc h2 { margin-bottom: .7em; }
.bloc h3 { margin: 1.5em 0 .6em; color: var(--doux); font-size: .95rem; font-weight: 600; }
.bloc form + form { margin-top: 14px; }
.bloc .doux { margin: 0 0 12px; }

/* Champ + bouton sur une ligne, même sur un téléphone de 320 px. */
.champ-bouton { display: flex; align-items: stretch; gap: 8px; }
.champ-bouton > :first-child { flex: 1; min-width: 0; }
.formulaire--ligne { gap: 8px; }
.formulaire--ligne label { font-weight: 600; font-size: .95rem; }

.champ-arobase {
  display: flex;
  align-items: center;
  padding-left: 12px;
  border: 1px solid var(--bord-2);
  border-radius: 12px;
  background: var(--fond);
  color: var(--doux);
}
.champ-arobase:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(168, 85, 247, .25); }
.formulaire .champ-arobase input { min-height: 46px; padding-left: 4px; border: 0; background: transparent; box-shadow: none; }

.champ-copie {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--bord-2);
  border-radius: 12px;
  background: var(--fond);
  color: var(--texte);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 16px;               /* 16 px : pas de zoom forcé sur iPhone */
}

/* État de l'écoute : pastille de couleur + phrase. Préfixé par .bloc pour
   passer devant « .carte p » (couleur et marges des paragraphes de carte). */
.bloc .etat-live {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--fond);
  color: var(--texte);
  font-size: .95rem;
}
.etat-live::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: .45em;
  border-radius: 50%;
  background: var(--doux);
}
.etat-live--attente::before { background: var(--cyan); }
.etat-live--direct::before { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.etat-live--erreur::before { background: var(--erreur); }
.bloc .ecrans { margin: 10px 0 0; font-size: .9rem; }

.derniers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.derniers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--fond);
  font-size: .92rem;
}
.derniers__qui { font-weight: 600; overflow-wrap: anywhere; }
.derniers__quoi { grid-column: 1; color: var(--doux); overflow-wrap: anywhere; }
.derniers time { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--doux); font-size: .85rem; }
.derniers li.vide { display: block; color: var(--doux); }

.aide-logiciel { margin: 8px 0 14px; font-size: .92rem; }
.aide-logiciel summary { padding: 10px 0; color: var(--cyan); cursor: pointer; }
.aide-logiciel ul { margin: 0; padding-left: 1.2em; color: var(--doux); }
.aide-logiciel li { margin-bottom: .5em; }

.volume { gap: 10px; }
.curseur { display: flex; align-items: center; gap: 12px; }
/* Jauges cyan (éditeur : positions, tailles, rotations) : la piste se
   remplit jusqu'au curseur (--p, posé par editeur.js). */
.jauge { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.formulaire .jauge input[type="range"], .jauge input[type="range"] { flex: 1 1 auto; min-width: 0; height: 6px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; box-shadow: none; -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, var(--cyan) var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); cursor: pointer; }
.jauge input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .18), 0 2px 8px rgba(0, 0, 0, .5); }
.jauge input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.jauge input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.formulaire .jauge input[type="range"]:focus { box-shadow: none; }
.jauge input[type="range"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
.jauge__valeur { flex: none; min-width: 4.6em; color: var(--cyan); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; }
.formulaire .curseur input[type="range"] { flex: 1; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--violet); }
.curseur output { min-width: 3ch; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.changer-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--bord); }
.changer-adresse .lien, .lien--danger { color: var(--erreur); }

/* ── Animations ─────────────────────────────────────────────────────── */
.import { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.depot {
  position: relative;
  display: grid;
  flex: 1 1 100%;
  gap: 4px;
  place-items: center;
  min-height: 140px;
  padding: 20px;
  border: 2px dashed var(--bord-2);
  border-radius: 16px;
  background: var(--fond);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo);
}
.depot:hover, .depot--survol { border-color: var(--violet); background: rgba(168, 85, 247, .08); }
.depot:focus-within { border-color: var(--cyan); }
.depot--occupe { cursor: progress; opacity: .7; }
.depot__titre { font-weight: 700; font-size: 1.05rem; }
.depot__aide { color: var(--doux); font-size: .9rem; }
/* Le vrai champ reste dans la zone (clavier, lecteurs d'écran) sans la couvrir. */
.depot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.import progress { flex: 1 1 100%; height: 10px; accent-color: var(--violet); }
.bloc .import-etat { flex: 1 1 100%; margin: 0; font-size: .9rem; }
.bloc .import-etat:empty { display: none; }

.animations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.animation { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); }
/* Damier derrière l'aperçu : on voit tout de suite si la transparence tient. */
.animation__apercu {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: repeating-conic-gradient(#2a2a3a 0 25%, #1b1b29 0 50%) 0 0 / 20px 20px;
}
.animation__apercu--vide { opacity: .5; }
.animation__apercu--son { display: grid; place-content: center; gap: 14px; padding: 12px; color: var(--cyan); font-size: 3rem; text-align: center; }
.animation__apercu--son audio { width: 100%; max-width: 220px; }
.animation__corps { display: grid; gap: 6px; padding: 12px; }
.animation__nom { overflow-wrap: anywhere; }
.animation__statut { color: var(--doux); font-size: .85rem; }
.animation__statut--attente { color: var(--cyan); }
.animation__statut--erreur { color: var(--erreur); }
.bloc .animation__alerte { margin: 0; color: #ffd4a8; font-size: .85rem; }
.animation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bloc .animation__quand { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.animation__volume { color: var(--doux); font-size: .82rem; }
.animation__actions .bouton { text-decoration: none; }

/* Inventaire (page Animations) et page d'édition d'une animation. */
.inventaire__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.inventaire__actions .bouton { text-decoration: none; }
.bloc .inventaire__sous-titre { margin: 22px 0 10px; font-size: 1rem; }
.regle__params .champ--large { grid-column: 1 / -1; display: grid; gap: 8px; }
.editeur-animation__media { display: grid; gap: 10px; align-content: start; }
.animation__apercu.editeur-animation__apercu { height: 360px; border-radius: 12px; }
.volume-animation { display: grid; gap: 10px; margin: 6px 0 0; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 12px; }
.volume-animation legend { padding: 0 6px; font-weight: 700; }
.volume-animation .curseur input[type="range"] { flex: 1; min-height: 44px; accent-color: var(--violet); }
.curseur--defaut { opacity: .5; }
.creation__liens .bouton { text-decoration: none; }
.animation__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
/* Désactivée : l'aperçu pâlit, l'interrupteur reste net. */
.animation--desactivee .animation__apercu, .animation--desactivee .animation__nom, .animation--desactivee .animation__quand { opacity: .45; }
.bloc .interrupteur { margin: 0; }
.interrupteur__bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--texte); font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.interrupteur__piste { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--bord-2); transition: background var(--tempo); }
.interrupteur__bille { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--tempo); }
.interrupteur__bouton[aria-checked="true"] .interrupteur__piste { background: var(--ok); }
.interrupteur__bouton[aria-checked="true"] .interrupteur__bille { transform: translateX(16px); }
.interrupteur__bouton[aria-checked="false"] .interrupteur__texte { color: var(--doux); }
.interrupteur__bouton:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
.interrupteur__bouton:disabled { cursor: progress; opacity: .7; }

/* Espace du compte (1 Go) : une phrase et une jauge. */
.espace-compte { display: grid; gap: 6px; margin: 4px 0 6px; }
.bloc .espace-compte__texte { margin: 0; color: var(--doux); font-size: .9rem; }
.espace-compte__texte strong { color: var(--texte); }
.espace-compte__jauge { width: 100%; height: 10px; accent-color: var(--cyan); }
.espace-compte__jauge--plein { accent-color: var(--erreur); }
.import.regle { display: grid; align-items: stretch; }
.bloc p.regle__titre { margin: 0; color: var(--texte); }
.champ-volume input { max-width: 10em; }

/* Animations du PC, jouées par OBS. */
.bloc .etat-obs { margin: 0; padding: 10px 12px; border: 1px solid var(--bord-2); border-left-width: 4px; border-radius: 12px; background: var(--fond); font-weight: 600; }
.etat-obs--ok { border-left-color: var(--ok); color: var(--ok); }
.bloc .formulaire + .etat-obs { margin-top: 14px; }
.etat-obs--attention { border-left-color: #ffb45a; color: #ffc98a; }
.etat-obs--a-faire { border-left-color: var(--violet); }
.relier-obs { border-top: 1px solid var(--bord); padding-top: 4px; }
.relier-obs summary { padding: 10px 0; color: var(--cyan); cursor: pointer; font-weight: 600; }
.relier-obs .etapes { margin-top: 4px; }
.relier-obs .etapes .champ, .relier-obs .etapes .champ-bouton { margin-top: 8px; }
.relier-obs input[type="password"], .ov-obs input[type="password"], .kit-obs__mdp input[type="password"] { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font-family: inherit; font-size: 16px; line-height: 1.2; }
.relier-obs input[type="password"]:focus, .ov-obs input[type="password"]:focus, .kit-obs__mdp input[type="password"]:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 3px rgba(168, 85, 247, .25); }
.relier-obs .etapes .champ label { display: block; margin-bottom: 6px; color: var(--texte); font-weight: 600; font-size: .95rem; }
.ajouter-locale { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px 14px; align-items: end; }
.locales { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.locale { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); }
.locale__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.locale.animation--desactivee .locale__nom, .locale.animation--desactivee .locale__source, .locale.animation--desactivee .animation__quand { opacity: .45; }
.locale__nom { font-weight: 700; overflow-wrap: anywhere; }
.locale__source { color: var(--doux); font-size: .85rem; overflow-wrap: anywhere; }
.locale__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.locale__actions .bouton { text-decoration: none; }
.bloc .locale__actions form, .bloc .locale__actions form + form { margin: 0; }
.bloc .locale__actions .locale__retirer { margin-left: auto; }
.locale__actions .locale__retirer .bouton-corbeille { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-radius: 10px; }
.bloc .pilote__aide-pc { margin: 10px 0 0; font-size: .85rem; }

/* ── Déclencheurs ───────────────────────────────────────────────────── */
.regles { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.regles li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--fond);
}
.regle__quand { overflow-wrap: anywhere; }
.regle__fleche { color: var(--violet); }
.regle__quoi { overflow-wrap: anywhere; }
.regle__volume { color: var(--doux); font-size: .85rem; }
.regles form { margin-left: auto; }
.regle { gap: 12px; }
.regle select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--bord-2);
  border-radius: 12px;
  background: var(--fond);
  color: var(--texte);
  font-family: inherit;
  font-size: 16px;
}
.regle__etape { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); }
.formulaire .regle__titre { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; }
.regle__num { display: grid; place-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; font-size: .9rem; }
.bloc .regle__aide { margin: 0; }
.bloc .regle__aide:empty { display: none; }
.regle__params select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--panneau); color: var(--texte); font-family: inherit; font-size: 16px; }
.formulaire .regle__params input { background: var(--panneau); }
.formulaire #regle-volume { max-width: 10em; }
.regle__params { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px 14px; align-items: end; }
.regle__params .champ[hidden] { display: none; }
#regle-type, #regle-cible { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font-family: inherit; font-size: 16px; }

/* ── Créations ──────────────────────────────────────────────────────── */
.creer { gap: 8px; margin-bottom: 16px; }
.types-creations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; margin-top: 14px; }
.type-creation {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--bord-2);
  border-radius: 14px;
  background: var(--fond);
  color: var(--texte);
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tempo), transform var(--tempo);
}
.type-creation:hover { border-color: var(--violet); transform: translateY(-1px); }
.type-creation__texte { color: var(--doux); font-size: .88rem; line-height: 1.4; }
.creer select, .editeur__formulaire select, .apercu__barre select, .simulateur select, .ov-resolution select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--bord-2);
  border-radius: 12px;
  background: var(--fond);
  color: var(--texte);
  font-family: inherit;
  font-size: 16px;
}
.creations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.creation { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); }
.creation__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.creation__tete .creation__nom { flex: 1 1 8em; min-width: 0; }
.creation__nom { overflow-wrap: anywhere; }
.creation__type { color: var(--cyan); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bloc .creation__etat { margin: 0; color: var(--texte); font-size: .92rem; overflow-wrap: anywhere; }
.creation__actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Boutons côte à côte : pas l'écart vertical des formulaires empilés. */
.bloc .creation__actions form + form { margin-top: 0; }
.creation__texte input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--panneau); color: var(--texte); font-family: inherit; font-size: 16px; }
.creation__liens { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--bord); }
.creation__liens form { margin: 0; }
/* Vignette d'un widget (overlays.js) : son dessin, centré, sur damier. */
.creation__apercu { position: relative; display: block; height: 170px; overflow: hidden; border: 1px solid var(--bord); border-radius: 12px; background: repeating-conic-gradient(#20202e 0 25%, #171723 0 50%) 0 0 / 24px 24px; }
.creation__apercu:hover { border-color: rgba(34, 211, 238, .5); }
.creation__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.creation__apercu-vide { position: absolute; inset: 0; display: none; place-items: center; color: var(--doux); }
.creation__apercu-vide .icone { width: 44px; height: 44px; opacity: .6; }
.creation__apercu--vide .creation__apercu-vide { display: grid; }
.creation__ou { margin: 0; color: var(--doux); font-size: .82rem; }
.creation__supprimer { min-width: 40px; padding: 0 10px; justify-content: center; }
.creation__supprimer .icone { width: 18px; height: 18px; }

/* ── Éditeur d'une création ─────────────────────────────────────────── */
.editeur { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.apercu { padding: 14px; border: 1px solid var(--bord); border-radius: var(--rayon-l); background: linear-gradient(180deg, var(--panneau), var(--fond-2)); }
.apercu__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 600; }
.apercu__barre select { flex: 1 1 180px; width: auto; }
.apercu__refaire { margin-right: auto; }
/* 16:9 : Retour, adresse, Glisser et « ? » à gauche ; l'essai à droite. */
.editeur--paysage .apercu__refaire { margin-right: 0; }
.editeur--paysage .apercu__aide { margin-right: auto; }
.editeur--paysage .apercu__barre .copie, .ov-barre .copie { margin: 0; }
.ov-pop .aide-logiciel { margin: 12px 0 16px; }
.apercu__essai { color: var(--cyan); font-size: .85rem; font-weight: 500; }
.apercu__essai--erreur { color: var(--erreur); }
.apercu__barre select.apercu__choix-effet { flex: 0 1 180px; }
.apercu__zone { position: relative; }
.apercu__cadre--glisser { cursor: grab; }
.apercu__cadre--glisser:active { cursor: grabbing; }

/* Couleur : la pastille, son code (HEX ou RGB), le choix du format. */
.couleur { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.formulaire .couleur input[type="color"], .couleur input[type="color"] { flex: 0 0 56px; width: 56px; }
.formulaire .couleur .couleur__code, .couleur__code { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: 500 .9rem ui-monospace, Consolas, monospace; }
.couleur__code--faux { border-color: var(--erreur); }
.couleur__mode { flex: none; min-width: 52px; padding: 0 8px; border: 1px solid var(--bord-2); border-radius: 12px; background: transparent; color: var(--doux); font-family: inherit; font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .06em; cursor: pointer; }
.couleur__mode:hover { color: var(--texte); border-color: var(--cyan); }
.couleur--seule { max-width: 280px; margin-top: 8px; }

/* Widget d'un overlay 16:9 : réglages en volets repliables. */
.pli { border: 1px solid var(--bord-2); border-radius: 14px; background: rgba(14, 14, 24, .9); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.pli > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; color: var(--cyan); font-weight: 700; cursor: pointer; list-style: none; }
.pli > summary::-webkit-details-marker { display: none; }
.pli > summary::after { content: "▾"; color: var(--doux); transition: transform .2s; }
.pli[open] > summary::after { transform: rotate(180deg); }
.pli .groupe--pli { padding: 0 14px 14px; border: 0; background: none; }
.editeur__lateral { margin-top: 12px; }
.lateral-bascule { display: none; }
.apercu__format { flex: 1 1 180px; color: var(--doux); font-weight: 500; font-size: .9rem; }
.adresse-obs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.glisser-obs { cursor: grab; }
.glisser-obs:active { cursor: grabbing; }
.raccourci-ouvert { max-width: 560px; margin: 12vh auto 0; padding: 0 16px; }
.apercu__barre--bas { margin: 10px 0 0; }
/* 16:9 : la corbeille du widget en bas à gauche, sous l'aperçu. */
.apercu__supprimer { margin-right: 4px; }
.apercu__supprimer .icone { width: 20px; height: 20px; }
/* Quitter l'éditeur sans enregistrer : on demande d'abord. */
.confirmation { width: min(440px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--bord-2); border-radius: var(--rayon-l); background: var(--panneau); color: var(--texte); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.confirmation::backdrop { background: rgba(5, 5, 12, .7); backdrop-filter: blur(3px); }
.confirmation h2 { margin: 0 0 8px; font-size: 1.15rem; }
.confirmation p { margin: 0 0 18px; color: var(--doux); }
.confirmation__boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.confirmation__boutons .bouton { flex: 1 1 auto; }
/* Damier : la transparence de la source se voit tout de suite. */
.apercu__cadre {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #0b0b12;
}
/* Damier sur l'image elle-même (taille réelle, réduite avec elle) : on voit
   où elle s'arrête quand l'aperçu est plus large qu'elle. */
.apercu__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: repeating-conic-gradient(#2a2a3a 0 25%, #1b1b29 0 50%) 0 0 / 48px 48px; }
.apercu__cadre:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Sélection d'un calque dans l'aperçu : cadre, poignées d'angle (taille),
   poignée ronde (rotation). Les poignées sont assez grandes pour le doigt. */
/* Éditeur : rien n'est coupé au bord de l'image ; ce qui dépasse est
   assombri, le bord est tracé (au-delà, rien n'apparaît dans OBS). */
.apercu__scene .osw-scene { overflow: visible; }
/* Les autres widgets de l'overlay : repères, pas des cibles. */
.apercu__voisin { opacity: .28; pointer-events: none; filter: saturate(.6); }
.apercu__voisin [data-calque] { cursor: default; }
.apercu__bord { position: absolute; z-index: 2; pointer-events: none; outline: 1px dashed rgba(255, 255, 255, .4); box-shadow: 0 0 0 100vmax rgba(11, 11, 18, .65); }
.calque-selection { position: absolute; z-index: 3; border: 2px solid var(--cyan); pointer-events: none; }
.calque-selection[hidden] { display: none; }
.calque-poignee {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--fond);
  border-radius: 4px;
  background: var(--cyan);
  pointer-events: auto;
  touch-action: none;
}
.calque-poignee--nw { left: -10px; top: -10px; cursor: nwse-resize; }
.calque-poignee--ne { right: -10px; top: -10px; cursor: nesw-resize; }
.calque-poignee--sw { left: -10px; bottom: -10px; cursor: nesw-resize; }
.calque-poignee--se { right: -10px; bottom: -10px; cursor: nwse-resize; }
.calque-poignee--rotation { left: 50%; top: -38px; margin-left: -10px; border-radius: 50%; cursor: grab; }
.calque-poignee--rotation::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 18px; margin-left: -1px; background: var(--cyan); }
.ecouter { justify-self: start; }
.groupe__astuce { margin: 0 0 10px; }
.editeur__formulaire { gap: 14px; }
.groupe { margin: 0; padding: 14px; border: 1px solid var(--bord); border-radius: 14px; background: var(--panneau); }
.groupe legend { padding: 0 6px; color: var(--cyan); font-weight: 700; }
.groupe__champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }
.champ { display: grid; gap: 6px; align-content: start; }
.champ[hidden] { display: none; }
.formulaire .champ label { font-weight: 600; font-size: .9rem; }
.formulaire .champ input[type="color"] { padding: 4px; cursor: pointer; }
.champ--case { align-content: center; }
.formulaire .case { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; }
.formulaire .case input[type="checkbox"] { width: 22px; min-height: 22px; height: 22px; margin: 0; accent-color: var(--violet); }
.segments { display: grid; gap: 8px; margin-bottom: 8px; }
.segment { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.segment__supprimer { min-width: 40px; min-height: 40px; padding: 0 9px; justify-content: center; color: var(--erreur); }
.segment__supprimer:hover:not(:disabled) { border-color: var(--erreur); }
.segment__supprimer:disabled { opacity: .35; cursor: not-allowed; }
.segment__supprimer .icone { width: 18px; height: 18px; }
/* Widget vertical : sous l'aperçu, corbeille · adresse · « ? ». */
.apercu__pied .apercu__pied-obs { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 8px; }
.apercu__pied .copie { margin: 0; }
.apercu__pied .apercu__pied-obs { gap: 6px; }
.apercu__pied .apercu__pied-obs .bouton { padding: 0 10px; gap: 6px; font-size: .82rem; white-space: nowrap; }
.apercu__pied .apercu__pied-obs .icone { width: 16px; height: 16px; }
.formulaire .segment .couleur .couleur__code { flex: 0 0 7.2em; width: 7.2em; }
.formulaire .segment input[type="color"] { padding: 4px; }
.editeur__boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.raccourcis { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.raccourcis li { display: grid; gap: 4px; }
.raccourcis code { padding: 6px 8px; border: 1px solid var(--bord-2); border-radius: 8px; background: var(--fond); font-size: .8rem; overflow-wrap: anywhere; }

/* ── Simulateur ─────────────────────────────────────────────────────── */
.simulateur { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); align-items: end; }
.simulateur .champ[hidden] { display: none; }
.simulateur select, .simulateur input { width: 100%; }
.simulateur__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; grid-column: 1 / -1; }
.bloc .simulateur__etat { margin: 0; color: var(--cyan); font-size: .9rem; }
.bloc .simulateur__etat:empty { display: none; }

/* ── Mon compte ─────────────────────────────────────────────────────── */
.lecture .bloc + .bloc { margin-top: 16px; }
.infos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.infos dt { color: var(--doux); }
.infos dd { margin: 0; overflow-wrap: anywhere; }
.zone-danger { border-color: rgba(255, 107, 107, .45); }
.bouton--danger { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 10px 26px -10px rgba(239, 68, 68, .8); }
.bouton--danger:hover { box-shadow: 0 14px 30px -10px rgba(239, 68, 68, .95); }

/* ── Pages de lecture (confidentialité…) ─────────────────────────────── */
body.lecture main { max-width: 760px; }
.texte h2 { margin-top: 1.8em; font-size: 1.15rem; }
.texte ul { margin: 0 0 1em; padding-left: 1.2em; }
.texte li { margin-bottom: .6em; overflow-wrap: anywhere; }
.texte code { padding: 1px 6px; border: 1px solid var(--bord-2); border-radius: 6px; background: var(--fond); font-size: .9em; }
.maj { color: var(--doux); font-size: .9rem; }

/* ── Pied ────────────────────────────────────────────────────────────── */
.pied {
  padding: 20px 16px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--bord);
  color: var(--doux);
  font-size: .85rem;
  text-align: center;
}

/* ── Tablette ────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  main { padding: 32px 24px 64px; }
  .entete { padding-left: 24px; padding-right: 24px; position: sticky; top: 0; }
  .heros { padding: 56px 0 48px; }
  .heros__actions { flex-direction: row; flex-wrap: wrap; }
  .panneau { padding: 32px 30px; }
  .sous-nav { margin: 0 0 4px; }
  .sous-nav ul { flex-wrap: wrap; padding: 4px 0 10px; overflow: visible; }
  .grille-trois { grid-template-columns: repeat(2, 1fr); }
  /* Sur deux colonnes, une carte seule en dernière rangée prend toute la
     largeur plutôt que de laisser un trou. */
  .grille-trois > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Ordinateur ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .espace { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .espace > .bloc--large { grid-column: 1 / -1; }
  .editeur { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  /* 16:9 : la section prend toute la largeur de l'écran ; l'aperçu à
     gauche, les réglages en colonne à sa droite, à la hauteur de l'aperçu
     (posés en absolu dans leur colonne : ils défilent seuls, sans
     allonger la page). */
  .editeur--paysage { display: block; width: calc(100vw - 48px); margin-left: calc((100% - (100vw - 48px)) / 2); }
  .editeur--paysage .apercu__zone { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 420px); column-gap: 14px; }
  .editeur--paysage .apercu__cadre { grid-column: 1; grid-row: 1; }
  .editeur--paysage .apercu__zone > .apercu__pied { grid-column: 1; grid-row: 2; }
  .editeur__lateral { position: absolute; grid-column: 2; grid-row: 1; inset: 0; display: grid; align-content: start; gap: 8px; margin: 0; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bord-2) transparent; }
  .editeur__lateral .pli { box-shadow: none; background: rgba(20, 20, 32, .7); }
  /* Rabattue : la colonne disparaît, l'aperçu prend toute la largeur ;
     l'onglet reste au bord droit de l'aperçu. */
  .editeur--paysage .apercu__zone--rabattu { grid-template-columns: minmax(0, 1fr) 0; column-gap: 0; }
  .apercu__zone--rabattu .editeur__lateral { visibility: hidden; padding: 0; }
  .lateral-bascule { position: absolute; top: 10px; right: calc(clamp(320px, 24vw, 420px) + 24px); z-index: 4; display: flex; align-items: center; justify-content: center; min-width: 34px; height: 40px; padding: 0 10px; border: 1px solid var(--bord-2); border-radius: 12px; background: rgba(14, 14, 24, .92); color: var(--cyan); font-family: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .lateral-bascule:hover { color: var(--texte); border-color: var(--cyan); }
  .apercu__zone--rabattu .lateral-bascule { right: 10px; }
  .apercu { position: sticky; top: var(--sous-entete); }
  .animations { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .animation__apercu { height: 260px; }
  .grille-trois { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .grille-trois > :last-child:nth-child(odd) { grid-column: auto; }
  .heros { padding: 88px 0 64px; }
}

/* ── Comptabilité des dons ──────────────────────────────────────────────
   Deux séries, couleurs validées sur le fond sombre (contrastes, daltonisme) :
   votre part en violet, celle de TikTok en bleu-vert. Les textes gardent les
   couleurs de texte ; la couleur ne porte que l'identité de la série. */
:root { --compta-vous: #a855f7; --compta-tiktok: #0e9fb5; }
.compta-filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
/* Choix de la période (classe distincte des « segments » de la roulette). */
.periodes { display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 100%; padding: 4px; border: 1px solid var(--bord-2); border-radius: 999px; }
.periode { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; color: var(--doux); font-weight: 600; text-align: center; text-decoration: none; }
.periode:hover { color: var(--texte); }
.periode[aria-current="page"] { background: var(--panneau-2); color: var(--texte); }
.compta-compte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.compta-compte label { font-weight: 600; font-size: .9rem; }
.compta-compte select { min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font-family: inherit; font-size: 16px; }
.compta-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.chiffre-compta { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); }
.chiffre-compta--vous { border-color: rgba(168, 85, 247, .55); background: linear-gradient(180deg, rgba(168, 85, 247, .12), var(--fond)); }
.chiffre-compta__libelle { display: flex; align-items: center; gap: 8px; color: var(--doux); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.chiffre-compta__valeur { font-size: 1.7rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chiffre-compta--vous .chiffre-compta__valeur { font-size: 2rem; }
.chiffre-compta__detail { color: var(--doux); font-size: .82rem; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; color: var(--doux); font-size: .85rem; }
.legende__item { display: inline-flex; align-items: center; gap: 6px; }
.legende__pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legende__pastille--vous { background: var(--compta-vous); }
.legende__pastille--tiktok { background: var(--compta-tiktok); }
.compta-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.compta-entete .bouton { text-decoration: none; }
.compta-graph { position: relative; margin: 0; }
.compta-graph svg { display: block; width: 100%; height: auto; overflow: visible; }
.compta-graph__grille { stroke: var(--bord); stroke-width: 1; }
.compta-graph__axe, .compta-graph__nom { fill: var(--doux); font-size: 12px; font-variant-numeric: tabular-nums; }
.compta-graph__valeur { fill: var(--texte); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.compta-graph__vous { fill: var(--compta-vous); }
.compta-graph__tiktok { fill: var(--compta-tiktok); }
.compta-graph__zone { fill: transparent; cursor: default; }
.compta-graph__zone:focus { outline: none; }
.compta-graph g:hover .compta-graph__zone, .compta-graph g:focus-within .compta-graph__zone { fill: rgba(255, 255, 255, .04); }
.compta-graph__bulle { position: absolute; top: 0; z-index: 2; max-width: min(320px, 90%); padding: 8px 10px; border: 1px solid var(--bord-2); border-radius: 10px; background: var(--panneau-2); color: var(--texte); font-size: .82rem; line-height: 1.4; pointer-events: none; box-shadow: var(--ombre); }
/* Sur téléphone : le graphique garde une taille lisible et défile, comme les tableaux. */
.compta-graph__defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .compta-graph svg { min-width: 620px; } .periode { padding: 8px 11px; } }
.defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compta-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.compta-table caption { padding-bottom: 8px; color: var(--doux); font-size: .82rem; text-align: left; }
.compta-table th, .compta-table td { padding: 8px 10px; border-bottom: 1px solid var(--bord); text-align: left; white-space: nowrap; }
.compta-table thead th { color: var(--doux); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--bord-2); }
.compta-table tbody th { font-weight: 600; }
.compta-table .nombre { text-align: right; }
.compta-table tfoot th, .compta-table tfoot td { border-top: 2px solid var(--bord-2); border-bottom: 0; font-weight: 800; }
.compta-table__vous { font-weight: 700; }
.compta-taux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px 14px; align-items: end; }
.compta-taux .compta-taux__part, .compta-taux__boutons { grid-column: 1 / -1; }
.bloc .compta-taux__part { margin: 0; }
.compta-taux__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.compta-chiffres + .suite { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   HABILLAGE (03/10/2026) — même palette, plus de profondeur et de vie.
   Couche posée par-dessus les règles ci-dessus : verre, liserés dégradés,
   Poppins pour les titres et les chiffres, icônes, mouvements doux.
   Tout mouvement s'arrête si le système demande moins d'animations.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700.woff2') format('woff2');
}
:root {
  --fond: #07070d;
  --fond-2: #0b0b14;
  --panneau: #13131f;
  --panneau-2: #1b1b2b;
  --bord: rgba(255, 255, 255, .075);
  --bord-2: rgba(255, 255, 255, .13);
  --titre: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --verre: linear-gradient(180deg, rgba(25, 25, 41, .97), rgba(12, 12, 21, .985));
  --degrade-marque: linear-gradient(135deg, #c084fc 0%, #a855f7 38%, #7c3aed 72%, #6d28d9 100%);
  --degrade-texte: linear-gradient(92deg, #ffffff 0%, #f1e6ff 45%, #c4b5fd 72%, #a5f3fc 100%);
  --ressort: cubic-bezier(.34, 1.4, .64, 1);
  --doux-sortie: cubic-bezier(.22, 1, .36, 1);
}

/* ── Fond vivant : une aurore lente, et une trame qui s'efface ─────────── */
body { background: var(--fond); isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 28vmax at 78% 12%, rgba(168, 85, 247, .22), transparent 62%),
    radial-gradient(32vmax 26vmax at 12% 30%, rgba(34, 211, 238, .11), transparent 62%),
    radial-gradient(44vmax 32vmax at 55% 96%, rgba(124, 58, 237, .16), transparent 62%);
  animation: aurore 28s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 75%);
}
@keyframes aurore {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) rotate(2.5deg) scale(1.04); }
  100% { transform: translate3d(2.5%, -1.5%, 0) rotate(-2deg) scale(1); }
}

/* ── Titres et chiffres en Poppins ────────────────────────────────────── */
h1, h2, .chiffre__valeur, .chiffre-compta__valeur, .marque__nom { font-family: var(--titre); font-weight: 700; }
h1 {
  letter-spacing: -.02em;
  background: var(--degrade-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 { letter-spacing: -.005em; }

/* ── En-tête : logo vivant, verre, liseré dégradé ─────────────────────── */
.entete {
  background: rgba(7, 7, 13, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(168, 85, 247, .45) 30%, rgba(34, 211, 238, .35) 70%, transparent) 1;
  view-transition-name: entete;
}
.marque { gap: 11px; letter-spacing: .07em; }
.marque__logo { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 6px 16px rgba(168, 85, 247, .55)); transition: transform .5s var(--ressort); }
.marque:hover .marque__logo { transform: rotate(-8deg) scale(1.06); }
.marque__nom { font-size: 1.02rem; letter-spacing: .08em; }
.marque { position: relative; z-index: 3; flex: none; }
.marque__nom { position: absolute; top: 50%; left: 100%; padding-left: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-8px, -50%); transition: opacity .25s ease, transform .35s var(--ressort); }
.marque:hover .marque__nom, .marque:focus-visible .marque__nom { opacity: 1; transform: translate(0, -50%); }
.marque__accent {
  margin-left: .38em;
  background: linear-gradient(90deg, #d8b4fe, #a855f7 45%, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo__onde { transform-box: fill-box; transform-origin: left center; animation: onde 2.6s ease-in-out infinite; }
@keyframes onde { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
.entete__nav a:not(.bouton), .entete .lien { position: relative; transition: color .2s ease; }
.entete__nav a:not(.bouton)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--doux-sortie);
}
.entete__nav a:not(.bouton):hover::after { transform: scaleX(1); }

/* ── Onglets de l'espace : des pastilles à icône ──────────────────────── */
.sous-nav a {
  gap: 8px;
  padding: 0 16px 0 13px;
  border-color: var(--bord);
  background: rgba(20, 20, 32, .94);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .25s var(--ressort), box-shadow .25s ease;
}
.sous-nav__icone { width: 18px; height: 18px; flex: none; opacity: .8; transition: transform .3s var(--ressort), opacity .2s ease; }
/* Neuf onglets : sur ordinateur, ils tiennent sur une seule ligne. */
@media (min-width: 1000px) {
  .sous-nav a { gap: 7px; padding: 0 12px 0 10px; font-size: .9rem; }
}
.sous-nav a:hover { transform: translateY(-2px); border-color: rgba(168, 85, 247, .45); box-shadow: 0 8px 22px -12px rgba(168, 85, 247, .7); }
.sous-nav a:hover .sous-nav__icone { transform: scale(1.12) rotate(-6deg); opacity: 1; }
.sous-nav a[aria-current="page"] {
  background: var(--degrade-marque);
  box-shadow: 0 10px 26px -10px rgba(168, 85, 247, .95), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sous-nav a[aria-current="page"] .sous-nav__icone { opacity: 1; }

/* ── En-tête d'un compte : logo · onglets · menu « Mon espace », TOUJOURS
   sur une ligne. Les onglets qui ne tiennent pas glissent sous le logo et
   sous le menu (bande qui défile, bords fondus) ; centrés quand ils tiennent. */
:root { --sous-entete: 90px; }   /* ce qui reste fixe en défilant se cale dessous */
.entete--espace { flex-wrap: nowrap; gap: 8px; }
.entete .entete__sections { flex: 1 1 auto; order: 0; min-width: 0; margin: 0; }
/* --fondu-gauche : bord gauche fondu ; il s'élargit au survol du logo pour
   laisser la place au nom (animé grâce à @property). */
@property --fondu-gauche { syntax: '<length>'; inherits: false; initial-value: 0px; }
.entete .entete__sections ul { --fondu-gauche: 0px; position: relative; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: -10px 0; padding: 10px 28px; -webkit-mask-image: linear-gradient(90deg, transparent var(--fondu-gauche), #000 calc(var(--fondu-gauche) + 28px), #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent var(--fondu-gauche), #000 calc(var(--fondu-gauche) + 28px), #000 calc(100% - 28px), transparent); transition: --fondu-gauche .35s ease; }
.entete--espace:has(.marque:hover, .marque:focus-visible) .entete__sections ul { --fondu-gauche: 170px; }
.entete .entete__sections ul.sous-nav--glisse { cursor: grabbing; user-select: none; }
.entete .entete__sections ul.sous-nav--glisse a { pointer-events: none; }
.entete .entete__sections li:first-child { margin-left: auto; }
.entete .entete__sections li:last-child { margin-right: auto; }
.menu-compte { position: relative; flex: none; }
.menu-compte__bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: #2a2a3b; color: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap; cursor: pointer; list-style: none; transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }
.menu-compte__bouton:hover { background: #33334a; }
@media (max-width: 639px) {
  /* Téléphone : le menu se réduit à son icône (le nom reste lu). */
  .menu-compte__bouton { padding: 0 11px; }
  .menu-compte__bouton > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-compte__chevron { display: none; }
}
.menu-compte__bouton::-webkit-details-marker { display: none; }
.menu-compte__bouton:hover, .menu-compte[open] > .menu-compte__bouton { border-color: rgba(168, 85, 247, .45); box-shadow: 0 8px 22px -12px rgba(168, 85, 247, .7); }
.menu-compte .icone { width: 18px; height: 18px; flex: none; }
.menu-compte__chevron { opacity: .7; transition: transform .2s ease; }
.menu-compte[open] .menu-compte__chevron { transform: rotate(180deg); }
.menu-compte__liste { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; gap: 2px; min-width: 240px; padding: 8px; border: 1px solid var(--bord-2); border-radius: 16px; background: var(--panneau); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.menu-compte__qui { margin: 4px 10px 8px; color: var(--doux); font-size: .8rem; overflow-wrap: anywhere; }
.menu-compte__liste a, .menu-compte__sortie { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--texte); font: inherit; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer; }
.menu-compte__liste a:hover, .menu-compte__sortie:hover { background: rgba(168, 85, 247, .14); }
.menu-compte__liste a[aria-current="page"] { background: rgba(168, 85, 247, .2); color: #fff; }
.menu-compte__sortie { margin-top: 4px; border-top: 1px solid var(--bord); border-radius: 0 0 10px 10px; color: var(--erreur); }

/* ── Bandeau : l'icône de la page, le titre en dégradé ────────────────── */
.bandeau__tete { display: flex; align-items: center; gap: 14px; }
.bandeau__tete h1 { margin: 0; }
.bandeau__icone {
  display: grid;
  place-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(168, 85, 247, .32), rgba(34, 211, 238, .12)), var(--fond);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 32px -14px rgba(168, 85, 247, .9);
  color: #f3e8ff;
}
.bandeau__icone .icone { width: 26px; height: 26px; }

/* Titres de page : une aura sombre derrière le titre, son logo et son
   surtitre — la grille allumée par la souris (assets/fond.js) ne s'y mêle
   pas. Le titre (texte en dégradé) reste au-dessus : l'aura est sur son
   conteneur, jamais sur le h1 lui-même. */
.bandeau__tete, .titre-page, .heros__texte { position: relative; isolation: isolate; }
.bandeau__tete, .titre-page { width: fit-content; max-width: 100%; }
.bandeau__tete::before, .titre-page::before, .heros__texte::before {
  content: "";
  position: absolute;
  inset: -18px -32px;
  z-index: -1;
  border-radius: 44px;
  background: rgba(7, 7, 13, .9);
  filter: blur(18px);
  pointer-events: none;
}
.heros__texte::before { inset: -26px -40px; border-radius: 64px; filter: blur(28px); }
/* Sur téléphone, l'aura reste dans la marge : sinon la page défile de côté. */
@media (max-width: 720px) {
  .bandeau__tete::before, .titre-page::before, .heros__texte::before { inset: -14px -10px; }
}
.bandeau .alerte { margin-top: 16px; }

/* ── Cartes : verre, liseré dégradé, relief au survol ─────────────────── */
.carte, .panneau {
  background: var(--verre);
  border: 1px solid var(--bord);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 8px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7);
  transition: border-color .3s ease, box-shadow .3s ease, transform .35s var(--doux-sortie);
}
.carte::before, .panneau::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(168, 85, 247, .5), rgba(34, 211, 238, .14) 32%, transparent 58%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  opacity: .75;
  transition: opacity .3s ease;
}
.panneau { position: relative; }
.carte:hover::before { opacity: 1; }
.carte:hover { border-color: rgba(255, 255, 255, .1); }

/* Titres de section : une pastille d'icône */
.carte h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.titre-icone {
  display: grid;
  place-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(168, 85, 247, .26), rgba(124, 58, 237, .1));
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .22);
  color: #d8b4fe;
}
.titre-icone .icone { width: 18px; height: 18px; }
.carte h2 .compte { margin-left: 0; }

/* ── Boutons : reflet au survol, enfoncement au clic ──────────────────── */
.bouton {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--degrade-marque);
  box-shadow: 0 12px 28px -12px rgba(168, 85, 247, .95), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s var(--ressort), box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .3) 50%, transparent 72%);
  transform: translateX(-130%);
  transition: transform .8s var(--doux-sortie);
}
.bouton:hover::after { transform: translateX(130%); }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(168, 85, 247, 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
.bouton:active { transform: translateY(0) scale(.97); }
.bouton--fantome {
  background: rgba(255, 255, 255, .03);
  border-color: var(--bord-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.bouton--fantome:hover { background: rgba(168, 85, 247, .1); border-color: rgba(168, 85, 247, .6); box-shadow: 0 10px 24px -14px rgba(168, 85, 247, .9); }
.bouton--danger { background: linear-gradient(135deg, #f87171, #ef4444 40%, #b91c1c); }
.bouton--google { background: #fff; }
.bouton--google::after { display: none; }
/* Boutons « Test » (widgets, overlays) : jaune orangé, partout pareils. */
.bouton.bouton--test { border-color: transparent; background: linear-gradient(135deg, #fcd34d, #fbbf24 35%, #f97316); color: #1f1300; box-shadow: 0 10px 24px -12px rgba(249, 115, 22, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
.bouton.bouton--test:hover { color: #1f1300; box-shadow: 0 16px 30px -12px rgba(249, 115, 22, 1), inset 0 1px 0 rgba(255, 255, 255, .35); }
.bouton.bouton--test:disabled { opacity: .6; }
/* Boutons « ? » : cyan. */
.bouton.bouton--aide { border-color: transparent; background: linear-gradient(135deg, #a5f3fc, #22d3ee 40%, #0891b2); color: #04222b; box-shadow: 0 10px 24px -12px rgba(34, 211, 238, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
.bouton.bouton--aide:hover { color: #04222b; box-shadow: 0 16px 30px -12px rgba(34, 211, 238, 1), inset 0 1px 0 rgba(255, 255, 255, .35); }
/* Titre au milieu d'une barre d'outils (overlay vertical : « Aperçu »). */
.ov-barre__titre { display: flex; flex: 1 1 auto; justify-content: center; margin: 0; font-size: 1.15rem; text-align: center; }
.ov-aide-liste { display: grid; gap: 6px; margin: 0 0 4px; padding-left: 1.1em; color: var(--doux); font-size: .92rem; }
.ov-pop__suite { margin-top: 18px !important; }

/* ── Champs : verre, halo au focus ────────────────────────────────────── */
.formulaire input, .champ-copie, .champ-arobase, .regle select, .compta-compte select, .relier-obs input[type="password"], .ov-obs input[type="password"], .kit-obs__mdp input[type="password"] {
  background: rgba(255, 255, 255, .035);
  border-color: var(--bord-2);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.formulaire input:focus, .regle select:focus, .compta-compte select:focus, .champ-copie:focus {
  border-color: rgba(168, 85, 247, .8);
  background: rgba(168, 85, 247, .06);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, .18);
  outline: none;
}

/* ── Chiffres : relief, et une lueur pour ce qui compte ───────────────── */
.chiffre, .chiffre-compta {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border-color: var(--bord);
  transition: transform .3s var(--ressort), border-color .3s ease, box-shadow .3s ease;
}
.chiffre:hover, .chiffre-compta:hover { transform: translateY(-3px); border-color: rgba(168, 85, 247, .4); box-shadow: 0 16px 34px -18px rgba(168, 85, 247, .8); }
.chiffre__valeur, .chiffre-compta__valeur { letter-spacing: -.01em; }
.chiffre-compta--vous {
  background: radial-gradient(120% 90% at 0% 0%, rgba(168, 85, 247, .26), transparent 60%), linear-gradient(180deg, rgba(168, 85, 247, .1), rgba(12, 12, 21, .6));
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .35), 0 18px 40px -20px rgba(168, 85, 247, .95);
}
.chiffre-compta--vous .chiffre-compta__valeur {
  background: linear-gradient(92deg, #ffffff, #e9d5ff 55%, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Listes : lignes qui répondent au pointeur ────────────────────────── */
.verif, .regles li, .derniers li, .locale, .animation, .creation, .historique li {
  transition: transform .25s var(--doux-sortie), border-color .25s ease, background .25s ease;
}
.verif:hover, .regles li:hover, .derniers li:hover, .historique li:hover { border-color: rgba(168, 85, 247, .32); background: rgba(168, 85, 247, .05); }
.locale:hover, .animation:hover, .creation:hover { transform: translateY(-3px); border-color: rgba(168, 85, 247, .38); }
.verif, .derniers li, .regles li { background: rgba(255, 255, 255, .025); }
.verif--ok .verif__symbole { box-shadow: 0 0 0 4px rgba(53, 208, 127, .08); }
.verif--a-faire { background: linear-gradient(90deg, rgba(168, 85, 247, .1), rgba(255, 255, 255, .02) 60%); }
.pret--ok { box-shadow: 0 0 0 1px rgba(53, 208, 127, .3), 0 24px 60px -30px rgba(53, 208, 127, .6); }

/* Nouveaux cadeaux : ils glissent en place */
.derniers__nouveau { animation: glisser .55s var(--ressort) both; border-color: rgba(34, 211, 238, .45); }
@keyframes glisser { from { opacity: 0; transform: translateX(-14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── En direct : un pouls ─────────────────────────────────────────────── */
.etat-live--direct::before { animation: pouls 1.8s ease-out infinite; }
@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .7); }
  70% { box-shadow: 0 0 0 10px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}
.bloc .etat-live--direct { border-color: rgba(53, 208, 127, .35); background: linear-gradient(90deg, rgba(53, 208, 127, .1), rgba(255, 255, 255, .02) 70%); }
.etat-obs--ok { background: linear-gradient(90deg, rgba(53, 208, 127, .1), transparent 70%); }

/* ── Messages : ils arrivent en douceur ───────────────────────────────── */
.alerte { animation: apparaitre .5s var(--doux-sortie) both; box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .8); }

/* ── Interrupteurs : un ressort ───────────────────────────────────────── */
.interrupteur__bille { transition: transform .35s var(--ressort); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.interrupteur__bouton[aria-checked="true"] .interrupteur__piste { background: linear-gradient(90deg, #22c55e, #35d07f); box-shadow: 0 0 14px rgba(53, 208, 127, .45); }

/* ── Tableaux : lignes au survol ──────────────────────────────────────── */
.compta-table tbody tr { transition: background .2s ease; }
.compta-table tbody tr:hover { background: rgba(168, 85, 247, .06); }

/* ── Graphique : les barres montent, l'une après l'autre ──────────────── */
.compta-graph__vous, .compta-graph__tiktok { transform-box: fill-box; transform-origin: 50% 100%; animation: pousser .8s var(--doux-sortie) both; }
.compta-graph svg g:nth-child(n) .compta-graph__tiktok { animation-delay: .12s; }
@keyframes pousser { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── Pilote : de gros boutons qui répondent ───────────────────────────── */

/* ── Accueil public : le logo flotte, les atouts ont leur icône ────────── */
.heros { position: relative; }
.heros__logo { display: block; width: 76px; height: 76px; margin: 0 0 18px; filter: drop-shadow(0 18px 36px rgba(168, 85, 247, .6)); animation: flotter 6s ease-in-out infinite; }
@keyframes flotter { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-3deg); } }
.heros h1 { font-size: clamp(2rem, 7vw, 3.6rem); max-width: 18ch; }
.atout { display: grid; gap: 10px; align-content: start; }
.atout h2 { margin: 0; }
.atout__icone {
  display: grid;
  place-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(168, 85, 247, .3), rgba(34, 211, 238, .12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 28px -14px rgba(168, 85, 247, .9);
  color: #f3e8ff;
}
.atout__icone .icone { width: 24px; height: 24px; }
.atout:hover { transform: translateY(-4px); }
.grille-trois .carte h2 { display: block; }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; border-top: 1px solid var(--bord); background: rgba(7, 7, 13, .5); }
.pied__logo { width: 22px; height: 22px; opacity: .9; }

/* ── Apparitions en cascade, et d'une page à l'autre ──────────────────── */
@keyframes apparaitre { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.bandeau, .espace > *, .heros > *, .grille-trois > *, .panneau, body.lecture main > * { animation: apparaitre .65s var(--doux-sortie) both; }
.espace > :nth-child(2), .heros > :nth-child(2), .grille-trois > :nth-child(2) { animation-delay: .06s; }
.espace > :nth-child(3), .heros > :nth-child(3), .grille-trois > :nth-child(3) { animation-delay: .12s; }
.espace > :nth-child(4), .heros > :nth-child(4), .grille-trois > :nth-child(4) { animation-delay: .18s; }
.espace > :nth-child(5), .heros > :nth-child(5) { animation-delay: .24s; }
.espace > :nth-child(6) { animation-delay: .3s; }
.espace > :nth-child(n+7) { animation-delay: .34s; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--doux-sortie); }

html { scroll-behavior: smooth; }
::selection { background: rgba(168, 85, 247, .45); color: #fff; }

/* ── Accueil public : le texte, et une vitrine du direct ──────────────── */
.heros { display: grid; gap: 36px; align-items: center; }
.heros__visuel { display: grid; place-items: center; padding: 10px 0 30px; }
.vitrine { position: relative; width: min(64vw, 280px); }
.vitrine__ecran {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 9 / 15;
  padding: 16px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(80% 55% at 28% 22%, rgba(168, 85, 247, .6), transparent 62%),
    radial-gradient(70% 50% at 82% 82%, rgba(34, 211, 238, .38), transparent 62%),
    linear-gradient(165deg, #1d1236, #0a0a16 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 6px rgba(0, 0, 0, .35), 0 50px 90px -34px rgba(124, 58, 237, .85);
  animation: respirer 8s ease-in-out infinite;
}
.vitrine__ecran::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .08) 80%, transparent 90%);
  animation: tourner 9s linear infinite;
  pointer-events: none;
}
@keyframes respirer { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes tourner { to { transform: rotate(360deg); } }
.vitrine__haut, .vitrine__scene, .vitrine__match { position: relative; z-index: 1; }
.vitrine__haut { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 700; }
.vitrine__direct { padding: 4px 8px; border-radius: 6px; background: #ef4444; color: #fff; letter-spacing: .08em; box-shadow: 0 0 16px rgba(239, 68, 68, .65); animation: clignoter 1.8s ease-in-out infinite; }
@keyframes clignoter { 50% { opacity: .65; } }
.vitrine__spect { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .38); color: #e5e7eb; }
.vitrine__spect .icone { width: 14px; height: 14px; }
.vitrine__scene { display: grid; flex: 1; place-items: center; }
.vitrine__multi {
  font-family: var(--titre);
  font-size: 5.4rem;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #f3e8ff 40%, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 26px rgba(168, 85, 247, .95));
  animation: battre 2.6s var(--ressort) infinite;
}
@keyframes battre { 0%, 100% { transform: scale(1) rotate(-5deg); } 14% { transform: scale(1.2) rotate(3deg); } 30% { transform: scale(1) rotate(-5deg); } }
.vitrine__match { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, .42); font-family: var(--titre); font-size: .78rem; }
.vitrine__jauge { height: 8px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, #f87171, #ef4444); }
.vitrine__jauge i { display: block; width: 56%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #c084fc); box-shadow: 0 0 12px rgba(168, 85, 247, .8); animation: tirer 5s ease-in-out infinite alternate; }
@keyframes tirer { from { width: 50%; } to { width: 66%; } }
.vitrine__score--eux { color: #fca5a5; }
.notif {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  background: rgba(19, 19, 33, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .85);
  font-size: .82rem;
  white-space: nowrap;
  animation: flotter 6s ease-in-out infinite;
}
.notif strong { color: #fff; }
.notif__icone { display: grid; place-content: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--degrade-marque); color: #fff; }
.notif__icone .icone { width: 16px; height: 16px; }
.notif--1 { top: 10%; left: -46px; animation-delay: -1s; }
.notif--2 { top: 47%; right: -56px; animation-delay: -3s; }
.notif--2 .notif__icone { background: linear-gradient(135deg, #22d3ee, #0e9fb5); }
.notif--3 { bottom: 17%; right: -40px; animation-delay: -4.5s; }
.notif--3 .notif__icone { background: linear-gradient(135deg, #35d07f, #15803d); }
@media (min-width: 640px) {
  .accueil .grille-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .heros { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; }
  .heros__visuel { padding: 0; }
  .vitrine { width: 290px; }
  .notif--1 { left: -96px; }
  .notif--2 { right: -96px; }
  .notif--3 { right: -84px; }
}

/* ── Connexion, inscription : le logo en tête ─────────────────────────── */
.panneau__logo { display: block; width: 50px; height: 50px; margin: 0 0 14px; filter: drop-shadow(0 12px 26px rgba(168, 85, 247, .65)); }

/* ── « Prêt pour le live » : où l'on en est ───────────────────────────── */
.pret__progression { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 2px 0 16px; overflow: hidden; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.pret__progression::-webkit-progress-bar { border-radius: 99px; background: rgba(255, 255, 255, .07); }
.pret__progression::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #a855f7, #22d3ee); box-shadow: 0 0 12px rgba(168, 85, 247, .7); transition: width .7s var(--doux-sortie); }
.pret__progression::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #a855f7, #22d3ee); }
.pret--ok .pret__progression::-webkit-progress-value { background: linear-gradient(90deg, #22c55e, #35d07f); }
.pret--ok .pret__progression::-moz-progress-bar { background: linear-gradient(90deg, #22c55e, #35d07f); }

/* ── Boutons du direct : leur icône (posée en CSS : le script réécrit leur
      texte quand la pause bascule) ──────────────────────────────────────── */
.direct__pause::before, .direct__panique::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--pictogramme) center / contain no-repeat;
  mask: var(--pictogramme) center / contain no-repeat;
}
.direct__pause { --pictogramme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4.2' height='14' rx='1.4'/%3E%3Crect x='13.8' y='5' width='4.2' height='14' rx='1.4'/%3E%3C/svg%3E"); }
.direct--pause .direct__pause { --pictogramme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.3c0-1 1.1-1.6 2-1.1l10.3 6.6c.8.5.8 1.7 0 2.2L9 19.6c-.9.5-2-.1-2-1.1z'/%3E%3C/svg%3E"); }
.direct__panique { --pictogramme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='5.5' width='13' height='13' rx='2.6'/%3E%3C/svg%3E"); }

/* ── Meilleurs donateurs : un podium ──────────────────────────────────── */
.top-bilan { gap: 8px; padding: 0; list-style: none; counter-reset: rang; }
.top-bilan li { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--bord); border-radius: 12px; background: rgba(255, 255, 255, .025); counter-increment: rang; transition: transform .25s var(--doux-sortie), border-color .25s ease; }
.top-bilan li:hover { transform: translateX(4px); border-color: rgba(168, 85, 247, .35); }
.top-bilan li::before { content: counter(rang); display: grid; place-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--panneau-2); color: var(--doux); font-family: var(--titre); font-size: .85rem; }
.top-bilan li:nth-child(1)::before { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2600; box-shadow: 0 0 18px rgba(245, 158, 11, .55); }
.top-bilan li:nth-child(2)::before { background: linear-gradient(135deg, #f8fafc, #94a3b8); color: #1e293b; }
.top-bilan li:nth-child(3)::before { background: linear-gradient(135deg, #fdba74, #c2410c); color: #2a1000; }
.top-bilan li:nth-child(1) { border-color: rgba(245, 158, 11, .35); background: linear-gradient(90deg, rgba(245, 158, 11, .1), rgba(255, 255, 255, .02) 60%); }
.top-bilan li span:first-child { font-weight: 600; }
.top-bilan li span + span { margin-left: auto; color: var(--doux); font-variant-numeric: tabular-nums; }

/* Moins d'animations demandé par le système : tout se pose, rien ne bouge. */
/* ── Fond vivant (assets/fond.js) : la grille s'allume sous la souris ──── */
.fond-vivant { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ── Créations : chaque type a son pictogramme et sa couleur ──────────── */
.teinte--counter { --t1: #a855f7; --t2: #6d28d9; }
.teinte--wheel { --t1: #fb923c; --t2: #c2410c; }
.teinte--timer { --t1: #22d3ee; --t2: #0e7490; }
.teinte--countdown { --t1: #f472b6; --t2: #be185d; }
.teinte--text { --t1: #60a5fa; --t2: #1d4ed8; }
.teinte--goal { --t1: #4ade80; --t2: #15803d; }
.teinte--classement { --t1: #fbbf24; --t2: #b45309; }
.teinte--dernier { --t1: #818cf8; --t2: #4338ca; }
.teinte--match { --t1: #f87171; --t2: #b91c1c; }
.teinte--alerte { --t1: #e879f9; --t2: #a21caf; }
.teinte--effets { --t1: #facc15; --t2: #db2777; }
.teinte--likes { --t1: #fb7185; --t2: #be123c; }
.teinte--chat { --t1: #22d3ee; --t2: #0e7490; }
.teinte--cadeaux { --t1: #e879f9; --t2: #a21caf; }
.teinte--sondage { --t1: #a78bfa; --t2: #6d28d9; }
.teinte--boss { --t1: #f87171; --t2: #991b1b; }
.teinte--bienvenue { --t1: #4ade80; --t2: #15803d; }
.teinte--slots { --t1: #fde047; --t2: #ca8a04; }
.teinte--course { --t1: #fb923c; --t2: #c2410c; }
.teinte--carte { --t1: #818cf8; --t2: #4338ca; }
.teinte--enchere { --t1: #2dd4bf; --t2: #0f766e; }
.teinte--ticker { --t1: #60a5fa; --t2: #1d4ed8; }
.teinte--cadre { --t1: #c084fc; --t2: #7e22ce; }
.teinte--horloge { --t1: #38bdf8; --t2: #0369a1; }
.teinte--image { --t1: #86efac; --t2: #16a34a; }
.teinte--podium { --t1: #fcd34d; --t2: #b45309; }
.teinte--bocal { --t1: #67e8f9; --t2: #0e7490; }
.teinte--plinko { --t1: #c084fc; --t2: #6d28d9; }
.teinte--tirage { --t1: #fde047; --t2: #b45309; }
.teinte--fusee { --t1: #fb7185; --t2: #b91c1c; }
.teinte--ballon { --t1: #f9a8d4; --t2: #db2777; }
.teinte--corde { --t1: #fdba74; --t2: #c2410c; }
.teinte--gages { --t1: #fcd34d; --t2: #a16207; }
.teinte--hype { --t1: #fb923c; --t2: #dc2626; }
.teinte--aquarium { --t1: #7dd3fc; --t2: #1d4ed8; }
.pastille-type {
  display: grid;
  place-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--t1, #a855f7), var(--t2, #6d28d9));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -3px 8px rgba(0, 0, 0, .2), 0 10px 24px -12px var(--t1, #a855f7);
}
.pastille-type .icone { width: 23px; height: 23px; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.type-creation { position: relative; isolation: isolate; overflow: hidden; padding: 16px; }
.type-creation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 0% 0%, var(--t1, #a855f7), transparent 58%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.type-creation .pastille-type { margin-bottom: 10px; transition: transform .45s var(--ressort), box-shadow .3s ease; }
.type-creation:hover, .type-creation:focus-visible { border-color: var(--t1, var(--violet)); transform: translateY(-2px); }
.type-creation:hover::before, .type-creation:focus-visible::before { opacity: .16; }
.type-creation:hover .pastille-type, .type-creation:focus-visible .pastille-type { transform: rotate(-8deg) scale(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -3px 8px rgba(0, 0, 0, .2), 0 16px 30px -10px var(--t1, #a855f7); }
@media (max-width: 639px) {
  .type-creation { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .type-creation .pastille-type { grid-row: span 2; margin: 0; }
}
.creation .pastille-type { width: 34px; height: 34px; border-radius: 11px; }
.creation .pastille-type .icone { width: 18px; height: 18px; }
.creation .creation__type { color: var(--t1, var(--cyan)); }

/* ── Télécommande : les touches ───────────────────────────────────────── */
.cache-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.couleur--violet { --t1: #a855f7; --t2: #6d28d9; }
.couleur--cyan { --t1: #22d3ee; --t2: #0e7490; }
.couleur--rose { --t1: #f472b6; --t2: #be185d; }
.couleur--orange { --t1: #fb923c; --t2: #c2410c; }
.couleur--vert { --t1: #4ade80; --t2: #15803d; }
.couleur--bleu { --t1: #60a5fa; --t2: #1d4ed8; }
.couleur--or { --t1: #fbbf24; --t2: #b45309; }
.couleur--indigo { --t1: #818cf8; --t2: #4338ca; }
.couleur--rouge { --t1: #f87171; --t2: #b91c1c; }
.couleur--magenta { --t1: #e879f9; --t2: #a21caf; }
.couleur--gris { --t1: #94a3b8; --t2: #475569; }
.touche { display: flex; min-width: 0; margin: 0; }
.touche--large { grid-column: span 2; }
.touche__bouton {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 96px;
  padding: 12px 12px 11px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--t1, #a855f7), var(--t2, #6d28d9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -14px 24px rgba(0, 0, 0, .16), 0 12px 24px -14px var(--t1, #a855f7);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .12s ease, filter .12s ease, box-shadow .2s ease;
}
.touche__bouton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 45%); pointer-events: none; }
.touche__bouton:hover { filter: brightness(1.07); }
.touche__bouton:active { transform: scale(.95); filter: brightness(1.15); }
.touche__bouton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.touche__icone { display: grid; margin-bottom: 8px; }
.touche__icone .icone { width: 26px; height: 26px; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.touche__nom { max-width: 100%; margin-top: auto; font-family: var(--titre); font-size: .98rem; font-weight: 700; line-height: 1.15; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.touche__legende { max-width: 100%; overflow: hidden; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.touche__si-pause { display: none; }
.direct--pause .touche--pause .touche__si-pause { display: block; }
.direct--pause .touche--pause .touche__bouton { animation: pouls-touche 1.6s ease-in-out infinite; }
@keyframes pouls-touche { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 4px rgba(251, 146, 60, .45), 0 0 26px rgba(251, 146, 60, .7); } }
.touche--eteinte .touche__bouton { filter: grayscale(.7); opacity: .65; }
.touche--envoi .touche__bouton { filter: brightness(.9); }
.touche--ok .touche__bouton { animation: touche-ok .55s ease-out; }
@keyframes touche-ok { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
.touche--erreur .touche__bouton { animation: touche-erreur .45s ease-in-out; box-shadow: 0 0 0 3px #ff6b6b; }
@keyframes touche-erreur { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.touche--armee .touche__bouton { outline: 3px solid #fff; outline-offset: 2px; animation: armee .7s ease-in-out infinite alternate; }
@keyframes armee { to { filter: brightness(1.3); } }
.touche-titre { grid-column: 1 / -1; margin: 10px 2px 0; color: var(--doux); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.touche-titre:first-child { margin-top: 0; }
.touche-titre__bouton { display: block; width: 100%; padding: 4px 0; border: 0; border-bottom: 1px dashed var(--bord-2); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; cursor: pointer; }

/* La télécommande, sur le téléphone */
.pilote__corps { display: grid; gap: 14px; }
.pilote__corps .alerte--pause { margin: 0; }
.pilote__retour { position: sticky; bottom: 14px; z-index: 5; justify-self: center; max-width: 100%; margin: 0; padding: 10px 16px; border: 1px solid var(--bord-2); border-radius: 999px; background: rgba(14, 14, 24, .96); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8); color: var(--texte); font-size: .92rem; font-weight: 600; text-align: center; }
.pilote__retour:empty { display: none; }
.pilote__corps .pilote__retour-espace, .pilote__corps .pilote__aide-pc { margin: 0; font-size: .88rem; text-align: center; }

/* Réglage, page « Télécommande » : l'aperçu dans un téléphone */
.tele__corps { display: grid; gap: 22px; margin-top: 16px; }
.tele__telephone { width: 100%; max-width: 360px; justify-self: center; padding: 12px; border: 1px solid var(--bord-2); border-radius: 38px; background: #040408; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .03), 0 30px 60px -30px rgba(124, 58, 237, .8); }
.tele__ecran { max-height: 620px; min-height: 280px; padding: 14px 12px; overflow-y: auto; border-radius: 28px; background: var(--fond); }
.tele__ecran .touche__bouton { min-height: 84px; padding: 10px; }
.tele__ecran .touche__nom { font-size: .84rem; }
.tele__ecran .touche__icone .icone { width: 22px; height: 22px; }
.tele__vide { padding: 40px 10px; text-align: center; }
.tele__cote { display: grid; align-content: start; gap: 14px; }
.tele__colonnes label { display: block; margin-bottom: 6px; font-weight: 600; }
.tele__colonnes select { flex: none; width: auto; min-width: 5em; min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; }
.tele__cote .aide { margin: 0; }
[data-apercu-touches] [draggable="true"] { cursor: grab; }
.touche--tenue { opacity: .35; }
@media (min-width: 860px) {
  .tele__corps { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
  .tele__telephone { justify-self: start; }
}

.reglages-touches { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.reglage-touche { border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); transition: border-color .2s ease; }
.reglage-touche[open] { border-color: rgba(168, 85, 247, .45); }
.reglage-touche summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.reglage-touche summary::-webkit-details-marker { display: none; }
.reglage-touche__mini { display: grid; place-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--t1, #a855f7), var(--t2, #6d28d9)); color: #fff; }
.reglage-touche__mini .icone { width: 18px; height: 18px; stroke-width: 2; }
.reglage-touche__mini--titre { height: 6px; border-radius: 99px; background: var(--bord-2); }
.reglage-touche__nom { font-weight: 700; }
.reglage-touche__quoi { flex: 1 1 14em; color: var(--doux); font-size: .85rem; text-align: right; }
.reglage-touche__forme { padding: 4px 14px 12px; }
.reglage-touche__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 14px 14px; }
.bloc .reglage-touche__actions form { margin: 0; }
.reglage-touche__actions .bouton { min-width: 44px; }
.couleurs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.couleurs legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
.couleur-choix { position: relative; display: inline-grid; cursor: pointer; }
.couleur-choix input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.couleur-choix__pastille { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(150deg, var(--t1), var(--t2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .15s ease; }
.couleur-choix input:checked + .couleur-choix__pastille { outline: 2px solid #fff; outline-offset: 3px; transform: scale(.9); }
.couleur-choix input:focus-visible + .couleur-choix__pastille { outline: 3px solid var(--cyan); outline-offset: 3px; }
.icone-choix { display: flex; align-items: center; gap: 10px; }
.icone-choix select { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; }
.icone-choix__apercu { display: grid; place-content: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--bord-2); border-radius: 12px; color: var(--texte); }
.icone-choix__apercu .icone { width: 22px; height: 22px; }
.tele-ajout select[name="cle"] { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; }
.tele-lien { display: grid; gap: 20px; align-items: center; margin-top: 12px; }
.tele-lien__qr { display: grid; justify-items: center; gap: 8px; margin: 0; }
.qr { display: block; width: 210px; height: 210px; border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(168, 85, 247, .8); }
.tele-lien__qr figcaption { color: var(--doux); font-size: .85rem; text-align: center; }
@media (min-width: 720px) {
  .tele-lien { grid-template-columns: auto minmax(0, 1fr); }
}

/* ── Vitrine (accueil public) ─────────────────────────────────────────── */
.bouton--geant { min-height: 58px; padding: 10px 30px; border-radius: 16px; font-size: 1.08rem; line-height: 1.25; text-align: center; }
.accueil .heros__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
.heros__rassurance { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--doux); font-size: .92rem; }
.heros__rassurance .icone { width: 18px; height: 18px; color: var(--ok); }
.heros__rassurance span { white-space: nowrap; }
.heros__rassurance span::before { content: "·"; margin-right: 6px; }
.heros__rassurance strong { color: var(--texte); }
.compatibles { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.compatibles li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--bord); border-radius: 999px; background: rgba(20, 20, 32, .94); color: var(--doux); font-size: .85rem; font-weight: 600; }
.compatibles .icone { width: 16px; height: 16px; color: var(--violet); }
.vitrine-section { margin: 76px 0 0; }
.vitrine-section > .surtitre, .vitrine-section > .titre-section, .vitrine-section > .chapeau { text-align: center; margin-left: auto; margin-right: auto; }
.titre-section { max-width: 22ch; margin: 0 auto 14px; font-family: var(--titre); font-size: clamp(1.6rem, 4.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vitrine-section > .chapeau { max-width: 60ch; margin-bottom: 28px; }
.cta-ligne { display: flex; justify-content: center; margin-top: 30px; }

.trois-etapes { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: none; }
.trois-etapes li { position: relative; padding: 22px 20px 20px; border: 1px solid var(--bord); border-radius: 20px; background: var(--verre); }
.trois-etapes h3 { margin: 12px 0 6px; font-family: var(--titre); font-size: 1.1rem; }
.trois-etapes p { margin: 0; color: var(--doux); }
.trois-etapes__num { display: grid; place-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--degrade-marque); box-shadow: 0 10px 24px -12px rgba(168, 85, 247, .9); color: #fff; font-family: var(--titre); font-size: 1.1rem; }

.demos__grille { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 62%); gap: 16px; margin: 0 -16px; padding: 4px 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.demo { margin: 0; scroll-snap-align: center; }
.demo__ecran { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--bord-2); border-radius: 26px;
  background: radial-gradient(70% 45% at 30% 20%, rgba(168, 85, 247, .38), transparent 70%), radial-gradient(60% 40% at 80% 85%, rgba(34, 211, 238, .22), transparent 70%), linear-gradient(170deg, #1b1430, #0a0a14 70%);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .35), 0 30px 60px -32px rgba(124, 58, 237, .9); }
.demo__scene { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; pointer-events: none; }
.demo__direct { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: #ef4444; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .08em; box-shadow: 0 0 14px rgba(239, 68, 68, .6); }
.demo figcaption { display: grid; gap: 2px; padding: 12px 4px 0; }
.demo figcaption strong { font-family: var(--titre); font-size: 1.02rem; }
.demo figcaption span { color: var(--doux); font-size: .9rem; line-height: 1.4; }
@media (min-width: 720px) {
  .demos__grille { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}

.fonction { display: grid; gap: 22px; align-items: center; margin: 44px 0 0; }
.fonction__texte h3 { margin: 14px 0 8px; font-family: var(--titre); font-size: clamp(1.3rem, 3.4vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; }
.fonction__texte > p { margin: 0; color: var(--doux); font-size: 1.02rem; }
.puces { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.puces li { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.puces .icone { flex: none; width: 19px; height: 19px; color: var(--ok); }
.fenetre { overflow: hidden; border: 1px solid var(--bord-2); border-radius: 18px; background: #0b0b14; box-shadow: 0 40px 80px -40px rgba(124, 58, 237, .85), 0 0 0 1px rgba(255, 255, 255, .03); }
.fenetre__barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--bord); background: #12121f; }
.fenetre__barre i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.fenetre__barre i:nth-child(2) { background: #febc2e; }
.fenetre__barre i:nth-child(3) { background: #28c840; }
.fenetre__barre span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--doux); font-size: .75rem; }
.fenetre img, .mobile-cadre img { display: block; width: 100%; height: auto; }
.mobile-cadre { width: min(100%, 300px); margin: 0 auto; padding: 10px; overflow: hidden; border: 1px solid var(--bord-2); border-radius: 40px; background: #040408; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .03), 0 40px 80px -40px rgba(124, 58, 237, .9); }
.mobile-cadre img { border-radius: 30px; max-height: 560px; object-fit: cover; object-position: top; }
@media (min-width: 900px) {
  .fonction { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; margin-top: 64px; }
  .fonction--inverse .fonction__texte { order: 2; }
}

.offre { display: grid; gap: 18px; }
.offre--accueil { max-width: 720px; margin: 0 auto; padding: 32px 26px; text-align: left; box-shadow: 0 0 0 1px rgba(168, 85, 247, .35), 0 40px 90px -40px rgba(124, 58, 237, .95); }
.offre--accueil > .bouton { justify-self: stretch; text-align: center; }
.offre__montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.offre__chiffre { font-family: var(--titre); font-size: clamp(2.8rem, 9vw, 3.8rem); line-height: 1; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offre__unite { color: var(--doux); font-size: 1.1rem; font-weight: 700; }
.offre .offre__ttc { margin: -8px 0 0; }
.offre__aide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.offre__aide .icone { width: 16px; height: 16px; color: var(--ok); }
.offre__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.offre__actions form { margin: 0; }
.offre__forme { display: grid; gap: 12px; }
/* Essai gratuit : ce qui se passe aujourd'hui et à la fin de l'essai, avant de payer. */
.essai-info { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid rgba(34, 211, 238, .45); border-radius: 14px; background: rgba(34, 211, 238, .07); }
.essai-info p { margin: 0; line-height: 1.5; }
.essai-info__titre { display: flex; align-items: center; gap: 8px; color: var(--texte); }
.essai-info__titre .icone { width: 18px; height: 18px; color: var(--cyan); }
.offre__forme .case { align-items: flex-start; line-height: 1.45; }
.offre__forme .case input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; }
.offre__aide { flex-wrap: nowrap; align-items: flex-start; }
.offre__aide .icone { flex: none; margin-top: 2px; }
.offre__forme .offre__aide { flex-wrap: wrap; }
.offre__aide > span { flex: 1 1 0; min-width: 0; }
.offre__aide .pastille-test { flex-basis: 100%; }
.offre__forme .bouton { width: 100%; }
/* Les deux formules (08/10/2026) : côte à côte dès 720 px, l'annuelle mise
   en avant ; à cocher sur la page Abonnement. */
.formules { display: grid; gap: 16px; max-width: 760px; margin: 0 auto 22px; }
@media (min-width: 720px) { .formules { grid-template-columns: 1fr 1fr; } }
.formule { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px 22px; border: 1px solid var(--bord, rgba(255, 255, 255, .12)); border-radius: 18px; background: var(--carte, rgba(18, 18, 30, .92)); text-align: left; }
.formule--annuel { border-color: rgba(168, 85, 247, .6); box-shadow: 0 0 0 1px rgba(168, 85, 247, .35), 0 16px 40px rgba(124, 58, 237, .18); }
.formule__badge { position: absolute; top: -12px; right: 18px; padding: 4px 12px; border-radius: 999px; background: var(--degrade, linear-gradient(90deg, #a855f7, #ec4899)); color: #fff; font-size: .85rem; font-weight: 800; }
.formule__nom { font-family: var(--titre); font-size: 1.15rem; font-weight: 700; }
.formule__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.formule__chiffre { font-family: var(--titre); font-size: clamp(2.2rem, 7vw, 2.8rem); line-height: 1.05; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.formule__unite { color: var(--doux); font-weight: 700; }
.formule__ligne { color: var(--doux); font-size: .92rem; line-height: 1.45; }
.formule__ligne--note { color: #fbbf24; font-weight: 700; }
.formule__bouton { margin-top: 8px; width: 100%; text-align: center; }
.formules--choix { margin: 0; max-width: none; }
.formules--choix .formule { cursor: pointer; padding-left: 54px; }
.formules--choix .formule input { position: absolute; top: 26px; left: 20px; width: 22px; height: 22px; margin: 0; accent-color: var(--violet); }
.formules--choix .formule:has(input:checked) { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet), 0 16px 40px rgba(124, 58, 237, .25); }
.formules--choix .formule:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.formule--fermee { opacity: .55; cursor: not-allowed; }
.offre__etape { margin: 6px 0 0; font-weight: 800; color: var(--texte); }
.tarif .formules { margin-bottom: 18px; }
.tarifs-page .formules { margin-top: 8px; }
.inclus { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.inclus li { display: flex; align-items: flex-start; gap: 12px; color: var(--doux); }
.inclus strong { display: block; color: var(--texte); }
.inclus__icone { display: grid; place-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(168, 85, 247, .14); color: #d8b4fe; }
.inclus__icone .icone { width: 18px; height: 18px; }
@media (min-width: 720px) { .inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; } }
.etat-abonnement { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px solid var(--bord-2); border-radius: 999px; font-weight: 700; }
.etat-abonnement::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--doux); }
.etat-abonnement--ok::before { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.etat-abonnement--non::before { background: #ffb45a; }
.pastille-test { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 180, 90, .15); color: #ffc98a; }
.abonnement-page .offre { max-width: 760px; }

.faq { max-width: 820px; margin-left: auto; margin-right: auto; }
.faq__item { margin-top: 10px; border: 1px solid var(--bord); border-radius: 16px; background: var(--verre); }
.faq__item summary { position: relative; padding: 16px 48px 16px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; top: 50%; right: 18px; color: var(--violet); font-size: 1.4rem; font-weight: 400; line-height: 1; transform: translateY(-50%); transition: transform .25s ease; }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { margin: 0; padding: 0 18px 18px; color: var(--doux); }

.cta-final { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 12px; margin: 80px 0 30px; padding: 44px 22px; overflow: hidden; border: 1px solid rgba(168, 85, 247, .4); border-radius: 28px; text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, rgba(168, 85, 247, .32), transparent 70%), linear-gradient(180deg, #17122a, #0b0b15); box-shadow: 0 40px 90px -40px rgba(124, 58, 237, .95); }
.cta-final h2 { max-width: 20ch; margin: 0; font-family: var(--titre); font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.12; }
.cta-final p { margin: 0; color: var(--doux); }
.cta-final__logo { width: 56px; height: 56px; filter: drop-shadow(0 12px 26px rgba(168, 85, 247, .7)); }
.cta-final__connexion { font-size: .9rem; }

.barre-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border: 1px solid rgba(168, 85, 247, .45); border-radius: 999px; background: rgba(14, 12, 26, .96); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .85), 0 0 30px -10px rgba(168, 85, 247, .7);
  transform: translateY(140%); opacity: 0; transition: transform .35s var(--doux-sortie), opacity .25s ease; }
.barre-cta--visible { transform: translateY(0); opacity: 1; }
.barre-cta__texte { color: var(--doux); font-size: .9rem; white-space: nowrap; }
.barre-cta__texte strong { color: var(--texte); }
@media (max-width: 440px) { .barre-cta__plus { display: none; } }
.barre-cta .bouton { flex: none; width: auto; padding: 0 22px; }
@media (min-width: 720px) {
  .barre-cta { left: 50%; right: auto; width: max-content; transform: translate(-50%, 140%); }
  .barre-cta--visible { transform: translate(-50%, 0); }
}
@media (max-width: 560px) {
  .accueil .heros__actions .bouton--geant { width: 100%; }
}
@media (max-width: 380px) { .barre-cta__texte { display: none; } }
@media (min-width: 720px) {
  .trois-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Cast : la caméra du téléphone dans le live ─────────────────────────── */
.cast__forme { display: grid; gap: 16px; margin-top: 16px; }
.cast__reglages { display: grid; gap: 12px 18px; }
.cast__reglages select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; }
.cast__disposition { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.cast__disposition legend { margin-bottom: 6px; padding: 0; font-weight: 600; }
.cast__disposition { grid-column: 1 / -1; }
.cast__disposition .case { align-items: flex-start; justify-content: flex-start; text-align: left; line-height: 1.4; }
.formulaire .cast__disposition input[type="radio"] { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--violet); }
/* Affichages du Cast : un aperçu par choix, cliquable (le bouton radio est
   la carte entière ; le choisi s'allume). */
/* Widget Image : « Mes images » en vignettes à cocher. */
.choix-image { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix-image legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
.choix-image__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-bottom: 10px; }
.choix-image__case { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--bord-2); border-radius: 12px; background: repeating-conic-gradient(#20202e 0 25%, #171723 0 50%) 0 0 / 16px 16px; cursor: pointer; }
.choix-image__case img { width: 100%; height: 100%; object-fit: contain; }
.choix-image__case--aucune span { color: var(--doux); font-size: .8rem; }
.formulaire .choix-image__case input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choix-image__case:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }
.choix-image__case:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.choix-image__importer { cursor: pointer; }
.cast-choix__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cast-choix { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 12px 12px; border: 1px solid var(--bord-2); border-radius: 16px; background: rgba(255, 255, 255, .02); text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .25s var(--ressort); }
.cast-choix:hover { border-color: rgba(168, 85, 247, .5); transform: translateY(-2px); }
.formulaire .cast-choix input[type="radio"] { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; margin: 0; }
.cast-choix:has(input:checked) { border-color: var(--violet); background: rgba(168, 85, 247, .12); box-shadow: 0 0 0 1px var(--violet), 0 12px 30px -16px rgba(168, 85, 247, .9); }
.cast-choix:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cast-choix__ecran { position: relative; width: 78px; aspect-ratio: 9 / 16; overflow: hidden; border: 2px solid #3a3a52; border-radius: 12px; background: linear-gradient(160deg, #2b2b3d, #1a1a27); }
.cast-choix__pc { position: absolute; inset: 0; display: grid; place-items: center; color: #5b5b78; }
.cast-choix__pc .icone { width: 34px; height: 34px; }
.cast-choix__tel { position: absolute; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(150deg, #c084fc, #a855f7 45%, #22d3ee); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.cast-choix__tel .icone { width: 18px; height: 18px; }
.cast-choix__ecran--plein .cast-choix__tel { inset: 0; border-radius: 0; }
.cast-choix__ecran--incrustation .cast-choix__tel { right: 6px; bottom: 6px; width: 40%; aspect-ratio: 9 / 16; }
.cast-choix__ecran--incrustation .cast-choix__tel .icone { width: 13px; height: 13px; }
.cast-choix__ecran--source .cast-choix__tel { left: 14%; top: 22%; width: 60%; height: 46%; outline: 2px dashed rgba(255, 255, 255, .85); outline-offset: 2px; }
.cast-choix__nom { color: var(--texte); font-weight: 700; font-size: .9rem; line-height: 1.25; }
.cast-choix__aide { color: var(--doux); font-size: .78rem; line-height: 1.3; }
.cast-choix__ecran--overlay .cast-choix__tel { inset: 0; border-radius: 0; }
/* « Dans un overlay » : la caméra, et les widgets de l'overlay par-dessus. */
.cast-choix__ecran--overlay::before, .cast-choix__ecran--overlay::after { content: ''; position: absolute; z-index: 1; border-radius: 4px; }
.cast-choix__ecran--overlay::before { top: 7px; left: 7px; right: 7px; height: 9px; background: rgba(255, 255, 255, .8); }
.cast-choix__ecran--overlay::after { left: 7px; bottom: 9px; width: 42%; height: 16px; background: #22d3ee; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.cast__dans-overlay { display: grid; gap: 14px; grid-column: 1 / -1; padding: 14px; border: 1px solid var(--bord-2); border-radius: 16px; background: rgba(168, 85, 247, .05); }
.cast__dans-overlay[hidden] { display: none; }
.cast__disposition--comment .cast-choix__liste { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cast__disposition--comment .cast-choix__ecran { width: 56px; }
.cast__demarrer { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cast__demarrer .icone { width: 24px; height: 24px; }
.cast__arreter { margin-top: 10px; }
.cast__qr { display: flex; justify-content: center; margin: 8px 0 12px; }
.cast__savoir li { align-items: flex-start; font-weight: 400; }
.cast__savoir li .icone { margin-top: 3px; }
@media (min-width: 720px) {
  .cast__reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Le direct, sur le téléphone : la caméra plein écran, le fil par-dessus. */
html.cast-en-direct, html.cast-en-direct body { overflow: hidden; }
.cast-direct { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #000; color: #fff; }
.cast-direct__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.cast-direct__haut { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.cast-direct__badge { padding: 4px 10px; border-radius: 8px; background: #ef4444; font-size: .78rem; font-weight: 800; letter-spacing: .06em; box-shadow: 0 0 16px rgba(239, 68, 68, .6); }
.cast-direct__chrono, .cast-direct__likes { padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cast-direct__likes { margin-left: auto; }
/* Le fil défile au doigt (relire ce qu'on a manqué) ; le geste reste dans
   le fil (ni la page, ni la caméra ne bougent). */
.cast-fil { position: absolute; left: 10px; right: 76px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; max-height: 42vh; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; list-style: none; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%); mask-image: linear-gradient(to bottom, transparent, #000 14%); }
.cast-fil::-webkit-scrollbar { display: none; }
.cast-fil__nouveaux { position: absolute; left: 10px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 4px); min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: #a855f7; color: #fff; font: inherit; font-size: .88rem; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); cursor: pointer; }
.cast-fil__nouveaux[hidden] { display: none; }
.cast-fil__ligne { flex: none; align-self: flex-start; max-width: 100%; padding: 6px 10px; border-radius: 14px; background: rgba(0, 0, 0, .1); font-size: .92rem; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.cast-fil__ligne strong { margin-right: 6px; color: #c4b5fd; }
.cast-fil__ligne--cadeau { background: rgba(168, 85, 247, .45); }
.cast-fil__ligne--evenement { background: rgba(34, 211, 238, .24); }
.cast-fil__ligne--question { background: rgba(251, 191, 36, .26); }
.cast-fil__sticker { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }
.cast-fil__emote { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -.3em; margin: 0 1px; }
/* La vitre sur l'image : aucun geste ne va à la caméra (ni zoom, ni mise au
   point de VDO.Ninja) ; ni pincement, ni défilement de la page. */
.cast-direct__vitre { position: absolute; inset: 0; touch-action: none; }
/* Le zoom : deux petits boutons ronds à droite, au-dessus des grands. */
.cast-zoom { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.cast-zoom[hidden] { display: none; }
.cast-zoom__bouton { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 1.6rem; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; }
.cast-zoom__bouton:disabled { opacity: .35; }
.cast-zoom__niveau { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cast-fil__ligne--doux { color: rgba(255, 255, 255, .75); font-size: .82rem; }
.cast-badges { display: inline-flex; gap: 3px; margin-right: 5px; vertical-align: -3px; }
.cast-badge { display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 6px 0 2px; border-radius: 9px; background: rgba(255, 255, 255, .2); font-size: .68rem; font-weight: 800; line-height: 1; text-shadow: none; white-space: nowrap; }
.cast-badge--icone { padding: 0 2px; }
.cast-badge__icone { width: 15px; height: 15px; object-fit: contain; }
.cast-cadeaux { position: absolute; left: 10px; top: 64px; display: grid; gap: 8px; pointer-events: none; }
.cast-cadeau { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(168, 85, 247, .85), rgba(236, 72, 153, .6)); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); animation: cast-arrive .35s cubic-bezier(.2, .9, .3, 1.2); transition: opacity .5s ease, transform .5s ease; }
.cast-cadeau img { width: 36px; height: 36px; object-fit: contain; }
.cast-cadeau div { display: grid; line-height: 1.15; }
.cast-cadeau strong { font-size: .9rem; }
.cast-cadeau span { font-size: .8rem; opacity: .9; }
.cast-cadeau--part { opacity: 0; transform: translateX(-30px); }
@keyframes cast-arrive { from { opacity: 0; transform: translateX(-40px) scale(.9); } }
.cast-direct__boutons { position: absolute; right: 10px; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.cast-direct__boutons--repliables { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.cast-direct--outils .cast-direct__boutons--repliables { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.cast-direct__engrenage { position: absolute; right: 12px; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; place-content: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 0 0 1.5px rgba(255, 255, 255, .25); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .3s ease, background-color .2s ease; }
.cast-direct--outils .cast-direct__engrenage { transform: rotate(90deg); background: rgba(168, 85, 247, .75); }
/* Micro coupé, boutons repliés : un point rouge sur l'engrenage. */
.cast-direct__engrenage--muet::after { content: ""; position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #000; }
.cast-direct__bouton { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cast-direct__rond { display: grid; place-content: center; width: 66px; height: 66px; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .25); transition: transform .12s ease; }
.cast-direct__bouton:active .cast-direct__rond { transform: scale(.92); }
.cast-direct__mot { font-size: .78rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.cast-direct__bouton--coupe .cast-direct__rond { background: rgba(239, 68, 68, .5); }
.cast-direct__bouton--stop .cast-direct__rond { background: #ef4444; box-shadow: 0 6px 18px rgba(239, 68, 68, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.cast-direct__bouton:disabled { opacity: .5; }
/* L'aperçu : la caméra ici seulement, « Passer à l'écran » en bas. */
.cast-apercu { object-fit: cover; }
.cast-apercu--miroir { transform: scaleX(-1); }
.cast-direct__badge--apercu { background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.cast-direct__annuler { margin-left: auto; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; pointer-events: auto; cursor: pointer; }
.cast-apercu__message { position: absolute; left: 14px; right: 96px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 84px); margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .55); font-size: .92rem; line-height: 1.35; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cast-apercu__message:empty { display: none; }
.cast-apercu__passer { position: absolute; left: 14px; right: 96px; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border: 0; border-radius: 20px; background: linear-gradient(135deg, #ef4444, #db2777); box-shadow: 0 10px 26px rgba(239, 68, 68, .5); color: #fff; font: inherit; font-family: var(--titre); font-size: 1.15rem; cursor: pointer; touch-action: manipulation; }
.cast-apercu__passer:disabled { opacity: .6; }
/* Le masque du démarrage (l'écran de réglages gris de VDO.Ninja reste
   caché), et l'état de la liaison avec le live. */
.cast-masque { position: absolute; inset: 0; display: grid; place-items: center; background: #000; transition: opacity .35s ease; }
.cast-masque--part { opacity: 0; }
.cast-masque__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.65); }
.cast-masque__texte { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-weight: 700; }
.cast-masque__roue { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: tourner .8s linear infinite; }
.cast-direct__liaison { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 42px); left: 12px; margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #ffc98a; font-size: .8rem; font-weight: 700; pointer-events: none; }
.cast-direct__liaison--ok { color: #86efac; }
.cast-direct .cast-cadeaux { top: calc(max(12px, env(safe-area-inset-top)) + 80px); }
.cast-direct--apercu .cast-direct__boutons { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 84px); }

/* ── Adresses secrètes : un bouton « Copier », jamais l'adresse en clair ── */
.copie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 4px; }
.copie__bouton { display: inline-flex; align-items: center; gap: 8px; }
.copie__bouton .icone { flex: none; width: 18px; height: 18px; }
.copie__bouton--fait { border-color: var(--ok); }
.copie__voir summary { color: var(--doux); font-size: .85rem; cursor: pointer; }
.copie__voir code { display: block; max-width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--fond); font-size: .78rem; word-break: break-all; }
.copie__voir[open] { flex-basis: 100%; }
.copie__voir--liste { margin-top: 10px; }
.copie__voir--liste ul { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.copie__voir--liste li { display: grid; gap: 4px; }
.copie__voir--liste li span { font-size: .85rem; font-weight: 600; }
.raccourcis li .copie { margin: 0; }
.cast__source { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ── Double authentification (08/10/2026) ─────────────────────────────── */
.a2f-qr { display: flex; justify-content: center; padding: 6px 0 14px; }
.a2f-action { margin-top: 10px; }
.a2f-action summary { padding: 10px 0; color: var(--cyan); cursor: pointer; font-weight: 600; }
.a2f-cle { display: inline-block; padding: 6px 10px; border: 1px solid var(--bord-2); border-radius: 8px; background: var(--fond); font-size: 1rem; letter-spacing: .08em; word-break: break-all; }
.a2f-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 16px 0 20px; padding-left: 1.6em; }
.a2f-codes code { display: inline-block; padding: 7px 10px; border: 1px solid var(--bord-2); border-radius: 10px; background: var(--fond); font-size: 1.02rem; letter-spacing: .12em; color: var(--texte); }
@media (max-width: 420px) { .a2f-codes { grid-template-columns: 1fr; } }

/* ── Pages à onglets : Animations & Déclencheurs, Bilans & Comptabilité
      (08/10/2026) ───────────────────────────────────────────────────────── */
.onglets { grid-column: 1 / -1; display: grid; gap: 16px; min-width: 0; }
.onglets__barre {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--bord);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panneau), var(--fond-2));
  box-shadow: var(--ombre);
  overflow-x: auto;
  scrollbar-width: none;
}
.onglets__barre::-webkit-scrollbar { display: none; }
.onglet {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 13px;
  color: var(--doux);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--tempo), color var(--tempo);
}
.onglet:hover { color: var(--texte); background: rgba(255, 255, 255, .04); }
.onglet:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.onglet[aria-selected="true"] { background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; box-shadow: 0 8px 22px -10px rgba(168, 85, 247, .9); }
.onglet__icone { width: 18px; height: 18px; flex: none; }
.onglet__compte { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .78rem; text-align: center; }
.onglet[aria-selected="true"] .onglet__compte { background: rgba(255, 255, 255, .22); }
.onglets__panneau { display: grid; gap: 16px; min-width: 0; }
.onglets__panneau > * { grid-column: 1 / -1; }
/* Sans script : les panneaux à la suite, séparés. */
.onglets:not(.onglets--actifs) .onglets__panneau + .onglets__panneau { padding-top: 10px; border-top: 1px dashed var(--bord-2); }
.onglets--actifs .onglets__panneau[hidden] { display: none; }
.onglets--actifs .onglets__panneau:not([hidden]) { animation: apparition-onglet .28s var(--doux-sortie, ease) both; }
@keyframes apparition-onglet { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onglets--actifs .onglets__panneau:not([hidden]) { animation: none; } }

/* Titre de carte + bouton sur une ligne. */
.carte__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: .7em; }
.bloc .carte__entete h2 { margin: 0; }

/* Résumé « en un coup d'œil » : tuiles cliquables, état d'OBS, raccourcis. */
.resume-anim { display: grid; gap: 14px; }
.tuiles-resume { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tuile-resume {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 14px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  color: var(--texte);
  text-decoration: none;
  transition: border-color var(--tempo), transform var(--tempo), background var(--tempo);
}
.tuile-resume:hover { border-color: rgba(168, 85, 247, .45); background: rgba(168, 85, 247, .06); transform: translateY(-1px); }
.tuile-resume__icone { grid-row: 1 / span 2; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: rgba(168, 85, 247, .14); color: #d8b4fe; }
.tuile-resume--obs .tuile-resume__icone { background: rgba(34, 211, 238, .12); color: var(--cyan); }
.tuile-resume--creations .tuile-resume__icone { background: rgba(53, 208, 127, .12); color: var(--ok); }
.tuile-resume--videos .tuile-resume__icone { background: rgba(255, 180, 90, .12); color: #ffc98a; }
.tuile-resume__nombre { font-family: var(--titre, inherit); font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.tuile-resume__libelle { color: var(--doux); font-size: .85rem; }
.bloc .resume-anim__obs { font-size: .9rem; }
.actions-rapides { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-rapides .bouton { flex: 1 1 auto; }

/* Volets dépliants (details) : nouveau déclencheur, créer, limite… */
.volet > summary { list-style: none; }
.volet > summary::-webkit-details-marker { display: none; }
.volet__titre { position: relative; display: flex; align-items: center; gap: 14px; padding-right: 36px; cursor: pointer; }
.volet__titre::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--doux);
  border-bottom: 2px solid var(--doux);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--tempo);
}
.volet[open] > .volet__titre::after { transform: translateY(-30%) rotate(-135deg); }
.volet__icone { display: grid; place-content: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; box-shadow: 0 8px 20px -10px rgba(168, 85, 247, .9); }
.volet__icone .icone { width: 20px; height: 20px; }
.volet__texte { display: grid; gap: 2px; }
.volet__texte strong { font-size: 1.08rem; color: var(--texte); }
.volet__sous { color: var(--doux); font-size: .88rem; }
.volet__corps { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bord); }
.volet:not([open]):hover { border-color: rgba(168, 85, 247, .35); }

/* Déclencheurs rangés par famille, chacune sa couleur. */
.famille { --famille: var(--violet); margin-top: 6px; }
.famille + .famille { margin-top: 18px; }
.famille--cadeaux { --famille: #f472b6; }
.famille--communaute { --famille: var(--cyan); }
.famille--chat { --famille: #fbbf24; }
.bloc .famille__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--texte); font-size: .98rem; }
.famille__icone { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: color-mix(in srgb, var(--famille) 18%, transparent); color: var(--famille); }
.famille .regles { margin-bottom: 0; }
.famille .regles li { border-left: 3px solid var(--famille); }
.regle__quoi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.regle__genre { padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.regle__genre--obs { background: rgba(34, 211, 238, .12); color: var(--cyan); }
.regle__genre--video { background: rgba(255, 180, 90, .12); color: #ffc98a; }
.regle__genre--creation { background: rgba(53, 208, 127, .12); color: var(--ok); }
.regle__volume { display: inline-flex; align-items: center; gap: 4px; }
.regle__icone { width: 14px; height: 14px; }

@media (min-width: 720px) {
  .tuiles-resume { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .actions-rapides .bouton { flex: 0 1 auto; }
}
/* Icône dans un bouton : à la taille du texte. */
.bouton > .icone { width: 18px; height: 18px; flex: none; }
.bouton--petit > .icone { width: 16px; height: 16px; }
.famille:last-of-type + .suite, .bloc .famille ~ .suite { margin-top: 16px; }

/* Compteurs qui servent d'onglets (Animations & Déclencheurs). */
.onglets__barre--tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; overflow: visible; }
.onglets__barre--tuiles .tuile-resume[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(168, 85, 247, .32), rgba(124, 58, 237, .22));
  box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .55), 0 10px 26px -14px rgba(168, 85, 247, .9);
}
.onglets__barre--tuiles .tuile-resume[aria-selected="true"] .tuile-resume__libelle { color: var(--texte); }
.onglets__barre--tuiles .tuile-resume:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (min-width: 720px) { .onglets__barre--tuiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }

/* Remote (08/10/2026) : rangées en boutons directs, réglage sous l'aperçu. */
.tele__edition { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bord); }
.tele__edition .reglages-touches { margin: 0; }
.tele__invite { margin: 0; text-align: center; }
.reglage-touche__mini--ajout { display: grid; place-content: center; background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; }
/* Avec script : seule la touche choisie (ou l'ajout) est montrée. */
.tele__edition--js .reglage-touche:not(.est-actif) { display: none; }
.tele__edition--js .reglages-touches > li:not(:has(.est-actif)) { display: none; }
.tele__edition--js .reglage-touche.est-actif { animation: apparition-onglet .25s var(--doux-sortie, ease) both; }
.touche--choisie .touche__bouton, .touche--choisie.touche__bouton { outline: 2px solid var(--cyan); outline-offset: 3px; }
a.bouton[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ── Remote (08/10/2026) : rangées libres, outils sur les touches, icônes ─ */
.telecommande { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rangee { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.rangee--titre { grid-template-columns: minmax(0, 1fr); }
.rangee .touche-titre { grid-column: 1 / -1; margin: 6px 2px 0; }
.telecommande > .rangee:first-child .touche-titre, .telecommande > .rangee-fente:first-child + .rangee .touche-titre { margin-top: 0; }
.touche__image { display: block; width: 26px; height: 26px; object-fit: contain; }
.tele__ecran .touche__image { width: 22px; height: 22px; }
/* Éditeur : fentes entre les rangées (une nouvelle rangée), rangée pleine. */
.rangee-fente { height: 4px; margin: -7px 0; border-radius: 6px; transition: height .15s ease, margin .15s ease, background .15s ease; }
.telecommande--glisse .rangee-fente { height: 22px; margin: -4px 0; border: 1px dashed rgba(34, 211, 238, .35); }
.rangee-fente--cible { height: 40px !important; background: rgba(34, 211, 238, .16); border-color: var(--cyan) !important; }
.telecommande--glisse .rangee { border-radius: 14px; outline: 1px dashed transparent; outline-offset: 4px; }
.rangee--pleine { outline-color: rgba(255, 107, 107, .7) !important; background: rgba(255, 107, 107, .06); }
.touche--tenue { opacity: .45; }
/* Les outils d'une touche (éditeur) : au survol, toujours visibles au doigt. */
[data-apercu-touches] .touche, [data-apercu-touches] .touche-titre { position: relative; }
.touche__outils { position: absolute; top: 4px; right: 4px; z-index: 2; display: flex; gap: 3px; opacity: 0; transform: translateY(-2px); transition: opacity .15s ease, transform .15s ease; }
.touche__outils form { margin: 0; }
[data-apercu-touches] .touche:hover .touche__outils, [data-apercu-touches] .touche:focus-within .touche__outils,
[data-apercu-touches] .touche-titre:hover .touche__outils, [data-apercu-touches] .touche-titre:focus-within .touche__outils { opacity: 1; transform: none; }
@media (hover: none) { .touche__outils { opacity: 1; transform: none; } }
.touche__outil { display: grid; place-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 8px; background: rgba(7, 7, 13, .78); color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.touche__outil .icone { width: 14px; height: 14px; }
.touche__outil:hover { background: var(--violet-2); }
.touche__outil--danger:hover, form.arme .touche__outil--danger { background: var(--erreur); }
.touche-titre .touche__outils { top: 50%; transform: translateY(-50%); }
/* Choix de l'icône : une grille, les images importées, l'import. */
.choix-icones { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix-icones legend { margin-bottom: 6px; font-weight: 600; }
.choix-icones__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.choix-icone { position: relative; display: grid; place-content: center; min-height: 44px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.choix-icone input { position: absolute; opacity: 0; pointer-events: none; }
.choix-icone .icone { width: 20px; height: 20px; }
.choix-icone img { width: 26px; height: 26px; object-fit: contain; }
.choix-icone:hover { border-color: rgba(168, 85, 247, .5); }
.choix-icone:has(input:checked) { border-color: var(--violet); background: rgba(168, 85, 247, .18); box-shadow: inset 0 0 0 1px var(--violet); }
.choix-icone:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.choix-icone__aucune { font-size: .68rem; color: var(--doux); }
.choix-icone__perso { position: relative; display: grid; }
.choix-icone__retirer { position: absolute; top: -6px; right: -6px; display: none; place-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #2a2a3d; color: #fff; cursor: pointer; }
.choix-icone__retirer .icone { width: 11px; height: 11px; }
.choix-icone__perso:hover .choix-icone__retirer, .choix-icone__retirer:focus-visible, .choix-icone__retirer.arme { display: grid; }
.choix-icone__retirer.arme { background: var(--erreur); }
@media (hover: none) { .choix-icone__retirer { display: grid; } }
.choix-icone--importer { border-style: dashed; color: var(--cyan); }
.choix-icone--importer input[type="file"] { inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; pointer-events: auto; }
.choix-icone__plus { position: absolute; right: 5px; bottom: 2px; font-weight: 800; font-size: .8rem; }
.choix-icones .aide { margin: 6px 0 0; }
/* Camera Cast : la Remote dans l'engrenage. */
.cast-remote { position: absolute; left: 10px; right: 84px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 6; display: none; max-height: 62%; flex-direction: column; border-radius: 20px; background: rgba(10, 10, 18, .9); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cast-direct--remote .cast-remote { display: flex; animation: cast-arrive .25s ease; }
.cast-remote__tete { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px 16px; }
.cast-remote__titre { font-size: 1rem; }
.cast-remote__fermer { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.cast-remote__retour { min-height: 0; margin: 0 16px; color: var(--cyan); font-size: .85rem; }
.cast-remote__retour:empty { display: none; }
.cast-remote__corps { padding: 8px 12px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cast-remote__corps .touche__bouton { min-height: 70px; padding: 8px; }
.cast-remote__corps .touche__nom { font-size: .8rem; }
.cast-direct--remote .cast-fil, .cast-direct--remote .cast-fil__nouveaux { opacity: .25; pointer-events: none; }
/* Les trois outils tiennent sur une touche étroite : petits, en débord. */
.touche__outils { top: -9px; right: -7px; flex-wrap: nowrap; gap: 2px; }
.touche__outils .touche__outil { display: grid; place-content: center; width: 21px; height: 21px; min-height: 0; padding: 0; border: 0; border-radius: 7px; background: rgba(7, 7, 13, .9); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.touche__outils .touche__outil .icone { width: 12px; height: 12px; }
.touche__outils .touche__outil:hover { background: var(--violet-2); }
.touche__outils .touche__outil--danger:hover, .touche__outils form.arme .touche__outil--danger { background: var(--erreur); }
.touche-titre .touche__outils { top: 50%; right: 0; transform: translateY(-50%); }
.bloc .touche__outils form, .bloc .touche__outils form + form { margin: 0; }

/* ── Remote : couleurs libres, texte des touches (08/10/2026) ──────────── */
.couleur--libre { --t1: #a855f7; --t2: #6d28d9; }
.couleur-choix--libre input[type="color"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.couleur-choix--libre:not(.couleur--libre) .couleur-choix__pastille { background: conic-gradient(#ff3b3b, #ffd23b, #3bff6b, #3bd8ff, #4b5bff, #d63bff, #ff3b3b); }
.couleur-choix--libre.couleur--libre .couleur-choix__pastille { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px var(--fond), 0 0 0 4px rgba(255, 255, 255, .25); }
/* Le texte des touches, pour toute la Remote : police, taille, couleur. */
.telecommande { --police-touche: var(--titre); --echelle-touche: 1; }
.tele-police--systeme { --police-touche: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tele-police--arrondie { --police-touche: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", "Nunito", system-ui, sans-serif; }
.tele-police--serif { --police-touche: Georgia, "Times New Roman", serif; }
.tele-police--machine { --police-touche: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; }
.tele-police--impact { --police-touche: Impact, "Arial Black", "Helvetica Neue", sans-serif; }
.tele-taille--1 { --echelle-touche: .75; }
.tele-taille--2 { --echelle-touche: .88; }
.tele-taille--4 { --echelle-touche: 1.15; }
.tele-taille--5 { --echelle-touche: 1.3; }
.telecommande .touche__bouton { color: var(--texte-touche, #fff); }
.telecommande .touche__nom { font-family: var(--police-touche); font-size: calc(.98rem * var(--echelle-touche)); }
.tele__ecran .telecommande .touche__nom { font-size: calc(.84rem * var(--echelle-touche)); }
.cast-remote__corps .telecommande .touche__nom { font-size: calc(.8rem * var(--echelle-touche)); }
/* Éditeur : les deux boutons d'ajout côte à côte, le réglage du texte. */
.tele__ajouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tele__ajouts .bouton { min-width: 0; padding: 0 12px; text-align: center; }
.tele-texte { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--bord); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.tele-texte__titre { margin: 0; color: var(--texte); font-weight: 700; }
.tele-texte__champs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.tele-texte .champ { margin: 0; }
.tele-texte__couleur input[type="color"] { width: 56px; height: 44px; padding: 3px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); cursor: pointer; }
.tele-texte .bouton { justify-self: start; }
@media (max-width: 520px) { .tele-texte__champs { grid-template-columns: 1fr 1fr; } .tele-texte__couleur { grid-column: 1 / -1; } }
.tele-texte select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; }
.tele-texte label { display: block; margin-bottom: 6px; font-weight: 600; }
.tele-texte__champs { align-items: end; }
.tele-texte__couleur input[type="color"] { display: block; }

/* ── Overlay & Widgets (09/10/2026) ─────────────────────────────────────── */
/* L'aperçu d'un overlay : le cadre au bon format, la scène à l'échelle. */
.ov-apercu { position: relative; width: 100%; overflow: hidden; border-radius: 16px; background-color: #0b0b14; background-image: linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .035) 75%), linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .035) 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; box-shadow: inset 0 0 0 1px var(--bord-2); }
.ov-apercu--portrait { aspect-ratio: 9 / 16; }
.ov-apercu--paysage { aspect-ratio: 16 / 9; }
/* Un aperçu à la hauteur fixée (overlays.js) ne doit pas imposer sa largeur
   (rapport 16:9) quand la fenêtre rétrécit : il se laisse réduire, puis se
   redessine à sa nouvelle largeur. */
.ov-apercu, .ov-editeur__apercu, .ov-editeur__principal { min-width: 0; }
.ov-apercu__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.ov-calque { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ov-apercu[data-ov-edition] { cursor: crosshair; touch-action: none; }
.ov-apercu[data-ov-edition]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Les cartes des overlays. */
/* Deux overlays par rangée (24/10/2026) : de grands aperçus. Un seul sur téléphone. */
.ov-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .ov-grille { grid-template-columns: minmax(0, 1fr); } }
.ov-carte { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--bord); border-radius: 18px; background: rgba(255, 255, 255, .025); transition: border-color var(--tempo), transform var(--tempo); }
.ov-carte:hover { border-color: rgba(168, 85, 247, .45); }
/* L’aperçu au milieu de la place libre ; nom, format et détails toujours juste au-dessus des boutons (24/10/2026). */
.ov-carte__lien { display: flex; flex: 1; flex-direction: column; gap: 10px; color: var(--texte); text-decoration: none; }
.ov-carte .ov-apercu { margin-top: auto; margin-bottom: auto; }
.ov-carte .ov-apercu--portrait { width: auto; max-width: 100%; height: min(560px, 70vh); margin-left: auto; margin-right: auto; }
.ov-carte .ov-apercu--paysage { width: 100%; }
.ov-carte__corps { display: grid; gap: 4px; }
.ov-carte__nom { font-size: 1.05rem; }
.ov-carte__infos { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-carte__detail { color: var(--doux); font-size: .85rem; }
.ov-ouvert { color: var(--ok); }
.ov-carte__pied { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ov-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: rgba(168, 85, 247, .16); color: #d8b4fe; font-size: .75rem; font-weight: 700; }
.ov-badge--anim { background: rgba(34, 211, 238, .14); color: var(--cyan); }
.ov-badge--aucun { background: rgba(255, 255, 255, .06); color: var(--doux); }
/* Créer un overlay : le bouton de l’en-tête déplie ce panneau. */
.ov-nouveau { display: grid; gap: 12px; max-width: 640px; margin: 14px 0 0; padding: 16px; border: 1px dashed rgba(168, 85, 247, .5); border-radius: 18px; background: rgba(168, 85, 247, .05); }
.ov-nouveau[hidden] { display: none; }
.ov-nouveau .ov-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-nouveau .ov-formats legend { grid-column: 1 / -1; }
.ov-nouveau__boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-nouveau--entree { animation: ov-entree .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes ov-entree { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ov-nouveau--entree { animation: none; } }
.ov-plein { margin: 0; }
[data-ov-creer] .icone { width: 18px; height: 18px; }
/* Choix du format : deux petits cadres. */
.ov-formats { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.ov-formats legend { margin-bottom: 6px; font-weight: 600; }
.ov-format { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--bord-2); border-radius: 12px; cursor: pointer; font-size: .9rem; }
.ov-format input { position: absolute; opacity: 0; }
.ov-format:has(input:checked) { border-color: var(--violet); background: rgba(168, 85, 247, .14); }
.ov-format:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ov-format__cadre { flex: none; border: 2px solid currentColor; border-radius: 3px; opacity: .8; }
.ov-format__cadre--portrait { width: 12px; height: 21px; }
.ov-format__cadre--paysage { width: 21px; height: 12px; }
/* Onglet Widgets : l'overlay de chaque widget, la création. */
.creation__overlay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.widget-overlay { display: flex; align-items: center; gap: 8px; margin: 0; }
.widget-overlay label { color: var(--doux); font-size: .85rem; }
.widget-overlay select, .creer-widget select, .ov-ajout__existant select { min-height: 40px; padding: 0 10px; border: 1px solid var(--bord-2); border-radius: 10px; background: var(--fond); color: var(--texte); font: inherit; }
.creer-widget { display: grid; gap: 12px; }
.creer-widget .champ select { width: 100%; min-height: 46px; }
.creer-widget__nouveau { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--bord-2); border-radius: 14px; }
.creer-widget__nouveau[hidden] { display: none; }
.creer-widget__consigne { margin: 4px 0 0; color: var(--texte); font-weight: 600; }
/* La page d'un overlay. */
.ov-editeur { display: grid; gap: 16px; }
.ov-editeur__apercu .ov-apercu--portrait { max-width: 460px; margin: 0 auto; }
.ov-editeur__aide { font-size: .82rem; }
/* Placer à la souris : le widget choisi, ses coins pour la taille. */
.ov-selection { position: absolute; z-index: 3; border: 2px solid var(--cyan); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(7, 7, 13, .25); pointer-events: none; }
.ov-selection[hidden] { display: none; }
.ov-poignee { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--cyan); pointer-events: auto; }
.ov-poignee--no { left: -8px; top: -8px; cursor: nwse-resize; }
.ov-poignee--ne { right: -8px; top: -8px; cursor: nesw-resize; }
.ov-poignee--so { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ov-poignee--se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ov-widget { cursor: pointer; }
.ov-widget--choisi { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.ov-barre__rond .icone { width: 18px; height: 18px; }
.ov-barre__rond:disabled { opacity: .4; cursor: default; }
.ov-editeur__retour { min-height: 1.4em; margin: 10px 0 0; color: var(--cyan); font-size: .9rem; }
.ov-editeur__cote { display: grid; gap: 16px; align-content: start; }
.ov-widgets { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ov-widget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.ov-widget__nom { display: grid; flex: 1 1 140px; min-width: 0; line-height: 1.2; }
.ov-widget__nom .doux { margin: 0; font-size: .78rem; }
.ov-widget__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ov-widget__actions form { margin: 0; }
.ov-widget__retirer { min-width: 40px; padding: 0 10px; justify-content: center; }
.ov-widget__retirer .icone { width: 18px; height: 18px; }
.types-creations--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.types-creations--compact .type-creation__texte { display: none; }
.ov-ajout { margin-top: 12px; }
/* Une liste déroulante prend la largeur de son option la plus longue (nom +
   type + overlay) : sans ces bornes, elle élargit la colonne et le bouton. */
.ov-ajout__existant { grid-template-columns: minmax(0, 1fr); }
.ov-ajout__existant .champ { min-width: 0; }
.ov-ajout__existant select { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (min-width: 1024px) {
  .ov-editeur { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .ov-editeur__apercu { position: sticky; top: var(--sous-entete); }
  /* La colonne des widgets prend la hauteur de l'aperçu, pas plus : au-delà,
     elle défile seule (sa carte est posée en absolu, hors du calcul). */
  .ov-editeur__cote { position: relative; min-height: 320px; }
  .ov-editeur__cote > .carte { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bord-2) transparent; }
  /* Vertical : l'aperçu tient dans la hauteur de la fenêtre (il reste fixe
     pendant que la colonne de droite défile), corbeille et engrenage compris. */
  .ov-editeur__apercu .ov-apercu--portrait { max-width: min(460px, calc((100vh - 285px - var(--sous-entete)) * 9 / 16)); min-width: 220px; }
}
.ov-editeur__apercu .ov-apercu--portrait + .ov-pied { max-width: 460px; margin-left: auto; margin-right: auto; }
/* Vertical : corbeille · adresse + Glisser · son · réglages ; la rangée
   prend la largeur de la carte (plus large que l'aperçu étroit). */
.ov-editeur__apercu .ov-apercu--portrait + .ov-pied--obs { max-width: none; }
.ov-pied__obs { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 6px; min-width: 0; }
.ov-pied__obs .copie { margin: 0; }
.ov-pied__obs .bouton { padding: 0 10px; gap: 6px; font-size: .82rem; white-space: nowrap; }
.ov-pied__obs .bouton .icone { width: 16px; height: 16px; }
.ov-pied--obs + .ov-editeur__etat { justify-content: center; text-align: center; }
.ov-pied--obs + .ov-editeur__etat p { margin: 8px 0 0; }
.ov-pied--obs + .ov-editeur__etat .ov-editeur__retour:empty { display: none; }
@media (min-width: 1024px) {
  .ov-editeur__apercu .ov-apercu--portrait + .ov-pied:not(.ov-pied--obs) { max-width: max(220px, min(460px, calc((100vh - 285px - var(--sous-entete)) * 9 / 16))); }
}
.creation__overlay--aucun select { border-style: dashed; color: var(--doux); }

/* ── Overlay horizontal (10/10/2026) : ses outils au-dessus de l'aperçu,
   son et réglages en fenêtres sous l'aperçu, seuls les widgets à droite. ── */
.ov-editeur__principal { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ov-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ov-barre form, .bloc .ov-barre form + form { margin: 0; }
.ov-barre--compacte { gap: 6px; }
.ov-barre--compacte .bouton { padding: 0 10px; gap: 6px; font-size: .82rem; white-space: nowrap; }
.ov-barre--compacte .bouton .icone { width: 16px; height: 16px; }
.ov-barre .copie { flex: none; }
.ov-barre__rond { min-width: 44px; padding: 0 12px; justify-content: center; font-size: 1.05rem; font-weight: 800; }
.ov-barre__corbeille { color: var(--erreur); }
.ov-barre__corbeille:hover { border-color: var(--erreur); }
.ov-barre__corbeille .icone { width: 20px; height: 20px; }
.ov-editeur__etat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
.ov-editeur__etat p { margin: 10px 0 0; }
/* Sous l'aperçu : corbeille à gauche, état au milieu, engrenage à droite. */
.ov-pied { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ov-pied .ov-editeur__etat { flex: 1 1 auto; justify-content: center; min-width: 0; text-align: center; }
.ov-pied .ov-editeur__etat p { margin: 0; }
.ov-pied .ov-editeur__retour:empty { display: none; }
.ov-pied__reglages .icone, .ov-pied__son .icone { width: 20px; height: 20px; }
.ov-pop .ov-formats { margin-top: 4px; }
.ov-pop__boutons--fin { align-items: center; justify-content: space-between; }
.ov-sous-titre { margin: 20px 0 8px; font-size: 1rem; }
/* Fenêtres natives (popover) : l'aide OBS, la confirmation de suppression. */
.ov-pop { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 22px; border: 1px solid var(--bord-2); border-radius: var(--rayon-l); background: var(--panneau); color: var(--texte); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.obs-toutes__liste { max-height: min(40vh, 320px); margin: 4px 0 18px; padding: 10px 14px 10px 32px; overflow-y: auto; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); }
.obs-toutes__liste li { padding: 3px 0; overflow-wrap: anywhere; }
.ajouter-toutes { margin: 4px 0 18px; }
/* « Un cadeau précis » : la liste, et l'image du cadeau choisi. */
.regle__params .champ[data-type="cadeau"] { grid-column: 1 / -1; }
.choix-cadeau { display: flex; align-items: center; gap: 10px; max-width: 560px; }
.choix-cadeau select { flex: 1 1 auto; min-width: 0; }
.choix-cadeau__image { flex: none; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.ov-pop::backdrop { background: rgba(5, 5, 12, .7); backdrop-filter: blur(3px); }
.ov-pop h2 { margin: 0 0 10px; font-size: 1.15rem; }
.ov-pop--danger { width: min(440px, calc(100vw - 32px)); }
.ov-pop__boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ov-pop__boutons form { margin: 0; }
/* Résolution d'un overlay horizontal. */
.ov-resolution { display: grid; gap: 10px; }
.ov-resolution__perso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ov-resolution[hidden], .ov-resolution__perso[hidden] { display: none; }
@media (min-width: 1024px) {
  .ov-editeur--paysage { width: calc(100vw - 48px); margin-left: calc((100% - (100vw - 48px)) / 2); grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr); }
  .ov-editeur--paysage .ov-editeur__apercu { position: static; }
  /* L'aperçu 16:9 tient, avec ses barres, dans la hauteur de la fenêtre
     sous le titre de la page (plus étroit, centré, sur les grands écrans). */
  .ov-editeur--paysage .ov-apercu--paysage { max-width: max(640px, calc((100vh - 450px) * 16 / 9)); margin-left: auto; margin-right: auto; }
}

/* ── Remote : 4 ou 5 touches par rangée, carrées, formes, image de fond
 *    (16/10/2026). La taille d'une touche (--cote) se calcule sur la largeur
 *    de la télécommande : une rangée = N carrés. ─────────────────────────── */
.telecommande { container-type: inline-size; --places: 4; --ecart-touches: 10px; gap: var(--ecart-touches); }
.telecommande.tele-places--5 { --places: 5; --ecart-touches: 8px; }
.telecommande .rangee { --cote: calc((100cqw - (var(--places) - 1) * var(--ecart-touches)) / var(--places)); grid-template-columns: repeat(var(--places), minmax(0, 1fr)); gap: var(--ecart-touches); }
@supports not (width: 1cqw) { .telecommande .rangee { --cote: 78px; } }
.telecommande .rangee:not(.rangee--titre) { grid-auto-rows: var(--cote); }
.telecommande .touche__bouton { min-height: 0; gap: 1px; padding: calc(var(--cote, 80px) * .1); border-radius: calc(var(--cote, 80px) * .2); }
.telecommande .rangee .touche__icone { flex-shrink: 1; min-height: 0; margin-bottom: calc(var(--cote) * .03); }
.telecommande .rangee .touche__icone .icone, .telecommande .rangee .touche__image { width: calc(var(--cote) * .23); height: calc(var(--cote) * .23); }
/* Un nom trop long : deux lignes au plus, puis « … » ; la touche garde sa forme. */
.telecommande .rangee .touche__nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; flex-shrink: 0; overflow: hidden; font-size: calc(min(var(--cote) * .18, 1.15rem) * var(--echelle-touche)); line-height: 1.12; overflow-wrap: anywhere; -webkit-hyphens: none; hyphens: none; }
.telecommande .rangee .touche__legende { flex-shrink: 0; font-size: min(calc(var(--cote) * .1), .72rem); line-height: 1.1; }
/* Les formes. */
.tele-forme--doux .touche__bouton { border-radius: calc(var(--cote, 80px) * .36); }
.tele-forme--net .touche__bouton { border-radius: 4px; }
.tele-forme--rond .touche__bouton { border-radius: 999px; }
.tele-forme--feuille .touche__bouton { border-radius: calc(var(--cote, 80px) * .46) 6px; }
.tele-forme--hexagone .touche__bouton { border-radius: 0; clip-path: polygon(calc(var(--cote, 80px) * .26) 2%, calc(100% - var(--cote, 80px) * .26) 2%, 100% 50%, calc(100% - var(--cote, 80px) * .26) 98%, calc(var(--cote, 80px) * .26) 98%, 0 50%); }
.tele-forme--biseau .touche__bouton { border-radius: 0; clip-path: polygon(calc(var(--cote, 80px) * .22) 0, calc(100% - var(--cote, 80px) * .22) 0, 100% calc(var(--cote, 80px) * .22), 100% calc(100% - var(--cote, 80px) * .22), calc(100% - var(--cote, 80px) * .22) 100%, calc(var(--cote, 80px) * .22) 100%, 0 calc(100% - var(--cote, 80px) * .22), 0 calc(var(--cote, 80px) * .22)); }
/* Rond, hexagone : le contenu au centre, loin des bords coupés. */
.tele-forme--rond .rangee .touche__bouton, .tele-forme--hexagone .rangee .touche__bouton { align-items: center; justify-content: center; text-align: center; }
.tele-forme--rond .rangee .touche__nom, .tele-forme--hexagone .rangee .touche__nom { margin-top: 0; }
.tele-forme--rond .rangee .touche__bouton { padding: calc(var(--cote) * .13); }
.tele-forme--hexagone .rangee .touche__bouton { padding-inline: calc(var(--cote) * .13); }
.tele-forme--rond .rangee .touche__nom, .tele-forme--hexagone .rangee .touche__nom { font-size: calc(min(var(--cote) * .16, 1.05rem) * var(--echelle-touche)); overflow-wrap: normal; }
/* Formes coupées : la touche choisie se signale autour, pas dedans. */
.tele-forme--hexagone .touche--choisie, .tele-forme--biseau .touche--choisie { border-radius: 8px; outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Une image de fond : toute la touche ; un voile sombre en bas garde le nom lisible. */
.touche__fond { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.touche--image .touche__bouton { background: #111; }
.touche--image .touche__bouton::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .62)); pointer-events: none; }
.touche--image .touche__bouton > :not(.touche__fond) { position: relative; z-index: 2; }
.reglage-touche__mini { position: relative; overflow: hidden; }
.reglage-touche__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Réglage de l'apparence : le choix de la forme, en vignettes. */
.formes-touches { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.formes-touches legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
.forme-choix { --cote: 40px; position: relative; display: grid; justify-items: center; gap: 5px; width: 76px; padding: 9px 4px 7px; border: 1px solid var(--bord-2); border-radius: 12px; cursor: pointer; }
.forme-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.forme-choix:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }
.forme-choix:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.forme-choix .forme-choix__apercu { display: block; flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; cursor: inherit; }
.forme-choix__nom { color: var(--doux); font-size: .72rem; line-height: 1.15; text-align: center; }
.tele-texte__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Raccourcis StreamDeck : une grille de tuiles, 3 par rangée. */
.raccourcis--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.raccourcis--grille li { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--bord-2); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.raccourcis--grille li > span { overflow-wrap: anywhere; }
.raccourcis--grille li .copie { align-self: flex-start; }
@media (max-width: 900px) { .raccourcis--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .raccourcis--grille { grid-template-columns: minmax(0, 1fr); } }

/* Listes déroulantes : le menu ouvert sur fond noir, texte clair (certains
 * navigateurs l'ouvraient en blanc, texte blanc dessus : illisible). */
select { color-scheme: dark; }
select option, select optgroup { background-color: #0b0b12; color: #f4f4f8; }
select option:checked { background-color: #3b1d6e; color: #fff; }
select option:disabled { color: #7c7c8f; }
.regle__supprimer .icone { width: 18px; height: 18px; }

/* ── Boutons à leur taille (17/10/2026) : un bouton d'envoi ne s'étire plus
 *    sur toute la largeur d'un formulaire ; sur téléphone et dans les
 *    panneaux étroits (connexion, inscription), si. ───────────────────── */
.formulaire > .bouton, .formulaire > button.bouton, .regle > .bouton, .bouton--plein { justify-self: start; width: auto; min-width: min(100%, 240px); }
.panneau .bouton--plein, .panneau .formulaire > .bouton, .tele__ajouts .bouton { justify-self: stretch; width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .formulaire > .bouton, .formulaire > button.bouton, .regle > .bouton, .bouton--plein { justify-self: stretch; width: 100%; }
}
/* Toutes les corbeilles : un carré sombre, l'icône en rouge. */
.bouton.bouton-corbeille { display: inline-grid; flex: none; place-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--bord-2); border-radius: 12px; background: rgba(255, 255, 255, .02); box-shadow: none; color: var(--erreur); }
.bouton.bouton-corbeille:hover { border-color: var(--erreur); background: rgba(239, 68, 68, .08); color: var(--erreur); box-shadow: none; }
.bouton.bouton-corbeille .icone { width: 19px; height: 19px; }
.bouton.bouton-corbeille:disabled { opacity: .35; cursor: not-allowed; }
.touche__outils .touche__outil--danger { color: #ff8a8a; }

/* Page d'une animation : « Lancer » / « Tester » et la corbeille sur une ligne. */
section[aria-labelledby="titre-lancer"] > form, section[aria-labelledby="titre-tester"] > form { display: inline-flex; margin: 0 8px 8px 0; vertical-align: middle; }
section[aria-labelledby="titre-lancer"] > .direct__retour:empty, section[aria-labelledby="titre-tester"] > .direct__retour:empty { display: none; }

/* Téléphone : onglets à largeur égale, libellé sur deux lignes au besoin
   (« Raccourcis StreamDeck » ne se coupe plus) ; segments de la roue : le
   nom sur toute la ligne, la couleur et la corbeille dessous. */
@media (max-width: 640px) {
  .onglet { flex: 1 1 0; min-width: 0; padding: 6px 10px; line-height: 1.15; text-align: center; white-space: normal; }
  .segment { grid-template-columns: minmax(0, 1fr) auto; }
  .segment > input[type="text"] { grid-column: 1 / -1; }
}

/* Remote : le QR code et le lien de la télécommande, sous l'aperçu du
 * téléphone (colonne de gauche), en pile. */
.tele__gauche { display: grid; align-content: start; gap: 18px; width: 100%; max-width: 360px; justify-self: center; }
.tele__gauche .tele__telephone { justify-self: stretch; max-width: none; }
.tele__sur-telephone { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--bord); border-radius: 22px; background: rgba(255, 255, 255, .02); }
.tele__sur-telephone h3 { margin: 0; font-size: 1.05rem; }
.tele__sur-telephone .tele-lien { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 0; }
.tele__sur-telephone .qr { width: 180px; height: 180px; }
.tele__sur-telephone .tele-lien__texte { display: grid; gap: 10px; }
.tele__sur-telephone .tele-lien__texte .doux { margin: 0; font-size: .9rem; }
.tele__sur-telephone .copie { flex-wrap: wrap; }
.tele__sur-telephone .copie .bouton { width: 100%; }
@media (min-width: 1024px) { .tele__gauche { justify-self: start; } }

/* ── Soundboard (19/10/2026) : bibliothèque et « Mes sons » ──────────────── */
.soundboard { grid-column: 1 / -1; min-width: 0; }
.sb-biblio .carte__entete, .sb-mes .carte__entete { flex-wrap: wrap; gap: 10px 16px; }
.sb-compte { font-weight: 600; }
.sb-recherche { display: flex; align-items: center; gap: 10px; min-height: 56px; margin-top: 4px; padding: 0 18px; border: 1px solid var(--bord-2); border-radius: 18px; background: var(--fond); transition: border-color .2s ease, box-shadow .2s ease; }
.sb-recherche:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .14); }
.sb-recherche > .icone { flex: none; width: 21px; height: 21px; color: var(--doux); transition: color .2s ease, transform .2s ease; }
.sb-recherche:focus-within > .icone { color: var(--cyan); transform: scale(1.08); }
.sb-recherche input { flex: 1; min-width: 0; height: 54px; border: 0; background: none; color: var(--texte); font: inherit; font-size: 1.05rem; outline: none; }
.sb-tris { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sb-tri { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--bord-2); border-radius: 999px; background: transparent; color: var(--doux); font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.sb-tri .icone { width: 16px; height: 16px; }
.sb-tri:hover { color: var(--texte); border-color: var(--violet); transform: translateY(-1px); }
.sb-tri[aria-pressed="true"] { background: linear-gradient(135deg, var(--violet), var(--violet-2)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px rgba(168, 85, 247, .9); }
.sb-tri[aria-pressed="true"] .icone { animation: sb-rebond .45s cubic-bezier(.2, 1.6, .4, 1); }
.sb-puces { --fondu-a: 0px; --fondu-b: 0px; display: flex; gap: 6px; margin: 12px -2px 0; padding: 2px 2px 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--bord-2) transparent; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fondu-a), #000 calc(100% - var(--fondu-b)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fondu-a), #000 calc(100% - var(--fondu-b)), transparent); }
/* Catégories : les bords s'estompent du côté où il en reste ; on les tire à la souris. */
.sb-puces.defile--avant { --fondu-a: 40px; }
.sb-puces.defile--apres { --fondu-b: 40px; }
.sb-puces.defile--glisse { cursor: grabbing; user-select: none; }
.sb-puces.defile--glisse .sb-puce { pointer-events: none; }
.sb-puce { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 999px; background: rgba(255, 255, 255, .02); color: var(--doux); font-family: inherit; font-size: .85rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.sb-puce:hover { color: var(--texte); border-color: var(--bord-2); }
.sb-puce[aria-pressed="true"] { border-color: var(--cyan); background: rgba(34, 211, 238, .1); color: var(--cyan); }
.sb-puce__n { margin-left: 7px; opacity: .7; font-size: .8em; font-variant-numeric: tabular-nums; }
.sons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; transition: opacity .2s ease; }
.sb--charge .sb-biblio .sons--galerie { opacity: .5; }
.son { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; cursor: pointer; border: 1px solid var(--bord); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.son:hover { transform: translateY(-2px); border-color: rgba(168, 85, 247, .45); box-shadow: 0 16px 32px -20px rgba(168, 85, 247, .9); }
.son--arrive { animation: son-arrive .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes son-arrive { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.son--part { animation: son-part .26s ease forwards; pointer-events: none; }
@keyframes son-part { to { opacity: 0; transform: scale(.94); } }
.son__ecouter { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--son-a, var(--violet)), var(--son-b, var(--cyan))); color: #fff; cursor: pointer; box-shadow: 0 8px 18px -10px var(--son-a, rgba(34, 211, 238, .9)); transition: transform .15s ease, filter .15s ease; }
.son__ecouter .icone, .son__barres i { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
/* La barre de lecture, sous le nom du son qui joue. Sa place est toujours
   gardée (invisible au repos) : jouer un son ne change la hauteur de rien.
   La zone de prise fait 12 px, mais n'en occupe que 4 dans la carte. */
.son__piste { --avance: 0; position: relative; display: block; height: 12px; margin: -4px 0; visibility: hidden; cursor: pointer; touch-action: none; }
.son__piste::before, .son__piste-plein { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 2px; }
.son__piste::before { background: rgba(255, 255, 255, .1); }
.son__piste-plein { display: block; background: linear-gradient(90deg, var(--son-a, var(--violet)), var(--son-b, var(--cyan))); transform: scaleX(var(--avance)); transform-origin: left center; }
.son__curseur { position: absolute; top: 0; left: calc(var(--avance) * 100%); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--son-a, var(--cyan)), 0 2px 6px rgba(0, 0, 0, .5); transform: scale(.8); transition: transform .12s ease; }
.son__piste:hover .son__curseur, .son__piste--tire .son__curseur { transform: scale(1.1); }
.son__piste--tire { cursor: grabbing; }
.son--ecoute .son__piste { visibility: visible; }
.son--ecoute .son__duree { color: var(--texte); font-variant-numeric: tabular-nums; }
/* Pendant l'écoute, le temps passe avant la catégorie (raccourcie) et les écoutes. */
.son__cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.son__duree { flex: none; }
.son--ecoute .son__ecoutes { display: none; }
.sb-puce--teinte::before { content: ''; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--son-a), var(--son-b)); }
.son__ecouter:hover { transform: scale(1.07); filter: brightness(1.1); }
.son__ecouter:active { transform: scale(.93); }
.son__ecouter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.son__lecture .icone { width: 20px; height: 20px; margin-left: 2px; }
.son__barres { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 3px; padding: 11px 12px; }
.son__barres i { display: block; width: 4px; height: 100%; border-radius: 2px; background: #fff; transform-origin: center; animation: son-barre .8s ease-in-out infinite; }
.son__barres i:nth-child(2) { animation-delay: -.3s; }
.son__barres i:nth-child(3) { animation-delay: -.55s; }
.son__barres i:nth-child(4) { animation-delay: -.15s; }
@keyframes son-barre { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.son--ecoute { border-color: var(--son-a, var(--cyan)); box-shadow: 0 0 0 1px var(--son-a, var(--cyan)), 0 16px 32px -20px var(--son-a, rgba(34, 211, 238, .95)); }
.son--ecoute .son__lecture { display: none; }
.son--ecoute .son__barres { display: flex; }
/* ▶ fait aussi pause : en lecture, l'icône pause au survol (toujours au doigt) ;
   en pause, ▶ revient et la barre reste là, curseur compris. */
.son__pause { display: none; }
.son__pause .icone { width: 20px; height: 20px; }
.son--ecoute:hover .son__barres, .son--ecoute .son__ecouter:focus-visible .son__barres { display: none; }
.son--ecoute:hover .son__pause, .son--ecoute .son__ecouter:focus-visible .son__pause { display: block; }
@media (hover: none) {
  .son--ecoute .son__barres { display: none; }
  .son--ecoute .son__pause { display: block; }
}
.son--ecoute.son--pause .son__barres, .son--ecoute.son--pause .son__pause { display: none; }
.son--ecoute.son--pause .son__lecture { display: block; }
.son--live.son--ecoute.son--pause .son__badge-live { opacity: 0; transform: translateY(4px) scale(.9); }
.son__infos { display: grid; flex: 1; gap: 3px; min-width: 0; }
.son__titre { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.son__meta { display: flex; gap: 10px; overflow: hidden; color: var(--doux); font-size: .8rem; white-space: nowrap; }
.son__meta > span:empty { display: none; }
.son__actions { display: flex; flex: none; align-items: center; gap: 6px; }
.son__actions form { margin: 0; }
.son__favori { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--bord-2); border-radius: 12px; background: transparent; color: var(--doux); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.son__favori .icone { width: 19px; height: 19px; transition: fill .15s ease; }
.son__favori:hover { border-color: rgba(250, 204, 21, .5); color: #facc15; }
.son__favori[aria-pressed="true"] { border-color: rgba(250, 204, 21, .55); background: rgba(250, 204, 21, .08); color: #facc15; }
.son__favori[aria-pressed="true"] .icone { fill: currentColor; }
.son__favori--pop .icone { animation: sb-rebond .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sb-rebond { 0% { transform: scale(.55) rotate(-18deg); } 60% { transform: scale(1.35) rotate(8deg); } 100% { transform: none; } }
/* ▶ joue aussi dans le live : une onde part du bouton, une pastille « live » s'allume. */
.son--live .son__ecouter { animation: sb-onde .7s ease-out; }
@keyframes sb-onde { 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, .75); } 100% { box-shadow: 0 0 0 16px rgba(168, 85, 247, 0); } }
.son__badge-live { position: absolute; top: -8px; left: 14px; padding: 1px 8px; border-radius: 999px; background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: 0; transform: translateY(4px) scale(.9); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.son--live.son--ecoute .son__badge-live { opacity: 1; transform: none; }
/* Bibliothèque : 3 sons par rangée (par défaut) ou 5, au choix. */
.sb-entete-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sb-affichage { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--bord-2); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.sb-affichage button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--doux); font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: color .15s ease, background .15s ease; }
.sb-affichage svg { width: 18px; height: 18px; fill: currentColor; }
.sb-affichage button:hover { color: var(--texte); }
.sb-affichage button[aria-pressed="true"] { background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; }
.soundboard .sons--galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.soundboard.sb--c5 .sons--galerie { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Bibliothèque et Mes sons (23/10/2026) : 3 ou 5 sons par rangée.
   À 5, chaque son devient une tuile : le titre passe dessous, sur deux lignes. */
.sb--c5 .sons--galerie .son { flex-wrap: wrap; align-content: flex-start; gap: 10px; padding: 12px; }
.sb--c5 .sons--galerie .son__infos { order: 3; flex: 1 1 100%; }
.sb--c5 .sons--galerie .son__titre { display: -webkit-box; min-height: 2.6em; line-height: 1.3; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb--c5 .sons--galerie .son__actions { margin-left: auto; }
@media (max-width: 1150px) { .soundboard.sb--c5 .sons--galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .soundboard .sons--galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soundboard.sb--c5 .sons--galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .soundboard .sons--galerie { grid-template-columns: minmax(0, 1fr); }
  .soundboard.sb--c5 .sons--galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bouton.son__outil { width: 40px; min-width: 40px; min-height: 40px; padding: 0; }
.son__outil .icone { width: 17px; height: 17px; }
.son__renommer { flex: 1; min-width: 0; margin: 0; }
.son__renommer input { width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid var(--cyan); border-radius: 10px; background: var(--fond); color: var(--texte); font: inherit; font-weight: 700; }
.sb-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 12px 0; scroll-margin-top: 110px; }
.sb-pages[hidden] { display: none; }
.sb-pages--bas { margin-top: 20px; }
.sb-page { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.sb-page:hover:not(:disabled) { border-color: var(--cyan); }
.sb-page[aria-current="page"] { border-color: transparent; background: linear-gradient(135deg, var(--violet), #7c3aed); color: #fff; cursor: default; opacity: 1; }
.sb-page:disabled:not([aria-current]) { opacity: .4; cursor: default; }
.sb-page__trou { padding: 0 2px; color: var(--doux); }
@media (max-width: 560px) { .sb-page--cote { flex-basis: calc(50% - 3px); order: 1; } }
.sb-vide { margin: 16px 0 0; text-align: center; }
div.sb-vide { display: grid; justify-items: center; gap: 8px; }
div.sb-vide[hidden] { display: none; }
div.sb-vide p { margin: 0; }
.sb-ajouter { margin: 6px 0 0; }
.sb-ajouter .lien { color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sb-credits { margin-top: 18px; }
/* Mes sons : favoris rangés par type, sons importés. */
.sb-titre-icone { width: 20px; height: 20px; margin-right: 4px; vertical-align: -3px; color: #facc15; }
#titre-sb-perso .sb-titre-icone { color: var(--cyan); }
.sb-types { display: grid; gap: 18px; margin-top: 8px; }
.sb-type__titre { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--doux); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sb-type .sons { margin-top: 10px; }
.sb-volume { display: flex; align-items: center; gap: 10px; color: var(--doux); font-size: .9rem; font-weight: 600; }
.sb-volume .icone { width: 18px; height: 18px; }
.sb-volume input { width: 150px; accent-color: var(--cyan); }
.sb-volume output { min-width: 3.2em; color: var(--texte); font-variant-numeric: tabular-nums; text-align: right; }
.sb-jauge { position: relative; width: min(280px, 100%); height: 30px; overflow: hidden; border: 1px solid var(--bord-2); border-radius: 999px; background: var(--fond); }
.sb-jauge__barre { position: absolute; top: 0; bottom: 0; left: 0; width: var(--plein, 0%); background: linear-gradient(90deg, var(--cyan), var(--violet)); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.sb-jauge--presque .sb-jauge__barre { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.sb-jauge__texte { position: relative; display: grid; place-items: center; height: 100%; font-size: .78rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sb-depot { position: relative; display: grid; justify-items: center; gap: 6px; margin-top: 14px; padding: 28px 18px; border: 2px dashed var(--bord-2); border-radius: 20px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.sb-depot > .icone { width: 32px; height: 32px; color: var(--cyan); transition: transform .3s ease; }
.sb-depot:hover, .sb-depot--survol { border-color: var(--cyan); background: rgba(34, 211, 238, .06); }
.sb-depot:hover > .icone { transform: translateY(-3px); }
.sb-depot--survol { transform: scale(1.01); }
.sb-depot--survol > .icone { animation: sb-flotte 1s ease-in-out infinite; }
@keyframes sb-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sb-depot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sb-depot:focus-within { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sb-attente { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 0; color: var(--cyan); font-weight: 600; }
.sb-attente::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--cyan); border-right-color: transparent; border-radius: 50%; animation: sb-tourne .8s linear infinite; }
@keyframes sb-tourne { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .son__live span { display: none; }
  .bouton.son__live { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
  .sb-volume input { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .son--arrive, .son__barres i, .son__favori--pop .icone, .son__live--envoye, .sb-tri[aria-pressed="true"] .icone, .sb-depot--survol > .icone, .sb-attente::before { animation: none; }
  .son:hover, .sb-depot--survol { transform: none; }
}

/* Soundboard : la rangée des catégories défile sans élargir la carte ; ce
   qui est masqué le reste ; des cartes assez larges pour les titres. */
.soundboard .onglets__panneau { grid-template-columns: minmax(0, 1fr); }
.soundboard .carte { min-width: 0; }
.soundboard [hidden] { display: none !important; }
.soundboard .sons:not(.sons--galerie) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }

/* Soundboard : les incontournables du stream, en tête de la bibliothèque. */
.sb-vedettes { margin-top: 18px; padding: 14px; border: 1px solid rgba(250, 204, 21, .28); border-radius: 18px; background: linear-gradient(135deg, rgba(250, 204, 21, .06), rgba(168, 85, 247, .05)); }
.sb-vedettes .sb-titre-icone { color: #fb923c; }
.sb-vedettes .sons { margin-top: 10px; }
.sb-toute { margin-top: 20px; }

/* Déclencheurs de sons (20/10) : la pastille « Son », l'éclair d'un son du
   soundboard, le réglage « Rappuyer pour arrêter ». */
.regle__genre--son { background: rgba(250, 204, 21, .12); color: #facc15; }
.son__declencheur { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--bord-2); border-radius: 12px; color: var(--doux); transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; }
.son__declencheur .icone { width: 18px; height: 18px; }
.son__declencheur:hover, .son__declencheur:focus-visible { border-color: rgba(168, 85, 247, .55); background: rgba(168, 85, 247, .1); color: #c084fc; transform: translateY(-1px); }
.rappui { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--bord-2); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.rappui__texte { min-width: 0; }
.rappui__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; color: var(--texte); font-weight: 700; }
.rappui__icone { width: 16px; height: 16px; color: #f87171; }
.rappui .aide { margin: 0; }
.rappui .interrupteur { flex: none; margin: 0; }
@media (max-width: 480px) { .son__declencheur { display: none; } }

/* Accueil : le démarrage guidé à lancer ou à reprendre (21/10). */
.reprise-demarrage { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; border-color: rgba(168, 85, 247, .4); background: linear-gradient(120deg, rgba(168, 85, 247, .14), rgba(34, 211, 238, .05)), var(--panneau); }
.reprise-demarrage__icone { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(140deg, var(--violet), var(--violet-2)); box-shadow: 0 8px 24px rgba(168, 85, 247, .4); }
.reprise-demarrage__icone .icone { width: 24px; height: 24px; }
.reprise-demarrage__texte { flex: 1 1 260px; min-width: 0; }
.reprise-demarrage__texte h2 { margin: 0 0 .2em; }
.reprise-demarrage__texte .doux { margin: 0; }
.reprise-demarrage__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.reprise-demarrage__boutons form { margin: 0; }
.reprise-demarrage--invitation h2 { font-size: 1.3rem; }

/* Signaler un contenu ; la case des droits avant d'importer un son (21/10). */
.signaler { display: grid; gap: 14px; margin: 18px 0 12px; }
.signaler label { display: grid; gap: 6px; }
.signaler input[type="text"], .signaler input[type="email"], .signaler select, .signaler textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; font-size: 16px; }
.signaler textarea { resize: vertical; }
.signaler__groupe { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 12px; }
.signaler__groupe legend { padding: 0 6px; font-weight: 600; }
.signaler .case { display: flex; grid-template-columns: none; align-items: flex-start; gap: 10px; }
.signaler .bouton { justify-self: start; }
.signaler__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sb-droits { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: rgba(255, 255, 255, .02); font-size: .92rem; transition: border-color .2s ease, background .2s ease; }
.sb-droits input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--violet); }
.sb-droits a { color: var(--cyan); }
.studio__edition .sb-droits { margin: 16px 0 0; }
.sb-droits--rappel { border-color: rgba(255, 180, 90, .7); background: rgba(255, 180, 90, .1); animation: sb-droits-rappel .5s ease; }
@keyframes sb-droits-rappel { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .sb-droits--rappel { animation: none; } }
.cgu-sommaire { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--bord); border-left: 3px solid var(--cyan); border-radius: 12px; }
.cgu-sommaire ol { display: grid; gap: 2px 18px; margin: 0; padding-left: 1.4em; }
@media (min-width: 640px) { .cgu-sommaire ol { grid-template-columns: 1fr 1fr; } }
.texte h2[id^="cgu-"] { scroll-margin-top: 90px; }

/* Console : signalements, contenus importés d'un compte (21/10). */
.admin-signalements { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.admin-signalement { padding: 14px; border: 1px solid var(--bord); border-radius: 14px; }
.admin-signalement--nouveau { border-color: rgba(255, 180, 90, .55); }
.admin-signalement dl { margin: 8px 0; }
.admin-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.admin-images img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #000; }
.admin-retrait { margin-top: 6px; }
.admin-retrait .formulaire { margin-top: 8px; }
.admin-liste audio { width: 100%; max-width: 360px; height: 34px; margin-top: 6px; }

/* Signaler : cases et boutons radio à leur taille, texte à gauche. */
.signaler .case input[type="radio"], .signaler .case input[type="checkbox"] { flex: none; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: var(--violet); }
.signaler .case span { text-align: left; font-weight: 400; }
.signaler__groupe .case { padding: 4px 0; }

/* Déclencheurs : la galerie des cadeaux, comme le tiroir de TikTok (21/10). */
.choix-cadeau--galerie { max-width: none; }
.choix-cadeau--galerie select, .choix-cadeau--galerie .choix-cadeau__image { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cadeau-choisi { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 560px; padding: 10px 14px; border: 1px solid var(--bord-2); border-radius: 16px; background: linear-gradient(135deg, rgba(254, 44, 85, .08), rgba(168, 85, 247, .08)), var(--fond); color: var(--texte); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.cadeau-choisi:hover, .cadeau-choisi[aria-expanded="true"] { border-color: #fe2c55; }
.cadeau-choisi__image { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: 1.6rem; }
.cadeau-choisi__image img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.cadeau-choisi__texte { display: grid; flex: 1; min-width: 0; }
.cadeau-choisi__texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadeau-choisi__texte span { color: var(--doux); font-size: .88rem; }
.cadeau-choisi__changer { flex: none; padding: 6px 12px; border-radius: 999px; background: #fe2c55; color: #fff; font-size: .85rem; font-weight: 700; }
.cadeau-choisi--pop .cadeau-choisi__image { animation: cadeau-pop .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cadeau-pop { 0% { transform: scale(.5) rotate(-12deg); } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: none; } }
.galerie-cadeaux { margin-top: 10px; overflow: hidden; border: 1px solid #2f2f3a; border-radius: 18px; background: #1b1b1f; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.galerie-cadeaux[hidden] { display: none; }
.galerie-cadeaux--entree { animation: galerie-entree .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes galerie-entree { from { opacity: 0; transform: translateY(10px); } }
.galerie-cadeaux__tete { display: grid; gap: 10px; padding: 12px 12px 8px; border-bottom: 1px solid #2f2f3a; }
.galerie-cadeaux__recherche { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid #34343f; border-radius: 999px; background: #121216; color: #fff; font: inherit; font-size: 16px; }
.galerie-cadeaux__recherche:focus { border-color: #fe2c55; outline: none; }
.galerie-cadeaux__onglets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.galerie-cadeaux__onglet { flex: none; padding: 6px 12px; border: 0; border-radius: 999px; background: #2a2a31; color: #c9c7d6; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.galerie-cadeaux__onglet[aria-pressed="true"] { background: #fff; color: #111; }
.galerie-cadeaux__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; max-height: 360px; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.cadeau-tuile { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border: 2px solid transparent; border-radius: 14px; background: transparent; color: #f2f1f7; font: inherit; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.cadeau-tuile[hidden] { display: none; }
.cadeau-tuile:hover, .cadeau-tuile:focus-visible { background: #2a2a31; transform: translateY(-2px); outline: none; }
.cadeau-tuile.est-choisi { border-color: #fe2c55; background: rgba(254, 44, 85, .12); }
.cadeau-tuile__image { display: grid; place-items: center; width: 56px; height: 56px; font-size: 1.6rem; }
.cadeau-tuile__image img { width: 52px; height: 52px; object-fit: contain; }
.cadeau-tuile:hover .cadeau-tuile__image img { animation: cadeau-danse .6s ease; }
@keyframes cadeau-danse { 30% { transform: scale(1.12) rotate(-6deg); } 60% { transform: scale(1.08) rotate(5deg); } }
.cadeau-tuile__nom { max-width: 100%; overflow: hidden; font-size: .78rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.cadeau-tuile__prix { color: #a8a6b8; font-size: .72rem; }
.galerie-cadeaux__vide { margin: 0; padding: 16px; color: var(--doux); text-align: center; }
@media (prefers-reduced-motion: reduce) { .galerie-cadeaux--entree, .cadeau-choisi--pop .cadeau-choisi__image, .cadeau-tuile:hover .cadeau-tuile__image img { animation: none; } }

/* Soundboard : le studio (enregistrer, couper, effets) — 21/10. */
.studio { position: relative; overflow: hidden; border-color: rgba(168, 85, 247, .35); background: radial-gradient(120% 80% at 0% 0%, rgba(168, 85, 247, .14), transparent 55%), radial-gradient(90% 70% at 100% 100%, rgba(34, 211, 238, .1), transparent 60%), var(--panneau); }
.studio__etape { font-size: .85rem; }
.studio--entree { animation: studio-entree .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes studio-entree { from { opacity: 0; transform: translateY(10px); } }
.studio--bravo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 30%, rgba(53, 208, 127, .3), transparent 60%); animation: studio-bravo 1.2s ease forwards; }
@keyframes studio-bravo { from { opacity: 1; } to { opacity: 0; } }
.studio [hidden] { display: none !important; }
.studio__depart { display: grid; gap: 12px; }
@media (min-width: 640px) { .studio__depart { grid-template-columns: 1fr 1fr; } }
.studio__choix { display: grid; gap: 4px; justify-items: start; padding: 18px; border: 1px solid var(--bord-2); border-radius: 18px; background: rgba(10, 10, 18, .55); color: var(--texte); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.studio__choix:hover { transform: translateY(-2px); border-color: var(--violet); box-shadow: 0 12px 30px rgba(168, 85, 247, .2); }
.studio__choix span:last-of-type { color: var(--doux); font-size: .9rem; }
.studio__choix-icone { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: linear-gradient(140deg, #ef4444, #f472b6); color: #fff; box-shadow: 0 8px 22px rgba(239, 68, 68, .35); }
.studio__choix--fichier .studio__choix-icone { background: linear-gradient(140deg, var(--violet), var(--cyan)); box-shadow: 0 8px 22px rgba(168, 85, 247, .35); }
.studio__choix-icone svg, .studio__choix-icone .icone { width: 26px; height: 26px; }
.studio__choix--micro:hover .studio__choix-icone { animation: studio-micro 1s ease-in-out infinite; }
@keyframes studio-micro { 50% { transform: scale(1.08) rotate(-6deg); } }
.studio__micro { display: grid; justify-items: center; gap: 14px; padding: 6px 0; text-align: center; }
.studio__vumetre { display: flex; align-items: flex-end; gap: 4px; max-width: 100%; height: 70px; padding: 10px 14px; border-radius: 16px; background: #07070c; box-shadow: inset 0 0 0 1px var(--bord); }
.studio__vumetre i { width: 8px; height: 100%; border-radius: 3px; background: #1d1d29; transition: background .08s linear; }
.studio__vumetre i.vert { background: linear-gradient(#4ade80, #16a34a); box-shadow: 0 0 8px rgba(74, 222, 128, .5); }
.studio__vumetre i.jaune { background: linear-gradient(#fde047, #f59e0b); box-shadow: 0 0 8px rgba(250, 204, 21, .5); }
.studio__vumetre i.rouge { background: linear-gradient(#f87171, #dc2626); box-shadow: 0 0 10px rgba(248, 113, 113, .6); }
.studio__vumetre i.crete { background: #e9d5ff; }
@media (max-width: 480px) { .studio__vumetre i { width: 5px; } .studio__vumetre { gap: 3px; } }
.studio__niveau { min-height: 1.4em; margin: 0; color: var(--doux); font-weight: 600; }
.studio__gain { display: flex; align-items: center; gap: 10px; width: min(100%, 420px); }
.studio__gain input { flex: 1; accent-color: var(--violet); }
.studio__gain output { min-width: 3.5em; color: var(--cyan); font-weight: 700; }
.studio__enregistrer { position: relative; display: grid; justify-items: center; gap: 6px; }
.studio__rec { position: relative; display: grid; place-items: center; width: 116px; height: 116px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.studio__rec-anneau, .studio__rec-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio__rec-anneau svg { transform: rotate(-90deg); }
.studio__rec-fond { fill: none; stroke: #23232f; stroke-width: 6; }
.studio__rec-progression { fill: none; stroke: #ef4444; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.studio__rec-point { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f87171, #dc2626); box-shadow: 0 8px 24px rgba(220, 38, 38, .5); transition: border-radius .25s ease, width .25s ease, height .25s ease, transform .2s ease; }
.studio__rec:hover .studio__rec-point { transform: scale(1.05); }
.studio__rec.est-actif .studio__rec-point { width: 40px; height: 40px; border-radius: 10px; animation: studio-rec 1s ease-in-out infinite; }
@keyframes studio-rec { 50% { box-shadow: 0 0 0 14px rgba(220, 38, 38, .15), 0 8px 24px rgba(220, 38, 38, .5); } }
.studio__chrono { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
/* Décompte (24/10/2026) : le chiffre en grand, AU CENTRE du bouton (le point
   rouge s'efface), sur un anneau doré qui pulse ; un bip par chiffre. */
.studio__enregistrer .studio__decompte { position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 2; display: grid; place-items: center; width: 116px; height: 116px; margin: 0; font-family: var(--titre); font-size: 4.4rem; font-weight: 800; line-height: 1; color: #fff !important; text-shadow: 0 0 22px rgba(251, 191, 36, .95), 0 0 6px rgba(251, 191, 36, .9), 0 4px 16px rgba(0, 0, 0, .85); pointer-events: none; }
.studio__enregistrer .studio__decompte[hidden] { display: none; }
.studio__enregistrer .studio__decompte.est-anime { animation: studio-decompte .7s ease forwards; }
@keyframes studio-decompte { from { opacity: 0; transform: scale(1.7); } 22% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(.95); } to { opacity: .15; transform: scale(.8); } }
.studio__rec.est-decompte .studio__rec-point { opacity: 0; transform: scale(.3); }
.studio__rec.est-decompte .studio__rec-fond { stroke: #fbbf24; animation: studio-decompte-anneau .7s ease-in-out infinite; }
@keyframes studio-decompte-anneau { 50% { stroke: #f97316; filter: drop-shadow(0 0 10px rgba(251, 191, 36, .9)); } }
@media (prefers-reduced-motion: reduce) { .studio__rec.est-decompte .studio__rec-fond, .studio__enregistrer .studio__decompte.est-anime { animation: none; } }
.studio__onde { position: relative; height: 150px; margin: 4px 0 8px; border-radius: 14px; background: #07070c; box-shadow: inset 0 0 0 1px var(--bord); touch-action: none; }
.studio__onde canvas { display: block; width: 100%; height: 100%; opacity: .9; }
.studio__zone { position: absolute; top: 0; bottom: 0; border-block: 2px solid rgba(34, 211, 238, .5); background: rgba(168, 85, 247, .14); box-shadow: 0 0 0 9999px rgba(7, 7, 12, .62); cursor: grab; transition: background .15s ease; }
.studio__zone:hover { background: rgba(168, 85, 247, .2); }
.studio__zone.est-tenue { background: rgba(168, 85, 247, .26); cursor: grabbing; }
.studio__onde canvas { cursor: pointer; }
.studio__onde { overflow: hidden; }
.studio__poignee { position: absolute; top: 0; bottom: 0; z-index: 1; width: 26px; margin-left: -13px; padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: none; }
.studio__poignee::before { content: ""; position: absolute; top: 0; bottom: 0; left: 11px; width: 4px; border-radius: 4px; background: var(--cyan); box-shadow: 0 0 10px rgba(34, 211, 238, .7); }
.studio__poignee::after { content: ""; position: absolute; top: 50%; left: 4px; width: 18px; height: 34px; margin-top: -17px; border-radius: 8px; background: var(--cyan); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.studio__poignee:focus-visible::after, .studio__poignee.est-tenue::after { background: #fff; }
.studio__tete { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px #fff; pointer-events: none; }
.studio__temps { display: flex; justify-content: space-between; color: var(--doux); font-size: .88rem; font-variant-numeric: tabular-nums; }
.studio__temps strong { color: var(--texte); }
.studio__temps strong.est-erreur { color: #fca5a5; }
.studio__lecture { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 6px; }
.studio__jouer.est-actif { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.est-calcul { opacity: .75; cursor: progress; }
.studio__sous-titre { margin: 16px 0 8px; font-weight: 700; }
.studio__effets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.studio__effet { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border: 1px solid var(--bord-2); border-radius: 14px; background: rgba(255, 255, 255, .02); color: var(--texte); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.studio__effet:hover { transform: translateY(-2px); border-color: rgba(168, 85, 247, .6); }
.studio__effet-icone { font-size: 1.4rem; }
.studio__effet strong { font-size: .92rem; }
.studio__effet-texte { color: var(--doux); font-size: .76rem; }
.studio__effet[aria-pressed="true"] { border-color: var(--violet); background: linear-gradient(135deg, rgba(168, 85, 247, .25), rgba(34, 211, 238, .1)); box-shadow: 0 0 0 3px rgba(168, 85, 247, .18); }
.studio__effet.est-pop .studio__effet-icone { animation: cadeau-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@media (max-width: 480px) { .studio__effets { grid-template-columns: 1fr 1fr; } .studio__effet-texte { display: none; } }
.studio__fin { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.studio__nom { display: grid; gap: 6px; flex: 1 1 240px; }
.studio__nom input { min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; font-size: 16px; }
.studio__boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.studio__retour { min-height: 1.2em; margin: 12px 0 0; color: var(--cyan); }
.studio__retour:empty { display: none; }
.studio__retour.est-erreur { color: #fca5a5; }
@media (prefers-reduced-motion: reduce) { .studio--entree, .studio--bravo::after, .studio__rec.est-actif .studio__rec-point, .studio__decompte.est-anime, .studio__effet.est-pop .studio__effet-icone, .studio__choix--micro:hover .studio__choix-icone { animation: none; } }

/* Fenêtres « ? » des éditeurs : de petits guides illustrés (21/10). */
.ov-pop--guide { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.ov-pop--guide h3.ov-pop__suite { margin: 22px 0 10px; color: #e9d5ff; font-size: 1.05rem; }
.ov-pop--guide .aide-video, .ov-pop--guide .aide-image, .ov-pop--guide .ill { margin: 0 0 12px; }
.ov-pop--guide .ov-pop__boutons--fin { position: sticky; bottom: -22px; margin: 18px -22px -22px; padding: 14px 22px; border-top: 1px solid var(--bord); background: var(--panneau); }

/* ── Tarifs vivants (22/10/2026) : couleurs, essai mis en avant, animations.
   Tout reste lisible sans animation (prefers-reduced-motion). ───────────── */
@keyframes tv-entree { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tv-degrade { to { background-position: 200% 50%; } }
@keyframes tv-reflet { 0%, 55% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(220%) skewX(-18deg); } }
@keyframes tv-cadeau { 0%, 100% { transform: rotate(-8deg) scale(1); } 12% { transform: rotate(10deg) scale(1.18); } 24% { transform: rotate(-6deg) scale(1.05); } 36% { transform: rotate(0) scale(1); } }
@keyframes tv-pouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, .55); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); transform: scale(1.08); } }
@keyframes tv-halo { to { --tv-angle: 360deg; } }
@keyframes tv-fleche { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes tv-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@property --tv-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.tarifs-page .tv-heros > * { animation: tv-entree .7s cubic-bezier(.2, .8, .2, 1) both; }
.tarifs-page .tv-heros > :nth-child(2) { animation-delay: .08s; }
.tarifs-page .tv-heros > :nth-child(3) { animation-delay: .16s; }
.tarifs-page .tv-heros > :nth-child(4) { animation-delay: .24s; }
.tarifs-page .tv-heros h1 { background: linear-gradient(90deg, #ffffff, #e9d5ff 30%, #f0abfc 50%, #a5f3fc 70%, #ffffff) 0 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tv-degrade 7s linear infinite; }

/* Le bandeau de l'essai : bordure en dégradé qui coule, reflet qui passe. */
.tv-essai { position: relative; display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 18px 0 4px; padding: 14px 18px; overflow: hidden; border-radius: 18px; color: var(--texte); text-decoration: none;
  background: linear-gradient(#141022, #141022) padding-box, linear-gradient(90deg, #22d3ee, #a855f7, #ec4899, #fbbf24, #22d3ee) 0 50% / 200% 100% border-box; border: 2px solid transparent;
  box-shadow: 0 14px 40px -14px rgba(236, 72, 153, .55), 0 0 0 1px rgba(255, 255, 255, .04); animation: tv-entree .7s .16s both, tv-degrade 4s linear infinite; transition: transform .25s ease, box-shadow .25s ease; }
.tv-essai::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); animation: tv-reflet 3.6s ease-in-out infinite; pointer-events: none; }
.tv-essai:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 20px 50px -14px rgba(236, 72, 153, .75); }
.tv-essai__cadeau { font-size: 2.2rem; line-height: 1; animation: tv-cadeau 2.4s ease-in-out infinite; }
.tv-essai__texte { display: grid; gap: 2px; }
.tv-essai__texte strong { font-family: var(--titre); font-size: 1.25rem; background: linear-gradient(90deg, #fde68a, #f9a8d4, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-essai__texte span { color: #c9c5e3; font-size: .92rem; }
.tv-essai__fleche { margin-left: auto; color: #f9a8d4; font-size: 1.5rem; font-weight: 800; animation: tv-fleche 1.4s ease-in-out infinite; }

/* Les atouts, en pastilles de couleur. */
.tv-atouts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tv-atout { padding: 7px 13px; border-radius: 999px; font-size: .88rem; font-weight: 700; border: 1px solid; }
.tv-atout--violet { color: #d8b4fe; border-color: rgba(168, 85, 247, .45); background: rgba(168, 85, 247, .12); }
.tv-atout--cyan { color: #67e8f9; border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .10); }
.tv-atout--rose { color: #f9a8d4; border-color: rgba(236, 72, 153, .45); background: rgba(236, 72, 153, .10); }
.tv-atout--or { color: #fde68a; border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .10); }

/* Les cartes vivantes. */
.formules--vivantes { max-width: 820px; margin-top: 26px; }
.formules--vivantes .formule { overflow: visible; padding-top: 30px; animation: tv-entree .7s .3s cubic-bezier(.2, .8, .2, 1) both; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.formules--vivantes .formule--annuel { animation-delay: .42s; }
.formules--vivantes .formule:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -20px rgba(124, 58, 237, .6); }
.formules--vivantes .formule--mensuel { border-color: rgba(34, 211, 238, .35); background: radial-gradient(circle at 0 0, rgba(34, 211, 238, .12), transparent 55%), var(--carte, rgba(18, 18, 30, .92)); }
.formules--vivantes .formule--annuel { border: 2px solid transparent; background: radial-gradient(circle at 100% 0, rgba(236, 72, 153, .16), transparent 55%) padding-box, linear-gradient(#16122a, #16122a) padding-box, conic-gradient(from var(--tv-angle), #a855f7, #22d3ee, #ec4899, #fbbf24, #a855f7) border-box; animation: tv-entree .7s .42s cubic-bezier(.2, .8, .2, 1) both, tv-halo 5s linear infinite; }
.formules--vivantes .formule__badge { background: linear-gradient(90deg, #ec4899, #f97316); font-size: .95rem; animation: tv-pouls 2s ease-in-out infinite; }
.formule__essai { justify-self: start; padding: 4px 11px; border-radius: 999px; background: rgba(53, 208, 127, .14); border: 1px solid rgba(53, 208, 127, .45); color: #86efac; font-size: .82rem; font-weight: 800; }
.formule__etoile { margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #f472b6); color: #1a0b24; font-size: .72rem; font-weight: 800; vertical-align: middle; }
.formules--vivantes .formule--mensuel .formule__chiffre { background: linear-gradient(92deg, #ffffff, #a5f3fc); -webkit-background-clip: text; background-clip: text; }
.formules--vivantes .formule--annuel .formule__chiffre { background: linear-gradient(92deg, #ffffff, #f9a8d4 55%, #fde68a); -webkit-background-clip: text; background-clip: text; }
.formule__jour { justify-self: start; margin-bottom: 2px; padding: 3px 10px; border-radius: 8px; background: rgba(251, 191, 36, .1); color: #fde68a; font-size: .86rem; font-weight: 700; }
.formules--vivantes .formule__bouton { position: relative; overflow: hidden; }
.formules--vivantes .formule__bouton::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: tv-reflet 3.2s ease-in-out infinite; pointer-events: none; }
.formules--vivantes .formule--mensuel .formule__bouton { border-color: rgba(34, 211, 238, .55); color: #a5f3fc; }

/* Comment ça marche : trois étapes de couleur reliées. */
.tv-titre { text-align: center; font-family: var(--titre); }
.tv-etapes { max-width: 980px; margin: 34px auto 22px; }
.tv-etapes__liste { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 760px) { .tv-etapes__liste { grid-template-columns: repeat(3, 1fr); } }
/* Le numéro et le titre sur une ligne, le texte dessous sur toute la largeur (24/10/2026). */
.tv-etape { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px 14px; align-content: start; padding: 18px; border-radius: 18px; border: 1px solid var(--bord-2, rgba(255, 255, 255, .1)); background: var(--verre); color: var(--doux); }
.tv-etape strong { color: var(--texte); font-size: 1.02rem; }
.tv-etape b { color: #86efac; }
.tv-etape > span:last-child { grid-column: 1 / -1; }
.tv-etape__num { display: grid; place-content: center; width: 40px; height: 40px; border-radius: 12px; font-family: var(--titre); font-weight: 800; font-size: 1.2rem; color: #fff; animation: tv-flotte 3s ease-in-out infinite; }
.tv-etape--1 .tv-etape__num { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 8px 22px -6px rgba(168, 85, 247, .8); }
.tv-etape--2 .tv-etape__num { background: linear-gradient(135deg, #22d3ee, #0891b2); box-shadow: 0 8px 22px -6px rgba(34, 211, 238, .8); animation-delay: .4s; }
.tv-etape--3 .tv-etape__num { background: linear-gradient(135deg, #ec4899, #f97316); box-shadow: 0 8px 22px -6px rgba(236, 72, 153, .8); animation-delay: .8s; }
.tv-etape--1 { border-color: rgba(168, 85, 247, .35); }
.tv-etape--2 { border-color: rgba(34, 211, 238, .35); }
.tv-etape--3 { border-color: rgba(236, 72, 153, .35); }

/* Inclus : une couleur par fonction. */
.tv-inclus .inclus li:nth-child(6n+1) .inclus__icone { background: rgba(168, 85, 247, .18); color: #d8b4fe; }
.tv-inclus .inclus li:nth-child(6n+2) .inclus__icone { background: rgba(34, 211, 238, .16); color: #67e8f9; }
.tv-inclus .inclus li:nth-child(6n+3) .inclus__icone { background: rgba(236, 72, 153, .16); color: #f9a8d4; }
.tv-inclus .inclus li:nth-child(6n+4) .inclus__icone { background: rgba(251, 191, 36, .16); color: #fde68a; }
.tv-inclus .inclus li:nth-child(6n+5) .inclus__icone { background: rgba(53, 208, 127, .16); color: #86efac; }
.tv-inclus .inclus li:nth-child(6n+6) .inclus__icone { background: rgba(249, 115, 22, .16); color: #fdba74; }
.tv-inclus .inclus li { transition: transform .25s ease; }
.tv-inclus .inclus li:hover { transform: translateX(4px); }
.tv-inclus .inclus li:hover .inclus__icone { transform: scale(1.12) rotate(-6deg); }
.tv-inclus .inclus__icone { transition: transform .25s ease; }

/* L'appel final : fond qui ondule, bouton qui brille. */
.tv-final { position: relative; max-width: 860px; margin: 30px auto 22px; padding: 34px 24px; overflow: hidden; border-radius: 24px; text-align: center;
  background: linear-gradient(120deg, #4c1d95, #7c3aed, #db2777, #0e7490, #4c1d95) 0 50% / 300% 300%; animation: tv-degrade 10s linear infinite; box-shadow: 0 24px 60px -24px rgba(219, 39, 119, .7); }
.tv-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0, rgba(255, 255, 255, .22), transparent 45%), radial-gradient(circle at 90% 100%, rgba(34, 211, 238, .3), transparent 45%); pointer-events: none; }
.tv-final > * { position: relative; }
.tv-final h2 { margin: 0 0 8px; font-family: var(--titre); font-size: clamp(1.5rem, 4.5vw, 2.1rem); color: #fff; }
.tv-final p { margin: 0 auto 18px; max-width: 520px; color: rgba(255, 255, 255, .88); }
.tv-final__bouton { position: relative; overflow: hidden; background: #fff; color: #4c1d95; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .45); }
.tv-final__bouton::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .35), transparent); animation: tv-reflet 3s ease-in-out infinite; }
/* Le texte reste violet au survol (la règle commune des boutons le passe en blanc, invisible sur ce fond blanc). */
.tv-final__bouton:hover, .tv-final__bouton:focus-visible { color: #4c1d95; background: #fff; transform: translateY(-2px) scale(1.03); }
.tv-final .tv-final__rassure { margin: 14px auto 0; font-size: .88rem; color: rgba(255, 255, 255, .8); }

/* FAQ des tarifs : une touche de couleur au survol. */
.tarifs-page .faq__item { transition: border-color .2s ease, background .2s ease; }
.tarifs-page .faq__item:hover, .tarifs-page .faq__item[open] { border-color: rgba(168, 85, 247, .45); background: linear-gradient(180deg, rgba(168, 85, 247, .08), rgba(12, 12, 21, .98)); }

/* Apparition au défilement, là où le navigateur sait le faire. */
@supports (animation-timeline: view()) {
  .tv-etape, .tv-inclus .inclus li, .tv-final, .tarifs-page .faq__item { animation: tv-entree linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .tv-etape .tv-etape__num { animation: tv-flotte 3s ease-in-out infinite; animation-timeline: auto; }
  .tv-final { animation: tv-entree linear both, tv-degrade 10s linear infinite; animation-timeline: view(), auto; animation-range: entry 0% entry 50%, normal; }
}

@media (prefers-reduced-motion: reduce) {
  .tarifs-page .tv-heros > *, .tarifs-page .tv-heros h1, .tv-essai, .tv-essai::after, .tv-essai__cadeau, .tv-essai__fleche,
  .formules--vivantes .formule, .formules--vivantes .formule__badge, .formules--vivantes .formule__bouton::after,
  .tv-etape, .tv-etape__num, .tv-inclus .inclus li, .tv-final, .tv-final__bouton::after, .tarifs-page .faq__item { animation: none !important; }
  .tv-essai::after, .formules--vivantes .formule__bouton::after, .tv-final__bouton::after { display: none; }
}

/* ── Accueil vivant (23/10/2026) ──────────────────────────────────────────
   Le nom à côté du logo pour les visiteurs ; le téléphone du héros qui
   s'anime (×2 → ×3 → ×5, cœurs, chat) ; chiffres, nouveautés, maquettes du
   soundboard et de Camera Cast ; apparitions au défilement (vitrine.js). */
.entete--visiteur .marque__nom { position: static; padding-left: 0; opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 560px) { .entete--visiteur .marque__nom { display: none; } }

.vitrine__scene { position: relative; }
.vitrine__multi[data-x="3"] { background-image: linear-gradient(180deg, #ffffff, #cffafe 40%, #22d3ee); filter: drop-shadow(0 10px 26px rgba(34, 211, 238, .9)); }
.vitrine__multi[data-x="5"] { background-image: linear-gradient(180deg, #ffffff, #fde68a 38%, #f97316); filter: drop-shadow(0 10px 26px rgba(249, 115, 22, .9)); }
.vitrine__multi--entre { animation: multi-entree .75s var(--ressort) both; }
@keyframes multi-entree { 0% { opacity: 0; transform: scale(.2) rotate(-28deg); } 60% { opacity: 1; transform: scale(1.32) rotate(6deg); } 100% { transform: scale(1) rotate(-5deg); } }
.vitrine__onde { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 3px solid var(--onde, #a855f7); border-radius: 50%; opacity: 0; pointer-events: none; }
.vitrine__onde--go { animation: vitrine-onde .9s ease-out; }
@keyframes vitrine-onde { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
.vitrine__chat { position: absolute; z-index: 2; left: 12px; right: 34%; bottom: 62px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; padding: 0; list-style: none; }
.vitrine__chat li { max-width: 100%; padding: 4px 9px; overflow: hidden; border-radius: 12px; background: rgba(0, 0, 0, .42); color: #f3f4f6; font-size: .7rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; animation: chat-entree .45s var(--doux-sortie) both; }
.vitrine__chat b { margin-right: 5px; color: #c4b5fd; }
.vitrine__chat li:nth-child(3n+2) b { color: #67e8f9; }
.vitrine__chat li:nth-child(3n) b { color: #f9a8d4; }
.vitrine__chat li.vitrine__chat--part { animation: chat-part .35s ease forwards; }
@keyframes chat-entree { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes chat-part { to { opacity: 0; transform: translateY(-8px); } }
.vitrine__coeurs { position: absolute; z-index: 2; right: 6px; bottom: 58px; width: 64px; height: 72%; pointer-events: none; }
.vitrine__coeur { position: absolute; bottom: 0; left: 50%; font-size: var(--t, 20px); line-height: 1; opacity: 0; animation: coeur-monte var(--d, 2.4s) cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes coeur-monte {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
  12% { opacity: 1; transform: translate(-50%, -12px) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -260px) rotate(var(--rot, 0deg)) scale(.85); }
}
.vitrine__jauge i { transition: width .8s var(--doux-sortie); }
.vitrine--anime .vitrine__jauge i { animation: none; }
.vitrine__score { font-variant-numeric: tabular-nums; }
.notif__icone--tic { animation: notif-tic .5s var(--ressort); }
@keyframes notif-tic { 40% { transform: scale(1.3) rotate(-10deg); } }

.chiffres-vitrine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.chiffres-vitrine__case { display: grid; gap: 4px; padding: 18px 16px; border: 1px solid var(--bord); border-radius: 20px; background: var(--verre); text-align: center; }
.chiffres-vitrine__case strong { font-family: var(--titre); font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.chiffres-vitrine__case > span { color: var(--doux); font-size: .9rem; }
@media (min-width: 820px) { .chiffres-vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nouveautes__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.nouveaute { position: relative; display: grid; align-content: start; gap: 6px; padding: 20px 18px; overflow: hidden; border: 1px solid var(--bord); border-radius: 20px; background: var(--verre); color: var(--texte); text-decoration: none; transition: transform .25s var(--doux-sortie), border-color .25s ease, box-shadow .25s ease; }
.nouveaute::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(60% 50% at 0 0, rgba(168, 85, 247, .22), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.nouveaute:hover { transform: translateY(-4px); border-color: rgba(168, 85, 247, .55); box-shadow: 0 24px 46px -26px rgba(168, 85, 247, .95); }
.nouveaute:hover::before { opacity: 1; }
.nouveaute > * { position: relative; }
.nouveaute strong { margin-top: 6px; font-family: var(--titre); font-size: 1.12rem; }
.nouveaute > span:last-child { color: var(--doux); font-size: .92rem; line-height: 1.45; }
.nouveaute__icone { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--degrade-marque); color: #fff; box-shadow: 0 12px 26px -12px rgba(168, 85, 247, .95); transition: transform .4s var(--ressort); }
.nouveaute__icone .icone { width: 22px; height: 22px; }
.nouveaute:hover .nouveaute__icone { transform: rotate(-8deg) scale(1.08); }
.nouveaute__badge { position: absolute; top: 18px; right: 16px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(135deg, #ec4899, #a855f7); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 14px rgba(236, 72, 153, .55); animation: badge-luit 2.8s ease-in-out infinite; }
@keyframes badge-luit { 50% { box-shadow: 0 0 22px rgba(236, 72, 153, .9); } }
.nouveaute--essai .nouveaute__icone { background: linear-gradient(135deg, #35d07f, #15803d); }

/* Maquette du soundboard : une recherche qui s'écrit, le son qui joue. */
.maquette { position: relative; border: 1px solid var(--bord-2); border-radius: 22px; background: #0b0b14; box-shadow: 0 40px 80px -40px rgba(124, 58, 237, .85); }
.maquette-sb { display: grid; gap: 12px; padding: 18px; }
.maquette-sb__recherche { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid rgba(34, 211, 238, .45); border-radius: 14px; background: rgba(255, 255, 255, .03); color: var(--texte); font-size: .98rem; }
.maquette-sb__recherche .icone { width: 18px; height: 18px; color: var(--cyan); }
.maquette-sb__curseur { width: 2px; height: 20px; margin-left: -8px; background: var(--cyan); animation: curseur-clignote 1s steps(1) infinite; }
@keyframes curseur-clignote { 50% { opacity: 0; } }
.maquette-sb__puces { display: flex; gap: 6px; overflow: hidden; }
.maquette-sb__puce { flex: none; padding: 5px 11px; border: 1px solid var(--bord); border-radius: 999px; color: var(--doux); font-size: .78rem; font-weight: 600; }
.maquette-sb__puce--active { border-color: transparent; background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; }
.maquette-sb__sons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.msb-son { --a: #a855f7; --b: #22d3ee; position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px; border: 1px solid var(--bord); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ressort); }
.msb-son--memes { --a: #ff3d81; --b: #7c3aed; }
.msb-son--celebres { --a: #f59e0b; --b: #9333ea; }
.msb-son--foules { --a: #fbbf24; --b: #ec4899; }
.msb-son--annonces { --a: #d946ef; --b: #6b21a8; }
.msb-son--retro { --a: #22c55e; --b: #15803d; }
.msb-son__bouton { position: relative; display: grid; flex: none; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 11px; background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; box-shadow: 0 8px 16px -10px var(--a); }
.msb-son__bouton > .icone { width: 16px; height: 16px; margin-left: 2px; }
.msb-son__barres { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 3px; padding: 10px; }
.msb-son__barres i { width: 3px; height: 100%; border-radius: 2px; background: #fff; animation: son-barre .8s ease-in-out infinite; }
.msb-son__barres i:nth-child(2) { animation-delay: -.3s; }
.msb-son__barres i:nth-child(3) { animation-delay: -.55s; }
.msb-son__barres i:nth-child(4) { animation-delay: -.15s; }
.msb-son__infos { display: grid; gap: 3px; min-width: 0; }
.msb-son__infos strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.msb-son__infos small { overflow: hidden; color: var(--doux); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.msb-son__piste { height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .08); visibility: hidden; }
.msb-son__piste i { display: block; height: 100%; background: linear-gradient(90deg, var(--a), var(--b)); transform: scaleX(0); transform-origin: left; }
.msb-son__live { position: absolute; top: -7px; left: 10px; padding: 0 7px; border-radius: 999px; background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .25s ease, transform .25s ease; }
.msb-son--joue { border-color: var(--a); box-shadow: 0 0 0 1px var(--a), 0 16px 30px -18px var(--a); transform: translateY(-2px); }
.msb-son--joue .msb-son__bouton > .icone { display: none; }
.msb-son--joue .msb-son__barres { display: flex; }
.msb-son--joue .msb-son__piste { visibility: visible; }
.msb-son--joue .msb-son__piste i { animation: msb-piste 2.6s linear forwards; }
.msb-son--joue .msb-son__live { opacity: 1; transform: none; }
@keyframes msb-piste { to { transform: scaleX(1); } }

/* Maquette de Camera Cast : le téléphone filme, le live le montre. */
.maquette-cast { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .16fr) minmax(0, .58fr); align-items: center; gap: 4px; padding: 26px 20px; background: radial-gradient(70% 60% at 20% 30%, rgba(168, 85, 247, .18), transparent 70%), radial-gradient(60% 60% at 85% 70%, rgba(34, 211, 238, .14), transparent 70%), #0b0b14; }
.mcast__tel { padding: 6px; border-radius: 22px; background: #040408; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 40px -20px rgba(124, 58, 237, .9); animation: respirer 7s ease-in-out infinite; }
.mcast__image, .mcast__video { position: relative; display: grid; place-items: end center; overflow: hidden; background: radial-gradient(50% 40% at 50% 38%, rgba(255, 214, 170, .32), transparent 70%), linear-gradient(170deg, #4c1d95, #0e7490); }
.mcast__image { aspect-ratio: 9 / 17; border-radius: 17px; }
.mcast__silhouette { width: 72%; height: auto; margin-bottom: -12%; color: rgba(255, 255, 255, .82); fill: currentColor; stroke-width: 1.2; animation: mcast-bouge 5s ease-in-out infinite; }
@keyframes mcast-bouge { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-6%) rotate(-3deg); } 65% { transform: translateX(5%) rotate(2deg); } }
.mcast__rec { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 6px; border-radius: 6px; background: rgba(239, 68, 68, .9); color: #fff; font-size: .55rem; font-weight: 800; letter-spacing: .06em; animation: clignoter 1.6s ease-in-out infinite; }
.mcast__fil { position: absolute; left: 6px; right: 6px; bottom: 8px; z-index: 1; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mcast__fil li { width: max-content; max-width: 100%; padding: 2px 6px; overflow: hidden; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #fff; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; opacity: 0; animation: mcast-fil 6s ease-in-out infinite; }
.mcast__fil li:nth-child(2) { animation-delay: 2s; }
.mcast__fil li:nth-child(3) { animation-delay: 4s; }
.mcast__fil b { margin-right: 4px; color: #c4b5fd; }
@keyframes mcast-fil { 0% { opacity: 0; transform: translateY(8px); } 8%, 60% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: translateY(-6px); } }
.mcast__ondes { position: relative; height: 60px; }
.mcast__ondes i { position: absolute; top: 50%; left: 10%; width: 26px; height: 26px; margin-top: -13px; border: 3px solid transparent; border-right-color: var(--cyan); border-radius: 50%; opacity: 0; animation: mcast-onde 1.8s ease-out infinite; }
.mcast__ondes i:nth-child(2) { animation-delay: .6s; }
.mcast__ondes i:nth-child(3) { animation-delay: 1.2s; }
@keyframes mcast-onde { 0% { opacity: 0; transform: translateX(0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(34px) scale(1.5); } }
.mcast__pc { display: grid; justify-items: center; }
.mcast__ecran { position: relative; width: 100%; padding: 7px; border-radius: 12px; background: #040408; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 40px -22px rgba(34, 211, 238, .8); }
.mcast__video { aspect-ratio: 16 / 10; border-radius: 7px; }
.mcast__video .mcast__silhouette { width: 40%; margin-bottom: -6%; }
.mcast__direct { position: absolute; top: 13px; left: 13px; z-index: 1; padding: 2px 6px; border-radius: 5px; background: #ef4444; color: #fff; font-size: .55rem; font-weight: 800; letter-spacing: .06em; }
.mcast__legende { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; color: var(--doux); font-size: .72rem; }
.mcast__legende .icone { width: 13px; height: 13px; color: var(--cyan); }
.mcast__pied { width: 28%; height: 18px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #1a1a28, #0b0b14); }

/* Apparitions au défilement : seulement si vitrine.js tourne (classe posée par lui). */
.js-revele [data-revele] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--doux-sortie), transform .7s var(--doux-sortie); transition-delay: calc(var(--rang, 0) * 70ms); }
.js-revele [data-revele].revele--vu { opacity: 1; transform: none; }
.js-revele .nouveaute[data-revele].revele--vu:hover { transform: translateY(-4px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .vitrine__multi--entre, .vitrine__onde--go, .vitrine__coeur, .vitrine__chat li, .nouveaute__badge, .mcast__tel, .mcast__silhouette, .mcast__rec, .mcast__ondes i, .msb-son--joue .msb-son__piste i, .maquette-sb__curseur { animation: none !important; }
  .mcast__fil li { animation: none !important; opacity: 1; }
}
.vitrine__coeur { filter: drop-shadow(0 2px 6px rgba(236, 72, 153, .55)); }
.mcast__image .mcast__silhouette { width: 84%; margin-bottom: -4%; }
@media (max-width: 639px) {
  .notif--3 { display: none; }
  .vitrine__multi { font-size: 4.4rem; }
  .notif--2 { top: 21%; right: -14px; }
}
/* Bilans & Comptabilité sans compte TikTok prouvé (23/10/2026). */
.verrou-chiffres h2 { display: flex; align-items: center; gap: 10px; }
.verrou-chiffres__icone { flex: none; width: 26px; height: 26px; color: var(--cyan); }

/* ── Soundboard (23/10/2026) : le lien StreamDeck de chaque son, et des cartes
   où le titre a toute la largeur (deux lignes), les boutons passant dessous à
   droite, à côté de la catégorie et de la durée. Les tuiles à 5 gardent leur
   forme, avec des boutons plus petits. */
.son__lien { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--bord-2); border-radius: 12px; background: transparent; color: var(--doux); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; }
.son__lien .icone { width: 18px; height: 18px; }
.son__lien:hover, .son__lien:focus-visible { border-color: rgba(34, 211, 238, .55); background: rgba(34, 211, 238, .1); color: var(--cyan); transform: translateY(-1px); }
.son__lien--copie { border-color: rgba(53, 208, 127, .6); color: #35d07f; }
.son__lien--copie .icone { animation: sb-rebond .5s cubic-bezier(.2, 1.6, .4, 1); }
/* 24/10/2026 : le titre est aligné sur le bouton ▶ ; quand le son joue, il
   monte de quelques pixels pour laisser paraître la barre de lecture
   dessous, et redescend à la fin. */
.soundboard .son:not(.sb--c5 .sons--galerie .son) { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: minmax(54px, auto) auto; grid-template-areas: "bouton titre titre" ". meta actions"; align-items: center; column-gap: 12px; row-gap: 4px; }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__ecouter { grid-area: bouton; }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__infos { display: contents; }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__titre { grid-area: titre; display: -webkit-box; align-self: center; line-height: 1.3; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.soundboard .son--ecoute:not(.sb--c5 .sons--galerie .son) .son__titre { transform: translateY(-7px); }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__renommer { grid-area: titre; }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__piste { grid-area: titre; align-self: end; margin: 0; opacity: 0; transform: translateY(3px); transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; }
.soundboard .son--ecoute:not(.sb--c5 .sons--galerie .son) .son__piste { opacity: 1; transform: none; transition-delay: .06s, .06s, 0s; }
@media (prefers-reduced-motion: reduce) { .soundboard .son .son__titre, .soundboard .son .son__piste { transition: none; } }
/* Les favoris : sans catégorie ; la durée sous ▶, le volume du son entre
   elle et les boutons. */
.soundboard .son--favori:not(.sb--c5 .sons--galerie .son) { grid-template-areas: "bouton titre titre" "duree volume actions"; }
.soundboard .son--favori:not(.sb--c5 .sons--galerie .son) .son__meta { display: contents; }
.soundboard .son--favori:not(.sb--c5 .sons--galerie .son) .son__duree { grid-area: duree; justify-self: center; font-size: .75rem; color: var(--doux); white-space: nowrap; }
.soundboard .son--favori .son__cat { display: none; }
.son__volume { display: flex; align-items: center; min-width: 0; }
.soundboard .son--favori:not(.sb--c5 .sons--galerie .son) .son__volume { grid-area: volume; }
.son__volume input { width: 100%; min-width: 0; margin: 0; accent-color: var(--son-a, var(--cyan)); cursor: pointer; }
.sb--c5 .sons--galerie .son__volume { margin-top: 2px; }
.sb-entete-gauche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sb-vue-favoris svg { fill: none; }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__meta { grid-area: meta; min-width: 0; }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__actions { grid-area: actions; gap: 5px; }
.soundboard .son__actions > .son__favori, .soundboard .son__actions > .son__lien, .soundboard .son__actions > .son__declencheur, .soundboard .son__actions > .bouton.son__outil, .soundboard .son__actions .bouton-corbeille { width: 34px; min-width: 34px; height: 34px; min-height: 34px; border-radius: 10px; }
.sb--c5 .sons--galerie .son__actions { gap: 4px; }
.sb--c5 .sons--galerie .son__actions > * { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
.soundboard .son:not(.sb--c5 .sons--galerie .son) .son__ecoutes { display: none; }

/* Soundboard → Importer : le lien vers Myinstants, avec l'avertissement des droits (24/10/2026). */
.sb-memes { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; margin: 4px 0 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(251, 191, 36, .4); background: linear-gradient(135deg, rgba(251, 191, 36, .1), rgba(236, 72, 153, .08)); }
.sb-memes__emoji { font-size: 2rem; line-height: 1; animation: sb-flotte 2.6s ease-in-out infinite; }
.sb-memes__texte { display: grid; gap: 2px; color: var(--doux); font-size: .93rem; }
.sb-memes__texte strong { color: var(--texte); font-size: 1.02rem; }
.sb-memes__texte b { color: #fde68a; }
.sb-memes__lien { grid-column: 1 / -1; justify-self: start; border-color: rgba(251, 191, 36, .6); color: #fde68a; }
.sb-memes__lien:hover { background: rgba(251, 191, 36, .14); }
.sb-memes__avertissement { grid-column: 1 / -1; margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); color: #e9d5b0; font-size: .85rem; line-height: 1.45; }
@media (min-width: 720px) { .sb-memes { grid-template-columns: auto 1fr auto; } .sb-memes__lien { grid-column: auto; justify-self: end; } }
@media (prefers-reduced-motion: reduce) { .sb-memes__emoji { animation: none; } }

/* Barres de défilement intégrées au site (24/10/2026) : la place de la barre
   de la page est toujours réservée (scrollbar-gutter), donc rien ne se décale
   quand on passe d'une page courte à une page longue ; et toutes les barres
   verticales sont fines, violettes, sur un rail transparent — plus de barre
   grise du navigateur. Les zones qui masquaient déjà leur barre la gardent
   masquée (règles plus précises que celles-ci). Les overlays d'OBS ne chargent
   pas cette feuille : ils ne sont pas concernés. */
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(168, 85, 247, .55) transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(168, 85, 247, .45) transparent; }

/* Une télécommande, plusieurs affichages (24/10/2026). */
.ov-badge--obs { background: rgba(251, 191, 36, .14); color: #fde68a; }
.ov-badge--obs-ok { background: rgba(53, 208, 127, .16); color: #86efac; }
.ov-badge--affichage { background: rgba(255, 255, 255, .06); color: var(--doux); }
.ov-schema { display: grid; gap: 12px; margin: 14px 0 16px; }
@media (min-width: 720px) { .ov-schema { grid-template-columns: 1fr 1fr; } }
.ov-schema__case { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(34, 211, 238, .3); background: rgba(34, 211, 238, .06); color: var(--doux); font-size: .92rem; line-height: 1.45; }
.ov-schema__case--obs { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .07); }
.ov-schema__icone { grid-row: span 2; font-size: 1.8rem; line-height: 1; }
.ov-schema__case strong { color: var(--texte); font-size: 1rem; }
.ov-schema__case b { color: var(--texte); }
.ov-obs { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .06); }
.ov-obs summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-weight: 800; list-style: none; }
.ov-obs summary::-webkit-details-marker { display: none; }
.ov-obs[open] summary { margin-bottom: 10px; }
.ov-obs__etat { padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.ov-obs__etat--ok { background: rgba(53, 208, 127, .16); color: #86efac; }
.ov-obs__etat--non { background: rgba(251, 191, 36, .16); color: #fde68a; }
.ov-obs .champ { margin: 8px 0; }
.ov-obs__regles { margin: 12px 0 8px; padding-left: 20px; color: var(--doux); font-size: .9rem; line-height: 1.5; }
.ov-obs__regles li + li { margin-top: 4px; }
.ov-obs__regles strong { color: var(--texte); }
.ov-obs-non { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); color: var(--doux); font-size: .92rem; }
.ov-obs-non strong { color: var(--texte); }
/* Téléchargements : le kit OBS */
.kit-obs__boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kit-obs__mdp { max-width: 460px; margin-top: 14px; }

/* « Relier OBS » (30/10/2026) : une étape par geste, son illustration à côté. */
.relier-obs__fait { margin: 6px 0 0; font-size: .88rem; }
.relier-obs__fait a { color: var(--doux); }
.tuto-obs { display: grid; gap: 14px; margin: 8px 0 14px; padding: 0; list-style: none; counter-reset: tuto-obs; }
.tuto-obs__etape { position: relative; display: grid; gap: 14px; align-items: start; padding: 16px 16px 16px 58px; border: 1px solid var(--bord); border-radius: 16px; background: rgba(255, 255, 255, .02); counter-increment: tuto-obs; }
.tuto-obs__etape::before { content: counter(tuto-obs); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; font-weight: 800; }
.tuto-obs__texte { display: grid; gap: 8px; min-width: 0; color: var(--doux); }
.tuto-obs__texte h3 { margin: 4px 0 0; color: var(--texte); font-size: 1.05rem; }
.tuto-obs__texte p, .tuto-obs__texte ul { margin: 0; }
.tuto-obs__texte ul { padding-left: 1.2em; }
.tuto-obs__texte strong { color: var(--texte); }
.tuto-obs__texte .champ { margin: 0; }
.tuto-obs__texte .champ label { display: block; margin-bottom: 6px; color: var(--texte); font-weight: 600; font-size: .95rem; }
.tuto-obs__illus { min-width: 0; }
.tuto-obs__illus .ill { margin: 0; }
@media (min-width: 900px) {
  .tuto-obs__etape:has(.tuto-obs__illus) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .tuto-obs__illus .ill__scene { font-size: 9px; }
}

/* La pop-up « OBS n'est pas relié » (alerte-obs.js) : en bas de l'écran,
   tant que le problème dure. */
.alerte-obs { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; width: min(760px, calc(100% - 24px)); padding: 12px 14px 12px 16px; border: 1px solid #ff4d4d; border-radius: 16px; background: linear-gradient(135deg, #5a0d14, #3a0a10); box-shadow: 0 0 0 4px rgba(255, 77, 77, .18), 0 18px 44px rgba(0, 0, 0, .6); color: #ffe1e1; transform: translateX(-50%); animation: alerte-obs-entree .4s cubic-bezier(.22, 1, .36, 1); }
.alerte-obs[hidden] { display: none; }
.alerte-obs__icone { flex: none; font-size: 1.7rem; line-height: 1; animation: alerte-obs-pouls 1.6s ease-in-out infinite; }
.alerte-obs__texte { flex: 1; min-width: 0; margin: 0; font-size: .92rem; line-height: 1.4; }
.alerte-obs__texte strong { color: #fff; }
.alerte-obs__lien { flex: none; padding: 9px 14px; border-radius: 11px; background: #ff4d4d; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.alerte-obs__lien:hover, .alerte-obs__lien:focus-visible { background: #ff6b6b; outline: 2px solid #fff; outline-offset: 2px; }
body.avec-alerte-obs { padding-bottom: 110px; }
@keyframes alerte-obs-entree { from { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes alerte-obs-pouls { 50% { transform: scale(1.12); } }
@media (max-width: 560px) {
  .alerte-obs { flex-wrap: wrap; }
  .alerte-obs__texte { flex-basis: calc(100% - 64px); font-size: .86rem; }
  .alerte-obs__lien { flex: 1; text-align: center; }
  body.avec-alerte-obs { padding-bottom: 170px; }
}
@media (prefers-reduced-motion: reduce) { .alerte-obs, .alerte-obs__icone { animation: none; } }

/* Témoin de la liaison avec OBS (30/10/2026), en haut à droite de la
   section Animations OBS : vert relié, orange coupé, rouge jamais relié. */
.pc-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: .7em; }
.pc-entete h2 { margin: 0; }
.temoin-obs { --c: #35d07f; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--texte); font-size: .88rem; line-height: 1.3; }
.temoin-obs--orange { --c: #f59e0b; }
.temoin-obs--rouge { --c: #ff4d4d; }
.temoin-obs__point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent), 0 0 10px var(--c); }
.temoin-obs--vert .temoin-obs__point { animation: temoin-obs-pouls 2.4s ease-in-out infinite; }
.temoin-obs strong { color: var(--c); }
.temoin-obs__detail { color: var(--doux); }
.temoin-obs__detail::before { content: '· '; }
.temoin-obs__lien { color: var(--c); font-weight: 700; }
.temoin-obs__detail[hidden], .temoin-obs__lien[hidden] { display: none; }
@keyframes temoin-obs-pouls { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 10%, transparent), 0 0 14px var(--c); } }
@media (prefers-reduced-motion: reduce) { .temoin-obs--vert .temoin-obs__point { animation: none; } }

/* Barres de recherche des listes (30/10/2026) et groupes des animations OBS
   par sorte de déclenchement. */
.filtre { min-height: 48px; margin: 12px 0 14px; }
.filtre input { height: 46px; font-size: 1rem; }
.filtre__vide { margin: 4px 0 10px; }
[data-filtre-el][hidden], [data-filtre-groupe][hidden] { display: none !important; }
.famille--main { --famille: #94a3b8; }
.famille--multiplicateurs { --famille: #fb923c; }
.famille--locales { margin-top: 10px; }
.famille--locales + .famille--locales { margin-top: 22px; }
.famille--locales .locales { margin-top: 0; }
.famille--locales .locale { border-left: 3px solid var(--famille); }

/* ── Pages fonctions (/fonctions, /fonctions/<page>) : référencement ───── */
.fonction__plus { display: inline-flex; gap: 6px; margin-top: 16px; color: var(--cyan); font-weight: 700; text-decoration: none; }
.fonction__plus:hover { text-decoration: underline; }
.lp-fil { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; color: var(--doux); font-size: .88rem; }
.lp-fil a { color: var(--doux); }
.lp-fil a:hover { color: var(--texte); }
.lp-heros { max-width: 760px; margin: 28px auto 0; text-align: center; }
.lp-heros h1 { margin: 0 auto 14px; max-width: 20ch; font-family: var(--titre); font-size: clamp(2rem, 6.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; }
.lp-heros .chapeau { margin: 0 auto; }
.lp-heros .heros__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.lp-rassurance { justify-content: center; }
.lp-demos, .lp-visuel { margin-top: 44px; }
.lp-visuel { max-width: 920px; margin-left: auto; margin-right: auto; }
.lp-visuel .maquette { margin: 0 auto; }
.lp-bloc { max-width: 760px; margin: 56px auto 0; }
.lp-bloc h2 { margin: 0 0 12px; font-family: var(--titre); font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.15; letter-spacing: -.01em; }
.lp-bloc p { margin: 0 0 12px; color: var(--doux); font-size: 1.04rem; line-height: 1.65; }
.lp-bloc .puces li { align-items: flex-start; font-weight: 600; }
.lp-bloc .puces .icone { margin-top: 2px; }
.lp-aide__liste { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; }
.lp-aide__liste a { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--bord); border-radius: 16px; background: var(--verre); color: var(--texte); text-decoration: none; transition: border-color .2s ease; }
.lp-aide__liste a:hover { border-color: var(--violet); }
.lp-aide__liste span { color: var(--doux); font-size: .92rem; }
.lp-autres { display: grid; gap: 12px; margin-top: 18px; }
.lp-carte { display: grid; align-content: start; gap: 6px; padding: 20px 18px; border: 1px solid var(--bord); border-radius: 20px; background: var(--verre); color: var(--texte); text-decoration: none; transition: transform .25s var(--doux-sortie), border-color .25s ease; }
.lp-carte:hover { transform: translateY(-3px); border-color: var(--violet); }
.lp-carte__icone { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(168, 85, 247, .16); color: var(--violet); }
.lp-carte__icone .icone { width: 22px; height: 22px; }
.lp-carte strong { font-family: var(--titre); font-size: 1.08rem; }
.lp-carte span:last-child { color: var(--doux); font-size: .92rem; line-height: 1.45; }
.lp-mention { max-width: 760px; margin: 0 auto 20px; font-size: .8rem; text-align: center; }
@media (min-width: 640px) { .lp-autres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lp-autres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }