:root{
  --noir:#0b0a09;--noir-2:#141312;--os:#f1ece2;--gris:#9a958c;
  --or:#d6b26a;--or-clair:#ead3a0;--sarcelle:#0f2a2e;--sarcelle-2:#173c42;--cognac:#8d4b2a;
  --dore:linear-gradient(135deg,#e9d29c,#9c7c3f 35%,#f1dca8 55%,#86672f 80%,#d9bd82);
  --gros:'Cabinet Grotesk','Arial Black',sans-serif;--fin:'Melodrama',Georgia,serif;--corps:'Satoshi',system-ui,sans-serif;
  --entete:68px;--sec:clamp(40px,4.2vw,68px);--marge:clamp(18px,4.4vw,72px);
  --ressort:cubic-bezier(.2,1.4,.4,1);--doux:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:var(--entete);-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--os);font:400 17px/1.55 var(--corps);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-weight:500;line-height:.92}
h2{font:800 clamp(46px,8vw,128px)/.88 var(--gros);text-transform:uppercase;letter-spacing:-.02em}
h2.fin{font:500 clamp(48px,7vw,112px)/.95 var(--fin);text-transform:none;letter-spacing:-.01em}
h2.fin em{font-style:normal;color:var(--or-clair)}
.or{color:var(--or)}
.sur{font:700 13px/1.2 var(--corps);letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Boutons du modèle B */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;font:800 15px/1 var(--gros);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);transition:transform .18s ease,background .2s ease;white-space:nowrap}
.btn-or{background:var(--or);color:#120d04}
.btn-blanc{background:var(--os);color:var(--noir)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}.btn-or:hover{background:#e7c886}}
.btn:active{transform:scale(.97)}

/* ---------- En-tête ---------- */
.entete{position:fixed;inset:0 0 auto;height:var(--entete);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--marge);transition:background .35s}
.entete.plein{background:#0b0a09}
.entete .logo{opacity:0;pointer-events:none;transition:opacity .25s}
.entete.plein .logo{opacity:1;pointer-events:auto}
.entete .logo{display:flex;align-items:center;min-height:44px}
.entete .logo img{height:42px;width:auto}
.entete nav{display:flex;gap:26px}
.entete nav a{font:700 13px/1 var(--corps);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#d8d2c6;padding:16px 0;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (hover:hover){.entete nav a:hover{color:var(--or)}}
.entete .btn{min-height:44px;padding:0 22px;font-size:13px}

/* ---------- 1. La lame (modèle D) ---------- */
.lame{height:320vh;height:320svh;position:relative}
.lame .scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.revelation{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);background:#000}
.revelation figure{position:relative;overflow:hidden}
.revelation img{width:100%;height:100%;object-fit:cover;transform:scale(var(--rz,1.12))}
.revelation::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,10,9,.94) 0%,rgba(11,10,9,.55) 32%,rgba(11,10,9,0) 60%)}
.revelation .texte{position:absolute;z-index:2;left:var(--marge);bottom:clamp(40px,9vh,100px);max-width:760px;opacity:var(--rt,0);transform:translateY(calc((1 - var(--rt,0)) * 30px))}
.revelation .texte h2{margin:12px 0 18px}
.revelation .texte p{color:rgba(241,236,226,.88);max-width:520px;font-size:18px}
.panneau{position:absolute;inset:0;z-index:2;background:var(--noir);overflow:hidden;will-change:transform}
.panneau::before{content:"";position:absolute;inset:-24px;background:url(../medias/fond/salon-1600.webp) center 45%/cover;transform:scale(var(--pz,1.04))}
@media (min-width:861px) and (min-resolution:1.4dppx),(min-width:1700px){.panneau::before{background-image:url(../medias/fond/salon-2800.webp)}}
.panneau::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 52% 62% at 16% 22%,rgba(11,10,9,.84) 0%,rgba(11,10,9,.66) 48%,rgba(11,10,9,0) 100%),linear-gradient(0deg,rgba(11,10,9,.82) 0%,rgba(11,10,9,0) 40%)}
.entaille{position:absolute;z-index:4;left:-5%;right:-5%;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,var(--or-clair) 12%,#fff8e6 50%,var(--or-clair) 88%,transparent);box-shadow:0 0 18px 2px rgba(234,211,160,.7);transform:rotate(var(--angle,-10deg)) scaleX(var(--ex,0));transform-origin:0 50%;opacity:var(--eo,0);pointer-events:none}
.contenu{position:absolute;inset:0;z-index:3;padding:calc(var(--entete) + clamp(16px,4vh,48px)) var(--marge) clamp(26px,5vh,54px);display:grid;grid-template-rows:auto 1fr auto;opacity:var(--co,1)}
.contenu h1{margin-top:14px}
.contenu h1 img{width:clamp(320px,36vw,640px);height:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 4px 24px rgba(0,0,0,.7))}
.contenu .bas{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.contenu .bas p{max-width:440px;color:rgba(241,236,226,.88);margin-bottom:18px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.statut{display:inline-flex;align-items:center;gap:10px;font:600 14px/1.3 var(--corps);padding:12px 16px;border:1px solid rgba(241,236,226,.2);border-radius:999px;background:rgba(11,10,9,.65)}
.statut i{width:9px;height:9px;border-radius:50%;background:#7fd18b;box-shadow:0 0 0 4px rgba(127,209,139,.18)}
.statut.ferme i{background:#d9734f;box-shadow:0 0 0 4px rgba(217,115,79,.18)}
.indice{position:absolute;z-index:3;left:50%;bottom:20px;transform:translateX(-50%);font:700 12px/1 var(--corps);letter-spacing:.2em;text-transform:uppercase;color:rgba(241,236,226,.6);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:var(--io,1)}
.indice::after{content:"";width:1px;height:34px;background:linear-gradient(var(--or),transparent);animation:goutte 1.8s ease-in-out infinite}
@keyframes goutte{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.rasoir{position:absolute;z-index:2;left:64%;top:54%;width:min(70vw,1040px);aspect-ratio:1956/255;transform-origin:50.23% 41.76%;transform:translate(calc(-50.23% + var(--rx,0px)),-41.76%) rotate(var(--angle,-10deg));opacity:var(--ro,1);pointer-events:none}
.rasoir img{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none}
.piece-manche{filter:drop-shadow(0 22px 22px rgba(0,0,0,.55))}
.piece-lame{position:absolute;inset:0;transform-origin:50.23% 41.76%;transform:rotate(-180deg);will-change:transform;filter:drop-shadow(0 22px 22px rgba(0,0,0,.45))}
.piece-lame i{position:absolute;inset:0;clip-path:polygon(68.8% 26%,99.4% 18%,99.6% 70%,98.6% 84%,71.2% 86%,69% 66%);background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:var(--rf,130%) 0}

/* ---------- 2. Bandeau (modèle B) ---------- */
.bandeau{background:var(--or);color:#120d04;overflow:hidden;padding:18px 0;border-block:1px solid #000;position:relative;z-index:5}
.bandeau .piste{display:flex;width:max-content;animation:defile 32s linear infinite}
.bandeau span{font:800 clamp(22px,2.6vw,36px)/1 var(--gros);text-transform:uppercase;letter-spacing:-.01em;padding-right:40px;white-space:nowrap;display:flex;align-items:center;gap:40px}
.bandeau span::after{content:"";width:22px;height:25px;background:#120d04;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- L'invité ---------- */
.invite{position:relative;background:#120b07 url(../medias/mur-cedre.webp) left center/cover;padding:var(--sec) var(--marge)}
.invite::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,9,.05) 0%,rgba(11,10,9,.45) 36%,rgba(11,10,9,.72) 56%,rgba(11,10,9,.76) 100%)}
.invite .dedans{position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.invite .cadre{aspect-ratio:3/4;transform:rotate(-1deg)}
.invite h2{margin:12px 0 22px}
.invite p{color:rgba(241,236,226,.86);max-width:58ch}
.invite p + p{margin-top:14px}
.invite .signe{margin-top:24px;font-size:15px;color:var(--gris)}
.invite .signe b{font:500 26px/1.2 var(--fin);color:var(--or-clair)}
.illu{position:absolute;right:14px;top:12px;z-index:4;font:600 12px/1 var(--corps);color:rgba(241,236,226,.7)}

/* ---------- 3. La coupe (modèle D) ---------- */
.coupe{height:520vh;height:520svh;position:relative;background:var(--noir-2)}
.coupe .colle{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;padding:calc(var(--entete) + 10px) var(--marge) 30px;max-width:1500px;margin:0 auto}
.coupe .texte{display:grid;gap:18px;align-content:center}
.coupe h2{font-size:clamp(46px,6.4vw,104px)}
.coupe .intro{color:var(--gris);max-width:440px}
.onglets{display:flex;gap:6px;margin-top:6px}
.onglets button{flex:1;min-height:48px;background:none;border:0;border-top:1px solid rgba(241,236,226,.22);padding:12px 0 0;text-align:left;font:800 13px/1.2 var(--gros);letter-spacing:.06em;text-transform:uppercase;color:rgba(241,236,226,.5);position:relative}
.onglets button i{position:absolute;left:0;top:-1px;height:2px;width:calc(var(--rempli,0) * 100%);background:var(--or)}
.onglets button[aria-selected="true"]{color:var(--os)}
.etapes{display:grid;min-height:220px}
.etape{grid-area:1/1;display:grid;gap:10px;align-content:start;opacity:0;transform:translateY(16px);transition:opacity .35s var(--doux),transform .35s var(--doux);pointer-events:none}
.etape.active{opacity:1;transform:none;pointer-events:auto}
.etape h3{font:500 clamp(34px,3.6vw,58px)/.95 var(--fin)}
.etape .tech{font:700 12px/1.4 var(--corps);letter-spacing:.14em;color:var(--or)}
.etape p:last-child{color:rgba(241,236,226,.8);max-width:46ch}
.etape .mini{display:none}
.cadre-coupe{position:relative;justify-self:center;height:min(100%,80vh);height:min(100%,80svh);aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:#0e0c0b;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.cadre-coupe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.cadre-coupe .calque{clip-path:inset(var(--r,100%) 0 0 0);-webkit-clip-path:inset(var(--r,100%) 0 0 0)}
.cadre-coupe .calque:first-child{clip-path:none;-webkit-clip-path:none}
.cadre-coupe .avant-voir{opacity:0;transition:opacity .2s}
.cadre-coupe.voir-avant .avant-voir{opacity:1}
.ligne-coupe{position:absolute;left:0;right:0;top:var(--ly,100%);height:0;opacity:var(--lo,0);pointer-events:none;z-index:3}
.ligne-coupe::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--or-clair);box-shadow:0 0 14px rgba(234,211,160,.85)}
.ligne-coupe img{position:absolute;inset:auto;right:4%;top:0;width:clamp(70px,24%,140px);height:auto;transform:translateY(-62%) rotate(-74deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
.ligne-coupe img:not(.vu){display:none}
.poils{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.poils span{position:absolute;width:2px;height:7px;background:#2a1d14;border-radius:2px;animation:tombe 1.1s ease-in forwards}
@keyframes tombe{to{transform:translate(var(--dx),220px) rotate(var(--rot));opacity:0}}
.num-coupe{position:absolute;left:14px;top:12px;z-index:4;font:800 13px/1 var(--gros);letter-spacing:.12em;color:var(--or-clair)}
.tenir{position:absolute;right:12px;bottom:12px;z-index:4;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(241,236,226,.3);background:rgba(11,10,9,.72);font:600 13px/1 var(--corps);-webkit-touch-callout:none}
.indic-coupe{font:700 12px/1.3 var(--corps);letter-spacing:.14em;text-transform:uppercase;color:rgba(241,236,226,.5)}
.seul-cell{display:none}

/* ---------- 4. Les soins : le coffre sur le mur damassé ---------- */
.soins{position:relative;padding:var(--sec) var(--marge);background:#0c2326 url(../medias/mur-damas.webp) center top/cover}
.soins::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,19,21,.95) 0%,rgba(7,19,21,.86) 46%,rgba(7,19,21,.35) 78%,rgba(7,19,21,.5) 100%),linear-gradient(0deg,rgba(7,19,21,.7),rgba(7,19,21,0) 30%)}
.soins > *{position:relative}
.soins .tete{max-width:1400px;margin:0 auto clamp(18px,2.4vw,36px);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.soins .tete p{max-width:380px;color:rgba(241,236,226,.85)}
.soins .grille{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px)}
.liste{list-style:none}
.soin{display:grid;grid-template-columns:44px 1fr auto;gap:6px 18px;align-items:baseline;padding:30px 0;border-top:1px solid rgba(234,211,160,.2);transition:opacity .35s;opacity:.68}
.soin:last-child{border-bottom:1px solid rgba(234,211,160,.2)}
.soin.actif{opacity:1}
.soin .n{font:800 14px/1 var(--gros);color:var(--or);letter-spacing:.08em}
.soin h3{font:500 clamp(28px,2.7vw,42px)/1 var(--fin)}
.soin .duree{font:800 14px/1 var(--gros);letter-spacing:.06em;white-space:nowrap}
.soin p{grid-column:2/4;color:rgba(241,236,226,.82);max-width:52ch;font-size:16px}
.soin .bas{grid-column:2/4;display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px}
.soin .prix{font:600 14px/1 var(--corps);color:var(--or-clair)}
.soin .resa{display:inline-block;font:800 13px/1 var(--gros);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--or);padding:18px 0 12px}
.domicile{max-width:1400px;margin:16px auto 0;color:rgba(241,236,226,.88)}
.coffre .colle{position:sticky;top:calc(var(--entete) + 20px);height:min(640px,78vh);height:min(640px,78svh);display:flex;flex-direction:column;align-items:center;justify-content:center}
.applique{width:150px;height:14px;border-radius:7px;background:linear-gradient(#f3dfae,#9c7c3f 60%,#5c4521);box-shadow:0 4px 10px rgba(0,0,0,.5);position:relative;z-index:2}
.applique::after{content:"";position:absolute;left:50%;top:12px;width:340px;height:300px;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(255,226,160,.32),transparent 75%);pointer-events:none}
.ovale{position:relative;margin-top:14px;width:min(340px,80%);aspect-ratio:4/5;border-radius:50%;padding:16px;background:var(--dore);box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.25)}
.ovale::before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid rgba(110,80,30,.6);pointer-events:none}
.ovale .fond{position:relative;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#1f4a51,#0a1c1f 72%);box-shadow:inset 0 0 40px rgba(0,0,0,.7);overflow:hidden;display:grid;place-items:center}
.ovale img{grid-area:1/1;width:78%;height:78%;object-fit:contain;opacity:0;transform:translateY(30px) rotate(-70deg) scale(.85);filter:drop-shadow(0 18px 16px rgba(0,0,0,.6));transition:opacity .3s,transform .55s var(--ressort)}
.ovale img.vu{opacity:1;transform:none}
.ovale img.part{opacity:0;transform:translateY(-30px) rotate(25deg) scale(.9);transition:opacity .25s,transform .3s ease-in}
.plaque{margin-top:22px;min-width:230px;padding:12px 22px;text-align:center;background:linear-gradient(135deg,#e9d29c,#b8964f 45%,#f1dca8 60%,#9c7c3f);border-radius:3px;box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(80,55,15,.5);color:#2b1f0c}
.plaque small{display:block;font:800 12px/1 var(--gros);letter-spacing:.22em}
.plaque b{display:block;font:500 22px/1.15 var(--fin);margin-top:4px}

/* ---------- 5. Dans le fauteuil (modèle B) ---------- */
.pellicule{position:relative;height:300vh;height:300svh;background:var(--noir-2)}
.pellicule .scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,40px);padding-top:var(--entete)}
.pellicule .tete{padding-inline:var(--marge);display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.pellicule .tete p{color:var(--gris);max-width:340px}
.pellicule .piste{display:flex;gap:clamp(14px,1.6vw,24px);padding-inline:var(--marge);width:max-content;transform:translateX(var(--decal,0px));will-change:transform}
.plan{position:relative;width:clamp(200px,19vw,300px);aspect-ratio:9/16;flex:0 0 auto;overflow:hidden;background:#000}
.plan:nth-child(even){transform:translateY(22px)}
@media (min-width:861px){.plan{width:auto;height:min(calc(clamp(200px,19vw,300px) * 16 / 9),calc(100vh - 300px));height:min(calc(clamp(200px,19vw,300px) * 16 / 9),calc(100svh - 300px));min-height:240px}}
.plan video{width:100%;height:100%;object-fit:cover}
.plan figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 14px 14px;background:linear-gradient(0deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,.62) 55%,rgba(11,10,9,0) 100%);font:800 16px/1 var(--gros);text-transform:uppercase;letter-spacing:.02em}
.plan figcaption small{display:block;font:500 14px/1.3 var(--corps);text-transform:none;letter-spacing:0;color:#f1ece2;margin-top:6px}

/* ---------- 6. Le salon (modèle A) ---------- */
.mur{position:relative;background:#111110;padding:var(--sec) var(--marge);overflow:hidden}
.mur::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 20% 0%,rgba(234,190,110,.12),transparent 70%),radial-gradient(50% 40% at 85% 30%,rgba(234,190,110,.08),transparent 70%);pointer-events:none}
.mur .tete{max-width:800px;margin-bottom:clamp(20px,3vw,40px);position:relative}
.mur .tete p{color:var(--gris);margin-top:18px;max-width:520px}
.accroche{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(60px,6vw,96px);gap:clamp(14px,2vw,28px);position:relative;max-width:1400px;margin:0 auto}
.accroche figure{position:relative;cursor:zoom-in;transition:transform .5s var(--doux)}
.cadre{position:relative;height:100%;padding:10px;background:var(--dore);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35)}
.cadre::after{content:"";position:absolute;inset:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 0 18px rgba(0,0,0,.35);pointer-events:none}
.cadre img,.cadre video{width:100%;height:100%;object-fit:cover}
.accroche figure:nth-child(1){grid-column:1/5;grid-row:1/7;transform:rotate(-1.2deg)}
.accroche figure:nth-child(2){grid-column:5/9;grid-row:2/5;transform:rotate(.8deg)}
.accroche figure:nth-child(3){grid-column:9/13;grid-row:1/7;transform:rotate(-.6deg)}
.accroche figure:nth-child(4){grid-column:5/9;grid-row:5/10;transform:rotate(-.9deg)}
.accroche figure:nth-child(5){grid-column:1/5;grid-row:7/10;transform:rotate(1deg)}
.accroche figure:nth-child(6){grid-column:9/13;grid-row:7/10;transform:rotate(.7deg)}
@media (hover:hover){.accroche figure:hover{transform:rotate(0) scale(1.02);z-index:2}}
.accroche .rond .cadre,.accroche .rond .cadre img,.accroche .rond .cadre video,.accroche .rond .cadre::after{border-radius:50%}
.boite{position:fixed;inset:0;z-index:60;background:rgba(5,8,9,.92);display:none;align-items:center;justify-content:center;padding:4vw}
.boite.ouverte{display:flex}
.boite img,.boite video{max-height:88vh;max-width:92vw;width:auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.boite button{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:22px}

/* ---------- 7. L'équipe (modèle A) ---------- */
.equipe{background:var(--sarcelle);padding:var(--sec) var(--marge)}
.equipe .contenant{max-width:1300px;margin:0 auto}
.equipe .rangee{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,3vw,40px);margin-top:clamp(20px,3vw,40px)}
.portrait{text-align:center}
.portrait .medaillon{aspect-ratio:3/4;border-radius:50%;padding:9px;background:var(--dore);box-shadow:0 16px 36px rgba(0,0,0,.5)}
.portrait .medaillon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.portrait h3{font:500 clamp(26px,2.4vw,36px)/1 var(--fin);margin-top:20px}
.portrait p{font-size:14px;color:#b9c7c5;margin-top:6px}

/* ---------- 8. Les avis (modèle B) ---------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #262626;background:var(--noir)}
.chiffres div{padding:clamp(20px,2.6vw,36px) var(--marge);border-right:1px solid #262626}
.chiffres div:last-child{border-right:0}
.chiffres b{display:block;font:800 clamp(42px,5.5vw,84px)/.9 var(--gros);color:var(--or)}
.chiffres span{font-size:14px;color:var(--gris)}
.avis{padding:var(--sec) 0;background:var(--noir-2);overflow:hidden}
.avis .tete{padding-inline:var(--marge);margin-bottom:22px}
.ruban{display:flex;gap:18px;width:max-content;animation:defile 70s linear infinite}
.avis:hover .ruban{animation-play-state:paused}
.carte-avis{width:min(78vw,400px);flex:0 0 auto;background:#1b1b1b;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.carte-avis p{font-size:17px}
.carte-avis cite{font:800 14px/1 var(--gros);text-transform:uppercase;letter-spacing:.06em;font-style:normal;color:var(--or)}
.carte-avis cite small{font:500 13px var(--corps);text-transform:none;letter-spacing:0;color:var(--gris)}

/* ---------- 9. Les heures (modèle D) ---------- */
.heures{background:var(--noir);padding:var(--sec) var(--marge)}
.heures .grille{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.cadran{width:min(100%,520px);justify-self:center}
.cadran svg{width:100%;height:auto;overflow:visible}
.cadran .graduation{stroke:rgba(241,236,226,.35)}
.cadran .graduation.forte{stroke:rgba(241,236,226,.8)}
.cadran text{fill:rgba(241,236,226,.7);font:700 13px var(--corps);text-anchor:middle;dominant-baseline:middle}
.cadran .arc{fill:none;stroke:var(--or);stroke-width:20;stroke-linecap:round}
.cadran .aiguille{stroke:var(--os);stroke-width:3;stroke-linecap:round}
.cadran .centre-txt{font:800 52px var(--gros);fill:var(--os)}
.cadran .centre-sous{font:700 12px var(--corps);letter-spacing:.18em;fill:var(--or)}
.heures h2{font-size:clamp(44px,5.6vw,92px);margin:14px 0}
.heures .ligne-intro{color:rgba(241,236,226,.82);font-size:19px;max-width:32ch}
.jours{list-style:none;margin-top:28px;display:grid;gap:2px}
.jours button{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:46px;padding:0 14px;background:none;border:0;border-bottom:1px solid rgba(241,236,226,.12);font:500 16px/1 var(--corps);text-align:left}
.jours button[aria-pressed="true"]{background:rgba(214,178,106,.14);color:var(--or-clair)}
.jours .auj::after{content:"aujourd’hui";font:700 12px/1 var(--corps);letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-left:10px}
.infos{max-width:1300px;margin:clamp(28px,3vw,44px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);padding-top:26px;border-top:1px solid rgba(241,236,226,.14)}
.infos h3{font:800 14px/1.2 var(--gros);letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.infos p,.infos li{color:rgba(241,236,226,.86);font-size:16px}
.infos ul{list-style:none;display:grid;gap:4px}
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastilles a,.pastilles span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(241,236,226,.25);text-decoration:none;font:600 14px/1 var(--corps)}

/* ---------- 10. Réserve (modèle B) ---------- */
.final{position:relative;overflow:hidden;padding:clamp(46px,6vw,90px) var(--marge);text-align:center;background:#000}
.final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.final .dedans{position:relative}
.final h2{font-size:clamp(60px,17.6vw,250px)}
.final p{margin:20px auto 34px;color:#e2ded6;max-width:460px;font-size:18px}
.final .actions{justify-content:center}

footer{padding:24px var(--marge);display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:var(--gris);font-size:14px;border-top:1px solid #1d1d1d}
footer img{height:60px;width:auto}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer nav a{text-decoration:none;padding:13px 0}

.barre-bas{display:none}

.monte{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s var(--doux)}
.monte.vu{opacity:1;transform:none}

/* ---------- Cellulaire ---------- */
@media (max-width:860px){
  :root{--entete:60px;--sec:30px}
  body{font-size:16px}
  .entete nav{display:none}
  .entete .logo img{height:36px}
  .lame{height:300vh;height:300svh}
  .panneau::before{background-image:url(../medias/fond/salon-cell.webp?v=2);background-position:center 50%}
  .panneau::after{background:linear-gradient(0deg,rgba(11,10,9,.94) 0%,rgba(11,10,9,.55) 34%,rgba(11,10,9,.12) 52%,rgba(11,10,9,.36) 68%,rgba(11,10,9,.52) 100%)}
  .revelation{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .revelation .texte{bottom:calc(96px + env(safe-area-inset-bottom))}
  .revelation .texte p{font-size:16px}
  .contenu h1 img{width:min(82vw,400px)}
  .contenu .bas{display:grid;gap:14px}
  .contenu .bas p{margin-bottom:12px;font-size:16px}
  .contenu .actions{display:grid;grid-template-columns:1.3fr 1fr}
  .btn{padding:0 18px;font-size:14px}
  .statut{justify-self:start;font-size:13px;padding:10px 14px}
  .indice{display:none}
  .rasoir{width:100vw;left:50%;top:50%}
  .bandeau{padding:14px 0}
  .coupe{height:480vh;height:480svh}
  .coupe .colle{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:12px;padding:calc(var(--entete) + 8px) 16px 80px}
  .coupe .texte{gap:8px}
  .coupe .texte > .sur,.coupe h2,.coupe .intro{display:none}
  .cadre-coupe{order:-1;height:min(46svh,420px)}
  .onglets{margin-top:0}
  .onglets button{font-size:12px;letter-spacing:0;padding-top:10px}
  .etapes{min-height:0}
  .etape h3{font-size:30px}
  .etape p:last-child{font-size:15px;line-height:1.45}
  .seul-ordi{display:none}.seul-cell{display:inline}
  .soins{background-position:60% top;margin-top:min(0px,calc(318px - 54svh))}
  .soins::before{background:linear-gradient(0deg,rgba(7,19,21,.94),rgba(7,19,21,.82))}
  .soins .tete{margin-bottom:10px}
  .soins .grille{grid-template-columns:1fr;gap:0}
  .coffre{order:-1;position:sticky;top:var(--entete);z-index:3;margin:0 calc(var(--marge) * -1);background:linear-gradient(rgba(9,28,31,.97) 84%,rgba(9,28,31,0))}
  .coffre .colle{position:relative;top:0;height:168px;flex-direction:row;justify-content:flex-start;gap:18px;padding:0 var(--marge)}
  .applique,.applique::after{display:none}
  .ovale{margin-top:0;width:112px;padding:8px;flex:none}
  .ovale::before{inset:4px}
  .plaque{margin-top:0;min-width:0;padding:10px 14px;text-align:left}
  .plaque b{font-size:19px}
  .soin{grid-template-columns:30px 1fr;padding:18px 0}
  footer{padding-bottom:88px}
  .heures .grille{gap:18px}
  .soin .duree{grid-column:2;grid-row:2}
  .soin p,.soin .bas{grid-column:2}
  .pellicule{height:auto;padding:var(--sec) 0}
  .pellicule .scene{position:relative;height:auto;padding-top:0}
  .pellicule .piste{transform:none!important;overflow-x:auto;width:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:0}
  .plan:nth-child(even){transform:none}
  .pellicule .piste::-webkit-scrollbar{display:none}
  .plan{width:62vw;scroll-snap-align:center}
  .accroche{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:10px 4px 8px;margin-inline:calc(var(--marge) * -1);padding-inline:var(--marge);scrollbar-width:none}
  .accroche::-webkit-scrollbar{display:none}
  .accroche figure{flex:0 0 72%;height:62svh;scroll-snap-align:center;transform:none!important}
  .equipe .rangee{grid-template-columns:1fr 1fr}
  .portrait:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 9px);justify-self:center}
  .invite::before{background:linear-gradient(180deg,rgba(11,10,9,.18) 0%,rgba(11,10,9,.5) 42%,rgba(11,10,9,.9) 62%,rgba(11,10,9,.94) 100%)}
  .invite .dedans{grid-template-columns:1fr}
  .invite figure{max-width:340px}
  .chiffres{grid-template-columns:1fr 1fr}
  .chiffres div:nth-child(2){border-right:0}
  .chiffres div:nth-child(-n+2){border-bottom:1px solid #262626}
  .heures .grille{grid-template-columns:1fr}
  .cadran{width:min(100%,380px)}
  .infos{grid-template-columns:1fr}
  .final .actions{display:grid;grid-template-columns:1fr;max-width:300px;margin:0 auto}
  .barre-bas{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:45;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;transform:translateY(150%);transition:transform .35s ease}
  .barre-bas.visible{transform:none}
}

/* ---------- Mouvement réduit ---------- */
.reduit .lame,.reduit .coupe,.reduit .pellicule{height:auto}
.reduit .lame .scene{position:relative;height:auto;display:grid}
.reduit .entaille,.reduit .indice,.reduit .panneau.bas{display:none}
.reduit .panneau.haut{position:absolute;clip-path:none!important}
.reduit .contenu{position:relative;min-height:100svh}
.reduit .revelation{position:relative;height:80svh}
.reduit .revelation .texte{--rt:1}
.reduit .coupe .colle{position:relative;height:auto;grid-template-columns:1fr;padding:80px var(--marge)}
.reduit .cadre-coupe,.reduit .onglets,.reduit .indic-coupe{display:none}
.reduit .etapes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.reduit .etape{grid-area:auto;opacity:1;transform:none}
.reduit .etape .mini{display:block;border-radius:6px;margin-bottom:8px}
.reduit .pellicule .scene{position:relative;height:auto;padding:80px 0}
.reduit .pellicule .piste{overflow-x:auto;width:auto}
.reduit .bandeau .piste,.reduit .ruban{animation:none}
.reduit .monte{opacity:1;transform:none}
.reduit .soins{margin-top:0}

.ecart{margin-top:14px}
/* ---------- Menu et pied de page communs ---------- */
.entete-droite{display:flex;align-items:center;gap:10px}
.langue{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:700 13px/1 var(--corps);letter-spacing:.08em;text-decoration:none;color:#d8d2c6}
@media (hover:hover){.langue:hover{color:var(--or)}}
.btn-menu{display:none;min-height:44px;padding:0 12px;background:none;border:1px solid rgba(241,236,226,.35);border-radius:3px;font:700 13px/1 var(--corps);letter-spacing:.06em;color:var(--os)}
.menu-cell{position:fixed;inset:var(--entete) 0 0;z-index:39;overflow-y:auto;padding:14px var(--marge) 110px;background:#0b0a09}
.menu-cell[hidden]{display:none}
.menu-cell a{display:flex;align-items:center;min-height:54px;border-bottom:1px solid rgba(234,211,160,.16);font:500 30px/1.1 var(--fin);text-decoration:none;color:var(--os)}
.menu-cell .petit{margin-top:14px;font:600 16px/1.2 var(--corps);color:var(--or-clair);min-height:48px}
body.menu-ouvert{overflow:hidden}
body.menu-ouvert .entete{background:#0b0a09}
body.menu-ouvert .entete .logo{opacity:1;pointer-events:auto}
@media (max-width:1060px){.entete nav{display:none}.btn-menu{display:inline-flex;align-items:center}.entete-droite .langue{display:none}}
.pied{display:block;padding:clamp(26px,3.4vw,44px) var(--marge) 20px;border-top:1px solid #1d1d1d;background:#0b0a09}
.pied-haut{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:auto 1.3fr 1fr 1fr;gap:clamp(20px,4vw,60px);align-items:start}
.pied-haut img{height:84px;width:auto}
.pied h2{font:600 15px/1.2 var(--corps);color:var(--or);margin-bottom:8px}
.pied p,.pied a{color:rgba(241,236,226,.82);font-size:15px;line-height:1.5}
.pied nav{display:block}
.pied nav a{display:flex;align-items:center;min-height:32px;text-decoration:none;padding:0}
.pied-bas{max-width:1300px;margin:20px auto 0;padding-top:14px;border-top:1px solid #1d1d1d;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;font-size:14px;color:var(--gris)}
.pied-bas nav{display:flex;flex-wrap:wrap;gap:0 18px}
.pied-bas a{font-size:14px}
.pied-bas nav a{min-height:44px}
html[lang^="en"] .jours .auj::after{content:"today"}
@media (max-width:860px){.pied{padding-bottom:88px}.pied-haut{grid-template-columns:1fr 1fr}.pied-haut > :first-child{grid-column:1/-1}.pied-haut > :nth-child(2){grid-column:1/-1}.pied nav a{min-height:44px}}
