/* Hikaad Formation : mêmes principes que le site eBusiness (bandes pleine largeur, titres Montserrat 900 « claqués », pastilles, cartes),
   mais la palette vient du logo de la formation : trois bleus (#3E6CA5, #6285C3, #889FE1) et un marine qui remplace le noir.
   Le rouge eBusiness n'apparaît nulle part : c'est lui qui distingue les deux sites au premier coup d'œil.
   Contrastes vérifiés : #3E6CA5 sur #FDFDFD = 5,4:1 ; #889FE1 sur #0E1A33 = 6,7:1 ; #FDFDFD sur #3E6CA5 = 5,4:1.
   #889FE1 est trop clair pour du texte sur fond clair (2,6:1) : sur fond clair, l'accent est donc #3E6CA5. */
:root {
  --navy: #0E1A33; --navy-2: #16264A; --blue: #3E6CA5; --mid: #6285C3; --sky: #889FE1; --mist: #EEF2FC; --white: #FDFDFD;
  --ink: #0E1A33; --ink-soft: rgba(14, 26, 51, .68); --paper-soft: rgba(253, 253, 253, .72);
  --line: rgba(14, 26, 51, .1);
  --head: 'Montserrat', system-ui, sans-serif; --body: 'Nunito', system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 72px); --max: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 700 clamp(17px, 1.25vw, 20px)/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .blue :focus-visible, .top :focus-visible { outline-color: var(--sky); }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ── Bandes : marine, blanc cassé à trame de points bleus, bleu ─────────────────────────────── */
.band { position: relative; padding: clamp(72px, 10vw, 140px) 0; }
.band.dark { background: var(--navy); color: var(--white); }
.band.light { background-color: var(--white); background-image: radial-gradient(rgba(62, 108, 165, .16) 1.5px, transparent 1.6px); background-size: 48px 48px; background-position: 24px 24px; }
.band.mist { background: var(--mist); }
.band.blue { background: var(--blue); color: var(--white); }

/* Titres : Montserrat 900, point final bleu (bleu ciel sur fond sombre, marine sur fond bleu) */
.slam { font: 900 clamp(40px, 7.4vw, 112px)/.96 var(--head); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.slam.md { font-size: clamp(34px, 5vw, 72px); }
.dot { color: var(--blue); }
.dark .dot { color: var(--sky); }
.blue .dot { color: var(--navy); }
.lead { max-width: 46ch; margin: 24px 0 0; font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-soft); }
.dark .lead { color: var(--paper-soft); }
.blue .lead { color: rgba(253, 253, 253, .92); }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }

/* Pastille de rubrique */
.chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px 12px 18px; margin-bottom: 28px; border-radius: 999px; background: var(--navy); color: var(--white);
  font: 900 clamp(12px, 1vw, 14px)/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); }
.dark .chip { background: var(--blue); }
.dark .chip::before { background: var(--white); }
.blue .chip { background: var(--navy); }
.chip.nom { padding-left: 24px; letter-spacing: .04em; text-transform: none; }
.chip.nom::before { content: none; }

/* Boutons : le bleu appelle à l'action (bleu ciel sur fond sombre) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 36px; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); text-decoration: none; cursor: pointer;
  font: 900 clamp(16px, 1.3vw, 20px)/1 var(--head); box-shadow: 0 18px 50px rgba(62, 108, 165, .35); transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 10px rgba(62, 108, 165, .16), 0 22px 60px rgba(62, 108, 165, .45); }
.dark .btn:not(.ghost), .top .btn { background: var(--sky); color: var(--navy); box-shadow: 0 18px 50px rgba(136, 159, 225, .28); }
.dark .btn:not(.ghost):hover, .top .btn:hover { box-shadow: 0 0 0 10px rgba(136, 159, 225, .18), 0 22px 60px rgba(136, 159, 225, .38); }
.btn.sm { padding: 14px 24px; font-size: 15px; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(253, 253, 253, .5); }
.btn.ghost:hover { background: var(--white); color: var(--navy); box-shadow: 0 0 0 8px rgba(253, 253, 253, .14); }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.line:hover { background: var(--navy); color: var(--white); box-shadow: 0 0 0 8px rgba(14, 26, 51, .1); }
.btn.navy { background: var(--navy); color: var(--white); box-shadow: 0 18px 50px rgba(14, 26, 51, .35); }
.btn.white { background: var(--white); color: var(--navy); box-shadow: 0 18px 50px rgba(14, 26, 51, .25); }
.btn .arr { font-size: 1.15em; line-height: 1; }
.ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* ── Barre du haut ─────────────────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: rgba(14, 26, 51, .94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(253, 253, 253, .07); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
/* Le logo a un fond blanc : il est toujours posé sur une carte blanche, jamais recoloré ni détouré. */
.logo-card { display: inline-flex; flex: none; padding: 8px 16px; border-radius: 12px; background: #fff; }
.logo-card img { height: 30px; width: auto; }

.menu { display: flex; align-items: center; gap: clamp(2px, .8vw, 12px); margin: 0 auto 0 clamp(14px, 3vw, 44px); }
.menu .dd { position: relative; }
.menu .mi { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--white); white-space: nowrap;
  font: 800 15px/1 var(--body); text-decoration: none; cursor: pointer; transition: background .2s; }
.menu .mi:hover, .menu .dd.open > .mi, .menu .dd:focus-within > .mi, .menu .mi[aria-current], .menu .mi[data-current] { background: rgba(253, 253, 253, .12); }
.menu .mi .chev { width: 11px; height: 11px; fill: none; stroke: var(--sky); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.menu .dd.open > .mi .chev, .menu .dd:focus-within > .mi .chev { transform: rotate(180deg); }
.menu .pic { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.menu .panel { position: absolute; left: 0; top: 100%; padding-top: 14px; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
.menu .panel-in { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(620px, 92vw); padding: 14px; border-radius: 20px; background: var(--navy-2);
  box-shadow: 0 0 0 1px rgba(253, 253, 253, .14), 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(136, 159, 225, .16); }
.menu .panel-in .label { grid-column: 1 / -1; padding: 10px 14px 8px; color: rgba(253, 253, 253, .55); font: 900 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.menu .panel a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--white); text-decoration: none; font: 800 15px/1.2 var(--body); transition: background .15s; }
.menu .panel a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.menu .panel a.cur::before { border-radius: 2px; background: var(--white); }
.menu .panel a:hover, .menu .panel a:focus-visible { background: rgba(253, 253, 253, .12); }
.menu .dd.open .panel, .menu .dd:focus-within .panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) { .menu .dd:hover .panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .menu .dd:hover > .mi { background: rgba(253, 253, 253, .12); } .menu .dd:hover > .mi .chev { transform: rotate(180deg); } }
.top .btn.sm { white-space: nowrap; }

/* ── Héros : bulles qui reprennent les traits arrondis et superposés du logo ──────────────── */
.hero { overflow: hidden; padding-block: clamp(64px, 9vw, 128px); }
.hero .wrap { position: relative; z-index: 1; }
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blobs i { position: absolute; border-radius: 999px; opacity: .5; mix-blend-mode: screen; }
.blobs i:nth-child(1) { width: 46vw; height: 9vw; right: -8vw; top: 12%; background: var(--blue); transform: rotate(-24deg); }
.blobs i:nth-child(2) { width: 30vw; height: 9vw; right: 6vw; top: 34%; background: var(--mid); transform: rotate(62deg); opacity: .35; }
.blobs i:nth-child(3) { width: 18vw; height: 18vw; right: 20vw; bottom: -6vw; background: var(--sky); opacity: .18; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.facts li { padding: 10px 18px; border: 2px solid rgba(253, 253, 253, .22); border-radius: 999px; font: 800 15px/1 var(--body); color: var(--white); }
.facts li::before { content: "✓"; margin-right: 10px; color: var(--sky); font-weight: 900; }
.hero.page { padding-block: clamp(56px, 8vw, 110px); }
/* Sur les pages intérieures, le titre est plus court : les bulles, à pleine intensité, prendraient le dessus. */
.hero.page .blobs i:nth-child(1) { opacity: .3; }
.hero.page .blobs i:nth-child(2) { opacity: .2; }
.hero.page .blobs i:nth-child(3) { opacity: .1; }

/* Illustration du parcours d'un module (HTML pur : ce n'est pas une capture d'écran) */
.course { position: relative; padding: clamp(20px, 2.4vw, 30px); border-radius: clamp(20px, 2.4vw, 30px); background: var(--white); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(253, 253, 253, .14), 0 0 90px rgba(136, 159, 225, .25), 0 40px 120px rgba(0, 0, 0, .45); }
.course .c-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.course .c-head small { display: block; color: var(--ink-soft); font: 900 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.course .c-head b { display: block; margin-top: 6px; font: 900 clamp(20px, 1.8vw, 26px)/1.1 var(--head); letter-spacing: -.01em; }
.course .c-pct { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font: 900 16px/1 var(--head); color: var(--blue);
  background: radial-gradient(closest-side, var(--white) 76%, transparent 78% 100%), conic-gradient(var(--blue) 60%, var(--mist) 0); }
.course ol { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.course li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--mist); font: 800 15px/1.25 var(--body); }
.course li .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--blue); }
.course li .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.course li em { font-style: normal; font: 900 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.course li.ok em { background: var(--blue); color: var(--white); }
.course li.now { background: var(--navy); color: var(--white); }
.course li.now .ic { background: var(--sky); color: var(--navy); }
.course li.now em { background: var(--sky); color: var(--navy); }
.course li.next em { background: #fff; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.course .c-note { margin: 14px 0 0; color: var(--ink-soft); font: 700 13px/1.4 var(--body); text-align: center; }

/* ── Étapes ────────────────────────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(40px, 5vw, 72px); padding: 0; list-style: none; counter-reset: st; }
.steps li { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 16px 44px rgba(14, 26, 51, .06); counter-increment: st; }
.steps li::before { content: counter(st, decimal-leading-zero); font: 900 clamp(40px, 4vw, 60px)/.9 var(--head); color: var(--blue); letter-spacing: -.04em; }
.steps li:nth-child(n+4) { background: var(--navy); color: var(--white); box-shadow: 0 24px 60px rgba(14, 26, 51, .25); }
.steps li:nth-child(n+4)::before { color: var(--sky); }
.steps h3 { margin: 16px 0 8px; font: 900 clamp(19px, 1.6vw, 23px)/1.1 var(--head); letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.steps li:nth-child(n+4) p { color: var(--paper-soft); }
.steps .who { margin-top: auto; padding-top: 16px; font: 900 12px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.steps li:nth-child(n+4) .who { color: var(--sky); }

/* Trois raisons / cartes simples */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.card { padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 16px 44px rgba(14, 26, 51, .06); }
.card .n { display: block; font: 900 clamp(28px, 3vw, 40px)/1 var(--head); color: var(--blue); letter-spacing: -.03em; }
.card h3 { margin: 12px 0 8px; font: 900 clamp(20px, 1.8vw, 26px)/1.12 var(--head); letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
.dark .card { background: var(--navy-2); box-shadow: 0 0 0 1px rgba(253, 253, 253, .1); }
.dark .card .n { color: var(--sky); }
.dark .card p { color: var(--paper-soft); }
.blue .card { color: var(--ink); box-shadow: 0 24px 60px rgba(14, 26, 51, .22); }

/* Ce qui est inclus : quatre services + l'année d'accès */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.perk { display: flex; flex-direction: column; padding: clamp(22px, 2.2vw, 30px); border-radius: 22px; background: var(--navy-2); box-shadow: 0 0 0 1px rgba(253, 253, 253, .1); }
.perk .ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--sky); color: var(--navy); }
.perk .ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.perk h3 { margin: 20px 0 8px; font: 900 clamp(19px, 1.6vw, 23px)/1.15 var(--head); }
.perk p { margin: 0; color: var(--paper-soft); font-size: 16px; line-height: 1.5; }
.year { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(18px, 3vw, 44px); margin-top: clamp(20px, 2vw, 28px); padding: clamp(22px, 3vw, 40px); border-radius: 26px; background: var(--blue); }
.year b { font: 900 clamp(56px, 8vw, 120px)/.85 var(--head); letter-spacing: -.05em; }
.year b span { display: block; font-size: .3em; letter-spacing: .02em; }
.year p { margin: 0; max-width: 48ch; font-size: clamp(17px, 1.5vw, 22px); color: rgba(253, 253, 253, .92); }

/* Samedi : deux créneaux */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.saturday { display: grid; gap: 14px; }
.slot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(20px, 2.4vw, 30px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(14, 26, 51, .08); }
.slot .t { font: 900 clamp(30px, 3.4vw, 48px)/1 var(--head); letter-spacing: -.03em; color: var(--blue); white-space: nowrap; }
.slot .t span { color: var(--ink-soft); font-size: .5em; letter-spacing: 0; }
.slot b { display: block; font: 900 clamp(18px, 1.5vw, 22px)/1.2 var(--head); }
.slot small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 15px; line-height: 1.4; }
.slot.cal { grid-template-columns: 1fr; background: var(--navy); color: var(--white); box-shadow: 0 24px 60px rgba(14, 26, 51, .25); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week span { display: grid; place-items: center; height: 44px; border-radius: 12px; background: rgba(253, 253, 253, .08); font: 900 13px/1 var(--body); letter-spacing: .08em; color: var(--paper-soft); }
.week span.on { background: var(--sky); color: var(--navy); }

/* ── Catalogue ─────────────────────────────────────────────────────────────────────────────── */
.mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 56px); }
.mod { position: relative; display: flex; flex-direction: column; padding: clamp(18px, 1.8vw, 24px); border-radius: 20px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 0 0 1px var(--line), 0 12px 34px rgba(14, 26, 51, .06); transition: transform .2s, box-shadow .2s; scroll-margin-top: 110px; }
a.mod:hover, .mod:target { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--blue), 0 22px 50px rgba(14, 26, 51, .14); }
.mod .fam { align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: var(--mist); color: var(--blue); font: 900 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.mod h3 { margin: 14px 0 6px; font: 900 clamp(18px, 1.5vw, 22px)/1.15 var(--head); letter-spacing: -.01em; }
.mod p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.mod ul { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.mod li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.mod li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.mod .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; }
.mod .price-tag { font: 900 20px/1 var(--head); color: var(--blue); }
.mod .go { color: var(--blue); font: 900 14px/1 var(--body); letter-spacing: .03em; text-decoration: none; }
.mod .go:hover { text-decoration: underline; text-underline-offset: 4px; }
.mods.compact .mod { padding: 18px 20px; }
.mods.compact .mod h3 { margin-bottom: 0; }

.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(32px, 4vw, 56px); }
.path { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); border-radius: clamp(20px, 2.4vw, 30px); background: var(--navy); color: var(--white); box-shadow: 0 30px 80px rgba(14, 26, 51, .25); scroll-margin-top: 110px; }
.path:nth-child(2) { background: var(--blue); }
.path .tag { align-self: flex-start; margin-bottom: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(253, 253, 253, .14); font: 900 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.path h3 { margin: 0; font: 900 clamp(26px, 2.6vw, 38px)/1.02 var(--head); letter-spacing: -.025em; text-wrap: balance; }
.path p { margin: 14px 0 0; color: var(--paper-soft); font-size: 17px; }
.path:nth-child(2) p { color: rgba(253, 253, 253, .9); }
.path ol { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: p; }
.path li { counter-increment: p; display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: rgba(253, 253, 253, .08); font: 800 16px/1.3 var(--body); }
.path li::before { content: counter(p, decimal-leading-zero); flex: none; color: var(--sky); font: 900 14px/1 var(--head); }
.path:nth-child(2) li::before { color: var(--navy); }
.path .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 26px; }
.path .big { font: 900 clamp(32px, 3.2vw, 46px)/1 var(--head); letter-spacing: -.03em; }
.path .btn { padding: 15px 22px; font-size: 15px; }
.path:nth-child(2) .btn { background: var(--navy); color: var(--white); }
.path:not(:nth-child(2)) .btn { background: var(--sky); color: var(--navy); box-shadow: none; }

/* Choisir : module ou cursus */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(32px, 4vw, 56px); }
.choice article { padding: clamp(24px, 3vw, 44px); border-radius: clamp(20px, 2.4vw, 30px); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(14, 26, 51, .08); }
.choice article:last-child { background: var(--navy); color: var(--white); box-shadow: 0 30px 80px rgba(14, 26, 51, .25); }
.choice small { font: 900 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.choice article:last-child small { color: var(--sky); }
.choice h3 { margin: 12px 0 0; font: 900 clamp(30px, 3.4vw, 48px)/1 var(--head); letter-spacing: -.03em; }
.choice p { margin: 14px 0 0; color: var(--ink-soft); }
.choice article:last-child p { color: var(--paper-soft); }
.choice .big { margin-top: 20px; font: 900 clamp(40px, 4.4vw, 64px)/1 var(--head); letter-spacing: -.03em; color: var(--blue); }
.choice article:last-child .big { color: var(--sky); }

/* ── Tarifs ────────────────────────────────────────────────────────────────────────────────── */
.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(32px, 4vw, 56px); }
.prices.two { grid-template-columns: repeat(2, 1fr); }
.price { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 40px rgba(14, 26, 51, .07); }
.price.hot { background: var(--navy); color: var(--white); box-shadow: 0 24px 70px rgba(14, 26, 51, .3); }
.price small { font: 900 12px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.price.hot small { color: var(--paper-soft); }
.price .big { margin: 14px 0 6px; font: 900 clamp(40px, 4.4vw, 64px)/1 var(--head); letter-spacing: -.03em; color: var(--blue); }
.price.hot .big { color: var(--sky); }
.price .big span { font-size: .36em; letter-spacing: 0; color: inherit; opacity: .75; }
.price p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.price.hot p { color: var(--paper-soft); }
.price .unit { display: inline-block; align-self: flex-start; margin-top: 14px; padding: 8px 12px; border-radius: 999px; background: var(--mist); color: var(--blue); font: 900 14px/1 var(--body); }
.price.hot .unit { background: var(--sky); color: var(--navy); }
.price .ticks { margin-top: 18px; gap: 10px; }
.price .ticks li { font-size: 16px; padding-left: 34px; }
.price .ticks li::before { width: 22px; height: 22px; }
.price .ticks li::after { left: 7px; }
.price .btn { margin-top: auto; align-self: flex-start; }
.price .ctas { margin-top: auto; padding-top: 24px; }
.example { margin: 24px 0 0; padding: 18px 24px; border-radius: 16px; background: var(--navy); color: var(--white); font-size: 17px; }
.example b { color: var(--sky); }

/* Listes à coches */
.ticks { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 40px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); }
.ticks li::after { content: ""; position: absolute; left: 8px; top: calc(.2em + 5px); width: 6px; height: 11px; border: solid var(--white); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.dark .ticks li::before, .hot .ticks li::before { background: var(--sky); }
.dark .ticks li::after, .hot .ticks li::after { border-color: var(--navy); }
.blue .ticks li::before { background: var(--navy); }

/* Deux colonnes « qui contacter » */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(32px, 4vw, 56px); }
.who-card { padding: clamp(24px, 3vw, 44px); border-radius: clamp(20px, 2.4vw, 30px); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(14, 26, 51, .08); }
.who-card.alt { background: var(--navy); color: var(--white); }
.who-card small { font: 900 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.who-card.alt small { color: var(--sky); }
.who-card h3 { margin: 12px 0 0; font: 900 clamp(24px, 2.4vw, 34px)/1.05 var(--head); letter-spacing: -.02em; }
.who-card .ticks { margin-top: 20px; }
.who-card .ticks li { font-size: 17px; }

/* Bande d'appel */
.strip { padding: clamp(36px, 5vw, 64px) 0; }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.strip p { margin: 0; max-width: 30ch; font: 900 clamp(24px, 3.2vw, 44px)/1.05 var(--head); letter-spacing: -.02em; }
.strip .ctas { margin: 0; }

/* Questions fréquentes */
.faq { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 12px; max-width: 880px; }
.faq details { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font: 900 clamp(17px, 1.4vw, 20px)/1.3 var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: var(--white); font: 900 22px/1 var(--head); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--ink-soft); }

/* Final */
.final { text-align: center; }
.final .logo-card { padding: 22px 40px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(136, 159, 225, .45), 0 0 80px rgba(136, 159, 225, .3); }
.final .logo-card img { height: clamp(48px, 7vw, 90px); }
.final .slam { margin-top: 48px; }
.final .lead { margin-inline: auto; }
.final .ctas { justify-content: center; margin-top: 44px; }

/* ── Contact ───────────────────────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.form-card { padding: clamp(22px, 3.2vw, 48px); border-radius: clamp(20px, 2.4vw, 32px); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(14, 26, 51, .1); }
.form-card h2 { margin: 0 0 6px; font: 900 clamp(26px, 2.6vw, 36px)/1.1 var(--head); letter-spacing: -.02em; }
.form-card .intro { margin: 0 0 28px; color: var(--ink-soft); font-size: 17px; }
.form { display: grid; gap: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font: 900 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.field .opt { margin-left: 6px; color: var(--ink-soft); font-weight: 700; letter-spacing: .04em; text-transform: none; }
.field .req { color: var(--blue); }
.field input, .field textarea, .field select { width: 100%; padding: 15px 18px; border: 0; border-radius: 14px; background: rgba(62, 108, 165, .08); color: var(--ink); font: 700 17px/1.4 var(--body);
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, background .15s; }
.field select { appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%233E6CA5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(14, 26, 51, .4); }
.field input:hover, .field textarea:hover, .field select:hover { background-color: rgba(62, 108, 165, .12); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.field.bad input, .field.bad textarea { background: rgba(192, 38, 38, .05); box-shadow: inset 0 0 0 2px #B42323; }
.field .err { margin: 0; color: #B42323; font: 800 14px/1.3 var(--body); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .send { justify-self: start; margin-top: 6px; }
.form .send:disabled { opacity: .6; cursor: wait; transform: none; }
.note { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.status { margin: 0; padding: 16px 20px; border-radius: 14px; font: 800 16px/1.45 var(--body); }
.status:empty { display: none; }
.status.ko { background: rgba(192, 38, 38, .06); box-shadow: inset 0 0 0 2px #B42323; }
.status a { white-space: nowrap; }
.thanks { padding: 12px 0; }
.thanks h2 { font-size: clamp(30px, 3.4vw, 46px); }
.thanks p { margin: 14px 0 0; color: var(--ink-soft); }
.side { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.side-card { padding: clamp(22px, 2.6vw, 34px); border-radius: clamp(20px, 2.4vw, 28px); background: var(--navy); color: var(--white); box-shadow: 0 30px 80px rgba(14, 26, 51, .2); }
.side-card.light { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(14, 26, 51, .08); }
.side-card .tag { display: inline-block; margin-bottom: 14px; padding: 8px 14px; border-radius: 999px; background: var(--sky); color: var(--navy); font: 900 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.side-card.light .tag { background: var(--mist); color: var(--blue); }
.side-card h3 { margin: 0 0 10px; font: 900 clamp(20px, 1.8vw, 26px)/1.15 var(--head); }
.side-card p { margin: 0; color: var(--paper-soft); font-size: 16px; line-height: 1.5; }
.side-card.light p { color: var(--ink-soft); }
.side-card .tel { display: block; margin-top: 12px; font: 900 clamp(20px, 1.8vw, 24px)/1.2 var(--head); text-decoration: none; }
.side-card .tel small { display: block; font: 800 13px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-soft); }
.side-card .tel:hover { color: var(--sky); }

/* ── Pages légales ─────────────────────────────────────────────────────────────────────────── */
.updated { margin: 20px 0 0; color: var(--paper-soft); font-size: 15px; }
.legal-grid { display: grid; grid-template-columns: minmax(230px, .34fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.toc { position: sticky; top: 100px; padding: 26px 26px 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 16px 44px rgba(14, 26, 51, .06); }
.toc h2 { margin: 0 0 14px; font: 900 12px/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.toc li { counter-increment: s; }
.toc a { display: flex; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font: 800 15px/1.3 var(--body); transition: background .15s; }
.toc a::before { content: counter(s, decimal-leading-zero); flex: none; color: var(--blue); font-weight: 900; }
.toc a:hover { background: var(--mist); }
.prose { min-width: 0; padding: clamp(22px, 3.6vw, 60px); border-radius: clamp(20px, 2.4vw, 32px); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(14, 26, 51, .08); }
.prose h2 { margin: 2.1em 0 .6em; font: 900 clamp(22px, 2.2vw, 30px)/1.15 var(--head); letter-spacing: -.02em; scroll-margin-top: 110px; }
.prose h2:first-child { margin-top: 0; }
.prose h2 .n { margin-right: 10px; color: var(--blue); }
.prose p, .prose li { max-width: 70ch; color: rgba(14, 26, 51, .8); font-size: 17px; }
.prose p { margin: 0 0 1em; }
.prose ul { display: grid; gap: 8px; margin: 0 0 1em; padding-left: 1.3em; }
.prose li::marker { color: var(--blue); }
.prose a { color: var(--ink); text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:hover { color: var(--blue); }
.prose strong { color: var(--ink); }
mark.todo { padding: 2px 8px; border-radius: 6px; background: #FFF1B8; color: #5A4500; font-weight: 800; }

/* ── Pied de page ──────────────────────────────────────────────────────────────────────────── */
footer.site-foot { padding: clamp(56px, 7vw, 96px) 0 44px; background: var(--navy); border-top: 1px solid rgba(253, 253, 253, .08); font: 700 15px/1.6 var(--body); color: rgba(253, 253, 253, .62); }
.foot-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.foot-brand .logo-card { margin-bottom: 22px; }
.foot-brand p { margin: 0; max-width: 34ch; }
.site-foot .foot-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 22px; border-radius: 999px; background: var(--sky); color: var(--navy); text-decoration: none; font: 900 15px/1 var(--head); transition: transform .2s, box-shadow .2s; }
.site-foot .foot-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(136, 159, 225, .16); text-decoration: none; color: var(--navy); }
.foot-col h2 { margin: 0 0 16px; color: var(--white); font: 900 12px/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.foot-col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-foot a { color: rgba(253, 253, 253, .8); text-decoration: none; }
.site-foot a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.site-foot address { margin: 0 0 18px; font-style: normal; }
.site-foot address strong { display: block; margin-bottom: 2px; color: var(--white); font-weight: 900; }
.site-foot address a { color: var(--white); font-weight: 900; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid rgba(253, 253, 253, .1); font-size: 14px; color: rgba(253, 253, 253, .5); }

/* ── Éléments flottants : lien d'évitement, progression, retour en haut, barre d'appel mobile, consentement ── */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 18px; border-radius: 999px; background: var(--sky); color: var(--navy); font: 900 15px/1 var(--body); text-decoration: none; transition: top .15s; }
.skip:focus { top: 12px; }
.progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 4px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; pointer-events: none; will-change: transform; }
.totop { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 40; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--blue); color: var(--white); cursor: pointer;
  box-shadow: 0 12px 32px rgba(14, 26, 51, .35); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility 0s linear .25s, bottom .3s, box-shadow .2s; }
.totop.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop:hover { box-shadow: 0 0 0 8px rgba(62, 108, 165, .2), 0 12px 32px rgba(14, 26, 51, .35); }
.totop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(14, 26, 51, .95); backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .3s; }
.sticky-cta .btn { width: 100%; padding: 16px 20px; font-size: 16px; background: var(--sky); color: var(--navy); }
.sticky-cta.show { transform: none; }
@media (max-width: 1000px) { body:has(.sticky-cta.show) .totop { bottom: calc(88px + env(safe-area-inset-bottom)); } }

.consent { position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 70; width: min(520px, calc(100vw - 24px)); padding: 24px; border-radius: 24px; background: var(--navy-2); color: var(--white);
  box-shadow: 0 0 0 1px rgba(253, 253, 253, .14), 0 30px 80px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(24px); transition: opacity .3s, transform .3s; }
.consent.in { opacity: 1; transform: none; }
.consent h2 { margin: 0 0 10px; font: 900 22px/1.1 var(--head); letter-spacing: -.02em; }
.consent h2 .dot { color: var(--sky); }
.consent p { margin: 0; color: rgba(253, 253, 253, .78); font: 700 15px/1.5 var(--body); }
.consent p a { color: var(--white); text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.consent-prefs { display: grid; gap: 4px; margin-top: 16px; }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(253, 253, 253, .07); cursor: pointer; }
.consent-row strong { display: block; font: 900 15px/1.3 var(--body); }
.consent-row small { display: block; margin-top: 2px; color: rgba(253, 253, 253, .6); font: 700 13px/1.35 var(--body); }
.consent-row input { appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: rgba(253, 253, 253, .28); cursor: pointer; transition: background .2s; }
.consent-row input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: transform .2s; }
.consent-row input:checked { background: var(--blue); }
.consent-row input:checked::after { transform: translateX(18px); }
.consent-row input:disabled { opacity: .55; cursor: not-allowed; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.consent-actions button { flex: 1 1 auto; padding: 14px; border: 0; border-radius: 999px; cursor: pointer; font: 900 15px/1 var(--head); white-space: nowrap; transition: transform .2s, background .2s, color .2s; }
.consent-actions button:hover { transform: translateY(-2px); }
.consent-actions [data-consent="refuse"] { background: var(--white); color: var(--navy); }
.consent-actions [data-consent="accept"], .consent-actions [data-consent="save"] { background: var(--sky); color: var(--navy); }
.consent-actions [data-consent="custom"] { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(253, 253, 253, .45); }

/* Apparition au défilement : le bloc arrive légèrement grossi et se pose */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px) scale(1.04); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .mod, .consent { transition: none; } }

/* ── Points de rupture ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) { .menu .ico .txt { display: none; } .menu .ico { padding-inline: 12px; } }
@media (max-width: 1100px) {
  .menu .dd { position: static; } .menu .panel { left: var(--gutter); } .menu .panel-in { width: min(620px, calc(100vw - 2 * var(--gutter))); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .hero-grid, .split, .contact-grid, .legal-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
  .mods { grid-template-columns: repeat(2, 1fr); }
  .paths, .cards { grid-template-columns: 1fr; }
  .perks, .prices { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .sticky-cta { display: block; }
  footer.site-foot { padding-bottom: 96px; }
}
@media (max-width: 900px) { .top .btn.sm { display: none; } .menu { margin-right: 0; } }
@media (max-width: 760px) {
  html { scroll-padding-top: 124px; }
  .top .wrap { flex-wrap: wrap; height: auto; padding-block: 8px 6px; row-gap: 2px; }
  .menu { order: 3; flex: 1 0 100%; flex-wrap: wrap; gap: 2px; margin: 0; justify-content: space-between; }
  .menu .mi { gap: 6px; padding: 10px; font-size: 14px; }
  .menu .ico { padding-inline: 10px; }
  .menu .dd { position: static; }
  .menu .panel { left: 0; right: 0; }
  .menu .panel-in { width: auto; margin: 0 var(--gutter); grid-template-columns: 1fr; max-height: calc(100vh - 150px); overflow-y: auto; }
  .steps, .choice, .who-grid, .prices.two { grid-template-columns: 1fr; }
  .year { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mods, .perks, .prices, .row2, .foot-grid { grid-template-columns: 1fr; }
  .ctas .btn { width: 100%; }
  .slot { grid-template-columns: 1fr; gap: 8px; }
  .week span { height: 36px; font-size: 11px; letter-spacing: 0; }
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
  .consent-actions button { flex: 1 1 calc(50% - 5px); padding: 13px 10px; }
  .consent-actions [data-consent="custom"], .consent-actions [data-consent="save"] { flex-basis: 100%; order: 3; }
}
/* Sous 520 px, les cinq entrées ne tiennent plus sur une ligne avec leurs pictogrammes : on garde le texte. Le logo mène déjà à l'accueil,
   d'où l'entrée « Accueil » masquée sur mobile. */
@media (max-width: 760px) { .menu .home { display: none; } }
.menu .short { display: none; }
@media (max-width: 520px) { .menu .mi:not(.ico) .pic, .menu .long { display: none; } .menu .short { display: inline; } }
@media (max-width: 360px) { .menu .mi { padding: 10px 6px; font-size: 13px; } }
/* Un numéro de téléphone ne se coupe pas en fin de ligne */
a[href^="tel:"] { white-space: nowrap; }

/* ── Fenêtre « M’inscrire » (élément <dialog>, ouverte par tous les boutons [data-inscription]) ───────────────────────── */
.modal { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: clamp(24px, 4vw, 40px); border: 0; border-radius: 28px; background: var(--white); color: var(--ink);
  box-shadow: 0 40px 120px rgba(14, 26, 51, .45); overflow: auto; overscroll-behavior: contain; }
.modal::backdrop { background: rgba(14, 26, 51, .66); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal .chip { margin-bottom: 16px; }
.modal h2 { margin: 0 0 22px; font: 900 clamp(28px, 4vw, 40px)/1.05 var(--head); letter-spacing: -.02em; }
.modal h2:focus { outline: none; }
.modal .lead { margin-top: 0; font-size: 18px; }
.modal-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); cursor: pointer; font: 900 26px/1 var(--body); }
.modal-x:hover { background: var(--navy); color: var(--white); }
.ins-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.ins-type legend { margin-bottom: 8px; padding: 0; font: 900 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.ins-type .opt { position: relative; cursor: pointer; }
.ins-type input { position: absolute; opacity: 0; }
.ins-type .opt span { display: block; height: 100%; padding: 14px 16px; border-radius: 16px; background: var(--mist); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, background .15s; }
.ins-type b { display: block; font: 900 18px/1.2 var(--head); }
.ins-type small { display: block; margin-top: 4px; color: var(--ink-soft); font: 800 14px/1.3 var(--body); }
.ins-type input:checked + span { background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.ins-type input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.modal .aide { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.ins-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 20px; border-radius: 18px; background: var(--navy); color: var(--white); }
.ins-prix b { font: 900 clamp(34px, 5vw, 44px)/1 var(--head); letter-spacing: -.03em; color: var(--sky); }
.ins-prix span { color: var(--paper-soft); font-size: 15px; }
.modal .note { margin: 0; }
.modal .form .btn { justify-self: start; }
.recap { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0 0 20px; padding: 18px 20px; border-radius: 18px; background: var(--mist); }
.recap dt { color: var(--ink-soft); font: 900 12px/1.6 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.recap dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.modal .info { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin-bottom: 18px; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--sky); }
.modal .info svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; }
.modal .info p { margin: 0; font-size: 16px; line-height: 1.5; }
.modal .ctas { margin-top: 8px; }
@media (max-width: 520px) { .ins-type { grid-template-columns: 1fr; } .modal .ctas .btn { width: 100%; } }