/* =====================================================================
   Charte v2 de Clic'N Start Studio, alignée sur l'app
   (studio-app/app/design-v2.css, validée le 25/09/2026).
   Chargée APRÈS les styles de chaque page : elle ne fait que redéfinir
   jetons et apparence (aucune classe renommée). Blocs, menu et timeline
   restent en place ; retirer le <link> suffit à revenir en arrière
   (les polices et couleurs codées en dur ont été remappées dans les pages).
   Base neutre zinc, violet #6b46e5 comme seul accent, typo Geist et
   Geist Mono, coins 8-12 px, bordures fines, titres en deux tons
   (em = texte atténué), pas de dégradés ni d'italique décoratif.
   Le logo SVG garde ses polices et ses couleurs (identiques au logo de l'app).
   ===================================================================== */

/* ---------- Polices hébergées sur le site : Geist et Geist Mono (variables, latin + latin-ext) ---------- */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/geist-latin.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:'Geist Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-mono-latin.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}

/* Logo SVG uniquement : Fraunces italique (600-700) et Inter Tight 800, réduites aux lettres du logo.
   block : le logo s'affiche directement dans sa police (fichiers de quelques ko, préchargés) */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600 700;font-display:block;src:url(fonts/fraunces-logo.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:block;src:url(fonts/inter-tight-logo.woff2) format('woff2')}

/* ---------- Jetons : sombre (défaut des pages) ---------- */
html:not(.light){
  --ink:#09090b;
  --ink-2:#161618;
  --ink-3:#1d1d20;
  --paper:#09090b;
  --cream:#fafafa;
  --cream-dim:#d4d4d8;
  --orange:#7c5cff;
  --orange-bright:#8f73ff;
  --violet:#a48bff;
  --violet-deep:#7c5cff;
  --green:#4ade80;
  --muted:#a1a1aa;
  --line:rgba(255,255,255,0.07);
  --line-strong:rgba(255,255,255,0.13);
  --accent-soft:rgba(124,92,255,0.12);
  --accent-ring:rgba(124,92,255,0.28);
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:0 12px 32px rgba(0,0,0,0.5);
}
/* ---------- Jetons : clair ---------- */
html.light{
  --ink:#fafafa;
  --ink-2:#ffffff;
  --ink-3:#f4f4f5;
  --paper:#fafafa;
  --cream:#09090b;
  --cream-dim:#3f3f46;
  --orange:#6b46e5;
  --orange-bright:#5b38d6;
  --violet:#6b46e5;
  --violet-deep:#5b38d6;
  --green:#15803d;
  --muted:#71717a;
  --line:rgba(9,9,11,0.08);
  --line-strong:rgba(9,9,11,0.14);
  --accent-soft:rgba(107,70,229,0.08);
  --accent-ring:rgba(107,70,229,0.18);
  --shadow-xs:0 1px 2px rgba(9,9,11,0.05);
  --shadow-sm:0 1px 3px rgba(9,9,11,0.06),0 1px 2px rgba(9,9,11,0.04);
  --shadow-md:0 8px 24px rgba(9,9,11,0.08),0 2px 6px rgba(9,9,11,0.04);
}

/* ---------- Fonds unis : ni grain ni quadrillage ---------- */
body::before,body::after{content:none !important}

/* ---------- Typo ---------- */
body{font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility}
/* Pas d'italique (Geist n'en a pas) ; le logo SVG garde le sien */
body *:not(text){font-style:normal !important}
h1,h2,h3,
.hero-title,.section-title,.podcast-title,.ba-title,.form-title,.final-cta h2,.partner-head h2,
.rv-title,.price-title,.youtube-section-title,.booking-title,.pricing-table-title,.pricing-secondary-title{
  font-weight:600 !important;letter-spacing:-0.035em !important;
}
.hero-title,.hero-v2 h1,.mv-hero h1,.mv-hero2 h1{letter-spacing:-0.045em !important}
/* Geist 600 est bien plus large que l'ancien Fraunces light : titre du hero réduit pour garder
   ~6 lignes, sinon il repousse le simulateur (aligné en bas de la grille) sous la ligne de flottaison */
.hero-title{font-size:clamp(40px,4.4vw,72px)}
/* Titres en deux tons : le mot mis en avant passe en texte atténué */
h1 em,h2 em,
.hero-title em,.section-title em,.podcast-title em,.ba-title em,.rv-title em,.form-title em,.final-cta h2 em,
.youtube-section-title em,.booking-title em,.pricing-table-title em,.pricing-secondary-title em{
  color:var(--muted) !important;font-weight:inherit !important;
}
h3 em,h4 em,.price-title em,.founder-name em,.tier-name em{color:inherit !important;font-weight:inherit !important}
.hero-title strong{background:none;-webkit-text-fill-color:currentColor;color:var(--orange)}
.hero-title .strike{color:var(--muted)}
.price-number,.proof-big-num{font-weight:600;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}

/* ---------- Pas de dégradés décoratifs ---------- */
.hero::before,.hero-v2::before,.mv-hero2::before,.calc-box::before{background:none !important}
.social-proof,.final-cta,.partner{background-image:none !important}
.reel-mockup-avatar,.yt-mockup-channel-avatar,.testimonial-avatar,.booking-check,.trust-stat::before{background:var(--orange) !important}
.pricing-table-header{background:var(--accent-soft) !important}
.calc-box{background:var(--ink-2) !important}
.pricing-table-footer{background:var(--ink-3)}

/* ---------- Surfaces : coins 12 px, bordures fines, ombre discrète ---------- */
.reel-card,.problem-cell,.price-card,.form-card,.youtube-card,.sim-box,.testimonial,.founder-card,.podcast-card,.simulator{
  border-radius:12px !important;
}
.simulator .sim-tag{border-radius:12px 12px 0 0 !important}
/* Grilles à bordures partagées : l'arrondi est porté par le conteneur */
.problem-grid{border-radius:12px}
.problem-cell{border-radius:0 !important}
.reel-frame{border-radius:8px !important}
.price-card,.form-card{box-shadow:var(--shadow-xs)}
.price-card:hover{transform:none;border-color:var(--line-strong)}
.price-card.featured{background:var(--ink-2);border-color:var(--orange);box-shadow:0 0 0 3px var(--accent-soft)}
.price-card.featured::before{border-radius:6px;background:var(--accent-soft)}
.simulator{box-shadow:var(--shadow-md)}

/* ---------- Boutons : coins 8 px, accent plein, texte blanc ---------- */
.btn,.cta,.price-cta,.form-submit,.cta-sticky,.proof-all,#cns-consent button{border-radius:8px !important}
.btn{letter-spacing:-0.005em;font-weight:500}
.btn-primary,.form-submit,.cta-sticky,.price-card.featured .price-cta,#cns-consent .cns-accept{
  background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover,.form-submit:hover,.price-card.featured .price-cta:hover,#cns-consent .cns-accept:hover{
  background:var(--orange-bright);border-color:var(--orange-bright);color:#fff;transform:none;box-shadow:var(--shadow-xs);
}
.btn-ghost,.price-cta{background:var(--ink-2);color:var(--cream);border:1px solid var(--line-strong);box-shadow:var(--shadow-xs)}
.btn-ghost:hover,.price-cta:hover{background:var(--ink-3);border-color:var(--line-strong);color:var(--cream);transform:none}
.btn:focus-visible,.price-cta:focus-visible,.form-submit:focus-visible,.pricing-toggle button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

/* Sélecteur segmenté (à l'unité / abonnement) façon onglets */
.pricing-toggle{background:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.pricing-toggle button{border-radius:7px;font-weight:500}
.pricing-toggle button.on{background:var(--ink-2);color:var(--cream);box-shadow:var(--shadow-sm)}

/* ---------- Menu : même traitement que l'en-tête de l'app ---------- */
.topbar{background:color-mix(in srgb,var(--ink) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
html.light .topbar{background:color-mix(in srgb,var(--ink) 82%,transparent)}
.theme-toggle,.topbar-meta a.lang-toggle{border-radius:8px;background:var(--ink-2);box-shadow:var(--shadow-xs)}
.to-top{border-radius:8px;background:var(--ink-2)}
html.light .to-top{background:var(--ink-2)}
.to-top:hover,html.light .to-top:hover{background:var(--ink-3)}

/* ---------- Formulaires ---------- */
.form-field input,.form-field textarea,.form-field select{
  border-radius:8px;border:1px solid var(--line-strong);background:var(--ink-2);box-shadow:var(--shadow-xs);
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  border-color:var(--orange);background:var(--ink-2);box-shadow:0 0 0 3px var(--accent-ring);
}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--orange)}

/* ---------- Libellés : pas de capitales espacées (charte de l'app) ----------
   La timeline (rail, barre mobile, pellicule, étiquettes CLIP), l'en-tête « inspecteur » du
   simulateur et le menu gardent leurs capitales mono. */
.hero-kicker,.hero-meta,.sim-box-label,.trust-stat-label,.reel-platform-badge,.reel-info-tag,.reel-info-link,
.podcast-node .pn-small,.youtube-section-meta,.youtube-info-tag,.youtube-info-cta,
.founder-shorts-caption .live,.founder-shorts-caption a,.founder-role,.testimonial-role,.partner-score-label,
.price-tag,.final-cta-tag,.form-field label,.ba-badge,.price-card.featured::before{
  text-transform:none !important;letter-spacing:0 !important;font-family:'Geist',sans-serif !important;
  font-weight:500 !important;font-size:12.5px !important;
}
.hero-kicker,.price-tag,.final-cta-tag,.form-field label{font-size:13px !important}
.reel-platform-badge,.ba-badge,.price-card.featured::before{font-size:11.5px !important}
.price-card.featured::before{content:'Plus populaire'}
html[lang="en"] .price-card.featured::before{content:'Most popular'}
/* Écrans étroits : le libellé du prix (« HT / vidéo 5min », « excl. VAT / 5-min video ») peut passer à la ligne */
@media(max-width:400px){.price-amount .price-period{white-space:normal}}

/* ---------- Timeline : même structure, accent plein pour l'étiquette CLIP ---------- */
.section-tag{border-radius:6px}
.section-tag::before{background:var(--orange);color:#fff}

/* ---------- Bandeau cookies ---------- */
#cns-consent{border-radius:12px}