/* ===== ROOFTOP SANCTUARY — Dossier complet · design system ===== */
:root{
  --pad-x: 120px;
  --pad-y: 92px;
  --pad-bottom: 84px;

  --paper: #E8E0D3;
  --paper-2: #DFD5C4;
  --ink: #2A2420;
  --ink-soft: #6B6052;
  --espresso: #221A15;
  --forest: #36433A;
  --caramel: #B07A4B;
  --terracotta: #B65A3C;
  --brass: #BC9A56;
  --travertin: #CDBFA8;
  --line: rgba(42,36,32,.18);
  --line-d: rgba(232,224,211,.2);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:#1a1512; }
deck-stage:not(:defined){ visibility:hidden; }

section{ background:var(--paper); color:var(--ink); font-family:var(--sans); overflow:hidden; }

/* ---- shared type ---- */
.kicker{ font-family:var(--mono); font-size:24px; text-transform:uppercase; letter-spacing:.26em; color:var(--caramel); margin:0; font-weight:400; }
.title{ font-family:var(--serif); font-weight:500; font-size:76px; line-height:.98; letter-spacing:-.01em; margin:0; }
.num{ font-family:var(--mono); color:var(--caramel); }
.voice{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:120px; line-height:1.02; letter-spacing:-.015em; margin:0; }
img.fill{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- slide frame ---- */
.stage{ height:100%; padding:var(--pad-y) var(--pad-x) var(--pad-bottom); display:flex; flex-direction:column; }
.head{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:24px; gap:40px; }
.head .h-left{ display:flex; align-items:baseline; gap:28px; }
.head .title{ font-size:58px; }
.foot{ margin-top:auto; padding-top:22px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:19px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.dark .foot{ color:rgba(232,224,211,.5); }

.dark{ background:var(--espresso); color:var(--paper); }
.dark .head{ border-color:var(--line-d); }
.dark .kicker{ color:var(--brass); }

/* ---- entrance ---- */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .anim{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .anim2{ animation:rise .7s cubic-bezier(.2,.7,.2,1) .12s both; }
  [data-deck-active] .anim3{ animation:rise .7s cubic-bezier(.2,.7,.2,1) .22s both; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(20px); } }

/* ===== COVER ===== */
.cover-img{ position:absolute; inset:0; }
.cover-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,12,.5) 0%, rgba(20,15,12,.05) 32%, rgba(20,15,12,.2) 60%, rgba(20,15,12,.85) 100%); }
.cover-frame{ position:absolute; inset:48px; border:1px solid rgba(232,224,211,.32); pointer-events:none; }
.cover-inner{ position:absolute; inset:0; padding:90px 120px; display:flex; flex-direction:column; justify-content:space-between; color:#F2EBDD; }
.cover-top{ display:flex; justify-content:space-between; align-items:flex-start; font-family:var(--mono); font-size:24px; letter-spacing:.28em; text-transform:uppercase; }
.cover-ttl{ font-family:var(--serif); font-weight:500; font-size:172px; line-height:.9; letter-spacing:-.02em; }
.cover-sub{ font-family:var(--serif); font-style:italic; font-size:44px; margin-top:16px; color:#EADfce; }
.cover-meta{ display:flex; gap:46px; margin-top:38px; font-family:var(--mono); font-size:24px; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,235,221,.82); }

/* ===== SOMMAIRE ===== */
.s-toc{ display:flex; flex-direction:column; }
.toc-body{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0 100px; padding:36px 0 0; align-content:start; }
.toc-part{ padding:22px 0; border-top:1px solid var(--line); }
.toc-part .pl{ font-family:var(--mono); font-size:19px; letter-spacing:.14em; text-transform:uppercase; color:var(--caramel); }
.toc-part h3{ font-family:var(--serif); font-weight:500; font-size:40px; margin:6px 0 12px; }
.toc-part ol{ margin:0; padding:0; list-style:none; }
.toc-part li{ font-size:23px; color:var(--ink-soft); padding:5px 0; display:flex; gap:14px; }
.toc-part li .n{ font-family:var(--mono); font-size:18px; color:var(--caramel); }

/* ===== DIVIDER ===== */
.s-div{ display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad-x); }
.div-pl{ font-family:var(--mono); font-size:26px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); }
.div-ttl{ font-family:var(--serif); font-weight:500; font-size:150px; line-height:.95; margin:18px 0 26px; }
.div-sub{ font-family:var(--serif); font-style:italic; font-size:42px; color:rgba(232,224,211,.75); max-width:26ch; }
.div-no{ position:absolute; right:120px; bottom:84px; font-family:var(--mono); font-size:24px; letter-spacing:.2em; color:rgba(232,224,211,.45); }

/* ===== INTENTION ===== */
.s-intent{ display:flex; flex-direction:column; }
.intent-body{ flex:1; display:grid; grid-template-columns:1.55fr .85fr; gap:90px; align-items:center; padding:30px 0 10px; }
.intent-body .lead-p{ font-size:27px; line-height:1.5; color:var(--ink-soft); margin:0 0 34px; }
.pillars{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.pillar{ display:grid; grid-template-columns:56px 1fr; gap:26px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.pillar .num{ font-size:24px; }
.pillar h4{ font-family:var(--serif); font-weight:500; font-size:32px; margin:0 0 4px; }
.pillar p{ margin:0; font-size:24px; color:var(--ink-soft); line-height:1.4; }

/* ===== DIRECTION ARTISTIQUE ===== */
.s-dir{ display:grid; grid-template-columns:.92fr 1.08fr; }
.dir-img{ position:relative; }
.dir-right{ padding:var(--pad-y) var(--pad-x) var(--pad-bottom); display:flex; flex-direction:column; }
.dir-list{ margin-top:auto; display:flex; flex-direction:column; }
.dir-row{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--line); align-items:baseline; }
.dir-row:last-child{ border-bottom:1px solid var(--line); }
.dir-row h4{ font-family:var(--serif); font-weight:500; font-size:38px; margin:0 0 6px; }
.dir-row p{ margin:0; font-size:24px; color:var(--ink-soft); line-height:1.4; }

/* ===== PALETTE ===== */
.swatches{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(7,1fr); gap:20px; padding:34px 0 0; }
.sw{ display:flex; flex-direction:column; min-height:0; }
.sw .chip{ flex:1; border:1px solid rgba(42,36,32,.12); min-height:0; }
.sw .meta{ height:120px; flex:0 0 auto; }
.sw .si{ font-family:var(--mono); font-size:18px; color:var(--caramel); margin:16px 0 8px; letter-spacing:.08em; }
.sw h4{ font-family:var(--serif); font-weight:600; font-size:27px; margin:0 0 7px; line-height:1.02; white-space:nowrap; }
.sw p{ font-size:19px; line-height:1.32; color:var(--ink-soft); margin:0; }

/* ===== PLAN COMPLET / SÉJOUR ===== */
.s-plan{ display:grid; grid-template-columns:1.05fr .95fr; }
.plan-left{ padding:var(--pad-y) 60px var(--pad-bottom) var(--pad-x); display:flex; }
.plan-wrap{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.plan-img{ position:relative; height:100%; }
.plan-img.sejour{ aspect-ratio:560/710; }
.plan-img.complet{ aspect-ratio:1230/1600; }
.plan-img > img{ width:100%; height:100%; object-fit:contain; display:block; }
.zone{ position:absolute; border-radius:10px; padding:10px 12px; font-family:var(--mono); font-size:17px; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:flex-start; }
.zone span{ background:rgba(34,26,21,.78); color:#EFE7D8; padding:5px 9px; border-radius:4px; }
.z-eco{ background:rgba(176,122,75,.26); border:1.5px dashed rgba(176,122,75,.85); }
.z-sal{ background:rgba(54,67,58,.20); border:1.5px dashed rgba(54,67,58,.8); }
.z-rep{ background:rgba(188,154,86,.24); border:1.5px dashed rgba(140,108,46,.85); }
.fp{ position:absolute; border-radius:6px; }
.fp.sofa{ background:rgba(176,122,75,.62); border:1px solid rgba(120,78,42,.8); }
.fp.tableronde{ background:rgba(150,70,52,.62); border-radius:50%; border:1px solid rgba(110,46,32,.8); }
.fp.console{ background:rgba(66,44,34,.6); border:1px solid rgba(40,28,22,.8); }
.fp.chair{ background:rgba(54,67,58,.6); border:1px solid rgba(40,50,42,.8); border-radius:50%; }
/* dimension annotations */
.dim{ position:absolute; font-family:var(--mono); font-size:18px; color:var(--ink); background:var(--paper); padding:2px 8px; letter-spacing:.06em; white-space:nowrap; }
.dimline{ position:absolute; background:var(--caramel); }
.plan-right{ padding:var(--pad-y) var(--pad-x) var(--pad-bottom) 60px; display:flex; flex-direction:column; }
.legend{ margin-top:auto; }
.leg-row{ display:grid; grid-template-columns:20px 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--line); align-items:start; }
.leg-row:last-child{ border-bottom:1px solid var(--line); }
.leg-dot{ width:18px; height:18px; border-radius:5px; margin-top:6px; }
.leg-row h4{ font-family:var(--serif); font-weight:500; font-size:30px; margin:0 0 5px; }
.leg-row p{ margin:0; font-size:23px; color:var(--ink-soft); line-height:1.36; }
.plan-right .head .title{ white-space:nowrap; }
.specrow{ display:flex; gap:48px; margin-top:30px; }
.specrow .v{ font-family:var(--serif); font-size:46px; line-height:1; color:var(--ink); white-space:nowrap; }
.specrow .k{ font-family:var(--mono); font-size:17px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.scalebar{ display:flex; align-items:center; gap:14px; margin-top:26px; font-family:var(--mono); font-size:18px; color:var(--ink-soft); letter-spacing:.08em; }
.scalebar .bar{ width:90px; height:8px; border:1px solid var(--ink-soft); border-top:none; }

/* ===== ANNOTÉ ===== */
.s-anno{ display:grid; grid-template-columns:1fr 1fr; }
.anno-img{ position:relative; overflow:hidden; }
.anno-img > img{ width:100%; height:100%; object-fit:cover; display:block; }
.pin{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:9px; padding:7px 13px 7px 9px; border-radius:999px; font-family:var(--mono); font-size:17px; letter-spacing:.06em; text-transform:uppercase; color:#fff; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.pin .d{ width:9px; height:9px; border-radius:50%; background:#fff; }
.pin.out{ background:rgba(150,55,42,.94); }
.pin.keep{ background:rgba(46,60,50,.94); }
.pin.change{ background:rgba(150,112,46,.95); }
.anno-right{ padding:var(--pad-y) var(--pad-x) var(--pad-bottom); display:flex; flex-direction:column; }
.chg-list{ margin-top:auto; }
.chg-grp{ margin-bottom:28px; }
.chg-grp:last-child{ margin-bottom:0; }
.chg-h{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.chg-h .tagk{ font-family:var(--mono); font-size:18px; letter-spacing:.14em; text-transform:uppercase; padding:4px 11px; border-radius:4px; color:#fff; }
.tagk.out{ background:var(--terracotta); }
.tagk.keep{ background:var(--forest); }
.tagk.change{ background:var(--brass); }
.chg-grp p{ margin:0; font-size:25px; color:var(--ink); line-height:1.48; }
.chg-grp p .muted{ color:var(--ink-soft); }

/* ===== CARDS ===== */
.cards{ flex:1; min-height:0; display:grid; gap:30px; padding:34px 0 0; grid-template-rows:minmax(0,1fr); }
.cards.c4{ grid-template-columns:repeat(4,1fr); }
.cards.c3{ grid-template-columns:repeat(3,1fr); }
.card{ display:flex; flex-direction:column; min-height:0; }
.card-media{ flex:1; min-height:0; position:relative; overflow:hidden; background:var(--paper-2); }
.card-media > img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-media image-slot{ width:100%; height:100%; }
.ph{ width:100%; height:100%; background:repeating-linear-gradient(45deg, rgba(42,36,32,.05) 0 12px, rgba(42,36,32,.09) 12px 24px); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--mono); font-size:18px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding:18px; }
.badge{ position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:16px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:4px; color:#fff; z-index:2; }
.badge.keep{ background:var(--forest); }
.badge.buy{ background:var(--caramel); }
.badge.have{ background:var(--ink-soft); }
.card-body{ flex:0 0 auto; padding-top:16px; }
.card-body .si{ font-family:var(--mono); font-size:17px; color:var(--caramel); letter-spacing:.08em; display:block; margin-bottom:6px; }
.card-body h4{ font-family:var(--serif); font-weight:500; font-size:30px; margin:0; line-height:1.04; }
.card-body p{ font-size:20px; color:var(--ink-soft); margin:7px 0 0; line-height:1.34; }
.euro{ color:var(--terracotta); letter-spacing:.06em; white-space:nowrap; }

/* ===== BAIN ===== */
.s-bath{ display:grid; grid-template-columns:1.05fr .95fr; }
.bath-left{ padding:var(--pad-y) var(--pad-x) var(--pad-bottom); display:flex; flex-direction:column; }
.bath-left .head{ flex:0 0 auto; }
.bath-left .head .title{ font-size:50px; white-space:nowrap; }
.bath-text{ margin-top:auto; }
.bath-text .body{ font-size:27px; max-width:30ch; margin-top:34px; color:rgba(232,224,211,.72); line-height:1.5; }
.bath-specs{ display:flex; gap:54px; margin-top:42px; }
.bath-spec .v{ font-family:var(--serif); font-size:58px; line-height:1; color:var(--brass); }
.bath-spec .k{ font-family:var(--mono); font-size:18px; letter-spacing:.12em; text-transform:uppercase; color:rgba(232,224,211,.6); margin-top:12px; }
.bath-right{ position:relative; }
.amber{ position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 30%, rgba(214,138,74,.34), rgba(34,26,21,0) 60%); pointer-events:none; }

/* ===== SOL ===== */
.s-sol{ display:grid; grid-template-columns:1fr 1fr; }
.sol-left{ padding:var(--pad-y) 70px var(--pad-bottom) var(--pad-x); display:flex; flex-direction:column; }
.sol-text{ margin-top:auto; }
.sol-text h3{ font-family:var(--serif); font-weight:500; font-size:60px; line-height:1.02; margin:0 0 24px; }
.sol-text p{ font-size:26px; line-height:1.5; color:var(--ink-soft); margin:0 0 28px; max-width:30ch; }
.sol-why{ display:flex; flex-direction:column; }
.sol-why .r{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--line); align-items:baseline; }
.sol-why .r:last-child{ border-bottom:1px solid var(--line); }
.sol-why .k{ font-family:var(--mono); font-size:18px; color:var(--caramel); letter-spacing:.1em; text-transform:uppercase; }
.sol-why .v{ font-size:23px; color:var(--ink); }
.sol-right{ position:relative; display:grid; grid-template-rows:1fr 1fr; }
.sol-swatch{ display:flex; align-items:flex-end; padding:30px; }
.sol-swatch .lbl{ font-family:var(--mono); font-size:20px; letter-spacing:.1em; text-transform:uppercase; color:#EFE7D8; background:rgba(34,26,21,.55); padding:8px 12px; border-radius:4px; }

/* ===== BUDGET ===== */
.s-budget{ display:flex; flex-direction:column; }
.bud-body{ flex:1; min-height:0; display:grid; grid-template-columns:1fr; padding:30px 0 0; }
.bud-table{ display:flex; flex-direction:column; }
.bud-row{ display:grid; grid-template-columns:1.7fr 1fr auto; gap:30px; padding:17px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.bud-row:first-child{ border-top:1px solid var(--line); }
.bud-row h4{ font-family:var(--serif); font-weight:500; font-size:29px; margin:0; }
.bud-row .desc{ font-size:19px; color:var(--ink-soft); }
.bud-row .amt{ font-family:var(--mono); font-size:24px; color:var(--ink); white-space:nowrap; text-align:right; }
.bud-row.sub{ border-bottom:2px solid var(--ink); }
.bud-row.sub h4{ font-family:var(--mono); font-size:20px; text-transform:uppercase; letter-spacing:.1em; color:var(--caramel); }
.bud-row.sub .amt{ font-weight:700; color:var(--ink); }
.bud-note{ margin-top:22px; font-size:20px; color:var(--ink-soft); line-height:1.45; }

/* récap */
.s-recap{ display:flex; flex-direction:column; }
.recap-body{ flex:1; min-height:0; display:grid; grid-template-columns:1.2fr .8fr; gap:0 90px; padding:32px 0 0; }
.recap-left{ display:flex; flex-direction:column; }
.recap-row{ display:grid; grid-template-columns:auto 1fr auto; gap:26px; padding:22px 0; border-top:1px solid var(--line); align-items:baseline; }
.recap-row:last-of-type{ border-bottom:1px solid var(--line); }
.recap-row .n{ font-family:var(--mono); font-size:22px; color:var(--caramel); }
.recap-row h4{ font-family:var(--serif); font-weight:500; font-size:32px; margin:0; }
.recap-row p{ font-size:19px; color:var(--ink-soft); margin:4px 0 0; }
.recap-row .amt{ font-family:var(--mono); font-size:26px; white-space:nowrap; }
.recap-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:22px; padding-top:22px; border-top:2px solid var(--ink); }
.recap-total .tl{ font-family:var(--mono); font-size:22px; text-transform:uppercase; letter-spacing:.12em; }
.recap-total .tv{ font-family:var(--serif); font-size:58px; color:var(--terracotta); line-height:1; white-space:nowrap; }
.phases{ display:flex; flex-direction:column; }
.phases .sh{ font-family:var(--mono); font-size:19px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding-bottom:16px; border-bottom:1px solid var(--line); }
.phase{ padding:18px 0; border-bottom:1px solid var(--line); }
.phase .pn{ font-family:var(--mono); font-size:17px; color:var(--caramel); letter-spacing:.1em; text-transform:uppercase; }
.phase h5{ font-family:var(--serif); font-weight:500; font-size:28px; margin:5px 0 4px; }
.phase p{ font-size:19px; color:var(--ink-soft); margin:0; line-height:1.35; }

/* sourcing */
.s-src{ display:flex; flex-direction:column; }
.src-body{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0 100px; padding:36px 0 0; align-content:start; }
.src-row{ display:grid; grid-template-columns:1fr auto; gap:24px; padding:19px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.src-row h5{ font-family:var(--serif); font-weight:500; font-size:30px; margin:0; }
.src-row .cat{ font-family:var(--mono); font-size:17px; letter-spacing:.1em; text-transform:uppercase; color:var(--caramel); }