/* =========================================================
   La Méthode SLT — feuille de style unique
   Palette : mer (bleus profonds), maquis (verts), pierre (granit)
   ========================================================= */

:root {
  --mer-900: #08303b;
  --mer-800: #0b3f4d;
  --mer-700: #0f5466;
  --mer-500: #1f7f91;
  --mer-300: #7cc3cc;
  --mer-100: #dff1f2;
  --maquis-800: #2c4a2e;
  --maquis-600: #4c7343;
  --maquis-300: #a9c48f;
  --pierre-50: #faf7f2;
  --pierre-100: #f2ece2;
  --pierre-200: #e4dbcc;
  --pierre-400: #b9ad99;
  --pierre-700: #5f574b;
  --granit: #3c89a3;        /* ex-granit rouge, remplacé par le bleu #3c89a3 */
  --granit-dark: #2e6c81;
  --granit-pale: #dcedf2;
  --granit-profond: #1f5566;
  --granit-profond-2: #1a4a59;
  --soleil: #f2b84b;
  --soleil-clair: #ffd98a;
  --soleil-pale: #fff8e6;
  --soleil-texte: #5a4300;
  --mer-950: #062530;
  /* Les mêmes couleurs en R, V, B, pour les transparences : rgba(var(--granit-rvb), .3) */
  --granit-rvb: 60, 137, 163;
  --soleil-rvb: 242, 184, 75;
  --mer-900-rvb: 8, 48, 59;
  --encre: #1d2422;

  --font-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --font-texte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(var(--mer-900-rvb), .06), 0 12px 40px -12px rgba(var(--mer-900-rvb), .25);
  --shadow-lg: 0 30px 80px -30px rgba(var(--mer-900-rvb), .45);
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Bloque le défilement horizontal (sur mobile, body seul ne suffit pas) */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--pierre-50);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; display: block; }
a { color: var(--mer-700); text-underline-offset: 3px; }
a:hover { color: var(--granit); }
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: var(--mer-900);
  font-variation-settings: "SOFT" 50, "WONK" 0;
}
h1 { font-size: clamp(2.6rem, 8vw, 5.6rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--soleil); color: var(--mer-900); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--soleil); color: var(--mer-900); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Grain subtil sur tout le site (texture pierre) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Repères à compléter : très visibles */
.todo {
  display: inline-block;
  background: #fff3c4; color: #6b4a00;
  border: 1.5px dashed #c99a1a; border-radius: 6px;
  padding: 0 .4em; font-family: var(--font-texte); font-size: .9em; font-weight: 700; line-height: 1.5;
}

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--granit); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .8em 1.5em;
  font: 700 1rem/1.2 var(--font-texte); letter-spacing: .01em; text-decoration: none;
  color: var(--fg); background: var(--bg);
  border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
  box-shadow: 0 10px 24px -10px rgba(var(--granit-rvb), .7);
  overflow: hidden; isolation: isolate;
}
.btn::before { /* reflet qui balaie le bouton au survol */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s;
}
.btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(var(--granit-rvb), .8); background: var(--granit-dark); }
.btn:hover::before { transform: translateX(120%); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform .25s; }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { --bg: transparent; --fg: var(--mer-800); border-color: currentColor; box-shadow: none; }
.btn--ghost:hover { --fg: #fff; background: var(--mer-800); border-color: var(--mer-800); box-shadow: none; }
.btn--light { --bg: #fff; --fg: var(--mer-900); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.btn--light:hover { background: var(--soleil); --fg: var(--mer-900); }
.btn--ghost-light { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; box-shadow: none; }
.btn--sm { min-height: 42px; padding: .55em 1.1em; font-size: .92rem; }
.btn--block { width: 100%; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background .35s, box-shadow .35s, color .35s;
  color: #fff;
}
/* Le fond flouté est sur un calque à part : un backdrop-filter posé sur
   l'en-tête lui-même piégerait le menu mobile (position fixed) à l'intérieur. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(250, 247, 242, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(var(--mer-900-rvb),.08);
  opacity: 0; transition: opacity .35s;
}
.site-header.is-scrolled::before, .site-header--solid::before { opacity: 1; }
.menu-open .site-header::before { opacity: 0; }
.site-header.is-scrolled, .site-header--solid { color: var(--mer-900); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.logo:hover { color: inherit; }
.logo__img { display: block; height: 48px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.logo:hover .logo__img { transform: rotate(-3deg) scale(1.04); }
.site-footer .logo__img { height: 72px; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav__links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: .5em .9em; border-radius: 999px;
  color: inherit; text-decoration: none; font-weight: 600; font-size: .97rem;
  transition: background .2s;
}
.nav__links a:hover { background: rgba(127, 127, 127, .14); color: inherit; }
.nav__links a[aria-current="page"] { background: rgba(127, 127, 127, .16); }
.nav__actions { display: flex; gap: 8px; margin-left: 10px; }
.site-header:not(.is-scrolled):not(.site-header--solid) .btn--ghost { --fg: #fff; }
.site-header:not(.is-scrolled):not(.site-header--solid) .btn--ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; }

.menu-toggle {
  display: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; position: relative; z-index: 120;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  position: absolute; left: 13px; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .35s cubic-bezier(.7,0,.2,1), opacity .2s, top .35s;
}
.menu-toggle span { top: 23px; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; left: 0; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { top: 0; transform: rotate(45deg); background: #fff; }
.menu-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); background: #fff; }

@media (max-width: 960px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 110;
    flex-direction: column; justify-content: center; align-items: stretch; gap: 28px;
    padding: 90px 28px 40px;
    background: radial-gradient(120% 80% at 100% 0%, var(--mer-700), var(--mer-900) 60%);
    color: #fff;
    clip-path: circle(0 at calc(100% - 40px) 36px);
    transition: clip-path .6s cubic-bezier(.7,0,.2,1);
    visibility: hidden;
  }
  .menu-open .nav { clip-path: circle(150% at calc(100% - 40px) 36px); visibility: visible; }
  .nav__links { flex-direction: column; gap: 4px; }
  .nav__links a { font-family: var(--font-titre); font-size: 2.2rem; padding: .15em 0; border-radius: 0; }
  .nav__links a:hover, .nav__links a[aria-current="page"] { background: none; color: var(--soleil); }
  .nav__actions { flex-direction: column; margin: 0; }
  .nav .btn--ghost { --fg: #fff; }
  .nav .btn { min-height: 54px; }
  .menu-open { overflow: hidden; }
  .menu-open .site-header { color: #fff; }
}

/* ---------- Hero (accueil) ---------- */
.hero {
  position: relative; min-height: clamp(620px, 100svh, 960px); display: flex; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 180px;
  background:
    radial-gradient(60% 50% at 85% 15%, rgba(var(--soleil-rvb),.35), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(31,127,145,.6), transparent 60%),
    linear-gradient(170deg, var(--mer-800) 0%, var(--mer-900) 55%, var(--mer-950) 100%);
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero__sun {
  position: absolute; z-index: -1; width: min(52vw, 560px); aspect-ratio: 1; right: -6vw; top: 8vh;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--soleil-clair), var(--soleil) 45%, rgba(var(--soleil-rvb),0) 70%);
  filter: blur(4px); opacity: .55;
  animation: sun 12s ease-in-out infinite alternate;
}
@keyframes sun { to { transform: translate(-30px, 30px) scale(1.06); } }
.hero__content { position: relative; max-width: 860px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mer-700); margin-bottom: 1.2em;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.hero .eyebrow { color: var(--soleil); }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero h1 .line > span { display: inline-block; transform: translateY(110%); animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .15s; }
@keyframes rise { to { transform: none; } }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--soleil); position: relative; white-space: nowrap; }
.hero h1 em svg {
  position: absolute; left: 0; bottom: -.12em; width: 100%; height: .35em; overflow: visible;
}
.hero h1 em svg path {
  fill: none; stroke: var(--granit); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.2s 1s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__lead { font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 620px; color: rgba(255,255,255,.88); opacity: 0; animation: fade .9s .55s forwards; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2em; opacity: 0; animation: fade .9s .75s forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.greeting {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1.6em;
  padding: .45em 1em .45em .5em; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-weight: 700; font-size: .95rem; opacity: 0; animation: fade .8s .1s forwards;
}
.greeting__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--soleil); display: grid; place-items: center; color: var(--mer-900); font-size: .9rem; }
.greeting__word { display: inline-block; min-width: 7.5em; transition: opacity .35s, transform .35s; }
.greeting__word.is-out { opacity: 0; transform: translateY(-8px); }

/* Paysage animé : crêtes + vagues */
.landscape { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; pointer-events: none; }
.landscape svg { width: 100%; height: auto; }
.ridge { will-change: transform; }
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; overflow: hidden; }
.wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: swell linear infinite; }
.wave--1 { animation-duration: 22s; opacity: .45; bottom: 18px; }
.wave--2 { animation-duration: 15s; animation-direction: reverse; opacity: .7; bottom: 8px; }
.wave--3 { animation-duration: 11s; }
@keyframes swell { to { transform: translateX(-50%); } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px;
}
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: #fff; border-radius: 2px; animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Hero de page (corse / anglais / contact) ---------- */
.page-hero {
  position: relative; padding: calc(var(--header-h) + 60px) 0 150px; color: #fff; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(50% 60% at 90% 10%, rgba(var(--soleil-rvb),.3), transparent 60%),
    linear-gradient(165deg, var(--mer-700), var(--mer-900) 70%);
}
.page-hero--maquis { background: radial-gradient(50% 60% at 90% 10%, rgba(var(--soleil-rvb),.3), transparent 60%), linear-gradient(165deg, var(--maquis-600), var(--maquis-800) 75%); }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 7vw, 4.8rem); }
.page-hero h1 em { font-style: italic; font-weight: 500; color: var(--soleil); }
.page-hero .eyebrow { color: var(--soleil); }
.page-hero p { max-width: 640px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(255,255,255,.88); }
.page-hero .hero__cta { opacity: 1; animation: none; }
.page-hero .landscape .waves { height: 80px; }
.page-hero--short { padding-bottom: 110px; }

.facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 2.4em; max-width: 820px;
}
.fact {
  padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fact strong { display: block; font-family: var(--font-titre); font-size: 1.5rem; line-height: 1.1; color: var(--soleil); }
.fact span { font-size: .92rem; color: rgba(255,255,255,.88); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Bandeau défilant ---------- */
.marquee {
  background: var(--soleil); color: var(--mer-900); overflow: hidden; padding: 16px 0;
  border-block: 2px solid var(--mer-900); transform: rotate(-1.2deg); margin: -14px -10px 0; position: relative; z-index: 3;
}
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span {
  font-family: var(--font-titre); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 600; font-style: italic;
  padding-inline: .7em; white-space: nowrap; display: inline-flex; align-items: center; gap: 1.4em;
}
.marquee__track span::after { content: "✦"; font-style: normal; font-size: .7em; color: var(--granit); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.section--tight { padding: clamp(56px, 8vw, 96px) 0; }
.section--stone { background: var(--pierre-100); }
.section--dark { background: var(--mer-900); color: rgba(255,255,255,.88); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--soleil); }
.section__head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__head p { font-size: 1.15rem; color: var(--pierre-700); }
.section--dark .section__head p { color: rgba(255,255,255,.75); }
.lead { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.55; }
.big-quote {
  font-family: var(--font-titre); font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.2;
  color: var(--mer-900); font-weight: 500; letter-spacing: -.015em; margin: 0 0 .8em;
}
.big-quote em { color: var(--granit); }

.split { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

/* Emplacements photo */
.photo-slot {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5;
  display: grid; place-items: center; text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(135deg, rgba(var(--mer-900-rvb),.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--mer-100), var(--pierre-200));
  border: 2px dashed var(--pierre-400);
  color: var(--pierre-700); font-weight: 700; font-size: .95rem;
}
.photo-slot::before {
  content: ""; width: 54px; height: 54px; margin: 0 auto 10px; display: block; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f574b' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M8 5l1.5-2h5L16 5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.photo-slot--wide { aspect-ratio: 16 / 10; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-stack { position: relative; }
.photo-stack .photo-slot:nth-of-type(2) {
  position: absolute; width: 52%; aspect-ratio: 1; right: -4%; bottom: -8%;
  box-shadow: var(--shadow-lg); border: 6px solid var(--pierre-50); background-color: var(--pierre-100);
}
.photo-badge {
  position: absolute; left: -10px; top: 24px; z-index: 2;
  background: var(--granit); color: #fff; padding: 10px 16px; border-radius: 14px;
  font-family: var(--font-titre); font-size: 1.05rem; font-weight: 600; box-shadow: var(--shadow);
  transform: rotate(-4deg);
}

/* ---------- Cartes ---------- */
.grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  --mx: 50%; --my: 50%;
  position: relative; padding: clamp(24px, 3.5vw, 36px); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow); overflow: hidden; isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.card::before { /* halo qui suit la souris */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(var(--soleil-rvb),.22), transparent 60%);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: .4em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card__icon {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--mer-100); color: var(--mer-700);
}
.card__icon svg { width: 30px; height: 30px; }
.card--maquis .card__icon { background: #e6efdc; color: var(--maquis-600); }
.card--granit .card__icon { background: var(--granit-pale); color: var(--granit); }
.card__num {
  position: absolute; right: 22px; top: 10px; font-family: var(--font-titre); font-size: 5rem; font-weight: 700;
  color: var(--pierre-100); line-height: 1; z-index: -1;
}

.checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--maquis-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;
}
.section--dark .checklist li::before { background-color: var(--soleil); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308303b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chips li {
  padding: .5em 1em; border-radius: 999px; background: #fff; border: 1px solid var(--pierre-200);
  font-weight: 700; font-size: .95rem; color: var(--mer-800);
}

/* Cartes formations (accueil) */
.course-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 500px; padding: clamp(26px, 4vw, 44px); border-radius: 28px; overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  box-shadow: var(--shadow);
}
.course-card:hover { color: #fff; transform: translateY(-8px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
.course-card--corse { background: linear-gradient(160deg, var(--mer-500), var(--mer-900) 75%); }
.course-card--anglais { background: linear-gradient(160deg, var(--maquis-600), var(--maquis-800) 80%); }
.course-card__art { position: absolute; inset: 0; z-index: -1; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.course-card:hover .course-card__art { transform: scale(1.06); }
.course-card__art svg { position: absolute; width: 100%; height: 100%; }
.course-card__kicker { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--soleil); }
.course-card h3 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); margin: .2em 0 .3em; }
.course-card p { color: rgba(255,255,255,.88); max-width: 420px; }
.course-card__go {
  display: inline-flex; align-items: center; gap: .6em; margin-top: .6em; font-weight: 800;
}
.course-card__go span {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--mer-900); transition: transform .35s, background .35s;
}
.course-card:hover .course-card__go span { transform: rotate(-45deg); background: var(--soleil); }

/* ---------- Bande appel à l'action ---------- */
.cta-band {
  position: relative; border-radius: 32px; overflow: hidden; isolation: isolate;
  padding: clamp(36px, 6vw, 72px); color: #fff;
  background: radial-gradient(60% 90% at 100% 0%, rgba(var(--soleil-rvb),.45), transparent 60%), linear-gradient(135deg, var(--granit), var(--granit-profond));
}
.cta-band h2 { color: #fff; max-width: 680px; }
.cta-band p { max-width: 600px; color: rgba(255,255,255,.9); font-size: 1.15rem; }
.cta-band .hero__cta { opacity: 1; animation: none; }
.cta-band__ring {
  position: absolute; z-index: -1; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%;
  border: 60px solid rgba(255,255,255,.08); animation: spin 30s linear infinite;
}
.cta-band__ring::after { content: ""; position: absolute; inset: 40px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.25); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Vidéo témoignage ---------- */
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(150deg, var(--mer-700), var(--mer-900)); box-shadow: var(--shadow-lg);
}
.video__btn {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; color: #fff; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px;
  font: 700 1rem var(--font-texte);
}
.video__play {
  width: 84px; height: 84px; border-radius: 50%; background: var(--granit); display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(var(--granit-rvb),.6); animation: pulse 2.2s infinite;
  transition: transform .3s;
}
.video__btn:hover .video__play { transform: scale(1.1); }
.video__play svg { width: 30px; height: 30px; margin-left: 5px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 26px rgba(var(--granit-rvb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--granit-rvb),0); } }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.quote-card { position: relative; }
.quote-card::before {
  content: "“"; position: absolute; top: -.35em; left: -.05em; font-family: var(--font-titre); font-size: 9rem; line-height: 1; color: var(--soleil); opacity: .5;
}

/* ---------- Frise du programme ---------- */
.timeline { position: relative; padding-left: 44px; max-width: 900px; }
.timeline::before, .timeline__progress {
  content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--pierre-200);
}
.timeline__progress {
  background: linear-gradient(var(--mer-500), var(--maquis-600), var(--granit));
  transform-origin: top; transform: scaleY(var(--progress, 0)); transition: transform .1s linear;
}
.tl-part { position: relative; margin-bottom: clamp(40px, 7vw, 72px); }
.tl-part:last-child { margin-bottom: 0; }
.tl-part__dot {
  position: absolute; left: -44px; top: 2px; width: 31px; height: 31px; border-radius: 50%;
  background: var(--pierre-50); border: 3px solid var(--pierre-400); transition: border-color .4s, background .4s, transform .4s;
}
.tl-part.is-visible .tl-part__dot { border-color: var(--granit); background: var(--soleil); transform: scale(1.1); }
.tl-part__label { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--granit); }
.tl-part h3 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: .25em 0 .4em; }
.tl-part__meta { display: inline-block; font-weight: 700; color: var(--mer-700); background: var(--mer-100); padding: .2em .8em; border-radius: 999px; font-size: .9rem; margin-bottom: 1em; }
.modules { display: grid; gap: 14px; margin-top: 22px; }
.module {
  border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow); overflow: hidden;
}
.module summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; font-weight: 800; color: var(--mer-900);
}
.module summary::-webkit-details-marker { display: none; }
.module summary .module__n {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--mer-800); color: #fff; font-family: var(--font-titre); font-size: 1.05rem;
}
.module summary .module__t { flex: 1; }
.module summary::after {
  content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--mer-700); border-bottom: 2.5px solid var(--mer-700);
  transform: rotate(45deg) translateY(-3px); transition: transform .3s;
}
.module[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.module__body { padding: 0 20px 20px 70px; color: var(--pierre-700); }
.module__body ul { margin: .4em 0 0; }
@media (max-width: 520px) { .module__body { padding-left: 20px; } }
.module--bonus summary .module__n { background: var(--granit); }

.steps { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: #fff; border-radius: var(--radius-sm); padding: 22px; box-shadow: var(--shadow); border-top: 4px solid var(--maquis-600); }
.step:nth-child(2) { border-color: var(--mer-500); }
.step:nth-child(3) { border-color: var(--granit); }
.step small { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pierre-700); font-size: .75rem; }
.step h4 { font-size: 1.25rem; margin: .3em 0 .4em; }
.step p, .step ul { font-size: .97rem; color: var(--pierre-700); margin-bottom: 0; }
.step ul { padding-left: 1.1em; }

/* ---------- Formules ---------- */
.plans { display: grid; gap: 24px; max-width: 980px; margin-inline: auto; align-items: stretch; }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  position: relative; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 40px); border-radius: 28px;
  background: #fff; box-shadow: var(--shadow);
}
.plan__name { font-family: var(--font-titre); font-size: 2rem; color: var(--mer-900); margin: 0; }
.plan__time { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.plan__time strong { font-family: var(--font-titre); font-size: clamp(3rem, 7vw, 4.2rem); line-height: 1; color: var(--mer-800); letter-spacing: -.03em; }
.plan__time span { font-weight: 700; color: var(--pierre-700); }
.plan__price { margin: 6px 0 22px; font-weight: 700; color: var(--mer-800); }
.plan .checklist { flex: 1; margin-bottom: 26px; }
.plan__note { font-size: .88rem; color: var(--pierre-700); text-align: center; margin: 12px 0 0; }

/* Premium : bordure lumineuse animée */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.plan--premium {
  background: var(--mer-900); color: rgba(255,255,255,.88);
  border: 3px solid transparent;
  background:
    linear-gradient(var(--mer-900), var(--mer-900)) padding-box,
    conic-gradient(from var(--angle), var(--soleil), var(--granit), var(--mer-300), var(--maquis-300), var(--soleil)) border-box;
  animation: rotate-border 6s linear infinite;
  box-shadow: 0 30px 80px -30px rgba(var(--mer-900-rvb),.7);
}
@keyframes rotate-border { to { --angle: 360deg; } }
.plan--premium .plan__name, .plan--premium .plan__time strong { color: #fff; }
.plan--premium .plan__time span, .plan--premium .plan__note { color: rgba(255,255,255,.7); }
.plan--premium .plan__price { color: var(--soleil); }
.plan--premium .checklist li::before { background-color: var(--soleil); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308303b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.plan__badge {
  position: absolute; top: -16px; right: 24px; background: var(--soleil); color: var(--mer-900);
  padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 8px 20px -6px rgba(var(--soleil-rvb),.8);
}
.plans-note { text-align: center; max-width: 680px; margin: 32px auto 0; color: var(--pierre-700); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative;
  font-weight: 800; color: var(--mer-900); font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mer-100); color: var(--mer-800); font-size: 1.3rem; font-weight: 600; transition: transform .3s, background .3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--soleil); }
.faq details > div { padding: 0 22px 20px; color: var(--pierre-700); }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: .95rem; color: var(--mer-900); }
.field label .opt { font-weight: 500; color: var(--pierre-700); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre);
  padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--pierre-200); background: var(--pierre-50);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--mer-500); background: #fff; box-shadow: 0 0 0 4px rgba(31,127,145,.18);
}
.field--check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--pierre-700); }
.field--check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--mer-700); }
.hidden-field { display: none; }
.form-card { background: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-lg); }
.form-card--dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
.form-card--dark .field label { color: #fff; }
.form-card--dark .field label .opt { color: rgba(255,255,255,.6); }
.form-card--dark .field input, .form-card--dark .field select, .form-card--dark .field textarea { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.form-card--dark .field select option { color: var(--encre); }
.form-card--dark .field input:focus, .form-card--dark .field textarea:focus, .form-card--dark .field select:focus { background: rgba(255,255,255,.12); border-color: var(--soleil); box-shadow: 0 0 0 4px rgba(var(--soleil-rvb),.2); }
.form-card--dark .field--check { color: rgba(255,255,255,.75); }
.contact-aside { display: grid; gap: 16px; align-content: start; }
.contact-line { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow); text-decoration: none; color: var(--mer-900); font-weight: 700; }
.contact-line:hover { color: var(--granit); }
.contact-line .card__icon { margin: 0; width: 48px; height: 48px; border-radius: 14px; flex: none; }
.contact-line small { display: block; font-weight: 600; color: var(--pierre-700); }

/* ---------- Contenus légaux ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose p, .prose li { color: #37403d; }

/* ---------- Pied de page ---------- */
.site-footer { position: relative; background: var(--mer-900); color: rgba(255,255,255,.75); padding: 120px 0 32px; margin-top: 0; overflow: hidden; }
.site-footer .footer-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer h2 { font-family: var(--font-texte); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--soleil); margin-bottom: 1em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--soleil); text-decoration: underline; }
.site-footer .logo { color: #fff; margin-bottom: 16px; }
.footer-motto { font-family: var(--font-titre); font-size: 1.5rem; color: #fff; font-style: italic; line-height: 1.25; max-width: 320px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.socials a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); transition: background .25s, transform .25s;
}
.socials a:hover { background: var(--soleil); color: var(--mer-900); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Animations au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--left { transform: translateX(-40px); }
.js .reveal--scale { transform: scale(.94); }

/* ---------- Divers ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.text-muted { color: var(--pierre-700); }
.notice {
  border-left: 4px solid var(--soleil); background: var(--soleil-pale); padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--soleil-texte); font-size: .95rem;
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero h1 .line > span, .hero__lead, .hero__cta, .greeting { transform: none; opacity: 1; }
  .hero h1 em svg path { stroke-dashoffset: 0; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Compléments paysage & cartes ---------- */
.landscape .ridges { width: 100%; height: clamp(120px, 20vw, 280px); }
.landscape .waves { bottom: 0; }
.page-hero .landscape .ridges { height: clamp(90px, 13vw, 180px); }
.course-card__word {
  position: absolute; top: -.12em; left: -.06em; font-family: var(--font-titre); font-style: italic; font-weight: 700;
  font-size: clamp(6rem, 16vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28);
  letter-spacing: -.04em; white-space: nowrap;
}
.course-card__art::after {
  content: ""; position: absolute; right: -60px; top: 34%; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--soleil-rvb),.55), rgba(var(--soleil-rvb),0) 70%);
}
.photo-stack .photo-slot:nth-of-type(1) { align-content: start; padding-top: 18%; }
.photo-stack .photo-slot:nth-of-type(2) { font-size: .82rem; padding: 14px; }
.photo-stack .photo-slot:nth-of-type(2)::before { width: 36px; height: 36px; }
@media (max-width: 600px) { .photo-stack { margin-bottom: 40px; } }

/* =========================================================
   MOTION DESIGN
   ========================================================= */

/* Transitions entre les pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .4s cubic-bezier(.7,0,.2,1) both; }
::view-transition-new(root) { animation: vt-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-24px) scale(.985); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0 round 40px); } to { clip-path: inset(0 0 0 0 round 0); } }
.site-header { view-transition-name: header; }

/* Rideau d'intro (accueil) */
.intro {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; pointer-events: none;
  background: var(--mer-900); clip-path: inset(0 0 0 0);
  animation: intro-out 1s 1.5s cubic-bezier(.8,0,.2,1) forwards;
}
.intro__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; }
.intro__mark { width: auto; height: clamp(130px, 22vw, 180px); filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); animation: intro-pop .8s cubic-bezier(.3,1.6,.5,1) both; }
.intro__word { font-family: var(--font-titre); font-size: clamp(1.8rem, 5vw, 2.8rem); font-style: italic; display: flex; overflow: hidden; padding-bottom: .1em; }
.intro__word span { display: inline-block; white-space: pre; transform: translateY(110%); animation: rise .7s cubic-bezier(.2,.9,.2,1) forwards; animation-delay: calc(.35s + var(--i) * 45ms); }
.intro__line { width: 180px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.intro__line::after { content: ""; display: block; height: 100%; background: linear-gradient(90deg, var(--mer-300), var(--soleil), var(--granit)); transform-origin: left; animation: intro-load 1.3s .2s cubic-bezier(.6,0,.2,1) both; }
@keyframes intro-pop { from { transform: scale(0) rotate(-30deg); } }
@keyframes intro-load { from { transform: scaleX(0); } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.no-intro .intro { display: none; }

/* Délais du hero quand l'intro est jouée */
.hero { --hd: 0s; }
html:not(.no-intro) .hero--intro { --hd: 1.75s; }
.hero .greeting { animation-delay: calc(var(--hd) + .1s); }
.hero h1 .line > span { animation-delay: calc(var(--hd) + .05s); }
.hero h1 .line:nth-child(2) > span { animation-delay: calc(var(--hd) + .2s); }
.hero h1 em svg path { animation-delay: calc(var(--hd) + 1s); }
.hero__lead { animation-delay: calc(var(--hd) + .55s); }
.hero .hero__cta { animation-delay: calc(var(--hd) + .75s); }

/* Lettres qui sautillent au survol de « un jeu d'enfant » */
.hero h1 em .char { display: inline-block; white-space: pre; }
.hero h1 em:hover .char { animation: hop .55s cubic-bezier(.3,1.8,.5,1); animation-delay: calc(var(--i) * 35ms); }
@keyframes hop { 40% { transform: translateY(-.22em) rotate(-6deg); } }

/* Bulles de dialogue flottantes */
.bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bubble-wrap { position: absolute; transition: translate .6s cubic-bezier(.2,.8,.2,1); }
.bubble {
  display: inline-block; padding: .6em 1.05em; border-radius: 20px 20px 20px 6px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-weight: 800; font-size: clamp(.85rem, 1.4vw, 1.05rem); white-space: nowrap;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
  opacity: 0; animation: bubble-in .8s cubic-bezier(.3,1.5,.5,1) forwards, float 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--hd, 0s) + 1.1s + var(--i) * .25s), calc(var(--i) * -1.3s);
}
.bubble--sun { background: var(--soleil); color: var(--mer-900); border-color: transparent; }
.bubble--granit { background: var(--granit); border-color: transparent; border-radius: 20px 20px 6px 20px; }
.bubble small { display: block; font-weight: 600; opacity: .8; font-size: .75em; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.4) translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes float { from { translate: 0 -8px; } to { translate: 0 10px; } }
@media (max-width: 899px) {
  .bubble-wrap:nth-child(n+3) { display: none; }
  .bubble-wrap:nth-child(1) { top: auto !important; bottom: 110px !important; right: 6% !important; left: auto !important; }
  .bubble-wrap:nth-child(2) { top: 13% !important; right: 5% !important; left: auto !important; }
}

/* Titres révélés mot par mot */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-w > span { display: inline-block; transform: translateY(110%) rotate(5deg); transform-origin: left bottom; transition: transform 1s cubic-bezier(.2,.9,.2,1); transition-delay: calc(var(--i) * 60ms); }
.is-split.is-visible .split-w > span, .reveal.is-visible .split-w > span { transform: none; }
.page-hero .split-w > span { transition-delay: calc(.1s + var(--i) * 70ms); }

/* Révélation d'image en volet */
.js .reveal--clip { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); transition-delay: var(--d, 0s); }
.js .reveal--clip.is-visible { clip-path: inset(0 0 0 0 round var(--radius)); }

/* Barre de progression de lecture */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; pointer-events: none;
  background: linear-gradient(90deg, var(--mer-300), var(--soleil), var(--granit));
  transform-origin: left; transform: scaleX(var(--p, 0));
}

/* Curseur personnalisé (souris uniquement) */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 3000; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
.cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #fff; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), margin .35s cubic-bezier(.2,.8,.2,1), background .35s, opacity .3s; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; transition: opacity .3s; }
.cursor.is-hover { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: #fff; }
.cursor.is-hidden, .cursor-dot.is-hidden { opacity: 0; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }

/* Inclinaison 3D */
[data-tilt] { transform-style: preserve-3d; }
.plans { perspective: 1200px; }
.js .marquee__track { animation: none; }

/* Cartes « Pourquoi SLT » : simples, côte à côte */
.stack { display: grid; gap: 24px; }
@media (min-width: 980px) { .stack { grid-template-columns: repeat(3, 1fr); } }
.stack-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(26px, 3vw, 36px); border-radius: 28px;
  color: rgba(255,255,255,.92); box-shadow: var(--shadow);
}
.stack-card--mer { background: linear-gradient(150deg, var(--mer-500), var(--mer-900) 80%); }
.stack-card--maquis { background: linear-gradient(150deg, var(--maquis-600), var(--maquis-800) 85%); }
.stack-card--granit { background: linear-gradient(150deg, var(--granit), var(--granit-profond-2) 90%); }
.stack-card h3 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: .4em; }
.stack-card p { font-size: 1.05rem; line-height: 1.6; }
.stack-card .checklist, .stack-card .chips { margin-bottom: 0; }
.stack-card .checklist li::before { background-color: var(--soleil); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308303b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.stack-card .chips li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.stack-card__kicker { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--soleil); }
.stack-card__art { order: -1; position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.stack-card__num { font-family: var(--font-titre); font-weight: 700; font-style: italic; font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.45); }
.stack-card__icon {
  width: 60px; height: 60px; margin-right: 18px; border-radius: 18px; display: grid; place-items: center;
  background: var(--soleil); color: var(--mer-900); box-shadow: 0 16px 30px -12px rgba(0,0,0,.45);
  animation: bob 5s ease-in-out infinite; rotate: -8deg;
}
.stack-card__icon svg { width: 55%; height: 55%; }
/* cercle pointillé qui tourne autour de l'icône */
.stack-card__orbit {
  position: absolute; right: -2px; top: calc(50% - 50px); width: 100px; height: 100px;
  border: 2px dashed rgba(255,255,255,.25); border-radius: 50%; animation: spin 26s linear infinite;
}
.stack-card__orbit::after { content: ""; position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--soleil); box-shadow: 0 0 16px var(--soleil); }
.stack-card:nth-child(2) .stack-card__icon { animation-delay: -1.7s; }
.stack-card:nth-child(3) .stack-card__icon { animation-delay: -3.4s; }
@keyframes bob { 50% { transform: translateY(-8px); rotate: 6deg; } }

[data-count] { font-variant-numeric: tabular-nums; }

/* Mouvement réduit : on coupe le superflu */
@media (prefers-reduced-motion: reduce) {
  .intro, .bubbles, .cursor, .cursor-dot, .scroll-progress { display: none !important; }
  .split-w > span { transform: none !important; }
  .js .reveal--clip { clip-path: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (min-width: 900px) and (max-width: 1240px) { .bubble-wrap:nth-child(2), .bubble-wrap:nth-child(4) { display: none; } }
.page-hero h1 em .split-w > span { font-style: italic; }

/* ---------- Pages merci / 404 ---------- */
.thanks { min-height: clamp(560px, 92svh, 860px); display: flex; align-items: center; }
.thanks h1 { font-size: clamp(3rem, 10vw, 6.5rem); }
.thanks__check { width: 96px; height: 96px; margin: 0 auto 24px; }
.thanks__check svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thanks__check circle { stroke: var(--soleil); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw-c 1s .2s cubic-bezier(.6,0,.2,1) forwards; }
.thanks__check path { stroke: #fff; stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw-c .6s 1s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes draw-c { to { stroke-dashoffset: 0; } }

/* Pied de page après une section sombre */
.page-contact .footer-wave path { fill: var(--mer-900); }
.page-contact .site-footer { border-top: 1px solid rgba(255,255,255,.08); padding-top: 80px; }

@media (prefers-reduced-motion: reduce) {
  .thanks__check circle, .thanks__check path { stroke-dashoffset: 0; }
}
.wave { max-width: none; }
.footer-wave { max-width: none; }

/* ---------- Formules : compléments tarifs ---------- */
.plan__time span { font-size: .95rem; }
.plan__price { margin: 0 0 22px; font-weight: 600; color: var(--pierre-700); }
.plan--premium .plan__price { color: rgba(255,255,255,.75); }
.checklist li.is-off { color: var(--pierre-400); text-decoration: line-through; text-decoration-color: rgba(95,87,75,.4); }
.checklist li.is-off::before { background: var(--pierre-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f574b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan__alt {
  display: block; text-align: center; margin-top: 12px; font-weight: 700; font-size: .95rem;
  color: var(--mer-700); text-decoration: underline; text-underline-offset: 4px;
}
.plan--premium .plan__alt { color: var(--soleil); }
.plan--premium .plan__alt:hover { color: #fff; }

.plan-lite {
  max-width: 980px; margin: 28px auto 0; padding: clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 36px);
  border-radius: 22px; background: var(--pierre-100); border: 1.5px dashed var(--pierre-400);
  display: grid; gap: 18px; align-items: center;
}
.plan-lite h3 { font-size: 1.35rem; margin-bottom: .3em; }
.plan-lite h3 span { display: block; font-family: var(--font-texte); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--granit); margin-top: .35em; }
.plan-lite p { margin: 0; color: var(--pierre-700); font-size: .97rem; }
.plan-lite__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan-lite__price { margin-right: 6px !important; line-height: 1.3; color: var(--mer-900) !important; }
.plan-lite__price strong { font-family: var(--font-titre); font-size: 1.6rem; }
.plan-lite__price span { font-size: .88rem; color: var(--pierre-700); }
@media (min-width: 820px) { .plan-lite { grid-template-columns: 1fr auto; } .plan-lite__buy { justify-content: flex-end; } }

/* ---------- Logos réseaux sociaux aux couleurs officielles ---------- */
.socials a {
  width: 46px; height: 46px; border-radius: 13px; border: 0; color: #fff;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.45);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s, filter .3s;
}
.socials a:hover { color: #fff; transform: translateY(-4px) scale(1.08) rotate(-4deg); box-shadow: 0 12px 24px -8px rgba(0,0,0,.55); filter: saturate(1.15); }
.socials svg { width: 22px; height: 22px; }
.socials a.s-fb { background: #1877F2; }
.socials a.s-tt { background: #010101; }
.socials a.s-tt svg { filter: drop-shadow(1.5px 1.5px 0 #FE2C55) drop-shadow(-1.5px -1.5px 0 #25F4EE); }
.socials a.s-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.socials a.s-yt { background: #FF0000; }
.socials a.s-li { background: #0A66C2; }
.card .socials { margin-top: 6px; }
.socials a.s-yt path { fill-rule: evenodd; }

/* ---------- Bouton « retour en haut » ---------- */
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90;
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: var(--mer-900); box-shadow: 0 12px 28px -10px rgba(var(--mer-900-rvb),.6);
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(.8);
  transition: opacity .35s, visibility .35s, transform .45s cubic-bezier(.3,1.6,.5,1), background .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--granit); }
.to-top:hover .to-top__arrow { transform: translateY(-3px); }
.to-top__arrow { width: 22px; height: 22px; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle {
  fill: none; stroke: var(--soleil); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 132; stroke-dashoffset: calc(132 * (1 - var(--p, 0)));
}
.menu-open .to-top { opacity: 0; visibility: hidden; }
@media (min-width: 900px) { .to-top { right: 28px; bottom: 28px; } }
.plan-lite__alt { margin-top: 0; flex-basis: 100%; text-align: right; }
@media (max-width: 819px) { .plan-lite__alt { text-align: left; } }
.credit { color: rgba(255,255,255,.55); }
.credit span { color: #fff; font-weight: 700; letter-spacing: .01em; }
@media (min-width: 820px) { .footer-bottom { align-items: center; } }
.footer-bottom p, .footer-bottom ul { margin: 0; }
.credit a { color: #fff; font-weight: 700; text-decoration: none; background: linear-gradient(var(--soleil), var(--soleil)) left bottom / 0 2px no-repeat; transition: background-size .3s, color .3s; }
.credit a:hover { color: var(--soleil); text-decoration: none; background-size: 100% 2px; }

/* ---------- Application Lezziò ---------- */
.app-section h2 em { font-style: italic; font-weight: 500; color: var(--soleil); }
.app-section h2 em .split-w > span { font-style: italic; }
.app-price { margin: 1.2em 0 1em; color: rgba(255,255,255,.8); }
.app-price strong { font-family: var(--font-titre); font-size: 1.8rem; color: var(--soleil); margin-right: .15em; }
.store-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badge { display: inline-block; border-radius: 10px; transition: transform .25s, box-shadow .25s; }
.store-badge img { display: block; height: 50px; width: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.store-badge:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; }
.app-photo { display: block; width: 100%; max-width: 440px; margin-inline: auto; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 45%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }


/* ---------- Combi SLT dans le haut de l'accueil ---------- */
.hero__combi { display: none; }
@media (min-width: 1000px) {
  .hero__combi {
    display: block; position: absolute; z-index: 1; right: max(4vw, calc((100vw - var(--container)) / 2));
    top: 50%; width: clamp(300px, 30vw, 430px); translate: 0 -55%; pointer-events: none;
  }
  .hero__combi img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .hero__combi img { animation: combi-roule 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes combi-roule { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.2deg); } }

/* ---------- Page ebooks ---------- */
.ebooks { display: grid; gap: 28px; max-width: 1080px; margin-inline: auto; }
@media (min-width: 900px) { .ebooks { grid-template-columns: 1fr 1fr; } }
.ebook {
  display: grid; gap: 22px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius);
  background: #fff; border: 1px solid var(--pierre-200); box-shadow: var(--shadow);
}
.ebook__cover {
  display: grid; place-items: center; padding: 22px 0; border-radius: 16px;
  background: radial-gradient(circle at 50% 60%, var(--mer-100), var(--pierre-100) 70%);
}
.ebook#anglais .ebook__cover { background: radial-gradient(circle at 50% 60%, #e3e8f6, var(--pierre-100) 70%); }
.ebook__cover img { width: auto; height: 260px; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.ebook:hover .ebook__cover img { transform: rotate(-4deg) translateY(-6px); }
.ebook__lang { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--granit); }
.ebook h3 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin-bottom: .7em; }
.ebook__body { display: flex; flex-direction: column; }
.ebook .checklist { flex: 1; font-size: .98rem; }
.ebook__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px dashed var(--pierre-200); }
.ebook__price { margin: 0; line-height: 1.15; }
.ebook__price strong { display: block; font-family: var(--font-titre); font-size: 2rem; color: var(--mer-900); }
.ebook__price span { font-size: .88rem; color: var(--pierre-700); }

.ebook-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 14px; }
.ebook-steps li {
  counter-increment: s; position: relative; padding: 18px 20px 18px 74px; border-radius: 18px;
  background: #fff; box-shadow: var(--shadow); font-size: 1.05rem;
}
.ebook-steps li::before {
  content: counter(s); position: absolute; left: 18px; top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-titre); font-weight: 700; font-size: 1.2rem; color: #fff; background: var(--mer-500);
}
.ebook-steps li:nth-child(2)::before { background: var(--maquis-600); }
.ebook-steps li:nth-child(3)::before { background: var(--granit); }
.ebook-steps strong { color: var(--mer-900); }

/* ---------- Page Parlu corsu ---------- */
.parcours { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; gap: 20px; }
@media (min-width: 860px) { .parcours { grid-template-columns: repeat(3, 1fr); } }
.parcours__step {
  position: relative; padding: 30px 26px 26px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--pierre-200); box-shadow: var(--shadow);
}
.parcours__n {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px;
  font-family: var(--font-titre); font-weight: 700; font-size: 1.5rem; color: #fff; background: var(--mer-500);
}
.parcours__step:nth-child(2) .parcours__n { background: var(--maquis-600); }
.parcours__step:nth-child(3) .parcours__n { background: var(--granit); }
.parcours__step h3 { font-size: 1.5rem; margin-bottom: .4em; }
.parcours__step h3 small { display: block; margin-top: .3em; font-family: var(--font-texte); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pierre-700); }
.parcours__step p { margin: 0; color: var(--pierre-700); }
.parcours__tip {
  max-width: 760px; margin: 28px auto 0; padding: 18px 22px; border-radius: 16px; text-align: center;
  background: var(--mer-100); color: var(--mer-900);
}

.apps { display: grid; gap: 20px; }
@media (min-width: 800px) { .apps { grid-template-columns: 1fr 1fr; } }
.app-card { padding: 28px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.app-card h3 { font-size: 1.7rem; margin-bottom: .3em; }
.app-card p { margin: 0 0 18px; }
.app-card .app-card__tag { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--soleil); }
.app-card__links { display: flex; flex-wrap: wrap; gap: 10px; }
.app-card__links a {
  padding: .5em 1.1em; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5);
  color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .25s, border-color .25s;
}
.app-card__links a:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.res-cols { display: grid; gap: 22px; max-width: 1080px; margin-inline: auto; }
@media (min-width: 860px) { .res-cols { grid-template-columns: 1fr 1fr; } }
.res { padding: 28px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.res h3 { font-size: 1.6rem; margin-bottom: .6em; }
.res h3 small { margin-left: .4em; font-family: var(--font-texte); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--granit); }
.res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.res li { padding-top: 14px; border-top: 1px dashed var(--pierre-200); line-height: 1.7; }
.res li:first-child { padding-top: 0; border-top: 0; }
.res__kind { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mer-500); }
.res a { font-weight: 600; }
/* Emplacement rempli par une vraie photo : plus de pointillés ni d'icône */
.photo-slot--filled { border: 0; padding: 0; background: var(--pierre-200); box-shadow: var(--shadow); }
.photo-slot--filled::before { display: none; }

/* ---------- Accueil : démarrer seul (Lezziò + ebooks) ---------- */
.solo { margin-top: clamp(36px, 5vw, 56px); }
.solo__title { margin: 0 0 16px; font-family: var(--font-titre); font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; color: var(--mer-900); }
.solo__grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .solo__grid { grid-template-columns: 1fr 1fr; } }
.solo-card {
  display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 20px;
  background: #fff; border: 1px solid var(--pierre-200); color: inherit; text-decoration: none;
  transition: transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s, border-color .3s;
}
.solo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--mer-300); color: inherit; }
.solo-card__img { flex: none; width: 92px; height: 112px; border-radius: 14px; object-fit: cover; background: var(--pierre-100); }
.solo-card__img--contain { object-fit: contain; padding: 6px 0; mix-blend-mode: multiply; }
.solo-card__body { display: flex; flex-direction: column; gap: 3px; font-size: .95rem; line-height: 1.45; color: var(--pierre-700); }
.solo-card__body strong { font-family: var(--font-titre); font-size: 1.25rem; color: var(--mer-900); }
.solo-card__kicker { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--granit); }

/* ---------- Héros sur fond blanc + en-tête jaune ---------- */
.hero, .page-hero, .page-hero--maquis {
  background: radial-gradient(55% 50% at 88% 12%, rgba(var(--soleil-rvb),.28), transparent 60%), #fff;
  color: var(--encre);
}
.hero h1, .page-hero h1 { color: var(--encre); }
.hero h1 em, .page-hero h1 em { color: var(--granit); }
.hero h1 em svg path { stroke: var(--soleil); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--granit); }
.hero__lead, .page-hero p { color: var(--pierre-700); }
.hero .btn--ghost-light, .page-hero .btn--ghost-light { --fg: var(--encre); border-color: currentColor; }
.hero .btn--ghost-light:hover, .page-hero .btn--ghost-light:hover { background: var(--pierre-100); border-color: var(--encre); }
.greeting { background: var(--pierre-50); border-color: var(--pierre-200); color: var(--encre); }
.bubble { background: #fff; border-color: var(--pierre-200); color: var(--encre); box-shadow: var(--shadow); }
.bubble--granit { background: var(--granit); color: #fff; }
.fact { background: var(--pierre-50); border-color: var(--pierre-200); }
.fact strong { color: var(--granit); }
.fact span { color: var(--pierre-700); }
.scroll-cue { border-color: var(--pierre-400); }
.scroll-cue::after { background: var(--pierre-700); }
.thanks__check path { stroke: var(--granit); }

/* En-tête : toujours jaune, texte foncé */
.site-header, .site-header.is-scrolled, .site-header--solid, .menu-open .site-header { color: var(--mer-900); }
.site-header::before, .menu-open .site-header::before { opacity: 1; background: var(--soleil); box-shadow: 0 1px 0 rgba(var(--mer-900-rvb),.12); }
.site-header:not(.is-scrolled):not(.site-header--solid) .btn--ghost { --fg: var(--mer-900); }
.site-header:not(.is-scrolled):not(.site-header--solid) .btn--ghost:hover { background: rgba(255,255,255,.3); border-color: var(--mer-900); }
.nav__links a:hover, .nav__links a[aria-current="page"] { background: rgba(255,255,255,.35); }
@media (max-width: 960px) {
  .nav { background: var(--soleil); color: var(--mer-900); }
  .nav__links a:hover, .nav__links a[aria-current="page"] { background: none; color: var(--granit); }
  .nav .btn--ghost { --fg: var(--mer-900); }
  .menu-open .menu-toggle span::before, .menu-open .menu-toggle span::after { background: var(--mer-900); }
}

/* Accueil : plus de paysage animé sous le haut de page */
.hero { padding-bottom: 110px; min-height: clamp(560px, 92svh, 900px); }
/* Plus de paysage animé sous les hauts de page */
.page-hero { padding-bottom: 80px; }
.page-hero--short { padding-bottom: 60px; }

/* Écran d'accueil animé : fond blanc */
.intro { background: #fff; }
.intro__inner { color: var(--encre); }
.intro__mark { filter: drop-shadow(0 12px 24px rgba(var(--mer-900-rvb),.18)); }
.intro__line { background: var(--pierre-200); }

/* ===== « Tout pour apprendre sans contrainte » : cartes en tableau à craie ===== */
.section--chalk .stack-card {
  --craie: #eef1ec;
  --craie-doux: rgba(238, 241, 236, .8);
  --craie-jaune: #f7e08a;
  --craie-bleu: #a9d8e8;
  --craie-rose: #f4b6c2;
  background:
    radial-gradient(45% 30% at 20% 15%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(40% 25% at 80% 80%, rgba(255,255,255,.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #1d2320 !important;
  color: var(--craie-doux);
  border: 10px solid #6b4528;           /* cadre en bois */
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #4e301a, inset 0 0 40px rgba(0,0,0,.55), var(--shadow);
}
.section--chalk .stack-card h3 {
  font-family: "Caveat", "Segoe Print", cursive; font-weight: 700; color: var(--craie);
  font-size: clamp(2rem, 3vw, 2.5rem);
  text-shadow: 0 0 1px rgba(255,255,255,.6), 0 0 6px rgba(255,255,255,.18);
}
.section--chalk .stack-card p { color: var(--craie-doux); }
.section--chalk .stack-card:nth-child(1) .stack-card__kicker { color: var(--craie-jaune); }
.section--chalk .stack-card:nth-child(2) .stack-card__kicker { color: var(--craie-rose); }
.section--chalk .stack-card:nth-child(3) .stack-card__kicker { color: var(--craie-bleu); }
.section--chalk .stack-card__num {
  font-family: "Caveat", cursive; font-style: normal; font-size: 4rem;
  color: transparent; -webkit-text-stroke: 1.5px rgba(238,241,236,.6);
}
.section--chalk .stack-card__orbit, .section--chalk .stack-card__orbit::after { display: none; }
.section--chalk .stack-card__icon { background: transparent; border: 2px dashed rgba(238,241,236,.5); color: var(--craie); box-shadow: none; }
.section--chalk .stack-card .checklist li::before {
  content: "✓"; background: none !important; width: auto; height: auto; top: -.15em;
  font-family: "Caveat", cursive; font-size: 1.6rem; font-weight: 700; color: var(--craie-jaune); border: 0;
}
.section--chalk .stack-card .chips li {
  background: transparent; color: var(--craie); font-family: "Caveat", cursive; font-size: 1.3rem; font-weight: 700;
  border: 1.5px solid rgba(238,241,236,.5); border-radius: 50% 40% 55% 45% / 45% 55% 40% 50%; padding: .1em .8em;
}

/* Accueil, cartes « Quelle langue… » : Corsu en noir, English en #01023a */
.course-card--corse { background: linear-gradient(160deg, #1f1f1f, #000 75%); }
.course-card--anglais { background: #01023a; }

/* Page corse : « 3 mois au total », à son rythme */
.trois-mois {
  margin-top: 2.4em; max-width: 820px; padding: 20px 22px;
  background: var(--pierre-50); border: 1px solid var(--pierre-200); border-radius: var(--radius-sm);
}
.page-hero .trois-mois__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .8em; margin: 0 0 14px; max-width: none; }
.trois-mois__head strong { font-family: var(--font-titre); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.1; color: var(--encre); }
.page-hero .trois-mois__head span { font-size: 1rem; color: var(--pierre-700); }
.trois-mois__bar { display: flex; gap: 6px; }
.tm-seg { padding: 12px 14px; border-radius: 10px; display: grid; gap: 2px; }
.tm-seg b { font-size: .95rem; color: var(--encre); }
.tm-seg span { font-size: .88rem; line-height: 1.4; color: var(--pierre-700); }
.tm-seg--video { flex: 1; background: rgba(var(--soleil-rvb),.28); }
.tm-seg--suivi { flex: 2; background: rgba(var(--granit-rvb),.18); }
.trois-mois__notes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; font-size: .92rem; color: var(--pierre-700); }
.trois-mois__notes li::before { content: "✓"; margin-right: .45em; font-weight: 800; color: var(--granit); }
@media (max-width: 600px) { .trois-mois__bar { flex-direction: column; } }

/* Programme corse : la 1re partie en colonnes, comme la 2e */
.steps--video .step:nth-child(4) { border-color: var(--maquis-600); }
.step--bonus { background: var(--pierre-50); border-color: var(--soleil) !important; }
.steps--video .step ul { margin-top: .5em; }
.steps--video .step p + p { margin-top: .6em; }
/* la carte bonus remplit la fin de sa ligne (2 colonnes après 4 modules, toute la ligne après 3 ou 6) */
@media (min-width: 800px) {
  .steps--video .step--bonus:nth-child(3n+2):last-child { grid-column: span 2; }
  .steps--video .step--bonus:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}

/* ---------- Couleurs choisies dans l'admin pour une section ou un élément de la page Corse ----------
   zone-perso = fond d'une section, el-perso = une carte (module, étape, formule…), le bandeau final.
   Le fond et les variables viennent du filtre styleCouleur : --texte-auto (blanc ou foncé, le plus lisible)
   et --accent-auto (jaune sur fond foncé, bleu foncé sur fond clair). Les cartes posées dans une section
   colorée gardent leurs propres couleurs. */
.zone-perso :is(h1, h2, h3, p:not(.eyebrow):not(.greeting), li, span, strong, small, a:not(.btn)):not(:is(.step, .plan, .plan-lite, .faq, .video, .trois-mois, .facts, .ebook, .ebook-steps, .stack-card, .course-card, .solo-card, .bubbles, .photo-badge, .greeting, .form-card, .contact-line, .card, .store-btns, .btn, .cta-band, em) *) { color: var(--texte-auto) !important; }
.zone-perso :is(h1 em, h2 em, .eyebrow, .tl-part__label):not(:is(.step, .plan, .plan-lite, .faq, .cta-band, .ebook, .ebook-steps, .stack-card, .course-card, .solo-card) *) { color: var(--accent-auto) !important; }
.zone-perso :is(.btn--ghost, .btn--ghost-light):not(:is(.plan, .plan-lite, .ebook, .stack-card, .cta-band) *) { --fg: var(--texte-auto); color: var(--texte-auto) !important; border-color: currentColor !important; }
.zone-perso .checklist:not(:is(.plan, .plan-lite, .ebook, .stack-card) *) li::before { background-color: var(--accent-auto); }
.el-perso { border-color: transparent !important; color: var(--texte-auto) !important; }
.el-perso :is(h2, h3, h4, p, li, span, strong, small, b, summary, label, .plan__name, .plan__alt, a:not(.btn)):not(.plan__badge):not(.btn *):not(em *) { color: var(--texte-auto) !important; }
.el-perso em { color: var(--accent-auto) !important; }
.el-perso .checklist li::before { background-color: var(--accent-auto); }
.el-perso .checklist li.is-off { opacity: .6; }
.el-perso .btn--ghost, .el-perso .btn--ghost-light { color: var(--texte-auto) !important; border-color: currentColor !important; background: transparent !important; }
/* « Plus de couleurs » (une classe par réglage rempli, la couleur dans une variable) : passent avant le réglage automatique */
.zone-titres:not(#z) :is(h1, h2, h3):not(:is(.step, .plan, .plan-lite, .faq, .video, .trois-mois, .facts, .ebook, .ebook-steps, .stack-card, .course-card, .solo-card, .bubbles, .photo-badge, .greeting, .form-card, .contact-line, .card, .cta-band) *) { color: var(--z-titres) !important; }
.zone-texte:not(#z) :is(p, li, small, strong, .lead, a:not(.btn)):not(.eyebrow):not(.greeting):not(.tl-part__label):not(:is(.step, .plan, .plan-lite, .faq, .video, .trois-mois, .facts, .ebook, .ebook-steps, .stack-card, .course-card, .solo-card, .bubbles, .photo-badge, .greeting, .form-card, .contact-line, .card, .store-btns, .btn, .cta-band, h1, h2, h3) *) { color: var(--z-texte) !important; }
.zone-accent:not(#z) :is(h1 em, h2 em, .eyebrow, .tl-part__label):not(:is(.step, .plan, .plan-lite, .faq, .cta-band, .ebook, .ebook-steps, .stack-card, .course-card, .solo-card) *) { color: var(--z-accent) !important; }
.zone-accent:not(#z) .checklist:not(:is(.plan, .plan-lite, .ebook, .stack-card) *) li::before { background-color: var(--z-accent) !important; }
.zone-btn:not(#z) .btn:not(.btn--ghost):not(.btn--ghost-light):not(:is(.plan, .plan-lite, .ebook, .stack-card, .cta-band) *) { --bg: var(--z-btn); background: var(--z-btn) !important; }
.zone-btn:not(#z) :is(.btn--ghost, .btn--ghost-light):not(:is(.plan, .plan-lite, .ebook, .stack-card, .cta-band) *) { --fg: var(--z-btn); color: var(--z-btn) !important; border-color: currentColor !important; }
.zone-btn-texte:not(#z) .btn:not(.btn--ghost):not(.btn--ghost-light):not(:is(.plan, .plan-lite, .ebook, .stack-card, .cta-band) *) { --fg: var(--z-btn-texte); color: var(--z-btn-texte) !important; }
.el-texte, .el-texte :is(h2, h3, h4, p, li, span, strong, small, b, summary, label, .plan__name, .plan__alt, a:not(.btn)):not(.plan__badge):not(.btn *):not(em *) { color: var(--e-texte) !important; }
.el-trait { border-top-color: var(--e-trait) !important; }
.el-coches .checklist li:not(.is-off)::before { background-color: var(--e-coches) !important; }
/* Tableau à craie de l'accueil, carte colorée dans l'admin : la couleur choisie remplace l'ardoise */
.section--chalk .stack-card.el-perso { background: var(--fond-perso) !important; border-color: #6b4528 !important; }
.section--chalk .stack-card.el-perso .stack-card__num { -webkit-text-stroke-color: currentColor; }
.section--chalk .stack-card.el-perso .stack-card__icon { border-color: currentColor; color: var(--texte-auto); }
.section--chalk .stack-card.el-perso .checklist li::before { color: var(--accent-auto); }
.section--chalk .stack-card.el-coches .checklist li::before { color: var(--e-coches) !important; }
/* Formulaire coloré dans l'admin : les champs restent blancs, texte foncé, pour bien voir ce qu'on tape */
.form-card.el-perso { border-color: transparent; }
.form-card.el-perso .field :is(input, select, textarea) { background: #fff !important; color: var(--encre) !important; border-color: rgba(0,0,0,.15) !important; }
.form-card.el-perso .field label .opt { color: var(--texte-auto) !important; opacity: .7; }
.contact-line.el-perso .card__icon { background: rgba(255,255,255,.18); color: var(--texte-auto); }