/* ==========================================================================
   BOOTH AI STUDIO — app.css : espace organisateur et admin
   
   Architecture et règles : docs/CSS-ARCHITECTURE.md (i278).
   Chaque section ci-dessous est « portée » : ses sélecteurs commencent par
   :where(.css-<paquet>-<nom>) et ne s'appliquent que sur les pages qui
   appellent css_use('<paquet>/<nom>'). Spécificité inchangée (:where = 0).
   
   Sections :
     app/base                           ← ancien lux-admin.css
     app/topbar                         ← ancien saas-topbar.css
     app/world-sheets                   ← ancien parts/World/sheets_view.css
     app/operator-ia-solde              ← ancien pages/operator/_ia-solde.css
     app/admin-abonnements              ← ancien pages/admin/abonnements.css
     app/admin-avis                     ← ancien pages/admin/avis.css
     app/admin-categories-2             ← ancien pages/admin/categories-2.css
     app/admin-codes                    ← ancien pages/admin/codes.css
     app/admin-comptabilite             ← ancien pages/admin/comptabilite.css
     app/admin-decor-packs              ← ancien pages/admin/decor-packs.css
     app/admin-evenements               ← ancien pages/admin/evenements.css
     app/admin-frame-blanks             ← ancien pages/admin/frame-blanks.css
     app/admin-frame-creator            ← ancien pages/admin/frame-creator.css
     app/admin-frame-creator-2          ← ancien pages/admin/frame-creator-2.css
     app/admin-invitations              ← ancien pages/admin/invitations.css
     app/admin-licences                 ← ancien pages/admin/licences.css
     app/admin-pipeline                 ← ancien pages/admin/pipeline.css
     app/admin-revenus                  ← ancien pages/admin/revenus.css
     app/admin-serie-edit               ← ancien pages/admin/serie-edit.css
     app/admin-site-images              ← ancien pages/admin/site-images.css
     app/admin-styleguide               ← ancien pages/admin/styleguide.css
     app/admin-theme-creator            ← ancien pages/admin/theme-creator.css
     app/admin-theme-creator-cadres     ← ancien pages/admin/theme-creator-cadres.css
     app/admin-theme-world              ← ancien pages/admin/theme-world.css
     app/admin-themes-accueil           ← ancien pages/admin/themes-accueil.css
     app/admin-user                     ← ancien pages/admin/user.css
     app/admin-user-collections         ← ancien pages/admin/user-collections.css
     app/admin-users                    ← ancien pages/admin/users.css
     app/admin-worlds                   ← ancien pages/admin/worlds.css
     app/event-cabine                   ← ancien pages/operator/event/cabine.css
     app/event-decor-formats            ← ancien pages/operator/event/decor-formats.css
     app/event-enfants                  ← ancien pages/operator/event/enfants.css
     app/event-galerie-2                ← ancien pages/operator/event/galerie-2.css
     app/operator-ai-credits            ← ancien pages/operator/ai-credits.css
     app/operator-ai-reference-edit     ← ancien pages/operator/ai-reference-edit.css
     app/operator-ai-references         ← ancien pages/operator/ai-references.css
     app/operator-brand                 ← ancien pages/operator/brand.css
     app/operator-brand-messages        ← ancien pages/operator/brand-messages.css
     app/operator-catalogue             ← ancien pages/operator/catalogue.css
     app/operator-collection            ← ancien pages/operator/collection.css
     app/operator-collection-create     ← ancien pages/operator/collection-create.css
     app/operator-dashboard             ← ancien pages/operator/dashboard.css
     app/admin-admin-dash               ← ancien pages/admin/admin-dash.css
     app/operator-event                 ← ancien pages/operator/event.css
     app/event-decor                    ← ancien pages/operator/event/decor.css
     app/event-decor-2                  ← ancien pages/operator/event/decor-2.css
     app/event-ai-overlay               ← ancien pages/operator/event/ai-overlay.css
     app/event-galerie                  ← ancien pages/operator/event/galerie.css
     app/event-galerie-3                ← ancien pages/operator/event/galerie-3.css
     app/event-invites                  ← ancien pages/operator/event/invites.css
     app/event-textes                   ← ancien pages/operator/event/textes.css
     app/operator-event-text            ← ancien pages/operator/event-text.css
     app/operator-events                ← ancien pages/operator/events.css
     app/operator-factures              ← ancien pages/operator/factures.css
     app/operator-index                 ← ancien pages/operator/index.css
     app/operator-my-tools              ← ancien pages/operator/my-tools.css
     app/operator-photos                ← ancien pages/operator/photos.css
     app/operator-pro                   ← ancien pages/operator/pro.css
     app/operator-redeem                ← ancien pages/operator/redeem.css
     app/operator-templates             ← ancien pages/operator/templates.css
     app/operator-templates-2           ← ancien pages/operator/templates-2.css
     app/operator-unlock-plan           ← ancien pages/operator/unlock-plan.css
     app/operator-world                 ← ancien pages/operator/world.css
     app/operator-assigner              ← ancien pages/operator/_assigner.css
     app/calques                        ← ancien parts/calques.css
     app/operator-new-event-modal       ← ancien pages/operator/_new-event-modal.css
     app/operator-pro-tableau           ← ancien pages/operator/_pro-tableau.css
     app/operator-formules              ← ancien pages/operator/formules.css
     app/event-prochaine-etape          ← ancien pages/operator/event/_prochaine-etape.css
     app/event-kids-cta                 ← ancien pages/operator/event/kids-cta.css
     app/event-intro                    ← ancien pages/operator/event/_intro.css
     app/event-intro-2                  ← ancien pages/operator/event/_intro-2.css
   ========================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/base
   Ancien fichier : lux-admin.css
   Activée par css_use('app/base') dans : operator/_head.php, operator/forgot.php, operator/login.php, operator/password.php, operator/register.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ============================================================
   BOOTH AI STUDIO — Peau « admin luxe »
   Habille les composants Bootstrap (cartes, formulaires, tables)
   aux couleurs du site : noir profond · ivoire · or champagne.
   À charger APRÈS bootstrap.min.css et lux.css.

   REFONTE 09/2026 — mêmes classes, meilleurs visuels :
   des angles arrondis, des boutons qu'on attrape au doigt (52 px),
   des cartes qui se soulèvent, une navigation en pastille dorée.
   Aucun nom de classe n'a disparu : les pages existantes en profitent
   sans être retouchées.
   ============================================================ */

/* ── Jetons de la refonte ────────────────────────────────────
   Le thème avait la couleur et la typographie ; il lui manquait
   un rayon, une ombre et une hauteur de doigt. Les voici, nommés
   une fois pour toutes — on ne devine plus « 8 px ou 12 px ? ». */
:root:where(.css-app-base) {
  /* Espaces connectés : choix de jetons de tokens.css (aucune valeur ici — i268) */
  --r-xs: var(--radius-xs);      /* pastilles, badges          */
  --r-sm: var(--radius-sm);      /* champs, petits boutons     */
  --r:    var(--radius-md);      /* boutons, vignettes         */
  --r-lg: var(--radius-lg);      /* cartes                     */
  --r-xl: var(--radius-2xl);     /* grandes cartes, aperçus    */
  --pill: var(--radius-pill);    /* chips, filtres, statuts    */

  --tap:    var(--tap-size);     /* hauteur minimale « au doigt » */
  --tap-sm: var(--tap-size-sm);

  --surf:   var(--surface-1);    /* carte           */
  --surf-2: var(--surface-2);    /* carte survolée  */
  --surf-3: var(--surface-3);    /* champ, creux    */

  --sh-1: var(--shadow-1);
  --sh-2: var(--shadow-2);
  --sh-3: var(--shadow-3);
  --sh-or: var(--shadow-gold);

  --vite: var(--ease-fast);
  --lent: var(--ease-slow);
}

:where(.css-app-base) body { background: var(--noir) !important; color: var(--ivoire) !important;
  font-family: var(--sans); font-weight: 300; }

/* ============================================================
   LAYOUT SAAS — sidebar fixe + contenu (mobile : topbar + burger)
   ============================================================ */
:root:where(.css-app-base) { --side-w: 258px; --top-h: 60px; }

:where(.css-app-base) .saas-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); z-index: 120;
  background: linear-gradient(180deg, #100e0a, #0b0a08);
  border-right: 1px solid var(--hair-soft);
  display: flex; flex-direction: column; padding: 22px 14px 16px;
  transition: transform var(--lent);
  overflow: hidden;
}
:where(.css-app-base) .saas-brand { display: flex; align-items: center; padding: 2px 6px 14px;
  border-bottom: 1px solid var(--hair-soft); margin-bottom: 14px; flex-shrink: 0; }
/* Le logo de la marque (wordmark), à gauche en haut du menu */
:where(.css-app-base) .saas-brand .saas-logo { width: auto; height: 76px; max-width: 100%; flex-shrink: 0; display: block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }

/* Le menu défile SEUL entre le logo et le pied (langue, app, déconnexion) :
   sur un petit écran le pied ne recouvre plus les dernières entrées. */
:where(.css-app-base) .saas-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; }
/* « > a » : SEULES les entrées de premier niveau. Sans le chevron, le sous-menu
   des événements héritait de la pastille et ressemblait à une rubrique. */
:where(.css-app-base) .saas-nav > a {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 11px 14px; color: var(--ivoire-2);
  /* Casse normale, pas de CAPITALES espacees : « Mes references IA » en
     majuscules tracees a .18em se dechiffre lettre a lettre. Le menu se
     PARCOURT du coin de l'oeil — il doit se lire d'un bloc. */
  font-size: .92rem; letter-spacing: .005em; font-weight: 400;
  border-radius: var(--r); transition: background var(--vite), color var(--vite);
}
/* Intertitre de groupe : lui reste en petites capitales, c'est son role —
   il etiquette, il ne se clique pas. */
:where(.css-app-base) .saas-groupe { padding: 20px 14px 7px; font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(207,200,184,.5); font-weight: 500; }
:where(.css-app-base) .saas-groupe:first-child { padding-top: 8px; }
:where(.css-app-base) .saas-nav > a:hover { color: var(--ivoire); background: rgba(201,169,98,.07); }
/* L'onglet courant : une pastille dorée pleine largeur — on voit où l'on est
   d'un coup d'œil, sans chercher le liseré d'un pixel. */
:where(.css-app-base) .saas-nav > a.active {
  color: var(--or-clair); font-weight: 500;
  background: linear-gradient(100deg, rgba(212,175,55,.20), rgba(212,175,55,.07));
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.30);
}
/* Sous-menu (evenements recents) : decale, plus petit, plus sourd — il depend
   visiblement de « Evenements » au lieu de rivaliser avec les rubriques.
   Ces regles vivaient dans un <style> de _head.php : une seule source desormais. */
:where(.css-app-base) .saas-subnav { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; }
:where(.css-app-base) .saas-subnav a { display: block; padding: 8px 12px 8px 46px; border-radius: var(--r-sm);
  font-size: .84rem; color: var(--ivoire-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background var(--vite), color var(--vite); }
:where(.css-app-base) .saas-subnav a:hover { color: var(--ivoire); background: rgba(212,175,55,.06); }
:where(.css-app-base) .saas-subnav a.active { color: var(--or-clair); background: rgba(212,175,55,.09); }
/* Nom + date de la fête sur une ligne : le nom cède la place, la date jamais —
   c'est elle qui distingue deux « Anniversaire d'Alex » à six mois d'écart. */
:where(.css-app-base) .saas-subnav a { display: flex; align-items: baseline; gap: 8px; padding-right: 10px; }
:where(.css-app-base) .saas-subnav .sn-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.css-app-base) .saas-subnav .sn-date { margin-left: auto; flex: 0 0 auto; font-size: .72rem; opacity: .55;
  font-variant-numeric: tabular-nums; }
/* L'événement terminé qu'on est en train de regarder : présent, mais en retrait. */
:where(.css-app-base) .saas-subnav a.fini .sn-nom { opacity: .62; }
:where(.css-app-base) .saas-subnav a.sn-fin { font-size: .78rem; opacity: .5; }
:where(.css-app-base) .saas-subnav a.sn-fin:hover { opacity: .85; }
:where(.css-app-base) .saas-nav > a .ni,
:where(.css-app-base) .saas-nav > .saas-hub .ni {
  width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 1rem; color: var(--or); flex-shrink: 0;
}
:where(.css-app-base) .saas-nav > a .ni svg,
:where(.css-app-base) .saas-nav > .saas-hub .ni svg { width: 19px; height: 19px; display: block; }
:where(.css-app-base) .saas-nav > a.active .ni { color: var(--or-clair); }


/* ------------------------------------------------------------------
   MENU 1 — SYSTÈME : barre horizontale, en haut, toujours là.
   Elle a récupéré ce qui encombrait le bas de la barre latérale (langue,
   app, site, déconnexion). Le menu de gauche ne contient plus QUE des
   outils : il ne se fait plus voler ses dernières entrées par un pied fixe.
   ------------------------------------------------------------------ */
:where(.css-app-base) .saas-topbar {
  display: flex; position: fixed; top: 0; left: var(--side-w); right: 0; z-index: 110;
  align-items: center; gap: 14px; padding: 0 22px; height: var(--top-h);
  background: rgba(11,10,8,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair-soft);
}
:where(.css-app-base) .saas-burger { display: none; background: none; border: 1px solid var(--hair); color: var(--or);
  width: 44px; height: 44px; font-size: 1.15rem; border-radius: var(--r-sm); flex-shrink: 0; }
/* Le titre de la page, en filigrane : on sait où l'on est sans lever les yeux. */
:where(.css-app-base) .saas-top-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ivoire-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

:where(.css-app-base) .saas-sys { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
:where(.css-app-base) .saas-sys-a {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: var(--r-sm); color: var(--ivoire-2); font-size: .84rem; letter-spacing: .005em;
  transition: background var(--vite), color var(--vite); white-space: nowrap;
}
:where(.css-app-base) .saas-sys-a:hover { color: var(--ivoire); background: rgba(201,169,98,.09); }
:where(.css-app-base) .saas-sys .ni { display: grid; place-items: center; width: 20px; height: 20px; color: var(--or); flex-shrink: 0; }
:where(.css-app-base) .saas-sys .ni svg { width: 17px; height: 17px; display: block; }
:where(.css-app-base) .saas-sys-out { color: #d98c8c; }
:where(.css-app-base) .saas-sys-out:hover { color: #f0a8a8; background: rgba(217,140,140,.10); }
:where(.css-app-base) .saas-sys-out .ni { color: #d98c8c; }

:where(.css-app-base) .saas-sys-lang { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px;
  border-radius: var(--r-sm); color: var(--ivoire-2); }
:where(.css-app-base) .saas-sys-lang select { background: transparent; color: var(--ivoire-2); border: 1px solid var(--hair-soft);
  border-radius: var(--r-sm); padding: 5px 8px; font-size: .82rem; cursor: pointer; }
:where(.css-app-base) .saas-sys-lang select option { background: #14120e; color: var(--ivoire); }
:where(.css-app-base) .saas-veil { display: none; position: fixed; inset: 0; z-index: 115; background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px); }
:where(.css-app-base) .saas-veil.show { display: block; }

/* Pleine largeur : la grille des cartes et les tableaux prennent tout l'écran. */
:where(.css-app-base) body.saas .admin-main { width: auto; max-width: none; margin: 0;
  padding: calc(var(--top-h) + 34px) 40px 90px; margin-left: var(--side-w); }
:where(.css-app-base) body.saas .lux-footer { margin-left: var(--side-w); }

@media (max-width: 900px) {
  :where(.css-app-base) .saas-side { transform: translateX(-100%); box-shadow: var(--sh-3); }
  :where(.css-app-base) .saas-side.open { transform: none; }
  /* La barre reprend toute la largeur et retrouve son burger. */
  :where(.css-app-base) .saas-topbar { left: 0; padding: 0 12px; gap: 10px; }
  :where(.css-app-base) .saas-burger { display: grid; place-items: center; }
  /* Place comptée : on garde la langue et la sortie, on masque le confort. */
  :where(.css-app-base) .saas-sys-opt { display: none; }
  :where(.css-app-base) .saas-sys-lbl { display: none; }
  :where(.css-app-base) .saas-sys-a { padding: 0 9px; }
  :where(.css-app-base) .saas-top-title { font-size: .95rem; }
  /* Le globe est redondant quand la langue est écrite juste à côté. */
  :where(.css-app-base) .saas-sys-lang { padding: 0 4px; }
  :where(.css-app-base) .saas-sys-lang .ni { display: none; }
  :where(.css-app-base) .saas-sys-lang select { max-width: 92px; padding: 5px 6px; font-size: .78rem; }
  :where(.css-app-base) body.saas .admin-main { margin-left: 0; padding: calc(var(--top-h) + 22px) 16px 80px; }
  :where(.css-app-base) body.saas .lux-footer { margin-left: 0; }
}

/* ============================================================
   EN-TÊTE DE PAGE
   ============================================================ */
:where(.css-app-base) .page-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.12; margin-bottom: 10px; letter-spacing: -.005em; }
:where(.css-app-base) .page-title em { font-style: italic; color: var(--or); font-weight: 400; }
:where(.css-app-base) .page-sub { color: var(--ivoire-2); font-size: .92rem; margin-bottom: 38px; max-width: 62ch; }

/* Bandeau de tête : titre à gauche, action principale à droite.
   Optionnel — les pages qui ne l'utilisent pas gardent leur mise en page. */
:where(.css-app-base) .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; margin-bottom: 34px; }
:where(.css-app-base) .page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
:where(.css-app-base) .page-head .page-sub { margin-bottom: 0; }
:where(.css-app-base) .page-head .btn { flex: 0 0 auto; }

/* ============================================================
   KPI — chiffres clés
   ============================================================ */
:where(.css-app-base) .kpi-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  margin-bottom: 38px; }
:where(.css-app-base) .kpi { background: var(--surf); border: 1px solid var(--hair-soft); border-radius: var(--r-lg);
  padding: 22px 20px; position: relative; overflow: hidden;
  transition: border-color var(--vite), transform var(--vite), box-shadow var(--vite); }
:where(.css-app-base) .kpi::after { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px;
  background: linear-gradient(90deg, var(--or), transparent 78%); border-radius: 0 0 2px 2px; }
:where(.css-app-base) .kpi:hover { border-color: var(--hair); transform: translateY(-3px); box-shadow: var(--sh-2); }
:where(.css-app-base) .kpi b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.7rem;
  color: var(--or); line-height: 1.05;
  /* « lining » : sans cela, le 1 de Cormorant ressemble a un I romain — un
     chiffre cle ne doit jamais se lire de travers. */
  font-variant-numeric: lining-nums tabular-nums; }
:where(.css-app-base) .kpi span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivoire-2); }
/* Pastille d'icône teintée (facultative) : <i class="kpi-ico">◧</i> */
:where(.css-app-base) .kpi .kpi-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: var(--r-sm); background: rgba(212,175,55,.11);
  border: 1px solid rgba(212,175,55,.22); color: var(--or); font-size: 1.15rem; font-style: normal; }
:where(.css-app-base) .kpi .kpi-ico svg { width: 21px; height: 21px; }
/* Quand le KPI est un lien : une flèche discrète en haut à droite */
:where(.css-app-base) a.kpi { display: block; }
:where(.css-app-base) a.kpi::before { content: "→"; position: absolute; top: 18px; right: 18px; color: var(--or);
  opacity: .35; font-size: 1.05rem; transition: opacity var(--vite), transform var(--vite); }
:where(.css-app-base) a.kpi:hover::before { opacity: 1; transform: translateX(3px); }

/* ============================================================
   Sections & actions rapides
   ============================================================ */
:where(.css-app-base) .sec-row { display: flex; align-items: center; gap: 16px; margin: 44px 0 20px; }
:where(.css-app-base) .sec-row h2 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 0; }
:where(.css-app-base) .sec-row .line { flex: 1; height: 1px; background: var(--hair-soft); }

:where(.css-app-base) details.quick { border: 1px dashed var(--hair); border-radius: var(--r-lg); margin-bottom: 20px;
  background: rgba(212,175,55,.03); overflow: hidden; }
:where(.css-app-base) details.quick summary { list-style: none; cursor: pointer; padding: 18px 22px; min-height: var(--tap);
  color: var(--or); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; user-select: none;
  transition: background var(--vite); }
:where(.css-app-base) details.quick summary:hover { background: rgba(212,175,55,.06); }
:where(.css-app-base) details.quick summary::-webkit-details-marker { display: none; }
:where(.css-app-base) details.quick summary::before { content: "＋"; font-size: 1.2rem; line-height: 1; }
:where(.css-app-base) details.quick[open] summary::before { content: "−"; }
:where(.css-app-base) details.quick[open] summary { background: rgba(212,175,55,.06); }
:where(.css-app-base) details.quick .quick-body { padding: 6px 22px 22px; border-top: 1px solid var(--hair-soft); }

/* ============================================================
   Grille de l'atelier : cartes templates cliquables
   ============================================================ */
:where(.css-app-base) .tpl-card { display: block; cursor: pointer; }
:where(.css-app-base) .tpl-card .tpl-visual {
  display: block; position: relative; aspect-ratio: 2/3; overflow: hidden;
  background: var(--surf-3); border: 1px solid var(--hair-soft); border-radius: var(--r);
  transition: border-color var(--vite), transform var(--vite), box-shadow var(--vite);
}
:where(.css-app-base) .tpl-card .tpl-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
:where(.css-app-base) .tpl-card:hover .tpl-visual {
  border-color: var(--or); transform: translateY(-5px); box-shadow: var(--sh-2);
}
:where(.css-app-base) .tpl-edit {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  padding: 13px; background: rgba(212,175,55,.95); color: var(--noir);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  transform: translateY(100%); transition: transform var(--vite);
}
:where(.css-app-base) .tpl-card:hover .tpl-edit { transform: none; }
:where(.css-app-base) .tpl-card .fp-name { margin-top: 10px; }

/* ---------- Bandeau dernières photos ---------- */
:where(.css-app-base) .recent-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
:where(.css-app-base) .recent-strip a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm);
  border: 1px solid var(--hair-soft); background: var(--surf-3);
  transition: border-color var(--vite), transform var(--vite); }
:where(.css-app-base) .recent-strip a:hover { border-color: var(--hair); transform: translateY(-3px); }
:where(.css-app-base) .recent-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lent); }
:where(.css-app-base) .recent-strip a:hover img { transform: scale(1.08); }

/* ============================================================
   Cartes
   ============================================================ */
:where(.css-app-base) .card { background: var(--surf) !important; border: 1px solid var(--hair-soft) !important;
  border-radius: var(--r-lg) !important; color: var(--ivoire) !important; }
:where(.css-app-base) .card-header { background: transparent !important; border-bottom: 1px solid var(--hair-soft) !important;
  font-family: var(--serif); font-size: 1.28rem; font-weight: 500; letter-spacing: .01em;
  padding: 20px 24px !important; color: var(--ivoire) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
:where(.css-app-base) .card-header strong { font-weight: 500; }
:where(.css-app-base) .card-body { padding: 24px !important; }
:where(.css-app-base) .card-footer { background: transparent !important; border-top: 1px solid var(--hair-soft) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important; padding: 18px 24px !important; }

/* ============================================================
   Formulaires
   ============================================================ */
:where(.css-app-base) .form-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--or); margin-bottom: 9px; font-weight: 500; }
:where(.css-app-base) .form-control,
:where(.css-app-base) .form-select {
  background: var(--surf-3) !important; border: 1px solid var(--hair-soft) !important;
  border-radius: var(--r-sm) !important; color: var(--ivoire) !important;
  min-height: var(--tap); padding: .8rem 1rem; font-size: .95rem; font-weight: 300;
  transition: border-color var(--vite), box-shadow var(--vite), background var(--vite); }
:where(.css-app-base) .form-control:hover,
:where(.css-app-base) .form-select:hover { border-color: var(--hair); }
:where(.css-app-base) .form-control:focus,
:where(.css-app-base) .form-select:focus {
  border-color: var(--or) !important; background: #100e0a !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.16) !important; }
:where(.css-app-base) .form-control::placeholder { color: rgba(207,200,184,.38); }
:where(.css-app-base) textarea.form-control { min-height: 110px; line-height: 1.6; }
:where(.css-app-base) .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 6 5-6' stroke='%23D4AF37' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 1rem center !important;
  padding-right: 2.6rem; }
/* Cases et interrupteurs agrandis. Bootstrap reserve la place du controle avec
   un padding-left compense par une marge negative : en elargissant l'un sans
   l'autre, le libelle vient coller au controle. On ajuste donc LA PAIRE. */
:where(.css-app-base) .form-check { padding-left: 2em; min-height: 1.6em; }
:where(.css-app-base) .form-check-input { background-color: var(--surf-3); border-color: var(--hair);
  border-radius: 5px !important; width: 1.25em; height: 1.25em;
  margin-top: .16em; margin-left: -2em; }
/* L'interrupteur reste une gelule : le rayon carre ci-dessus le deformerait. */
:where(.css-app-base) .form-switch { padding-left: 3.5em; }
:where(.css-app-base) .form-switch .form-check-input { width: 2.7em; height: 1.45em; margin-left: -3.5em;
  border-radius: var(--pill) !important; margin-top: .06em; }
:where(.css-app-base) .form-check-input:checked { background-color: var(--or); border-color: var(--or); }
:where(.css-app-base) .form-check-input:focus { box-shadow: 0 0 0 3px rgba(212,175,55,.16); border-color: var(--or); }
:where(.css-app-base) .form-check-label { color: var(--ivoire-2); font-size: .92rem; }
:where(.css-app-base) input[readonly].form-control { color: var(--ivoire-2) !important; background: #0c0b08 !important; }
:where(.css-app-base) .form-text,
:where(.css-app-base) .form-hint { color: var(--ivoire-2); font-size: .8rem; }

/* ---- Champs DATE / HEURE : bien visibles sur fond sombre ---- */
:where(.css-app-base) input[type="date"].form-control,
:where(.css-app-base) input[type="datetime-local"].form-control,
:where(.css-app-base) input[type="time"].form-control,
:where(.css-app-base) input[type="month"].form-control {
  color-scheme: dark;                 /* sélecteur natif en thème sombre */
  cursor: pointer; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  padding-right: 2.6rem; position: relative;
}
/* Icône calendrier dorée, agrandie et cliquable (WebKit/Blink : Chrome, Edge, Safari) */
:where(.css-app-base) input[type="date"].form-control::-webkit-calendar-picker-indicator,
:where(.css-app-base) input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator,
:where(.css-app-base) input[type="month"].form-control::-webkit-calendar-picker-indicator {
  width: 24px; height: 24px; padding: 3px; margin-left: .3rem;
  cursor: pointer; opacity: 1; border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center/21px no-repeat;
}
:where(.css-app-base) input[type="time"].form-control::-webkit-calendar-picker-indicator {
  width: 24px; height: 24px; padding: 3px; cursor: pointer; opacity: 1; border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/21px no-repeat;
}
:where(.css-app-base) input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
:where(.css-app-base) input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator:hover,
:where(.css-app-base) input[type="time"].form-control::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(212,175,55,.20);
}
/* Variante mise en avant : liseré doré à gauche */
:where(.css-app-base) .input-date.form-control {
  border-left: 3px solid var(--or) !important;
  background: #131009 !important; font-weight: 400;
}
/* Firefox : forcer l'icône native claire */
@-moz-document url-prefix() {
  :where(.css-app-base) input[type="date"].form-control,
:where(.css-app-base) input[type="datetime-local"].form-control,
:where(.css-app-base) input[type="time"].form-control { color-scheme: dark; }
}

/* ---------- Champ de recherche (galeries, catalogue) ---------- */
:where(.css-app-base) .search-lux { position: relative; margin-bottom: 18px; }
:where(.css-app-base) .search-lux .form-control { padding-left: 3rem; min-height: 56px; border-radius: var(--pill) !important; }
:where(.css-app-base) .search-lux::before {
  content: ""; position: absolute; left: 1.15rem; top: 50%; width: 19px; height: 19px;
  transform: translateY(-50%); pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================================
   Boutons — « plus gros » : 52 px de haut, texte lisible
   ============================================================ */
:where(.css-app-base) .btn { border-radius: var(--r) !important; font-size: .8rem !important; letter-spacing: .14em;
  text-transform: uppercase; padding: .9rem 1.9rem; font-weight: 600 !important;
  min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  line-height: 1.15; border-width: 1px;
  transition: background var(--vite), border-color var(--vite), color var(--vite),
              transform var(--vite), box-shadow var(--vite) !important; }
:where(.css-app-base) .btn:active { transform: translateY(1px); }
:where(.css-app-base) .btn:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; box-shadow: none !important; }
:where(.css-app-base) .btn-sm { padding: .55rem 1.1rem; font-size: .7rem !important; min-height: var(--tap-sm);
  border-radius: var(--r-sm) !important; letter-spacing: .12em; }
:where(.css-app-base) .btn-lg,
:where(.css-app-base) .btn-xl { padding: 1.15rem 2.6rem; font-size: .9rem !important; min-height: 62px;
  border-radius: var(--r) !important; }

:where(.css-app-base) .btn-primary,
:where(.css-app-base) .btn-warning,
:where(.css-app-base) .btn-success {
  background: var(--or) !important; border: 1px solid var(--or) !important; color: var(--noir) !important;
  box-shadow: var(--sh-or); }
:where(.css-app-base) .btn-primary:hover,
:where(.css-app-base) .btn-warning:hover,
:where(.css-app-base) .btn-success:hover {
  background: var(--or-clair) !important; border-color: var(--or-clair) !important;
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212,175,55,.34); }
/* ── .btn-gold ────────────────────────────────────────────────────────────
   CETTE CLASSE ÉTAIT UTILISÉE NEUF FOIS ET DÉFINIE NULLE PART. « Importer »,
   « Découper la planche », « Préparer la collection », « Enregistrer le texte »,
   « Envoyer », « Appliquer à toute la collection »… tous étaient des boutons
   Bootstrap nus : fond transparent, texte gris sur fond noir. Sur une capture
   d'écran, on ne les voit pas — et un bouton qu'on ne voit pas n'existe pas.

   Rien ne le signalait : une classe CSS absente ne lève aucune erreur, elle ne
   fait rien. Troisième fois cette saison qu'un défaut purement visuel ne se
   découvre qu'en regardant l'écran.

   DEUX FORCES, parce que ces neuf boutons ne jouent pas le même rôle :
     .btn-gold       plein — l'action principale de la page (Importer, Découper)
     .btn-gold-line  contour — une action forte À CÔTÉ d'une autre principale.
   Deux gros boutons dorés côte à côte, personne ne sait plus lequel presser. */
:where(.css-app-base) .btn-gold {
  background: var(--or) !important; border: 1px solid var(--or) !important;
  color: var(--noir) !important; box-shadow: var(--sh-or); }
:where(.css-app-base) .btn-gold:hover {
  background: var(--or-clair) !important; border-color: var(--or-clair) !important;
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212,175,55,.34); }
:where(.css-app-base) .btn-gold-line {
  background: rgba(212,175,55,.08) !important; border: 1px solid var(--or) !important;
  color: var(--or-clair) !important; }
:where(.css-app-base) .btn-gold-line:hover {
  background: var(--or) !important; border-color: var(--or) !important;
  color: var(--noir) !important; transform: translateY(-2px); }
:where(.css-app-base) .btn-gold[disabled],
:where(.css-app-base) .btn-gold-line[disabled] { opacity: .45; transform: none; box-shadow: none; }

:where(.css-app-base) .btn-outline-primary,
:where(.css-app-base) .btn-outline-secondary,
:where(.css-app-base) .btn-outline-light,
:where(.css-app-base) .btn-outline-warning {
  background: rgba(245,235,221,.03) !important; border: 1px solid var(--hair) !important;
  color: var(--ivoire) !important; }
:where(.css-app-base) .btn-outline-primary:hover,
:where(.css-app-base) .btn-outline-secondary:hover,
:where(.css-app-base) .btn-outline-light:hover,
:where(.css-app-base) .btn-outline-warning:hover {
  background: var(--or) !important; border-color: var(--or) !important; color: var(--noir) !important;
  transform: translateY(-2px); }
:where(.css-app-base) .btn-outline-danger { background: rgba(220,90,90,.05) !important;
  border: 1px solid rgba(220,90,90,.4) !important; color: #d98c8c !important; }
:where(.css-app-base) .btn-outline-danger:hover { background: #b0413e !important; border-color: #b0413e !important;
  color: #fff !important; transform: translateY(-2px); }
/* Bouton « discret » : une action secondaire qui ne crie pas */
:where(.css-app-base) .btn-ghost { background: transparent !important; border: 1px solid transparent !important;
  color: var(--ivoire-2) !important; }
:where(.css-app-base) .btn-ghost:hover { background: rgba(212,175,55,.09) !important; color: var(--ivoire) !important; }
:where(.css-app-base) .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
:where(.css-app-base) .btn-lg svg,
:where(.css-app-base) .btn-xl svg { width: 20px; height: 20px; }

/* Rangée d'actions : les boutons respirent, ne se collent plus */
:where(.css-app-base) .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============================================================
   Tables
   ============================================================ */
:where(.css-app-base) .table { color: var(--ivoire) !important; border-color: var(--hair-soft) !important;
  --bs-table-bg: transparent; --bs-table-color: var(--ivoire); }
:where(.css-app-base) .table thead th { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or) !important; font-weight: 600; border-bottom: 1px solid var(--hair) !important;
  padding-bottom: 14px; white-space: nowrap; }
:where(.css-app-base) .table td { border-color: var(--hair-soft) !important; vertical-align: middle;
  color: var(--ivoire) !important; font-size: .94rem; padding-top: 15px; padding-bottom: 15px; }
:where(.css-app-base) .table tbody tr { transition: background var(--vite); }
:where(.css-app-base) .table tbody tr:hover { background: rgba(212,175,55,.045); }
:where(.css-app-base) .table a { color: var(--or); }
:where(.css-app-base) .table a:hover { color: var(--or-clair); }
/* Un tableau ne doit jamais élargir la page : il défile dans sa propre boîte */
:where(.css-app-base) .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--hair-soft); }
:where(.css-app-base) .table-wrap .table { margin-bottom: 0; }

/* ============================================================
   Badges / alertes / statuts
   ============================================================ */
:where(.css-app-base) .badge { border-radius: var(--pill) !important; font-weight: 600 !important; letter-spacing: .12em;
  text-transform: uppercase; font-size: .62rem !important; padding: .55em 1em !important; }
:where(.css-app-base) .badge.text-bg-secondary { background: rgba(245,235,221,.05) !important; border: 1px solid var(--hair);
  color: var(--or) !important; }
:where(.css-app-base) .badge.text-bg-success { background: rgba(126,240,178,.12) !important; border: 1px solid rgba(126,240,178,.4);
  color: #9fe8c0 !important; }
:where(.css-app-base) .badge.text-bg-info { background: rgba(34,211,238,.1) !important; border: 1px solid rgba(34,211,238,.35);
  color: #8fdcea !important; }
:where(.css-app-base) .badge.text-bg-danger { background: rgba(220,90,90,.12) !important; border: 1px solid rgba(220,90,90,.4);
  color: #d98c8c !important; }
:where(.css-app-base) .badge.text-bg-warning { background: rgba(212,175,55,.14) !important; border: 1px solid var(--hair);
  color: var(--or-clair) !important; }
/* Pastille d'état autonome (sans Bootstrap) : <span class="pastille on">Actif</span> */
:where(.css-app-base) .pastille { display: inline-flex; align-items: center; gap: .45em; border-radius: var(--pill);
  padding: .45em .95em; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; border: 1px solid var(--hair); color: var(--ivoire-2);
  background: rgba(245,235,221,.04); }
:where(.css-app-base) .pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
:where(.css-app-base) .pastille.on { color: #9fe8c0; border-color: rgba(126,240,178,.42); background: rgba(126,240,178,.10); }
:where(.css-app-base) .pastille.draft { color: var(--or-clair); border-color: var(--hair); background: rgba(212,175,55,.10); }
:where(.css-app-base) .pastille.done { color: #8fdcea; border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.09); }
:where(.css-app-base) .pastille.off { color: #d98c8c; border-color: rgba(220,90,90,.4); background: rgba(220,90,90,.10); }

:where(.css-app-base) .alert { border-radius: var(--r) !important; border: 1px solid var(--hair) !important;
  background: rgba(212,175,55,.07) !important; color: var(--ivoire) !important;
  padding: 16px 20px !important; }
:where(.css-app-base) .alert-success { border-color: rgba(126,240,178,.4) !important; background: rgba(126,240,178,.07) !important; }
:where(.css-app-base) .alert-danger { border-color: rgba(220,90,90,.45) !important; background: rgba(220,90,90,.08) !important; }
:where(.css-app-base) .alert a { color: var(--or); }

/* ---------- Divers ---------- */
:where(.css-app-base) .text-muted,
:where(.css-app-base) small.text-muted { color: var(--ivoire-2) !important; }
:where(.css-app-base) .list-group-item { background: transparent !important; border-color: var(--hair-soft) !important;
  color: var(--ivoire) !important; padding: 14px 18px; }
:where(.css-app-base) .list-group { border-radius: var(--r) !important; overflow: hidden; }
:where(.css-app-base) hr { border-color: var(--hair-soft); opacity: 1; }
:where(.css-app-base) .modal-content { background: var(--surf) !important; border: 1px solid var(--hair) !important;
  border-radius: var(--r-lg) !important; color: var(--ivoire) !important; }
:where(.css-app-base) .progress { background: rgba(245,235,221,.07); border-radius: var(--pill); height: 8px; }
:where(.css-app-base) .progress-bar { background: var(--or); }

/* ============================================================
   KIT TACTILE — chips & cartes : on TOUCHE, on ne tape pas
   (radios/checkboxes cachés, gros gabarits ≥52px, état doré)
   ============================================================ */

:where(.css-app-base) .chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
/* Variante grille : cellules PARFAITEMENT uniformes (types, thèmes…) */
:where(.css-app-base) .chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
:where(.css-app-base) .chip-grid .chip-opt { width: 100%; }
:where(.css-app-base) .chip-grid .chip-opt > span { width: 100%; justify-content: flex-start; min-width: 0; }
/* Mobile : 2 colonnes qui PEUVENT rétrécir (minmax 0) + libellés compacts → plus de débordement */
@media (max-width: 560px) {
  :where(.css-app-base) .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.css-app-base) .chip-grid .chip-opt > span { padding: 13px 13px; letter-spacing: .05em; gap: 7px; font-size: .8rem; }
}
@media (max-width: 380px) { :where(.css-app-base) .chip-grid { grid-template-columns: 1fr; } }
:where(.css-app-base) .chip-opt { position: relative; margin: 0; cursor: pointer; }
:where(.css-app-base) .chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
:where(.css-app-base) .chip-opt > span {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--tap); padding: 13px 22px; border-radius: var(--pill);
  border: 1px solid var(--hair-soft); color: var(--ivoire-2); background: rgba(245,235,221,.025);
  font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  transition: background var(--vite), border-color var(--vite), color var(--vite),
              box-shadow var(--vite), transform var(--vite); user-select: none;
}
:where(.css-app-base) .chip-opt:hover > span { border-color: var(--hair); color: var(--ivoire); background: rgba(212,175,55,.07); }
:where(.css-app-base) .chip-opt input:checked + span {
  background: var(--or); border-color: var(--or); color: var(--noir); font-weight: 600;
  box-shadow: var(--sh-or);
}
:where(.css-app-base) .chip-opt input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 3px; }
:where(.css-app-base) .chip-opt input:disabled + span { opacity: .4; cursor: not-allowed; }
:where(.css-app-base) .chip-opt .em { font-size: 1.2rem; letter-spacing: 0; }
/* Dans une grille, on garde des coins doux plutôt qu'une gélule très longue */
:where(.css-app-base) .chip-grid .chip-opt > span { border-radius: var(--r); }

/* Filtres en gélule (galeries : Tous / Approuvés / En attente / Refusés) */
:where(.css-app-base) .fpill { border-radius: var(--pill); min-height: var(--tap-sm); }

/* ============================================================
   Cartes listes (événements / appareils)
   ============================================================ */
:where(.css-app-base) .list-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
:where(.css-app-base) .lc {
  background: var(--surf); border: 1px solid var(--hair-soft); border-radius: var(--r-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--vite), transform var(--vite), box-shadow var(--vite);
  overflow: hidden;
}
:where(.css-app-base) .lc:hover { border-color: var(--hair); transform: translateY(-4px); box-shadow: var(--sh-2); }
:where(.css-app-base) .lc-head { display: flex; align-items: center; gap: 13px; }
:where(.css-app-base) .lc-emoji { font-size: 1.7rem; width: 54px; height: 54px; display: grid; place-items: center;
  background: rgba(212,175,55,.11); border: 1px solid rgba(212,175,55,.22);
  border-radius: var(--r-sm); flex-shrink: 0; }
:where(.css-app-base) .lc-title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
:where(.css-app-base) .lc-sub { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivoire-2); }
:where(.css-app-base) .lc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
:where(.css-app-base) .lc-actions .btn { flex: 1 1 130px; text-align: center; min-height: var(--tap); }
:where(.css-app-base) .lc-code { font-family: var(--serif); font-size: 1.9rem; letter-spacing: .35em; color: var(--or);
  text-align: center; padding: 14px; border: 1px dashed var(--hair); border-radius: var(--r);
  background: rgba(212,175,55,.04); }
/* Ligne de méta (date · lieu) : une icône, une valeur */
:where(.css-app-base) .lc-meta { display: flex; flex-direction: column; gap: 7px; font-size: .86rem; color: var(--ivoire-2); }
:where(.css-app-base) .lc-meta span { display: flex; align-items: center; gap: 9px; }
:where(.css-app-base) .lc-meta .mi { color: var(--or); width: 17px; text-align: center; flex-shrink: 0; }

/* Aperçu du fond d'accueil (event.php section 2) */
:where(.css-app-base) .intro-media {
  position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--r);
  background: linear-gradient(150deg, #17130c, #0e0d0a);
  border: 1px solid var(--hair-soft);
}
:where(.css-app-base) .intro-media img,
:where(.css-app-base) .intro-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.css-app-base) .intro-media-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; color: var(--or); font-size: 2rem; line-height: 1.4;
}
:where(.css-app-base) .intro-media-ph small { color: var(--ivoire-2); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }

/* Visuel de tête des cartes événement (fond d'accueil ou aperçu template) */
:where(.css-app-base) .lc-visual { padding-top: 0; }
:where(.css-app-base) .lc-media {
  display: block; position: relative;
  margin: 0 -20px 4px;                /* pleine largeur, jusqu'aux bords arrondis (la carte n'a pas de padding haut) */
  height: 196px; overflow: hidden;
  background: linear-gradient(150deg, #17130c, #0e0d0a);
  border-bottom: 1px solid var(--hair-soft);
}
:where(.css-app-base) .lc-media img,
:where(.css-app-base) .lc-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--lent);
}
:where(.css-app-base) .lc:hover .lc-media img,
:where(.css-app-base) .lc:hover .lc-media video { transform: scale(1.05); }
/* Voile bas : le texte des pastilles reste lisible sur n'importe quelle photo */
:where(.css-app-base) .lc-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(185deg, rgba(11,10,8,.34) 0%, transparent 34%, rgba(11,10,8,.55) 100%); }
:where(.css-app-base) .lc-media-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3.2rem; opacity: .8;
}
:where(.css-app-base) .lc-media-status {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: 7px 13px; border-radius: var(--pill); background: rgba(11,10,8,.78);
  border: 1px solid var(--hair); color: var(--or-clair);
  backdrop-filter: blur(8px);
}

/* Barre de validation collante (mobile-first) */
:where(.css-app-base) .save-bar {
  position: sticky; bottom: 14px; z-index: 50;
  background: rgba(13,12,9,.94); backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: 14px; display: flex; gap: 12px; align-items: center; margin-top: 28px;
}
:where(.css-app-base) .save-bar .btn { min-height: 56px; font-size: .84rem !important; flex: 1; }
:where(.css-app-base) .save-bar .save-hint { color: var(--ivoire-2); font-size: .78rem; display: none; }

/* ── LA DIFFUSION ET SA CIBLE ──────────────────────────────────────────────
   Le choix est COLLÉ au bouton, pas rangé ailleurs dans la page : c'est le
   bouton qu'on regarde au moment de décider, et un réglage qu'il faut aller
   chercher à l'autre bout de l'écran n'est pas un réglage qu'on utilise. */
:where(.css-app-base) .sp-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
:where(.css-app-base) .sp-choix { display: inline-flex; border: 1px solid var(--hair); border-radius: 999px;
  padding: 3px; background: rgba(245,235,221,.03); }
:where(.css-app-base) .sp-choix label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-size: .74rem; letter-spacing: .06em;
  color: var(--ivoire-2); white-space: nowrap; margin: 0; transition: background .15s, color .15s; }
:where(.css-app-base) .sp-choix label b { color: var(--or-clair); font-weight: 700; }
:where(.css-app-base) .sp-choix input { position: absolute; opacity: 0; pointer-events: none; }
:where(.css-app-base) .sp-choix label.on { background: var(--or); color: var(--noir); }
:where(.css-app-base) .sp-choix label.on b { color: var(--noir); }
/* Aucun cadre vide : la moitié droite ne propose rien, et le dit en s'éteignant
   plutôt qu'en disparaissant — une option qui s'évapore laisse croire à un bug. */
:where(.css-app-base) .sp-choix label.ko { opacity: .38; cursor: not-allowed; }
:where(.css-app-base) .save-bar .sp-bloc .btn { flex: 0 0 auto; }
:where(.css-app-base) .sp-averti { color: #e0b96a; display: inline-block; margin-top: .35rem; }
@media (max-width: 720px) { :where(.css-app-base) .sp-bloc { width: 100%; } :where(.css-app-base) .sp-choix { flex: 1; } :where(.css-app-base) .sp-choix label { flex: 1; justify-content: center; } }
@media (min-width: 720px) { :where(.css-app-base) .save-bar { justify-content: flex-end; }
  :where(.css-app-base) .save-bar .btn { flex: 0 0 auto; padding-left: 46px; padding-right: 46px; }
  :where(.css-app-base) .save-bar .save-hint { display: block; margin-right: auto; } }

/* Confort mobile : pas de zoom iOS, touch targets larges */
@media (max-width: 720px) {
  :where(.css-app-base) .form-control,
:where(.css-app-base) .form-select { font-size: 16px !important; min-height: 54px; }
  :where(.css-app-base) .btn { min-height: var(--tap); width: auto; }
  :where(.css-app-base) .admin-main { padding-top: 116px; }
  :where(.css-app-base) .page-head .btn { width: 100%; }
}

/* ============================================================
   Sélecteur visuel de templates (event.php)
   ============================================================ */
:where(.css-app-base) .frame-pick { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
:where(.css-app-base) .fp-card { display: block; cursor: pointer; position: relative; margin: 0; }
:where(.css-app-base) .fp-card input { position: absolute; opacity: 0; pointer-events: none; }
:where(.css-app-base) .fp-visual {
  display: block; position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--r);
  background: var(--surf-3); border: 2px solid var(--hair-soft);
  transition: border-color var(--vite), transform var(--vite), box-shadow var(--vite);
}
:where(.css-app-base) .fp-visual img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--surf-3); }
:where(.css-app-base) .fp-card:hover .fp-visual { border-color: var(--hair); transform: translateY(-4px); box-shadow: var(--sh-1); }
:where(.css-app-base) .fp-card input:checked + .fp-visual {
  border-color: var(--or); box-shadow: 0 0 0 2px rgba(212,175,55,.35), var(--sh-2);
}
:where(.css-app-base) .fp-card input:focus-visible + .fp-visual { outline: 2px solid var(--or-clair); outline-offset: 3px; }
:where(.css-app-base) .fp-card input:checked + .fp-visual::after {
  content: "✓"; position: absolute; top: 9px; right: 9px;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--or); color: var(--noir); font-weight: 700; font-size: .95rem;
  box-shadow: var(--sh-1);
}
:where(.css-app-base) .fp-badge {
  position: absolute; top: 9px; left: 9px; font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; padding: 6px 11px; border-radius: var(--pill);
  background: rgba(11,10,8,.85); border: 1px solid var(--hair); color: var(--or-clair);
  backdrop-filter: blur(6px);
}
:where(.css-app-base) .fp-badge.fp-free { color: #9fe8c0; border-color: rgba(126,240,178,.4); }
:where(.css-app-base) .fp-name { display: block; margin-top: 9px; font-size: .84rem; color: var(--ivoire);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-base) .fp-meta { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ivoire-2); }
:where(.css-app-base) .fp-locked { opacity: .55; cursor: not-allowed; }
:where(.css-app-base) .fp-locked .fp-visual { filter: grayscale(.4); }
:where(.css-app-base) .fp-none .fp-visual { display: grid; place-items: center; }
:where(.css-app-base) .fp-none .fp-x { font-size: 2.8rem; color: var(--ivoire-2); font-family: var(--serif); }

/* ============================================================
   Onglets de l'événement (event.php) — gélules, pas des liens
   ============================================================ */
:where(.css-app-base) .ev-nav { position: sticky; top: 10px; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px;
  padding: 7px; border-radius: var(--pill);
  background: rgba(18,16,12,.94); backdrop-filter: blur(10px);
  border: 1px solid var(--hair); box-shadow: var(--sh-1); }
:where(.css-app-base) .ev-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-sm);
  padding: 11px 20px; border-radius: var(--pill); color: var(--ivoire-2);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  transition: background var(--vite), color var(--vite), box-shadow var(--vite); white-space: nowrap;
}
:where(.css-app-base) .ev-nav a:hover { color: var(--ivoire); background: rgba(212,175,55,.08); }
:where(.css-app-base) .ev-nav a.on { background: var(--or); color: var(--noir); font-weight: 600; box-shadow: var(--sh-or); }
:where(.css-app-base) .ev-nav a.ok { color: var(--ivoire); }
@media (max-width: 900px) {
  :where(.css-app-base) .ev-nav { top: 74px; flex-wrap: nowrap; overflow-x: auto; border-radius: var(--r);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  :where(.css-app-base) .ev-nav::-webkit-scrollbar { display: none; }
  :where(.css-app-base) .ev-nav a { flex: 0 0 auto; }
}
/* Les ancres internes ne doivent pas passer SOUS la barre d'onglets collante. */
:where(.css-app-base) [id^="sec-"] { scroll-margin-top: 92px; }

/* ============================================================
   Login (écran centré)
   ============================================================ */
:where(.css-app-base) .login-wrap { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
:where(.css-app-base) .login-card { width: min(430px, 92vw); background: var(--surf); border: 1px solid var(--hair-soft);
  border-radius: var(--r-xl); padding: 54px 44px 46px; text-align: center; position: relative;
  box-shadow: var(--sh-3); }
:where(.css-app-base) .login-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--hair-soft);
  border-radius: calc(var(--r-xl) - 6px); pointer-events: none; }
:where(.css-app-base) .login-brand { font-family: var(--serif); font-size: 1.55rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 18px 0 6px; }
:where(.css-app-base) .login-brand b { color: var(--or); font-weight: 500; }
:where(.css-app-base) .login-note { color: var(--ivoire-2); font-size: .8rem; margin-top: 26px; }
:where(.css-app-base) .login-note b { color: var(--or); font-weight: 500; }
:where(.css-app-base) .login-note a { color: var(--or); }

/* ---------- Accessibilité ---------- */
:where(.css-app-base) a:focus-visible,
:where(.css-app-base) button:focus-visible,
:where(.css-app-base) summary:focus-visible {
  outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  :where(.css-app-base) *,
*:where(.css-app-base) { transition: none !important; animation: none !important; }
  :where(.css-app-base) .kpi:hover,
:where(.css-app-base) .lc:hover,
:where(.css-app-base) .btn:hover,
:where(.css-app-base) .tpl-card:hover .tpl-visual { transform: none !important; }
}

/* ============================================================
   FICHE ÉVÉNEMENT — un PARCOURS, pas un formulaire
   En-tête collant · fil d'étapes · grandes cartes de choix ·
   barre Précédent / Suivant / Valider.
   ============================================================ */

/* ---------- En-tête collant : on ne perd jamais de vue QUEL événement ------ */
/* `top: var(--top-h)` ET PAS `top: 0`.
   La barre supérieure de l'application est en `position: fixed` : un élément
   collant calé à 0 se colle donc SOUS elle, et le nom de l'événement disparaît
   derrière le titre de la page dès qu'on défile. On s'en apercevait peu tant
   que l'en-tête était haut — il restait toujours quelque chose de visible.
   Replié sur un téléphone, il n'en restait plus rien. */
:where(.css-app-base) .ev-tete {
  position: sticky; top: var(--top-h); z-index: 60; margin: 0 0 20px;
  background: linear-gradient(180deg, rgba(23,20,14,.97), rgba(18,16,12,.97));
  backdrop-filter: blur(12px);
  border: 1px solid var(--hair-soft); border-radius: var(--r-lg);
  padding: 16px 22px 14px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start;
}
/* Le fil d'étapes vit DANS l'en-tête collant : pleine largeur, sous le nom */
:where(.css-app-base) .ev-tete > .etapes { flex: 1 1 100%; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
:where(.css-app-base) .ev-tete > .ev-tete-id { flex: 1 1 340px; min-width: 0; }
:where(.css-app-base) .ev-tete h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.12; margin: 0 0 4px; color: var(--ivoire); }
:where(.css-app-base) .ev-tete h1 em { font-style: normal; color: inherit; }
:where(.css-app-base) .ev-tete .ev-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ivoire-2); font-size: .92rem; }
:where(.css-app-base) .ev-tete .ev-meta span { display: inline-flex; align-items: center; gap: 8px; }
:where(.css-app-base) .ev-tete .ev-meta .mi { color: var(--or); }
:where(.css-app-base) .ev-tete .ev-etat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
@media (max-width: 720px) {
  :where(.css-app-base) .ev-tete { padding: 14px 14px 10px; transition: padding .16s ease; }
  :where(.css-app-base) .ev-tete h1 { transition: font-size .16s ease; }
  :where(.css-app-base) .ev-tete .ev-etat { margin-left: 0; }
  :where(.css-app-base) .ev-tete > .etapes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  :where(.css-app-base) .ev-tete > .etapes::-webkit-scrollbar { display: none; }

  /* ── L'EN-TÊTE PLIÉ ────────────────────────────────────────────────────
     Posé par le script de `_head.php` dès qu'on défile. Il ne garde que le
     nom de l'événement et le fil d'étapes : de quoi savoir où l'on est et
     aller ailleurs. Tout le reste — date, type, pays, pastille, boutons —
     revient en remontant. Un en-tête collant qui prend la moitié d'un
     téléphone n'aide personne : il rappelle en permanence une information
     qu'on a lue une fois, au prix de la place où l'on travaille.
     C'est un pliage, pas une amputation. */
  :where(.css-app-base) .ev-tete.compacte { padding: 8px 14px 6px; gap: 0; }
  :where(.css-app-base) .ev-tete.compacte .ev-meta,
:where(.css-app-base) .ev-tete.compacte .ev-etat { display: none; }
  :where(.css-app-base) .ev-tete.compacte h1 { font-size: 1.02rem; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(.css-app-base) .ev-tete.compacte > .etapes { margin-top: 6px; padding-top: 7px; }

  /* ── « ÇA CONTINUE À DROITE » ──────────────────────────────────────────
     Le fil débordait déjà, mais la dernière gélule était coupée NET par le
     bord de l'écran : ça se lit comme un défaut d'affichage, pas comme une
     invitation à faire glisser. Le dégradé n'apparaît que du côté où il reste
     quelque chose à parcourir — un voile permanent mentirait une fois arrivé
     au bout. Les classes sont posées par le script, qui mesure. */
  :where(.css-app-base) .ev-tete > .etapes { position: relative; scroll-behavior: smooth; }
  :where(.css-app-base) .ev-tete > .etapes.deborde-droite {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent 100%);
  }
  :where(.css-app-base) .ev-tete > .etapes.deborde-gauche.deborde-droite {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 42px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 42px), transparent 100%);
  }
  :where(.css-app-base) .ev-tete > .etapes.deborde-gauche:not(.deborde-droite) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px);
            mask-image: linear-gradient(90deg, transparent 0, #000 30px);
  }

  /* Le trait de liaison mangeait 26 px entre chaque gélule : sur un écran de
     390 px, c'est une étape entière de perdue. Il dit « il y a une suite » —
     le défilement le dit déjà. */
  :where(.css-app-base) .etapes li::after { width: 12px; flex-basis: 12px; }
  :where(.css-app-base) .etape { padding: 10px 16px 10px 10px; gap: 9px; font-size: .94rem; }
}

/* La gélule courante est recentrée au chargement par le script. Le
   `scroll-margin` lui laisse de l'air : collée au bord, rien ne dit qu'il y a
   quelque chose avant elle. */
:where(.css-app-base) .etape { scroll-margin-inline: 28px; }

/* ---------- Le fil d'étapes ----------------------------------------------
   Chaque étape est un lien : on n'enferme jamais l'organisateur dans l'ordre.
   Le trait entre deux pastilles dit qu'il y a une suite ; le ✓ dit ce qui est
   déjà posé. Sur mobile le fil défile horizontalement plutôt que de s'empiler. */
:where(.css-app-base) .etapes { display: flex; align-items: center; gap: 0; margin: 0 0 10px; padding: 0;
  list-style: none; flex-wrap: wrap; }
:where(.css-app-base) .etapes li { display: flex; align-items: center; }
:where(.css-app-base) .etapes li::after {                      /* le trait de liaison */
  content: ""; width: 26px; height: 1px; background: var(--hair-soft); flex: 0 0 26px;
}
:where(.css-app-base) .etapes li:last-child::after { display: none; }
:where(.css-app-base) .etape {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  min-height: 48px; padding: 11px 24px 11px 12px; border-radius: var(--pill);
  background: rgba(245,235,221,.06); border: 1px solid var(--hair-soft); color: var(--ivoire);
  font-size: 1rem; font-weight: 500; letter-spacing: .01em;
  transition: background var(--vite), color var(--vite), box-shadow var(--vite), border-color var(--vite);
}
:where(.css-app-base) .etape:hover { background: rgba(212,175,55,.14); border-color: var(--hair); color: var(--ivoire); }
:where(.css-app-base) .etape .n {                              /* la pastille numérotée */
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .86rem; font-weight: 700;
  background: rgba(245,235,221,.10); color: var(--ivoire);
}
/* Faite : fond ambré discret, pastille dorée, ✓ à la place du chiffre. */
:where(.css-app-base) .etape.faite { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.35); color: var(--or-clair); }
:where(.css-app-base) .etape.faite .n { background: var(--or); color: var(--noir); }
/* Courante : pleine, dorée — impossible de se demander où l'on est. */
/* Volet « désactivé » (ex. lien invité coupé) : pastille ⛔ rouge, lisible depuis tout volet */
:where(.css-app-base) .etape.off { border-color: rgba(224,119,119,.45); color: #e9a3a3; }
:where(.css-app-base) .etape.off .n { background: rgba(224,119,119,.18); color: #e9a3a3; font-size: .95rem; }
:where(.css-app-base) .etape.ici { background: var(--or); border-color: var(--or); color: var(--noir); font-weight: 700; box-shadow: var(--sh-or); }
/* i253 — verrouillé (démo seulement) : cadenas rouge, y compris sur l'étape en cours */
:where(.css-app-base) .etape.lock { border-color: rgba(224,119,119,.55); color: #e9a3a3; }
:where(.css-app-base) .etape.lock .n { background: rgba(224,119,119,.22); color: #e9a3a3; font-size: .8rem; }
:where(.css-app-base) .etape.ici.lock { background: var(--or); color: var(--noir); border-color: #e07777; box-shadow: 0 0 0 2px rgba(224,119,119,.45), var(--sh-or); }
:where(.css-app-base) .etape.ici.lock .n { background: #e07777; color: #fff; }
:where(.css-app-base) .etape.ici .n { background: rgba(11,10,8,.22); color: var(--noir); }
:where(.css-app-base) .etapes-info { color: var(--ivoire-2); font-size: .84rem; margin: 0 0 22px; }
@media (max-width: 900px) {
  :where(.css-app-base) .etapes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  :where(.css-app-base) .etapes::-webkit-scrollbar { display: none; }
  :where(.css-app-base) .etapes li,
:where(.css-app-base) .etape { flex: 0 0 auto; }
  :where(.css-app-base) .etapes li::after { width: 16px; flex-basis: 16px; }
}

/* ---------- Titre de volet, DANS la carte -------------------------------- */
:where(.css-app-base) .volet-titre { font-family: var(--serif); font-weight: 500; font-size: 1.9rem;
  line-height: 1.15; margin: 0 0 4px; color: var(--ivoire); }
:where(.css-app-base) .volet-titre .n { color: var(--or); font-style: normal; }
:where(.css-app-base) .volet-sous { color: var(--ivoire-2); font-size: .92rem; margin: 0 0 26px; }

/* ---------- Grandes cartes de choix --------------------------------------
   Une puce dit « Actif » ; une carte dit « Actif — débloqué pour les invités ».
   Le libellé seul oblige à deviner ; la carte explique, donc on choisit juste. */
:where(.css-app-base) .opt-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
:where(.css-app-base) .opt-card { position: relative; margin: 0; cursor: pointer; display: block; }
:where(.css-app-base) .opt-card input { position: absolute; opacity: 0; pointer-events: none; }
:where(.css-app-base) .opt-card > span,
:where(.css-app-base) .opt-card .corps {
  display: flex; gap: 14px; align-items: flex-start; height: 100%;
  padding: 18px 20px; border-radius: var(--r); background: rgba(245,235,221,.025);
  border: 1px solid var(--hair-soft); transition: background var(--vite),
    border-color var(--vite), box-shadow var(--vite), transform var(--vite);
}
:where(.css-app-base) .opt-card:hover > span,
:where(.css-app-base) .opt-card:hover .corps {
  border-color: var(--hair); background: rgba(212,175,55,.06); transform: translateY(-2px); }
:where(.css-app-base) .opt-card input:checked + span,
:where(.css-app-base) .opt-card input:checked + .corps {
  border-color: var(--or); background: rgba(212,175,55,.10);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.45); }
:where(.css-app-base) .opt-card input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 3px; }
:where(.css-app-base) .opt-card input:disabled + span { opacity: .45; cursor: not-allowed; }
:where(.css-app-base) .opt-card .ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 1.25rem;
  background: rgba(212,175,55,.11); border: 1px solid rgba(212,175,55,.22); color: var(--or); }
:where(.css-app-base) .opt-card b { display: block; font-weight: 500; font-size: 1rem; color: var(--ivoire);
  margin-bottom: 3px; letter-spacing: .01em; }
:where(.css-app-base) .opt-card small { display: block; color: var(--ivoire-2); font-size: .84rem; line-height: 1.45; }
:where(.css-app-base) .opt-card input:checked + span b { color: var(--or-clair); }
/* Coche d'inclusion, au milieu du bord droit. Sur une carte qui porte deja une
   etiquette (« Incluse »), la coche se superposerait : c'est alors l'etiquette
   elle-meme qui devient doree, et la coche disparait. */
:where(.css-app-base) .opt-card > span { padding-right: 46px; }
:where(.css-app-base) .opt-card input:checked + span::after {
  content: "✓"; position: absolute; top: 50%; right: 18px; transform: translateY(-50%);
  color: var(--or); font-weight: 700; font-size: 1.15rem; }
:where(.css-app-base) .opt-card--etiq input:checked + span::after { content: none; }
:where(.css-app-base) .opt-card--etiq input:checked + span .etiq,
:where(.css-app-base) .opt-card--etiq input:checked ~ .etiq {
  background: var(--or); border-color: var(--or); color: var(--noir); }
:where(.css-app-base) .opt-card .etiq { position: absolute; top: 14px; right: 16px;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: 5px 11px; border-radius: var(--pill);
  background: rgba(212,175,55,.14); border: 1px solid var(--hair); color: var(--or-clair); }

/* Ligne à interrupteur : un réglage, son explication, sa bascule à droite. */
:where(.css-app-base) .opt-switch { display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: var(--r); background: rgba(245,235,221,.025);
  border: 1px solid var(--hair-soft); margin-bottom: 20px; }
:where(.css-app-base) .opt-switch > div { flex: 1 1 auto; min-width: 0; }
:where(.css-app-base) .opt-switch .form-check { margin: 0; }

/* Encart explicatif de fin de volet */
:where(.css-app-base) .encart { padding: 18px 20px; border-radius: var(--r); background: rgba(245,235,221,.03);
  border: 1px solid var(--hair-soft); color: var(--ivoire-2); font-size: .88rem; line-height: 1.6; }
:where(.css-app-base) .encart b,
:where(.css-app-base) .encart strong { color: var(--ivoire); font-weight: 500; }

/* Vide : dire ce qui manque, pas laisser un trou. */
:where(.css-app-base) .vide { display: grid; place-items: center; gap: 12px; text-align: center;
  padding: 46px 20px; border-radius: var(--r); background: rgba(245,235,221,.02);
  border: 1px dashed var(--hair-soft); color: var(--ivoire-2); }
:where(.css-app-base) .vide .ic { font-size: 2.2rem; color: var(--or); opacity: .55; }

/* ---------- Barre du parcours -------------------------------------------- */
:where(.css-app-base) .parcours-bar {
  position: sticky; bottom: 14px; z-index: 50; margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: rgba(13,12,9,.94); backdrop-filter: blur(14px);
  border: 1px solid var(--hair); box-shadow: var(--sh-2);
}
:where(.css-app-base) .parcours-bar .note { color: var(--ivoire-2); font-size: .8rem; margin-right: auto; margin-left: auto; }
/* Aide repliée : les champs d'abord, l'explication à la demande. */
:where(.css-app-base) details.aide { border-top: 1px solid var(--hair-soft); padding-top: 10px; }
:where(.css-app-base) details.aide summary { cursor: pointer; color: var(--or-clair); font-size: .82rem; letter-spacing: .04em; list-style: none; }
:where(.css-app-base) details.aide summary::-webkit-details-marker { display: none; }
:where(.css-app-base) details.aide summary::before { content: "▸ "; }
:where(.css-app-base) details.aide[open] summary::before { content: "▾ "; }
:where(.css-app-base) .dropdown-menu { background: var(--surf); border: 1px solid var(--hair); }
:where(.css-app-base) .dropdown-item { color: var(--ivoire); }
:where(.css-app-base) .dropdown-item:hover,
:where(.css-app-base) .dropdown-item:focus { background: rgba(212,175,55,.10); color: var(--ivoire); }
:where(.css-app-base) .parcours-bar .btn { min-height: 52px; }
@media (max-width: 720px) {
  :where(.css-app-base) .parcours-bar { flex-direction: column-reverse; align-items: stretch; }
  :where(.css-app-base) .parcours-bar .btn { width: 100%; }
  :where(.css-app-base) .parcours-bar .note { margin: 4px 0 0; text-align: center; }
}

/* ============================================================
   SIMPLICITÉ — retour de Marina : « simple and user friendly »
   Les micro-libellés dorés en CAPITALES espacées (« LIEU »,
   « DESCRIPTION », « STATUT ») se déchiffrent lettre à lettre.
   Un formulaire se PARCOURT : ses libellés doivent se lire d'un
   bloc, comme une phrase. Même arbitrage que pour le menu.
   ============================================================ */
:where(.css-app-base) .form-label {
  font-size: .88rem; letter-spacing: .005em; text-transform: none;
  color: var(--ivoire); font-weight: 500; margin-bottom: 8px;
}
/* Le libellé d'un groupe de cartes reste discret, jamais criard. */
:where(.css-app-base) .form-label .text-muted { font-weight: 400; }

/* Puces : même logique. Une puce se lit, elle ne s'épelle pas. */
:where(.css-app-base) .chip-opt > span {
  text-transform: none; letter-spacing: .01em; font-size: .9rem;
  font-weight: 500; padding: 11px 19px; min-height: 46px;
}
:where(.css-app-base) .chip-grid .chip-opt > span { padding: 12px 16px; }
:where(.css-app-base) .fpill { text-transform: none; letter-spacing: .01em; font-size: .84rem; padding: 10px 18px; }

/* En-tête de carte : plus de titre-fleuve, la carte porte un sujet. */
:where(.css-app-base) .card-header { font-size: 1.12rem; padding: 17px 22px !important; }

/* La barre du parcours en FIN de volet : collante, elle flottait par-dessus
   les vignettes du décor — on croyait la page cassée. */
:where(.css-app-base) .parcours-bar--fin { position: static; }

/* Encart d'aide sous un libellé : la phrase qui évite la question. */
:where(.css-app-base) .form-hint { font-size: .82rem; line-height: 1.5; color: var(--ivoire-2); }


/* ============================================================
   Onglets d'une rubrique d'administration (i40)
   Posés par _head.php en tête de .admin-main : la rubrique à gauche, en petites
   capitales, puis ses pages en gélules. Défile à l'horizontale sur téléphone.
   ============================================================ */
:where(.css-app-base) .adm-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: -8px 0 30px; padding: 6px; border-radius: var(--r-lg);
  background: rgba(18,16,12,.72); border: 1px solid var(--hair-soft); }
:where(.css-app-base) .adm-tabs-hub { padding: 0 12px 0 10px; font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(207,200,184,.55); font-weight: 500; white-space: nowrap; }
:where(.css-app-base) .adm-tabs a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 16px;
  border-radius: var(--pill); color: var(--ivoire-2); font-size: .86rem; white-space: nowrap;
  transition: background var(--vite), color var(--vite); }
:where(.css-app-base) .adm-tabs a:hover { color: var(--ivoire); background: rgba(212,175,55,.08); }
:where(.css-app-base) .adm-tabs a.on { background: var(--or); color: var(--noir); font-weight: 600; }
@media (max-width: 900px) {
  :where(.css-app-base) .adm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 0; }
  :where(.css-app-base) .adm-tabs::-webkit-scrollbar { display: none; }
  :where(.css-app-base) .adm-tabs a { flex: 0 0 auto; }
  :where(.css-app-base) .adm-tabs-hub { display: none; }
}

/* Tableau de bord : les files d'attente, une ligne par chose à faire. */
:where(.css-app-base) .todo-list { display: flex; flex-direction: column; gap: 8px; }
:where(.css-app-base) .todo-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-radius: var(--r); background: var(--surf); border: 1px solid var(--hair-soft);
  color: var(--ivoire); transition: border-color var(--vite), background var(--vite); }
:where(.css-app-base) .todo-item:hover { border-color: var(--hair); background: rgba(212,175,55,.05); color: var(--ivoire); }
:where(.css-app-base) .todo-item b { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--or);
  min-width: 2.2ch; text-align: right; line-height: 1; }
:where(.css-app-base) .todo-item .todo-txt { flex: 1 1 auto; min-width: 0; }
:where(.css-app-base) .todo-item .todo-where { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivoire-2); white-space: nowrap; }
:where(.css-app-base) .todo-item.urgent b { color: #f08a7a; }
:where(.css-app-base) .todo-item::after { content: "→"; color: var(--or); }
@media (max-width: 600px) { :where(.css-app-base) .todo-item .todo-where { display: none; } }

/* L'Atelier dans la barre du haut (admin) : doré, c'est le raccourci de travail,
   pas une action de contexte comme la langue ou la sortie. */
:where(.css-app-base) .saas-sys-atelier { color: var(--or-clair); border: 1px solid rgba(212,175,55,.35); }
:where(.css-app-base) .saas-sys-atelier:hover { color: var(--or-clair); background: rgba(212,175,55,.12); }
:where(.css-app-base) .saas-sys-atelier.on { background: var(--or); color: var(--noir); border-color: var(--or); }
:where(.css-app-base) .saas-sys-atelier.on .ni { color: var(--noir); }

/* Rubriques dépliables du menu admin (i42) : même allure qu'une entrée du
   menu, un chevron qui pivote, et les pages en sous-menu décalé. */
:where(.css-app-base) .saas-nav > .saas-hub { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 46px; padding: 11px 14px; border: 0; background: transparent; text-align: left;
  color: var(--ivoire-2); font: inherit; font-size: .92rem; letter-spacing: .005em; border-radius: var(--r); cursor: pointer;
  transition: background var(--vite), color var(--vite); }
:where(.css-app-base) .saas-nav > .saas-hub:hover { color: var(--ivoire); background: rgba(201,169,98,.07); }
:where(.css-app-base) .saas-nav > .saas-hub.ici { color: var(--or-clair); font-weight: 500; }
:where(.css-app-base) .saas-hub-lbl { flex: 1 1 auto; }
:where(.css-app-base) .saas-hub-chev { color: var(--or); font-size: 1.35rem; line-height: 1; transition: transform var(--vite); }
:where(.css-app-base) .saas-hub[aria-expanded="true"] .saas-hub-chev { transform: rotate(90deg); }
:where(.css-app-base) .saas-hubnav[hidden] { display: none; }

/* ============================================================
   Collection premium sur l'étape Décor (i44) — le prix dit en grand,
   avec le calcul du paiement unique et les deux issues.
   ============================================================ */
:where(.css-app-base) .coll-prix-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: var(--pill); font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  color: var(--noir); background: var(--or); box-shadow: var(--sh-or); white-space: nowrap; }
:where(.css-app-base) .coll-prix { padding: 20px 22px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(212,175,55,.04));
  border: 1px solid rgba(212,175,55,.45); }
:where(.css-app-base) .coll-prix-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
:where(.css-app-base) .coll-prix-ico { font-size: 2rem; line-height: 1; }
:where(.css-app-base) .coll-prix-tete > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
:where(.css-app-base) .coll-prix-titre { font-family: var(--serif); font-size: 1.6rem; color: var(--or-clair); line-height: 1.15; }
:where(.css-app-base) .coll-prix-sous { color: var(--ivoire-2); font-size: .95rem; margin-top: 4px; }
:where(.css-app-base) .coll-prix-montant { font-family: var(--serif); font-size: 2.4rem; color: var(--or); line-height: 1; white-space: nowrap; }
:where(.css-app-base) .coll-prix-calc { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r); background: rgba(0,0,0,.25);
  font-size: 1rem; max-width: 520px; }
:where(.css-app-base) .coll-prix-calc > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--ivoire-2); }
:where(.css-app-base) .coll-prix-calc .coll-prix-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(212,175,55,.35);
  color: var(--or-clair); font-weight: 600; font-size: 1.1rem; }
:where(.css-app-base) .coll-prix-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
:where(.css-app-base) .coll-prix-actions .btn { min-height: 48px; font-size: .95rem; }
/* i292 — promo « collections » : le code à saisir, sous le prix */
:where(.css-app-base) .coll-promo { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(224,168,74,.45); }
:where(.css-app-base) .coll-promo-l { display: block; font-weight: 600; color: #ffd58a; margin-bottom: 8px; }
:where(.css-app-base) .coll-promo-row { display: flex; gap: 8px; flex-wrap: wrap; }
:where(.css-app-base) .coll-promo-row .form-control { max-width: 260px; }
@media (max-width: 600px) {
  :where(.css-app-base) .coll-prix-montant { font-size: 1.9rem; }
  :where(.css-app-base) .coll-prix-actions .btn { width: 100%; }
}

/* i63 — SIX ÉTAPES (sept avec Enfants) depuis l'arrivée de ③ Textes : sur un
   écran de bureau moyen, le fil passait sur deux lignes. On resserre les
   gélules plutôt que de couper le parcours en deux. */
@media (min-width: 901px) and (max-width: 1600px) {
  :where(.css-app-base) .ev-tete > .etapes li::after { width: 12px; flex-basis: 12px; }
  :where(.css-app-base) .ev-tete > .etapes .etape { padding: 8px 15px 8px 8px; gap: 8px; font-size: .92rem; min-height: 42px; }
  :where(.css-app-base) .ev-tete > .etapes .etape .n { width: 26px; height: 26px; flex-basis: 26px; }
}

/* i190 — l'encart « offre Pro » en bas du menu des opérateurs */
:where(.css-app-base) .saas-upsell {margin:12px 0 0;flex-shrink:0;padding:16px;border:1px solid rgba(212,175,55,.35);border-radius:14px;
  background:linear-gradient(160deg,rgba(212,175,55,.10),rgba(212,175,55,.02))}
:where(.css-app-base) .saas-upsell-ic {display:block;color:var(--or,#D4AF37);font-size:1.4rem;line-height:1;margin-bottom:8px}
:where(.css-app-base) .saas-upsell b {display:block;font-size:.88rem;color:var(--ivoire,#f5ebdd)}
:where(.css-app-base) .saas-upsell p {margin:6px 0 12px;font-size:.76rem;line-height:1.5;color:var(--ivoire-2,#cfc8b8)}
:where(.css-app-base) .saas-upsell a {display:block;text-align:center;padding:8px 10px;border-radius:10px;font-size:.8rem;font-weight:600;text-decoration:none;
  background:linear-gradient(135deg,#e9c770,#c9a24a);color:#1a1409}
:where(.css-app-base) .saas-upsell a:hover {filter:brightness(1.08);color:#1a1409}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/topbar
   Ancien fichier : saas-topbar.css
   Activée par css_use('app/topbar') dans : operator/_head.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BOOTH AI STUDIO — barre du haut de l'espace privé (i192) :
   recherche événements + collections, menu du compte. Complète lux-admin.css. */

:where(.css-app-topbar) .saas-top-title { max-width: 220px; flex-shrink: 1; }

/* ── Recherche ─────────────────────────────────────────────── */
:where(.css-app-topbar) .saas-search { position: relative; flex: 1 1 360px; max-width: 520px; margin: 0 auto 0 8px; display: flex; align-items: center; }
:where(.css-app-topbar) .saas-search > .ni { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--or); pointer-events: none; }
:where(.css-app-topbar) .saas-search > .ni svg { width: 18px; height: 18px; display: block; }
:where(.css-app-topbar) .saas-search input {
  width: 100%; height: 40px; padding: 0 70px 0 40px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); color: var(--ivoire);
  font-size: .86rem; outline: none; transition: border-color var(--vite), background var(--vite), box-shadow var(--vite);
}
:where(.css-app-topbar) .saas-search input::placeholder { color: var(--ivoire-2); opacity: .55; }
:where(.css-app-topbar) .saas-search input:focus { border-color: rgba(var(--gold-rgb),.55); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.12); }
:where(.css-app-topbar) .saas-search input::-webkit-search-cancel-button { filter: invert(.7); }
:where(.css-app-topbar) .saas-kbd { position: absolute; right: 12px; font: 500 .66rem/1 var(--sans); color: var(--ivoire-2);
  border: 1px solid var(--hair-soft); border-radius: 6px; padding: 4px 6px; opacity: .6; pointer-events: none; }
:where(.css-app-topbar) .saas-search input:focus ~ .saas-kbd { display: none; }

:where(.css-app-topbar) .saas-sr { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 130; max-height: min(70vh, 520px); overflow: auto;
  background: #15130f; border: 1px solid rgba(var(--gold-rgb),.28); border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
:where(.css-app-topbar) .saas-sr-g { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-clair); opacity: .8; padding: 8px 10px 4px; }
:where(.css-app-topbar) .saas-sr-i { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 10px; color: var(--ivoire); text-decoration: none; }
:where(.css-app-topbar) .saas-sr-i:hover,
:where(.css-app-topbar) .saas-sr-i.on { background: rgba(var(--gold-rgb),.1); color: #fff; }
:where(.css-app-topbar) .saas-sr-i img,
:where(.css-app-topbar) .saas-sr-ic { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,.05); }
:where(.css-app-topbar) .saas-sr-ic { display: grid; place-items: center; font-size: 1.05rem; }
:where(.css-app-topbar) .saas-sr-i b { display: block; font-weight: 500; font-size: .86rem; line-height: 1.25; }
:where(.css-app-topbar) .saas-sr-i small { display: block; font-size: .72rem; color: var(--ivoire-2); opacity: .75; }
:where(.css-app-topbar) .saas-sr-none { padding: 14px 10px; font-size: .84rem; color: var(--ivoire-2); }
:where(.css-app-topbar) .saas-sr-all { display: block; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--hair-soft); font-size: .8rem; color: var(--or); text-decoration: none; }
:where(.css-app-topbar) .saas-sr-all:hover,
:where(.css-app-topbar) .saas-sr-all.on { color: var(--or-clair); }

/* ── Menu du compte ────────────────────────────────────────── */
:where(.css-app-topbar) .saas-acct { position: relative; margin-left: 6px; }
:where(.css-app-topbar) .saas-acct > summary { list-style: none; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 4px;
  border-radius: 999px; border: 1px solid var(--hair-soft); cursor: pointer; color: var(--ivoire); transition: background var(--vite), border-color var(--vite); }
:where(.css-app-topbar) .saas-acct > summary::-webkit-details-marker { display: none; }
:where(.css-app-topbar) .saas-acct > summary:hover,
:where(.css-app-topbar) .saas-acct[open] > summary { background: rgba(var(--gold-rgb),.08); border-color: rgba(var(--gold-rgb),.4); }
:where(.css-app-topbar) .saas-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .9rem;
  color: #1a1408; background: linear-gradient(135deg, var(--or-clair), var(--or)); }
:where(.css-app-topbar) .saas-acct-nom { font-size: .84rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.css-app-topbar) .saas-acct-chev { font-size: .7rem; opacity: .6; }
:where(.css-app-topbar) .saas-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 130; min-width: 240px; padding: 8px;
  background: #15130f; border: 1px solid rgba(var(--gold-rgb),.28); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
:where(.css-app-topbar) .saas-acct-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--hair-soft); margin-bottom: 6px; }
:where(.css-app-topbar) .saas-acct-head b { display: block; font-weight: 500; color: var(--ivoire); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-topbar) .saas-acct-head small { display: block; color: var(--ivoire-2); opacity: .7; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-topbar) .saas-acct-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ivoire-2); font-size: .84rem; text-decoration: none; }
:where(.css-app-topbar) .saas-acct-menu a:hover { background: rgba(var(--gold-rgb),.09); color: var(--ivoire); }
:where(.css-app-topbar) .saas-acct-menu .ni { width: 18px; height: 18px; color: var(--or); display: grid; place-items: center; }
:where(.css-app-topbar) .saas-acct-menu .ni svg { width: 16px; height: 16px; }
:where(.css-app-topbar) .saas-acct-menu a.saas-acct-out { color: #d98c8c; margin-top: 4px; border-top: 1px solid var(--hair-soft); border-radius: 0 0 10px 10px; }
:where(.css-app-topbar) .saas-acct-menu a.saas-acct-out .ni { color: #d98c8c; }

:where(.css-app-topbar) [dir=rtl] .saas-search,
[dir=rtl]:where(.css-app-topbar) .saas-search { margin: 0 8px 0 auto; }
:where(.css-app-topbar) [dir=rtl] .saas-search > .ni,
[dir=rtl]:where(.css-app-topbar) .saas-search > .ni { left: auto; right: 13px; }
:where(.css-app-topbar) [dir=rtl] .saas-search input,
[dir=rtl]:where(.css-app-topbar) .saas-search input { padding: 0 40px 0 70px; }
:where(.css-app-topbar) [dir=rtl] .saas-kbd,
[dir=rtl]:where(.css-app-topbar) .saas-kbd { right: auto; left: 12px; }
:where(.css-app-topbar) [dir=rtl] .saas-acct-menu,
[dir=rtl]:where(.css-app-topbar) .saas-acct-menu { right: auto; left: 0; }

@media (max-width: 1280px) { :where(.css-app-topbar) .saas-top-title { display: none; } :where(.css-app-topbar) .saas-acct-nom { display: none; } }
@media (max-width: 900px) {
  :where(.css-app-topbar) .saas-search { flex: 1 1 auto; margin: 0; min-width: 0; }
  :where(.css-app-topbar) .saas-search input { padding-right: 12px; height: 38px; }
  :where(.css-app-topbar) .saas-kbd { display: none; }
  :where(.css-app-topbar) .saas-acct > summary { padding: 0 4px; }
  :where(.css-app-topbar) .saas-acct-chev { display: none; }
  :where(.css-app-topbar) .saas-sr { position: fixed; left: 10px; right: 10px; top: calc(var(--top-h) + 4px); }
}
:where(.css-app-topbar) .saas-acct-menu a.saas-acct-pub {color:var(--or-clair)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/world-sheets
   Ancien fichier : parts/World/sheets_view.css
   Activée par css_use('app/world-sheets') dans : src/World/sheets_view.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de src/World/sheets_view.php — sortis de la page (i102b). */

/* i278 : @page déplacé dans src/World/sheets_view.php */
:where(.css-app-world-sheets) *,
*:where(.css-app-world-sheets) { box-sizing: border-box; }
html:where(.css-app-world-sheets),
:where(.css-app-world-sheets) body { margin: 0; background: #e9e5df; font-family: Inter, system-ui, sans-serif; }
:where(.css-app-world-sheets) .bar {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px; background: var(--black-warm); color: var(--ivory);
}
:where(.css-app-world-sheets) .bar b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.3rem; margin-inline-end: auto; }
:where(.css-app-world-sheets) .bar button,
:where(.css-app-world-sheets) .bar a {
  min-height: 44px; padding: 0 20px; border-radius: 22px; border: 0; font: 600 .95rem Inter, sans-serif;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #1a1206; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
:where(.css-app-world-sheets) .bar a { background: transparent; color: var(--ivory); border: 1px solid rgba(var(--ivory-rgb),.35); }
:where(.css-app-world-sheets) .sheet {
  position: relative; width: 297mm; height: 210mm; margin: 12mm auto; background: #fff; overflow: hidden;
  box-shadow: 0 6px 30px rgba(0,0,0,.18); page-break-after: always; break-after: page;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
:where(.css-app-world-sheets) .sheet:last-child { page-break-after: auto; break-after: auto; }
:where(.css-app-world-sheets) .mk { position: absolute; display: block; }
:where(.css-app-world-sheets) .art { position: absolute; display: block; opacity: .82; }
:where(.css-app-world-sheets) .world { position: absolute; inset-inline-start: 40mm; inset-inline-end: 40mm; top: 9mm; text-align: center;
  font: 700 7mm/1 "Cormorant Garamond", Georgia, serif; color: #333; }
:where(.css-app-world-sheets) .rule { position: absolute; inset-inline-start: 40mm; inset-inline-end: 40mm; top: 18.5mm; text-align: center; font-size: 3mm; color: #888; }
:where(.css-app-world-sheets) .name { position: absolute; inset-inline-start: 36mm; top: 181mm; font: 700 9mm/1 "Cormorant Garamond", Georgia, serif; color: #222; }
:where(.css-app-world-sheets) .hint { position: absolute; inset-inline-start: 36mm; top: 193mm; font-size: 3.4mm; color: #666; }
:where(.css-app-world-sheets) .qr { position: absolute; background: #fff; }
:where(.css-app-world-sheets) .qr svg { display: block; width: 100%; height: 100%; }
@media print {
  html:where(.css-app-world-sheets),
:where(.css-app-world-sheets) body { background: #fff; }
  :where(.css-app-world-sheets) .bar { display: none; }
  :where(.css-app-world-sheets) .sheet { margin: 0; box-shadow: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-ia-solde
   Ancien fichier : pages/operator/_ia-solde.css
   Activée par css_use('app/operator-ia-solde') dans : operator/_ia-solde.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/_ia-solde.php — sortis de la page (i102b). */

:where(.css-app-operator-ia-solde) .saas-ia {position:relative}
:where(.css-app-operator-ia-solde) .saas-ia-btn {display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 10px;border-radius:99px;cursor:pointer;
  border:1px solid rgba(var(--gold-rgb),.55);background:linear-gradient(135deg,rgba(var(--gold-rgb),.16),rgba(231,166,255,.10));
  color:var(--ivoire);font-size:.86rem;position:relative;transition:box-shadow .2s,border-color .2s}
:where(.css-app-operator-ia-solde) .saas-ia-btn:hover {border-color:var(--or);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12)}
:where(.css-app-operator-ia-solde) .saas-ia-ic {width:19px;height:19px;filter:drop-shadow(0 0 5px rgba(var(--gold-light-rgb),.55))}
:where(.css-app-operator-ia-solde) .saas-ia-btn b {font-weight:600;font-variant-numeric:tabular-nums}
:where(.css-app-operator-ia-solde) .saas-ia-lbl {font-size:.66rem;letter-spacing:.16em;color:var(--or)}
:where(.css-app-operator-ia-solde) .saas-ia-dot {position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#e5534b;
  box-shadow:0 0 0 2px var(--black);animation:iaPouls 1.8s ease-in-out infinite}
:where(.css-app-operator-ia-solde) .saas-ia-btn.alerte {border-color:rgba(229,83,75,.7)}
@keyframes iaPouls{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){:where(.css-app-operator-ia-solde) .saas-ia-dot {animation:none}}
:where(.css-app-operator-ia-solde) .saas-ia-pan {position:absolute;right:0;top:calc(100% + 10px);width:320px;max-width:calc(100vw - 24px);z-index:130;
  background:#15130f;border:1px solid var(--hair);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.6);padding:14px}
:where(.css-app-operator-ia-solde) .saas-ia-tete {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;color:var(--ivoire-2);font-size:.82rem}
:where(.css-app-operator-ia-solde) .saas-ia-tete b {font-family:var(--serif);font-size:1.9rem;color:var(--or);font-weight:500}
:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-sous {font-size:.76rem;border-top:0;padding-top:0}
:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-sous b {font-weight:500;color:var(--or)}
:where(.css-app-operator-ia-solde) .saas-ia-lim {color:var(--or);font-size:.72rem;opacity:.85}
:where(.css-app-operator-ia-solde) .saas-ia-alerte {background:rgba(229,83,75,.12);border:1px solid rgba(229,83,75,.35);border-radius:10px;padding:8px 10px;
  font-size:.82rem;line-height:1.4;margin-bottom:8px;color:var(--ivoire)}
:where(.css-app-operator-ia-solde) .saas-ia-alerte a {color:var(--or);white-space:nowrap;margin-left:4px}
:where(.css-app-operator-ia-solde) .saas-ia-liste {list-style:none;margin:0;padding:0}
:where(.css-app-operator-ia-solde) .saas-ia-liste li {display:flex;align-items:center;gap:8px;padding:7px 2px;border-top:1px solid var(--hair-soft);font-size:.84rem}
:where(.css-app-operator-ia-solde) .saas-ia-liste li span {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ivoire-2)}
:where(.css-app-operator-ia-solde) .saas-ia-liste li b {font-variant-numeric:tabular-nums;color:var(--ivoire)}
:where(.css-app-operator-ia-solde) .saas-ia-liste li b.ia-vide {color:#e5534b}
:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-pro span {color:var(--or)}
:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-jauge {border-top:0;padding:0 2px 8px}
:where(.css-app-operator-ia-solde) .saas-ia-jauge i {display:block;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--gold),#E7A6FF);min-width:2px}
:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-jauge {background:none}
:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-jauge::before {content:"";}
:where(.css-app-operator-ia-solde) .saas-ia-liste li a {width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair);color:var(--or);
  text-decoration:none;font-size:.8rem}
:where(.css-app-operator-ia-solde) .saas-ia-note {font-size:.8rem;color:var(--ivoire-2);margin:8px 0 0}
:where(.css-app-operator-ia-solde) .saas-ia-pied {display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair-soft);font-size:.82rem;color:var(--or)}
:where(.css-app-operator-ia-solde) .saas-ia-toast {position:fixed;top:calc(var(--top-h, 60px) + 12px);right:18px;z-index:125;max-width:min(420px,calc(100vw - 24px));
  display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:12px;background:#1a1612;
  border:1px solid rgba(229,83,75,.55);box-shadow:0 12px 36px rgba(0,0,0,.55);font-size:.86rem;color:var(--ivoire)}
:where(.css-app-operator-ia-solde) .saas-ia-toast[hidden] {display:none}
:where(.css-app-operator-ia-solde) .saas-ia-toast a {color:var(--or);white-space:nowrap}
:where(.css-app-operator-ia-solde) .saas-ia-toast button {background:none;border:0;color:var(--ivoire-2);font-size:1rem;padding:0 2px;cursor:pointer}
@media (max-width:900px){
  :where(.css-app-operator-ia-solde) .saas-ia-btn {padding:0 10px 0 8px;height:34px}
  :where(.css-app-operator-ia-solde) .saas-ia-lbl {display:none}
  :where(.css-app-operator-ia-solde) .saas-ia-pan {position:fixed;right:12px;left:12px;width:auto;top:calc(var(--top-h, 60px) + 6px)}
}
/* i196 — trois réserves nommées : AI Paid / AI Pro / AI Plus */
:where(.css-app-operator-ia-solde) .saas-ia-tag {font-size:.58rem;font-weight:700;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.08);color:var(--ivoire-2);vertical-align:1px}
:where(.css-app-operator-ia-solde) .saas-ia-plus {font-size:.62rem;font-weight:500;color:#a9c0ff;opacity:.85}
:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-titre {padding-top:10px;border-bottom:0}:where(.css-app-operator-ia-solde) .saas-ia-liste li.saas-ia-titre span {white-space:normal;overflow:visible;font-size:.72rem;letter-spacing:.04em;opacity:.8}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-abonnements
   Ancien fichier : pages/admin/abonnements.css
   Activée par css_use('app/admin-abonnements') dans : admin/abonnements.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* admin/abonnements.php (i207) */
:where(.css-app-admin-abonnements) .ab-bloc {border:1px solid var(--hair-soft);border-radius:16px;padding:18px 20px;margin-bottom:18px;background:rgba(255,255,255,.02)}
:where(.css-app-admin-abonnements) .ab-bloc h2 {font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0 0 10px}
:where(.css-app-admin-abonnements) .ab-chips {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
:where(.css-app-admin-abonnements) .ab-chip {border:1px solid var(--or);color:var(--or);border-radius:99px;padding:3px 12px;font-size:.82rem}
:where(.css-app-admin-abonnements) .ab-apercu pre {white-space:pre-wrap;font-size:.8rem;background:var(--black);border:1px solid var(--hair-soft);border-radius:10px;padding:12px;color:var(--ivoire-2);max-height:420px;overflow:auto}
:where(.css-app-admin-abonnements) .ab-apercu summary {cursor:pointer;font-size:.85rem;color:var(--or)}
:where(.css-app-admin-abonnements) .ab-table td,
:where(.css-app-admin-abonnements) .ab-table th {vertical-align:top;font-size:.86rem}
:where(.css-app-admin-abonnements) .ab-sub {font-size:.74rem;color:var(--ivoire-2)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-avis
   Ancien fichier : pages/admin/avis.css
   Activée par css_use('app/admin-avis') dans : admin/avis.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/avis.php — sortis de la page (i102b). */

:where(.css-app-admin-avis) .av-kpis {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:1.8rem}
:where(.css-app-admin-avis) .av-kpi {border:1px solid var(--hair-soft);border-radius:12px;padding:13px 15px;background:rgba(var(--gold-soft-rgb),.04)}
:where(.css-app-admin-avis) .av-kpi b {font-family:var(--serif);font-size:1.8rem;line-height:1;color:var(--or);display:block}
:where(.css-app-admin-avis) .av-kpi small {display:block;font-size:.7rem;color:var(--muted,#aaa);margin-top:5px;line-height:1.35}
:where(.css-app-admin-avis) .av {border:1px solid var(--hair-soft);border-radius:14px;padding:16px 18px;margin-bottom:12px;
    background:rgba(255,255,255,.012)}
:where(.css-app-admin-avis) .av-h {display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin-bottom:10px;font-size:.82rem;color:var(--muted,#aaa)}
:where(.css-app-admin-avis) .av-note {font-size:1.3rem;line-height:1}
:where(.css-app-admin-avis) .av-ev {color:var(--ivoire-2);font-weight:600;font-size:.95rem}
:where(.css-app-admin-avis) .av-quand {margin-left:auto;font-variant-numeric:tabular-nums}
:where(.css-app-admin-avis) .av-txt {font-size:1.02rem;line-height:1.65;white-space:pre-wrap;margin:0;color:#efe9dc}
:where(.css-app-admin-avis) .av-rec {font-size:.7rem;letter-spacing:.04em;border:1px solid var(--hair-soft);border-radius:2rem;padding:3px 10px}
:where(.css-app-admin-avis) .av-rec.ok {color:var(--success-light);border-color:rgba(143,214,173,.4)}
:where(.css-app-admin-avis) .av-rec.att {color:var(--gold-warm);border-color:rgba(var(--gold-warm-rgb),.4)}
:where(.css-app-admin-avis) .av-rec.non {color:#e6a3a3;border-color:rgba(230,163,163,.4)}
:where(.css-app-admin-avis) .av-muettes {display:flex;flex-wrap:wrap;gap:8px}
:where(.css-app-admin-avis) .av-muette {border:1px solid var(--hair-soft);border-radius:10px;padding:8px 12px;font-size:.82rem;color:var(--muted,#aaa)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-categories-2
   Ancien fichier : pages/admin/categories-2.css
   Activée par css_use('app/admin-categories-2') dans : admin/categories.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Admin › Catégories (i271) — cartes des catégories et des collections.
   Mise en page seulement : couleurs, boutons, chips et cartes viennent de
   tokens.css et components.css. */

:where(.css-app-admin-categories-2) .kc-sec { margin: var(--space-6) 0 var(--space-7); }
:where(.css-app-admin-categories-2) .kc-sec-head { margin-bottom: var(--space-4); }
:where(.css-app-admin-categories-2) .kc-h { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-2xl); margin: 0 0 4px; }
:where(.css-app-admin-categories-2) .kc-help { margin: 0; color: var(--ivory-2); font-size: var(--text-sm); max-width: 80ch; }
:where(.css-app-admin-categories-2) .kc-busy { pointer-events: none; opacity: .55; transition: opacity var(--ease-fast); }

/* ── 1. Les catégories ─────────────────────────────────────── */
:where(.css-app-admin-categories-2) .kc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-3); }
:where(.css-app-admin-categories-2) .kc-cat {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 64px;
  padding: var(--space-3) var(--space-4); text-align: start; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ivory);
  transition: border-color var(--ease-fast), transform var(--ease-fast), background var(--ease-fast);
}
:where(.css-app-admin-categories-2) .kc-cat:hover { border-color: var(--gold); background: var(--surface-2); }
:where(.css-app-admin-categories-2) .kc-cat:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
:where(.css-app-admin-categories-2) .kc-cat[draggable="true"] { cursor: grab; }
:where(.css-app-admin-categories-2) .kc-cat.is-drag { opacity: .45; border-style: dashed; border-color: var(--gold); }
:where(.css-app-admin-categories-2) .kc-cat-e { font-size: 1.7rem; line-height: 1; width: 36px; text-align: center; flex: none; }
:where(.css-app-admin-categories-2) .kc-cat-t { display: flex; flex-direction: column; min-width: 0; }
:where(.css-app-admin-categories-2) .kc-cat-t b { font-weight: 500; font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-admin-categories-2) .kc-cat-t small { font-size: var(--text-2xs); color: var(--ivory-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-admin-categories-2) .kc-cat-b { position: absolute; top: 6px; inset-inline-end: 6px; font-size: .56rem; padding: .25em .6em; }
:where(.css-app-admin-categories-2) .kc-cat.is-off { opacity: .6; }
:where(.css-app-admin-categories-2) .kc-cat.is-repli { border-style: dashed; cursor: pointer; }
:where(.css-app-admin-categories-2) .kc-cat-new { border-style: dashed; border-color: var(--line); color: var(--gold); justify-content: flex-start; }
:where(.css-app-admin-categories-2) .kc-cat-new .kc-cat-e { font-size: 1.6rem; font-weight: 300; }
:where(.css-app-admin-categories-2) .kc-cat-new .kc-cat-t { font-weight: 500; }

/* ── 2. Les collections ────────────────────────────────────── */
:where(.css-app-admin-categories-2) .kc-tools { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
:where(.css-app-admin-categories-2) .kc-search { max-width: 420px; }
:where(.css-app-admin-categories-2) .kc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); }
:where(.css-app-admin-categories-2) .kc-col { display: flex; flex-direction: column; overflow: visible; }
:where(.css-app-admin-categories-2) .kc-col.is-off .kc-col-img img { filter: grayscale(.6) brightness(.75); }
:where(.css-app-admin-categories-2) .kc-col-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-3); }
:where(.css-app-admin-categories-2) .kc-col-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ease-slow); }
:where(.css-app-admin-categories-2) .kc-col:hover .kc-col-img img { transform: scale(1.04); }
:where(.css-app-admin-categories-2) .kc-col-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.6rem; }
:where(.css-app-admin-categories-2) .kc-col-unpub { position: absolute; top: 8px; inset-inline-start: 8px; }
:where(.css-app-admin-categories-2) .kc-col-body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
:where(.css-app-admin-categories-2) .kc-col-name { color: var(--ivory); text-decoration: none; font-weight: 500; font-size: var(--text-md); line-height: 1.3; }
:where(.css-app-admin-categories-2) .kc-col-name:hover { color: var(--gold-light); }

/* Les catégories d'une collection : toutes pareilles, « × » pour retirer, « + » pour ajouter */
:where(.css-app-admin-categories-2) .kc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:where(.css-app-admin-categories-2) .kc-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; min-height: 30px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(var(--gold-rgb), .10); color: var(--ivory); font-size: var(--text-xs); white-space: nowrap;
  transition: opacity var(--ease-fast);
}
:where(.css-app-admin-categories-2) .kc-chip.is-leaving { opacity: .3; }
:where(.css-app-admin-categories-2) .kc-x {
  width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; line-height: 24px; text-align: center;
  background: transparent; color: var(--gold); font-size: 1rem; cursor: pointer;
}
:where(.css-app-admin-categories-2) .kc-x:hover,
:where(.css-app-admin-categories-2) .kc-x:focus-visible { background: rgba(var(--status-off-rgb), .9); color: #fff; outline: none; }
:where(.css-app-admin-categories-2) .kc-plus {
  width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--gold); background: transparent;
  color: var(--gold); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background var(--ease-fast), color var(--ease-fast);
}
:where(.css-app-admin-categories-2) .kc-plus:hover,
:where(.css-app-admin-categories-2) .kc-plus[aria-expanded="true"] { background: var(--gold); color: var(--black-brown); border-style: solid; }
:where(.css-app-admin-categories-2) .kc-plus:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* Le choix des catégories à ajouter (sous la carte) */
:where(.css-app-admin-categories-2) .kc-col { position: relative; }
:where(.css-app-admin-categories-2) .kc-pop {
  position: absolute; z-index: 30; inset-inline: 8px; top: calc(100% - 10px);
  display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); box-shadow: var(--shadow-3);
}
:where(.css-app-admin-categories-2) .kc-pop .ui-chip.is-off { opacity: .6; }
:where(.css-app-admin-categories-2) .kc-pop-none { margin: 0; font-size: var(--text-xs); color: var(--ivory-2); }
:where(.css-app-admin-categories-2) .kc-err { margin: 0; color: var(--status-off); font-size: var(--text-xs); }
:where(.css-app-admin-categories-2) .kc-err:empty { display: none; }
:where(.css-app-admin-categories-2) .kc-none { margin-top: var(--space-4); }

/* ── La fiche d'une catégorie ──────────────────────────────── */
:where(.css-app-admin-categories-2) .kc-dlg { margin: auto; padding: 0; border: 0; background: transparent; color: var(--ivory); width: min(520px, calc(100vw - 32px)); max-width: none; }
:where(.css-app-admin-categories-2) .kc-dlg::backdrop { background: rgba(var(--black-rgb), .72); backdrop-filter: blur(3px); }
:where(.css-app-admin-categories-2) .kc-dlg .ui-card { box-shadow: var(--shadow-3); border-color: var(--line); }
:where(.css-app-admin-categories-2) .kc-row { display: flex; gap: var(--space-3); }
:where(.css-app-admin-categories-2) .kc-emoji-f { width: 92px; flex: none; }
:where(.css-app-admin-categories-2) .kc-emoji { text-align: center; font-size: 1.4rem; }
:where(.css-app-admin-categories-2) .kc-label-f { flex: 1; }
:where(.css-app-admin-categories-2) .kc-switch { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; cursor: pointer; font-size: var(--text-sm); }
:where(.css-app-admin-categories-2) .kc-switch input { width: 18px; height: 18px; accent-color: var(--gold); }
:where(.css-app-admin-categories-2) .kc-code { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--ivory-2); font-family: ui-monospace, Menlo, monospace; }
:where(.css-app-admin-categories-2) .kc-code:empty { display: none; }
:where(.css-app-admin-categories-2) .kc-foot { justify-content: flex-start; align-items: center; }
:where(.css-app-admin-categories-2) .kc-spacer { flex: 1; }

@media (max-width: 575px) {
  :where(.css-app-admin-categories-2) .kc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.css-app-admin-categories-2) .kc-cat { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  :where(.css-app-admin-categories-2) .kc-cat-e { font-size: 1.4rem; width: 28px; }
  :where(.css-app-admin-categories-2) .kc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  :where(.css-app-admin-categories-2) .kc-col-body { padding: var(--space-2) var(--space-3) var(--space-3); }
  :where(.css-app-admin-categories-2) .kc-col-name { font-size: var(--text-sm); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.css-app-admin-categories-2) .kc-cat,
:where(.css-app-admin-categories-2) .kc-col-img img,
:where(.css-app-admin-categories-2) .kc-chip { transition: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-codes
   Ancien fichier : pages/admin/codes.css
   Activée par css_use('app/admin-codes') dans : admin/codes.php, admin/licences.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/codes.php — sortis de la page (i102b). */

:where(.css-app-admin-codes) .cp-form {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}
:where(.css-app-admin-codes) .cp-form label {display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted,#aaa);margin-bottom:5px}
:where(.css-app-admin-codes) .cp-form input,
:where(.css-app-admin-codes) .cp-form select {width:100%}
:where(.css-app-admin-codes) .cp-aide {font-size:.74rem;color:var(--muted,#aaa);margin-top:5px;line-height:1.45}
:where(.css-app-admin-codes) .cp-t {width:100%;border-collapse:collapse;font-size:.86rem}
:where(.css-app-admin-codes) .cp-t th {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);
  text-align:left;padding:0 10px 9px;font-weight:500;white-space:nowrap}
:where(.css-app-admin-codes) .cp-t td {padding:12px 10px;border-top:1px solid var(--hair-soft);vertical-align:top}
:where(.css-app-admin-codes) .cp-code {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;letter-spacing:.06em;
  color:var(--or-clair);font-weight:600}
:where(.css-app-admin-codes) .cp-lib {font-size:.78rem;color:var(--muted,#b6b2a8)}
:where(.css-app-admin-codes) .cp-regles {font-size:.76rem;color:var(--ivoire-2)}
:where(.css-app-admin-codes) .cp-n {font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
:where(.css-app-admin-codes) .cp-vide {color:rgba(255,255,255,.18)}
:where(.css-app-admin-codes) .cp-badge {font-size:.68rem;letter-spacing:.05em;border-radius:2rem;padding:3px 11px;white-space:nowrap;border:1px solid}
:where(.css-app-admin-codes) .cp-badge.vert {color:var(--success-light);border-color:rgba(143,214,173,.45)}
:where(.css-app-admin-codes) .cp-badge.jaune {color:var(--gold-warm);border-color:rgba(var(--gold-warm-rgb),.45)}
:where(.css-app-admin-codes) .cp-badge.bleu {color:#9dc3e6;border-color:rgba(157,195,230,.4)}
:where(.css-app-admin-codes) .cp-badge.gris {color:var(--muted,#aaa);border-color:var(--hair-soft)}
:where(.css-app-admin-codes) .cp-danger {color:var(--danger);font-size:.72rem;margin-top:3px}
:where(.css-app-admin-codes) .cp-quand {font-size:.72rem;color:var(--muted,#aaa);white-space:nowrap}
:where(.css-app-admin-codes) .cp-mail {font-size:.74rem;color:var(--muted,#aaa);word-break:break-all}
:where(.css-app-admin-codes) .cp-note {font-size:.78rem;color:var(--muted,#aaa);margin-top:1.2rem;max-width:74ch;line-height:1.6}
:where(.css-app-admin-codes) .cp-edit > td {background:rgba(255,255,255,.02);padding:16px 12px}
:where(.css-app-admin-codes) .cp-edit .cp-form {margin-bottom:10px}
:where(.css-app-admin-codes) .cp-cases {display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:2px}
:where(.css-app-admin-codes) .cp-case {display:inline-flex;align-items:center;gap:7px;font-size:.88rem;text-transform:none;letter-spacing:0;color:inherit;margin:0}
:where(.css-app-admin-codes) .cp-portee > label {margin-bottom:6px}
:where(.css-app-admin-codes) .cp-fige {font-size:.74rem;color:var(--muted,#aaa);margin-top:4px}
:where(.css-app-admin-codes) .cp-actions {display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:900px){:where(.css-app-admin-codes) .cp-t,
:where(.css-app-admin-codes) .cp-t tbody,
:where(.css-app-admin-codes) .cp-t tr,
:where(.css-app-admin-codes) .cp-t td {display:block;width:100%}
  :where(.css-app-admin-codes) .cp-t thead {display:none}
  :where(.css-app-admin-codes) .cp-t tr {border-top:1px solid var(--hair-soft);padding:10px 0}
  :where(.css-app-admin-codes) .cp-t td {border:0;padding:3px 0}
  :where(.css-app-admin-codes) .cp-n {text-align:left}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-comptabilite
   Ancien fichier : pages/admin/comptabilite.css
   Activée par css_use('app/admin-comptabilite') dans : admin/comptabilite.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* admin/comptabilite.php — i282 : tableau de bord + sections (pièces, clients, outils).
   Mise en page seulement ; boutons, chips, statuts, cartes : Booth UI (core.css). */
:where(.css-app-admin-comptabilite) .ac-page { --ac-credit: var(--gold-warm); }
:where(.css-app-admin-comptabilite) .ac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
:where(.css-app-admin-comptabilite) .ac-head .ui-title { margin: .1em 0 0; font-size: var(--text-2xl); }
:where(.css-app-admin-comptabilite) .ac-flash { margin-bottom: 12px; }
:where(.css-app-admin-comptabilite) .ac-h2 { font: 500 var(--text-xl)/1.2 var(--font-serif); margin: 26px 0 12px; color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-note { margin: 10px 0 0; }

/* Période + onglets */
:where(.css-app-admin-comptabilite) .ac-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-1); margin-bottom: 12px; }
:where(.css-app-admin-comptabilite) .ac-range { display: flex; align-items: center; gap: 8px; color: var(--ivory-2); }
:where(.css-app-admin-comptabilite) .ac-range .ui-input { min-height: 36px; width: auto; padding: 0 10px; font-size: var(--text-sm); box-sizing: border-box; }
:where(.css-app-admin-comptabilite) .ac-tabs { margin-bottom: 18px; }
:where(.css-app-admin-comptabilite) .ac-tabs > a { text-decoration: none; }
:where(.css-app-admin-comptabilite) .ac-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: rgba(var(--ivory-rgb), .1); font-size: .7rem; font-weight: 700; }
:where(.css-app-admin-comptabilite) .ac-tabs > .is-active .ac-count { background: rgba(var(--black-rgb), .18); }

/* Chiffres clés */
:where(.css-app-admin-comptabilite) .ac-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
:where(.css-app-admin-comptabilite) .ac-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--surface-1); color: var(--ivory); text-decoration: none; transition: border-color var(--ease-fast), transform var(--ease-fast); }
:where(.css-app-admin-comptabilite) .ac-kpi--link:hover { border-color: var(--line); transform: translateY(-2px); color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-kpi__lbl { font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-2); }
:where(.css-app-admin-comptabilite) .ac-kpi__val { font: 500 1.6rem/1.15 var(--font-serif); color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-kpi__sub { font-size: var(--text-xs); color: var(--ivory-2); }
:where(.css-app-admin-comptabilite) .ac-kpi--hero { grid-column: span 2; grid-row: span 2; justify-content: center; gap: 8px; border-color: var(--line);
  background: radial-gradient(120% 140% at 0 0, rgba(var(--gold-rgb), .16), transparent 60%), var(--surface-1); }
:where(.css-app-admin-comptabilite) .ac-kpi--hero .ac-kpi__val { font-size: 3rem; color: var(--gold); }
:where(.css-app-admin-comptabilite) .ac-todo { justify-content: space-between; align-items: center; margin-bottom: 12px; text-decoration: none; color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-todo:hover { color: var(--ivory); border-color: var(--gold-warm); }
:where(.css-app-admin-comptabilite) .ac-todo__go { color: var(--gold); white-space: nowrap; font-weight: 600; }

/* Graphique + dernières pièces */
:where(.css-app-admin-comptabilite) .ac-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
:where(.css-app-admin-comptabilite) .ac-grid .ui-card__head { padding: 12px 18px; }
:where(.css-app-admin-comptabilite) .ac-grid .ui-card__title { font-size: var(--text-lg); }
:where(.css-app-admin-comptabilite) .ac-grid .ui-card__body { padding: 14px 18px; }
:where(.css-app-admin-comptabilite) .ac-chart { width: 100%; height: auto; display: block; }
:where(.css-app-admin-comptabilite) .ac-bar { fill: rgba(var(--ivory-rgb), .14); }
:where(.css-app-admin-comptabilite) .ac-bar.is-in { fill: var(--gold); }
:where(.css-app-admin-comptabilite) .ac-bar-v { font: 600 10px var(--font-sans); fill: var(--ivory-2); }
:where(.css-app-admin-comptabilite) .ac-bar-m { font: 500 10px var(--font-sans); fill: var(--ivory-2); }
:where(.css-app-admin-comptabilite) .ac-more { font-size: var(--text-xs); color: var(--gold); text-decoration: none; white-space: nowrap; }
:where(.css-app-admin-comptabilite) .ac-recent { display: flex; flex-direction: column; gap: 4px; }
:where(.css-app-admin-comptabilite) .ac-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); color: var(--ivory); text-decoration: none; }
:where(.css-app-admin-comptabilite) .ac-mini:hover { background: rgba(var(--gold-rgb), .06); color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-mini__txt { flex: 1; min-width: 0; }
:where(.css-app-admin-comptabilite) .ac-mini__txt b { display: block; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-admin-comptabilite) .ac-mini__txt small { font-size: var(--text-2xs); color: var(--ivory-2); }
:where(.css-app-admin-comptabilite) .ac-mini__amt { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
:where(.css-app-admin-comptabilite) .ac-mini__amt.is-credit { color: var(--ac-credit); }

/* Avatars (initiales) */
:where(.css-app-admin-comptabilite) .ac-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--gold-rgb), .14); color: var(--gold-light); font: 600 .78rem var(--font-sans); letter-spacing: .04em; }
:where(.css-app-admin-comptabilite) .ac-avatar.is-credit { background: rgba(var(--gold-warm-rgb), .14); color: var(--ac-credit); }
:where(.css-app-admin-comptabilite) .ac-avatar--lg { width: 46px; height: 46px; font-size: .95rem; }

/* Tuiles des sections */
:where(.css-app-admin-comptabilite) .ac-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
:where(.css-app-admin-comptabilite) .ac-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--surface-1); color: var(--ivory); text-decoration: none; transition: border-color var(--ease-fast), transform var(--ease-fast); }
:where(.css-app-admin-comptabilite) .ac-tile:hover { border-color: var(--line); transform: translateY(-2px); color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-tile__ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--gold-rgb), .1); color: var(--gold); }
:where(.css-app-admin-comptabilite) .ac-tile__ic svg { width: 20px; height: 20px; }
:where(.css-app-admin-comptabilite) .ac-tile b { font-size: var(--text-md); font-weight: 600; }
:where(.css-app-admin-comptabilite) .ac-tile small { font-size: var(--text-xs); color: var(--ivory-2); line-height: 1.5; }

/* Section « Factures & avoirs » : une ligne-carte par pièce */
:where(.css-app-admin-comptabilite) .ac-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
:where(.css-app-admin-comptabilite) .ac-search .ui-input { min-height: 38px; width: 280px; max-width: 100%; box-sizing: border-box; }
:where(.css-app-admin-comptabilite) .ac-list { display: flex; flex-direction: column; gap: 8px; }
:where(.css-app-admin-comptabilite) .ac-row { display: grid; grid-template-columns: 36px minmax(150px, 1fr) minmax(200px, 1.8fr) 150px 170px 40px; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-1); }
:where(.css-app-admin-comptabilite) .ac-row:hover { border-color: var(--line); }
:where(.css-app-admin-comptabilite) .ac-row.is-credit { box-shadow: inset 3px 0 0 var(--ac-credit); }
:where(.css-app-admin-comptabilite) .ac-row small { display: block; font-size: var(--text-2xs); color: var(--ivory-2); word-break: break-all; }
:where(.css-app-admin-comptabilite) .ac-row__who,
:where(.css-app-admin-comptabilite) .ac-row__what { min-width: 0; }
:where(.css-app-admin-comptabilite) .ac-row__who b { font-weight: 600; font-size: var(--text-sm); color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-row__who a { text-decoration: none; }
:where(.css-app-admin-comptabilite) .ac-row__what span { font-size: var(--text-sm); }
:where(.css-app-admin-comptabilite) .ac-row__what a { color: var(--gold); text-decoration: none; font-weight: 600; }
:where(.css-app-admin-comptabilite) .ac-row__tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
:where(.css-app-admin-comptabilite) .ac-row__amt { text-align: right; white-space: nowrap; }
:where(.css-app-admin-comptabilite) .ac-row__amt b { font: 600 var(--text-md) var(--font-sans); }
:where(.css-app-admin-comptabilite) .ac-row.is-credit .ac-row__amt b { color: var(--ac-credit); }
:where(.css-app-admin-comptabilite) .ac-badge-credit { border-color: rgba(var(--gold-warm-rgb), .55); color: var(--ac-credit); background: rgba(var(--gold-warm-rgb), .1); }
:where(.css-app-admin-comptabilite) .ac-menu { position: relative; }
:where(.css-app-admin-comptabilite) .ac-menu > summary { list-style: none; letter-spacing: .1em; }
:where(.css-app-admin-comptabilite) .ac-menu > summary::-webkit-details-marker { display: none; }
:where(.css-app-admin-comptabilite) .ac-menu__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); box-shadow: var(--shadow-2); }
:where(.css-app-admin-comptabilite) .ac-menu__pop a,
:where(.css-app-admin-comptabilite) .ac-menu__pop button:not(.ui-btn) { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--ivory); font-size: var(--text-sm); text-decoration: none; cursor: pointer; }
:where(.css-app-admin-comptabilite) .ac-menu__pop a:hover,
:where(.css-app-admin-comptabilite) .ac-menu__pop button:not(.ui-btn):hover { background: rgba(var(--gold-rgb), .08); }
:where(.css-app-admin-comptabilite) .ac-credit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
:where(.css-app-admin-comptabilite) .ac-credit b { font-size: var(--text-xs); color: var(--ac-credit); letter-spacing: .06em; }
:where(.css-app-admin-comptabilite) .ac-credit .ui-input { min-height: 34px; font-size: var(--text-sm); box-sizing: border-box; }

/* Section « Clients » */
:where(.css-app-admin-comptabilite) .ac-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
:where(.css-app-admin-comptabilite) .ac-client { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
:where(.css-app-admin-comptabilite) .ac-client__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
:where(.css-app-admin-comptabilite) .ac-client__id { min-width: 0; }
:where(.css-app-admin-comptabilite) .ac-client__id b { display: block; font-size: var(--text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-admin-comptabilite) .ac-client__id small { display: block; font-size: var(--text-xs); color: var(--ivory-2); word-break: break-all; }
:where(.css-app-admin-comptabilite) .ac-client__num { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-3); }
:where(.css-app-admin-comptabilite) .ac-client__num span { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-2); }
:where(.css-app-admin-comptabilite) .ac-client__num b { font-size: var(--text-sm); font-weight: 600; }
:where(.css-app-admin-comptabilite) .ac-client__num div:first-child b { color: var(--gold); }
:where(.css-app-admin-comptabilite) .ac-client .ui-badge { align-self: flex-start; }
:where(.css-app-admin-comptabilite) .ac-client__act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

/* Section « Outils & réglages » */
:where(.css-app-admin-comptabilite) .ac-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
:where(.css-app-admin-comptabilite) .ac-tools .ui-card__head { padding: 12px 18px; }
:where(.css-app-admin-comptabilite) .ac-tools .ui-card__title { font-size: var(--text-lg); }
:where(.css-app-admin-comptabilite) .ac-tools .ui-card__body { padding: 14px 18px; }
:where(.css-app-admin-comptabilite) .ac-tools__wide { grid-column: 1 / -1; }
:where(.css-app-admin-comptabilite) .ac-tools__per { font-size: var(--text-sm); color: var(--ivory); margin: 8px 0 12px; }
:where(.css-app-admin-comptabilite) .ac-catch { display: flex; gap: 8px; flex-wrap: wrap; }
:where(.css-app-admin-comptabilite) .ac-catch .ui-input { flex: 1 1 220px; min-height: 40px; box-sizing: border-box; }
:where(.css-app-admin-comptabilite) .ac-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0; }
:where(.css-app-admin-comptabilite) .ac-settings > div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-3); }
:where(.css-app-admin-comptabilite) .ac-settings dt { font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-2); font-weight: 500; }
:where(.css-app-admin-comptabilite) .ac-settings dd { margin: 4px 0 0; font-size: var(--text-sm); color: var(--ivory); }
:where(.css-app-admin-comptabilite) .ac-settings dd small { display: block; margin-top: 2px; font-size: .68rem; color: var(--ivory-2); font-family: ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 1100px) {
  :where(.css-app-admin-comptabilite) .ac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.css-app-admin-comptabilite) .ac-grid { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-admin-comptabilite) .ac-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  :where(.css-app-admin-comptabilite) .ac-row__what { grid-column: 2 / -1; grid-row: 2; }
  :where(.css-app-admin-comptabilite) .ac-row__tags { grid-column: 2; grid-row: 3; flex-direction: row; flex-wrap: wrap; }
  :where(.css-app-admin-comptabilite) .ac-row__amt { grid-column: 3; grid-row: 1; }
  :where(.css-app-admin-comptabilite) .ac-menu { grid-column: 3; grid-row: 3; justify-self: end; }
}
@media (max-width: 700px) {
  :where(.css-app-admin-comptabilite) .ac-kpis { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-admin-comptabilite) .ac-kpi--hero { grid-column: auto; grid-row: auto; }
  :where(.css-app-admin-comptabilite) .ac-tools { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-admin-comptabilite) .ac-period { flex-direction: column; align-items: stretch; }
  :where(.css-app-admin-comptabilite) .ac-range { flex-wrap: wrap; }
  :where(.css-app-admin-comptabilite) .ac-search .ui-input { width: 100%; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-decor-packs
   Ancien fichier : pages/admin/decor-packs.css
   Activée par css_use('app/admin-decor-packs') dans : admin/decor-packs.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/decor-packs.php — sortis de la page (i102b). */

:where(.css-app-admin-decor-packs) .dp-drop {border:1.5px dashed var(--hair-soft);border-radius:10px;padding:20px}
:where(.css-app-admin-decor-packs) .dp-m {font-size:.78rem;color:var(--muted,#8b8a96)}
:where(.css-app-admin-decor-packs) .dp-head {display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:30px 0 10px}
:where(.css-app-admin-decor-packs) .dp-head h2 {margin:0;font-size:1.04rem}
:where(.css-app-admin-decor-packs) .dp-head .line {flex:1;height:1px;background:var(--hair-soft)}
:where(.css-app-admin-decor-packs) .dp-pack.off {opacity:.45}
:where(.css-app-admin-decor-packs) .dp-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-top:8px}
:where(.css-app-admin-decor-packs) .dp-el {border:1px solid var(--hair-soft);border-radius:8px;overflow:hidden;background:var(--card,#16151d);
       display:flex;flex-direction:column}
/* Un damier derrière le motif : sans lui, on ne voit pas ce qui est transparent
   et un détourage raté passe inaperçu. */
:where(.css-app-admin-decor-packs) .dp-vue {background:
    linear-gradient(45deg,#6d6a78 25%,transparent 25%,transparent 75%,#6d6a78 75%),
    linear-gradient(45deg,#6d6a78 25%,#9a97a5 25%,#9a97a5 75%,#6d6a78 75%);
    background-size:14px 14px;background-position:0 0,7px 7px;
    display:grid;place-items:center;min-height:132px;padding:8px}
:where(.css-app-admin-decor-packs) .dp-vue img {max-width:100%;max-height:150px;display:block}
:where(.css-app-admin-decor-packs) .dp-b {padding:7px 9px;display:flex;flex-direction:column;gap:5px}
:where(.css-app-admin-decor-packs) .dp-b select {font-size:.76rem;padding:2px 4px}
:where(.css-app-admin-decor-packs) .dp-flag {font-size:.72rem;color:var(--gold-warm);line-height:1.3}
:where(.css-app-admin-decor-packs) .dp-el.gris {outline:1px solid rgba(var(--gold-warm-rgb),.5)}
:where(.css-app-admin-decor-packs) .dp-pal {display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
:where(.css-app-admin-decor-packs) .dp-pal i {width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid rgba(255,255,255,.14)}
:where(.css-app-admin-decor-packs) .dp-barre {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-evenements
   Ancien fichier : pages/admin/evenements.css
   Activée par css_use('app/admin-evenements') dans : admin/evenements.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/evenements.php — sortis de la page (i102b). */

:where(.css-app-admin-evenements) .ev-ent {display:flex;flex-wrap:wrap;gap:0;margin-bottom:1.5rem;border:1px solid var(--hair-soft);
  border-radius:10px;overflow:hidden}
:where(.css-app-admin-evenements) .ev-ent div {flex:1 1 120px;padding:12px 16px;border-right:1px solid var(--hair-soft)}
:where(.css-app-admin-evenements) .ev-ent div:last-child {border-right:0}
:where(.css-app-admin-evenements) .ev-ent b {display:block;font-family:var(--serif);font-size:1.5rem;color:var(--or);line-height:1.1;
  font-variant-numeric:tabular-nums}
:where(.css-app-admin-evenements) .ev-ent span {font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted,#aaa)}
:where(.css-app-admin-evenements) .ev-ent .chute {font-size:.66rem;color:var(--gold-warm);margin-left:6px;letter-spacing:0;text-transform:none}

:where(.css-app-admin-evenements) .ev-kpis {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.4rem}
:where(.css-app-admin-evenements) .ev-kpi {border:1px solid var(--hair-soft);border-radius:2rem;padding:8px 16px;font-size:.82rem;
  color:var(--ivoire-2);text-decoration:none;display:inline-flex;align-items:baseline;gap:7px;transition:.15s}
:where(.css-app-admin-evenements) .ev-kpi:hover {border-color:var(--or);color:var(--ivoire)}
:where(.css-app-admin-evenements) .ev-kpi.actif {border-color:var(--or);background:rgba(var(--gold-rgb),.1);color:var(--or-clair)}
:where(.css-app-admin-evenements) .ev-kpi b {font-family:var(--serif);font-size:1.15rem;color:var(--or)}

:where(.css-app-admin-evenements) .ev-t {width:100%;border-collapse:collapse;font-size:.86rem}
:where(.css-app-admin-evenements) .ev-t th {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);
  text-align:left;padding:0 10px 9px;font-weight:500;white-space:nowrap}
:where(.css-app-admin-evenements) .ev-t td {padding:12px 10px;border-top:1px solid var(--hair-soft);vertical-align:top}
:where(.css-app-admin-evenements) .ev-nom {color:var(--ivoire-2);font-weight:600}
:where(.css-app-admin-evenements) .ev-type {font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#aaa)}
:where(.css-app-admin-evenements) .ev-mail {font-size:.76rem;color:var(--muted,#aaa);word-break:break-all}
:where(.css-app-admin-evenements) .ev-n {font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
:where(.css-app-admin-evenements) .ev-vide {color:rgba(255,255,255,.18)}
:where(.css-app-admin-evenements) .ev-inconnu {color:var(--gold-warm);cursor:help}
:where(.css-app-admin-evenements) .ev-quand {font-size:.72rem;color:var(--muted,#aaa);white-space:nowrap}
:where(.css-app-admin-evenements) .ev-fete {font-variant-numeric:tabular-nums;white-space:nowrap}
:where(.css-app-admin-evenements) .ev-badge {font-size:.68rem;letter-spacing:.05em;border-radius:2rem;padding:3px 11px;white-space:nowrap;border:1px solid}
:where(.css-app-admin-evenements) .ev-badge.violet {color:#c4a7e7;border-color:rgba(196,167,231,.4)}
:where(.css-app-admin-evenements) .ev-badge.jaune {color:var(--gold-warm);border-color:rgba(var(--gold-warm-rgb),.45)}
:where(.css-app-admin-evenements) .ev-badge.vert {color:var(--success-light);border-color:rgba(143,214,173,.45)}
:where(.css-app-admin-evenements) .ev-badge.gris {color:var(--muted,#aaa);border-color:var(--hair-soft)}
:where(.css-app-admin-evenements) .ev-quoi {font-size:.78rem;color:var(--muted,#b6b2a8);max-width:30ch;line-height:1.45}
:where(.css-app-admin-evenements) .ev-act {display:flex;flex-direction:column;gap:4px;align-items:flex-start}
:where(.css-app-admin-evenements) .ev-act a {font-size:.74rem;color:var(--or-clair);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent}
:where(.css-app-admin-evenements) .ev-act a:hover {border-bottom-color:var(--or)}
:where(.css-app-admin-evenements) .ev-src {color:#9dc3e6;font-size:.72rem}
:where(.css-app-admin-evenements) .ev-alerte {color:var(--gold-warm)}
:where(.css-app-admin-evenements) .ev-note {font-size:.78rem;color:var(--muted,#aaa);margin-top:1.4rem;max-width:74ch;line-height:1.6}
@media(max-width:980px){:where(.css-app-admin-evenements) .ev-t,
:where(.css-app-admin-evenements) .ev-t tbody,
:where(.css-app-admin-evenements) .ev-t tr,
:where(.css-app-admin-evenements) .ev-t td {display:block;width:100%}
  :where(.css-app-admin-evenements) .ev-t thead {display:none}
  :where(.css-app-admin-evenements) .ev-t tr {border-top:1px solid var(--hair-soft);padding:10px 0}
  :where(.css-app-admin-evenements) .ev-t td {border:0;padding:3px 0}
  :where(.css-app-admin-evenements) .ev-n {text-align:left}}

/* i194 — collection de la fête */
:where(.css-app-admin-evenements) .ev-coll {display:inline-block;margin-top:3px;font-size:.72rem;color:var(--or);text-decoration:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.css-app-admin-evenements) .ev-coll:hover {text-decoration:underline}
:where(.css-app-admin-evenements) .ev-coll-vide {color:var(--muted,#888);opacity:.6}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-frame-blanks
   Ancien fichier : pages/admin/frame-blanks.css
   Activée par css_use('app/admin-frame-blanks') dans : admin/frame-blanks.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/frame-blanks.php — sortis de la page (i102b). */

:where(.css-app-admin-frame-blanks) .fb-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
:where(.css-app-admin-frame-blanks) .fb {border:1px solid var(--hair-soft);border-radius:8px;overflow:hidden;background:var(--card,#16151d);
    display:flex;flex-direction:column}
:where(.css-app-admin-frame-blanks) .fb.off {opacity:.42}
:where(.css-app-admin-frame-blanks) .fb-vue {position:relative;background:
    linear-gradient(45deg,#6d6a78 25%,transparent 25%,transparent 75%,#6d6a78 75%),
    linear-gradient(45deg,#6d6a78 25%,#9a97a5 25%,#9a97a5 75%,#6d6a78 75%);
    background-size:16px 16px;background-position:0 0,8px 8px;
    display:grid;place-items:center;min-height:170px;padding:10px}
:where(.css-app-admin-frame-blanks) .fb-vue img {max-width:100%;max-height:200px;display:block}
:where(.css-app-admin-frame-blanks) .fb-z {position:absolute;border:1.5px dashed var(--or);background:rgba(var(--gold-soft-rgb),.14);
      pointer-events:none;border-radius:2px}
:where(.css-app-admin-frame-blanks) .fb-b {padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
:where(.css-app-admin-frame-blanks) .fb-n {font-weight:600;font-size:.95rem;line-height:1.2}
:where(.css-app-admin-frame-blanks) .fb-m {font-size:.78rem;color:var(--muted,#8b8a96);font-variant-numeric:tabular-nums}
:where(.css-app-admin-frame-blanks) .fb-warn {font-size:.76rem;color:var(--gold-warm);line-height:1.35}
:where(.css-app-admin-frame-blanks) .fb-f {display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
:where(.css-app-admin-frame-blanks) .fb-f .form-control,
:where(.css-app-admin-frame-blanks) .fb-f .form-select {font-size:.8rem;padding:3px 6px}
:where(.css-app-admin-frame-blanks) .fb-head {display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:26px 0 12px}
:where(.css-app-admin-frame-blanks) .fb-head h2 {margin:0;font-size:1.02rem}
:where(.css-app-admin-frame-blanks) .fb-head .line {flex:1;height:1px;background:var(--hair-soft)}
:where(.css-app-admin-frame-blanks) .fb-drop {border:1.5px dashed var(--hair-soft);border-radius:10px;padding:20px;text-align:center}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-frame-creator
   Ancien fichier : pages/admin/frame-creator.css
   Activée par css_use('app/admin-frame-creator') dans : admin/frame-creator.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/frame-creator.php — sortis de la page (i102b). */

:where(.css-app-admin-frame-creator) .fc-wrap {display:grid;gap:14px;max-width:760px}
:where(.css-app-admin-frame-creator) .fc-fmt {border:1px solid var(--hair-soft);border-radius:8px;padding:12px 14px;display:grid;
        grid-template-columns:auto 1fr;gap:12px;align-items:start}
:where(.css-app-admin-frame-creator) .fc-fmt-libre {grid-template-columns:1fr}
:where(.css-app-admin-frame-creator) .fc-v span {position:relative}
:where(.css-app-admin-frame-creator) .fc-v-n {position:absolute;right:4px;bottom:3px;font-style:normal;font-size:.66rem;line-height:1;
        padding:2px 5px;border-radius:99px;background:rgba(0,0,0,.66);color:#e7e3d8}
:where(.css-app-admin-frame-creator) .fc-v input:checked + span .fc-v-n {background:var(--or);color:#1a1a1a}
:where(.css-app-admin-frame-creator) .fc-fmt.off {opacity:.45}
:where(.css-app-admin-frame-creator) .fc-fmt h3 {margin:0 0 2px;font-size:.95rem}
:where(.css-app-admin-frame-creator) .fc-m {font-size:.79rem;color:var(--muted,#8b8a96)}
:where(.css-app-admin-frame-creator) .fc-vierges {display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
:where(.css-app-admin-frame-creator) .fc-v {cursor:pointer}
:where(.css-app-admin-frame-creator) .fc-v input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-admin-frame-creator) .fc-v span {display:block;border:2px solid transparent;border-radius:6px;padding:3px;
           background:linear-gradient(45deg,#6d6a78 25%,transparent 25%,transparent 75%,#6d6a78 75%) 0 0/12px 12px,
                      linear-gradient(45deg,#6d6a78 25%,#9a97a5 25%,#9a97a5 75%,#6d6a78 75%) 6px 6px/12px 12px}
:where(.css-app-admin-frame-creator) .fc-v input:checked + span {border-color:var(--or)}
:where(.css-app-admin-frame-creator) .fc-v img {display:block;max-height:78px;max-width:78px}
:where(.css-app-admin-frame-creator) .fc-jeu {border:1px solid var(--hair-soft);border-radius:8px;padding:14px;margin-bottom:12px}
:where(.css-app-admin-frame-creator) .fc-jeu-h {display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
:where(.css-app-admin-frame-creator) .fc-jeu-h b {font-size:1rem}
:where(.css-app-admin-frame-creator) .fc-etat {font-size:.74rem;padding:2px 9px;border-radius:99px;border:1px solid currentColor}
:where(.css-app-admin-frame-creator) .fc-etat.queued {color:#8b8a96}:where(.css-app-admin-frame-creator) .fc-etat.processing {color:var(--gold-warm)}
:where(.css-app-admin-frame-creator) .fc-etat.done {color:var(--success)}:where(.css-app-admin-frame-creator) .fc-etat.failed {color:#dd8177}
:where(.css-app-admin-frame-creator) .fc-log {margin-top:10px;border-left:2px solid var(--hair-soft);padding-left:12px;display:grid;gap:4px}
:where(.css-app-admin-frame-creator) .fc-log div {font-size:.83rem}
:where(.css-app-admin-frame-creator) .fc-log .ko {color:#dd8177}
:where(.css-app-admin-frame-creator) .fc-brief {margin-top:10px;border:1px solid var(--hair-soft);border-radius:6px;padding:10px 12px}
:where(.css-app-admin-frame-creator) .fc-brief summary {cursor:pointer;font-size:.88rem;font-weight:600;display:flex;gap:10px;align-items:center}
:where(.css-app-admin-frame-creator) .fc-brief-f {margin-top:10px}
:where(.css-app-admin-frame-creator) .fc-brief .form-label {font-size:.78rem;margin-bottom:2px}
:where(.css-app-admin-frame-creator) .fc-brief textarea,
:where(.css-app-admin-frame-creator) .fc-brief input[type=text] {font-size:.84rem}
:where(.css-app-admin-frame-creator) .fc-rich {font-size:.72rem;font-weight:400;padding:1px 8px;border-radius:99px;border:1px solid currentColor}
:where(.css-app-admin-frame-creator) .fc-rich-bas {color:#dd8177}:where(.css-app-admin-frame-creator) .fc-rich-moyen {color:var(--gold-soft)}:where(.css-app-admin-frame-creator) .fc-rich-haut {color:var(--success)}
:where(.css-app-admin-frame-creator) .fc-warn {font-size:.82rem;color:var(--gold-warm);margin-top:8px;line-height:1.4}
:where(.css-app-admin-frame-creator) .fc-pal {display:flex;gap:5px;margin-top:9px}
:where(.css-app-admin-frame-creator) .fc-sw {width:30px;height:30px;border-radius:4px;border:1px solid rgba(255,255,255,.22)}
:where(.css-app-admin-frame-creator) .fc-cadres {display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
:where(.css-app-admin-frame-creator) .fc-cadres img {max-height:96px;border:1px solid var(--hair-soft);border-radius:4px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-frame-creator-2
   Ancien fichier : pages/admin/frame-creator-2.css
   Activée par css_use('app/admin-frame-creator-2') dans : admin/frame-creator.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/frame-creator.php (bloc 2) — sortis de la page (i102b). */

:where(.css-app-admin-frame-creator-2) #fc-rideau {position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:14px;
  background:rgba(10,9,14,.94);backdrop-filter:blur(3px);padding:24px;text-align:center}
/* SANS CETTE LIGNE, LA PAGE EST MORTE. L'attribut `hidden` vaut display:none,
   mais une règle qui fixe display l'emporte sur lui : le rideau restait donc
   invisible ET présent, étalé sur tout l'écran, avalant chaque clic du
   formulaire. On ne s'en aperçoit pas à l'œil — seulement en essayant de
   cliquer. */
:where(.css-app-admin-frame-creator-2) #fc-rideau[hidden] {display:none}
:where(.css-app-admin-frame-creator-2) .fcr-scene {position:relative;width:min(340px,80vw);height:120px}
:where(.css-app-admin-frame-creator-2) .fcr-sol {position:absolute;left:0;right:0;bottom:26px;height:1px;background:var(--hair-soft)}
:where(.css-app-admin-frame-creator-2) .fcr-cam {position:absolute;bottom:28px;font-size:34px;line-height:1;
  animation:fcr-court 3.4s cubic-bezier(.45,0,.55,1) infinite}
:where(.css-app-admin-frame-creator-2) .fcr-toiles {position:absolute;inset:0;display:flex;justify-content:space-around;align-items:flex-start;padding-top:6px}
:where(.css-app-admin-frame-creator-2) .fcr-toile {font-size:26px;opacity:.16;animation:fcr-pose 3.4s ease-in-out infinite}
:where(.css-app-admin-frame-creator-2) .fcr-toile:nth-child(2) {animation-delay:1.13s}
:where(.css-app-admin-frame-creator-2) .fcr-toile:nth-child(3) {animation-delay:2.26s}
:where(.css-app-admin-frame-creator-2) .fcr-txt {margin:0;font-size:1.02rem;color:#efece4;max-width:34ch}
:where(.css-app-admin-frame-creator-2) .fcr-sous {margin:0;font-size:.82rem;color:var(--muted,#8b8a96);font-variant-numeric:tabular-nums}

/* L'appareil fait l'aller-retour et se retourne au bout : il court, il ne
   glisse pas. Les trois toiles s'allument à son passage. */
@keyframes fcr-court{
  0%   {left:0;   transform:scaleX(1)  translateY(0)}
  12%  {          transform:scaleX(1)  translateY(-9px)}
  24%  {          transform:scaleX(1)  translateY(0)}
  46%  {left:calc(100% - 34px); transform:scaleX(1) translateY(0)}
  50%  {left:calc(100% - 34px); transform:scaleX(-1) translateY(0)}
  62%  {          transform:scaleX(-1) translateY(-9px)}
  74%  {          transform:scaleX(-1) translateY(0)}
  96%  {left:0;   transform:scaleX(-1) translateY(0)}
  100% {left:0;   transform:scaleX(1)  translateY(0)}
}
@keyframes fcr-pose{
  0%,55%,100%{opacity:.16;transform:scale(1)}
  22%        {opacity:1;  transform:scale(1.26)}
}
@media (prefers-reduced-motion:reduce){
  :where(.css-app-admin-frame-creator-2) .fcr-cam,
:where(.css-app-admin-frame-creator-2) .fcr-toile {animation:none}
  :where(.css-app-admin-frame-creator-2) .fcr-cam {left:calc(50% - 17px)}
  :where(.css-app-admin-frame-creator-2) .fcr-toile {opacity:.6}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-invitations
   Ancien fichier : pages/admin/invitations.css
   Activée par css_use('app/admin-invitations') dans : admin/invitations.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/invitations.php — sortis de la page (i102b). */

:where(.css-app-admin-invitations) .iv-lab {display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted,#aaa);margin-bottom:5px}
:where(.css-app-admin-invitations) .iv-aide {font-size:.74rem;color:var(--muted,#aaa);margin-top:5px;line-height:1.5}
:where(.css-app-admin-invitations) .iv-corps {width:100%;min-height:420px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.84rem;line-height:1.6;white-space:pre;overflow-wrap:normal;overflow-x:auto}
:where(.css-app-admin-invitations) .iv-liste {width:100%;min-height:140px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem}
:where(.css-app-admin-invitations) .iv-marq {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
:where(.css-app-admin-invitations) .iv-marq button {font-family:ui-monospace,monospace;font-size:.74rem;letter-spacing:.04em;
  background:rgba(var(--gold-soft-rgb),.1);border:1px solid rgba(var(--gold-soft-rgb),.3);color:var(--or-clair);
  border-radius:2rem;padding:3px 12px;cursor:pointer}
:where(.css-app-admin-invitations) .iv-marq button:hover {background:rgba(var(--gold-soft-rgb),.2)}
:where(.css-app-admin-invitations) .iv-ap {background:rgba(255,255,255,.02);border:1px solid var(--hair-soft);border-radius:10px;padding:18px 20px}
:where(.css-app-admin-invitations) .iv-ap-sujet {font-weight:600;color:var(--or-clair);margin-bottom:4px}
:where(.css-app-admin-invitations) .iv-ap-a {font-size:.76rem;color:var(--muted,#aaa);margin-bottom:14px}
:where(.css-app-admin-invitations) .iv-ap-corps {white-space:pre-wrap;font-size:.86rem;line-height:1.65;max-height:340px;overflow-y:auto;
  border-top:1px solid var(--hair-soft);padding-top:14px}
:where(.css-app-admin-invitations) .iv-chiffres {display:flex;gap:26px;flex-wrap:wrap;margin-bottom:14px}
:where(.css-app-admin-invitations) .iv-ch b {display:block;font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--or-clair)}
:where(.css-app-admin-invitations) .iv-ch span {font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted,#aaa)}
:where(.css-app-admin-invitations) .iv-t {width:100%;border-collapse:collapse;font-size:.86rem}
:where(.css-app-admin-invitations) .iv-t th {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);
  text-align:left;padding:0 10px 9px;font-weight:500;white-space:nowrap}
:where(.css-app-admin-invitations) .iv-t td {padding:11px 10px;border-top:1px solid var(--hair-soft);vertical-align:top}
:where(.css-app-admin-invitations) .iv-mail {word-break:break-all}
:where(.css-app-admin-invitations) .iv-quand {font-size:.72rem;color:var(--muted,#aaa);white-space:nowrap}
:where(.css-app-admin-invitations) .iv-badge {font-size:.68rem;letter-spacing:.05em;border-radius:2rem;padding:3px 11px;white-space:nowrap;border:1px solid}
:where(.css-app-admin-invitations) .iv-badge.vert {color:var(--success-light);border-color:rgba(143,214,173,.45)}
:where(.css-app-admin-invitations) .iv-badge.rouge {color:var(--danger);border-color:rgba(230,129,127,.45)}
:where(.css-app-admin-invitations) .iv-badge.gris {color:var(--muted,#aaa);border-color:var(--hair-soft)}
:where(.css-app-admin-invitations) .iv-note {font-size:.78rem;color:var(--muted,#aaa);margin-top:1rem;max-width:74ch;line-height:1.6}
@media(max-width:900px){:where(.css-app-admin-invitations) .iv-t,
:where(.css-app-admin-invitations) .iv-t tbody,
:where(.css-app-admin-invitations) .iv-t tr,
:where(.css-app-admin-invitations) .iv-t td {display:block;width:100%}
  :where(.css-app-admin-invitations) .iv-t thead {display:none}
  :where(.css-app-admin-invitations) .iv-t tr {border-top:1px solid var(--hair-soft);padding:10px 0}
  :where(.css-app-admin-invitations) .iv-t td {border:0;padding:3px 0}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-licences
   Ancien fichier : pages/admin/licences.css
   Activée par css_use('app/admin-licences') dans : admin/licences.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/licences.php (licences partenaires, 131).
   La page reprend les classes de codes.css (cp-*) ; ici, seulement le reste. */

:where(.css-app-admin-licences) .lic-totaux {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 1.4rem}
:where(.css-app-admin-licences) .lic-totaux > div {border:1px solid var(--hair-soft);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.02)}
:where(.css-app-admin-licences) .lic-totaux b {display:block;font-size:1.35rem;color:var(--or-clair);font-variant-numeric:tabular-nums}
:where(.css-app-admin-licences) .lic-totaux span {font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#aaa)}
:where(.css-app-admin-licences) .lic-payer {display:flex;gap:6px;align-items:center;flex-wrap:wrap}
:where(.css-app-admin-licences) .lic-payer input {max-width:130px}
:where(.css-app-admin-licences) .cp-code a {color:inherit;text-decoration:none}
:where(.css-app-admin-licences) .cp-code a:hover {text-decoration:underline}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-pipeline
   Ancien fichier : pages/admin/pipeline.css
   Activée par css_use('app/admin-pipeline') dans : admin/pipeline.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/pipeline.php — sortis de la page (i102b). */

:where(.css-app-admin-pipeline) .pl-kpis {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.4rem}
:where(.css-app-admin-pipeline) .pl-kpi {border:1px solid var(--hair-soft);border-radius:2rem;padding:8px 16px;font-size:.82rem;
  color:var(--ivoire-2);text-decoration:none;display:inline-flex;align-items:baseline;gap:7px;transition:.15s}
:where(.css-app-admin-pipeline) .pl-kpi:hover {border-color:var(--or);color:var(--ivoire)}
:where(.css-app-admin-pipeline) .pl-kpi.actif {border-color:var(--or);background:rgba(var(--gold-rgb),.1);color:var(--or-clair)}
:where(.css-app-admin-pipeline) .pl-kpi b {font-family:var(--serif);font-size:1.15rem;color:var(--or)}
:where(.css-app-admin-pipeline) .pl-t {width:100%;border-collapse:collapse;font-size:.86rem}
:where(.css-app-admin-pipeline) .pl-t th {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);
  text-align:left;padding:0 10px 9px;font-weight:500;white-space:nowrap}
:where(.css-app-admin-pipeline) .pl-t td {padding:12px 10px;border-top:1px solid var(--hair-soft);vertical-align:top}
:where(.css-app-admin-pipeline) .pl-qui {color:var(--ivoire-2);font-weight:600}
:where(.css-app-admin-pipeline) .pl-mail {font-size:.76rem;color:var(--muted,#aaa);word-break:break-all}
:where(.css-app-admin-pipeline) .pl-n {font-variant-numeric:tabular-nums;text-align:center}
:where(.css-app-admin-pipeline) .pl-vide {color:rgba(255,255,255,.18)}
:where(.css-app-admin-pipeline) .pl-ok {color:var(--success-light)}
:where(.css-app-admin-pipeline) .pl-ev {font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-admin-pipeline) .pl-quand {font-size:.72rem;color:var(--muted,#aaa);white-space:nowrap}
:where(.css-app-admin-pipeline) .pl-badge {font-size:.68rem;letter-spacing:.05em;border-radius:2rem;padding:3px 11px;white-space:nowrap;border:1px solid}
:where(.css-app-admin-pipeline) .pl-badge.bleu {color:#9dc3e6;border-color:rgba(157,195,230,.4)}
:where(.css-app-admin-pipeline) .pl-badge.violet {color:#c4a7e7;border-color:rgba(196,167,231,.4)}
:where(.css-app-admin-pipeline) .pl-badge.jaune {color:var(--gold-warm);border-color:rgba(var(--gold-warm-rgb),.45)}
:where(.css-app-admin-pipeline) .pl-badge.vert {color:var(--success-light);border-color:rgba(143,214,173,.45)}
:where(.css-app-admin-pipeline) .pl-badge.gris {color:var(--muted,#aaa);border-color:var(--hair-soft)}
:where(.css-app-admin-pipeline) .pl-quoi {font-size:.78rem;color:var(--muted,#b6b2a8);max-width:34ch;line-height:1.45}
:where(.css-app-admin-pipeline) .pl-act {display:flex;flex-direction:column;gap:4px;align-items:flex-start}
:where(.css-app-admin-pipeline) .pl-act a {font-size:.74rem;color:var(--or-clair);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent}
:where(.css-app-admin-pipeline) .pl-act a:hover {border-bottom-color:var(--or)}
:where(.css-app-admin-pipeline) .pl-neuf {font-size:.68rem;color:var(--gold-warm)}
:where(.css-app-admin-pipeline) .pl-src {color:#9dc3e6}
@media(max-width:900px){:where(.css-app-admin-pipeline) .pl-t,
:where(.css-app-admin-pipeline) .pl-t tbody,
:where(.css-app-admin-pipeline) .pl-t tr,
:where(.css-app-admin-pipeline) .pl-t td {display:block;width:100%}
  :where(.css-app-admin-pipeline) .pl-t thead {display:none}
  :where(.css-app-admin-pipeline) .pl-t tr {border-top:1px solid var(--hair-soft);padding:10px 0}
  :where(.css-app-admin-pipeline) .pl-t td {border:0;padding:3px 0}
  :where(.css-app-admin-pipeline) .pl-n {text-align:left}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-revenus
   Ancien fichier : pages/admin/revenus.css
   Activée par css_use('app/admin-revenus') dans : admin/revenus.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BOOTH AI STUDIO — Admin › Revenus & marge, en tableau de bord (i178) */

:where(.css-app-admin-revenus) .rv-actions {display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}

/* Le crédit API, en une ligne cliquable */
:where(.css-app-admin-revenus) .rv-credit {display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:12px 18px;margin-bottom:18px;border-radius:14px;
  border:1px solid var(--al,#8ff0c8);background:rgba(255,255,255,.02);color:var(--ivoire);text-decoration:none}
:where(.css-app-admin-revenus) .rv-credit b {font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);font-weight:600}
:where(.css-app-admin-revenus) .rv-credit span {font-family:var(--serif);font-size:1.4rem;color:var(--al,#8ff0c8)}
:where(.css-app-admin-revenus) .rv-credit em {margin-left:auto;font-style:normal;font-size:.85rem;color:var(--al,#8ff0c8)}
:where(.css-app-admin-revenus) .rv-credit:hover {background:rgba(255,255,255,.05)}

/* Les graphiques */
:where(.css-app-admin-revenus) .rv-dash {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
:where(.css-app-admin-revenus) .rv-card.rv-large {grid-column:1 / -1}
:where(.css-app-admin-revenus) .rv-card-h {display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
:where(.css-app-admin-revenus) .rv-card-h h3 {font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:0;color:var(--ivoire)}
:where(.css-app-admin-revenus) .rv-card-h a {font-size:.8rem;color:var(--or);text-decoration:none;white-space:nowrap}
:where(.css-app-admin-revenus) .rv-card-h a:hover {text-decoration:underline}
:where(.css-app-admin-revenus) .rv-chart {width:100%;height:auto;display:block}
:where(.css-app-admin-revenus) .rv-chart .rv-grid {stroke:rgba(255,255,255,.07);stroke-width:1}
:where(.css-app-admin-revenus) .rv-chart .rv-zero {stroke:rgba(255,255,255,.25)}
:where(.css-app-admin-revenus) .rv-chart .rv-ax {fill:var(--ivoire-2);font-size:10px;font-family:var(--sans)}
:where(.css-app-admin-revenus) .rv-chart rect:hover {opacity:.8}
:where(.css-app-admin-revenus) .rv-leg {display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:.78rem;color:var(--ivoire-2)}
:where(.css-app-admin-revenus) .rv-leg i {display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

:where(.css-app-admin-revenus) .rv-hbars {display:flex;flex-direction:column;gap:10px;margin-top:6px}
:where(.css-app-admin-revenus) .rv-hbar {display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr auto;gap:10px;align-items:center;font-size:.85rem}
:where(.css-app-admin-revenus) .rv-hl {color:var(--ivoire)}
:where(.css-app-admin-revenus) .rv-ht {height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
:where(.css-app-admin-revenus) .rv-ht i {display:block;height:100%;background:#f2a5a3;border-radius:6px}
:where(.css-app-admin-revenus) .rv-hv {color:var(--ivoire-2);white-space:nowrap}

/* Les sections détaillées, repliées */
:where(.css-app-admin-revenus) .rv-details-h {font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:8px 0 12px}
:where(.css-app-admin-revenus) .rv-bloc {border:1px solid var(--hair-soft);border-radius:14px;margin-bottom:12px;background:rgba(255,255,255,.015)}
:where(.css-app-admin-revenus) .rv-bloc > summary {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer;list-style:none}
:where(.css-app-admin-revenus) .rv-bloc > summary::-webkit-details-marker {display:none}
:where(.css-app-admin-revenus) .rv-bloc > summary h2 {font-family:var(--serif);font-weight:500;font-size:1.2rem;margin:0}
:where(.css-app-admin-revenus) .rv-plus {font-size:.78rem;letter-spacing:.08em;color:var(--or);white-space:nowrap}
:where(.css-app-admin-revenus) .rv-plus::after {content:" ▾";display:inline-block;transition:transform .2s}
:where(.css-app-admin-revenus) .rv-bloc[open] > summary .rv-plus::after {transform:rotate(180deg)}
:where(.css-app-admin-revenus) .rv-bloc[open] > summary {border-bottom:1px solid var(--hair-soft)}
:where(.css-app-admin-revenus) .rv-bloc-in {padding:16px 18px 6px}
:where(.css-app-admin-revenus) .rv-bloc:target {border-color:var(--or)}

@media (max-width:900px){
  :where(.css-app-admin-revenus) .rv-dash {grid-template-columns:1fr}
  :where(.css-app-admin-revenus) .rv-hbar {grid-template-columns:1fr auto;grid-template-areas:"l v" "t t"}
  :where(.css-app-admin-revenus) .rv-hl {grid-area:l}:where(.css-app-admin-revenus) .rv-hv {grid-area:v}:where(.css-app-admin-revenus) .rv-ht {grid-area:t}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-serie-edit
   Ancien fichier : pages/admin/serie-edit.css
   Activée par css_use('app/admin-serie-edit') dans : admin/serie-edit.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/serie-edit.php — sortis de la page (i102b). */

:where(.css-app-admin-serie-edit) .serie-frame-link .sf-edit-hint {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(var(--gold-soft-rgb),.94);color:#141210;font-size:.72rem;font-weight:600;padding:.2rem .6rem;
  border-radius:2rem;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5)}
:where(.css-app-admin-serie-edit) .serie-frame-link:hover .sf-edit-hint {opacity:1}
:where(.css-app-admin-serie-edit) .serie-frame-link:hover .sf-vue {outline:2px solid var(--or);outline-offset:-2px}
:where(.css-app-admin-serie-edit) .dp-grille {display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:330px;overflow:auto;padding:2px}
:where(.css-app-admin-serie-edit) .dp-tuile {position:relative;display:block;border:1px solid #333;border-radius:.5rem;padding:6px;cursor:pointer;text-align:center;background:#14141c}
:where(.css-app-admin-serie-edit) .dp-tuile:hover {border-color:#555}
:where(.css-app-admin-serie-edit) .dp-tuile.on {border-color:var(--or);box-shadow:0 0 0 1px var(--or) inset}
:where(.css-app-admin-serie-edit) .dp-tuile input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-admin-serie-edit) .dp-tuile b {display:block;font-size:.7rem;font-weight:500;margin-top:4px}
:where(.css-app-admin-serie-edit) .dp-tuile i {display:block;font-size:.64rem;font-style:normal;color:#8b8a96;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.css-app-admin-serie-edit) .dp-vue {width:100%;aspect-ratio:1;object-fit:contain;border-radius:.35rem;display:block;
        background:repeating-conic-gradient(#2a2a33 0 25%,#20202a 0 50%) 50%/12px 12px}
:where(.css-app-admin-serie-edit) canvas.dp-vue {display:none}
:where(.css-app-admin-serie-edit) canvas.dp-vue.fp-pret {display:block}
:where(.css-app-admin-serie-edit) canvas.dp-vue.fp-pret + .dp-brut {display:none}
/* Le sélecteur suit la bascule « cadre seul » de la grille : deux
   vignettes du même cadre ne doivent pas se contredire. */
:where(.css-app-admin-serie-edit) body.sf-mode-brut canvas.dp-vue.fp-pret {display:none}
:where(.css-app-admin-serie-edit) body.sf-mode-brut canvas.dp-vue.fp-pret + .dp-brut {display:block}
:where(.css-app-admin-serie-edit) .dp-auto {display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:.35rem;background:#1b1b24;color:var(--or);font-size:1.4rem}
:where(.css-app-admin-serie-edit) .sf-vue {width:100%;aspect-ratio:1;object-fit:contain;border-radius:.4rem;cursor:pointer;
        transition:outline .15s;display:block;
        background:repeating-conic-gradient(#2a2a33 0 25%,#20202a 0 50%) 50%/14px 14px}
/* Le canvas prend la place du PNG dès qu'il est composé ; avant ça,
   c'est le PNG qu'on voit, pas un trou. */
/* Tant que le canvas n'est pas peint, c'est le PNG qu'on voit : on
   ne laisse jamais un trou blanc à la place d'une vignette. */
:where(.css-app-admin-serie-edit) canvas.sf-vue {display:none}
:where(.css-app-admin-serie-edit) canvas.sf-vue.fp-pret {display:block}
:where(.css-app-admin-serie-edit) canvas.sf-vue.fp-pret + .sf-brut {display:none}
/* Et en mode « cadre seul », l'inverse — mais il faut être PLUS
   SPÉCIFIQUE que la règle d'adjacence ci-dessus, sinon elle gagne et
   l'on se retrouve avec les deux vues cachées : un rectangle vide à
   la place de chaque vignette. Un sélecteur qui perd une bataille de
   spécificité ne lève aucune erreur, il ne fait simplement rien. */
:where(.css-app-admin-serie-edit) body.sf-mode-brut canvas.sf-vue.fp-pret {display:none}
:where(.css-app-admin-serie-edit) body.sf-mode-brut canvas.sf-vue.fp-pret + .sf-brut {display:block}
:where(.css-app-admin-serie-edit) body.sf-mode-brut .sf-brut {display:block}
:where(.css-app-admin-serie-edit) .sf-etat {display:flex;gap:6px;margin-top:3px;font-size:.68rem;line-height:1}
:where(.css-app-admin-serie-edit) .sf-etat span {padding:2px 6px;border-radius:99px;white-space:nowrap}
:where(.css-app-admin-serie-edit) .sf-ok {background:rgba(120,190,120,.14);color:#9ad39a}
:where(.css-app-admin-serie-edit) .sf-ko {background:rgba(var(--gold-warm-rgb),.16);color:var(--gold-warm)}
:where(.css-app-admin-serie-edit) .sf-demo {position:relative;display:inline-block;line-height:0}
:where(.css-app-admin-serie-edit) .sf-demo img {width:56px;height:42px;object-fit:cover;border-radius:.3rem;border:1px solid #3a3a45}
:where(.css-app-admin-serie-edit) .sf-demo em {position:absolute;left:2px;bottom:2px;font-style:normal;font-size:.62rem;line-height:1;
            padding:1px 4px;border-radius:99px;background:rgba(0,0,0,.72);color:var(--gold-pale)}
:where(.css-app-admin-serie-edit) .sf-demo form {position:absolute;top:-6px;right:-6px}
:where(.css-app-admin-serie-edit) .sf-demo button {border:0;background:#2a2a33;color:#e0a0a0;border-radius:50%;width:18px;height:18px;
                font-size:.65rem;line-height:1;cursor:pointer;padding:0}

/* ── LA GRILLE DE TRAVAIL ─────────────────────────────────────
   PLUS DENSE, PARCE QU'ON VIENT CHERCHER. Les vignettes carrées de
   220 px montraient six cadres par écran ; sur une collection qui
   en compte quinze, trouver le bon demandait de faire défiler et de
   reconnaître une image au lieu de lire un nom. */
:where(.css-app-admin-serie-edit) .sf-cherche {display:flex;gap:8px;align-items:center;flex-wrap:wrap;
            padding:0 16px 10px}
:where(.css-app-admin-serie-edit) .sf-cherche input {max-width:280px}
:where(.css-app-admin-serie-edit) .sf-cherche .sf-compte {font-size:.76rem;color:var(--ivoire-2)}
/* LE NOM, enfin. Une vignette sans nom ne se cherche pas : on la
   reconnaît ou on ne la reconnaît pas, et sur quinze cadres d'une
   même collection on ne la reconnaît pas. */
:where(.css-app-admin-serie-edit) .sf-nom {font-size:.76rem;line-height:1.25;color:var(--ivoire);
        margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.css-app-admin-serie-edit) .sf-carte[hidden] {display:none}
:where(.css-app-admin-serie-edit) .sf-colonne[hidden] {display:none}
:where(.css-app-admin-serie-edit) .sf-rien {padding:26px 16px;text-align:center;color:var(--ivoire-2);
         border:1px dashed var(--hair-soft);border-radius:.6rem;margin:0 16px}

/* Catégories en plus (i105) : une case cochée doit se voir d'un coup d'œil. */
:where(.css-app-admin-serie-edit) #themes-plus .btn { text-transform: none; letter-spacing: .02em; font-weight: 500; }
:where(.css-app-admin-serie-edit) #themes-plus .btn-check:checked + .btn { background: var(--or) !important; border-color: var(--or) !important; color: #14110c !important; }
:where(.css-app-admin-serie-edit) #themes-plus .btn-check:disabled + .btn { opacity: .35; }
/* i250 — l'auteur d'une collection venue d'un organisateur */
:where(.css-app-admin-serie-edit) .se-author {display:flex;gap:12px;align-items:flex-start;padding:10px 14px;margin:0 0 16px;border:1px solid var(--hair-soft);border-radius:12px;background:rgba(var(--gold-soft-rgb),.06);font-size:.9rem}
:where(.css-app-admin-serie-edit) .se-author-ico {font-size:1.4rem;line-height:1}
:where(.css-app-admin-serie-edit) .se-author a {color:var(--or)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-site-images
   Ancien fichier : pages/admin/site-images.css
   Activée par css_use('app/admin-site-images') dans : admin/site-images.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/site-images.php — sortis de la page (i102b). */

:where(.css-app-admin-site-images) .si-grille {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px}
:where(.css-app-admin-site-images) .si-carte {border:1px solid var(--hair-soft);border-radius:14px;overflow:hidden;background:#12121a}
:where(.css-app-admin-site-images) .si-vue {aspect-ratio:3/2;background:repeating-conic-gradient(#20202a 0 25%,#191922 0 50%) 50%/16px 16px}
:where(.css-app-admin-site-images) .si-vue img {width:100%;height:100%;object-fit:cover;display:block}
:where(.css-app-admin-site-images) .si-corps {padding:12px 14px}
:where(.css-app-admin-site-images) .si-nom {font-size:.9rem;color:var(--ivoire)}
:where(.css-app-admin-site-images) .si-m {font-size:.74rem;color:#8b8a96;margin-top:2px}
:where(.css-app-admin-site-images) .si-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
:where(.css-app-admin-site-images) .si-actions input[type=file] {font-size:.74rem;max-width:170px}
:where(.css-app-admin-site-images) .si-perso {display:inline-block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--or);border:1px solid var(--or);border-radius:2rem;padding:.1rem .5rem;margin-left:8px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-styleguide
   Ancien fichier : pages/admin/styleguide.css
   Activée par css_use('app/admin-styleguide') dans : admin/styleguide.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Charte graphique (admin/styleguide.php) — mise en page de la page seulement :
   tout ce qu'elle montre vient de tokens.css et components.css. */
:where(.css-app-admin-styleguide) .sg { max-width: 1180px; }
:where(.css-app-admin-styleguide) .sg code { font-size: .86em; color: var(--gold-light); }
:where(.css-app-admin-styleguide) .sg-toc { margin: var(--space-5) 0 var(--space-6); }
:where(.css-app-admin-styleguide) .sg-h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--line-soft); scroll-margin-top: 90px; }
:where(.css-app-admin-styleguide) .sg-h2 small { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ivory-2); margin-inline-start: var(--space-3); }
:where(.css-app-admin-styleguide) .sg-h3 { font-size: var(--text-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: var(--space-5) 0 var(--space-3); }
:where(.css-app-admin-styleguide) .sg-help { color: var(--ivory-2); max-width: 75ch; }

:where(.css-app-admin-styleguide) .sg-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
:where(.css-app-admin-styleguide) .sg-tok { display: flex; flex-direction: column; gap: 4px; text-align: start; padding: var(--space-3); cursor: copy;
  border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ivory); }
:where(.css-app-admin-styleguide) .sg-tok:hover { border-color: var(--line); }
:where(.css-app-admin-styleguide) .sg-tok.is-copied { border-color: var(--status-on); }
:where(.css-app-admin-styleguide) .sg-tok code { font-size: .78rem; }
:where(.css-app-admin-styleguide) .sg-tok small { font-size: .7rem; color: var(--ivory-2); word-break: break-all; }
:where(.css-app-admin-styleguide) .sg-tok-demo { display: grid; place-items: center; height: 54px; border-radius: var(--radius-sm); margin-bottom: 4px;
  background: rgba(var(--ivory-rgb), .04); font-family: var(--font-serif); color: var(--ivory); overflow: hidden; }
:where(.css-app-admin-styleguide) .sg-tok--color .sg-tok-demo { background: var(--v); border: 1px solid var(--line-soft); }
:where(.css-app-admin-styleguide) .sg-tok--radius .sg-tok-demo { border: 2px solid var(--gold); border-radius: var(--v); width: 70%; justify-self: center; }
:where(.css-app-admin-styleguide) .sg-tok--shadow .sg-tok-demo { box-shadow: var(--v); background: var(--surface-2); margin: 6px 10px 12px; }
:where(.css-app-admin-styleguide) .sg-tok--text .sg-tok-demo { font-size: var(--v); }
:where(.css-app-admin-styleguide) .sg-tok--space .sg-tok-demo { background: none; justify-items: start; }
:where(.css-app-admin-styleguide) .sg-tok--space .sg-tok-demo::before { content: ""; width: var(--v); height: 14px; background: var(--gold); border-radius: 2px; }
:where(.css-app-admin-styleguide) .sg-tok--font .sg-tok-demo { font-family: var(--v); font-size: 1.4rem; }

:where(.css-app-admin-styleguide) .sg-comp { margin-bottom: var(--space-6); }
:where(.css-app-admin-styleguide) .sg-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--black); }
:where(.css-app-admin-styleguide) .sg-demo > .ui-notice { flex: 1 1 100%; }
:where(.css-app-admin-styleguide) .sg-code { position: relative; border: 1px solid var(--line-soft); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface-3); }
:where(.css-app-admin-styleguide) .sg-code pre { margin: 0; padding: var(--space-4) 84px var(--space-4) var(--space-5); overflow-x: auto; font-size: .78rem; line-height: 1.55; }
:where(.css-app-admin-styleguide) .sg-code pre code { color: var(--ivory-2); white-space: pre; }
:where(.css-app-admin-styleguide) .sg-copy { position: absolute; top: 8px; inset-inline-end: 8px; }
:where(.css-app-admin-styleguide) .sg-copy.is-copied { color: var(--status-on); }

:where(.css-app-admin-styleguide) .sg-table { width: 100%; max-width: 720px; border-collapse: collapse; font-size: var(--text-sm); }
:where(.css-app-admin-styleguide) .sg-table th,
:where(.css-app-admin-styleguide) .sg-table td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); text-align: start; }
:where(.css-app-admin-styleguide) .sg-table th { color: var(--ivory-2); font-weight: 500; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
:where(.css-app-admin-styleguide) .sg-table td:last-child { text-align: end; font-variant-numeric: tabular-nums; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-theme-creator
   Ancien fichier : pages/admin/theme-creator.css
   Activée par css_use('app/admin-theme-creator') dans : admin/_themes-accueil.php, admin/theme-creator.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* i281 — la confirmation « enregistré ✓ » dans le pied des fenêtres Présentation et Textes. */
:where(.css-app-admin-theme-creator) .tc-ok-inline { color: var(--status-on); font-size: .85rem; }
/* Styles de public/admin/theme-creator.php — sortis de la page (i102b). */

:where(.css-app-admin-theme-creator) .tc-wrap {max-width:1080px}
:where(.css-app-admin-theme-creator) .tc-step {border:1px solid var(--hair-soft);border-radius:10px;padding:16px 18px;margin-bottom:14px}
:where(.css-app-admin-theme-creator) .tc-step.off {opacity:.45;pointer-events:none}
/* Assistant : une étape à la fois */
:where(.css-app-admin-theme-creator) .tc-wrap.wiz section.tc-step {display:none}
:where(.css-app-admin-theme-creator) .tc-wrap.wiz section.tc-step.cur {display:block;opacity:1;pointer-events:auto}
:where(.css-app-admin-theme-creator) .tc-fil {display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 16px;position:sticky;top:64px;z-index:5;padding:8px 0;background:var(--bg,#0b0a08)}
:where(.css-app-admin-theme-creator) .tc-fil button,
:where(.css-app-admin-theme-creator) .tc-fil a {display:flex;align-items:center;gap:7px;border:1px solid var(--hair-soft);background:transparent;color:inherit;border-radius:99px;padding:5px 12px 5px 5px;font-size:.8rem;font-weight:400;letter-spacing:normal;text-decoration:none}
:where(.css-app-admin-theme-creator) .tc-fil button b,
:where(.css-app-admin-theme-creator) .tc-fil a b {display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid currentColor;font-size:.72rem;font-weight:600}
:where(.css-app-admin-theme-creator) .tc-fil button.fait b,
:where(.css-app-admin-theme-creator) .tc-fil a.fait b {background:var(--success);border-color:var(--success);color:#10140f}
:where(.css-app-admin-theme-creator) .tc-fil button.cur {border-color:var(--or);color:var(--or)}
:where(.css-app-admin-theme-creator) .tc-fil a:hover {border-color:var(--or)}
:where(.css-app-admin-theme-creator) .tc-fil button:disabled,
:where(.css-app-admin-theme-creator) .tc-fil a.off {opacity:.35;cursor:not-allowed;pointer-events:none}
@media (max-width:760px){:where(.css-app-admin-theme-creator) .tc-fil button span,
:where(.css-app-admin-theme-creator) .tc-fil a span {display:none}:where(.css-app-admin-theme-creator) .tc-fil button.cur span {display:inline}}
:where(.css-app-admin-theme-creator) .tc-nav {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair-soft)}
:where(.css-app-admin-theme-creator) .tc-nav .tc-m {flex:1;text-align:right}
:where(.css-app-admin-theme-creator) .tc-recap {list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
:where(.css-app-admin-theme-creator) .tc-recap li {font-size:.9rem}
:where(.css-app-admin-theme-creator) .tc-recap li::before {content:"○ ";color:var(--muted,#8b8a96)}
:where(.css-app-admin-theme-creator) .tc-recap li.ok::before {content:"✓ ";color:var(--success)}
:where(.css-app-admin-theme-creator) .tc-import {border-top:1px dashed var(--hair-soft);padding-top:12px}
:where(.css-app-admin-theme-creator) .tc-wrap.wiz section.tc-step.cur.off {display:none}
:where(.css-app-admin-theme-creator) .tc-recap-brief {border:1px solid var(--hair-soft);border-radius:8px;padding:10px 12px;margin:6px 0 10px}
:where(.css-app-admin-theme-creator) .tc-rb-t {font-weight:600;margin-bottom:2px}
:where(.css-app-admin-theme-creator) .tc-rb-pal {display:flex;gap:5px;align-items:center;margin-top:6px}
:where(.css-app-admin-theme-creator) .tc-rb-pal i {width:18px;height:18px;border-radius:4px;display:inline-block;border:1px solid rgba(255,255,255,.2)}
:where(.css-app-admin-theme-creator) .tc-refs {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
:where(.css-app-admin-theme-creator) .tc-ref {border:1px solid var(--hair-soft);border-radius:8px;padding:8px;position:relative}
:where(.css-app-admin-theme-creator) .tc-ref .im {display:grid;grid-template-columns:2fr 3fr;gap:6px;align-items:start}
:where(.css-app-admin-theme-creator) .tc-ref img {width:100%;border-radius:4px;display:block;background:#222}
:where(.css-app-admin-theme-creator) .tc-ref .pied {display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:.78rem}
:where(.css-app-admin-theme-creator) .tc-ref.actif {border-color:var(--success)}
:where(.css-app-admin-theme-creator) .tc-ref .badge-a {color:var(--success)}
:where(.css-app-admin-theme-creator) .tc-ref.efface {opacity:.35;pointer-events:none}
:where(.css-app-admin-theme-creator) .tc-ref .mq.fait {color:var(--success)}
:where(.css-app-admin-theme-creator) .tc-ref .pied {flex-wrap:wrap;gap:4px}
:where(.css-app-admin-theme-creator) .tc-mq {position:fixed;inset:0;z-index:2100;background:rgba(8,7,6,.9);display:none;align-items:center;justify-content:center;padding:20px}
:where(.css-app-admin-theme-creator) .tc-mq.on {display:flex}
:where(.css-app-admin-theme-creator) .tc-mq .bx {background:#14120f;border:1px solid #3a3320;border-radius:10px;padding:16px;max-width:960px;width:100%;max-height:100%;overflow:auto}
:where(.css-app-admin-theme-creator) .tc-mq .hd {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
:where(.css-app-admin-theme-creator) .tc-mq .tabs {display:flex;gap:6px}
:where(.css-app-admin-theme-creator) .tc-mq .tabs .on {border-color:var(--or);color:var(--or)}
:where(.css-app-admin-theme-creator) .tc-mq canvas {display:block;margin:0 auto;max-width:100%;touch-action:none;cursor:move;border-radius:4px}
:where(.css-app-admin-theme-creator) .tc-mq .ctl,
:where(.css-app-admin-theme-creator) .tc-mq .act {display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px}
:where(.css-app-admin-theme-creator) .tc-mq .ctl label {display:flex;gap:6px;align-items:center;font-size:.8rem}
/* Aperçu plein écran : un clic sur une image l'ouvre en grand */
:where(.css-app-admin-theme-creator) .tc-mondes img,
:where(.css-app-admin-theme-creator) #rf-liste img,
:where(.css-app-admin-theme-creator) #c-liste img {cursor:zoom-in}
:where(.css-app-admin-theme-creator) .tc-lb {position:fixed;inset:0;z-index:2000;background:rgba(8,7,6,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:48px 64px 20px}
:where(.css-app-admin-theme-creator) .tc-lb.on {display:flex}
:where(.css-app-admin-theme-creator) .tc-lb img {max-width:100%;max-height:calc(100vh - 120px);object-fit:contain;border-radius:6px;box-shadow:0 10px 50px rgba(0,0,0,.6);background:#1a1714}
:where(.css-app-admin-theme-creator) .tc-lb .cap {color:#e7e3d8;font-size:.85rem;margin-top:10px;text-align:center}
:where(.css-app-admin-theme-creator) .tc-lb button {position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:50%;width:44px;height:44px;font-size:1.3rem;line-height:1;cursor:pointer}
:where(.css-app-admin-theme-creator) .tc-lb .x {top:14px;right:14px}:where(.css-app-admin-theme-creator) .tc-lb .g {left:12px;top:50%;transform:translateY(-50%)}:where(.css-app-admin-theme-creator) .tc-lb .d {right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){:where(.css-app-admin-theme-creator) .tc-lb {padding:56px 8px 16px}:where(.css-app-admin-theme-creator) .tc-lb .g,
:where(.css-app-admin-theme-creator) .tc-lb .d {top:auto;bottom:12px;transform:none}}
:where(.css-app-admin-theme-creator) .tc-step h2 {font-size:1.05rem;margin:0 0 4px;display:flex;gap:10px;align-items:baseline}
:where(.css-app-admin-theme-creator) .tc-step h2 .n {font-family:var(--serif);color:var(--or);font-size:1.3rem}
:where(.css-app-admin-theme-creator) .tc-m {font-size:.8rem;color:var(--muted,#8b8a96)}
:where(.css-app-admin-theme-creator) .tc-row {display:flex;gap:10px;align-items:center;flex-wrap:wrap}
:where(.css-app-admin-theme-creator) .tc-refs {display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:flex-end}
:where(.css-app-admin-theme-creator) .tc-refs figure {margin:0;position:relative}
:where(.css-app-admin-theme-creator) .tc-refs img {height:78px;width:auto;max-width:130px;object-fit:cover;border-radius:6px;border:1px solid var(--hair-soft);display:block}
:where(.css-app-admin-theme-creator) .tc-refs figure:first-child img {border-color:var(--gold-warm);box-shadow:0 0 0 1px var(--gold-warm)}
:where(.css-app-admin-theme-creator) .tc-refs figcaption {font-size:.66rem;color:var(--gold-warm);text-align:center;margin-top:2px}
:where(.css-app-admin-theme-creator) .tc-refs .tc-m {flex-basis:100%}
:where(.css-app-admin-theme-creator) .tc-busy {display:none;font-size:.85rem;color:var(--gold-warm)}
:where(.css-app-admin-theme-creator) .tc-busy.on {display:inline-flex;gap:8px;align-items:center}
:where(.css-app-admin-theme-creator) .tc-busy.on::before {content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:tcspin 1s linear infinite}
@keyframes tcspin{to{transform:rotate(360deg)}}
:where(.css-app-admin-theme-creator) .tc-err {color:#dd8177;font-size:.85rem;margin-top:8px}
:where(.css-app-admin-theme-creator) .tc-warn {border:1px solid rgba(var(--gold-warm-rgb),.5);background:rgba(var(--gold-warm-rgb),.08);border-radius:8px;padding:10px 12px;font-size:.86rem;margin:10px 0}
:where(.css-app-admin-theme-creator) .tc-pal {display:flex;gap:6px;flex-wrap:wrap}
:where(.css-app-admin-theme-creator) .tc-sw {display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.68rem}
:where(.css-app-admin-theme-creator) .tc-sw input[type=color] {width:38px;height:30px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:none}
:where(.css-app-admin-theme-creator) .tc-mondes {display:grid;grid-template-columns:3fr 1fr;gap:10px;align-items:start}
:where(.css-app-admin-theme-creator) .tc-mondes img {width:100%;border-radius:6px;border:1px solid var(--hair-soft);display:block}
/* ── LA PIPETTE (étape 3) ─────────────────────────────────────────────────
   Le monde, en grand, sous les trois champs de couleur. Le curseur est une
   croix : on vise un pixel, on ne fait pas défiler une image. */
/* Les sous-titres de l'étape 3 : elle porte trois choses distinctes (le nom
   d'essai, les couleurs, les textes) et les enchaînait sans respirer. */
:where(.css-app-admin-theme-creator) .tc-h3 {font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);
  margin:22px 0 10px;font-weight:600}
:where(.css-app-admin-theme-creator) .tc-step > .tc-h3:first-of-type {margin-top:16px}
:where(.css-app-admin-theme-creator) .tc-bloc {border:1px solid var(--hair-soft);border-radius:8px;padding:12px 14px;margin-top:12px}
:where(.css-app-admin-theme-creator) .tc-bloc .tc-h3 {margin-top:0}
/* La bascule « Aperçu / Fond original » : une seule fenêtre sous la palette. */
:where(.css-app-admin-theme-creator) .tc-vue {align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 10px}
:where(.css-app-admin-theme-creator) .tc-vue .vue-b.on {background:var(--or);border-color:var(--or);color:#17130c;font-weight:600}
:where(.css-app-admin-theme-creator) .tc-pip {margin-top:14px;border-top:1px solid var(--hair-soft);padding-top:12px}
:where(.css-app-admin-theme-creator) .tc-pip-barre {align-items:center;gap:10px;flex-wrap:wrap}
:where(.css-app-admin-theme-creator) .tc-pip-imgs {display:grid;grid-template-columns:3fr 1fr;gap:10px;align-items:start;margin-top:10px}
:where(.css-app-admin-theme-creator) .tc-pip-imgs img {width:100%;border-radius:6px;border:1px solid var(--hair-soft);display:block;
  cursor:crosshair;-webkit-user-select:none;user-select:none}
/* La couleur visée, montrée AVANT le clic : sans elle on choisit au jugé,
   et un ciel « bleu » est bleu à quarante nuances près. */
:where(.css-app-admin-theme-creator) .tc-pip-vu {display:inline-flex;align-items:center;gap:7px;min-height:22px;font-size:.78rem;color:var(--ivoire-2)}
:where(.css-app-admin-theme-creator) .tc-pip-vu i {width:22px;height:22px;border-radius:4px;border:1px solid var(--hair);display:inline-block;background:transparent}
:where(.css-app-admin-theme-creator) .tc-pip-vu b {font-weight:600;letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Les boutons de l'admin portent des !important (lux-admin.css) : sans eux ici,
   le champ armé ne se distinguerait pas des deux autres — et on piocherait une
   couleur pour le fond en croyant la poser sur l'accent. */
:where(.css-app-admin-theme-creator) .pip-cible.on {background:var(--or)!important;color:#14110C!important;border-color:var(--or)!important}
/* Le bouton d'enregistrement de la pipette : discret, mais à portée de
   main — on vient de choisir trois couleurs, on les garde sans chercher. */
:where(.css-app-admin-theme-creator) .tc-pip-enr {margin-top:14px;align-items:center;gap:12px;flex-wrap:wrap}
:where(.css-app-admin-theme-creator) .tc-enr-ok {color:var(--success)}
@media (max-width:760px){:where(.css-app-admin-theme-creator) .tc-pip-imgs {grid-template-columns:1fr}}
:where(.css-app-admin-theme-creator) .tc-versions {display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
:where(.css-app-admin-theme-creator) .tc-versions button {padding:0;border:2px solid transparent;border-radius:4px;background:none}
:where(.css-app-admin-theme-creator) .tc-versions button.on {border-color:var(--or)}
:where(.css-app-admin-theme-creator) .tc-versions img {height:44px;display:block;border-radius:2px}
:where(.css-app-admin-theme-creator) .tc-couleurs {display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
:where(.css-app-admin-theme-creator) .tc-couleurs input[type=color] {width:64px!important;height:40px!important;padding:3px!important;flex:0 0 auto}
:where(.css-app-admin-theme-creator) .tc-ctr {font-size:.74rem;padding:1px 8px;border-radius:99px;border:1px solid currentColor}
:where(.css-app-admin-theme-creator) .tc-ctr.ok {color:var(--success)}:where(.css-app-admin-theme-creator) .tc-ctr.ko {color:#dd8177}
:where(.css-app-admin-theme-creator) .tc-tx {width:100%;font-size:.84rem;border-collapse:collapse}
:where(.css-app-admin-theme-creator) .tc-tx td {padding:4px 6px;vertical-align:middle;border-bottom:1px solid var(--hair-soft)}
:where(.css-app-admin-theme-creator) .tc-tx td:first-child {width:170px;font-size:.78rem;color:var(--muted,#aaa)}
:where(.css-app-admin-theme-creator) .tc-tx td.c {width:64px;text-align:right;font-size:.72rem;color:var(--muted,#8b8a96);white-space:nowrap}
:where(.css-app-admin-theme-creator) .tc-tx td.c.ko {color:#dd8177}
:where(.css-app-admin-theme-creator) .tc-tx input {font-size:.84rem;padding:3px 7px}
:where(.css-app-admin-theme-creator) .tc-lang summary {cursor:pointer;font-size:.88rem;margin:8px 0 4px}
:where(.css-app-admin-theme-creator) .tc-seo {border-top:1px solid var(--hair-soft);padding-top:16px}
:where(.css-app-admin-theme-creator) .tc-seo .tc-lang {border-bottom:1px solid var(--hair-soft);padding-bottom:10px}
:where(.css-app-admin-theme-creator) .tc-seo-champ {margin:10px 0}
:where(.css-app-admin-theme-creator) .tc-seo-champ label {display:block}
:where(.css-app-admin-theme-creator) .tc-seo-champ input,
:where(.css-app-admin-theme-creator) .tc-seo-champ textarea {width:100%;max-width:760px}
:where(.css-app-admin-theme-creator) .tc-seo-champ textarea {min-height:200px;line-height:1.6}
:where(.css-app-admin-theme-creator) .tc-seo .tc-m.ko {color:#dd8177}
:where(.css-app-admin-theme-creator) .tc-cadres {display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
:where(.css-app-admin-theme-creator) .tc-tv {display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
:where(.css-app-admin-theme-creator) .tc-tv button {position:relative;padding:0;width:74px;border:2px solid transparent;border-radius:5px;background:none}
:where(.css-app-admin-theme-creator) .tc-tv button img {width:100%;display:block;border-radius:3px;background:#222}
:where(.css-app-admin-theme-creator) .tc-tv button.on {border-color:var(--or)}
:where(.css-app-admin-theme-creator) .tc-tv button.ok::after {content:"✓";position:absolute;top:2px;right:4px;font-size:.8rem;color:var(--success);text-shadow:0 1px 3px #000}
:where(.css-app-admin-theme-creator) .tc-texte {display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr);gap:18px;align-items:start}
@media (max-width:860px){:where(.css-app-admin-theme-creator) .tc-texte {grid-template-columns:1fr}}
:where(.css-app-admin-theme-creator) .tc-etat {font-size:.78rem;padding:2px 9px;border-radius:99px;border:1px solid currentColor}
:where(.css-app-admin-theme-creator) .tc-etat.sug {color:var(--gold-warm)}:where(.css-app-admin-theme-creator) .tc-etat.ok {color:var(--success)}
:where(.css-app-admin-theme-creator) .tc-site canvas {width:100%;max-width:340px;display:block;border-radius:4px;background:#222}
:where(.css-app-admin-theme-creator) .tc-cadres figure {margin:0;width:110px}
:where(.css-app-admin-theme-creator) .tc-cadres img {width:100%;border-radius:4px;border:1px solid var(--hair-soft);background:#222;display:block}
:where(.css-app-admin-theme-creator) .tc-cadres figcaption {font-size:.68rem;color:var(--muted,#8b8a96);margin-top:3px;line-height:1.25}
:where(.css-app-admin-theme-creator) .tc-cadres .neuf img {outline:2px solid var(--or)}
:where(.css-app-admin-theme-creator) .tc-cadres figure {position:relative}
:where(.css-app-admin-theme-creator) .tc-cadres .tc-suppr {position:absolute;top:4px;right:4px;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid rgba(221,129,119,.6);background:rgba(20,16,12,.82);color:#dd8177;font-size:.8rem;line-height:1;cursor:pointer;opacity:.85}
:where(.css-app-admin-theme-creator) .tc-cadres .tc-suppr:hover {opacity:1;background:#3a1714}
:where(.css-app-admin-theme-creator) .tc-cadres figure.efface {opacity:.35;pointer-events:none}
:where(.css-app-admin-theme-creator) .tc-fmt {margin-top:10px}
:where(.css-app-admin-theme-creator) .tc-fmt-h {font-size:.84rem;margin-bottom:4px}
:where(.css-app-admin-theme-creator) .tc-vierges {display:flex;gap:8px;flex-wrap:wrap}
:where(.css-app-admin-theme-creator) .tc-v {cursor:pointer;position:relative}
:where(.css-app-admin-theme-creator) .tc-v input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-admin-theme-creator) .tc-v span {display:block;position:relative;border:2px solid transparent;border-radius:6px;padding:3px;
  background:linear-gradient(45deg,#6d6a78 25%,transparent 25%,transparent 75%,#6d6a78 75%) 0 0/12px 12px,
             linear-gradient(45deg,#6d6a78 25%,#9a97a5 25%,#9a97a5 75%,#6d6a78 75%) 6px 6px/12px 12px}
:where(.css-app-admin-theme-creator) .tc-v input:checked + span {border-color:var(--or)}
:where(.css-app-admin-theme-creator) .tc-v input:focus-visible + span {outline:2px solid var(--or-clair)}
:where(.css-app-admin-theme-creator) .tc-v img {display:block;max-height:78px;max-width:78px}
:where(.css-app-admin-theme-creator) .tc-v i {display:block;padding:20px 8px;font-style:normal;font-size:.8rem}
:where(.css-app-admin-theme-creator) .tc-v em {position:absolute;right:4px;bottom:3px;font-style:normal;font-size:.66rem;line-height:1;
  padding:2px 5px;border-radius:99px;background:rgba(0,0,0,.66);color:#e7e3d8}
:where(.css-app-admin-theme-creator) .tc-v input:checked + span em {background:var(--or);color:#1a1a1a}
@media (max-width:640px){
  :where(.css-app-admin-theme-creator) .tc-tx tr {display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--hair-soft)}
  :where(.css-app-admin-theme-creator) .tc-tx td {border:0}
  :where(.css-app-admin-theme-creator) .tc-tx td:first-child {grid-column:1/-1;width:auto;padding-bottom:0}
}
/* Aperçu : miniatures rendues par booth-theme.js */
:where(.css-app-admin-theme-creator) .tc-apercu {display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
:where(.css-app-admin-theme-creator) .tc-apercu-p {display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}
@media (max-width:760px){:where(.css-app-admin-theme-creator) .tc-apercu {grid-template-columns:1fr}:where(.css-app-admin-theme-creator) .tc-apercu-p {grid-template-columns:1fr 1fr}:where(.css-app-admin-theme-creator) .tc-mondes {grid-template-columns:1fr}}
:where(.css-app-admin-theme-creator) .tc-ec {margin:0}
:where(.css-app-admin-theme-creator) .tc-ec figcaption {font-size:.72rem;color:var(--muted,#8b8a96);margin-top:4px}
:where(.css-app-admin-theme-creator) .bta {position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;container-type:inline-size;
     display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
     background:var(--black);color:var(--cream);font-family:Inter,sans-serif;font-weight:300;isolation:isolate}
:where(.css-app-admin-theme-creator) .bta.p {aspect-ratio:9/16}
:where(.css-app-admin-theme-creator) .bta .mw {position:absolute;inset:0;z-index:-2}
:where(.css-app-admin-theme-creator) .bta .mw img {width:100%;height:100%;object-fit:cover;display:block}
:where(.css-app-admin-theme-creator) .bta .mw.flou img {filter:blur(4px) saturate(1.1);transform:scale(1.06)}
:where(.css-app-admin-theme-creator) .bta .vl {position:absolute;inset:0;z-index:-1}
:where(.css-app-admin-theme-creator) .bta .w-eyebrow {font-size:1.9cqw;letter-spacing:.42em;text-transform:uppercase;margin-bottom:2.2cqw;display:flex;gap:1.2cqw;align-items:center;font-weight:500}
:where(.css-app-admin-theme-creator) .bta .w-eyebrow .rule {display:inline-block;width:4cqw;height:1px}
:where(.css-app-admin-theme-creator) .bta .booth-title {font-size:6.4cqw;line-height:1.08;margin:0;max-width:86%;font-weight:500}
:where(.css-app-admin-theme-creator) .bta h2 {font-size:4.2cqw;margin:0 0 2.6cqw;font-weight:500}
:where(.css-app-admin-theme-creator) .bta .booth-sub {font-size:2.1cqw;margin-top:1.4cqw}
:where(.css-app-admin-theme-creator) .bta .btn {font-size:1.9cqw;letter-spacing:.2em;text-transform:uppercase;border-radius:999px;padding:1.4cqw 3.6cqw;margin-top:3cqw;border:1px solid transparent;font-weight:500}
:where(.css-app-admin-theme-creator) .bta.p .w-eyebrow {font-size:3.4cqw}:where(.css-app-admin-theme-creator) .bta.p .booth-title {font-size:10cqw}:where(.css-app-admin-theme-creator) .bta.p .btn {font-size:3.4cqw;padding:2.4cqw 6cqw}
:where(.css-app-admin-theme-creator) .bta.p h2 {font-size:8cqw;padding:0 6cqw}:where(.css-app-admin-theme-creator) .bta.p .booth-sub {font-size:4.2cqw;padding:0 6cqw}
:where(.css-app-admin-theme-creator) .bta .cards {display:flex;gap:2cqw}
:where(.css-app-admin-theme-creator) .bta .style-card {width:13cqw;aspect-ratio:2/3;border:.4cqw solid transparent;border-radius:1.4cqw}
:where(.css-app-admin-theme-creator) .bta .style-card i {display:block;height:100%;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04))}
:where(.css-app-admin-theme-creator) .bta .spinner-ai {width:9cqw;height:9cqw;border:1cqw solid rgba(255,255,255,.2);border-radius:50%;margin-bottom:3cqw}
:where(.css-app-admin-theme-creator) .bta .photo {width:26cqw;aspect-ratio:3/4;border-radius:1cqw;background:linear-gradient(160deg,#8d8a82,#3f3c36);margin-bottom:2cqw}
:where(.css-app-admin-theme-creator) .bta .result-btn {font-size:2.3cqw;border-radius:999px;padding:1.2cqw 2.6cqw;border:.3cqw solid transparent;font-weight:700;margin:0 .6cqw}
:where(.css-app-admin-theme-creator) .bta.ecran-res {flex-direction:row;gap:4cqw}
:where(.css-app-admin-theme-creator) .bta.ecran-res .acts {display:flex;flex-direction:column;gap:1.6cqw}

/* Accueil des thèmes (i108) — admin/_themes-accueil.php : la liste des
   collections et de leur thème, avant tout assistant. */
:where(.css-app-admin-theme-creator) .tca {max-width:1180px}
:where(.css-app-admin-theme-creator) .tca-bar {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 20px}
:where(.css-app-admin-theme-creator) .tca-cherche {max-width:300px;margin-left:auto}
:where(.css-app-admin-theme-creator) .tca-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:8px 0 36px}
:where(.css-app-admin-theme-creator) .tca-card {border:1px solid var(--hair-soft);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:rgba(12,12,17,.6)}
:where(.css-app-admin-theme-creator) .tca-card[hidden] {display:none}
:where(.css-app-admin-theme-creator) .tca-card:hover {border-color:var(--or)}
:where(.css-app-admin-theme-creator) .tca-vis {display:grid;place-items:center;aspect-ratio:16/9;background:#14131a;overflow:hidden}
:where(.css-app-admin-theme-creator) .tca-vis img {width:100%;height:100%;object-fit:contain;display:block}
:where(.css-app-admin-theme-creator) .tca-vis.monde img {object-fit:cover}
:where(.css-app-admin-theme-creator) .tca-vis span {font-size:2.2rem;color:var(--or);opacity:.5}
:where(.css-app-admin-theme-creator) .tca-in {padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
:where(.css-app-admin-theme-creator) .tca-nom {font-weight:700;color:inherit;text-decoration:none}
:where(.css-app-admin-theme-creator) .tca-nom:hover {color:var(--or)}
:where(.css-app-admin-theme-creator) .tca-meta {font-size:.78rem;opacity:.7}
:where(.css-app-admin-theme-creator) .tca-acts {display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:auto;padding-top:4px}
:where(.css-app-admin-theme-creator) .tca-lien {font-size:.8rem;color:var(--or);text-decoration:none}
:where(.css-app-admin-theme-creator) .tca-lien:hover {text-decoration:underline}
:where(.css-app-admin-theme-creator) .tca-sans>summary {cursor:pointer;list-style:none}

/* ── Nuancier des fenêtres (i106) : on voit la couleur avant de créer ── */
:where(.css-app-admin-theme-creator) .tc-nuancier-bloc { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
:where(.css-app-admin-theme-creator) .tc-nuancier { display: flex; flex-wrap: wrap; gap: 10px; }
:where(.css-app-admin-theme-creator) .tc-nuance { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 104px; padding: 8px 10px 7px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: inherit; cursor: pointer;
  transition: border-color .15s, background .15s; }
:where(.css-app-admin-theme-creator) .tc-nuance:hover { border-color: rgba(255,255,255,.3); }
:where(.css-app-admin-theme-creator) .tc-nuance.on { border-color: var(--or); background: rgba(var(--gold-sand-rgb),.1); box-shadow: 0 0 0 1px var(--or) inset; }
:where(.css-app-admin-theme-creator) .tc-nuance-vue { display: grid; place-items: center; width: 84px; height: 56px; border-radius: 8px; background: var(--nf, #1B1712);
  border: 1px solid rgba(255,255,255,.08); }
:where(.css-app-admin-theme-creator) .tc-nuance-vue i { display: block; width: 46px; height: 32px; border: 3px double var(--nc, #C9A962); border-radius: 3px;
  /* La fenêtre témoin tient une « photo » claire : même un cadre couleur du fond s'y voit. */
  background: linear-gradient(160deg, #d9d2c5, #9c9486); box-shadow: 0 0 0 1px var(--nc, #C9A962); }
:where(.css-app-admin-theme-creator) .tc-nuance-nom { font-size: .74rem; line-height: 1.2; text-align: center; }
:where(.css-app-admin-theme-creator) .tc-nuance-hex { font-size: .64rem; opacity: .55; font-family: ui-monospace, Menlo, monospace; }

/* ── Écran d'accueil (i109) : titre et sous-titre prennent la place qu'il faut ── */
:where(.css-app-admin-theme-creator) .tc-accueil .tc-acc-large { grid-column: span 2; }
@media (max-width: 900px) { :where(.css-app-admin-theme-creator) .tc-accueil .tc-acc-large { grid-column: auto; } }
:where(.css-app-admin-theme-creator) #acc-titre-c.ko { color: #e87a6a; }

/* i166 — les deux formats du monde, chacun sa carte et son « ↻ Repeindre ». */
:where(.css-app-admin-theme-creator) .tc-monde {margin:0;display:flex;flex-direction:column;gap:8px}
:where(.css-app-admin-theme-creator) .tc-monde-img {position:relative;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
:where(.css-app-admin-theme-creator) .tc-mondes .tc-monde-img img {border:0;border-radius:0}
:where(.css-app-admin-theme-creator) .tc-monde-voile {position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(var(--black-warm-rgb),.62);backdrop-filter:blur(3px);color:var(--or);font-size:.9rem;letter-spacing:.04em;text-align:center;padding:10px}
:where(.css-app-admin-theme-creator) .tc-monde-voile.on {display:flex}
:where(.css-app-admin-theme-creator) .tc-monde-spin {width:34px;height:34px;border-radius:50%;border:3px solid rgba(var(--gold-sand-rgb),.25);border-top-color:var(--or);
  animation:tcTourne 1s linear infinite}
@keyframes tcTourne{to{transform:rotate(360deg)}}
:where(.css-app-admin-theme-creator) .tc-monde-pied {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:2px 2px 0}
:where(.css-app-admin-theme-creator) .tc-monde-nom {font-size:.82rem;color:var(--texte-2,#a89878)}
:where(.css-app-admin-theme-creator) .tc-monde-nom b {color:var(--ivoire);font-weight:600}
:where(.css-app-admin-theme-creator) .tc-refaire {display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(var(--gold-sand-rgb),.5);background:rgba(var(--gold-sand-rgb),.06);color:var(--or);font-size:.8rem;font-weight:600;
  letter-spacing:.03em;transition:background .2s,color .2s,transform .2s}
:where(.css-app-admin-theme-creator) .tc-refaire:hover:not(:disabled) {background:var(--or);color:var(--black-brown);transform:translateY(-1px)}
:where(.css-app-admin-theme-creator) .tc-refaire:disabled {opacity:.45;cursor:wait}

/* i167 — « ↻ Portrait / ↻ Paysage » sous les images d'une référence. */
:where(.css-app-admin-theme-creator) .tc-ref .refaire {display:grid;grid-template-columns:2fr 3fr;gap:6px;margin-top:6px}
:where(.css-app-admin-theme-creator) .tc-ref .refaire .tc-refaire {justify-content:center}
:where(.css-app-admin-theme-creator) .tc-refaire-sm {padding:4px 10px;font-size:.72rem}
:where(.css-app-admin-theme-creator) .tc-ref.peint .im {position:relative}
:where(.css-app-admin-theme-creator) .tc-ref.peint .im::after {content:"";position:absolute;inset:0;border-radius:4px;background:rgba(var(--black-warm-rgb),.55)}
:where(.css-app-admin-theme-creator) .tc-ref.peint[data-peint="v"] .im img:first-child,
:where(.css-app-admin-theme-creator) .tc-ref.peint[data-peint="p"] .im img:last-child {animation:tcPulse 1.2s ease-in-out infinite}
@keyframes tcPulse{50%{opacity:.35}}

/* i244 — les idées prêtes (étape 1), en simple liste */
:where(.css-app-admin-theme-creator) .tc-ideas { margin: .6rem 0 0; font-size: .88rem; }
:where(.css-app-admin-theme-creator) .tc-ideas > summary { cursor: pointer; font-weight: 600; color: var(--gold); }
:where(.css-app-admin-theme-creator) .tc-ideas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem 1.2rem; margin-top: .5rem;
  padding: .7rem .8rem; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; }
:where(.css-app-admin-theme-creator) .tc-ideas-group b { display: block; font-size: .82rem; margin-bottom: .2rem; }
:where(.css-app-admin-theme-creator) .tc-ideas-group ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
:where(.css-app-admin-theme-creator) .tc-idea { border: 0; background: none; color: inherit; padding: .12rem 0; text-align: start; cursor: pointer; opacity: .85; font-size: .86rem; }
:where(.css-app-admin-theme-creator) .tc-idea::before { content: "→ "; opacity: .5; }
:where(.css-app-admin-theme-creator) .tc-idea:hover { opacity: 1; color: var(--gold); }
:where(.css-app-admin-theme-creator) .tc-idea.on { color: var(--gold); opacity: 1; font-weight: 600; }

/* i259 — la publication pas à pas : une ligne par étape */
:where(.css-app-admin-theme-creator) .tc-prep {list-style:none;padding:10px 12px;margin:12px 0 0;display:grid;gap:5px;border:1px solid var(--hair-soft);border-radius:8px}
:where(.css-app-admin-theme-creator) .tc-prep li {font-size:.88rem}
:where(.css-app-admin-theme-creator) .tc-prep li::before {content:"○ ";color:var(--muted,#8b8a96)}
:where(.css-app-admin-theme-creator) .tc-prep li.en-cours::before {content:"◌ ";color:var(--gold-soft);display:inline-block;animation:tcPrep 1.2s linear infinite}
:where(.css-app-admin-theme-creator) .tc-prep li.ok::before {content:"✓ ";color:var(--success)}
:where(.css-app-admin-theme-creator) .tc-prep li.ko {color:#e08a7a}
:where(.css-app-admin-theme-creator) .tc-prep li.ko::before {content:"✕ ";color:#e08a7a}
@keyframes tcPrep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){:where(.css-app-admin-theme-creator) .tc-prep li.en-cours::before {animation:none}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-theme-creator-cadres
   Ancien fichier : pages/admin/theme-creator-cadres.css
   Activée par css_use('app/admin-theme-creator-cadres') dans : admin/theme-creator.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ═══════════════════════════════════════════════════════════════════════
   Créateur de thème — étape « Cadres » (i151)
   Les fenêtres en VIGNETTES (moitié fond, moitié photo, le dessin à la
   jonction) et la couleur en GRANDES pastilles, avec le fond du thème à
   droite comme pipette.
   ═══════════════════════════════════════════════════════════════════════ */

:where(.css-app-admin-theme-creator-cadres) .tc-fen-bloc { display: flex; flex-direction: column; gap: 8px; }
:where(.css-app-admin-theme-creator-cadres) .tc-fens { display: flex; flex-wrap: wrap; gap: 12px; }
:where(.css-app-admin-theme-creator-cadres) .tc-fen { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 132px; padding: 8px 8px 9px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
:where(.css-app-admin-theme-creator-cadres) .tc-fen:hover { border-color: rgba(255,255,255,.32); }
:where(.css-app-admin-theme-creator-cadres) .tc-fen.on { border-color: var(--or); background: rgba(var(--gold-sand-rgb),.1); box-shadow: 0 0 0 1px var(--or) inset; }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-nom { font-size: .74rem; line-height: 1.25; text-align: center; }

/* La vignette : le fond du thème ; la fenêtre en bas à droite montre un coin
   et deux bords — la « photo » est un damier, comme une zone transparente. */
:where(.css-app-admin-theme-creator-cadres) .tc-fen-vue { position: relative; display: block; width: 116px; height: 84px; overflow: hidden; border-radius: 8px;
  background: var(--fond, none) center / cover no-repeat, var(--fondc, #1B1712); border: 1px solid rgba(255,255,255,.08); }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-trou { position: absolute; left: 30%; top: 28%; right: -12%; bottom: -12%;
  background: repeating-conic-gradient(#cfcfcf 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; }

:where(.css-app-admin-theme-creator-cadres) .tc-fen-net { }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-filet { box-shadow: 0 0 0 3px var(--nc, #C9A962); }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-double { border: 8px double var(--nc, #C9A962); }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-arrondi { border: 9px solid var(--nc, #C9A962); border-radius: 16px; }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-neon { border: 2px solid var(--nc, #C9A962); border-radius: 8px;
  box-shadow: 0 0 10px 3px var(--nc, #C9A962), inset 0 0 8px 1px var(--nc, #C9A962); }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-dore { border: 9px solid #C9A24A;
  border-image: linear-gradient(135deg, #fff4c8 0%, #d8b45a 22%, #6b4712 42%, #f0d88c 58%, #9a6f24 78%, #e8c877 100%) 1;
  box-shadow: inset 3px 3px 6px rgba(20,12,4,.55); }
:where(.css-app-admin-theme-creator-cadres) .tc-fen-baroque { border: 13px solid #B8892F;
  border-image: repeating-linear-gradient(45deg, #f0d88c 0 3px, #9a6f24 3px 6px, #d8b45a 6px 9px) 13;
  box-shadow: inset 3px 3px 7px rgba(20,12,4,.6); }
:where(.css-app-admin-theme-creator-cadres) .tc-fen.a-orn .tc-fen-baroque { border-image: var(--orn) 28% stretch; }

/* ── La couleur : grandes pastilles + pipette ── */
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs .tc-nuancier-bloc { flex: 1 1 520px; margin-top: 0; }
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs .tc-nuancier { gap: 12px; }
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs .tc-nuance { min-width: 118px; padding: 9px 10px 8px; }
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs .tc-nuance-vue { width: 98px; height: 70px; border-radius: 10px; position: relative; overflow: hidden;
  background: var(--nc, #C9A962); border: 1px solid rgba(255,255,255,.14); display: block; }
/* Dans la pastille : un coin de fenêtre posé sur le fond du thème, pour juger du contraste. */
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs .tc-nuance-vue i { position: absolute; right: -8px; bottom: -8px; width: 50%; height: 46%; border: 0;
  border-radius: 6px 0 0 0; background: var(--nf, #1B1712); box-shadow: -3px -3px 0 0 var(--nc, #C9A962) inset; }
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs .tc-nuance-nom { font-size: .76rem; }
:where(.css-app-admin-theme-creator-cadres) .tc-couleurs .tc-nuance-hex { font-size: .68rem; }

:where(.css-app-admin-theme-creator-cadres) .tc-pipette { flex: 0 1 380px; display: flex; flex-direction: column; gap: 8px; }
:where(.css-app-admin-theme-creator-cadres) .tc-pipette-imgs { display: flex; gap: 10px; align-items: flex-start; }
:where(.css-app-admin-theme-creator-cadres) .tc-pip-img { display: block; width: 260px; max-width: 100%; height: auto; border-radius: 8px; cursor: crosshair;
  border: 1px solid rgba(255,255,255,.14); }
:where(.css-app-admin-theme-creator-cadres) .tc-pip-img.tc-pip-v { width: 90px; }
:where(.css-app-admin-theme-creator-cadres) .tc-pip-img:hover { border-color: var(--or); }
:where(.css-app-admin-theme-creator-cadres) .tc-pip-main { display: inline-flex; align-items: center; gap: 8px; }
:where(.css-app-admin-theme-creator-cadres) .tc-pip-main input[type=color] { width: 42px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: none; cursor: pointer; }
:where(.css-app-admin-theme-creator-cadres) #c-pip-err { color: #e6b8b8; }

@media (max-width: 720px) {
  :where(.css-app-admin-theme-creator-cadres) .tc-fen { width: 104px; }
  :where(.css-app-admin-theme-creator-cadres) .tc-fen-vue { width: 90px; height: 66px; }
  :where(.css-app-admin-theme-creator-cadres) .tc-pip-img { width: 100%; }
}

/* i162 : la pipette est toujours dans la page, cachée tant qu'il n'y a pas de monde. */
:where(.css-app-admin-theme-creator-cadres) .tc-pipette[hidden],
:where(.css-app-admin-theme-creator-cadres) .tc-pip-img[hidden] { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-theme-world
   Ancien fichier : pages/admin/theme-world.css
   Activée par css_use('app/admin-theme-world') dans : admin/theme-world.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/theme-world.php — sortis de la page (i102b). */

:where(.css-app-admin-theme-world) .iw { --iw-gold: var(--gold); --iw-line: rgba(127,127,127,.28); max-width: 1180px; margin: 0 auto; }
:where(.css-app-admin-theme-world) .iw h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.7rem; margin: 0 0 .25rem;
  display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; }
:where(.css-app-admin-theme-world) .iw h3 { font-size: 1.05rem; margin: 1.4rem 0 .7rem; }
:where(.css-app-admin-theme-world) .iw .iw-sub { opacity: .72; margin: 0 0 1.1rem; }
:where(.css-app-admin-theme-world) .iw-top { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: baseline; margin: .5rem 0 .6rem; }
:where(.css-app-admin-theme-world) .iw-top h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 2.2rem; margin: 0; }
:where(.css-app-admin-theme-world) .iw-badge { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--iw-gold); color: var(--iw-gold); }
:where(.css-app-admin-theme-world) .iw-etat { font: 600 .78rem/1 Inter, system-ui, sans-serif; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--iw-line); opacity: .8; }
:where(.css-app-admin-theme-world) .iw-etat.ok { border-color: var(--success); color: var(--success); opacity: 1; }
:where(.css-app-admin-theme-world) .iw-pro { border: 1px solid var(--iw-gold); border-radius: 14px; padding: .8rem 1rem; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
:where(.css-app-admin-theme-world) .iw-block { border: 1px solid var(--iw-line); border-radius: 18px; padding: 1.4rem; margin-bottom: 1.6rem; }
:where(.css-app-admin-theme-world) .iw-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .2rem 0 .8rem; }
:where(.css-app-admin-theme-world) .iw-st { min-height: 1.4em; font-size: .9rem; margin: .2rem 0 .8rem; }
:where(.css-app-admin-theme-world) .iw-st.work { color: var(--iw-gold); }
:where(.css-app-admin-theme-world) .iw-st.err { color: #ff8fb8; }
:where(.css-app-admin-theme-world) .iw-st.ok { color: var(--success); }
:where(.css-app-admin-theme-world) .iw-prompt { font-size: .85rem; white-space: pre-wrap; background: rgba(127,127,127,.1); border-radius: 12px; padding: .8rem 1rem; margin: .4rem 0 .6rem; }
:where(.css-app-admin-theme-world) .iw-stage { position: relative; border-radius: 14px; overflow: hidden; background: #1b1522; user-select: none; }
:where(.css-app-admin-theme-world) .iw-stage img { display: block; width: 100%; height: auto; }
:where(.css-app-admin-theme-world) .iw-stage.empty { aspect-ratio: 16 / 9; display: grid; place-items: center; color: #bbb; text-align: center; padding: 1rem; }
:where(.css-app-admin-theme-world) .iw-stage.placing { cursor: crosshair; outline: 2px dashed var(--iw-gold); outline-offset: -2px; }
:where(.css-app-admin-theme-world) .iw-stage.busy::after { content: ""; position: absolute; inset: 0; background: rgba(var(--black-warm-rgb),.55);
  animation: iw-pulse 1.6s ease-in-out infinite; }
@keyframes iw-pulse { 50% { background: rgba(var(--black-warm-rgb),.3); } }
:where(.css-app-admin-theme-world) .iw-ground { position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(var(--gold-light-rgb),.95); pointer-events: none; }
:where(.css-app-admin-theme-world) .iw-ground span { position: absolute; right: 8px; top: -26px; font-size: .75rem; color: var(--gold-light); background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 8px; }
:where(.css-app-admin-theme-world) .iw-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--pink); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); cursor: pointer; }
:where(.css-app-admin-theme-world) .iw-dots-off .iw-dot { display: none; }
:where(.css-app-admin-theme-world) .iw-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; margin: .4rem 0 .6rem; }
:where(.css-app-admin-theme-world) .iw-idea-c { border: 1px solid var(--iw-line); border-radius: 14px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .35rem; }
:where(.css-app-admin-theme-world) .iw-idea-c b { font-size: 1rem; }
:where(.css-app-admin-theme-world) .iw-idea-c .small { opacity: .7; }
:where(.css-app-admin-theme-world) .iw-idea-c.fait { border-color: var(--success); }
:where(.css-app-admin-theme-world) .iw-idea-c .btn { margin-top: auto; }
:where(.css-app-admin-theme-world) .iw-own { border: 1px dashed var(--iw-gold); border-radius: 14px; padding: .9rem 1rem; margin: .2rem 0 1rem; display: flex; flex-direction: column; gap: .2rem; }
:where(.css-app-admin-theme-world) .iw-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
:where(.css-app-admin-theme-world) .iw-char { border: 1px solid var(--iw-line); border-radius: 16px; padding: .9rem; }
:where(.css-app-admin-theme-world) .iw-char .iw-art { background: #fff; border-radius: 10px; height: 150px; display: grid; place-items: center; margin-bottom: .7rem; }
:where(.css-app-admin-theme-world) .iw-char .iw-art img { max-width: 92%; max-height: 138px; }
:where(.css-app-admin-theme-world) .iw-char.off { opacity: .55; }
:where(.css-app-admin-theme-world) .iw-char .iw-st { margin: .4rem 0 0; }
:where(.css-app-admin-theme-world) .iw-prep { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .8rem 0; }
:where(.css-app-admin-theme-world) .iw-prep figure { margin: 0; border-radius: 12px; overflow: hidden; }
:where(.css-app-admin-theme-world) .iw-prep figure.l { background: #fff; }
:where(.css-app-admin-theme-world) .iw-prep figure.m { background: #2a1f35; }
:where(.css-app-admin-theme-world) .iw-prep canvas { display: block; width: 100%; height: 190px; object-fit: contain; }
:where(.css-app-admin-theme-world) .iw-prep figcaption { font-size: .78rem; padding: .3rem .6rem; opacity: .8; }
:where(.css-app-admin-theme-world) .iw-inst { border: 1px solid var(--iw-line); border-radius: 16px; padding: 1rem; margin-bottom: 1rem; }
:where(.css-app-admin-theme-world) .iw-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin: .8rem 0; }
:where(.css-app-admin-theme-world) .iw-link { border-radius: 12px; background: rgba(127,127,127,.08); padding: .8rem; }
:where(.css-app-admin-theme-world) .iw-link b { display: block; margin-bottom: .35rem; }
:where(.css-app-admin-theme-world) .iw-qr { width: 120px; height: 120px; background: #fff; padding: 6px; border-radius: 8px; margin-top: .5rem; }
:where(.css-app-admin-theme-world) .iw-qr svg { width: 100%; height: 100%; display: block; }
:where(.css-app-admin-theme-world) .iw-mod { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin-top: .6rem; }
:where(.css-app-admin-theme-world) .iw-mod figure { margin: 0; border-radius: 12px; background: #2a1f35; padding: 6px; text-align: center; }
:where(.css-app-admin-theme-world) .iw-mod img { width: 100%; height: 90px; object-fit: contain; }
:where(.css-app-admin-theme-world) .iw-mod figure.hid img { opacity: .25; }
:where(.css-app-admin-theme-world) .iw-mod button { font-size: .75rem; margin-top: 4px; min-height: 32px !important; width: 100%; }
:where(.css-app-admin-theme-world) .iw details > summary { cursor: pointer; opacity: .85; margin: .6rem 0; }
:where(.css-app-admin-theme-world) .iw .btn { min-height: 44px; }
/* i108 : le monde vit seul (Catalogue › Mondes interactifs) — fil d'Ariane,
   nom + description, collections liées. */
:where(.css-app-admin-theme-world) .iw-ariane { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .85rem; margin: 4px 0 6px; opacity: .9; }
:where(.css-app-admin-theme-world) .iw-ariane a { color: var(--or); text-decoration: none; }
:where(.css-app-admin-theme-world) .iw-ariane a:hover { text-decoration: underline; }
:where(.css-app-admin-theme-world) .iw-ariane .iw-retour { margin-left: auto; }
:where(.css-app-admin-theme-world) .iw-ident { padding-bottom: 1rem; }
:where(.css-app-admin-theme-world) .iw-liens { display: flex; flex-wrap: wrap; gap: .45rem .6rem; align-items: center; margin: 1rem 0 .3rem; }
:where(.css-app-admin-theme-world) .iw-lien { display: inline-flex; gap: .45rem; align-items: center; font-size: .85rem; padding: .25rem .7rem; border-radius: 99px; border: 1px solid var(--iw-line); }
:where(.css-app-admin-theme-world) .iw-lien.main { border-color: var(--iw-gold); }
:where(.css-app-admin-theme-world) .iw-lien a { font-size: .78rem; text-decoration: none; color: var(--or); }
:where(.css-app-admin-theme-world) .iw-lien a:hover { text-decoration: underline; }
:where(.css-app-admin-theme-world) .iw-liens-edit > summary { font-size: .88rem; }
:where(.css-app-admin-theme-world) .iw-cherche { max-width: 320px; margin: .3rem 0 .5rem; }
:where(.css-app-admin-theme-world) .iw-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .4rem .8rem; max-height: 280px; overflow: auto; padding: 2px; }
:where(.css-app-admin-theme-world) .iw-col { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--iw-line); border-radius: 10px; padding: .3rem .55rem; font-size: .88rem; }
:where(.css-app-admin-theme-world) .iw-col:has(.iw-col-l input:checked) { border-color: var(--iw-gold); background: rgba(var(--gold-rgb),.07); }
:where(.css-app-admin-theme-world) .iw-col[hidden] { display: none; }
:where(.css-app-admin-theme-world) .iw-col-l { display: flex; gap: .45rem; align-items: center; flex: 1; cursor: pointer; margin: 0; }
:where(.css-app-admin-theme-world) .iw-col-p { margin: 0; font-size: .8rem; opacity: .8; cursor: pointer; white-space: nowrap; }
:where(.css-app-admin-theme-world) .iw-danger { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin: 0 0 2rem;
  padding-top: 1rem; border-top: 1px solid var(--iw-line); }
@media (prefers-reduced-motion: reduce) { :where(.css-app-admin-theme-world) .iw-stage.busy::after { animation: none; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-themes-accueil
   Ancien fichier : pages/admin/themes-accueil.css
   Activée par css_use('app/admin-themes-accueil') dans : admin/_themes-accueil.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* i260 — Catalogue › Thèmes : l'état de chaque collection se voit de loin,
   et un filtre sépare ce qui est en cours de ce qui est en ligne. */

/* La bande en coin : à gauche pour un brouillon, à droite une fois publiée */
:where(.css-app-admin-themes-accueil) .tca-vis {position:relative}
:where(.css-app-admin-themes-accueil) .tca-ruban {position:absolute;top:41px;width:250px;padding:7px 0;line-height:1;text-align:center;
  font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;
  color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.45);pointer-events:none;z-index:2}
:where(.css-app-admin-themes-accueil) .tca-ruban.draft {left:-70px;transform:rotate(-45deg);background:linear-gradient(90deg,#c2410c,#ea7a1f);border-top:1px dashed rgba(255,255,255,.55);border-bottom:1px dashed rgba(255,255,255,.55)}
:where(.css-app-admin-themes-accueil) .tca-ruban.live {right:-70px;transform:rotate(45deg);background:linear-gradient(90deg,#15803d,#22a35a)}
:where(.css-app-admin-themes-accueil) .tca-card.is-draft {border-color:rgba(234,122,31,.45)}
:where(.css-app-admin-themes-accueil) .tca-card.is-draft .tca-vis img {filter:saturate(.75) brightness(.9)}
:where(.css-app-admin-themes-accueil) .tca-card.is-live {border-color:rgba(34,163,90,.35)}
:where(.css-app-admin-themes-accueil) .tca-card.is-draft:hover {border-color:#ea7a1f}
:where(.css-app-admin-themes-accueil) .tca-card.is-live:hover {border-color:#22a35a}

/* Le filtre */
:where(.css-app-admin-themes-accueil) .tca-filtre {display:inline-flex;border:1px solid var(--hair-soft,#333);border-radius:999px;padding:3px;gap:2px;background:rgba(12,12,17,.6)}
:where(.css-app-admin-themes-accueil) .tca-filtre button {border:0;background:transparent;color:inherit;font-size:.82rem;padding:6px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;opacity:.75}
:where(.css-app-admin-themes-accueil) .tca-filtre button:hover {opacity:1}
:where(.css-app-admin-themes-accueil) .tca-filtre button.on {background:var(--or,#c9a962);color:#14110b;opacity:1;font-weight:600}
:where(.css-app-admin-themes-accueil) .tca-filtre button b {font-weight:700;font-size:.74rem;opacity:.8}
:where(.css-app-admin-themes-accueil) .tca-filtre .pt {width:9px;height:9px;border-radius:50%;display:inline-block}
:where(.css-app-admin-themes-accueil) .tca-filtre .pt.draft {background:#ea7a1f}
:where(.css-app-admin-themes-accueil) .tca-filtre .pt.live {background:#22a35a}
:where(.css-app-admin-themes-accueil) .tca-vide {opacity:.7;margin:6px 0 30px}
:where(.css-app-admin-themes-accueil) .tca-sans[hidden] {display:none}
@media (max-width:640px){:where(.css-app-admin-themes-accueil) .tca-filtre {width:100%;justify-content:space-between}:where(.css-app-admin-themes-accueil) .tca-filtre button {padding:6px 10px}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-user
   Ancien fichier : pages/admin/user.css
   Activée par css_use('app/admin-user') dans : admin/user.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/user.php — sortis de la page (i102b). */

:where(.css-app-admin-user) .fi-top {display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
:where(.css-app-admin-user) .fi-ident h1 {margin:0}
:where(.css-app-admin-user) .fi-mail {font-size:.9rem;color:var(--muted,#aaa);word-break:break-all}
:where(.css-app-admin-user) .fi-badge {font-size:.68rem;letter-spacing:.05em;border-radius:2rem;padding:3px 12px;white-space:nowrap;border:1px solid}
:where(.css-app-admin-user) .fi-badge.vert {color:var(--success-light);border-color:rgba(143,214,173,.45)}
:where(.css-app-admin-user) .fi-badge.jaune {color:var(--gold-warm);border-color:rgba(var(--gold-warm-rgb),.45)}
:where(.css-app-admin-user) .fi-badge.bleu {color:#9dc3e6;border-color:rgba(157,195,230,.4)}
:where(.css-app-admin-user) .fi-badge.violet {color:#c4a7e7;border-color:rgba(196,167,231,.4)}
:where(.css-app-admin-user) .fi-badge.gris {color:var(--muted,#aaa);border-color:var(--hair-soft)}
:where(.css-app-admin-user) .fi-quoi {font-size:.84rem;color:var(--ivoire-2);margin:6px 0 0;max-width:70ch;line-height:1.55}
:where(.css-app-admin-user) .fi-meta {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 26px}
:where(.css-app-admin-user) .fi-meta dt {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);margin-bottom:3px}
:where(.css-app-admin-user) .fi-meta dd {margin:0 0 2px;font-size:.92rem}
/* 124 px et non 112 : « galeries parents » se coupait en deux lignes dont la
   seconde débordait sous le chiffre voisin. Un libellé qui passe à la ligne
   n'est pas un problème ; un libellé qui passe SOUS son voisin en est un. */
:where(.css-app-admin-user) .fi-kpi {display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:18px 16px}
:where(.css-app-admin-user) .fi-kpi div {text-align:center}
:where(.css-app-admin-user) .fi-kpi b {display:block;font-size:1.55rem;font-variant-numeric:tabular-nums;color:var(--or-clair);line-height:1.2}
:where(.css-app-admin-user) .fi-kpi span {display:block;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted,#aaa);line-height:1.35}
:where(.css-app-admin-user) .fi-kpi .nul b {color:rgba(255,255,255,.2)}
:where(.css-app-admin-user) .fi-eur {font-size:2rem;font-variant-numeric:tabular-nums;color:var(--or-clair)}
:where(.css-app-admin-user) .fi-t {width:100%;border-collapse:collapse;font-size:.86rem}
:where(.css-app-admin-user) .fi-t th {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);
  text-align:left;padding:0 10px 9px;font-weight:500;white-space:nowrap}
:where(.css-app-admin-user) .fi-t td {padding:11px 10px;border-top:1px solid var(--hair-soft);vertical-align:top}
:where(.css-app-admin-user) .fi-n {font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
:where(.css-app-admin-user) .fi-quand {font-size:.72rem;color:var(--muted,#aaa);white-space:nowrap}
:where(.css-app-admin-user) .fi-aide {font-size:.76rem;color:var(--muted,#aaa);line-height:1.55;margin-top:6px}
:where(.css-app-admin-user) .fi-lab {display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#aaa);margin-bottom:5px}
:where(.css-app-admin-user) .fi-corps {width:100%;min-height:210px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;line-height:1.6}
:where(.css-app-admin-user) .fi-marq {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
:where(.css-app-admin-user) .fi-marq button,
:where(.css-app-admin-user) .fi-modele {font-family:ui-monospace,monospace;font-size:.74rem;letter-spacing:.04em;
  background:rgba(var(--gold-soft-rgb),.1);border:1px solid rgba(var(--gold-soft-rgb),.3);color:var(--or-clair);
  border-radius:2rem;padding:3px 12px;cursor:pointer}
:where(.css-app-admin-user) .fi-modele {font-family:inherit}
:where(.css-app-admin-user) .fi-marq button:hover,
:where(.css-app-admin-user) .fi-modele:hover {background:rgba(var(--gold-soft-rgb),.2)}
:where(.css-app-admin-user) .fi-msg {border-top:1px solid var(--hair-soft);padding:14px 0}
:where(.css-app-admin-user) .fi-msg-sujet {font-weight:600;color:var(--or-clair)}
:where(.css-app-admin-user) .fi-msg-corps {white-space:pre-wrap;font-size:.84rem;line-height:1.6;color:var(--ivoire-2);
  margin-top:7px;max-height:150px;overflow-y:auto}
@media(max-width:900px){:where(.css-app-admin-user) .fi-t,
:where(.css-app-admin-user) .fi-t tbody,
:where(.css-app-admin-user) .fi-t tr,
:where(.css-app-admin-user) .fi-t td {display:block;width:100%}
  :where(.css-app-admin-user) .fi-t thead {display:none}
  :where(.css-app-admin-user) .fi-t tr {border-top:1px solid var(--hair-soft);padding:10px 0}
  :where(.css-app-admin-user) .fi-t td {border:0;padding:3px 0}
  :where(.css-app-admin-user) .fi-n {text-align:left}}

/* ═══ i211 — la fiche devient un tableau de bord de l'usage ═══════════════ */
:where(.css-app-admin-user) .fu-badges {margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
:where(.css-app-admin-user) .fi-badge.rouge {color:var(--danger);border-color:rgba(230,129,127,.45)}
:where(.css-app-admin-user) .fu-nav {position:sticky;top:60px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 0;padding:8px 0;
  background:linear-gradient(180deg,var(--noir) 70%,transparent)}
:where(.css-app-admin-user) .fu-nav a {font-size:.78rem;color:var(--ivoire-2);text-decoration:none;border:1px solid var(--hair-soft);
  border-radius:99px;padding:5px 12px;white-space:nowrap}
:where(.css-app-admin-user) .fu-nav a b {color:var(--or-clair);font-weight:600;margin-left:3px}
:where(.css-app-admin-user) .fu-nav a:hover {border-color:rgba(var(--gold-rgb),.6)}

/* La formule : trois blocs côte à côte, chacun avec son titre — plus de
   listes déroulantes qui se chevauchent dans une colonne de 190 px. */
:where(.css-app-admin-user) .fu-formule {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--hair-soft)}
:where(.css-app-admin-user) .fu-f {border:1px solid var(--hair-soft);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.015)}
:where(.css-app-admin-user) .fu-f-t {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);margin-bottom:4px}
:where(.css-app-admin-user) .fu-f-v {font-size:.92rem;margin-bottom:8px}
:where(.css-app-admin-user) .fu-f-form {display:flex;gap:6px;flex-wrap:wrap;align-items:center}
:where(.css-app-admin-user) .fu-f-form .form-select {width:auto;min-width:0;flex:1 1 130px;max-width:none}
:where(.css-app-admin-user) .fu-f-form .btn {flex:1 1 100%}

/* Activité + fil côte à côte sur grand écran. */
:where(.css-app-admin-user) .fu-duo {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 20px}
@media(max-width:1100px){:where(.css-app-admin-user) .fu-duo {grid-template-columns:1fr}}
:where(.css-app-admin-user) .fu-fil {max-height:430px;overflow-y:auto;padding-top:8px}
:where(.css-app-admin-user) .fu-fil-l {display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--hair-soft);font-size:.84rem}
:where(.css-app-admin-user) .fu-fil-l:last-child {border-bottom:0}
:where(.css-app-admin-user) .fu-fil-i {text-align:center}
:where(.css-app-admin-user) .fu-fil-l.rouge .fu-fil-x {color:var(--danger)}
:where(.css-app-admin-user) .fu-fil-l.vert .fu-fil-x {color:#bfe6cf}
:where(.css-app-admin-user) .fu-fil-l.gris .fu-fil-x {color:var(--muted,#aaa)}

/* Les fêtes : une ligne qui s'ouvre. */
:where(.css-app-admin-user) .fu-ev-h,
:where(.css-app-admin-user) .fu-ev>summary {display:grid;grid-template-columns:minmax(0,2.2fr) 92px 92px 110px minmax(0,1.6fr) 120px;gap:10px;align-items:center;padding:10px 18px}
:where(.css-app-admin-user) .fu-ev-h {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);padding-bottom:6px}
:where(.css-app-admin-user) .fu-ev {border-top:1px solid var(--hair-soft)}
:where(.css-app-admin-user) .fu-ev>summary {cursor:pointer;list-style:none;font-size:.86rem}
:where(.css-app-admin-user) .fu-ev>summary::-webkit-details-marker {display:none}
:where(.css-app-admin-user) .fu-ev>summary:hover {background:rgba(255,255,255,.025)}
:where(.css-app-admin-user) .fu-ev[open]>summary {background:rgba(var(--gold-rgb),.06)}
:where(.css-app-admin-user) .fu-ev-nom {display:flex;flex-direction:column;min-width:0}
:where(.css-app-admin-user) .fu-ev-nom b {font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.css-app-admin-user) .fu-ev-nom b::before {content:"▸ ";color:var(--or)}
:where(.css-app-admin-user) .fu-ev[open] .fu-ev-nom b::before {content:"▾ "}
:where(.css-app-admin-user) .fu-num {font-variant-numeric:tabular-nums}
:where(.css-app-admin-user) .fu-ia {display:block;font-size:.72rem;color:#c9a6ff}
:where(.css-app-admin-user) .fu-ia i {font-style:normal;color:var(--danger)}
:where(.css-app-admin-user) .fu-essais {display:flex;flex-wrap:wrap;gap:4px}
:where(.css-app-admin-user) .fu-e {font-size:.72rem;border:1px solid var(--hair-soft);border-radius:99px;padding:1px 7px;white-space:nowrap;color:var(--ivoire-2)}
:where(.css-app-admin-user) .fu-e.ko {color:var(--danger);border-color:rgba(230,129,127,.4)}
:where(.css-app-admin-user) .fu-ev-b {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;padding:14px 18px 20px;background:rgba(255,255,255,.015)}
:where(.css-app-admin-user) .fu-mini {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 16px;margin:0}
:where(.css-app-admin-user) .fu-mini dt {font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#aaa)}
:where(.css-app-admin-user) .fu-mini dd {margin:0;font-size:1rem;font-variant-numeric:tabular-nums}
:where(.css-app-admin-user) .fu-journal {max-height:240px;overflow-y:auto;font-size:.8rem;border:1px solid var(--hair-soft);border-radius:10px;padding:4px 10px;margin-bottom:10px}
:where(.css-app-admin-user) .fu-journal>div {display:grid;grid-template-columns:78px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid var(--hair-soft)}
:where(.css-app-admin-user) .fu-journal>div:last-child {border-bottom:0}
:where(.css-app-admin-user) .fu-journal>div.ko span:last-child {color:var(--danger)}
:where(.css-app-admin-user) .fu-journal b {font-weight:600;margin-left:4px;color:var(--or-clair)}
:where(.css-app-admin-user) .fu-journal i {display:block;font-style:normal;color:var(--muted,#aaa);font-size:.74rem}
:where(.css-app-admin-user) .fu-liens {display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem}

/* Vignettes de cadres et de références. */
:where(.css-app-admin-user) .fu-vignettes {display:flex;flex-wrap:wrap;gap:10px}
:where(.css-app-admin-user) .fu-vignettes figure {width:92px;margin:0}
:where(.css-app-admin-user) .fu-vignettes img,
:where(.css-app-admin-user) .fu-vide {display:block;width:92px;height:118px;object-fit:contain;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair-soft)}
:where(.css-app-admin-user) .fu-vide {display:grid;place-items:center;color:var(--or);font-size:1.4rem}
:where(.css-app-admin-user) .fu-vignettes figcaption {font-size:.68rem;color:var(--ivoire-2);margin-top:4px;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
:where(.css-app-admin-user) .fu-vignettes figcaption b {color:var(--or-clair)}
:where(.css-app-admin-user) .fu-vignettes figcaption i {font-style:normal;color:var(--muted,#aaa)}
:where(.css-app-admin-user) .fu-refs {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
:where(.css-app-admin-user) .fu-ref {display:flex;gap:10px;align-items:center;border:1px solid var(--hair-soft);border-radius:10px;padding:6px 10px 6px 6px;font-size:.84rem}
:where(.css-app-admin-user) .fu-ref img,
:where(.css-app-admin-user) .fu-ref .fu-vide {width:46px;height:60px;object-fit:cover;border-radius:6px;flex:0 0 auto;font-size:1rem}
:where(.css-app-admin-user) .fu-ko {color:var(--danger)}
:where(.css-app-admin-user) .fu-chips {display:flex;flex-wrap:wrap;gap:6px}
:where(.css-app-admin-user) .fu-chip {font-size:.8rem;border:1px solid var(--hair-soft);border-radius:99px;padding:4px 12px;color:var(--ivoire)}
:where(.css-app-admin-user) .fu-chip b {color:var(--or-clair);font-weight:600;margin-left:3px}
:where(.css-app-admin-user) .fu-chip i {font-style:normal;font-size:.7rem;color:var(--muted,#aaa);margin-left:4px}
:where(.css-app-admin-user) .fu-chip.off {opacity:.55}

/* La Magie IA : chiffres + six mois en barres. */
:where(.css-app-admin-user) .fu-ia-top {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:end}
@media(max-width:1000px){:where(.css-app-admin-user) .fu-ia-top {grid-template-columns:1fr}}
:where(.css-app-admin-user) .fu-barres {display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:150px;align-items:end;position:relative;padding-bottom:34px}
:where(.css-app-admin-user) .fu-barre {height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
:where(.css-app-admin-user) .fu-barre span {font-size:.66rem;color:var(--muted,#aaa)}
:where(.css-app-admin-user) .fu-pile {width:70%;min-height:2px;display:flex;flex-direction:column;border-radius:4px 4px 0 0;overflow:hidden;background:rgba(255,255,255,.06)}
:where(.css-app-admin-user) .fu-pile i,
:where(.css-app-admin-user) .fu-leg i {display:block}
:where(.css-app-admin-user) .fu-pile .o,
:where(.css-app-admin-user) .fu-leg .o {background:var(--or)}
:where(.css-app-admin-user) .fu-pile .k,
:where(.css-app-admin-user) .fu-leg .k {background:var(--danger)}
:where(.css-app-admin-user) .fu-pile .e,
:where(.css-app-admin-user) .fu-leg .e {background:#9d8bd6}
:where(.css-app-admin-user) .fu-leg {position:absolute;left:0;right:0;bottom:0;font-size:.68rem;color:var(--muted,#aaa);display:flex;gap:6px;align-items:center;justify-content:center}
:where(.css-app-admin-user) .fu-leg i {width:9px;height:9px;border-radius:2px;margin-left:8px}
:where(.css-app-admin-user) .fu-trio {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
:where(.css-app-admin-user) .fu-tab {width:100%;border-collapse:collapse;font-size:.84rem}
:where(.css-app-admin-user) .fu-tab td {padding:6px 0;border-bottom:1px solid var(--hair-soft);vertical-align:top}
:where(.css-app-admin-user) .fu-tab td+td {padding-left:12px}
:where(.css-app-admin-user) .fu-tab tr.nul td {opacity:.4}

@media(max-width:900px){
  :where(.css-app-admin-user) .fu-ev-h {display:none}
  :where(.css-app-admin-user) .fu-ev>summary {grid-template-columns:1fr 1fr;gap:6px 12px}
  :where(.css-app-admin-user) .fu-ev-nom {grid-column:1/-1}
  :where(.css-app-admin-user) .fu-ev-b {grid-template-columns:1fr}
  :where(.css-app-admin-user) .fu-nav {position:static}
}

/* i291 — Activation : parcours, prochaine action, essais (collection + cadre) */
:where(.css-app-admin-user) .act {margin:1.4rem 0 1.6rem;padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:18px;background:rgba(var(--gold-rgb),.035)}
:where(.css-app-admin-user) .act-h {display:flex;align-items:center;gap:.7rem;font-family:var(--font-serif);font-weight:600;font-size:1.5rem;margin:0 0 1rem}
:where(.css-app-admin-user) .act-nba {display:grid;gap:.25rem;padding:1rem 1.1rem;border-radius:14px;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.08);margin:0 0 1.2rem}
:where(.css-app-admin-user) .act-nba--support {border-color:rgba(230,129,127,.5);background:rgba(230,129,127,.08)}
:where(.css-app-admin-user) .act-nba-k {font-size:.8rem;color:var(--gold-light);font-weight:600}
:where(.css-app-admin-user) .act-nba-t {font-size:1.15rem;font-weight:700;color:var(--ivory)}
:where(.css-app-admin-user) .act-nba-r {font-size:.95rem;color:var(--ivory-2)}
:where(.css-app-admin-user) .act-nba .ui-btn {justify-self:start;margin-top:.4rem}
:where(.css-app-admin-user) .act-steps {list-style:none;margin:0 0 1.3rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.5rem}
:where(.css-app-admin-user) .act-step {display:flex;flex-direction:column;gap:.25rem;padding:.7rem .75rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
:where(.css-app-admin-user) .act-dot {width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;border:1px solid var(--line);color:var(--ivory-2)}
:where(.css-app-admin-user) .act-step.is-fait .act-dot {background:var(--success-light,#8fd6ad);border-color:transparent;color:#0b0a08}
:where(.css-app-admin-user) .act-step.is-current {border-color:var(--gold);box-shadow:0 0 0 1px rgba(var(--gold-rgb),.5)}
:where(.css-app-admin-user) .act-step.is-current .act-dot {border-color:var(--gold);color:var(--gold-light)}
:where(.css-app-admin-user) .act-step.is-blocked {border-color:rgba(230,129,127,.7);box-shadow:0 0 0 1px rgba(230,129,127,.4)}
:where(.css-app-admin-user) .act-step.is-blocked .act-dot {border-color:var(--danger);color:var(--danger)}
:where(.css-app-admin-user) .act-step.is-non {opacity:.62}
:where(.css-app-admin-user) .act-lib {font-size:.92rem;font-weight:600;color:var(--ivory);line-height:1.25}
:where(.css-app-admin-user) .act-quand {font-size:.85rem;color:var(--ivory-2)}
:where(.css-app-admin-user) .act-crea-h {font-size:1rem;font-weight:700;color:var(--ivory);margin:0 0 .6rem}
:where(.css-app-admin-user) .act-inconnu {color:var(--ivory-2);font-style:italic}
:where(.css-app-admin-user) .act-last {display:flex;gap:1rem;align-items:flex-start;margin:0 0 .9rem}
:where(.css-app-admin-user) .act-thumb {width:110px;height:auto;border-radius:10px;border:1px solid var(--line);background:#000;flex:none}
:where(.css-app-admin-user) .act-k {font-size:.85rem;color:var(--ivory-2);margin-bottom:.3rem}
:where(.css-app-admin-user) .act-v {font-size:.95rem;color:var(--ivory);margin:.12rem 0}
:where(.css-app-admin-user) .act-table {width:100%;border-collapse:collapse;font-size:.92rem;margin:.4rem 0 .6rem}
:where(.css-app-admin-user) .act-table th {text-align:left;font-weight:600;color:var(--ivory-2);padding:.4rem .5rem;border-bottom:1px solid var(--line)}
:where(.css-app-admin-user) .act-table td {padding:.45rem .5rem;border-bottom:1px solid var(--hair-soft,rgba(255,255,255,.06));color:var(--ivory)}
:where(.css-app-admin-user) .fu-sup {margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}   /* i293 */
:where(.css-app-admin-user) .fu-sup form {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-user-collections
   Ancien fichier : pages/admin/user-collections.css
   Activée par css_use('app/admin-user-collections') dans : admin/user-collections.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/user-collections.php — collections des organisateurs (i226). */

:where(.css-app-admin-user-collections) .uc { max-width: 1180px; }
:where(.css-app-admin-user-collections) .uc-filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; }
:where(.css-app-admin-user-collections) .uc-filtres a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(127,127,127,.3); font-size: .85rem; text-decoration: none; color: inherit; }
:where(.css-app-admin-user-collections) .uc-filtres a.on { border-color: var(--gold); background: rgba(var(--gold-rgb),.12); font-weight: 600; }
:where(.css-app-admin-user-collections) .uc-filtres a.pending { color: var(--gold); }
:where(.css-app-admin-user-collections) .uc-vide { opacity: .7; }
:where(.css-app-admin-user-collections) .uc-c { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; border: 1px solid rgba(127,127,127,.28); border-radius: 16px;
  padding: .9rem; margin-bottom: .9rem; }
:where(.css-app-admin-user-collections) .uc-c.pending { border-color: rgba(var(--gold-rgb),.6); }
:where(.css-app-admin-user-collections) .uc-img { aspect-ratio: 16 / 9; border-radius: 10px; background: #1b1522 center / cover no-repeat; }
:where(.css-app-admin-user-collections) .uc-b { min-width: 0; }
:where(.css-app-admin-user-collections) .uc-t { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .3rem; }
:where(.css-app-admin-user-collections) .uc-t b { font-size: 1.05rem; }
:where(.css-app-admin-user-collections) .uc-st { font-style: normal; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid; opacity: .85; }
:where(.css-app-admin-user-collections) .uc-st.pending { color: var(--gold); } :where(.css-app-admin-user-collections) .uc-st.approved { color: var(--success); } :where(.css-app-admin-user-collections) .uc-st.rejected { color: var(--danger); }
:where(.css-app-admin-user-collections) .uc-meta { font-size: .82rem; opacity: .78; line-height: 1.55; }
:where(.css-app-admin-user-collections) .uc-brief { margin: .5rem 0; font-size: .88rem; }
:where(.css-app-admin-user-collections) .uc-brief summary { cursor: pointer; font-weight: 600; }
:where(.css-app-admin-user-collections) .uc-brief p { margin: .35rem 0; }
:where(.css-app-admin-user-collections) .uc-refs,
:where(.css-app-admin-user-collections) .uc-cadres { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
:where(.css-app-admin-user-collections) .uc-refs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
:where(.css-app-admin-user-collections) .uc-cadres img { height: 96px; border-radius: 6px; background: rgba(127,127,127,.1); }
:where(.css-app-admin-user-collections) .uc-note { font-size: .85rem; color: var(--danger); margin: .3rem 0; }
:where(.css-app-admin-user-collections) .uc-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
:where(.css-app-admin-user-collections) .uc-refus { display: flex; gap: .4rem; flex: 1 1 280px; }
@media (max-width: 720px) { :where(.css-app-admin-user-collections) .uc-c { grid-template-columns: 1fr; } }
/* i232 — le brouillon de la plateforme */
:where(.css-app-admin-user-collections) .uc-copie { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; padding: .55rem .7rem; border-radius: 10px;
  border: 1px dashed rgba(var(--gold-rgb),.5); background: rgba(var(--gold-rgb),.06); font-size: .85rem; }
:where(.css-app-admin-user-collections) .uc-copie > span { flex: 1 1 260px; }
/* i234 — les portraits IA de l'organisateur */
:where(.css-app-admin-user-collections) .uc-portraits { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
:where(.css-app-admin-user-collections) .uc-portraits img { height: 96px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
:where(.css-app-admin-user-collections) .uc-feedback { font-size: .86rem; margin: .35rem 0; padding: .4rem .6rem; border-radius: 8px; background: rgba(127,127,127,.08); }
:where(.css-app-admin-user-collections) .uc-feedback.no { background: rgba(230,129,127,.1); }
:where(.css-app-admin-user-collections) .uc-warn {display:block;font-size:.78rem;color:#f2c14e;margin:4px 0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-users
   Ancien fichier : pages/admin/users.css
   Activée par css_use('app/admin-users') dans : admin/users.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/users.php — sortis de la page (i102b). */

:where(.css-app-admin-users) tr:target td {background:rgba(var(--gold-soft-rgb),.14);box-shadow:inset 3px 0 0 var(--or)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-worlds
   Ancien fichier : pages/admin/worlds.css
   Activée par css_use('app/admin-worlds') dans : admin/worlds.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/admin/worlds.php — Catalogue › Mondes interactifs (i108). */

:where(.css-app-admin-worlds) .mw-home { max-width: 1180px; }
:where(.css-app-admin-worlds) .mw-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .4rem 0 1.2rem; }
:where(.css-app-admin-worlds) .mw-filtre { font-size: .9rem; opacity: .9; }
:where(.css-app-admin-worlds) .mw-filtre a { margin-left: .5rem; font-size: .82rem; }
:where(.css-app-admin-worlds) .mw-count { margin-left: auto; font-size: .8rem; opacity: .6; }

:where(.css-app-admin-worlds) .mw-new { border: 1px solid var(--or); border-radius: 16px; padding: 1.2rem 1.3rem; margin: 0 0 1.6rem; }
:where(.css-app-admin-worlds) .mw-new h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.5rem; margin: 0 0 .8rem; }
:where(.css-app-admin-worlds) .mw-cherche { max-width: 320px; margin: .2rem 0 .5rem; }
:where(.css-app-admin-worlds) .mw-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem .8rem; max-height: 260px; overflow: auto; padding: 2px; }
:where(.css-app-admin-worlds) .mw-col { display: flex; gap: .5rem; align-items: center; font-size: .88rem; padding: .35rem .55rem; border: 1px solid var(--hair-soft); border-radius: 10px; cursor: pointer; }
:where(.css-app-admin-worlds) .mw-col:has(input:checked) { border-color: var(--or); background: rgba(var(--gold-soft-rgb),.08); }
:where(.css-app-admin-worlds) .mw-col[hidden] { display: none; }

:where(.css-app-admin-worlds) .mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-bottom: 2rem; }
:where(.css-app-admin-worlds) .mw-card { border: 1px solid var(--hair-soft); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: rgba(12,12,17,.6); }
:where(.css-app-admin-worlds) .mw-card:hover { border-color: var(--or); }
:where(.css-app-admin-worlds) .mw-vis { position: relative; display: block; aspect-ratio: 16 / 9; background: #1b1522; }
:where(.css-app-admin-worlds) .mw-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.css-app-admin-worlds) .mw-vide { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; opacity: .45; }
:where(.css-app-admin-worlds) .mw-etat { position: absolute; left: 10px; top: 10px; font-size: .72rem; font-weight: 600; padding: .18rem .6rem; border-radius: 99px;
  background: rgba(0,0,0,.62); color: #f0c46a; }
:where(.css-app-admin-worlds) .mw-etat.ok { color: #9fd3ad; }
:where(.css-app-admin-worlds) .mw-in { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
:where(.css-app-admin-worlds) .mw-nom { font-weight: 700; font-size: 1.05rem; color: inherit; text-decoration: none; }
:where(.css-app-admin-worlds) .mw-nom:hover { color: var(--or); }
:where(.css-app-admin-worlds) .mw-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
:where(.css-app-admin-worlds) .mw-chip { font-size: .74rem; padding: .15rem .55rem; border-radius: 99px; border: 1px solid var(--hair-soft); color: inherit; text-decoration: none; }
:where(.css-app-admin-worlds) .mw-chip:hover { border-color: var(--or); }
:where(.css-app-admin-worlds) .mw-chip.off { opacity: .6; border-style: dashed; }
:where(.css-app-admin-worlds) .mw-meta { font-size: .78rem; opacity: .7; line-height: 1.45; }
:where(.css-app-admin-worlds) .mw-acts { display: flex; gap: .5rem; align-items: center; margin-top: auto; padding-top: .3rem; }
:where(.css-app-admin-worlds) .mw-acts form { margin: 0 0 0 auto; }
:where(.css-app-admin-worlds) .mw-del { color: #ff8fb8; }

:where(.css-app-admin-worlds) .mw-pro { margin-top: .6rem; }
:where(.css-app-admin-worlds) .mw-pro > summary { cursor: pointer; opacity: .85; margin: .4rem 0 .8rem; }
:where(.css-app-admin-worlds) .mw-st { font-size: .7rem; padding: .1rem .45rem; border-radius: 99px; border: 1px solid currentColor; margin-left: .3rem; opacity: .8; }
:where(.css-app-admin-worlds) .mw-st.open { color: var(--success); }
:where(.css-app-admin-worlds) .mw-st.soon { color: var(--gold); }
:where(.css-app-admin-worlds) .mw-st.archived { opacity: .5; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-cabine
   Ancien fichier : pages/operator/event/cabine.css
   Activée par css_use('app/event-cabine') dans : operator/event/cabine.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/cabine.php — i253 : la cabine verrouillée, en trois étapes. */
:where(.css-app-event-cabine) .cab-lock {border:1px solid rgba(224,119,119,.45);border-radius:18px;padding:18px 20px;background:linear-gradient(160deg,rgba(224,119,119,.08),rgba(255,255,255,.015) 55%)}
:where(.css-app-event-cabine) .cab-lock-head {display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
:where(.css-app-event-cabine) .cab-lock-ico {flex:0 0 46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:rgba(224,119,119,.18);border:1px solid rgba(224,119,119,.5)}
:where(.css-app-event-cabine) .cab-lock-head b {display:block;font-size:1.1rem;color:#f0b3b3}
:where(.css-app-event-cabine) .cab-lock-head small {display:block;color:var(--ivoire-2);margin-top:3px;line-height:1.45}
:where(.css-app-event-cabine) .cab-steps {list-style:none;margin:0;padding:0;display:grid;gap:10px}
:where(.css-app-event-cabine) .cab-steps li {display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid var(--hair-soft);background:rgba(255,255,255,.02)}
:where(.css-app-event-cabine) .cab-n {flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;
  background:var(--or);color:var(--black)}
:where(.css-app-event-cabine) .cab-steps li.cab-last {border-color:rgba(var(--gold-soft-rgb),.55);background:rgba(var(--gold-soft-rgb),.07)}
:where(.css-app-event-cabine) .cab-steps li.cab-last .cab-n {background:transparent;border:1px solid var(--or);font-size:1rem}
:where(.css-app-event-cabine) .cab-body {flex:1;min-width:0}
:where(.css-app-event-cabine) .cab-body b {display:block;font-size:1rem}
:where(.css-app-event-cabine) .cab-body small {display:block;color:var(--muted,#aaa);margin-top:2px;line-height:1.45}
:where(.css-app-event-cabine) .cab-body .chip-group {margin-bottom:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-decor-formats
   Ancien fichier : pages/operator/event/decor-formats.css
   Activée par css_use('app/event-decor-formats') dans : operator/event/decor.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* i195 — Décor › formats de la collection : vignettes composées avec le texte de la fête. */
:where(.css-app-event-decor-formats) .js-fmt-toggle button {position:relative;display:block}
:where(.css-app-event-decor-formats) .js-fmt-toggle canvas.fmt-cv {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:.5rem;
  background:repeating-conic-gradient(#2a2a33 0 25%,#20202a 0 50%) 50%/14px 14px;opacity:0;transition:opacity .25s,outline .2s}
:where(.css-app-event-decor-formats) .js-fmt-toggle canvas.fmt-cv.fp-pret {opacity:1}
:where(.css-app-event-decor-formats) .js-fmt-toggle canvas.fmt-cv.fp-pret[style*="opacity: 0.28"],
:where(.css-app-event-decor-formats) .js-fmt-toggle canvas.fmt-cv.fp-pret[style*="opacity:.28"] {opacity:.28}
:where(.css-app-event-decor-formats) .js-fmt-toggle .fmt-badge {z-index:2}
:where(.css-app-event-decor-formats) .fmt-tx {position:absolute;z-index:2;left:6px;bottom:6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  font-size:.66rem;font-weight:700;line-height:1;background:rgba(10,9,7,.78);border:1px solid rgba(255,255,255,.15);color:var(--ivoire-2)}
:where(.css-app-event-decor-formats) .fmt-tx.ok {color:#86e0ad;border-color:rgba(127,224,166,.5)}
:where(.css-app-event-decor-formats) .fmt-tx.revoir {color:#f2c14e;border-color:rgba(242,193,78,.6)}
:where(.css-app-event-decor-formats) .fmt-tx.todo {color:#e6b366;border-color:rgba(230,179,102,.45)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-enfants
   Ancien fichier : pages/operator/event/enfants.css
   Activée par css_use('app/event-enfants') dans : operator/event/enfants.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/enfants.php — sortis de la page (i102b). */

/* ══ VUE COMPACTE (099) ════════════════════════════════════════════════
   L'écran faisait quatre écrans de haut pour quatorze enfants : chaque
   enfant occupait une fiche de cinq lignes, dont une entièrement prise par
   son adresse web affichée en clair — quatre-vingt-dix caractères que
   personne ne lit jamais, qu'on copie au mieux.

   Les deux listes disaient la même chose deux fois : en haut « prénom,
   adresse, code, photos » pour saisir ; en bas « état, lien, boutons » pour
   agir. Lire la première pour comprendre, descendre à la seconde pour faire,
   et retrouver la bonne ligne entre les deux — c'est le travail que ce
   doublon donnait à l'opérateur.

   Une seule ligne par enfant, maintenant : on y tape, on y voit, on y agit.
   L'adresse web est passée derrière un bouton « copier » ; l'historique des
   visites s'ouvre en panneau flottant, pour que la ligne ne grandisse pas.

   LES GESTES IRRÉVERSIBLES SONT SOUS « ⋯ », ET C'EST LE PRIX DE LA FUSION :
   « ↻ Nouveau lien » casse le lien déjà envoyé, « ✕ » efface les marquages.
   À portée de doigt d'un champ qu'on est en train de corriger, ils finiraient
   par être touchés. Deux gestes valent mieux qu'un regret. */

:where(.css-app-event-enfants) .en-kpis {display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin-bottom:1rem}
:where(.css-app-event-enfants) .en-kpi {border:1px solid var(--hair-soft);border-radius:10px;padding:8px 11px;background:rgba(var(--gold-soft-rgb),.04)}
:where(.css-app-event-enfants) .en-kpi b {font-family:var(--serif);font-size:1.25rem;line-height:1.1;color:var(--or);display:block}
:where(.css-app-event-enfants) .en-kpi small {display:block;font-size:.66rem;color:var(--muted,#aaa);margin-top:2px;line-height:1.3}
:where(.css-app-event-enfants) .en-kpi.warn {border-color:rgba(var(--gold-warm-rgb),.55)}
:where(.css-app-event-enfants) .en-kpi.warn b {color:var(--gold-warm)}

/* La ligne : prénom · adresse · code · photos · état · actions */
:where(.css-app-event-enfants) .en-row {position:relative;display:grid;
  grid-template-columns:minmax(118px,1fr) minmax(150px,1.45fr) 94px 70px minmax(140px,1fr) auto;
  gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid var(--hair-soft)}
:where(.css-app-event-enfants) .en-row:last-of-type {border-bottom:0}
:where(.css-app-event-enfants) .en-head {font-size:.61rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#aaa);
  padding-bottom:4px;border-bottom:1px solid var(--hair-soft);white-space:nowrap}
:where(.css-app-event-enfants) .en-head>div {overflow:hidden;text-overflow:ellipsis}
:where(.css-app-event-enfants) .en-head a {color:inherit;text-decoration:none}
:where(.css-app-event-enfants) .en-head a:hover {color:var(--or)}
:where(.css-app-event-enfants) .en-head a.on {color:var(--or)}
/* Des champs de 30 px : c'est la hauteur d'une ligne de tableau, pas celle
   d'un formulaire. Quatorze enfants ne doivent pas faire quatorze
   formulaires empilés. */
:where(.css-app-event-enfants) .en-row .form-control-sm {padding:.15rem .5rem;font-size:.82rem;height:30px;min-height:0;line-height:1.25}
:where(.css-app-event-enfants) .en-code {font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;font-size:.8rem;color:var(--or)}
:where(.css-app-event-enfants) .en-n {font-size:.8rem;color:var(--muted,#aaa);text-align:right;font-variant-numeric:tabular-nums}

/* L'état est aussi la poignée du journal : le texte qu'on lit est celui sur
   lequel on clique pour savoir pourquoi. */
:where(.css-app-event-enfants) .en-etat {min-width:0}
:where(.css-app-event-enfants) .en-etat>summary {cursor:pointer;list-style:none;font-size:.72rem;line-height:1.3;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.css-app-event-enfants) .en-etat>summary::-webkit-details-marker {display:none}
:where(.css-app-event-enfants) .en-etat.ok>summary {color:var(--success-light)}
:where(.css-app-event-enfants) .en-etat.att>summary {color:var(--gold-warm)}
:where(.css-app-event-enfants) .en-etat.non>summary {color:var(--muted,#aaa)}
:where(.css-app-event-enfants) .en-etat>summary:hover {text-decoration:underline}
/* FLOTTANT, ET PAS DANS LE FLUX : une ligne qui grandit de cent pixels
   pousse les treize autres et fait perdre celle qu'on regardait. */
:where(.css-app-event-enfants) .en-vis {position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:2px;
  background:#17140f;border:1px solid rgba(var(--gold-soft-rgb),.35);border-radius:10px;
  padding:10px 13px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
:where(.css-app-event-enfants) .en-vis ul {list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:230px;overflow:auto}
:where(.css-app-event-enfants) .en-vis li {display:flex;gap:12px;align-items:baseline;font-size:.78rem;color:var(--ivory-2);
  padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
:where(.css-app-event-enfants) .en-vis .d {margin-left:auto;font-variant-numeric:tabular-nums;opacity:.7;white-space:nowrap}

:where(.css-app-event-enfants) .en-act {display:flex;gap:3px;align-items:center;justify-content:flex-end}
:where(.css-app-event-enfants) .en-act .b {border:1px solid var(--hair-soft);background:none;color:var(--ivory-2);border-radius:7px;
  min-width:30px;height:30px;padding:0 6px;font-size:.82rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
:where(.css-app-event-enfants) .en-act .b:hover {border-color:var(--or);color:var(--or)}
:where(.css-app-event-enfants) .en-act .b.go {border-color:rgba(var(--gold-warm-rgb),.5);color:var(--gold-warm)}
:where(.css-app-event-enfants) .en-act .b.ok {border-color:rgba(143,214,173,.55);color:var(--success-light)}
:where(.css-app-event-enfants) .en-menu {position:relative}
:where(.css-app-event-enfants) .en-menu>summary {list-style:none;cursor:pointer}
:where(.css-app-event-enfants) .en-menu>summary::-webkit-details-marker {display:none}
:where(.css-app-event-enfants) .en-menu-box {position:absolute;right:0;top:calc(100% + 3px);z-index:30;min-width:190px;
  background:#17140f;border:1px solid rgba(var(--gold-soft-rgb),.35);border-radius:10px;padding:5px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);display:grid;gap:2px}
:where(.css-app-event-enfants) .en-menu-box button {width:100%;text-align:left;background:none;border:0;color:var(--ivory-2);
  padding:8px 10px;border-radius:7px;font-size:.8rem;cursor:pointer;white-space:nowrap}
:where(.css-app-event-enfants) .en-menu-box button:hover {background:rgba(255,255,255,.06)}
:where(.css-app-event-enfants) .en-menu-box .danger {color:#e69a9a}

@media(max-width:860px){
  :where(.css-app-event-enfants) .en-row {grid-template-columns:1fr auto;gap:5px;padding:9px 0}
  :where(.css-app-event-enfants) .en-row .en-mail {grid-column:1/-1}
  :where(.css-app-event-enfants) .en-row .en-code {grid-column:1/2}
  :where(.css-app-event-enfants) .en-row .en-n {grid-column:2/3;text-align:right}   /* à côté du code, pas sous lui */
  /* L'état et les boutons partagent leur ligne : le texte est court, les
     boutons tiennent à droite, et ça vaut une ligne de moins par enfant —
     douze de moins sur l'écran. */
  :where(.css-app-event-enfants) .en-row .en-etat {grid-column:1/2;min-width:0}
  :where(.css-app-event-enfants) .en-row .en-act {grid-column:2/3;justify-content:flex-end;margin-top:0}
  :where(.css-app-event-enfants) .en-head {display:none}
}

:where(.css-app-event-enfants) .en-relance {margin:10px 0 8px;padding:10px 13px;border-radius:10px;font-size:.84rem;line-height:1.5;
  background:rgba(224,178,119,.08);border:1px solid rgba(224,178,119,.42);color:#e8c79a}
:where(.css-app-event-enfants) .en-relance strong {margin-right:6px}
:where(.css-app-event-enfants) .en-relance.ok {background:rgba(143,214,173,.07);border-color:rgba(143,214,173,.35);color:var(--success-light)}
/* Les explications longues : présentes, repliées. Elles servent la première
   fois et encombrent les vingt suivantes. */
:where(.css-app-event-enfants) .en-aide>summary {cursor:pointer;font-size:.78rem;color:var(--muted,#aaa);list-style:none;padding:5px 0}
:where(.css-app-event-enfants) .en-aide>summary::-webkit-details-marker {display:none}
:where(.css-app-event-enfants) .en-aide>summary::before {content:"▸ ";color:var(--or)}
:where(.css-app-event-enfants) .en-aide[open]>summary::before {content:"▾ "}
:where(.css-app-event-enfants) .en-aide>summary:hover {color:#efe7d8}
:where(.css-app-event-enfants) .en-aide ol,
:where(.css-app-event-enfants) .en-aide p {font-size:.8rem;color:var(--muted,#aaa);line-height:1.6;margin:6px 0 0}
:where(.css-app-event-enfants) .en-cartes {display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
:where(.css-app-event-enfants) .en-cartes h2 {white-space:nowrap}
:where(.css-app-event-enfants) .en-cartes .en-aide {flex-basis:100%}
/* Ajouter : sous la liste, derrière un bouton. */
:where(.css-app-event-enfants) .en-plus {margin-top:14px;padding-top:12px;border-top:1px dashed rgba(var(--gold-soft-rgb),.22)}
:where(.css-app-event-enfants) .en-plus-box {margin-top:2px;max-width:540px}
:where(.css-app-event-enfants) .en-plus-box[hidden] {display:none}
/* La ligne qui vient d'apparaître se signale une seconde et demie : sinon,
   sur quatorze lignes, on ne sait pas laquelle est neuve. */
:where(.css-app-event-enfants) .en-neuve {animation:enNeuve 1.6s ease-out}
@keyframes enNeuve{from{background:rgba(var(--gold-soft-rgb),.18)}to{background:transparent}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-galerie-2
   Ancien fichier : pages/operator/event/galerie-2.css
   Activée par css_use('app/event-galerie-2') dans : operator/event/galerie.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/galerie.php (bloc 2) — sortis de la page (i102b). */

:where(.css-app-event-galerie-2) .ph-lot {border:1px solid var(--hair);border-radius:12px;
        padding:14px 16px;background:rgba(var(--gold-soft-rgb),.06)}
:where(.css-app-event-galerie-2) .ph-lot[hidden] {display:none}
:where(.css-app-event-galerie-2) .ph-lot-tete {display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
:where(.css-app-event-galerie-2) .ph-lot-enf {margin-bottom:12px}
:where(.css-app-event-galerie-2) .ph-lot-pied {display:flex;gap:12px;align-items:center;flex-wrap:wrap}
:where(.css-app-event-galerie-2) .ph-lot-mode {display:flex;gap:6px;align-items:center;font-size:.86rem;margin:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-ai-credits
   Ancien fichier : pages/operator/ai-credits.css
   Activée par css_use('app/operator-ai-credits') dans : operator/ai-credits.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BOOTH AI STUDIO — Photos IA (opérateur) : historique détaillé (i200). */
:where(.css-app-operator-ai-credits) #historique {scroll-margin-top:calc(var(--top-h, 60px) + 16px)}
:where(.css-app-operator-ai-credits) .hc-filtres {display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-bottom:14px}
:where(.css-app-operator-ai-credits) .hc-seg {display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;border:1px solid var(--hair-soft);background:rgba(0,0,0,.2)}
:where(.css-app-operator-ai-credits) .hc-seg a {padding:6px 12px;border-radius:9px;font-size:.8rem;color:var(--ivoire-2);text-decoration:none}
:where(.css-app-operator-ai-credits) .hc-seg a:hover {color:var(--ivoire);background:rgba(255,255,255,.04)}
:where(.css-app-operator-ai-credits) .hc-seg a.on {background:rgba(var(--gold-rgb),.16);color:var(--ivoire)}
:where(.css-app-operator-ai-credits) .hc-tag {font-style:normal;font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap}
:where(.css-app-operator-ai-credits) .hc-tag.paid {background:rgba(var(--gold-rgb),.18);color:#e8c95c}
:where(.css-app-operator-ai-credits) .hc-tag.pro {background:rgba(140,170,255,.16);color:#a9c0ff}
:where(.css-app-operator-ai-credits) .hc-tag.plus {background:rgba(127,224,166,.14);color:#86e0ad}
:where(.css-app-operator-ai-credits) .hc-synth {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media(max-width:800px){:where(.css-app-operator-ai-credits) .hc-synth {grid-template-columns:1fr}}
:where(.css-app-operator-ai-credits) .hc-box {padding:12px 14px;border-radius:12px;border:1px solid var(--hair-soft);background:rgba(255,255,255,.02)}
:where(.css-app-operator-ai-credits) .hc-box small {color:var(--ivoire-2)}
:where(.css-app-operator-ai-credits) .hc-nums {display:flex;gap:16px;margin-top:8px;font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-operator-ai-credits) .hc-nums b {font-size:1rem;margin-left:4px}
:where(.css-app-operator-ai-credits) .neg {color:#e9a3a3}
:where(.css-app-operator-ai-credits) .pos {color:#9fe8c0}
:where(.css-app-operator-ai-credits) .hc-ctrl {margin-top:8px;font-size:.74rem;padding:6px 8px;border-radius:8px}
:where(.css-app-operator-ai-credits) .hc-ctrl.ok {background:rgba(127,224,166,.08);color:#9fe8c0}
:where(.css-app-operator-ai-credits) .hc-ctrl.ko {background:rgba(230,150,90,.1);color:#f0a868}
:where(.css-app-operator-ai-credits) .hc-table th {font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ivoire-2);font-weight:500}
:where(.css-app-operator-ai-credits) .hc-det a {color:var(--ivoire)}
:where(.css-app-operator-ai-credits) .hc-det a:hover {color:var(--or)}
:where(.css-app-operator-ai-credits) .hc-pages {display:flex;justify-content:center;gap:16px;align-items:center;margin-top:12px;font-size:.84rem}
:where(.css-app-operator-ai-credits) .hc-note {margin:14px 0 0;font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-operator-ai-credits) .hc-sup {color:#f0a868;font-size:.76rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-ai-reference-edit
   Ancien fichier : pages/operator/ai-reference-edit.css
   Activée par css_use('app/operator-ai-reference-edit') dans : operator/ai-reference-edit.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/ai-reference-edit.php — sortis de la page (i102b). */

:where(.css-app-operator-ai-reference-edit) .rf-visuel {background:#111;border-radius:12px;overflow:hidden;display:flex;
           align-items:center;justify-content:center;min-height:260px}
:where(.css-app-operator-ai-reference-edit) .rf-visuel img {max-width:100%;max-height:420px;display:block}
:where(.css-app-operator-ai-reference-edit) .rf-legende {font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-bottom:.35rem}
:where(.css-app-operator-ai-reference-edit) .rf-legende span {text-transform:none;letter-spacing:0;opacity:.75}
:where(.css-app-operator-ai-reference-edit) .rf-chiffre {font-size:1.6rem;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums}
:where(.css-app-operator-ai-reference-edit) .rf-manque {color:#c96;font-size:.85rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-ai-references
   Ancien fichier : pages/operator/ai-references.css
   Activée par css_use('app/operator-ai-references') dans : operator/ai-references.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/ai-references.php — sortis de la page (i102b). */

/* Une référence en ligne porte un liseré vert. C'est ce qui permet de balayer
   la page des yeux au lieu de la lire : on repère les publiées sans lire un
   seul mot. */
:where(.css-app-operator-ai-references) .ref-card {transition:box-shadow .2s,border-color .2s}
:where(.css-app-operator-ai-references) .ref-card.ref-online {border-color:rgba(25,135,84,.75);box-shadow:0 0 0 1px rgba(25,135,84,.35)}
:where(.css-app-operator-ai-references) .ref-world {font-size:.78rem}
/* Les thèmes d'une référence : des pastilles discrètes, retirables. */
:where(.css-app-operator-ai-references) .ref-themes {display:flex;flex-wrap:wrap;gap:4px}
:where(.css-app-operator-ai-references) .ref-theme {display:inline-flex;align-items:center;gap:3px;max-width:100%;padding:2px 4px 2px 8px;border-radius:999px;
  font-size:.7rem;background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.3);color:var(--or-clair);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-ai-references) .ref-theme-x {border:0;background:transparent;color:inherit;opacity:.6;padding:0 3px;line-height:1;cursor:pointer}
:where(.css-app-operator-ai-references) .ref-theme-x:hover {opacity:1}
:where(.css-app-operator-ai-references) .ref-theme-vide {font-size:.7rem;color:var(--ivoire-2);opacity:.7}
:where(.css-app-operator-ai-references) .rf-sep {opacity:.5;margin:0 .2rem}

/* Barre d'outils : elle suit la page, sinon chercher oblige à remonter. Elle
   se cale sous la barre fixe du haut, pas en haut de l'écran. */
:where(.css-app-operator-ai-references) .rf-bar {position:sticky;top:var(--top-h,60px);z-index:30;margin:0 -12px 1.1rem;padding:.7rem 12px;
        background:rgba(var(--black-rgb),.94);backdrop-filter:blur(10px);
        border-bottom:1px solid var(--hair-soft)}
:where(.css-app-operator-ai-references) .rf-bar-in {display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
:where(.css-app-operator-ai-references) .rf-q {max-width:15rem;flex:1 1 9rem}
:where(.css-app-operator-ai-references) .rf-sel {width:auto;flex:0 1 auto}
:where(.css-app-operator-ai-references) #rf-filtre {max-width:12.5rem}
:where(.css-app-operator-ai-references) #rf-etat {max-width:9rem}
/* Le gabarit « au doigt » du reste du back-office rendrait cette ligne trop
   haute : ici tout doit tenir sur un rang, elle est collée en haut de l'écran. */
:where(.css-app-operator-ai-references) .rf-bar .form-control,
:where(.css-app-operator-ai-references) .rf-bar .form-select {min-height:0;padding:.45rem .7rem;font-size:.9rem}
:where(.css-app-operator-ai-references) .rf-bar .form-select {padding-right:1.9rem}
:where(.css-app-operator-ai-references) .rf-bar .btn {min-height:0;padding:.44rem .72rem;font-size:.8rem}
:where(.css-app-operator-ai-references) .rf-count {font-size:.85rem;color:var(--ivoire-2);white-space:nowrap}
:where(.css-app-operator-ai-references) .rf-grow {flex:1 1 auto}

:where(.css-app-operator-ai-references) .rf-selbar {display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem;
           padding:.55rem .8rem;border-radius:var(--r-sm,10px);color:var(--ivoire);
           background:rgba(var(--gold-rgb),.14);border:1px solid var(--hair)}
:where(.css-app-operator-ai-references) .rf-selbar[hidden] {display:none}

:where(.css-app-operator-ai-references) .rf-sec-tete {display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
:where(.css-app-operator-ai-references) .rf-plier {border:0;background:none;font-size:1rem;line-height:1;padding:.1rem .3rem;
          color:var(--or);cursor:pointer;transition:transform .18s}
:where(.css-app-operator-ai-references) .rf-sec.plie .rf-sec-corps {display:none}
:where(.css-app-operator-ai-references) .rf-sec.plie .rf-plier {transform:rotate(-90deg)}
:where(.css-app-operator-ai-references) .rf-sec[hidden] {display:none}
:where(.css-app-operator-ai-references) .rf-carte[hidden] {display:none}

/* La case de sélection : posée sur la vignette, pas dans le corps de la carte,
   pour qu'on puisse cocher vingt références sans viser. En bas à droite : le
   haut porte déjà le rendu et la pastille « en ligne ». */
:where(.css-app-operator-ai-references) .rf-coche {position:absolute;bottom:6px;right:6px;margin:0;padding:.3rem;border-radius:7px;
          background:rgba(var(--black-rgb),.78);border:1px solid var(--hair);
          cursor:pointer;z-index:3;line-height:0}
:where(.css-app-operator-ai-references) .rf-coche .form-check-input {margin:0;cursor:pointer}
:where(.css-app-operator-ai-references) .rf-carte .card {position:relative}
:where(.css-app-operator-ai-references) .rf-carte .card > a {position:relative}
:where(.css-app-operator-ai-references) .rf-carte.pick .card {outline:2px solid var(--or);outline-offset:1px}

/* La rangée de boutons d'une vignette passe à la ligne plutôt que de déborder
   de sa carte quand la colonne est étroite. */
:where(.css-app-operator-ai-references) .rf-carte .card-body .d-flex {flex-wrap:wrap}
/* Le libellé du rendu peut être long : il se coupe au lieu de dépasser de la
   vignette et de pousser toute la page vers la droite sur téléphone. */
:where(.css-app-operator-ai-references) .rf-carte .badge.position-absolute {max-width:calc(100% - 12px);overflow:hidden;
                                   text-overflow:ellipsis;white-space:nowrap}

/* Volet autonome : aucune dépendance au CDN. */
:where(.css-app-operator-ai-references) .rf-panel {position:fixed;inset:0;z-index:1080;display:flex;align-items:center;justify-content:center;padding:1rem}
:where(.css-app-operator-ai-references) .rf-panel[hidden] {display:none}
:where(.css-app-operator-ai-references) .rf-panel-fond {position:absolute;inset:0;background:rgba(0,0,0,.66)}
:where(.css-app-operator-ai-references) .rf-panel-boite {position:relative;background:var(--surf,#12100c);color:var(--ivoire);
                border:1px solid var(--hair);border-radius:var(--r-lg,18px);
                width:min(960px,100%);max-height:88vh;display:flex;flex-direction:column;
                box-shadow:var(--sh-3,0 22px 60px rgba(0,0,0,.55))}
:where(.css-app-operator-ai-references) .rf-panel-tete {display:flex;align-items:center;justify-content:space-between;gap:1rem;
               padding:.95rem 1.15rem;border-bottom:1px solid var(--hair-soft)}
:where(.css-app-operator-ai-references) .rf-panel-tete .btn-close {filter:invert(1) grayscale(1);opacity:.6}
:where(.css-app-operator-ai-references) .rf-panel-corps {padding:1.15rem;overflow:auto}

/* Collections (i160) : plus large, colonnes serrées, boutons toujours visibles à droite. */
:where(.css-app-operator-ai-references) #collModal .rf-panel-boite {width:min(1240px,100%)}
:where(.css-app-operator-ai-references) .coll-table th {white-space:nowrap}
:where(.css-app-operator-ai-references) .coll-table .c-nom {min-width:11rem}
:where(.css-app-operator-ai-references) .coll-table .c-pub {min-width:10rem}
:where(.css-app-operator-ai-references) .coll-table .c-num {width:4.5rem}
:where(.css-app-operator-ai-references) .coll-table .c-num input {min-width:3.5rem}
:where(.css-app-operator-ai-references) .coll-table .c-sw {width:4.5rem}
:where(.css-app-operator-ai-references) .coll-table .c-merge {min-width:11rem}
:where(.css-app-operator-ai-references) .coll-table .coll-into {min-width:7rem}
:where(.css-app-operator-ai-references) .coll-table .coll-slug {display:block;font-size:.72rem;opacity:.7;margin-top:.2rem}
:where(.css-app-operator-ai-references) .coll-table .c-act {position:sticky;right:0;white-space:nowrap;background:var(--surf,#12100c);
                   box-shadow:-10px 0 12px -10px rgba(0,0,0,.7);z-index:1}
/* !important : lux-admin.css impose ses couleurs aux boutons « outline » avec !important. */
:where(.css-app-operator-ai-references) .coll-table .coll-dirty .coll-save {background:var(--gold) !important;border-color:var(--gold) !important;color:var(--black-brown) !important;font-weight:700}

/* Le formulaire d'ajout est replié : sur cette page on vient dix fois chercher
   pour une fois déposer. « Ajouter » le déplie. */
:where(.css-app-operator-ai-references) #rf-ajout.replie > .card-body {display:none}
:where(.css-app-operator-ai-references) #rf-ajout.replie .rf-plier {transform:rotate(-90deg)}
:where(.css-app-operator-ai-references) #rf-ajout > .card-header {cursor:pointer;display:flex;align-items:center;gap:.5rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-brand
   Ancien fichier : pages/operator/brand.css
   Activée par css_use('app/operator-brand') dans : operator/brand.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ============================================================
   Styles de public/operator/brand.php — « Ma marque » (i277)
   ------------------------------------------------------------
   Mise en page seulement : boutons, chips, statuts, cartes,
   champs et interrupteurs viennent de components.css (ui-*).
   Couleurs : jetons de tokens.css ; --acc = couleur d'accent
   choisie par l'opérateur (posée sur .brand-page).
   L'ancienne version (i108/i193) est dans _local/i277/backup/.
   ============================================================ */

:where(.css-app-operator-brand) .brand-page { --brand-nav-w: 236px; }
:where(.css-app-operator-brand) .brand-page .ui-input,
:where(.css-app-operator-brand) .brand-page .ui-btn { box-sizing: border-box; }
:where(.css-app-operator-brand) .brand-page .brand-ic { width: 18px; height: 18px; flex: none; }
:where(.css-app-operator-brand) .brand-flash { margin-bottom: var(--space-4); align-items: center; }
:where(.css-app-operator-brand) .brand-flash .brand-ic { color: var(--status-on); }

/* ── En-tête ─────────────────────────────────────────────── */
:where(.css-app-operator-brand) .brand-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-5); align-items: center;
  margin-bottom: var(--space-5); padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line-soft); border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 160% at 0 0, color-mix(in srgb, var(--acc) 20%, transparent), transparent 55%),
    linear-gradient(135deg, var(--surface-2), var(--black));
}
:where(.css-app-operator-brand) .brand-hero__id { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
:where(.css-app-operator-brand) .brand-hero__txt { min-width: 0; }
:where(.css-app-operator-brand) .brand-hero .ui-title { margin: .1em 0 .3em; font-size: var(--text-2xl); }
:where(.css-app-operator-brand) .brand-hero__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
:where(.css-app-operator-brand) .brand-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
:where(.css-app-operator-brand) .brand-avatar {
  width: 76px; height: 76px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-3); box-shadow: 0 0 0 2px var(--acc), var(--shadow-2);
  font: 500 2rem/1 var(--font-serif); color: var(--acc);
}
:where(.css-app-operator-brand) .brand-avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--cream); padding: 12%; }
:where(.css-app-operator-brand) .brand-url {
  font-size: var(--text-xs); color: var(--ivory); background: rgba(var(--ivory-rgb), .05);
  padding: 5px 10px; border-radius: var(--radius-xs); word-break: break-all;
}
:where(.css-app-operator-brand) .brand-next {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px dashed var(--line); border-radius: var(--radius-md);
  color: var(--ivory-2); text-decoration: none; font-size: var(--text-sm);
  transition: border-color var(--ease-fast), background var(--ease-fast);
}
:where(.css-app-operator-brand) .brand-next:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .06); color: var(--ivory); }
:where(.css-app-operator-brand) .brand-next__txt { flex: 1; min-width: 0; }
:where(.css-app-operator-brand) .brand-next__txt b { color: var(--ivory); font-weight: 600; }

/* ── Deux colonnes : navigation + sections ───────────────── */
:where(.css-app-operator-brand) .brand-layout { display: grid; grid-template-columns: var(--brand-nav-w) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
:where(.css-app-operator-brand) .brand-sections { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
:where(.css-app-operator-brand) .brand-sec { scroll-margin-top: calc(var(--top-h, 60px) + 16px); }
:where(.css-app-operator-brand) .brand-sec .ui-card__head { align-items: flex-start; }
:where(.css-app-operator-brand) .brand-sec .ui-card__head .ui-hint { margin: 4px 0 0; max-width: 68ch; }
:where(.css-app-operator-brand) .brand-sec .ui-card__head .ui-eyebrow { letter-spacing: .2em; }

/* La navigation, qui est aussi la liste de contrôle */
:where(.css-app-operator-brand) .brand-nav {
  position: sticky; top: calc(var(--top-h, 60px) + 16px);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-1); padding: var(--space-3);
}
:where(.css-app-operator-brand) .brand-nav__progress { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft); margin-bottom: var(--space-2); }
:where(.css-app-operator-brand) .brand-nav__progress b { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ivory); }
:where(.css-app-operator-brand) .brand-nav__progress small { display: block; font-size: var(--text-2xs); color: var(--ivory-2); }
:where(.css-app-operator-brand) .brand-ring {
  --p: 0; width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--surface-1) 76%, transparent 78% 100%),
              conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(var(--ivory-rgb), .08) 0);
}
:where(.css-app-operator-brand) .brand-ring b { font: 600 .95rem/1 var(--font-serif); color: var(--gold); }
:where(.css-app-operator-brand) .brand-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
:where(.css-app-operator-brand) .brand-nav__link {
  display: flex; align-items: center; gap: var(--space-3); padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--ivory-2); text-decoration: none; border: 1px solid transparent;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}
:where(.css-app-operator-brand) .brand-nav__link:hover { background: rgba(var(--gold-rgb), .06); color: var(--ivory); }
:where(.css-app-operator-brand) .brand-nav__link[aria-current="true"] { border-color: var(--line); background: rgba(var(--gold-rgb), .09); color: var(--ivory); }
:where(.css-app-operator-brand) .brand-nav__link .brand-ic { color: var(--gold); }
:where(.css-app-operator-brand) .brand-nav__lib { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 500; }
:where(.css-app-operator-brand) .brand-nav__lib small { display: block; font-size: var(--text-2xs); font-weight: 400; color: var(--ivory-2); opacity: .8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-operator-brand) .brand-nav__st { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .7rem;
  border: 1px dashed rgba(var(--gold-warm-rgb), .55); }
:where(.css-app-operator-brand) .brand-nav__link.is-ok .brand-nav__st { border: 0; background: rgba(var(--status-on-rgb), .16); color: var(--status-on); }

/* ── Briques communes aux sections ───────────────────────── */
:where(.css-app-operator-brand) .brand-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
:where(.css-app-operator-brand) .brand-split__main { min-width: 0; }
:where(.css-app-operator-brand) .brand-split--portrait { grid-template-columns: minmax(0, 1fr) 220px; }
:where(.css-app-operator-brand) .brand-split--code { grid-template-columns: minmax(0, 1fr) 320px; }
:where(.css-app-operator-brand) .brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
:where(.css-app-operator-brand) .brand-grid--title { grid-template-columns: minmax(0, 1fr) 190px; }
:where(.css-app-operator-brand) .brand-h3 { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); }
:where(.css-app-operator-brand) .brand-h3:first-of-type { margin-top: 0; }
:where(.css-app-operator-brand) .brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
:where(.css-app-operator-brand) .brand-del { color: var(--status-off); }
:where(.css-app-operator-brand) .brand-del:hover { color: var(--status-off); background: rgba(var(--status-off-rgb), .10); }
:where(.css-app-operator-brand) .brand-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; }
:where(.css-app-operator-brand) .brand-mono::placeholder { font-family: var(--font-sans); letter-spacing: .02em; text-transform: none; }

/* Adresse */
:where(.css-app-operator-brand) .brand-inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--space-3); }
:where(.css-app-operator-brand) .brand-inline .ui-field { flex: 1 1 340px; margin-bottom: var(--space-3); }
:where(.css-app-operator-brand) .brand-inline > .ui-btn { margin-top: 28px; }
:where(.css-app-operator-brand) .brand-prefix { display: flex; align-items: stretch; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-3); overflow: hidden; transition: border-color var(--ease-fast), box-shadow var(--ease-fast); }
:where(.css-app-operator-brand) .brand-prefix:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18); }
:where(.css-app-operator-brand) .brand-prefix > span { display: grid; place-items: center; padding: 0 0 0 14px; color: var(--ivory-2); font-size: var(--text-sm); white-space: nowrap; }
:where(.css-app-operator-brand) .brand-prefix .ui-input { border: 0; background: transparent; padding-left: 2px; box-shadow: none; }
:where(.css-app-operator-brand) .brand-sub { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
:where(.css-app-operator-brand) .brand-sub__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
:where(.css-app-operator-brand) .brand-sub__head h3 { margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--ivory); }
:where(.css-app-operator-brand) .brand-sub .ui-hint { display: block; margin-bottom: var(--space-3); line-height: 1.6; }
:where(.css-app-operator-brand) .brand-sub .ui-hint strong { color: var(--ivory); }

/* Votre page : couleur, publication, images */
:where(.css-app-operator-brand) .brand-color { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-size-sm); padding: 0 12px 0 6px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-3); cursor: pointer; }
:where(.css-app-operator-brand) .brand-color input[type=color] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
:where(.css-app-operator-brand) .brand-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
:where(.css-app-operator-brand) .brand-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 8px; }
:where(.css-app-operator-brand) .brand-color code { color: var(--ivory-2); font-size: var(--text-xs); }
:where(.css-app-operator-brand) .brand-publish { margin: var(--space-2) 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(var(--ivory-rgb), .02); }
:where(.css-app-operator-brand) .brand-publish:has(input:checked) { border-color: rgba(var(--status-on-rgb), .35); background: rgba(var(--status-on-rgb), .05); }

:where(.css-app-operator-brand) .brand-uploads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5);
  padding-top: var(--space-5); border-top: 1px solid var(--line-soft); }
:where(.css-app-operator-brand) .brand-upload { display: flex; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line-soft);
  border-radius: var(--radius-md); background: rgba(var(--ivory-rgb), .02); min-width: 0; }
:where(.css-app-operator-brand) .brand-upload__thumb { flex: none; display: grid; place-items: center; overflow: hidden; color: var(--ivory-2);
  background: var(--surface-3); border: 1px dashed var(--line); }
:where(.css-app-operator-brand) .brand-upload__thumb img { width: 100%; height: 100%; display: block; }
:where(.css-app-operator-brand) .brand-upload.is-cover .brand-upload__thumb { width: 96px; height: 72px; border-radius: var(--radius-xs); }
:where(.css-app-operator-brand) .brand-upload.is-cover .brand-upload__thumb img { object-fit: cover; }
:where(.css-app-operator-brand) .brand-upload.is-logo .brand-upload__thumb { width: 72px; height: 72px; border-radius: 50%; }
:where(.css-app-operator-brand) .brand-upload.is-logo .brand-upload__thumb img { object-fit: contain; background: var(--cream); padding: 10%; }
:where(.css-app-operator-brand) .brand-upload__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
:where(.css-app-operator-brand) .brand-upload__body > b { font-size: var(--text-sm); font-weight: 600; }
:where(.css-app-operator-brand) .brand-upload__form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
:where(.css-app-operator-brand) .brand-file { position: relative; overflow: hidden; max-width: 100%; }
:where(.css-app-operator-brand) .brand-file > span { overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-operator-brand) .brand-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
:where(.css-app-operator-brand) .brand-file:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 3px; }
:where(.css-app-operator-brand) .brand-page .brand-upload .brand-ic,
:where(.css-app-operator-brand) .brand-page .brand-portrait__img .brand-ic { width: 26px; height: 26px; opacity: .6; }

:where(.css-app-operator-brand) .brand-preview-sticky { position: sticky; top: calc(var(--top-h, 60px) + 24px); display: flex; flex-direction: column; gap: var(--space-3); }

/* L'aperçu de la tête de page (i108, repris) : ce que les clients voient en arrivant */
:where(.css-app-operator-brand) .mq-apercu { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line-soft);
  background: var(--black-warm); color: var(--ivory); text-decoration: none; box-shadow: var(--shadow-2); }
:where(.css-app-operator-brand) a.mq-apercu[href]:hover { border-color: var(--line); color: var(--ivory); }
:where(.css-app-operator-brand) .mq-couv { aspect-ratio: 8 / 3; background:
  radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 60%),
  linear-gradient(135deg, var(--surface-2), var(--black-warm)); }
:where(.css-app-operator-brand) .mq-couv img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.css-app-operator-brand) .mq-id { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px 14px; margin-top: -30px; position: relative; }
:where(.css-app-operator-brand) .mq-logo { width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--surface-3); border: 3px solid var(--black-warm); box-shadow: 0 0 0 2px var(--acc); }
:where(.css-app-operator-brand) .mq-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--cream); padding: 12%; }
:where(.css-app-operator-brand) .mq-logo span { font: 500 1.7rem/1 var(--font-serif); color: var(--acc); }
:where(.css-app-operator-brand) .mq-txt { min-width: 0; padding-bottom: 2px; }
:where(.css-app-operator-brand) .mq-nom { font: 500 1.3rem/1.1 var(--font-serif); overflow-wrap: anywhere; }
:where(.css-app-operator-brand) .mq-tag { font-size: var(--text-2xs); color: var(--ivory-2); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.css-app-operator-brand) .mq-tag:empty { display: none; }

/* Vitrine : portrait */
:where(.css-app-operator-brand) .brand-portrait { display: flex; flex-direction: column; gap: var(--space-2); }
:where(.css-app-operator-brand) .brand-portrait__img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; display: grid; place-items: center;
  border: 1px dashed var(--line); background: var(--surface-3); color: var(--ivory-2); }
:where(.css-app-operator-brand) .brand-portrait__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Formules : des cartes */
:where(.css-app-operator-brand) .brand-empty { margin-bottom: var(--space-4); }
:where(.css-app-operator-brand) .brand-empty p { margin: 0 auto var(--space-4); max-width: 52ch; }
:where(.css-app-operator-brand) .brand-empty .ui-empty__ic .brand-ic { width: 32px; height: 32px; color: var(--gold); }
:where(.css-app-operator-brand) .brand-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-4); }
:where(.css-app-operator-brand) .brand-offer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line-soft);
  border-radius: var(--radius-md); background: var(--surface-2); transition: border-color var(--ease-fast); }
:where(.css-app-operator-brand) .brand-offer.is-featured { border-color: var(--line); box-shadow: inset 0 2px 0 var(--gold); }
:where(.css-app-operator-brand) .brand-offer.is-draft { background: rgba(var(--ivory-rgb), .015); border-style: dashed; }
:where(.css-app-operator-brand) .brand-offer__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-height: 24px; }
:where(.css-app-operator-brand) .brand-offer .ui-input { min-height: 40px; font-size: var(--text-sm); }
:where(.css-app-operator-brand) .brand-offer textarea.ui-input { min-height: 84px; }
:where(.css-app-operator-brand) .brand-offer__title.ui-input { font: 500 var(--text-lg)/1.2 var(--font-serif); min-height: 44px; }
:where(.css-app-operator-brand) .brand-offer__price.ui-input { color: var(--gold-light); font-weight: 600; }
:where(.css-app-operator-brand) .brand-offer .ui-chips { margin-top: 2px; }
:where(.css-app-operator-brand) .brand-offer .ui-chip { min-height: 30px; font-size: var(--text-2xs); }
:where(.css-app-operator-brand) .brand-offer__foot { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
:where(.css-app-operator-brand) .brand-offer--new { border: 1px dashed var(--line); background: transparent; justify-content: center; }
:where(.css-app-operator-brand) .brand-offer__plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; align-self: center;
  border: 1px solid var(--line); color: var(--gold); margin-bottom: var(--space-2); }

/* Galeries : des cartes à cocher */
:where(.css-app-operator-brand) .brand-gals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); }
:where(.css-app-operator-brand) .brand-gal { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(var(--ivory-rgb), .02); cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast); }
:where(.css-app-operator-brand) .brand-gal:hover { border-color: var(--line); }
:where(.css-app-operator-brand) .brand-gal > input { position: absolute; opacity: 0; pointer-events: none; }
:where(.css-app-operator-brand) .brand-gal__check { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center;
  border: 1px solid var(--line); color: transparent; transition: background var(--ease-fast), color var(--ease-fast); }
:where(.css-app-operator-brand) .brand-gal__check .brand-ic { width: 15px; height: 15px; }
:where(.css-app-operator-brand) .brand-gal:has(> input:checked) { border-color: var(--gold); background: rgba(var(--gold-rgb), .08); }
:where(.css-app-operator-brand) .brand-gal:has(> input:checked) .brand-gal__check { background: var(--gold); border-color: var(--gold); color: var(--black-brown); }
:where(.css-app-operator-brand) .brand-gal:has(> input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }
:where(.css-app-operator-brand) .brand-gal.is-empty { opacity: .5; cursor: not-allowed; }
:where(.css-app-operator-brand) .brand-gal__txt { min-width: 0; }
:where(.css-app-operator-brand) .brand-gal__txt b { display: block; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.css-app-operator-brand) .brand-gal__txt small { display: block; font-size: var(--text-2xs); color: var(--ivory-2); }

/* Code de sortie */
:where(.css-app-operator-brand) .brand-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-3); }
:where(.css-app-operator-brand) .brand-code code { font: 600 1.7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .24em; color: var(--ivory); }
:where(.css-app-operator-brand) .brand-code code.is-hidden { color: var(--ivory-2); }
:where(.css-app-operator-brand) .brand-code .ui-hint { flex-basis: 100%; }
:where(.css-app-operator-brand) .brand-codeform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 var(--space-3); align-items: end; }
:where(.css-app-operator-brand) .brand-codeform .ui-btn { margin-bottom: var(--space-4); }
:where(.css-app-operator-brand) .brand-split--code .ui-notice { margin-bottom: var(--space-4); }
:where(.css-app-operator-brand) .brand-facts { list-style: none; margin: 0 0 var(--space-3); padding: var(--space-4); border-radius: var(--radius-md);
  background: rgba(var(--gold-rgb), .05); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--space-3); }
:where(.css-app-operator-brand) .brand-facts li { display: flex; gap: var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: var(--ivory-2); }
:where(.css-app-operator-brand) .brand-facts li .brand-ic { color: var(--gold); width: 16px; height: 16px; margin-top: 1px; }
:where(.css-app-operator-brand) .brand-facts b { color: var(--ivory); font-weight: 600; }

/* ── Écrans plus étroits ─────────────────────────────────── */
@media (max-width: 1280px) {
  :where(.css-app-operator-brand) .brand-split,
:where(.css-app-operator-brand) .brand-split--code { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-operator-brand) .brand-split--portrait { grid-template-columns: minmax(0, 1fr) 200px; }
  :where(.css-app-operator-brand) .brand-split--preview .brand-split__side { order: -1; }
  :where(.css-app-operator-brand) .brand-preview-sticky { position: static; max-width: 520px; }
}
@media (max-width: 1100px) {
  /* La navigation devient une barre de chips collante au-dessus des sections. */
  :where(.css-app-operator-brand) .brand-layout { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-operator-brand) .brand-nav { z-index: 20; padding: 6px; background: rgba(var(--black-rgb), .9); backdrop-filter: blur(10px); }
  :where(.css-app-operator-brand) .brand-nav__progress { display: none; }
  :where(.css-app-operator-brand) .brand-nav ul { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  :where(.css-app-operator-brand) .brand-nav__link { flex: none; padding: 6px 12px; border-radius: var(--radius-pill); }
  :where(.css-app-operator-brand) .brand-nav__lib small { display: none; }
  :where(.css-app-operator-brand) .brand-nav__lib { white-space: nowrap; }
  :where(.css-app-operator-brand) .brand-nav ul::-webkit-scrollbar { display: none; }
  :where(.css-app-operator-brand) .brand-nav__st { width: 16px; height: 16px; font-size: .6rem; }
}
@media (max-width: 760px) {
  :where(.css-app-operator-brand) .brand-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  :where(.css-app-operator-brand) .brand-hero__actions { justify-content: flex-start; }
  :where(.css-app-operator-brand) .brand-next { flex-wrap: wrap; }
  :where(.css-app-operator-brand) .brand-next__txt { flex-basis: calc(100% - 30px); }
  :where(.css-app-operator-brand) .brand-avatar { width: 58px; height: 58px; font-size: 1.6rem; }
  :where(.css-app-operator-brand) .brand-split--portrait,
:where(.css-app-operator-brand) .brand-grid,
:where(.css-app-operator-brand) .brand-grid--title,
:where(.css-app-operator-brand) .brand-uploads,
:where(.css-app-operator-brand) .brand-codeform { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-operator-brand) .brand-portrait { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  :where(.css-app-operator-brand) .brand-portrait__img { width: 110px; }
  :where(.css-app-operator-brand) .brand-inline > .ui-btn { margin-top: 0; }
  :where(.css-app-operator-brand) .brand-code code { font-size: 1.3rem; }
}

/* ══ i277b — VERSION COMPACTE ═══════════════════════════════════════════
   Même page, moins de hauteur : marges, champs et vignettes resserrés,
   adresse et sous-domaine côte à côte, réseaux sur 4 colonnes. */
:where(.css-app-operator-brand) .brand-page .ui-card__head { padding: 12px 18px; }
:where(.css-app-operator-brand) .brand-page .ui-card__body { padding: 16px 18px; }
:where(.css-app-operator-brand) .brand-page .ui-card__title { font-size: 1.25rem; }
:where(.css-app-operator-brand) .brand-sec .ui-card__head .ui-hint { margin-top: 2px; font-size: var(--text-2xs); }
:where(.css-app-operator-brand) .brand-sections { gap: 14px; }
:where(.css-app-operator-brand) .brand-layout { gap: 16px; }
:where(.css-app-operator-brand) .brand-page .ui-field { margin-bottom: 10px; gap: 4px; }
:where(.css-app-operator-brand) .brand-page .ui-label { font-size: .8rem; }
:where(.css-app-operator-brand) .brand-page .ui-input { min-height: 38px; padding: 0 12px; font-size: .9rem; }
:where(.css-app-operator-brand) .brand-page textarea.ui-input { min-height: 64px; padding: 8px 12px; }
:where(.css-app-operator-brand) .brand-page .ui-btn { min-height: 38px; }
:where(.css-app-operator-brand) .brand-page .ui-btn--sm { min-height: 30px; }
:where(.css-app-operator-brand) .brand-page .ui-switch { margin-bottom: 10px; }

:where(.css-app-operator-brand) .brand-hero { padding: 14px 20px; margin-bottom: 14px; gap: 10px 16px; border-radius: var(--radius-lg); }
:where(.css-app-operator-brand) .brand-hero__id { gap: 14px; }
:where(.css-app-operator-brand) .brand-avatar { width: 52px; height: 52px; font-size: 1.5rem; }
:where(.css-app-operator-brand) .brand-hero .ui-title { font-size: var(--text-xl); margin: 0 0 .25em; }
:where(.css-app-operator-brand) .brand-next { padding: 7px 12px; font-size: var(--text-xs); }

:where(.css-app-operator-brand) .brand-nav { padding: 8px; }
:where(.css-app-operator-brand) .brand-nav__progress { padding: 4px 4px 8px; margin-bottom: 4px; gap: 10px; }
:where(.css-app-operator-brand) .brand-ring { width: 42px; height: 42px; }
:where(.css-app-operator-brand) .brand-ring b { font-size: .82rem; }
:where(.css-app-operator-brand) .brand-nav__link { padding: 6px 8px; gap: 10px; }
:where(.css-app-operator-brand) .brand-nav__lib { font-size: var(--text-xs); }

:where(.css-app-operator-brand) .brand-h3 { margin: 14px 0 8px; }
:where(.css-app-operator-brand) .brand-actions { margin-top: 10px; }
:where(.css-app-operator-brand) .brand-split { gap: 20px; grid-template-columns: minmax(0, 1fr) 260px; }
:where(.css-app-operator-brand) .brand-split--portrait { grid-template-columns: minmax(0, 1fr) 170px; }
:where(.css-app-operator-brand) .brand-split--code { grid-template-columns: minmax(0, 1fr) 290px; }
:where(.css-app-operator-brand) .brand-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:where(.css-app-operator-brand) .brand-grid--contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Adresse | Adresse à votre nom */
:where(.css-app-operator-brand) .brand-addr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
:where(.css-app-operator-brand) .brand-addr .brand-sub { margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--line-soft); }
:where(.css-app-operator-brand) .brand-addr .brand-sub .ui-hint { font-size: var(--text-2xs); margin-bottom: 8px; }
:where(.css-app-operator-brand) .brand-inline .ui-field { flex-basis: 220px; margin-bottom: 4px; }
:where(.css-app-operator-brand) .brand-inline > .ui-btn { margin-top: 22px; }

:where(.css-app-operator-brand) .brand-publish { margin: 4px 0 10px; padding: 8px 12px; }
:where(.css-app-operator-brand) .brand-uploads { margin-top: 14px; padding-top: 14px; gap: 10px; }
:where(.css-app-operator-brand) .brand-upload { padding: 10px; gap: 10px; }
:where(.css-app-operator-brand) .brand-upload.is-cover .brand-upload__thumb { width: 72px; height: 54px; }
:where(.css-app-operator-brand) .brand-upload.is-logo .brand-upload__thumb { width: 54px; height: 54px; }
:where(.css-app-operator-brand) .brand-upload__form { margin-top: 4px; }
:where(.css-app-operator-brand) .brand-preview-sticky { gap: 8px; }

:where(.css-app-operator-brand) .brand-portrait { gap: 6px; }
:where(.css-app-operator-brand) .brand-portrait__img { aspect-ratio: 1 / 1; }

:where(.css-app-operator-brand) .brand-empty { padding: 20px; }
:where(.css-app-operator-brand) .brand-offers { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
:where(.css-app-operator-brand) .brand-offer { padding: 12px; gap: 6px; }
:where(.css-app-operator-brand) .brand-offer .ui-input { min-height: 34px; }
:where(.css-app-operator-brand) .brand-offer textarea.ui-input { min-height: 56px; }
:where(.css-app-operator-brand) .brand-offer__title.ui-input { min-height: 38px; font-size: var(--text-md); }
:where(.css-app-operator-brand) .brand-offer__plus { width: 32px; height: 32px; margin-bottom: 4px; }

:where(.css-app-operator-brand) .brand-gals { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
:where(.css-app-operator-brand) .brand-gal { padding: 8px 10px; gap: 10px; }

:where(.css-app-operator-brand) .brand-code { padding: 10px 14px; margin-bottom: 14px; gap: 10px; }
:where(.css-app-operator-brand) .brand-code code { font-size: 1.35rem; }
:where(.css-app-operator-brand) .brand-codeform .ui-btn { margin-bottom: 10px; }
:where(.css-app-operator-brand) .brand-facts { padding: 12px; gap: 8px; margin-bottom: 8px; }

@media (max-width: 1280px) {
  :where(.css-app-operator-brand) .brand-split,
:where(.css-app-operator-brand) .brand-split--code { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-operator-brand) .brand-split--portrait { grid-template-columns: minmax(0, 1fr) 150px; }
  :where(.css-app-operator-brand) .brand-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :where(.css-app-operator-brand) .brand-addr { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-operator-brand) .brand-addr .brand-sub { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 760px) {
  :where(.css-app-operator-brand) .brand-split--portrait,
:where(.css-app-operator-brand) .brand-grid--4,
:where(.css-app-operator-brand) .brand-grid--contact { grid-template-columns: minmax(0, 1fr); }
  :where(.css-app-operator-brand) .brand-inline > .ui-btn { margin-top: 0; }
  :where(.css-app-operator-brand) .brand-portrait__img { width: 90px; }
}

/* ══ i277c — MENU HORIZONTAL COLLANT EN HAUT ═══════════════════════════
   La navigation (= liste de contrôle) quitte la colonne de gauche : une
   barre horizontale collée sous la barre du haut, à toutes les largeurs.
   Les sections prennent toute la largeur. */
:where(.css-app-operator-brand) .brand-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
:where(.css-app-operator-brand) .brand-nav {
  position: sticky; top: calc(var(--top-h, 60px) + 8px); z-index: 20;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-pill); background: rgba(var(--black-rgb), .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-1);
}
:where(.css-app-operator-brand) .brand-nav__progress { display: flex; flex: none; align-items: center; gap: 8px; margin: 0; padding: 0 12px 0 0;
  border-bottom: 0; border-right: 1px solid var(--line-soft); }
:where(.css-app-operator-brand) .brand-nav__progress small { display: none; }
:where(.css-app-operator-brand) .brand-nav__progress b { font-size: var(--text-xs); white-space: nowrap; }
:where(.css-app-operator-brand) .brand-ring { width: 36px; height: 36px; }
:where(.css-app-operator-brand) .brand-ring b { font-size: .72rem; }
:where(.css-app-operator-brand) .brand-nav ul { flex: 1; min-width: 0; flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; }
:where(.css-app-operator-brand) .brand-nav ul::-webkit-scrollbar { display: none; }
:where(.css-app-operator-brand) .brand-nav__link { flex: none; padding: 6px 12px; border-radius: var(--radius-pill); }
:where(.css-app-operator-brand) .brand-nav__lib { white-space: nowrap; }
:where(.css-app-operator-brand) .brand-nav__lib small { display: none; }
:where(.css-app-operator-brand) .brand-nav__st { width: 16px; height: 16px; font-size: .6rem; }
:where(.css-app-operator-brand) .brand-sec { scroll-margin-top: calc(var(--top-h, 60px) + 72px); }
:where(.css-app-operator-brand) .brand-preview-sticky { top: calc(var(--top-h, 60px) + 76px); }

@media (max-width: 900px) {
  :where(.css-app-operator-brand) .brand-nav__progress b { display: none; }
  :where(.css-app-operator-brand) .brand-nav__progress { padding-right: 8px; }
}
@media (max-width: 600px) {
  :where(.css-app-operator-brand) .brand-nav { border-radius: var(--radius-md); }
  :where(.css-app-operator-brand) .brand-nav__progress { display: none; }
  :where(.css-app-operator-brand) .brand-nav__link .brand-ic { display: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-brand-messages
   Ancien fichier : pages/operator/brand-messages.css
   Activée par css_use('app/operator-brand-messages') dans : operator/brand-messages.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/brand-messages.php — sortis de la page (i102b). */

:where(.css-app-operator-brand-messages) .bm {display:flex;flex-direction:column;gap:14px}
:where(.css-app-operator-brand-messages) .bm-carte {border:1px solid var(--hair-soft);border-radius:14px;padding:18px 20px;background:var(--noir2)}
:where(.css-app-operator-brand-messages) .bm-carte.neuf {border-color:var(--or);box-shadow:0 0 0 1px rgba(var(--gold-soft-rgb),.25)}
:where(.css-app-operator-brand-messages) .bm-tete {display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
:where(.css-app-operator-brand-messages) .bm-nom {font-family:var(--serif);font-size:1.25rem}
:where(.css-app-operator-brand-messages) .bm-quand {font-size:.78rem;color:var(--ivoire-2);margin-left:auto}
:where(.css-app-operator-brand-messages) .bm-coord {display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;margin-bottom:10px}
:where(.css-app-operator-brand-messages) .bm-coord a {color:var(--or);text-decoration:none}
:where(.css-app-operator-brand-messages) .bm-texte {white-space:pre-line;line-height:1.7;color:var(--ivoire-2)}
:where(.css-app-operator-brand-messages) .bm-actes {display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
:where(.css-app-operator-brand-messages) .bm-pastille {font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--or);color:var(--noir);padding:3px 10px;border-radius:999px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-catalogue
   Ancien fichier : pages/operator/catalogue.css
   Activée par css_use('app/operator-catalogue') dans : operator/catalogue.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/catalogue.php — sortis de la page (i102b). */

/* Les trois volets = trois grandes vignettes illustrées (vraies images du catalogue) */
:where(.css-app-operator-catalogue) .cat-tabs {display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 26px}
@media(max-width:980px){:where(.css-app-operator-catalogue) .cat-tabs {grid-template-columns:1fr}}

/* ── LA RECHERCHE QUI TRAVERSE TOUT ─────────────────────────────
   Elle est POSÉE AU-DESSUS des trois volets, et c'est délibéré : on cherche
   avant de savoir dans quel volet la chose se trouve. Le champ de chaque
   volet, plus bas, reste un filtre — il réduit une liste déjà ouverte. */
:where(.css-app-operator-catalogue) .cat-quete {position:relative;margin:0 0 22px}
:where(.css-app-operator-catalogue) .cat-quete-ch {display:flex;align-items:center;gap:12px;border:2px solid var(--hair-soft);border-radius:16px;background:var(--surface-3);padding:4px 16px;transition:border-color .2s}
:where(.css-app-operator-catalogue) .cat-quete-ch:focus-within {border-color:var(--or);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18)}
:where(.css-app-operator-catalogue) .cat-quete-ch .loupe {font-size:1.3rem;opacity:.6}
:where(.css-app-operator-catalogue) .cat-quete-ch input {flex:1;background:transparent;border:0;outline:0;color:var(--ivoire);font-size:1.18rem;padding:16px 0;min-width:0}
:where(.css-app-operator-catalogue) .cat-quete-ch input::placeholder {color:var(--ivoire-2);opacity:.7}
:where(.css-app-operator-catalogue) .cat-quete-ch .vider {border:0;background:transparent;color:var(--ivoire-2);font-size:1.3rem;cursor:pointer;line-height:1;padding:6px}
/* La croix native du champ `search` doublerait la nôtre — deux × côte à côte,
   dont un bleu système qui jure avec tout le reste. */
:where(.css-app-operator-catalogue) .cat-quete-ch input::-webkit-search-cancel-button {-webkit-appearance:none;appearance:none}
:where(.css-app-operator-catalogue) .cq-res {position:absolute;z-index:40;left:0;right:0;top:calc(100% + 8px);background:var(--black);border:1px solid var(--hair);border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.6);max-height:min(66vh,620px);overflow:auto;display:none}
:where(.css-app-operator-catalogue) .cq-res.on {display:block}
:where(.css-app-operator-catalogue) .cq-grp {padding:10px 14px 4px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-clair);border-top:1px solid var(--hair-soft)}
:where(.css-app-operator-catalogue) .cq-grp:first-child {border-top:0}
:where(.css-app-operator-catalogue) .cq-li {display:flex;gap:12px;align-items:center;padding:9px 14px;color:var(--ivoire);text-decoration:none}
:where(.css-app-operator-catalogue) .cq-li:hover,
:where(.css-app-operator-catalogue) .cq-li.sur {background:rgba(var(--gold-rgb),.12);color:var(--ivoire)}
:where(.css-app-operator-catalogue) .cq-li .vig {width:62px;height:44px;flex:none;border-radius:8px;overflow:hidden;background:#141210;display:flex;align-items:center;justify-content:center}
:where(.css-app-operator-catalogue) .cq-li .vig img {max-width:100%;max-height:100%;object-fit:contain}
:where(.css-app-operator-catalogue) .cq-li .txt {flex:1;min-width:0}
/* `display:block` : sans lui, ces deux spans sont en ligne et le nom se
   colle à son format — « Aquarelle fraises4 cadre(s) ». */
:where(.css-app-operator-catalogue) .cq-li .nom {display:block;font-size:.98rem;line-height:1.25}
:where(.css-app-operator-catalogue) .cq-li .met {display:block;font-size:.76rem;color:var(--ivoire-2);margin-top:3px}
:where(.css-app-operator-catalogue) .cq-etat {padding:16px;color:var(--ivoire-2);font-size:.9rem;text-align:center}

/* ── CE QU'EST CE VOLET, ET COMMENT ON S'EN SERT ────────────────── */
:where(.css-app-operator-catalogue) .cat-compte {display:flex;align-items:center;gap:10px;margin:0 0 12px}
:where(.css-app-operator-catalogue) .cat-filtre-actif {display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--or);color:var(--or);text-decoration:none;font-size:.84rem}
:where(.css-app-operator-catalogue) .cat-filtre-actif:hover {background:rgba(var(--gold-rgb),.14);color:var(--or)}
:where(.css-app-operator-catalogue) .cat-intro {border:1px solid var(--hair-soft);border-left:3px solid var(--or);border-radius:14px;background:rgba(20,18,16,.6);padding:16px 20px;margin:0 0 20px}
:where(.css-app-operator-catalogue) .cat-intro h2 {font-family:var(--serif);font-size:1.35rem;margin:0 0 6px;color:var(--or-clair)}
:where(.css-app-operator-catalogue) .cat-intro p {margin:0;font-size:.92rem;color:var(--ivoire-2);line-height:1.55;max-width:78ch}
:where(.css-app-operator-catalogue) .cat-etapes {display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0 0;padding:0;list-style:none}
@media(max-width:760px){:where(.css-app-operator-catalogue) .cat-etapes {grid-template-columns:1fr}}
:where(.css-app-operator-catalogue) .cat-etapes li {display:flex;gap:10px;font-size:.86rem;color:var(--ivoire-2);line-height:1.45}
:where(.css-app-operator-catalogue) .cat-etapes b {flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--or);color:var(--or);display:flex;align-items:center;justify-content:center;font-size:.76rem}
/* Un cadre trouvé par la recherche : on doit voir LEQUEL, sinon l'arrivée sur
   une liste filtrée ne dit rien. */
@keyframes cq-pointe{0%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0)}20%,60%{box-shadow:0 0 0 4px rgba(var(--gold-rgb),.55)}}
:where(.css-app-operator-catalogue) .ci.pointe {animation:cq-pointe 2.4s ease-in-out 1}
:where(.css-app-operator-catalogue) .cat-tab {display:block;position:relative;border:2px solid var(--hair-soft);border-radius:16px;overflow:hidden;background:var(--surface-3);color:var(--ivoire);text-decoration:none;transition:border-color .2s,transform .2s}
:where(.css-app-operator-catalogue) .cat-tab:hover {border-color:var(--hair);transform:translateY(-2px);color:var(--ivoire)}
:where(.css-app-operator-catalogue) .cat-tab.on {border-color:var(--or);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.25)}
:where(.css-app-operator-catalogue) .cat-tab-vis {display:flex;gap:8px;height:215px;padding:12px;background:#070706}
:where(.css-app-operator-catalogue) .cat-tab-vis span {flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:var(--surface-3)}
:where(.css-app-operator-catalogue) .cat-tab-vis span.cover img {width:100%;height:100%;object-fit:cover}
:where(.css-app-operator-catalogue) .cat-tab-vis img {max-width:100%;max-height:100%;object-fit:contain}
:where(.css-app-operator-catalogue) .cat-tab-vis .ph {font-size:2.4rem;opacity:.35}
:where(.css-app-operator-catalogue) .cat-tab-txt {padding:16px 18px 18px}
:where(.css-app-operator-catalogue) .cat-tab-t {font-family:var(--serif);font-size:1.62rem;line-height:1.1}
:where(.css-app-operator-catalogue) .cat-tab.on .cat-tab-t {color:var(--or)}
:where(.css-app-operator-catalogue) .cat-tab-s {font-size:.86rem;color:var(--ivoire-2);margin-top:6px;line-height:1.45}
:where(.css-app-operator-catalogue) .cat-tab-go {margin-top:10px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
:where(.css-app-operator-catalogue) .cat-tab-n {position:absolute;top:10px;right:10px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(var(--black-rgb),.85);border:1px solid var(--hair);color:var(--or-clair)}
:where(.css-app-operator-catalogue) .cat-tab.on .cat-tab-n {background:var(--or);color:var(--noir);border-color:var(--or)}
:where(.css-app-operator-catalogue) .cat-search {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
:where(.css-app-operator-catalogue) .cat-search input {max-width:340px}
:where(.css-app-operator-catalogue) .cat-filt {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
:where(.css-app-operator-catalogue) .cat-filt a {padding:7px 14px;border-radius:999px;border:1px solid var(--hair-soft);color:var(--ivoire-2);text-decoration:none;font-size:.8rem}
:where(.css-app-operator-catalogue) .cat-filt a.on {border-color:var(--or);color:var(--or)}
:where(.css-app-operator-catalogue) .cg {display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* PLUS GRANDES, ET C'EST LE SUJET. Une carte de collection montre quatre ou
   cinq tirages côte à côte : à 280 px, chacun faisait un centimètre et l'on
   ne voyait ni le cadre, ni le texte, ni la photo — donc rien de ce qui fait
   choisir. On en met moins par rangée et on les voit. */
:where(.css-app-operator-catalogue) .cg.wide {grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px}
:where(.css-app-operator-catalogue) .ci {position:relative;border:1px solid var(--hair-soft);border-radius:14px;background:var(--surface-3);overflow:hidden;display:flex;flex-direction:column}
:where(.css-app-operator-catalogue) .ci:hover {border-color:var(--hair)}
:where(.css-app-operator-catalogue) .ci.mine {border-color:rgba(var(--gold-soft-rgb),.55)}
:where(.css-app-operator-catalogue) .ci-vis {position:relative;background:#070706;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
:where(.css-app-operator-catalogue) .ci-vis img {max-width:100%;max-height:100%;object-fit:contain}
:where(.css-app-operator-catalogue) .ci-vis.cover img {width:100%;height:100%;object-fit:cover}
:where(.css-app-operator-catalogue) .ci-zoom,
:where(.css-app-operator-catalogue) .ci-style {cursor:zoom-in}
/* ── LA CARTE-LIEN ────────────────────────────────────────────────────── */
:where(.css-app-operator-catalogue) .ci-carte {text-decoration:none;color:inherit;transition:border-color .18s,transform .18s}
:where(.css-app-operator-catalogue) .ci-carte:hover {border-color:var(--or);transform:translateY(-3px);color:inherit}
/* L'ÉCRAN D'ACCUEIL EN FOND DE PANNEAU, pas en bande au-dessus.
   Au-dessus, il ajoutait 88 px à la carte — et comme une rangée de grille
   s'aligne sur la plus haute, TOUTES les cartes de la rangée grandissaient
   avec elle, en laissant du vide sous les autres. Ici il occupe la partie
   haute du panneau, celle que l'étagère laisse libre puisque les tirages
   reposent en bas, et il s'efface vers le papier là où ils commencent. */
/* LE DÉCOR (i80) : tout le panneau, pas une bande. L'écran d'accueil en
   plein cadre, ou le premier cadre flouté ; un voile sombre en bas pour que
   les tirages et le bouton se détachent toujours. */
:where(.css-app-operator-catalogue) .ci-fond {position:absolute;inset:0;z-index:0;overflow:hidden;background:#15120d}
:where(.css-app-operator-catalogue) .ci-fond img,
:where(.css-app-operator-catalogue) .ci-fond video {width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
:where(.css-app-operator-catalogue) .ci-fond.flou img {filter:blur(18px) saturate(1.25) brightness(.62);transform:scale(1.35)}
:where(.css-app-operator-catalogue) .ci-fond::after {content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,5,.05) 0%,rgba(8,7,5,.18) 45%,rgba(8,7,5,.72) 100%)}
:where(.css-app-operator-catalogue) .ci-carte:hover .ci-fond img,
:where(.css-app-operator-catalogue) .ci-carte:hover .ci-fond video {transform:scale(1.04)}
:where(.css-app-operator-catalogue) .ci-carte:hover .ci-fond.flou img {transform:scale(1.4)}
:where(.css-app-operator-catalogue) .ci-tiles.etagere {position:relative;z-index:1}
:where(.css-app-operator-catalogue) .ci-go {margin-top:9px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
:where(.css-app-operator-catalogue) .ci-carte:hover .ci-go {color:var(--or-clair)}
:where(.css-app-operator-catalogue) .sp-ref {background:#070706;border-radius:12px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
:where(.css-app-operator-catalogue) .sp-ref img {width:100%;height:100%;object-fit:cover}
:where(.css-app-operator-catalogue) .sp-ex {display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
:where(.css-app-operator-catalogue) .sp-ex span {aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#070706;display:block}
:where(.css-app-operator-catalogue) .sp-ex img {width:100%;height:100%;object-fit:cover}
:where(.css-app-operator-catalogue) .sp-empty {padding:26px 14px;text-align:center;color:var(--ivoire-2);border:1px dashed var(--hair-soft);border-radius:12px;font-size:.85rem}
:where(.css-app-operator-catalogue) .sp-stat {display:flex;gap:18px;margin:10px 0 12px}:where(.css-app-operator-catalogue) .sp-stat b {font-family:var(--serif);font-size:1.6rem;color:var(--or);line-height:1}:where(.css-app-operator-catalogue) .sp-stat small {display:block;color:var(--ivoire-2);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
:where(.css-app-operator-catalogue) .fp-big {display:flex;align-items:center;justify-content:center;background:#070706;border-radius:12px;min-height:50vh;max-height:72vh;overflow:hidden}
:where(.css-app-operator-catalogue) .fp-big img {max-width:100%;max-height:72vh;object-fit:contain}
:where(.css-app-operator-catalogue) .ci-tiles {display:flex;gap:4px;width:100%;height:100%;padding:8px}
:where(.css-app-operator-catalogue) .ci-tiles span {flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
:where(.css-app-operator-catalogue) .ci-tiles img,
:where(.css-app-operator-catalogue) .ci-tiles canvas {max-width:100%;max-height:100%;object-fit:contain}

/* ── L'ÉTAGÈRE, sur la carte ────────────────────────────────────────────
   HAUTEUR COMMUNE, LARGEUR LIBRE. C'est tout le principe : une bande 2×6 et
   un 4×6 paysage alignés sur la même hauteur montrent d'un coup d'œil lequel
   est étroit. Dans des cases de largeur égale, ils occupaient la même place et
   la comparaison disparaissait.

   Les tirages larges dépassent donc de la carte, et c'est assumé : centrés, la
   coupe est symétrique et se lit comme une pile qui continue — la même idée
   qu'une photo de produit où les tirages débordent du cadrage. */
/* Un panneau CARRÉ laissait un grand vide clair au-dessus des tirages : sur
   une étagère, la hauteur perdue se voit. On raccourcit le panneau au lieu
   d'étirer les tirages, qui perdraient leurs proportions. */
:where(.css-app-operator-catalogue) .ci-vis.etagere {background:radial-gradient(120% 90% at 50% 20%,#2a241b,#0d0b08);aspect-ratio:4/3}
/* Les 34 px du bas ne sont pas une marge esthétique : le bouton « Assigner »
   est posé là en absolu, et sans eux les tirages passaient dessous. */
/* TOUS LES TIRAGES DANS LA CARTE (i80). Ils débordaient et se faisaient
   couper aux bords. Hauteur commune toujours (la comparaison des formats),
   mais le script `ajusterEtageres()` la réduit quand la rangée est plus
   large que la carte : rien n'est plus rogné. */
:where(.css-app-operator-catalogue) .ci-tiles.etagere {align-items:flex-end;justify-content:center;gap:10px;
                  padding:22px 14px 50px;overflow:hidden}
:where(.css-app-operator-catalogue) .ci-tiles.etagere span {flex:0 0 auto;display:block;line-height:0;overflow:visible}
:where(.css-app-operator-catalogue) .ci-tiles.etagere img,
:where(.css-app-operator-catalogue) .ci-tiles.etagere canvas {
    height:var(--h-etagere,140px);width:auto;max-width:none;max-height:none;display:block;background:#fff;
    border-radius:3px;box-shadow:0 14px 28px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
    transition:transform .25s ease}
:where(.css-app-operator-catalogue) .ci-carte:hover .ci-tiles.etagere span:nth-child(2) img,
:where(.css-app-operator-catalogue) .ci-carte:hover .ci-tiles.etagere span:nth-child(2) canvas {transform:translateY(-4px)}

/* Le canvas apparaît en fondu une fois peint : sinon on voit un rectangle
   vide le temps que les photos arrivent, ce qui fait « cassé ». */
:where(.css-app-operator-catalogue) .ci-tiles canvas {opacity:0;transition:opacity .3s}
:where(.css-app-operator-catalogue) .ci-tiles canvas.fp-pret {opacity:1}
:where(.css-app-operator-catalogue) .ci-tiles canvas.fp-rate {opacity:.55}
/* La vignette d'un cadre du catalogue : elle occupe la case comme l'image
   qu'elle remplace, et apparaît en fondu une fois peinte. */
:where(.css-app-operator-catalogue) canvas.cf-vue {max-width:100%;max-height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .3s}
:where(.css-app-operator-catalogue) canvas.cf-vue.fp-pret {opacity:1}
:where(.css-app-operator-catalogue) canvas.cf-vue.fp-rate {opacity:.55}
:where(.css-app-operator-catalogue) .fp-big canvas {max-width:100%;max-height:72vh;display:block;margin:0 auto}
:where(.css-app-operator-catalogue) .cat-vide {max-width:60ch;margin:40px auto;text-align:center;color:var(--ivoire-2);line-height:1.6}
:where(.css-app-operator-catalogue) .ci-badge {position:absolute;top:10px;left:10px;z-index:3;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(var(--black-rgb),.85);border:1px solid var(--hair);color:var(--or-clair)}
:where(.css-app-operator-catalogue) .ci-badge.free {color:#9fe8c0;border-color:rgba(126,240,178,.4)}
:where(.css-app-operator-catalogue) .ci-badge.promo {color:#ffd58a;border-color:rgba(224,168,74,.55)}   /* i292 */
:where(.css-app-operator-catalogue) .ci-badge.promo s {opacity:.6}
:where(.css-app-operator-catalogue) .ci-badge.lic {color:#111;background:var(--gold-soft);border-color:var(--gold-soft)}
:where(.css-app-operator-catalogue) .ci-body {padding:12px 14px 14px}
:where(.css-app-operator-catalogue) .ci-name {font-family:var(--serif);font-size:1.22rem;line-height:1.2;color:var(--ivoire);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-catalogue) .ci-meta {font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivoire-2);margin-top:2px}
:where(.css-app-operator-catalogue) .ci-act {display:flex;gap:6px;margin-top:8px}
:where(.css-app-operator-catalogue) .ci-act .btn {flex:1;font-size:.74rem;padding:7px 6px}
:where(.css-app-operator-catalogue) .cat-empty {padding:48px 20px;text-align:center;color:var(--ivoire-2);border:1px dashed var(--hair-soft);border-radius:14px}

/* ══ i198 — LE CATALOGUE COMMENCE PAR UNE QUESTION ═════════════════════════ */
:where(.css-app-operator-catalogue) .ct-hero {position:relative;border:1px solid rgba(var(--gold-rgb),.18);border-radius:20px;padding:26px 28px 20px;margin:0 0 22px;
  background:radial-gradient(120% 140% at 0 0,#1d1710 0%,#0d0b09 60%)}
:where(.css-app-operator-catalogue) .ct-hero-t h1 {font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.6rem);margin:0 0 4px;color:var(--ivoire)}
:where(.css-app-operator-catalogue) .ct-hero-t p {margin:0 0 16px;color:var(--ivoire-2);font-size:.98rem}
:where(.css-app-operator-catalogue) .ct-search {margin:0}
:where(.css-app-operator-catalogue) .ct-search .cat-quete-ch {background:var(--black)}
:where(.css-app-operator-catalogue) .ct-go {flex:none;border:0;border-radius:12px;padding:10px 20px;font-weight:600;font-size:.9rem;cursor:pointer;
  background:linear-gradient(135deg,#e9c770,#c9a24a);color:#1a1409}
:where(.css-app-operator-catalogue) .ct-go:hover {filter:brightness(1.08)}
:where(.css-app-operator-catalogue) .ct-mine {display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.8rem}
:where(.css-app-operator-catalogue) .ct-mine a {color:var(--ivoire-2);text-decoration:none}
:where(.css-app-operator-catalogue) .ct-mine a:hover {color:var(--or)}

:where(.css-app-operator-catalogue) .ct-step {margin:0 0 20px}
:where(.css-app-operator-catalogue) .ct-step h2 {display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:1.08rem;font-weight:600;color:var(--ivoire);margin:0 0 12px}
:where(.css-app-operator-catalogue) .ct-num {width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;
  background:rgba(var(--gold-rgb),.14);color:var(--or);border:1px solid rgba(var(--gold-rgb),.4)}
:where(.css-app-operator-catalogue) .ct-occ {display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
:where(.css-app-operator-catalogue) .ct-occ a {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:12px 8px;
  border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:var(--ivoire);text-decoration:none;text-align:center;
  transition:border-color .15s,background .15s,transform .15s}
:where(.css-app-operator-catalogue) .ct-occ a:hover {border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.06);transform:translateY(-2px);color:var(--ivoire)}
:where(.css-app-operator-catalogue) .ct-occ a.on {border-color:var(--or);background:rgba(var(--gold-rgb),.12);box-shadow:0 0 0 2px rgba(var(--gold-rgb),.25)}
:where(.css-app-operator-catalogue) .ct-occ-e {font-size:1.7rem;line-height:1}
:where(.css-app-operator-catalogue) .ct-occ b {font-weight:500;font-size:.84rem;line-height:1.25}
:where(.css-app-operator-catalogue) .ct-occ small {position:absolute;top:6px;right:8px;font-size:.66rem;color:var(--ivoire-2);opacity:.7}
:where(.css-app-operator-catalogue) .ct-occ-txt {grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
:where(.css-app-operator-catalogue) .ct-occ-txt a {min-height:58px}

:where(.css-app-operator-catalogue) .ct-types {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
:where(.css-app-operator-catalogue) .ct-type {display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);color:var(--ivoire);text-decoration:none;transition:border-color .15s,background .15s}
:where(.css-app-operator-catalogue) .ct-type:hover {border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.05);color:var(--ivoire)}
:where(.css-app-operator-catalogue) .ct-type.on {border-color:var(--or);background:rgba(var(--gold-rgb),.1);box-shadow:0 0 0 2px rgba(var(--gold-rgb),.22)}
:where(.css-app-operator-catalogue) .ct-type-ic {flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;background:rgba(var(--gold-rgb),.12)}
:where(.css-app-operator-catalogue) .ct-type-t {flex:1;min-width:0}
:where(.css-app-operator-catalogue) .ct-type-t b {display:block;font-weight:600;font-size:.98rem}
:where(.css-app-operator-catalogue) .ct-type-t small {display:block;font-size:.76rem;color:var(--ivoire-2);line-height:1.35}
:where(.css-app-operator-catalogue) .ct-type-n {flex:none;font-family:var(--serif);font-size:1.5rem;color:var(--or)}

:where(.css-app-operator-catalogue) .ct-bar {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin:6px 0 16px;padding:12px 0;
  border-top:1px solid var(--hair-soft)}
:where(.css-app-operator-catalogue) .ct-actifs {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
:where(.css-app-operator-catalogue) .ct-n {font-size:.86rem;color:var(--ivoire-2)}
:where(.css-app-operator-catalogue) .ct-raz {font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-operator-catalogue) .ct-raz:hover {color:var(--or)}
:where(.css-app-operator-catalogue) .ct-fins summary {cursor:pointer;font-size:.84rem;color:var(--ivoire-2);list-style:none;text-align:right}
:where(.css-app-operator-catalogue) .ct-fins summary::-webkit-details-marker {display:none}
:where(.css-app-operator-catalogue) .ct-fins[open] summary {color:var(--or);margin-bottom:8px}
:where(.css-app-operator-catalogue) .ct-fins .cat-filt {justify-content:flex-end}
:where(.css-app-operator-catalogue) .ct-tout {display:flex;flex-direction:column;align-items:center;gap:8px;margin:26px 0 10px;text-align:center}
:where(.css-app-operator-catalogue) .ct-tout small {color:var(--ivoire-2)}
@media(max-width:900px){:where(.css-app-operator-catalogue) .ct-types {grid-template-columns:1fr}:where(.css-app-operator-catalogue) .ct-hero {padding:20px 16px}:where(.css-app-operator-catalogue) .ct-fins summary {text-align:left}:where(.css-app-operator-catalogue) .ct-fins .cat-filt {justify-content:flex-start}}
@media(max-width:560px){:where(.css-app-operator-catalogue) .ct-occ {grid-template-columns:repeat(3,minmax(0,1fr))}:where(.css-app-operator-catalogue) .ct-go {padding:10px 12px}}
/* i257 — 👑 Ma collection : la création de l'organisateur, gratuite et illimitée pour lui */
:where(.css-app-operator-catalogue) .ci-badge.mine-crown {background:linear-gradient(135deg,#f6d77a,var(--gold-soft));color:#2a1d05;border-color:#f6d77a;font-weight:700;box-shadow:0 4px 14px rgba(var(--gold-soft-rgb),.45)}
:where(.css-app-operator-catalogue) .ci.is-own {border-color:rgba(246,215,122,.7);box-shadow:0 0 0 1px rgba(246,215,122,.45) inset}
:where(.css-app-operator-catalogue) .ci-own {font-size:.75rem;color:#f6d77a;margin:4px 0 2px;line-height:1.35}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-collection
   Ancien fichier : pages/operator/collection.css
   Activée par css_use('app/operator-collection') dans : operator/collection.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/collection.php — sortis de la page (i102b). */

:where(.css-app-operator-collection) .fc-fil {display:flex;gap:8px;align-items:center;font-size:.78rem;letter-spacing:.08em;
        text-transform:uppercase;color:var(--ivoire-2);margin-bottom:14px}
:where(.css-app-operator-collection) .fc-fil a {color:var(--ivoire-2);text-decoration:none}
:where(.css-app-operator-collection) .fc-fil a:hover {color:var(--or)}

/* ── LE BANDEAU ─────────────────────────────────────────────────────────
   L'écran d'accueil de la collection, en large et court. C'est ce que
   l'invité verra sur la tablette : le montrer ici, c'est montrer l'ambiance
   avant les tirages. */
:where(.css-app-operator-collection) .fc-hero {position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--hair-soft);
         margin-bottom:18px;background:#070706}
:where(.css-app-operator-collection) .fc-hero img,
:where(.css-app-operator-collection) .fc-hero video {width:100%;height:230px;object-fit:cover;display:block}
@media(max-width:640px){ :where(.css-app-operator-collection) .fc-hero img,
:where(.css-app-operator-collection) .fc-hero video {height:140px} }

:where(.css-app-operator-collection) .fc-tete {display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin-bottom:20px}
:where(.css-app-operator-collection) .fc-tete h1 {margin:0;font-family:var(--serif);font-size:2.1rem;line-height:1.1}
:where(.css-app-operator-collection) .fc-sous {color:var(--ivoire-2);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
:where(.css-app-operator-collection) .fc-desc {color:var(--ivoire-2);margin-top:10px;max-width:62ch;line-height:1.6}
:where(.css-app-operator-collection) .fc-prix {margin-left:auto;text-align:right;flex:0 0 auto}
:where(.css-app-operator-collection) .fc-prix b {font-family:var(--serif);font-size:1.8rem;color:var(--or);display:block;line-height:1.1}
:where(.css-app-operator-collection) .fc-prix small {color:var(--ivoire-2);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
:where(.css-app-operator-collection) .fc-prix .lic {color:var(--success-light)}

/* ── LA BARRE D'ACTIONS ─────────────────────────────────────────────────
   Elle reste collée en haut : sur une collection de huit formats, la
   décision se prend en bas de page, et remonter chercher le bouton est
   exactement le genre de détour qu'on ne fait pas — on ferme l'onglet. */
:where(.css-app-operator-collection) .fc-act {position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
        padding:12px 0 14px;margin-bottom:6px;background:linear-gradient(180deg,var(--noir) 72%,transparent)}
:where(.css-app-operator-collection) .fc-act .btn {font-size:.82rem}
:where(.css-app-operator-collection) .fc-gros {border:0;border-radius:999px;padding:11px 22px;background:var(--or);color:var(--black-2);
         font-weight:700;font-size:.9rem;letter-spacing:.02em;cursor:pointer}
:where(.css-app-operator-collection) .fc-gros:hover {background:var(--or-clair)}
:where(.css-app-operator-collection) .fc-gros.ok {background:var(--success-light)}
:where(.css-app-operator-collection) .fc-coeur {border:1px solid var(--hair);border-radius:999px;padding:10px 18px;background:var(--surface-3);
          color:var(--ivoire);font-size:.85rem;cursor:pointer}
:where(.css-app-operator-collection) .fc-coeur.on {background:var(--gold-soft);color:#111;border-color:var(--gold-soft)}

/* ── L'ÉTAGÈRE ──────────────────────────────────────────────────────────
   HAUTEUR COMMUNE, LARGEUR LIBRE — c'est tout le principe. Une bande 5×15 et
   un 15×10 paysage alignés sur la même hauteur montrent d'un coup d'œil
   lequel est étroit ; dans des cases de largeur égale, ils occupent la même
   place et la comparaison disparaît.

   Le fond clair n'est pas une coquetterie : ces cadres sont presque tous
   blancs, et sur le noir de l'espace privé un cadre blanc se lit comme une
   tache lumineuse plutôt que comme un tirage. */
:where(.css-app-operator-collection) .fc-etagere {background:linear-gradient(180deg,#f7f5f1,#ece8e1);border-radius:16px;
            padding:34px 24px 28px;display:flex;flex-wrap:wrap;gap:28px;
            align-items:flex-end;justify-content:center;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
:where(.css-app-operator-collection) .fc-item {margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
:where(.css-app-operator-collection) .fc-tirage {position:relative;display:block;line-height:0;border:0;padding:0;background:none;
           cursor:zoom-in;transition:transform .18s}
:where(.css-app-operator-collection) .fc-tirage:hover {transform:translateY(-5px)}
:where(.css-app-operator-collection) .fc-tirage img,
:where(.css-app-operator-collection) .fc-tirage canvas {height:300px;width:auto;max-width:100%;display:block;background:#fff;
    border-radius:2px;box-shadow:0 14px 30px rgba(40,34,28,.26),0 2px 5px rgba(40,34,28,.16)}
:where(.css-app-operator-collection) .fc-cap {display:flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.08em;
        text-transform:uppercase;color:#6f6960;font-weight:600}
:where(.css-app-operator-collection) .fc-cap .fc-fav {border:0;background:none;color:#b09a6a;font-size:1.05rem;line-height:1;cursor:pointer;padding:0}
:where(.css-app-operator-collection) .fc-cap .fc-fav.on {color:var(--gold-soft)}
:where(.css-app-operator-collection) .fc-cap .fc-mini {border:1px solid #cdc6ba;background:#fff;border-radius:999px;padding:3px 10px;
                 font-size:.64rem;letter-spacing:.06em;color:#5a544c;cursor:pointer;font-weight:700}
:where(.css-app-operator-collection) .fc-cap .fc-mini:hover {border-color:#b09a6a;color:var(--black-2)}
:where(.css-app-operator-collection) .fc-cap .fc-mini.ok {background:var(--success-light);border-color:var(--success-light);color:var(--black-2)}
@media(max-width:640px){ :where(.css-app-operator-collection) .fc-tirage img,
:where(.css-app-operator-collection) .fc-tirage canvas {height:190px} :where(.css-app-operator-collection) .fc-etagere {gap:16px;padding:20px 10px} }
:where(.css-app-operator-collection) .fc-etagere canvas {opacity:0;transition:opacity .3s}
:where(.css-app-operator-collection) .fc-etagere canvas.fp-pret {opacity:1}
:where(.css-app-operator-collection) .fc-etagere canvas.fp-rate {opacity:.55}

:where(.css-app-operator-collection) .fc-vide {padding:48px 20px;text-align:center;color:var(--ivoire-2);
         border:1px dashed var(--hair-soft);border-radius:16px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-collection-create
   Ancien fichier : pages/operator/collection-create.css
   Activée par css_use('app/operator-collection-create') dans : operator/collection-create.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/collection-create.php — créer une collection (i226). */

:where(.css-app-operator-collection-create) .cc { max-width: 1100px; }
:where(.css-app-operator-collection-create) .cc .btn { min-height: 42px; }
:where(.css-app-operator-collection-create) .cc .btn-sm { min-height: 32px; }
:where(.css-app-operator-collection-create) .cc-h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.55rem; margin: 0 0 .5rem; }
:where(.css-app-operator-collection-create) .cc-h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 .5rem; }
:where(.css-app-operator-collection-create) .cc-aide { font-size: .9rem; opacity: .75; line-height: 1.5; margin: 0 0 .6rem; }

/* L'essai et le solde */
:where(.css-app-operator-collection-create) .cc-acces { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding: .9rem 1.1rem; margin: 0 0 1rem;
  border-radius: 14px; border: 1px solid rgba(127,127,127,.28); background: rgba(127,127,127,.06); }
:where(.css-app-operator-collection-create) .cc-acces.essai { border-color: rgba(var(--gold-rgb),.55); background: linear-gradient(160deg, rgba(var(--gold-rgb),.12), rgba(127,127,127,.05)); }
:where(.css-app-operator-collection-create) .cc-acces b { flex-basis: 100%; }
:where(.css-app-operator-collection-create) .cc-acces span { font-size: .9rem; }
:where(.css-app-operator-collection-create) .cc-solde { flex-basis: 100%; opacity: .8; font-size: .85rem !important; }
:where(.css-app-operator-collection-create) .cc-prix { margin: 0 0 1.4rem; font-size: .9rem; }
:where(.css-app-operator-collection-create) .cc-prix summary { cursor: pointer; font-weight: 600; }
:where(.css-app-operator-collection-create) .cc-prix ul { margin: .5rem 0 0; padding-inline-start: 1.2rem; line-height: 1.6; }

/* Mes collections */
:where(.css-app-operator-collection-create) .cc-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
:where(.css-app-operator-collection-create) .cc-vide { opacity: .7; }
:where(.css-app-operator-collection-create) .cc-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
:where(.css-app-operator-collection-create) .cc-carte { display: flex; flex-direction: column; border: 1px solid rgba(127,127,127,.28); border-radius: 16px; overflow: hidden;
  color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
:where(.css-app-operator-collection-create) .cc-carte:hover { transform: translateY(-2px); border-color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-img { aspect-ratio: 16 / 9; background: #1b1522 center / cover no-repeat; }
:where(.css-app-operator-collection-create) .cc-carte-b { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem; }
:where(.css-app-operator-collection-create) .cc-carte-b small { opacity: .7; }
:where(.css-app-operator-collection-create) .cc-st { font-style: normal; align-self: flex-start; font-size: .74rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; border: 1px solid; }
:where(.css-app-operator-collection-create) .cc-st.private { opacity: .7; }
:where(.css-app-operator-collection-create) .cc-st.pending { color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-st.approved { color: var(--success); }
:where(.css-app-operator-collection-create) .cc-st.rejected { color: var(--danger); }

/* Les étapes */
:where(.css-app-operator-collection-create) .cc-retour { display: inline-block; margin-bottom: .8rem; font-size: .9rem; }
:where(.css-app-operator-collection-create) .cc-etapes { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; padding: 0; margin: 0 0 1.2rem; }
:where(.css-app-operator-collection-create) .cc-etapes li { border: 1px solid rgba(127,127,127,.28); border-radius: 12px; padding: .55rem .7rem; font-size: .9rem; opacity: .6; }
:where(.css-app-operator-collection-create) .cc-etapes li a { color: inherit; text-decoration: none; display: block; }
:where(.css-app-operator-collection-create) .cc-etapes li.fait { opacity: .9; }
:where(.css-app-operator-collection-create) .cc-etapes li.on { opacity: 1; border-color: var(--gold); background: rgba(var(--gold-rgb),.1); font-weight: 600; }
:where(.css-app-operator-collection-create) .cc-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(127,127,127,.25);
  font-size: .78rem; font-weight: 700; margin-inline-end: .45rem; }
:where(.css-app-operator-collection-create) .cc-etapes li.on .cc-n,
:where(.css-app-operator-collection-create) .cc-etapes li.fait .cc-n { background: var(--gold); color: #111; }
:where(.css-app-operator-collection-create) .cc-carte-etape { border: 1px solid rgba(127,127,127,.28); border-radius: 18px; padding: 1.3rem; }
:where(.css-app-operator-collection-create) .cc-form { margin: 0 0 1.4rem; }
:where(.css-app-operator-collection-create) .cc-note { border-top: 1px solid rgba(127,127,127,.22); padding-top: 1.2rem; }
:where(.css-app-operator-collection-create) .cc-agir { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: .9rem; }
:where(.css-app-operator-collection-create) .cc-agir.fin { justify-content: flex-end; border-top: 1px solid rgba(127,127,127,.22); padding-top: 1rem; }
:where(.css-app-operator-collection-create) .cc-cout { font-size: .85rem; font-weight: 600; color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-refs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
:where(.css-app-operator-collection-create) .cc-refs img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; }
:where(.css-app-operator-collection-create) .cc-pal { display: flex; gap: .35rem; margin-top: .7rem; }
:where(.css-app-operator-collection-create) .cc-pal i { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(127,127,127,.35); }
:where(.css-app-operator-collection-create) .cc-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
:where(.css-app-operator-collection-create) .cc-deux .cc-form { border: 1px solid rgba(127,127,127,.22); border-radius: 14px; padding: 1rem; margin: 0; }

/* Les fonds */
:where(.css-app-operator-collection-create) .cc-mondes { display: flex; gap: .8rem; align-items: flex-end; margin: 0 0 1rem; }
:where(.css-app-operator-collection-create) .cc-mondes figure { margin: 0; flex: 3; }
:where(.css-app-operator-collection-create) .cc-mondes figure.v { flex: 1; max-width: 200px; }
:where(.css-app-operator-collection-create) .cc-mondes img { width: 100%; border-radius: 12px; display: block; }
:where(.css-app-operator-collection-create) .cc-mondes figcaption { font-size: .8rem; opacity: .7; margin-top: .25rem; }
:where(.css-app-operator-collection-create) .cc-versions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; font-size: .85rem; }

/* Les cadres */
:where(.css-app-operator-collection-create) .cc-cadres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: .6rem; }
:where(.css-app-operator-collection-create) .cc-cadres figure { margin: 0; border-radius: 12px; background: rgba(127,127,127,.08); padding: 6px; }
:where(.css-app-operator-collection-create) .cc-cadres img { width: 100%; height: 170px; object-fit: contain; display: block; }
:where(.css-app-operator-collection-create) .cc-cadres figcaption { display: flex; gap: .3rem; justify-content: space-between; margin-top: .3rem; }
:where(.css-app-operator-collection-create) .cc-fmt { margin-bottom: .8rem; }
:where(.css-app-operator-collection-create) .cc-fmt-h { font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
:where(.css-app-operator-collection-create) .cc-vierges { display: flex; flex-wrap: wrap; gap: .5rem; }
:where(.css-app-operator-collection-create) .cc-v { position: relative; cursor: pointer; border-radius: 10px; padding: 3px; border: 2px solid transparent; }
:where(.css-app-operator-collection-create) .cc-v input { position: absolute; opacity: 0; }
:where(.css-app-operator-collection-create) .cc-v img { height: 104px; border-radius: 7px; display: block; }
:where(.css-app-operator-collection-create) .cc-v em { position: absolute; right: 6px; bottom: 6px; font-style: normal; font-size: .7rem; font-weight: 700;
  background: rgba(0,0,0,.65); color: #fff; padding: 1px 6px; border-radius: 6px; }
:where(.css-app-operator-collection-create) .cc-v:has(input:checked) { border-color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-v:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
:where(.css-app-operator-collection-create) .cc-reglages { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; }
:where(.css-app-operator-collection-create) .cc-reglages label { font-size: .85rem; display: flex; flex-direction: column; gap: .25rem; }

/* Terminé */
:where(.css-app-operator-collection-create) .cc-fin { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
:where(.css-app-operator-collection-create) .cc-envoi { border-radius: 14px; padding: 1rem; border: 1px solid rgba(127,127,127,.28); }
:where(.css-app-operator-collection-create) .cc-envoi.pending { border-color: rgba(var(--gold-rgb),.55); }
:where(.css-app-operator-collection-create) .cc-envoi.approved { border-color: rgba(127,176,141,.6); }
:where(.css-app-operator-collection-create) .cc-envoi.rejected { border-color: rgba(230,129,127,.55); }
:where(.css-app-operator-collection-create) .cc-envoi .cc-aide { margin-top: .5rem; }
:where(.css-app-operator-collection-create) .cc-suppr { margin: 1rem 0 0; text-align: end; }

/* Attente et accord */
:where(.css-app-operator-collection-create) .cc-attente { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1050; padding: .7rem 1.1rem;
  border-radius: 999px; background: #1b1712; color: #f6f1e7; box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: .9rem; }
:where(.css-app-operator-collection-create) .cc-modal { position: fixed; inset: 0; z-index: 1060; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
:where(.css-app-operator-collection-create) .cc-modal-b { max-width: 420px; width: 100%; border-radius: 18px; padding: 1.4rem; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #111);
  box-shadow: 0 20px 60px rgba(0,0,0,.4); }
:where(.css-app-operator-collection-create) .cc-accord-t { font-weight: 600; }

@media (max-width: 720px) {
  :where(.css-app-operator-collection-create) .cc-etapes { grid-template-columns: repeat(3, 1fr); }
  :where(.css-app-operator-collection-create) .cc-deux { grid-template-columns: 1fr; }
  :where(.css-app-operator-collection-create) .cc-mondes { flex-direction: column; align-items: stretch; }
  :where(.css-app-operator-collection-create) .cc-mondes figure.v { max-width: 160px; }
}

/* Étape 4 — le texte sur les cadres (i228) */
:where(.css-app-operator-collection-create) .cc-tx-bande { display: flex; gap: .5rem; overflow-x: auto; padding: .3rem .1rem .6rem; }
:where(.css-app-operator-collection-create) .cc-tx-vignette { position: relative; flex: none; border: 2px solid transparent; border-radius: 10px; padding: 3px; background: rgba(127,127,127,.08); cursor: pointer; }
:where(.css-app-operator-collection-create) .cc-tx-vignette img { height: 92px; display: block; border-radius: 7px; }
:where(.css-app-operator-collection-create) .cc-tx-vignette.on { border-color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-tx-nb { position: absolute; right: 5px; top: 5px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px; font-size: .7rem; font-weight: 700;
  display: grid; place-items: center; background: var(--gold); color: #111; }
:where(.css-app-operator-collection-create) .cc-tx-ajout { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; margin-bottom: .7rem; font-size: .85rem; }
:where(.css-app-operator-collection-create) .cc-tx-plateau { display: inline-block; max-width: 100%; }
:where(.css-app-operator-collection-create) .cc-tx-moitie { position: absolute; top: 0; bottom: 0; border-left: 2px dashed rgba(var(--gold-rgb),.8); pointer-events: none; z-index: 4; }
:where(.css-app-operator-collection-create) .cc-tx-moitie.h { left: 0 !important; right: 0; bottom: auto; border-left: 0; border-top: 2px dashed rgba(var(--gold-rgb),.8); }
:where(.css-app-operator-collection-create) .cc-tx-bloc { border: 1px solid rgba(127,127,127,.25); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .9rem; }
:where(.css-app-operator-collection-create) .cc-tx-l { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .55rem 0; }
:where(.css-app-operator-collection-create) .cc-tx-l > span:first-child { min-width: 92px; font-size: .85rem; opacity: .8; }
:where(.css-app-operator-collection-create) .cc-tx-l input[type=range] { flex: 1; min-width: 120px; accent-color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-tx-l select { flex: 1; min-width: 160px; }
:where(.css-app-operator-collection-create) .cc-tx-couleurs button.slot-color,
:where(.css-app-operator-collection-create) .cc-tx-couleurs button.slot-fxc { border: 1px solid rgba(127,127,127,.45); border-radius: 7px; cursor: pointer; padding: 0; }
:where(.css-app-operator-collection-create) .cc-tx-couleurs input[type=color] { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(127,127,127,.45); background: none; cursor: pointer; }
:where(.css-app-operator-collection-create) .cc-tx-case { font-size: .85rem; cursor: pointer; display: block; margin: .2rem 0 .3rem; }
:where(.css-app-operator-collection-create) .cc-tx-plus { margin-top: .6rem; border-top: 1px solid rgba(127,127,127,.2); padding-top: .5rem; }
:where(.css-app-operator-collection-create) .cc-tx-plus summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
:where(.css-app-operator-collection-create) #slot-controls:not(.d-none) + .cc-tx-rien { display: none; }
:where(.css-app-operator-collection-create) .cc-tx-rien { border: 1px dashed rgba(127,127,127,.4); border-radius: 12px; padding: .8rem; text-align: center; }
:where(.css-app-operator-collection-create) .cc-tx-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem; border-radius: 14px;
  background: rgba(20,18,14,.92); backdrop-filter: blur(6px); z-index: 3; }
:where(.css-app-operator-collection-create) .cc-tx-etat { font-size: .85rem; color: #f0a868; }
:where(.css-app-operator-collection-create) .cc-tx-etat.ok { color: var(--success); }
:where(.css-app-operator-collection-create) .cc-texte .cc-tx-l .btn-group { flex-wrap: wrap; }
:where(.css-app-operator-collection-create) .cc-texte .cc-tx-l .btn,
:where(.css-app-operator-collection-create) .cc-texte .cc-tx-ajout .btn { letter-spacing: .05em; padding: .3rem .65rem; min-height: 32px; font-size: .74rem; }
@media (min-width: 992px) { :where(.css-app-operator-collection-create) .cc-tx-actions { position: sticky; bottom: 10px; } }

/* i229 — la note de l'IA en haut des fonds ; poser sur une fête */
:where(.css-app-operator-collection-create) .cc-note-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
:where(.css-app-operator-collection-create) .cc-pal span { font-size: .85rem; opacity: .8; margin-inline-end: .3rem; align-self: center; }
:where(.css-app-operator-collection-create) .cc-motifs { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; }
:where(.css-app-operator-collection-create) .cc-motifs li { display: flex; gap: .35rem; align-items: center; }
:where(.css-app-operator-collection-create) .cc-motifs li::before { content: "•"; color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-motif-x { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: .2rem .4rem; }
:where(.css-app-operator-collection-create) .cc-motif-x:hover { opacity: 1; color: var(--danger); }
:where(.css-app-operator-collection-create) .cc-fete { border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 14px; padding: 1rem; margin: 0 0 1rem; background: rgba(var(--gold-rgb),.06); }
:where(.css-app-operator-collection-create) .cc-fete-f { display: flex; flex-wrap: wrap; gap: .5rem; }
:where(.css-app-operator-collection-create) .cc-fete-f select { flex: 1 1 260px; }

:where(.css-app-operator-collection-create) .cc-trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { :where(.css-app-operator-collection-create) .cc-trois { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { :where(.css-app-operator-collection-create) .cc-trois { grid-template-columns: 1fr; } }
:where(.css-app-operator-collection-create) .cc-unis { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
:where(.css-app-operator-collection-create) .cc-unis label { cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
:where(.css-app-operator-collection-create) .cc-unis input[type=radio] { position: absolute; opacity: 0; }
:where(.css-app-operator-collection-create) .cc-unis i { width: 34px; height: 34px; border-radius: 9px; border: 2px solid rgba(127,127,127,.4); }
:where(.css-app-operator-collection-create) .cc-unis input[type=radio]:checked + i,
:where(.css-app-operator-collection-create) .cc-unis input[type=radio]:checked + input[type=color] { border-color: var(--gold); outline: 2px solid var(--gold); }
:where(.css-app-operator-collection-create) .cc-unis input[type=color] { width: 34px; height: 34px; padding: 0; border: 2px solid rgba(127,127,127,.4); border-radius: 9px; background: none; }


/* i233 — « Décrivez la fête. Recevez toute la cabine. » (comme sur le site) */
:where(.css-app-operator-collection-create) .cc-hero { position: relative; text-align: center; padding: 2.4rem 1rem 1.6rem; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb),.22);
  background: radial-gradient(70% 55% at 50% 0%, rgba(var(--gold-rgb),.22), rgba(var(--gold-rgb),0) 70%), linear-gradient(180deg, #14110c, var(--black) 60%); }
:where(.css-app-operator-collection-create) .cc-hero-eyebrow { display: block; font-size: .78rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
:where(.css-app-operator-collection-create) .cc-hero-t { font-family: "Inter", "Segoe UI", system-ui, sans-serif; letter-spacing: -.02em; font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; color: var(--cream); margin: 0 auto 1.6rem; max-width: 760px; }
:where(.css-app-operator-collection-create) .cc-hero-t em { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; color: var(--gold-pale); }
:where(.css-app-operator-collection-create) .cc-hero-f { max-width: 780px; margin: 0 auto; text-align: start; }
:where(.css-app-operator-collection-create) .cc-hero-bar { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem .7rem 1.1rem; border-radius: 16px;
  background: rgba(12,11,9,.85); border: 1px solid rgba(var(--cream-rgb),.14); }
:where(.css-app-operator-collection-create) .cc-hero-bar:focus-within { border-color: rgba(var(--gold-rgb),.6); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.12); }
:where(.css-app-operator-collection-create) .cc-hero-star { color: var(--cream); font-size: 1.2rem; }
:where(.css-app-operator-collection-create) .cc-hero-bar textarea { flex: 1; min-height: 52px; resize: none; border: 0; outline: 0; background: none; color: var(--cream); font-size: 1.05rem; line-height: 1.45; }
:where(.css-app-operator-collection-create) .cc-hero-bar textarea::placeholder { color: rgba(var(--cream-rgb),.45); }
:where(.css-app-operator-collection-create) .cc-hero-bar .btn { flex: none; border-radius: 12px; }
:where(.css-app-operator-collection-create) .cc-hero-sous { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: .55rem .3rem 0; flex-wrap: wrap; }
:where(.css-app-operator-collection-create) .cc-hero-lien { border: 0; background: none; color: var(--gold-pale); font-size: .88rem; padding: .2rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:where(.css-app-operator-collection-create) .cc-hero-ref { margin: .6rem .3rem 0; }
:where(.css-app-operator-collection-create) .cc-hero-garder { margin: .8rem 0 0; font-size: .88rem; }
:where(.css-app-operator-collection-create) .cc-hero-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1080px; margin: 1.8rem auto 0; text-align: start; }
:where(.css-app-operator-collection-create) .cc-hero-c { border-radius: 16px; background: rgba(20,18,14,.9); border: 1px solid rgba(var(--cream-rgb),.08); overflow: hidden; }
:where(.css-app-operator-collection-create) .cc-hero-ch { padding: .75rem .9rem; font-weight: 600; color: var(--cream); border-bottom: 1px solid rgba(var(--cream-rgb),.06); }
:where(.css-app-operator-collection-create) .cc-hero-im { position: relative; aspect-ratio: 4 / 3; margin: .8rem; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
:where(.css-app-operator-collection-create) .cc-hero-im::before { content: ""; position: absolute; inset: -20px; filter: blur(14px); opacity: .85; }
:where(.css-app-operator-collection-create) .cc-hero-im.monde::before { background: radial-gradient(40% 40% at 50% 55%, #f1eef8 0 30%, transparent 60%), radial-gradient(30% 25% at 20% 85%, #f08a2a, transparent 70%),
  radial-gradient(30% 25% at 85% 85%, #f08a2a, transparent 70%), linear-gradient(160deg, #6b4ba8, #2b1f52); }
:where(.css-app-operator-collection-create) .cc-hero-im.cadres::before { background: linear-gradient(90deg, transparent 8%, #d9cfe6 8% 12%, #4b3a6b 12% 46%, #d9cfe6 46% 50%, transparent 50% 54%,
  #d9cfe6 54% 58%, #4b3a6b 58% 92%, #d9cfe6 92% 96%, transparent 96%), linear-gradient(160deg, #3a2a63, #1d1638); }
:where(.css-app-operator-collection-create) .cc-hero-etat { position: relative; z-index: 1; max-width: 80%; text-align: center; font-size: .86rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
:where(.css-app-operator-collection-create) .cc-hero-c.travail .cc-hero-im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  background-size: 220% 100%; animation: cc-brille 1.6s linear infinite; }
@keyframes cc-brille { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (max-width: 720px) {
  :where(.css-app-operator-collection-create) .cc-hero-bar { flex-wrap: wrap; } :where(.css-app-operator-collection-create) .cc-hero-bar textarea { flex-basis: calc(100% - 2rem); } :where(.css-app-operator-collection-create) .cc-hero-bar .btn { width: 100%; }
  :where(.css-app-operator-collection-create) .cc-hero-cartes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { :where(.css-app-operator-collection-create) .cc-hero-c.travail .cc-hero-im::after { animation: none; } }

/* i234 — les portraits IA */
:where(.css-app-operator-collection-create) .cc-hero-im.portraits::before { background: radial-gradient(16% 20% at 50% 36%, #f3d9c4 0 60%, transparent 64%),
  radial-gradient(30% 34% at 50% 92%, var(--gold-soft) 0 62%, transparent 66%), radial-gradient(60% 50% at 50% 40%, #8a5bb8, transparent 75%),
  linear-gradient(160deg, #3b2766, #171230); }
@media (max-width: 980px) and (min-width: 721px) { :where(.css-app-operator-collection-create) .cc-hero-cartes { grid-template-columns: 1fr 1fr; } }
:where(.css-app-operator-collection-create) .cc-portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; margin: .4rem 0 1rem; }
:where(.css-app-operator-collection-create) .cc-portraits figure { position: relative; margin: 0; border-radius: 14px; background: rgba(127,127,127,.08); padding: 6px; }
:where(.css-app-operator-collection-create) .cc-portraits figure > a:first-child img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; display: block; }
:where(.css-app-operator-collection-create) .cc-portrait-landscape { position: absolute; right: 12px; top: 12px; width: 42%; border-radius: 7px; overflow: hidden; border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.35); }
:where(.css-app-operator-collection-create) .cc-portrait-landscape img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
:where(.css-app-operator-collection-create) .cc-portraits figcaption { display: flex; justify-content: space-between; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .86rem; }
:where(.css-app-operator-collection-create) .cc-portrait-pending { font-style: normal; margin-inline-start: .2rem; }
:where(.css-app-operator-collection-create) .cc-subjects { display: flex; flex-wrap: wrap; gap: .45rem; margin: .3rem 0 .8rem; }
:where(.css-app-operator-collection-create) .cc-subject { cursor: pointer; position: relative; }
:where(.css-app-operator-collection-create) .cc-subject input { position: absolute; opacity: 0; }
:where(.css-app-operator-collection-create) .cc-subject span { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 78px; padding: .5rem .6rem; border-radius: 12px;
  border: 2px solid rgba(127,127,127,.3); font-size: .84rem; }
:where(.css-app-operator-collection-create) .cc-subject b { font-size: 1.5rem; line-height: 1; font-weight: 400; }
:where(.css-app-operator-collection-create) .cc-subject input:checked + span { border-color: var(--gold); background: rgba(var(--gold-rgb),.1); }
:where(.css-app-operator-collection-create) .cc-subject input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
:where(.css-app-operator-collection-create) .cc-modes { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; font-size: .92rem; }
:where(.css-app-operator-collection-create) .cc-modes label { cursor: pointer; }
:where(.css-app-operator-collection-create) .cc-modes small { opacity: .65; }

/* i235 / i236 — UNE APPLI DANS L'APPLI : le constructeur prend toute la largeur,
   un fil de quatre étapes en tête, et rien au-dessus de « Décrivez la fête ». */
:where(.css-app-operator-collection-create) .cc.cc-wiz { max-width: none; }
:where(.css-app-operator-collection-create) .cc-app { border-radius: 22px; border: 1px solid rgba(var(--cream-rgb),.09); background: linear-gradient(180deg, rgba(30,25,18,.92), rgba(13,11,8,.94));
  padding: .9rem 1.3rem 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
:where(.css-app-operator-collection-create) .cc-app.cc-app-hero { border: 0; background: none; padding: 0; box-shadow: none; }
:where(.css-app-operator-collection-create) .cc-app .cc-carte-etape { border: 0; padding: .6rem 0 0; }

/* Le fil des étapes */
:where(.css-app-operator-collection-create) .cc-steps { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(var(--cream-rgb),.08); }
:where(.css-app-operator-collection-create) .cc-steps-back,
:where(.css-app-operator-collection-create) .cc-hero-back { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(var(--cream-rgb),.18); color: var(--cream); text-decoration: none; font-size: 1.05rem; }
:where(.css-app-operator-collection-create) .cc-steps-back:hover,
:where(.css-app-operator-collection-create) .cc-hero-back:hover { border-color: var(--gold); color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-steps ol { list-style: none; display: flex; flex: 1; gap: .3rem; margin: 0; padding: 0; counter-reset: none; }
:where(.css-app-operator-collection-create) .cc-steps li { flex: 1; display: flex; align-items: center; min-width: 0; }
:where(.css-app-operator-collection-create) .cc-steps li + li::before { content: ""; flex: 0 0 18px; height: 1px; background: rgba(var(--cream-rgb),.18); margin-inline-end: .3rem; }
:where(.css-app-operator-collection-create) .cc-steps li > a,
:where(.css-app-operator-collection-create) .cc-steps li > span { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .35rem .7rem .35rem .35rem; border-radius: 999px;
  color: var(--cream); text-decoration: none; font-size: .9rem; white-space: nowrap; }
:where(.css-app-operator-collection-create) .cc-steps li > a:hover { background: rgba(var(--gold-rgb),.08); }
:where(.css-app-operator-collection-create) .cc-steps li.on > span { background: rgba(var(--gold-rgb),.14); font-weight: 600; }
:where(.css-app-operator-collection-create) .cc-steps li.locked { opacity: .4; }
:where(.css-app-operator-collection-create) .cc-steps-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--cream-rgb),.12);
  font-size: .78rem; font-weight: 700; }
:where(.css-app-operator-collection-create) .cc-steps li.on .cc-steps-n,
:where(.css-app-operator-collection-create) .cc-steps li.done .cc-steps-n { background: var(--gold); color: #111; }
:where(.css-app-operator-collection-create) .cc-steps-t { overflow: hidden; text-overflow: ellipsis; }

/* Le hero (étape 1) : en haut, et vivant pendant que l'IA travaille */
:where(.css-app-operator-collection-create) .cc-hero-back { position: absolute; top: 14px; left: 14px; z-index: 2; }
:where(.css-app-operator-collection-create) .cc-hero-status { position: relative; margin: 1rem auto 0; max-width: 780px; font-size: .95rem; color: var(--gold-pale); }
:where(.css-app-operator-collection-create) .cc-hero-status::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-inline-end: .5rem; border-radius: 50%;
  border: 2px solid var(--gold); border-right-color: transparent; vertical-align: -1px; animation: cc-tourne .9s linear infinite; }
@keyframes cc-tourne { to { transform: rotate(360deg); } }
:where(.css-app-operator-collection-create) .cc-hero.travail::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%); background-size: 220% 100%; animation: cc-brille 1.8s linear infinite; }
:where(.css-app-operator-collection-create) .cc-hero-steps { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1.6rem 0 0; padding: 0;
  font-size: .82rem; color: rgba(var(--cream-rgb),.6); }
:where(.css-app-operator-collection-create) .cc-hero-steps li { display: flex; align-items: center; gap: .4rem; }
:where(.css-app-operator-collection-create) .cc-hero-steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb),.5); color: var(--gold); font-size: .72rem; }

/* Étape « Votre monde » */
:where(.css-app-operator-collection-create) .cc-world-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; margin: .4rem 0 1rem; }
:where(.css-app-operator-collection-create) .cc-world-main { position: relative; margin: 0; }
:where(.css-app-operator-collection-create) .cc-world-main > img:first-child { width: 100%; border-radius: 16px; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
:where(.css-app-operator-collection-create) .cc-world-portrait { position: absolute; right: 12px; bottom: 12px; width: 18%; min-width: 60px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 9px;
  border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 16px rgba(0,0,0,.45); }
:where(.css-app-operator-collection-create) .cc-booth-fig { margin: 0; }
:where(.css-app-operator-collection-create) .cc-booth-fig figcaption { text-align: center; font-size: .8rem; opacity: .65; margin-top: .4rem; }
:where(.css-app-operator-collection-create) .cc-booth { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--booth-bg) center / cover no-repeat;
  border: 6px solid var(--black); box-shadow: 0 0 0 1px rgba(var(--cream-rgb),.14), 0 14px 40px rgba(0,0,0,.45); display: flex; align-items: flex-end; }
:where(.css-app-operator-collection-create) .cc-booth::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--booth-bg) 100%); opacity: var(--booth-overlay, .7); }
:where(.css-app-operator-collection-create) .cc-booth-content { position: relative; width: 100%; padding: 1rem .9rem 1.3rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
:where(.css-app-operator-collection-create) .cc-booth-eyebrow { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--booth-accent); }
:where(.css-app-operator-collection-create) .cc-booth-title { font-family: var(--booth-font); font-size: 1.45rem; line-height: 1.12; color: var(--booth-text); font-weight: 600; }
:where(.css-app-operator-collection-create) .cc-booth-btn { padding: .5rem 1.1rem; border-radius: 999px; background: var(--booth-accent); color: var(--booth-btn-text); font-size: .8rem; font-weight: 700; }
:where(.css-app-operator-collection-create) .cc-like { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding: 1rem 1.1rem; border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb),.35); background: rgba(var(--gold-rgb),.06); margin-bottom: 1rem; }
:where(.css-app-operator-collection-create) .cc-like > b { font-size: 1.05rem; }
:where(.css-app-operator-collection-create) .cc-repaint { margin: 0; }
:where(.css-app-operator-collection-create) .cc-repaint .cc-agir { margin: 0; }
:where(.css-app-operator-collection-create) .cc-more { border-top: 1px solid rgba(var(--cream-rgb),.08); padding: .7rem 0 0; margin-top: .7rem; }
:where(.css-app-operator-collection-create) .cc-more > summary { cursor: pointer; font-weight: 600; font-size: .92rem; opacity: .85; list-style: none; padding: .2rem 0; }
:where(.css-app-operator-collection-create) .cc-more > summary::-webkit-details-marker { display: none; }
:where(.css-app-operator-collection-create) .cc-more > summary::after { content: " ▾"; opacity: .6; }
:where(.css-app-operator-collection-create) .cc-more[open] > summary { margin-bottom: .8rem; }
:where(.css-app-operator-collection-create) .cc-more[open] > summary::after { content: " ▴"; }
:where(.css-app-operator-collection-create) .cc-more .cc-note { border-top: 0; padding-top: 0; }

/* Étape « Prête » */
:where(.css-app-operator-collection-create) .cc-ready { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }
:where(.css-app-operator-collection-create) .cc-ready-img { aspect-ratio: 4 / 5; border-radius: 18px; background: #1b1522 center / cover no-repeat; }
:where(.css-app-operator-collection-create) .cc-ready-thumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .9rem; }
:where(.css-app-operator-collection-create) .cc-ready-thumbs img { height: 78px; border-radius: 7px; background: rgba(var(--cream-rgb),.06); }
:where(.css-app-operator-collection-create) .cc-ready-thumbs img.p { aspect-ratio: 2 / 3; object-fit: cover; }
:where(.css-app-operator-collection-create) .cc-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 1rem 1.1rem; border-radius: 16px;
  border: 1px solid rgba(var(--cream-rgb),.12); margin: 1rem 0; }
:where(.css-app-operator-collection-create) .cc-feedback > b { margin-inline-end: .3rem; }
:where(.css-app-operator-collection-create) .cc-feedback-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb),.2); background: none; font-size: 1.35rem; cursor: pointer;
  transition: transform .15s, border-color .15s; }
:where(.css-app-operator-collection-create) .cc-feedback-btn:hover { transform: scale(1.08); border-color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-feedback-btn.on { border-color: var(--gold); background: rgba(var(--gold-rgb),.16); }
:where(.css-app-operator-collection-create) .cc-feedback-thanks { font-size: .88rem; color: var(--success); }
:where(.css-app-operator-collection-create) .cc-feedback-form { flex-basis: 100%; margin: .3rem 0 0; }

@media (max-width: 980px) {
  :where(.css-app-operator-collection-create) .cc-world-grid { grid-template-columns: minmax(0, 1fr) 200px; }
  :where(.css-app-operator-collection-create) .cc-ready { grid-template-columns: 1fr; } :where(.css-app-operator-collection-create) .cc-ready-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  /* Sur téléphone, l'appli occupe tout l'écran, bord à bord. */
  :where(.css-app-operator-collection-create) .cc-app { margin: -10px -16px 0; border-radius: 0; border-left: 0; border-right: 0; padding: .7rem 14px 1.4rem; box-shadow: none; }
  :where(.css-app-operator-collection-create) .cc-app.cc-app-hero { margin: -10px -16px 0; }
  :where(.css-app-operator-collection-create) .cc-app-hero .cc-hero { border-radius: 0; padding: 3.2rem 14px 1.6rem; }
  :where(.css-app-operator-collection-create) .cc-steps { gap: .4rem; }
  :where(.css-app-operator-collection-create) .cc-steps li + li::before { flex-basis: 8px; margin-inline-end: .15rem; }
  :where(.css-app-operator-collection-create) .cc-steps li > a,
:where(.css-app-operator-collection-create) .cc-steps li > span { padding: .25rem; }
  :where(.css-app-operator-collection-create) .cc-steps li:not(.on) .cc-steps-t { display: none; }   /* seule l'étape en cours garde son nom */
  :where(.css-app-operator-collection-create) .cc-steps li.on { flex: 3; }
  :where(.css-app-operator-collection-create) .cc-world-grid { grid-template-columns: 1fr; }
  :where(.css-app-operator-collection-create) .cc-booth-fig { max-width: 180px; margin: 0 auto; }
  :where(.css-app-operator-collection-create) .cc-booth-title { font-size: 1.15rem; }
  /* « Ça vous plaît ? » reste sous le pouce, comme dans une appli. */
  :where(.css-app-operator-collection-create) .cc-like { position: sticky; bottom: 0; z-index: 5; margin: 0 -14px 1rem; border-radius: 16px 16px 0 0; border-bottom: 0;
    background: rgba(23,19,14,.97); backdrop-filter: blur(8px); padding: .8rem 14px; gap: .5rem; }
  :where(.css-app-operator-collection-create) .cc-like > b { display: none; }
  :where(.css-app-operator-collection-create) .cc-like .btn-lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { :where(.css-app-operator-collection-create) .cc-hero.travail::after,
:where(.css-app-operator-collection-create) .cc-hero-status::before { animation: none; } }

/* i237 — le mode avancé (cadenas) et la vente par codes */
:where(.css-app-operator-collection-create) .cc-locked { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .7rem .9rem; border-radius: 12px; margin: 0 0 1rem;
  border: 1px dashed rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.05); font-size: .88rem; }
:where(.css-app-operator-collection-create) .cc-locked span { flex: 1 1 240px; opacity: .85; }
:where(.css-app-operator-collection-create) .cc-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
:where(.css-app-operator-collection-create) .cc-codes { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; }
:where(.css-app-operator-collection-create) .cc-code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .6rem .8rem; border-radius: 12px; border: 1px solid rgba(var(--cream-rgb),.12); }
:where(.css-app-operator-collection-create) .cc-code.off { opacity: .5; }
:where(.css-app-operator-collection-create) .cc-code.new { border-color: var(--gold); background: rgba(var(--gold-rgb),.08); }
:where(.css-app-operator-collection-create) .cc-code-value { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--gold); }
:where(.css-app-operator-collection-create) .cc-code-link { flex: 1 1 220px; min-width: 0; font-size: .8rem; }
:where(.css-app-operator-collection-create) .cc-code-meta { font-size: .82rem; opacity: .75; }
:where(.css-app-operator-collection-create) .cc-code-fields { display: flex; flex-wrap: wrap; gap: .6rem; }
:where(.css-app-operator-collection-create) .cc-code-fields label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; flex: 1 1 140px; }

/* i242 — les idées par type de fête (étape 1) */
:where(.css-app-operator-collection-create) .cc-ideas { position: relative; max-width: 780px; margin: 1.3rem auto 0; text-align: start; }
:where(.css-app-operator-collection-create) .cc-ideas-t { font-size: .88rem; color: rgba(var(--cream-rgb),.75); margin: 0 0 .5rem; text-align: center; }
:where(.css-app-operator-collection-create) .cc-ideas-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
:where(.css-app-operator-collection-create) .cc-ideas-cat { border: 1px solid rgba(var(--cream-rgb),.18); background: rgba(var(--cream-rgb),.04); color: var(--cream); border-radius: 999px;
  padding: .35rem .8rem; font-size: .84rem; cursor: pointer; }
:where(.css-app-operator-collection-create) .cc-ideas-cat:hover { border-color: rgba(var(--gold-rgb),.6); }
:where(.css-app-operator-collection-create) .cc-ideas-cat[aria-selected="true"] { border-color: var(--gold); background: rgba(var(--gold-rgb),.16); }
:where(.css-app-operator-collection-create) .cc-ideas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; margin-top: .7rem; }
:where(.css-app-operator-collection-create) .cc-idea { display: flex; flex-direction: column; gap: .25rem; text-align: start; border: 1px solid rgba(var(--cream-rgb),.12); border-radius: 12px;
  background: rgba(20,18,14,.75); color: var(--cream); padding: .65rem .75rem; cursor: pointer; transition: border-color .15s, transform .15s; }
:where(.css-app-operator-collection-create) .cc-idea:hover { border-color: var(--gold); transform: translateY(-1px); }
:where(.css-app-operator-collection-create) .cc-idea b { font-size: .9rem; }
:where(.css-app-operator-collection-create) .cc-idea span { font-size: .8rem; opacity: .72; line-height: 1.4; }
@media (max-width: 720px) { :where(.css-app-operator-collection-create) .cc-ideas-cats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; } :where(.css-app-operator-collection-create) .cc-ideas-cat { flex: none; } }

/* i268 — une fête existante ou une nouvelle */
:where(.css-app-operator-collection-create) .cc-fete-mode { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 .75rem; border: 1px solid rgba(var(--gold-rgb),.35); border-radius: 999px; }
:where(.css-app-operator-collection-create) .cc-fete-tab { background: transparent; border: 0; border-radius: 999px; padding: .4rem .95rem; font: inherit; font-size: .86rem; color: inherit; opacity: .8; cursor: pointer; }
:where(.css-app-operator-collection-create) .cc-fete-tab.on { background: var(--gold); color: #14110c; opacity: 1; font-weight: 600; }
:where(.css-app-operator-collection-create) .cc-fete-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
:where(.css-app-operator-collection-create) .cc-fete-new .cc-fete-nom { flex: 2 1 240px; }
:where(.css-app-operator-collection-create) .cc-fete-new .cc-fete-date { flex: 0 1 170px; }
:where(.css-app-operator-collection-create) .cc-fete-new .cc-fete-type { flex: 1 1 170px; }
@media (max-width: 575px) { :where(.css-app-operator-collection-create) .cc-fete-new > .form-control,
:where(.css-app-operator-collection-create) .cc-fete-new > .form-select,
:where(.css-app-operator-collection-create) .cc-fete-new > .btn { flex: 1 1 100%; } }

/* i270 — marquer le visage d'un portrait IA */
:where(.css-app-operator-collection-create) .cc-visage-btn { display: block; width: 100%; margin-top: .4rem; padding: .45rem .6rem; border-radius: 10px; font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.65); color: #ff8f99; }
:where(.css-app-operator-collection-create) .cc-visage-btn:hover { background: rgba(220,53,69,.22); }
:where(.css-app-operator-collection-create) .cc-visage-btn.ok { background: transparent; border-color: rgba(127,127,127,.35); color: inherit; font-weight: 500; opacity: .85; }
:where(.css-app-operator-collection-create) .cc-visage-btn.ok:hover { border-color: var(--gold); opacity: 1; }
:where(.css-app-operator-collection-create) .cc-visage-dlg { width: min(1180px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 1.1rem 1.2rem 1rem;
  border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 16px; background: #15130f; color: var(--cream); }
:where(.css-app-operator-collection-create) .cc-visage-dlg::backdrop { background: rgba(0,0,0,.72); }
:where(.css-app-operator-collection-create) .cc-visage-panes { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: .6rem 0 1rem; }
:where(.css-app-operator-collection-create) .cc-visage-pane { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
:where(.css-app-operator-collection-create) .cc-visage-pane[hidden] { display: none; }
:where(.css-app-operator-collection-create) .cc-visage-img { position: relative; display: inline-block; line-height: 0; cursor: crosshair; border-radius: 8px; overflow: hidden; max-width: 100%; }
:where(.css-app-operator-collection-create) .cc-visage-img img { display: block; max-width: 100%; max-height: min(52vh, 460px); width: auto; height: auto; user-select: none; -webkit-user-select: none; }
:where(.css-app-operator-collection-create) .cc-ovale { position: absolute; border-radius: 50%; background: rgba(230,40,50,.42); border: 2px solid rgba(255,90,100,.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
:where(.css-app-operator-collection-create) .cc-ovale[hidden] { display: none; }
:where(.css-app-operator-collection-create) .cc-visage-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; font-size: .82rem; }
:where(.css-app-operator-collection-create) .cc-visage-outils label { display: flex; align-items: center; gap: .45rem; margin: 0; }
:where(.css-app-operator-collection-create) .cc-visage-outils input[type=range] { width: 120px; accent-color: var(--gold); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-dashboard
   Ancien fichier : pages/operator/dashboard.css
   Activée par css_use('app/operator-dashboard') dans : admin/admin.php, operator/index.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BOOTH AI STUDIO — Tableau de bord opérateur (i190) : public/operator/index.php */
:where(.css-app-operator-dashboard) .dash2 {--d-card:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));--d-bord:rgba(var(--gold-rgb),.16);--d-r:16px}

/* En-tête : bonjour, image à droite, phrase manuscrite */
:where(.css-app-operator-dashboard) .d-hero {position:relative;min-height:190px;margin:0 0 22px;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,#1d1710 0%,#0d0b09 60%);border:1px solid var(--d-bord)}
:where(.css-app-operator-dashboard) .d-hero-img {position:absolute;inset:0 0 0 auto;width:min(58%,640px);background-size:cover;background-position:center 30%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%);opacity:.9}
:where(.css-app-operator-dashboard) .d-hero-txt {position:relative;z-index:1;padding:34px 34px 30px;max-width:560px}
:where(.css-app-operator-dashboard) .d-hero-txt h1 {font-family:var(--serif);font-weight:600;font-size:clamp(2rem,3.6vw,2.9rem);margin:0 0 6px;color:var(--ivoire)}
:where(.css-app-operator-dashboard) .d-hero-txt p {margin:0;font-size:1.08rem;color:var(--ivoire-2)}
:where(.css-app-operator-dashboard) .d-hero-script {position:absolute;z-index:1;right:28px;bottom:22px;max-width:300px;text-align:right;
  font-family:"Great Vibes","Cormorant Garamond",cursive;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15;color:#f2d27a;
  text-shadow:0 2px 14px rgba(0,0,0,.65);transform:rotate(-6deg)}

/* Quatre chiffres */
:where(.css-app-operator-dashboard) .d-kpis {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 18px}
:where(.css-app-operator-dashboard) .d-kpi {display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;border-radius:var(--d-r);background:var(--d-card);border:1px solid var(--d-bord)}
:where(.css-app-operator-dashboard) .d-kpi-h {display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--ivoire)}
:where(.css-app-operator-dashboard) .d-ic {display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:12px;
  background:rgba(var(--gold-rgb),.12);color:var(--or)}
:where(.css-app-operator-dashboard) .d-ic svg {width:22px;height:22px}
:where(.css-app-operator-dashboard) .d-kpi b {font-family:var(--serif);font-size:2.3rem;font-weight:600;line-height:1.1;color:var(--ivoire);margin-top:6px}
:where(.css-app-operator-dashboard) .d-kpi small {color:var(--ivoire-2);font-size:.8rem;min-height:1.2em}
:where(.css-app-operator-dashboard) .d-kpi small.d-up {color:#8ff0c8}
:where(.css-app-operator-dashboard) .d-kpi .d-lien,
:where(.css-app-operator-dashboard) .d-kpi .d-btn {margin-top:auto}
:where(.css-app-operator-dashboard) .d-kpi .d-lien {padding-top:10px}

/* Boutons et liens */
:where(.css-app-operator-dashboard) .d-btn {display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#e9c770,#c9a24a);color:#1a1409;font-weight:600;font-size:.88rem;text-decoration:none;transition:filter .2s,transform .2s}
:where(.css-app-operator-dashboard) .d-btn:hover {filter:brightness(1.08);color:#1a1409;transform:translateY(-1px)}
:where(.css-app-operator-dashboard) .d-btn-full {width:100%}
:where(.css-app-operator-dashboard) .d-btn-ghost {background:transparent;border:1px solid var(--d-bord);color:var(--or)}
:where(.css-app-operator-dashboard) .d-btn-ghost:hover {background:rgba(var(--gold-rgb),.1);color:var(--or)}
:where(.css-app-operator-dashboard) .d-lien {color:var(--or);font-size:.82rem;text-decoration:none;white-space:nowrap}
:where(.css-app-operator-dashboard) .d-lien:hover {text-decoration:underline;color:var(--or)}

/* Grille principale */
:where(.css-app-operator-dashboard) .d-grid {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,.85fr);gap:18px;align-items:start;margin-bottom:34px}
:where(.css-app-operator-dashboard) .d-col {display:flex;flex-direction:column;gap:18px;min-width:0}
:where(.css-app-operator-dashboard) .d-card {padding:20px;border-radius:var(--d-r);background:var(--d-card);border:1px solid var(--d-bord)}
:where(.css-app-operator-dashboard) .d-card h2 {font-family:var(--sans);font-size:1.12rem;font-weight:600;margin:0 0 4px;color:var(--ivoire)}
:where(.css-app-operator-dashboard) .d-card-h {display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
:where(.css-app-operator-dashboard) .d-card-h h2 {margin:0}
:where(.css-app-operator-dashboard) .d-sub {color:var(--ivoire-2);font-size:.85rem;margin:0 0 14px}
:where(.css-app-operator-dashboard) .d-vide {color:var(--ivoire-2);font-size:.9rem;margin:6px 0 0}

/* Accès rapide */
:where(.css-app-operator-dashboard) .d-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
:where(.css-app-operator-dashboard) .d-tile {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:108px;padding:14px 8px;text-align:center;
  border-radius:14px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);color:var(--ivoire);font-size:.82rem;line-height:1.3;
  text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
:where(.css-app-operator-dashboard) .d-tile:hover {border-color:var(--d-bord);background:rgba(var(--gold-rgb),.07);color:var(--ivoire);transform:translateY(-2px)}
:where(.css-app-operator-dashboard) .d-tile-ic {color:var(--or)}
:where(.css-app-operator-dashboard) .d-tile-ic svg {width:28px;height:28px}

/* Appel à créer */
:where(.css-app-operator-dashboard) .d-cta {position:relative;min-height:220px;overflow:hidden;background-size:cover;background-position:left center;padding:0}
:where(.css-app-operator-dashboard) .d-cta::before {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--black-warm-rgb),.15) 0%,rgba(var(--black-warm-rgb),.82) 48%,rgba(var(--black-warm-rgb),.95) 100%)}
:where(.css-app-operator-dashboard) .d-cta-txt {position:relative;z-index:1;margin-left:auto;width:min(62%,330px);padding:26px 22px}
:where(.css-app-operator-dashboard) .d-cta-txt h2 {font-family:var(--serif);font-size:1.45rem;font-weight:600;margin:0 0 8px}
:where(.css-app-operator-dashboard) .d-cta-txt p {font-size:.84rem;color:var(--ivoire-2);margin:0 0 14px;line-height:1.5}

/* Dernières créations */
:where(.css-app-operator-dashboard) .d-crea {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
:where(.css-app-operator-dashboard) .d-crea-i {display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ivoire);min-width:0}
:where(.css-app-operator-dashboard) .d-crea-img {display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#15110c;margin-bottom:6px}
:where(.css-app-operator-dashboard) .d-crea-img img {width:100%;height:100%;object-fit:cover;transition:transform .4s}
:where(.css-app-operator-dashboard) .d-crea-i:hover .d-crea-img img {transform:scale(1.05)}
:where(.css-app-operator-dashboard) .d-crea-i b {font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-dashboard) .d-crea-i small {color:var(--ivoire-2);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-dashboard) .d-pill {align-self:flex-start;margin-top:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:.74rem;color:var(--ivoire)}

/* Derniers événements */
:where(.css-app-operator-dashboard) .d-evs {display:flex;flex-direction:column}
:where(.css-app-operator-dashboard) .d-ev {display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);text-decoration:none;color:var(--ivoire)}
:where(.css-app-operator-dashboard) .d-ev:first-child {border-top:0;padding-top:2px}
:where(.css-app-operator-dashboard) .d-ev:hover b {color:var(--or)}
:where(.css-app-operator-dashboard) .d-ev-img {display:inline-flex;align-items:center;justify-content:center;width:52px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:#15110c;font-size:1.2rem}
:where(.css-app-operator-dashboard) .d-ev-img img {width:100%;height:100%;object-fit:cover}
:where(.css-app-operator-dashboard) .d-ev-t {display:flex;flex-direction:column;min-width:0;flex:1}
:where(.css-app-operator-dashboard) .d-ev-t b {font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
:where(.css-app-operator-dashboard) .d-ev-t small {color:var(--ivoire-2);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-dashboard) .d-ev-n {font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-operator-dashboard) .d-ev-lock {font-size:.8rem}
:where(.css-app-operator-dashboard) .d-ev-chev {color:var(--ivoire-2);font-size:1.2rem;line-height:1}

/* Jauge des photos IA */
:where(.css-app-operator-dashboard) .d-jauge {position:relative;max-width:220px;margin:0 auto 6px}
:where(.css-app-operator-dashboard) .d-jauge svg {display:block;width:100%;height:auto}
:where(.css-app-operator-dashboard) .d-jauge-v {position:absolute;left:0;right:0;bottom:2px;text-align:center}
:where(.css-app-operator-dashboard) .d-jauge-v b {display:block;font-family:var(--serif);font-size:2.3rem;font-weight:600;line-height:1;color:var(--ivoire)}
:where(.css-app-operator-dashboard) .d-jauge-v small {color:var(--ivoire-2);font-size:.75rem}
:where(.css-app-operator-dashboard) .d-card .d-btn-full {margin-top:10px}

/* Mon offre */
:where(.css-app-operator-dashboard) .d-plan {display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:4px 0;text-decoration:none;color:var(--ivoire)}
:where(.css-app-operator-dashboard) .d-plan span:nth-child(2) {display:flex;flex-direction:column;flex:1;min-width:0}
:where(.css-app-operator-dashboard) .d-plan small {color:var(--ivoire-2);font-size:.78rem}
:where(.css-app-operator-dashboard) .d-plan-ic {display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--d-bord);color:var(--or)}
:where(.css-app-operator-dashboard) .d-plan-ic svg {width:20px;height:20px}
:where(.css-app-operator-dashboard) .d-plus {margin-top:14px;padding:14px;border-radius:12px;background:linear-gradient(150deg,rgba(90,70,190,.35),rgba(40,32,90,.35));border:1px solid rgba(140,120,255,.3)}
:where(.css-app-operator-dashboard) .d-plus b {font-size:.86rem}
:where(.css-app-operator-dashboard) .d-plus p {font-size:.8rem;color:var(--ivoire-2);margin:6px 0 10px;line-height:1.5}
:where(.css-app-operator-dashboard) .d-plus .d-btn {width:100%;padding:8px 12px}

/* Nouveautés — une rangée pleine largeur (i209) */
:where(.css-app-operator-dashboard) .d-nouv {margin-bottom:34px}
:where(.css-app-operator-dashboard) .d-nouv h2 small {display:block;font-size:.78rem;font-weight:400;color:var(--ivoire-2);margin-top:2px}
/* i213 — un carrousel : une fenêtre (--par vignettes visibles), une rangée
   qui glisse, des flèches. Plus de barre de défilement. */
:where(.css-app-operator-dashboard) .d-nouv-vue {--par:4;--gap:14px;overflow:hidden;margin-top:12px;padding:4px 2px 6px;outline:none;border-radius:12px}
:where(.css-app-operator-dashboard) .d-nouv-vue:focus-visible {box-shadow:0 0 0 2px var(--or)}
:where(.css-app-operator-dashboard) .d-nouv-rang {display:flex;gap:var(--gap);transition:transform .45s cubic-bezier(.22,.8,.3,1);will-change:transform}
:where(.css-app-operator-dashboard) .d-nouv-i {position:relative;flex:0 0 calc((100% - (var(--par) - 1) * var(--gap)) / var(--par));min-width:0;
  display:flex;flex-direction:column;gap:8px;color:var(--ivoire);text-decoration:none}
:where(.css-app-operator-dashboard) .d-nouv-nav {display:flex;align-items:center;gap:8px;margin-left:auto}
:where(.css-app-operator-dashboard) .d-nouv-pos {font-size:.74rem;color:var(--ivoire-2);font-variant-numeric:tabular-nums;margin-right:4px;white-space:nowrap}
:where(.css-app-operator-dashboard) .d-nouv-btn {width:34px;height:34px;border-radius:50%;border:1px solid var(--d-bord);background:rgba(255,255,255,.03);color:var(--ivoire);
  font-size:1.25rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,opacity .2s}
:where(.css-app-operator-dashboard) .d-nouv-btn:hover:not(:disabled) {border-color:var(--or);background:rgba(var(--gold-rgb),.12);color:var(--or)}
:where(.css-app-operator-dashboard) .d-nouv-btn:disabled {opacity:.3;cursor:default}
:where(.css-app-operator-dashboard) .d-nouv-nav .d-lien {margin-left:6px}
@media (max-width:1100px){:where(.css-app-operator-dashboard) .d-nouv-vue {--par:3}}
@media (max-width:760px){:where(.css-app-operator-dashboard) .d-nouv-vue {--par:2}:where(.css-app-operator-dashboard) .d-nouv-pos {display:none}}
@media (max-width:460px){:where(.css-app-operator-dashboard) .d-nouv-vue {--par:1}}
@media (prefers-reduced-motion:reduce){:where(.css-app-operator-dashboard) .d-nouv-rang {transition:none}}
:where(.css-app-operator-dashboard) .d-nouv-img {display:block;border-radius:12px;overflow:hidden;aspect-ratio:1200/630;background:#15110c;border:1px solid var(--d-bord);transition:transform .2s,border-color .2s}
:where(.css-app-operator-dashboard) .d-nouv-img img {width:100%;height:100%;object-fit:cover}
:where(.css-app-operator-dashboard) .d-nouv-i:hover .d-nouv-img {transform:translateY(-2px);border-color:var(--or)}
:where(.css-app-operator-dashboard) .d-nouv-i b {font-size:.84rem;font-weight:500;line-height:1.35}
:where(.css-app-operator-dashboard) .d-nouv-tag {position:absolute;top:8px;left:8px;background:var(--or);color:#111;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:99px}

/* Le bloc des cabines garde sa mise en page ; on le détache simplement du tableau */
:where(.css-app-operator-dashboard) .dash2 #cabines {margin-top:10px}

@media (max-width:1280px){
  :where(.css-app-operator-dashboard) .d-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  :where(.css-app-operator-dashboard) .d-grid .d-col:last-child {grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
}
@media (max-width:900px){
  :where(.css-app-operator-dashboard) .d-kpis {grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.css-app-operator-dashboard) .d-grid {grid-template-columns:1fr}
  :where(.css-app-operator-dashboard) .d-hero-script {display:none}
  :where(.css-app-operator-dashboard) .d-hero-img {width:70%;opacity:.55}
}
@media (max-width:520px){
  :where(.css-app-operator-dashboard) .d-kpis {gap:10px}
  :where(.css-app-operator-dashboard) .d-kpi {padding:14px 12px 12px}
  :where(.css-app-operator-dashboard) .d-kpi-h {font-size:.78rem;gap:8px}
  :where(.css-app-operator-dashboard) .d-ic {width:32px;height:32px;border-radius:9px}
  :where(.css-app-operator-dashboard) .d-ic svg {width:18px;height:18px}
  :where(.css-app-operator-dashboard) .d-kpi b {font-size:1.8rem}
  :where(.css-app-operator-dashboard) .d-kpi small {font-size:.72rem}
  :where(.css-app-operator-dashboard) .d-kpi .d-btn {padding:8px 10px;font-size:.78rem}
  :where(.css-app-operator-dashboard) .d-hero-img {opacity:.4;width:100%}
  :where(.css-app-operator-dashboard) .d-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.css-app-operator-dashboard) .d-crea {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  :where(.css-app-operator-dashboard) .d-cta-txt {width:100%}
  :where(.css-app-operator-dashboard) .d-hero-txt {padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){:where(.css-app-operator-dashboard) .d-tile,
:where(.css-app-operator-dashboard) .d-btn,
:where(.css-app-operator-dashboard) .d-crea-img img {transition:none}}

/* Arabe (lecture de droite à gauche) : l'image et la phrase passent à gauche */
:where(.css-app-operator-dashboard) [dir=rtl] .d-hero-img,
[dir=rtl]:where(.css-app-operator-dashboard) .d-hero-img {inset:0 auto 0 0;-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 38%);mask-image:linear-gradient(270deg,transparent 0%,#000 38%)}
:where(.css-app-operator-dashboard) [dir=rtl] .d-hero-script,
[dir=rtl]:where(.css-app-operator-dashboard) .d-hero-script {right:auto;left:28px;text-align:left;transform:rotate(6deg)}

/* i192 — modifier le nom du salut */
:where(.css-app-operator-dashboard) .d-name {margin-top:12px;font-size:.82rem}
:where(.css-app-operator-dashboard) .d-name summary {cursor:pointer;color:var(--or-clair);opacity:.8;list-style:none;display:inline-block}
:where(.css-app-operator-dashboard) .d-name summary::-webkit-details-marker {display:none}
:where(.css-app-operator-dashboard) .d-name summary:hover {opacity:1}
:where(.css-app-operator-dashboard) .d-name-form {display:flex;gap:8px;margin-top:8px;max-width:360px}
:where(.css-app-operator-dashboard) .d-name-form .form-control {background:rgba(0,0,0,.35);border-color:var(--hair-soft);color:var(--ivoire)}

/* i197 — les trois réserves de photos IA, et où est parti le forfait Pro */
:where(.css-app-operator-dashboard) .d-pools {list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:5px}
:where(.css-app-operator-dashboard) .d-pools li {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.78rem;color:var(--ivoire-2)}
:where(.css-app-operator-dashboard) .d-pools li b {font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--ivoire);margin:0;line-height:1.2}
:where(.css-app-operator-dashboard) .d-pools li b small {font-size:.7rem;color:var(--ivoire-2);font-weight:400}
:where(.css-app-operator-dashboard) .d-tag {font-style:normal;font-size:.58rem;font-weight:700;padding:1px 6px;border-radius:5px;vertical-align:1px;white-space:nowrap}
:where(.css-app-operator-dashboard) .d-tag.paid {background:rgba(var(--gold-rgb),.18);color:#e8c95c}
:where(.css-app-operator-dashboard) .d-tag.pro {background:rgba(140,170,255,.16);color:#a9c0ff}
:where(.css-app-operator-dashboard) .d-tag.plus {background:rgba(127,224,166,.14);color:#86e0ad}
:where(.css-app-operator-dashboard) .d-prouse {list-style:none;margin:0 0 6px;padding:0;font-size:.78rem}
:where(.css-app-operator-dashboard) .d-prouse li {display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,.06)}
:where(.css-app-operator-dashboard) .d-prouse li a {color:var(--ivoire);text-decoration:none}
:where(.css-app-operator-dashboard) .d-prouse li a:hover {color:var(--or)}
:where(.css-app-operator-dashboard) .d-prouse li small {display:block;font-size:.7rem;color:#e6b366}
:where(.css-app-operator-dashboard) .d-prouse li b {color:#a9c0ff;font-weight:600;white-space:nowrap}
:where(.css-app-operator-dashboard) .d-prouse li.warn b {color:#f0a868}
:where(.css-app-operator-dashboard) .d-hist {display:block;text-align:center;margin:6px 0 2px}

/* i202 — ce que la formule comprend, et ce qui est utilisé */
:where(.css-app-operator-dashboard) .d-usage {list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
:where(.css-app-operator-dashboard) .d-usage li {display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-operator-dashboard) .d-usage li b {color:var(--ivoire);font-weight:600}
:where(.css-app-operator-dashboard) .d-usage li b small {color:var(--ivoire-2);font-weight:400}
:where(.css-app-operator-dashboard) .d-usage-bar {grid-column:1/-1;display:block;height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
:where(.css-app-operator-dashboard) .d-usage-bar i {display:block;height:100%;background:linear-gradient(90deg,#c9a24a,#e9c770);border-radius:5px}
:where(.css-app-operator-dashboard) .d-usage-bar.full i {background:linear-gradient(90deg,#e08a5a,#f0a868)}
:where(.css-app-operator-dashboard) .d-launch {margin:12px 0 0;font-size:.76rem;color:var(--or-clair);line-height:1.45}
:where(.css-app-operator-dashboard) .d-nouv .d-card-h {align-items:center;flex-wrap:wrap}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-admin-dash
   Ancien fichier : pages/admin/admin-dash.css
   Activée par css_use('app/admin-admin-dash') dans : admin/admin.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BOOTH AI STUDIO — Tableau de bord ADMIN (i194) : public/admin/admin.php.
   Reprend dashboard.css (opérateur) ; ici, seulement ce qui est propre à l'admin. */
:where(.css-app-admin-admin-dash) .adash .a-hero {min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-right:30px}
:where(.css-app-admin-admin-dash) .adash .a-kicker {font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair)}
:where(.css-app-admin-admin-dash) .adash .a-hero-todo {position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;
  border:1px solid var(--d-bord);background:rgba(0,0,0,.25);text-align:center}
:where(.css-app-admin-admin-dash) .adash .a-hero-todo b {font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--ivoire)}
:where(.css-app-admin-admin-dash) .adash .a-hero-todo span {font-size:.72rem;color:var(--ivoire-2);padding:0 10px}
:where(.css-app-admin-admin-dash) .adash .a-hero-todo.warn {border-color:rgba(230,150,90,.55);box-shadow:0 0 0 6px rgba(230,150,90,.06)}
:where(.css-app-admin-admin-dash) .adash .a-hero-todo.warn b {color:#f0a868}
:where(.css-app-admin-admin-dash) .adash .a-hero-todo.ok b {color:#7fe0a6}
:where(.css-app-admin-admin-dash) .adash .a-kpi {text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
:where(.css-app-admin-admin-dash) .adash .a-kpi:hover {border-color:rgba(var(--gold-rgb),.4);transform:translateY(-2px);color:inherit}
:where(.css-app-admin-admin-dash) .adash .a-kpi .d-ic svg {width:22px;height:22px}

:where(.css-app-admin-admin-dash) .adash .a-todo {display:flex;flex-direction:column;gap:8px}
:where(.css-app-admin-admin-dash) .adash .a-todo-i {display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);color:var(--ivoire);text-decoration:none}
:where(.css-app-admin-admin-dash) .adash .a-todo-i:hover {border-color:var(--d-bord);background:rgba(var(--gold-rgb),.06);color:var(--ivoire)}
:where(.css-app-admin-admin-dash) .adash .a-todo-i b {flex:none;min-width:38px;height:38px;padding:0 8px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--gold-rgb),.12);color:var(--or);font-size:1rem}
:where(.css-app-admin-admin-dash) .adash .a-todo-i.urgent b {background:rgba(230,110,90,.16);color:#f29a86}
:where(.css-app-admin-admin-dash) .adash .a-todo-i span {flex:1;min-width:0;font-size:.84rem;line-height:1.3}
:where(.css-app-admin-admin-dash) .adash .a-todo-i small {display:block;font-size:.7rem;color:var(--ivoire-2);opacity:.75}
:where(.css-app-admin-admin-dash) .adash .a-todo-i i {font-style:normal;color:var(--ivoire-2)}

:where(.css-app-admin-admin-dash) .adash .a-top {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
:where(.css-app-admin-admin-dash) .adash .a-top li {display:flex;align-items:center;gap:12px}
:where(.css-app-admin-admin-dash) .adash .a-top-rk {flex:none;width:22px;text-align:center;font-family:var(--serif);font-size:1.1rem;color:var(--or)}
:where(.css-app-admin-admin-dash) .adash .a-top-img {flex:none;width:48px;height:48px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#15110c;color:var(--or);text-decoration:none}
:where(.css-app-admin-admin-dash) .adash .a-top-img img {width:100%;height:100%;object-fit:cover}
:where(.css-app-admin-admin-dash) .adash .a-top-t {flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
:where(.css-app-admin-admin-dash) .adash .a-top-t a {color:var(--ivoire);text-decoration:none}
:where(.css-app-admin-admin-dash) .adash .a-top-t a:hover b {color:var(--or)}
:where(.css-app-admin-admin-dash) .adash .a-top-t b {font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
:where(.css-app-admin-admin-dash) .adash .a-top-t small {font-size:.72rem;color:var(--ivoire-2)}
:where(.css-app-admin-admin-dash) .adash .a-top-bar {position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
:where(.css-app-admin-admin-dash) .adash .a-top-bar i {position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:rgba(var(--gold-rgb),.35)}
:where(.css-app-admin-admin-dash) .adash .a-top-bar i.u {background:linear-gradient(90deg,#e9c770,#c9a24a)}
:where(.css-app-admin-admin-dash) .adash .a-top-foot {margin:14px 0 0;font-size:.74rem;color:var(--ivoire-2)}

:where(.css-app-admin-admin-dash) .adash .a-ev {align-items:flex-start}
:where(.css-app-admin-admin-dash) .adash .a-ev .d-ev-t a {color:inherit}
:where(.css-app-admin-admin-dash) .adash .a-ev .d-ev-t a:hover {color:var(--or)}
:where(.css-app-admin-admin-dash) .adash .a-id {font-weight:400;font-size:.72rem;color:var(--ivoire-2)}
:where(.css-app-admin-admin-dash) .adash .a-coll {display:inline-block;margin-top:2px;font-size:.72rem;color:var(--or)!important;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
:where(.css-app-admin-admin-dash) .adash .a-coll:hover {text-decoration:underline}
:where(.css-app-admin-admin-dash) .adash .a-coll-vide {color:var(--ivoire-2)!important;opacity:.55}
:where(.css-app-admin-admin-dash) .adash .a-ev-n {flex:none;font-size:.76rem;color:var(--ivoire-2);white-space:nowrap;padding-top:2px}
:where(.css-app-admin-admin-dash) .adash .a-ev-st {flex:none;display:flex;align-items:center;gap:6px}
:where(.css-app-admin-admin-dash) .adash .a-pill {flex:none;font-size:.66rem;padding:3px 8px;border-radius:999px;white-space:nowrap}
:where(.css-app-admin-admin-dash) .adash .a-pill.ok {background:rgba(127,224,166,.12);color:#86e0ad}
:where(.css-app-admin-admin-dash) .adash .a-pill.warn {background:rgba(230,179,102,.14);color:#e6b366}
:where(.css-app-admin-admin-dash) .adash .a-gift {border:1px solid var(--d-bord);background:transparent;border-radius:8px;padding:1px 6px;font-size:.8rem;cursor:pointer}
:where(.css-app-admin-admin-dash) .adash .a-gift:hover {background:rgba(var(--gold-rgb),.12)}
:where(.css-app-admin-admin-dash) .adash .a-date {flex:none;width:42px;height:44px;border-radius:10px;background:rgba(var(--gold-rgb),.1);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
:where(.css-app-admin-admin-dash) .adash .a-date b {font-family:var(--serif);font-size:1.2rem;color:var(--or)}
:where(.css-app-admin-admin-dash) .adash .a-date small {font-size:.62rem;color:var(--ivoire-2)}
:where(.css-app-admin-admin-dash) .adash .a-av {flex:none;width:36px;height:36px;font-size:.85rem}
:where(.css-app-admin-admin-dash) .adash .a-fails {display:flex;flex-direction:column;gap:8px}
:where(.css-app-admin-admin-dash) .adash .a-fails div {padding:8px 10px;border-radius:10px;background:rgba(230,110,90,.06);border:1px solid rgba(230,110,90,.18)}
:where(.css-app-admin-admin-dash) .adash .a-fails b {display:block;font-weight:500;font-size:.82rem}
:where(.css-app-admin-admin-dash) .adash .a-fails small {display:block;font-size:.72rem;color:var(--ivoire-2)}
:where(.css-app-admin-admin-dash) .adash .a-gifts summary {cursor:pointer;font-weight:500;list-style:none}
:where(.css-app-admin-admin-dash) .adash .a-gifts summary::-webkit-details-marker {display:none}
@media(max-width:700px){:where(.css-app-admin-admin-dash) .adash .a-hero {flex-direction:column;align-items:flex-start;padding-right:0}:where(.css-app-admin-admin-dash) .adash .a-hero-todo {margin:0 0 20px 30px;width:96px;height:96px}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-event
   Ancien fichier : pages/operator/event.css
   Activée par css_use('app/operator-event') dans : operator/event.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event.php — sortis de la page (i102b). */

/* L'ASPECT des onglets (gélules dorées, 44 px, collantes, défilement mobile)
   vit maintenant dans lux-admin.css — une seule source, toutes les pages.
   Ne restent ici que les éléments propres à CETTE page. */
:where(.css-app-operator-event) .ev-etape {display:flex;align-items:center;gap:.6rem;margin:-.6rem 0 1.4rem;font-size:.85rem;color:#b6a98f}
:where(.css-app-operator-event) .ev-jauge {flex:0 0 132px;height:5px;border-radius:999px;background:rgba(var(--gold-soft-rgb),.2);overflow:hidden}
:where(.css-app-operator-event) .ev-jauge i {display:block;height:100%;background:var(--or);border-radius:999px}
html:where(.css-app-operator-event) {scroll-behavior:smooth}
/* Grille des photos : la vignette EST la case a cocher — viser un petit
   carre sur une tablette est une gymnastique inutile. Les boutons de
   telechargement sont SOUS la photo, sur 3 emplacements fixes. */
:where(.css-app-operator-event) .ph-grille {display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
:where(.css-app-operator-event) .ph {border-radius:14px;overflow:hidden;border:2px solid var(--hair-soft);background:var(--surface-3);transition:border-color .2s}
:where(.css-app-operator-event) .ph:hover {border-color:var(--hair)}
:where(.css-app-operator-event) .ph:has(input:checked) {border-color:var(--or);box-shadow:0 0 0 2px rgba(var(--gold-rgb),.35)}
:where(.css-app-operator-event) .ph-img {position:relative;display:block;margin:0;cursor:pointer;background:#070706}
:where(.css-app-operator-event) .ph-img input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-operator-event) .ph-img img {width:100%;aspect-ratio:3/4;object-fit:contain;display:block;transition:opacity .2s}
:where(.css-app-operator-event) .ph.est-cachee img {opacity:.38;filter:grayscale(.5)}
:where(.css-app-operator-event) .ph-coche {position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
    font-weight:700;font-size:.9rem;color:var(--noir);background:var(--or);opacity:0;transform:scale(.6);transition:.15s;z-index:2}
:where(.css-app-operator-event) .ph-img input:checked ~ .ph-coche {opacity:1;transform:scale(1)}
:where(.css-app-operator-event) .ph-pied {position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;
    padding:10px 10px 8px;font-size:.78rem;color:var(--ivory);
    background:linear-gradient(180deg,transparent,rgba(var(--black-rgb),.88) 55%)}
:where(.css-app-operator-event) .ph-qui {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.css-app-operator-event) .ph-quand {margin-left:auto;opacity:.7;font-variant-numeric:tabular-nums}
:where(.css-app-operator-event) .ph-tag {position:absolute;top:8px;right:9px;font-size:1rem;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}
:where(.css-app-operator-event) .ph-tag-2 {right:34px}
:where(.css-app-operator-event) .ph-tag-3 {right:auto;left:42px}
:where(.css-app-operator-event) .ph-bar {display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px}
:where(.css-app-operator-event) .ph-b {display:inline-flex;align-items:center;justify-content:center;gap:3px;font-size:.74rem;line-height:1;padding:9px 4px;
    border-radius:8px;background:rgba(var(--gold-soft-rgb),.08);border:1px solid rgba(var(--gold-soft-rgb),.35);color:var(--cream);
    text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-event) a.ph-b:hover,
:where(.css-app-operator-event) button.ph-b:hover {background:var(--or);color:var(--noir);border-color:var(--or)}
:where(.css-app-operator-event) .ph-b.off {opacity:.28;cursor:default;border-style:dashed}
:where(.css-app-operator-event) .ph-b.sup {border-color:rgba(224,119,119,.5);color:#e9a3a3}
:where(.css-app-operator-event) .ph-b.sup:hover {background:#e07777;border-color:#e07777;color:#fff}
/* FÊTE D'ENFANTS — « qui est sur cette photo ? », côté organisateur.
   Repliée par défaut : une galerie doit d'abord montrer des photos. Le
   résumé dit ce qui est déjà marqué, ou signale qu'il manque quelque chose —
   une photo non marquée n'arrive dans aucune galerie de parent. */
:where(.css-app-operator-event) .ph-enf {margin:0;padding:0 8px 9px}
:where(.css-app-operator-event) .ph-enf summary {list-style:none;cursor:pointer;font-size:.74rem;line-height:1.25;padding:7px 9px;border-radius:8px;
    border:1px solid rgba(var(--gold-soft-rgb),.28);background:rgba(var(--gold-soft-rgb),.06);color:#efe7d8;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.css-app-operator-event) .ph-enf summary::-webkit-details-marker {display:none}
:where(.css-app-operator-event) .ph-enf summary:hover {border-color:var(--or)}
:where(.css-app-operator-event) .ph-enf.a-marquer summary {border-style:dashed;border-color:rgba(224,178,119,.55);color:#e8c79a;background:rgba(224,178,119,.06)}
/* Signalement « quelqu'un hors liste » (073) : une tâche, donc visible sans
   être alarmante — la photo n'a rien d'anormal, c'est la LISTE qui est
   incomplète. */
:where(.css-app-operator-event) .ph-enf.hors-liste summary {border-style:solid;border-color:rgba(140,190,235,.55);color:#bcd9f2;background:rgba(140,190,235,.07)}
:where(.css-app-operator-event) .ph-enf-hors {border-top:1px dashed rgba(var(--gold-soft-rgb),.25);padding-top:7px;margin-top:2px}
:where(.css-app-operator-event) .ph-enf-hors label:has(input:checked) {background:#8cbeeb;border-color:#8cbeeb;color:#0d1b26}
:where(.css-app-operator-event) .ph-enf[open] summary {border-color:var(--or);margin-bottom:7px}
:where(.css-app-operator-event) .ph-enf-chx {display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
:where(.css-app-operator-event) .ph-enf-chx label {display:inline-flex;align-items:center;font-size:.76rem;line-height:1;padding:7px 11px;border-radius:2rem;
    cursor:pointer;border:1px solid rgba(var(--gold-soft-rgb),.35);background:rgba(var(--gold-soft-rgb),.06);color:var(--cream)}
:where(.css-app-operator-event) .ph-enf-chx input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-operator-event) .ph-enf-chx label:has(input:checked) {background:var(--or);border-color:var(--or);color:var(--noir);font-weight:600}
:where(.css-app-operator-event) .ph-enf .ph-enf-ok {width:100%;font-size:.74rem;padding:7px 4px}
:where(.css-app-operator-event) .ph-marquee {outline:2px solid rgba(var(--gold-rgb),.55);outline-offset:2px}

/* ── REDRESSER, SUR LA VIGNETTE ────────────────────────────────────
   En bas à gauche : le coin le moins occupé (l'heure est à droite, les
   pastilles en haut). `pointer-events` explicite parce que la vignette
   entière est une case à cocher — sans ça le bouton serait inerte sur
   certaines piles, ou pire, cocherait la photo en même temps. */
:where(.css-app-operator-event) .ph-tourner {position:absolute;left:8px;bottom:34px;z-index:3;pointer-events:auto;
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    font-size:1rem;line-height:1;cursor:pointer;
    background:rgba(var(--black-rgb),.72);border:1px solid rgba(var(--gold-soft-rgb),.45);color:var(--cream);
    opacity:0;transition:opacity .16s,background .16s,transform .25s}
:where(.css-app-operator-event) .ph:hover .ph-tourner,
:where(.css-app-operator-event) .ph-tourner:focus-visible {opacity:1}
:where(.css-app-operator-event) .ph-tourner:hover {background:var(--or);color:var(--noir);border-color:var(--or)}
:where(.css-app-operator-event) .ph-tourner.occupe {opacity:1;transform:rotate(90deg)}
:where(.css-app-operator-event) .ph-tourner.ok {opacity:1;background:#5fbf8c;border-color:#5fbf8c;color:#07130d}
:where(.css-app-operator-event) .ph-tourner.ko {opacity:1;background:#e07777;border-color:#e07777;color:#fff}
/* SUR UN ÉCRAN TACTILE, IL N'Y A PAS DE SURVOL. Un bouton qui n'apparaît
   qu'au passage de la souris n'existe tout simplement pas sur un
   téléphone : il reste visible en permanence, et plus grand. */
@media (hover:none){
  :where(.css-app-operator-event) .ph-tourner {opacity:1;width:40px;height:40px;bottom:38px;background:rgba(var(--black-rgb),.82)}
}

/* ══ LA GALERIE SUR UN TÉLÉPHONE ═════════════════════════════════════
   Les boutons tenaient dans 74 % d'un caractère et se touchaient : sur un
   écran tactile, « Originale » et « Supprimer » étaient voisins à quelques
   millimètres, et l'un des deux est irréversible. On sépare donc la
   suppression des téléchargements — une ligne pour prendre, une ligne pour
   détruire — et on donne à chaque cible la hauteur d'un doigt. */
@media (max-width:640px){
  :where(.css-app-operator-event) .ph-grille {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  :where(.css-app-operator-event) .ph-bar {grid-template-columns:1fr 1fr;gap:6px;padding:8px}
  :where(.css-app-operator-event) .ph-b {font-size:.78rem;min-height:40px;padding:10px 6px}
  :where(.css-app-operator-event) .ph-b.sup {grid-column:1 / -1;margin-top:2px}
  :where(.css-app-operator-event) .ph-enf summary {font-size:.8rem;min-height:40px;display:flex;align-items:center}
  :where(.css-app-operator-event) .ph-enf-chx label {font-size:.82rem;min-height:38px;padding:9px 14px}
  :where(.css-app-operator-event) .ph-enf .ph-enf-ok {min-height:40px;font-size:.82rem}
  :where(.css-app-operator-event) .ph-pied {font-size:.7rem}
}
/* Deux colonnes de vignettes au lieu d'une : sur un téléphone tenu à bout
   de bras, une colonne oblige à défiler deux cents fois pour parcourir une
   soirée. La vignette reste assez grande pour reconnaître un visage. */
@media (max-width:400px){
  :where(.css-app-operator-event) .ph-grille {grid-template-columns:repeat(2,1fr);gap:8px}
  :where(.css-app-operator-event) .ph-b {font-size:.72rem;padding:10px 3px}
}
:where(.css-app-operator-event) .barre-tirages {display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    padding:16px 18px;border-radius:14px;background:rgba(var(--gold-rgb),.05);
    border:1px solid var(--hair)}
:where(.css-app-operator-event) .barre-tirages .note {color:var(--ivory-2);font-size:.86rem;margin-right:auto}
:where(.css-app-operator-event) .ph.est-cachee::after {content:"masquée";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
    padding:4px 9px;border-radius:999px;background:rgba(var(--black-rgb),.85);
    border:1px solid var(--hair);color:var(--or-clair)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-decor
   Ancien fichier : pages/operator/event/decor.css
   Activée par css_use('app/event-decor') dans : operator/event/decor.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/decor.php — sortis de la page (i102b). */

:where(.css-app-event-decor) .coll-visual { position:relative; display:flex; gap:4px; height:150px; padding:4px; border-radius:.6rem; overflow:hidden;
               border:1.5px solid var(--hair-soft); background:#141419; }
:where(.css-app-event-decor) .coll-tile { flex:1 1 0; min-width:0; display:grid; place-items:center; border-radius:.35rem; overflow:hidden; background:#1d1d26; position:relative; }
:where(.css-app-event-decor) .coll-tile img,
:where(.css-app-event-decor) .coll-tile video { width:100%; height:100%; object-fit:contain; display:block; }
:where(.css-app-event-decor) .coll-tile-intro { flex:0 0 34%; border:1px solid var(--or); }
:where(.css-app-event-decor) .coll-tile-intro img,
:where(.css-app-event-decor) .coll-tile-intro video { object-fit:cover; }
:where(.css-app-event-decor) .coll-tile-intro i { position:absolute; right:4px; bottom:3px; font-style:normal; font-size:.75rem; filter:drop-shadow(0 1px 2px #000); }
:where(.css-app-event-decor) .coll-tile-empty { color:var(--ivoire-2); font-size:1.8rem; }
:where(.css-app-event-decor) .coll-visual .fp-badge { position:absolute; left:8px; top:8px; right:auto; bottom:auto; z-index:2; }
:where(.css-app-event-decor) .coll-card.is-current .coll-visual { border-color:var(--or); box-shadow:0 0 0 2px var(--or) inset; }
:where(.css-app-event-decor) .coll-card .fp-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.css-app-event-decor) #collModal .modal-body { background:var(--noir); }
:where(.css-app-event-decor) .coll-essai { position:absolute; left:8px; bottom:8px; z-index:2; font-size:.62rem; font-weight:700;
              letter-spacing:.06em; padding:.18rem .45rem; border-radius:.4rem;
              background:var(--or); color:var(--noir); box-shadow:0 2px 8px #0008; }
:where(.css-app-event-decor) .coll-card.est-essai .coll-visual { border-color:var(--or); }
/* Cartes « comme sur le site » (reprises de src/partials/collections_grid.php) */
:where(.css-app-event-decor) .cg-carte {position:relative;display:block;background:#0c0c11;border:1.5px solid #1c1c26;border-radius:14px;
  aspect-ratio:16/12;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.45);transition:transform .25s,border-color .25s}
:where(.css-app-event-decor) .coll-card:hover .cg-carte {transform:translateY(-3px);border-color:#3a3320}
:where(.css-app-event-decor) .coll-card.is-current .cg-carte,
:where(.css-app-event-decor) .coll-card.est-essai .cg-carte {border-color:var(--or);box-shadow:0 0 0 2px var(--or) inset,0 14px 34px rgba(0,0,0,.45)}
:where(.css-app-event-decor) .cg-scene {position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:9% 6% 25%}
:where(.css-app-event-decor) .cg-ph {position:relative;box-sizing:content-box;flex:0 0 auto;height:92%;width:auto;background:#fff;
  padding:3px;border-radius:3px;box-shadow:0 12px 28px rgba(0,0,0,.6);transition:transform .35s}
:where(.css-app-event-decor) .cg-ph.p {transform:rotate(-6deg);z-index:2}
:where(.css-app-event-decor) .cg-ph.s {transform:rotate(-1deg);margin:0 -2%;z-index:3}
:where(.css-app-event-decor) .cg-ph.l {height:62%;transform:rotate(5deg);margin-left:-2%;z-index:1}
:where(.css-app-event-decor) .coll-card:hover .cg-ph.p {transform:rotate(-11deg) translateX(-7%)}
:where(.css-app-event-decor) .coll-card:hover .cg-ph.l {transform:rotate(9deg) translateX(7%)}
:where(.css-app-event-decor) .coll-card:hover .cg-ph.s {transform:rotate(0deg) translateY(-4%)}
@media(prefers-reduced-motion:reduce){:where(.css-app-event-decor) .cg-carte,
:where(.css-app-event-decor) .cg-ph {transition:none}}
:where(.css-app-event-decor) img.cg-ph {min-width:40px}
:where(.css-app-event-decor) canvas.cg-ph {opacity:0;transition:opacity .35s;width:auto}
:where(.css-app-event-decor) canvas.cg-ph.fp-pret {opacity:1}
:where(.css-app-event-decor) .cg-vide {align-self:center;margin-bottom:-20%;color:var(--ivoire-2);font-size:2rem}
:where(.css-app-event-decor) .cg-marque {position:absolute;right:10px;bottom:10px;left:10px;text-align:right;z-index:5}
:where(.css-app-event-decor) .cg-nom {display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#f7f4ee;color:#141414;font-weight:700;font-size:.9rem;line-height:1.15;padding:.3rem .7rem;border-radius:3px;
  box-shadow:0 8px 20px rgba(0,0,0,.5)}
:where(.css-app-event-decor) .cg-carte.a-theme .cg-nom {background:var(--ca);color:var(--ct);font-family:var(--cf,inherit);font-style:var(--cfs,normal);font-weight:var(--cfw,700)}
:where(.css-app-event-decor) .cg-badge {position:absolute;left:8px;top:8px;z-index:6;font-size:.66rem;font-weight:700;letter-spacing:.04em;
  padding:.2rem .5rem;border-radius:.4rem;background:rgba(var(--black-rgb),.85);border:1px solid var(--or);color:var(--or-clair)}
:where(.css-app-event-decor) .cg-badge.libre {border-color:#3c9a6a;color:#9fe0bd}
:where(.css-app-event-decor) .cg-badge.promo {border-color:#e0a84a;color:#ffd58a;background:rgba(60,30,0,.85)}   /* i292 */
:where(.css-app-event-decor) .cg-intro {position:absolute;right:8px;top:6px;z-index:6;font-size:.9rem;filter:drop-shadow(0 1px 2px #000)}
:where(.css-app-event-decor) .coll-card .coll-essai {top:34px;bottom:auto;z-index:6}
:where(.css-app-event-decor) .coll-card .fp-name {display:block;margin-top:.45rem}
:where(.css-app-event-decor) .tx-verif {display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:1rem;padding:1rem 1.1rem;border-radius:.7rem;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.14),rgba(var(--gold-rgb),.04));border:1.5px solid var(--or)}
:where(.css-app-event-decor) .tx-verif .btn {font-size:1.05rem;padding:.7rem 1.3rem}
:where(.css-app-event-decor) .tx-verif small {flex:1 1 220px;color:var(--ivoire-2)}
:where(.css-app-event-decor) #aiModal .modal-content { background:var(--noir2); border:1px solid var(--or); color:var(--ivoire); }
:where(.css-app-event-decor) .ai-choix { display:grid; gap:.9rem; grid-template-columns:1fr; }
@media (min-width:640px) { :where(.css-app-event-decor) .ai-choix { grid-template-columns:1fr 1fr; } }
:where(.css-app-event-decor) .ai-opt { display:flex; flex-direction:column; gap:.4rem; text-align:left; padding:1rem 1.1rem;
          border-radius:.7rem; border:1.5px solid var(--hair-soft); background:#15151f;
          color:var(--ivoire); transition:border-color .15s, background .15s; }
:where(.css-app-event-decor) .ai-opt:hover { border-color:var(--or); background:#1b1b26; }
:where(.css-app-event-decor) .ai-opt b { font-size:1.02rem; }
:where(.css-app-event-decor) .ai-opt span { font-size:.82rem; color:var(--ivoire-2); line-height:1.5; }

/* ── i246 — Deux chemins : « collection prête » ou « mes propres designs » ── */
:where(.css-app-event-decor) .dz-mode {display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){:where(.css-app-event-decor) .dz-mode {grid-template-columns:1fr}}
:where(.css-app-event-decor) .dz-opt {position:relative;display:flex;align-items:flex-start;gap:14px;text-align:left;padding:18px 20px;border-radius:16px;cursor:pointer;
  border:1px solid var(--hair-soft);background:rgba(255,255,255,.02);color:var(--ivoire);transition:border-color .15s,background .15s,box-shadow .15s}
:where(.css-app-event-decor) .dz-opt:hover {border-color:rgba(var(--gold-soft-rgb),.6)}
:where(.css-app-event-decor) .dz-opt.on {border-color:var(--or);background:rgba(var(--gold-soft-rgb),.09);box-shadow:0 0 0 1px var(--or) inset,0 10px 26px rgba(0,0,0,.25)}
:where(.css-app-event-decor) .dz-opt:focus-visible {outline:3px solid rgba(var(--gold-soft-rgb),.45);outline-offset:2px}
:where(.css-app-event-decor) .dz-ico {font-size:1.7rem;line-height:1;color:var(--or)}
:where(.css-app-event-decor) .dz-txt b {display:block;font-size:1.08rem;font-weight:600;padding-right:90px}
:where(.css-app-event-decor) .dz-txt small {display:block;color:var(--ivoire-2);margin-top:4px;line-height:1.4}
:where(.css-app-event-decor) .dz-tag {position:absolute;top:12px;right:12px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:var(--or);color:var(--black);font-weight:600}
:where(.css-app-event-decor) .dz-tag.dz-pro {background:transparent;color:var(--ivoire-2);border:1px solid var(--hair-soft)}
:where(.css-app-event-decor) .dz-cancel {color:var(--muted,#aaa)!important;font-size:.75rem;letter-spacing:.02em;text-transform:none;text-decoration:underline;padding:2px 4px}
:where(.css-app-event-decor) .dz-cancel:hover {color:#f2a5a3!important}
:where(.css-app-event-decor) .dz-included {background:#15151f;border-radius:.6rem;padding:.7rem 1rem;line-height:1.7}
:where(.css-app-event-decor) .dz-included summary {cursor:pointer;list-style-position:inside}

/* ── i249 — recherche + catégories des collections ── */
:where(.css-app-event-decor) .cb-bar {display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
:where(.css-app-event-decor) .cb-bar .cb-q {max-width:360px}
:where(.css-app-event-decor) .cb-pills {display:flex;flex-wrap:wrap;gap:8px}
:where(.css-app-event-decor) .cb-pills .fpill {white-space:nowrap}
:where(.css-app-event-decor) .cb-pills .cb-n {opacity:.6;font-size:.85em;margin-left:2px}
/* i249 — la collection choisie, en carte compacte */
:where(.css-app-event-decor) .sc-row {display:flex;gap:22px;align-items:flex-start}
:where(.css-app-event-decor) .sc-card {flex:0 0 250px;max-width:250px}
:where(.css-app-event-decor) .sc-card .cg-carte {cursor:default}
:where(.css-app-event-decor) .sc-info {flex:1 1 auto;min-width:0}
:where(.css-app-event-decor) .sc-name {font-family:var(--serif);font-size:1.6rem;line-height:1.15;margin-bottom:8px}
:where(.css-app-event-decor) .sc-tags {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
:where(.css-app-event-decor) .sc-tag {font-size:.72rem;padding:4px 10px;border-radius:999px;border:1px solid var(--hair-soft);color:var(--ivoire-2)}
:where(.css-app-event-decor) .sc-desc {color:var(--ivoire-2);font-size:.9rem;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:where(.css-app-event-decor) .sc-meta {display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem}
:where(.css-app-event-decor) .sc-meta a {color:var(--or);text-decoration:none}
:where(.css-app-event-decor) .sc-meta a:hover {text-decoration:underline}
@media(max-width:640px){:where(.css-app-event-decor) .sc-row {flex-direction:column}:where(.css-app-event-decor) .sc-card {flex:none;max-width:none;width:100%}}
/* i256 — la vignette de la collection, en haut de la colonne gauche de l'accueil */
:where(.css-app-event-decor) .sc-compact {gap:14px;padding-bottom:14px;border-bottom:1px solid var(--hair-soft)}
:where(.css-app-event-decor) .sc-compact .sc-card {flex:0 0 150px;max-width:150px}
:where(.css-app-event-decor) .sc-compact .sc-card .cg-nom {font-size:.62rem}
:where(.css-app-event-decor) .sc-compact .sc-name {font-size:1.25rem;margin-bottom:6px}
:where(.css-app-event-decor) .sc-compact .sc-tags {margin-bottom:6px}
:where(.css-app-event-decor) .sc-compact .sc-tag {font-size:.66rem;padding:3px 8px}
:where(.css-app-event-decor) .sc-compact .sc-desc {font-size:.8rem;-webkit-line-clamp:2;margin-bottom:6px}
@media(max-width:640px){:where(.css-app-event-decor) .sc-compact {flex-direction:row}:where(.css-app-event-decor) .sc-compact .sc-card {flex:0 0 120px;max-width:120px}}
:where(.css-app-event-decor) .cg-badge.libre.own {background:linear-gradient(135deg,#f6d77a,var(--gold-soft));color:#2a1d05;border-color:#f6d77a;font-weight:700}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-decor-2
   Ancien fichier : pages/operator/event/decor-2.css
   Activée par css_use('app/event-decor-2') dans : operator/event/decor.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/decor.php (bloc 2) — sortis de la page (i102b). */

:where(.css-app-event-decor-2) .ipv-drag { pointer-events:auto; cursor:grab; padding:2px 8px; border:1px dashed rgba(var(--gold-soft-rgb),.35); border-radius:.3rem; user-select:none; max-width:92%; }
:where(.css-app-event-decor-2) .ipv-drag:hover,
:where(.css-app-event-decor-2) .ipv-drag.is-drag { border-color:var(--gold-soft); cursor:grabbing; }
:where(.css-app-event-decor-2) .ipv-drag.ipv-free { position:absolute; transform:translate(-50%,-50%); margin:0 !important; width:max-content; max-width:90%; }

/* ── i245 — Éditeur de l'écran d'accueil : aperçu à l'échelle de la cabine ── */
:where(.css-app-event-decor-2) #sec-intro #ipv-veil { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(var(--black-rgb),.25), rgba(var(--black-rgb),.78)); }
:where(.css-app-event-decor-2) #sec-intro #intro-preview-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:4%; pointer-events:none; touch-action:none; }
:where(.css-app-event-decor-2) #sec-intro #ipv-box { pointer-events:auto; cursor:grab; user-select:none; box-sizing:border-box; max-width:100%;
  outline:1px dashed rgba(var(--gold-soft-rgb),.55); outline-offset:3px; border-radius:6px; }
:where(.css-app-event-decor-2) #sec-intro #ipv-box.has-fill { border-radius: 10px; }
:where(.css-app-event-decor-2) #sec-intro #ipv-box:hover,
:where(.css-app-event-decor-2) #sec-intro #ipv-box.is-drag { outline-color:var(--gold-soft); cursor:grabbing; }
:where(.css-app-event-decor-2) #sec-intro #ipv-box.ipv-free { position:absolute; transform:translate(-50%,-50%); margin:0; }
:where(.css-app-event-decor-2) #sec-intro #ipv-title { line-height:1.08; overflow-wrap:anywhere; }
:where(.css-app-event-decor-2) #sec-intro #ipv-sub { margin-top:.45em; letter-spacing:.04em; overflow-wrap:anywhere; }
:where(.css-app-event-decor-2) #sec-intro #ipv-sub:empty { display:none; }

:where(.css-app-event-decor-2) #sec-intro .ws-group { padding:12px 14px; margin-bottom:12px; border:1px solid var(--hair-soft); border-radius:.6rem;
  background: rgba(255,255,255,.015); }
:where(.css-app-event-decor-2) #sec-intro .ws-lbl { display:block; font-size:.72rem; color:var(--ivoire-2); margin-bottom:3px; }
:where(.css-app-event-decor-2) #sec-intro .ws-hint { font-size:.7rem; margin-top:2px; }
:where(.css-app-event-decor-2) #sec-intro .ws-font option { font-size: 1.05rem; }

/* Couleur : Auto + 3 pastilles + sélecteur libre */
:where(.css-app-event-decor-2) .ws-color { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
:where(.css-app-event-decor-2) .ws-color .ws-sw { width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.25); padding:0; cursor:pointer; }
:where(.css-app-event-decor-2) .ws-color .ws-auto { width:auto; padding:0 9px; border-radius:14px; font-size:.7rem; background:transparent; color:var(--ivoire-2); }
:where(.css-app-event-decor-2) .ws-color .ws-sw.on,
:where(.css-app-event-decor-2) #sec-intro .ws-pick.on { border-color:var(--gold-soft); box-shadow:0 0 0 2px rgba(var(--gold-soft-rgb),.45); }
:where(.css-app-event-decor-2) #sec-intro .ws-pick { width:34px; height:30px; padding:2px; border:2px solid rgba(255,255,255,.25); border-radius:8px; background:transparent; cursor:pointer; flex:0 0 auto; }
:where(.css-app-event-decor-2) #sec-intro .ws-al { padding:.35rem .5rem; letter-spacing:0; display:flex; align-items:center; justify-content:center; }
:where(.css-app-event-decor-2) #sec-intro .ipv-ghost { pointer-events:none; opacity:.55; white-space:nowrap; }
:where(.css-app-event-decor-2) #sec-intro .ipv-eyebrow { color:var(--gold-soft); letter-spacing:.42em; text-transform:uppercase; }
:where(.css-app-event-decor-2) #sec-intro .ipv-btn { background:var(--gold-soft); color:var(--black); letter-spacing:.24em; text-transform:uppercase; }
/* i246 — replis de l'éditeur d'accueil */
:where(.css-app-event-decor-2) #sec-intro .ws-more {border:1px solid var(--hair-soft);border-radius:.6rem;padding:10px 14px;background:rgba(255,255,255,.015)}
:where(.css-app-event-decor-2) #sec-intro .ws-more > summary {cursor:pointer;font-weight:500;color:var(--ivoire)}
:where(.css-app-event-decor-2) #sec-intro .ws-more[open] > summary {margin-bottom:2px}
:where(.css-app-event-decor-2) #sec-intro .ws-style .ws-group {background:transparent}
:where(.css-app-event-decor-2) #sec-intro .ws-head {font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--or);margin-bottom:6px}
/* i249 — interrupteur « accueil de la collection » + aperçu */
:where(.css-app-event-decor-2) #sec-intro .ipv-coll {position:absolute;inset:0}
:where(.css-app-event-decor-2) #sec-intro .ipv-coll img,
:where(.css-app-event-decor-2) #sec-intro .ipv-coll video {width:100%;height:100%;object-fit:cover}
:where(.css-app-event-decor-2) .ws-switch {display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:10px 12px;border:1px solid var(--hair-soft);border-radius:12px;background:rgba(var(--gold-soft-rgb),.05)}
:where(.css-app-event-decor-2) .ws-switch input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-event-decor-2) .ws-switch-ui {flex:0 0 44px;height:26px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--hair-soft);position:relative;transition:background .2s;margin-top:1px}
:where(.css-app-event-decor-2) .ws-switch-ui::after {content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--cream);transition:transform .2s}
:where(.css-app-event-decor-2) .ws-switch input:checked + .ws-switch-ui {background:var(--or);border-color:var(--or)}
:where(.css-app-event-decor-2) .ws-switch input:checked + .ws-switch-ui::after {transform:translateX(18px);background:var(--black)}
:where(.css-app-event-decor-2) .ws-switch input:focus-visible + .ws-switch-ui {box-shadow:0 0 0 3px rgba(var(--gold-soft-rgb),.35)}
:where(.css-app-event-decor-2) .ws-switch-txt b {display:block;font-weight:600}
:where(.css-app-event-decor-2) .ws-switch-txt small {display:block;color:var(--muted,#aaa);margin-top:2px}
/* i251 — poignées de largeur du bloc + bouton « Commencer » dans l'aperçu */
:where(.css-app-event-decor-2) #sec-intro #ipv-box {position:relative}
:where(.css-app-event-decor-2) #sec-intro #ipv-box.ipv-free {position:absolute}
:where(.css-app-event-decor-2) #sec-intro .ipv-h {position:absolute;top:50%;width:12px;height:34px;margin-top:-17px;border-radius:6px;background:var(--gold-soft);border:2px solid var(--black);
  cursor:ew-resize;touch-action:none;box-shadow:0 1px 6px rgba(0,0,0,.5);opacity:.85;z-index:3}
:where(.css-app-event-decor-2) #sec-intro .ipv-h-l {left:-9px} :where(.css-app-event-decor-2) #sec-intro .ipv-h-r {right:-9px}
:where(.css-app-event-decor-2) #sec-intro .ipv-h:hover,
:where(.css-app-event-decor-2) #sec-intro #ipv-box.is-resize .ipv-h {opacity:1;transform:scaleY(1.1)}
:where(.css-app-event-decor-2) #sec-intro #ipv-box.is-resize {outline-color:var(--gold-soft);outline-style:solid}
:where(.css-app-event-decor-2) #sec-intro #ipv-start {pointer-events:auto;cursor:grab;user-select:none;touch-action:none;white-space:nowrap;text-transform:uppercase;letter-spacing:.24em;font-weight:500;
  outline:1px dashed rgba(var(--gold-soft-rgb),.55);outline-offset:3px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;text-align:center}
:where(.css-app-event-decor-2) #sec-intro #ipv-start.is-drag {cursor:grabbing;outline-color:var(--gold-soft)}
:where(.css-app-event-decor-2) #sec-intro #ipv-start.ipv-free {position:absolute;transform:translate(-50%,-50%);margin:0!important}
:where(.css-app-event-decor-2) #sec-intro #ipv-start.sh-square {border-radius:0}
:where(.css-app-event-decor-2) #sec-intro #ipv-start.sh-rounded {border-radius:8px}
:where(.css-app-event-decor-2) #sec-intro #ipv-start.sh-pill {border-radius:999px}
:where(.css-app-event-decor-2) #sec-intro #ipv-start.sh-circle {border-radius:50%;white-space:normal;letter-spacing:.12em}
:where(.css-app-event-decor-2) #sec-intro #ipv-start.is-off {opacity:.22;outline-style:dotted}
/* pictos des formes */
:where(.css-app-event-decor-2) .ws-shapes .btn {display:flex;align-items:center;justify-content:center;padding:.35rem .4rem}
:where(.css-app-event-decor-2) .ws-shape {display:inline-block;width:26px;height:12px;background:currentColor}
:where(.css-app-event-decor-2) .ws-shape-rounded {border-radius:4px}:where(.css-app-event-decor-2) .ws-shape-pill {border-radius:999px}:where(.css-app-event-decor-2) .ws-shape-circle {width:16px;height:16px;border-radius:50%}
/* i254 — le bloc placé librement emmène le bandeau (au-dessus) et le bouton (en dessous) */
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-above,
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-below {position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-above {bottom:100%;padding-bottom:6px}
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-below {top:100%}
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-above:empty,
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-below:empty {display:none}
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-above .ipv-eyebrow {margin-bottom:0!important}
:where(.css-app-event-decor-2) #sec-intro #ipv-box > .ipv-below #ipv-start {pointer-events:auto}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-ai-overlay
   Ancien fichier : pages/operator/event/ai-overlay.css
   Activée par css_use('app/event-ai-overlay') dans : operator/event/decor.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BOOTH AI STUDIO — volet Décor : texte et cadre sur les photos IA (i180) */
:where(.css-app-event-ai-overlay) .aiov {margin:6px 0 22px;padding:16px 16px 18px;border:1px solid var(--hair-soft);border-radius:14px;
  background:rgba(255,255,255,.02)}
:where(.css-app-event-ai-overlay) .aiov-t {font-size:1rem;margin:0 0 4px}
:where(.css-app-event-ai-overlay) .aiov-grid {display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start;margin-top:12px}
:where(.css-app-event-ai-overlay) .aiov-row {display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
:where(.css-app-event-ai-overlay) .aiov-col {display:flex;align-items:center;gap:8px}
:where(.css-app-event-ai-overlay) .aiov-col input[type=color] {width:42px;height:32px;padding:2px;border-radius:8px;border:1px solid var(--hair-soft);background:transparent;cursor:pointer}
:where(.css-app-event-ai-overlay) .aiov-fill {font-size:.8rem;padding:2px 0;background:none;border:0;color:var(--or);text-decoration:underline;cursor:pointer}
:where(.css-app-event-ai-overlay) .aiov-prev {position:sticky;top:90px}
:where(.css-app-event-ai-overlay) .aiov-prev img {display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--hair-soft);background:#1a1510;
  transition:opacity .2s}
:where(.css-app-event-ai-overlay) .aiov-prev img.is-loading {opacity:.55}
:where(.css-app-event-ai-overlay) .aiov-prev small {display:block;margin-top:6px}
:where(.css-app-event-ai-overlay) .aiov.is-off .aiov-forme-dep {opacity:.45}
@media (max-width:760px){
  :where(.css-app-event-ai-overlay) .aiov-grid {grid-template-columns:1fr}
  :where(.css-app-event-ai-overlay) .aiov-prev {position:static;max-width:280px}
}
:where(.css-app-event-ai-overlay) .aiov-col label,
:where(.css-app-event-ai-overlay) .aiov-row>label {white-space:nowrap}
:where(.css-app-event-ai-overlay) .aiov .form-check-input {float:none;margin-left:0}
:where(.css-app-event-ai-overlay) .aiov-logo-fete {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
:where(.css-app-event-ai-overlay) .aiov-logo-fete input {max-width:320px}
:where(.css-app-event-ai-overlay) .aiov-logo-fete small {flex-basis:100%}
:where(.css-app-event-ai-overlay) .aiov-logo-mini {height:40px;width:auto;max-width:120px;object-fit:contain;padding:4px;border-radius:8px;
  background:repeating-conic-gradient(#2a241d 0 25%,#1c1813 0 50%) 0 0/12px 12px;border:1px solid var(--hair-soft)}
/* i252 — texte posé sur la photo : fond, position, marges */
:where(.css-app-event-ai-overlay) .aiov-libre {padding:12px 14px;border:1px solid var(--hair-soft);border-radius:12px;background:rgba(255,255,255,.015)}
:where(.css-app-event-ai-overlay) .aiov-range {gap:8px}
:where(.css-app-event-ai-overlay) .aiov-range input[type=range] {width:130px}
:where(.css-app-event-ai-overlay) .aiov-val {min-width:3.2em;color:var(--or)}
:where(.css-app-event-ai-overlay) .aiov-margins {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin-bottom:6px}
:where(.css-app-event-ai-overlay) .aiov-margins .aiov-range label {min-width:4.5em}
:where(.css-app-event-ai-overlay) .aiov-margins input[type=range] {flex:1;width:auto}
@media (max-width:560px){:where(.css-app-event-ai-overlay) .aiov-margins {grid-template-columns:1fr}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-galerie
   Ancien fichier : pages/operator/event/galerie.css
   Activée par css_use('app/event-galerie') dans : operator/event/galerie.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* i285 — le lien de la galerie : QR, adresse, PDF à imprimer. */
:where(.css-app-event-galerie) .gal-share {display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:14px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--gold-rgb),.05)}
:where(.css-app-event-galerie) .gal-share__qr {width:132px;height:132px;flex:none;padding:8px;border-radius:var(--radius-sm);background:var(--cream)}
:where(.css-app-event-galerie) .gal-share__qr svg {width:100%;height:100%;display:block}
:where(.css-app-event-galerie) .gal-share__main {flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:8px}
:where(.css-app-event-galerie) .gal-share__lbl {font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
:where(.css-app-event-galerie) .gal-share__row {display:flex;gap:8px}
:where(.css-app-event-galerie) .gal-share__row .form-control {font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
:where(.css-app-event-galerie) .gal-share__row .btn {white-space:nowrap;flex:0 0 auto}
:where(.css-app-event-galerie) .gal-share__act {display:flex;gap:8px;flex-wrap:wrap}
:where(.css-app-event-galerie) .gal-share__hint {margin:0;font-size:var(--text-xs);color:var(--ivory-2)}
/* Styles de public/operator/event/galerie.php — sortis de la page (i102b). */

:where(.css-app-event-galerie) .pg-lien {display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--or);border-radius:14px;
  background:rgba(var(--gold-soft-rgb),.08);color:var(--ivoire);text-decoration:none;transition:background .15s}
:where(.css-app-event-galerie) .pg-lien:hover {background:rgba(var(--gold-soft-rgb),.16);color:var(--ivoire)}
:where(.css-app-event-galerie) .pg-lien-ic {font-size:1.6rem}
:where(.css-app-event-galerie) .pg-lien-txt {flex:1;display:flex;flex-direction:column;gap:2px}
:where(.css-app-event-galerie) .pg-lien-txt span {font-size:.84rem;color:var(--ivoire-2)}
:where(.css-app-event-galerie) .pg-lien-fl {font-size:1.4rem;color:var(--or)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-galerie-3
   Ancien fichier : pages/operator/event/galerie-3.css
   Activée par css_use('app/event-galerie-3') dans : operator/event/galerie.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/galerie.php (bloc 3) — sortis de la page (i102b). */

:where(.css-app-event-galerie-3) .imp-zone {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px dashed var(--hair);border-radius:12px;padding:14px 18px;background:rgba(var(--gold-soft-rgb),.05);
  transition:border-color .15s,background .15s}
:where(.css-app-event-galerie-3) .imp-zone.sur {border-color:var(--or);background:rgba(var(--gold-soft-rgb),.12)}
:where(.css-app-event-galerie-3) .imp-txt {display:flex;flex-direction:column;gap:3px;min-width:240px;flex:1}
:where(.css-app-event-galerie-3) .imp-txt span {font-size:.84rem;color:var(--ivoire-2);line-height:1.45}
:where(.css-app-event-galerie-3) .imp-case {display:flex;gap:9px;align-items:flex-start;margin:10px 2px 0;font-size:.87rem;cursor:pointer}
:where(.css-app-event-galerie-3) .imp-case i {display:block;font-style:normal;font-size:.78rem;color:var(--ivoire-2);margin-top:2px}
:where(.css-app-event-galerie-3) .imp-etat {margin:10px 2px 0;font-size:.86rem}
:where(.css-app-event-galerie-3) .imp-etat .ko {color:#e58b8b}
:where(.css-app-event-galerie-3) .imp-barre {height:4px;border-radius:2px;background:var(--hair-soft);overflow:hidden;margin-top:6px}
:where(.css-app-event-galerie-3) .imp-barre b {display:block;height:100%;width:0;background:var(--or);transition:width .2s}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-invites
   Ancien fichier : pages/operator/event/invites.css
   Activée par css_use('app/event-invites') dans : operator/event/invites.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/invites.php — sortis de la page (i102b). */

:where(.css-app-event-invites) .inv-kpis {display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
:where(.css-app-event-invites) .inv-kpi {border:1px solid var(--hair-soft);border-radius:12px;padding:13px 15px;background:rgba(var(--gold-soft-rgb),.04)}
:where(.css-app-event-invites) .inv-kpi b {font-family:var(--serif);font-size:1.8rem;line-height:1;color:var(--or);display:block}
:where(.css-app-event-invites) .inv-kpi small {display:block;font-size:.7rem;color:var(--muted,#aaa);margin-top:5px;line-height:1.35}

/* i248 — interrupteur « les invités photographient avec leur téléphone » */
:where(.css-app-event-invites) .inv-switch {display:flex;align-items:flex-start;gap:14px;cursor:pointer;margin:0}
:where(.css-app-event-invites) .inv-switch input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-event-invites) .inv-switch-ui {flex:0 0 52px;height:30px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--hair-soft);position:relative;transition:background .2s;margin-top:2px}
:where(.css-app-event-invites) .inv-switch-ui::after {content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--cream);transition:transform .2s}
:where(.css-app-event-invites) .inv-switch input:checked + .inv-switch-ui {background:var(--or);border-color:var(--or)}
:where(.css-app-event-invites) .inv-switch input:checked + .inv-switch-ui::after {transform:translateX(22px);background:var(--black)}
:where(.css-app-event-invites) .inv-switch input:focus-visible + .inv-switch-ui {box-shadow:0 0 0 3px rgba(var(--gold-soft-rgb),.35)}
:where(.css-app-event-invites) .inv-switch-txt b {display:block;font-size:1.05rem;font-weight:600}
:where(.css-app-event-invites) .inv-switch-txt small {display:block;color:var(--muted,#aaa);margin-top:3px;line-height:1.4}
:where(.css-app-event-invites) .inv-off-note {font-size:.85rem;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px dashed var(--hair-soft);color:var(--ivoire-2)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-textes
   Ancien fichier : pages/operator/event/textes.css
   Activée par css_use('app/event-textes') dans : operator/event/textes.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/textes.php — sortis de la page (i102b). */

:where(.css-app-event-textes) .tx-mots textarea {font-family:var(--serif);font-size:1.05rem}
:where(.css-app-event-textes) #sec-verif {scroll-margin-top:170px}
:where(.css-app-event-textes) .tx-prog {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
:where(.css-app-event-textes) .tx-prog .barre {flex:1 1 160px;height:6px;border-radius:99px;background:#24222a;overflow:hidden}
:where(.css-app-event-textes) .tx-prog .barre i {display:block;height:100%;background:var(--or);transition:width .3s}
:where(.css-app-event-textes) .tx-cadres {display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
:where(.css-app-event-textes) .tx-cadres a {position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px 5px;
   border-radius:10px;border:1px solid var(--hair-soft);color:var(--ivoire-2);text-decoration:none;font-size:.7rem;min-width:64px}
:where(.css-app-event-textes) .tx-cadres a:hover {border-color:var(--or);color:var(--ivoire)}
:where(.css-app-event-textes) .tx-cadres a.on {border-color:var(--or);background:rgba(var(--gold-rgb),.1);color:var(--or-clair)}
:where(.css-app-event-textes) .tx-cadres img {height:52px;width:auto;max-width:90px;background:#fff;border-radius:2px;object-fit:contain}
:where(.css-app-event-textes) .tx-cadres .etat {position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
   font-size:.66rem;font-weight:700;border:2px solid var(--noir2)}
:where(.css-app-event-textes) .tx-cadres .etat.ok {background:#3c9a6a;color:#fff}
:where(.css-app-event-textes) .tx-cadres .etat.revoir {background:#d9a33a;color:#1a1408}
:where(.css-app-event-textes) .tx-cadres .etat.a-faire {background:#3a3844;color:var(--ivoire-2)}
:where(.css-app-event-textes) .tx-plateau {background:var(--surface-3);border-radius:.6rem;padding:14px 10px}
:where(.css-app-event-textes) .tx-alertes {max-width:720px;margin:12px auto 0;text-align:left}
:where(.css-app-event-textes) .tx-alertes .al {display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-radius:8px;font-size:.86rem;margin-bottom:6px}
:where(.css-app-event-textes) .tx-alertes .al.warn {background:rgba(217,163,58,.12);border:1px solid rgba(217,163,58,.45);color:#f2d49a}
:where(.css-app-event-textes) .tx-alertes .al.info {background:rgba(255,255,255,.04);border:1px solid var(--hair-soft);color:var(--ivoire-2)}
:where(.css-app-event-textes) .tx-alertes .al.bon {background:rgba(60,154,106,.12);border:1px solid rgba(60,154,106,.45);color:#9fe0bd}
:where(.css-app-event-textes) .tx-actions {display:flex;gap:10px;flex-wrap:wrap;align-items:center}
:where(.css-app-event-textes) .tx-actions .btn-valider {font-size:1.05rem;padding:.7rem 1.4rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-event-text
   Ancien fichier : pages/operator/event-text.css
   Activée par css_use('app/operator-event-text') dans : operator/event-text.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event-text.php — sortis de la page (i102b). */

:where(.css-app-operator-event-text) .et-fil {font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivoire-2);margin-bottom:12px}
:where(.css-app-operator-event-text) .et-fil a {color:var(--ivoire-2);text-decoration:none}
:where(.css-app-operator-event-text) .et-fil a:hover {color:var(--or)}
/* LES AUTRES FORMATS RESTENT SOUS LA MAIN. Régler quatre cadres en revenant à
   la liste entre chaque, c'est trois allers-retours de trop — et l'occasion
   d'oublier le dernier. */
:where(.css-app-operator-event-text) .et-onglets {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
:where(.css-app-operator-event-text) .et-onglets a {display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;
   border:1px solid var(--hair-soft);color:var(--ivoire-2);text-decoration:none;font-size:.8rem}
:where(.css-app-operator-event-text) .et-onglets a:hover {border-color:var(--or);color:var(--ivoire)}
:where(.css-app-operator-event-text) .et-onglets a.on {border-color:var(--or);background:rgba(var(--gold-rgb),.1);color:var(--or-clair)}
:where(.css-app-operator-event-text) .et-onglets img {height:34px;width:auto;background:#fff;border-radius:2px}
:where(.css-app-operator-event-text) .et-onglets b {font-weight:600}
:where(.css-app-operator-event-text) .et-pastille {font-size:.62rem;padding:2px 7px;border-radius:99px;background:rgba(143,214,173,.16);color:var(--success-light)}
:where(.css-app-operator-event-text) .et-bar {display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-events
   Ancien fichier : pages/operator/events.css
   Activée par css_use('app/operator-events') dans : operator/events.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/events.php — sortis de la page (i102b). */

:where(.css-app-operator-events) .evt-row:hover {background:rgba(var(--gold-soft-rgb),.07)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-factures
   Ancien fichier : pages/operator/factures.css
   Activée par css_use('app/operator-factures') dans : operator/factures.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* operator/factures.php (i210) */
:where(.css-app-operator-factures) .fa-vide {border:1px dashed var(--hair);border-radius:14px;padding:24px;color:var(--ivoire-2);text-align:center}
:where(.css-app-operator-factures) .fa-liste {display:grid;gap:10px}
:where(.css-app-operator-factures) .fa-l {display:grid;grid-template-columns:minmax(150px,auto) 1fr auto auto;gap:14px;align-items:center;border:1px solid var(--hair-soft);
  border-radius:14px;padding:12px 16px;background:rgba(255,255,255,.02)}
:where(.css-app-operator-factures) .fa-l.avoir {border-color:rgba(230,176,122,.4)}
:where(.css-app-operator-factures) .fa-n b {display:block;font-size:.95rem}
:where(.css-app-operator-factures) .fa-n small,
:where(.css-app-operator-factures) .fa-d {font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-operator-factures) .fa-m {font-family:var(--serif);font-size:1.25rem;color:var(--or);white-space:nowrap}
:where(.css-app-operator-factures) .fa-a {display:flex;gap:6px}
@media (max-width:700px){:where(.css-app-operator-factures) .fa-l {grid-template-columns:1fr auto}:where(.css-app-operator-factures) .fa-d {grid-column:1 / -1}:where(.css-app-operator-factures) .fa-a {grid-column:1 / -1}}

/* i263 — par année, icône PDF, « Payée » */
:where(.css-app-operator-factures) .fa-an {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 10px;flex-wrap:wrap}
:where(.css-app-operator-factures) .fa-an h2 {font-family:var(--serif);font-size:1.5rem;margin:0}
:where(.css-app-operator-factures) .fa-an span {font-size:.85rem;color:var(--ivoire-2)}
:where(.css-app-operator-factures) .fa-an b {color:var(--or);font-weight:600}
:where(.css-app-operator-factures) .fa-l {grid-template-columns:auto minmax(150px,auto) 1fr auto auto}
:where(.css-app-operator-factures) .fa-ico {width:42px;height:48px;border-radius:8px;display:grid;place-items:center;position:relative;
  background:rgba(var(--gold-soft-rgb),.1);border:1px solid rgba(var(--gold-soft-rgb),.35);color:var(--or)}
:where(.css-app-operator-factures) .fa-ico svg {width:22px;height:22px;margin-top:-6px}
:where(.css-app-operator-factures) .fa-ico small {position:absolute;bottom:3px;font-size:.55rem;font-weight:700;letter-spacing:.08em}
:where(.css-app-operator-factures) .fa-l.avoir .fa-ico {background:rgba(230,176,122,.1);border-color:rgba(230,176,122,.4);color:#e6b07a}
:where(.css-app-operator-factures) .fa-m {display:flex;flex-direction:column;align-items:flex-end;gap:2px}
:where(.css-app-operator-factures) .fa-ok {font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.06em;color:#7fd09a;text-transform:uppercase}
@media (max-width:700px){:where(.css-app-operator-factures) .fa-l {grid-template-columns:auto 1fr auto}:where(.css-app-operator-factures) .fa-d,
:where(.css-app-operator-factures) .fa-a {grid-column:1 / -1}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-index
   Ancien fichier : pages/operator/index.css
   Activée par css_use('app/operator-index') dans : operator/index.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/index.php — sortis de la page (i102b). */

:where(.css-app-operator-index) .cab-aide {margin:-6px 0 14px;max-width:80ch;text-transform:none;letter-spacing:.01em;font-size:.86rem;line-height:1.55}
:where(.css-app-operator-index) .cab-uni {display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  padding:14px 18px;border:1px solid var(--hair);border-radius:14px;background:rgba(var(--gold-soft-rgb),.05)}
:where(.css-app-operator-index) .cab-uni.verrou {opacity:.85;border-style:dashed}
:where(.css-app-operator-index) .cab-uni-t {display:flex;flex-direction:column;gap:3px;max-width:62ch}
:where(.css-app-operator-index) .cab-uni-t b {color:var(--ivoire);font-weight:500}
:where(.css-app-operator-index) .cab-uni-t span {font-size:.84rem;color:var(--ivoire-2)}
:where(.css-app-operator-index) .cab-uni-f {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
:where(.css-app-operator-index) .cab {display:flex;flex-direction:column;gap:14px}
:where(.css-app-operator-index) .cab-off {opacity:.55}
:where(.css-app-operator-index) .cab-tete {display:flex;align-items:flex-start;gap:12px}
:where(.css-app-operator-index) .cab-ic {flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;
  background:rgba(var(--gold-soft-rgb),.1);border:1px solid var(--hair-soft)}
:where(.css-app-operator-index) .cab-id {flex:1;min-width:0}
:where(.css-app-operator-index) .cab-nom {width:100%;background:transparent;border:1px solid transparent;border-radius:8px;padding:2px 6px;margin-left:-6px;
  color:var(--ivoire);font-family:var(--serif);font-size:1.2rem}
:where(.css-app-operator-index) .cab-nom:hover {border-color:var(--hair-soft)} :where(.css-app-operator-index) .cab-nom:focus {outline:none;border-color:var(--or);background:rgba(0,0,0,.25)}
:where(.css-app-operator-index) .cab-plat {font-size:.8rem;color:var(--ivoire-2)}
:where(.css-app-operator-index) .cab-etat {flex:none;font-size:.72rem;padding:3px 9px;border-radius:99px;border:1px solid var(--hair-soft);color:var(--ivoire-2);white-space:nowrap}
:where(.css-app-operator-index) .cab-etat.on {color:#8ff0c8;border-color:rgba(143,240,200,.35)}
:where(.css-app-operator-index) .cab-etat.off {color:#f2a5a3;border-color:rgba(242,165,163,.35)}
:where(.css-app-operator-index) .cab-stats {font-size:.8rem;color:var(--ivoire-2);margin-top:-6px} :where(.css-app-operator-index) .cab-stats b {color:var(--ivoire)}
:where(.css-app-operator-index) .cab-lbl {font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivoire-2);margin-bottom:6px}
:where(.css-app-operator-index) .cab-pin {display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--hair-soft)}
:where(.css-app-operator-index) .cab-code {font-family:var(--serif);font-size:1.6rem;letter-spacing:.3em;color:var(--or);line-height:1}
:where(.css-app-operator-index) .cab-code.petit {font-size:1.1rem;letter-spacing:.18em;padding:4px 10px;border:1px dashed var(--hair);border-radius:8px}
:where(.css-app-operator-index) .cab-pin-act {display:flex;gap:6px}
:where(.css-app-operator-index) .cab-pin-f {display:flex;gap:8px;margin-top:-6px} :where(.css-app-operator-index) .cab-pin-f[hidden] {display:none}
:where(.css-app-operator-index) .cab-chips {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
:where(.css-app-operator-index) .cab-chip {margin:0;cursor:pointer}
:where(.css-app-operator-index) .cab-chip input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-operator-index) .cab-chip span {display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;border:1px solid var(--hair-soft);
  font-size:.84rem;color:var(--ivoire-2);transition:all .15s}
:where(.css-app-operator-index) .cab-chip span i {font-style:normal;font-size:.7rem;color:#8ff0c8}
:where(.css-app-operator-index) .cab-chip input:checked + span {border-color:var(--or);color:var(--ivoire);background:rgba(var(--gold-soft-rgb),.14)}
:where(.css-app-operator-index) .cab-chip input:focus-visible + span {outline:2px solid var(--or);outline-offset:2px}
:where(.css-app-operator-index) .cab-valider {width:100%}
:where(.css-app-operator-index) .cab-pied {display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--hair-soft);margin-top:auto}
:where(.css-app-operator-index) .cab-lien {background:none;border:0;padding:4px 0;font-size:.8rem;letter-spacing:.06em;color:var(--ivoire-2);cursor:pointer}
:where(.css-app-operator-index) .cab-lien:hover {color:var(--ivoire)} :where(.css-app-operator-index) .cab-lien.rouge {color:#d98c8c} :where(.css-app-operator-index) .cab-lien.rouge:hover {color:#f0a8a8} :where(.css-app-operator-index) .cab-lien.vert {color:#8ff0c8}
/* i207 — cabines comprises dans la formule */
:where(.css-app-operator-index) .cab-quota {margin:0 0 14px;padding:10px 14px;border:1px solid var(--hair-soft);border-radius:12px;font-size:.9rem;color:var(--ivoire)}
:where(.css-app-operator-index) .cab-quota span {display:block;font-size:.78rem;color:var(--ivoire-2);margin-top:2px}
:where(.css-app-operator-index) .cab-essai {display:inline-block;margin-left:6px;font-size:.66rem;letter-spacing:.04em;padding:1px 8px;border-radius:99px;border:1px solid var(--hair-soft);color:var(--ivoire-2);opacity:.85;white-space:nowrap} /* i213 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-my-tools
   Ancien fichier : pages/operator/my-tools.css
   Activée par css_use('app/operator-my-tools') dans : operator/my-tools.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/my-tools.php — sortis de la page (i102b). */

:where(.css-app-operator-my-tools) .mt-col .card {height:100%}
:where(.css-app-operator-my-tools) .mt-h {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
:where(.css-app-operator-my-tools) .mt-sub {font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-2);margin:14px 0 8px}
:where(.css-app-operator-my-tools) .mg {display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
:where(.css-app-operator-my-tools) .mi {position:relative;border:1px solid var(--hair-soft);border-radius:12px;background:var(--surface-3);overflow:hidden}
:where(.css-app-operator-my-tools) .mi.exp {opacity:.6}
:where(.css-app-operator-my-tools) .mi-vis {aspect-ratio:1/1;background:#070706;display:flex;align-items:center;justify-content:center;overflow:hidden}
:where(.css-app-operator-my-tools) .mi-vis img {max-width:100%;max-height:100%;object-fit:contain}
:where(.css-app-operator-my-tools) .mi-vis.cover img {width:100%;height:100%;object-fit:cover}
:where(.css-app-operator-my-tools) .mi-body {padding:8px 9px 9px}
:where(.css-app-operator-my-tools) .mi-name {font-size:.84rem;color:var(--ivoire);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-my-tools) .mi-meta {font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivoire-2)}
:where(.css-app-operator-my-tools) .mi-meta.ok {color:#9fe8c0}:where(.css-app-operator-my-tools) .mi-meta.warn {color:#f0c674}:where(.css-app-operator-my-tools) .mi-meta.bad {color:#e9a3a3}
:where(.css-app-operator-my-tools) .mi-act {display:flex;gap:4px;margin-top:6px}
:where(.css-app-operator-my-tools) .mi-act .btn,
:where(.css-app-operator-my-tools) .mi-act form {flex:1}:where(.css-app-operator-my-tools) .mi-act .btn {width:100%;font-size:.68rem;padding:6px 4px}
:where(.css-app-operator-my-tools) .mi-x {position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(var(--black-rgb),.75);color:#fff;font-size:.9rem;cursor:pointer;display:grid;place-items:center}
:where(.css-app-operator-my-tools) .mi-x:hover {background:#e07777;border-color:#e07777}
:where(.css-app-operator-my-tools) .mt-empty {padding:22px;text-align:center;color:var(--ivoire-2);border:1px dashed var(--hair-soft);border-radius:12px;font-size:.88rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-photos
   Ancien fichier : pages/operator/photos.css
   Activée par css_use('app/operator-photos') dans : operator/photos.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/photos.php — sortis de la page (i102b). */

:where(.css-app-operator-photos) .pg-tete {display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
:where(.css-app-operator-photos) .pg-tete h1 {font-family:var(--serif);font-weight:500;font-size:2rem;margin:4px 0 2px}
:where(.css-app-operator-photos) .pg-tete .sous {color:var(--ivoire-2);font-size:.88rem}
:where(.css-app-operator-photos) .pg-outils {position:sticky;top:0;z-index:20;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 0;margin-bottom:14px;background:var(--noir);border-bottom:1px solid var(--hair-soft)}
:where(.css-app-operator-photos) .pg-outils .fpill {border:1px solid var(--hair-soft);background:transparent;color:var(--ivoire-2);border-radius:99px;
  padding:5px 13px;font-size:.8rem}
:where(.css-app-operator-photos) .pg-outils .fpill.active {border-color:var(--or);color:var(--or);background:rgba(var(--gold-soft-rgb),.08)}
:where(.css-app-operator-photos) .pg-outils .form-control,
:where(.css-app-operator-photos) .pg-outils .form-select {width:auto;max-width:220px;font-size:.85rem;padding-top:5px;padding-bottom:5px}
:where(.css-app-operator-photos) .pg-outils .espace {flex:1}
:where(.css-app-operator-photos) .pg-grille {display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media (max-width:560px){:where(.css-app-operator-photos) .pg-grille {grid-template-columns:repeat(2,1fr);gap:6px}}
:where(.css-app-operator-photos) .pg-t {position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-3);
  border:2px solid transparent;cursor:zoom-in;transition:border-color .12s,transform .12s}
:where(.css-app-operator-photos) .pg-t img {width:100%;height:100%;object-fit:cover;display:block}
:where(.css-app-operator-photos) .pg-t.sel {border-color:var(--or)}
:where(.css-app-operator-photos) .pg-t.sel img {opacity:.82}
:where(.css-app-operator-photos) .pg-t.cachee img {filter:grayscale(.7) brightness(.7)}
:where(.css-app-operator-photos) .pg-coche {position:absolute;top:7px;left:7px;width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);color:transparent;display:grid;place-items:center;
  font-size:.9rem;font-weight:700;padding:0;line-height:1}
:where(.css-app-operator-photos) .pg-t.sel .pg-coche {background:var(--or);border-color:var(--or);color:#111}
:where(.css-app-operator-photos) .pg-pied {position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:6px;
  padding:14px 8px 6px;font-size:.72rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
:where(.css-app-operator-photos) .pg-tags {position:absolute;top:8px;right:8px;display:flex;gap:4px;pointer-events:none}
:where(.css-app-operator-photos) .pg-tags span {background:rgba(0,0,0,.55);border-radius:99px;padding:1px 6px;font-size:.72rem}
:where(.css-app-operator-photos) .pg-vide {padding:60px 20px;text-align:center;color:var(--ivoire-2)}

/* Barre de sélection */
:where(.css-app-operator-photos) .pg-barre {position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:1040;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px);padding:10px 14px;
  border-radius:14px;background:#15130f;border:1px solid var(--hair);box-shadow:0 10px 40px rgba(0,0,0,.55);transition:transform .2s}
:where(.css-app-operator-photos) .pg-barre.on {transform:translate(-50%,0)}
:where(.css-app-operator-photos) .pg-barre .n {font-size:.88rem;margin-right:6px;white-space:nowrap}
:where(.css-app-operator-photos) .pg-barre .n b {color:var(--or)}
:where(.css-app-operator-photos) .pg-x {border:0;background:transparent;color:var(--ivoire-2);font-size:1.1rem;padding:4px 8px;line-height:1}
:where(.css-app-operator-photos) .pg-x:hover {color:var(--or)}
:where(.css-app-operator-photos) .pg-x-m {display:none}
@media (max-width:699px){:where(.css-app-operator-photos) .pg-x-m {display:inline}:where(.css-app-operator-photos) .pg-x-d {display:none}}
@media (min-width:700px){:where(.css-app-operator-photos) .pg-barre {flex-wrap:nowrap}:where(.css-app-operator-photos) .pg-barre .btn {white-space:nowrap}}
@media (max-width:699px){
  :where(.css-app-operator-photos) .pg-barre {left:8px;right:8px;bottom:8px;transform:translateY(140%);max-width:none;display:grid;
    grid-template-columns:1fr 1fr;gap:6px;padding:10px}
  :where(.css-app-operator-photos) .pg-barre.on {transform:translateY(0)}
  :where(.css-app-operator-photos) .pg-barre .n {grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin:0}
  :where(.css-app-operator-photos) .pg-barre .btn {font-size:.72rem;padding:8px 6px}
  :where(.css-app-operator-photos) .pg-barre .btn-primary {grid-column:1/-1}
  :where(.css-app-operator-photos) .pg-outils {position:static;gap:6px}
  :where(.css-app-operator-photos) .pg-outils .form-control,
:where(.css-app-operator-photos) .pg-outils .form-select {max-width:none;flex:1 1 45%;font-size:.8rem;padding:6px 8px;min-height:0}
  :where(.css-app-operator-photos) .pg-outils .btn {font-size:.68rem;padding:6px 10px}
  :where(.css-app-operator-photos) .pg-outils .espace {display:none}
  :where(.css-app-operator-photos) .pg-tete h1 {font-size:1.5rem}
  :where(.css-app-operator-photos) .pg-tete .btn {font-size:.68rem;padding:6px 10px}
}

/* Visionneuse */
:where(.css-app-operator-photos) .pg-lb {position:fixed;inset:0;z-index:2000;background:#070706;display:none;flex-direction:column}
:where(.css-app-operator-photos) .pg-lb.on {display:flex}
:where(.css-app-operator-photos) .pg-lb-haut,
:where(.css-app-operator-photos) .pg-lb-bas {display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--ivoire);flex-wrap:wrap}
:where(.css-app-operator-photos) .pg-lb-haut {justify-content:space-between}
:where(.css-app-operator-photos) .pg-lb-bas {justify-content:center}
:where(.css-app-operator-photos) .pg-lb-scene {flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 64px}
:where(.css-app-operator-photos) .pg-lb-scene img {max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.6);user-select:none}
:where(.css-app-operator-photos) .pg-lb-nav {position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(0,0,0,.45);color:var(--ivoire);font-size:1.5rem;line-height:1}
:where(.css-app-operator-photos) .pg-lb-nav:hover {border-color:var(--or);color:var(--or)}
:where(.css-app-operator-photos) .pg-lb-nav.g {left:10px} :where(.css-app-operator-photos) .pg-lb-nav.d {right:10px}
@media (max-width:560px){:where(.css-app-operator-photos) .pg-lb-scene {padding:0 4px}:where(.css-app-operator-photos) .pg-lb-nav {width:40px;height:40px;background:rgba(0,0,0,.6)}}
:where(.css-app-operator-photos) .pg-lb .ver {display:inline-flex;border:1px solid var(--hair-soft);border-radius:99px;overflow:hidden}
:where(.css-app-operator-photos) .pg-lb .ver button {border:0;background:transparent;color:var(--ivoire-2);font-size:.8rem;padding:5px 12px}
:where(.css-app-operator-photos) .pg-lb .ver button.on {background:rgba(var(--gold-soft-rgb),.18);color:var(--or)}
:where(.css-app-operator-photos) .pg-lb .ver button:disabled {opacity:.3}
:where(.css-app-operator-photos) .pg-lb-sel.on {background:var(--or);color:#111;border-color:var(--or)}

/* Fenêtres (impression, labo) */
:where(.css-app-operator-photos) .pg-mod {position:fixed;inset:0;z-index:2010;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:16px}
:where(.css-app-operator-photos) .pg-mod.on {display:flex}
:where(.css-app-operator-photos) .pg-mod-boite {width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;background:#15130f;
  border:1px solid var(--hair);border-radius:16px;padding:22px}
:where(.css-app-operator-photos) .pg-mod-boite h3 {font-family:var(--serif);font-weight:500;margin:0 0 4px}
:where(.css-app-operator-photos) .pg-mod-boite .row {--bs-gutter-y:.7rem}
:where(.css-app-operator-photos) .pg-mod-boite .form-label {display:block;margin-bottom:4px}
:where(.css-app-operator-photos) .pg-mod-boite .form-select,
:where(.css-app-operator-photos) .pg-mod-boite .form-control {width:100%;max-width:none}
:where(.css-app-operator-photos) .pg-resume {margin:14px 0;padding:10px 12px;border-radius:10px;background:rgba(var(--gold-soft-rgb),.07);font-size:.88rem}
:where(.css-app-operator-photos) .pg-astuce {font-size:.8rem;color:var(--ivoire-2);line-height:1.45}
:where(.css-app-operator-photos) .pg-prog {height:4px;border-radius:2px;background:var(--hair-soft);overflow:hidden;margin-top:8px}
:where(.css-app-operator-photos) .pg-prog b {display:block;height:100%;width:0;background:var(--or);transition:width .15s}

:where(.css-app-operator-photos) #pg-print {display:none}
:where(.css-app-operator-photos) .pg-outils [hidden],
:where(.css-app-operator-photos) .pg-barre[hidden] {display:none!important}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-pro
   Ancien fichier : pages/operator/pro.css
   Activée par css_use('app/operator-pro') dans : operator/licence.php, operator/pro.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/pro.php — sortis de la page (i102b). */

:where(.css-app-operator-pro) .pro-hero {border:1px solid var(--or);border-radius:20px;padding:28px 30px;margin-bottom:26px;
  background:radial-gradient(120% 140% at 100% 0%,rgba(var(--gold-rgb),.16),rgba(var(--gold-rgb),0) 60%),#0f0e0b}
:where(.css-app-operator-pro) .pro-hero h1 {font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);margin:6px 0 8px}
:where(.css-app-operator-pro) .pro-hero h1 em {color:var(--or)}
:where(.css-app-operator-pro) .pro-hero p {color:var(--ivoire-2);max-width:62ch;margin:0}
:where(.css-app-operator-pro) .pro-etat {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:10px 14px;border-radius:12px;
  background:rgba(var(--gold-rgb),.1);font-size:.92rem}
:where(.css-app-operator-pro) .pro-grille {display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:26px}
:where(.css-app-operator-pro) .pro-c {border:1px solid var(--hair-soft);border-radius:16px;padding:20px;background:rgba(255,255,255,.02);position:relative}
:where(.css-app-operator-pro) .pro-c .ic {font-size:1.5rem;display:block;margin-bottom:8px}
:where(.css-app-operator-pro) .pro-c b {display:block;font-family:var(--serif);font-weight:500;font-size:1.25rem;margin-bottom:6px;color:var(--ivoire)}
:where(.css-app-operator-pro) .pro-c span {color:var(--ivoire-2);font-size:.9rem;line-height:1.55}
:where(.css-app-operator-pro) .pro-c .lien {display:inline-block;margin-top:10px;font-size:.85rem}
:where(.css-app-operator-pro) .pro-c .bientot {position:absolute;top:14px;right:14px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:99px;padding:2px 8px;color:var(--ivoire-2)}
:where(.css-app-operator-pro) .pro-h2 {font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:6px 0 14px}
:where(.css-app-operator-pro) .pro-etapes {list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
:where(.css-app-operator-pro) .pro-etapes li {display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border:1px solid var(--hair-soft);border-radius:14px}
:where(.css-app-operator-pro) .pro-etapes li i {flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:var(--or);color:#111;font-weight:700;font-size:.85rem}
:where(.css-app-operator-pro) .pro-etapes li span {color:var(--ivoire-2);font-size:.92rem;line-height:1.5}
:where(.css-app-operator-pro) .pro-etapes li b {color:var(--ivoire);font-weight:500}
:where(.css-app-operator-pro) .pro-offres {display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:12px}
:where(.css-app-operator-pro) .pro-o {border:1px solid var(--or);border-radius:16px;padding:22px;text-align:center;background:#0f0e0b}
:where(.css-app-operator-pro) .pro-o .d {font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
:where(.css-app-operator-pro) .pro-o .p {font-family:var(--serif);font-size:2.4rem;margin:6px 0 2px}
:where(.css-app-operator-pro) .pro-o .m {color:var(--ivoire-2);font-size:.85rem;margin-bottom:14px}
:where(.css-app-operator-pro) .pro-libre {border:1px dashed var(--hair);border-radius:16px;padding:20px 22px;margin-bottom:26px}
:where(.css-app-operator-pro) .pro-c-fort {border-color:rgba(var(--gold-rgb),.55);background:linear-gradient(160deg,rgba(var(--gold-rgb),.10),rgba(255,255,255,.02))}
:where(.css-app-operator-pro) .pro-calc {border:1px solid var(--hair);border-radius:18px;padding:22px;margin-bottom:28px;background:#0f0e0b}
:where(.css-app-operator-pro) .pro-calc-q {display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:1rem;color:var(--ivoire)}
:where(.css-app-operator-pro) .pro-calc-q b {font-family:var(--serif);font-size:2rem;color:var(--or);font-weight:500}
:where(.css-app-operator-pro) .pro-calc input[type=range] {width:100%;accent-color:var(--gold);margin:6px 0 2px}
:where(.css-app-operator-pro) .pro-calc-ia {display:flex;gap:8px;align-items:center;font-size:.86rem;color:var(--ivoire-2);margin:6px 0 16px;cursor:pointer}
:where(.css-app-operator-pro) .pro-calc-grille {display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
:where(.css-app-operator-pro) .pro-calc-grille div {border:1px solid var(--hair-soft);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px}
:where(.css-app-operator-pro) .pro-calc-grille div.fort {border-color:rgba(var(--gold-rgb),.55)}
:where(.css-app-operator-pro) .pro-calc-grille span {font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-2)}
:where(.css-app-operator-pro) .pro-calc-grille b {font-family:var(--serif);font-size:1.8rem;font-weight:500;color:var(--ivoire)}
:where(.css-app-operator-pro) .pro-calc-grille .fort b {color:var(--or)}
:where(.css-app-operator-pro) .pro-calc-grille small {color:var(--ivoire-2);font-size:.78rem}
:where(.css-app-operator-pro) .pro-calc-gain {margin:16px 0 8px;font-size:1.02rem;color:var(--ivoire)}
:where(.css-app-operator-pro) .pro-calc-gain b {color:var(--or)}
/* i92 — la carte la moins chère est dorée ; une formule qui coûte plus que
   le paiement à l'événement est grisée et le dit. */
:where(.css-app-operator-pro) .pro-calc-grille div.plus b {color:var(--ivoire-2)}
:where(.css-app-operator-pro) .pro-calc-grille .calc-tag {font-style:normal;font-size:.7rem;letter-spacing:.08em;color:var(--or);margin-top:6px}
:where(.css-app-operator-pro) .pro-calc-grille div.plus .calc-tag {color:#e0a36b}
:where(.css-app-operator-pro) .pro-calc-grille .calc-tag:empty {display:none}
:where(.css-app-operator-pro) .pro-astuce {color:var(--ivoire-2)}
:where(.css-app-operator-pro) .pro-libre b {font-family:var(--serif);font-weight:500;font-size:1.25rem}
:where(.css-app-operator-pro) .pro-libre p {color:var(--ivoire-2);margin:6px 0 0;font-size:.92rem;line-height:1.55}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-redeem
   Ancien fichier : pages/operator/redeem.css
   Activée par css_use('app/operator-redeem') dans : operator/redeem.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/redeem.php — « J'ai un code de collection » (i237). */
:where(.css-app-operator-redeem) .rd { display: flex; justify-content: center; }
:where(.css-app-operator-redeem) .rd-card { width: 100%; max-width: 560px; text-align: center; padding: 1.6rem 1.4rem; border-radius: 22px;
  border: 1px solid rgba(var(--cream-rgb),.1); background: linear-gradient(180deg, rgba(30,25,18,.92), rgba(13,11,8,.94)); }
:where(.css-app-operator-redeem) .rd-eyebrow { display: block; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
:where(.css-app-operator-redeem) .rd-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 2rem; margin: .4rem 0 .5rem; }
:where(.css-app-operator-redeem) .rd-desc { font-style: italic; opacity: .85; margin: 0 0 .6rem; }
:where(.css-app-operator-redeem) .rd-help { font-size: .92rem; opacity: .75; line-height: 1.5; margin: 0 0 1rem; }
:where(.css-app-operator-redeem) .rd-preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; display: block; }
:where(.css-app-operator-redeem) .rd-form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
:where(.css-app-operator-redeem) .rd-input input { flex: 1 1 220px; text-align: center; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
:where(.css-app-operator-redeem) .rd-code { font-size: .85rem; opacity: .7; margin: .9rem 0 0; }
:where(.css-app-operator-redeem) .rd-back { margin: 1.2rem 0 0; font-size: .88rem; }
@media (max-width: 720px) { :where(.css-app-operator-redeem) .rd-card { padding: 1.2rem 14px; } :where(.css-app-operator-redeem) .rd-form .btn { width: 100%; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-templates
   Ancien fichier : pages/operator/templates.css
   Activée par css_use('app/operator-templates') dans : operator/templates.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/templates.php — sortis de la page (i102b). */

:where(.css-app-operator-templates) .acoll-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-bottom:44px}
:where(.css-app-operator-templates) .acoll-card {position:relative;display:block;text-decoration:none;color:inherit;background:#0c0c11;border:1px solid var(--hair-soft);border-radius:16px;aspect-ratio:16/10;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s}
:where(.css-app-operator-templates) .acoll-card:hover {transform:translateY(-4px);box-shadow:0 24px 56px rgba(0,0,0,.55);border-color:var(--or)}
:where(.css-app-operator-templates) .acoll-stage {position:absolute;inset:0;display:block}
/* `img` ET `canvas` : le sélecteur est une classe, mais un canvas est
   `display:inline` par défaut et hériterait d'une ligne de base qui décale
   le tirage de trois pixels. On le force en bloc. */
:where(.css-app-operator-templates) .acoll-ph {position:absolute;background:#fff;padding:5px;border-radius:4px;
          box-shadow:0 14px 32px rgba(0,0,0,.6);display:block}
/* Le canvas apparaît en fondu une fois peint : sans ça on voit un rectangle
   blanc vide le temps que les photos arrivent, ce qui fait « cassé ». */
:where(.css-app-operator-templates) canvas.acoll-ph {opacity:0;transition:opacity .35s}
:where(.css-app-operator-templates) canvas.acoll-ph.fp-pret {opacity:1}
/* Peint mais raté (cadre illisible) : on le montre quand même plutôt que de
   laisser un trou dans la composition. */
:where(.css-app-operator-templates) canvas.acoll-ph.fp-rate {opacity:.5}
:where(.css-app-operator-templates) .acoll-ph.p {left:5%;top:12%;height:66%;width:auto;transform:rotate(-6deg);z-index:2}
:where(.css-app-operator-templates) .acoll-ph.s {left:31%;top:5%;height:82%;width:auto;transform:rotate(-1deg);z-index:3}
:where(.css-app-operator-templates) .acoll-ph.l {left:50%;top:20%;width:44%;height:auto;transform:rotate(5deg);z-index:1}
:where(.css-app-operator-templates) .acoll-empty {position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;opacity:.5}
:where(.css-app-operator-templates) .acoll-brand {position:absolute;right:16px;bottom:36px;text-align:right;z-index:5;max-width:62%}
:where(.css-app-operator-templates) .acoll-tape {position:absolute;right:6px;top:-13px;width:44px;height:16px;background:var(--or);opacity:.85;transform:rotate(-8deg);border-radius:2px}
:where(.css-app-operator-templates) .acoll-name {display:inline-block;background:#f7f4ee;color:#141414;font-weight:700;padding:.26rem .7rem;border-radius:3px;font-size:.86rem;box-shadow:0 6px 16px rgba(0,0,0,.45)}
:where(.css-app-operator-templates) .acoll-word {display:block;font-weight:800;color:var(--or);font-size:1.7rem;line-height:.95;letter-spacing:.1em;margin-top:.16em;text-shadow:0 2px 12px rgba(0,0,0,.55)}
:where(.css-app-operator-templates) .acoll-badge {position:absolute;left:12px;top:12px;z-index:6;color:#fff;font-size:.7rem;padding:.15rem .55rem;border-radius:2rem}
:where(.css-app-operator-templates) .acoll-meta {position:absolute;left:0;right:0;bottom:0;z-index:6;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);color:var(--ivoire-2);font-size:.72rem;padding:22px 14px 9px}

/* i108 : sous chaque carte, ✎ Modifier · ✦ Thème · 🌍 Monde ; en haut, les trois façons de commencer. */
:where(.css-app-operator-templates) .acoll-top {display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 18px}
:where(.css-app-operator-templates) .acoll-item {display:flex;flex-direction:column;gap:9px;min-width:0}
:where(.css-app-operator-templates) .acoll-acts {display:flex;gap:6px}
:where(.css-app-operator-templates) .acoll-act {flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--hair-soft);border-radius:99px;padding:6px 8px;font-size:.78rem;color:var(--ivoire-2);text-decoration:none;transition:border-color .15s,color .15s}
:where(.css-app-operator-templates) .acoll-act:hover {border-color:var(--or);color:var(--or)}
:where(.css-app-operator-templates) .acoll-act.on {border-color:rgba(var(--gold-soft-rgb),.55);color:var(--or)}
@media (max-width:560px){
  :where(.css-app-operator-templates) .acoll-top .btn {padding:.55rem .95rem;font-size:.72rem}
  :where(.css-app-operator-templates) .sec-row #coll-sort {min-width:0;max-width:50%}
}
/* i258 — copie en double d'une collection d'organisateur */
:where(.css-app-operator-templates) .acoll-meta.acoll-dup {bottom:auto;top:0;background:linear-gradient(180deg,rgba(120,20,20,.92),rgba(120,20,20,.6));color:#ffd6d6;padding:9px 14px 12px;font-weight:600}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-templates-2
   Ancien fichier : pages/operator/templates-2.css
   Activée par css_use('app/operator-templates-2') dans : operator/templates.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* i261 — Collections & thèmes, une seule page (admin › Catalogue).
   La carte montre ce que l'organisateur verra en choisissant : le monde peint
   (ou l'écran d'accueil) derrière, les tirages devant, sur une étagère à
   hauteur commune. Sans fond : des cadres seuls, sur papier clair. */

:where(.css-app-operator-templates-2) .acoll-card {aspect-ratio:auto;display:flex;flex-direction:column;background:#0c0c11}
:where(.css-app-operator-templates-2) .acoll-card.is-draft {border-color:rgba(234,122,31,.45)}
:where(.css-app-operator-templates-2) .acoll-card.is-live {border-color:rgba(34,163,90,.35)}
:where(.css-app-operator-templates-2) .acoll-card.is-draft:hover {border-color:#ea7a1f}
:where(.css-app-operator-templates-2) .acoll-card.is-live:hover {border-color:#22a35a}

:where(.css-app-operator-templates-2) .acoll-vis {position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 15%,#f6f1e8,#ddd5c6)}
:where(.css-app-operator-templates-2) .acoll-card.a-fond .acoll-vis {background:#15120d}
:where(.css-app-operator-templates-2) .acoll-fond {position:absolute;inset:0;z-index:0}
:where(.css-app-operator-templates-2) .acoll-fond img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
:where(.css-app-operator-templates-2) .acoll-fond::after {content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,5,0) 35%,rgba(8,7,5,.45) 100%)}
:where(.css-app-operator-templates-2) .acoll-card:hover .acoll-fond img {transform:scale(1.04)}
:where(.css-app-operator-templates-2) .acoll-card.is-draft .acoll-fond img {filter:saturate(.8) brightness(.92)}

/* L'étagère : hauteur commune (le script la réduit si la rangée déborde) */
:where(.css-app-operator-templates-2) .acoll-shelf {position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;
  gap:10px;padding:26px 18px 18px;overflow:hidden}
:where(.css-app-operator-templates-2) .acoll-shelf>span {flex:0 0 auto;display:block;line-height:0}
:where(.css-app-operator-templates-2) .acoll-shelf .acoll-ph {position:static;transform:none;padding:0;left:auto;top:auto;
  height:var(--h-shelf,150px);width:auto;max-width:none;border-radius:3px;
  box-shadow:0 14px 28px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);transition:transform .25s ease}
:where(.css-app-operator-templates-2) .acoll-card:hover .acoll-shelf>span:nth-child(2) .acoll-ph {transform:translateY(-4px)}
:where(.css-app-operator-templates-2) .acoll-shelf .acoll-empty {position:static;font-size:3rem;opacity:.5;line-height:1;align-self:center}

/* La bande en coin (brouillon / publiée) : composant .ui-ribbon de components.css (i270) */

/* Les transformations IA : une pastille ronde, comme une notification */
:where(.css-app-operator-templates-2) .acoll-ia {position:absolute;right:12px;bottom:12px;z-index:5;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:.8rem;letter-spacing:.04em;color:#1b1206;
  background:radial-gradient(circle at 30% 25%,#fff3c4,#e8b84a 55%,#b9842a);
  box-shadow:0 0 0 3px rgba(12,12,17,.85),0 6px 16px rgba(0,0,0,.5)}
:where(.css-app-operator-templates-2) .acoll-ia b {position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#7c3aed;color:#fff;font-size:.68rem;line-height:20px;text-align:center;box-shadow:0 0 0 2px rgba(12,12,17,.9)}

/* Le texte sous l'image (il était posé sur l'image et se chevauchait) */
:where(.css-app-operator-templates-2) .acoll-body {display:flex;flex-direction:column;gap:3px;padding:11px 14px 13px}
:where(.css-app-operator-templates-2) .acoll-titre {font-weight:700;color:var(--ivoire);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-templates-2) .acoll-sub {font-size:.76rem;opacity:.7}
:where(.css-app-operator-templates-2) .acoll-orga2 {font-size:.74rem;color:var(--or);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.css-app-operator-templates-2) .acoll-dup2 {font-size:.74rem;font-weight:600;color:#ffb4b4}
:where(.css-app-operator-templates-2) .acoll-item[hidden] {display:none}

/* Filtres */
:where(.css-app-operator-templates-2) .acoll-bar {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-6px 0 18px}
:where(.css-app-operator-templates-2) .acoll-filtre {display:inline-flex;flex-wrap:wrap;border:1px solid var(--hair-soft);border-radius:999px;padding:3px;gap:2px;background:rgba(12,12,17,.6)}
:where(.css-app-operator-templates-2) .acoll-filtre button {border:0;background:transparent;color:inherit;font-size:.8rem;padding:6px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;opacity:.75}
:where(.css-app-operator-templates-2) .acoll-filtre button:hover {opacity:1}
:where(.css-app-operator-templates-2) .acoll-filtre button.on {background:var(--or);color:#14110b;opacity:1;font-weight:600}
:where(.css-app-operator-templates-2) .acoll-filtre button b {font-weight:700;font-size:.72rem;opacity:.8}
:where(.css-app-operator-templates-2) .acoll-filtre .pt {width:9px;height:9px;border-radius:50%;display:inline-block}
:where(.css-app-operator-templates-2) .acoll-filtre .pt.draft {background:#ea7a1f}
:where(.css-app-operator-templates-2) .acoll-filtre .pt.live {background:#22a35a}
:where(.css-app-operator-templates-2) .acoll-cherche {max-width:260px;margin-left:auto}
@media (max-width:640px){:where(.css-app-operator-templates-2) .acoll-filtre {width:100%;justify-content:space-between}:where(.css-app-operator-templates-2) .acoll-cherche {max-width:none;margin-left:0}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-unlock-plan
   Ancien fichier : pages/operator/unlock-plan.css
   Activée par css_use('app/operator-unlock-plan') dans : operator/unlock.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* i202 — fêtes comprises dans la formule, sur la page de déblocage */
:where(.css-app-operator-unlock-plan) .ul-plan.ko {color:#f0a868;padding:6px 10px;border-radius:8px;background:rgba(230,150,90,.08);border:1px solid rgba(230,150,90,.3)}
:where(.css-app-operator-unlock-plan) .ul-plan.ko a {color:var(--or)}
:where(.css-app-operator-unlock-plan) .ul-plan-n {color:var(--ivoire-2)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-world
   Ancien fichier : pages/operator/world.css
   Activée par css_use('app/operator-world') dans : operator/world.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/world.php — sortis de la page (i102b). */

:where(.css-app-operator-world) .mw { max-width: 1180px; }
:where(.css-app-operator-world) .mw h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.6rem; margin: 0 0 .3rem; }
:where(.css-app-operator-world) .mw .sub { opacity: .72; margin: 0 0 1rem; }
:where(.css-app-operator-world) .mw-box { border: 1px solid rgba(127,127,127,.28); border-radius: 18px; padding: 1.3rem; margin-bottom: 1.4rem; }
:where(.css-app-operator-world) .mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
:where(.css-app-operator-world) .mw-card { border: 1px solid rgba(127,127,127,.28); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
:where(.css-app-operator-world) .mw-card .bg { aspect-ratio: 16 / 9; background: #1b1522 center / cover no-repeat; position: relative; }
:where(.css-app-operator-world) .mw-card .in { padding: .9rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
:where(.css-app-operator-world) .mw-card .in .btn { margin-top: auto; }
:where(.css-app-operator-world) .mw-badge { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid; }
:where(.css-app-operator-world) .mw-badge.open { color: var(--success); border-color: var(--success); }
:where(.css-app-operator-world) .mw-badge.soon { color: var(--gold); border-color: var(--gold); }
:where(.css-app-operator-world) .mw-badge.archived { opacity: .65; }
:where(.css-app-operator-world) .mw-pick { cursor: pointer; }
:where(.css-app-operator-world) .mw-pick input { position: absolute; opacity: 0; }
:where(.css-app-operator-world) .mw-pick:has(input:checked) { outline: 2px solid var(--gold); outline-offset: 2px; }
:where(.css-app-operator-world) .mw-thumbs { display: flex; gap: 4px; position: absolute; left: 8px; bottom: 8px; }
:where(.css-app-operator-world) .mw-thumbs img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
:where(.css-app-operator-world) .mw-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
:where(.css-app-operator-world) .mw-link { border-radius: 12px; background: rgba(127,127,127,.08); padding: .8rem; }
:where(.css-app-operator-world) .mw-link b { display: block; margin-bottom: .35rem; }
:where(.css-app-operator-world) .mw-guide { border: 1px solid rgba(var(--gold-rgb),.55); background: linear-gradient(160deg, rgba(var(--gold-rgb),.12), rgba(127,127,127,.06)); }
:where(.css-app-operator-world) .mw-qr { width: 110px; height: 110px; background: #fff; padding: 6px; border-radius: 8px; margin-top: .5rem; }
:where(.css-app-operator-world) .mw-qr svg { width: 100%; height: 100%; display: block; }
:where(.css-app-operator-world) .mw-stage { border-radius: 14px; overflow: hidden; background: #1b1522; aspect-ratio: 16 / 9; }
:where(.css-app-operator-world) .mw-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.css-app-operator-world) .mw-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
:where(.css-app-operator-world) .mw-char { border: 1px solid rgba(127,127,127,.28); border-radius: 14px; padding: .8rem; display: flex; flex-direction: column; gap: .4rem; }
:where(.css-app-operator-world) .mw-char.off { opacity: .55; }
:where(.css-app-operator-world) .mw-char .art { background: #fff; border-radius: 10px; height: 130px; display: grid; place-items: center; }
:where(.css-app-operator-world) .mw-char .art img { max-width: 92%; max-height: 120px; }
:where(.css-app-operator-world) .mw-add { border: 1px dashed var(--gold); border-radius: 14px; padding: .9rem; margin-top: 1rem; }
:where(.css-app-operator-world) .mw-steps { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
:where(.css-app-operator-world) .mw-steps li { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid rgba(127,127,127,.28); border-radius: 14px; padding: .8rem .9rem; }
:where(.css-app-operator-world) .mw-steps i,
:where(.css-app-operator-world) .mw-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal;
  background: var(--gold); color: #111; font-weight: 700; font-size: .85rem; margin-right: .5rem; }
:where(.css-app-operator-world) .mw-steps span { font-size: .9rem; opacity: .85; line-height: 1.45; }
:where(.css-app-operator-world) .mw-steps b { display: block; opacity: 1; }
:where(.css-app-operator-world) .mw-st { min-height: 1.3em; font-size: .88rem; }
:where(.css-app-operator-world) .mw-st.work { color: var(--gold); } :where(.css-app-operator-world) .mw-st.err { color: #ff8fb8; } :where(.css-app-operator-world) .mw-st.ok { color: var(--success); }
:where(.css-app-operator-world) .mw-mod { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin-top: .6rem; }
:where(.css-app-operator-world) .mw-mod figure { margin: 0; border-radius: 12px; background: #2a1f35; padding: 6px; text-align: center; }
:where(.css-app-operator-world) .mw-mod img { width: 100%; height: 86px; object-fit: contain; }
:where(.css-app-operator-world) .mw-mod figure.hid img { opacity: .25; }
:where(.css-app-operator-world) .mw-mod button { font-size: .72rem; margin-top: 4px; width: 100%; }
:where(.css-app-operator-world) .mw .btn { min-height: 44px; }
:where(.css-app-operator-world) .mw-mod .btn,
:where(.css-app-operator-world) .mw-char .btn-sm { min-height: 34px; }

/* i201 — le prix d'un monde, dit avant ; la suppression, dite avec ses conséquences */
:where(.css-app-operator-world) .mw-cost {margin:0 0 14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.06)}
:where(.css-app-operator-world) .mw-cost.ko {border-color:rgba(230,129,127,.45);background:rgba(230,129,127,.07)}
:where(.css-app-operator-world) .mw-cost-h {font-weight:600;margin-bottom:6px}
:where(.css-app-operator-world) .mw-cost .small {line-height:1.5;margin-bottom:6px}
:where(.css-app-operator-world) .mw-cost-warn {color:#f0a868}
:where(.css-app-operator-world) .mw-cost-ok {display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-weight:500;cursor:pointer}
:where(.css-app-operator-world) .mw-cost-ok input {margin-top:4px}
:where(.css-app-operator-world) .mw-tag {font-style:normal;font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:5px}
:where(.css-app-operator-world) .mw-tag.pro {background:rgba(140,170,255,.16);color:#a9c0ff}
:where(.css-app-operator-world) .mw-tag.plus {background:rgba(127,224,166,.14);color:#86e0ad}
:where(.css-app-operator-world) .mw-del summary {cursor:pointer;color:var(--danger);font-size:.86rem}
:where(.css-app-operator-world) .mw-del form {margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(230,129,127,.35);background:rgba(230,129,127,.05);max-width:620px}

/* i212 — le monde d'essai */
:where(.css-app-operator-world) .mw-essai {display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;border:1px solid rgba(var(--gold-rgb),.5);border-radius:14px;
  padding:12px 16px;margin:0 0 18px;background:linear-gradient(160deg,rgba(var(--gold-rgb),.12),rgba(var(--gold-rgb),.02))}
:where(.css-app-operator-world) .mw-essai b {color:var(--or-clair)}
:where(.css-app-operator-world) .mw-essai span {flex:1 1 320px;font-size:.88rem;color:var(--ivoire-2)}
:where(.css-app-operator-world) .mw-essai.pris {border-color:var(--hair-soft);background:rgba(255,255,255,.02)}
:where(.css-app-operator-world) .mw-badge.essai {color:var(--gold-warm);border-color:rgba(var(--gold-warm-rgb),.5)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-assigner
   Ancien fichier : pages/operator/_assigner.css
   Activée par css_use('app/operator-assigner') dans : operator/_assigner.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/_assigner.php — sortis de la page (i102b). */

:where(.css-app-operator-assigner) .ci-fav {position:absolute;top:8px;right:8px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(var(--black-rgb),.72);color:#fff;font-size:1.05rem;
  cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
:where(.css-app-operator-assigner) .ci-fav.on {background:var(--gold-soft);color:#111;border-color:var(--gold-soft)}
:where(.css-app-operator-assigner) .ci-fav:hover {border-color:var(--gold-soft)}
/* « ASSIGNER » EST LE GESTE PRINCIPAL, le ♥ n'est qu'un raccourci. Le bouton
   est donc plein et lisible là où le cœur est une pastille discrète : c'est
   l'action pour laquelle on est venu. */
:where(.css-app-operator-assigner) .ci-add {position:absolute;left:8px;bottom:8px;z-index:3;border:0;border-radius:999px;
  padding:7px 14px;background:rgba(var(--gold-soft-rgb),.92);color:var(--black-2);font-size:.78rem;
  font-weight:600;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(4px)}
:where(.css-app-operator-assigner) .ci-add:hover {background:var(--gold-pale)}
:where(.css-app-operator-assigner) .ci-add.ok {background:var(--success-light)}
/* Le sélecteur de fête : une liste, pas un formulaire. */
:where(.css-app-operator-assigner) .as-ev {display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;
  border:1px solid var(--hair-soft);border-radius:12px;background:var(--surface-3);color:var(--ivoire);
  cursor:pointer;margin-bottom:8px}
:where(.css-app-operator-assigner) .as-ev:hover {border-color:var(--or)}
:where(.css-app-operator-assigner) .as-ev.on {border-color:var(--success-light)}
:where(.css-app-operator-assigner) .as-ev b {display:block;font-size:.98rem}
:where(.css-app-operator-assigner) .as-ev small {display:block;color:var(--muted,#aaa);font-size:.76rem;margin-top:2px}
:where(.css-app-operator-assigner) .as-ev .as-mark {margin-left:auto;font-size:1.1rem;color:var(--success-light)}
:where(.css-app-operator-assigner) .as-msg {font-size:.85rem;line-height:1.5;margin:0 0 12px;padding:10px 12px;border-radius:10px}
:where(.css-app-operator-assigner) .as-msg.ok {background:rgba(143,214,173,.12);color:var(--success-light)}
:where(.css-app-operator-assigner) .as-msg.ko {background:rgba(230,129,127,.12);color:var(--danger)}
:where(.css-app-operator-assigner) .as-wrap {position:fixed;inset:0;z-index:1080;background:rgba(7,7,11,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
:where(.css-app-operator-assigner) .as-wrap[hidden] {display:none}
:where(.css-app-operator-assigner) .as-box {width:min(520px,100%);max-height:88vh;overflow:auto;border-radius:16px}

/* i198 — la fenêtre « Assigner » avait perdu ses marges (lux.css remet les
   en-têtes et corps de modale à zéro hors Bootstrap JS). */
:where(.css-app-operator-assigner) .as-box .modal-content {border-radius:16px;overflow:hidden}
:where(.css-app-operator-assigner) .as-box .modal-header {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--hair-soft)}
:where(.css-app-operator-assigner) .as-box .modal-title {margin:0;font-size:1.25rem;line-height:1.3}
:where(.css-app-operator-assigner) .as-box .modal-body {padding:18px 22px 22px}
:where(.css-app-operator-assigner) .as-box .btn-close {flex:none;opacity:.7}
:where(.css-app-operator-assigner) .as-box .btn-close:hover {opacity:1}
:where(.css-app-operator-assigner) .as-box .ci-meta {margin-bottom:0;line-height:1.5}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/calques
   Ancien fichier : parts/calques.css
   Activée par css_use('app/calques') dans : operator/_calques.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Images et logo posés sur un cadre (i230–i231) — partagé par le Template Builder
   et le créateur de thème de l'admin (public/operator/_calques.php). */
:where(.css-app-calques) .cl-bloc { border: 1px solid rgba(127,127,127,.25); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .9rem; }
:where(.css-app-calques) .cl-h { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
:where(.css-app-calques) .cl-aide { font-size: .85rem; opacity: .75; line-height: 1.5; margin: .5rem 0 0; }
:where(.css-app-calques) .cl-l { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .55rem 0; }
:where(.css-app-calques) .cl-l > span:first-child { min-width: 80px; font-size: .85rem; opacity: .8; }
:where(.css-app-calques) .cl-l input[type=range] { flex: 1; min-width: 120px; accent-color: var(--gold); }
:where(.css-app-calques) .cc-lay-rot-val { min-width: 42px; text-align: end; font-size: .85rem; }
:where(.css-app-calques) #slot-stage .slot-el { z-index: 3; }
:where(.css-app-calques) .cc-lay { position: absolute; z-index: 2; cursor: grab; touch-action: none; outline: 1px dashed rgba(var(--gold-rgb),.35); }
:where(.css-app-calques) .cc-lay img { width: 100%; display: block; pointer-events: none; user-select: none; }
:where(.css-app-calques) .cc-lay.on { outline: 2px dashed var(--gold); }
:where(.css-app-calques) .cc-lay-h { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold);
  border: 2px solid #111; cursor: nwse-resize; }
:where(.css-app-calques) .cc-tx-deg { min-width: 42px; text-align: end; font-size: .85rem; }
:where(.css-app-calques) .cc-im-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .6rem; }
:where(.css-app-calques) .cc-im-tabs button { border: 1px solid rgba(127,127,127,.35); background: none; color: inherit; border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; }
:where(.css-app-calques) .cc-im-tabs button.on { border-color: var(--gold); background: rgba(var(--gold-rgb),.14); font-weight: 600; }
:where(.css-app-calques) .cc-im-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .4rem; max-height: 240px; overflow-y: auto; padding: 2px; }
:where(.css-app-calques) .cc-im { aspect-ratio: 1; border: 1px solid rgba(127,127,127,.3); border-radius: 10px; padding: 4px; cursor: pointer; display: grid; place-items: center;
  background-color: #eee; background-image: linear-gradient(45deg,#d4d4d4 25%,transparent 25%),linear-gradient(-45deg,#d4d4d4 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#d4d4d4 75%),linear-gradient(-45deg,transparent 75%,#d4d4d4 75%); background-size: 12px 12px;
  background-position: 0 0,0 6px,6px -6px,-6px 0; }
:where(.css-app-calques) .cc-im { overflow: hidden; }
:where(.css-app-calques) .cc-im img { max-width: 100%; max-height: 56px; object-fit: contain; }
:where(.css-app-calques) .cc-im:hover { border-color: var(--gold); }
:where(.css-app-calques) .cc-im-plus { background: rgba(127,127,127,.12); color: var(--gold); font-size: 1.5rem; font-weight: 600; }
:where(.css-app-calques) .cc-lay-panel { border-top: 1px solid rgba(127,127,127,.22); margin-top: .7rem; padding-top: .6rem; }
:where(.css-app-calques) .cc-lay-x { position: absolute; right: -12px; top: -12px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #111;
  background: var(--danger); color: #111; font-size: 13px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; display: grid; place-items: center; }
:where(.css-app-calques) .cc-im-w { position: relative; }
:where(.css-app-calques) .cc-im-w .cc-im { width: 100%; }
:where(.css-app-calques) .cc-im-x { position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #111; background: var(--danger);
  color: #111; font-size: 11px; font-weight: 700; padding: 0; line-height: 1; cursor: pointer; display: none; }
:where(.css-app-calques) .cc-im-w:hover .cc-im-x,
:where(.css-app-calques) .cc-im-w:focus-within .cc-im-x { display: grid; place-items: center; }
@media (hover: none) { :where(.css-app-calques) .cc-im-x { display: grid; place-items: center; } }
:where(.css-app-calques) .cc-lay-r { position: absolute; left: 50%; top: -38px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--gold);
  border: 2px solid #111; color: #111; font-size: 15px; font-weight: 700; display: grid; place-items: center; cursor: grab; user-select: none; }
:where(.css-app-calques) .cc-lay-r::after { content: ""; position: absolute; left: 50%; top: 26px; width: 2px; height: 12px; margin-left: -1px; background: var(--gold); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-new-event-modal
   Ancien fichier : pages/operator/_new-event-modal.css
   Activée par css_use('app/operator-new-event-modal') dans : operator/_new-event-modal.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/_new-event-modal.php — sortis de la page (i102b). */

:where(.css-app-operator-new-event-modal) .lux-dialog { position: fixed; inset: 0; margin: auto; max-height: min(92vh, 720px); overflow: auto;
  border: 1px solid var(--hair); border-radius: 18px; padding: 0; width: min(560px, 94vw);
  background: var(--noir2); color: var(--ivoire); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
:where(.css-app-operator-new-event-modal) .lux-dialog::backdrop { background: rgba(6,5,3,.72); backdrop-filter: blur(4px); }
:where(.css-app-operator-new-event-modal) .lux-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px 12px; border-bottom: 1px solid var(--hair-soft); }
:where(.css-app-operator-new-event-modal) .lux-dialog-head h2 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 0; }
:where(.css-app-operator-new-event-modal) .lux-dialog-close { background: none; border: 1px solid var(--hair-soft); color: var(--ivoire-2);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
:where(.css-app-operator-new-event-modal) .lux-dialog-close:hover { border-color: var(--or); color: var(--or); }
:where(.css-app-operator-new-event-modal) .lux-dialog-body { padding: 18px 22px 6px; }
:where(.css-app-operator-new-event-modal) .lux-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px 20px; }
:where(.css-app-operator-new-event-modal) .lux-dialog .chip-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-pro-tableau
   Ancien fichier : pages/operator/_pro-tableau.css
   Activée par css_use('app/operator-pro-tableau') dans : operator/_pro-tableau.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/_pro-tableau.php — sortis de la page (i102b). */

:where(.css-app-operator-pro-tableau) .tb-kpis {display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:28px}
:where(.css-app-operator-pro-tableau) .tb-k {border:1px solid var(--hair-soft);border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:4px}
:where(.css-app-operator-pro-tableau) .tb-k .l {font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivoire-2)}
:where(.css-app-operator-pro-tableau) .tb-k .v {font-family:var(--serif);font-size:2.2rem;line-height:1.1;color:var(--ivoire)}
:where(.css-app-operator-pro-tableau) .tb-k .v small {font-size:1rem;color:var(--ivoire-2)}
:where(.css-app-operator-pro-tableau) .tb-k .d {font-size:.84rem;color:var(--ivoire-2);line-height:1.45}
:where(.css-app-operator-pro-tableau) .tb-k a {font-size:.84rem;margin-top:auto;padding-top:6px}
:where(.css-app-operator-pro-tableau) .tb-k.fort {border-color:rgba(var(--gold-rgb),.55);background:linear-gradient(160deg,rgba(var(--gold-rgb),.10),rgba(255,255,255,.02))}
:where(.css-app-operator-pro-tableau) .tb-k.fort .v {color:var(--or)}
:where(.css-app-operator-pro-tableau) .tb-bar {height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0 2px}
:where(.css-app-operator-pro-tableau) .tb-bar i {display:block;height:100%;background:var(--or);border-radius:99px}
:where(.css-app-operator-pro-tableau) .tb-bloc {border:1px solid var(--hair-soft);border-radius:18px;padding:22px;margin-bottom:28px;background:rgba(255,255,255,.02)}
:where(.css-app-operator-pro-tableau) .tb-marque {display:grid;gap:22px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width: 860px){:where(.css-app-operator-pro-tableau) .tb-marque {grid-template-columns:1fr}}
:where(.css-app-operator-pro-tableau) .tb-apercu {border-radius:14px;padding:18px;background:#0f0e0b;border:1px solid var(--hair-soft);display:flex;flex-direction:column;gap:8px}
:where(.css-app-operator-pro-tableau) .tb-apercu .pastille {width:18px;height:18px;border-radius:50%;display:inline-block;vertical-align:-3px;margin-right:8px;border:1px solid rgba(255,255,255,.3)}
:where(.css-app-operator-pro-tableau) .tb-etat {display:inline-block;font-size:.75rem;border-radius:99px;padding:2px 10px;border:1px solid}
:where(.css-app-operator-pro-tableau) .tb-etat.ok {color:var(--success);border-color:var(--success)}:where(.css-app-operator-pro-tableau) .tb-etat.non {color:var(--ivoire-2);border-color:var(--hair)}
:where(.css-app-operator-pro-tableau) .tb-table {width:100%;border-collapse:collapse;font-size:.92rem}
:where(.css-app-operator-pro-tableau) .tb-table th {font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-2);font-weight:500;text-align:left;padding:0 10px 8px}
:where(.css-app-operator-pro-tableau) .tb-table td {padding:10px;border-top:1px solid var(--hair-soft);vertical-align:middle}
:where(.css-app-operator-pro-tableau) .tb-table td.n {text-align:right;white-space:nowrap}
@media (max-width: 640px){:where(.css-app-operator-pro-tableau) .tb-table .opt {display:none}}
:where(.css-app-operator-pro-tableau) .tb-outils {display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:28px}
:where(.css-app-operator-pro-tableau) .tb-o {border:1px solid var(--hair-soft);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;color:var(--ivoire);text-decoration:none;position:relative}
:where(.css-app-operator-pro-tableau) a.tb-o:hover {border-color:rgba(var(--gold-rgb),.55)}
:where(.css-app-operator-pro-tableau) .tb-o b {font-weight:500}:where(.css-app-operator-pro-tableau) .tb-o span {font-size:.84rem;color:var(--ivoire-2)}
:where(.css-app-operator-pro-tableau) .tb-o .bientot {position:absolute;top:12px;right:12px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hair);border-radius:99px;padding:1px 7px;color:var(--ivoire-2)}

/* i202 — offre de lancement */
:where(.css-app-operator-pro-tableau) .tb-launch {display:flex;flex-direction:column;gap:4px;margin:0 0 18px;padding:14px 18px;border-radius:14px;border:1px solid rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.07);font-size:.88rem;color:var(--ivoire-2)}
:where(.css-app-operator-pro-tableau) .tb-launch b {color:var(--or)}
:where(.css-app-operator-pro-tableau) .tb-launch + .tb-kpis {margin-top:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/operator-formules
   Ancien fichier : pages/operator/formules.css
   Activée par css_use('app/operator-formules') dans : operator/_formules.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Grille des formules de l'espace client (public/operator/_formules.php, i207). */
:where(.css-app-operator-formules) .fm-bascule {display:inline-flex;gap:4px;padding:4px;border:1px solid var(--hair);border-radius:99px;margin:0 0 16px}
:where(.css-app-operator-formules) .fm-bascule label {margin:0;cursor:pointer}
:where(.css-app-operator-formules) .fm-bascule input {position:absolute;opacity:0;pointer-events:none}
:where(.css-app-operator-formules) .fm-bascule span {display:block;padding:7px 16px;border-radius:99px;font-size:.88rem;color:var(--ivoire-2)}
:where(.css-app-operator-formules) .fm-bascule input:checked + span {background:var(--or);color:#111}
:where(.css-app-operator-formules) .fm-bascule input:focus-visible + span {outline:2px solid var(--or);outline-offset:2px}
:where(.css-app-operator-formules) .fm-grille {display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:12px}
:where(.css-app-operator-formules) .fm-carte {position:relative;display:flex;flex-direction:column;border:1px solid var(--hair-soft);border-radius:18px;
  padding:24px 20px 20px;background:#0f0e0b}
:where(.css-app-operator-formules) .fm-carte.fort {border-color:var(--or);background:linear-gradient(165deg,rgba(var(--gold-rgb),.12),#0f0e0b 55%)}
:where(.css-app-operator-formules) .fm-carte.mien {border-color:#7fbf8f}
:where(.css-app-operator-formules) .fm-badge {position:absolute;top:-11px;left:18px;background:var(--or);color:#111;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 10px;border-radius:99px}
:where(.css-app-operator-formules) .fm-carte.mien .fm-badge {background:#7fbf8f}
:where(.css-app-operator-formules) .fm-nom {font-family:var(--serif);font-size:1.55rem;color:var(--ivoire)}
:where(.css-app-operator-formules) .fm-pour {font-size:.74rem;letter-spacing:.06em;color:var(--ivoire-2);margin-bottom:10px}
:where(.css-app-operator-formules) .fm-prix {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;min-height:64px}
:where(.css-app-operator-formules) .fm-prix b {font-family:var(--serif);font-weight:500;font-size:2.1rem;color:var(--or);line-height:1.1}
:where(.css-app-operator-formules) .fm-prix small {color:var(--ivoire-2);font-size:.82rem}
:where(.css-app-operator-formules) .fm-prix em {flex-basis:100%;font-style:normal;font-size:.76rem;color:var(--ivoire-2)}
:where(.css-app-operator-formules) .fm-grille[data-per="1"] [data-a],
:where(.css-app-operator-formules) .fm-grille[data-per="12"] [data-m] {display:none}
:where(.css-app-operator-formules) .fm-liste {list-style:none;padding:0;margin:8px 0 18px;display:grid;gap:7px;align-content:start;font-size:.86rem;color:var(--ivoire-2);flex:1}
:where(.css-app-operator-formules) .fm-liste li {padding-left:18px;position:relative;line-height:1.45}
:where(.css-app-operator-formules) .fm-liste li::before {content:"✦";position:absolute;left:0;color:var(--or);font-size:.7rem;top:.2em}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-prochaine-etape
   Ancien fichier : pages/operator/event/_prochaine-etape.css
   Activée par css_use('app/event-prochaine-etape') dans : operator/event/_prochaine-etape.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/_prochaine-etape.php — sortis de la page (i102b). */

:where(.css-app-event-prochaine-etape) .pe-wrap {border:1px solid rgba(var(--gold-soft-rgb),.42);border-radius:18px;
  background:linear-gradient(180deg,rgba(var(--gold-soft-rgb),.13),rgba(var(--gold-soft-rgb),.03));
  padding:20px 22px;margin-bottom:1.5rem;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);gap:20px;align-items:center}
@media(max-width:820px){:where(.css-app-event-prochaine-etape) .pe-wrap {grid-template-columns:1fr;gap:14px}}
:where(.css-app-event-prochaine-etape) .pe-eyebrow {font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);opacity:.9}
:where(.css-app-event-prochaine-etape) .pe-title {font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.15;margin:.25em 0 .35em;color:#fff}
:where(.css-app-event-prochaine-etape) .pe-text {font-size:.92rem;color:var(--muted,#b6b2a8);margin:0 0 1rem;max-width:60ch}
:where(.css-app-event-prochaine-etape) .pe-cta {font-size:1rem;padding:.72rem 1.5rem}
:where(.css-app-event-prochaine-etape) .pe-steps {list-style:none;margin:0;padding:0;font-size:.86rem;display:flex;flex-direction:column;gap:7px}
:where(.css-app-event-prochaine-etape) .pe-steps li {display:flex;align-items:flex-start;gap:9px;line-height:1.35}
:where(.css-app-event-prochaine-etape) .pe-steps .pe-mark {flex:0 0 auto;width:1.15em;text-align:center;font-weight:700}
:where(.css-app-event-prochaine-etape) .pe-steps .done {color:var(--or)}
:where(.css-app-event-prochaine-etape) .pe-steps .todo {color:var(--muted,#b6b2a8);opacity:.72}
:where(.css-app-event-prochaine-etape) .pe-count {font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-clair);opacity:.85;margin-bottom:9px}
/* Les trois actions du moment « c'est prêt ». Elles passent à la ligne
   plutôt que de rétrécir : un bouton tronqué ne se lit pas. */
:where(.css-app-event-prochaine-etape) .pe-ctas {display:flex;flex-wrap:wrap;gap:10px}
:where(.css-app-event-prochaine-etape) .pe-ctas .pe-cta {font-size:.95rem;padding:.66rem 1.25rem}
@media(max-width:520px){:where(.css-app-event-prochaine-etape) .pe-ctas {flex-direction:column;align-items:stretch}
  :where(.css-app-event-prochaine-etape) .pe-ctas .pe-cta {text-align:center}}
:where(.css-app-event-prochaine-etape) .pe-avis {margin:.85rem 0 0;font-size:.84rem}
:where(.css-app-event-prochaine-etape) .pe-avis a {color:var(--or-clair);text-decoration:none;border-bottom:1px solid rgba(var(--gold-soft-rgb),.3)}
:where(.css-app-event-prochaine-etape) .pe-avis a:hover {border-bottom-color:var(--or)}
:where(.css-app-event-prochaine-etape) .pe-avis-merci {color:var(--muted,#b6b2a8);opacity:.8}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-kids-cta
   Ancien fichier : pages/operator/event/kids-cta.css
   Activée par css_use('app/event-kids-cta') dans : operator/event/evenement.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* i247 — Fête d'enfants : grande bannière d'activation + fenêtre explicative (event/evenement.php). */
:where(.css-app-event-kids-cta) .kids-cta {display:flex;align-items:center;gap:18px;width:100%;text-align:left;cursor:pointer;
  padding:18px 22px;border-radius:18px;border:1px solid rgba(var(--gold-soft-rgb),.55);color:var(--ivoire);
  background:linear-gradient(120deg,rgba(255,170,90,.16),rgba(var(--gold-soft-rgb),.10) 45%,rgba(120,190,255,.12));
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s,border-color .15s}
:where(.css-app-event-kids-cta) .kids-cta:hover {transform:translateY(-2px);border-color:var(--or);box-shadow:0 14px 36px rgba(0,0,0,.35)}
:where(.css-app-event-kids-cta) .kids-cta:focus-visible {outline:3px solid rgba(var(--gold-soft-rgb),.5);outline-offset:3px}
:where(.css-app-event-kids-cta) .kids-cta-ico {font-size:2.4rem;line-height:1;flex:0 0 auto}
:where(.css-app-event-kids-cta) .kids-cta-txt {flex:1 1 auto;min-width:0}
:where(.css-app-event-kids-cta) .kids-cta-txt b {display:block;font-size:1.2rem;font-weight:600}
:where(.css-app-event-kids-cta) .kids-cta-txt small {display:block;color:var(--ivoire-2);margin-top:3px;line-height:1.4}
:where(.css-app-event-kids-cta) .kids-cta-go {flex:0 0 auto;padding:10px 18px;border-radius:999px;background:var(--or);color:var(--black);font-weight:600;font-size:.85rem;white-space:nowrap}
@media(max-width:575px){:where(.css-app-event-kids-cta) .kids-cta {flex-wrap:wrap;padding:16px;gap:12px}:where(.css-app-event-kids-cta) .kids-cta-txt {flex:1 1 0}:where(.css-app-event-kids-cta) .kids-cta-ico {font-size:2rem}:where(.css-app-event-kids-cta) .kids-cta-go {width:100%;text-align:center}}

:where(.css-app-event-kids-cta) .kids-on {display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-radius:14px;
  border:1px solid rgba(var(--gold-soft-rgb),.4);background:rgba(var(--gold-soft-rgb),.06)}
:where(.css-app-event-kids-cta) .kids-on .kids-off {color:var(--muted,#aaa);text-decoration:underline;font-size:.8rem;letter-spacing:0;text-transform:none}

:where(.css-app-event-kids-cta) .kids-modal {background:var(--noir2);border:1px solid var(--hair-soft);color:var(--ivoire);border-radius:18px}
:where(.css-app-event-kids-cta) .kids-lead {color:var(--ivoire-2)}
:where(.css-app-event-kids-cta) .kids-steps {list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
:where(.css-app-event-kids-cta) .kids-steps li {display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--hair-soft)}
:where(.css-app-event-kids-cta) .kids-steps li > span {font-size:1.6rem;line-height:1}
:where(.css-app-event-kids-cta) .kids-steps b {display:block}
:where(.css-app-event-kids-cta) .kids-steps small {display:block;color:var(--muted,#aaa);margin-top:2px}
:where(.css-app-event-kids-cta) .kids-modal .modal-footer {gap:10px;flex-wrap:nowrap;justify-content:flex-end}
:where(.css-app-event-kids-cta) .kids-modal .modal-footer > * {margin:0}
:where(.css-app-event-kids-cta) .kids-modal .modal-footer .btn {letter-spacing:.06em;white-space:nowrap}
@media(max-width:480px){:where(.css-app-event-kids-cta) .kids-modal .modal-footer {flex-wrap:wrap}:where(.css-app-event-kids-cta) .kids-modal .modal-footer > *,
:where(.css-app-event-kids-cta) .kids-modal .modal-footer .btn {width:100%}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-intro
   Ancien fichier : pages/operator/event/_intro.css
   Activée par css_use('app/event-intro') dans : operator/event/_intro.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/_intro.php — sortis de la page (i102b). */

:where(.css-app-event-intro) .ip-hero {position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--hair-soft);background:radial-gradient(120% 90% at 50% 0,#1a1610,var(--black));
  aspect-ratio:16/8;max-height:420px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
@media(max-width:760px){:where(.css-app-event-intro) .ip-hero {aspect-ratio:4/5;max-height:none}}
:where(.css-app-event-intro) .ip-hero img,
:where(.css-app-event-intro) .ip-hero video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:where(.css-app-event-intro) .ip-hero .ip-kb {animation:ipkb 22s ease-out both}
@keyframes ipkb{from{transform:scale(1)}to{transform:scale(1.06)}}
:where(.css-app-event-intro) .ip-veil {position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.15) 45%,rgba(0,0,0,.55))}
:where(.css-app-event-intro) .ip-sparks {position:absolute;inset:0;background:
  radial-gradient(circle at 20% 30%,rgba(var(--gold-soft-rgb),.35) 0,transparent 3px),radial-gradient(circle at 70% 20%,rgba(255,255,255,.35) 0,transparent 2px),
  radial-gradient(circle at 85% 65%,rgba(var(--gold-soft-rgb),.3) 0,transparent 3px),radial-gradient(circle at 35% 75%,rgba(255,255,255,.25) 0,transparent 2px),
  radial-gradient(circle at 55% 50%,rgba(var(--gold-soft-rgb),.25) 0,transparent 4px)}
:where(.css-app-event-intro) .ip-txt {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6%;color:#fff}
:where(.css-app-event-intro) .ip-t {line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.7)}
:where(.css-app-event-intro) .ip-s {opacity:.92;margin-top:.45em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
:where(.css-app-event-intro) .ip-tag {position:absolute;top:12px;left:12px;z-index:2;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:rgba(var(--black-rgb),.72);border:1px solid rgba(var(--gold-soft-rgb),.45);color:var(--or-clair);backdrop-filter:blur(6px)}
:where(.css-app-event-intro) .ip-act {position:absolute;right:12px;bottom:12px;z-index:2;display:flex;gap:8px}
:where(.css-app-event-intro) .ip-act .btn {backdrop-filter:blur(6px);background:rgba(var(--black-rgb),.72)}
:where(.css-app-event-intro) .ip-src {position:absolute;left:12px;bottom:12px;z-index:2;font-size:.68rem;color:rgba(255,255,255,.75);text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* i245 — tailles du texte en % de la largeur (comme la cabine) + bloc de texte */
:where(.css-app-event-intro) .ip-hero {container-type:inline-size}
:where(.css-app-event-intro) .ip-box {box-sizing:border-box;max-width:100%}
:where(.css-app-event-intro) .ip-box .ip-t,
:where(.css-app-event-intro) .ip-box .ip-s {max-width:none}
:where(.css-app-event-intro) .ip-box.has-fill .ip-t,
:where(.css-app-event-intro) .ip-box.has-fill .ip-s {text-shadow:none}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/event-intro-2
   Ancien fichier : pages/operator/event/_intro-2.css
   Activée par css_use('app/event-intro-2') dans : operator/event/_intro.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Styles de public/operator/event/_intro.php (bloc 2) — sortis de la page (i102b). */

:where(.css-app-event-intro-2) .ip-row {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:16px;align-items:stretch;margin-bottom:1.5rem}
@media(max-width:991px){:where(.css-app-event-intro-2) .ip-row {grid-template-columns:1fr}}
:where(.css-app-event-intro-2) .ip-row .ip-hero {margin-bottom:0!important;max-height:none}
:where(.css-app-event-intro-2) .ip-recap {border:1px solid var(--hair-soft);border-radius:18px;background:linear-gradient(180deg,rgba(var(--gold-soft-rgb),.08),rgba(var(--gold-soft-rgb),.02));padding:18px 20px;display:flex;flex-direction:column;gap:12px}
:where(.css-app-event-intro-2) .ip-recap .rc-label {font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-clair);opacity:.85}
:where(.css-app-event-intro-2) .ip-recap .rc-code {font-family:monospace;font-size:2.1rem;letter-spacing:.26em;font-weight:700;line-height:1.1;color:#fff}
:where(.css-app-event-intro-2) .ip-recap .rc-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px}
:where(.css-app-event-intro-2) .ip-recap .rc-kpi {border:1px solid var(--hair-soft);border-radius:12px;padding:8px 10px}
:where(.css-app-event-intro-2) .ip-recap .rc-kpi b {font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--or)}
:where(.css-app-event-intro-2) .ip-recap .rc-kpi small {display:block;font-size:.68rem;color:var(--muted,#aaa);margin-top:2px}
:where(.css-app-event-intro-2) .ip-recap .rc-links {display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}

/* i191 — crédits IA de la fête, séparés des crédits partagés du compte */
:where(.css-app-event-intro-2) .ip-recap .rc-kpi-wide {grid-column:1/-1}
:where(.css-app-event-intro-2) .ip-recap .rc-ai {border:1px solid var(--hair-soft);border-radius:14px;padding:12px 14px;background:rgba(0,0,0,.18)}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-main {display:flex;align-items:baseline;gap:8px;margin-top:4px}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-main b {font-family:var(--serif);font-size:2rem;line-height:1;color:var(--or)}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-main span {font-size:.8rem;color:var(--muted,#aaa)}
:where(.css-app-event-intro-2) .ip-recap .rc-bar {height:6px;border-radius:6px;background:rgba(255,255,255,.08);margin:8px 0 10px;overflow:hidden}
:where(.css-app-event-intro-2) .ip-recap .rc-bar i {display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or-clair));border-radius:6px}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-list {list-style:none;margin:0;padding:0;font-size:.78rem}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-list li {display:flex;justify-content:space-between;gap:10px;padding:2px 0}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-list li b {color:#fff;font-weight:600}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-list li.rc-sub {font-size:.7rem;color:var(--muted,#aaa);padding-left:10px}
:where(.css-app-event-intro-2) .ip-recap .rc-ai-list li.rc-sep {border-top:1px dashed var(--hair-soft);margin-top:4px;padding-top:6px}
:where(.css-app-event-intro-2) .ip-recap .rc-shared {margin-top:10px;padding-top:8px;border-top:1px solid var(--hair-soft);font-size:.76rem;color:var(--muted,#bbb)}
:where(.css-app-event-intro-2) .ip-recap .rc-shared b {color:#ddd}
:where(.css-app-event-intro-2) .ip-recap .rc-shared-t {font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:3px}
:where(.css-app-event-intro-2) .ip-recap .rc-shared small {display:block;opacity:.75;margin-top:3px}
/* Le récap s'allonge avec le bilan IA : l'aperçu suit sa hauteur sans déborder sur lui
   (avec aspect-ratio, une hauteur étirée élargissait l'aperçu par-dessus le récap). */
@media(min-width:992px){:where(.css-app-event-intro-2) .ip-row .ip-hero {aspect-ratio:auto;min-height:420px;height:auto}}
/* Les trois réserves de photos IA, nommées partout pareil (i191) */
:where(.css-app-event-intro-2) .ip-recap .rc-tag {display:inline-block;font-size:.58rem;letter-spacing:.06em;font-weight:700;padding:1px 6px;border-radius:5px;vertical-align:1px;text-transform:none}
:where(.css-app-event-intro-2) .ip-recap .rc-paid {background:rgba(var(--gold-rgb),.18);color:#e8c95c}
:where(.css-app-event-intro-2) .ip-recap .rc-pro {background:rgba(140,170,255,.16);color:#a9c0ff}
:where(.css-app-event-intro-2) .ip-recap .rc-plus {background:rgba(127,224,166,.14);color:#86e0ad}
:where(.css-app-event-intro-2) .ip-recap .rc-exp {opacity:.7;font-size:.7rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   @section app/admin-clients
   Nouveau (i299) — la liste « Tous les clients » et la fiche d'un testeur de la démo
   Activée par css_use('app/admin-clients') dans : admin/clients.php, admin/demo-lead.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:where(.css-app-admin-clients) {--cl-org:var(--or,#d4af37);--cl-demo:#9dc3e6;--cl-rouge:#e6817f}
:where(.css-app-admin-clients) .cl-tiles {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
:where(.css-app-admin-clients) .cl-tile {display:block;border:1px solid var(--hair-soft);border-radius:14px;padding:14px 16px;text-decoration:none;
  color:var(--ivoire-2);background:rgba(255,255,255,.02);transition:.15s}
:where(.css-app-admin-clients) a.cl-tile:hover {border-color:var(--or);background:rgba(var(--gold-rgb),.06)}
:where(.css-app-admin-clients) .cl-tile span {display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#aaa)}
:where(.css-app-admin-clients) .cl-tile b {display:block;font-family:var(--serif);font-weight:500;font-size:2.1rem;line-height:1.15;color:var(--or)}
:where(.css-app-admin-clients) .cl-tile em {display:block;font-style:normal;font-size:.74rem;color:var(--muted,#b6b2a8);line-height:1.35}
:where(.css-app-admin-clients) .cl-tile.demo b {color:var(--cl-demo)}
:where(.css-app-admin-clients) .cl-tile.alerte {border-color:rgba(230,129,127,.55);background:rgba(230,129,127,.07)}
:where(.css-app-admin-clients) .cl-tile.alerte b {color:var(--cl-rouge)}
:where(.css-app-admin-clients) .cl-visu {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;margin-bottom:22px}
@media(max-width:980px){:where(.css-app-admin-clients) .cl-visu {grid-template-columns:1fr}}
:where(.css-app-admin-clients) .cl-card {border:1px solid var(--hair-soft);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.02)}
:where(.css-app-admin-clients) .cl-card h2 {font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);font-weight:500;margin:0 0 10px;font-family:inherit}
:where(.css-app-admin-clients) .cl-card h2.mt {margin-top:20px}
:where(.css-app-admin-clients) .cl-bar {display:flex;gap:3px;height:30px;border-radius:8px;overflow:hidden}
:where(.css-app-admin-clients) .cl-bar.vide {background:rgba(255,255,255,.05)}
:where(.css-app-admin-clients) .cl-seg {display:flex;align-items:center;justify-content:center;min-width:6px;font-size:.78rem;font-weight:600;color:#14120f;
  text-decoration:none;transition:filter .15s}
:where(.css-app-admin-clients) .cl-seg:hover {filter:brightness(1.2)}
:where(.css-app-admin-clients) .cl-seg.on {outline:2px solid var(--ivoire,#fff);outline-offset:-2px}
:where(.css-app-admin-clients) .cl-seg.bleu, :where(.css-app-admin-clients) .cl-leg i.bleu {background:#9dc3e6}
:where(.css-app-admin-clients) .cl-seg.violet, :where(.css-app-admin-clients) .cl-leg i.violet {background:#c4a7e7}
:where(.css-app-admin-clients) .cl-seg.jaune, :where(.css-app-admin-clients) .cl-leg i.jaune {background:#e6c07a}
:where(.css-app-admin-clients) .cl-seg.vert, :where(.css-app-admin-clients) .cl-leg i.vert {background:#8fd6ad}
:where(.css-app-admin-clients) .cl-seg.gris, :where(.css-app-admin-clients) .cl-leg i.gris {background:#6f6b63}
:where(.css-app-admin-clients) .cl-seg.rouge, :where(.css-app-admin-clients) .cl-leg i.rouge {background:#e6817f}
:where(.css-app-admin-clients) .cl-leg {display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:.74rem;color:var(--muted,#b6b2a8)}
:where(.css-app-admin-clients) .cl-leg i {display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:baseline}
:where(.css-app-admin-clients) .cl-leg i.o {background:var(--cl-org)}
:where(.css-app-admin-clients) .cl-leg i.d {background:var(--cl-demo)}
:where(.css-app-admin-clients) .cl-leg b {color:var(--ivoire-2);font-weight:600}
:where(.css-app-admin-clients) .cl-note {font-size:.74rem;color:var(--muted,#aaa);margin:12px 0 0}
:where(.css-app-admin-clients) .cl-chart {width:100%;height:auto;display:block}
:where(.css-app-admin-clients) .cl-chart .g {stroke:rgba(255,255,255,.12);stroke-width:1}
:where(.css-app-admin-clients) .cl-chart .o {fill:var(--cl-org)}
:where(.css-app-admin-clients) .cl-chart .d {fill:var(--cl-demo)}
:where(.css-app-admin-clients) .cl-chart text {fill:var(--muted,#aaa);font-size:11px}
:where(.css-app-admin-clients) .cl-tools {display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:12px}
:where(.css-app-admin-clients) .cl-tools input {max-width:340px}
:where(.css-app-admin-clients) .cl-chips {display:flex;flex-wrap:wrap;gap:8px}
:where(.css-app-admin-clients) .cl-chips a {border:1px solid var(--hair-soft);border-radius:2rem;padding:6px 14px;font-size:.8rem;color:var(--ivoire-2);text-decoration:none}
:where(.css-app-admin-clients) .cl-chips a b {font-family:var(--serif);color:var(--or);margin-left:4px}
:where(.css-app-admin-clients) .cl-chips a:hover {border-color:var(--or)}
:where(.css-app-admin-clients) .cl-chips a.on {border-color:var(--or);background:rgba(var(--gold-rgb),.1);color:var(--or-clair)}
:where(.css-app-admin-clients) .cl-t {width:100%;border-collapse:collapse;font-size:.86rem}
:where(.css-app-admin-clients) .cl-t th {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);text-align:left;padding:0 10px 9px;font-weight:500;white-space:nowrap}
:where(.css-app-admin-clients) .cl-t th.n, :where(.css-app-admin-clients) .cl-t td.n {text-align:center;font-variant-numeric:tabular-nums}
:where(.css-app-admin-clients) .cl-t td {padding:11px 10px;border-top:1px solid var(--hair-soft);vertical-align:middle}
:where(.css-app-admin-clients) .cl-t tbody tr {cursor:pointer;transition:background .12s}
:where(.css-app-admin-clients) .cl-t tbody tr:hover {background:rgba(var(--gold-rgb),.06)}
:where(.css-app-admin-clients) .cl-t .sm {font-size:.78rem;color:var(--muted,#b6b2a8)}
:where(.css-app-admin-clients) .cl-t .sm a {color:var(--or-clair);text-decoration:none}
:where(.css-app-admin-clients) .cl-t .v {color:rgba(255,255,255,.18)}
:where(.css-app-admin-clients) .cl-t .or {color:var(--or);font-weight:600}
:where(.css-app-admin-clients) .cl-qui {color:var(--ivoire-2);font-weight:600;text-decoration:none;word-break:break-all}
:where(.css-app-admin-clients) .cl-qui:hover {color:var(--or-clair)}
:where(.css-app-admin-clients) .cl-sub {font-size:.72rem;color:var(--muted,#aaa);word-break:break-all}
:where(.css-app-admin-clients) .cl-type {display:inline-block;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;border-radius:4px;padding:1px 6px;margin-right:8px;
  border:1px solid;vertical-align:1px}
:where(.css-app-admin-clients) .cl-type.org {color:var(--cl-org);border-color:rgba(var(--gold-rgb),.45)}
:where(.css-app-admin-clients) .cl-type.demo {color:var(--cl-demo);border-color:rgba(157,195,230,.45)}
:where(.css-app-admin-clients) .cl-badge {font-size:.68rem;border-radius:2rem;padding:3px 11px;border:1px solid;display:inline-block}
:where(.css-app-admin-clients) .cl-badge.bleu {color:#9dc3e6;border-color:rgba(157,195,230,.4)}
:where(.css-app-admin-clients) .cl-badge.violet {color:#c4a7e7;border-color:rgba(196,167,231,.4)}
:where(.css-app-admin-clients) .cl-badge.jaune {color:#e6c07a;border-color:rgba(230,192,122,.45)}
:where(.css-app-admin-clients) .cl-badge.vert {color:#8fd6ad;border-color:rgba(143,214,173,.45)}
:where(.css-app-admin-clients) .cl-badge.gris {color:var(--muted,#aaa);border-color:var(--hair-soft)}
:where(.css-app-admin-clients) .cl-badge.rouge {color:#e6817f;border-color:rgba(230,129,127,.5);background:rgba(230,129,127,.08)}
:where(.css-app-admin-clients) .cl-open {font-size:.76rem;color:var(--or-clair);text-decoration:none;white-space:nowrap}
:where(.css-app-admin-clients) .cl-vide {padding:28px;text-align:center;color:var(--muted,#aaa);border:1px dashed var(--hair-soft);border-radius:12px}
/* La fiche d'un testeur de la démo */
:where(.css-app-admin-clients) .dl-grid {display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;margin-bottom:18px}
@media(max-width:860px){:where(.css-app-admin-clients) .dl-grid {grid-template-columns:1fr}}
:where(.css-app-admin-clients) .dl-photo {border:1px solid var(--hair-soft);border-radius:14px;overflow:hidden;background:#0e0d0b;display:flex;align-items:center;justify-content:center;
  min-height:220px;text-align:center;color:var(--muted,#aaa);padding:0}
:where(.css-app-admin-clients) .dl-photo img {width:100%;display:block}
:where(.css-app-admin-clients) .dl-photo p {padding:24px;margin:0;font-size:.85rem}
:where(.css-app-admin-clients) .dl-meta {display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 20px;margin:0}
:where(.css-app-admin-clients) .dl-meta dt {font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#aaa);font-weight:500}
:where(.css-app-admin-clients) .dl-meta dd {margin:2px 0 0;color:var(--ivoire-2);font-size:.9rem;word-break:break-word}
:where(.css-app-admin-clients) .dl-steps {list-style:none;margin:0;padding:0}
:where(.css-app-admin-clients) .dl-steps li {display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--hair-soft);font-size:.86rem}
:where(.css-app-admin-clients) .dl-steps li:first-child {border-top:0}
:where(.css-app-admin-clients) .dl-steps .t {width:118px;white-space:nowrap;flex:none;font-size:.74rem;color:var(--muted,#aaa);font-variant-numeric:tabular-nums}
:where(.css-app-admin-clients) .dl-steps .x {flex:1;color:var(--ivoire-2);word-break:break-word}
:where(.css-app-admin-clients) .dl-steps .x small {display:block;color:var(--muted,#aaa);font-size:.74rem}
:where(.css-app-admin-clients) .dl-steps .dv {font-size:.7rem;color:var(--muted,#aaa)}
:where(.css-app-admin-clients) .dl-steps li.err .x {color:#f2a5a3}
:where(.css-app-admin-clients) .dl-steps li.ok .x {color:#8fd6ad}
:where(.css-app-admin-clients) .dl-prog {display:flex;gap:4px;margin:2px 0 14px}
:where(.css-app-admin-clients) .dl-prog span {flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
:where(.css-app-admin-clients) .dl-prog span.on {background:var(--or)}
:where(.css-app-admin-clients) .dl-prog span.err {background:#e6817f}
:where(.css-app-admin-clients) .dl-proglab {display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#aaa);margin-top:-8px;margin-bottom:14px}