/* ============================================================
   TURQUOISE YACHTING - Design system
   Passerelle / Groupe JLG
   Re-skin de l'ossature Extreme Marine (em.css). DA : marine
   premium teal. Accent principal turquoise-teal #0C93A6,
   pointe aqua #35E0D8 reservee aux gros titres. Base teal-navy
   (distincte du bleu-navy Extreme Marine). Sections alternees
   sombre / clair. Polices systeme (100% offline).
   Ce fichier est partage par toutes les pages (Jeanneau moteur + voile).
   ============================================================ */

:root {
  /* Fonds sombres (teal-navy premium) */
  --ink:        #03161C;   /* quasi noir teal */
  --navy-900:   #062730;
  --navy-850:   #093642;
  --navy-800:   #0C4553;
  --navy-700:   #115A6C;

  /* Accent principal teal + pointe aqua (titres seulement) */
  --blue:       #0C93A6;   /* accent verrouille (teal) */
  --blue-bright:#17B3C4;
  --blue-deep:  #0A7180;
  --turquoise:  #35E0D8;   /* pointe aqua, gros titres uniquement */
  --turquoise-soft:#8CF0EA;

  /* Clairs */
  --paper:      #F1F8F9;
  --paper-2:    #FFFFFF;
  --line-light: #DCE9EC;

  /* Texte */
  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255,255,255,0.62);
  --on-dark-faint:  rgba(255,255,255,0.34);
  --on-light:       #062730;
  --on-light-soft:  #4E6670;

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

  /* Hauteur du bandeau de coordonnees pose AU-DESSUS du header (sur-header).
     Il n'est pas colle (il defile), mais il occupe le flux au chargement : le
     hero plein ecran doit donc le retirer lui aussi, sinon la page demarre en
     depassant d'un cran. Mesuree dans le navigateur. */
  --topbar-h: 31px;

  --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;

  /* ---- Echelles (posees le 2026-09-22, cf. audits/2026-09-22-audit-signature-ia.md)
     Avant : 37 espacements, 24 tailles de texte, 13 arrondis et 40 ombres,
     chacun regle dans son coin. Ne JAMAIS reintroduire une valeur en dur :
     on choisit un palier ci-dessous, ou on ajoute un palier ici, pour tout
     le monde. La typo fluide du hero reste en clamp(), elle est voulue. ---- */

  /* espacement : marges, paddings, gouttieres */
  --s-hair: 2px;  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;
  --s-4:  16px;   --s-5: 20px;  --s-6: 24px;  --s-7: 32px;
  --s-8:  40px;   --s-9: 48px;  --s-10:64px;  --s-11:80px;

  /* arrondis : filet, petit (boutons, champs), moyen, carte, pilule */
  --r-hair: 2px;  --r-sm: 6px;  --r-md: 12px; --r-card: 18px; --r-pill: 999px;

  /* tailles de texte fixes (le hero et les grands titres vivent en clamp()) */
  --fs-micro: 10px; --fs-label: 11px; --fs-xs: 12px; --fs-sm: 14px;
  --fs-base:  16px; --fs-lg:    20px; --fs-xl: 26px;

  /* etats du tableau de bord meteo : une couleur et un halo par etat,
     jamais deux variantes du meme halo. */
  --go:   var(--go);  --warn: var(--warn);  --stop: var(--stop);
  --glow-go:   0 0 12px rgba(41,217,138,0.7);
  --glow-warn: 0 0 12px rgba(245,182,64,0.6);
  --glow-stop: 0 0 12px rgba(255,91,91,0.6);

  /* elevation : trois niveaux, jamais plus. Les halos de couleur
     (pastilles d'etat, accent turquoise, focus) ne sont pas des ombres. */
  --sh-1: 0 10px 30px -24px rgba(6,39,48,0.5);
  --sh-2: 0 18px 44px -26px rgba(6,39,48,0.55);
  --sh-3: 0 30px 70px -30px rgba(6,39,48,0.7);
}

*, *::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); }

/* Marge laterale mobile : Kadence sort le contenu de 16px de chaque cote
   (breakout full-bleed de .entry-content). Sans compensation, --pad-x tombe a
   20px sous 720px et il ne reste que 4px entre le texte et le bord de l'ecran.
   Mesure le 2026-09-10 a 390px sur les 15 pages. On rend les 16px. */
@media (max-width: 719px) {
  /* 20px de marge voulue + les 16px que Kadence nous mange = 36px. */
  :root { --pad-x: calc(var(--s-5) + var(--s-4)); }
}
.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: var(--fs-xs);
}
.turq { color: var(--turquoise); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: var(--fs-xs);
  padding: var(--s-4) var(--s-7);
  border-radius: var(--r-sm);
  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-deep);   /* 5,6:1 avec du blanc. --blue tombait a 3,66:1 */
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(10,113,128,0.7);
}
.btn-primary:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(12,147,166,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);
}
.hybrid .btn-outline {
  background: rgba(3,22,28,0.55);
  border-color: rgba(255,255,255,0.8);
}
.hybrid .btn-outline:hover {
  background: rgba(3,22,28,0.72);
  border-color: #fff;
}
.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: var(--s-5) var(--s-8); font-size: var(--fs-sm); }

/* ============================================================
   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 {
  /* Pleine largeur (2026-09-14) : bride a --maxw, la rangee manquait de place
     et les libelles « Nos bateaux », « En stock »... passaient sur 2 lignes
     jusqu'a ~1600 px d'ecran. */
  max-width: none;
  margin: 0;
  padding: 0 var(--pad-x);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.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 * var(--pad-x));
  padding-left: var(--s-9);
  padding-right: var(--s-10);
  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: var(--fs-lg);
  color: #fff;
  line-height: 1;
}
.nav-logo .word b { color: var(--turquoise); font-weight: 800; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  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: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  position: relative;
  padding: var(--s-1) 0;
  white-space: nowrap;                  /* un libelle = une ligne, jamais empile */
  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: var(--s-3); flex-shrink: 0; }

/* Numero de telephone dans le header (click-to-call, DA navy/turquoise) */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.3px;
  color: #fff;
  padding: var(--s-2) var(--s-3);
  border: 1px solid rgba(53,224,216, 0.38);
  border-radius: var(--r-md);
  background: rgba(53,224,216, 0.08);
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.nav-phone:hover {
  border-color: var(--turquoise);
  background: rgba(53,224,216, 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(53,224,216, 0.32);
  border-radius: var(--r-md);
  background: rgba(53,224,216, 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(53,224,216, 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: var(--r-hair);
  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 bateaux » (desktop, pleine largeur sous la barre)
   Tuiles PHOTO par univers : Jeanneau · Moteur | Prestige · Yachts.
   S'ouvre au survol (CSS pur) ; le JS ajoute
   le tactile / Échap / clic extérieur. Masqué < 941px (burger).
   ============================================================ */
.nav-mega-item { position: static; }   /* le panneau s'ancre sur .nav (sticky = bloc conteneur) */

.nav-mega-trigger { display: inline-flex; align-items: center; gap: var(--s-1); }
.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(53, 224, 216, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--sh-3);
  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.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: var(--s-5) var(--pad-x) var(--s-4);
}

/* UNE rangée compacte (2026-09-14, retour Tim « beaucoup trop gros ») :
   4 tuiles Jeanneau | rule | 1 tuile Prestige, toutes de la même taille.
   L'ancienne grille 2 x 2 + tuile portrait couvrait tout l'écran (~930 px). */
.nmega-groups {
  display: grid;
  grid-template-columns: minmax(0, 4fr) 1px minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 26px);
}
.nmega-col--boats { min-width: 0; }
.nmega-col--solo  { min-width: 0; 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);
}

/* ---------- Panneau « Nos moteurs » (tuiles sur fond blanc) ----------
   Depuis le 2026-09-29 : les 4 marques de moteurs (logos), libelle SOUS la pastille. */
.nav-mega--eng .nmega-groups { grid-template-columns: minmax(0, 1fr); }
.nmega-eng-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.nmega-eng {
  display: block; text-decoration: none; border-radius: var(--r-md); overflow: hidden;
  background: #fff; border: 1px solid rgba(255,255,255,0.14);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  /* Poses EXPLICITEMENT (2026-09-30), meme raison que le `small` plus bas :
     une tuile cliquable les recevait de `.nav-links a`, une tuile non
     cliquable (<span>) ne les recevait pas, et son trait de separation
     remontait de 4 px. Valeurs identiques au rendu precedent. */
  padding: var(--s-1) 0;
  position: relative;
}
.nmega-eng:hover, .nmega-eng:focus-visible {
  transform: translateY(-2px); outline: none;
  border-color: rgba(53,224,216,0.7);
  box-shadow: var(--sh-1);
}
.nmega-eng-photo { display: block; background: #fff; }
.nmega-eng-photo img { display: block; width: 100%; height: auto; }
/* Marque sans page (Mercury, Evinrude) : mention, pas lien. Meme pastille
   blanche pour que le logo se lise pareil, mais aucun signal cliquable
   (pas de curseur main, pas de soulevement, pas de liseré turquoise). */
.nmega-eng--static { cursor: default; transition: none; }
.nmega-eng--static:hover { transform: none; border-color: rgba(255,255,255,0.14); box-shadow: none; }

/* Variante logo (2026-09-29) : les 4 marques de moteurs, logo couleur
   (canevas 300x100 d'Extreme Marine) centre sur la pastille blanche. */
.nmega-eng-photo--logo { padding: var(--s-3) var(--s-6); }
.nmega-eng-txt {
  display: block; padding: var(--s-2) var(--s-3) var(--s-3);
  border-top: 1px solid var(--line-light); background: #fff;
}
.nmega-eng-txt b {
  display: block; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.4px; font-size: var(--fs-xs);
  color: var(--on-light); line-height: 1.2;
}
/* Capitales et interlettrage poses EXPLICITEMENT (2026-09-30) : ils etaient
   herites de `.nav-links a`, donc une tuile non cliquable (Mercury, Evinrude,
   rendue en <span>) sortait en minuscules serrees. Le style d'une tuile ne
   doit pas dependre de sa balise. Valeurs identiques au rendu precedent des
   tuiles cliquables : rien ne bouge pour Honda Marine et Hidea. */
.nmega-eng-txt small {
  display: block; margin-top: var(--s-hair); font-size: var(--fs-xs); color: var(--blue-deep); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.3px;
}
@media (max-width: 1100px) {
  .nmega-eng-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* titre d'univers centré, encadré de deux traits pointillés */
.nmega-cap {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.4px; font-size: var(--fs-label);
  color: var(--turquoise-soft);
  margin: 0 0 var(--s-3);
}
.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);
}

/* tuiles = photo bateau entier + nom de gamme en légende */
/* Jeanneau : 4 tuiles paysage sur une seule rangée */
.nmega-tiles--boats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 1vw, 14px);
}
.nmega-tiles--boats > * { flex: 0 1 calc((100% - 3 * clamp(10px, 1vw, 14px)) / 4); min-width: 0; }
.nmega-tiles--boats .nmega-photo { aspect-ratio: 16 / 9; }
/* Prestige : tuile hero qui remplit la hauteur de la colonne
   (les 2 colonnes lisent comme des blocs de hauteur égale) */
.nmega-tiles--solo  { flex: 1 1 auto; display: flex; }
.nmega-tiles--solo .nmega-tile { width: 100%; display: flex; }

.nmega-tile { display: block; text-decoration: none; transition: transform 0.22s ease; }
.nmega-tile:hover, .nmega-tile:focus-visible { transform: translateY(-2px); outline: none; }

.nmega-photo {
  position: relative; display: block;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--navy-800);
  box-shadow: var(--sh-1);
  transition: box-shadow 0.22s ease;
}
.nmega-col--solo .nmega-photo { aspect-ratio: auto; width: 100%; height: 100%; }
.nmega-tile:hover .nmega-photo,
.nmega-tile:focus-visible .nmega-photo { box-shadow: var(--sh-2); }
.nmega-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
/* cadrage bas : bateau dans le tiers inférieur de la source (ex. Merry Fisher) */
.nmega-photo--low img { object-position: center 80%; }
.nmega-tile:hover .nmega-photo img,
.nmega-tile:focus-visible .nmega-photo img { transform: scale(1.05); }
.nmega-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3, 22, 28, 0) 38%, rgba(3, 22, 28, 0.82) 100%);
}
.nmega-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: border-color 0.22s ease;
  pointer-events: none;
}
.nmega-tile:hover .nmega-photo::before,
.nmega-tile:focus-visible .nmega-photo::before { border-color: rgba(53, 224, 216, 0.7); }
.nmega-label {
  position: absolute; z-index: 3;
  left: 12px; right: 12px; bottom: 9px;
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: 0.3px;
  font-size: var(--fs-xs); color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* lien vers le hub complet */
.nmega-foot {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; font-size: var(--fs-xs);
  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); }

/* titres d'univers sur une ligne : sinon « Prestige · Yachts » passe sur 2
   lignes vers 1000 px et sa tuile sort plus basse que les autres */
.nmega-cap { white-space: nowrap; }
@media (min-width: 941px) and (max-width: 1199px) {
  .nmega-cap { letter-spacing: 1.4px; font-size: var(--fs-label); }
  .nmega-col--solo .nmega-cap::before,
  .nmega-col--solo .nmega-cap::after { display: none; }
}
@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.is-open .nav-mega { transform: none; }
  .nmega-photo img,
  .nmega-tile:hover .nmega-photo img { transition: none; 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); }

/* Fond photo du DERNIER CTA d'une page (arbitrage Tim 2026-09-21, precise le
   meme jour : les sections de contenu et les presentations de modeles gardent
   leur fond clair, seul le CTA de fin porte la photo). La photo est servie
   depuis le mu-plugin (jamais depuis uploads, meme regle que la vignette OG)
   et recouverte d'un voile clair : elle fait respirer le bas de page sans
   toucher au contraste du panneau teal pose dessus.
   Le ::before est en z-index -1 dans le contexte cree par `isolation: isolate` :
   il se peint au-dessus du fond --paper et sous le contenu, sans pouvoir passer
   derriere la section. */
.ty-cta-photo { position: relative; isolation: isolate; }
.ty-cta-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(241,248,249,0.87), rgba(241,248,249,0.87)),
    url("img/bg-section-light.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .eyebrow { color: var(--blue-deep); margin-bottom: var(--s-2); }
.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: var(--s-2) !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: var(--s-6);
  flex-wrap: wrap;
}
.head-link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: var(--fs-xs);
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: gap 0.2s;
}
.head-link:hover { gap: var(--s-3); }

/* ============================================================
   FOOTER - partial commun
   ============================================================ */
.footer {
  background: var(--ink);
  color: #fff;
  /* Le haut du footer respire deja du padding-bas de la derniere section :
     88px de plus au-dessus du bandeau marques faisaient un trou (retour Tim). */
  padding: clamp(38px, 3.6vw, 52px) 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* ---------- Bandeau marques, au-dessus des colonnes du footer ---------- */
.footer-brands {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--s-3) var(--s-7);
  padding: 0 0 clamp(30px, 4vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: clamp(34px, 4vw, 48px);
}
.footer-brands .fb-label {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.6px; font-size: var(--fs-label); color: var(--on-dark-faint);
  flex: 0 0 100%; text-align: center;
}
.footer-brands .fb-logos {
  display: flex; align-items: flex-end; justify-content: center;
  flex-wrap: wrap; gap: 0 var(--s-6);
}
/* Trois lockups de proportions differentes : on cale les hauteurs a l'oeil,
   comme le bandeau de l'accueil (le mot pese plus lourd chez Prestige). */
.footer-brands .fb-logo { display: block; width: auto; opacity: 0.82; }
.footer-brands .fb-logo--j { height: 34px; }
.footer-brands .fb-logo--p { height: 25px; }
.footer-brands .fb-logo--h { height: 21px; }
.footer-brands .fb-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.22); margin-bottom: var(--s-2);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.25fr 1.4fr;
  gap: var(--s-9);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Les 8 gammes sur deux sous-colonnes : une seule colonne allongeait le
   footer et laissait un grand vide sous "Nous trouver". */
.footer-ranges {
  margin: 0 !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: var(--s-3) var(--s-5);
}

/* ---------- Colonne "Nous trouver" : statut + boutons ---------- */
.footer-status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-soft);
}
.footer-status .fs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--on-dark-faint); flex: 0 0 auto;
}
.footer-status.is-open { color: #6fe3b4; }
.footer-status.is-open .fs-dot { background: #46d39a; box-shadow: 0 0 0 4px rgba(70,211,154,0.16); }
.footer-status.is-closed { color: var(--on-dark-soft); }
.footer-status.is-closed .fs-dot { background: rgba(255,255,255,0.35); }
.footer-hours-lines {
  color: var(--on-dark-faint); font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 var(--s-5);
}
.footer-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fcta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.4px;
  font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fcta svg { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
.fcta--call {
  background: var(--blue); color: #fff; border: 1px solid transparent;
}
.fcta--call:hover, .fcta--call:focus-visible { background: var(--blue-bright); color: #fff; }
.fcta--map {
  background: rgba(255,255,255,0.04); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}
.fcta--map:hover, .fcta--map:focus-visible {
  border-color: var(--turquoise); color: #fff; background: rgba(53,224,216,0.12);
}
.footer-brand .word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: var(--fs-xl);
  color: #fff;
  margin-bottom: var(--s-5);
  display: inline-block;
}
.footer-brand .word b { color: var(--turquoise); }
.footer-brand p {
  color: var(--on-dark-soft);
  font-size: var(--fs-sm);
  max-width: 320px;
  line-height: 1.7;
}
/* Reseaux sociaux du footer (2026-09-21). Les 3 comptes existent et sont
   actifs ; ils sont declares une seule fois dans ty_socials() (chrome) et
   servent aussi au `sameAs` du JSON-LD. */
.footer-social { list-style: none; display: flex; gap: var(--s-2); margin-top: var(--s-5); padding: 0; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.04);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible { color: #fff; border-color: var(--turquoise); background: rgba(53,224,216,0.14); }
.footer-social svg { width: 19px; height: 19px; display: block; }
.footer-social--m { justify-content: center; margin: var(--s-4) 0 var(--s-1); }
@media (prefers-reduced-motion: reduce) { .footer-social a { transition: none; } }

.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--fs-xs);
  color: var(--turquoise);
  margin-bottom: var(--s-5);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; }
.footer-col a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
.footer-col address {
  font-style: normal;
  color: var(--on-dark-soft);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.footer-col address a { color: var(--turquoise-soft); text-decoration: none; }
.footer-hours { margin-top: var(--s-5); }
.footer-hours .fh-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: var(--fs-label);
  color: var(--turquoise-soft);
  display: block;
  margin-bottom: var(--s-2);
}
.footer-hours .fh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.footer-hours .fh-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  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: var(--s-6) 0 var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.footer-bottom p { color: var(--on-dark-faint); font-size: var(--fs-xs); }
.footer-bottom .grp {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: var(--fs-label);
  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-col address a { color: #fff; text-decoration: none; font-weight: 700; }
.footer-col address a:hover { color: var(--turquoise); }

/* Liens legaux du bas de footer (desktop) */
.footer-bottom .footer-legal {
  display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center;
}
.footer-bottom .footer-legal a {
  color: var(--on-dark-soft); text-decoration: none; font-size: var(--fs-xs);
}
.footer-bottom .footer-legal a:hover { color: #fff; text-decoration: underline; }

/* ---------- 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: var(--s-1);
}
.footer-mobile .footer-m-phone {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); letter-spacing: 0.5px;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid rgba(53,224,216,0.35);
  background: rgba(53,224,216,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: var(--fs-sm); line-height: 1.5; margin: 0;
}
.footer-mobile .footer-m-hours {
  color: var(--on-dark-faint); font-size: var(--fs-xs); line-height: 1.5; margin: 0;
}
.footer-mobile .footer-m-legal {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2); flex-wrap: wrap;
}
.footer-mobile .footer-m-legal a {
  color: var(--on-dark-soft); text-decoration: none; font-size: var(--fs-xs);
}
.footer-mobile .footer-m-legal a:hover { color: #fff; }
.footer-mobile .footer-m-sep { color: var(--on-dark-faint); }
.footer-mobile .footer-m-tel { margin: var(--s-hair) 0 0; }
.footer-mobile .footer-m-tel a {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
  color: #fff; text-decoration: none; letter-spacing: 0.4px;
}
.footer-mobile .footer-m-tel a:hover { color: var(--turquoise); }

.footer-mobile .footer-m-credit {
  color: var(--on-dark-faint); font-size: var(--fs-label); 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; }

.footer-actions--m { justify-content: center; }
.footer-mobile .footer-status { margin: var(--s-hair) 0 0; }

@media (max-width: 768px) {
  .footer { padding-top: var(--s-8); }
  .footer-grid,
  .footer-bottom { display: none !important; }
  .footer-brands { gap: var(--s-3) var(--s-5); padding-bottom: var(--s-6); margin-bottom: var(--s-6); }
  .footer-brands .fb-logos { gap: 0 var(--s-5); }
  .footer-brands .fb-logo--j { height: 27px; }
  .footer-brands .fb-logo--p { height: 20px; }
  .footer-brands .fb-logo--h { height: 17px; }
  .footer-mobile {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: var(--s-3); padding: var(--s-2) 0 var(--s-7);
  }
}

/* ---------- 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: var(--s-5);
  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: var(--s-5); padding-right: var(--s-8); }
}

/* ============================================================
   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: var(--s-7); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Header : paliers entre le burger (940) et la pleine rangee ----------
   Le header est pleine largeur et les libelles ne passent JAMAIS a la ligne
   (2026-09-14). La rangee complete (logo + nav + numero en toutes lettres +
   CTA) demande ~1400 px ; en dessous on rend de la place par crans au lieu de
   remonter le burger, pour garder la nav horizontale sur portables et iPad
   paysage. Chaque cran est verifie par mesure (bord droit du CTA <= ecran).
   NB : ne PAS « reparer » avec min-width:0 sur le <nav> : son contenu passe
   alors SOUS .nav-right et les libelles se chevauchent. */
@media (min-width: 941px) and (max-width: 1439px) {
  .nav-phone-num { display: none; }          /* numero en icone seule, le tel: reste cliquable */
  .nav-phone { padding: var(--s-2); }
  .nav-inner { gap: var(--s-4); }
  .nav-links { gap: var(--s-4); }
  .nav-links > li > a { letter-spacing: 0.6px; }
  .nav-right { gap: var(--s-2); }
  .nav-right .btn { padding-left: var(--s-5); padding-right: var(--s-5); letter-spacing: 0.6px; }
}
@media (min-width: 941px) and (max-width: 1199px) {
  .nav-inner { gap: var(--s-3); padding-right: var(--s-5); }
  .nav-logo { padding-left: var(--s-7); padding-right: var(--s-9); }
  .nav-logo-img { height: 46px; }
  .nav-links { gap: var(--s-3); }
  .nav-links > li > a { font-size: var(--fs-xs); letter-spacing: 0.3px; }
  .nav-right { gap: var(--s-2); }
  .nav-right .btn { padding-left: var(--s-3); padding-right: var(--s-3); letter-spacing: 0.3px; }
}
@media (min-width: 941px) and (max-width: 1019px) {
  .nav-inner { padding-right: var(--s-4); }
  .nav-logo { padding-left: var(--s-6); padding-right: var(--s-8); }
  .nav-logo-img { height: 40px; }
  .nav-links { gap: var(--s-2); }
  .nav-links > li > a { font-size: var(--fs-label); letter-spacing: 0.2px; }
  .nav-right .btn { padding-left: var(--s-3); padding-right: var(--s-3); }
}

/* ============================================================
   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: var(--sh-1);
    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(53,224,216,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: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-5);
  }
  .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: var(--r-md);
    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(53,224,216,0.12); }
  .em-drawer-close span {
    position: absolute;
    top: 50%; left: 50%;
    width: 19px; height: 2.2px;
    border-radius: var(--r-hair);
    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: var(--fs-sm);
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--blue-bright), var(--blue) 45%, var(--blue-deep));
    box-shadow: 0 12px 26px -12px rgba(12,147,166,0.7);
  }
  .em-drawer-cta:hover { filter: brightness(1.06); }

  /* --- Liste de navigation --- */
  .em-drawer-nav { padding: var(--s-1) 0 var(--s-1); }
  .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,
  .em-dnav .em-dnav-static {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: 0.2px;
    color: #fff;
    text-decoration: none;
    padding: var(--s-4) var(--s-6);
    transition: color 0.18s, background 0.18s;
  }
  .em-dnav a:hover,
  .em-dnav a:focus-visible { color: var(--turquoise); background: rgba(53,224,216,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: var(--s-hair) 0 var(--s-2); background: rgba(0,0,0,0.22); }
  .em-dnav-sub a,
  .em-dnav-sub .em-dnav-static {
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: none;
    color: rgba(255,255,255,0.74);
    padding: var(--s-3) var(--s-6) var(--s-3) var(--s-7);
  }
  .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(53,224,216,0.07); }
  /* Marque sans page : lisible, mais visiblement pas un lien. */
  .em-dnav .em-dnav-static { color: rgba(255,255,255,0.5); cursor: default; }

  /* --- Bloc contact --- */
  .em-drawer-contact { padding: var(--s-5) var(--s-6) var(--s-2); margin-top: auto; }
  .em-drawer-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: var(--fs-label);
    color: var(--turquoise);
    margin: 0 0 var(--s-3);
  }
  .em-drawer-phone {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    padding: var(--s-3) var(--s-4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.03);
    transition: border-color 0.2s, background 0.2s;
  }
  .em-drawer-phone:hover { border-color: rgba(53,224,216,0.4); background: rgba(53,224,216,0.06); }
  .em-drawer-phone-ico {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    background: rgba(53,224,216,0.12);
    color: var(--turquoise);
  }
  .em-drawer-phone-ico svg { width: 20px; height: 20px; }
  .em-drawer-phone-txt { display: flex; flex-direction: column; gap: var(--s-hair); line-height: 1.1; }
  .em-drawer-phone-txt small { font-size: var(--fs-xs); color: rgba(255,255,255,0.55); }
  .em-drawer-phone-txt b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: #fff; letter-spacing: 0.4px; }

  .em-drawer-contact-btn {
    display: block;
    text-align: center;
    margin-top: var(--s-3);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--fs-xs);
    color: #fff;
    text-decoration: none;
    padding: var(--s-3) var(--s-5);
    border: 1px solid rgba(53,224,216,0.4);
    border-radius: var(--r-md);
    background: transparent;
    transition: background 0.2s, border-color 0.2s;
  }
  .em-drawer-contact-btn:hover { background: rgba(53,224,216,0.12); border-color: var(--turquoise); }

  /* --- Pied du drawer --- */
  .em-drawer-foot { padding: var(--s-5) var(--s-6) var(--s-6); text-align: center; }
  .em-drawer-rule {
    display: block;
    height: 1px;
    margin: var(--s-1) 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: var(--s-2);
    margin: var(--s-4) 0;
    font-size: var(--fs-sm);
    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: var(--s-5) 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; }
  /* Le numero header reste visible sur mobile, compacte. */
  .nav-phone { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); gap: var(--s-1); }
}
/* 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: var(--s-2); }
}

/* ============================================================
   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: var(--fs-label); color: var(--on-dark-soft);
  margin-bottom: var(--s-6); display: flex; gap: var(--s-2); 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(53,224,216,0.28) 0%, transparent 48%),
    radial-gradient(90% 80% at 12% 95%, rgba(12,147,166,0.36) 0%, transparent 55%),
    linear-gradient(155deg, var(--ink) 0%, var(--navy-900) 46%, var(--navy-800) 78%, var(--navy-700) 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: var(--s-5);
  /* (le comportement mobile de tout le hero est regroupe plus bas, cf. « hero mobile ») */
  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: #fff; font-size: clamp(15px,1.5vw,18px); line-height: 1.75; margin-bottom: var(--s-7); }
.page-hero .lead b { color: #fff; font-weight: 600; }
.page-hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- Cartes marque (hub /nos-marques/) ---------- */
.brand-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.brand-card {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  padding: var(--s-7) var(--s-7); min-height: 220px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff;
  background: linear-gradient(155deg, var(--ink) 0%, var(--navy-800) 60%, #0A7180 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%, var(--navy-800) 60%, #0aa0b0 120%); }
.brand-card:nth-child(4n+3) { background: linear-gradient(155deg, #06131d 0%, var(--navy-700) 60%, #0C93A6 120%); }
.brand-card:nth-child(4n+4) { background: linear-gradient(155deg, var(--ink) 0%, var(--navy-800) 55%, var(--navy-700) 120%); }
.brand-card:hover { transform: translateY(-4px); border-color: rgba(53,224,216,0.4); box-shadow: var(--sh-2); }
.brand-card .bc-tag { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: var(--fs-micro); 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: var(--fs-xl); margin-bottom: var(--s-1); color: #fff; /* carte navy : sinon titre anthracite Kadence invisible */ }
.brand-card p { color: var(--on-dark-soft); font-size: var(--fs-sm); line-height: 1.55; }
.brand-card .bc-go { margin-top: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: var(--fs-label); 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: var(--s-3); align-items: flex-end;
  background: #fff; border: 1px solid var(--line-light);
  border-radius: var(--r-card); padding: var(--s-6) var(--s-6);
  box-shadow: var(--sh-1);
  margin-bottom: var(--s-8);
}
.filter { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-width: 150px; }
.filter label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: var(--fs-label); color: var(--on-light-soft); }
.filter select,
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--on-light);
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-3); 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: var(--s-6); }
.boat-card {
  background: #fff; border: 1px solid var(--line-light);
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column;
}
.boat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.boat-visual {
  height: 200px; position: relative;
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 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: var(--fs-label); 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: var(--fs-micro); color: #fff;
  background: var(--blue); padding: var(--s-1) var(--s-3); border-radius: var(--r-card);
}
.boat-badge.occ { background: var(--turquoise); color: var(--on-light); }
.boat-body { padding: var(--s-6) var(--s-6) var(--s-6); 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: var(--fs-lg); color: var(--on-light); margin-bottom: var(--s-1); }
.boat-year { font-size: var(--fs-xs); color: var(--on-light-soft); margin-bottom: var(--s-4); }
.boat-specs { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); border-top: 1px solid var(--line-light); padding-top: var(--s-4); }
.boat-spec { font-size: var(--fs-xs); 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: var(--fs-xs); color: var(--on-light); }
.boat-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-3); flex-wrap: wrap; }
.boat-foot .btn { flex: 0 0 auto; }
.boat-price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--blue); }

/* ---------- Points de reassurance ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); margin-top: var(--s-6); }
.trust-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--on-light-soft); }
.trust-item svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }
.page-hero .trust-item { color: rgba(255,255,255,0.86); }
.page-hero .trust-item svg { color: var(--turquoise); }
.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: var(--s-8); align-items: start; }
.info-list { display: flex; flex-direction: column; gap: var(--s-6); }
.info-item { display: flex; gap: var(--s-4); align-items: flex-start; }
.info-ic {
  width: 46px; height: 46px; border-radius: var(--r-md); flex-shrink: 0;
  background: linear-gradient(135deg, rgba(12,147,166,0.12), rgba(53,224,216,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: var(--fs-sm); color: var(--on-light); margin-bottom: var(--s-1); }
.info-item p, .info-item address { font-style: normal; color: var(--on-light-soft); font-size: var(--fs-sm); line-height: 1.65; }
.info-item a { color: var(--blue); text-decoration: none; }
.map-ph {
  border-radius: var(--r-card); overflow: hidden; min-height: 360px;
  position: relative; border: 1px solid var(--line-light);
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 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: var(--fs-xs); color: rgba(255,255,255,0.6); }

/* ---------- Formulaires (contact, devis) ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line-light);
  border-radius: var(--r-card); padding: clamp(26px,4vw,44px);
  box-shadow: var(--sh-3);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.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: var(--fs-label); color: var(--on-light); }
.field textarea { resize: vertical; min-height: 130px; }
.field .req { color: var(--blue); }
.form-note { font-size: var(--fs-xs); color: var(--on-light-soft); margin-top: var(--s-4); }

/* ---------- Services detailles ---------- */
.svc-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-9); 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: var(--r-card); min-height: 300px;
  background: linear-gradient(150deg, var(--ink) 0%, var(--navy-800) 60%, #0A7180 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: var(--fs-label); 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: var(--s-4); }
.svc-detail .kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: var(--fs-xs); color: var(--blue); margin-bottom: var(--s-3); }
.section-dark .svc-detail .kicker { color: var(--turquoise); }
.svc-detail p { color: inherit; opacity: 0.86; font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--s-5); }
.check-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.check-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.55; }
.check-list svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; margin-top: var(--s-hair); }
.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; }
.svc-detail-media.has-photo { padding: 0; }
.svc-detail-media.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.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: var(--r-md);
  padding: var(--s-3) var(--s-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-bottom: var(--s-4);
  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: var(--s-4) var(--s-5); 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: var(--s-3); }
.motor-tile {
  background: var(--navy-850);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  min-height: 120px;
}
.motor-head {
  background: #fff; border-radius: var(--r-sm); padding: var(--s-2) var(--s-3);
  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: var(--fs-sm); color: #fff;
}
.motor-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.8px; font-size: var(--fs-sm); color: #fff;
}
.motor-role { font-size: var(--fs-xs); 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: var(--fs-micro); color: #fff;
  background: rgba(5,11,21,0.6); border: 1px solid rgba(255,255,255,0.18);
  padding: var(--s-hair) var(--s-2); border-radius: var(--r-card);
}

@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; }
/* Premiere section COLLEE au header : neutralise l'espacement vertical que
   Kadence pose au-dessus du contenu (#primary margin-top, .entry-content-wrap
   padding-top) + en bas avant le footer. */
.em-content-page #primary,
.em-content-page .content-area,
.em-content-page #main,
.em-content-page .content-wrap,
.em-content-page .entry-content-wrap { margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0; }

/* 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: var(--fs-micro); color: var(--on-light);
  background: var(--turquoise); padding: var(--s-1) var(--s-3); border-radius: var(--r-card);
  box-shadow: 0 6px 16px -6px rgba(53,224,216,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: var(--fs-micro); color: #fff;
  background: #b3202a; padding: var(--s-1) var(--s-3); border-radius: var(--r-card);
}
.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: var(--r-card);
  padding: clamp(28px,5vw,48px); text-align: center;
  box-shadow: var(--sh-1);
}
.em-boats-none p { color: var(--on-light-soft); font-size: var(--fs-sm); margin-bottom: var(--s-5); max-width: 560px; margin-left: auto; margin-right: auto; }
.em-boats-empty { margin-top: var(--s-6); color: var(--on-light-soft); font-size: var(--fs-sm); }

/* ============================================================
   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: var(--s-4); flex-wrap: wrap; margin: var(--s-1) 0 var(--s-6); }
.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: var(--fs-label); padding: var(--s-2) var(--s-3); border-radius: var(--r-card);
  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(53,224,216,0.18); color: var(--turquoise-soft); border-color: rgba(53,224,216,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); }

.boat-single-cols {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--s-9); align-items: start;
}
.boat-single-cols > * { min-width: 0; }

.boat-gallery-main {
  border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-light);
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 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: var(--fs-xs); color: rgba(255,255,255,0.6); }
.boat-gallery-thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.boat-gallery-thumb {
  width: 92px; height: 68px; padding: 0; border-radius: var(--r-md); 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: var(--s-5);
}
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); }
.spec-table th, .spec-table td {
  text-align: left; padding: var(--s-3) var(--s-1); border-bottom: 1px solid var(--line-light); font-size: var(--fs-sm);
}
.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: var(--fs-sm); margin-bottom: var(--s-5); }
.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: var(--fs-base); line-height: 1.75; }
.boat-desc-text p { margin-bottom: var(--s-3); }

.boat-cta-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-8); 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: var(--s-3); }
.boat-cta-inner .kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: var(--fs-xs); color: var(--turquoise); margin-bottom: var(--s-3); }
.boat-cta-inner p { color: var(--on-dark-soft); font-size: var(--fs-sm); line-height: 1.7; }
.boat-cta-actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; }

@media (max-width: 940px) {
  .boat-single-cols { grid-template-columns: 1fr; gap: var(--s-7); }
  .boat-cta-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .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: var(--fs-xs); color: var(--blue);
  margin: var(--s-6) 0 var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-light);
}
.emr-form-card .emr-legend:first-of-type { margin-top: var(--s-1); }

/* 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: var(--s-3); align-items: flex-start;
  background: rgba(12,147,166,0.06); border: 1px solid rgba(12,147,166,0.18);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-top: var(--s-6);
  font-size: var(--fs-sm); 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: var(--s-hair); }
.emr-honesty-strong { background: rgba(12,147,166,0.08); margin-top: var(--s-6); }

.emr-actions { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.emr-error {
  margin-top: var(--s-3); color: #b0182b; font-size: var(--fs-sm); font-weight: 600;
  background: rgba(176,24,43,0.07); border: 1px solid rgba(176,24,43,0.25);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-3);
}

/* --- 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, var(--ink) 0%, var(--navy-800) 60%, #0A7180 120%);
  border-radius: var(--r-card); padding: clamp(28px, 5vw, 44px) var(--s-6);
  margin: var(--s-1) 0 var(--s-1);
}
.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: var(--fs-sm); color: var(--turquoise-soft);
}
.emr-next { margin-top: var(--s-6); }
.emr-next p { color: var(--on-light-soft); font-size: var(--fs-sm); line-height: 1.7; }

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

/* ==================================================================
   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: var(--r-card); padding: clamp(28px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-7); flex-wrap: wrap;
}
.reprise-band::before {
  content: ""; position: absolute; top: -60%; right: -6%;
  width: 42%; height: 220%; background: rgba(53,224,216,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 var(--s-2);
}
.reprise-band-txt p { color: var(--on-dark-soft); font-size: var(--fs-base); 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: var(--fs-sm); margin-top: var(--s-2); }

.emm-card {
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-radius: var(--r-card);
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--sh-2);
  max-width: 1040px; margin: 0 auto;
}

/* --- Verdict --- */
.emm-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6);
  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: var(--s-2); }
.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: var(--fs-sm); 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: var(--s-3); margin-bottom: var(--s-5);
}
.emm-tile {
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.emm-tile-k {
  font-size: var(--fs-xs); 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: var(--fs-sm); font-weight: 600; color: var(--on-light-soft); }
.emm-tile-v.emm-na, .emm-na { color: #9aa7b5; font-size: var(--fs-lg); }
.emm-tile-sub { font-size: var(--fs-sm); color: var(--on-light-soft); display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.emm-tile-note { font-size: var(--fs-xs); color: var(--on-light); font-weight: 600; }
.emm-tile-range { font-size: var(--fs-xs); color: #a9760a; font-weight: 600; }
.emm-tile-link { font-size: var(--fs-xs); font-weight: 700; color: var(--blue); text-decoration: none; margin-top: var(--s-hair); }
.emm-tile-link:hover { text-decoration: underline; }
.emm-arrow { display: inline-block; font-size: var(--fs-sm); line-height: 1; color: var(--blue); }

.emm-conf {
  display: inline-block; margin-top: var(--s-1); font-size: var(--fs-label); font-weight: 700;
  padding: var(--s-hair) var(--s-2); border-radius: var(--r-card); 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: var(--s-hair); }
.emm-tide-item { font-size: var(--fs-sm); color: var(--on-light); }

.emm-tile-vig .emm-vig-label { font-size: var(--fs-base); }
.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: var(--fs-sm); }

/* --- Sources / transparence --- */
.emm-sources {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: baseline;
  font-size: var(--fs-xs); color: var(--on-light-soft);
  border-top: 1px dashed var(--line-light); padding-top: var(--s-3);
}
.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: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); }
.emm-updated { font-size: var(--fs-xs); color: var(--on-light-soft); }
.emm-down p { color: var(--on-light-soft); font-size: var(--fs-sm); line-height: 1.7; margin: 0; }
.emm-down a { color: var(--blue); font-weight: 600; }

/* --- Page detaillee --- */
.emm-hero { background: linear-gradient(150deg, var(--ink) 0%, var(--navy-800) 62%, #0A7180 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: var(--fs-base); line-height: 1.7; max-width: 720px; margin-top: var(--s-3); }
.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: var(--s-9) 0 var(--s-5);
}
.emm-hours { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); }
.emm-hour {
  flex: 0 0 auto; min-width: 84px; text-align: center;
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-2); display: flex; flex-direction: column; gap: var(--s-1);
}
.emm-hour-t { font-size: var(--fs-xs); font-weight: 700; color: var(--on-light-soft); }
.emm-hour-w { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--on-light); }
.emm-hour-w small { font-size: var(--fs-label); font-weight: 600; color: var(--on-light-soft); margin-left: var(--s-hair); }
.emm-hour-d { font-size: var(--fs-xs); color: var(--blue); font-weight: 700; }
.emm-hour-s { font-size: var(--fs-xs); color: var(--on-light-soft); }

.emm-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--s-3); }
.emm-day {
  border: 1px solid var(--line-light); border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  background: var(--paper-2); position: relative;
}
.emm-day-t { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; font-size: var(--fs-lg); 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: var(--s-1); margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--on-light-soft); }
.emm-day-facts span { display: flex; align-items: center; gap: var(--s-2); }
.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: var(--fs-sm); line-height: 1.7; max-width: 760px; }
.emm-method { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line-light); font-size: var(--fs-xs); }
.emm-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.emm-detail-col h3 { font-size: var(--fs-base); color: var(--on-light); margin: 0 0 var(--s-2); }
.emm-detail-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.emm-detail-table th { text-align: left; font-weight: 600; color: var(--on-light-soft); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-light); }
.emm-detail-table td { text-align: right; color: var(--on-light); padding: var(--s-2) 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: var(--r-card); overflow: hidden; box-shadow: var(--sh-1);
}
.emm-map-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-3) var(--s-3) 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: var(--fs-sm); font-weight: 700;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); 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: var(--s-3); }
.emm-map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.emm-map-note { font-size: var(--fs-xs); color: var(--on-light-soft); padding: var(--s-3) var(--s-4) var(--s-3); margin: 0; }

/* ---- Split compas / maree ---- */
.emm-split { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s-5); margin-top: var(--s-7); align-items: stretch; }
.emm-panel {
  background: var(--paper-2); border: 1px solid var(--line-light);
  border-radius: var(--r-card); padding: var(--s-6) var(--s-6) var(--s-6); display: flex; flex-direction: column;
}
.emm-panel-t {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  font-size: var(--fs-base); color: var(--on-light); margin: 0 0 var(--s-4);
}

/* ---- Rose des vents / compas ---- */
.emm-compass { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); 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: var(--fs-sm); 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: var(--fs-xs); font-weight: 600; color: var(--on-light-soft); }
.emm-c-gust { font-size: var(--fs-label); font-weight: 700; color: var(--on-light-soft); margin-top: var(--s-hair); }
.emm-compass-foot { text-align: center; }
.emm-c-from { display: block; font-size: var(--fs-sm); color: var(--on-light); font-weight: 600; }
.emm-c-hint { display: block; font-size: var(--fs-xs); color: var(--on-light-soft); margin-top: var(--s-1); }
.emm-compass-empty { color: var(--on-light-soft); font-size: var(--fs-sm); padding: var(--s-6) 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: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-card); color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(53,224,216,0.18), transparent 55%),
    linear-gradient(160deg, var(--navy-900) 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: var(--s-3); margin-bottom: var(--s-1); }
.emt-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.6px; font-size: var(--fs-micro); color: var(--turquoise-soft); margin-bottom: var(--s-1);
}
.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: var(--s-2); }
.emt-now-h small { font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,0.62); }
.emt-trend { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.6px; padding: var(--s-hair) var(--s-2) var(--s-hair) var(--s-1); border-radius: var(--r-pill); align-self: center; }
.emt-trend svg { width: 13px; height: 13px; }
.emt-trend.is-up { color: #8CF0EA; background: rgba(53,224,216,0.14); }
.emt-trend.is-up svg { fill: #35E0D8; }
.emt-trend.is-down { color: #9fc0ef; background: rgba(23,179,196,0.16); }
.emt-trend.is-down svg { fill: #17B3C4; 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: var(--fs-xs); color: rgba(255,255,255,0.62); margin-top: var(--s-hair); }

.emt-chartwrap { flex: 1; min-height: 0; margin: var(--s-1) calc(-1 * var(--s-1)) 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: var(--fs-xs); 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: var(--fs-xs); font-weight: 800; font-family: var(--font-display); }
.emt-labv  { fill: rgba(255,255,255,0.6); font-size: var(--fs-label); font-weight: 600; }
.emt-pt    { stroke: #071324; stroke-width: 1.5; }
.emt-pt.is-high  { fill: #35E0D8; }
.emt-pt.is-low   { fill: #17B3C4; }
.emt-ptring.is-high { fill: rgba(53,224,216,0.18); }
.emt-ptring.is-low  { fill: rgba(23,179,196,0.20); }
.emt-nowline { stroke: rgba(255,255,255,0.34); stroke-width: 1.4; stroke-dasharray: 2 4; }
.emt-nowdot  { fill: #fff; stroke: #35E0D8; stroke-width: 2.5; }
.emt-nowpulse { fill: #35E0D8; 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: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }
.emt-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.emt-chip { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); }
.emt-chip b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-micro); letter-spacing: 0.5px; }
.emt-chip.is-high b { color: #35E0D8; }
.emt-chip.is-low b  { color: #17B3C4; }
.emt-chip span { color: rgba(255,255,255,0.55); }
.emt-src { font-size: var(--fs-xs); font-weight: 700; color: var(--turquoise-soft); text-decoration: none; white-space: nowrap; }
.emt-src:hover { text-decoration: underline; }
.emt-note { font-size: var(--fs-micro); line-height: 1.5; color: rgba(255,255,255,0.4); margin: var(--s-2) 0 0; }
.emt-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin: auto 0; }
.emt-empty-t { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-base); 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: var(--s-1); -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: var(--fs-micro); 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: var(--fs-xs); font-weight: 800; font-family: var(--font-display); }
.emm-graph-h { fill: var(--on-light-soft); font-size: var(--fs-xs); font-weight: 700; }
.emm-graph-arrow { fill: var(--blue); }
.emm-graph-swell { fill: #34b3c2; font-size: var(--fs-label); font-weight: 700; }
.emm-graph-key { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); }
.emm-gk { font-size: var(--fs-xs); color: var(--on-light-soft); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-1); }
.emm-gk::before { content: ""; width: 14px; height: 3px; border-radius: var(--r-hair); 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: var(--s-1);
  }
  .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%, var(--navy-900) 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: var(--r-hair);
  vertical-align: middle; margin-right: var(--s-3); margin-bottom: var(--s-1);
  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(53,224,216,0.12), transparent 55%),
    linear-gradient(160deg, var(--navy-900) 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: var(--r-card); padding: var(--s-6) var(--s-6) var(--s-5);
}
.emm-dash .emm-detail-grid {
  border-radius: var(--r-card); 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: var(--go); background: rgba(41,217,138,0.08); }
.emm-dash .emm-verdict.is-go   .emm-dot { background: var(--go); box-shadow: var(--glow-go); }
.emm-dash .emm-verdict.is-go   .emm-verdict-label { color: #5fe3a6; }
.emm-dash .emm-verdict.is-warn { border-left-color: var(--warn); background: rgba(245,182,64,0.09); }
.emm-dash .emm-verdict.is-warn .emm-dot { background: var(--warn); box-shadow: var(--glow-warn); }
.emm-dash .emm-verdict.is-warn .emm-verdict-label { color: #ffcf72; }
.emm-dash .emm-verdict.is-stop { border-left-color: var(--stop); background: rgba(255,91,91,0.10); }
.emm-dash .emm-verdict.is-stop .emm-dot { background: var(--stop); box-shadow: var(--glow-stop); }
.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(53,224,216,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: #8CF0EA; }
.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: #8CF0EA; }
.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: var(--go); box-shadow: var(--glow-go); }
.emm-dash .emm-day.is-warn .emm-day-dot { background: var(--warn); box-shadow: var(--glow-warn); }
.emm-dash .emm-day.is-stop .emm-day-dot { background: var(--stop); box-shadow: var(--glow-stop); }

/* --- 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: var(--fs-xs);
  line-height: 1.2;
}
.em-topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-2) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.em-topbar-item { display: inline-flex; align-items: center; gap: var(--s-2); 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); }
/* Sous 860 px les horaires sortent : deux lignes de coordonnees dans un bandeau
   de telephone, c'est un mur. L'adresse reste, c'est elle qui sert a venir. */
@media (max-width: 860px) {
  .em-topbar-hours, .em-topbar-sep { display: none; }
}
@media (max-width: 560px) {
  :root { --topbar-h: 22px; }
  .em-topbar { font-size: var(--fs-label); }
  .em-topbar-inner { gap: var(--s-2); padding: var(--s-1) var(--s-3); }
}

/* ============================================================
   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: var(--s-hair);
  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: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s-5); }
.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%);
  max-height: calc(100vh - 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: var(--r-card);
  box-shadow: var(--sh-3);
  padding: var(--s-7) var(--s-7) var(--s-6);
  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: 14px; right: 14px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm); color: var(--on-dark-soft); cursor: pointer;
}
.em-modal-x:hover { color: #fff; border-color: var(--turquoise); }
.em-modal-x svg { width: 17px; height: 17px; }
.em-modal-eyebrow { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise-soft); margin: 0 0 var(--s-1); }
.em-modal-dialog h2 { color: #fff; margin: 0 0 var(--s-1); font-size: var(--fs-xl); }
.em-modal-sub { color: var(--on-dark-soft); margin: 0 0 var(--s-5); font-size: var(--fs-sm); }
.em-modal-form { display: flex; flex-direction: column; gap: var(--s-3); }
.em-field-row { display: flex; gap: var(--s-3); }
.em-field-row .em-field { flex: 1; }
.em-field { display: flex; flex-direction: column; gap: var(--s-1); }
.em-field > span { font-size: var(--fs-xs); 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: var(--r-md); padding: var(--s-3) var(--s-3);
  color: #fff; font-size: var(--fs-sm); font-family: inherit;
}
.em-field input:focus, .em-field textarea:focus { outline: none; border-color: var(--turquoise); background: rgba(53,224,216,0.06); }
.em-field textarea { resize: vertical; min-height: 62px; }
.em-field--model input { border-color: rgba(53,224,216,0.35); background: rgba(53,224,216,0.07); }
.em-modal-submit { margin-top: var(--s-1); width: 100%; }
.em-modal-status { margin: var(--s-1) 0 0; font-size: var(--fs-sm); min-height: 1.1em; }
.em-modal-status.is-ok { color: #38e0a8; }
.em-modal-status.is-err { color: #ff8080; }
.em-modal-fallback { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--on-dark-soft); text-align: center; }
.em-modal-fallback a { color: var(--turquoise-soft); }
@media (max-width: 480px) {
  .em-modal-dialog { padding: var(--s-6) var(--s-5) var(--s-6); }
  .em-field-row { flex-direction: column; gap: var(--s-3); }
}

/* ---- Bandeau : bouton adresse + menu itineraire (Maps / Waze) ---- */
.em-topbar-addr { position: relative; }
.em-geo-trigger {
  display: inline-flex; align-items: center; gap: var(--s-2);
  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: var(--r-md);
  box-shadow: var(--sh-2);
  padding: var(--s-1);
  overflow: hidden;
}
.em-geo-menu[hidden] { display: none; }
.em-geo-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--on-dark); font-size: var(--fs-sm); text-decoration: none;
}
.em-geo-item svg { width: 17px; height: 17px; color: var(--turquoise); flex-shrink: 0; }
.em-geo-item:hover { background: rgba(53,224,216,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: var(--s-2); margin-top: var(--s-3); }
.footer-social--mobile { justify-content: center; margin-top: var(--s-3); }
.footer-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-md);
  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(53,224,216,0.12); }
.footer-social svg { width: 19px; height: 19px; }

/* ---- Modale : décaler sous la barre wp-admin quand connecté (le visiteur ne l'a pas) ---- */
body.admin-bar .em-modal { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .em-modal { top: 46px; } }

/* ============================================================
   PLUGIN BATEAUX 1.3.0 — prix (styles sortis de l'inline),
   compteur de résultats, tri, lightbox galerie
   ============================================================ */
.boat-price-wrap { display: flex; flex-direction: column; gap: var(--s-hair); line-height: 1.1; min-width: 0; }
/* « 68 600 € TTC » etait une seule chaine insecable de ~170 px : sur mobile elle
   debordait de la carte par-dessus le bouton Details. Le montant reste insecable,
   la mention TTC devient un mot a part, plus petit, qui peut passer a la ligne. */
.boat-price-ttc {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.6px; color: var(--on-light-soft); white-space: nowrap;
}
.boat-card.is-vendu .boat-price-ttc { color: var(--on-light-soft); }
.boat-price-old { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); 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: var(--s-2); }

.em-boats-count { color: var(--on-light-soft); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--s-5); }

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

/* ============================================================
   == Turquoise Yachting - logo officiel ==
   Header = drapeau BLANC -> logo couleur (navy + teal) tel quel.
   Footer / drawer / mobile = fond SOMBRE -> logo en blanc via
   filtre (.ty-logo-light).
   ============================================================ */
.nav-logo-img { height: 52px; width: auto; display: block; }
.nav-logo { padding-left: var(--s-7); padding-right: var(--s-9); }

/* Version blanche du logo sur fond sombre */
.ty-logo-light { filter: brightness(0) invert(1); }

.footer-logo-img { display: block; height: auto; margin-bottom: var(--s-5); }
.em-drawer-logo-img { display: block; margin: var(--s-5) auto 0; height: auto; width: 190px; max-width: 60%; }
.footer-mobile .footer-m-logo-img { display: block; margin: 0 auto var(--s-1); height: auto; }

@media (max-width: 560px) {
  .nav-logo-img { height: 42px; }
  .nav-logo { padding-left: var(--s-6); padding-right: var(--s-8); }
}
@media (max-width: 400px) {
  .nav-logo-img { height: 37px; }
}


/* ---- Kadence ne decide plus de la couleur du texte saisi — 2026-09-08 ---- *
   Kadence (global.min.css) pose `input:focus { color: var(--global-palette3) }`,
   un ton sombre. Sur un champ a fond sombre, le texte devient invisible pendant
   la frappe et ne reapparait qu'en quittant le champ. Bug constate en prod sur
   Extreme Marine (retour Jean-Seb), meme ossature ici : on corrige d'avance.
   Specificites a egalite avec la regle de Kadence, donc !important plutot que
   de dependre de l'ordre de chargement. */
.em-field input:focus, .em-field textarea:focus, .em-field select:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}
.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);
}

/* ============================================================
   FAQ ON-PAGE (contact, nos-services, a-propos)
   Question en h3, reponse autonome en un paragraphe : format que
   les moteurs de reponse extraient et citent le plus facilement.
   Le schema FAQPage du mu-plugin SEO est le miroir exact de ces Q/R.
   ============================================================ */
.ty-faq .ty-faq-inner { max-width: 880px; margin: 0 auto; }
.ty-faq .ty-faq-item {
  border-top: 1px solid var(--line-light);
  padding: var(--s-6) 0;
}
.ty-faq .ty-faq-item:last-child { border-bottom: 1px solid var(--line-light); }
.ty-faq h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.35;
  margin: 0 0 var(--s-2);
  color: var(--on-light);
}
.ty-faq p {
  color: var(--on-light-soft);
  font-size: var(--fs-base);
  line-height: 1.72;
  margin: 0;
  max-width: 74ch;
}
.ty-faq p a { color: var(--blue-deep); text-decoration: underline; }

.section-dark.ty-faq .ty-faq-item { border-top-color: rgba(140, 240, 234, 0.16); }
.section-dark.ty-faq .ty-faq-item:last-child { border-bottom-color: rgba(140, 240, 234, 0.16); }
.section-dark.ty-faq h3 { color: #fff; }
.section-dark.ty-faq p { color: var(--on-dark-soft); }
.section-dark.ty-faq p a { color: var(--turquoise); }

/* ============================================================
   Formulaires relies (mu-plugin turquoise-forms) : message d'etat
   + pot de miel anti-spam invisible. Repris d'Extreme Marine.
   ============================================================ */
.form-status { margin: var(--s-3) 0 0; font-size: var(--fs-sm); 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 .ty-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ============================================================
   PHOTO EN TETE DE CARTE (2026-09-14, retour Tim « des photos la ou
   il n'y en a pas »). Pleine largeur de la carte : les marges negatives
   annulent le padding du parent (valeurs par contexte ci-dessous).
   ============================================================ */

/* Cartes « Pourquoi acheter » des pages gamme : 3 colonnes, puis 1.
   Elles portaient un `grid-template-columns: repeat(3,1fr)` INLINE, donc sans
   media query : sur mobile les 3 colonnes tenaient toujours et le texte tombait
   a un mot par ligne. On passe direct de 3 a 1 (a 2 colonnes, la 3e carte
   resterait orpheline sur sa rangee). */
.ty-adv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 880px) { .ty-adv-grid { grid-template-columns: 1fr; } }

.ty-card-photo {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: calc(-1 * var(--s-7)) calc(-1 * var(--s-7)) var(--s-6);             /* cartes « Pourquoi acheter » des gammes : padding 30/28 */
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--navy-800);
}
.ty-card-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.svc .ty-card-photo { margin: calc(-1 * var(--s-7)) calc(-1 * var(--s-6)) var(--s-6); }
.ty-stock-card .ty-card-photo { margin: calc(-1 * var(--s-7)) calc(-1 * var(--s-7)) var(--s-6); border-radius: var(--r-card) var(--r-card) 0 0; }
.svc:hover .ty-card-photo img,
.ty-stock-card:hover .ty-card-photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ty-card-photo img { transition: none; } }

/* ============================================================
   MODALE « DEMANDER CE MODELE » (2026-09-21, demande de Tim :
   « ça doit faire comme sur Extreme Marine, ça ouvre une pop up »).
   Portage a l'identique de .em-modal (em.css), prefixe ty-, tokens
   echanges : l'aqua #35E0D8 remplace le turquoise EM #34DCE6.
   Le bouton garde son href vers /contact/ : sans JS, il mene au
   formulaire complet au lieu de ne rien faire.
   ============================================================ */
body.ty-modal-open { overflow: hidden; }
.ty-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--s-5); }
.ty-modal[hidden] { display: none; }
.ty-modal-overlay { position: absolute; inset: 0; background: rgba(3,18,24,0.74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ty-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 (leçon Extreme Marine, retour Jean-Seb du 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(140,240,234,0.16);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  padding: var(--s-7) var(--s-7) var(--s-6);
  color: var(--on-dark);
  animation: ty-modal-in 0.24s cubic-bezier(0.2,0.7,0.3,1);
}
@keyframes ty-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ty-modal-dialog { animation: none; } }
.ty-modal-x {
  position: absolute; top: 14px; right: 14px;
  background: none; border: 0; cursor: pointer; padding: var(--s-1);
  color: rgba(255,255,255,0.6); line-height: 0;
}
.ty-modal-x:hover, .ty-modal-x:focus-visible { color: #fff; }
.ty-modal-x svg { width: 22px; height: 22px; }
.ty-modal-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--turquoise-soft); margin: 0 0 var(--s-2); }
.ty-modal-dialog h2 { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; margin: 0 0 var(--s-1); font-size: var(--fs-xl); line-height: 1.05; }
.ty-modal-sub { color: var(--on-dark-soft); margin: 0 0 var(--s-5); font-size: var(--fs-sm); line-height: 1.55; }
.ty-modal-form { display: flex; flex-direction: column; gap: var(--s-3); }
.ty-field-row { display: flex; gap: var(--s-3); }
.ty-field-row .ty-field { flex: 1; }
.ty-field { display: flex; flex-direction: column; gap: var(--s-1); }
.ty-field > span { font-size: var(--fs-xs); color: var(--on-dark-soft); }
.ty-field input, .ty-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: var(--r-md); padding: var(--s-3) var(--s-3);
  color: #fff; font-size: var(--fs-sm); font-family: inherit;
}
/* Kadence colore le texte saisi en anthracite : sur fond sombre il disparait
   pendant la frappe. Meme correctif que le formulaire de page. */
.ty-modal-dialog input[type="text"], .ty-modal-dialog input[type="email"],
.ty-modal-dialog input[type="tel"], .ty-modal-dialog textarea { color: #fff; }
.ty-field input:focus, .ty-field textarea:focus { outline: none; border-color: var(--turquoise); background: rgba(53,224,216,0.07); }
.ty-field textarea { resize: vertical; min-height: 62px; }
.ty-field--model input { border-color: rgba(53,224,216,0.38); background: rgba(53,224,216,0.08); }
.ty-modal-submit { margin-top: var(--s-1); width: 100%; }
.ty-modal-status { margin: var(--s-1) 0 0; font-size: var(--fs-sm); min-height: 1.1em; }
.ty-modal-status.is-ok { color: #4FE3B0; }
.ty-modal-status.is-err { color: #FF9B9B; }
.ty-modal-fallback { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--on-dark-soft); text-align: center; }
.ty-modal-fallback a { color: var(--turquoise-soft); }
.ty-modal-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Le champ actif doit rester visible quand le clavier mobile s'ouvre. */
.ty-modal-dialog input, .ty-modal-dialog textarea { scroll-margin: 90px; }
@media (max-width: 560px) {
  .ty-modal { align-items: flex-start; padding: var(--s-3); }
  .ty-modal-dialog { max-height: calc(100dvh - 24px); padding: var(--s-6) var(--s-5) var(--s-6); }
  .ty-field-row { flex-direction: column; gap: var(--s-3); }
}

/* ---------- Footer : 4 colonnes trop serrees sous 1100px ---------- */
@media (max-width: 1100px) and (min-width: 769px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-9); }
}

/* ============================================================
   HERO MOBILE (<=768px) : de l'air autour du titre
   ------------------------------------------------------------
   Avant, le hero faisait exactement la hauteur de son texte : la photo
   n'etait qu'un fond colle derriere un pavé, d'ou l'effet « tasse »
   signale par Tim le 2026-09-22. On lui donne une hauteur minimale et on
   centre le bloc dedans, la photo respire au-dessus et en dessous.
   Cette regle remplace le bloc « TY hero mobile fit » qui etait recopie
   dans les 14 pages : elle vit ici, une seule fois.
   ============================================================ */
@media (max-width: 768px) {
  .page-hero {
    display: flex; align-items: center;
    min-height: 72vh;
  }
  .page-hero-inner {
    width: 100%;
    padding-top: var(--s-9); padding-bottom: var(--s-9);
  }
  /* 0,9 d'interligne sur trois lignes de titre, c'est un mur : on desserre. */
  .page-hero h1 { line-height: 0.96; margin-bottom: var(--s-4); }
  .page-hero .lead { line-height: 1.78; margin-bottom: var(--s-6); }
  /* Les deux boutons empiles ont besoin de respirer eux aussi. */
  .page-hero-actions { gap: var(--s-3); }
}

/* ============================================================
   CATALOGUE BATEAUX : filtres replies sur mobile
   ------------------------------------------------------------
   Cinq listes deroulantes empilees remplissaient l'ecran avant le premier
   bateau (retour Tim 2026-09-22). Sous 768px le bloc est ferme par defaut,
   un bouton l'ouvre. Desktop inchange : le bouton n'existe pas.
   ============================================================ */
.em-f-toggle { display: none; }
@media (max-width: 768px) {
  .em-f-toggle {
    display: inline-flex; align-items: center; gap: var(--s-2);
    margin-bottom: var(--s-5); padding: var(--s-3) var(--s-5);
    border: 1px solid var(--line-light); border-radius: var(--r-pill);
    background: #fff; color: var(--on-light);
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
    letter-spacing: 0.4px; cursor: pointer;
    box-shadow: var(--sh-1);
  }
  .em-f-toggle svg { width: 17px; height: 17px; color: var(--blue); }
  .em-f-toggle .em-f-badge {
    min-width: 20px; height: 20px; padding: 0 var(--s-1); border-radius: var(--r-pill);
    background: var(--blue); color: #fff; font-size: var(--fs-xs); line-height: 20px;
    text-align: center;
  }
  /* ⚠️ Kadence repeint tout <button> au focus (bleu #215387, blanc dessus), une
     couleur etrangere a la charte : on verrouille les trois etats. */
  .em-boats .em-f-toggle:hover,
  .em-boats .em-f-toggle:focus,
  .em-boats .em-f-toggle:focus-visible,
  .em-boats .em-f-toggle:active {
    background: #fff; color: var(--on-light); border-color: var(--blue);
  }
  .em-boats .em-f-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .em-boats .filters { display: none; }
  .em-boats.filtres-ouverts .filters { display: flex; }
  .em-boats.filtres-ouverts .em-f-toggle { border-color: var(--blue); }
}

/* ============================================================
   CARTE SOMBRE (.ty-card-dark)
   ------------------------------------------------------------
   Les cartes « Pourquoi acheter chez nous » des 9 pages gamme et les
   « technologies » de la page Honda portaient le meme style EN LIGNE,
   recopie 27 fois. Il vit ici, une seule fois, et gagne une reaction au
   survol (retour Tim 2026-09-22 : « on peut les moderniser et les rendre
   dynamiques au survol »).
   Trois couches : un voile radial teal discret au repos qui s'allume, un
   filet d'accent qui court en haut de la carte, et un leger soulevement.
   ============================================================ */
.ty-card-dark {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-850);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-card);
  padding: var(--s-7) var(--s-7);
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.ty-card-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 95% at 100% 0%, rgba(53,224,216,0.13) 0%, transparent 58%);
  opacity: 0.45; transition: opacity 0.3s ease;
}
.ty-card-dark::after {
  /* z-index 2 : sur les cartes a photo (« Pourquoi acheter chez nous »),
     l'image occupe le haut de la carte et masquait le filet. */
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0; z-index: 2;
  background: linear-gradient(90deg, var(--turquoise) 0%, rgba(53,224,216,0) 100%);
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
}
.ty-card-dark:hover {
  transform: translateY(-5px);
  border-color: rgba(53,224,216,0.38);
  box-shadow: var(--sh-2);
}
.ty-card-dark:hover::before { opacity: 1; }
.ty-card-dark:hover::after  { width: 100%; }

/* Le titre de la carte s'eclaire avec elle. */
.ty-card-dark h3, .ty-card-dark .hm-tech-name { transition: color 0.3s ease; }
.ty-card-dark:hover h3 { color: var(--turquoise-soft); }

/* Sur tactile, :hover reste colle apres le tap : on le neutralise. */
@media (hover: none) {
  .ty-card-dark:hover {
    transform: none; box-shadow: none; border-color: rgba(255,255,255,0.07);
  }
  .ty-card-dark:hover::before { opacity: 0.45; }
  .ty-card-dark:hover::after { width: 0; }
  .ty-card-dark:hover h3 { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .ty-card-dark,
  .ty-card-dark::before,
  .ty-card-dark::after { transition: none; }
  .ty-card-dark:hover { transform: none; }
}


/* ============================================================
   FICHE MODELE - composant partage par les 7 pages gamme
   Remonte des pages le 2026-09-22 : la meme CSS y etait recopiee
   7 fois, et la page Leader en avait deja fait diverger 2 regles.
   ============================================================ */
.ty-fiche-group { margin-bottom: var(--s-8); }
.ty-fiche-models { display: flex; gap: var(--s-2); margin: 0 0 var(--s-4); flex-wrap: wrap; }
.ty-fm { flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: var(--fs-xs); color: var(--on-light); background: #fff; border: 1.5px solid var(--line-light); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); transition: border-color .2s ease, background .2s ease, color .2s ease; }
.ty-fm span { color: var(--on-light-soft); font-weight: 600; }
.ty-fm:hover { border-color: var(--blue); }
.ty-fm.is-active { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.ty-fm.is-active span { color: rgba(255,255,255,0.82); }
.ty-fiche { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-5); align-items: stretch; }

/* Deux vues pour un meme modele. PHOTO (par defaut) : la vraie photo du
   constructeur, cadre 16/9 et image en cover, comme n'importe quelle photo de
   navigation. PROFIL : la decoupe sur fond teal, cadre 16/7 et image en
   contain, parce qu'une silhouette detouree se lit mieux large que haute. */
.ty-fiche-figure { position: relative; width: 100%; align-self: start; min-width: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-light); background: #0A3B47; aspect-ratio: 16 / 9; }
.ty-fiche-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-fiche-figure.is-profil { aspect-ratio: 16 / 7; background: linear-gradient(150deg, #0C4553 0%, #0A5566 55%, #0C93A6 120%); }
.ty-fiche-figure.is-profil img { object-fit: contain; padding: var(--s-2); }
/* Kadence pose une marge basse sur les <figure> du contenu, via
   `.single-content figure` (specificite 0,1,1) : une regle de classe simple ne
   la bat pas, d'ou le selecteur a deux classes. Sans ca, 32 px de vide entre la
   photo et le tableau de specs en mobile. Meme famille de piege que la marge
   des <ul> sur le menu et le footer. */
.ty-fiche .ty-fiche-figure { margin: 0; }

/* Bascule de vue, posee sur l'image. Masquee quand le modele n'a qu'une vue. */
.ty-fiche-views { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(3,22,28,0.58); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(6px); }
.ty-fiche-views[hidden] { display: none; }
.ty-fv { cursor: pointer; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; font-size: var(--fs-micro); color: rgba(255,255,255,0.78); background: transparent; border: 0; border-radius: 999px; padding: 5px 12px; line-height: 1.2; }
.ty-fv.is-active { background: #fff; color: var(--blue-deep); }
/* Kadence repeint les <button> nus au focus (bleu #215387, texte blanc) :
   les quatre etats sont verrouilles, l'anneau de focus reste visible. */
.ty-fv:hover, .ty-fv:focus, .ty-fv:active { background: rgba(255,255,255,0.14); color: #fff; box-shadow: none; }
.ty-fv.is-active:hover, .ty-fv.is-active:focus, .ty-fv.is-active:active { background: #fff; color: var(--blue-deep); }
.ty-fv:focus-visible { outline: 2px solid var(--turquoise-soft); outline-offset: 2px; }

.ty-fiche-info { display: flex; flex-direction: column; }
.ty-fiche-specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-hair); background: var(--line-light); border: 1px solid var(--line-light); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s-5); }
.ty-fiche-specs > div { background: #fff; padding: var(--s-3) var(--s-4); }
.ty-fiche-specs dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; font-size: var(--fs-micro); color: var(--blue-deep); margin-bottom: var(--s-hair); }
.ty-fiche-specs dd { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--on-light); }
.ty-fiche-info .btn { align-self: flex-start; margin-top: auto; }

/* Modele sans aucune vue : on le dit, plutot que de montrer un autre bateau.
   `hidden` seul ne suffit pas, la regle .ty-fiche-figure img { display:block }
   (specificite 0,1,1) bat le [hidden] { display:none } du navigateur (0,1,0). */
.ty-fiche-figure img[hidden] { display: none !important; }
.ty-fiche-figure.is-nophoto { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; min-height: 260px; background: var(--paper); border: 1px dashed var(--line-light); }
.ty-fiche-figure.is-nophoto::after { content: "Photo à venir"; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: var(--fs-xs); color: var(--on-light-soft); }

@media (max-width: 768px) {
  .ty-fiche { grid-template-columns: 1fr; }
  .ty-fiche-models { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--s-1); }
  .ty-fiche-models::-webkit-scrollbar { display: none; }
  .ty-fm { scroll-snap-align: start; }
  .ty-fiche-models::after {
    content: ""; position: sticky; right: 0; flex: 0 0 auto;
    width: 44px; margin-left: calc(-1 * var(--s-9)); align-self: stretch;
    background: linear-gradient(to right, rgba(241,248,249,0) 0%, rgba(53,224,216,0.34) 100%);
    pointer-events: none;
  }
}

/* ============================================================
   SELECTEUR DE LANGUE (drapeaux France / Etats-Unis), 2026-09-29
   Demande de Jean-Seb : un petit element dans le header. Meme
   cadre que le bouton telephone (liseré turquoise, fond verre),
   la langue courante est pleine, l'autre attenuee.
   Markup : ty_lang_switch_markup() dans turquoise-i18n.php.
   ============================================================ */
.ty-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-hair);
  padding: 3px;
  border: 1px solid rgba(53,224,216, 0.38);
  border-radius: var(--r-md);
  background: rgba(53,224,216, 0.08);
  flex-shrink: 0;
}
.ty-lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 8px;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ty-lang-opt:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.ty-lang-opt.is-current { opacity: 1; background: rgba(53,224,216, 0.2); }
.ty-lang-opt:focus-visible { opacity: 1; outline: 2px solid var(--turquoise); outline-offset: 1px; }
.ty-flag {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}
.ty-flag svg { display: block; width: 100%; height: 100%; }
.ty-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Paliers du header desktop apres l'ajout des drapeaux (mesures 2026-09-29,
   bord droit du CTA <= ecran sur les pages FR, les plus longues). */
@media (min-width: 941px) and (max-width: 1199px) {
  .ty-lang-opt { width: 30px; }
}
@media (min-width: 941px) and (max-width: 1179px) {
  .nav-right .btn .btn-lead { display: none; }   /* « Demander un devis » -> « devis » */
}
@media (min-width: 941px) and (max-width: 1019px) {
  .ty-lang { padding: 2px; }
  .ty-lang-opt { width: 26px; }
}
@media (min-width: 1440px) and (max-width: 1519px) {
  .nav-phone-num { display: none; }              /* le numero en toutes lettres ne tient qu'a partir de 1520 */
  .nav-phone { padding: var(--s-2); }
}
/* Mobile : le <nav> vide (liens masques) comptait pour un ecart de 24 px dans
   la rangee, et le burger sortait de l'ecran une fois les drapeaux ajoutes. */
@media (max-width: 940px) {
  .nav-inner > nav { display: none; }
}
@media (max-width: 430px) {
  .nav-inner { gap: var(--s-3); }
  .nav-right { gap: var(--s-2); }
  .ty-lang-opt { width: 30px; height: 26px; }
  .ty-flag { width: 20px; height: 14px; }
}
/* Petits telephones (iPhone SE, 360 px) : seul le drapeau de l'AUTRE langue
   reste, c'est celui sur lequel on tape pour changer. */
@media (max-width: 385px) {
  .ty-lang-opt.is-current { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ty-lang-opt { transition: none; } }

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

/* ============================================================
   BANDEAU DE CONSENTEMENT (mu-plugin turquoise-consent.php)
   Il n'apparait que s'il y a une mesure d'audience a consentir.
   Non modal : il ne recouvre pas la page, on peut continuer a lire.
   ============================================================ */
.ty-consent[hidden] { display: none; }   /* sinon un display: de theme ecrase hidden, cf. l'overlay EM */
.ty-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;                       /* au-dessus du contenu, sous le tiroir mobile (70) */
  padding: var(--s-4);
  pointer-events: none;              /* seule la carte capte le clic */
}
.ty-consent-card {
  pointer-events: auto;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--navy-850), var(--navy-900));
  border: 1px solid rgba(140,240,234,0.16);
  box-shadow: var(--sh-3);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.ty-consent.is-on .ty-consent-card { transform: translateY(0); opacity: 1; }

.ty-consent-title {
  margin: 0 0 var(--s-1);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--turquoise-soft);
}
.ty-consent-body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);      /* 8,6:1 sur --navy-900 */
}
.ty-consent-body a { color: var(--turquoise-soft); text-decoration: underline; }
.ty-consent-body a:hover { color: #fff; }

.ty-consent-btns {
  display: flex;
  gap: var(--s-3);
  flex: 0 0 auto;
}
/* Les deux choix ont le meme poids visuel : meme taille, meme forme, deux
   fonds pleins. Un « refuser » en simple contour serait un faux choix. */
.ty-consent-btns .btn { min-width: 132px; padding: var(--s-3) var(--s-5); }
.ty-consent .btn-outline {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.45);
}
.ty-consent .btn-outline:hover { background: rgba(255,255,255,0.18); }
/* Kadence repeint les <button> au focus : on garde notre anneau. */
.ty-consent .btn:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .ty-consent { padding: var(--s-3); }
  .ty-consent-card { flex-direction: column; align-items: stretch; gap: var(--s-4); padding: var(--s-5); }
  .ty-consent-btns { flex-direction: row; }
  .ty-consent-btns .btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ty-consent-card { transition: none; transform: none; }
}