/* Version ordinateur (>= 1024 px). Chargée en plus de style.css : le mobile n'est pas modifié.
   Mêmes jetons (anthracite, ivoire, cuivre, Playfair + Source Sans 3), mise en page éditoriale, colonnes collantes. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--pad:64px;--wrap:1560px}
html,body{overflow-x:clip}
body{background:linear-gradient(#F5F1EAbd,#F5F1EAbd),url(/img/ill/dk_paper.jpg) center top/cover fixed,var(--bg)}
.m-only{display:none!important}.d-only{display:block}.dk{display:block}
.stick{display:none!important}

/* ---------- cadre et en-tête */
.screen{max-width:var(--wrap);padding:30px var(--pad) 72px}
.top{margin-bottom:clamp(12px,2.2vh,30px);padding-bottom:clamp(10px,1.8vh,20px)}
.brand img{height:clamp(36px,5vh,46px)}
.chip{font-size:12.5px;padding:7px 14px;letter-spacing:.08em;text-transform:uppercase}
h1{font-size:56px;line-height:1.04;letter-spacing:-.02em;margin:14px 0 18px}
h2{font-size:36px;line-height:1.1}
.sub{font-size:20px;line-height:1.55;max-width:36em}
.foot{margin-top:64px;padding-top:22px;font-size:13.5px}
.btn{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px #A65A3250}
.btn:active{transform:none}
.opt,.check{transition:transform .2s var(--ease),border-color .2s,box-shadow .2s,background .2s}
.opt:hover,.check:hover{border-color:#B8693E;box-shadow:0 14px 32px #1F232618;transform:translateY(-2px)}
:focus-visible{outline:3px solid #B8693E;outline-offset:3px;border-radius:8px}
.kick{font:700 12px/1 'Source Sans 3',Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#A65A32;margin-bottom:14px}

/* ---------- accueil : héros pleine largeur */
.eh{position:relative;display:grid;grid-template-columns:minmax(0,clamp(500px,30vw,580px));align-content:center;min-height:clamp(540px,calc(100vh - 96px),900px);
 width:min(var(--vw,100vw),2000px);margin-left:calc(50% - min(var(--vw,100vw) / 2,1000px));padding:clamp(18px,4vh,64px) max(var(--pad),calc((min(var(--vw,100vw),2000px) - var(--wrap))/2 + var(--pad)));
 background:#F6F1E6 url(/img/ill/dk_hero.jpg) right center/auto 100% no-repeat;border-block:1px solid var(--line)}
.eh::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F5F1EA 0%,#F5F1EA00 46%);pointer-events:none}
.eh>*{position:relative;z-index:1}
.eh h1{font-size:clamp(34px,min(3.5vw,5.4vh),68px);margin:0 0 clamp(8px,1.6vh,18px)}
.eh .sub{font-size:clamp(15px,min(1.25vw,2.3vh),23px)}
.collage{display:none}
.eh .meta{order:3;font-size:14px;margin-top:clamp(8px,1.6vh,16px);gap:22px;color:#4a5056}
.eh-q{font:700 13px/1 'Source Sans 3',Inter,sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:#A65A32;margin:clamp(12px,2.4vh,24px) 0 clamp(8px,1.4vh,12px)!important}
.eh .opt{background:#fffdf8f2;backdrop-filter:blur(6px);padding:clamp(6px,1.1vh,11px) 16px;margin-bottom:clamp(6px,1vh,9px);border-radius:14px;box-shadow:0 8px 22px #1F232612}
.eh .opt .thumb{width:clamp(44px,6vh,58px);height:clamp(44px,6vh,58px);border-radius:11px}
.eh .opt div{font:700 18px/1.25 'Source Sans 3',Inter,sans-serif}.eh .opt span{font:400 15.5px/1.4 'Source Sans 3',Inter,sans-serif;color:var(--mute);display:block;margin-top:2px}
.eh .opt::after{font-size:32px;color:#A65A32}

.how,.incl{padding:96px 0 0}
.how h2,.incl h2{font-size:40px;max-width:16em;margin-bottom:44px}
.how-g{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.how-g li{position:relative;background:#fffdf8;border:1px solid var(--line);border-radius:20px;padding:34px 30px 32px;box-shadow:0 10px 30px #1F23260d;transition:transform .25s var(--ease),box-shadow .25s}
.how-g li:hover{transform:translateY(-4px);box-shadow:0 22px 44px #1F232618}
.how-g b{display:block;font:600 64px/1 'Playfair Display',Fraunces,serif;color:#B8693E;opacity:.9;margin-bottom:16px}
.how-g h3{font-size:24px;margin-bottom:8px}.how-g p{color:var(--mute);font-size:16.5px}
.incl-g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.incl-g article{background:#fffdf8;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px #1F23260d;transition:transform .25s var(--ease),box-shadow .25s}
.incl-g article:hover{transform:translateY(-4px);box-shadow:0 22px 44px #1F232618}
.incl-g img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.incl-g h3{font-size:24px;margin:22px 28px 8px}.incl-g p{margin:0 28px 28px;color:var(--mute);font-size:16.5px}
.band{margin-top:96px;position:relative;width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw) / 2);min-height:420px;display:flex;align-items:center;
 padding:0 max(var(--pad),calc((var(--vw,100vw) - var(--wrap))/2 + var(--pad)));background:#1F2326 url(/img/ill/dk_merci.jpg) center/cover}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1F2326ee 0%,#1F2326cc 42%,#1F232600 78%)}
.band>div{position:relative;max-width:520px;color:#F5F1EA}
.band h2{font-size:44px;color:#F5F1EA;margin-bottom:10px}.band p{font-size:19px;color:#E4DDD0;margin-bottom:26px}
.band .btn{display:inline-block;width:auto;padding:18px 34px}

/* ---------- questionnaire : panneau d'illustration collant */
.qgrid{display:grid;grid-template-columns:minmax(360px,.58fr) minmax(0,1fr);max-width:1460px;margin-inline:auto;gap:88px;align-items:start;margin-top:8px}
.q-aside{position:sticky;top:28px;display:block;border-radius:28px;overflow:hidden;box-shadow:0 26px 60px #1F232632;aspect-ratio:3/4;background:#E9E2D4}
.q-aside img{display:block;width:100%;height:100%;object-fit:cover}
.q-aside::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(0deg,#1F2326cc,#1F232600)}
.qa-cap{position:absolute;left:26px;right:26px;bottom:24px;z-index:1;color:#F5F1EA;display:flex;flex-direction:column;gap:4px}
.qa-cap b{font:600 26px/1.1 'Playfair Display',Fraunces,serif}.qa-cap span{font:600 13px 'Source Sans 3',Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#E8C9B2}
.qmain{padding-top:6px}
.qmain .q{font:600 28px/1.25 'Playfair Display',Fraunces,serif;margin:30px 0 8px}
.qmain .opt{padding:18px 22px;font-size:18px}
.pl{font-size:14px}.prog{height:10px}
.qmain .btn{max-width:360px}

/* ---------- résultat */
.cols{display:grid;grid-template-columns:minmax(0,700px) 440px;justify-content:center;gap:80px;align-items:start}
.col-a,.col-b{display:block}
.col-b{position:sticky;top:28px}
.col-b .photo{margin-top:0}
.cols h1{font-size:46px}
.photo{border-radius:26px}

/* ---------- paywall */
.bar{width:var(--vw,100vw);margin:-30px 0 34px calc(50% - var(--vw,100vw) / 2);padding:16px var(--pad) 18px}
.bar-t{font-size:15px!important;margin-bottom:10px!important}
.seg{min-width:78px!important}.seg b{font-size:38px!important}
.pw-grid{display:grid;grid-template-columns:minmax(0,700px) 440px;justify-content:center;column-gap:88px;align-items:start}
.pw-a{grid-column:1;grid-row:1}.pw-b{grid-column:1;grid-row:2}
.pw-grid>.price{grid-column:2;grid-row:1/span 2;position:sticky;top:150px;margin:0;padding:34px 30px;border-radius:14px}
.price .now{font-size:76px}.price .now sup{font-size:32px}
.pw-a h1{font-size:50px}
.pw-a .photo{aspect-ratio:16/9!important}
.fiche-prev{padding:18px;border-radius:12px}.fp-title{font-size:24px}.fp-steps li{font-size:16px}
.ticks li{font-size:17px;padding:12px 0 12px 36px}.ticks li::before{top:12px}
.sheet{padding:10px 28px;border-radius:14px}summary{font-size:18px;padding:4px 0}details p{font-size:16.5px}
.pw-b h2{font-size:34px;margin-top:44px}

/* ---------- commande */
.cs-grid{display:grid;grid-template-columns:minmax(0,720px) 400px;grid-template-areas:"f s";justify-content:center;column-gap:80px;align-items:start;margin-top:8px}
.cs-side{grid-area:s;position:sticky;top:28px}.cs-form{grid-area:f;max-width:720px}
.cs-side .card{padding:26px;border-radius:14px}
.cs-trust{display:block;list-style:none;padding:0;margin:18px 0 0}
.cs-trust li{position:relative;padding:11px 0 11px 34px;border-bottom:1px dashed #d9cfbd;font-size:15.5px;color:#3a4046}
.cs-trust li:last-child{border:0}
.cs-trust li::before{content:"✓";position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;background:#B8693E;color:#fff;font:700 12px/22px Inter;text-align:center}
.cs-form .btn{max-width:420px}
input[type=email],input[type=text]{font-size:19px;padding:18px 20px}

/* ---------- merci et offre */
.mc-grid{display:grid;grid-template-columns:minmax(0,700px) 440px;justify-content:center;gap:80px;align-items:start}
.mc-main h1{font-size:46px}
.mc-wide{aspect-ratio:21/9;margin-top:6px!important}
.mc-grid>.up{position:sticky;top:150px;margin:0;padding:30px;border-radius:14px}
.tl b{font-size:18px}.tl span{font-size:16px}
.of-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:22px auto 0;max-width:1000px}
.of-opts .opt{min-height:120px;font-size:20px}

/* ---------- pages légales */
.screen.legal{max-width:860px}
.legal h1{font-size:44px}.legal h2{font-size:26px;margin:34px 0 8px}.legal p,.legal li{font-size:17px;line-height:1.7}

/* ---------- 1024 à 1279 px : un peu plus compact */
@media (max-width:1279px){
 :root{--pad:36px}
 .eh{min-height:700px;grid-template-columns:minmax(0,440px);background-size:auto 96%}.eh h1{font-size:44px}.eh .sub{font-size:18px}
 .qgrid{grid-template-columns:340px minmax(0,1fr);gap:44px}
 .cols,.pw-grid,.mc-grid{grid-template-columns:minmax(0,1fr) 390px;column-gap:44px}
 .cs-grid{grid-template-columns:minmax(0,1fr) 360px;column-gap:44px}
}

/* offre : cartes avec image */
.of-opts .opt{padding:16px 22px;gap:18px}.of-opts .thumb{width:84px;height:84px;border-radius:14px}

.cs-grid,.qgrid,.cols,.pw-grid,.mc-grid{width:100%}
@media (min-width:1600px){.how h2,.incl h2{font-size:44px}.how-g p,.incl-g p{font-size:17.5px}.sub{font-size:21px}}

/* réponses sur deux colonnes (une seule colonne quand une réponse est longue) */
.og{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.og.wide{grid-template-columns:1fr}
.og .opt{margin:0!important;height:100%}
.qmain input[type=text]{max-width:520px}

.og{margin-bottom:10px}.qmain .q{margin-top:36px}

/* audit UI/UX : colonnes collantes jamais plus hautes que la fenêtre, illustration du questionnaire bornée, focus non masqué par la barre */
html{scroll-padding-top:150px}
.q-aside{aspect-ratio:auto;height:min(calc(100vh - 56px),680px)}
@media (max-height:880px){.col-b{position:static}}
@media (max-height:640px){.pw-grid>.price,.mc-grid>.up,.cs-side{position:static}}
.how-g b{font-variant-numeric:lining-nums}
/* très petites fenêtres : on garde le titre et les 3 choix visibles sans défiler */
@media (max-height:700px){.eh .meta{display:none}}
@media (max-height:640px){.eh .sub{display:none}}
.pw-grid{grid-template-columns:minmax(0,680px) 440px}.mc-grid,.cols{grid-template-columns:minmax(0,680px) 440px}
@media (max-width:1279px){.pw-grid,.mc-grid,.cols{grid-template-columns:minmax(0,1fr) 390px}}
@media (max-height:640px){.eh h1{font-size:30px}.eh .opt{padding:5px 14px}}
@media (max-width:1100px){.eh{background-position:calc(100% + 120px) center}}
/* écrans ultra-larges : le héros (2000 px max) fond dans le papier au lieu de s'arrêter net */
@media (min-width:2001px){.eh{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);border-inline:0}}
/* mêmes formes que le mobile : cartes 10 px, images 16 px */
.how-g li,.incl-g article,.fiche-prev,.pw-grid>.price,.cs-side .card,.mc-grid>.up,.sheet,.eh .opt{border-radius:10px}
.q-aside,.photo{border-radius:16px}
.chip{font-size:12.5px}