/*
 * Modernist design system typeface: Archivo, self-hosted (variable font, weights
 * 400–900) so the site never depends on a Google Fonts request to render text.
 * This replaces the previous "Studio Sans" alias, which pointed at Fira Sans — a
 * different, unrelated typeface — instead of the Archivo the design system specifies.
 */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/Archivo-Variable.woff2") format("woff2-variations"),
       url("../fonts/archivo/Archivo-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/*
 * Display typeface of the "Chaleureuse" variant (Accueil/Studio/Tunnel .dc.html
 * all declare --font-heading: 'Bricolage Grotesque'). The maquettes pull it from
 * Google Fonts; this file keeps the project's no-third-party-request rule and
 * expects the variable woff2 to be dropped in assets/fonts/bricolage/.
 * If that file is absent the @font-face simply fails to load and every heading
 * falls back to Archivo 400–900, which is the second entry of --sp-font-heading —
 * so the site degrades to the previous typography instead of to a system serif.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage/BricolageGrotesque-Variable.woff2") format("woff2-variations"),
       url("../fonts/bricolage/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/*
 * ==========================================================================
 * Design tokens — variante « Chaleureuse » du système Modernist.
 * Repris verbatim du :root partagé par Accueil.dc.html, Studio.dc.html et
 * Tunnel de vente.dc.html (les trois maquettes déclarent le même bloc).
 *
 * Ce que la variante change par rapport à la passe précédente (gris #f3f2f2 /
 * rouge #ec3013 / angles vifs) :
 *   - fond crème #FBF6EE et encre chaude #2A2320 au lieu du gris/noir froid ;
 *   - accent corail #F2542D au lieu du rouge #ec3013 ;
 *   - trois couleurs secondaires (teal, ambre, violet) qui donnent le rythme
 *     des sections de l'accueil — elles n'existaient pas avant ;
 *   - --radius-md: 14px dans la maquette — ANNULÉ le 2026-09-24 : le site est
 *     à angles droits partout, éditeur compris (jetons à 0 ci-dessous, et
 *     règle « Angles droits » en fin de fichier pour les valeurs en dur).
 *
 * Les noms --color-* et --c-* sont ceux des maquettes ; les --sp-* et --aics-*
 * existants sont conservés et remappés dessus, pour que tout le CSS déjà
 * écrit (éditeur, wizard, compte, checkout) bascule sans réécriture.
 * ==========================================================================
 */
:root {
  /* --- tokens maquette (noms d'origine) --- */
  --color-bg: #fbf6ee;
  --color-text: #2a2320;
  --color-divider: #e4d9c7;

  --color-neutral-100: #f6efe3;
  --color-neutral-200: #ede3d3;
  --color-neutral-300: #dfd2be;
  --color-neutral-400: #c4b49c;
  --color-neutral-500: #9c8b74;
  --color-neutral-600: #7a6b57;
  --color-neutral-700: #5c4f3f;
  --color-neutral-800: #40362a;
  --color-neutral-900: #2a2320;

  /* Rebrand corail → violet #5B3FD0 du logo Fabluneo (assets/images/brand/
     fabluneo-wordmark.svg). --color-accent-700 reste dans la rampe violette
     (kickers, survols de sections accentuées, catégorie « destinataire ») ;
     les états d'erreur/limite ne s'y accrochent plus — voir --color-danger
     plus bas, sinon un message d'erreur se serait mis à s'afficher en violet. */
  --color-accent: #5b3fd0;
  --color-accent-100: #e8e3fb;
  --color-accent-200: #d2c6f6;
  --color-accent-300: #b3a0ee;
  --color-accent-600: #4c34ad;
  --color-accent-700: #3c298a;
  --color-accent-900: #241a54;

  /* Rouge d'erreur, détaché de la rampe accent depuis le rebrand violet
     ci-dessus : mêmes teintes qu'avant (#b33714 / #fde7dc) pour que les
     états is-error/is-limit/is-offline gardent leur sens (danger = rouge),
     indépendamment de la couleur de marque. */
  --color-danger: #b33714;
  --color-danger-soft: #fde7dc;

  /* couleurs secondaires de la variante : elles portent le rythme des sections */
  --c-teal: #12786f;
  --c-teal-soft: #d6ede9;
  --c-amber: #e9a331;
  --c-amber-soft: #fbebcc;
  --c-violet: #5b4b8a;
  --c-violet-soft: #e4def2;

  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  --font-heading: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", Arial, sans-serif;

  /* --- alias Studio Proches --- */
  --sp-page: var(--color-bg);
  --sp-ink: var(--color-text);
  --sp-red: var(--color-accent);
  --sp-red-dark: var(--color-accent-600);
  --sp-white: #fff;
  --sp-grey: var(--color-neutral-200);
  --sp-line: var(--color-divider);
  --sp-font-heading: var(--font-heading);
  --sp-font-body: var(--font-body);
  /* Largeur de contenu des maquettes : 1360px (elles répètent
     `max-width: 1360px; padding: 0 20px` sur chaque section), pas 1440. */
  --sp-max: 1360px;
  --sp-gutter: 20px;
  /* Hauteur commune à tous les contrôles de la barre d'en-tête. */
  --sp-header-control: 40px;
  /* .sp-header = barre de 60px + bordure basse de 2px. */
  --sp-header-height: 62px;

  /* --- alias éditeur AICS --- */
  --aics-bg: var(--color-bg);
  --aics-surface: #fff;
  --aics-surface-soft: var(--color-neutral-100);
  --aics-ink: var(--color-text);
  --aics-muted: var(--color-neutral-700);
  --aics-line: var(--color-divider);
  --aics-line-strong: var(--color-text);
  --aics-accent: var(--color-accent);
  --aics-accent-soft: var(--color-accent-100);
  --aics-order: var(--color-accent);
  --aics-order-hover: var(--color-accent-600);
  --aics-danger: var(--color-danger);
  --aics-shadow: none;
  --aics-field-bg: #fffdf8;
  --aics-neutral-100: var(--color-neutral-100);
  --aics-neutral-200: var(--color-neutral-200);
  --aics-neutral-300: var(--color-neutral-300);
  --aics-neutral-400: var(--color-neutral-400);
  --aics-neutral-500: var(--color-neutral-500);
  --aics-neutral-600: var(--color-neutral-600);
  --aics-neutral-700: var(--color-neutral-700);
  --aics-radius-sm: 8px;
  --aics-radius: var(--radius-md);
  --aics-radius-lg: var(--radius-lg);
  --aics-radius-pill: var(--radius-pill);
  /* Ombres réchauffées : la teinte de base suit l'encre #2a2320, pas l'ancien
     gris froid #2d2b2b, sinon les élévations tirent vers le bleu sur le crème. */
  --aics-shadow-sm: 0 1px 2px rgba(42, 35, 32, .12);
  --aics-shadow-md: 0 3px 10px rgba(42, 35, 32, .14);
  --aics-shadow-lg: 0 12px 32px rgba(42, 35, 32, .18);
}

.aics-marketing-page,
.aics-marketing-page #aics-studio-root,
.sp-site,
.sp-wizard-page,
.sp-account-page {
  min-height: 100%;
  margin: 0;
  background: var(--sp-page);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  /* Même fuite que celle déjà corrigée sur .aics-studio-app : le thème
     WordPress pose body{font-size:22px} pour ses contenus rédactionnels, et
     rien ne le réinitialisait sur la vitrine. Tout élément sans font-size
     propre héritait donc de 22px — en-tête, <strong> des filtres, libellés,
     <li>… — ce qui gonflait aussi tous les espacements exprimés en em et
     décalait les hauteurs de boutons. 16px est la base de texte des maquettes. */
  font-size: 16px;
  line-height: 1.5;
}

/* Seul le document défile. `overflow: auto` sur body et sur la racine en
   faisait des conteneurs de défilement qui ne défilaient jamais (hauteur
   auto) : tout `position: sticky` du tunnel s'y accrochait et défilait avec
   la page — en-tête et barre d'actions compris. */
html.aics-flow-document { min-height: 100%; height: auto; overflow: auto; }
body.aics-flow-page,
body.aics-flow-page #aics-studio-root { min-height: 100%; height: auto; overflow: visible; }
html.aics-flow-document:has(body.sp-scroll-lock) { overflow: hidden; }

/* Les écrans du Studio et de l'éditeur ne passent pas par le shell marketing :
   ils portent .aics-standalone-page, pas .aics-marketing-page, et n'étaient donc
   ni repeints en crème ni protégés de la fuite body{font-size:22px} du thème.
   Résultat mesuré avant ce correctif : fond blanc et base typographique à
   21.76px sur /studio/ et /mes-creations/, alors que la vitrine était à 16px. */
body.aics-standalone-page,
body.aics-standalone-page #aics-studio-root {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--sp-font-body);
  font-size: 16px;
  line-height: 1.5;
}

.sp-site *,
.sp-wizard-page *,
.sp-account-page *,
.aics-studio-app * { box-sizing: border-box; }

.sp-site a,
.sp-wizard-page a,
.sp-account-page a { color: inherit; }

/* Titres : Bricolage Grotesque (repli Archivo). Les maquettes posent
   var(--font-heading) sur chaque h1/h2/h3 et un letter-spacing: -0.02em
   global ; regroupé ici pour ne pas le répéter sur chaque composant. */
.sp-site h1, .sp-site h2, .sp-site h3,
.sp-wizard-page h1, .sp-wizard-page h2, .sp-wizard-page h3,
.sp-account-page h1, .sp-account-page h2, .sp-account-page h3,
.aics-studio-app h1, .aics-studio-app h2, .aics-studio-app h3 {
  font-family: var(--sp-font-heading);
  letter-spacing: -.02em;
}

.sp-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--sp-ink);
  text-decoration: none;
}

.sp-burger {
  display: none;
  flex: 0 0 auto;
  place-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border: 2px solid var(--sp-ink);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.sp-burger span { display: block; width: 18px; height: 2px; background: var(--sp-ink); }
.sp-burger[aria-expanded="true"] { border-color: var(--sp-red); background: var(--sp-red); }
.sp-burger[aria-expanded="true"] span { background: #fff; }
.sp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sp-mobile-menu-backdrop { position: fixed; inset: 0; z-index: 29; border: 0; background: rgba(42, 35, 32, .45); cursor: pointer; }
.sp-mobile-menu {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--sp-page);
  padding: 6px clamp(18px, 4vw, 40px) 18px;
}
.sp-mobile-menu.is-open { display: flex; }
.sp-mobile-menu a {
  border-bottom: 1px solid var(--aics-line);
  padding: 14px 2px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
.sp-mobile-menu a:last-child { margin-top: 10px; border-bottom: 0; }
.sp-mobile-menu .aics-button { justify-content: center; text-align: center; }
body.sp-menu-open { overflow: hidden; }

.sp-site .aics-button,
.sp-wizard-page .aics-button,
.sp-account-page .aics-button,
.aics-studio-app .aics-button {
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sp-ink);
  border-radius: var(--aics-radius);
  box-shadow: none;
  /* Hauteur pilotée par la ligne de texte, pas par un padding vertical fixe :
     c'est ce qui garantit que deux boutons de tailles de police différentes
     (CTA d'en-tête 13px, pastille Crédits 13px, bouton de section 14px)
     s'alignent sur la même hauteur au lieu de se décaler l'un par rapport
     à l'autre. */
  padding: 0 22px;
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}
.sp-site .aics-button--primary,
.sp-wizard-page .aics-button--primary,
.sp-account-page .aics-button--primary,
.aics-studio-app .aics-button--primary,
.aics-studio-app .aics-button--order {
  border-color: var(--sp-red);
  background: var(--sp-red);
  color: #fff;
}
.sp-site .aics-button--primary:hover,
.sp-wizard-page .aics-button--primary:hover,
.sp-account-page .aics-button--primary:hover,
.aics-studio-app .aics-button--primary:hover,
.aics-studio-app .aics-button--order:hover { border-color: var(--sp-red-dark); background: var(--sp-red-dark); }
/* Bouton secondaire du site public, du tunnel et du compte : un aplat sable
   et plus de contour d'encre (2026-11-05). La bordure reste, transparente,
   pour qu'il ait la même hauteur que le bouton principal. Spécificité (0,2,0),
   celle de la règle commune ci-dessus : un bouton secondaire habillé pour son
   contexte (crème sur le violet du hero, blanc sur un bandeau) garde sa règle,
   plus précise. Le Studio garde ses boutons à contour. */
:where(.sp-site, .sp-wizard-page, .sp-account-page) .aics-button:not(.aics-button--primary, .aics-button--order) { border-color: transparent; background: var(--color-neutral-200); color: var(--color-text); }
.sp-site .aics-button:not(.aics-button--primary):not(.aics-button--order):hover,
.sp-wizard-page .aics-button:not(.aics-button--primary):not(.aics-button--order):hover,
.sp-account-page .aics-button:not(.aics-button--primary):not(.aics-button--order):hover { background: var(--sp-ink); color: var(--sp-page); }

/* ==========================================================================
   ÉDITEUR — chrome (barre supérieure, panneaux, canvas, inspecteur), repris
   de Studio.dc.html. La sélection y est TEAL (--sel), calme ; le corail reste
   réservé aux actions principales et aux erreurs. Les composants métier
   (CompositionCanvas, inspecteurs de blocs…) gardent leur logique : seule leur
   enveloppe visuelle change.
   ========================================================================== */
.aics-studio-app {
  --sel: #12786f;
  --sel-soft: #e4f1ee;
  --canvas-ground: #efeae1;
  --ed-line: var(--color-neutral-300);
  --ed-shadow-card: 0 2px 8px rgba(42, 35, 32, .07);
  --ed-shadow-page: 0 6px 22px rgba(42, 35, 32, .13), 0 1px 3px rgba(42, 35, 32, .10);
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  font-size: 14px;
}

/* --- Barre supérieure --- */
.aics-studio-app .aics-topbar { position: relative; z-index: 30; display: flex; height: 60px; flex: none; align-items: center; gap: 6px; border-bottom: 1.5px solid var(--ed-line); background: var(--color-bg); box-shadow: 0 1px 4px rgba(42, 35, 32, .05); padding: 0 10px; }
/* Même logo et même largeur que l'en-tête du site (.sp-header__wordmark). */
.aics-topbar__logo { display: flex; flex: none; align-items: center; height: 40px; margin-right: 4px; padding-right: 12px; border-right: 1px solid var(--ed-line, #e4ddd2); }
.aics-topbar__logo img { display: block; width: 112px; height: auto; object-fit: contain; }
.aics-topbar__back { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 2px solid transparent; border-radius: 10px; background: none; color: var(--color-text); text-decoration: none; }
.aics-topbar__back:hover { border-color: var(--color-text); color: var(--color-text); }
.aics-topbar__name { display: flex; min-width: 120px; flex: 0 1 280px; flex-direction: column; gap: 1px; overflow: hidden; }
.aics-topbar__name input { width: 100%; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: none; margin-left: 0; padding: 1px 4px; color: var(--color-text); font-family: var(--font-heading); font-size: 15px; font-weight: 800; letter-spacing: 0; text-overflow: ellipsis; }
.aics-topbar__name input:hover { border-color: var(--color-neutral-400); }
.aics-topbar__name input:focus { border-color: var(--color-text); outline: none; }
.aics-topbar__meta { display: flex; align-items: center; gap: 10px; overflow: hidden; padding-left: 6px; color: var(--color-neutral-700); font-size: 11px; white-space: nowrap; }
.aics-topbar__meta-format { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* L'état d'enregistrement vit dans la ligne du format : une information,
   pas un bouton. */
.aics-topbar__meta .aics-topbar__save { max-width: none; border: 0; padding: 0; font-size: 11px; font-weight: 600; }
.aics-topbar__meta .aics-topbar__save:hover { background: none; }
.aics-topbar__save { display: flex; max-width: 110px; flex: none; align-items: center; gap: 5px; overflow: hidden; border: 1.5px solid transparent; border-radius: 10px; background: none; padding: 6px 8px; color: var(--color-text); font-size: 11.5px; font-weight: 700; }
.aics-topbar__save:hover { border-color: var(--ed-line); background: var(--color-neutral-100); }
.aics-topbar__save > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aics-topbar__save-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.aics-topbar__save.is-saving { color: var(--color-neutral-600); }
.aics-topbar__save.is-unsaved,
.aics-topbar__save.is-error,
.aics-topbar__save.is-offline { color: var(--color-danger); }
.aics-topbar__save.is-saving .aics-topbar__save-dot,
.aics-topbar__save.is-error .aics-topbar__save-dot { animation: sp-pulse 1.1s ease-in-out infinite; }
.aics-topbar__history { display: flex; flex: none; align-items: center; gap: 4px; }
/* Outils d'édition (annuler, rétablir, affichage) : un seul encadré. */
.aics-topbar__tools { display: flex; flex: none; align-items: center; gap: 2px; margin-left: 10px; border: 1.5px solid var(--ed-line); background: #fff; padding: 2px; }
.aics-topbar__tools .aics-topbar__icon { width: 32px; height: 32px; border: 0; }
.aics-topbar__tools-rule { width: 1px; height: 20px; margin: 0 4px; background: var(--ed-line); }
/* Bouton sans cadre : outils et actions secondaires. */
.aics-topbar__ghost { display: inline-flex; flex: none; align-items: center; gap: 6px; border: 1.5px solid transparent; background: none; padding: 7px 9px; color: var(--color-text); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.aics-topbar__ghost:hover:not(:disabled) { background: var(--color-neutral-100); }
.aics-topbar__ghost:disabled { opacity: .5; cursor: default; }
/* Contexte du projet (personnages, coûts) : sans cadre, séparé des actions. */
.aics-topbar__context { display: flex; flex: none; align-items: center; gap: 10px; margin-right: 6px; border-right: 1px solid var(--ed-line); padding-right: 12px; }
.aics-price-popover { position: relative; flex: none; }
.aics-price-popover__trigger { display: inline-flex; align-items: baseline; gap: 4px; border: 1.5px solid transparent; background: none; padding: 7px 6px; color: var(--color-text); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.aics-price-popover__trigger:hover, .aics-price-popover__trigger.is-active, .aics-price-popover__trigger:focus-visible { border-color: var(--ed-line); background: var(--color-neutral-100); }
.aics-price-popover__trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.aics-price-popover__trigger strong { font-size: 13px; font-weight: 800; }
.aics-price-popover__trigger sup { color: #a56b0c; font-size: 13px; font-weight: 900; line-height: 0; }
.aics-price-popover__panel { position: absolute; z-index: 60; top: calc(100% + 9px); right: 0; width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 570px); overflow-y: auto; border: 1.5px solid var(--ed-line); background: var(--color-bg); box-shadow: var(--aics-shadow-lg); padding: 15px 17px; color: var(--color-text); font-size: 12px; }
.aics-price-popover__heading { margin: 0 0 13px; font-family: var(--font-heading); font-size: 14px; font-weight: 800; }
.aics-price-popover__section + .aics-price-popover__section { margin-top: 14px; border-top: 1px solid var(--ed-line); padding-top: 14px; }
.aics-price-popover__section h3 { margin: 0 0 9px; font-size: 13px; font-weight: 800; }
.aics-price-popover__section dl { display: grid; gap: 7px; margin: 0; }
.aics-price-popover__section dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.aics-price-popover__section dt { color: var(--color-neutral-700); }
.aics-price-popover__section dd { flex: none; margin: 0; font-weight: 700; white-space: nowrap; }
.aics-price-popover__section .aics-price-popover__due { margin-top: 3px; border-top: 1px solid var(--ed-line); padding-top: 9px; font-size: 13px; font-weight: 800; }
.aics-price-popover__section .aics-price-popover__due dt { color: var(--color-text); }
.aics-price-popover__note { margin: 6px 0 0; color: var(--color-neutral-700); font-size: 11px; }
.aics-price-popover__alternate { margin-top: 10px; border: 1.5px solid var(--color-accent); background: none; padding: 7px 9px; color: var(--color-accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.aics-price-popover__alternate:hover:not(:disabled) { background: var(--color-accent); color: #fff; }
.aics-price-popover__alternate:disabled { opacity: .5; cursor: default; }
.aics-topbar__icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1.5px solid transparent; border-radius: 10px; background: none; padding: 0; color: var(--color-text); cursor: pointer; }
.aics-topbar__icon:hover:not(:disabled) { border-color: var(--ed-line); background: var(--color-neutral-100); }
.aics-topbar__icon:disabled { opacity: .35; cursor: default; }
.aics-topbar__icon.is-outlined { border-color: var(--ed-line); }
.aics-topbar__outline { display: inline-flex; flex: none; align-items: center; gap: 6px; border: 1.5px solid var(--ed-line); border-radius: 10px; background: none; padding: 8px 12px; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.aics-topbar__outline:hover:not(:disabled) { background: var(--color-neutral-100); }
.aics-topbar__outline:disabled { opacity: .5; cursor: default; }
.aics-topbar__view { position: relative; flex: none; }
.aics-topbar__view > .aics-topbar__outline { display: flex; align-items: center; gap: 5px; padding: 7px 9px; font-size: 12px; }
.aics-topbar__pill { flex: none; border: 2px solid var(--color-text); border-radius: 10px; background: none; padding: 7px 8px; color: var(--color-text); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.aics-topbar__pill.is-on { background: var(--color-text); color: #fff; }
.aics-topbar__menu { position: relative; flex: none; }
.aics-topbar__menu-backdrop { position: fixed; z-index: 49; inset: 0; }
.aics-topbar__menu-panel.is-right { right: 0; left: auto; }
.aics-topbar__menu-panel { position: absolute; z-index: 50; top: 40px; left: 0; display: grid; width: 210px; border: 1.5px solid var(--ed-line); border-radius: 12px; background: var(--color-bg); box-shadow: var(--aics-shadow-lg); padding: 6px; }
.aics-topbar__menu-panel button { width: 100%; border: 0; border-radius: 8px; background: none; padding: 9px 8px; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.aics-topbar__menu-panel button:hover:not(:disabled) { background: var(--color-neutral-100); }
.aics-topbar__menu-panel button:disabled { opacity: .4; cursor: default; }
.aics-topbar__menu-rule { height: 1.5px; margin: 4px 0; background: var(--color-neutral-200); }
.aics-view-popover { position: absolute; z-index: 50; top: 44px; left: 0; width: 220px; border: 1.5px solid var(--ed-line); border-radius: 12px; background: var(--color-bg); box-shadow: var(--aics-shadow-lg); padding: 12px; }
.aics-view-popover__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.aics-view-popover__zoom { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--ed-line); border-radius: 8px; padding: 2px; }
.aics-view-popover__zoom button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--color-text); font-weight: 800; font-size: 14px; cursor: pointer; }
.aics-view-popover__zoom button:hover { background: var(--color-neutral-200); }
.aics-view-popover__zoom span { width: 36px; font-size: 12px; font-weight: 700; text-align: center; }
.aics-view-popover__item { width: 100%; margin-bottom: 6px; border: 1.5px solid var(--ed-line); border-radius: 8px; background: none; padding: 8px 9px; color: var(--color-text); font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; }
.aics-view-popover__item:last-child { margin-bottom: 0; }
.aics-view-popover__item:hover { border-color: var(--color-text); }
.aics-view-popover__item.is-on { border-color: var(--color-text); background: var(--color-text); color: #fff; }
.aics-topbar__spacer { min-width: 12px; flex: 1 1 12px; }
.aics-topbar__avatars { display: flex; flex: none; align-items: center; padding-left: 8px; text-decoration: none; }
.aics-topbar__avatar { display: grid; width: 26px; height: 26px; place-items: center; overflow: hidden; margin-left: -8px; border: 2px solid var(--color-bg); border-radius: 50%; outline: 2px solid var(--color-text); background: var(--color-neutral-300); color: var(--color-text); font-size: 10px; font-weight: 800; }
.aics-topbar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.aics-topbar__verify { position: relative; }
.aics-topbar__badge { position: absolute; top: -8px; right: -8px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 800; }
/* L'étape suivante du livre, toujours en violet plein : grisé, « Valider »
   passait pour un bouton désactivé alors qu'il est la prochaine action. */
.aics-topbar__order { flex: none; border: 2px solid var(--color-accent); border-radius: 10px; background: var(--color-accent); box-shadow: 0 1px 3px rgba(42, 35, 32, .14); padding: 9px 14px; color: #fff; font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.aics-topbar__order:hover:not(:disabled) { border-color: var(--color-accent-700); background: var(--color-accent-700); }
.aics-topbar__order.is-ready { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.aics-topbar__order:disabled { cursor: default; opacity: .7; }
.aics-topbar__mobile-actions { position: relative; z-index: 30; display: flex; flex: none; gap: 8px; border-top: 1.5px solid var(--ed-line); background: var(--color-bg); padding: 10px 12px; }
.aics-topbar__mobile-actions > * { flex: 1 1 0; }

/* Pastille « crédits » : même gabarit que les autres boutons de la barre. */
.aics-studio-app .aics-credits-popover { position: relative; flex: none; }
.aics-studio-app .aics-credits-popover > .aics-icon-button { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1.5px solid transparent; border-radius: 10px; background: none; color: var(--color-text); }
.aics-studio-app .aics-credits-popover > .aics-icon-button:hover,
.aics-studio-app .aics-credits-popover > .aics-icon-button.is-active { border-color: var(--color-text); background: var(--color-neutral-100); }
.aics-studio-app .aics-credits-popover__panel { position: absolute; z-index: 50; top: 44px; right: 0; display: grid; gap: 8px; width: 300px; border: 1.5px solid var(--ed-line); border-radius: 12px; background: var(--color-bg); box-shadow: var(--aics-shadow-lg); padding: 16px; font-size: 12px; }

/* --- Espace de travail --- */
.aics-studio-app .aics-workspace { position: relative; display: flex; min-height: 0; flex: 1 1 auto; overflow: hidden; grid-template-columns: none; border: 0; }
.aics-studio-app .aics-panel-backdrop { position: fixed; z-index: 55; display: block; inset: 60px 0 0 0; border: 0; background: rgba(32, 30, 29, .35); }
.aics-studio-app .aics-panel-toggle,
.aics-studio-app .aics-panel-close { display: none; }

/* --- Panneau de gauche (Pages / Calques) --- */
.aics-studio-app .aics-page-nav { display: flex; width: 240px; flex: none; flex-direction: column; overflow: hidden; border-right: 2px solid var(--color-text); border-left: 0; background: var(--color-neutral-100); grid-template-rows: none; }
.aics-studio-app .aics-page-nav.is-drawer,
.aics-studio-app .aics-page-nav.is-sheet { position: fixed; z-index: 60; box-shadow: var(--aics-shadow-lg); }
.aics-studio-app .aics-page-nav.is-drawer { top: 60px; bottom: 0; left: 0; width: 232px; }
.aics-studio-app .aics-page-nav.is-sheet { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 46vh; border-top: 2px solid var(--color-text); border-right: 0; }
.aics-studio-app .aics-page-nav.is-drawer:not(.is-open),
.aics-studio-app .aics-page-nav.is-sheet:not(.is-open) { display: none; }
.aics-studio-app .aics-page-nav__header { display: flex; height: auto; flex: none; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--ed-line); padding: 10px 12px; font-size: 13px; font-weight: 800; }
.aics-panel-head__close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; background: none; color: var(--color-text); cursor: pointer; }
.aics-studio-app .aics-page-list,
.aics-studio-app .aics-layer-list { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: block; }
.aics-layer-list__caption { margin-bottom: 8px; color: var(--color-neutral-600); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.aics-studio-app .aics-page-count { flex: none; border-top: 1.5px solid var(--ed-line); padding: 12px; color: var(--color-neutral-700); font-size: 11px; position: relative; }

.aics-studio-app .aics-cover-nav-card { display: flex; width: 100%; align-items: center; gap: 11px; margin-bottom: 10px; border: 2px solid var(--ed-line); border-radius: 8px; background: var(--color-bg); padding: 11px; text-align: left; font: inherit; color: var(--color-text); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.aics-studio-app .aics-cover-nav-card:hover { box-shadow: 0 0 0 3px var(--sel-soft); }
.aics-studio-app .aics-cover-nav-card.is-active { border-color: var(--sel); background: var(--sel-soft); }
.aics-studio-app .aics-cover-nav-card__thumb { width: 44px; height: auto; aspect-ratio: var(--aics-page-ratio, 3/4); flex: none; }
.aics-studio-app .aics-cover-nav-card__thumb .aics-page-item__preview { display: grid; width: 100%; height: 100%; aspect-ratio: inherit; flex: none; place-items: center; border: 1.5px solid var(--color-neutral-400); border-radius: 4px; background: var(--color-neutral-200); color: var(--color-neutral-600); }
.aics-studio-app .aics-cover-nav-card__label strong { display: block; font-size: 12.5px; font-weight: 800; }
.aics-studio-app .aics-cover-nav-card__label small { display: block; color: var(--color-neutral-600); font-size: 10.5px; }

.aics-studio-app .aics-page-spread-row { margin-bottom: 10px; border: 1.5px solid var(--ed-line); border-radius: 12px; background: var(--color-bg); padding: 9px; transition: border-color .15s, box-shadow .15s; }
.aics-studio-app .aics-page-spread-row:hover { border-color: var(--color-neutral-400); box-shadow: var(--ed-shadow-card); }
.aics-studio-app .aics-page-spread-row.is-active { border-color: var(--sel); }
.aics-studio-app .aics-page-spread-row__label { display: flex; align-items: center; min-width: 0; margin-bottom: 0; color: var(--color-neutral-600); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aics-studio-app .aics-contribution-status { display: block; margin-top: 6px; color: var(--color-neutral-700); font-size: 10.5px; line-height: 1.35; }
.aics-studio-app .aics-contribution-status strong { color: var(--sel); }
.aics-studio-app .aics-spread-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aics-studio-app .aics-spread-mini { display: flex; min-width: 0; flex-direction: column; gap: 4px; border: 0; background: transparent; padding: 0; }
.aics-studio-app .aics-spread-mini:hover,
.aics-studio-app .aics-spread-mini.is-active { border-color: transparent; background: transparent; }
.aics-studio-app .aics-spread-mini__page { position: relative; display: block; width: 100%; min-width: 0; height: auto; aspect-ratio: var(--aics-page-ratio, 3/4); overflow: hidden; border: 2px solid var(--ed-line); border-radius: 0; background: var(--color-neutral-100); padding: 0; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.aics-studio-app .aics-spread-mini__page:hover { box-shadow: 0 0 0 3px var(--sel-soft); }
.aics-studio-app .aics-spread-mini.is-active .aics-spread-mini__page { border-color: var(--sel); }
.aics-studio-app .aics-spread-mini__label { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--color-neutral-500); font-size: 10px; font-weight: 700; }
.aics-studio-app .aics-spread-mini__label.is-complete { color: var(--color-text); }
.aics-studio-app .aics-spread-mini__label.is-error { color: var(--color-danger); }
.aics-studio-app .aics-spread-row__tools { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 8px; }
.aics-studio-app .aics-spread-row__actions { display: flex; flex: none; align-items: center; gap: 4px; }
.aics-studio-app .aics-add-spread-button { width: 100%; border: 1.5px dashed var(--color-neutral-400); border-radius: 12px; background: none; padding: 12px; color: var(--color-neutral-700); font: inherit; font-size: 12.5px; font-weight: 700; transition: border-color .15s, color .15s, background .15s; cursor: pointer; }
.aics-studio-app .aics-add-spread-button:hover:not(:disabled) { border-color: var(--sel); background: var(--sel-soft); color: var(--sel); }
.aics-studio-app .aics-add-spread-button small { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; line-height: 1.35; }
.aics-studio-app .aics-add-spread-button:disabled { opacity: .45; background: var(--color-neutral-100); cursor: default; }
/* Les cartes sont espacées de 10 px : la bande d'insertion garde ses 16 px à cheval. */
.aics-studio-app .aics-spread-insert.is-gap { margin: -13px 0 -3px; }
.aics-studio-app .aics-spread-insert.is-gap::before { border-top-color: var(--sel); }
.aics-studio-app .aics-spread-insert__trigger { width: 24px; height: 24px; border: 1.5px solid var(--sel); background: var(--color-bg); color: var(--sel); box-shadow: var(--ed-shadow-card); }
.aics-studio-app .aics-spread-insert__trigger:hover:not(:disabled) { background: var(--sel-soft); }
.aics-studio-app .aics-spread-glyph__page { border-color: var(--color-neutral-400); background-color: var(--color-bg); }
.aics-studio-app .aics-book-actions { position: relative; margin-top: 0; }
.aics-studio-app .aics-book-actions__trigger { width: 100%; border: 0; border-radius: 10px; background: var(--color-text); box-shadow: 0 1px 3px rgba(42, 35, 32, .16); padding: 11px; color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.aics-studio-app .aics-book-actions__menu { position: absolute; z-index: 40; right: 0; bottom: calc(100% + 8px); left: 0; display: grid; border: 1.5px solid var(--ed-line); border-radius: 12px; background: var(--color-bg); box-shadow: var(--aics-shadow-lg); padding: 6px; }
.aics-studio-app .aics-book-actions__menu > button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: none; padding: 9px 8px; color: var(--color-text); font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; }
.aics-studio-app .aics-book-actions__menu > button:hover:not(:disabled) { background: var(--color-neutral-100); }

.aics-studio-app .aics-layer-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 6px; border: 2px solid var(--ed-line); border-radius: 8px; background: var(--color-bg); padding: 8px; text-align: left; font: inherit; cursor: pointer; }
.aics-studio-app .aics-layer-item:hover { background: var(--color-neutral-100); }
.aics-studio-app .aics-layer-item.is-active { border-color: var(--sel); background: var(--sel-soft); }
.aics-studio-app .aics-layer-item__thumb,
.aics-studio-app .aics-layer-item__swatch { width: 34px; height: 34px; border: 1.5px solid var(--color-neutral-400); border-radius: 6px; }
.aics-studio-app .aics-layer-item__label strong { font-size: 12.5px; font-weight: 700; }
.aics-studio-app .aics-layer-item__label small { color: var(--color-neutral-600); font-size: 10.5px; }

/* --- Canvas --- */
.aics-studio-app .aics-canvas-workspace { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; overflow: auto; background: var(--canvas-ground); }
.aics-canvas-selection { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1.5px solid var(--ed-line); background: var(--color-bg); padding: 10px 18px; }
.aics-canvas-selection__details { color: var(--color-neutral-600); font-size: 11px; }
.aics-canvas-viewport { display: block; container-type: inline-size; min-height: 0; flex: 1 1 auto; overflow: auto; padding: 20px 24px; }
.aics-studio-app .aics-canvas-viewport > .aics-canvas-stage { width: 100%; height: 100%; padding: 0; }
.aics-studio-app .aics-canvas-viewport > .aics-book-spread { width: max-content; min-width: 100%; min-height: 100%; height: auto; align-content: center; margin: auto; }
.aics-studio-app .aics-canvas-viewport > .aics-empty { color: var(--color-neutral-600); font-size: 13px; }
.aics-canvas-selection .aics-breadcrumb { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; background: var(--color-neutral-100); padding: 4px 11px; }
.aics-canvas-selection .aics-breadcrumb > span { display: inline-flex; align-items: center; gap: 4px; }
.aics-canvas-selection .aics-breadcrumb__step { border: 0; background: none; padding: 0; color: var(--color-neutral-600); font: inherit; font-size: 11.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.aics-canvas-selection .aics-breadcrumb__step:hover { color: var(--color-text); text-decoration: underline; }
.aics-canvas-selection .aics-breadcrumb__step.is-current { color: var(--color-text); cursor: default; }
.aics-canvas-selection .aics-breadcrumb__separator { color: var(--color-neutral-400); }
.aics-canvas-selection .aics-breadcrumb__step { color: var(--color-neutral-700); }
.aics-studio-app .aics-canvas-footer { position: relative; display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; border-top: 1.5px solid var(--ed-line); background: var(--color-bg); padding: 11px; }
/* Les dimensions d'impression sont une indication, pas une commande : elles se
   rangent au bout de la barre au lieu de pousser la navigation sur deux lignes. */

.aics-canvas-footer__nav { border: 1.5px solid var(--ed-line); border-radius: 10px; background: none; padding: 7px 12px; color: var(--color-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.aics-canvas-footer__nav:hover:not(:disabled) { background: var(--color-neutral-100); }
.aics-canvas-footer__nav:disabled { opacity: .4; cursor: default; }
.aics-canvas-footer__label { font-size: 12.5px; font-weight: 700; }
.aics-canvas-footer__rule { width: 1.5px; height: 20px; background: var(--ed-line); }
.aics-canvas-footer__details { color: var(--color-neutral-600); font-size: 11px; }
.aics-studio-app .aics-page-canvas { --aics-page-border: inset 0 0 0 1.5px var(--color-neutral-400); border: 0; border-radius: 4px; box-shadow: var(--aics-page-border), var(--ed-shadow-page); }
.aics-studio-app .aics-book-spread { padding: 44px 16px 24px; gap: 4px; }
.aics-studio-app .aics-book-spread .aics-canvas-stage { width: calc(min(58vh, calc((100cqw - 36px) / 2), 560px) * var(--aics-page-zoom, 1)); }
.aics-studio-app .aics-book-spread .aics-page-frame { width: min(58vh, calc((100cqw - 36px) / 2), 560px); }
.aics-editor-guide { margin-bottom: 14px; border: 1.5px solid var(--ed-line); border-radius: 10px; background: #fff; padding: 12px; }
.aics-topbar__help { border: 1.5px solid var(--ed-line) !important; border-radius: 50% !important; font-weight: 800 !important; }
.aics-editor-guide h2 { margin: 0 0 10px; font-size: 13px; line-height: 1.25; }
.aics-editor-guide ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.aics-editor-guide li button { display: flex; width: 100%; align-items: start; gap: 9px; border: 0; border-radius: 6px; background: none; padding: 7px 3px; color: var(--color-text); text-align: left; cursor: pointer; }
.aics-editor-guide li button:hover:not(:disabled) { background: var(--sel-soft); }
.aics-editor-guide li button:disabled { opacity: .55; cursor: default; }
.aics-editor-guide li button > span:first-child { display: grid; width: 21px; height: 21px; flex: none; place-items: center; border-radius: 50%; background: var(--color-neutral-200); font-size: 11px; font-weight: 800; }
.aics-editor-guide li.is-done button > span:first-child { background: var(--sel-soft); color: var(--sel); }
.aics-editor-guide li button > span:last-child { display: grid; gap: 2px; min-width: 0; }
.aics-editor-guide strong { font-size: 11px; line-height: 1.25; }
.aics-editor-guide small { color: var(--color-neutral-600); font-size: 10px; line-height: 1.3; }
.aics-studio-prerequisite { display: flex; flex: none; align-items: center; gap: 8px; background: #fff2d5; padding: 7px 16px; color: #594310; font-size: 12px; }
.aics-studio-prerequisite a { margin-left: auto; color: inherit; font-weight: 800; }
.aics-scene-preview { border-left: 3px solid var(--sel); background: var(--sel-soft); margin: 0 0 12px; padding: 10px 12px; }
.aics-scene-preview strong { font-size: 12px; }
.aics-scene-preview p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; }
.aics-page-tasks { display: grid; gap: 6px; }
.aics-page-tasks__action { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ed-line); border-radius: 7px; background: #fff; padding: 9px; color: var(--color-text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.aics-page-tasks__action:hover { border-color: var(--sel); background: var(--sel-soft); }
.aics-spread-actions-menu { position: relative; margin-left: auto; }
.aics-spread-actions-menu summary { display: grid; width: 27px; height: 24px; place-items: center; border: 1px solid var(--ed-line); border-radius: 5px; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; list-style: none; }
.aics-spread-actions-menu summary::-webkit-details-marker { display: none; }
.aics-spread-actions-menu > div { position: absolute; z-index: 10; top: 26px; right: 0; display: grid; width: 180px; border: 1px solid var(--ed-line); border-radius: 7px; background: #fff; box-shadow: var(--ed-shadow-card); padding: 4px; }
.aics-spread-actions-menu button { border: 0; border-radius: 4px; background: none; padding: 7px; color: var(--color-text); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.aics-spread-actions-menu button:hover:not(:disabled) { background: var(--sel-soft); }
.aics-spread-actions-menu button:disabled { opacity: .45; cursor: default; }
.aics-page-layers { border-top: 1px solid var(--ed-line); padding: 10px 0; }
.aics-page-layers summary { font-size: 12px; font-weight: 700; cursor: pointer; }
.aics-page-layers > section { margin-top: 10px; }
.aics-image-block-placeholder button { pointer-events: auto; border: 1px solid currentColor; border-radius: 6px; background: rgba(255,255,255,.92); padding: 6px 9px; color: var(--sel); font: inherit; font-size: 11px; cursor: pointer; }
.aics-studio-app .aics-spread-page { border: 0; border-radius: 0; }
.aics-studio-app .aics-spread-page.is-active { border-color: transparent; }
.aics-studio-app .aics-spread-page__label { display: none; }
.aics-studio-app .aics-spread-page__options { border: 1.5px solid var(--ed-line); background: rgba(255, 253, 248, .96); color: var(--color-text); box-shadow: var(--ed-shadow-card); }
.aics-studio-app .aics-spread-page__options:hover { border-color: var(--sel); color: var(--sel); }

/* --- Inspecteur --- */
.aics-studio-app .aics-inspector { display: flex; width: 340px; flex: none; flex-direction: column; overflow: hidden; border-left: 2px solid var(--color-text); background: var(--color-bg); }
.aics-studio-app .aics-inspector.is-drawer,
.aics-studio-app .aics-inspector.is-sheet { position: fixed; z-index: 60; box-shadow: var(--aics-shadow-lg); }
.aics-studio-app .aics-inspector.is-drawer { top: 60px; right: 0; bottom: 0; width: 340px; max-width: 92vw; }
.aics-studio-app .aics-inspector.is-sheet { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 46vh; border-top: 2px solid var(--color-text); border-left: 0; }
.aics-studio-app .aics-inspector.is-drawer:not(.is-open),
.aics-studio-app .aics-inspector.is-sheet:not(.is-open) { display: none; }
.aics-inspector-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--color-text); padding: 10px 14px; font-size: 13px; font-weight: 800; }
.aics-inspector-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aics-inspector-head__close { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border: 0; background: none; color: var(--color-text); cursor: pointer; }
.aics-inspector-tabstrip { display: grid; flex: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0; border-bottom: 1.5px solid var(--ed-line); background: var(--color-bg); }
.aics-studio-app .aics-inspector-tabstrip button { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 12px 3px 10px; color: var(--color-neutral-600); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.aics-studio-app .aics-inspector-tabstrip button > svg { flex: none; }
.aics-studio-app .aics-inspector-tabstrip.has-four-tabs button > svg { display: none; }
.aics-studio-app .aics-inspector-tabstrip button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aics-studio-app .aics-inspector-tabstrip button:hover { background: var(--color-neutral-100); color: var(--color-text); }
.aics-studio-app .aics-inspector-tabstrip button:focus-visible { outline: 2px solid var(--sel); outline-offset: -3px; }
.aics-studio-app .aics-inspector-tabstrip button.is-active { border-bottom-color: var(--sel); background: var(--sel-soft); color: var(--sel); }
.aics-studio-app .aics-inspector-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; max-height: none; }
.aics-studio-app .aics-inspector-section { border: 0; padding: 0; margin: 0 0 18px; }
.aics-studio-app .aics-inspector-section:last-child { margin-bottom: 0; }
.aics-studio-app .aics-inspector-section > h2,
.aics-studio-app .aics-section-heading > h2 { margin: 0 0 10px; color: var(--color-text); font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.aics-studio-app .aics-inspector-section h3 { margin: 16px 0 10px; border-top: 0; padding-top: 0; color: var(--color-text); font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: -.01em; text-transform: none; }
/* Champ de texte riche : même gabarit que les autres champs de l'inspecteur. */
.aics-studio-app .aics-rich-text-field { margin: 0; }
.aics-studio-app .aics-rich-text-content { min-height: calc(3em + 24px); border: 1.5px solid var(--ed-line); border-radius: var(--radius-md); background: var(--aics-field-bg); padding: 10px 12px; }
.aics-studio-app .aics-rich-text-content:focus { border-color: var(--sel); outline: none; }
.aics-studio-app .aics-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.aics-studio-app .aics-section-heading > small { color: var(--color-neutral-600); font-size: 11px; font-weight: 700; }
.aics-studio-app .aics-section-heading > small.is-limit { color: var(--color-danger); }
/* Un filet interne de l'inspecteur : 1,5px neutre, respiration 14px. */
.aics-studio-app .aics-inspector-section + .aics-inspector-section { border-top: 1.5px solid var(--ed-line); padding-top: 14px; }
/* Une section qui suit le groupe désactivable d'un bloc (fieldset) garde
   le même filet qu'entre deux sections voisines. */
.aics-studio-app .aics-block-inspector > .aics-content-fields + .aics-inspector-section { border-top: 1.5px solid var(--ed-line); padding-top: 14px; }
/* « Réglages avancés » / « Organiser… » : les sections du Studio n'ont pas de
   marge intérieure (le corps du panneau la porte) ; le repli ne doit pas en
   ajouter une, sinon son titre et son contenu partent en retrait. */
.aics-studio-app .aics-cover-advanced { padding: 0; margin: 0 0 18px; }
.aics-studio-app .aics-cover-advanced > .aics-content-fields > .aics-inspector-section:first-child,
.aics-studio-app .aics-cover-advanced > .aics-inspector-section:first-of-type { border-top: 0; padding-top: 4px; }

/* --- Contrôles communs de l'inspecteur : mêmes formes que la maquette --- */
.aics-studio-app .aics-field { display: grid; gap: 6px; margin: 0 0 14px; }
.aics-studio-app .aics-field > span { color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
.aics-studio-app .aics-field input:not([type="color"]):not([type="range"]),
.aics-studio-app .aics-field textarea,
.aics-studio-app .aics-field select,
.aics-studio-app .aics-custom-value,
.aics-studio-app .aics-inline-actions select { border: 1.5px solid var(--ed-line); border-radius: var(--radius-md); background-color: var(--aics-field-bg); padding: 9px 12px; color: var(--color-text); font-size: 13.5px; }
.aics-studio-app .aics-field input[type="color"] { border: 1.5px solid var(--ed-line); border-radius: 8px; background: var(--aics-field-bg); }
/* Hauteur commune des champs d'une ligne : un <select> ignore `line-height`
   (Chrome prend l'interligne naturel de la police) et sortait plus haut que
   le champ texte voisin. */
.aics-studio-app .aics-field input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.aics-studio-app .aics-field select { box-sizing: border-box; height: 42px; }
.aics-studio-app .aics-field input:focus,
.aics-studio-app .aics-field textarea:focus,
.aics-studio-app .aics-field select:focus { border-color: var(--sel); outline: none; }
.aics-studio-app .aics-button { min-height: 40px; border: 1.5px solid var(--ed-line); border-radius: 10px; background: var(--color-bg); padding: 0 16px; color: var(--color-text); font-size: 13px; font-weight: 700; transition: border-color .15s, background .15s; }
.aics-studio-app .aics-button:not(.aics-button--primary):not(.aics-button--order):hover { border-color: var(--color-neutral-400); background: var(--color-neutral-100); color: var(--color-text); }
.aics-studio-app .aics-button--primary,
.aics-studio-app .aics-button--order { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.aics-studio-app .aics-segment { display: flex; width: 100%; flex-wrap: nowrap; gap: 0; overflow: hidden; border: 1.5px solid var(--ed-line); border-radius: var(--radius-md); background: var(--color-bg); }
.aics-studio-app .aics-segment button { flex: 1 1 0; justify-content: center; border: 0; border-radius: 0 !important; background: transparent; appearance: none; padding: 9px 8px; color: var(--color-neutral-600); font-size: 12.5px; font-weight: 700; transition: background .15s, color .15s; }
.aics-studio-app .aics-segment button + button { border-left: 1px solid var(--color-divider); }
.aics-studio-app .aics-segment button:hover { background: var(--color-neutral-100); color: var(--color-text); }
.aics-studio-app .aics-segment button.is-active,
.aics-studio-app .aics-segment button[aria-pressed="true"],
.aics-studio-app .aics-segment button[aria-current="true"] { background: var(--sel-soft); color: var(--sel); }
.aics-studio-app .aics-segment button:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.aics-studio-app .aics-image-subtabs { overflow: hidden; border: 2px solid var(--color-text); border-radius: 10px; }
.aics-studio-app .aics-image-subtabs button.is-active { background: var(--color-text); color: #fff; }
.aics-studio-app .aics-character-chips button,
.aics-studio-app .aics-shape-picker button,
.aics-studio-app .aics-text-presets button,
.aics-studio-app .aics-layout-list button,
.aics-studio-app .aics-component-chips button,
.aics-studio-app .aics-horizontal-picker__items > button,
.aics-studio-app .aics-import-button,
.aics-studio-app .aics-preset-card { border-radius: 10px; }
.aics-studio-app .aics-character-chips button.is-selected,
.aics-studio-app .aics-shape-picker button.is-selected,
.aics-studio-app .aics-layout-list button.is-selected { border-color: var(--sel); background: var(--sel-soft); }
.aics-studio-app .aics-context-toolbar,
.aics-studio-app .aics-overlay-warning,
.aics-studio-app .aics-current-image,
.aics-studio-app .aics-inline-warning,
.aics-studio-app .aics-style-list > button,
.aics-studio-app .aics-style-swatch,
.aics-studio-app .aics-mobile-side-switch button,
.aics-studio-app .aics-original-badge,
.aics-studio-app .aics-personalized-badge,
.aics-studio-app .aics-image-pan-overlay button,
.aics-studio-app .aics-overlay-warning__actions button,
.aics-studio-app .aics-story-variable-fields { border-radius: 10px; }
.aics-studio-app .aics-mobile-side-switch { display: flex; gap: 6px; }
.aics-studio-app .aics-mobile-side-switch button { border: 1.5px solid var(--ed-line); background: none; padding: 6px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.aics-studio-app .aics-mobile-side-switch button.is-active { border-color: var(--sel); background: var(--sel-soft); color: var(--sel); }

/* --- Agencement interne des onglets de bloc (texte / image) ----------------
   La maquette range les réglages par paires : X/Y, Largeur/Hauteur,
   Taille/Graisse, Interligne/Couleur, les deux points focaux. `.aics-field-duo`
   est cette grille ; les blocs secondaires d'un onglet sont séparés par un
   filet, et les actions d'écriture assistée forment une grille de deux. */
.aics-studio-app .aics-field-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 14px; }
/* Dans l'inspecteur, `.aics-inspector .aics-field` (marge basse de 14 px) est
   plus spécifique : seul le dernier champ d'une paire la perdait, et la
   ligne étirait l'autre — la Graisse tombait 7 px sous la Taille. */
.aics-studio-app .aics-field-duo > .aics-field,
.aics-studio-app .aics-field-duo > .aics-range,
.aics-studio-app .aics-inspector .aics-field-duo > .aics-field,
.aics-studio-app .aics-inspector .aics-field-duo > .aics-range { margin-bottom: 0; }
.aics-studio-app .aics-field-duo { align-items: start; }
.aics-studio-app .aics-field-duo.aics-text-style-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: end; }
.aics-studio-app .aics-text-style-row > .aics-field { min-width: 0; }
.aics-studio-app .aics-inspector-block { margin-top: 16px; border-top: 1.5px solid var(--ed-line); padding-top: 14px; }
.aics-studio-app .aics-inspector-block > h3:first-child { margin-top: 0; }
.aics-studio-app .aics-button--block { display: flex; width: 100%; justify-content: center; }
.aics-studio-app .aics-inspector-section > .aics-button--block + .aics-button--block { margin-top: 8px; }
.aics-studio-app .aics-image-layout-actions { display: grid; gap: 10px; margin: 14px 0 16px; }
.aics-studio-app .aics-image-layout-actions .aics-button { margin: 0; }
/* Compteur de caractères : sous le champ, aligné à ses deux extrémités. */
.aics-char-count { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 16px; color: var(--color-neutral-600); font-size: 11px; }
.aics-char-count.is-limit { color: var(--color-danger); font-weight: 700; }
/* « Écrire avec l'IA » : une action par bouton, avec son coût sous le libellé. */
/* Barre de mise en forme d'une sélection : compacte, posée au-dessus du champ. */
/* Mise en forme d'une sélection : les contrôles de l'onglet Style, tels quels. */
.aics-studio-app .aics-rich-text-toolbar { display: block; margin-top: 8px; border: 1.5px solid var(--ed-line); background: var(--color-neutral-100); padding: 10px 12px 12px; }
.aics-studio-app .aics-rich-text-toolbar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.aics-studio-app .aics-rich-text-toolbar__head strong { font-size: 12px; }
.aics-studio-app .aics-rich-text-toolbar .aics-field { margin: 8px 0 0; }
.aics-studio-app .aics-rich-text-hint { margin: 6px 0 0; color: var(--color-neutral-600); font-size: 11px; line-height: 1.45; }
.aics-studio-app .aics-field--text > .aics-rich-text-field { margin-top: 0; }
.aics-font-select { position: relative; }
.aics-font-select__trigger { display: grid; width: 100%; min-height: 42px; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 10px; border: 1.5px solid var(--ed-line); border-radius: var(--radius-md); background: var(--aics-field-bg); padding: 7px 12px; color: var(--color-text); font: inherit; cursor: pointer; text-align: left; }
.aics-font-select__trigger:hover:not(:disabled) { border-color: var(--color-neutral-400); background: var(--aics-field-bg); }
.aics-font-select__trigger:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.aics-font-select.is-open .aics-font-select__trigger { border-color: var(--sel); }
.aics-font-select__name { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.aics-font-select__menu { position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 4px; max-height: 286px; overflow: auto; border: 1.5px solid var(--ed-line); border-radius: 12px; background: var(--aics-field-bg); box-shadow: var(--aics-shadow-lg); padding: 6px; }
.aics-font-select__menu button { display: grid; min-height: 42px; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 10px; border: 0; border-radius: 8px; background: transparent; padding: 5px 10px; color: var(--color-text); font: inherit; cursor: pointer; text-align: left; }
.aics-font-select__menu button:hover,
.aics-font-select__menu button.is-active { background: var(--sel-soft); }
.aics-font-select__menu .aics-font-select__name { color: var(--color-text); font-size: 18px; }
/* Collection complète : la liste s'allonge, on la range par familles d'usage. */
.aics-font-select__menu:has(.aics-font-select__group) { max-height: 380px; }
.aics-font-select__search { position: sticky; z-index: 1; top: -6px; width: 100%; min-height: 36px; border: 1.5px solid var(--ed-line); background: var(--aics-field-bg); padding: 6px 10px; font: inherit; font-size: 13px; }
.aics-font-select__group { display: grid; gap: 2px; }
.aics-font-select__group-label { padding: 8px 10px 2px; color: var(--color-neutral-500, #6b6b6b); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.aics-font-select__empty { margin: 6px 10px; color: var(--color-neutral-500, #6b6b6b); font-size: 12.5px; }
.aics-frame-panel { display: grid; gap: 12px; }
.aics-frame-panel__group { display: grid; gap: 10px; border: 1.5px solid var(--ed-line); border-radius: 12px; background: var(--aics-field-bg); padding: 12px; }
.aics-frame-panel__group > strong { color: var(--color-text); font-size: 13px; font-weight: 800; }
.aics-frame-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--color-text); font-size: 13px; font-weight: 800; }
.aics-frame-panel input[type="color"] { width: 44px; height: 34px; border: 1.5px solid var(--ed-line); border-radius: 8px; background: var(--color-bg); padding: 3px; cursor: pointer; }
.aics-frame-panel .aics-field { margin-bottom: 0; }
.aics-frame-panel .aics-range { margin: 0; }
.aics-border-width-segment button { display: grid; gap: 5px; align-content: center; }
.aics-border-width-segment__line { display: block; width: min(42px, 80%); height: 0; justify-self: center; border-top: 0 solid var(--color-text); }
.aics-border-width-segment__line.is-1 { border-top-width: 1px; }
.aics-border-width-segment__line.is-2 { border-top-width: 2px; }
.aics-border-width-segment__line.is-4 { border-top-width: 4px; }
.aics-border-style-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aics-border-style-picker button { display: grid; min-height: 64px; align-content: center; gap: 8px; border: 1.5px solid var(--ed-line); border-radius: 10px; background: var(--color-bg); padding: 8px; color: var(--color-neutral-700); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; }
.aics-border-style-picker button:hover { border-color: var(--color-neutral-400); color: var(--color-text); }
.aics-border-style-picker button.is-active { border-color: var(--sel); background: var(--sel-soft); color: var(--sel); }
.aics-border-style-picker__preview { display: block; width: 100%; height: 18px; border-radius: 6px; background: linear-gradient(var(--color-text), var(--color-text)) center / 100% 3px no-repeat; }
.aics-border-style-picker__preview.is-dashed { background: repeating-linear-gradient(to right, var(--color-text) 0 10px, transparent 10px 16px) center / 100% 3px no-repeat; }
.aics-border-style-picker__preview.is-none { background: linear-gradient(to right, var(--color-neutral-400), var(--color-neutral-400)) center / 100% 1.5px no-repeat; opacity: .65; }
/* L'historique et la galerie partagent leurs cartes et leurs actions au survol.
   Le retrait sous la liste l'éloigne du filet suivant. */
.aics-studio-app .aics-image-history { padding-block: 18px; }
.aics-studio-app .aics-active-image__preview { border-color: var(--ed-line); background: var(--color-neutral-100); }
.aics-studio-app .aics-image-history__hint { color: var(--color-neutral-600); }
.aics-studio-app .aics-image-history__item { border-color: var(--ed-line); border-radius: 10px; background: var(--color-bg); }
.aics-studio-app .aics-image-history__item.is-selected { border-color: var(--sel); background: var(--sel-soft); }
.aics-studio-app .aics-image-history__visual { background: var(--color-neutral-100); }
.aics-studio-app .aics-image-history__info strong { color: var(--color-text); font-family: var(--font-heading); }
.aics-studio-app .aics-image-history__info time,
.aics-studio-app .aics-image-history__detail { color: var(--color-neutral-600); }
.aics-studio-app .aics-image-history__actions { border-top-color: var(--ed-line); }
.aics-studio-app .aics-image-history__actions button { border-color: var(--ed-line); border-radius: 8px; color: var(--color-text); }
.aics-studio-app .aics-image-history__actions button.is-primary { border-color: var(--sel); color: var(--sel); }
.aics-studio-app .aics-image-history__actions button:hover { background: var(--sel-soft); }
.aics-studio-app .aics-image-history__actions button:focus-visible { outline-color: var(--sel); }
.aics-studio-app .aics-image-card-grid .aics-image-history__info strong,
.aics-studio-app .aics-image-card-grid .aics-image-history__info time,
.aics-studio-app .aics-image-card-grid .aics-image-history__detail { color: #fff; }

/* --- Icônes au trait (Lucide) à la place des dashicons ---------------------
   Icon() rend désormais un <svg> quand le nom est cartographié. Les tailles
   étaient posées sur `.dashicons` (width/height/font-size) : elles sont
   reprises ici pour le svg, contexte par contexte, afin qu'aucune icône ne
   change de gabarit en changeant de famille. */
.aics-studio-app svg { flex: none; }
.aics-studio-app .aics-topbar__icon > svg { width: 16px; height: 16px; overflow: visible; }
.aics-studio-app .aics-icon-button > svg,
.aics-studio-app .aics-icon-link > svg,
.aics-studio-app .aics-button > svg { width: 17px; height: 17px; }
.aics-studio-app .aics-context-toolbar--image .aics-icon-button > svg { width: 20px; height: 20px; }
.aics-studio-app .aics-inspector-body svg { vertical-align: middle; }
.aics-studio-app .aics-dropzone > svg { width: 30px; height: 30px; color: var(--color-accent); }
.aics-studio-app .aics-image-pan-overlay > svg { width: 24px; height: 24px; }
.aics-studio-app .aics-canvas-placeholder > svg { width: 34px; height: 34px; }
.aics-studio-app .aics-image-block-placeholder svg { width: 28px; height: 28px; }
.aics-studio-app .aics-content-type-card > svg { width: 22px; height: 22px; }
.aics-studio-app .aics-shape-picker button > svg { width: 18px; height: 18px; }
.aics-studio-app .aics-overlay-warning svg { width: 13px; height: 13px; }
.aics-studio-app .aics-page-item__tools svg,
.aics-studio-app .aics-spread-row__tools svg,
.aics-studio-app .aics-zone-chip svg,
.aics-studio-app .aics-zone-edit svg,
.aics-studio-app .aics-zone-add svg { width: 14px; height: 14px; }
.aics-studio-app .aics-slot__hint svg { width: 14px; height: 14px; }
.aics-studio-app .aics-character-link svg { margin-left: 8px; }
.aics-studio-app .aics-page-item__preview svg,
.aics-studio-app .aics-cover-nav-card__thumb svg { width: 15px; height: 15px; }
.aics-studio-app .aics-mini-slot svg { width: 12px; height: 12px; }
.aics-studio-app .aics-book-actions__menu > button > svg,
.aics-studio-app .aics-topbar__menu-panel button > svg { width: 15px; height: 15px; }

/* --- Boîtes de dialogue de l'éditeur (confirmation, génération, sortie) --- */
.aics-studio-app .sp-modal-overlay { z-index: 400; background: rgba(32, 30, 29, .55); }
.aics-studio-app .sp-modal { border: 2px solid var(--color-text); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--aics-shadow-lg); padding: 20px; }
.aics-studio-app .sp-modal h2 { margin: 0 0 10px; padding-right: 40px; font-family: var(--font-heading); font-size: 17px; font-weight: 800; }
.aics-studio-app .sp-modal h3 { margin: 14px 0 6px; font-size: 13px; font-weight: 800; }
.aics-studio-app .sp-modal p { margin: 0 0 14px; color: var(--color-neutral-800); font-size: 14px; line-height: 1.5; }
.aics-studio-app .sp-modal .aics-help { color: var(--color-neutral-600); font-size: 12.5px; }
.aics-studio-app .sp-modal .sp-wizard-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0; border-top: 0; padding-top: 0; }
/* Le rythme de l'inspecteur ajoute 10 px au second bouton voisin : dans
   cette confirmation, les deux actions doivent partager la même ligne. */
.aics-studio-app .sp-modal.aics-generation-confirm .sp-wizard-actions { align-items: stretch; }
.aics-studio-app .sp-modal.aics-generation-confirm .sp-wizard-actions > .aics-button + .aics-button { margin-top: 0; }
.aics-studio-app .sp-modal.aics-image-lightbox { --aics-lightbox-chrome: 44px; } /* 2 × (20 px de marge + 2 px de bordure) */
.aics-studio-app .sp-modal__close { top: 10px; right: 10px; width: 32px; height: 32px; border-width: 2px; border-radius: 8px; }
.aics-dialog-lines { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 14px; font-size: 13.5px; }
.aics-dialog-lines dt { color: var(--color-neutral-600); font-weight: 700; }
.aics-dialog-lines dd { margin: 0; }

/* --- Aperçu plein écran --- */
.aics-studio-app ~ .aics-preview-dialog,
.aics-preview-dialog { position: fixed; z-index: 500; display: flex; inset: 0; flex-direction: column; background: var(--color-neutral-800); }
.aics-preview-dialog header,
.aics-preview-dialog footer { flex: none; background: var(--color-text); color: #fff; }
.aics-preview-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; }
.aics-preview-dialog header strong { color: #fff; font-size: 13px; font-weight: 700; }
.aics-preview-dialog__close { border: 2px solid #fff; border-radius: 8px; background: none; padding: 8px 12px; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.aics-preview-dialog__body { display: grid; min-width: 0; min-height: 0; flex: 1 1 auto; place-items: center; padding: 24px; }
.aics-preview-dialog .aics-preview-stage { display: flex; width: min(100%, 1000px); height: 100%; min-width: 0; min-height: 0; align-items: center; justify-content: center; }
.aics-preview-dialog footer { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px; color: #fff; font-size: 13px; font-weight: 700; }
.aics-preview-dialog__nav { border: 0; background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.aics-preview-dialog__nav:disabled { opacity: .35; cursor: default; }
.aics-preview-dialog__counter { min-width: 62px; color: #fff; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.aics-preview-dialog__edit { margin-left: 12px; border: 2px solid var(--color-accent); border-radius: 8px; background: var(--color-accent); padding: 8px 12px; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.aics-preview-dialog .aics-server-preview { max-width: 100%; max-height: 100%; box-shadow: var(--aics-shadow-lg); }

/* --- Panneau « Vérification prépresse » (tiroir latéral) --- */
.aics-prepress-overlay { position: fixed; z-index: 400; display: flex; inset: 0; justify-content: flex-end; background: rgba(32, 30, 29, .55); }
.aics-prepress { width: 420px; max-width: 100%; height: 100%; overflow-y: auto; border-left: 3px solid var(--color-text); background: var(--color-bg); padding: 22px; }
.aics-prepress__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.aics-prepress__title { font-family: var(--font-heading); font-size: 20px; font-weight: 900; }
.aics-prepress__close { border: 0; background: none; padding: 4px; color: var(--color-text); font-size: 20px; line-height: 1; cursor: pointer; }
.aics-prepress__summary { margin: 0 0 20px; color: var(--color-neutral-700); font-size: 13px; }
.aics-prepress__section { margin: 18px 0 8px; color: var(--color-neutral-800); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.aics-prepress__section:first-of-type { margin-top: 0; }
.aics-prepress__section.is-error { color: var(--color-danger); }
.aics-prepress__item { margin-bottom: 10px; border: 2px solid var(--color-neutral-400); padding: 12px; }
.aics-prepress__item.is-error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.aics-prepress__item-title { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.aics-prepress__item.is-error .aics-prepress__item-title { color: var(--color-neutral-900); }
.aics-prepress__item-help { margin: 0 0 10px; color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.5; }
.aics-prepress__item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.aics-prepress__next { width: 100%; margin: 0 0 18px; }
.aics-prepress__fix { border: 2px solid var(--color-text); border-radius: 8px; background: none; padding: 7px 10px; color: var(--color-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.aics-prepress__fix.is-error { border-color: var(--color-danger); background: var(--color-danger); color: #fff; }
.aics-prepress__ok { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--color-neutral-700); font-size: 12.5px; }

@media (max-width: 1279px) {
  .aics-studio-app .aics-topbar__name { width: auto; flex: 1 1 70px; }
}
@media (max-width: 639px) {
  .aics-studio-app .aics-topbar { height: auto; min-height: 60px; flex-wrap: wrap; padding-block: 5px; }
  .aics-studio-app .aics-topbar__meta-format { display: none; }
  .aics-studio-app .aics-topbar__mobile-actions { padding: 5px 8px; gap: 6px; }
  .aics-studio-app .aics-topbar__mobile-actions .aics-topbar__outline { display: none; }
  /* Sous 640 px, « Commander » vit dans la rangée sous la barre, à la hauteur
     où la notification flottait (top: 68px) : « Le livre est prêt pour la
     commande » couvrait le bouton et interceptait le clic (recette du
     2026-10-16). La notification prend donc sa place dans le flux. */
  .aics-studio-app .aics-studio-notice { position: relative; z-index: auto; top: auto; left: auto; max-width: none; flex: none; border-width: 0 0 1.5px; border-radius: 0; box-shadow: none; transform: none; }
  .aics-studio-app .aics-canvas-viewport { padding: 8px; }
  .aics-studio-app .aics-canvas-viewport > .aics-book-spread { width: 100%; min-width: 0; padding: 16px 0; }
  .aics-studio-app .aics-book-spread .aics-canvas-stage { width: min(calc(100vw - 24px), 100%); }
  .aics-studio-app .aics-book-spread .aics-page-frame { width: 100%; }
  .aics-studio-app .aics-canvas-viewport > .aics-canvas-stage .aics-page-frame { width: min(calc(100vw - 24px), 100%); }
  .aics-studio-app .aics-topbar__logo { display: none; }
  .aics-studio-app .aics-topbar__name { min-width: 70px; }
  .aics-studio-app .aics-topbar__context { gap: 4px; margin-right: 0; padding-right: 0; border-right: 0; }
  .aics-price-popover__kind { display: none; }
  .aics-price-popover__trigger { padding-inline: 3px; }
  .aics-price-popover__panel { position: fixed; top: 154px; right: 10px; width: min(340px, calc(100vw - 20px)); }
}

/* Hero de l'accueil. La maquette abandonne le bloc 55/45 pleine hauteur bordé
   d'un filet vertical : c'est désormais une grille auto-fit (les deux colonnes
   passent l'une sous l'autre dès que 340px ne tiennent plus, sans media query)
   avec, à droite, une mosaïque de trois aplats arrondis — plus l'ancien décor
   de posters inclinés en rotation. */
.sp-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: stretch;
  column-gap: 40px;
  min-height: calc(100vh - var(--sp-header-height));
  min-height: calc(100dvh - var(--sp-header-height));
  padding-inline: max(var(--sp-gutter), (100% - var(--sp-max)) / 2);
}
.sp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 48px 0; }
.sp-overline,
.aics-kicker { margin: 0 0 18px; color: var(--sp-red); font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.sp-hero h1,
.sp-wizard h1,
.sp-account h1 {
  margin: 0 0 24px;
  color: var(--sp-ink);
  font-family: var(--sp-font-heading);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .94;
  text-wrap: balance;
}
.sp-section h2 {
  margin: 0;
  color: var(--sp-ink);
  font-family: var(--sp-font-heading);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.sp-hero h1 em,
.sp-section h2 em { color: var(--sp-red); font-style: normal; }
.sp-lead { max-width: 46ch; margin: 0 0 32px; color: var(--color-neutral-800); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; text-wrap: pretty; }
.sp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.sp-text-link,
.sp-card-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 2px solid currentColor; padding: 7px 0; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.sp-text-link span,
.sp-card-link span { color: var(--sp-red); font-size: 18px; }
.sp-hero__copy > small { color: var(--aics-muted); font-size: 11px; }

/* Cadre d'image : un ratio et un aplat, rien d'autre. Il remplace partout sur la
   vitrine les maquettes de livre en 3D, qui répétaient le même dessin décoratif
   d'une section à l'autre. La vraie image, quand elle existe, remplit le cadre. */
.sp-frame { position: relative; width: 100%; min-width: 0; border-radius: var(--radius-md); background: var(--color-neutral-200); overflow: hidden; }
.sp-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-frame--teal { background: var(--c-teal-soft); }
.sp-frame--amber { background: var(--c-amber-soft); }
.sp-frame--violet { background: var(--c-violet-soft); }

/* Mosaïque du hero : 2 colonnes, 1re rangée pleine largeur et plus haute
   (1.4fr / 1fr), coins à 18px, chaque case sur une des trois couleurs
   secondaires — reprise du bloc annoté « hero » de Accueil.dc.html. */
.sp-hero__art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1.4fr 1fr;
  gap: 2px;
  align-self: center;
  width: 100%;
  min-width: 0;
  min-height: 320px;
  aspect-ratio: 4 / 3.4;
  padding: 48px 0;
  overflow: hidden;
}
.sp-hero__tile { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-neutral-200); }
.sp-hero__tile:first-child { grid-column: span 2; }
.sp-hero__tile--amber { background: var(--c-amber-soft); }
.sp-hero__tile--teal { background: var(--c-teal-soft); }
.sp-hero__tile--violet { background: var(--c-violet-soft); }
.sp-hero__tile img { width: 100%; height: 100%; object-fit: cover; }

/* Emplacement de visuel produit : cadre plat, libellé centré. Le dessin 3D
   (perspective, rotateY, ombre portée, variantes is-poster/is-frame) qui vivait
   ici a été retiré en même temps que le composant JS : il répétait le même
   objet décoratif d'un écran à l'autre et, dans un conteneur large et bas, son
   texte — dimensionné en cqw du conteneur alors que l'objet est contraint par
   sa hauteur — débordait du livre. */
.sp-product-visual { position: relative; display: grid; min-height: 0; place-items: center; }

/* Rythme de section de la variante Chaleureuse.
   Les maquettes répètent sur chaque écran le même couple :
     <section style="border-bottom: 2px solid …">          → pleine largeur, fond teinté
       <div style="max-width: 1360px; margin: 0 auto; padding: 64px 20px">
   Le markup React n'a pas ce div interne : le `padding-inline` calculé ci-dessous
   produit exactement le même résultat (fond d'un bord à l'autre, contenu plafonné
   à --sp-max) sans ajouter un wrapper à chaque section. L'ancien
   `clamp(24px, 5vw, 78px)` laissait au contraire le contenu s'étaler sur toute la
   largeur de l'écran, ce qui ne correspond à aucune maquette. */
.sp-shell,
.sp-section,
.sp-rail-section,
.sp-cta-banner,
.sp-split {
  padding-inline: max(var(--sp-gutter), (100% - var(--sp-max)) / 2);
}
.sp-section { padding-block: clamp(48px, 6vw, 64px); }

/* Filets de section : le divider crème au lieu de l'encre pleine —
   `main > section { border-bottom-color: var(--color-divider) !important }`
   dans les trois maquettes. */

/* Sections teintées : c'est ce qui donne l'alternance crème / teal / ambre /
   violet / corail de l'accueil. Nouveau dans cette variante. */
.sp-section--teal { background: var(--c-teal-soft); }
.sp-section--amber { background: var(--c-amber-soft); }
.sp-section--violet { background: var(--c-violet-soft); }
.sp-section--accent { background: var(--color-accent); color: #fff; }
.sp-section--accent h2,
.sp-section--accent h3,
.sp-section--accent p { color: #fff; }
.sp-section--accent .sp-lead,
.sp-section--accent .sp-muted { color: rgba(255, 255, 255, .92); }
.sp-section--accent .aics-button--primary { border-color: #fff; background: #fff; color: var(--color-accent-700); }
.sp-section--accent .aics-button--primary:hover { border-color: var(--color-accent-900); background: var(--color-accent-900); color: #fff; }

/* En-tête de section : titre à gauche, lien « voir tout » aligné en bas à droite. */
.sp-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.sp-section__head h2 { margin: 0; }
.sp-section__intro { max-width: 60ch; margin: 0 0 40px; color: var(--color-neutral-700); font-size: 16px; line-height: 1.5; }
/* CTA centré en pied de section (« Trouver une idée », « Essayer avec mes photos »). */
.sp-section__cta { display: flex; width: max-content; margin: 44px auto 0; }
.sp-section h2 { margin: 0 0 36px; }
/* Quand un chapô suit le titre, la maquette resserre le titre (8px) et reporte
   la respiration sur le chapô (40px) : sans cela on cumule deux marges. */
.sp-section h2:has(+ .sp-section__intro) { margin-bottom: 8px; }
.sp-family-grid { display: grid; border-top: 1px solid var(--color-divider); }
.sp-family-card { position: relative; display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: center; gap: 32px; border: 0; border-bottom: 2px solid var(--color-divider); background: transparent; color: var(--color-text); padding: 28px 0; text-align: left; }
button.sp-family-card { font: inherit; cursor: pointer; }
.sp-family-card.is-selected { box-shadow: inset 0 0 0 3px var(--color-accent); }
.sp-family-card__number { position: absolute; z-index: 2; top: 40px; left: 12px; display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--radius-md); background: var(--color-text); color: #fff; font-size: 11px; font-weight: 800; }
.sp-family-card__visual { align-self: center; }
.sp-family-card__body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 0; }
.sp-family-card__body .sp-overline { margin-bottom: 10px; }
.sp-family-card h3 { margin: 0 0 12px; font-family: var(--sp-font-heading); font-size: clamp(24px, 2.4vw, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.sp-family-card p:not(.sp-overline) { max-width: 52ch; margin: 0 0 18px; color: var(--color-neutral-800); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.sp-family-card dl { width: 100%; margin: 0 0 18px; border-top: 2px solid var(--color-divider); }
.sp-family-card dl div { display: flex; justify-content: space-between; border-bottom: 2px solid var(--color-divider); padding: 8px 0; font-size: 13px; }
.sp-family-card dt { color: var(--aics-muted); text-transform: uppercase; }
.sp-family-card dd { margin: 0; font-weight: 700; text-align: right; }
.sp-family-card .sp-card-link { width: auto; margin-top: 0; }

.sp-process { background: var(--color-bg); color: var(--color-text); }
.sp-process .sp-overline { color: var(--color-accent-700); }
.sp-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin: 0 0 28px; }
.sp-process-grid article { border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); padding: 24px 20px; }
.sp-process-grid article > span { display: block; margin-bottom: 10px; color: var(--color-accent); font-family: var(--sp-font-heading); font-size: 34px; font-weight: 900; line-height: 1; }
.sp-process-grid h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sp-process-grid p { margin: 0; color: var(--color-neutral-800); font-size: 15px; line-height: 1.55; }

.sp-loading-block { display: flex; min-height: 160px; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--color-divider); background: #fff; color: var(--aics-muted); }

/* Catalogue wizard and account */
.sp-wizard-header { position: sticky; z-index: 50; top: 0; display: flex; min-height: 60px; align-items: center; gap: 16px; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); padding: 10px var(--sp-gutter); }
.sp-wizard-header > a:last-child { margin-left: auto; font-size: 13px; font-weight: 700; text-decoration: none; }
/* Square 26×26 badges, 2px border — Studio.dc.html's stepper uses squares, not
   circles (border-radius: 50% didn't match). */

.aics-shell.sp-wizard,
.aics-shell.sp-account { width: 100%; max-width: var(--sp-max); min-height: calc(100vh - 60px); margin: auto; background: var(--color-bg); padding: clamp(32px, 4vw, 48px) var(--sp-gutter); font-family: var(--sp-font-body); }
.sp-wizard-section { max-width: 1240px; margin: auto; }
.sp-wizard h1,
.sp-account h1 { max-width: 950px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; }
.sp-wizard-intro { max-width: 62ch; margin: 0 0 32px; color: var(--color-neutral-700); font-size: 15px; line-height: 1.55; }
.sp-wizard .sp-family-grid { margin-top: 44px; }
.sp-wizard .sp-family-card > .sp-product-visual { min-height: 280px; }
.sp-wizard .sp-family-card__body { min-height: 235px; }
.sp-configurator { display: grid; grid-template-columns: minmax(320px, 45%) minmax(400px, 55%); border: 1px solid var(--color-divider); }
.sp-configurator__visual { display: grid; min-height: 650px; grid-template-rows: 1fr auto; border-right: 1px solid var(--color-divider); background: var(--color-neutral-200); padding: 30px; }
.sp-configurator__visual .sp-product-visual { min-height: 500px; }
.sp-configurator__visual > p { margin: 0; border-top: 1px solid var(--color-neutral-500); padding-top: 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.sp-configurator__form { padding: clamp(30px, 4vw, 58px); }
.sp-configurator h1 { font-size: clamp(42px, 4.5vw, 64px); }
.sp-configurator fieldset { margin: 30px 0 0; border: 0; border-top: 1px solid var(--color-divider); padding: 18px 0 0; }
.sp-configurator legend { padding: 0 15px 0 0; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.sp-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-option-grid button,
.sp-template-grid button { border: 1px solid var(--color-neutral-400); border-radius: var(--aics-radius); background: #fff; color: var(--sp-ink); padding: 14px; font: inherit; text-align: left; cursor: pointer; }
.sp-option-grid button { display: grid; min-height: 66px; align-content: center; gap: 4px; }
.sp-option-grid button strong { font-size: 13px; }
.sp-option-grid button small { color: var(--aics-muted); }
.sp-option-grid button > span { color: var(--sp-red); font-size: 11px; font-weight: 700; }
.sp-option-grid button.is-selected,
.sp-template-grid button.is-selected { border: 2px solid var(--sp-red); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--sp-red); }
.sp-option-grid button.is-disabled { border-style: dashed; background: var(--aics-surface-soft); color: var(--aics-muted); cursor: not-allowed; }
.sp-option-note { margin: 8px 0 0; color: var(--aics-muted); font-size: 11px; font-style: italic; }
.sp-page-count { max-width: 230px; margin-top: 26px; }
.sp-price-note { background: var(--color-neutral-100); margin: 26px 0 0; padding: 14px; color: var(--aics-muted); font-size: 12px; line-height: 1.5; }
.sp-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--color-divider); }
.sp-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-template-grid button { display: flex; min-height: 330px; flex-direction: column; gap: 12px; padding: 12px; }
.sp-template-grid button strong { font-size: 20px; letter-spacing: -.03em; }
.sp-template-grid button small { color: var(--aics-muted); line-height: 1.45; }
.sp-template-art { position: relative; display: grid; width: 100%; min-height: 215px; place-items: center; background: var(--color-neutral-200); overflow: hidden; }
.sp-template-art::before { width: 55%; aspect-ratio: .72; background: var(--color-neutral-900); box-shadow: 8px 9px 0 var(--color-neutral-400); content: ""; transform: rotate(-4deg); }
.sp-template-art i { position: absolute; width: 20%; height: 5px; background: var(--color-accent); }
.sp-template-art i:nth-child(1) { top: 38%; }
.sp-template-art i:nth-child(2) { top: 48%; width: 29%; background: #fff; }
.sp-template-art i:nth-child(3) { top: 57%; width: 16%; background: #fff; }
.sp-template-art.is-2 { background: var(--color-neutral-300); }
.sp-template-art.is-2::before { background: var(--color-neutral-100); transform: rotate(5deg); }
.sp-template-art.is-2 i { background: var(--sp-red); }
.sp-template-art.is-3::before { background: linear-gradient(145deg, var(--color-accent) 50%, var(--color-neutral-900) 50%); }
.sp-template-art.is-4::before { background: var(--color-neutral-500); transform: none; }
.sp-personalize { display: grid; grid-template-columns: minmax(250px, 40%) minmax(420px, 60%); gap: clamp(40px, 7vw, 100px); }
.sp-personalize__form { border-top: 1px solid var(--color-divider); padding-top: 25px; }
.sp-personalize__form .aics-field { margin-bottom: 18px; }
.sp-personalize__form aside { display: grid; gap: 7px; border: 1px solid var(--color-neutral-400); background: #fff; margin-top: 28px; padding: 18px; }
.sp-personalize__form aside strong { margin-bottom: 5px; text-transform: uppercase; }
.sp-personalize__form aside span { display: flex; justify-content: space-between; color: var(--aics-muted); }

.sp-account .aics-top { border-bottom: 1px solid var(--color-divider); padding-bottom: 32px; }
.sp-account .aics-top p:last-child { margin: 18px 0 0; color: var(--aics-muted); }
.sp-account .aics-project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-divider); border-left: 1px solid var(--color-divider); }
.sp-account .aics-project-list.is-empty { border: 0; }
/* Les actions occupent toute la largeur de la carte, sous la vignette : rangées
   dans la colonne de texte (`1fr`, dont le minimum est le contenu), les deux
   boutons l'élargissaient au-delà de la carte, et la carte voisine recouvrait
   « Supprimer » — le client cliquait sans effet et croyait la suppression
   impossible. */
.sp-account .aics-project-row { display: grid; min-height: 190px; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px; border: 0; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); border-radius: 0; padding: 18px; }
.sp-account .aics-thumb { width: 120px; height: 120px; border: 0; border-radius: var(--aics-radius); background: var(--color-neutral-200); }
.sp-account .aics-thumb .sp-product-visual { min-height: 120px; transform: scale(.7); }
.sp-account .aics-project-row > div:nth-child(2) { display: grid; align-content: start; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.sp-account .aics-project-row strong { font-size: 20px; line-height: 1.2; }
.sp-account .aics-project-row__actions { grid-column: 1 / -1; flex-wrap: wrap; }
.sp-account .aics-project-row time { color: var(--aics-muted); font-size: 10px; }
.sp-account .aics-project-row .aics-button { justify-self: start; }
.sp-account .aics-empty { grid-column: 1 / -1; display: grid; min-height: 440px; justify-items: center; border: 0; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); border-radius: 0; padding: 40px; text-align: center; }
.sp-account .aics-empty .sp-product-visual { width: min(360px, 80vw); }
.sp-account .sp-account-empty { min-height: 0; gap: 12px; border: 0; background: transparent; box-shadow: none; padding: 28px 24px; }
.sp-account .sp-account-empty p { max-width: 48ch; margin: 0; color: var(--aics-muted); }
.sp-account .sp-account-empty .aics-button { min-height: 38px; height: 38px; border: 0; padding: 0 18px; }

/* Existing character and editor surfaces */
.aics-shell,
.aics-fullscreen,
.aics-studio-app { font-family: "Archivo", Arial, sans-serif; }

.aics-upload-card,
.aics-upload-zone { border-radius: var(--aics-radius); box-shadow: none; }
.aics-upload-zone { border: 2px dashed var(--color-neutral-500); background: #fff; }

/* Le chrome de l'éditeur (barre, panneaux, canvas, onglets) est décrit plus
   haut, dans la section « ÉDITEUR — chrome » : rien ici ne doit le reprendre,
   sous peine de rendre les onglets ou le fond du canvas dépendants de l'ordre
   des règles. Ne restent ci-dessous que les contrôles de formulaire. */
.aics-page-item,
.aics-icon-button { border-radius: var(--aics-radius); }
.aics-page-item.is-active { border-color: var(--sel, var(--sp-red)); box-shadow: inset 4px 0 0 var(--sel, var(--sp-red)); }
.aics-field input,
.aics-field textarea,
.aics-field select { border: 1px solid var(--color-neutral-400); border-radius: var(--aics-radius); background: #fff; }
/* The border-radius above only ever squared the select's own box — the
   dropdown arrow stayed the browser's native rounded chevron, and the
   <input type=range>/<input type=color> controls (sliders, colour swatches)
   were never touched at all: only their accent-color/size was set, so the
   track and thumb kept the OS's own rounded, soft look regardless of theme. */
.aics-field select,
.aics-inline-actions select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sp-ink) 50%), linear-gradient(135deg, var(--sp-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
/* Same flat-chevron treatment as .aics-field select — this one lived outside
   .aics-field (it's the text-action picker above "Générer automatiquement")
   and had been missed by that pass, so it still showed the browser's native
   rounded dropdown arrow while every other select in the editor didn't. */
.aics-inline-actions select { border: 1px solid var(--color-neutral-400); }
.aics-range input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.aics-range input[type="range"]:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}
.aics-range input[type="range"]:disabled { cursor: default; }
.aics-color-field input[type="color"] { border: 2px solid var(--sp-ink); border-radius: var(--aics-radius); padding: 2px; background: #fff; }
.aics-alert { border: 2px solid var(--sp-red); border-radius: var(--aics-radius); background: #fff; color: var(--sp-red-dark); box-shadow: none; }
.aics-generation-cost { margin: 12px 0 7px; border-left: 3px solid var(--sp-red); padding-left: 9px; color: var(--aics-muted); font-size: 10px; line-height: 1.4; }
.aics-preview-dialog { border-radius: var(--aics-radius); }

/* ==========================================================================
   Studio Proches marketing layer — shared header/footer, Accueil, Catalogue,
   Idées cadeaux, Galerie, Comment ça marche/FAQ/contact, Aperçu modal.
   ========================================================================== */

.sp-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); padding-inline: 20px; }
.sp-header__bar { display: flex; align-items: center; gap: 16px; max-width: var(--sp-max); min-height: 60px; margin: 0 auto; padding: 0; }
.sp-header__brand { display: flex; flex: none; align-items: center; gap: 9px; color: var(--sp-ink); text-decoration: none; }
.sp-header__logo { display: block; width: 32px; height: 32px; flex: none; object-fit: contain; }
.sp-header__wordmark { display: block; width: 112px; height: auto; flex: none; }
.sp-header__mark { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-family: var(--sp-font-heading); font-size: 16px; font-weight: 900; line-height: 1; }
.sp-header__word { font-family: var(--sp-font-heading); font-size: 15px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; }
.sp-header__nav { display: flex; flex: 1 1 auto; align-items: center; gap: 2px; min-width: 0; }
.sp-header__nav a { position: relative; padding: 8px 9px; color: var(--sp-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sp-header__nav a:hover,
.sp-header__nav a.is-active { color: var(--color-accent); }
/* Barre d'actions de l'en-tête. Tous les éléments (icônes, pastille Crédits,
   CTA) partagent la MÊME hauteur fixe : c'est la seule façon de garantir qu'ils
   s'alignent, puisque leurs contenus ont des tailles de police différentes et
   que des paddings verticaux indépendants les faisaient diverger. */
.sp-header__actions { display: flex; flex: none; align-items: center; gap: 6px; margin-left: auto; }
.sp-header__actions > * { height: var(--sp-header-control); }
.sp-icon-btn { display: grid; width: var(--sp-header-control); place-items: center; border: 2px solid transparent; border-radius: var(--radius-pill); color: var(--color-text); text-decoration: none; }
.sp-icon-btn:hover { border-color: var(--sp-ink); }
.sp-icon-btn--cart { position: relative; }
.sp-cart-count { position: absolute; top: -2px; right: -2px; display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: var(--radius-pill); background: var(--color-accent); padding: 0 4px; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.sp-credits-pill { display: flex; align-items: center; gap: 7px; margin: 0; border: 1px solid var(--color-divider); border-radius: var(--radius-pill); padding: 0 14px; color: var(--color-text); font-family: var(--sp-font-body); font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; }
.sp-credits-pill:hover { background: var(--color-text); color: var(--color-bg); }
.sp-credits-pill__count { display: none; font-weight: 800; }
/* Le CTA est la seule pilule pleine des maquettes (`header a[href="/studio"]
   { border-radius: 999px }`). min-height/padding vertical remis à zéro : sa
   hauteur vient de .sp-header__actions > *, comme la pastille Crédits et les
   boutons-icônes — c'est ce qui les rend exactement de la même hauteur. */
/* La spécificité compte ici : `.sp-site .aics-button` (deux classes) pose
   min-height: 46px, et un min-height l'emporte toujours sur un height. Sans le
   `.sp-site` en tête, le CTA restait à 46px pendant que la pastille Crédits et
   les boutons-icônes tenaient 40px — c'est exactement le décalage constaté. */
.sp-site .sp-header__cta,
.sp-wizard-page .sp-header__cta,
.sp-account-page .sp-header__cta {
  min-height: 0;
  height: var(--sp-header-control);
  margin: 0;
  border-radius: var(--radius-pill);
  padding: 0 18px;
  font-size: 13px;
  white-space: nowrap;
}
.sp-burger { display: none; width: var(--sp-header-control); place-items: center; border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-neutral-200); color: var(--color-text); cursor: pointer; }
.sp-burger:hover { background: var(--sp-ink); color: #fff; }
.sp-mobile-menu-backdrop { position: fixed; inset: 0; z-index: 55; border: 0; background: rgba(42, 35, 32,.45); cursor: pointer; }
.sp-mobile-menu { display: none; flex-direction: column; max-width: var(--sp-max); max-height: calc(100vh - 60px); margin: 0 auto; padding: 8px var(--sp-gutter) 24px; overflow-y: auto; border-top: 1px solid var(--color-divider); background: var(--color-bg); }
.sp-mobile-menu.is-open,
body.sp-menu-open .sp-mobile-menu { display: flex; }
.sp-mobile-menu a { border-bottom: 2px solid var(--aics-line); padding: 16px 0; color: var(--sp-ink); font-family: "Archivo", Arial, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.sp-mobile-menu a:hover { color: var(--sp-red); }
.sp-mobile-menu .aics-button { justify-content: center; margin-top: 20px; text-align: center; }
body.sp-menu-open { overflow: hidden; }

.sp-footer { border-top: 1px solid var(--color-divider); background: var(--c-teal-soft); color: var(--color-text); }
.sp-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; max-width: var(--sp-max); margin: 0 auto; border-bottom: 2px solid var(--color-divider); padding: 64px var(--sp-gutter) 36px; }
.sp-footer__brand { display: grid; gap: 14px; }
.sp-footer p { max-width: 32ch; margin: 0; color: var(--color-neutral-700); font-size: 14px; line-height: 1.55; }
.sp-footer nav { display: flex; flex-direction: column; gap: 10px; }
.sp-footer nav strong { color: var(--color-text); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sp-footer a { color: var(--color-neutral-800); font-size: 14px; text-decoration: none; text-transform: none; }
.sp-footer a:hover { color: var(--color-accent); text-decoration: underline; }
.sp-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--sp-max); margin: 0 auto; padding: 22px var(--sp-gutter) 32px; }
.sp-footer__payments { display: flex; gap: 10px; }
.sp-footer__payments span { border: 2px solid var(--color-neutral-400); border-radius: var(--radius-md); padding: 6px 9px; color: var(--color-neutral-700); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.sp-footer__legal nav { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.sp-footer__legal nav a { color: var(--color-neutral-700); font-size: 13px; font-weight: 400; }
.sp-footer__legal small { color: var(--color-neutral-700); font-size: 13px; }

.sp-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 0; color: var(--color-accent-700); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* Trois pastilles teal / ambre / corail — la signature chromatique de la
   variante. Le <i> ne porte que la première : les deux autres viennent de ses
   pseudo-éléments, pour ne pas toucher au markup. La marge droite doit dégager
   28 + 9 = 37px, sinon la troisième pastille passe sous le texte. */
.sp-kicker i { position: relative; flex: none; width: 9px; height: 9px; margin-right: 33px; border-radius: var(--radius-pill); background: var(--c-teal); }
.sp-kicker i::before,
.sp-kicker i::after { position: absolute; top: 0; width: 9px; height: 9px; border-radius: var(--radius-pill); content: ""; }
.sp-kicker i::before { left: 14px; background: var(--c-amber); }
.sp-kicker i::after { left: 28px; background: var(--color-accent); }
.sp-muted { color: var(--aics-muted); }

.sp-rail-section { padding-block: clamp(48px, 6vw, 64px); }
.sp-rail-section h2 { margin: 0 0 28px; font-family: var(--sp-font-heading); font-size: clamp(28px, 3.4vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }
.sp-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 18px; }
/* Carte de rail : image collée aux bords (le cadre n'a pas de rayon propre, la
   carte le clippe) puis un corps à 16/18/20 comme toutes les cartes de la
   maquette. Le padding-bottom vit sur le corps, pas sur la carte, sinon le
   libellé touche le bord bas dès qu'il n'y a pas de second élément. */
.sp-rail__card { display: flex; flex: 0 0 auto; width: 250px; flex-direction: column; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); padding: 0; color: var(--color-text); text-decoration: none; overflow: hidden; scroll-snap-align: start; }
.sp-rail__card .sp-frame { flex: none; border-radius: 0; }
.sp-rail__card__body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px 20px; }
.sp-rail__card:hover { background: var(--color-accent-100); }
.sp-rail__card strong { font-family: var(--sp-font-heading); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.sp-rail__card__body svg { flex: none; color: var(--color-accent); }

.sp-catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.sp-showcase-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; }
.sp-showcase-card__visual { position: relative; aspect-ratio: 4 / 3; min-height: 0; background: var(--c-teal-soft); overflow: hidden; }
.sp-showcase-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.sp-badge { position: absolute; top: 0; left: 0; background: var(--color-accent); color: #fff; padding: 6px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sp-favorite { position: absolute; top: 8px; right: 8px; display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid var(--sp-ink); background: var(--sp-page); color: var(--sp-ink); cursor: pointer; }
.sp-favorite.is-active { border-color: var(--sp-red); background: var(--sp-red); color: #fff; }
.sp-showcase-card__body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 20px; }
/* h2 : titre de carte du rendu serveur des listings (MarketingViews), sous
   le h1 de la page ; même habillage que le h3 des cartes React. */
.sp-showcase-card__body h3, .sp-showcase-card__body h2 { margin: 0 0 8px; font-family: var(--sp-font-heading); font-size: 20px; font-weight: 900; letter-spacing: -.025em; line-height: 1.12; }
.sp-showcase-card__body > p { margin: 0 0 14px; color: var(--aics-muted); font-size: 13px; line-height: 1.5; }
.sp-showcase-card__meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; }
.sp-showcase-card__meta div { display: grid; gap: 2px; }
.sp-showcase-card__meta dt { color: var(--aics-muted); font-size: 10px; text-transform: uppercase; }
.sp-showcase-card__meta dd { margin: 0; font-size: 12px; font-weight: 700; }
.sp-showcase-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.sp-showcase-card__actions .sp-text-link { border: 0; padding: 0; }
/* « Aperçu » est un bouton (il ouvre la popup sur place) : il perd l’habillage natif du navigateur. */
button.sp-text-link { background: none; color: inherit; font-family: inherit; cursor: pointer; }

.sp-populaires { border-bottom: 1px solid var(--color-divider); }

.sp-gallery-preview { border-bottom: 1px solid var(--color-divider); }
.sp-gallery-preview__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.sp-gallery-preview__item { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--c-teal-soft); overflow: hidden; }
.sp-gallery-preview__item img { width: 100%; height: 100%; object-fit: cover; }

.sp-cta-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: var(--color-accent); color: #fff; padding-block: clamp(48px, 6vw, 64px); }
.sp-cta-banner h2 { margin: 0; font-family: var(--sp-font-heading); font-size: clamp(30px, 3.8vw, 54px); font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.sp-cta-banner .aics-button { border-color: #fff; background: #fff; color: var(--color-accent-700); }
.sp-cta-banner .aics-button:hover { border-color: var(--color-accent-900); background: var(--color-accent-900); color: #fff; }

.sp-testimonials { border-bottom: 1px solid var(--color-divider); }
.sp-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.sp-testimonials__grid blockquote { margin: 0; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 26px; }
.sp-testimonials__grid p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.sp-testimonials__grid cite { color: var(--aics-muted); font-size: 12px; font-style: normal; }

.sp-reassurance { border-bottom: 1px solid var(--color-divider); }
.sp-reassurance__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.sp-reassurance__grid article { border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); padding: 24px 22px; }
.sp-reassurance__grid h3 { margin: 0 0 6px; font-family: var(--sp-font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.sp-reassurance__grid p { margin: 0; color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }

/* Catalogue / Idées cadeaux / Galerie */
.sp-breadcrumb { display: flex; gap: 8px; max-width: var(--sp-max); margin: 0 auto; padding: 28px var(--sp-gutter) 0; color: var(--color-neutral-700); font-size: 13px; }
.sp-breadcrumb a { color: var(--aics-muted); text-decoration: none; }
.sp-breadcrumb a:hover { color: var(--sp-red); }
.sp-catalogue-hero,
.sp-galerie-page > .sp-catalogue-hero { max-width: var(--sp-max); margin: 0 auto; padding: 18px var(--sp-gutter) 40px; }
.sp-catalogue-hero h1 { margin: 0 0 14px; font-family: var(--sp-font-heading); font-size: clamp(32px, 4.4vw, 60px); font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.sp-catalogue-hero p { max-width: 60ch; margin: 0; color: var(--color-neutral-800); font-size: 16px; line-height: 1.5; }
.sp-catalogue-page,
.sp-galerie-page { max-width: var(--sp-max); margin: 0 auto; padding-bottom: 60px; }
.sp-catalogue-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; padding: 0 var(--sp-gutter); }
/* La maquette du catalogue ne met pas les filtres dans une boîte bordée : c'est
   une colonne séparée de la grille par un simple filet vertical. */
.sp-filters { align-self: start; max-width: 320px; min-width: 240px; border: 0; border-right: 2px solid var(--color-divider); padding: 28px 28px 40px 0; }
.sp-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--color-divider); padding-bottom: 10px; }
.sp-filters__head strong { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sp-filters__head button { border: 0; background: none; padding: 0; color: var(--color-accent-700); font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.sp-filter-group { margin: 0 0 26px; border: 0; padding: 0; }
.sp-filter-group legend { padding: 0 0 12px; color: var(--color-neutral-700); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sp-filter-option { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.sp-filter-option input { width: 16px; height: 16px; accent-color: var(--sp-red); }
.sp-filter-option small { margin-left: auto; color: var(--aics-muted); }
.sp-catalogue-results { padding: 28px 0 56px 28px; min-width: 0; }
.sp-catalogue-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--color-divider); padding-bottom: 12px; }
.sp-result-count { margin: 0; font-weight: 700; }
.sp-sort { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.sp-empty-state { border: 2px dashed var(--aics-line); padding: 50px 24px; text-align: center; }
.sp-empty-state h2 { margin: 0 0 10px; font-size: 22px; }
.sp-empty-state p { margin: 0 0 18px; color: var(--aics-muted); }

.sp-chip-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--sp-gutter) 24px; }
.sp-chip-row button { border: 2px solid var(--sp-ink); background: var(--sp-page); padding: 9px 16px; color: var(--sp-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.sp-chip-row button:hover { border-color: var(--sp-red); }
.sp-chip-row button.is-active { border-color: var(--sp-red); background: var(--sp-red); color: #fff; }
.sp-galerie-page .sp-catalogue-grid { margin: 0 var(--sp-gutter); width: auto; }

/* Aperçu modal */
.sp-modal-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(42, 35, 32,.6); padding: 20px; }
.sp-modal { position: relative; max-width: 960px; max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--color-divider); background: var(--sp-page); }
.sp-apercu { display: grid; grid-template-columns: 1fr 1fr; width: min(960px, 100%); }
.sp-modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--color-divider); background: var(--sp-page); color: var(--sp-ink); cursor: pointer; }
.sp-modal__close:hover { background: var(--sp-ink); color: #fff; }
/* Fenêtres d'AccessibleDialog (confirmations, style du livre…) hors de
   l'éditeur. Leur habillage n'existait que sous .aics-studio-app : à l'étape
   Portraits, « Créer le portrait de Léa ? » s'ouvrait sans aucune marge, le
   titre collé au bord et sous le bouton de fermeture, et la barre d'actions
   héritait du trait et de la marge de 38 px des étapes du tunnel. */
.sp-modal--dialog:not(.aics-image-lightbox) { padding: 20px; }
.sp-modal--dialog h2 { margin: 0 0 10px; padding-right: 48px; font-family: var(--font-heading); font-size: 17px; font-weight: 800; }
.sp-modal--dialog p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.sp-modal--dialog .sp-wizard-actions { position: static; justify-content: flex-end; gap: 10px; margin: 0; border-top: 0; padding: 0; background: none; }
.sp-apercu__visual { position: relative; min-height: 320px; border-right: 1px solid var(--color-divider); background: var(--color-neutral-200); overflow: hidden; }
.sp-apercu__visual img { width: 100%; height: 100%; object-fit: cover; }
.sp-apercu__body { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.sp-apercu__body h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.sp-apercu__table { width: 100%; border-top: 1px solid var(--aics-line); border-collapse: collapse; }
.sp-apercu__table th,
.sp-apercu__table td { border-bottom: 1px solid var(--aics-line); padding: 8px 0; text-align: left; font-size: 13px; }
.sp-apercu__table th { color: var(--aics-muted); font-weight: 600; width: 40%; }

/* Comment ça marche / FAQ / contact */
.sp-contact-form { display: grid; gap: 16px; margin-top: 20px; }
.sp-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; opacity: 0; pointer-events: none; }
.aics-alert--success { border-color: var(--sp-ink); color: var(--sp-ink); }

body.sp-scroll-lock { overflow: hidden; }

/* Compte déconnecté (connexion / inscription / mot de passe oublié) */
.sp-auth-page { display: grid; grid-template-columns: minmax(320px, 40%) minmax(380px, 60%); min-height: calc(100vh - 130px); }
.sp-auth-visual { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-right: 1px solid var(--color-divider); background: var(--color-neutral-200); text-align: center; }
.sp-auth-visual__frame { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.sp-auth-visual p { position: relative; z-index: 1; margin: 0; padding: 48px 32px 26px; background: linear-gradient(transparent, rgba(36, 26, 84, .85)); color: #fff; font-size: 14px; line-height: 1.5; text-shadow: 0 1px 3px rgba(36, 26, 84, .6); }
.sp-auth-card { display: flex; flex-direction: column; justify-content: center; max-width: 460px; margin: 0 auto; padding: 60px 24px; }
.sp-auth-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--color-neutral-200); padding: 4px; }
.sp-auth-tabs button { flex: 1; border: 0; background: transparent; padding: 12px; color: var(--sp-ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.sp-auth-tabs button:not(.is-active):hover { background: var(--color-neutral-300); }
.sp-auth-tabs button.is-active { background: var(--sp-ink); color: #fff; }
.sp-auth-card h1 { margin: 0 0 26px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; }
.sp-auth-lead { margin: -12px 0 14px; color: var(--color-neutral-700); font-size: 15px; line-height: 1.5; }
.sp-auth-switch { margin: 0; color: var(--color-neutral-700); font-size: 14px; }
.sp-auth-switch .sp-text-link { border: 0; padding: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 700; text-transform: none; cursor: pointer; }
.sp-auth-form { display: grid; gap: 16px; }
.sp-auth-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-auth-forgot { margin-top: 18px; border: 0; padding: 0; background: none; cursor: pointer; }
.sp-auth-card .aics-field { display: grid; gap: 7px; margin: 0; }
.sp-auth-card .aics-field > span { color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
.sp-auth-card .aics-field input { width: 100%; min-height: 46px; border: 1.5px solid var(--color-neutral-400); border-radius: var(--radius-md); background: #fffdf8; padding: 0 13px; color: var(--sp-ink); font: inherit; font-size: 14px; }
.sp-auth-card .aics-field input:focus { border-color: var(--sp-red); outline: 2px solid var(--color-accent-100); outline-offset: 1px; }
.sp-auth-card .sp-auth-registered-email { display: flex; align-items: center; min-height: 46px; border: 1.5px solid var(--color-neutral-400); border-radius: var(--radius-md); background: #fffdf8; padding: 10px 13px; color: var(--sp-ink); font-size: 14px; overflow-wrap: anywhere; }
.sp-auth-card .aics-field small { color: var(--aics-muted); font-size: 12px; }
.sp-google-button { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid var(--color-neutral-400); border-radius: var(--radius-md); background: #fff; color: var(--sp-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sp-google-button:hover { border-color: var(--sp-ink); box-shadow: 0 3px 10px rgba(42, 35, 32, .1); }
.sp-google-button__icon { display: inline-grid; width: 20px; height: 20px; place-items: center; }
.sp-google-button__icon svg { display: block; width: 18px; height: 18px; }
.sp-auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--aics-muted); font-size: 12px; }
.sp-auth-divider::before, .sp-auth-divider::after { height: 1px; flex: 1; background: var(--color-divider); content: ''; }

/* Compte connecté — 6 onglets */
.sp-account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0; max-width: var(--sp-max); margin: 0 auto; }
.sp-account-nav { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--color-divider); padding: clamp(30px, 4vw, 50px) 20px; }
.sp-account-nav button { border: 0; background: none; padding: 12px 10px; color: var(--aics-muted); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.sp-account-nav button:hover { color: var(--sp-ink); }
.sp-account-nav button.is-active { background: var(--sp-ink); color: #fff; }
.sp-account-nav__logout { display: block; margin-top: auto; padding: 16px 10px 12px; border-top: 1px solid var(--sp-ink); color: var(--aics-muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.sp-account-nav__logout:hover { color: var(--sp-ink); }
.aics-account-panel { max-width: 780px; }
.aics-project-row { position: relative; }
.aics-project-row__actions { display: flex; gap: 8px; align-self: end; }
.sp-orders-list { display: grid; gap: 2px; border-top: 1px solid var(--color-divider); }
.sp-order-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--color-divider); padding: 18px 0; }
.sp-order-row > div:first-child { display: grid; gap: 4px; }
.sp-order-row small { color: var(--aics-muted); }
.sp-order-row__status { display: grid; justify-items: end; gap: 6px; }
.sp-order-status { border: 1px solid currentColor; padding: 3px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.sp-order-row__actions { grid-column: 1 / -1; display: flex; gap: 8px; }
/* Détail d'une commande (AccountOrderDetail) : seul écran de suivi du site,
   /my-account/view-order/ de WooCommerce y redirige. Cartes à bordure 2px,
   angles droits, comme le reste de l'espace client. */
.sp-order-detail { display: grid; gap: 16px; }
.sp-order-detail__back { width: fit-content; color: var(--sp-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.sp-order-detail__back:hover { text-decoration: underline; }
.sp-order-detail__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-order-detail__head h1 { margin: 0 0 4px; }
.sp-order-detail__head small { color: var(--aics-muted); font-size: 13px; }
.sp-order-detail__card { border: 1px solid var(--color-divider); background: #fff; padding: 18px 20px; }
.sp-order-detail__card h2 { margin: 0 0 12px; font-size: 16px; }
.sp-order-detail__card p { margin: 0 0 8px; font-size: 14px; }
.sp-order-detail__card p:last-child { margin-bottom: 0; }
.sp-order-detail__lede { color: var(--aics-muted); font-size: 13px !important; }
.sp-order-detail__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-color: var(--color-accent-700, var(--sp-ink)); background: var(--color-accent-100, #fff); }
.sp-order-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.sp-order-timeline li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; color: var(--color-neutral-500, #9c8b74); font-size: 13px; font-weight: 700; }
.sp-order-timeline li:last-child { padding-bottom: 0; }
.sp-order-timeline li:not(:last-child)::before { position: absolute; top: 22px; bottom: 0; left: 10px; width: 2px; background: var(--color-neutral-300, #dfd2be); content: ""; }
.sp-order-timeline li.is-done:not(:last-child)::before { background: var(--sp-ink); }
.sp-order-timeline__dot { position: relative; display: grid; width: 22px; height: 22px; flex: none; place-items: center; border: 2px solid var(--color-neutral-300, #dfd2be); background: var(--sp-page); font-size: 12px; }
.sp-order-timeline li.is-done,
.sp-order-timeline li.is-active { color: var(--sp-ink); }
.sp-order-timeline li.is-done .sp-order-timeline__dot { border-color: var(--color-text); background: var(--sp-ink); color: #fff; }
.sp-order-timeline li.is-active .sp-order-timeline__dot { border-color: var(--color-accent); }
.sp-order-timeline li.is-warn { color: var(--color-danger, #b33714); }
.sp-order-timeline li.is-warn .sp-order-timeline__dot { border-color: currentColor; }
.sp-order-timeline small { display: block; margin-top: 2px; font-weight: 600; }
.sp-order-detail__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 14px; border-bottom: 2px solid var(--color-neutral-200, #ede3d3); padding-bottom: 14px; margin-bottom: 14px; }
.sp-order-detail__thumb { width: 72px; min-height: 72px; border: 1px solid var(--color-divider); background: var(--color-neutral-200, #ede3d3); }
.sp-order-detail__thumb img { display: block; width: 100%; height: auto; }
.sp-order-detail__item strong { display: block; font-size: 14px; font-weight: 800; }
.sp-order-detail__item small { display: block; margin-top: 2px; color: var(--aics-muted); font-size: 12.5px; }
.sp-order-detail__price { white-space: nowrap; }
.sp-order-detail__specs { display: grid; gap: 2px; margin: 8px 0 0; font-size: 12.5px; }
.sp-order-detail__specs div { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-order-detail__specs dt { font-weight: 700; }
.sp-order-detail__specs dt::after { content: " :"; }
.sp-order-detail__specs dd { margin: 0; color: var(--aics-muted); }
.sp-order-detail__totals { display: grid; gap: 8px; margin: 0; font-size: 14px; }
.sp-order-detail__totals div { display: flex; justify-content: space-between; gap: 12px; }
.sp-order-detail__totals dt { color: var(--aics-muted); }
.sp-order-detail__totals dd { margin: 0; font-weight: 700; text-align: right; }
.sp-order-detail__totals .is-total { border-top: 1px solid var(--color-divider); padding-top: 10px; }
.sp-order-detail__totals .is-total dt { color: var(--sp-ink); font-weight: 800; }
.sp-order-detail__totals .is-total dd { font-size: 18px; font-weight: 900; }
.sp-order-detail__addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sp-order-detail__address { display: grid; gap: 2px; font-size: 14px; }
.sp-order-detail__address h3 { margin: 0 0 6px; font-size: 14px; }
.sp-address-form,
.sp-address-fieldset { display: grid; gap: 16px; }
.sp-address-fieldset { border: 1px solid var(--color-divider); padding: 22px; margin: 0 0 24px; }
.sp-address-fieldset legend { padding: 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; }

/* Emplacements de visuel produit (ProductVisual) et pastilles génériques
   .tag / .tag-outline / .tag-neutral / .tag-accent de Studio.dc.html. */
.sp-product-visual--flat { display: grid; place-items: center; background: var(--aics-neutral-200); color: var(--aics-neutral-600); text-align: center; }
.sp-product-visual--flat > span { padding: 0 12px; font-size: 12px; font-weight: 700; }
.sp-swatch { display: block; width: 100%; height: 28px; border: 1px solid var(--aics-line); margin-bottom: 4px; }
.sp-option-note { grid-column: 1 / -1; margin: 8px 0 0; color: var(--aics-muted); font-size: 11px; font-style: italic; }
.tag { display: inline-flex; align-items: center; width: fit-content; border-radius: var(--aics-radius); padding: 3px 10px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; }
.tag-outline { border: 1px solid var(--sp-red); color: var(--sp-red); }
.tag-neutral { background: var(--aics-neutral-200); color: var(--sp-ink); }
.tag-accent { background: var(--sp-red); color: #fff; }

/* ==========================================================================
   TUNNEL DE CRÉATION (« onboarding ») — reproduction de Studio.dc.html.
   Toutes les valeurs (marges, tailles, bordures, couleurs) sont reprises
   telles quelles de la maquette. Points de rupture du contrat tunnel/éditeur :
   lg ≥ 1280 · md 640–1279 · xs < 640 — distincts du contrat 760px de la
   vitrine marketing, laissé intact.
   ========================================================================== */
.sp-ob { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }

/* --- En-tête + stepper --- */
.sp-ob-header { position: sticky; z-index: 50; top: 0; flex: none; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.sp-ob-header__bar { display: flex; max-width: 1200px; margin: 0 auto; align-items: center; flex-wrap: nowrap; gap: 20px; padding: 14px 20px; }
.sp-ob-header__bar.is-md { gap: 10px; }
/* Wordmark Fablunéo à la largeur de celui de l'en-tête du site (.sp-header__wordmark). */
.sp-ob-brand { display: inline-flex; flex: none; align-items: center; text-decoration: none; }
.sp-ob-brand img { display: block; width: 112px; height: auto; }
.sp-ob-steps { display: flex; flex: 1 1 200px; align-items: center; gap: 2px; min-width: 0; }
.sp-ob-step { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; }
.sp-ob-step.is-last { flex: 0 0 auto; }
.sp-ob-step__head { display: flex; flex: none; align-items: center; gap: 8px; }
.sp-ob-step__badge { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border: 2px solid var(--color-neutral-500); background: var(--color-bg); color: var(--color-neutral-500); font-size: 12px; font-weight: 800; }
.sp-ob-step.is-current .sp-ob-step__badge { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.sp-ob-step.is-done .sp-ob-step__badge { border-color: var(--color-text); background: var(--color-text); color: #fff; }
.sp-ob-step__label { color: var(--color-neutral-500); font-size: 13px; font-weight: 700; white-space: nowrap; }
.sp-ob-step.is-current .sp-ob-step__label,
.sp-ob-step.is-done .sp-ob-step__label { color: var(--color-text); }
.sp-ob-step__trigger { display: block; flex: none; border: 0; background: none; margin: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-ob-step__trigger:hover .sp-ob-step__badge { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-text); }
.sp-ob-step__trigger:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.sp-ob-step__rule { height: 2px; flex: 1 1 auto; min-width: 14px; background: var(--color-neutral-300); }
.sp-ob-step__rule.is-done { background: var(--color-text); }
.sp-ob-quit { flex: none; border: 2px solid var(--color-neutral-400); border-radius: var(--radius-md); background: none; padding: 9px 14px; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.sp-ob-quit:hover { border-color: var(--color-divider); }

.sp-ob-header__mobile { padding: 12px 14px; }
.sp-ob-header__mobile-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-ob-iconbtn { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-neutral-200); padding: 0; color: var(--color-text); cursor: pointer; }
.sp-ob-iconbtn:hover { background: var(--color-neutral-300); }
.sp-ob-header__mobile-title { flex: 1 1 auto; min-width: 0; }
.sp-ob-header__mobile-title strong { display: block; font-family: var(--font-heading); font-size: 15px; font-weight: 900; letter-spacing: -.01em; }
.sp-ob-header__mobile-title small { display: block; color: var(--color-neutral-600); font-size: 11.5px; font-weight: 600; }
.sp-ob-menu { position: relative; flex: none; }
.sp-ob-menu__backdrop { position: fixed; z-index: 49; inset: 0; }
.sp-ob-menu__panel { position: absolute; z-index: 50; top: 38px; right: 0; width: min(240px, calc(100vw - 28px)); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--aics-shadow-lg); padding: 6px; }
.sp-ob-menu__title { display: block; padding: 6px 8px 3px; color: var(--color-neutral-600); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sp-ob-menu__panel button { width: 100%; border: 0; background: none; padding: 9px 8px; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.sp-ob-menu__panel button:hover { background: var(--color-neutral-100); }
.sp-ob-progress { position: relative; height: 4px; background: var(--color-neutral-200); }
.sp-ob-progress i { position: absolute; inset: 0; background: var(--color-accent); }

/* --- Conteneurs d'étape (largeurs et marges exactes de la maquette) --- */
.sp-ob-main { width: 100%; flex: 1 1 auto; margin: 0 auto; }
.sp-ob-main--produit { max-width: 1080px; padding: 56px 20px 40px; }
.sp-ob-main--config { max-width: 1180px; padding: 40px 20px 60px; }
.sp-ob-main--biblio { max-width: 1240px; padding: 40px 20px; }
.sp-ob-main--detail { max-width: 1000px; padding: 40px 20px 60px; }
.sp-ob-main--perso { max-width: 900px; padding: 40px 20px 60px; }
.sp-ob-main--generation { max-width: 560px; padding: 80px 20px; }

.sp-ob-h1 { margin: 0 0 8px; font-family: var(--font-heading); font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.sp-ob-h1--config { margin: 0 0 28px; font-size: clamp(26px, 3vw, 38px); }
.sp-ob-h1--biblio { margin: 0 0 20px; font-size: clamp(26px, 3.2vw, 38px); }
.sp-ob-h1--perso { margin: 0 0 6px; font-size: clamp(26px, 3vw, 36px); }
.sp-ob-lead { max-width: 60ch; margin: 0 0 36px; color: var(--color-neutral-700); font-size: 15px; line-height: 1.5; }
.sp-ob-lead--tight { margin: 0 0 24px; font-size: 14px; }
.sp-ob-overline { margin-bottom: 6px; color: var(--color-accent-700); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sp-ob-alert { max-width: 1080px; margin: 16px auto 0; border: 2px solid var(--color-danger); background: var(--color-danger-soft); padding: 12px 16px; color: var(--color-danger); font-size: 13.5px; font-weight: 600; }

/* --- Boutons du tunnel --- */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-neutral-200); padding: 11px 18px; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; cursor: pointer; }
.sp-btn:hover:not(:disabled) { background: var(--color-neutral-300); }
.sp-btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.sp-btn--primary:hover:not(:disabled) { border-color: var(--color-accent-600); background: var(--color-accent-600); }
/* Lien bouton (« Ouvrir mon livre ») : `.sp-wizard-page a { color: inherit }`,
   plus spécifique, l'écrivait en noir sur le violet. */
.sp-site a.sp-btn--primary, .sp-wizard-page a.sp-btn--primary, .sp-account-page a.sp-btn--primary,
.sp-site a.sp-btn--primary:hover, .sp-wizard-page a.sp-btn--primary:hover, .sp-account-page a.sp-btn--primary:hover { color: #fff; text-decoration: none; }
.sp-btn--ghost { font-weight: 700; }
.sp-btn--block { width: 100%; }
.sp-btn:disabled { border-color: transparent; background: var(--color-neutral-100); color: var(--color-neutral-500); cursor: not-allowed; }

/* --- ÉTAPE 1 : produit --- */
.sp-ob-produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; margin-bottom: 32px; border: 1px solid var(--color-divider); background: var(--color-divider); }
.sp-ob-produit { position: relative; display: flex; flex-direction: column; gap: 14px; border: 0; border-radius: 0; background: var(--color-bg); padding: 28px; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
/* Version imprimée sans prix : visible mais non choisissable, sans le badge « Recommandé ». */
.sp-ob-produit:disabled { cursor: not-allowed; opacity: .55; }
.sp-ob-produit:disabled::before { display: none; }
.sp-ob-produit.is-selected { background: var(--color-accent-100); }
.sp-ob-produit__check { position: absolute; top: 20px; right: 20px; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid var(--color-neutral-400); background: var(--color-bg); color: #fff; }
.sp-ob-produit.is-selected .sp-ob-produit__check { border-color: var(--color-accent-700); background: var(--color-accent-700); }
.sp-ob-produit__preview { display: grid; aspect-ratio: 16 / 10; place-items: center; border: 1px solid var(--color-divider); background: var(--color-neutral-200); color: var(--color-neutral-600); }
.sp-ob-produit__preview span { font-size: 12px; font-weight: 700; }
.sp-ob-produit__name { display: block; margin-bottom: 4px; font-family: var(--font-heading); font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.sp-ob-produit__desc { display: block; color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }
.sp-ob-produit__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-ob-produit__formats { display: block; margin-top: auto; border-top: 2px solid var(--color-neutral-300); padding-top: 10px; color: var(--color-neutral-700); font-size: 13px; }

/* --- ÉTAPE 1B : configuration physique --- */
.sp-ob-config { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); align-items: start; gap: 36px; }
.sp-ob-config__options { min-width: 0; }
.sp-ob-section { margin-bottom: 28px; }
.sp-ob-section:last-child { margin-bottom: 0; }
.sp-ob-section__title { margin-bottom: 10px; font-family: var(--font-heading); font-size: 15px; font-weight: 800; }
.sp-ob-section__note { margin: 8px 0 0; color: var(--color-accent-700); font-size: 12px; }
.sp-ob-note { margin: 8px 0 0; color: var(--color-neutral-600); font-size: 12px; line-height: 1.5; }
.sp-ob-format-grid,
.sp-ob-frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); gap: 10px; }
.sp-ob-choice-row { display: flex; flex-wrap: nowrap; gap: 10px; }
.sp-ob-choice { display: block; border: 2px solid var(--color-neutral-300); border-radius: var(--radius-md); background: var(--color-bg); padding: 14px; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.sp-ob-choice-row .sp-ob-choice { width: 100%; min-width: 0; max-width: 260px; flex: 1 1 0; padding: 12px 14px; }
.sp-ob-choice.is-selected { border-color: var(--color-accent-700); background: var(--color-accent-100); }
.sp-ob-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.sp-ob-choice__swatch { display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 8px; border: 6px solid var(--color-neutral-400); background: var(--color-neutral-200); }
.sp-ob-choice__label { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 800; }
.sp-ob-choice-row .sp-ob-choice__label { margin-bottom: 0; font-size: 13px; }
.sp-ob-choice__meta { display: block; margin-bottom: 3px; color: var(--color-neutral-700); font-size: 12px; }
.sp-ob-choice-row .sp-ob-choice__meta { margin-bottom: 0; font-size: 11.5px; }
.sp-ob-choice__price { display: block; color: var(--color-accent-700); font-size: 12px; font-weight: 700; }
.sp-ob-choice-row .sp-ob-choice__price { margin-top: 2px; font-size: 11.5px; }
.sp-ob-choice__note { display: block; margin-top: 3px; color: var(--color-accent-700); font-size: 11px; }
.sp-ob-pagecount { max-width: 320px; border: 2px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: 12px 14px; }
.sp-ob-pagecount strong { display: block; font-size: 13px; font-weight: 800; }
.sp-ob-pagecount small { display: block; margin-top: 2px; color: var(--color-neutral-700); font-size: 11.5px; }
.sp-ob-summary { position: sticky; top: 20px; border: 1px solid var(--color-divider); background: var(--color-neutral-100); padding: 18px; }
.sp-ob-summary__title { margin-bottom: 12px; font-family: var(--font-heading); font-size: 14px; font-weight: 800; }
.sp-ob-summary__preview { display: grid; aspect-ratio: 1; place-items: center; margin-bottom: 14px; border: 1px solid var(--color-divider); background: var(--color-neutral-200); padding: 8px; color: var(--color-neutral-600); font-size: 12px; text-align: center; }
.sp-ob-summary__lines { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0 0 14px; font-size: 12.5px; }
.sp-ob-summary__lines dt { color: var(--color-neutral-600); font-weight: 700; }
.sp-ob-summary__lines dd { margin: 0; text-align: right; }
.sp-ob-summary__tokens { margin: -6px 0 14px; color: var(--color-neutral-700); font-size: 12px; line-height: 1.5; }
.sp-ob-summary__total { display: flex; justify-content: space-between; margin-bottom: 16px; border-top: 1px solid var(--color-divider); padding-top: 10px; font-size: 15px; font-weight: 800; }
.sp-ob-summary__amount { display: grid; justify-items: end; gap: 2px; }
.sp-ob-summary__amount small { color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
.sp-ob-summary__amount s { color: var(--color-neutral-600); font-weight: 600; }
/* Livre offert par une carte cadeau du compte (tunnel, étape Livre). */
.sp-ob-gift { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 20px; border: 2px solid var(--color-neutral-400); background: var(--color-neutral-100); padding: 12px 16px; font-size: 13.5px; font-weight: 600; }
.sp-ob-gift.is-gifted { border-color: var(--color-accent-700); background: var(--color-accent-100); }
.sp-ob-gift p { flex: 1 1 240px; margin: 0; }
.sp-ob-choice__note--gift { font-weight: 800; }

/* --- ÉTAPE 2 : bibliothèque --- */
.sp-ob-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; border-bottom: 1px solid var(--color-divider); padding-bottom: 20px; }
.sp-ob-filters__count { margin-left: auto; color: var(--color-neutral-700); font-size: 13px; font-weight: 600; }
.sp-ob-input,
.sp-ob-select { width: 100%; border: 2px solid var(--color-neutral-300); border-radius: var(--radius-md); background: var(--color-bg); padding: 10px 12px; color: var(--color-text); font: inherit; font-size: 13.5px; }
.sp-ob-input:focus,
.sp-ob-select:focus { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sp-ob-input:disabled { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.sp-ob-filters .sp-ob-input { width: auto; flex: 1 1 200px; max-width: 260px; }
.sp-ob-filters .sp-ob-select { width: auto; flex: 0 1 170px; }
.sp-ob-ghost { border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-neutral-200); padding: 9px 12px; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sp-ob-ghost:hover { background: var(--color-neutral-300); }
.sp-ob-ghost--strong { flex: none; background: var(--color-neutral-300); }
.sp-ob-ghost--danger { font-size: 12px; padding: 7px 10px; }
.sp-ob-ghost--danger:hover { color: var(--color-danger); }
.sp-ob-empty { border: 2px solid var(--color-neutral-300); padding: 70px 20px; text-align: center; }
.sp-ob-empty__title { margin-bottom: 8px; font-family: var(--font-heading); font-size: 20px; font-weight: 900; }
.sp-ob-empty p { margin: 0 0 18px; color: var(--color-neutral-700); font-size: 14px; }
.sp-ob-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.sp-ob-card { display: flex; flex-direction: column; border: 1px solid var(--color-divider); background: var(--color-bg); }
.sp-ob-card.is-selected { background: var(--color-accent-100); }
.sp-ob-card__visual { position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--color-divider); background: var(--color-neutral-200); padding: 10px; color: var(--color-neutral-600); font-size: 13px; font-weight: 700; text-align: center; }
.sp-ob-card__visual.is-book { aspect-ratio: 4 / 3; }
.sp-ob-card__visual.is-poster { aspect-ratio: 3 / 4; max-height: 220px; }
.sp-ob-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.sp-ob-card__badge { position: absolute; top: 10px; left: 10px; }
.sp-ob-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 16px; }
.sp-ob-card__title { font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.sp-ob-card__synopsis { flex: 1 1 auto; margin: 0; color: var(--color-neutral-700); font-size: 13px; line-height: 1.5; }
.sp-ob-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-ob-card__footnote { color: var(--color-neutral-600); font-size: 12px; }
.sp-ob-card__actions { display: flex; gap: 8px; margin-top: 6px; }
.sp-ob-card__action { flex: 1 1 auto; min-width: 0; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: none; padding: 10px 12px; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 700; text-overflow: ellipsis; cursor: pointer; }
.sp-ob-card__action:hover { background: var(--color-neutral-100); }
.sp-ob-card__action.is-chosen { background: var(--color-text); color: #fff; }
.sp-ob-card__action.is-chosen:hover { background: var(--color-text); }

/* --- ÉTAPE 2 : fiche détaillée --- */
.sp-ob-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; }
.sp-ob-detail__cover { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--color-divider); background: var(--color-neutral-200); padding: 10px; color: var(--color-neutral-600); font-weight: 700; text-align: center; }
.sp-ob-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.sp-ob-detail__spreads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-ob-detail__spreads > div { display: grid; aspect-ratio: 4 / 3; place-items: center; border: 2px solid var(--color-neutral-300); background: var(--color-neutral-100); color: var(--color-neutral-600); font-size: 11px; }
.sp-ob-detail__title { margin: 0 0 10px; font-family: var(--font-heading); font-size: 30px; font-weight: 900; letter-spacing: -.03em; }
.sp-ob-detail__synopsis { margin: 0 0 18px; color: var(--color-neutral-800); font-size: 15px; line-height: 1.5; }
.sp-ob-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sp-ob-detail__specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 20px; border-top: 2px solid var(--color-neutral-300); padding-top: 16px; font-size: 13px; }
.sp-ob-detail__specs dt { color: var(--color-neutral-600); font-weight: 700; }
.sp-ob-detail__specs dd { margin: 0; }
.sp-ob-detail__ab { margin-bottom: 22px; border: 2px solid var(--color-neutral-300); padding: 14px; }
.sp-ob-detail__ab-label { margin-bottom: 8px; color: var(--color-neutral-600); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sp-ob-detail__ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-ob-detail__ab-before { display: grid; aspect-ratio: 4 / 3; place-items: center; background: var(--color-neutral-200); color: var(--color-neutral-600); font-size: 12px; }
.sp-ob-detail__ab-after { display: grid; aspect-ratio: 4 / 3; place-items: center; border: 2px solid var(--color-accent-700); background: var(--color-accent-100); padding: 6px; color: var(--color-accent-700); font-size: 12px; font-weight: 700; text-align: center; }

/* --- ÉTAPE 3 : personnalisation --- */
.sp-ob-field { display: block; margin-bottom: 18px; }
.sp-ob-field > span { display: block; margin-bottom: 6px; color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
.sp-ob-field > small { display: block; margin-top: 4px; color: var(--color-neutral-600); font-size: 11.5px; }
.sp-ob-field--full { grid-column: 1 / -1; }
.sp-ob-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-ob-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; border-top: 1px solid var(--color-divider); padding-top: 18px; }
.sp-ob-section__head h2 { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 800; }
.sp-ob-section__head span { color: var(--color-neutral-600); font-size: 12px; }
.sp-ob-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; color: var(--color-neutral-800); font-size: 13px; }
.sp-ob-consent input { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: var(--color-accent); }

/* --- ÉTAPE 3B : génération de la première proposition --- */
.sp-ob-gen-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -.02em; text-align: center; }
.sp-ob-gen-lead { margin: 0 0 32px; color: var(--color-neutral-700); font-size: 14px; text-align: center; }
.sp-ob-gen-box { border: 1px solid var(--color-divider); padding: 22px; }
.sp-ob-gen-box--center { display: grid; justify-items: center; gap: 10px; text-align: center; }
.sp-ob-gen-box--center .aics-loading-spinner { width: 28px; height: 28px; }
.sp-ob-gen-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--color-neutral-500); font-size: 14px; font-weight: 600; }
.sp-ob-gen-step.is-done { color: var(--color-neutral-700); }
.sp-ob-gen-step.is-current { color: var(--color-text); font-weight: 800; }
.sp-ob-gen-step__dot { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border: 2px solid var(--color-neutral-300); background: var(--color-bg); color: #fff; }
.sp-ob-gen-step.is-done .sp-ob-gen-step__dot { border-color: var(--color-text); background: var(--color-text); }
.sp-ob-gen-step.is-current .sp-ob-gen-step__dot { border-color: var(--color-accent); color: var(--color-accent-700); }
.sp-ob-gen-step.is-current .sp-ob-gen-step__dot svg { animation: sp-spin 1s linear infinite; }
.sp-ob-gen-count { margin: 0; font-size: 15px; font-weight: 700; }
.sp-ob-gen-hint { margin: 0; color: var(--color-neutral-600); font-size: 12px; }
.sp-ob-gen-error { border: 2px solid var(--color-danger); padding: 28px; text-align: center; }
.sp-ob-gen-error__icon { display: grid; width: 44px; height: 44px; place-items: center; margin: 0 auto 14px; border-radius: 0; background: var(--color-danger-soft); color: var(--color-danger); }
.sp-ob-gen-error h1 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 22px; font-weight: 900; }
.sp-ob-gen-error p { margin: 0 0 6px; color: var(--color-neutral-700); font-size: 14px; }
.sp-ob-gen-error .sp-ob-gen-error__sub { margin: 0 0 22px; color: var(--color-neutral-600); font-size: 12.5px; }
.sp-ob-gen-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* --- ÉTAPE 5 : création du livre (BookLaunch, launch.js) --- */
.sp-launch { max-width: 680px; padding: 56px 20px 40px; }
.sp-launch .sp-ob-gen-lead { margin-bottom: 28px; }
.sp-launch-card { margin-top: 20px; border: 1px solid var(--color-divider); padding: 20px 22px; background: var(--color-bg); }
.sp-launch-card.is-attention { border-color: var(--color-accent); box-shadow: 6px 6px 0 var(--color-accent-100); }
.sp-launch-card h2 { margin: 0 0 12px; font-family: var(--font-heading); font-size: 19px; font-weight: 900; }
.sp-launch-card > p { margin: 0 0 12px; color: var(--color-neutral-800); font-size: 14px; line-height: 1.5; }
.sp-launch-lines { display: grid; gap: 0; margin: 0; }
.sp-launch-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-neutral-200); padding: 10px 0; }
.sp-launch-lines dt { display: grid; gap: 2px; font-size: 14px; font-weight: 700; }
.sp-launch-lines dt small { color: var(--color-neutral-600); font-size: 12px; font-weight: 500; }
.sp-launch-lines dd { margin: 0; font-size: 14px; font-weight: 800; white-space: nowrap; }
.sp-launch-lines__total { border-bottom: 0 !important; }
.sp-launch-lines__total dt, .sp-launch-lines__total dd { color: var(--color-neutral-700); font-weight: 600; }
.sp-launch-lines__title { position: relative; display: flex; align-items: center; gap: 2px; }
.sp-launch-info__button { display: inline-grid; width: 24px; height: 24px; place-items: center; border: 0; background: none; padding: 0; color: var(--color-accent); cursor: help; }
.sp-launch-info__button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; }
.sp-launch-info__text { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: none; width: min(300px, calc(100vw - 72px)); background: var(--color-text); padding: 10px 12px; color: var(--color-bg); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.sp-launch-info:hover .sp-launch-info__text, .sp-launch-info.is-open .sp-launch-info__text { display: block; }
.sp-launch-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 16px; padding: 0; list-style: none; }
/* Pendant la création, les portraits vivent sous leur étape, alignés sur son
 * libellé : ouverts tant qu'ils se dessinent, puis repliés en accordéon. */
.sp-ob-gen-box .sp-launch-people { margin: 6px 0 12px 34px; }
.sp-launch-portraits { margin: 0 0 6px 34px; }
.sp-launch-portraits > summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0 6px; color: var(--color-accent); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.sp-launch-portraits > summary::-webkit-details-marker { display: none; }
.sp-launch-portraits > summary:hover { color: var(--color-accent-700); }
.sp-launch-portraits > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sp-launch-portraits > summary svg { transition: transform .2s ease; }
.sp-launch-portraits[open] > summary svg { transform: rotate(180deg); }
.sp-launch-portraits .sp-launch-people { margin-left: 0; }
.sp-launch-person { display: grid; align-content: start; border: 2px solid var(--color-accent); background: var(--color-accent-100); }
.sp-launch-person.is-ready, .sp-launch-person.is-provided { border-color: var(--c-teal); background: var(--c-teal-soft); }
.sp-launch-person.is-failed, .sp-launch-person.is-no_photo, .sp-launch-person.is-stale { border-color: var(--color-danger); background: var(--color-danger-soft); }
.sp-launch-person__face { display: grid; width: 100%; aspect-ratio: 1; overflow: hidden; place-items: center; background: var(--color-accent-200); color: var(--color-accent-700); }
.sp-launch-person__face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.sp-launch-person.is-running .sp-launch-person__face svg { animation: sp-spin 1s linear infinite; }
.sp-launch-person__name { padding: 10px 12px 0; font-size: 14px; font-weight: 800; }
.sp-launch-person small { padding: 2px 12px 12px; color: var(--color-accent-700); font-size: 12px; font-weight: 600; line-height: 1.35; }
.sp-launch-person.is-ready small, .sp-launch-person.is-provided small { color: var(--c-teal); }
.sp-launch-person.is-failed small, .sp-launch-person.is-no_photo small, .sp-launch-person.is-stale small { color: var(--color-danger); font-weight: 700; }
.sp-launch-person__action { justify-self: start; margin: -6px 12px 12px; border: 0; background: none; padding: 0; color: var(--color-accent); font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.sp-launch-promises { display: grid; gap: 10px; margin: 4px 0 14px; padding: 0; list-style: none; }
.sp-launch-promises li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-neutral-800); font-size: 13.5px; line-height: 1.5; }
.sp-launch-promises svg { flex: none; margin-top: 2px; color: var(--color-accent); }
.sp-launch-why { margin: 0 !important; border-top: 1px solid var(--color-neutral-200); padding-top: 12px; color: var(--color-neutral-600) !important; font-size: 12.5px !important; }
.sp-launch-edit { margin: 14px 0 0; color: var(--color-neutral-700); font-size: 13px; }
.sp-launch-edit a { color: var(--color-accent); font-weight: 800; }
.sp-launch-skip { display: block; margin: 22px auto 0; color: var(--color-neutral-600); font-size: 13px; text-align: center; }
.sp-launch-step__detail { margin-left: auto; color: var(--color-neutral-600); font-size: 12.5px; font-weight: 600; }
.sp-launch-progress { position: relative; height: 6px; margin-top: 14px; background: var(--color-neutral-200); }
.sp-launch-progress i { position: absolute; inset: 0 auto 0 0; background: var(--color-accent); transition: width .4s ease; }
.sp-launch-actions { display: flex; justify-content: center; margin-top: 24px; }
.sp-launch-progress__sent { background: var(--color-accent-200) !important; }
.sp-launch-progress.is-waiting .sp-launch-progress__sent { animation: sp-pulse 1.6s ease-in-out infinite; }
.sp-launch-wait { margin: 10px 0 0; color: var(--color-neutral-700); font-size: 13px; line-height: 1.45; }
.sp-launch-hint { margin-top: 14px; text-align: center; }
.sp-launch-alert-action { display: block; margin-top: 10px; }
@media (max-width: 640px) {
  .sp-launch { padding: 32px 16px 32px; }
  .sp-launch-card { padding: 16px; }
  .sp-launch-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-ob-gen-box .sp-launch-people, .sp-launch-portraits { margin-left: 0; }
}

/* --- Boîtes de dialogue du tunnel --- */
.sp-ob-overlay { position: fixed; z-index: 400; display: grid; inset: 0; place-items: center; background: rgba(32, 30, 29, .55); padding: 20px; }
.sp-ob-dialog { width: 100%; max-width: 460px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--aics-shadow-lg); }
.sp-ob-dialog__title { padding: 18px 20px 0; font-family: var(--font-heading); font-size: 17px; font-weight: 800; }
.sp-ob-dialog__body { padding: 10px 20px 0; color: var(--color-neutral-800); font-size: 14px; line-height: 1.5; }
.sp-ob-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 20px; }

@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .sp-ob-gen-step.is-current .sp-ob-gen-step__dot svg { animation: none; }
  .sp-launch-progress.is-waiting .sp-launch-progress__sent { animation: none; }
}

@media (max-width: 1279px) {
  .sp-ob-produits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .sp-ob-config { grid-template-columns: 1fr; }
  .sp-ob-summary { position: static; }
  .sp-ob-detail { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .sp-ob-produits { grid-template-columns: 1fr; }
  .sp-ob-produit { padding: 20px; }
  .sp-ob-main--produit { padding: 32px 16px; }
  .sp-ob-main--config,
  .sp-ob-main--biblio,
  .sp-ob-main--detail,
  .sp-ob-main--perso { padding: 28px 16px 48px; }
  .sp-ob-main--generation { padding: 48px 16px; }
  .sp-ob-filters .sp-ob-input,
  .sp-ob-filters .sp-ob-select { flex: 1 1 100%; max-width: none; }
  .sp-ob-filters__count { margin-left: 0; }
  .sp-ob-cards { grid-template-columns: 1fr; }
  .sp-ob-duo { grid-template-columns: 1fr; }
  .sp-ob-detail__ab-grid { grid-template-columns: 1fr; }
  .sp-ob-choice-row { flex-wrap: wrap; }
  .sp-ob-choice-row .sp-ob-choice { max-width: none; flex-basis: 100%; }
}

@media (min-width: 760px) and (max-width: 1279px) {
  .sp-header__nav,
  .sp-header__cta { display: none; }
  .sp-burger { display: inline-grid; }
  .sp-catalogue-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .sp-configurator { grid-template-columns: 38% 62%; }
  .sp-configurator__visual { min-height: 580px; padding: 20px; }
  .sp-template-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-account .aics-project-list { grid-template-columns: 1fr; }
  .aics-workspace { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: minmax(500px, 68vh) auto; }
  .aics-page-nav { grid-column: 1; grid-row: 1; }
  .aics-canvas-stage { grid-column: 2; grid-row: 1; }
  .aics-inspector { grid-column: 1 / -1; grid-row: 2; border-top: 2px solid var(--sp-ink); border-left: 0; }
  .aics-inspector-body { max-height: 440px; }
}

@media (max-width: 759px) {
  .sp-header__bar { min-height: 60px; padding: 10px 16px; }
  .sp-header__nav,
  .sp-header__cta,
  .sp-credits-pill span { display: none; }
  /* Sur mobile, le nombre seul : le libellé complet reste dans le title. */
  .sp-credits-pill__count { display: inline; }
  .sp-credits-pill { padding: 0 10px; }
  .sp-burger { display: inline-grid; }
  .sp-mobile-menu { top: 60px; }
  .sp-header__word { font-size: 13px; }
  .sp-hero__actions { width: 100%; }
  .sp-hero__actions > * { flex: 1 1 auto; }
  .sp-text-link { justify-content: space-between; }
  .sp-rail-section { padding-block: 40px; }
  .sp-rail__card { width: 62vw; }
  .sp-section { padding-block: 44px; }
  .sp-catalogue-layout { grid-template-columns: 1fr; }
  .sp-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .sp-apercu { grid-template-columns: 1fr; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .sp-auth-page { grid-template-columns: 1fr; min-height: auto; }
  .sp-auth-visual { min-height: clamp(260px, 65vw, 420px); border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .sp-auth-visual p { padding: 40px 20px 20px; }
  .sp-auth-card { padding: 40px 20px; }
  .sp-auth-form__row { grid-template-columns: 1fr; }
  .sp-account-layout { grid-template-columns: 1fr; }
  .sp-account-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--color-divider); padding: 14px 16px; }
  .sp-account-nav button { flex: none; white-space: nowrap; }
  .sp-account-nav__logout { flex: none; margin-top: 0; padding: 12px 10px; border-top: 0; border-left: 1px solid var(--sp-ink); white-space: nowrap; }
  .sp-order-row { grid-template-columns: 1fr; }
  .sp-order-row__status { justify-items: start; }
  .sp-order-detail__item { grid-template-columns: 56px minmax(0, 1fr); }
  .sp-order-detail__thumb { width: 56px; min-height: 56px; }
  .sp-order-detail__price { grid-column: 2; }
  .aics-shell.sp-wizard,
  .aics-shell.sp-account { min-height: calc(100vh - 118px); padding: 45px 16px; }
  .sp-configurator { grid-template-columns: 1fr; }
  .sp-configurator__visual { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .sp-configurator__visual .sp-product-visual { min-height: 280px; }
  .sp-configurator__form { padding: 28px 18px; }
  .sp-option-grid { grid-template-columns: 1fr; }
  .sp-template-grid { grid-template-columns: 1fr; }
  .sp-template-grid button { min-height: 300px; }
  .sp-personalize { grid-template-columns: 1fr; gap: 30px; }
  .sp-wizard-actions { position: sticky; z-index: 10; bottom: 0; margin-right: -18px; margin-left: -18px; background: var(--sp-page); padding: 14px 18px; }
  .sp-account .aics-project-list { grid-template-columns: 1fr; }
  .sp-account .aics-project-row { grid-template-columns: 92px 1fr; }
  .sp-account .aics-thumb { width: 92px; height: 110px; }
  .sp-account .aics-project-row .aics-button { flex: 1 1 0; }
  .aics-workspace { border-top: 0; }
  .aics-inspector { border-top-width: 2px; }
  .aics-app-actions .aics-button--order { position: fixed; z-index: 65; right: 8px; bottom: 8px; }
}

/* --------------------------------------------------------------------------
   Sections propres à la nouvelle accueil (variante Chaleureuse)
   -------------------------------------------------------------------------- */

/* « Une photo normale. Une idée pas du tout normale. » — trois colonnes
   photo d'origine / scène / support, chacune coiffée d'un numéro corail et
   d'un filet. Remplace l'ancien diptyque avant/après. */
.sp-avant__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.sp-avant__step { min-width: 0; }
.sp-avant__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--color-divider); padding-bottom: 10px; }
.sp-avant__num { font-family: var(--sp-font-heading); font-size: 15px; font-weight: 900; color: var(--color-accent); }
.sp-avant__label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sp-avant__visual { background: var(--color-neutral-100); }

/* Blocs « texte + visuel » côte à côte : le CTA corail au milieu de la page et
   le CTA final. Grille auto-fit, donc pas de media query dédiée. */
.sp-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; column-gap: 40px; row-gap: 32px; padding-block: clamp(48px, 6vw, 64px); }
.sp-split__copy { min-width: 0; }
.sp-split__copy h2 { margin: 0 0 20px; }
.sp-split__copy .sp-lead { margin: 0 0 28px; }
.sp-split__art { align-self: center; min-height: 300px; border-radius: var(--radius-lg); }
.sp-split__art--quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-self: center; width: 100%; min-height: 300px; max-height: 70vh; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.sp-split__tile { position: relative; min-width: 0; background: var(--color-accent-100); overflow: hidden; }

/* Emplacements d'avis. Ce ne sont volontairement PAS des témoignages : tant
   qu'aucune source d'avis réels n'est branchée, la maquette n'affiche que la
   carte vide et son étiquette. */
.sp-testimonial-slot { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 24px 22px; }
.sp-testimonial-slot__tag { align-self: flex-start; border: 2px solid var(--color-accent-300); border-radius: var(--radius-md); padding: 5px 8px; color: var(--color-accent-700); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sp-testimonial-slot p { margin: 0; color: var(--color-neutral-600); font-family: var(--sp-font-heading); font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.sp-testimonial-slot small { border-top: 2px solid var(--color-divider); padding-top: 12px; color: var(--color-neutral-600); font-size: 14px; }

.sp-reassurance__icon { display: block; margin-bottom: 12px; color: var(--color-accent); }

/* Occasions : rangée de puces cliquables (des <a> ici, des <button> ailleurs). */
.sp-occasions .sp-chip-row { padding: 0; gap: 10px; }
.sp-occasions .sp-chip-row a { display: inline-flex; align-items: center; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); padding: 13px 18px; color: var(--color-text); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; }
.sp-occasions .sp-chip-row a:hover { background: var(--color-text); color: var(--color-bg); }

/* Choix explicite d'un style global, accessible au clavier et sur mobile. */
.sp-book-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; margin: 28px 0; }
.sp-book-style__preview { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0; background: #f5f1eb; }
.sp-book-style__preview svg { display: block; width: 100%; height: 100%; }
.sp-book-style__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-book-style__swatch { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0; color: #29231f; font-weight: 700; }
@media (max-width: 900px) { .sp-book-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Deux colonnes sur téléphone : en pleine largeur, neuf styles faisaient
   neuf écrans à faire défiler pour comparer. */
@media (max-width: 480px) {
  .sp-book-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}

/* ==========================================================================
   Refonte de la vitrine (septembre 2026)
   --------------------------------------------------------------------------
   Couche ADDITIVE qui remplace le rendu de la vitrine (accueil, en-tête, pied
   de page, cartes, puces) sans toucher à l'éditeur (.aics-studio-app) ni aux
   écrans WooCommerce. Pour revenir en arrière : supprimer ce bloc jusqu'à la
   fin du fichier et restaurer le JSX d'AccueilView.

   Parti pris : un livre d'images. Aplats de couleur pleins (aucun dégradé, aucune
   transparence, aucune ombre floue), grandes formes arrondies, illustrations
   vectorielles à plat dans assets/images/storefront/. Le livre est le produit
   principal et occupe la place centrale ; les posters sont secondaires.
   ========================================================================== */

:root {
  --sp-header-height: 61px; /* barre de 60px + filet de 1px (--sp-border) */
  /* Géométrie reprise du tunnel de création (.sp-ob-*) : là-bas les panneaux
     sont à angle vif. La vitrine suit la même règle,
     sans exception : ni les cartes, ni les visuels, ni les étiquettes, ni les
     boutons ne portent de rayon. */
  --sp-r-panel: 0;
  --sp-r-control: 0;
  /* Un filet beige de 1 px : les cadres de 2 px d'encre sont retirés du site
     public, du tunnel, du compte et du paiement (2026-11-05). Le Studio garde
     les siens (.aics-studio-app, plus bas). */
  --sp-border: 1px solid var(--color-divider);
  --sp-art: "../images/storefront";
}

/* Vitrine, tunnel, compte et écrans WooCommerce : les jetons de rayon tombent
   à zéro pour TOUT ce qu'ils contiennent. Les rayons restants du fichier
   passent tous par l'un de ces jetons (y compris les `!important` de la couche
   checkout), donc cette seule redéfinition les annule, sans toucher à
   l'éditeur — qui vit sur `body.aics-project-page`, hors de cette liste, et
   garde sa propre échelle. */
.sp-site,
.sp-wizard-page,
.sp-account-page,
body.aics-flow-page,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received {
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --aics-radius: 0;
  --aics-radius-sm: 0;
  --aics-radius-lg: 0;
  --sp-r-control: 0;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sp-site { -webkit-font-smoothing: antialiased; }
.sp-site ::selection { background: var(--c-amber); color: var(--color-text); }
.sp-site :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* --- Barres de défilement ------------------------------------------------- */
/* Navigateurs WebKit/Blink : pouce en pilule, détaché des bords par une
   bordure transparente, qui passe au corail au survol. Le piste reste
   transparente pour prendre le fond de chaque zone (crème, blanc, encre).
   `scrollbar-width`/`scrollbar-color` ne sont posées que là où les
   pseudo-éléments -webkit- n'existent pas : Chrome ≥ 121 ignorerait sinon
   toute notre mise en forme au profit de la version standard. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 48px; min-width: 48px;
  border: 4px solid transparent;
  border-radius: 999px;
  background-color: var(--color-neutral-400);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); }
::-webkit-scrollbar-thumb:active { background-color: var(--color-accent-600); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; }
}

/* --- Typographie ---------------------------------------------------------- */
.sp-site h1, .sp-site h2, .sp-site h3,
.sp-wizard-page h1, .sp-wizard-page h2, .sp-wizard-page h3,
.sp-account-page h1, .sp-account-page h2, .sp-account-page h3 {
  font-weight: 800;
  letter-spacing: -.024em;
  word-spacing: .05em;
  text-wrap: balance;
}
.sp-section h2, .sp-rail-section h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.028em; margin-bottom: 0; }
.sp-section__intro { font-size: 18px; }
.sp-section { padding-block: clamp(56px, 7vw, 96px); }

/* --- En-tête : crème uni, navigation en pastilles ------------------------- */
.sp-header { border-bottom: var(--sp-border); background: var(--color-bg); }
.sp-header__mark { border-radius: 0; }
.sp-header__nav a { border-radius: var(--sp-r-control); padding: 8px 14px; }
.sp-header__nav a:hover { background: var(--color-neutral-200); color: var(--color-text); }
/* Page active : violet de marque en version douce plutôt que le noir d'origine,
   jugé trop triste. Pas l'aplat --color-accent, réservé au CTA de l'en-tête :
   la pastille active lui aurait disputé l'attention. Même couple que l'onglet
   actif de Mon compte (checkout.css). */
.sp-header__nav a.is-active { background: var(--color-accent-100); color: var(--color-accent-700); }
.sp-header__nav a.is-active:hover { background: var(--color-accent-200); }
.sp-credits-pill { border: 0; border-radius: var(--sp-r-control); background: var(--color-neutral-200); }
.sp-icon-btn { border-color: transparent; border-radius: var(--sp-r-control); }
.sp-icon-btn:hover { border-color: transparent; background: var(--color-neutral-200); }
.sp-mobile-menu { border-top: var(--sp-border); }
.sp-burger { border-radius: var(--sp-r-control); }

/* --- Sélecteur de langue ---------------------------------------------------
   Montre la langue ACTIVE, drapeau et code ; la liste se déplie au survol.

   Le survol n'ouvre la liste que sur un appareil qui survole vraiment
   (`hover: hover`). Sur un écran tactile, un toucher simule un survol qui
   « colle » : la liste ne se refermait plus au second toucher. Là, et au
   clavier, c'est le bouton qui ouvre et ferme (`.is-open`, posé par le script).

   Les drapeaux sont dessinés ici, en SVG, et non en émoji : Windows n'a pas
   d'émojis de drapeaux et affiche les deux lettres à la place. */
.sp-lang { position: relative; display: flex; }
.sp-lang__current {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--sp-r-control);
  background: var(--color-neutral-200);
  padding: 0 11px 0 12px;
  color: var(--color-text);
  font-family: var(--sp-font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
}
.sp-lang__current::after {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.sp-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 180px;
  margin: 0;
  border: var(--sp-border);
  background: var(--color-bg);
  padding: 6px 0;
  list-style: none;
  box-shadow: 4px 4px 0 var(--color-neutral-300);
  opacity: 0;
  visibility: hidden;
  /* Pendant le fondu de fermeture, la liste reste « visible » 0,15 s : sans
     cela, une option déjà transparente restait cliquable. */
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
/* Pont invisible entre le bouton et la liste : sans lui, le pointeur quittait
   la zone survolée en traversant l'espace qui les sépare, et la liste se
   refermait avant d'être atteinte. */
.sp-lang__menu::before { position: absolute; right: 0; bottom: 100%; left: 0; height: 10px; content: ""; }
.sp-lang.is-open .sp-lang__current { background: var(--c-amber); }
.sp-lang.is-open .sp-lang__current::after { transform: translateY(1px) rotate(-135deg); }
.sp-lang.is-open .sp-lang__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
@media (hover: hover) {
  .sp-lang:hover .sp-lang__current { background: var(--c-amber); }
  .sp-lang:hover .sp-lang__current::after { transform: translateY(1px) rotate(-135deg); }
  .sp-lang:hover .sp-lang__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
}
.sp-lang__menu li { margin: 0; }
.sp-lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--color-text);
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
a.sp-lang__option:hover,
a.sp-lang__option:focus-visible { background: var(--color-neutral-200); color: var(--color-text); outline: none; }
.sp-lang__option.is-active { cursor: default; }
.sp-lang__option.is-active::after { margin-left: auto; color: var(--color-accent); content: "\2713"; font-weight: 800; }
.sp-flag {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 14px;
  background: center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(42, 35, 32, .2);
}
.sp-flag--fr { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><path fill='%23ED2939' d='M0 0h3v2H0z'/><path fill='%23fff' d='M0 0h2v2H0z'/><path fill='%23002395' d='M0 0h1v2H0z'/></svg>"); }
.sp-flag--en { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='c'><path d='M30 15h30v15zv15H0zH0V0zV0h30z'/></clipPath><path fill='%23012169' d='M0 0h60v30H0z'/><path stroke='%23fff' stroke-width='6' d='M0 0l60 30M60 0L0 30'/><path stroke='%23C8102E' stroke-width='4' clip-path='url(%23c)' d='M0 0l60 30M60 0L0 30'/><path stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/><path stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/></svg>"); }
@media (prefers-reduced-motion: reduce) {
  .sp-lang__menu, .sp-lang__current::after { transition: none; }
}
/* Le CTA d'en-tête était la seule pilule pleine de la maquette ; il rentre dans
   le rang, sinon il jure avec tous les autres contrôles. */
.sp-site .sp-header__cta,
.sp-wizard-page .sp-header__cta,
.sp-account-page .sp-header__cta { border-radius: var(--sp-r-control); }
.sp-site .aics-button,
.sp-wizard-page .aics-button,
.sp-account-page .aics-button { border-radius: var(--sp-r-control); }

/* --- Hero : la nuit d'une histoire ---------------------------------------- */
.sp-hero {
  align-items: end;
  min-height: 0;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: 0;
  background: var(--c-violet);
  color: var(--color-bg);
}
.sp-hero__copy { align-self: center; padding: 0 0 clamp(40px, 6vw, 80px); }
.sp-hero h1 { color: var(--color-bg); font-size: clamp(42px, 5vw, 80px); line-height: .96; letter-spacing: -.03em; }
/* Mot surligné dans un titre : aplat ambre, légère inclinaison — la signature
   des titres de la vitrine. Dans Gutenberg, c'est le format « Surligner » de la
   barre d'outils (blocks/editor.js), qui pose <mark class="aics-highlight">. Un
   `inline-block` ne se coupe pas en fin de ligne : à réserver à un mot ou deux.
   `.sp-hero h1 em` reste pour les pages encore dessinées par la vitrine React. */
.aics-highlight,
.sp-hero h1 em {
  display: inline-block;
  margin: 0 .04em;
  padding: 0 .14em .06em;
  border-radius: 0;
  background: var(--c-amber);
  color: var(--color-text);
  font-style: normal;
  transform: rotate(-2deg);
}
.sp-hero .sp-lead { max-width: 56ch; color: var(--c-violet-soft); font-size: clamp(17px, 1.5vw, 20px); }
.sp-kicker { width: fit-content; margin-bottom: 26px; border-radius: 0; background: var(--color-bg); padding: 8px 16px; color: var(--color-text); letter-spacing: .12em; }
.sp-kicker i { display: none; }
.sp-hero .aics-button:not(.aics-button--primary) { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-text); }
.sp-hero .aics-button:not(.aics-button--primary):hover { border-color: var(--c-amber); background: var(--c-amber); color: var(--color-text); }
/* Sur le fond violet de l'accueil, le CTA violet se fondait dans la bannière.
   L'ambre le détache et garde un libellé sombre bien lisible. */
.aics-marketing-view-home .sp-hero .aics-button--primary { border-color: var(--c-amber); background: var(--c-amber); color: var(--color-text); }
.aics-marketing-view-home .sp-hero .aics-button--primary:hover { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-text); }
.sp-hero__note { margin: 24px 0 0; color: var(--c-violet-soft); font-size: 14px; }
.sp-hero__art {
  display: block;
  align-self: end;
  min-height: 0;
  aspect-ratio: 640 / 620;
  padding: 0;
  overflow: visible;
  background: url("../images/storefront/hero-scene.svg") center bottom / contain no-repeat;
}
.sp-hero__art > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Les trois produits : cartes identiques, presque pas de texte ----------- */
/* Le livre reste le produit principal, mais par le marquage (pastille, filet
   corail, bouton plein) et non par la taille : trois cartes de même gabarit se
   comparent d'un coup d'œil, une carte géante + deux vignettes non. */
/* Trois fonds sur toute la page, et rien d'autre : le violet pour le hero et
   l'appel final, puis le blanc et --color-neutral-100 en alternance stricte
   entre les deux (produits blanc, démo sable, étapes blanc, idées sable), et
   la réassurance en blanc avant le pied de page encre. */
.sp-offer { background: #fff; }
.sp-how { background: #fff; }
.sp-offer .sp-section__head { align-items: baseline; margin-bottom: 20px; }
/* Exactement la grille des produits du tunnel : un filet beige autour, des
   filets de 1 px entre les cartes obtenus par `gap` sur un fond beige, et des
   cartes sans bordure propre. */
.sp-offer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; border: var(--sp-border); background: var(--color-divider); }
.sp-offer__card {
  position: relative;
  display: flex; flex-direction: column;
  border: 0;
  border-radius: var(--sp-r-panel);
  background: #fff;
  padding: 0;
  color: var(--color-text);
  text-decoration: none;
}
.sp-offer__card:hover { background: var(--color-neutral-100); }
/* La carte du livre se signale comme la carte sélectionnée du tunnel : par un
   fond, pas par un cerclage — la grille porte déjà tous les filets. Ce fond est
   --color-neutral-100, le seul des trois fonds de la page qui distingue une
   carte du blanc de ses voisines. */
.sp-offer__card--primary { background: var(--color-neutral-100); }
.sp-offer__card--primary:hover { background: var(--color-neutral-200); }
/* Le visuel occupe toute la largeur de la carte, du filet de gauche à celui de
   droite, et se ferme par un filet au-dessus du texte : c'est la même
   construction que l'aperçu des cartes du tunnel, en pleine page. Chaque scène
   montre le produit en situation — le livre posé, le poster scotché, le cadre
   suspendu — ce qui illustre littéralement le titre de la section. */
.sp-offer__art { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--sp-border); }
.sp-offer__art::before { position: absolute; inset: 0; background: center / cover no-repeat; content: ""; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.sp-offer__card--book .sp-offer__art::before { background-image: url("../images/storefront/offer-book.svg"); }
.sp-offer__card--pdf .sp-offer__art::before { background-image: url("../images/storefront/offer-book.svg"); }
.sp-offer__card--pdf .sp-offer__art::after { content: "PDF"; position: absolute; right: 20px; top: 20px; background: var(--color-text); color: #fff; padding: 8px 12px; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.sp-offer__card--poster .sp-offer__art::before { background-image: url("../images/storefront/offer-poster.svg"); }
.sp-offer__card--framed .sp-offer__art::before { background-image: url("../images/storefront/offer-framed.svg"); }
.sp-offer__card:hover .sp-offer__art::before { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .sp-offer__art::before { transition: none; }
  .sp-offer__card:hover .sp-offer__art::before { transform: none; }
}
/* Pastille calée dans l'angle, comme les badges des cartes d'inspiration. */
.sp-offer__badge { position: absolute; z-index: 1; top: 0; left: 0; border-radius: 0; background: var(--color-text); padding: 8px 14px; color: var(--color-bg); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sp-offer__body { display: flex; flex: 1; flex-direction: column; padding: 24px 26px 28px; }
.sp-offer__card h3 { margin: 0 0 6px; font-size: clamp(22px, 1.7vw, 26px); line-height: 1.1; }
.sp-offer__text { max-width: 34ch; color: var(--color-neutral-700); font-size: 15px; line-height: 1.5; }
.sp-offer__go { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; color: var(--color-accent-700); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sp-offer__card:hover .sp-offer__go { color: var(--color-text); }
.sp-offer__go svg { transition: transform .2s ease; }
.sp-offer__card:hover .sp-offer__go svg { transform: translateX(4px); }

/* --- Trois étapes (accueil) --------------------------------------------- */
/* Même construction que la grille des produits et celle des engagements : un
   filet autour et des filets beiges de 1 px (gap sur fond beige), un panneau
   illustré pleine largeur en tête de chaque carte, le numéro dans un badge d'encre calé
   dans l'angle, le texte sur blanc. Les trois aplats décalés d'avant étaient le
   seul bloc de la page à échapper à cette construction.
   Entre deux cartes, un carré d'encre à cheval sur le filet porte une flèche :
   il dit le sens de lecture 01 → 02 → 03. */
.sp-how h2 { max-width: 20ch; margin-bottom: 12px; }
.sp-how .sp-section__intro { margin-bottom: 40px; }
.sp-how__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; border: var(--sp-border); background: var(--color-divider); list-style: none; }
.sp-how__card { position: relative; display: flex; flex-direction: column; min-height: 0; margin: 0; background: #fff; padding: 0; color: var(--color-text); }
.sp-how__card--coral { --tone: var(--color-accent); }
.sp-how__card--teal { --tone: var(--c-teal); }
.sp-how__card--amber { --tone: var(--c-amber); }
.sp-how__card--violet { --tone: var(--c-violet); }
.sp-how__art { position: relative; display: block; flex: none; aspect-ratio: 16 / 10; margin: 0; border-bottom: var(--sp-border); background: var(--tone) center / auto 66% no-repeat; }
.sp-how__art--photo { background-image: url("../images/storefront/how-photo.svg"); }
.sp-how__art--hero { background-image: url("../images/storefront/how-hero.svg"); }
.sp-how__art--book { background-image: url("../images/storefront/how-book.svg"); }
.sp-how__card:not(:last-child) .sp-how__art::after {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -23px;
  width: 44px;
  height: 44px;
  background: var(--color-text) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fbf6ee' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  content: "";
  transform: translateY(-50%);
}
.sp-how__num { position: absolute; z-index: 1; top: 0; left: 0; background: var(--color-text); padding: 8px 12px; color: var(--color-bg); font-family: var(--sp-font-heading); font-size: 18px; font-weight: 800; letter-spacing: 0; line-height: 1; }
.sp-how__card h3 { margin: 26px 28px 8px; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.sp-how__card p { margin: 0 28px 30px; color: var(--color-neutral-700); font-size: 16px; line-height: 1.5; }

/* --- Idées : puces + créations populaires ---------------------------------- */
.sp-populaires { border: 0; background: var(--color-neutral-100); }
.sp-populaires .sp-section__head { margin-bottom: 24px; }
.sp-ideas { margin: 0 0 40px; padding: 0; gap: 10px; }
.sp-ideas a { display: inline-flex; align-items: center; border: 0; border-radius: 0; background: #fff; padding: 12px 20px; color: var(--color-text); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; }
.sp-ideas a:hover { background: var(--color-text); color: var(--color-bg); }

/* La grille des cartes : trois colonnes larges, une seule respiration (28px),
   et une hauteur de visuel identique — c'est ce qui rend la rangée lisible. */
.sp-populaires .sp-catalogue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sp-showcase-card { border: var(--sp-border); border-radius: 0; background: #fff; }
.sp-showcase-card__visual { aspect-ratio: 1 / 1; background: var(--c-teal) url("../images/storefront/pattern-stars.svg") center / 120px repeat; }
.sp-catalogue-grid > .sp-showcase-card:nth-child(4n+1) .sp-showcase-card__visual { background-color: var(--color-accent); }
.sp-catalogue-grid > .sp-showcase-card:nth-child(4n+2) .sp-showcase-card__visual { background-color: var(--c-violet); }
.sp-catalogue-grid > .sp-showcase-card:nth-child(4n+3) .sp-showcase-card__visual { background-color: var(--c-amber); }
.sp-showcase-card__visual:has(img) { background-image: none; }
.sp-badge { top: 0; left: 0; z-index: 2; border-radius: 0; background: var(--color-text); padding: 7px 13px; color: var(--color-bg); }
.sp-favorite { top: 0; right: 0; z-index: 2; width: 40px; height: 40px; border: 0; border-bottom: var(--sp-border); border-left: var(--sp-border); border-radius: 0; background: var(--color-bg); }
.sp-favorite:hover { background: var(--c-amber); color: var(--color-text); }
.sp-favorite.is-active { background: var(--sp-red); color: #fff; }
.sp-showcase-card__body { padding: 24px 24px 26px; }
.sp-showcase-card__body h3, .sp-showcase-card__body h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.15; }
/* Deux lignes au plus : au-delà, les cartes d'une même rangée cessent d'avoir
   le même rythme et la rangée devient illisible. */
.sp-showcase-card__body > p { display: -webkit-box; overflow: hidden; margin: 0 0 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 4; color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }

/* Les supports (et le destinataire) sont des étiquettes, plus un tableau de
   définitions : même information, deux fois moins de hauteur. */
.sp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.sp-tag { border: 0; border-radius: 0; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s; }
/* Couleurs des étiquettes : voir « Code couleur des filtres » en fin de fichier. */
.sp-showcase-card__actions .aics-button { min-height: 36px; height: 36px; padding: 0 16px; font-size: 13px; }

/* --- Appel final : quatre proches, un livre --------------------------------- */
/* Fond violet et texte crème : le corail sous encre de la version précédente
   tombait à 3,1:1, sous le minimum de 4,5:1 pour du texte courant. */
.sp-cta-final { background: var(--c-violet); color: var(--color-bg); }
.sp-cta-final h2, .sp-cta-final .sp-lead { color: var(--color-bg); }
.sp-cta-final .sp-lead { color: var(--c-violet-soft); }
.sp-site .sp-cta-final .aics-button--primary { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-text); }
.sp-site .sp-cta-final .aics-button--primary:hover { border-color: var(--c-amber); background: var(--c-amber); color: var(--color-text); }
.sp-split { column-gap: clamp(32px, 6vw, 96px); }
.sp-split__copy h2 { font-size: clamp(34px, 4.6vw, 68px); }
/* Le cadre porte la grille ET la marge : les vignettes étaient inclinées, et
   une rotation déborde toujours de la boîte qui la contient — d'où les coins
   qui sortaient du conteneur. Plus de rotation, une grille carrée bornée. */
.sp-cta-final .sp-split__art--quad {
  justify-self: end;
  width: min(100%, 640px);
  min-height: 0; max-height: none;
  aspect-ratio: 1;
  gap: 16px;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.sp-cta-final .sp-split__tile { border-radius: 0; background: var(--c-violet-soft) center / cover no-repeat; transform: none; }
.sp-cta-final .sp-split__tile:nth-child(1) { background-image: url("../images/storefront/face-1.svg"); }
.sp-cta-final .sp-split__tile:nth-child(2) { background-image: url("../images/storefront/face-2.svg"); }
.sp-cta-final .sp-split__tile:nth-child(3) { background-image: url("../images/storefront/face-3.svg"); }
.sp-cta-final .sp-split__tile:nth-child(4) { background-image: url("../images/storefront/face-4.svg"); }
.sp-cta-final .sp-split__tile > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Puces de filtre du catalogue ------------------------------------------ */
.sp-chip-row button { border: 0; border-radius: 0; background: var(--color-neutral-200); font-weight: 700; }
.sp-chip-row button:hover { background: var(--color-text); color: var(--color-bg); }
.sp-chip-row button.is-active { background: var(--sp-red); color: var(--color-text); }

/* --- Pied de page : violet primaire (même teinte que le hero, --c-violet) ---- */
.sp-footer { border-top: 0; background: var(--c-violet); color: #fff; }
.sp-footer__wordmark { display: block; width: 140px; height: auto; margin-bottom: 4px; }
/* Le logo de la marque est commun à tout le site ; sur le pied de page
   violet, il s'affiche en blanc plutôt que de disparaître. */
.sp-footer__wordmark { filter: brightness(0) invert(1); }
.sp-footer p { color: #fff; }
.sp-footer nav strong { color: #fff; }
.sp-footer a { color: #fff; }
.sp-footer a:hover { color: var(--c-amber); }
.sp-footer__grid { border-bottom: 1px solid var(--color-accent-300); }
.sp-footer__legal nav a, .sp-footer__legal small { color: #fff; }
.sp-footer__payments span { border: 1px solid var(--color-accent-300); border-radius: 0; color: #fff; }

/* --- Adaptatif ------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-populaires .sp-catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-how__list { grid-template-columns: 1fr; }
  /* Empilées, les cartes se lisent de haut en bas : la flèche quitte le bord
     droit de l'illustration pour le filet sous la carte, et pointe vers le bas. */
  .sp-how__card:not(:last-child) .sp-how__art::after { display: none; }
  .sp-how__card:not(:last-child)::after {
    position: absolute; z-index: 3; bottom: -23px; left: 50%;
    width: 44px; height: 44px;
    background: var(--color-text) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fbf6ee' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
    content: ""; transform: translateX(-50%);
  }
}
/* Sous ~350px, la barre d'en-tête (marque + 4 contrôles de 40px) dépassait la
   fenêtre et faisait défiler toute la page horizontalement. Le mot-symbole
   s'efface : le logo reste le lien d'accueil, avec son aria-label. */
@media (max-width: 399px) {
  .sp-header__wordmark { display: none; }
}
@media (max-width: 759px) {
  .sp-hero { padding-top: 32px; }
  .sp-hero__copy { padding-bottom: 32px; }
  .sp-hero__actions { width: 100%; }
  .sp-offer__grid, .sp-populaires .sp-catalogue-grid { grid-template-columns: 1fr; }
  .sp-cta-final .sp-split__art--quad { justify-self: stretch; width: 100%; max-width: 520px; }
}

/* Studio, étape « produit » : la grille d'origine du tunnel est conservée telle
   quelle (filets fins, angles vifs) ; seul l'aperçu gris
   « Aperçu du … » cède la place à l'illustration du produit, et le livre, qui
   est le produit principal, reçoit sa pastille. */
.sp-ob-produit__preview { background: var(--c-amber) center / contain no-repeat; }
.sp-ob-produit__preview > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp-ob-produit:nth-child(1) .sp-ob-produit__preview { background-image: url("../images/storefront/product-book.svg"); background-size: 88% auto; }
.sp-ob-produit:nth-child(2) .sp-ob-produit__preview { background-color: var(--c-teal-soft); background-image: url("../images/storefront/product-poster.svg"); background-size: auto 86%; }
.sp-ob-produit:nth-child(3) .sp-ob-produit__preview { background-color: var(--c-violet-soft); background-image: url("../images/storefront/product-framed.svg"); background-size: auto 86%; }
.sp-ob-produit:nth-child(2) .sp-ob-produit__preview--pdf { position: relative; background-color: var(--c-teal-soft); background-image: url("../images/storefront/product-book.svg"); background-size: 88% auto; }
.sp-ob-produit__preview--pdf::after { content: "PDF"; position: absolute; right: 20px; top: 20px; padding: 7px 11px; background: var(--color-text); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.sp-ob-produit:nth-child(1)::before { content: "Recommandé"; position: absolute; z-index: 1; top: 30px; left: 30px; border-radius: 0; background: var(--color-text); padding: 6px 12px; color: var(--color-bg); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 1280px) {
  .sp-ob-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Fantômes de chargement de la grille ----------------------------------- */
/* Même gabarit qu'une carte réelle (visuel carré, titre, deux lignes,
   étiquettes, barre d'actions) : la grille garde sa hauteur, et rien ne saute
   quand les vraies cartes la remplacent. Filet plus clair que l'encre des
   cartes, pour que l'attente se lise comme une attente. */
.sp-skeleton { border-color: var(--color-neutral-300); }
.sp-skeleton__visual { display: block; aspect-ratio: 1 / 1; background: var(--color-neutral-200); }
.sp-skeleton__body { display: block; padding: 24px 24px 26px; }
.sp-skeleton__line { display: block; height: 12px; background: var(--color-neutral-200); }
.sp-skeleton__line--title { width: 72%; height: 20px; margin-bottom: 16px; }
.sp-skeleton__line + .sp-skeleton__line { margin-top: 8px; }
.sp-skeleton__line--short { width: 56%; }
.sp-skeleton__tags { display: flex; gap: 8px; margin: 20px 0; }
.sp-skeleton__tag { display: block; width: 62px; height: 26px; background: var(--color-neutral-200); }
.sp-skeleton__tag:nth-child(2) { width: 78px; }
.sp-skeleton__tag:nth-child(3) { width: 54px; }
.sp-skeleton__actions { display: flex; align-items: center; justify-content: space-between; }
.sp-skeleton__link { display: block; width: 62px; height: 12px; background: var(--color-neutral-200); }
.sp-skeleton__btn { display: block; width: 122px; height: 36px; background: var(--color-neutral-200); }
/* La pulsation joue sur la couleur, pas sur l'opacité : les aplats restent
   opaques, comme le reste du système. */
@media (prefers-reduced-motion: no-preference) {
  .sp-skeleton__visual,
  .sp-skeleton__line,
  .sp-skeleton__tag,
  .sp-skeleton__link,
  .sp-skeleton__btn { animation: sp-skeleton-pulse 1.6s ease-in-out infinite; }
}
@keyframes sp-skeleton-pulse { 50% { background-color: var(--color-neutral-100); } }

/* --- Liste déroulante maison ------------------------------------------------ */
/* Un <select> natif ne laisse styler que sa boîte fermée ; sa liste ouverte est
   dessinée par le système et ignore le CSS. Le tri du catalogue passe donc par
   le composant SpSelect (bouton + panneau role="listbox"), habillé ici au même
   gabarit que les autres contrôles : angle vif, filet fin, aplats. */
.sp-select { position: relative; display: inline-grid; }
.sp-select__trigger {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: var(--sp-border);
  background: #fff;
  padding: 0 12px 0 14px;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.sp-select__trigger:hover,
.sp-select.is-open .sp-select__trigger { background: var(--color-neutral-100); }
.sp-select__trigger svg { flex: none; transition: transform .15s ease; }
.sp-select.is-open .sp-select__trigger svg { transform: scaleY(-1); }
@media (prefers-reduced-motion: reduce) { .sp-select__trigger svg { transition: none; } }

/* Le panneau recouvre le contenu : il lui faut un fond plein et un z-index
   au-dessus des cartes de la grille, qui montent à 2. */
.sp-select__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: grid;
  min-width: max-content;
  border: var(--sp-border);
  background: #fff;
  padding: 4px;
}
.sp-select__option {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  background: none;
  padding: 0 10px;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.sp-select__option:hover { background: var(--color-neutral-100); }
/* Le focus clavier doit rester lisible sur l'option sélectionnée, qui est déjà
   en encre pleine : un liseré corail à l'intérieur, pas un simple fond. */
.sp-select__option:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.sp-select__option.is-selected { background: var(--color-text); color: var(--color-bg); font-weight: 700; }
.sp-select__option.is-selected:hover { background: var(--color-neutral-800); }
.sp-select__option svg { flex: none; }

.sp-sort { display: flex; align-items: center; gap: 10px; color: var(--color-neutral-700); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* --- Démo : de la photo au héros ------------------------------------------ */
.sp-demo { background: var(--color-neutral-100); }
.sp-demo__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.sp-demo__copy h2 { margin: 0 0 18px; }
.sp-demo__copy .sp-lead { margin: 0 0 28px; }
.sp-demo__figure { margin: 0; }
.sp-demo__stage {
  position: relative;
  aspect-ratio: 800 / 560;
  overflow: hidden;
  border: var(--sp-border);
  background: var(--color-bg);
  user-select: none;
}
.sp-demo__layer { position: absolute; inset: 0; background: center / cover no-repeat; }
.sp-demo__layer-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-demo__layer--before { z-index: 1; background-image: url("../images/storefront/demo-photo.svg"); }
.sp-demo__layer--after { background-image: url("../images/storefront/demo-hero.svg"); }
/* Le trait de coupe et sa poignée suivent le curseur ; ils sont purement
   visuels, c'est l'<input> invisible posé par-dessus qui reçoit le geste. */
.sp-demo__divider { position: absolute; z-index: 2; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--color-text); pointer-events: none; }
/* Poignée placée bas, sur le buste : centrée, elle masquait le visage — donc
   précisément la transformation que la démo doit montrer. */
.sp-demo__handle { position: absolute; top: 80%; left: 50%; display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; border: var(--sp-border); background: var(--color-accent); color: var(--color-bg); transform: translate(-50%, -50%); }
.sp-demo__tag { position: absolute; z-index: 2; top: 0; background: var(--color-text); padding: 8px 14px; color: var(--color-bg); font-size: 11px; font-weight: 800; letter-spacing: .08em; pointer-events: none; text-transform: uppercase; }
.sp-demo__tag--before { left: 0; }
.sp-demo__tag--after { right: 0; }
.sp-demo__range {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
/* L'<input> étant invisible, c'est le cadre qui porte le focus clavier. */
.sp-demo__stage:has(.sp-demo__range:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.sp-demo__caption { margin: 12px 0 0; color: var(--color-neutral-600); font-size: 13px; }

/* --- Réassurance, avant le pied de page ------------------------------------ */
/* Même construction que la grille des produits (filets beiges de 1 px) : la
   section prolonge la DA au lieu de former un bandeau à part. */
.sp-assure { background: #fff; padding-block: clamp(48px, 5vw, 72px); }
.sp-assure__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; border: var(--sp-border); background: var(--color-divider); list-style: none; }
.sp-assure__item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; padding: 28px 26px 30px; }
.sp-assure__icon { display: grid; width: 48px; height: 48px; margin-bottom: 8px; place-items: center; }
.sp-assure__icon--teal { background: var(--c-teal); color: var(--color-bg); }
.sp-assure__icon--amber { background: var(--c-amber); color: var(--color-text); }
.sp-assure__icon--coral { background: var(--color-accent); color: var(--color-bg); }
.sp-assure__icon--violet { background: var(--c-violet); color: var(--color-bg); }
.sp-assure__item h3 { margin: 0; font-size: 19px; line-height: 1.15; }
.sp-assure__item p { margin: 0; color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }

@media (max-width: 1023px) {
  .sp-demo__grid { grid-template-columns: 1fr; }
  .sp-assure__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .sp-assure__grid { grid-template-columns: 1fr; }
  /* Empilées en colonne, les quatre cellules faisaient 800px de haut : en
     ligne (icône à gauche, texte à droite), elles tiennent en moitié moins. */
  .sp-assure__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 4px 16px; padding: 20px; }
  .sp-assure__icon { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; }
  .sp-assure__item h3 { font-size: 17px; }
  .sp-demo__handle { width: 44px; height: 44px; }
}

/* --- Code couleur des filtres ---------------------------------------------- */
/* Une couleur par catégorie de filtre, appliquée partout où un filtre apparaît :
   colonne du catalogue, étiquettes des cartes, puces de l'accueil et de la
   galerie. Le JS ne fait que poser la classe .sp-cat-<catégorie> ; les
   couleurs vivent ici, à un seul endroit.

   Trois valeurs par catégorie :
   --cat-mark  repère graphique (carré de légende, case cochée) : 3:1 suffit ;
   --cat-fill  aplat qui porte du texte (étiquette active, puce survolée),
               avec --cat-on pour ce texte : 4,5:1 exigé à 12-14px, d'où le
               corail FONCÉ pour « Qui est mis en scène » — l'encre sur le
               corail vif plafonne à 4,47:1 ;
   --cat-soft  fond d'une étiquette au repos, texte encre. */
.sp-cat-recipient { --cat-mark: var(--color-accent); --cat-fill: var(--color-accent-700); --cat-on: var(--color-bg); --cat-soft: var(--color-accent-100); }
.sp-cat-occasion  { --cat-mark: var(--c-amber);      --cat-fill: var(--c-amber);          --cat-on: var(--color-text); --cat-soft: var(--c-amber-soft); }
.sp-cat-universe  { --cat-mark: var(--c-violet);     --cat-fill: var(--c-violet);         --cat-on: var(--color-bg); --cat-soft: var(--c-violet-soft); }
.sp-cat-support   { --cat-mark: var(--color-text);   --cat-fill: var(--color-text);       --cat-on: var(--color-bg); --cat-soft: var(--color-neutral-200); }
.sp-cat-people    { --cat-mark: var(--c-teal);       --cat-fill: var(--c-teal);           --cat-on: var(--color-bg); --cat-soft: var(--c-teal-soft); }

/* Colonne de filtres : un carré de couleur devant chaque intitulé de groupe, et
   des cases redessinées (angle vif, filet fin) qui se remplissent de la
   couleur du groupe une fois cochées. */
.sp-filter-group legend { display: flex; align-items: center; gap: 10px; }
.sp-filter-group[class*="sp-cat-"] legend::before { flex: none; width: 12px; height: 12px; background: var(--cat-mark); content: ""; }
.sp-filter-option input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--color-neutral-500);
  background: #fff;
  cursor: pointer;
}
.sp-filter-option input:checked { background: var(--cat-mark, var(--color-text)); box-shadow: inset 0 0 0 3px #fff; }
.sp-filter-option input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.sp-filter-option:has(input:checked) span { font-weight: 700; }

/* Étiquettes des cartes : fond clair au repos, liseré de la catégorie au
   survol, aplat plein quand le filtre est actif. Le carré de couleur devant le
   libellé est le vrai porteur du code : au repos, les teintes claires du corail,
   de l'ambre et du sable sont trop proches pour identifier seules la catégorie.
   C'est le même repère que devant les intitulés de la colonne et les puces. */
.sp-tag[class*="sp-cat-"] { display: inline-flex; align-items: center; background: var(--cat-soft); color: var(--color-text); }
.sp-tag[class*="sp-cat-"]::before { flex: none; width: 8px; height: 8px; margin-right: 7px; background: var(--cat-mark); content: ""; }
.sp-tag[class*="sp-cat-"]:hover { box-shadow: inset 0 0 0 2px var(--cat-mark); }
.sp-tag[class*="sp-cat-"].is-active { background: var(--cat-fill); color: var(--cat-on); box-shadow: none; }
.sp-tag[class*="sp-cat-"].is-active::before { background: var(--cat-on); }

/* Puces (accueil et galerie) : fond blanc et carré de couleur devant le libellé,
   aplat de la catégorie au survol et à l'état actif. */
.sp-ideas a[class*="sp-cat-"],
.sp-chip-row button[class*="sp-cat-"] { display: inline-flex; align-items: center; }
.sp-ideas a[class*="sp-cat-"]::before,
.sp-chip-row button[class*="sp-cat-"]::before { flex: none; width: 10px; height: 10px; margin-right: 10px; background: var(--cat-mark); content: ""; }
.sp-ideas a[class*="sp-cat-"]:hover,
.sp-chip-row button[class*="sp-cat-"]:hover,
.sp-chip-row button[class*="sp-cat-"].is-active { background: var(--cat-fill); color: var(--cat-on); }
.sp-ideas a[class*="sp-cat-"]:hover::before,
.sp-chip-row button[class*="sp-cat-"]:hover::before,
.sp-chip-row button[class*="sp-cat-"].is-active::before { background: var(--cat-on); }
/* « Tout » n'a pas de catégorie : il s'allume en encre. */
.sp-chip-row button.is-active { background: var(--color-text); color: var(--color-bg); }

/* --- Hero : exactement la hauteur de l'écran sous l'en-tête ----------------- */
/* Deux colonnes égales laissaient 660px au texte : le titre y tombait sur cinq
   lignes et la bannière dépassait l'écran (887px pour 714 disponibles en
   1570×776). La colonne de texte prend maintenant 60% de la largeur et le titre
   est plafonné à 80px : trois lignes, et le hero tient dans l'écran.

   `min-height` et non `height` : sur un écran bas, un contenu plus haut que la
   fenêtre agrandit la bannière au lieu d'être rogné. `svh` plutôt que `dvh` :
   la hauteur ne doit pas sauter quand la barre d'adresse mobile apparaît.
   Réservé aux deux colonnes : empilé, le hero est de toute façon plus haut
   qu'un écran. */
@media (min-width: 1024px) {
  /* L'illustration va jusqu'au bord droit de l'écran, le texte reste aligné
     sur le reste de la page. On retire donc la marge de droite du hero, et la
     colonne de texte garde sa largeur d'avant (60% du contenu, gouttière de
     40px déduite) : c'est la colonne de l'illustration, en `1fr`, qui absorbe
     toute la place gagnée à droite.

     La largeur du texte est calculée en `vw` parce qu'un pourcentage, dans
     grid-template-columns, se rapporte à la boîte du hero UNE FOIS sa marge de
     gauche retirée, pas à la largeur de la page. Le `vw` compte la barre de
     défilement quand elle occupe de la place : le texte peut y gagner quelques
     pixels, mais rien ne déborde, puisque l'illustration prend le reste. */
  .sp-hero {
    grid-template-columns: minmax(0, calc((min(100vw - 2 * var(--sp-gutter), var(--sp-max)) - 40px) * .6)) minmax(0, 1fr);
    min-height: calc(100vh - var(--sp-header-height));
    min-height: calc(100svh - var(--sp-header-height));
    padding-top: 0;
    padding-right: 0;
  }
  .sp-hero__copy { padding: 56px 0; }
  .sp-hero__art { background-position: right bottom; }
}
/* Empilée sous le texte, l'illustration va d'un bord à l'autre : ne toucher que
   le bord droit la décentrerait. Sous 1024px la marge du hero vaut toujours
   exactement --sp-gutter (la page est plus étroite que --sp-max), d'où cette
   marge négative égale. */
@media (max-width: 1023px) {
  /* La règle de base pose `width: 100%` : la marge négative ne ferait alors que
     décaler l'illustration sans l'élargir. `width: auto` + `justify-self:
     stretch` la laissent occuper sa cellule PLUS les deux marges. */
  .sp-hero__art { width: auto; justify-self: stretch; margin-inline: calc(-1 * var(--sp-gutter)); }
}

/* --- Pages d'information : Comment ça marche, FAQ, Contact ---------------- */
/* Une colonne centrée, un en-tête centré, et un encadré violet qui renvoie vers
   la page Contact en bas de page — le formulaire ne vit plus que là. */
.sp-info-page { max-width: 1040px; margin: 0 auto; padding: 0 var(--sp-gutter) clamp(64px, 8vw, 104px); }
.sp-info-intro { padding: 40px 0 clamp(40px, 5vw, 56px); text-align: center; }
.sp-info-intro .sp-breadcrumb { justify-content: center; max-width: none; margin: 0 0 28px; padding: 0; }
.sp-info-intro h1 { margin: 0 0 18px; font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -.03em; }
.sp-info-intro .sp-lead { max-width: 58ch; margin: 0 auto; }
.sp-info-intro__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* Comment ça marche : la démo avant/après, puis les étapes détaillées. */
.sp-info-demo { max-width: 880px; margin: 0 auto clamp(56px, 7vw, 88px); }
.sp-info-steps h2 { margin: 0 0 28px; text-align: center; }
/* Même construction que la grille des produits de l'accueil : un filet autour
   et des filets beiges de 1 px (gap sur fond beige). */
.sp-journey { display: grid; gap: 1px; margin: 0; padding: 0; border: var(--sp-border); background: var(--color-divider); list-style: none; }
.sp-journey__step { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); background: #fff; }
.sp-journey__step--coral { --step: var(--color-accent); --step-on: var(--color-text); }
.sp-journey__step--teal { --step: var(--c-teal); --step-on: var(--color-bg); }
.sp-journey__step--amber { --step: var(--c-amber); --step-on: var(--color-text); }
.sp-journey__art { position: relative; min-height: 240px; background: var(--step) center / 62% no-repeat; }
.sp-journey__art--photo { background-image: url("../images/storefront/how-photo.svg"); }
.sp-journey__art--hero { background-image: url("../images/storefront/how-hero.svg"); }
.sp-journey__art--book { background-image: url("../images/storefront/how-book.svg"); }
.sp-journey__num { position: absolute; top: 0; left: 0; background: var(--color-text); padding: 8px 12px; color: var(--color-bg); font-family: var(--sp-font-heading); font-size: 18px; font-weight: 800; line-height: 1; }
.sp-journey__body { padding: clamp(24px, 3vw, 36px); }
.sp-journey__body h3 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; }
.sp-journey__body > p { margin: 0 0 20px; color: var(--color-neutral-700); font-size: 16px; line-height: 1.55; }
.sp-journey__facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-journey__facts li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; }
.sp-journey__check { display: grid; flex: none; width: 22px; height: 22px; place-items: center; background: var(--step); color: var(--step-on); }

/* FAQ : accordéons dans un filet fin, colonne centrée et lisible. */
.sp-faq-list { max-width: 820px; margin: 0 auto; border: var(--sp-border); background: #fff; }
.sp-faq-item + .sp-faq-item { border-top: 1px solid var(--color-divider); }
.sp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; font-size: 18px; font-weight: 700; line-height: 1.3; cursor: pointer; list-style: none; }
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary:hover { background: var(--color-neutral-100); }
.sp-faq-item summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
/* Seul le « + » pivote pour former un « × » : faire tourner le carré entier
   le changeait en losange, hors de la géométrie à angle vif. */
.sp-faq-item__icon { display: grid; flex: none; width: 36px; height: 36px; place-items: center; background: var(--color-neutral-100); transition: background-color .2s ease; }
.sp-faq-item__icon svg { transition: transform .2s ease; }
.sp-faq-item[open] .sp-faq-item__icon { background: var(--c-amber); }
.sp-faq-item[open] .sp-faq-item__icon svg { transform: rotate(45deg); }
.sp-faq-item p { max-width: 64ch; margin: 0; padding: 0 24px 24px; color: var(--color-neutral-700); font-size: 16px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .sp-faq-item__icon, .sp-faq-item__icon svg { transition: none; } }

/* Appel vers la page Contact : même violet que le hero et l'appel final de
   l'accueil, texte crème. */
.sp-help-cta { max-width: 820px; margin: clamp(56px, 7vw, 88px) auto 0; background: var(--c-violet); padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); color: var(--color-bg); text-align: center; }
.sp-help-cta h2 { margin: 0 0 12px; color: var(--color-bg); font-size: clamp(28px, 3.4vw, 40px); }
.sp-help-cta p { max-width: 48ch; margin: 0 auto 28px; color: var(--c-violet-soft); font-size: 16px; line-height: 1.55; }
.sp-help-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sp-site .sp-help-cta .aics-button--primary { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-text); }
.sp-site .sp-help-cta .aics-button--primary:hover { border-color: var(--c-amber); background: var(--c-amber); color: var(--color-text); }
.sp-site .sp-help-cta .aics-button:not(.aics-button--primary) { border-color: var(--color-bg); background: transparent; color: var(--color-bg); }
.sp-site .sp-help-cta .aics-button:not(.aics-button--primary):hover { background: var(--color-bg); color: var(--color-text); }

/* Contact : deux encadrés d'aide à gauche, le formulaire à droite. */
.sp-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; gap: 24px; }
.sp-contact-aside { display: grid; gap: 1px; border: var(--sp-border); background: var(--color-divider); }
.sp-contact-note { background: var(--color-neutral-100); padding: 24px; }
.sp-contact-note h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.2; }
.sp-contact-note p { margin: 0 0 12px; color: var(--color-neutral-700); font-size: 15px; line-height: 1.5; }
.sp-contact-note p:last-child { margin-bottom: 0; }
.sp-contact-panel { border: var(--sp-border); background: #fff; padding: clamp(24px, 3.4vw, 40px); }
.sp-contact-form { display: grid; gap: 18px; margin: 0; }
.sp-contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sp-contact-form .aics-field { display: grid; gap: 8px; margin: 0; }
.sp-contact-form .aics-field > span { font-size: 13px; font-weight: 700; }
.sp-contact-form .aics-field input,
.sp-contact-form .aics-field textarea { width: 100%; border: var(--sp-border); border-radius: 0; background: #fff; padding: 12px 14px; color: var(--color-text); font: inherit; font-size: 15px; box-shadow: none; }
.sp-contact-form .aics-field input { min-height: 48px; }
.sp-contact-form .aics-field textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.sp-contact-form .aics-field input:focus,
.sp-contact-form .aics-field textarea:focus { outline: 3px solid var(--color-accent); outline-offset: 0; }
.sp-contact-form__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sp-contact-form__footer small { color: var(--color-neutral-600); font-size: 13px; }
.sp-contact-sent { display: grid; justify-items: start; gap: 10px; }
.sp-contact-sent__icon { display: grid; width: 48px; height: 48px; place-items: center; background: var(--c-teal); color: var(--color-bg); }
.sp-contact-sent h2 { margin: 6px 0 0; }
.sp-contact-sent p { margin: 0; color: var(--color-neutral-700); }
.sp-contact-sent__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

@media (max-width: 759px) {
  .sp-info-intro { padding-top: 28px; }
  .sp-journey__step { grid-template-columns: 1fr; }
  .sp-journey__art { min-height: 200px; background-size: auto 70%; }
  .sp-faq-item summary { padding: 18px; font-size: 16px; }
  .sp-faq-item p { padding: 0 18px 20px; }
  .sp-contact-layout { grid-template-columns: 1fr; }
  .sp-contact-aside { order: 2; }
  .sp-contact-form__row { grid-template-columns: 1fr; }
}

/* --- Appel final : texte et portraits forment un seul ensemble ------------- */
/* Le titre est court : réparti sur deux colonnes égales, il laissait plus de
   300px de vide avant les portraits, repoussés au bout de la leur. Les deux
   colonnes prennent maintenant la taille de leur contenu et se centrent
   ensemble, à écart fixe. */
@media (min-width: 900px) {
  /* Les portraits prennent la plus grande part : ~640px contre ~480px de texte. */
  .sp-cta-final { grid-template-columns: minmax(0, 480px) minmax(0, 640px); justify-content: center; column-gap: clamp(40px, 5vw, 88px); }
  .sp-cta-final .sp-split__art--quad { justify-self: stretch; width: 100%; max-width: none; }
}

/* Les étiquettes rendues côté serveur (bloc des idées de l'accueil) sont des
   liens, pas des boutons. */
a.sp-tag { text-decoration: none; }

/* Tunnel Livre : trois formats, aperçu du support et choix persistants. */
.sp-ob-main--config .sp-ob-format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-ob-main--config .sp-ob-format-grid .sp-ob-choice { min-width: 0; }
.sp-ob-main--config .sp-ob-format-grid .sp-ob-choice:only-child { grid-column: 1 / -1; width: min(100%, 300px); }
/* Photo du format (médiathèque) en tête de chaque carte. */
.sp-ob-choice__photo { display: block; margin: -14px -14px 10px; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f4f4; }
.sp-ob-choice__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Le visuel portrait est carré dans la médiathèque : `cover` le grossissait
   jusqu'à couper ses marges haute et basse dans la fenêtre 4:3 du tunnel. */
.sp-ob-choice__photo--portrait { box-sizing: border-box; padding-block: 12px; background: #fff; }
.sp-ob-choice__photo--portrait img { object-fit: contain; }
.sp-ob-summary__preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 260px; aspect-ratio: auto; background: var(--c-violet-soft); }
.sp-ob-summary__book { display: grid; width: 100%; min-height: 205px; max-height: 250px; place-items: center; overflow: hidden; background: #fbf6ee; }
.sp-ob-summary__book img { display: block; width: 100%; height: 100%; max-height: 250px; object-fit: contain; }
.sp-ob-summary__preview > span { color: var(--color-text); font-size: 12px; font-weight: 700; }
.sp-ob-card { border-color: var(--color-divider); transition: opacity .18s, border-color .18s, box-shadow .18s; }
.sp-ob-card.is-selected { border-color: var(--color-accent); background: #fff; box-shadow: inset 0 0 0 2px var(--color-accent); }
.sp-ob-cards .sp-showcase-card.is-selected { border-color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
.sp-ob-card.is-dimmed { opacity: .42; }
.sp-ob-card.is-dimmed:hover, .sp-ob-card.is-dimmed:focus-within { opacity: 1; }
.sp-ob-card__visual { aspect-ratio: 1 / 1 !important; border-bottom: 0; padding: 0; background: var(--c-violet-soft); }
.sp-ob-cards .sp-ob-card:nth-child(4n+1) .sp-ob-card__visual { background-color: var(--color-accent); }
.sp-ob-cards .sp-ob-card:nth-child(4n+2) .sp-ob-card__visual { background-color: var(--c-violet); }
.sp-ob-cards .sp-ob-card:nth-child(4n+3) .sp-ob-card__visual { background-color: var(--c-amber); }
.sp-ob-card__visual img { object-fit: cover; }
.sp-ob-card__body { padding: 24px; }
.sp-ob-card__title { font-size: 22px; font-weight: 900; }
.sp-ob-card__tags { margin: 0; }
.sp-ob-card__tags .sp-tag { cursor: default; }
.sp-ob-card__action.is-chosen { border-color: var(--color-accent); background: var(--color-accent); }
.sp-ob-card__action.is-chosen:hover { background: var(--color-accent-600); }

/* Éditeur : mêmes angles francs que les cartes et formulaires du site.
   La règle reste dans l'interface ; les formes du contenu imprimé (bulles,
   images, éléments graphiques) gardent leur géométrie propre. */
.aics-studio-app :is(button, input, textarea, select, article, aside, dialog),
.aics-studio-app :is(.aics-topbar__back, .aics-topbar__save, .aics-page-spread-row, .aics-cover-nav-card, .aics-page-item__preview, .aics-page-canvas, .aics-layer-item, .aics-inspector-section, .aics-breadcrumb, .aics-context-toolbar, .aics-prepress, .aics-credits-popover__panel, .aics-slot__chooser, .aics-cover-gallery__card, .aics-cover-gallery__faces, .aics-cover-zoom-dialog__body, .aics-inline-warning, .aics-lock-message, .aics-zone-group, .aics-block-row, .aics-block-drop-end) {
  border-radius: 0 !important;
}

/* Editor UX audit — use the site's primary violet for selection everywhere. */
.aics-studio-app { --sel: var(--color-accent); --sel-soft: var(--color-accent-100); }
/* Le Studio garde ses filets de 2 px d'encre : ses panneaux, sa barre et son
   inspecteur en ont besoin pour se délimiter (voir --sp-border, plus haut). */
.aics-studio-app { --sp-border: 2px solid var(--color-text); }

.aics-studio-app :is(.aics-segment, .aics-import-button, .aics-cover-geometry, .aics-generation-details) { border-radius: 0 !important; }
.aics-studio-app .aics-field input[type="color"] { width: 100%; min-height: 38px; height: 38px; padding: 3px; cursor: pointer; }

/* ==========================================================================
   TUNNEL DE CRÉATION — barre d'actions, étape Personnages, étape Portraits
   (refonte du 24 septembre 2026).

   Chaque étape porte ses actions dans UNE barre collée au bas de l'écran
   (.sp-ob-footer) : retour à gauche, ce qui est déjà retenu au centre,
   bouton pour avancer à droite. Elle est `position: sticky` et non `fixed` :
   placée en dernier dans la colonne .sp-ob, elle reste visible pendant le
   défilement puis se pose sur le bas du contenu, sans marge de compensation
   à entretenir sous chaque étape.
   ========================================================================== */
.sp-ob-footer { position: sticky; z-index: 45; bottom: 0; flex: none; border-top: 1px solid var(--color-divider); background: var(--color-bg); box-shadow: 0 -10px 24px rgba(42, 35, 32, .06); }
.sp-ob-footer__inner { max-width: 1200px; margin: 0 auto; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
.sp-ob-footer__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back summary actions"; align-items: center; gap: 18px; }
.sp-ob-footer__back { grid-area: back; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 2px solid var(--color-neutral-400); background: none; padding: 0 14px 0 10px; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sp-ob-footer__back:hover { border-color: var(--color-divider); }
.sp-ob-footer__back:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.sp-ob-footer__back.is-empty { visibility: hidden; padding: 0; border: 0; min-width: 0; }
.sp-ob-footer__summary { grid-area: summary; min-width: 0; color: var(--color-neutral-700); font-size: 14px; font-weight: 600; }
.sp-ob-footer__pick { display: grid; min-width: 0; line-height: 1.25; }
.sp-ob-footer__pick small { overflow: hidden; color: var(--color-neutral-600); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sp-ob-footer__pick strong { overflow: hidden; color: var(--color-text); font-family: var(--font-heading); font-size: 17px; font-weight: 900; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.sp-ob-footer__note { margin-left: 8px; color: var(--color-neutral-700); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.sp-ob-footer__actions { grid-area: actions; display: flex; align-items: center; gap: 10px; }
.sp-ob-footer__actions .sp-btn { min-height: 48px; padding: 12px 22px; font-size: 15px; white-space: nowrap; text-decoration: none; }
.sp-ob-footer__actions .aics-async-button { border-radius: 0; }
.sp-ob-footer__error { display: flex; align-items: flex-start; gap: 8px; max-width: 760px; margin: 0 auto 10px; border: 2px solid var(--color-danger); background: var(--color-danger-soft); padding: 9px 12px; color: var(--color-danger); font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.sp-ob-footer__error svg { flex: none; margin-top: 1px; }

/* Le bas des étapes n'a plus de bouton : un peu d'air avant la barre. */
.sp-ob-main--biblio,
.sp-ob-main--config,
.sp-ob-main--detail,
.sp-ob-main--produit,
.sp-ob-main--perso { padding-bottom: 48px; }

/* --- Étape Personnages --------------------------------------------------- */
.sp-ob-main--perso { max-width: 980px; }
.sp-ob-block { margin-top: 40px; }
.sp-ob-block > .sp-ob-section__head { margin-bottom: 10px; }
.sp-ob-block .sp-ob-story-help { margin-bottom: 16px; }

.sp-ob-selection-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin: 4px 0 0; border: 1px solid var(--color-divider); background: var(--color-divider); }
.sp-ob-selection-summary__item { display: flex; align-items: center; gap: 12px; min-width: 0; background: var(--color-neutral-100); padding: 10px 12px; }
.sp-ob-selection-summary__thumb { display: grid; width: 48px; height: 48px; flex: none; place-items: center; overflow: hidden; border: 1px solid var(--color-divider); background: var(--c-violet-soft); }
.sp-ob-selection-summary__thumb img,
.sp-ob-selection-summary__thumb .sp-book-style__preview { width: 100%; height: 100%; object-fit: cover; }
.sp-ob-selection-summary__thumb .sp-book-style__swatch { width: 100%; height: 100%; }
.sp-ob-selection-summary__body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.sp-ob-selection-summary__body small { color: var(--color-neutral-600); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.sp-ob-selection-summary__body strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sp-ob-selection-summary__edit { flex: none; border: 0; background: none; padding: 4px 0; color: var(--color-accent); font: inherit; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sp-ob-selection-summary__edit:hover { color: var(--color-accent-700); }

.sp-ob-persos { display: grid; gap: 16px; margin-bottom: 18px; }
.sp-ob-perso { min-width: 0; border: 1px solid var(--color-divider); background: #fff; }
.sp-ob-perso__head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-divider); background: var(--c-violet-soft); padding: 9px 12px 9px 16px; }
.sp-ob-perso__role { overflow: hidden; font-family: var(--font-heading); font-size: 17px; font-weight: 900; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.sp-ob-perso__optional { border: 2px solid var(--color-neutral-500); padding: 1px 7px; color: var(--color-neutral-700); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sp-ob-perso__remove { display: grid; width: 32px; height: 32px; flex: none; margin-left: auto; place-items: center; border: 2px solid transparent; background: none; padding: 0; color: var(--color-text); cursor: pointer; }
.sp-ob-perso__remove:hover { border-color: var(--color-danger); color: var(--color-danger); }
.sp-ob-perso__body { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 22px; padding: 18px; }
.sp-ob-perso__photo-col { min-width: 0; }
.sp-ob-perso__photo { position: relative; display: flex; width: 156px; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border: 2px dashed var(--color-neutral-500); background: var(--color-neutral-100); padding: 10px; color: var(--color-neutral-700); font: inherit; font-size: 12.5px; text-align: center; cursor: pointer; }
.sp-ob-perso__photo strong { font-weight: 800; }
.sp-ob-perso__photo:hover { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-700); }
.sp-ob-perso__photo:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.sp-ob-perso__photo-remove { margin-top: 8px; padding: 4px 0; border: 0; background: transparent; color: var(--color-neutral-700); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.sp-ob-perso__photo-remove:hover { color: var(--color-accent); }
.sp-ob-perso.has-photo .sp-ob-perso__photo { border: 1px solid var(--color-divider); padding: 0; }
.sp-ob-perso__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-ob-perso__photo-swap { position: absolute; right: 0; bottom: 0; left: 0; background: rgba(42, 35, 32, .8); padding: 6px; color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transition: opacity .15s ease; }
.sp-ob-perso__photo:hover .sp-ob-perso__photo-swap,
.sp-ob-perso__photo:focus-visible .sp-ob-perso__photo-swap { opacity: 1; }
@media (hover: none) { .sp-ob-perso__photo-swap { opacity: 1; } }
.sp-ob-perso__fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-content: start; gap: 14px 16px; min-width: 0; }
.sp-ob-perso__fields .sp-ob-field { margin-bottom: 0; }
/* Enfant direct de la grille : sans placement, l'apparence par défaut de
   l'histoire tombait dans la colonne de l'âge (110 px), un mot par ligne.
   Simple renvoi, lu comme une note : petit et discret. */
.sp-ob-perso__fields .sp-ob-story-help { grid-column: 1 / -1; margin: 0; color: var(--color-neutral-600); font-size: 12px; line-height: 1.45; }

/* Choix exclusif compact (genre) : trois boutons accolés, un seul actif. */
.sp-ob-segmented { display: flex; min-height: 44px; border: 2px solid var(--color-neutral-300); background: var(--color-bg); }
.sp-ob-segmented button { flex: 1 1 0; min-width: 0; border: 0; border-left: 2px solid var(--color-neutral-300); background: none; padding: 8px 10px; color: var(--color-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sp-ob-segmented button:first-child { border-left: 0; }
.sp-ob-segmented button:hover { background: var(--color-neutral-100); }
.sp-ob-segmented button.is-selected { background: var(--color-text); color: #fff; }
.sp-ob-segmented button:focus-visible { position: relative; outline: 3px solid var(--color-accent); outline-offset: -3px; }

.sp-ob-add { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 2px dashed var(--color-neutral-400); background: none; padding: 12px 16px; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.sp-ob-add:hover { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-700); }
.sp-ob-add small { color: var(--color-neutral-600); font-size: 12px; font-weight: 600; }

.sp-ob-more { margin-top: 4px; border-top: 2px solid var(--color-neutral-300); padding-top: 12px; }
.sp-ob-more > summary { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--color-accent); font-size: 14px; font-weight: 800; cursor: pointer; }
.sp-ob-more > summary:hover { color: var(--color-accent-700); }
.sp-ob-note--box { margin-top: 36px; background: var(--color-neutral-100); padding: 12px 14px; color: var(--color-neutral-700); font-size: 13px; }

/* --- Étape Portraits (/characters/) --------------------------------------- *
 * Route de projet : html, body et la racine y sont figés en `overflow: hidden`
 * pour l'éditeur (editor.css). Cette étape défile donc dans son propre
 * conteneur, contre lequel l'en-tête et la barre d'actions restent collés. */
.sp-portraits { height: 100dvh; overflow-y: auto; }
.sp-ob-main--portraits { max-width: 1120px; padding: 40px 20px 48px; }
.sp-portraits .sp-ob-lead { margin-bottom: 20px; }
.sp-portraits__how { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 28px; padding: 0; list-style: none; }
.sp-portraits__how li { display: flex; align-items: center; gap: 8px; color: var(--color-neutral-800); font-size: 14px; font-weight: 700; }
.sp-portraits__how strong { display: grid; width: 26px; height: 26px; place-items: center; background: var(--color-text); color: #fff; font-size: 12px; }
.sp-portraits__credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 28px; border: 1px solid var(--color-divider); background: var(--color-neutral-100); padding: 14px 18px; }
.sp-portraits__credits .sp-portraits__credits-why { margin-top: 6px; color: var(--color-neutral-600); font-size: 13px; }
.sp-portraits__credits small { display: block; color: var(--color-neutral-600); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sp-portraits__credits strong { display: block; font-family: var(--font-heading); font-size: 22px; font-weight: 900; }
.sp-portraits__credits p { margin: 2px 0 0; color: var(--color-neutral-700); font-size: 13px; }
.sp-portraits__credits-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-portraits__credits .sp-ob-alert { flex-basis: 100%; margin: 0; }
.sp-portraits .aics-dropzone { margin-top: 0; border-radius: 0; background: #fff; }
.sp-portraits .aics-consent { display: flex; gap: 8px; margin: 12px 0 20px; font-size: 13px; }

.sp-portrait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 20px; }
.sp-portrait-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--color-divider); background: #fff; }
.sp-portrait-card.is-pending { opacity: .65; }
.sp-portrait-card__head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-divider); padding: 12px 12px 12px 16px; }
.sp-portrait-card__who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.sp-portrait-card__who strong { overflow: hidden; font-family: var(--font-heading); font-size: 19px; font-weight: 900; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.sp-portrait-card__who span { overflow: hidden; color: var(--color-neutral-600); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sp-portrait-card__badge { flex: none; padding: 4px 9px; background: var(--color-neutral-200); color: var(--color-neutral-800); font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.sp-portrait-card__badge.is-approved { background: var(--c-teal); color: #fff; }
.sp-portrait-card__badge.is-review { background: var(--c-amber); color: var(--color-text); }
.sp-portrait-card__badge.is-running { background: var(--color-accent-100); color: var(--color-accent-700); }
.sp-portrait-card__badge.is-stale { background: var(--color-danger-soft); color: var(--color-danger); }
.sp-portrait-card__edit { flex: none; border: 0; background: none; padding: 4px 2px; color: var(--color-accent); font: inherit; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sp-portrait-card__delete { flex: none; }
.sp-portrait-card__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; border-bottom: 2px solid var(--color-neutral-300); background: var(--color-neutral-100); padding: 16px; }
.sp-portrait-card__form .sp-ob-field { margin: 0; }
.sp-portrait-card__visuals { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: start; gap: 10px; padding: 16px; }
.sp-portrait-card__visuals.is-single { grid-template-columns: minmax(0, 260px); }
.sp-portrait-card__visuals figure { min-width: 0; margin: 0; }
/* L'apparence prévue par l'histoire (personnage sans photo) occupait la
   colonne de 28 px de la flèche : un mot par ligne. Elle passe sous la photo
   et le portrait, sur toute la largeur. */
.sp-portrait-card__visuals > .aics-help { grid-column: 1 / -1; order: 1; margin: 0; }
.sp-portrait-card__frame { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid var(--color-divider); background: var(--color-neutral-100); }
.sp-portrait-card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-portrait-card__remove-photo { position: absolute; z-index: 1; top: 6px; right: 6px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--color-divider); background: var(--color-bg); padding: 0; color: var(--color-text); cursor: pointer; }
.sp-account-privacy { margin-top: 44px; border-top: 1px solid var(--color-divider); padding-top: 28px; }
.sp-account-privacy h2 { margin: 0 0 12px; }
.sp-account-privacy p { max-width: 68ch; }
.sp-portrait-card__remove-photo:hover, .sp-portrait-card__remove-photo:focus-visible { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.sp-portrait-card.is-approved .sp-portrait-card__master .sp-portrait-card__frame { border-color: var(--c-teal); box-shadow: 0 0 0 2px var(--c-teal); }
.sp-portrait-card.is-review .sp-portrait-card__master .sp-portrait-card__frame { border-color: var(--c-amber); box-shadow: 0 0 0 2px var(--c-amber); }
.sp-portrait-card__master .sp-portrait-card__frame { border-style: dashed; }
.sp-portrait-card.is-approved .sp-portrait-card__master .sp-portrait-card__frame,
.sp-portrait-card.is-review .sp-portrait-card__master .sp-portrait-card__frame { border-style: solid; }
.sp-portrait-card__zoom { position: absolute; inset: 0; display: block; border: 0; background: none; padding: 0; cursor: zoom-in; }
.sp-portrait-card__zoom:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.sp-portrait-card__zoom-hint { position: absolute; right: 8px; bottom: 8px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--color-divider); background: #fff; color: var(--color-text); transition: background .15s, color .15s; }
.sp-portrait-card__zoom:hover .sp-portrait-card__zoom-hint,
.sp-portrait-card__zoom:focus-visible .sp-portrait-card__zoom-hint { background: var(--color-text); color: #fff; }
.sp-portrait-card__placeholder { display: grid; justify-items: center; gap: 8px; padding: 10px; color: var(--color-neutral-600); font-size: 13px; font-weight: 700; text-align: center; }
.sp-portrait-card__empty { display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; gap: 8px; border: 0; background: none; color: var(--color-neutral-700); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.sp-portrait-card__empty:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.sp-portrait-card__arrow { display: grid; align-self: center; place-items: center; color: var(--color-neutral-500); }
.sp-portrait-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; margin-top: 6px; color: var(--color-neutral-700); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.sp-portrait-card__change { border: 0; background: none; padding: 4px 0; color: var(--color-accent); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0; text-decoration: underline; text-transform: none; text-underline-offset: 3px; cursor: pointer; }
.sp-portrait-card__change:hover { color: var(--color-accent-700); }
.sp-portrait-card__change:disabled svg { animation: sp-spin .8s linear infinite; }
.sp-portrait-card > .sp-photo-views { margin: 0 16px 14px; }

/* Autres vues d'une personne (profils, dos, corps entier), sous la face. */
.sp-photo-views { display: grid; gap: 6px; border-top: 2px solid var(--color-neutral-300); padding-top: 12px; }
.sp-photo-views__title { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13.5px; }
.sp-photo-views__title span { color: var(--color-neutral-600); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sp-photo-views__help { margin: 0; color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.45; }
.sp-photo-views__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 80px)); gap: 10px; margin-top: 4px; }
.sp-photo-views__slot { position: relative; display: grid; gap: 4px; min-width: 0; }
.sp-photo-views__pick { position: relative; display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; border: 2px dashed var(--color-neutral-500); background: var(--color-neutral-100); padding: 0; color: var(--color-neutral-700); cursor: pointer; }
.sp-photo-views__pick:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-700); }
.sp-photo-views__pick:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.sp-photo-views__pick:disabled { cursor: not-allowed; opacity: .5; }
.sp-photo-views__slot.has-photo .sp-photo-views__pick { border: 1px solid var(--color-divider); }
.sp-photo-views__pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-photo-views__label { color: var(--color-neutral-700); font-size: 11.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sp-photo-views__remove { position: absolute; top: 4px; right: 4px; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--color-divider); background: var(--color-bg); padding: 0; color: var(--color-text); cursor: pointer; }
.sp-photo-views__remove:hover, .sp-photo-views__remove:focus-visible { border-color: var(--color-danger); background: var(--color-danger); color: #fff; }
.sp-ob-perso__views { padding: 0 18px 18px; }
.sp-portrait-card__actions { display: grid; gap: 12px; margin-top: auto; border-top: 2px solid var(--color-neutral-300); padding: 14px 16px 16px; }
.sp-portrait-card__actions p { margin: 0; color: var(--color-neutral-700); font-size: 13.5px; line-height: 1.45; }
.sp-portrait-card__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-portrait-card__buttons .sp-btn { flex: 1 1 auto; }
.sp-portrait-card__state { display: block; padding: 0 16px 12px; color: var(--color-neutral-600); font-size: 12px; }
.sp-portrait-card__state.is-error { color: var(--color-danger); font-weight: 700; }

@media (max-width: 639px) {
  .sp-ob-main--config .sp-ob-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-ob-main--config .sp-ob-format-grid .sp-ob-choice:only-child { width: 100%; }
  .sp-ob-footer__inner { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .sp-ob-footer__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "summary summary" "back actions"; gap: 8px 10px; }
  .sp-ob-footer__back { padding: 0 10px; }
  .sp-ob-footer__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sp-ob-footer__back.is-empty { display: none; }
  .sp-ob-footer__row:has(.sp-ob-footer__back.is-empty) { grid-template-areas: "summary summary" "actions actions"; }
  .sp-ob-footer__actions { justify-content: flex-end; }
  .sp-ob-footer__actions .sp-btn { flex: 1 1 auto; padding: 11px 14px; font-size: 14px; }
  .sp-ob-footer__pick { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; }
  .sp-ob-footer__pick strong { font-size: 15px; }
  .sp-ob-perso__body { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .sp-ob-perso__views { padding: 0 14px 14px; }
  .sp-ob-perso__photo { width: 100%; max-width: 220px; margin: 0 auto; }
  .sp-ob-perso__fields { grid-template-columns: 96px minmax(0, 1fr); }
  .sp-ob-main--portraits { padding: 28px 16px 40px; }
  .sp-portrait-card__form { grid-template-columns: 1fr; }
  .sp-portrait-card__visuals { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 6px; padding: 12px; }
}

/* AsyncButton porte aussi `.aics-button`, que la couche vitrine repeint à
   l'encre au survol : le bouton principal de la barre garde l'accent. */
.sp-ob-footer .sp-btn.sp-btn--primary:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.sp-ob-footer .sp-btn.sp-btn--primary:not(:disabled):hover { border-color: var(--color-accent-600); background: var(--color-accent-600); color: #fff; }
.sp-ob-footer .sp-btn.sp-btn--ghost:not(:disabled):hover { background: var(--color-neutral-100); color: var(--color-text); }
.sp-ob-h1--config + .sp-ob-lead { margin: -18px 0 26px; }

/* Angles droits dans toute l'interface du Studio. La liste de classes plus
   haut corrigeait au cas par cas, et chaque nouveau composant (menu des
   polices, menus Affichage / Actions, éditeur de texte enrichi, groupes du
   cadre…) repartait avec l'arrondi d'editor.css. Deux exceptions seulement :
   - le contenu de la page imprimée (.aics-page-canvas) et ses miniatures
     (.aics-page-thumb) : l'arrondi d'un cadre est un choix du client,
     rendu tel quel dans les deux aperçus ;
   - ce qui est rond par nature : pastilles d'état, avatars, indicateur de
     chargement. */
.aics-studio-app *:not(.aics-page-canvas, .aics-page-canvas *, .aics-page-thumb, .aics-page-thumb *, .aics-loading-spinner, .aics-loading-spinner *, .aics-topbar__save-dot, .aics-topbar__avatar, .aics-personalized-badge, .aics-character-chips img),
.aics-studio-app *:not(.aics-page-canvas *, .aics-page-thumb *)::before,
.aics-studio-app *:not(.aics-page-canvas *, .aics-page-thumb *)::after {
  border-radius: 0 !important;
}

/* ==========================================================================
   Panneau de réglages — champs, boutons et rythme vertical (2026-09-25)

   Le panneau reprend le design système du site : des champs à bordure
   affirmée (2 px) sur fond BLANC — ils se détachent enfin du fond crème, où
   un champ #fffdf8 bordé à 1,5 px se lisait à peine — et des actions
   secondaires en contour violet primaire, distinctes à la fois de l'action
   principale (pleine) et des simples liens.

   Rythme : libellé → champ 6 px ; aide sous un champ 6 px ; texte → bouton
   12 px ; entre deux champs 14 px. Le bouton « Réinitialiser la couverture »
   était collé au paragraphe qui l'annonce.
   ========================================================================== */

/* Champs */
.aics-studio-app .aics-inspector :is(input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
.aics-studio-app .aics-inspector .aics-rich-text-content,
.aics-studio-app .aics-inspector .aics-font-select__trigger,
.aics-studio-app .aics-inspector .aics-cover-quick-style__bold {
  border: 2px solid var(--color-neutral-500);
  background: #fff;
  color: var(--color-text);
}
.aics-studio-app .aics-inspector :is(input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select):hover:not(:disabled),
.aics-studio-app .aics-inspector .aics-font-select__trigger:hover:not(:disabled) {
  border-color: var(--color-neutral-700);
  background: #fff;
}
.aics-studio-app .aics-inspector :is(input:not([type="color"]):not([type="range"]), textarea, select):focus,
.aics-studio-app .aics-inspector .aics-rich-text-content:focus,
.aics-studio-app .aics-inspector .aics-font-select.is-open .aics-font-select__trigger {
  border-color: var(--color-text);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.aics-studio-app .aics-inspector input[type="color"] { border: 2px solid var(--color-neutral-500); background: #fff; }
.aics-studio-app .aics-inspector .aics-cover-quick-style__bold.is-active { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent); }

/* Choix segmentés : même bordure qu'un champ, fond blanc, choix actif plein. */
.aics-studio-app .aics-inspector .aics-segment { border: 2px solid var(--color-neutral-500); background: #fff; }
.aics-studio-app .aics-inspector .aics-segment button + button { border-left: 1px solid var(--color-neutral-300); }

/* Pastilles de couleur : bordure lisible sur le blanc comme sur le crème. */
.aics-studio-app .aics-inspector .aics-color-swatches > button { border: 2px solid var(--color-neutral-400); }

/* Conteneurs de réglages : blancs, bordure plus légère que les champs pour
   garder la hiérarchie (le conteneur regroupe, le champ se remplit). */
.aics-studio-app .aics-inspector :is(.aics-frame-panel__group, .aics-cover-backgrounds__item, .aics-ai-rewrite, .aics-cover-illustration) {
  border: 2px solid var(--color-neutral-300);
  background: #fff;
}

/* Actions secondaires : contour violet primaire. L'action principale
   (--primary, --generate, --order) reste pleine ; --danger garde son rouge. */
.aics-studio-app .aics-inspector .aics-button:not(.aics-button--primary):not(.aics-button--order):not(.aics-button--generate):not(.aics-button--danger),
.aics-studio-app .aics-inspector .aics-ai-chip {
  border: 2px solid var(--color-accent);
  background: #fff;
  color: var(--color-accent);
}
.aics-studio-app .aics-inspector .aics-button:not(.aics-button--primary):not(.aics-button--order):not(.aics-button--generate):not(.aics-button--danger):hover:not(:disabled),
.aics-studio-app .aics-inspector .aics-ai-chip:hover:not(:disabled) {
  border-color: var(--color-accent-600);
  background: var(--color-accent-100);
  color: var(--color-accent-600);
}
.aics-studio-app .aics-inspector .aics-button--generate { border: 2px solid var(--color-accent); background: var(--color-accent); color: #fff; }
.aics-studio-app .aics-inspector .aics-button--generate:hover:not(:disabled) { border-color: var(--color-accent-600); background: var(--color-accent-600); }
.aics-studio-app .aics-inspector .aics-link-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; color: var(--color-accent); font-size: 12.5px; font-weight: 700; }

/* Rythme vertical */
.aics-studio-app .aics-inspector .aics-help { margin: 6px 0 0; color: var(--color-neutral-600); font-size: 12px; line-height: 1.45; }
.aics-studio-app .aics-inspector h2 + .aics-help { margin: -6px 0 12px; }
.aics-studio-app .aics-inspector .aics-help + :is(.aics-button, label.aics-button, .aics-field, .aics-segment, .aics-character-chips, .aics-color-swatches) { margin-top: 12px; }
.aics-studio-app .aics-inspector :is(.aics-button, label.aics-button) + .aics-help { margin-top: 8px; }
.aics-studio-app .aics-inspector :is(.aics-button, label.aics-button) + :is(.aics-button, label.aics-button, .aics-link-button) { margin-top: 10px; }
.aics-studio-app .aics-inspector .aics-field { gap: 6px; margin: 0 0 14px; }
.aics-studio-app .aics-inspector .aics-field:last-child { margin-bottom: 0; }
.aics-studio-app .aics-inspector .aics-field > .aics-help { margin-top: 0; }

/* Décors de page (onglet Style d'une page intérieure) */
.aics-page-decors { display: grid; gap: 10px; }
.aics-page-decors__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aics-page-decors__grid button { display: grid; min-width: 0; gap: 4px; border: 1.5px solid var(--ed-line); background: var(--aics-field-bg); padding: 6px; color: var(--color-text); font: inherit; cursor: pointer; }
.aics-page-decors__grid button:hover:not(:disabled) { border-color: var(--sel); }
.aics-page-decors__grid button.is-busy { opacity: .55; cursor: progress; }
.aics-page-decors__grid img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.aics-page-decors__grid small { overflow: hidden; font-size: 10.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.aics-page-decors__palettes { display: flex; flex-wrap: wrap; gap: 5px; }
.aics-page-decors__palettes button { display: flex; width: 42px; height: 20px; overflow: hidden; border: 1.5px solid var(--ed-line); padding: 0; cursor: pointer; }
.aics-page-decors__palettes button.is-active { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel); }
.aics-page-decors__palettes i { flex: 1; }
.aics-page-decors__placed { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 10px; border: 1.5px solid var(--ed-line); padding: 8px; }
.aics-page-decors__placed img { width: 52px; height: 52px; object-fit: contain; background: #fff; }
.aics-page-decors__placed > div { display: grid; gap: 6px; min-width: 0; }
.aics-page-decors__actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* Informations du livre (Actions du Livre) */
.aics-book-details { display: grid; gap: 12px; }
.aics-book-details textarea, .aics-book-details input { width: 100%; }
/* Pages seules (ouverture, fin) : carte du rail avec ses actions. */
/* Rail des pages : chaque page se montre telle qu'elle est (PageThumbnail),
   sur des rangées blanches. Couvertures et pages seules sont des rangées
   comme les doubles-pages : la vignette à gauche, son nom et ses actions à
   droite. */
.aics-studio-app .aics-page-spread-row { background: #fff; }
.aics-studio-app .aics-spread-mini__page { background: #fff; }
.aics-studio-app .aics-single-row__info { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; }
.aics-studio-app .aics-single-row__info strong { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.aics-studio-app .aics-single-row__info small { color: var(--color-neutral-600); font-size: 10.5px; }
.aics-studio-app .aics-single-row__info .aics-spread-row__actions { margin-top: 4px; }
/* Couleur, avec retenue : le code des étiquettes d'histoire (petit carré plein
   devant le libellé, voir « Code couleur des filtres ») dit la nature de la
   rangée — ambre pour les couvertures, sarcelle pour les pages seules, violet
   sourd pour les doubles-pages. Aucun fond coloré : les rangées restent
   blanches. */
.aics-studio-app .aics-page-spread-row.is-kind-cover { --rail-mark: var(--c-amber); }
.aics-studio-app .aics-page-spread-row.is-kind-single { --rail-mark: var(--c-teal); }
.aics-studio-app .aics-page-spread-row.is-kind-spread { --rail-mark: var(--c-violet); }
.aics-studio-app .aics-single-row__info strong,
.aics-studio-app .aics-page-spread-row__label > span { display: inline-flex; align-items: center; gap: 6px; }
.aics-studio-app .aics-single-row__info strong::before,
.aics-studio-app .aics-page-spread-row__label > span::before { flex: none; width: 8px; height: 8px; background: var(--rail-mark); content: ""; }
/* État d'une page, seulement quand il reste à faire : un petit carré dans
   l'angle de la vignette. Une page complète n'en porte aucun — un livre
   terminé reste un rail calme. Une création en cours ne passe plus par ce
   carré : la zone concernée de la vignette s'anime (`.aics-page-thumb__loader`). */
.aics-studio-app .aics-spread-mini:is(.is-missing, .is-partial, .is-error) .aics-spread-mini__page::after { position: absolute; top: 3px; right: 3px; z-index: 1; width: 7px; height: 7px; box-shadow: 0 0 0 1.5px #fff; background: var(--c-amber); content: ""; }
.aics-studio-app .aics-spread-mini.is-error .aics-spread-mini__page::after { background: var(--color-danger); }
/* Mêmes unités d'impression que le canvas (`.aics-page-canvas`, editor.css) :
   le texte des vignettes réutilise textBlockStyle() et garde ses proportions
   réelles. Voir là-bas pourquoi --aics-pt divise par 54. */
.aics-page-thumb { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--aics-thumb-bg, #fff); container-type: size;
    --aics-css-px: calc(100cqw * 25.4 / (var(--aics-page-w-mm, 210) * 96));
    --aics-pt: calc(100cqw * 25.4 / (var(--aics-page-w-mm, 210) * 54)); }
.aics-page-thumb__static, .aics-page-thumb__image, .aics-page-thumb__text { position: absolute; overflow: hidden; }
.aics-page-thumb__image img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.aics-page-thumb__image.is-missing { background: repeating-linear-gradient(45deg, rgba(202, 62, 50, .16) 0 3px, transparent 3px 6px); }
/* Zone en cours de création : voile, balayage et anneau au centre, sur l'image
   précédente quand elle existe. `is-page` : un texte, sur toute la vignette. */
.aics-page-thumb__image.is-generating.is-missing { background: var(--color-accent-100); }
.aics-page-thumb__loader { position: absolute; z-index: 3; inset: 0; overflow: hidden; background: rgba(255, 255, 255, .45); }
.aics-page-thumb__loader::before { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .8) 50%, transparent 75%) 100% 0 / 300% 100%; animation: aics-skeleton-sweep 1.1s ease-in-out infinite; content: ""; }
.aics-page-thumb__loader::after { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--color-accent-200); border-top-color: var(--color-accent); border-radius: 50%; animation: aics-spin .72s linear infinite; content: ""; }
.aics-page-thumb__text { pointer-events: auto; }
.aics-page-thumb__text.is-missing { background: rgba(33, 116, 94, .12); }
.aics-page-thumb [role="button"] { cursor: pointer; }
.aics-page-thumb [role="button"]:hover { outline: 1px solid var(--sel, #4b3ec9); outline-offset: -1px; }

/* --- Consultation d'un projet client par un administrateur ----------------
   Lecture seule tant que la modification n'est pas déverrouillée : pas de
   sélection ni de glisser sur le canvas, pas d'inspecteur, pas d'actions sur
   les pages. La navigation, le zoom et les aperçus restent. (La garde réelle
   est côté serveur : AdminReadOnlyGuard.) */
.aics-studio-app .aics-admin-view { display: flex; align-items: center; gap: 12px; margin: 8px 16px 0; border: 1.5px solid #2271b1; background: #f0f6fc; padding: 10px 14px; color: #1d2327; font-size: 13px; }
.aics-studio-app .aics-admin-view p { flex: 1 1 auto; margin: 0; }
.aics-studio-app .aics-admin-view.is-editing { border-color: #b32d2e; background: #fcf0f1; }
.aics-studio-app .aics-admin-view .aics-button { flex: 0 0 auto; }
.aics-studio-app.is-admin-readonly .aics-canvas-viewport > * { pointer-events: none; }
.aics-studio-app.is-admin-readonly .aics-inspector,
.aics-studio-app.is-admin-readonly .aics-spread-row__tools,
.aics-studio-app.is-admin-readonly .aics-add-spread-button,
.aics-studio-app.is-admin-readonly .aics-spread-insert { display: none; }

/* La carte s'active dans le compte, séparément de l'achat des crédits. */
.sp-gift-account { margin-top: 22px; }
.sp-gift-account__form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.sp-gift-account__form label { flex-basis: 100%; font-weight: 700; }
.sp-gift-account__form input { min-width: 210px; flex: 1 1 240px; padding: 10px 12px; border: 1px solid #bcb3c9; border-radius: 0; font: inherit; }
.sp-gift-account__form input:focus { outline: 2px solid #7754ad; outline-offset: 1px; }
.sp-gift-account__cards { margin-top: 22px; border-top: 1px solid #ded5e9; padding-top: 12px; }
.sp-gift-account__cards p { margin: 8px 0; }

/* ==========================================================================
   ÉDITEUR — couleurs sémantiques (en dernier : elles l'emportent sur les
   règles de chaque composant déclarées plus haut).
   ========================================================================== */
/* Couleurs de l'éditeur, avec retenue. Le violet reste LA couleur de
   l'interaction (sélection, onglet actif, action principale). Les autres
   teintes du site n'apparaissent que là où elles ont un sens, en petits
   repères — jamais en aplats :
     sarcelle  un état sain : enregistré, contrôle réussi, bloc texte ;
     ambre     ce qui demande attention : non enregistré, avertissement,
               crédits, bloc image ;
     rouge     les seules erreurs.
   Mêmes teintes que les étiquettes du site (« Code couleur des filtres »). */
.aics-topbar__save.is-saved .aics-topbar__save-dot { background: var(--c-teal); }
/* Non enregistré n'est pas une erreur : ambre, pas rouge. */
.aics-topbar__save.is-unsaved { color: var(--color-text); }
.aics-topbar__save:is(.is-unsaved, .is-saving) .aics-topbar__save-dot { background: var(--c-amber); }
/* Nature des blocs dans la liste de la page : l'icône prend la teinte de son
   type, comme les vignettes du rail (texte sarcelle, image ambre). */
.aics-studio-app .aics-block-row.is-type-text .aics-block-row__label > :first-child { color: var(--c-teal); }
.aics-studio-app .aics-block-row.is-type-image .aics-block-row__label > :first-child { color: #b57614; }
/* Avertissements : un liseré ambre plutôt qu'un encadré jaune d'une autre
   palette. */
.aics-studio-app .aics-inline-warning { border-color: var(--c-amber); border-left-width: 4px; background: var(--c-amber-soft); color: var(--color-text); }
/* Un portrait en cours de création n'est pas un avertissement : on attend. */
.aics-studio-app .aics-inline-warning.is-waiting { border-color: var(--c-teal); background: var(--c-teal-soft); }
/* Crédits et prix : l'ambre des « occasions », pas le rouge des erreurs. */
.aics-studio-app .sp-price-note { border-left-color: var(--c-amber); }
/* Vérification avant impression : avertissements ambre, validés sarcelle. */
.aics-prepress__item:not(.is-error) { border-color: var(--c-amber); border-left-width: 4px; background: #fff; }
.aics-prepress__ok svg { color: var(--c-teal); }
/* Notifications : un liseré de la couleur de l'interaction. */
.aics-studio-app .aics-studio-notice { border-left: 4px solid var(--color-accent); }
/* Consultation administrateur : les teintes du site plutôt que le bleu de
   l'administration WordPress ; l'édition autorisée garde le rouge. */
.aics-studio-app .aics-admin-view { border-color: var(--c-teal); background: var(--c-teal-soft); color: var(--color-text); }
.aics-studio-app .aics-admin-view.is-editing { border-color: var(--color-danger); background: var(--color-danger-soft); }

.aics-studio-app .aics-spread-moment { margin-bottom: 12px; border-left: 3px solid var(--sel); border-radius: 0 10px 10px 0; background: var(--sel-soft); padding: 12px 14px 14px; }
.aics-studio-app .aics-spread-moment__path { margin: 12px 0 5px; font-size: 12px; font-weight: 800; }
.aics-studio-app .aics-spread-moment__save-help { margin: 6px 0 9px; font-size: 11px; }
.aics-studio-app .aics-spread-moment__manual { margin-top: 14px; border-top: 1px solid var(--ed-line); padding-top: 4px; }
.aics-studio-app .aics-spread-moment__generate { margin-top: 14px; border-top: 1px solid var(--ed-line); padding-top: 4px; }
.aics-studio-app .aics-spread-moment__generate .aics-help { margin-top: 6px; }
.aics-studio-app .aics-spread-moment__preset { margin-top: 14px; border-top: 1px solid var(--ed-line); padding-top: 4px; }
/* Historique de la double-page : textes, descriptions, illustrations (ContentHistory). */
.aics-studio-app .aics-content-history { margin-top: 14px; border-top: 1px solid var(--ed-line); padding-top: 10px; }
.aics-studio-app .aics-content-history summary { cursor: pointer; font-size: 13px; font-weight: 800; }
.aics-studio-app .aics-content-history summary small { color: var(--color-neutral-600); font-weight: 600; }
.aics-studio-app .aics-content-history h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 800; }
.aics-studio-app .aics-content-history__scope { display: flex; gap: 4px; margin: 10px 0 8px; border: 1.5px solid var(--ed-line); border-radius: 8px; padding: 3px; }
.aics-studio-app .aics-content-history__scope button { flex: 1; border: 0; border-radius: 6px; background: transparent; padding: 6px 8px; color: var(--color-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.aics-studio-app .aics-content-history__scope button.is-active { background: var(--sel); color: #fff; }
.aics-studio-app .aics-content-history__scope button:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.aics-studio-app .aics-content-history__item { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 6px; padding: 8px 10px; }
.aics-studio-app .aics-content-history__text { margin: 0; color: var(--color-text); font-size: 12.5px; line-height: 1.45; white-space: pre-line; }
.aics-studio-app .aics-spread-moment__manual-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.aics-studio-app .aics-spread-moment__manual-actions button { border: 1.5px solid var(--sel); border-radius: 6px; background: var(--color-bg); padding: 7px 9px; color: var(--sel); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.aics-studio-app .aics-spread-moment__manual-actions button:hover { background: var(--sel); color: #fff; }
/* Revenir au départ (versions.js) : section de page, fenêtre de confirmation, historique du livre. */
.aics-studio-app .aics-reset-start { border-top: 1px solid var(--ed-line); }
.aics-studio-app .aics-reset-start__actions { display: grid; gap: 8px; margin-top: 8px; }
.aics-studio-app .aics-reset-start__actions .aics-button { justify-content: center; }
.aics-reset-dialog h3,
.aics-book-history h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 800; }
.aics-reset-dialog ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.aics-reset-dialog__kept li::marker { content: '✓  '; color: var(--c-teal); }
.aics-reset-dialog .aics-toggle-field { margin: 14px 0 4px; color: var(--color-text); font-size: 13px; }
.aics-book-history__start .aics-button { margin: 8px 0; }
.aics-book-history__list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; max-height: 280px; overflow-y: auto; }
.aics-book-history__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid var(--ed-line); border-radius: 10px; padding: 8px 10px; }
.aics-book-history__list li > span { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; }
.aics-book-history__list small { color: var(--color-neutral-600); }
.aics-book-history__list .aics-button { flex: none; }
.aics-studio-app .aics-reset-start-link { margin: 16px 0 4px; border-top: 1px solid var(--ed-line); padding-top: 10px; }
.aics-studio-app .aics-reset-start-link .aics-link-button { display: inline-flex; align-items: center; gap: 6px; }

/* --- Carte « distribution » : LA carte d'histoire du site ---------------------
   Accueil et pages d'atterrissage (MarketingMarkup::showcase_cast_card()),
   catalogue, favoris et choix d'histoire du tunnel (CastCard, marketing.js) :
   un seul balisage, ces seules règles (maquette B2, Claude Design 2026-11-05).
   Couverture, rangée des personnages, puis le texte. Titre et description
   ont chacun deux lignes réservées et les actions sont poussées en bas : d'une
   carte à l'autre, tout tombe à la même hauteur, quelle que soit la longueur
   des textes. La carte du catalogue masque ce qui déborde (`overflow`) : la
   carte « distribution » le laisse passer, sans quoi l'infobulle d'un
   personnage était coupée au bord. */
.sp-cast-card { overflow: visible; }
.sp-cast-card .sp-showcase-card__visual { border-bottom: 1px solid var(--color-divider); }
/* Le lien de la couverture la recouvre sous le badge et le cœur (z-index 2). */
.sp-cast-card__visual-link { position: absolute; z-index: 1; inset: 0; }
.sp-cast-card .sp-badge { pointer-events: none; }

.sp-cast-card__cast { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); padding: 12px 16px 14px; }
.sp-cast-card__cast-label { color: var(--color-neutral-700); font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.sp-cast-card__people { display: flex; align-items: center; gap: 12px; height: 56px; margin: 0; padding: 0; list-style: none; }
.sp-cast-card__person,
.sp-cast-card__more { position: relative; flex: none; width: 56px; height: 56px; }
.sp-cast-card__person:focus { outline: none; }
/* Les portraits ont un fond crème qui varie d'une image à l'autre : en
   multiplication sur le blanc, il disparaît et le personnage semble détouré. */
.sp-cast-card__portrait { display: block; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.sp-cast-card__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; mix-blend-mode: multiply; transform: scale(1.15); }
/* Personnage à l'image de l'enfant : cerné d'encre, une pastille crayon dans
   son coin, et cadré sur le visage (le portrait est en pied). */
.sp-cast-card__person.is-customizable .sp-cast-card__portrait { box-shadow: 0 0 0 2px var(--color-text); }
.sp-cast-card__person.is-customizable .sp-cast-card__portrait img { transform: scale(2.1); transform-origin: 50% 15%; }
.sp-cast-card__pen { position: absolute; right: 0; bottom: 0; display: grid; width: 22px; height: 22px; box-sizing: border-box; place-items: center; border-top: 2px solid var(--color-text); border-left: 2px solid var(--color-text); background: var(--c-amber); color: var(--color-text); }
.sp-cast-card__pen svg { width: 12px; height: 12px; stroke-width: 2.4; }
.sp-cast-card__person:focus-visible .sp-cast-card__portrait { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.sp-cast-card__more { display: grid; box-sizing: border-box; place-items: center; border: 2px solid var(--color-divider); background: #fff; color: var(--color-text); font-family: var(--sp-font-heading); font-size: 16px; font-weight: 800; }

/* Le nom n'apparaît qu'au survol ou au focus (le toucher d'une vignette lui
   donne le focus sur téléphone). Celle de gauche aligne son infobulle sur
   elle : centrée, « Votre enfant · personnalisable » sortait de la carte. */
.sp-cast-card__tip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 6px 10px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}
.sp-cast-card__tip::after { position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--color-divider); content: ""; }
.sp-cast-card__person:first-child .sp-cast-card__tip { left: 0; transform: translate(0, 4px); }
.sp-cast-card__person:first-child .sp-cast-card__tip::after { left: 28px; }
.sp-cast-card__person:hover .sp-cast-card__tip,
.sp-cast-card__person:focus .sp-cast-card__tip { opacity: 1; transform: translate(-50%, 0); }
.sp-cast-card__person:first-child:hover .sp-cast-card__tip,
.sp-cast-card__person:first-child:focus .sp-cast-card__tip { transform: translate(0, 0); }

.sp-cast-card .sp-showcase-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.sp-cast-card__heading { display: flex; flex-direction: column; gap: 3px; }
.sp-cast-card .sp-cast-card__heading h3 { display: -webkit-box; min-height: 2.3em; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 21px; line-height: 1.15; letter-spacing: -.015em; }
.sp-cast-card__meta { margin: 0; color: var(--c-teal); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.sp-cast-card .sp-cast-card__desc { display: -webkit-box; min-height: 3em; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }
.sp-cast-card__actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; }
.sp-cast-card__actions .aics-button { justify-content: center; width: 100%; min-height: 46px; box-sizing: border-box; font-size: 15px; }
.sp-cast-card__discover { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--color-text); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sp-cast-card__discover:hover { color: var(--color-accent-700); }

@media (prefers-reduced-motion: reduce) {
  .sp-cast-card__tip { transition: none; }
}

/* --- Carte de style : LA carte de style du site ------------------------------
   Accueil (bloc « Styles de génération », blocks/styles-showcase/render.php) et
   étape « Style » du tunnel (StyleCard, ui-kit.js) : un seul balisage, ces
   seules règles. L'aperçu dans un passe-partout à la couleur du style
   (`--style-swatch`, réglée dans l'écran du style), son numéro, puis le nom et
   la description sur le blanc. Au survol, une ombre beige franche, sans
   déplacement : la carte qui bougeait sous le pointeur gênait le choix dans le
   tunnel. Dans le tunnel, la carte est un bouton : sélectionnée (filet violet,
   coche, corps lilas), les autres s'estompent. */
.sp-style-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--color-divider);
  background: #fff;
  padding: 0;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  transition: box-shadow .18s ease, opacity .18s ease;
}
button.sp-style-card { cursor: pointer; }
.sp-style-card:hover { box-shadow: 8px 8px 0 var(--color-neutral-300); }
.sp-style-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.sp-style-card__frame { position: relative; display: block; border-bottom: 1px solid var(--color-divider); background: var(--style-swatch, var(--color-neutral-200)); padding: clamp(12px, 1.3vw, 18px); }
.sp-style-card__index {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background: var(--style-swatch, var(--color-neutral-200));
  padding: 6px 10px 7px;
  color: var(--color-text);
  font-family: var(--sp-font-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.sp-style-card__image { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--color-divider); background: #f5f1eb; }
.sp-style-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sp-style-card:hover .sp-style-card__image img { transform: scale(1.04); }
/* Sélection (tunnel, maquette « Sélection D ») : un bandeau violet posé sur le
   bas de l'aperçu, un filet violet et un corps lilas. Les autres cartes ne
   s'estompent plus : on doit pouvoir les comparer encore. */
.sp-style-card__chosen { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 8px; background: var(--color-accent); padding: 10px 14px; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.2; }
.sp-style-card__chosen svg { flex: none; stroke-width: 3; }
.sp-style-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 18px 22px; }
.sp-style-card__title { color: var(--color-text); font-family: var(--sp-font-heading); font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.sp-style-card__desc { color: var(--color-neutral-700); font-size: 15px; line-height: 1.5; }
.sp-style-card__note { color: var(--color-accent-700); font-size: 13px; font-weight: 700; line-height: 1.35; }
.sp-style-card.is-selected { border-color: var(--color-accent); background: var(--color-accent-100); }
.sp-style-card.is-selected .sp-style-card__frame { border-bottom-color: var(--color-accent); }
/* Une colonne sur téléphone : l'aperçu en 3/4 sur toute la largeur faisait
   près de 500 px de haut par carte. */
@media (max-width: 480px) { .sp-style-card__image { aspect-ratio: 4 / 3; } }
@media (max-width: 640px) {
  .sp-style-card__title { font-size: 16px; }
  .sp-style-card__desc { font-size: 13px; }
  .sp-style-card__body { padding: 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-style-card,
  .sp-style-card__image img { transition: none; }
}

/* En haut de page, pas de filet sous l'en-tête : il n'apparaît qu'une fois la
   page défilée (`is-scrolled`, posé par le gabarit des pages Gutenberg et par
   MarketingHeader). La bordure reste, transparente, pour que l'en-tête ne
   change pas de hauteur (--sp-header-height la compte). */
.sp-header { border-bottom-color: transparent; transition: border-color .15s ease; }
.sp-header.is-scrolled { border-bottom-color: var(--color-divider); }
@media (prefers-reduced-motion: reduce) { .sp-header { transition: none; } }

/* Carte d'histoire sélectionnée (tunnel, maquette « Sélection D », 2026-11-05) :
   un bandeau violet « Histoire choisie » posé sur le bas de la couverture — il
   ne décale rien —, un filet violet et un corps lilas. Le bouton violet ne
   reste qu'à la carte choisie (CastCard) ; l'anneau intérieur de 2 px des
   cartes du tunnel ne s'applique plus à elle. */
.sp-cast-card__chosen { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 8px; background: var(--color-accent); padding: 12px 16px; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.2; }
.sp-cast-card__chosen svg { flex: none; stroke-width: 3; }
.sp-cast-card.is-selected,
.sp-ob-cards .sp-cast-card.is-selected { border-color: var(--color-accent); box-shadow: none; }
.sp-cast-card.is-selected .sp-showcase-card__visual,
.sp-cast-card.is-selected .sp-cast-card__cast { border-bottom-color: var(--color-accent); }
.sp-cast-card.is-selected .sp-cast-card__cast,
.sp-cast-card.is-selected .sp-showcase-card__body { background: var(--color-accent-100); }

/* --- Tunnel : histoires par ligne de quatre ---------------------------------
   Même grille que « Des idées pour commencer » sur l'accueil : quatre cartes
   « distribution » par ligne, deux sous 1180 px, une sur téléphone. La grille
   auto-fill (300 px minimum) n'en posait que trois et laissait un trou à droite. */
.sp-ob-cards--stories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .sp-ob-cards--stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .sp-ob-cards--stories { grid-template-columns: 1fr; }
}

/* Retour au titre proposé, sous « Titre du livre » (tunnel, étape Personnages). */
.sp-ob-title-reset { margin: -6px 0 14px; color: var(--color-neutral-600); font-size: 12.5px; }
.sp-ob-title-reset__button { padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sp-ob-title-reset__button:hover { color: var(--color-text); }

/* Rôles facultatifs non pris : déjà dans l'histoire, personnalisables. */
.sp-ob-optional-roles { display: grid; gap: 10px; }
.sp-ob-optional-roles__intro { margin: 6px 0 2px; color: var(--color-neutral-700); font-size: 13.5px; line-height: 1.5; }
.sp-ob-optional-roles__intro strong { color: var(--color-text); }
.sp-ob-add--role { justify-content: flex-start; }
.sp-ob-add__portrait { width: 36px; height: 36px; flex: none; object-fit: cover; background: var(--color-neutral-100); }

/* Aperçu de l'étape Livre : la couverture de l'histoire au format retenu. */
.sp-ob-summary__book--story { padding: 22px; }
.sp-ob-summary__cover { position: relative; display: block; height: 190px; aspect-ratio: 1; box-shadow: 0 10px 22px rgba(42, 35, 32, .22); }
.sp-ob-summary__cover--portrait { aspect-ratio: 210 / 297; }
.sp-ob-summary__cover--landscape { height: auto; width: min(100%, 250px); aspect-ratio: 297 / 210; }
.sp-ob-summary__cover::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
.sp-ob-summary__book--story .sp-ob-summary__cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* Formats du livre sur téléphone : une ligne par format, photo à gauche. La
   photo en 4:3 sur toute la largeur occupait l'écran avant le moindre choix. */
@media (max-width: 639px) {
  .sp-ob-main--config .sp-ob-format-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-ob-main--config .sp-ob-format-grid .sp-ob-choice:has(.sp-ob-choice__photo) { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; align-content: start; }
  .sp-ob-main--config .sp-ob-format-grid .sp-ob-choice__photo { grid-row: 1 / span 6; align-self: start; margin: 0; aspect-ratio: 1; }
  .sp-ob-main--config .sp-ob-format-grid .sp-ob-choice > :not(.sp-ob-choice__photo) { grid-column: 2; }
}

/* Personnages propres à l'histoire (rôle non personnalisable) : présentés sous
   les cartes, sans formulaire. */
.sp-ob-fixed-roles { margin-top: 4px; }
.sp-ob-fixed-roles p { margin: 6px 0 10px; color: var(--color-neutral-700); font-size: 13.5px; line-height: 1.5; }
.sp-ob-fixed-roles ul { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.sp-ob-fixed-roles li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.sp-ob-fixed-roles img { width: 40px; height: 40px; object-fit: cover; background: var(--color-neutral-100); }

/* --- Tunnel : silhouettes de chargement (TunnelSkeleton) --------------------
   Chaque étape du tunnel et l'étape Création attendent dans leurs conteneurs
   réels (sp-ob-config, sp-book-styles, sp-ob-perso…) : seules les pièces
   (.sp-sk) sont des aplats neutres. En fin de feuille, pour l'emporter sur le
   fond propre des vignettes qu'elles occupent (photo de format, image de
   style, aperçu du récapitulatif). Mêmes couleurs et même pulsation que les
   fantômes de la grille de la vitrine. */
.sp-sk-page,
.sp-sk-card,
.sp-ob-cards .sp-skeleton { pointer-events: none; }
.sp-sk-card { cursor: default; }
.sp-sk-card.sp-ob-produit,
.sp-sk-card.sp-ob-choice,
.sp-sk-card.sp-style-card,
.sp-sk-page .sp-ob-perso,
.sp-sk-page .sp-launch-card { border-color: var(--color-neutral-300); }
.sp-sk-card .sp-style-card__frame { background: var(--color-neutral-100); }
.sp-sk { display: block; height: 12px; border: 0; background: var(--color-neutral-200); }
.sp-sk-head { display: grid; gap: 12px; margin-bottom: 32px; }
.sp-sk-head--center { justify-items: center; }
.sp-sk-head .sp-sk--h1 { margin-bottom: 4px; }
.sp-sk--overline { width: 132px; height: 11px; background: var(--color-accent-100); }
.sp-sk--h1 { height: clamp(28px, 3.4vw, 40px); }
.sp-sk--title { height: 18px; }
.sp-sk--text { height: 12px; }
.sp-sk--label { width: 40%; height: 10px; }
.sp-sk--section { width: 34%; height: 14px; margin-bottom: 12px; }
.sp-sk--price { width: 38%; height: 12px; margin-top: 10px; }
.sp-sk-card.sp-ob-choice .sp-sk--title { margin-bottom: 10px; }
.sp-sk--tag { height: 26px; }
.sp-sk--media { width: 100%; height: auto; }
.sp-sk-card.sp-ob-produit::before { content: none; }
.sp-sk--wide { aspect-ratio: 16 / 10; }
.sp-sk--summary { height: auto; min-height: 260px; margin-bottom: 14px; padding: 0; }
.sp-sk--photo { width: 156px; height: auto; aspect-ratio: 1; padding: 0; }
.sp-sk--portrait { width: 56px; height: 56px; flex: none; }
.sp-sk--face { width: 100%; height: auto; aspect-ratio: 1; }
.sp-sk--input { width: 100%; height: 44px; border: 1px solid var(--color-neutral-200); background: var(--color-neutral-100); }
.sp-sk--search { width: auto; max-width: 260px; height: 44px; flex: 1 1 200px; }
.sp-sk--count { width: 86px; height: 12px; margin-left: auto; }
.sp-sk-lines { display: grid; gap: 8px; }
.sp-sk-tags { display: flex; gap: 8px; }
.sp-sk-field { display: grid; gap: 8px; margin-bottom: 18px; }
.sp-ob-perso__fields .sp-sk-field { margin-bottom: 0; }
.sp-sk-field .sp-sk--label { width: 34%; }
.sp-sk-split { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sp-sk-row { border-bottom: 1px solid var(--color-neutral-200); padding: 14px 0; }
.sp-sk-pairs { display: grid; gap: 10px; margin-bottom: 18px; }
.sp-sk-pairs > span { display: flex; justify-content: space-between; gap: 12px; }
.sp-sk-total { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-divider); padding-top: 14px; }
.sp-ob-selection-summary__thumb.sp-sk { height: 48px; }
.sp-ob-config .sp-ob-choice__photo.sp-sk { height: auto; }
.sp-style-card__image.sp-sk { height: auto; border: 1px solid var(--color-neutral-200); }
.sp-launch-card > .sp-sk--title { margin-bottom: 8px; }
.sp-launch-card .sp-sk-lines { margin-top: 12px; }
.sp-sk-person { display: grid; gap: 8px; border: 2px solid var(--color-neutral-200); padding-bottom: 12px; }
.sp-sk-person > .sp-sk:not(.sp-sk--face) { margin-inline: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .sp-sk { animation: sp-skeleton-pulse 1.6s ease-in-out infinite; }
  .sp-sk--overline { animation: none; }
}
@media (max-width: 639px) {
  .sp-sk--photo { width: 100%; }
}