/*
Theme Name: Aina Bauza Sailing Team
Theme URI: https://calistoconsulting.com
Author: Calisto Consulting
Author URI: https://www.calistoconsulting.com
Description: Thème WordPress pour la skippeuse Aina Bauza Roig — Route du Rhum 2026. Identité claire & sarcelle alignée sur la maquette, entièrement pilotable via le Customizer (ordre/visibilité des sections, couleurs, typographie, textes, liens, marges, fonds photo, logos) et multilingue ES/CA/EN/FR sans plugin.
Version: 4.0.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rhum-ocean
Tags: full-width, custom-logo, custom-colors, translation-ready, theme-options, featured-images
*/

/* ==========================================================================
   Base : CSS réécrit de zéro pour coller à la maquette (indexV3).
   Les valeurs clés sont exposées en variables CSS surchargées dynamiquement
   par le Customizer (voir inc/customizer-css.php). Aucun override empilé.
   ========================================================================== */

    /* ==========================================================================
     THEME : Aina Bauza Sailing Team — Route du Rhum 2026
     CSS réécrit de zéro pour coller à la maquette PDF (plus d'overrides empilés)
     ========================================================================== */

    :root {
      --c-teal: #02686f;
      --c-teal-dark: #014f55;
      --c-teal-deep: #0a3d42;
      /* fond photo / fallback */
      --c-gold: #f5c400;
      --c-cream: #faecb3;
      /* crème forte (partenaires) */
      --c-cream-soft: #f8f3e6;
      /* crème claire (experience) */
      --c-ice: #f3f9fb;
      --c-taupe: #a7a89a;
      /* manifeste / carte du monde */
      --c-white: #ffffff;
      --c-ink: #0a0e12;

      --font-display: 'Barlow Condensed', sans-serif;
      --font-body: 'DM Sans', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;

      --max-w: 1280px;
      --section-pad: clamp(60px, 8vw, 120px);

      /* --- Hooks Customizer (surchargés dynamiquement) --- */
      --title-scale: 1;
      --body-scale: 1;
      --fs-section-title: clamp(40px, 6vw, 80px);   /* taille UNIQUE des 6 grands titres de section */
      --fs-eyebrow: clamp(15px, 1.8vw, 20px);
      --footer-logo-gap: 28px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      background: var(--c-ink);
    }

    body {
      background: var(--c-ink);
      color: var(--c-white);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      background: none;
      border: none;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }

    ul {
      list-style: none;
    }

    .mono {
      font-family: var(--font-mono);
    }

    .container {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 clamp(20px, 4vw, 60px);
    }

    /* Sécurité responsive : les très grands titres « display » doivent pouvoir
       revenir à la ligne au lieu de déborder du cadre sur petits écrans. */
    .hero-title-first, .hero-title-last,
    .skipper-name-first, .skipper-name-last,
    .boat-title, .experience-title, .partners-title,
    .footer-nl-title {
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .section-tag {
      display: inline-block;
      font-family: var(--font-display);
      font-weight: 800;
      font-style: italic;
      font-size: var(--fs-eyebrow);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--c-gold);
      margin-bottom: 14px;
      line-height: 1.1;
    }

    /* Entrée douce, état final toujours visible (aucun JS requis) */
    .reveal {
      animation: fadeUp .7s ease both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        animation: none;
      }

      html {
        scroll-behavior: auto;
      }
    }

    /* ==========================================================================
     HEADER / NAV
     ========================================================================== */
    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      height: 88px;
      z-index: 1000;
      /* Tout en haut : gris foncé translucide + flou. saturate(0) supprime
         la couleur de l'arrière-plan (le hero teal ne « verdit » plus la barre). */
      background: rgba(20, 24, 28, 0.62);
      backdrop-filter: blur(10px) saturate(0);
      -webkit-backdrop-filter: blur(10px) saturate(0);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      /* Le passage gris -> teal se fait en douceur au défilement */
      transition: background-color .4s ease, border-color .4s ease;
      display: flex;
      align-items: center;
    }

    /* Au défilement : le fond passe à la couleur (teal) */
    .site-header.scrolled {
      background: rgba(1, 79, 85, 0.92);
      border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .nav-inner {
      position: relative;
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(20px, 4vw, 48px);
      gap: 24px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      margin-left: clamp(8px, 1.6vw, 28px);
    }

    .nav-logo-img {
      height: 54px;
      width: auto;
      object-fit: contain;
    }

    .nav-menu {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
    }

    .nav-links {
      display: flex;
      gap: 6px;
    }

    .nav-links a {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--c-white);
      padding: 8px 12px;
      position: relative;
      white-space: nowrap;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 2px;
      height: 2px;
      background: var(--c-gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease;
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 18px;
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.65);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      transition: all .25s;
      white-space: nowrap;
    }

    .nav-cta:hover {
      background: var(--c-white);
      color: var(--c-teal);
      border-color: var(--c-white);
    }

    .lang-switcher {
      position: relative;
    }

    .lang-current {
      background: var(--c-cream);
      color: var(--c-teal);
      font-size: 11px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .lang-globe {
      display: inline-flex;
      align-items: center;
      color: var(--c-teal);
    }

    .lang-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: #0d131a;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 8px;
      min-width: 150px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: all .2s ease;
    }

    .lang-switcher:hover .lang-dropdown,
    .lang-switcher:focus-within .lang-dropdown {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    .lang-dropdown a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      font-size: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .lang-dropdown li:last-child a {
      border-bottom: none;
    }

    .lang-dropdown a:hover {
      background: rgba(2, 104, 111, .35);
    }

    .lang-dropdown .lang-code {
      font-family: var(--font-mono);
      color: var(--c-gold);
      font-weight: 700;
    }

    .nav-burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 8px;
    }

    .nav-burger span {
      width: 22px;
      height: 2px;
      background: var(--c-white);
      border-radius: 2px;
    }

    /* Menu mobile (ouverture pure CSS via :target) */
    .mobile-menu {
      position: fixed;
      inset: 88px 0 auto 0;
      z-index: 999;
      background: var(--c-teal-dark);
      padding: 24px clamp(20px, 6vw, 40px) 32px;
      transform: translateY(-120%);
      transition: transform .35s ease;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      text-align: center;
    }

    .mobile-menu:target {
      transform: none;
    }

    .mobile-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-bottom: 18px;
    }

    .mobile-links a {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 26px;
      text-transform: uppercase;
      padding: 8px 0;
      color: #fff;
    }

    .mobile-lang {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .mobile-lang-btn {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 999px;
    }

    .mobile-lang-btn.active {
      background: var(--c-gold);
      color: var(--c-teal);
      border-color: var(--c-gold);
    }

    .mobile-close {
      position: absolute;
      top: 16px;
      right: 20px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--c-gold);
    }

    /* ==========================================================================
     MODALE « Nous soutenir » (ouverture pure CSS via :target)
     ========================================================================== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(4, 6, 10, 0.9);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .modal-overlay:target {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-box {
      position: relative;
      background: #0d131a;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 14px;
      width: 100%;
      max-width: 860px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    }

    .modal-inner-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      min-height: 520px;
    }

    .modal-form-col {
      padding: clamp(28px, 4vw, 44px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 10;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9aa3ab;
      transition: all .2s;
    }

    .modal-close:hover {
      color: #fff;
      border-color: #fff;
    }

    .modal-logo {
      height: 46px;
      width: auto;
      margin-bottom: 14px;
    }

    .modal-header h2 {
      font-family: var(--font-display);
      font-size: 34px;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
    }

    .modal-subtitle {
      font-size: 13px;
      color: #9aa3ab;
      margin: 10px 0 22px;
    }

    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-group--full {
      grid-column: 1 / -1;
    }

    .form-group label {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      color: var(--c-gold);
      letter-spacing: 0.05em;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 6px;
      padding: 11px 14px;
      color: #fff;
      font-family: inherit;
      font-size: 14px;
      outline: none;
      transition: border-color .2s;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--c-teal);
    }

    .form-group select option {
      color: #000;
    }

    .form-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 6px;
    }

    .form-privacy {
      font-size: 11px;
      color: #707880;
      max-width: 60%;
    }

    .btn-form-submit {
      background: var(--c-teal);
      color: #fff;
      padding: 12px 22px;
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background .2s;
      white-space: nowrap;
    }

    .btn-form-submit:hover {
      background: var(--c-teal-dark);
    }

    .modal-photo-col {
      position: relative;
      background: var(--c-teal-deep);
    }

    .modal-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .modal-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--c-ink) 0%, transparent 70%);
    }

    .modal-photo-caption {
      position: absolute;
      bottom: 26px;
      left: 26px;
    }

    .modal-photo-name {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .modal-photo-tag {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--c-gold);
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* ==========================================================================
     HERO
     ========================================================================== */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: flex-end;
      padding-top: 88px;
      padding-bottom: clamp(56px, 11vh, 110px);
      overflow: hidden;
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(135deg, #0a0e12, #11181d);
    }

    .hero-fallback-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 28%;
      filter: grayscale(15%);
    }

    .hero-overlay-bottom {
      position: absolute;
      inset: auto 0 0 0;
      height: 55%;
      background: linear-gradient(to top, var(--c-ink), transparent);
    }

    .hero-overlay-left {
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(5, 7, 10, .78) 0%, rgba(5, 7, 10, .25) 45%, transparent 70%);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 0 clamp(20px, 4vw, 44px) 0 clamp(8px, 1.5vw, 18px);
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      /* Décalage gauche : présent sur desktop, mais qui se réduit à ~0 sur
         mobile (4vw) pour éviter que le hero soit poussé hors du cadre. */
      margin-left: clamp(0rem, 4vw, 4rem);
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(56px, 9.5vw, 130px);
      font-weight: 900;
      line-height: 0.92;
      text-transform: uppercase;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .hero-title-first {
      color: var(--c-white);
      display: inline-block;
    }

    .hero-title-last {
      color: var(--c-white);
      background: var(--c-teal);
      padding: 0 .18em;
      display: inline-block;
      margin-top: .04em;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .hero-race-inline {
      font-family: var(--font-display);
      font-size: clamp(15px, 1.9vw, 22px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .02em;
      margin-top: 26px;
      color: #f1eee6;
    }

    .hero-tagline-route {
      font-family: var(--font-mono);
      color: #aeb6bd;
      font-size: 13px;
      letter-spacing: .05em;
      margin-top: 6px;
    }

    .btn-hero-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 30px;
      padding: 14px 30px;
      border: 1.5px solid #fff;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      transition: all .25s;
    }

    .btn-hero-primary:hover {
      background: #fff;
      color: var(--c-teal);
    }

    /* ==========================================================================
     BANDEAU CHIFFRES CLÉS
     ========================================================================== */
    .section-stats {
      background: linear-gradient(to bottom, var(--c-taupe) 0%, var(--c-cream) 78%);
      padding: 0 0 clamp(70px, 8vw, 110px);
      position: relative;
    }

    .stats-inner {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      max-width: var(--max-w);
      margin: clamp(-80px, -6vw, -48px) auto 0;
      padding: 0 clamp(20px, 4vw, 48px);
      gap: 20px;
      position: relative;
      z-index: 3;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: #fff;
      border-radius: 14px;
      padding: 28px 20px 24px;
      box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
      flex: 1 1 200px;
      min-width: 180px;
      max-width: 280px;
    }

    .stat-icon {
      color: rgba(2, 104, 111, .85);
      margin-bottom: 14px;
    }

    .stat-icon svg {
      width: 34px;
      height: 34px;
    }

    .stat-body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stat-num {
      font-family: var(--font-display);
      font-size: clamp(30px, 3.6vw, 46px);
      font-weight: 900;
      color: #fff;
      background: var(--c-teal);
      line-height: 1.05;
      padding: 0 .16em;
      display: inline-block;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .stat-unit {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--c-teal);
      text-transform: uppercase;
      margin-top: 10px;
      font-weight: 700;
    }

    .stat-unit--time {
      font-size: 14px;
    }

    .stat-label {
      font-size: 12px;
      color: rgba(10, 14, 18, .55);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-top: auto;
      padding-top: 14px;
    }

    .stat-divider {
      display: none;
    }

    /* ==========================================================================
     MANIFESTE (taupe + carte du monde)
     ========================================================================== */
    .section-manifesto {
      position: relative;
      background: var(--c-taupe);
      padding: clamp(84px, 11vw, 150px) clamp(20px, 5vw, 40px) clamp(100px, 12vw, 170px);
      text-align: center;
      overflow: hidden;
    }

    /* Dégradé de liaison : le haut du manifeste reprend la teinte sombre du hero
       puis se fond vers le taupe — supprime la cassure brute de couleur. */
    .section-manifesto::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 160px;
      background: linear-gradient(to bottom, var(--c-ink) 0%, rgba(10, 14, 18, 0) 100%);
      opacity: .22;
      pointer-events: none;
      z-index: 1;
    }

    .manifesto-bg {
      position: absolute;
      inset: 0;
      opacity: 0.5;
      mix-blend-mode: multiply;
      /* La carte se fond en dégradé en haut ET en bas : plus de bord net entre
         la carte et les aplats de couleur (hero au-dessus, stats en dessous). */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 70%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 70%, transparent 100%);
    }

    .manifesto-map-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .manifesto-inner {
      position: relative;
      z-index: 2;
    }

    .manifesto-line {
      font-family: var(--font-display);
      font-size: var(--fs-section-title);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 0.94;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .manifesto-line--1 {
      color: #fff;
    }

    .manifesto-line--2 {
      color: transparent;
      -webkit-text-stroke: 2px #fff;
    }

    .manifesto-line--3 {
      color: var(--c-teal);
    }

    .manifesto-sub {
      font-family: var(--font-mono);
      color: var(--c-teal-dark);
      font-weight: 700;
      font-size: clamp(11px, 1.3vw, 14px);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-top: 22px;
    }

    /* ==========================================================================
     LA SKIPPEUSE
     ========================================================================== */
    .section-skipper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--c-teal);
    }

    .skipper-media {
      position: relative;
      background: var(--c-teal-deep);
      min-height: 460px;
    }

    .skipper-media::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to right, transparent 50%, var(--c-teal) 100%);
    }

    .skipper-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .skipper-content {
      padding: clamp(40px, 6vw, 84px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .skipper-name {
      display: flex;
      flex-direction: column;
      margin-bottom: 4px;
    }

    .skipper-name-first {
      font-family: var(--font-display);
      font-size: var(--fs-section-title);
      font-weight: 900;
      color: #fff;
      text-transform: uppercase;
      line-height: 0.9;
    }

    .skipper-name-last {
      font-family: var(--font-display);
      font-size: var(--fs-section-title);
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 2px #fff;
      text-transform: uppercase;
      line-height: 0.95;
    }

    .section-title-rule {
      width: 60px;
      height: 3px;
      background: var(--c-gold);
      margin: 22px 0;
    }

    .skipper-bio p {
      color: rgba(255, 255, 255, .92);
      font-size: clamp(15px, 1.15vw, 17px);
      max-width: 520px;
    }

    .btn-skipper-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 30px;
      align-self: flex-start;
      padding: 11px 22px;
      border: 1.5px solid rgba(255, 255, 255, .55);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      transition: all .25s;
    }

    .btn-skipper-cta:hover {
      background: #fff;
      color: var(--c-teal);
    }

    /* ==========================================================================
     EXPERIENCE (crème claire + timeline)
     ========================================================================== */
    .section-experience {
      background: var(--c-cream-soft);
      padding: var(--section-pad) 0;
    }

    .exp-header-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .experience-title {
      font-family: var(--font-display);
      font-size: var(--fs-section-title);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
    }

    .experience-title--fill {
      color: var(--c-teal);
    }

    .experience-title--outline {
      color: transparent;
      -webkit-text-stroke: 1.5px var(--c-teal);
    }

    .timeline-nav {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      width: auto;
      margin-top: 18px;
      background: var(--c-gold);
      border-radius: 999px;
      padding: 6px 8px;
    }

    .tl-btn {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--c-teal);
      border-radius: 50%;
      transition: background .2s;
    }

    .tl-btn:hover {
      background: rgba(0, 0, 0, .08);
    }

    .tl-btn:disabled {
      opacity: .4;
      cursor: default;
    }

    .tl-counter {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--c-teal);
      padding: 0 8px;
      white-space: nowrap;
    }

    .timeline {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(30px, 5vw, 70px);
      margin-top: 46px;
    }

    .timeline-year {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .timeline-year-num {
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 900;
      color: var(--c-teal);
      line-height: 1;
    }

    .tl-year-badge {
      border: 1.5px solid var(--c-teal);
      color: var(--c-teal);
      padding: 5px 14px;
      border-radius: 999px;
      font-family: var(--font-display);
      font-weight: 700;
      font-style: italic;
      font-size: 13px;
    }


    .timeline-items li {
      position: relative;
      padding-left: 20px;
      color: #3a4a4d;
      font-size: 15px;
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .timeline-items li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 9px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--c-gold);
    }

    .timeline-photo {
      width: 100%;
      height: clamp(180px, 26vw, 280px);
      object-fit: cover;
      border-radius: 14px;
      background: #dad6cb;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
      margin-top: 24px;
    }

    /* ==========================================================================
     LE BATEAU (teal + cartes specs blanches)
     ========================================================================== */
    .section-boat {
      display: grid;
      grid-template-columns: 5fr 7fr;
      background: var(--c-teal);
      border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .boat-media {
      position: relative;
      background: var(--c-teal-deep);
      min-height: 460px;
    }

    .boat-media::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to right, transparent 50%, var(--c-teal) 100%);
    }

    .boat-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .boat-content {
      padding: clamp(40px, 6vw, 84px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .boat-title {
      font-family: var(--font-display);
      font-size: var(--fs-section-title);
      font-weight: 900;
      color: #fff;
      text-transform: uppercase;
      line-height: 1;
    }

    .boat-class-label {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(15px, 1.6vw, 19px);
      color: rgba(255, 255, 255, .9);
      text-transform: uppercase;
      margin: 8px 0 32px;
      letter-spacing: .02em;
    }

    .spec-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 600px;
    }

    .spec-card {
      background: #fff;
      border-radius: 14px;
      padding: 18px 16px;
      min-height: 132px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
      transition: transform .25s ease;
    }

    .spec-card:hover {
      transform: translateY(-4px);
    }

    .spec-icon {
      color: var(--c-teal);
      opacity: .9;
    }

    .spec-icon svg {
      width: 22px;
      height: 22px;
    }

    .spec-val {
      font-family: var(--font-display);
      font-size: clamp(30px, 3vw, 40px);
      font-weight: 900;
      color: var(--c-teal);
      line-height: 1;
    }

    .spec-val small {
      font-size: .4em;
      color: var(--c-gold);
      font-weight: 800;
      margin-left: 2px;
    }

    .spec-key {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      color: #5a7176;
      letter-spacing: .05em;
    }

    /* ==========================================================================
     PARTENAIRES (crème) + BANNIÈRE CTA (photo sombre)
     ========================================================================== */
    .section-partners {
      background: var(--c-cream);
      padding: var(--section-pad) 0;
    }

    .partners-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .partners-title {
      font-family: var(--font-display);
      font-size: var(--fs-section-title);
      font-weight: 900;
      color: var(--c-teal);
      text-transform: uppercase;
      line-height: 1;
    }

    .partners-categories {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      max-width: 940px;
      margin: 0 auto;
    }

    .partner-cat--full {
      grid-column: 1 / -1;
    }

    .partner-cat-label {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--c-teal);
      text-align: center;
      margin-bottom: 18px;
      font-weight: 700;
    }

    .partner-cat-slots {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
    }

    .partner-item {
      flex: 1 1 200px;
      max-width: 320px;
      min-height: 120px;
      background: rgba(255, 255, 255, .6);
      border: 1.5px dashed rgba(2, 104, 111, .4);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-style: italic;
      text-transform: uppercase;
      color: rgba(2, 104, 111, .65);
      letter-spacing: .03em;
    }

    .partner-cat--full .partner-item {
      max-width: 380px;
    }

    .section-cta-banner {
      position: relative;
      padding: clamp(70px, 10vw, 130px) 0;
      text-align: center;
      background: var(--c-ink);
      overflow: hidden;
    }

    .cta-banner-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(135deg, #0a1417, #0f2a2e);
    }

    .cta-banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cta-banner-overlay {
      position: absolute;
      inset: 0;
      background: rgba(6, 10, 12, .6);
    }

    .cta-banner-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      padding: 0 20px;
    }

    .cta-banner-tagline {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .cta-tag-plain {
      font-family: var(--font-display);
      font-size: clamp(20px, 3vw, 30px);
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
    }

    .cta-tag-highlight {
      font-family: var(--font-display);
      font-size: var(--fs-section-title);
      font-weight: 900;
      line-height: 1.04;
      color: #fff;
      background: var(--c-teal);
      padding: 4px 18px;
      text-transform: uppercase;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .btn-cta-banner {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 28px;
      border: 1.5px solid #fff;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      transition: all .25s;
    }

    .btn-cta-banner:hover {
      background: #fff;
      color: var(--c-teal);
    }

    /* ==========================================================================
     FOOTER (teal)
     ========================================================================== */
    .site-footer {
      background: var(--c-teal);
      color: var(--c-cream);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1.3fr 1.2fr;
      gap: 48px;
      padding: 64px 0 48px;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      /* Plus d'air à droite de la colonne logo (demande client) */
      padding-right: var(--footer-logo-gap);
    }

    .footer-name {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 900;
      color: #fff;
    }

    .footer-logo {
      height: 100px;
      width: auto;
      margin: 0 auto 16px;
    }

    .footer-depart {
      font-size: 13px;
      color: rgba(255, 255, 255, .85);
      margin-top: 4px;
    }

    .footer-hashtag {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--c-gold);
      margin-top: 10px;
    }

    .footer-social {
      display: flex;
      gap: 10px;
      margin-top: 18px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .footer-social a {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: all .2s;
    }

    .footer-social a:hover {
      background: var(--c-gold);
      color: var(--c-teal);
      border-color: var(--c-gold);
    }

    .footer-col-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-style: italic;
      text-transform: uppercase;
      color: var(--c-gold);
      font-size: 17px;
      margin-bottom: 16px;
    }

    .footer-links li {
      margin-bottom: 8px;
    }

    .footer-nav-btn {
      font-family: var(--font-mono);
      font-size: 12px;
      text-transform: uppercase;
      color: #fff;
      transition: color .2s;
    }

    .footer-nav-btn:hover {
      color: var(--c-gold);
    }

    .footer-contact-block {
      margin-bottom: 18px;
    }

    .footer-contact-block p {
      font-family: var(--font-display);
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .footer-contact-block a {
      display: block;
      font-size: 13px;
      color: rgba(255, 255, 255, .85);
      line-height: 1.6;
    }

    .footer-contact-block a:hover {
      color: var(--c-gold);
    }

    .footer-nl-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 900;
      color: #fff;
      text-transform: uppercase;
      line-height: .95;
      margin-bottom: 12px;
    }

    .footer-nl-text {
      font-size: 12px;
      color: rgba(255, 255, 255, .8);
      text-transform: uppercase;
      margin-bottom: 14px;
      max-width: 240px;
    }

    .footer-nl-group {
      background: #fff;
      border-radius: 999px;
      padding: 4px 4px 4px 16px;
      display: flex;
      align-items: center;
      max-width: 280px;
    }

    .footer-nl-input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 14px;
      color: var(--c-ink);
      background: transparent;
    }

    .footer-nl-btn {
      background: var(--c-gold);
      color: var(--c-teal);
      width: 36px;
      height: 36px;
      min-width: 36px;
      border-radius: 50%;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding: 18px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 12px;
      color: rgba(255, 255, 255, .7);
    }

    .footer-bottom a {
      color: rgba(255, 255, 255, .7);
    }

    .footer-bottom a:hover {
      color: var(--c-gold);
    }

    /* Zone gauche : pastille langue */
    .footer-bottom-left {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      flex: 0 0 auto;
    }

    /* Copyright CENTRÉ entre la pastille langue et les liens légaux (demande client) */
    .footer-copyright {
      flex: 1 1 auto;
      text-align: center;
      min-width: 220px;
    }

    .footer-legal {
      display: flex;
      gap: 14px;
      flex: 0 0 auto;
    }

    /* Pastille « FR ▾ » : fond + border-radius (demande client) */
    .footer-lang {
      position: relative;
    }

    .footer-lang-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--c-cream);
      color: var(--c-teal);
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 11px;
      padding: 7px 13px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .2s, color .2s;
    }

    .footer-lang-pill:hover {
      background: var(--c-gold);
    }

    .footer-lang-pill .lang-globe {
      display: inline-flex;
      align-items: center;
    }

    /* Dropdown du sélecteur footer (réutilise le style du header, ouverture vers le haut) */
    .footer-lang .lang-dropdown {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      background: #0d131a;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 8px;
      min-width: 150px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: all .2s ease;
      z-index: 20;
    }

    .footer-lang:hover .lang-dropdown,
    .footer-lang:focus-within .lang-dropdown {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    /* Responsive : bas de footer empilé et centré */
    /* --- Panneau social flottant --- */
    .social-float {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 990;
      display: flex;
      flex-direction: column;
      box-shadow: -4px 0 16px rgba(0, 0, 0, .2);
    }

    .social-float-btn {
      width: 44px;
      height: 44px;
      background: var(--c-teal);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      transition: all .2s;
    }

    .social-float-btn:last-child {
      border-bottom: none;
    }

    .social-float-btn:hover {
      background: var(--c-gold);
      color: var(--c-teal);
    }

    /* ==========================================================================
     RESPONSIVE
     ========================================================================== */
    @media (max-width: 1240px) {
      .nav-menu {
        display: none;
      }

      .nav-burger {
        display: flex;
      }

      /* Pied de page en tablette : marque en bandeau centré, puis 3 colonnes */
      .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 32px;
      }

      .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
      }
    }

    @media (max-width: 820px) {
      .modal-inner-grid {
        grid-template-columns: 1fr;
      }

      .modal-photo-col {
        min-height: 220px;
        order: -1;
      }

      .section-skipper,
      .section-boat {
        grid-template-columns: 1fr;
      }

      .skipper-media,
      .boat-media {
        min-height: 320px;
      }

      .skipper-media::after,
      .boat-media::after {
        background: linear-gradient(to bottom, transparent 55%, var(--c-teal) 100%);
      }

      .timeline,
      .spec-grid {
        grid-template-columns: 1fr;
      }

      .partners-categories {
        grid-template-columns: 1fr;
      }

      .stat-divider {
        display: none;
      }

      .stats-inner {
        gap: 28px;
      }

      .stat-item {
        min-width: 42%;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      /* Mobile : tout le contenu texte du pied de page centré */
      .footer-nav-col,
      .footer-contact-col,
      .footer-nl-col {
        text-align: center;
      }

      .footer-nl-text,
      .footer-nl-group {
        margin-left: auto;
        margin-right: auto;
      }

      .social-float {
        display: none;
      }

      .form-actions {
        flex-direction: column;
        align-items: flex-start;
      }

      .form-privacy {
        max-width: 100%;
      }
    }

    /* Téléphones étroits : placé APRÈS le bloc 820px pour que ces règles
       l'emportent dans la cascade (ordre source = priorité à specificité égale). */
    @media (max-width: 720px) {
      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
      .footer-copyright { min-width: 0; }
      .footer-brand { padding-right: 0; }
    }

    /* ==========================================================================
     PHOTOS DE FOND PAR SECTION (option Customizer)
     Une section .has-bg-photo affiche une image plein cadre + voile sombre,
     son contenu passe au-dessus. N'altère pas les sections sans photo.
     ========================================================================== */
    .section-skipper, .section-boat, .section-experience, .section-stats,
    .section-partners, .section-cta-banner, .section-manifesto {
      position: relative;
    }
    .section-bg-photo {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .section-bg-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .section-bg-photo .section-bg-overlay {
      position: absolute;
      inset: 0;
      background: var(--section-overlay, rgba(2, 104, 111, .55));
    }
    /* Quand une photo de fond est active, on remonte le contenu au-dessus */
    .has-bg-photo > .container,
    .has-bg-photo > .stats-inner,
    .has-bg-photo > .manifesto-inner,
    .has-bg-photo > .skipper-content,
    .has-bg-photo > .skipper-media,
    .has-bg-photo > .boat-content,
    .has-bg-photo > .boat-media,
    .has-bg-photo > .cta-banner-inner {
      position: relative;
      z-index: 2;
    }


/* ====================================================================
   AJOUT v4.0.0 — message de retour du formulaire de contact (AJAX/PHP)
   Bloc ajouté (aucune règle existante modifiée).
   ==================================================================== */
.form-feedback {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}
.form-feedback--ok {
  background: rgba(2, 104, 111, .1);
  color: var(--c-teal-dark);
  border: 1px solid rgba(2, 104, 111, .25);
}
.form-feedback--err {
  background: rgba(200, 60, 40, .08);
  color: #b23b25;
  border: 1px solid rgba(200, 60, 40, .25);
}

/* ====================================================================
   AJOUT v4.0.0 — timeline carrousel (8 années)
   Petites classes complémentaires (aucune règle existante modifiée).
   ==================================================================== */
.timeline-year-range {
  font-size: .55em;
  font-weight: 700;
  color: var(--c-taupe);
  letter-spacing: .01em;
}
.timeline-items li.tl-sub {
  padding-left: 30px;
  color: #5b6b6e;
  font-size: 14px;
  margin-top: -4px;
}
.timeline-items li.tl-sub::before {
  background: var(--c-taupe);
  width: 5px;
  height: 5px;
  left: 12px;
}