/* ==========================================================================
   Voyage Platinum : chrome 2026, header + footer (out-wpnav/chrome.css)
   --------------------------------------------------------------------------
   Depend de out/tokens.css (variables --vp-*, .vp-btn, .vp-logo) : a charger
   APRES lui. Markup : out-wpnav/header.html et out-wpnav/footer.html.

   Portee : uniquement .vp-skip, .vp-header, .vp-footer (sections 1 a 3) et
   body.vp-has-chrome (section 4, neutralisation de l'ancien chrome Maxwell).
   Aucune regle sur les elements nus (a, ul, button...) : le reste du site ne
   bouge pas.

   Ancien turquoise Maxwell et barre sombre du theme : le nouveau chrome n'en
   utilise aucun ; la section 4 masque l'ancien header/footer quand il est
   encore genere par le theme (option « hook » de NOTES-chrome.md).

   Les regles reprennent explicitement marges, listes, bordures et fonds des
   liens et boutons, parce que le style.css de Maxwell stylise les elements
   nus (liens, listes, boutons) et passe avant cette feuille.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LIEN D'EVITEMENT (« Accéder au contenu principal », texte existant)
   -------------------------------------------------------------------------- */
.vp-skip,
.vp-skip:link,
.vp-skip:visited {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 100001;
  padding: 10px 16px;
  background: var(--vp-ink);
  color: var(--vp-on-dark);
  font-family: var(--vp-sans);
  font-size: var(--vp-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--vp-r-sm);
}
.vp-skip:focus,
.vp-skip:link:focus,
.vp-skip:focus-visible {
  top: 8px;
  color: var(--vp-on-dark);
  outline: 2px solid var(--vp-gold);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   2. HEADER .vp-header (fond creme, liens encre, CTA encre)
   -------------------------------------------------------------------------- */
.vp-header {
  position: relative;
  z-index: 50;
  margin: 0;
  padding: 0;
  background: var(--vp-cream);
  border-bottom: 1px solid var(--vp-line);
  color: var(--vp-ink);
  font-family: var(--vp-sans);
  font-size: var(--vp-text-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vp-header *,
.vp-header *::before,
.vp-header *::after { box-sizing: border-box; }

.vp-header .vp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-s5);
  max-width: calc(var(--vp-wrap-wide) + 2 * var(--vp-gutter));
  min-height: 80px;
  margin: 0 auto;
  padding: 12px var(--vp-gutter);
}

/* Marque : logo PNG intact (aucun filtre) + nom du site en texte */
.vp-header .vp-header__title {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-transform: none;
}
.vp-header .vp-header__brand,
.vp-header .vp-header__brand:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--vp-s3);
  min-width: 0;
  color: var(--vp-ink);
  text-decoration: none;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: var(--vp-r-md);
}
.vp-header .vp-header__brand img {
  display: block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--vp-r-md);
  box-shadow: none;
}
.vp-header .vp-header__name {
  font-family: var(--vp-serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  transition: color var(--vp-dur) var(--vp-ease);
}
.vp-header .vp-header__brand:hover { color: var(--vp-ink); }
.vp-header .vp-header__brand:hover .vp-header__name { color: var(--vp-gold-text); }

/* Navigation (desktop) */
.vp-header .vp-header__nav {
  display: flex;
  align-items: center;
  gap: var(--vp-s5);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.vp-header .vp-header__menu {
  display: flex;
  align-items: center;
  gap: var(--vp-s5);
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}
.vp-header .vp-header__menu > .menu-item {
  position: static;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}
.vp-header .vp-header__menu > .menu-item::before,
.vp-header .vp-header__menu > .menu-item::after { content: none; }

.vp-header .vp-header__menu > .menu-item > a,
.vp-header .vp-header__menu > .menu-item > a:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--vp-ink);
  font-family: var(--vp-sans);
  font-size: var(--vp-text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  background: none;
  border: 0;
  box-shadow: none;
  transition: color var(--vp-dur) var(--vp-ease);
}
/* Filet or sous le lien : au survol et sur la page courante */
.vp-header .vp-header__menu > .menu-item > a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 9px;
  height: 1.5px;
  background: var(--vp-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--vp-dur) var(--vp-ease);
}
.vp-header .vp-header__menu > .menu-item > a:hover { color: var(--vp-gold-text); }
.vp-header .vp-header__menu > .menu-item > a:hover::after,
.vp-header .vp-header__menu > .menu-item > a[aria-current="page"]::after { transform: scaleX(1); }
.vp-header .vp-header__menu > .menu-item > a[aria-current="page"] { font-weight: 600; }

/* CTA porté par la classe de l’entrée WordPress, indépendant de sa position. */
.vp-header .vp-header__menu > .vp-menu-cta > a,
.vp-header .vp-header__menu > .vp-menu-cta > a:visited {
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--vp-r-btn);
  background: var(--vp-ink);
  color: #FFFFFF;
  font-weight: 600;
  white-space: nowrap;
}
.vp-header .vp-header__menu > .vp-menu-cta > a:hover { background: #000000; color: #FFFFFF; }
.vp-header .vp-header__menu > .vp-menu-cta > a::after { content: none; }
.vp-header .vp-header__menu > .vp-menu-cta.current-menu-item > a {
  box-shadow: inset 0 -2px 0 var(--vp-gold);
}
.vp-header .vp-header__menu > .current-menu-item > a { font-weight: 600; }
.vp-header .vp-header__menu > .current-menu-item > a::after { transform: scaleX(1); }

/* Focus visible (teal sur creme) */
.vp-header a:focus-visible,
.vp-header button:focus-visible {
  outline: 2px solid var(--vp-focus);
  outline-offset: 3px;
}

/* Bouton du menu mobile : masque sur desktop et sans JS */
.vp-header .vp-header__toggle { display: none; }


/* --------------------------------------------------------------------------
   2 bis. HEADER MOBILE (<= 860 px)
   Sans JS : le menu s'affiche en liste sous le logo (rien n'est inaccessible).
   Avec JS (.is-js, pose par le script de header.html) : bouton « Menu »,
   panneau ferme par defaut, ouvert par .is-open. Echap referme.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .vp-header .vp-header__inner {
    flex-wrap: wrap;
    min-height: 64px;
    gap: 0 var(--vp-s3);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .vp-header .vp-header__brand img { width: 48px; height: 48px; }
  .vp-header .vp-header__name { font-size: 1.25rem; }

  .vp-header .vp-header__nav {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--vp-s4);
    margin-top: 8px;
    padding: var(--vp-s2) 0 var(--vp-s4);
    border-top: 1px solid var(--vp-line);
  }
  .vp-header .vp-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .vp-header .vp-header__menu > .menu-item + .menu-item { border-top: 1px solid var(--vp-line); }
  .vp-header .vp-header__menu > .menu-item > a,
  .vp-header .vp-header__menu > .menu-item > a:visited {
    display: flex;
    min-height: 52px;
    padding: 0 4px;
    font-size: var(--vp-text-md);
  }
  .vp-header .vp-header__menu > .menu-item > a::after { display: none; }
  .vp-header .vp-header__menu > .menu-item:not(.vp-menu-cta) > a[aria-current="page"] {
    color: var(--vp-gold-text);
    box-shadow: inset 3px 0 0 var(--vp-gold);
    padding-left: 14px;
  }
  .vp-header .vp-header__menu > .vp-menu-cta > a {
    width: 100%;
    min-height: 48px;
    margin: 4px 0;
    font-size: var(--vp-text-md);
    color: #FFFFFF;
    padding: 9px 16px;
  }

  /* Avec JS */
  .vp-header.is-js .vp-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vp-s2);
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    background: transparent;
    color: var(--vp-ink);
    border: 1.5px solid var(--vp-line-strong);
    border-radius: var(--vp-r-btn);
    box-shadow: none;
    font-family: var(--vp-sans);
    font-size: var(--vp-text-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: border-color var(--vp-dur) var(--vp-ease);
  }
  .vp-header.is-js .vp-header__toggle:hover,
  .vp-header.is-js .vp-header__toggle:focus,
  .vp-header.is-js .vp-header__toggle:active {
    background: transparent;
    color: var(--vp-ink);
    border-color: var(--vp-ink);
  }
  .vp-header.is-js .vp-header__nav { display: none; }
  .vp-header.is-js.is-open .vp-header__nav { display: flex; }
}

/* Icone burger / croix (decorative, aria-hidden) */
.vp-header .vp-header__icon,
.vp-header .vp-header__icon::before,
.vp-header .vp-header__icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.vp-header .vp-header__icon { position: relative; }
.vp-header .vp-header__icon::before,
.vp-header .vp-header__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform var(--vp-dur) var(--vp-ease), top var(--vp-dur) var(--vp-ease);
}
.vp-header .vp-header__icon::before { top: -6px; }
.vp-header .vp-header__icon::after { top: 6px; }
.vp-header .vp-header__toggle[aria-expanded="true"] .vp-header__icon { background: transparent; }
.vp-header .vp-header__toggle[aria-expanded="true"] .vp-header__icon::before { top: 0; transform: rotate(45deg); }
.vp-header .vp-header__toggle[aria-expanded="true"] .vp-header__icon::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 359px) {
  .vp-header .vp-header__name { font-size: 1.0625rem; }
  .vp-header .vp-header__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


/* --------------------------------------------------------------------------
   3. FOOTER .vp-footer (fond encre, liens on-dark, filets discrets)
   -------------------------------------------------------------------------- */
.vp-footer {
  margin: 0;
  padding: 0;
  background: var(--vp-surface-dark);
  color: var(--vp-on-dark-dim);
  font-family: var(--vp-sans);
  font-size: var(--vp-text-sm);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vp-footer *,
.vp-footer *::before,
.vp-footer *::after { box-sizing: border-box; }

.vp-footer .vp-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--vp-s6) var(--vp-s7);
  max-width: calc(var(--vp-wrap-wide) + 2 * var(--vp-gutter));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) var(--vp-gutter) var(--vp-s7);
}

.vp-footer p { margin: 0; padding: 0; }

/* Logo : pastille creme 64 px de tokens.css (.vp-logo--on-dark), PNG intact */
.vp-footer .vp-logo,
.vp-footer .vp-logo:hover { border: 0; box-shadow: none; }
/* a:link / a:visited de Maxwell (#33bbcc) battaient .vp-logo : couleur encre explicite (pastille creme) */
.vp-footer .vp-logo:link,
.vp-footer .vp-logo:visited,
.vp-footer .vp-logo:hover,
.vp-footer .vp-logo:focus { color: var(--vp-ink); }
.vp-footer .vp-logo img { margin: 0; padding: 0; border: 0; box-shadow: none; max-width: none; }

.vp-footer .vp-footer__name {
  margin-top: var(--vp-s4);
  font-family: var(--vp-serif);
  font-size: var(--vp-text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--vp-on-dark);
}
.vp-footer .vp-footer__tagline {
  margin-top: var(--vp-s1);
  max-width: 28em;
  color: var(--vp-on-dark-dim);
}

.vp-footer .vp-footer__title {
  margin-bottom: var(--vp-s3);
  font-family: var(--vp-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vp-gold);
}

.vp-footer .vp-footer__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vp-footer .vp-footer__list > .menu-item {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}
.vp-footer .vp-footer__list > .menu-item::before,
.vp-footer .vp-footer__list > .menu-item::after { content: none; }

.vp-footer .vp-footer__list > .menu-item > a,
.vp-footer .vp-footer__list > .menu-item > a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--vp-on-dark);
  font-family: var(--vp-sans);
  font-size: var(--vp-text-sm);
  font-weight: 500;
  text-decoration: none;
  text-transform: none;
  background: none;
  border: 0;
  box-shadow: none;
  transition: color var(--vp-dur) var(--vp-ease);
}
.vp-footer .vp-footer__list > .menu-item > a:hover {
  color: var(--vp-gold);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.vp-footer .vp-footer__list > .current-menu-item > a,
.vp-footer .vp-footer__list > .menu-item > a[aria-current="page"] { color: var(--vp-gold); }

.vp-footer a:focus-visible {
  outline: 2px solid var(--vp-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.vp-footer .vp-footer__bottom { border-top: 1px solid rgba(247, 243, 234, 0.12); }
.vp-footer .vp-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vp-s2) var(--vp-s5);
  max-width: calc(var(--vp-wrap-wide) + 2 * var(--vp-gutter));
  margin: 0 auto;
  padding: var(--vp-s5) var(--vp-gutter);
  font-size: var(--vp-text-xs);
  color: var(--vp-on-dark-dim);
}

@media (max-width: 760px) {
  .vp-footer .vp-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vp-s6) var(--vp-s5);
    padding-bottom: var(--vp-s6);
  }
  .vp-footer .vp-footer__brand { grid-column: 1 / -1; }
  .vp-footer .vp-footer__list > .menu-item > a,
  .vp-footer .vp-footer__list > .menu-item > a:visited { min-height: 44px; }
}
@media (max-width: 420px) {
  .vp-footer .vp-footer__inner { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   4. NEUTRALISATION DE L'ANCIEN CHROME MAXWELL
   Utile seulement si le theme genere encore son header/footer (option
   « hook » de NOTES-chrome.md). Avec header.php / footer.php du theme
   enfant, ces elements n'existent plus et ces regles sont sans effet.
   body.vp-has-chrome est pose par le filtre body_class du theme enfant.
   - #header-bar : barre sombre du haut (reseaux sociaux + menu secondaire)
   - #masthead   : logo, titre, slogan, menu principal Maxwell (turquoise)
   - #footer     : pied de page Maxwell (menu « Pied de page » + .site-info)
   display:none sort aussi ces blocs de l'arbre d'accessibilite : pas de
   doublon de navigation ni de second H1 (le titre du site est un H1 sur
   l'accueil Maxwell).
   -------------------------------------------------------------------------- */
body.vp-has-chrome #header-bar,
body.vp-has-chrome #masthead,
body.vp-has-chrome #footer.footer-wrap { display: none !important; }

/* Le lien d'evitement Maxwell (.skip-link) fait doublon avec .vp-skip */
body.vp-has-chrome #page > .skip-link { display: none !important; }