/* ═══════════════════════════════════════════════════════════════════
 * hero-flag.css — Drapeau suisse watermark GARANTI à droite
 * sur tous les conteneurs de "titre de page" (hero, page-hero, legal-wrap,
 * avis-hero, guide-hero, etc.).
 *
 * ET fond blanc uniforme sur toutes les pages (jamais de navy en fond body).
 *
 * Chargé par BaseLayout après les autres CSS → source unique de vérité.
 * ═══════════════════════════════════════════════════════════════════ */

/* Fond blanc UNIFORME sur toutes les pages — pas de navy en arrière-plan */
html, body {
  background: #ffffff !important;
}
body {
  color: #1E293B !important;
}

/* Override tous les hero qui auraient du navy */
.avis-hero,
.guide-hero,
.guides-hero,
header.hero,
.page-hero,
.legal-wrap {
  background: #ffffff !important;
}

/* Texte des titres en navy (jamais blanc) — sur fond blanc */
html body .page-hero h1,
html body .page-hero h2,
html body .page-hero .lead,
html body .page-hero p,
html body .legal-wrap h1,
html body .legal-wrap h2,
html body .legal-wrap .lead,
html body .avis-hero h1,
html body .avis-hero p,
html body .guide-hero h1,
html body .guide-hero .lead,
html body .guide-hero p,
html body .guides-hero h1,
html body .guides-hero p,
html body header.hero h1,
html body header.hero .hero-lead {
  color: #1a2e3b !important;
}
html body .page-hero .lead,
html body .page-hero p,
html body .legal-wrap .lead,
html body .avis-hero p,
html body .guide-hero p,
html body .guide-hero .lead,
html body .guides-hero p {
  opacity: .85;
}
/* Conserver l'italique en or (accent) */
html body .page-hero h1 .ital,
html body .legal-wrap h1 .ital,
html body .avis-hero h1 .ital,
html body .guide-hero h1 .ital,
html body .guides-hero h1 .ital,
html body header.hero h1 .ital {
  color: #b08e36 !important;
  font-style: italic;
}

.page-hero,
.legal-wrap,
.avis-hero,
.guide-hero,
.guides-hero,
header.hero {
  position: relative;
  overflow: hidden;
}

/* Drapeau suisse (::before) à droite */
.page-hero::before,
.legal-wrap::before,
.avis-hero::before,
.guide-hero::before,
.guides-hero::before {
  content: "";
  position: absolute;
  right: -40px !important;
  left: auto !important;
  top: 40px;
  width: 520px;
  height: 520px;
  opacity: .065;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%23FF0000' width='100' height='100'/><rect fill='%23fff' height='60' width='16' x='42' y='20'/><rect fill='%23fff' height='16' width='60' x='20' y='42'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Taille adaptée pour les pages légales (conteneur plus étroit) */
.legal-wrap::before {
  width: 420px;
  height: 420px;
  opacity: .05;
}

/* Silhouette montagnes en bas (::after) */
.page-hero::after,
.avis-hero::after,
.guide-hero::after,
.guides-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 220px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 220'><path fill='none' stroke='%231a2e3b' stroke-width='1.2' opacity='.22' d='M0,190 L120,160 L200,170 L280,120 L340,140 L420,70 L490,110 L560,50 L640,90 L720,40 L790,95 L860,60 L950,130 L1020,100 L1100,150 L1180,120 L1260,170 L1340,140 L1440,180'/></svg>");
  background-size: 100% 100%;
  z-index: 0;
}

/* Contenu au-dessus des décors (z-index > 0) */
.page-hero > *,
.legal-wrap > *,
.avis-hero > *,
.guide-hero > *,
.guides-hero > * {
  position: relative;
  z-index: 1;
}

/* Force le <div class="cross-wm"> existant dans certains vanilla HTML à droite aussi */
.cross-wm {
  right: -40px !important;
  left: auto !important;
}