/* ==========================================================
   WeddingPart – header.css
   Header sticky · Nav desktop · CTA auth · Burger · Offcanvas
   ========================================================== */

/* --- Safety ---
 * `overflow-x: hidden` sur html OU body CASSE `position: sticky` sur Safari/iOS
 * (bug documenté). `overflow-x: clip` règle ça pour <html>.
 *
 * IMPORTANT : on ne met PAS d'overflow-x sur <body>. Bug iOS Safari mobile :
 * `overflow-*: clip` (et `hidden`) sur body crée un containing block pour les
 * descendants `position: fixed`, donc les panneaux full-screen (.app-panel,
 * .idd-shell-actions-panel, .wpz-invites-*-backdrop, etc.) se positionnent
 * par rapport au body au lieu du viewport et n'apparaissent qu'en "petit bout"
 * tout en bas du document quand on a scrollé. Le clip sur <html> suffit à
 * bloquer le scroll horizontal global.
 */
html { scrollbar-gutter: stable; overflow-x: clip; }

/* ==========================================================
   HEADER BASE
   ========================================================== */
.site-header {
  position: sticky;
  /* WP admin bar fixe en haut : 32px desktop, 46px mobile.
     Sans ça le header sticky se cachait sous la admin bar. */
  top: 0;
  z-index: var(--z-header);
  isolation: isolate;   /* stacking context propre, évite les conflits z-index */
  background: rgba(253,250,248,.92); /* TODO: tokenize — surface avec opacité */
  border-bottom: 1px solid var(--wp-line);
  /* Backdrop-filter desktop only — sur mobile c'est trop coûteux GPU et déclenche
     des saccades visibles surtout pendant les animations d'offcanvas. */
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow var(--duration-lg) var(--ease);
  /* will-change retiré : le header n'est PAS animé (sticky), tenir un composite
     layer en permanence pénalise les autres animations (offcanvas, accordion). */
}
/* Mobile : pas de backdrop-filter sur le header sticky.
   Le blur coûte trop cher sur mobile, surtout combiné aux backdrop-filter de
   l'overlay/panel pendant les animations. On le retire pour éliminer le jank. */
@media (max-width: 1024px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(253,250,248,.98); /* TODO: tokenize — surface avec opacité */
  }
}
/* Pendant l'ouverture du menu, on désactive le backdrop-filter du header :
   il est couvert par le panel et l'overlay, inutile et coûteux à composer. */
/* Menu mobile ouvert (audit du 03/11/2026) : la barre de recherche du blog (z-index 100050) et la pastille
   « Gérer les cookies » (99999) passaient devant le menu et cachaient « Connexion ». On les cache le temps du menu. */
/* Bouton « Installer l'appli » (idd-app-shell) : seulement pour les couples connectés (audit du 03/11/2026, lot 2).
   Un visiteur n'a rien à installer avant d'avoir un compte, et l'en-tête du téléphone n'a pas la place. */
body:not(.logged-in) .nav__actions .idd-install-btn { display: none !important; }

body.nav-is-open .blog-toolbar,
body.nav-is-open .iliade-cc-reopen { display: none !important; }

body.nav-is-open .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Idem pendant l'ouverture de la cloche notifications : sans ça, le backdrop-filter
   du header (desktop) repasse DEVANT le panneau notif — pourtant en z-index supérieur
   (9700) — d'où l'impression que « le header passe devant / descend du haut ».
   On neutralise le filtre tant que la cloche est ouverte. Classe posée par notifications.js. */
body.idd-notif-open .site-header,
body.idd-notif-open .app-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.admin-bar .site-header  { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* Off-canvas et overlay doivent aussi tenir compte de la admin bar
   pour ne pas être masqués */
body.admin-bar .nav__offcanvas,
body.admin-bar .nav__overlay  { top: 32px; height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  body.admin-bar .nav__offcanvas,
  body.admin-bar .nav__overlay { top: 46px; height: calc(100dvh - 46px); }
}

/* ==========================================================
   NAV INNER — logo (left) | nav (center) | CTA + burger (right)
   ========================================================== */
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* logo à gauche, actions à droite */
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}

/* --- Logo / Brand --- */
.nav__brand {
  flex-shrink: 0;
  margin-right: auto;               /* force le logo à gauche dans tous les cas */
}

/* --- Actions (login + burger) toujours à droite --- */
.nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--wp-ink);
}
.custom-logo,
.custom-logo-link img {
  height: 48px;
  width: auto;
  display: block;
}
.custom-logo-link { display: inline-flex; align-items: center; }

/* Logo horizontal PNG (anneau + diamant + étoiles + cœur + wordmark) */
.nav__logoHorizontal {
  height: 52px;
  width: auto;
  display: block;
  transition: transform var(--duration) var(--ease);
}
.nav__logo:hover .nav__logoHorizontal {
  transform: scale(1.02);
}

/* Fallback mark seul (anneau + diamant + cœur) — masqué par défaut.
   Affiché uniquement sur écran ≤ 380 px (cf. media query plus bas). */
.nav__brandIconImg {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease);
}
.nav__logo:hover .nav__brandIconImg {
  transform: rotate(-3deg) scale(1.03);
}

/* --- Desktop nav --- */
.nav__menu--desktop {
  flex: 1;
  display: flex;
  justify-content: center;
}

.menu--desktop {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.menu--desktop > li { position: relative; }

.menu--desktop > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* TODO: tokenize — entre space-1 et space-2 */
  padding: .55rem var(--space-4);
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--wp-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.menu--desktop > li > a:hover,
.menu--desktop > li.current-menu-item > a,
.menu--desktop > li.current-menu-ancestor > a {
  background: var(--wp-brand-soft);
  color: var(--wp-brand);
}

/* Sous-menu desktop
 * Anti-fermeture trop rapide : on crée un pont de hover invisible sous chaque
 * parent has-children — la zone vide entre le lien et le panneau devient
 * survolable, donc :hover reste actif pendant le trajet de la souris.
 */
.menu--desktop > li.menu-item-has-children { position: relative; }
.menu--desktop > li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 18px;
  pointer-events: none;
}
.menu--desktop > li.menu-item-has-children:hover::after,
.menu--desktop > li.menu-item-has-children:focus-within::after {
  pointer-events: auto;
}

/* Sous-menu visible (classic dropdown) */
.menu--desktop .sub-menu {
  position: absolute;
  top: calc(100% + 14px); /* TODO: tokenize — offset dropdown */
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px; /* TODO: tokenize — largeur min dropdown */
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  list-style: none;
  margin: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease),
              visibility var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
/* Pont hover : couvre la zone vide (14px) entre le trigger et le panneau.
   Indispensable pour les mega-menus en position:static dont le ::after du li
   parent ne se positionne pas correctement (par rapport au body au lieu du li).
   En étant un descendant du sub-menu, ce ::before garde le :hover du li actif. */
.menu--desktop .sub-menu::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.menu--desktop > li:hover > .sub-menu,
.menu--desktop > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
/* Petit délai de fermeture (220ms) — donne le temps à la souris d'arriver */
.menu--desktop > li > .sub-menu {
  transition-delay: 220ms;
}

.menu--desktop .sub-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .7rem var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--wp-soft);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.menu--desktop .sub-menu a:hover {
  background: var(--wp-brand-soft);
  color: var(--wp-brand);
}

/* ==========================================================
   MEGA-MENU (parent avec classe .has-megamenu)
   - Grille multi-colonnes, cartes outils façon home
   - 13 outils max sur 3 colonnes desktop, 2 colonnes en md
   ========================================================== */
.menu--desktop > li.has-megamenu { position: static; } /* sub-menu en pleine largeur */

.menu--desktop > li.has-megamenu > a::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  margin-top: -2px;
  transition: transform var(--duration) var(--ease);
  display: inline-block;
}
.menu--desktop > li.has-megamenu:hover > a::after {
  transform: rotate(225deg);
  margin-top: 3px;
}
/* Pont de survol ancré au TRIGGER : le li.has-megamenu est position:static, donc
   le pont ::before du panneau (centré, 960px) ne se trouve pas sous le trigger sur
   écrans larges → le menu se fermait pendant le trajet souris. On passe le <a> en
   relative et on couvre le gap (14px) juste sous lui. */
.menu--desktop > li.has-megamenu > a { position: relative; }
.menu--desktop > li.has-megamenu > a::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 22px;
}

.menu--desktop > li.has-megamenu > .sub-menu {
  left: 50%;
  right: auto;
  /* Pleine largeur du header : le panneau épouse le container (1160px), centré sur
     le viewport comme .container → bords alignés sur le contenu du header. */
  width: min(var(--container), calc(100vw - 32px));
  max-width: var(--container);
  transform: translateX(-50%) translateY(6px);
  padding: var(--space-5) var(--gutter); /* horizontal = gutter → cartes alignées logo/compte */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  background: var(--wp-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border-color: var(--wp-brand-border);
}
.menu--desktop > li.has-megamenu:hover > .sub-menu,
.menu--desktop > li.has-megamenu:focus-within > .sub-menu {
  transform: translateX(-50%) translateY(0);
}

/* Carte outil dans le mega-menu */
.menu--desktop .has-megamenu-child { margin: 0; }
.menu--desktop .has-megamenu-child > a.wp-megamenu-item,
.menu--desktop .has-megamenu-child > a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
  position: relative;
}
.menu--desktop .has-megamenu-child > a:hover {
  background: var(--wp-brand-soft);
  border-color: var(--wp-brand-border);
  transform: translateY(-1px);
}

.wp-megamenu-item__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px; /* TODO: tokenize — entre radius-sm et radius-md */
  background: var(--wp-brand-soft);
  border: 1px solid var(--wp-brand-border);
  color: var(--wp-brand-dark);
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.wp-megamenu-item__icon svg {
  width: 20px; height: 20px;
}
.menu--desktop .has-megamenu-child > a:hover .wp-megamenu-item__icon {
  background: var(--wp-brand);
  color: var(--wp-surface);
  border-color: var(--wp-brand);
}

.wp-megamenu-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  padding-right: 62px; /* réserve la place du badge « formule » en haut à droite (le plus large = « Gratuit ») */
}
.wp-megamenu-item__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--wp-ink);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.wp-megamenu-item__desc {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--wp-soft);
  line-height: 1.4;
}
.wp-megamenu-item__badge {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 10px; /* TODO: tokenize — sous text-xs */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Teintes de badge selon la formule d'entrée réelle de l'outil */
.wp-megamenu-item__badge--free {
  background: var(--wp-success-bg);
  color: var(--wp-success-text);
  border-color: var(--wp-success-border);
}
.wp-megamenu-item__badge--gold {
  background: var(--wp-gold-light);
  color: var(--wp-gold-dark);
  border-color: var(--wp-gold-border);
}
.wp-megamenu-item__badge--premium {
  background: var(--wp-brand-soft);
  color: var(--wp-brand-dark);
  border-color: var(--wp-brand-border);
}

/* Sur mobile / off-canvas, l'item n'a pas de parent positionné : le badge en
   position:absolute se collait au coin haut-droit de l'off-canvas (« badges qui
   volaient » par-dessus la croix). On le remet dans le flux, rangé à droite de
   chaque ligne d'outil. Aucun impact desktop (ciblé off-canvas / menu mobile). 2026-06-04. */
.nav__offcanvas .wp-megamenu-item__badge,
.menu--mobile .wp-megamenu-item__badge {
  position: static;
  top: auto;
  right: auto;
  margin-left: auto;
}

/* Mega-menu sur mobile (offcanvas) : on collapse en simple liste verticale */
.menu--mobile .has-megamenu > .sub-menu {
  display: block;
}
.menu--mobile .has-megamenu-child > a.wp-megamenu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.menu--mobile .wp-megamenu-item__desc { display: none; }

/* ==========================================================
   MÉGA-MENU EN 4 FAMILLES (octobre 2026) : Organiser · Recevoir · Plans et 3D · Créer et inspirer.
   Chaque outil porte wp-mm-col-N ; « dense » range chaque famille en haut de sa colonne.
   ========================================================== */
.menu--desktop > li.has-megamenu > .sub-menu:has(.wp-mm-col-1) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 2px var(--space-4);
  padding-bottom: 0;
}
.menu--desktop .wp-mm-col-1 { grid-column: 1; }
.menu--desktop .wp-mm-col-2 { grid-column: 2; }
.menu--desktop .wp-mm-col-3 { grid-column: 3; }
.menu--desktop .wp-mm-col-4 { grid-column: 4; }
.wp-megamenu-cat {
  display: block;
  margin: 0 var(--space-3) var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--wp-line);
  font-family: var(--font-sans);
  font-size: 11px; /* petites capitales, comme les sur-titres */
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-brand-dark);
}
/* Carte compacte : icône, nom et formule sur une ligne, phrase dessous */
.menu--desktop .wp-mm-col-1 > a.wp-megamenu-item,
.menu--desktop .wp-mm-col-2 > a.wp-megamenu-item,
.menu--desktop .wp-mm-col-3 > a.wp-megamenu-item,
.menu--desktop .wp-mm-col-4 > a.wp-megamenu-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  padding: 9px var(--space-3);
}
.menu--desktop [class*="wp-mm-col-"] .wp-megamenu-item__icon { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 10px; }
.menu--desktop [class*="wp-mm-col-"] .wp-megamenu-item__icon svg { width: 18px; height: 18px; }
.menu--desktop [class*="wp-mm-col-"] .wp-megamenu-item__body { display: contents; }
.menu--desktop [class*="wp-mm-col-"] .wp-megamenu-item__title { grid-column: 2; align-self: center; font-size: .95rem; }
.menu--desktop [class*="wp-mm-col-"] .wp-megamenu-item__badge { position: static; grid-column: 3; grid-row: 1; align-self: center; }
.menu--desktop [class*="wp-mm-col-"] .wp-megamenu-item__desc { grid-column: 2 / 4; }
@media (max-width: 1180px) { /* écran d'ordinateur étroit : sans la phrase, tout tient sans défilement */
  .menu--desktop [class*="wp-mm-col-"] .wp-megamenu-item__desc { display: none; }
}
/* Barre du bas : essai sans compte et formules */
.menu--desktop .wp-mm-foot {
  grid-column: 1 / -1;
  margin: var(--space-3) calc(-1 * var(--gutter)) 0;
  padding: var(--space-3) var(--gutter);
  border-top: 1px solid var(--wp-line);
  background: var(--wp-brand-soft);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.wp-mm-foot__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; }
.wp-mm-foot__essai { margin: 0; font-size: var(--text-sm); color: var(--wp-soft); }
.wp-mm-foot__essai span:first-child { font-weight: 700; color: var(--wp-ink); }
.wp-mm-foot__essai a,
.wp-mm-foot__tarifs { color: var(--wp-brand-dark); font-weight: 600; text-decoration: none; }
.wp-mm-foot__essai a:hover,
.wp-mm-foot__tarifs:hover { text-decoration: underline; text-underline-offset: 3px; }
.wp-mm-foot__tarifs { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); white-space: nowrap; }
/* (les liens de la barre ne sont pas des lignes de sous-menu) */
.menu--desktop .sub-menu .wp-mm-foot a { display: inline; padding: 0; border-radius: 0; background: none; font-size: inherit; color: var(--wp-brand-dark); }
.menu--desktop .sub-menu .wp-mm-foot a.wp-mm-foot__tarifs { display: inline-flex; font-size: var(--text-sm); }
.menu--desktop .sub-menu .wp-mm-foot a:hover { background: none; color: var(--wp-brand); }
/* Tiroir du téléphone : titres de familles, noms sur une ligne, essais en pastilles */
.menu--mobile .wp-megamenu-item__body { padding-right: 0; }
.menu--mobile .wp-megamenu-cat { margin: var(--space-4) var(--space-2) var(--space-1); padding-bottom: 6px; }
.menu--mobile .has-megamenu-child:first-child .wp-megamenu-cat { margin-top: var(--space-2); }
.menu--mobile .wp-mm-foot { margin-top: var(--space-4); padding: var(--space-3) var(--space-2) var(--space-1); border-top: 1px solid var(--wp-line); }
.menu--mobile .wp-mm-foot__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.menu--mobile .wp-mm-foot__essai { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.menu--mobile .wp-mm-foot__essai > span:first-child { width: 100%; margin-bottom: 2px; }
.menu--mobile .wp-mm-foot__essai > span[aria-hidden] { display: none; }
.menu--mobile .sub-menu .wp-mm-foot a { display: inline-flex; margin: 0; padding: .5rem .85rem; border-radius: var(--radius-full); background: var(--wp-brand-soft); color: var(--wp-brand-dark); font-weight: 600; }
.menu--mobile .sub-menu .wp-mm-foot a.wp-mm-foot__tarifs { background: none; padding-inline: 0; }

/* --- CTA zone côté droit --- */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Lien connexion discret */
.nav__login {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--wp-soft);
  text-decoration: none;
  padding: var(--space-2) .8rem;
  border-radius: var(--radius-full);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  white-space: nowrap;
}
.nav__login:hover { background: var(--wp-brand-soft); color: var(--wp-brand); }

/* Connecté — avatar initiale + nom */
.nav__login--account {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.nav__account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--wp-brand);
  color: var(--wp-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.nav__account-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: .7rem; /* TODO: tokenize — entre text-xs et .75rem */
}
/* Photo de profil (au lieu de l'initiale) */
.nav__account-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

/* Off-canvas footer boutons pleine largeur */
.nav__offcanvas-cta,
.nav__offcanvas-account,
.nav__offcanvas-logout {
  justify-content: center;
  width: 100%;
}
.nav__offcanvas-logout {
  font-size: .82rem; /* TODO: tokenize — entre text-sm et .875rem */
}

/* --- Burger mobile --- */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: 1.5px solid var(--wp-line-strong);
  border-radius: var(--radius-sm);
  background: var(--wp-surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--duration) var(--ease),
              background var(--duration) var(--ease);
}
.nav__toggle:hover { border-color: var(--wp-brand-border); background: var(--wp-brand-soft); }
.nav__toggle:focus { outline: none; box-shadow: 0 0 0 3px var(--wp-brand-soft); }

/* Burger icon — 3 barres */
.nav__burger {
  display: flex;
  flex-direction: column;
  gap: 5px; /* TODO: tokenize — spacing burger */
  width: 20px;
}
.nav__burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--wp-ink);
  /* Duree alignee sur l'offcanvas (.28s) pour synchroniser visuellement
     la rotation du burger avec le slide du panel. */
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
              opacity .28s cubic-bezier(.22, .61, .36, 1),
              width .28s cubic-bezier(.22, .61, .36, 1);
}
.nav__burger span:nth-child(2) { width: 75%; }

body.nav-is-open .nav__burger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
body.nav-is-open .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-is-open .nav__burger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ==========================================================
   OVERLAY
   ========================================================== */
.nav__overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(29,24,25,.55); /* TODO: tokenize — ink avec opacité */
  /* Backdrop-filter retiré : il s'activait/désactivait pendant la transition
     d'opacité, causant un repaint massif (jank) à chaque ouverture. La couleur
     est passée de .46 à .55 pour compenser visuellement le perte du blur. */
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}
/* Backdrop-filter uniquement sur desktop (perfs OK), désactivé sur mobile */
@media (min-width: 1025px) {
  .nav__overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(29,24,25,.46); /* TODO: tokenize — ink avec opacité */
  }
}
@supports not (height: 100dvh) { .nav__overlay { height: 100vh; } }

body.nav-is-open .nav__overlay { opacity: 1; }

/* ==========================================================
   OFF-CANVAS (mobile) — slide de droite
   ========================================================== */
.nav__offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: min(82vw, 400px);
  height: 100dvh;
  max-height: 100dvh;
  background: var(--wp-surface);
  border-left: 1px solid var(--wp-line);
  box-shadow: -20px 0 60px rgba(29,24,25,.14); /* TODO: tokenize — ombre directionnelle offcanvas */
  transform: translateX(105%);
  /* Easing snappy + duree alignee sur l'overlay (synchronisation) */
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  /* will-change activé uniquement quand le panel va s'animer (via JS),
     pas en permanence — sinon le composite layer est tenu en RAM tout le temps. */
  /* Hint GPU explicit pour iOS Safari : transform3d force le compositor layer
     uniquement quand l'élément en a besoin (pendant la transition). */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@supports not (height: 100dvh) { .nav__offcanvas { height: 100vh; max-height: 100vh; } }

body.nav-is-open .nav__offcanvas { transform: translateX(0); }

/* will-change activé uniquement pendant la phase d'ouverture/fermeture (JS pose `is-animating`).
   Une fois l'animation finie, on retire pour libérer le composite layer GPU. */
.nav__offcanvas.is-animating {
  will-change: transform;
}

/* Header off-canvas */
.nav__offcanvasTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--wp-line);
  flex-shrink: 0;
}

.nav__offcanvasBrand {
  font-family: var(--font-serif);
  font-size: 1.15rem; /* TODO: tokenize — 18.4px hors scale */
  font-weight: 700;
  color: var(--wp-ink);
}

.nav__close {
  /* Min 44x44 pour respecter les tap targets WCAG/Apple HIG sur mobile. */
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--wp-line-strong);
  background: var(--wp-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--wp-soft);
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav__close:hover { background: var(--wp-brand-soft); color: var(--wp-brand); border-color: var(--wp-brand-border); }
.nav__close:focus { outline: none; box-shadow: 0 0 0 3px var(--wp-brand-soft); }

/* Corps off-canvas scrollable */
.nav__offcanvasBody {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Footer off-canvas (CTAs) */
.nav__offcanvasFooter {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--wp-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ==========================================================
   MENU MOBILE — accordion
   ========================================================== */
.menu--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu--mobile > li {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--wp-line);
  background: var(--wp-surface);
}
.menu--mobile > li.current-menu-item { border-color: var(--wp-brand-border); background: var(--wp-brand-soft); }

.menu--mobile > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--wp-ink);
  text-decoration: none;
}
.menu--mobile > li.current-menu-item > a { color: var(--wp-brand); }

/* Sous-menu accordion — height transitionne vers une valeur mesuree en JS.
   La variable --accordion-h est posee dynamiquement par header.js au moment de
   l'expansion, ce qui evite le jank de max-height (recalcule layout chaque frame).
   Avec une hauteur exacte, le browser n'a qu'a interpoler les positions, pas a
   relayouter. Resultat : animation 60fps stable sur mobile. */
.menu--mobile .sub-menu {
  list-style: none;
  padding: 0 var(--space-3);
  margin: 0;
  background: transparent;
  height: 0;
  overflow: hidden;
  transition: height .24s cubic-bezier(.22, .61, .36, 1);
  /* Optim GPU : promote en composite layer pendant la transition */
  will-change: height;
}
.menu--mobile li.is-expanded > .sub-menu {
  height: var(--accordion-h, auto);
  padding-block: var(--space-3);
  transition: height .24s cubic-bezier(.22, .61, .36, 1),
              padding-block .24s cubic-bezier(.22, .61, .36, 1);
}
/* Quand fermee : retire will-change pour liberer le GPU */
.menu--mobile li:not(.is-expanded) > .sub-menu {
  will-change: auto;
}

.menu--mobile .sub-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--wp-soft);
  background: var(--wp-surface-2);
  margin-bottom: var(--space-1);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.menu--mobile .sub-menu a:hover { background: var(--wp-brand-soft); color: var(--wp-brand); }

/* Bouton chevron — min 44x44 pour tap target mobile (WCAG 2.5.5). */
.submenu-toggle {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  cursor: pointer;
  color: var(--wp-muted);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  /* Marge négative pour compenser et garder l'alignement visuel sans grossir
     le bouton parent (li > a). */
  margin: -4px calc(-1 * var(--space-2)) -4px 0;
}
.submenu-toggle:hover { background: var(--wp-brand-soft); color: var(--wp-brand); }
.submenu-toggle:focus { outline: none; box-shadow: 0 0 0 3px var(--wp-brand-soft); }

.submenu-toggle .chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease);
}
.menu--mobile li.is-expanded > a .submenu-toggle .chev {
  transform: rotate(-135deg);
}

/* ==========================================================
   SCROLL LOCK — overflow:hidden sur html+body, compensation scrollbar
   Le navigateur préserve naturellement la position de scroll.
   ========================================================== */
html.nav-lock,
body.nav-lock { overflow: hidden !important; }
body.nav-lock {
  padding-right: var(--nav-sbw, 0px);
  touch-action: none;
}
html.nav-lock { overscroll-behavior: none; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  .nav__menu--desktop { display: none; }
  .nav__login         { display: none; }
  .nav__toggle        { display: inline-flex; }
}

@media (max-width: 640px) {
  .site-header .nav {
    min-height: var(--header-h);
    padding-block: var(--space-2);
    gap: var(--space-2);
  }
  /* Le bouton "Commencer gratuitement" prend trop de place sur mobile,
     on le cache au profit du burger qui révèle déjà ces CTAs en panneau. */
  .nav__actions .btn--primary,
  .nav__actions .btn--sm { display: none; }

  /* Logo plus compact */
  .custom-logo { height: 36px; }
  .nav__logoHorizontal { height: 42px; }
  .nav__brandIconImg { width: 38px; height: 38px; }
}

/* Mobile très étroit — masque le logo horizontal, montre le mark seul */
@media (max-width: 380px) {
  .nav__logoHorizontal { display: none; }
  .nav__brandIconImg {
    display: inline-block;
    width: 42px;
    height: 42px;
  }
}

/* Visiteurs (5/10/2026) : logo complet + « Commencer gratuitement » + menu demandaient 425 px et dépassaient
   de l'écran entre 381 et 429 px. De 390 à 429 px : logo et bouton un peu resserrés ; sous 390 px : le mark seul.
   L'en-tête des comptes connectés (cloche + compte + menu) tient déjà : non concerné. */
@media (max-width: 429px) {
  body:not(.logged-in) .site-header .nav { padding-inline: 12px; }
  body:not(.logged-in) .nav__logoHorizontal { height: 36px; }
  body:not(.logged-in) .nav__actions .btn--sm { padding-inline: 12px; }
}
@media (max-width: 389px) {
  body:not(.logged-in) .nav__logoHorizontal { display: none; }
  body:not(.logged-in) .nav__brandIconImg { display: inline-block; width: 42px; height: 42px; }
}

/* « Connexion » en icône sur téléphone et tablette (audit du 03/11/2026, lot 4) : un couple déjà inscrit devait ouvrir
   le menu et descendre tout en bas. Sous 480 px, « Commencer gratuitement » devient « S'inscrire » pour laisser la place
   (mesuré : logo 125 px + icône 44 + bouton court ~95 + menu 44 tiennent dans 390 px). */
.nav__login-icon,
.nav__cta-court { display: none; }
@media (max-width: 1024px) {
  body:not(.logged-in) .nav__login-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    color: var(--wp-brand); text-decoration: none;
  }
  body:not(.logged-in) .nav__login-icon:hover { background: var(--wp-brand-soft); }
  body:not(.logged-in) .nav__login-icon:focus-visible { outline: 2px solid var(--wp-brand); outline-offset: 2px; }
}
@media (max-width: 479px) {
  body:not(.logged-in) .nav__cta-long { display: none; }
  body:not(.logged-in) .nav__cta-court { display: inline; }
}
/* Pages Connexion et Inscription (servies par l'appli dans le cadre de la vitrine) : le bouton d'inscription de
   l'en-tête renvoyait vers la page même ; l'icône Connexion reste. */
body.idd-auth-page .nav__actions .btn--sm { display: none !important; }

/* Scroll indicator — fine ligne brand sous le header */
.site-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--scroll-pct, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--wp-brand), var(--wp-gold));
  transition: width .1s linear;
  pointer-events: none;
}

/* ==========================================================
   Tap target booster pour le lien "Mon compte" — la version connectée
   utilise un padding inférieur à 44px de haut. On force un min-height
   suffisant uniquement sur mobile.
   ========================================================== */
@media (max-width: 1024px) {
  .nav__login--account {
    min-height: var(--tap-target);
    padding-inline: var(--space-3);
  }
}

/* ==========================================================
   FIL D'ARIANE — barre unifiée, collée sous le header
   (rendue dans header.php, hors .site-content). Voir
   inc/template-tags.php : wp_breadcrumbs(). Exclue de
   l'accueil, des pages outils, auth et de l'assistant setup.
   ========================================================== */
.wp-breadcrumbs {
  background: var(--wp-surface);
  border-bottom: 1px solid var(--wp-line);
}
.wp-breadcrumbs .container {
  padding-block: 11px;
}
.wp-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.wp-breadcrumbs__list li { display: inline-flex; align-items: center; min-width: 0; }
.wp-breadcrumbs a {
  color: var(--wp-soft);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.wp-breadcrumbs a:hover { color: var(--wp-brand); }
.wp-breadcrumbs__sep { color: var(--wp-soft); opacity: .4; margin: 0 7px; }
.wp-breadcrumbs [aria-current="page"] {
  color: var(--wp-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le fil d'Ariane remplace le gros espace du haut : on colle le contenu
   sous la barre (on retire le padding-top de la 1re section). */
body.has-breadcrumb .site-content { padding-top: 0; }
body.has-breadcrumb .site-content > section:first-child,
body.has-breadcrumb .site-content > .section:first-child {
  padding-top: var(--space-8);
}

/* ==========================================================
   PANNEAU « MON COMPTE » — off-canvas droite (clic avatar header)
   Calqué sur .nav__offcanvas, mais indépendant du menu mobile.
   ========================================================== */
.nav__login--account { cursor: pointer; }

.account-panel__overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(29,24,25,.55);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}
@supports not (height: 100dvh) { .account-panel__overlay { height: 100vh; } }
@media (min-width: 1025px) {
  .account-panel__overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(29,24,25,.46);
  }
}
body.account-open .account-panel__overlay { opacity: 1; }

.account-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(88vw, 360px);
  height: 100dvh;
  max-height: 100dvh;
  background: var(--wp-surface);
  border-left: 1px solid var(--wp-line);
  box-shadow: -20px 0 60px rgba(29,24,25,.14);
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@supports not (height: 100dvh) { .account-panel { height: 100vh; max-height: 100vh; } }
body.admin-bar .account-panel,
body.admin-bar .account-panel__overlay { top: 32px; height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  body.admin-bar .account-panel,
  body.admin-bar .account-panel__overlay { top: 46px; height: calc(100dvh - 46px); }
}
body.account-open .account-panel { transform: translateX(0); }
.account-panel.is-animating { will-change: transform; }

/* « Devant tout » : le panneau Compte passe AU-DESSUS de la barre d'admin WP (#wpadminbar = 99999)
   et part du tout en haut — exactement comme le panneau notifications — pour qu'aucun header ni la
   barre d'admin ne repasse devant (cohérence + évite la régression « le header passe sur le canva »).
   2026-06-04. */
.account-panel            { z-index: 100100; }
.account-panel__overlay   { z-index: 100099; }
body.admin-bar .account-panel,
body.admin-bar .account-panel__overlay { top: 0; height: 100dvh; }
@media (max-width: 782px) {
  body.admin-bar .account-panel,
  body.admin-bar .account-panel__overlay { top: 0; height: 100dvh; }
}

/* Tête : avatar + identité + fermer */
.account-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--wp-line);
  flex-shrink: 0;
}
.account-panel__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--wp-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.account-panel__avatar.has-photo { color: transparent; }
.account-panel__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.account-panel__name {
  font-weight: 700;
  color: var(--wp-ink);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-panel__email {
  font-size: .8rem;
  color: var(--wp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-panel__close {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--wp-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.account-panel__close:hover { background: var(--wp-surface-2, #FAF5F3); color: var(--wp-ink); }

/* Liste des liens compte */
.account-panel__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  flex: 1;
  overflow-y: auto;
}
.account-panel__group-label {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp-muted);
  padding: 4px 12px 8px;
}
.account-panel__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--wp-ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.account-panel__item:hover,
.account-panel__item:focus-visible {
  background: var(--wp-brand-soft, rgba(181,99,122,.09));
  color: var(--wp-brand);
  outline: none;
}
.account-panel__item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--wp-soft, #6E5A60);
  display: inline-flex;
}
.account-panel__item-icon svg { width: 20px; height: 20px; }
.account-panel__item:hover .account-panel__item-icon,
.account-panel__item:focus-visible .account-panel__item-icon { color: var(--wp-brand); }

/* Pied : déconnexion */
.account-panel__foot {
  padding: var(--space-4);
  border-top: 1px solid var(--wp-line);
  flex-shrink: 0;
}
.account-panel__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--wp-line);
  background: none;
  color: var(--wp-soft, #6E5A60);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.account-panel__logout:hover {
  border-color: var(--wp-brand);
  color: var(--wp-brand);
  background: var(--wp-brand-soft, rgba(181,99,122,.09));
}

/* Panneau « Mon compte » : changer sa photo depuis le panneau, accès administration (octobre 2026) */
.account-panel__photo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 6px 12px; min-height: 32px; border-radius: 999px; background: var(--wp-brand-soft, #F7E7EC); color: var(--wp-brand-dark, #853F55); font-size: 13px; font-weight: 700; text-decoration: none; }
.account-panel__photo:hover, .account-panel__photo:focus-visible { background: var(--wp-brand, #9E4D64); color: #fff; }
.account-panel__item--admin { margin-top: 10px; border-top: 1px solid var(--wp-line, #EDE0E4); padding-top: 14px; }