/* =========================================================================
   /residence — PAGE PUBLIQUE DANS LE DESIGN SYSTEM RÉSIDENCE
   (reprend la présentation / brochure RÉSIDENCE : magazine, photographie
   très présente, voiles noirs, traits fins dorés, beaucoup d'espace).
   EB Garamond (émotion, titres, citations, chiffres) · Inter (corps,
   labels, CTA, informations). Noir #12110F · crème #F4EFE5 · blanc · or
   #BE904B / #C59751 (accent, jamais un aplat) · gris chaud #CCC7BF.
   Jamais l'indigo CLEOPATRE. Ni date ni séjour inventés ; seuls les tarifs
   d'entretien autorisés (29 € · 89 € · 189 €) sont affichés, sur invitation.
   P28 : la couverture n'étire plus le poster vertical 720×1280 (visage coupé
   et flou). Demande fondateur : une image qui fait vivre ailleurs, pas
   CLEOPATRE — photographie d'ambiance plein cadre sous voile noir, légendée
   « illustration d'ambiance » : jamais présentée comme lieu ou logement
   proposé à Bangkok / Bali (décision P11). Aucune image portant un nom de
   lieu (atelier « Tulum », cénote) n'est utilisée.
   ========================================================================= */
@font-face{font-family:"RES Garamond";src:url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RES Garamond";src:url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"RES Garamond";src:url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"RES Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

.res-site{
  --r-black:#12110f;--r-night:#000;--r-cream:#f4efe5;--r-white:#fff;--r-gold:#be904b;--r-gold-2:#c59751;--r-warm:#ccc7bf;--r-ink-2:#4a463f;
  --r-serif:"RES Garamond","EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --r-sans:"RES Inter","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--r-cream);color:var(--r-black);font-family:var(--r-sans)
}
.res-site .grain{display:none}
html:has(.res-site){background:var(--r-black)}
.res-site .site-header{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--r-cream);border-color:rgba(190,144,75,.22)}
.res-site .footer{background:var(--r-black)}

/* ---------- Éléments communs ---------- */
.res-brand{display:inline-block;margin:0 0 28px;padding-bottom:10px;border-bottom:1px solid var(--r-gold);font-family:var(--r-sans);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.res-brand--ink{color:var(--r-black)}
.res-rule{display:block;width:70px;height:1px;margin:26px 0;background:var(--r-gold)}
.res-h2{margin:0;max-width:15em;font-family:var(--r-serif);font-weight:400;font-size:clamp(34px,4.4vw,62px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}
.res-text{max-width:34em;margin:22px 0 0;font-size:clamp(15px,1.2vw,17.5px);line-height:1.6}
.res-text--muted{color:var(--r-ink-2)}
.res-fine{max-width:62em;margin:18px 0 0;font-size:12.5px;line-height:1.6;letter-spacing:.02em;color:var(--r-warm)}
.res-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:34px}
.res-ctas--center{justify-content:center}
.res-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border:1px solid var(--r-cream);font-family:var(--r-sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-align:center;transition:background .25s,color .25s,border-color .25s}
.res-btn--cream{background:var(--r-cream);color:var(--r-black)}
.res-btn--cream:hover,.res-btn--cream:focus-visible{background:var(--r-white)}
.res-btn--outline{background:transparent;color:var(--r-cream);border-color:rgba(244,239,229,.55)}
.res-btn--outline:hover,.res-btn--outline:focus-visible{border-color:var(--r-gold-2);color:var(--r-white)}
.res-link{display:inline-block;padding:6px 0;border-bottom:1px solid var(--r-gold);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--r-cream);transition:color .25s}
.res-link::after{content:" ↓";letter-spacing:0}
.res-link:hover,.res-link:focus-visible{color:var(--r-gold-2)}
.res-inline-link{color:var(--r-gold-2);border-bottom:1px solid rgba(197,151,81,.5)}
.res-site a:focus-visible{outline:2px solid var(--r-gold-2);outline-offset:4px}

/* ---------- I. Couverture : portrait cadré à droite, fondu dans le noir ---------- */
.res-cover{position:relative;isolation:isolate;display:grid;align-items:center;min-height:100svh;padding:calc(var(--header) + 48px) var(--pad) clamp(56px,9vh,110px);background:var(--r-night);color:var(--r-cream);overflow:hidden}
.res-cover__media{position:absolute;z-index:-2;inset:0;margin:0}
.res-cover__media picture{display:block;width:100%;height:100%}
.res-cover__img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.res-cover__veil{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(12,11,10,.86) 0%,rgba(12,11,10,.62) 34%,rgba(12,11,10,.18) 64%,rgba(12,11,10,.05) 100%),linear-gradient(0deg,rgba(12,11,10,.78) 0%,rgba(12,11,10,0) 38%),linear-gradient(180deg,rgba(12,11,10,.55) 0%,rgba(12,11,10,0) 22%);pointer-events:none}
.res-cover__copy{position:relative;max-width:min(640px,46vw)}
.res-cover__title{margin:0;font-family:var(--r-serif);font-weight:400;font-size:clamp(60px,8vw,142px);line-height:.9;letter-spacing:.005em;text-wrap:balance}
.res-cover__deck{max-width:19em;margin:0;font-family:var(--r-serif);font-size:clamp(21px,1.9vw,29px);line-height:1.18;text-transform:uppercase}
.res-cover__kicker{margin:22px 0 0;font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--r-gold-2)}
.res-cover__credit{position:absolute;right:var(--pad);bottom:clamp(22px,4vh,40px);margin:0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,229,.62)}

/* ---------- II. Horizon : planche crème, destinations en lignes ---------- */
.res-band{padding:clamp(80px,10vw,150px) var(--pad);background:var(--r-cream);color:var(--r-black)}
.res-horizon__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:end;max-width:1320px;margin:0 auto}
.res-rows{display:grid;gap:0;margin:0}
.res-rows div{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(204,199,191,.35)}
.res-rows dt{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--r-gold-2)}
.res-rows dd{display:grid;gap:4px;margin:0}
.res-rows dd strong{font-family:var(--r-serif);font-weight:400;font-size:clamp(24px,2.3vw,34px);line-height:1.05}
.res-rows dd span{font-size:14px;letter-spacing:.04em;color:var(--r-ink-2)}
.res-rows--ink{border-top:1px solid rgba(18,17,15,.18)}
.res-rows--ink div{border-bottom-color:rgba(18,17,15,.18)}
.res-rows--ink dt{color:#8c6a36}

/* ---------- III. Paris : planche noire, photographie et texte crème ---------- */
.res-dark{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:78svh;background:var(--r-black);color:var(--r-cream)}
.res-dark__media{position:relative;min-height:56svh;margin:0;overflow:hidden}
.res-dark__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.res-dark__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,15,0) 55%,rgba(18,17,15,.85) 100%)}
.res-dark__copy{align-self:center;padding:clamp(60px,7vw,120px) var(--pad)}
.res-dark .res-text{color:rgba(244,239,229,.86)}

/* ---------- IV. Le parcours : trois temps ---------- */
.res-band__inner{max-width:1320px;margin:0 auto}
.res-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(44px,5vw,72px);padding:0;list-style:none;counter-reset:none}
.res-steps li{display:grid;align-content:start;gap:12px;padding-top:22px;border-top:1px solid rgba(18,17,15,.22)}
.res-steps__n{font-family:var(--r-serif);font-size:clamp(40px,4vw,58px);line-height:1;color:var(--r-gold)}
.res-steps strong{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.res-steps p{margin:0;max-width:26em;font-size:15.5px;line-height:1.6;color:var(--r-ink-2)}

/* ---------- V. Entretiens sur invitation ---------- */
.res-offers{padding:clamp(80px,10vw,150px) var(--pad);background:var(--r-black);color:var(--r-cream)}
.res-offers__inner{max-width:1320px;margin:0 auto}
.res-offers__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(40px,5vw,64px);background:rgba(190,144,75,.28);border:1px solid rgba(190,144,75,.28)}
.res-offer{display:grid;align-content:start;gap:14px;padding:clamp(26px,3vw,40px);background:var(--r-black)}
.res-offer__label{margin:0;font-family:var(--r-serif);font-size:clamp(23px,2.1vw,31px);line-height:1.12}
.res-offer__text{margin:0;font-size:14.5px;line-height:1.6;color:rgba(244,239,229,.74)}
.res-offers .res-fine{margin-top:26px}

/* ---------- VI. La porte : panneau final ---------- */
.res-final{position:relative;isolation:isolate;display:grid;justify-items:center;gap:18px;padding:clamp(100px,13vw,190px) var(--pad);background:var(--r-black);color:var(--r-cream);text-align:center;overflow:hidden}
.res-final__media{position:absolute;z-index:-2;inset:0}
.res-final__media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.res-final::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.82) 0%,rgba(12,11,10,.6) 45%,rgba(12,11,10,.86) 100%)}
.res-final__credit{margin:14px 0 0;font-size:11px;letter-spacing:.06em;color:rgba(244,239,229,.6)}
.res-panel__eyebrow{margin:6px 0 0;font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--r-gold-2)}
.res-final__title{margin:0;font-family:var(--r-serif);font-weight:400;font-size:clamp(38px,5vw,72px);line-height:1.02;text-wrap:balance}
.res-panel__lead{max-width:30em;margin:0;font-family:var(--r-serif);font-size:clamp(19px,1.7vw,24px);line-height:1.35;color:rgba(244,239,229,.86)}

@media (prefers-reduced-motion:reduce){.res-btn,.res-link{transition:none}}

/* ---------- Tablette / mobile : portrait en tête, texte dessous ---------- */
@media (max-width:860px){
  .res-cover{align-items:end;min-height:0;padding:calc(var(--header) + 24px) var(--pad) 40px}
  .res-cover{background:var(--r-black)}
  .res-cover__media{inset:0 0 auto 0;height:min(50svh,500px);
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 34%);mask-image:linear-gradient(0deg,transparent 0,#000 34%)}
  .res-cover__img{object-position:64% 50%}
  .res-cover__veil{background:linear-gradient(180deg,rgba(12,11,10,.5) 0%,rgba(12,11,10,0) 24%)}
  .res-cover__copy{max-width:none;padding-top:min(31svh,300px)}
  .res-cover__title{font-size:clamp(48px,14vw,66px)}
  .res-cover .res-brand{margin-bottom:18px}
  .res-cover .res-rule{margin:18px 0}
  .res-cover__deck{font-size:19px}
  .res-cover__kicker{margin-top:14px}
  .res-cover .res-ctas{margin-top:22px}
  .res-cover__credit{position:static;margin-top:28px}
  .res-ctas{flex-direction:column;align-items:stretch;gap:16px}
  .res-ctas .res-link{align-self:flex-start}
  .res-horizon__grid{grid-template-columns:1fr;gap:40px}
  .res-rows div{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .res-dark{grid-template-columns:1fr;min-height:0}
  .res-dark__media{min-height:46svh}
  .res-dark__media::after{background:linear-gradient(0deg,rgba(18,17,15,.75) 0%,rgba(18,17,15,0) 45%)}
  .res-steps{grid-template-columns:1fr;gap:30px}
  .res-offers__list{grid-template-columns:1fr}
}
@media (max-width:380px){
  .res-btn{padding:0 18px;letter-spacing:.14em}
  .res-cover__title{font-size:48px}
}