:root {
  --navy: #1F2562; --cream: #EDF0CC; --mustard: #E8B530;
  --navy-soft: rgba(31, 37, 98, 0.6); --navy-line: rgba(31, 37, 98, 0.12);
}
@property --acc  { syntax:'<color>'; inherits:true; initial-value:#1F2562; }
@property --acc2 { syntax:'<color>'; inherits:true; initial-value:#4A5299; }
@property --acc-ink { syntax:'<color>'; inherits:true; initial-value:#1F2562; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { transition: --acc 900ms cubic-bezier(.4,0,.2,1), --acc2 900ms cubic-bezier(.4,0,.2,1), --acc-ink 900ms cubic-bezier(.4,0,.2,1); }
body { font-family: 'Inter', sans-serif; color: var(--navy); line-height: 1.5; font-weight: 400; overflow: hidden; background: var(--cream); }

/* ===== Champ de formes animé (remplace les mesh statiques) ===== */
.field { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--cream); }
.blob { position: absolute; border-radius: 50%; will-change: transform; } /* flou figé, jamais animé */
#far1 { left:-15%; top:-10%; width:80vw; height:80vw; opacity:.30; filter:blur(120px); background:radial-gradient(circle, var(--navy) 0%, transparent 70%); }
#far2 { right:-20%; bottom:-25%; width:90vw; height:90vw; opacity:.36; filter:blur(125px); background:radial-gradient(circle, var(--acc) 0%, transparent 72%); }
#mid1 { left:5%; top:5%; width:50vw; height:50vw; opacity:.52; filter:blur(68px); background:radial-gradient(circle, var(--acc2) 0%, transparent 66%); }
#mid2 { right:0; top:10%; width:45vw; height:45vw; opacity:.44; filter:blur(72px); background:radial-gradient(circle, var(--mustard) 0%, transparent 66%); }
#near { left:25%; bottom:-30%; width:55vw; height:55vw; opacity:.50; filter:blur(40px); background:radial-gradient(circle, var(--acc) 0%, transparent 64%); }
.mesh, .mesh-soft { background: transparent; }

/* ===== Nav (fixe, partagée) ===== */
nav { position: fixed; top:0; left:0; right:0; background: rgba(237,240,204,0.82); backdrop-filter: blur(12px); z-index: 100; padding: 18px 48px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--navy-line); }
.logo { font-family: 'Instrument Serif', serif; font-size: 24px; letter-spacing: -0.02em; cursor:pointer; }
.nav-links { display: flex; gap: 32px; list-style: none; font-size: 16px; }
.nav-links a { color: var(--navy); text-decoration: none; font-weight: 500; cursor:pointer; }
.nav-links a.active { color: var(--mustard); }
.nav-soon { color:var(--navy-soft); font-weight:500; cursor:default; }
.nav-soon em { font-style:normal; font-weight:400; font-size:.85em; opacity:.65; }

/* ===== Shell SPA ===== */
.scroll { height: 100vh; overflow-y: auto; }
.scroll::-webkit-scrollbar { width: 0; }
.page { display: none; opacity: 0; transition: opacity 380ms ease; }
.page.show { opacity: 1; }

section { padding: 120px 48px; max-width: 1280px; margin: 0 auto; }

/* Hero (commun) */
.hero { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding-top: 130px; padding-bottom: 80px; }
.tagline { font-size: 14px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--navy-soft); margin-bottom: 32px; font-weight: 500; }
.hero h1 { font-family: 'Instrument Serif', serif; font-size: clamp(72px, 12vw, 160px); line-height: 0.9; font-weight: 400; letter-spacing: -0.04em; margin-bottom: 48px; }
.hero h1 em { font-style: italic; color: var(--navy-soft); }
.hero p { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; max-width: 880px; margin-bottom: 20px; font-weight: 400; }
.hero-promise { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(24px, 3vw, 36px) !important; color: var(--navy); margin-top: 24px !important; margin-bottom: 40px !important; }
/* ===== CTA — deux styles, une règle ===== */
/* Primaire : uniquement les actions qui mènent au contact (la conversion).
   Secondaire : la navigation interne. Rien d'autre n'est un bouton. */
.cta { display:inline-block; width:fit-content; font-family:'Inter',sans-serif; font-size:16px; font-weight:500; line-height:1.2; padding:18px 30px; border:1px solid transparent; border-radius:8px; text-decoration:none; cursor:pointer; transition:transform .2s, background .2s, opacity .2s; }
.cta-primary { background:var(--navy); color:var(--cream); }
.cta-primary:hover { transform:translateY(-1px); opacity:.9; }
.cta-secondary { background:transparent; color:var(--navy); border-color:var(--navy); }
.cta-secondary:hover { background:rgba(31,37,98,.05); }
/* Sur l'Academy, les boutons secondaires prennent la couleur du track (sauge / corail). */
.academy-page .cta-secondary { color:var(--acc-ink); border-color:var(--acc); }
.academy-page .cta-secondary:hover { background:color-mix(in srgb, var(--acc) 10%, transparent); }
.cta-sm { font-size:14px; padding:11px 20px; }
.cta-inline { margin-top:20px; }

/* ===== HOME ===== */
.position h2 { font-family:'Instrument Serif',serif; font-size:clamp(48px,7vw,88px); line-height:1; font-weight:400; letter-spacing:-0.03em; margin-bottom:48px; max-width:1100px; }
.use-cases { list-style:none; margin-bottom:48px; }
.use-cases li { font-size:clamp(16px,1.4vw,20px); line-height:1.5; padding:12px 0; border-bottom:1px solid var(--navy-line); transition:padding-left .3s,color .3s; }
.use-cases li:hover { padding-left:16px; color:var(--navy); }
.use-cases li:first-child { border-top:1px solid var(--navy-line); }
.use-cases li.more { font-family:'Instrument Serif',serif; font-size:clamp(20px,2vw,28px); color:var(--navy-soft); letter-spacing:0.1em; border-bottom:none; padding-top:20px; }
.use-cases li.more:hover { padding-left:0; }
.services h2, .apps h2 { font-family:'Instrument Serif',serif; font-size:clamp(40px,5vw,64px); line-height:1; font-weight:400; letter-spacing:-0.03em; margin-bottom:64px; }
.apps h2 { margin-bottom:48px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.service { padding:48px; border-radius:24px; background:rgba(255,255,255,0.5); border:1px solid var(--navy-line); min-height:320px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .3s,background .3s; }
.service:hover { transform:translateY(-4px); background:rgba(255,255,255,0.8); }
/* Un fond par pilier, atténué : orange Engine, violet Studio, bleu Academy. */
.service.svc-engine { background:rgba(232,69,10,.16); }   .service.svc-engine:hover { background:rgba(232,69,10,.24); }
.service.svc-studio { background:rgba(123,94,167,.16); }  .service.svc-studio:hover { background:rgba(123,94,167,.24); }
.service.svc-academy { background:rgba(61,107,142,.16); } .service.svc-academy:hover { background:rgba(61,107,142,.24); }
.service-name { font-family:'Instrument Serif',serif; font-size:48px; line-height:1; margin-bottom:12px; letter-spacing:-0.02em; }
.service-tagline { font-family:'Instrument Serif',serif; font-style:italic; font-size:22px; color:var(--navy-soft); margin-bottom:24px; }
.service-body { font-size:16px; line-height:1.5; flex:1; margin-bottom:24px; }
.service-link::after { content:' →'; }
.apps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.app { padding:40px; border-radius:20px; background:#FFFFFF; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .3s,box-shadow .3s; border-top:4px solid var(--mustard); box-shadow:0 2px 12px rgba(31,37,98,0.04); }
.app:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(31,37,98,0.08); }
.app-name { font-family:'Instrument Serif',serif; font-size:32px; margin-bottom:8px; letter-spacing:-0.02em; line-height:1; }
.app-promise { font-family:'Instrument Serif',serif; font-style:italic; font-size:18px; line-height:1.3; color:var(--navy-soft); margin-bottom:14px; }
.app-body { font-size:14px; line-height:1.55; color:rgba(31,37,98,.82); margin-bottom:28px; }
.app-soon { display:inline-block; vertical-align:middle; margin-left:8px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-soft); border:1px solid var(--navy-line); border-radius:999px; padding:3px 9px; }
.app-launch { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mustard); margin-bottom:14px; }
.team h2 { font-family:'Instrument Serif',serif; font-size:clamp(40px,5vw,64px); line-height:1.05; font-weight:400; letter-spacing:-0.03em; margin-bottom:40px; max-width:900px; }
.team p { font-size:clamp(18px,2vw,22px); line-height:1.5; max-width:880px; }

/* ===== ENGINE ===== */
.method h2 { font-family:'Instrument Serif',serif; font-size:clamp(48px,7vw,88px); line-height:1; font-weight:400; letter-spacing:-0.03em; margin-bottom:64px; max-width:1100px; }
.method-steps { list-style:none; counter-reset:step; }
.method-steps li { counter-increment:step; padding:32px 0; border-bottom:1px solid var(--navy-line); font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(24px,3vw,40px); line-height:1.3; display:flex; align-items:baseline; gap:32px; }
.method-steps li::before { content:counter(step,decimal-leading-zero); font-family:'Inter',sans-serif; font-style:normal; font-size:14px; color:var(--mustard); font-weight:600; letter-spacing:0.1em; flex-shrink:0; min-width:32px; }
.method-steps li:first-child { border-top:1px solid var(--navy-line); }
.modalities h2, .cases h2 { font-family:'Instrument Serif',serif; font-size:clamp(40px,5vw,64px); line-height:1; font-weight:400; letter-spacing:-0.03em; margin-bottom:64px; }
.modalities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.modality { padding:48px; border-radius:24px; background:rgba(255,255,255,0.5); border:1px solid var(--navy-line); min-height:320px; display:flex; flex-direction:column; transition:transform .3s,background .3s; }
.modality:hover { transform:translateY(-4px); background:rgba(255,255,255,0.8); }
.modality-name { font-family:'Instrument Serif',serif; font-size:36px; line-height:1; margin-bottom:12px; letter-spacing:-0.02em; }
.modality-tagline { font-family:'Instrument Serif',serif; font-style:italic; font-size:20px; color:var(--navy-soft); margin-bottom:24px; }
.modality-body { font-size:16px; line-height:1.5; }
.case-list { list-style:none; }
.case-item { padding:40px 0; border-bottom:1px solid var(--navy-line); display:grid; grid-template-columns:1fr 2fr; gap:48px; align-items:baseline; transition:padding-left .3s; }
.case-item:hover { padding-left:16px; }
.case-item:first-child { border-top:1px solid var(--navy-line); }
.case-title { font-family:'Instrument Serif',serif; font-size:clamp(22px,2.4vw,32px); line-height:1.2; letter-spacing:-0.02em; }
.case-body { font-size:16px; line-height:1.5; color:var(--navy-soft); }

/* ===== STUDIO ===== */
.manifesto h2 { font-family:'Instrument Serif',serif; font-size:clamp(48px,7vw,88px); line-height:1; font-weight:400; letter-spacing:-0.03em; margin-bottom:48px; }
.manifesto p { font-size:clamp(20px,2.2vw,28px); line-height:1.4; max-width:900px; margin-bottom:20px; font-family:'Instrument Serif',serif; font-style:italic; }
.ai-input h2 { font-family:'Instrument Serif',serif; font-size:clamp(40px,5vw,64px); line-height:1; font-weight:400; letter-spacing:-0.03em; margin-bottom:48px; }
.ai-input p { font-size:clamp(18px,2vw,24px); line-height:1.5; max-width:900px; margin-bottom:24px; }
.ai-input p.lead { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(24px,3vw,36px); line-height:1.3; margin-bottom:40px; }

/* ===== WHY (Engine + Studio) ===== */
.why h2 { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(48px,7vw,88px); line-height:1; font-weight:400; letter-spacing:-0.03em; margin-bottom:64px; }
.why-list { list-style:none; counter-reset:why; }
.why-list li { counter-increment:why; padding:28px 0; border-bottom:1px solid var(--navy-line); font-size:clamp(18px,2vw,22px); line-height:1.5; display:flex; align-items:baseline; gap:32px; }
.why-list li::before { content:counter(why,decimal-leading-zero); font-size:14px; color:var(--mustard); font-weight:600; letter-spacing:0.1em; flex-shrink:0; min-width:32px; }
.why-list li:first-child { border-top:1px solid var(--navy-line); }

/* ===== CARE (Engine + Academy) ===== */
.care { text-align:center; padding:120px 48px; }
.care h2 { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(48px,6vw,72px); font-weight:400; line-height:1.1; margin-bottom:40px; }
.care p { font-size:clamp(18px,2vw,22px); max-width:800px; margin:0 auto; line-height:1.6; }

/* ===== ACADEMY ===== */
.hero-badges { display:flex; gap:12px; margin-bottom:32px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border:1.5px solid var(--navy-line); border-radius:999px; font-size:13px; font-weight:500; color:var(--navy-soft); }
.hero-tracks { display:flex; gap:16px; flex-wrap:wrap; }
.track-pill { display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border:1.5px solid var(--navy); border-radius:999px; font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; transition:background .2s,color .2s; }
.track-pill:hover { background:var(--navy); color:var(--cream); }
.track-pill .ltr { font-size:11px; font-weight:700; letter-spacing:0.1em; color:var(--mustard); }
.tracks-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:64px; }
.track-block { padding:48px; border-radius:24px; background:rgba(255,255,255,0.5); border:1px solid var(--navy-line); transition:transform .3s,background .3s; }
.track-block:hover { transform:translateY(-4px); background:rgba(255,255,255,0.8); }
.track-index { font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--mustard); margin-bottom:20px; }
.track-title { font-family:'Instrument Serif',serif; font-size:clamp(28px,3vw,40px); letter-spacing:-0.02em; line-height:1.1; margin-bottom:16px; }
.track-desc { font-size:16px; line-height:1.6; color:var(--navy-soft); margin-bottom:28px; }
.track-target { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--navy-soft); }
.track-target span { font-weight:400; text-transform:none; letter-spacing:0; margin-left:6px; color:var(--navy); }
.track-toggle { display:flex; border:1.5px solid var(--acc); border-radius:999px; overflow:hidden; flex-shrink:0; transition:border-color 900ms cubic-bezier(.4,0,.2,1); }
.toggle-btn { padding:10px 24px; font-size:13px; font-weight:600; background:transparent; color:var(--navy-soft); border:none; cursor:pointer; transition:all .2s; font-family:'Inter',sans-serif; }
.toggle-btn.active { background:var(--navy); color:var(--cream); }
.cta-block { text-align:center; padding:120px 48px; }
.cta-block h2 { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(48px,6vw,80px); line-height:1.05; letter-spacing:-0.03em; margin-bottom:24px; }
.cta-block p { font-size:clamp(18px,1.9vw,21px); color:rgba(31,37,98,.72); max-width:560px; margin:0 auto 40px; line-height:1.6; }

/* ===== Footer ===== */
footer { padding:60px 48px 40px; border-top:1px solid var(--navy-line); max-width:1280px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-logo { font-family:'Instrument Serif',serif; font-size:32px; margin-bottom:8px; }
.footer-addr { font-size:14px; color:var(--navy-soft); line-height:1.6; }
.footer-addr a { color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(31,37,98,.35); }
.footer-addr a:hover { text-decoration-color:var(--navy); }
.footer-col h4 { font-size:12px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; font-weight:600; }
.footer-col a { display:block; font-size:14px; color:var(--navy); text-decoration:none; margin-bottom:8px; cursor:pointer; }
.footer-col span { display:block; font-size:14px; color:var(--navy-soft); margin-bottom:8px; }
.footer-bottom { padding-top:32px; border-top:1px solid var(--navy-line); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--navy-soft); }
.footer-bottom .sig { font-family:'Instrument Serif',serif; font-style:italic; font-size:16px; color:var(--navy); }

.draft-note { font-size:12px; font-weight:600; color:var(--mustard); letter-spacing:0.04em; margin-top:16px; }

@media (max-width: 900px) {
  nav { padding:12px 16px; }
  section { padding:80px 24px; }
  .services-grid, .apps-grid, .modalities-grid, .tracks-grid { grid-template-columns:1fr; }
  .case-item { grid-template-columns:1fr; gap:16px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-wrap:wrap; gap:12px; }
}

:root { --logo: url(feat-logo-lockup-nav.png); }
.brand { background: var(--logo) left center / contain no-repeat; display:block; }
.brand-nav { height:44px; width:238px; }
.brand-foot { height:32px; width:173px; }
.nav-right { display:flex; align-items:center; gap:16px; }
.lang-switch { display:flex; border:1px solid var(--navy-line); border-radius:999px; overflow:hidden; }
.lang-btn { font:600 12px Inter,sans-serif; padding:6px 12px; background:transparent; color:var(--navy-soft); border:none; cursor:pointer; letter-spacing:.04em; transition:all .2s; }
.lang-btn.active { background:var(--navy); color:var(--cream); }

/* ===== CONTACT ===== */
[hidden] { display: none !important; }
.section-cta { margin-top:56px; }
.cta-block.cta-simple { padding:96px 48px; }
.contact-hero { min-height:auto; padding-bottom:40px; }
.contact-hero h1 { font-size:clamp(56px,10vw,140px); margin-bottom:32px; }
.contact-section { padding-top:0; padding-bottom:120px; }
/* ===== Mentions légales / Legal notice ===== */
.legal-hero { min-height:auto; padding-bottom:40px; }
.legal-hero h1 { font-size:clamp(56px,10vw,140px); margin-bottom:32px; }
.legal-hero .legal-brand { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(24px,3vw,36px); color:var(--navy); margin-bottom:0; }
.legal-section { padding-top:0; padding-bottom:120px; }
.legal-block { max-width:760px; padding:40px 0; border-top:1px solid var(--navy-line); }
.legal-block h2 { font-family:'Instrument Serif',serif; font-size:clamp(30px,3.6vw,44px); line-height:1.05; font-weight:400; letter-spacing:-0.02em; margin-bottom:20px; }
.legal-block p { font-size:16px; line-height:1.7; color:var(--navy); margin-bottom:16px; }
.legal-block p:last-child { margin-bottom:0; }
.legal-block a { color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.footer-legal { display:flex; gap:20px; flex-wrap:wrap; }
.footer-legal a { color:var(--navy-soft); text-decoration:none; cursor:pointer; transition:color .2s; }
.footer-legal a:hover { color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.form-card { background:#F5F5F0; border-radius:22px; padding:48px; box-shadow:0 18px 50px rgba(31,37,98,.10); max-width:760px; }
.contact-form { display:flex; flex-direction:column; gap:24px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { font-family:'Inter',sans-serif; font-weight:500; font-size:14px; opacity:.7; }
.form-field input, .form-field select, .form-field textarea { font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; color:var(--navy); background:#FFFFFF; border:1px solid rgba(31,37,98,.15); border-radius:8px; padding:16px 18px; width:100%; transition:border-color .2s, box-shadow .2s; }
.form-field input::placeholder, .form-field textarea::placeholder { color:rgba(31,37,98,.35); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(31,37,98,.08); }
.form-field textarea { resize:vertical; min-height:140px; }
.form-field select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:48px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%231F2562' stroke-width='2' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 18px center; }
.form-field select:invalid { color:rgba(31,37,98,.4); }
.form-field select option { color:var(--navy); }
.contact-form.touched input:invalid, .contact-form.touched select:invalid, .contact-form.touched textarea:invalid { border-color:#E8450A; }
.engine-note { background:rgba(232,69,10,.06); border-left:3px solid #E8450A; border-radius:0 12px 12px 0; padding:22px 24px; }
.engine-note strong { display:block; font-family:'Instrument Serif',serif; font-weight:400; font-size:22px; line-height:1.25; margin-bottom:10px; }
.engine-note p { font-size:15px; line-height:1.6; color:var(--navy-soft); }
.gotcha { display:none; }
.form-submit { align-self:flex-start; }
.form-submit:disabled { opacity:.55; cursor:default; transform:none; }
.form-error { font-size:14px; line-height:1.5; color:#C0390A; margin-top:-8px; }
.form-error a { color:inherit; }
.form-success .success-title { font-family:'Instrument Serif',serif; font-size:clamp(32px,4vw,44px); line-height:1.1; letter-spacing:-0.02em; margin-bottom:16px; }
.form-success .success-body { font-size:18px; line-height:1.6; color:var(--navy-soft); }
.form-success .success-email { font-weight:600; color:var(--navy); }

@media (max-width: 900px) {
  .form-card { padding:32px 24px; border-radius:18px; }
  .field-row { grid-template-columns:1fr; }
  .cta-block.cta-simple { padding:72px 24px; }
  .section-cta { margin-top:40px; }
}

/* ===== ACADEMY — page mère refondue + pages module ===== */
.todo { display:inline-block; background:rgba(232,181,48,.28); border:1px dashed #B8891F; border-radius:6px; padding:1px 8px; font-size:.9em; font-weight:600; }

.mod-sec { padding-top:72px; padding-bottom:72px; }
.mod-sec h2 { font-family:'Instrument Serif',serif; font-size:clamp(34px,4.4vw,60px); line-height:1.05; font-weight:400; letter-spacing:-0.03em; margin-bottom:28px; }
.mod-lead { font-size:clamp(17px,1.8vw,21px); line-height:1.55; max-width:860px; margin-bottom:16px; }
.sec-sub { font-size:18px; line-height:1.6; color:var(--navy-soft); max-width:720px; margin:0 0 40px; }
.sec-note { font-size:15px; line-height:1.6; color:var(--navy-soft); max-width:760px; margin-top:32px; font-style:italic; }
.mod-link { display:inline-block; margin-top:20px; color:var(--navy); font-size:15px; font-weight:500; text-decoration:none; cursor:pointer; }
.mod-link:hover { text-decoration:underline; }

/* Bascule Parcours A / B */
/* Sélecteur Parcours A / B : grand, centré, translucide sur le gradient. L'onglet actif
   prend l'encre du track (sauge ou corail) — jamais navy, jamais bleu. */
.track-switch { padding-top:0; padding-bottom:32px; display:flex; justify-content:center; }
.track-switch .track-toggle { width:fit-content; max-width:100%; padding:6px; gap:4px; border:1px solid color-mix(in srgb, var(--acc) 45%, transparent); background:rgba(237,240,204,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 12px 36px rgba(31,37,98,.08); overflow:visible; }
.track-switch .toggle-btn { padding:14px 28px; font-size:16px; font-weight:400; letter-spacing:.01em; border-radius:999px; color:var(--navy-soft); }
.track-switch .toggle-btn:hover { color:var(--acc-ink); }
.track-switch .toggle-btn.active { background:var(--acc-ink); color:#FFFFFF; box-shadow:0 6px 18px color-mix(in srgb, var(--acc) 35%, transparent); }
.track-title { color:var(--acc-ink); }
.track-pane { display:none; }
.track-pane.active { display:block; }

/* Trois principes d'animation */
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.principle { padding-top:24px; border-top:3px solid var(--acc); }
.principle-num { font-family:'Instrument Serif',serif; font-size:clamp(72px,8vw,112px); line-height:.9; letter-spacing:-0.04em; color:var(--acc); margin-bottom:14px; }
.principle-title { font-size:17px; font-weight:600; margin-bottom:10px; }
.principle-body { font-size:15px; line-height:1.6; color:var(--navy-soft); }

/* Les 4 parcours */
.parcours-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.parcours-card { background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 9%, #F5F5F0) 0%, #F5F5F0 55%); border-radius:22px; border-top:5px solid var(--pc); padding:40px; box-shadow:0 18px 50px rgba(31,37,98,.10); display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s; }
.parcours-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(31,37,98,.14); }
.parcours-name { font-family:'Instrument Serif',serif; font-size:clamp(28px,3vw,38px); font-weight:400; letter-spacing:-0.02em; line-height:1.05; margin-bottom:14px; }
.parcours-pitch { font-family:'Instrument Serif',serif; font-style:italic; font-size:19px; line-height:1.35; color:var(--navy-soft); margin-bottom:24px; }
/* Le blanc sur les deux sauges clairs ne contrastait pas : la couleur passe en bordure,
   le texte reste navy. */
.parcours-mods { display:inline-block; width:fit-content; font-size:13px; font-weight:700; letter-spacing:.14em; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.7); border:1.5px solid var(--pc); color:var(--navy); margin-bottom:22px; }
.parcours-price { font-size:15px; line-height:1.5; padding-top:20px; border-top:1px solid var(--navy-line); margin-bottom:28px; flex:1; }
.price-reveal { background:none; border:none; padding:0; font:500 14px 'Inter',sans-serif; color:var(--navy); cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(31,37,98,.35); }
.price-reveal:hover { text-decoration-color:var(--navy); }
.price-lines { font-weight:700; font-size:16px; color:var(--acc); }

/* Catalogue des 8 modules */
.mods-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.mod-card { background:rgba(255,255,255,.5); border:1px solid var(--navy-line); border-radius:16px; padding:32px; display:flex; flex-direction:column; transition:transform .25s, background .25s; }
.mod-card:hover { transform:translateY(-4px); background:rgba(255,255,255,.85); }
.mod-index { font-family:'Instrument Serif',serif; font-size:clamp(40px,4vw,56px); line-height:1; letter-spacing:-0.03em; color:var(--acc); margin-bottom:14px; }
.mod-cat { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-ink); margin-bottom:16px; }
.mod-name { font-family:'Instrument Serif',serif; font-size:24px; font-weight:400; letter-spacing:-0.01em; line-height:1.15; margin-bottom:12px; }
.mod-deliv { font-size:15px; line-height:1.55; color:var(--navy-soft); flex:1; }
/* Prix en couleur du parcours (bleu acier sur A, corail sur B), gras, un cran plus grands. */
.mod-price { font-size:15px; font-weight:700; color:var(--acc); margin-top:16px; padding-top:14px; border-top:1px solid var(--navy-line); }

/* Formats et modalités */
.format-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.format-block { background:#F5F5F0; border-radius:20px; padding:36px; }
.format-name { font-family:'Instrument Serif',serif; font-size:30px; font-weight:400; letter-spacing:-0.02em; margin-bottom:24px; }

/* Comptoir Général */
.cg-grid { display:grid; grid-template-columns:3fr 2fr; gap:72px; align-items:start; }
.cg-text { max-width:560px; padding-right:24px; }

.cg-text p { font-size:17px; line-height:1.6; margin-bottom:18px; }
.cg-photos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cg-photos .photo-ph:first-child, .cg-photos .cg-photo:first-child { grid-column:1 / -1; aspect-ratio:16 / 10; }
.cg-photo { margin:0; aspect-ratio:4 / 3; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.4); }
.cg-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-ph { aspect-ratio:4 / 3; border:1px dashed rgba(31,37,98,.35); border-radius:14px; background:rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; }
.photo-ph span { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-soft); }


/* Offre de lancement */

/* Pages module */
.crumb { font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--navy-soft); margin-bottom:28px; }
.crumb a { color:var(--navy); text-decoration:none; cursor:pointer; }
.crumb a:hover { text-decoration:underline; }
.crumb span { opacity:.45; margin:0 8px; }
.mod-hero { min-height:auto; padding-bottom:56px; }
.mod-hero h1 { font-size:clamp(38px,6vw,84px); margin-bottom:28px; }
.mod-pos { font-size:clamp(18px,2vw,24px); line-height:1.45; max-width:820px; margin-bottom:32px; }
.mod-hero .hero-badges { margin-bottom:36px; flex-wrap:wrap; }
.mod-prereq { font-size:16px; line-height:1.5; margin-top:8px; }

.deliv-card { background:#F5F5F0; border-left:3px solid var(--acc); border-radius:0 14px 14px 0; padding:24px 28px; margin-bottom:36px; }
.deliv-label { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-soft); margin-bottom:8px; }
.deliv-body { font-size:18px; line-height:1.5; }
.obj-label { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-soft); margin-bottom:12px; }

.obj-list, .check-list, .opt-list { list-style:none; max-width:860px; }
.obj-list li, .check-list li, .opt-list li { position:relative; padding:13px 0 13px 30px; border-bottom:1px solid var(--navy-line); font-size:16px; line-height:1.5; }
.obj-list li::before, .opt-list li::before { content:'—'; position:absolute; left:0; color:var(--mustard); font-weight:700; }
.check-list li::before { content:'✓'; position:absolute; left:0; color:var(--mustard); font-weight:700; }

.prog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.prog-slot { background:#F5F5F0; border-radius:18px; padding:32px; }
.prog-when { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mustard); margin-bottom:14px; }
.prog-what { font-size:17px; line-height:1.6; }

.price-wrap { overflow-x:auto; max-width:760px; }
.price-table { width:100%; min-width:520px; border-collapse:collapse; background:#F5F5F0; border-radius:14px; }
.price-table th, .price-table td { padding:16px 20px; text-align:left; font-size:16px; border-bottom:1px solid var(--navy-line); }
.price-table thead th { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-soft); }
.price-table tbody th { font-weight:600; }
.price-table td { font-weight:700; font-size:17px; color:var(--acc); }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom:none; }
.opt-label { margin-top:44px; padding-top:22px; border-top:1px solid var(--navy-line); max-width:860px; }
.price-note { font-size:15px; line-height:1.6; color:var(--navy-soft); max-width:660px; margin-top:18px; }

.track-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.track-chip { display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:500; background:rgba(255,255,255,.55); border:1px solid var(--navy-line); }
.track-chip::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--pc); flex-shrink:0; }

.admin-list { display:flex; flex-direction:column; gap:0; max-width:900px; }
.admin-list > div { display:grid; grid-template-columns:200px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--navy-line); }
.admin-list > div:last-child { border-bottom:none; }
.admin-list dt { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-soft); }
.admin-list dd { font-size:16px; line-height:1.55; }

@media (max-width: 900px) {
  .cta { padding:16px 26px; font-size:15px; }
  .cta-sm { padding:11px 18px; font-size:14px; }
  .cta-block { padding:96px 24px; }
  .mod-sec { padding-top:56px; padding-bottom:56px; }
  .principles, .parcours-grid, .mods-grid, .format-grid, .prog-grid { grid-template-columns:1fr; }
  .parcours-card, .format-block { padding:28px 24px; }
  .admin-list > div { grid-template-columns:1fr; gap:6px; }
  .track-switch .track-toggle { flex-direction:column; width:100%; border-radius:24px; }
  .track-switch .toggle-btn { padding:12px 18px; font-size:15px; border-radius:18px; }
}

/* ===== STUDIO — Références ===== */
/* Emplacements logos : un wordmark typographique tient la place tant que le SVG
   n'est pas déposé. Pour activer un logo, remplacer le <span class="logo-name">
   par <img src="assets/logos/<data-logo>.svg" alt="…"> — le dimensionnement suit. */
.logo-slot { display:flex; align-items:center; }
/* Dans les cartes, le nom du client est déjà écrit juste en dessous : tant qu'aucun
   SVG n'est déposé, l'emplacement se replie plutôt que de répéter le nom. Il se
   déploie de lui-même dès qu'une <img> y est placée. Le bloc marque blanche fait
   exception : là, les noms d'agences sont le contenu. */
.case-card .logo-slot:not(:has(img)), .proj-card .logo-slot:not(:has(img)) { height:0; margin:0; overflow:hidden; }
.logo-slot img { width:auto; max-width:100%; height:100%; object-fit:contain; }
.logo-name { font-family:'Inter',sans-serif; font-weight:700; letter-spacing:-.02em; color:var(--navy); white-space:nowrap; }
.logo-lg { height:52px; margin-bottom:28px; }
.logo-lg .logo-name { font-size:30px; }
.logo-md { height:38px; }
.logo-md .logo-name { font-size:21px; letter-spacing:.02em; }
.logo-sm { height:30px; margin-bottom:20px; }
.logo-sm .logo-name { font-size:17px; }

.refs h2 { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(40px,5vw,64px); line-height:1.05; font-weight:400; letter-spacing:-0.03em; margin-bottom:20px; }
.refs-sub { font-size:clamp(17px,1.8vw,20px); line-height:1.55; color:rgba(31,37,98,.8); max-width:760px; margin-bottom:56px; }
.refs-h3 { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(28px,3.2vw,42px); line-height:1.1; font-weight:400; letter-spacing:-0.02em; margin-bottom:28px; }

.case-list { display:flex; flex-direction:column; gap:28px; margin-bottom:88px; }
.case-card { background:#F5F5F0; border-radius:22px; padding:44px 48px; box-shadow:0 18px 50px rgba(31,37,98,.10); }
.case-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); border:1px solid var(--acc); border-radius:999px; padding:5px 12px; margin-bottom:14px; }
.case-client { font-family:'Inter',sans-serif; font-weight:600; font-size:20px; margin-bottom:6px; }
.case-project { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(22px,2.4vw,30px); line-height:1.2; color:var(--navy-soft); margin-bottom:32px; }
.case-cols { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.case-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mustard); margin-bottom:10px; }
.case-text { font-size:16px; line-height:1.6; color:rgba(31,37,98,.82); }
.case-impact { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(19px,2vw,24px); line-height:1.35; margin-top:32px; padding-top:28px; border-top:1px solid var(--navy-line); }
.case-stack { font-family:'Inter',sans-serif; font-weight:500; font-size:13px; letter-spacing:.04em; color:rgba(31,37,98,.55); margin-top:20px; }

.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:88px; }
.proj-card { background:#FFFFFF; border:1px solid rgba(31,37,98,.08); border-radius:12px; padding:24px; transition:transform .25s, box-shadow .25s; }
.proj-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(31,37,98,.08); }
.proj-client { font-family:'Inter',sans-serif; font-weight:600; font-size:16px; line-height:1.3; margin-bottom:12px; }
.case-city { font-family:'Inter',sans-serif; font-weight:400; font-size:.85em; opacity:.6; }
.proj-type { font-size:15px; line-height:1.45; color:rgba(31,37,98,.82); }
.proj-card .case-stack { margin-top:14px; }

.wl-block { background:#F5F5F0; border-radius:22px; padding:56px 48px; margin-bottom:56px; }
.wl-text { font-size:16px; line-height:1.65; color:rgba(31,37,98,.82); max-width:840px; margin-bottom:16px; }
.wl-logos { display:flex; flex-wrap:wrap; align-items:center; gap:20px 44px; margin-top:40px; }

@media (max-width: 900px) {
  .case-card { padding:32px 24px; }
  .case-cols { grid-template-columns:1fr; gap:28px; }
  .proj-grid { grid-template-columns:1fr; }
  .wl-block { padding:36px 24px; }
  .wl-logos { gap:18px 32px; }
  .logo-lg { height:42px; } .logo-lg .logo-name { font-size:25px; }
  .logo-md { height:32px; } .logo-md .logo-name { font-size:18px; }
}

/* ===== ACADEMY — rythme et couleur de track ===== */
/* Bande blanc cassé pleine largeur derrière une section, pour casser la monotonie crème. */
.band { position:relative; }
.band::before { content:''; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); background:rgba(245,245,240,.8); z-index:-1; }
/* Accents typographiques de l'Academy : couleur du track plutôt que moutarde. */
.academy-page .prog-when, .academy-page .track-index { color:var(--acc-ink); }
.academy-page .obj-list li::before, .academy-page .opt-list li::before, .academy-page .check-list li::before { color:var(--acc); }
.academy-page .track-target span { color:var(--navy); }
@media (max-width: 900px) {
  .principle-num { font-size:clamp(64px,18vw,96px); }
}

/* Barre mobile : ces règles doivent venir APRÈS .brand-nav, .nav-right et .lang-btn
   (définis plus haut) pour l'emporter à spécificité égale. Logo agrandi, reste resserré. */
@media (max-width: 900px) {
  .brand-nav { height:30px; width:162px; }
  .nav-right { gap:8px; } .lang-btn { padding:4px 8px; }
  .nav-cta { padding:10px 12px; white-space:nowrap; }
}

/* Photos du Comptoir Général : deux colonnes jusqu'à 760 px, puis une rangée compacte de
   trois vignettes sous le texte. Placé en fin de feuille pour l'emporter sur les règles de
   base .cg-photos définies plus haut (même spécificité : l'ordre décide). */
@media (max-width: 1100px) { .cg-grid { gap:40px; } }
@media (max-width: 760px) {
  .cg-grid { grid-template-columns:1fr; gap:28px; }
  .cg-photos { grid-template-columns:repeat(3,1fr); gap:10px; }
  .cg-photos .photo-ph:first-child, .cg-photos .cg-photo:first-child { grid-column:auto; aspect-ratio:4 / 3; }
  .photo-ph span { font-size:9px; }
}
/* ===== Menu burger + ajustements mobile (≤ 900 px) =====
   Placé en fin de feuille pour l'emporter sur les règles nav définies plus haut. */
.nav-menu { display:contents; }
.nav-menu-foot, .nav-burger { display:none; }
.scroll { height:100vh; height:100dvh; } /* dvh : barre d'adresse mobile prise en compte */

@media (max-width: 900px) {
  nav { padding:12px 16px; }
  .lang-switch-bar { display:none; }           /* FR/EN passe dans le panneau */
  .nav-right { gap:10px; }

  /* Bouton burger : 3 traits → croix */
  .nav-burger { display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; margin:-7px -10px -7px 0; padding:0; background:none; border:none; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .nav-burger:focus-visible { outline:2px solid var(--mustard); outline-offset:2px; }
  .nav-burger span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s; }
  nav.menu-open .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  nav.menu-open .nav-burger span:nth-child(2) { opacity:0; transform:scaleX(0); }
  nav.menu-open .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* Panneau : ancré sous la barre (nav est fixed → conteneur des enfants absolute),
     il occupe le reste de l'écran. */
  .nav-menu { display:flex; flex-direction:column; position:absolute; top:calc(100% + 1px); left:0; right:0; height:calc(100vh - 100% - 1px); height:calc(100dvh - 100% - 1px); padding:16px 24px 32px; background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 7%, var(--cream)) 0%, var(--cream) 60%); overflow-y:auto; overscroll-behavior:contain; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .28s ease, transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s; }
  nav.menu-open .nav-menu { opacity:1; visibility:visible; transform:none; transition:opacity .28s ease, transform .32s cubic-bezier(.4,0,.2,1), visibility 0s; }

  .nav-links { display:flex; flex-direction:column; gap:0; font-family:'Instrument Serif',serif; font-size:clamp(38px,11vw,52px); letter-spacing:-0.02em; line-height:1; }
  .nav-links li { border-bottom:1px solid var(--navy-line); opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
  nav.menu-open .nav-links li { opacity:1; transform:none; }
  nav.menu-open .nav-links li:nth-child(1) { transition-delay:.06s; }
  nav.menu-open .nav-links li:nth-child(2) { transition-delay:.11s; }
  nav.menu-open .nav-links li:nth-child(3) { transition-delay:.16s; }
  nav.menu-open .nav-links li:nth-child(4) { transition-delay:.21s; }
  .nav-links a, .nav-soon { display:block; padding:22px 0; font-weight:400; }
  .nav-soon em { font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.02em; margin-left:8px; vertical-align:middle; }

  .nav-menu-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding-top:32px; }
  .nav-menu-foot .lang-btn { padding:9px 16px; font-size:13px; }
  .nav-menu-sig { font-family:'Instrument Serif',serif; font-style:italic; font-size:18px; color:var(--navy); }

  /* Héros : plus de hauteur forcée (88vh laissait de grands vides), juste l'espace du contenu. */
  .hero { min-height:auto; padding-top:104px; padding-bottom:64px; }
  .hero h1 { margin-bottom:32px; }
  .hero-badges { flex-wrap:wrap; }
  .method-steps li, .why-list li { gap:16px; }

  /* Tableaux de prix : tiennent dans la largeur au lieu de défiler. */
  .price-table { min-width:0; }
  .price-table th, .price-table td { padding:12px 10px; font-size:14px; }
  .price-table thead th { font-size:11px; }
  .price-table td { font-size:15px; }
}