@font-face{font-family:"Cormorant";src:url(fonts/cormorant-500-italic.woff2) format("woff2");font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:"Outfit";src:url(fonts/outfit-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url(fonts/outfit-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Caveat";src:url(fonts/caveat-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--paper:#F4EEE3; --paper-2:#EBE2D2; --card:#FBF8F2; --ink:#3A3029; --ink-2:#6A5E52; --ink-3:#958878; --line:#DDD2C0; --accent:#8C5E2A; --accent-2:#B98A4E; --night:#2E2722;
 --sky-a:#F0D6BC; --sky-b:#E7E1EE; --serif:"Cormorant", "Cormorant Garamond", Georgia, serif; --sans:"Outfit", "Helvetica Neue", Arial, sans-serif; --hand:"Caveat", "Bradley Hand", cursive; --r:20px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#1E1A16; --paper-2:#26211C; --card:#2A241E; --ink:#F1E9DC; --ink-2:#CDBFAE; --ink-3:#9C8E7C; --line:#3B342C; --accent:#D9AE72; --accent-2:#B98A4E; --sky-a:#3A2E27; --sky-b:#2B2733; color-scheme:dark}}
:root[data-theme="dark"]{--paper:#1E1A16; --paper-2:#26211C; --card:#2A241E; --ink:#F1E9DC; --ink-2:#CDBFAE; --ink-3:#9C8E7C; --line:#3B342C; --accent:#D9AE72; --sky-a:#3A2E27; --sky-b:#2B2733; color-scheme:dark}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit} img{max-width:100%; height:auto; display:block}
.wrap{max-width:1120px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none}
.brand b{font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.9rem; letter-spacing:-.01em; line-height:1} .brand small{font-family:var(--hand); font-size:1.05rem; color:var(--ink-3)}
.nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.nav a{text-decoration:none; font-size:.92rem; padding:7px 12px; border-radius:999px; color:var(--ink-2)} .nav a:hover{background:var(--paper-2)}
.nav a.lang{border:1px solid var(--line)}
@media (max-width:640px){ .nav a.hide-s{display:none} }
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg, var(--sky-a), var(--sky-b) 70%, var(--paper)); transition:background .9s ease}
.hero .drop{position:absolute; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(0); opacity:.9; filter:blur(18px); animation:drop 1.4s ease-out forwards}
@keyframes drop{to{transform:translate(-50%,-50%) scale(1); opacity:0}}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; padding-block:clamp(48px,8vw,96px)}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} }
.eyebrow{font-family:var(--hand); font-size:1.35rem; color:var(--accent); margin:0 0 6px; line-height:1.2}
h1{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2.8rem,7vw,5rem); line-height:.98; letter-spacing:-.01em; margin:0; text-wrap:balance}
.hero p.lead{font-size:1.15rem; color:var(--ink-2); max-width:33em; margin:22px 0 26px}
.store{display:inline-flex; align-items:center; gap:12px; margin:0; background:var(--card); border-radius:14px; padding:10px 18px; border:1px solid var(--line)}
.store span{display:flex; flex-direction:column; line-height:1.15} .store small{font-size:.72rem; color:var(--ink-3)} .store b{font-size:1.1rem; font-weight:500}
.badge img{height:54px; width:auto}
.note{font-size:.88rem; color:var(--ink-3); margin-top:10px}
.attente{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; max-width:460px}
.attente input{flex:1 1 220px; min-width:0; font:inherit; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.attente button,.btn{font:inherit; font-weight:500; padding:12px 18px; border-radius:12px; border:0; background:var(--night); color:#F4EEE3; cursor:pointer; text-decoration:none; display:inline-block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .attente button,:root:not([data-theme="light"]) .btn{background:#F1E9DC; color:#2E2722}}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.phones{position:relative; height:clamp(440px,52vw,620px)}
.phones img{position:absolute; width:52%; border-radius:30px; box-shadow:0 40px 70px -34px rgba(58,48,41,.55); border:1px solid rgba(58,48,41,.12)}
.phones img:nth-child(1){left:0; top:7%; transform:rotate(-5deg)} .phones img:nth-child(2){right:2%; top:0; transform:rotate(4deg)}
@media (max-width:860px){ .phones{height:auto; display:flex; gap:12px} .phones img{position:static; width:48%; transform:none!important} }
section{padding-block:clamp(56px,8vw,96px)}
h2{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.02; margin:0 0 14px; text-wrap:balance}
.sub{color:var(--ink-2); max-width:42em; margin:0 0 36px}
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:s; list-style:none; padding:0; margin:0}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .steps{grid-template-columns:1fr} }
.steps li{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; counter-increment:s}
.steps li::before{content:"Pl. " counter(s, upper-roman); display:block; font-family:var(--hand); font-size:1.2rem; color:var(--accent); margin-bottom:8px}
.steps b{display:block; font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.45rem; line-height:1.1; margin-bottom:6px} .steps span{color:var(--ink-2); font-size:.95rem}
.nimbes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:760px){ .nimbes{grid-template-columns:repeat(2,minmax(0,1fr))} }
.nimbe{margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit}
.nimbe img{aspect-ratio:1; object-fit:cover; width:100%; transition:transform .6s ease} .nimbe:hover img{transform:scale(1.03)}
.nimbe span{display:block; padding:10px 14px 14px; font-family:var(--hand); font-size:1.3rem; line-height:1.2} .nimbe small{display:block; font-family:var(--sans); font-size:.82rem; color:var(--ink-3)}
.nimbe[aria-pressed="true"]{outline:2px solid var(--accent); outline-offset:2px}
.stades{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; max-width:640px}
.stades figure{margin:0} .stades img{border-radius:var(--r); border:1px solid var(--line)} .stades figcaption{font-family:var(--hand); font-size:1.2rem; color:var(--ink-2); margin-top:6px}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
.dark{background:var(--night); color:#F1E9DC} .dark .sub,.dark p,.dark li{color:#D6CABA} .dark .eyebrow{color:#D9AE72}
.promise{display:grid; gap:12px; list-style:none; padding:0; margin:0}
.promise li{display:flex; gap:12px; align-items:flex-start} .promise li::before{content:""; flex:none; width:9px; height:9px; margin-top:.6em; border-radius:50%; background:#D9AE72}
.small{font-size:.88rem; color:var(--ink-3)}
.faq{max-width:780px} .faq details{border-bottom:1px solid var(--line); padding:16px 0} .faq summary{cursor:pointer; font-weight:500; font-size:1.05rem}
.faq p{color:var(--ink-2); margin:10px 0 0}
.voix{display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center}
@media (max-width:560px){ .voix{grid-template-columns:1fr} }
footer{border-top:1px solid var(--line); padding-block:36px; font-size:.92rem; color:var(--ink-2)}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between; align-items:center}
footer nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.doc{max-width:760px; padding-block:40px 80px}
.doc h1{font-size:clamp(2.4rem,6vw,3.4rem)} .doc h2{font-size:1.9rem; margin-top:40px} .doc h3{font-size:1.1rem; margin:26px 0 6px; font-weight:500}
.doc p,.doc li{color:var(--ink-2); max-width:65ch} .doc .maj{font-family:var(--hand); font-size:1.2rem; color:var(--ink-3)}
.box{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin:18px 0}
.box.urg{border-color:var(--accent-2)}
.urg dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:8px 0 0} .urg dt{font-family:var(--serif); font-style:italic; font-size:1.6rem; line-height:1} .urg dd{margin:0; align-self:center}
table{border-collapse:collapse; width:100%; font-size:.95rem} th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top} th{color:var(--ink-3); font-weight:500}
.tw{overflow-x:auto}
.mail{font-size:1.2rem; font-weight:500; user-select:all}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .hero{transition:none} .hero .drop{display:none} .nimbe img{transition:none} }