/* ============================================================
   Saya AI — feuille de style principale
   ------------------------------------------------------------
   1. Couleurs & typographie (les « jetons » de la marque)
   2. Base
   3. Composants (boutons, cartes, formulaires, badges…)
   4. Page d'accueil
   5. Application (menu latéral, tableau de bord, outils…)
   6. Adaptation téléphone / tablette
   Pour changer l'identité visuelle, modifiez surtout la partie 1.
   ============================================================ */

/* ---------- 1. Jetons de marque ---------- */
/* Repris À L'IDENTIQUE de public/css/tokens.css (l'app réelle). Accent
   passé du teal au violet (décision Ben, 04/11/2026, le violet du logo
   devient l'accent du produit) — changé dans les DEUX fichiers ensemble
   pour qu'un visiteur ne change jamais de produit visuellement en
   cliquant "Ouvrir le studio". Noms de variables gardés (--ink-2,
   --danger, --radius…) pour ne pas toucher aux règles qui les utilisent. */
:root {
  --bg: #F2F4F6;
  --surface: #FFFFFF;
  --surface-2: #E8ECEF;
  --ink: #0E1419;
  --ink-2: #2B3238;
  --muted: #48525C;
  --line: #DCE1E6;
  --field: #7D8792;         /* contour des pastilles du composer */
  --accent: #5235E8;        /* violet Saya — identité réelle de l'app */
  --accent-hover: #4026C9;
  --accent-ink: #FFFFFF;
  --accent-soft: #ECE8FF;
  --accent-soft-ink: #4026C9;
  --tint: #ECE8FF;           /* alias d'accent-soft, pour les blocs copiés de l'app */
  --ok: #157A4A;
  --ok-soft: #E2F4EA;
  --warn: #8A5300;
  --warn-soft: #FFF1D9;
  --danger: #8A1C12;
  --danger-soft: #FBE6E3;

  --font-display: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-text: "Geist", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --r-nav: 32px;             /* barre de navigation flottante */
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(14, 20, 25, .06), 0 8px 24px rgba(14, 20, 25, .06);
  --shadow-nav: 0 10px 30px rgba(14, 20, 25, .12), 0 0 0 1px var(--line);
  --nav-bar: #FFFFFF;
  --nav-inactive: #48525C;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0F12; --surface: #161B20; --surface-2: #1D232A; --ink: #EDF1F4; --ink-2: #D2D8DC;
    --muted: #A2ACB5; --line: #2A3038; --field: #5E6873;
    --accent: #B7AEEB; --accent-hover: #A090FF; --accent-ink: #1A1430;
    --accent-soft: #2A2144; --accent-soft-ink: #B7AEEB; --tint: #2A2144;
    --ok: #5BD69A; --ok-soft: #12291E; --warn: #F2B65A; --warn-soft: #2D2210; --danger: #FFB3A7; --danger-soft: #3A1A17;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-nav: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px var(--line);
    --nav-bar: #1D232A; --nav-inactive: #B3BCC5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0F12; --surface: #161B20; --surface-2: #1D232A; --ink: #EDF1F4; --ink-2: #D2D8DC;
  --muted: #A2ACB5; --line: #2A3038; --field: #5E6873;
  --accent: #B7AEEB; --accent-hover: #A090FF; --accent-ink: #1A1430;
  --accent-soft: #2A2144; --accent-soft-ink: #B7AEEB; --tint: #2A2144;
  --ok: #5BD69A; --ok-soft: #12291E; --warn: #F2B65A; --warn-soft: #2D2210; --danger: #FFB3A7; --danger-soft: #3A1A17;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-nav: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px var(--line);
  --nav-bar: #1D232A; --nav-inactive: #B3BCC5;
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Les liens de nav (#decouvrir, #tarifs) sautaient d'un coup sec — Ben,
   05/11/2026. Dans son propre media query pour respecter un visiteur qui a
   demandé de réduire les animations (voir règle @media reduced-motion plus
   bas, qui désactiverait aussi ce scroll si elle le couvrait). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Gouttière responsive (clamp, pas un padding fixe) : reprise de vagua-web
   (GOUTTIERE, Section.tsx), qui garde 1180px de cap mais laisse le vide sur
   les bords grandir avec l'écran. Un padding figé à 20px sur un très grand
   écran rendait le bloc de contenu "trop centré", îlot étroit dans un vide
   qui ne grandit jamais avec lui — Ben, 05/11/2026. */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* ---------- 3. Composants ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo img { width: 34px; height: 34px; }
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; }
.logo-word span { color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--ink-2); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--line); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--surface-2); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card-title { font-size: 18px; font-weight: 700; }
.muted { color: var(--muted); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-accent { background: var(--accent-soft); color: var(--accent-soft-ink); }
.badge.no-dot::before { display: none; }


/* Formulaires */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: 14.5px; }
.field .help { font-size: 13px; color: var(--muted); }
.field .error { font-size: 13px; color: var(--danger); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.char-count { font-size: 12.5px; color: var(--muted); text-align: right; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; }
.chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.dropzone { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 26px; text-align: center; background: var(--surface-2); cursor: pointer; display: block; }
.dropzone:hover { border-color: var(--accent); }
.dropzone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; margin-top: 12px; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

.toast-zone { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; width: min(92vw, 440px); }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: 14.5px; display: flex; gap: 10px; align-items: center; }
.toast a { color: inherit; font-weight: 700; margin-left: auto; }

dialog { border: none; border-radius: var(--radius-lg); padding: 0; background: var(--surface); color: var(--ink); width: min(94vw, 720px); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(10, 10, 20, .45); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 6px; }
.dialog-body { padding: 12px 22px 22px; }

/* ---------- 4. Page d'accueil ---------- */
/* En-tête : juste le logo, pas de barre — il défile avec le contenu,
   exactement comme sur les écrans de /app (create-logo). */
/* Centré, pas collé à gauche : seul élément de toute la zone du haut (la
   navigation flotte en bas, DA 2026-2027), un logo planté à gauche avec tout
   le reste du header vide à droite se lit comme oublié là, pas comme voulu —
   Ben, 05/11/2026 : "pourquoi il est pas à droite". Centré, c'est une
   signature de marque assumée, pas une barre de nav à moitié remplie. */
.site-header { padding: 20px 0 0; }
.site-header .container { display: flex; justify-content: center; }

/* Navigation : flottante, en bas, jamais une barre collée en haut — même
   construction physique que .app-nav (public/css/nav.css, la vraie barre
   de /app) : DA 2026-2027, agent/preferences.md. Les liens restent du
   texte (ce sont des ancres, pas des destinations d'app), le CTA reprend
   la seule couleur d'accent du produit. */
.site-nav {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  z-index: 40;
  margin: 0 auto;
  max-width: 620px;
  height: 64px;
  border-radius: var(--r-nav);
  background: var(--nav-bar);
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
}
.site-nav a.link { color: var(--ink-2); text-decoration: none; font-weight: 500; padding: 10px 14px; border-radius: var(--r-pill); font-size: 14px; }
.site-nav a.link:hover { background: var(--surface-2); color: var(--ink); }
.site-nav .btn-ghost { border-color: var(--line); }
/* La pilule violette flottait au milieu d'une bien plus grande pilule
   blanche (btn-sm = 36px dans une barre de 64px, 14px de vide en haut ET en
   bas) — Ben, 05/11/2026 : "pourquoi le violet remplit si peu la pilule ?".
   Elle vient quasi au bord, comme les onglets de VaguaNavBar. */
.site-nav .btn-primary { min-height: 48px; padding: 0 22px; }
@media (min-width: 960px) {
  .site-nav { left: 50%; right: auto; transform: translateX(-50%); bottom: 24px; }
}
/* Le contenu ne doit jamais passer sous la barre flottante (même réserve
   que .app-content). */
body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* Repris de la direction validée dans Claude Design (04/11/2026) : le titre
   et la carte se chevauchent (effet "mordu"), un seul CTA, plus de cartes
   éparpillées. La marge de sécurité (title max-width 500 < colonne 620)
   garantit que la carte ne mange JAMAIS une lettre, même si le texte
   change — pas une valeur devinée au pixel comme la version précédente. */
/* Respiration proportionnelle à l'écran (clamp, jamais un padding figé) —
   même principe que vagua-web (RESPIRATION, Section.tsx) : "le vide qui met
   en scène sur un 27 pouces étouffe un téléphone". Un padding fixe de 72-110px
   est confortable en petit mais reste ÉTROIT sur grand écran — Ben,
   05/11/2026 : "j'ai l'impression que la page ne respire pas". */
/* min-height, pas height : sur un petit écran où le contenu dépasserait
   86vh, la section grandit avec lui plutôt que de le couper. Ben, 05/11 :
   "j'ai l'impression que tout est compact" — le padding seul ne donnait pas
   à la section la présence d'un vrai premier chapitre. */
.hero { min-height: 86vh; display: flex; align-items: center; padding: clamp(90px, 10vw, 160px) 0 clamp(64px, 7vw, 120px); }
.hero .container { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 0; align-items: start; width: 100%; }
.hero h1 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 700; max-width: 500px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 460px; margin-top: 20px; }
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 32px; }
.hero-note { font-size: 14px; color: var(--muted); }

/* La carte mord dans la marge de 120px laissée volontairement libre par le
   titre (500px de texte dans une colonne de 620) : jamais sur du texte. */
.studio-visual { position: relative; margin-left: -90px; margin-top: 60px; }
@media (max-width: 1099px) {
  .studio-visual { margin-left: 0; margin-top: 0; }
}

/* ---------- Maquette interactive du hero (public/js/hero-demo.js) ----------
   Le VRAI composer (mêmes classes que public/css/view-tool-composer.css,
   l'écran outil réel de /app) rejoué en boucle avec une vraie phrase de
   démarrage du catalogue — jamais une icône de téléphone qui n'existe nulle
   part ailleurs dans le produit. */
/* Composer et résultat superposés dans la MÊME case de grille (comme les
   .device-frame de #decouvrir) : la case se dimensionne sur le plus grand
   des deux une fois pour toutes, et le passage de l'un à l'autre ne change
   plus jamais la hauteur du bloc — Ben, 05/11/2026 : "ça bouge la page
   entière quand le mock vertical est affiché" (le résultat, bien plus haut
   que le composer, poussait tout le reste de la page au moment du swap). */
.hero-demo { display: grid; max-width: 420px; margin: 0 auto; }
.hero-demo > * { grid-area: 1 / 1; align-self: start; }
.composer {
  background: var(--surface);
  border-radius: 28px;
  /* Lueur violette de marque (même traitement que .device-frame en #decouvrir) :
     la boîte d'ombre neutre d'origine se fondait dans un fond sombre, la carte
     perdait toute présence — vu en capture le 05/11/2026. */
  box-shadow: 0 40px 90px -30px rgba(82, 53, 232, .35), 0 10px 30px rgba(14, 20, 25, .16), 0 0 0 1px var(--line);
  padding: 22px 16px 16px 22px;
  display: grid;
  gap: 12px;
}
.composer__field { margin: 0; min-height: 64px; font-family: var(--font-text); font-size: 18px; line-height: 1.5; color: var(--ink); }
.composer__field:empty::before { content: "Décrivez la scène : lieu, lumière, action…"; color: var(--muted); }
.composer__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.composer__pills { display: flex; gap: 4px; flex: 1; min-width: 0; }
.pill { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 8px; border-radius: var(--r-pill); border: 1px solid var(--field); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill .icon { width: 16px; height: 16px; }
.pill--primary { background: var(--tint); border-color: transparent; }
.composer__cost { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--muted); order: 2; }
.composer__submit { position: relative; flex: none; order: 3; height: 44px; padding: 0 20px 0 16px; border-radius: var(--r-pill); border: 0; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; font-family: var(--font-text); }
.composer__submit .icon { width: 18px; height: 18px; }
.hero-demo__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; }
.hero-demo__submit--busy .hero-demo__spinner { display: block; animation: hero-demo-spin .8s linear infinite; }
.hero-demo__submit--busy .icon, .hero-demo__submit--busy .composer__submit-label { display: none; }
@keyframes hero-demo-spin { to { transform: rotate(360deg); } }

/* [hidden] reste en display:grid (jamais display:none) : l'élément continue
   de compter dans le dimensionnement de la case superposée ci-dessus, seule
   l'opacité bascule. Le DOM derrière un état invisible est inerte de toute
   façon (aria-hidden sur le root, submit en tabindex="-1").
   Transition SÉQUENCÉE, pas un simple fondu croisé : composer et résultat
   n'ont ni la même forme ni le même point d'ancrage (large et court contre
   étroit et haut, tous deux alignés en haut de la case) — les faire fondre
   en même temps les superposait un instant en double exposition, demandé à
   corriger par Ben le 05/11/2026. Celui qui part descend et s'efface vite ;
   celui qui arrive ne commence qu'une fois la place à peu près libre. */
#hero-demo-composer, .hero-demo__result {
  transition: opacity .35s ease .15s, transform .35s ease .15s;
  transform: translateY(0) scale(1);
}
#hero-demo-composer[hidden], .hero-demo__result[hidden] {
  display: grid;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.hero-demo__result { display: grid; justify-items: center; gap: 14px; padding: 12px 0 4px; }
.hero-demo__media { position: relative; width: 100%; max-width: 240px; aspect-ratio: 9 / 16; border-radius: 24px; background: linear-gradient(160deg, var(--accent-soft), var(--surface-2)); display: grid; place-items: center; box-shadow: 0 16px 48px rgba(14, 20, 25, .14); }
.hero-demo__play { width: 52px; height: 52px; color: var(--accent); }
.hero-demo__media .media-frame__duration { position: absolute; top: 12px; right: 12px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.hero-demo__result-label { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.hero-demo__result-label .icon { width: 18px; height: 18px; color: var(--accent); }

.section { padding: clamp(60px, 9vw, 150px) 0; }
/* #tarifs seul, pas .section en général : la bande de clôture juste en
   dessous partage la même classe mais c'est un geste court et volontaire —
   l'étirer sur 70vh la ferait flotter, seule, dans un vide sans raison. */
#tarifs { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 10px; }
.section-head p { color: var(--ink-2); margin-top: 12px; font-size: 17px; }


.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pricing-loading, .pricing-error { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 32px 0; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
/* La formule recommandée se détache des deux autres plutôt que de répéter
   la même boîte blanche trois fois ("y a rien de pro ici", Ben 05/11/2026) :
   légèrement surélevée, lueur de marque, un badge qui explique pourquoi
   elle est mise en avant plutôt qu'une simple bordure de couleur. */
.plan.featured {
  border-color: transparent;
  background: var(--surface);
  box-shadow: 0 30px 70px -28px rgba(82, 53, 232, .4), 0 1px 0 1px var(--accent) inset, 0 0 0 1px var(--accent);
  transform: translateY(-8px);
}
.plan__badge { position: absolute; top: -13px; left: 26px; }
.plan h3 { font-size: 22px; }
.plan .price { font-family: var(--font-display); font-size: 44px; font-weight: 700; }
.plan .price small { font-size: 15px; font-weight: 500; color: var(--muted); font-family: var(--font-body); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .icon { color: var(--accent); width: 18px; height: 18px; margin-top: 3px; }
/* Avec 1-2 fonctionnalités seulement, margin-top:auto poussait le bouton
   tout en bas d'une carte étirée à la hauteur de sa voisine, laissant un
   vide qui ne voulait rien dire ("on peut mieux designer cette section",
   Ben 05/11/2026). Le filet du .plan__foot transforme cet espace en
   respiration structurée plutôt qu'en oubli — posé sur un conteneur dédié,
   jamais sur le bouton pilule lui-même (un filet droit coupant un bord
   arrondi aurait l'air cassé). */
.plan__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }

/* Bande de clôture violette, fixe quel que soit le thème (pas un simple
   inversion --ink/--bg qui tournait au bloc blanc cru en sombre, en rupture
   avec tout le reste de la page) : LE geste de couleur franc de la page,
   pour qu'il n'y en ait qu'un seul (frontend-design : « spend your boldness
   in one place »). */
.cta-band {
  /* Violet de marque en dur (pas --accent) : ce jeton s'inverse en lavande
     clair en thème sombre (fait pour du texte sur fond sombre), illisible
     en blanc sur blanc ici. La bande garde la même identité dans les deux
     thèmes, comme les lueurs de .device-frame et .composer. */
  background: linear-gradient(135deg, #5235E8 0%, #3A1FB8 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 40px 90px -30px rgba(82, 53, 232, .45);
}
/* Un dégradé plat tout seul reste un rectangle de couleur — une lueur en
   coin, comme celles des cadres et du composer ailleurs sur la page, pour
   que cette bande partage la même texture que le reste plutôt que d'être
   juste "la section violette". */
.cta-band::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 38px); max-width: 18em; color: #FFFFFF; }
.cta-band .btn-primary { background: #FFFFFF; color: #3A1FB8; }
.cta-band .btn-primary:hover { background: #EDEAFF; color: #3A1FB8; }

.site-footer { border-top: 1px solid var(--line); padding: 32px 0 44px; color: var(--muted); font-size: 14px; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }

/* ---------- 5. Application ---------- */
/* Le menu latéral et la barre du haut ont été retirés (31/10/2026) : l'app
   utilise désormais la barre de navigation flottante — voir css/nav.css. */
.content { padding: 28px; max-width: 1240px; width: 100%; margin: 0 auto; }
.page-intro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 24px; }
.page-intro h2 { font-size: clamp(26px, 3vw, 34px); }
.page-intro p { color: var(--muted); margin-top: 6px; max-width: 46em; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.empty .icon { width: 36px; height: 36px; color: var(--accent); }


/* ---------- 6. Téléphone & tablette ---------- */
@media (max-width: 1100px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .studio-visual { max-width: 420px; margin: 0 auto; }
  .steps, .pricing { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 20px 16px; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .site-nav a.link { display: none; }
  .hero { padding: 44px 0 32px; }
  .section { padding: 52px 0; }
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-band { padding: 30px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Petites classes utilitaires ---------- */
[data-tight="top"] { padding-top: 16px; }
[data-self="start"] { align-self: flex-start; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; }