/**
 * home-showcase.css : Vitrine interactive des 7 familles
 * (section « Choisissez une famille » de la home, sous le hero)
 * Un cadre unique qui se transforme d'une famille à l'autre et 7 mini-interfaces manipulables.
 * Composant déplacé tel quel depuis l'ancien hero : comportement : js/pages/home-showcase.js
 * Sublime Gestion Site Vitrine
 */

/* === VITRINE : SCÈNE === */

.showcase {
  position: relative;
  min-width: 0;
  animation: showcaseIn 0.9s var(--ease-spring) 1.3s both;
}

@keyframes showcaseIn {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.showcase__stage {
  position: relative;
  height: 470px;
  container: stage / inline-size;
  --sc-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --sc-dur: 0.6s;
}

/* Halo sous le cadre : couleur de la scène active (orange par défaut) */
.showcase__glow {
  position: absolute;
  inset: 14% 6% -4%;
  background: radial-gradient(closest-side, rgba(var(--glow, 231, 92, 31), 0.22), rgba(var(--glow, 231, 92, 31), 0) 100%);
  pointer-events: none;
}

/* Le cadre qui se transforme d'une scène à l'autre */
.showcase__shell {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: #F7F6F2;
  border: 1px solid rgba(var(--noir-rgb), 0.08);
  box-shadow:
    0 40px 80px -32px rgba(var(--noir-rgb), 0.38),
    0 12px 28px -14px rgba(var(--noir-rgb), 0.2);
  transition:
    width var(--sc-dur) var(--sc-ease),
    height var(--sc-dur) var(--sc-ease),
    border-radius var(--sc-dur) var(--sc-ease),
    background-color var(--sc-dur) ease;
}

/* Chaque aperçu : positionné à sa taille finale, il apparaît quand le cadre arrive */
.sc {
  position: absolute;
  inset: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--dir, 1) * -40px)) scale(0.97);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.5, 0, 0.75, 0), visibility 0s linear 0.3s;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
}

.sc.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease 0.4s, transform 0.6s var(--ease-spring) 0.38s, visibility 0s linear 0s;
}

/* Changement de famille : la scène sortante part d'un côté, la nouvelle arrive de l'autre
   (--dir : 1 = vers la suivante, -1 = vers la précédente, posé par home-showcase.js) */
.sc.is-pre {
  transform: translateX(calc(var(--dir, 1) * 40px)) scale(0.97);
  transition: none !important;
}

.sc button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.sc button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Taille, arrondi et couleur de cadre propres à chaque scène */
.sc--saas   { width: 100%; height: 100%; border-radius: 16px; --shell: #F7F6F2; }
.sc--site   { width: 92%;  height: 100%; border-radius: 14px; --shell: #FFFFFF; }
.sc--mobile { width: 232px; height: 100%; max-height: 480px; border-radius: 40px; --shell: #0E0E11; }
.sc--tool   { width: 100%; height: 90%;  border-radius: 16px; --shell: #F5F3EE; }
.sc--ia     { width: min(372px, 88%); height: 100%; border-radius: 24px; --shell: #FFFFFF; }
.sc--shop   { width: 94%;  height: 80%;  border-radius: 20px; --shell: #FFFFFF; }
.sc--brand  { width: min(420px, 90%); height: 100%; border-radius: 28px; --shell: var(--brand, #1F5F4A); }

/* Le mini-site change réellement de largeur (format mobile) : le cadre suit */
.sc--site,
.sc--site.is-active {
  transition-property: opacity, transform, visibility, width;
  transition-duration: 0.2s, 0.3s, 0s, var(--sc-dur);
  transition-timing-function: ease, cubic-bezier(0.5, 0, 0.75, 0), linear, var(--sc-ease);
}

.sc--site.is-active {
  transition-duration: 0.35s, 0.6s, 0s, var(--sc-dur);
  transition-timing-function: ease, var(--ease-spring), linear, var(--sc-ease);
  transition-delay: 0.4s, 0.38s, 0s, 0s;
}

.sc--site.is-mobile { width: min(272px, 78%); }

/* Bascule instantanée (redimensionnement de la fenêtre, mouvement réduit) */
.showcase.is-instant .sc,
.showcase.is-instant .showcase__shell { transition: none !important; }

/* Message de confirmation interne à la vitrine */
.showcase__toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  max-width: calc(100% - 32px);
  transform: translate(-50%, 12px);
  opacity: 0;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--noir);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 12px 30px -10px rgba(var(--noir-rgb), 0.5);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-spring);
}

.showcase__toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.showcase__toast::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 8px;
  vertical-align: 1px;
}

/* === VITRINE : SÉLECTEUR 01 à 07 === */

.showcase__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.showcase__tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.showcase__tab {
  position: relative;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.showcase__tab:hover { color: var(--ink); background: rgba(var(--noir-rgb), 0.04); }

.showcase__tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.showcase__tab-num {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-light);
  transition: color 0.25s ease;
}

.showcase__tab.is-active,
.showcase__tab.is-active:hover { background: var(--noir); color: #FFFFFF; }

.showcase__tab.is-active .showcase__tab-num { color: var(--orange); }

/* Barre de progression du défilement automatique (sert aussi de minuterie) */
.showcase__tab-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.showcase__tab-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}

.showcase.is-playing .showcase__tab.is-active .showcase__tab-progress { opacity: 1; }

.showcase.is-playing .showcase__tab.is-active .showcase__tab-progress::after {
  animation: showcaseProgress var(--dur, 6500ms) linear forwards;
}

.showcase.is-paused .showcase__tab.is-active .showcase__tab-progress::after { animation-play-state: paused; }

@keyframes showcaseProgress { to { transform: scaleX(1); } }

.showcase__toggle {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.showcase__toggle:hover { border-color: var(--ink); }
.showcase__toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.showcase__toggle .is-play { display: none; }
.showcase__toggle[aria-pressed="true"] .is-play { display: block; }
.showcase__toggle[aria-pressed="true"] .is-pause { display: none; }

/* === VITRINE : LÉGENDE === */

.showcase__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 14px;
  padding-inline: 8px;
}

.showcase__caption {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.showcase__caption b { color: var(--ink); font-weight: 600; margin-right: 4px; }

.showcase__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}

.showcase__link:hover { color: var(--orange-hover); }
.showcase__link svg { transition: transform 0.2s ease; }
.showcase__link:hover svg { transform: translateX(3px); }

.showcase__note {
  margin-top: 8px;
  padding-inline: 8px;
  font-size: 12px;
  color: var(--muted-light);
}

/* === MINI-UI : ÉLÉMENTS COMMUNS === */

.sc--saas,
.sc--site,
.sc--tool { display: flex; flex-direction: column; }

.mini-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(var(--noir-rgb), 0.07);
}

.mini-bar__dots { display: flex; gap: 5px; flex-shrink: 0; }
.mini-bar__dots i { width: 8px; height: 8px; border-radius: 50%; background: #FF6159; }
.mini-bar__dots i:nth-child(2) { background: #FFBD2E; }
.mini-bar__dots i:nth-child(3) { background: #28C941; }

.mini-bar__url {
  flex: 1;
  min-width: 0;
  max-width: 260px;
  height: 20px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(var(--noir-rgb), 0.05);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc .mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.sc .mini-btn:hover { background: var(--orange-hover); }
.sc .mini-btn:active,
.sc .mini-btn.is-pressed { transform: scale(0.95); }
.sc .mini-btn--dark { background: var(--noir); }
.sc .mini-btn--dark:hover { background: #000000; }
.sc .mini-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.sc .mini-btn.is-loading { color: transparent; }
.sc .mini-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  animation: miniSpin 0.7s linear infinite;
}

@keyframes miniSpin { to { transform: rotate(360deg); } }
@keyframes miniIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* === MINI-UI 01 : WEB APP & SAAS === */

.mini-saas { flex: 1; min-height: 0; display: flex; }

.mini-saas__side {
  width: 46px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: var(--bg-dark);
}

.mini-saas__side b {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--orange);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
}

.mini-saas__side i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); }
.mini-saas__side i.is-on { background: rgba(var(--orange-rgb), 0.9); }

.mini-saas__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.mini-saas__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-saas__head strong { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }

.mini-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(var(--noir-rgb), 0.06);
}

.mini-seg button {
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mini-seg button.is-on { background: var(--noir); color: #FFFFFF; }

.mini-saas__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.mini-kpi {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mini-kpi span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-kpi b { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-kpi em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--success); white-space: nowrap; }
.mini-kpi em.is-down { color: #DC2626; }

.mini-chart {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 8px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mini-chart__head { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 600; }
.mini-chart__head span + span { color: var(--muted-light); font-weight: 500; }

.mini-chart__plot {
  flex: 1;
  min-height: 56px;
  margin-top: 8px;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.mini-chart__plot.is-drawing { clip-path: inset(0 100% 0 0); transition: none; }
.mini-chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mini-chart__area { fill: rgba(var(--orange-rgb), 0.12); }
.mini-chart__line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.mini-feed { display: flex; flex-direction: column; gap: 6px; }

.mini-feed li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 11px;
}

.mini-feed li.is-new { animation: miniIn 0.45s var(--ease-spring) both; }
.mini-feed li i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--success); }
.mini-feed li:first-child i { box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.2); }
.mini-feed li b { font-weight: 600; white-space: nowrap; }
.mini-feed li span { margin-left: auto; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === MINI-UI 02 : SITE VITRINE === */

.mini-device {
  flex-shrink: 0;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
  background: rgba(var(--noir-rgb), 0.05);
}

.mini-device button {
  width: 24px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--muted);
}

.mini-device button.is-on { background: #FFFFFF; color: var(--ink); box-shadow: var(--shadow-xs); }

.mini-site {
  /* Direction "sobre" par défaut : mêmes palettes que la démo site-vitrine */
  --s-bg: #FFFFFF;
  --s-bg2: #F5F6F8;
  --s-ink: #171A21;
  --s-muted: #6B7280;
  --s-accent: #1F2A44;
  --s-border: #E6E8EC;
  --s-radius: 8px;
  --s-title-font: 'Inter', sans-serif;
  --s-title-style: normal;
  --s-title-weight: 700;
  --s-title-transform: none;
  --s-wood: linear-gradient(135deg, #E5CDA7, #B48A5B);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  container: site / inline-size;
  background: var(--s-bg);
  color: var(--s-ink);
  transition: background-color 0.4s ease, color 0.4s ease;
}

.mini-site[data-theme="chaleureux"] {
  --s-bg: #FBF6EE;
  --s-bg2: #F3EADB;
  --s-ink: #2B221C;
  --s-muted: #7A6A5E;
  --s-accent: #B4532A;
  --s-border: #E8DCCB;
  --s-radius: 14px;
  --s-title-font: 'Instrument Sans', serif;
  --s-title-style: italic;
  --s-title-weight: 500;
  --s-wood: linear-gradient(135deg, #C89B6D, #7A4A2A);
}

.mini-site[data-theme="audacieux"] {
  --s-bg: #0E1512;
  --s-bg2: #172420;
  --s-ink: #F2F7F5;
  --s-muted: #9DB3AC;
  --s-accent: #0F766E;
  --s-border: rgba(255, 255, 255, 0.1);
  --s-radius: 0px;
  --s-title-weight: 800;
  --s-title-transform: uppercase;
  --s-wood: linear-gradient(135deg, #8B5E3C, #2E1D12);
}

.mini-site__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--s-border);
  font-size: 11px;
}

.mini-site__logo { font-size: 12.5px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.mini-site__links { display: flex; gap: 12px; margin-left: auto; color: var(--s-muted); white-space: nowrap; }
.mini-site__cta { padding: 5px 11px; border-radius: var(--s-radius); background: var(--s-accent); color: #FFFFFF; font-weight: 600; transition: border-radius 0.4s ease, background-color 0.4s ease; }
.mini-site__burger { display: none; flex-direction: column; gap: 4px; margin-left: auto; }
.mini-site__burger i { width: 16px; height: 2px; border-radius: 2px; background: var(--s-ink); }

.mini-site__hero {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: center;
  padding: 20px 18px 14px;
}

.mini-site__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.mini-site__eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.mini-site[data-theme="audacieux"] .mini-site__eyebrow { color: #5EEAD4; }

.mini-site__title {
  font-family: var(--s-title-font);
  font-style: var(--s-title-style);
  font-weight: var(--s-title-weight);
  text-transform: var(--s-title-transform);
  font-size: 27px;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.mini-site[data-theme="audacieux"] .mini-site__title { font-size: 22px; letter-spacing: -0.01em; }
.mini-site__title em { font-style: inherit; color: var(--s-accent); }
.mini-site[data-theme="audacieux"] .mini-site__title em { color: #5EEAD4; }

.mini-site__btn {
  padding: 8px 13px;
  border-radius: var(--s-radius);
  background: var(--s-ink);
  color: var(--s-bg);
  font-size: 11px;
  font-weight: 600;
  transition: border-radius 0.4s ease;
}

.mini-site__visual {
  position: relative;
  align-self: stretch;
  min-height: 120px;
  overflow: hidden;
  border-radius: var(--s-radius);
  background: var(--s-wood);
  transition: border-radius 0.4s ease;
}

/* Veinage du bois + lumière de fenêtre, en CSS pur */
.mini-site__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 9px);
}

.mini-site__visual i {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 18%, rgba(255, 240, 210, 0.55), transparent 55%);
}

.mini-site__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 16px;
}

.mini-site__cards span {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  border-radius: var(--s-radius);
  background: var(--s-bg2);
  font-size: 10.5px;
  font-weight: 600;
  transition: border-radius 0.4s ease, background-color 0.4s ease;
}

.mini-site__cards i {
  height: 30px;
  border-radius: calc(var(--s-radius) * 0.6);
  background: var(--s-wood);
  opacity: 0.85;
}

/* Le mini-site passe en mise en page mobile quand son cadre se rétrécit */
@container site (max-width: 380px) {
  .mini-site__links,
  .mini-site__cta { display: none; }
  .mini-site__burger { display: flex; }
  .mini-site__hero { grid-template-columns: 1fr; align-content: start; gap: 12px; padding-top: 14px; }
  .mini-site__visual { order: -1; min-height: 104px; }
  .mini-site__title { font-size: 22px; }
  .mini-site__cards { grid-template-columns: 1fr 1fr; }
  .mini-site__cards span:nth-child(3) { display: none; }
}

.mini-themes {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: var(--radius-pill);
  background: rgba(var(--noir-rgb), 0.05);
}

.mini-themes button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 2px #FFFFFF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mini-themes button:hover { transform: scale(1.12); }
.mini-themes button.is-on { box-shadow: inset 0 0 0 2px #FFFFFF, 0 0 0 2px var(--c); }

/* === MINI-UI 03 : MOBILE NATIF === */

.sc--mobile { padding: 7px; }

.mini-phone {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 33px;
  background: #F6F4EF;
}

.mini-phone__status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 20px 0 24px;
  font-size: 11px;
}

.mini-phone__status b { font-weight: 700; }
.mini-phone__island { width: 72px; height: 20px; border-radius: 12px; background: #0E0E11; }
.mini-phone__sig { display: flex; align-items: flex-end; gap: 2px; }
.mini-phone__sig i { width: 3px; height: 5px; border-radius: 1px; background: var(--ink); }
.mini-phone__sig i:nth-child(2) { height: 7px; }
.mini-phone__sig i:nth-child(3) { height: 9px; }

.mini-phone__app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  overflow: hidden;
}

.mini-phone__hello { font-size: 11px; color: var(--muted); }
.mini-phone__date { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; }

.mini-phone__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 16px;
  background: var(--noir);
  color: #FFFFFF;
}

/* padding-right : le libellé passe à la ligne au lieu de glisser sous la pastille « À confirmer » */
.mini-phone__label { padding-right: 80px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.mini-phone__card b { font-size: 13px; font-weight: 700; }
.mini-phone__card small { font-size: 10.5px; color: rgba(255, 255, 255, 0.6); }

.mini-phone__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(var(--orange-rgb), 0.22);
  color: #FFB48F;
  font-size: 9.5px;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mini-phone__badge.is-ok { background: rgba(var(--success-rgb), 0.22); color: #6EE7B7; }

.mini-phone__section { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.mini-phone__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
}

.mini-phone__row small { font-size: 10.5px; font-weight: 500; color: var(--muted); }

.mini-phone__msg {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
}

.mini-phone__msg > i {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--orange-rgb), 0.12);
  color: var(--orange-hover);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
}

.mini-phone__msg div { flex: 1; min-width: 0; }
.mini-phone__msg b { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-phone__msg small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mini-phone__msg em {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: #FFFFFF;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
}

.mini-phone__tabbar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  padding: 10px 18px 16px;
  background: #FFFFFF;
  border-top: 1px solid var(--border);
}

.mini-phone__tabbar i { width: 18px; height: 18px; border-radius: 6px; background: #E8E4DB; }
.mini-phone__tabbar i.is-on { background: var(--orange); }

.mini-push {
  position: absolute;
  top: 40px;
  left: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px 9px;
  padding: 10px 11px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-140%);
  transition: transform 0.55s var(--ease-spring), opacity 0.3s ease, visibility 0s linear 0.55s;
}

.mini-push.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.mini-push__app {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: radial-gradient(circle at 50% 50%, var(--orange) 0 5px, var(--noir) 5.5px);
}

.mini-push__body { min-width: 0; }
.mini-push__body b { display: block; font-size: 11px; font-weight: 700; }
.mini-push__body span { display: block; font-size: 10.5px; color: var(--ink-2); line-height: 1.3; }

.mini-push__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.mini-push__actions button {
  height: 27px;
  border-radius: 9px;
  background: rgba(var(--noir-rgb), 0.07);
  font-size: 10.5px;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.mini-push__actions button[data-push-act="ok"] { background: var(--noir); color: #FFFFFF; }
.mini-push__actions button.is-pressed { transform: scale(0.94); }

/* === MINI-UI 04 : OUTILS MÉTIER (GESTION AUTO-ÉCOLE) === */

.mini-tool { flex: 1; min-height: 0; display: flex; }

.mini-tool__side {
  width: 118px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 10px;
  background: var(--bg-dark);
  color: #FFFFFF;
}

.mini-tool__logo { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; }

.mini-tool__logo b {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--orange);
  font-size: 11px;
}

.mini-tool__roles { display: flex; flex-direction: column; gap: 3px; }

.mini-tool__roles button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  color: rgba(255, 255, 255, 0.62);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.mini-tool__roles button:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.mini-tool__roles button.is-on { background: var(--orange); color: #FFFFFF; }
.mini-tool__roles button.is-pressed { transform: scale(0.95); }

.mini-tool__roles i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
}

.mini-tool__roles button.is-on i { background: rgba(255, 255, 255, 0.22); }

.mini-tool__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}

.mini-tool__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-tool__head strong { font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }

.mini-tool__view {
  min-width: 0;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-plan {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 16px repeat(10, minmax(0, 1fr));
  gap: 3px 5px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mini-plan__day {
  grid-column: var(--d);
  grid-row: 1;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mini-plan__slot {
  grid-column: var(--d);
  grid-row: var(--r) / span var(--l);
  min-width: 0;
  padding: 3px 5px;
  border-radius: 5px;
  border-left: 2.5px solid var(--orange);
  background: rgba(var(--orange-rgb), 0.14);
  color: #9A3412;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.35s ease, filter 0.35s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.mini-plan__slot--y { border-color: #2563EB; background: rgba(37, 99, 235, 0.12); color: #1E40AF; }
.mini-plan__slot--code { border-color: #7C3AED; background: rgba(124, 58, 237, 0.12); color: #5B21B6; }

/* Les créneaux se posent à l'arrivée de la scène ("backwards" : la vue par
   profil peut ensuite les estomper sans être écrasée par l'animation) */
.sc.is-active .mini-plan__slot { animation: miniDrop 0.5s var(--ease-spring) backwards; animation-delay: calc(var(--i) * 45ms + 0.35s); }

@keyframes miniDrop {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Un seul outil, quatre regards : chaque profil ne voit que ce qui le concerne */
.mini-tool[data-role="moniteur"] .mini-plan__slot:not([data-m="karim"]),
.mini-tool[data-role="eleve"] .mini-plan__slot:not([data-e="lea"]) { opacity: 0.16; filter: grayscale(1); }

.mini-tool[data-role="secretariat"] .mini-plan__slot[data-conflict] {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.1);
  color: #991B1B;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.55);
}

.mini-tool__alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mini-tool__dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.mini-tool__alert.is-info .mini-tool__dot { background: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.mini-tool__alert.is-done .mini-tool__dot { background: var(--success); box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.18); }

.mini-tool__alert-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mini-tool__alert-text b,
.mini-tool__alert-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-tool__alert-text b { font-size: 11.5px; font-weight: 700; }
.mini-tool__alert-text small { font-size: 10.5px; color: var(--muted); }

.mini-tool__alert button {
  flex-shrink: 0;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.mini-tool__alert button:hover { background: var(--orange-hover); }
.mini-tool__alert button.is-pressed { transform: scale(0.94); }
.mini-tool__alert button:disabled { background: rgba(var(--noir-rgb), 0.08); color: var(--muted); cursor: default; }

/* === MINI-UI 05 : IA APPLIQUÉE === */

.mini-chat { height: 100%; display: flex; flex-direction: column; }

.mini-chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }

.mini-chat__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #B4532A;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
}

.mini-chat__head b { display: block; font-size: 12.5px; font-weight: 700; }
.mini-chat__head small { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.mini-chat__head small i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.mini-chat__log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 14px 10px;
  overflow: hidden;
  background: linear-gradient(#FBFAF7, #FFFFFF);
}

.mini-msg {
  flex-shrink: 0;
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 14px 14px 14px 4px;
  background: #F1EEE7;
  font-size: 11.5px;
  line-height: 1.4;
  animation: miniIn 0.35s var(--ease-spring) both;
}

.mini-msg--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--noir); color: #FFFFFF; }
.mini-msg--handoff { background: rgba(var(--success-rgb), 0.12); color: #065F46; }

.mini-msg--typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 11px 12px; }
.mini-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-light); animation: miniDot 1s ease-in-out infinite; }
.mini-msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.mini-msg--typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes miniDot {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

.mini-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--border); }

.mini-chat__chips button {
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.mini-chat__chips button:hover,
.mini-chat__chips button.is-pressed { border-color: var(--orange); color: var(--orange); }
.mini-chat__chips button.is-pressed { transform: scale(0.95); }
.mini-chat__chips button:disabled { opacity: 0.4; cursor: default; }

/* === MINI-UI 06 : E-COMMERCE, RÉSERVATION & PAIEMENT === */

.mini-shop { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.mini-shop__product { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-right: 1px solid var(--border); }
.mini-shop__top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.mini-shop__top b { font-weight: 700; letter-spacing: -0.02em; }
.mini-shop__cart { position: relative; display: inline-flex; color: var(--ink); }

.mini-shop__cart i {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: #FFFFFF;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  transform: scale(0);
  transition: transform 0.3s var(--ease-bounce);
}

.mini-shop__cart.has-items i { transform: scale(1); }
.mini-shop__cart.is-bump i { animation: miniBump 0.4s var(--ease-bounce); }
@keyframes miniBump { 50% { transform: scale(1.4); } }

.mini-shop__img {
  position: relative;
  flex: 1;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #F3EADB, #E8DCCB);
}

/* La planche, dessinée en CSS : chêne huilé, veinage, poignée percée */
.mini-shop__img i {
  position: relative;
  width: 62%;
  aspect-ratio: 40 / 28;
  border-radius: 10px;
  background: repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 8px), linear-gradient(135deg, #C89B6D, #8C5A32);
  box-shadow: 0 14px 22px -10px rgba(76, 45, 22, 0.55);
  transform: rotate(-8deg);
}

.mini-shop__img i::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #EDE2D1;
  transform: translateY(-50%);
}

.mini-shop__name { margin-top: 4px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em; }
.mini-shop__desc { font-size: 10.5px; color: var(--muted); }
.mini-shop__buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.mini-shop__price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Barre « Voir le panier » et retour au produit : seulement quand la scène est étroite (plus bas) */
.sc .mini-shop__bag {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--noir);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  animation: miniIn 0.35s var(--ease-spring) both;
}

.mini-shop__bag svg { flex-shrink: 0; }
.mini-shop__bag b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-shop__bag em { font-style: normal; font-weight: 700; color: var(--orange); }
.mini-shop__bag em::after { content: ' ›'; }

.sc .mini-shop__back {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.sc .mini-shop__back:hover { color: var(--ink); }

.mini-shop__checkout { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #FBFAF7; }

.mini-shop__steps { display: flex; gap: 4px; }
.mini-shop__steps span { flex: 1; padding-top: 6px; border-top: 2px solid var(--border); font-size: 9.5px; font-weight: 600; color: var(--muted-light); transition: border-color 0.3s ease, color 0.3s ease; }
.mini-shop__steps span.is-on { border-color: var(--orange); color: var(--ink); }

.mini-shop__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--muted-light);
}

.mini-shop__lines { display: flex; flex-direction: column; gap: 7px; animation: miniIn 0.35s var(--ease-spring) both; }
.mini-shop__line { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-2); }
.mini-shop__line em { font-style: normal; color: var(--muted); }
.mini-shop__line b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-shop__line--total { padding-top: 8px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--ink); }
.mini-shop__line--total b { font-weight: 700; }

.mini-shop__free { display: flex; flex-direction: column; gap: 4px; font-size: 9.5px; color: var(--muted); }
.mini-shop__free i { height: 4px; overflow: hidden; border-radius: 4px; background: var(--border); }
.mini-shop__free b { display: block; width: var(--p, 49%); height: 100%; border-radius: 4px; background: var(--success); transition: width 0.5s var(--ease-spring); }

.mini-shop__card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2D3142, #1A1A1F);
  color: #FFFFFF;
  animation: miniIn 0.35s var(--ease-spring) both;
}

.mini-shop__card span { grid-column: 1 / -1; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.mini-shop__card b { font-size: 13px; letter-spacing: 0.08em; }
.mini-shop__card small { align-self: end; font-size: 10px; color: rgba(255, 255, 255, 0.6); }

.sc .mini-shop__next { width: 100%; height: 34px; margin-top: auto; }

.mini-shop__done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: #FBFAF7;
  animation: miniIn 0.4s var(--ease-spring) both;
}

.mini-shop__check {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success);
  color: #FFFFFF;
  animation: miniPop 0.5s var(--ease-bounce) both;
}

@keyframes miniPop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: none; }
}

.mini-shop__done b { font-size: 14px; font-weight: 700; }
.mini-shop__done small { font-size: 10.5px; color: var(--muted); }
.mini-shop__done button { margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }

/* === MINI-UI 07 : BRANDING === */

.sc--brand { color: var(--brand-ink); }

.mini-brand { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }

.mini-brand__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-brand__label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.mini-brand__swatches { display: flex; gap: 7px; }

.mini-brand__swatches button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mini-brand__swatches button:hover { transform: scale(1.12); }
.mini-brand__swatches button.is-on { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(0, 0, 0, 0.28); }

.mini-brand__hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }

/* Le monogramme : même élément pour les trois formes (le polygone à six points
   s'interpole entre carré et hexagone) */
.mini-brand__mark {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
  background: var(--brand-ink);
  color: var(--brand);
  font-family: 'Instrument Sans', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  transition: border-radius 0.45s var(--ease-spring), clip-path 0.45s var(--ease-spring), background-color 0.45s ease, color 0.45s ease;
}

.mini-brand[data-mark="circle"] .mini-brand__mark { border-radius: 50%; }
.mini-brand[data-mark="hex"] .mini-brand__mark { border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }

.mini-brand__word { font-family: 'Instrument Sans', serif; font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.mini-brand__tag { font-size: 11px; letter-spacing: 0.02em; opacity: 0.75; }

.mini-brand__shapes { display: flex; justify-content: center; gap: 6px; }

.mini-brand__shapes button {
  width: 30px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-ink) 12%, transparent);
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.mini-brand__shapes button.is-on { background: color-mix(in srgb, var(--brand-ink) 30%, transparent); }
.mini-brand__shapes button.is-pressed { transform: scale(0.92); }
.mini-brand__shapes i { width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.mini-brand__shapes [data-mark="circle"] i { border-radius: 50%; }
.mini-brand__shapes [data-mark="hex"] i { border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }

.mini-brand__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }

.mini-brand__card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.5deg);
}

.mini-brand .mini-brand__mark--sm { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--brand); color: var(--brand-ink); font-size: 17px; }
.mini-brand[data-mark="circle"] .mini-brand__mark--sm { border-radius: 50%; }
.mini-brand[data-mark="hex"] .mini-brand__mark--sm { border-radius: 0; }
.mini-brand__card div { min-width: 0; }
.mini-brand__card b { display: block; font-family: 'Instrument Sans', serif; font-style: italic; font-weight: 500; font-size: 14px; }
.mini-brand__card small { display: block; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mini-brand__type { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand-ink) 12%, transparent); }
.mini-brand__type b { font-family: 'Instrument Sans', serif; font-style: italic; font-weight: 500; font-size: 26px; line-height: 1; }
.mini-brand__type small { margin-top: 4px; font-size: 9.5px; line-height: 1.3; opacity: 0.75; }

.mini-brand__palette { display: flex; gap: 5px; }

.mini-brand__palette i {
  flex: 1;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand) var(--t), #FFFFFF);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand-ink) 35%, transparent);
  transition: background-color 0.45s ease;
}

.mini-brand__palette i.is-ink { background: var(--ink); }

/* === VITRINE : ADAPTATION AUX PETITES SCÈNES (mobile) === */

@container stage (max-width: 520px) {
  .mini-bar__url { max-width: 150px; }

  .mini-saas__side { width: 38px; }
  .mini-saas__main { gap: 8px; padding: 12px; }
  .mini-saas__head strong { font-size: 13px; }
  .mini-saas__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-saas__kpis .mini-kpi:nth-child(3) { display: none; }
  .mini-feed li:nth-child(2) { display: none; }

  .mini-tool__side { width: 44px; align-items: center; padding: 10px 6px; }
  .mini-tool__logo span,
  .mini-tool__roles span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mini-tool__roles button { justify-content: center; padding: 6px; }
  .mini-tool__main { padding: 10px; }
  .mini-tool__view { display: none; }
  .mini-plan { gap: 2px 3px; padding: 6px; }
  .mini-plan__slot { padding: 2px 3px; font-size: 8.5px; }

  /* Boutique : une colonne. Le panier ne recouvre plus le produit tout seul (on peut ajouter
     plusieurs articles) : il glisse par-dessus quand on l'ouvre (barre « Voir le panier » ou
     « Commander »), et « Continuer mes achats » ramène au produit. */
  .mini-shop { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  .mini-shop__product { border-right: 0; }
  .mini-shop__checkout { position: absolute; inset: 0; transform: translateX(100%); transition: transform 0.45s var(--ease-spring); }
  .mini-shop.is-cart-open .mini-shop__checkout { transform: none; }
  .sc .mini-shop__bag { display: flex; }
  .sc .mini-shop__back { display: inline-flex; }

  .mini-brand { gap: 10px; padding: 16px; }
  .mini-brand__mark { width: 54px; height: 54px; font-size: 30px; }
  .mini-brand__word { font-size: 28px; }
  .mini-brand__row { grid-template-columns: minmax(0, 1fr); }
  .mini-brand__type { display: none; }
}

/* === VITRINE : RESPONSIVE === */

/* Labels des onglets inactifs masqués visuellement (restent lus par les lecteurs d'écran) */
@media (max-width: 760px) {
  .showcase__tab:not(.is-active) .showcase__tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 600px) {
  .showcase__stage { height: 420px; }
  .sc--mobile { width: 212px; }
  .showcase__tab { padding: 0 6px; }
  .showcase__tab .showcase__tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .showcase__foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* === VITRINE : MOUVEMENT RÉDUIT === */

@media (prefers-reduced-motion: reduce) {
  .showcase { animation: none; }

  .showcase__shell,
  .sc,
  .sc.is-active,
  .mini-chart__plot,
  .mini-push,
  .mini-shop__checkout { transition: none !important; }

  .sc,
  .sc.is-active,
  .sc.is-pre { transform: none; }

  .showcase__chapter { display: none; }

  .showcase.is-swap .showcase__shell,
  .showcase__peek.is-nudge .showcase__peek-card { animation: none; }

  .showcase__peek-card,
  .showcase__peek-arrow { transition: none; }

  .mini-plan__slot,
  .mini-msg,
  .mini-feed li,
  .mini-shop__lines,
  .mini-shop__card,
  .mini-shop__done,
  .mini-shop__check { animation: none !important; }
}


/* === VITRINE : REPÈRES DE NAVIGATION (7 familles, on peut changer soi-même) === */

/* On change de PROJET, pas de variante : la famille précédente et la suivante sont nommées et
   visibles (croquis, numéro, nom, aux couleurs de leur cadre). Sur grand écran, ce sont deux cartes
   posées de chaque côté, comme un jeu étalé sur la table ; ailleurs, deux boutons nommés sous
   l'aperçu, et la tranche des cartes voisines dépasse sur les bords. */

.families-section { overflow-x: clip; }

.showcase__nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.showcase__peek {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: calc(50% - 5px);
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.3s ease, transform 0.35s var(--ease-spring);
}

.showcase__peek--next { flex-direction: row-reverse; padding: 5px 5px 5px 16px; text-align: right; }
.showcase__peek:hover { border-color: rgba(var(--orange-rgb), 0.55); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.showcase__peek:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.showcase__peek-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--noir);
  color: #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--ease-spring);
}

.showcase__peek:hover .showcase__peek-arrow { background: var(--orange); }
.showcase__peek--prev:hover .showcase__peek-arrow { transform: translateX(-3px); }
.showcase__peek--next:hover .showcase__peek-arrow { transform: translateX(3px); }

.showcase__peek-card { display: flex; min-width: 0; }
.showcase__peek-art { display: none; }
.showcase__peek-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.showcase__peek-text small { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.62; }
.showcase__peek-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.showcase__peek-text b { margin-right: 3px; color: var(--orange); font-variant-numeric: tabular-nums; }

/* Téléphone : libellé court (« Précédente », « Suivante ») pour laisser la place au nom de la famille */
@media (max-width: 600px) {
  .showcase__nav { gap: 8px; }
  .showcase__peek { gap: 8px; padding: 4px 12px 4px 4px; }
  .showcase__peek--next { padding: 4px 4px 4px 12px; }
  .showcase__peek-arrow { width: 34px; height: 34px; }
  .showcase__peek-fam { display: none; }
  .showcase__peek-text > span { white-space: normal; font-size: 13px; line-height: 1.2; }
}

/* Une fois, au démarrage : la carte suivante fait signe */
.showcase__peek--next.is-nudge .showcase__peek-card { animation: showcaseNudge 1.2s var(--ease-spring) 2; }
@keyframes showcaseNudge { 35% { translate: -10px 0; } }

@media (min-width: 1200px) {
  .showcase__nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 470px;
    margin: 0;
    pointer-events: none;
  }

  .showcase__peek {
    position: absolute;
    top: 50%;
    max-width: none;
    gap: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    pointer-events: auto;
    translate: 0 -50%;
  }

  .showcase__peek:hover { box-shadow: none; transform: none; }
  .showcase__peek--prev { right: calc(100% + 16px); flex-direction: row-reverse; padding: 0; }
  .showcase__peek--next { left: calc(100% + 16px); flex-direction: row; padding: 0; text-align: left; }

  .showcase__peek-arrow {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--ink);
    box-shadow: var(--shadow-md);
  }

  .showcase__peek:hover .showcase__peek-arrow { border-color: var(--orange); background: var(--orange); color: #FFFFFF; }

  .showcase__peek-card {
    flex-direction: column;
    gap: 12px;
    width: 150px;
    padding: 14px 14px 13px;
    border-radius: 18px;
    border: 1px solid rgba(var(--noir-rgb), 0.08);
    background: var(--peek-bg, #FFFFFF);
    color: var(--peek-ink, var(--ink));
    /* la carte d'en dessous : on devine le reste du jeu */
    box-shadow:
      7px 7px 0 -1px var(--bg-card),
      7px 7px 0 0 rgba(var(--noir-rgb), 0.1),
      0 26px 50px -28px rgba(var(--noir-rgb), 0.5);
    opacity: 0.9;
    rotate: 3deg;
    transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring), opacity 0.3s ease, background-color 0.4s ease;
  }

  .showcase__peek--prev .showcase__peek-card {
    rotate: -3deg;
    box-shadow:
      -7px 7px 0 -1px var(--bg-card),
      -7px 7px 0 0 rgba(var(--noir-rgb), 0.1),
      0 26px 50px -28px rgba(var(--noir-rgb), 0.5);
  }

  .showcase__peek--prev:hover .showcase__peek-card { rotate: 0deg; transform: translateX(6px); opacity: 1; }
  .showcase__peek--next:hover .showcase__peek-card { rotate: 0deg; transform: translateX(-6px); opacity: 1; }

  .showcase__peek-art { display: block; width: 100%; height: 70px; }
  .showcase__peek-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .showcase__peek-art svg * { vector-effect: non-scaling-stroke; }
  .showcase__peek-text small { opacity: 0.6; }
  .showcase__peek-text > span { white-space: normal; font-size: 14px; line-height: 1.2; }
}

/* Carton de chapitre : il occupe le cadre pendant que celui-ci se transforme, puis la scène le recouvre */
.showcase__chapter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--chapter-ink, var(--ink));
  text-align: center;
  pointer-events: none;
  opacity: 0;
}

.showcase__chapter span { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: var(--orange); }

.showcase__chapter b {
  max-width: 16ch;
  font-family: 'Instrument Sans', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 7cqi, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.showcase__chapter small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.showcase__chapter small svg { width: 12px; height: 12px; }

.showcase__chapter.is-on { animation: showcaseChapter 0.78s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes showcaseChapter {
  0%       { opacity: 0; transform: translateX(calc(var(--dir, 1) * 18px)) scale(0.96); }
  16%      { opacity: 1; transform: none; }
  56%      { opacity: 1; }
  82%, 100% { opacity: 0; transform: translateX(calc(var(--dir, 1) * -8px)); }
}

/* Le cadre accuse le changement, du côté où l'on va */
.showcase.is-swap .showcase__shell { animation: showcaseKick 0.6s var(--sc-ease); }
@keyframes showcaseKick { 40% { translate: calc(var(--dir, 1) * -12px) 0; } }

.showcase__count {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--noir);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.showcase__note .demo-live-badge { margin-right: 4px; }

/* Hors grand écran : la tranche des cartes voisines dépasse sur les bords (couleur de leur cadre) */
@media (max-width: 1199px) {
  .showcase__stage::before,
  .showcase__stage::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 62%;
    border: 1px solid rgba(var(--noir-rgb), 0.1);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    translate: 0 -50%;
    pointer-events: none;
    transition: background-color 0.5s ease;
  }

  .showcase__stage::before { right: calc(100% + 10px); background: var(--prev-shell, #FFFFFF); }
  .showcase__stage::after { left: calc(100% + 10px); background: var(--next-shell, #FFFFFF); }
}