/* ===================================================================
   HTG BRAND SYSTEM — shared across Nouveautés Groupes hub + brochures
   Navy / gold / parchment, Poppins + Inter. Reused verbatim from the
   proven "Sur les traces de l'Odyssée" brochure — same fixes baked in:
   scrims are pre-baked PNGs (never CSS gradients), pagenums sit clear
   of captions, numbered markers carry their own digit consistently.
   =================================================================== */
:root{
  --navy:#16273E;
  --navy-deep:#0D1826;
  --gold:#C9A24A;
  --gold-light:#E7CD8C;
  --parchment:#F4EEE2;
  --parchment-dim:#E9DFC8;
  --ionian:#20585F;
  --terracotta:#AE5236;
  --ink:#23281F;
  --cream:#F7F2E7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:#3a3a3a;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding:28px 0 60px;
}
h1,h2,h3,.display{ font-family:'Poppins',sans-serif; }
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.page{
  width:210mm;
  height:297mm;
  position:relative;
  overflow:hidden;
  background:var(--parchment);
  box-shadow:0 8px 40px rgba(0,0,0,.35);
  flex-shrink:0;
}
img{max-width:100%; display:block;}
.abs{position:absolute;}
.fill{position:absolute; inset:0;}
a{ color:inherit; text-decoration:none; }

/* ============ COVER ============ */
#cover{ background:var(--navy-deep); }
#cover .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#cover .scrim{ position:absolute; inset:0; width:100%; height:100%; background-image:url('grad_cover_scrim.png'); background-size:100% 100%; }
#cover .topscrim{ position:absolute; top:0; left:0; right:0; height:210px; background-image:url('grad_top_scrim.png'); background-size:100% 100%; }
#cover .content{ position:absolute; left:0; right:0; bottom:0; padding:0 60px 64px; color:var(--cream); }
#cover .brandrow{ position:absolute; top:44px; left:60px; right:60px; display:flex; justify-content:space-between; align-items:center; }
#cover .brandrow .htgmark{ height:72px; }
#cover .brandrow .place{ font-family:'Inter'; font-size:11px; letter-spacing:.18em; color:var(--gold-light); text-transform:uppercase; }
#cover .badge{
  display:inline-block; border:1px solid var(--gold); color:var(--gold-light);
  font-size:11px; letter-spacing:.2em; font-weight:600; text-transform:uppercase;
  padding:7px 16px; border-radius:2px; margin-bottom:22px;
}
#cover h1{
  font-weight:700; font-size:54px; line-height:1.05; color:var(--cream);
  text-wrap:balance; max-width:10em;
}
#cover .subtitle{
  font-family:'Poppins'; font-weight:300; font-style:italic; font-size:22px;
  color:var(--gold-light); margin-top:14px;
}
#cover .stats{ display:flex; gap:26px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(231,205,140,.3); flex-wrap:wrap; }
#cover .stats div{ font-size:12px; letter-spacing:.06em; color:var(--parchment); text-transform:uppercase; font-weight:500; }
#cover .stats b{ display:block; font-family:'Poppins'; font-weight:600; font-size:14.5px; color:var(--gold-light); letter-spacing:.02em; text-transform:none; margin-bottom:2px;}

/* ============ CONCEPT ============ */
#concept{ background:var(--parchment); display:flex; }
#concept .textcol{ width:56%; padding:70px 52px 70px 60px; display:flex; flex-direction:column; }
#concept .eyebrow{ color:var(--terracotta); }
#concept h2{ font-weight:700; font-size:36px; color:var(--navy); margin-top:16px; line-height:1.14; text-wrap:balance;}
#concept .lede{ font-family:'Poppins'; font-weight:300; font-style:italic; font-size:18px; color:var(--ionian); margin-top:22px; line-height:1.5;}
#concept .body{ font-size:14px; line-height:1.82; color:var(--ink); margin-top:20px; max-width:34em;}
#concept .divider{ width:52px; height:2px; background:var(--gold); margin:26px 0 0; }
#concept .fitline{ margin-top:18px; font-size:11.5px; color:var(--ionian); letter-spacing:.01em; line-height:1.6; max-width:34em; }
#concept .fitline b{ font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:10px; color:var(--terracotta); margin-right:9px; }
#concept .glance{ margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; padding-top:26px;}
#concept .glance .card{ border-top:2px solid var(--gold); padding-top:10px; }
#concept .glance .card .n{ font-family:'Poppins'; font-weight:700; font-size:19px; color:var(--navy); }
#concept .glance .card .l{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ionian); font-weight:600; margin-top:2px;}
#concept .imgcol{ width:44%; position:relative; background:var(--navy-deep); }
#concept .imgcol img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
#concept .imgcol .scrim{ position:absolute; inset:0; background-image:url('grad_photo_scrim.png'); background-size:100% 100%; }
#concept .imgcol .cap{ position:absolute; left:26px; right:26px; bottom:26px; color:var(--gold-light); font-family:'Poppins'; font-style:italic; font-weight:300; font-size:13px; line-height:1.5; }
#concept .pagenum{ position:absolute; bottom:28px; left:60px; font-size:10.5px; letter-spacing:.15em; color:var(--ionian); }

/* ============ ROUTE TIMELINE ============ */
#route{ background:var(--navy); color:var(--cream); padding:64px 56px 50px; }
#route .eyebrow{ color:var(--gold-light); }
#route h2{ font-weight:700; font-size:32px; color:var(--cream); margin-top:14px; }
#route .sub{ font-size:13px; color:var(--gold-light); opacity:.85; margin-top:8px; max-width:38em; line-height:1.6;}
#route .pagenum{ position:absolute; bottom:28px; right:56px; font-size:10.5px; letter-spacing:.15em; color:var(--gold-light); opacity:.7;}
#route{ display:flex; flex-direction:column; }
#route .head{ flex-shrink:0; }
#route .maparea{ flex-shrink:0; margin-top:12px; height:330px; border-radius:4px; overflow:hidden; }
#route .maparea img{ width:100%; height:100%; object-fit:cover; }
#route.has-map .timeline{ padding:12px 0; }
#route.has-map .timeline .row:not(:last-child){ padding-bottom:22px; }

.timeline{ flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; padding:30px 0; }
.timeline .row{ display:flex; align-items:flex-start; gap:22px; position:relative; padding-bottom:34px; }
.timeline .row:last-child{ padding-bottom:0; }
.timeline .track{ position:relative; width:30px; flex-shrink:0; display:flex; justify-content:center; }
.timeline .node{ width:30px; height:30px; border-radius:50%; background:var(--navy); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Poppins'; font-weight:700; font-size:12.5px; color:var(--gold-light); flex-shrink:0; z-index:1; }
.timeline .row:last-child .node{ background:var(--gold); color:var(--navy); border-color:var(--gold-light); }
.timeline .line{ position:absolute; top:30px; bottom:-26px; left:50%; width:1px; background:rgba(231,205,140,.35); transform:translateX(-50%); }
.timeline .row:last-child .line{ display:none; }
.timeline .info{ flex:1; display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding-top:4px; flex-wrap:wrap; }
.timeline .place{ font-family:'Poppins'; font-weight:600; font-size:15.5px; color:var(--cream); }
.timeline .night{ font-size:13.5px; color:var(--gold); font-weight:700; font-family:'Poppins'; white-space:nowrap; text-align:right; }
.timeline .night span{ display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); opacity:.65; font-weight:600; margin-top:3px;}

/* ============ DAY SPREADS ============ */
.spread{ background:var(--parchment); padding:58px 56px 0; display:flex; flex-direction:column;}
.spread .headrow{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid var(--navy); padding-bottom:16px;}
.spread .headrow h2{ font-weight:700; font-size:28px; color:var(--navy); }
.spread .headrow .part{ font-family:'Poppins'; font-size:11px; letter-spacing:.18em; color:var(--terracotta); font-weight:600; text-transform:uppercase;}
.daycard{ display:flex; gap:22px; padding:22px 0; border-bottom:1px solid var(--parchment-dim); }
.daycard:last-child{ border-bottom:none; }
.daycard .num{ font-family:'Poppins'; font-weight:800; font-size:32px; color:var(--gold); width:48px; flex-shrink:0; line-height:1;}
.daycard .txt{ flex:1; }
.daycard .txt .place{ font-family:'Poppins'; font-weight:600; font-size:15px; color:var(--navy); }
.daycard .txt .desc{ font-size:12.5px; line-height:1.62; color:var(--ink); margin-top:5px; max-width:40em;}
.daycard .ph{ width:150px; height:100px; flex-shrink:0; overflow:hidden; border-radius:2px; }
.daycard .ph img{ width:100%; height:100%; object-fit:cover; }
.daycard.nophoto{ background:var(--ionian); border-radius:2px; padding:18px 22px; border-bottom:none; margin:8px 0; }
.daycard.nophoto .num{ color:var(--gold-light); }
.daycard.nophoto .place{ color:var(--cream); }
.daycard.nophoto .desc{ color:var(--parchment); opacity:.92; }
.spread .daycards{ flex-shrink:0; }
.spread .bigphoto{ flex:1; min-height:190px; position:relative; margin-left:-56px; margin-right:-56px; overflow:hidden;}
.spread .bigphoto img{ width:100%; height:100%; object-fit:cover; }
.spread .bigphoto .scrim{ position:absolute; inset:0; background-image:url('grad_photo_scrim.png'); background-size:100% 100%; }
.spread .bigphoto .cap{ position:absolute; left:56px; right:56px; bottom:16px; color:var(--gold-light); font-family:'Poppins'; font-style:italic; font-weight:300; font-size:13px;}
.spread .textbig{ flex:1; min-height:190px; position:relative; margin-left:-56px; margin-right:-56px; overflow:hidden; background:var(--ionian); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 90px;}
#lefkada .textbig{ background:var(--navy-deep); }
.spread .textbig .rule{ width:30px; height:2px; background:var(--gold); margin-bottom:16px;}
.spread .textbig p{ font-family:'Poppins'; font-style:italic; font-weight:300; font-size:16px; color:var(--cream); line-height:1.55; max-width:34em;}
.spread .pagenum{ position:absolute; bottom:14px; right:56px; font-size:10.5px; letter-spacing:.15em; color:var(--gold-light); opacity:.7; }

/* ============ HIGHLIGHTS ============ */
#highlights{ background:var(--navy-deep); color:var(--cream); padding:64px 56px 0; }
#highlights .eyebrow{ color:var(--gold-light);}
#highlights h2{ font-weight:700; font-size:32px; margin-top:14px; color:var(--cream);}
#highlights .list{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
#highlights .item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(231,205,140,.18);}
#highlights .item .diamond{ width:9px; height:9px; background:var(--gold); transform:rotate(45deg); margin-top:6px; flex-shrink:0;}
#highlights .item p{ font-size:13px; line-height:1.55; color:var(--parchment); }
#highlights .essentials{ margin-top:40px; background:rgba(247,242,231,.06); border:1px solid rgba(231,205,140,.25); border-radius:3px; padding:24px 28px; display:flex; gap:40px; flex-wrap:wrap;}
#highlights .essentials div{ font-size:11px; }
#highlights .essentials b{ display:block; font-family:'Poppins'; font-weight:600; font-size:14px; color:var(--gold-light); margin-bottom:3px;}
#highlights .essentials span{ color:var(--parchment); opacity:.85; letter-spacing:.02em;}
#highlights .disclaimer{ margin-top:26px; font-size:10.5px; font-style:italic; color:var(--parchment); opacity:.55; max-width:40em; line-height:1.6;}
#highlights .pagenum{ position:absolute; bottom:28px; right:56px; font-size:10.5px; letter-spacing:.15em; color:var(--gold-light); opacity:.7;}

/* ============ CLOSING / CTA ============ */
#closing{ background:var(--navy); color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px; position:relative;}
#closing .ornament{ width:34px; height:2px; background:var(--gold); margin-bottom:26px; }
#closing .eyebrow{ color:var(--gold-light); }
#closing h2{ font-weight:700; font-size:33px; max-width:11em; line-height:1.2; margin-top:16px; color:var(--cream); text-wrap:balance;}
#closing .lede{ font-family:'Poppins'; font-weight:300; font-style:italic; font-size:16px; color:var(--gold-light); margin-top:18px; max-width:28em; line-height:1.6;}
#closing .contact{ margin-top:38px; display:flex; gap:34px; font-size:12px; color:var(--parchment); }
#closing .contact b{ color:var(--gold-light); font-weight:600; letter-spacing:.04em;}
#closing .back{ margin-top:46px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); opacity:.85; border:1px solid rgba(231,205,140,.4); padding:11px 22px; border-radius:2px; }
#closing .back:hover{ opacity:1; }
#closing .htgmark{ position:absolute; bottom:34px; height:54px; opacity:.9;}
#closing .stand{ position:absolute; top:40px; right:56px; font-size:10.5px; letter-spacing:.12em; color:var(--gold-light); opacity:.8; text-transform:uppercase;}

@media print{
  html,body{ background:none; padding:0; gap:0; }
  .page{ box-shadow:none; width:210mm; height:297mm; page-break-after:always; }
  @page{ size:210mm 297mm; margin:0; }
}