/* Bloomi — site vitrine (refonte « le lien d'abord », 22 octobre 2026). Mise en page par-dessus le design system assets/brand.css.
   Aucune ressource en ligne. Palette, polices et cadres d'appareil viennent de brand.css. */
@import url("assets/brand.css");

:root {
  --wrap: 1180px;
  --gutter: 16px;
  --header-h: 68px;
  --topbar-h: 38px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ink-on-abricot: #1E1308;
  --prune-text: var(--prune);
  --ciel-text: #1F55D6;
}
:root[data-theme="dark"] { --prune-text: #B9A6F0; --ciel-text: #8FB0FF; }
@media (min-width: 700px) { :root { --gutter: 24px; } }
html { scroll-padding-top: calc(var(--header-h) + 12px); }
body { font-size: 17px; overflow-x: hidden; }
@media (min-width: 700px) { body { font-size: 18px; } }
img { display: block; }
:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; border-radius: 6px; }
:root[data-theme="dark"] :focus-visible { outline-color: #8FB0FF; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--encre); color: #fff; padding: .5rem .9rem; border-radius: 8px; z-index: 2000; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Langues : FR par défaut, le JS pose lang="es" sur <html> */
html[lang="fr"] [data-es], html[lang="es"] [data-fr] { display: none !important; }
html:not([lang="es"]) [data-lang="es"] { display: none !important; }
html[lang="es"] [data-lang="fr"] { display: none !important; }

/* ---------- Conteneurs et rythme ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap.narrow { max-width: 860px; }
.wrap.tight { max-width: 720px; }
section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
section.flush { padding: 0; }
.section-head { max-width: 780px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: .6rem; }
.section-head .lead { margin-bottom: 0; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.02em; }
h3 { font-size: 1.35rem; margin-top: 0; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; }
.eyebrow { font-size: .8rem; letter-spacing: .14em; }
.alt { background: var(--surface-2); }
:root[data-theme="dark"] .alt { background: var(--surface); }
.alt .card, .alt .tile, .alt .quote, .alt .price, .alt .sit, .alt .gesture, .alt .k, .alt .stat { background: var(--surface); }
:root[data-theme="dark"] .alt .card, :root[data-theme="dark"] .alt .tile, :root[data-theme="dark"] .alt .quote, :root[data-theme="dark"] .alt .price, :root[data-theme="dark"] .alt .sit, :root[data-theme="dark"] .alt .gesture, :root[data-theme="dark"] .alt .k, :root[data-theme="dark"] .alt .stat { background: var(--surface-2); }
.btn { font-size: 1.02rem; padding: .8rem 1.4rem; }
.btn.lg { font-size: 1.1rem; padding: .95rem 1.7rem; }
.btn.small { padding: .45rem .9rem; font-size: .9rem; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row + .small { margin-top: .9rem; }
.card { padding: 1.5rem 1.6rem; }
.card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.card > :last-child { margin-bottom: 0; }

/* Motif « la fleur » en filigrane */
.flower::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23F2894B' stroke-width='1.6'%3E%3Ccircle cx='50' cy='35' r='17'/%3E%3Ccircle cx='35' cy='60' r='17'/%3E%3Ccircle cx='65' cy='60' r='17'/%3E%3Cpath d='M50 70 C50 78 46 86 40 92'/%3E%3C/g%3E%3Ccircle cx='50' cy='52' r='7' fill='%23F2894B'/%3E%3C/svg%3E") no-repeat right -90px top -70px / 460px auto; }
:root[data-theme="dark"] .flower::before { opacity: .22; }
.flower > .wrap { position: relative; }

/* ---------- Bandeau haut ---------- */
.topbar { background: var(--abricot); color: var(--ink-on-abricot); font-size: .88rem; font-weight: 800; min-height: var(--topbar-h); display: flex; align-items: center; justify-content: center; text-align: center; padding: .35rem var(--gutter); }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; gap: .6rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.topbar a span.sep { opacity: .55; }
.topbar a u { text-decoration: underline; text-underline-offset: 3px; }
.topbar a:hover u { text-decoration-thickness: 2px; }
@media (max-width: 560px) { .topbar .hide-sm { display: none; } }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(34,48,74,.4); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 36px; width: auto; }
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
.nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.nav a { color: var(--text); text-decoration: none; font-weight: 800; font-size: .95rem; padding: .45rem .75rem; border-radius: 999px; white-space: nowrap; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a[aria-current="page"] { color: var(--abricot-ink); }
.nav a.btn[aria-current="page"] { color: var(--ink-on-abricot); }
.nav .btn { margin-left: .5rem; padding: .55rem 1.1rem; font-size: .95rem; }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-left: .6rem; flex: none; background: var(--surface); }
.lang-switch button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 800; font-size: .85rem; padding: .4rem .75rem; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--encre); color: #fff; }
:root[data-theme="dark"] .lang-switch button[aria-pressed="true"] { background: var(--abricot); color: var(--ink-on-abricot); }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 2px; background: var(--text); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text); transition: transform .2s, top .2s; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.site-header.open .burger span { background: transparent; }
.site-header.open .burger span::before { top: 0; transform: rotate(45deg); }
.site-header.open .burger span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: .6rem var(--gutter) 1rem; gap: .1rem; box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow: auto; }
  .site-header.open .nav { display: flex; }
  .nav a { padding: .8rem .6rem; font-size: 1.05rem; }
  .nav .btn { margin: .6rem 0 0; justify-content: center; }
}

/* ---------- Hero plein écran ---------- */
.hero-full { position: relative; min-height: min(90vh, 900px); display: flex; align-items: flex-end; color: #FFF8F0; overflow: hidden; padding: 0; isolation: isolate; background: #1C1611; }
.hero-full.short { min-height: min(74vh, 740px); }
.hero-full .bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* L'image du film (téléphone au centre) est agrandie depuis la gauche : le téléphone glisse à droite du titre, la légende incrustée sort du cadre */
.hero-full .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; transform: scale(1.22); transform-origin: 0 10%; }
.hero-full .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 22, 17, .9) 0%, rgba(28, 22, 17, .55) 40%, rgba(28, 22, 17, .1) 75%, rgba(28,22,17,0) 100%), linear-gradient(to right, rgba(28,22,17,.72) 0%, rgba(28,22,17,.45) 38%, rgba(28,22,17,0) 62%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-full .bg img { animation: kenburns 30s ease-out forwards; }
  @keyframes kenburns { from { transform: scale(1.28); } to { transform: scale(1.22); } }
}
.hero-full .wrap { position: relative; padding-top: clamp(7rem, 20vh, 12rem); padding-bottom: clamp(2.2rem, 5vw, 4rem); }
.hero-full .eyebrow { color: #FFD4B3; }
.hero-full h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.02; margin: 0 0 1rem; color: #FFF8F0; max-width: 11ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); letter-spacing: -.025em; }
.hero-full .lead { color: #FFF1E3; max-width: 42ch; margin-bottom: 1.5rem; text-shadow: 0 1px 12px rgba(0,0,0,.4); font-weight: 600; }
.hero-full .btn.ghost { border-color: rgba(255,255,255,.55); color: #fff; backdrop-filter: blur(6px); background: rgba(255,255,255,.08); }
.hero-full .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.16); }
@media (max-width: 700px) {
  /* Sur téléphone : la photo en haut (le téléphone de Mamie bien visible), le texte dessous sur fond sombre */
  .hero-full, .hero-full.short { min-height: 0; display: block; }
  .hero-full .bg { position: relative; height: min(58vh, 470px); z-index: 0; }
  .hero-full .bg img { object-position: 60% 35%; transform: scale(1.12); transform-origin: 40% 0; animation: none; }
  .hero-full .bg::after { background: linear-gradient(to top, #1C1611 0%, rgba(28,22,17,.35) 30%, rgba(28,22,17,0) 55%); }
  .hero-full .wrap { padding-top: 0; margin-top: -3.2rem; position: relative; z-index: 1; padding-bottom: 2.2rem; }
  .hero-full h1 { font-size: clamp(2.3rem, 11vw, 2.9rem); }
}
.proofs { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.proofs li { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 800; padding: .4rem .85rem; border-radius: 999px; background: rgba(255,248,240,.14); border: 1px solid rgba(255,248,240,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.proofs li svg { width: 18px; height: 18px; color: var(--abricot); flex: none; }
.page-hero .proofs { justify-content: center; }
.page-hero .proofs li, .alt .proofs li { background: var(--surface); border-color: var(--line); color: var(--text-2); backdrop-filter: none; }
.alt > .wrap > .proofs { justify-content: center; margin: 0; }

/* ---------- Hero de page intérieure ---------- */
.page-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; }
.page-hero .wrap { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .page-hero .wrap { grid-template-columns: 1.05fr 1fr; } .page-hero.rev .wrap > :first-child { order: 2; } }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.05; letter-spacing: -.025em; margin-bottom: .9rem; }
.page-hero h1 em { font-style: normal; color: var(--abricot-ink); }
.page-hero .lead { margin-bottom: 1.5rem; }
.page-hero .visual { position: relative; }
.page-hero .visual .photo { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(34,48,74,.5); aspect-ratio: 4/3; }
.page-hero .visual .photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .visual .mock-phone.float { position: absolute; right: 2px; bottom: -22px; width: 32%; max-width: 190px; min-width: 120px; transform: rotate(-5deg); }
.page-hero .visual .mock-tablet { max-width: 640px; margin: 0 auto; }
.page-hero.simple .wrap { grid-template-columns: 1fr; max-width: 860px; text-align: center; }
.page-hero.simple h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.page-hero.simple .lead { margin-left: auto; margin-right: auto; max-width: 60ch; }
.page-hero.simple .btn-row { justify-content: center; }
.page-hero.gifthero .visual { padding-bottom: 1.4rem; }

/* ---------- Situations (loin de ceux qu'on aime) ---------- */
.situations { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.sit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 4px solid var(--prune); }
.sit.ciel { border-top-color: var(--ciel); } .sit.sauge { border-top-color: var(--sauge); }
.sit .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .9rem; background: var(--prune-soft); color: var(--prune-text); }
.sit.ciel .ic { background: var(--ciel-soft); color: var(--ciel-text); } .sit.sauge .ic { background: var(--sauge-soft); color: var(--sauge-ink); }
.sit .ic svg { width: 24px; height: 24px; }
.sit h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.sit p { color: var(--text-2); margin: 0 0 1.1rem; flex: 1; }
.sit .stat { margin-top: auto; border-top: 1px dashed var(--line); padding-top: .9rem; display: grid; gap: .1rem; }
.sit .stat b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.05; color: var(--abricot-ink); letter-spacing: -.01em; }
.sit .stat span { font-size: .92rem; color: var(--text-2); }
.sit .stat small { font-size: .78rem; color: var(--text-3); }

/* ---------- Parcours en 4 temps ---------- */
.journey { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: j; }
.journey .step { position: relative; display: flex; flex-direction: column; }
.journey .step .vis { position: relative; margin-bottom: 1.1rem; min-height: 200px; display: flex; align-items: flex-end; }
.journey .step .vis .mock-tablet { width: 100%; margin: 0; }
.journey .step.ph .vis { justify-content: center; }
.journey .step.ph .mock-phone { max-width: 210px; margin: 0 auto; }
.journey .step .vis::before { counter-increment: j; content: counter(j); position: absolute; top: -.6rem; left: -.4rem; z-index: 2; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--abricot); color: var(--ink-on-abricot); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.journey .step h3 { font-size: 1.22rem; margin: 0 0 .35rem; }
.journey .step p { margin: 0; color: var(--text-2); font-size: .98rem; }
@media (min-width: 1000px) { .journey { grid-template-columns: 1.15fr 1.15fr .8fr 1.15fr; align-items: end; } .journey .step .vis { min-height: 0; } }
.facts { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.facts li { display: flex; gap: .6rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .95rem; font-size: .92rem; line-height: 1.4; }
:root[data-theme="dark"] .facts li { background: var(--surface-2); }
.facts li svg { width: 20px; height: 20px; flex: none; color: var(--prune-text); margin-top: .1em; }

/* ---------- Bénéfices : image + texte alternés ---------- */
.feature { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .feature { grid-template-columns: 1.1fr 1fr; } .feature.rev > .fx { order: 2; } }
.feature + .feature { margin-top: clamp(3rem, 8vw, 6rem); }
.feature .fx { position: relative; }
.feature .fx img.photo, .feature .fx .photo { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(34,48,74,.5); aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.feature .fx .photo img { width: 100%; height: 100%; object-fit: cover; }
.feature .fx .mock-tablet { max-width: 640px; margin: 0 auto; }
.feature .fx .mock-phone.float { position: absolute; right: 2px; bottom: -26px; width: 30%; max-width: 180px; min-width: 110px; transform: rotate(-5deg); }
.feature .fx .mock-tablet.float-sm { position: absolute; right: 0; bottom: -2.2rem; width: 46%; max-width: 300px; transform: rotate(2.5deg); }
.feature .fx:has(.float-sm) { padding-bottom: 2.4rem; }
.feature .fx:has(.float) { padding-bottom: 1.6rem; }
.feature .ft h2, .feature .ft h3 { margin-top: 0; }
.feature .ft h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.feature .ft .lead { font-size: 1.12rem; }
.feature .ft .mini { display: grid; gap: .55rem; padding: 0; list-style: none; margin: 1.2rem 0 1.4rem; }
.feature .ft .mini li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; }
.feature .ft .mini li svg { width: 22px; height: 22px; flex: none; margin-top: .1em; color: var(--sauge-ink); }
.feature.enfants .ft .eyebrow { color: var(--sauge-ink); }
.feature.proches .ft .eyebrow, .feature.proches .ft .mini li svg { color: var(--prune-text); }
.feature.parents .ft .mini li svg { color: var(--abricot-ink); }
.mock-tablet { border-radius: 20px; padding: 9px; }
.mock-tablet img { border-radius: 11px; }
.mock-tablet.sm { padding: 6px; border-radius: 14px; margin-top: 1.1rem; }
.mock-tablet.sm img { border-radius: 8px; }
.mock-phone { padding: 8px; border-radius: 30px; }
.mock-phone img { border-radius: 23px; }
.mock-phone.sm { max-width: 170px; margin: 1.1rem auto 0; padding: 6px; border-radius: 24px; }
.mock-phone.sm img { border-radius: 18px; }
.mock-tablet img, .mock-phone img { cursor: zoom-in; }

/* ---------- Galerie de téléphones (appli des proches) ---------- */
.phones { display: grid; gap: 1.4rem 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 1000px; margin: 0 auto; }
.phones.big { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: none; gap: 1.8rem 1.2rem; }
.phones figure { margin: 0; text-align: center; }
.phones .mock-phone { margin: 0 auto; max-width: 230px; }
.phones.big .mock-phone { max-width: 270px; }
.phones figcaption { margin-top: .7rem; font-size: .95rem; color: var(--text); font-weight: 800; }
.phones figcaption small { display: block; font-weight: 400; color: var(--text-3); font-size: .85rem; }

/* ---------- Installation en 3 étapes ---------- */
.install { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.install li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
:root[data-theme="dark"] .install li { background: var(--surface-2); }
.install .n { position: absolute; top: -.9rem; left: 1.3rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--abricot); color: var(--ink-on-abricot); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.install .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--prune-soft); color: var(--prune-text); display: grid; place-items: center; margin: .3rem 0 .9rem; }
.install .ic svg { width: 24px; height: 24px; }
.install h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.install p { color: var(--text-2); margin: 0; font-size: .98rem; }
.install .mock-tablet, .install .mock-phone { margin-top: auto; }
.install .mock-tablet.sm { margin-top: 1.2rem; }

/* ---------- Une journée (comment ça marche) ---------- */
.day { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(2rem, 5vw, 4rem); }
.moment { display: grid; gap: 1.2rem 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .moment { grid-template-columns: 9rem 1fr 1.2fr; } .moment:nth-child(even) .vis { order: -1; } .moment:nth-child(even) .when { order: 1; } }
.moment .when { font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.moment .when b { display: block; font-family: var(--font-display); font-size: 2rem; letter-spacing: -.02em; color: var(--abricot-ink); font-weight: 700; text-transform: none; line-height: 1; margin-bottom: .3rem; }
.moment h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .5rem; }
.moment p { color: var(--text-2); margin-bottom: .6rem; }
.moment .txt a { font-weight: 800; }
.moment .vis .mock-tablet { margin: 0; }
.moment .vis img.photo { border-radius: 20px; aspect-ratio: 16/10; object-fit: cover; width: 100%; box-shadow: var(--shadow); }
.moment.ph .vis { display: flex; justify-content: center; }
.moment.ph .mock-phone { max-width: 250px; }

/* ---------- Film ---------- */
.film { position: relative; border-radius: 24px; overflow: hidden; background: #111522; box-shadow: 0 50px 100px -50px rgba(0,0,0,.6); aspect-ratio: 16/9; max-width: 1040px; margin: 0 auto; }
.film video { width: 100%; height: 100%; display: block; object-fit: cover; }
.film .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film .play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #fff; font: inherit; padding: 1rem; }
.film .play .disc { width: clamp(72px, 10vw, 108px); height: clamp(72px, 10vw, 108px); border-radius: 50%; background: var(--abricot); color: var(--ink-on-abricot); display: grid; place-items: center; box-shadow: 0 20px 50px -14px rgba(242,137,75,.9); transition: transform .25s var(--ease); }
.film .play .disc svg { width: 44%; height: 44%; margin-left: 6%; }
.film .play:hover .disc { transform: scale(1.06); }
.film .play .lbl { font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.2rem); text-shadow: 0 2px 12px rgba(0,0,0,.6); text-align: center; }
.film .play .lbl small { display: block; font-weight: 600; opacity: .85; font-size: .8em; }
.film.playing .play, .film.playing .poster { display: none; }
.film-note { text-align: center; margin: 1rem auto 0; max-width: 62ch; color: var(--text-2); font-size: .95rem; }
.videos { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 1040px; margin-left: auto; margin-right: auto; }
.videos .film { aspect-ratio: 16/9; border-radius: 18px; }
.videos .film .play .disc { width: 64px; height: 64px; }
.videos .vcap { margin-top: .7rem; }
.videos .vcap strong { display: block; }
.videos .vcap span { color: var(--text-2); font-size: .95rem; }

/* ---------- Tuiles ---------- */
.tiles { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; margin: 0; }
.tile .im { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tile .im img { width: 100%; height: 100%; object-fit: cover; object-position: top; cursor: zoom-in; transition: transform .8s var(--ease); }
.tile:hover .im img { transform: scale(1.03); }
.tile figcaption { padding: 1.1rem 1.3rem 1.3rem; }
.tile figcaption strong { display: block; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: .3rem; }
.tile figcaption p { margin: 0; font-size: .95rem; color: var(--text-2); }
.tile .pill { margin-bottom: .55rem; }

/* ---------- Icônes et listes ---------- */
.icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .9rem; }
.icon svg { width: 26px; height: 26px; }
.icon.sauge { background: var(--sauge-soft); color: var(--sauge-ink); }
.icon.prune { background: var(--prune-soft); color: var(--prune-text); }
.icon.abricot { background: var(--abricot-soft); color: var(--abricot-ink); }
.icon.ciel { background: var(--ciel-soft); color: var(--ciel-text); }
.icon.soleil { background: var(--soleil-soft); color: #7A5A00; }
:root[data-theme="dark"] .icon.soleil { color: var(--soleil); }
.benefits { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.benefit h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.benefit p { margin: 0; color: var(--text-2); font-size: .98rem; }
.check-list { list-style: none; padding: 0; margin: 1rem 0; }
.check-list li { padding-left: 1.9rem; position: relative; margin: .55rem 0; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .4em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--sauge-soft); }
.check-list li::after { content: ""; position: absolute; left: .36rem; top: .58em; width: .38rem; height: .65rem; border: solid var(--sauge-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.no-list { list-style: none; padding: 0; margin: 1rem 0; }
.no-list li { padding-left: 1.9rem; position: relative; margin: .55rem 0; }
.no-list li::before { content: "×"; position: absolute; left: .1rem; top: -.05em; font-weight: 800; font-size: 1.3em; color: var(--brique); line-height: 1.2; }
.steps li { font-size: 1rem; color: var(--text-2); }
.steps li b { color: var(--text); }

/* ---------- Gestes (enfants) ---------- */
.gestures { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gesture { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); text-align: center; }
.gesture .big { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.1; color: var(--sauge-ink); margin-bottom: .4rem; }
.gesture p { margin: 0; color: var(--text-2); }
.gesture .ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem; background: var(--sauge-soft); color: var(--sauge-ink); display: grid; place-items: center; }
.gesture .ic svg { width: 32px; height: 32px; }

/* ---------- Manifeste ---------- */
.manifesto { font-family: var(--font-display); font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.45; font-weight: 500; }
.manifesto p { margin-bottom: 1.1em; }
.manifesto p strong { color: var(--abricot-ink); font-weight: 700; }
.manifesto .sig { font-family: var(--font-text); font-size: 1rem; color: var(--text-2); font-weight: 600; }
.story { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .story { grid-template-columns: .9fr 1.1fr; } }
.story .photo { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(34,48,74,.5); position: sticky; top: calc(var(--header-h) + 1.5rem); margin: 0; background: var(--surface); }
.story .photo img { width: 100%; height: auto; }
.story .photo figcaption { padding: .8rem 1rem; font-size: .9rem; }

/* ---------- Offrir ---------- */
.gift { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(1.2rem, 3vw, 2.4rem); box-shadow: var(--shadow); position: relative; overflow: hidden; }
@media (min-width: 900px) { .gift { grid-template-columns: 1fr 1.1fr; } }
.gift-visual { position: relative; }
.gift-visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; }
.gift-visual .ribbon { position: absolute; left: 1rem; bottom: 1rem; background: var(--abricot); color: var(--ink-on-abricot); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; padding: .5rem 1.1rem; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); transform: rotate(-2deg); }
.gift-txt h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-top: .2rem; }
.gift-txt .mini { display: grid; gap: .55rem; padding: 0; list-style: none; margin: 1.1rem 0 1.2rem; }
.gift-txt .mini li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; }
.gift-txt .mini li svg { width: 22px; height: 22px; flex: none; margin-top: .1em; color: var(--abricot-ink); }
.moments { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.3rem; }
.moments span { display: inline-flex; align-items: center; gap: .4rem; background: var(--abricot-soft); color: var(--abricot-ink); border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font-weight: 800; }
.moments span svg { width: 16px; height: 16px; }
.giftpack { display: grid; gap: 1.6rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) { .giftpack { grid-template-columns: .9fr 1.1fr; } }
.gift-steps { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.6rem 1.6rem 1.2rem; }
:root[data-theme="dark"] .alt .gift-steps { background: var(--surface-2); }
.gift-steps h3 { margin-bottom: .6rem; }
.occasions { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.occasions .date { font-family: var(--font-display); font-weight: 700; color: var(--abricot-ink); font-size: 1.1rem; margin: -.2rem 0 .5rem; }
.occasions p:last-child { color: var(--text-2); font-size: .98rem; }

/* ---------- Prix ---------- */
.prices { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.price { display: flex; flex-direction: column; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.7rem 1.6rem 1.6rem; box-shadow: var(--shadow); }
.price.featured { border-color: var(--abricot); box-shadow: 0 30px 60px -30px var(--abricot); }
.price .tag { position: absolute; top: -.85rem; left: 1.4rem; }
.price h3 { margin: 0 0 .2rem; font-size: 1.35rem; }
.price .amount { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--text); margin: .5rem 0 .3rem; letter-spacing: -.02em; }
.price .amount small { font-size: 1rem; font-family: var(--font-text); font-weight: 700; color: var(--text-2); letter-spacing: 0; }
.price .amount .old { font-size: 1.15rem; color: var(--text-3); text-decoration: line-through; font-family: var(--font-text); font-weight: 700; margin-left: .35rem; letter-spacing: 0; }
.price .sub { color: var(--text-2); font-size: .95rem; margin-bottom: 1rem; }
.price ul { padding-left: 0; list-style: none; margin: 0 0 1.4rem; flex: 1; }
.price li { padding-left: 1.6rem; position: relative; font-size: .96rem; margin: .45rem 0; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--sauge-ink); font-weight: 800; }
.price .btn { justify-content: center; }
.badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .3em .75em; border-radius: 999px; background: var(--soleil); color: #3D2E00; }
.price-note { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-top: 1.4rem; display: flex; gap: 1rem; align-items: flex-start; }
:root[data-theme="dark"] .alt .price-note { background: var(--surface-2); }
.price-note svg { width: 26px; height: 26px; flex: none; color: var(--sauge-ink); margin-top: .1em; }
.price-note p { margin: 0; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); -webkit-overflow-scrolling: touch; }
:root[data-theme="dark"] .alt .compare-wrap { background: var(--surface-2); }
table.compare { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 700px; }
.compare th, .compare td { padding: .85rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { background: var(--surface-2); font-weight: 800; }
:root[data-theme="dark"] .compare th { background: var(--surface); }
.compare th small { display: block; font-weight: 700; color: var(--text-3); font-size: .8rem; }
.compare tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 800; }
.compare tr.us td { background: var(--abricot-soft); }
.compare tr.us td:first-child { color: var(--abricot-ink); }
.compare .yes { color: var(--sauge-ink); font-weight: 800; }
.compare .no { color: var(--brique); font-weight: 800; background: transparent; }
.compare .meh { color: var(--text-3); }
:root[data-theme="dark"] .compare .no { color: #F39A96; }
.compare.plans td:not(:first-child) { text-align: center; }
.compare.plans th:not(:first-child) { text-align: center; }
.compare-src { font-size: .82rem; color: var(--text-3); margin-top: .7rem; }

/* ---------- Témoignages (exemples) ---------- */
.quotes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.quote { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.5rem 1.4rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.quote .badge { position: absolute; top: -.75rem; right: 1.1rem; }
.quote blockquote { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; font-weight: 600; flex: 1; }
.quote .who { font-size: .9rem; color: var(--text-2); display: flex; align-items: center; gap: .6rem; }
.quote .who .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-display); flex: none; }

/* ---------- FAQ ---------- */
.faq-group { margin-top: 2.4rem; }
.faq-group:first-child { margin-top: 0; }
.faq-group h2 { font-size: 1.45rem; margin-bottom: .8rem; }
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: .6rem 0; transition: border-color .2s; }
:root[data-theme="dark"] .alt details.faq { background: var(--surface-2); }
details.faq[open] { border-color: var(--abricot); }
details.faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; font-weight: 800; position: relative; font-size: 1.02rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 10px; height: 10px; border: solid var(--abricot-ink); border-width: 0 2.5px 2.5px 0; transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
details.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details.faq .answer { padding: 0 1.2rem 1.1rem; color: var(--text-2); }
details.faq .answer p:last-child { margin-bottom: 0; }
.faq-cols { display: grid; gap: 1rem 1.4rem; }
@media (min-width: 900px) { .faq-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.faq-cols details.faq { margin: 0; }
.faq-list { display: grid; gap: .6rem; }
.faq-list details.faq { margin: 0; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1rem; }
.form label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: .3rem; }
.form input[type=email], .form select, .form input[type=number], .form input[type=text] { width: 100%; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 1.02rem; }
.form input:focus, .form select:focus { border-color: var(--abricot); }
.form .row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.form .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; font-size: .95rem; }
.form .check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--abricot); flex: none; }
.form .consent { font-size: .85rem; color: var(--text-2); margin: 0; }
.form .btn { justify-content: center; }
.form-ok { display: none; }
.form-ok.show { display: block; }
.form.sent { display: none; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 40px 80px -50px rgba(34,48,74,.5); }
.preorder { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .preorder { grid-template-columns: 1.1fr .9fr; } }
.preorder .side { position: sticky; top: calc(var(--header-h) + 1.2rem); }
.timeline { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline li b { font-family: var(--font-display); color: var(--abricot-ink); font-weight: 700; font-size: 1.05rem; }
.timeline li span { color: var(--text-2); }

/* ---------- Blog ---------- */
.posts { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.post { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; }
.post .n { font-family: var(--font-display); color: var(--abricot-ink); font-weight: 700; font-size: .95rem; }
.post h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.post .kw { font-size: .85rem; color: var(--text-2); }
.post .kw strong { color: var(--text-3); font-weight: 700; }
.post .meta { margin-top: auto; display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .5rem; }

/* ---------- Appel final ---------- */
.cta-final { position: relative; color: #FFF8F0; overflow: hidden; isolation: isolate; padding: clamp(4rem, 10vw, 8rem) 0; text-align: center; }
.cta-final .bg { position: absolute; inset: 0; z-index: -1; }
.cta-final .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.cta-final .bg::after { content: ""; position: absolute; inset: 0; background: rgba(23, 20, 28, .68); }
.cta-final .eyebrow { color: #FFD4B3; }
.cta-final h2 { color: #FFF8F0; font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 20ch; margin: 0 auto .8rem; letter-spacing: -.02em; }
.cta-final p { color: #FFEBDA; max-width: 56ch; margin: 0 auto 1.6rem; font-size: 1.1rem; }
.cta-final .btn-row { justify-content: center; }
.cta-final .btn.ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.cta-final .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.cta-final .small { color: #E8DCCB; margin-top: 1rem; }

/* ---------- Prose (mentions légales) ---------- */
.prose h2 { font-size: 1.5rem; margin-top: 2.4rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.prose p, .prose li { font-size: 1rem; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; background: var(--surface-2); font-size: .95rem; }
:root[data-theme="dark"] .site-footer { background: var(--surface); }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer .cols > div:first-child { grid-column: 1 / -1; }
@media (min-width: 860px) { .site-footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .site-footer .cols > div:first-child { grid-column: auto; } }
.site-footer h4 { margin: 0 0 .6rem; font-size: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .35rem 0; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--abricot-ink); text-decoration: underline; }
.site-footer .brand img { height: 32px; }
.site-footer .sig { margin: .9rem 0 .4rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.site-footer .bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; color: var(--text-3); font-size: .85rem; }
.theme-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }

/* ---------- Bouton Précommander collant sur téléphone ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: none; align-items: center; gap: .8rem; transform: translateY(110%); transition: transform .35s var(--ease); }
.sticky-cta .p { font-size: .85rem; line-height: 1.25; }
.sticky-cta .p b { display: block; font-size: 1rem; }
.sticky-cta .btn { margin-left: auto; flex: none; padding: .7rem 1.2rem; }
@media (max-width: 899px) { .sticky-cta { display: flex; } .sticky-cta.on { transform: none; } body.has-sticky { padding-bottom: 76px; } }

/* ---------- Animations douces ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
}

/* ---------- Divers ---------- */
.stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.stat .v { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--abricot-ink); letter-spacing: -.02em; }
.stat .l { font-size: .92rem; color: var(--text-2); margin-top: .4rem; }
.kit { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kit .k { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.kit .k strong { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .2rem; }
.kit .k span { color: var(--text-2); font-size: .95rem; }
img.pos-top { object-position: center top !important; }
.page-hero .visual .photo img.pos-top { transform: scale(1.3); transform-origin: 55% 0; }
.lightbox img { cursor: zoom-out; }
@media print { .topbar, .sticky-cta, .site-header, .cta-final { display: none !important; } }

/* ---------- Modules (accueil et page modules) ---------- */
.tiles.modules { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tile.soon { border-style: dashed; }
.tile.soon .im img { filter: saturate(.85); }
.tile .more { display: inline-block; margin-top: .6rem; font-weight: 800; font-size: .92rem; text-decoration: none; }
.tile .more:hover { text-decoration: underline; }
.tile[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.modnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.modnav a { font-size: .85rem; font-weight: 800; text-decoration: none; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; }
.modnav a:hover { color: var(--abricot-ink); border-color: var(--abricot); }
.modnav a.soon { border-style: dashed; }
.modlist { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.feature.modf { scroll-margin-top: calc(var(--header-h) + 1rem); }
.feature.modf .ft .pill { margin-bottom: .7rem; }
.feature.modf .ft h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.feature.modf .ft .lead { font-size: 1.05rem; }
.feature.modf.soon .fx .mock-tablet { outline: 2px dashed var(--soleil); outline-offset: 6px; }
.gallery.mods { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: 1.2rem 0 0; }
.gallery.mods figure { cursor: zoom-in; }
.gallery.mods img { cursor: zoom-in; }
.gallery.mods figcaption { font-size: .78rem; padding: .4rem .6rem; }
.gallery.mods.big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 0; }
.gallery.mods.big figcaption { font-size: .88rem; padding: .6rem .8rem; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; color: #b42318; margin: 0; }
.form-error.show { display: block; }