/*
 * Composants communs à toutes les pages : en-tête, pied de page, icônes.
 * Le HTML vient de partials/ (voir tools/sync-layout.ps1).
 */

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 76px;
  padding: .5rem clamp(1.25rem, 6vw, 6%);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  transition: box-shadow .25s ease, min-height .25s ease;
}

.site-header.is-scrolled {
  min-height: 64px;
  box-shadow: 0 8px 28px rgba(11, 27, 87, .1);
}

.site-logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.site-logo img {
  display: block;
  width: 150px;
  height: auto;
  transition: width .25s ease;
}

.site-header.is-scrolled .site-logo img {
  width: 128px;
}

.site-header .nav {
  gap: 1.35rem;
  font-size: .9rem;
}

.site-header .nav > a,
.site-header .nav-parent {
  position: relative;
  color: var(--dark);
  font-weight: 700;
}

.site-header .nav > a[aria-current="page"],
.site-header .nav-group.is-current > .nav-parent {
  color: var(--primary-dark);
}

.site-header .header-actions {
  margin-left: 0;
}

.site-header .header-whatsapp {
  transition: background .2s ease;
}

/* Sélecteur de langue FR | EN (rempli par tools/build-en.ps1).
   Pastille flottante accrochée sous l'en-tête, à droite : comme l'en-tête est
   collant (sticky), elle le suit au défilement. Elle passe sous les menus
   déroulants (z-index 60) et disparaît quand le menu mobile est ouvert. */
.site-header .lang-switch {
  position: absolute;
  top: calc(100% + .65rem);
  right: clamp(1.25rem, 6vw, 6%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(11, 27, 87, .12);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(11, 27, 87, .18);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  transition: opacity .2s ease, visibility .2s ease;
}

.site-header .lang-switch a,
.site-header .lang-switch-current {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 2.1rem;
  padding: 0 .75rem 0 .4rem;
  border-radius: 999px;
  text-decoration: none;
}

.site-header .lang-switch-current {
  background: var(--dark);
  color: var(--white);
}

.site-header .lang-switch a {
  color: var(--dark);
  transition: background .2s ease, color .2s ease;
}

.site-header .lang-switch a:hover {
  background: var(--light);
  color: var(--primary-dark);
}

.site-header .lang-switch a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Drapeaux ronds (SVG intégré : les émojis drapeaux ne s'affichent pas sous Windows). */
.site-header .flag {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(11, 27, 87, .15), 0 0 0 2px rgba(255, 255, 255, .9);
}

.site-header .flag-fr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002654' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce1126' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}

.site-header .flag-gb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0v30h60V0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' clip-path='url(%23t)' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
}

/* Menu mobile ouvert : la pastille s'efface pour ne pas masquer les liens. */
.site-header:has(.menu-toggle[aria-expanded="true"]) .lang-switch {
  visibility: hidden;
  opacity: 0;
}

@media (max-width: 768px) {
  .site-header .lang-switch {
    top: calc(100% + .5rem);
    font-size: .68rem;
  }

  .site-header .lang-switch a,
  .site-header .lang-switch-current {
    height: 1.9rem;
    padding: 0 .6rem 0 .35rem;
  }

  .site-header .flag {
    width: 1.2rem;
    height: 1.2rem;
  }
}

@media print {
  .site-header .lang-switch {
    display: none;
  }
}

.site-header .header-whatsapp:hover {
  background: rgba(37, 211, 102, .12);
}

.site-header .mega-menu,
.site-header .submenu {
  z-index: 60;
}

@media (min-width: 769px) and (max-width: 1080px) {
  .site-header {
    gap: .75rem;
  }

  .site-header .nav {
    gap: .9rem;
    font-size: .8rem;
  }

  .site-logo img {
    width: 120px;
  }

  .site-header .header-cta {
    padding: .6rem .7rem;
    font-size: .62rem;
  }
}

@media (max-width: 768px) {
  .site-header {
    min-height: 68px;
  }

  .site-logo img {
    width: 128px;
  }

  .site-logo {
    order: 1;
  }

  .site-header .header-actions {
    order: 2;
    margin-left: auto;
  }

  .site-header .menu-toggle {
    order: 3;
    margin-left: 0;
  }

  .site-header .header-cta {
    display: none;
  }
}

/* Page d'accueil : l'en-tête est dans le flux, le hero n'a plus besoin de le compenser */
.home-hero {
  min-height: min(760px, calc(100vh - 76px));
  padding-top: 5rem;
}

/* ---------- Pied de page ---------- */
.site-footer .social-links a:nth-child(n) {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}

.site-footer .social-links a:nth-child(n):hover {
  border-color: var(--primary);
  background: var(--primary);
  filter: none;
}

.site-footer .social-links svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.site-footer .social-links svg.stroke-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.site-footer .social-links .social-dot {
  fill: currentColor;
  stroke: none;
}

.site-footer .footer-newsletter [role="status"] {
  min-height: 1.2em;
  margin-top: .5rem;
  color: rgba(255, 255, 255, .85);
}

.site-footer .footer-newsletter [role="status"][data-state="error"] {
  color: #ffb4a5;
}

.site-footer .footer-newsletter [role="status"][data-state="success"] {
  color: #9be3b7;
}

/* ---------- Icônes (icons.css) ---------- */
.ico {
  color: inherit;
}

.mega-column > a > span:first-child .ico {
  width: 1rem;
  height: 1rem;
  vertical-align: 0;
}

/* Icônes qui remplaçaient des emojis centrés dans une carte */
article > .ico:first-child,
li > .ico:first-child,
.icon > .ico {
  width: 1.6em;
  height: 1.6em;
}

article > .ico:first-child {
  margin-bottom: .5rem;
  vertical-align: middle;
  color: var(--primary);
}

.icon .ico {
  vertical-align: middle;
}

.site-header .nav-parent > span .ico {
  width: .95em;
  height: .95em;
  vertical-align: -.15em;
}

/* Tablette étroite : on garde l'essentiel (Contact et WhatsApp restent dans le pied de page et le CTA) */
@media (min-width: 769px) and (max-width: 900px) {
  .site-header .nav-optional,
  .site-header .header-whatsapp {
    display: none;
  }
}

/* ---------- Orange : contraste ----------
 * --primary (#b34a00) porte le texte blanc des boutons et le texte orange sur fond clair (>= 4,5:1).
 * Sur fond marine on utilise une variante plus claire. */
:root {
  --primary-on-dark: #ff9b45;
}

[class*="hero"] [class*="kicker"],
[class*="hero"] .eyebrow,
[class*="final"] [class*="kicker"],
[class*="final"] .eyebrow,
[class*="cta"] [class*="kicker"] {
  color: var(--primary-on-dark);
}

.site-footer a:hover,
.site-footer .footer-newsletter input:focus {
  color: var(--primary-on-dark);
}

/* Textes orange posés sur un fond marine (galeries, bandeaux de réassurance…) */
.why-zen .insurance-kicker,
.family-gallery .family-kicker,
.group-gallery .group-kicker,
.why-zen .advantage-grid article b,
.culture-gallery .culture-kicker,
.safari-gallery .safari-kicker,
.premium-gallery .premium-kicker,
.asia-business-section .asia-kicker,
.partner-section .destination-kicker,
.quote-form-visual figcaption strong,
.benefits-section .eyebrow,
.benefits-section .benefit-grid article > span,
.visa-reassurance > div > span {
  color: var(--primary-on-dark);
}

/* Panneau blanc dans un hero sombre */
.hero-panel .panel-kicker {
  color: var(--primary);
}