/* ============================================================
   POWER ZONE - Design system (re-skin de em.css / Groupe JLG)
   DA : charbon sombre, accent rouge PowerZone #C02020,
   highlight orange eclair #C02020. Titres condenses capitales.
   Ossature identique a Extreme Marine (memes classes), seules
   les valeurs de couleur (tokens + accents) sont echangees.
   ============================================================ */

:root {
  /* Hauteur du header colle. Mesuree dans le navigateur : 73px de 360 a 1440.
     Sert aux heros plein ecran, qui doivent faire un ecran MOINS la barre. */
  --nav-h: 73px;
  /* Hauteur du bandeau de coordonnees pose au-dessus du header. Le header reste
     colle a top:0 (le bandeau defile et disparait), mais le hero plein ecran
     part sous les DEUX : sans ca il fait un ecran PLUS le bandeau. */
  --topbar-h: 31px;

  /* Fonds sombres */
  --ink:        #110607;   /* noir chaud teinte rouge (DA GL Motos) */
  --navy-900:   #190A0C;
  --navy-850:   #22100F;
  --navy-800:   #2C1615;
  --navy-700:   #3A1E1D;

  /* Accent unique + pointe turquoise (titres seulement) */
  --blue:       #C02020;   /* accent verrouille */
  --blue-bright:#E04040;
  --blue-deep:  #8E1414;
  --turquoise:  #C02020;   /* pointe, gros titres uniquement */
  --turquoise-soft:#C9CDD3;
  --orange:      #C02020;   /* highlight eclair, degrades d'accent */
  --suzuki:     #7A1010;   /* rouge profond GL, aplats et degrades de cartes */
  --suzuki-lift:#3A1E1D;   /* le meme, un cran leve, pour les bords et hovers */
  /* Aplats ORANGE portant du texte BLANC : l'accent d'affichage #C02020 ne tient
     que 3,05:1 avec du blanc (sous AA). Ces deux tons sont reserves aux aplats,
     l'accent d'affichage reste intact. */
  --orange-solid:      #A81C1C;   /* blanc dessus : 5,10:1 */
  --orange-solid-lift: #8E1414;   /* hover, blanc dessus : 4,79:1 */

  /* Clairs */
  --paper:      #F6F4F4;
  --paper-2:    #FFFFFF;
  --line-light: #E8E2E2;

  /* Texte */
  --on-dark:        #FFFFFF;
  /* Remontes le 2026-09-24 (retour de Tim : « les sous-titres sont plus
     lisibles en blanc »). Le contraste passait deja WCAG a 0,62, mais sur une
     base sombre CHAUDE le gris parait plus eteint qu'il ne l'est. 0,76 garde
     la hierarchie avec le blanc pur des titres tout en se lisant d'un trait. */
  --on-dark-soft:   rgba(255,255,255,0.76);
  --on-dark-faint:  rgba(255,255,255,0.50);
  --on-light:       #14151A;
  --on-light-soft:  #665A5A;

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

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

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Le header colle a 73 px : sans reserve, toute ancre depose sa cible SOUS
     la barre. Le scroll-margin-top pose sur chaque cible ne suffisait pas
     (#gl-catalogue atterrissait deja a 1 px du haut avant le mega menu) :
     scroll-padding-top est porte par le CONTENEUR de defilement et vaut pour
     toutes les ancres du site, celles du mega menu comme les autres.
     ⚠️ Ce conteneur est le BODY, pas le html : Kadence pose overflow-y:auto sur
     body, donc une reserve posee sur html seule ne s'applique jamais. On la
     met sur les deux, la bonne des deux gagne. */
  scroll-padding-top: 92px;
}
body { scroll-padding-top: 92px; }

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

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

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

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

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

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

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

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

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

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


/* ============================================================
   BANDEAU DE COORDONNEES (au-dessus du header)
   Meme motif que le bandeau d'Extreme Marine : adresse cliquable qui ouvre le
   choix d'itineraire, separateur, horaires. Il n'est PAS colle : il defile et
   laisse le header seul en haut d'ecran.
   ============================================================ */
.gl-topbar {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--on-dark-soft);
  font-size: 12.5px;
  line-height: 1.2;
}
.gl-topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 7px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.gl-topbar-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gl-topbar-item svg { width: 14px; height: 14px; color: var(--blue-bright); flex-shrink: 0; }
.gl-topbar-sep { width: 1px; height: 13px; background: rgba(255,255,255,0.16); flex-shrink: 0; }

.gl-topbar-addr { position: relative; }
.gl-geo-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
}
.gl-geo-trigger:hover, .gl-geo-trigger[aria-expanded="true"] { color: #fff; }
.gl-geo-trigger:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }
.gl-geo-caret { width: 12px !important; height: 12px !important; color: currentColor !important; transition: transform .16s ease; }
.gl-geo-trigger[aria-expanded="true"] .gl-geo-caret { transform: rotate(180deg); }

.gl-geo-menu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 120;
  display: flex; flex-direction: column;
  min-width: 232px; padding: 6px;
  background: var(--navy-850);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 12px;
  box-shadow: 0 22px 44px -22px rgba(0,0,0,0.8);
}
.gl-geo-menu[hidden] { display: none; }
.gl-geo-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 8px;
  color: rgba(255,255,255,0.86); text-decoration: none; font-size: 13px;
}
.gl-geo-item svg { width: 15px; height: 15px; color: var(--blue-bright); flex-shrink: 0; }
.gl-geo-item:hover { background: rgba(192,32,32,0.18); color: #fff; }

/* 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) {
  .gl-topbar-hours, .gl-topbar-sep { display: none; }
}
@media (max-width: 560px) {
  :root { --topbar-h: 29px; }
  .gl-topbar { font-size: 11.5px; }
  .gl-topbar-inner { padding: 6px 14px; gap: 8px; }
  .gl-geo-menu { left: 50%; transform: translateX(-50%); }
}

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(192,32,32, 0.32);
  border-radius: 11px;
  background: rgba(192,32,32, 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(192,32,32, 0.16); }
.nav-burger-box {
  position: relative;
  display: block;
  width: 22px; height: 15px;
}
.nav-burger-bar {
  position: absolute;
  left: 0;
  width: 100%; height: 2.2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, background 0.2s;
}
.nav-burger-bar:nth-child(1) { top: 0; }
.nav-burger-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-burger-bar:nth-child(3) { bottom: 0; }
.nav-burger:hover .nav-burger-bar,
.nav-burger:focus-visible .nav-burger-bar { background: var(--turquoise); }
/* Morph en croix quand le drawer est ouvert */
body.em-drawer-open .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.em-drawer-open .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
body.em-drawer-open .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

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

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

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

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

/* ============================================================
   FOOTER - partial commun
   ============================================================ */
.footer {
  background: var(--ink);
  color: #fff;
  padding: clamp(56px, 8vw, 88px) 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-grid {
  display: grid;
  /* Cinq colonnes depuis le 2026-09-24 : la marque, trois listes, et le bloc
     « nous trouver » qui est le plus haut a cause des horaires. */
  grid-template-columns: 1.5fr 0.9fr 0.8fr 1fr 1.3fr;
  gap: clamp(24px, 2.6vw, 40px);
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Paliers du pied, une seule fois et dans l'ordre :
     > 1080 px : cinq colonnes
     1080 -> 940 : trois colonnes, la marque passe pleine largeur au-dessus
     940 -> 768  : deux colonnes (regle plus bas, avec le passage au burger)
     < 768 px    : le grand pied disparait au profit de .footer-mobile
   Inutile donc de prevoir quoi que ce soit sous 768. */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col-trouver { grid-column: span 2; }
}
.footer-brand .word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 24px;
  color: #fff;
  margin-bottom: 18px;
  display: inline-block;
}
.footer-brand .word b { color: var(--turquoise); }
.footer-brand p {
  color: var(--on-dark-soft);
  font-size: 14.5px;
  max-width: 320px;
  line-height: 1.7;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--turquoise);
  margin-bottom: 18px;
}
/* margin:0 obligatoire : la feuille de Kadence pose un margin-left de 25,5px sur
   tout <ul>, qui decalait les liens de Navigation et Nos marques par rapport a
   leur titre de colonne (la liste des horaires, elle, remettait deja padding a 0). */
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
.footer-col address {
  font-style: normal;
  color: var(--on-dark-soft);
  font-size: 14px;
  line-height: 1.8;
}
.footer-col address a { color: var(--turquoise-soft); text-decoration: none; }
.footer-hours { margin-top: 20px; }
.footer-hours .fh-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 11px;
  color: var(--turquoise-soft);
  display: block;
  margin-bottom: 10px;
}
.footer-hours .fh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Meme grammaire que les horaires de la page contact : deux colonnes calees sur
   leur contenu, et la journee coupee empile ses deux creneaux. Remplace le rail
   en space-between, qui renvoyait l'horaire a droite et cassait "Mardi – Vendredi"
   sur deux lignes des que la colonne se resserrait. */
.footer-hours .fh-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--on-dark-soft);
  line-height: 1.4;
}
.footer-hours .fh-list li > span { flex: 0 0 auto; min-width: 8.6em; white-space: nowrap; }
.footer-hours .fh-list b { display: flex; flex-direction: column; gap: 2px; color: #fff; font-weight: 600; }
.footer-hours .fh-list b span { white-space: nowrap; }
.footer-hours .fh-list .fh-closed { color: var(--on-dark-faint); font-weight: 600; }
.footer-bottom {
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  /* La pastille WhatsApp est fixe en bas a droite et recouvrait « Un site du
     Groupe JLG », le dernier element de cette barre. On lui reserve sa place
     plutot que de deplacer la pastille : elle doit rester la ou l'oeil la
     cherche. La reserve est laterale sur grand ecran (la barre tient sur une
     ligne) et verticale en dessous (elle passe sur plusieurs lignes, et c'est
     alors le bas du pied qui passe sous la pastille). */
  padding-right: 96px;
}
@media (max-width: 720px) {
  .footer-bottom { padding-right: 0; padding-bottom: 88px; }
}
.footer-bottom p { color: var(--on-dark-faint); font-size: 13px; }
.footer-bottom .grp {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  color: var(--on-dark-faint);
}
.footer-bottom .grp b { color: var(--on-dark-soft); font-weight: 700; }

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

/* Note Google + reseaux sociaux (colonne marque) */
.footer-rating {
  margin-top: 16px;
  color: var(--on-dark-soft);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-rating .fr-stars { color: #FFB400; letter-spacing: 1px; font-size: 14px; }
.footer-rating b { color: #fff; font-weight: 700; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.footer-social a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  color: var(--on-dark-soft);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.footer-social a:hover {
  color: #fff;
  background: rgba(192,32,32, 0.16);
  border-color: rgba(192,32,32, 0.45);
}
.footer-social a svg { width: 20px; height: 20px; display: block; }

/* Liens legaux (barre basse du footer, desktop) */
.footer-legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-legal a {
  color: var(--on-dark-faint); text-decoration: none; font-size: 13px;
  transition: color 0.2s;
}
.footer-legal a:hover { color: #fff; }
/* Reseaux dans le footer mobile */
.footer-mobile .footer-social { justify-content: center; margin-top: 2px; }

/* ---------- 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 {
  width: 200px; height: auto; object-fit: contain; margin-bottom: 4px;
}
.footer-mobile .footer-m-phone {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: 0.5px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(192,32,32,0.35);
  background: rgba(192,32,32,0.08);
}
.footer-mobile .footer-m-phone-ico {
  display: inline-flex; color: var(--turquoise);
}
.footer-mobile .footer-m-phone-ico svg { width: 18px; height: 18px; display: block; }
.footer-mobile .footer-m-addr {
  color: var(--on-dark-soft); font-size: 14px; line-height: 1.5; margin: 0;
}
.footer-mobile .footer-m-hours {
  color: var(--on-dark-faint); font-size: 12.5px; line-height: 1.5; margin: 0;
}
.footer-mobile .footer-m-legal {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.footer-mobile .footer-m-legal a {
  color: var(--on-dark-soft); text-decoration: none; font-size: 13px;
}
.footer-mobile .footer-m-legal a:hover { color: #fff; }
.footer-mobile .footer-m-sep { color: var(--on-dark-faint); }
.footer-mobile .footer-m-credit {
  color: var(--on-dark-faint); font-size: 11.5px; line-height: 1.7;
  letter-spacing: 0.3px; margin: 0; text-transform: uppercase;
}
.footer-mobile .footer-m-credit .powered { color: var(--on-dark-soft); text-decoration: none; }
.footer-mobile .footer-m-credit .powered:hover { color: #fff; }
.footer-mobile .footer-m-credit b { color: var(--on-dark-soft); font-weight: 700; }

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

/* ---------- Vrai logo XtreMarine dans le chrome (nav + footer) ---------- */
/* Wordmark GL MOTOS Guyane (2026-10-07, fourni par GL Motos) : ratio 5,77:1.
   Un logo horizontal se dimensionne par sa LARGEUR (la hauteur suit), sinon
   la hauteur heritee du badge carre (54 px) donnait 310 px de large et faisait
   deborder la barre. */
.nav-logo-img {
  width: 208px; height: auto; display: block;
  object-fit: contain;
}
.footer-logo-img {
  width: 250px; height: auto; display: block;
  margin-bottom: 20px;
  object-fit: contain;
}
@media (max-width: 1080px) { .footer-logo-img { width: 220px; } }
@media (max-width: 560px) {
  .nav-logo-img { width: 150px; }
  .footer-logo-img { width: 200px; }
  /* Drapeau compacte sur mobile : laisse de la place au numero + burger. */
  .nav-logo { padding-left: 20px; padding-right: 36px; }
}
/* Plus petits mobiles (320 px) : a 160 px le wordmark faisait deborder la barre
   de 39 px (drapeau 216 + 24 + telephone/burger 95 + marge 22 = 359). Mesure
   responsive.py du 2026-10-07. A 124 px : 309 px, 11 px d'air. */
@media (max-width: 400px) {
  .nav-logo-img { width: 124px; }
  .nav-inner { gap: 12px; }
}

/* ============================================================
   RESPONSIVE (mobile-first via overrides)
   ============================================================ */
/* Bascule vers le tiroir. Passee de 940 a 1240 a l'ajout du sixieme onglet
   (« Occasions »), puis a 1300 le 2026-10-07 avec le wordmark GL MOTOS Guyane :
   drapeau 286 + 24 + liens 586 + 24 + bloc droit 336 + marge 34 = 1290 px
   necessaires (mesure Playwright, espacements resserres). Entre la bascule et
   le besoin reel, le flex ecrase les liens : defaut invisible aux trois
   largeurs de qa.py, trouve par brand/responsive.py. On ne compresse pas pour
   gagner une largeur, on bascule. Toute entree ajoutee a la barre ou tout
   changement de logo oblige a remesurer. */
@media (max-width: 1300px) {
  .nav-links,
  .nav-right .btn { display: none; }
  .nav-burger { display: inline-flex; }
}
/* Juste au-dessus de la bascule, la barre tient mais frole les bords : on
   resserre les espacements pour lui rendre de l'air. La marge passe par la
   variable (et pas par padding-left/right) parce que le drapeau du logo se
   tire de var(--pad-x) vers la gauche : avec un padding de 34 et une variable
   restee a 56, le logo se retrouvait a 8 px du bord de l'ecran. */
@media (min-width: 1301px) and (max-width: 1440px) {
  .nav-links { gap: 22px; }
  .nav-inner { --pad-x: 34px; }
  .nav-right { gap: 11px; }
}
@media (max-width: 940px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-brand { grid-column: 1 / -1; }
}

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

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

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

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

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

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

  .em-drawer-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13.5px;
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--orange-solid-lift), var(--orange-solid) 45%, #A83F00);
    /* Ombre de profondeur neutre, pas un halo orange : le glow d'origine
       bavait autour du bouton d'appel (retour de Tim, 2026-09-22). */
    box-shadow: 0 6px 16px -10px rgba(0,0,0,0.5);
  }
  .em-drawer-cta:hover { filter: brightness(1.06); }
  /* Variante telephone : le bouton du menu burger est devenu le numero
     (demande de Tim, 2026-09-22). Chiffres non capitalises et un cran plus
     grands que le libelle d'origine : c'est un numero, on doit pouvoir le lire. */
  .em-drawer-tel { gap: 10px; text-transform: none; letter-spacing: 0.3px; font-size: 16px; }
  .em-drawer-tel svg { width: 18px; height: 18px; flex-shrink: 0; }

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

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

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

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

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

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

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

@media (max-width: 560px) {
  /* .footer-grid et .footer-bottom sont deja masques a 768 px : rien a regler
     ici pour eux. */
  .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: 8px 11px; font-size: 13.5px; gap: 6px; }
}
/* Ecrans etroits (<=430px) : le numero se replie sur l'icone cliquable seule
   pour laisser la marge au burger (evite tout debordement du bouton). */
@media (max-width: 430px) {
  .nav-phone-num { display: none; }
  .nav-phone { padding: 9px; }
}

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

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

/* ---------- Hero generique de page interne ---------- */
.page-hero {
  position: relative; color: #fff; overflow: hidden; background: var(--navy-900);
  display: flex;
}
/* Plein ecran, sauf les heros marques `.page-hero-court` (page contact : le
   formulaire doit rester proche du haut). Le header colle occupe le flux, donc
   un hero a 100vh ferait un ecran PLUS les barres : on retire --nav-h ET
   --topbar-h (le bandeau de coordonnees pousse tout le document vers le bas).
   `100svh` = hauteur de viewport "petite", celle qui ne saute pas quand la
   barre d'URL du telephone se retracte ; `100vh` reste en repli pour les
   navigateurs qui ne connaissent pas l'unite.
   `min-height` et non `height` : un hero dont le texte deborde s'allonge au
   lieu de tronquer. Le contenu est centre verticalement, ce qui est ce qui
   "aere" reellement le hero. */
.page-hero:not(.page-hero-court) {
  min-height: calc(100vh - var(--nav-h) - var(--topbar-h));
  min-height: calc(100svh - var(--nav-h) - var(--topbar-h));
  align-items: center;
}
.page-hero-inner { width: 100%; }
.page-hero-media {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 90% at 82% 20%, rgba(192,32,32,0.28) 0%, transparent 48%),
    radial-gradient(90% 80% at 12% 95%, rgba(192,32,32,0.36) 0%, transparent 55%),
    linear-gradient(155deg, #110607 0%, #2C1615 46%, #521414 78%, #8E1414 100%);
}
.page-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,6,7,0.82) 0%, rgba(17,6,7,0.35) 60%, transparent 100%);
}
.page-hero-inner {
  position: relative; z-index: 2;
  padding-top: clamp(48px,7vw,88px); padding-bottom: clamp(48px,7vw,80px);
}
.page-hero h1 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; line-height: 0.9; letter-spacing: 0.5px;
  font-size: clamp(40px, 7vw, 88px); margin-bottom: 18px;
  color: #fff; /* hero toujours sombre : sinon Kadence force l'anthracite (le mot hors .tq devient invisible) */
}
/* --- Accent bleu des titres : reflet lumineux « Animated Shiny Text » ---
   Port du meme effet que le hero d'accueil (.hero h1 .tq, defini en local
   dans accueil.html), remonte au design system pour TOUS les accents bleus
   de titres du site : .tqx (galerie, sections) + les heros de page
   (.page-hero h1 .tq) et de marque (.brand-hero h1 .tq, dont le CSS vit en
   local dans chaque bloc wp:html -> on gagne via !important, sans re-pousser
   les pages). Deux couches clippees au texte : une bande claire mobile
   PAR-DESSUS le degrade turquoise. Doux et lent, une passe puis pause.
   Le hero d'accueil garde sa definition locale identique (non touche). */
.tqx,
.page-hero h1 .tq,
.brand-hero h1 .tq {
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,0.92) 46%, rgba(230,255,255,0.98) 50%, rgba(255,255,255,0.92) 54%, transparent 66%),
    linear-gradient(120deg, var(--turquoise-soft), var(--turquoise) 55%, var(--blue-bright)) !important;
  background-size: 250% 100%, 100% 100% !important;
  background-position: 150% 0, 0 0 !important;   /* reflet hors-champ a droite au repos */
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  /* animation SANS !important : la regle globale prefers-reduced-motion
     (*{animation:none !important}) doit pouvoir la neutraliser proprement
     -> repli = degrade turquoise statique, reflet hors-champ, aucun clignotement. */
  animation: tq-shine 4.2s ease-in-out infinite;
}
@keyframes tq-shine {
  0%, 8%    { background-position: 150% 0, 0 0; }   /* attente, reflet a droite */
  42%, 100% { background-position: -55% 0, 0 0; }   /* balaye vers la gauche puis repos */
}
/* --- Lisibilite sur fond CLAIR ---
   Le degrade turquoise-clair du hero est calibre pour fond sombre ; sur une
   section claire (.section-light) il devient illisible. On bascule alors sur
   un degrade bleu soutenu (contrastes >= 3:1 sur .paper, seuil grand texte)
   et une bande de reflet moins blanche (evite l'effacement du texte au passage
   du glint). Defensif : aujourd'hui aucun accent de titre ne vit sur clair. */
.section-light .tqx,
.section-light .page-hero h1 .tq,
.section-light .brand-hero h1 .tq {
  background-image:
    linear-gradient(100deg, transparent 36%, rgba(255,255,255,0.55) 47%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.55) 53%, transparent 64%),
    linear-gradient(120deg, var(--blue-bright), var(--blue) 45%, var(--blue-deep) 100%) !important;
}
/* Sous-titre de hero en BLANC et pas en gris (demande de Tim, 2026-09-22) : sur
   une photo voilee le gris --on-dark-soft (62 % de blanc) lit "eteint". Les
   pages marque le forcaient deja en local, c'est desormais la regle partout. */
.page-hero .lead { max-width: 620px; color: #fff; font-size: clamp(15px,1.5vw,18px); line-height: 1.75; margin-bottom: 30px; }
.page-hero .lead b { color: #fff; font-weight: 600; }
.page-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Cartes marque (hub /nos-marques/) ---------- */
.brand-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.brand-card {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: 30px 28px; min-height: 220px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff;
  background: linear-gradient(155deg, #190A0C 0%, #3A1E1D 60%, #8E1414 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, #110607 0%, #2C1615 60%, #7A1010 120%); }
.brand-card:nth-child(4n+3) { background: linear-gradient(155deg, #110607 0%, #3A1E1D 60%, #C02020 120%); }
.brand-card:nth-child(4n+4) { background: linear-gradient(155deg, #190A0C 0%, #3A1E1D 55%, #8E1414 120%); }
.brand-card:hover, .brand-card:focus-visible { transform: translateY(-4px); border-color: rgba(192,32,32,0.4); box-shadow: 0 22px 50px -26px rgba(0,0,0,0.7); color: #fff !important; }
/* Kadence repeint TOUT lien au survol (a:hover{color:...}) : chaque variante de
   bouton redeclare donc explicitement sa couleur sur :hover / :focus-visible.
   .btn-outline et .btn-outline-dark le faisaient deja ; .btn-primary et
   .brand-card ne le faisaient pas et viraient au bleu Kadence (1,65:1). */
.brand-card .bc-tag { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 10.5px; color: var(--turquoise-soft); margin-bottom: auto; }
.brand-card h3 { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.5px; font-size: 26px; margin-bottom: 6px; color: #fff; /* carte navy : sinon titre anthracite Kadence invisible */ }
.brand-card p { color: var(--on-dark-soft); font-size: 13.5px; line-height: 1.55; }
.brand-card .bc-go { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 11.5px; color: var(--turquoise-soft); }
.brand-card .bc-go svg { width: 14px; height: 14px; }

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

/* ---------- Cartes bateau (occasions / stock neuf) ---------- */
.boat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.boat-card {
  background: #fff; border: 1px solid var(--line-light);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px -24px rgba(34,16,15,0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column;
}
.boat-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(34,16,15,0.55); }
.boat-visual {
  height: 200px; position: relative;
  background: linear-gradient(150deg, #2C1615 0%, #521414 60%, #8E1414 120%);
  display: flex; align-items: center; justify-content: center;
}
.boat-visual { overflow: hidden; }
.boat-visual span.boat-ph {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; font-size: 11px; color: rgba(255,255,255,0.6);
  position: relative; z-index: 1;
}
.boat-badge {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 10px; color: #fff;
  background: var(--blue); padding: 6px 12px; border-radius: 20px;
}
.boat-badge.occ { background: var(--turquoise); color: var(--on-light); }
.boat-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.boat-body h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; font-size: 18px; color: var(--on-light); margin-bottom: 6px; }
.boat-year { font-size: 13px; color: var(--on-light-soft); margin-bottom: 16px; }
.boat-specs { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px; border-top: 1px solid var(--line-light); padding-top: 16px; }
.boat-spec { font-size: 12px; color: var(--on-light-soft); }
.boat-spec b { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; font-size: 13px; color: var(--on-light); }
.boat-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.boat-price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--blue); }

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

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

/* ---------- Cartes « Pourquoi Power Zone » ----------
   Source UNIQUE du composant. Il vit sur 6 pages (accueil + les 5 pages marque) ;
   il etait auparavant recopie en styles inline sur les pages marque et en bloc
   <style> local sur l'accueil, donc toute retouche n'en corrigeait qu'une.
   Deux variantes : avec pastille d'icone (accueil) ou sans (pages marque).
   Un seul accent, l'orange, et il ne sert qu'a marquer l'etat de survol. */
.gl-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gl-why-card {
  position: relative;
  /* lumiere venue du haut plutot qu'un aplat : c'est ce qui donne le relief */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.012) 60%, rgba(255,255,255,0) 100%),
    var(--navy-850);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 32px 30px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 24px 50px -38px rgba(0,0,0,0.85);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Filet superieur : neutre au repos, il passe a l'orange au survol. */
.gl-why-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  transition: background 0.25s ease;
}
.gl-why-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.17);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,0.9);
}
.gl-why-card:hover::before {
  background: linear-gradient(90deg, rgba(192,32,32,0) 0%, rgba(192,32,32,0.85) 50%, rgba(192,32,32,0) 100%);
}
/* Pastille d'icone en anneau : l'aplat orange translucide d'avant lisait « brun sale ». */
.gl-why-ic {
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(192,32,32,0.34);
  display: flex; align-items: center; justify-content: center;
  color: var(--turquoise-soft);
  margin-bottom: 20px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.gl-why-card:hover .gl-why-ic { border-color: rgba(192,32,32,0.62); background: rgba(192,32,32,0.08); }
.gl-why-card h3 {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px;
  font-size: 16.5px; color: #fff; margin-bottom: 11px;
}
.gl-why-card p { color: var(--on-dark-soft); font-size: 14.5px; line-height: 1.7; }
/* Le bandeau de rappel sous les cartes reste de la meme famille. */
.gl-why-more {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  padding: 26px 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%),
    var(--navy-850);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
}
.gl-why-more-txt { color: var(--on-dark-soft); font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 640px; }
.gl-why-more-txt b { color: #fff; font-weight: 600; }
.gl-why-more .btn { flex: 0 0 auto; }
@media (max-width: 940px) { .gl-why { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .gl-why-more { flex-direction: column; align-items: flex-start; text-align: left; }
  .gl-why-more .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-why-card, .gl-why-ic { transition: none; }
  .gl-why-card:hover { transform: none; }
}

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

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

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

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

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

/* les blocs media des pages internes (services, occasions, a propos)
   accueillent une vraie photo : on les rend relatifs + clippes. */
.svc-detail-media { position: relative; overflow: hidden; }
.svc-detail-media > span { position: relative; z-index: 1; }
.svc-detail-media 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: 10px;
  padding: 14px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-bottom: 16px;
  align-self: flex-start;
}
.brand-logo-chip img { max-height: 32px; width: auto; display: block; }

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

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

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

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

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

/* ============================================================
   OVERRIDES WORDPRESS / KADENCE (portage Passerelle)
   Neutralise le conteneur boxe de Kadence pour que les sections
   full-bleed de la maquette atteignent les bords de l'ecran.
   Cible uniquement les pages de contenu marquees .em-content-page.
   ============================================================ */
.em-content-page #inner-wrap,
.em-content-page #primary,
.em-content-page .content-area,
.em-content-page .content-container.site-container,
.em-content-page #main,
.em-content-page .content-wrap,
.em-content-page .entry-content.single-content,
.em-content-page .entry-content-wrap { max-width:none;width:100%;padding-left:0;padding-right:0;margin-left:0;margin-right:0; }
/* Kadence sort l'article de son conteneur boxe avec une marge negative egale a
   son padding de bord (16px en mobile). Les wrappers ci-dessus ont deja leur
   padding remis a zero, donc cette marge ne compense plus rien : elle decalait
   tout le contenu de 16px vers la gauche et mangeait la gouttiere (--pad-x
   tombait a 4px reels). On la neutralise ici, les sections full-bleed touchent
   toujours les bords puisque le conteneur fait deja 100%. */
.em-content-page .single-entry.content-bg { background:transparent;box-shadow:none;border:0;padding:0;margin-left:0;margin-right: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; }
/* Retrait du bandeau vertical entre le header et le hero : Kadence pose
   .content-area{margin-top} + un padding-top d'entry-content ; on colle le
   hero plein cadre sous la nav sticky (sur les pages de contenu full-bleed). */
.em-content-page .content-area,
.em-content-page .content-container.site-container,
.em-content-page .content-wrap,
.em-content-page #primary,
.em-content-page #main,
.em-content-page .entry-content.single-content,
.em-content-page .entry-content-wrap { margin-top:0;padding-top:0; }
/* Meme logique en BAS de page : Kadence pose un margin-bottom (80px) sur
   .content-area/#primary + un padding-bottom residuel sur le conteneur, ce qui
   laisse apparaitre le fond --ink du body (identique au footer) entre la
   derniere section et le footer -> bandeau sombre vide. On colle la derniere
   section full-bleed directement sur le footer. */
.em-content-page .content-area,
.em-content-page .content-container.site-container,
.em-content-page .content-wrap,
.em-content-page #primary,
.em-content-page #main,
.em-content-page .single-entry,
.em-content-page .site-main,
.em-content-page .entry-content,
.em-content-page .entry-content.single-content,
.em-content-page .entry-content-wrap { margin-bottom: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: 10px; color: var(--on-light);
  background: var(--turquoise); padding: 6px 12px; border-radius: 20px;
  box-shadow: 0 6px 16px -6px rgba(192,32,32,0.7);
}
.boat-sold {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 10px; color: #fff;
  background: #b3202a; padding: 6px 12px; border-radius: 20px;
}
.boat-card.is-vendu .boat-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(17,6,7,0.45);
}
.boat-card.is-vendu .boat-price { color: var(--on-light-soft); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Vigilance : labels lisibles sur sombre */
.emm-dash .emm-vig-vert   .emm-vig-label { color: #6fe6b0; }
.emm-dash .emm-vig-jaune  .emm-vig-label { color: #ffcf72; }
.emm-dash .emm-vig-orange .emm-vig-label { color: #C9CDD3; }
.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(192,32,32,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: #C9CDD3; }
.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: #C9CDD3; }
.emm-dash .emm-gk-dir { color: var(--turquoise-soft); }

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

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

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

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

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

/* ============================================================
   MODALE DEVIS (pop-up pre-remplie)
   ============================================================ */
.em-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
body.em-modal-open { overflow: hidden; }
.em-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.em-modal[hidden] { display: none; }
.em-modal-overlay { position: absolute; inset: 0; background: rgba(3,8,16,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.em-modal-dialog {
  position: relative;
  width: min(520px, 100%);
  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: 18px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
  padding: 30px 28px 26px;
  color: var(--on-dark);
  animation: em-modal-in 0.24s cubic-bezier(0.2,0.7,0.3,1);
}
@keyframes em-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .em-modal-dialog { animation: none; } }
.em-modal-x {
  position: absolute; top: 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: 9px; 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: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise-soft); margin: 0 0 6px; }
.em-modal-dialog h2 { color: #fff; margin: 0 0 6px; font-size: 25px; }
.em-modal-sub { color: var(--on-dark-soft); margin: 0 0 18px; font-size: 14px; }
.em-modal-form { display: flex; flex-direction: column; gap: 12px; }
.em-field-row { display: flex; gap: 12px; }
.em-field-row .em-field { flex: 1; }
.em-field { display: flex; flex-direction: column; gap: 5px; }
.em-field > span { font-size: 12.5px; color: var(--on-dark-soft); }
.em-field input, .em-field textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 11px 13px;
  color: #fff; font-size: 15px; font-family: inherit;
}
.em-field input:focus, .em-field textarea:focus { outline: none; border-color: var(--turquoise); background: rgba(192,32,32,0.06); }
.em-field textarea { resize: vertical; min-height: 62px; }
.em-field--model input { border-color: rgba(192,32,32,0.35); background: rgba(192,32,32,0.07); }
.em-modal-submit { margin-top: 4px; width: 100%; }
.em-modal-status { margin: 4px 0 0; font-size: 13.5px; min-height: 1.1em; }
.em-modal-status.is-ok { color: #38e0a8; }
.em-modal-status.is-err { color: #ff8080; }
.em-modal-fallback { margin: 8px 0 0; font-size: 13px; color: var(--on-dark-soft); text-align: center; }
.em-modal-fallback a { color: var(--turquoise-soft); }
@media (max-width: 480px) {
  .em-modal-dialog { padding: 26px 20px 22px; }
  .em-field-row { flex-direction: column; gap: 12px; }
}

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

/* ---- Footer : réseaux sociaux ---- */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social--mobile { justify-content: center; margin-top: 12px; }
.footer-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--on-dark-soft);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.footer-social a:hover { color: #fff; border-color: var(--turquoise); background: rgba(192,32,32,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: 2px; line-height: 1.1; min-width: 0; }
.boat-price-old { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: #8a97a6; text-decoration: line-through; white-space: nowrap; }
.boat-price { white-space: nowrap; }
.boat-hero-price-old { text-decoration: line-through; opacity: .6; font-weight: 600; font-size: .62em; margin-right: 10px; }

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

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

/* ============================================================
   POWER ZONE : override chrome (mu-plugin)
   Neutralise le style bouton par defaut de Kadence (accent bleu)
   sur les boutons natifs du chrome (burger, croix, accordeon).
   Kadence applique un fond bleu sur :focus/:active des <button> ;
   on force charbon + rouge PowerZone.
   ============================================================ */
.em-dnav-toggle,
.em-dnav-toggle:hover,
.em-dnav-toggle:focus,
.em-dnav-toggle:focus-visible,
.em-dnav-toggle:active {
  background: transparent !important;
  color: var(--turquoise) !important;
  box-shadow: none !important;
  outline: none !important;
}
.em-dnav-item-sub.is-open .em-dnav-toggle,
.em-dnav-toggle:hover,
.em-dnav-toggle:focus-visible {
  background: rgba(192,32,32,0.10) !important;
}
.nav-burger:focus, .nav-burger:active, .nav-burger:focus-visible {
  box-shadow: none !important; outline: none !important;
}
.em-drawer-close:focus, .em-drawer-close:active, .em-drawer-close:focus-visible {
  box-shadow: none !important; outline: none !important;
}

/* ============================================================ *
 * FAQ accordeon (accueil) : bloc visible, source unique partagee
 * avec le FAQPage JSON-LD (rendu dans glmotos-chrome.php).
 * ============================================================ */
.gl-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.gl-faq-item {
  background: var(--paper-2); border: 1px solid var(--line-light); border-radius: 14px;
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.gl-faq-item:hover { border-color: rgba(192,32,32,0.30); box-shadow: 0 14px 34px -22px rgba(34,16,15,0.30); }
.gl-faq-item[open] { border-color: rgba(192,32,32,0.42); box-shadow: 0 16px 40px -24px rgba(34,16,15,0.34); }
.gl-faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
}
.gl-faq-q::-webkit-details-marker { display: none; }
.gl-faq-q h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--on-light); margin: 0; line-height: 1.4; }
.gl-faq-chevron {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(192,32,32,0.10), rgba(192,32,32,0.12));
  display: flex; align-items: center; justify-content: center; color: var(--blue);
  transition: transform .25s ease;
}
.gl-faq-chevron svg { width: 15px; height: 15px; display: block; }
.gl-faq-item[open] .gl-faq-chevron { transform: rotate(180deg); }
.gl-faq-a { padding: 0 22px 22px; }
.gl-faq-a p { color: var(--on-light-soft); font-size: 15px; line-height: 1.7; margin: 0; }
.gl-faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .gl-faq-chevron, .gl-faq-item { transition: none; } }

/* --- Variante SOMBRE de l'accordeon FAQ (section-dark#faq).
       La FAQ passe sur fond charbon pour trancher NETTEMENT avec le CTA clair
       qui la precede (fin de la fusion des deux sections claires). Fond legerement
       leve (navy-850) au-dessus du footer --ink pour delimiter la frontiere basse.
       Contraste AA garanti (h3 blanc, reponses blanc 72%, chevron blanc sur pastille
       rouge/orange bien visible). Meme source HTML/JSON-LD, seul l'habillage change. */
.section-dark#faq { background: var(--navy-850); }
.section-dark .gl-faq-item {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.12);
}
.section-dark .gl-faq-item:hover {
  border-color: rgba(192,32,32,0.55);
  box-shadow: 0 16px 40px -26px rgba(0,0,0,0.6);
}
.section-dark .gl-faq-item[open] {
  border-color: rgba(192,32,32,0.7);
  background: rgba(192,32,32,0.07);
  box-shadow: 0 18px 44px -26px rgba(0,0,0,0.65);
}
.section-dark .gl-faq-q h3 { color: #fff; }
.section-dark .gl-faq-a p { color: rgba(255,255,255,0.72); }
.section-dark .gl-faq-chevron {
  background: linear-gradient(135deg, rgba(192,32,32,0.92), rgba(192,32,32,0.92));
  color: #fff;
}
.section-dark .gl-faq-q:focus-visible { outline-color: var(--orange); }


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

/* ============================================================
   PAGES MARQUE : composants partages (source unique)
   ------------------------------------------------------------
   Ce bloc vivait en CINQ copies, une par page marque. Meme piege
   que les cartes « Pourquoi Power Zone » le 2026-09-22 : moderniser
   la classe n'aurait change qu'une page, sans rien signaler. Seule
   la PHOTO du hero reste locale a chaque page marque.
   ============================================================ */

/* Hero centre des pages marque (le hero generique aligne a gauche). */
.page-hero-centre .page-hero-inner { text-align: center; }
.page-hero-centre .eyebrow { color: #fff; }
.page-hero-centre .lead { margin-left: auto; margin-right: auto; }
.page-hero-centre .page-hero-actions { justify-content: center; }
.page-hero-centre .page-hero-scrim {
  background: linear-gradient(180deg, rgba(17,6,7,0.46) 0%, rgba(17,6,7,0.62) 100%);
}

/* Recit de marque (texte + photo). */
.gl-brandstory { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.gl-brandstory .gl-story-media { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(150deg,#22100F,#3A1E1D); }
.gl-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-story h2 { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; text-transform: uppercase; line-height: 1; letter-spacing: 0.5px; font-size: clamp(26px,3.4vw,40px); margin-bottom: 16px; }
.gl-story p { color: var(--on-light-soft); font-size: 15px; line-height: 1.75; margin-bottom: 14px; }
.gl-gamme-title { font-family: var(--font-display); font-weight: 800; font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.5px; font-size: clamp(20px,2.6vw,30px); color: var(--on-light); margin: 6px 0 20px; scroll-margin-top: 92px; }  /* le header colle a 73 px : sans marge, l'ancre du mega menu depose le titre SOUS la barre */

/* Rail de modeles : defilement horizontal avec accroche. */
.gl-rail { position: relative; }
.gl-rail-nav {
  position: absolute; top: 74px; z-index: 4; width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer; display: none; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.45);
  transition: opacity .2s ease, transform .2s ease; padding: 0;
}
.gl-rail.is-slidable .gl-rail-nav { display: inline-flex; }
.gl-rail-nav:hover { transform: scale(1.08); }
.gl-rail-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gl-rail-nav[disabled] { opacity: .22; cursor: default; transform: none; }
.gl-rail-nav svg { width: 19px; height: 19px; }
.gl-rail-prev { left: -10px; }
.gl-rail-next { right: -10px; }
@media (max-width: 760px) { .gl-rail-nav { display: none !important; } }

.gl-models {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 4px 0 14px; scroll-padding-left: 2px;
}
.gl-models::-webkit-scrollbar { display: none; }
/* fondu de bord droit : signale qu'il reste des modeles a faire defiler */
.gl-models::after {
  content: ""; position: sticky; right: 0; align-self: stretch;
  flex: 0 0 44px; width: 44px; margin-left: -44px;
  background: linear-gradient(to right, rgba(243,247,252,0), var(--paper) 78%);
  pointer-events: none;
}

@media (max-width: 940px) {
  .gl-brandstory { grid-template-columns: 1fr; }
}

/* ============================================================
   CARTES : une seule grammaire (2026-09-22)
   ------------------------------------------------------------
   Demande de Tim : « les cards de maniere generale peuvent etre
   modernisees ». On reprend le vocabulaire deja valide sur
   .gl-why-card (2026-09-22) au lieu d'inventer un style de plus :
     - lumiere venue du HAUT plutot qu'un aplat, c'est ce qui donne
       le relief,
     - filet superieur neutre au repos, qui passe a l'orange au
       survol (un seul accent, cap Stripe),
     - la carte se leve de 3px, l'ombre s'ouvre,
     - rayon 16 -> 18.
   Variante CLAIRE ici (cartes blanches sur .section-light) ; la
   variante SOMBRE reste sur .gl-why-card et .brand-card.
   Le survol ne va qu'aux cartes qui sont des ELEMENTS DE LISTE
   (modeles, avis, marques). .form-card et .lg-card sont des
   conteneurs de page : elles prennent la peau, pas le mouvement.
   ============================================================ */

.gl-mcard,
.form-card,
.legal .lg-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 62%, #FBF9F9 100%);
  border: 1px solid var(--line-light);
  border-radius: 18px;
  box-shadow: 0 18px 44px -34px rgba(34,16,15,0.55);
}
.gl-mcard::before,
.form-card::before,
.legal .lg-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, rgba(34,16,15,0) 0%, rgba(34,16,15,0.12) 50%, rgba(34,16,15,0) 100%);
  transition: background 0.25s ease;
}

/* --- Cartes modele (rail des pages marque) --- */
.gl-mcard {
  flex: 0 0 clamp(232px, 23vw, 272px);
  scroll-snap-align: start;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gl-mcard:hover {
  transform: translateY(-3px);
  border-color: rgba(192,32,32,0.30);
  box-shadow: 0 26px 54px -32px rgba(34,16,15,0.6);
}
.gl-mcard:hover::before {
  background: linear-gradient(90deg, rgba(192,32,32,0) 0%, rgba(192,32,32,0.9) 50%, rgba(192,32,32,0) 100%);
}
.gl-mvisual {
  height: 168px; position: relative; overflow: hidden;
  /* degrade tres court plutot qu'un aplat blanc : la moto se detache */
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line-light);
  display: flex; align-items: center; justify-content: center;
}
.gl-mvisual img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.35s ease; }
.gl-mcard:hover .gl-mvisual img { transform: scale(1.035); }
.gl-mvisual .ph { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 10.5px; color: rgba(34,16,15,0.40); }
.gl-mbadge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; font-size: 9.5px; color: #fff;
  /* Categorie en sombre depuis le badge A2 (2026-10-07) : le rouge est reserve
     a l'information qui compte pour l'acheteur, le permis. */
  background: var(--navy-800);
  padding: 5px 11px; border-radius: 20px;
  box-shadow: 0 6px 14px -8px rgba(34,16,15,0.7);
}
/* Badge « A2 » a droite (retour client Power Zone 2026-10-06, repris sur GL
   Motos) : pose par build_brand_page.py uniquement quand la fiche constructeur
   mentionne A2. Blanc sur --orange-solid = 5,10:1. */
.gl-mvisual .gl-mbadge--a2 {
  left: auto; right: 12px;
  background: var(--orange-solid);
  font-size: 11px; letter-spacing: 1.6px; padding: 6px 13px;
  box-shadow: 0 8px 18px -8px rgba(168,28,28,0.8);
}
.gl-mbody { padding: 18px 20px 20px; }
.gl-mbody h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; font-size: 17px; color: var(--on-light); margin-bottom: 5px; }
.gl-mbody .gl-mspec { font-size: 13px; color: var(--on-light-soft); }

/* --- Cartes marque (variante sombre : meme grammaire, filet compris) --- */
.brand-card { border-radius: 18px; }
.brand-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  transition: background 0.25s ease;
}
.brand-card:hover::before,
.brand-card:focus-visible::before {
  background: linear-gradient(90deg, rgba(192,32,32,0) 0%, rgba(192,32,32,0.85) 50%, rgba(192,32,32,0) 100%);
}

/* --- Grands conteneurs (formulaire, pages legales) : rayon plus genereux --- */
.form-card,
.legal .lg-card { border-radius: 20px; }

/* ============================================================
   PASTILLE WHATSAPP FLOTTANTE
   z-index 90 : au-dessus du contenu, mais SOUS le header (100), le tiroir
   mobile (998/999) et les modales (1000). Un bouton flottant qui passe
   par-dessus un panneau ouvert est un bug, pas une priorite.
   ============================================================ */
.gl-wa {
  --wa-taille: 56px;                /* diametre de la pastille, reutilise par la pointe */
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  bottom: clamp(14px, 2.5vw, 26px);
  z-index: 90;
  display: flex; align-items: center; gap: 12px;
}
/* La pointe de la bulle est portee par le CONTENEUR, pas par la bulle : posee
   sur la bulle en right:-5px elle debordait de sa propre boite (scrollWidth
   159 pour 152), ce que la QA compte comme un debordement interne. Ici elle
   vit dans l'espace entre la bulle et la pastille. */
.gl-wa.a-bulle::after {
  content: ""; position: absolute;
  right: calc(var(--wa-taille) + 5px); top: 50%;
  width: 10px; height: 10px; background: #fff;
  transform: translateY(-50%) rotate(45deg);
}
.gl-wa-btn {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;            /* vert WhatsApp : on garde la couleur de la
                                     marque, c'est ce qui la rend reconnaissable
                                     au premier coup d'oeil */
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.10) inset;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gl-wa-btn svg { width: 30px; height: 30px; }
.gl-wa-btn:hover, .gl-wa-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.14) inset;
}
.gl-wa-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.gl-wa-bulle {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 8px 10px 14px;
  background: #fff; color: var(--on-light);
  border-radius: 12px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.45);
  opacity: 0; transform: translateX(8px);
  transition: opacity .28s ease, transform .28s ease;
}
.gl-wa-bulle[hidden] { display: none; }
.gl-wa-bulle.is-vue { opacity: 1; transform: none; }
.gl-wa-bulle-x {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: none;
  color: var(--on-light-soft); cursor: pointer;
}
.gl-wa-bulle-x svg { width: 13px; height: 13px; }
.gl-wa-bulle-x:hover { background: rgba(0,0,0,0.06); color: var(--on-light); }
.gl-wa-bulle-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

@media (max-width: 560px) {
  .gl-wa { --wa-taille: 52px; }
  .gl-wa-btn { width: 52px; height: 52px; }
  .gl-wa-btn svg { width: 27px; height: 27px; }
  .gl-wa-bulle { font-size: 13.5px; padding: 9px 6px 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-wa-btn, .gl-wa-bulle { transition: none; }
  .gl-wa-btn:hover, .gl-wa-btn:focus-visible { transform: none; }
}

/* ============================================================
   MEGA MENU « NOS MARQUES » (ordinateur)
   Le panneau s'ancre sur .nav, qui est sticky donc bloc conteneur : d'ou le
   position:static sur l'item porteur.
   ============================================================ */
.nav-mega-item { position: static; }
.nav-mega-trigger { display: inline-flex; align-items: center; gap: 6px; }
/* Le lien de navigation ne fait que la hauteur de son texte (padding 6px) et
   flotte au milieu d'une barre de 73 px. En descendant vers le panneau, la
   souris quittait donc le lien AVANT de l'atteindre, et le menu se refermait
   sous le curseur. Ce pont invisible prolonge la zone de survol jusqu'au bas
   de la barre, ou le panneau commence. Les 14 px lateraux tiennent dans le
   gap de 30 px : ils n'empietent pas sur les liens voisins. */
.nav-mega-trigger::before {
  content: ""; position: absolute;
  left: -14px; right: -14px; top: -26px; bottom: -28px;
}
.nav-mega-caret { width: 13px; height: 13px; opacity: .7; transition: transform .25s ease, opacity .2s ease; }
.nav-mega-item:hover .nav-mega-caret,
.nav-mega-item:focus-within .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(192,32,32,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 34px 60px -30px rgba(0,0,0,0.85);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease .12s, transform .26s cubic-bezier(.4,0,.2,1) .12s, visibility 0s .32s;
}
.nav-mega-item:hover .nav-mega,
.nav-mega-item:focus-within .nav-mega {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity .22s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.nav-mega-wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(24px,2.6vw,34px) var(--pad-x) clamp(18px,2vw,26px);
}
/* minmax(0, 1fr) et non 1fr : une colonne de grille refuse par defaut de
   descendre sous la largeur minimale de son contenu, et « Trails Adventure &
   Sport-GT » imposait 1163 px a un panneau qui n'en avait que 1129 juste
   au-dessus de la bascule. Avec minmax(0,…) la colonne cede et le nom passe a
   la ligne. */
.gl-mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px,1.4vw,18px); }

/* Chaque marque est une zone, pas une liste posee sur un fond. Le survol le
   dit : quatre colonnes nues, on ne sait pas ou commence et finit une marque. */
.gl-mega-col {
  padding: 14px 16px 16px;
  border: 1px solid transparent; border-radius: 14px;
  transition: background .18s ease, border-color .18s ease;
}
.gl-mega-col:hover {
  background: rgba(255,255,255,0.035);
  border-color: rgba(192,32,32,0.28);
}

.gl-mega-head {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-decoration: none;
}
/* La fleche est HORS DU FLUX : invisible, elle occupait quand meme ses 15 px
   plus le gap, et « Kawasaki » (le nom le plus long) faisait alors deborder sa
   colonne de 4 px a partir de 1280. Elle prend la place du compteur, qui
   s'efface au survol : les deux ne sont jamais utiles en meme temps. */
.gl-mega-fleche {
  position: absolute; right: 0; top: 50%;
  width: 15px; height: 15px; color: var(--blue-bright);
  opacity: 0; transform: translate(-5px, -50%);
  transition: opacity .18s ease, transform .18s ease;
}
.gl-mega-col:hover .gl-mega-n { opacity: 0; transition: opacity .12s ease; }
.gl-mega-col:hover .gl-mega-fleche { opacity: 1; transform: translate(0, -50%); }
.gl-mega-col:hover .gl-mega-head { border-bottom-color: rgba(192,32,32,0.35); }
.gl-mega-chip {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  padding: 6px; border-radius: 10px; background: #fff;
}
.gl-mega-chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.gl-mega-nom {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  letter-spacing: .4px; text-transform: uppercase; color: #fff;
}
.gl-mega-n { margin-left: auto; font-size: 11.5px; color: var(--on-dark-faint); white-space: nowrap; }
.gl-mega-head:hover .gl-mega-nom { color: var(--blue-bright); }

.gl-mega-gammes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gl-mega-gammes a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 8px; margin-left: -8px; border-radius: 7px;
  font-size: 13.5px; color: var(--on-dark-soft); text-decoration: none;
  /* .nav-links a met tout en capitales : sur des noms de gammes longs
     (« Trails Adventure & Sport-GT ») ca fait deux lignes de cris. */
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
/* Le libelle porte min-width:0, sans quoi un element de flex refuse de passer
   sous la largeur de son contenu : « Trails Adventure & Sport-GT » faisait
   deborder sa colonne de 4 px a partir de 1280. */
.gl-mega-gammes a { min-width: 0; }
.gl-mega-g { min-width: 0; overflow-wrap: break-word; }
.gl-mega-c { margin-left: auto; padding-left: 8px; font-size: 11px; color: var(--on-dark-faint); flex-shrink: 0; }
.gl-mega-gammes a:hover { background: rgba(192,32,32,0.16); color: #fff; }
.gl-mega-gammes a:hover .gl-mega-c { color: rgba(255,255,255,0.7); }
.gl-mega-reste a { font-style: italic; color: var(--on-dark-faint); }

.gl-mega-pied {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin-top: clamp(14px,1.8vw,20px); padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.gl-mega-foot {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--blue-bright); text-decoration: none;
}
.gl-mega-foot svg { width: 15px; height: 15px; transition: transform .18s ease; }
.gl-mega-foot:hover svg { transform: translateX(4px); }
/* La seconde sortie est secondaire : meme forme, moins de poids. */
.gl-mega-foot-2 { color: var(--on-dark-soft); }
.gl-mega-foot-2:hover { color: #fff; }

/* Sous 940 px la barre de navigation disparait au profit du tiroir : le
   panneau n'a plus de declencheur, on le retire du DOM rendu. */
/* Le panneau suit son declencheur : sans barre de navigation, pas de survol
   possible, et un panneau qui reste dans le DOM rendu deborde en largeur. */
@media (max-width: 1300px) { .nav-mega { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-mega { transition: opacity .01s, visibility 0s; transform: none; }
  .nav-mega-item:hover .nav-mega, .nav-mega-item:focus-within .nav-mega { transform: none; }
}

/* ============================================================
   MOTOS D'OCCASION (extension glmotos-motos)
   Le style vit ici, pas dans l'extension : une occasion doit ressembler au
   reste du site, et la DA ne se maintient pas a deux endroits.
   ============================================================ */
.glm-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.glm-filtre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-light); background: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: .3px; color: var(--on-light); text-decoration: none;
}
.glm-filtre span { font-size: 11.5px; font-weight: 600; color: var(--on-light-soft); }
.glm-filtre:hover { border-color: var(--blue); color: var(--blue); }
.glm-filtre.est-actif { background: var(--orange-solid); border-color: var(--orange-solid); color: #fff; }
.glm-filtre.est-actif span { color: rgba(255,255,255,0.75); }

.glm-grille-occasions {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 24px;
}
.glm-carte {
  border: 1px solid var(--line-light); border-radius: 16px; overflow: hidden;
  background: #fff; transition: transform .18s ease, box-shadow .18s ease;
}
.glm-carte:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(0,0,0,.42); }
.glm-carte-lien { display: block; text-decoration: none; color: inherit; }
.glm-carte-visuel { position: relative; aspect-ratio: 4 / 3; background: var(--paper); }
.glm-carte-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glm-carte-sansphoto {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: var(--on-light-soft); font-size: 13.5px;
}
.glm-etiquette {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .8px; text-transform: uppercase;
}
/* Good deal : la seule etiquette en couleur d'accent, c'est l'argument de la carte. */
.glm-etiquette-deal { background: var(--orange-solid); }
/* Une moto vendue reste consultable mais ne se fait pas passer pour dispo. */
.glm-carte.est-vendue .glm-carte-visuel img { filter: grayscale(1); opacity: .62; }
.glm-carte-corps { padding: 16px 18px 18px; }
.glm-carte-corps h3 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .4px; font-size: 18px;
  color: var(--on-light); margin: 0 0 6px;
}
.glm-carte-specs { font-size: 13px; color: var(--on-light-soft); margin: 0 0 12px; }
.glm-carte-prix { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.glm-carte-prix del { font-size: 13.5px; color: var(--on-light-soft); }
.glm-carte-prix b {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: .3px; color: var(--blue-deep);
}

.glm-vide { max-width: 620px; }
.glm-vide-titre {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; font-size: clamp(20px,2.6vw,28px);
  color: var(--on-light); margin: 0 0 12px;
}
.glm-vide-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ---- Fiche d'une moto ---- */
.glm-fiche-haut { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(26px,3.4vw,48px); margin-top: 26px; }
.glm-fiche-photo { width: 100%; border-radius: 16px; display: block; aspect-ratio: 4/3; object-fit: cover; background: var(--paper); }
/* Repli sans photo : .glm-carte-sansphoto fait height:100%, ce qui vaut zero
   quand le parent n'est pas dimensionne. La colonne s'effondrait alors et le
   bas de la fiche remontait a hauteur du bloc de droite. */
.glm-fiche-photo.glm-carte-sansphoto { height: auto; }
.glm-fiche-vignettes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.glm-fiche-vignettes img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; }
.glm-fiche-infos h1 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; line-height: .98; letter-spacing: .5px;
  font-size: clamp(28px,3.8vw,44px); color: var(--on-light); margin: 0 0 14px;
}
.glm-fiche-prix { margin: 0 0 8px; display: flex; align-items: baseline; gap: 12px; }
.glm-fiche-prix del { font-size: 16px; color: var(--on-light-soft); }
.glm-fiche-prix b { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--blue-deep); }
.glm-fiche-dispo {
  display: inline-block; margin: 0 0 16px; padding: 5px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
}
.glm-caracs { margin: 22px 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); border-radius: 12px; overflow: hidden; }
.glm-caracs > div { background: #fff; padding: 12px 14px; }
.glm-caracs dt { font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--on-light-soft); margin: 0 0 3px; }
.glm-caracs dd { margin: 0; font-weight: 600; font-size: 14.5px; color: var(--on-light); }
.glm-fiche-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.glm-fiche-marque { margin: 18px 0 0; font-size: 14px; color: var(--on-light-soft); }
.glm-fiche-bas { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(26px,3.4vw,48px); margin-top: clamp(36px,4vw,56px); }
.glm-fiche-bas h2 {
  font-family: var(--font-display); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; font-size: clamp(20px,2.4vw,26px);
  color: var(--on-light); margin: 0 0 14px;
}
.glm-fiche-bas p { color: var(--on-light-soft); line-height: 1.75; }

@media (max-width: 860px) {
  .glm-fiche-haut, .glm-fiche-bas { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .glm-caracs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .glm-carte { transition: none; }
  .glm-carte:hover { transform: none; }
}

/* Le fil d'ariane est dessine pour les heros SOMBRES. Sur la fiche moto, qui
   est sur fond clair, il devenait gris pale sur blanc. */
.glm-fiche .crumbs { color: var(--on-light-soft); }
.glm-fiche .crumbs a { color: var(--on-light-soft); }
.glm-fiche .crumbs a:hover { color: var(--blue); }
.glm-fiche .crumbs span { color: var(--blue); }

/* Bandeau de consentement (porte de Turquoise, 2026-10-08) */
/* ============================================================
   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.
   ============================================================ */
.gl-consent[hidden] { display: none; }   /* sinon un display: de theme ecrase hidden, cf. l'overlay EM */
.gl-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;                       /* au-dessus du contenu, sous le tiroir mobile */
  padding: 16px;
  pointer-events: none;              /* seule la carte capte le clic */
}
.gl-consent-card {
  pointer-events: auto;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--navy-850), var(--navy-900));
  border: 1px solid rgba(201,205,211,0.18);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.7);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.gl-consent.is-on .gl-consent-card { transform: translateY(0); opacity: 1; }

.gl-consent-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--turquoise-soft);
}
.gl-consent-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);      /* sur --navy-900 chaud */
}
.gl-consent-body a { color: var(--turquoise-soft); text-decoration: underline; }
.gl-consent-body a:hover { color: #fff; }

.gl-consent-btns {
  display: flex;
  gap: 12px;
  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. */
.gl-consent-btns .btn { min-width: 132px; padding: 12px 20px; }
.gl-consent .btn-outline {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.45);
}
.gl-consent .btn-outline:hover { background: rgba(255,255,255,0.18); }
/* Kadence repeint les <button> au focus : on garde notre anneau. */
.gl-consent .btn:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .gl-consent { padding: 12px; }
  .gl-consent-card { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .gl-consent-btns { flex-direction: row; }
  .gl-consent-btns .btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-consent-card { transition: none; transform: none; }
}