/* ============================================================
   RHUM OCÉAN — PDF SKIN
   Aligne le rendu sur le modèle PDF training.calistoconsulting.com :
   palette sarcelle / or / crème, sections alternées, titres
   « remplis + contour », cartes spec blanches, pied de page sarcelle.
   Cette feuille est chargée EN DERNIER et est volontairement scopée
   pour ne JAMAIS casser le markup ou le JS existants.
   Les variables --pdf-* peuvent être écrasées en direct par le
   Customizer (CSS inline injecté après cette feuille).
   ============================================================ */

:root {
  /* — Palette du modèle — */
  --pdf-teal:        #02686f;   /* sarcelle — couleur de marque */
  --pdf-teal-2:      #037e86;   /* sarcelle clair (hover) */
  --pdf-teal-deep:   #014f55;   /* sarcelle profond (bas de footer) */
  --pdf-gold:        #f5c400;   /* or — eyebrows, unités, submit */
  --pdf-cream:       #faecb3;   /* crème — fond section partenaires */
  --pdf-ice:         #f3f9fb;   /* blanc glacé — fond expérience */
  --pdf-taupe:       #a7a89a;   /* taupe — fond carte manifeste */
  --pdf-ink:         #163239;   /* texte foncé sur fond clair */
  --pdf-ink-soft:    #4a6168;   /* texte foncé atténué */
  --pdf-white:       #ffffff;

  /* — Échelles typographiques (réglables via Customizer) — */
  --pdf-title-scale: 1;         /* multiplicateur global des grands titres */
  --pdf-eyebrow-size: 22px;     /* taille des eyebrows (.section-tag) */
  --pdf-body-scale:  1;         /* multiplicateur du corps de texte */
}

/* ============================================================
   0. TRANSITIONS PLATES — le modèle n'a pas de vagues entre sections
   (sections en blocs de couleur nets, comme le PDF)
   ============================================================ */
.section-wave { display: none !important; }

/* ============================================================
   1. EYEBROWS / SECTION-TAGS — or, italique, condensé
   ============================================================ */
.section-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--pdf-eyebrow-size);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pdf-gold);
  line-height: 1.1;
  margin-bottom: 18px;
}

/* ============================================================
   2. NAVIGATION — épurée, façon modèle (liens texte, pas de pilule)
   ============================================================ */
.nav-links a {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 8px 12px !important;
  box-shadow: none !important;
  position: relative;
}
.nav-links a::before { display: none !important; }
.nav-links a::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 1.5px;
  background: var(--pdf-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.nav-links a:hover,
.nav-links a.active {
  background: transparent !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
/* Masquer les emojis de nav pour coller au modèle (réversible) */
.nav-links .nav-emoji,
.footer-nav-emoji { display: none !important; }

/* Bouton « Devenir Partenaire » — pilule contour blanc + flèche */
.nav-cta {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  color: #fff !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
.nav-cta:hover {
  background: #fff !important;
  color: var(--pdf-teal) !important;
  border-color: #fff !important;
  transform: none !important;
}

/* Pilule de langue — crème/or comme dans le modèle */
.lang-current {
  background: var(--pdf-cream) !important;
  color: var(--pdf-teal) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 600;
}
.lang-current:hover { background: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important; }
.lang-globe { filter: none !important; }
.lang-chevron { color: var(--pdf-teal) !important; }

/* Live tracker — pilule contour */
.nav-tracker-btn {
  border-radius: 999px !important;
  border-color: rgba(255,255,255,0.45) !important;
}
.nav-tracker-dot { background: var(--pdf-gold) !important; }

/* Header au scroll — voile sarcelle profond */
.site-header.scrolled {
  background: rgba(1, 79, 85, 0.94) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* ============================================================
   3. HÉROS — titre rempli + contour (déjà proche du modèle)
   ============================================================ */
.hero-title { font-size: calc(clamp(42px, 8vw, 110px) * var(--pdf-title-scale)); }
.hero-title-first {
  background: transparent !important;
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}
.hero-title-last {
  display: inline-block !important;
  background: var(--pdf-teal) !important;
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  padding: 0.02em 0.22em 0.1em !important;
  line-height: 0.95 !important;
}
.hero-race-inline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(15px, 2vw, 22px);
  color: #fff;
  margin: 18px 0 2px;
}
.hero-tagline { color: rgba(255,255,255,0.92); }
.hero-tagline-route { color: rgba(255,255,255,0.65) !important; }
.hero-country { color: #fff; }

/* Bouton primaire du héros — pilule contour blanc */
.btn-hero-primary {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.8);
  border-radius: 999px !important;
  padding: 13px 28px !important;
  color: #fff !important;
  transition: background 0.25s, color 0.25s, transform 0.2s !important;
}
.btn-hero-primary:hover {
  background: #fff !important;
  color: var(--pdf-teal) !important;
  transform: translateY(-2px) !important;
}
.btn-hero-primary .btn-icon { transition: transform 0.25s; }
.btn-hero-primary:hover .btn-icon { transform: translateX(3px); }

/* Indice de scroll */
.hero-scroll-hint span { color: rgba(255,255,255,0.7); }
.scroll-line { background: linear-gradient(to bottom, var(--pdf-gold), transparent) !important; }

/* ============================================================
   4. MANIFESTE — fond taupe + carte, titres remplis/contour
   ============================================================ */
.section-manifesto {
  background: var(--pdf-taupe) !important;
  position: relative;
  overflow: hidden;
}
.manifesto-bg { position: absolute; inset: 0; }
.manifesto-map-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.55 !important;
  filter: saturate(0) brightness(1.02) !important;
  mix-blend-mode: multiply !important;
}
.manifesto-bg-overlay {
  background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(167,168,154,0) 0%, rgba(167,168,154,0.35) 100%) !important;
}
/* Texte centré comme le modèle */
.manifesto-inner {
  position: relative;
  text-align: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}
.manifesto-line {
  font-size: calc(clamp(42px, 8vw, 100px) * var(--pdf-title-scale)) !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 0.96 !important;
}
.manifesto-line--2 {
  color: transparent !important;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}
.manifesto-dest { display: none !important; }
.manifesto-sub  {
  color: var(--pdf-teal) !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 14px !important;
}

/* ============================================================
   5. KPI / STATS — bandeau sarcelle, nombres blancs, unités or
   ============================================================ */
.section-stats { background: var(--pdf-teal) !important; }
.stat-item { border-color: rgba(255,255,255,0.14) !important; }
.stat-item::after { background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%) !important; }
.stat-item:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.3) !important; }
.stat-num { color: #fff !important; }
.stat-item:hover .stat-num { color: #fff !important; text-shadow: 0 0 22px rgba(255,255,255,0.25) !important; }
.stat-unit { color: var(--pdf-gold) !important; }
.stat-item:hover .stat-unit { color: var(--pdf-gold) !important; }
.stat-label { color: rgba(255,255,255,0.7) !important; }
.stat-item:hover .stat-label { color: #fff !important; }
.stat-divider { background: rgba(255,255,255,0.18) !important; }
.stat-icon svg path,
.stat-icon svg rect,
.stat-icon svg circle { stroke: #fff; }

/* ============================================================
   6. SKIPPEUSE — fond sarcelle, AINA rempli / BAUZA ROIG contour
   ============================================================ */
.section-skipper { background: var(--pdf-teal) !important; }
.skipper-media { background: var(--pdf-teal) !important; }
.skipper-photo-overlay {
  background: linear-gradient(to right, transparent 55%, var(--pdf-teal) 100%) !important;
}
.skipper-name-first {
  color: #fff !important;
  font-size: calc(clamp(64px, 9vw, 120px) * var(--pdf-title-scale)) !important;
}
.skipper-name-last {
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(255,255,255,0.9);
  text-stroke: 2px rgba(255,255,255,0.9);
  font-size: calc(clamp(40px, 6vw, 86px) * var(--pdf-title-scale)) !important;
}
.section-title-rule { background: var(--pdf-gold) !important; }
.skipper-bio { color: rgba(255,255,255,0.88) !important; }
.skipper-badges .badge {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.skipper-badges .badge:hover {
  color: var(--pdf-teal) !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* Bouton « Devenir Partenaire » dans la skippeuse — pilule contour */
.btn-skipper-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 10px 20px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.btn-skipper-cta:hover { background: #fff; color: var(--pdf-teal); transform: translateY(-2px); }
.btn-skipper-cta svg { transition: transform 0.25s; }
.btn-skipper-cta:hover svg { transform: translateX(3px); }

/* ============================================================
   7. EXPÉRIENCE — fond clair glacé, titres sarcelle, nav or
   ============================================================ */
.section-experience { background: var(--pdf-ice) !important; border-top: none !important; }
.section-experience::before {
  background-image: none !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--pdf-ice) 100%) !important;
  opacity: 1 !important;
}
.experience-title {
  color: var(--pdf-teal) !important;
  font-size: calc(clamp(40px, 5.5vw, 78px) * var(--pdf-title-scale)) !important;
}
/* Deuxième ligne du titre (créée via .experience-title--outline si présent) */
.experience-title--outline {
  color: transparent !important;
  -webkit-text-stroke: 1.6px var(--pdf-teal);
  text-stroke: 1.6px var(--pdf-teal);
}
.timeline-year-num { color: var(--pdf-teal) !important; }
.timeline-year-range { color: var(--pdf-ink-soft) !important; }
.timeline-dot { background: var(--pdf-gold) !important; }
.timeline-dot::before { background: var(--pdf-gold) !important; }
.timeline-items li { color: var(--pdf-ink-soft) !important; }
.timeline-items li::before { background: var(--pdf-teal) !important; }
.timeline-items li:first-child { color: var(--pdf-ink) !important; font-weight: 500; }
.timeline-row:not(:last-child)::after { background: rgba(2,104,111,0.12) !important; }
.timeline-row:hover .timeline-year-num { color: var(--pdf-teal-2) !important; }

/* Badge année (« Route du Rhum », « Transat Café L'Or ») */
.tl-year-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 14px;
  border: 1.5px solid var(--pdf-teal);
  border-radius: 999px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--pdf-teal);
  white-space: nowrap;
}

/* Vignettes — cartouche clair */
.tl-thumb-cap {
  background: rgba(2,104,111,0.08) !important;
  border-color: rgba(2,104,111,0.25) !important;
  color: var(--pdf-ink-soft) !important;
}

/* Nav timeline — pilule or, flèches blanches rondes */
.timeline-nav--inline { background: var(--pdf-gold); border-radius: 999px; padding: 5px; }
.tl-btn {
  background: #fff !important;
  border: none !important;
  color: var(--pdf-teal) !important;
  width: 30px; height: 30px;
  border-radius: 50% !important;
}
.tl-btn:hover:not(:disabled) { background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.tl-btn:disabled { opacity: 0.4 !important; }
.tl-counter {
  color: var(--pdf-teal) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 0 6px;
}

/* ============================================================
   8. BATEAU — fond sarcelle, GRAND RHINO blanc, cartes blanches
   ============================================================ */
.section-boat { background: var(--pdf-teal) !important; }
.boat-media { background: var(--pdf-teal) !important; }
.boat-photo-overlay {
  background: linear-gradient(to left, transparent 55%, var(--pdf-teal) 100%) !important;
}
.boat-title {
  color: #fff !important;
  font-size: calc(clamp(52px, 7vw, 100px) * var(--pdf-title-scale)) !important;
}
.boat-class-label { color: rgba(255,255,255,0.92) !important; font-family: var(--font-display); font-weight: 700; }

.boat-content { background: transparent !important; }

/* Cartes spec — blanches, nombre sarcelle, unité or */
.spec-card {
  background: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12) !important;
}
.spec-card:hover {
  background: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.2) !important;
}
.spec-icon svg path,
.spec-icon svg rect,
.spec-icon svg circle { stroke: var(--pdf-teal) !important; }
.spec-val { color: var(--pdf-teal) !important; }
.spec-card:hover .spec-val { text-shadow: none !important; }
.spec-val small { color: var(--pdf-gold) !important; }
.spec-key { color: var(--pdf-ink-soft) !important; }
.spec-card:hover .spec-key { color: var(--pdf-teal) !important; }

/* ============================================================
   9. ACTUALITÉS — fond clair, cartes blanches
   ============================================================ */
.section-news { background: var(--pdf-ice) !important; }
.section-news .section-header h2 { color: var(--pdf-teal) !important; }
.news-card { background: #fff !important; border: 1px solid rgba(2,104,111,0.1) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.news-card:hover { border-color: rgba(2,104,111,0.3) !important; }
.news-date { color: var(--pdf-teal) !important; }
.news-title { color: var(--pdf-ink) !important; }
.news-title a:hover { color: var(--pdf-teal) !important; }
.news-excerpt { color: var(--pdf-ink-soft) !important; }

/* ============================================================
   10. PARTENAIRES — fond crème, titre sarcelle centré
   ============================================================ */
.section-partners { background: var(--pdf-cream) !important; }
.partners-title {
  color: var(--pdf-teal) !important;
  text-align: center;
  font-size: calc(clamp(34px, 5.5vw, 66px) * var(--pdf-title-scale)) !important;
}
.partners-header { text-align: center; }
.partners-block-label { color: var(--pdf-ink-soft) !important; opacity: 0.7; }
.partner-item { box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important; }

/* Bandeau CTA « Vivez l'aventure… » — bande photo sombre pleine largeur */
.partners-cta {
  position: relative;
  margin: clamp(40px,6vw,72px) calc(50% - 50vw) 0 !important;
  width: 100vw;
  padding: clamp(60px, 9vw, 120px) 24px !important;
  background:
    linear-gradient(rgba(8,14,16,0.55), rgba(8,14,16,0.65)),
    var(--cta-bg-image, none);
  background-size: cover;
  background-position: center 35%;
  overflow: hidden;
}
.partners-tagline-plain { color: #fff !important; }
.partners-tagline-highlight {
  color: #fff !important;
  background: var(--pdf-teal) !important;
}
.btn-partners-contact {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.75) !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  color: #fff !important;
}
.btn-partners-contact:hover {
  background: #fff !important;
  color: var(--pdf-teal) !important;
  border-color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   11. TRACKER / CARTOGRAPHIE
   ============================================================ */
.section-tracker { background: var(--pdf-ice) !important; }
.section-tracker h2 { color: var(--pdf-teal) !important; }
.live-badge { background: var(--pdf-teal) !important; color: #fff !important; }
.live-dot { background: var(--pdf-gold) !important; }

/* ============================================================
   12. PIED DE PAGE — sarcelle, en-têtes or, liens blancs
   ============================================================ */
.site-footer { background: var(--pdf-teal) !important; }
.footer-top { background: var(--pdf-teal); }
.footer-name { color: #fff !important; }
.footer-depart { color: rgba(255,255,255,0.8) !important; }
.footer-depart strong { color: #fff !important; }
.footer-hashtag { color: rgba(255,255,255,0.55) !important; }
.footer-social a, .footer-social-link { color: rgba(255,255,255,0.75) !important; }
.footer-social a:hover, .footer-social-link:hover { color: var(--pdf-gold) !important; }

.footer-nav-col h4,
.footer-nl-col .section-tag,
.footer-contact-col .section-tag {
  color: var(--pdf-gold) !important;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-nav-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 4px 0 !important;
  transition: color 0.2s, padding-left 0.2s;
}
.footer-nav-btn:hover { color: var(--pdf-gold) !important; padding-left: 6px !important; background: transparent !important; transform: none !important; }

.footer-nl-title, .footer-contact-title { color: #fff !important; }
.footer-nl-sub, .footer-contact-sub { color: rgba(255,255,255,0.8) !important; }

/* Champ newsletter du footer — pilule, submit or */
.footer-nl-group {
  background: #fff;
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
}
.footer-nl-input { background: transparent !important; color: var(--pdf-ink) !important; }
.footer-nl-input::placeholder { color: var(--pdf-ink-soft) !important; }
.footer-nl-btn {
  background: var(--pdf-gold) !important;
  color: var(--pdf-teal) !important;
  border-radius: 50% !important;
  width: 38px; height: 38px;
}
.footer-nl-privacy { color: rgba(255,255,255,0.55) !important; }

.footer-contact-btn,
.footer-email,
.footer-contact-col a { color: #fff !important; }
.footer-contact-btn:hover { color: var(--pdf-gold) !important; }

.footer-bottom { background: var(--pdf-teal-deep) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }
.footer-legal, .footer-credits { color: rgba(255,255,255,0.6) !important; }
.footer-legal a, .footer-credits a, .footer-calisto-link { color: rgba(255,255,255,0.85) !important; }
.footer-legal a:hover, .footer-credits a:hover, .footer-calisto-link:hover { color: var(--pdf-gold) !important; }

/* Sélecteur de langue du footer — pilule crème */
.footer-bottom-lang .lang-current { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
.footer-bottom-lang .lang-globe { filter: brightness(10) !important; }
.footer-bottom-lang .lang-chevron { color: rgba(255,255,255,0.7) !important; }

/* Logo footer lisible sur sarcelle */
.footer-logo-img { filter: brightness(0) invert(1); opacity: 0.95; }

/* ============================================================
   13. FLOTTANT RÉSEAUX SOCIAUX (colonne droite) — pastilles sarcelle
   ============================================================ */
.social-float-btn {
  color: var(--pdf-teal) !important;
}
.social-float-btn:hover { color: var(--pdf-gold) !important; }

/* ============================================================
   14. BOUTON RETOUR HAUT
   ============================================================ */
.scroll-top-btn {
  background: var(--pdf-teal) !important;
  color: #fff !important;
  border: none !important;
}
.scroll-top-btn:hover { background: var(--pdf-gold) !important; color: var(--pdf-teal) !important; }

/* ============================================================
   15. CORPS DE TEXTE — échelle réglable
   ============================================================ */
body { font-size: calc(16px * var(--pdf-body-scale)); }

/* ============================================================
   16. RESPONSIVE — la bande CTA reste pleine largeur proprement
   ============================================================ */
@media (max-width: 600px) {
  .partners-cta { padding: 56px 18px !important; }
}

/* ============================================================
   17. FINITIONS — icônes de boutons (Customizer), badges & email
   ============================================================ */

/* Icône générique injectée par rhum_btn_icon() : alignement dans les boutons */
.rhum-btn-icon { flex-shrink: 0; transition: transform 0.25s; }
.btn-hero-primary, .btn-skipper-cta, .btn-partners-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-hero-primary:hover .rhum-btn-icon,
.btn-skipper-cta:hover .rhum-btn-icon,
.btn-partners-contact:hover .rhum-btn-icon { transform: translateX(3px); }

/* Deuxième ligne du titre Expérience sur sa propre ligne (comme le modèle) */
.experience-title--outline { display: block; }

/* Wrapper du bouton skippeuse (sécurité de mise en page) */
.skipper-actions { margin-top: 0; }

/* Email de contact optionnel dans le pied de page */
.footer-contact-email { margin: 6px 0 14px; }
.footer-contact-email a {
  color: #fff !important;
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  transition: color 0.2s, border-color 0.2s;
}
.footer-contact-email a:hover { color: var(--pdf-gold) !important; border-color: var(--pdf-gold); }