/* =========================================================
   LA ROUTE DE L’ANTARCTIQUE — CSS COMPLET (FULL)
   Compatible avec le PHP: route-hero, route-nav, chips, rail,
   split, visual, cards, thresholds, insights, band, reveal.
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --rt-white:#f6f8f7;
  --rt-ice:#e8eff0;
  --rt-ice2:#eef4f5;
  --rt-ink:#0b1218;
  --rt-deep:#1f2a32;
  --rt-muted:rgba(31,42,50,.76);
  --rt-accent:#ff5a3c;
  --rt-steel:#7fa4b8;
  --rt-stroke:rgba(31,42,50,.14);
  --rt-stroke2:rgba(255,255,255,.36);
  --rt-shadow:0 26px 70px rgba(9,15,22,.10);
  --rt-shadow2:0 14px 36px rgba(9,15,22,.08);
  --rt-r:24px;
  --rt-max:1120px;
}

/* ---------- Reset local ---------- */
.route-wrap, .route-wrap *{ box-sizing:border-box; }
.route-wrap img{ max-width:100%; height:auto; display:block; }
.route-wrap a{ color:inherit; }

/* ---------- Wrapper + container ---------- */
.route-wrap{
  width:100vw;
  position:relative;
  left:50%;
  margin-left:-50vw;
  overflow:hidden;
  background:var(--rt-white);
  color:var(--rt-deep);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.route-container{
  max-width:var(--rt-max);
  margin:0 auto;
  padding:0 22px;
}
@media (max-width:900px){
  .route-container{ padding:0 16px; }
}

/* =========================================================
   HERO
   ========================================================= */
.route-hero{
  position:relative;
  min-height:min(76vh, 760px);
  display:flex;
  align-items:flex-end;
  color:#fff;
  isolation:isolate;
  background:var(--rt-ink);
  overflow:hidden;
}

.route-heroBg{
  position:absolute;
  inset:0;
  background-image:url('https://xtremsail.com/wp-content/uploads/2025/11/aion-aurora-ice.jpg');
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  z-index:-3;
}

.route-hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:-2;
  background:
    radial-gradient(1200px 720px at 50% 75%,
      rgba(255,255,255,0.16) 0%,
      rgba(31,42,50,0.30) 55%,
      rgba(31,42,50,0.52) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(31,42,50,0.46) 100%);
}

.route-hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 640px at 18% 34%, rgba(255,90,60,.10) 0%, rgba(255,90,60,0) 70%),
    radial-gradient(900px 640px at 82% 66%, rgba(127,164,184,.16) 0%, rgba(127,164,184,0) 70%);
  pointer-events:none;
}

.route-heroFade{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:120px;
  background:linear-gradient(180deg, rgba(246,248,247,0) 0%, rgba(246,248,247,1) 88%);
  pointer-events:none;
}

.route-heroInner{ width:100%; padding:64px 0 74px; }

.route-heroCard{
  max-width:980px;
  border-radius:var(--rt-r);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  padding:26px 28px;
}

@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))){
  .route-heroCard{
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}

.route-kicker{
  margin:0 0 12px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}

.route-h1{
  margin:0 0 12px;
  font-size:clamp(32px, 5vw, 62px);
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.04;
  text-shadow:0 16px 46px rgba(0,0,0,.22);
}

.route-sub{
  margin:0 0 14px;
  color:rgba(255,255,255,.86);
  font-size:15.5px;
  line-height:1.7;
  max-width:920px;
}

.route-pillRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.route-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .route-pill{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
}

.route-dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--rt-accent);
  box-shadow:0 0 0 6px rgba(255,90,60,.14);
}

/* Buttons (hero + band) */
.route-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }

.route-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:950;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
  min-height:44px;
  cursor:pointer;
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .route-btn{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
}

.route-btn.primary{
  background:var(--rt-accent);
  border-color:rgba(255,90,60,.95);
  color:rgba(11,18,24,.92);
}

.route-btn.steel{
  background:rgba(127,164,184,.22);
  border-color:rgba(127,164,184,.44);
}

.route-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}

@media (max-width:900px){
  .route-heroInner{ padding:56px 0 64px; }
  .route-heroCard{ padding:20px 18px; border-radius:20px; }
}

/* =========================================================
   STICKY NAV
   ========================================================= */
.route-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,248,247,.86);
  border-bottom:1px solid rgba(31,42,50,.10);
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .route-nav{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
}

.route-navInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}

.route-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(31,42,50,.92);
  white-space:nowrap;
}

.route-brand .route-dot{
  width:10px; height:10px;
  box-shadow:0 0 0 6px rgba(255,90,60,.16);
}

.route-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.route-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:950;
  text-decoration:none;
  color:rgba(31,42,50,.88);
  border:1px solid rgba(31,42,50,.14);
  background:rgba(255,255,255,.82);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-height:44px;
}

.route-chip:hover{
  transform:translateY(-1px);
  box-shadow:var(--rt-shadow2);
  border-color:rgba(255,90,60,.40);
}

@media (max-width:900px){
  .route-chips{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    white-space:nowrap;
    padding-bottom:2px;
  }
  .route-chip{ min-width:fit-content; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.route-sec{
  padding:80px 0;
  position:relative;
}
@media (max-width:900px){
  .route-sec{ padding:60px 0; }
}

.route-sec.alt{
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(127,164,184,.14) 0%, rgba(127,164,184,0) 70%),
    linear-gradient(180deg, var(--rt-ice2) 0%, var(--rt-white) 100%);
}

.route-sec + .route-sec::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, rgba(31,42,50,0), rgba(31,42,50,.12), rgba(31,42,50,0));
}

/* Titles + text */
.route-tag{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:900;
  color:rgba(127,164,184,.92);
  margin-bottom:10px;
}

.route-title{
  margin:0 0 10px;
  font-size:30px;
  font-weight:950;
  letter-spacing:-.01em;
  position:relative;
  padding-left:14px;
  line-height:1.2;
}
@media (max-width:600px){ .route-title{ font-size:26px; } }

.route-title::before{
  content:"";
  position:absolute;
  left:0; top:.24em;
  width:4px; height:1.05em;
  border-radius:3px;
  background:rgba(255,90,60,.85);
}

.route-lead{
  margin:0 0 22px;
  color:rgba(31,42,50,.84);
  font-size:16.5px;
  line-height:1.78;
  max-width:980px;
}
@media (max-width:600px){ .route-lead{ font-size:16px; } }

.route-text{
  margin:0;
  color:rgba(31,42,50,.84);
  font-size:15.6px;
  line-height:1.78;
}
@media (max-width:600px){ .route-text{ font-size:15.2px; } }
.route-text + .route-text{ margin-top:12px; }

/* =========================================================
   PROGRESS RAIL (PERMANENT)
   ========================================================= */
.route-progress{
  position:fixed;
  top:0;
  left:0;
  width:92px;
  height:100vh;
  z-index:60;
  pointer-events:none;
}

.route-progressInner{
  position:absolute;
  top:140px;
  bottom:80px;
  left:38px;
  width:1px;
}

.route-progressLine{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  background:linear-gradient(180deg, rgba(31,42,50,.10), rgba(31,42,50,.28), rgba(31,42,50,.10));
}

.route-step{
  position:relative;
  display:block;
  margin:18px 0;
  padding-left:18px;
  font-size:10.8px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(31,42,50,.46);
  text-decoration:none;
  pointer-events:auto;
  transition:transform .14s ease, color .14s ease;
}

.route-step:hover{ transform:translateX(2px); color:rgba(31,42,50,.78); }

.route-stepDot{
  position:absolute;
  left:-5px;
  top:50%;
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--rt-white);
  border:2px solid rgba(31,42,50,.26);
  transform:translateY(-50%);
}

.route-stepTxt{ white-space:nowrap; }

.route-step.is-active{ color:var(--rt-accent); }
.route-step.is-active .route-stepDot{
  background:var(--rt-accent);
  border-color:var(--rt-accent);
  box-shadow:0 0 0 6px rgba(255,90,60,.18);
}

.route-topBtn{
  margin-top:28px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(31,42,50,.14);
  background:rgba(255,255,255,.90);
  box-shadow:var(--rt-shadow2);
  color:rgba(31,42,50,.88);
  font-weight:950;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .14s ease, background .14s ease, color .14s ease;
}
.route-topBtn:hover{
  transform:translateY(-1px);
  background:var(--rt-accent);
  color:#fff;
  border-color:rgba(255,90,60,.65);
}

/* Ne pas gêner la lecture: on décale le contenu sur desktop */
@media (min-width:1100px){
  .route-wrap{
    padding-left:72px; /* place pour le rail */
  }
}

/* On masque le rail sur mobile/tablette */
@media (max-width:1100px){
  .route-progress{ display:none; }
  .route-wrap{ padding-left:0; }
}

/* =========================================================
   Layout split + cards + visuals
   ========================================================= */
.route-split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width:900px){ .route-split{ grid-template-columns:1fr; } }

.route-card{
  border-radius:var(--rt-r);
  background:rgba(255,255,255,.94);
  border:1px solid var(--rt-stroke);
  box-shadow:var(--rt-shadow);
  padding:22px 22px 20px;
}

.route-card h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:950;
  position:relative;
  padding-left:12px;
}
.route-card h3::before{
  content:"";
  position:absolute;
  left:0; top:.28em;
  width:3px; height:1.05em;
  border-radius:3px;
  background:rgba(127,164,184,.78);
}

.route-visual{
  border-radius:var(--rt-r);
  border:1px solid var(--rt-stroke);
  background:var(--rt-ice);
  overflow:hidden;
  position:relative;
  min-height:420px;
  box-shadow:var(--rt-shadow);
}

.route-visual::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  filter:saturate(.98) contrast(1.02);
}

.route-visual::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 80%, rgba(255,255,255,0.10) 0%, rgba(31,42,50,0.18) 60%, rgba(31,42,50,0.30) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(31,42,50,0.18));
}

.route-caption{
  position:absolute;
  left:16px; right:16px; bottom:14px;
  z-index:2;
  color:rgba(255,255,255,.90);
  font-size:12.5px;
  line-height:1.55;
  background:rgba(11,18,24,.22);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:10px 12px;
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .route-caption{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
}

@media (max-width:900px){
  .route-visual{ min-height:260px; }
}

/* Bullets */
.route-bullets{
  margin:10px 0 0;
  padding-left:18px;
  color:rgba(31,42,50,.82);
  font-size:15.5px;
  line-height:1.75;
}
.route-bullets li{ margin:6px 0; }

/* Quote */
.route-quote{
  margin-top:14px;
  padding:12px 14px;
  border-left:3px solid rgba(255,90,60,.95);
  background:linear-gradient(180deg, rgba(255,90,60,.08), rgba(255,90,60,0));
  border-radius:14px;
  color:rgba(31,42,50,.80);
  font-style:italic;
}

/* =========================================================
   THRESHOLDS (Seuils)
   ========================================================= */
.route-threshold{
  margin:24px 0 18px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,90,60,.18);
  background:
    radial-gradient(900px 420px at 10% 30%, rgba(255,90,60,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,90,60,.10), rgba(255,90,60,0));
}

.route-thresholdLabel{
  display:inline-block;
  font-size:11px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,90,60,.95);
  margin-bottom:6px;
}

.route-threshold p{
  margin:0;
  color:rgba(31,42,50,.82);
  line-height:1.7;
  font-size:15.2px;
}

/* =========================================================
   INSIGHTS (details/summary)
   ========================================================= */
.route-insight{
  margin-top:14px;
  border-radius:14px;
  border:1px dashed rgba(31,42,50,.18);
  background:rgba(127,164,184,.10);
  padding:10px 12px;
}

.route-insight summary{
  cursor:pointer;
  font-weight:950;
  font-size:13px;
  color:rgba(31,42,50,.88);
  outline:none;
  list-style:none;
}
.route-insight summary::-webkit-details-marker{ display:none; }

.route-insight summary::after{
  content:"+";
  float:right;
  font-weight:950;
  color:rgba(31,42,50,.55);
}

.route-insight[open] summary::after{ content:"–"; }

.route-insight p{
  margin:10px 0 0;
  font-size:14.6px;
  line-height:1.68;
  color:rgba(31,42,50,.82);
}

/* =========================================================
   BAND (final / data hub)
   ========================================================= */
.route-band{
  border-radius:var(--rt-r);
  background:
    radial-gradient(820px 520px at 18% 35%, rgba(255,90,60,.08) 0%, rgba(255,90,60,0) 70%),
    radial-gradient(900px 620px at 80% 60%, rgba(127,164,184,.14) 0%, rgba(127,164,184,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  border:1px solid var(--rt-stroke);
  padding:22px;
  box-shadow:var(--rt-shadow);
}

.route-bandGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  align-items:center;
}
@media (max-width:900px){ .route-bandGrid{ grid-template-columns:1fr; } }

.route-bandTitle{
  margin:0 0 8px;
  font-size:22px;
  font-weight:950;
  letter-spacing:-.01em;
}

.route-bandText{
  margin:0;
  color:rgba(31,42,50,.82);
  line-height:1.75;
  font-size:15.5px;
}

.route-bandBtns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width:900px){ .route-bandBtns{ justify-content:flex-start; } }

.route-bandBtns .route-btn{
  border-color:rgba(31,42,50,.18);
  background:rgba(255,255,255,.92);
  color:var(--rt-deep);
  box-shadow:var(--rt-shadow2);
}

.route-bandBtns .route-btn.primary{
  background:var(--rt-accent);
  border-color:rgba(255,90,60,.95);
  color:rgba(11,18,24,.92);
}

.route-bandBtns .route-btn.steel{
  background:rgba(127,164,184,.18);
  border-color:rgba(127,164,184,.38);
}

/* =========================================================
   REVEAL
   ========================================================= */
.route-js .route-reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
}
.route-js .route-reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   ACCESSIBILITY + SMALL FIXES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .route-js .route-reveal{ transition:none !important; transform:none !important; opacity:1 !important; }
  .route-btn, .route-chip, .route-step{ transition:none !important; }
}

/* Prevent anchor jump under sticky nav (approx) */
.route-stage{ scroll-margin-top:84px; }