/* === Klipa AI — Design System === */

/* Polices auto-hébergées (variables, sous-ensemble latin) : plus aucune requête
   vers Google Fonts. Le navigateur ne télécharge Lora que sur les pages qui
   l'utilisent (articles de blog). 'Manrope Fallback' est Arial re-métré
   (mesures faites en navigateur) : le texte s'affiche immédiatement dans une
   Arial aux dimensions de Manrope, et l'échange ne déplace quasiment rien. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/static/fonts/manrope-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/lora-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/lora-var-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope Fallback';
    src: local('Arial');
    size-adjust: 102.25%;
    ascent-override: 104.65%;
    descent-override: 29.34%;
    line-gap-override: 0%;
}
[x-cloak] { display: none !important; }
:root {
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-pressed: #1E40AF;
    --focus-ring: rgba(37,99,235,0.4);
    --accent: #7C3AED;
    /* Jetons « encre » : la teinte portée par du TEXTE ou une icône.
       Le jeton de base reste la teinte d'APLAT (fond de bouton, texte blanc
       dessus) et ne bouge pas en sombre ; l'encre, elle, s'éclaircit en sombre
       pour tenir le 4,5:1 exigé par design-foundations §2 (P8). */
    --primary-ink: #2563EB;
    --accent-ink: #7C3AED;
    --error-ink: #C81E1E;
    --warning-ink: #B45309;
    --bg: #F7F8FA;
    --bg-card: #FFFFFF;
    --bg-input: #F1F5F9;
    --bg-main: #F7F8FA;
    --bg-secondary: #F1F5F9;
    --bg-primary: #F7F8FA;
    --surface-2: #F7F8FA;   /* surface encastrée (carte d'offre non recommandée) */
    --text: #111827;
    /* #6B7280 ne donnait que 4,41:1 sur --bg-input (#F1F5F9), sous le seuil.
       Assombri jusqu'à tenir 4,5:1 sur la PLUS CLAIRE des surfaces comme sur
       la plus foncée. */
    --text-muted: #646C7A;
    /* Le design proposait #9CA3AF : 2,54:1 sur blanc, sous le seuil WCAG 4,5:1
       exigé par design-foundations §2 (P8). Remonté au minimum lisible. */
    --text-3: #646C7A;
    --text-muted-strong: #4B5563;   /* secondaire sur fond teinté (offre premium) */
    --prose-ink: #1A2130;   /* corps d'article (lecture longue, serif) */
    --border-strong: #D1D5DB;   /* bordure marquée (contrôles) */
    --text-primary: #111827;
    --text-main: #111827;
    --border: #E5E7EB;
    /* Un succès ne porte pas de teinte propre : il se dit par une coche et par
       le texte, sur l'encre neutre. Les rares surfaces pleines d'un état
       « terminé » passent par --primary (ce sont des éléments d'action). */
    --success: #111827;
    --error: #C81E1E;
    --warning: #B45309;
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 200ms ease;
    --max-w: 1200px;
    --font: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
    --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
    --shadow-lg: 0 8px 24px rgba(16,24,40,0.12);
    --hover-overlay: rgba(0,0,0,0.04);
    --hover-overlay-strong: rgba(0,0,0,0.06);
    --hover-overlay-medium: rgba(0,0,0,0.08);
    /* Teintes de fond PORTANT DU TEXTE. Le bleu à 10 % (rgba(37,99,235,.1)) ne
       donnait que 4,49:1 avec son encre — sous le seuil. Ramené à 8 % avec
       --primary-pressed : 7,84:1. Même correction pour l'ambre (4,39 → 6,35). */
    --tint-blue: #EEF3FD;   --tint-blue-ink: #1E40AF;
    --tint-amber: #F9F1EB;  --tint-amber-ink: #92400E;
    --navbar-bg: rgba(247,248,250,0.92);
    --navbar-bg-solid: rgba(247,248,250,0.97);
    --overlay-bg: rgba(0,0,0,0.4);
    --spinner-border: rgba(0,0,0,0.15);
    --subtle-border: rgba(0,0,0,0.08);
}
[data-theme="dark"] {
    --prose-ink: #E8EBF0;
    /* Encres ré-éclaircies : sur fond sombre, la teinte d'aplat ne passe pas
       en texte (bleu 3,37:1, violet 3,06:1). Les jetons d'aplat, eux, restent
       inchangés pour que les boutons pleins gardent leur texte blanc lisible. */
    --primary-ink: #8AB4F8;
    --accent-ink: #C4B5FD;
    --error-ink: #FCA5A5;
    --warning-ink: #FBBF24;
    --success: #F3F4F6;
    --bg: #0E1116;
    --bg-card: #171A21;
    --bg-input: #334155;
    --bg-main: #0E1116;
    --bg-secondary: #1E293B;
    --bg-primary: #0E1116;
    --surface-2: #1C2029;
    --text: #F3F4F6;
    /* #9CA3AF ne donnait que 4,08:1 sur --bg-input (#334155), la surface la
       plus claire du thème sombre. Éclairci jusqu'à tenir 4,5:1 partout. */
    --text-muted: #A7B0BF;
    --text-3: #A7B0BF;
    /* Reste un cran plus clair que --text-muted, sinon la nuance disparaît. */
    --text-muted-strong: #BCC4CE;
    --border-strong: #2A2F3A;
    --text-primary: #F3F4F6;
    --text-main: #F3F4F6;
    --border: #242A33;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --hover-overlay: rgba(255,255,255,0.05);
    --hover-overlay-strong: rgba(255,255,255,0.06);
    --hover-overlay-medium: rgba(255,255,255,0.08);
    --tint-blue: #27303F;   --tint-blue-ink: #8AB4F8;
    --tint-amber: #2C2A22;  --tint-amber-ink: #FBBF24;
    --navbar-bg: rgba(14,17,22,0.9);
    --navbar-bg-solid: rgba(14,17,22,0.97);
    --overlay-bg: rgba(0,0,0,0.55);
    --spinner-border: rgba(255,255,255,0.3);
    --subtle-border: rgba(255,255,255,0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* === Navbar === */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: var(--navbar-bg); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
/* Mobile right group (CTA + hamburger) — hidden on desktop */
.nav-mobile-right { display: none; align-items: center; gap: 10px; }
.nav-mobile-cta { white-space: nowrap; }
/* Hamburger button */
.nav-hamburger {
    display: none; background: none; border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 7px; cursor: pointer; flex-direction: column; gap: 4px;
    align-items: center; justify-content: center; transition: border-color 0.15s;
}
.nav-hamburger:hover { border-color: var(--text-muted); }
.nav-hamburger span {
    display: block; width: 18px; height: 2px; background: var(--text-muted);
    border-radius: 2px; transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Mobile slide-down menu — hidden on desktop */
.mobile-menu {
    display: none; overflow: hidden;
    border-top: 1px solid var(--border);
    background: var(--navbar-bg-solid); backdrop-filter: blur(16px);
}
.mobile-menu-inner { padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-link {
    display: block; padding: 12px 16px; border-radius: 10px; color: var(--text-muted);
    text-decoration: none; font-size: 15px; font-weight: 600; transition: all 0.15s;
    border: none; background: none; text-align: left; cursor: pointer; width: 100%;
}
.mobile-menu-link:hover, .mobile-menu-link:focus { color: var(--text); background: var(--hover-overlay); }
.mobile-menu-upgrade { color: var(--primary-ink); }
.mobile-menu-logout { color: #ef4444; }
.mobile-menu-logout:hover { background: rgba(239,68,68,0.1); }
.mobile-menu-sep { height: 1px; background: var(--border); margin: 8px 0; }
.mobile-menu-lang { display: flex; gap: 8px; padding: 4px 0; }
.mobile-lang-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: 10px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted); font-size: 14px;
    font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.mobile-lang-btn:hover { border-color: var(--text-muted); color: var(--text); }
.mobile-lang-btn.active { border-color: var(--primary); color: var(--primary-ink); background: rgba(37,99,235,0.08); }
.mobile-menu-actions { display: flex; gap: 10px; padding-top: 4px; }
.mobile-menu-actions .btn { flex: 1; text-align: center; }
.nav-container {
    max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img { height: 32px; width: auto; display: block; }
.footer-logo-img { height: 28px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; }
.nav-auth { display: flex; gap: 10px; align-items: center; }
.nav-link-item {
    color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
    transition: all 0.15s; letter-spacing: 0.01em;
}
.nav-link-item:hover { color: var(--text); background: var(--hover-overlay-strong); border-color: var(--text-muted); }

/* === Mega-Menu Navigation === */
.nav-center { display: flex; align-items: center; gap: 4px; }
.nav-mega-item { position: relative; }
.nav-mega-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--text-muted); font-size: 13.5px; font-weight: 600;
    padding: 8px 14px; border-radius: 8px; border: none;
    background: none; cursor: pointer; transition: all 0.15s;
    text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
}
.nav-mega-trigger:hover, .nav-mega-trigger.active { color: var(--text); background: var(--hover-overlay-strong); }
.nav-mega-trigger svg { transition: transform 0.2s; opacity: 0.5; }
.nav-mega-trigger.active svg { transform: rotate(180deg); opacity: 0.8; }
.nav-mega-link { text-decoration: none; }
.nav-mega-panel {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding-top: 10px; z-index: 200; min-width: 280px;
}
.nav-mega-panel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px;
}
.nav-mega-panel > .mega-grid {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 20px 24px;
}
/* Dropdown animation — smooth slide + fade */
.mega-enter { transition: opacity 200ms ease, transform 200ms ease; }
.mega-leave { transition: opacity 150ms ease, transform 150ms ease; }
.mega-enter-from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
.mega-enter-to { opacity: 1; transform: translateX(-50%) translateY(0); }
.mega-1col > .mega-col { min-width: 200px; }
.nav-mega-panel.mega-resources > .mega-grid { padding: 14px 18px; }
.mega-grid { display: flex; gap: 28px; }
.mega-3col .mega-col { min-width: 180px; }
.mega-2col .mega-col { min-width: 190px; }
.mega-1col .mega-col { min-width: 200px; }
.mega-col-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px;
    padding: 0 8px;
}
.mega-link {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 8px; color: var(--text);
    text-decoration: none; font-size: 13px; font-weight: 500;
    transition: all 0.12s; white-space: nowrap;
}
.mega-link:hover { background: var(--hover-overlay-strong); color: var(--primary-ink); }
.mega-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.mega-sep { height: 1px; background: var(--border); margin: 8px 0; }
.mega-link-all { color: var(--primary-ink); font-weight: 600; margin-top: 4px; }
.mega-link-all:hover { background: rgba(37,99,235,0.1); }
.mega-link-all svg { margin-left: 2px; }
.nav-upload-btn { gap: 6px; }
.nav-upload-btn svg { flex-shrink: 0; }

/* Mobile submenu accordion */
.mobile-menu-section { width: 100%; }
.mobile-menu-toggle { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-toggle svg { transition: transform 0.2s; opacity: 0.5; }
.rotate-180 { transform: rotate(180deg); }
.mobile-submenu { padding: 0 0 4px 8px; }
.mobile-submenu-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted); padding: 8px 16px 4px;
}
.mobile-submenu-link {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 8px; color: var(--text-muted);
    text-decoration: none; font-size: 14px; font-weight: 500;
    transition: all 0.12s;
}
.mobile-submenu-link:hover { background: var(--hover-overlay); color: var(--text); }
.mobile-submenu-all { color: var(--primary-ink); font-weight: 600; margin-top: 4px; }

/* === Buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px; border-radius: var(--radius-sm); border: none;
    font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: all var(--transition); line-height: 1.4;
}
.btn-primary { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(37,99,235,0.3); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.4); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(37,99,235,0.3); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-muted); background: var(--hover-overlay); }
.btn-ghost:active { background: var(--hover-overlay-strong); }
.btn-ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Bouton SECONDAIRE encadré. Employé 16 fois (écrans de résultat texte, panneaux
   du Studio) sans avoir JAMAIS été défini nulle part : le navigateur servait donc
   son bouton par défaut — un pavé gris #EFEFEF à texte noir. Invisible comme
   appartenance à Klipa sur fond clair, et franchement illisible sur nuit.
   Défini par JETONS : il suit le fond qui l'accueille, clair comme nuit. */
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); }
.btn-outline:hover { color: var(--text); border-color: var(--primary-ink); background: var(--hover-overlay); }
.btn-outline:active { background: var(--hover-overlay-strong); }
.btn-outline:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Violet PLEIN (signal premium), jamais un dégradé bleu→violet : le bleu est la
   couleur d'action, le violet le signal Pro — les mélanger dilue la hiérarchie
   (design-foundations §2 P2 et §6). */
.btn-accent { background: var(--accent); color: white; box-shadow: 0 2px 8px rgba(124,58,237,0.3); }
.btn-accent:hover { background: #6D28D9; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,0.4); }
.btn-accent:active { transform: translateY(0); }
.btn-success { background: var(--primary); color: white; }
.btn-success:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-sm { padding: 6px 14px; font-size: 13px; display: block;}
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* === Hero === */
.hero {
    padding: 100px 0 80px; text-align: center;
    background: radial-gradient(ellipse at top, rgba(37,99,235,0.15) 0%, transparent 60%);
}
.hero h1 { font-size: 56px; font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: 20px; color: var(--text-muted); max-width: 600px; margin: 0 auto 32px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; margin-bottom: 48px; }
.hero-stats { display: flex; gap: 48px; justify-content: center; }
.stat { text-align: center; }
.stat strong { display: block; font-size: 18px; }
.stat span { font-size: 13px; color: var(--text-muted); }

/* === Features === */
.features, .tools-section { padding: 80px 0; }
.features h2, .tools-section h2 { text-align: center; font-size: 36px; margin-bottom: 48px; }
.features-grid, .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px; color: white; margin-bottom: 16px;
}
.tool-icon { font-size: 36px; margin-bottom: 12px; }

/* Tools showcase (homepage) */
.tools-showcase-subtitle { text-align: center; color: var(--text-muted); font-size: 18px; margin-top: -32px; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; }
.tools-group-title { font-size: 1.2rem; font-weight: 700; text-align: center; margin: 48px 0 20px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tools-group-title:first-of-type { margin-top: 0; }
.tools-showcase-cta { text-align: center; margin-top: 48px; }

/* === Auth === */
.auth-section { padding: 80px 0; display: flex; justify-content: center; }
.auth-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 40px;
    border: 1px solid var(--border); width: 100%; max-width: 440px;
}
.auth-card h2 { margin-bottom: 8px; }
.auth-sub { color: var(--text-muted); margin-bottom: 24px; font-size: 14px; }
.forgot-link { display: block; text-align: right; margin-top: 6px; font-size: 13px; color: var(--text-muted); text-decoration: none; }
.forgot-link:hover { color: var(--primary-ink); }
.auth-alt { text-align: center; margin-top: 20px; color: var(--text-muted); font-size: 14px; }
.auth-alt a { color: var(--primary-ink); text-decoration: none; }
/* Google button + divider — ported from the validated Claude Design screen
   "Connexion". Shared, global classes: used by the in-tool signup modal, the
   standalone /login and /register pages, and the result-page demo modal. */
.btn-google, .btn-social {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 12px; border-radius: var(--radius);
    background: var(--bg-card); border: 1.5px solid var(--border);
    color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow-sm); transition: all 0.2s;
}
.btn-google:hover, .btn-social:hover { border-color: #D1D5DB; background: var(--bg); }
.btn-google:disabled, .btn-social:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-google svg, .btn-social svg { flex-shrink: 0; }
/* Discreet reveal for the legacy email/password login (hidden by default). */
.auth-email-toggle {
    display: block; margin: 18px auto 0; padding: 8px 4px;
    background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--text-muted); text-decoration: underline; cursor: pointer;
}
.auth-email-toggle:hover { color: var(--text); }
.auth-email-note {
    font-size: 13px; line-height: 1.5; color: var(--text-muted);
    background: var(--bg-input); border-radius: var(--radius);
    padding: 10px 12px; margin-bottom: 8px;
}

.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: var(--text-muted); font-size: 13px; font-weight: 700;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* Icon-pill auth fields (email / password with show-hide toggle) — a lighter
   alternative to .form-group for the auth screens specifically. */
.auth-field {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px;
    border-radius: var(--radius); background: var(--bg-card); border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm); margin-top: 10px;
}
.auth-field:first-of-type { margin-top: 14px; }
.auth-field svg { flex-shrink: 0; color: var(--text-muted); width: 18px; height: 18px; }
.auth-field input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text);
}
.auth-field input::placeholder { color: var(--text-muted); font-weight: 500; }
.auth-field-toggle { border: none; background: transparent; cursor: pointer; padding: 4px; display: flex; color: var(--text-muted); flex-shrink: 0; }
.auth-field-toggle svg { width: 18px; height: 18px; }
.auth-forgot { display: flex; justify-content: flex-end; margin-top: 8px; }
.auth-forgot a { font-size: 13px; font-weight: 700; color: var(--primary-ink); text-decoration: none; }

/* Two-tone banner: red for a real error, amber for "Google pop-up blocked"
   (an expected browser behavior, not a failure — never color-only, icon+text). */
.auth-banner { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; padding: 12px 14px; border-radius: var(--radius); text-align: left; }
.auth-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.auth-banner p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; }
.auth-banner.is-error { background: #FEF2F2; border: 1px solid #FCA5A5; }
.auth-banner.is-error svg { color: var(--error-ink); }
.auth-banner.is-error p { color: #991B1B; }
.auth-banner.is-blocked { background: #FEF6EC; border: 1px solid #FCD9A0; }
.auth-banner.is-blocked svg { color: var(--warning-ink); }
.auth-banner.is-blocked p { color: #92400E; }

/* Full-takeover "connecting" state — replaces the form while Firebase/backend
   auth is in flight, instead of a small inline "..." on the button. */
.auth-connecting { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0 28px; }
.auth-connecting-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
.auth-connecting p.title { margin: 18px 0 0; font-size: 16px; font-weight: 700; color: var(--text); }
.auth-connecting p.sub { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* Context header (checkmark icon + title) shown above the auth methods when
   opened FROM a specific moment (e.g. "your video is ready") — reused by the
   in-tool modal and the result-page demo modal alike. */
.auth-context-icon {
    width: 44px; height: 44px; border-radius: 50%; background: rgba(37,99,235,.1);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.auth-context-icon svg { width: 22px; height: 22px; color: #2563EB; }

/* === Forms === */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-input); color: var(--text);
    font-size: 14px; transition: border-color var(--transition);
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
.form-group input[type="range"] {
    padding: 0; background: none; border: none;
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px; cursor: pointer;
    background: var(--bg-input) !important;
}
.form-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary); border: 2px solid var(--bg);
    box-shadow: 0 2px 6px rgba(37,99,235,0.4);
    cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.form-group input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 10px rgba(37,99,235,0.6);
}
.form-group input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary); border: 2px solid var(--bg);
    box-shadow: 0 2px 6px rgba(37,99,235,0.4);
    cursor: pointer;
}
.form-group input[type="range"]::-moz-range-track {
    height: 6px; border-radius: 3px; background: var(--bg-input);
}
.hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-error { color: var(--error-ink); font-size: 14px; margin-bottom: 12px; padding: 8px 12px; background: rgba(239,68,68,0.1); border-radius: var(--radius-sm); }
.form-success { color: var(--success); font-size: 14px; margin-bottom: 12px; padding: 8px 12px; background: rgba(37,99,235,0.1); border-radius: var(--radius-sm); }

/* === Dashboard === */
.dashboard-section { padding: 40px 0; }
.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.dash-header h1 { font-size: 28px; }
.badge {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    background: var(--primary); color: white;
}
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 24px;
    border: 1px solid var(--border); text-align: center;
}
.stat-card.highlight { border-color: var(--primary); background: rgba(37,99,235,0.1); }
.stat-value { display: block; font-size: 28px; font-weight: 800; }
.stat-label { font-size: 13px; color: var(--text-muted); }

/* === Jobs List === */
.jobs-list h2 { font-size: 20px; margin-bottom: 16px; }
.job-card {
    background: var(--bg-card); border-radius: var(--radius-sm); padding: 16px 20px;
    border: 1px solid var(--border); margin-bottom: 8px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: border-color var(--transition);
}
.job-card:hover { border-color: var(--primary); }
.job-name { font-weight: 600; display: block; }
.job-meta { font-size: 13px; color: var(--text-muted); }
.job-status { text-align: right; }
.job-date { font-size: 12px; color: var(--text-muted); display: block; margin-top: 4px; }
.status-badge {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
}
.status-pending { background: rgba(245,158,11,0.2); color: var(--warning-ink); }
.status-uploaded { background: rgba(245,158,11,0.2); color: var(--warning-ink); }
.status-processing { background: rgba(37,99,235,0.2); color: var(--primary-ink); }
.status-completed { background: rgba(37,99,235,0.2); color: var(--success); }
.status-failed { background: rgba(239,68,68,0.2); color: var(--error-ink); }

.empty-state { text-align: center; padding: 60px 0; color: var(--text-muted); }
.empty-state .btn { margin-top: 16px; }

/* === Upload === */
.upload-section { padding: 40px 0; }
.upload-zone {
    background: var(--bg-card); border: 2px dashed var(--border);
    border-radius: var(--radius); padding: 60px 40px; text-align: center;
    transition: border-color var(--transition);
}
.upload-zone.drag-active { border-color: var(--primary); background: rgba(37,99,235,0.05); }
.upload-icon { font-size: 64px; margin-bottom: 16px; }
.upload-prompt h3 { margin-bottom: 8px; }
.upload-browse { color: var(--primary-ink); cursor: pointer; text-decoration: underline; }
.upload-hint { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.upload-filename { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

.progress-bar, .progress-bar-lg {
    width: 100%; height: 8px; background: var(--bg-input);
    border-radius: 4px; overflow: hidden; margin-bottom: 12px;
}
.progress-bar-lg { height: 12px; }
.progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 4px; transition: width 0.5s ease;
}
.progress-fill.progress-error { background: var(--error); }

/* === Options === */
.options-panel { margin-top: 24px; }
.options-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 24px;
    border: 1px solid var(--border); margin-bottom: 16px;
}
.options-card h3 { margin-bottom: 16px; font-size: 18px; }
.option-group { display: flex; flex-direction: column; gap: 8px; }
.option-radio {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: border-color var(--transition);
}
.option-radio.selected { border-color: var(--primary); background: rgba(37,99,235,0.05); }
.option-radio input { margin-top: 4px; }
.option-radio strong { display: block; margin-bottom: 2px; }
.option-radio p { font-size: 13px; color: var(--text-muted); }

/* --- Job type cards --- */
.pick-label {
    font-size: 15px; color: var(--text-muted); margin-bottom: 14px; text-align: center;
}
.job-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.job-cards .job-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; text-align: center; padding: 28px 16px 22px; gap: 10px;
    background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius);
    cursor: pointer; transition: all 0.2s ease; margin-bottom: 0;
}
.job-cards .job-card:hover:not(.locked) {
    border-color: rgba(37,99,235,0.4); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.job-cards .job-card.selected {
    border-color: var(--primary); background: rgba(37,99,235,0.08);
    box-shadow: 0 0 0 1px var(--primary), 0 8px 24px rgba(37,99,235,0.15);
}
.job-cards .job-card.locked { opacity: 0.5; cursor: not-allowed; }
.job-cards .job-card-icon { color: var(--primary-ink); margin-bottom: 2px; }
.job-cards .job-card.selected .job-card-icon { color: #60a5fa; }
.job-cards .job-card strong { font-size: 15px; line-height: 1.3; }
.job-cards .job-card p { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 0; }
.job-cards .job-card .plan-badge { margin-top: 4px; }
.job-card-popular {
    position: absolute; top: -10px; right: -6px;
    background: linear-gradient(135deg, var(--primary), #7c3aed); color: white;
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px;
    letter-spacing: 0.3px; text-transform: uppercase;
}
.job-hint {
    text-align: center; font-size: 13px; color: var(--text-muted);
    margin: -8px 0 20px; padding: 0 20px; line-height: 1.5;
}

/* --- Advanced toggle --- */
.advanced-toggle { margin-bottom: 20px; }
.btn-advanced-toggle {
    display: flex; align-items: center; gap: 8px; margin: 0 auto;
    padding: 8px 18px; background: transparent; border: 1px solid var(--border);
    border-radius: 20px; color: var(--text-muted); font-size: 13px;
    cursor: pointer; transition: all 0.2s;
}
.btn-advanced-toggle:hover { color: var(--text); border-color: var(--primary); }
.btn-advanced-toggle .chevron-icon { transition: transform 0.2s; }
.btn-advanced-toggle .chevron-icon.rotated { transform: rotate(180deg); }
.advanced-content { margin-top: 16px; }

@media (max-width: 640px) {
    .job-cards { grid-template-columns: 1fr; }
    .job-cards .job-card { flex-direction: row; text-align: left; padding: 16px; }
    .job-cards .job-card-icon { flex-shrink: 0; }
    .job-card-popular { top: -8px; right: -4px; font-size: 10px; }
}

.file-info {
    display: flex; gap: 12px; align-items: center; margin-bottom: 20px;
    padding: 12px 16px; background: var(--bg-card); border-radius: var(--radius-sm);
    border: 1px solid var(--border); font-size: 14px;
}
.file-badge { font-weight: 600; color: var(--primary-ink); }

/* === Job tracking === */
.job-section { padding: 60px 0; }
.progress-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 40px;
    border: 1px solid var(--border); text-align: center;
}
.progress-status { margin-bottom: 24px; display: flex; justify-content: center; align-items: center; gap: 12px; }
.progress-message { color: var(--text-muted); font-size: 16px; margin-top: 12px; }
.progress-info { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin-top: 8px; }
.progress-percent { font-size: 24px; font-weight: 800; }
.progress-estimate { font-size: 14px; color: var(--text-muted); }
.error-block, .success-block { margin-top: 24px; }
.error-block p { color: var(--error-ink); margin-bottom: 12px; }
.success-block p { color: var(--success); font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* === Result === */
.result-section { padding: 40px 0; }
.back-link { color: var(--text-muted); text-decoration: none; font-size: 14px; display: inline-block; margin-bottom: 16px; }
.back-link:hover { color: var(--text); }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.video-player {
    margin-bottom: 24px;
    border-radius: 16px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-el {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    background: #0a0a0a;
}
.result-actions { display: flex; gap: 12px; margin-bottom: 32px; }
.result-extra { background: var(--bg-card); border-radius: var(--radius); padding: 24px; border: 1px solid var(--border); }
.result-extra h3 { margin-bottom: 12px; }
.preview-section { margin-bottom: 28px; }
.preview-player-wrap {
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    margin: 0 auto 16px;
}
.preview-player-wrap > div {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.style-selector { margin-bottom: 16px; }
.style-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
@media (max-width: 640px) { .style-grid { grid-template-columns: repeat(3, 1fr); } }
.style-chip {
    padding: 10px 6px; border: 2px solid var(--border); border-radius: 8px;
    background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
    font-size: 13px; font-weight: 500; text-align: center; transition: all 0.15s;
}
.style-chip:hover { border-color: var(--primary); color: var(--primary-ink); }
.style-chip.active {
    border-color: var(--primary); background: rgba(99,102,241,0.1);
    color: var(--primary-ink); font-weight: 700;
}
.preview-customize { margin-bottom: 16px; }
.customize-row {
    display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.preview-customize .control-group {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 140px;
}
.preview-customize .control-group label {
    font-size: 13px; color: var(--text-muted); white-space: nowrap;
}
.preview-customize .control-group select {
    flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-primary); font-size: 13px;
}
.preview-customize .control-color {
    flex: 0 0 auto; min-width: auto;
}
.preview-customize .control-color input[type="color"] {
    width: 36px; height: 36px; border: 2px solid var(--border); border-radius: 8px;
    cursor: pointer; background: none; padding: 2px;
}
.preview-apply { margin-bottom: 16px; }
.template-section { margin-bottom: 16px; padding: 16px; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); }
.template-saved label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; display: block; }
.template-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.template-chip { display: inline-flex; align-items: center; background: var(--bg-input); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); transition: border-color .2s; }
.template-chip.active { border-color: var(--primary); }
.template-chip-btn { padding: 6px 12px; background: none; border: none; color: var(--text); font-size: 13px; cursor: pointer; }
.template-chip-btn:hover { color: var(--primary-ink); }
.template-chip-del { padding: 4px 8px; background: none; border: none; border-left: 1px solid var(--border); color: var(--text-muted); font-size: 14px; cursor: pointer; line-height: 1; }
.template-chip-del:hover { color: var(--error-ink); }
.template-save-row { display: flex; gap: 8px; align-items: center; }
.template-save-row .input-sm { flex: 1; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; }
.template-save-row .input-sm:focus { outline: none; border-color: var(--primary); }
.template-save-row .input-sm::placeholder { color: var(--text-muted); }
.download-links { display: flex; gap: 8px; flex-wrap: wrap; }
.transcription-meta { display: flex; gap: 8px; margin-bottom: 12px; }
.transcription-meta .badge {
    background: var(--bg-main); padding: 4px 12px; border-radius: 20px;
    font-size: 13px; color: var(--text-muted); border: 1px solid var(--border);
}
.transcription-text {
    background: var(--bg-main); border-radius: var(--radius); padding: 16px;
    font-size: 14px; line-height: 1.7; max-height: 300px; overflow-y: auto;
    margin-bottom: 16px; border: 1px solid var(--border); white-space: pre-wrap;
}
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.clips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }
.clip-card, .clip-card-wide {
    background: var(--bg-card); border-radius: var(--radius); padding: 16px;
    border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px;
}
.clip-header { display: flex; justify-content: space-between; align-items: center; }
.clip-number { font-weight: 700; font-size: 14px; }
.clip-score { background: var(--primary); color: white; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.clip-scores-breakdown { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.score-bar { display: flex; align-items: center; gap: 6px; }
.score-label { font-size: 10px; color: var(--text-muted); width: 46px; text-align: right; flex-shrink: 0; }
.score-track { flex: 1; height: 5px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; }
.score-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.4s ease; }
.score-fill-audio { background: var(--accent); }
.clip-player .video-el { max-height: 240px; border-radius: 8px; }
.clip-title { font-size: 14px; line-height: 1.4; color: var(--text-main); }
.clip-meta { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clip-description { font-size: 0.85em; color: var(--text-muted); margin: 4px 0 8px; line-height: 1.4; }
.clip-improvement { font-size: 0.82em; color: var(--accent-ink); margin: 4px 0 8px; line-height: 1.4; font-style: italic; }
.clip-versions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.btn-format { font-size: 12px !important; padding: 4px 12px !important; border: 1px solid var(--primary) !important; }

/* Clips list (wide cards, stacked) */
.clips-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.clip-card-wide {
    background: var(--bg-card); border-radius: var(--radius); padding: 20px;
    border: 1px solid var(--border); transition: border-color var(--transition), box-shadow var(--transition);
}
.clip-card-wide:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }

/* Format previews — equal-width grid columns */
.clip-formats-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin-top: 12px;
}
.clip-fmt-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fmt-badge {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    background: var(--bg-input); padding: 2px 10px; border-radius: 10px;
}

/* Preview container — sized to match video aspect ratio, centered */
.fmt-preview {
    position: relative; background: #000; border-radius: 8px;
    overflow: hidden; cursor: pointer; margin: 0 auto;
}
.fmt-preview:hover { box-shadow: 0 0 0 2px var(--primary); }
.clip-fmt-card.fmt-16-9 .fmt-preview { width: 100%; aspect-ratio: 16/9; }
.clip-fmt-card.fmt-9-16 .fmt-preview { height: 340px; aspect-ratio: 9/16; }
.clip-fmt-card.fmt-4-5  .fmt-preview { height: 320px; aspect-ratio: 4/5; }
.clip-fmt-card.fmt-1-1  .fmt-preview { width: 100%; aspect-ratio: 1/1; max-height: 340px; }
.clip-fmt-card.fmt-2-3  .fmt-preview { height: 340px; aspect-ratio: 2/3; }

.fmt-video {
    width: 100%; height: 100%; display: block; object-fit: cover;
}

/* Play button overlay */
.fmt-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; z-index: 2;
}
.fmt-play-btn:hover {
    background: rgba(37,99,235,0.7); border-color: rgba(255,255,255,0.5);
    transform: translate(-50%, -50%) scale(1.1);
}
.fmt-play-btn svg { margin-left: 3px; }

/* Download link per format */
.fmt-download {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-muted); text-decoration: none;
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
    transition: all 0.15s;
}
.fmt-download:hover { color: var(--primary-ink); border-color: var(--primary); }

/* Mobile swipe dots */
.fmt-dots {
    display: none; justify-content: center; gap: 8px; margin-top: 8px;
}
.fmt-dot {
    font-size: 11px; color: var(--text-muted); padding: 3px 10px;
    border-radius: 12px; background: var(--bg-input); cursor: pointer;
    border: 1px solid transparent; transition: all 0.2s;
}
.fmt-dot.active { color: var(--primary-ink); border-color: var(--primary); background: rgba(37,99,235,0.1); }

/* Mobile: horizontal snap carousel */
@media (max-width: 640px) {
    .clip-formats-row {
        display: flex; overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px; padding-bottom: 8px;
    }
    .clip-fmt-card {
        scroll-snap-align: center;
        min-width: 80vw; flex-shrink: 0;
    }
    .clip-fmt-card.fmt-9-16 .fmt-preview,
    .clip-fmt-card.fmt-4-5 .fmt-preview,
    .clip-fmt-card.fmt-2-3 .fmt-preview { height: 55vh; }
    .clip-fmt-card.fmt-16-9 .fmt-preview { width: 100%; height: auto; }
    .clip-fmt-card.fmt-1-1 .fmt-preview { max-height: 70vw; }
    .fmt-play-btn { width: 44px; height: 44px; }
    .fmt-play-btn svg { width: 26px; height: 26px; }
    .fmt-dots { display: flex; }
}

/* Tablet: 2 columns */
@media (min-width: 641px) and (max-width: 900px) {
    .clip-formats-row { grid-template-columns: repeat(2, 1fr); }
}
.badge-montage { background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-narrative { background: var(--bg-secondary); color: var(--text-muted); padding: 2px 8px; border-radius: 10px; font-size: 11px; text-transform: capitalize; }
/* Format selection grid */
.format-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 640px) { .format-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .format-grid { grid-template-columns: repeat(2, 1fr); } }
.format-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.2s; text-align: center; position: relative; }
.format-option:hover { border-color: var(--primary); background: var(--bg-secondary); }
.format-option.selected { border-color: var(--primary); background: rgba(99,102,241,0.08); }
.format-option.selected::after { content: '\2713'; position: absolute; top: 6px; right: 8px; font-size: 12px; color: var(--primary-ink); font-weight: 700; }
.format-option.disabled { opacity: 0.4; cursor: not-allowed; }
.format-option input[type="checkbox"] { display: none; }
.format-preview { background: var(--text-muted); border-radius: 3px; opacity: 0.3; }
.format-option.selected .format-preview { background: var(--primary); opacity: 0.7; }
.ratio-9-16 { width: 22px; height: 40px; }
.ratio-4-5 { width: 28px; height: 35px; }
.ratio-1-1 { width: 32px; height: 32px; }
.ratio-2-3 { width: 24px; height: 36px; }
.ratio-16-9 { width: 40px; height: 22px; }
.format-label { font-size: 13px; font-weight: 700; color: var(--text-main); }
.format-platforms { font-size: 10px; color: var(--text-muted); line-height: 1.2; }
/* Clip subtitle toggle & styles */
.clip-sub-toggle { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.clip-sub-toggle strong { font-size: 14px; }
.warning-hint {
    margin-top: 6px; padding: 8px 12px; border-left: 3px solid var(--warning);
    background: rgba(245, 158, 11, 0.08); border-radius: 0 6px 6px 0;
    font-size: 12px; color: var(--warning-ink); line-height: 1.5;
}
.clip-style-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
@media (max-width: 640px) { .clip-style-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .clip-style-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px) { .clip-style-grid { grid-template-columns: repeat(2, 1fr); } }
.clip-style-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 0; border: 2px solid var(--border); border-radius: 8px;
    background: #0F172A; cursor: pointer; transition: all 0.2s;
    overflow: hidden; text-align: center;
}
.clip-style-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.clip-style-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }
.clip-style-preview {
    width: 100%; height: 44px; display: flex; align-items: center; justify-content: center;
    padding: 2px 4px; box-sizing: border-box;
}
.clip-style-img { max-width: 100%; max-height: 40px; display: block; pointer-events: none; object-fit: contain; }
.clip-style-label {
    font-size: 10px; font-weight: 600; color: var(--text-muted); padding: 3px 0 5px;
    transition: color 0.2s; width: 100%; background: var(--bg);
}
.clip-style-card.active .clip-style-label { color: var(--primary-ink); }
.clip-style-card:hover .clip-style-label { color: var(--text); }
.btn-link-toggle {
    background: none; border: none; color: var(--text-muted); font-size: 13px;
    cursor: pointer; padding: 4px 0; transition: color 0.2s;
}
.btn-link-toggle:hover { color: var(--text); }
.clip-sub-advanced { margin-top: 12px; }
.advanced-row { display: flex; gap: 12px; margin-bottom: 12px; }
.advanced-field { flex: 1; }
.advanced-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.advanced-field select, .advanced-field input[type="color"] {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-input); color: var(--text); font-size: 13px;
}
.advanced-field input[type="color"] { height: 36px; padding: 2px; cursor: pointer; }
@media (max-width: 640px) { .advanced-row { flex-wrap: wrap; } .advanced-field { min-width: 45%; } }

.option-radio.disabled { opacity: 0.5; cursor: not-allowed; }
.option-radio.disabled input { pointer-events: none; }
.plan-badge {
    display: inline-block; background: var(--primary); color: white;
    font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-top: 4px; font-weight: 600;
}

/* === Pricing === */
.pricing-section { padding: 80px 0; text-align: center; }
.pricing-sub { color: var(--text-muted); font-size: 18px; margin-bottom: 32px; }
.billing-toggle { display: flex; justify-content: center; gap: 4px; margin-bottom: 40px; background: var(--bg-card); border-radius: var(--radius); padding: 4px; display: inline-flex; border: 1px solid var(--border); }
.toggle-btn { padding: 10px 24px; border-radius: calc(var(--radius) - 2px); border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; font-weight: 500; transition: all var(--transition); display: flex; align-items: center; gap: 8px; }
.toggle-btn.active { background: var(--primary); color: white; }
.toggle-badge { background: var(--primary); color: white; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.billing-note { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1180px; margin: 0 auto; align-items: start; }
.pricing-badge-studio { background: linear-gradient(135deg, var(--accent), var(--primary)); }
.pricing-card-studio { border-color: var(--accent); }
.pricing-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: white; padding: 4px 16px;
    border-radius: 20px; font-size: 12px; font-weight: 600;
}
.pricing-header { margin-bottom: 24px; }
.pricing-header h3 { font-size: 22px; margin-bottom: 8px; }
.price { font-size: 40px; font-weight: 800; }
.period { font-size: 16px; color: var(--text-muted); }
.pricing-features { list-style: none; margin-bottom: 24px; }
.pricing-features li {
    padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.pricing-features li::before { content: '\2713'; color: var(--success); font-weight: 700; }
.pricing-features li.disabled { color: var(--text-muted); }
.pricing-features li.disabled::before { content: '\2717'; color: var(--error-ink); }

/* Pricing section labels */
.pricing-section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text); margin: 16px 0 8px; padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}

/* Highlighted premium features */
.pricing-features li.feature-highlight { font-weight: 600; }
.pricing-features li.feature-highlight::before { content: ''; }
.pricing-features li.feature-included::before { content: ''; }

/* Plan limits summary (top of each card) */
.pricing-limits { margin-bottom: 14px; }
.pricing-limits li.limit-key { font-weight: 700; font-size: 15px; }

/* Full tool catalog comparison (Free vs Pro) — creates the "no-brainer" contrast */
.plan-tools { margin: 2px 0 20px; }
.plan-tools-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin: 6px 0 8px;
}
.plan-tools-title-pro {
    color: var(--primary-ink); display: flex; align-items: center; gap: 6px;
}
.plan-tools-title-pro::before { content: '\26A1'; }
.plan-tool-cat { margin-bottom: 8px; }
.plan-tool-cat-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); opacity: 0.7; margin: 10px 0 4px;
}
.plan-tool-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--border);
}
.plan-tool-name { display: flex; align-items: center; gap: 7px; line-height: 1.3; }
.plan-tool-name::before { content: '\2713'; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.plan-tool-row.on .plan-tool-name::before { color: var(--success); }
.plan-tool-row.on .plan-tool-badge { color: var(--success); font-weight: 600; font-size: 12px; }
.plan-tool-row.limited { color: var(--text-muted); }
.plan-tool-row.limited .plan-tool-name::before { content: '\1F512'; color: var(--text-muted); }
[data-theme="dark"] .plan-tool-row.limited .plan-tool-badge { color: #FBBF24; }
.plan-tool-row.limited .plan-tool-badge {
    color: #B45309; background: rgba(245,158,11,0.13); font-weight: 600; font-size: 11px;
    padding: 1px 9px; border-radius: 999px; white-space: nowrap;
}
.plan-tool-badge { flex-shrink: 0; }

/* Excluded features (Free plan) */
.pricing-excluded li { color: var(--text-muted); opacity: 0.7; }
.pricing-excluded li::before { content: ''; }

/* View all tools link */
.pricing-view-tools {
    display: block; text-align: center; font-size: 13px; font-weight: 600;
    color: var(--primary-ink); margin: 0 0 16px; padding: 10px;
    border: 1px dashed var(--primary); border-radius: var(--radius-sm);
    transition: all 0.2s; text-decoration: none;
}
.pricing-view-tools:hover { background: rgba(37,99,235,0.05); }

.upgrade-link { display: block; margin-top: 6px; font-size: 12px; color: var(--primary-ink); text-decoration: underline; }

/* === Settings === */
.settings-section { padding: 40px 0; }
.settings-section h1 { margin-bottom: 24px; }
.settings-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 24px;
    border: 1px solid var(--border); margin-bottom: 16px; max-width: 700px;
}
.settings-card-wide { max-width: 700px; }
.settings-card h3 { margin-bottom: 16px; }
.settings-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
.settings-grid .settings-card { max-width: none; margin-bottom: 0; }
@media (max-width: 768px) { .settings-grid { grid-template-columns: 1fr; } }

/* Usage section */
.usage-section { margin-bottom: 4px; }

/* Limits table */
.limits-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.limits-table td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.limits-table td:first-child { color: var(--text-muted); }
.limits-table td:last-child { text-align: right; font-weight: 600; }
.limits-table tr:last-child td { border-bottom: none; }

/* Features checklist */
.features-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.features-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
.features-list li .feat-icon { font-weight: 700; width: 18px; text-align: center; }
.features-list li:not(.disabled) .feat-icon { color: var(--success); }
.features-list li.disabled { color: var(--text-muted); }
.features-list li.disabled .feat-icon { color: var(--error-ink); }
@media (max-width: 640px) { .features-list { grid-template-columns: 1fr; } }

/* Template items */
.template-items { display: flex; flex-direction: column; gap: 8px; }
.template-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.template-item-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.template-item-style { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.color-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--subtle-border); flex-shrink: 0; }

/* Danger section */
.danger-section { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.03); }
.danger-section h3 { color: var(--error-ink); }
.google-auth-info {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-sm);
    background: rgba(66,133,244,0.08); border: 1px solid rgba(66,133,244,0.2);
    color: var(--text); font-size: 14px; margin-top: 8px;
}
.firebase-email-auth-info {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-sm);
    background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.2);
    color: var(--text); font-size: 14px; margin-top: 8px;
}

/* === Footer === */
.footer { border-top: 1px solid var(--border); padding: 32px 0; margin-top: auto; }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-brand { display: flex; align-items: center; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--text); }
.footer-features { justify-content: center; flex-wrap: wrap; width: 100%; }
.footer-copy { color: var(--text-muted); font-size: 12px; }

/* === Loading === */
.loading { text-align: center; padding: 60px 0; color: var(--text-muted); }

/* === Video Tabs (before/after comparison) === */
.video-tabs { margin-bottom: 24px; }
.tab-buttons { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg-input); border-radius: var(--radius-sm); padding: 4px; width: fit-content; }
.tab-btn {
    padding: 8px 20px; border: none; background: transparent; color: var(--text-muted);
    font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 6px;
    transition: all var(--transition);
}
.tab-btn.active { background: var(--primary); color: white; }
.tab-btn:hover:not(.active) { color: var(--text); }

/* === Responsive === */
@media (max-width: 640px) {
    .container { padding: 0 16px; }
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
    .result-stats { grid-template-columns: 1fr; }
    .clips-grid { grid-template-columns: 1fr; }
    .tab-buttons { width: 100%; }
    .tab-btn { flex: 1; text-align: center; }
    .download-links { flex-direction: column; }
}

@media (max-width: 768px) {
    .hero h1 { font-size: 36px; }
    .hero-sub { font-size: 16px; }
    .hero-stats { flex-direction: column; gap: 16px; }
    .hero-cta { flex-direction: column; }
    .features-grid, .tools-grid, .pricing-grid { grid-template-columns: 1fr; }
    /* Hamburger + mobile menu */
    .nav-mobile-right { display: flex; }
    .nav-hamburger { display: flex; }
    .nav-right { display: none; }
    .nav-center { display: none; }
    .mobile-menu { display: block; }
    .dash-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .result-actions { flex-direction: column; }
    .footer-content { flex-direction: column; text-align: center; }
    .upload-zone { padding: 40px 20px; }
    .file-info { flex-direction: column; }
    .faq-question { font-size: 15px; padding: 14px 16px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .features-grid, .tools-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .clips-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === FAQ Section === */
.faq-section { padding: 80px 0; }
.faq-section h2 { text-align: center; margin-bottom: 40px; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px; background: none; border: none; color: var(--text);
    font-size: 16px; font-weight: 500; cursor: pointer; text-align: left;
    transition: color var(--transition);
}
.faq-question:hover, .faq-question.active { color: var(--primary-ink); }
.faq-arrow { font-size: 12px; transition: transform var(--transition); }
.faq-question.active .faq-arrow { transform: rotate(180deg); }
.faq-answer { padding: 0 20px 18px; }
.faq-answer p { color: var(--text-muted); line-height: 1.7; }

.progress-indeterminate {
    width: 40% !important;
    animation: indeterminate 1.5s ease-in-out infinite;
}
@keyframes indeterminate {
    0% { margin-left: 0; }
    50% { margin-left: 60%; }
    100% { margin-left: 0; }
}

/* === Demo Page === */
.demo-section { padding: 60px 0; }
.demo-subtitle { color: var(--text-muted); text-align: center; margin-bottom: 32px; font-size: 16px; }
.demo-limits { text-align: center; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.demo-processing { text-align: center; padding: 60px 0; }
.progress-bar-lg { max-width: 500px; margin: 0 auto 20px; height: 12px; }
.progress-msg { font-size: 16px; color: var(--text-primary); margin-bottom: 4px; }
.progress-pct { font-size: 24px; font-weight: 700; color: var(--primary-ink); }
.demo-result { max-width: 700px; margin: 0 auto; }
.demo-cta {
    margin-top: 40px;
    padding: 32px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--border);
}
.demo-cta h3 { margin-bottom: 8px; }
.demo-cta p { color: var(--text-muted); margin-bottom: 20px; }
.demo-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* === Homepage Hero Upload === */
.hero-upload, .hero-compact { padding: 80px 0 40px; text-align: center; }
.hero-compact { padding: 48px 0 16px; }
.hero-upload h1, .hero-compact h1 { font-size: 42px; line-height: 1.2; margin-bottom: 16px; }
.hero-upload .hero-sub, .hero-compact .hero-sub { font-size: 18px; color: var(--text-muted); margin-bottom: 24px; max-width: 700px; margin-left: auto; margin-right: auto; }
.hero-upload .gradient-text, .hero-compact .gradient-text { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.upload-hero { max-width: 600px; margin: 0 auto 32px; width: 100%; }

/* Drop zone — 4 states (initial / drag / uploading / error), ported from the
   validated Claude Design screen. Color marks state functionally (border+bg),
   never decoratively; every state also carries a second signal (icon+text),
   never color alone (WCAG 1.4.1). */
.drop-zone-hero {
    border: 2px dashed #D1D5DB;
    border-radius: var(--radius);
    padding: 32px 28px;
    min-height: 224px;
    cursor: pointer;
    transition: all 0.18s ease;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    /* Colonne : la surface porte désormais l'appel au fichier, la ligne
       formats, puis le second chemin (lien). En ligne, ils se chevauchaient. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.drop-zone-hero:hover { border-color: var(--text-3); box-shadow: var(--shadow-md); }
.drop-zone-hero.drag-active {
    cursor: copy;
    border: 2px dashed var(--primary);
    background: #EFF4FF;
    box-shadow: 0 8px 24px rgba(37,99,235,.18);
    transform: scale(1.01);
}
.drop-zone-hero.uploading { border: 2px solid var(--border); box-shadow: var(--shadow-md); cursor: default; pointer-events: none; }
.drop-zone-hero.upload-error { cursor: pointer; border: 2px solid #FCA5A5; background: #FFFBFB; }

.drop-icon-badge {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; background: #EEF2FF; color: var(--primary-ink);
    transition: background 0.18s ease, transform 0.18s ease;
}
.drop-zone-hero.drag-active .drop-icon-badge { background: var(--primary); color: #fff; animation: klipa-bob 1s ease-in-out infinite; }
.drop-zone-hero.upload-error .drop-icon-badge { background: #FEF2F2; color: var(--error-ink); }
.drop-icon-badge svg { width: 30px; height: 30px; }
@keyframes klipa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.drop-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.drop-zone-hero.drag-active .drop-title { color: var(--primary-hover); }
.drop-hint { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.drop-hint strong { color: var(--primary-ink); font-weight: 700; }
.drop-zone-hero.drag-active .drop-hint { color: var(--primary-ink); }
.drop-formats-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 0 2px; font-size: 13px; }
.drop-formats { color: var(--text-muted); font-weight: 500; }
.drop-max-size { color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* Uploading state: file row + progress + cancel */
.drop-upload-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.drop-file-icon { width: 44px; height: 44px; border-radius: 12px; background: #EEF2FF; color: var(--primary-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.drop-file-icon svg { width: 22px; height: 22px; }
.drop-file-meta { flex: 1; min-width: 0; }
.drop-file-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-file-status { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.drop-cancel-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; pointer-events: auto;
}
.drop-cancel-btn:hover { background: var(--hover-overlay-strong); }
.drop-cancel-btn svg { width: 18px; height: 18px; }

.progress-bar-mini { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; margin: 14px 0 0; width: 100%; }
.progress-bar-mini .progress-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width 0.3s ease; }
.upload-percent { font-size: 14px; color: var(--primary-ink); font-weight: 700; text-align: right; margin-top: 8px; display: block; }

/* Error state */
.drop-error-hint { margin: 6px auto 0; font-size: 14px; font-weight: 500; color: var(--text-muted); line-height: 1.45; max-width: 320px; }
.drop-retry-btn {
    margin-top: 16px; height: 40px; padding: 0 20px; border: 1px solid var(--border);
    background: var(--bg-card); border-radius: var(--radius); font-family: inherit;
    font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer;
}
.drop-retry-btn:hover { background: var(--bg-input); }

/* Trust badges — small pills, checkmark + label, never a large color surface */
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.trust-badge {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border-radius: 99px; background: var(--bg-card); box-shadow: var(--shadow-sm);
    font-size: 13px; font-weight: 600; color: var(--text);
}
.trust-badge svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }

/* Desktop: larger icon badges and zone, matching the validated desktop screen. */
@media (min-width: 769px) {
    .drop-zone-hero { min-height: 300px; padding: 40px 32px; }
    .drop-icon-badge { width: 80px; height: 80px; border-radius: 22px; margin-bottom: 22px; }
    .drop-icon-badge svg { width: 38px; height: 38px; }
    .drop-title { font-size: 22px; }
    .drop-hint { font-size: 16px; }
    .drop-file-icon { width: 52px; height: 52px; border-radius: 14px; }
    .drop-file-icon svg { width: 26px; height: 26px; }
    .drop-file-name { font-size: 17px; }
    .drop-upload-row { max-width: 480px; margin: 0 auto; }
    .trust-badge { height: 36px; padding: 0 16px; font-size: 14px; }
}

/* Processing options (step 2) */
.processing-options { max-width: 600px; margin: 0 auto 32px; text-align: center; }
.processing-options h3 { margin-bottom: 20px; font-size: 20px; }
.process-types { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.process-option {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 24px; border-radius: var(--radius); cursor: pointer;
    background: var(--bg-card); border: 2px solid var(--border);
    transition: all var(--transition); min-width: 140px;
    font-size: 14px; font-weight: 500; color: var(--text);
}
.process-option:hover { border-color: rgba(37, 99, 235, 0.5); }
.process-option.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.1); }
.option-icon { font-size: 28px; }

/* Processing progress (step 3) */
.processing-progress { text-align: center; padding: 40px 0; max-width: 500px; margin: 0 auto; width: 100%; min-height: 200px; }
.processing-progress .progress-msg { font-size: 16px; margin-bottom: 16px; }
.processing-progress .progress-bar { height: 10px; background: var(--bg-input); border-radius: 5px; overflow: hidden; margin-bottom: 12px; }
.processing-progress .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 5px; transition: width 0.3s; }
.processing-progress .progress-pct { font-size: 24px; font-weight: 700; color: var(--primary-ink); }

/* Result inline (step 4) */
/* Full-width result container: the inner blocks carry their own max-widths
   (.result-card 600px, .tool-comparison 800px, .locked-preview 960px desktop
   grid). A 600px cap here silently squeezed the wider ones. */
.result-inline { text-align: center; margin: 0 auto; width: 100%; }
.result-inline h3 { font-size: 24px; margin-bottom: 20px; color: var(--success); }
.result-inline .result-stats { display: flex; justify-content: center; gap: 40px; margin-bottom: 24px; }
.result-inline .stat strong { display: block; font-size: 28px; color: var(--text); }
.result-inline .stat span { font-size: 13px; color: var(--text-muted); }
.result-clips { margin-bottom: 24px; }
.clip-card-mini {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: var(--bg-card); border-radius: var(--radius-sm);
    border: 1px solid var(--border); margin-bottom: 8px;
}
.clip-card-mini strong { font-size: 14px; }
.clip-score { font-size: 13px; color: var(--primary-ink); font-weight: 600; }
.result-hint { font-size: 13px; color: var(--text-muted); margin-top: 12px; }

/* Hero stats */
.hero-stats { display: flex; justify-content: center; gap: 48px; margin-top: 40px; }
.hero-stats .stat strong { display: block; font-size: 20px; color: var(--primary-ink); font-weight: 700; }
.hero-stats .stat span { font-size: 13px; color: var(--text-muted); }

/* Signup Modal */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 32px;
    max-width: 440px; width: 100%; position: relative;
    border: 1px solid var(--border); max-height: 90vh; overflow-y: auto;
}
.modal-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 24px; cursor: pointer; padding: 4px;
}
.modal-close:hover { color: var(--text); }
.modal-card h2 { font-size: 22px; margin-bottom: 8px; }
.modal-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
.modal-switch { text-align: center; margin-top: 16px; color: var(--primary-ink); cursor: pointer; font-size: 14px; }
.modal-switch:hover { text-decoration: underline; }

/* La fenêtre de connexion doit TOUJOURS passer AU-DESSUS de la fenêtre des
   tarifs (z-index 9000) : « S'abonner » sans être connecté ouvre la connexion
   par-dessus les tarifs. À 1000, elle s'ouvrait DERRIÈRE — bouton muet en
   apparence, zéro abonnement possible pour un visiteur non connecté. */
.modal-overlay.is-auth { z-index: 9500; }

/* Auth modal on mobile: a bottom sheet (ported from the validated Claude Design
   screen "Connexion"), not a centered dialog — easier to reach one-handed.
   Scoped to .is-auth so settings.html's (unrelated) delete-account confirmation
   dialog, which shares .modal-overlay/.modal-card, is never affected. */
.modal-sheet-handle { display: none; width: 40px; height: 4px; border-radius: 99px; background: var(--border); margin: 0 auto 14px; flex-shrink: 0; }
/* `.is-sheet` = même comportement de feuille, pour les dialogues qui ne sont pas
   la connexion (choix d'outil de suite). Reste SOUS la connexion et sous les
   tarifs : ces deux-là s'ouvrent par-dessus. */
.modal-overlay.is-sheet { z-index: 8500; }
@media (max-width: 640px) {
    .modal-overlay.is-auth, .modal-overlay.is-sheet { align-items: flex-end; padding: 0; }
    .modal-overlay.is-auth .modal-card, .modal-overlay.is-sheet .modal-card {
        max-width: 100%; border-radius: 24px 24px 0 0;
        padding: 10px 24px 26px; max-height: 92vh;
        animation: modal-sheet-up .3s cubic-bezier(.22,1,.36,1);
    }
    .modal-overlay.is-auth .modal-sheet-handle, .modal-overlay.is-sheet .modal-sheet-handle { display: block; }
    .modal-overlay.is-auth .modal-close, .modal-overlay.is-sheet .modal-close { top: 16px; }
}
@keyframes modal-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.tools-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Mini pricing on homepage */
.mini-pricing { padding: 60px 0; text-align: center; }
.mini-pricing h2 { margin-bottom: 40px; font-size: 28px; }

/* Homepage responsive */
@media (max-width: 768px) {
    .hero-upload h1, .hero-compact h1 { font-size: 28px; }
    .hero-upload .hero-sub, .hero-compact .hero-sub { font-size: 15px; }
    .hero-compact { padding: 32px 0 8px; }
    .drop-zone-hero { padding: 28px 20px; }
    .process-types { flex-direction: column; align-items: center; }
    .process-option { width: 100%; max-width: 280px; flex-direction: row; justify-content: center; }
    .features-grid { grid-template-columns: 1fr; }
    .tools-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .hero-stats { flex-direction: column; gap: 16px; }
    .result-inline .result-stats { flex-direction: column; gap: 16px; }
    .modal-card { padding: 24px; margin: 10px; }
    .faq-question { font-size: 14px; }
}

/* === Legal Pages === */
.legal-page { padding: 60px 0; }
.legal-page h1 { margin-bottom: 8px; }
.legal-date { color: var(--text-muted); font-size: 14px; margin-bottom: 40px; }
.legal-page h2 { font-size: 18px; margin: 32px 0 12px; color: var(--primary-ink); }
.legal-page p, .legal-page li { color: var(--text-muted); line-height: 1.8; margin-bottom: 8px; }
.legal-page ul { padding-left: 24px; margin-bottom: 12px; }
.legal-page a { color: var(--primary-ink); text-decoration: underline; }
.legal-page h3 { font-size: 15px; margin: 20px 0 8px; color: var(--text); }
.legal-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14px; }
.legal-table th, .legal-table td { padding: 8px 12px; border: 1px solid var(--border, #e5e7eb); text-align: left; }
.legal-table th { background: var(--bg-card, #f9fafb); font-weight: 600; color: var(--text); }
.legal-table td { color: var(--text-muted); }
.legal-table code { background: rgba(0,0,0,0.05); padding: 2px 5px; border-radius: 3px; font-size: 13px; }
@media (max-width: 600px) { .legal-table { font-size: 12px; } .legal-table th, .legal-table td { padding: 6px 8px; } }

/* === Subtitle Templates === */
.template-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.template-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 20px; padding: 6px 14px; font-size: 13px;
    cursor: pointer; transition: var(--transition);
}
.template-chip:hover { border-color: var(--primary); background: rgba(37,99,235,.15); }
.chip-delete {
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; cursor: pointer; padding: 0; line-height: 1;
}
.chip-delete:hover { color: var(--error-ink); }

.subtitle-custom-panel {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 16px; margin-top: 8px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-input {
    width: 50px; height: 36px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-input);
    cursor: pointer; padding: 2px;
}
.save-template-row { display: flex; gap: 8px; align-items: center; }
.template-name-input {
    flex: 1; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text);
    font-size: 14px;
}
.template-name-input::placeholder { color: var(--text-muted); }

/* === Text Editor (Descript-like) === */
.text-editor-section { margin-top: 16px; }
.editor-hint { color: var(--text-muted); font-size: 14px; margin-bottom: 12px; }
.editor-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px; padding: 8px 12px;
    background: var(--bg-card); border-radius: var(--radius-sm);
}
.editor-stats { margin-left: auto; color: var(--text-muted); font-size: 13px; }
.text-editor-area {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    line-height: 2.2; font-size: 16px; max-height: 500px; overflow-y: auto;
}
.editor-segment { display: inline; }
.editor-word {
    display: inline; cursor: pointer; padding: 2px 1px;
    border-radius: 3px; transition: all 0.15s;
}
.editor-word:hover { background: rgba(37, 99, 235, 0.15); }
.editor-word.removed {
    text-decoration: line-through; opacity: 0.35;
    background: rgba(239, 68, 68, 0.1); color: var(--text-muted);
}
.editor-word.filler:not(.removed) {
    color: #F59E0B; font-style: italic;
}
.editor-actions { margin-top: 16px; display: flex; gap: 12px; }
.result-tabs .tab-buttons { margin-bottom: 16px; }

/* === Subtitle Line Editor === */
.subtitle-editor-section { margin-top: 16px; }
.subtitle-editor-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px; padding: 8px 12px;
    background: var(--bg-card); border-radius: var(--radius-sm);
}
.se-toolbar-save { margin-left: auto; }
.subtitle-editor-lines {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 4px 8px;
    max-height: 500px; overflow: auto;
}
.se-line {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px; align-items: start;
    padding: 6px 4px; border-radius: var(--radius-sm);
    transition: background 0.15s;
    border-bottom: 1px solid var(--hover-overlay);
    cursor: pointer;
}
.se-line-num { grid-row: 1 / 3; align-self: center; }
.se-timing { grid-column: 2; grid-row: 1; }
.se-text-wrap { grid-column: 2; grid-row: 2; }
.se-actions { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.se-line:last-child { border-bottom: none; }
.se-line:hover { background: rgba(37, 99, 235, 0.05); }
.se-line-active { background: rgba(37, 99, 235, 0.1) !important; }
.se-line-num {
    color: var(--text-muted); font-size: 12px; font-weight: 600;
    text-align: center; padding-top: 5px;
    font-variant-numeric: tabular-nums;
}
.se-timing { display: flex; align-items: center; gap: 3px; opacity: 0.5; }
.se-line:hover .se-timing,
.se-line-active .se-timing { opacity: 0.75; }
.se-time-input {
    width: 64px; padding: 3px 4px;
    background: #1f2f4d; border: 1px solid var(--border);
    border-radius: 4px; color: #838587;
    font-size: 11px; font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-variant-numeric: tabular-nums; text-align: center;
}
.se-time-input:focus {
    outline: none; border-color: var(--primary); background: var(--bg-input, var(--bg));
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2); color: var(--text);
}
.se-time-sep { color: var(--text-muted); font-size: 10px; opacity: 0.6; }
.se-text-wrap { flex: 1; min-width: 0; }
.se-text-input {
    width: 100%; padding: 3px 6px;
    background: transparent; border: 1px solid transparent;
    border-radius: 4px; color: var(--text);
    font-size: 14px; line-height: 1.5;
    resize: none; overflow: hidden;
    white-space: nowrap; font-family: inherit;
    height: auto !important;
}
.se-text-input:focus {
    outline: none; background: var(--bg-input, var(--bg));
    border-color: var(--primary);
}
.se-text-input:hover:not(:focus) { border-color: var(--border); }
.se-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.se-line:hover .se-actions { opacity: 1; }
.se-action-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 4px; border-radius: 4px;
    font-size: 14px; transition: all 0.15s; line-height: 1;
}
.se-action-btn:hover { color: var(--text); background: var(--hover-overlay-medium); }
.se-action-delete:hover { color: #EF4444; }
.se-save-bar {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 8px 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-sm);
    font-size: 13px; color: #F59E0B;
}
.se-unsaved-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #F59E0B; flex-shrink: 0;
}
.se-save-bar .btn { margin-left: auto; }

/* Left panel tabs */
.left-tabs {
    display: flex; gap: 0; margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.left-tabs .tab-btn {
    flex: 1; padding: 8px 0; font-size: 13px; font-weight: 600;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.left-tabs .tab-btn.active {
    color: var(--primary-ink); border-bottom-color: var(--primary);
}
.left-tabs .tab-btn:hover:not(.active) { color: var(--text); }

/* Style gallery (vertical list with images) */
.style-gallery {
    display: flex; flex-direction: column; gap: 8px;
    max-height: calc(100vh - 300px); overflow-y: auto;
}
.style-gallery-item {
    cursor: pointer; border-radius: var(--radius-sm);
    border: 2px solid transparent;
    transition: border-color 0.15s;
    flex-shrink: 0;
}
.style-gallery-item:hover { border-color: rgba(37, 99, 235, 0.4); }
.style-gallery-item.active { border-color: var(--primary); }
.style-gallery-img {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; background: #1E293B;
    padding: 5px 10px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
}
.style-gallery-img img {
    display: block; max-width: 100%; height: auto;
}
.style-gallery-label {
    display: block; text-align: center; padding: 5px 0;
    font-size: 12px; color: var(--text-muted); font-weight: 600;
    background: var(--bg-card);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.style-gallery-item.active .style-gallery-label { color: var(--primary-ink); }

/* Pro badge overlays */
.style-gallery-item.locked, .style-card-m.locked { cursor: pointer; }
.style-gallery-item.locked:hover { border-color: rgba(37, 99, 235, 0.4); }
.style-card-m-img { position: relative; }
.pro-badge-overlay {
    position: absolute; top: 6px; right: 6px;
    background: var(--accent); color: white; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.format-option-sm.locked { opacity: 0.5; cursor: not-allowed; }
.pro-badge-sm {
    display: inline-block; background: var(--accent); color: white;
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
    text-transform: uppercase; margin-left: 4px;
}

/* === Pro gate overlay (customization locked for Free) === */
.pro-gate-wrap { position: relative; }
.pro-gate-wrap.pro-locked .preview-customize,
.pro-gate-wrap.pro-locked .template-section {
    opacity: 0.45; pointer-events: none; user-select: none;
}
.pro-gate-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    border-radius: var(--radius);
    cursor: pointer; pointer-events: auto;
    transition: background 0.2s;
}
.pro-gate-overlay:hover { background: rgba(15, 23, 42, 0.6); }
.pro-gate-lock {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--hover-overlay-medium); border: 1px solid var(--subtle-border);
    color: var(--text-muted); transition: all 0.2s;
}
.pro-gate-overlay:hover .pro-gate-lock {
    background: rgba(124,58,237,0.15); border-color: var(--accent); color: var(--accent-ink);
}
/* Global floating Pro upgrade prompt */
.pro-prompt-backdrop {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.4);
}
.pro-prompt-float {
    position: fixed; z-index: 1000;
    inset: 0; margin: auto;
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid rgba(124,58,237,0.4);
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
    max-width: 480px; width: calc(100% - 32px); height: fit-content;
}
.pro-prompt-float svg { flex-shrink: 0; stroke: var(--accent-ink); }
.pro-prompt-float-body {
    flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.pro-prompt-float-body strong { color: var(--text); font-size: 14px; }
.pro-prompt-float-body span { color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.pro-prompt-float .btn { flex-shrink: 0; white-space: nowrap; }
.pro-prompt-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: var(--text-muted);
    font-size: 20px; cursor: pointer; line-height: 1; padding: 4px;
}
.pro-prompt-close:hover { color: var(--text); }

/* Quota exceeded popup */
.quota-popup {
    position: fixed; z-index: 1000;
    inset: 0; margin: auto;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 32px 28px; border-radius: 16px;
    background: var(--bg-card); border: 1px solid rgba(37, 99, 235, 0.3);
    box-shadow: 0 16px 64px rgba(0,0,0,0.6);
    max-width: 420px; width: calc(100% - 32px); height: fit-content;
    text-align: center;
}
.quota-popup-icon { margin-bottom: 4px; }
.quota-popup h3 { color: var(--text); font-size: 20px; margin: 0; }
.quota-popup p { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.quota-popup-cta { width: 100%; font-size: 16px; padding: 14px; }
.quota-popup-hint { color: var(--text-muted); font-size: 12px; }

/* Style upgrade modal (Pro style selected on generate) */
.style-upgrade-modal {
    position: fixed; z-index: 1001;
    inset: 0; margin: auto;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 32px 28px 24px; border-radius: 16px;
    background: var(--bg-card); border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 16px 56px rgba(0,0,0,0.6);
    max-width: 420px; width: calc(100% - 32px); height: fit-content; text-align: center;
}
.style-upgrade-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    display: flex; align-items: center; justify-content: center;
}
.style-upgrade-title { color: var(--text); font-size: 16px; }
.style-upgrade-desc { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.style-upgrade-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px; }
.style-upgrade-actions .btn { width: 100%; justify-content: center; }

/* Clip preview list (Phase 1 clipping) */
.clip-preview-list {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.clip-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, opacity 0.2s;
}
.clip-preview-item:hover { border-color: rgba(37, 99, 235, 0.4); }
.clip-preview-item.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.06); }
.clip-preview-item.unselected { opacity: 0.45; }
.clip-preview-check { flex-shrink: 0; margin-top: 2px; }
.clip-preview-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.clip-preview-info { flex: 1; min-width: 0; }
.clip-preview-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.clip-preview-title { font-weight: 600; font-size: 0.85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-preview-score { flex-shrink: 0; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
.clip-preview-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 3px; display: flex; gap: 8px; }
.clip-preview-tc { opacity: 0.7; }
.clip-mini-scores { display: flex; gap: 3px; margin-top: 5px; }
.mini-score { flex: 1; }
.mini-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.mini-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.3s; }

/* Format grid compact (result page) */
.preview-formats { margin-bottom: 16px; }
.preview-formats > label { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 4px; display: block; }
.preview-formats .fmt-pedagogy { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.format-grid-compact { display: flex; flex-wrap: wrap; gap: 10px; }
.format-option-sm {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 12px;
    border: 2px solid var(--border); background: var(--bg-card);
    cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    min-width: 80px; text-align: center; position: relative;
}
.format-option-sm:hover { border-color: rgba(37, 99, 235, 0.5); box-shadow: 0 0 12px rgba(37, 99, 235, 0.15); }
.format-option-sm.selected { border-color: var(--primary); background: rgba(37, 99, 235, 0.1); box-shadow: 0 0 16px rgba(37, 99, 235, 0.2); }
.format-option-sm input { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; accent-color: var(--primary); }
.fmt-ratio-box {
    width: 40px; border: 2.5px solid var(--text-muted); border-radius: 4px;
    background: rgba(37, 99, 235, 0.1); flex-shrink: 0;
}
.format-option-sm.selected .fmt-ratio-box { border-color: var(--primary); background: rgba(37, 99, 235, 0.2); }
.format-option-sm:hover .fmt-ratio-box { border-color: rgba(37, 99, 235, 0.6); }
.fmt-label-wrap { display: flex; flex-direction: column; line-height: 1.2; align-items: center; }
.fmt-label-main { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.fmt-label-sub { font-size: 0.65rem; color: var(--text-secondary); font-weight: 400; }

/* Mobile style cards (hidden on desktop) */
.style-cards-mobile { display: none; }

@media (max-width: 640px) {
    .se-line { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px; }
    .se-line-num { display: none; }
    .se-timing { grid-column: 1; grid-row: 1; justify-content: flex-start; }
    .se-text-wrap { grid-column: 1 / -1; grid-row: 2; }
    .se-actions { grid-column: 2; grid-row: 1; opacity: 1; }
}

/* === Language Dropdown === */
.lang-dropdown { position: relative; margin-right: 4px; }
.lang-dropdown-trigger {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 8px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer;
    font-size: 13px; font-weight: 600; transition: all 0.15s;
}
.lang-dropdown-trigger:hover { border-color: var(--text-muted); color: var(--text); }
.lang-flag { font-size: 18px; line-height: 1; }
.lang-code { font-size: 12px; }
.lang-dropdown-trigger svg { opacity: 0.5; }
.lang-dropdown-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
    min-width: 150px; padding: 4px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.lang-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 12px; border: none; border-radius: 6px;
    background: transparent; color: var(--text-muted);
    font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.lang-dropdown-item:hover { background: var(--hover-overlay); color: var(--text); }
.lang-dropdown-item.active { color: var(--primary-ink); font-weight: 600; }

/* === User Menu (navbar dropdown) === */
.user-menu { position: relative; }
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 0.15s;
}
.user-avatar:hover { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }
.user-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    min-width: 220px; z-index: 200; overflow: hidden;
}
.user-dropdown-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.user-dropdown-name { font-weight: 600; font-size: 14px; color: var(--text); }
.user-dropdown-email { font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.user-dropdown-sep { height: 1px; background: var(--border); }
.user-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 16px; font-size: 14px; color: var(--text-muted);
    background: none; border: none; cursor: pointer; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.user-dropdown-item:hover { background: var(--hover-overlay); color: var(--text); }
.user-dropdown-item svg { flex-shrink: 0; }
.logout-item { color: var(--error-ink); }
.logout-item:hover { background: rgba(239, 68, 68, 0.1); color: var(--error-ink); }
.nav-upgrade {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white; padding: 6px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.nav-upgrade:hover { opacity: 0.9; box-shadow: 0 2px 12px rgba(37, 99, 235, 0.4); color: white; }

/* === Speaker Diarization === */
.transcription-speakers .speaker-segment { margin-bottom: 8px; line-height: 1.6; }
.speaker-label { font-weight: 700; font-size: 13px; margin-right: 4px; display: inline-block; }
.checkbox-label.disabled { opacity: 0.5; cursor: not-allowed; }

/* === API Keys === */
.api-keys-list { display: flex; flex-direction: column; gap: 8px; }
.api-key-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* === Loading Spinner === */
.spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid var(--spinner-border); border-top-color: var(--text);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }
.spinner-primary { border-color: rgba(37,99,235,0.2); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* === Card hover polish === */
.clip-card {
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.clip-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* === Continue processing actions === */
.continue-actions {
    margin: 28px 0 20px; padding: 24px; text-align: center;
    background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.15);
    border-radius: var(--radius);
}
.continue-label { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.continue-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.continue-buttons .btn { display: inline-flex; align-items: center; gap: 8px; }
.continue-hint { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.btn-primary-outline {
    background: transparent; color: var(--primary-ink); border: 2px solid var(--primary);
    padding: 10px 24px; border-radius: var(--radius-sm); font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.btn-primary-outline:hover { background: rgba(37,99,235,0.1); }

/* === Job card polish === */
.job-card {
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.job-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* === Stat cards polish === */
.stat-card {
    transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* === Upload zone polish === */
.upload-zone {
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.upload-zone:hover { border-color: var(--text-muted); }
.upload-zone.drag-active {
    border-color: var(--primary);
    background: rgba(37,99,235,0.08);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}

/* === Option radio polish === */
.option-radio {
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.option-radio:hover:not(.disabled) { transform: translateX(4px); }
.option-radio.selected {
    border-color: var(--primary);
    background: rgba(37,99,235,0.08);
    box-shadow: inset 3px 0 0 var(--primary);
}

/* === Tab buttons polish === */
.tab-btn { transition: all var(--transition); }
.tab-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* === Video player polish === */
.video-el { background: #0a0a0a; }

/* === Progress bar animation === */
.progress-fill { position: relative; overflow: hidden; }
.progress-fill::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.progress-fill.progress-analyzing {
    animation: pulse-bar 1.5s ease-in-out infinite;
}
@keyframes pulse-bar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.analyzing-text {
    animation: pulse-bar 1.5s ease-in-out infinite;
    color: var(--primary-ink);
}

/* === Delete button for jobs === */
.btn-danger { background: transparent; color: var(--error-ink); border: 1px solid var(--error); }
.btn-danger:hover { background: rgba(239,68,68,0.1); }
.btn-icon {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 16px;
}

/* === Usage bar on dashboard === */
.usage-bar {
    height: 8px; background: var(--bg-input); border-radius: 4px;
    overflow: hidden; margin-top: 8px;
}
.usage-fill {
    height: 100%; border-radius: 4px; transition: width 0.5s ease;
    background: linear-gradient(90deg, var(--primary), var(--primary));
}
.usage-fill.high { background: linear-gradient(90deg, var(--warning), var(--error)); }

/* === Plan badge on dashboard === */
.plan-tag {
    display: inline-block; padding: 4px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.plan-tag.free { background: rgba(148,163,184,0.15); color: var(--text-muted); }
.plan-tag.starter { background: rgba(37,99,235,0.15); color: var(--primary-ink); }
.plan-tag.pro { background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(124,58,237,0.2)); color: var(--accent-ink); }

/* === Empty state polish === */
.empty-state {
    padding: 80px 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }

/* === Smooth page transitions === */
.upload-section, .dashboard-section, .result-section, .settings-section {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Info block (not processed / processing messages) === */
.info-block {
    background: var(--bg-card); border-radius: var(--radius); padding: 40px;
    border: 1px solid var(--border); text-align: center;
}
.info-block p { color: var(--text-muted); margin-bottom: 20px; font-size: 16px; }

/* === Select dropdown polish === */
.form-group select {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px;
}

/* === Checkbox toggle style === */
.checkbox-label input[type="checkbox"] {
    position: relative; width: 44px; height: 24px;
    -webkit-appearance: none; appearance: none;
    background: var(--bg-input); border-radius: 12px;
    border: 1px solid var(--border); cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.checkbox-label input[type="checkbox"]::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--text-muted); transition: transform 0.2s, background 0.2s;
}
.checkbox-label input[type="checkbox"]:checked {
    background: var(--primary); border-color: var(--primary);
}
.checkbox-label input[type="checkbox"]:checked::after {
    transform: translateX(20px); background: white;
}

/* === Customize Panel (collapsible re-style section) === */
.customize-panel {
    margin-top: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.customize-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.customize-toggle:hover {
    background: var(--hover-overlay);
}
.customize-toggle svg {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.customize-toggle svg.rotate-180 {
    transform: rotate(180deg);
}
.customize-inner {
    padding: 0 24px 24px;
}
.customize-inner .style-selector {
    margin-bottom: 20px;
}
.customize-inner .preview-player-wrap {
    max-height: 300px;
    margin-bottom: 20px;
}
.customize-inner .preview-apply {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* === Result Split Layout (2 panels) === */
.result-split {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 24px;
    align-items: start;
}
.result-left {
    min-width: 0;
}
.result-right {
    /* No sticky/scroll — flows naturally with the page */
}

/* Compact stats (1 line) */
.result-stats-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
}
.result-stats-compact .highlight { color: var(--success); }
.stat-arrow { color: var(--text-muted); }
.stat-saved {
    margin-left: auto;
    color: var(--success);
    font-weight: 600;
}

/* Compact actions row */
.result-actions-compact {
    display: flex;
    gap: 8px;
    margin: 12px 0 16px;
}
.result-actions-compact .btn { font-size: 13px; padding: 6px 14px; }

/* Small SRT/VTT links */
.download-links-small {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.download-links-small a {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
}
.download-links-small a:hover { color: var(--primary-ink); }

/* In split layout: taller editor */
.result-split .subtitle-editor-lines {
    max-height: calc(100vh - 300px);
}
/* In split layout: stats cards stack */
.result-split .result-stats {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.result-split .stat-card { padding: 12px 16px; text-align: left; display: flex; justify-content: space-between; align-items: center; }
.result-split .stat-card .stat-value { font-size: 18px; }

/* Mobile editor toggle & section (hidden on desktop) */
.mobile-editor-toggle {
    display: none;
    align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px 16px; margin-bottom: 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--text);
    transition: border-color 0.15s;
}
.mobile-editor-toggle:hover { border-color: var(--primary); }
.mobile-editor-toggle.active { border-color: var(--primary); color: var(--primary-ink); }
.mobile-editor-toggle svg { flex-shrink: 0; }
.subtitle-editor-mobile { display: none; }

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .result-split {
        grid-template-columns: 1fr;
    }
    .result-right {
        position: static;
        max-height: none;
        order: -1;
    }
    .result-split .subtitle-editor-lines {
        max-height: 400px;
    }
    .result-split .result-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .result-split .stat-card { display: block; text-align: center; padding: 24px; }
    .result-split .stat-card .stat-value { font-size: 28px; }

    /* Hide left gallery on mobile, show cards + mobile editor toggle in right panel */
    .style-gallery { display: none; }
    .left-tabs { display: none; }
    .style-cards-mobile {
        display: flex; flex-wrap: wrap; gap: 8px;
        justify-content: center;
        margin-bottom: 16px;
    }
    /* Mobile: show editor toggle button */
    .mobile-editor-toggle { display: flex; }
    /* Mobile: subtitle editor placed in right panel */
    .subtitle-editor-mobile {
        display: block;
        margin-top: 8px;
    }
    .subtitle-editor-mobile .subtitle-editor-lines {
        max-height: 350px;
    }
    .style-card-m {
        cursor: pointer; border-radius: var(--radius-sm);
        border: 2px solid transparent;
        transition: border-color 0.15s;
        width: calc(50% - 4px);
        overflow: hidden;
    }
    .style-card-m:hover { border-color: rgba(37, 99, 235, 0.4); }
    .style-card-m.active { border-color: var(--primary); }
    .style-card-m-img {
        display: flex; align-items: center; justify-content: center;
        width: 100%; background: #1E293B;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        overflow: hidden; padding: 8px 4px;
    }
    .style-card-m-img img {
        display: block; max-width: 100%; height: auto;
    }
    .style-card-m-label {
        display: block; text-align: center; padding: 4px 0;
        font-size: 11px; font-weight: 600; color: var(--text-muted);
        background: var(--bg-card);
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }
    .style-card-m.active .style-card-m-label { color: var(--primary-ink); }
}

/* Subtitle toggle alert bar */
.subtitle-toggle-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 10px 0; padding: 10px 14px; border-radius: 8px;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
}
.subtitle-toggle-info {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--warning-ink); line-height: 1.4;
}
.subtitle-toggle-info svg { flex-shrink: 0; stroke: var(--warning-ink); }
.subtitle-toggle-btn {
    flex-shrink: 0; padding: 6px 14px; border-radius: 6px;
    background: transparent; border: 1px solid rgba(245,158,11,0.4);
    color: var(--warning-ink); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.subtitle-toggle-btn:hover { background: rgba(245,158,11,0.15); border-color: var(--warning); }
.subtitle-toggle-btn.active { background: var(--warning); color: #000; border-color: var(--warning); }

/* === Contact Page === */
.contact-section { padding: 60px 0 80px; }
.contact-header { text-align: center; margin-bottom: 48px; }
.contact-header h1 { font-size: 2rem; margin-bottom: 12px; }
.contact-header p { color: var(--text-muted); font-size: 1.05rem; max-width: 520px; margin: 0 auto; line-height: 1.6; }
.contact-grid { display: grid; grid-template-columns: 1fr 340px; gap: 36px; max-width: 920px; margin: 0 auto; align-items: start; }
.contact-grid textarea { resize: vertical; min-height: 140px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 14px; width: 100%; line-height: 1.5; transition: border-color 0.2s; }
.contact-grid textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.char-count { display: block; text-align: right; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.char-count.warn { color: var(--warning-ink); }
.btn-full { width: 100%; padding: 14px 24px; font-size: 15px; }

/* Success */
.contact-success { text-align: center; padding: 48px 24px; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #3B82F6, #2563EB); color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(37,99,235,0.25); }
.contact-success h2 { font-size: 1.5rem; margin-bottom: 12px; }
.contact-success p { color: var(--text-muted); margin-bottom: 28px; line-height: 1.6; max-width: 380px; margin-left: auto; margin-right: auto; }

/* Sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: 12px; }

/* Info Cards */
.contact-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-card:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 4px 16px rgba(37,99,235,0.06); }

.contact-card-icon {
    width: 44px; height: 44px; min-width: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.contact-card-icon.email-icon { background: rgba(37,99,235,0.1); color: var(--primary-ink); }
.contact-card-icon.time-icon { background: rgba(245,158,11,0.1); color: #f59e0b; }
.contact-card-icon.topics-icon { background: rgba(37,99,235,0.1); color: var(--success); }

.contact-card-content { flex: 1; min-width: 0; }
.contact-card-content h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }

.contact-card-link {
    color: var(--primary-ink); text-decoration: none; font-size: 15px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.contact-card-link:hover { text-decoration: underline; }

.contact-card-badge {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    /* 2,95:1 avant : teinte ambre portant du texte → jetons (6,35:1). */
    background: var(--tint-amber); color: var(--tint-amber-ink); font-size: 13px; font-weight: 600;
}

/* Topics List */
.contact-card-topics { flex-direction: column; gap: 12px; }
.contact-card-topics .contact-card-icon { margin-bottom: -4px; }
.contact-topics-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-topics-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--text-muted);
    padding: 6px 10px; border-radius: 8px;
    background: var(--bg-input); transition: background 0.15s;
}
.contact-topics-list li:hover { background: rgba(37,99,235,0.05); }
.contact-topics-list li svg { color: var(--primary-ink); min-width: 14px; }

/* Trust Badge */
.contact-trust {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-radius: var(--radius);
    background: rgba(37,99,235,0.05); border: 1px solid rgba(37,99,235,0.15);
    margin-top: 4px;
}
.contact-trust svg { color: var(--success); min-width: 16px; }
.contact-trust span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-sidebar { order: -1; }
    .contact-header h1 { font-size: 1.6rem; }
}

/* =============================================
   BLOG
   ============================================= */

/* Blog Section (listing page) — White theme */
.blog-section { padding: 100px 0 60px; background: var(--bg); color: var(--text); }
.blog-header { text-align: center; margin-bottom: 48px; }
.blog-header h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.blog-subtitle { color: var(--text-muted); font-size: 1.1rem; }

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.blog-grid-home {
    grid-template-columns: repeat(4, 1fr);
}
.blog-grid-related {
    grid-template-columns: repeat(3, 1fr);
}

/* Blog Card — White theme */
.blog-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.blog-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.blog-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-input);
}
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}
.blog-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(124,58,237,0.06));
}
.blog-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.blog-card-tag {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(37, 99, 235, 0.08);
    color: #1D4ED8;
}
[data-theme="dark"] .blog-card-tag, [data-theme="dark"] .blog-post-tags .blog-card-tag { color: #93C5FD; }
.blog-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-excerpt {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}
.blog-card-excerpt p { margin: 0; }
.blog-card-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: auto;
}
.blog-card-sm .blog-card-title { font-size: 0.95rem; }

/* Blog Empty */
.blog-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 60px 20px;
    font-size: 1.1rem;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}
.blog-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.blog-page-btn:hover { border-color: var(--primary); background: rgba(37,99,235,0.06); }
.blog-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    cursor: default;
}
.blog-page-dots { color: var(--text-muted); padding: 0 4px; }

/* Blog Post (single article) — White theme */
/* ===== Page d'un article de blog =====
   Lecture longue : corps en serif (Lora) pour le confort, interface en Manrope.
   Le bleu de marque ne sert qu'à l'action et aux états actifs — aucun aplat. */
.blog-post-section { padding: 92px 0 60px; background: var(--bg); color: var(--text); }
.blog-article { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.blog-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-muted-strong); text-decoration: none;
    font-size: 0.875rem; font-weight: 700; margin-bottom: 16px;
    transition: color var(--transition);
}
.blog-back-link:hover { color: var(--primary-ink); }

.blog-post-tags { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.blog-post-tags .blog-card-tag {
    height: 26px; padding: 0 11px; border-radius: 99px;
    background: rgba(37,99,235,0.10); color: #1D4ED8;
    border: none; font-size: 0.75rem; font-weight: 800;
    display: inline-flex; align-items: center;
}
.blog-post-tags .blog-card-tag ~ .blog-card-tag {
    background: var(--surface-2); color: var(--text-muted-strong); border: 1px solid var(--border);
}

.blog-post-title {
    font-size: 1.82rem; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.03em; margin: 0; color: var(--text);
}
.blog-post-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    color: var(--text-muted-strong); font-size: 0.875rem; font-weight: 500;
    margin: 16px 0 0; padding: 0; border: 0;
}
.blog-post-author { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.blog-post-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; font-size: 0.8rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.blog-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }

.blog-post-hero-img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: 16px; margin: 20px 0 0; display: block;
}

/* --- Structure : sommaire + partage à gauche (ordinateur), linéaire (mobile) --- */
.blog-body { display: flex; flex-direction: column; margin-top: 24px; }
.blog-aside { display: contents; }
.blog-toc { order: 1; }
.blog-main { order: 2; min-width: 0; }
.blog-share { order: 3; }
.blog-related { order: 4; }
.blog-strip { order: 5; }

/* --- Sommaire --- */
.blog-toc {
    margin: 0 0 24px; padding: 16px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.blog-toc-title {
    margin: 0 0 12px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em;
    color: var(--text-muted); text-transform: uppercase;
}
.blog-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.blog-toc-list a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 9px; text-decoration: none; transition: background var(--transition);
}
.blog-toc-list a:hover { background: var(--hover-overlay); }
.blog-toc-num { width: 22px; flex-shrink: 0; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); }
.blog-toc-label { font-size: 0.875rem; font-weight: 600; color: var(--text-muted-strong); line-height: 1.35; }
.blog-toc-list a[aria-current="true"] { background: rgba(37,99,235,0.08); }
.blog-toc-list a[aria-current="true"] .blog-toc-num,
.blog-toc-list a[aria-current="true"] .blog-toc-label { color: var(--primary-ink); font-weight: 800; }

/* --- Corps de l'article (HTML WordPress) --- */
.blog-post-content { color: var(--text); }
.blog-post-content p,
.blog-post-content li {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem; line-height: 1.72; color: var(--prose-ink);
}
.blog-post-content p { margin: 0 0 18px; }
.blog-post-content h2 {
    font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
    color: var(--text); margin: 38px 0 14px; scroll-margin-top: 84px;
}
.blog-post-content h3 { font-size: 1.125rem; font-weight: 800; color: var(--text); margin: 26px 0 10px; }
.blog-post-content strong { font-weight: 700; color: var(--text); }
.blog-post-content a {
    color: var(--primary-ink); text-decoration: none; font-weight: 500;
    border-bottom: 1px solid rgba(37,99,235,0.35);
}
.blog-post-content a:hover { border-bottom-color: var(--primary); }
.blog-post-content ul, .blog-post-content ol {
    margin: 0 0 18px; padding-left: 4px; list-style: none;
    display: flex; flex-direction: column; gap: 10px;
}
.blog-post-content li { display: flex; gap: 11px; align-items: flex-start; }
.blog-post-content li::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary); margin-top: 11px; flex-shrink: 0;
}
.blog-post-content ol { counter-reset: kli; }
.blog-post-content ol li { counter-increment: kli; }
.blog-post-content ol li::before {
    content: counter(kli); width: auto; height: auto; border-radius: 0; background: none;
    color: var(--primary-ink); font-family: var(--font); font-weight: 800; font-size: 0.9rem; margin-top: 3px;
}
.blog-post-content blockquote {
    margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--primary);
    font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 500;
    font-size: 1.1875rem; line-height: 1.5; color: var(--text);
}
.blog-post-content blockquote p { font-size: inherit; font-style: inherit; color: inherit; margin: 0; }
.blog-post-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 24px 0; }
.blog-post-content figure { margin: 24px 0; }
.blog-post-content figcaption {
    margin-top: 8px; font-size: 0.85rem; color: var(--text-muted); text-align: center;
}
.blog-post-content pre {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; overflow-x: auto; margin: 0 0 18px;
}
.blog-post-content code { font-size: 0.9rem; }

/* Tableaux comparatifs : encadrés, défilement horizontal contenu (jamais la page) */
.blog-table-wrap {
    margin: 8px 0 22px; border-radius: 14px; border: 1px solid var(--border);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.blog-table-wrap > table {
    border-collapse: collapse; width: 100%; min-width: 460px; margin: 0;
    display: table; overflow: visible;
}
.blog-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-post-content th {
    text-align: left; padding: 12px 14px; font-size: 0.8125rem; font-weight: 800;
    color: var(--text-muted-strong); white-space: nowrap;
    border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.blog-post-content td {
    padding: 12px 14px; font-size: 0.875rem; font-weight: 500; color: var(--text);
    border-bottom: 1px solid var(--border); font-family: var(--font);
}
.blog-post-content tbody tr:last-child td { border-bottom: 0; }
.blog-post-content tbody td:first-child { font-weight: 800; color: var(--primary-ink); }

/* FAQ (details/summary de WordPress) : cartes repliables */
.blog-post-content details {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-sm); overflow: hidden; margin: 0 0 10px;
}
.blog-post-content summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; cursor: pointer; list-style: none;
    font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--text);
}
.blog-post-content summary::-webkit-details-marker { display: none; }
.blog-post-content summary::after {
    content: ""; flex-shrink: 0; width: 10px; height: 10px;
    border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--transition);
}
.blog-post-content details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.blog-post-content details > *:not(summary) {
    margin: 0; padding: 0 18px 18px; font-family: var(--font); font-size: 0.9375rem;
    line-height: 1.6; color: var(--text-muted-strong); font-weight: 500;
}

/* --- Mise en avant de l'outil (3 densités + rappel mobile) --- */
.kcta { font-family: var(--font); }
.kcta-ic {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,0.10); color: #1D4ED8;
}
.kcta-ic--solid {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,0.30);
}
.kcta-ic--lg { width: 54px; height: 54px; border-radius: 15px; }
.kcta-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kcta-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted-strong); }
.kcta-title { font-size: 1rem; font-weight: 800; color: var(--text); line-height: 1.25; }
.kcta-sub { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted-strong); margin-top: 2px; }
.kcta-btn {
    height: 44px; padding: 0 18px; border-radius: 11px; flex-shrink: 0;
    background: var(--primary); color: #fff; font-size: 0.875rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    box-shadow: 0 4px 12px rgba(37,99,235,0.28);
    transition: background var(--transition), transform var(--transition);
}
.kcta-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.kcta-btn:active { transform: translateY(0); background: var(--primary-pressed); }
.kcta-btn svg { transition: transform var(--transition); }
.kcta-btn:hover svg { transform: translateX(3px); }

.kcta--top {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 22px 0 0; padding: 16px; border-radius: 14px;
    background: rgba(37,99,235,0.05); border: 1px solid rgba(37,99,235,0.28);
    box-shadow: var(--shadow-sm);
}
.kcta--top .kcta-btn { width: 100%; height: 48px; font-size: 0.9375rem; }

.kcta--mid {
    display: flex; align-items: center; gap: 13px; margin: 28px 0;
    padding: 14px 16px; border-radius: 14px; text-decoration: none;
    background: var(--bg-card); border: 1px solid var(--border);
    border-left: 3px solid var(--primary); box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.kcta--mid:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kcta--mid .kcta-title { font-size: 0.875rem; }
.kcta-arrow {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,0.10); color: #1D4ED8;
}
.kcta--mid:hover .kcta-arrow svg { transform: translateX(3px); }
.kcta-arrow svg { transition: transform var(--transition); }

.kcta--end {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    margin: 32px 0 0; padding: 22px 20px; border-radius: 18px;
    background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.kcta--end .kcta-ic { margin-bottom: 14px; }
.kcta-h { margin: 0; font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.kcta-benefit {
    margin: 8px auto 0; max-width: 440px; font-size: 0.9375rem; font-weight: 500;
    line-height: 1.5; color: var(--text-muted-strong);
}
.kcta-end-row { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 18px; }
.kcta-drop {
    display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
    border-radius: 12px; background: var(--surface-2);
    border: 2px dashed var(--border-strong); color: var(--text-muted);
    font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.kcta-btn--lg { height: 52px; font-size: 1rem; padding: 0 24px; }
.kcta--end .kcta-btn--lg { width: 100%; }

/* Rappel d'action persistant (mobile) : révélé au défilement, jamais au-dessus du texte */
.kcta-sticky {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); font-family: var(--font);
    animation: kctaUp 0.25s ease;
}
.kcta-sticky .kcta-ic { width: 34px; height: 34px; border-radius: 10px; }
.kcta-sticky .kcta-btn { height: 38px; padding: 0 15px; }
.kcta-sticky-label {
    flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kcta-sticky[hidden] { display: none; }
@keyframes kctaUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kcta-sticky { animation: none; } }

/* --- Partage --- */
.blog-share {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 28px 0; padding: 0; border: 0;
}
.blog-share-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-muted-strong); margin-right: 2px; }
.blog-share-btn {
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted-strong);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.blog-share-btn:hover { border-color: var(--primary); color: var(--primary-ink); }
.blog-share-btn svg { width: 18px; height: 18px; }
.blog-share-btn--copied { color: var(--success); border-color: rgba(37,99,235,0.4); background: rgba(37,99,235,0.12); }

/* --- Articles similaires --- */
.blog-related { margin: 40px 0 0; padding-top: 32px; border-top: 1px solid var(--border); }
.blog-related h2 {
    margin: 0 0 18px; font-size: 1.25rem; font-weight: 800;
    letter-spacing: -0.02em; color: var(--text);
}
.blog-grid-related { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* --- Bande « Découvrir les outils » --- */
.blog-strip {
    margin: 36px 0 0; padding: 20px; border-radius: 16px;
    background: var(--surface-2); border: 1px solid var(--border);
}
.blog-strip-title {
    margin: 0 0 14px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em;
    color: var(--text-muted); text-transform: uppercase;
}
.blog-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.blog-strip-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 8px; border-radius: 12px; text-decoration: none;
    background: var(--bg-card); border: 1px solid var(--border);
    transition: border-color var(--transition), transform var(--transition);
}
.blog-strip-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.blog-strip-ic {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(37,99,235,0.10); color: #1D4ED8;
    display: flex; align-items: center; justify-content: center;
}
.blog-strip-name { font-size: 0.8125rem; font-weight: 700; color: var(--text); text-align: center; }

/* --- Ordinateur : sommaire + partage collés à gauche, article à droite --- */
@media (min-width: 900px) {
    .blog-post-title { font-size: 2.5rem; }
    .blog-post-hero-img { aspect-ratio: 21 / 9; }
    .blog-post-content p, .blog-post-content li { font-size: 1.125rem; line-height: 1.75; }
    .blog-post-content h2 { font-size: 1.625rem; }
    .blog-post-content h3 { font-size: 1.25rem; }

    .blog-body {
        display: grid; grid-template-columns: 260px 1fr; gap: 40px;
        align-items: start; margin-top: 28px;
    }
    .blog-aside { display: block; position: sticky; top: 84px; grid-column: 1; grid-row: 1 / span 3; }
    .blog-main { grid-column: 2; grid-row: 1; }
    .blog-related { grid-column: 2; grid-row: 2; }
    .blog-strip { grid-column: 2; grid-row: 3; }
    .blog-toc { margin-bottom: 20px; padding: 18px 20px; }
    .blog-share { margin: 0; gap: 7px; }
    .blog-aside .blog-share-label { width: 100%; margin: 0 0 4px; }

    .kcta--top { flex-wrap: nowrap; padding: 18px 20px; }
    .kcta--top .kcta-btn { width: auto; height: 44px; }
    .kcta--end { padding: 26px; }
    .kcta-h { font-size: 1.5rem; }
    .kcta-benefit { font-size: 1rem; }
    .kcta-end-row { flex-direction: row; }
    .kcta-drop { flex: 1; }
    .kcta--end .kcta-btn--lg { width: auto; }
    .kcta-sticky { display: none; }

    .blog-grid-related { grid-template-columns: repeat(3, 1fr); }
    .blog-strip { padding: 24px; }
    .blog-strip-grid { grid-template-columns: repeat(6, 1fr); }
}
/* Blog Home Section */
.blog-home-section {
    padding: 80px 0;
    background: var(--bg-secondary);
}
.blog-home-section h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.blog-home-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 40px;
}
.blog-home-cta {
    text-align: center;
    margin-top: 36px;
}

/* === Hero Feature Quick Links === */
.hero-features {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.hero-feature-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: border-color var(--transition), background var(--transition);
}
.hero-feature-link:hover {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.08);
}
.hero-feature-icon {
    font-size: 1rem;
}
.hero-feature-text {
    font-weight: 500;
}
@media (max-width: 768px) {
    .hero-features {
        gap: 12px;
    }
    .hero-feature-link {
        padding: 8px 14px;
        font-size: 0.8rem;
        border-radius: 12px;
    }
}
@media (max-width: 480px) {
    .hero-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-feature-link {
        justify-content: center;
    }
}

/* === Feature Landing Pages === */
.feature-hero {
    padding: 100px 0 60px;
    text-align: center;
    background: linear-gradient(180deg, rgba(37,99,235,0.08) 0%, transparent 100%);
}
/* Hauteur RÉSERVÉE pour l'espace de travail : elle évite que la page saute en
   passant de dépôt à réglages, puis à traitement et à résultat.

   Elle ne vaut QUE pendant le travail. Au repos — la vue publique, la première
   qu'on découvre — le contenu ne mesure que 410 px : la réservation ouvrait donc
   270 px de vide sous la zone de dépôt, à l'identique sur TOUTES les pages-outils
   (mesuré : conteneur 680, grille 410, sur video-resizer comme sur extract-audio).
   Ce n'était pas un défaut d'image : le vide est exactement l'écart entre la
   hauteur réservée et le contenu.

   Le saut qui subsiste au premier dépôt suit une action de la personne, et ne
   compte donc pas comme instabilité de mise en page. */
.feature-hero.tool-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
body.tool-engaged .feature-hero.tool-hero .container { min-height: 680px; }
@media (max-width: 768px) {
    body.tool-engaged .feature-hero.tool-hero .container { min-height: 645px; }
}
.feature-hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.feature-hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 36px;
    line-height: 1.7;
}
.feature-hero .upload-hero {
    /* AUCUNE largeur maximale : l'entrée de l'outil occupe tout le conteneur,
       sur téléphone comme sur grand écran (consigne du design « Accueil Outil
       Gabarit »). Un bloc étroit centré dans le vide gaspillait la place et
       tassait les deux chemins l'un sur l'autre. */
    max-width: none;
    margin: 32px auto 0;
}
/* Tool pages: the action field must be visible WITHOUT scrolling, and the design
   is a calm neutral surface (no brand-color wash — color is functional, never
   decorative, per the Klipa design system). Typography scale and spacing below
   are ported from the validated Claude Design screen ("Accueil Outil"). */
/* NUIT — le bloc supérieur de la maquette : fond #070B14 balayé par deux halos
   de projecteur bleus. Valeurs copiées telles quelles de la maquette
   (docs/etude-accueil-conversion/outils-maquettes/video-compressor-src.html, .hero).
   PAS d'`overflow:hidden` ici, contrairement à la maquette : la barre de travail
   de l'atelier est `position:sticky` DANS ce héros, et un ancêtre qui rogne
   annule le collage. Les halos sont peints par ::before, donc ils ne débordent
   pas de toute façon. */
.feature-hero.tool-hero {
    padding: 56px 0 48px;
    position: relative;
    background: var(--night, #070B14);
    color: #E8EDF7;
}
.feature-hero.tool-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 640px at 18% -18%, rgba(37,99,235,.34), transparent 62%),
        radial-gradient(700px 460px at 88% 112%, rgba(37,99,235,.14), transparent 60%);
}
/* :not(.klsheet-ov) — la feuille de téléchargement vit à la racine de cette
   section, et ce sélecteur (deux classes) battait son `position: fixed` (une
   classe) : la feuille retombait dans le flux, tout en bas de page, coupée par
   le bord de l'écran — précisément au moment de payer (constat du 18/08/2026).
   L'exclusion règle la collision à sa source, sans !important ni surenchère. */
.feature-hero.tool-hero > *:not(.klsheet-ov) { position: relative; }
.feature-hero.tool-hero .feature-hero-title {
    font-size: 2.875rem; /* 46px */
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: 14px;
}
.feature-hero.tool-hero .feature-hero-subtitle {
    font-size: 1.19rem; /* 19px */
    font-weight: 500;
    margin: 0 auto 18px;
    line-height: 1.5;
}
.tool-compat-notice {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 560px;
    margin: -10px auto 18px;
    line-height: 1.5;
}
.feature-hero.tool-hero .upload-hero { margin-top: 14px; }
@media (max-width: 768px) {
    .feature-hero.tool-hero { padding: 20px 0 28px; }
    .feature-hero.tool-hero .feature-hero-title { font-size: 2rem; /* 32px */ letter-spacing: -0.03em; margin-bottom: 8px; }
    .feature-hero.tool-hero .feature-hero-subtitle { font-size: 1rem; /* 16px */ margin-bottom: 14px; line-height: 1.45; }
}
/* Feature Details */
/* Feature Use Cases */
/* Feature Differentiators */
/* Feature FAQ */
/* Feature Blog */
/* Feature Final CTA */
/* Feature cross-links */
/* === Demo Preview Gate === */
.demo-gate-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(139,92,246,0.12));
    border: 1px solid rgba(37,99,235,0.3);
    border-radius: var(--radius);
}
.demo-gate-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,0.2);
    border-radius: 50%;
    color: var(--primary-ink);
}
.demo-gate-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.demo-gate-text strong {
    font-size: 1.1rem;
    color: var(--text);
}
.demo-gate-text span {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Blur on locked panels in demo mode */
.demo-locked {
    position: relative;
    pointer-events: none;
    user-select: none;
}
.demo-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: var(--radius);
    z-index: 5;
}

/* Demo signup modal */
.demo-signup-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    width: 420px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}
.demo-signup-header {
    text-align: center;
    margin-bottom: 20px;
}
.demo-signup-header svg {
    margin-bottom: 8px;
}
.demo-signup-header strong {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 6px;
}
.demo-signup-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}
.demo-signup-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: var(--bg);
    border-radius: 8px;
    padding: 3px;
}
.demo-signup-toggle button {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.demo-signup-toggle button.active {
    background: var(--primary);
    color: #fff;
}
.demo-signup-error {
    color: #ef4444;
    font-size: 0.85rem;
    margin-bottom: 12px;
    text-align: center;
}
.demo-signup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.demo-signup-form input[type="text"],
.demo-signup-form input[type="email"],
.demo-signup-form input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
    box-sizing: border-box;
}
.demo-signup-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

@media (max-width: 768px) {
    .demo-gate-banner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .demo-signup-modal {
        padding: 24px 20px;
    }
}

@media (max-width: 768px) {
    .feature-hero { padding: 80px 0 40px; }
    .feature-hero-title { font-size: 1.8rem; }
    .feature-hero-subtitle { font-size: 1rem; }
    }

/* Blog Responsive */
@media (max-width: 1024px) {
    .blog-grid-home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .blog-grid-home { grid-template-columns: repeat(2, 1fr); }
    .blog-grid-related { grid-template-columns: 1fr; }
    .blog-header h1 { font-size: 1.7rem; }
    .blog-post-title { font-size: 1.6rem; }
    .blog-post-content { font-size: 1rem; }
    .blog-section { padding: 80px 0 40px; }
    .blog-post-section { padding: 80px 0 40px; }
}
@media (max-width: 480px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-grid-home { grid-template-columns: 1fr; }
    .blog-post-title { font-size: 1.4rem; }
    .blog-post-meta { gap: 12px; font-size: 0.85rem; }
}

/* === Demo Video Section === */
.demo-video-section {
    padding: 80px 0;
    text-align: center;
}
.demo-video-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.demo-video-sub {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 40px;
}
.demo-video-wrapper {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.2);
}
.demo-video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 768px) {
    .demo-video-section { padding: 48px 0; }
    .demo-video-wrapper { border-radius: 12px; margin: 0 16px; }
}

/* === Guarantee Badge === */
.guarantee-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px auto 0;
    padding: 12px 20px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 8px;
    max-width: 480px;
}
.guarantee-badge svg { color: var(--success); flex-shrink: 0; }
.guarantee-badge span { font-size: 14px; color: #374151; font-weight: 500; }
.guarantee-badge a { font-size: 13px; color: #2563EB; text-decoration: underline; white-space: nowrap; }

/* === Quota Banner === */
.quota-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: #f0f7ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    margin-bottom: 20px;
}
.quota-info { flex: 1; }
.quota-text { font-size: 14px; color: #374151; font-weight: 500; display: block; margin-bottom: 6px; }
.quota-text-sub { font-size: 12px; color: #6b7280; display: block; margin-top: 4px; }
.quota-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.quota-fill { height: 100%; background: #2563EB; border-radius: 3px; transition: width 0.3s; }
.quota-fill.quota-warning { background: #f59e0b; }

/* === CGU Checkbox === */
.cgu-checkbox { margin-top: 4px; }
.cgu-checkbox .checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #6b7280; cursor: pointer; }
.cgu-checkbox .checkbox-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.cgu-checkbox .checkbox-label a { color: #2563EB; text-decoration: underline; }
.google-cgu-note { font-size: 11px; color: #9ca3af; text-align: center; margin: 6px 0 0; }

/* === Cookie Consent Banner === */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1f2937;
    border-top: 1px solid #374151;
    padding: 16px 24px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
}
.cookie-banner-content {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cookie-banner-content p {
    flex: 1;
    min-width: 200px;
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.cookie-link {
    color: #93c5fd;
    font-size: 13px;
    text-decoration: underline;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .cookie-banner-content { flex-direction: column; text-align: center; }
    .cookie-banner-actions { justify-content: center; }
}

/* === Standalone Tool Pages === */
.tool-hero { padding: 60px 0 40px; text-align: center; }
.tool-hero h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; line-height: 1.2; }
.tool-hero .tool-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto 32px; }

/* Tool options row */
.tool-options { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.tool-option-btn {
    padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all var(--transition);
    font-size: 14px; font-weight: 600;
}
.tool-option-btn:hover { border-color: var(--primary); color: var(--text); }
.tool-option-btn.active { border-color: var(--primary); background: rgba(37,99,235,0.15); color: var(--primary-ink); }
.tool-option-desc { font-size: 12px; color: var(--text-muted); display: block; font-weight: 400; margin-top: 2px; }

/* ===== Tool Options Panel — peau Projection (nuit fixe) =====
   Étape RÉGLAGES du pipeline atelier : même parti pris que le dépôt et le
   chrome — panneau nuit (var(--night-2) de projection.css, déjà lié par
   partials/head.html) quel que soit le thème du site, cartes de choix
   « lumière bleue » à la sélection (.opt-card de la maquette validée). */
.tool-options-panel {
    max-width: 660px; margin: 0 auto; padding: 0; width: 100%;
    background: var(--night-2, #0C1322); border: 1px solid var(--line-d, rgba(77,130,243,.14)); border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* File badge — glass-style top bar */
.options-file-badge {
    display: flex; align-items: center; gap: 14px; padding: 18px 28px;
    background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.1));
    border-bottom: 1px solid var(--line-d, rgba(77,130,243,.14)); position: relative;
}
.options-file-badge::after {
    content: ''; position: absolute; bottom: -1px; left: 28px; right: 28px; height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; opacity: 0.4;
}
.options-file-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0; color: #fff;
}
.options-file-info { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; flex: 1; }
.options-file-name { font-weight: 700; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.options-file-meta { font-size: 13px; color: var(--muted-d, #94A3BE); display: flex; gap: 6px; align-items: center; }
.options-file-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* Section title */
.options-section-title {
    font-size: 20px; font-weight: 800; color: #fff; text-align: center;
    padding: 28px 28px 4px; margin: 0; letter-spacing: -0.02em;
}

/* Options content area */
.options-choices { padding: 12px 28px 28px; text-align: center; }

/* Hint text */
.options-hint {
    font-size: 14px; color: var(--muted-d, #94A3BE); margin-bottom: 20px; line-height: 1.6;
    max-width: 500px; margin-left: auto; margin-right: auto;
}

/* ---- Option Cards — rich selectable choices (.opt-card de la maquette) ---- */
.options-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.option-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 22px; border-radius: 14px; border: 2px solid var(--line-d, rgba(77,130,243,.14));
    background: var(--night-2, #0C1322); cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1);
    min-width: 130px; text-align: center; position: relative; flex: 1;
}
.option-card:hover {
    border-color: var(--beam-bright, #4D82F3); transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37,99,235,0.25);
}
.option-card.selected {
    border-color: var(--beam-bright, #4D82F3); background: rgba(37,99,235,0.14);
    box-shadow: 0 0 0 2px var(--beam-bright, #4D82F3), 0 0 26px rgba(37,99,235,0.25);
}
/* No pseudo-element checkmark — use border glow only for selection indicator */
.option-card strong { font-size: 16px; font-weight: 800; color: #fff; }
.option-card span { font-size: 12px; color: var(--muted-d, #94A3BE); line-height: 1.5; }

/* ---- Start button — gradient CTA ---- */
/* ---- Next step hint (before CTA) ---- */
.next-step-hint {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 8px 24px 16px; padding: 14px 18px;
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(139,92,246,0.06));
    border: 1px solid rgba(37,99,235,0.15); border-radius: 12px;
    font-size: 13px; line-height: 1.5; color: var(--text-muted); text-align: left;
}
.next-step-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
[data-theme="dark"] .next-step-hint {
    background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.2);
}

.options-start-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 0; padding: 18px 32px; width: 100%; border: none; border-top: 1px solid var(--line-d, rgba(77,130,243,.14));
    /* Bleu PLEIN, jamais un dégradé bleu→violet : design-foundations §6 —
       « le bleu est la couleur d'action, un point » ; le violet reste réservé
       au signal premium, en petite touche. */
    background: var(--primary);
    color: #fff; font-size: 17px; font-weight: 800; cursor: pointer;
    transition: all 0.3s; border-radius: 0 0 20px 20px; letter-spacing: -0.01em;
}
.options-start-btn:hover { background: var(--primary-hover); box-shadow: 0 4px 20px rgba(37,99,235,0.3); }
.options-start-btn:active { background: var(--primary-pressed); }
/* Play icon added via JS/text, not pseudo-element (x-cloak compat) */

/* ---- Form Groups — structured option blocks ---- */
.form-group {
    text-align: left; margin-bottom: 20px;
    background: transparent; border: none; border-radius: 14px; padding: 16px 18px;
}
.form-group label {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px;
}
.form-group .options-hint { margin-bottom: 0; margin-top: 8px; font-size: 12px; text-align: left; }

/* ---- Range Inputs — premium slider ---- */
.options-range-group { display: flex; gap: 14px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.range-field { display: flex; flex-direction: column; gap: 6px; text-align: left; flex: 1; min-width: 120px; }
.range-field label { font-size: 13px; color: var(--text-muted); font-weight: 700; }
/* Champs de réglage — MÊME défaut que l'éditeur de sous-titres : couleurs écrites
   en dur (fond #F8FAFC, trait #A0AEC0, texte #1E293B) doublées d'une variante
   `[data-theme="dark"]`. Or ces champs ne vivent QUE dans les écrans de réglages
   des outils (découpe, GIF, filigrane, clips), qui sont NUIT quel que soit le
   thème du site : la variante sombre ne s'appliquait donc jamais. Ils lisent
   désormais les jetons, comme le reste de l'atelier. */
.form-input-sm {
    width: 100%; padding: 14px 18px; border-radius: 12px;
    border: 1.5px solid var(--border-strong, var(--border)); background: var(--bg-input, #0f172a);
    color: var(--text-primary); font-size: 15px; font-weight: 600;
    transition: border-color .2s, box-shadow .2s; text-align: center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.form-input-sm:focus { border-color: var(--beam-bright, #4D82F3); outline: none;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(37,99,235,.28); }
.form-input-sm::placeholder { color: var(--text-muted); font-weight: 400; opacity: 0.6; }
.range-info { font-size: 14px; color: var(--text-muted); padding-bottom: 8px; }

/* Custom slider */
.options-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 8px 0;
    background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 8px; outline: none;
    opacity: 0.8; transition: opacity 0.2s;
}
.options-slider:hover { opacity: 1; }
.options-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 3px solid var(--primary); cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s;
}
.options-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.options-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    border: 3px solid var(--primary); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.speed-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; }

/* ---- Select — premium dropdown ---- */
.form-select-sm {
    padding: 14px 18px; border-radius: 12px;
    border: 1.5px solid var(--border-strong, var(--border));
    background: var(--bg-input, #0f172a); color: var(--text-primary);
    font-size: 14px; font-weight: 600;
    width: 100%; transition: all 0.2s; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.form-select-sm:focus { border-color: var(--beam-bright, #4D82F3); outline: none;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(37,99,235,.28); }

/* ---- Color picker — styled ---- */
.form-color {
    width: 52px; height: 44px; border: 2px solid var(--border); border-radius: 12px;
    cursor: pointer; padding: 4px; background: var(--bg-card); transition: border-color 0.2s;
}
.form-color:hover { border-color: var(--primary); }

/* ---- Checkbox — premium toggle switch ---- */
.checkbox-label {
    display: flex; align-items: flex-start; gap: 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text);
    padding: 14px 18px; background: transparent; border: none; border-radius: 12px;
    transition: all 0.2s; margin-bottom: 0;
}
.checkbox-label > div { flex: 1; min-width: 0; padding-top: 2px; text-align: left; }
.checkbox-label > div > span { display: block; line-height: 1.4; }
.checkbox-label input[type="checkbox"] {
    position: relative; width: 48px; height: 26px; min-width: 48px;
    -webkit-appearance: none; appearance: none;
    background: #cbd5e1; border-radius: 26px; border: none;
    cursor: pointer; transition: background 0.3s ease; flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    margin-top: 0;
}
.checkbox-label input[type="checkbox"]::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.checkbox-label input[type="checkbox"]:checked {
    background: var(--primary);
}
.checkbox-label input[type="checkbox"]:checked::after {
    transform: translateX(22px);
}
[data-theme="dark"] .checkbox-label input[type="checkbox"] {
    background: #475569;
}
[data-theme="dark"] .checkbox-label input[type="checkbox"]:checked {
    background: var(--primary);
}
.checkbox-label .options-hint { color: var(--muted-d, #94A3BE); font-weight: 400; font-size: 12px; line-height: 1.4; }

/* ---- Extended cards ---- */
.options-cards-wrap { flex-wrap: wrap; max-width: 100%; }
.option-card-sm { min-width: 80px; padding: 12px 14px; }
.option-card-sm strong { font-size: 13px; }
.option-card-xs { min-width: 65px; padding: 10px 12px; border-radius: 10px; }
.option-card-xs span { font-size: 12px; }
.options-cards-mini { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Layout helpers ---- */
.options-row { display: flex; gap: 16px; flex-wrap: wrap; }
.option-field { display: flex; flex-direction: column; gap: 8px; min-width: 120px; flex: 1; text-align: left; }
.option-field label { font-size: 13px; color: var(--text-muted); font-weight: 700; }

/* ---- Options card (grouped sections) ---- */
.options-card {
    background: var(--bg); border-radius: 14px; padding: 18px 20px;
    border: 1px solid var(--border); text-align: left; margin-top: 12px;
}

/* ---- Advanced toggle ---- */
.btn-advanced-toggle {
    font-size: 14px; color: var(--text-muted); cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 8px; font-weight: 600;
    padding: 12px 16px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; width: 100%;
}
.btn-advanced-toggle:hover { color: var(--text); border-color: var(--primary); background: rgba(37,99,235,0.03); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .tool-options-panel { border-radius: 14px; margin: 0 -4px; }
    .options-choices { padding: 12px 16px 20px; }
    .options-file-badge { padding: 14px 18px; gap: 12px; }
    .options-section-title { padding: 20px 18px 4px; font-size: 18px; }
    .option-card { min-width: 100px; padding: 14px 16px; flex: 1 1 calc(50% - 6px); }
    .options-row { flex-direction: column; }
    .form-group { padding: 14px 16px; }
    .options-start-btn { padding: 16px 24px; font-size: 16px; }
}

/* Tool result zone — ported from the validated Claude Design screen "Resultat".
   The header used to be a full-bleed primary/accent gradient (a large decorative
   color surface, against the design system's own "color is functional, never
   decorative" rule) — replaced with a plain card and a small functional green
   success dot, matching the rest of the site. */
.tool-result { text-align: center; padding: 32px 0; }

/* ---- Result Card ---- */
.result-card {
    max-width: 600px; margin: 0 auto 20px; background: transparent;
    overflow: visible; box-shadow: none;
}
.result-card-header { padding: 0 0 20px; text-align: center; }
.result-success-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(37,99,235,.12); display: inline-flex; align-items: center;
    justify-content: center; margin: 0 auto 10px;
}
.result-success-icon svg { width: 18px; height: 18px; stroke: var(--success); }
.result-card-header h3 { color: var(--text); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.result-card-filename {
    color: var(--text-muted); font-size: 14px; font-weight: 500;
    max-width: 300px; margin: 0 auto; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.result-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.result-stat-item {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 14px 12px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.result-stat-icon { color: var(--text-muted); }
.result-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.result-stat-value { font-size: 19px; font-weight: 800; color: var(--text); }
@media (max-width: 480px) {
    .result-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .result-card-header h3 { font-size: 20px; }
    .result-stat-value { font-size: 16px; }
}

.tool-result-stats {
    display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 24px 0;
}
.tool-result-stat {
    background: var(--bg-card); border-radius: var(--radius-sm); padding: 16px 24px;
    border: 1px solid var(--border);
}
.tool-result-stat strong { display: block; font-size: 1.4rem; color: var(--text); }
.tool-result-stat span { color: var(--text-muted); font-size: 13px; }
.tool-result-stat.saved strong { color: var(--success); }
.tool-download-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* Tool video player */
.tool-player { max-width: 640px; margin: 24px auto; border-radius: var(--radius); overflow: hidden; background: #000; }
.tool-player video { width: 100%; display: block; }
.tool-player audio { width: 100%; display: block; padding: 20px; }

/* WYSIWYG preview stage on the options step — same visual language as the Klipa player */
.wysiwyg-stage { position: relative; margin: 0 auto 18px; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 12px 32px rgba(15,23,42,.18); display: flex; align-items: center; justify-content: center; }
.wysiwyg-stage.wysiwyg-square { width: min(360px, 100%); aspect-ratio: 1 / 1; }
.wysiwyg-video { max-width: 86%; max-height: 86%; width: auto; height: auto; display: block; object-fit: contain; background: #000; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.rotate-dirs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rotate-dir { flex: 1; min-width: 120px; max-width: 190px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 12px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--bg-card); font: inherit; transition: border-color .15s, background .15s, box-shadow .15s, transform .08s; }
.rotate-dir:hover { border-color: var(--primary); background: rgba(124,58,237,.04); }
.rotate-dir:active { transform: scale(.96); border-color: var(--primary); background: rgba(124,58,237,.10); }
.rotate-dir svg { width: 30px; height: 30px; stroke: var(--primary-ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rotate-dir strong { font-size: 14px; color: var(--text); }
.rotate-dir span { font-size: 12px; color: var(--text-muted); }
.rotate-result { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: 14px; color: var(--text); }
.rotate-reset { border: 0; background: none; color: var(--primary-ink); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .wysiwyg-stage.wysiwyg-square { width: 260px; } .rotate-dir { min-width: 96px; padding: 11px 8px; } }

/* Aperçu unifié (player KP) en haut de l'écran d'options — même langage visuel partout */
/* `width` EXPLICITE : dans une colonne flex, une marge latérale `auto` annule
   l'étirement et l'élément se réduit à son contenu. L'aperçu ne tenait donc sa
   largeur que d'un bloc de texte voisin — en le retirant, toute la colonne
   tombait à zéro sur téléphone. La largeur ne doit dépendre d'aucun contenu. */
.tool-preview { position: relative; margin: 0 auto 20px; width: 100%; max-width: 100%; }
.tool-preview-stage { display: flex; justify-content: center; }
.tool-preview-stage .kp { margin: 0 auto; }
.tool-preview-note { margin: 12px auto 0; max-width: 460px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); text-align: center; }
/* Filigrane : aperçu du texte là où il sera réellement incrusté (bas-droite, comme le rendu serveur) */
.preview-wm { position: absolute; right: 22px; bottom: 58px; max-width: 70%; padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,.38); color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tool cut range inputs */
.tool-cut-controls { max-width: 500px; margin: 20px auto; text-align: left; }
.tool-cut-controls label { display: block; color: var(--text-muted); font-size: 13px; margin-bottom: 4px; font-weight: 600; }
.tool-cut-controls input[type="range"] { width: 100%; margin-bottom: 16px; }
.tool-cut-times { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 13px; }

/* Tool text input (watermark) */
.tool-text-input {
    max-width: 400px; margin: 20px auto; padding: 12px 16px;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 15px; width: 100%;
}
.tool-text-input:focus { border-color: var(--primary); outline: none; }

/* Tool speed slider */
.tool-speed-display { font-size: 2rem; font-weight: 800; color: var(--primary-ink); margin: 12px 0; }

/* Tool sections (how it works, benefits, FAQ) — reuse feature page styles */
.tool-steps { padding: 60px 0; background: var(--bg-card); }
.tool-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.tool-step-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px 24px; text-align: center;
}
.tool-step-number {
    display: inline-block; background: var(--primary); color: #fff; font-weight: 800;
    font-size: 14px; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
.tool-step-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.tool-benefits { padding: 60px 0; }
.tool-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.tool-benefit-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px; transition: border-color var(--transition);
}
.tool-benefit-card:hover { border-color: var(--primary); }
.tool-benefit-icon { font-size: 2rem; margin-bottom: 12px; }
.tool-benefit-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tool-benefit-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.tool-section-title { font-size: 1.6rem; font-weight: 800; text-align: center; }

/* Tool crosslinks */
.tool-crosslinks { padding: 60px 0; background: var(--bg-card); }
.tool-crosslinks-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 32px;
}
.tool-crosslink-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px 16px; text-decoration: none; color: var(--text); transition: all var(--transition);
    text-align: center; font-size: 14px; font-weight: 600;
}
.tool-crosslink-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.tool-crosslink-icon { font-size: 1.8rem; }

/* Tool final CTA */
.tool-final-cta { padding: 60px 0; text-align: center; }
.tool-final-cta h2 { font-size: 1.6rem; margin-bottom: 12px; }
.tool-final-cta p { color: var(--text-muted); margin-bottom: 24px; }

/* Tool banner (after download) */
.tool-upsell-banner {
    background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(124,58,237,0.15));
    border: 1px solid rgba(37,99,235,0.3); border-radius: var(--radius);
    padding: 24px; text-align: center; margin-top: 24px;
}
.tool-upsell-banner h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tool-upsell-banner p { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }

/* Tools Index Page */
.tools-index-hero { padding: 60px 0 20px; text-align: center; }
.tools-index-hero h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; }
.tools-index-subtitle { color: var(--text-muted); font-size: 1.1rem; }

.tools-index-grid { padding: 20px 0 60px; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tools-section-title { font-size: 1.4rem; font-weight: 800; text-align: center; }

.tool-badge-ai {
    position: absolute; top: 12px; right: 12px; background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 4px;
}
.tool-badge-free {
    position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 4px;
}
.tool-badge-pro {
    position: absolute; top: 12px; left: 12px; background: #f59e0b; color: #fff;
    font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 4px;
}

/* Subtitle converter */
.subtitle-options, .subtitle-done { padding: 32px 0; text-align: center; }
.subtitle-options-card, .subtitle-done-card {
    max-width: 500px; margin: 0 auto; background: var(--hover-overlay);
    border: 1px solid var(--subtle-border); border-radius: 16px; padding: 32px;
}
.subtitle-file-name { margin: 16px 0; color: #94a3b8; font-size: 14px; }
.subtitle-format-picker { margin: 24px 0; }
.subtitle-format-picker label { display: block; margin-bottom: 12px; font-weight: 600; }
.format-buttons { display: flex; gap: 12px; justify-content: center; }
.format-btn {
    padding: 10px 24px; border-radius: 8px; border: 2px solid var(--subtle-border);
    background: transparent; color: var(--text-muted); font-weight: 700; font-size: 15px;
    cursor: pointer; transition: all 0.2s;
}
.format-btn:hover { border-color: var(--text-muted); }
.format-btn.active { border-color: var(--accent, #818cf8); background: rgba(129,140,248,0.15); color: #fff; }
.subtitle-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
/* La coche de fin était un ÉMOJI ✅ — donc vert, que la charte proscrit, et
   rendu par la police du système : ni la teinte ni la forme n'étaient à nous.
   C'est désormais la même coche que partout ailleurs, dans le bleu d'action. */
.done-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: rgba(77, 130, 243, .20); color: var(--primary-ink); }
.done-icon svg { width: 28px; height: 28px; }

/* Mobile responsive for tools */
@media (max-width: 768px) {
    .tool-hero h1 { font-size: 1.5rem; }
    .tool-steps-grid { grid-template-columns: 1fr; }
    .tool-benefits-grid { grid-template-columns: 1fr; }
    .tools-grid { grid-template-columns: 1fr; }
    .tool-crosslinks-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-options { flex-direction: column; align-items: center; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === Compare Pages === */
.compare-page { padding: 40px 0 60px; }
.compare-hero { text-align: center; margin-bottom: 48px; }
.compare-hero-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; }
.compare-hero-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 640px; margin: 0 auto 24px; }
.compare-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.compare-section { margin-bottom: 48px; }
.compare-verdict-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.compare-verdict-card { background: var(--bg-card); border-radius: 12px; padding: 20px; border: 1px solid var(--border); }
.compare-verdict-cat { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.compare-verdict-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-verdict-cell { padding: 10px; border-radius: 8px; background: var(--hover-overlay); }
.compare-verdict-cell strong { display: block; margin-bottom: 4px; font-size: 0.85rem; }
.compare-verdict-cell p { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.compare-verdict-winner { background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.3); }
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.compare-table th { font-weight: 700; color: var(--text); background: var(--hover-overlay); }
.compare-table td:first-child { font-weight: 600; }
.compare-pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-pricing-card { background: var(--bg-card); padding: 32px; border-radius: 12px; border: 1px solid var(--border); }
.compare-pricing-card.highlight { border-color: var(--primary); box-shadow: 0 0 20px rgba(37,99,235,0.15); }
.compare-pricing-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.compare-pricing-price { font-size: 1.5rem; font-weight: 800; color: var(--primary-ink); margin-bottom: 12px; }
.compare-pricing-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; }
.compare-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.compare-diff-card { background: var(--bg-card); padding: 24px; border-radius: 12px; border: 1px solid var(--border); }
.compare-diff-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--primary-ink); }
.compare-diff-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }
.compare-choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-choose-card { background: var(--bg-card); padding: 28px; border-radius: 12px; border: 1px solid var(--border); }
.compare-choose-card.highlight { border-color: var(--primary); }
.compare-choose-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.compare-choose-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; }
.compare-cta-final { text-align: center; padding: 48px 24px; background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.12)); border-radius: 16px; margin-bottom: 48px; }
.compare-cta-final h2 { font-size: 1.5rem; margin-bottom: 12px; }
.compare-cta-final p { color: var(--text-muted); max-width: 600px; margin: 0 auto 24px; line-height: 1.6; }
.compare-siblings { text-align: center; }
.compare-siblings h3 { margin-bottom: 16px; font-size: 1rem; }
.compare-sibling-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.compare-sibling-link { display: inline-block; background: var(--bg-card); padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); font-size: 0.85rem; color: var(--text); text-decoration: none; transition: border-color 0.2s; }
.compare-sibling-link:hover { border-color: var(--primary); color: var(--primary-ink); }

/* === Use-Case Pages === */
.usecase-page { padding: 40px 0 60px; }
.usecase-hero { text-align: center; margin-bottom: 48px; }
.usecase-hero-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; }
.usecase-hero-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 640px; margin: 0 auto 24px; }
.usecase-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.usecase-section { margin-bottom: 48px; }
.usecase-pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.usecase-pain-card { background: var(--bg-card); padding: 24px; border-radius: 12px; border: 1px solid var(--border); text-align: center; }
.usecase-pain-icon { font-size: 2rem; margin-bottom: 12px; }
.usecase-pain-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.usecase-pain-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }
.usecase-workflow { max-width: 700px; margin: 0 auto; }
.usecase-workflow-step { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 28px; }
.usecase-step-number { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.usecase-step-content h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.usecase-step-content p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.usecase-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.usecase-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.usecase-stat-number { font-size: 2.2rem; font-weight: 800; color: var(--primary-ink); }
.usecase-stat-label { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }
.usecase-testimonial blockquote { background: var(--bg-card); border-left: 4px solid var(--primary); padding: 24px 28px; border-radius: 0 12px 12px 0; font-style: italic; }
.usecase-testimonial cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; font-size: 0.9rem; }
.usecase-cta-final { text-align: center; padding: 48px 24px; background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.12)); border-radius: 16px; margin-bottom: 48px; }
.usecase-cta-final h2 { font-size: 1.5rem; margin-bottom: 12px; }
.usecase-cta-final p { color: var(--text-muted); max-width: 600px; margin: 0 auto 24px; line-height: 1.6; }
.usecase-siblings { text-align: center; }
.usecase-siblings h3 { margin-bottom: 16px; font-size: 1rem; }
.usecase-sibling-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.usecase-sibling-link { display: inline-block; background: var(--bg-card); padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); font-size: 0.85rem; color: var(--text); text-decoration: none; transition: border-color 0.2s; }
.usecase-sibling-link:hover { border-color: var(--primary); color: var(--primary-ink); }

@media (max-width: 767px) {
    .compare-verdict-grid { grid-template-columns: 1fr; }
    .compare-pricing-cards { grid-template-columns: 1fr; }
    .compare-diff-grid { grid-template-columns: 1fr; }
    .compare-choose-grid { grid-template-columns: 1fr; }
    .compare-hero-title, .usecase-hero-title { font-size: 1.5rem; }
    .usecase-pain-grid { grid-template-columns: 1fr; }
    .usecase-tool-grid { grid-template-columns: repeat(2, 1fr); }
    .usecase-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === Theme Toggle === */
.theme-toggle {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px; cursor: pointer; color: var(--text-muted); display: flex;
    align-items: center; justify-content: center; transition: all var(--transition);
    position: relative; width: 32px; height: 32px; overflow: hidden;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.theme-icon-sun, .theme-icon-moon {
    position: absolute; transition: opacity 0.35s ease, transform 0.35s ease;
}
.theme-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
.theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="dark"] .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* === Logo Theme Switch === */
.logo-dark { display: none; }
.logo-light { display: inline-block; }
[data-theme="dark"] .logo-dark { display: inline-block; }
[data-theme="dark"] .logo-light { display: none; }

/* Hide reCAPTCHA badge */
.grecaptcha-badge { visibility: hidden !important; }

/* Per-clip action links */
.clip-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-ink);
    text-decoration: none;
    transition: all .15s;
    border: 1.5px solid var(--primary);
    background: rgba(37,99,235,.04);
    flex: 1;
    justify-content: center;
}
.clip-action-link:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}

/* Next step suggestions — was a bordered, gradient-filled box (a large decorative
   color surface); ported to a plain white card matching the rest of the result
   screen. Color stays on the primary CTA button only (functional, not decorative). */
.next-step-box {
    margin-top: 24px;
    text-align: center;
    /* Was implicitly clamped by the old 600px .result-inline cap — keep the
       same designed width now that the parent is full-width. */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.next-step-inner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}
.next-step-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.next-step-btn {
    width: 100%;
    max-width: 400px;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--radius) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow-md);
}
.lab-bridge { margin-bottom: 16px; }
.lab-bridge-sub { font-size: 13px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }
.lab-bridge-inline {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    text-align: center;
}
.lab-bridge-kicker {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary-ink);
    margin-bottom: 12px;
}

/* Featured optimizer hero on the homepage — REUSES the optimizer's OWN validated
   hero (lab.html) verbatim, scoped under .klipa-opt so its classes/vars can't leak. */
.klipa-opt{
    --bg:#EEF1F6;--surf:#fff;--surf2:#F1F5F9;
    --bd:#E2E8F0;--bd2:#CBD5E1;--tx:#1A1A2E;--dim:#64748B;--faint:#94A3B8;
    --ac:#7C3AED;--ac-tx:#5B21B6;--ac-bg:#F5F3FF;--ac-bd:#DDD6FE;--primary:#7C3AED;
    --ok-dot:#2563EB;--wn-dot:#F59E0B;--cr-dot:#EF4444;--inf-dot:#2563EB;
    font-family:'Inter',system-ui,'Segoe UI',Roboto,sans-serif;
    padding:30px 0 8px;
}
.klipa-opt .uprow{display:flex;flex-direction:column;gap:20px;align-items:stretch}
.klipa-opt .upmain{flex:1;min-width:0;background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:26px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.klipa-opt .upaside{width:100%;background:linear-gradient(160deg,#1E1B4B,#312E81);border-radius:16px;padding:26px;color:#fff;display:flex;flex-direction:column;gap:16px;justify-content:center}
@media(min-width:880px){.klipa-opt .uprow{flex-direction:row;gap:24px}.klipa-opt .upaside{width:300px;flex:none}.klipa-opt .upmain{padding:34px}}
.klipa-opt .kicker{font-size:13px;font-weight:600;color:var(--ac-tx);letter-spacing:.3px;margin-bottom:10px}
.klipa-opt .h1{font-family:'Inter';font-weight:700;font-size:clamp(28px,4.6vw,40px);line-height:1.08;letter-spacing:-.6px;margin:8px 0 14px;color:var(--tx)}
.klipa-opt .sg{font-family:'Inter',sans-serif}
.klipa-opt .lead{font-size:17px;line-height:1.55;color:var(--dim);max-width:48ch;margin:0 0 26px}
.klipa-opt .drop{width:100%;text-align:center;background:var(--surf);border:1.5px dashed var(--bd2);border-radius:14px;padding:34px 20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:'Inter'}
.klipa-opt .drop:hover,.klipa-opt .drop.drag{border-color:var(--ac)}
.klipa-opt .drop:disabled{cursor:default}
.klipa-opt .dropic{width:52px;height:52px;border-radius:999px;background:var(--ac-bg);display:flex;align-items:center;justify-content:center}
.klipa-opt .privacy{display:flex;align-items:flex-start;gap:9px;color:var(--faint);font-size:13px;line-height:1.45}
.klipa-opt .privacy svg{flex:none;margin-top:1px}
.klipa-opt .mono{font-family:ui-monospace,Menlo,monospace}
.klipa-opt .opt-busy{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.klipa-opt .opt-spin{width:34px;height:34px;border:3px solid var(--ac-bd);border-top-color:var(--ac);border-radius:50%;animation:opt-spin .9s linear infinite}
@keyframes opt-spin{to{transform:rotate(360deg)}}
.klipa-opt .opt-busy-msg{font-weight:600;font-size:16px;color:var(--tx)}
.klipa-opt .opt-bar{width:100%;max-width:320px;height:7px;background:var(--surf2);border-radius:99px;overflow:hidden}
.klipa-opt .opt-bar>span{display:block;height:100%;width:0;background:var(--ac);border-radius:99px;transition:width .25s ease}
.klipa-opt .opt-err{color:var(--cr-dot);font-size:14px;margin:12px 0 0;font-weight:500}
.next-step-alts {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.next-step-alt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all .15s;
}
.next-step-alt:hover {
    color: var(--primary-ink);
    border-color: var(--primary);
    background: rgba(37,99,235,.05);
}
@media (max-width: 767px) {
    .next-step-btn { font-size: 15px !important; padding: 14px 20px !important; }
    .next-step-alts { flex-direction: column; align-items: center; }
}

/* Clip result cards */
.clip-result-card {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.clip-result-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.clip-result-video {
    flex: 0 0 300px;
    display: flex;
    align-items: stretch;
    position: relative;
    margin: 12px;
    border-radius: 12px;
    overflow: hidden;
}
.clip-result-video video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
.clip-result-info {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
@media (max-width: 767px) {
    .clip-result-card {
        flex-direction: column;
        border-radius: 12px;
    }
    .clip-result-video {
        flex: none;
        width: auto;
        max-width: 70%;
        margin: 16px auto 0;
    }
    .clip-result-info {
        padding: 16px;
    }
}

/* P3: Dashboard resume banner — surfaces a recently created task so freshly signed-up users don't lose context */
.dash-resume-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(139,92,246,0.08));
    border: 1px solid var(--primary, #2563EB);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-resume-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37,99,235,0.12);
}
.dash-resume-icon {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
}
.dash-resume-text {
    flex: 1;
    min-width: 0;
}
.dash-resume-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text, #0f172a);
    margin-bottom: 4px;
}
.dash-resume-meta {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .dash-resume-banner { flex-wrap: wrap; }
    .dash-resume-text { flex-basis: 100%; }
}

/* ============================================================
   Processing state — focused, premium progress card.
   While a tool is processing, <body> gets .tool-processing:
   everything below the tool hero is hidden so the user only
   sees the progress (and the page no longer jumps).
   ============================================================ */
body.tool-processing main > *:not(.tool-hero) { display: none; }
body.tool-processing .tool-breadcrumb { display: none; }
body.tool-processing .tool-hero { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }

/* .tool-engaged: hide the marketing/SEO/evergreen page and give a focused, full
   screen the moment a tool leaves its 'upload' step (see the step $watch in
   tool.js — wired for EVERY tool). The sections stay in the DOM (only display:none),
   so search-engine crawlers — which never upload → step stays 'upload' → class never
   added — see and index the full explanatory content. */
/* .labpage (Optimiseur) réutilise `tool-engaged` pour masquer son PROPRE #seo-landing
   (lab.html) ; il est la seule app sous <main> et doit rester visible — sans cette
   exception, la règle générique masquait tout l'optimiseur dès l'apparition d'un résultat. */
body.tool-engaged main > *:not(.tool-hero):not(.labpage) { display: none; }
body.tool-engaged .tool-breadcrumb { display: none; }
body.tool-engaged .tool-hero { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
/* In a flex-column hero the container's `margin: 0 auto` swallows the free space
   (flex auto-margins beat align-items:stretch) and the whole workspace shrinks to
   its content width — the "compressed desktop" bug. Force full container width. */
body.tool-engaged .tool-hero .container,
body.tool-processing .tool-hero .container { width: 100%; }

.processing-progress {
    max-width: 560px; width: 100%; margin: 0 auto; padding: 0; min-height: auto;
}
@media (max-width: 600px) {
    body.tool-processing .tool-hero,
    body.tool-engaged .tool-hero { min-height: 78vh; }
}

/* ═══════════ Écran de traitement : le fil des étapes ═══════════
   Seuls `opacity` et `transform` sont animés — aucune propriété de mise en page,
   aucun dégradé recalculé, aucune ombre animée. Le gabarit n'est reconstruit
   qu'au changement de palier ; entre deux paliers, seules l'échelle du filet et
   les chiffres changent. */
.kfil-card {
    width: min(560px, 100%); margin: 0 auto;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 20px; padding: 26px 24px; box-shadow: var(--shadow-lg);
    text-align: left;
}
.kfil-kick { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.kfil-kick-l { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.kfil-kick-r { font-size: 13px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.kfil { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.kfil li { display: grid; grid-template-columns: 26px 1fr; column-gap: 13px; position: relative; padding-bottom: 14px; }
.kfil li:last-child { padding-bottom: 0; }
.kfil li::before {
    content: ""; position: absolute; left: 12.5px; top: 26px; bottom: 0; width: 1.5px;
    background: var(--border); border-radius: 2px;
}
.kfil li:last-child::before { display: none; }
.kfil li.done::before { background: var(--primary-ink); opacity: .45; }
.kfil-pip {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1.5px solid var(--border-strong); font-size: 11.5px; font-weight: 800;
    color: var(--text-muted); position: relative; z-index: 1;
}
.done .kfil-pip { background: var(--tint-blue); border-color: transparent; color: var(--tint-blue-ink); }
.done .kfil-pip svg { width: 13px; height: 13px; }
.now .kfil-pip { background: var(--primary); border-color: transparent; color: #fff; }
/* Sur fond quasi noir, le bleu d'aplat ne tient que 3,37:1 : la pastille monte
   d'un cran (4,25:1) sans toucher au bleu des boutons pleins. */
[data-theme="dark"] .now .kfil-pip { background: #3B82F6; }
/* Repère du palier en cours : STATIQUE. Un anneau tournant coûte un recalcul de
   style par image (901 en 15 s, mesuré) alors que rien ne change à l'écran ;
   l'avancée est déjà portée par le filet du palier et par sa typographie. */
.kfil-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.kfil-t { font-size: 15px; font-weight: 600; color: var(--text-muted); padding-top: 3px; line-height: 1.35; }
.done .kfil-t { color: var(--text-muted); }
.now .kfil-t { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.01em; padding-top: 1px; }
.kfil-d { margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.kfil-mini, .kfil-plain {
    margin-top: 8px; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; max-width: 220px;
}
.kfil-plain { max-width: none; height: 6px; margin-top: 0; }
.kfil-mini > span, .kfil-plain > span {
    display: block; width: 100%; height: 100%; background: var(--primary);
    transform-origin: left center; transform: scaleX(0); transition: transform .35s ease;
}
[data-theme="dark"] .kfil-mini > span, [data-theme="dark"] .kfil-plain > span { background: var(--primary-ink); }

.kfil-note {
    margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
    border-radius: var(--radius); background: var(--tint-amber); color: var(--tint-amber-ink);
}
.kfil-note.info { background: var(--tint-blue); color: var(--tint-blue-ink); }
/* Achèvement : même teinte bleue que l'information — aucun vert dans le produit. */
.kfil-note.ok { background: var(--tint-blue); color: var(--tint-blue-ink); }
.kfil-note.ok p { font-weight: 800; }
.kfil-elapsed { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kfil-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.kfil-note p { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; }

.kfil-truth { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 9px; align-items: flex-start; }
.kfil-truth svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--primary-ink); }
.kfil-truth p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.kfil-truth b { font-weight: 700; color: var(--text); }

.kfil-foot { margin-top: 18px; display: flex; justify-content: center; }
.kfil-link {
    min-height: 44px; padding: 0 14px; border: none; background: none; color: var(--text-muted);
    font-family: inherit; font-size: 13.5px; font-weight: 700; text-decoration: underline;
    text-underline-offset: 3px; cursor: pointer; border-radius: var(--radius-sm);
}
.kfil-link:hover { color: var(--text); background: var(--hover-overlay); }
.kfil-confirm {
    margin-top: 16px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface-2); text-align: center;
}
.kfil-confirm p { font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0 0 12px; }
.kfil-confirm-acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.kfil-warn { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--warning-ink); }

/* Proposition d'alerte par courriel pour une personne connectée : son adresse est
   connue, un seul geste suffit — pas de fenêtre qui recouvre l'écran. */
.kfil-mailrow {
    width: min(560px, 100%); margin: 14px auto 0; display: flex; flex-wrap: wrap; gap: 9px;
    align-items: center; padding: 12px 14px; border-radius: var(--radius);
    background: var(--surface-2); border: 1px solid var(--border);
}
.kfil-mailrow p { flex: 1; min-width: 170px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.kfil-mailrow button {
    min-height: 44px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--border-strong);
    background: var(--bg-card); color: var(--text); font-family: inherit; font-size: 13.5px;
    font-weight: 700; cursor: pointer;
}
.kfil-mailrow button:hover { background: var(--hover-overlay); }

.kfil-queue { text-align: center; padding: 8px 0 4px; }
.kfil-queue-n { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.kfil-queue p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.kfil-queue-t { font-size: 19px; font-weight: 800; color: var(--text); margin-top: 14px; }

.kfil-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Onglet en arrière-plan : plus rien ne bouge (classe posée par proc-stages.js).
   L'écran n'a aucune animation infinie ; seul le filet du palier a une
   transition, neutralisée ici comme sous `prefers-reduced-motion`. */
body.kproc-bg .kfil-mini > span, body.kproc-bg .kfil-plain > span { transition: none; }
/* Les deux anneaux qui restent sur cet écran (aperçu de style, incrustation d'un
   extrait) sont eux aussi arrêtés quand l'onglet passe en arrière-plan. */
body.kproc-bg .klc-burn-spin,
body.kproc-bg [style*="kcp-spin"] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .kfil-mini > span, .kfil-plain > span { transition: none; }
}
@media (max-width: 600px) {
    .kfil-card { padding: 22px 17px; border-radius: 16px; }
    .now .kfil-t { font-size: 17px; }
}

.proc-file-pill {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 34px;
    padding: 0 14px; border-radius: 99px; background: var(--bg-card); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); margin-bottom: 28px;
}
.proc-file-pill svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.proc-file-pill span { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-fail-icon {
    width: 80px; height: 80px; margin: 0 auto 22px; border-radius: 24px;
    background: #FEF2F2; display: flex; align-items: center; justify-content: center;
}
.proc-fail-icon svg { width: 38px; height: 38px; color: var(--error-ink); }
@media (min-width: 769px) {
    .proc-file-pill { height: 36px; margin-bottom: 32px; }
}

/* Locked-preview result (try-before-signup) — ported from the validated Claude
   Design screen "Resultat Invite". A focused, isolated screen: no stats grid,
   no next-step suggestions, just the preview + one honest CTA. */
.locked-preview { max-width: 600px; margin: 0 auto; text-align: center; }
.locked-preview-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.locked-preview-sub { margin: 8px auto 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); font-weight: 500; max-width: 400px; }
.locked-preview-badge {
    position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px; border-radius: 8px; background: var(--primary); color: #fff;
    font-size: 12px; font-weight: 800; pointer-events: none;
}
.locked-preview-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.locked-preview-info-row {
    display: flex; gap: 10px; margin-top: 16px;
}
.locked-preview-info-item {
    flex: 1; text-align: center; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 6px;
}
.locked-preview-info-item span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.locked-preview-info-item strong { display: block; font-size: 14px; color: var(--text); font-weight: 800; }
.locked-preview-card {
    margin-top: 18px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); text-align: left;
}
.locked-preview-card p.lead { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); font-weight: 600; }
.locked-preview-divider { height: 1px; background: var(--border); margin: 14px 0; }
.locked-preview-benefit { display: flex; gap: 10px; align-items: center; }
.locked-preview-benefit + .locked-preview-benefit { margin-top: 12px; }
.locked-preview-benefit-icon {
    width: 32px; height: 32px; border-radius: 9px; background: #EEF2FF; color: var(--primary-ink);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.locked-preview-benefit-icon svg { width: 16px; height: 16px; }
.locked-preview-benefit p { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.locked-preview-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.locked-preview-trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.locked-preview-trust svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }
@media (min-width: 769px) {
    .locked-preview { max-width: 960px; }
    .locked-preview-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; text-align: left; }
    .locked-preview-text { text-align: left; }
    .locked-preview-title { font-size: 38px; }
    .locked-preview-sub { margin: 14px 0 0; max-width: none; font-size: 17px; }
    .locked-preview-card { margin-top: 22px; }
    .locked-preview-trust { justify-content: flex-start; }
}

@keyframes kcp-spin { to { transform: rotate(360deg); } }

/* ai-clips caption-style step — exact port of the Lab's subtitle editor design
   (templates/lab.html: .subgrid/.subprev/.subctrl/.subtile/.subseg/.substyles),
   scoped under .clip-style-panel so these variable names never touch the rest
   of the site (CSS custom properties only cascade to descendants). */
.clip-style-panel {
    --surf:#fff; --surf2:#F1F5F9; --bd:#E2E8F0; --bd2:#CBD5E1;
    --tx:#1A1A2E; --dim:#64748B; --faint:#94A3B8;
    --ac:#7C3AED; --ac-tx:#5B21B6; --ac-bg:#F5F3FF; --ac-bd:#DDD6FE;
    /* Badges sémantiques du panneau (succès / erreur / avertissement / info). */
    --ok-bg:#EFF6FF; --ok-bd:#BFDBFE;
    --err-bg:#FEF2F2; --err-bd:#FECACA; --err-tx:#B91C1C;
    --warn-bg:#FFFBEB; --warn-bd:#FDE68A; --warn-tx:#B45309;
    --info-bg:#EFF6FF; --info-tx:#1D4ED8;
    --grad: linear-gradient(135deg,#7C3AED,#2563EB);
    background: var(--surf); border-radius: 16px; overflow: hidden;
    border: 1px solid var(--bd); font-family: 'Inter', system-ui, sans-serif;
    /* The hero container is a centering flex column: without an explicit width
       a flex child shrinks to fit-content and the whole panel collapses. */
    width: 100%;
}

/* Thème sombre de l'éditeur de légendes. Le panneau porte sa propre palette en
   variables : il suffit de les redéfinir. Sans cela, cet écran — au centre du
   parcours ai-clips — restait une île blanche éblouissante sur fond sombre.
   Les couleurs de sous-titres choisies par l'utilisateur (or, cyan, vert…) ne
   sont PAS des variables : elles ne bougent pas, et c'est voulu. */
[data-theme="dark"] .clip-style-panel {
    --surf:#141922; --surf2:#1C222C; --bd:#242B36; --bd2:#333B49;
    --tx:#EEF1F6; --dim:#A7B0BF; --faint:#8A93A3;
    --ac:#A78BFA; --ac-tx:#C4B5FD; --ac-bg:#221A3A; --ac-bd:#3B2E63;
    --ok-bg:#16233A; --ok-bd:#2C4A78;
    --err-bg:#2B1614; --err-bd:#5A2A25; --err-tx:#F0736A;
    --warn-bg:#2A2113; --warn-bd:#4E3B18; --warn-tx:#E9A23B;
    --info-bg:#16233A; --info-tx:#8AB4F8;
}
.clip-style-panel .subgrid { display:flex; flex-direction:column; }
/* La scène d'aperçu tirait son fond de deux blancs codés en dur : en thème sombre
   elle restait une île éblouissante au centre du parcours. Elle suit désormais
   la palette du panneau (--surf / --surf2), qui a sa variante sombre. */
.clip-style-panel .subprev { padding:16px 12px; background:radial-gradient(130% 90% at 50% 0%,var(--surf) 0%,var(--surf2) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.clip-style-panel .subprevlabel { display:inline-flex; align-items:center; gap:7px; align-self:center; text-align:center; font-size:11px; font-weight:700; color:var(--dim); letter-spacing:.4px; margin-bottom:12px; background:var(--surf); border:1px solid var(--bd); padding:6px 12px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.clip-style-panel .subprevlabel .ld { width:7px; height:7px; border-radius:999px; background:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.clip-style-panel #clip-style-preview-mount { width:100%; margin:0 auto; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 30px 70px rgba(15,23,42,.30),0 6px 16px rgba(15,23,42,.14); }
.clip-style-panel #clip-style-preview-mount > div { width:100% !important; height:100% !important; max-height:none !important; }
.clip-style-panel .subprevcap { margin-top:10px; display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--faint); font-weight:500; }
.clip-style-panel .subctrl { padding:22px; display:flex; flex-direction:column; gap:18px; }
.clip-style-panel .subgl { font-size:12px; font-weight:700; color:#475569; margin-bottom:9px; }
.clip-style-panel .subtile { border:2px solid var(--bd); border-radius:10px; overflow:hidden; cursor:pointer; background:var(--surf); }
.clip-style-panel .subtile.on { border-color:var(--ac); background:var(--ac-bg); }
.clip-style-panel .subseg { flex:1; text-align:center; padding:9px; border-radius:9px; border:2px solid var(--bd); background:var(--surf); color:var(--dim); font-weight:700; font-size:13px; cursor:pointer; }
.clip-style-panel .subseg.on { border-color:var(--ac); background:var(--ac-bg); color:var(--ac-tx); }
.clip-style-panel .substyleswrap { position:relative; }
.clip-style-panel .substyles { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:236px; overflow-y:auto; padding:2px; scrollbar-width:thin; }
.clip-style-panel .substyles-fade { position:absolute; left:0; right:2px; bottom:0; height:46px; background:linear-gradient(rgba(255,255,255,0),var(--surf) 78%); pointer-events:none; display:flex; align-items:flex-end; justify-content:center; border-radius:0 0 10px 10px; }
.clip-style-panel .substyles-fade .chev { margin-bottom:5px; width:26px; height:26px; border-radius:999px; background:var(--surf); border:1px solid var(--bd2); box-shadow:0 2px 8px rgba(20,22,28,.16); display:flex; align-items:center; justify-content:center; color:var(--ac); pointer-events:auto; cursor:pointer; transition:transform .12s,box-shadow .12s; }
.clip-style-panel .substyleswrap.atend .substyles-fade { opacity:0; transition:opacity .2s; }
.clip-style-panel .bp { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px 18px; border:none; border-radius:14px; background:var(--grad); color:#fff; font-weight:600; font-size:16px; line-height:1; cursor:pointer; box-shadow:0 6px 16px rgba(109,78,240,.28); }
.clip-style-panel .bp:disabled { opacity:.5; cursor:default; box-shadow:none; }
.clip-style-panel .bgh { background:none; border:none; color:var(--faint); font-weight:500; font-size:14px; cursor:pointer; padding:8px; text-decoration:underline; text-underline-offset:3px; display:block; margin:0 auto; }
@media(min-width:880px) {
    .clip-style-panel .subgrid { flex-direction:row; gap:0; }
    .clip-style-panel .subprev { flex:1; min-width:0; padding:24px 22px; min-height:560px; }
    .clip-style-panel .subctrl { width:470px; flex:none; border-left:1px solid var(--surf2); }
    .clip-style-panel .substyles { grid-template-columns:repeat(3,1fr); }
}

/* ai-clips: fill the available container width at every pipeline step (upload
   → options → processing → style choice), instead of the narrow centered-card
   widths (500-660px) shared by the simpler one-click tools. Scoped to this
   tool via the page's own data-tool-type attribute so nothing else changes. */
.tool-hero[data-tool-type="ai_clips"] .upload-hero,
.tool-hero[data-tool-type="ai_clips"] .tool-options-panel,
.tool-hero[data-tool-type="ai_clips"] .processing-progress,
.tool-hero[data-tool-type="ai_clips"] .clip-style-panel {
    max-width: 100%;
}
/* The processing card too — its global 520px fixed width read as "compressed"
   inside ai-clips' full-width pipeline on desktop. */
.tool-hero[data-tool-type="ai_clips"] .proc-card {
    width: min(760px, calc(100vw - 32px));
}
/* Options step: the settings video/controls were capped by the generic centered
   layout; let them breathe across the panel. */
.tool-hero[data-tool-type="ai_clips"] .options-choices,
.tool-hero[data-tool-type="ai_clips"] .wysiwyg-wrap {
    max-width: 100%;
}

/* ===== Unified watermark editor "Filigrane" (add_watermark + logo_overlay) =====
   Integrated from the Claude Design canvas. Full-container two-column on desktop
   (video is the focal point, settings beside it), stacked on mobile. Chrome only:
   Fabric.js drives the on-video manipulation, every control binds to wm* state. */
.tool-hero[data-tool-type="add_watermark"] .tool-options-panel,
.tool-hero[data-tool-type="logo_overlay"] .tool-options-panel { max-width: 1180px; }

.wm-editor { text-align: left; width: 100%; }

/* toolbar: mode switch (+ desktop launch) */
.wm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.wm-modeswitch { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; }
.wm-modeswitch button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border: none; border-radius: 9px; background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.wm-modeswitch button svg { width: 17px; height: 17px; }
.wm-modeswitch button.is-active { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.28); }

/* launch button */
.wm-launch { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border: none; border-radius: 12px; background: var(--primary); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,.28); white-space: nowrap; transition: background .15s, box-shadow .15s; }
.wm-launch:hover { background: var(--primary-hover); box-shadow: 0 4px 20px rgba(37,99,235,.32); }
.wm-launch svg { width: 18px; height: 18px; }
.wm-launch-block { width: 100%; height: 52px; font-size: 16px; }

/* layout grid */
.wm-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.wm-preview-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* stage shrink-wraps the video so the Fabric overlay stays pixel-aligned */
.wm-stage { position: relative; align-self: center; max-width: 100%; line-height: 0; border-radius: 14px; overflow: hidden; background: #0E1116; box-shadow: 0 8px 24px rgba(16,24,40,.18); }
.wm-stage video { display: block; width: auto; max-width: 100%; max-height: 46vh; height: auto; }

/* play / pause */
.wm-play { position: absolute; left: 12px; bottom: 12px; z-index: 12; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(14,17,22,.6); backdrop-filter: blur(4px); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wm-play svg { width: 18px; height: 18px; }

/* usage hint */
.wm-hint-pill { position: absolute; right: 12px; bottom: 12px; z-index: 12; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; background: rgba(14,17,22,.6); backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.wm-hint-pill svg { width: 13px; height: 13px; }

/* import invite overlay */
.wm-invite { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
.wm-invite-inner { display: flex; flex-direction: column; align-items: center; padding: 22px 28px; border-radius: 16px; background: rgba(14,17,22,.55); border: 2px dashed rgba(255,255,255,.5); cursor: pointer; text-align: center; line-height: 1.2; }
.wm-invite-body { display: flex; flex-direction: column; align-items: center; }
.wm-invite-icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 12px; border-radius: 14px; background: rgba(255,255,255,.15); color: #fff; }
.wm-invite-icon svg { width: 25px; height: 25px; }
.wm-invite-title { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.wm-invite-sub { margin: 5px 0 0; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.75); }
.wm-spinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: wm-spin .7s linear infinite; }
@keyframes wm-spin { to { transform: rotate(360deg); } }

/* quick placements */
.wm-placements-row { display: flex; align-items: center; gap: 12px; }
.wm-placements-label { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.wm-placements { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); gap: 5px; }
.wm-placements button { display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); cursor: pointer; transition: all .12s; }
.wm-placements button span { width: 7px; height: 7px; border-radius: 2px; background: var(--text-muted); transition: background .12s; }
.wm-placements button.is-active { border-color: var(--primary); background: rgba(37,99,235,.12); }
.wm-placements button.is-active span { background: var(--primary); }

/* settings column */
.wm-settings-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wm-sec { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 14px 16px; }
.wm-sec-head { display: flex; align-items: center; gap: 9px; width: 100%; font-size: 14px; font-weight: 800; color: var(--text-primary); background: none; border: none; padding: 0; margin: 0; font-family: inherit; text-align: left; }
.wm-sec-head > svg { width: 17px; height: 17px; color: var(--primary-ink); flex-shrink: 0; }
.wm-sec-toggle { cursor: pointer; }
.wm-sec-head .wm-caret { width: 18px; height: 18px; margin-left: auto; color: var(--text-muted); transition: transform .18s; }
.wm-sec.is-open .wm-caret { transform: rotate(180deg); }
.wm-optional { margin-left: 8px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-input); padding: 2px 8px; border-radius: 99px; }
.wm-sec-body { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }

/* fields */
.wm-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.wm-field > label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.wm-field > label b { font-weight: 700; color: var(--primary-ink); }
.wm-field input[type=range] { width: 100%; }
.wm-field textarea, .wm-editor input[type=text] { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text-primary); font-family: inherit; font-size: 14px; line-height: 1.5; transition: border-color .15s, box-shadow .15s; }
.wm-field textarea { resize: vertical; min-height: 62px; }
.wm-field textarea:focus, .wm-editor input[type=text]:focus, .wm-editor .wm-num:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.wm-field textarea::placeholder { color: var(--text-muted); opacity: .7; }
.wm-counter { align-self: flex-end; margin-top: -2px; font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* colour swatches */
.wm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; padding: 0; transition: transform .12s; }
.wm-swatch.is-active { border: 2px solid var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.25); transform: scale(1.08); }
.wm-swatch-custom { position: relative; overflow: hidden; background: conic-gradient(from 90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.wm-swatch-custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border: none; padding: 0; margin: 0; background: none; cursor: pointer; }

/* toggle switch */
.wm-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.wm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wm-track { position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: 99px; background: var(--border); transition: background .18s; }
.wm-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .18s; }
.wm-toggle input:checked + .wm-track { background: var(--primary); }
.wm-toggle input:checked + .wm-track::after { left: 21px; }

/* segmented control */
.wm-seg { display: flex; gap: 4px; padding: 4px; background: var(--bg-input); border-radius: 10px; }
.wm-seg button { flex: 1; height: 38px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; padding: 0 4px; }
.wm-seg button.is-active { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.28); }

/* angle row + number input */
.wm-anglerow { display: flex; align-items: center; gap: 8px; }
.wm-anglerow input[type=range] { flex: 1; }
.wm-editor .wm-num { width: 66px; padding: 6px 8px; text-align: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 13px; }

/* image row */
.wm-imgrow { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }
.wm-imgrow-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; background: var(--bg-card); color: var(--primary-ink); flex-shrink: 0; }
.wm-imgrow-icon svg { width: 20px; height: 20px; }
.wm-imgrow-meta { flex: 1; min-width: 0; }
.wm-imgrow-meta b { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-imgrow-btn { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }

/* timing */
.wm-timing { display: flex; align-items: flex-end; gap: 10px; }
.wm-timing label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wm-timing-arrow { padding-bottom: 8px; color: var(--text-muted); }

/* reset */
.wm-reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.wm-reset svg { width: 17px; height: 17px; }
.wm-reset:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* launch bar: prominent full-width on mobile, hidden on desktop (top launch used) */
.wm-launch-top { display: none; }
.wm-launchbar { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

@media (min-width: 880px) {
    .wm-grid { grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: start; }
    .wm-stage video { max-height: 60vh; }
    .wm-launch-top { display: inline-flex; }
    .wm-launchbar { display: none !important; }
}
@media (max-width: 879px) {
    .wm-modeswitch { width: 100%; }
    .wm-modeswitch button { flex: 1; }
}

/* Editor watermark fonts — self-hosted, the SAME TTFs Pillow renders with server
   side, so the Fabric preview matches the exported watermark (no browser fallback).
   The JS awaits document.fonts.load() before building the Fabric object. */
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("/static/fonts/wm/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("/static/fonts/wm/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/static/fonts/wm/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url("/static/fonts/wm/Anton-Regular.ttf") format("truetype"); }
@font-face { font-family: "Bebas Neue"; font-weight: 400; font-display: swap; src: url("/static/fonts/wm/BebasNeue-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fonts/wm/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "DejaVu Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/wm/DejaVuSans.ttf") format("truetype"); }

/* ===== Compress result screen "Résultat Compression" (Claude Design) =====
   Dedicated to compress: gain is the hero. Full container width on desktop
   (gain + preview side by side), stacked on mobile. States tone via .cr-tone-*. */
.cr-screen { width: 100%; max-width: 1120px; margin: 0 auto; text-align: left; }
.cr-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.cr-status-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cr-status-ic svg { width: 18px; height: 18px; }
.cr-status-head { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); text-align: center; }
.cr-tone-success .cr-status-ic { background: rgba(37,99,235,.15); color: var(--success); }
.cr-tone-optimized .cr-status-ic { background: rgba(37,99,235,.14); color: #2563EB; }
.cr-tone-heavier .cr-status-ic { background: rgba(217,119,6,.15); color: #D97706; }

.cr-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; align-items: stretch; }
.cr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.cr-card { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.cr-gain { display: flex; flex-direction: column; flex: 1; }
.cr-hero { padding: 26px 22px; text-align: center; }
.cr-tone-success .cr-hero { background: rgba(37,99,235,.10); }
.cr-tone-optimized .cr-hero { background: rgba(37,99,235,.08); }
.cr-tone-heavier .cr-hero { background: rgba(217,119,6,.10); }
.cr-hero-label { margin: 0; font-size: 14px; font-weight: 700; }
.cr-hero-value { margin: 6px 0 0; font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.cr-hero-sub { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.cr-tone-success .cr-hero-label, .cr-tone-success .cr-hero-value, .cr-tone-success .cr-hero-sub { color: var(--success); }
.cr-tone-optimized .cr-hero-label { color: var(--primary-ink); } .cr-tone-optimized .cr-hero-value { color: var(--text-primary); } .cr-tone-optimized .cr-hero-sub { color: var(--text-muted); }
.cr-tone-heavier .cr-hero-label { color: var(--warning-ink); } .cr-tone-heavier .cr-hero-value { color: var(--text-primary); font-size: 34px; } .cr-tone-heavier .cr-hero-sub { color: var(--text-muted); }

.cr-ba { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.cr-ba-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cr-bar { width: 48px; border-radius: 7px; background: linear-gradient(180deg,#94A3B8,#64748B); }
.cr-bar-ok { background: linear-gradient(180deg,#3B82F6,#2563EB); }
.cr-bar-warn { background: linear-gradient(180deg,#FBBF24,#D97706); }
.cr-ba-lbl { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cr-ba-size { margin: 3px 0 0; font-size: 18px; font-weight: 800; color: var(--text-primary); }
.cr-size-warn { color: #D97706; }
.cr-ba-arrow { width: 24px; height: 24px; color: var(--text-muted); flex-shrink: 0; }

.cr-quality { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-sm); }
.cr-quality svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.cr-quality p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); font-weight: 500; }

.cr-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #0E1116; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }

.cr-dl { position: relative; overflow: hidden; width: 100%; height: 54px; margin-top: 14px; border: none; border-radius: 12px; background: var(--primary); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.cr-dl.is-done { background: var(--primary); box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.cr-dl:disabled { cursor: default; }
.cr-dl-fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; background: rgba(255,255,255,.22); transition: width .24s ease; }
.cr-dl-inner, .cr-dl-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; }
.cr-dl-inner svg { width: 20px; height: 20px; }
.cr-spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: wm-spin .7s linear infinite; }
.cr-keep { margin-top: 9px; width: 100%; height: 46px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer; }

.cr-publish { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: var(--shadow-sm); }
.cr-publish-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(37,99,235,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cr-publish-ic svg { width: 20px; height: 20px; }
.cr-publish-body { flex: 1; min-width: 0; }
.cr-publish-t { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.cr-publish-s { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--text-muted); line-height: 1.45; }
.cr-publish-btn { align-self: center; height: 40px; padding: 0 16px; border: 1px solid var(--primary); background: transparent; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--primary-ink); cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* Pro upsell — purple, honest numbers */
.cr-upsell { margin-top: 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border: 1px solid rgba(124,58,237,.32); background: rgba(124,58,237,.06); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 20px 22px; }
.cr-upsell-ic { width: 52px; height: 52px; border-radius: 14px; background: #7C3AED; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(124,58,237,.3); }
.cr-upsell-ic svg { width: 26px; height: 26px; }
.cr-upsell-body { flex: 1; min-width: 240px; }
.cr-upsell-kicker { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #7C3AED; }
.cr-upsell-title { margin: 5px 0 0; font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.25; }
.cr-upsell-benefits { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
.cr-benefit { display: flex; gap: 8px; align-items: flex-start; }
.cr-benefit svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.cr-benefit span { font-size: 14px; font-weight: 600; color: var(--text-muted); line-height: 1.4; }
.cr-upsell-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.cr-upsell-btn { height: 50px; padding: 0 26px; border: none; border-radius: 12px; background: #7C3AED; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(124,58,237,.28); white-space: nowrap; }
.cr-upsell-btn svg { width: 18px; height: 18px; }
.cr-upsell-note { font-size: 12px; font-weight: 500; color: var(--text-muted); }

/* ── Composant « Suite de l'atelier » (upsell contextuel) — 3 densités ────────
   Source unique : markup tool.html (.klsa-*) + resolver tool.js (resultUpsell()).
   Design importé de Claude Design (« Suite Atelier »), mappé sur nos jetons (clair
   + sombre). Au succès : cartes d'outils « prochaines étapes » ESSAYABLES sur SA
   vidéo (pont ?from_task=) + trois portes de prix. Le violet premium reste une
   petite touche (pastille/liseré), jamais un aplat de fond — design-foundations §2. */
.klsa-slot { width: 100%; }

/* — Densité CARTE « ET MAINTENANT ? » — */
.klsa-card { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 560px; margin: 24px auto 0; }
.klsa-card.klsa-wide { max-width: 760px; }
.klsa-head { padding: 20px 20px 4px; }
.klsa-head-row { display: flex; align-items: center; gap: 9px; }
.klsa-done { width: 30px; height: 30px; border-radius: 9px; background: rgba(37,99,235,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.klsa-done svg { width: 17px; height: 17px; }
/* Scope .klsa-card : bat `.result-inline h3` (verte) qui, sinon, colore le titre. */
.klsa-card .klsa-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; }
.klsa-context { margin: 10px 0 0; font-size: 14px; font-weight: 500; color: var(--text-muted); line-height: 1.5; }

/* — Grille de cartes d'outils — */
.klsa-tools { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px 20px; }
.klsa-tool { display: flex; flex-direction: column; align-items: stretch; text-align: left; width: 100%; padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer; font-family: inherit; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.klsa-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.klsa-tool:hover .klsa-try { background: rgba(37,99,235,.2); }
.klsa-tool-top { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.klsa-tool-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(37,99,235,.12); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.klsa-tool-ic svg { width: 21px; height: 21px; }
.klsa-tool.is-pro .klsa-tool-ic { background: rgba(124,58,237,.12); color: var(--accent-ink); }
.klsa-tool-body { flex: 1; min-width: 0; }
.klsa-tool-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.klsa-tool-name > b { font-size: 15px; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.klsa-pill { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--accent-ink); background: rgba(124,58,237,.12); padding: 1px 5px; border-radius: 5px; }
.klsa-tool-sub { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.klsa-try { margin-top: 14px; width: 100%; height: 40px; border-radius: 10px; background: rgba(37,99,235,.12); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 800; transition: background .14s; }
.klsa-try svg { width: 15px; height: 15px; }

/* — Pied de prix à trois portes — */
.klsa-foot { border-top: 1px solid var(--border); padding: 16px 20px 18px; }
.klsa-foot-label { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--text-3); }
.klsa-portes { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.klsa-porte { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.klsa-porte.is-rec { background: rgba(124,58,237,.06); border: 1.5px solid var(--accent); }
.klsa-porte.is-rec.is-free { background: rgba(37,99,235,.06); border-color: var(--primary); }
.klsa-porte-rec { position: absolute; top: -10px; left: 16px; height: 20px; padding: 0 9px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 4px; }
.klsa-porte.is-free .klsa-porte-rec { background: var(--primary); }
.klsa-porte-rec svg { width: 11px; height: 11px; }
.klsa-porte-price { font-size: 20px; font-weight: 800; color: var(--accent-ink); letter-spacing: -0.02em; }
.klsa-porte.is-free .klsa-porte-price { font-size: 16px; color: var(--text-primary); }
.klsa-porte-label { margin: 4px 0 0; font-size: 14px; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.klsa-porte-sub { margin: 3px 0 0; font-size: 12px; font-weight: 600; color: var(--text-3); line-height: 1.4; }
.klsa-porte-btn { margin-top: 14px; width: 100%; height: 46px; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); }
.klsa-porte-btn:disabled { cursor: wait; }
.klsa-porte.is-rec .klsa-porte-btn { border: none; background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.28); }
.klsa-porte.is-rec.is-free .klsa-porte-btn { background: var(--primary); box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.klsa-note { margin: 12px 0 0; font-size: 12px; font-weight: 500; color: var(--text-3); text-align: center; }
.klsa-spin { width: 15px; height: 15px; border: 2.5px solid rgba(37,99,235,.4); border-top-color: var(--primary); border-radius: 50%; animation: klsa-spin .7s linear infinite; }
.klsa-porte.is-rec .klsa-spin { border-color: rgba(255,255,255,.5); border-top-color: #fff; }
@keyframes klsa-spin { to { transform: rotate(360deg); } }
/* — Bandeau « ouvrir dans l'atelier » (abonné Pro), sans prix — */
.klsa-pronav { border-top: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.klsa-pronav svg { width: 15px; height: 15px; }
.klsa-pronav span { font-size: 13px; font-weight: 700; color: var(--text-muted); }
@media (min-width: 620px) {
    .klsa-wide .klsa-tools { grid-template-columns: 1fr 1fr; }
    .klsa-wide .klsa-portes { flex-direction: row; }
}

/* — Densité BANDEAU COMPACT — */
.klsa-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); box-shadow: var(--shadow-sm); }
.klsa-banner-ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(124,58,237,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.klsa-banner-tx { margin: 0; flex: 1; min-width: 160px; font-size: 14px; font-weight: 600; color: var(--text-muted); line-height: 1.45; }
.klsa-banner-tx strong { color: var(--text-primary); font-weight: 800; }
.klsa-banner-link { font-size: 14px; font-weight: 800; color: var(--primary-ink); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.klsa-banner-link svg { width: 15px; height: 15px; }

/* — Densité ZONE DE LIMITE (explication d'abord) — */
.klsa-limit { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow-lg); overflow: hidden; max-width: 560px; margin: 0 auto; }
.klsa-limit.klsa-wide { max-width: 760px; }
.klsa-limit-head { padding: 24px 22px 18px; text-align: center; }
.klsa-limit-ic { width: 58px; height: 58px; border-radius: 17px; background: rgba(217,119,6,.14); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.klsa-limit-ic svg { width: 29px; height: 29px; }
.klsa-limit .klsa-title { font-size: 21px; }
.klsa-limit-context { margin: 8px auto 0; font-size: 15px; font-weight: 500; color: var(--text-muted); line-height: 1.5; max-width: 440px; }
.klsa-limit .klsa-portes { padding: 12px 22px 18px; }
.klsa-escape { display: block; width: calc(100% - 44px); margin: 0 22px 20px; height: 44px; background: transparent; border: none; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Écran de résultat unifié (.klres) — lecteur + colonne d'action ═══ */
.klres { margin-top: 8px; }
.klres-head { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; }
.klres-head-ic { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.15); color: var(--success); }
.klres-head-ic svg { width: 18px; height: 18px; }
.klres-head .ui-h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.klres-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.klres-grid.klres-solo { max-width: 560px; margin: 0 auto; }
.klres-media { min-width: 0; }
.klres-player { border-radius: 14px; overflow: hidden; }
.klres-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.klres-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--bg-input); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-muted); max-width: 100%; }
.klres-pill b { color: var(--text); font-weight: 800; }
.klres-pill-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.klres-side { min-width: 0; }
.klres-dl { position: relative; overflow: hidden; width: 100%; height: 54px; border: none; border-radius: 12px; background: var(--primary); color: #fff; font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28); }
.klres-dl:disabled { cursor: wait; }
.klres-dl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.22); transition: width 0.24s ease; }
.klres-dl-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 14px; }
.klres-dl-note { margin: 7px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; }
.klres-unlocked { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.35); color: var(--success); font-size: 13.5px; font-weight: 700; text-align: center; }
.klres-offer { margin-top: 10px; padding: 14px; border-radius: 12px; background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.3); text-align: center; }
.klres-btn-pass { width: 100%; height: 46px; border: none; border-radius: 11px; background: var(--accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28); }
.klres-offer-sub { margin: 8px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.klres-prolink { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--primary-ink); text-decoration: none; padding: 6px 4px; }
.klres-srt { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; height: 44px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-card); font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; }
.klres-side .url-result-retention { margin-bottom: 10px; }
.klres-side .hd-box { text-align: left; }
@media (min-width: 900px) {
    .klres-grid { grid-template-columns: minmax(0, 520px) 1fr; gap: 32px; }
    .klres-head { justify-content: flex-start; }
}

/* ═══ Cartes de suite du résultat (.klns) : carte Studio + second outil ═══ */
.klns { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.klns-h { margin: 0 0 -2px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.klns-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: var(--shadow-sm); cursor: pointer; font-family: inherit; text-align: left; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.klns-card:hover, .klns-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.klns-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.klns-studio { border-color: rgba(37, 99, 235, 0.35); }
.klns-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.klns-thumb { position: relative; width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; background: rgba(37, 99, 235, 0.1); display: flex; align-items: center; justify-content: center; }
.klns-thumb img { width: 100%; height: 100%; object-fit: cover; }
.klns-thumb-play { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.klns-thumb-play svg { width: 13px; height: 13px; }
.klns-ic { width: 42px; height: 42px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.1); color: var(--primary-ink); }
.klns-ic svg { width: 21px; height: 21px; }
.klns-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.klns-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary-ink); }
.klns-title { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.3; }
.klns-sub { font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.klns-pro { flex: none; align-self: flex-start; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; color: var(--accent-ink); border: 1px solid rgba(124, 58, 237, 0.4); background: rgba(124, 58, 237, 0.08); }
.klns-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 11px; background: rgba(37, 99, 235, 0.12); color: var(--primary-ink); font-size: 14px; font-weight: 800; }
.klns-cta svg { width: 15px; height: 15px; }
@media (min-width: 900px) {
    .klns { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .klns-h { grid-column: 1 / -1; }
    .klns-card { justify-content: space-between; }
}

/* Déblocage de la qualité HD/4K (paiement par vidéo) sur l'écran de résultat du téléchargeur. */
/* Qualité HD/4K — aligné SOUS le bouton de téléchargement (même largeur ~340px). */
.hd-box { max-width: 360px; margin: 12px auto 0; }
.hd-box.hd-lead { margin: 0 auto 12px; }
.klres-dl.is-secondary { height: 46px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); box-shadow: none; font-size: 15px; font-weight: 600; }
.klres-dl.is-secondary .klres-dl-fill { background: rgba(37, 99, 235, 0.14); }
.hd-offer { padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hd-offer-txt { display: flex; flex-direction: column; gap: 2px; }
.hd-offer-txt strong { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.hd-offer-txt span { font-size: 13px; color: var(--text-muted); }
.hd-btn { width: 100%; max-width: 340px; }
/* État PAYÉ (rassurant, accent succès) : paiement confirmé + bouton HD. */
.hd-paid { padding: 16px; border: 1px solid var(--primary); border-radius: 14px; background: rgba(37,99,235,.07); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hd-paid-head { display: flex; align-items: center; gap: 7px; color: var(--success); }
.hd-paid-head strong { font-size: 15px; font-weight: 800; }
.hd-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; }
.hd-paid-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: 0; }
.hd-prep { padding: 16px; border: 1px solid var(--primary); border-radius: 14px; background: rgba(37,99,235,.06); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.hd-prep-head { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--text-primary); }
.hd-prep-head strong { font-size: 14.5px; font-weight: 800; }
.hd-prep-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hd-prep-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s ease; }
.hd-prep-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-muted); }
.hd-prep-pct { font-size: 20px; font-weight: 800; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.hd-prep-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--success); }
.hd-ready { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--success); font-weight: 600; }
.hd-ready .hd-check { width: 20px; height: 20px; }

.cr-continue { margin: 32px 0 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.cr-suggest { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cr-sug { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: var(--shadow-sm); text-decoration: none; transition: border-color .15s, transform .1s; }
.cr-sug:hover { border-color: var(--primary); }
.cr-sug-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(37,99,235,.1); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cr-sug-ic svg { width: 20px; height: 20px; }
.cr-sug-txt { display: flex; flex-direction: column; min-width: 0; }
.cr-sug-txt b { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.cr-sug-txt span { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

/* Expired */
.cr-expired { max-width: 460px; margin: 0 auto; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cr-exp-ic { width: 80px; height: 80px; border-radius: 22px; background: rgba(217,119,6,.12); color: #D97706; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.cr-exp-ic svg { width: 38px; height: 38px; }
.cr-expired h1 { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.cr-expired p { margin: 10px 0 0; font-size: 15px; font-weight: 500; color: var(--text-muted); line-height: 1.55; max-width: 380px; }
.cr-btn-primary { margin-top: 24px; height: 52px; padding: 0 26px; border: none; border-radius: 12px; background: var(--primary); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.cr-btn-primary svg { width: 19px; height: 19px; }

@media (min-width: 880px) {
    .cr-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .cr-hero-value { font-size: 72px; }
    .cr-tone-heavier .cr-hero-value { font-size: 42px; }
    .cr-ba-size { font-size: 22px; }
    .cr-suggest { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .cr-sug { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 879px) {
    .cr-upsell-cta { align-items: stretch; width: 100%; }
    .cr-upsell-btn { width: 100%; justify-content: center; }
    .cr-upsell-note { text-align: center; }
    .cr-publish { flex-wrap: wrap; }
    .cr-publish-btn { width: 100%; }
}

/* Tool temporarily under maintenance — replaces just the tool workspace */
.tool-maintenance { max-width: 520px; margin: 0 auto; padding: 44px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-md); }
.tool-maint-ic { width: 72px; height: 72px; border-radius: 20px; background: rgba(37,99,235,.1); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.tool-maint-ic svg { width: 34px; height: 34px; }
.tool-maintenance h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.tool-maintenance p { margin: 10px 0 0; font-size: 15px; font-weight: 500; color: var(--text-muted); line-height: 1.55; max-width: 420px; }

/* ===== Convert result « Convertisseur Parcours » (complet / aperçu → payer) ===== */
.cv-screen { width: 100%; max-width: 1120px; margin: 0 auto; text-align: left; }
.cv-status { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 8px; flex-wrap: wrap; }
.cv-status h1 { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); text-align: center; }
.cv-status-ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(37,99,235,.15); color: var(--success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv-status-ic svg { width: 18px; height: 18px; }
/* Le violet PLEIN reste (fond violet, texte blanc : 5,7:1). Seuls les violets
   de TEXTE passent à l'encre claire : #7C3AED tombait à 2,99:1 (pastille) et
   3,14:1 (prix) une fois l'écran passé en nuit. */
.cv-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: rgba(124,58,237,.18); color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.cv-badge svg { width: 14px; height: 14px; }
.cv-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; align-items: start; }
.cv-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cv-player, .cv-player-mount { position: relative; width: 100%; aspect-ratio: 16/9; background: #0E1116; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cv-badged { position: relative; }
.cv-prev-tag { position: absolute; top: 10px; left: 10px; z-index: 6; height: 26px; padding: 0 10px; border-radius: 7px; background: rgba(124,58,237,.92); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; }
.cv-clean { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cv-clean svg { width: 16px; height: 16px; flex-shrink: 0; }
.cv-msg { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-primary); font-weight: 500; }
.cv-msg b { font-weight: 800; }
.cv-unlock-h { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); }
.cv-pass-card { border: 1px solid rgba(124,58,237,.32); background: rgba(124,58,237,.06); border-radius: 14px; padding: 15px 16px; }
.cv-pass-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cv-pass-name { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.cv-pass-price { font-size: 16px; font-weight: 800; color: var(--accent-ink); }
.cv-pass-desc { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.cv-pass-btn { margin-top: 13px; width: 100%; height: 48px; border: none; border-radius: 12px; background: #7C3AED; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(124,58,237,.28); }
.cv-sub-note { margin: 11px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; }
.cv-formules { width: 100%; height: 44px; margin-top: 4px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer; }

/* overlay 3 offres */
.cv-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(16,24,40,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.cv-sheet { position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 26px 22px 22px; }
.cv-sheet-x { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border: none; background: var(--bg-input); border-radius: 50%; font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.cv-sheet h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--text-primary); text-align: center; letter-spacing: -0.02em; }
.cv-sheet-sub { margin: 8px auto 18px; font-size: 14px; font-weight: 500; color: var(--text-muted); text-align: center; line-height: 1.45; max-width: 340px; }
.cv-offers { display: flex; flex-direction: column; gap: 10px; }
.cv-offer { position: relative; text-align: left; border: 2px solid var(--border); background: var(--bg-card); border-radius: 14px; padding: 14px 15px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.cv-offer.sel { border-color: #7C3AED; background: rgba(124,58,237,.06); }
.cv-offer-best { border-color: rgba(124,58,237,.4); }
.cv-offer-tag { position: absolute; top: -9px; right: 14px; height: 20px; padding: 0 9px; border-radius: 99px; background: #7C3AED; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; }
.cv-offer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cv-offer-top b { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.cv-offer-price { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.cv-offer-price small { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.cv-offer-note { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.cv-sheet-cta { margin-top: 16px; width: 100%; height: 52px; border: none; border-radius: 12px; background: #7C3AED; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(124,58,237,.28); }
.cv-sheet-note { margin: 10px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; line-height: 1.4; }

@media (min-width: 880px) {
    .cv-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
    .cr-screen .cr-suggest, .cv-screen .cr-suggest { grid-template-columns: repeat(4,1fr); }
}

/* Convert — cartes de format avec description (design « Convertisseur Parcours ») */
.cv-fmt-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cv-fmt-card { flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; padding: 14px 16px; min-height: 0; }
.cv-fmt-card strong { font-size: 15px; font-weight: 800; }
.cv-fmt-hint { font-size: 12.5px; font-weight: 500; color: var(--text-muted); line-height: 1.35; }
@media (min-width: 620px) { .cv-fmt-cards { grid-template-columns: repeat(3, 1fr); } }

/* Convert format cards — coche sur la sélection + bouton « Changer » (design) */
.cv-fmt-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; }
.cv-fmt-check { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv-fmt-check svg { width: 12px; height: 12px; }
.options-file-badge { display: flex; align-items: center; gap: 12px; }
.options-file-change { margin-left: auto; background: none; border: none; color: var(--beam-bright, #4D82F3); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 8px; font-family: inherit; flex-shrink: 0; }
.options-file-change:hover { background: rgba(77, 130, 243, .1); }

/* ===== Convert « choix du format » — PORT EXACT du .dc.html (rFormat) =====
   Surfaces/textes mappés sur les variables Klipa (thème clair/sombre) ; l'accent
   reste le bleu du design (#2563EB / #1D4ED8) et les dimensions sont exactes. */
.cvf-panel { width: 100%; max-width: 760px; margin: 0 auto; }
.cvf-title { text-align: center; margin: 0; font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.12; }
.cvf-sub { text-align: center; margin: 10px auto 0; font-size: 15px; font-weight: 500; color: var(--text-muted); line-height: 1.5; max-width: 520px; }
.cvf-file { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,24,40,.06); margin-top: 16px; }
.cvf-file-ic { width: 44px; height: 44px; border-radius: 11px; background: rgba(37,99,235,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cvf-file-ic svg { width: 22px; height: 22px; }
.cvf-file-info { flex: 1; min-width: 0; text-align: left; }
.cvf-file-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvf-file-meta { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.cvf-change { height: 36px; padding: 0 13px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; flex-shrink: 0; }
.cvf-change:hover { background: var(--bg-input); }
.cvf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.cvf-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border-radius: 12px; cursor: pointer; text-align: left; font-family: inherit; transition: all .14s ease; border: 1.5px solid var(--border); background: var(--bg-card); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.cvf-card.active { border: 2px solid #2563EB; background: rgba(37,99,235,.06); }
.cvf-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cvf-name { font-size: 17px; font-weight: 800; color: var(--text-primary); letter-spacing: .02em; }
.cvf-card.active .cvf-name { color: #1D4ED8; }
.cvf-check { width: 18px; height: 18px; border-radius: 50%; background: #2563EB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cvf-check svg { width: 12px; height: 12px; }
.cvf-hint { font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.35; }
.cvf-cta { margin-top: 18px; width: 100%; height: 52px; border: none; border-radius: 12px; background: #2563EB; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.cvf-cta svg { width: 20px; height: 20px; }
@media (min-width: 720px) {
    .cvf-title { font-size: 34px; }
    .cvf-sub { font-size: 17px; }
    .cvf-file { padding: 16px; }
    .cvf-grid { grid-template-columns: repeat(5, 1fr); }
    .cvf-cta { height: 56px; font-size: 17px; }
}

/* Convert — sélecteur de mode (compatible / fast) */
.cvf-mode { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.cvf-mode-opt { text-align: left; border: 1.5px solid var(--border); background: var(--bg-card); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: inherit; transition: all .14s ease; }
.cvf-mode-opt.active { border: 2px solid #2563EB; background: rgba(37,99,235,.06); }
.cvf-mode-top { display: flex; align-items: center; gap: 8px; }
.cvf-mode-top b { font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.cvf-mode-badge { height: 18px; padding: 0 8px; border-radius: 99px; background: #2563EB; color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; }
.cvf-mode-note { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.35; }
@media (min-width: 720px) { .cvf-mode { grid-template-columns: 1fr 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────
   Correctifs d'accessibilité — audit UX ai-clips du 09/07/2026
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Bouton d'accès clavier à la zone de dépôt (WCAG 2.1.1).
      La zone est un <div> @click : ce bouton est le seul chemin sans souris,
      et il donne enfin une affordance à l'action primaire de la page. */
.drop-cta-btn {
    margin-top: 14px;
    /* Le conteneur .drop-zone-hero capte le clic ; le bouton doit rester au-dessus. */
    position: relative;
    z-index: 1;
}

/* 2. « Créer un compte » rétrogradé en lien : il ne doit plus être le seul
      bouton plein de l'écran, au-dessus de la zone de dépôt. */
.btn-linkish {
    background: none;
    border: 0;
    padding: 4px 6px;
    font: inherit;
    font-size: 13px;
    color: var(--primary-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-linkish:hover { opacity: .8; }

/* 3. Cibles tactiles d'au moins 24 px (WCAG 2.5.8). Les liens de fil d'Ariane
      et de pied de page mesuraient 18 px de haut. On agrandit la ZONE cliquable
      sans toucher à la taille du texte ni à la mise en page. */
.breadcrumb a,
.footer-col a,
.footer-bottom a {
    display: inline-block;
    padding-block: 3px;
    min-height: 24px;
}

/* 4. Respect de « animations réduites ». Le site n'avait aucune règle
      prefers-reduced-motion : anneaux, transitions et défilements doux
      s'imposaient à tous, y compris aux personnes sujettes au mal des transports. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 5. Lien d'évitement : hors écran, révélé au focus clavier (WCAG 2.4.1). */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}
/* La cible du lien reçoit le focus sans afficher d'anneau disgracieux. */
main:focus { outline: none; }

/* 6. Cibles tactiles ≥ 24 px (WCAG 2.5.8). Le fil d'Ariane (18 px) et les liens de
      pied de page (22 px) étaient sous le seuil. On agrandit la zone cliquable
      sans toucher à la taille du texte. */
.tool-breadcrumb a,
.klx-foot-link,
.klx-foot-legal a {
    display: inline-block;
    padding-block: 3px;
    min-height: 24px;
}

/* Refabrication des clips sans filigrane (après paiement) : petit indicateur d'attente. */
.clean-spinner {
    width: 18px; height: 18px; flex: none;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: clean-spin .8s linear infinite;
}
@keyframes clean-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   Clips IA — parcours redessiné (Claude Design, 09/07/2026)
   Toutes les couleurs passent par nos jetons : le mode sombre suit tout seul.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Écran 1 : réglages ─────────────────────────────────────────────────── */
.klc-stack { display: flex; flex-direction: column; gap: 16px; }

.klc-field-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.klc-field-title { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); }
.klc-field-hint  { font-size: 12px; font-weight: 600; color: var(--text-3); }

/* Boutons segmentés (durée, nombre d'extraits) */
.klc-seg { display: flex; gap: 8px; }
.klc-seg-btn {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 13px 8px; border-radius: var(--radius); cursor: pointer;
    font-family: inherit; transition: border-color .14s, background .14s;
    border: 1.5px solid var(--border); background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.klc-seg-btn:hover:not(:disabled) { border-color: var(--border-strong); }
.klc-seg-btn .klc-seg-v { font-size: 16px; font-weight: 800; color: var(--text); }
.klc-seg-btn .klc-seg-s { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: center; line-height: 1.2; }
/* Actif : bordure + couleur ET graisse — jamais la couleur seule (WCAG 1.4.1). */
.klc-seg-btn.is-active { border: 2px solid var(--primary); background: rgba(37,99,235,.06); }
.klc-seg-btn.is-active .klc-seg-v { color: var(--primary-hover); }
.klc-seg-btn:disabled { opacity: .5; cursor: not-allowed; }
.klc-seg-btn:disabled .klc-seg-s { color: var(--error-ink); }

/* Formats : cases à cocher (1 à 4 simultanés) */
.klc-fmt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.klc-fmt {
    display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: var(--radius);
    cursor: pointer; text-align: left; font-family: inherit;
    border: 1.5px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm);
}
.klc-fmt:hover { border-color: var(--border-strong); }
.klc-fmt.is-active { border: 2px solid var(--primary); background: rgba(37,99,235,.06); }
.klc-fmt-box {
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--border-strong); background: transparent; color: transparent;
}
.klc-fmt.is-active .klc-fmt-box { background: var(--primary); border-color: var(--primary); color: #fff; }
.klc-fmt-l { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
.klc-fmt.is-active .klc-fmt-l { color: var(--primary-hover); }
.klc-fmt-d { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); }

/* Note d'information + erreur */
.klc-note {
    display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px;
    border-radius: var(--radius); background: var(--bg-input); border: 1px solid var(--border);
}
.klc-note p { margin: 0; font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.5; }
.klc-note svg { flex-shrink: 0; color: var(--text-3); margin-top: 1px; }

.klc-error {
    margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--error-ink);
    display: flex; align-items: center; gap: 6px;
}

/* Rappel du fichier déposé */
.klc-file {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.klc-file-ic {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: rgba(37,99,235,.1); color: var(--primary-ink);
    display: flex; align-items: center; justify-content: center;
}
.klc-file-meta { flex: 1; min-width: 0; }
.klc-file-name {
    margin: 0; font-size: 15px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.klc-file-sub { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* Ordinateur : réglages à gauche, fichier + action collants à droite. */
@media (min-width: 900px) {
    /* Colonne unique, largeur contenue : le rappel du fichier vit déjà plus haut,
       et l'action (.options-start-btn) ferme la carte en pleine largeur. */
    /* `width` EXPLICITE, pour la MÊME raison que `.tool-preview` : une marge
       latérale `auto` sur un élément de grille annule l'étirement, et la colonne
       se réduit alors à son plus large enfant. Sa largeur dépendait donc des
       TEXTES qui s'y trouvaient — en supprimer un la faisait rétrécir, et les
       quatre formats passaient de une à deux rangées. Une colonne ne doit jamais
       tenir sa largeur de son contenu. La marge `auto` reste : elle ne sert plus
       qu'à centrer quand la place dépasse le plafond. */
    .klc-settings-grid { width: 100%; max-width: 760px; margin: 0 auto; }
    .klc-fmt-grid { grid-template-columns: repeat(4, 1fr); }
    .klc-stack { gap: 20px; }
}

/* ── Écran 2 : la planche de clips ──────────────────────────────────────── */
.klc-board-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.klc-board-title { margin: 0; font-size: 23px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.klc-board-sub   { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.klc-board-acts  { display: flex; gap: 8px; flex-wrap: wrap; }

/* Offre « sans logo » : le violet est un SIGNAL premium, en touche — pas un aplat
   ni un dégradé de marque (design-foundations §2, P2). */
.klc-offer {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px; border-radius: 14px; margin-bottom: 18px;
    background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.3);
}
.klc-offer-ic {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(124,58,237,.3);
}
.klc-offer-body { flex: 1; min-width: 180px; }
.klc-offer-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.klc-offer-sub   { margin: 3px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted-strong); }
.klc-offer-cta   { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
/* Cible tactile : le lien mesurait 19 px de haut, moins de la moitié du doigt.
   Le texte ne bouge pas — seule la zone atteignable grandit. */
.klc-offer-pro   { display: flex; align-items: center; justify-content: center; min-height: 44px;
                   font-size: 12px; font-weight: 700; color: var(--accent-ink); text-decoration: none; text-align: center; }
.klc-offer-pro:hover { text-decoration: underline; }
.klc-offer-note  { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--text-muted-strong); }

.klc-unlocked {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
    border-radius: 10px; background: rgba(37,99,235,.1); margin-bottom: 16px;
    font-size: 13px; font-weight: 700; color: var(--success);
}

/* Carte de clip : la vidéo est la vedette, le score reste discret. */
.klc-clip {
    display: flex; flex-direction: column; gap: 14px; padding: 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-sm);
}
.klc-clip-media { width: 100%; flex-shrink: 0; }
.klc-clip-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.klc-clip-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.klc-clip-n { font-size: 12px; font-weight: 800; color: var(--text-3); }
.klc-chip-sub {
    display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
    border-radius: 5px; background: rgba(37,99,235,.12); color: var(--success);
    font-size: 10px; font-weight: 800;
}
.klc-clip-title { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.25; }
.klc-clip-desc  { margin: 5px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.5; }

/* Score : un badge + quatre jauges de 5 segments. Jamais le premier élément vu. */
.klc-score { margin-top: 10px; }
.klc-score-head { display: flex; align-items: center; gap: 8px; }
.klc-score-badge {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
    border-radius: 7px; background: rgba(37,99,235,.1); color: var(--primary-ink);
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.klc-score-out { font-size: 12px; font-weight: 600; color: var(--text-3); }
.klc-crits { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.klc-crit { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.klc-bars { display: inline-flex; gap: 2px; }
.klc-bar  { width: 10px; height: 3px; border-radius: 2px; background: var(--border); }
.klc-bar.on { background: var(--primary); }

.klc-clip-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.klc-clip-acts .btn { flex: 1; min-width: 140px; }
.klc-inert {
    height: 44px; padding: 0 16px; border-radius: 11px; background: var(--bg-input);
    border: 1px solid var(--border); color: var(--text-muted);
    font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px;
}

/* Suggestions : continuer avec ces clips */
.klc-sugg-kicker {
    margin: 22px 0 10px; font-size: 13px; font-weight: 700;
    color: var(--text-3); letter-spacing: .02em;
}
.klc-sugg { display: flex; gap: 10px; flex-wrap: wrap; }
.klc-sugg a {
    flex: 1 1 100%; display: flex; align-items: center; gap: 11px; padding: 13px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-sm); text-decoration: none;
    font-size: 15px; font-weight: 700; color: var(--text);
}
.klc-sugg a:hover { border-color: var(--border-strong); }
.klc-sugg-ic {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(37,99,235,.1); color: var(--primary-ink);
    display: flex; align-items: center; justify-content: center;
}

@media (min-width: 900px) {
    .klc-clip { flex-direction: row; gap: 18px; padding: 18px; align-items: flex-start; }
    .klc-clip-media { width: 240px; }
    .klc-board-title { font-size: 28px; }
    .klc-clip-title { font-size: 17px; }
    .klc-clip-acts .btn { flex: 0 1 auto; }
    .klc-sugg a { flex: 0 1 260px; }
    .klc-sugg-kicker { margin: 30px 0 12px; }
    .klc-offer-cta { align-items: flex-end; }
}

/* Texte réservé aux lecteurs d'écran (jamais display:none : cela le retirerait
   aussi de l'arbre d'accessibilité). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Écrans 3 & 4 : atelier de sous-titres et incrustation ──────────────────
   Ces deux écrans vivent dans .clip-style-panel, qui porte sa PROPRE palette en
   variables (--surf, --tx, --ac…) et sa variante sombre. On s'y branche. */

.klc-back {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
    border: 1px solid var(--bd); background: var(--surf); border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--tx);
    cursor: pointer; margin: 0 0 14px 0;
}
.klc-back:hover { border-color: var(--bd2); }

/* La promesse WYSIWYG, sous l'aperçu. */
.klc-wysiwyg {
    margin: 10px 0 0; font-size: 12px; font-weight: 500; line-height: 1.5;
    color: var(--dim); text-align: center; max-width: 340px;
}

/* Polices en pastilles, chacune rendue dans sa propre typographie. */
.klc-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.klc-chip {
    height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer;
    font-size: 13px; font-weight: 700; background: var(--surf); color: var(--tx);
    border: 1.5px solid var(--bd);
}
.klc-chip:hover { border-color: var(--bd2); }
.klc-chip.on { border: 2px solid var(--ac); background: var(--ac-bg); color: var(--ac-tx); }

/* Le style gratuit se signale, comme les styles Pro. */
.free-badge-overlay {
    position: absolute; top: 4px; right: 4px; z-index: 1;
    font-size: 8px; font-weight: 800; letter-spacing: .02em;
    color: #fff; background: var(--primary);
    padding: 2px 5px; border-radius: 4px;
}

/* Écran 4 : incrustation en cours. */
.klc-burn { max-width: 520px; margin: 0 auto; text-align: center; padding: 48px 16px; }
.klc-burn-ring {
    width: 110px; height: 110px; margin: 0 auto 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.klc-burn-spin {
    width: 100px; height: 100px; border-radius: 50%;
    border: 10px solid var(--bd); border-top-color: var(--ac);
    animation: kcp-spin 1s linear infinite;
}
.klc-burn-fail {
    width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 24px;
    background: var(--err-bg); color: var(--err-tx);
    display: flex; align-items: center; justify-content: center;
}
.klc-burn-title { margin: 0; font-size: 23px; font-weight: 800; color: var(--tx); letter-spacing: -0.01em; }
.klc-burn-text  { margin: 10px auto 0; max-width: 380px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--dim); }
.klc-burn-acts  { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.klc-burn-acts .bp, .klc-burn-acts .bgh { width: auto; padding: 0 22px; height: 50px; }

@media (min-width: 900px) {
    .klc-burn { padding: 70px 20px; }
    .klc-burn-title { font-size: 28px; }
}

/* Cibles tactiles ≥ 44 px (design-foundations §2, P5) sur les actions des clips. */
.klc-clip-acts .btn { min-height: 44px; }

/* ── Carte de score « potentiel viral » (design v2, 09/07/2026) ─────────────
   Le niveau est porté par la COULEUR **et** par un libellé : jamais par la
   couleur seule (WCAG 1.4.1). Deux teintes par niveau :
     --tier-g  couleur GRAPHIQUE (jauge, barres, icônes) — seuil 3:1
     --tier-t  couleur du TEXTE (badge) — seuil 4,5:1
   Une teinte d'aplat tombe souvent sous 4,5:1 en texte : on ne l'emploie que
   pour le graphique, et on assombrit le texte. */
.klc-scorecard {
    margin-top: 12px; padding: 14px; border-radius: 14px;
    background: var(--bg-input); border: 1px solid var(--border);
}
.klc-scorecard.tier-high   { --tier-g: #1E3A8A; --tier-t: #1E3A8A; --tier-bg: rgba(30,58,138,.12); }
.klc-scorecard.tier-strong { --tier-g: #2563EB; --tier-t: #1D4ED8; --tier-bg: rgba(37,99,235,.12); }
.klc-scorecard.tier-good   { --tier-g: #7C3AED; --tier-t: #6D28D9; --tier-bg: rgba(124,58,237,.12); }
.klc-scorecard.tier-fair   { --tier-g: #B45309; --tier-t: #92400E; --tier-bg: rgba(217,119,6,.12); }
[data-theme="dark"] .klc-scorecard.tier-high   { --tier-g: #C7DAFE; --tier-t: #DCE8FF; --tier-bg: rgba(199,218,254,.14); }
[data-theme="dark"] .klc-scorecard.tier-strong { --tier-g: #5B8DEF; --tier-t: #AFC9FF; --tier-bg: rgba(91,141,239,.14); }
[data-theme="dark"] .klc-scorecard.tier-good   { --tier-g: #A78BFA; --tier-t: #C9BAFE; --tier-bg: rgba(167,139,250,.14); }
[data-theme="dark"] .klc-scorecard.tier-fair   { --tier-g: #E9A23B; --tier-t: #F3C27A; --tier-bg: rgba(233,162,59,.14); }

.klc-scorecard-head { display: flex; align-items: center; gap: 12px; }

/* Jauge circulaire */
.klc-gauge { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.klc-gauge-track { stroke: var(--border); }
.klc-gauge-fill  { stroke: var(--tier-g); transition: stroke-dashoffset .5s ease; }
.klc-gauge-c {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.klc-gauge-v { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.klc-gauge-o { font-size: 9px; font-weight: 700; color: var(--text-3); margin-top: 1px; }

/* Badge de potentiel : couleur + LIBELLÉ (second signal). */
.klc-tier { flex: 1; min-width: 0; }
.klc-tier-badge {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
    border-radius: 99px; background: var(--tier-bg); color: var(--tier-t);
    font-size: 12px; font-weight: 800;
}
.klc-tier-sub { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }

/* Critères : icône + libellé + barre + note chiffrée (jamais la barre seule). */
.klc-crits2 { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.klc-crit2 { display: flex; align-items: center; gap: 8px; }
.klc-crit-ic {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    background: var(--tier-bg); color: var(--tier-g);
    display: flex; align-items: center; justify-content: center;
}
.klc-crit-l { font-size: 12px; font-weight: 700; color: var(--text-muted); width: 62px; flex-shrink: 0; }
.klc-crit-bar {
    flex: 1; min-width: 40px; height: 6px; border-radius: 99px;
    background: var(--border); overflow: hidden;
}
.klc-crit-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--tier-g); transition: width .5s ease; }
.klc-crit-v { font-size: 12px; font-weight: 800; color: var(--text); width: 20px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ============================================================================
   MAILLAGE DE CLUSTER (.klm-*) — design « Maillage Cluster » (Claude Design).
   Section de fin de page : pages sœurs d'un même cluster (téléchargeurs par
   plateforme, conversions par format). Rendu SERVEUR (vrais liens crawlables) ;
   les couleurs viennent des variables de thème → clair/sombre automatiques.
   ========================================================================== */
.klm-sec { padding: 48px 0; }
.klm-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; }
.klm-lede { margin: 8px 0 0; font-size: 15px; font-weight: 500; color: var(--text-muted); line-height: 1.5; }

/* A — grille des plateformes */
.klm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
@media (min-width: 900px) { .klm-grid { grid-template-columns: repeat(4, 1fr); } }
.klm-card {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.klm-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.klm-card.klm-here { opacity: .7; border: 1px dashed var(--border-strong); background: var(--surface-2); cursor: default; transform: none; box-shadow: none; }
.klm-ic {
    width: 42px; height: 42px; border-radius: 11px; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text);
}
.klm-ic svg { width: 24px; height: 24px; }
.klm-tx { min-width: 0; }
.klm-tx b { display: block; font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klm-sub { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 1px; }
.klm-here .klm-sub { color: var(--primary-ink); }

/* B — puces de conversion */
.klm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.klm-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
    border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border);
    font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none;
    box-shadow: var(--shadow-sm); transition: transform .12s ease, border-color .14s ease, background .14s ease;
}
.klm-chip:hover { border-color: var(--primary); background: var(--hover-overlay); }
.klm-chip b { font-weight: 800; color: var(--text); }
.klm-chip .klm-to { color: var(--primary-ink); }
.klm-arw { width: 13px; height: 13px; color: var(--primary-ink); flex-shrink: 0; }
.klm-chip-all { background: var(--surface-2); border-color: var(--border-strong); }
.klm-chip-all .klm-arw { width: 15px; height: 15px; }
.klm-chip-here { background: rgba(37,99,235,.08); border: 1px dashed var(--primary); color: var(--primary-ink); cursor: default; }
.klm-chip-here b { color: var(--primary-ink); }
.klm-chip-here-tag { font-size: 11px; font-weight: 700; color: var(--primary-ink); margin-left: 2px; }
/* Mobile : le nom de la plateforme se coupait (« Dailymoti… ») — sur 2 colonnes la
   carte est trop étroite pour une ligne unique. On laisse le nom passer à la ligne
   plutôt que le tronquer : un libellé illisible n'aide ni l'utilisateur ni le lien. */
@media (max-width: 899px) {
    .klm-tx b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOUS-TITRES ANIMÉS — atelier (écran 2), gravure (écran 3), résultat (écran 4)
   Port du design « Sous-titres Animés Parcours ». L'aperçu est la vedette : sur
   ordinateur il reste visible (colonne collante) pendant qu'on règle et corrige.
   ═══════════════════════════════════════════════════════════════════════════ */
.sbs-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
/* Titre d'atelier : typographie d'AFFICHAGE de la Constitution, comme tous les
   titres du site depuis la refonte — il restait en gras ordinaire. */
.sbs-studio-head h2 { margin: 0; font-family: var(--display, "Anton", Impact, sans-serif);
    font-weight: 400; text-transform: uppercase; font-size: 30px; letter-spacing: .005em;
    line-height: 1.08; color: #fff; }
/* L'aperçu est la vedette : il prend TOUTE la place restante, ce sont les RÉGLAGES
   qui sont bornés — une vignette de style se reconnaît à sa couleur et à sa forme,
   elle n'a pas besoin d'être grande. Collé SOUS l'en-tête du site (66 px, sticky,
   z-index 100) : top ≥ sa hauteur, sinon l'aperçu glisserait dessous en défilant. */
.sbs-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 42%, 580px); gap: 28px; align-items: start; }
/* Plafond exprimé en hauteur de FENÊTRE, pas en pixels : la hauteur du lecteur
   découle de sa largeur (le JS la calcule au ratio réel de la vidéo). 106vh de large
   ≈ 60vh de haut en 16:9 — l'aperçu tient sous la fenêtre au lieu de la dépasser. */
.sbs-preview-col { position: sticky; top: 82px; max-width: min(100%, 106vh); }
.sbs-preview-col .preview-player-wrap { max-width: 100%; }
/* 9:16 : sans plafond, une colonne large donne une vidéo plus HAUTE que la fenêtre,
   et c'est le BAS — là où sont les sous-titres — qui sort de l'écran. On borne donc
   la largeur (la hauteur suit), mais on RÉTRÉCIT AUSSI la colonne à la mesure de la
   vidéo et on centre la grille : sinon le plafond ouvrirait un grand vide au milieu
   de la page, à côté du lecteur. Le reste de la place va aux réglages.
   Deux règles séparées, jamais une liste : `:has()` recompose la grille, la seconde
   borne le lecteur seul là où `:has()` n'existe pas — une liste rendrait les DEUX
   invalides. Desktop seul : sur mobile la colonne est déjà pleine largeur. */
@media (min-width: 900px) {
    .sbs-grid:has(.preview-player-wrap[data-portrait="true"]) {
        grid-template-columns: minmax(0, 38vh) clamp(340px, 42%, 580px); justify-content: center;
    }
    .sbs-preview-col .preview-player-wrap[data-portrait="true"] { max-width: min(100%, 38vh); margin-inline: auto; }
}
/* Logo Klipa sur l'aperçu tant que le fichier gratuit le portera (le design le
   montre : on ne découvre pas le logo au téléchargement). */
.sbs-player { position: relative; }
.sbs-player-wm {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 22px; font-weight: 800; color: rgba(255, 255, 255, 0.28);
    pointer-events: none; letter-spacing: 0.02em;
}
.sbs-wysiwyg { margin: 10px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; }
.sbs-burn-btn {
    width: 100%; height: 54px; margin-top: 16px; border: none; border-radius: 12px;
    background: var(--primary); color: #fff; font-family: inherit; font-size: 17px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
.sbs-burn-btn:disabled { opacity: 0.6; cursor: wait; }
.sbs-controls { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Onglets de la colonne : le composant .tab-buttons/.tab-btn du lecteur, repris tel
   quel, porté à la cible du pouce et sur toute la largeur. Le volet caché sort du
   flux : la page ne porte plus que ce qui est regardé. */
.sbs-controls > .tab-buttons { width: 100%; margin: 0; }
.sbs-controls > .tab-buttons > .tab-btn {
    flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; font-size: 14px; font-weight: 700;
}
/* Le point reprend celui du bandeau ; posé sur la piste des onglets il passe à
   l'encre d'alerte, seule variante lisible sur le fond sombre. */
.sbs-controls > .tab-buttons .sbs-dirty-dot { background: var(--beam-bright, #4D82F3); }
.sbs-pane { display: flex; flex-direction: column; gap: 18px; }
/* Entrée seule, et seulement opacité + translation : aucune propriété de mise en
   page n'est animée, la colonne ne se recalcule pas image par image. */
.sbs-pane-anim { transition: opacity 0.22s ease, transform 0.22s ease; }
.sbs-pane-off { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .sbs-pane-anim { transition: none; } }
.sbs-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sbs-block-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--text-primary); }
.sbs-block-head .sbs-block-title { margin: 0; }
.sbs-block-note { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 7px; }
.sbs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Styles : la vignette réelle du style (pas un aplat) — on choisit ce qu'on voit. */
/* Vignettes de style : la vignette ENTIÈRE, jamais recadrée (un « object-fit: cover »
   coupait le texte des aperçus). Le cadre suit la forme RÉELLE de l'image (600×180,
   soit ~3:1) : en 16:9 il restait près de la moitié de la case vide sous le texte.
   `auto-fill` plutôt qu'un nombre figé : 4 par rangée dans la colonne de réglages
   (assez grandes pour reconnaître le style, assez petites pour voir les 21 d'un
   coup d'œil), et la grille se resserre d'elle-même sur un écran étroit. */
.sbs-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 7px; max-height: 492px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.sbs-style {
    padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; font-family: inherit;
    border: 2px solid var(--border); background: var(--bg-card);
}
.sbs-style.is-active { border-color: var(--beam-bright, #4D82F3); background: rgba(37, 99, 235, .16); }
.sbs-style-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 1; background: #1A1A2E; padding: 4px; }
.sbs-style-img img { max-width: 100%; max-height: 100%; display: block; }
.sbs-style-label {
    display: block; padding: 5px 4px; font-size: 11px; font-weight: 700; text-align: center; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sbs-style.is-active .sbs-style-label { color: var(--primary-ink); }
/* Chips (police, taille, position, locuteurs) */
.sbs-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.sbs-chips .sbs-chip {
    height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 700;
    border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-primary);
}
.sbs-chips .sbs-chip.is-active { border: 2px solid var(--beam-bright, #4D82F3); background: rgba(37, 99, 235, .16); color: #fff; }
.sbs-color {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
    border-radius: 11px; border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer;
}
.sbs-color input[type="color"] { width: 28px; height: 28px; border: none; background: none; padding: 0; cursor: pointer; }
.sbs-color span { font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Templates */
.sbs-tpl { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.sbs-tpl-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 12px;
    border-radius: 9px; background: var(--bg-card); border: 1px solid var(--border);
}
.sbs-tpl-chip.is-active { background: rgba(37, 99, 235, .16); border-color: var(--beam-bright, #4D82F3); }
.sbs-tpl-chip button { border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.sbs-tpl-chip.is-active > button { color: var(--primary-ink); }
.sbs-tpl-del { display: flex; color: var(--text-muted); padding: 2px; }
.sbs-tpl-empty {
    margin: 0 0 8px; padding: 14px; border-radius: 11px; border: 1px dashed var(--border);
    text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.sbs-tpl-save { display: flex; gap: 8px; }
.sbs-tpl-save input {
    flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px;
    border: 1.5px solid var(--border-strong, var(--border)); background: var(--night, #070B14);
    color: var(--text-primary); font-family: inherit; font-size: 14px; outline: none;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.sbs-tpl-save input::placeholder { color: var(--text-muted); }
.sbs-tpl-save input:focus {
    border-color: var(--beam-bright, #4D82F3);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(37,99,235,.28);
}
.sbs-tpl-save button {
    height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--primary-ink); font-family: inherit; font-size: 13px;
    font-weight: 700; cursor: pointer;
}
.sbs-tpl-save button:disabled { opacity: 0.5; cursor: default; }
/* Éditeur de texte : corriger un mot ou un minutage sans quitter l'aperçu */
.sbs-edit-acts { display: flex; gap: 6px; }
.sbs-edit-acts button {
    height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer;
}
.sbs-edit-acts button:first-child { width: 34px; padding: 0; color: var(--text-muted); }
.sbs-edit-acts button:disabled { opacity: 0.45; cursor: default; }
/* « Modifications non sauvegardées » n'est pas une ALERTE, c'est une ACTION en
   attente : bleu, comme toute action de la Constitution. L'ambre en dur qui vivait
   ici (fond, trait, pastille, bouton) était la seule tache chaude de l'atelier. */
.sbs-dirty {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    background: rgba(37, 99, 235, .12); border: 1px solid rgba(77, 130, 243, .38); margin-bottom: 10px;
}
.sbs-dirty > span:nth-child(2) { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.sbs-dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--beam-bright, #4D82F3); flex: none; }
.sbs-dirty button {
    height: 34px; padding: 0 14px; border: none; border-radius: 8px; background: var(--primary);
    color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.sbs-dirty button:disabled { opacity: .6; cursor: wait; }
.sbs-lines { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.sbs-line { padding: 10px 12px; border-radius: 11px; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; }
.sbs-line.is-active { background: rgba(37, 99, 235, .16); border-color: var(--beam-bright, #4D82F3); }
.sbs-line-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.sbs-line-n { font-size: 11px; font-weight: 800; color: var(--text-muted); min-width: 20px; }
.sbs-line-arrow { font-size: 11px; color: var(--text-muted); }
.sbs-line-sp { flex: 1; }
.sbs-time {
    width: 62px; height: 30px; padding: 0 5px; border-radius: 7px;
    font-family: inherit; font-size: 12px; font-weight: 700;
    color: var(--text-muted); outline: none; text-align: center;
}
.sbs-line-btn { width: 44px; height: 44px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sbs-line-btn:hover { color: var(--error-ink); }
.sbs-line-tx {
    width: 100%; height: 36px; padding: 0 10px; border-radius: 8px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--text-primary); outline: none;
}
/* Un champ de saisie doit se lire comme un CREUX, pas comme un bouton : fond plus
   sombre que la carte qui le porte, trait franc, ombre interne.
   Ces deux règles portaient des couleurs ÉCRITES EN DUR (fond #F8FAFC, trait
   #A0AEC0) doublées d'une variante `[data-theme="dark"]`. Or cet atelier est NUIT
   dans les deux thèmes : la variante sombre ne s'appliquait donc jamais, et le
   champ restait blanc — avec le texte saisi en #E8EDF7 par-dessus. Mesuré :
   1,08:1, c'est-à-dire invisible. On lit désormais les jetons de la Constitution,
   comme tout le reste de l'atelier. */
.sbs-time, .sbs-line-tx {
    border: 1.5px solid var(--border-strong, var(--border)); background: var(--night, #070B14);
    cursor: text; box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.sbs-time::placeholder, .sbs-line-tx::placeholder { color: var(--text-muted); }
.sbs-time:focus, .sbs-line-tx:focus {
    border-color: var(--beam-bright, #4D82F3);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(37,99,235,.28);
}
.sbs-bonus { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sbs-bonus a { font-size: 13px; font-weight: 700; color: var(--primary-ink); text-decoration: none; }

/* Écrans pleins : limite de gravure, échec, fichier expiré */
.sbs-dead { max-width: 520px; margin: 0 auto; padding: 50px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sbs-dead-ic { width: 78px; height: 78px; border-radius: 22px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.sbs-dead-ic svg { width: 36px; height: 36px; }
.sbs-dead-ic.is-warn { background: rgba(217, 119, 6, 0.12); color: var(--warning-ink); }
.sbs-dead-ic.is-error { background: rgba(220, 38, 38, 0.1); color: var(--error-ink); }
.sbs-dead h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.sbs-dead p { margin: 10px 0 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--text-muted); max-width: 430px; }
.sbs-dead .sbs-dead-sub { font-size: 13px; margin-top: 6px; }
.sbs-dead .btn { margin-top: 22px; }
.sbs-dead-cta { display: flex; gap: 10px; margin-top: 22px; width: 100%; max-width: 430px; }
.sbs-dead-cta > button { flex: 1; }
.sbs-dead-back {
    margin-top: 14px; height: 42px; padding: 0 18px; border: none; background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-muted);
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* Gravure en cours : progression réelle + étape nommée */
.sbs-burning { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 20px; }
.sbs-ring { position: relative; width: 124px; height: 124px; }
.sbs-ring svg { width: 124px; height: 124px; }
.sbs-ring-track { stroke: var(--border); }
.sbs-ring-fill { stroke: var(--primary-ink); transition: stroke-dashoffset 0.3s ease; }
.sbs-ring-v {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary);
}
.sbs-burn-step { margin: 24px 0 0; font-size: 21px; font-weight: 700; color: var(--text-primary); }
.sbs-burn-hint { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--text-muted); max-width: 380px; }
.sbs-burn-dots { display: flex; gap: 6px; margin-top: 18px; }
.sbs-burn-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.sbs-burn-dots span.is-on { background: var(--primary); }

/* Résultat final — la MISE EN PAGE vient du composant partagé (.klr-main/.klr-cols,
   plus bas) : cet écran n'a plus de grille ni de bandeau propres. Ne restent ici que
   les pièces spécifiques aux sous-titres, posées dans la colonne partagée. */
.sbr-dl {
    position: relative; overflow: hidden; width: 100%; height: 54px; border: none; border-radius: 12px;
    background: var(--primary); color: #fff; font-family: inherit; font-size: 17px; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
.sbr-dl.is-done { background: var(--primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28); }
.sbr-dl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.22); transition: width 0.24s ease; }
.sbr-dl-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; }
.sbr-spin {
    width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
    border-radius: 50%; animation: klipa-spin 0.7s linear infinite;
}
@keyframes klipa-spin { to { transform: rotate(360deg); } }
.sbr-dl-note { margin: 7px 0 0; font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; }
.sbr-unlocked {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 12px;
    border-radius: 10px; background: rgba(37, 99, 235, 0.1); color: var(--success);
    font-size: 13px; font-weight: 700;
}
.sbr-offer { margin-top: 10px; padding: 14px; border-radius: 12px; background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.3); }
.sbr-offer-title { margin: 0; font-size: 14px; font-weight: 800; color: var(--text-primary); }
.sbr-offer-sub { margin: 3px 0 12px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-muted); }
.sbr-offer-cta { display: flex; gap: 8px; }
.sbr-btn-pass, .sbr-btn-pro {
    flex: 1; height: 46px; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.sbr-btn-pass { border: none; background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28); }
.sbr-btn-pass:disabled { opacity: 0.7; cursor: wait; }
.sbr-btn-pro { border: 1px solid rgba(124, 58, 237, 0.4); background: transparent; color: var(--accent-ink); }
.sbr-info { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sbr-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px;
    background: var(--bg-input); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.sbr-pill b { color: var(--text-primary); font-weight: 800; }
.sbr-pill a { color: var(--primary-ink); font-weight: 700; text-decoration: none; }
.sbr-actions { display: flex; gap: 8px; margin-top: 14px; }
.sbr-act {
    flex: 1; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--border); background: var(--bg-card); border-radius: 11px;
    font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none;
}
.sbr-act svg { color: var(--text-muted); }
.sbr-lab {
    display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 14px 16px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-decoration: none;
}
.sbr-lab-ic {
    width: 40px; height: 40px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, 0.1); color: var(--primary-ink);
}
.sbr-lab-ic svg { width: 20px; height: 20px; }
.sbr-lab-body { flex: 1; }
.sbr-lab-body b { display: block; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.sbr-lab-body span { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
.sbr-lab-arrow { color: var(--text-muted); flex: none; }

/* Mobile : tout s'empile, l'aperçu d'abord, la gravure atteignable au pouce. */
@media (max-width: 899px) {
    .sbs-grid { grid-template-columns: 1fr; gap: 18px; }
    .sbs-preview-col { position: static; }
    /* mobile intact : pas de zone défilante imbriquée, la grille reste dans le flux,
       et 3 par rangée comme avant (la largeur d'un téléphone n'en porte pas 5). */
    .sbs-styles { grid-template-columns: repeat(3, 1fr); max-height: none; overflow-y: visible; }
    .sbs-studio-head h2 { font-size: 24px; }
    .sbs-duo { grid-template-columns: 1fr; }
    .sbs-dead-cta, .sbr-offer-cta, .sbr-actions { flex-direction: column; }
    .sbs-burning { padding: 44px 6px; }
}

/* Réglages « pleine largeur » (sous-titres animés) : la carte occupe le .container
   au lieu des 660 px de la carte compacte partagée. */
.tool-options-panel.is-wide { max-width: 100%; }
/* Recadrage : l'écran de format remplit tout le conteneur ; l'aperçu s'agrandit,
   les boutons de format respirent. Padding généreux sur grand écran. */
.tool-options-panel.is-wide .rf-block { padding: 12px 16px 20px; }
.tool-options-panel.is-wide .sbs-setup { padding: 12px 16px 20px; }
.tool-options-panel.is-wide .options-section-sub {
    margin: 0; padding: 6px 28px 0; text-align: center;
    font-size: 16px; font-weight: 500; color: var(--muted-d, #94A3BE); line-height: 1.5;
}
@media (min-width: 900px) {
    /* Pas d'aperçu vidéo ici (aucun réglage ne modifie l'image) : la pile du design
       occupe toute la largeur du conteneur, avec des champs qui respirent. */
    .tool-options-panel.is-wide .sbs-setup { padding: 18px 40px 32px; gap: 20px; }
    .tool-options-panel.is-wide .rf-block { padding: 18px 40px 32px; }
    .tool-options-panel.is-wide .sbs-textarea { min-height: 76px; font-size: 16px; }
}

/* === Page « Tous les outils » (annuaire) — design importé de Claude Design === */
.klt-wrap { padding: 40px 0 64px; }
.klt-hero { text-align: center; padding-top: 8px; }
.klt-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--text); margin: 0; }
.klt-hero p { font-size: 18px; font-weight: 500; color: var(--text-muted); line-height: 1.5; max-width: 620px; margin: 14px auto 0; }
.klt-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 13px; background: var(--bg-card); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); max-width: 560px; margin: 24px auto 0; transition: border-color .15s, box-shadow .15s; }
.klt-search.is-active { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.14); }
.klt-search-ic { color: var(--text-3); flex-shrink: 0; }
.klt-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--text); }
.klt-search input::placeholder { color: var(--text-3); font-weight: 500; }
.klt-clear { width: 28px; height: 28px; border: none; background: transparent; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; }
.klt-clear:hover { background: var(--hover-overlay); }
.klt-sec { margin-top: 40px; scroll-margin-top: 70px; }
.klt-sec > h2 { margin: 0 0 16px; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.klt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.klt-card { display: flex; align-items: flex-start; gap: 12px; padding: 15px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.klt-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.klt-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(107,114,128,.12); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.klt-ic.is-ai { background: rgba(37,99,235,.1); color: var(--primary-ink); }
.klt-ic svg { width: 21px; height: 21px; }
.klt-card-body { flex: 1; min-width: 0; }
.klt-card-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.klt-card-name b { font-size: 15px; font-weight: 800; color: var(--text); }
.klt-ai { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #1D4ED8; background: rgba(37,99,235,.12); padding: 1px 5px; border-radius: 5px; }
[data-theme="dark"] .klt-ai { color: #93C5FD; }
.klt-card-desc { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.klt-feat { margin-top: 36px; }
.klt-feat-title { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 7px; }
.klt-star { color: #F59E0B; display: inline-flex; }
.klt-opt { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 16px; background: var(--bg-card); border: 1px solid rgba(37,99,235,.3); border-left: 4px solid var(--primary); box-shadow: var(--shadow-lg); text-decoration: none; margin-bottom: 12px; }
.klt-opt-ic { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg,#2563EB,#7C3AED); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,.3); color: #fff; }
.klt-opt-ic svg { width: 26px; height: 26px; }
.klt-opt-body { flex: 1; min-width: 0; }
.klt-opt-cta { height: 42px; padding: 0 18px; border-radius: 11px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,.28); white-space: nowrap; }
.klt-empty { margin-top: 40px; padding: 44px 20px; text-align: center; border-radius: 16px; background: var(--bg-card); border: 1px dashed var(--border-strong); }
.klt-empty-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.klt-empty-t { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.klt-empty-s { margin: 6px 0 16px; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.klt-btn-ghost { height: 44px; padding: 0 20px; border: 1px solid var(--border-strong); background: var(--bg-card); border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; }
.klt-reassure { margin-top: 48px; padding: 28px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.klt-reassure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.klt-reassure-item { display: flex; gap: 12px; align-items: flex-start; }
.klt-reassure-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(37,99,235,.12); color: var(--success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.klt-reassure-t { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.klt-reassure-s { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.klt-reassure-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--border); }
.klt-reassure-cta > p { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); flex: 1; min-width: 220px; }
.klt-btn-primary { height: 48px; padding: 0 22px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(37,99,235,.28); white-space: nowrap; }
@media (max-width: 640px) {
    .klt-wrap { padding: 22px 0 40px; }
    .klt-hero { text-align: left; }
    .klt-hero h1 { font-size: 29px; }
    .klt-hero p { font-size: 15px; margin: 12px 0 0; }
    .klt-search { max-width: none; margin: 18px 0 0; }
    .klt-grid { grid-template-columns: 1fr; }
    .klt-sec > h2, .klt-feat-title { font-size: 18px; }
    .klt-opt { padding: 18px; gap: 12px; }
    .klt-opt-ic { width: 46px; height: 46px; }
    .klt-opt-ic svg { width: 22px; height: 22px; }
    .klt-reassure { padding: 22px; }
    .klt-reassure-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* === Dashboard (cartes, 2 modes) === */
.dash2 { padding: 32px 0 64px; }
.dash2 .dash-header { margin-bottom: 20px; }
.dash-head-text h1 { font-size: 28px; font-weight: 800; }
.dash-hello { margin-top: 4px; font-size: 15px; color: var(--text-muted); }
.dash-new { padding: 11px 20px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }

.dash-usage { max-width: 340px; margin: 0 0 24px; }
.dash-usage-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.dash-usage-details-link { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; }
.dash-usage-details-link:hover { text-decoration: underline; }

.dash-modes { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.dash-mode-btn { min-height: 44px; padding: 0 18px; border: none; border-radius: 9px; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background var(--transition), color var(--transition); }
.dash-mode-btn:hover { color: var(--text); }
.dash-mode-btn.is-active { background: var(--primary); color: #fff; }
.dash-mode-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Hauteur réservée anti-CLS : plancher modeste au 1er affichage, puis la hauteur
   du contenu du dernier passage (localStorage) sert de réserve pendant le chargement
   — l'échange squelette→cartes ne fait plus remonter le pied de page. */
.dash-area { min-height: 320px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .dash-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } }
.dash-group { margin-bottom: 8px; }
.dash-group-title { margin: 18px 0 10px; font-size: 15px; font-weight: 800; color: var(--text); }
.dash-group:first-child .dash-group-title { margin-top: 0; }

.dash-card { position: relative; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: var(--shadow-sm); cursor: pointer; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.dash-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dash-card-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0B0F14; overflow: hidden; }
.dash-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: .5; }
.dash-card-badge { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 64px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; background: var(--surface-2); color: var(--text-muted); }
.dash-card-badge.st-done { background: rgba(37,99,235,.14); color: #2563EB; }
.dash-card-badge.st-processing { background: rgba(217,119,6,.16); color: #B45309; }
.dash-card-badge.st-started { background: rgba(124,58,237,.14); color: #7C3AED; }
[data-theme="dark"] .dash-card-badge.st-done { color: #93B4FF; }
[data-theme="dark"] .dash-card-badge.st-processing { color: #F0B26B; }
[data-theme="dark"] .dash-card-badge.st-started { color: #C4A6FF; }
.dash-card-menu-btn { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: none; border-radius: 9px; background: rgba(17,24,39,.55); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; }
.dash-card-menu-btn:hover { background: rgba(17,24,39,.72); }
.dash-card-menu { position: absolute; top: 42px; right: 8px; min-width: 190px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 6; }
.dash-card-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.dash-card-menu button:hover { background: var(--hover-overlay-strong); }
.dash-card-menu button.danger { color: var(--error-ink); }
.dash-card-body { padding: 10px 12px 12px; }
.dash-card-name { display: block; font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-rename { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border-radius: 8px; border: 1.5px solid var(--primary); background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; }
.dash-card-meta { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.dash-card-gone { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #B45309; line-height: 1.35; }

.dash-skel { pointer-events: none; }
.dash-skel .dash-card-thumb, .dash-skel-bar { background: var(--surface-2); position: relative; overflow: hidden; }
.dash-skel-bar { display: block; height: 11px; border-radius: 6px; margin-top: 8px; }
.dash-skel-bar.short { width: 55%; }
.dash-skel .dash-card-thumb::after, .dash-skel-bar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--hover-overlay-strong), transparent); animation: dashShimmer 1.3s infinite; }
@keyframes dashShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .dash-skel .dash-card-thumb::after, .dash-skel-bar::after { animation: none; } }

.dash-empty { text-align: center; padding: 56px 20px; }
.dash-empty-icon { font-size: 40px; margin-bottom: 12px; }
.dash-empty-title { font-size: 17px; font-weight: 800; color: var(--text); }
.dash-empty-sub { margin: 6px 0 18px; font-size: 14px; color: var(--text-muted); }

.dash-loadmore { display: flex; justify-content: center; margin-top: 24px; }
.dash-loadmore .btn { min-height: 44px; padding: 0 28px; }

@media (max-width: 560px) {
    .dash2 .dash-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dash-new { width: 100%; justify-content: center; }
    .dash-modes { display: flex; width: 100%; }
    .dash-mode-btn { flex: 1; }
}

/* Listes de hashtags par catégorie (pages générateurs). Rendu serveur : ces
   blocs existent dans le HTML brut, Google les indexe sans exécuter de script. */
.tool-hashtag-cats{padding:48px 0}
.tool-hashtag-cats .ht-intro{max-width:760px;margin:0 auto 28px;text-align:center;color:var(--text-muted)}
.ht-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ht-cat{border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--surface,#fff);
        display:flex;flex-direction:column;gap:10px}
.ht-cat h3{margin:0;font-size:15px;font-weight:700}
.ht-cat .ht-tags{margin:0;flex:1;font-size:13.5px;line-height:1.6;color:var(--text-muted);word-break:break-word}
.ht-copy{align-self:flex-start;border:1px solid var(--border);background:transparent;border-radius:8px;
         padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--primary-ink);
         transition:background .15s,border-color .15s}
.ht-copy:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.ht-copy.done{background:var(--primary);border-color:var(--primary);color:#fff}
@media (max-width:600px){.ht-grid{grid-template-columns:1fr}.tool-hashtag-cats{padding:32px 0}}
/* ── BOUTON « + » FLOTTANT ───────────────────────────────────────────────────
   Raccourci vers les outils qui rapportent, disponible partout SAUF quand la
   personne travaille déjà dans un outil (body.tool-engaged / .atelier-active),
   où il ferait concurrence à l'action en cours. */
.klplus {
    position: fixed;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 99, 235, .38);
}
.klplus svg { width: 26px; height: 26px; transition: transform .2s ease; }
.klplus[aria-expanded="true"] svg { transform: rotate(45deg); }
/* Masqué PENDANT le travail seulement : au résultat l'enchaînement vers un
   autre outil redevient une offre utile, et ce rond est alors le SEUL « + »
   de l'écran (celui de la barre basse du résultat a disparu avec elle). */
body.tool-engaged:not(.atelier-result) .klplus,
body.atelier-active:not(.atelier-result) .klplus,
body.rf-full .klplus { display: none; }

.klplus-menu {
    position: fixed;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    width: min(280px, calc(100vw - 32px));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .18);
    overflow: hidden;
    animation: klplus-in .16s ease both;
}
@keyframes klplus-in { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .klplus-menu { animation: none; } }
.klplus-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.klplus-menu a:last-child { border-bottom: 0; font-weight: 800; color: var(--primary-ink); }
.klplus-menu a:hover { background: var(--surface-2); }
.klplus-ic { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }

/* ══ LE RACCOURCI « + » S'EFFACE DEVANT LE RAPPEL D'ACTION ═══════════════════
   Les deux vivaient au même endroit : le rappel d'action des articles occupe
   toute la largeur, de 12 px du bas jusqu'à environ 70 px ; le bouton rond
   occupait 18 à 74 px, à droite. Ils se recouvraient presque entièrement, et le
   rappel passait devant — le bouton devenait inatteignable sur les articles.

   Qui cède : le bouton. Le rappel d'action est l'élément qui convertit sur les
   articles de blog, et l'essentiel du trafic vers les outils vient de là. Le
   raccourci, lui, n'est qu'une commodité — il monte au-dessus plutôt que de
   disparaître, pour rester accessible.

   `:has()` sur le corps de page : la position du bouton dépend d'un élément qui
   n'est pas son voisin dans la structure de la page, et c'est le seul moyen de
   l'exprimer sans JavaScript. Les navigateurs qui l'ignorent gardent l'ancienne
   position — le bouton y reste caché, comme aujourd'hui, jamais pire. */
body:has(.kcta-sticky:not([hidden])) .klplus {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
body:has(.kcta-sticky:not([hidden])) .klplus-menu {
    bottom: calc(154px + env(safe-area-inset-bottom, 0px));
}

/* ══ BARRE DU NAVIGATEUR FIGÉE — TOUT LE SITE, SUR TÉLÉPHONE ═════════════════
   Les navigateurs mobiles ne replient leur barre du bas que si c'est le
   DOCUMENT qui défile. En empêchant le document de défiler et en faisant
   défiler le CORPS de page à sa place, la barre n'a plus de raison de bouger :
   les boutons fixés en bas cessent de sauter, et la hauteur visible cesse de
   varier au fil du geste.

   Pourquoi le CORPS et non un conteneur intérieur : l'en-tête, le contenu et le
   pied de page sont trois blocs frères. Faire défiler seulement le contenu
   figerait le pied de page à l'écran en permanence. Le corps les englobe tous
   les trois, l'ordre naturel est préservé, et l'en-tête collant continue de
   coller — il colle désormais au corps, son nouveau conteneur de défilement.

   Ne s'applique pas aux écrans qui gèrent déjà leur propre hauteur : l'atelier
   des outils et le Studio ont leur coquille et leurs règles, écrites plus loin
   ou dans leur feuille dédiée.
   ========================================================================== */
@media (max-width: 899px) {
    html { height: 100%; overflow: hidden; }
    body {
        height: 100svh;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: none;   /* pas de rebond qui rouvrirait la barre */
        -webkit-overflow-scrolling: touch;
    }
    /* Le Studio pose lui-même sa hauteur ; on lui rend le document. */
    body.stu-seo { height: auto; overflow-y: auto; }
}

/* Feuille de téléchargement — gratuit / à l'unité / Pro. Réutilise cv-overlay et
   cv-sheet (validés) ; chaque option est une ACTION immédiate, pas une sélection.
   Bleu = l'action (achat à l'unité) ; violet réservé à l'étiquette Pro. */
.dls-sheet .ui-h2 { margin: 0 30px 16px; font-size: 1.25rem; font-weight: 800; color: var(--text-primary); text-align: center; letter-spacing: -0.02em; }
.dls-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 2px solid var(--border); background: var(--bg-card); border-radius: 14px; padding: 14px 15px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.dls-opt:hover { border-color: var(--primary); }
.dls-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-input); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.dls-opt-one { border-color: var(--primary); }
.dls-opt-one .dls-ic { background: var(--primary); color: #fff; }
.dls-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dls-txt b { font-size: 15px; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.dls-txt span { font-size: 12.5px; font-weight: 500; color: var(--text-muted); line-height: 1.35; }
.dls-price { flex-shrink: 0; font-size: 16px; font-weight: 800; color: var(--text-primary); text-align: right; }
.dls-price small { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.dls-tag { position: absolute; top: -9px; right: 14px; height: 20px; padding: 0 9px; border-radius: 99px; background: #7C3AED; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; }

/* ══ ÉCRAN DE RÉSULTAT UNIFIÉ (.klr) — SOURCE UNIQUE ═════════════════════════
   Un seul bloc de styles pour l'écran de résultat de TOUS les outils vidéo, la
   feuille de téléchargement (.klsheet) et les cartes de suite (.klr-next).
   Il vit ici, dans la feuille du site, et non dans un gabarit d'outil : la
   feuille et les cartes de suite servent aussi la page /result.
   Jetons du design : surface encastrée et scène (fond du lecteur). Les autres
   valeurs (texte, bordures, bleu, violet) réutilisent les jetons existants.
   ========================================================================== */
:root { --klr-s2: #F1F3F6; --klr-stage: #0E1116; }
[data-theme="dark"] { --klr-s2: #1C2029; --klr-stage: #05070A; }

/* ── LE BLEU DE NUIT DE LA CONSTITUTION ────────────────────────────────────
   L'écran de résultat est un écran d'OUTIL : il vit dans la nuit, comme le
   reste de l'atelier. Les jetons sont redéfinis ICI plutôt qu'hérités, pour la
   raison exacte qui rendait cet écran incohérent : hors atelier le site sert un
   thème clair (`--bg-card` blanc), à l'intérieur il sert la nuit — le MÊME
   écran changeait donc de camp selon l'endroit d'où on l'ouvrait (mesuré :
   colonne droite #FFFFFF hors atelier, #0C1322 dedans, pendant que la colonne
   gauche restait grise dans les deux cas).

   Trois profondeurs, jamais deux : la scène est la plus sombre (le média y est
   posé), la colonne d'information vient au-dessus, les cartes au-dessus encore.
   Sur fond nuit les surfaces se séparent mal (1,06:1 d'une profondeur à
   l'autre) : ce sont les BORDURES et les puces colorées qui portent la
   distinction, jamais l'aplat seul.

   Deux encres changent de valeur, sous peine d'être illisibles : le bleu
   d'action #2563EB tombe à 3,28:1 sur nuit — il devient #8AB4F8 (8,05:1) — et
   le violet Pro #7C3AED devient #C4B5FD (9,19:1). Le vert est proscrit par la
   charte : l'état « optimisé » emprunte donc le bleu.
   Les fenêtres de DÉCISION ouvertes par-dessus (feuille de téléchargement,
   choix d'outil) restent CLAIRES : elles imposent leurs propres jetons.

   La liste couvre TOUS les écrans de résultat du site, pas seulement celui à
   deux colonnes : les outils à sortie TEXTE (hashtags, script) et SOUS-TITRES
   (conversion, traduction) ont leur propre écran, et l'aperçu verrouillé le
   sien. Une seule définition pour tous — un écran de résultat oublié se verrait
   immédiatement, puisqu'il resterait clair au milieu des autres. */
.feature-hero.tool-hero,
.klr,
.hashtag-results,
.script-result,
.subtitle-done,
.locked-preview,
.cv-screen {
    --night: #070B14;
    --night-2: #0C1322;
    --night-3: #131C31;
    --bg: var(--night);
    --bg-card: var(--night-3);
    --bg-input: var(--night-3);
    --bg-secondary: var(--night-2);
    --text: #E8EDF7;
    --text-primary: #E8EDF7;
    --text-muted: #94A3BE;
    --text-muted-strong: #C0CADB;
    --border: rgba(148, 163, 190, .34);
    --border-strong: rgba(148, 163, 190, .52);
    --primary-ink: #8AB4F8;
    --accent-ink: #C4B5FD;
    --success: #8AB4F8;
    --warning-ink: #FBBF24;
    --error-ink: #FCA5A5;
    --klr-s2: var(--night-3);
    --klr-stage: #05080F;
    color: var(--text);
}
/* Mise en page propre au seul écran à deux colonnes — surtout pas imposée aux
   écrans texte, qui sont centrés et bornés en largeur. */
.klr { width: 100%; align-self: stretch; text-align: left; }
/* Les écrans de résultat SANS scène (texte, sous-titres, aperçu verrouillé)
   n'avaient pas de surface à eux : ils flottaient sur le fond de la page. Ils
   reçoivent le même panneau que l'écran à deux colonnes, pour que tous les
   résultats du site se ressemblent. */
.hashtag-results,
.script-result,
.subtitle-done,
.locked-preview,
.cv-screen {
    background: var(--night-2);
    border: 1px solid var(--border);
    border-radius: 16px;
}

/* --- Fichier expiré / accès refusé : même écran pour tous les outils --- */
.klr-exp { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 20px; }
.klr-exp-ic {
    width: 62px; height: 62px; margin-bottom: 16px; border-radius: 18px;
    background: var(--klr-s2); border: 1px solid var(--border); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
}
.klr-exp-ic svg { width: 28px; height: 28px; }
.klr-exp-t { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.klr-exp-s { margin: 8px 0 20px; max-width: 340px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--text-muted-strong); }
.klr-restart {
    display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px;
    border: none; border-radius: 12px; background: var(--primary); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.klr-restart svg { width: 17px; height: 17px; }

/* --- Scène : le média d'abord. Pleine largeur de l'écran sur téléphone, coins
       carrés ; la hauteur suit le format du média (--klr-h), jamais plein écran. --- */
.klr-scene { position: relative; padding: 12px 0 0; }
.klr-scene.is-flat { padding: 14px 0 0; }
.klr-player { display: block; }
.klr-scene .kp { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.klr-img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Ni lecteur ni image (audio, archive, sous-titres, diaporama ZIP) : carte fichier. */
.klr-file {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 22px 16px; border-radius: 14px; border: 1.5px solid var(--border);
    background: var(--bg-card); text-align: center;
}
.klr-file-ic {
    width: 48px; height: 48px; border-radius: 14px; background: var(--klr-s2);
    color: var(--text-muted-strong); display: flex; align-items: center; justify-content: center;
}
.klr-file-ic svg { width: 24px; height: 24px; }
.klr-file-n { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.klr-file-s { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.klr-audio { width: 100%; max-width: 420px; margin-top: 8px; }

/* --- Ligne de confirmation + comparateur Résultat / Origine --- */
.klr-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px 0; }
.klr-ok { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-muted-strong); }
.klr-ok-ic { display: inline-flex; color: var(--primary-ink); }
.klr-ok-ic svg { width: 15px; height: 15px; }
.klr-ok.is-optimized .klr-ok-ic { color: var(--success); }
.klr-ok.is-heavier .klr-ok-ic { color: var(--warning-ink); }

/* --- Colonne d'action. Le téléchargement a rejoint la barre de travail : la
       place du bas est réservée par body.atelier-go (styles-outils), une seule
       fois, pour la barre basse de la coquille. --- */
/* Les fonds des deux colonnes valent à TOUTES les largeurs : ils ne vivaient que
   dans la règle « ordinateur », si bien que sur téléphone les colonnes restaient
   transparentes — des cartes nuit flottaient alors sur la page claire, et tout
   texte posé hors carte devenait clair sur clair. */
.klr-main { background: var(--night-2); }
.klr-stage { background: var(--night); }
.klr-side { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; background: var(--night-2); }

.klr-hd { max-width: none; margin: 0; text-align: left; }

/* Encart de vente dans la COLONNE du résultat : même composant que la planche de
   clips (.klc-offer), à la largeur d'une colonne de 400 px — le corps et l'action
   s'y empilent au lieu de se disputer une seule ligne. Rien d'autre ne change. */
.klr-offer { margin: 0; }
.klr-side .klr-offer .klc-offer-body { min-width: 0; flex-basis: 100%; }
.klr-side .klr-offer .klc-offer-cta { flex-basis: 100%; }
.klr-side .klr-offer .btn { width: 100%; min-height: 44px; }

/* --- Pastilles d'information --- */
.klr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.klr-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    min-height: 28px; padding: 0 10px; border-radius: 99px;
    background: var(--klr-s2); border: 1px solid var(--border);
    font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}
.klr-chip b { color: var(--text); font-weight: 800; }
/* État « conforme » : l'information est portée par le LIBELLÉ de la puce, pas
   par une teinte propre — le liseré ne fait que la souligner. */
.klr-chip.is-ok { color: var(--primary-ink); border-color: rgba(138, 180, 248, .45); }
.klr-note { margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--text-muted); }

/* --- Artefact annexe (sous-titres .srt, « conserver l'original ») --- */
.klr-sec {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 13px;
    border: 1.5px solid var(--border); border-radius: 11px; background: var(--bg-card);
    color: var(--text); font-family: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.klr-sec-ic {
    width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--klr-s2);
    color: var(--text-muted-strong); display: flex; align-items: center; justify-content: center;
}
.klr-sec-ic svg { width: 16px; height: 16px; }
.klr-sec-b { flex: 1; min-width: 0; }
.klr-sec-b b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.klr-sec-b span { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.klr-sec-a { width: 16px; height: 16px; flex: none; color: var(--text-muted); }

/* --- Cartes de suite : neutres, JAMAIS la couleur d'action (elle appartient au
       seul bouton de téléchargement). Partagées avec la page /result. --- */
.klr-next { display: flex; flex-direction: column; gap: 8px; }
.klr-card-pro { flex: none; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; color: var(--accent-ink); border: 1px solid rgba(196, 181, 253, .45); }
.klr-card-a { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.klr-sec:hover { border-color: var(--border-strong); }

/* --- Bouton UNIQUE de suite : il ouvre la fenêtre de choix d'outil. Neutre comme
       les autres cartes ; le bleu reste au seul bouton de téléchargement, sauf la
       petite tuile d'icône qui signale que c'est une action (jamais un aplat). --- */
.klr-chain {
    display: flex; align-items: center; gap: 11px; width: 100%; min-height: 60px; padding: 10px 13px;
    border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-card);
    font-family: inherit; text-align: left; cursor: pointer; color: var(--text);
    box-shadow: var(--shadow-sm);
}
.klr-chain:hover { border-color: var(--border-strong); }
.klr-chain-ic {
    width: 36px; height: 36px; flex: none; border-radius: 10px;
    background: rgba(77, 130, 243, .20); color: var(--primary-ink);
    display: flex; align-items: center; justify-content: center;
}
.klr-chain-ic svg { width: 18px; height: 18px; }
.klr-chain-b { flex: 1; min-width: 0; }
.klr-chain-b b { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.klr-chain-b span { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--text-muted); }

/* --- Fenêtre de choix d'outil (.klch). Réutilise l'ossature de la modale
       (.modal-overlay / .modal-card / .modal-sheet-handle) : feuille remontant du
       bas sur téléphone, dialogue centré sur ordinateur.

       ÉCRAN DE DÉCISION, donc CLAIR EN TOUTES CIRCONSTANCES — on choisit la suite,
       on ne travaille pas. Il REDÉFINIT ses jetons plutôt que d'en hériter : il
       s'ouvre depuis l'atelier, qui repeint `--bg-card`/`--text`/`--border` en nuit
       sur le conteneur. Sans cela, la carte basculait en nuit (mesuré #0C1322) avec
       des puces d'icône restées gris CLAIR — des pavés lumineux sur fond noir — et
       un badge Pro à 3,26:1, sous le seuil de 4,5:1.

       Les jetons ne sont posés QUE sous `.klch` : les modales de connexion, de
       tarifs et de notification partagent `.modal-card` et gardent leur thème.

       Chaque tuile a sa SURFACE propre (blanche sur carte #F5F7FA) : elles étaient
       du blanc sur blanc, mesuré à 1,00:1, une bordure pâle pour seule limite. La
       puce porte le bleu d'action, là où un gris se confondait avec le fond. --- */
.klch .modal-card {
    --bg-card: #FFFFFF;
    --text: #111827;
    --text-muted: #4B5563;
    --text-muted-strong: #374151;
    --border: #E3E7EE;
    --border-strong: #C3CCDC;
    --accent-ink: #6D28D9;
    max-width: 720px; padding: 26px 22px 24px;
    background: #F5F7FA; color: var(--text);
}
.klch .modal-sheet-handle { background: #D7DDE7; }
.klch .modal-close { color: var(--text-muted); }
.klch .modal-close:hover { color: var(--text); }
.klch-h { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.klch-s { margin: 5px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-muted); }
.klch-sec { margin-top: 18px; }
.klch-lab { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.klch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 10px; }
.klch-t {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 9px 11px;
    border: 1.5px solid #C3CCDC; border-radius: 12px; background: var(--bg-card);
    font-family: inherit; text-align: left; cursor: pointer; color: var(--text);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.klch-t:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(37, 99, 235, .12); }
.klch-t:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
/* Le groupe mis en avant se distingue par son TITRE, sa TAILLE et son élévation —
   jamais par la seule couleur (WCAG 1.4.1). */
.klch-sec.is-top .klch-t { min-height: 68px; padding: 12px 13px; border-color: rgba(37, 99, 235, .38); box-shadow: 0 3px 10px rgba(17, 24, 39, .08); }
.klch-sec.is-top .klch-t-ic { width: 40px; height: 40px; border-radius: 11px; }
.klch-sec.is-top .klch-t-ic svg { width: 19px; height: 19px; }
.klch-sec.is-top .klch-t-b b { font-size: 15px; font-weight: 800; }
.klch-sec.is-top .klch-t-b span { font-size: 11.5px; }
.klch-t-ic {
    width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(37, 99, 235, .10);
    color: #1D4ED8; display: flex; align-items: center; justify-content: center;
}
.klch-t-ic svg { width: 17px; height: 17px; }
.klch-t-b { flex: 1; min-width: 0; }
.klch-t-b b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.klch-t-b span { display: block; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--text-muted); }
/* Le violet ne sert QU'à dire « Pro » ; sur fond clair il tient ses 4,5:1. */
.klch .klr-card-pro { color: #6D28D9; border-color: rgba(109, 40, 217, .45); background: rgba(124, 58, 237, .08); }
.klch-studio {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 22px; padding: 9px 11px;
    border: 1.5px solid #C3CCDC; border-radius: 12px; background: var(--bg-card);
    font-family: inherit; text-align: left; cursor: pointer; color: var(--text);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}
.klch-studio:hover { border-color: var(--primary); box-shadow: 0 8px 26px rgba(37, 99, 235, .12); }
.klch-studio .klch-t-ic { background: rgba(124, 58, 237, .12); color: #6D28D9; }

/* --- Ordinateur : scène à gauche, colonne d'information à droite. Le nom du
       fichier et l'action vivent dans la barre de travail, au-dessus. --- */
@media (min-width: 900px) {
    .klr-main { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--night-2); }
    .klr-cols { display: flex; align-items: stretch; }
    /* La scène est la profondeur la PLUS sombre : le média y est posé, rien ne
       doit rivaliser avec lui. La colonne d'information vient un ton au-dessus. */
    .klr-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; background: var(--night); }
    /* Hauteur MINIMALE, jamais fixe : un résultat 9:16 mesure jusqu'à 560px de
       haut (data-maxh du lecteur) — une hauteur figée lui coupait le bas sur
       ordinateur. La scène suit le média ; 420px reste le plancher du 16:9. */
    .klr-scene { width: 100%; max-width: 560px; min-height: 420px; margin-left: 0; border-radius: 12px; display: flex; align-items: center; }
    .klr-scene > .klr-player { flex: 1; min-width: 0; }
    .klr-scene.is-flat { min-height: 0; height: auto; padding: 0; display: block; }
    .klr-scene .kp { border-radius: 12px; }
    /* La phrase de confirmation reste sous le média à TOUTES les largeurs : elle
       vivait dans le bandeau haut sur ordinateur, or ce bandeau faisait doublon
       avec la barre de travail et a été retiré. C'est la seule voix qui dit
       « fichier plus lourd qu'à l'entrée » — elle ne pouvait pas disparaître. */
    .klr-meta { padding: 0; justify-content: center; }
    .klr-side { flex: 0 0 400px; padding: 20px; gap: 16px; border-left: 1px solid var(--border); background: var(--night-2); }
    .klr-exp-t { font-size: 21px; }
}
@media (max-width: 899px) {
    body.klr-on .feature-hero.tool-hero { padding-top: 0; }
}

/* ══ FEUILLE DE TÉLÉCHARGEMENT (.klsheet) — gratuit / à l'unité / Pro ════════
   Téléphone : feuille ancrée en bas. Ordinateur : carte centrée 460px.
   Chaque rangée est une ACTION immédiate, jamais une sélection à confirmer.

   C'est un écran de DÉCISION, donc CLAIR — « on travaille dans le noir, on
   récupère dans la lumière ». La feuille REDÉFINIT donc ses propres jetons au
   lieu d'hériter : elle s'ouvre depuis l'atelier, qui repeint `--bg-card`/
   `--text`/`--border` en nuit sur le conteneur. Sans cela elle basculait en
   nuit (mesuré : carte #0C1322, note à 3,51:1 et violet Pro à 3,26:1, sous le
   seuil de 4,5:1). Elle reste claire EN TOUTES CIRCONSTANCES — ni la nuit de
   travail ni le thème sombre du site ne la retournent.

   Les trois rangées ont le MÊME poids visuel, chacune sa surface propre : la
   rangée payante était un aplat bleu, et cette dominance faisait lire les deux
   autres comme du texte — elles n'avaient d'ailleurs aucune surface à elles
   (fond identique à la feuille, mesuré à 1,00:1, une bordure à 1,24:1 pour
   seule limite). Ce qui identifie une rangée est désormais sa PUCE colorée et
   son prix lisible, pas un remplissage qui écrase ses voisines.
   Bleu = l'action ; le violet ne sert qu'à la rangée Pro.
   ========================================================================== */
.klsheet-ov {
    position: fixed; inset: 0; z-index: 1000; background: rgba(5, 7, 10, .42);
    display: flex; align-items: flex-end; justify-content: center;
    animation: klr-fade .18s ease both;
}
.klsheet {
    --bg-card: #FFFFFF;
    --text: #111827;
    --text-muted: #4B5563;
    --text-muted-strong: #374151;
    --border: #E3E7EE;
    --border-strong: #D1D5DB;
    position: relative; width: 100%; max-height: 92vh; overflow-y: auto;
    background: #F5F7FA; border: 1px solid var(--border); border-radius: 18px 18px 0 0;
    padding: 14px 14px calc(22px + env(safe-area-inset-bottom, 0px));
    color: var(--text);
    box-shadow: 0 -18px 70px rgba(17, 24, 39, .22);
    animation: klr-sheet .2s cubic-bezier(.22, 1, .36, 1) both;
}
.klsheet-grip { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 99px; background: #D7DDE7; }
.klsheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.klsheet-h p { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.klsheet-x {
    width: 44px; height: 44px; flex: none; border: none; border-radius: 10px;
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.klsheet-x:hover { background: #ECEFF4; color: var(--text); }
.klsheet-x svg { width: 16px; height: 16px; }
.klsheet-rows { display: flex; flex-direction: column; gap: 10px; }
/* La rangée est une CARTE posée sur la feuille : surface propre (blanc sur
   #F5F7FA), bordure et ombre — trois indices plutôt qu'un seul trait pâle. */
.klsheet-row {
    display: flex; align-items: center; gap: 13px; width: 100%; min-height: 64px; padding: 13px 15px;
    border: 1.5px solid #C3CCDC; border-radius: 12px; background: var(--bg-card);
    color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
    transition: border-color .2s, box-shadow .2s;
}
.klsheet-row:hover { border-color: var(--primary); box-shadow: 0 8px 26px rgba(37, 99, 235, .12); }
.klsheet-row:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
.klsheet-row[disabled] { opacity: .55; cursor: default; }
/* La PUCE est le repère qui dit « ceci se clique » — elle porte le bleu
   d'action, là où un gris se confondait avec le fond. */
.klsheet-row-ic {
    width: 38px; height: 38px; flex: none; border-radius: 10px; background: rgba(37, 99, 235, .10);
    color: #1D4ED8; display: flex; align-items: center; justify-content: center;
}
.klsheet-row-ic svg { width: 17px; height: 17px; }
.klsheet-row-b { flex: 1; min-width: 0; line-height: 1.35; }
.klsheet-row-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; font-weight: 800; }
.klsheet-row-s { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* Le prix se LIT (19px, encre pleine) au lieu de se deviner dans un cadre
   pointillé de 12px : c'est l'information qui départage les trois rangées. */
.klsheet-price { flex: none; font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: .02em; text-align: right; line-height: 1.1; }
.klsheet-price small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.klsheet-row.is-one { border-color: rgba(37, 99, 235, .38); }
.klsheet-row.is-pro { background: #EEF3FE; border-color: rgba(37, 99, 235, .38); }
.klsheet-row.is-pro .klsheet-row-ic { background: rgba(124, 58, 237, .14); color: #6D28D9; }
.klsheet-badge { padding: 1px 4px; border: 1px solid rgba(109, 40, 217, .5); border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #6D28D9; }
@media (min-width: 900px) {
    .klsheet-ov { align-items: center; padding: 18px; }
    .klsheet { width: 460px; max-width: 100%; border-radius: 16px; padding: 20px; }
    .klsheet-grip { display: none; }
}
/* Aucune variante sombre : un écran où l'on RÉCUPÈRE et où l'on DÉCIDE reste
   clair en toutes circonstances — ni la nuit de travail de l'atelier, ni le
   thème sombre du site ne le retournent. Les deux surfaces de décision du
   parcours (cette feuille et la fenêtre « Continuer avec cette vidéo ») suivent
   la même règle, pour qu'un même geste ne change jamais d'apparence. */
@keyframes klr-fade { from { opacity: .001; } to { opacity: 1; } }
@keyframes klr-sheet { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .klsheet-ov, .klsheet { animation: none; }
    .klr .kl-fill { transition: none; }
}

/* Repères vérifiés — module de données chiffrées et datées des pages-outils.
   Sobriété volontaire : surfaces neutres, la DATE est l'élément saillant
   (pastille bordée), aucun bleu d'action — ce n'est pas un élément cliquable. */
.klfacts { padding: 0 0 56px; }
.klfacts-card { max-width: 860px; margin: 0 auto; border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg-card); padding: 22px 22px 8px; }
.klfacts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.klfacts-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.klfacts-title svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.klfacts-date { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-input); font-size: 11.5px; font-weight: 700; color: var(--text-muted-strong); white-space: nowrap; }
.klfacts-rows { margin: 10px 0 0; padding: 0; list-style: none; }
.klfacts-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 2px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.klfacts-rows li b { color: var(--text-primary); font-weight: 800; white-space: nowrap; }
.klfacts-src { margin: 10px 2px 12px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 600px) { .klfacts-card { padding: 16px 14px 6px; } .klfacts-rows li { gap: 10px; } }

/* Theme sombre : bleus/violets vifs remplaces par leurs variantes claires
   (convention du projet) pour les liens editoriaux, le sommaire et l'invite
   de creation de compte — lisibilite >= 4,5:1. */
[data-theme="dark"] .blog-post-content p a { color: #93C5FD; }
.blog-post-content p a { text-decoration: underline; }
[data-theme="dark"] .blog-toc-num, [data-theme="dark"] .blog-toc-label { color: #93C5FD; }
[data-theme="dark"] .auth-alt a { color: #93C5FD; }
.auth-alt a { text-decoration: underline; }
/* Le libelle suit le jeton de son contexte : ces bascules vivent aussi bien sur
   le studio clair que dans le heros-outil, qui est nuit dans les DEUX themes.
   Une valeur en dur y laissait un gris de theme clair sur fond nuit (mesure :
   2,24:1 sur le convertisseur de sous-titres). */
.segmented-btn span { color: var(--text-muted); }
.segmented-btn.active span { color: #fff; }

/* Mur de credits : une OFFRE, pas une erreur — cadre bleu d'action, icone cadeau. */
.drop-zone-hero.credits-wall { cursor: default; border: 2px solid var(--primary); background: rgba(37, 99, 235, .04); }
.drop-zone-hero.credits-wall .drop-icon-badge { background: rgba(37, 99, 235, .12); color: var(--primary-ink); }
[data-theme="dark"] .drop-zone-hero.credits-wall { background: rgba(37, 99, 235, .08); }

/* Invitation post-téléchargement (visiteur anonyme) : compte + crédits offerts. */
.klr-post-dl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-input); }
.klr-post-dl-txt { flex: 1; min-width: 200px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--text); }
.klr-post-dl-txt a { color: var(--primary-ink); text-decoration: underline; }

/* Annonce de qualite superieure des le collage du lien : informatif seulement,
   aucune action ici (l'achat reste dans la feuille de telechargement). */
.url-peek-hd { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.url-peek-hd strong { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 700; color: var(--text); }

/* === Page publique du bareme de credits (/credits) ===
   Reprend les composants deja valides des pages de comparaison (compare-page,
   compare-section, compare-table, compare-verdict-card) : seuls les quelques
   elements propres a la page sont declares ici. */
.klcr-h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 12px; color: var(--text); }
.klcr-p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 16px; max-width: 720px; }
.klcr-rules { margin: 0 0 16px; padding-left: 22px; }
.klcr-rules li { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 8px; }
.klcr-list { color: var(--text); font-size: 0.92rem; line-height: 1.9; margin-bottom: 16px; }
.klcr-note { display: block; margin-top: 4px; font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.klcr-page .compare-table td[data-cell="free"],
.klcr-page .compare-table td[data-cell="rate"],
.klcr-page .compare-table td[data-cell="cap"],
.klcr-page .compare-table td[data-cell="example"] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.klcr-page .compare-table td[data-cell="example"] { font-weight: 700; color: var(--text); }
.klcr-page .compare-table td:first-child { min-width: 180px; }
.klcr-page .compare-verdict-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 8px; }
.klcr-page .compare-verdict-card p:last-child { margin-bottom: 0; }

/* ===== HEROS PAGE-OUTIL — porte depuis page-outil-hero.dc.html =====
   Couvre le fil d'Ariane, le titre/sous-titre/avis de compatibilite, l'etat
   "outil indisponible" et la zone d'entree des variantes FICHIER et FICHIER+LIEN
   (12 outils fichier + bg_remover + 8 "both" = 21 pages). Les variantes lien seul,
   sujet libre et fichier de sous-titres restent sur leur habillage existant
   (templates/tool/ecrans-transverses.html, hors perimetre shell-haut.html) — voir
   le rapport d'integration pour le detail.
   Jetons --kl-* de la maquette, portee limitee (comme .khm-hero de home.css) : 6
   jetons different des jetons globaux (surface2, text2, text3, borderS, field,
   shadowC). Etendu a .tool-breadcrumb, hors de .tool-hero dans le DOM (fil
   d'Ariane rendu par un fragment separe), qui reutilise text2/text3.
   Le heros est NUIT dans les deux themes : la Constitution ne se decline pas en
   clair/sombre, elle EST la nuit. Les jetons ci-dessous portent donc les valeurs
   de la maquette, sans variante [data-theme] — c'est ce qui fait basculer d'un
   coup le titre, le sous-titre, les mentions de format et le fil d'Ariane. */
.tool-hero, .tool-breadcrumb {
  --kl-surface2: var(--night-3, #131C31);
  --kl-text: #FFFFFF;
  --kl-text2: var(--muted-d, #94A3BE);
  --kl-text3: var(--muted-d, #94A3BE);
  --kl-borderS: var(--line-d, rgba(77,130,243,.14));
  --kl-field: var(--night, #070B14);
  --kl-shadowC: 0 24px 80px rgba(0,0,0,.5);
  /* L'ENCRE ET LA SURFACE VONT ENSEMBLE. Ce bloc passait l'encre en blanc pour
     le héros NUIT, mais laissait `--kl-menu`/`--kl-hover`/`--kl-border` sur leurs
     valeurs CLAIRES : le menu du compte, ouvert depuis la barre de l'atelier
     (qui vit dans ce héros), se peignait donc en blanc avec des libellés blancs
     — « Dashboard » et « Paramètres » invisibles, seul « Déconnexion » se
     devinant en rouge pâle (constat du 18/08/2026). Une demi-palette n'est
     jamais une palette : les trois jetons de SURFACE suivent l'encre. */
  --kl-menu: var(--night-2, #0D1524);
  --kl-hover: rgba(255, 255, 255, .07);
  --kl-border: var(--line-d, rgba(77, 130, 243, .14));
}

/* Fil d'Ariane : selecteurs a 2+ classes pour battre .tool-breadcrumb a/span posees
   par templates/tool/styles-shell.html (un <style> inline place plus tard dans le
   document, qui gagnerait sinon a specificite egale). Typographie mono de la
   maquette (.crumbs), et plus aucun retrait propre : il vit dans la colonne du
   heros, son espacement vient du gap de .tho-col. */
.tool-hero .tool-breadcrumb { padding: 0; }
.tool-breadcrumb .tho-crumb-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--kl-text3); min-width: 0; }
.tool-breadcrumb .tho-crumb-link { color: inherit; text-decoration: none; font-weight: 500; }
.tool-breadcrumb .tho-crumb-link:hover { color: #fff; text-decoration: none; }
.tool-breadcrumb .tho-crumb-sep { color: var(--beam-bright, #4D82F3); flex-shrink: 0; margin: 0; }
.tool-breadcrumb .tho-crumb-current { color: #E8EDF7; font-weight: 500; }

/* Grille tete+entree / visuel. Mobile : empilement plat (gap 12px, comme bodyM de
   la maquette). Ordinateur (>=960px, meme seuil que .khm-hero) : grille 2 colonnes.
   --grid--solo (etape options, ou seul le titre reste visible) retombe a 1 colonne
   pour que la 2e piste vide n'ouvre pas de trou : x-show="display:none" retire
   l'element mais PAS la piste de grille qu'il occupait. */
/* .feature-hero et .tool-hero imposent text-align:center à tout le héros ; la
   maquette, elle, aligne à gauche (elle hérite de `start`). On rétablit ici, sans
   toucher aux règles partagées dont dépendent les étapes options/traitement/résultat.
   Le seul centrage voulu par la maquette est celui du titre de dépôt, qui porte
   son propre text-align. */
.tho-grid { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; text-align: left; }
.tho-grid > * { min-width: 0; }
.tho-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 960px) {
  .tho-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.92fr); column-gap: 44px; row-gap: 16px; align-items: center; }
  /* La maquette a ete dessinee dans une fenetre de 1366 px ou le heros occupe
     presque toute la largeur ; le site borne .container a 1200 px et ce conteneur
     enveloppe AUSSI les etapes options/traitement/resultat, qu'on ne veut pas
     deplacer. Le heros seul sort donc du conteneur, recentre sur la fenetre.
     Meme arbitrage que sur l'accueil (proprietaire, 12/08/2026). */
  .tho-grid {
    width: min(1278px, 100vw - 88px);
    margin-left: calc((100% - min(1278px, 100vw - 88px)) / 2);
    margin-right: calc((100% - min(1278px, 100vw - 88px)) / 2);
  }
  .tho-grid.tho-grid--solo { grid-template-columns: 1fr; }
  .tho-col { gap: 16px; }
}

/* upload-hero (sujet libre / lien seul / sous-titres) porte, depuis son ancienne
   place hors grille, une largeur et un centrage qui n'ont plus de sens dans
   .tho-col : max-width:none + margin:32px auto 0 puis margin-top:14px (regles
   generales ci-dessus, gardees telles quelles). Ici il doit se comporter comme
   .tho-shell : 100% de la colonne, aligne a gauche, sans marge propre — l'espace
   au-dessus vient du gap de .tho-col. Specificite (4 classes) volontairement
   superieure a .feature-hero.tool-hero .upload-hero pour gagner sur margin-top. */
.feature-hero.tool-hero .tho-col .upload-hero { width: 100%; max-width: none; margin: 0; }
/* Les blocs de reglage des variantes "sujet libre" / sous-titres portent encore
   `max-width:600px; margin:auto` de l'epoque ou l'entree etait un bloc centre au
   milieu du heros. Dans la colonne de gauche ils doivent suivre la coque : meme
   largeur, meme bord gauche. Sans cela les libelles flottaient a des retraits
   differents d'un bloc a l'autre. */
.tho-col .script-field-block,
.tho-col .script-generate-wrap,
.tho-col .script-examples,
.tho-col .script-generating-card { max-width: 560px; margin-left: 0; margin-right: 0; }
.tho-col .script-generate-wrap .tho-primary { max-width: 320px; }
/* Espacement uniforme entre les blocs d'une entree (coque, reglages, bouton,
   mentions) : ils empilaient des marges propres, d'ou des ecarts differents
   d'un outil a l'autre — jusqu'au chevauchement sur le convertisseur. */
.tho-col .upload-hero { display: flex; flex-direction: column; gap: 14px; }

/* Tete : titre + sous-titre + avis de compatibilite (compat_notice / preUploadNotice). */
.tho-head { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
/* .tool-hero h1 (ligne 3388) impose 2.2rem/1.2 avec une spécificité supérieure :
   le sélecteur doit la dépasser, sinon la valeur de la maquette ne s'applique pas. */
/* Titre : typographie d'AFFICHAGE de la Constitution (Anton, capitales), aux
   valeurs exactes de la maquette (.hero--tool h1). La police est déclarée par
   projection.css, chargé sur toutes les pages-outil ; le repli Impact garde la
   même impression de condensé si elle tarde. */
.tool-hero .tho-title { margin: 0; font-family: var(--display, "Anton", Impact, "Arial Narrow", sans-serif); font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 4.6vw, 60px); color: var(--kl-text); letter-spacing: .005em; line-height: 1.06; }
/* Karaoké du titre — valeurs de la maquette (.cap-live). Le mot actif est
   allumé par projection.min.js sur [data-kara], et seulement quand le bloc est
   à l'écran ; `prefers-reduced-motion` fige le deuxième mot au lieu d'animer. */
.tool-hero .cap-live { display: inline-flex; gap: .2em; background: rgba(0,0,0,.55); border: 1px solid rgba(255,211,77,.25); border-radius: .16em; padding: .07em .16em; margin-left: -.16em; vertical-align: baseline; }
.tool-hero .cap-live .w { color: rgba(255,255,255,.78); transition: color .12s; }
.tool-hero .cap-live .w.on { color: var(--caption, #FFD34D); text-shadow: 0 0 22px rgba(255,211,77,.55); }
.tho-subtitle { margin: 0; font-size: 16px; font-weight: 400; color: var(--kl-text2); line-height: 1.55; max-width: 520px; }
.tho-warn { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--kl-text3); line-height: 1.45; max-width: 520px; }
.tho-warn-ic { flex-shrink: 0; margin-top: 1px; display: flex; }
@media (min-width: 960px) {
  /* le titre suit désormais le clamp de la maquette : pas de palier ici */
  .tho-subtitle { font-size: 18.5px; }
}

/* Outil indisponible (toolMaintenance) : encadre ambre qui REMPLACE la zone
   d'entree. cvQuota (limite convertisseur) n'est pas modelise par la maquette et
   garde sa carte existante (.tool-maintenance, inchangee) juste en-dessous. */
.tho-down { width: 100%; border-radius: 18px; background: var(--night-2, #0C1322); border: 1.5px solid var(--line-d, rgba(77,130,243,.14)); box-shadow: 0 8px 28px rgba(0,0,0,.35); padding: 16px; display: flex; align-items: flex-start; gap: 11px; }
.tho-down-ic { flex-shrink: 0; display: flex; }
.tho-down-text { min-width: 0; }
.tho-down-title { margin: 0; font-size: 15px; font-weight: 800; color: #fff; }
.tho-down-body { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--muted-d, #94A3BE); line-height: 1.5; }
.tho-down-cta { margin-top: 14px; }
@media (min-width: 960px) { .tho-down { padding: 22px; } }

/* Coque commune de la zone d'entree (variantes fichier / fichier+lien). Bordure
   pointillee : les deux variantes ici sont "fichier-like" (isFileKind, maquette).
   Peau Projection : coque nuit (.drop de la maquette), quel que soit le thème
   du site — la coque est un COMPOSANT applicatif, pas du contenu éditorial. */
/* La coque prend le trait PLEIN de la carte .drop de la maquette ; le pointillé
   passe sur la cible de dépôt, à l'intérieur (.tho-dropcall-desktop). */
.tho-shell { width: 100%; max-width: 560px; border-radius: 14px; background: var(--night-2, #0C1322); border: 1px solid var(--line-d, rgba(77,130,243,.14)); box-shadow: 0 24px 80px rgba(0,0,0,.5); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .16s ease, background-color .16s ease; cursor: pointer; }
.tho-shell.tho-drag { border-color: var(--beam-bright, #4D82F3); }
.tho-shell.tho-uploading { cursor: default; }
@media (min-width: 960px) { .tho-shell { padding: 22px; gap: 13px; } }

/* Appel de depot — mobile : bouton seul (dropCall mobile). Ordinateur : cible
   pointillee (icone + titre) puis bouton pleine largeur SOUS elle, comme la
   maquette (.drop-zone puis .drop-row). */
.tho-dropcall-mobile { display: block; }
.tho-dropwrap, .tho-dropcall-desktop { display: none; }
.tho-dropcall-ic { width: 42px; height: 42px; border-radius: 10px; background: rgba(37,99,235,.16); display: flex; align-items: center; justify-content: center; color: var(--beam-bright, #4D82F3); transition: background-color .16s, color .16s; }
.tho-shell.tho-drag .tho-dropcall-ic { background: rgba(37,99,235,.28); color: var(--beam-bright, #4D82F3); }
.tho-dropcall-title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; text-align: center; }
.tho-shell.tho-drag .tho-dropcall-title { color: var(--beam-bright, #4D82F3); }
.tho-dropcall-btnwrap { width: 100%; max-width: 260px; }
@media (min-width: 960px) {
  .tho-dropcall-mobile { display: none; }
  .tho-dropwrap { display: flex; flex-direction: column; gap: 14px; }
  .tho-dropcall-desktop { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1.5px dashed rgba(77,130,243,.4); border-radius: 10px; padding: 20px 18px; transition: border-color .2s, background .2s; }
  .tho-shell:hover .tho-dropcall-desktop, .tho-shell.tho-drag .tho-dropcall-desktop { border-color: var(--beam-bright, #4D82F3); background: rgba(37,99,235,.08); }
  .tho-dropcall-btnwrap { max-width: none; }
}

/* Preparation (rotateur + nom de fichier + barre + pourcentage). */
.tho-prep { display: flex; flex-direction: column; gap: 11px; }
.tho-prep-head { display: flex; align-items: center; gap: 10px; }
.tho-spin { width: 20px; height: 20px; border: 2.5px solid var(--line-d, rgba(77,130,243,.14)); border-top-color: var(--beam-bright, #4D82F3); border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
.tho-prep-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tho-prep-status { display: block; font-size: 14.5px; font-weight: 800; color: #fff; }
.tho-prep-name { display: block; font-size: 12px; font-weight: 600; color: var(--muted-d, #94A3BE); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tho-prep-pct { font-size: 15px; font-weight: 800; color: var(--beam-bright, #4D82F3); flex-shrink: 0; }
.tho-prep-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); border: 0; overflow: hidden; }
.tho-prep-fill { display: block; height: 100%; background: var(--beam-bright, #4D82F3); border-radius: 99px; transition: width .3s ease; }
.tho-prep-note { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--muted-d, #94A3BE); }
@media (prefers-reduced-motion: reduce) { .tho-spin { animation: none; } }

/* Erreur (format / poids / lien / import). */
.tho-errbox { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: 12px; background: var(--night-3, #131C31); border: 1.5px solid rgba(248,113,113,.35); }
.tho-errbox-row { display: flex; align-items: flex-start; gap: 9px; }
.tho-errbox-ic { flex-shrink: 0; }
.tho-errbox-text { min-width: 0; }
.tho-errbox-title { margin: 0; font-size: 14px; font-weight: 800; color: #fff; }
.tho-errbox-hint { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--muted-d, #94A3BE); line-height: 1.45; }
.tho-errbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.tho-errbox-note { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted-d, #94A3BE); }

/* Boutons — primary()/ghost() de la maquette. */
.tho-primary { width: 100%; min-height: 54px; padding: 0 20px; border: none; border-radius: 14px; background: var(--primary); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 8px rgba(37,99,235,.26); flex-shrink: 0; transition: background-color .16s; }
.tho-primary svg { flex-shrink: 0; }
.tho-primary:disabled { border: 1.5px solid var(--line-d, rgba(77,130,243,.14)); background: var(--night-3, #131C31); color: var(--muted-d, #94A3BE); box-shadow: none; cursor: not-allowed; }
.tho-primary--auto { width: auto; }
.tho-ghost { min-height: 44px; padding: 0 15px; border: 1.5px solid var(--line-d, rgba(77,130,243,.14)); border-radius: 11px; background: transparent; color: #E8EDF7; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tho-ghost:hover { border-color: var(--beam-bright, #4D82F3); color: var(--beam-bright, #4D82F3); }
.tho-ghost svg { color: inherit; flex-shrink: 0; }
.tho-linkrow-btn { width: 100%; }
/* Plus de largeur « auto » sur grand ecran : voir la note de .tho-linkrow-row. */
.tho-spinner-sm { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .tho-spinner-sm { animation: none; } }

/* Ligne de lien (variante "fichier + lien", sous le depot fichier, separee par "ou"). */
.tho-linkrow { display: flex; flex-direction: column; gap: 8px; }
.tho-linkrow-sep { display: flex; align-items: center; gap: 10px; }
.tho-linkrow-sep-line { flex: 1; height: 1px; background: var(--line-d, rgba(77,130,243,.14)); }
.tho-linkrow-sep-label { font-size: 11px; font-weight: 800; color: var(--muted-d, #94A3BE); text-transform: uppercase; letter-spacing: .04em; }
.tho-linkrow-row { display: flex; flex-direction: column; gap: 8px; }
.tho-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 16px; border-radius: 14px; background: var(--night, #070B14); border: 1.5px solid var(--line-d, rgba(77,130,243,.14)); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); transition: border-color .16s, box-shadow .16s; }
.tho-field.tho-ready { border: 2px solid var(--beam-bright, #4D82F3); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.tho-field-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted-d, #94A3BE); }
.tho-field-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; font-weight: 600; color: #E8EDF7; }
.tho-field-input::placeholder { color: var(--muted-d, #94A3BE); font-weight: 500; }
.tho-field-clear { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted-d, #94A3BE); }
.tho-sites { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-start; }
.tho-site-chip { font-size: 10.5px; font-weight: 700; color: var(--muted-d, #94A3BE); background: var(--night-3, #131C31); border: 1px solid var(--line-d, rgba(77,130,243,.14)); border-radius: 6px; padding: 2px 7px; }
.tho-site-chip:nth-child(n+7) { display: none; }
.tho-linkrow-err { display: flex; gap: 9px; align-items: flex-start; padding: 2px 0 0; }
.tho-linkrow-err svg { flex-shrink: 0; margin-top: 1px; }
.tho-linkrow-err-text { min-width: 0; }
.tho-linkrow-err-t { margin: 0; font-size: 13px; font-weight: 700; color: #fff; }
.tho-linkrow-err-s { margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--muted-d, #94A3BE); }
.tho-linkrow-err-cta { margin-top: 8px; }
.tho-linkrow-info { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted-d, #94A3BE); }
@media (min-width: 960px) {
  /* La rangee reste EMPILEE, meme sur grand ecran. En ligne, le bouton
     « Telecharger gratuitement » prenait sa largeur de contenu et ne laissait au
     champ qu'un tiers de l'espace : on lisait « https://www.tiktok.c… » dans une
     fente, alors que le champ EST l'element principal de la page. Empile, il
     occupe toute la largeur et le bouton aussi — deux gestes clairs, l'un sous
     l'autre, identiques au telephone. */
  .tho-site-chip:nth-child(n+7) { display: inline; }
}

/* Sous l'entree : formats/poids + reassurance (underEntry). */
/* Mentions sous la coque : typographie MONO de la maquette (.drop-hint /
   .reassure) — c'est la signature « fiche technique » de la Constitution. */
.tho-under { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 560px; width: 100%; }
.tho-limits { margin: 0; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11.5px; font-weight: 400; letter-spacing: .04em; color: var(--kl-text3); line-height: 1.5; }
.tho-reassure { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; font-weight: 400; letter-spacing: .06em; color: var(--kl-text3); line-height: 1.5; }
.tho-reassure svg { flex-shrink: 0; }


/* Visuel — la HAUTEUR est bornee (jamais la forme) : une image tres verticale
   devient etroite et haute, un bandeau devient large et bas, aucune n'est rognee
   ni deformee. 210px mobile / 420px ordinateur, comme visual() de la maquette. */
.tho-visual { width: 100%; min-width: 0; overflow-x: hidden; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
/* Le visuel est un sujet DÉTOURÉ : il n'a ni cadre ni fond, il se pose dans la
   lumière du héros. 210 px suffisaient à une vignette d'interface ; une personne
   y devenait une figurine. */
.tho-visual-box { position: relative; max-width: 100%; max-height: 300px; height: 300px; display: flex; align-items: center; justify-content: center; }
.tho-visual-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; pointer-events: none; user-select: none; }
/* Sujet détouré : le buste s'arrête au bord bas de l'image, ce qui posait un
   trait horizontal net en pleine nuit. Il s'y fond au lieu d'être tranché. */
.tho-cut { -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%); mask-image: linear-gradient(180deg, #000 76%, transparent 99%); }
@media (min-width: 960px) {
  /* Le creneau du visuel = TOUTE la hauteur de la colonne de gauche (titre,
     accroche, entree, mentions), comme dans la maquette — pas un plafond fixe.
     L'item s'etire sur la rangee, la boite en absolu n'ajoute aucune hauteur :
     c'est donc la colonne de gauche seule qui fixe la rangee, et l'image se
     deploie jusqu'a cette hauteur. Un plafond a 420 px laissait l'image flotter
     dans un grand vide des que la colonne depassait (defaut releve par le
     proprietaire, 12/08/2026). */
  .tho-visual { justify-content: flex-end; margin-top: 0; align-self: stretch; position: relative; }
  .tho-visual-box { position: absolute; inset: 0; max-height: none; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: flex-end; }
}

/* ═══ Variantes lien seul / sujet libre / sous-titres ═══════════════════════
   Meme systeme .tho-* que ci-dessus, portees depuis les autres branches de
   entry() (linkRow(false) / textRow / dropCall isFileKind) pour les 14 pages
   url_download, hashtag_generate, script_generate, subtitle_convert,
   subtitle_translate (templates/tool/ecrans-transverses.html). */

/* Coque non pointillee : shell() de la maquette pose "1.5px solid " + P.border
   pour les variantes "lien" et "sujet" (isFileKind faux), jamais dashed, et sans
   curseur pointeur puisque rien n'y ouvre de selecteur de fichier au clic. */
.tho-shell.tho-shell--plain { border: 1.5px solid var(--line-d, rgba(77,130,243,.14)); cursor: default; }

/* Bouton "en cours" (busy) distinct de "vide donc desactive" : reste bleu avec
   curseur d'attente pendant l'appel serveur, seul le champ vide grise le bouton.
   primary() de la maquette ne modelise pas cet etat (son seul remplacement total
   du contenu est "prep") ; necessaire aux CTA reels qui restent affiches pendant
   le traitement (import de lien, generation de texte, conversion). */
.tho-primary.is-busy:disabled { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.26); cursor: wait; }

/* Bouton "Coller" dans le champ lien, visible tant qu'il est vide (le bouton
   "Effacer" prend sa place une fois rempli) : fonction reelle (pasteUrl()) sans
   equivalent dans linkRow() de la maquette. */
.tho-field-paste { flex-shrink: 0; height: 36px; padding: 0 13px; border-radius: 8px; cursor: pointer; font-family: inherit; background: var(--night-3, #131C31); border: 1px solid var(--line-d, rgba(77,130,243,.14)); font-size: 12px; font-weight: 700; color: #E8EDF7; }

/* Champ "sujet libre" (textRow) : memes jetons que .tho-field, cadre plus haut
   pour un textarea, contenu aligne en haut (le champ grandit vers le bas). */
.tho-textrow { display: flex; flex-direction: column; gap: 9px; }
.tho-textfield { display: flex; align-items: flex-start; gap: 8px; min-height: 76px; padding: 12px 13px; border-radius: 12px; background: var(--night, #070B14); border: 1.5px solid var(--line-d, rgba(77,130,243,.14)); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); transition: border-color .16s, box-shadow .16s; }
.tho-textfield.tho-ready { border: 2px solid var(--beam-bright, #4D82F3); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.tho-textfield-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; resize: none; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #E8EDF7; line-height: 1.5; }
.tho-textfield-input::placeholder { color: var(--muted-d, #94A3BE); font-weight: 500; }

/* Compteur de caracteres (hashtags/script) : fonction reelle sans equivalent
   dans textRow() de la maquette, deplace d'un style en ligne vers cette classe. */
.tho-charcount { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--muted-d, #94A3BE); }
.tho-charcount-limit { color: #FBBF24; font-weight: 600; }

/* Puces de plateformes avec statut en direct (degrade/indisponible) : fonction
   reelle sans equivalent dans sites() de la maquette (chips statiques). Le point
   de couleur d'origine cede a une simple opacite pour rester dans le style plat
   de .tho-site-chip ; le statut reste lisible par l'infobulle existante. */
.tho-site-chip.tho-site-degraded { opacity: .75; }
.tho-site-chip.tho-site-down { opacity: .55; }

/* Bascule de mode (convertir/traduire), au-dessus de la coque "sous-titres" :
   largeur bornee comme sur l'ecran d'origine. Scopee (pas .segmented-toggle
   directement, partagee avec le selecteur de plateforme du script qui n'a pas
   cette contrainte). */
.tho-mode-toggle { max-width: 340px; margin: 0 auto 18px; }

.klcr-page .compare-sibling-link { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 18px; }

/* ===== MUR DE QUOTA — fenêtre d'achat ======================================
   Habillage POSÉ SUR `.klsheet` (feuille de téléchargement) : mêmes surface
   blanche, mêmes rayons, même ancrage bas-sur-téléphone / centré-sur-écran.
   Rien n'est redéfini ici de ce que la feuille porte déjà — seul le contenu
   propre à cette fenêtre (argumentaire, boutons) reçoit ses règles.
   Bleu = l'action, conformément à la charte ; aucun vert, aucun violet. */
.klq-body {
    margin: 0 2px 14px; font-size: 14.5px; line-height: 1.55;
    color: var(--text-muted-strong, #374151);
}
.klq-args { list-style: none; margin: 0 2px 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.klq-args li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 600; color: #111827; }
.klq-args svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #2563EB; }
.klq-cta {
    display: block; width: 100%; min-height: 52px; padding: 14px 18px; border: none;
    border-radius: 12px; background: #2563EB; color: #fff; font-family: inherit;
    font-size: 15.5px; font-weight: 800; cursor: pointer; transition: background .16s;
}
.klq-cta:hover { background: #1D4ED8; }
.klq-cta:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
.klq-second {
    display: block; width: 100%; min-height: 46px; margin-top: 9px; padding: 12px 18px;
    border: 1.5px solid #C3CCDC; border-radius: 12px; background: #fff; color: #374151;
    font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
    transition: border-color .16s, color .16s;
}
.klq-second:hover { border-color: #2563EB; color: #1D4ED8; }
.klq-reassure { margin: 12px 2px 0; text-align: center; font-size: 12.5px; color: #4B5563; }

/* « Coller » ne s'affiche qu'au doigt : sur telephone la manipulation est
   penible, a la souris Ctrl+V suffit et le bouton ne faisait que retrecir le
   champ. Le pointeur grossier est le critere juste — pas la largeur d'ecran,
   qui classerait une tablette tactile large du mauvais cote. */
@media (pointer: fine) {
  .tho-field-paste { display: none; }
}