/* Nova Studio — styles partagés de la plateforme.
   PEAU : design system Nova Contenu (contenu.novafulfil.com), porté en CSS vanilla.
   Relevés produits : ux/ANALYSE-MAGNIFIC-HIGGSFIELD.md · spec de portage : rapport du 2026-08-20.
   Trois principes : la matière (surfaces stratifiées, grain, halos, jamais d'aplats),
   l'accent vert RARE (réservé aux actions), le mouvement court et courbé (expo out).
   SOMBRE = thème de référence ; le clair est un bloc de surcharges de variables (html.light). */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* ================= Jetons ================= */
:root {
  color-scheme: dark;
  /* fonds */
  --bg: #08080a; --panel: #0c0c0f; --side-bg: #060608;
  /* encre */
  --ink: #f5f5f7; --ink-strong: #fafafa; --ink-soft: #d4d4d8; --muted: #71717a; --ghost: #61616b;
  /* traits */
  --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.12);
  --side-line: rgba(255, 255, 255, 0.06); --side-hover: rgba(255, 255, 255, 0.035);
  /* accent vert Nova (échelle Nova Contenu) */
  --a-200: #adf4cc; --a-300: #6fe8a6; --a-400: #30dc7c; --a-500: #0cc763; --a-deep: #089149;
  --accent: #0cc763; --accent-strong: #30dc7c; --accent-ink: #ffffff;
  --accent-soft: rgba(12, 199, 99, 0.15); --accent-bd: rgba(48, 220, 124, 0.40);
  --accent-hover-bd: rgba(48, 220, 124, 0.32); --a-glow: rgba(12, 199, 99, 0.38);
  --accent-text: #6fe8a6;
  /* états */
  --danger: #f87171; --danger-soft: #fca5a5; --danger-solid: #ef4444;
  --banner-bg: rgba(251, 191, 36, 0.10); --banner-line: rgba(251, 191, 36, 0.25); --banner-ink: #fcd34d;
  /* champs et creux */
  --field: rgba(0, 0, 0, 0.28); --field-focus: rgba(0, 0, 0, 0.42); --sunken: rgba(0, 0, 0, 0.32);
  --veil-03: rgba(255, 255, 255, 0.03); --veil-05: rgba(255, 255, 255, 0.05);
  --veil-06: rgba(255, 255, 255, 0.06); --veil-08: rgba(255, 255, 255, 0.08);
  --veil-10: rgba(255, 255, 255, 0.10); --quiet: rgba(255, 255, 255, 0.022);
  /* surfaces stratifiées */
  --surface-grad: linear-gradient(180deg, rgba(255,255,255,0.042) 0%, rgba(255,255,255,0.014) 42%, rgba(255,255,255,0.008) 100%);
  --sh-card: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.4), 0 16px 40px -24px rgba(0,0,0,0.9);
  --sh-card-hover: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 4px rgba(0,0,0,0.4), 0 22px 48px -26px rgba(0,0,0,1), 0 0 0 1px rgba(12,199,99,0.06);
  --sh-accent: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 2px rgba(0,0,0,0.5), 0 10px 26px -12px var(--a-glow);
  --sh-accent-hover: inset 0 1px 0 rgba(255,255,255,0.32), 0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -12px var(--a-glow);
  --shadow: var(--sh-card);
  --overlay: rgba(0, 0, 0, 0.70);
  /* accent en aplat (bouton primaire, pastilles) */
  --accent-fill: linear-gradient(140deg, #30dc7c 0%, #0cc763 48%, #089149 100%);
  /* rayons */
  --r-sm: 8px; --r-btn: 10px; --r-md: 12px; --r-lg: 16px; --r-modal: 22px;
  /* courbes */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  /* dimensions */
  --sidew: 250px; --side-gap: 14px; --thumb: 210px;
  /* fond des photos PRODUIT (masters détourés) : toujours blanc, dans les deux thèmes */
  --photo: #ffffff;
  /* fond des vignettes de GÉNÉRATION : une image verticale dans une carte carrée
     laisse des bandes — elles suivent le thème, jamais du blanc en mode sombre. */
  --photo-crea: #0b0b0d;
  --grain-opacity: 0.028;
}

html.light {
  color-scheme: light;
  --bg: #f4f4f1; --panel: #ffffff; --side-bg: #ebebe8;
  --ink: #17171b; --ink-strong: #09090b; --ink-soft: #3f3f46; --muted: #6b6b74; --ghost: #9c9ca6;
  --line: rgba(17, 17, 24, 0.09); --line-strong: rgba(17, 17, 24, 0.17);
  --side-line: rgba(17, 17, 24, 0.08); --side-hover: rgba(17, 17, 24, 0.05);
  --a-200: #09703c; --a-300: #078b49; --a-400: #069e52; --a-500: #08b25c; --a-deep: #067a3e;
  --accent: #0aa957; --accent-strong: #0cc763;
  --accent-soft: rgba(8, 178, 92, 0.15); --accent-bd: rgba(6, 158, 82, 0.40);
  --accent-hover-bd: rgba(10, 169, 87, 0.45); --a-glow: rgba(10, 169, 87, 0.32);
  --accent-text: #078b49;
  --danger: #dc2626; --danger-soft: #b91c1c;
  --banner-bg: #fdf3d7; --banner-line: #ecd9a0; --banner-ink: #6b5410;
  --field: rgba(17, 17, 24, 0.035); --field-focus: #ffffff; --sunken: rgba(17, 17, 24, 0.05);
  --photo-crea: #ffffff;
  --veil-03: rgba(17, 17, 24, 0.03); --veil-05: rgba(17, 17, 24, 0.05);
  --veil-06: rgba(17, 17, 24, 0.06); --veil-08: rgba(17, 17, 24, 0.08);
  --veil-10: rgba(17, 17, 24, 0.10); --quiet: rgba(17, 17, 24, 0.028);
  --surface-grad: linear-gradient(180deg, #ffffff 0%, #fefefd 42%, #fbfbf9 100%);
  --sh-card: inset 0 1px 0 #ffffff, 0 1px 2px rgba(15,20,30,0.05), 0 16px 40px -24px rgba(15,20,30,0.2);
  --sh-card-hover: inset 0 1px 0 #ffffff, 0 2px 4px rgba(15,20,30,0.05), 0 22px 48px -26px rgba(15,20,30,0.28), 0 0 0 1px rgba(10,169,87,0.07);
  --sh-accent: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(15,20,30,0.2), 0 10px 26px -12px var(--a-glow);
  --sh-accent-hover: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(15,20,30,0.2), 0 14px 34px -12px var(--a-glow);
  --shadow: var(--sh-card);
  --accent-fill: linear-gradient(140deg, #1fc46b 0%, #0aa957 48%, #067a3e 100%);
  --grain-opacity: 0.016;
}

/* ================= Base ================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overscroll-behavior: none;
  padding-left: var(--sidew); min-height: 100%;
  transition: background .2s;
}
/* Grain plein écran, au-dessus de tout, non cliquable (signature Nova Contenu).
   ⚠️ Le SVG porte width ET height (220) et la TUILE est déclarée. Sans elles,
   un SVG réduit à son viewBox n'a aucune taille intrinsèque : « background-size:
   auto » lui fait remplir tout le bloc, et la turbulence — calculée dans un
   repère de 220 px — se retrouvait étirée environ 6,5 fois à l'écran. D'où un
   fond pâteux, qui change à chaque largeur de fenêtre et se re-rastérise à
   chaque page. Tuilé à 220 px il est net, identique partout, et le navigateur
   ne décode qu'un petit carré. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain-opacity);
  background-size: 220px 220px; background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='220' height='220' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--accent-text); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

:where(button, a, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(12, 199, 99, 0.7);
  border-radius: var(--r-sm);
}
html.light :where(button, a, [tabindex]):focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(10, 169, 87, 0.65);
}
::selection { background: rgba(12, 199, 99, 0.42); color: #fff; }
html.light ::selection { background: rgba(10, 169, 87, 0.32); color: #0b2415; }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: content-box; }
html.light * { scrollbar-color: rgba(17,17,24,0.22) transparent; }
html.light *::-webkit-scrollbar-thumb { background: rgba(17,17,24,0.18); background-clip: content-box; border: 3px solid transparent; }
html.light *::-webkit-scrollbar-thumb:hover { background: rgba(17,17,24,0.30); background-clip: content-box; }

@keyframes ncRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ncSlideUp { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ncFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ncShimmer { from { background-position: -180% 0; } to { background-position: 180% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================= Sidebar ================= */
/* Panneau flottant arrondi, détaché du bord (référence client 2026-08-21). */
.nova-header {
  position: fixed; top: var(--side-gap); bottom: var(--side-gap); left: var(--side-gap);
  width: calc(var(--sidew) - var(--side-gap) * 2); z-index: 30;
  background: var(--side-bg); border: 1px solid var(--side-line); border-radius: 22px;
  display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 12px;
  overflow-y: auto; box-shadow: var(--sh-card);
}
.brand-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-right: 2px; }
.nova-header .brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 0;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.nova-header .brand:hover { text-decoration: none; }
.side-toggle {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-btn); flex: none;
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: 150ms var(--ease-ui); box-shadow: none;
}
.side-toggle svg { width: 16px; height: 16px; }
.side-toggle:hover { background: var(--side-hover); color: var(--ink-soft); filter: none; }
/* Monogramme : affiché seul quand la sidebar est pliée (et comme favicon). */
.brand-badge { width: 30px; height: 30px; flex: none; object-fit: contain; display: none; }
.nova-header .brand em { font-style: normal; font-weight: 500; color: var(--muted); }
.brand-logo { height: 30px; width: auto; display: block; }
.logo-clair { display: none; }
html.light .logo-clair { display: block; }
html.light .logo-sombre { display: none; }
html.side-min .nova-header .brand .brand-badge { display: block; }
html.side-min .brand-logo { display: none !important; }
@media (max-width: 880px) {
  .brand-logo { height: 24px; }
}

.side-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ghost); padding: 0 12px; margin: 16px 0 6px;
}
.side-label:first-of-type { margin-top: 0; }
.side-link {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 36px;
  border-radius: var(--r-btn); color: var(--muted); font-size: 13px; font-weight: 400;
  border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; transition: 150ms var(--ease-ui); box-shadow: none;
}
.side-link svg { width: 16px; height: 16px; flex: none; color: var(--ghost); transition: color 150ms var(--ease-ui); }
.side-link:hover { background: var(--side-hover); color: var(--ink-soft); text-decoration: none; filter: none; }
.side-link:hover svg { color: var(--muted); }
.side-link.on {
  background: var(--accent-fill); color: #08120c; font-weight: 700;
  box-shadow: var(--sh-accent); border-radius: 999px;
}
.side-link.on svg { color: #08120c; }

/* Onglet dépliant de la sidebar (les pages archivées). */
.side-repli { display: block; }
.side-repli .repli-tete { color: var(--ghost); }
.side-repli .repli-chev {
  margin-left: auto; display: flex; align-items: center;
  transform: rotate(0deg); transition: transform 180ms var(--ease-ui);
}
.side-repli .repli-chev svg { width: 13px; height: 13px; }
.side-repli.ouvert .repli-chev { transform: rotate(90deg); }
.side-repli.ouvert .repli-tete { color: var(--muted); }
.repli-corps {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 200ms var(--ease-ui);
}
.side-repli.ouvert .repli-corps { grid-template-rows: 1fr; }
.repli-corps > div { overflow: hidden; min-height: 0; }
.repli-corps .side-link { padding-left: 24px; font-size: 12.5px; }
.repli-corps .side-link svg { width: 15px; height: 15px; }
/* Un GROUPE entier replié (« Interne ») : sa tête garde l'allure d'un titre de
   section, ses enfants gardent l'indentation normale des liens. */
.side-repli.repli-groupe > .repli-tete {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ghost); min-height: 30px; margin-top: 14px; padding: 0 12px;
}
.side-repli.repli-groupe > .repli-tete:hover { background: transparent; color: var(--muted); }
.side-repli.repli-groupe > .repli-corps > div > .side-link { padding-left: 12px; font-size: 13px; }
.side-repli.repli-groupe > .repli-corps > div > .side-link svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .repli-corps, .side-repli .repli-chev { transition: none; }
}

.nova-header .spacer { flex: 1; }
.side-groups { display: contents; }

/* ---- Verrou du mur Communauté (décision client 2026-08-22) ----
   Le mur reste visible mais hors d'atteinte : flou, dégradé qui l'éteint vers
   le bas, logo en filigrane MAT (aucune ombre, aucun halo), cadenas, promesse
   et bouton. Le conteneur porte le dégradé ; le mur, lui, ne porte que le flou
   — un filter sur le parent créerait un nouveau conteneur de position et le
   voile ne pourrait plus se poser par-dessus. */
/* Le mur se DISSOUT vers le bas au lieu d'être coupé net : un masque en
   dégradé l'éteint progressivement, sinon la rangée suivante réapparaissait
   sous le voile et trahissait ce qu'on prétend cacher. */
.lab-cadre.cadre-verrou { position: relative; overflow: hidden; }
/* Onglet verrouillé = page FIGÉE (demande client 22/08) : rien ne défile tant
   que le voile est posé. La classe vit sur <html> et n'est mise que quand le
   verrou est rendu — les onglets Inspiration et Mes recettes ne la portent
   jamais, leur défilement est intact. */
html.lab-fige, html.lab-fige body { overflow: hidden; }
/* Le mur flouté est borné à l'écran : sans cette limite, un mur de 12 vignettes
   hautes pousserait le centre du voile (cadenas, bouton) sous le pli, hors
   d'atteinte puisque la page ne défile plus. */
html.lab-fige .lab-cadre.cadre-verrou { max-height: calc(100dvh - 190px); }
#lab-mur.verrouille {
  filter: blur(9px) saturate(.85);
  pointer-events: none; user-select: none;
}
.mur-verrou {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: 24px;
  /* Le voile : un dégradé discret qui assoit la carte du verrou sans éteindre
     les vignettes — elles doivent se deviner, pas disparaître. */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 14%, transparent) 0%,
    color-mix(in srgb, var(--bg) 34%, transparent) 55%,
    color-mix(in srgb, var(--bg) 72%, transparent) 100%);
}
/* Cadenas « verre dépoli » : une pastille translucide qui floute ce qu'elle
   recouvre, liseré clair en haut — le langage des dernières interfaces Apple. */
.mur-verrou-cadenas {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 24px;
  background: color-mix(in srgb, var(--panel) 42%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.28);
  color: var(--ink);
}
.mur-verrou-cadenas svg { width: 34px; height: 34px; }
.mur-verrou-sous { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.mur-verrou .btn { min-width: 200px; }
.groupe-nav { display: contents; }
/* Section Interne : masquée pour tout le monde, rendue à la maison seule une
   fois que /api/moi a répondu. Masquer par défaut plutôt que l'inverse — un
   client ne doit jamais l'apercevoir, même une fraction de seconde. */
[data-groupe="interne"] { display: none; }
html.maison [data-groupe="interne"] { display: block; }
html.maison .groupe-nav[data-groupe="interne"] { display: contents; }
.side-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--side-line); }

/* Carte de crédits — UNE SEULE LIGNE (décision client 2026-08-22) : anneau
   compact, solde, puis le total en retrait. Le mot « Crédits » n'a plus de
   bandeau de titre, il se lit à côté du nombre. */
.credit-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 10px; display: flex; flex-direction: column;
}
.credit-card[hidden] { display: none; }
.credit-card .cc-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.credit-card .cc-ring { flex: none; display: flex; align-items: center; justify-content: center; }
.credit-card .cc-txt { display: flex; align-items: baseline; min-width: 0; }
.credit-card .cc-txt strong { font-size: 16px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1; }
.credit-card .cc-sur { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.credit-card .cc-mot { font-size: 11.5px; color: var(--ink-soft, var(--muted)); margin-left: 5px; }

/* Raccourci vers les formules, réservé au client qui en a déjà une : c'est le
   seul dégradé rose du pied, il doit se voir sans crier. */

/* Pied hors connexion : une seule porte, pleine largeur, au dégradé d'action. */
.account-card.deconnecte { padding: 0; border: 0; background: transparent; }
.acc-login {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 12px; border-radius: 13px; background: var(--panel);
  border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 600;
}
.acc-login:hover { text-decoration: none; background: var(--side-hover); }
.acc-login svg { width: 15px; height: 15px; }
html.side-min .acc-login { padding: 14px 0; }
html.side-min .acc-login span { display: none; }
@media (max-width: 880px) { .acc-login span { display: none; } .acc-login { padding: 9px 11px; } }

/* Carte du compte : photo, identite, bascule de theme et roue des reglages.
   Elle tient dans la largeur qu on lui donne — le bloc de texte est le seul
   element elastique (min-width: 0 + ellipse), les outils gardent leur taille. */
.account-card {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 4px; transition: border-color 150ms var(--ease-ui);
}
/* Survol BORD À BORD (client 26/08) : la couche de survol se peint PAR-DESSUS
   le fond opaque de la carte (le remplacer rendait la carte translucide), et
   RIEN à l'intérieur ne peint son propre fond — pas de carte dans la carte. */
.account-card:hover {
  background: linear-gradient(var(--side-hover), var(--side-hover)), var(--panel);
  border-color: var(--line-strong, var(--line));
}
.account-card:hover .account-row, .account-card:hover .acc-tools { background: transparent; }
.account-card { transition: background 150ms var(--ease-ui), border-color 150ms var(--ease-ui); }
.acc-tools {
  display: flex; align-items: center; gap: 2px;
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2;
}
/* La ligne s'étend sous le bouton flottant sans que le texte passe dessous. */
.account-card .account-row { padding-right: 40px; }
/* Sidebar pliée et mobile : la carte redevient une colonne, le bouton se range. */

.acc-tool {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; box-shadow: none; color: var(--muted); cursor: pointer;
  transition: background 150ms var(--ease-ui), color 150ms var(--ease-ui);
}
.acc-tool:hover { background: var(--side-hover); color: var(--ink); filter: none; }
.acc-tool svg { width: 15px; height: 15px; }
/* Le libelle du theme ne sert que quand la carte a la place de l afficher. */
.acc-tool span { display: none; }

/* Ligne du compte : photo (ou initiales), nom, e-mail. */
.account-row {
  display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; text-align: left;
  background: transparent; border: 0; border-radius: 11px; padding: 5px 6px;
  cursor: pointer; box-shadow: none; color: var(--ink); font: inherit;
  transition: background 150ms var(--ease-ui);
}
.account-row:hover { background: transparent; filter: none; }
.acc-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
  border: 1px solid var(--line);
}
.acc-ini {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-fill); color: #fff; font-size: 12.5px; font-weight: 700; border: 0;
}
.acc-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.acc-cog { display: flex; color: var(--muted); flex: none; }
.acc-cog svg { width: 14px; height: 14px; }
.account-row:hover .acc-cog { color: var(--ink); }
.acc-txt strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-txt span { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Sidebar pliée (classe `side-min` sur <html>, mémorisée) : icônes seules. */
html.side-min body { padding-left: 78px; }
html.side-min .nova-header { width: 62px; padding-left: 9px; padding-right: 9px; align-items: center; }
html.side-min .brand-row { flex-direction: column; gap: 10px; padding-right: 0; }
html.side-min .nova-header .brand { padding: 0; }
html.side-min .side-label,
html.side-min .side-link span { display: none; }
html.side-min .side-link { justify-content: center; width: 44px; padding: 0; }
html.side-min .side-link.on { border-radius: 12px; }
/* Repli plié : icône seule, chevron caché, sous-liens réalignés dans l'axe. */
html.side-min .side-repli { display: flex; flex-direction: column; align-items: center; }
html.side-min .side-repli .repli-chev { display: none; }
html.side-min .repli-corps .side-link { width: 44px; padding: 0; justify-content: center; }
/* Sidebar pliée : un groupe replié n'a plus de titre lisible, donc on efface sa
   tête et on montre ses icônes à plat (comme les autres sections). */
html.side-min .side-repli.repli-groupe > .repli-tete { display: none; }
html.side-min .side-repli.repli-groupe > .repli-corps { grid-template-rows: 1fr; }
/* Bouton thème plié : règle DÉDIÉE — le Chrome du client applique parfois la
   règle de base malgré une cascade correcte (même caprice documenté sur le CRM :
   ne jamais laisser deux règles génériques s'affronter). Et le pied centre ses
   enfants pour que l'icône tombe dans l'axe des autres. */
html.side-min .side-foot { align-items: center; }
html.side-min .account-card {
  flex-direction: column; gap: 2px; padding: 4px; background: transparent; border: 0; width: 44px;
}
html.side-min .account-row { flex: none; padding: 4px; justify-content: center; }
html.side-min .acc-tools { position: static; transform: none; }
html.side-min .account-card .account-row { padding-right: 4px; }
/* Pied plié : anneau seul (pourcentage) et avatar seul. */
html.side-min .credit-card { padding: 8px 4px; align-items: center; gap: 4px; background: transparent; border: 0; }
/* Anneau reduit une fois plie : a 56 px il debordait de 2 px de la colonne. */
html.side-min .credit-card .cc-ring svg { width: 40px !important; height: 40px !important; }
html.side-min .credit-card .cc-txt { display: none; }
html.side-min .credit-card .cc-row { justify-content: center; }
html.side-min .acc-txt, html.side-min .acc-cog { display: none; }

/* Petits écrans : barre horizontale en haut. */
@media (max-width: 880px) {
  body, html.side-min body { padding-left: 0; }
  html.side-min .nova-header { width: 100%; }
  html.side-min .brand-row { flex-direction: row; }
  .side-toggle { display: none; }
  .nova-header {
    position: sticky; top: 0; bottom: auto; left: 0; width: 100%; height: auto;
    flex-direction: row; align-items: center; gap: 4px; padding: 10px 14px;
    border: 0; border-bottom: 1px solid var(--side-line); border-radius: 0;
    box-shadow: none; overflow: hidden;
  }
  .side-groups {
    display: flex; align-items: center; gap: 4px;
    flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
  }
  .side-groups::-webkit-scrollbar { display: none; }
  .nova-header .spacer { display: none; }
  .side-foot { flex: none; }
  .side-foot { flex-direction: row; align-items: center; gap: 6px; margin-left: auto; }
  .credit-card { flex-direction: row; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 999px; }
  .credit-card .cc-sur, .credit-card .cc-mot { display: none; }
  .credit-card .cc-ring svg { width: 24px !important; height: 24px !important; }
  .account-card { flex: none; padding: 3px; gap: 2px; }
  .acc-tools { position: static; transform: none; }
  .account-card .account-row { padding-right: 3px; }
  .account-row { flex: none; padding: 3px; }
  .acc-txt, .acc-cog { display: none; }
  .nova-header .brand { margin-bottom: 0; padding: 0 6px 0 0; }
  .side-label { display: none; }
  .side-link { width: auto; white-space: nowrap; padding: 7px 10px; }
  .side-link.on::before { display: none; }
  .side-foot { border-top: 0; padding-top: 0; margin-top: 0; }
}

/* ================= Structure de page ================= */
main { max-width: 1200px; margin: 0 auto; padding: 28px 32px 64px; }

.page-head { display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 24px; animation: ncRise 0.5s var(--ease) both; }
.page-head h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; color: var(--ink-strong); }
@media (min-width: 768px) { .page-head h1 { font-size: 27px; } }
.page-head .sub { color: var(--muted); font-size: 13px; margin: 4px 0 0; line-height: 1.5; }
.page-head .actions { display: flex; gap: 6px; flex-wrap: wrap; }

h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--muted); margin: 30px 0 14px; }
h2:first-child { margin-top: 0; }

.card {
  background: var(--surface-grad), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--sh-card);
}
.muted { color: var(--muted); font-size: 13px; line-height: 1.55; }
.empty {
  color: var(--muted); font-size: 13px; line-height: 1.625; padding: 48px 24px; text-align: center;
  border: 1px dashed var(--veil-08); border-radius: var(--r-lg);
}
.banner {
  background: var(--banner-bg); border: 1px solid var(--banner-line); color: var(--banner-ink);
  border-radius: var(--r-btn); padding: 10px 13px; font-size: 12.5px; line-height: 1.5;
}

/* ================= Boutons ================= */
button, .btn {
  font: inherit; font-weight: 600; font-size: 14px; border: 0; border-radius: var(--r-md);
  padding: 10px 16px; cursor: pointer; background: var(--accent-fill); color: #fff;
  display: inline-block; text-align: center; box-shadow: var(--sh-accent);
  transition: filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
button:hover, .btn:hover { filter: brightness(1.1); box-shadow: var(--sh-accent-hover); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: default; filter: saturate(0.4) brightness(0.85); box-shadow: none; }
.btn-ghost {
  background: var(--quiet); color: var(--ink-soft); border: 1px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { background: var(--veil-06); border-color: rgba(255,255,255,0.2); filter: none; box-shadow: none; }
html.light .btn-ghost:hover { border-color: rgba(17,17,24,0.2); }
.btn-danger {
  background: rgba(239, 68, 68, 0.10); color: var(--danger-soft);
  border: 1px solid rgba(239, 68, 68, 0.30); box-shadow: none;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.50); filter: none; box-shadow: none; }
.theme-btn { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 7px 12px; font-size: 13px; box-shadow: none; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--veil-08); color: var(--muted);
}
.tag.ok { color: var(--a-200); border-color: var(--accent-bd); background: var(--accent-soft); }
.tag.warn { background: var(--banner-bg); border-color: var(--banner-line); color: var(--banner-ink); }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--surface-grad), var(--panel); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--sh-card);
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; z-index: 96;
  animation: ncSlideUp 0.32s var(--ease) both;
}

/* ================= Grille de produits ================= */
.grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-card {
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; cursor: pointer; color: inherit; display: block;
  box-shadow: var(--sh-card);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.product-card:hover { transform: translateY(-2px); border-color: var(--accent-hover-bd); box-shadow: var(--sh-card-hover); text-decoration: none; }
.product-card .ph { aspect-ratio: 1; background: var(--photo); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.product-card .ph img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.product-card .body { padding: 13px 15px 15px; }
.product-card .body strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }

/* ================= Grille de générations ================= */
.grid-gen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gen {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-grad), var(--panel); box-shadow: var(--sh-card);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.gen:hover { transform: translateY(-2px); border-color: var(--accent-hover-bd); box-shadow: var(--sh-card-hover); z-index: 2; }
.gen .shot { display: block; aspect-ratio: 1; background: var(--photo-crea); cursor: pointer; }
.gen .shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gen .shot video { width: 100%; height: 100%; object-fit: contain; display: block; }
.gen figcaption { padding: 9px 12px 11px; font-size: 11.5px; font-weight: 500; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }

.dots {
  position: absolute; right: 10px; bottom: 46px; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; background: rgba(20,20,20,.62); color: #fff; font-size: 17px; line-height: 1;
  letter-spacing: 1px; opacity: 0; transition: opacity .18s ease; backdrop-filter: blur(3px); box-shadow: none;
}
.gen:hover .dots, .dots:focus-visible, .dots.open { opacity: 1; }

.menu {
  position: absolute; right: 10px; bottom: 84px; background: var(--surface-grad), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-card);
  overflow: hidden; min-width: 168px; z-index: 5;
}
.menu button {
  display: block; width: 100%; text-align: left; background: transparent; color: var(--ink);
  border-radius: 0; font-weight: 500; padding: 10px 14px; font-size: 13px; box-shadow: none;
}
.menu button:hover { background: var(--veil-05); filter: none; }
.menu button.danger { color: var(--danger); border-top: 1px solid var(--line); }

/* ================= Modales ================= */
/* ⚠️ Le voile DÉFILE et la fenêtre se centre par « margin: auto », pas par
   « align-items: center ». Un enfant centré par align-items qui dépasse son
   conteneur déborde des DEUX côtés et son haut devient inatteignable, même
   avec overflow-y: auto — c'est le piège classique du flex centré. Avec
   margin: auto, la fenêtre se centre quand elle tient et se colle en haut
   quand elle ne tient pas, donc rien n'est jamais hors d'atteinte. */
.overlay {
  position: fixed; inset: 0; background: var(--overlay); display: flex;
  align-items: flex-start; justify-content: center; padding: 24px; z-index: 80;
  overflow-y: auto; overscroll-behavior: contain;
  backdrop-filter: blur(12px); animation: ncFadeIn 0.22s var(--ease) both;
}
/* Deuxième filet : la fenêtre ne dépasse jamais la hauteur visible et défile
   dans son propre cadre. Les deux mécanismes se complètent — l'un pour les
   contenus très longs, l'autre pour les navigateurs sans 100dvh. */
.modal {
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-modal); padding: 24px; max-width: 480px; width: 100%;
  margin: auto; max-height: calc(100dvh - 48px); overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--sh-card); animation: ncSlideUp 0.32s var(--ease) both;
}
/* ---- Menu du compte (façon ChatGPT, client 26/08) : ancré au-dessus de la
   carte, une entrée par ligne, Se déconnecter isolé en bas. ---- */
.account-card { position: relative; }
.acc-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px; box-shadow: var(--sh-card-hover, 0 12px 32px rgba(0,0,0,.4));
  display: flex; flex-direction: column; gap: 2px;
}
.acc-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; box-shadow: none; color: var(--ink);
  font-size: 13px; font-weight: 500; padding: 9px 10px; border-radius: 9px;
}
.acc-menu button:hover { background: var(--side-hover); filter: none; }
.acc-menu button svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.acc-menu button.sortie { color: #ff5b66; }
.acc-menu button.sortie svg { color: #ff5b66; }
.acc-menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
html.side-min .acc-menu { left: auto; right: -8px; min-width: 220px; }

/* ---- Fenêtre Paramètres : croix en haut à GAUCHE, sidebar interne. ---- */
.modal.parametres { max-width: 680px; position: relative; padding: 0; overflow: hidden; }
.param-x { position: absolute; top: 12px; left: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--quiet); color: var(--muted); box-shadow: none; font-size: 17px; }
.param-x:hover { color: var(--ink); filter: none; }
.param-corps { display: flex; min-height: 380px; }
.param-nav {
  flex: 0 0 168px; padding: 52px 10px 16px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; background: var(--side-bg, var(--quiet));
}
.param-nav button {
  text-align: left; background: transparent; border: 0; box-shadow: none; color: var(--ink-soft);
  font-size: 13.5px; font-weight: 500; padding: 9px 12px; border-radius: 9px;
}
.param-nav button:hover { background: var(--side-hover); filter: none; }
.param-nav button.on { background: var(--side-hover); color: var(--ink); font-weight: 600; }
.param-contenu { flex: 1; padding: 48px 22px 22px; min-width: 0; overflow-y: auto; max-height: calc(100dvh - 120px); }
.param-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.param-contenu > .param-label:first-child { margin-top: 0; }
.param-select { width: 100%; max-width: 300px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 14px; background: var(--field); color: var(--ink); }
.param-formule { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--field); }
.param-formule strong { display: block; font-size: 15px; }
.param-formule span { color: var(--muted); font-size: 12.5px; }
.param-transactions { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.param-tx { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); }
.param-tx .tx-date { color: var(--muted); flex: 0 0 82px; font-size: 12px; }
.param-tx .tx-libelle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param-tx .tx-montant { font-weight: 600; }
.param-tx .tx-statut { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .param-corps { flex-direction: column; } .param-nav { flex: none; flex-direction: row; padding: 48px 10px 8px; border-right: 0; border-bottom: 1px solid var(--line); } }

/* La fenêtre Mon compte respire un peu plus large (+20 %, demande client 22/08). */
.modal.compte { max-width: 576px; position: relative; }
.modal .theme-pop { position: absolute; top: 18px; right: 18px; }
.modal .theme-pop span { display: none; }
.modal h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.modal .actions { display: flex; gap: 10px; margin-top: 18px; }
.modal .actions > * { flex: 1; }
.link-row { display: flex; gap: 8px; margin-top: 14px; }
.link-row input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn);
  font: inherit; font-size: 13px; background: var(--field); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.link-row input:focus { outline: none; background: var(--field-focus); border-color: rgba(12,199,99,0.6); box-shadow: 0 0 0 3.5px rgba(12,199,99,0.14); }

/* ================= Fiches ================= */
.masters { display: flex; flex-wrap: wrap; gap: 14px; }
.masters figure { margin: 0; width: 148px; }
.masters img { width: 148px; height: 148px; object-fit: contain; background: var(--photo); border: 1px solid var(--line); border-radius: var(--r-btn); }
.masters figcaption { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

dl.setup { display: grid; grid-template-columns: 165px 1fr; gap: 9px 16px; margin: 0; font-size: 14px; }
dl.setup dt { color: var(--muted); font-size: 12.5px; }
dl.setup dd { margin: 0; color: var(--ink); }

table.strings { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.strings th, table.strings td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--veil-05); vertical-align: top; }
table.strings th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

textarea.desc {
  width: 100%; min-height: 118px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 14px; line-height: 1.6; background: var(--field); color: var(--ink); resize: vertical;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
textarea.desc:focus { outline: none; background: var(--field-focus); border-color: rgba(12,199,99,0.6); box-shadow: 0 0 0 3.5px rgba(12,199,99,0.14); }

/* ================= Onglets et filtres ================= */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs button {
  background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 9px 15px; font-size: 13px; font-weight: 600; box-shadow: none;
}
.tabs button:hover { color: var(--ink-soft); filter: none; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--a-400); }
.tabs .count { font-weight: 500; color: var(--muted); margin-left: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters button {
  background: transparent; color: var(--muted); border: 1px solid var(--veil-08);
  border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.filters button:hover { border-color: rgba(255,255,255,0.2); color: var(--ink-soft); filter: none; }
html.light .filters button:hover { border-color: rgba(17,17,24,0.2); }
.filters button.on { background: var(--accent-soft); color: var(--a-200); border-color: var(--accent-bd); }

.folder-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.folder-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--veil-08);
  border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: transparent; cursor: pointer; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.folder-chip:hover { border-color: rgba(255,255,255,0.2); color: var(--ink-soft); filter: none; }
html.light .folder-chip:hover { border-color: rgba(17,17,24,0.2); }
.folder-chip.on { background: var(--accent-soft); color: var(--a-200); border-color: var(--accent-bd); }
.folder-chip .x { opacity: .6; font-weight: 700; }

/* ================= Boutons contextuels ================= */
.product-card { position: relative; }
.card-dots {
  position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  font-size: 15px; line-height: 1; letter-spacing: 1px; opacity: 0; transition: opacity .18s ease; z-index: 3; box-shadow: none;
}
.product-card:hover .card-dots, .card-dots:focus-visible, .card-dots.open { opacity: 1; }
.dots-inline {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; background: transparent;
  color: var(--muted); border: 1px solid var(--line); font-size: 16px; line-height: 1; letter-spacing: 1px; box-shadow: none;
}
.dots-inline:hover { color: var(--ink); filter: none; background: var(--veil-06); }
.menu.anchored { position: absolute; }

.editable { position: relative; }
.pencil {
  position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; background: var(--quiet); color: var(--muted); border: 1px solid var(--line);
  font-size: 14px; line-height: 1; box-shadow: none;
}
.pencil:hover { color: var(--accent-text); border-color: var(--accent-bd); filter: none; }
.editable .card-actions { display: flex; gap: 9px; margin-top: 14px; }

/* ================= Sélections d'éléments ================= */
.element-pick { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.element-pick label {
  display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 9px 12px; cursor: pointer; background: var(--quiet);
}
.element-pick label.disabled { opacity: .45; cursor: not-allowed; }
.element-pick input { width: auto; margin: 0; accent-color: var(--accent); }
.element-pick img { width: 34px; height: 34px; object-fit: contain; background: var(--photo); border-radius: 6px; }
.subject-count { font-size: 12px; color: var(--muted); margin-top: 8px; }
.subject-count.over { color: var(--danger); font-weight: 600; }

.prodpick { position: relative; }
.prodpick-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--field); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-btn); padding: 9px 12px; font-weight: 500; font-size: 14px; box-shadow: none;
}
.prodpick-btn:hover { filter: none; border-color: var(--line-strong); }
.prodpick-btn img { width: 44px; height: 44px; object-fit: contain; background: var(--photo); border: 1px solid var(--line); border-radius: 7px; }
.prodpick-btn .chev { margin-left: auto; color: var(--muted); font-size: 12px; }
.prodpick-btn .ph-vide {
  width: 44px; height: 44px; border: 1px dashed var(--line); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px;
}
.prodpick-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-card); max-height: 340px; overflow-y: auto; padding: 6px;
}
.prodpick-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; color: var(--ink); border: 0; border-radius: 9px;
  padding: 8px 10px; font-weight: 500; font-size: 13.5px; box-shadow: none;
}
.prodpick-item:hover { background: var(--veil-05); filter: none; }
.prodpick-item.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.prodpick-item img { width: 44px; height: 44px; object-fit: contain; background: var(--photo); border: 1px solid var(--line); border-radius: 7px; }
.prodpick-item .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.prodpick-item:disabled { opacity: .45; cursor: not-allowed; }

/* ================= Page Générer ================= */
.genx { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 26px; max-width: 1500px; margin: 0 auto; padding: 22px 26px 60px; align-items: start; }
@media (max-width: 1020px) { .genx { grid-template-columns: 1fr; } }

.tool {
  position: sticky; top: 18px; background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100dvh - 36px); overflow-y: auto;
}
@media (max-width: 1020px) { .tool { position: relative; top: 0; max-height: none; } }
.tool-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--ink); }
.tool .lbl {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 7px;
}
.tool select, .tool input[type=text] {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-btn);
  font: inherit; font-size: 13.5px; background: var(--field); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tool select:hover, .tool input[type=text]:hover { border-color: var(--line-strong); }
.tool select:focus, .tool input[type=text]:focus { outline: none; border-color: rgba(12,199,99,0.6); box-shadow: 0 0 0 3.5px rgba(12,199,99,0.14); }
.tool .hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.tool .row2 { display: flex; gap: 10px; }
.tool .row2 > div { flex: 1; }

.refs { display: flex; flex-wrap: wrap; gap: 9px; }
.ref-card { width: 76px; position: relative; display: flex; flex-direction: column; gap: 4px; }
.ref-card .ph {
  width: 76px; height: 76px; border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--photo); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ref-card .ph img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.ref-card .tag-name {
  font-size: 10.5px; font-weight: 600; color: var(--accent-text); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-card .rm {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 0; background: var(--danger-solid); color: #fff; font-size: 12px;
  line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: none;
}
.ref-card:hover .rm { opacity: 1; }
.ref-add {
  width: 76px; height: 76px; border: 1.5px dashed var(--veil-10); border-radius: var(--r-btn);
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; font-size: 10.5px; font-weight: 600; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.ref-add:hover { border-color: var(--accent-bd); color: var(--accent-text); filter: none; }
.ref-add svg { width: 18px; height: 18px; }

.promptbox { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--field); overflow: hidden; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.promptbox:focus-within { border-color: rgba(12,199,99,0.6); box-shadow: 0 0 0 3.5px rgba(12,199,99,0.14); }
.promptbox .layer, .promptbox textarea {
  font: inherit; font-size: 13.5px; line-height: 1.6; padding: 11px 12px;
  margin: 0; border: 0; width: 100%; min-height: 120px; white-space: pre-wrap; word-wrap: break-word;
}
.promptbox .layer { position: absolute; inset: 0; color: var(--ink); pointer-events: none; overflow: hidden; }
.promptbox .layer mark { background: var(--accent-soft); color: var(--a-200); border-radius: 5px; font-weight: 600; padding: 1px 0; }
.promptbox textarea {
  position: relative; background: transparent; color: transparent; caret-color: var(--ink);
  resize: vertical; display: block; outline: none;
}
.promptbox textarea::placeholder { color: var(--ghost); }

.at-menu {
  position: absolute; z-index: 40; background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-card); overflow: hidden; min-width: 230px; max-height: 260px; overflow-y: auto;
}
.at-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px;
  background: transparent; border: 0; font: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; text-align: left; box-shadow: none; border-radius: 0;
}
.at-menu button img { width: 28px; height: 28px; object-fit: contain; background: var(--photo); border-radius: 6px; border: 1px solid var(--line); }
.at-menu button .pastille {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 6px; border: 1px solid var(--line); background: var(--quiet);
  color: var(--muted); font-size: 12px; font-weight: 700;
}
.at-menu button:hover, .at-menu button.sel { background: var(--veil-05); filter: none; }
.at-menu .at-tag { color: var(--accent-text); font-weight: 600; }
.at-menu .at-sub { color: var(--muted); font-size: 11px; margin-left: auto; }

.tool-foot { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cost-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.cost-line strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.btn-generate {
  width: 100%; padding: 12px 16px; font-size: 14.5px; border-radius: var(--r-md);
  background: var(--accent-fill); color: #fff; font-weight: 700; border: 0; cursor: pointer;
  box-shadow: var(--sh-accent);
  transition: filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-generate:hover { filter: brightness(1.1); box-shadow: var(--sh-accent-hover); }
.btn-generate:active { transform: translateY(1px); }
.btn-generate:disabled { opacity: .6; cursor: default; filter: saturate(0.4) brightness(0.85); box-shadow: none; }
.tool .error { color: var(--danger); font-size: 12.5px; white-space: pre-wrap; }

/* ================= Flux des créations ================= */
.feed { min-width: 0; }
.feed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.feed-head h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.feed-head .count { color: var(--muted); font-size: 13px; }
.feed-head input {
  margin-left: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 13px; background: var(--quiet); color: var(--ink); width: 220px;
  transition: border-color .18s var(--ease);
}
.feed-head input:focus { outline: none; border-color: rgba(12,199,99,0.6); }
.run-group { margin-bottom: 26px; animation: ncRise 0.5s var(--ease) both; }
.run-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.run-head .prompt-x { font-size: 13.5px; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.run-head .meta-x { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.run-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb, 210px), 1fr)); gap: 14px; }

.skel { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.skel .sq {
  aspect-ratio: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 220% 100%; animation: ncShimmer 1.6s ease-in-out infinite;
}
html.light .skel .sq { background: linear-gradient(90deg, rgba(17,17,24,0.05) 25%, rgba(17,17,24,0.1) 50%, rgba(17,17,24,0.05) 75%); background-size: 220% 100%; }
.skel .cap { padding: 9px 12px; font-size: 12px; color: var(--muted); }

/* Onglets du flux (Créations / Mes modèles) + contrôles */
.feed-tabs { display: flex; gap: 6px; }
.feed-tabs button {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: transparent; color: var(--muted); border: 1px solid transparent;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.feed-tabs button svg { width: 15px; height: 15px; }
.feed-tabs button:hover { color: var(--ink-soft); filter: none; }
.feed-tabs button.on { background: var(--veil-06); color: var(--ink); border-color: var(--line); }
.feed-ctrl { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.feed-ctrl input[type="search"], .feed-ctrl input[type="text"] { min-width: 0; max-width: 100%; }
.feed-ctrl select {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 12px; background: var(--quiet); color: var(--ink);
}
.fav-toggle {
  width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
.fav-toggle:hover { filter: none; color: var(--ink-soft); }
.fav-toggle svg { width: 16px; height: 16px; }
.fav-toggle.on { color: #ff5b66; border-color: rgba(255, 91, 102, 0.5); }

.gen .fav, .lab-carte .fav {
  position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; background: rgba(20,20,20,.55); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity .15s; backdrop-filter: blur(3px); box-shadow: none;
}
.gen:hover .fav, .gen .fav.on, .lab-carte:hover .fav, .lab-carte .fav.on { opacity: 1; }
.gen .fav.on, .lab-carte .fav.on { color: #ff5b66; }
.gen .fav svg, .lab-carte .fav svg { width: 15px; height: 15px; }
/* Au-dessus du voile de survol de la carte du Lab. */
.lab-carte .fav { z-index: 7; }

.grid-size { display: flex; border: 1px solid var(--line); border-radius: 999px; background: var(--quiet); overflow: hidden; }
.grid-size button {
  width: 32px; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
.grid-size button:hover { filter: none; color: var(--ink-soft); }
.grid-size button svg { width: 15px; height: 15px; }
.grid-size button.on { background: var(--veil-08); color: var(--ink); }

.gen .sel {
  position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,.85); background: rgba(20,20,20,.35); color: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity .15s; backdrop-filter: blur(3px); font-size: 13px; line-height: 1; box-shadow: none;
}
.gen:hover .sel, .gen .sel.on, .feed.selecting .gen .sel { opacity: 1; }
.gen .sel.on { background: var(--a-400); border-color: var(--a-400); color: #fff; }
.gen.selected { outline: 2px solid var(--a-400); outline-offset: 1px; }

.selbar {
  position: sticky; top: 12px; z-index: 25; display: flex; align-items: center; gap: 10px;
  background: var(--surface-grad), var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 10px 8px 16px;
  box-shadow: var(--sh-card); margin-bottom: 14px; font-size: 13px; font-weight: 600;
}
.selbar button {
  background: var(--veil-06); color: inherit; border: 0; border-radius: 999px;
  padding: 7px 13px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none;
}
.selbar button:hover { background: var(--veil-10); filter: none; }
.selbar .x { margin-left: auto; width: 30px; height: 30px; padding: 0; border-radius: 50%; }

/* ================= Viewer (volontairement sombre dans les deux thèmes) ================= */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(5, 5, 4, .93); display: flex; animation: ncFadeIn 0.22s var(--ease) both; }
.viewer .stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 34px; min-width: 0; position: relative; }
.viewer .stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: var(--photo-crea); }
.viewer .close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 17px; cursor: pointer; box-shadow: none;
}
.viewer .navb {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; box-shadow: none;
}
.viewer .navb.prev { left: 14px; }
.viewer .navb.next { right: 14px; }
.viewer .close:hover, .viewer .navb:hover { filter: none; background: rgba(255,255,255,.2); }
.viewer aside {
  width: 320px; flex: none; background: #0c0c0f; color: #ece9e2; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto; border-left: 1px solid rgba(255,255,255,.07);
}
.viewer aside .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8b8b95; }
.viewer aside .vprompt { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.viewer .vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.viewer .vchips span { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.09); }
.viewer .vdate { font-size: 12px; color: #8b8b95; }
.viewer .vactions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.viewer .vactions button, .viewer .vactions a {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 13px; border-radius: var(--r-btn);
  border: 0; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.08); color: #ece9e2; box-shadow: none;
}
.viewer .vactions button:hover, .viewer .vactions a:hover { background: rgba(255,255,255,.14); text-decoration: none; filter: none; }
.viewer .vactions .primary { background: #f4f2ec; color: #171612; }
.viewer .vactions .primary:hover { background: #fff; }
.viewer .vactions .danger { color: #ff7b7b; }
.viewer .vactions svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 900px) { .viewer { flex-direction: column; } .viewer aside { width: 100%; border-left: 0; } }

/* ================= Mes modèles ================= */
.model-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.model-card {
  display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: var(--surface-grad), var(--panel); color: var(--ink); cursor: pointer;
  min-height: 150px; text-align: left; padding: 0; font: inherit; font-weight: 400;
  box-shadow: var(--sh-card);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.model-card:hover { transform: translateY(-2px); border-color: var(--accent-hover-bd); box-shadow: var(--sh-card-hover); filter: none; }
.model-card .info { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.model-card .info .grp { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); opacity: .9; }
.model-card .info strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.model-card .info p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.model-card .info .use { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--accent-text); }
.model-card .vis { width: 42%; flex: none; background: var(--field); position: relative; }
.model-card .vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.model-card .vis .ph-grad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.model-card .vis .ph-grad svg { width: 34px; height: 34px; opacity: .9; }

/* ================= Sélecteur de références (3 colonnes) ================= */
/* z-index 90 : le picker s'ouvre toujours EN DERNIER, il doit passer au-dessus
   de tout — dont le pop-up de template (.tploverlay, 85) qui le masquait quand
   on cliquait « Choisir un produit » depuis un workflow (bug client 24/08). */
.picker { position: fixed; inset: 0; z-index: 90; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 22px; backdrop-filter: blur(12px); animation: ncFadeIn 0.22s var(--ease) both; }
.picker .box {
  width: min(900px, 100%); height: min(560px, 92dvh); background: var(--surface-grad), var(--panel); border: 1px solid var(--line); border-radius: var(--r-modal);
  box-shadow: var(--sh-card); display: flex; overflow: hidden; position: relative;
  animation: ncSlideUp 0.32s var(--ease) both;
}
.picker .cats { width: 190px; flex: none; background: var(--sunken); border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.picker .cats .t { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ghost); padding: 0 10px; margin-bottom: 8px; }
.picker .cats button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
  background: transparent; border: 0; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; text-align: left; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.picker .cats button svg { width: 16px; height: 16px; }
.picker .cats button:hover { color: var(--ink-soft); filter: none; }
.picker .cats button.on { background: var(--veil-06); color: var(--ink); font-weight: 600; }
.picker .mid { flex: 1; padding: 16px; overflow-y: auto; min-width: 0; }
.picker .mid h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.picker .mid input[type=search] {
  width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-btn);
  font: inherit; font-size: 13px; background: var(--field); color: var(--ink); margin-bottom: 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.picker .mid input[type=search]:focus { outline: none; border-color: rgba(12,199,99,0.6); box-shadow: 0 0 0 3.5px rgba(12,199,99,0.14); }
.picker .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; }
.picker .cell { border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit; text-align: center; box-shadow: none; }
.picker .cell:hover { filter: none; }
.picker .cell .ph { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--photo); overflow: hidden; }
.picker .cell .ph img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.picker .cell:hover .ph { border-color: var(--accent-bd); }
.picker .cell .nm { display: block; font-size: 11px; font-weight: 600; color: var(--accent-text); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .drop {
  width: 215px; flex: none; margin: 16px; border: 1.5px dashed var(--veil-10); border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font-size: 12.5px; text-align: center; padding: 14px;
}
.picker .drop.over { border-color: var(--accent-bd); color: var(--accent-text); }
.picker .drop > svg { width: 30px; height: 30px; flex: none; }
.picker .drop button { width: 100%; }
.picker .x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--quiet); color: var(--ink); border: 1px solid var(--line); font-size: 15px; box-shadow: none; }
.picker .x:hover { filter: none; background: var(--veil-06); }
@media (max-width: 760px) { .picker .drop { display: none; } .picker .cats { width: 150px; } }

/* ================= Page Studio marketing ================= */
.studiox { max-width: 1240px; margin: 0 auto; padding: 26px 30px 70px; }
.hero { text-align: center; padding: 8px 0 6px; }
.hero .hero-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px; background: var(--quiet);
}
.hero-fan { display: flex; justify-content: center; align-items: center; margin: 22px 0 6px; height: 210px; }
.hero-fan .fan-card {
  width: 190px; height: 150px; border-radius: var(--r-md); overflow: hidden; position: relative;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.8); border: 1px solid var(--line);
  flex: none; background: var(--panel);
}
html.light .hero-fan .fan-card { box-shadow: 0 18px 44px -18px rgba(15,20,30,.35); }
.hero-fan .fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-fan .fan-card::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(8, 8, 10, 0.14); pointer-events: none; }
html.light .hero-fan .fan-card::after { background: rgba(255, 255, 255, 0.12); }
.hero-fan .fan-card .cat {
  position: absolute; left: 9px; bottom: 9px; z-index: 6; font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: #fff;
  background: rgba(10,10,8,.55); padding: 4px 8px; border-radius: 999px; backdrop-filter: blur(3px);
}
/* Le nom de la fiche reste lisible PAR-DESSUS le diaporama, assis sur un voile
   dégradé en tête de carte. */
.hero-fan .fan-card .nom {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: 9px 11px 22px;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  background: linear-gradient(to bottom, rgba(8,8,10,.62), transparent);
  pointer-events: none;
}
/* Diaporama : deux calques par carte, fondu croisé rapide.
   ⚠️ `border-radius: inherit` OBLIGATOIRE : la transition d'opacité promeut
   l'image en calque composité, et un calque composité n'est PLUS découpé par le
   `overflow:hidden` + `border-radius` du parent — l'image débordait des coins
   arrondis le temps du fondu. Elle se découpe donc elle-même. */
.hero-fan .fan-card .diapo {
  position: absolute; inset: 0; z-index: 4; opacity: 0;
  border-radius: inherit;
  /* Fondu RAPIDE (demande client 25/08) : l'entrante couvre la sortante en 280 ms. */
  transition: opacity 280ms var(--ease-ui);
}
.hero-fan .fan-card .diapo.on { opacity: 1; }

/* L'éventail est DÉCORATIF : on ne doit pas pouvoir attraper une image, la
   glisser hors de la carte ni la sélectionner. */
.hero-fan img {
  -webkit-user-drag: none; -khtml-user-drag: none; user-drag: none;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.hero-fan .fan-card { user-select: none; }
.hero-fan .fan-card:nth-child(1) { transform: rotate(-7deg) translateX(26px) scale(.86); z-index: 1; }
.hero-fan .fan-card:nth-child(2) { transform: rotate(-3deg) translateX(12px) scale(.94); z-index: 2; }
.hero-fan .fan-card:nth-child(3) { transform: none; z-index: 3; width: 225px; height: 175px; }
.hero-fan .fan-card:nth-child(4) { transform: rotate(3deg) translateX(-12px) scale(.94); z-index: 2; }
.hero-fan .fan-card:nth-child(5) { transform: rotate(7deg) translateX(-26px) scale(.86); z-index: 1; }
.hero h1 {
  margin: 20px 0 4px; font-size: clamp(26px, 4.2vw, 42px); line-height: 1.06;
  font-weight: 800; letter-spacing: -0.025em; text-transform: uppercase; color: var(--ink-strong);
}
.hero h1 .dim { color: var(--muted); }

/* Barre de génération centrale.
   La carte média a une TAILLE FIXE (108px, demande client 24/08 soir : « elle
   ne doit jamais changer de taille ») : la wrap centre les deux, la barre peut
   grandir avec le texte, la carte reste immuable. */
.genbar-wrap { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; }
.genbar {
  flex: 1 1 auto; min-width: 0; max-width: 1140px; background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--sh-card); padding: 12px 16px; display: flex; gap: 13px; align-items: stretch;
  /* Hauteur de croisière 108px = version compacte (90px) × 1,2 — réglage
     client 24/08 (le « 2× » était une erreur de dictée, corrigée) : le prompt
     colle en haut, les réglages en bas (space-between du .mid). Le texte long
     la fait grandir au-delà, comme avant. */
  min-height: 108px;
}
/* Les bandeaux masqués (fichiers, saisies, annotations) portent [hidden] MAIS
   leurs règles display:flex battaient le style UA de l'attribut : trois blocs
   vides gonflaient la barre de ~57px invisibles (mesuré 24/08). */
.genbar [hidden] { display: none !important; }

/* Carte du média (Image / Vidéo) : à part, à GAUCHE de la barre — référence
   validée par le client (24/08). Une colonne : tuile active + libellé, la
   vidéo grisée tant qu'elle n'est pas livrée. */
.media-card {
  flex: none; height: 108px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 6px 10px; border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.12) 100%), #101116;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 18px 44px -20px rgba(0, 0, 0, 0.9);
}
.media-card .mc-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; box-shadow: none;
  color: #fff; font: inherit; font-size: 11px; font-weight: 700;
}
/* Proportions calées sur la barre à 108px : contenu naturel ~104px — TOUJOURS
   sous la hauteur par défaut de la barre, sinon c'est la carte qui l'étire. */
.media-card .mc-btn .ic {
  width: 46px; height: 26px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: currentColor;
  transition: 150ms var(--ease-ui);
}
.media-card .mc-btn .ic svg { width: 15px; height: 15px; }
.media-card .mc-btn.on .ic { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.media-card .mc-btn:hover { filter: none; }
.media-card .mc-btn:disabled { color: #767c87; cursor: default; opacity: 1; }
html.light .media-card {
  border-color: rgba(20, 22, 26, 0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(20,22,26,0.03) 100%), #f3f3f1;
  box-shadow: 0 18px 44px -24px rgba(20, 22, 26, 0.35);
}
html.light .media-card .mc-btn { color: #16181d; }
html.light .media-card .mc-btn.on .ic { background: rgba(20, 22, 26, 0.06); border-color: rgba(20, 22, 26, 0.16); }
html.light .media-card .mc-btn:disabled { color: #9aa0ab; }
/* Mobile : la carte passe en RANGÉE au-dessus de la barre — à gauche elle
   écrasait le prompt (constaté au premier essai 375px). Et dans la barre,
   plus d'espacement « space-between » : le prompt et les réglages se suivent,
   Assets + Générer forment une rangée basse de hauteur fixe. */
@media (max-width: 760px) {
  /* En colonne, align-items:center ferait dimensionner la barre sur son
     CONTENU (mesuré : 970px de large sur un écran de 375) — stretch, et la
     carte seule reste centrée. */
  .genbar-wrap { flex-direction: column; align-items: stretch; }
  .media-card { flex-direction: row; gap: 26px; padding: 10px 20px; border-radius: 20px; align-self: center; height: auto; }
  .genbar .mid { justify-content: flex-start; }
  .genbar .assets { order: 2; }
  .genbar .go { order: 3; flex: 1 1 auto; height: 56px; align-self: flex-end; }
  .genbar .asset-slot { height: 56px; }
}
.genbar .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 7px; }
.genbar textarea {
  border: 0; outline: none; resize: none; font: inherit; font-size: 14.5px; line-height: 1.5;
  background: transparent; color: var(--ink); min-height: 40px; padding: 4px 4px 0;
}
.genbar textarea::placeholder { color: var(--ghost); }
.genbar .chips {
  display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; padding-bottom: 1px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
/* Fondu SEULEMENT du côté où du contenu déborde (classes posées par le JS au
   scroll). Un fondu statique côté droit coupait net le bord gauche dès que la
   rangée était défilée. */
.genbar .chips.fondu-d {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.genbar .chips.fondu-g {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28px);
}
.genbar .chips.fondu-g.fondu-d {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.genbar .chips::-webkit-scrollbar { display: none; }
.genbar .chips > * { flex: none; }
.genbar .chips .chip {
  display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--line); background: var(--quiet); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.genbar .chips .chip svg { width: 14px; height: 14px; }
.genbar .chips .chip:hover { border-color: var(--line-strong); filter: none; }
.genbar .assets { display: flex; gap: 8px; flex: none; }
.genbar .asset-slot {
  width: 74px; border-radius: 13px; border: 1px solid var(--line); background: var(--quiet);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; padding: 8px 6px; position: relative; overflow: hidden; box-shadow: none;
}
.genbar .asset-slot:hover { filter: none; border-color: var(--line-strong); }
.genbar .asset-slot .plus { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); }
.genbar .asset-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--photo); padding: 4px; }
.genbar .asset-slot .nm { position: absolute; bottom: 4px; left: 4px; right: 4px; background: rgba(10,10,8,.55); color: #fff; border-radius: 6px; padding: 2px 4px; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.genbar .asset-slot:disabled { opacity: 1; cursor: default; color: #7b828d; border-color: rgba(255,255,255,0.12); }
.genbar .asset-slot:disabled .plus { opacity: .6; }
.genbar .go {
  flex: none; border: 0; border-radius: 13px; padding: 0 22px; background: var(--accent-fill);
  color: #fff; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .4px;
  cursor: pointer; text-transform: uppercase; box-shadow: var(--sh-accent);
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.genbar .go:hover { filter: brightness(1.1); }
.genbar .go:active { transform: translateY(1px); }
.genbar .go:disabled { opacity: .55; cursor: default; filter: saturate(0.4) brightness(0.85); box-shadow: none; }
.studio-error { text-align: center; color: var(--danger); font-size: 13px; margin-top: 10px; white-space: pre-wrap; }
.studio-results { width: min(1140px, 100%); margin: 18px auto 0; }
@media (max-width: 760px) { .genbar { flex-wrap: wrap; } .genbar .mid { min-width: 100%; order: -1; } }

/* Explorer les templates */
.explore { margin-top: 46px; }
.explore h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink-strong); margin: 0 0 14px; }
.explore .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.explore .chips button {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--veil-08); background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.explore .chips button:hover { filter: none; color: var(--ink-soft); border-color: rgba(255,255,255,0.2); }
html.light .explore .chips button:hover { border-color: rgba(17,17,24,0.2); }
.explore .chips button.on { background: var(--accent-soft); color: var(--a-200); border-color: var(--accent-bd); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tpl-card {
  position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 4/3; cursor: pointer; padding: 0; background: var(--panel); font: inherit; text-align: left; box-shadow: var(--sh-card);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.tpl-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-card .grad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.2px; padding: 12px; text-align: center; }
.tpl-card .cat {
  position: absolute; left: 9px; bottom: 9px; font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: #fff; background: rgba(10,10,8,.55); padding: 4px 8px;
  border-radius: 999px; backdrop-filter: blur(3px);
}
.tpl-card:hover { transform: translateY(-2px); border-color: var(--accent-hover-bd); box-shadow: var(--sh-card-hover); filter: none; }

/* Overlay « Recréer le template » */
.tploverlay { position: fixed; inset: 0; z-index: 85; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 22px; backdrop-filter: blur(12px); animation: ncFadeIn 0.22s var(--ease) both; }
.tploverlay .box {
  width: min(860px, 100%); max-height: 92dvh; overflow-y: auto; background: var(--surface-grad), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-modal); box-shadow: var(--sh-card); display: flex; position: relative;
  animation: ncSlideUp 0.32s var(--ease) both;
}
.tploverlay .visual { width: 46%; flex: none; background: var(--field); min-height: 380px; position: relative; }
.tploverlay .visual img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.tploverlay .visual .grad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 19px; padding: 18px; text-align: center; }
.tploverlay .panel { flex: 1; padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tploverlay .panel h3 { margin: 0; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.tploverlay .panel .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tploverlay .prodrow { display: flex; gap: 9px; flex-wrap: wrap; }
.tploverlay .prodrow .slot {
  width: 82px; height: 82px; border: 1.5px dashed var(--veil-10); border-radius: var(--r-md); background: var(--quiet);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: inherit; font-size: 10px; font-weight: 700; color: var(--muted); cursor: pointer; position: relative; overflow: hidden; box-shadow: none;
}
.tploverlay .prodrow .slot:hover { filter: none; border-color: var(--accent-bd); color: var(--accent-text); }
.tploverlay .prodrow .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--photo); padding: 4px; }
.tploverlay textarea {
  width: 100%; min-height: 84px; padding: 11px; border: 1px solid var(--line); border-radius: 11px;
  font: inherit; font-size: 13.5px; background: var(--field); color: var(--ink); resize: vertical;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tploverlay textarea:focus { outline: none; border-color: rgba(12,199,99,0.6); box-shadow: 0 0 0 3.5px rgba(12,199,99,0.14); }
.tploverlay .x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(10,10,8,.5); color: #fff; border: 0; font-size: 16px; z-index: 2; box-shadow: none; }
.tploverlay .x:hover { filter: none; background: rgba(10,10,8,.7); }
@media (max-width: 720px) { .tploverlay .box { flex-direction: column; } .tploverlay .visual { width: 100%; min-height: 220px; } }


/* ===== Barre premium du Studio =====
   Référence exacte (capture client 2026-08-20) : pilule quasi noire, LISERÉ BLANC
   chaud sur tout le bord, halo ROUGE saturé qui émane du flanc gauche, halo BLEU
   électrique du flanc droit (nuages ronds serrés sur les extrémités), chiffres
   épars et éteints dans l'obscurité autour. La barre reste sombre dans les deux
   thèmes. Animations : respiration des halos, pulsation du liseré, dérive lente
   des chiffres, dérive du dégradé du CTA. */

/* L'éventail du héros et l'aura de la barre débordent volontairement. La découpe
   se fait au bord de la FENÊTRE, pas au bord de main : ainsi le décor file sous
   le panneau de la sidebar (z-index 30 > contenu) au lieu de s'arrêter net avec
   une bande de fond nu entre les deux. `clip` plutôt que `hidden` : pas de
   conteneur de défilement créé, sticky et ancres intacts. */
html, body { overflow-x: clip; }

.genbar-wrap { position: relative; isolation: isolate; padding: 64px 0 52px; margin-top: 6px; }
.genbar-aura { position: absolute; inset: -55px -70px; z-index: -1; pointer-events: none; }

/* Nuages de lumière : ROUGE à gauche, BLEU à droite, ronds, serrés sur les bouts de la barre. */
.ga-glow {
  position: absolute; top: 50%; width: 38%; height: 150%;
  transform: translateY(-50%); filter: blur(46px); border-radius: 50%;
  mix-blend-mode: screen;
}
.ga-left {
  left: 1%;
  background: radial-gradient(46% 44% at 46% 50%,
    rgba(255, 64, 40, 0.85), rgba(232, 32, 14, 0.42) 40%, rgba(150, 16, 8, 0.16) 62%, transparent 78%);
  animation: gaBreathe 7s ease-in-out infinite;
}
.ga-right {
  right: 1%;
  background: radial-gradient(46% 44% at 54% 50%,
    rgba(64, 118, 255, 0.85), rgba(36, 84, 240, 0.42) 40%, rgba(18, 48, 180, 0.16) 62%, transparent 78%);
  animation: gaBreathe 8.5s ease-in-out infinite reverse;
}
@keyframes gaBreathe {
  0%, 100% { opacity: .78; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.06); }
}
html.light .ga-glow { mix-blend-mode: normal; filter: blur(50px) saturate(1.1); }
html.light .ga-left { background: radial-gradient(46% 44% at 46% 50%, rgba(240, 44, 22, 0.55), rgba(214, 28, 12, 0.26) 42%, rgba(150, 16, 8, 0.10) 62%, transparent 78%); }
html.light .ga-right { background: radial-gradient(46% 44% at 54% 50%, rgba(44, 96, 250, 0.55), rgba(28, 70, 226, 0.26) 42%, rgba(18, 48, 180, 0.10) 62%, transparent 78%); }

/* Constellation éteinte, points reliés, qui affleure autour des halos (dérive très lente).
   Tuile 170x140 SANS COUTURE : les nœuds sont répliqués en 3x3 et les liens calculés sur ce
   pavage, donc un lien qui sort d'un côté rentre de l'autre. La dérive ne révèle aucun raccord.
   Densité réglée à parité de luminance avec les anciens chiffres (22,4 → 23,4 mesuré).
   Régénérable : script et pièges dans PASSATIONFONDCONSTELLATION.md (graine 20260821). */
.ga-glyphs {
  position: absolute; top: 6%; bottom: 6%; width: 34%; opacity: .66;
  overflow: clip;
  animation: gaTwinkle 9s ease-in-out infinite alternate;
}
/* Dérive DIAGONALE et CONTINUE : une tuile entière (170 x 140) par cycle, donc
   l'image de fin est identique à celle de début — boucle parfaite. Elle vit sur
   un calque élargi d'une tuile et animé en TRANSFORM : composité par le GPU.
   L'ancienne animation de background-position repeignait ces deux surfaces à
   CHAQUE frame au CPU — c'était la cause du lag perçu sur la page. */
.ga-glyphs::before {
  content: ""; position: absolute; inset: 0 -170px -140px 0;
  background-size: 170px 140px; background-image: var(--ga-tile);
  animation: gaDrift 22s linear infinite;
  will-change: transform;
}
.ga-gl {
  left: 0;
  --ga-tile: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='170'%20height='140'><g%20stroke='%23b03e2a'%20stroke-width='1'%20fill='none'><path%20stroke-opacity='0.28'%20d='M-19%20-13L13%205M-7%2015L2%2048M-28%2029L11%2026M-28%2029L2%2048M-28%2031L11%2026M-28%2031L2%2048M-19%20127L19%20115M-19%20127L13%20145M-6%2061L11%2026M-27%2032L11%2026M-27%2032L2%2048M-27%2085L10%2099M19%20-25L13%205M19%20-25L17%2014M19%20-25L46%202M151%20-13L163%2015M151%20-13L133%207M151%20-13L183%205M134%20-31L133%207M134%20-31L139%205M124%20-11L115%2017M19%20115L13%20145M19%20115L17%20154M19%20115L46%20142M76%2067L106%2084M76%2067L83%2037M76%2067L97%2049M106%2084L89%20108M106%2084L79%2061M106%2084L97%2049M106%2084L134%20109M106%2084L143%2085M106%2084L79%20112M89%20108L86%2073M83%2037L47%2039M83%2037L86%2073M83%2037L115%2017M37%2098L14%2067M37%2098L10%2099M14%2067L10%2099M163%2015L133%207M163%2015L172%2048M142%2029L164%2061M142%2029L115%2017M142%2029L181%2026M142%2029L172%2048M167%20105L151%20127M167%20105L134%20109M167%20105L143%2085M10%2099L40%20102M13%205L46%202M133%207L143%2032M142%2031L164%2061M142%2031L115%2017M142%2031L181%2026M142%2031L172%2048M151%20127L124%20129M151%20127L163%20155M151%20127L133%20147M151%20127L189%20115M151%20127L183%20145M164%2061L143%2032M164%2061L143%2085M164%2061L181%2026M139%205L143%2032M139%205L115%2017M47%2039L79%2061M47%2039L11%2026M47%2039L17%2014M47%2039L46%202M47%2039L73%2046M86%2073L73%2046M86%2073L79%20112M79%2061L92%2028M2%2048L17%2014M97%2049L115%2017M17%2014L46%202M143%2032L115%2017M143%2032L181%2026M143%2032L172%2048M134%20109L133%20147M134%20109L139%20145M124%20129L115%20157M143%2085L180%2099'/><path%20stroke-opacity='0.45'%20d='M-7%2015L13%205M-7%2015L11%2026M-7%2015L17%2014M-3%20105L19%20115M-3%20105L10%2099M-6%2061L14%2067M-6%2061L2%2048M151%20-13L139%205M124%20-11L133%207M124%20-11L139%205M19%20115L37%2098M19%20115L10%2099M19%20115L40%20102M76%2067L73%2046M106%2084L86%2073M83%2037L79%2061M83%2037L97%2049M83%2037L73%2046M14%2067L2%2048M163%2015L142%2029M163%2015L142%2031M163%2015L139%205M163%2015L143%2032M163%2015L183%205M163%2015L181%2026M163%2015L187%2014M142%2029L133%207M142%2029L139%205M167%20105L189%20115M167%20105L180%2099M13%205L11%2026M133%207L142%2031M133%207L115%2017M142%2031L139%205M151%20127L134%20109M151%20127L139%20145M164%2061L184%2067M164%2061L172%2048M86%2073L79%2061M86%2073L97%2049M79%2061L97%2049M79%2061L73%2046M11%2026L2%2048M11%2026L17%2014M97%2049L92%2028M97%2049L73%2046M92%2028L73%2046M92%2028L115%2017M134%20109L124%20129M134%20109L143%2085M124%20129L133%20147M124%20129L139%20145'/><path%20stroke-opacity='0.65'%20d='M76%2067L86%2073M76%2067L79%2061M89%20108L79%20112M83%2037L92%2028M37%2098L40%20102M142%2029L142%2031M142%2029L143%2032M13%205L17%2014M133%207L139%205M142%2031L143%2032'/></g><g%20fill='%23d4573a'%20opacity='0.6'><circle%20cx='14'%20cy='67'%20r='1.5'/><circle%20cx='142'%20cy='31'%20r='1.5'/><circle%20cx='151'%20cy='127'%20r='1.5'/><circle%20cx='79'%20cy='61'%20r='1.5'/><circle%20cx='124'%20cy='129'%20r='1.5'/></g><g%20fill='%23d4573a'%20opacity='0.8'><circle%20cx='76'%20cy='67'%20r='1.5'/><circle%20cx='83'%20cy='37'%20r='1.5'/><circle%20cx='10'%20cy='99'%20r='1.5'/><circle%20cx='13'%20cy='5'%20r='1.5'/><circle%20cx='151'%20cy='127'%20r='1.5'/><circle%20cx='164'%20cy='61'%20r='1.5'/><circle%20cx='47'%20cy='39'%20r='1.5'/><circle%20cx='86'%20cy='73'%20r='1.5'/><circle%20cx='79'%20cy='61'%20r='1.5'/><circle%20cx='92'%20cy='28'%20r='1.5'/><circle%20cx='143'%20cy='32'%20r='1.5'/><circle%20cx='134'%20cy='109'%20r='1.5'/><circle%20cx='40'%20cy='102'%20r='1.5'/></g><g%20fill='%23d4573a'%20opacity='1.0'><circle%20cx='-3'%20cy='105'%20r='1.5'/><circle%20cx='76'%20cy='67'%20r='1.5'/><circle%20cx='167'%20cy='105'%20r='1.5'/><circle%20cx='13'%20cy='5'%20r='1.5'/><circle%20cx='133'%20cy='7'%20r='1.5'/><circle%20cx='86'%20cy='73'%20r='1.5'/><circle%20cx='134'%20cy='109'%20r='1.5'/><circle%20cx='143'%20cy='85'%20r='1.5'/><circle%20cx='40'%20cy='102'%20r='1.5'/><circle%20cx='115'%20cy='17'%20r='1.5'/></g><g%20fill='%23d4573a'%20opacity='0.6'><circle%20cx='163'%20cy='15'%20r='2.5'/><circle%20cx='139'%20cy='5'%20r='2.5'/><circle%20cx='11'%20cy='26'%20r='2.5'/><circle%20cx='17'%20cy='14'%20r='2.5'/><circle%20cx='73'%20cy='46'%20r='2.5'/><circle%20cx='79'%20cy='112'%20r='2.5'/></g><g%20fill='%23d4573a'%20opacity='0.8'><circle%20cx='19'%20cy='115'%20r='2.5'/><circle%20cx='106'%20cy='84'%20r='2.5'/><circle%20cx='89'%20cy='108'%20r='2.5'/><circle%20cx='37'%20cy='98'%20r='2.5'/><circle%20cx='163'%20cy='15'%20r='2.5'/><circle%20cx='142'%20cy='29'%20r='2.5'/><circle%20cx='139'%20cy='5'%20r='2.5'/><circle%20cx='11'%20cy='26'%20r='2.5'/><circle%20cx='2'%20cy='48'%20r='2.5'/><circle%20cx='97'%20cy='49'%20r='2.5'/><circle%20cx='17'%20cy='14'%20r='2.5'/><circle%20cx='46'%20cy='2'%20r='2.5'/><circle%20cx='73'%20cy='46'%20r='2.5'/><circle%20cx='79'%20cy='112'%20r='2.5'/><circle%20cx='46'%20cy='142'%20r='2.5'/><circle%20cx='172'%20cy='48'%20r='2.5'/></g><g%20fill='%23d4573a'%20opacity='1.0'><circle%20cx='106'%20cy='84'%20r='2.5'/><circle%20cx='37'%20cy='98'%20r='2.5'/><circle%20cx='2'%20cy='48'%20r='2.5'/><circle%20cx='172'%20cy='48'%20r='2.5'/></g></svg>");
  -webkit-mask-image: radial-gradient(60% 62% at 40% 50%, #000, transparent 80%);
          mask-image: radial-gradient(60% 62% at 40% 50%, #000, transparent 80%);
}
.ga-gr {
  right: 0;
  --ga-tile: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='170'%20height='140'><g%20stroke='%233559b4'%20stroke-width='1'%20fill='none'><path%20stroke-opacity='0.28'%20d='M-19%20-13L13%205M-7%2015L2%2048M-28%2029L11%2026M-28%2029L2%2048M-28%2031L11%2026M-28%2031L2%2048M-19%20127L19%20115M-19%20127L13%20145M-6%2061L11%2026M-27%2032L11%2026M-27%2032L2%2048M-27%2085L10%2099M19%20-25L13%205M19%20-25L17%2014M19%20-25L46%202M151%20-13L163%2015M151%20-13L133%207M151%20-13L183%205M134%20-31L133%207M134%20-31L139%205M124%20-11L115%2017M19%20115L13%20145M19%20115L17%20154M19%20115L46%20142M76%2067L106%2084M76%2067L83%2037M76%2067L97%2049M106%2084L89%20108M106%2084L79%2061M106%2084L97%2049M106%2084L134%20109M106%2084L143%2085M106%2084L79%20112M89%20108L86%2073M83%2037L47%2039M83%2037L86%2073M83%2037L115%2017M37%2098L14%2067M37%2098L10%2099M14%2067L10%2099M163%2015L133%207M163%2015L172%2048M142%2029L164%2061M142%2029L115%2017M142%2029L181%2026M142%2029L172%2048M167%20105L151%20127M167%20105L134%20109M167%20105L143%2085M10%2099L40%20102M13%205L46%202M133%207L143%2032M142%2031L164%2061M142%2031L115%2017M142%2031L181%2026M142%2031L172%2048M151%20127L124%20129M151%20127L163%20155M151%20127L133%20147M151%20127L189%20115M151%20127L183%20145M164%2061L143%2032M164%2061L143%2085M164%2061L181%2026M139%205L143%2032M139%205L115%2017M47%2039L79%2061M47%2039L11%2026M47%2039L17%2014M47%2039L46%202M47%2039L73%2046M86%2073L73%2046M86%2073L79%20112M79%2061L92%2028M2%2048L17%2014M97%2049L115%2017M17%2014L46%202M143%2032L115%2017M143%2032L181%2026M143%2032L172%2048M134%20109L133%20147M134%20109L139%20145M124%20129L115%20157M143%2085L180%2099'/><path%20stroke-opacity='0.45'%20d='M-7%2015L13%205M-7%2015L11%2026M-7%2015L17%2014M-3%20105L19%20115M-3%20105L10%2099M-6%2061L14%2067M-6%2061L2%2048M151%20-13L139%205M124%20-11L133%207M124%20-11L139%205M19%20115L37%2098M19%20115L10%2099M19%20115L40%20102M76%2067L73%2046M106%2084L86%2073M83%2037L79%2061M83%2037L97%2049M83%2037L73%2046M14%2067L2%2048M163%2015L142%2029M163%2015L142%2031M163%2015L139%205M163%2015L143%2032M163%2015L183%205M163%2015L181%2026M163%2015L187%2014M142%2029L133%207M142%2029L139%205M167%20105L189%20115M167%20105L180%2099M13%205L11%2026M133%207L142%2031M133%207L115%2017M142%2031L139%205M151%20127L134%20109M151%20127L139%20145M164%2061L184%2067M164%2061L172%2048M86%2073L79%2061M86%2073L97%2049M79%2061L97%2049M79%2061L73%2046M11%2026L2%2048M11%2026L17%2014M97%2049L92%2028M97%2049L73%2046M92%2028L73%2046M92%2028L115%2017M134%20109L124%20129M134%20109L143%2085M124%20129L133%20147M124%20129L139%20145'/><path%20stroke-opacity='0.65'%20d='M76%2067L86%2073M76%2067L79%2061M89%20108L79%20112M83%2037L92%2028M37%2098L40%20102M142%2029L142%2031M142%2029L143%2032M13%205L17%2014M133%207L139%205M142%2031L143%2032'/></g><g%20fill='%235a7ee0'%20opacity='0.6'><circle%20cx='14'%20cy='67'%20r='1.5'/><circle%20cx='142'%20cy='31'%20r='1.5'/><circle%20cx='151'%20cy='127'%20r='1.5'/><circle%20cx='79'%20cy='61'%20r='1.5'/><circle%20cx='124'%20cy='129'%20r='1.5'/></g><g%20fill='%235a7ee0'%20opacity='0.8'><circle%20cx='76'%20cy='67'%20r='1.5'/><circle%20cx='83'%20cy='37'%20r='1.5'/><circle%20cx='10'%20cy='99'%20r='1.5'/><circle%20cx='13'%20cy='5'%20r='1.5'/><circle%20cx='151'%20cy='127'%20r='1.5'/><circle%20cx='164'%20cy='61'%20r='1.5'/><circle%20cx='47'%20cy='39'%20r='1.5'/><circle%20cx='86'%20cy='73'%20r='1.5'/><circle%20cx='79'%20cy='61'%20r='1.5'/><circle%20cx='92'%20cy='28'%20r='1.5'/><circle%20cx='143'%20cy='32'%20r='1.5'/><circle%20cx='134'%20cy='109'%20r='1.5'/><circle%20cx='40'%20cy='102'%20r='1.5'/></g><g%20fill='%235a7ee0'%20opacity='1.0'><circle%20cx='-3'%20cy='105'%20r='1.5'/><circle%20cx='76'%20cy='67'%20r='1.5'/><circle%20cx='167'%20cy='105'%20r='1.5'/><circle%20cx='13'%20cy='5'%20r='1.5'/><circle%20cx='133'%20cy='7'%20r='1.5'/><circle%20cx='86'%20cy='73'%20r='1.5'/><circle%20cx='134'%20cy='109'%20r='1.5'/><circle%20cx='143'%20cy='85'%20r='1.5'/><circle%20cx='40'%20cy='102'%20r='1.5'/><circle%20cx='115'%20cy='17'%20r='1.5'/></g><g%20fill='%235a7ee0'%20opacity='0.6'><circle%20cx='163'%20cy='15'%20r='2.5'/><circle%20cx='139'%20cy='5'%20r='2.5'/><circle%20cx='11'%20cy='26'%20r='2.5'/><circle%20cx='17'%20cy='14'%20r='2.5'/><circle%20cx='73'%20cy='46'%20r='2.5'/><circle%20cx='79'%20cy='112'%20r='2.5'/></g><g%20fill='%235a7ee0'%20opacity='0.8'><circle%20cx='19'%20cy='115'%20r='2.5'/><circle%20cx='106'%20cy='84'%20r='2.5'/><circle%20cx='89'%20cy='108'%20r='2.5'/><circle%20cx='37'%20cy='98'%20r='2.5'/><circle%20cx='163'%20cy='15'%20r='2.5'/><circle%20cx='142'%20cy='29'%20r='2.5'/><circle%20cx='139'%20cy='5'%20r='2.5'/><circle%20cx='11'%20cy='26'%20r='2.5'/><circle%20cx='2'%20cy='48'%20r='2.5'/><circle%20cx='97'%20cy='49'%20r='2.5'/><circle%20cx='17'%20cy='14'%20r='2.5'/><circle%20cx='46'%20cy='2'%20r='2.5'/><circle%20cx='73'%20cy='46'%20r='2.5'/><circle%20cx='79'%20cy='112'%20r='2.5'/><circle%20cx='46'%20cy='142'%20r='2.5'/><circle%20cx='172'%20cy='48'%20r='2.5'/></g><g%20fill='%235a7ee0'%20opacity='1.0'><circle%20cx='106'%20cy='84'%20r='2.5'/><circle%20cx='37'%20cy='98'%20r='2.5'/><circle%20cx='2'%20cy='48'%20r='2.5'/><circle%20cx='172'%20cy='48'%20r='2.5'/></g></svg>");
  -webkit-mask-image: radial-gradient(60% 62% at 60% 50%, #000, transparent 80%);
          mask-image: radial-gradient(60% 62% at 60% 50%, #000, transparent 80%);
}
@keyframes gaDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-170px, -140px, 0); } }
/* Respiration : la trame s'éclaire et s'éteint doucement, ce qui la fait vivre même
   quand l'œil ne suit pas la dérive. */
@keyframes gaTwinkle { from { opacity: .52; } to { opacity: .78; } }
/* Côté droit désynchronisé : dérive inversée et plus lente, respiration décalée. */
.ga-gr { animation-duration: 11s; animation-delay: -4s; }
.ga-gr::before { animation-direction: reverse; animation-duration: 26s; }
html.light .ga-glyphs { animation-name: gaTwinkleClair; }
@keyframes gaTwinkleClair { from { opacity: .28; } to { opacity: .44; } }

/* La pilule : quasi noire, LISERÉ clair sur tout le bord, lueurs serrées rouge/bleu. */
.genbar {
  --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.20);
  --quiet: rgba(255, 255, 255, 0.045); --veil-06: rgba(255, 255, 255, 0.07);
  --ink: #eceef2; --ink-soft: #c6c9d0; --muted: #9aa0ab; --ghost: #686e78;
  --panel: #17191f; --field: rgba(255, 255, 255, 0.05);
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 40%, rgba(0,0,0,0.14) 100%),
    #0b0c10;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 24px; /* même arrondi que .media-card (demande client 24/08) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 26px 70px -28px rgba(0, 0, 0, 0.95),
    -26px 0 54px -10px rgba(255, 44, 22, 0.62),
    -64px 4px 130px -8px rgba(226, 28, 12, 0.50),
    26px 0 54px -10px rgba(52, 106, 255, 0.62),
    64px -4px 130px -8px rgba(30, 76, 235, 0.50);
  color: var(--ink);
}
html.light .genbar {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 30px 70px -18px rgba(10, 12, 18, 0.45),
    -26px 4px 52px -8px rgba(240, 40, 18, 0.55),
    -60px 8px 120px -6px rgba(214, 28, 12, 0.45),
    26px 2px 52px -8px rgba(40, 92, 248, 0.55),
    60px 4px 120px -6px rgba(28, 70, 226, 0.45);
}
/* Couronne serrée : la lumière blanche-chaude qui lèche le bord (rouge à gauche, bleu à droite). */
.genbar::before {
  content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 29px; /* = rayon .genbar + inset */
  background: linear-gradient(90deg,
    rgba(255, 96, 70, 0.95) 0%, rgba(255, 70, 44, 0.40) 14%, transparent 40%,
    transparent 60%, rgba(90, 130, 255, 0.40) 86%, rgba(96, 140, 255, 0.95) 100%);
  filter: blur(13px);
  animation: gaRim 7s ease-in-out infinite alternate;
}
@keyframes gaRim {
  from { opacity: .8; transform: scale(1); }
  to { opacity: 1; transform: scale(1.012); }
}
html.light .genbar::before { filter: blur(15px) saturate(1.1); opacity: .9; }

/* Filet du bord RETIRÉ le 2026-08-21 : son rayon (42 px) ne suivait pas celui de
   la pilule et le décalage se voyait dans les angles. Le bord blanc de .genbar
   suffit à détacher la barre. Historique git si on veut le remettre : il faudra
   alors que son rayon soit TOUJOURS égal à celui de .genbar + son inset. */

/* Intérieur : jetons re-scopés + retouches. */
.genbar .chips .chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.genbar .chips .chip:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.08); }
.genbar .asset-slot { background: rgba(255,255,255,0.04); border: 1.5px dashed rgba(255,255,255,0.18); color: #a6adb8; }
.genbar .asset-slot:hover { border-color: rgba(255,255,255,0.32); color: #ced3db; }
.genbar .asset-slot:disabled { opacity: 1; cursor: default; color: #7b828d; border-color: rgba(255,255,255,0.12); }
.genbar .asset-slot:disabled .plus { opacity: .6; }
.genbar .asset-slot .plus { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: #eceef2; }
.genbar textarea { caret-color: #eceef2; }

/* CTA : dégradé qui relie les deux lueurs (rouge → magenta → bleu), en dérive lente. */
.genbar .go {
  background: linear-gradient(115deg, #ff4a30 0%, #e0459e 46%, #3d74ff 100%);
  background-size: 220% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(0,0,0,0.5),
    0 12px 30px -10px rgba(224, 69, 158, 0.55);
  animation: gaSheen 6s ease-in-out infinite alternate;
}
@keyframes gaSheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.genbar .go:hover { filter: brightness(1.12); }
.genbar .go:disabled { animation: none; }

@media (max-width: 760px) { .genbar-wrap { padding: 34px 0 26px; } .ga-glow { filter: blur(34px); } }

/* Variables de modèle (chips déroulantes sous le prompt) */
.var-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--accent-bd); background: var(--accent-soft); color: var(--a-200);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.var-chip:hover { filter: brightness(1.15); }
.var-chip:disabled { opacity: .45; cursor: default; }
.viewer .stage { overflow: hidden; }

/* ==== Aura du panneau outil (/generer) ====
   Même langage que la barre du Studio : halo rouge à gauche, bleu à droite, avec
   la trame constellation. Le panneau étant haut et étroit, les lueurs sont
   resserrées et le halo suit le panneau quand il colle (sticky). */
.tool-wrap { position: relative; isolation: isolate; }
.tool-wrap .genbar-aura { position: absolute; inset: -46px -40px; z-index: -1; }
.tool-wrap .ga-glow { width: 62%; height: 80%; filter: blur(44px); }
.tool-wrap .ga-left { left: -12%; }
.tool-wrap .ga-right { right: -12%; }
.tool-wrap .ga-glyphs { width: 52%; top: 8%; bottom: 8%; animation-name: gaTwinklePanneau; }
@keyframes gaTwinklePanneau { from { opacity: .40; } to { opacity: .62; } }
.tool-wrap .ga-gr { animation-name: gaTwinklePanneau; }
html.light .tool-wrap .ga-glyphs { animation-name: gaTwinklePanneauClair; }
@keyframes gaTwinklePanneauClair { from { opacity: .24; } to { opacity: .38; } }

/* Le panneau reprend la peau de la barre : pilule sombre, liseré clair, lueurs. */
.tool-wrap .tool {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 40%, rgba(0,0,0,0.14) 100%),
    #0b0c10;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eceef2;
  --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.20);
  --quiet: rgba(255, 255, 255, 0.045); --veil-06: rgba(255, 255, 255, 0.07);
  --veil-08: rgba(255, 255, 255, 0.08); --veil-10: rgba(255, 255, 255, 0.10);
  --ink: #eceef2; --ink-soft: #c6c9d0; --muted: #9aa0ab; --ghost: #686e78;
  --panel: #17191f; --field: rgba(255, 255, 255, 0.05); --photo: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 26px 70px -28px rgba(0, 0, 0, 0.95),
    -22px 0 48px -12px rgba(255, 44, 22, 0.45),
    22px 0 48px -12px rgba(52, 106, 255, 0.45);
}
html.light .tool-wrap .tool {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 26px 60px -22px rgba(10, 12, 18, 0.4),
    -22px 0 46px -10px rgba(240, 40, 18, 0.4),
    22px 0 46px -10px rgba(40, 92, 248, 0.4);
}

/* Compteur d'images « n/4 » (− valeur +), façon barre de génération. */
.stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--field);
  padding: 3px 4px; height: 38px;
}
.stepper button {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink); font-size: 15px; font-weight: 600;
  line-height: 1; cursor: pointer; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.stepper button:hover { background: var(--veil-06); filter: none; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper span {
  font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  min-width: 30px; text-align: center;
}


/* ================= Menu déroulant des réglages (barre de prompt) =================
   Remplace la div bricolée en styles inline : ancrage qui se retourne près des
   bords, coche alignée en colonne, sous-titre facultatif, clavier, et ouverture
   animée. Un seul composant pour média / workflow / ratio / qualité / modèle. */
.pmenu {
  position: fixed; z-index: 200; min-width: 220px; max-width: min(320px, calc(100vw - 24px));
  max-height: min(58vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.25);
  padding: 6px; scrollbar-width: thin;
  transform-origin: var(--pm-origin, top left);
  animation: pmIn 140ms var(--ease-ui, cubic-bezier(.2,.8,.2,1));
}
@keyframes pmIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pmenu { animation: none; } }

.pmenu .pm-head {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 9px 10px 4px;
}
.pmenu .pm-head + .pm-item { margin-top: 0; }
.pmenu .pm-sep { height: 1px; background: var(--line); margin: 5px 8px; border: 0; }

.pmenu .pm-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: transparent; color: var(--ink);
  border: 0; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px;
  font-weight: 500; cursor: pointer; box-shadow: none; line-height: 1.35;
}
.pmenu .pm-item:hover, .pmenu .pm-item:focus-visible {
  background: var(--veil-06, rgba(255,255,255,.07)); filter: none; outline: none;
}
.pmenu .pm-item:focus-visible { box-shadow: inset 0 0 0 1.5px var(--a-400, #22C55E); }
.pmenu .pm-item .pm-sub {
  display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px;
}
.pmenu .pm-item .pm-check { width: 14px; height: 14px; color: var(--a-400, #22C55E); opacity: 0; flex: none; }
.pmenu .pm-item[aria-checked="true"] .pm-check { opacity: 1; }
.pmenu .pm-item[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.pmenu .pm-item[disabled] { opacity: .45; cursor: default; }
.pmenu .pm-item[disabled]:hover { background: transparent; }

/* Dans la barre de prompt, le compteur adopte la taille et la forme des chips :
   sans ça il dépassait de 4 px et cassait l'alignement de la rangée. */
.genbar .chip-stepper { height: 32px; padding: 2px 4px; border-radius: 999px; gap: 2px; background: var(--quiet); }
.genbar .chip-stepper button { width: 22px; height: 22px; font-size: 14px; }
.genbar .chip-stepper span { font-size: 12.5px; min-width: 26px; }

/* Prompt du Studio : calque de surlignage des @tags sous le texte.
   UNE ligne au repos (décision client 24/08) : la boîte ne grandit qu'avec le
   texte (autoTaillePrompt). Le micro vit à GAUCHE — les paddings du textarea
   ET du calque lui laissent la place, sinon le surlignage @ se décale. */
.s-promptbox { position: relative; min-height: 28px; }
.s-promptbox .layer, .s-promptbox textarea {
  font: inherit; font-size: 14.5px; line-height: 1.5; padding: 3px 8px 3px 38px;
  margin: 0; border: 0; width: 100%; min-height: 28px; white-space: pre-wrap; word-wrap: break-word;
}
.s-promptbox .layer { position: absolute; inset: 0; color: var(--ink); pointer-events: none; overflow: hidden; }
.s-promptbox .layer mark { background: rgba(255,255,255,.14); color: #fff; border-radius: 5px; font-weight: 600; padding: 1px 0; }
.s-promptbox textarea {
  position: relative; background: transparent; color: transparent; caret-color: var(--ink);
  resize: none; display: block; outline: none; overflow: hidden;
}
.s-promptbox textarea::placeholder { color: var(--ghost); }
.s-promptbox .dictee-btn { left: 4px; right: auto; top: 2px; width: 24px; height: 24px; }
.s-promptbox .dictee-btn svg { width: 13px; height: 13px; }

/* Compteur d'images dans la barre du Studio (même gabarit que les chips). */
.chip-stepper { height: 36px; border-radius: 999px; padding: 3px 6px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.chip-stepper button { color: #eceef2; }
.chip-stepper span { color: #eceef2; font-size: 12.5px; }

/* Galerie « Vos créations » : vignettes en attente (squelettes). */
/* Créations du Studio : trois par rangée, mêmes cartes que la page Générer. */
.crea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .crea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crea-grid { grid-template-columns: 1fr; } }
.crea-grid .gen.skel { pointer-events: none; }
.crea-grid .gen.skel .shot { display: block; aspect-ratio: 1; }
.crea-grid .gen.skel figcaption { color: var(--ghost); }
#crea-selbar:not(:empty) { margin-bottom: 12px; }

/* Aperçu de la suite : le HAUT des vraies vignettes, net, qui se dissout vers le
   bas. Un masque alpha fait la coupe (les cartes gardent leur apparence exacte :
   même bordure, même rayon — c'est littéralement ce qu'on verra en dépliant), et
   UNE seule couche de flou monte en intensité vers le bas. L'empilement de
   plusieurs backdrop-filter + un voile coloré donnait une bande laiteuse opaque
   où on ne devinait plus rien. */
.crea-peek {
  position: relative; margin-top: 14px; height: 112px; overflow: clip; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0,0,0,.7) 52%, rgba(0,0,0,.24) 78%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0,0,0,.7) 52%, rgba(0,0,0,.24) 78%, transparent 98%);
}
.crea-peek .crea-grid { position: absolute; inset: 0 0 auto; }
.crea-peek .gen { pointer-events: none; }
.crea-peek::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 30%, #000 78%);
}

/* Le bouton conclut la dissolution : posé dans la zone déjà fondue, centré. */
.crea-more-wrap { display: flex; justify-content: center; position: relative; z-index: 3; margin-top: 14px; }
.crea-peek:not([hidden]) + .crea-more-wrap { margin-top: -30px; }


#crea-grid .gen.skel .shot {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 220% 100%; animation: ncShimmer 1.6s ease-in-out infinite;
}
html.light #crea-grid .gen.skel .shot {
  background: linear-gradient(90deg, rgba(17,17,24,0.05) 25%, rgba(17,17,24,0.1) 50%, rgba(17,17,24,0.05) 75%);
  background-size: 220% 100%;
}

/* ==================== Lexique visuel (/lexique) ====================
   Le mot ET l'image, jamais l'un sans l'autre : chaque carte montre l'exemple,
   le nom français, le terme technique anglais (le client apprend le vrai mot),
   ce que ça fait, quand s'en servir, et le fragment envoyé au modèle. */
.lexpage { max-width: 1240px; margin: 0 auto; padding: 26px 30px 140px; overflow-x: clip; }

.lex-intro { max-width: 720px; margin-bottom: 28px; }
.lex-intro h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
.lex-intro > p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }

.lex-tools { display: flex; flex-direction: column; gap: 14px; }
.lex-tools input[type="search"] {
  width: min(380px, 100%); padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink);
  font: inherit; font-size: 14px; outline: none;
}
.lex-tools input[type="search"]:focus { border-color: var(--accent-bd); }

.lex-fams { display: flex; flex-wrap: wrap; gap: 7px; }
.lex-fam {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--quiet); color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.lex-fam:hover { border-color: var(--line-strong); color: var(--ink); filter: none; }
.lex-fam.on { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent-text); }
.lex-fam .n { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }

.lex-fam-sec { margin-bottom: 42px; }
.lex-fam-sec > header { margin-bottom: 14px; }
.lex-fam-sec h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 4px; }
.lex-fam-sec > header p { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 62ch; }

.lex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.lex-card {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--panel); cursor: pointer; box-shadow: var(--sh-card);
  transition: transform 160ms var(--ease-ui), border-color 160ms var(--ease-ui), box-shadow 160ms var(--ease-ui);
}
.lex-card:hover { transform: translateY(-2px); border-color: var(--accent-hover-bd); box-shadow: var(--sh-card-hover); }
.lex-card.on { border-color: var(--a-400); box-shadow: 0 0 0 1px var(--a-400) inset, var(--sh-card-hover); }

.lex-card .vue { position: relative; aspect-ratio: 4 / 3; background: var(--photo); display: block; }
.lex-card .vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lex-card .vue.sans {
  display: flex; align-items: center; justify-content: center;
  background: var(--field); border-bottom: 1px solid var(--line);
  color: var(--ghost); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.lex-card .coche {
  position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-400); color: #fff; opacity: 0; transform: scale(.7);
  transition: 160ms var(--ease-ui);
}
.lex-card .coche svg { width: 13px; height: 13px; }
.lex-card.on .coche { opacity: 1; transform: none; }

.lex-card figcaption { padding: 12px 14px 14px; display: grid; gap: 6px; }
.lex-card .tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lex-card h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.lex-card .en { font-size: 11.5px; font-weight: 600; color: var(--accent-text); letter-spacing: .01em; }
.lex-card .phrase { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.lex-card .usage { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.lex-card .pied { margin-top: 2px; }
.lex-card .pied code {
  display: block; font-size: 11px; line-height: 1.45; color: var(--muted);
  background: var(--field); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 8px; word-break: break-word;
}

.lex-vide { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 0; }

/* Panier collant : ce qui est coché suit le client pendant qu'il parcourt. */
.lex-panier {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0 20px 18px;
  pointer-events: none;
}
.lex-panier .inner {
  pointer-events: auto; max-width: 1180px; margin: 0 auto;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: 0 26px 60px -22px rgba(0,0,0,.7), var(--sh-card);
  padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.lex-panier .liste { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 180px; }
.lex-panier .puce {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px 5px 11px;
  border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-bd);
  color: var(--accent-text); font-size: 12.5px; font-weight: 600;
}
.lex-panier .puce.conflit { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.45); color: #ff9b9b; }
html.light .lex-panier .puce.conflit { background: rgba(239,68,68,.10); color: #b42318; }
html.light .lex-panier .alerte { color: #b42318; }
.lex-panier .puce button {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; line-height: 1;
  background: transparent; color: inherit; font-size: 14px; cursor: pointer; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.lex-panier .puce button:hover { background: rgba(255,255,255,.16); filter: none; }
.lex-panier .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lex-panier .alerte { font-size: 12.5px; color: #ffb4a1; margin-right: 4px; max-width: 34ch; line-height: 1.4; }

@media (max-width: 720px) {
  .lexpage { padding: 20px 16px 190px; }
  .lex-panier .actions { width: 100%; }
  .lex-panier .actions button { flex: 1; }
}

/* ---- Sélecteur « Vocabulaire » ouvert depuis la barre de prompt ---- */
.modal.lexpick { width: min(760px, 94vw); }
/* Recherche sur SA ligne, catégories en dessous : côte à côte, les 6 onglets
   passaient sur trois lignes et le champ centré laissait un grand vide au-dessus
   et au-dessous de lui. */
.lexpick .lp-barre { display: grid; gap: 9px; margin: 14px 0 12px; }
.lexpick .lp-barre input[type="search"] {
  width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink); font: inherit; font-size: 13px; outline: none;
}
.lexpick .lp-barre input:focus { border-color: var(--accent-bd); }
.lexpick .lp-onglets { display: flex; flex-wrap: wrap; gap: 5px; }
.lexpick .lp-onglet {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--muted); font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; box-shadow: none; white-space: nowrap;
}
.lexpick .lp-onglet:hover { color: var(--ink); border-color: var(--line-strong); filter: none; }
.lexpick .lp-onglet.on { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent-text); }

.lexpick .lp-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px;
  max-height: min(46vh, 380px); overflow-y: auto; padding: 2px; scrollbar-width: thin;
}
.lexpick .lp-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px 6px 6px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--quiet); color: var(--ink);
  font: inherit; cursor: pointer; box-shadow: none; transition: 140ms var(--ease-ui);
}
.lexpick .lp-item:hover { border-color: var(--line-strong); background: var(--veil-06); filter: none; }
.lexpick .lp-item.on { border-color: var(--a-400); background: var(--accent-soft); }
.lexpick .lp-item.conflit { border-color: rgba(239,68,68,.55); }
.lexpick .lp-item .vue {
  width: 38px; height: 38px; flex: none; border-radius: 7px; overflow: hidden;
  background: var(--field); border: 1px solid var(--line);
}
.lexpick .lp-item .vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lexpick .lp-item .txt { display: grid; gap: 1px; min-width: 0; }
.lexpick .lp-item strong { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.lexpick .lp-item em { font-style: normal; font-size: 10.5px; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lexpick .lp-item.on em { color: var(--accent-text); }

.lexpick .lp-pied { margin-top: 4px; }
.lexpick .lp-alerte { font-size: 12.5px; color: #ffb4a1; margin: 12px 0 0; line-height: 1.45; }
html.light .lexpick .lp-alerte { color: #b42318; }

/* Accès au vocabulaire depuis le panneau de la page Générer */
.vocab-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 9px; }
.vocab-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--quiet); color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: 140ms var(--ease-ui);
}
.vocab-btn:hover { color: var(--ink); border-color: var(--line-strong); filter: none; }
.vocab-btn.on { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent-text); }
.vocab-row .hint { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pastille Vocabulaire active dans la barre du Studio */
.genbar .chips .chip.on { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent-text); }

/* ==================== Atelier modèles (/atelier, interne) ==================== */
.atelier { max-width: 1080px; margin: 0 auto; padding: 26px 30px 90px; }
.at-intro h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.at-intro > p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 72ch; margin: 0 0 18px; }
.at-intro code { background: var(--field); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: .88em; }

.at-produit {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--sh-card);
  position: sticky; top: 12px; z-index: 20;
}
.at-prod-nom { font-size: 13.5px; font-weight: 600; color: var(--ink); }

.at-fam { margin-top: 34px; }
.at-fam h2 { font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

.at-card {
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sh-card);
}
.at-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.at-card .st { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.at-card .st-essai  { background: var(--veil-06); color: var(--muted); border: 1px solid var(--line); }
.at-card .st-valide { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-bd); }
.at-card .st-retire { background: rgba(239,68,68,.12); color: #ff9b9b; border: 1px solid rgba(239,68,68,.35); }
html.light .at-card .st-retire { color: #b42318; }
.at-card .fam { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.at-card .prompt {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 9px;
  background: var(--field); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.at-card .kit { font-size: 12.5px; color: var(--accent-text); margin: 8px 0 0; }
.at-card .note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }

.at-card .essai { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.at-card .tirage { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.at-card .att { font-size: 13px; color: var(--accent-text); margin: 0; animation: ncPulse 1.4s ease-in-out infinite alternate; }
@keyframes ncPulse { from { opacity: .55; } to { opacity: 1; } }
.at-card .err { font-size: 13px; color: var(--danger); margin: 0; }
.at-card .vues { display: flex; gap: 10px; flex-wrap: wrap; }
.at-card .vues img { width: 190px; border-radius: 9px; border: 1px solid var(--line); display: block; background: var(--photo-crea); }

.at-card .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.at-card .actions button { font-size: 13px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--quiet); color: var(--ink); cursor: pointer; box-shadow: none; }
.at-card .actions button:hover { border-color: var(--line-strong); filter: none; }
.at-card .actions .ok { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent-text); font-weight: 700; }
.at-card .actions .danger { color: #ff9b9b; }
html.light .at-card .actions .danger { color: #b42318; }

.at-card .journal { margin-top: 12px; font-size: 12px; color: var(--muted); }
.at-card .journal summary { cursor: pointer; }
.at-card .journal p { margin: 6px 0 0; }

/* ==================== Marque (/marque) : le parcours guidé ==================== */
.mguide { max-width: 720px; margin: 0 auto; padding: 34px 24px 90px; }
.mg-tete h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
.mg-tete > p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; max-width: 62ch; }
.mg-tete strong { color: var(--accent-text); }

.mg-progres { display: flex; gap: 7px; margin-bottom: 26px; }
.mg-progres .dot {
  width: 26px; height: 7px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--veil-06); box-shadow: none; transition: 160ms var(--ease-ui);
}
.mg-progres .dot.fait { background: var(--accent-bd); }
.mg-progres .dot.on { background: var(--a-400); width: 40px; }
.mg-progres .dot:disabled { cursor: default; opacity: .5; }

.mg-carte {
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--sh-card);
  animation: mgIn 240ms var(--ease-ui);
}
@keyframes mgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mg-carte { animation: none; } }
.mg-num { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 8px; }
.mg-carte h2 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); margin: 0 0 6px; line-height: 1.3; }
.mg-aide { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.55; }
.mg-aide code { background: var(--field); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }

.mg-suggestions { display: grid; gap: 8px; margin-bottom: 14px; }
.mg-suggestions:empty { margin-bottom: 0; }
.mg-prop {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--quiet); color: var(--ink);
  font: inherit; cursor: pointer; box-shadow: none; transition: 140ms var(--ease-ui);
}
.mg-prop:hover { border-color: var(--line-strong); background: var(--veil-06); filter: none; }
.mg-prop.on { border-color: var(--a-400); background: var(--accent-soft); }
.mg-prop .tx { display: grid; gap: 2px; min-width: 0; }
.mg-prop strong { font-size: 14px; font-weight: 600; }
.mg-prop .sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.mg-prop .sw, .mg-recap .sw { display: flex; gap: 5px; flex: none; }
.mg-prop .sw span, .mg-recap .sw span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }

.mg-saisie { position: relative; }
.mg-saisie textarea {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 12px 46px 12px 14px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--field); color: var(--ink);
  font: inherit; font-size: 14.5px; line-height: 1.55; outline: none;
}
.mg-saisie textarea:focus { border-color: var(--accent-bd); }
.mg-saisie .dictee-btn { top: 9px; right: 9px; }

.mg-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.mg-ia {
  margin-right: auto; border: 1px solid var(--accent-bd); background: var(--accent-soft);
  color: var(--accent-text); border-radius: 999px; padding: 9px 16px; font: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: none;
}
.mg-ia:hover { filter: brightness(1.15); }
.mg-ia:disabled { opacity: .6; cursor: default; }
.mg-passer { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; box-shadow: none; padding: 9px 10px; }
.mg-passer:hover { color: var(--ink); filter: none; }
.mg-go {
  border: 0; border-radius: 11px; padding: 11px 22px; background: var(--accent-fill); color: #fff;
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: var(--sh-accent);
  text-decoration: none; display: inline-block;
}
.mg-go:hover { filter: brightness(1.1); text-decoration: none; }
.mg-go:disabled { opacity: .6; cursor: default; }

.mg-recap { display: grid; gap: 6px; margin-bottom: 6px; min-width: 0; }
/* Les bulles du récap sont RESPONSIVES (client 26/08) : largeur bornée à la
   carte (min-width 0 — sans lui, l'item de grille suit la largeur de son
   contenu et la bulle sort de la carte), texte À L'INTÉRIEUR avec retour à
   la ligne, plafonné à 3 lignes (l'édition complète est au clic). */
.mg-recap .ligne {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--quiet); color: var(--ink);
  font: inherit; cursor: pointer; box-shadow: none;
  min-width: 0; max-width: 100%; width: 100%;
}
/* La ligne est un <button> : neutraliser aussi le halo générique du survol. */
.mg-recap .ligne:hover { border-color: var(--line-strong); filter: none; box-shadow: none; }
.mg-recap .ligne:active { transform: none; }
.mg-recap .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); width: 118px; flex: none; padding-top: 2px; }
.mg-recap .v {
  font-size: 13.5px; min-width: 0; line-height: 1.55;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
/* Écran étroit : le libellé passe AU-DESSUS de la valeur. */
@media (max-width: 560px) {
  .mg-recap .ligne { flex-direction: column; gap: 4px; }
  .mg-recap .k { width: auto; padding-top: 0; }
}
.mg-fin { text-align: center; }
.mg-fin .mg-actions { justify-content: center; }

/* ---- Dictée vocale : le micro des barres de prompt ---- */
.dictee-btn {
  position: absolute; top: 8px; right: 8px; z-index: 8;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--quiet); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
  transition: 150ms var(--ease-ui);
}
.dictee-btn svg { width: 15px; height: 15px; }
.dictee-btn:hover { color: var(--ink); border-color: var(--line-strong); filter: none; }
.dictee-btn.rec {
  color: #fff; background: #e5484d; border-color: #e5484d;
  animation: dicteePulse 1.1s ease-in-out infinite alternate;
}
@keyframes dicteePulse { from { box-shadow: 0 0 0 0 rgba(229,72,77,.45); } to { box-shadow: 0 0 0 7px rgba(229,72,77,0); } }
.dictee-btn.att { color: var(--accent-text); border-color: var(--accent-bd); animation: ncPulse 1s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .dictee-btn.rec, .dictee-btn.att { animation: none; } }

/* Le texte ne passe pas sous le micro (le Studio a le sien à GAUCHE, réglé
   dans son propre bloc de paddings). */
#promptbox textarea { padding-right: 44px; }

/* ==================== Rose signature #ff0064 (demande client 2026-08-21) ====
   Remplace le vert sur QUATRE éléments seulement : page active de la sidebar,
   carte des crédits, avatar de repli du compte, et les logos (PNG recolorés,
   originaux verts sauvegardés dans design/backup-logo-vert/). Le reste de
   l'accent (boutons, chips, états) reste vert. Annulation = retirer ce bloc et
   restaurer les PNG de la sauvegarde. */
:root {
  --rose: #ff0064;
  /* Le MÊME dégradé que le bouton Générer du Studio (demande client). */
  --rose-fill: linear-gradient(115deg, #ff4a30 0%, #e0459e 46%, #3d74ff 100%);
  --rose-text: #ff5c9d;
  --rose-glow: rgba(224, 69, 158, 0.45);
}
html.light { --rose-text: #d60055; }

/* 1. Page sélectionnée dans la sidebar */
.side-link.on {
  background: var(--rose-fill); color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 2px rgba(0,0,0,0.5), 0 10px 26px -12px var(--rose-glow);
}
.side-link.on svg { color: #ffffff; }

/* 2. Carte des crédits : anneau + solde */
.credit-card { --a-400: var(--rose); }
.credit-card .cc-txt strong { color: var(--rose-text); }

/* 3. Avatar de repli du compte (initiales sans photo) */
.acc-ini { background: var(--rose-fill); }

/* ==================== Favoris (/favoris) ==================== */
.favpage { display: grid; grid-template-columns: 236px 1fr; gap: 22px; max-width: 1280px; margin: 0 auto; padding: 26px 30px 90px; align-items: start; }

.fav-side { position: sticky; top: 18px; display: grid; gap: 10px; }
.fav-side-head { display: flex; align-items: center; justify-content: space-between; }
.fav-add {
  width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none;
}
.fav-add:hover { border-color: var(--line-strong); filter: none; }
.fav-dossiers { display: grid; gap: 3px; }
.fav-liste { display: grid; gap: 3px; }

.fav-dossier {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px;
  color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; user-select: none; transition: 130ms var(--ease-ui);
}
.fav-dossier:hover { background: var(--side-hover); color: var(--ink); }
.fav-dossier.on { background: var(--veil-06); color: var(--ink); border-color: var(--line); }
.fav-dossier .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-dossier .n { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.fav-dossier.survol { border-color: var(--a-400); background: var(--accent-soft); color: var(--accent-text); }
.fav-dossier.porte { opacity: .45; }
.fav-menu {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; box-shadow: none; opacity: 0;
}
.fav-dossier:hover .fav-menu { opacity: 1; }
.fav-menu:hover { background: var(--veil-10); filter: none; }
.fav-aide { font-size: 11.5px; color: var(--ghost); line-height: 1.5; margin: 6px 0 0; }

.fav-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fav-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.fav-compte { font-size: 13px; color: var(--muted); }
.fav-actions { margin-left: auto; display: flex; gap: 8px; }
.fav-actions button { font-size: 12.5px; padding: 6px 12px; }
#fav-selbar:not(:empty) { margin-bottom: 12px; }

.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; min-height: 120px; }
.fav-card {
  margin: 0; position: relative; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--panel); box-shadow: var(--sh-card); cursor: grab;
  transition: transform 150ms var(--ease-ui), border-color 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui);
}
.fav-card:hover { transform: translateY(-2px); border-color: var(--accent-hover-bd); box-shadow: var(--sh-card-hover); }
.fav-card.porte { opacity: .4; cursor: grabbing; }
.fav-card.selected { outline: 2px solid var(--a-400); outline-offset: 1px; }
/* Trait d'insertion pendant le glisser. */
.fav-card.avant::before {
  content: ""; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 3px; z-index: 7;
  background: var(--a-400); border-radius: 2px;
}
.fav-card .shot { display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 1; background: var(--photo-crea); cursor: pointer; }
.fav-card .shot img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.fav-card figcaption {
  padding: 8px 11px 10px; font-size: 11.5px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 8px;
}
.fav-card figcaption span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-card .sel {
  position: absolute; top: 8px; left: 8px; z-index: 6; width: 22px; height: 22px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(10,10,8,.55);
  color: #fff; font-size: 11px; cursor: pointer; opacity: 0; box-shadow: none;
}
.fav-card:hover .sel, .fav-card .sel.on { opacity: 1; }
.fav-card .sel.on { background: var(--a-400); border-color: var(--a-400); }
.fav-card .fav-off {
  position: absolute; top: 8px; right: 8px; z-index: 6; width: 24px; height: 24px; padding: 0;
  border-radius: 50%; border: 0; background: rgba(10,10,8,.5); color: #ff5b66;
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; box-shadow: none;
}
.fav-card .fav-off svg { width: 13px; height: 13px; }
.fav-card:hover .fav-off { opacity: 1; }
.fav-off:hover { background: rgba(10,10,8,.75); filter: none; }

.fav-vide { color: var(--muted); font-size: 14px; padding: 34px 0; text-align: center; }
.fav-choix {
  display: grid; gap: 4px; padding: 6px; min-width: 180px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.fav-choix button { justify-content: flex-start; font-size: 13px; padding: 7px 11px; }

@media (max-width: 860px) {
  .favpage { grid-template-columns: 1fr; padding: 20px 16px 80px; }
  .fav-side { position: static; }
  .fav-dossiers { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; }
  .fav-liste { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; }
  .fav-aide { display: none; }
}

/* Images ajoutées à la barre de prompt du Studio.
   Le petit + rond ouvre le sélecteur ; la bande de vignettes apparaît AU-DESSUS
   de la zone de texte ; on peut aussi lâcher des fichiers sur la barre. */
.chip-plus {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--quiet); color: var(--ink);
  font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  transition: 150ms var(--ease-ui);
}
.chip-plus:hover { border-color: var(--line-strong); background: var(--veil-06); filter: none; }
.genbar .chips .chip-plus { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.genbar .chips .chip-plus:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.08); }

/* Références ajoutées : cartes flottantes AU-DESSUS de la barre, comme une
   prolongation (référence client 24/08 soir) — HORS du flux : ajouter un média
   ne change JAMAIS la hauteur de la barre ni de la carte média. */
.s-fichiers {
  position: absolute; bottom: calc(100% + 10px); left: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0;
}
.s-fichiers .fichier {
  position: relative; width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85); background: var(--photo); flex: none;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.8); cursor: zoom-in;
}
.s-fichiers .fichier img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-fichiers .fichier .nm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 3px 1px;
  background: rgba(10,10,8,.66); color: #fff; font-size: 7px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Agrandissement d'une référence (double-clic sur la vignette). */
.ref-zoom { position: fixed; inset: 0; z-index: 120; background: rgba(6,6,5,.82); display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.ref-zoom img { max-width: min(880px, 92vw); max-height: 84vh; border-radius: 16px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); background: var(--photo); }
.ref-zoom .x {
  position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ref-zoom .x:hover { background: rgba(255,255,255,.26); filter: none; }
.s-fichiers .fichier .x {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(10,10,8,.72); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer; box-shadow: none;
  display: flex; align-items: center; justify-content: center; opacity: 0;
  transition: opacity 130ms var(--ease-ui);
}
.s-fichiers .fichier:hover .x { opacity: 1; }
.s-fichiers .fichier .x:hover { background: #e5484d; filter: none; }

/* Survol d'un glisser de fichiers : la barre s'allume. */
.genbar.depose { border-color: var(--a-400); box-shadow: 0 0 0 2px var(--a-400) inset, var(--sh-card); }

/* ==================== Production Center (/production) ====================
   Le fil de conversation au-dessus, la barre de prompt du Studio en bas —
   même pilule, même aura de constellation (classes réutilisées telles quelles). */
.prodpage {
  display: grid; grid-template-columns: 250px 1fr; gap: 18px;
  max-width: 1280px; margin: 0 auto; padding: 20px 30px;
  height: 100dvh; box-sizing: border-box;
  /* La page NE scrolle pas : seuls la liste et le fil défilent, chacun chez soi.
     (Sans ça, le halo de la barre débordait sous le pli et faisait glisser toute
     la page : on perdait le haut de la conversation.) */
  overflow: hidden;
}
.prod-side {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
  background: var(--side-bg); border: 1px solid var(--side-line); border-radius: 18px;
  padding: 14px 12px; box-shadow: var(--sh-card); align-self: stretch; overflow: hidden;
}
.prod-side::before { content: "Conversations"; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.prod-new { font-size: 13px; padding: 10px 12px; }
.prod-convs { display: grid; gap: 4px; overflow-y: auto; min-height: 0; align-content: start; scrollbar-width: thin; }
.prod-conv {
  position: relative; display: grid; gap: 2px; padding: 9px 30px 9px 12px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; user-select: none;
}
.prod-conv:hover { background: var(--side-hover); }
.prod-conv.on { background: var(--veil-06); border-color: var(--line); }
.prod-conv .titre { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-conv .meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-conv .x {
  position: absolute; top: 8px; right: 7px; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; box-shadow: none; opacity: 0;
}
.prod-conv:hover .x { opacity: 1; }
.prod-conv .x:hover { background: var(--veil-10); color: var(--ink); filter: none; }

/* La conversation vit dans SA carte, comme la liste : plus de simple filet. */
.prod-main {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--sh-card); padding: 0 20px;
}
.prod-tete {
  flex: none; display: flex; align-items: baseline; gap: 10px;
  padding: 14px 2px 12px; border-bottom: 1px solid var(--line);
}
.prod-tete span:first-child {
  font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-tete .mod { font-size: 11.5px; color: var(--muted); margin-left: auto; flex: none; }
.prod-fil { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 2px 8px; scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px; }

.prod-accueil { margin: auto; text-align: center; max-width: 480px; }
.prod-accueil h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
.prod-accueil p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }
.prod-accueil code { background: var(--field); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }

.prod-msg { display: flex; flex-direction: column; gap: 8px; }
.prod-msg.user { align-items: flex-end; }
.prod-msg.assistant { align-items: flex-start; }
.prod-msg .bulle {
  max-width: 74ch; padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.6;
}
.prod-msg.user .bulle { background: var(--accent-soft); border: 1px solid var(--accent-bd); color: var(--ink); border-bottom-right-radius: 5px; }
.prod-msg.assistant .bulle { background: var(--surface-grad), var(--panel); border: 1px solid var(--line); color: var(--ink-soft); border-bottom-left-radius: 5px; }
.prod-msg .bulle p { margin: 0 0 9px; }
.prod-msg .bulle p:last-child { margin-bottom: 0; }
.prod-msg .bulle.attente { color: var(--muted); animation: ncPulse 1.3s ease-in-out infinite alternate; }

.prod-msg .gen-bloc { max-width: 74ch; }
.prod-msg .gen-bloc .att { font-size: 13px; color: var(--accent-text); margin: 0; animation: ncPulse 1.3s ease-in-out infinite alternate; }
.prod-msg .gen-bloc .vues { display: flex; gap: 10px; flex-wrap: wrap; }
.prod-msg .gen-bloc .vues img { width: 210px; border-radius: 11px; border: 1px solid var(--line); display: block; background: var(--photo-crea); }

/* La barre : mêmes classes que le Studio, resserrée pour le chat. */
.prod-barre { flex: none; padding: 14px 0 18px; margin-top: 0; }
.prod-genbar { width: 100%; min-height: 0; }
/* ⚠️ min-height: 0 : la hauteur de croisière 108px de la barre du STUDIO ne
   doit pas s'imposer au composer de Production Center (design de l'autre
   session : ici c'est la conversation qui prime, la barre reste naturelle). */
/* Production Center : l'aura de la barre EN SOURDINE (demande client 24/08).
   Même objet que le Studio, mais resserré, deux fois plus discret et sans
   pulsation — ici c'est la conversation qui prime, pas le spectacle. */
.prod-barre .genbar-aura { inset: -30px -36px; }
.prod-barre .ga-glow { opacity: .4; animation: none; }
.prod-barre .ga-glyphs { opacity: .22; animation: none; }
.prod-barre .ga-glyphs::before { animation: none; }
.prod-genbar textarea { min-height: 24px; max-height: 160px; }
.prod-genbar .chips .chip.on { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent-text); }

@media (max-width: 860px) {
  .prodpage { grid-template-columns: 1fr; height: auto; padding: 16px 14px 0; }
  .prod-side { flex-direction: column-reverse; }
  .prod-convs { grid-auto-flow: column; grid-auto-columns: minmax(180px, max-content); overflow-x: auto; }
}

/* Atelier : édition du prompt en place */
.at-card .prompt { cursor: text; }
.at-card .prompt:hover { border-color: var(--line-strong); }
.at-card .prompt-edit { margin-top: 12px; display: grid; gap: 8px; }
.at-card .prompt-edit textarea {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 11px 13px; border-radius: 9px;
  background: var(--field); border: 1px solid var(--accent-bd); color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.55; outline: none;
}
.at-card .prompt-edit input {
  width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 8px;
  background: var(--field); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 12.5px; outline: none;
}
.at-card .prompt-edit input:focus { border-color: var(--accent-bd); }

/* Carte Assets unifiée : pile de vignettes + pastilles de kit */
.genbar .slot-assets .pile { display: flex; }
.genbar .slot-assets .pile img, .genbar .slot-assets .pile .pastille {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid #17191f; margin-left: -8px; background: var(--photo);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; position: static; padding: 0;
}
.genbar .slot-assets .pile > :first-child { margin-left: 0; }
.picker .cell.on { outline: 2px solid var(--a-400); outline-offset: 1px; border-radius: 10px; }
.picker .cell .sous { display: block; font-size: 9.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-pastilles { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 100%; background: var(--field); }
.kit-pastilles span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }

/* ==================== Creativity Lab (/lab) ==================== */
.labpage { max-width: 1280px; margin: 0 auto; padding: 26px 30px 90px; }
.lab-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.lab-tete h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 6px; }
.lab-tete p { color: var(--muted); font-size: 14px; margin: 0; max-width: 60ch; }
.lab-outils { display: flex; gap: 10px; align-items: center; }
/* `hidden` doit gagner malgré le display:flex ci-dessus (bouton d'ajout du
   feed masqué chez les visiteurs) — même parade pour les boutons, dont le
   display:inline-block de la règle de base battait aussi l'attribut. */
.lab-outils[hidden], .lab-outils button[hidden] { display: none; }
.lab-outils input[type="search"] {
  width: 220px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink); font: inherit; font-size: 13.5px; outline: none;
}
.lab-outils input:focus { border-color: var(--accent-bd); }

/* Le mur façon Pinterest : colonnes CSS, chaque carte garde son ratio. */
/* ---- Feed d'un créateur (2026-08-22) : vitrine publique de ses partages ---- */
.feed-tete { align-items: center; }
.feed-auteur { display: flex; align-items: center; gap: 16px; }
.feed-av {
  width: 58px; height: 58px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: #fff;
  background: var(--rose-fill, var(--accent-fill));
}
.feed-av img { width: 100%; height: 100%; object-fit: cover; }
.feed-auteur h1 { margin: 0; }
.feed-auteur p { margin: 2px 0 0; color: var(--muted); }

/* Pastille créateur dans le viewer (photo + nom, lien vers son feed) : posée
   AVANT le libellé du panneau, c'est la signature du visuel. */
.vauteur { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; text-decoration: none; color: var(--ink); }
a.vauteur:hover .vauteur-nom { text-decoration: underline; }
.vauteur .feed-av { width: 36px; height: 36px; font-size: 13px; }
.vauteur-nom { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.vauteur-sous { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* Filtres par tags du Lab (2026-08-31) : multi-sélection cumulative. */
.lab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.lab-tags:empty { margin: 0; }
.lab-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--quiet); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; box-shadow: none;
}
.lab-tag:hover { border-color: var(--line-strong); color: var(--ink); filter: none; }
.lab-tag .c { font-size: 10.5px; font-weight: 700; color: var(--ghost); font-variant-numeric: tabular-nums; }
.lab-tag.on { background: var(--accent-soft, rgba(255, 0, 100, .14)); border-color: var(--accent-bd, rgba(255, 0, 100, .5)); color: var(--rose-text, #ff3d8b); }
.lab-tag.on .c { color: inherit; opacity: .7; }
.lab-tag.efface { border-style: dashed; }

.lab-mur { columns: 4 240px; column-gap: 14px; }
/* Mur en ORDRE DE LECTURE (Lab, 24/08) : colonnes explicites remplies
   horizontalement par le script — le CSS columns (au-dessus, gardé pour le
   feed) remplissait chaque colonne de haut en bas. */
.lab-mur.rangs { columns: auto; column-gap: normal; display: flex; gap: 14px; align-items: flex-start; }
.lab-mur.rangs .lab-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lab-mur.rangs .lab-carte { margin: 0; }
/* Mode édition du catalogue (maison) : crayon dans la barre d'onglets, croix
   de suppression toujours visible, cartes déplaçables. */
.lab-crayon {
  width: 34px; height: 34px; padding: 0; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--quiet); color: var(--muted); border: 1px solid var(--line); box-shadow: none;
}
.lab-crayon svg { width: 15px; height: 15px; }
.lab-crayon:hover { color: var(--ink); filter: none; }
.lab-crayon.on { background: var(--rose-fill, var(--accent-fill)); color: #fff; border: 0; }
.lab-carte.editable { cursor: grab; }
.lab-carte.editable:active { cursor: grabbing; }
.lab-carte .sup-croix { opacity: 1; font-size: 17px; line-height: 1; padding: 0; }
.lab-carte .sup-croix:hover { background: #c62828; }
.lab-carte.glisse { opacity: .45; }
.lab-carte.cible { outline: 2px solid #ff3d8b; outline-offset: 2px; }
/* Squelette de chargement des cartes du Lab (demande client 24/08) : encadré
   gris de la taille d'une vignette, bande blanche qui balaie de haut en bas,
   l'image prend la place en fondu une fois décodée. */
.lab-carte.chargement { aspect-ratio: 4 / 5; background: var(--field); }
.lab-carte.chargement img { opacity: 0; }
.lab-carte img { transition: opacity .3s ease; }
.lab-carte.chargement::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 20%, rgba(255,255,255,.13) 50%, transparent 80%);
  transform: translateY(-100%);
  animation: labScan 1.3s linear infinite;
}
html.light .lab-carte.chargement::before {
  background: linear-gradient(to bottom, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
}
@keyframes labScan { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .lab-carte.chargement::before { animation: none; } }
.lab-carte {
  margin: 0 0 14px; break-inside: avoid; position: relative; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--sh-card); transition: transform 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui);
}
.lab-carte:hover { transform: translateY(-2px); box-shadow: var(--sh-card-hover); }
.lab-carte img { width: 100%; display: block; }
.lab-carte .voile {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px; padding: 12px; opacity: 0; transition: opacity 160ms var(--ease-ui);
  background: linear-gradient(to top, rgba(8,8,10,.72), transparent 55%);
}
.lab-carte:hover .voile { opacity: 1; }
.lab-carte .voile .titre { color: #fff; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,.6); }
.lab-carte .reuse {
  border: 0; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.94); color: #131313; cursor: pointer; box-shadow: none;
  align-self: flex-start;
}
.lab-carte .reuse:hover { background: #fff; filter: none; }
.lab-vide { text-align: center; color: var(--muted); font-size: 14px; padding: 60px 0; }
@media (max-width: 700px) { .labpage { padding: 20px 14px 70px; } .lab-mur { columns: 2 150px; } }

/* ==================== Guide des prompts (page interne) ==================== */
.gpage { max-width: 860px; margin: 0 auto; padding: 34px 24px 90px; }
.g-tete h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); }
.g-tete p { margin: 0 0 26px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

.g-todo {
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px 14px; margin-bottom: 40px;
}
.g-todo-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.g-todo-tete h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.012em; color: var(--ink); }
.g-modele { display: flex; align-items: center; gap: 9px; }
.g-modele .lbl { font-size: 12px; color: var(--muted); }
.g-modele select {
  font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line-strong); outline: none; cursor: pointer;
}
.g-avancement {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--a-400); background: var(--accent-soft); border: 1px solid var(--accent-bd);
  padding: 3px 9px; border-radius: 999px;
}

.g-phase { padding: 10px 0 6px; border-top: 1px solid var(--line); }
.g-phase:first-child { border-top: 0; }
.g-phase h3 { margin: 4px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--ink-soft); }
.g-phase h3.fait { color: var(--a-400); }
.g-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; margin: 0 -8px;
  border-radius: 9px; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.g-item:hover { background: var(--quiet); }
.g-item input {
  appearance: none; flex: none; width: 17px; height: 17px; margin-top: 2px; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--field);
  display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.g-item input:checked { background: var(--a-500); border-color: var(--a-500); }
.g-item input:checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.g-item.fait span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }

.g-titre-guide { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.016em; color: var(--ink-strong); }
.g-guide article { border-top: 1px solid var(--line); padding: 22px 0 10px; }
.g-guide article:first-of-type { border-top: 0; }
.g-guide h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.g-guide p, .g-guide li { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.g-guide p { margin: 0 0 10px; max-width: 72ch; }
.g-guide ul { margin: 0 0 12px; padding-left: 20px; }
.g-guide li { margin-bottom: 6px; }
.g-guide strong { color: var(--ink); font-weight: 650; }
.g-guide code {
  font-size: 12px; background: var(--sunken); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 5px; color: var(--ink);
}
.g-guide pre {
  font-size: 12px; line-height: 1.7; background: var(--sunken); border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 16px; overflow-x: auto; color: var(--ink-soft); margin: 0 0 12px;
}
.g-regle {
  background: var(--accent-soft); border: 1px solid var(--accent-bd); border-radius: 11px;
  padding: 11px 14px; color: var(--ink) !important;
}

/* ==================== Roadmap (page interne) ==================== */
.rpage { max-width: 780px; margin: 0 auto; padding: 34px 24px 90px; }
.r-tete h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); }
.r-tete > p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.r-ajout { display: flex; gap: 10px; margin-bottom: 8px; }
.r-ajout input {
  flex: 1; font: inherit; font-size: 13.5px; padding: 10px 14px; border-radius: 10px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line-strong); outline: none;
}
.r-ajout input:focus { background: var(--field-focus); border-color: var(--accent-bd); }
.r-tete textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.55;
  padding: 9px 14px; border-radius: 10px; background: var(--field); color: var(--ink);
  border: 1px solid var(--line); outline: none; resize: vertical; margin-bottom: 26px;
}
.r-tete textarea:focus { background: var(--field-focus); border-color: var(--accent-bd); }

.r-groupe { margin-bottom: 26px; }
.r-groupe h2 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

.r-carte {
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: 13px; margin-bottom: 8px; overflow: hidden;
}
.r-carte.ouvert { border-color: var(--line-strong); }
.r-sommaire { display: flex; align-items: center; gap: 11px; padding: 11px 12px 11px 14px; }
.r-sommaire .titre {
  flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; box-shadow: none;
  padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.4; cursor: pointer;
}
.r-sommaire .titre:hover { color: var(--ink-strong); filter: none; }
.r-carte.st-fait .titre { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.r-nbpj { flex: none; font-size: 11px; color: var(--ghost); }
.r-coche {
  flex: none; width: 22px; height: 22px; border-radius: 7px; cursor: pointer; padding: 0;
  border: 1.5px solid var(--line-strong); background: var(--field); color: #fff;
  display: grid; place-items: center; font-size: 13px; line-height: 1; box-shadow: none;
  transition: background .12s, border-color .12s;
}
.r-coche:hover { border-color: var(--rose-glow); filter: none; }
.r-coche svg { width: 13px; height: 13px; }
.r-ico {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent;
  color: var(--ghost); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; box-shadow: none;
  opacity: 0; transition: opacity .12s, color .12s;
}
.r-carte:hover .r-ico, .r-carte.ouvert .r-ico { opacity: 1; }
.r-ico:hover { color: var(--ink); background: var(--quiet); filter: none; }
.r-sup { font-size: 17px; }
.r-sup:hover { color: #ef5d5d; background: rgba(239, 93, 93, 0.1); }

.r-corps { padding: 2px 16px 14px 47px; }
.r-corps p { margin: 0 0 9px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); max-width: 68ch; }
.r-corps p.vide { color: var(--ghost); font-style: italic; }

/* Édition en place : titre et détail, rien n'est figé. */
.r-champ {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.6;
  padding: 9px 12px; border-radius: 9px; background: var(--field); color: var(--ink);
  border: 1px solid var(--accent-bd); outline: none; margin-bottom: 8px; resize: vertical;
}
.r-champ:first-child { font-size: 13.5px; font-weight: 600; }
.r-edit-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.r-edit-act button { font-size: 12.5px; padding: 8px 14px; }

/* Pièces jointes : captures, prompts, briefs. */
.r-pj { display: grid; gap: 8px; margin-top: 14px; }
.r-pj-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 11px;
}
.r-pj-item .vue { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--photo); display: grid; place-items: center; border: 1px solid var(--line); }
.r-pj-item .vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-pj-item .vue .ext { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.r-pj-item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.r-pj-item .tx strong { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-pj-item .tx span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-pj-item .act { display: flex; gap: 6px; flex: none; }
.r-pj-item .mini {
  font-size: 11.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--ink-soft); box-shadow: none; text-decoration: none; cursor: pointer;
}
.r-pj-item .mini:hover { border-color: var(--line-strong); color: var(--ink); filter: none; text-decoration: none; }
.r-pj-item .mini.danger:hover { color: #ef5d5d; border-color: rgba(239, 93, 93, 0.4); }
.r-pj-ajout {
  display: flex; align-items: center; justify-content: center; padding: 12px;
  border: 1px dashed var(--line-strong); border-radius: 11px; cursor: pointer;
  font-size: 12.5px; color: var(--muted); transition: 130ms var(--ease-ui);
}
.r-pj-ajout:hover, .r-pj-ajout.depose { border-color: var(--rose-glow); color: var(--ink); background: var(--quiet); }

@media (max-width: 700px) {
  .gpage, .rpage { padding: 20px 14px 70px; }
  .g-todo { padding: 16px 14px 10px; }
  .r-ajout { flex-direction: column; }
  .r-corps { padding-left: 16px; }
}

/* ==================== Boutons : le dégradé partout ====================
   Décision du 21/08 : plus aucun bouton vert plein. Le dégradé du bouton
   Générer (rouge → magenta → bleu) est LA couleur d'action de Nova Studio.
   Le vert reste la teinte d'ACCENT (liens, chips actives, bordures), il ne
   remplit plus de bouton. On repeint donc les surfaces d'action, y compris leur
   halo — un bouton dégradé posé sur une ombre verte trahissait le bricolage.
   Les boutons secondaires (.btn-ghost, .btn-danger, .chip, .side-link…) posent
   leur propre fond avec une spécificité de classe : ils ne sont pas touchés. */
button, .btn, .btn-generate, .mg-go, .go-primaire {
  background-image: var(--rose-fill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 2px rgba(0,0,0,0.5), 0 10px 26px -12px var(--rose-glow);
}
button:hover, .btn:hover, .btn-generate:hover, .mg-go:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -12px var(--rose-glow);
}
button:disabled, .btn-generate:disabled { box-shadow: none; }

/* Cases cochées et pastilles d'état : même famille de couleur que les actions. */
.g-item input:checked { background: var(--rose); border-color: var(--rose); }
.r-carte.st-fait .r-coche { background: var(--rose-fill); border-color: transparent; }
.r-carte.st-en-cours .r-coche { color: var(--rose-text); border-color: var(--rose-glow); background: rgba(224, 69, 158, 0.14); }

/* Pastilles de sélection, jauges et repères : même famille que les actions.
   (Le vert reste sur les liens, chips actives et bordures d'accent.) */
.gen .sel.on, .fav-card .sel.on { background: var(--rose); border-color: var(--rose); }
.gen.selected, .fav-card.selected { outline-color: var(--rose); }
.fav-card.avant::before, .fav-card.apres::before { background: var(--rose); }
.mg-progres .dot.on { background: var(--rose-fill); }
.mg-progres .dot.fait { background: var(--rose-glow); }

/* Fin du vert : les états interactifs (chips actives, liens, bordures d'accent,
   halos) rejoignent la famille du dégradé. Un seul endroit à défaire pour
   revenir en arrière — l'échelle verte --a-* reste définie plus haut. */
:root, html.light {
  --accent-soft: rgba(224, 69, 158, 0.15);
  --accent-bd: rgba(224, 69, 158, 0.42);
  --accent-text: var(--rose-text);
  --a-glow: var(--rose-glow);
  --a-400: var(--rose);
}
html.light { --accent-soft: rgba(214, 0, 85, 0.13); --accent-bd: rgba(214, 0, 85, 0.38); }

/* Le petit cours d'une étape du parcours de marque (replié par défaut). */
.mg-guide { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); overflow: hidden; }
.mg-guide summary {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px; cursor: pointer;
  list-style: none; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.mg-guide summary::-webkit-details-marker { display: none; }
.mg-guide summary:hover { color: var(--ink); }
.mg-guide summary .ico {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 800;
}
.mg-guide[open] summary { border-bottom: 1px solid var(--line); }
.mg-guide .corps { padding: 12px 14px 14px; }
.mg-guide .corps p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.mg-guide .corps p.fin { margin: 10px 0 0; color: var(--ink-soft); font-style: italic; }
.mg-guide .axes { margin: 0 0 4px; padding: 0; list-style: none; display: grid; gap: 7px; }
.mg-guide .axes li { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.mg-guide .axes strong { color: var(--ink); font-weight: 650; }

/* Loupe sur la vignette d'un terme + aperçu plein écran. */
.lexpick .lp-case { position: relative; }
.lexpick .lp-case .lp-item { width: 100%; }
.lexpick .lp-loupe {
  position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; z-index: 3;
  padding: 0; border: 0; border-radius: 6px; cursor: pointer; box-shadow: none;
  background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity 130ms var(--ease-ui);
}
.lexpick .lp-loupe svg { width: 12px; height: 12px; }
.lexpick .lp-case:hover .lp-loupe, .lexpick .lp-loupe:focus-visible { opacity: 1; }
.lexpick .lp-loupe:hover { background: rgba(0, 0, 0, 0.82); filter: none; }
@media (hover: none) { .lexpick .lp-loupe { opacity: .85; } }

.lex-apercu {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(3px); animation: ncFadeIn 140ms var(--ease-ui);
}
.lex-apercu .boite {
  position: relative; width: min(760px, 100%); max-height: 90vh; overflow: auto;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line-strong);
  border-radius: 18px; box-shadow: var(--sh-card);
}
.lex-apercu img { width: 100%; display: block; border-radius: 18px 18px 0 0; background: var(--photo-crea); }
.lex-apercu .txt { padding: 16px 20px 20px; }
.lex-apercu .tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lex-apercu .tete strong { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.lex-apercu .tete em { font-style: normal; font-size: 13px; color: var(--accent-text); font-weight: 600; }
.lex-apercu .phrase { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.lex-apercu .usage { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.lex-apercu .frag {
  display: block; font-size: 11.5px; line-height: 1.5; color: var(--muted);
  background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.lex-apercu .x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer; box-shadow: none;
}
.lex-apercu .x:hover { background: rgba(0, 0, 0, 0.8); filter: none; }

/* Menu « / » du Studio : le vocabulaire visuel avec ses exemples. */
.at-menu.slash-menu { max-height: 380px; padding-bottom: 4px; }
.slash-menu .sm-famille {
  position: sticky; top: 0; z-index: 2; padding: 7px 12px 5px;
  background: var(--panel); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ghost); border-bottom: 1px solid var(--line);
}
.slash-menu .sm-rang { position: relative; }
.slash-menu .sm-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 11px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.slash-menu .sm-item:hover { background: var(--veil-06); filter: none; }
.slash-menu .sm-item img {
  width: 52px; height: 40px; flex: none; object-fit: cover; border-radius: 7px;
  background: var(--photo); border: 1px solid var(--line);
}
.slash-menu .sm-item .pastille {
  width: 52px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 7px;
  background: var(--quiet); border: 1px solid var(--line); color: var(--muted); font-weight: 700;
}
.slash-menu .sm-item .tx { display: grid; gap: 1px; min-width: 0; }
.slash-menu .sm-item strong { font-size: 13px; font-weight: 600; line-height: 1.25; }
.slash-menu .sm-item em {
  font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slash-menu .sm-loupe {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--quiet); color: var(--muted); display: grid; place-items: center;
  cursor: pointer; box-shadow: none; opacity: 0; transition: opacity 130ms var(--ease-ui);
}
.slash-menu .sm-loupe svg { width: 13px; height: 13px; }
.slash-menu .sm-rang:hover .sm-loupe { opacity: 1; }
.slash-menu .sm-loupe:hover { color: var(--ink); border-color: var(--line-strong); filter: none; }
@media (hover: none) { .slash-menu .sm-loupe { opacity: .8; } }

/* ==================== Marque : bibliothèque des kits ==================== */
.mk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 4px; }
.mk-carte {
  display: flex; align-items: center; gap: 13px; padding: 14px; text-align: left;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line); border-radius: 15px;
  font: inherit; color: var(--ink); cursor: pointer; box-shadow: none; transition: 140ms var(--ease-ui);
}
.mk-carte:hover { border-color: var(--line-strong); transform: translateY(-1px); filter: none; }
.mk-logo {
  flex: none; width: 52px; height: 52px; border-radius: 13px; overflow: hidden;
  background: var(--quiet); border: 1px solid var(--line); display: grid; place-items: center;
}
.mk-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-logo .ini { font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mk-logo.grand { width: 76px; height: 76px; border-radius: 17px; }
.mk-logo.grand .ini { font-size: 30px; }
/* Le VRAI logo : rectangle ~16:9 avec le nom — l'icône reste carrée. */
.mk-logo.grand.rect { width: 136px; }
/* Un rang par objet (icône / logo) : la vignette à gauche, le libellé et les actions à droite. */
.mk-visuel-rang { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.mk-visuel-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-visuel-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mk-variantes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mk-variantes .k { font-size: 10px; color: var(--ghost); }
/* Une proposition de lockup s'affiche en large. */
.mk-props .cell.rect img { aspect-ratio: 16/9; object-fit: contain; }
.mk-carte .tx { display: grid; gap: 3px; min-width: 0; }
.mk-carte .tx strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.mk-carte .tx code { font-size: 11px; color: var(--accent-text); }
.mk-carte .sw { display: flex; gap: 3px; }
.mk-carte .sw span { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14); }
.mk-carte .meta { font-size: 11px; color: var(--muted); }
.mk-creer { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.mk-creer .plus {
  flex: none; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: var(--rose-fill); color: #fff; font-size: 26px; font-weight: 600; line-height: 1;
}
.mk-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.mk-note code { background: var(--field); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }

/* Fiche d'un kit */
.mk-retour {
  background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 16px;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
.mk-retour:hover { color: var(--ink); filter: none; }
.mk-fiche-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.mk-id { display: grid; gap: 5px; flex: 1; min-width: 220px; }
.mk-nom {
  font: inherit; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong);
  background: transparent; border: 0; border-bottom: 1px dashed transparent; outline: none; padding: 2px 0; width: 100%;
}
.mk-nom:hover, .mk-nom:focus { border-bottom-color: var(--line-strong); }
.mk-id code { font-size: 12px; color: var(--accent-text); }
.mk-logo-actes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mk-logo-actes .mini {
  font-size: 11.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--ink-soft); box-shadow: none; cursor: pointer; display: inline-flex;
}
.mk-logo-actes .mini:hover { border-color: var(--line-strong); color: var(--ink); filter: none; }
.mk-sup { font-size: 12px; padding: 8px 13px; align-self: flex-start; }

.mk-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.mk-champ { display: grid; gap: 5px; }
.mk-champ > span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mk-champ textarea {
  font: inherit; font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 10px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line); outline: none; resize: vertical;
}
.mk-champ textarea:focus { background: var(--field-focus); border-color: var(--accent-bd); }
.mk-champs > button { grid-column: 1 / -1; justify-self: end; font-size: 13px; padding: 10px 18px; }

.mk-refs-tete h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.mk-refs-tete p { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 68ch; }
.mk-refcat { margin-bottom: 18px; }
.mk-refcat h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-refcat .vues { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; }
.mk-refcat .cell { position: relative; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); background: var(--photo-crea); }
.mk-refcat .cell img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mk-refcat .cell .x {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; box-shadow: none; opacity: 0; transition: opacity .12s;
}
.mk-refcat .cell:hover .x { opacity: 1; }
.mk-refcat .cell .x:hover { background: rgba(200,40,40,.85); filter: none; }
.mk-vide { font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .mk-champs { grid-template-columns: 1fr; } }

/* Fenêtre « Ajouter au kit de marque » (Studio) */
.kit-select {
  font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line-strong);
  outline: none; cursor: pointer; width: 100%;
}
.kit-seul { font-size: 13px; color: var(--ink-soft); margin: 0; }
.kit-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kit-cats button {
  font-size: 12.5px; padding: 11px 10px; border-radius: 10px;
  background: var(--quiet); color: var(--ink); border: 1px solid var(--line);
  box-shadow: none; background-image: none;
}
.kit-cats button:hover { border-color: var(--accent-bd); background: var(--accent-soft); filter: none; box-shadow: none; }

/* Avis global d'un candidat (Atelier) : note sur 5 + appréciation. */
.at-card .avis-global {
  display: grid; gap: 8px; margin-top: 12px; padding: 11px 12px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 11px;
}
.at-card .avis-global .rang { display: flex; align-items: center; gap: 10px; }
.at-card .avis-global .lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.at-card .avis-global .date { font-size: 11px; color: var(--ghost); margin-left: auto; }
.at-card .etoiles { display: flex; gap: 2px; }
.at-card .etoiles .et {
  background: transparent; border: 0; box-shadow: none; padding: 0 2px;
  font-size: 18px; line-height: 1; color: var(--line-strong); cursor: pointer;
}
.at-card .etoiles .et:hover { filter: none; color: var(--rose-text); }
.at-card .etoiles .et.on { color: var(--rose); }
.at-card .avis-global textarea {
  font: inherit; font-size: 12.5px; line-height: 1.55; padding: 8px 11px; border-radius: 9px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line); outline: none; resize: vertical;
}
.at-card .avis-global textarea:focus { border-color: var(--accent-bd); }
.at-card .avis-global .mini { justify-self: end; font-size: 12px; padding: 7px 13px; }

/* Saisies client d'un style ([[...]]) : petites cases qui s'agrandissent. */
.genbar .s-saisies { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 6px; }
.genbar .saisie {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: 999px;
}
.genbar .saisie > span { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.genbar .saisie input {
  font: inherit; font-size: 12.5px; color: var(--ink); background: var(--sunken);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; outline: none;
  min-width: 16ch; max-width: 46ch; transition: width 120ms var(--ease-ui);
}
.genbar .saisie input:focus { border-color: var(--accent-bd); background: var(--field-focus); }

/* Import direct de références sur la fiche du kit. */
.mk-refcat.vide h3 { color: var(--ghost); }
.mk-refcat .cell.ajout {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  aspect-ratio: 1; cursor: pointer; background: transparent;
  border: 1px dashed var(--line-strong); border-radius: 11px;
  color: var(--muted); transition: 130ms var(--ease-ui);
}
.mk-refcat .cell.ajout:hover, .mk-refcat .cell.ajout.depose {
  border-color: var(--rose-glow); color: var(--ink); background: var(--quiet);
}
.mk-refcat .cell.ajout .plus { font-size: 22px; line-height: 1; }
.mk-refcat .cell.ajout .lg { font-size: 11px; font-weight: 600; }
.mk-refcat .cell .tag {
  position: absolute; left: 6px; bottom: 6px; z-index: 2; padding: 2px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 999px; pointer-events: none;
}

/* Roadmap : la colonne « livré, à valider par Etienne ». */
.r-carte.st-a-valider { border-color: var(--accent-bd); }
.r-carte.st-a-valider .r-coche {
  background: var(--accent-soft); border-color: var(--accent-bd); color: var(--rose-text);
  font-weight: 800; font-size: 12px;
}
.r-carte.st-a-valider .titre::after {
  content: "à valider"; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rose-text); background: var(--accent-soft); border: 1px solid var(--accent-bd);
  vertical-align: middle;
}

/* Chips de VARIATION d'un style : ce qui change à chaque image, épinglable. */
.genbar .s-saisies .variante {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--field); border: 1px dashed var(--line-strong); border-radius: 999px;
  font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer;
  box-shadow: none; background-image: none;
}
.genbar .s-saisies .variante:hover { border-color: var(--accent-bd); filter: none; box-shadow: none; }
.genbar .s-saisies .variante.on { border-style: solid; border-color: var(--accent-bd); background: var(--accent-soft); }
.genbar .s-saisies .variante .lbl { font-size: 11px; font-weight: 600; color: var(--muted); }
.genbar .s-saisies .variante .val { color: var(--ink-soft); }
.genbar .s-saisies .variante.on .val { color: var(--accent-text); font-weight: 600; }

/* Propositions de logo générées (fiche du kit). */
.mk-props { margin-bottom: 26px; }
.mk-props h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-props .vues { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: start; }
.mk-props .cell.rect { grid-column: span 2; }
@media (max-width: 480px) { .mk-props .cell.rect { grid-column: auto; } }
.mk-props .cell {
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  background: var(--surface-grad), var(--panel); display: flex; flex-direction: column;
}
.mk-props .cell img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: var(--photo-crea); }
.mk-props .cell .act { display: flex; gap: 6px; padding: 8px; }
.mk-props .cell .mini {
  flex: 1; font-size: 11.5px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--ink-soft); box-shadow: none; cursor: pointer; background-image: none;
}
.mk-props .cell .mini:hover { border-color: var(--accent-bd); color: var(--ink); filter: none; box-shadow: none; }
.mk-props .cell .mini.danger:hover { color: #ef5d5d; border-color: rgba(239, 93, 93, 0.4); }
.kit-cats button.on { border-color: var(--accent-bd); background: var(--accent-soft); color: var(--accent-text); }

/* Panneau « Générer une icône / un logo » : cartes de style avec vignette d'exemple
   (même marque fictive déclinée dans chaque parti pris), pied fixe avec le coût. */
.picker .box.mk-genbox { width: min(680px, 100%); height: auto; max-height: 92dvh; flex-direction: column; }
.mk-genbox .mid { flex: 1 1 auto; }
.mk-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-style {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--quiet); cursor: pointer;
  font: inherit; color: var(--ink-soft); box-shadow: none; position: relative; transition: 150ms var(--ease-ui);
}
.mk-style:hover { border-color: var(--accent-bd); filter: none; }
.mk-style .vis { aspect-ratio: 16/10; background: var(--photo); border-bottom: 1px solid var(--line); }
.mk-styles.rect .mk-style .vis { aspect-ratio: 16/8; }
.mk-style .vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-style .tx { display: grid; gap: 2px; padding: 9px 11px 10px; }
.mk-style .tx strong { font-size: 13px; font-weight: 650; color: var(--ink); }
.mk-style .tx span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.mk-style.on { border-color: var(--accent-bd); background: var(--accent-soft); }
.mk-style.on::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--rose-fill); color: #fff; font-size: 12px; font-weight: 700;
}
.mk-gen-pied {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--sunken);
}
.mk-gen-pied .muted { font-size: 12px; }
@media (max-width: 560px) { .mk-styles { grid-template-columns: 1fr; } }

/* Étiquette style + note du juge sous chaque proposition. */
.mk-props .cell .meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px 0; font-size: 11.5px; color: var(--muted);
}
.mk-props .cell .meta .note {
  flex: none; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--accent-bd);
  color: var(--accent-text); font-weight: 650; font-size: 10.5px;
}

/* Audit d'image de marque (fiche du kit). */
.mk-audit { margin-bottom: 30px; }
.mk-audit .tete { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mk-audit h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.mk-audit .tete .mini {
  margin-left: auto; font-size: 12px; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--accent-bd); background: var(--accent-soft); color: var(--accent-text);
  box-shadow: none; background-image: none; cursor: pointer;
}
.mk-audit .tete .mini:hover { filter: none; box-shadow: none; border-color: var(--rose); }
.mk-audit .tete .mini:disabled { opacity: .6; cursor: default; }
.mk-audit .intro { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 74ch; }
.mk-audit .form { display: grid; gap: 8px; margin-bottom: 14px; }
.mk-audit .form input, .mk-audit .form textarea {
  font: inherit; font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 10px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line); outline: none; resize: vertical;
}
.mk-audit .form input:focus, .mk-audit .form textarea:focus { background: var(--field-focus); border-color: var(--accent-bd); }
.mk-audit .resultat:not(:empty) {
  background: var(--sunken); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px;
}
.mk-audit .quand { margin: 0 0 10px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ghost); }
.mk-audit .md h3 { margin: 18px 0 8px; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.mk-audit .md h3:first-child { margin-top: 0; }
.mk-audit .md p, .mk-audit .md li { font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.mk-audit .md p { margin: 0 0 9px; max-width: 74ch; }
.mk-audit .md ul, .mk-audit .md ol { margin: 0 0 10px; padding-left: 20px; }
.mk-audit .md li { margin-bottom: 6px; }
.mk-audit .md strong { color: var(--ink); font-weight: 650; }

/* ==================== Page Outils ==================== */
.opage { max-width: 1100px; margin: 0 auto; padding: 34px 24px 90px; }
.o-tete h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); }
.o-tete p { margin: 0 0 26px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.o-liste { display: grid; gap: 16px; }

/* La grille d'accueil des Outils (décision client 24/08) : 3-4 tuiles par
   rangée, on clique une tuile pour arriver sur la page de l'outil. */
/* Outil Upscale (page Outils). */
.o-depot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border: 1.5px dashed var(--line-strong); border-radius: 14px; cursor: pointer; text-align: center; margin: 14px 0 12px; }
.o-depot:hover, .o-depot.survole { border-color: var(--a-400); background: var(--quiet); }
.o-depot .gros { font-weight: 700; }
.o-depot .sous { font-size: 11.5px; color: var(--muted); }
.o-apercu { max-width: 100%; max-height: 380px; border-radius: 12px; border: 1px solid var(--line); display: block; margin: 10px 0; }
.o-facteurs { display: flex; gap: 8px; margin: 10px 0; }
.o-facteurs button { padding: 7px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--quiet); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; box-shadow: none; }
.o-facteurs button.on { border-color: var(--a-400); color: var(--ink); background: var(--panel); }
.o-etat { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.o-resultat { margin-top: 14px; }
.o-dl { display: inline-block; margin-top: 8px; font-weight: 700; }
.o-erreur { color: #e5484d; font-size: 13px; }

.o-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.o-tuile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 18px 18px; border-radius: 18px; text-align: left;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  box-shadow: var(--sh-card); color: inherit; text-decoration: none;
  font: inherit; cursor: pointer; transition: 150ms var(--ease-ui);
}
.o-tuile:hover { border-color: var(--line-strong); transform: translateY(-2px); filter: none; }
.o-tuile .ic {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--quiet); border: 1px solid var(--line); color: var(--rose-text);
}
.o-tuile .ic svg { width: 19px; height: 19px; }
.o-tuile strong { font-size: 15px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.o-tuile p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.o-tuile .fleche {
  position: absolute; top: 18px; right: 16px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--quiet); border: 1px solid var(--line); color: var(--muted);
  opacity: 0; transform: translateX(-4px); transition: 150ms var(--ease-ui);
}
.o-tuile .fleche svg { width: 13px; height: 13px; }
.o-tuile:hover .fleche { opacity: 1; transform: none; }
.o-tuile.bientot { opacity: .55; cursor: default; }
.o-tuile.bientot:hover { border-color: var(--line); transform: none; }
.o-tuile .badge {
  position: absolute; top: 18px; right: 16px; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: var(--quiet);
}

/* Vue d'un outil : largeur de lecture + lien de retour. */
.o-detail { max-width: 860px; }
.o-retour { display: inline-block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.o-retour:hover { color: var(--ink); }
.o-carte {
  position: relative; background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px;
}
.o-carte h2 { margin: 0 0 5px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.o-carte .sous { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.o-carte.bientot { opacity: .62; }
.o-carte .badge {
  position: absolute; top: 18px; right: 20px; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px 9px;
}
.o-form { display: grid; gap: 12px; }
.o-champ { display: grid; gap: 5px; }
.o-champ > span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.o-champ input, .o-champ textarea, .o-champ select {
  font: inherit; font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 10px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line); outline: none; resize: vertical;
}
.o-champ input:focus, .o-champ textarea:focus, .o-champ select:focus { background: var(--field-focus); border-color: var(--accent-bd); }
.o-rang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.o-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.o-notes .note {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px;
  background: var(--field); border: 1px solid var(--line);
}
.o-notes .note > span { font-size: 12px; color: var(--rose-text); letter-spacing: -1px; }
.o-notes .note input { width: 52px; font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 7px; background: var(--sunken); color: var(--ink); border: 1px solid var(--line); outline: none; }
.o-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.o-actions button { font-size: 13px; padding: 10px 18px; }
.o-resultat { display: grid; gap: 10px; margin-top: 18px; }
.o-resultat .compte { margin: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ghost); }
.o-resultat .avis { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.o-resultat .avis .tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.o-resultat .avis .etoiles { color: var(--rose-text); font-size: 12.5px; letter-spacing: -1px; }
.o-resultat .avis strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.o-resultat .avis p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.o-resultat .avis .meta { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.o-garde { margin: 16px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ghost); border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 700px) { .opage { padding: 20px 14px 70px; } .o-rang { grid-template-columns: 1fr; } }

/* Site de la marque et extraction de ses infos (fiche du kit). */
.mk-site { margin-bottom: 26px; }
.mk-site .tete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.mk-site h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.mk-site .tete input {
  flex: 1; min-width: 220px; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line); outline: none;
}
.mk-site .tete input:focus { background: var(--field-focus); border-color: var(--accent-bd); }
.mk-site .tete .mini {
  flex: none; font-size: 12px; padding: 9px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--accent-bd); background: var(--accent-soft); color: var(--accent-text);
  box-shadow: none; background-image: none;
}
.mk-site .tete .mini:hover { border-color: var(--rose); filter: none; box-shadow: none; }
.mk-site .tete .mini:disabled { opacity: .6; cursor: default; }
.mk-site .intro { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 74ch; }
.mk-extraction { border: 1px solid var(--line); border-radius: 13px; background: var(--sunken); overflow: hidden; }
.mk-extraction summary {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.mk-extraction summary::-webkit-details-marker { display: none; }
.mk-extraction summary .quand { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--ghost); }
.mk-extraction[open] summary { border-bottom: 1px solid var(--line); }
.mk-extraction .corps { padding: 14px; display: grid; gap: 8px; }
.mk-extraction .corps p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); max-width: 74ch; }
.mk-extraction .corps .pages { font-size: 11px; color: var(--ghost); word-break: break-all; }
.mk-extraction .paire { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.mk-extraction .paire .k { flex: none; width: 130px; color: var(--muted); font-weight: 600; }
.mk-extraction .paire .v { color: var(--ink-soft); line-height: 1.55; }
.mk-extraction .paire .sw { display: flex; gap: 4px; }
.mk-extraction .paire .sw span { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14); }
.mk-extraction h4 { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-extraction ul { margin: 0; padding-left: 18px; }
.mk-extraction li { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 4px; }
.mk-extraction .mini {
  justify-self: start; margin-top: 8px; font-size: 12px; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--quiet); color: var(--ink-soft); box-shadow: none; background-image: none; cursor: pointer;
}
.mk-extraction .mini:hover { border-color: var(--accent-bd); color: var(--ink); filter: none; box-shadow: none; }

/* Assets rattachés à un kit de marque. */
.mk-assets { margin-bottom: 26px; }
.mk-assets h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.mk-assets .intro { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 74ch; }
.mk-assets .groupe { margin-bottom: 14px; }
.mk-assets h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-assets .vide { margin: 0; font-size: 12.5px; color: var(--ghost); }
.mk-assets .vues { display: flex; flex-wrap: wrap; gap: 9px; }
.mk-assets .cell {
  display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--quiet); border: 1px solid var(--line); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: none; background-image: none;
}
.mk-assets .cell:hover { border-color: var(--line-strong); color: var(--ink); filter: none; box-shadow: none; }
.mk-assets .cell.on { border-color: var(--accent-bd); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.mk-assets .cell img, .mk-assets .cell .ini {
  width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--photo); border: 1px solid var(--line); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--muted);
}

/* Fiche produit : conditionnement, dimensions, marque rattachée. */
.prod-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; width: 100%; }
.pf-champ { display: grid; gap: 4px; }
.pf-champ .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-champ input, .pf-champ select {
  font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 9px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line); outline: none;
}
.pf-champ input:focus, .pf-champ select:focus { background: var(--field-focus); border-color: var(--accent-bd); }
.pf-champ .aide { font-size: 11px; line-height: 1.45; color: var(--ghost); }
.prod-marques { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; width: 100%; }
.prod-marques .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prod-marques .vide { font-size: 12.5px; color: var(--ghost); }
.prod-marques .chip-marque {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; text-decoration: none;
  color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-bd);
}
.prod-marques .chip-marque:hover { text-decoration: none; border-color: var(--rose); }

/* ==================== Page Mannequins ==================== */
.mqpage { max-width: 1100px; margin: 0 auto; padding: 34px 24px 90px; }
.mq-tete { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.mq-tete h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); }
.mq-tete p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 64ch; }
.mq-tete button { flex: none; margin-left: auto; font-size: 13px; padding: 10px 18px; }
.mq-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mq-vide { font-size: 13.5px; color: var(--muted); max-width: 60ch; }
.mq-carte {
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line);
  border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;
}
.mq-carte .vues { display: flex; gap: 2px; background: var(--photo); }
.mq-carte .vues img { flex: 1; min-width: 0; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.mq-carte .bas { padding: 12px 14px; display: flex; align-items: flex-end; gap: 10px; }
.mq-carte .tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mq-carte .tx strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.mq-carte .tx code { font-size: 11px; color: var(--accent-text); }
.mq-carte .tx .meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-carte .actes { display: flex; gap: 6px; flex: none; }
.mq-carte .mini {
  font-size: 11.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--ink-soft); box-shadow: none; background-image: none; cursor: pointer;
}
.mq-carte .mini:hover { border-color: var(--line-strong); color: var(--ink); filter: none; box-shadow: none; }
.mq-carte .mini.danger:hover { color: #ef5d5d; border-color: rgba(239, 93, 93, 0.4); }
@media (max-width: 700px) { .mqpage { padding: 20px 14px 70px; } .mq-tete button { margin-left: 0; } }

/* Annotations d'une infographie, tirées du kit de vente du produit. */
.genbar .s-callouts { display: grid; gap: 8px; padding: 4px 2px 8px; }
.genbar .s-callouts .tete { display: flex; align-items: center; gap: 10px; }
.genbar .s-callouts .lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.genbar .s-callouts .mini {
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent-bd); background: var(--accent-soft); color: var(--accent-text);
  box-shadow: none; background-image: none;
}
.genbar .s-callouts .mini:hover { border-color: var(--rose); filter: none; box-shadow: none; }
.genbar .s-callouts .mini:disabled { opacity: .6; cursor: default; }
.genbar .s-callouts .vide { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ghost); }
.genbar .s-callouts .famille { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.genbar .s-callouts .famille .k { font-size: 10.5px; color: var(--ghost); width: 118px; flex: none; }
.genbar .s-callouts .puce {
  font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-soft);
  box-shadow: none; background-image: none;
}
.genbar .s-callouts .puce:hover { border-color: var(--accent-bd); color: var(--ink); filter: none; box-shadow: none; }
.genbar .s-callouts .puce.on { border-style: solid; border-color: var(--accent-bd); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.genbar .s-callouts .retenus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.genbar .s-callouts .retenus .k { font-size: 10.5px; color: var(--ghost); width: 118px; flex: none; }
.genbar .s-callouts .retenus input {
  font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px; width: 18ch;
  background: var(--field); color: var(--ink); border: 1px solid var(--accent-bd); outline: none;
}

/* Déclinaisons d'icônes d'un logo. */
.mk-icones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-icones .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ghost); }
.mk-icones .mini { font-size: 11px; padding: 5px 9px; text-decoration: none; }
.mk-icones .mini:hover { text-decoration: none; }
.o-carte .o-lien {
  display: inline-block; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 9px;
  text-decoration: none; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-bd);
}
.o-carte .o-lien:hover { text-decoration: none; border-color: var(--rose); }

/* ==================== Page Carrousels ==================== */
.cpage { max-width: 1180px; margin: 0 auto; padding: 34px 24px 90px; }
.c-tete { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.c-tete h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); }
.c-tete p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.c-tete p code { background: var(--field); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.c-tete > button { flex: none; margin-left: auto; font-size: 13px; padding: 10px 18px; }
.c-vide { font-size: 13.5px; color: var(--muted); }
.c-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.c-carte {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; text-align: left;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line); border-radius: 15px;
  font: inherit; color: var(--ink); cursor: pointer; box-shadow: none; background-image: none;
}
.c-carte:hover { border-color: var(--line-strong); transform: translateY(-1px); filter: none; box-shadow: none; }
.c-carte .pile { display: flex; gap: 4px; }
.c-carte .pile img, .c-carte .pile .creux {
  flex: 1; min-width: 0; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px;
  background: var(--photo-crea); border: 1px solid var(--line); display: block;
}
.c-carte .pile .creux { border-style: dashed; }
.c-carte .tx { display: grid; gap: 2px; }
.c-carte .tx strong { font-size: 14px; font-weight: 700; }
.c-carte .tx .meta { font-size: 11.5px; color: var(--muted); }

.c-retour { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 16px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.c-retour:hover { color: var(--ink); filter: none; }
.c-fiche-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.c-fiche-tete h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); cursor: pointer; }
.c-fiche-tete select {
  font: inherit; font-size: 12.5px; padding: 7px 11px; border-radius: 9px;
  background: var(--field); color: var(--muted); border: 1px solid var(--line); opacity: .8;
}
.c-fiche-tete .actes { margin-left: auto; display: flex; gap: 8px; }
.c-fiche-tete .mini, .c-slide .mini {
  font-size: 12px; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--ink-soft); box-shadow: none; background-image: none;
  cursor: pointer; text-decoration: none;
}
.c-fiche-tete .mini:hover, .c-slide .mini:hover { border-color: var(--line-strong); color: var(--ink); filter: none; box-shadow: none; text-decoration: none; }
.c-fiche-tete .mini.danger:hover { color: #ef5d5d; border-color: rgba(239, 93, 93, 0.4); }

.c-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.c-slide {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--surface-grad), var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.c-slide.vide { border-style: dashed; }
.c-slide .num {
  position: absolute; top: 8px; left: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: rgba(0,0,0,.6); color: #fff;
}
.c-slide .vue {
  aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--photo-crea);
  border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center;
}
.c-slide .vue img { width: 100%; height: 100%; object-fit: contain; display: block; }
.c-slide .vue .creux { font-size: 12px; color: var(--ghost); }
.c-slide textarea {
  font: inherit; font-size: 12px; line-height: 1.5; padding: 7px 9px; border-radius: 8px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line); outline: none; resize: vertical;
}
.c-slide textarea:focus { background: var(--field-focus); border-color: var(--accent-bd); }
.c-slide .barre { display: flex; gap: 5px; }
.c-slide .barre .mini { flex: 1; padding: 6px 4px; font-size: 11.5px; }
.c-slide.ajout {
  align-items: center; justify-content: center; gap: 4px; min-height: 200px; cursor: pointer;
  border-style: dashed; color: var(--muted); font: inherit; font-size: 12.5px; background-image: none; box-shadow: none;
}
.c-slide.ajout:hover { border-color: var(--accent-bd); color: var(--ink); filter: none; box-shadow: none; }
.c-slide.ajout .gros { font-size: 24px; line-height: 1; }
@media (max-width: 700px) { .cpage { padding: 20px 14px 70px; } .c-tete > button { margin-left: 0; } }

/* ==================== Bibliothèque d'exemples ==================== */
.expage { max-width: 1180px; margin: 0 auto; padding: 34px 24px 90px; }
.ex-tete h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); }
.ex-tete p { margin: 0 0 26px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.ex-vide { font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.ex-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.ex-carte { background: var(--surface-grad), var(--panel); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.ex-carte img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: var(--photo-crea); border-bottom: 1px solid var(--line); }
.ex-morte { padding: 40px 14px; text-align: center; font-size: 12px; color: var(--ghost); background: var(--sunken); }
.ex-carte .corps { padding: 12px 14px 14px; display: grid; gap: 8px; }
.ex-carte .corps strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.ex-carte .meta { font-size: 11px; color: var(--muted); }
.ex-carte .prompt {
  margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); white-space: pre-wrap;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  max-height: 150px; overflow-y: auto;
}
.ex-carte .notes { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.ex-carte .actes { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-carte .mini {
  font-size: 11.5px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--quiet); color: var(--ink-soft); box-shadow: none; background-image: none;
  cursor: pointer; text-decoration: none;
}
.ex-carte .mini:hover { border-color: var(--line-strong); color: var(--ink); filter: none; box-shadow: none; text-decoration: none; }
.ex-carte .mini.fort { border-color: var(--accent-bd); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.ex-carte .mini.danger:hover { color: #ef5d5d; border-color: rgba(239, 93, 93, 0.4); }
@media (max-width: 700px) { .expage { padding: 20px 14px 70px; } }

/* Recoloration d'un logo. */
.reco-liste { display: grid; gap: 10px; }
.reco-liste .ligne { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.reco-liste .pastille { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-strong); display: inline-block; flex: none; }
.reco-liste code { font-size: 11px; color: var(--muted); }
.reco-liste .fleche { color: var(--ghost); }
.reco-liste .choix { display: flex; gap: 5px; flex-wrap: wrap; }
.reco-liste .opt {
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--quiet);
  color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; box-shadow: none; background-image: none;
  display: inline-flex; align-items: center;
}
.reco-liste .opt:hover { border-color: var(--line-strong); filter: none; box-shadow: none; }
.reco-liste .opt.on { border-color: var(--accent-bd); background: var(--accent-soft); color: var(--accent-text); }
.mk-export {
  flex: none; font-size: 12px; padding: 8px 13px; border-radius: 9px; text-decoration: none;
  border: 1px solid var(--line); background: var(--quiet); color: var(--ink-soft); align-self: flex-start;
}
.mk-export:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }

/* ---- Voile « Se connecter » sur les pages d'assets (décision client 2026-08-21) ----
   La page s'affiche mais devient illisible, et une invitation la recouvre. Les
   données ne sont jamais chargées : les API refusent sans jeton. */
.verrou-flou { filter: blur(7px); pointer-events: none; user-select: none; }
.verrou-voile {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.verrou-carte {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 28px; max-width: 400px; width: 100%; text-align: center; box-shadow: var(--shadow);
}
.verrou-carte h3 { margin: 0 0 8px; font-size: 19px; }
.verrou-carte p { margin: 0 0 20px; }
.verrou-carte .btn { display: block; width: 100%; }
/* Le bouton secondaire ne doit pas porter le dégradé d'action : dans ce thème,
   `.btn` peint un fond de classe qui bat `.btn-ghost` — on le neutralise ici. */
.verrou-carte .secondaire {
  margin-top: 10px; background: transparent; background-image: none; box-shadow: none;
  color: var(--ink); border: 1px solid var(--line);
}
.verrou-carte .secondaire:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Curseur de recharge de crédits (décision client 2026-08-21) ----
   Ligne rose pâle, marqueur rose vif : le client fait glisser, les crédits et
   le prix suivent. De 100 à 1000 crédits, par pas de 50. */
.recharge { margin-top: 4px; }
.recharge-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.recharge-credits { font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
.recharge-credits span { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 5px; }
.recharge-prix { font-size: 20px; font-weight: 700; }
.recharge-prix span { font-size: 13px; font-weight: 500; color: var(--muted); }

.recharge input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; margin: 20px 0 6px;
  background: transparent; padding: 0; border: 0;
}
.recharge input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  /* rose pâle du logiciel — la portion parcourue est peinte par --parcouru */
  background: linear-gradient(to right, #ff3d8b var(--parcouru, 0%), #ffd6e6 var(--parcouru, 0%));
}
.recharge input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #ffd6e6; }
.recharge input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: #ff3d8b; }
.recharge input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #ff3d8b; border: 3px solid var(--panel); margin-top: -8px; cursor: grab;
  box-shadow: 0 1px 6px rgba(255, 61, 139, .5);
}
.recharge input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.recharge input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #ff3d8b;
  border: 3px solid var(--panel); cursor: grab; box-shadow: 0 1px 6px rgba(255, 61, 139, .5);
}
.recharge input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.recharge-bornes { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.recharge-detail { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

/* ---- Page Tarifs ---- */
.tarifs-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }

.plan {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px 30px;
  display: flex; flex-direction: column; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* DÉGRADÉ PAR PALIER (référence Higgsfield fournie par le client le 22/08).
   Le principe repris est le lavis : une nappe de couleur qui naît en haut à
   gauche de la carte et se dissout vers le bas, de plus en plus affirmée d'un
   palier au suivant. Les TEINTES, elles, restent celles de la maison — le
   dégradé du bouton Générer, corail → magenta → bleu — et non l'olive et le
   jaune de la référence, qui n'appartiennent pas à la palette.
   Le lavis vit sur un ::before : il passe sous le contenu sans toucher au fond
   de la carte, donc les encadrés intérieurs gardent leur propre matière. */
.plan { isolation: isolate; }
.plan::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: .9; transition: opacity .16s ease;
}
.plan:hover::before { opacity: 1; }
.plan[data-plan="essentiel"]::before {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.07), transparent 62%);
}
.plan[data-plan="studio"]::before {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(61,116,255,.20), transparent 64%),
    radial-gradient(90% 70% at 100% 0%, rgba(224,69,158,.10), transparent 62%);
}
.plan[data-plan="agence"]::before {
  background:
    radial-gradient(125% 100% at 0% 0%, rgba(224,69,158,.26), transparent 66%),
    radial-gradient(95% 75% at 100% 0%, rgba(255,74,48,.14), transparent 62%);
}
/* En thème clair la même nappe écraserait le texte : on la divise par trois. */
html.light .plan[data-plan="studio"]::before,
html.light .plan[data-plan="agence"]::before { opacity: .34; }
.plan.vedette { border-color: #ff3d8b; box-shadow: 0 0 0 1px #ff3d8b, var(--shadow); }
.plan .ruban {
  position: absolute; top: -12px; left: 26px;
  background: #ff3d8b; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}

/* Nom du plan en capitales, sous-titre court — modèle de référence client */
.plan .nom { font-size: 26px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; line-height: 1; }
.plan .accroche { color: var(--muted); font-size: 13.5px; margin: 7px 0 20px; }

/* Encadré des crédits : le cœur de la carte */
.plan .bloc-credits {
  background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 15px 13px; margin-bottom: 20px;
}
/* Taille réduite (~30 %) : le prix reste l'information dominante de la carte. */
.plan .credits-titre { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.plan .credits-titre .etoile { color: #ff3d8b; font-size: 11px; }
.plan .equiv { color: var(--muted); font-size: 11.5px; margin: 5px 0 0 19px; }
.plan .equiv b { color: var(--ink); font-weight: 600; }
/* Hauteur FIXE : c'est cette ligne, identique sur les trois cartes, qui met les
   boutons au même niveau. Plan fixe = un texte, plan à paliers = le curseur. */
.plan .garanti {
  display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line); font-size: 11px; color: var(--muted);
  min-height: 46px;
}
.plan .garanti.garanti-curseur { flex-direction: column; align-items: stretch; gap: 7px; }
.plan .garanti .coche { color: var(--accent); font-weight: 700; }

/* Le prix ne doit jamais se couper : « 199 € » passait à la ligne sur la carte
   Agence, la mention de facturation prenant toute la place restante. */
.plan .prix { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; flex-wrap: nowrap; }
.plan .prix strong { white-space: nowrap; flex: none; }
/* Mention de facturation EN LIGNE à côté du prix (demande client). Le prix a été
   réduit de 20 % pour qu'ils tiennent ensemble sur une seule ligne. */
/* Hauteur fixe : le prix barré des paliers supérieurs décalait la carte Agence
   de quelques pixels, et les boutons ne s'alignaient plus tout à fait. */
.plan .prix { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.plan .prix span { line-height: 1.25; font-size: 12px; }
.plan .prix strong { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.plan .prix span { color: var(--muted); font-size: 13px; }

.plan .cta { width: 100%; padding: 14px; font-size: 15px; font-weight: 700; border-radius: 11px; }
.plan .actuel {
  width: 100%; text-align: center; padding: 14px; border: 1px dashed var(--line);
  border-radius: 11px; color: var(--muted); font-size: 14px; font-weight: 600;
}

/* Bénéfices sous le bouton */
.plan .inclus-titre {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 24px 0 12px;
}
.plan ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.plan ul li { padding: 6px 0 6px 24px; position: relative; line-height: 1.45; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--accent); font-weight: 700; }
.plan ul li.fort { font-weight: 600; }
.plan ul li.fort::before { color: #ff3d8b; }

.tarifs-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 30px; max-width: 760px; }

/* ---- Encart d'abonnement dans la barre latérale (état dynamique) ---- */
.side-plan[hidden] { display: none; }
.side-plan {
  margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 12px;
  border: 1px solid var(--line); background: var(--field); display: block; color: inherit;
}
.side-plan:hover { text-decoration: none; border-color: #ff3d8b; }
.side-plan strong { display: block; font-size: 12.5px; margin-bottom: 2px; }
.side-plan span { color: var(--muted); }
.side-plan.alerte { border-color: #ff3d8b; background: color-mix(in srgb, #ff3d8b 10%, var(--field)); }
.side-plan.alerte strong { color: #ff3d8b; }
.side-plan.degrade { background: var(--rose-fill, var(--accent-fill)); border: 0; box-shadow: var(--sh-accent); padding: 16px 14px; }
/* Posée juste avant le pied : un peu d'air avant le trait. */
.nova-header > .side-plan.degrade { margin-bottom: 10px; }
.side-plan.degrade strong { color: #fff; }
.side-plan.degrade span { color: rgba(255,255,255,.82); }
.side-plan.degrade:hover { text-decoration: none; filter: brightness(1.07); }
html.side-min .side-plan { display: none; }
/* Barre du haut : l encart de formule est fait pour une colonne, il sort de la
   rangee (les formules restent a un clic depuis la carte du compte). */
@media (max-width: 880px) { .side-plan { display: none; } }

/* Ligne « Tout le plan précédent » : elle renvoie, elle n'énumère pas. */
.plan ul li.reprise { font-weight: 600; color: var(--ink); }
.plan ul li.reprise::before { content: "↳"; color: var(--accent); font-weight: 700; }

/* ---- Carte Agence à paliers : curseur de crédits (modèle Higgsfield) ---- */

.plan .garanti input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; background: transparent;
  padding: 0; border: 0; margin: 0 0 12px;
}
.plan .garanti input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #fff var(--parcouru, 0%), color-mix(in srgb, var(--ink) 22%, transparent) var(--parcouru, 0%));
}
.plan .garanti input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.plan .garanti input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: #fff; }
.plan .garanti input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; margin-top: -8px; cursor: grab; box-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.plan .garanti input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; cursor: grab;
}
.plan .paliers-etiquettes { display: flex; justify-content: space-between; gap: 6px; }
.plan .palier-etq {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer;
}
.plan .palier-etq .jeton { opacity: .5; font-size: 10px; }
.plan .palier-etq.on { color: var(--ink); }
.plan .palier-etq.on .jeton { opacity: 1; color: #ff3d8b; }

.plan .prix .barre { color: var(--muted); text-decoration: line-through; font-size: 20px; font-weight: 700; margin-right: 4px; }


/* Ligne mise en avant : l'argument central d'un plan, encadré pour qu'il ne se
   perde pas dans la liste (demande client — « Générations illimitées »). */
.plan ul li.encadre {
  border: 1px solid #ff3d8b; border-radius: 9px;
  background: color-mix(in srgb, #ff3d8b 9%, transparent);
  padding: 9px 12px 9px 30px; margin: 4px 0 8px; font-weight: 700; color: var(--ink);
}
.plan ul li.encadre::before { content: "✦"; left: 11px; top: 9px; color: #ff3d8b; }

/* ---- Creativity Lab : onglets et recettes ---- */
.lab-carte { position: relative; }
/* Le prompt d'une recette, dans le panneau sombre du viewer : mêmes codes que
   le reste du viewer (fond sombre, texte clair) — pas les jetons de la page
   claire, qui rendaient la boîte illisible sur ce fond. */
.viewer aside .vprompt-texte {
  white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; padding: 12px 13px; margin: 0; max-height: 300px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #d8d5cd;
}
/* Les emplacements produit [[@PRODUIT]] doivent sauter aux yeux : c'est
   la seule chose que le client a à remplacer. */
.viewer aside .vprompt-texte mark {
  background: rgba(255, 61, 139, .22); color: #ff87b7; border-radius: 4px;
  padding: 1px 4px; font-weight: 700; font-style: normal;
}
.viewer aside .vprompt-aide { font-size: 11.5px; color: #8b8b95; line-height: 1.5; margin: 0; }

/* ==================== Boutons de fermeture « × » ====================
   Le × est un GLYPHE : sans centrage explicite il flotte en haut du rond
   (baseline + line-height héritée) — constaté par le client sur les fenêtres
   flottantes (24/08). Règle UNIQUE pour tous les boutons de fermeture et de
   retrait du site : centrage flex, aucune ligne héritée, aucun padding qui
   décale l'ink. Toute nouvelle croix doit porter une de ces classes. */
button.x, span.x, button.close, .viewer .close, .ref-card .rm, button.rm,
.r-sup, .s-fichiers .fichier .x, .folder-chip .x, .selbar .x, .picker .x,
.tploverlay .x, .prod-conv .x, .lex-apercu .x, .mk-refcat .cell .x {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; text-align: center;
}

/* ==================== Lab : carrousels (décision client 2026-08-24) ==== */
/* Bouton d'ajout : la maison seulement (le catalogue reste géré par Nova). */
.lab-ajout-carrousel { display: none; }
html.maison .lab-ajout-carrousel { display: inline-flex; }
/* Ceinture : jamais de crayon d'édition du Lab hors compte maison. */
html:not(.maison) .lab-crayon { display: none !important; }
/* Pastille « pile » sur la carte : ce visuel est un carrousel de N diapositives. */
.lab-carte .pile {
  position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px; background: rgba(10, 10, 8, 0.62); color: #fff;
  font-size: 11px; font-weight: 700; backdrop-filter: blur(3px); pointer-events: none;
}
.lab-carte .pile svg { width: 12px; height: 12px; }
/* Compteur de diapositives du viewer (1/N). */
.viewer .vcompteur {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; background: rgba(10, 10, 8, 0.62); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(3px);
}

/* Nom du template en surimpression quand la carte a sa COVER générée (24/08) :
   pilule sombre en haut à gauche, lisible sur toute image. */
.tpl-card .tpl-nom {
  position: absolute; top: 9px; left: 9px; max-width: calc(100% - 18px);
  padding: 5px 10px; border-radius: 999px; background: rgba(10, 10, 8, 0.6);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.01em;
  backdrop-filter: blur(3px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Carte compte : UNE SEULE surface de survol (client 26/08). ----------
   La ligne du profil est un <button> : les règles génériques de bouton — le
   halo box-shadow au survol (l.492) et le halo ROSE du bloc de repeint de fin
   de feuille (l.2588), plus le translateY à l'appui — redessinaient une forme
   intérieure au survol : l'« encadré dans l'encadré ». Ce bloc, posé en
   TOUTE FIN de feuille avec !important, interdit à quoi que ce soit de
   peindre à l'intérieur de la carte : l'encadré est un seul et même bouton,
   du bord extrême au centre. Seul le bouton de thème, superposé au-dessus,
   garde son propre survol (sans halo). */
.account-card .account-row,
.account-card .account-row:hover,
.account-card .account-row:active,
.account-card .account-row:focus {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.account-card .acc-tools { background: transparent !important; }
.account-card .acc-tool, .account-card .acc-tool:hover, .account-card .acc-tool:active {
  box-shadow: none !important;
  transform: none !important;
}