/* Sylvestre UI — styles spécifiques aux pages. */

/* Espacement vertical des sections */
.sec { padding-block: clamp(36px, 5vw, 68px); position: relative; }
.sec-sm { padding-block: clamp(20px, 3vw, 36px); }
.sec-lg { padding-block: clamp(48px, 7vw, 96px); }
.sec-top-line { border-top: 1px solid var(--border-subtle); }

/* Titres fluides */
.h-hero { font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.h-sec { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0; }
.h-sec-lg { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; letter-spacing: -0.03em; margin: 0; }

/* Glow d'ambiance */
.glow-top-right { top: -160px; right: -80px; width: min(720px, 80vw); height: 560px; background: radial-gradient(50% 50% at 60% 40%, rgba(76,203,99,0.14), rgba(76,203,99,0) 70%); }
.glow-top-center { top: -180px; left: 50%; transform: translateX(-50%); width: min(900px, 92vw); height: 640px; background: radial-gradient(50% 50% at 50% 45%, rgba(76,203,99,0.13), rgba(76,203,99,0) 70%); }
.glow-center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(900px, 92vw); height: 440px; background: radial-gradient(50% 50% at 50% 50%, rgba(76,203,99,0.14), rgba(76,203,99,0) 70%); }

/* ----------------------------------------------------------- Héro split (formation B / accueil / services) */
.hero-split { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-bullets { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; }

/* Carte d'inscription intégrée (héro B) */
.enroll-card {
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: radial-gradient(95% 70% at 50% 0%, rgba(76,203,99,0.1), var(--surface-card) 62%);
  box-shadow: var(--shadow-xl), 0 0 50px rgba(76,203,99,0.12);
}
.enroll-card .inner { padding: clamp(24px, 2.6vw, 32px); }
.price-xl { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 5vw, 1.95rem); letter-spacing: -0.02em; color: #fff; line-height: 1; }
.price-old { font-size: 14px; color: var(--text-tertiary); text-decoration: line-through; }

/* Bande de confiance */
.trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); opacity: 0.92; }
.trust-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.trust-stat .v { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--text-secondary); }
.trust-stat .l { font-size: 12.5px; color: var(--text-tertiary); }

/* Objectifs */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 22px); }
.objective {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); background: var(--surface-card);
}
.objective .ico, .feature .ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--icon-frame); border: 1px solid var(--border-default); color: var(--text-secondary);
}
.objective span:last-child { font-size: 15px; color: var(--text-secondary); line-height: 1.5; padding-top: 5px; }

/* Formateur */
.coach-card {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl);
  background: var(--surface-card); padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 44px); align-items: center;
}
.coach-avatar {
  flex: none; width: clamp(120px, 16vw, 168px); height: clamp(120px, 16vw, 168px);
  border-radius: var(--radius-xl); background: linear-gradient(155deg, #1c2a20, #0a0a0a 78%);
  border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center;
}
.coach-avatar span { font-family: var(--font-display); font-weight: 600; font-size: 3rem; color: var(--text-secondary); }

/* Témoignages */
.testimonial { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); padding: 26px 24px; }
.testimonial p { font-size: 0.98rem; color: var(--text-secondary); line-height: 1.6; margin: 14px 0 20px; flex: 1; text-wrap: pretty; }
.avatar-initial {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; background: var(--icon-frame);
  border: 1px solid var(--border-default); font-family: var(--font-display); font-weight: 600; color: var(--text-secondary);
}

/* Sites d'élèves */
.student-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); }
.student-card .shot { width: 100%; aspect-ratio: 16/10; background: linear-gradient(155deg, #161c18, #0b0b0b 75%); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 13px; text-align: center; padding: 16px; }
.student-card .meta { padding: 16px 18px 18px; }
.student-card .meta .d { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.student-card .meta .w { font-size: 12.5px; color: var(--text-tertiary); margin-top: 3px; }

/* Garantie */
.guarantee {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 30px); flex-wrap: wrap;
  border: 1px solid var(--border-accent); border-radius: var(--radius-2xl);
  background: radial-gradient(90% 130% at 0% 0%, rgba(76,203,99,0.09), var(--surface-card) 60%);
  padding: clamp(24px, 3vw, 36px);
}
.guarantee .shield {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 999px; background: var(--icon-frame);
  border: 1px solid var(--border-default); color: var(--text-secondary);
}

/* ----------------------------------------------------------- Tunnel d'inscription */
.funnel { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: clamp(18px, 2vw, 24px); align-items: start; }
.funnel-form { border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: var(--surface-card); padding: clamp(24px, 3vw, 38px); }
.funnel-step-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.funnel-step-label .n { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.funnel-step-label .t { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.provider-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-inset); border: 1px solid var(--border-default); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.provider-badge .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.pay-marks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-mark { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-tertiary); }

/* Boutons "segment" (onglets méthode, opérateurs, plan, type projet) */
.seg { position: relative; border: 1px solid var(--border-default); background: rgba(255,255,255,0.02); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); color: var(--text-secondary); transition: border-color var(--dur-fast); }
.seg.is-on { border-color: var(--border-accent); background: var(--accent-soft); color: var(--accent); }
.seg-method { flex: 1; padding: 13px 12px; font-size: 13.5px; font-weight: 600; }
.seg-operator { padding: 12px 6px; font-size: 12px; font-weight: 600; text-align: center; }
.seg-plan { flex: 1; padding: 12px 14px; text-align: left; }
.seg-plan .pl { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.seg-plan.is-on .pl { color: var(--accent); }
.seg-plan .ps { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.seg-plan.is-on .ps { color: var(--accent); }

/* Récap commande sticky */
.order-recap {
  position: sticky; top: 96px; border: 1px solid var(--border-accent);
  border-radius: var(--radius-2xl); overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, rgba(76,203,99,0.1), var(--surface-card) 60%);
  box-shadow: 0 0 40px rgba(76,203,99,0.1);
}
.order-recap .inner { padding: clamp(24px, 3vw, 32px); }
.recap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.confirm-check {
  display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px;
  border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--border-accent);
  color: var(--accent); box-shadow: 0 0 32px rgba(76,203,99,0.28);
}

/* ----------------------------------------------------------- Catalogue formations */
.flagship {
  position: relative; overflow: hidden; border: 1px solid var(--border-accent);
  border-radius: var(--radius-2xl); background: radial-gradient(90% 130% at 0% 0%, rgba(76,203,99,0.1), var(--surface-card) 55%);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(76,203,99,0.1); display: grid; grid-template-columns: 1.1fr 1fr;
}
.flagship-body { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.flagship-media { position: relative; min-height: 320px; border-left: 1px solid var(--border-subtle); background: linear-gradient(160deg, #16241b, #0a0a0a 72%); }
/* Bouton lecture : effet glace. Pas de backdrop-filter (sur Android, multiplié sur
   ~40 miniatures, il provoque des artefacts de compositing GPU « neige TV »). Un
   fond translucide + bordure + ombre donne le même rendu sans couche GPU. */
.play-orb {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.play-orb:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.32); }
.play-orb svg, .play-orb svg path { fill: var(--text-primary); }
.course-card { display: flex; flex-direction: column; cursor: pointer; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); }
.course-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 0 36px rgba(76,203,99,0.1); }
.course-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(155deg, #161c18, #0b0b0b 75%); border-bottom: 1px solid var(--border-subtle); }
.course-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); border: 1px solid var(--border-default); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-secondary); }
.course-short { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.02; letter-spacing: -0.02em; color: #fff; white-space: pre-line; }
.course-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.course-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-tertiary); }
.feature { text-align: center; }
.feature .ico { width: 48px; height: 48px; border-radius: var(--radius-md); margin: 0 auto 18px; }

/* ----------------------------------------------------------- Création de sites web */
.browser-mock { position: relative; aspect-ratio: 4/3; border: 1px solid var(--border-accent); border-radius: var(--radius-xl); overflow: hidden; background: #0c0f0d; box-shadow: var(--shadow-lg), 0 0 50px rgba(76,203,99,0.1); }
.browser-bar { position: absolute; top: 0; left: 0; right: 0; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: rgba(0,0,0,0.5); border-bottom: 1px solid var(--border-subtle); z-index: 2; }
.browser-bar .dot { width: 9px; height: 9px; border-radius: 999px; }
.service-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); padding: clamp(26px, 3vw, 38px); transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.service-card:hover { border-color: var(--border-accent); box-shadow: 0 0 32px rgba(76,203,99,0.1); }
.service-card .ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--accent-soft); border: 1px solid var(--border-accent); color: var(--accent); margin-bottom: 22px; }
.portfolio-card { display: block; cursor: pointer; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); }
.portfolio-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 0 32px rgba(76,203,99,0.1); }

/* Calculateur */
.calc-grid { display: grid; grid-template-columns: 1.4fr minmax(300px, 1fr); gap: clamp(18px, 2vw, 24px); align-items: start; }
.calc-config { border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: var(--surface-card); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 38px); }
.calc-step-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.calc-step-title .n { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent); }
.calc-step-title .t { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.type-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-radius: var(--radius-lg); text-align: left; color: var(--text-primary); }
.type-btn .radio { flex: none; width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; }
.type-btn.is-on .radio { border: 5px solid var(--accent); background: #0a0a0a; }
.opt-btn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.opt-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-default); }
.opt-btn.is-on .opt-check { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.opt-check svg { display: none; }
.opt-btn.is-on .opt-check svg { display: block; }
input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.calc-summary { position: sticky; top: 96px; border: 1px solid var(--border-accent); border-radius: var(--radius-2xl); overflow: hidden; background: radial-gradient(90% 70% at 50% 0%, rgba(76,203,99,0.1), var(--surface-card) 60%); box-shadow: 0 0 44px rgba(76,203,99,0.1); }
.calc-summary .inner { padding: clamp(26px, 3vw, 34px); }
.calc-total { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -0.03em; color: #fff; line-height: 1; }
.calc-total.is-quote { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.devis-recap { border: 1px solid var(--border-accent); border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-xl), 0 0 50px rgba(76,203,99,0.12); margin-top: clamp(24px, 3vw, 36px); }

/* ----------------------------------------------------------- Espace / dashboard */
.dash-header { position: sticky; top: 0; z-index: 50; padding: 14px clamp(16px, 4vw, 40px); background: rgba(8,8,8,0.72); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(18px); }
.dash-header-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dash-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--border-accent); font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--accent); }
.stat-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); padding: 22px 24px; }
.stat-card .ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--border-accent); color: var(--accent); margin-bottom: 14px; }
.stat-card .v { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1; }
.stat-card .l { font-size: 13px; color: var(--text-tertiary); margin-top: 6px; }
.resume-card { border: 1px solid var(--border-accent); border-radius: var(--radius-2xl); overflow: hidden; background: radial-gradient(90% 130% at 0% 0%, rgba(76,203,99,0.1), var(--surface-card) 55%); box-shadow: 0 0 44px rgba(76,203,99,0.1); display: grid; grid-template-columns: 1.4fr 1fr; }
.progress-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.progress-track.thin { height: 7px; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px rgba(76,203,99,0.5); }
.my-course { display: flex; flex-direction: column; cursor: pointer; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); }
.my-course:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 0 36px rgba(76,203,99,0.1); }
.my-course .thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(155deg, #161c18, #0b0b0b 75%); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; }
.my-course .thumb .short { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.05; letter-spacing: -0.02em; color: #fff; text-align: center; padding: 0 18px; white-space: pre-line; }

/* Lecteur */
.reader-grid { display: grid; grid-template-columns: 1.55fr 0.9fr; gap: clamp(18px, 2.5vw, 28px); align-items: start; }
.player { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(160deg, #16241b, #080808 80%); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; }
.curriculum { border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: var(--surface-card); overflow: hidden; position: sticky; top: 88px; }
.curriculum-head { padding: 22px 22px 18px; border-bottom: 1px solid var(--border-subtle); }
.curriculum-list { max-height: 540px; overflow-y: auto; overflow-x: hidden; }
.cur-module { border-bottom: 1px solid var(--border-subtle); }
.cur-module-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.cur-module-head .num { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-tertiary); }
.cur-module-head .t { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.cur-lesson { display: flex; align-items: center; gap: 11px; padding: 11px 20px 11px 24px; cursor: pointer; transition: background var(--dur-fast); }
.cur-lesson:hover { background: rgba(255,255,255,0.04); }
.cur-lesson.is-active { background: var(--accent-soft); }
.cur-lesson .tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--border-default); }
.cur-lesson.is-done .tick { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.cur-lesson .tick svg { display: none; }
.cur-lesson.is-done .tick svg { display: block; }
.cur-lesson .lt { flex: 1; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.cur-lesson.is-active .lt { color: var(--text-primary); }
.cur-lesson .ld { flex: none; font-size: 11.5px; color: var(--text-tertiary); }

/* ----------------------------------------------------------- Placeholder / 404 */
.center-stage { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* ----------------------------------------------------------- Automatisation IA */
.wf-card { position: relative; aspect-ratio: 4/3; border: 1px solid var(--border-accent); border-radius: var(--radius-xl); overflow: hidden; background: radial-gradient(120% 80% at 80% -10%, rgba(76,203,99,0.1), transparent 60%), #0c0f0d; box-shadow: var(--shadow-lg), 0 0 50px rgba(76,203,99,0.1); }
.wf-bar { position: absolute; top: 0; left: 0; right: 0; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--border-subtle); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); background: rgba(0,0,0,0.35); z-index: 2; }
.wf-bar .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.wf-canvas { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 16px 16px; }
.wf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Fil de liaison fin + flux de points verts animés */
/* Câble gris SOLIDE bien visible (dessous) — large, clair, bouts arrondis. */
.wf-wire { fill: none; stroke: rgba(255, 255, 255, 0.20); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Tirets verts (dessus) PLUS FINS que le câble. Sans pathLength + non-scaling-stroke
   → dasharray en PIXELS écran, uniforme sur tous les fils : tirets 12px, espace 14px. */
.wf-flow { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 12 14; filter: drop-shadow(0 0 1.5px rgba(76, 203, 99, 0.55)); animation: wf-flow 1.2s linear infinite; }
@keyframes wf-flow { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .wf-flow { animation: none; } }
.wf-node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); z-index: 1; white-space: nowrap; }
.wf-node.accent { border-color: var(--border-accent); }
.wf-node .wf-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--border-accent); color: var(--accent); flex: none; }
.wf-node.trigger .wf-ico { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); box-shadow: var(--glow-sm); }
.wf-node .wf-k { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.wf-node .wf-t { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); }
/* Mobile : le diagramme 2D tasse les nœuds → on bascule en flux vertical aéré */
@media (max-width: 600px) {
  .wf-card { aspect-ratio: auto; }
  .wf-svg { display: none; }
  .wf-canvas {
    position: static;
    display: flex; flex-direction: column; align-items: center;
    gap: 28px;
    padding: 50px 16px 26px;
  }
  .wf-node {
    position: relative;
    left: auto !important; top: auto !important;
    transform: none;
  }
  .wf-node:not(:last-child)::after {
    content: ""; position: absolute; left: 50%; top: 100%;
    width: 1px; height: 28px; background: var(--border-accent);
  }
}

.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.step { border-top: 1px solid var(--border-default); padding-top: 22px; }
.step .n { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent); letter-spacing: 0.08em; }
.step h3 { font-size: 1.12rem; margin: 12px 0 8px; }
.step p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

.tools-strip { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; padding: clamp(18px, 2vw, 26px) clamp(20px, 3vw, 34px); }
.tools-strip .label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); margin-right: auto; }
.tools-strip .brand-logo { height: 24px; opacity: 0.8; }
.tools-strip .brand-logo:hover { opacity: 1; filter: brightness(0) invert(0.88); }

/* ----------------------------------------------------------- Tutoriels & Blog */
/* Filtres catégories */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { padding: 8px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-default); font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
.chip:hover { color: var(--text-primary); }
.chip.is-on { color: var(--text-on-accent); background: var(--accent); border-color: var(--accent); box-shadow: var(--glow-sm); }

/* Détail tuto : 2 colonnes (contenu + aside sticky) */
.tuto-layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(24px, 4vw, 48px); align-items: start; }
/* Un élément de grille refuse par défaut de descendre sous la largeur minimale de son contenu
   (`min-width: auto`). Un seul libellé non sécable dans la colonne latérale suffisait alors à
   élargir toute la colonne et à faire déborder la page sur mobile. `min-width: 0` autorise la
   colonne à se contraindre — c'est aux enfants de gérer leur propre troncature. */
.tuto-layout > * { min-width: 0; }
.tuto-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.aside-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); padding: 22px 22px 24px; }
.aside-card h3 { font-size: 1rem; margin: 0 0 16px; }

/* Chapitres */
.chapter { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 0; border: none; border-top: 1px solid var(--border-subtle); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.chapter:first-of-type { border-top: none; padding-top: 0; }
.chapter .time { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--accent); flex: none; width: 42px; }
.chapter .lbl { font-size: 13.5px; color: var(--text-secondary); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; transition: color var(--dur-fast); }
.chapter:hover .lbl { color: var(--text-primary); }
.chapter:hover .time { text-decoration: underline; }

/* Ressources (dont réservées) */
.resource { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border-subtle); font-size: 13.5px; color: var(--text-secondary); }
.resource:first-of-type { border-top: none; padding-top: 0; }
.resource .r-ico { flex: none; color: var(--accent); display: inline-flex; }
/* Une seule ligne, coupée aux points de suspension. Plafonner un NOMBRE de caractères ne
   suffirait pas : la même chaîne repasserait à la ligne sur un écran étroit. Le libellé
   complet reste lisible au survol (attribut title) et dans la page liée. */
.resource .r-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resource.locked { color: var(--text-tertiary); }
.resource.locked .r-ico { color: var(--text-tertiary); }
.resource .r-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-default); font-size: 10.5px; font-weight: 500; color: var(--text-tertiary); }
.resource.free .r-badge { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent); }

/* Bloc d'accès réservé (préfigure le contenu payant / sur formulaire) */
.gate {
  border: 1px solid var(--border-accent); border-radius: var(--radius-2xl);
  background: radial-gradient(90% 130% at 0% 0%, rgba(76, 203, 99, 0.08), var(--surface-card) 60%);
  padding: clamp(24px, 3vw, 36px); text-align: center;
}
.gate .lock { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--border-accent); color: var(--accent); margin-bottom: 16px; }

/* Prose (corps d'article / notes) */
.prose { max-width: 720px; }
.prose > * { margin: 0 0 18px; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { font-size: 1rem; color: var(--text-secondary); line-height: 1.68; }
.prose h2, .prose h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin-top: 32px; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.18rem; }
.prose ul { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.prose li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.97rem; color: var(--text-secondary); line-height: 1.55; }
.prose li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 8px rgba(76, 203, 99, 0.5); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose em { font-style: italic; }
.prose ol { margin: 0 0 18px; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 11px; }
.prose ol li { display: list-item; list-style: decimal; color: var(--text-secondary); font-size: 0.97rem; line-height: 1.55; }
.prose ol li::before { display: none; }
.prose-fig { margin: 26px 0; }
.prose-fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.prose-fig figcaption { margin-top: 9px; font-size: 0.9rem; color: var(--text-secondary); opacity: 0.8; text-align: center; }
.prose blockquote { margin: 24px 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--accent); font-size: 1.12rem; line-height: 1.6; color: var(--text-primary); font-style: italic; }
.prose-code { background: #0c0c0c; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px 18px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; line-height: 1.55; color: #e6e6e6; white-space: pre; }
.prose-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); margin: 26px 0; }
.prose-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Lecteur (embed ou placeholder) */
.player-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); background: radial-gradient(120% 90% at 50% -10%, rgba(76,203,99,0.12), transparent 60%), linear-gradient(160deg, #16241b, #080808 80%); display: flex; align-items: center; justify-content: center; }
.player-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
/* Façade (vignette + bouton lecture) avant lecture — rendu arrondi maison, pas de chrome YouTube tant qu'on ne lance pas */
.player-embed .v-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.player-embed[data-tuto-player]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); z-index: 1; pointer-events: none; }
.player-embed .play-orb, .player-embed > .muted { position: relative; z-index: 2; }
.player-embed.is-playing .v-img, .player-embed.is-playing .play-orb, .player-embed.is-playing > .muted, .player-embed.is-playing::after { display: none; }

/* Bandeau article (cover) */
.article-cover { position: relative; aspect-ratio: 21/9; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border-subtle); background: radial-gradient(120% 120% at 100% 0%, rgba(76,203,99,0.14), transparent 55%), linear-gradient(155deg, #1a2a1f, #0a0a0a 78%); display: flex; align-items: flex-end; }
.post-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-tertiary); }
.post-meta .cat { color: var(--accent); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ----------------------------------------------------------- Pages légales */
.legal-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--border-accent); border-radius: var(--radius-lg); background: var(--accent-soft); font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.legal-note svg { flex: none; color: var(--accent); margin-top: 1px; }
.legal-section { margin-top: clamp(26px, 4vw, 40px); }
.legal-section h2 { font-size: 1.3rem; margin: 0 0 14px; }

/* ----------------------------------------------------------- Gate « bientôt disponible » (page formation) */
.coming-soon { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; background: rgba(5, 5, 5, 0.86); backdrop-filter: blur(10px); }
.cs-card { width: 100%; max-width: 460px; border: 1px solid var(--border-accent); border-radius: var(--radius-2xl); background: radial-gradient(90% 70% at 50% 0%, rgba(76, 203, 99, 0.1), var(--surface-card) 60%); box-shadow: var(--shadow-xl), 0 0 50px rgba(76, 203, 99, 0.12); padding: clamp(28px, 4vw, 40px); text-align: center; }
.cs-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; margin: 18px 0 0; }
.cs-card .cs-lead { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin: 14px 0 0; }
.cs-card form { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cs-error { color: var(--danger); font-size: 13px; margin: 4px 0 0; }
.cs-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--text-tertiary); transition: color var(--dur-fast); }
.cs-back:hover { color: var(--accent); }
.cs-note { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; margin: 12px 0 0; }

/* ----------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  .hero-split, .flagship, .resume-card, .funnel, .calc-grid, .reader-grid, .tuto-layout { grid-template-columns: 1fr; }
  /* Mobile/tablette : la carte ressources remonte juste sous la vidéo (avant le texte) → zéro scroll pour les liens */
  .tuto-aside { position: static; order: -1; }
  .flagship-media { min-height: 220px; border-left: none; border-top: 1px solid var(--border-subtle); }
  .order-recap, .calc-summary, .curriculum { position: static; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .coach-card { grid-template-columns: 1fr; text-align: left; }
  .steps-row { grid-template-columns: 1fr; }
  .tools-strip .label { margin-right: 0; width: 100%; }
  /* Héros 2 colonnes : on centre le texte sur mobile, comme le reste des pages */
  .hero-split > div:first-child,
  .about-hero > div:first-child { text-align: center; }
  .hero-split .hero-actions,
  .about-hero .hero-actions { justify-content: center; }
  .hero-bullets { align-items: center; }
  .about-cred { justify-content: center; }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- Consentement cookies */
/* Façade « clic pour charger » à la place d'un iframe YouTube non consenti. */
.video-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 22px;
  background: radial-gradient(120% 90% at 50% -10%, rgba(76,203,99,0.12), transparent 60%), linear-gradient(160deg, #16241b, #080808 80%);
}
.video-consent-play {
  display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 8px 30px rgba(76,203,99,0.4);
  cursor: pointer; transition: transform var(--dur-fast, .15s) var(--ease-out, ease);
}
.video-consent-play:hover { transform: scale(1.06); }
.video-consent-title { font-weight: 600; color: var(--text, #fff); margin: 4px 0 0; font-size: 15px; }
.video-consent-note { color: var(--text-tertiary, #9aa); margin: 0; font-size: 12px; max-width: 320px; line-height: 1.5; }
.video-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* Bandeau de consentement. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 16px clamp(14px, 4vw, 28px); background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px); border-top: 1px solid var(--border-default, #2a2a2a);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: 1080px; margin: 0 auto; display: flex; gap: 18px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookie-banner-main { flex: 1 1 420px; min-width: 280px; }
.cookie-banner-title { font-weight: 700; color: var(--text, #fff); margin: 0 0 4px; font-size: 15px; }
.cookie-banner-text { color: var(--text-secondary, #c7c7c7); margin: 0; font-size: 13px; line-height: 1.55; }
.cookie-banner-text a { color: var(--accent, #4CCB63); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cookie-prefs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cookie-pref { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary, #c7c7c7); line-height: 1.5; cursor: pointer; }
.cookie-pref input { margin-top: 2px; accent-color: var(--accent, #4CCB63); width: 16px; height: 16px; flex: none; }
.cookie-pref.is-locked { opacity: 0.85; cursor: default; }
.cookie-pref strong { color: var(--text, #fff); }
@media (max-width: 720px) {
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- Bloc « Toujours inclus » (création de sites) */
.inc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.inc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 820px) {
  .inc-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .inc-list { grid-template-columns: 1fr; gap: 12px; }
}