/* La vitrine de Marius : blanche et ambrée (lot vitrine-2, 29 sept. 2026, d'après la maquette validée par Tommy).
   Une seule feuille pour toutes les pages ; les polices viennent de fonts/, jamais d'ailleurs. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/SourceSerif4-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600 700;font-display:swap;src:url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:light;
  --blanc:#fff;--fond-2:#f7f7f5;--ligne:#e7e5e0;
  --encre:#1a1d22;--encre-2:#4b525c;--encre-3:#6b727c;
  --ambre:#ffb454;--ambre-vif:#ffa43a;--ambre-fonce:#9a5a00;--ambre-pale:#fff4e2;--sur-ambre:#1a1206;
  --nuit:#0b1022;
  --hdr-h:64px;
  --gutter:clamp(16px,4vw,40px);
  --f-titre:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-texte:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--f-texte);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aller{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--encre);color:#fff;font-weight:600;text-decoration:none}
.aller:focus{top:12px}
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(1140px,100% - 2*var(--gutter));margin-inline:auto}
.etroit{width:min(760px,100% - 2*var(--gutter));margin-inline:auto}
h1,h2,h3{margin:0;font-family:var(--f-titre);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
.kicker{margin:0 0 12px;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ambre-fonce)}

/* Le mot-symbole : « Marius » et son point ambré */
.logo{display:inline-flex;align-items:baseline;gap:.06em;color:inherit;font-family:var(--f-titre);font-weight:700;font-size:1.55rem;line-height:1;letter-spacing:-.01em;text-decoration:none}
.logo .dot{display:inline-block;width:.26em;height:.26em;border-radius:50%;background:var(--ambre)}

/* Les boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:2px solid transparent;border-radius:999px;font:600 1rem/1 var(--f-texte);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn .i{width:18px;height:18px}
.btn-ambre{background:var(--ambre);color:var(--sur-ambre)}
.btn-ambre:hover{background:var(--ambre-vif);transform:translateY(-1px)}
.btn-line{background:transparent;color:inherit;border-color:currentColor}
.btn-line:hover{background:rgba(128,128,128,.12)}
.btn-sm{min-height:42px;padding:0 18px;font-size:.9rem}
/* « Réserver une démo » respire toujours : un halo ambré qui monte et redescend */
.btn-demo{animation:respire 2.6s ease-in-out infinite}
.btn-demo:hover{animation-duration:1.2s}
@keyframes respire{0%,100%{box-shadow:0 0 0 0 rgba(255,164,58,.45),0 8px 18px -10px rgba(255,164,58,.7)}50%{box-shadow:0 0 0 8px rgba(255,164,58,0),0 10px 26px -8px rgba(255,164,58,.9)}}

/* Le numéro de texto : un vrai lien sms: sur téléphone, simplement affiché sur ordinateur */
.texto{color:var(--encre-2);font-size:.95rem}
.texto a{color:var(--encre);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.texto a,.smslien{pointer-events:none;cursor:text}}

/* ---------- L'en-tête ---------- */
.hdr{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--ligne)}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:var(--hdr-h)}
.hdr .logo{margin-right:auto}
.hdr-nav{display:flex;gap:22px;white-space:nowrap}
.hdr-nav a{position:relative;padding-block:6px;color:var(--encre-2);font-weight:500;font-size:.95rem;text-decoration:none}
.hdr-nav a:hover,.hdr-nav a[aria-current="page"]{color:var(--encre)}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ambre);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hdr-nav a:hover::after,.hdr-nav a[aria-current="page"]::after{transform:scaleX(1)}
.lang{font-weight:600;font-size:.85rem;color:var(--encre-2);text-decoration:none}
.menu-btn{display:none;place-items:center;width:44px;height:44px;border:1px solid var(--ligne);border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.menu-btn .i{width:20px;height:20px}
.mobile-nav{border-top:1px solid var(--ligne)}
.mobile-nav .wrap{display:grid;padding-block:6px 12px}
.mobile-nav a{padding:12px 0;border-bottom:1px solid var(--ligne);font-weight:500;text-decoration:none}
.mobile-nav a:last-child{border-bottom:0}
@media (max-width:1060px){.hdr-nav,.hdr .lang{display:none}.menu-btn{display:inline-grid}}
@media (max-width:520px){.hdr .btn-ambre{display:none}}

/* ---------- L'intro de l'accueil : l'aube de « Bonjour » ---------- */
.intro{position:relative;background:var(--nuit);--fg:#f4f1ea}
.js:not(.rm) .intro{height:calc(100vh + 110vh);height:calc(100svh + 110svh)}
.stage{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;height:100vh;height:100svh;min-height:540px;color:var(--fg)}
.js:not(.rm) .stage{position:sticky;top:0;min-height:0}
.sky,.sky>span{position:absolute;inset:0;pointer-events:none}
.sky-night{background:linear-gradient(180deg,#080c1b 0%,#10172e 55%,#1f2544 100%)}
.sky-stars{background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 27% 42%,rgba(255,255,255,.8) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 41% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 58% 31%,rgba(255,255,255,.7) 50%,transparent 51%),radial-gradient(1px 1px at 69% 9%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 83% 26%,rgba(255,255,255,.9) 50%,transparent 51%),radial-gradient(1px 1px at 91% 47%,rgba(255,255,255,.6) 50%,transparent 51%),radial-gradient(1px 1px at 6% 55%,rgba(255,255,255,.6) 50%,transparent 51%),radial-gradient(1px 1px at 36% 62%,rgba(255,255,255,.5) 50%,transparent 51%),radial-gradient(1px 1px at 76% 58%,rgba(255,255,255,.5) 50%,transparent 51%)}
.sky-dawn{opacity:0;background:linear-gradient(180deg,#27305e 0%,#6e5a92 34%,#d98c7a 62%,#ffc27a 82%,#ffe2b0 100%)}
.sky-glow{opacity:0;background:radial-gradient(ellipse 60% 38% at 50% 78%,rgba(255,196,110,.75),rgba(255,196,110,0) 70%)}
.sky-day{opacity:0;background:#fff}
.horizon{position:absolute;left:0;right:0;top:78%;height:1px;background:linear-gradient(90deg,rgba(255,210,150,0),rgba(255,210,150,.55),rgba(255,210,150,0));pointer-events:none}
.lake,.lake>span{position:absolute;pointer-events:none}
.lake{left:0;right:0;top:78%;bottom:0;z-index:2}
.lake>span{inset:0}
.lake-night{background:linear-gradient(180deg,#151c38 0%,#0a0f20 100%)}
.lake-dawn{opacity:0;background:linear-gradient(180deg,#4b3f66 0%,#2a2442 100%)}
.lake-glint{opacity:0;background:radial-gradient(ellipse 9% 90% at 50% 0%,rgba(255,196,110,.75),rgba(255,196,110,0) 70%),repeating-linear-gradient(180deg,rgba(255,214,160,.12) 0 2px,rgba(255,214,160,0) 2px 9px)}
.lake-day{opacity:0;background:#fff}
.embers{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;pointer-events:none}
.sun{position:absolute;z-index:1;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:var(--ambre);pointer-events:none;will-change:transform;box-shadow:0 0 60px 24px rgba(255,180,84,var(--sun-glow,.55))}
.stage-top{position:relative;z-index:5;display:flex;align-items:center;gap:12px;padding-block:14px 4px}
.stage-top .logo{margin-right:auto}
.st-cta{transition:opacity .4s,visibility .4s,background .2s,transform .2s}
.stage.is-final .st-cta{opacity:0;visibility:hidden}
.stage-body{position:relative;z-index:4;display:grid;place-items:center;align-content:center;min-height:0;padding-bottom:4vh;text-align:center}
.hello,.wordmark{grid-area:1/1}
.hello{font-family:var(--f-titre);font-weight:700;font-size:clamp(3.4rem,11vw,8.2rem);line-height:1;letter-spacing:-.02em;color:#f4f1ea}
.hello small{display:block;margin-top:18px;font-family:var(--f-texte);font-weight:500;font-size:1rem;letter-spacing:.02em;color:rgba(244,241,234,.75)}
.wordmark{display:inline-flex;align-items:baseline;gap:.06em;font-family:var(--f-titre);font-weight:700;font-size:clamp(3.4rem,11vw,8.2rem);line-height:1;letter-spacing:-.02em;color:var(--encre)}
.wm-text{opacity:0}
.wm-dot{display:inline-block;width:.26em;height:.26em;border-radius:50%;visibility:hidden}
.hero{grid-area:2/1;display:grid;justify-items:center;gap:18px;margin-top:22px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .6s,transform .6s,visibility 0s .6s}
.hero.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hero .kicker{margin:0}
.promesse{max-width:28ch;font-family:var(--f-titre);font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25;color:var(--encre)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
html:not(.js) .wm-text,.rm .wm-text{opacity:1}
html:not(.js) .hello,.rm .hello{display:none}
html:not(.js) .hero,.rm .hero{opacity:1;visibility:visible;transform:none}
html:not(.js) .wm-dot,.rm .wm-dot{visibility:visible;background:var(--ambre)}
.hint-row{position:relative;z-index:5;display:flex;align-items:center;gap:14px;padding-block:10px 16px}
.hint{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.hint .i{width:18px;height:18px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.skip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;white-space:nowrap;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:600 .82rem var(--f-texte);cursor:pointer;transition:opacity .4s,visibility .4s}
.skip .i{width:16px;height:16px}
.stage.is-final .skip,.stage.is-final .hint{opacity:0;visibility:hidden}
.rm .intro,html:not(.js) .intro{background:var(--blanc);--fg:var(--encre)}
.rm .sky,.rm .embers,html:not(.js) .sky,html:not(.js) .embers,.rm .hint-row,html:not(.js) .hint-row,.rm .sun,html:not(.js) .sun,.rm .lake,html:not(.js) .lake{display:none}
.rm .stage,html:not(.js) .stage{height:auto;min-height:0;padding-bottom:56px}
.st-cta .sm{display:none}
@media (max-width:700px){.st-cta .lg{display:none}.st-cta .sm{display:inline}.hint{display:none}.hero{gap:14px}}

/* ---------- Les sections ---------- */
.sec{padding-block:clamp(64px,9vw,112px)}
.sec.alt{background:var(--fond-2)}
.sec-head{max-width:760px;margin:0 auto 44px;text-align:center}
.sec-title{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12}
.lead{margin-top:14px;color:var(--encre-2);font-size:1.08rem}

/* L'en-tête d'une page secondaire */
.phead{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,44px);text-align:center}
.phead h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1}
.phead .lead{max-width:44ch;margin-inline:auto}
.crumb{margin:0 0 14px;color:var(--encre-3);font-size:.9rem}
.crumb a{color:var(--encre-3)}

/* Comment ça marche : trois étapes */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:14px;margin:0;padding:0;list-style:none}
.flow li.step{display:grid;align-content:start;gap:12px;padding:26px 22px;border:1px solid var(--ligne);border-radius:18px;background:var(--blanc)}
.flow li.step.mine{border-color:var(--ambre);background:var(--ambre-pale)}
.flow .arrow{display:grid;place-items:center;color:var(--ambre-fonce)}
.flow .arrow .i{width:26px;height:26px}
.step-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ambre-pale);color:var(--ambre-fonce)}
.step.mine .step-ico{background:var(--ambre);color:var(--sur-ambre)}
.step-ico .i{width:26px;height:26px}
.step h3{font-size:1.4rem}
.step p{color:var(--encre-2);font-size:1rem}
@media (max-width:860px){.flow{grid-template-columns:1fr}.flow .arrow{transform:rotate(90deg);padding-block:2px}}

/* Les trois messages qui partent seuls, nommés */
.seuls{max-width:760px;margin:28px auto 0;padding:18px 20px;border:1px dashed #d9d5cd;border-radius:16px;background:var(--blanc)}
.seuls p{display:flex;gap:10px;align-items:flex-start;color:var(--encre-2);font-size:.95rem}
.seuls p .i{width:20px;height:20px;margin-top:2px;color:var(--ambre-fonce)}
.seuls ul{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.seuls .seuls-plus{display:block;margin-top:12px;font-size:.9rem}
.seuls li{padding:6px 12px;border-radius:999px;background:var(--ambre-pale);color:var(--sur-ambre);font-size:.9rem;font-weight:500}

/* Les écrans, en onglets */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 22px}
.tab{min-height:44px;padding:0 16px;border:1px solid var(--ligne);border-radius:999px;background:var(--blanc);color:var(--encre-2);font:500 .92rem var(--f-texte);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tab:hover{border-color:var(--encre-3);color:var(--encre)}
.tab[aria-selected="true"]{border-color:var(--encre);background:var(--encre);color:#fff}
.frame{max-width:980px;margin:0 auto;overflow:hidden;border:1px solid var(--ligne);border-radius:16px;background:var(--blanc);box-shadow:0 40px 80px -40px rgba(26,29,34,.35)}
.frame-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-bottom:1px solid var(--ligne);background:var(--fond-2)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#dddad3}
.frame-bar span{margin-left:10px;color:var(--encre-3);font-size:.78rem}
.frame img{display:block;width:100%;height:auto;aspect-ratio:1920/1155}
.caption{max-width:760px;margin:16px auto 0;color:var(--encre-3);font-size:.9rem;text-align:center}

/* La raison d'être : 22 h, la table de cuisine */
.raison{background:var(--nuit);color:#f4f1ea;text-align:center;overflow:hidden}
.raison .kicker{color:var(--ambre)}
.cuisine{display:block;width:min(520px,100%);height:auto;margin:8px auto 28px}
.raison blockquote{max-width:30ch;margin:0 auto;font-family:var(--f-titre);font-weight:600;font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:1.3}
.lampe{transform-origin:260px 0;animation:lampe 6s ease-in-out infinite}
@keyframes lampe{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}

/* Les trois valeurs, chacune avec sa preuve */
.valeurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.valeur{display:grid;align-content:start;gap:10px;padding:26px 22px;border:1px solid var(--ligne);border-radius:18px;background:var(--blanc)}
.valeur .i{width:26px;height:26px;color:var(--ambre-fonce)}
.valeur h3{font-size:1.3rem}
.valeur p{color:var(--encre-2);font-size:.98rem;line-height:1.55}
@media (max-width:860px){.valeurs{grid-template-columns:1fr}}

/* Des étiquettes */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ligne);border-radius:999px;background:var(--blanc);font-weight:500;font-size:.95rem}
.chips li .i{width:18px;height:18px;color:var(--ambre-fonce)}

/* L'offre de fondateur */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.price-card{position:relative;display:grid;align-content:start;gap:14px;padding:32px 28px;border-radius:22px;background:var(--encre);color:#f4f1ea;overflow:hidden}
.price-card::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,84,.55),rgba(255,180,84,0) 65%);pointer-events:none}
.price-card .kicker{color:var(--ambre)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--f-titre)}
.price b{font-size:clamp(3.2rem,7vw,4.4rem);font-weight:700;line-height:1}
.price span{font-size:1.1rem;color:#d7d2c6}
.price-card ul{display:grid;gap:8px;margin:4px 0 6px;padding:0;list-style:none}
.price-card li{display:flex;gap:10px}
.price-card li .i{margin-top:5px;color:var(--ambre)}
.price-card .cta-row{justify-content:flex-start;margin-top:6px}
.price-card .btn-line{color:#f4f1ea}
.table{display:grid;gap:14px;align-content:start}
.tcol{padding:22px 22px 16px;border:1px solid var(--ligne);border-radius:18px;background:var(--blanc)}
.tcol h3{margin-bottom:8px;font-size:1.2rem}
.tcol dl{display:grid;margin:0}
.tcol dl div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--ligne)}
.tcol dt{color:var(--encre-2)}
.tcol dd{margin:0;font-weight:600;text-align:right}
.notes{display:grid;gap:6px;margin-top:18px;color:var(--encre-2);font-size:.95rem;text-align:center}
@media (max-width:900px){.offer{grid-template-columns:1fr}}

/* Qui est derrière */
.who{display:grid;justify-items:center;gap:12px;text-align:center}
.who p:not(.kicker){max-width:52ch;color:var(--encre-2)}
.who .neq{font-size:.9rem;color:var(--encre-3)}
.who-sun{width:22px;height:22px;margin-bottom:6px;border-radius:50%;background:var(--ambre);box-shadow:0 0 0 8px var(--ambre-pale),0 0 34px 10px rgba(255,180,84,.45)}

/* Le dernier appel */
.final{text-align:center}
.final .sec-title{margin-bottom:12px}
.final p{color:var(--encre-2)}
.final .cta-row{margin-top:24px}
.final .texto{margin-top:16px}

/* Des cartes en grille (métiers, étapes, questions) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin:0;padding:0;list-style:none}
.card{display:grid;align-content:start;gap:10px;padding:24px 22px;border:1px solid var(--ligne);border-radius:18px;background:var(--blanc);transition:border-color .25s,transform .25s,box-shadow .25s}
a.card{text-decoration:none}
a.card:hover{border-color:var(--ambre);transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(26,29,34,.35)}
.card .i{width:26px;height:26px;color:var(--ambre-fonce)}
.card h2,.card h3{font-size:1.25rem}
.card p{color:var(--encre-2);font-size:.98rem;line-height:1.55}
.card .suite{display:inline-flex;align-items:center;gap:6px;color:var(--ambre-fonce);font-weight:600;font-size:.92rem}
.card .num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ambre-pale);color:var(--ambre-fonce);font-weight:600}

/* Une scène de métier : ça entre, Marius prépare, vous décidez */
.scene dl{display:grid;gap:8px;margin:4px 0 0}
.scene dl div{display:grid;gap:2px}
.scene dt{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)}
.scene dd{margin:0;color:var(--encre-2);font-size:.98rem;line-height:1.5}
.scene dd.vous{color:var(--encre);font-weight:600}

/* Le matin : trois lignes de « Prochaines étapes » */
.matin{max-width:620px;margin:0 auto;overflow:hidden;border:1px solid var(--ligne);border-radius:16px;background:var(--blanc);box-shadow:0 30px 60px -40px rgba(26,29,34,.35)}
.matin .when{padding:12px 18px;border-bottom:1px solid var(--ligne);background:var(--fond-2);color:var(--encre-3);font-size:.85rem}
.matin ol{margin:0;padding:0;list-style:none}
.matin li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--ligne)}
.matin li:first-child{border-top:0}
.matin b{display:block;font-weight:600}
.matin small{display:block;color:var(--encre-3);font-size:.88rem}
.matin .pill{flex:none;padding:6px 12px;border-radius:999px;background:#1f5eff;color:#fff;font-size:.82rem;font-weight:600}

/* Questions : une réponse courte par question */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--ligne);border-radius:14px;background:var(--blanc)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ambre-pale);color:var(--ambre-fonce);font-weight:600;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 18px 16px;color:var(--encre-2)}

/* Bien commencer : les huit gestes */
.gestes{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:g}
.geste{counter-increment:g;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:20px;border:1px solid var(--ligne);border-radius:16px;background:var(--blanc)}
.geste::before{content:counter(g);grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ambre-pale);color:var(--ambre-fonce);font-weight:600}
.geste h2{font-size:1.2rem;align-self:center}
.geste p{color:var(--encre-2);font-size:.98rem}

/* Nouveautés : une section par semaine */
.semaine{margin:0 0 40px}
.semaine h2{margin:0 0 14px;font-size:1.4rem}
.semaine ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.semaine li{position:relative;padding-left:22px;color:var(--encre-2)}
.semaine li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--ambre)}

/* Les pages légales : l'habillage du texte, jamais le texte */
.legal main{width:min(760px,100% - 2*var(--gutter));margin:40px auto 56px}
.legal main>nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:24px;font-size:.9rem;color:var(--encre-3)}
.legal main>nav a{color:var(--encre-3)}
.legal main h1{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.15;margin:0 0 12px}
.legal main h2{margin:32px 0 8px;font-family:var(--f-texte);font-weight:600;font-size:1.12rem}
.legal main p{margin:0 0 12px;color:var(--encre-2)}
.legal main ul{margin:0 0 12px;padding-left:22px;color:var(--encre-2)}
.legal main li{margin:0 0 6px}
.legal main strong{color:var(--encre)}
.legal main em{color:var(--encre-3)}
.legal main a{color:var(--ambre-fonce)}
.legal main>footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;margin-top:36px;padding-top:16px;border-top:1px solid var(--ligne);color:var(--encre-3);font-size:.88rem}
.legal main>footer a{margin-right:14px}

/* ---------- Le pied de page : la signature ---------- */
.foot{padding-block:48px 120px;border-top:1px solid var(--ligne);background:var(--fond-2);color:var(--encre-2);font-size:.92rem}
.signature{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 26px;font-family:var(--f-titre);font-weight:600;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;color:var(--encre)}
.signature .logo{font-size:1em}
.foot-in{display:grid;gap:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--encre);text-decoration:underline}
.foot-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;color:var(--encre-3)}

/* ---------- Le bouton flottant « Réserver une démo » : le petit soleil se lève en boucle ---------- */
.fab-wrap{position:fixed;z-index:50;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
.fab{position:relative;display:flex;align-items:center;gap:12px;padding:8px 22px 8px 10px;border-radius:999px;background:var(--encre);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 16px 34px -12px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(16px) scale(.94);transition:opacity .35s,visibility .35s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.fab-wrap.is-in .fab{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.fab:hover{background:#2a2f37}
.fab-sun{position:relative;flex:none;width:38px;height:38px;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#2a3566 0%,#d98c7a 60%,#ffc27a 100%)}
.fab-sun::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ambre);box-shadow:0 0 10px 3px rgba(255,180,84,.8);animation:rise 3s ease-in-out infinite}
.fab-sun::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:rgba(26,29,34,.55)}
@keyframes rise{0%,100%{transform:translateY(10px)}50%{transform:translateY(-4px)}}

/* L'apparition douce des blocs, seulement avec JavaScript et sans « réduire les animations » */
.js:not(.rm) .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.7,.2,1)}
.js:not(.rm) .rv.on{opacity:1;transform:none}

/* Rien d'animé sous « réduire les animations » */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.cards>li{display:grid}
.tcol>dl:first-child>div:first-child{border-top:0}
/* sans animation (ou sans JavaScript), l'intro devient un simple en-tête : un peu d'air sous le logo */
.rm .stage-body,html:not(.js) .stage-body{padding-block:40px 0}
/* le lien « Réserver une démo » d'une carte bouge aussi : sa flèche pousse */
.card .suite.demo .i{animation:pousse 1.6s ease-in-out infinite}
@keyframes pousse{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* la bulle de Marius (bulle.js, n° 245) pose son bouton rond en bas à droite : « Réserver une démo » monte au-dessus,
   l'intro (« Défilez », « Passer l'intro ») et le pied lui laissent la place */
.avec-bulle .fab-wrap{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (min-width:701px){.avec-bulle .hint-row{padding-right:170px}}
.avec-bulle .foot{padding-bottom:180px}