/* ===================================================
   PAQUEBOT — Transport Maritime
   Style : Belle Époque / Art Déco / Luxe transatlantique
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@400;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Raleway:wght@300;400;500&display=swap');

:root {
  --void:     #0e0a06;
  --dark:     #1a1208;
  --panel:    #211508;
  --wood:     #2e1c0a;
  --bordeaux: #5c1a22;
  --crimson:  #8b2230;
  --gold:     #c8971a;
  --gold-lt:  #e8b840;
  --champagne:#f5e090;
  --ivory:    #faf5e4;
  --cream:    #f7f0d8;
  --text:     #3a2a18;
  --text-lt:  #6a4f30;
  --rule:     rgba(200,151,26,.4);
  --gloss:    rgba(248,230,144,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:'Libre Baskerville',Georgia,serif;
  background:var(--void);
  color:var(--ivory);
  min-height:100vh;
}

/* ── Progress ── */
#prog{position:fixed;top:0;left:0;height:3px;background:linear-gradient(to right,var(--bordeaux),var(--gold));z-index:1000;width:0%;}

/* ── Top bar ── */
.topbar{
  background:var(--dark);
  border-bottom:2px solid var(--gold);
  padding:10px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.topbar .bc{
  font-family:'Raleway',sans-serif;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-lt);
}
.topbar .bc .s{color:rgba(200,151,26,.35);margin:0 8px;}
.topbar .ribbon{
  font-family:'Playfair Display SC',serif;font-size:.75rem;
  letter-spacing:.15em;color:rgba(200,151,26,.6);
}

/* ── Hero ── */
.hero{
  position:relative;min-height:540px;
  background:var(--dark);
  display:flex;align-items:flex-end;overflow:hidden;
}

/* Night sky with stars */
.stars{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 10%, #1a1008 0%, #0a0806 100%);}
.stars::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(248,230,144,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 15%, rgba(248,230,144,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 10%, rgba(248,230,144,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 25%, rgba(248,230,144,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 12%, rgba(248,230,144,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 30%, rgba(248,230,144,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 40%, rgba(248,230,144,.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 45%, rgba(248,230,144,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 35%, rgba(248,230,144,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 50%, rgba(248,230,144,.5) 0%, transparent 100%);
}

/* Sea shimmer at horizon */
.sea-horizon{
  position:absolute;bottom:0;left:0;right:0;height:180px;
  background:linear-gradient(to top,rgba(10,15,30,.95) 0%,rgba(15,25,45,.8) 40%,transparent 100%);
}

.sea-horizon::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,rgba(200,151,26,.2),rgba(200,151,26,.4),rgba(200,151,26,.2),transparent);
}

/* Ocean waves */
.waves{position:absolute;bottom:0;left:0;right:0;height:80px;overflow:hidden;}
.wave{position:absolute;bottom:0;width:200%;height:50px;border-radius:40%;background:rgba(8,12,22,.8);animation:wave-r 14s linear infinite;}
.wave-2{background:rgba(12,18,34,.6);animation-duration:10s;animation-direction:reverse;bottom:8px;}
.wave-3{background:rgba(20,30,55,.4);animation-duration:16s;bottom:15px;}
@keyframes wave-r{0%{transform:translateX(0);}100%{transform:translateX(-45%);}}

/* Paquebot SVG */
.liner-svg{
  position:absolute;
  bottom:65px;left:50%;transform:translateX(-50%);
  width:min(780px,90vw);
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.8));
  animation:liner-drift 12s ease-in-out infinite;
}
@keyframes liner-drift{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-.2deg);}
  50%{transform:translateX(-50%) translateY(-6px) rotate(.2deg);}
}

/* Hero content */
.hero-cnt{
  position:relative;z-index:2;width:100%;
  padding:48px 48px 44px;
  background:linear-gradient(to top,rgba(14,10,6,.98) 0%,rgba(14,10,6,.7) 55%,transparent 100%);
}

.hero-eyebrow{
  font-family:'Raleway',sans-serif;font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-lt);margin-bottom:12px;
}
.hero-eyebrow::before,.hero-eyebrow::after{content:'——';margin:0 10px;opacity:.4;}

.hero h1{
  font-family:'Playfair Display SC',serif;
  font-size:clamp(3rem,7vw,6rem);font-weight:700;
  color:var(--champagne);line-height:.92;
  text-shadow:0 2px 20px rgba(200,151,26,.2);
}
.hero h1 em{
  display:block;font-size:.38em;font-weight:400;font-style:italic;
  color:var(--gold);letter-spacing:.08em;margin-bottom:8px;
  font-family:'Libre Baskerville',serif;
}
.hero-sub{
  margin-top:14px;font-style:italic;font-size:1.08rem;
  color:rgba(250,245,228,.65);max-width:560px;line-height:1.75;
}
.hero-medals{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.medal{
  padding:5px 16px;border:1px solid rgba(200,151,26,.35);
  font-family:'Raleway',sans-serif;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);
  background:rgba(200,151,26,.06);border-radius:2px;
}

/* ── Page body ── */
.page-bg{background:var(--cream);min-height:100%;}

.main{max-width:1100px;margin:0 auto;padding:0 24px 80px;}

/* Ornamental intro */
.ornate-intro{
  background:var(--ivory);
  border-left:6px solid var(--gold);border-right:6px solid var(--gold);
  border-bottom:4px solid var(--gold);
  padding:36px 52px;margin-bottom:0;text-align:center;position:relative;
}
.ornate-intro::before,.ornate-intro::after{
  content:'';display:block;height:1px;
  background:linear-gradient(to right,transparent,var(--rule),transparent);
  margin:0 0 18px;
}
.ornate-intro::after{margin:18px 0 0;}
.ornate-intro p{
  font-size:1.2rem;font-style:italic;color:var(--text);line-height:1.8;max-width:780px;margin:0 auto;
}
.orn{display:block;text-align:center;color:var(--gold);margin:6px 0;font-size:1.2rem;letter-spacing:.4em;}

/* Content grid */
.cgrid{
  display:grid;grid-template-columns:1fr 340px;gap:0;
  background:var(--ivory);
  border-left:6px solid var(--gold);border-right:6px solid var(--gold);border-bottom:6px solid var(--gold);
}
.mc{padding:44px 44px 44px 52px;border-right:1px solid rgba(200,151,26,.2);}
.sb{padding:44px 32px;background:rgba(245,224,144,.08);}

/* Section headings */
.sh{
  font-family:'Playfair Display SC',serif;
  font-size:1.5rem;font-weight:700;color:var(--bordeaux);
  margin:44px 0 16px;padding-bottom:10px;
  border-bottom:2px solid var(--gold);
  display:flex;align-items:center;gap:12px;
}
.sh:first-child{margin-top:0;}

.mc p{font-size:1.05rem;line-height:1.85;color:var(--text);margin-bottom:16px;}
.mc strong{color:var(--bordeaux);font-weight:700;}

/* Table */
.dt{width:100%;border-collapse:collapse;margin:20px 0;font-size:.88rem;}
.dt thead th{
  background:var(--bordeaux);color:var(--champagne);padding:10px 14px;text-align:left;
  font-family:'Raleway',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.dt td{padding:9px 14px;border-bottom:1px solid rgba(200,151,26,.15);color:var(--text);}
.dt tr:nth-child(even) td{background:rgba(200,151,26,.06);}
.dt td:first-child{font-weight:700;color:var(--bordeaux);}

/* Timeline */
.tl{position:relative;padding-left:28px;margin:16px 0;}
.tl::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--gold),rgba(200,151,26,.1));}
.tl-item{position:relative;margin-bottom:20px;opacity:0;transform:translateX(-10px);transition:opacity .45s,transform .45s;}
.tl-item.on{opacity:1;transform:translateX(0);}
.tl-item::before{content:'';position:absolute;left:-24px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--ivory);box-shadow:0 0 0 2px var(--gold);}
.tl-yr{font-family:'Raleway',sans-serif;font-size:.72rem;color:var(--gold);letter-spacing:.18em;font-weight:600;text-transform:uppercase;margin-bottom:2px;}
.tl-item p{font-size:.98rem!important;margin:0!important;}

/* Ruban bleu box */
.rbb{
  background:linear-gradient(135deg,var(--bordeaux),#3d0f14);
  border-radius:4px;padding:22px 26px;margin:20px 0;color:var(--champagne);
}
.rbb h4{font-family:'Playfair Display SC',serif;font-size:1.1rem;margin-bottom:10px;color:var(--gold-lt);display:flex;gap:8px;align-items:center;}
.rbb p{font-size:.95rem!important;color:rgba(245,224,144,.85)!important;margin:0!important;line-height:1.65!important;}

/* Liner cards */
.liner-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;}
.lc{
  background:var(--cream);border:1px solid rgba(200,151,26,.25);border-radius:4px;
  padding:16px;transition:transform .25s,box-shadow .25s;cursor:default;
  opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s,box-shadow .25s;
}
.lc.on{opacity:1;transform:translateY(0);}
.lc:hover{transform:translateY(-3px)!important;box-shadow:0 8px 20px rgba(200,151,26,.12);}
.lc h4{font-family:'Playfair Display SC',serif;font-size:.9rem;color:var(--bordeaux);margin-bottom:5px;}
.lc p{font-size:.84rem!important;color:var(--text-lt)!important;line-height:1.55!important;margin:0!important;}

/* Sidebar cards */
.scard{
  background:var(--cream);border:1px solid rgba(200,151,26,.25);border-radius:4px;
  padding:22px 20px;margin-bottom:22px;position:relative;overflow:hidden;
}
.scard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--bordeaux),var(--gold));}
.scard h3{font-family:'Playfair Display SC',serif;font-size:.98rem;color:var(--bordeaux);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgba(200,151,26,.2);}

/* Stat figures */
.stat{text-align:center;padding:10px 0;border-bottom:1px solid rgba(200,151,26,.12);}
.stat:last-child{border-bottom:none;}
.stat-n{font-family:'Playfair Display SC',serif;font-size:2.2rem;color:var(--gold);line-height:1;}
.stat-l{font-size:.72rem;font-family:'Raleway',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-lt);margin-top:2px;}

/* Notable ships */
.ships{list-style:none;}
.ships li{padding:9px 6px;border-bottom:1px solid rgba(200,151,26,.15);cursor:pointer;transition:background .2s;border-radius:3px;}
.ships li:hover{background:rgba(200,151,26,.06);}
.ships li:last-child{border-bottom:none;}
.sn{font-family:'Playfair Display SC',serif;font-size:.9rem;color:var(--bordeaux);}
.sd{font-size:.8rem;color:var(--text-lt);font-style:italic;margin-top:1px;}
.sdet{display:none;font-size:.8rem;color:var(--text);margin-top:6px;padding:6px;background:rgba(200,151,26,.06);border-left:3px solid var(--gold);line-height:1.5;}
.ships li.open .sdet{display:block;}

/* Vocab list */
.vlist{list-style:none;}
.vlist li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid rgba(200,151,26,.1);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s;}
.vlist li.on{opacity:1;transform:translateX(0);}
.vlist li:last-child{border-bottom:none;}
.vt{font-style:italic;font-weight:700;color:var(--bordeaux);min-width:120px;flex-shrink:0;font-size:.95rem;}
.vd{font-size:.9rem;color:var(--text);line-height:1.5;}

/* Back top */
#bt{
  position:fixed;bottom:28px;right:28px;width:44px;height:44px;
  background:var(--dark);border:2px solid var(--gold);color:var(--gold-lt);
  font-size:1.1rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .25s;
  z-index:999;text-decoration:none;
}
#bt.on{opacity:1;pointer-events:auto;}
#bt:hover{transform:translateY(-3px);}

/* Footer */
footer{
  background:var(--dark);border-top:3px solid var(--gold);
  padding:28px 44px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.fb{font-family:'Playfair Display SC',serif;font-size:1rem;color:var(--gold-lt);}
.fm{font-family:'Raleway',sans-serif;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,151,26,.5);text-align:right;line-height:1.8;}

@media(max-width:820px){
  .cgrid{grid-template-columns:1fr;}
  .mc{border-right:none;border-bottom:1px solid rgba(200,151,26,.15);}
  .liner-grid{grid-template-columns:1fr;}
  .hero-cnt{padding:32px 24px 28px;}
}