/* ============================================================
   EXTREME MARINE - Design system (maquette statique)
   Passerelle / Groupe JLG
   DA : dark nautique premium. Accent unique bleu vif #1E6FE0,
   pointe turquoise reservee aux gros titres. Sections
   alternees sombre / clair. Polices systeme (100% offline).
   Ce fichier est partage par toutes les pages (home + marques).
   ============================================================ */

:root {
  /* Fonds sombres */
  --ink:        #050B15;   /* quasi noir bleute */
  --navy-900:   #071324;
  --navy-850:   #0A1B30;
  --navy-800:   #0D2340;
  --navy-700:   #123256;

  /* Accent unique + pointe turquoise (titres seulement) */
  --blue:       #1E6FE0;   /* accent verrouille */
  --blue-bright:#3B86F0;
  --blue-deep:  #1657B8;
  --turquoise:  #34DCE6;   /* pointe, gros titres uniquement */
  --turquoise-soft:#7DEAF2;

  /* Clairs */
  --paper:      #F3F7FC;
  --paper-2:    #FFFFFF;
  --line-light: #E2E9F2;

  /* Texte */
  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255,255,255,0.62);
  --on-dark-faint:  rgba(255,255,255,0.34);
  --on-light:       #0A1A2E;
  --on-light-soft:  #56687D;

  --maxw: 1280px;
  --pad-x: clamp(20px, 5vw, 56px);

  --font-display: -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-body:    -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--on-light);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.full { width: 100%; }

/* Garde anti-debordement : les enfants de grille ne doivent jamais
   forcer une piste plus large que le viewport (sinon overflow-x). */
.stats-grid > *, .brands-grid > *, .bento > *, .svc-grid > *,
.reviews > *, .why-grid > *, .ranges > *, .stock-grid > *,
.brand-cards > *, .boat-grid > *, .form-grid > *,
.contact-cols > *, .svc-detail > *, .filters > * { min-width: 0; }
.stats-grid > * { overflow-wrap: anywhere; word-break: break-word; }

/* Titres */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.5px;
  font-stretch: condensed;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  font-size: 12px;
}
.turq { color: var(--turquoise); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 13px;
  padding: 15px 30px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(30,111,224,0.7);
}
.btn-primary:hover {
  background: var(--blue-bright);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(30,111,224,0.85);
}
.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.14);
  color: #fff !important;              /* Kadence force sa couleur de lien au survol : on garde le blanc lisible */
  transform: translateY(-2px);
}
.btn-outline-dark {
  background: transparent;
  color: var(--on-light);
  border-color: rgba(10,26,46,0.2);
}
.btn-outline-dark:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.btn-lg { padding: 18px 38px; font-size: 14px; }

/* ============================================================
   NAVBAR (sombre, sticky) - partial commun
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(3, 8, 16, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  position: relative;
  z-index: 2;
  align-self: stretch;                 /* drapeau pleine hauteur de la barre */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  justify-content: center;             /* logo centre dans le drapeau */
  background: #fff;                     /* drapeau blanc */
  /* bandeau compact colle au bord gauche de l'ecran, logo centre dedans */
  margin-left: calc(-1 * (max(0px, (100vw - var(--maxw)) / 2) + var(--pad-x)));
  padding-left: 52px;
  padding-right: 60px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);  /* decoupe diagonale a droite */
}
.nav-logo .mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
}
.nav-logo .word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 18px;
  color: #fff;
  line-height: 1;
}
.nav-logo .word b { color: var(--turquoise); font-weight: 800; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;                            /* neutralise la marge UA de <ul> qui decentrait les liens vers le haut */
  padding: 0;
}
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--blue);
  transition: width 0.25s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Numero de telephone dans le header (click-to-call, DA navy/turquoise) */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #fff;
  padding: 9px 14px;
  border: 1px solid rgba(52, 220, 230, 0.38);
  border-radius: 10px;
  background: rgba(52, 220, 230, 0.08);
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.nav-phone:hover {
  border-color: var(--turquoise);
  background: rgba(52, 220, 230, 0.16);
}
.nav-phone svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--turquoise); }
.nav-phone-num { line-height: 1; }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(52, 220, 230, 0.32);
  border-radius: 11px;
  background: rgba(52, 220, 230, 0.08);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger:hover,
.nav-burger:focus-visible { border-color: var(--turquoise); background: rgba(52, 220, 230, 0.16); }
.nav-burger-box {
  position: relative;
  display: block;
  width: 22px; height: 15px;
}
.nav-burger-bar {
  position: absolute;
  left: 0;
  width: 100%; height: 2.2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, background 0.2s;
}
.nav-burger-bar:nth-child(1) { top: 0; }
.nav-burger-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-burger-bar:nth-child(3) { bottom: 0; }
.nav-burger:hover .nav-burger-bar,
.nav-burger:focus-visible .nav-burger-bar { background: var(--turquoise); }
/* Morph en croix quand le drawer est ouvert */
body.em-drawer-open .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.em-drawer-open .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
body.em-drawer-open .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ============================================================
   MEGA MENU « Nos marques » (desktop, pleine largeur)
   Recree l'ambiance de la section marques de l'accueil :
   plaque navy, pastilles blanches + logos couleur, rangees par
   univers (Bateaux | Jet-ski | Tout-terrain). Les moteurs
   (sans page dediee) n'y figurent pas. S'ouvre au survol
   (CSS pur) ; le JS ajoute le tactile / Echap / clic exterieur.
   Masque < 941px (la barre passe au burger + drawer).
   ============================================================ */
.nav-mega-item { position: static; }        /* le panneau s'ancre sur .nav (sticky = bloc conteneur) */

.nav-mega-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-mega-caret {
  width: 14px; height: 14px;
  opacity: 0.75;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-mega-item:hover .nav-mega-caret,
.nav-mega-item:focus-within .nav-mega-caret,
.nav-mega-item.is-open .nav-mega-caret { transform: rotate(180deg); opacity: 1; }

.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--ink) 100%);
  border-top: 1px solid rgba(52, 220, 230, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
}
.nav-mega-item:hover .nav-mega,
.nav-mega-item:focus-within .nav-mega,
.nav-mega-item.is-open .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.nav-mega-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 2.6vw, 34px) var(--pad-x) clamp(20px, 2.2vw, 28px);
}

/* rangee horizontale : Jet-ski | rule | Tout-terrain | rule | Bateaux */
.nmega-groups {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 2.4vw, 36px);
}
.nmega-col--boats { flex: 1 1 auto; min-width: 0; }
.nmega-col--solo  { flex: 0 0 clamp(200px, 18vw, 250px); display: flex; flex-direction: column; }
.nmega-rule {
  flex: 0 0 1px; align-self: stretch;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.28) 0 2px, transparent 2px 7px);
}

/* titre d'univers centre, encadre de deux traits pointilles (comme l'accueil) */
.nmega-cap {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.4px; font-size: 11.5px;
  color: var(--turquoise-soft);
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.nmega-cap::before, .nmega-cap::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 54px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.32) 0 2px, transparent 2px 7px);
}

/* pastilles = chip blanche + logo couleur */
.nmega-tiles--boats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nmega-tiles--solo  { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.nmega-tiles--solo .nmega-tile { width: 100%; }

.nmega-tile { display: block; text-decoration: none; transition: transform 0.22s ease; }
.nmega-tile:hover { transform: translateY(-3px); }
.nmega-chip {
  background: #fff; border-radius: 12px;
  min-height: 78px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -20px rgba(0,0,0,0.8);
  transition: box-shadow 0.22s ease;
}
.nmega-tile:hover .nmega-chip { box-shadow: 0 20px 38px -20px rgba(0,0,0,0.9); }
.nmega-col--solo .nmega-chip { min-height: 104px; }
.nmega-chip img { height: 42px; width: auto; max-width: 100%; object-fit: contain; }
.nmega-chip img[src*="c-bowen"] { height: 54px; }
.nmega-col--solo .nmega-chip img { height: 52px; }

/* lien vers la page complete (inclut les moteurs) */
.nmega-foot {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(16px, 1.8vw, 22px);
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; font-size: 12px;
  color: var(--turquoise-soft);
  text-decoration: none;
}
.nmega-foot svg { width: 16px; height: 16px; transition: transform 0.22s ease; }
.nmega-foot:hover svg { transform: translateX(4px); }

@media (max-width: 940px) { .nav-mega { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-mega { transition: opacity 0.15s linear, visibility 0s; transform: none; }
  .nav-mega-item:hover .nav-mega,
  .nav-mega-item:focus-within .nav-mega,
  .nav-mega-item.is-open .nav-mega { transform: none; }
}

/* ============================================================
   SECTIONS génériques
   ============================================================ */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-dark  { background: var(--navy-900); color: #fff; }
.section-light { background: var(--paper); color: var(--on-light); }

.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .eyebrow { color: var(--blue-deep); margin-bottom: 7px; }
.section-dark .section-head .eyebrow { color: var(--turquoise); }

/* --- Lisibilite des titres sur fond sombre ---
   Kadence applique sa couleur de titre par defaut (#1A202C, anthracite)
   DIRECTEMENT sur les elements h1/h2/h3 ; cette regle sur l'element bat le
   `color:#fff` herite du conteneur. Tout titre que le design system ne
   recolore pas explicitement retombe donc en anthracite -> invisible s'il
   vit sur un fond sombre. On reancre la couleur au niveau du DS. --- */
.section-dark h2, .section-dark h3 { color: #fff; }
/* Pages marque (hero .brand-hero + encart CTA .hybrid, CSS scope LOCAL des
   blocs wp:html) : memes titres sans couleur -> anthracite Kadence invisible.
   L'inline local ne declare PAS `color`, donc ces regles DS (0,2,0) gagnent
   sans !important. `.brand-hero h1 .tq` (0,3,0) garde son turquoise. */
.brand-hero h1 { color: #fff; }
.hybrid h2 { color: #fff; }
.final h2 { color: #fff; } /* bandeau CTA final des pages marque (fond navy degrade) */

/* --- Resserrage sur-titre (kicker) -> titre, general sur tout le site.
       Le kicker doit sembler appartenir au gros titre en dessous. On neutralise
       aussi les marges inline (margin-bottom) posees sur les .eyebrow dans les
       blocs wp:html des pages, au niveau du design system partage. --- */
.page-hero .eyebrow,
.emm-hero .eyebrow { margin-bottom: 7px !important; }
.section-head h2,
.page-hero h1,
.emm-hero h1 { margin-top: 0; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.5px;
  font-stretch: condensed;
  font-size: clamp(34px, 5.5vw, 62px);
  color: inherit;
}
.section-head.row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.head-link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12.5px;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s;
}
.head-link:hover { gap: 13px; }

/* ============================================================
   FOOTER - partial commun
   ============================================================ */
.footer {
  background: var(--ink);
  color: #fff;
  padding: clamp(56px, 8vw, 88px) 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 24px;
  color: #fff;
  margin-bottom: 18px;
  display: inline-block;
}
.footer-brand .word b { color: var(--turquoise); }
.footer-brand p {
  color: var(--on-dark-soft);
  font-size: 14.5px;
  max-width: 320px;
  line-height: 1.7;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--turquoise);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
.footer-col address {
  font-style: normal;
  color: var(--on-dark-soft);
  font-size: 14px;
  line-height: 1.8;
}
.footer-col address a { color: var(--turquoise-soft); text-decoration: none; }
.footer-hours { margin-top: 20px; }
.footer-hours .fh-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 11px;
  color: var(--turquoise-soft);
  display: block;
  margin-bottom: 10px;
}
.footer-hours .fh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-hours .fh-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  color: var(--on-dark-soft);
  line-height: 1.4;
}
.footer-hours .fh-list b { color: #fff; font-weight: 600; white-space: nowrap; }
.footer-hours .fh-list .fh-closed { color: var(--on-dark-faint); font-weight: 600; }
.footer-bottom {
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-bottom p { color: var(--on-dark-faint); font-size: 13px; }
.footer-bottom .grp {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  color: var(--on-dark-faint);
}
.footer-bottom .grp b { color: var(--on-dark-soft); font-weight: 700; }

/* Mention discrete "Propulse par Passerelle" (barre basse du footer) */
.footer-bottom .powered { color: var(--on-dark-soft); text-decoration: none; }
.footer-bottom .powered:hover { color: #fff; }

/* ---------- Footer court MOBILE uniquement (<=768px) ----------
   Masque par defaut ; affiche a la place de .footer-grid + .footer-bottom
   sur mobile. Nav et contact detailles vivent deja dans le drawer. */
.footer-mobile { display: none; }
.footer-mobile .footer-m-logo {
  height: 40px; width: auto; object-fit: contain; margin-bottom: 4px;
}
.footer-mobile .footer-m-phone {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: 0.5px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(52,220,230,0.35);
  background: rgba(52,220,230,0.08);
}
.footer-mobile .footer-m-phone-ico {
  display: inline-flex; color: var(--turquoise);
}
.footer-mobile .footer-m-phone-ico svg { width: 18px; height: 18px; display: block; }
.footer-mobile .footer-m-addr {
  color: var(--on-dark-soft); font-size: 14px; line-height: 1.5; margin: 0;
}
.footer-mobile .footer-m-hours {
  color: var(--on-dark-faint); font-size: 12.5px; line-height: 1.5; margin: 0;
}
.footer-mobile .footer-m-legal {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.footer-mobile .footer-m-legal a {
  color: var(--on-dark-soft); text-decoration: none; font-size: 13px;
}
.footer-mobile .footer-m-legal a:hover { color: #fff; }
.footer-mobile .footer-m-sep { color: var(--on-dark-faint); }
.footer-mobile .footer-m-credit {
  color: var(--on-dark-faint); font-size: 11.5px; line-height: 1.7;
  letter-spacing: 0.3px; margin: 0; text-transform: uppercase;
}
.footer-mobile .footer-m-credit .powered { color: var(--on-dark-soft); text-decoration: none; }
.footer-mobile .footer-m-credit .powered:hover { color: #fff; }
.footer-mobile .footer-m-credit b { color: var(--on-dark-soft); font-weight: 700; }

@media (max-width: 768px) {
  .footer { padding-top: 40px; }
  .footer-grid,
  .footer-bottom { display: none !important; }
  .footer-mobile {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 14px; padding: 8px 0 34px;
  }
}

/* ---------- Vrai logo XtreMarine dans le chrome (nav + footer) ---------- */
.nav-logo-img {
  height: 54px; width: auto; display: block;
  object-fit: contain;
}
.footer-logo-img {
  height: 44px; width: auto; display: block;
  margin-bottom: 18px;
  object-fit: contain;
}
@media (max-width: 560px) {
  .nav-logo-img { height: 34px; }
  .footer-logo-img { height: 40px; }
  /* Drapeau compacte sur mobile : laisse de la place au numero + burger. */
  .nav-logo { padding-left: 20px; padding-right: 36px; }
}

/* ============================================================
   RESPONSIVE (mobile-first via overrides)
   ============================================================ */
@media (max-width: 940px) {
  .nav-links,
  .nav-right .btn { display: none; }
  .nav-burger { display: inline-flex; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   DRAWER DE NAVIGATION MOBILE (structure facon Mr Rayonnage,
   couleurs Extreme Marine : navy + turquoise)
   Le panneau glisse depuis la droite ; visible seulement
   quand JS l'ouvre (body.em-drawer-open).
   ============================================================ */
.em-drawer,
.em-drawer-overlay { display: none; }

@media (max-width: 940px) {
  .em-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(3, 8, 16, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .em-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
  /* Ferme = totalement inerte (l'attribut hidden doit gagner sur display:block) */
  .em-drawer-overlay[hidden] { display: none; }

  .em-drawer {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 999;
    width: min(88vw, 380px);
    max-width: 380px;
    background: var(--navy-900);
    box-shadow: -24px 0 60px -30px rgba(0,0,0,0.8);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.35s;
    -webkit-overflow-scrolling: touch;
  }
  .em-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }

  body.em-drawer-open { overflow: hidden; }

  .em-drawer-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    overflow-y: auto;
    background:
      radial-gradient(120% 55% at 100% 0%, rgba(52,220,230,0.10), transparent 60%),
      linear-gradient(180deg, var(--navy-850) 0%, var(--navy-900) 46%);
  }

  /* --- Rangee du haut : croix de fermeture + CTA --- */
  .em-drawer-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 18px;
  }
  .em-drawer-close {
    position: relative;
    flex-shrink: 0;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 11px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .em-drawer-close:hover,
  .em-drawer-close:focus-visible { border-color: var(--turquoise); background: rgba(52,220,230,0.12); }
  .em-drawer-close span {
    position: absolute;
    top: 50%; left: 50%;
    width: 19px; height: 2.2px;
    border-radius: 2px;
    background: #fff;
  }
  .em-drawer-close span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
  .em-drawer-close span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }

  .em-drawer-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13.5px;
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--blue-bright), var(--blue) 45%, var(--blue-deep));
    box-shadow: 0 12px 26px -12px rgba(30,111,224,0.7);
  }
  .em-drawer-cta:hover { filter: brightness(1.06); }

  /* --- Liste de navigation --- */
  .em-drawer-nav { padding: 4px 0 6px; }
  .em-dnav { list-style: none; margin: 0; padding: 0; }
  .em-dnav > li { border-top: 1px solid rgba(255,255,255,0.07); }
  .em-dnav > li:first-child { border-top: none; }
  .em-dnav a {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.2px;
    color: #fff;
    text-decoration: none;
    padding: 16px 22px;
    transition: color 0.18s, background 0.18s;
  }
  .em-dnav a:hover,
  .em-dnav a:focus-visible { color: var(--turquoise); background: rgba(52,220,230,0.06); }

  .em-dnav-row { display: flex; align-items: stretch; }
  .em-dnav-row a { flex: 1; }
  .em-dnav-toggle {
    flex-shrink: 0;
    width: 60px;
    padding: 0;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    color: var(--turquoise);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .em-dnav-toggle svg { width: 22px; height: 22px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
  .em-dnav-item-sub.is-open .em-dnav-toggle svg { transform: rotate(180deg); }

  .em-dnav-sub { list-style: none; margin: 0; padding: 2px 0 10px; background: rgba(0,0,0,0.22); }
  .em-dnav-sub a {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: none;
    color: rgba(255,255,255,0.74);
    padding: 11px 22px 11px 34px;
  }
  .em-dnav-sub li:first-child a { color: var(--turquoise-soft); font-weight: 700; }
  .em-dnav-sub a:hover,
  .em-dnav-sub a:focus-visible { color: #fff; background: rgba(52,220,230,0.07); }

  /* --- Bloc contact --- */
  .em-drawer-contact { padding: 20px 22px 8px; margin-top: auto; }
  .em-drawer-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11px;
    color: var(--turquoise);
    margin: 0 0 12px;
  }
  .em-drawer-phone {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    transition: border-color 0.2s, background 0.2s;
  }
  .em-drawer-phone:hover { border-color: rgba(52,220,230,0.4); background: rgba(52,220,230,0.06); }
  .em-drawer-phone-ico {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(52,220,230,0.12);
    color: var(--turquoise);
  }
  .em-drawer-phone-ico svg { width: 20px; height: 20px; }
  .em-drawer-phone-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
  .em-drawer-phone-txt small { font-size: 12.5px; color: rgba(255,255,255,0.55); }
  .em-drawer-phone-txt b { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: #fff; letter-spacing: 0.4px; }

  .em-drawer-contact-btn {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12.5px;
    color: #fff;
    text-decoration: none;
    padding: 13px 18px;
    border: 1px solid rgba(52,220,230,0.4);
    border-radius: 12px;
    background: transparent;
    transition: background 0.2s, border-color 0.2s;
  }
  .em-drawer-contact-btn:hover { background: rgba(52,220,230,0.12); border-color: var(--turquoise); }

  /* --- Pied du drawer --- */
  .em-drawer-foot { padding: 18px 22px 26px; text-align: center; }
  .em-drawer-rule {
    display: block;
    height: 1px;
    margin: 4px 0;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 5px, transparent 5px 11px);
  }
  .em-drawer-hours {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px 0;
    font-size: 13.5px;
    color: rgba(255,255,255,0.62);
  }
  .em-drawer-hours svg { width: 16px; height: 16px; color: var(--turquoise); flex-shrink: 0; }
  .em-drawer-logo { height: 46px; width: auto; margin: 18px auto 0; display: block; object-fit: contain; }
}

/* Reduced-motion : pas de glissement ni de morph, apparition instantanee */
@media (prefers-reduced-motion: reduce) {
  .em-drawer, .em-drawer-overlay,
  .nav-burger-bar, .em-dnav-toggle svg { transition: none !important; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .hero .btn, .cta-actions .btn { width: auto; }
  /* Vignettes bateau : le bouton partage la ligne avec le prix. En 100 % il
     ecrasait .boat-price (texte insecable) qui debordait sous le bouton. */
  .boat-foot .btn { width: auto; flex: 1 0 auto; }
  /* Le numero header reste visible sur mobile, compacte. */
  .nav-phone { padding: 8px 11px; font-size: 13.5px; gap: 6px; }
}
/* Ecrans etroits (<=430px) : le numero se replie sur l'icone cliquable seule
   pour laisser la marge au burger (evite tout debordement du bouton). */
@media (max-width: 430px) {
  .nav-phone-num { display: none; }
  .nav-phone { padding: 9px; }
}

/* ============================================================
   COMPOSANTS PARTAGES DES PAGES INTERNES
   (ajoutes pour hub marques, occasions, stock, services,
   a propos, contact, devis - meme DA, ne casse pas l'existant)
   ============================================================ */

/* ---------- Fil d'ariane (partage) ---------- */
.crumbs {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 11.5px; color: var(--on-dark-soft);
  margin-bottom: 24px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.crumbs a { color: var(--on-dark-soft); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span { color: var(--turquoise); }

/* ---------- Hero generique de page interne ---------- */
.page-hero {
  position: relative; color: #fff; overflow: hidden; background: var(--navy-900);
}
.page-hero-media {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 90% at 82% 20%, rgba(52,220,230,0.28) 0%, transparent 48%),
    radial-gradient(90% 80% at 12% 95%, rgba(30,111,224,0.36) 0%, transparent 55%),
    linear-gradient(155deg, #061224 0%, #0A2444 46%, #0E4C7A 78%, #0C6E8C 100%);
}
.page-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,11,21,0.82) 0%, rgba(5,11,21,0.35) 60%, transparent 100%);
}
.page-hero-inner {
  position: relative; z-index: 2;
  padding-top: clamp(48px,7vw,88px); padding-bottom: clamp(48px,7vw,80px);
}
.page-hero h1 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; line-height: 0.9; letter-spacing: 0.5px;
  font-size: clamp(40px, 7vw, 88px); margin-bottom: 18px;
  color: #fff; /* hero toujours sombre : sinon Kadence force l'anthracite (le mot hors .tq devient invisible) */
}
/* --- Accent bleu des titres : reflet lumineux « Animated Shiny Text » ---
   Port du meme effet que le hero d'accueil (.hero h1 .tq, defini en local
   dans accueil.html), remonte au design system pour TOUS les accents bleus
   de titres du site : .tqx (galerie, sections) + les heros de page
   (.page-hero h1 .tq) et de marque (.brand-hero h1 .tq, dont le CSS vit en
   local dans chaque bloc wp:html -> on gagne via !important, sans re-pousser
   les pages). Deux couches clippees au texte : une bande claire mobile
   PAR-DESSUS le degrade turquoise. Doux et lent, une passe puis pause.
   Le hero d'accueil garde sa definition locale identique (non touche). */
.tqx,
.page-hero h1 .tq,
.brand-hero h1 .tq {
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,0.92) 46%, rgba(230,255,255,0.98) 50%, rgba(255,255,255,0.92) 54%, transparent 66%),
    linear-gradient(120deg, var(--turquoise-soft), var(--turquoise) 55%, var(--blue-bright)) !important;
  background-size: 250% 100%, 100% 100% !important;
  background-position: 150% 0, 0 0 !important;   /* reflet hors-champ a droite au repos */
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  /* animation SANS !important : la regle globale prefers-reduced-motion
     (*{animation:none !important}) doit pouvoir la neutraliser proprement
     -> repli = degrade turquoise statique, reflet hors-champ, aucun clignotement. */
  animation: tq-shine 4.2s ease-in-out infinite;
}
@keyframes tq-shine {
  0%, 8%    { background-position: 150% 0, 0 0; }   /* attente, reflet a droite */
  42%, 100% { background-position: -55% 0, 0 0; }   /* balaye vers la gauche puis repos */
}
/* --- Lisibilite sur fond CLAIR ---
   Le degrade turquoise-clair du hero est calibre pour fond sombre ; sur une
   section claire (.section-light) il devient illisible. On bascule alors sur
   un degrade bleu soutenu (contrastes >= 3:1 sur .paper, seuil grand texte)
   et une bande de reflet moins blanche (evite l'effacement du texte au passage
   du glint). Defensif : aujourd'hui aucun accent de titre ne vit sur clair. */
.section-light .tqx,
.section-light .page-hero h1 .tq,
.section-light .brand-hero h1 .tq {
  background-image:
    linear-gradient(100deg, transparent 36%, rgba(255,255,255,0.55) 47%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.55) 53%, transparent 64%),
    linear-gradient(120deg, var(--blue-bright), var(--blue) 45%, var(--blue-deep) 100%) !important;
}
.page-hero .lead { max-width: 620px; color: var(--on-dark-soft); font-size: clamp(15px,1.5vw,18px); line-height: 1.75; margin-bottom: 30px; }
.page-hero .lead b { color: #fff; font-weight: 600; }
.page-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Cartes marque (hub /nos-marques/) ---------- */
.brand-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.brand-card {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: 30px 28px; min-height: 220px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff;
  background: linear-gradient(155deg, #071b33 0%, #0c3a63 60%, #1657b8 120%);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.brand-card:nth-child(4n+2) { background: linear-gradient(155deg, #05131f 0%, #0a2f52 60%, #0aa0b0 120%); }
.brand-card:nth-child(4n+3) { background: linear-gradient(155deg, #06131d 0%, #0a3b52 60%, #1e6fe0 120%); }
.brand-card:nth-child(4n+4) { background: linear-gradient(155deg, #071b33 0%, #0c3a63 55%, #0d6f8e 120%); }
.brand-card:hover { transform: translateY(-4px); border-color: rgba(52,220,230,0.4); box-shadow: 0 22px 50px -26px rgba(0,0,0,0.7); }
.brand-card .bc-tag { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 10.5px; color: var(--turquoise-soft); margin-bottom: auto; }
.brand-card h3 { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.5px; font-size: 26px; margin-bottom: 6px; color: #fff; /* carte navy : sinon titre anthracite Kadence invisible */ }
.brand-card p { color: var(--on-dark-soft); font-size: 13.5px; line-height: 1.55; }
.brand-card .bc-go { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 11.5px; color: var(--turquoise-soft); }
.brand-card .bc-go svg { width: 14px; height: 14px; }

/* ---------- Barre de filtres (visuelle, non fonctionnelle) ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  background: #fff; border: 1px solid var(--line-light);
  border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 10px 30px -26px rgba(10,26,46,0.5);
  margin-bottom: 36px;
}
.filter { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 150px; }
.filter label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 11px; color: var(--on-light-soft); }
.filter select,
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 14px; color: var(--on-light);
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: 8px; padding: 12px 14px; width: 100%;
}
.filter select:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: #fff;
}

/* ---------- Cartes bateau (occasions / stock neuf) ---------- */
.boat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.boat-card {
  background: #fff; border: 1px solid var(--line-light);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px -24px rgba(10,26,46,0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column;
}
.boat-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(10,26,46,0.55); }
.boat-visual {
  height: 200px; position: relative;
  background: linear-gradient(150deg, #0a2444 0%, #0e4c7a 60%, #0c6e8c 120%);
  display: flex; align-items: center; justify-content: center;
}
.boat-visual { overflow: hidden; }
.boat-visual span.boat-ph {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; font-size: 11px; color: rgba(255,255,255,0.6);
  position: relative; z-index: 1;
}
.boat-badge {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 10px; color: #fff;
  background: var(--blue); padding: 6px 12px; border-radius: 20px;
}
/* Bandeau d'etat de la vignette : 4 etiquettes, une couleur chacune.
   .occ reste defini pour l'ancien markup (aucune page ne l'emet plus). */
.boat-badge.occ,
.boat-badge.etq-occasion  { background: var(--turquoise); color: var(--on-light); }
.boat-badge.etq-neuf      { background: var(--blue); color: #fff; }
.boat-badge.etq-good-deal { background: linear-gradient(120deg,#ff8a1f,#ff5d1f); color: #fff; }
.boat-badge.etq-demo      { background: #6f4fd6; color: #fff; }
.boat-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.boat-body h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; font-size: 18px; color: var(--on-light); margin-bottom: 6px; }
.boat-year { font-size: 13px; color: var(--on-light-soft); margin-bottom: 16px; }
.boat-specs { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px; border-top: 1px solid var(--line-light); padding-top: 16px; }
.boat-spec { font-size: 12px; color: var(--on-light-soft); }
.boat-spec b { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; font-size: 13px; color: var(--on-light); }
.boat-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.boat-price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--blue); }

/* ---------- Points de reassurance ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 22px; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--on-light-soft); }
.trust-item svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }
.section-dark .trust-item { color: var(--on-dark-soft); }
.section-dark .trust-item svg { color: var(--turquoise); }

/* ---------- Bloc contact + carte ---------- */
.contact-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.info-list { display: flex; flex-direction: column; gap: 22px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(30,111,224,0.12), rgba(52,220,230,0.14));
  display: flex; align-items: center; justify-content: center; color: var(--blue);
}
.info-item h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; font-size: 14px; color: var(--on-light); margin-bottom: 5px; }
.info-item p, .info-item address { font-style: normal; color: var(--on-light-soft); font-size: 14.5px; line-height: 1.65; }
.info-item a { color: var(--blue); text-decoration: none; }
.map-ph {
  border-radius: 16px; overflow: hidden; min-height: 360px;
  position: relative; border: 1px solid var(--line-light);
  background: linear-gradient(150deg, #0a2444 0%, #0e4c7a 60%, #0c6e8c 120%);
  display: flex; align-items: center; justify-content: center;
}
.map-ph span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: rgba(255,255,255,0.6); }

/* ---------- Formulaires (contact, devis) ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line-light);
  border-radius: 20px; padding: clamp(26px,4vw,44px);
  box-shadow: 0 20px 60px -40px rgba(10,26,46,0.6);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 11.5px; color: var(--on-light); }
.field textarea { resize: vertical; min-height: 130px; }
.field .req { color: var(--blue); }
.form-note { font-size: 13px; color: var(--on-light-soft); margin-top: 16px; }

/* ---------- Services detailles ---------- */
.svc-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
.svc-detail + .svc-detail { margin-top: clamp(48px,7vw,80px); }
.svc-detail.rev .svc-detail-media { order: 2; }
.svc-detail-media {
  border-radius: 18px; min-height: 300px;
  background: linear-gradient(150deg, #071b33 0%, #0c3a63 60%, #1657b8 120%);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
}
.svc-detail-media span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: rgba(255,255,255,0.6); }
.svc-detail h2 { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.5px; font-size: clamp(26px,3.4vw,42px); margin-bottom: 16px; }
.svc-detail .kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: var(--blue); margin-bottom: 14px; }
.section-dark .svc-detail .kicker { color: var(--turquoise); }
.svc-detail p { color: inherit; opacity: 0.86; font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; }
.check-list svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.section-dark .check-list svg { color: var(--turquoise); }

/* ---------- Responsive des composants ajoutes ---------- */
@media (max-width: 940px) {
  .brand-cards { grid-template-columns: 1fr 1fr; }
  .boat-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
  .svc-detail { grid-template-columns: 1fr; }
  .svc-detail.rev .svc-detail-media { order: 0; }
}
@media (max-width: 560px) {
  .brand-cards { grid-template-columns: 1fr; }
  .boat-grid { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
  .filter { width: 100%; }
}

/* ============================================================
   IMAGES REELLES (maquette concrete) - ajout unique partage
   par toutes les pages. Ne modifie pas l'existant : les vraies
   photos se glissent en fond des conteneurs deja en place.
   ============================================================ */

/* photo de fond qui remplit un conteneur relatif (hero, bento,
   vignette bateau...). Le scrim et le contenu, plus loin dans le
   DOM, restent au-dessus. */
.media-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* les blocs media des pages internes (services, occasions, a propos)
   accueillent une vraie photo : on les rend relatifs + clippes. */
.svc-detail-media { position: relative; overflow: hidden; }
.svc-detail-media > span { position: relative; z-index: 1; }
.map-ph { position: relative; }
.map-ph > span { position: relative; z-index: 1; }

/* pastille blanche pour les logos de marque : tous sont sombres et
   concus pour un fond clair, on les pose sur blanc pour un rendu net
   sur les cartes navy. */
.brand-logo-chip {
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-bottom: 16px;
  align-self: flex-start;
}
.brand-logo-chip img { max-height: 32px; width: auto; display: block; }

/* mur de logos de la home : la vignette dark accueille une pastille
   blanche centree (meme conteneur, meme DA, juste le vrai logo). */
.brand-tile .brand-logo-chip { margin-bottom: 0; padding: 16px 20px; min-height: 0; }
.brand-tile .brand-logo-chip img { max-height: 34px; }

/* rangee "motorisation" du hub marques */
.motor-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.motor-tile {
  background: var(--navy-850);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 120px;
}
.motor-head {
  background: #fff; border-radius: 8px; padding: 10px 12px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; align-self: flex-start;
}
.motor-head img { max-height: 24px; width: auto; display: block; }
.motor-head.txt {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; font-size: 15px; color: #fff;
}
.motor-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.8px; font-size: 15px; color: #fff;
}
.motor-role { font-size: 12.5px; color: var(--on-dark-soft); line-height: 1.5; margin-top: auto; }

/* mention discrete "photo d'illustration" sur les vignettes catalogue */
.illus-note {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; font-size: 9px; color: #fff;
  background: rgba(5,11,21,0.6); border: 1px solid rgba(255,255,255,0.18);
  padding: 3px 8px; border-radius: 20px;
}

@media (max-width: 940px) {
  .motor-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .motor-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   OVERRIDES WORDPRESS / KADENCE (portage Passerelle)
   Neutralise le conteneur boxe de Kadence pour que les sections
   full-bleed de la maquette atteignent les bords de l'ecran.
   Cible uniquement les pages de contenu marquees .em-content-page.
   ============================================================ */
.em-content-page #inner-wrap,
.em-content-page #primary,
.em-content-page .content-area,
.em-content-page .content-container.site-container,
.em-content-page #main,
.em-content-page .content-wrap,
.em-content-page .entry-content.single-content,
.em-content-page .entry-content-wrap { max-width:none;width:100%;padding-left:0;padding-right:0;margin-left:0;margin-right:0; }
.em-content-page .single-entry.content-bg { background:transparent;box-shadow:none;border:0;padding:0; }
.em-content-page .entry-header,
.em-content-page .entry-hero-container-inner { display:none; }
.em-content-page .site-main { padding:0;margin:0; }
.em-content-page .entry-content > .wp-block-html { display:contents; }

/* Securite anti-contenu-invisible : toute section .reveal reste visible
   (pas de dependance JS pour afficher le contenu). */
.reveal { opacity:1 !important; transform:none !important; }

/* ============================================================
   FEATURE BATEAUX (plugin extrememarine-bateaux)
   Etats de carte (vendu, flash), fiche individuelle, etats vides.
   Le design de base (.boat-grid/.boat-card/.filters) est plus haut.
   ============================================================ */

/* ---- Badges additionnels sur la carte ---- */
.boat-flash {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 10px; color: var(--on-light);
  background: var(--turquoise); padding: 6px 12px; border-radius: 20px;
  box-shadow: 0 6px 16px -6px rgba(52,220,230,0.7);
}
.boat-sold {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 10px; color: #fff;
  background: #b3202a; padding: 6px 12px; border-radius: 20px;
}
.boat-card.is-vendu .boat-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(5,11,21,0.45);
}
.boat-card.is-vendu .boat-price { color: var(--on-light-soft); }

/* ---- Etats vides des grilles ---- */
.em-boats-none {
  background: #fff; border: 1px solid var(--line-light); border-radius: 16px;
  padding: clamp(28px,5vw,48px); text-align: center;
  box-shadow: 0 10px 30px -24px rgba(10,26,46,0.5);
}
.em-boats-none p { color: var(--on-light-soft); font-size: 15px; margin-bottom: 20px; max-width: 560px; margin-left: auto; margin-right: auto; }
.em-boats-empty { margin-top: 22px; color: var(--on-light-soft); font-size: 14px; }

/* ============================================================
   FICHE BATEAU (single-bateau.php)
   ============================================================ */
.boat-hero .page-hero-media { background: var(--navy-900); }
/* Fond photo : scrim plus dense et titre force en blanc (pas l'effet ghost
   sombre des heros maquette, ici le nom du bateau doit rester lisible). */
.boat-hero .page-hero-scrim {
  background: linear-gradient(90deg, rgba(5,11,21,0.86) 0%, rgba(5,11,21,0.52) 55%, rgba(5,11,21,0.28) 100%);
}
.boat-hero h1 {
  color: #fff; -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 20px rgba(5,11,21,0.55);
}
.boat-hero-facts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 26px; }
.boat-hero-price {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  font-size: clamp(26px,4vw,40px); color: #fff; line-height: 1;
}
.boat-hero-tag {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; font-size: 11px; padding: 7px 14px; border-radius: 20px;
  color: #fff; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22);
}
.boat-hero-tag.dispo-disponible { background: rgba(52,220,230,0.18); color: var(--turquoise-soft); border-color: rgba(52,220,230,0.4); }
.boat-hero-tag.dispo-reserve { background: rgba(240,180,40,0.18); color: #ffd479; border-color: rgba(240,180,40,0.4); }
.boat-hero-tag.dispo-vendu { background: rgba(179,32,42,0.28); color: #ffb3b8; border-color: rgba(179,32,42,0.5); }

/* Meme etiquette, reprise dans le hero de la fiche (sur photo, fond sombre). */
.boat-hero-etq {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; font-size: 11px; padding: 7px 14px; border-radius: 20px;
  color: #fff; background: var(--blue); border: 1px solid transparent;
}
.boat-hero-etq.etq-occasion  { background: var(--turquoise); color: var(--on-light); }
.boat-hero-etq.etq-good-deal { background: linear-gradient(120deg,#ff8a1f,#ff5d1f); }
.boat-hero-etq.etq-demo      { background: #6f4fd6; }

.boat-single-cols {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 44px; align-items: start;
}
.boat-single-cols > * { min-width: 0; }

.boat-gallery-main {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line-light);
  background: linear-gradient(150deg, #0a2444 0%, #0e4c7a 60%, #0c6e8c 120%);
  aspect-ratio: 16 / 10;
}
.boat-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boat-gallery-empty { display: flex; align-items: center; justify-content: center; }
.boat-gallery-empty span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: rgba(255,255,255,0.6); }
.boat-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.boat-gallery-thumb {
  width: 92px; height: 68px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; background: none; cursor: pointer;
}
.boat-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boat-gallery-thumb.is-active { border-color: var(--blue); }

.boat-single-h2 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.5px; font-size: clamp(22px,2.6vw,30px);
  color: var(--on-light); margin-bottom: 18px;
}
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.spec-table th, .spec-table td {
  text-align: left; padding: 12px 4px; border-bottom: 1px solid var(--line-light); font-size: 14.5px;
}
.spec-table th { color: var(--on-light-soft); font-weight: 500; width: 45%; }
.spec-table td { color: var(--on-light); font-family: var(--font-display); font-weight: 700; }
.boat-single-etat { color: var(--on-light-soft); font-size: 14px; margin-bottom: 20px; }
.full-btn { width: 100%; }

.boat-single-desc { margin-top: clamp(40px,6vw,64px); max-width: 820px; }
.boat-desc-text { color: var(--on-light-soft); font-size: 15.5px; line-height: 1.75; }
.boat-desc-text p { margin-bottom: 14px; }

.boat-cta-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.boat-cta-inner > * { min-width: 0; }
.boat-cta-inner h2 { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.5px; font-size: clamp(26px,3.4vw,42px); margin-bottom: 14px; }
.boat-cta-inner .kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: var(--turquoise); margin-bottom: 12px; }
.boat-cta-inner p { color: var(--on-dark-soft); font-size: 15px; line-height: 1.7; }
.boat-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }

@media (max-width: 940px) {
  .boat-single-cols { grid-template-columns: 1fr; gap: 32px; }
  .boat-cta-inner { grid-template-columns: 1fr; gap: 24px; }
  .boat-cta-actions { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   ESTIMATEUR DE REPRISE (plugin extrememarine-reprise)
   Reutilise la DA formulaire (.form-card, .form-grid, .field).
   Ajoute seulement : sous-titres de sections, honeypot, bloc
   d'honnetete et l'affichage de la fourchette de resultat.
   ============================================================ */
.emr-form-card .emr-legend {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.4px; font-size: 12.5px; color: var(--blue);
  margin: 26px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-light);
}
.emr-form-card .emr-legend:first-of-type { margin-top: 4px; }

/* honeypot : hors ecran, jamais visible ni focusable pour un humain */
.emr-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* mention d'honnetete (fourchette indicative, 48h) */
.emr-honesty {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(30,111,224,0.06); border: 1px solid rgba(30,111,224,0.18);
  border-radius: 12px; padding: 14px 16px; margin-top: 22px;
  font-size: 13.5px; line-height: 1.6; color: var(--on-light-soft);
}
.emr-honesty b { color: var(--on-light); font-weight: 700; }
.emr-honesty svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.emr-honesty-strong { background: rgba(30,111,224,0.08); margin-top: 24px; }

.emr-actions { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }
.emr-error {
  margin-top: 14px; color: #b0182b; font-size: 14px; font-weight: 600;
  background: rgba(176,24,43,0.07); border: 1px solid rgba(176,24,43,0.25);
  border-radius: 10px; padding: 12px 14px;
}

/* --- resultat : la fourchette --- */
.emr-result-card { text-align: left; }
.emr-range {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 4vw, 34px); flex-wrap: wrap;
  background: linear-gradient(150deg, #071b33 0%, #0c3a63 60%, #1657b8 120%);
  border-radius: 16px; padding: clamp(28px, 5vw, 44px) 24px;
  margin: 6px 0 4px;
}
.emr-range-val {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.5px;
  font-size: clamp(30px, 6vw, 52px); line-height: 1;
  color: #fff;
}
.emr-range-sep {
  font-family: var(--font-display); font-weight: 700; text-transform: none;
  letter-spacing: 1px; font-size: 15px; color: var(--turquoise-soft);
}
.emr-next { margin-top: 22px; }
.emr-next p { color: var(--on-light-soft); font-size: 15px; line-height: 1.7; }

@media (max-width: 560px) {
  .emr-actions .btn { width: 100%; }
  .emr-range { flex-direction: column; gap: 8px; }
}

/* ==================================================================
   BANDEAU REPRISE  (.reprise-band)  -- page Contact, CTA estimation
   ================================================================== */
.reprise-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--navy-850) 0%, var(--navy-700) 60%, var(--blue-deep) 128%);
  border-radius: 20px; padding: clamp(28px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.reprise-band::before {
  content: ""; position: absolute; top: -60%; right: -6%;
  width: 42%; height: 220%; background: rgba(52,220,230,0.08);
  transform: rotate(16deg); pointer-events: none;
}
.reprise-band-txt { position: relative; z-index: 1; max-width: 620px; }
.reprise-band-txt h2 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  font-size: clamp(24px, 3.4vw, 38px); color: var(--on-dark); margin: 0 0 10px;
}
.reprise-band-txt p { color: var(--on-dark-soft); font-size: 15.5px; line-height: 1.65; margin: 0; }
.reprise-band .btn { position: relative; z-index: 1; flex-shrink: 0; }
@media (max-width: 620px) {
  .reprise-band .btn { width: 100%; text-align: center; }
}

/* ==================================================================
   METEO MARINE  (.emm-*)  -- widget home + page /meteo-marine/
   Bulletin de conditions de navigation, consensus multi-modeles.
   ================================================================== */
.emm-widget .section-head.center,
.section-head.center { text-align: center; }
.section-head.center .eyebrow { display: block; }
.emm-sub { color: var(--on-light-soft); font-size: 15px; margin-top: 10px; }

.emm-card {
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-radius: 20px;
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: 0 18px 50px -30px rgba(10,26,46,0.55);
  max-width: 1040px; margin: 0 auto;
}

/* --- Verdict --- */
.emm-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  border-radius: 14px; padding: 16px 20px; margin-bottom: 22px;
  border: 1px solid var(--line-light);
}
.emm-verdict .emm-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.emm-verdict-badge { display: flex; align-items: center; gap: 10px; }
.emm-verdict-label {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.4px; font-size: clamp(17px, 2.4vw, 22px);
}
.emm-verdict-reason { color: var(--on-light-soft); font-size: 14px; margin: 0; }
.emm-verdict.is-go   { background: #ecf9f1; border-color: #b7e6c9; }
.emm-verdict.is-go .emm-dot { background: #1ca85a; }
.emm-verdict.is-go .emm-verdict-label { color: #147a41; }
.emm-verdict.is-warn { background: #fdf6e7; border-color: #f0dca6; }
.emm-verdict.is-warn .emm-dot { background: #e0a012; }
.emm-verdict.is-warn .emm-verdict-label { color: #a9760a; }
.emm-verdict.is-stop { background: #fdecec; border-color: #f2bcbc; }
.emm-verdict.is-stop .emm-dot { background: #d33636; }
.emm-verdict.is-stop .emm-verdict-label { color: #b02525; }

/* --- Tuiles --- */
.emm-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px;
}
.emm-tile {
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.emm-tile-k {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: 700; color: var(--on-light-soft);
}
.emm-tile-v {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  font-size: clamp(26px, 4vw, 34px); line-height: 1.05; color: var(--on-light);
}
.emm-tile-v small { font-size: 15px; font-weight: 600; color: var(--on-light-soft); }
.emm-tile-v.emm-na, .emm-na { color: #9aa7b5; font-size: 20px; }
.emm-tile-sub { font-size: 13.5px; color: var(--on-light-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.emm-tile-note { font-size: 13px; color: var(--on-light); font-weight: 600; }
.emm-tile-range { font-size: 12.5px; color: #a9760a; font-weight: 600; }
.emm-tile-link { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; margin-top: 2px; }
.emm-tile-link:hover { text-decoration: underline; }
.emm-arrow { display: inline-block; font-size: 15px; line-height: 1; color: var(--blue); }

.emm-conf {
  display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; align-self: flex-start;
}
.emm-conf.is-high { background: #e7f5ec; color: #147a41; }
.emm-conf.is-mid  { background: #fdf6e7; color: #a9760a; }
.emm-conf.is-low  { background: #eef1f5; color: #56687d; }

.emm-tide-list { display: flex; flex-direction: column; gap: 3px; }
.emm-tide-item { font-size: 13.5px; color: var(--on-light); }

.emm-tile-vig .emm-vig-label { font-size: 17px; }
.emm-vig-vert   .emm-vig-label { color: #147a41; }
.emm-vig-jaune  .emm-vig-label { color: #a9760a; }
.emm-vig-orange .emm-vig-label { color: #c25a12; }
.emm-vig-rouge  .emm-vig-label,
.emm-vig-gris   .emm-vig-label,
.emm-vig-violet .emm-vig-label { color: #b02525; }
.emm-vig-indisponible .emm-vig-label { color: var(--on-light-soft); font-size: 15px; }

/* --- Sources / transparence --- */
.emm-sources {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  font-size: 13px; color: var(--on-light-soft);
  border-top: 1px dashed var(--line-light); padding-top: 14px;
}
.emm-sources-lbl { font-weight: 700; color: var(--on-light); }
.emm-stale { color: #a9760a; font-weight: 600; }
.emm-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.emm-updated { font-size: 12.5px; color: var(--on-light-soft); }
.emm-down p { color: var(--on-light-soft); font-size: 15px; line-height: 1.7; margin: 0; }
.emm-down a { color: var(--blue); font-weight: 600; }

/* --- Page detaillee --- */
.emm-hero { background: linear-gradient(150deg, #071b33 0%, #0c3a63 62%, #1657b8 128%); min-height: 320px; }
.emm-hero h1 { color: var(--on-dark); } /* lisible sur fond sombre (pas de .tq ici) */
.emm-hero-sub { color: var(--on-dark-soft); font-size: 16px; line-height: 1.7; max-width: 720px; margin-top: 14px; }
.emm-h2 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  font-size: clamp(22px, 3.4vw, 30px); color: var(--on-light);
  margin: 44px 0 18px;
}
.emm-hours { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.emm-hour {
  flex: 0 0 auto; min-width: 84px; text-align: center;
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px;
}
.emm-hour-t { font-size: 13px; font-weight: 700; color: var(--on-light-soft); }
.emm-hour-w { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--on-light); }
.emm-hour-w small { font-size: 11px; font-weight: 600; color: var(--on-light-soft); margin-left: 2px; }
.emm-hour-d { font-size: 12.5px; color: var(--blue); font-weight: 700; }
.emm-hour-s { font-size: 12.5px; color: var(--on-light-soft); }

.emm-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.emm-day {
  border: 1px solid var(--line-light); border-radius: 14px; padding: 16px 18px;
  background: var(--paper-2); position: relative;
}
.emm-day-t { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; font-size: 18px; color: var(--on-light); }
.emm-day-dot { position: absolute; top: 18px; right: 18px; width: 12px; height: 12px; border-radius: 50%; }
.emm-day.is-go .emm-day-dot { background: #1ca85a; }
.emm-day.is-warn .emm-day-dot { background: #e0a012; }
.emm-day.is-stop .emm-day-dot { background: #d33636; }
.emm-day-facts { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 13.5px; color: var(--on-light-soft); }
.emm-day-facts span { display: flex; align-items: center; gap: 8px; }
.emm-fact-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.9; color: var(--blue); }

.emm-detail-intro, .emm-method { color: var(--on-light-soft); font-size: 14px; line-height: 1.7; max-width: 760px; }
.emm-method { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line-light); font-size: 13px; }
.emm-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.emm-detail-col h3 { font-size: 16px; color: var(--on-light); margin: 0 0 10px; }
.emm-detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.emm-detail-table th { text-align: left; font-weight: 600; color: var(--on-light-soft); padding: 7px 0; border-bottom: 1px solid var(--line-light); }
.emm-detail-table td { text-align: right; color: var(--on-light); padding: 7px 0; border-bottom: 1px solid var(--line-light); }
.emm-detail-table .emm-detail-cons th, .emm-detail-table .emm-detail-cons td { font-weight: 800; color: var(--blue); border-bottom: none; }

@media (max-width: 820px) {
  .emm-tiles { grid-template-columns: repeat(2, 1fr); }
  .emm-days { grid-template-columns: 1fr; }
  .emm-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .emm-tiles { grid-template-columns: 1fr; }
  .emm-cta .btn { width: 100%; }
}

/* ==================================================================
   METEO MARINE  --  interface "dashboard" (carte, compas, maree, graphe)
   ================================================================== */

/* ---- Carte interactive Windy ---- */
.emm-map {
  background: var(--paper-2); border: 1px solid var(--line-light);
  border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -20px rgba(9,26,46,0.4);
}
.emm-map-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.emm-map-tab {
  appearance: none; cursor: pointer; border: 1px solid var(--line-light);
  background: var(--paper); color: var(--on-light-soft);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; transition: all .15s ease;
  white-space: nowrap; flex: 0 0 auto;
}
.emm-map-tab:hover { color: var(--blue); border-color: #c3d6ef; }
.emm-map-tab.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.emm-map-frame { position: relative; width: 100%; padding-bottom: 56%; margin-top: 12px; }
.emm-map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.emm-map-note { font-size: 12.5px; color: var(--on-light-soft); padding: 12px 16px 14px; margin: 0; }

/* ---- Split compas / maree ---- */
.emm-split { display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px; margin-top: 30px; align-items: stretch; }
.emm-panel {
  background: var(--paper-2); border: 1px solid var(--line-light);
  border-radius: 18px; padding: 22px 22px 24px; display: flex; flex-direction: column;
}
.emm-panel-t {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  font-size: 17px; color: var(--on-light); margin: 0 0 16px;
}

/* ---- Rose des vents / compas ---- */
.emm-compass { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: auto 0; }
.emm-compass-wrap { position: relative; width: 100%; max-width: 260px; }
.emm-compass-svg { width: 100%; height: auto; display: block; }
.emm-c-ring  { fill: var(--paper); stroke: var(--line-light); stroke-width: 1.5; }
.emm-c-ring2 { fill: none; stroke: var(--line-light); stroke-width: 1; stroke-dasharray: 2 5; }
.emm-c-tick  { stroke: #c3d1e2; stroke-width: 1.5; }
.emm-c-card  { fill: var(--on-light-soft); font-size: 15px; font-weight: 700; font-family: var(--font-display); }
.emm-c-card.is-n { fill: var(--blue); }
.emm-c-arrow { fill: var(--blue); }
.emm-c-tail  { stroke: var(--blue); stroke-width: 4; stroke-linecap: round; }
.emm-c-hub   { fill: var(--navy-800); }
.emm-compass-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
  background: rgba(255,255,255,0.82); border-radius: 50%; width: 46%; aspect-ratio: 1;
  justify-content: center;
}
.emm-c-spd { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 6vw, 34px); color: var(--on-light); line-height: 1; }
.emm-c-spd small { font-size: 13px; font-weight: 600; color: var(--on-light-soft); }
.emm-c-gust { font-size: 11.5px; font-weight: 700; color: var(--on-light-soft); margin-top: 3px; }
.emm-compass-foot { text-align: center; }
.emm-c-from { display: block; font-size: 15px; color: var(--on-light); font-weight: 600; }
.emm-c-hint { display: block; font-size: 12px; color: var(--on-light-soft); margin-top: 4px; }
.emm-compass-empty { color: var(--on-light-soft); font-size: 14px; padding: 24px 0; text-align: center; }

/* ---- Courbe de maree (carte premium fond sombre, .emt-*) ---- */
.emm-panel--flush { padding: 0; background: none; border: none; }
.emt {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: 20px 20px 16px; border-radius: 18px; color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(52,220,230,0.18), transparent 55%),
    linear-gradient(160deg, #0C2647 0%, #071324 60%, #050B15 100%);
  border: 1px solid rgba(125,234,242,0.16);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
}
.emt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 6px; }
.emt-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.6px; font-size: 10px; color: var(--turquoise-soft); margin-bottom: 6px;
}
.emt-now-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 7vw, 40px); line-height: 1; display: inline-flex; align-items: baseline; gap: 8px; }
.emt-now-h small { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.62); }
.emt-trend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px; padding: 3px 9px 3px 6px; border-radius: 999px; align-self: center; }
.emt-trend svg { width: 13px; height: 13px; }
.emt-trend.is-up { color: #7DEAF2; background: rgba(52,220,230,0.14); }
.emt-trend.is-up svg { fill: #34DCE6; }
.emt-trend.is-down { color: #9fc0ef; background: rgba(59,134,240,0.16); }
.emt-trend.is-down svg { fill: #3B86F0; transform: rotate(180deg); }
.emt-next { text-align: right; flex-shrink: 0; }
.emt-next-in { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 4.4vw, 22px); line-height: 1.05; color: #fff; }
.emt-next-sub { display: block; font-size: 12px; color: rgba(255,255,255,0.62); margin-top: 3px; }

.emt-chartwrap { flex: 1; min-height: 0; margin: 6px -4px 0; }
.emt-svg { width: 100%; height: auto; display: block; }
.emt-grid  { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.emt-vgrid { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.emt-axis  { fill: rgba(255,255,255,0.42); font-size: 12px; font-weight: 600; }
.emt-area  { animation: emt-fade 1.1s ease both; }
.emt-line  { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2600; stroke-dashoffset: 0; animation: emt-draw 1.5s cubic-bezier(.5,0,.2,1) both; }
.emt-lab   { fill: #fff; font-size: 12.5px; font-weight: 800; font-family: var(--font-display); }
.emt-labv  { fill: rgba(255,255,255,0.6); font-size: 11.5px; font-weight: 600; }
.emt-pt    { stroke: #071324; stroke-width: 1.5; }
.emt-pt.is-high  { fill: #34DCE6; }
.emt-pt.is-low   { fill: #3B86F0; }
.emt-ptring.is-high { fill: rgba(52,220,230,0.18); }
.emt-ptring.is-low  { fill: rgba(59,134,240,0.20); }
.emt-nowline { stroke: rgba(255,255,255,0.34); stroke-width: 1.4; stroke-dasharray: 2 4; }
.emt-nowdot  { fill: #fff; stroke: #34DCE6; stroke-width: 2.5; }
.emt-nowpulse { fill: #34DCE6; opacity: 0.35; transform-origin: center; transform-box: fill-box; animation: emt-pulse 2.4s ease-out infinite; }

.emt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.emt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.emt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 4px 9px; border-radius: 999px; }
.emt-chip b { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: 0.5px; }
.emt-chip.is-high b { color: #34DCE6; }
.emt-chip.is-low b  { color: #3B86F0; }
.emt-chip span { color: rgba(255,255,255,0.55); }
.emt-src { font-size: 12px; font-weight: 700; color: var(--turquoise-soft); text-decoration: none; white-space: nowrap; }
.emt-src:hover { text-decoration: underline; }
.emt-note { font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,0.4); margin: 10px 0 0; }
.emt-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: auto 0; }
.emt-empty-t { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; }

@keyframes emt-draw  { from { stroke-dashoffset: 2600; } to { stroke-dashoffset: 0; } }
@keyframes emt-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes emt-pulse { 0% { transform: scale(0.6); opacity: 0.5; } 70% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .emt-line { animation: none; stroke-dasharray: none; }
  .emt-area { animation: none; }
  .emt-nowpulse { animation: none; opacity: 0.25; }
}

/* ---- Graphe heure par heure ---- */
/* Le graphe remplit toute la largeur de sa carte (SVG bord a bord). Sur petit
   ecran on redonne une largeur mini + scroll horizontal pour rester lisible. */
.emm-graph-wrap { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.emm-graph { width: 100%; min-width: 0; }
.emm-graph-svg { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  .emm-graph { min-width: 600px; }
}
.emm-graph-grid { stroke: var(--line-light); stroke-width: 1; }
.emm-graph-scale { fill: var(--on-light-soft); font-size: 10px; font-weight: 600; }
.emm-graph-gust { stroke: #8fb8ee; stroke-width: 2; stroke-dasharray: 4 4; }
.emm-graph-wind { stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.emm-graph-dot { fill: var(--blue); }
.emm-graph-val { fill: var(--on-light); font-size: 12px; font-weight: 800; font-family: var(--font-display); }
.emm-graph-h { fill: var(--on-light-soft); font-size: 12px; font-weight: 700; }
.emm-graph-arrow { fill: var(--blue); }
.emm-graph-swell { fill: #34b3c2; font-size: 11.5px; font-weight: 700; }
.emm-graph-key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.emm-gk { font-size: 12.5px; color: var(--on-light-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.emm-gk::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.emm-gk-wind::before  { background: var(--blue); }
.emm-gk-gust::before  { background: #8fb8ee; }
.emm-gk-swell::before { background: #34b3c2; }
.emm-gk-dir::before   { display: none; }
.emm-gk-dir { color: var(--blue); }

@media (max-width: 820px) {
  .emm-split { grid-template-columns: 1fr; }
  .emm-map-frame { padding-bottom: 72%; }
}

/* Barre de couches : sur petit ecran, defilement horizontal propre
   (une seule ligne qui scrolle) plutot que d'empiler trop de lignes. */
@media (max-width: 560px) {
  .emm-map-tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .emm-map-tabs::-webkit-scrollbar { display: none; }
}

/* ==================================================================
   METEO MARINE  --  DASHBOARD SOMBRE PREMIUM (page /meteo-marine/)
   Uniformisation sur la DA de la carte de maree (.emt) : cartes navy
   near-black en degrade, liseres turquoise discrets, gros chiffres
   blancs, labels MAJUSCULES turquoise, texte secondaire attenue.
   TOUT est scope sous .emm-dash : le widget home reste inchange.
   ================================================================== */

/* --- Fond general de la page en sombre (enchaine sous le hero) --- */
.section-light.emm-dash {
  background:
    radial-gradient(120% 66% at 50% 0%, #0A2440 0%, #060E1B 58%, #050B15 100%);
  color: rgba(255,255,255,0.86);
}
.emm-dash .emm-h2 {
  color: #fff;
}
.emm-dash .emm-h2::before {
  content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: 12px; margin-bottom: 4px;
  background: linear-gradient(90deg, var(--turquoise), var(--blue-bright));
}

/* --- Carte / conteneur premium partage (verdict+tuiles, Windy, compas,
       graphe, prochains jours, detail sources) : le langage de .emt --- */
.emm-dash .emm-card,
.emm-dash .emm-map,
.emm-dash .emm-panel:not(.emm-panel--flush),
.emm-dash .emm-graph-wrap,
.emm-dash .emm-day,
.emm-dash .emm-detail-grid {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(52,220,230,0.12), transparent 55%),
    linear-gradient(160deg, #0C2647 0%, #071324 62%, #050B15 100%);
  border: 1px solid rgba(125,234,242,0.14);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.05);
}
.emm-dash .emm-graph-wrap {
  border-radius: 18px; padding: 22px 22px 18px;
}
.emm-dash .emm-detail-grid {
  border-radius: 18px; padding: clamp(20px, 3vw, 30px);
}

/* --- Verdict : etat en couleur mais dans le langage sombre --- */
.emm-dash .emm-verdict {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-left-width: 3px;
}
.emm-dash .emm-verdict-reason { color: rgba(255,255,255,0.62); }
.emm-dash .emm-verdict.is-go   { border-left-color: #29d98a; background: rgba(41,217,138,0.08); }
.emm-dash .emm-verdict.is-go   .emm-dot { background: #29d98a; box-shadow: 0 0 12px rgba(41,217,138,0.7); }
.emm-dash .emm-verdict.is-go   .emm-verdict-label { color: #5fe3a6; }
.emm-dash .emm-verdict.is-warn { border-left-color: #f5b640; background: rgba(245,182,64,0.09); }
.emm-dash .emm-verdict.is-warn .emm-dot { background: #f5b640; box-shadow: 0 0 12px rgba(245,182,64,0.6); }
.emm-dash .emm-verdict.is-warn .emm-verdict-label { color: #ffcf72; }
.emm-dash .emm-verdict.is-stop { border-left-color: #ff5b5b; background: rgba(255,91,91,0.10); }
.emm-dash .emm-verdict.is-stop .emm-dot { background: #ff5b5b; box-shadow: 0 0 12px rgba(255,91,91,0.6); }
.emm-dash .emm-verdict.is-stop .emm-verdict-label { color: #ff8f8f; }

/* --- Tuiles cles : sous-cartes sombres --- */
.emm-dash .emm-tile {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}
.emm-dash .emm-tile-k {
  color: var(--turquoise-soft); letter-spacing: 1.4px;
}
.emm-dash .emm-tile-v { color: #fff; }
.emm-dash .emm-tile-v small { color: rgba(255,255,255,0.6); }
.emm-dash .emm-tile-v.emm-na, .emm-dash .emm-na { color: rgba(255,255,255,0.42); }
.emm-dash .emm-tile-sub { color: rgba(255,255,255,0.64); }
.emm-dash .emm-tile-note { color: rgba(255,255,255,0.9); }
.emm-dash .emm-tile-range { color: #ffcf72; }
.emm-dash .emm-tile-link { color: var(--turquoise-soft); }
.emm-dash .emm-arrow { color: var(--turquoise); }
.emm-dash .emm-tide-item { color: rgba(255,255,255,0.82); }
.emm-dash .emm-tide-item b { color: #fff; }

/* Badges de fiabilite en version sombre */
.emm-dash .emm-conf.is-high { background: rgba(41,217,138,0.14); color: #6fe6b0; }
.emm-dash .emm-conf.is-mid  { background: rgba(245,182,64,0.14); color: #ffcf72; }
.emm-dash .emm-conf.is-low  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.62); }

/* Vigilance : labels lisibles sur sombre */
.emm-dash .emm-vig-vert   .emm-vig-label { color: #6fe6b0; }
.emm-dash .emm-vig-jaune  .emm-vig-label { color: #ffcf72; }
.emm-dash .emm-vig-orange .emm-vig-label { color: #ffa24d; }
.emm-dash .emm-vig-rouge  .emm-vig-label,
.emm-dash .emm-vig-gris   .emm-vig-label,
.emm-dash .emm-vig-violet .emm-vig-label { color: #ff8f8f; }
.emm-dash .emm-vig-indisponible .emm-vig-label { color: rgba(255,255,255,0.6); }

/* Sources / transparence + heure de maj */
.emm-dash .emm-sources { border-top: 1px dashed rgba(255,255,255,0.14); color: rgba(255,255,255,0.62); }
.emm-dash .emm-sources-lbl { color: #fff; }
.emm-dash .emm-stale { color: #ffcf72; }
.emm-dash .emm-updated { color: rgba(255,255,255,0.5); }

/* --- Carte Windy : encadree sombre + onglets sombres --- */
.emm-dash .emm-map-tab {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}
.emm-dash .emm-map-tab:hover { color: #fff; border-color: rgba(125,234,242,0.4); }
.emm-dash .emm-map-tab.is-active {
  background: linear-gradient(120deg, var(--blue), var(--blue-bright));
  color: #fff; border-color: transparent;
}
.emm-dash .emm-map-note { color: rgba(255,255,255,0.5); }

/* --- Panneau compas : titre + jumeau de la carte de maree --- */
.emm-dash .emm-panel-t { color: #fff; }
.emm-dash .emm-c-ring  { fill: rgba(255,255,255,0.02); stroke: rgba(125,234,242,0.18); stroke-width: 1.5; }
.emm-dash .emm-c-ring2 { stroke: rgba(255,255,255,0.10); }
.emm-dash .emm-c-tick  { stroke: rgba(255,255,255,0.2); }
.emm-dash .emm-c-card  { fill: rgba(255,255,255,0.55); }
.emm-dash .emm-c-card.is-n { fill: var(--turquoise); }
.emm-dash .emm-c-arrow { fill: var(--turquoise); }
.emm-dash .emm-c-tail  { stroke: var(--turquoise); }
.emm-dash .emm-c-hub   { fill: #fff; }
.emm-dash .emm-compass-center {
  background: radial-gradient(circle at 50% 45%, rgba(12,38,71,0.92), rgba(7,19,36,0.55));
  box-shadow: inset 0 0 24px rgba(52,220,230,0.12);
}
.emm-dash .emm-c-spd { color: #fff; }
.emm-dash .emm-c-spd small { color: rgba(255,255,255,0.6); }
.emm-dash .emm-c-gust { color: rgba(255,255,255,0.6); }
.emm-dash .emm-c-from { color: #fff; }
.emm-dash .emm-c-from b { color: var(--turquoise-soft); }
.emm-dash .emm-c-hint { color: rgba(255,255,255,0.5); }
.emm-dash .emm-compass-empty { color: rgba(255,255,255,0.6); }

/* --- Graphe heure par heure : data-viz sombre turquoise --- */
.emm-dash .emm-graph-grid { stroke: rgba(255,255,255,0.08); }
.emm-dash .emm-graph-scale { fill: rgba(255,255,255,0.42); }
.emm-dash .emm-graph-wind { stroke: var(--turquoise); stroke-width: 2.8; }
.emm-dash .emm-graph-dot  { fill: var(--turquoise); }
.emm-dash .emm-graph-val  { fill: #fff; }
.emm-dash .emm-graph-h    { fill: rgba(255,255,255,0.62); }
.emm-dash .emm-graph-arrow { fill: var(--turquoise); }
.emm-dash .emm-graph-gust { stroke: rgba(159,192,239,0.85); }
.emm-dash .emm-graph-swell { fill: #7DEAF2; }
.emm-dash .emm-gk { color: rgba(255,255,255,0.62); }
.emm-dash .emm-gk-wind::before  { background: var(--turquoise); }
.emm-dash .emm-gk-gust::before  { background: rgba(159,192,239,0.85); }
.emm-dash .emm-gk-swell::before { background: #7DEAF2; }
.emm-dash .emm-gk-dir { color: var(--turquoise-soft); }

/* --- Prochains jours : cartes sombres --- */
.emm-dash .emm-day-t { color: #fff; }
.emm-dash .emm-day-facts { color: rgba(255,255,255,0.72); }
.emm-dash .emm-fact-ico { color: var(--turquoise); opacity: 0.95; }
.emm-dash .emm-day.is-go .emm-day-dot   { background: #29d98a; box-shadow: 0 0 10px rgba(41,217,138,0.7); }
.emm-dash .emm-day.is-warn .emm-day-dot { background: #f5b640; box-shadow: 0 0 10px rgba(245,182,64,0.6); }
.emm-dash .emm-day.is-stop .emm-day-dot { background: #ff5b5b; box-shadow: 0 0 10px rgba(255,91,91,0.6); }

/* --- Detail par source : version sombre lisible --- */
.emm-dash .emm-detail-intro, .emm-dash .emm-method { color: rgba(255,255,255,0.6); }
.emm-dash .emm-method { border-top: 1px solid rgba(255,255,255,0.12); }
.emm-dash .emm-detail-col h3 { color: #fff; }
.emm-dash .emm-detail-table th { color: rgba(255,255,255,0.6); border-bottom-color: rgba(255,255,255,0.1); }
.emm-dash .emm-detail-table td { color: #fff; border-bottom-color: rgba(255,255,255,0.1); }
.emm-dash .emm-detail-table .emm-detail-cons th,
.emm-dash .emm-detail-table .emm-detail-cons td { color: var(--turquoise-soft); }

/* --- Micro-interaction discrete a l'apparition --- */
@keyframes emm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.emm-dash .emm-card,
.emm-dash .emm-map,
.emm-dash .emm-split,
.emm-dash .emm-graph-wrap,
.emm-dash .emm-days,
.emm-dash .emm-detail-grid { animation: emm-rise 0.7s ease both; }
@media (prefers-reduced-motion: reduce) {
  .emm-dash .emm-card,
  .emm-dash .emm-map,
  .emm-dash .emm-split,
  .emm-dash .emm-graph-wrap,
  .emm-dash .emm-days,
  .emm-dash .emm-detail-grid { animation: none; }
}

/* ============================================================
   TOPBAR (bandeau horaires + adresse, au-dessus de la nav)
   ============================================================ */
.em-topbar {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--on-dark-soft);
  font-size: 12.5px;
  line-height: 1.2;
}
.em-topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 7px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.em-topbar-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.em-topbar-item svg { width: 14px; height: 14px; color: var(--turquoise); flex-shrink: 0; }
.em-topbar-sep { width: 1px; height: 13px; background: rgba(255,255,255,0.16); }
@media (max-width: 560px) {
  .em-topbar { font-size: 11.5px; }
  .em-topbar-inner { gap: 8px; padding: 6px 14px; }
  .em-topbar-sep { display: none; }
}

/* ============================================================
   MACHINE A ECRIRE (territoires) : curseur clignotant
   ============================================================ */
.em-tw { position: relative; white-space: nowrap; }
.em-tw::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: currentColor;
  animation: em-tw-caret 1s steps(1) infinite;
}
@keyframes em-tw-caret { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce) { .em-tw::after { display: none; } }

/* ============================================================
   MODALE DEVIS (pop-up pre-remplie)
   ============================================================ */
.em-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
body.em-modal-open { overflow: hidden; }
.em-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.em-modal[hidden] { display: none; }
.em-modal-overlay { position: absolute; inset: 0; background: rgba(3,8,16,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.em-modal-dialog {
  position: relative;
  width: min(520px, 100%);
  /* dvh et pas vh : sur iOS, 100vh ignore le clavier et la barre d'URL, la
     modale depasse alors l'ecran et le champ qu'on remplit finit sous le
     clavier (« on ne voit pas ce qu'on tape », retour Jean-Seb 2026-09-08). */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: linear-gradient(165deg, var(--navy-850), var(--navy-900));
  border: 1px solid rgba(125,234,242,0.16);
  border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
  padding: 30px 28px 26px;
  color: var(--on-dark);
  animation: em-modal-in 0.24s cubic-bezier(0.2,0.7,0.3,1);
}
@keyframes em-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .em-modal-dialog { animation: none; } }
.em-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; border-radius: 0;
  color: var(--on-dark-soft); cursor: pointer;
}
.em-modal-x:hover { color: #fff; }
.em-modal-x svg { width: 22px; height: 22px; }
.em-modal-eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise-soft); margin: 0 0 6px; }
.em-modal-dialog h2 { color: #fff; margin: 0 0 6px; font-size: 25px; }
.em-modal-sub { color: var(--on-dark-soft); margin: 0 0 18px; font-size: 14px; }
.em-modal-form { display: flex; flex-direction: column; gap: 12px; }
.em-field-row { display: flex; gap: 12px; }
.em-field-row .em-field { flex: 1; }
.em-field { display: flex; flex-direction: column; gap: 5px; }
.em-field > span { font-size: 12.5px; color: var(--on-dark-soft); }
.em-field input, .em-field textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 11px 13px;
  color: #fff; font-size: 15px; font-family: inherit;
}
.em-field input:focus, .em-field textarea:focus { outline: none; border-color: var(--turquoise); background: rgba(52,220,230,0.06); }
.em-field textarea { resize: vertical; min-height: 62px; }
.em-field--model input { border-color: rgba(52,220,230,0.35); background: rgba(52,220,230,0.07); }
.em-modal-submit { margin-top: 4px; width: 100%; }
.em-modal-status { margin: 4px 0 0; font-size: 13.5px; min-height: 1.1em; }
.em-modal-status.is-ok { color: #38e0a8; }
.em-modal-status.is-err { color: #ff8080; }
.em-modal-fallback { margin: 8px 0 0; font-size: 13px; color: var(--on-dark-soft); text-align: center; }
.em-modal-fallback a { color: var(--turquoise-soft); }
@media (max-width: 480px) {
  .em-modal-dialog { padding: 26px 20px 22px; }
  .em-field-row { flex-direction: column; gap: 12px; }
}

/* ---- Bandeau : bouton adresse + menu itineraire (Maps / Waze) ---- */
.em-topbar-addr { position: relative; }
.em-geo-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
}
.em-geo-trigger:hover, .em-geo-trigger[aria-expanded="true"] { color: #fff; }
.em-geo-trigger svg:first-child { width: 14px; height: 14px; color: var(--turquoise); flex-shrink: 0; }
.em-geo-caret { width: 11px !important; height: 11px !important; color: currentColor !important; opacity: 0.7; transition: transform 0.18s ease; }
.em-geo-trigger[aria-expanded="true"] .em-geo-caret { transform: rotate(180deg); }
.em-geo-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  display: flex; flex-direction: column; min-width: 220px;
  background: var(--navy-850);
  border: 1px solid rgba(125,234,242,0.16);
  border-radius: 12px;
  box-shadow: 0 18px 44px -20px rgba(0,0,0,0.7);
  padding: 6px;
  overflow: hidden;
}
.em-geo-menu[hidden] { display: none; }
.em-geo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--on-dark); font-size: 13.5px; text-decoration: none;
}
.em-geo-item svg { width: 17px; height: 17px; color: var(--turquoise); flex-shrink: 0; }
.em-geo-item:hover { background: rgba(52,220,230,0.10); color: #fff; }
@media (max-width: 560px) {
  .em-geo-menu { left: 50%; transform: translateX(-50%); }
}

/* ---- Footer : réseaux sociaux ---- */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social--mobile { justify-content: center; margin-top: 12px; }
.footer-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--on-dark-soft);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.footer-social a:hover { color: #fff; border-color: var(--turquoise); background: rgba(52,220,230,0.12); }
.footer-social svg { width: 19px; height: 19px; }

/* ---- Modale : passe AU-DESSUS de la barre wp-admin (z-index 100000) → la croix n'est jamais recouverte, connecté ou non ---- */

/* ============================================================
   PLUGIN BATEAUX 1.3.0 — prix (styles sortis de l'inline),
   compteur de résultats, tri, lightbox galerie
   ============================================================ */
/* flex 0 0 auto : le prix garde sa largeur reelle. Son texte est insecable
   (espaces insecables), donc toute compression le faisait deborder sous le
   bouton "Details" — c'est le bouton qui cede et passe a la ligne. */
.boat-price-wrap { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; min-width: 0; flex: 0 0 auto; }
.boat-price-old { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: #8a97a6; text-decoration: line-through; white-space: nowrap; }
.boat-price { white-space: nowrap; }
.boat-hero-price-old { text-decoration: line-through; opacity: .6; font-weight: 600; font-size: .62em; margin-right: 10px; }

.em-boats-count { color: var(--on-light-soft); font-size: 14px; font-weight: 600; margin: 0 0 18px; }

/* Lightbox galerie fiche bateau */
body.emb-lightbox-open { overflow: hidden; }
.emb-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(3,8,16,.92); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.emb-lightbox[hidden] { display: none; }
.emb-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }

/* ==================================================================
   SKIN HIDEA — mini-site de marque sous extrememarine.fr
   ------------------------------------------------------------------
   TOUT est scope sous body.em-hidea : aucune regle ci-dessous ne peut
   atteindre une autre page du site. Palette Hidea (navy #004f91,
   accent cyan #3fd0ff) portee par des variables --hdx-* propres, pour
   ne pas ecraser les tokens Extreme Marine (--blue, --turquoise...).
   ================================================================== */
body.em-hidea {
  --hdx-bg:     #050f1c;
  --hdx-bg2:    #081c2f;
  --hdx-panel:  #0c1c30;
  --hdx-panel2: #0f2438;
  --hdx-navy:   #004f91;
  --hdx-blue:   #2e90e8;
  --hdx-cyan:   #3fd0ff;
  --hdx-ink:    #eaf2fb;
  --hdx-mut:    #8fa6bf;
  --hdx-line:   rgba(255,255,255,0.09);
  --hdx-wrap:   1180px;
  --hdx-padx:   clamp(18px, 5vw, 26px);
  background: var(--hdx-bg);
}
/* Kadence recolore h1..h4 en anthracite : on reancre le clair sur fond sombre. */
body.em-hidea h1, body.em-hidea h2, body.em-hidea h3, body.em-hidea h4 { color: var(--hdx-ink); }
body.em-hidea .site, body.em-hidea .site-container, body.em-hidea #wrapper { background: var(--hdx-bg); }
/* Kadence souligne tous les liens : le chrome Hidea (hors .hdx, qui a deja sa
   regle locale) doit etre neutralise explicitement, sinon nav, CTA, drawer et
   footer sortent soulignes. */
body.em-hidea .hdx-topbar a,
body.em-hidea .hdx-header a,
body.em-hidea .hdx-drawer a,
body.em-hidea .hdx-footer a { text-decoration: none; }
body.em-hidea .hdx-fcol a:hover,
body.em-hidea .hdx-fbot a:hover,
body.em-hidea .hdx-topbar-back:hover { text-decoration: underline; }

/* ---------- Bandeau haut ---------- */
.hdx-topbar { background: #030a14; border-bottom: 1px solid var(--hdx-line); font-size: 12.5px; color: var(--hdx-mut); }
.hdx-topbar-inner {
  max-width: var(--hdx-wrap); margin: 0 auto; padding: 8px var(--hdx-padx);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.hdx-topbar-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdx-topbar-back { display: inline-flex; align-items: center; gap: 7px; color: var(--hdx-cyan); font-weight: 600; white-space: nowrap; }
.hdx-topbar-back svg { width: 15px; height: 15px; }
.hdx-topbar-back:hover { color: #fff; }
@media (max-width: 720px) { .hdx-topbar-item { display: none; } .hdx-topbar-inner { justify-content: center; } }

/* ---------- Header ---------- */
.hdx-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(5,15,28,0.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hdx-line);
}
.hdx-header-inner {
  max-width: var(--hdx-wrap); margin: 0 auto; padding: 12px var(--hdx-padx);
  display: flex; align-items: center; gap: 22px;
}
.hdx-brand { flex-shrink: 0; }
.hdx-logo { display: block; background: #fff; border-radius: 12px; padding: 8px 14px; box-shadow: 0 8px 26px -16px rgba(0,0,0,0.9); }
.hdx-logo img { display: block; height: 30px; width: auto; }
.hdx-logo-sm { padding: 7px 12px; }
.hdx-logo-sm img { height: 24px; }
.hdx-nav { margin-left: auto; }
.hdx-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.hdx-nav a { font-size: 14.5px; font-weight: 500; color: var(--hdx-ink); opacity: .82; }
.hdx-nav a:hover { opacity: 1; color: var(--hdx-cyan); }
.hdx-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.hdx-nav + .hdx-actions { margin-left: 0; }
.hdx-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--hdx-ink); }
.hdx-phone svg { width: 16px; height: 16px; color: var(--hdx-cyan); }
.hdx-phone:hover { color: var(--hdx-cyan); }
.hdx-cta {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 100px;
  background: linear-gradient(120deg, var(--hdx-cyan), var(--hdx-blue));
  color: #04121f; font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hdx-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(63,208,255,0.28); color: #04121f; }
.hdx-burger { display: none; background: none; border: 1px solid rgba(63,208,255,0.35); border-radius: 10px; padding: 9px; cursor: pointer; }
.hdx-burger-box { display: block; width: 20px; }
.hdx-burger-bar { display: block; height: 2.2px; border-radius: 2px; background: var(--hdx-ink); }
.hdx-burger-bar + .hdx-burger-bar { margin-top: 4px; }
@media (max-width: 1000px) {
  .hdx-nav { display: none; }
  .hdx-burger { display: block; }
  .hdx-actions { margin-left: auto; }
}
@media (max-width: 620px) { .hdx-phone span, .hdx-cta { display: none; } .hdx-phone { padding: 8px; } }

/* ---------- Drawer mobile ---------- */
.hdx-drawer-overlay { position: fixed; inset: 0; background: rgba(3,8,16,0.62); z-index: 120; opacity: 0; transition: opacity .3s ease; }
.hdx-drawer-overlay.is-open { opacity: 1; }
.hdx-drawer-overlay[hidden] { display: none; }
.hdx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); z-index: 130;
  transform: translateX(100%); visibility: hidden;
  transition: transform .35s cubic-bezier(0.4,0,0.2,1), visibility .35s;
}
.hdx-drawer.is-open { transform: translateX(0); visibility: visible; }
.hdx-drawer-panel {
  height: 100%; overflow-y: auto; padding: 18px 20px 28px;
  background: linear-gradient(170deg, var(--hdx-panel2), var(--hdx-bg));
  border-left: 1px solid var(--hdx-line); display: flex; flex-direction: column; gap: 22px;
}
.hdx-drawer-top { display: flex; align-items: center; gap: 12px; }
.hdx-drawer-close { position: relative; width: 40px; height: 40px; flex-shrink: 0; background: none; border: 1px solid var(--hdx-line); border-radius: 10px; cursor: pointer; }
.hdx-drawer-close span { position: absolute; left: 11px; top: 19px; width: 16px; height: 2px; background: var(--hdx-ink); border-radius: 2px; }
.hdx-drawer-close span:first-child { transform: rotate(45deg); }
.hdx-drawer-close span:last-child { transform: rotate(-45deg); }
.hdx-drawer-cta { flex: 1; text-align: center; padding: 12px 16px; border-radius: 100px; background: linear-gradient(120deg, var(--hdx-cyan), var(--hdx-blue)); color: #04121f; font-weight: 700; font-size: 14.5px; }
.hdx-dnav { list-style: none; margin: 0; padding: 0; }
.hdx-dnav li + li { border-top: 1px solid var(--hdx-line); }
.hdx-dnav a { display: block; padding: 15px 2px; font-size: 18px; font-weight: 700; color: var(--hdx-ink); }
.hdx-dnav a:hover { color: var(--hdx-cyan); }
.hdx-drawer-eyebrow { text-transform: uppercase; letter-spacing: 1.6px; font-size: 11px; color: var(--hdx-cyan); margin: 0 0 10px; }
.hdx-drawer-phone { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hdx-line); border-radius: 12px; background: rgba(255,255,255,0.03); }
.hdx-drawer-phone svg { width: 20px; height: 20px; color: var(--hdx-cyan); flex-shrink: 0; }
.hdx-drawer-phone b { display: block; font-size: 18px; color: var(--hdx-ink); }
.hdx-drawer-phone i { display: block; font-style: normal; font-size: 12.5px; color: var(--hdx-mut); }
.hdx-drawer-ghost { display: block; margin-top: 12px; text-align: center; padding: 11px 14px; border: 1px solid rgba(63,208,255,0.35); border-radius: 100px; color: var(--hdx-cyan); font-weight: 600; font-size: 14px; }
.hdx-drawer-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hdx-drawer-rule { display: block; width: 100%; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.26) 0 2px, transparent 2px 7px); }
body.hdx-drawer-open { overflow: hidden; }
body.admin-bar .hdx-drawer { top: 32px; }

/* ---------- Footer ---------- */
.hdx-footer { background: #030a14; border-top: 1px solid var(--hdx-line); padding: 54px 0 26px; }
.hdx-footer-inner { max-width: var(--hdx-wrap); margin: 0 auto; padding: 0 var(--hdx-padx); }
.hdx-fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 38px; }
.hdx-fgrid > * { min-width: 0; }
.hdx-fbrand p { margin: 16px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--hdx-mut); }
.hdx-fbrand .hdx-logo { display: inline-block; }
.hdx-fcol h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--hdx-cyan); margin: 0 0 16px; }
.hdx-fcol a, .hdx-fcol span { display: block; font-size: 13.5px; color: var(--hdx-mut); margin-bottom: 10px; line-height: 1.5; }
.hdx-fcol a:hover { color: var(--hdx-ink); }
.hdx-fdevis { color: var(--hdx-cyan) !important; font-weight: 600; }
.hdx-fbot {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hdx-line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 12.5px; color: var(--hdx-mut);
}
.hdx-fbot a { color: var(--hdx-mut); }
.hdx-fbot a:hover { color: var(--hdx-ink); }
.hdx-powered { color: var(--hdx-cyan) !important; font-weight: 600; }
@media (max-width: 900px) { .hdx-fgrid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .hdx-fgrid { grid-template-columns: 1fr; } }

/* ---- Statut d'envoi des formulaires (contact / devis) — 2026-09-08 ---- */
.form-status { margin: 12px 0 0; font-size: 14px; font-weight: 600; line-height: 1.45; min-height: 1px; }
.form-status:empty { display: none; }
.form-status.is-pending { color: var(--on-light-soft); font-weight: 500; }
.form-status.is-ok { color: #0B7A4B; }
.form-status.is-err { color: #B4232B; }
.form-grid .em-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-grid button[type="submit"][disabled] { opacity: .65; cursor: progress; }

/* ---- Modale sur petit ecran : ancree en haut, jamais centree ---- *
   Centree, l'ouverture du clavier pousse le champ actif hors de l'ecran.
   Ancree en haut avec un scroll interne, le champ reste atteignable. */
@media (max-width: 620px), (max-height: 720px) {
  .em-modal { align-items: flex-start; padding: 12px; }
  .em-modal-dialog { max-height: calc(100dvh - 24px); padding: 26px 20px 22px; }
}
.em-modal-dialog input, .em-modal-dialog textarea { scroll-margin: 90px; }

/* ---- Kadence ne decide plus de la couleur du texte saisi — 2026-09-08 ---- *
   global.min.css de Kadence pose `input:focus { color: var(--global-palette3) }`,
   un navy sombre. Nos champs de modale ont un fond sombre : pendant la frappe le
   texte passait donc invisible, et ne redevenait blanc qu'en quittant le champ
   (bug remonte par Jean-Seb, 2026-09-08, reproduit au focus).
   Les specificites sont a egalite (.em-field input:focus vs input[type]:focus),
   donc l'ordre de chargement suffirait a nous faire gagner ou perdre selon la
   page : on tranche avec !important plutot que de dependre de l'ordre. */
.em-field input:focus, .em-field textarea:focus, .em-field select:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}
/* Formulaires de page (fond clair) : meme prise de main, pour que la couleur du
   texte saisi ne depende jamais de la palette du theme parent. */
.field input:focus, .field select:focus, .field textarea:focus, .filter select:focus {
  color: var(--on-light) !important;
  -webkit-text-fill-color: var(--on-light) !important;
  caret-color: var(--on-light);
}
/* Remplissage automatique du navigateur : Chrome impose son fond clair et son
   texte sombre. Sur fond sombre, meme resultat illisible. Le fond se rejoue par
   une ombre interne (seule facon de le surcharger) et le texte se force. */
.em-field input:-webkit-autofill,
.em-field input:-webkit-autofill:hover,
.em-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #0E2138 inset !important;
  box-shadow: 0 0 0 1000px #0E2138 inset !important;
  caret-color: #fff;
}

/* ============================================================
   SELECTEUR DE LANGUE (drapeaux France / Etats-Unis), 2026-09-30
   Pose dans le bandeau du haut (em-topbar), et dans celui du
   mini-site Hidea. Markup : em_lang_switch_markup() du plugin
   extrememarine-i18n ; il ne rend rien tant que la version
   anglaise n'est pas ouverte.
   ============================================================ */
.em-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.em-lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  text-decoration: none;
  opacity: 0.45;
  transition: opacity 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.em-lang-opt:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.em-lang-opt.is-current { opacity: 1; background: rgba(255,255,255,0.14); }
.em-lang-opt:focus-visible { opacity: 1; outline: 2px solid var(--turquoise); outline-offset: 1px; }
.em-flag {
  display: block;
  width: 19px;
  height: 13px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}
.em-flag svg { display: block; width: 100%; height: 100%; }
.em-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Ecrans etroits : le bandeau passe deja en 11,5 px, on resserre les drapeaux
   pour qu'ils tiennent sur la meme ligne que l'adresse et les horaires. */
@media (max-width: 560px) {
  .em-lang-opt { width: 24px; height: 18px; }
  .em-flag { width: 17px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .em-lang-opt { transition: none; } }

/* Fiche bateau anglaise dont la description n'existe qu'en francais. */
.boat-desc-lang { font-size: 14px; color: var(--on-light-soft); margin: 0 0 12px; }

/* ============================================================
   HEADER : un libellé de nav = une ligne (2026-09-30)
   Le header wrappait DÉJÀ en français (« NOS / MARQUES »,
   « EN / STOCK », « MÉTÉO / MARINE ») ; les libellés anglais,
   plus longs, le rendaient systématique. On force la ligne
   unique et on rend de la place par crans mesurés, jusqu'à ce
   que le bord droit du CTA tienne dans l'écran dans les DEUX
   langues. En dessous de 941 px le burger prend le relais.
   ============================================================ */
.nav-links > li > a { white-space: nowrap; }

@media (min-width: 941px) and (max-width: 1499px) {
  .nav-phone-num { display: none; }        /* numéro en icône seule, le tel: reste cliquable */
  .nav-phone { padding: 8px; }
  .nav-inner { gap: 16px; }
  .nav-links { gap: 18px; }
  .nav-links > li > a { letter-spacing: 0.6px; }
  .nav-right { gap: 10px; }
}
@media (min-width: 941px) and (max-width: 1279px) {
  .nav-links { gap: 13px; }
  .nav-links > li > a { font-size: 11.5px; letter-spacing: 0.2px; }
  .nav-right .btn { padding-left: 16px; padding-right: 16px; letter-spacing: 0.4px; }
}
@media (min-width: 941px) and (max-width: 1099px) {
  .nav-inner { gap: 12px; }
  .nav-links { gap: 10px; }
  .nav-links > li > a { font-size: 11px; letter-spacing: 0; }
  .nav-right .btn { padding-left: 12px; padding-right: 12px; }
}