/* =====================================================================
   LA CROISIÈRE — Système de design partagé
   Esthétique : paquebot Art Déco / croisière de luxe, revisité moderne
   Palette extraite du logo : marine, océan, rouge bouée, crème, laiton
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* — Bleus marine (fonds sombres) — */
  --navy-950:#03101f;
  --navy-900:#061627;
  --navy-850:#081d33;
  --navy-800:#0a2742;
  --navy-700:#103458;
  /* — Bleus océan (accents) — */
  --ocean:#2477bf;
  --ocean-bright:#43a3e6;
  --ocean-pale:#bfe0f3;
  /* — Rouge bouée — */
  --red:#cf3a2e;
  --red-deep:#a92a20;
  /* — Crème / papier (plus profond, plus premium) — */
  --cream:#e7ddca;
  --cream-deep:#d6c8ac;
  --paper:#efe7d5;
  /* — Laiton / doré (accent luxe) — */
  --gold:#caa75e;
  --gold-soft:#e0c88f;
  /* — Encre — */
  --ink:#0c2138;
  --ink-soft:#41526a;

  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-sans:'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--cream);
  color:var(--ink);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ——— Typographie ——— */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.04;margin:0;letter-spacing:.005em;}
.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:.96;
  letter-spacing:.01em;
}
.eyebrow{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.42em;
  text-transform:uppercase;
}
.eyebrow .dot{color:var(--red);}
.lead{font-size:1.18rem;line-height:1.75;color:var(--ink-soft);font-weight:300;}
.serif-it{font-family:var(--font-display);font-style:italic;}

/* ——— Largeur ——— */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 32px;}

section{position:relative;}
.sec-pad{padding:128px 0;}
.sec-pad-sm{padding:88px 0;}

/* ——— Filets déco ——— */
.rule-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border:0;}
.deco-line{display:inline-flex;align-items:center;gap:14px;}
.deco-line::before,.deco-line::after{content:"";width:46px;height:1px;background:var(--gold);opacity:.7;}
.diamond{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);display:inline-block;}

/* ——— Boutons ——— */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-sans);font-weight:500;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  padding:16px 30px;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:all .4s var(--ease);position:relative;white-space:nowrap;
}
.btn .arr{transition:transform .4s var(--ease);}
.btn:hover .arr{transform:translateX(5px);}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px rgba(207,58,46,.6);}
.btn-red:hover{background:var(--red-deep);box-shadow:0 16px 40px -12px rgba(207,58,46,.7);transform:translateY(-2px);}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;}
.btn-ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff;}
.btn-ink{border-color:var(--navy-800);color:var(--navy-900);}
.btn-ink:hover{background:var(--navy-900);color:var(--cream);}
.btn-gold{background:var(--gold);color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);}

/* ——— NAV ——— */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 36px;
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.scrolled{
  background:rgba(8,32,59,.92);backdrop-filter:blur(14px);
  padding:13px 40px;box-shadow:0 1px 0 rgba(200,164,92,.25),0 14px 40px -22px rgba(0,0,0,.8);
}
.brand{display:flex;align-items:center;gap:13px;}
.brand img{width:46px;height:46px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(200,164,92,.5),0 4px 14px -4px rgba(0,0,0,.5);}
.brand .wm{display:flex;flex-direction:column;line-height:1;}
.brand .wm b{font-family:var(--font-display);font-weight:600;color:#fff;font-size:1.34rem;letter-spacing:.06em;white-space:nowrap;}
.brand .wm span{font-family:var(--font-sans);font-weight:400;color:var(--gold-soft);font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;margin-top:3px;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0;white-space:nowrap;}
.nav-links a{
  font-family:var(--font-sans);font-weight:400;color:rgba(255,255,255,.86);
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;position:relative;padding:6px 0;
  transition:color .3s;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease);}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a.active{color:#fff;}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-phone{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:.82rem;letter-spacing:.06em;white-space:nowrap;}
.nav-phone svg{width:15px;height:15px;}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.burger span{width:24px;height:2px;background:#fff;transition:.3s;}

/* ——— Wave divider ——— */
.wave{display:block;width:100%;height:auto;line-height:0;}

/* ——— Sections sombres / claires ——— */
.bg-navy{background:var(--navy-900);color:var(--cream);}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff;}
.bg-cream{background:var(--cream);}
.bg-paper{background:var(--paper);}

/* ——— Placeholder image élégant ——— */
.ph{
  position:relative;overflow:hidden;background:
    repeating-linear-gradient(135deg,rgba(30,111,184,.10) 0 10px,rgba(30,111,184,.04) 10px 20px),
    var(--cream-deep);
  display:flex;align-items:center;justify-content:center;
  color:var(--ocean);
}
.ph.on-navy{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 10px,rgba(255,255,255,.02) 10px 20px),
    var(--navy-800);
  color:var(--ocean-pale);
}
.ph .ph-tag{
  font-family:var(--font-sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  border:1px solid currentColor;padding:7px 14px;border-radius:2px;opacity:.85;
}

/* ——— Reveal on scroll ——— */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;}
.reveal.d4{transition-delay:.4s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

/* ——— FOOTER ——— */
.footer{background:var(--navy-950);color:rgba(255,255,255,.72);padding:84px 0 0;position:relative;}
.footer h4{color:#fff;font-size:1.05rem;letter-spacing:.04em;margin-bottom:18px;}
.footer .f-label{font-family:var(--font-sans);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:22px;}
.footer a{transition:color .3s;}
.footer a:hover{color:var(--gold-soft);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:48px;}
.f-contact-row{display:flex;gap:11px;margin-bottom:13px;font-size:.94rem;align-items:flex-start;}
.f-contact-row svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ocean-bright);}
.f-social{display:flex;gap:12px;margin-top:20px;}
.f-social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease);}
.f-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-950);transform:translateY(-3px);}
.f-social svg{width:17px;height:17px;}
.footer-bottom{
  margin-top:64px;border-top:1px solid rgba(255,255,255,.1);
  padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.8rem;letter-spacing:.04em;color:rgba(255,255,255,.5);
}
.wecraft{display:inline-flex;align-items:center;gap:9px;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;color:rgba(255,255,255,.62);transition:color .3s;}
.wecraft b{color:#fff;font-weight:600;letter-spacing:.16em;}
.wecraft:hover{color:#fff;}
.wecraft .spark{width:14px;height:14px;color:var(--gold);}

/* ——— Page header (sous-pages) ——— */
.page-hero{
  position:relative;min-height:56vh;display:flex;align-items:flex-end;
  background:var(--navy-900);color:#fff;overflow:hidden;padding-bottom:62px;
}
.page-hero .wrap{position:relative;z-index:3;}
.page-hero .crumb{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:20px;}
.page-hero h1{font-size:clamp(3rem,8vw,6.4rem);}

/* ——— Utilitaires ——— */
.center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}
.maxw-640{max-width:640px;}
.maxw-720{max-width:720px;}
.grid{display:grid;}
.gap-32{gap:32px;}

@media (max-width:1180px){ .nav-phone{display:none;} }
@media (max-width:1080px){
  .nav-links,.nav-phone{display:none;}
  .burger{display:flex;}
}
@media (max-width:900px){
  .sec-pad{padding:84px 0;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .nav{padding:16px 22px;}
}
@media (max-width:560px){
  .wrap,.wrap-wide{padding:0 20px;}
  .footer-grid{grid-template-columns:1fr;}
  .brand .wm b{font-size:1.15rem;}
}

/* ===================================================================
   PHOTOS — emplacements remplis par de vraies images
   =================================================================== */
.ph.has-img{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--navy-850);
}
.ph.has-img .ph-tag{display:none;}
.bg-navy .lead{color:rgba(255,255,255,.80);}
.bg-navy .chip{color:var(--gold-soft);border-color:rgba(200,167,94,.55);}
/* léger voile sombre pour cohérence premium */
.ph.has-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,13,26,.10),rgba(4,13,26,.32));}
.ph.has-img.on-navy::after{background:linear-gradient(180deg,rgba(4,13,26,.30),rgba(4,13,26,.62));}
.spec .ph.has-img::after{display:none;} /* l'overlay .spec-ov gère déjà l'assombrissement */

/* Hero principal : photo de fond optionnelle */
.hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:saturate(.92) brightness(.5);opacity:.55;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 8%,rgba(8,30,55,.4) 0%,rgba(4,13,26,.78) 60%,#03101f 100%);}

/* ===================================================================
   PRELOADER — paquebot qui se remplit
   =================================================================== */
.preloader{position:fixed;inset:0;z-index:9999;background:
  radial-gradient(120% 90% at 50% 12%,#0c2c4e 0%,#061627 50%,#03101f 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  transition:opacity .8s var(--ease),visibility .8s var(--ease);}
.preloader.done{opacity:0;visibility:hidden;}
.pl-stars{position:absolute;inset:0;opacity:.5;background-image:
  radial-gradient(1.5px 1.5px at 22% 28%,rgba(255,255,255,.5),transparent),
  radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.4),transparent),
  radial-gradient(1px 1px at 48% 16%,rgba(255,255,255,.45),transparent),
  radial-gradient(1.5px 1.5px at 84% 36%,rgba(255,255,255,.35),transparent);}
.pl-porthole{position:relative;width:266px;height:266px;border-radius:50%;
  animation:plbob 5.5s ease-in-out infinite;transform-origin:center;will-change:transform;}
.pl-glass{position:absolute;inset:16px;border-radius:50%;overflow:hidden;background:#bfe3f5;
  box-shadow:inset 0 10px 26px rgba(255,255,255,.22), inset 0 -18px 44px rgba(4,18,34,.55), inset 0 0 0 2px rgba(8,30,55,.3);}
.pl-glass img{width:120%;height:120%;object-fit:cover;object-position:50% 42%;margin:-10% 0 0 -10%;display:block;
  animation:plship 8s ease-in-out infinite;will-change:transform;}
.pl-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 215deg,#6e5320,#ecd08a,#caa75e,#876a2d,#f1da9c,#7a5c22,#ecd08a,#6e5320);
  -webkit-mask:radial-gradient(circle at center, transparent 0 117px, #000 118px);
          mask:radial-gradient(circle at center, transparent 0 117px, #000 118px);
  box-shadow:0 12px 34px -8px rgba(0,0,0,.65);}
.pl-rivets{position:absolute;inset:0;}
.pl-rivets span{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fbeec2,#9c7a36);box-shadow:0 0 2px rgba(0,0,0,.5);}
.pl-glint{position:absolute;inset:16px;border-radius:50%;pointer-events:none;overflow:hidden;}
.pl-glint::before{content:"";position:absolute;top:-30%;left:0;width:55%;height:160%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);animation:plglint 4.6s ease-in-out infinite;}
.pl-fill{position:absolute;left:0;right:0;bottom:0;height:0;z-index:2;
  background:linear-gradient(180deg,rgba(40,135,155,.5),rgba(10,44,68,.85));}
.pl-fill-wave{position:absolute;top:-7px;left:0;width:200%;height:12px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='12'%3E%3Cpath%20d='M0,7%20Q22.5,1%2045,7%20T90,7%20L90,12%20L0,12%20Z'%20fill='%23288799'%20fill-opacity='0.6'/%3E%3Cpath%20d='M0,7%20Q22.5,1%2045,7%20T90,7'%20fill='none'%20stroke='%23ecd6a6'%20stroke-width='1.3'/%3E%3C/svg%3E") repeat-x;
  background-size:90px 12px;animation:plWaveMove 2.4s linear infinite;}
@keyframes plWaveMove{from{transform:translateX(0)}to{transform:translateX(-90px)}}
@keyframes plglint{0%{transform:translateX(-160%) rotate(8deg);opacity:0}40%{opacity:.85}100%{transform:translateX(420%) rotate(8deg);opacity:0}}
@keyframes plbob{0%,100%{transform:translateY(0) rotate(-1.7deg)}50%{transform:translateY(-9px) rotate(1.7deg)}}
@keyframes plship{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(-3%) scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pl-porthole,.pl-glint::before,.pl-glass img{animation:none;}}
.pl-name{font-family:var(--font-display);font-style:italic;color:var(--gold-soft);font-size:1.8rem;letter-spacing:.05em;position:relative;}
.pl-bar{position:relative;width:210px;height:2px;background:rgba(255,255,255,.13);overflow:hidden;border-radius:2px;}
.pl-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transition:width .25s var(--ease);}
.pl-sub{font-family:var(--font-sans);font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.55);position:relative;}

/* ===================================================================
   ANIMATIONS THÈME CROISIÈRE
   =================================================================== */
/* Vagues animées entre sections */
.wave-divider{position:absolute;left:0;right:0;line-height:0;z-index:3;overflow:hidden;pointer-events:none;}
.wave-divider.top{top:-1px;}
.wave-divider.bottom{bottom:-1px;}
.wave-divider svg{position:relative;display:block;width:200%;height:70px;}
.wave-divider .wl-a{animation:wdrift 16s linear infinite;}
.wave-divider .wl-b{animation:wdrift 24s linear infinite reverse;opacity:.55;}
@keyframes wdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Bulles montantes (sections sombres) */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.bubbles span{position:absolute;bottom:-30px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(120,190,235,.10));
  box-shadow:0 0 8px rgba(120,190,235,.25);animation:rise linear infinite;opacity:0;}
.bg-navy > .wrap,.bg-navy > .wrap-wide{position:relative;z-index:2;}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0;}
  12%{opacity:.7;}
  85%{opacity:.5;}
  100%{transform:translateY(-115vh) translateX(var(--drift,20px)) scale(1);opacity:0;}
}
@media (prefers-reduced-motion:reduce){.bubbles{display:none;}.wave-divider .wl-a,.wave-divider .wl-b{animation:none;}}

/* Poissons qui nagent */
.school{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.fish{position:absolute;left:0;top:0;will-change:transform;animation:swim linear infinite;}
.fish.rev{animation-name:swimRev;}
.fish .fb{display:block;animation:finbob ease-in-out infinite;}
.fish svg{display:block;}
@keyframes swim{from{transform:translateX(-14vw)}to{transform:translateX(114vw)}}
@keyframes swimRev{from{transform:translateX(114vw) scaleX(-1)}to{transform:translateX(-14vw) scaleX(-1)}}
@keyframes finbob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(9px) rotate(2.5deg)}}
@media (prefers-reduced-motion:reduce){.school{display:none;}}

/* Canvas poissons 3D (WebGL) */
.fish3d-host{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.fish3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* Banc de vrais poissons (photos) */
.aqua-host{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.realfish{position:absolute;left:0;will-change:transform;animation:rfSwim linear infinite;}
.realfish.left{animation-name:rfSwimL;}
.realfish .rf-bob{animation:rfBob ease-in-out infinite;will-change:transform;}
.realfish .rf-flex{animation:rfFlex ease-in-out infinite;transform-origin:right center;}
.realfish.left .rf-flex{transform-origin:left center;}
.realfish .rf-img{display:block;width:100%;height:auto;filter:drop-shadow(0 9px 16px rgba(2,10,20,.5));}
@keyframes rfSwim{from{transform:translateX(-32vw)}to{transform:translateX(122vw)}}
@keyframes rfSwimL{from{transform:translateX(122vw)}to{transform:translateX(-32vw)}}
@keyframes rfBob{0%,100%{transform:translateY(-6px) rotate(-1deg)}50%{transform:translateY(6px) rotate(1deg)}}
@keyframes rfFlex{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.realfish{display:none;}}

/* Flottaison douce (emblèmes, icônes) */
.float-soft{animation:floatSoft 5s ease-in-out infinite;}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Soulignement filant doré au survol des titres de section */
.anim-underline{position:relative;display:inline-block;}
.anim-underline::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);}
.anim-underline.in::after{transform:scaleX(1);}

/* Badge note Google */
.gnote{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:10px 22px;
  background:var(--paper);border:1px solid var(--cream-deep);border-radius:100px;
  box-shadow:0 14px 34px -22px rgba(8,32,59,.5);}
.gnote-score{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--navy-900);line-height:1;}
.gnote-stars{color:var(--gold);letter-spacing:2px;font-size:1rem;}
.gnote-count{font-size:.82rem;color:var(--ink-soft);letter-spacing:.04em;}

/* Séparateur de vagues entre sections */
.wave-sep{position:relative;height:60px;line-height:0;overflow:hidden;}
.wave-sep svg{position:absolute;bottom:-1px;left:0;width:200%;height:100%;}
.wave-sep .ws-a{animation:wdrift 18s linear infinite;}
.wave-sep .ws-b{animation:wdrift 27s linear infinite reverse;opacity:.5;}


/* ===== Mobile drawer (partagé toutes pages) ===== */
.mobile-drawer{position:fixed;inset:0;z-index:200;background:var(--navy-950);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  transform:translateY(-100%);transition:transform .5s var(--ease);}
.mobile-drawer.open{transform:none;}
.mobile-drawer a{color:#fff;font-family:var(--font-display);font-size:2.2rem;padding:10px;}
.mobile-drawer .md-close{position:absolute;top:24px;right:24px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;}
.mobile-drawer .btn{margin-top:24px;}