/* ============================================================
   WEDORIA VITRINE — piste C « Atelier clair » (validée le 25/10/2026)
   La vitrine prolonge l'app « Rail » : blanc, onyx, or en touches,
   sans-serif uniquement (Geist titres, Instrument Sans texte), cartes
   noires à plat, cartes blanches soulevées par une ombre nette.
   Boutons en rectangles arrondis (10 px), JAMAIS en pilule.
   Chargée seule par templates/marketing/layout.html.twig (pas de Bootstrap).
   ============================================================ */

/* ── Polices locales (mêmes fichiers que l'app) ───────────── */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/files/edc7ad59a4fc0cd4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/files/e6da4874bc093e79.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/files/11aa495c85f84b65.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/files/a53201c811102f28.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F; }

/* ── Jetons ────────────────────────────────────────────────── */
:root {
  --blanc: #FFFFFF;
  --onyx: #1B1816;
  --onyx-2: #2A2522;
  --or: #C9A063;
  --or-texte: #8A6730;        /* or lisible sur fond clair (contraste ≥ 4,5:1 sur --or-pale) */
  --or-pale: #F6EBDA;
  --papier: #F6F3EE;          /* surfaces touchées, jamais en fond de page */
  --filet: #E7E2DA;
  --filet-2: #D8D1C6;
  --texte-2: #4A443E;         /* paragraphes secondaires */
  --gris: #6B645B;            /* légendes (contraste 5,6:1 sur blanc) */
  --gris-nuit: #B9B0A4;       /* texte secondaire sur onyx */
  --ok: #2F7A4E; --ok-bg: #E7F3EA;
  --danger: #B0392E; --danger-bg: #FBE9E5;
  --ombre: 0 10px 30px -14px rgba(0,0,0,.18);
  --ombre-forte: 0 22px 44px -18px rgba(0,0,0,.30);
  --r-carte: 18px;
  --r-btn: 10px;
  --r-chip: 8px;
  --display: 'Geist', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --texte: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter: 56px;
  --max: 1328px;
  --entete: 80px;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
html, body { margin: 0; }
body {
  background: var(--blanc);
  color: var(--onyx);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--onyx); outline-offset: 3px; border-radius: 4px; }
.sombre :focus-visible, .final-card :focus-visible { outline-color: #fff; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-etroit { max-width: calc(860px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--onyx); color: #fff; padding: 10px 16px; border-radius: var(--r-btn); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ── Typographie ───────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; margin: 0; color: var(--onyx); }
h1 { font-size: 72px; line-height: 1.02; letter-spacing: -0.037em; text-wrap: balance; }
h2 { font-size: 60px; line-height: 1.02; text-wrap: balance; }
h3 { font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
h4 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: 19.5px; line-height: 1.55; color: var(--texte-2); }
.texte-2 { color: var(--texte-2); }
.legende { font-size: 14px; color: var(--gris); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--gris); }
.souligne { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: .085em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.chiffre { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Lien souligné or : le soulignement ne porte que sur le libellé, jamais sur l'icône */
.lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.lien > span { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lien .i { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.lien:hover .i { transform: translateX(4px); }

/* ── Icônes (sprite templates/marketing/_partials/icons.html.twig) ── */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 15px; height: 15px; stroke-width: 2.2; }

/* ── Boutons : rayon 10, jamais de pilule ──────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: var(--r-btn);
  font-family: var(--texte); font-weight: 600; font-size: 16px; line-height: 1.2; border: 1px solid transparent; transition: background .25s ease, border-color .25s ease, color .25s ease; white-space: nowrap; }
.btn .i { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.btn:hover .i.fleche { transform: translateX(4px); }
.btn-noir { background: var(--onyx); color: #fff; }
.btn-noir:hover { background: #000; }
.btn-blanc { background: #fff; color: var(--onyx); border-color: var(--filet-2); }
.btn-blanc:hover { border-color: var(--onyx); }
.btn-ghost { background: transparent; color: #fff; border-color: #5A524C; }
.btn-ghost:hover { border-color: #fff; }
.btn-sm { min-height: 40px; padding: 0 15px; font-size: 15px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Pastilles et statuts (rayon 8 : ce ne sont pas des boutons) ── */
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--or); flex: none; }
.pastille-vive { animation: pastille 2.4s ease-in-out infinite; }
@keyframes pastille { 0%,100% { box-shadow: 0 0 0 0 rgba(201,160,99,.55); } 50% { box-shadow: 0 0 0 6px rgba(201,160,99,0); } }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-chip); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-or { background: var(--or-pale); color: var(--or-texte); }
.chip-mute { background: var(--papier); color: var(--gris); }
.chip-nuit { background: #2C2724; color: #fff; }

/* ── Photos, fragments d'interface, captures ───────────────── */
.ph { position: relative; overflow: hidden; border-radius: var(--r-carte); background: var(--papier); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.lift { box-shadow: var(--ombre); }
.cut { box-shadow: 0 0 0 8px var(--blanc), var(--ombre-forte); } /* la photo « mord » dans ce qu'elle recouvre */
.frag { background: #fff; border-radius: var(--r-carte); box-shadow: var(--ombre-forte); border: 1px solid rgba(231,226,218,.7); }
.cap { position: relative; overflow: hidden; border-radius: var(--r-carte); background: #fff; border: 1px solid var(--filet); box-shadow: var(--ombre-forte); }
.cap img { width: 100%; height: auto; }
.phone { background: var(--onyx); border-radius: 38px; padding: 7px; box-shadow: var(--ombre-forte); }
.phone .scr { border-radius: 31px; overflow: hidden; background: #fff; }
.phone .scr img { width: 100%; height: auto; }
.curseur { pointer-events: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border-radius: var(--r-chip); background: rgba(255,255,255,.94); font-size: 12.5px; font-weight: 600; color: var(--onyx); }

/* Fragments récurrents */
.seen { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; }
.seen .tick { width: 30px; height: 30px; border-radius: 9px; background: var(--onyx); color: #fff; display: grid; place-items: center; flex: none; }
.seen span { font-size: 14px; font-weight: 500; line-height: 1.3; }
.seen span em { font-style: normal; color: var(--gris); display: block; font-size: 12.5px; font-weight: 400; }
.rule { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; font-size: 14.5px; font-weight: 500; }
.rule .tick, .tick-ok { width: 28px; height: 28px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; flex: none; }

/* ── En-tête ───────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.top.is-scrolled { border-bottom-color: var(--filet); }
.top .wrap { height: var(--entete); display: flex; align-items: center; gap: 40px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; margin-left: 20px; font-size: 15.5px; font-weight: 500; }
.nav > a, .nav-menu > button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.nav > a::after, .nav-menu > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav > a:hover::after, .nav > a[aria-current="page"]::after, .nav-menu > button:hover::after, .nav-menu.is-current > button::after { transform: scaleX(1); }
.nav-menu { position: relative; }
.nav-menu > button .i { width: 14px; height: 14px; transition: transform .25s; }
.nav-menu.is-open > button .i { transform: rotate(180deg); }
.nav-panel { position: absolute; left: -22px; top: calc(100% + 6px); width: 380px; padding: 10px; background: #fff; border: 1px solid var(--filet); border-radius: var(--r-carte); box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.nav-menu.is-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.nav-panel a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--papier); }
.nav-panel a img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.nav-panel a b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.nav-panel a small { display: block; font-size: 13px; color: var(--gris); line-height: 1.35; }
.nav-panel .tous { display: flex; justify-content: space-between; margin-top: 4px; padding: 12px 10px 6px; border-top: 1px solid var(--filet); border-radius: 0; font-size: 14.5px; font-weight: 600; }
.nav-panel .tous:hover { background: none; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15.5px; font-weight: 500; }
.top-r .login { min-height: 44px; display: inline-flex; align-items: center; }
.burger { display: none; width: 44px; height: 44px; border-radius: var(--r-btn); border: 1px solid var(--filet); place-items: center; }

/* Menu mobile plein écran */
.menu-mobile { position: fixed; inset: 0; z-index: 80; background: #fff; display: flex; flex-direction: column; padding: 0 16px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.menu-mobile.is-open { opacity: 1; visibility: visible; transition: opacity .2s; }
.menu-mobile .mm-head { display: flex; align-items: center; justify-content: space-between; height: 64px; flex: none; }
.menu-mobile nav { flex: 1; padding: 8px 0 24px; }
.menu-mobile details { border-bottom: 1px solid var(--filet); }
.menu-mobile summary, .menu-mobile .mm-lien { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; list-style: none; cursor: pointer; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile details[open] summary .i { transform: rotate(180deg); }
.menu-mobile .mm-lien { border-bottom: 1px solid var(--filet); }
.menu-mobile details ul { list-style: none; padding: 0 0 12px; }
.menu-mobile details li a { display: flex; align-items: center; min-height: 48px; font-size: 17px; color: var(--texte-2); }
.menu-mobile .mm-pied { position: sticky; bottom: 0; background: #fff; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 10px; flex: none; }
.menu-mobile .mm-pied .btn { width: 100%; }
body.menu-ouvert { overflow: hidden; }

/* ── Sections ──────────────────────────────────────────────── */
section { position: relative; }
.sec { padding-top: 150px; }
.sec-tight { padding-top: 110px; }
.sec-head { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: end; }
.sec-head p { font-size: 18px; color: var(--texte-2); }
.sec-head h2 { margin-top: 18px; }
.sombre { background: var(--onyx); color: #fff; }
.sombre h2, .sombre h3, .sombre h4 { color: #fff; }

/* Fil d'Ariane */
.fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--gris); padding-top: 28px; list-style: none; }
.fil li + li::before { content: "›"; margin-right: 8px; color: var(--filet-2); }
.fil a:hover { color: var(--onyx); }

/* En-tête de page (pages intérieures) */
.page-hero { padding-top: 48px; }
.page-hero .ph-grid { display: grid; grid-template-columns: 1fr 520px; gap: 72px; align-items: center; }
.page-hero h1 { margin-top: 18px; }
.page-hero .lead { margin-top: 24px; max-width: 620px; }
.page-hero .ctas { margin-top: 32px; }
.page-hero-art { position: relative; min-height: 420px; }

/* Grille de cartes */
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.carte { background: #fff; border: 1px solid var(--filet); border-radius: var(--r-carte); padding: 28px; box-shadow: var(--ombre); }
.carte-plate { box-shadow: none; }
.carte-noire { background: var(--onyx); color: #fff; border-color: var(--onyx); box-shadow: none; }
.carte-noire h3, .carte-noire h4 { color: #fff; }
.carte-noire p { color: #CFC7BC; }
.carte h3 { font-size: 26px; }
.carte h4 + p, .carte h3 + p { margin-top: 10px; color: var(--texte-2); font-size: 16px; }
.carte .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--papier); display: grid; place-items: center; margin-bottom: 18px; color: var(--onyx); }
.carte-noire .ico { background: #2C2724; color: var(--or); }
.carte .lien { margin-top: 18px; }
.carte-creux { border-style: dashed; box-shadow: none; background: transparent; }

/* Liste à coches */
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.checks .ck { width: 22px; height: 22px; border-radius: 7px; background: var(--onyx); color: #fff; display: grid; place-items: center; flex: none; margin-top: 1px; }
.checks .ck .i { width: 13px; height: 13px; stroke-width: 2.6; }
.checks-non .ck { background: var(--papier); color: var(--gris); }

/* Encart (information honnête, limites, mise en garde) */
.encart { display: flex; gap: 16px; padding: 22px 24px; border-radius: var(--r-carte); background: var(--papier); }
.encart .ico { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: grid; place-items: center; flex: none; }
.encart b { display: block; font-weight: 600; }
.encart p { color: var(--texte-2); font-size: 16px; margin-top: 4px; }

/* Chapitres produit (texte + composition) */
.chap { display: grid; grid-template-columns: 400px 1fr; gap: 80px; align-items: center; margin-top: 110px; }
.chap.rev { grid-template-columns: 1fr 400px; }
.chap.rev .chap-txt { order: 2; }
.chap-num { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--gris); margin-bottom: 18px; }
.chap-num i { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--onyx); }
.chap-txt p { font-size: 17.5px; color: var(--texte-2); margin-top: 18px; }
.chap-txt .lien { margin-top: 24px; }
.comp { position: relative; width: 100%; }

/* ── Formules (accueil, tarifs, pages métier) ─────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--filet); border-radius: var(--r-carte); padding: 30px 28px; box-shadow: var(--ombre); }
.plan.is-featured { background: var(--onyx); color: #fff; border-color: var(--onyx); }
.plan.is-featured .plan-name, .plan.is-featured .plan-prix { color: #fff; }
.plan.is-featured .plan-pour, .plan.is-featured .plan-ht, .plan.is-featured .plan-quotas li { color: #CFC7BC; }
.plan.is-featured .plan-quotas li { border-color: #3A3430; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-name { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--onyx); }
.plan-pour { margin-top: 8px; font-size: 15.5px; color: var(--texte-2); min-height: 48px; }
.plan-prix { margin-top: 22px; font-family: var(--display); font-weight: 600; font-size: 52px; letter-spacing: -0.04em; line-height: 1; color: var(--onyx); font-variant-numeric: tabular-nums; }
.plan-prix small { font-size: 17px; font-weight: 500; letter-spacing: 0; }
.plan-ht { margin-top: 8px; font-size: 14px; color: var(--gris); min-height: 21px; }
.plan-quotas { list-style: none; margin: 22px 0 26px; display: grid; gap: 0; }
.plan-quotas li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--filet); font-size: 15.5px; color: var(--texte-2); }
.plan-quotas li b { color: inherit; font-weight: 600; }
.plan .btn { margin-top: auto; width: 100%; }
.plan.is-featured .btn-noir { background: #fff; color: var(--onyx); }
.plan.is-featured .btn-noir:hover { background: var(--papier); }
.bascule { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--papier); gap: 4px; }
.bascule button { min-height: 40px; padding: 0 16px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--gris); }
.bascule button[aria-pressed="true"] { background: #fff; color: var(--onyx); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.bascule .chip { margin-left: 4px; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 16px 0; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--filet); display: grid; place-items: center; flex: none; transition: transform .25s, background .25s; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--onyx); color: #fff; border-color: var(--onyx); }
.faq details p { padding: 0 60px 24px 0; color: var(--texte-2); font-size: 17px; }

/* ── Formulaires ───────────────────────────────────────────── */
.champ { display: grid; gap: 6px; }
.champ label { font-size: 14.5px; font-weight: 600; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--filet-2); border-radius: var(--r-btn); background: #fff; font: inherit; font-size: 16px; color: var(--onyx); }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--onyx); box-shadow: 0 0 0 3px rgba(27,24,22,.08); }
.champ .aide { font-size: 13.5px; color: var(--gris); }
.champ-erreur { font-size: 14px; color: var(--danger); }
.coche { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--texte-2); }
.coche input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--onyx); flex: none; }
.flash { padding: 14px 18px; border-radius: var(--r-btn); font-weight: 500; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-erreur { background: var(--danger-bg); color: var(--danger); }

/* Demande d'accès (bêta) : e-mail + métier sur une ligne */
.acces-form { display: grid; grid-template-columns: 1fr 220px auto; gap: 10px; align-items: end; }
.acces-form .champ label { color: inherit; }
.acces-form .coche { grid-column: 1 / -1; }
.final-card .champ input, .final-card .champ select { border-color: #5A524C; background: #24201D; color: #fff; }
.final-card .champ input::placeholder { color: #8E867C; }
.final-card .coche { color: #CFC7BC; }

/* ── Appel final ───────────────────────────────────────────── */
.final { margin-top: 170px; }
.final-card { position: relative; background: var(--onyx); color: #fff; border-radius: 24px; padding: 80px 72px; display: grid; grid-template-columns: 1fr 420px; gap: 48px; min-height: 460px; }
.final-card h2 { font-size: 64px; color: #fff; margin-top: 18px; }
.final-card p { font-size: 18.5px; color: #CFC7BC; margin-top: 22px; max-width: 520px; }
.final-card .ctas, .final-card .acces-form { margin-top: 32px; }
.final-card .eyebrow { color: var(--gris-nuit); }
.final-art { position: relative; }
.final-art .fa1 { position: absolute; right: 0; top: -140px; width: 300px; height: 380px; }
.final-art .fa2 { position: absolute; left: 0; top: 140px; width: 250px; height: 200px; z-index: 2; box-shadow: 0 0 0 8px var(--onyx), var(--ombre-forte); }
.final-art .fa3 { position: absolute; right: 150px; top: 196px; z-index: 3; }
.mini-ok { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; color: var(--onyx); font-size: 14.5px; font-weight: 500; }

/* ── Pied de page ──────────────────────────────────────────── */
.pied { margin-top: 120px; border-top: 1px solid var(--filet); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 56px; }
.pied-grille .logo img { height: 24px; }
.pied-grille > div:first-child p { font-size: 15px; color: var(--gris); margin-top: 16px; max-width: 300px; }
.pied-titre { margin: 0 0 14px; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pied-grille ul { list-style: none; display: grid; gap: 4px; font-size: 15px; color: var(--texte-2); }
.pied-grille ul a { display: inline-flex; align-items: center; min-height: 32px; }
.pied-grille ul a:hover { color: var(--onyx); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }
.pied-bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; padding-bottom: 34px; border-top: 1px solid var(--filet); font-size: 13.5px; color: var(--gris); }
.pied-editeur { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.akyana { display: inline-flex; align-items: center; min-height: 32px; opacity: .9; transition: opacity .2s; }
.akyana:hover, .akyana:focus-visible { opacity: 1; }
.akyana img { height: 20px; width: auto; }
.pied-france { display: inline-flex; align-items: center; gap: 8px; }
.drapeau { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px var(--filet); flex: none; }

/* ── Texte long (pages légales, guides) ───────────────────── */
.prose { font-size: 17px; color: var(--texte-2); }
.prose h2 { font-size: 34px; margin: 56px 0 16px; color: var(--onyx); }
.prose h3 { font-size: 23px; margin: 36px 0 10px; color: var(--onyx); }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--onyx); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--onyx); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.prose th { color: var(--onyx); font-weight: 600; }
.prose .maj { font-size: 14px; color: var(--gris); }

/* ── Tableau comparatif ────────────────────────────────────── */
.tableau { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tableau th, .tableau td { padding: 14px 16px; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.tableau thead th { font-family: var(--display); font-size: 16px; font-weight: 600; }
.tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Apparition au défilement (jamais sur le premier écran) ── */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   ACCUEIL
   ============================================================ */
.hero { position: relative; padding-top: 52px; padding-bottom: 40px; }
.hero h1 { font-size: 90px; line-height: 1; position: relative; z-index: 3; text-wrap: initial; }
.hero h1 .l { display: block; white-space: nowrap; }

.hero-low { display: grid; grid-template-columns: 500px 1fr; gap: 64px; margin-top: 38px; }
.hero-txt .lead { max-width: 470px; }
.hero-txt .ctas { margin-top: 30px; }
.sign { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--filet); max-width: 470px; }
.sign .face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; background: var(--papier); }
.sign .face img { width: 100%; height: 100%; object-fit: cover; }
.sign p { font-size: 15px; line-height: 1.45; color: var(--gris); }
.sign p b { color: var(--onyx); font-weight: 600; }

.hero-art { position: relative; height: 430px; }
.hero-art .a-main { position: absolute; left: 30px; top: 6px; width: 420px; height: 300px; }
.hero-art .a-flor { position: absolute; right: 0; top: -262px; width: 262px; height: 372px; z-index: 1; }
.hero-art .a-chef { position: absolute; left: 400px; top: 168px; width: 250px; height: 186px; z-index: 2; }
.hero-art .a-quote { position: absolute; left: -14px; top: 252px; width: 356px; z-index: 4; }
.a-quote .q-cur { position: absolute; left: calc(100% - 42px); top: 38px; z-index: 6; animation: drift 5s ease-in-out infinite; }
.hero-art .a-seen { position: absolute; right: -6px; top: 352px; z-index: 5; }
/* Entre 901 et 1339 px, le titre (912 px à 90 px de corps) ne laisse plus la
   place à la photo qui remonte à sa droite : le collage reste dans sa colonne,
   en proportions de la colonne, sans rien qui dépasse ni chevauche le texte. */
@media (min-width: 901px) and (max-width: 1339px) {
  .hero-low { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: start; }
  .hero-art { height: auto; aspect-ratio: 1 / 0.9; margin-top: 6px; }
  .hero-art .a-main { left: 0; top: 7%; width: 63%; height: 50%; }
  .hero-art .a-flor { right: 0; top: 0; width: 39%; height: 55%; }
  .hero-art .a-chef { left: auto; right: 4%; top: 51%; width: 42%; height: 31%; }
  .hero-art .a-quote { left: 0; top: 60%; width: min(356px, 78%); }
  .hero-art .a-seen { display: none; }
}
/* Tablette (901-1023 px) : la colonne serait trop étroite pour le collage, qui
   passe sous le texte, sur toute la largeur ; la barre passe au bouton menu. */
@media (min-width: 901px) and (max-width: 1023px) {
  .hero-low { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-txt .lead, .sign { max-width: 600px; }
  .hero-art { aspect-ratio: 1 / 0.54; max-width: 760px; margin-top: 0; }
  .nav, .top-r .login { display: none; }
  .burger { display: grid; }
}
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,-4px); } }

.q-card { padding: 16px 18px; }
.q-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--gris); }
.q-line { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--filet); }
.q-line .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--papier); display: grid; place-items: center; flex: none; }
.q-line b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.q-line small { display: block; font-size: 13px; color: var(--gris); }
.q-line .amt { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }

/* Métiers */
.metiers { display: grid; grid-template-columns: 500px 1fr; gap: 72px; margin-top: 64px; align-items: start; }
.m-art { position: relative; height: 640px; }
.m-art .m-big { position: absolute; left: 0; top: 0; width: 440px; height: 560px; }
.m-art .m-frag { position: absolute; right: 0; bottom: 0; width: 290px; z-index: 2; }
.m-list { list-style: none; }
.m-row { position: relative; border-bottom: 1px solid var(--filet); transition: background .25s, box-shadow .25s, border-radius .25s; }
.m-row:first-child { border-top: 1px solid var(--filet); }
.m-row > a, .m-row > div { display: grid; grid-template-columns: 72px 1fr 40px; gap: 22px; align-items: center; padding: 18px 20px; }
.m-row .th { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; }
.m-row .th img { width: 100%; height: 100%; object-fit: cover; }
.m-row h3 { font-size: 25px; letter-spacing: -0.025em; line-height: 1.15; display: flex; align-items: center; gap: 10px; }
.m-row p { font-size: 15.5px; color: var(--gris); margin-top: 4px; line-height: 1.45; max-width: 560px; }
.m-row .go { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--filet); display: grid; place-items: center; color: var(--onyx); transition: all .25s; }
.m-row:has(> a:hover), .m-row:has(> a:focus-visible) { background: #fff; border-radius: var(--r-carte); box-shadow: var(--ombre); border-color: transparent; z-index: 2; }
.m-row:has(> a:hover) + .m-row, .m-row:has(> a:focus-visible) + .m-row { border-top-color: transparent; }
.m-row > a:hover .go, .m-row > a:focus-visible .go { background: var(--onyx); color: #fff; border-color: var(--onyx); }
.m-row > a:focus-visible { outline-offset: -2px; border-radius: var(--r-carte); }
.gal-mini { padding: 14px; }
.gal-mini .gm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gal-mini .gm-head b { font-family: var(--display); font-size: 16px; letter-spacing: -0.01em; }
.gal-mini .grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 86px 86px; gap: 6px; }
.gal-mini .grid div { border-radius: 10px; overflow: hidden; }
.gal-mini .grid div:first-child { grid-row: span 2; }
.gal-mini .grid img { width: 100%; height: 100%; object-fit: cover; }
.gal-mini .gm-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--gris); }

/* Compositions produit de l'accueil */
.c1 { aspect-ratio: 848 / 580; }
.c1 .cap { position: absolute; left: 0; top: 0; width: 100%; }
.c1 .p-card { position: absolute; left: -44px; bottom: 0; width: 34%; aspect-ratio: 3 / 3.6; z-index: 3; }
.c1 .drag { position: absolute; left: 44%; top: 71%; z-index: 4; transform: rotate(-3deg); }
.guest { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 8px; background: #fff; border-radius: 12px; box-shadow: var(--ombre-forte); border: 1px solid var(--filet); font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.guest .ini { width: 30px; height: 30px; border-radius: 8px; background: var(--or-pale); color: var(--or-texte); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; }
.drag .cur { position: absolute; right: -16px; bottom: -22px; }
.c1 .t-chip { position: absolute; right: -18px; bottom: 34px; z-index: 4; }
.c2 { aspect-ratio: 848 / 640; }
.c2 .p-big { position: absolute; left: 0; top: 4%; width: 68%; height: 82%; }
.c2 .phone { position: absolute; right: 4%; top: 0; width: 34%; z-index: 3; }
.c2 .selfie { position: absolute; left: 34%; bottom: 0; z-index: 4; width: 318px; }
.selfie-in { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; }
.selfie-in .ring { width: 54px; height: 54px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--or) 0 72%, var(--filet) 72% 100%); flex: none; }
.selfie-in .ring span { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid #fff; }
.selfie-in .ring img { width: 100%; height: 100%; object-fit: cover; }
.selfie-in b { display: block; font-size: 15.5px; line-height: 1.3; }
.selfie-in small { display: block; font-size: 13px; color: var(--gris); }
.c2 .heart { position: absolute; left: 18px; top: calc(4% + 18px); z-index: 4; }
.c3 { aspect-ratio: 848 / 640; }
.c3 .p-toast { position: absolute; left: 0; top: 10%; width: 40%; height: 74%; }
.c3 .cap { position: absolute; left: 22%; top: 0; width: 58%; }
.c3 .phone { position: absolute; right: 0; top: 16%; width: 27%; z-index: 3; }
.c3 .notif { position: absolute; left: 5%; bottom: 9%; z-index: 4; width: 330px; }

/* Fondateur */
.fond { display: grid; grid-template-columns: 560px 1fr; gap: 96px; align-items: center; }
.f-art { position: relative; height: 700px; }
.f-art .f-main { position: absolute; left: 0; top: 0; width: 500px; height: 640px; }
.f-art .f-slot { position: absolute; left: 18px; top: 18px; z-index: 2; }
.f-art .rec { position: absolute; right: 0; bottom: 0; z-index: 3; width: 300px; }
.rec-in { background: var(--onyx); color: #fff; border-radius: var(--r-carte); padding: 18px 20px; box-shadow: var(--ombre-forte); }
.rec-in .r1 { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--gris-nuit); }
.rec-in .r1 span { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-family: var(--display); letter-spacing: .02em; }
.rec-in b { display: block; margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; }
.rec-in small { display: block; color: var(--gris-nuit); font-size: 13.5px; margin-top: 2px; }
.rec-in .bar { margin-top: 14px; height: 4px; border-radius: 4px; background: #3A3430; overflow: hidden; }
.rec-in .bar i { display: block; width: 62%; height: 100%; background: var(--or); }
.f-txt h2 { font-size: 52px; line-height: 1.06; }
.f-txt p { font-size: 18.5px; color: var(--texte-2); margin-top: 24px; max-width: 560px; }
.f-sig { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.f-sig .line { width: 36px; height: 2px; background: var(--or); }
.f-sig b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.f-sig small { display: block; font-size: 14px; color: var(--gris); }

/* Tarifs en bref + FAQ sur l'accueil */
.bref { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.bref-plans { display: grid; gap: 12px; margin-top: 32px; }
.bref-plan { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center; padding: 18px 22px; border: 1px solid var(--filet); border-radius: var(--r-carte); background: #fff; }
.bref-plan.is-featured { background: var(--onyx); border-color: var(--onyx); color: #fff; }
.bref-plan b { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.bref-plan small { grid-column: 1; font-size: 14.5px; color: var(--gris); }
.bref-plan.is-featured small { color: #CFC7BC; }
.bref-plan .prix { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bref-plan .prix small { display: block; font-family: var(--texte); font-size: 13px; letter-spacing: 0; font-weight: 500; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1180px) {
  :root { --gutter: 40px; }
  .nav { gap: 22px; margin-left: 4px; }
  .top .wrap { gap: 24px; }
  .hero h1 { font-size: 74px; }
  .pied-grille { grid-template-columns: repeat(3, 1fr); }
  .pied-grille > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --gutter: 16px; --entete: 64px; }
  body { font-size: 16px; }
  .top .wrap { gap: 12px; }
  .logo img { height: 21px; }
  .nav, .top-r .login { display: none; }
  .top-r { gap: 8px; }
  .top-r .btn { min-height: 44px; padding: 0 13px; font-size: 14.5px; }
  .burger { display: grid; }
  h1 { font-size: 44px; line-height: 1.02; letter-spacing: -0.04em; }
  h2 { font-size: 38px; line-height: 1.06; }
  h3 { font-size: 28px; }
  .lead { font-size: 17.5px; }
  .sec { padding-top: 96px; }
  .sec-tight { padding-top: 72px; }
  .sec-head { grid-template-columns: 1fr; gap: 18px; }
  .sec-head p { font-size: 16.5px; }
  .page-hero { padding-top: 24px; }
  .page-hero .ph-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero-art { min-height: 300px; }
  .ctas .btn { flex: 1 1 auto; }
  .grille, .grille-2, .grille-4 { grid-template-columns: 1fr; gap: 14px; }
  .carte { padding: 22px; }
  .chap, .chap.rev { grid-template-columns: 1fr; gap: 34px; margin-top: 80px; }
  .chap.rev .chap-txt { order: 0; }
  .chap-txt p { font-size: 16.5px; }
  .plans { grid-template-columns: 1fr; gap: 14px; }
  .plan-pour { min-height: 0; }
  .faq summary { font-size: 18px; min-height: 64px; }
  .faq details p { padding-right: 0; font-size: 16px; }
  .acces-form { grid-template-columns: 1fr; }
  .acces-form .btn { width: 100%; }
  .final { margin-top: 110px; }
  .final-card { grid-template-columns: 1fr; padding: 40px 22px 36px; gap: 0; border-radius: 18px; min-height: 0; }
  .final-card h2 { font-size: 38px; }
  .final-card p { font-size: 16.5px; }
  .final-art { height: 300px; margin-top: 40px; }
  .final-art .fa1 { top: 0; width: 56%; height: 260px; }
  .final-art .fa2 { top: 90px; width: 52%; height: 160px; }
  .final-art .fa3 { right: 0; top: auto; bottom: -6px; }
  .pied { margin-top: 80px; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-top: 44px; }
  .pied-grille ul a { min-height: 44px; }
  .pied-bas { flex-direction: column; align-items: flex-start; gap: 6px; }
  .akyana { min-height: 44px; }
  .prose h2 { font-size: 28px; margin-top: 44px; }
  .encart { flex-direction: column; }

  /* Accueil */
  .hero { padding-top: 30px; }
  .hero h1 { font-size: 46px; line-height: 1; letter-spacing: -0.04em; }
  .hero h1 .l { white-space: normal; display: inline; }
  .hero h1 .l3 { display: block; margin-top: 20px; }
  .hero h1 .souligne { white-space: nowrap; }
                .hero-low { grid-template-columns: 1fr; gap: 36px; margin-top: 26px; }
  .sign { margin-top: 30px; }
  .hero-art { height: 446px; }
  .hero-art .a-main { left: 0; top: 0; width: 68%; height: 224px; }
  .hero-art .a-flor { right: 0; top: 34px; width: 36%; height: 206px; }
  .hero-art .a-chef { left: 32%; top: 196px; width: 50%; height: 132px; }
  .hero-art .a-quote { left: 0; top: 318px; width: 100%; }
  .hero-art .a-seen { display: none; }
  .metiers { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .m-art { height: 430px; }
  .m-art .m-big { width: 82%; height: 360px; }
  .m-art .m-frag { width: 250px; }
  .gal-mini .grid { grid-template-rows: 70px 70px; }
  .m-row > a, .m-row > div { grid-template-columns: 56px 1fr; gap: 14px; padding: 16px 12px; }
  .m-row .th { width: 56px; height: 56px; }
  .m-row .go { display: none; }
  .m-row h3 { font-size: 20px; }
  .m-row p { font-size: 14.5px; }
  .c1 { aspect-ratio: auto; height: 390px; }
  .c1 .p-card { left: 0; width: 42%; bottom: 0; }
  .c1 .drag { left: 30%; top: 52%; transform: rotate(-3deg) scale(.86); transform-origin: left top; }
  .c1 .t-chip { right: 0; bottom: 64px; transform: scale(.86); transform-origin: right bottom; }
  .c2 { aspect-ratio: auto; height: 520px; }
  .c2 .p-big { width: 74%; height: 330px; top: 30px; }
  .c2 .phone { width: 46%; top: 120px; right: 0; border-radius: 30px; padding: 5px; }
  .c2 .phone .scr { border-radius: 25px; }
  .c2 .selfie { left: 0; width: 290px; transform: scale(.92); transform-origin: left bottom; }
  .c2 .heart { left: 8px; top: 0; }
  .c3 { aspect-ratio: auto; height: 500px; }
  .c3 .p-toast { width: 46%; height: 260px; top: 0; }
  .c3 .cap { left: 14%; top: 70px; width: 70%; }
  .c3 .phone { width: 40%; top: 150px; border-radius: 30px; padding: 5px; }
  .c3 .phone .scr { border-radius: 25px; }
  .c3 .notif { left: 0; width: 300px; transform: scale(.92); transform-origin: left bottom; bottom: 0; }
  .fond { grid-template-columns: 1fr; gap: 40px; }
  .f-art { height: 500px; }
  .f-art .f-main { width: 88%; height: 440px; }
  .f-art .rec { width: 250px; }
  .f-txt h2 { font-size: 34px; }
  .f-txt p { font-size: 16.5px; }
  .bref { grid-template-columns: 1fr; gap: 56px; }
  .bref-plan .prix { font-size: 26px; }
}

/* ============================================================
   MICRO-ANIMATIONS (25/10/2026)
   Uniquement transform/opacity (et les propriétés individuelles
   translate/scale, qui se composent avec les transform de position déjà
   posés sur les fragments). Tout est coupé si le visiteur demande moins de
   mouvement. La photo principale du héros ne s'efface jamais (LCP).
   ============================================================ */
/* Trait or du héros : un pseudo-élément plutôt qu'un soulignement, pour pouvoir le dessiner */
.hero h1 .souligne { text-decoration: none; position: relative; }
.hero h1 .souligne::after { content: ""; position: absolute; left: 0; right: 0; bottom: .075em; height: .085em; background: var(--or); transform-origin: left center; }

@property --anneau { syntax: '<percentage>'; inherits: false; initial-value: 72%; }
.selfie-in .ring { background: conic-gradient(var(--or) 0 var(--anneau), var(--filet) var(--anneau) 100%); }

@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }

  @keyframes monte { from { opacity: .01; translate: 0 .5em; } }
  @keyframes pose { from { opacity: 0; translate: 0 22px; scale: .97; } }
  @keyframes pose-net { from { translate: 0 22px; scale: .97; } }
  @keyframes toast { from { opacity: 0; translate: 18px 0; } }
  @keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
  @keyframes trait { from { scale: 0 1; } }
  @keyframes glisse { 0%, 18% { translate: 0 0; } 48%, 62% { translate: -26px -14px; } 92%, 100% { translate: 0 0; } }
  @keyframes bascule { from { opacity: 0; translate: 0 .3em; } }

  /* ── Entrée du héros de l'accueil ── */
  .hero h1 .l { animation: monte .8s cubic-bezier(.2,.8,.2,1) both; }
  .hero h1 .l:nth-child(2) { animation-delay: .07s; }
  .hero h1 .l:nth-child(3) { animation-delay: .14s; }
  .hero h1 .souligne::after { animation: trait .9s .6s cubic-bezier(.65,0,.25,1) both; }
  .hero-txt > * { animation: monte .7s cubic-bezier(.2,.8,.2,1) both; }
  .hero-txt > :nth-child(1) { animation-delay: .22s; }
  .hero-txt > :nth-child(2) { animation-delay: .3s; }
  .hero-txt > :nth-child(3) { animation-delay: .38s; }
  .hero-art > .ph { animation: pose .9s cubic-bezier(.2,.8,.2,1) both; }
  .hero-art > .a-flor { animation-delay: .12s; }
  .hero-art > .a-main { animation-name: pose-net; animation-delay: .2s; }
  .hero-art > .a-chef { animation-delay: .32s; }
  .hero-art > .a-quote { animation: pose .8s .55s cubic-bezier(.2,.8,.2,1) both, flotte 7s 1.6s ease-in-out infinite; }
  .hero-art > .a-seen { animation: toast .7s 1.2s cubic-bezier(.2,.8,.2,1) both, flotte 6s 2.2s ease-in-out infinite; }

  /* ── Entrée des autres pages (en-têtes de page, pages métier, page d'attente) ── */
  :is(.page-hero, .mt-hero, .attente) :is(.eyebrow, h1, .lead, .ctas, .attente-form) { animation: monte .7s cubic-bezier(.2,.8,.2,1) both; }
  :is(.page-hero, .mt-hero, .attente) h1 { animation-delay: .06s; }
  :is(.page-hero, .mt-hero, .attente) .lead { animation-delay: .14s; }
  :is(.page-hero, .mt-hero, .attente) :is(.ctas, .attente-form) { animation-delay: .22s; }
  :is(.page-hero, .mt-hero) :is(.ph, .cap, .phone) { animation: pose .9s .18s cubic-bezier(.2,.8,.2,1) both; }
  :is(.page-hero, .mt-hero) .frag { animation: pose .8s .5s cubic-bezier(.2,.8,.2,1) both; }
  .attente-art > .ph { animation: pose .9s .15s cubic-bezier(.2,.8,.2,1) both; }
  .attente-art > .at-1 { animation-name: pose-net; }
  .attente-art > .at-2 { animation-delay: .28s; }
  .attente-art > .at-q { animation: pose .8s .5s cubic-bezier(.2,.8,.2,1) both, flotte 7s 1.5s ease-in-out infinite; }
  .attente-art > .at-s { animation: toast .7s 1.1s cubic-bezier(.2,.8,.2,1) both, flotte 6s 2s ease-in-out infinite; }

  /* ── Apparition au défilement : les frères arrivent l'un après l'autre ── */
  .js [data-reveal]:nth-child(2) { transition-delay: .07s; }
  .js [data-reveal]:nth-child(3) { transition-delay: .14s; }
  .js [data-reveal]:nth-child(4) { transition-delay: .21s; }
  .js [data-reveal]:nth-child(5) { transition-delay: .28s; }
  .js [data-reveal]:nth-child(n+6) { transition-delay: .35s; }

  /* Coches : elles se cochent une à une quand le bloc arrive */
  .checks .ck { transition: scale .45s cubic-bezier(.3,1.7,.5,1), opacity .2s; }
  .js [data-reveal]:not(.is-in) .checks .ck { scale: .3; opacity: 0; }
  .checks li:nth-child(1) .ck { transition-delay: .35s; }
  .checks li:nth-child(2) .ck { transition-delay: .5s; }
  .checks li:nth-child(3) .ck { transition-delay: .65s; }
  .checks li:nth-child(n+4) .ck { transition-delay: .8s; }

  /* Plan de table : l'invité glisse vers sa table */
  .c1 .drag { animation: glisse 6s 1s ease-in-out infinite; }
  .c1 .t-chip { transition: opacity .4s .9s, translate .5s .9s cubic-bezier(.2,.8,.2,1); }
  .js .c1:not(.is-in) .t-chip { opacity: 0; translate: 0 10px; }

  /* Galerie : l'anneau du selfie se remplit, le cœur arrive */
  .selfie-in .ring { transition: --anneau 1.4s .6s cubic-bezier(.2,.8,.2,1); }
  .js [data-reveal]:not(.is-in) .selfie-in .ring { --anneau: 0%; }
  .c2 .heart { transition: opacity .3s .9s, scale .5s .9s cubic-bezier(.3,1.7,.5,1); }
  .js .c2:not(.is-in) .heart { opacity: 0; scale: .6; }

  /* Notifications et petites cartes qui arrivent après le reste */
  :is(.c3 .notif, .c2 .selfie, .fa3) { transition: opacity .5s .7s, translate .6s .7s cubic-bezier(.2,.8,.2,1); }
  .js [data-reveal]:not(.is-in) :is(.c3 .notif, .c2 .selfie) { opacity: 0; translate: 0 14px; }
  .js .final-card:not(.is-in) .fa3 { opacity: 0; translate: 0 14px; }
  .c3 .notif { animation: flotte 6s 2s ease-in-out infinite; }

  /* Programme du jour J : la barre de progression se remplit */
  .rec-in .bar i { transform-origin: left center; transition: scale 1.4s .5s cubic-bezier(.2,.8,.2,1); }
  .js [data-reveal]:not(.is-in) .rec-in .bar i { scale: 0 1; }

  /* ── Survols ── */
  .btn { transition: background .25s ease, border-color .25s ease, color .25s ease, translate .2s ease; }
  .btn:hover { translate: 0 -1px; }
  .btn:active { translate: 0 1px; }
  :is(.plan, .bref-plan, .carte:has(a)) { transition: translate .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
  :is(.plan, .carte:has(a)):hover { translate: 0 -3px; box-shadow: var(--ombre-forte); }
  .bref-plan:hover { translate: 0 -2px; }
  .m-row .th img, .nav-panel a img { transition: scale .5s cubic-bezier(.2,.8,.2,1); }
  .m-row > a:hover .th img, .nav-panel a:hover img { scale: 1.07; }
  .faq summary .plus { transition: rotate .3s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s; }

  /* FAQ : ouverture en douceur (navigateurs récents ; ailleurs, ouverture sèche) */
  .faq details::details-content { height: 0; overflow: clip; transition: height .35s cubic-bezier(.2,.8,.2,1), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }

  /* Menu mobile : le contenu descend légèrement à l'ouverture */
  .menu-mobile nav, .menu-mobile .mm-pied { translate: 0 10px; transition: translate .35s cubic-bezier(.2,.8,.2,1); }
  .menu-mobile.is-open nav, .menu-mobile.is-open .mm-pied { translate: 0 0; }

  /* Tarifs : le prix bascule quand on change de période */
  .bascule-anim { display: inline-block; animation: bascule .35s cubic-bezier(.2,.8,.2,1); }
}

/* Parallaxe du collage à la souris (ordinateur seulement) : variables posées par vitrine.js */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 901px) {
  :is(.hero-art, .attente-art) > * { transform: translate3d(calc(var(--mx, 0) * var(--d, 0) * 1px), calc(var(--my, 0) * var(--d, 0) * 1px), 0); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
  .hero-art > .a-flor, .attente-art > .at-3 { --d: -7; }
  .hero-art > .a-main, .attente-art > .at-1 { --d: 5; }
  .hero-art > .a-chef, .attente-art > .at-2 { --d: 11; }
  .hero-art > .a-quote, .attente-art > .at-q { --d: -4; }
  .hero-art > .a-seen, .attente-art > .at-s { --d: 13; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}