/* L'AppartOsé — refonte 2026
   Noir cuir capitonné, or crème, didone italique. */

:root{
  --noir:#0A0708;
  --cuir:#14100F;
  --creme:#F2E4C8;
  --or:#E3C88F;
  --brume:#B9A98F;
  --grenat:#8E101C;
  --display:"Alex Brush","Snell Roundhand","Brush Script MT",cursive;
  --display2:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --ui:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --tuft:230px;
  --gutter:24px;
  --ink-rgb:242,228,200;
  --gold-rgb:227,200,143;
  --mute-rgb:185,169,143;
  --hl-rgb:255,226,186;
  --hl2-rgb:255,216,176;
  --shade-rgb:0,0,0;
  --panel:#0C0909;
  --on-gold:#120C0B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--noir);
  color:var(--creme);
  font-family:var(--ui);
  font-weight:300;
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:780px}

/* ---------------------------------------------------- cuir capitonné */
.scene,.band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, #2A1F1B 0%, rgba(42,31,27,0) 55%),
    radial-gradient(90% 70% at 6% 96%, rgba(142,16,28,.42) 0%, rgba(142,16,28,0) 58%),
    linear-gradient(170deg,#181211 0%,#0A0708 60%,#070505 100%);
}
.scene::before,.band::before{
  content:"";position:absolute;inset:-10%;z-index:-3;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(var(--hl-rgb),.16) 0 2px, rgba(var(--shade-rgb),.55) 3px 8px, rgba(var(--shade-rgb),0) 13px),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(var(--hl2-rgb),.045) 0%, rgba(var(--shade-rgb),.42) 78%),
    repeating-linear-gradient(45deg, rgba(var(--shade-rgb),.34) 0 1px, rgba(255,255,255,.012) 1px 2px, transparent 2px calc(var(--tuft)*0.7071)),
    repeating-linear-gradient(-45deg, rgba(var(--shade-rgb),.34) 0 1px, rgba(255,255,255,.012) 1px 2px, transparent 2px calc(var(--tuft)*0.7071));
  background-size:var(--tuft) var(--tuft), var(--tuft) var(--tuft), auto, auto;
  opacity:.16;
}
.scene::after,.band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 50% 45%, rgba(var(--shade-rgb),0) 38%, rgba(var(--shade-rgb),.72) 100%);
  background-size:180px 180px, auto;
  opacity:.5;mix-blend-mode:overlay;
}
.silk{
  position:absolute;left:-18%;bottom:-26%;width:78%;height:78%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(163,16,28,.50), rgba(120,10,20,.16) 55%, rgba(var(--shade-rgb),0) 78%);
  filter:blur(18px);
  animation:braise 14s ease-in-out infinite alternate;
}
.silk.small{width:60%;height:120%;bottom:-40%}
@keyframes braise{from{opacity:.6;transform:scale(1)}to{opacity:.95;transform:scale(1.09)}}

/* ---------------------------------------------------- navigation */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:15;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 40px;
  padding-top:calc(26px + env(safe-area-inset-top,0px));
  border-bottom:1px solid transparent;
  transition:background .45s ease,backdrop-filter .45s ease,
             border-color .45s ease,padding .45s ease;
}
.bar.scrolled{
  background:rgba(9,6,7,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:rgba(var(--gold-rgb),.16);
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  padding-bottom:14px;
}
.bar.scrolled .mark{font-size:25px}
.mark{
  font-family:var(--display);font-style:italic;font-size:30px;
  letter-spacing:.01em;color:var(--creme);text-decoration:none;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-size:11.5px;font-weight:300;letter-spacing:.20em;text-transform:uppercase;
  color:var(--or);text-decoration:none;padding-bottom:7px;
  border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;white-space:nowrap;
}
.nav a:hover,.nav a:focus-visible{color:var(--creme);border-bottom-color:rgba(var(--gold-rgb),.6)}
.nav a[aria-current="page"]{color:var(--creme);border-bottom-color:var(--or)}
.book{
  font-family:var(--ui);font-size:11.5px;font-weight:300;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or);text-decoration:none;
  border:1px solid rgba(var(--gold-rgb),.75);border-radius:999px;padding:15px 34px;
  transition:background .3s ease,color .3s ease,border-color .3s ease;white-space:nowrap;
}
.book:hover,.book:focus-visible{background:var(--or);color:var(--on-gold);border-color:var(--or)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--or)}
.burger span{display:block;width:30px;height:1.5px;background:currentColor;margin:7px 0}

/* ---------------------------------------------------- hero */
.scene{min-height:100svh;display:flex;flex-direction:column}
.hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:150px var(--gutter) 40px;position:relative;z-index:2;
}
.eyebrow{
  margin:0 0 14px;font-size:11.5px;font-weight:200;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;color:var(--or);
}
.eyebrow.wide{font-size:12.5px;letter-spacing:.46em;text-indent:.46em;color:rgba(var(--ink-rgb),.72);margin-bottom:30px}
h1{
  margin:0;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(3.2rem,10vw,7.4rem);line-height:.98;color:var(--creme);
  text-wrap:balance;text-shadow:0 2px 40px rgba(var(--shade-rgb),.6);
}
.tagline{
  margin:0 0 46px;font-size:clamp(13px,3.2vw,16px);font-weight:200;
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:rgba(var(--ink-rgb),.9);
}
.rule{display:flex;align-items:center;gap:22px;width:min(430px,82vw);margin:30px auto 24px;color:var(--or)}
.rule.on-hero{margin:34px 0 26px}
.rule i{flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.85))}
.rule i+i{background:linear-gradient(90deg,rgba(var(--gold-rgb),.85),rgba(var(--gold-rgb),0))}
.hearts{width:46px;height:26px;flex:none;display:block}
.cta{
  display:inline-flex;align-items:center;gap:18px;
  font-size:12px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  color:var(--creme);text-decoration:none;
  border:1px solid rgba(var(--gold-rgb),.7);border-radius:999px;padding:20px 46px;
  background:rgba(10,7,8,.3);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.cta:hover,.cta:focus-visible{background:var(--or);color:var(--on-gold);border-color:var(--or)}
.cta svg{width:15px;height:10px;flex:none}
.foot-hero{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;
  padding:0 40px 30px;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));
}
.corner{
  margin:0;font-size:10.5px;font-weight:200;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(var(--mute-rgb),.75);
}
.corner.right{text-align:right}
.scroller{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:10.5px;font-weight:200;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.8);text-decoration:none;
}
.scroller em{
  display:block;width:1px;height:56px;transform-origin:top;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),0),rgba(var(--ink-rgb),.85));
  animation:filet 2.8s ease-in-out infinite;
}
@keyframes filet{0%,100%{transform:scaleY(.45);opacity:.45}50%{transform:scaleY(1);opacity:1}}

/* ---------------------------------------------------- bandeau de page */
.band{padding:170px 0 90px;text-align:center}
.band .wrap{position:relative;z-index:2}
.h-band{font-size:clamp(2.6rem,7.5vw,5rem)}
.lead{
  max-width:62ch;margin:0 auto;font-size:17px;font-weight:300;
  color:rgba(var(--ink-rgb),.82);
}
.lead.center{text-align:center;margin-bottom:54px}
.lead a{color:var(--or);text-decoration:none;border-bottom:1px solid rgba(var(--gold-rgb),.45)}
.lead a:hover{color:var(--creme)}

/* ---------------------------------------------------- sections */
.sec{padding:100px 0;text-align:center;position:relative}
.sec,.band,.site-foot{scroll-margin-top:96px}
.sec.alt{background:linear-gradient(180deg,#0D0A0A,#120D0D 50%,#0A0708)}
.h-sec{
  margin:0;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.1;color:var(--creme);text-wrap:balance;
}
.prose{max-width:66ch;margin:0 auto;text-align:center}
.prose p{margin:0 0 20px;color:rgba(var(--ink-rgb),.82)}
.prose strong{color:var(--creme);font-weight:400}
.note{
  font-size:14px;letter-spacing:.06em;color:var(--brume);font-style:italic;
}
.note.center{text-align:center}

/* ---------------------------------------------------- grilles */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:52px 40px}
.feats{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:10px}
.feats li{display:flex;flex-direction:column;align-items:center;gap:12px}
.ic-wrap{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.32);color:var(--or);
}
.feats h3{
  margin:0;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:1.5rem;color:var(--creme);
}
.feats p{margin:0;max-width:34ch;font-size:15px;color:rgba(var(--ink-rgb),.74)}

/* ---------------------------------------------------- galerie */
/* Grille 3 colonnes : la lecture se fait de gauche à droite, comme sur le site
   actuel. (Les colonnes CSS remplissaient verticalement et cassaient l'ordre.) */
.gal{
  list-style:none;margin:0;padding:0;text-align:left;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.gal li{margin:0;min-width:0}
.gal li.r-p{aspect-ratio:3/4}
.gal li.r-l{aspect-ratio:4/3}
.js .gal li.reveal{transition-delay:calc(var(--i,0) * 110ms)!important}
.gal a{
  display:block;position:relative;height:100%;overflow:hidden;
  border:1px solid rgba(var(--gold-rgb),.16);background:var(--panel);
}
.gal img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) brightness(.86);
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1),filter .7s ease;
}
.gal a::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0);
  transition:box-shadow .45s ease;
}
.gal a:hover img,.gal a:focus-visible img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.gal a:hover::after,.gal a:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.5)}
.cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;min-height:56%;padding:18px 16px;
  background:linear-gradient(180deg,rgba(6,4,5,0),rgba(6,4,5,.9));
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
}
.cap span{
  font-size:10.5px;font-weight:300;letter-spacing:.2em;line-height:1.7;
  text-transform:uppercase;color:#F2E4C8;
}
.gal a:hover .cap,.gal a:focus-visible .cap{opacity:1;transform:none}

/* ---------------------------------------------------- visionneuse */
.lb{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(5,3,4,.96);
  padding:max(24px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px));
}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%}
.lb-fig img{
  max-width:min(1180px,86vw);max-height:74vh;width:auto;height:auto;
  object-fit:contain;border:1px solid rgba(var(--gold-rgb),.22);
}
.lb-fig figcaption{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.86);text-align:center;
}
.lb-count{color:var(--or);font-variant-numeric:tabular-nums}
.lb button{
  background:none;border:1px solid rgba(var(--gold-rgb),.3);border-radius:50%;
  color:var(--or);cursor:pointer;display:grid;place-items:center;flex:none;
  width:52px;height:52px;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.lb button:hover,.lb button:focus-visible{background:var(--or);color:var(--on-gold);border-color:var(--or)}
.lb button svg{width:20px;height:20px}
.lb-close{
  position:absolute;top:max(20px,env(safe-area-inset-top,0px));right:20px;
  font-size:26px;line-height:1;font-family:var(--ui);font-weight:200;
}

/* ---------------------------------------------------- tarifs */
.tarif-block{margin-bottom:84px}
.tarif-block:last-child{margin-bottom:0}
.h-tarif{
  margin:0 0 34px;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.7rem,4vw,2.6rem);color:var(--creme);
}
.prices{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:rgba(var(--gold-rgb),.18);border:1px solid rgba(var(--gold-rgb),.18)}
.prices li{background:var(--panel);padding:44px 26px;display:flex;flex-direction:column;gap:8px}
.amount{
  margin:0;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:2.8rem;line-height:1;color:var(--or);font-variant-numeric:tabular-nums;
}
.plabel{
  margin:0;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--creme);
}
.pdetail{margin:0;font-size:14px;color:rgba(var(--ink-rgb),.68)}

/* ---------------------------------------------------- avis (placeholder) */
.placeholder{
  border:1px solid rgba(var(--gold-rgb),.22);padding:64px 32px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  background:rgba(12,9,9,.6);
}
.placeholder .cta{margin-top:14px}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  color:var(--or);background:rgba(var(--gold-rgb),.1);padding:2px 6px;
}

/* ---------------------------------------------------- CGV */
.art{text-align:left;margin-bottom:44px}
.art h3{
  margin:0 0 14px;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:1.6rem;color:var(--creme);display:flex;flex-direction:column;gap:6px;
}
.num{
  font-family:var(--ui);font-style:normal;font-size:10.5px;font-weight:300;
  letter-spacing:.3em;text-transform:uppercase;color:var(--or);
}
.art p{margin:0 0 14px;font-size:15px;color:rgba(var(--ink-rgb),.78)}
.legal-block{text-align:left}
.legal-block p{font-size:15px;margin-bottom:10px}

/* ---------------------------------------------------- pied de site */
.site-foot{
  background:linear-gradient(180deg,#0A0708,#100B0B);
  border-top:1px solid rgba(var(--gold-rgb),.16);
  padding:96px 0 48px;text-align:center;
}
.coords{
  list-style:none;margin:0 0 44px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px 54px;
}
.coords li{display:flex;align-items:center;gap:12px;color:rgba(var(--ink-rgb),.84);font-size:15px}
.coords .ic{color:var(--or);flex:none}
.coords a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(var(--gold-rgb),.35)}
.coords a:hover{color:var(--creme)}
.social{
  margin-top:44px;display:flex;justify-content:center;gap:16px;align-items:center;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--or);
}
.social a{text-decoration:none}
.social a:hover{color:var(--creme)}
.legal{
  margin:36px 0 0;font-size:12px;line-height:2;letter-spacing:.06em;color:rgba(var(--mute-rgb),.65);
}
.legal a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(var(--mute-rgb),.3)}
.legal a:hover{color:var(--creme)}

/* ---------------------------------------------------- menu mobile */
.sheet{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:rgba(8,5,6,.97);
  padding:calc(24px + env(safe-area-inset-top,0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));
}
.sheet a{
  font-size:14px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);text-decoration:none;
}
.sheet .book{font-size:12px;margin-top:10px}
.close{
  position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:22px;
  background:none;border:0;color:var(--or);font-size:34px;line-height:1;
  cursor:pointer;font-family:var(--ui);font-weight:200;
}

a:focus-visible,button:focus-visible{outline:1px solid var(--or);outline-offset:5px}

/* ---------------------------------------------------- responsive */
@media (max-width:1024px){
  .gal{gap:12px}
}
@media (max-width:1180px){
  .nav{gap:20px}
  .nav a{font-size:10.5px;letter-spacing:.13em}
  .book{padding:13px 22px;letter-spacing:.16em}
}
@media (max-width:900px){
  :root{--gutter:20px}
  .nav,.bar>.book{display:none}
  .burger{display:block}
  .bar{padding:20px var(--gutter);padding-top:calc(20px + env(safe-area-inset-top,0px))}
  .mark{font-size:25px}
  .hero{padding:120px var(--gutter) 30px}
  .eyebrow.wide{letter-spacing:.3em;text-indent:.3em;font-size:11px;margin-bottom:20px}
  .tagline{margin-bottom:38px;letter-spacing:.24em;text-indent:.24em}
  .cta{padding:18px 36px}
  .foot-hero{grid-template-columns:1fr;padding:0 var(--gutter) 26px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .corner{display:none}
  .band{padding:130px 0 70px}
  .sec{padding:76px 0}
  .grid{gap:44px 26px}
  .prices li{padding:34px 22px}
  .coords{gap:16px 28px}
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .cap{padding:12px 10px;min-height:70%}
  .cap span{font-size:9px;letter-spacing:.14em}
  .lb{gap:4px;padding-inline:8px}
  .lb button{width:42px;height:42px}
  .lb button svg{width:16px;height:16px}
  .lb-fig img{max-width:82vw;max-height:66vh}
  .lb-fig figcaption{font-size:9.5px;letter-spacing:.18em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .silk,.scroller em{animation:none}
  .gal img{transition:none}
  *{transition-duration:.01ms!important}
}


/* ====================================================== atmosphère */
.steam{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;display:block;pointer-events:none;
  filter:blur(26px);opacity:.9;
}
.sheen{
  position:absolute;inset:-25% -40%;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(var(--hl-rgb),0) 40%,
    rgba(var(--hl-rgb),.06) 49%,
    rgba(var(--hl-rgb),.10) 51%,
    rgba(var(--hl-rgb),0) 60%);
  animation:sweep 14s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes sweep{
  0%{transform:translateX(-38%)}
  55%,100%{transform:translateX(38%)}
}

/* entrée du hero */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.js .hero>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) backwards}
.js .hero>*:nth-child(1){animation-delay:.10s}
.js .hero>*:nth-child(2){animation-delay:.22s}
.js .hero>*:nth-child(3){animation-delay:.34s}
.js .hero>*:nth-child(4){animation-delay:.44s}
.js .hero>*:nth-child(5){animation-delay:.54s}
.js .foot-hero>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) .7s backwards}
.js .bar{animation:rise .9s ease .05s backwards}

/* apparition au défilement */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s ease,transform .95s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.in{opacity:1;transform:none}
.js .gal li.reveal{transform:translateY(34px) scale(.985)}
.js .gal li.reveal.in{transform:none}

@media (prefers-reduced-motion:reduce){
  .sheen{animation:none;opacity:.35}
  .steam{display:none}
  .js .hero>*,.js .foot-hero>*,.js .bar{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .bar{transition:none}
}


/* ====================================================== témoignages */
.avis{
  list-style:none;margin:0;padding:0;
  columns:3;column-gap:22px;text-align:left;
}
.avis li{break-inside:avoid;margin:0 0 22px}
.avis blockquote{
  margin:0;position:relative;
  border:1px solid rgba(var(--gold-rgb),.18);
  background:linear-gradient(180deg,rgba(18,13,13,.9),rgba(10,7,8,.9));
  padding:38px 28px 28px;
}
.quo{
  position:absolute;top:2px;left:20px;
  font-family:var(--display);font-style:italic;font-size:64px;line-height:1;
  color:rgba(var(--gold-rgb),.34);
}
.avis p{
  margin:0 0 12px;font-size:15px;line-height:1.85;color:rgba(var(--ink-rgb),.82);
}
.avis p:last-of-type{margin-bottom:20px}
.avis cite{
  display:block;font-style:normal;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--or);
  padding-top:16px;border-top:1px solid rgba(var(--gold-rgb),.18);
}
.airbnb{margin:0}
.airbnb img{
  width:100%;height:auto;border:1px solid rgba(var(--gold-rgb),.18);
}
@media (max-width:1024px){ .avis{columns:2} }
@media (max-width:640px){
  .avis{columns:1;column-gap:0}
  .avis blockquote{padding:34px 22px 24px}
}


/* ====================================================== thème crème (Bis) */
.creme{
  --noir:#E8DAC2;
  --cuir:#D8C4A4;
  --creme:#3A2A1C;
  --or:#7E5A26;
  --ink-rgb:58,42,28;
  --gold-rgb:126,90,38;
  --mute-rgb:124,100,72;
  --hl-rgb:255,246,228;
  --hl2-rgb:255,240,214;
  --shade-rgb:116,86,52;
  --panel:#F1E4CC;
  --on-gold:#FBF4E6;
}
.creme .scene,.creme .band{
  background:
    radial-gradient(120% 90% at 78% 8%, #F6E9D2 0%, rgba(246,233,210,0) 55%),
    radial-gradient(90% 70% at 6% 96%, rgba(150,96,56,.34) 0%, rgba(150,96,56,0) 58%),
    linear-gradient(170deg,#EFE0C6 0%,#E4D2B2 58%,#C9AE86 100%);
}
.creme .scene::before,.creme .band::before{opacity:.55}
.creme .scene::after,.creme .band::after{opacity:.28;mix-blend-mode:multiply}
.creme .silk{
  background:radial-gradient(closest-side, rgba(198,126,100,.34), rgba(186,116,92,.12) 55%, rgba(0,0,0,0) 78%);
}
.creme h1{text-shadow:none}
.creme .sec.alt{background:linear-gradient(180deg,#EDDFC5,#E6D5B8 50%,#DCC7A4)}
.creme .site-foot{background:linear-gradient(180deg,#E4D2B2,#D3BA93)}
.creme .bar.scrolled{background:rgba(238,223,196,.88)}
.creme .sheet{background:rgba(236,220,193,.98)}
.creme .cta{background:rgba(255,248,233,.42)}
.creme .avis blockquote{background:linear-gradient(180deg,#F4E8D2,#EDDFC4)}
.creme .prices li{background:var(--panel)}
/* la visionneuse reste sombre : c'est un fond pour des photos */
.creme .lb{background:rgba(30,24,19,.96)}
.creme .lb button{color:#E3C88F;border-color:rgba(227,200,143,.34)}
.creme .lb button:hover,.creme .lb button:focus-visible{background:#E3C88F;color:#241C16;border-color:#E3C88F}
.creme .lb-fig figcaption{color:rgba(242,228,200,.86)}
.creme .lb-count{color:#E3C88F}
.creme .lb-fig img{border-color:rgba(227,200,143,.22)}


/* ====================================================== contact & formulaire */
.contact-grid{
  display:grid;grid-template-columns:1.35fr .85fr;gap:54px;
  text-align:left;margin-top:12px;
}
.form{display:flex;flex-direction:column;gap:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin:0;display:flex;flex-direction:column;gap:9px}
.field label{
  font-size:10.5px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or);
}
.field input,.field select,.field textarea{
  font-family:var(--ui);font-size:15px;font-weight:300;color:var(--creme);
  background:rgba(var(--shade-rgb),.22);
  border:1px solid rgba(var(--gold-rgb),.26);
  border-radius:0;padding:14px 16px;width:100%;
  transition:border-color .3s ease,background .3s ease;
}
.creme .field input,.creme .field select,.creme .field textarea{background:rgba(255,249,236,.72)}
.field textarea{resize:vertical;min-height:120px;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--or);background:rgba(var(--shade-rgb),.34);
}
.creme .field input:focus,.creme .field select:focus,.creme .field textarea:focus{background:#FFFBF0}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field.check{flex-direction:row;align-items:flex-start;gap:12px}
.field.check input{width:17px;height:17px;flex:none;margin-top:3px;padding:0;accent-color:var(--or)}
.field.check label{
  font-size:12.5px;letter-spacing:.02em;text-transform:none;
  color:rgba(var(--ink-rgb),.7);line-height:1.6;font-weight:300;
}
#f-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .cta{align-self:flex-start;cursor:pointer;font-family:var(--ui);margin-top:4px}
.contact-side{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.contact-side .coords{
  flex-direction:column;align-items:flex-start;gap:16px;margin:0;justify-content:flex-start;
}
.contact-side .note{margin:0;text-align:left;max-width:34ch}
.contact-side .social{margin:0}

/* ====================================================== cartes */
.maps-wrap{margin-top:74px;text-align:center}
.maps{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
}
.map-card{margin:0;border:1px solid rgba(var(--gold-rgb),.2);background:var(--panel);text-align:left}
.map-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.map-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.45) brightness(.95) contrast(.92);
}
.creme .map-frame iframe{filter:sepia(.28) saturate(.9) brightness(1.02) contrast(.96)}
.map-card figcaption{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px}
.map-nom{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--creme)}
.map-ville{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--or)}
.map-detail{font-size:14px;color:rgba(var(--ink-rgb),.7);margin-top:2px}
.map-link{
  margin-top:10px;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or);
  text-decoration:none;border-bottom:1px solid rgba(var(--gold-rgb),.35);padding-bottom:5px;
}
.map-link:hover,.map-link:focus-visible{color:var(--creme);border-bottom-color:var(--creme)}
.map-link svg{width:14px;height:9px;flex:none}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .f-row{grid-template-columns:1fr;gap:20px}
  .maps-wrap{margin-top:54px}
  .contact-side{align-items:stretch}
  .contact-side .coords{align-items:flex-start}
}


/* ====================================================== photo de fond d'origine */
.leather{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:url("https://static.wixstatic.com/media/0bc239_33c90fc4dd834461913e90fa73ffe0d7~mv2_d_2560_1364_s_2.jpg/v1/fill/w_1920,h_1024,al_c,q_80,enc_auto/fond.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.34;                       /* volontairement discret */
  filter:brightness(.72) contrast(1.04) saturate(.9);
}
/* le même cuir capitonné, viré au marron/beige */
.creme .leather{
  opacity:.62;
  filter:invert(.88) sepia(.62) saturate(1.15) hue-rotate(-10deg) brightness(.96) contrast(1.02);
}

/* ====================================================== titres agrandis, Alex Brush */
h1{
  font-family:var(--display);font-style:normal;font-weight:400;
  font-size:clamp(4.4rem,15vw,11rem);line-height:.92;letter-spacing:.01em;
  padding-bottom:.08em;
}
.h-band{font-size:clamp(3.6rem,12vw,7.6rem);line-height:.95;padding-bottom:.06em}
.h-sec{
  font-family:var(--display);font-style:normal;
  font-size:clamp(2.9rem,7vw,5.2rem);line-height:1;padding-bottom:.06em;
}
.mark{font-family:var(--display);font-style:normal;font-size:38px;line-height:1}
.bar.scrolled .mark{font-size:32px}
/* chiffres et petits titres restent en Bodoni : lisibilité */
.amount,.map-nom,.feats h3,.art h3,.h-tarif,.quo,.h-form{
  font-family:var(--display2);font-style:italic;
}
.h-tarif{font-size:clamp(2rem,4.6vw,3rem)}
.feats h3{font-size:1.6rem}

/* accroche sous la baseline — « Triplex à thème », comme sur l'ancien site */
.kicker{
  margin:0 0 42px;font-family:var(--ui);
  font-size:clamp(12px,2.6vw,14px);font-weight:200;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  color:var(--or);
}
.tagline{margin-bottom:18px}

/* ====================================================== réseaux sociaux, bord droit */
.social-rail{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:14;
  display:flex;flex-direction:column;gap:14px;
}
.social-rail a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--or);border:1px solid rgba(var(--gold-rgb),.28);
  background:rgba(var(--shade-rgb),.28);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.creme .social-rail a{background:rgba(255,248,232,.6)}
.social-rail a:hover,.social-rail a:focus-visible{
  background:var(--or);color:var(--on-gold);border-color:var(--or);transform:translateY(-2px);
}
.social-rail svg{width:19px;height:19px}

/* ====================================================== deux textes côte à côte */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.duo-col .rule{margin:24px auto 22px}
.duo-col .prose{max-width:46ch}

/* ====================================================== avantages / extras en 3 par 3 */
.feats.trio{
  list-style:none;margin:10px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:56px 36px;
}
.feats.trio li{display:flex;flex-direction:column;align-items:center;gap:12px}
.js .feats.trio li.reveal{transition-delay:calc(var(--i,0) * 130ms)!important}
.ic-wrap{
  transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .5s ease;
}
.ic-wrap .ic{animation:flot 6.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.7s)}
@keyframes flot{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.feats li:hover .ic-wrap,.feats li:focus-within .ic-wrap{
  transform:translateY(-7px) scale(1.09);
  border-color:var(--or);box-shadow:0 0 0 7px rgba(var(--gold-rgb),.07);
}
.feats li:hover h3{color:var(--or)}
.feats h3{transition:color .35s ease}

@media (max-width:1100px){ .feats.trio{gap:44px 24px} .duo{gap:44px} }
@media (max-width:900px){
  .feats.trio{grid-template-columns:1fr;gap:40px}
  .duo{grid-template-columns:1fr;gap:52px}
  .duo-col .prose{max-width:none}
  .social-rail{
    position:static;transform:none;flex-direction:row;justify-content:center;
    margin:0;padding:0;
  }
  .kicker{letter-spacing:.3em;text-indent:.3em;margin-bottom:34px}
  .mark{font-size:32px}
}
@media (prefers-reduced-motion:reduce){ .ic-wrap .ic{animation:none} }


/* ====================================================== bons cadeaux */
.bons{
  list-style:none;margin:14px 0 34px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  perspective:1200px;
}
.bon{display:flex}
.js .bons .bon.reveal{transition-delay:calc(var(--i,0) * 150ms)!important}

.bon-card{
  position:relative;flex:1;overflow:hidden;padding:7px;
  background:
    linear-gradient(158deg, rgba(var(--hl-rgb),.06), rgba(var(--hl-rgb),0) 40%),
    var(--panel);
  border:1px solid rgba(var(--gold-rgb),.34);
  transition:transform .65s cubic-bezier(.2,.7,.2,1),
             box-shadow .65s ease, border-color .55s ease;
}
.bon-card:hover,.bon-card:focus-within{
  transform:translateY(-10px) rotateX(3.5deg) rotateY(-4deg);
  border-color:var(--or);
  box-shadow:0 26px 62px rgba(var(--shade-rgb),.45);
}
.creme .bon-card:hover{box-shadow:0 26px 62px rgba(var(--shade-rgb),.25)}

/* liseré intérieur + écoinçons dorés */
.bon-inner{
  position:relative;z-index:2;height:100%;
  border:1px solid rgba(var(--gold-rgb),.2);
  padding:40px 26px 26px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.bon-corner{
  position:absolute;z-index:3;width:15px;height:15px;
  border:1px solid var(--or);opacity:.5;
  transition:opacity .5s ease;
}
.bon-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.bon-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.bon-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.bon-corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.bon-card:hover .bon-corner{opacity:1}

/* reflet qui traverse la carte, décalé d'une carte à l'autre */
.bon-shine{
  position:absolute;top:-60%;bottom:-60%;left:-60%;width:44%;z-index:1;
  background:linear-gradient(100deg,
    rgba(var(--hl-rgb),0), rgba(var(--hl-rgb),.16), rgba(var(--hl-rgb),0));
  transform:skewX(-16deg);pointer-events:none;
  animation:lueur 7.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -2.4s);
}
@keyframes lueur{0%{left:-60%}55%,100%{left:118%}}

.bon-kicker{
  margin:0 0 12px;font-size:9.5px;font-weight:300;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--or);
}
.bon-nom{
  margin:0;font-family:var(--display);font-weight:400;font-size:2.7rem;
  line-height:1;color:var(--creme);padding-bottom:.06em;
}
.rule.mini{width:min(170px,72%);margin:12px auto 16px;gap:12px}
.rule.mini .hearts{width:34px;height:20px}
.bon-prix{
  margin:0 0 12px;font-family:var(--display2);font-style:italic;
  font-size:1.95rem;line-height:1;color:var(--or);font-variant-numeric:tabular-nums;
}
.bon-detail{
  margin:0;font-size:13.5px;line-height:1.7;
  color:rgba(var(--ink-rgb),.72);max-width:27ch;
}
.bon-perfo{
  display:block;width:100%;height:1px;margin:26px 0 16px;margin-top:auto;
  background:repeating-linear-gradient(90deg,
    rgba(var(--gold-rgb),.5) 0 6px, rgba(var(--gold-rgb),0) 6px 12px);
}
.bon-pied{
  margin:0;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(var(--mute-rgb),.85);
}
.bons-note{margin:0 0 32px}

@media (max-width:980px){ .bons{grid-template-columns:1fr;gap:22px} }
@media (prefers-reduced-motion:reduce){
  .bon-shine{animation:none;opacity:0}
  .bon-card:hover,.bon-card:focus-within{transform:none}
}


/* ====================================================== bannière 3D */
.vue3d{padding:96px 0 100px;text-align:center;position:relative}
.banner3d{
  display:flex;gap:18px;margin-top:6px;
  height:clamp(320px,50vw,540px);
}
.slide3d{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  flex:0 0 27%;min-width:0;
  border:1px solid rgba(var(--gold-rgb),.2);
  background:linear-gradient(162deg, rgba(var(--hl-rgb),.05), rgba(var(--hl-rgb),0) 46%), var(--panel);
  transition:flex-basis 1.2s cubic-bezier(.2,.7,.2,1),
             border-color .8s ease, box-shadow .8s ease, height .9s ease;
}
.slide3d.is-active{
  flex-basis:73%;
  border-color:rgba(var(--gold-rgb),.52);
  box-shadow:0 26px 64px rgba(var(--shade-rgb),.42);
}
.s3d-halo{
  position:absolute;inset:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--hl-rgb),.11), rgba(var(--hl-rgb),0) 72%);
  filter:blur(22px);
}
.slide3d img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;padding:16px;
  opacity:.5;transform:scale(1.01);
  transition:opacity .9s ease,transform 1.1s ease;
}
.slide3d.is-active img{opacity:1;animation:pano 8s ease-in-out both}
@keyframes pano{
  0%{transform:scale(1.01) translate3d(0,0,0)}
  100%{transform:scale(1.13) translate3d(-3%,-2%,0)}
}
.s3d-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:6px;padding:24px 22px;text-align:left;
  background:linear-gradient(180deg,rgba(var(--shade-rgb),0),rgba(var(--shade-rgb),.55));
  opacity:0;transform:translateY(8px);
  transition:opacity .8s ease,transform .8s ease;
}
.slide3d.is-active .s3d-cap{opacity:1;transform:none}
.s3d-t{font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--creme)}
.s3d-s{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or)}
.vue3d-note{margin-top:26px}

@media (max-width:820px){
  .banner3d{flex-direction:column;height:auto;gap:12px}
  .slide3d{flex:0 0 auto;height:clamp(210px,56vw,300px)}
  .slide3d.is-active{height:clamp(290px,76vw,400px)}
  .s3d-t{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  .slide3d.is-active img{animation:none;transform:none}
  .slide3d img{opacity:.92}
}


/* ====================================================== retours cliente — 03/10 */

/* Accueil : le cuir d'origine en fond de TOUTE la page, un peu plus flou.
   Un seul calque fixe ; les sections deviennent transparentes pour le laisser voir. */
.home::before{
  content:"";position:fixed;inset:-30px;z-index:-1;pointer-events:none;
  background:url("https://static.wixstatic.com/media/0bc239_33c90fc4dd834461913e90fa73ffe0d7~mv2_d_2560_1364_s_2.jpg/v1/fill/w_1920,h_1024,al_c,q_80,enc_auto/fond.jpg") center/cover no-repeat;
  opacity:.62;
  filter:blur(2.5px) brightness(.55) contrast(1.12) saturate(.85);
}
.home .scene::after{opacity:.16}
.home .scene{
  background:radial-gradient(90% 70% at 6% 96%, rgba(142,16,28,.42) 0%, rgba(142,16,28,0) 58%);
}
.home .scene .leather,.home .scene::before{display:none}
.home .sec,.home .sec.alt,.home .vue3d{background:transparent}
.home .site-foot{background:linear-gradient(180deg,rgba(10,7,8,0),rgba(10,7,8,.6))}

/* Accueil : le titre « L'AppartOsé » plus or */
.home h1{
  background:linear-gradient(180deg,#F9E8BE 0%,#ECCF8E 38%,#CFA257 74%,#E9C986 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 2px 22px rgba(0,0,0,.55));
}

/* Les deux titres côte à côte sur une seule ligne (PC).
   Mesuré : « Un moment imaginé… » = 7,18 × la taille de police, colonne trop étroite à 524 px.
   On élargit la section et on cale la police sur la colonne. */
@media (min-width:901px){
  #bienvenue .wrap{max-width:1360px}
  .duo-col .h-sec{
    font-size:min(5.2rem, calc(6.6vw - 8px));
    white-space:nowrap;
  }
}

/* Le cuir partout ; le motif de losanges dessiné en CSS (effet « miroir ») est supprimé.
   Sur le Bis, le cuir reste viré au beige/marron. */
.scene::before,.band::before{display:none}


/* AppartOsé Bis — cuir beige classique (image pré-teintée, plus de filtre CSS) */
.creme .leather{
  background-image:url("/assets/cuir-beige.jpg");
  filter:none;opacity:.94;
}
.creme .scene::after,.creme .band::after{opacity:.14}
.creme .silk{background:radial-gradient(closest-side, rgba(150,128,100,.18), rgba(150,128,100,.06) 55%, rgba(0,0,0,0) 78%)}


/* ====================================================== Sélection Luvia */
.luvia-sec{padding:40px 0}
.luvia{
  display:flex;align-items:center;justify-content:center;gap:56px;
  padding:44px 0;text-align:left;
  border-top:1px solid rgba(var(--gold-rgb),.18);
  border-bottom:1px solid rgba(var(--gold-rgb),.18);
}
.luvia-badge{display:block;flex:none;border-radius:32px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.luvia-badge:hover,.luvia-badge:focus-visible{
  transform:translateY(-3px);filter:drop-shadow(0 12px 26px rgba(var(--shade-rgb),.38))}
.luvia-badge img{display:block;width:min(400px,100%);height:auto}
.luvia-mot{margin:0;max-width:34ch;font-size:18px;line-height:1.65;color:rgba(var(--ink-rgb),.78)}
.luvia-mot strong{color:var(--creme);font-weight:400}
.signature a{color:inherit}
@media (max-width:820px){
  .luvia{flex-direction:column;gap:22px;text-align:center;padding:34px 0}
  .luvia-mot{font-size:16px}
}

/* bloc Luvia placé juste avant le pied de page : son filet du bas ferait doublon */
.luvia{border-bottom:0}
.luvia-sec{padding:40px 0 56px}

/* correctif : titre coupé sur petits téléphones (360 px) — mesure : largeur = 5,17 × police */
h1{font-size:clamp(3rem,14vw,11rem)}
/* marge intérieure : le dégradé or (background-clip:text) couvre aussi les envolées de l'Alex Brush */
.home h1{padding:.16em .14em .1em;margin-top:-.16em}  /* dégradé or : couvre aussi le haut du L (mesuré : dépassait de 5 px) */

/* bannière 3D : 3 vues — l'active prend la place, les autres attendent à côté (quel que soit leur nombre) */
@media (min-width:821px){
  .slide3d{flex:1 1 0;transition:flex 1.2s cubic-bezier(.2,.7,.2,1),border-color .8s ease,box-shadow .8s ease}
  .slide3d.is-active{flex:2.6 1 0}
}

/* réseaux sociaux à droite aussi sur mobile (avant : remontés en haut de page) */
@media (max-width:900px){
  .social-rail{position:fixed;right:8px;top:50%;transform:translateY(-50%);
    flex-direction:column;justify-content:flex-start;gap:10px;margin:0;padding:0;z-index:14}
  .social-rail a{width:34px;height:34px}
  .social-rail svg{width:16px;height:16px}
}
/* champ anti-robots masqué complètement (recommandation FormSubmit) : le remplissage automatique des navigateurs ne le touche plus */
#f-honey{display:none!important}

/* cœurs côte à côte : cadre élargi (51×26) pour que le cœur de droite ne soit jamais rogné */
.hearts{width:51px;height:26px}
.rule.mini .hearts{width:37px;height:19px}