/**
 * Excursion Côte Ouest — La Balise Marina.
 *
 * CSS fourni par la maquette validée, intégralement conservé (valeurs,
 * couleurs, proportions, points de rupture). Seules deux adaptations
 * techniques : les chemins d'images pointent vers assets/img/excursions/,
 * et toutes les règles sont scopées sous .mmm-exc afin que les sélecteurs
 * globaux de la maquette (body, section, h2, a, img, .container, :root)
 * n'affectent pas le footer du thème présent sur la même page.
 *
 * @package BateauxMaurice
 */

.mmm-exc { --navy:#001b33;--navy2:#062641;--ink:#14233a;--muted:#607086;--gold:#c89b55;--gold2:#d8b46e;--ivory:#fbf8f1;--line:#e4dacb;--white:#fff;--shadow:0 20px 60px rgba(0,27,51,.12);--serif:"Playfair Display",Georgia,serif;--sans:"Inter",Arial,sans-serif;--container:1180px }
.mmm-exc * { box-sizing:border-box }
.mmm-exc { margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased }
.mmm-exc img { display:block;max-width:100% }
.mmm-exc a { color:inherit;text-decoration:none }
.mmm-exc .container { width:min(var(--container),calc(100% - 40px));margin:auto }
.mmm-exc .site-header { position:absolute;top:0;left:0;right:0;z-index:20;color:#fff;border-bottom:1px solid rgba(255,255,255,.18);background:rgba(0,27,51,.3);backdrop-filter:blur(7px) }
.mmm-exc .nav { height:78px;display:flex;align-items:center;justify-content:space-between;gap:26px }
.mmm-exc .logo img { width:210px }
.mmm-exc .menu { display:flex;gap:24px;font-size:12px;font-weight:800;text-transform:uppercase }
.mmm-exc .menu a { padding:30px 0;position:relative }
.mmm-exc .menu a.active:after, .mmm-exc .menu a:hover:after { content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;background:var(--gold) }
.mmm-exc .header-cta { border:1px solid var(--gold);padding:13px 16px;color:var(--gold2);font-size:11px;font-weight:800;text-transform:uppercase }
.mmm-exc .mobile-toggle { display:none }
.mmm-exc .hero { min-height:690px;color:#fff;background:linear-gradient(90deg,rgba(0,27,51,.9),rgba(0,27,51,.62),rgba(0,27,51,.05)),url("../img/excursions/cote-ouest/hero-catamaran.webp") center/cover no-repeat }
.mmm-exc .hero-inner { min-height:690px;display:grid;align-items:end;padding:150px 0 52px }
.mmm-exc .breadcrumb { font-size:11px;color:rgba(255,255,255,.75);margin-bottom:38px }
.mmm-exc .badge { display:inline-flex;background:var(--gold);padding:7px 10px;font-size:10px;font-weight:800;text-transform:uppercase;margin-bottom:16px }
.mmm-exc .hero h1 { font-family:var(--serif);font-size:clamp(48px,5.5vw,78px);line-height:1.02;letter-spacing:-.035em;max-width:790px;margin:0 }
.mmm-exc .hero-copy { max-width:590px;margin:22px 0 32px;line-height:1.7;color:rgba(255,255,255,.9);font-size:17px }
.mmm-exc .hero-facts { display:grid;grid-template-columns:repeat(4,auto);justify-content:start }
.mmm-exc .hero-fact { display:flex;align-items:center;gap:12px;padding:0 26px;border-right:1px solid rgba(255,255,255,.25) }
.mmm-exc .hero-fact:first-child { padding-left:0 }
.mmm-exc .hero-fact:last-child { border-right:0 }
.mmm-exc .hero-fact img { width:30px;height:30px;filter:brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(725%) hue-rotate(356deg) brightness(87%) }
.mmm-exc .hero-fact strong { display:block;font-size:13px }
.mmm-exc .hero-fact span { display:block;font-size:11px;color:rgba(255,255,255,.75);margin-top:3px }
.mmm-exc section { padding:68px 0 }
.mmm-exc .main-grid { display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start }
.mmm-exc .kicker { display:block;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px }
.mmm-exc h2 { font-family:var(--serif);font-size:clamp(34px,3.4vw,52px);line-height:1.1;color:var(--navy);margin:0 }
.mmm-exc .lead { color:var(--muted);line-height:1.75;margin:20px 0 30px }
.mmm-exc .highlights { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line) }
.mmm-exc .highlight { padding:26px 22px;border-right:1px solid var(--line) }
.mmm-exc .highlight:last-child { border-right:0 }
.mmm-exc .highlight img { width:42px;height:42px;margin-bottom:14px }
.mmm-exc .highlight h3 { font-size:15px;color:var(--navy);margin:0 0 8px }
.mmm-exc .highlight p { font-size:13px;color:var(--muted);line-height:1.55;margin:0 }
.mmm-exc .price-card { position:sticky;top:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:30px }
.mmm-exc .price-card small { display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase }
.mmm-exc .price { font-family:var(--serif);font-size:46px;color:var(--navy);margin:8px 0 20px }
.mmm-exc .price span { font-family:var(--sans);font-size:12px;color:var(--muted) }
.mmm-exc .checks { display:grid;gap:14px;margin-bottom:24px }
.mmm-exc .check { display:flex;gap:10px }
.mmm-exc .check img { width:20px;height:20px }
.mmm-exc .check strong { display:block;font-size:13px }
.mmm-exc .check span { display:block;font-size:11px;color:var(--muted);margin-top:3px }
.mmm-exc .btn { min-height:48px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;font-size:11px;font-weight:800;text-transform:uppercase }
.mmm-exc .btn-navy { background:var(--navy);color:#fff;width:100% }
.mmm-exc .btn-outline { border-color:var(--gold);color:var(--navy);width:100%;margin-top:10px;background:#fff }
.mmm-exc .btn img { width:18px;height:18px }
.mmm-exc .program-section { padding-top:20px }
.mmm-exc .program-grid { display:grid;grid-template-columns:300px 1fr;gap:34px }
.mmm-exc .timeline { position:relative }
.mmm-exc .timeline:before { content:"";position:absolute;left:6px;top:12px;bottom:12px;width:1px;background:var(--gold) }
.mmm-exc .time-row { display:grid;grid-template-columns:54px 1fr;gap:12px;padding:0 0 22px 22px;position:relative }
.mmm-exc .time-row:before { content:"";position:absolute;left:1px;top:6px;width:11px;height:11px;background:var(--gold);border-radius:50% }
.mmm-exc .time-row strong { font-size:12px }
.mmm-exc .time-row h3 { font-size:13px;margin:0 0 4px;color:var(--navy) }
.mmm-exc .time-row p { font-size:11px;color:var(--muted);margin:0 }
.mmm-exc .gallery-main { height:320px;overflow:hidden }
.mmm-exc .gallery-main img, .mmm-exc .gallery-small img { width:100%;height:100%;object-fit:cover }
.mmm-exc .gallery-row { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px }
.mmm-exc .gallery-small { height:150px;overflow:hidden }
.mmm-exc .inclusions { background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:repeat(6,1fr) 1.5fr }
.mmm-exc .included, .mmm-exc .bring { padding:24px 18px;border-right:1px solid var(--line) }
.mmm-exc .included img { width:28px;height:28px;margin-bottom:12px }
.mmm-exc .included strong, .mmm-exc .bring strong { display:block;font-size:12px;color:var(--navy) }
.mmm-exc .included span, .mmm-exc .bring span { display:block;font-size:11px;color:var(--muted);margin-top:5px }
.mmm-exc .bring { border-right:0 }
.mmm-exc .practical { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff }
.mmm-exc .practical-item { padding:22px;border-right:1px solid var(--line);display:flex;gap:12px }
.mmm-exc .practical-item:last-child { border-right:0 }
.mmm-exc .practical-item img { width:28px;height:28px }
.mmm-exc .practical-item strong { font-size:11px;text-transform:uppercase }
.mmm-exc .practical-item span { display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:6px }
.mmm-exc .bottom-grid { display:grid;grid-template-columns:1.05fr .95fr;gap:28px }
.mmm-exc .personal-cta { min-height:260px;padding:34px;color:#fff;background:linear-gradient(90deg,rgba(0,27,51,.98),rgba(0,27,51,.62)),url("../img/excursions/cote-ouest/cta-underwater.webp") center/cover no-repeat }
.mmm-exc .personal-cta h2 { color:#fff;font-size:36px }
.mmm-exc .personal-cta p { color:rgba(255,255,255,.82);line-height:1.65 }
.mmm-exc .personal-cta .btn { background:var(--gold);color:#fff }
.mmm-exc .faq details { background:#fff;border:1px solid var(--line);margin-bottom:10px }
.mmm-exc .faq summary { list-style:none;cursor:pointer;padding:17px 18px;font-weight:700;font-size:13px;display:flex;justify-content:space-between }
.mmm-exc .faq summary::-webkit-details-marker { display:none }
.mmm-exc .faq summary:after { content:"+";color:var(--gold);font-size:20px }
.mmm-exc .faq details[open] summary:after { content:"−" }
.mmm-exc .faq p { padding:0 18px 17px;margin:0;color:var(--muted);font-size:13px;line-height:1.6 }
.mmm-exc .trust-strip { padding:28px 0;border-top:1px solid var(--line);background:#fff }
.mmm-exc .trust-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px }
.mmm-exc .trust-item { display:flex;gap:12px;align-items:center }
.mmm-exc .trust-item img { width:32px;height:32px }
.mmm-exc .trust-item strong { display:block;font-size:12px }
.mmm-exc .trust-item span { display:block;color:var(--muted);font-size:11px;margin-top:3px }
@media(max-width:1050px) {
	.mmm-exc .menu, .mmm-exc .header-cta { display:none }
	.mmm-exc .mobile-toggle { display:block;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:10px 14px }
	.mmm-exc .main-grid, .mmm-exc .program-grid, .mmm-exc .bottom-grid { grid-template-columns:1fr }
	.mmm-exc .price-card { position:static }
	.mmm-exc .hero-facts { grid-template-columns:repeat(2,1fr);gap:18px }
	.mmm-exc .hero-fact { padding:0;border:0 }
	.mmm-exc .inclusions { grid-template-columns:repeat(3,1fr) }
	.mmm-exc .practical { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:720px) {
	.mmm-exc .container { width:min(100% - 28px,var(--container)) }
	.mmm-exc .logo img { width:170px }
	.mmm-exc .hero { background:linear-gradient(180deg,rgba(0,27,51,.88),rgba(0,27,51,.45)),url("../img/excursions/cote-ouest/hero-mobile.webp") center/cover no-repeat }
	.mmm-exc .hero-inner { min-height:720px }
	.mmm-exc .hero h1 { font-size:43px }
	.mmm-exc .hero-facts, .mmm-exc .highlights, .mmm-exc .gallery-row, .mmm-exc .inclusions, .mmm-exc .practical, .mmm-exc .trust-grid { grid-template-columns:1fr }
	.mmm-exc .highlight, .mmm-exc .included, .mmm-exc .bring, .mmm-exc .practical-item { border-right:0;border-bottom:1px solid var(--line) }
	.mmm-exc .gallery-main { height:240px }
	.mmm-exc .gallery-small { height:210px }
	.mmm-exc .price-card { padding:24px }
}

/* -----------------------------------------------------------------------
   Neutralisation des styles du thème parent (Hello Elementor)
   -----------------------------------------------------------------------
   La maquette utilise « .site-header », nom de classe que Hello Elementor
   emploie déjà pour SON propre header. Deux de ses règles s'appliquaient donc
   à notre header et le déformaient :
     theme.css        → max-width:1140px + margin-inline:auto (header rétréci
                        et centré : le conteneur tombait à 1100px au lieu de
                        1180px, le menu se comprimait et passait sur 2 lignes) ;
     header-footer.css→ display:flex + flex-wrap:wrap + padding-block:1rem.
   On restitue ici le comportement attendu par la maquette. Aucune valeur du
   design n'est modifiée : ce bloc ne fait qu'annuler un héritage parasite.
   ----------------------------------------------------------------------- */
.mmm-exc .site-header { display:block; width:auto; max-width:none; margin-inline:0; padding-block:0 }
/* Les libellés du menu et du bouton restent sur une seule ligne, comme sur la
   maquette : avec la vraie police Inter 800 (plus large que le rendu de la
   planche de référence), les intitulés se coupaient sinon en deux lignes et
   doublaient la hauteur du header. Le logo et le bouton absorbent l'ajustement
   en se réduisant très légèrement, sans déformation. */
.mmm-exc .menu a, .mmm-exc .header-cta { white-space:nowrap }
/* Entre 1050 et 1250px, le trio logo + menu complet + bouton ne tient plus dans
   le conteneur : le logo se retrouvait écrasé (jusqu'à 27px de large). On masque
   le bouton du header sur cette bande uniquement — l'action reste accessible
   dans la carte tarif — ce qui rend au logo et au menu leur taille normale. */
@media (max-width: 1250px) { .mmm-exc .header-cta { display:none } }

/* -----------------------------------------------------------------------
   Compléments fonctionnels (menu mobile, langue, fil d'ariane)
   -----------------------------------------------------------------------
   La maquette prévoyait un bouton « Menu » et un JS basculant la classe
   « open », mais aucune règle .menu.open : le bouton était inerte et la
   navigation inaccessible sous 1050px. Le sélecteur de langue, nécessaire
   sur un site bilingue, n'était pas prévu. Ces règles reprennent strictement
   le langage visuel de la maquette (navy translucide, or, capitales Inter).
   ----------------------------------------------------------------------- */

/* Groupe d'actions du header : langue + bouton + burger */
.mmm-exc .header-actions { display:flex; align-items:center; gap:18px; flex:none }

/* Sélecteur de langue */
.mmm-exc .lang-switch { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em }
.mmm-exc .lang-switch a { color:rgba(255,255,255,.6); white-space:nowrap; padding:4px 2px }
.mmm-exc .lang-switch a:hover { color:#fff }
.mmm-exc .lang-switch a.is-current { color:var(--gold2) }
.mmm-exc .lang-switch span { color:rgba(255,255,255,.3) }

/* Fil d'ariane cliquable */
.mmm-exc .breadcrumb a { color:rgba(255,255,255,.75); text-decoration:none }
.mmm-exc .breadcrumb a:hover { color:#fff; text-decoration:underline }
.mmm-exc .breadcrumb span { color:rgba(255,255,255,.55) }

/* Menu mobile déroulant : panneau sous le header */
@media (max-width: 1050px) {
	.mmm-exc .menu.open {
		display:flex; flex-direction:column; gap:0;
		position:absolute; left:0; right:0; top:100%;
		background:rgba(0,27,51,.97); backdrop-filter:blur(7px);
		border-top:1px solid rgba(255,255,255,.18);
		padding:4px 0 8px; z-index:30;
	}
	.mmm-exc .menu.open a { padding:15px 20px; border-bottom:1px solid rgba(255,255,255,.1) }
	.mmm-exc .menu.open a:last-child { border-bottom:0 }
	.mmm-exc .menu.open a:after { display:none }
	.mmm-exc .menu.open a.active { color:var(--gold2) }
	.mmm-exc .container.nav { position:static }
	.mmm-exc .mobile-toggle[aria-expanded="true"] { border-color:var(--gold); color:var(--gold2) }
}

/* -----------------------------------------------------------------------
   Page liste « Excursions » (parente) — mêmes tokens que la fiche
   ----------------------------------------------------------------------- */
.mmm-exc .hero-compact, .mmm-exc .hero-compact .hero-inner { min-height:440px }
.mmm-exc .hero-compact .hero-inner { padding:140px 0 46px }
.mmm-exc .exc-list { display:grid; gap:20px; margin-top:26px }
.mmm-exc .exc-card { display:grid; grid-template-columns:420px 1fr; background:#fff; border:1px solid var(--line); box-shadow:var(--soft-shadow); overflow:hidden }
.mmm-exc .exc-card__media { display:block; height:100%; min-height:260px; overflow:hidden }
.mmm-exc .exc-card__media img { width:100%; height:100%; object-fit:cover }
.mmm-exc .exc-card__body { padding:30px 32px; display:flex; flex-direction:column; gap:12px }
.mmm-exc .exc-card__body .badge { align-self:flex-start; margin-bottom:2px }
.mmm-exc .exc-card__body h3 { font-family:var(--serif); font-size:30px; line-height:1.12; color:var(--navy); margin:0 }
.mmm-exc .exc-card__body h3 span { display:block; font-size:19px; color:var(--muted) }
.mmm-exc .exc-card__body p { color:var(--muted); line-height:1.7; margin:0; font-size:14px }
.mmm-exc .exc-card__facts { display:flex; flex-wrap:wrap; gap:18px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.mmm-exc .exc-card__facts span { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ink) }
.mmm-exc .exc-card__foot { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:auto; flex-wrap:wrap }
.mmm-exc .exc-card__foot strong { font-size:12px; color:var(--muted); font-weight:500 }
.mmm-exc .exc-card__foot b { font-family:var(--serif); font-size:26px; color:var(--navy); font-weight:600 }
.mmm-exc .exc-card__foot .btn { width:auto; padding:0 26px }
@media (max-width: 860px) {
	.mmm-exc .exc-card { grid-template-columns:1fr }
	.mmm-exc .exc-card__media { min-height:210px }
	.mmm-exc .exc-card__body { padding:24px }
	.mmm-exc .exc-card__foot .btn { width:100% }
}

/* -----------------------------------------------------------------------
   Icônes SVG bicolores + éléments de la maquette de référence
   -----------------------------------------------------------------------
   Les icônes sont désormais inline (voir mbm_exc_icon) : chacune expose un
   tracé principal (currentColor) et un tracé d'accent (--ic-accent). On fixe
   ici les deux couleurs section par section, conformément au visuel validé :
   marine + accent doré dans les blocs clairs, doré + accent marine dans le
   bandeau pratique, entièrement doré sur le hero.
   ----------------------------------------------------------------------- */
.mmm-exc svg.ic { display:block; flex:none; width:24px; height:24px }
.mmm-exc .hero-fact svg.ic { width:30px; height:30px; color:var(--gold2); --ic-accent:var(--gold2) }
.mmm-exc .highlight svg.ic { width:42px; height:42px; margin-bottom:14px; color:var(--navy); --ic-accent:var(--gold) }
.mmm-exc .check svg.ic { width:20px; height:20px; color:var(--navy); --ic-accent:var(--gold) }
.mmm-exc .included svg.ic { width:28px; height:28px; margin-bottom:12px; color:var(--navy); --ic-accent:var(--gold) }
.mmm-exc .practical-item svg.ic { width:28px; height:28px; color:var(--gold); --ic-accent:var(--navy) }
.mmm-exc .trust-item svg.ic { width:32px; height:32px; color:var(--navy); --ic-accent:var(--gold) }
.mmm-exc .btn svg.ic { width:18px; height:18px; color:currentColor; --ic-accent:currentColor }
.mmm-exc .btn-outline svg.ic { color:#25d366; --ic-accent:#25d366 }

/* Fil d'ariane : retour « Toutes les excursions » (visuel validé) */
.mmm-exc .breadcrumb-back { display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800;
	letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82) }
.mmm-exc .breadcrumb-back:hover { color:#fff }

/* Bloc inclusions : intitulés dorés « Inclus dans l'excursion » / « À prévoir » */
.mmm-exc .inclusions { position:relative; padding-top:54px }
.mmm-exc .inclusions-title { position:absolute; top:22px; left:18px; margin:0 }
.mmm-exc .bring .kicker { margin-bottom:10px }

/* Lien « Voir sur la carte » du bloc Départ */
.mmm-exc .practical-link { display:inline-flex; align-items:center; gap:6px; margin-top:8px;
	font-size:11px; font-weight:700; color:var(--gold); text-transform:none }
.mmm-exc .practical-link:hover { color:var(--navy) }

/* Lien « Voir toutes les FAQ » */
.mmm-exc .faq-all { display:inline-flex; align-items:center; gap:8px; margin-top:14px;
	font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--navy) }
.mmm-exc .faq-all:hover { color:var(--gold) }

/* Bande de réassurance : 5 items */
.mmm-exc .trust-grid { grid-template-columns:repeat(5,1fr) }
@media (max-width:1050px) { .mmm-exc .trust-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:720px) { .mmm-exc .trust-grid { grid-template-columns:1fr } }
.mmm-exc .exc-card__facts svg.ic { width:18px; height:18px; color:var(--gold); --ic-accent:var(--navy) }

/* -----------------------------------------------------------------------
   Sous-menu « Expériences » du header excursion
   -----------------------------------------------------------------------
   Le menu de la maquette ne listait ni « Expériences » ni « St Brandon » ;
   ces pages restaient donc inaccessibles depuis les pages excursion, alors
   que le header global du site les propose. On les rétablit sous forme de
   déroulant, dans le langage visuel du header (navy translucide, or au survol).
   ----------------------------------------------------------------------- */
.mmm-exc .menu .has-sub { position:relative; display:flex; align-items:center }
.mmm-exc .menu .has-sub > a { display:inline-flex; align-items:center; gap:6px }
.mmm-exc .menu .sub-chevron { width:11px; height:11px; opacity:.8; transition:transform .18s ease }
.mmm-exc .menu .has-sub:hover .sub-chevron { transform:rotate(180deg) }
.mmm-exc .menu .sub {
	position:absolute; top:100%; left:-16px; min-width:256px; z-index:40;
	background:rgba(0,27,51,.97); backdrop-filter:blur(7px);
	border:1px solid rgba(255,255,255,.14); padding:6px 0;
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.mmm-exc .menu .has-sub:hover .sub,
.mmm-exc .menu .has-sub:focus-within .sub { opacity:1; visibility:visible; transform:translateY(0) }
.mmm-exc .menu .sub a { display:block; padding:11px 18px; font-size:11px; font-weight:600;
	letter-spacing:.02em; text-transform:none; white-space:nowrap }
.mmm-exc .menu .sub a:hover { color:var(--gold2) }
.mmm-exc .menu .sub a:after { display:none }

/* Panneau mobile : le déroulant se déplie à plat sous son parent. */
@media (max-width: 1050px) {
	.mmm-exc .menu.open .has-sub { flex-direction:column; align-items:stretch }
	.mmm-exc .menu.open .sub { position:static; opacity:1; visibility:visible; transform:none;
		background:none; border:0; backdrop-filter:none; padding:0; min-width:0 }
	.mmm-exc .menu.open .sub a { padding:12px 20px 12px 36px; opacity:.85 }
	.mmm-exc .menu.open .has-sub > a { border-bottom:1px solid rgba(255,255,255,.1) }
	.mmm-exc .menu.open .sub-chevron { display:none }
}