/* ════════════════════════════════════════════════════════════════════════
   LA BARRE DE NAVIGATION PRINCIPALE (motif nav-principale)
   Pages vitrine seulement. Fond crème, collante, 92 px (83 sous 1200 px) ;
   le haut de page plein écran en soustrait --cp-nav-h. Liens Manrope 13 px,
   600, capitales à 0,1 em, soulignés au survol ; « Réserver » seul bouton
   plein ; burger et panneau plein écran sous 1200 px. Jamais #000 ni #fff,
   filets et ombres teintés bordeaux.
   ════════════════════════════════════════════════════════════════════════ */
:root { --cp-nav-h: 92px; }
/* Les pages qui l'ont reprise de `squeeze-header` (Tarifs, Réserver) calent
   leur haut de page et leurs ancres sur --sq-header-h : il suit la barre. */
body:has(.cp-nav) { --sq-header-h: var(--cp-nav-h); }
.cp-nav {
  --cp-nav-encre: var(--wp--preset--color--encre);
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 3rem;
  height: var(--cp-nav-h); padding: 0 4.2vw;
  background: var(--wp--preset--color--sable-50); box-shadow: 0 1px 0 rgb(94 32 40 / 0.12);   /* filet bordeaux à peine teinté, jamais gris */
  color: var(--cp-nav-encre);
}

.cp-nav__logo { flex: none; display: block; line-height: 0; }
.cp-nav__logo img { width: auto; height: 54px; }

.cp-nav__menu { margin-left: auto; }
.cp-nav__menu ul { display: flex; align-items: center; gap: 2.25rem; margin: 0; padding: 0; list-style: none; }
.cp-nav__menu li { display: flex; }   /* sans boîte de ligne propre au <li> : les liens retombent sur l'axe de Parrainage et Réserver (1,3 px d'écart mesuré) */
.cp-nav__lien {
  position: relative; padding: 0.375rem 0; border: 0; background: none; cursor: pointer;
  font: 600 0.8125rem/1 var(--wp--preset--font-family--body), sans-serif; letter-spacing: 0.1em; text-transform: uppercase;   /* 13 px / 600 / 0,1 em (mesuré le 5 octobre : 12 px à 0,16 em était sous la norme et trop espacé) */
  color: var(--cp-nav-encre); text-decoration: none; white-space: nowrap;
  transition: color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Le soulignement se dessine de gauche à droite au survol. */
.cp-nav__menu .cp-nav__lien::after, .cp-nav__actions .cp-nav__lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--wp--preset--color--vin-700); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cp-nav__menu .cp-nav__lien:hover, .cp-nav__actions .cp-nav__lien:hover, .cp-nav__menu .cp-nav__deroulant.is-ouvert .cp-nav__lien { color: var(--wp--preset--color--vin-700); }
.cp-nav__menu .cp-nav__lien:hover::after, .cp-nav__actions .cp-nav__lien:hover::after, .cp-nav__menu .cp-nav__deroulant.is-ouvert .cp-nav__lien::after { transform: scaleX(1); }

/* ── Le menu déroulant « Activités » ──
   La mécanique de Starfluide (nav-dropdown) : s'ouvre au survol, au clavier
   (focus-within) et au clic (is-ouvert, pour le tactile) ; le volet est
   détaché de 16 px par un rembourrage, pour que la souris le rejoigne sans
   le refermer. Habit de la charte : crème, filet et ombre teintés bordeaux,
   jamais gris. Le chevron dit qu'il se déroule et pivote à l'ouverture. */
.cp-nav__deroulant { position: relative; }
.cp-nav__declencheur { display: inline-flex; align-items: center; gap: 0.375rem; }
.cp-nav__chevron { flex: none; width: 0.75rem; height: 0.75rem; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.cp-nav__deroulant.is-ouvert .cp-nav__chevron { transform: rotate(180deg); }
.cp-nav__menu .cp-nav__volet {
  position: absolute; top: 100%; left: -1rem; padding-top: 1rem;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.5rem);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1), visibility 280ms;
}
@media (hover: hover) {
  .cp-nav__menu .cp-nav__deroulant:hover .cp-nav__chevron { transform: rotate(180deg); }
  .cp-nav__menu .cp-nav__deroulant:hover .cp-nav__lien { color: var(--wp--preset--color--vin-700); }
  .cp-nav__menu .cp-nav__deroulant:hover .cp-nav__lien::after { transform: scaleX(1); }
  .cp-nav__menu .cp-nav__deroulant:hover .cp-nav__volet { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
}
.cp-nav__menu .cp-nav__deroulant:focus-within .cp-nav__volet,
.cp-nav__menu .cp-nav__deroulant.is-ouvert .cp-nav__volet { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.cp-nav__menu .cp-nav__volet-inner {
  display: flex; flex-direction: column; gap: 2px; width: 18rem; padding: 0.625rem;
  border-radius: var(--radius-card, 20px); background: var(--wp--preset--color--sable-50);
  box-shadow: 0 0 0 1px rgb(94 32 40 / 0.12), 0 18px 40px -18px rgb(94 32 40 / 0.35);
}
.cp-nav__item {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem; border-radius: 12px;
  text-decoration: none; transition: background-color 180ms;
}
.cp-nav__item:hover { background: rgb(94 32 40 / 0.06); }
.cp-nav__item-titre { font: 700 0.75rem/1.2 var(--wp--preset--font-family--body), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cp-nav-encre); }
.cp-nav__item-desc { font: 400 0.8125rem/1.35 var(--wp--preset--font-family--body), sans-serif; color: var(--wp--preset--color--sable-600); }

/* « Parrainage » ouvre le groupe de droite : un lien comme les autres, mais
   isolé (un écart de 3 à 4 fois celui des liens). */
.cp-nav__actions { display: flex; align-items: center; gap: 2.5rem; margin-left: 3rem; }
.cp-nav__bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; padding: 0 1.375rem;
  border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--cp-nav-encre);
  font: 700 0.8125rem/1 var(--wp--preset--font-family--body), sans-serif; letter-spacing: 0.1em; text-transform: uppercase;   /* même taille et même espacement que les liens */
  color: var(--cp-nav-encre); text-decoration: none; white-space: nowrap;
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cp-nav__bouton:hover { background: color-mix(in oklch, var(--cp-nav-encre) 8%, transparent); }
.cp-nav__bouton--plein { background: var(--wp--preset--color--vin-700); color: var(--wp--preset--color--davos); box-shadow: none; }
.cp-nav__bouton--plein:hover { background: var(--wp--preset--color--vin-800); }
.cp-nav__bouton:active { transform: scale(0.98); }
.cp-nav a:focus-visible, .cp-nav button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Entre 1200 et 1439 px, la barre complète (six liens, Parrainage,
   Réserver) tient avec des espacements resserrés. */
@media (max-width: 1439px) {
  .cp-nav { gap: 2rem; padding: 0 2.5vw; }
  .cp-nav__menu ul { gap: 1.5rem; }
  .cp-nav__actions { gap: 1.75rem; margin-left: 2.5rem; }
}

/* ── Le burger et son panneau (sous 1200 px) ── */
.cp-nav__burger { display: none; }
.cp-nav__panneau[hidden] { display: none; }

@media (max-width: 1199px) {
  :root { --cp-nav-h: 83px; }
  .cp-nav { justify-content: center; padding: 0 1rem; }
  .cp-nav__menu, .cp-nav__actions { display: none; }
  .cp-nav__logo img { height: 44px; }
  .cp-nav__burger {
    position: absolute; left: 0.5rem; top: 50%; z-index: 2; transform: translateY(-50%);
    display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; width: 3rem; height: 3rem; padding: 0 0.6rem;
    border: 0; background: none; color: var(--cp-nav-encre); cursor: pointer;
  }
  .cp-nav__burger span { display: block; height: 1.5px; background: currentColor; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
  .cp-nav.is-ouvert .cp-nav__burger { color: var(--wp--preset--color--davos); }
  .cp-nav.is-ouvert .cp-nav__burger span:first-child { transform: translateY(0.3125rem) rotate(45deg); }
  .cp-nav.is-ouvert .cp-nav__burger span:last-child { transform: translateY(-0.3125rem) rotate(-45deg); }
  .cp-nav.is-ouvert .cp-nav__logo { position: relative; z-index: 2; }
  .cp-nav.is-ouvert .cp-nav__logo img { filter: brightness(0) invert(0.95); }   /* le logo foncé passe en clair sur le panneau */

  .cp-nav__panneau {
    position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--cp-nav-h) + 2rem) 1.75rem max(2rem, env(safe-area-inset-bottom));
    background: var(--wp--preset--color--vin-950); overflow-y: auto;
    animation: cp-nav-entree 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cp-nav__panneau ul { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
  .cp-nav__panneau .cp-nav__lien { padding: 0; font: 400 2rem/1.15 var(--wp--preset--font-family--display); letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--davos); text-decoration: none; }
  /* Activités, en accordéon : le chevron pivote, les deux pages se déplient dessous. */
  .cp-nav__panneau .cp-nav__chevron { width: 1.25rem; height: 1.25rem; margin-left: 0.25rem; }
  .cp-nav__panneau .cp-nav__volet { display: none; padding: 0.75rem 0 0 1.25rem; }
  .cp-nav__panneau .cp-nav__deroulant.is-ouvert .cp-nav__volet { display: block; }
  .cp-nav__panneau .cp-nav__volet-inner { display: grid; gap: 0.875rem; }
  .cp-nav__panneau .cp-nav__item { gap: 0.125rem; padding: 0; }
  .cp-nav__panneau .cp-nav__item-titre { font: 400 1.5rem/1.15 var(--wp--preset--font-family--display); letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--davos); }
  .cp-nav__panneau .cp-nav__item-desc { color: var(--wp--preset--color--vin-200); }
  .cp-nav__panneau-actions { display: grid; gap: 0.75rem; margin-top: 2.5rem; }
  .cp-nav__panneau .cp-nav__a-part { margin-top: 1.25rem; }   /* Parrainage, à part des autres liens, comme dans la barre */
  .cp-nav__panneau .cp-nav__bouton { --cp-nav-encre: var(--wp--preset--color--davos); min-height: 3.5rem; font-size: 0.875rem; }
}
@keyframes cp-nav-entree { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cp-nav__panneau { animation: none; }
  .cp-nav__burger span, .cp-nav__bouton, .cp-nav__lien, .cp-nav__lien::after, .cp-nav__chevron, .cp-nav__menu .cp-nav__volet, .cp-nav__item { transition: none; }
}