*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#1C1C1E;
  --bg-mid:#242426;
  --bg-card:#2E2E30;
  --bg-soft:#323234;
  --gold:#FA9410;
  --gold-light:#FDB71E;
  --gold-pale:rgba(250,148,16,0.12);
  --border:rgba(250,148,16,0.28);
  --border-soft:rgba(250,148,16,0.16);
  /* Troisième couleur, réservée aux accents premium (palier Pro, réussite),
     jamais en fond ni en remplacement du doré, seulement pour signaler
     ce qui est "le niveau au-dessus". */
  --emerald:#1F6B4C;
  --emerald-light:#3E9B75;
  --emerald-pale:rgba(46,125,91,0.14);
  --emerald-border:rgba(46,125,91,0.35);
  --muted:rgba(255,255,255,0.62);
  --text:#FFFFFF;
  --text-secondary:rgba(255,255,255,0.75);
  --white:#FFFFFF;
}
/* Retour créateur du 3 septembre 2026, persistant malgré le 16px déjà en
   place sur tous les champs et le verrouillage de la balise viewport au
   focus (voir js/navigation.js) : sans cette ligne, WebKit peut appliquer sa
   propre inflation automatique du texte sur mobile ("text autosizer", pensé
   pour les pages non responsive), qui fait varier la taille RENDUE d'un
   champ indépendamment de son font-size déclaré en CSS et peut donc
   déclencher le zoom natif au focus même sur un champ correctement réglé à
   16px. text-size-adjust:100% verrouille le texte à sa taille CSS exacte,
   sans cette ambiguïté. Aucun risque : ne bloque ni le zoom manuel (pincer),
   ni l'agrandissement de texte choisi par l'utilisateur dans les réglages
   d'accessibilité du système (ceux-ci s'appliquent en amont, au niveau du
   navigateur, jamais via ce mécanisme d'inflation automatique). */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Empêche le zoom par double-tap accidentel sur mobile (Safari iOS surtout),
   distinct du zoom auto au focus d'un champ (déjà bloqué par le 16px minimum
   sur .ctx-input/.ctx-textarea/.ds-input/.modal-input), cette règle couvre
   un tap/double-tap rapide n'importe où dans l'app. */
body{background:var(--bg);color:var(--white);font-family:'Poppins',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;touch-action:manipulation}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--gold);opacity:0.4}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 36px;
  background:rgba(28,28,30,0.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-soft);
}
/* "Scriptura" dans la police de la capture de référence du propriétaire
   (identifiée par comparaison visuelle : Russo One, Google Fonts), en
   majuscules. Distinct du reste de l'app (Poppins minuscule) : c'est le
   texte du logo lui-même, pas un libellé Cinzel de la refonte précédente. */
.logo{display:inline-flex;align-items:center;gap:0;font-family:'Russo One',sans-serif;text-transform:uppercase;font-weight:400;font-size:1.05rem;letter-spacing:0.01em;color:var(--white);opacity:1;transition:opacity 0.3s ease}
/* URA en doré (retour propriétaire, capture de référence à l'appui) : plus
   d'icône S séparée, seul le mot SCRIPTURA reste, en Russo One majuscule.
   Appliqué aux 4 emplacements (en-tête, menu latéral, écran de génération,
   pied de page en style inline). Pas de couleur ici pour l'en-tête : le
   reflet scintillant plus bas (voir .logo em dans le bloc @supports,
   à côté de .logo .logo-s) fournit sa couleur dorée, historique d'avant
   la refonte visuelle et remis en place sur retour du propriétaire. */
.logo em{font-style:normal}
/* Retour propriétaire : logo discret pendant le travail (scrollé dans le
   contenu), pleinement présent en haut de page ou au survol. Toggle posé
   par updateScrollBtn (js/ui.js), même mécanisme que le bouton remonter. */
body.nav-scrolled .logo{opacity:0.45}
body .logo:hover{opacity:1}

/* ── BANNIÈRE COMPTE (abonnement bientôt expiré / générations bientôt
   épuisées) : fixe, juste sous la nav, chevauche légèrement le haut du
   contenu quand visible plutôt que de repousser toute la mise en page
   (bandeau temporaire et fermable, pas une section permanente). ── */
.notif-compte-bar{
  /* En FLUX NORMAL (plus position:fixed) : la barre pousse le contenu vers le
     bas au lieu de le recouvrir, et défile avec la page (elle disparaît sous
     le menu fixe quand on scrolle). `margin-top` = hauteur réelle de la nav
     fixe, posé en JS (positionnerNotifCompte, js/abonnement.js) car cette
     hauteur varie selon l'écran (padding réduit en mobile). Quand la barre
     est visible, le contenu juste en dessous ne doit plus dégager la nav
     lui-même (la barre s'en charge) : voir body.notif-visible plus bas. */
  display:none;position:relative;z-index:1;
  background:rgba(28,28,30,0.98);border-bottom:1px solid var(--border);
  padding:11px 44px 11px 20px;
  align-items:center;justify-content:center;gap:12px;
  font-family:'Poppins',sans-serif;font-size:0.82rem;color:var(--gold-light);
  text-align:center;line-height:1.4;
}
.notif-compte-bar.visible{display:flex}
/* La barre (au-dessus, avec sa marge = hauteur de la nav) dégage déjà le menu
   fixe : le contenu qui suit ne rajoute pas son propre dégagement. */
body.notif-visible .ticker-wrap{margin-top:0}
body.notif-visible.hero-focus .hero{padding-top:28px}
.notif-compte-lien{color:var(--gold);text-decoration:underline;cursor:pointer;font-weight:500}
.notif-compte-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;color:var(--muted);font-size:1rem;
  cursor:pointer;line-height:1;padding:6px;flex-shrink:0;
}
.notif-compte-close:hover{color:var(--white)}
@media(max-width:640px){
  .notif-compte-bar{padding:10px 40px 10px 14px;font-size:0.74rem;gap:6px}
}

/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:50px 12px 80px;
  position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%,rgba(250,148,16,0.06) 0%,transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%,rgba(250,148,16,0.03) 0%,transparent 60%);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(250,148,16,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,148,16,0.025) 1px,transparent 1px);
  background-size:80px 80px;pointer-events:none;
}
.hero-eyebrow{
  font-family:'Poppins',sans-serif;font-size:0.65rem;font-weight:400;
  letter-spacing:0.26em;text-transform:lowercase;
  color:var(--gold);opacity:0.75;margin-bottom:32px;
}
/* "IA" reste en majuscules même dans un libellé en minuscule (retour
   propriétaire) : un sigle ne se lit pas comme le reste de la phrase.
   Utilisé ici et dans .gen-tagline ("Ton réalisateur IA au travail"). */
.ia-majuscule{text-transform:uppercase}
/* Badge logo au-dessus du texte "Propulsé par l'IA" : éclair dans un cadre
   avec un filet doré qui tourne en continu, même mécanique que
   .hero-mode-btn.audit (voir plus bas), pour lier visuellement le logo au
   mode diagnostic, le plus "haut de gamme" des modes de Scriptura.
   Deux tailles/formes selon l'état de la page (retour direct du
   propriétaire) : arrondi carré et plus grand (80px) sur la page
   d'accueil (état initial, avant que les modes soient révélés) ; rond,
   un peu plus petit (72px, mais toujours plus grand qu'avant) une fois
   les modes révélés (body.hero-focus, voir revelerModes/js/ui.js), pour
   que la différence de taille entre les deux états soit visible. */
.hero-logo-badge{
  position:relative;width:80px;height:80px;border-radius:22px;overflow:hidden;
  isolation:isolate;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;
  transition:width 0.3s ease,height 0.3s ease,border-radius 0.3s ease;
}
body.hero-focus .hero-logo-badge{width:72px;height:72px;border-radius:50%}
.hero-logo-badge::before{
  content:'';position:absolute;top:50%;left:50%;width:150%;aspect-ratio:1;
  background:conic-gradient(from 0deg,
    rgba(250,148,16,0.18) 0deg,
    rgba(250,148,16,0.18) 240deg,
    rgba(250,148,16,0.55) 300deg,
    #FDB71E 332deg,
    rgba(250,148,16,0.55) 346deg,
    rgba(250,148,16,0.18) 360deg);
  animation:heroLogoSpin 3.5s linear infinite;z-index:0;
}
.hero-logo-badge::after{
  content:'';position:absolute;inset:1px;border-radius:21px;
  background:linear-gradient(rgba(250,148,16,0.08),rgba(250,148,16,0.08)),var(--bg);z-index:1;
  transition:border-radius 0.3s ease;
}
body.hero-focus .hero-logo-badge::after{border-radius:50%}
.hero-logo-badge svg{position:relative;z-index:2;width:34px;height:34px;animation:heroBoltPulse 1.7s ease-in-out infinite;transition:width 0.3s ease,height 0.3s ease}
body.hero-focus .hero-logo-badge svg{width:30px;height:30px}
@keyframes heroLogoSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
/* Seul l'éclair respire, jamais le cadre (qui a déjà sa propre animation
   de bordure tournante ci-dessus, indépendante) : c'est le 2e niveau
   d'animation de ce badge. Même intensité que les autres pulsations de
   l'app (halo doré + agrandissement marqué, voir howIconPulse). */
@keyframes heroBoltPulse{
  0%,100%{opacity:0.85;transform:scale(1);filter:drop-shadow(0 0 0 rgba(253,183,30,0))}
  50%{opacity:1;transform:scale(1.34);filter:drop-shadow(0 0 8px rgba(253,183,30,0.9))}
}
@media(prefers-reduced-motion:reduce){
  .hero-logo-badge::before{animation:none;background:rgba(250,148,16,0.5)}
  .hero-logo-badge svg{animation:none}
}
.hero h1{
  font-family:'Playfair Display',serif;font-weight:400;font-style:italic;
  font-size:clamp(3rem,8vw,6rem);
  line-height:1.05;letter-spacing:-0.02em;
  margin-bottom:14px;max-width:900px;
  color:#FFFFFF;
}
.hero h1 strong{font-style:normal;font-weight:700;color:var(--gold-light);display:block}
.hero-rule{
  width:1px;height:56px;background:linear-gradient(to bottom,transparent,var(--gold),transparent);
  margin:28px auto;opacity:0.5;
}
.hero-sub{
  font-size:1rem;font-weight:300;color:rgba(255,255,255,0.7);
  max-width:420px;line-height:1.9;margin-bottom:52px;letter-spacing:0.02em;
}
.hero-free{margin-top:16px;font-size:0.7rem;color:rgba(255,255,255,0.7);letter-spacing:0.1em}

/* TICKER, un mot à la fois, entre en glissant d'un côté, tient 2s, ressort
   de l'autre, alterne gauche/droite à chaque mot (voir initTicker, js/ui.js).
   Distance de glissement (36px) alignée sur liftInLeft/liftInRight (hero,
   panneau « Créer »), même langage visuel que le reste de la page d'accueil.
   Les blocs révélés au défilement, eux, vont plus loin (revealLeft/Right) :
   ils arrivent du bord de l'écran, pas d'un endroit déjà regardé. */
.ticker-wrap{overflow:hidden;padding:14px 0;margin-top:72px}
.ticker-carousel{display:flex;align-items:center;justify-content:center;min-height:1.2em}
.ticker-word{font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.18em;text-transform:lowercase;color:rgba(255,255,255,0.7);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  .ticker-word.tk-ltr{animation:tickerSweepLTR 3.2s cubic-bezier(.2,.7,.2,1) both}
  .ticker-word.tk-rtl{animation:tickerSweepRTL 3.2s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes tickerSweepLTR{
  0%{opacity:0;transform:translateX(-36px)}
  19%{opacity:1;transform:translateX(0)}
  81%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(36px)}
}
@keyframes tickerSweepRTL{
  0%{opacity:0;transform:translateX(36px)}
  19%{opacity:1;transform:translateX(0)}
  81%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(-36px)}
}

/* FLOW SECTION */
#flow{padding:100px 12px 120px;max-width:780px;margin:0 auto}

/* STEP */
.step{display:none}
.step.active{display:block}

.step-header{text-align:left;margin-bottom:52px}
/* Le bouton retour reste à gauche, comme dans les autres modes,
   même si le reste de l'en-tête d'étape est centré. */
.step-header .btn-back{display:flex;margin-right:auto}
.step-indicator{
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.6rem;letter-spacing:0.22em;
  color:var(--gold);opacity:0.6;margin-bottom:20px;
  display:flex;align-items:center;justify-content:flex-start;gap:16px;
}
.step-dots{display:flex;gap:8px;align-items:center}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all 0.3s}
.sdot.active{background:var(--gold);width:20px;border-radius:3px}
.sdot.done{background:rgba(250,148,16,0.4)}
.step-title{
  font-family:'Playfair Display',serif;font-weight:400;font-style:italic;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.2;margin-bottom:12px;
}
.step-title strong{font-style:normal;font-weight:700;color:var(--gold-light)}
.step-sub{font-size:0.88rem;color:var(--text-secondary);line-height:1.8}

/* CHOICE CARDS */
.choices{display:flex;flex-direction:column;gap:12px}
.choice{
  display:flex;align-items:center;gap:20px;
  background:var(--bg-card);border:1px solid var(--border-soft);
  border-radius:4px;padding:22px 26px;cursor:pointer;
  transition:all 0.25s;position:relative;overflow:hidden;
}
.choice::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);transform:scaleY(0);transition:transform 0.25s;
}
.choice:hover{border-color:var(--gold);background:rgba(250,148,16,0.06)}
.choice:hover::before{transform:scaleY(1)}
.choice-icon{font-size:1.4rem;flex-shrink:0;width:36px;text-align:center;opacity:0.8}
.choice-body{flex:1}
/* Retour propriétaire : ces cartes de choix (objectif, idée vague/sujet
   précis, etc.) passent en Poppins GRAS minuscule, première lettre en
   capitale (voir le bloc CAPITALE DE PHRASE plus bas), un peu plus grand
   que .choice-desc juste en dessous (0.82rem). */
.choice-label{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:1.05rem;
  text-transform:lowercase;letter-spacing:0.01em;
  margin-bottom:4px;line-height:1.3;color:#FFFFFF;
}
.choice-desc{font-size:0.82rem;color:var(--text-secondary);line-height:1.6}
.choice-arrow{font-size:0.9rem;color:var(--gold);opacity:0;transition:opacity 0.25s;flex-shrink:0}
.choice:hover .choice-arrow{opacity:1}

/* GRID CHOICES (plateformes) */
/* CONTEXT STEP */
.context-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:4px;padding:36px 36px;margin-bottom:24px;position:relative;
}
.context-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.ctx-field{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
/* Les trois angles tirés du produit vivent ENTRE le bloc produit et le champ
   sujet (retour du propriétaire). Ils héritent des 24 px du bloc au-dessus et
   gardent volontairement MOINS d'air en dessous : la proximité dit à quoi ils
   servent, c'est le champ juste sous eux qu'un clic remplit. Assez d'air
   quand même pour ne pas coller au libellé « Ton sujet ». */
#anglesProduitScript,#anglesProduitCarrousel{margin-bottom:14px}
.ctx-label{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.2em;
  text-transform:lowercase;color:var(--gold-light);opacity:1;
}
.ctx-input,.ctx-textarea{
  /* 16px minimum : en dessous, Safari iOS zoome automatiquement l'écran
     au focus d'un champ de saisie, effet de "petit zoom" gênant. */
  font-family:'Poppins',sans-serif;font-size:1rem;
  background:#3A3A3D;
  border:1px solid rgba(255,255,255,0.15);border-radius:6px;
  padding:13px 16px;color:#FFFFFF;outline:none;
  transition:border-color 0.2s;width:100%;
}
.ctx-input:focus,.ctx-textarea:focus{border-color:rgba(250,148,16,0.45)}
.ctx-input::placeholder,.ctx-textarea::placeholder{color:rgba(255,255,255,0.45);font-size:0.82rem}
/* Un <select> n'a pas de ::placeholder : tant que son option "Choisis..."
   (value="") reste la sélection courante, le texte doit rester grisé comme
   un placeholder, jamais blanc plein (qui donne l'impression trompeuse d'un
   choix déjà fait). Redevient blanc dès qu'une vraie option est choisie. */
select.ctx-input:has(option[value=""]:checked){color:rgba(255,255,255,0.45)}
.ctx-textarea{resize:vertical;min-height:90px;line-height:1.7}

/* ── MENU DÉROULANT MAISON ──────────────────────────────────────────
   Remplace le rendu d'un <select> natif à choix nombreux (niche, audience,
   ton, fréquence, genre) : sur mobile, la liste native est dessinée par
   l'OS (plein écran sur iOS Safari), impossible à limiter en hauteur ou à
   personnaliser depuis la page. Voir initCustomSelect, js/ui.js : le
   <select> original reste dans le DOM, masqué, .value et tout addEventListener
   ('change') déjà branché ailleurs continuent de fonctionner normalement. */
.custom-select{position:relative}
/* Dans un champ pilule (.ds-field, ex. sélecteur de niche Tendances) : le
   <select> transformé doit remplir l'espace disponible comme .ds-input le
   fait déjà, sinon il ne prend que sa largeur de contenu et laisse un vide
   avant le bouton d'action (retour du propriétaire, capture). */
.ds-field .custom-select{flex:1;min-width:0}
.custom-select select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
/* Pendant maison des boutons cliquables (≤4 choix, voir initToggleButtons,
   js/ui.js) : même principe, le <select> original reste dans le DOM pour la
   compatibilité, seul le rendu visuel change (.btn-grid ci-dessous, déjà
   utilisé pour les autres petits choix comme l'objectif de l'étape 2). */
.toggle-group{position:relative}
.toggle-group select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.custom-select-trigger{
  font-family:'Poppins',sans-serif;font-size:1rem;
  background:#3A3A3D;border:1px solid rgba(255,255,255,0.15);border-radius:6px;
  padding:13px 40px 13px 16px;color:#FFFFFF;outline:none;
  transition:border-color 0.2s;width:100%;box-sizing:border-box;
  display:flex;align-items:center;position:relative;cursor:pointer;text-align:left;
}
.custom-select-trigger .cs-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-select-trigger.placeholder .cs-label{color:rgba(255,255,255,0.45);font-size:0.82rem}
.custom-select-trigger:focus{border-color:rgba(250,148,16,0.45)}
.custom-select-trigger .cs-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.45);transition:transform 0.2s;flex-shrink:0}
.custom-select.open .custom-select-trigger .cs-chevron{transform:translateY(-50%) rotate(180deg)}
.custom-select.open .custom-select-trigger{border-color:rgba(250,148,16,0.45)}
.custom-select-panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  background:#2E2E30;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 16px 40px -10px rgba(0,0,0,0.65);
  display:none;overflow:hidden;
}
.custom-select.open .custom-select-panel{display:block}
/* Format de téléchargement des images du montage (retour propriétaire) :
   ce <select> n'a que 3 choix courts (PNG/JPEG/WEBP) et vit dans une rangée
   flex serrée à côté d'un bouton pleine largeur - sans plancher de largeur,
   la rangée l'écrase au point que même son libellé courant disparaît
   (ellipsis, voir .cs-label), et le panneau déroulé (left:0;right:0, donc
   calé sur cette même largeur écrasée) tronquait "JPEG"/"WEBP" au même
   endroit. Un plancher suffit : la case redevient lisible fermée ET
   ouverte, sans toucher au comportement des autres <select> de l'app.
*/
.custom-select:has(#montageImgFormatSelect){min-width:120px}
.custom-select-list{max-height:254px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0}
.custom-select-option{
  padding:11px 16px;font-family:'Poppins',sans-serif;font-size:0.92rem;color:rgba(255,255,255,0.8);
  cursor:pointer;display:flex;align-items:center;gap:10px;line-height:1.35;
}
/* Coche en émeraude et non en doré : le doré dit "ce que tu peux faire",
   l'émeraude dit "c'est fait, c'est validé" (voir --emerald en tête de
   fichier). Une coche qui marque l'option retenue appartient au second. */
.custom-select-option .cs-check{width:14px;flex:0 0 auto;color:var(--emerald-light);visibility:hidden}
.custom-select-option.selected{color:var(--gold-light)}
.custom-select-option.selected .cs-check{visibility:visible}
.custom-select-option:hover{background:rgba(250,148,16,0.1);color:#fff}
/* Description optionnelle sous le libellé d'un choix (ex. caractéristique
   d'une voix de montage), voir data-description et construireListe() dans
   js/ui.js. */
.custom-select-option .cs-option-main{display:flex;flex-direction:column;gap:2px}
.custom-select-option .cs-option-desc{font-size:0.76rem;color:rgba(255,255,255,0.5);line-height:1.3}
.custom-select-option.selected .cs-option-desc{color:rgba(253,183,30,0.65)}
/* Petite flèche discrète : indique qu'on peut glisser vers le haut ou le bas
   pour voir d'autres choix, visible uniquement quand il reste du contenu
   caché de ce côté (voir majIndicateurs, js/ui.js). */
.custom-select-scroll-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  width:26px;height:16px;display:flex;align-items:center;justify-content:center;
  color:rgba(250,148,16,0.8);opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:2;
}
.custom-select-scroll-hint.top{top:0;background:linear-gradient(to bottom,#2E2E30 45%,transparent)}
.custom-select-scroll-hint.bottom{bottom:0;background:linear-gradient(to top,#2E2E30 45%,transparent)}
.custom-select-scroll-hint.visible{opacity:1}

/* ── PLATEFORME (menu repliable, étape 2) ──────────────────────────
   Réutilise le look du menu déroulant maison (.custom-select-trigger,
   .custom-select-panel, .custom-select-option) : mêmes classes, wrapper
   en plus avec .platform-picker pour l'icône de marque à gauche du libellé.
   Voir choisirPlateforme()/togglePlatformPicker(), js/generation.js. */
.pf-logo{width:18px;height:18px;flex-shrink:0;color:var(--gold);display:block}
.platform-picker .cs-label{margin-left:10px}
.custom-select-option.platform-option{gap:12px}
/* Liste fixe de 6 plateformes, jamais plus : contrairement aux select remplis
   de données (niche, audience…), pas besoin de plafonner/faire défiler, les
   254px hérités de .custom-select-list coupaient la dernière ligne de 9px. */
.platform-picker .custom-select-list{max-height:none;overflow-y:visible}

/* SUMMARY ROW */
.summary{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;
}
.summary-tag{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.1em;
  text-transform:lowercase;color:var(--gold);
  background:var(--gold-pale);border:1px solid var(--border-soft);
  padding:5px 14px;border-radius:999px;
}
/* Étiquette "d'où vient la reco" (diagnostic / créations / les deux) */
.reco-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.reco-source-tag{
  display:inline-block;padding:5px 12px;border-radius:999px;
  font-size:0.72rem;color:var(--text-secondary);line-height:1.3;
  background:rgba(255,255,255,0.04);border:1px solid var(--border-soft);
}
/* Badge basé sur le diagnostic (ou diagnostic + créations) : émeraude, pour
   signaler une recommandation nourrie par une analyse Pro plutôt que par
   les seules préférences déclarées. */
.reco-source-tag.premium{
  color:var(--emerald-light);background:var(--emerald-pale);border-color:var(--emerald-border);
}

/* GENERATE BTN */
.btn-generate{
  width:100%;padding:17px;
  background:var(--gold);color:var(--bg);
  /* La FAMILLE vient du bloc groupé en fin de fichier (voir « POLICE DES
     BOUTONS »). L'espacement, lui, est propre à ce bouton : 0.18em avait été
     réglé pour Cinzel, dont les capitales sont étroites. Celles de Poppins
     sont bien plus larges, et au même espacement le texte touchait les bords
     du bouton. 0.12em lui rend son air. */
  font-weight:600;font-size:0.78rem;
  letter-spacing:0.12em;text-transform:uppercase;
  border:none;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all 0.25s;
}
.btn-generate:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 12px 36px rgba(250,148,16,0.2)}
.btn-generate:disabled{background:rgba(250,148,16,0.25);color:rgba(26,10,14,0.5);cursor:not-allowed;transform:none;box-shadow:none}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:16px;height:16px;border:2px solid rgba(26,10,14,0.25);border-top-color:var(--bg);border-radius:50%;animation:spin 0.7s linear infinite;display:none;flex-shrink:0}

/* BACK BTN */
/* Zone tactile agrandie SANS déplacer quoi que ce soit : le remplissage
   vertical est annulé par une marge négative de même valeur. Mesuré à 61x11
   lors de l'audit responsive, alors que ce bouton est présent sur presque
   tous les écrans de l'app. Un « Retour » qu'on rate au pouce est la
   frustration la plus bête possible. */
.btn-back{
  padding:17px 10px;margin:-17px -10px;
  display:inline-flex;align-items:center;gap:8px;
  /* LE SEUL BOUTON QUI PASSE EN MINUSCULES, et c'est voulu. En majuscules
     espacées, « ← RETOUR » pesait autant qu'une action principale alors que
     c'est un simple lien de navigation. En minuscules il redevient discret,
     ce qu'il doit être. Décision prise sur capture comparative, avec le
     propriétaire. La famille vient du bloc groupé en fin de fichier. */
  font-size:0.78rem;font-weight:500;letter-spacing:0.02em;
  text-transform:none;color:rgba(255,255,255,0.7);
  background:transparent;border:none;cursor:pointer;
  margin-bottom:32px;transition:color 0.2s;
}
.btn-back:hover{color:var(--gold)}

/* ERROR */
.error-box{
  background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);
  border-radius:6px;padding:12px 16px;color:#FCA5A5;
  font-size:0.83rem;margin-bottom:16px;display:none;line-height:1.6;
}

/* RESULTS */
/* Aucune marge haute : #results est le SEUL bloc visible de #flow quand il
   s'affiche (renderResults efface la classe "active" des étapes 1 et 2), donc
   les 56px d'origine ne séparaient plus de rien, ils creusaient juste un vide
   entre l'en-tête fixe et le bouton « ← Retour ». Retour propriétaire : le
   mode Script était très en retrait par rapport au mode Récit. Ce dernier
   n'a que le padding haut de son écran (#storyFlow, 100px), on s'aligne
   dessus, le padding de #flow valant lui aussi 100px. */
#results{margin-top:0;display:none}
.results-top{
  margin-bottom:32px;padding-bottom:24px;
  border-bottom:1px solid var(--border-soft);
}
/* Titre + bouton Régénérer sur une seule et même ligne, mention en dessous. */
.results-top-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.results-top-row .btn-regenerate{flex-shrink:0}
.results-top .results-meta{margin-top:8px}
.results-heading{font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:1.6rem}
/* Sur les petits écrans, le titre rétrécit légèrement pour rester sur une ligne
   à côté du bouton, au lieu de se casser en deux. */
.results-top-row .results-heading{white-space:nowrap;font-size:clamp(1rem,5.6vw,1.6rem)}
.results-meta{font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.14em;color:var(--gold);opacity:0.6;text-transform:lowercase}

/* OUTPUT CARD */
.out-card{
  background:var(--bg-card);border:1px solid var(--border-soft);
  border-radius:4px;margin-bottom:14px;overflow:hidden;
  transition:border-color 0.25s;
}
.out-card:hover{border-color:var(--gold)}
.out-header{
  display:flex;align-items:flex-start;gap:16px;
  padding:24px 28px;cursor:pointer;
}
.out-num{
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.6rem;letter-spacing:0.1em;
  color:var(--gold);opacity:0.45;flex-shrink:0;padding-top:4px;
  min-width:28px;
}
.out-title{
  font-family:'Playfair Display',serif;font-weight:500;font-size:1.05rem;
  line-height:1.4;flex:1;
}
.out-card-title{
  font-family:'Playfair Display',serif;font-weight:500;font-size:1.05rem;
  line-height:1.4;flex:1;color:#FFFFFF;
}
.out-toggle{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;color:var(--gold);flex-shrink:0;
  transition:all 0.25s;margin-left:12px;
}
.out-card.open .out-toggle{background:var(--gold-pale);transform:rotate(45deg)}
.out-body{display:none;padding:0 28px 28px;border-top:1px solid var(--border-soft)}
.out-body .legende-block{background:none;border:none;padding:0}
.out-body .hook-item{background:none;border:none;border-bottom:1px solid var(--border-soft);border-radius:0}
.out-body .prompt-item{background:none;border:none}
.out-body .script-block{background:none;border:none;padding:0}
.serie-episode .script-block{background:none;border:none;padding:0;margin-bottom:8px}
.out-body .story-segment{border-left:none;padding-left:0}
.out-card.open .out-body{display:block}
/* Carte ouverte : overflow visible (pas hidden) pour que le menu déroulant
   maison (Style graphique/Format du storyboard, position absolute) ne soit
   pas rogné par le coin arrondi de la carte. Fermée, overflow:hidden reste
   utile (rogne proprement les coins), mais rien d'interactif n'y dépasse
   alors puisque le corps est display:none. */
.out-card.open{overflow:visible}

/* SECTIONS DANS LE CARD */
.out-section{margin-top:22px}
.out-section-label{
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.2em;
  text-transform:lowercase;color:var(--gold);opacity:0.55;margin-bottom:12px;
}
.hook-block{
  font-family:'Playfair Display',serif;font-style:italic;font-size:0.97rem;
  color:var(--gold-light);line-height:1.75;
  border-left:1px solid var(--gold);padding-left:18px;opacity:0.9;
}
.script-block{
  background:rgba(255,255,255,0.07);border:1px solid var(--border-soft);
  border-radius:2px;padding:20px 22px;
}
.script-row{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}
.script-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.script-time{
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.56rem;letter-spacing:0.14em;
  color:var(--gold);opacity:0.5;display:block;margin-bottom:6px;
}
.script-text{font-size:0.88rem;color:#FFFFFF;line-height:1.8}
.script-visual{font-size:0.78rem;color:var(--gold);opacity:0.45;margin-top:5px;font-style:italic}
.script-edit-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.script-edit-btn{
  font-size:0.68rem;padding:4px 11px;border-radius:999px;
  border:1px solid var(--border-soft);background:transparent;color:var(--text-secondary);
  cursor:pointer;transition:border-color .15s,color .15s;
}
.script-edit-btn:hover{border-color:var(--gold);color:var(--gold)}
.script-edit-btn:disabled{opacity:0.5;cursor:default;border-color:var(--border-soft);color:var(--text-secondary)}
.legende-block{
  background:rgba(255,255,255,0.07);border:1px solid var(--border-soft);
  border-radius:2px;padding:16px 20px;
  font-size:0.88rem;color:var(--text);line-height:1.75;
}
.hooks-list{display:flex;flex-direction:column;gap:10px}
.hook-item{
  background:rgba(255,255,255,0.07);border:1px solid var(--border-soft);
  border-radius:2px;padding:14px 18px;
  font-size:0.88rem;color:var(--text);line-height:1.7;
  position:relative;
}
.hook-style{
  font-family:'Poppins',sans-serif;font-size:0.55rem;letter-spacing:0.14em;
  color:var(--gold);opacity:0.5;display:block;margin-bottom:5px;
  text-transform:lowercase;
}
/* « Utiliser ce hook » : le bouton reprend exactement l'habillage des
   retouches par passage (.script-edit-btn), c'est le même geste pour le
   créateur, une petite action discrète sous un texte. */
.hook-actions{margin-top:10px}
/* Ce que l'échange vient de faire, dit noir sur blanc, y compris ce qu'il n'a
   PAS fait (le score n'est pas recalculé). Doré : une information à lire, pas
   une réussite ni une erreur. */
.hook-echange-note{
  margin-top:12px;padding:11px 14px;border-radius:8px;
  background:rgba(250,148,16,0.07);border:1px solid rgba(250,148,16,0.22);
  font-size:0.78rem;line-height:1.55;color:var(--gold-light);
}
.hashtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ht{
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.62rem;letter-spacing:0.06em;
  padding:4px 12px;border-radius:999px;
  background:var(--gold-pale);color:var(--gold);border:1px solid var(--border-soft);
}
.prompts-grid{display:grid;grid-template-columns:1fr;gap:10px}
.prompt-item{
  background:rgba(255,255,255,0.07);border:1px solid var(--border-soft);
  border-radius:2px;padding:14px 18px;font-size:0.85rem;color:var(--text);line-height:1.7;
}
.prompt-type{
  font-family:'Poppins',sans-serif;font-size:0.55rem;letter-spacing:0.14em;
  color:var(--gold);opacity:0.5;display:block;margin-bottom:6px;text-transform:lowercase;
}
/* CORRECTIF (refonte visuelle) : .copy-btn et 18 autres boutons de cette
   feuille de style (.share-btn, .btn-restart, .gen-skip-btn, .modal-btn,
   .footer-wa-btn, .sb-generate-btn, .btn-actualiser, .idea-btn-script,
   .idea-btn-copy, .idea-btn-share, .btn-storyboard, .nav-history-btn,
   .hist-tool-btn, .modal-btn-ghost, .action-btn, .affiner-toggle,
   .nav-subscribe-cta, .genimg-btn, plus .btn-regenerate et
   .btn-montage-primary corrigés séparément plus haut) utilisaient Cinzel
   dans leur PROPRE règle, avec déjà text-transform:uppercase dedans. Le
   retrait mécanique de Cinzel a converti ces règles en Poppins minuscule
   comme le reste de l'app, cassant au passage la casse MAJUSCULE de ces
   boutons décidée lors d'un correctif antérieur (voir le bloc « POLICE DES
   BOUTONS » plus bas). Contrairement à .rappel-btn/.plan-btn/.ds-scope-btn
   (protégés par une règle groupée plus bas dans le fichier qui les repasse
   en majuscules, donc jamais réellement cassés à l'écran), ces boutons-ci
   n'ont pas ce filet : la casse vient uniquement d'ici. Repéré par
   tests/montage-deux-rangees-memes-mots.test.js (bouton de musique du
   montage manuel passé en minuscules alors que son jumeau de la voix off
   restait en majuscules), puis vérifié un par un sur le reste du fichier. */
.copy-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.7);background:transparent;
  border:1px solid var(--border-soft);
  padding:7px 18px;border-radius:999px;cursor:pointer;transition:all 0.2s;
}
.copy-btn + .share-btn, .sb-copy + .share-btn, .idea-btn-copy + .share-btn{margin-left:8px}
/* Confirmation de copie, deux secondes. Jusqu'ici seul le libellé changeait
   ("✓ Copié !"), ce qui se remarquait à peine sur un bouton déjà doré.
   L'émeraude dit "c'est fait" d'un coup d'œil, sur le geste le plus répété
   de l'app. !important : plusieurs de ces boutons portent des styles en
   ligne, et cet état ne dure que le temps du retour. */
.copie-ok{
  color:var(--emerald-light) !important;
  border-color:var(--emerald-border) !important;
  background:var(--emerald-pale) !important;
}
.share-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);background:transparent;
  border:1px solid rgba(250,148,16,0.4);
  padding:7px 18px;border-radius:999px;cursor:pointer;transition:all 0.2s;
}
.share-btn:hover{background:rgba(250,148,16,0.1);border-color:var(--gold)}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}

/* RESTART */
.btn-restart{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:40px;padding:14px;
  background:transparent;color:rgba(255,255,255,0.7);
  font-family:'Poppins',sans-serif;font-size:0.65rem;
  letter-spacing:0.16em;text-transform:uppercase;
  border:1px solid var(--border-soft);border-radius:999px;cursor:pointer;
  transition:all 0.25s;
}
.btn-restart:hover{border-color:var(--gold);color:var(--gold)}

/* FOOTER */
footer{
  text-align:center;padding:40px 20px;
  border-top:1px solid var(--border-soft);
  font-family:'Poppins',sans-serif;text-transform:lowercase;
  color:rgba(255,255,255,0.45);
}
footer strong{color:var(--gold)}

/* ── FOOTER : LIENS RAPIDES (tous les modes + mon compte, accessibles
   depuis n'importe quel écran, le footer restant toujours dans le DOM) ──
   Les deux colonnes restent CÔTE À CÔTE à toutes les tailles d'écran
   (flex-wrap:nowrap), y compris mobile, voir le media query ci-dessous
   qui rétrécit colonnes/police plutôt que de les faire passer à la ligne. */
.footer-links{
  display:flex;flex-wrap:nowrap;justify-content:center;gap:32px;
  margin-bottom:32px;text-align:left;
}
.footer-links-col{display:flex;flex-direction:column;gap:10px;min-width:190px}
/* Retour propriétaire : en gras, un peu plus grand que les liens en
   dessous (.footer-link-btn, 0.82rem) au lieu du petit libellé tracké
   qu'il était (0.6rem, plus petit que ses propres liens). Espacement
   resserré en conséquence : la police, gérée par la même refonte, ne
   ressemble plus à une étiquette mais à un vrai titre de colonne. */
.footer-links-title{
  font-family:'Poppins',sans-serif;font-size:0.92rem;font-weight:700;letter-spacing:0.01em;
  text-transform:lowercase;color:var(--gold);margin-bottom:2px;
}
.footer-link-btn{
  background:none;border:none;padding:0;margin:0;text-align:left;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:0.82rem;color:rgba(255,255,255,0.6);
  text-decoration:none;transition:color 0.2s;
}
.footer-link-btn:hover{color:var(--gold)}
/* Réservé aux comptes admin, même logique que .sidebar-item.nav-admin-btn */
.footer-link-btn.nav-admin-btn{display:none}
body.is-admin .footer-link-btn.nav-admin-btn{display:block}
/* Mêmes règles que les items équivalents du sidebar (.sidebar-item.nav-*) :
   S'abonner/J'ai un code disparaissent une fois abonné (fondateur compris),
   Nous contacter disparaît seulement pour le fondateur (déjà en contact direct). */
body.is-unlocked .footer-link-btn.nav-subscribe-btn{display:none}
body.is-unlocked .footer-link-btn.nav-code-btn{display:none}
body.is-admin .footer-link-btn.nav-contact-btn{display:none}
@media(max-width:480px){
  footer{padding:40px 12px}
  .footer-links{gap:14px}
  .footer-links-col{min-width:0;flex:1 1 0}
  .footer-links-title{font-size:0.8rem;letter-spacing:0.01em}
  .footer-link-btn{font-size:0.72rem}
}

@media(max-width:600px){
  nav{padding:14px 16px}
  .nav-right{gap:8px}
  .action-btn{font-size:0.55rem;padding:8px 12px}
  .action-btn.icon-only{font-size:0.95rem;padding:7px 10px}
  .logo{font-size:1.25rem}
  #flow{padding:100px 12px 100px}
  .context-card{padding:24px 20px}
  .out-header{padding:20px 20px}
  .out-body{padding:0 20px 24px}
}

/* CHIPS TON */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.1em;text-transform:lowercase;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--border-soft);background:transparent;color:rgba(255,255,255,0.7);
  cursor:pointer;transition:all 0.2s;user-select:none;
}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.active{background:var(--gold-pale);border-color:var(--gold);color:var(--gold)}

/* BOUTONS CLIQUABLES */
.btn-grid{display:flex;flex-wrap:wrap;gap:8px}
.grid-btn{
  font-family:'Poppins',sans-serif;font-size:0.82rem;
  padding:10px 18px;border-radius:999px;
  border:1px solid var(--border-soft);background:transparent;color:rgba(255,255,255,0.7);
  cursor:pointer;transition:all 0.2s;
}
.grid-btn:hover{border-color:var(--gold);color:var(--gold)}
.grid-btn.active{background:var(--gold-pale);border-color:var(--gold);color:var(--gold);font-weight:500}

/* ── SCRIPTURA SCORE ── */
.score-card{
  background:linear-gradient(135deg, rgba(250,148,16,0.08), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  border-radius:8px;padding:28px 26px;margin-bottom:24px;
  position:relative;overflow:hidden;
}
.score-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
/* Carte d'alerte (échecs de génération) : rompt volontairement la palette
   dorée habituelle pour un vrai signal d'alerte, impossible à confondre
   avec une carte de statistique neutre (voir carteErreursAdmin, js/admin.js).
   Toujours en tête du tableau de bord quand elle apparaît. */
.score-card-alerte{
  background:linear-gradient(135deg, rgba(248,113,113,0.14), rgba(255,255,255,0.03));
  border-color:rgba(248,113,113,0.4);
}
.score-card-alerte::before{background:linear-gradient(90deg,transparent,#f87171,transparent)}
.score-card-alerte .score-title{color:#f87171}
.score-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;
}
.score-title{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.2em;
  text-transform:lowercase;color:var(--gold);
}
.score-global{
  display:flex;align-items:baseline;gap:6px;
}
.score-global-num{
  font-family:'Playfair Display',serif;font-weight:700;font-size:2.4rem;
  color:var(--gold-light);line-height:1;
}
.score-global-max{font-size:0.9rem;color:rgba(255,255,255,0.4)}
.score-metrics{display:flex;flex-direction:column;gap:14px}
/* Avertissement honnête (voir generation.js, avertissementDuree) : script
   livré malgré tout hors de la durée choisie après toutes les tentatives de
   correction, jamais silencieux. Doré, pas rouge : c'est une info utile à
   l'action ("régénère si besoin"), pas une panne de l'app. */
.duree-avertissement{
  margin-top:14px;padding:10px 14px;border-radius:6px;
  background:var(--gold-pale);border:1px solid var(--border-soft);
  color:var(--gold-light);font-size:0.8rem;line-height:1.5;
}
.metric{}
.metric-top{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
}
.metric-label{
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.12em;
  text-transform:lowercase;color:rgba(255,255,255,0.75);
}
.metric-value{
  font-family:'Playfair Display',serif;font-size:0.9rem;color:var(--gold-light);font-weight:500;
}
.metric-bar{
  width:100%;height:4px;background:rgba(255,255,255,0.1);
  border-radius:999px;overflow:hidden;
}
.metric-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transition:width 1s ease;
}
/* Le Scriptura Score reste DORÉ quel que soit le résultat. Essayé en
   émeraude au-dessus du seuil vert, refusé par le propriétaire : « le vert
   émeraude n'est pas beau » sur ces gros chiffres. La carte reste donc dans
   l'identité de la maison, et l'émeraude garde les états discrets (pastilles,
   contours, confirmation de copie). Ne pas retenter sans nouvelle demande. */
.metric-tournage{
  display:flex;align-items:center;gap:10px;
  margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.82rem;color:rgba(255,255,255,0.75);
}
.metric-tournage strong{color:var(--gold-light)}

/* ── ANIMATION DE GÉNÉRATION ── */
.gen-overlay{
  display:none;
  position:fixed;inset:0;z-index:300;
  background:rgba(28,28,30,0.97);backdrop-filter:blur(12px);
  align-items:center;justify-content:center;padding:24px;
}
.gen-overlay.active{display:flex}
.gen-box{
  max-width:420px;width:100%;text-align:center;
}
.gen-logo{
  /* Même police que .logo (voir plus haut) : Russo One, majuscules. */
  display:flex;align-items:center;justify-content:center;gap:0;
  font-family:'Russo One',sans-serif;text-transform:uppercase;font-weight:400;font-size:1.15rem;
  letter-spacing:0.01em;color:var(--white);margin-bottom:8px;
}
.gen-logo em{font-style:normal}
.gen-tagline{
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.18em;
  text-transform:lowercase;color:var(--gold);opacity:0.6;margin-bottom:48px;
}
.gen-steps{display:flex;flex-direction:column;gap:16px;text-align:left}
.gen-step{
  display:flex;align-items:center;gap:14px;
  opacity:0.3;transition:opacity 0.4s;
}
.gen-step.active{opacity:1}
.gen-step.done{opacity:0.55}
.gen-step-icon{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.65rem;color:var(--gold);
  transition:all 0.4s;
}
.gen-step.active .gen-step-icon{
  border-color:var(--gold);background:var(--gold-pale);
  animation:pulse 1.2s ease infinite;
}
.gen-step.done .gen-step-icon{
  background:var(--gold);color:var(--bg);border-color:var(--gold);
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes star-pulse{0%,100%{opacity:1;transform:scale(1);text-shadow:0 0 4px rgba(250,148,16,0.4)}50%{opacity:0.6;transform:scale(1.35);text-shadow:0 0 12px rgba(250,148,16,0.9)}}
.star-pulse{display:inline-block;animation:star-pulse 1.6s ease-in-out infinite}
.gen-step-text{
  font-size:0.9rem;color:var(--white);font-family:'Poppins',sans-serif;
}
/* ── Aperçu en direct (Script/Récit/Série écrits au fur et à mesure) ── */
.gen-live-preview{
  display:none;
  margin-top:28px;max-height:220px;overflow-y:auto;text-align:left;
  padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);
}
.gen-live-line{
  font-family:'Poppins',sans-serif;font-size:0.82rem;line-height:1.6;
  color:rgba(255,255,255,0.65);margin-bottom:10px;
}
.gen-live-line:last-child{color:var(--white)}
.gen-live-preview::-webkit-scrollbar{width:5px}
.gen-live-preview::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

/* ── Bouton « Répondre maintenant » (échappement rapide) ── */
.gen-skip-zone{margin-top:28px;text-align:center}
.gen-skip-btn{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);background:transparent;border:1px solid var(--border);
  padding:10px 22px;border-radius:999px;cursor:pointer;transition:all 0.2s;
}
.gen-skip-btn:hover{color:var(--gold);border-color:var(--gold)}
.gen-skip-btn:disabled{opacity:0.55;cursor:default}
.gen-skip-note{
  margin-top:10px;font-size:0.72rem;line-height:1.5;
  color:rgba(255,255,255,0.4);max-width:340px;margin-left:auto;margin-right:auto;
}

/* ── COMPTEUR ── */
.gen-counter{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(250,148,16,0.06);border:1px solid var(--border-soft);
  border-radius:6px;padding:12px 18px;max-width:720px;margin:0 auto 20px;
  font-size:0.8rem;color:rgba(255,255,255,0.7);
}
.gen-counter strong{color:var(--gold-light)}
/* ── Bandeau ABONNÉ premium (distingue l'abonné du non-abonné) ── */
.gen-counter.is-premium{
  border-color:rgba(250,148,16,0.55);
  background:linear-gradient(120deg,rgba(250,148,16,0.16),rgba(250,148,16,0.04));
  box-shadow:0 0 0 1px rgba(250,148,16,0.12),0 12px 32px -14px rgba(250,148,16,0.55);
}
.abonne-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(120deg,var(--gold),var(--gold-light));
  color:var(--bg);font-family:'Poppins',sans-serif;font-size:0.72rem;font-weight:600;
  padding:5px 13px;border-radius:999px;
  box-shadow:0 2px 12px -2px rgba(250,148,16,0.55);
  position:relative;overflow:hidden;
}
.abonne-star{font-size:0.74rem;line-height:1}
@media(prefers-reduced-motion:no-preference){
  .abonne-star{display:inline-block;animation:star-pulse 1.9s ease-in-out infinite}
  .abonne-badge::after{
    content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);
    transform:skewX(-18deg);animation:goldSheen 4.5s ease-in-out infinite;
  }
}
.gen-counter-dots{display:flex;gap:5px}
.gcdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.15);transition:background 0.3s}
.gcdot.used{background:var(--gold)}
.gen-counter-unlock{
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.12em;
  text-transform:lowercase;color:var(--gold);cursor:pointer;
  border:1px solid var(--border);padding:6px 14px;border-radius:999px;
  background:transparent;transition:all 0.2s;
}
.gen-counter-unlock:hover{background:var(--gold-pale)}

/* ── PAYWALL ── */
.paywall-overlay{
  display:none;position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:24px;
}
.paywall-overlay.active{display:flex}
.paywall-modal{
  max-width:460px;width:100%;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;padding:36px 30px;text-align:center;
  position:relative;overflow:hidden;
  max-height:90vh;overflow-y:auto;
}
.paywall-close{
  position:absolute;top:16px;right:16px;
  background:transparent;border:none;color:rgba(255,255,255,0.5);
  font-size:1.1rem;cursor:pointer;padding:4px;z-index:2;
}
.paywall-close:hover{color:#fff}
.paywall-modal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.paywall-tag{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.2em;
  text-transform:lowercase;color:var(--gold);margin-bottom:18px;
}
.paywall-modal h3{
  font-family:'Playfair Display',serif;font-weight:500;font-style:normal;
  font-size:1.6rem;line-height:1.3;margin-bottom:14px;color:#FFFFFF;
}
.paywall-modal p{font-family:'Poppins',sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.7);line-height:1.75;margin-bottom:28px}
.paywall-price{font-family:'Playfair Display',serif;font-weight:700;font-size:2.4rem;color:var(--gold-light);margin-bottom:4px}
.paywall-period{font-size:0.8rem;color:rgba(255,255,255,0.5);letter-spacing:0.06em;margin-bottom:28px}
.paywall-wa{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--bg);
  font-family:'Poppins',sans-serif;font-weight:500;font-size:0.75rem;
  padding:15px 36px;border-radius:999px;text-decoration:none;
  letter-spacing:0.14em;text-transform:lowercase;transition:all 0.25s;
}
.paywall-wa:hover{background:var(--gold-light)}
.wa-delai{font-size:0.76rem;color:rgba(255,255,255,0.45);margin-top:14px}
.paywall-unlock{
  display:block;margin-top:16px;font-size:0.78rem;
  color:rgba(255,255,255,0.6);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}

/* ── POP-UP DE RAPPEL DES RECOMMANDATIONS ── */
.rappel-overlay{
  display:none;position:fixed;inset:0;z-index:1001;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.rappel-overlay.active{display:flex}
.rappel-modal{
  background:var(--bg-card);border:1px solid var(--border);border-radius:22px;
  padding:30px 24px 26px;max-width:420px;width:100%;position:relative;text-align:center;
}
.rappel-close{position:absolute;top:16px;right:18px;background:none;border:none;color:rgba(255,255,255,0.4);font-size:1.15rem;cursor:pointer;padding:8px}
.rappel-close:hover{color:#fff}
.rappel-tag{font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.22em;text-transform:lowercase;color:var(--gold);opacity:0.85;margin-bottom:12px}
.rappel-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:16px}
.rappel-reco{background:var(--gold-pale);border:1px solid var(--border-soft);border-radius:14px;padding:16px;font-size:0.94rem;color:var(--gold-light);line-height:1.55;margin-bottom:22px;text-align:left}
.rappel-q{font-size:0.95rem;color:var(--text-secondary);margin-bottom:18px}
.rappel-btns{display:grid;gap:10px}
.rappel-btn{padding:13px;border-radius:30px;border:none;font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.78rem;letter-spacing:0.08em;cursor:pointer;transition:background .2s}
.rappel-btn-oui{background:var(--gold);color:var(--bg)}
.rappel-btn-oui:hover{background:var(--gold-light)}
.rappel-btn-non{background:rgba(255,255,255,0.07);color:var(--gold-light);border:1px solid var(--border-soft)}
.rappel-btn-non:hover{background:rgba(255,255,255,0.12)}
.rappel-reponse{font-size:0.98rem;color:#fff;line-height:1.6;margin-bottom:20px}
.infos-ligne{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-soft);text-align:left}
.infos-ligne:last-child{border-bottom:none}
.infos-label{font-size:0.9rem;color:var(--muted)}
.infos-val{font-size:0.95rem;color:var(--gold-light);font-weight:600;text-align:right}
/* Le code masqué de la fiche d'abonnement emprunte la MÉCANIQUE du tiroir
   (.sc-code : disposition en ligne, œil, curseur de clic) mais garde
   l'apparence de sa fiche, doré et lisible. Sans ces trois lignes, il
   hériterait du petit gris du menu latéral, écrit plus bas dans la feuille,
   et détonnerait au milieu des autres valeurs. */
.infos-val.sc-code{
  color:var(--gold-light);font-size:0.95rem;font-weight:600;
  letter-spacing:0.06em;justify-content:flex-end;
}
.infos-val.sc-code:hover{color:var(--gold)}

/* ── FENÊTRE DE CHOIX DES PLANS ── */
.plans-overlay{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.72);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.plans-overlay.active{display:flex}
/* Packs d'analyses à l'unité */
.packs-audit{margin-top:20px}
.packs-sep{text-align:center;font-family:'Poppins',sans-serif;font-size:0.82rem;color:var(--muted);margin-bottom:14px;position:relative}
.packs-grid{display:grid;gap:10px}
.pack-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--border-soft);background:rgba(255,255,255,0.03);cursor:pointer;transition:border-color .2s,background .2s;text-align:left}
.pack-btn:hover{background:rgba(250,148,16,0.08);border-color:var(--border)}
.pack-label{font-family:'Poppins',sans-serif;font-size:0.92rem;color:var(--text-secondary)}
.pack-label b{color:#fff;font-weight:600}
.pack-price{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--gold-light);white-space:nowrap}

.plans-modal{
  background:var(--bg-card);border:1px solid var(--border);border-radius:22px;
  padding:28px 22px 26px;max-width:440px;width:100%;position:relative;
  max-height:92vh;overflow-y:auto;
}
.plans-close{
  position:absolute;top:16px;right:18px;background:none;border:none;
  color:rgba(255,255,255,0.5);font-size:1.2rem;cursor:pointer;line-height:1;
  padding:8px;
}
.plans-close:hover{color:#fff}
.plans-tag{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.22em;text-transform:lowercase;
  color:var(--gold);opacity:0.85;text-align:center;margin-bottom:8px;
}
.plans-title{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:#fff;
  text-align:center;line-height:1.3;margin-bottom:22px;
}
.plans-intro{
  font-family:'Poppins',sans-serif;font-size:0.9rem;color:var(--text-secondary);
  line-height:1.6;text-align:center;margin:-12px 0 22px;
}
.plan-card{
  border:1px solid var(--border-soft);border-radius:16px;padding:20px 18px;margin-bottom:14px;
  background:rgba(255,255,255,0.02);transition:border-color .2s,background .2s;
}
.plan-card.pro{
  border-color:var(--emerald-border);
  background:linear-gradient(135deg,var(--emerald-pale),rgba(46,125,91,0.03));
}
.plan-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.plan-name{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.9rem;letter-spacing:0.08em;color:var(--gold-light)}
.plan-badge{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  color:#fff;background:var(--emerald-light);padding:3px 8px;border-radius:20px;
}
.plan-price{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:700;color:var(--gold-light);line-height:1;margin-bottom:2px}
.plan-price span{font-size:0.82rem;font-weight:500;color:rgba(255,255,255,0.5)}
.plan-includes{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:9px}
.plan-includes li{
  font-family:'Poppins',sans-serif;font-size:0.86rem;color:var(--text-secondary);
  line-height:1.45;padding-left:22px;position:relative;
}
.plan-includes li::before{
  content:'✓';position:absolute;left:0;top:0;color:var(--gold);font-size:0.9rem;font-weight:700;
}
/* Carte Pro : coches en émeraude plutôt qu'en doré, pour rester cohérent
   avec le contour et le badge "Recommandé" du même palier. */
.plan-card.pro .plan-includes li::before{color:var(--emerald-light)}
.plan-btn{
  display:block;width:100%;text-align:center;padding:13px;border-radius:30px;border:none;
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.78rem;letter-spacing:0.1em;cursor:pointer;
  transition:background .2s,opacity .2s;
}
.plan-btn-pro{background:var(--gold);color:var(--bg)}
.plan-btn-pro:hover{background:var(--gold-light)}
.plan-btn-creator{background:rgba(255,255,255,0.08);color:var(--gold-light);border:1px solid var(--border-soft)}
.plan-btn-creator:hover{background:rgba(255,255,255,0.13)}

/* ── SÉLECTEUR DE PLAN DANS LE POP-UP (nom + prix, sans détails) ── */
.plans-toggle{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:20px}
.plan-toggle-btn{
  position:relative;border:1px solid var(--border-soft);border-radius:14px;
  background:rgba(255,255,255,0.02);padding:16px 10px 13px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:border-color .2s,background .2s;font-family:inherit;
}
.plan-toggle-btn:hover{border-color:var(--border)}
.plan-toggle-btn.active{
  border-color:var(--gold);background:linear-gradient(135deg,var(--gold-pale),rgba(250,148,16,0.04));
}
.plan-toggle-badge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-family:'Poppins',sans-serif;font-size:0.56rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--bg);background:var(--gold);padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.plan-toggle-name{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.88rem;letter-spacing:0.08em;color:var(--gold-light)}
.plan-toggle-price{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:#fff}
.plan-toggle-price span{font-size:0.68rem;font-weight:500;color:rgba(255,255,255,0.5);margin-left:2px}
.plan-details{margin-bottom:4px}
#planCtaBtn{margin-bottom:16px}

/* ── MODAL CODE ── */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;padding:44px 36px;max-width:440px;width:100%;
  position:relative;text-align:center;
}
.modal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.modal-close{
  position:absolute;top:16px;right:20px;background:none;border:none;
  color:rgba(255,255,255,0.5);font-size:1.2rem;cursor:pointer;transition:color 0.2s;
  padding:8px;
}
.modal-close:hover{color:#FFFFFF}
.modal-tag{font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.2em;text-transform:lowercase;color:var(--gold);margin-bottom:18px}
.modal h3{font-family:'Playfair Display',serif;font-weight:500;font-style:normal;font-size:1.6rem;line-height:1.3;margin-bottom:14px;color:#FFFFFF}
.modal p{font-family:'Poppins',sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.7;margin-bottom:24px}
.modal-input{
  width:100%;font-family:'Poppins',sans-serif;font-size:1rem;letter-spacing:0.05em;
  text-align:center;text-transform:uppercase;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;padding:14px;color:#FFFFFF;outline:none;margin-bottom:16px;transition:border-color 0.2s;
}
.modal-input:focus{border-color:var(--gold)}
.modal-input::placeholder{letter-spacing:0.05em;text-transform:none;color:rgba(255,255,255,0.3);font-size:0.82rem}
.modal-btn{
  width:100%;padding:14px;background:var(--gold);color:var(--bg);
  font-family:'Poppins',sans-serif;font-weight:500;font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
  border:none;border-radius:999px;cursor:pointer;transition:all 0.25s;margin-bottom:12px;
}
.modal-btn:hover{background:var(--gold-light)}
.modal-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:0.8rem;color:rgba(255,255,255,0.65);text-decoration:none;
  border:1px solid rgba(255,255,255,0.15);border-radius:999px;padding:12px;transition:all 0.2s;
}
.modal-wa:hover{border-color:var(--gold);color:var(--gold)}
.modal-error{color:#FCA5A5;font-size:0.8rem;margin-bottom:12px;display:none}

/* ── FOOTER WHATSAPP ── */
.footer-contact{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:24px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid rgba(250,148,16,0.25);
}
.footer-contact-text{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.14em;
  text-transform:lowercase;color:rgba(255,255,255,0.6);
}
.footer-wa-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(37,211,102,0.12);border:1px solid rgba(37,211,102,0.4);
  color:#25D366;font-family:'Poppins',sans-serif;font-size:0.6rem;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:9px 20px;border-radius:999px;text-decoration:none;transition:all 0.25s;
}
.footer-wa-btn:hover{background:rgba(37,211,102,0.2);border-color:#25D366}
.footer-wa-btn svg{width:15px;height:15px;fill:currentColor}

/* ── STORYBOARD SEGMENTÉ ── */
.storyboard-list{display:flex;flex-direction:column;gap:14px}
.sb-segment{
  background:transparent;
  border:none;
  border-radius:0;
  padding:16px 0;
}
.sb-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.sb-time{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.12em;
  text-transform:lowercase;color:var(--gold-light);
  background:var(--gold-pale);padding:4px 12px;border-radius:999px;
}
.sb-index{
  font-family:'Poppins',sans-serif;font-size:0.56rem;letter-spacing:0.1em;
  text-transform:lowercase;color:rgba(255,255,255,0.4);
}
.sb-dit{
  font-family:'Playfair Display',serif;font-style:italic;font-size:0.95rem;
  color:#FFFFFF;line-height:1.6;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.sb-visual-label{
  font-family:'Poppins',sans-serif;font-size:0.56rem;letter-spacing:0.14em;
  text-transform:lowercase;color:var(--gold);opacity:0.7;margin-bottom:8px;
}
.sb-visual{
  font-size:0.88rem;color:rgba(255,255,255,0.85);line-height:1.7;
  padding:0;
}
.sb-copy{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:'Poppins',sans-serif;font-size:0.54rem;letter-spacing:0.12em;text-transform:lowercase;
  color:rgba(255,255,255,0.55);background:transparent;border:1px solid rgba(255,255,255,0.15);
  padding:6px 14px;border-radius:999px;cursor:pointer;transition:all 0.2s;
}
.sb-copy:hover{border-color:var(--gold);color:var(--gold)}

/* ── CHAT AJUSTEMENT SCRIPT ── */















/* ── STORYBOARD À LA DEMANDE ── */
.sb-generate-box{
  text-align:center;padding:28px 24px;
  background:rgba(255,255,255,0.04);border:1px dashed rgba(250,148,16,0.3);
  border-radius:8px;
}
.sb-generate-text{
  font-size:0.86rem;color:rgba(255,255,255,0.7);line-height:1.7;
  margin-bottom:20px;max-width:440px;margin-left:auto;margin-right:auto;
}
.sb-generate-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--bg);
  font-family:'Poppins',sans-serif;font-weight:500;font-size:0.72rem;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:14px 32px;border-radius:999px;border:none;cursor:pointer;transition:all 0.25s;
}
.sb-generate-btn:hover{background:var(--gold-light)}
.sb-generate-btn:disabled{background:rgba(250,148,16,0.3);cursor:not-allowed}
.sb-gen-spinner{
  width:15px;height:15px;border:2px solid rgba(28,28,30,0.3);
  border-top-color:var(--bg);border-radius:50%;
  animation:spin 0.7s linear infinite;display:none;
}

/* ── BLOC STRATÉGIE ── */
.strategy-block{
  margin-top:14px;display:flex;flex-direction:column;gap:10px;
}
.strategy-item{
  font-size:0.86rem;color:rgba(255,255,255,0.8);line-height:1.6;
  padding:12px 14px;background:rgba(250,148,16,0.06);
  border:1px solid rgba(250,148,16,0.18);border-radius:6px;
}
.strategy-tag{
  display:block;font-family:'Poppins',sans-serif;font-size:0.52rem;letter-spacing:0.14em;
  text-transform:lowercase;color:var(--gold-light);margin-bottom:5px;
}

/* ── MÉTA SCRIPT (mots + durée) ── */
.script-meta{
  display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap;
}
.script-meta-item{
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:lowercase;color:var(--gold-light);
  background:rgba(250,148,16,0.08);border:1px solid rgba(250,148,16,0.2);
  padding:6px 14px;border-radius:999px;
}

/* ── MODES HERO ── */
/* Bouton d'accueil « Commencer » (révèle les 5 modes au clic) */
.hero-cta{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:420px;margin:0 auto 16px;
  padding:12px 12px 12px 28px;cursor:pointer;border:none;
  border-radius:999px;background:linear-gradient(120deg,var(--gold),var(--gold-light));
  color:var(--bg);box-shadow:0 14px 34px -12px rgba(250,148,16,0.6);
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;overflow:hidden;
}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(250,148,16,0.75)}
.hero-cta:active{transform:translateY(0)}
/* Sur les très petits écrans (320px, encore courants sur les téléphones
   d'entrée de gamme), le libellé n'a que 200px pour lui et les phrases les
   plus longues tombent sous le plancher de lisibilité. On lui rend de la
   place AVANT de rapetisser le texte, dans cet ordre-là : mieux vaut un
   bouton un peu moins aéré qu'un libellé illisible.
   Le remplissage gauche vaut 28px contre 12 à droite, pour compenser
   optiquement le disque de la flèche. Sur 296px de bouton, cet écart devient
   disproportionné : 16px suffisent à garder l'équilibre. Mesuré : la place du
   libellé passe de 200 à 216px. */
@media(max-width:360px){
  .hero-cta{padding:12px 12px 12px 16px;gap:10px}
}
/* ── LE LIBELLÉ DU BOUTON D'ACCUEIL TIENT SUR UNE LIGNE ──
   Demande du propriétaire, deux captures à l'appui : « Commence gratuitement »
   tenait sur une ligne, « On fait grandir ton audience ? » passait sur deux, et
   le point d'interrogation se retrouvait seul en dessous.

   TROIS PROPRIÉTÉS, ET AUCUNE N'EST DÉCORATIVE :
   · white-space:nowrap interdit le retour à la ligne, c'est la demande même ;
   · min-width:0 est INDISPENSABLE et c'est le piège classique du flex : la
     largeur minimale d'un élément flexible vaut par défaut son contenu, donc,
     en nowrap, la phrase entière. Sans lui l'élément refuserait de rétrécir,
     clientWidth vaudrait la largeur du TEXTE et non la place disponible, et le
     calcul de js/ui.js trouverait qu'il n'y a rien à réduire, pendant que le
     bouton déborderait ;
   · overflow:hidden est un filet, jamais un fonctionnement normal : la taille
     est calculée pour que la phrase tienne. Il n'existe que pour le jour où
     quelqu'un ajoutera une phrase si longue qu'elle passe sous le plancher de
     lisibilité, et où mieux vaut un mot coupé qu'un bouton crevé.

   LA TAILLE EST CALCULÉE EN JS (ajusterHeroCta, js/ui.js) et posée en ligne :
   aucune règle CSS ne sait mesurer une phrase. clamp() et les unités de vue
   font varier la taille avec l'ÉCRAN, jamais avec la LONGUEUR DU TEXTE, or
   c'est le texte qui change ici, à écran constant. */
.hero-cta-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-align:center;font-family:'Poppins',sans-serif;font-size:1rem;font-weight:600}
.hero-cta-arrow{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#FFFFFF;color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1}
@media(prefers-reduced-motion:no-preference){
  .hero-cta::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-18deg);animation:goldSheen 4.5s ease-in-out infinite}
}

/* ── Mode FOCUS de l'accueil (après clic sur « Commencer ») ── */
/* Retour au même format que le bouton des modes (.btn-back) : sans cadre,
   dans le flux, aligné à gauche avec le contenu, bien espacé du header. */
.hero-retour{display:none}
body.hero-focus .hero-retour{
  display:flex;align-items:center;gap:8px;justify-content:flex-start;
  width:100%;max-width:420px;margin:0 auto 32px;
  background:transparent;border:none;padding:0;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.14em;text-transform:lowercase;
  color:rgba(255,255,255,0.7);transition:color .2s;
}
body.hero-focus .hero-retour:hover{color:var(--gold)}
body.hero-focus .ticker-wrap,
body.hero-focus .hero h1,
body.hero-focus .hero-rule,
body.hero-focus .hero-sub,
body.hero-focus #accueilPremium,
body.hero-focus .how,
body.hero-focus .why,
body.hero-focus .pricing,
body.hero-focus .faq{display:none !important}
/* Contenu aligné en haut, avec le même retrait sous le header que les autres
   écrans (mode Idées, etc.) : le Retour n'est plus collé à l'en-tête. */
body.hero-focus .hero{justify-content:flex-start;padding-top:100px}

/* Titre + trait affichés uniquement en mode focus, juste au-dessus du
   bandeau de statut d'abonnement (même style que le grand titre d'accueil). */
.hero-focus-title{
  display:none;
  font-family:'Playfair Display',serif;font-weight:400;font-style:italic;
  font-size:clamp(1.9rem,6vw,3.2rem);
  line-height:1.08;letter-spacing:-0.02em;
  margin-bottom:10px;max-width:900px;
  color:#FFFFFF;
}
.hero-focus-title strong{font-style:normal;font-weight:700;color:var(--gold-light);display:block}
.hero-focus-rule{
  display:none;
  width:1px;height:30px;background:linear-gradient(to bottom,transparent,var(--gold),transparent);
  margin:14px auto;opacity:0.5;
}
body.hero-focus .hero-focus-title,
body.hero-focus .hero-focus-rule{display:block}

.hero-modes-hint{
  font-family:'Poppins',sans-serif;font-size:0.82rem;line-height:1.5;color:var(--text-secondary);
  text-align:center;max-width:420px;margin:0 auto 12px;
}
.hero-modes-hint strong{color:var(--gold-light);font-weight:600}
.hero-modes{
  display:grid;grid-template-columns:1fr;gap:11px;margin-bottom:14px;
  width:100%;max-width:420px;margin-left:auto;margin-right:auto;
}
.hero-mode-btn{
  display:flex;flex-direction:row;align-items:center;gap:16px;text-align:left;
  background:rgba(255,255,255,0.02);border:1px solid rgba(250,148,16,0.18);
  border-radius:14px;padding:14px 18px;cursor:pointer;
  transition:border-color 0.3s ease,background 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease;
  width:100%;box-sizing:border-box;
}
/* min-width:0 SUR LA CARTE ELLE-MÊME, et pas seulement sur son corps de texte.
   Piège trouvé en vérifiant qu'un test mordait : la largeur minimale d'un
   élément de grille ou de flex vaut par défaut son CONTENU. Avec un titre en
   white-space:nowrap, ce contenu c'est la phrase entière, et c'est la CARTE
   qui s'élargit au lieu du titre qui rétrécit. Mesuré : 587px de carte dans un
   écran de 414, donc une page qui défile latéralement, et un ajustement de
   taille qui ne se déclenche jamais puisqu'il croit avoir toute la place.
   Le corps de texte a déjà le sien, il ne suffit pas : il faut couper la
   chaîne à chaque niveau, sinon le débordement remonte simplement d'un cran. */
.hero-mode-btn{min-width:0}
.hero-mode-btn .mode-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
@media(min-width:600px){
  .hero-modes{grid-template-columns:1fr 1fr;max-width:680px}
}
.hero-mode-btn:hover{border-color:var(--gold);background:rgba(250,148,16,0.08);transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(250,148,16,0.75)}
.hero-mode-btn:active{transform:translateY(-1px)}
.hero-mode-btn .mode-icon{transition:transform 0.3s ease,background 0.3s ease,box-shadow 0.3s ease}
.hero-mode-btn:hover .mode-icon{transform:scale(1.12);background:rgba(250,148,16,0.2);box-shadow:0 0 16px -2px rgba(250,148,16,0.5)}
/* Apparition en cascade des cartes de modes (accueil), désactivée si l'utilisateur
   préfère moins d'animations. "backwards" (pas "forwards") : la carte est cachée
   pendant son délai puis révélée, et revient à son état de base ensuite, le survol
   (transform) continue donc de fonctionner normalement. */
@keyframes modeCardIn{from{opacity:0;transform:translateY(24px) scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-mode-btn{animation:modeCardIn 0.55s cubic-bezier(.2,.7,.2,1) backwards}
  .hero-mode-btn:nth-child(1){animation-delay:0.05s}
  .hero-mode-btn:nth-child(2){animation-delay:0.13s}
  .hero-mode-btn:nth-child(3){animation-delay:0.21s}
  .hero-mode-btn:nth-child(4){animation-delay:0.29s}
  .hero-mode-btn:nth-child(5){animation-delay:0.37s}
  .hero-mode-btn:nth-child(6){animation-delay:0.45s}
  .hero-mode-btn:nth-child(7){animation-delay:0.53s}
}

/* ═══ Système d'animation "vivant" (premium, coupé si mouvement réduit) ═══ */
@keyframes goldSheen{0%{left:-60%}55%,100%{left:150%}}
@keyframes wmShine{0%{background-position:100% 0}100%{background-position:0% 0}}
@keyframes liftIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes liftInLeft{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes liftInRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
/* Course propre à la révélation au défilement, volontairement plus ample que
   liftIn* (18px / 36px) réservé au hero et au panneau « Créer » : sur ces
   petits éléments déjà à l'écran, une course courte suffit, alors qu'un bloc
   qui arrive du bas de l'écran a besoin d'un vrai déplacement pour que l'oeil
   voie qu'il ENTRE, et pas qu'il était déjà là. Le léger passage d'échelle
   (0.94 → 1) donne la sensation d'un bloc qui « se pose ». */
@keyframes revealUp{from{opacity:0;transform:translateY(44px) scale(.94)}to{opacity:1;transform:none}}
@keyframes revealLeft{from{opacity:0;transform:translateX(-72px) scale(.94)}to{opacity:1;transform:none}}
@keyframes revealRight{from{opacity:0;transform:translateX(72px) scale(.94)}to{opacity:1;transform:none}}
/* Révélation au défilement (page d'accueil) : .reveal/.reveal-left/.reveal-right
   posés dans le HTML, la classe .visible ajoutée par initScrollReveal()
   (js/ui.js, IntersectionObserver) dès qu'un bloc entre dans l'écran. Utilise
   `animation` (jamais `transition`) pour ne jamais entrer en conflit avec les
   transitions déjà posées sur certains éléments ciblés (.hero-mode-btn,
   .plan-card...) pour leurs propres effets au survol. Coupé si mouvement
   réduit : .reveal reste alors sans opacity:0 nulle part, le contenu est
   visible directement, jamais caché en attendant un JS qui ne l'animerait pas.
   Si l'observateur n'est pas dispo (très vieux navigateur), initScrollReveal
   affiche tout immédiatement plutôt que de laisser des blocs invisibles. */
@media(prefers-reduced-motion:no-preference){
  .reveal,.reveal-left,.reveal-right{opacity:0}
  .reveal.visible{animation:revealUp .8s cubic-bezier(.16,.84,.24,1) both}
  .reveal-left.visible{animation:revealLeft .8s cubic-bezier(.16,.84,.24,1) both}
  .reveal-right.visible{animation:revealRight .8s cubic-bezier(.16,.84,.24,1) both}
  /* Cascade à 0,11 s (au lieu de 0,08 s) : en dessous, des blocs voisins
     arrivent quasi ensemble et la cascade ne se lit plus. */
  .reveal-d1.visible{animation-delay:.11s}
  .reveal-d2.visible{animation-delay:.22s}
  .reveal-d3.visible{animation-delay:.33s}
  .reveal-d4.visible{animation-delay:.44s}
  .reveal-d5.visible{animation-delay:.55s}
  .reveal-d6.visible{animation-delay:.66s}
  .reveal-d7.visible{animation-delay:.77s}
}
/* Entrée du hero au chargement (mot par mot pour le titre, cascade pour le
   reste) : purement CSS avec animation-delay en ligne, aucune dépendance au
   JS, se joue dès l'affichage puisque le hero est visible sans scroll. */
@media(prefers-reduced-motion:no-preference){
  .hero-word{display:inline-block;animation:liftIn .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-shimmer.hero-word{animation:liftIn .6s cubic-bezier(.2,.7,.2,1) both,wmShine 5.5s ease-in-out infinite}
  .hero-cascade{animation:liftIn .6s cubic-bezier(.2,.7,.2,1) both}
}
/* Reflet doré sur les mots-marques (logo en-tête, écran de génération, mot
   "réinventé") : "Script" (.logo-s) porte un reflet blanc, "URA" (em) son
   propre reflet doré, chacun sa couleur, réunis dans le même mot.
   Retour propriétaire : ce reflet doré sur "URA" existait avant la refonte
   visuelle, avait disparu en route (l'em ne portait plus qu'une couleur
   plate), remis en place ici, puis étendu à l'écran de génération (« sur
   les pages d'attente il y a aussi Scriptura écrit en haut »). Toujours
   PAS la barre latérale ni le pied de page : jamais eu de reflet, aucune
   demande en ce sens. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .logo .logo-s,.gen-logo .logo-s,.hero-shimmer{
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    background-size:250% 100%;background-repeat:no-repeat;
  }
  .logo .logo-s,.gen-logo .logo-s{background-image:linear-gradient(100deg,#f4f1ea 0%,#f4f1ea 44%,#ffffff 50%,#f4f1ea 56%,#f4f1ea 100%)}
  .logo em,.gen-logo em,.hero-shimmer{
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    background-size:250% 100%;background-repeat:no-repeat;
    background-image:linear-gradient(100deg,var(--gold-light) 0%,var(--gold-light) 44%,#fff6d8 50%,var(--gold-light) 56%,var(--gold-light) 100%);
  }
}
/* Reflet qui traverse les boutons dorés principaux */
.btn-generate,.plan-btn-pro{position:relative;overflow:hidden}
.btn-generate::after,.plan-btn-pro::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .logo .logo-s,.gen-logo .logo-s{animation:wmShine 6.5s ease-in-out infinite}
  .logo em,.gen-logo em{animation:wmShine 6.5s ease-in-out infinite}
  .hero-shimmer{animation:wmShine 5.5s ease-in-out infinite}
  .btn-generate::after,.plan-btn-pro::after{animation:goldSheen 5s ease-in-out infinite}
  .audit-block{animation:liftIn .5s cubic-bezier(.2,.7,.2,1) backwards}
}
.hero-mode-btn.primary{background:rgba(250,148,16,0.10);border-color:rgba(250,148,16,0.45)}
.hero-mode-btn.primary:hover{background:rgba(250,148,16,0.15);border-color:var(--gold)}
.hero-mode-btn.primary .mode-label{color:var(--gold-light)}
.hero-mode-btn.primary .mode-desc{color:rgba(255,255,255,0.6)}
.hero-mode-btn.primary .mode-icon{filter:none}
.mode-icon{font-size:1.5rem;margin:0;flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(250,148,16,0.08);border-radius:10px}
/* Icônes en trait fin doré (style du logo éclair), remplacent les anciens
   emojis système : rendu identique sur tous les appareils, cohérent avec
   l'univers premium. currentColor = doré clair, ajustable par état. */
.mode-icon svg{width:22px;height:22px;display:block;color:var(--gold-light)}
/* Pulsation sur l'icône SEULE (jamais le cadre .mode-icon autour), scopée
   aux 6 boutons du hero (#heroModes) ET à leurs clones du panneau de création
   (.creer-panneau) uniquement, pas à leurs jumeaux visuels des Services
   annexes plus bas, qui restent fixes. Même halo marqué que .how-icon svg
   (keyframe howIconPulse, voir plus bas), décalé en cascade.
   Le panneau doit être nommé explicitement : ses boutons sont des CLONES du
   hero dont on a retiré les identifiants (sans quoi la page se retrouverait
   avec des id en double, voir _remplirPanneauCreation, js/ui.js), donc le
   sélecteur #heroModes ne les atteint plus. */
@media(prefers-reduced-motion:no-preference){
  #heroModes .mode-icon svg,
  .creer-panneau .mode-icon svg{animation:howIconPulse 1.7s ease-in-out infinite}
  #heroModes > *:nth-child(3n+2) .mode-icon svg,
  .creer-panneau .hero-modes > *:nth-child(3n+2) .mode-icon svg{animation-delay:.18s}
  #heroModes > *:nth-child(3n) .mode-icon svg,
  .creer-panneau .hero-modes > *:nth-child(3n) .mode-icon svg{animation-delay:.36s}
}
/* ── LES TITRES DES CARTES DE MODE ──
   Demande du propriétaire, capture à l'appui : « les titres des boutons du
   héro en majuscules, mais surtout en sorte qu'ils tiennent sur une ligne ».

   L'ESPACEMENT MONTE DE 0.01 À 0.04em : des capitales collées se lisent mal,
   c'est justement ce qui distingue un titre en capitales d'un mot crié. Il
   reste bien en dessous des 0.13em des boutons : ces titres sont plus longs,
   et chaque centième d'em coûte de la largeur sur une ligne déjà juste.

   nowrap ET overflow:hidden : le premier est la demande même, le second n'est
   qu'un filet pour un cas absurde, la taille étant calculée pour que le titre
   tienne (ajusterTitresModes, js/ui.js). Le conteneur .mode-body porte déjà le
   min-width:0 nécessaire pour que la mesure de place disponible soit juste.

   LA DESCRIPTION RESTE EN MINUSCULES et sur plusieurs lignes : c'est une
   phrase, pas un libellé, et rien n'a été demandé pour elle. */
/* Retour du propriétaire, capture à l'appui : les titres des cartes de
   l'accueil ("Analyse mon compte TikTok", etc.) passent de Russo One à
   Poppins GRAS minuscule, première lettre en capitale (voir le bloc
   CAPITALE DE PHRASE plus bas), un peu plus grand que .mode-desc juste
   en dessous (0.78rem) pour marquer la hiérarchie titre/description. */
.mode-label{
  /* Taille INCHANGÉE (1rem) : l'app a déjà un mécanisme dédié qui mesure
     le débordement réel et réduit au besoin (ajusterTexteUneLigne, voir
     js/ui.js, verrouillé par tests/titres-des-modes-une-ligne.test.js).
     Rétrécir la taille de référence ici referait à la main ce que ce
     mécanisme fait déjà, et pour de moins bonnes raisons : une valeur
     devinée plutôt que mesurée au pixel près, pour CHAQUE titre. */
  font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:0.01em;text-transform:lowercase;color:var(--white);line-height:1.3;
  white-space:nowrap;overflow:hidden;
}
.mode-desc{
  font-size:0.78rem;color:rgba(255,255,255,0.5);font-family:'Poppins',sans-serif;
  letter-spacing:0.01em;text-transform:none;line-height:1.4;
}

/* ── COMMENT ÇA MARCHE (accueil) ── */
.how{max-width:960px;margin:0 auto;padding:56px 12px 88px;text-align:center}
.how-eyebrow{font-family:'Poppins',sans-serif;font-size:0.65rem;font-weight:400;letter-spacing:0.26em;text-transform:lowercase;color:var(--gold);opacity:0.75;margin-bottom:16px}
.how-title{font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:clamp(1.7rem,5.2vw,2.5rem);line-height:1.15;letter-spacing:-0.01em;color:#fff;margin:0 auto 40px}
.how-title strong{font-style:normal;font-weight:700;color:var(--gold-light)}
.how-grid{display:grid;grid-template-columns:1fr;gap:16px;text-align:left}
@media(min-width:760px){.how-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.how-step{background:rgba(255,255,255,0.02);border:1px solid var(--border-soft);border-radius:14px;padding:26px 22px;transition:border-color 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease}
.how-step:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(250,148,16,0.6)}
.how-num{font-family:'Poppins',sans-serif;font-size:0.68rem;letter-spacing:0.2em;text-transform:lowercase;color:var(--gold);opacity:0.7;margin-bottom:14px}
.how-icon{font-size:1.5rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(250,148,16,0.08);border-radius:12px;margin-bottom:16px}
/* Icônes maison (trait fin doré), même style que .mode-icon et le logo. */
.how-icon svg{width:26px;height:26px;display:block;color:var(--gold-light)}
/* Pulsation marquée sur l'icône SEULE (jamais le cadre .how-icon autour) :
   les 7 icônes des sections "Comment ça marche" + "Pourquoi Scriptura", plus
   marquante qu'un simple scale (halo doré en plus), pour bien attirer l'œil. */
@keyframes howIconPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(253,183,30,0))}
  50%{transform:scale(1.34);filter:drop-shadow(0 0 9px rgba(253,183,30,0.9))}
}
@media(prefers-reduced-motion:no-preference){
  .how-icon svg{animation:howIconPulse 1.7s ease-in-out infinite}
  /* Décalage en cascade (par vague de 3) pour que les icônes d'un même
     groupe ne pulsent jamais toutes pile au même instant. */
  .how-grid > *:nth-child(3n+2) .how-icon svg,
  .why-grid > *:nth-child(3n+2) .how-icon svg{animation-delay:.18s}
  .how-grid > *:nth-child(3n) .how-icon svg,
  .why-grid > *:nth-child(3n) .how-icon svg{animation-delay:.36s}
  /* Les 3 cartes "Services annexes" (Storyboard d'un script, Transcrire/
     télécharger, Monter une vidéo) : mêmes icônes maison que .how-icon
     (voir commentaire plus haut), mais jusqu'ici sans la pulsation des 7
     autres icônes de la page (Comment ça marche + Pourquoi Scriptura),
     incohérence signalée directement. Même animation, même cascade. */
  .how .hero-mode-btn .mode-icon svg{animation:howIconPulse 1.7s ease-in-out infinite}
  .how .hero-mode-btn:nth-of-type(2) .mode-icon svg{animation-delay:.18s}
  .how .hero-mode-btn:nth-of-type(3) .mode-icon svg{animation-delay:.36s}
}
.how-step-title{font-family:'Poppins',sans-serif;font-size:0.88rem;font-weight:500;letter-spacing:0.06em;text-transform:lowercase;color:#fff;line-height:1.35;margin-bottom:10px}
.how-step-desc{font-size:0.9rem;color:var(--text-secondary);font-family:'Poppins',sans-serif;line-height:1.6}

/* ── EXEMPLE CONCRET (retour propriétaire : montrer un vrai résultat et le
   prix avant l'argumentaire "Pourquoi Scriptura", pas seulement après).
   Deux vraies captures vidéo de l'app en action (assets/demos/), en
   autoplay muet en boucle façon démo produit, pas une maquette statique. ── */
.example{max-width:960px;margin:0 auto;padding:48px 12px 24px;text-align:center}
.example-sub{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.14em;text-transform:lowercase;
  color:var(--gold);opacity:0.75;max-width:480px;margin:0 auto 12px;text-align:left;
}
/* Retour à une vraie <video> (retour propriétaire), après un diaporama
   d'images qui avait remplacé la vidéo le temps de trouver la vraie cause
   du blanc. Cause trouvée en deux temps : (1) les 10-11 premières
   secondes des deux enregistrements captaient un écran vide (coupées au
   montage, -v3) ; (2) le fichier était tagué avec un espace colorimétrique
   inhabituel (bt470bg, un standard TV très ancien, probablement un
   réglage par défaut de l'outil d'enregistrement d'origine) que le
   lecteur natif d'iPhone rendait en blanc au lieu du vrai contenu,
   confirmé en testant les fichiers en dehors du site (téléchargés dans la
   galerie photo). Corrigé en réencodant en bt709, l'espace colorimétrique
   standard du web. Affiche en <img> séparée gardée (voir
   .example-video-poster ci-dessous) : elle ne coûte rien et couvre tout
   résidu de lenteur de démarrage, même sans lien avec les deux causes
   ci-dessus. */
.example-video-wrap{position:relative;max-width:280px;margin:0 auto 32px;aspect-ratio:420/860;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.45);border:1px solid rgba(253,183,30,0.18);background:#0e0e0e}
.example-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.example-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity 0.3s ease}
.example-video.est-lancee{opacity:1}
.example-note{font-size:0.9rem;color:var(--text-secondary);font-family:'Poppins',sans-serif;line-height:1.6;margin-top:26px}
.example-note strong{color:var(--gold-light)}
.example-cta{
  background:none;border:none;color:var(--gold);font-family:'Poppins',sans-serif;
  font-size:0.9rem;font-weight:600;cursor:pointer;padding:0;margin-left:4px;
  text-decoration:underline;text-underline-offset:3px;
}
.example-cta:hover{color:var(--gold-light)}

/* ── POURQUOI SCRIPTURA (différenciateurs, réutilise les cartes .how-step) ── */
.why{max-width:960px;margin:0 auto;padding:48px 12px 24px;text-align:center}
.why-intro{font-size:0.95rem;color:var(--text-secondary);font-family:'Poppins',sans-serif;line-height:1.65;max-width:600px;margin:-24px auto 34px}
.why-grid{display:grid;grid-template-columns:1fr;gap:16px;text-align:left}
@media(min-width:720px){.why-grid{grid-template-columns:1fr 1fr;gap:20px}}

/* ── QUI EST DERRIÈRE SCRIPTURA (retour propriétaire : compenser l'absence
   de témoignages, encore aucun vrai abonné à ce jour, par une histoire
   fondatrice réelle plutôt qu'une preuve sociale fabriquée). Réutilise
   .how-eyebrow/.how-title/.why-intro, pas de nouvelle typographie. ── */
.about{max-width:760px;margin:0 auto;padding:40px 12px 48px;text-align:center}
/* Preuve honnête (nos propres résultats, une fourchette réelle plutôt que
   le seul pic isolé) : nos propres histoires, écrites avec Scriptura. */
.about-proof{font-size:0.88rem;color:var(--gold-light);font-family:'Poppins',sans-serif;line-height:1.6;max-width:560px;margin:0 auto}

/* Galerie de preuve (retour propriétaire) : vraies couvertures de vidéos
   dont le script a été généré avec Scriptura, en bande défilante plutôt
   qu'une grille figée (facile à parcourir sur mobile, aucune sélection
   arbitraire à faire parmi les vidéos). Déborde volontairement du padding
   du parent (.about) pour défiler bord à bord, marge négative compensée
   par un padding identique. */
.preuve-galerie-legende{font-size:0.78rem;color:var(--muted);font-family:'Poppins',sans-serif;margin:22px 0 12px}
.preuve-galerie-wrap{position:relative}
/* Pas de -webkit-overflow-scrolling:touch (retour propriétaire : le
   défilement automatique en JS ne s'appliquait pas sur iOS Safari avec
   cette propriété active, connue pour entrer en conflit avec des écritures
   programmatiques de scrollLeft ; inutile de toute façon depuis iOS 13, le
   défilement inertiel est natif par défaut sur tout conteneur overflow).
   Pas de scroll-snap-type non plus (retour propriétaire : le défilement
   automatique ne bougeait toujours pas en prod) : le magnétisme
   d'alignement se bat avec les petits pas JS de scrollLeft, qui ne tombent
   presque jamais pile sur un point d'alignement, particulièrement sur iOS
   Safari où le snap est appliqué de façon agressive. */
.preuve-galerie{display:flex;gap:10px;overflow-x:auto;margin:0 -12px;padding:2px 12px 14px}
.preuve-galerie img{flex:0 0 auto;width:128px;height:auto;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.35)}
.preuve-galerie::-webkit-scrollbar{height:5px}
.preuve-galerie::-webkit-scrollbar-thumb{background:var(--gold);opacity:0.4;border-radius:99px}
/* Flèches indicatrices de défilement (retour propriétaire : rendre visible
   qu'on peut scroller dans les deux sens, pas seulement sur mobile au
   toucher). Positionnées au-dessus des images, pas sur toute la hauteur
   de la carte, pour ne jamais masquer les vues affichées en bas. */
.preuve-galerie-arrow{position:absolute;top:38%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(10,10,10,0.6);border:1px solid rgba(253,183,30,0.35);color:var(--gold-light);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0}
.preuve-galerie-arrow:hover{background:rgba(10,10,10,0.85)}
/* Le disque reste à 28 px (choix esthétique), mais la zone atteignable au
   pouce passe à 44 px grâce à un pseudo-élément transparent centré. Rien ne
   change à l'écran, tout change à l'usage. */
.preuve-galerie-arrow::after{
  content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.preuve-galerie-arrow-left{left:2px}
.preuve-galerie-arrow-right{right:2px}

/* ── FAQ (accueil), accordéon natif <details>, aucun JS ── */
.faq{max-width:760px;margin:0 auto;padding:48px 12px 32px;text-align:center}
.faq-list{text-align:left;margin-top:8px}
.faq-item{border:1px solid var(--border-soft);border-radius:12px;margin-bottom:12px;background:rgba(255,255,255,0.02);overflow:hidden;transition:border-color 0.25s ease}
.faq-item[open]{border-color:rgba(250,148,16,0.4)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Poppins',sans-serif;font-size:0.95rem;letter-spacing:0.01em;color:#F5F3EE;line-height:1.4;transition:color 0.2s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--gold-light)}
.faq-chev{flex:0 0 auto;color:var(--gold);transition:transform 0.25s ease;font-size:0.8rem}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:0 20px 20px;font-family:'Poppins',sans-serif;font-size:0.92rem;color:var(--text-secondary);line-height:1.7}

/* ── TARIFS (accueil), réutilise les cartes .plan-card existantes ── */
.pricing{max-width:820px;margin:0 auto;padding:48px 12px 32px;text-align:center}
.pricing-note{font-size:0.9rem;color:var(--text-secondary);font-family:'Poppins',sans-serif;line-height:1.6;margin:-24px auto 26px;max-width:460px}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:16px;text-align:left}
@media(min-width:720px){.pricing-grid{grid-template-columns:1fr 1fr;gap:20px;align-items:start}}
.pricing-grid .plan-card{margin-bottom:0}
.pricing-jeton{margin-top:24px;font-size:0.9rem;color:var(--text-secondary);font-family:'Poppins',sans-serif;line-height:1.6}
.pricing-jeton button{background:none;border:none;color:var(--gold-light);font-family:inherit;font-size:inherit;cursor:pointer;text-decoration:underline;padding:0}
.pricing-jeton button:hover{color:var(--gold)}

/* ── GÉNÉRATEUR D'IDÉES ── */
#ideasFlow,#storyFlow,#auditFlow,#serieFlow,#storyboardSeulFlow,#carrouselFlow{max-width:680px;margin:0 auto;padding:100px 12px 80px}
.ideas-container{}
.ideas-header{margin-bottom:32px;margin-top:20px}
.ideas-eyebrow{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.22em;
  text-transform:lowercase;color:var(--gold);margin-bottom:16px;
}
.ideas-title{
  font-family:'Playfair Display',serif;font-weight:400;font-style:italic;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;color:#FFFFFF;margin-bottom:12px;
}
.ideas-title strong{font-style:normal;font-weight:700;color:var(--gold-light);display:block}
.ideas-sub{font-size:0.9rem;color:rgba(255,255,255,0.7);line-height:1.7}
.ideas-results-header{
  display:flex;align-items:center;justify-content:space-between;
  margin:36px 0 20px;flex-wrap:wrap;gap:12px;
}
.btn-regenerate{
  /* text-transform:uppercase, PAS lowercase : .btn-regenerate est un bouton
     (voir le bloc « POLICE DES BOUTONS » en fin de fichier, qui le liste
     explicitement avec .btn-generate et les autres), pas un libellé
     décoratif. La refonte Cinzel→Poppins avait emporté sa casse au passage
     avec le reste, cassant l'accord avec les boutons de MUSIQUE du montage
     manuel qui, eux, restent en majuscules (voir
     tests/montage-deux-rangees-memes-mots.test.js). */
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);background:transparent;border:1px solid var(--border);
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:all 0.2s;
}
.btn-regenerate:hover{background:var(--gold-pale);border-color:var(--gold)}
.btn-regenerate:disabled{opacity:0.5;cursor:default}
/* En-tête de la carte "RECOMMANDATION IA" : le label à gauche, le bouton
   "Actualiser" discret à droite (remplace l'ancien bouton pleine largeur). */
.reco-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.btn-actualiser{
  font-family:'Poppins',sans-serif;font-size:0.52rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);background:transparent;border:1px solid var(--border);
  padding:5px 12px;border-radius:999px;cursor:pointer;transition:all 0.2s;flex-shrink:0;
}
.btn-actualiser:hover{background:var(--gold-pale);border-color:var(--gold)}
.btn-actualiser:disabled{opacity:0.4;cursor:default}
/* Bouton « Nouvelle recommandation » : le doré remplit le bouton pendant que
   Scriptura change de reco, et le libellé passe en blanc pour rester lisible.
   Réutilisé tel quel par .btn-actualiser (même classe .reco-refresh). */
.reco-refresh{position:relative;overflow:hidden}
.reco-refresh::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;z-index:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
}
.reco-refresh .reco-refresh-label{position:relative;z-index:1;transition:color 0.25s ease}
.reco-refresh.reco-refresh-loading{opacity:1;border-color:var(--gold)}
.reco-refresh.reco-refresh-loading .reco-refresh-label{color:#fff}
.reco-refresh.reco-refresh-loading::before{animation:recoRefreshFill 4.5s ease-out forwards}
@keyframes recoRefreshFill{from{width:0}to{width:90%}}
/* Retouche ciblée d'un segment de script ou d'un hook : même style que
   .btn-regenerate, en plus compact car ces boutons se répètent souvent. */
.btn-regenerate.mini{padding:5px 12px;font-size:0.54rem}
.retouche-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* Retouche libre en bas du script : le créateur décrit en texte libre ce
   qu'il veut changer (un hook, un segment, plusieurs à la fois...). */
.script-retouche-libre{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.script-retouche-libre .ctx-textarea{min-height:64px}
.script-retouche-libre .btn-regenerate{align-self:flex-start}
.retouche-flash{animation:retoucheFlash 1.8s ease;border-radius:4px}
@keyframes retoucheFlash{
  0%{background:rgba(250,148,16,0.3)}
  100%{background:transparent}
}

/* Cartes d'idées */
.idea-card{
  background:var(--bg-card);border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;margin-bottom:16px;
  transition:all 0.25s;position:relative;overflow:hidden;
}
.idea-card:hover{border-color:var(--gold);box-shadow:0 8px 28px rgba(0,0,0,0.2)}
.idea-card::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--gold);
}
.idea-number{
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.56rem;letter-spacing:0.14em;
  color:var(--gold-light);margin-bottom:10px;
}
.idea-titre{
  font-family:'Playfair Display',serif;font-weight:400;font-size:1.05rem;
  color:#fff;line-height:1.4;margin-bottom:0;
}
.idea-section{margin-bottom:14px}
.idea-section-label{
  font-family:'Poppins',sans-serif;font-size:0.52rem;letter-spacing:0.14em;
  text-transform:lowercase;color:var(--gold);opacity:0.75;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.idea-section-text{
  font-size:0.9rem;color:rgba(255,255,255,0.82);line-height:1.6;
}
.idea-hook{
  font-family:'Playfair Display',serif;font-style:italic;font-size:0.95rem;
  color:var(--gold-light);line-height:1.6;
  background:rgba(250,148,16,0.06);border:1px solid rgba(250,148,16,0.18);
  border-radius:6px;padding:12px 14px;
}
.idea-actions{
  display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;
}
.idea-btn-script{
  flex:1;min-width:180px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:var(--bg);border:none;border-radius:999px;
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;
  padding:12px 20px;cursor:pointer;transition:all 0.2s;font-weight:500;
}
.idea-btn-script:hover{background:var(--gold-light)}
.idea-btn-copy{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.15);
  border-radius:999px;font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;padding:12px 18px;cursor:pointer;transition:all 0.2s;
}
.idea-btn-copy + .idea-btn-share{margin-left:8px}
.idea-btn-share{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.15);
  border-radius:999px;font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;padding:12px 18px;cursor:pointer;transition:all 0.2s;
}
.idea-btn-copy:hover{border-color:var(--gold);color:var(--gold)}

/* ── AFFICHAGE STORYTELLING ── */
.story-meta{display:flex;gap:12px;flex-wrap:wrap}
.story-block{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.story-segment{
  border-left:2px solid rgba(250,148,16,0.3);padding-left:16px;
}
.story-segment-label{
  font-family:'Poppins',sans-serif;font-size:0.52rem;letter-spacing:0.14em;
  text-transform:lowercase;color:var(--gold);opacity:0.8;margin-bottom:8px;
}
.story-segment-text{
  font-family:'Poppins',sans-serif;
  font-size:0.88rem;line-height:1.8;color:#FFFFFF;
}

/* ── CLASSES STORYTELLING (résultats) ── */
.hook-text{font-family:'Poppins',sans-serif;font-size:0.95rem;color:rgba(255,255,255,0.9);line-height:1.5;margin-top:4px}
.hashtags-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hashtag-chip{
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.68rem;letter-spacing:0.04em;
  color:var(--gold-light);background:rgba(250,148,16,0.08);
  border:1px solid rgba(250,148,16,0.2);padding:6px 12px;border-radius:999px;
}
.btn-storyboard{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--gold);border:1px solid var(--gold);
  border-radius:999px;font-family:'Poppins',sans-serif;font-size:0.68rem;letter-spacing:0.1em;
  text-transform:uppercase;padding:13px 26px;cursor:pointer;transition:all 0.2s;
}
.btn-storyboard:hover{background:var(--gold);color:var(--bg)}
.btn-storyboard:disabled{opacity:0.5;cursor:not-allowed}
.storyboard-grid{display:flex;flex-direction:column;gap:14px}
.sb-seg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sb-seg-num{font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.12em;text-transform:lowercase;color:var(--gold)}
.sb-seg-time{font-family:'Playfair Display',serif;font-size:0.78rem;color:var(--gold-light)}
.sb-seg-text{font-size:0.92rem;color:rgba(255,255,255,0.85);line-height:1.5;margin-bottom:10px}
.sb-seg-visual{font-size:0.86rem;color:rgba(255,255,255,0.7);line-height:1.55;padding:0}

/* ── BOUTON HISTORIQUE NAV ── */
.nav-right{display:flex;align-items:center;gap:16px}
.nav-history-btn{
  background:transparent;border:1px solid rgba(250,148,16,0.3);
  color:var(--gold-light);font-family:'Poppins',sans-serif;font-size:0.6rem;
  letter-spacing:0.1em;text-transform:uppercase;padding:8px 14px;
  border-radius:999px;cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.nav-history-btn:hover{border-color:var(--gold);background:rgba(250,148,16,0.08)}
/* ── CARTES HISTORIQUE ── */
.history-empty{text-align:center;padding:60px 20px;color:rgba(255,255,255,0.7)}
/* Glissement vers la gauche pour révéler "Supprimer" (le panier reste dispo) */
.history-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:8px;
  padding:20px;margin-bottom:14px;cursor:pointer;transition:border-color 0.2s;
  position:relative;display:flex;align-items:stretch;gap:0;
}
.history-card:hover{border-color:rgba(250,148,16,0.4)}
.history-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.history-mode{font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.1em;text-transform:lowercase}
.history-date{font-size:0.75rem;color:rgba(255,255,255,0.4)}
.history-title{font-family:'Playfair Display',serif;font-size:1.05rem;color:#fff;line-height:1.4}
/* Génération allée jusqu'à la vidéo montée : la réussite maximale dans
   Scriptura, et rien ne la distinguait jusqu'ici. Seule marque émeraude de
   l'historique, donc lisible d'un coup d'œil dans une liste dorée. */
.history-montee{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-family:'Poppins',sans-serif;font-size:0.56rem;letter-spacing:0.12em;text-transform:lowercase;
  color:var(--emerald-light);background:var(--emerald-pale);
  border:1px solid var(--emerald-border);border-radius:20px;padding:3px 9px;
}
.history-detail{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.history-content{margin-bottom:14px}
.hist-line{font-size:0.92rem;line-height:1.6;color:rgba(255,255,255,0.85);margin-bottom:10px}
.hist-time{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.62rem;color:var(--gold);letter-spacing:0.08em}

/* Vidéos montées à récupérer (retour propriétaire, 27/09) : liste à part,
   au-dessus des générations - contenu éphémère (3 jours ou jusqu'au
   téléchargement, voir js/historique.js), jamais mêlé aux cartes
   permanentes. Même accent émeraude que .history-montee : c'est la même
   réussite, ici encore disponible plutôt que déjà actée. */
.hist-videos-montees:empty{display:none}
.hist-videos-titre{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--emerald-light);margin-bottom:10px;
}
.hist-video-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--emerald-pale);border:1px solid var(--emerald-border);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;
}
.hist-video-info{display:flex;flex-direction:column;gap:3px}
.hist-video-format{font-family:'Playfair Display',serif;font-size:0.95rem;color:#fff}
.hist-video-delai{font-family:'Poppins',sans-serif;font-size:0.68rem;color:rgba(255,255,255,0.55)}

/* ── SUPPRESSION HISTORIQUE ── */
.history-toolbar{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  justify-content:flex-start;flex-wrap:nowrap;
}
.hist-tool-btn{
  background:transparent;border:1px solid rgba(250,148,16,0.3);
  color:var(--gold-light);font-family:'Poppins',sans-serif;font-size:0.56rem;
  letter-spacing:0.06em;text-transform:uppercase;padding:8px 12px;white-space:nowrap;
  border-radius:999px;cursor:pointer;transition:all 0.2s;
}
.hist-tool-btn:hover{border-color:var(--gold);background:rgba(250,148,16,0.08)}
.hist-tool-btn.danger{border-color:rgba(200,80,80,0.5);color:#E88}
.hist-tool-btn.danger:hover{background:rgba(200,80,80,0.12);border-color:#E88}
.hist-tool-btn:disabled{opacity:0.35;cursor:not-allowed}
.hist-tool-count{font-size:0.9rem;color:var(--gold-light);font-weight:600;margin-left:auto;padding-right:4px}
.history-card.selecting{cursor:pointer}
.history-card.selected{border-color:var(--gold)}
.history-card-body{flex:1;padding:0}
.history-check{display:flex;align-items:center;padding-right:14px}
.history-check input{width:20px;height:20px;accent-color:var(--gold);cursor:pointer}
/* Colonne d'actions à droite d'une carte : favori (marque-page) + corbeille.
   Deux tuiles arrondies discrètes, icône en trait fin doré (style du logo). */
.history-actions{display:flex;flex-direction:column;align-items:center;gap:10px;padding-left:6px}
.history-fav,
.history-delete{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--gold-light);cursor:pointer;padding:4px;
  transition:color 0.2s,transform 0.12s;
}
.history-fav svg,
.history-delete svg{display:block}
.history-fav:hover{color:var(--gold)}
.history-fav:active,
.history-delete:active{transform:scale(0.9)}
/* Favori actif : marque-page rempli en or */
.history-fav.actif{color:var(--gold)}
.history-fav.actif svg{fill:currentColor}
/* Supprimer : vire au rouge au survol (action destructrice) */
.history-delete:hover{color:#E88}
.history-card.favori{border-color:rgba(250,148,16,0.45)}

/* Icône + libellé dans les boutons de la barre d'outils. Même gabarit pour
   les deux (taille, alignement vertical) : le bouton Supprimer n'avait
   jamais eu cette règle, laissant son icône à sa taille native (20px) et mal
   alignée avec le libellé, contrairement au bouton Favoris juste au-dessus.
   La marge vit sur le LIBELLÉ (pas sur l'icône) : Supprimer n'affiche son
   libellé qu'avant toute sélection (n=0, voir updateHistoryToolbar) ; sans
   cette marge côté libellé, l'icône resterait décentrée dans le bouton une
   fois le libellé retiré (n>0, icône seule). */
.hist-tool-btn.fav svg,
.hist-tool-btn.danger svg{width:13px;height:13px;vertical-align:-2px}
.hist-tool-btn.fav svg{fill:currentColor}
.hist-tool-btn .hist-tool-lbl{margin-left:4px}
.hist-tool-btn.actif{border-color:var(--gold);background:rgba(250,148,16,0.16);color:var(--gold-light)}

/* Boutons-icônes (recherche, filtre) dans la barre d'outils de l'historique */
.hist-tool-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:32px;flex:0 0 auto;
  background:transparent;border:1px solid rgba(250,148,16,0.3);border-radius:999px;
  color:var(--gold-light);cursor:pointer;transition:all 0.2s;
}
.hist-tool-icon:hover{border-color:var(--gold);background:rgba(250,148,16,0.08)}
.hist-tool-icon.actif{border-color:var(--gold);background:rgba(250,148,16,0.16)}
.hist-tool-icon svg{display:block;fill:none}
.hist-tool-icon svg circle[fill]{fill:var(--bg)}
.hist-tool-right{margin-left:auto}

/* Rangée sous la barre : recherche + puces de type */
.history-filters{margin:-6px 0 16px}
.hist-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:10px;padding:8px 12px}
.hist-search-ico{display:inline-flex;color:var(--gold);flex:0 0 auto}
.hist-search-input{flex:1;background:transparent;border:none;outline:none;color:#F5F3EE;font-family:'Poppins',sans-serif;font-size:1rem}
.hist-search-input::placeholder{color:rgba(255,255,255,0.4)}
.hist-search-clear{background:transparent;border:none;color:rgba(255,255,255,0.5);font-size:0.9rem;cursor:pointer;padding:0 4px}
.hist-search-clear:hover{color:var(--gold-light)}
.hist-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hist-chip{
  background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:999px;
  color:var(--text-secondary);font-family:'Poppins',sans-serif;font-size:0.82rem;
  padding:6px 13px;cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.hist-chip:hover{border-color:var(--gold)}
.hist-chip.actif{border-color:var(--gold);background:rgba(250,148,16,0.16);color:var(--gold-light)}

/* Barre d'outils flottante en bas (mode sélection) : toujours atteignable */
.history-toolbar.flottant{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:120;
  margin-bottom:0;background:rgba(20,18,14,0.94);backdrop-filter:blur(10px);
  border:1px solid var(--border-soft);border-radius:999px;
  padding:8px 12px;box-shadow:0 16px 40px -10px rgba(0,0,0,0.7);
  max-width:calc(100% - 24px);
  /* Filet de sécurité : 5 boutons (Annuler/Tout/compteur/Favoris/Supprimer)
     ne tiennent pas toujours sur la largeur d'un téléphone, même libellés
     masqués (voir media query plus bas). Un défilement horizontal DANS la
     pilule, plutôt qu'un débordement qui casse visuellement son contour
     arrondi (signalé sur capture, bouton Supprimer coupé). */
  overflow-x:auto;scrollbar-width:none;
  /* Un appui long fait glisser la barre (voir _initGlisserBarreOutils,
     js/historique.js) : évite que le geste soit d'abord capté comme un
     défilement tactile natif avant que notre logique de glisser ne prenne
     la main. */
  touch-action:none;
}
.history-toolbar.flottant::-webkit-scrollbar{display:none}
/* Retour visuel pendant le déplacement (appui long) : contour doré marqué,
   pas de transition pour suivre le doigt sans latence perçue. */
.history-toolbar.flottant.glisser{
  cursor:grabbing;transition:none;
  box-shadow:0 20px 50px -8px rgba(0,0,0,0.85),0 0 0 2px rgba(250,148,16,0.55);
}
body.hist-select #historyList{padding-bottom:96px}
/* La barre flottante occupe le bas : on masque le bouton "haut/bas" pour éviter le chevauchement */
body.hist-select #scrollTopBtn{display:none !important}
/* Les libellés Favoris et Supprimer de la barre flottante (mode sélection)
   sont désormais tous deux pilotés par l'état de sélection en JS, pas par
   la largeur d'écran (présents dans le DOM seulement à n=0, absents dès
   qu'on commence à sélectionner, voir updateHistoryToolbar) : plus aucune
   règle de largeur ici, elle écraserait en permanence ce comportement sur
   téléphone comme cela s'est déjà produit pour Supprimer. */

/* Bouton "Plus tard" du pop-up rappel */
.modal-btn-ghost{
  width:100%;padding:12px;background:transparent;color:rgba(255,255,255,0.6);
  font-family:'Poppins',sans-serif;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;
  border:none;cursor:pointer;margin-top:10px;transition:color 0.2s;
}
.modal-btn-ghost:hover{color:rgba(255,255,255,0.9)}
/* Bouton "J'ai un code" dans le nav, masqué si déjà abonné */
body.is-unlocked .nav-code-btn{display:none}
/* Bouton "S'abonner" dans le nav, masqué si déjà abonné */
body.is-unlocked .nav-subscribe-btn{display:none}

/* ── BARRE D'ACTIONS (sous le ticker) ── */
.action-bar{
  display:flex;justify-content:center;gap:12px;
  padding:16px 20px;flex-wrap:wrap;
  background:var(--bg);border-bottom:1px solid var(--border-soft);
}
.action-btn{
  background:transparent;border:1px solid rgba(250,148,16,0.35);
  color:var(--gold-light);font-family:'Poppins',sans-serif;font-size:0.62rem;
  letter-spacing:0.1em;text-transform:uppercase;padding:10px 18px;
  border-radius:999px;cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.action-btn:hover{border-color:var(--gold);background:rgba(250,148,16,0.08)}
body.is-unlocked .action-bar .nav-code-btn{display:none}

/* Bouton cadenas seul (icône) dans l'en-tête */
.action-btn.icon-only{
  padding:8px 12px;font-size:1rem;line-height:1;border-radius:999px;
}

/* ── BOUTON RETOUR EN HAUT ── */
/* ── ÉTAPE 1 FUSIONNÉE : GRILLES DE CHOIX COMPACTES ── */
/* L'objectif et le point de départ partagent maintenant un seul écran. Pour
   qu'ils y tiennent, les cartes passent en grille (2 colonnes dès qu'il y a la
   place) et leur description tient sur UNE ligne au lieu de trois.
   Les descriptions sont conservées à dessein : l'objectif est le choix le plus
   lourd de conséquences de toute l'app (il change la stratégie de chute, les
   instructions du corps du script, les contrôles du Critique et jusqu'au
   critère de notation du CTA). Le réduire à un menu déroulant sans libellé
   explicatif aurait rendu ce choix moins éclairé, pas seulement plus court. */
.choices-compact{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){ .choices-compact{grid-template-columns:1fr 1fr} }
/* Deux retours du propriétaire, cumulés ici.
   1. Le libellé et sa description étaient côte à côte, donc un objectif un
      peu long ("Asseoir mon expertise") passait sur deux lignes pendant que
      les autres tenaient sur une. La description passe donc DESSOUS, et
      chaque libellé récupère toute la largeur de la carte.
   2. Ma première version les empilait tous les trois, icône comprise, qui se
      retrouvait seule au-dessus du titre. L'icône revient SUR LA LIGNE DU
      TITRE : c'est align-items:flex-start plus une hauteur d'icône calée sur
      la hauteur de ligne du libellé (1.3em) qui l'y maintient, quel que soit
      le nombre de lignes de la description en dessous. */
/* Troisième retour du propriétaire sur ces cartes : l'icône était calée sur
   la LIGNE DU TITRE, il la veut CENTRÉE entre le titre et sa description,
   c'est-à-dire sur la hauteur du bloc de texte. `align-items:center` sur la
   carte suffit et reste juste quel que soit le nombre de lignes, alors qu'un
   décalage fixe se décalerait dès qu'une description passe sur deux lignes. */
.choices-compact .choice{padding:14px 16px;flex-direction:row;align-items:center;gap:11px}
.choices-compact .choice-icon{
  width:auto;flex:none;opacity:1;color:var(--gold);
  display:flex;align-items:center;font-size:1.05rem;
}
.choices-compact .choice-icon svg{width:1.15em;height:1.15em;display:block}
.choices-compact .choice-body{flex:1;min-width:0}
.choices-compact .choice-label{margin-bottom:2px}
/* Pulsation, comme les icônes des modes du hero et des sections "Comment ça
   marche" : même keyframe, même rythme, et le même décalage en cascade pour
   que les quatre n'attirent jamais l'oeil pile au même instant. */
@media(prefers-reduced-motion:no-preference){
  .choices-compact .choice-icon svg{animation:howIconPulse 1.7s ease-in-out infinite}
  .choices-compact > *:nth-child(4n+2) .choice-icon svg{animation-delay:.18s}
  .choices-compact > *:nth-child(4n+3) .choice-icon svg{animation-delay:.36s}
  .choices-compact > *:nth-child(4n) .choice-icon svg{animation-delay:.54s}
}
/* L'objectif retenu porte son icône en doré clair, comme le reste de la
   carte sélectionnée. */
.choices-compact .choice.selected .choice-icon{color:var(--gold-light)}
.choices-compact .choice-desc{
  font-size:0.82rem;line-height:1.35;opacity:0.62;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Un écran qui porte DEUX questions doit montrer laquelle est déjà répondue. */
.choices-compact .choice.selected{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(250,148,16,0.14),rgba(250,148,16,0.04));
  box-shadow:0 0 0 1px rgba(250,148,16,0.25) inset;
}
.choices-compact .choice.selected .choice-icon{color:var(--gold-light)}
/* Titre de la seconde question, plus discret que le titre d'étape : c'est une
   sous-partie de l'écran, pas une nouvelle étape. */
.sous-titre-etape{
  margin:26px 0 12px;
  font-family:'Poppins',sans-serif;font-size:0.72rem;letter-spacing:0.14em;text-transform:lowercase;
  color:var(--gold);
}

/* ── REPLI « AFFINER » DES CHAMPS OPTIONNELS ── */
/* Discret par nature : c'est une porte, pas une action. Elle ne doit pas
   entrer en concurrence visuelle avec le bouton de génération. */
.affiner-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;margin:0 0 18px;padding:12px 16px;
  background:transparent;border:1px dashed rgba(250,148,16,0.28);border-radius:12px;
  color:rgba(255,255,255,0.62);cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  transition:border-color 0.25s, color 0.25s, background 0.25s;
}
.affiner-toggle:hover{border-color:rgba(250,148,16,0.55);color:var(--gold-light);background:rgba(250,148,16,0.05)}
.affiner-chev{transition:transform 0.25s ease;font-size:0.9rem}
.affiner-toggle[aria-expanded="true"] .affiner-chev{transform:rotate(180deg)}
.affiner-toggle[aria-expanded="true"]{border-style:solid;color:var(--gold-light);border-color:rgba(250,148,16,0.45)}
/* Le panneau reste fermé même quand la zone géographique est obligatoire : le
   bouton le signale au lieu de s'ouvrir de force et de remettre les quatre
   champs à l'écran en permanence. */
.affiner-toggle.affiner-requis{border-style:solid;border-color:var(--gold);color:var(--gold-light)}
/* [hidden] suffit à masquer ; l'ouverture est animée, jamais un saut sec. */
@keyframes affinerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .affiner-champs:not([hidden]){animation:affinerIn 0.3s ease}
}

/* ── BOUTON DE CRÉATION FLOTTANT (accueil uniquement) ── */
/* Silhouette du bouton de création TikTok (rectangle arrondi large + "+"),
   reconnue au premier coup d'oeil par un créateur, mais dans la palette
   Scriptura : fond doré, "+" sombre, et une arête émeraude décalée qui
   rappelle la double bordure de TikTok sans en reprendre le cyan/rose, qui
   jureraient avec toute l'app.
   Centré horizontalement et posé AU-DESSUS de la zone sûre du téléphone
   (env(safe-area-inset-bottom)) : sur iOS la barre d'adresse de Safari occupe
   le bas de l'écran, un bouton collé à bottom:0 finirait dessous. */
#creerBtn{
  position:fixed;left:50%;z-index:200;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  width:56px;height:40px;border-radius:12px;box-sizing:border-box;
  background:var(--gold);color:#000;
  /* Doré Scriptura, "+" noir, arêtes gauche et droite en émeraude : la
     silhouette du bouton de création TikTok, dans la palette de la maison.
     Des BORDURES plutôt que des formes décalées derrière le bouton : celui-ci
     est en position:fixed, donc il crée son propre contexte d'empilement, et
     un pseudo-élément en z-index:-1 y disparaîtrait purement et simplement
     derrière son propre fond. */
  border:none;
  border-left:4px solid var(--emerald-light);
  border-right:4px solid var(--emerald-light);
  cursor:pointer;padding:0;
  box-shadow:0 6px 20px rgba(0,0,0,0.45);
  opacity:0;visibility:hidden;
  transform:translate(-50%,12px);
  transition:opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
  display:flex;align-items:center;justify-content:center;
}
#creerBtn.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* Zone tactile portée à 44x44 sans toucher au dessin : le bouton mesure
   56x40 par choix esthétique (la silhouette du bouton de création TikTok),
   et l'audit responsive a mesuré 38 px réellement atteignables en hauteur.
   Un pseudo-élément transparent centré comble la différence. C'est l'action
   principale de l'app, elle ne doit jamais se rater au pouce. */
#creerBtn::before{
  content:'';position:absolute;top:50%;left:50%;
  width:56px;height:46px;transform:translate(-50%,-50%);
}
/* Le "+" devient "−" quand le panneau est déplié : seule la barre verticale
   se rétracte, la barre horizontale reste. Plus lisible qu'un changement
   d'icône sec, et ça dit clairement que le même bouton referme. */
#creerBtnBarre{transform-box:fill-box;transform-origin:center;transition:transform 0.3s cubic-bezier(.22,.8,.2,1)}
body.creer-ouvert #creerBtnBarre{transform:scaleY(0)}

/* PULSATION, tant que le bouton montre un "+".
   Demande du propriétaire, et elle suit exactement la règle déjà posée pour
   la flèche de défilement : ce qui BOUGE invite. Un "+" invite à ouvrir. Un
   "−" ne propose plus que de refermer ce qu'on vient d'ouvrir, donc il se
   fige : continuer à pulser pendant que le panneau est déplié attirerait
   l'œil sur le bouton au lieu des modes qu'il vient d'afficher.
   Le transform des images-clés REPREND translate(-50%,0) : ce bouton est
   centré PAR son transform, une animation qui l'oublierait le ferait sauter
   à droite de l'écran pendant toute la pulsation. */
@keyframes creerPulse{
  0%,100%{transform:translate(-50%,0) scale(1);box-shadow:0 6px 20px rgba(0,0,0,0.45)}
  50%{transform:translate(-50%,0) scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,0.45),0 0 0 7px rgba(212,175,90,0.13)}
}
/* TROIS CYCLES, PAS L'INFINI. Choix du propriétaire après comparaison des
   deux rendus, et il tombe juste : une pulsation sans fin cesse d'être une
   invitation pour devenir du décor, on ne la voit plus au bout d'une minute.
   Et sur l'accueil elle cohabite avec la flèche qui bondit, donc deux dorés
   en mouvement se disputent l'œil en permanence. Trois cycles appellent
   pendant les 7,8 premières secondes, puis le bouton se pose.
   Elle REPART toute seule à chaque fois que le bouton réapparaît (fermeture
   du panneau, retour à l'accueil, sortie d'une génération) : le sélecteur
   cesse de s'appliquer puis se réapplique, ce qui relance l'animation. Le
   créateur retrouve donc l'invitation à chaque nouveau moment où elle a du
   sens, sans jamais la subir en continu.
   `both` garde l'état final : le bouton se repose exactement à sa taille
   normale, jamais figé au milieu d'un battement. */
@media(prefers-reduced-motion:no-preference){
  body:not(.creer-ouvert) #creerBtn.visible{animation:creerPulse 2.6s ease-in-out 3 both}
}

/* ── PANNEAU DE CRÉATION (dépliant depuis le bas) ── */
/* Volontairement SANS fond : le propriétaire veut entrevoir la page d'accueil
   entre les boutons pendant que le panneau est déplié. Seuls les boutons
   portent un fond, et il est renforcé ici par rapport au hero (où ils se
   posent sur un fond maîtrisé) : au-dessus d'un contenu de page quelconque,
   le quasi-transparent d'origine rendrait le texte illisible. Un fond sombre
   translucide avec flou garde donc la lisibilité TOUT EN laissant deviner ce
   qu'il y a derrière, ce qui est exactement l'effet demandé. */
/* Voile flouté derrière le panneau déplié (retour propriétaire : "que
   l'arrière-plan soit flouté de 40-50%"). Posé SOUS le panneau (z-index 198,
   le panneau est à 199 et le bouton à 200), donc le panneau et son bouton
   restent nets pendant que la page derrière recule.
   Le panneau lui-même reste volontairement sans fond : on continue de voir
   la page entre les boutons, comme demandé à l'origine, mais floutée, ce qui
   la fait passer du statut de contenu lisible à celui de décor. */
/* Le voile s'arrête SOUS l'en-tête (retour propriétaire : "qu'il occupe
   toute la page sauf l'en-tête") : la barre de navigation reste nette et
   utilisable pendant que tout le reste recule. */
.creer-fond{
  position:fixed;top:var(--nav-h,64px);left:0;right:0;bottom:0;z-index:198;
  background:rgba(10,10,12,0.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity 0.45s cubic-bezier(.22,.8,.2,1), visibility 0.45s;
}
body.creer-ouvert .creer-fond{opacity:1;visibility:visible}
/* Sans backdrop-filter (navigateurs anciens), le voile seul doit suffire à
   faire reculer la page : on l'assombrit davantage plutôt que de laisser un
   arrière-plan parfaitement net qui concurrencerait les boutons. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .creer-fond{background:rgba(10,10,12,0.72)}
}
@media (prefers-reduced-motion:reduce){ .creer-fond{transition:none} }
/* Pendant la sélection multiple de l'historique, le bouton de création est
   masqué : son voile ne doit surtout pas rester seul à l'écran. */
body.hist-select .creer-fond{display:none !important}

/* Retour propriétaire, capture à l'appui : plafonné à 76vh, le panneau
   coupait les boutons en plein milieu de l'écran au défilement, comme s'ils
   passaient sous quelque chose. Il occupe désormais toute la hauteur SOUS
   L'EN-TÊTE, dont la hauteur réelle est mesurée en JS (--nav-h, voir
   majHauteurEntete, js/ui.js) plutôt que codée en dur : elle diffère entre
   mobile et bureau, et une valeur figée finirait par glisser le panneau sous
   l'en-tête, exactement le défaut qu'on corrige. */
.creer-panneau{
  position:fixed;top:var(--nav-h,64px);left:0;right:0;bottom:0;z-index:199;
  padding:14px 18px calc(84px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  background:transparent;
  transform:translateY(100%);visibility:hidden;
  transition:transform 0.45s cubic-bezier(.22,.8,.2,1), visibility 0.45s;
}
.creer-panneau.ouvert{transform:translateY(0);visibility:visible}
/* Les boutons clonés entrent en cascade alternée gauche/droite, la même que
   dans le hero (liftInLeft / liftInRight), posée en JS à l'ouverture par
   animerHeroModes (js/ui.js) à 0,10 s d'intervalle. Rien n'est fixé ici :
   une opacité 0 ou un `animation:none` en CSS écraserait cette cascade, et
   c'est exactement ce qui la bloquait avant. */
/* Les boutons se collent en BAS quand il reste de la place, puisque le
   panneau se déplie depuis le bas. `margin-top:auto` plutôt que
   `justify-content:flex-end` : avec ce dernier, un contenu plus haut que le
   panneau déborde PAR LE HAUT et devient inatteignable au défilement, un
   défaut connu de flexbox. La marge automatique, elle, retombe à zéro dès
   que ça déborde. */
.creer-panneau .hero-modes{margin-bottom:0;margin-top:auto}
.creer-panneau .hero-mode-btn{
  background:rgba(22,22,24,0.72);
  border-color:rgba(250,148,16,0.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.creer-panneau .hero-mode-btn:hover{background:rgba(250,148,16,0.16);border-color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .creer-panneau,.creer-panneau .hero-mode-btn,#creerBtnBarre{transition:none}
  /* Pas de cascade : les boutons sont simplement là, d'un bloc. animerHeroModes
     efface aussi l'animation inline dans ce cas (js/ui.js). */
  .creer-panneau .hero-mode-btn{animation:none !important;opacity:1;transform:none}
}
#creerBtn:hover{background:var(--gold-light)}
/* Le retour tactile à l'appui doit rester perceptible : sans couper
   l'animation ici, la pulsation (infinie, donc prioritaire sur le transform
   d'une simple pseudo-classe) écraserait l'enfoncement du bouton. */
#creerBtn:active{transform:translate(-50%,2px);animation:none}
/* Jamais visible pendant la sélection multiple de l'historique, comme le
   bouton de navigation ci-dessous. */
body.hist-select #creerBtn{display:none !important}
@media(max-width:600px){
  #creerBtn{bottom:calc(18px + env(safe-area-inset-bottom, 0px));width:52px;height:38px}
}

/* FONDU BAS, sous les boutons flottants.
   Un bouton fixe survole forcément le contenu, à toutes les positions de
   défilement : sur l'accueil au repos, le « + » tombait pile sur la carte du
   compteur de générations et la tranchait (4 px sur iPhone 14, 11 px sur un
   Android compact, mesuré en navigateur). Deux autres pistes ont été
   essayées et écartées : remonter le compteur (le bouton se posait alors sur
   le TEXTE du sous-titre, 38 px, donc pire), et resserrer les espaces du hero
   (mieux, mais 8 px restants sur petit écran pour un rythme abîmé).
   Retenu : on ne déplace RIEN, le bas de l'écran s'assombrit en dégradé. Le
   contenu s'y efface au lieu d'être coupé net, les boutons ont une base
   lisible, et ça se lit comme un choix plutôt qu'un accident. C'est le motif
   standard sur mobile.
   Uniquement quand le bouton de création est visible : ailleurs, rien à
   protéger, et assombrir le bas de chaque écran pour rien serait une
   régression. pointer-events:none, il ne doit jamais intercepter un geste.
   z-index 150 : au-dessus du contenu, sous les boutons (200), sous le
   panneau de création (199) et sous toutes les fenêtres modales (300+). */
body.creer-visible::after{
  content:'';position:fixed;left:0;right:0;bottom:0;z-index:150;
  height:calc(132px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(28,28,30,0) 0%, rgba(28,28,30,0.62) 42%, rgba(28,28,30,0.94) 100%);
}
/* FLÈCHE NUE, décision du propriétaire après comparaison de trois rendus.
   Elle était un disque doré plein, du même poids visuel que le bouton de
   création : deux ors pleins côte à côte, et l'œil ne savait plus lequel
   portait l'action. Material ne prévoit qu'UNE action principale par écran,
   c'est le « + ». La flèche redevient donc ce qu'elle est, une aide à la
   navigation : un simple dessin doré, sans disque ni contour.
   L'OMBRE PORTÉE n'est pas décorative. Sans fond à elle, la flèche passe
   par-dessus le contenu, et sur la galerie de vidéos de l'accueil elle
   atterrissait sur un visage et devenait introuvable (vérifié en navigateur
   avant de trancher). L'ombre la détache du clair comme du sombre.
   LA ZONE TACTILE RESTE À 44x44, transparente autour du dessin : seul le
   dessin rétrécit. En dessous, on passerait sous le minimum recommandé par
   Apple comme par Material, et la flèche deviendrait pénible à viser au
   pouce. Ne pas « nettoyer » ces dimensions en les alignant sur l'icône. */
#scrollTopBtn{
  position:fixed;bottom:24px;right:24px;z-index:200;
  width:44px;height:44px;border-radius:50%;
  background:transparent;color:var(--gold);
  border:none;cursor:pointer;font-size:1.3rem;line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.85));
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity 0.3s, visibility 0.3s, transform 0.3s;
  display:flex;align-items:center;justify-content:center;
}
#scrollTopBtn.visible{opacity:1;visibility:visible;transform:translateY(0)}
#scrollTopBtn:hover{color:var(--gold-light)}
#scrollTopIcon{width:24px;height:24px}
/* PETITS BONDS, uniquement quand elle pointe VERS LE BAS.
   Demande du propriétaire, et elle tombe juste : c'est le moment où la flèche
   sert de signifiant contre le faux fond (un héro plein écran fait croire que
   la page s'arrête là, voir l'illusion de complétude du NN/g), et le
   mouvement est précisément ce qui attire l'œil vers le bas.
   FIGÉE DÈS QU'ELLE POINTE VERS LE HAUT, et ce n'est pas un détail de goût :
   le NN/g demande explicitement qu'un bouton de retour en haut reste immobile
   une fois affiché, un élément qui bouge captant l'attention en continu. Là,
   la flèche n'invite plus à rien, elle rend juste un service.
   La rotation à 180° du sens « haut » est posée en ligne par le JS : les deux
   ne coexistent jamais, donc l'animation ne l'écrase pas. */
@keyframes flecheInvite{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
@media(prefers-reduced-motion:no-preference){
  #scrollTopBtn.invite #scrollTopIcon{animation:flecheInvite 1.9s ease-in-out infinite}
  /* Panneau de création déplié : la flèche flotte AU-DESSUS de lui (même
     plan que le bouton) et continuait d'y bondir. Or à cet instant elle
     n'invite plus à rien, les modes sont déjà là, et elle ne ferait que
     disputer l'attention aux boutons qu'on vient d'afficher. Même règle que
     le bouton de création juste en dessous : ce qui n'invite plus se fige. */
  body.creer-ouvert #scrollTopBtn.invite #scrollTopIcon{animation:none}
}
@media(max-width:600px){
  #scrollTopBtn{bottom:18px;right:18px;width:44px;height:44px;font-size:1.2rem}
}

/* Bouton "S'abonner" dans le nav, juste à gauche du bouton menu, même
   effet (cadre doré + reflet animé) que .hero-cta ("Commence gratuitement"),
   texte en noir. Masqué automatiquement si déjà abonné (règle .nav-subscribe-btn
   plus haut). */
.nav-subscribe-cta{
  display:flex;align-items:center;justify-content:center;
  height:42px;padding:0 20px;cursor:pointer;
  border:1px solid var(--gold);border-radius:999px;
  background:linear-gradient(120deg,var(--gold),var(--gold-light));
  color:#000;font-family:'Poppins',sans-serif;font-size:0.72rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(250,148,16,0.6);
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;overflow:hidden;
}
.nav-subscribe-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(250,148,16,0.75)}
.nav-subscribe-cta:active{transform:translateY(0)}
@media(prefers-reduced-motion:no-preference){
  .nav-subscribe-cta::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-18deg);animation:goldSheen 4.5s ease-in-out infinite}
}
@media(max-width:480px){
  .nav-subscribe-cta{padding:0 14px;font-size:0.62rem}
}

/* ── MENU LATÉRAL (SIDEBAR) ── */
.menu-toggle{
  background:transparent;border:1px solid rgba(250,148,16,0.35);
  color:var(--gold-light);font-size:1.1rem;line-height:1;
  width:42px;height:42px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all 0.2s;
}
.menu-toggle:hover{border-color:var(--gold);background:rgba(250,148,16,0.08)}
/* ── RACCOURCI « MES GÉNÉRATIONS » DANS LA BARRE DU HAUT ──
   Demande du propriétaire. C'est l'écran que les abonnés rouvrent le plus
   souvent, et il était à deux gestes : ouvrir le tiroir, puis viser la
   première entrée. Le voilà à un seul.
   SANS CADRE, volontairement, contrairement à .menu-toggle juste à côté :
   deux boutons encadrés côte à côte se disputent l'attention, et le tiroir
   doit rester le repère principal de la barre. Le cadre marque le bouton
   qui ouvre TOUT le reste ; ce raccourci-là n'ouvre qu'un écran.
   MÊME GABARIT (42px) malgré l'absence de cadre : c'est la cible tactile qui
   doit être identique, pas la décoration. Un bouton visuellement plus léger
   mais plus petit à toucher serait raté sur téléphone.
   Masqué par défaut, montré par body.is-unlocked (voir js/app.js) : un
   non-abonné n'a rien à y retrouver, et un porteur de jeton n'est pas
   abonné. Même mécanique que .nav-subscribe-btn, en miroir. */
.nav-generations-btn{
  display:none;background:transparent;border:none;padding:0;
  color:var(--gold-light);width:42px;height:42px;border-radius:10px;
  cursor:pointer;align-items:center;justify-content:center;transition:all 0.2s;
}
body.is-unlocked .nav-generations-btn{display:flex}
.nav-generations-btn:hover{background:rgba(250,148,16,0.08);color:var(--gold)}
.sidebar-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.6);
  opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;
}
.sidebar-overlay.active{opacity:1;visibility:visible}
.sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:301;
  width:290px;max-width:82vw;
  background:var(--bg-mid);border-right:1px solid var(--border);
  transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  display:flex;flex-direction:column;padding:24px 22px;
  box-shadow:4px 0 30px rgba(0,0,0,0.4);
}
.sidebar.active{transform:translateX(0)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
/* Même police que .logo (voir plus haut) : Russo One, majuscules. */
.sidebar-logo{display:inline-flex;align-items:center;gap:0;font-family:'Russo One',sans-serif;text-transform:uppercase;font-weight:400;font-size:1rem;letter-spacing:0.01em;color:var(--white)}
.sidebar-logo em{color:var(--gold);font-style:normal}
/* ZONE TACTILE DE 44x44, le minimum recommandé par Apple comme par Material.
   Mesurée à 23x29 lors de l'audit responsive : c'est le geste le plus
   fréquent du tiroir, et le plus pénible à viser au pouce quand il rate.
   Les marges négatives compensent exactement l'agrandissement, donc
   l'en-tête du tiroir ne bouge pas d'un pixel : c'est la zone de clic qui
   grandit, pas le dessin. */
.sidebar-close{
  background:transparent;border:none;color:rgba(255,255,255,0.5);
  font-size:1.1rem;cursor:pointer;
  width:44px;height:44px;margin:-8px -12px -8px 0;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.sidebar-close:hover{color:#fff}
/* Le menu du tiroir est une balise <nav>, donc il héritait de la règle
   générale `nav{}` (la BARRE DU HAUT du site) : position:fixed en haut à
   gauche de l'écran, fond opaque, bordure basse et 36 px de marge. La liste
   se posait ainsi PAR-DESSUS l'en-tête du tiroir : le logo et la croix de
   fermeture disparaissaient dessous, et un doigt au centre de la croix
   atteignait « Mes générations » au lieu de fermer le menu. On annule donc
   explicitement tout ce que cette règle apporte, jamais implicitement. */
.sidebar-nav{
  display:flex;flex-direction:column;gap:6px;flex:1;
  position:static;justify-content:flex-start;padding:0;
  background:none;backdrop-filter:none;border-bottom:none;
}
/* BLOC COMPTE du tiroir : offre + code, juste sous le logo. Il ne calcule
   rien lui-même, il ouvre la fenêtre d'infos existante (ouvrirInfosAbonne)
   qui détient déjà les quotas, la validité et le décompte. Le menu dit QUI
   tu es, la fenêtre dit OÙ tu en es, aucune logique n'est dupliquée. */
.sidebar-compte{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  width:100%;text-align:left;cursor:pointer;color:inherit;
  background:rgba(212,175,90,0.07);
  border:1px solid rgba(212,175,90,0.22);
  border-radius:10px;padding:13px 14px;margin-bottom:18px;
  font-family:'Poppins',sans-serif;
}
.sidebar-compte:hover{background:rgba(212,175,90,0.11)}
.sc-offre{display:flex;align-items:center;gap:7px;color:var(--gold-light);font-size:0.92rem;font-weight:500}
.sc-etoile{font-size:0.78rem;color:var(--gold)}
/* Le code garde une chasse fixe : masqué ou révélé, la ligne ne change pas
   de largeur, donc le bloc ne sursaute pas au moment de l'affichage. */
.sc-code{
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,0.52);font-size:0.78rem;letter-spacing:0.14em;
  font-family:'SFMono-Regular',Menlo,Consolas,monospace;
  background:none;border:none;padding:0;cursor:pointer;
}
.sc-code:hover{color:rgba(255,255,255,0.78)}
.sc-code-ico{display:inline-flex;align-items:center;flex:none}
.sc-code svg{width:14px;height:14px;flex:none;color:rgba(212,175,90,0.7)}
.sc-libre{color:rgba(255,255,255,0.52);font-size:0.78rem}
.sidebar-item{
  display:flex;align-items:center;justify-content:flex-start;gap:12px;
  background:transparent;border:none;text-align:left;
  color:rgba(255,255,255,0.85);font-family:'Poppins',sans-serif;font-size:0.95rem;
  padding:14px 14px;border-radius:8px;cursor:pointer;transition:background 0.2s;
  text-decoration:none;width:100%;
}
.sidebar-item:hover{background:rgba(255,255,255,0.05)}
/* Largeur fixe + flex-shrink:0 pour que tous les libellés démarrent exactement
   à la même position, quelle que soit la largeur visuelle de l'émoji utilisé. */
.sidebar-icon{
  font-size:1.1rem;width:24px;flex:0 0 24px;
  display:inline-flex;align-items:center;justify-content:center;
}
.sidebar-icon svg{width:20px;height:20px;display:block;color:var(--gold-light)}
/* "✦" de "S'abonner" : seul icône du menu qui n'est pas un SVG (donc pas
   couvert par la règle .sidebar-icon svg ci-dessus), héritait sinon du
   blanc cassé de .sidebar-item au lieu du doré des autres icônes. */
.nav-subscribe-btn .sidebar-icon{color:var(--gold-light)}
/* Badge d'échecs de génération sur "Tableau de bord" (sidebar + pied de
   page) : visible sans avoir besoin d'ouvrir le tableau de bord, voir
   verifierBadgeErreursAdmin (js/admin.js). */
.nav-admin-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:auto;
  background:#f87171;color:#1a1310;border-radius:999px;
  font-size:0.7rem;font-weight:700;font-family:'Poppins',sans-serif;line-height:1;
  flex:none;
}
.footer-link-btn .nav-admin-badge{margin-left:6px}
/* Icône en ligne dans un texte/badge (hérite de la couleur du texte via
   currentColor, donc respecte l'or, l'émeraude, etc.). Style trait fin,
   même famille que le logo et les icônes de cartes. */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex:none}
.sidebar-footer{
  font-family:'Poppins',sans-serif;font-size:0.55rem;letter-spacing:0.12em;text-transform:lowercase;
  color:rgba(255,255,255,0.3);text-align:left;padding:20px 14px 0;
}
body.is-unlocked .sidebar-item.nav-code-btn{display:none}
body.is-unlocked .sidebar-item.nav-subscribe-btn{display:none}
/* "Changer de code d'accès" : miroir de "J'ai un code" ci-dessus, réservé à
   un abonné déjà connecté (pour basculer vers un autre de ses comptes). */
.sidebar-item.nav-switch-account-btn{display:none}
body.is-unlocked .sidebar-item.nav-switch-account-btn{display:flex}
/* Flèche de bascule entre comptes connus, à côté de "Bonjour Prénom" (voir
   salutationAccueil, js/recommandations.js). Positionnement relatif pour
   ancrer le petit menu déroulant juste en dessous. */
.salutation-swap-wrap{position:relative;display:inline-flex;align-items:center;gap:6px}
/* Ancre le menu déroulant sur la flèche elle-même, jamais sur toute la
   largeur de la salutation (voir salutationAccueil, js/recommandations.js) :
   sinon un right:0 posé sur .salutation-swap-wrap étire le menu depuis la
   fin de tout le texte, le faisant apparaître sous le début de la
   salutation plutôt que sous la flèche. */
.salutation-swap-anchor{position:relative;display:inline-flex;align-items:center}
.salutation-swap-btn{
  background:transparent;border:none;padding:4px;cursor:pointer;
  color:var(--gold);display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.salutation-swap-btn:hover{color:var(--gold-light)}
.salutation-swap-btn svg{width:16px;height:16px;display:block}
/* Centré sur la flèche (donc juste sous l'emoji main, immédiatement à sa
   gauche) plutôt que collé à son bord gauche : un left:0 laissait le menu
   filer entièrement vers la droite au lieu de rester sous la salutation. */
.salutation-swap-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;z-index:20;
  background:var(--bg-mid);border:1px solid var(--border-soft);border-radius:12px;
  padding:6px;min-width:160px;display:none;flex-direction:column;gap:2px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.salutation-swap-menu.open{display:flex}
.salutation-swap-menu button{
  background:transparent;border:none;text-align:left;padding:8px 10px;border-radius:8px;
  color:rgba(255,255,255,0.85);font-family:'Poppins',sans-serif;font-size:0.85rem;
  font-style:normal;cursor:pointer;
}
.salutation-swap-menu button:hover{background:rgba(250,148,16,0.12);color:var(--gold-light)}
.salutation-swap-menu .swap-logout{margin-top:4px;padding-top:10px;border-top:1px solid var(--border-soft);color:#f87171}
.salutation-swap-menu .swap-logout:hover{background:rgba(248,113,113,0.12);color:#f87171}
/* Tableau de bord : cache pour tout le monde, visible uniquement pour le
   code fondateur (voir CODE_ADMIN, js/api.js, et body.is-admin ajouté par
   js/app.js et js/auth.js). */
.sidebar-item.nav-admin-btn{display:none}
body.is-admin .sidebar-item.nav-admin-btn{display:flex}
/* Bouton "Générer la vidéo" (montage) : réservé au fondateur, même
   mécanisme que le Tableau de bord ci-dessus. Plein doré (même langage que
   .btn-generate, le bouton principal de génération), pour ressortir dans la
   ligne Copier/Partager plutôt que de se fondre dans le cadre discret des
   autres .btn-regenerate. */
.montage-trigger-btn{
  display:none;
  background:var(--gold);color:var(--bg);border:none;
  box-shadow:0 4px 16px rgba(250,148,16,0.25);
}
body.is-admin .montage-trigger-btn,
body.peut-monter-video .montage-trigger-btn{display:inline-flex;align-items:center;justify-content:center}
/* Test admin uniquement, animation image -> vidéo (retour propriétaire,
   27/09) : voir index.html, montageAnimeTestZone. Masqué par défaut ICI
   (jamais en style inline sur l'élément, qui gagnerait toujours contre
   cette règle de classe, peu importe body.is-admin). */
.montage-animer-test{display:none}
body.is-admin .montage-animer-test{display:block}
.montage-trigger-btn:hover{
  background:var(--gold-light);color:var(--bg);
  transform:translateY(-1px);box-shadow:0 8px 26px rgba(250,148,16,0.35);
}
/* "Nous contacter" masqué uniquement pour le fondateur (remplacé par
   "Se déconnecter" en bas de la barre latérale). */
body.is-admin .sidebar-item.nav-contact-btn{display:none}
/* "Se déconnecter" : uniquement pour les abonnés et le fondateur (un
   non-abonné n'a pas de code, donc rien dont se déconnecter). Ancré en bas
   de la barre latérale, .sidebar-nav garde flex:1 pour pousser ce bloc
   tout en bas quel que soit le nombre d'items au-dessus. */
.sidebar-logout{
  border-top:1px solid var(--border-soft);
  padding-top:10px;
  margin-top:auto;
  display:none;
}
body.is-unlocked .sidebar-logout{display:block}
.sidebar-item.nav-logout-btn{
  color:rgba(255,120,120,0.85);
}
.sidebar-item.nav-logout-btn:hover{
  background:rgba(255,80,80,0.08);
  color:rgba(255,150,150,1);
}

/* Texte "Appuie pour rouvrir", discret */
.history-reopen{
  font-size:0.72rem;
  color:rgba(255,255,255,0.55);
  margin-top:6px;
  letter-spacing:0.02em;
}

/* Largeur du mode idées (plus étroit, centré) */
#ideasFlow .ideas-container{max-width:620px;margin:0 auto}

/* Cartes d'idées : mêmes dimensions que les cartes de l'historique */
.out-card.idea-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:8px;
  margin-bottom:14px;overflow:hidden;
}
.out-card.idea-card .out-header{
  padding:20px;gap:12px;align-items:center;
}
.out-card.idea-card .out-body{
  padding:0 20px 20px;
}

/* ── NOTIFICATION PREUVE SOCIALE ── */
.social-notif{
  position:fixed;bottom:24px;left:24px;transform:translateY(12px);
  z-index:250;max-width:calc(100vw - 48px);
  background:rgba(36,36,38,0.97);backdrop-filter:blur(12px);
  border:1px solid rgba(250,148,16,0.3);border-radius:999px;
  padding:10px 18px;font-family:'Poppins',sans-serif;font-size:0.78rem;
  color:rgba(255,255,255,0.85);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  display:flex;align-items:center;gap:8px;
}
.social-notif.visible{opacity:1;visibility:visible;transform:translateY(0)}
.social-notif strong{color:var(--gold-light);font-weight:normal}
.social-dot{
  width:7px;height:7px;border-radius:50%;background:#4ADE80;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(74,222,128,0.5);animation:socialPulse 2s infinite;
}
@keyframes socialPulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0.5)}
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
/* Statut hors ligne d'un abonné, Tableau de bord (voir admin.js,
   chargerPresenceAdmin) : même taille que .social-dot, rouge et fixe (pas
   de pulsation, pour ne pas attirer l'œil sur une absence). */
.admin-dot-off{width:7px;height:7px;border-radius:50%;background:#f87171;flex-shrink:0}
/* Statut indisponible (échec de lecture de la table presence, voir
   _presenceStatutInconnu, admin.js) : gris, jamais confondu avec un vrai
   hors ligne (rouge), pour ne pas induire l'admin en erreur. */
.admin-dot-inconnu{width:7px;height:7px;border-radius:50%;background:#6b7280;flex-shrink:0}
@media(max-width:600px){
  .social-notif{font-size:0.66rem;padding:8px 14px;bottom:18px;left:14px}
}

/* ── NOTIF INLINE (dans le flux, accueil uniquement) ── */
.social-inline{
  display:none;margin:0 auto 24px;width:fit-content;max-width:calc(100vw - 32px);
  pointer-events:none;
  background:rgba(36,36,38,0.9);
  border:1px solid rgba(250,148,16,0.3);border-radius:999px;
  padding:10px 18px;font-family:'Poppins',sans-serif;font-size:0.78rem;
  color:rgba(255,255,255,0.85);
  align-items:center;gap:8px;white-space:nowrap;
  opacity:0;transition:opacity 0.4s ease;
}
.social-inline.visible{display:flex;opacity:1}
@media(max-width:600px){
  .social-inline{font-size:0.66rem;padding:8px 14px}
}

/* ── BLOC MINIATURE (couverture anti-scroll) ── */
.sb-miniature{
  border:none !important;
  background:transparent !important;
}

/* ── SABLIER ANIMÉ (génération storyboard) ── */
.sablier{
  display:inline-block;font-size:1.1em;line-height:1;
  animation:sablierFlip 2s ease-in-out infinite;
}
@keyframes sablierFlip{
  0%, 40%   { transform:rotate(0deg); }
  50%, 90%  { transform:rotate(180deg); }
  100%      { transform:rotate(360deg); }
}

/* ── BARRE DE PROGRESSION (storyboard) ── */
.sb-progress{display:inline-flex;align-items:center;gap:10px;width:100%;max-width:220px}
.sb-progress-track{flex:1;height:6px;border-radius:999px;background:rgba(28,28,30,0.25);overflow:hidden}
.sb-progress-fill{height:100%;width:0%;background:var(--bg);border-radius:999px;transition:width 0.2s ease-out}
.sb-progress-pct{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.62rem;letter-spacing:0.08em;color:var(--bg);min-width:34px;text-align:right;font-weight:700}
/* Variante pour bouton à fond transparent (Storytelling) : couleurs dorées */
.sb-progress.gold .sb-progress-track{background:rgba(250,148,16,0.2)}
.sb-progress.gold .sb-progress-fill{background:var(--gold)}
.sb-progress.gold .sb-progress-pct{color:var(--gold-light)}

/* ── BARRE DE PROGRESSION SÉPARÉE (sous le bouton storyboard) ── */
.sb-progress-bar{
  display:flex;align-items:center;gap:12px;
  max-width:340px;margin:16px auto 20px;
}
/* Petit badge doré tournant (retour propriétaire, logo dans les temps
   morts) : donne une présence de marque aux barres de progression qui
   n'avaient jusque-là qu'un simple fil doré, sans rien qui rappelle
   Scriptura. Même langage visuel que .ds-loading-icon/.ds-loading-bolt
   (diagnostic sommaire) et .hero-logo-badge (accueil), gabarit réduit pour
   s'insérer en tête d'une barre fine plutôt que dans une grande carte.
   Placé en premier enfant DANS .sb-progress-bar : apparaît/disparaît avec
   la barre elle-même, sans toggle JS séparé à maintenir. */
.wait-badge{
  position:relative;width:38px;height:38px;flex:0 0 auto;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(250,148,16,0.16),transparent 70%);
}
.wait-badge::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold-light);
}
@media(prefers-reduced-motion:no-preference){
  .wait-badge::before{animation:dsLoadingSpin 1.4s linear infinite}
}
/* LE POURCENTAGE VIT DANS LE CERCLE QUI TOURNE (demande du propriétaire, il
   remplace l'éclair qui s'y trouvait). Le chiffre, lui, ne tourne PAS : il
   est posé au centre, seul l'anneau tourne autour. Un chiffre en rotation
   serait illisible, et c'est justement la seule information de progression
   qui reste depuis que la barre est devenue indéterminée. */
.sb-progress-bar-pct{
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.6rem;font-weight:500;
  letter-spacing:0.02em;color:var(--gold-light);
  line-height:1;text-align:center;
}
/* LA BARRE DÉFILE INDÉFINIMENT au lieu de se remplir (demande du
   propriétaire) : des rayures obliques dorées qui glissent en continu, le
   motif du ruban de chantier. Elle dit « ça travaille », pas « on en est
   là » : c'est le pourcentage dans le cercle qui porte l'avancement.
   6 px de haut, volontairement plus fin que le modèle fourni, pour rester
   une barre de progression et pas un bandeau. */
.sb-progress-bar-track{
  flex:1;height:12px;border-radius:999px;
  background:rgba(255,255,255,0.08);overflow:hidden;
  /* HAUTEUR : 12 px, choisie par le propriétaire après comparaison de cinq
     rendus. Première version à 6 px, jugés trop fins. Le modèle qu'il a
     fourni fait 24 px (mesuré dans son image), donc 12 px reste bien « moins
     large que le modèle », comme demandé, sans redevenir un fil.
     RAYURES À LA PROPORTION EXACTE DU MODÈLE : la rayure dorée y fait
     horizontalement la hauteur de la barre (24 px sur 24 px de haut). À 12 px
     de haut, la rayure perpendiculaire vaut donc 12/racine(2) = 8,49 px, et
     le motif se répète tous les 2 x 12 = 24 px horizontaux. La première
     version avait des rayures deux fois trop larges pour cette proportion. */
  background-image:repeating-linear-gradient(
    -45deg,
    var(--gold) 0 8.49px,
    rgba(255,255,255,0.06) 8.49px 16.97px);
  background-size:24px 24px;
}
@media(prefers-reduced-motion:no-preference){
  .sb-progress-bar-track{animation:rubanDefile 0.9s linear infinite}
}
@keyframes rubanDefile{
  from{background-position:0 0}
  to{background-position:24px 0}
}
/* Le remplissage n'a plus rien à remplir, mais l'élément RESTE dans le DOM :
   les treize endroits qui pilotent une barre continuent de lui écrire une
   largeur, et c'est cette largeur que lit marquerBarreTerminee (js/ui.js)
   pour savoir qu'on est à 100 %. Le supprimer aurait voulu dire toucher
   treize appelants pour rien. */
.sb-progress-bar-fill{display:none}
/* 100 % : la barre passe en émeraude. C'est l'endroit le plus vu de l'app,
   chaque script, chaque storyboard, chaque épisode et chaque montage s'y
   terminent, et c'est exactement le sens qu'on donne à cette couleur : ce
   qui est accompli. La classe est posée automatiquement, sans toucher aux
   douze endroits qui pilotent une barre (voir surveillerBarresProgression,
   js/ui.js). */
/* 100 % : le ruban s'arrête et passe en émeraude. C'est l'endroit le plus vu
   de l'app, chaque script, chaque storyboard, chaque épisode et chaque montage
   s'y terminent, et c'est exactement le sens qu'on donne à cette couleur : ce
   qui est accompli. Une barre qui continuerait de défiler après la fin dirait
   le contraire de ce qui vient de se passer.
   La classe est posée sur la PISTE par marquerBarreTerminee (js/ui.js), à
   partir de la largeur que les treize appelants écrivent toujours dans le
   remplissage devenu invisible. */
.sb-progress-bar-track.termine{
  animation:none;
  background-image:none;
  background-color:var(--emerald);
}
/* L'anneau se fige en même temps, même raison. */
.sb-progress-bar.termine .wait-badge::before{animation:none}

/* Le POURCENTAGE, lui, reste doré : retour du propriétaire, « côté score et
   pourcentage, remets le doré, le vert émeraude n'est pas beau ». Il n'a pas
   tort, l'émeraude porte mal les chiffres, elle est faite pour les pastilles,
   les contours et les fils, pas pour la typographie. */

/* Toute barre de progression (.sb-progress-bar) affiche désormais son
   remplissage ET son pourcentage par défaut (retour direct du propriétaire :
   "pourcentage pour TOUS les modes"). Ancienne bande rayée dorée
   "indéterminée" (masquait fill/pct, réservée à l'audit via une classe
   .determinee ajoutée dynamiquement) retirée : ce chantier a justement
   donné un vrai pourcentage à chaque mode, aucune barre n'a plus besoin de
   masquer son chiffre. Ce point a fait vivre un vrai bug caché plusieurs
   barres : le pourcentage était bien calculé et injecté dans le DOM (donc
   invisible aux tests, qui ne vérifiaient que le texte, jamais l'affichage
   réel), mais restait visuellement masqué faute de porter cette classe. */

/* ── MODAL GÉNÉRATION D'IMAGE ── */
.genimg-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.genimg-overlay.active{display:flex}
.genimg-modal{
  background:var(--bg-card);border:1px solid var(--gold);
  border-radius:14px;padding:32px 26px;max-width:400px;width:100%;
  text-align:center;position:relative;
}
.genimg-close{
  position:absolute;top:14px;right:16px;background:none;border:none;
  color:rgba(255,255,255,0.5);font-size:1.1rem;cursor:pointer;
  padding:8px;
}
.genimg-title{
  font-family:'Playfair Display',serif;font-weight:500;font-style:normal;font-size:1.6rem;line-height:1.3;
  color:#fff;margin-bottom:10px;
}
.genimg-sub{
  font-family:'Poppins',sans-serif;font-size:0.85rem;
  color:rgba(255,255,255,0.6);line-height:1.6;margin-bottom:26px;
}
.genimg-options{display:flex;gap:14px}
.genimg-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(255,255,255,0.04);border:1px solid var(--gold);
  border-radius:12px;padding:20px 12px;cursor:pointer;transition:all 0.2s;
  font-family:'Poppins',sans-serif;font-size:0.7rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gold-light);
}
.genimg-btn:hover{background:rgba(250,148,16,0.12)}
.genimg-btn-icon{font-size:1.8rem;display:flex;align-items:center;justify-content:center;height:38px}

/* ── BOUTON GÉNÉRER L'IMAGE (déclencheur) ── */
.genimg-trigger{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;margin-left:8px;
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.12em;text-transform:lowercase;
  color:var(--bg);background:var(--gold);
  border:1px solid var(--gold);
  padding:7px 16px;border-radius:999px;cursor:pointer;transition:all 0.2s;font-weight:500;
}
.genimg-trigger:hover{background:var(--gold-light);border-color:var(--gold-light)}

/* ── BOUTONS ICÔNES (Copier / Partager) ── */
.sb-actions-fin{
  display:flex;gap:12px;justify-content:center;
  margin-top:20px;padding-top:18px;
  border-top:1px solid var(--border-soft);
}
/* Régénérer en haut du storyboard (Récit/Script/Série) : pas de "Modifier"
   séparé pour ces storyboards intégrés (contrairement à Storyboard seul,
   qui a sa propre page), donc Régénérer y vit seul, aligné à droite. */
.sb-actions-top{
  display:flex;gap:12px;justify-content:flex-end;
  margin-bottom:14px;
}
/* Choix Style graphique + Format, placé avant "Générer le storyboard". */
.sb-options-visuelles{
  display:flex;flex-direction:column;gap:14px;margin-bottom:14px;
}
.sb-opt{
  display:flex;flex-direction:column;gap:4px;width:100%;
}
/* Enfant DIRECT seulement (> et non descendant) : ne vise que l'étiquette
   du champ ("Style graphique"/"Format"), jamais le .cs-label du menu
   déroulant maison inséré à l'intérieur du même <label> par initCustomSelect
   (js/ui.js), qui héritait sinon cette police/cette casse au lieu de Poppins. */
.sb-opt > span{
  font-family:'Poppins',sans-serif;font-size:0.56rem;letter-spacing:0.1em;
  text-transform:lowercase;color:var(--gold-light);
}
.sb-opt select{width:100%}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--gold-light);
  border:none;
  width:40px;height:40px;margin:0 8px;cursor:pointer;transition:all 0.2s;
}
.icon-btn:hover{color:var(--gold);transform:scale(1.15)}
.icon-btn svg{flex-shrink:0}

/* ── GÉNÉRER L'IMAGE : texte + logos cliquables ── */
.genimg-inline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;
}
/* Doré, pas émeraude : ici ce n'est pas une bonne nouvelle mais un geste à ne
   pas oublier. L'émeraude reste réservée à ce qui a réussi (voir
   .car-slide-produit et la doctrine de la palette). */
.genimg-produit-note{
  margin:8px 0 0;font-size:0.76rem;line-height:1.5;color:var(--gold-light);
}
.genimg-inline-label{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.1em;
  text-transform:lowercase;color:var(--gold-light);
}
.genimg-logo-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:6px;
  background:rgba(255,255,255,0.05);border:1px solid var(--border-soft);
  border-radius:10px;cursor:pointer;transition:all 0.2s;
}
.genimg-logo-btn:hover{
  background:rgba(250,148,16,0.12);border-color:var(--gold);
  transform:scale(1.08);
}
.genimg-logo-btn svg{width:24px;height:24px}

/* ── MESSAGE D'AIDE STORYBOARD ── */
.sb-aide{
  display:flex;align-items:flex-start;gap:8px;
  background:rgba(250,148,16,0.1);border:1px solid rgba(250,148,16,0.3);
  border-radius:10px;padding:14px 16px;margin:18px 0;
  font-family:'Poppins',sans-serif;font-size:0.85rem;line-height:1.55;
  color:var(--gold-light);
}

/* Statut d'avancement du storyboard généré par lots ("X/Y plans") */
.sb-statut{
  font-family:'Poppins',sans-serif;font-size:0.85rem;color:var(--gold-light);
  margin-bottom:14px;
}

/* ── BOUTON RÉGÉNÉRER dans le storyboard ── */
.sb-regen{
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.1em;text-transform:lowercase;
  background:transparent;color:var(--gold-light);
  border:1px solid rgba(250,148,16,0.4);
  padding:0 18px;height:40px;border-radius:999px;cursor:pointer;transition:all 0.2s;
  display:inline-flex;align-items:center;gap:6px;margin:0 8px;
}
.sb-regen:hover{background:rgba(250,148,16,0.12);border-color:var(--gold)}

/* ── TOAST RÉGÉNÉRATION ── */
.regen-toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--bg-card);border:1px solid var(--gold);
  color:var(--gold-light);font-family:'Poppins',sans-serif;font-size:0.85rem;
  padding:12px 22px;border-radius:18px;z-index:600;
  opacity:0;transition:all 0.3s ease;pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);
  max-width:min(92vw,420px);white-space:normal;text-align:center;line-height:1.4;
}
.regen-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── APPARITION PROGRESSIVE DES RÉSULTATS ── */
@keyframes sbFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sb-appear { animation: sbFadeUp 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) { .sb-appear { animation: none; } }

/* Apparition des écrans (navigation) : même style que les résultats, plus rapide */
.screen-appear { animation: screenFade 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) { .screen-appear { animation: none; } }
@keyframes screenFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Séparateur discret entre les plans du storyboard */
.storyboard-list .sb-segment + .sb-segment,
.storyboard-grid .sb-segment + .sb-segment {
  border-top: 1px solid rgba(255,255,255,0.07);
}

@keyframes seriePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(250,148,16,0),0 0 10px 0 rgba(250,148,16,0.12)}
  50%{box-shadow:0 0 0 1px rgba(250,148,16,0.3),0 0 20px 2px rgba(250,148,16,0.3)}
}
/* Bandeau de statut : halo doré pulsant, réservé aux non-abonnés
   et aux abonnements expirés (incitation à s'abonner / renouveler). */
.gen-counter.pulse{
  animation:seriePulse 2.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .gen-counter.pulse{animation:none;box-shadow:0 0 14px 1px rgba(250,148,16,0.22)}
}
.ctx-note{
  font-size:0.78rem;color:rgba(255,255,255,0.45);line-height:1.5;
  margin-top:10px;text-align:left;
}
/* Séparateur « OU » entre la description écrite du produit et le fichier
   joint. Les deux disent la même chose à Scriptura : décrire son produit OU
   en montrer la photo. Sans ce mot, l'écran laissait croire qu'il fallait
   faire les deux, et le bouton de chargement passait pour une étape de plus. */
.ou-separateur{
  display:flex;align-items:center;gap:12px;margin:14px 0 12px;
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.62rem;letter-spacing:0.24em;
  color:var(--gold);opacity:0.7;
}
.ou-separateur::before,.ou-separateur::after{
  content:'';flex:1;height:1px;background:rgba(250,148,16,0.22);
}
.serie-section-label{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.22em;text-transform:lowercase;
  color:var(--gold);opacity:0.75;margin:6px 2px 14px;display:flex;align-items:center;gap:12px;
}
.serie-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(250,148,16,0.25),transparent)}
.serie-card{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:16px;
  padding:18px;margin-bottom:12px;cursor:pointer;transition:border-color .2s,background .2s;
}
.serie-card:hover{border-color:var(--border);background:rgba(250,148,16,0.05)}
.serie-card-titre{font-size:0.98rem;font-weight:700;color:var(--gold-light);margin-bottom:6px}
.serie-card-concept{font-size:0.87rem;color:var(--muted);line-height:1.5;margin-bottom:12px}
.serie-card-bas{display:flex;justify-content:space-between;align-items:center;gap:12px}
.serie-progress-txt{font-size:0.82rem;color:var(--text-secondary);white-space:nowrap}
.serie-progress-bar{flex:1;height:6px;background:rgba(255,255,255,0.07);border-radius:6px;overflow:hidden;display:block}
.serie-progress-fill{display:block;height:100%;min-height:6px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:6px;transition:width .6s ease}
.serie-badge-fini{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:3px 9px;border-radius:20px}
.serie-suggest-btn{
  display:block;width:100%;margin-top:10px;padding:11px;border-radius:12px;
  background:rgba(255,255,255,0.05);border:1px solid var(--border-soft);color:var(--gold-light);
  font-family:'Poppins',sans-serif;font-size:0.86rem;cursor:pointer;transition:background .2s;
}
.serie-suggest-btn:hover{background:rgba(250,148,16,0.1)}
.serie-concept-prop{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:14px;
  padding:16px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,background .2s;
}
.serie-concept-prop:hover{border-color:var(--gold);background:rgba(250,148,16,0.07)}
.serie-concept-prop b{display:block;color:var(--gold-light);font-size:0.94rem;margin-bottom:5px}
.serie-concept-prop span{font-size:0.86rem;color:var(--muted);line-height:1.5}
.serie-episode{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:14px;
  padding:16px;margin-bottom:10px;
}
.serie-episode-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.serie-episode-num{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.62rem;letter-spacing:0.18em;color:var(--gold)}
.serie-episode-titre{font-size:0.96rem;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.4}
.serie-episode-txt{font-size:0.89rem;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap}
.serie-directives{margin-top:14px;padding:14px;background:rgba(250,148,16,0.06);border:1px solid var(--border-soft);border-radius:12px}
.serie-directives-titre{font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.14em;text-transform:lowercase;color:var(--gold);margin-bottom:8px}
.serie-sb-btn{margin-top:14px;width:100%}
.serie-storyboard{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
.serie-sb-titre{font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.14em;text-transform:lowercase;color:var(--gold);margin-bottom:12px}
.serie-sb-plan{background:rgba(255,255,255,0.02);border:1px solid var(--border-soft);border-radius:10px;padding:12px;margin-bottom:10px}
.serie-sb-num{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.58rem;letter-spacing:0.12em;color:var(--gold-light);margin-bottom:6px}
.serie-sb-visuel{font-size:0.87rem;color:#fff;line-height:1.5;margin-bottom:6px}
.serie-sb-texte,.serie-sb-voix{font-size:0.82rem;color:var(--muted);line-height:1.5;margin-top:3px}

/* ── MODE AUDIT TIKTOK ── */
.hero-mode-btn.audit .mode-icon{filter:saturate(0.9)}
/* Filet doré rotatif : une lumière fait le tour du cadre, sens horaire */
.hero-mode-btn.audit{
  position:relative;
  background:transparent;
  border-color:transparent;
  overflow:hidden;
  isolation:isolate;
}
/* Le dégradé conique qui tourne, derrière tout */
.hero-mode-btn.audit::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:150%;
  aspect-ratio:1;
  background:conic-gradient(from 0deg,
    rgba(250,148,16,0.18) 0deg,
    rgba(250,148,16,0.18) 240deg,
    rgba(250,148,16,0.55) 300deg,
    #FDB71E 332deg,
    rgba(250,148,16,0.55) 346deg,
    rgba(250,148,16,0.18) 360deg);
  animation:auditSpin 3.5s linear infinite;
  z-index:0;
}
/* Le fond intérieur : masque le dégradé et ne laisse qu'un liseré de 1px */
.hero-mode-btn.audit::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:13px;
  background:linear-gradient(rgba(250,148,16,0.08),rgba(250,148,16,0.08)),var(--bg);
  z-index:1;
  transition:background 0.3s ease;
}
.hero-mode-btn.audit:hover::after{
  background:linear-gradient(rgba(250,148,16,0.14),rgba(250,148,16,0.14)),var(--bg);
}
/* Le contenu passe au-dessus des deux couches */
.hero-mode-btn.audit > *{position:relative;z-index:2}
.hero-mode-btn.audit .mode-label{color:var(--gold-light)}
.hero-mode-btn.audit .mode-badge{
  align-self:flex-start;
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;
  color:#241d0a;background:linear-gradient(120deg,var(--gold),var(--gold-light));
  padding:3px 9px;border-radius:20px;font-weight:600;margin-bottom:2px;
}
/* Émeraude réservé au palier au-dessus (voir --emerald, en tête de fichier) :
   même forme que le badge doré ci-dessus, réutilisée pour marquer un mode
   Pro-only (Tendances) plutôt qu'inventer une nouvelle variante de badge. */
.hero-mode-btn .mode-badge.mode-badge-pro{
  align-self:flex-start;
  font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;
  color:#fff;background:var(--emerald-light);
  padding:3px 9px;border-radius:20px;font-weight:600;margin-bottom:2px;
}
@keyframes auditSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .hero-mode-btn.audit::before{animation:none;background:rgba(250,148,16,0.5)}
}

.audit-guide{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-soft);
  border-radius:12px;padding:22px 20px;margin-bottom:24px;
}
.audit-guide-title{
  font-family:'Poppins',sans-serif;font-size:0.66rem;letter-spacing:0.16em;
  text-transform:lowercase;color:var(--gold);margin-bottom:18px;
}
.audit-steps{list-style:none;counter-reset:cap;display:grid;gap:14px;padding:0;margin:0}
.audit-steps li{
  counter-increment:cap;position:relative;
  padding-left:34px;
}
.audit-steps li::before{
  content:counter(cap);
  position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(250,148,16,0.4);
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.6rem;color:var(--gold);
}
.audit-steps li b{
  display:block;font-family:'Poppins',sans-serif;font-weight:400;
  font-size:0.92rem;color:#F5F3EE;margin-bottom:4px;line-height:1.35;
}
.audit-steps li span{
  display:block;font-size:0.8rem;color:rgba(255,255,255,0.5);line-height:1.45;
}
.audit-note{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);
  font-size:0.8rem;color:rgba(255,255,255,0.45);line-height:1.5;
}

/* Assistant de capture guidé (mode audit) : une donnée à la fois */
.audit-wizard{margin-bottom:22px}
.aw-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.aw-count{font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.14em;text-transform:lowercase;color:var(--gold);white-space:nowrap}
.aw-bar{flex:1;height:4px;border-radius:3px;background:rgba(250,148,16,0.15);overflow:hidden}
.aw-bar-fill{height:100%;background:var(--gold);border-radius:3px;transition:width 0.35s ease}
.aw-card{background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:14px;padding:22px 20px}
.aw-schema{display:flex;justify-content:center}
.aw-schema svg{width:100%;max-width:220px;height:auto}
.aw-schema-note{text-align:center;font-size:0.68rem;color:rgba(255,255,255,0.55);margin-top:4px;margin-bottom:16px;font-style:italic}
.aw-title{font-family:'Poppins',sans-serif;font-size:1.02rem;color:#F5F3EE;line-height:1.35;margin-bottom:12px;text-align:center}
.aw-path{font-size:0.85rem;color:var(--text-secondary);line-height:1.55;text-align:center;background:rgba(250,148,16,0.06);border:1px solid var(--border-soft);border-radius:10px;padding:12px 14px}
.aw-tip{font-size:0.8rem;color:rgba(255,255,255,0.45);line-height:1.5;text-align:center;margin-top:12px}
.aw-ex{margin-top:18px}
.aw-ex-titre{font-family:'Poppins',sans-serif;font-size:0.64rem;letter-spacing:0.1em;text-transform:lowercase;color:var(--gold-light);text-align:center;margin-bottom:12px}
.aw-ex-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.aw-ex-item{flex:1 1 150px;max-width:200px;margin:0}
.aw-ex-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border-soft);display:block;background:#000}
.aw-ex-item figcaption{font-size:0.72rem;color:rgba(255,255,255,0.5);line-height:1.4;text-align:center;margin-top:8px}
.aw-statut{display:block;text-align:center;margin-top:14px;font-size:0.82rem;line-height:1.5;border-radius:10px;padding:10px 14px}
.aw-statut.ok{color:#8FE0A0;background:rgba(80,200,120,0.08);border:1px solid rgba(80,200,120,0.25)}
.aw-statut.attente{color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.04);border:1px solid var(--border-soft)}
.aw-statut.alerte{color:#E8C06A;background:rgba(250,148,16,0.08);border:1px solid rgba(250,148,16,0.3)}
.aw-nav{display:flex;gap:12px;margin-top:16px}
.aw-nav button{flex:1;padding:13px 16px;border-radius:10px;font-family:'Poppins',sans-serif;font-size:0.68rem;letter-spacing:0.1em;text-transform:lowercase;cursor:pointer;transition:border-color 0.2s,color 0.2s,background 0.2s;border:1px solid var(--border-soft);background:transparent;color:var(--text-secondary)}
.aw-nav button:hover{border-color:var(--gold);color:var(--gold-light)}
.aw-nav button.aw-primary{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.aw-nav button.aw-primary:hover{background:var(--gold-light)}

.audit-drop{
  border:1px dashed rgba(250,148,16,0.35);border-radius:12px;
  padding:34px 20px;text-align:center;cursor:pointer;
  transition:border-color 0.25s,background 0.25s;margin-bottom:18px;
}
.audit-drop:hover,.audit-drop.actif{
  border-color:var(--gold);background:rgba(250,148,16,0.05);
}
.audit-drop-icon{font-size:1.8rem;margin-bottom:10px}
.audit-drop-label{
  font-family:'Poppins',sans-serif;font-size:0.72rem;letter-spacing:0.12em;
  text-transform:lowercase;color:var(--gold);margin-bottom:6px;
}
.audit-drop-sub{font-size:0.82rem;color:rgba(255,255,255,0.45)}

.audit-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.audit-thumb{
  position:relative;width:76px;height:76px;border-radius:8px;overflow:hidden;
  border:1px solid var(--border-soft);
}
.audit-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Plan dont l'image est prête, dans le panneau de montage : contour émeraude,
   comme la pastille de compte (.montage-chip-pret plus bas). D'un coup d'œil
   sur la bande de vignettes, on voit ce qui est prêt et ce qui manque, sans
   avoir à lire. */
.audit-thumb.montage-thumb-prete{border-color:var(--emerald-border)}
/* Badge de reconnaissance sur la vignette (informatif, jamais bloquant) */
.thumb-badge{
  position:absolute;left:4px;bottom:4px;font-size:0.72rem;line-height:1;
  padding:3px 5px;border-radius:6px;background:rgba(0,0,0,0.65);
}
.thumb-badge.attente{color:rgba(255,255,255,0.6);letter-spacing:1px}
.thumb-badge.ok{background:rgba(30,90,50,0.75)}
.thumb-badge.alerte{background:rgba(120,80,20,0.8)}
/* Récapitulatif des données reconnues */
.audit-couverture{margin-top:14px}
.audit-manquantes{margin:0;padding-left:20px}
.audit-manquantes li{font-size:0.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:10px}
.audit-refaire{width:100%;margin-top:16px}
.audit-couverture:empty{display:none}
.couv-titre{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.16em;
  text-transform:lowercase;color:var(--gold);margin-bottom:10px;
}
.couv-ligne{font-size:0.86rem;line-height:1.9;color:var(--text-secondary)}
.couv-ligne.manque{color:rgba(255,255,255,0.55)}
.couv-note{
  margin-top:10px;padding:10px 12px;border-radius:8px;
  background:rgba(250,148,16,0.07);border:1px solid var(--border-soft);
  font-size:0.8rem;color:var(--muted);line-height:1.5;
}
.audit-thumb-del{
  position:absolute;top:3px;right:3px;width:20px;height:20px;
  border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;border:none;
  font-size:0.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  line-height:1;padding:0;
}
.audit-thumb-del:hover{background:rgba(200,60,60,0.9)}

/* ── PANNEAU MONTAGE VIDÉO (fondateur uniquement) ──
   Panneau en ligne (pas une boîte de dialogue) : déplacé juste après le
   bouton "Générer la vidéo" qui l'a ouvert (voir ouvrirMontage() dans
   js/montage.js), s'affiche comme une extension du storyboard. Aucun
   moyen de le fermer, ce n'est pas voulu. */
.montage-panel{
  display:none;text-align:left;max-width:480px;
  background:none;border:none;
  padding:26px 0;margin-top:16px;
}
.montage-panel.active{display:block}
.montage-panel .genimg-title,.montage-panel .genimg-sub{text-align:left}

/* Chaque étape (images / voix off / musique) devient une vraie carte
   délimitée (fond + bord + hairline dorée en haut, même codex que
   .context-card plus haut) plutôt qu'un simple label suivi de contrôles à
   plat : retour propriétaire, le montage "ne fait pas assez premium" à
   côté d'un éditeur comme CapCut, cause identifiée : aucune hiérarchie
   visuelle entre les étapes, ni entre un bouton principal et un bouton
   annexe (tous en .btn-regenerate, même poids). */
.montage-section{
  margin-top:16px;background:var(--bg-card);border:1px solid var(--border-soft);
  border-radius:12px;padding:20px;position:relative;
}
.montage-section:first-of-type{margin-top:28px}

/* ══ SUR PC, LES BLOCS SE METTENT CÔTE À CÔTE ══
   Retour du propriétaire, capture d'un portable à l'appui : « au lieu que ce
   soit empilé, le mettre sur la même ligne ». Il a raison. L'app est écrite
   pour le téléphone, donc en colonne étroite, et sur un écran de 1366 px
   cette colonne de 560 px laisse 400 px de vide de chaque côté pendant qu'on
   fait défiler trois blocs qui tiendraient largement sur deux rangs.
   Les blocs de montage (Images, Voix off, Musique, Sous-titres…) sont
   INDÉPENDANTS les uns des autres : rien n'oblige à les lire dans l'ordre,
   ils peuvent donc vivre côte à côte sans perdre leur sens.
   CE QUI RESTE EN COLONNE ÉTROITE, volontairement : les titres et les textes
   d'explication. Une ligne de texte trop longue se lit mal, c'est la règle la
   plus ancienne de la typographie ; élargir la colonne de lecture aurait
   dégradé l'app au lieu de l'améliorer. D'où la mise en page où TOUT occupe
   la largeur entière par défaut, et où seuls les blocs se rangent en deux.
   POURQUOI FLEX ET NON UNE GRILLE : retour du propriétaire, capture à
   l'appui, « si le nombre de cartes est impair, centrer la dernière en bas
   des autres, pas sous une carte précise ». Dans une grille, la carte
   solitaire se colle mécaniquement dans la première colonne, sous celle du
   dessus : on lit un alignement qui ne veut rien dire. En flex, deux cartes
   remplissent exactement leur rang (le centrage n'y change donc rien) et
   celle qui reste seule se centre d'elle-même. Ça marche pour trois cartes
   comme pour cinq ou sept, sans compter les cartes en CSS, ce qu'aucune
   règle ne sait faire proprement. */
@media(min-width:1024px){
  #montageManuelFlow .ds-wrap,
  #montageFlow .ideas-container,
  #flow .ideas-container:has(.montage-section){
    max-width:1040px;
    display:flex;flex-wrap:wrap;align-items:flex-start;
    gap:0 20px;
  }
  #montageManuelFlow .ds-wrap > *,
  #montageFlow .ideas-container > *,
  #flow .ideas-container:has(.montage-section) > *{flex:0 0 100%;min-width:0}
  /* calc(50% - 10px) : deux cartes plus l'espace de 20 px font exactement la
     largeur du rang, donc les rangs pleins restent alignés bord à bord. */
  #montageManuelFlow .ds-wrap > .montage-section,
  #montageFlow .ideas-container > .montage-section,
  #flow .ideas-container:has(.montage-section) > .montage-section{
    flex:0 1 calc(50% - 10px);
    /* Le centrage se joue ICI et pas sur le conteneur : une carte seule sur
       son rang a de la place libre autour d'elle, les marges automatiques la
       partagent en deux et la carte se centre. Sur un rang plein il n'y a
       aucune place libre, donc elles ne font rien et les deux cartes restent
       bord à bord. Un justify-content sur le conteneur, lui, décalait aussi
       le bouton « Retour » et les titres, dont la marge négative de zone
       tactile crée un peu de place libre sur leur propre rang. */
    margin-left:auto;margin-right:auto;
  }
  /* Les marges verticales des blocs viennent de margin-top : sur deux
     colonnes, le premier bloc de CHAQUE rang doit garder la même. */
  #montageManuelFlow .ds-wrap > .montage-section,
  #flow .ideas-container:has(.montage-section) > .montage-section{margin-top:20px}
  /* Le bloc de fin (options, barre de progression, « Démarrer le montage »)
     s'étend sur les deux colonnes, mais il ne DOIT pas s'étirer sur 1040 px :
     un interrupteur avec son libellé à un bout et sa bascule à l'autre se lit
     mal, et un bouton d'action large comme l'écran ne se vise pas mieux. On
     le recentre à la largeur d'origine. */
  #montageManuelFlow .montage-finish,
  #montageFlow .montage-finish{max-width:620px;margin-left:auto;margin-right:auto}

  /* ── LE MÊME PRINCIPE DANS TOUS LES FORMULAIRES ──
     « Et je crois qu'il doit en être pareil au niveau de toute l'app. »
     Les cartes de contexte (script, récit, série, carrousel, idées,
     storyboard, analyse) empilent jusqu'à sept champs dont cinq listes
     déroulantes courtes : niche, audience, format, ton, durée. Sur un
     portable, ça fait défiler pour rien.
     LA RÈGLE EST CHOISIE SUR LA NATURE DU CHAMP, pas sur son rang : un
     champ à liste déroulante tient dans une demi-largeur (330 px, presque
     l'écran d'un téléphone), un champ où l'on ÉCRIT garde toute la
     largeur. C'est ce qui fait qu'un nouveau champ ajouté demain se range
     tout seul du bon côté, sans qu'on ait à y penser.
     La carte ne s'élargit pas : on range mieux les 684 px déjà là plutôt
     que d'étirer la colonne de lecture des résultats. */
  .context-card{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start}
  .context-card > *{grid-column:1 / -1}
  .context-card > .ctx-field:has(select, input[type=text]):not(:has(textarea)):not(:has(.ds-field)):not(:has(button:not(.custom-select-trigger):not(.grid-btn))){
    grid-column:auto;
  }
}
/* PAS de overflow:hidden sur .montage-section (retour propriétaire, capture
   à l'appui) : le menu déroulant maison (.custom-select-panel, voir plus
   bas) se positionne en absolu par rapport à la carte et doit pouvoir
   déborder pour s'ouvrir normalement, sinon il se retrouve coupé par les
   bords de la carte, illisible et non défilable. Le dégradé ci-dessous
   s'estompe déjà vers transparent à ses extrémités (même codex que
   .context-card plus haut, jamais eu besoin d'un clip pour rester propre
   sur des coins arrondis). */
.montage-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.montage-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:16px;
}
.montage-section-title{display:flex;align-items:center;gap:10px;min-width:0}
.montage-section-title .ico{color:var(--gold);width:17px;height:17px;flex-shrink:0}
.montage-section-label{
  font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.12em;
  text-transform:lowercase;color:var(--gold);margin:0;
}
.montage-section-optional{
  font-size:0.68rem;color:var(--muted);text-transform:none;letter-spacing:0;
  font-family:'Poppins',sans-serif;font-weight:400;
}
/* Pastille d'état à droite de chaque en-tête (retour propriétaire : donner
   un vrai repère d'avancement, dans le même esprit que les points d'étape
   de l'onboarding, voir .sdot plus haut dans ce fichier). */
.montage-chip{
  font-family:'Poppins',sans-serif;font-size:0.68rem;font-weight:500;
  padding:3px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0;
  background:rgba(255,255,255,0.06);color:var(--muted);
  border:1px solid rgba(255,255,255,0.1);transition:all 0.2s;
}
.montage-chip.montage-chip-pret{background:var(--emerald-pale);color:var(--emerald-light);border-color:var(--emerald-border)}

.montage-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.montage-field + .montage-field{margin-top:12px}
.montage-field-label{font-size:0.78rem;color:var(--text-secondary)}

.montage-audio-preview{width:100%;display:block}

/* Bouton d'action PRINCIPALE d'une étape (Générer les images / la voix off
   / une musique de fond) : rempli, contrairement aux actions annexes qui
   restent en style fantôme (.btn-regenerate) juste à côté. Reprend le
   traitement de .hero-btn (déjà le bouton "premium" de la page d'accueil)
   plutôt que d'inventer un nouveau style pour rester cohérent avec le
   reste du site. */
.btn-montage-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Poppins',sans-serif;font-size:0.62rem;font-weight:500;
  /* text-transform:uppercase, PAS lowercase : même correctif que
     .btn-regenerate ci-dessus, même cause (Cinzel→Poppins a emporté la casse
     de ce bouton avec le reste), même garde-fou (tests/montage-deux-
     rangees-memes-mots.test.js compare ce bouton à son jumeau de la voix off,
     resté en majuscules). */
  letter-spacing:0.13em;text-transform:uppercase;
  background:var(--gold);color:var(--bg);border:none;
  padding:12px 22px;border-radius:999px;cursor:pointer;transition:all 0.25s;
}
.btn-montage-primary:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 10px 26px rgba(250,148,16,0.22)}
.btn-montage-primary:disabled{opacity:0.4;cursor:default;transform:none;box-shadow:none}

/* Bouton icône seule (retour propriétaire : "supprimer la sélection" sans
   texte, à côté de "Tout sélectionner") : même famille visuelle que
   .btn-regenerate (fantôme, bordure dorée fine) mais circulaire, sans
   libellé, pour une action secondaire compacte répétée peu souvent. */
.btn-montage-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;
  background:transparent;border:1px solid var(--border);color:var(--gold);
  cursor:pointer;transition:all 0.2s;
}
.btn-montage-icon .ico{width:16px;height:16px}
.btn-montage-icon:hover{background:var(--gold-pale);border-color:var(--gold)}
.btn-montage-icon:disabled{opacity:0.4;cursor:default}

/* Interrupteur (sous-titres) : même <input type="checkbox"> qu'avant (même
   id, .checked inchangé, tests existants intacts, voir
   tests/montage-sous-titres-case-a-cocher.test.js qui ne lit jamais que
   .checked), seulement redessiné en interrupteur plutôt que la case système. */
.montage-toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.montage-toggle-label{font-size:0.86rem;color:var(--text-secondary);display:flex;align-items:center;gap:9px;cursor:pointer}
.montage-toggle-label .ico{color:var(--gold);width:16px;height:16px;flex-shrink:0}
.montage-toggle-note{opacity:0.7;font-size:0.78rem}
.montage-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.montage-toggle input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.montage-toggle-track{
  position:absolute;inset:0;background:rgba(255,255,255,0.14);border-radius:999px;
  transition:background 0.2s;pointer-events:none;
}
.montage-toggle-track::before{
  content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform 0.2s;
}
.montage-toggle input:checked ~ .montage-toggle-track{background:var(--gold)}
.montage-toggle input:checked ~ .montage-toggle-track::before{transform:translateX(18px)}
/* Sous-titres indisponibles pour une voix off importée (voir omMajCaseSousTitres,
   js/montage-manuel.js) : grise le curseur, jamais juste le laisser cliquable
   sans effet. */
.montage-toggle input:disabled{cursor:not-allowed}
.montage-toggle input:disabled ~ .montage-toggle-track{opacity:0.4;cursor:not-allowed}
.montage-toggle-row:has(input:disabled) .montage-toggle-label{opacity:0.55;cursor:default}

/* Ligne d'arrivée du panneau : séparée par une hairline, CTA finale bien
   plus large (contrairement aux actions annexes) pour qu'elle se voie
   comme LE bouton qui termine le montage, pas un bouton parmi d'autres. */
.montage-finish{margin-top:24px;padding-top:22px;border-top:1px solid var(--border-soft)}
.btn-montage-lancer{width:100%;padding:16px;font-size:0.7rem;letter-spacing:0.16em;margin-top:18px}
.montage-thumb-echec{
  display:flex;align-items:center;justify-content:center;gap:14px;
  border:1px dashed rgba(224,85,85,0.5);background:rgba(224,85,85,0.08);
}
.montage-thumb-retry{
  color:#e05555;font-size:1.3rem;cursor:pointer;line-height:1;
}
.montage-thumb-retry:hover{color:#ff7a7a}
.montage-thumb-upload{
  background:transparent;border:none;color:var(--gold-light);
  font-size:1.2rem;cursor:pointer;line-height:1;padding:0;
}
.montage-thumb-upload:hover{color:var(--gold)}
.montage-thumb-attente{
  border:1px dashed var(--border-soft);background:rgba(250,148,16,0.06);
  animation:montage-attente-pulse 1.4s ease-in-out infinite;
}
@keyframes montage-attente-pulse{0%,100%{opacity:0.4}50%{opacity:0.9}}
.montage-thumb-select{
  position:absolute;top:4px;left:4px;width:17px;height:17px;margin:0;
  accent-color:var(--gold);cursor:pointer;
}
.montage-statut{
  margin-top:14px;padding:10px 12px;border-radius:8px;
  background:rgba(250,148,16,0.07);border:1px solid var(--border-soft);
  font-size:0.86rem;color:var(--muted);text-align:center;
}
.montage-video{width:100%;border-radius:10px;margin-top:16px;display:block;background:#000}

/* ── AGRANDISSEMENT D'IMAGE (LIGHTBOX) ── */
.montage-lightbox{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.92);
  align-items:center;justify-content:center;padding:24px;
}
.montage-lightbox.active{display:flex}
.montage-lightbox img{
  max-width:100%;max-height:100%;
  border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.6);
  object-fit:contain;
}
.montage-lightbox-close{
  position:absolute;top:16px;right:18px;width:40px;height:40px;
  border-radius:50%;background:rgba(255,255,255,0.12);color:#fff;border:none;
  font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.montage-lightbox-close:hover{background:rgba(255,255,255,0.25)}
#montageLancerBtn{width:100%}

/* ── RÉSULTAT DE L'AUDIT (noir & or) ── */
.audit-result{margin-top:28px;display:grid;gap:28px}
.audit-score-card{
  background:linear-gradient(135deg,var(--gold-pale),rgba(250,148,16,0.04));
  border:1px solid var(--border);border-radius:20px;padding:34px 24px 30px;text-align:center;
  position:relative;overflow:hidden;
}
.audit-score-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(250,148,16,0.10),transparent 60%);
}
.audit-score-label{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.62rem;letter-spacing:0.24em;color:var(--gold);opacity:0.8;margin-bottom:14px}
/* Anneau de score animé */
.audit-ring-wrap{position:relative;width:170px;height:170px;margin:4px auto 2px}
.audit-ring{width:100%;height:100%;transform:rotate(-90deg)}
.audit-ring-track{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:9}
.audit-ring-fill{fill:none;stroke:url(#auditRingGrad);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1)}
.audit-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.audit-score-num{font-family:'Playfair Display',serif;font-size:3.4rem;font-weight:700;line-height:1;color:var(--gold-light)}
.audit-score-suffix{font-size:1.15rem;font-weight:500;color:rgba(255,255,255,0.4)}
.audit-score-phrase{margin-top:14px;font-size:0.95rem;color:var(--text-secondary);line-height:1.55;max-width:34ch;margin-left:auto;margin-right:auto}

/* Tes 3 axes prioritaires (digest actionnable, sous le score) */
.audit-prio{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:16px;padding:20px 20px 6px;margin-top:4px}
.audit-prio-titre{font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.2em;text-transform:lowercase;color:var(--gold);opacity:0.85;margin-bottom:16px}
.audit-prio-item{display:flex;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border-soft)}
.audit-prio-item:last-child{border-bottom:none}
.audit-prio-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;color:var(--bg);background:linear-gradient(135deg,var(--gold),var(--gold-light));font-size:1rem}
.audit-prio-body{flex:1;min-width:0}
.audit-prio-t{font-family:'Poppins',sans-serif;font-size:1rem;color:#F5F3EE;line-height:1.35;margin-bottom:5px}
.audit-prio-why{font-size:0.9rem;color:var(--text-secondary);line-height:1.5}
.audit-prio-action{font-size:0.9rem;color:var(--gold-light);line-height:1.5;margin-top:6px}

/* Graphique radar des 5 dimensions */
.audit-radar-wrap{display:flex;justify-content:center;padding:6px 0 2px}
.audit-radar{width:100%;max-width:280px;height:auto}
.audit-radar-grid{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:1}
.audit-radar-spoke{stroke:rgba(255,255,255,0.08);stroke-width:1}
.audit-radar-shape{fill:rgba(250,148,16,0.18);stroke:var(--gold-light);stroke-width:2;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity 1s ease}
.audit-radar-dot{fill:var(--gold-light)}
.audit-radar-label{fill:var(--text-secondary);font-size:10px;font-family:'Poppins',sans-serif}
.audit-radar-val{fill:var(--gold-light);font-size:10px;font-weight:700;font-family:'Poppins',sans-serif}

/* Séparateur de section : donne un rythme au lieu d'une pile uniforme */
.audit-section-label{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.22em;text-transform:lowercase;
  color:var(--gold);opacity:0.7;margin:8px 2px -8px;display:flex;align-items:center;gap:12px;
}
.audit-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(250,148,16,0.25),transparent)}

.audit-block{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:16px;padding:22px}
.audit-block-title{font-size:0.98rem;font-weight:700;color:var(--gold-light);margin-bottom:16px;letter-spacing:0.02em}
.audit-diag-constat{font-size:0.94rem;color:#fff;font-weight:600;line-height:1.55;margin-bottom:10px}
.audit-diag-interp{font-size:0.89rem;color:var(--muted);line-height:1.55;margin-bottom:10px}
.audit-diag-action{font-size:0.9rem;color:var(--gold-light);line-height:1.55;margin-top:8px;padding-top:12px;border-top:1px solid var(--border-soft)}
/* Comparatif meilleure / pire */
.audit-vs{display:grid;gap:14px}
.audit-vs-col{border-radius:14px;padding:16px;border:1px solid var(--border-soft)}
.audit-vs-best{background:rgba(250,148,16,0.07)}
.audit-vs-worst{background:rgba(217,101,112,0.07);border-color:rgba(217,101,112,0.22)}
.audit-vs-tag{font-size:0.84rem;font-weight:700;color:#fff;margin-bottom:9px}
.audit-vs-text{font-size:0.89rem;color:var(--text-secondary);line-height:1.55}
.audit-vs-formule{font-size:0.89rem;color:var(--gold-light);margin-top:9px;line-height:1.55}
/* Abonnés gagnés par une vidéo (conversion spectateur → abonné) */
.audit-vs-fol{
  display:inline-block;margin-top:11px;padding:5px 11px;border-radius:999px;
  font-size:0.82rem;font-weight:600;color:var(--gold-light);
  background:rgba(250,148,16,0.10);border:1px solid var(--border-soft);line-height:1.4;
}
.audit-vs-concl{margin-top:14px;font-size:0.94rem;color:#fff;font-weight:600;line-height:1.55;text-align:center;padding-top:14px;border-top:1px solid var(--border-soft)}
.audit-vs-repres{margin-top:10px;font-size:0.85rem;color:var(--muted);line-height:1.5;text-align:center}
/* Éditorial : notes par sujet */
.audit-sujets{display:grid;gap:10px;margin-bottom:14px}
.audit-sujet{display:flex;justify-content:space-between;align-items:center;font-size:0.9rem;color:var(--text-secondary);padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
/* Ligne de mode cliquable dans la carte "Échecs de génération" (voir
   toggleDetailErreursMode, js/admin.js) : voir ce qui s'est réellement
   passé, pas seulement un compte. */
.erreur-mode-ligne{cursor:pointer}
.erreur-mode-ligne:hover{color:var(--white)}
.erreur-detail-liste{padding:2px 0 10px 4px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,0.05)}
.erreur-detail-item{display:flex;flex-direction:column;gap:2px;padding:8px 0 8px 10px;border-left:2px solid rgba(248,113,113,0.35);font-size:0.82rem}
.erreur-detail-item+.erreur-detail-item{margin-top:2px}
.erreur-detail-quand{color:rgba(255,255,255,0.4);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em}
.erreur-detail-texte{color:var(--text-secondary)}
.audit-sujet b{color:var(--gold-light)}
/* Générations par mode (tableau de bord admin) : grille à colonnes fixes
   (Fondateur/Pro/Creator) au lieu d'une ligne de texte par plan, pour
   comparer les modes d'un coup d'œil (voir chargerCarteModes, js/admin.js). */
/* Enveloppe scrollable (retour propriétaire : la colonne "Non-abonné"
   sortait de l'écran, invisible, sur certains navigateurs mobiles) : la
   grille garde une largeur minimale fixe, le débordement glisse au doigt
   plutôt que de comprimer les colonnes jusqu'à en perdre une. */
.admin-modes-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Tableau volontairement PLUS LARGE que l'écran, on le fait glisser.
   Essayé en version compacte qui tenait entière sur un téléphone (colonnes
   élastiques, en-têtes rétrécis), retiré à la demande du propriétaire :
   « laisse ça glissable comme ça, c'est le fondateur seul qui y a accès donc
   il sait qu'il faut glisser ». L'argument est juste, cet écran n'a qu'un
   seul utilisateur, et des colonnes larges se lisent mieux que des colonnes
   comprimées. Ne pas "corriger" ce débordement sans nouvelle demande : il
   est intentionnel. La colonne des noms de mode reste figée à gauche (voir
   plus bas) pour qu'on sache toujours quelle ligne on lit. */
.admin-modes-table{display:grid;gap:2px;min-width:462px}
.admin-modes-header,.admin-modes-row{
  display:grid;grid-template-columns:minmax(120px,1fr) repeat(5, 56px);align-items:center;gap:6px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.admin-modes-header{
  font-family:'Poppins',sans-serif;font-size:0.56rem;letter-spacing:0.08em;text-transform:lowercase;
  color:var(--muted);border-bottom:1px solid var(--border-soft);padding-bottom:10px;
}
.admin-modes-header span,.admin-modes-row span{text-align:right}
.admin-modes-header span:first-child,.admin-modes-row span:first-child{text-align:left}
.admin-modes-row span:first-child{font-size:0.9rem;color:var(--text-secondary)}
.admin-modes-row span:not(:first-child){font-weight:600;color:var(--gold-light)}
/* Colonne des noms de mode figée (retour propriétaire : en glissant vers
   "Non-abonné", on perdait de vue à QUEL mode correspond la ligne). Seules
   les colonnes de chiffres défilent, le nom du mode reste toujours visible
   à gauche, comme une 1re colonne gelée de tableur. */
.admin-modes-header span:first-child,.admin-modes-row span:first-child{
  position:sticky;left:0;background:var(--bg-card);padding-right:8px;z-index:1;
}
/* Détail "non-abonnés en ligne" (pays · navigateur, combinaisons
   regroupées, voir chargerDetailNonAbonnesAdmin, js/admin.js). */
.admin-nonabonnes-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:0.85rem;color:var(--text-secondary)}
.admin-nonabonnes-row span:last-child{font-weight:600;color:var(--gold-light)}
/* Interrupteur actif/inactif (tableau de bord, liste des abonnés) : rond
   qui glisse, doré une fois actif. */
.admin-switch{position:relative;display:inline-block;width:36px;height:20px;flex:0 0 auto}
.admin-switch input{opacity:0;width:0;height:0;position:absolute}
.admin-switch-track{position:absolute;inset:0;background:rgba(255,255,255,0.15);border-radius:999px;cursor:pointer;transition:background .2s}
.admin-switch-track::before{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#F5F3EE;border-radius:50%;transition:transform .2s}
.admin-switch input:checked + .admin-switch-track{background:var(--gold)}
.admin-switch input:checked + .admin-switch-track::before{transform:translateX(16px)}
.admin-switch input:disabled + .admin-switch-track{opacity:0.5;cursor:default}
/* Code cliquable (liste des abonnés) : révèle ses générations par mode. */
.admin-code-clic{cursor:pointer}
.admin-code-clic:hover{color:var(--gold-light)}
.admin-gen-detail{margin:0 0 10px;padding:2px 0 0 14px;border-left:2px solid var(--border-soft)}
/* Plan d'action */
.audit-plan{background:linear-gradient(135deg,var(--gold-pale),rgba(250,148,16,0.03));border-color:var(--border)}
.audit-plan-list{margin:0;padding-left:18px;display:grid;gap:11px}
.audit-plan-list li{font-size:0.9rem;color:var(--text-secondary);line-height:1.55}
.audit-plan-list li b{color:#fff;font-weight:600}
.audit-manquant ul{margin:0;padding-left:20px}
.audit-manquant li{font-size:0.87rem;color:var(--muted);line-height:1.6}
/* Les libellés "Et maintenant ?" et "En plus de ce diagnostic" précèdent ici
   une .score-card (pas un .audit-block) : leur marge négative, pensée pour
   s'imbriquer dans un .audit-block, chevauche sinon la bordure supérieure
   de la carte de recommandation. */
#auditOpportunites .audit-section-label,
#diagSommaireOpportunites .audit-section-label{margin-bottom:14px}
.audit-affiner-btn{margin-top:14px;background:rgba(255,255,255,0.06);color:var(--gold-light);border:1px solid var(--border-soft)}
.audit-affiner-btn:hover{background:rgba(255,255,255,0.1)}
.audit-affine-note{background:var(--gold-pale);border:1px solid var(--border-soft);border-radius:12px;padding:14px 16px;font-size:0.9rem;color:var(--gold-light);line-height:1.5;margin-bottom:18px}

/* ── DIAGNOSTIC SOMMAIRE (@nom d'utilisateur, sans captures) ── */
.ds-wrap{max-width:560px;margin:0 auto;padding:100px 12px 80px}
/* Sélecteur Mon compte / Compte concurrent (analyse sommaire) */
.ds-scope{display:flex;gap:8px;margin-top:26px}
.ds-scope-btn{flex:1;padding:14px 12px;border-radius:999px;border:1px solid var(--border-soft);background:rgba(255,255,255,0.03);color:var(--text-secondary);font-family:'Poppins',sans-serif;font-size:0.62rem;letter-spacing:0.13em;cursor:pointer;transition:all .2s}
.ds-scope-btn.actif{border-color:var(--gold);background:var(--gold-pale);color:var(--gold-light);font-weight:600}
/* La rangée de la section Musique, sur les DEUX écrans de montage. Elle reprend
   la géométrie de la rangée de la voix off ci-dessus : deux boutons de largeur
   égale, côte à côte, même hauteur.
   MESURÉ AVANT, et c'est ce qui a motivé cette règle : en largeurs libres, les
   deux boutons ne tenaient pas sur 414px (168 + 8 + 180 pour 348 disponibles).
   Le second passait à la ligne et s'étalait sur toute la largeur. On avait donc
   deux boutons empilés en face de deux boutons côte à côte, en croyant les
   avoir alignés. */
.montage-musique-choix{display:flex;gap:8px;align-items:stretch}
.montage-musique-choix > *{flex:1 1 0;min-width:0;margin:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:14px 10px}
.ds-scope + .ds-field{margin-top:12px}

.ds-field{display:flex;align-items:center;gap:10px;background:#3A3A3D;border:1px solid rgba(250,148,16,0.35);border-radius:999px;padding:8px 8px 8px 20px;margin-top:26px;transition:border-color .2s}
.ds-field:focus-within{border-color:var(--gold)}
.ds-at{font-family:'Poppins',sans-serif;font-size:1.15rem;color:var(--gold);font-weight:600}
.ds-input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-family:'Poppins',sans-serif;font-size:1rem;min-width:0}
.ds-input::placeholder{color:rgba(255,255,255,0.4)}
.ds-go{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(120deg,var(--gold),var(--gold-light));color:var(--bg);font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.ds-go:hover{transform:scale(1.05)}
.ds-go:disabled{opacity:0.6;cursor:default;transform:none}
.ds-note{display:flex;align-items:flex-start;gap:8px;font-family:'Poppins',sans-serif;font-size:0.82rem;color:rgba(255,255,255,0.55);line-height:1.5;margin-top:16px;text-align:left}
.ds-note-ico{flex:0 0 auto;margin-top:2px;color:var(--gold)}
.ds-sep{display:flex;align-items:center;gap:14px;margin:34px 0 22px;color:rgba(255,255,255,0.55);font-family:'Poppins',sans-serif;font-size:0.58rem;letter-spacing:0.16em;text-transform:lowercase}
.ds-sep::before,.ds-sep::after{content:'';flex:1;height:1px;background:var(--border-soft)}
.ds-alt{background:rgba(255,255,255,0.02);border:1px solid var(--border-soft);border-radius:14px;padding:18px 20px;text-align:left;font-family:'Poppins',sans-serif;font-size:0.9rem;color:var(--text-secondary);line-height:1.55}
.ds-alt strong{color:var(--gold-light);font-weight:600}
/* Le pas suivant est une CARTE à part entière, coincée entre les icônes du
   diagnostic au-dessus et la section « En plus de ce diagnostic » en dessous.
   Sans marge propre, elle collait aux deux (retour du propriétaire, capture à
   l'appui : « c'est trop serré »), parce que .ds-alt n'en porte aucune et que
   le libellé de section suivant ne prévoit que 8px au-dessus de lui.
   24px, exactement le rythme de .score-card : la respiration entre deux blocs
   doit être la même partout, sinon cet écran se met à respirer autrement que
   le reste de l'app. */
.ds-pas-suivant{margin:24px 0}
.ds-alt a{color:var(--gold-light);text-decoration:underline;cursor:pointer;white-space:nowrap}

/* ── OUTILS TIKTOK (services annexes : transcription / téléchargement) ──
   Boutons dans le même style que .ds-scope-btn (bascule "Mon compte /
   Compte concurrent" du diagnostic sommaire) : ici deux actions distinctes
   plutôt qu'un choix exclusif, donc aucune des deux ne porte .actif par
   défaut. Ajustement scopé (gap icône/texte, sans toucher .ds-scope-btn
   partagé avec le diagnostic sommaire). */
.outils-btn-row.ds-scope .ds-scope-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0}
/* Le libellé ne doit jamais passer à la ligne : les deux boutons sont côte
   à côte à largeur égale (flex:1), un texte qui s'enroule sur 2 lignes ferait
   grandir tout le bouton (et son voisin, même hauteur), un redimensionnement
   gênant au clic. Coupé proprement (…) plutôt que débordé si jamais trop long. */
#outilsTranscriptionBtnText,#outilsTelechargementBtnText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Le spinner (.sb-gen-spinner) est conçu pour un fond doré plein (.btn-generate) :
   contour clair sur fond doré. Ici les boutons restent sombres tant qu'ils ne
   sont pas .actif, un spinner sombre y serait invisible. */
.outils-btn-row.ds-scope .sb-gen-spinner{border-color:rgba(255,255,255,0.25);border-top-color:var(--gold-light)}
/* "Monter une vidéo" (carte sur l'accueil, section "Services annexes",
   voir index.html) : ouvert à Creator et Pro, même règle que le montage
   depuis le storyboard (voir .montage-trigger-btn plus haut et
   verifierAccesMontage côté serveur qui la revérifie). */
.outils-montage-home-btn{display:none}
body.is-admin .outils-montage-home-btn,
body.peut-monter-video .outils-montage-home-btn{display:flex}
.outils-result-card{background:rgba(255,255,255,0.02);border:1px solid var(--border-soft);border-radius:14px;padding:22px 20px;margin-top:24px;text-align:left}
.outils-result-card h3{font-family:'Poppins',sans-serif;text-transform:lowercase;font-weight:500;font-size:0.9rem;color:var(--gold-light);margin:0 0 14px;letter-spacing:0.02em}
.outils-transcript{white-space:pre-wrap;font-family:'Poppins',sans-serif;font-size:0.9rem;color:var(--text-secondary);line-height:1.6;max-height:340px;overflow-y:auto;margin-bottom:16px;padding-right:4px}
.outils-dl-desc{font-family:'Poppins',sans-serif;font-size:0.85rem;color:var(--text-secondary);line-height:1.55;margin-bottom:16px}
.outils-dl-note{font-size:0.78rem;color:rgba(255,255,255,0.5);margin-top:14px;line-height:1.5}

/* Carte "source" de la vidéo transcrite (auteur, date, description, stats) :
   vraie photo de profil quand elle est disponible (extraireAuteurInfo,
   api/_lib/tiktok-media.js), un badge à initiale reste dessous en repli
   (voir .outils-source-avatar-img, onerror="this.remove()") si le lien
   CDN a expiré. */
.outils-source-card{background:linear-gradient(135deg,rgba(250,148,16,0.06),rgba(255,255,255,0.02));border:1px solid var(--border-soft);border-radius:14px;padding:20px;margin-top:24px;text-align:left}
.outils-source-head{display:flex;align-items:center;gap:12px}
.outils-source-avatar{position:relative;overflow:hidden;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--bg);font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center}
.outils-source-avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.outils-source-id{flex:1;min-width:0}
.outils-source-nom{font-size:0.92rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.outils-source-handle{font-size:0.78rem;color:var(--text-secondary)}
.outils-source-date{flex:0 0 auto;font-size:0.76rem;color:var(--muted)}
.outils-source-desc{font-size:0.86rem;color:var(--text-secondary);line-height:1.5;margin:14px 0 0}
.outils-source-lien{display:inline-flex;align-items:center;gap:6px;font-size:0.82rem;color:var(--gold-light);font-weight:600;margin-top:10px;text-decoration:none}
.outils-source-lien:hover{color:var(--gold)}
.outils-source-lien .ico{width:14px;height:14px}

/* Ligne de contrôles au-dessus du texte transcrit : langue détectée, nombre
   de mots, export .txt, copier. */
.outils-transcript-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:18px 0 12px}
.outils-word-count{font-size:0.78rem;color:var(--muted)}
.outils-mini-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-soft);background:rgba(255,255,255,0.03);color:var(--text-secondary);font-size:0.78rem;font-family:'Poppins',sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.outils-mini-btn:hover{border-color:var(--gold);color:var(--gold-light)}
.outils-mini-btn:disabled{opacity:0.5;cursor:not-allowed}
/* Carte source utilisée en TÊTE de résultat (diagnostic sommaire, analyse
   vidéo) : .outils-source-card n'a qu'un margin-top (pensé pour suivre un
   bloc de transcription), il lui manque un espacement en dessous quand
   c'est elle qui ouvre l'écran, juste avant la carte de score. */
.ds-identite-card,.viral-carte-source{margin-bottom:24px}
.outils-mini-btn .ico{width:14px;height:14px}

/* Écran "analyse en cours" du diagnostic sommaire (@username) */
.ds-loading-card{text-align:center;padding:44px 24px 36px}
.ds-loading-title{font-family:'Playfair Display',serif;font-weight:500;font-size:1.4rem;color:#fff;line-height:1.3;margin-bottom:10px}
.ds-loading-sub{font-family:'Poppins',sans-serif;font-size:0.88rem;color:var(--text-secondary);line-height:1.55;max-width:320px;margin:0 auto 18px}
.ds-loading-note{font-family:'Poppins',sans-serif;font-style:italic;font-size:0.82rem;color:var(--muted);line-height:1.6;max-width:340px;margin:0 auto 26px}
.ds-loading-icon{
  position:relative;width:88px;height:88px;margin:0 auto 22px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(250,148,16,0.16),transparent 70%);
}
.ds-loading-icon::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold-light);
}
.ds-loading-bolt{width:32px;height:32px;filter:drop-shadow(0 0 8px rgba(250,148,16,0.55))}
.ds-loading-pct{font-family:'Playfair Display',serif;font-weight:700;font-size:2.3rem;color:var(--gold-light);line-height:1;margin-bottom:8px}
.ds-loading-status{font-family:'Poppins',sans-serif;font-size:0.85rem;color:var(--text-secondary);min-height:1.3em}
@keyframes dsLoadingSpin{to{transform:rotate(360deg)}}
@keyframes dsLoadingPulse{0%,100%{opacity:0.8;transform:scale(0.95)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:no-preference){
  .ds-loading-icon::before{animation:dsLoadingSpin 1.4s linear infinite}
  .ds-loading-bolt{animation:dsLoadingPulse 1.6s ease-in-out infinite}
}
/* Résultat du diagnostic sommaire : réutilise .score-card (même carte que
   les recommandations IA de l'accueil) et l'anneau .audit-ring (même
   mécanique que le diagnostic complet) pour rester visuellement cohérent.
   Structure d'analyse inspirée de Vervox (score, 4 dimensions, bio, niche,
   leviers, analyse détaillée), habillée en doré + émeraude Scriptura. */

/* L'anneau réutilise .audit-ring-fill (voir plus haut), dont le CSS force
   stroke:url(#auditRingGrad), id du dégradé du diagnostic COMPLET. Cette
   carte définit son propre dégradé #dsRingGrad : la règle ci-dessous, plus
   spécifique, doit gagner pour que la couleur (doré ou émeraude) s'applique
   réellement à l'anneau du diagnostic sommaire. */
.ds-score-card .audit-ring-fill{stroke:url(#dsRingGrad)}

.ds-niveau-badge{
  display:inline-block;margin-top:14px;padding:6px 16px;border-radius:999px;
  font-family:'Poppins',sans-serif;font-size:0.66rem;letter-spacing:0.1em;text-transform:lowercase;
  color:var(--gold-light);background:var(--gold-pale);border:1px solid var(--border-soft);
}
.ds-niveau-badge-ok{color:var(--emerald-light);background:var(--emerald-pale);border-color:var(--emerald-border)}

.ds-dims-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
@media(max-width:480px){.ds-dims-grid{grid-template-columns:1fr}}
.ds-dim-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:14px;padding:16px}
.ds-dim-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ds-dim-icon{font-size:1rem}
.ds-dim-name{font-family:'Poppins',sans-serif;font-size:0.68rem;letter-spacing:0.08em;text-transform:lowercase;color:#fff;flex:1}
/* Badge de score coloré selon le niveau (rouge/orange/émeraude), utilisé
   dans les cartes de dimension du diagnostic complet ET du sommaire
   (js/audit.js niveauScoreSur, .ds-dim-card réutilisée aux deux endroits). */
.score-badge{
  font-family:'Playfair Display',serif;font-weight:700;font-size:0.85rem;
  padding:2px 10px;border-radius:8px;border:1px solid transparent;line-height:1.6;
}
.score-badge.niveau-rouge{background:rgba(239,68,68,0.14);border-color:rgba(239,68,68,0.35);color:#EF4444}
.score-badge.niveau-orange{background:rgba(245,158,11,0.14);border-color:rgba(245,158,11,0.35);color:#F59E0B}
.score-badge.niveau-vert{background:var(--emerald-pale);border-color:var(--emerald-border);color:var(--emerald-light)}
.score-badge.niveau-neutre{background:var(--gold-pale);border-color:var(--border);color:var(--gold-light)}
.ds-dim-text{font-size:0.85rem;color:var(--text-secondary);line-height:1.5}

.ds-sante-row{text-align:center;margin:12px 0 24px}

/* Abonnés / likes cumulés du compte : entre le score et le tag "Santé du
   compte" (voir afficherDiagnosticSommaireResultat, js/diagnostic-sommaire.js). */
.ds-stats-row{display:flex;justify-content:center;align-items:center;gap:26px;margin:10px 0 16px;flex-wrap:wrap}
.ds-stat-item{display:flex;align-items:center;gap:7px}
.ds-stat-item .ico{color:var(--gold);opacity:0.85;flex-shrink:0}
.ds-stat-num{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.05rem;color:#fff;white-space:nowrap}
.ds-stat-label{font-size:0.66rem;letter-spacing:0.05em;color:var(--text-secondary);text-transform:uppercase}

.ds-tag{
  display:inline-block;max-width:100%;white-space:normal;word-break:break-word;
  padding:5px 12px;border-radius:999px;
  font-size:0.72rem;color:var(--gold-light);line-height:1.3;
  background:var(--gold-pale);border:1px solid var(--border-soft);
}
.ds-tag-ok{color:var(--emerald-light);background:var(--emerald-pale);border-color:var(--emerald-border)}
/* Variantes 3 niveaux du tag "Santé du compte" (Excellente/Bonne/Fragile/Critique) */
.ds-tag.niveau-rouge{color:#EF4444;background:rgba(239,68,68,0.14);border-color:rgba(239,68,68,0.35)}
.ds-tag.niveau-orange{color:#F59E0B;background:rgba(245,158,11,0.14);border-color:rgba(245,158,11,0.35)}
.ds-tag.niveau-vert{color:var(--emerald-light);background:var(--emerald-pale);border-color:var(--emerald-border)}
/* flex-wrap : si le label + le tag ne tiennent pas sur une ligne (long
   qualificatif de hook, ex. "interpellation directe + énumération
   paradoxale"), le tag passe à la ligne au lieu de déborder du cadre. */
.ds-section-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}

.ds-bio-actuelle{font-size:0.9rem;color:var(--text-secondary);font-style:italic;line-height:1.55}
.ds-suggestion{font-size:0.89rem;color:#fff;line-height:1.6;padding:10px 14px;background:rgba(255,255,255,0.03);border-radius:10px;margin-top:8px}

.ds-niche-analyse{margin:12px 0 0;padding-left:18px;display:grid;gap:8px}
.ds-niche-analyse li{font-size:0.89rem;color:var(--text-secondary);line-height:1.55}

.ds-leviers-list{margin:12px 0 0;padding-left:20px;display:grid;gap:14px}
.ds-leviers-list li{font-size:0.9rem;color:var(--text-secondary);line-height:1.5}
.ds-leviers-list li b{display:block;color:#fff;font-weight:600;margin-bottom:3px}
.ds-leviers-list li p{margin:0}

/* Top / Flop vidéos + concepts récurrents (analyse du contenu réel) */
.ds-videos-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.ds-videos-list li{background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:10px;padding:12px 14px}
.ds-video-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ds-video-sujet{font-size:0.9rem;color:#fff;font-weight:600;line-height:1.4}
.ds-video-vues{flex-shrink:0;font-family:'Playfair Display',serif;font-size:0.95rem;color:var(--gold-light);white-space:nowrap}
.ds-video-constat{margin:6px 0 0;font-size:0.85rem;color:var(--text-secondary);line-height:1.5}
.ds-concepts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ds-concept-chip{font-size:0.82rem;color:var(--gold-light);background:var(--gold-pale);border:1px solid var(--border-soft);border-radius:999px;padding:6px 14px;line-height:1.3}

/* Évolution du compte (détection de changement de cap / pivot) */
.ds-evolution.pivot{border-color:rgba(250,148,16,0.4)}
.ds-tag-alert{color:var(--gold-light);background:var(--gold-pale);border-color:rgba(250,148,16,0.4)}
.ds-evo-grid{display:grid;gap:10px;margin-top:14px}
.ds-evo-col{background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:10px;padding:12px 14px}
.ds-evo-col p{margin:5px 0 0;font-size:0.86rem;color:var(--text-secondary);line-height:1.5}
.ds-evo-h{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted)}
/* Évolution des abonnés (7/30/90 jours), voir js/diagnostic-sommaire.js */
.ds-abo-evo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ds-abo-evo-item{background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:10px;padding:12px 10px;text-align:center}
.ds-abo-evo-periode{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:6px}
.ds-abo-evo-delta{font-family:'Poppins',sans-serif;text-transform:lowercase;font-size:0.92rem;font-weight:500;color:var(--text-secondary)}
.ds-abo-evo-up{color:var(--emerald-light)}
.ds-abo-evo-down{color:var(--gold-light)}
.ds-evo-formule{margin-top:14px;background:var(--gold-pale);border:1px solid rgba(250,148,16,0.35);border-radius:10px;padding:12px 14px}
.ds-evo-formule p{margin:5px 0 0;font-size:0.88rem;color:#fff;line-height:1.55}
.ds-evo-formule .ds-evo-h{color:var(--gold-light)}

/* Face-à-face « Toi face à @concurrent » : duel chiffré */
.ds-vs-card{border-color:rgba(250,148,16,0.45)}
.ds-vs-loading{color:var(--gold-light);font-size:0.9rem;font-style:italic;padding:6px 0}
.ds-vs-wrap{margin-top:12px;overflow-x:auto}
.ds-vs{width:100%;border-collapse:collapse;font-size:0.9rem}
.ds-vs thead th{color:var(--muted,#9a9a9a);font-weight:600;font-size:0.8rem;text-align:right;padding:0 10px 8px;text-transform:uppercase;letter-spacing:0.03em}
.ds-vs thead th:first-child{text-align:left}
.ds-vs tbody tr{border-top:1px solid var(--border-soft)}
.ds-vs td{padding:10px}
.ds-vs-dim{color:#fff;font-weight:500}
.ds-vs-num{text-align:right;color:#d6d6d6;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-vs-max{color:var(--muted,#8a8a8a);font-size:0.78em}
.ds-vs-gagne{color:var(--gold-light);font-weight:700}

/* Analyse virale : rétention + structure */
/* La carte de score réutilise .ds-score-card (cohérence visuelle avec le
   diagnostic sommaire), ce qui hérite malheureusement de la règle
   .ds-score-card .audit-ring-fill{stroke:url(#dsRingGrad)} (voir plus haut) :
   #dsRingGrad n'existe pas ici, l'anneau ne reçoit alors AUCUNE couleur alors
   que le chiffre au centre, lui, l'a (style inline). Cette règle, plus
   spécifique et plus tardive dans la feuille, réaligne l'anneau sur son
   propre dégradé #viralRingGrad (voir js/viral.js). */
.viral-score-card .audit-ring-fill{stroke:url(#viralRingGrad)}
.viral-score-rappel{margin:10px 2px 0;font-size:0.78rem;color:var(--muted,#8a8a8a);line-height:1.4}
.viral-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.viral-list li{background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:10px;padding:12px 14px}
.viral-list-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.viral-moment{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted,#8a8a8a);white-space:nowrap}
.viral-tech{font-weight:700;color:var(--gold-light)}
.viral-list li p{margin:0;font-size:0.9rem;color:#d6d6d6;line-height:1.5}
.viral-structure{margin:12px 0 0;padding-left:20px;line-height:1.7;color:#d6d6d6;font-size:0.92rem}
.viral-structure li{margin-bottom:6px}
.viral-structure b{color:#fff}
.viral-stats-row{margin-top:12px;text-align:center;font-size:0.92rem;color:#d6d6d6;font-weight:600;letter-spacing:0.01em}
.viral-dims{margin-top:18px;display:flex;flex-direction:column;gap:11px;text-align:left}
.viral-dim-top{display:flex;justify-content:space-between;align-items:baseline;font-size:0.84rem;color:#d6d6d6;margin-bottom:5px}
.viral-dim-val{color:var(--gold-light,#FDB71E);font-weight:700;font-size:0.8rem}
.viral-dim-bar{height:6px;border-radius:4px;background:rgba(255,255,255,0.08);overflow:hidden}
.viral-dim-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold-light,#FDB71E),#fa9410);transition:width .9s ease}
.viral-video-details{margin:2px 0 4px}
.viral-video-summary{cursor:pointer;font-size:0.8rem;color:var(--gold-light,#FDB71E);opacity:0.8;list-style:none;padding:6px 0;user-select:none}
.viral-video-summary::-webkit-details-marker{display:none}
.viral-video-summary::before{content:'▸ ';font-size:0.7rem}
.viral-video-details[open] .viral-video-summary::before{content:'▾ '}
.viral-transcript-card .viral-video-summary{font-size:0.85rem}
.viral-transcript-texte{margin:10px 2px 2px;font-size:0.86rem;line-height:1.6;color:#c9c9c9;white-space:pre-wrap}
.viral-modele{border:1px dashed rgba(253,183,30,0.4)}
.viral-modele-intro{margin:8px 2px 14px;font-size:0.88rem;line-height:1.5;color:#cfcfcf}
/* Guide de montage CapCut, dressé comme les prompts du storyboard */
.guide-montage-wrap{margin-top:12px}
.guide-montage-btn{width:100%;justify-content:center}
.guide-montage-loading{padding:16px;text-align:center;color:var(--gold-light,#FDB71E);font-size:0.9rem}
.guide-montage-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}
.guide-montage-titre{font-size:0.98rem;font-weight:700;color:var(--gold-light,#FDB71E);margin-bottom:10px}
.guide-intention{margin:0 2px 16px;font-size:0.95rem;line-height:1.55;color:#e4e4e4;font-style:italic}
.guide-etapes{margin:8px 0 6px;padding-left:22px;display:flex;flex-direction:column;gap:11px}
.guide-etapes li{color:#d6d6d6;line-height:1.5}
.guide-etapes li b{color:#fff}
.guide-etapes li p{margin:3px 0 0;font-size:0.9rem;color:#cdcdcd}
.guide-plan-seg{margin-top:10px}
.guide-plan-line{margin:4px 0 0;font-size:0.9rem;color:#d6d6d6;line-height:1.5}
.guide-plan-line b{color:var(--gold-light,#FDB71E);font-weight:600;margin-right:5px}
.guide-txt{margin:4px 2px 12px;font-size:0.9rem;line-height:1.5;color:#d6d6d6}
.viral-modele-list{list-style:none;margin:12px 0 4px;padding:0;counter-reset:vm;display:flex;flex-direction:column;gap:10px}
.viral-modele-list li{position:relative;background:rgba(253,183,30,0.06);border-radius:10px;padding:10px 12px 10px 40px}
.viral-modele-list li::before{counter-increment:vm;content:counter(vm);position:absolute;left:12px;top:10px;width:20px;height:20px;border-radius:50%;background:rgba(253,183,30,0.18);color:var(--gold-light,#FDB71E);font-size:0.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.viral-modele-list .viral-moment{display:block;margin-bottom:2px}
.viral-modele-list li p{margin:0;font-size:0.9rem;color:#e4e4e4;line-height:1.5}

.ds-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ds-mini-stat{text-align:center;background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:10px;padding:12px 8px}
.ds-mini-stat b{display:block;font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--gold-light);margin-bottom:3px}
.ds-mini-stat span{font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em}

.ds-result-subscribe{padding:16px 18px;background:var(--gold-pale);border:1px solid var(--border-soft);border-radius:12px;font-size:0.88rem;color:var(--gold-light);line-height:1.55}

/* ══════════════════════════════════════════════════════════
   MODE CARROUSEL
   ══════════════════════════════════════════════════════════ */

/* Curseur du nombre de slides. Demande du propriétaire : une ligne graduée
   qu'on fait glisser, pas un menu déroulant. La partie déjà parcourue est
   dorée, la piste restante sombre. Aucun navigateur ne sait styler cette
   moitié gauche de façon portable, d'où le dégradé recalculé en JS via la
   variable --car-part (voir majCurseurSlidesCarrousel, js/carrousel.js). */
/* Le message qui annonce la conversion : en émeraude, la couleur des accents
   "niveau au-dessus" de la charte, jamais en rouge. Ce n'est pas une erreur,
   c'est Scriptura qui dit ce qu'il a compris. */
/* .ds-field porte un margin-top de 26px, calibré pour l'écran du diagnostic
   sommaire où il suit directement un titre. Ici il suit un simple libellé de
   champ : sans cette remise à zéro, il flotterait loin de son étiquette. */
#carrouselLien.ds-input, .ctx-field > .ds-field{margin-top:0}

.car-matiere-note{
  color:var(--emerald-light);background:var(--emerald-pale);
  border:1px solid var(--emerald-border);border-radius:9px;
  padding:9px 12px;margin-top:8px;
}

.car-slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.car-slider-val{font-size:0.95rem;font-weight:700;color:var(--gold-light);white-space:nowrap}
.car-slider{
  /* 16px comme TOUS les champs de l'app : un input sans taille de police
     déclarée retombe sur les ~13px par défaut du navigateur, sous le seuil
     anti-zoom que l'app s'impose partout (voir la défense mobile dans
     js/navigation.js). Un curseur ne déclenche pas le zoom iOS, mais on ne
     troue pas un filet de sécurité pour une exception : la règle reste
     valable sans exception, donc elle reste vérifiable sans exception. */
  font-size:16px;
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--car-part,22%),rgba(255,255,255,0.14) var(--car-part,22%),rgba(255,255,255,0.14) 100%);
  outline:none;cursor:pointer;margin:0;
}
/* Pouce assez large pour être attrapé au doigt : 28px, au-dessus du seuil
   de confort tactile, sinon le réglage se fait au millimètre sur mobile. */
.car-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--gold);border:3px solid #1C1C1E;box-shadow:0 2px 10px rgba(0,0,0,0.5);cursor:grab;
}
.car-slider::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:var(--gold);
  border:3px solid #1C1C1E;box-shadow:0 2px 10px rgba(0,0,0,0.5);cursor:grab;
}
.car-slider:active::-webkit-slider-thumb{cursor:grabbing;background:var(--gold-light)}
.car-slider:active::-moz-range-thumb{cursor:grabbing;background:var(--gold-light)}
.car-slider:focus-visible{box-shadow:0 0 0 3px var(--emerald-pale)}
.car-slider-bornes{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--muted);margin-top:6px}
/* Curseur construit à partir d'un <select> (durées des modes Script, Récit et
   Série, voir initSliderChoix js/ui.js). Le <select> reste dans le DOM pour
   que tout le code existant continue de le lire, mais il ne doit plus rien
   dessiner : même mise à l'écart que .custom-select select plus haut. */
/* Rappel posé sous le score : les boutons d'édition par passage existent, et
   c'est par eux que la durée se rattrape (voir rappelEditionParPassageHTML,
   js/ui.js). Doré comme l'avertissement de durée juste au-dessus, dont il est
   la suite logique : l'un dit le problème, l'autre dit quoi faire. Pas
   d'émeraude ici, ce n'est pas une réussite, c'est un mode d'emploi. */
.rappel-edition{
  margin-top:10px;padding:11px 14px;border-radius:8px;
  background:rgba(250,148,16,0.07);border:1px solid rgba(250,148,16,0.22);
  font-size:0.8rem;line-height:1.55;color:var(--gold-light);
}
.choix-slider{position:relative}
.choix-slider select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}

/* Barre de format sur l'écran de résultat : changer d'avis après coup ne doit
   pas obliger à régénérer, les aperçus sont recomposés (voir
   changerFormatDepuisResultat, js/carrousel.js). */
/* Retour propriétaire : la barre de format et la carte de score se
   touchaient presque. Une marge basse franche les sépare, sinon les deux
   blocs se lisent comme un seul. */
.car-formats-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 20px}
.car-formats-label{
  font-family:'Poppins',sans-serif;font-size:0.6rem;letter-spacing:0.14em;
  text-transform:lowercase;color:var(--gold);opacity:0.7;
}
.car-formats{display:flex;gap:8px;flex-wrap:wrap}
.car-format-btn{
  padding:7px 13px;border-radius:10px;cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--border-soft);
  color:var(--text-secondary);font-family:'Poppins',sans-serif;
  font-size:0.84rem;font-weight:600;transition:all 0.2s ease;
}
.car-format-btn span{display:block;font-size:0.66rem;font-weight:400;opacity:0.62}
.car-format-btn:hover{border-color:var(--border)}
.car-format-btn.actif{background:var(--gold-pale);border-color:var(--gold);color:var(--gold-light)}

/* Une slide = son aperçu à gauche, son contenu et ses actions à droite.
   L'aperçu est la VRAIE composition rendue sur canvas, pas une maquette
   approchante : ce que le créateur voit est ce qu'il télécharge. Sa
   proportion suit donc le format choisi (aspect-ratio posé en ligne). */
.car-slides{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.car-slide{
  display:flex;gap:14px;padding:14px;border-radius:14px;
  background:var(--bg-card);border:1px solid var(--border-soft);
}
.car-slide-visuel{
  position:relative;flex:0 0 132px;width:132px;border-radius:10px;
  overflow:hidden;background:var(--bg-soft);
}
/* Retour propriétaire : en colonne (téléphone), le cadre de l'aperçu et le
   titre qui le suit se touchaient. La marge vit ici, sur le corps, plutôt que
   sous l'aperçu : côte à côte (écran large) elle n'a pas lieu d'être, et une
   marge sous l'aperçu s'y verrait comme un décalage inexpliqué. */
@media(max-width:640px){ .car-slide-corps{margin-top:14px} }
.car-slide-img{width:100%;height:100%;object-fit:cover;display:block}
.car-slide-vide{
  display:flex;align-items:center;justify-content:center;height:100%;
  text-align:center;font-size:0.7rem;color:var(--muted);padding:8px;
}
.car-slide-corps{flex:1;min-width:0}
.car-slide-role{
  margin:0 0 5px;font-family:'Poppins',sans-serif;font-size:0.58rem;
  letter-spacing:0.14em;text-transform:lowercase;color:var(--gold);opacity:0.8;
}
.car-slide-texte{
  margin:0 0 8px;font-family:'Playfair Display',serif;font-weight:700;
  font-size:1.08rem;line-height:1.3;color:var(--text);
}
.car-slide-points{margin:0 0 8px;padding-left:18px;font-size:0.82rem;line-height:1.55;color:var(--text-secondary)}
.car-slide-points strong{color:var(--text)}
.car-slide-bandeau{
  margin:0 0 8px;padding:8px 11px;border-radius:9px;font-size:0.8rem;line-height:1.5;
  background:var(--gold-pale);border:1px solid var(--border-soft);color:var(--gold-light);
}
.car-slide-mots{margin:0 0 8px;font-size:0.74rem;color:var(--muted)}
.car-slide-visuel-note{margin:0 0 10px;font-size:0.78rem;color:var(--text-secondary);line-height:1.5}
.car-slide-visuel-note strong{color:var(--gold)}
/* « Ton vrai produit apparaîtra sur cette slide. » En émeraude parce que
   c'est une BONNE nouvelle, la couleur que Scriptura réserve à ce qui a
   réussi (même codex que les barres terminées). La variante "absent" passe
   en doré, ton d'avertissement de l'app : ce n'est pas une erreur, c'est une
   photo qui manque et qu'il suffit de joindre. */
.car-slide-produit{
  margin:-4px 0 10px;font-size:0.78rem;line-height:1.5;
  color:var(--emerald-light);display:flex;gap:6px;align-items:flex-start;
}
.car-slide-produit::before{content:'●';font-size:0.6rem;line-height:1.9;flex-shrink:0}
.car-slide-produit.absent{color:var(--gold-light)}
/* Même message, même code couleur, dans le panneau de montage. */
.montage-note-produit{
  margin:12px 0 0;font-size:0.8rem;line-height:1.5;color:var(--emerald-light);
}
.montage-note-produit.absent{color:var(--gold-light)}
.car-slide-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Les icônes des boutons du carrousel sont des SVG maison (ICO, js/ui.js) et
   non des caractères ✦ ⬇ ⧉ ↻ : ceux-là étaient rendus comme des EMOJI
   SYSTÈME, donc en couleur et différemment sur iPhone et sur Android, au
   milieu de boutons dorés (retour propriétaire, capture à l'appui). */
.car-slide-actions .ico,.results-top .ico,.btn-restart .ico{margin-right:5px}
/* Spinner du bouton "Générer un fond" : le créateur doit voir tourner
   quelque chose LÀ OÙ IL VIENT D'APPUYER, sinon rien ne distingue une
   génération lancée d'un appui perdu. Aux couleurs du bouton ajouré (fond
   sombre, contour doré), pas celles de .sb-gen-spinner qui est pensé pour un
   fond doré plein. */
.car-spinner{
  display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:6px;
  border:2px solid rgba(250,148,16,0.28);border-top-color:var(--gold-light);
  border-radius:50%;animation:spin 0.7s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  /* Jamais figé : sans rotation, le spinner ne dirait plus rien. On ralentit
     seulement, pour rester lisible sans être agressif. */
  .car-spinner{animation-duration:1.8s}
}
.car-bloc-texte{margin:0;font-size:0.92rem;line-height:1.6;color:var(--text-secondary);white-space:pre-wrap}

@media(max-width:640px){
  .car-slide{flex-direction:column}
  /* En colonne, l'aperçu reprend toute la largeur et garde sa proportion
     réelle : c'est là qu'on juge vraiment une slide, autant la voir grand. */
  .car-slide-visuel{flex:none;width:100%;max-width:300px;margin:0 auto}
}

/* ═══════════════════════════════════════════════════════════
   POLICE DES BOUTONS
   ═══════════════════════════════════════════════════════════
   Retour du propriétaire, capture comparative à l'appui : « Cinzel n'est pas
   bien visible, ça ne se lit pas bien ». Il a raison, et c'est mesurable à
   l'œil : les empattements de Cinzel s'épaississent aux extrémités, et sur le
   fond doré clair du bouton principal, avec un texte foncé, les lettres se
   brouillent. On déchiffrait le bouton au lieu de le lire.

   CE QUI CHANGE : la FAMILLE, rien d'autre. Les majuscules, l'espacement et
   le doré restent. Trois variantes ont été comparées en image avant de
   trancher (Cinzel, Poppins minuscules, Poppins majuscules) : les majuscules
   l'emportent parce qu'elles gardent le registre de l'app, celui des libellés
   « TON & VOIX » ou « DURÉE DE LA VIDÉO ». Poppins en minuscules était très
   lisible mais faisait perdre au bouton son autorité d'action principale.

   UN SEUL BLOC POUR TOUS, plutôt que 25 règles modifiées une à une : c'est la
   seule façon de pouvoir revenir en arrière d'un geste si l'essai ne tient pas
   à l'usage, et d'éviter qu'un bouton oublié reste en Cinzel au milieu des
   autres. Chaque bouton garde en revanche SA taille et SON espacement, réglés
   au cas par cas dans sa propre règle : les uniformiser ici écraserait des
   choix délibérés.

   MISE À JOUR (refonte visuelle, capture de référence à l'appui) : le
   paragraphe ci-dessus disait que le logo et les libellés restaient en
   Cinzel. Ce n'est plus vrai. Cinzel est retiré de l'app entière (voir bloc
   « POLICE Cinzel → Poppins » plus bas) : le logo, les libellés de section,
   les tags, les titres et les intitulés de plan passent en Poppins
   minuscule, comme les boutons ci-dessous, mais SANS le texte en majuscules
   (c'était la particularité voulue du bouton, pas de l'identité générale).
   L'identité de Scriptura tient désormais à l'icône S dorée du logo, pas à
   la police de ses libellés. */
.btn-generate, .btn-back, .copy-btn, .share-btn, .btn-restart, .gen-skip-btn,
.rappel-btn, .plan-btn, .modal-btn, .footer-wa-btn, .sb-generate-btn,
.btn-regenerate, .btn-actualiser, .idea-btn-script, .idea-btn-copy,
.idea-btn-share, .btn-storyboard, .nav-history-btn, .hist-tool-btn,
.modal-btn-ghost, .action-btn, .affiner-toggle, .genimg-btn, .aw-nav button,
.btn-montage-primary,
/* Ajouté APRÈS coup : ce bouton-là ne portait aucun nom en « btn », il est
   donc passé à travers l'inventaire fait à la main, et c'est le test qui
   balaie tous les boutons visibles de l'écran qui l'a rattrapé. C'est
   précisément le bouton le plus en vue de l'app pour un non-abonné : il
   serait resté en Cinzel, seul, juste à côté de tous les autres. */
.nav-subscribe-cta {
  font-family:'Poppins',sans-serif;
}

/* ── CASSE DES BOUTONS ──
   Retour du propriétaire : « regarde dans toute l'app s'il y a encore des
   boutons avec du texte en minuscule et corrige en majuscule ». Inventaire
   fait en MESURANT la casse calculée sur 17 écrans, pas en lisant la feuille
   de style : une règle peut exister et perdre en spécificité.

   CE QUI PASSE EN CAPITALES : les boutons d'ACTION et de CHOIX, ceux qui ont
   un fond ou un cadre et qu'on lit comme des boutons. Ils rejoignent les
   .btn-generate, .copy-btn, .action-btn et compagnie, déjà en capitales.

   CE QUI RESTE EN MINUSCULES, et chaque cas a sa raison :
   · .custom-select-trigger : c'est un CHAMP, pas un bouton. Il affiche une
     valeur choisie (« 1x (normal) », le nom d'une niche). Mettre une valeur
     saisie en capitales, c'est la déformer.
   · .footer-link-btn, .sidebar-item, .example-cta : des LIENS et des lignes
     de menu, sans fond ni cadre. Huit phrases en capitales dans un pied de
     page, ça crie au lieu d'aider.
   · .pack-btn, .plan-toggle-btn, .hero-mode-btn : des CARTES, avec un prix ou
     une description sur plusieurs lignes.
   · .serie-suggest-btn : une phrase entière (« Ou laisse Scriptura me proposer
     des concepts »), qui ne se met pas en capitales.
   · .btn-back : le SEUL bouton que le propriétaire a explicitement voulu en
     minuscules, et la raison tient toujours. En capitales espacées,
     « ← RETOUR » pèse autant qu'une action principale alors que ce n'est
     qu'un lien de navigation. Verrouillé par tests/police-des-boutons.

   L'ESPACEMENT RESTE MODESTE (0.05em) et non 0.1em comme les boutons courts :
   plusieurs de ces libellés sont longs (« NARRATIF LONG (IMMERSIF, SANS
   LIMITE) », « COMPTE CONCURRENT »), et les capitales sont déjà plus larges
   que les minuscules. Mesuré : au-delà, ça déborde sur un écran de 414px. */
.grid-btn, .plan-btn, .ds-scope-btn, .rappel-btn, .outils-mini-btn,
.script-edit-btn, .car-format-btn, .hero-cta-label {
  text-transform:uppercase;
}
/* L'espacement est posé À PART, et .ds-scope-btn en est ABSENT à dessein : il
   déclare le sien (0.13em) dans sa propre règle, plus haut. Le mettre aussi
   ici l'écraserait en silence, cette règle-ci venant plus loin dans le
   fichier. C'est la panne la plus discrète en CSS : les deux règles sont
   justes, c'est leur ordre qui décide, et rien ne le signale. */
.grid-btn, .plan-btn, .rappel-btn, .outils-mini-btn,
.script-edit-btn, .car-format-btn, .hero-cta-label {
  letter-spacing:0.05em;
}

/* ── TAILLE DES BOUTONS DANS LES MODES ──
   Retour du propriétaire, capture à l'appui : « la taille des textes de
   boutons n'est pas la même partout, je parle des boutons à l'intérieur des
   modes », avec la rangée du montage donnée comme RÉFÉRENCE.

   Il avait raison, et c'était pire que ce que sa capture montrait. Mesuré
   dans le navigateur sur douze écrans de mode, les textes de boutons
   allaient de 0.52rem (.btn-actualiser) à 0.84rem (.car-format-btn) : seize
   tailles différentes, réglées une par une au fil des livraisons, chacune
   raisonnable dans son coin et l'ensemble incohérent.

   LA RÉFÉRENCE EST CELLE DE SA CAPTURE : 0.62rem, espacement 0.13em, celle
   de .ds-scope-btn et .btn-montage-primary. L'espacement est unifié lui
   aussi, sans quoi des boutons de même taille ne se ressembleraient toujours
   pas : c'est le couple taille + espacement qui fait la ressemblance.

   CE QUI N'EST PAS TOUCHÉ, et ce n'est pas un oubli :
   · l'ACCUEIL (.hero-cta-label, .hero-mode-btn, .example-cta), le PIED DE
     PAGE, la BARRE DU HAUT et le MENU LATÉRAL : ce ne sont pas des « boutons
     à l'intérieur des modes », et l'accueil a sa propre échelle, voulue plus
     grande parce qu'on y arrive sans rien connaître de l'app ;
   · les CARTES DE TARIF (.plan-btn, .pack-btn) : elles vivent dans la fenêtre
     d'abonnement, pas dans un mode ;
   · les boutons À ICÔNE SEULE (.genimg-btn-icon, .action-btn.icon-only,
     #scrollTopBtn, .hero-cta-arrow) : leur font-size dimensionne un
     pictogramme, pas un texte. Les aligner les rendrait minuscules ;
   · .serie-suggest-btn : une phrase entière, pas un libellé de bouton ;
   · .btn-back garde son espacement de 0.02em : il est le seul en minuscules
     (décision du propriétaire), et les minuscules n'ont pas besoin de
     tracking. Sa taille, elle, rejoint les autres.

   PLACÉ EN FIN DE FICHIER, ET LES SÉLECTEURS COMPOSÉS SONT LISTÉS EXPLICITEMENT
   (.btn-regenerate.mini, .aw-nav button, .car-format-btn span) : à
   spécificité inférieure, ce bloc perdrait contre eux sans rien signaler, et
   deux boutons resteraient à l'ancienne taille au milieu des autres. C'est
   la panne CSS la plus discrète qui soit. Verrouillé par
   tests/taille-des-boutons-des-modes.test.js. */
.grid-btn, .btn-generate, .btn-back, .rappel-btn, .outils-mini-btn,
.car-format-btn, .car-format-btn span, .script-edit-btn, .btn-storyboard,
.affiner-toggle, .btn-montage-lancer, .btn-regenerate, .btn-regenerate.mini,
.btn-restart, .btn-actualiser, .copy-btn, .share-btn, .idea-btn-copy,
.idea-btn-share, .idea-btn-script, .action-btn, .gen-skip-btn, .hist-tool-btn,
.sb-generate-btn, .genimg-btn, .aw-nav button, .modal-btn, .modal-btn-ghost,
.ds-scope-btn, .btn-montage-primary {
  font-size:0.62rem;
  letter-spacing:0.13em;
}
/* Seule exception d'espacement, expliquée ci-dessus. */
.btn-back{letter-spacing:0.02em}

/* ── PASTILLE D'ABONNÉ ET LIGNE GRATUITE ──
   Retour du propriétaire : « abonné creator / abonné pro / fondateur selon le
   cas, et aussi “aucun compte requis • 5 générations offertes”, en majuscules
   à la même taille que l'image » — la même référence que les boutons des
   modes, 0.62rem / 0.13em.

   Ces deux-là ne sont pas des boutons, d'où leur oubli lors de l'unification
   précédente : la pastille est un ÉTAT (qui je suis), la ligne gratuite une
   PROMESSE. Mais ce sont les deux premières choses qu'on lit sur l'accueil,
   juste au-dessus du bouton principal, et elles étaient les seules à ne pas
   parler la même langue que lui (0.72rem et 0.70rem, sans capitales).

   L'ÉTOILE SUIT LE TEXTE. Elle a sa propre taille, réglée à 0.74rem quand le
   libellé en faisait 0.72 : les laisser diverger l'aurait rendue plus grosse
   que le mot qu'elle accompagne. Mesuré avant d'y toucher. */
.abonne-badge{font-size:0.62rem;letter-spacing:0.13em;text-transform:uppercase}
.abonne-star{font-size:0.64rem}
.hero-free{font-size:0.62rem;letter-spacing:0.13em;text-transform:uppercase}

/* ── BARRE DE SÉLECTION DE L'HISTORIQUE ──
   Correction d'une régression QUE J'AI INTRODUITE en unifiant la taille des
   boutons : .hist-tool-btn est passé de 0.56rem / 0.06em à 0.62rem / 0.13em,
   et cette barre-là compte cinq éléments sur une seule ligne. Mesuré sur un
   iPhone Pro Max (430px) : 424px de contenu pour 404px visibles.

   La CI l'a vue avant moi, et c'est important de le dire : mes vérifications
   locales n'avaient pas rejoué ce fichier de test.

   ON RESSERRE LA BARRE, ON NE RECULE PAS SUR LA TAILLE. Le propriétaire a
   demandé une taille unique pour tous les boutons des modes ; faire une
   exception ici, c'est recréer exactement ce qu'il a demandé de corriger.
   C'est la barre qui doit s'adapter à ses boutons, pas l'inverse.

   Mesuré après : 400px de contenu pour 404px visibles, dans les deux états
   de la barre (rien de sélectionné, où les libellés sont au plus long, et
   sélection en cours). Le remplissage VERTICAL ne bouge pas : la cible
   tactile garde sa hauteur, seule la largeur se resserre. */
.history-toolbar{gap:8px}
.history-toolbar .hist-tool-btn{padding:8px 10px}

/* ── LA FLÈCHE DU BOUTON D'ACCUEIL RESPIRE ──
   Demande du propriétaire : « que la flèche pointant vers la droite fasse de
   petits mouvements gauche-droite comme le fait le bouton de défilement ».
   Même rythme exactement (1.9s, ease-in-out), pour que les deux mouvements de
   la page d'accueil parlent la même langue au lieu de battre chacun le sien.

   C'EST LA FLÈCHE QUI BOUGE, PAS SON DISQUE BLANC. Le disque fait 42px dans
   une pilule qui en fait 46 de haut : le faire glisser l'aurait fait paraître
   mal fixé. La flèche, elle, a douze pixels de marge de chaque côté à
   l'intérieur du disque, et son déplacement s'y lit comme une invitation.

   4px POUR UNE FLÈCHE DE 18px, soit la même proportion que le bouton de
   défilement (5px pour 24px). Une amplitude fixe aurait été trop discrète ici
   ou trop agitée là-bas.

   FIGÉE QUAND LE PANNEAU « CRÉER » EST OUVERT, même règle que le bouton de
   défilement juste au-dessus : à cet instant le bouton d'accueil est derrière
   un fond assombri, il n'invite plus à rien, et un élément qui bouge derrière
   un panneau ne fait que disputer l'attention à ce panneau.

   SOUS prefers-reduced-motion, rien ne bouge : c'est un réglage système que
   des utilisateurs activent pour de vraies raisons, et le bouton reste
   parfaitement compréhensible immobile. */
@keyframes flecheCtaInvite{
  0%, 100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}
@media(prefers-reduced-motion:no-preference){
  .hero-cta-arrow svg{animation:flecheCtaInvite 1.9s ease-in-out infinite}
  body.creer-ouvert .hero-cta-arrow svg{animation:none}
}

/* ── PRISE DE VOIX AU MICRO ──
   Suggestion d'un vrai utilisateur : enregistrer sa voix off dans l'app plutôt
   que de la faire générer.
   PENDANT LA PRISE, L'ÉCRAN NE SERT QU'À ÇA : un point rouge qui pulse (on
   enregistre), un chronomètre, une jauge de niveau, et le texte à lire. Le
   reste de la section disparaît, parce qu'à cet instant le créateur lit.
   LA JAUGE DE NIVEAU N'EST PAS UN GADGET : sans elle, on découvre qu'on était
   trop loin du micro APRÈS avoir lu tout son texte, et on recommence. */
.voix-prise{border:1px solid rgba(224,85,85,0.35);background:rgba(224,85,85,0.06);border-radius:14px;padding:14px 16px}
.voix-prise-tete{display:flex;align-items:center;gap:10px}
.voix-prise-point{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#E05555}
.voix-prise-chrono{font-family:'Poppins',sans-serif;font-size:0.95rem;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums}
.voix-prise-jauge{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,0.12);overflow:hidden}
.voix-prise-jauge-fill{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .08s linear}
.voix-prise-texte{margin-top:12px;max-height:180px;overflow-y:auto;font-size:1rem;line-height:1.7;color:rgba(255,255,255,0.88)}
@media(prefers-reduced-motion:no-preference){
  .voix-prise-point{animation:voixPrisePoint 1.2s ease-in-out infinite}
}
@keyframes voixPrisePoint{
  0%, 100%{opacity:1}
  50%{opacity:0.35}
}

/* ── CAPITALE DE PHRASE ──
   Retour du propriétaire : « j'ai vu que t'as mis plusieurs textes en toute
   minuscule, or une phrase commence toujours par une lettre majuscule ».
   Il avait raison : text-transform:lowercase écrase la casse du HTML, y
   compris la majuscule de départ que le texte source avait naturellement.

   CORRECTIF SYSTÉMATIQUE plutôt qu'au cas par cas : chaque sélecteur de
   l'app qui déclare text-transform:lowercase (libellés, tags, compteurs,
   titres de section...) reçoit ici son ::first-letter en majuscule. C'est
   additif et sans risque : ça ne touche que le tout premier caractère,
   laisse le reste en minuscule, et ne fait rien sur un texte qui commence
   par un chiffre ou un symbole (text-transform n'a pas de prise dessus).

   EXCLUS DE CETTE LISTE, à dessein :
   · .rappel-btn, .plan-btn : leur text-transform:lowercase est déjà mort,
     écrasé par la règle groupée de CASSE DES BOUTONS plus haut qui les
     repasse en majuscules. Un ::first-letter ici n'aurait aucun effet.
   · footer (le sélecteur générique) : le pied de page n'a pas de texte
     direct, seulement des enfants qui ont chacun leur propre sélecteur
     (.footer-links-title, .footer-contact-text, déjà couverts ci-dessous).
     Cibler le ::first-letter du conteneur générique aurait capitalisé une
     lettre au hasard dans sa structure, pas le début de chaque libellé.
   · .audit-steps li::before : contenu décoratif (puce), pas une phrase. */
.hero-eyebrow::first-letter,
.ticker-word::first-letter,
.step-indicator::first-letter,
.choice-label::first-letter,
.ctx-label::first-letter,
.summary-tag::first-letter,
.results-meta::first-letter,
.out-num::first-letter,
.out-section-label::first-letter,
.script-time::first-letter,
.hook-style::first-letter,
.ht::first-letter,
.prompt-type::first-letter,
.footer-links-title::first-letter,
.chip::first-letter,
.score-title::first-letter,
.metric-label::first-letter,
.gen-tagline::first-letter,
.gen-counter-unlock::first-letter,
.paywall-tag::first-letter,
.paywall-wa::first-letter,
.rappel-tag::first-letter,
.plans-tag::first-letter,
.plan-name::first-letter,
.plan-toggle-name::first-letter,
.modal-tag::first-letter,
.footer-contact-text::first-letter,
.sb-time::first-letter,
.sb-index::first-letter,
.sb-visual-label::first-letter,
.sb-copy::first-letter,
.strategy-tag::first-letter,
.script-meta-item::first-letter,
body.hero-focus .hero-retour::first-letter,
.mode-label::first-letter,
.how-eyebrow::first-letter,
.how-num::first-letter,
.how-step-title::first-letter,
.example-sub::first-letter,
.ideas-eyebrow::first-letter,
.idea-number::first-letter,
.idea-section-label::first-letter,
.story-segment-label::first-letter,
.hashtag-chip::first-letter,
.sb-seg-num::first-letter,
.history-mode::first-letter,
.history-montee::first-letter,
.hist-time::first-letter,
.sous-titre-etape::first-letter,
.sidebar-footer::first-letter,
.sb-progress-pct::first-letter,
.sb-progress-bar-pct::first-letter,
.genimg-trigger::first-letter,
.sb-opt > span::first-letter,
.genimg-inline-label::first-letter,
.sb-regen::first-letter,
.ou-separateur::first-letter,
.serie-section-label::first-letter,
.serie-episode-num::first-letter,
.serie-directives-titre::first-letter,
.serie-sb-titre::first-letter,
.serie-sb-num::first-letter,
.audit-guide-title::first-letter,
.aw-count::first-letter,
.aw-ex-titre::first-letter,
.aw-nav button::first-letter,
.audit-drop-label::first-letter,
.couv-titre::first-letter,
.montage-section-label::first-letter,
.audit-score-label::first-letter,
.audit-prio-titre::first-letter,
.audit-section-label::first-letter,
.admin-modes-header::first-letter,
.ds-sep::first-letter,
.outils-result-card h3::first-letter,
.ds-niveau-badge::first-letter,
.ds-dim-name::first-letter,
.ds-abo-evo-delta::first-letter,
.car-formats-label::first-letter,
.car-slide-role::first-letter {
  text-transform:uppercase;
}