/* ==========================================================
   DABOX CRÉATION · feuille de style commune
   Palette : sauge #637669 · taupe #D5CCC4 · sable #F5F1EC · encre #3F3C35
   ========================================================== */

:root{
  --sauge:#637669; --sauge-f:#4f5f54; --taupe:#D5CCC4; --sable:#F5F1EC; --encre:#3F3C35;
  --gris:#6b675f; --ligne:rgba(63,60,53,.12); --bronze:#9a7a5c;
  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --sans:'Jost', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --e1:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.65,0,.35,1);
}
html{scroll-behavior:smooth;background:#fff}
.dbx{position:relative;background:#fff;color:var(--encre);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
.dbx *,.dbx *::before,.dbx *::after,.cfg *,.cfg *::before,.cfg *::after,.c3 *,.c3 *::before,.c3 *::after{box-sizing:border-box}
:where(.dbx) a{color:inherit;text-decoration:none}
.dbx img{display:block;max-width:100%}
.dbx ::selection{background:var(--sauge);color:#fff}
.dbx :focus-visible,.cfg :focus-visible{outline:1px solid var(--sauge);outline-offset:4px}
.dbx p,.cfg p{margin:0}
.dbx [id]{scroll-margin-top:132px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,5vw,72px)}
.sec{padding-block:clamp(96px,10vw,150px)}
.sec-sable{background:var(--sable)}
.sec-sauge{background:var(--sauge);color:#fff}
.verif{font-family:var(--sans);font-style:normal;font-size:.78em;letter-spacing:.02em;background:rgba(213,204,196,.55);color:#4d4a43;padding:1px 6px;border-radius:2px;white-space:nowrap}

/* ---------- Typographie ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 28px;font:500 11.5px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--sauge-f)}
.eyebrow::before{content:"";flex:0 0 36px;height:1px;background:currentColor;opacity:.55}
.eyebrow.clair{color:#fff}
.eyebrow.centre{justify-content:center}
.h1,.h2,.h3{font-family:var(--serif);font-style:italic;font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.012em}
.h1{font-size:clamp(36px,4.2vw,62px);line-height:1.06}
.h1.xl{font-size:clamp(40px,5.2vw,78px);line-height:1.02;letter-spacing:-.015em}
.h2{font-size:clamp(28px,3vw,44px);line-height:1.12}
.h3{font-size:clamp(22px,1.8vw,27px);line-height:1.22}
.h1 em,.h2 em,.h3 em{font-style:italic;color:var(--sauge)}
.sec-sauge .h2 em,.sec-sauge .h3 em{color:#e6eee8}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.8;color:#57534b;max-width:36em;text-wrap:pretty}
.sec-sauge .lead{color:#fff}
.txt{color:var(--gris);text-wrap:pretty}
.sec-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(56px,7vw,100px)}
.sec-head.centre{display:block;text-align:center;max-width:820px;margin-inline:auto}
.sec-head.centre .lead{margin:28px auto 0}

/* ---------- Boutons et liens ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:54px;padding:0 32px;border-radius:999px;border:1px solid var(--encre);background:transparent;color:var(--encre);font:400 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .5s var(--e1),border-color .5s var(--e1)}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--encre);transform:translateY(102%);transition:transform .7s var(--e1)}
.btn:hover{color:#fff}
.btn:hover::before{transform:none}
.btn-plein{background:var(--encre);color:#fff}
.btn-plein::before{background:var(--sauge)}
.btn-plein:hover{border-color:var(--sauge)}
.btn-clair{border-color:#fff;color:#fff}
.btn-clair::before{background:#fff}
.btn-clair:hover{color:var(--encre)}
.fl{width:26px;height:10px;flex:none;transition:transform .6s var(--e1)}
.btn:hover .fl,.lien:hover .fl,a:hover>.fl,button:hover .fl{transform:translateX(5px)}
.lien{display:inline-flex;align-items:center;gap:12px;font:400 12px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:0 0 6px;border:0;color:inherit;cursor:pointer;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .7s var(--e1)}
.lien:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- Bannière de navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--ligne)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:70px}
.nav-g{justify-self:start}
.nav-d{justify-self:end;display:flex;align-items:center;gap:18px}
.logo{display:block;flex:none}
.logo img{height:22px;width:auto}
.switch{display:inline-flex;align-items:baseline;gap:10px;font:400 12px/1.3 var(--sans);color:var(--gris);letter-spacing:.03em}
.switch i{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--encre);letter-spacing:0;transition:color .4s}
.switch:hover i{color:var(--sauge)}
.nav .btn{min-height:42px;padding:0 22px;font-size:11px}
.nav-titres{border-top:1px solid var(--ligne)}
.nav-titres ul{list-style:none;margin:0 auto;max-width:1320px;padding:0 clamp(20px,5vw,72px);display:flex;justify-content:center;gap:clamp(18px,2.6vw,42px);overflow-x:auto;scrollbar-width:none}
.nav-titres ul::-webkit-scrollbar{display:none}
.nav-titres a{position:relative;display:block;white-space:nowrap;padding:15px 0 14px;font:400 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#57534b;transition:color .4s}
.nav-titres a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--sauge);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e1)}
.nav-titres a:hover{color:var(--encre)}
.nav-titres a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:980px){.nav-titres ul{justify-content:flex-start}}
@media (max-width:640px){.switch span{display:none}.nav .btn{display:none}.nav-in{grid-template-columns:auto 1fr;}.nav-in .logo{order:-1}.nav-g{justify-self:end}}

/* ---------- Voile d’entrée et curseur ---------- */
.veil{position:fixed;inset:0;z-index:300;background:#fff;pointer-events:none;animation:veil 1.2s var(--e2) .05s both}
@keyframes veil{from{opacity:1}to{opacity:0;visibility:hidden}}
.entre{animation:entre 1.4s var(--e1) both}
.entre-1{animation-delay:.25s}.entre-2{animation-delay:.4s}.entre-3{animation-delay:.55s}.entre-4{animation-delay:.7s}
@keyframes entre{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.curseur{position:fixed;left:0;top:0;z-index:400;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1px solid rgba(99,118,105,.75);pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;transition:width .45s var(--e1),height .45s var(--e1),margin .45s var(--e1),background-color .45s,border-color .45s,opacity .4s}
.curseur span{font:500 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s}
.curseur.is-lien{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(99,118,105,.1)}
.curseur.is-tour{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--sauge);border-color:var(--sauge)}
.curseur.is-tour span{opacity:1}
@media (hover:none),(pointer:coarse){.curseur{display:none}}

/* ---------- Emplacements photo / vidéo ---------- */
.ph{position:relative;margin:0;overflow:hidden;background:var(--sable);isolation:isolate;width:100%;display:block}
.ph-in{position:absolute;inset:-7% 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;background:repeating-linear-gradient(135deg,rgba(99,118,105,.055) 0 1px,transparent 1px 13px)}
.ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(99,118,105,.25);pointer-events:none;z-index:2}
.ph-ico{width:28px;height:28px;color:var(--sauge)}
.ph-k{font:500 10px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--sauge-f)}
.ph figcaption,.ph .cap{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;color:#55514a;max-width:32ch;text-wrap:balance}
.ph-sombre{background:#56675b}
.ph-sombre .ph-in{background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 13px)}
.ph-sombre .ph-ico,.ph-sombre .ph-k,.ph-sombre figcaption,.ph-sombre .cap{color:#fff}
.ph-sombre::after{border-color:rgba(255,255,255,.3)}
.ph-fill{position:absolute;inset:0;height:100%}
.ph-petit .ph-in{padding:14px;gap:6px}
.ph-petit::after{inset:6px}
.ph-petit .cap{font-size:12.5px}
.ph-petit .ph-k{font-size:8.5px}
.r45{aspect-ratio:4/5}.r34{aspect-ratio:3/4}.r11{aspect-ratio:1/1}.r32{aspect-ratio:3/2}.r169{aspect-ratio:16/9}.r23{aspect-ratio:2/3}.r219{aspect-ratio:21/9}

/* ==========================================================
   ACCUEIL · deux univers sur une vidéo plein écran
   ========================================================== */
.home{height:100vh;min-height:600px;display:flex;flex-direction:column;overflow:hidden;background:#46564b;color:#fff}
.home-video{position:absolute;inset:0;z-index:0}
.home-video .ph{position:absolute;inset:0;height:100%;background:#4a5a4f}
.home-video .ph-in{justify-content:flex-start;padding-top:clamp(110px,16vh,170px)}
.home-video .ph-k,.home-video .cap,.home-video .ph-ico{color:rgba(255,255,255,.88)}
.home-video .cap{max-width:46ch}
.home-video .ph::after{border-color:rgba(255,255,255,.18)}
.home-top{position:absolute;inset:0 0 auto 0;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:26px clamp(20px,4vw,52px);pointer-events:none;color:#fff;animation:entre 1.4s var(--e1) 3s both}
.home-top>*{pointer-events:auto}
.home-top .logo img{height:24px}
.ht-g{font:400 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ht-d{justify-self:end}
.split{position:relative;z-index:2;flex:1;display:flex;min-height:0}
.univ{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;color:#fff;transition:flex-grow 1.2s var(--e1)}
.split:hover .univ{flex-grow:.8}
.split .univ:hover,.split .univ:focus-visible{flex-grow:1.3}
.univ-voile{position:absolute;inset:0;z-index:1;background:rgba(26,28,24,.3);transition:background-color 1.2s var(--e1)}
.split:hover .univ .univ-voile{background:rgba(26,28,24,.55)}
.split .univ:hover .univ-voile,.split .univ:focus-visible .univ-voile{background:rgba(26,28,24,.04)}
.univ-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(22,22,20,.62) 0%,rgba(22,22,20,.3) 30%,rgba(22,22,20,0) 60%)}
.univ-in{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:0 clamp(24px,4.5vw,72px) clamp(70px,9vh,110px);animation:entre 1.4s var(--e1) both}
.u1 .univ-in{animation-delay:3.1s}.u2 .univ-in{animation-delay:3.3s}
.univ-in .eyebrow{margin:0;color:#fff}
.univ-t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,3.4vw,54px);line-height:1.05;letter-spacing:-.01em;margin:0}
.univ-p{max-width:28em;font-size:17px;line-height:1.7;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .9s var(--e1) .1s,transform .9s var(--e1) .1s}
.univ:hover .univ-p,.univ:focus-visible .univ-p{opacity:1;transform:none}
.univ-cta{display:inline-flex;align-items:center;gap:14px;margin-top:6px;font:400 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.univ-cta i{display:block;width:34px;height:1px;background:currentColor;transition:width .9s var(--e1)}
.univ:hover .univ-cta i{width:96px}
.seam{position:relative;flex:0 0 0;z-index:6}
.seam::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:rgba(255,255,255,.45)}
.badge{position:absolute;left:0;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 24px 60px -24px rgba(0,0,0,.45);animation:badge-in 1.4s var(--e1) 3.5s both;transition:transform .9s var(--e1)}
.badge::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(99,118,105,.5)}
.badge::after{content:"";position:absolute;inset:11px;border-radius:50%;border:1px solid rgba(99,118,105,.2)}
.badge img{width:50px;height:auto;position:relative}
.split:hover .badge{transform:scale(.92)}
@keyframes badge-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.home-bot{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;justify-content:space-between;gap:20px;padding:22px clamp(20px,4vw,52px);font:400 10.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);pointer-events:none;animation:entre 1.4s var(--e1) 3.4s both}
.intro{position:absolute;inset:0;z-index:20;background:#fff;color:var(--encre);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;pointer-events:none;animation:rideau 1.3s var(--e2) 2.7s both}
.intro img{width:min(360px,64vw);height:auto;animation:logo-in 1.8s var(--e1) .15s both}
.intro i{display:block;width:120px;height:1px;background:var(--sauge);animation:trait-in 1.4s var(--e1) .8s both}
.intro p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);margin:0;animation:sig-in 1.6s var(--e1) 1.1s both}
@keyframes rideau{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes logo-in{from{opacity:0;clip-path:inset(100% 0 0 0);transform:translateY(18px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes sig-in{from{opacity:0;letter-spacing:.14em;filter:blur(6px)}to{opacity:1;letter-spacing:0;filter:none}}
@keyframes trait-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .split{flex-direction:column}
  .seam::before{left:0;right:0;top:-.5px;bottom:auto;width:auto;height:1px}
  .badge{left:50vw;top:0;width:92px;height:92px;margin:-46px 0 0 -46px}
  .badge img{width:34px}
  .home-top{grid-template-columns:auto 1fr;padding-top:20px}
  .ht-g{display:none}
  .univ-p{opacity:1;transform:none;font-size:15px}
  .univ-in{padding-bottom:34px;gap:10px}
  .univ-t{font-size:36px}
  .home-bot,.home-video .cap{display:none}
}

/* ==========================================================
   PAGES UNIVERS · éléments communs
   ========================================================== */
.hero2{padding-block:clamp(56px,7vw,110px) clamp(80px,9vw,130px)}
.hero2-titre{margin-bottom:clamp(40px,5vw,72px)}
.hero2-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:end}
.hero2-media{grid-column:1/span 8}
.hero2-side{grid-column:9/span 4;padding-bottom:8px}
.hero2-side .lead{font-size:17.5px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:36px}
.defil{display:flex;align-items:center;gap:14px;margin-top:48px;font:400 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gris)}
.defil i{position:relative;width:1px;height:46px;background:var(--ligne);overflow:hidden}
.defil i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--sauge);animation:defil 2.4s var(--e2) infinite}
@keyframes defil{to{top:100%}}
@media (max-width:900px){.hero2-media,.hero2-side{grid-column:1/-1}}

.manif{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,32px);line-height:1.45;letter-spacing:-.005em;max-width:25em;margin:0;text-wrap:pretty}
.manif em{color:var(--sauge)}
.manif-sig{margin-top:44px;display:flex;align-items:center;gap:16px;font:400 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.manif-sig::before{content:"";width:46px;height:1px;background:var(--sauge)}

/* Quatre instants : défilement horizontal */
.inst{position:relative}
.inst-stick{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(80px,9vw,130px);overflow-x:auto;scroll-snap-type:x mandatory}
.inst-track{display:flex;align-items:flex-end;gap:clamp(28px,4vw,72px);padding-inline:clamp(20px,5vw,72px);width:max-content}
.inst-intro{flex:none;width:min(440px,80vw);align-self:center;scroll-snap-align:start}
.inst-intro .h2{margin-bottom:24px}
.inst-p{flex:none;width:min(380px,76vw);display:flex;flex-direction:column;gap:18px;scroll-snap-align:start}
.inst-p:nth-child(odd){margin-bottom:70px}
.inst-n{display:flex;align-items:baseline;gap:14px;font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sauge-f)}
.inst-n b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;letter-spacing:0;color:var(--sauge)}
.inst-p h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,1.8vw,27px);line-height:1.15;margin:0}
.inst-p p{color:var(--gris);font-size:15.5px;line-height:1.65}
.inst-fin{flex:none;width:min(340px,70vw);align-self:center;scroll-snap-align:start}

/* Sur mesure */
.sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:clamp(48px,7vw,120px);align-items:start}
.sm-media{position:sticky;top:160px}
.sm-list{list-style:none;margin:56px 0 0;padding:0}
.sm-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:34px 0;border-top:1px solid rgba(63,60,53,.14)}
.sm-item b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:32px;line-height:1;color:var(--sauge)}
.sm-item h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,1.7vw,26px);line-height:1.2;margin:0 0 10px}
.sm-item p{color:var(--gris)}
@media (max-width:900px){.sm-media{position:relative;top:0}}

/* Idées et précédentes compositions */
.compos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,2.6vw,40px);align-items:start}
.cpo{grid-column:span 6;display:flex;flex-direction:column;gap:18px;text-align:left;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
.cpo.g{grid-column:span 7}.cpo.p{grid-column:span 5}.cpo.t{grid-column:span 4}
.cpo.d{margin-top:clamp(0px,8vw,120px)}
.cpo-img{display:block;overflow:hidden;position:relative}
.cpo-img .ph{transition:transform 1.4s var(--e1)}
.cpo:hover .cpo-img .ph{transform:scale(1.04)}
.cpo-tag{position:absolute;left:24px;top:24px;z-index:3;font:500 9.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;background:#fff;color:var(--encre);padding:9px 12px}
.cpo-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ligne);padding-top:16px}
.cpo-n{font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sauge-f)}
.cpo-nom{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2vw,30px);line-height:1.15}
.cpo-txt{display:block;color:var(--gris);font-size:15.5px;line-height:1.6;max-width:34em}
.cpo-maisons{display:block;font:400 12px/1.5 var(--sans);letter-spacing:.06em;color:var(--sauge-f)}
.cpo-cta{display:inline-flex;align-items:center;gap:12px;font:400 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.cpo-cta i{display:block;width:30px;height:1px;background:currentColor;transition:width .8s var(--e1)}
.cpo:hover .cpo-cta i{width:72px}
@media (max-width:900px){.cpo,.cpo.g,.cpo.p,.cpo.t{grid-column:1/-1}.cpo.d{margin-top:0}}

/* Fiche produit (page de composition) */
.fiche{position:fixed;inset:0;z-index:250;background:#fff;overflow-y:auto;overscroll-behavior:contain;animation:fiche-in .8s var(--e1) both}
@keyframes fiche-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.fiche-top{position:sticky;top:0;z-index:6;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.fiche-top .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:70px}
.fermer{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:10px 0;cursor:pointer;font:400 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--encre)}
.fermer svg{width:14px;height:14px}
.fiche-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:clamp(40px,5vw,90px);align-items:start;padding-block:clamp(40px,5vw,80px) 120px}
.fiche-img{position:relative}
.fiche-img>.ph{aspect-ratio:1/1}
.fiche-aide{display:flex;align-items:center;gap:10px;margin-top:16px;font:400 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.pin{position:absolute;z-index:4;width:0;height:0}
.pin>button{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--encre);display:grid;place-items:center;cursor:pointer;font:500 11px/1 var(--sans);box-shadow:0 0 0 1px rgba(63,60,53,.18),0 10px 24px -8px rgba(63,60,53,.5);transition:background-color .35s,color .35s,transform .5s var(--e1)}
.pin>button::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(99,118,105,.6);animation:pouls 2.6s var(--e2) infinite}
@keyframes pouls{0%{transform:scale(.75);opacity:1}100%{transform:scale(1.5);opacity:0}}
.pin:hover>button,.pin:focus-within>button{background:var(--sauge);color:#fff;transform:scale(1.08)}
.pop{position:absolute;left:30px;top:0;width:250px;background:#fff;padding:12px 12px 16px;box-shadow:0 34px 70px -24px rgba(63,60,53,.45);opacity:0;visibility:hidden;transform:translate(10px,-50%);transition:opacity .45s var(--e1),transform .6s var(--e1),visibility .45s;pointer-events:none}
.pin.gauche .pop{left:auto;right:30px;transform:translate(-10px,-50%)}
.pin:hover .pop,.pin:focus-within .pop{opacity:1;visibility:visible;transform:translate(0,-50%)}
.pop .ph{margin-bottom:14px}
.pop strong{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;line-height:1.2}
.pop small{display:block;margin-top:6px;font:500 9.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f)}
.pop p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--gris)}
.fiche-list{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--ligne)}
.fiche-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--ligne);font-size:15.5px}
.fiche-list b{font:500 11px/1 var(--sans);color:var(--sauge)}
.fiche-list small{font:400 12px/1.3 var(--sans);letter-spacing:.06em;color:var(--sauge-f);text-align:right}
.fiche-cta{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-top:44px}
@media (max-width:640px){.pop{width:200px}}

/* Maisons : avant-goût avec aperçu au survol */
.mz-av{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:start}
.m-list{grid-column:1/span 7;list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.m-row{display:grid;grid-template-columns:50px minmax(0,1fr) 30px;gap:18px;align-items:center;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--ligne)}
.m-i{font-family:var(--serif);font-style:italic;color:var(--sauge);font-size:17px}
.m-nom{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.8vw,42px);line-height:1.05;transition:transform .9s var(--e1),color .6s}
.m-row:hover .m-nom,.m-row:focus-visible .m-nom{transform:translateX(16px);color:var(--sauge)}
.m-desc{display:block;margin-top:8px;color:var(--gris);font-size:15px;line-height:1.55;transition:transform .9s var(--e1)}
.m-row:hover .m-desc{transform:translateX(16px)}
.m-lieu{font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sauge-f);margin-right:10px}
.m-row .fl{justify-self:end;opacity:.4;transition:opacity .4s,transform .6s var(--e1)}
.m-row:hover .fl{opacity:1}
.m-apercu{grid-column:9/span 4;position:sticky;top:170px}
.m-cadre{position:relative;aspect-ratio:4/5}
.m-cadre .ph{position:absolute;inset:0;height:100%;opacity:0;transform:scale(1.04);transition:opacity .7s var(--e1),transform 1.2s var(--e1)}
.m-cadre .pv1{opacity:1;transform:none}
.mz-av:has(.m-row:hover) .m-cadre .ph{opacity:0;transform:scale(1.04)}
.mz-av:has(.r1:hover) .pv1,.mz-av:has(.r2:hover) .pv2,.mz-av:has(.r3:hover) .pv3,.mz-av:has(.r4:hover) .pv4,.mz-av:has(.r5:hover) .pv5{opacity:1;transform:none}
.m-pied{margin-top:44px}
@media (max-width:900px){.m-list{grid-column:1/-1}.m-apercu{display:none}}

/* Méthode */
.meth{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(48px,7vw,120px);align-items:start}
.meth-g{position:sticky;top:160px}
.meth-g .ph{margin-top:44px}
.steps{list-style:none;margin:0;padding:0}
.step{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr);gap:20px;padding:40px 0;view-timeline:--st block}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ligne)}
.step::after{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--sauge);transform-origin:left}
.step-n{display:block;font-family:var(--serif);font-style:italic;font-size:44px;line-height:.9;color:var(--sauge)}
.step h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,1.7vw,26px);line-height:1.2;margin:0 0 12px}
.step p{color:var(--gris)}
@media (max-width:900px){.meth-g{position:relative;top:0}.step{grid-template-columns:60px minmax(0,1fr)}.step-n{font-size:40px}}

/* Contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(48px,7vw,120px);align-items:start}
.contact .lead{margin-top:28px}
.ct-coord{display:grid;gap:20px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(63,60,53,.14)}
.ct-coord a,.ct-coord div{display:flex;flex-direction:column;gap:4px;font-size:16.5px}
.ct-coord small{font:500 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sauge-f)}
.ct-coord a span{transition:color .3s}
.ct-coord a:hover span{color:var(--sauge)}
.signature{margin-top:48px;font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.2}
.signature small{display:block;margin-top:8px;font:400 11.5px/1.4 var(--sans);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.form{background:#fff;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px;box-shadow:0 40px 80px -50px rgba(63,60,53,.35);margin:0}
.f-full{grid-column:1/-1}
.champ{display:flex;flex-direction:column;gap:8px;position:relative}
.champ label{font:500 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f)}
.champ input,.champ select,.champ textarea{appearance:none;-webkit-appearance:none;width:100%;border:0;border-bottom:1px solid rgba(63,60,53,.28);border-radius:0;background:transparent;padding:10px 0 12px;font:300 17px/1.5 var(--sans);color:var(--encre);outline:none;transition:border-color .4s}
.champ textarea{min-height:110px;resize:vertical}
.champ select{padding-right:24px;cursor:pointer}
.champ::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--sauge);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e1)}
.champ:focus-within::after{transform:scaleX(1)}
.chev{position:absolute;right:2px;bottom:22px;width:12px;height:8px;pointer-events:none;color:var(--encre)}
.case{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--gris);cursor:pointer}
.case input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:2px 0 0;border:1px solid rgba(63,60,53,.4);display:grid;place-items:center;cursor:pointer;transition:background-color .3s,border-color .3s}
.case input:checked{background:var(--sauge);border-color:var(--sauge)}
.case input:checked::after{content:"";width:9px;height:5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.f-bas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.f-note{font-size:13.5px;color:var(--gris)}
.merci{background:#fff;padding:clamp(36px,5vw,72px);display:flex;flex-direction:column;align-items:flex-start;gap:22px;box-shadow:0 40px 80px -50px rgba(63,60,53,.35);animation:entre 1.2s var(--e1) both}
.merci .h2{font-size:clamp(40px,4vw,56px)}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}

/* Pied de page */
.foot{padding:clamp(80px,9vw,130px) 0 36px;border-top:1px solid var(--ligne);background:#fff}
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:40px;margin-bottom:clamp(64px,8vw,110px)}
.foot-sig{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.5vw,34px);line-height:1.2;max-width:11em;margin:0}
.foot h4{font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sauge-f);margin:0 0 18px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15.5px}
.foot ul a{transition:color .3s}
.foot ul a:hover{color:var(--sauge)}
.foot-logo{width:100%;height:auto}
.foot-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:30px;font-size:12.5px;color:var(--gris);letter-spacing:.04em}

/* ==========================================================
   COFFRETS ACQUÉREURS · parcours des sens
   ========================================================== */
.axe{display:flex;align-items:baseline;gap:18px;margin-bottom:24px}
.axe-n{font-family:var(--serif);font-style:italic;font-size:36px;line-height:1;color:var(--sauge)}
.axe .eyebrow{margin:0}
.sec-sauge .axe-n{color:#fff}

/* La remise des clés : phrases successives */
.cles{position:relative;background:#33403a;color:#fff}
.cles-stick{position:relative;overflow:hidden;display:grid;place-items:center;padding-block:clamp(110px,12vw,180px)}
.cles-bg{position:absolute;inset:0}
.cles-bg .ph{position:absolute;inset:0;height:100%;background:#3c4a41}
.cles-bg .ph-in{justify-content:flex-end;padding-bottom:46px}
.cles-bg .ph-k,.cles-bg .cap,.cles-bg .ph-ico{color:rgba(255,255,255,.75)}
.cles-bg .ph::after{border-color:rgba(255,255,255,.15)}
.cles-voile{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(20,24,21,.55),rgba(20,24,21,.15))}
.cles-in{position:relative;z-index:2;width:100%;text-align:center}
.cles-in .eyebrow{justify-content:center;color:#fff}
.cles-lines{list-style:none;margin:0;padding:0;display:grid;gap:18px;font-size:clamp(26px,2.9vw,42px)}
.cles-l{font-family:var(--serif);font-style:italic;font-size:1em;line-height:1.16;text-wrap:balance;max-width:19em;margin-inline:auto}
.cles-in .cles-fin{margin:56px auto 0;max-width:34em;font-size:17px;color:#fff}

/* I · Le regard */
.regard{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(40px,5vw,72px)}
.regard-c{display:flex;flex-direction:column;gap:18px;margin:0}
.regard-c figcaption{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--ligne);padding-top:16px}
@media (min-width:1000px){.regard>:nth-child(2){margin-top:90px}}
.regard-c .c3{width:100%}
.regard-l{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.2}
.regard-s{font:500 10px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sauge-f)}

/* II · Le toucher : ruban de satin */
.touch{position:relative}
.touch-stick{position:relative;display:flex;align-items:center;padding-block:clamp(96px,10vw,150px);overflow:hidden}
.touch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));align-items:center;gap:clamp(24px,5vw,80px)}
.cles-l em{color:#dfe8e1}

.touch-txt{position:relative;z-index:5}
.t-stage{position:relative;width:100%;max-width:min(560px,68svh);aspect-ratio:1;margin-inline:auto}
.satin{display:block;width:100%;height:100%;overflow:visible}
.satin g{transform-box:view-box;transform-origin:400px 385px}
.t-shadow{position:absolute;left:50%;top:58%;width:520px;height:120px;margin:-60px 0 0 -260px;transform:translateY(80px);background:radial-gradient(closest-side,rgba(52,46,36,.24),rgba(52,46,36,0));filter:blur(6px)}
.t-scene{position:absolute;left:50%;top:58%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-32deg)}
.tf{position:absolute;left:0;top:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 42%,rgba(255,255,255,0) 55%),linear-gradient(160deg,#fff,#f2f1ee 55%,#e5e4e0)}
.tf.cote{background:linear-gradient(180deg,#eeede9,#d8d7d2)}
.tf.dessus{background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.8) 44%,rgba(255,255,255,0) 58%),linear-gradient(170deg,#fff,#f7f6f3 50%,#ecebe7)}
.rb3{position:absolute;left:0;top:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(90deg,#4f6155,#7a8f81 30%,#57695d 50%,#8ca093 68%,#4f6155)}
.rb3.v{background:linear-gradient(180deg,#4f6155,#7a8f81 30%,#57695d 50%,#8ca093 68%,#4f6155)}
.noeud{position:absolute;left:0;top:0;width:210px;height:130px;margin:-65px 0 0 -105px;transform:translate3d(0,-118px,0) rotateY(32deg)}
.noeud svg{width:100%;height:100%;overflow:visible}
.noeud .bt{transform-box:fill-box}
.nl{transform-origin:100% 70%}.nr{transform-origin:0% 70%}.nk{transform-origin:50% 50%}.ntl{transform-origin:100% 0%}.ntr{transform-origin:0% 0%}
.ruban-vol{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.ruban-vol path{fill:none;stroke-linecap:butt;stroke-dasharray:.42 3;stroke-dashoffset:-1.5}
.ruban-vol .vol-base{stroke:#3d4c42;stroke-width:40}
.ruban-vol .vol-mi{stroke:url(#dbx-satin);stroke-width:32}
.ruban-vol .vol-trame{stroke:url(#dbx-twill);stroke-width:40}
.ruban-vol .vol-reflet{stroke:rgba(225,236,229,.5);stroke-width:5}

/* III · L’odorat */
.olf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:start}
.olf-media{grid-column:1/span 5;position:sticky;top:160px}
.olf-notes{grid-column:7/span 6;list-style:none;margin:0;padding:0}
.note{padding:40px 0;border-top:1px solid var(--ligne);display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.note:last-child{border-bottom:1px solid var(--ligne)}
.note-k{font:500 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--sauge-f)}
.note-t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,3.4vw,52px);line-height:1.05;margin:0}
.note p{color:var(--gris);max-width:30em}
.note-m{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--sauge)}
.olf-notes .note:nth-child(2){padding-left:clamp(0px,4vw,60px)}
.olf-notes .note:nth-child(3){padding-left:clamp(0px,8vw,120px)}
@media (max-width:900px){.olf-media,.olf-notes{grid-column:1/-1}.olf-media{position:relative;top:0}.olf-notes .note{padding-left:0 !important}}

/* IV · L’émotion */
.emo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:clamp(48px,6vw,96px);align-items:center}
.emo-q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(25px,2.5vw,37px);line-height:1.28;margin:0;color:#fff;text-wrap:pretty}
.emo-p{color:#fff;margin-top:32px;max-width:30em}
.emo .btn{margin-top:40px}

/* ==========================================================
   PAGE PARTENAIRES
   ========================================================== */
.pz-hero{padding-block:clamp(70px,9vw,140px) clamp(60px,7vw,100px)}
.pz-hero .h1{max-width:11em}
.pz-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:40px 80px;margin-top:56px;align-items:end}
.pz-index{list-style:none;margin:0;padding:24px 0 0;display:flex;flex-wrap:wrap;gap:4px 0;border-top:1px solid var(--ligne)}
.pz-index a{display:inline-flex;align-items:baseline;gap:10px;padding:8px 26px 8px 0;font-family:var(--serif);font-style:italic;font-size:20px;transition:color .3s}
.pz-index a small{font:500 9.5px/1 var(--sans);font-style:normal;letter-spacing:.2em;color:var(--sauge-f)}
.pz-index a:hover{color:var(--sauge)}
.mz{padding-block:clamp(90px,10vw,160px)}
.mz-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:40px;align-items:start}
.mz-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(30px,4vw,60px);padding-bottom:28px;border-bottom:1px solid var(--ligne)}
.mz-num{display:block;margin-bottom:18px;font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--sauge-f)}
.mz-nom{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(44px,5.6vw,88px);line-height:1;letter-spacing:-.02em;margin:0}
.mz-lieu{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--sauge)}
.mz-media{grid-column:1/span 6;position:relative;padding-bottom:80px}
.mz-media .ph-mini{position:absolute;right:-9%;bottom:0;width:46%;border:10px solid #fff;box-shadow:0 30px 60px -30px rgba(63,60,53,.35)}
.sec-sable .mz-media .ph-mini{border-color:var(--sable)}
.mz-text{grid-column:8/span 5;padding-top:12px}
.mz.inv .mz-media{grid-column:7/span 6;grid-row:2}
.mz.inv .mz-text{grid-column:1/span 5;grid-row:2}
.mz.inv .mz-media .ph-mini{right:auto;left:-9%}
.mz-chapo{font-family:var(--serif);font-size:clamp(21px,1.75vw,25px);line-height:1.55;margin:0 0 30px;text-wrap:pretty}
.mz-body p{color:var(--gris);margin-bottom:18px;text-wrap:pretty}
.mz-body p:first-child::first-letter{float:left;font-family:var(--serif);font-style:italic;font-size:78px;line-height:.82;padding:8px 12px 0 0;color:var(--sauge)}
.mz-quote{margin:38px 0 0;padding:28px 0;border-block:1px solid var(--ligne);font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.9vw,27px);line-height:1.4}
.mz-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px}
.mz-tags small{font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gris);margin-right:6px}
.tag{display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border-radius:999px;border:1px solid rgba(99,118,105,.45);font:400 12.5px/1 var(--sans);letter-spacing:.05em;color:var(--sauge-f)}
.orn{display:flex;justify-content:center;color:var(--sauge)}
.orn svg{width:72px;height:30px}
.pz-cta{text-align:center}
.pz-cta .h2{max-width:14em;margin:0 auto}
.pz-cta .lead{margin:28px auto 0}
.pz-cta-l{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:44px}
@media (max-width:900px){
  .mz-media,.mz-text,.mz.inv .mz-media,.mz.inv .mz-text{grid-column:1/-1;grid-row:auto}
  .mz-media .ph-mini{right:0}.mz.inv .mz-media .ph-mini{left:0}
}

/* ==========================================================
   COFFRET 3D (composant) · coffret aimanté, boîte kraft, panier
   ========================================================== */
.c3{position:relative;width:100%;perspective:1500px;perspective-origin:50% 26%;user-select:none;-webkit-user-select:none}
.c3-shadow{position:absolute;left:50%;top:50%;width:480px;height:120px;margin:-60px 0 0 -240px;transform:translateY(100px);background:radial-gradient(closest-side,rgba(52,46,36,.3),rgba(52,46,36,0));filter:blur(8px);pointer-events:none;transition:width .8s var(--e1),margin .8s var(--e1)}
.c3-shadow.kraft{width:560px;margin-left:-280px;transform:translateY(70px)}
.c3-tilt{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:transform 1s var(--e1)}
.c3.vif .c3-tilt{transition:none}
.c3-spin{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:c3-spin 44s linear infinite}
.c3.arret .c3-spin{animation-play-state:paused}
@keyframes c3-spin{to{transform:rotateY(360deg)}}
.c3-obj{position:absolute;left:0;top:0;transform-style:preserve-3d}
.g3{position:absolute;left:0;top:0;transform-style:preserve-3d}
.c3-lid,.c3-klid{position:absolute;left:0;top:0;transform-style:preserve-3d}
.c3.fl-doux .c3-lid,.c3.fl-doux .c3-klid{transition:transform 1s var(--e1)}
.c3.fl-suivi .c3-lid,.c3.fl-suivi .c3-klid{transition:transform .25s linear}
.c3.fl-snap .c3-lid,.c3.fl-snap .c3-klid{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.f{position:absolute;left:0;top:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:0;transition:opacity .6s var(--e2)}
.f.dbl{backface-visibility:visible;-webkit-backface-visibility:visible}
.c3-obj[data-forme="aimant"] .fa,.c3-obj[data-forme="kraft"] .fk,.c3-obj[data-forme="panier"] .fp{opacity:1}
.m,.sh{position:absolute;inset:0}
.m{opacity:0;transition:opacity .9s var(--e2)}
.c3-obj[data-mat="blanc"] .mb,.c3-obj[data-mat="noir"] .mn,.c3-obj[data-mat="blanc"] .ib,.c3-obj[data-mat="noir"] .in{opacity:1}
.mb{background:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.75) 41%,rgba(255,255,255,0) 54%),linear-gradient(160deg,#ffffff,#f2f2f0 55%,#e4e4e1)}
.mn{background:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.16) 41%,rgba(255,255,255,0) 54%),linear-gradient(160deg,#2b2a27,#1b1a18 55%,#121110)}
.ib{background:linear-gradient(180deg,#e9e8e4,#f7f6f3)}
.in{background:linear-gradient(180deg,#121110,#211f1c)}
.sh{box-shadow:inset 0 0 0 1px rgba(30,24,18,.09)}
.sh-top{background:linear-gradient(170deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%)}
.sh-v{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.07))}
.sh-c{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18))}
.tissu{background:radial-gradient(38% 30% at 28% 38%,rgba(70,68,64,.85),rgba(70,68,64,0)),radial-gradient(34% 28% at 70% 62%,rgba(62,60,56,.8),rgba(62,60,56,0)),radial-gradient(26% 22% at 55% 25%,rgba(80,78,74,.6),rgba(80,78,74,0)),linear-gradient(125deg,#141412,#24231f 38%,#121110 62%,#1f1e1b)}
.kx{background:#b48c62 url(../img/kraft.jpg) center/280px}
.kx-in{background:#c9a67e url(../img/kraft.jpg) center/280px;box-shadow:inset 0 0 0 400px rgba(255,248,236,.12)}
.kx-ond{background:repeating-linear-gradient(90deg,rgba(80,56,30,.06) 0 2px,rgba(80,56,30,0) 2px 7px),#caa780 url(../img/kraft.jpg) center/280px}
.kx.cote{box-shadow:inset 0 0 0 400px rgba(40,24,8,.12)}
.oreille{border-radius:0 0 60px 60px/0 0 46px 46px}
/* logo sur le couvercle */
.lg{position:absolute;left:50%;top:50%;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;border:1px solid currentColor;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;opacity:0;transform:scale(.84);filter:blur(3px);transition:opacity .8s var(--e1),transform 1s var(--e1),filter .8s}
.lg::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid currentColor;opacity:.45}
.lg b{font:500 7px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.lg span{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1}
.c3-obj[data-logo="on"] .lg{opacity:1;transform:none;filter:none}
.c3-obj[data-mat="blanc"] .lg{color:#637669}
.c3-obj[data-mat="noir"] .lg{color:#cbb38b}
.c3-obj[data-mat="kraft"] .lg{color:#33271b}
/* fourreau (boîte kraft) */
.c3-sl{transform:translateX(560px);transition:transform 1.3s var(--e1)}
.c3-obj[data-sleeve="on"] .c3-sl{transform:none}
.fs{opacity:0;transition:opacity .5s var(--e1)}
.c3-obj[data-sleeve="on"] .fs{opacity:1;transition:opacity .25s}
.sv{background:#fdfcfa;color:var(--bronze);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sv::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(176,148,118,.2) 0deg 1.6deg,rgba(176,148,118,0) 1.6deg 7.5deg)}
.sv::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,#fdfcfa 50%,rgba(253,252,250,0) 100%)}
.sv>*{position:relative;z-index:1}
.sv-top{justify-content:space-between;padding:26px 16px 22px}
.sv-k{font:500 6.6px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.sv-logo{display:flex;flex-direction:column;align-items:center;gap:6px}
.sv-logo i{display:block;width:44px;height:1px;background:currentColor;opacity:.6}
.sv-logo span{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1;letter-spacing:.04em}
.sv-logo small{font:500 6px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase}
.sv-mot{font-family:var(--serif);font-style:italic;font-size:10.5px;line-height:1.5;max-width:15em}
.sv-cadre{border:1px solid currentColor;padding:6px 12px;font:500 6.4px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.sv-face span{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.1}
.sv-face b{font:500 6px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;margin-top:4px}
/* panier */
.bk-fond{background:radial-gradient(70% 60% at 50% 45%,rgba(255,255,255,.2),rgba(0,0,0,.14)),repeating-linear-gradient(0deg,rgba(120,100,74,.07) 0 1px,rgba(120,100,74,0) 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,74,.06) 0 1px,rgba(120,100,74,0) 1px 3px),#d6c4a6}
.bk-lin-in{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(60,44,24,.16)),repeating-linear-gradient(0deg,rgba(120,100,74,.07) 0 1px,rgba(120,100,74,0) 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,74,.06) 0 1px,rgba(120,100,74,0) 1px 3px),#dccbae}
.bk-lin-in.cote{box-shadow:inset 0 0 0 200px rgba(60,44,24,.06)}
.bk-lin-out{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(60,44,24,.2)),repeating-linear-gradient(0deg,rgba(120,100,74,.07) 0 1px,rgba(120,100,74,0) 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,74,.06) 0 1px,rgba(120,100,74,0) 1px 3px),#cfbb98}
.bk-lin-out.cote{box-shadow:inset 0 0 0 200px rgba(40,28,14,.1)}
.bk-grille{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38.1' viewBox='0 0 22 38.1'%3E%3Cpath d='M0 6.35 L11 0 L22 6.35 M0 6.35 V19.05 M22 6.35 V19.05 M0 19.05 L11 25.4 L22 19.05 M11 25.4 V38.1' fill='none' stroke='%232f241c' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/13px 23px;border-top:3px solid #2f241c;border-bottom:4px solid #2f241c;box-shadow:inset 3px 0 0 #2f241c,inset -3px 0 0 #2f241c}
.bk-grille::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#2f241c}
.bk-grille.cote::after{display:none}
.bk-revers{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%,rgba(80,60,36,.1)),repeating-linear-gradient(0deg,rgba(120,100,74,.07) 0 1px,rgba(120,100,74,0) 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,74,.06) 0 1px,rgba(120,100,74,0) 1px 3px),#e2d3b8;box-shadow:0 1px 0 rgba(80,60,36,.15)}
.bk-revers.cote{box-shadow:inset 0 0 0 200px rgba(60,44,24,.07)}
.bk-revers .dentelle{position:absolute;left:0;right:0;bottom:-7px;height:9px;background:radial-gradient(circle at 4px 0,#f4ede0 3.6px,rgba(244,237,224,0) 4.2px) 0 0/8px 9px repeat-x,linear-gradient(90deg,rgba(150,130,100,.35) 0 1px,rgba(0,0,0,0) 1px 4px) 0 0/4px 3px repeat-x;border-top:2px dotted rgba(244,237,224,.95)}
.bk-pli{background:linear-gradient(90deg,#ece0c9,#ddcdb1);border-radius:4px}
.bk-anse{border:4px solid #2f241c;border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0}
.bk-lien i{position:absolute;display:block;background:repeating-linear-gradient(0deg,rgba(120,100,74,.07) 0 1px,rgba(120,100,74,0) 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,74,.06) 0 1px,rgba(120,100,74,0) 1px 3px),#ddd0ba;box-shadow:inset 0 0 0 1px rgba(110,90,62,.18)}
.bk-lien .nd{left:22px;top:14px;width:17px;height:14px;border-radius:4px;background-color:#d3c4aa;z-index:2}
.bk-lien .b1{left:3px;top:8px;width:25px;height:15px;border-radius:9px 3px 3px 9px;transform:rotate(-14deg)}
.bk-lien .b2{left:34px;top:8px;width:25px;height:15px;border-radius:3px 9px 9px 3px;transform:rotate(14deg)}
.bk-lien .p1{left:18px;top:22px;width:11px;height:62px;transform-origin:50% 0;transform:rotate(14deg);clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.bk-lien .p2{left:32px;top:22px;width:11px;height:53px;transform-origin:50% 0;transform:rotate(-12deg);clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.bk-tag{background:#fffdf9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#637669;box-shadow:0 0 0 1px rgba(63,60,53,.12)}
.bk-tag b{font:500 6px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase}
.bk-tag span{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1}
.c3-obj[data-forme="panier"] .bk-tag{opacity:0}
.c3-obj[data-forme="panier"][data-logo="on"] .bk-tag{opacity:1}
.rbn{display:flex;align-items:center;justify-content:center;font:500 7.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;background:#637669;color:#fff}
.c3-obj[data-forme="panier"] .rbn{opacity:0}
.c3-obj[data-forme="panier"][data-sleeve="on"] .rbn{opacity:1}

/* ==========================================================
   CONFIGURATEUR (autour du coffret 3D)
   ========================================================== */
.cfg{position:relative}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:clamp(32px,5vw,80px);align-items:center}
.cfg-stage{position:relative;touch-action:pan-y;cursor:grab;background:radial-gradient(58% 52% at 50% 48%,#fff 0%,rgba(255,255,255,.65) 46%,rgba(255,255,255,0) 76%)}
.is-drag .cfg-stage{cursor:grabbing}
.clac{position:absolute;left:50%;top:18px;transform:translate(-50%,8px);opacity:0;font:500 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sauge-f);background:#fff;padding:10px 16px;border-radius:999px;box-shadow:0 10px 30px -14px rgba(63,60,53,.4);pointer-events:none;transition:opacity .4s,transform .6s var(--e1)}
.clac.on{opacity:1;transform:translate(-50%,0)}
.cfg-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:10px}
.ouv{flex:1 1 260px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.ouv small{font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.ouv-r{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0}
.ouv-r::-webkit-slider-runnable-track{height:1px;background:rgba(63,60,53,.35)}
.ouv-r::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#fff;border:1px solid var(--encre);box-shadow:0 8px 20px -8px rgba(63,60,53,.5)}
.ouv-r::-moz-range-track{height:1px;background:rgba(63,60,53,.35)}
.ouv-r::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--encre)}
.ouv-l{grid-column:1/-1;font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sauge-f)}
button.ib{width:44px;height:44px;border-radius:50%;border:1px solid rgba(63,60,53,.2);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--encre);padding:0;transition:border-color .3s}
button.ib:hover{border-color:var(--encre)}
button.ib svg{width:16px;height:16px}
.ibs{display:flex;gap:8px}
.cfg-ui{display:flex;flex-direction:column;gap:32px}
.cfg-cap{min-height:180px}
.cfg-k{font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sauge-f);margin-bottom:14px}
.cfg-cap .h3{margin-bottom:14px}
.cfg-p{color:var(--gris);max-width:30em;text-wrap:pretty}
.cfg-g h4{font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sauge-f);margin:0 0 16px}
.cfg-note{margin-top:12px;font-size:13.5px;color:var(--gris)}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px 0 7px;border-radius:999px;border:1px solid rgba(63,60,53,.18);background:#fff;font:400 14px/1 var(--sans);color:var(--encre);cursor:pointer;transition:border-color .4s,box-shadow .4s}
.opt:hover{border-color:rgba(63,60,53,.5)}
.opt.is-on{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.sw{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(63,60,53,.16)}
.sw-blanc{background:linear-gradient(160deg,#fff,#e9e8e4)}
.sw-noir{background:linear-gradient(135deg,#34322e,#151412)}
.sw-kraft{background:#b48c62 url(../img/kraft.jpg) center/120px}
.sw-panier{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38.1' viewBox='0 0 22 38.1'%3E%3Cpath d='M0 6.35 L11 0 L22 6.35 M0 6.35 V19.05 M22 6.35 V19.05 M0 19.05 L11 25.4 L22 19.05 M11 25.4 V38.1' fill='none' stroke='%232f241c' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/9px 15px,#e2d7c4}
.ck{width:34px;height:34px;border-radius:50%;flex:none;border:1px solid rgba(63,60,53,.25);display:grid;place-items:center;transition:background-color .4s,border-color .4s}
.ck svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s var(--e1)}
.opt.is-on .ck{background:var(--sauge);border-color:var(--sauge)}
.opt.is-on .ck svg{opacity:1;transform:none}
.cfg-ui .btn{align-self:flex-start}
@media (max-width:640px){.cfg .c3{height:380px !important}.cfg .c3-obj{scale:.68 !important}.cfg .c3-shadow{scale:.68}}

/* ==========================================================
   ANIMATIONS AU DÉFILEMENT (navigateurs compatibles)
   Sans prise en charge, tout s’affiche directement dans son état final.
   ========================================================== */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .rv-2{animation-range:entry 10% entry 85%}
    .rv-3{animation-range:entry 20% entry 100%}
    .plx .ph-in{animation:plx linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .zoom .ph-in{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    .ln{animation:ln linear both;animation-timeline:view();animation-range:entry 70% cover 48%}
    .step::after{animation:trait linear both;animation-timeline:--st;animation-range:entry 40% cover 50%}
    .foot-logo{animation:footlogo linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .mz-nom{animation:nom linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .emo-q .w{animation:mot linear both;animation-timeline:view();animation-range:cover 22% cover 42%}
    .note-t{animation:nom linear both;animation-timeline:view();animation-range:entry 10% entry 90%}

    /* quatre instants : la frise défile à l’horizontale */
    .inst{height:3600px;view-timeline:--inst block}
    .inst-stick{position:sticky;top:0;height:min(100svh,940px);overflow:hidden;padding-block:0;scroll-snap-type:none}
    .inst-track{animation:inst linear both;animation-timeline:--inst;animation-range:contain 4% contain 96%}

    /* remise des clés : phrases successives */
    .cles{height:3000px;view-timeline:--cles block}
    .cles-stick{position:sticky;top:0;height:min(100svh,940px);padding-block:0}
    .cles-bg .ph-in{animation:clesbg linear both;animation-timeline:--cles;animation-range:contain 0% contain 100%}
    .cles-in{height:100%;display:flex;flex-direction:column;justify-content:center}
    .cles-in .eyebrow{position:absolute;left:0;right:0;top:clamp(84px,13vh,130px);margin:0}
    .cles-lines{position:relative;height:2.8em;display:block}
    .cles-l{position:absolute;left:0;right:0;top:50%;translate:0 -50%;animation:cles-l linear both;animation-timeline:--cles}
    .cl1{animation-range:contain 0% contain 26%}
    .cl2{animation-range:contain 22% contain 48%}
    .cl3{animation-range:contain 44% contain 70%}
    .cl4{animation-name:cles-der;animation-range:contain 66% contain 88%}
    .cles-fin{animation:fondu linear both;animation-timeline:--cles;animation-range:contain 82% contain 94%}

    /* toucher : le ruban se dénoue et traverse la page */
    .touch{height:2800px;view-timeline:--touch block}
    .touch-stick{position:sticky;top:0;height:min(100svh,940px);padding-block:0}
    .s-boucle-d{animation:sbd linear both;animation-timeline:--touch;animation-range:contain 26% contain 40%}
    .s-boucle-g{animation:sbg linear both;animation-timeline:--touch;animation-range:contain 26% contain 40%}
    .s-noeud{animation:dk linear both;animation-timeline:--touch;animation-range:contain 34% contain 44%}
    .s-queue-g{animation:sqg linear both;animation-timeline:--touch;animation-range:contain 32% contain 46%}
    .s-queue-d{animation:sqd linear both;animation-timeline:--touch;animation-range:contain 32% contain 46%}
    .s-bande-a{animation:sba linear both;animation-timeline:--touch;animation-range:contain 40% contain 56%}
    .s-bande-b{animation:sbb linear both;animation-timeline:--touch;animation-range:contain 40% contain 56%}
    .ruban-vol path{animation:vol linear both;animation-timeline:--touch;animation-range:contain 44% contain 96%}
    .touch-l2{animation:fondu linear both;animation-timeline:--touch;animation-range:contain 50% contain 62%}
  }
}
@keyframes rv{from{opacity:0;transform:translateY(40px)}}
@keyframes plx{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@keyframes zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes ln{from{color:#cfc6bc}}
@keyframes trait{from{transform:scaleX(0)}}
@keyframes footlogo{from{clip-path:inset(100% 0 0 0);transform:translateY(40px)}}
@keyframes nom{from{opacity:0;transform:translateY(50px)}}
@keyframes mot{from{color:rgba(255,255,255,.28)}}
@keyframes fondu{from{opacity:0}}
@keyframes inst{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100vw))}}
@keyframes clesbg{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes cles-l{0%{opacity:0;transform:translateY(36px);filter:blur(6px)}22%,78%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translateY(-36px);filter:blur(6px)}}
@keyframes cles-der{0%{opacity:0;transform:translateY(36px);filter:blur(6px)}40%,100%{opacity:1;transform:none;filter:none}}
@keyframes dl{to{transform:scale(0) rotate(-50deg);opacity:0}}
@keyframes dr{to{transform:scale(0) rotate(50deg);opacity:0}}
@keyframes dk{to{transform:scale(0);opacity:0}}
@keyframes dtl{to{transform:translateY(40px) rotate(25deg);opacity:0}}
@keyframes dtr{to{transform:translateY(40px) rotate(-25deg);opacity:0}}
@keyframes sbd{to{transform:translate(70px,-50px) scale(.15) rotate(35deg);opacity:0}}
@keyframes sbg{to{transform:translate(-70px,20px) scale(.15) rotate(-35deg);opacity:0}}
@keyframes sqg{to{transform:translate(-50px,140px);opacity:0}}
@keyframes sqd{to{transform:translate(50px,140px);opacity:0}}
@keyframes sba{to{transform:translate(460px,385px);opacity:0}}
@keyframes sbb{to{transform:translate(560px,-350px);opacity:0}}
@keyframes vol{from{stroke-dashoffset:.42}to{stroke-dashoffset:-1.5}}

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .veil,.intro{display:none}
  .entre,.home-top,.home-bot,.univ-in,.badge,.merci,.fiche{animation:none}
  .c3-spin,.defil i::after,.pin>button::before{animation:none}
  .dbx *,.cfg *,.c3 *{transition-duration:.01ms !important}
}

/* Bannière simplifiée des pages univers */
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.nav-liens{display:flex;align-items:center;gap:clamp(18px,3vw,46px)}
.nav-liens a{position:relative;padding:10px 0;font:400 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#57534b;transition:color .4s}
.nav-liens a:not(.nav-contact)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--sauge);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e1)}
.nav-liens a:hover{color:var(--encre)}
.nav-liens a:not(.nav-contact):hover::after{transform:scaleX(1);transform-origin:left}
.nav-liens .nav-contact{padding:13px 24px;border:1px solid var(--encre);border-radius:999px;color:var(--encre);transition:background-color .4s,color .4s}
.nav-liens .nav-contact:hover{background:var(--encre);color:#fff}
.dbx [id]{scroll-margin-top:84px}
@media (max-width:700px){
  .nav-bar{flex-direction:column;justify-content:center;gap:6px;min-height:0;padding-block:12px}
  .nav-liens{gap:16px;flex-wrap:wrap;justify-content:center}
  .nav-liens .nav-contact{padding:8px 14px}
}

/* II · Le toucher : vidéo du ruban pilotée par le défilement */
.ruban-sec{position:relative;height:300vh;height:300svh;--fond-haut:rgb(237,231,225);--fond-bas:rgb(219,213,203);background:linear-gradient(180deg,var(--fond-haut),var(--fond-bas))}
.ruban-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(180deg,var(--fond-haut),var(--fond-bas))}
.ruban-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,110px);width:100%}
.ruban-txt{min-width:0;max-width:34em}
.ruban-l2{opacity:.25;transform:translateY(8px);transition:opacity .8s var(--e1),transform .8s var(--e1)}
.ruban-sec.fin .ruban-l2{opacity:1;transform:none}
.ruban-cadre{position:relative;height:min(84svh,820px);aspect-ratio:480/830;max-width:100%}
.ruban-fenetre{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect}
.ruban-fenetre .ruban-img,.ruban-fenetre .ruban-video{position:absolute;left:-25%;top:-15.6627%;width:150%;height:auto;aspect-ratio:720/1094;max-width:none;display:block;object-fit:cover}
.ruban-fenetre .ruban-video{opacity:0;transition:opacity .5s linear}
.ruban-sec.video-prete .ruban-video{opacity:1}
@media (max-width:860px){
  .ruban-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px}
  .ruban-stick{align-items:flex-start;padding-top:152px}
  .ruban-cadre{height:min(42svh,420px)}
  .ruban-txt .h2{font-size:28px}
  .ruban-txt .lead{font-size:15px;line-height:1.6;margin-top:14px !important}
  .ruban-txt .axe{margin-bottom:10px}
}

/* Le toucher : le coffret seul, net, sans fond (rectangle exact du coffret dans la vidéo) */
.ruban-sec,.ruban-stick{background:#fff}
.ruban-cadre{height:auto;width:min(52vw,720px);aspect-ratio:720/476}
.ruban-fenetre{-webkit-mask-image:none;mask-image:none}
.ruban-fenetre .ruban-img,.ruban-fenetre .ruban-video{left:0;top:-54.6218%;width:100%}
@media (max-width:860px){.ruban-cadre{width:100%;height:auto}}

/* Le toucher (version finale) : ruban détouré posé sur un rectangle blanc, fond beige clair */
.ruban-sec,.ruban-stick{background:var(--sable)}
@media (min-width:861px){.ruban-stick{padding-top:76px}}
.ruban-cadre{position:relative;height:auto;width:min(44vw,620px);aspect-ratio:720/828}
.ruban-boite{position:absolute;left:0;right:0;top:1.2077%;height:60.628%;background:#fff}
.ruban-cadre .ruban-img,.ruban-cadre .ruban-toile{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.ruban-cadre .ruban-toile{opacity:0;transition:opacity .4s linear}
.ruban-sec.video-prete .ruban-toile{opacity:1}
.ruban-sec.video-prete .ruban-img{opacity:0}
.ruban-cadre .ruban-video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
@media (max-width:860px){.ruban-cadre{width:min(100%,calc(46svh * .8696))}}

/* Le toucher : nœud de satin en 3D, dénoué au défilement */
.ruban-3d{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s linear}
.ruban-grid{position:relative;z-index:2}
.ruban-cadre{width:min(42vw,600px);height:auto;aspect-ratio:4/3}
.ruban-cadre .ruban-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s linear}
.ruban-sec.noeud-pret .ruban-3d{opacity:1}
.ruban-sec.noeud-pret .ruban-img{opacity:0}
@media (max-width:860px){.ruban-cadre{width:min(92vw,440px);height:auto}}
@media (max-width:860px){.ruban-cadre{margin-top:3svh}}
/* Le dernier geste : deux lignes */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .cles:has(.cles-2){height:2300px}
    .cles-2 .cl1{animation-range:contain 0% contain 46%}
    .cles-2 .cl4{animation-range:contain 40% contain 74%}
    .cles:has(.cles-2) .cles-fin{animation-range:contain 72% contain 88%}
  }
}
.emo-q em{font-style:italic;color:#e3ebe5}
.signature .sig-art{margin-top:4px;letter-spacing:0;text-transform:none;font:italic 400 15px/1.4 var(--serif);color:var(--sauge)}
#parfum .m-pied,#odorat .m-pied{margin-top:48px}
.emo .emo-p{margin-top:26px}
/* Surtitres : un vrai souffle avant le titre */
.dbx p.eyebrow{margin-bottom:26px}
.dbx .axe p.eyebrow{margin-bottom:0}
.dbx .axe{margin-bottom:26px}
/* Le coffret en 3D : fond vert-gris pour faire ressortir les écrins */
#configurateur{background:#dedddb}
#configurateur .cfg-stage{background:radial-gradient(56% 50% at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 76%)}
#configurateur .c3-shadow{background:radial-gradient(closest-side,rgba(40,40,38,.32),rgba(40,40,38,0))}
/* Locations : configurateur allégé */
.cfg-mount[data-univers="locations"] .ouv-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cfg-mount[data-univers="locations"] .cfg-note{display:none}

/* Accueil : vidéo plein écran */
.home-video{background:#2f3a33;overflow:hidden}
.home-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Le toucher : le vrai nœud de satin, détouré, au rythme du défilement */
.ruban-film{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s linear}
.ruban-sec.film-pret .ruban-film{opacity:1}
.ruban-sec .ruban-grid{grid-template-columns:minmax(0,34em);position:relative;z-index:2}
.ruban-sec .ruban-txt{max-width:30em}
@media (min-width:861px){.ruban-sec .ruban-stick{align-items:center;padding-top:76px}.ruban-sec .ruban-txt{max-width:min(30em,42vw)}}
@media (max-width:860px){.ruban-sec .ruban-txt .lead{font-size:14.5px;line-height:1.6}.ruban-sec .ruban-txt .h2{font-size:26px}}
/* Le dernier geste : simple aplat vert, section plus courte */
.cles{background:var(--sauge)}
.cles .cles-bg,.cles .cles-voile{display:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .cles{height:2100px}
    .cles:has(.cles-2){height:1600px}
  }
}
/* I · Le regard : un seul coffret, vu de loin puis de près */
.regard2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,110px);align-items:center;margin-top:clamp(56px,7vw,110px)}
.regard2-ph{margin:0}
.regard2-ph .ph{width:100%}
.regard-dist{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--ligne)}
.regard-dist li{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--ligne)}
.regard-dist span{font:500 10px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sauge-f)}
.dbx .regard-dist p{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.3;color:var(--encre)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .regard2-ph .ph{animation:approche linear both;animation-timeline:view();animation-range:entry 0% cover 50%;transform-origin:50% 60%}
    @keyframes approche{from{transform:scale(.72);opacity:.4}to{transform:none;opacity:1}}
  }
}
@media (max-width:860px){
  .regard2{grid-template-columns:minmax(0,1fr);gap:36px}
  .regard-dist li{grid-template-columns:8em minmax(0,1fr)}
  .dbx .regard-dist p{font-size:18px}
}
.dbx .regard2-txt .lead{margin-top:26px}
.regard2-img{display:block;width:100%;height:auto;aspect-ratio:1400/1601;object-fit:cover}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .regard2-img{animation:approche linear both;animation-timeline:view();animation-range:entry 0% cover 50%;transform-origin:50% 60%}
  }
}
/* Photos d'Inès : ouverture et parfum (Acquéreurs) */
.hero2-photo{margin:0;overflow:hidden;aspect-ratio:16/9;background:var(--sable)}
.hero2-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 64%}
#accueil .hero2-photo img[src*="ouverture-acq"]{object-position:50% 92%}
.olf-photo{margin:0;overflow:hidden}
.olf-photo img{display:block;width:100%;height:auto}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hero2-photo img{animation:photo-recul linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .olf-photo img{animation:photo-recul linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    @keyframes photo-recul{from{transform:scale(1.08)}to{transform:scale(1)}}
  }
}
.inst-photo{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.inst-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
/* Photos d'Inès dans les emplacements */
.ph.ph-photo::after{display:none}
.ph-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plx.ph-photo>img{inset:-7% 0;height:114%}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.plx.ph-photo>img{animation:plx linear both;animation-timeline:view();animation-range:cover 0% cover 100%}}}
.fiche-photo{aspect-ratio:4/5;overflow:hidden}
.fiche-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* Aperçu des Maisons : la photo suit la Maison survolée, avec son nom */
.mz-av:has(.r1:hover) .m-cadre .ph.pv1,.mz-av:has(.r2:hover) .m-cadre .ph.pv2,.mz-av:has(.r3:hover) .m-cadre .ph.pv3,.mz-av:has(.r4:hover) .m-cadre .ph.pv4,.mz-av:has(.r5:hover) .m-cadre .ph.pv5,
.mz-av:has(.r1:focus-visible) .m-cadre .ph.pv1,.mz-av:has(.r2:focus-visible) .m-cadre .ph.pv2,.mz-av:has(.r3:focus-visible) .m-cadre .ph.pv3,.mz-av:has(.r4:focus-visible) .m-cadre .ph.pv4,.mz-av:has(.r5:focus-visible) .m-cadre .ph.pv5{opacity:1;transform:none}
.pv-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:6px;padding:60px 26px 24px;background:linear-gradient(180deg,rgba(30,28,24,0),rgba(30,28,24,.55));color:#fff}
.pv-cap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;line-height:1.1}
.pv-cap small{font:500 10px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;opacity:.9}
.m-apercu{top:120px}
.dbx .m-row .m-vign{display:none}
@media (max-width:900px){
  .m-row{grid-template-columns:72px minmax(0,1fr) 24px}
  .m-row .m-i{display:none}
  .dbx .m-row .m-vign{display:block;width:72px;height:72px;max-width:none;object-fit:cover}
}
/* Pied de page : sobre, logo discret et net */
.foot{background:var(--sable);border-top:0;padding:clamp(64px,7vw,96px) 0 28px}
.foot-top{grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(min(180px,100%),1fr));gap:40px 56px;margin-bottom:clamp(48px,6vw,72px)}
.dbx .foot-logo{width:auto;height:26px;max-width:none;align-self:flex-start;animation:none}
.foot-marque{display:flex;flex-direction:column;gap:22px}
.foot-sig{font-size:22px;max-width:12em}
.foot-sig em{color:var(--sauge)}
.foot ul{font-size:14.5px;gap:9px}
.foot-bas{margin-top:0;padding-top:24px;border-top:1px solid rgba(63,60,53,.14);font-size:12px}
@media (max-width:760px){.foot-top{grid-template-columns:minmax(0,1fr)}}
/* Contact : simple, une seule écriture */
.ct-simple{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--ligne)}
.ct-simple li{padding:16px 0;border-bottom:1px solid var(--ligne);font-size:16px;color:var(--encre)}
.ct-simple a{transition:color .3s}
.ct-simple a:hover{color:var(--sauge)}
.form.form-simple{background:none;box-shadow:none;padding:0;gap:30px 28px;align-self:center}
.form-simple .champ label i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
.form-simple .f-bas{justify-content:flex-start;gap:20px 28px;margin-top:6px}
.dbx .f-rgpd{grid-column:1/-1;font-size:12.5px;color:var(--gris);margin-top:-10px}
.merci.merci-simple{background:var(--sable);box-shadow:none}
.foot-sig{max-width:none}
.foot-sig span,.foot-sig em{display:block;white-space:nowrap}
/* Histoires des Maisons : une lecture calme et homogène */
.mz-text{padding-top:4px}
.mz-chapo{font-size:clamp(20px,1.6vw,23px);line-height:1.5;margin:0 0 28px;color:var(--encre)}
.mz-body p{font-size:16px;line-height:1.8;margin:0 0 18px}
.mz-body p:first-child::first-letter{float:none;font:inherit;padding:0;color:inherit}
.mz-quote{margin:40px 0 0;padding:4px 0 4px 24px;border:0;border-left:1px solid var(--sauge);font-size:clamp(20px,1.6vw,23px);line-height:1.5;color:var(--sauge-f)}
.mz-tags{margin-top:40px;gap:6px 0}
.mz-tags small{margin-right:14px}
.mz-tags .tag{min-height:0;padding:0;border:0;border-radius:0;font:400 14px/1.4 var(--sans);letter-spacing:0;color:var(--encre)}
.mz-tags .tag+.tag::before{content:"·";margin:0 10px;color:var(--gris)}
/* IV · Le souvenir : sans image, le temps qui passe */
.souv{position:relative;color:#fff}
.souv-stick{padding-block:clamp(90px,10vw,140px)}
.souv-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.souv-axe{justify-content:center}
.souv-q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.6vw,56px);line-height:1.22;max-width:17em;margin:8px 0 0;text-wrap:balance;color:#fff}
.souv-q em{font-style:italic;color:#fff}
.souv-q .w{display:inline;transition:opacity .25s linear}
.souv-temps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:980px;margin-top:clamp(56px,7vw,96px)}
.souv-ligne{position:absolute;left:16.66%;right:16.66%;top:5px;height:1px;background:rgba(255,255,255,.18)}
.souv-ligne i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(1)}
.souv-m{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 18px;transition:opacity .9s var(--e1),transform .9s var(--e1)}
.souv-pt{width:11px;height:11px;border-radius:50%;background:var(--sauge);border:1px solid #fff;margin-bottom:12px;transition:background .6s}
.souv-m b{font:500 10.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#fff}
.dbx .souv-m span:last-child{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.45;color:rgba(255,255,255,.86);max-width:15em}
.souv-pied{display:flex;flex-direction:column;align-items:center;margin-top:clamp(52px,6vw,80px);transition:opacity 1s var(--e1),transform 1s var(--e1)}
.dbx .souv-p{max-width:34em;color:rgba(255,255,255,.9);font-size:16px;line-height:1.75}
.souv-pied .btn{margin-top:30px}
/* états animés (activés par le script) */
.souv.anime .souv-m{opacity:0;transform:translateY(14px)}
.souv.anime .souv-m.on{opacity:1;transform:none}
.souv.anime .souv-m.on .souv-pt{background:#fff}
.souv.anime .souv-pied{opacity:0;transform:translateY(16px)}
.souv.anime .souv-pied.on,.souv.fini .souv-pied,.souv.fini .souv-m{opacity:1;transform:none}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .souv{height:280vh;height:280svh}
  .souv-stick{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:90px 60px}
}
@media (max-width:860px){
  .souv-temps{grid-template-columns:minmax(0,1fr);gap:34px;justify-items:start;text-align:left;max-width:420px}
  .souv-ligne{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .souv-ligne i{transform-origin:50% 0}
  .souv-m{flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:0 0 0 30px;gap:6px 12px}
  .souv-pt{position:absolute;left:0;top:4px;margin:0}
  .souv-m span:last-child{flex-basis:100%}
}
.r43{aspect-ratio:4/3}
/* Grands titres : la seconde partie toujours sur sa propre ligne */
.dbx :is(.h1,.h2)>em{display:block}
.dbx :is(.h1,.h2){text-wrap:balance}
/* Mentions légales */
.ml{padding-top:clamp(140px,14vw,200px);padding-bottom:clamp(80px,9vw,130px);max-width:820px}
.ml .h1{font-size:clamp(38px,4.4vw,60px)}
.ml-corps{margin-top:clamp(40px,5vw,64px)}
.dbx .ml-t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.3;margin:48px 0 16px;padding-top:28px;border-top:1px solid var(--ligne)}
.ml-t:first-child{margin-top:0}
.dbx .ml-corps p,.ml-corps li{font-size:16px;line-height:1.8;color:var(--gris)}
.dbx .ml-corps p+p{margin-top:14px}
.ml-corps ul{list-style:none;margin:16px 0;padding:0}
.ml-corps a{text-decoration:underline;text-decoration-color:rgba(99,118,105,.4);text-underline-offset:3px}
.dbx .ml-corps .ml-maj{margin-top:48px;font-size:13px}
.foot-bas a{transition:color .3s}
.foot-bas a:hover{color:var(--sauge)}

/* ==========================================================
   TÉLÉPHONE · ajustements (le format ordinateur ne change pas)
   ========================================================== */
@media (max-width:760px){
  /* Accueil : la vidéo en bandeau, les deux univers en dessous */
  .home{height:auto;min-height:100svh;overflow:visible;background:#3f4c44}
  .home-video{position:relative;inset:auto;flex:none;height:46svh;min-height:280px}
  .home-video video{object-position:50% 50%}
  .home-video::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(63,76,68,.9),rgba(63,76,68,0))}
  .home-top{padding:18px 20px}
  .home-top .logo img{height:20px}
  .ht-d{font-size:10px;letter-spacing:.2em}
  .split{flex:none}
  .univ{flex:none}
  .u1{background:#3f4c44}.u2{background:#33403a}
  .univ-voile,.univ-grad{display:none}
  .univ-in{position:relative;padding:40px 24px 38px;gap:12px}
  .univ-in .eyebrow{font-size:9.5px;letter-spacing:.22em;gap:10px}
  .univ-in .eyebrow::before{flex-basis:24px}
  .univ-t{font-size:30px}
  .univ-p{font-size:14.5px;line-height:1.6;max-width:none}
  .univ-cta{font-size:10.5px}
  .badge{width:76px;height:76px;margin:-38px 0 0 -38px}
  .badge img{width:28px}

  /* Bandeau des pages : compact, sur deux lignes */
  .nav-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;row-gap:4px;min-height:0;padding-block:10px 6px}
  .nav-bar .logo{grid-column:1/3;grid-row:1;justify-self:start}
  .nav-bar .logo img{height:18px}
  .nav-liens{display:contents}
  .nav-liens a{padding:8px 0;font-size:9.5px;letter-spacing:.16em;grid-row:2;justify-self:center}
  .nav-liens a:first-child{justify-self:start}
  .nav-liens a:nth-child(3){justify-self:end}
  .nav-liens .nav-contact{grid-column:3;grid-row:1;justify-self:end;padding:8px 14px}

  /* Révélations au défilement : désactivées, le texte reste toujours lisible */
  .rv,.rv-2,.rv-3{animation:none !important;opacity:1 !important;transform:none !important}

  /* Un séjour, quatre moments : tout tient dans l'écran */
  .inst-stick{top:84px !important;height:calc(100svh - 84px) !important;justify-content:center}
  .inst-track{align-items:center;gap:26px}
  .inst-p{width:min(62vw,280px);gap:12px}
  .inst-p:nth-child(odd){margin-bottom:0;margin-top:36px}
  .inst-p h3{font-size:20px}
  .inst-p p{font-size:14px;line-height:1.55}
  .inst-n b{font-size:24px}
  .inst-intro{width:min(78vw,320px)}
  .inst-intro .h2{font-size:28px}

  /* Maisons partenaires : liste épurée, sans vignettes */
  .dbx .m-row .m-vign{display:none}
  .m-row{grid-template-columns:34px minmax(0,1fr) 22px;gap:12px}
  .m-row .m-i{display:block;font-size:15px}
  .m-nom{font-size:26px}
  .m-desc{font-size:14px}
}


/* ==========================================================
   VERSION SITE WEB
   ========================================================== */
[hidden]{display:none !important}
body{margin:0;background:#fff;color:#3F3C35}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:#fff}
.nav{top:env(safe-area-inset-top,0px)}
.wrap{padding-left:max(clamp(20px,5vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,5vw,72px),env(safe-area-inset-right,0px))}
.sortie .veil{animation:veil-in .42s var(--e2) both}
@keyframes veil-in{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
.cfg-mount{min-height:560px}
.f-err{grid-column:1/-1;margin:0;font-size:14.5px;line-height:1.55;color:#7a3b2e}
.c3-mount{width:100%}
.regard-c{-webkit-tap-highlight-color:transparent}
.pin>button:focus-visible{outline:1px solid #637669;outline-offset:6px}