/* CONSTRUIT par tools/i18n.js depuis assets/css/style.css (@famille accueil).
   Ne pas éditer : la source est style.css, entre ses marqueurs. */

.accueil{
--cream:#faf8f4; --peach:#f6dcb8; --apricot:#f2c592; --rose:#f3d9d6;
--brown:#7a4a1c; --sky-ink:#1d1812; --warm-2:#4a3f33; --warm-3:#6b5a48;
--glass:rgba(255,255,255,.6); --glass-2:rgba(255,255,255,.76); --glass-line:rgba(255,255,255,.85);
--hair:rgba(84,58,30,.12);
--ombre:0 44px 90px -54px rgba(92,60,24,.45), 0 2px 10px -4px rgba(92,60,24,.08);
--ombre-s:0 20px 48px -36px rgba(92,60,24,.45);
--r-xl:30px;
--vh:1vh;
background:var(--cream);
}
@supports (height:1svh){ .accueil{ --vh:1svh } }
.accueil :where(.essai__panneau,.chemin__liste li,.steps li,.collection-preview,.demo__scene,.demo__pupitre,
.plan:not(.plan--featured),.billing,.faq,.final__in,.compare__scroll){
background:var(--glass); border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
box-shadow:var(--ombre-s);
}
.accueil .h2,.accueil .final__title{ font-family:var(--serif); font-weight:500; letter-spacing:-.018em;
line-height:1.05; color:var(--sky-ink) }
.accueil .h2{ font-size:clamp(2.1rem,1.35rem + 2.5vw,3.4rem); max-width:17ch; margin-bottom:.45em }
.accueil .h2 em,.accueil .final__title em{ font-style:italic; color:var(--brown) }
.accueil .lede{ color:var(--warm-2) }
.accueil .eyebrow{ border-color:var(--glass-line); background:rgba(255,255,255,.6); color:#6b4f35;
letter-spacing:.14em; box-shadow:0 6px 16px -10px rgba(92,60,24,.35) }
.accueil .btn{ border-radius:999px; padding:.8em 1.55em }
.accueil .btn--ghost{ background:rgba(255,255,255,.62); border-color:var(--glass-line); color:var(--sky-ink);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.accueil .btn--ghost:hover{ background:rgba(255,255,255,.9); border-color:#fff; box-shadow:0 10px 24px -16px rgba(92,60,24,.45) }
.accueil .micro{ color:var(--warm-3) }
.accueil main{ position:relative; isolation:isolate; background:
radial-gradient(900px 440px at 88% 700px, rgba(246,220,184,.55), transparent 70%),
radial-gradient(800px 520px at 6% 19%, rgba(243,217,214,.5), transparent 70%),
radial-gradient(900px 560px at 95% 34%, rgba(242,197,146,.3), transparent 70%),
radial-gradient(900px 600px at 5% 50%, rgba(246,220,184,.5), transparent 70%),
radial-gradient(900px 600px at 94% 65%, rgba(243,217,214,.45), transparent 70%),
radial-gradient(1000px 560px at 10% 80%, rgba(242,197,146,.28), transparent 70%),
var(--cream) }
.accueil :is(.how,.collections,.pricing,.demo){ background:transparent; border:0 }
.ciel{ --p:0; --q:0; position:relative; height:calc(var(--vh) * 230); background:var(--cream) }
.ciel__scene{ position:sticky; top:0; height:calc(var(--vh) * 100); overflow:hidden; isolation:isolate;
background:linear-gradient(180deg,#9fb6cf 0%,#f3c9a0 55%,#f6dcb8 100%) }
.ciel__l{ position:absolute; left:50%; max-width:none; will-change:transform; pointer-events:none;
-webkit-user-select:none; user-select:none }
.ciel__fond{ z-index:0; top:0; width:max(100%, calc(var(--vh) * 234)); height:100%; object-fit:cover;
transform:translate(-50%, calc(var(--p) * -6%)) scale(calc(1 + var(--p) * .08)) }
.ciel__mer{ z-index:1; bottom:-6%; width:max(130%, calc(var(--vh) * 300)); height:auto;
transform:translate(-50%, calc(var(--p) * -14%)) scale(calc(1 + var(--p) * .35)) }
.ciel__avant{ z-index:3; bottom:-18%; width:max(150%, calc(var(--vh) * 340)); height:auto;
transform:translate(-50%, calc(var(--p) * 32%)) scale(calc(1 + var(--p) * 1.1));
opacity:calc(1 - var(--p) * .6) }
.ciel__fondu{ position:absolute; z-index:4; left:0; right:0; bottom:-1px; height:calc(var(--vh) * 22);
background:linear-gradient(rgba(250,248,244,0), var(--cream)); opacity:calc(var(--p) * 1.4); pointer-events:none }
.ciel__texte{ position:absolute; z-index:2; left:0; right:0; top:clamp(100px, calc(var(--vh) * 15), 150px);
padding:0 20px; text-align:center;
transform:translateY(calc(var(--p) * var(--vh) * -30)); opacity:calc(1 - var(--p) * 3) }
.ciel.is-loin .ciel__texte{ visibility:hidden }
.ciel__eyebrow{ display:inline-block; margin:0 0 22px; padding:7px 15px; border-radius:999px;
font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#5f4630;
background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.ciel h1{ font-family:var(--serif); font-weight:500; color:var(--sky-ink);
font-size:clamp(2.5rem, min(5.8vw, calc(var(--vh) * 9.4)), 5.25rem); line-height:1.02; letter-spacing:-.015em }
.ciel h1 em{ font-style:italic; color:var(--brown) }
.ciel__lede{ max-width:640px; margin:22px auto 0; color:#3f342a; text-wrap:pretty;
font-size:clamp(1.0625rem, .95rem + .4vw, 1.28rem); line-height:1.5 }
.ciel__cta{ margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.ciel__cta .btn{ min-height:54px; padding:.85em 1.75em; font-size:1.0625rem }
.ciel__cta .btn--ghost{ background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.7) }
.ciel__faits{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; row-gap:4px;
font-size:.9rem; color:#55442f }
.ciel__faits li + li::before{ content:"·"; margin:0 .7em; opacity:.6 }
.ciel__persp{ position:absolute; z-index:2; inset:0; perspective:1400px; pointer-events:none }
.ev{ position:absolute; left:50%; top:calc(var(--vh) * 100 - 160px - var(--q) * var(--vh) * 60); width:1px; height:1px }
.ev-carte{ position:absolute; left:-150px; top:0; width:300px; height:400px }
.evp{ --ink:#1d1812; --lab:currentColor; position:relative; width:100%; height:100%; overflow:hidden;
display:flex; flex-direction:column; border-radius:20px; color:var(--ink);
font-family:-apple-system,"SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif; line-height:1.15;
box-shadow:0 34px 70px -18px rgba(40,25,10,.42), 0 6px 14px -6px rgba(40,25,10,.2), inset 0 0 0 1px rgba(255,255,255,.08) }
.evp::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:linear-gradient(125deg, rgba(255,255,255,.16), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06)) }
.evp__tete{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 12px; min-height:68px }
.evp__logo{ width:auto; max-width:62%; height:auto; max-height:38px }
.evp__champ{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.evp__champ small{ font-size:9px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--lab); opacity:.75 }
.evp__champ b{ font-size:15px; font-weight:600; letter-spacing:-.01em }
.evp__champ b sup{ font-size:.62em; line-height:0 }
.evp__champ--r{ text-align:right; align-items:flex-end }
.evp__tete .evp__champ b{ font-size:22px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.evp__bande{ position:relative; height:118px; flex:none; overflow:hidden }
.evp__photo{ width:100%; height:100%; object-fit:cover; display:block }
.evp__objets{ height:100%; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr);
align-items:center; justify-items:center; padding:4px 22px }
.evp__objets img{ width:54px; height:54px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.35)) }
.evp__objets img.off{ filter:grayscale(1) brightness(2.4) contrast(.6); opacity:.16 }
.evp__rangee{ display:flex; justify-content:space-between; gap:14px; padding:14px 16px 0 }
.evp__code{ margin:auto auto 16px; width:96px; height:96px; padding:8px; background:#fff; border-radius:8px;
box-shadow:0 1px 2px rgba(0,0,0,.08) }
.evp__code svg{ width:100%; height:100%; display:block }
.evp--kori{ background:#fbfaf6; --ink:#0f3b40 }
.evp--kori .evp__bande{ height:126px }
.evp--ferrand{ background:#402514; --ink:#f3e2c4 }
.evp--vanite{ background:#f8d7df; --ink:#b0164f }
.evp__points{ height:100%; margin:0 12px; border-radius:14px; background:rgba(255,255,255,.72);
display:flex; align-items:center; justify-content:space-between; padding:0 16px }
.evp__points span{ display:flex; flex-direction:column; gap:3px }
.evp__points small{ font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.8 }
.evp__points b{ font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1 }
.evp__anneau{ width:84px; height:84px; flex:none }
.evp--atlas{ background:#20402b; --ink:#f2e6cf }
.evp--atlas .evp__bande{ height:132px }
.evp--atlas .evp__objets{ padding:6px 26px; row-gap:4px }
.evp--atlas .evp__objets img{ width:50px; height:50px }
.evp--atlas .evp__objets--quinconce{ display:block; position:relative; padding:0 }
.evp__objets--quinconce > *{ position:absolute; width:62px; height:62px }
.evp--atlas .evp__objets--quinconce img,.evp__objets--quinconce > .vy__case{ position:absolute; width:62px; height:62px }
.evp__objets--quinconce > :nth-child(-n+4){ top:8px }
.evp__objets--quinconce > :nth-child(n+5){ top:56px }
.evp__objets--quinconce > :nth-child(1){ left:20px } .evp__objets--quinconce > :nth-child(2){ left:80px }
.evp__objets--quinconce > :nth-child(3){ left:140px } .evp__objets--quinconce > :nth-child(4){ left:200px }
.evp__objets--quinconce > :nth-child(5){ left:50px } .evp__objets--quinconce > :nth-child(6){ left:110px }
.evp__objets--quinconce > :nth-child(7){ left:170px } .evp__objets--quinconce > :nth-child(8){ left:230px }
.ev-c1{ transform:translateX(calc(-150px - var(--q) * 230px)) rotateY(calc(18deg - var(--q) * 10deg)) rotateZ(calc(-10deg - var(--q) * 6deg)) translateZ(-60px) }
.ev-c2{ transform:translateX(calc(-55px - var(--q) * 80px)) rotateY(8deg) rotateZ(calc(-3deg - var(--q) * 2deg)) }
.ev-c3{ transform:translateX(calc(55px + var(--q) * 80px)) rotateY(-8deg) rotateZ(calc(3deg + var(--q) * 2deg)) }
.ev-c4{ transform:translateX(calc(150px + var(--q) * 230px)) rotateY(calc(-18deg + var(--q) * 10deg)) rotateZ(calc(10deg + var(--q) * 6deg)) translateZ(-60px) }
@media (min-width:761px) and (max-height:820px){
.ciel__lede{ margin-top:16px; font-size:1.06rem }
.ciel__cta{ margin-top:22px }
.ev{ top:calc(var(--vh) * 100 - 120px - var(--q) * var(--vh) * 60) }
}
@media (max-width:760px){
.ciel{ height:calc(var(--vh) * 180) }
.ciel__fond{ transform:translate(-50%,0) }
.ciel__texte{ top:clamp(84px, calc(var(--vh) * 12), 112px); padding:0 16px }
.ciel__texte::before{ content:""; position:absolute; inset:-24px -10px -36px; z-index:-1;
background:radial-gradient(ellipse at 50% 45%, rgba(255,244,228,.8), rgba(255,244,228,0) 70%) }
.ciel__eyebrow{ margin-bottom:16px; font-size:.68rem; letter-spacing:.12em; padding:6px 12px }
.ciel h1{ font-size:clamp(2.2rem, 10vw, 2.7rem); line-height:1.04 }
.ciel__lede{ margin-top:14px; font-size:1rem; line-height:1.5 }
.ciel__cta{ margin-top:22px; flex-direction:column; align-items:center; gap:10px }
.ciel__cta .btn{ width:min(100%, 320px); min-height:52px; font-size:1rem }
.ciel__faits{ margin-top:16px; font-size:.8rem; padding:0 8px; column-gap:14px }
.ciel__faits li + li::before{ content:none }
.ev{ top:calc(var(--vh) * 100 - 270px - var(--q) * (var(--vh) * 52 - 100px)) }
.ev-carte{ transform-origin:50% 100% }
.ev-c1,.ev-c4{ display:none }
.ev-c2{ transform:translateX(calc(-58px - var(--q) * 6px)) rotateZ(calc(-6deg - var(--q) * 1deg)) scale(.6) }
.ev-c3{ transform:translateX(calc(58px + var(--q) * 6px)) rotateZ(calc(5deg + var(--q) * 1deg)) scale(.6) }
}
@media (max-width:760px) and (max-height:700px){
.ciel__lede{ display:none }
}
@media (prefers-reduced-motion:reduce){
.ciel{ height:auto }
.ciel__scene{ position:relative }
.ciel__l{ will-change:auto }
}
.essai{ position:relative; z-index:2; padding:clamp(12px,3vw,40px) 0 clamp(56px,8vw,100px);
background:
radial-gradient(ellipse 45% 40% at 82% 40%, rgba(246,220,184,.6), rgba(246,220,184,0) 100%),
radial-gradient(ellipse 40% 35% at 12% 70%, rgba(243,217,214,.5), rgba(243,217,214,0) 100%),
var(--cream) }
.accueil .essai__panneau{ position:relative; color:var(--sky-ink); border-radius:var(--r-xl);
display:grid; gap:clamp(28px,4vw,56px); align-items:center; justify-items:stretch;
padding:clamp(24px,4vw,52px) clamp(20px,4.5vw,60px) clamp(28px,4vw,52px); box-shadow:var(--ombre) }
@media (min-width:900px){ .accueil .essai__panneau{ grid-template-columns:minmax(0,1fr) minmax(0,400px) } }
.essai__titre{ display:block; font-family:var(--serif); font-weight:500; color:var(--sky-ink);
font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem); line-height:1.06; letter-spacing:-.015em; max-width:15ch; cursor:text }
.accueil .hero__vif{ position:static; display:block; margin-top:14px; max-width:34ch;
color:var(--warm-2); font-size:var(--step-1); line-height:1.5 }
.accueil .hero__reglage{ max-width:440px; margin-top:clamp(20px,3vw,30px); gap:14px }
.accueil .hero__champ{ color:var(--sky-ink); background:rgba(255,255,255,.9); border:1px solid rgba(84,58,30,.16);
border-radius:999px; padding:.85em 1.3em; font-size:1.1rem;
box-shadow:0 10px 24px -18px rgba(92,60,24,.45), inset 0 1px 0 #fff }
.accueil .hero__champ:focus-visible{ outline:2.5px solid var(--brown); outline-offset:3px }
.accueil .hero__reglage .img-edit__themes{ gap:8px }
.accueil .hero__reglage .img-edit__themes button{ font-size:.84rem; padding:.5em 1em; color:var(--warm-2);
background:rgba(255,255,255,.5); border:1px solid rgba(84,58,30,.16) }
.accueil .hero__reglage .img-edit__themes button:hover{ background:#fff; border-color:rgba(84,58,30,.3) }
.accueil .hero__reglage .img-edit__themes button.is-on{ background:var(--sky-ink); color:#fff; border-color:var(--sky-ink) }
.essai__carte{ position:relative; width:100%; max-width:400px; justify-self:center }
.accueil .hero__carte{ max-width:none }
.accueil .hero__carte .pass{ box-shadow:0 34px 64px -30px rgba(60,38,14,.55), 0 2px 8px -3px rgba(60,38,14,.25) }
.accueil .hero__notif{ position:relative; left:auto; bottom:auto; transform:none; margin:16px auto 0;
width:min(94%,380px); border-radius:20px;
background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.9);
-webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
box-shadow:0 24px 48px -24px rgba(60,38,14,.5) }
.accueil .hero__notif-icone{ background-color:var(--sky-ink) }
@media (prefers-reduced-motion:no-preference){
.accueil .hero__atelier[data-vif] .hero__notif{ animation:notif-sous .7s 1.2s cubic-bezier(.2,.8,.2,1) both }
@keyframes notif-sous{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:none } }
}
.accueil .chemin{ border:0; background:transparent; margin-top:clamp(16px,2.4vw,24px) }
.accueil .chemin__liste{ padding-block:0; gap:12px }
.accueil .chemin__liste li{ padding:18px 20px 20px; border-radius:22px }
.accueil .chemin__num{ color:var(--brown); font-family:var(--serif); font-style:italic; font-size:.95rem;
letter-spacing:0; font-weight:500 }
.accueil .chemin__num::after{ background:var(--hair) }
.accueil .chemin__liste li:last-child .chemin__num::after{ display:block }
.accueil .chemin__liste strong{ font-weight:600; color:var(--sky-ink) }
.accueil .chemin__liste span:not(.chemin__num){ color:var(--warm-3) }
.accueil .chemin__liste .is-cle{ background:linear-gradient(140deg, rgba(220,252,231,.85), rgba(255,255,255,.6)) }
.accueil .chemin__liste .is-cle :is(.chemin__num,strong){ color:var(--green-ink) }
.accueil .steps{ gap:12px; margin-top:clamp(22px,3.4vw,32px) }
.accueil .steps li{ border:1px solid var(--glass-line); border-radius:22px; padding:18px 20px }
.accueil .steps li:last-child{ border-bottom:1px solid var(--glass-line) }
.accueil .steps__num{ padding-top:.15rem; color:var(--brown); font-family:var(--serif); font-style:italic;
font-size:1.05rem; letter-spacing:0; font-weight:500 }
.accueil .steps h3{ font-family:var(--serif); font-weight:500; font-size:1.32rem; letter-spacing:-.01em; color:var(--sky-ink) }
.accueil .steps p,.accueil .steps__more{ color:var(--warm-2) }
.accueil .phone-panel{ border:1px solid var(--glass-line); border-radius:var(--r-xl); box-shadow:var(--ombre);
background:linear-gradient(180deg, rgba(250,248,244,0) 35%, rgba(250,248,244,.55)),
url("../img/ciel/ciel-1200.webp") center 30% / cover, var(--peach) }
.accueil .collection-choices button,.accueil .collection-platforms button{ border-radius:999px;
border:1px solid rgba(84,58,30,.16); background:rgba(255,255,255,.55); color:var(--warm-2) }
.accueil .collection-choices button{ padding:11px 14px }
.accueil .collection-choices button:hover,.accueil .collection-platforms button:hover{ background:#fff }
.accueil .collection-choices button[aria-pressed=true]{ background:#fff; border-color:var(--sky-ink);
box-shadow:0 0 0 1px var(--sky-ink), 0 10px 24px -16px rgba(92,60,24,.45) }
.accueil .collection-platforms button[aria-pressed=true]{ background:var(--sky-ink); border-color:var(--sky-ink); color:#fff }
.accueil .collection-detail,.accueil .collection-note{ color:var(--warm-3) }
.accueil .collection-preview{ max-width:420px; padding:22px 18px 16px; border-radius:var(--r-xl); box-shadow:var(--ombre) }
.accueil .product-frame{ border-radius:24px; border-color:rgba(255,255,255,.9);
outline:10px solid rgba(255,255,255,.45); outline-offset:0;
box-shadow:0 60px 120px -60px rgba(92,60,24,.55), 0 10px 30px -20px rgba(92,60,24,.25) }
.accueil .photo-panel{ border-radius:var(--r-xl); border-color:var(--glass-line); box-shadow:var(--ombre) }
.accueil .lock{ border-radius:28px }
.accueil .demo__scene{ padding:clamp(26px,4vw,40px) clamp(18px,3vw,32px) clamp(20px,3vw,28px);
border-radius:var(--r-xl); box-shadow:var(--ombre);
background:radial-gradient(120% 70% at 50% 0%, rgba(246,220,184,.55), rgba(255,255,255,0) 70%), var(--glass) }
.accueil .demo__pupitre{ background:var(--glass-2); border-radius:22px; padding:18px }
.accueil .demo__carte{ border-radius:16px }
.accueil .demo__btn2{ background:rgba(255,255,255,.6); border-color:rgba(84,58,30,.18) }
.accueil .demo__btn2:hover{ background:#fff; color:var(--sky-ink) }
.accueil :is(.demo__legende,.demo__note,.demo__attente){ color:var(--warm-3) }
.accueil .billing{ border-radius:999px; padding:5px }
.accueil .billing__option{ border-radius:999px; padding:.55em 1.1em }
.accueil .billing__option.is-on{ background:var(--sky-ink); color:#fff; box-shadow:0 6px 16px -10px rgba(29,24,18,.6) }
.accueil .billing__option.is-on span{ color:#86efac }
.accueil .plan{ border-radius:26px }
.accueil .plan:not(.plan--featured){ background:var(--glass-2) }
.accueil .plan--featured{ background:var(--sky-ink); border-color:var(--sky-ink);
box-shadow:0 44px 80px -40px rgba(29,24,18,.7) }
.accueil .plan__name{ font-family:var(--serif); font-weight:500; font-size:1.4rem; letter-spacing:-.01em }
.accueil .plan__top > span{ background:rgba(122,74,28,.08); color:#7a5a3a }
.accueil .plan--featured .plan__top > span{ background:rgba(255,255,255,.1); color:#d9cfc2 }
.accueil .plan .btn{ border-radius:999px; min-height:46px }
.accueil .plan__includes{ border-top-color:var(--hair) }
.accueil .safety{ border-radius:18px; border-color:rgba(34,197,94,.25); background:rgba(230,247,235,.75) }
.accueil .compare{ border-top-color:var(--hair) }
.accueil .compare > h3{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; font-size:clamp(1.5rem,2.4vw,1.9rem) }
.accueil .compare__scroll{ border-radius:22px }
.accueil .compare thead th{ background:rgba(255,255,255,.55) }
.accueil .compare th,.accueil .compare td{ border-bottom-color:var(--hair) }
.accueil .faq{ max-width:none; border-radius:var(--r-xl); padding:4px clamp(18px,3vw,34px); box-shadow:var(--ombre) }
.accueil .faq details{ border-bottom-color:var(--hair) }
.accueil .faq details:last-child{ border-bottom:0 }
.accueil .faq summary{ font-size:1.06rem; color:var(--sky-ink) }
.accueil .faq summary::after{ border-color:var(--brown) }
.accueil .faq details p{ color:var(--warm-2) }
@media (min-width:960px){
.accueil #faq .wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
grid-template-rows:auto 1fr; column-gap:clamp(40px,5vw,72px); align-items:start }
.accueil #faq .eyebrow{ grid-column:1; grid-row:1; justify-self:start }
.accueil #faq .h2{ grid-column:1; grid-row:2; position:sticky; top:110px }
.accueil #faq .faq{ grid-column:2; grid-row:1 / span 2; margin-top:0 }
}
.accueil .final{ background:var(--peach); padding:clamp(110px,15vw,190px) 0 clamp(96px,13vw,160px) }
.accueil .final__media{ overflow:hidden }
.accueil .final__media .final__ciel{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
.accueil .final__media .final__mer{ position:absolute; left:50%; bottom:-10%; width:max(140%, 1700px); max-width:none;
height:auto; transform:translateX(-50%); object-fit:initial }
.accueil .final__media::after{ background:linear-gradient(180deg, var(--cream) 0%, rgba(250,248,244,0) 24%,
rgba(250,248,244,0) 72%, var(--cream) 100%) }
.accueil .final__in{ max-width:42rem; background:rgba(255,255,255,.62); border-radius:34px;
padding:clamp(30px,4.5vw,52px) clamp(20px,4vw,48px); box-shadow:0 50px 110px -50px rgba(92,60,24,.55) }
.accueil .final__title{ font-size:clamp(2.3rem,1.5rem + 2.6vw,3.5rem); margin-bottom:.35em }
.accueil .signup input{ border-radius:999px; background:rgba(255,255,255,.92); border:1px solid rgba(84,58,30,.18);
padding:.8em 1.3em; min-height:54px }
.accueil .signup input:focus{ border-color:var(--sky-ink); box-shadow:0 0 0 3px rgba(29,24,18,.08) }
.accueil .signup .btn{ min-height:54px }
.accueil .site-foot{ background:var(--cream); border-top-color:var(--hair) }
.accueil .cookies{ border-radius:22px; border-color:var(--glass-line); background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--ombre) }
.accueil .cookies .btn{ border-radius:999px }
.vy-place{ display:none; position:relative; min-width:0 }
@media (min-width:1024px) and (scripting:enabled){
.accueil .wrap--vy,.accueil .wrap--vy-fin{ --vy-col:clamp(256px,20vw,300px); --vy-gap:clamp(40px,4vw,56px) }
.accueil .wrap--vy{ max-width:calc(var(--wrap) + var(--vy-col) + var(--vy-gap));
grid-template-columns:var(--vy-col) minmax(0,1fr); column-gap:var(--vy-gap); row-gap:56px }
.accueil .wrap--vy > .split__text,.accueil .wrap--vy > .split__media{ grid-column:2 }
.accueil .wrap--vy > .split__media{ max-width:540px }
.accueil .wrap--vy > .vy-place{ display:block; grid-column:1; grid-row:1 / span 2; align-self:stretch }
.accueil .wrap--vy-fin{ display:grid; grid-template-columns:var(--vy-col) minmax(0,42rem);
justify-content:center; column-gap:var(--vy-gap) }
.accueil .wrap--vy-fin > .vy-place{ display:block; align-self:stretch }
.accueil .wrap--vy-fin > .final__in{ margin:0 }
}
@media (min-width:1280px) and (scripting:enabled){
.accueil .wrap--vy{ grid-template-columns:var(--vy-col) minmax(0,1fr) minmax(0,1fr) }
.accueil .wrap--vy > .split__text{ grid-row:1 }
.accueil .wrap--vy > .split__media{ grid-column:3; grid-row:1; max-width:none }
.accueil .wrap--vy > .vy-place{ grid-row:1 }
}
.vy{ position:fixed; left:0; top:0; width:0; height:0; z-index:40; display:none;
pointer-events:none; -webkit-user-select:none; user-select:none; opacity:0;
transition:opacity .35s ease }
.vy.is-pret{ display:block }
.vy.is-on{ opacity:1 }
.vy.is-garee .vy__notif{ opacity:0 }
.vy__notif{ transition:opacity .3s ease }
.ev-c4.vy-relaye{ visibility:hidden }
.vy__pose{ position:absolute; left:0; top:0; width:300px; height:400px; transform-origin:0 0;
will-change:transform; --inv:1; --nw:250px }
.vy__bump{ position:absolute; inset:0; z-index:2 }
.vy__carte{ position:absolute; inset:0; transform-style:preserve-3d;
transition:transform .9s cubic-bezier(.3,.7,.2,1) }
.vy__face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; isolation:isolate }
.vy__dos{ transform:rotateY(180deg) }
.vy .evp,.vy .evp__bande{ overflow:visible }
.vy .evp::after{ z-index:3 }
.vy__case{ position:relative; display:block; width:50px; height:50px }
.vy__case img{ position:absolute; inset:0; width:100%; height:100% }
.vy__case .g{ filter:grayscale(1) brightness(2.4) contrast(.6); opacity:.16 }
.vy__case .c{ filter:drop-shadow(0 4px 5px rgba(0,0,0,.35)); opacity:0; transform:scale(.4);
transition:opacity .35s ease, transform .5s cubic-bezier(.3,1.6,.5,1) }
.vy__case.on .c{ opacity:1; transform:none }
.vy__tampon{ position:absolute; left:50%; top:50%; width:74px; height:96px; margin:-74px 0 0 -37px; z-index:4;
opacity:0; transform:translateY(-150px) rotate(-18deg) scale(1.25) }
.vy__tampon svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 14px 14px rgba(0,0,0,.35)) }
.vy__encre{ position:absolute; left:50%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; z-index:1;
border-radius:50%; border:3px solid #22c55e; opacity:0; transform:scale(.3) }
.vy__notif{ position:absolute; left:0; top:0; width:300px; height:0; z-index:6 }
.vy__notif-in{ position:absolute; left:50%; bottom:-14px; width:var(--nw); transform-origin:50% 100%;
transform:translateX(-50%) scale(var(--inv)) translateY(-28px) rotate(-1.2deg); opacity:0;
transition:opacity .3s ease, transform .6s cubic-bezier(.2,1.25,.4,1);
display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:18px;
background:rgba(250,248,244,.9); border:1px solid rgba(255,255,255,.95); color:#1d1812;
-webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
box-shadow:0 24px 44px -18px rgba(40,25,10,.6), 0 2px 6px -2px rgba(40,25,10,.18);
font:13px/1.35 -apple-system,"SF Pro Text",system-ui,sans-serif; text-align:left }
.vy__notif-ico{ flex:none; width:32px; height:32px; border-radius:8px; background:#20402b;
display:grid; place-items:center; overflow:hidden }
.vy__notif-ico img{ width:28px; height:auto }
.vy__notif-c{ min-width:0; flex:1 }
.vy__notif-t{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:#6b5a48; margin-bottom:2px }
.vy__notif-t b{ color:#1d1812; font-weight:600 }
.vy__notif-x{ display:block }
.vy__notif-x sup,.vy__dosin sup{ font-size:.62em; line-height:0 }
.vy__dosin{ position:relative; height:100%; border-radius:20px; overflow:hidden; color:#f2e6cf;
background:radial-gradient(120% 70% at 50% 30%, #2f6a43 0%, #20402b 58%, #16301f 100%);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:28px 22px;
text-align:center; font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;
box-shadow:0 34px 70px -18px rgba(40,25,10,.42), 0 6px 14px -6px rgba(40,25,10,.2) }
.vy__rayons{ position:absolute; left:50%; top:34%; width:520px; height:520px; margin:-260px 0 0 -260px; opacity:.22;
background:repeating-conic-gradient(from 0deg, rgba(255,240,200,.55) 0 7deg, transparent 7deg 22deg);
-webkit-mask:radial-gradient(circle, #000 0 30%, transparent 62%); mask:radial-gradient(circle, #000 0 30%, transparent 62%) }
.vy__dosin > *{ position:relative }
.vy__doslogo{ width:110px; height:auto; opacity:.85; margin-bottom:10px }
.vy__dosimg{ width:112px; height:112px; filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)); margin-bottom:8px }
.vy__dosin b{ font-family:var(--serif); font-weight:500; font-size:38px; line-height:1.05; letter-spacing:-.01em }
.vy__dosin span:not(.vy__holo):not(.vy__rayons){ font-size:18px; opacity:.92; margin-top:6px }
.vy__holo{ position:absolute; inset:0; z-index:4; border-radius:20px; overflow:hidden; pointer-events:none;
mix-blend-mode:soft-light; opacity:var(--ho,.38) }
.vy__holo i{ position:absolute; left:-75%; top:-75%; width:250%; height:250%;
background:linear-gradient(115deg, transparent 30%, rgba(255,120,200,.55) 38%, rgba(120,220,255,.6) 44%,
rgba(160,255,170,.55) 50%, rgba(255,240,140,.55) 56%, transparent 64%);
transform:translate3d(var(--hx,0px), var(--hy,0px), 0) }
.vy.e1 .vy__tampon{ animation:vy-tampon 1.1s cubic-bezier(.3,.6,.3,1) both }
.vy.e1 .vy__encre{ animation:vy-encre .9s .42s ease-out both }
.vy.e1 .vy__bump{ animation:vy-bump .5s .4s ease-out both }
.vy.e1 .vy__case[data-i="5"] .c{ transition-delay:.42s }
@keyframes vy-tampon{
0%{ opacity:0; transform:translateY(-150px) rotate(-18deg) scale(1.25) }
18%{ opacity:1 }
38%{ opacity:1; transform:translateY(-6px) rotate(-4deg) scale(1.05) }
46%{ opacity:1; transform:translateY(4px) rotate(0) scale(.94) }
64%{ opacity:1; transform:translateY(0) rotate(0) scale(.97) }
100%{ opacity:0; transform:translateY(-120px) rotate(10deg) scale(1.1) }
}
@keyframes vy-encre{ 0%{ opacity:.9; transform:scale(.4) } 100%{ opacity:0; transform:scale(1.7) } }
@keyframes vy-bump{ 0%{ transform:none } 30%{ transform:translateY(5px) scale(.985) } 100%{ transform:none } }
.vy.e2:not(.e3) .vy__notif-in{ opacity:1; transform:translateX(-50%) scale(var(--inv)) rotate(-1.2deg) }
.vy.e3 .vy__case[data-i="6"] .c{ transition-delay:.15s }
.vy.e3 .vy__case[data-i="7"] .c{ transition-delay:.45s }
.vy.e3 .vy__carte{ transform:rotateY(180deg); transition-delay:.85s }
.vy.e4 .vy__carte{ transform:rotateY(360deg); transition-delay:0s }
.vy.e4 .vy__case[data-i="7"]{ animation:vy-attend 1.6s ease-in-out infinite }
.vy.e4 .vy__case[data-i="7"] .g{ opacity:.55 }
@keyframes vy-attend{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.16) } }
.vy--quai{ top:auto; left:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
width:calc(300px * var(--s, .5)); height:calc(400px * var(--s, .5));
transform:translateY(24px); transition:opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1) }
.vy--quai.is-on{ transform:none }
.vy--quai .vy__pose{ top:auto; bottom:0; transform-origin:0 100%; transform:scale(var(--s, .5)) }
.vy--quai .vy__notif{ top:auto; bottom:100% }
.vy--quai .vy__notif-in{ left:0; top:auto; bottom:14px; transform-origin:0 100%;
transform:scale(var(--inv)) translateY(24px) }
.vy--quai.e2:not(.e3) .vy__notif-in{ animation:vy-relance 5s cubic-bezier(.2,.8,.2,1) both }
@keyframes vy-relance{
0%{ opacity:0; transform:scale(var(--inv)) translateY(24px) }
10%,82%{ opacity:1; transform:scale(var(--inv)) translateY(0) }
100%{ opacity:0; transform:scale(var(--inv)) translateY(0) }
}
.vy-place > .vy{ position:relative; display:block; opacity:1; z-index:auto;
width:calc(300px * var(--s, .86)); height:calc(400px * var(--s, .86)) }
.vy-place > .vy .vy__pose{ transform:scale(var(--s, .86)) }
.vy-place > .vy,.vy-place > .vy *{ animation:none !important; transition:none !important }
.vy-place > .vy .vy__tampon,.vy-place > .vy .vy__encre{ opacity:0 }
.vy-statique .vy-place{ display:block }
@media (max-width:1023px){ .vy-statique .vy-place > .vy{ --s:.6; margin-top:44px } }
@media (min-width:1024px){ .vy-statique .vy-place > .vy{ position:sticky; top:110px } }
.essai__carte{ perspective:1100px }
.accueil .hero__carte[data-incline]{ position:relative; transform-style:preserve-3d; will-change:transform }
.essai__holo{ border-radius:22px; z-index:3; opacity:var(--ho,.3); transition:opacity .3s ease }
.essai__teintes{ display:flex; gap:12px; margin-top:4px }
.essai__teintes button{ width:30px; height:30px; padding:0; border-radius:50%; border:0; cursor:pointer;
box-shadow:0 0 0 1px rgba(84,58,30,.2), 0 6px 14px -8px rgba(60,38,14,.6); transition:transform .2s ease }
.essai__teintes button:hover{ transform:scale(1.08) }
.essai__teintes button.is-on{ box-shadow:0 0 0 3px var(--cream), 0 0 0 5px var(--sky-ink) }
.essai__teintes button:focus-visible{ outline:2.5px solid var(--brown); outline-offset:5px }