/**
 * Méga-menu — VERSION TEST (23/09/2026, DESIGN-MEGAMENU-HERO-2309.md §A,
 * R-1008/R-1009/R-1010). Fichier NEUF, n'édite jamais style.css. Classes
 * ap-mm-* uniquement : aucune collision avec .ap-mega*/.ap-a-mega du menu
 * public (header.php, inchangé). Jetons repris de :root (style.css) —
 * aucune couleur nouvelle, angles droits, mode clair uniquement (charte).
 *
 * ui-ux-pro-max (recherches exécutées 23/09, cf. récap chantier) :
 * - domaine ux « mega menu navigation hover intent keyboard » → nav collante
 *   doit compenser sa hauteur (ici : le panneau s'ouvre SOUS la barre, jamais
 *   par-dessus, donc pas de recouvrement) ; hover ne doit jamais être le seul
 *   déclencheur (clic + clavier gérés dans megamenu.js) ; focus visible.
 * - domaine style « bento grid asymmetric hero » → cartes modulaires, grande
 *   + petites empilées ; rayons arrondis et halo colorés REJETÉS (charte du
 *   site = angles droits, mode clair uniquement).
 */

/* Conteneur de positionnement : le panneau doit être centré sur TOUT l'écran
 * (jusqu'à 1280 max), pas sous le déclencheur (sinon débordement quand la
 * rubrique est loin du centre — R-1009 contrôle "aucun débordement"). */
.ap-entete-basse{position:relative}
li.ap-mm-item{position:static}

.ap-mm-bouton{position:relative;background:none;border:0;cursor:pointer;font:inherit;color:inherit;min-height:44px}
.ap-mm-bouton::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
  background:var(--accent);transform:scaleX(0);transition:transform .2s ease;
}
.ap-mm-bouton[aria-expanded="true"]::after{transform:scaleX(1)}
.ap-mm-chevron{width:9px;height:9px;margin-left:3px;transition:transform .2s ease}
.ap-mm-bouton[aria-expanded="true"] .ap-mm-chevron{transform:rotate(180deg)}
.ap-mm-bouton:focus-visible{outline:3px solid var(--neon-fixe);outline-offset:3px}

.ap-mm-panel{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:min(var(--conteneur),calc(100vw - 48px));
  max-height:70vh;overflow:hidden;
  background:var(--plaque-haute);border-top:3px solid var(--accent);
  box-shadow:0 24px 48px -24px rgba(17,12,15,.35);
  z-index:50;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.ap-mm-panel.est-ouvert{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s;
}

.ap-mm-panel-corps{display:grid;grid-template-columns:30% 1fr;gap:32px;padding:28px 28px 22px}

/* ---- Colonne vitrine (~30%) ---- */
.ap-mm-vitrine{display:flex;flex-direction:column;gap:10px;min-width:0}
.ap-mm-vitrine-photo{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--fond);border:1px solid var(--filet)}
.ap-mm-vitrine-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ap-mm-vitrine-titre{font-family:var(--police-boitier);font-size:22px;color:var(--encre);line-height:1.2}
.ap-mm-vitrine-desc{margin:0;font-size:14px;color:var(--sourde);line-height:1.5}
.ap-mm-toutvoir{font-size:13px;font-weight:600;color:var(--accent);width:fit-content;min-height:24px;display:inline-flex;align-items:center}
.ap-mm-toutvoir:hover,.ap-mm-toutvoir:focus-visible{text-decoration:underline}
.ap-mm-toutvoir:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- Grille d'entrées (~70%), 2 ou 3 colonnes selon le nombre ---- */
.ap-mm-grille{display:grid;gap:2px 8px;align-content:start;min-width:0}
.ap-mm-grille--2{grid-template-columns:1fr 1fr}
.ap-mm-grille--3{grid-template-columns:1fr 1fr 1fr}
.ap-mm-entree{
  display:flex;align-items:center;gap:12px;padding:9px 10px;min-height:44px;
  min-width:0; /* évite qu'un texte non coupé pousse la 3e colonne hors du panneau (correction orchestrateur) */
  border-left:3px solid transparent;transition:background .15s ease,border-color .15s ease;
}
.ap-mm-entree:hover,.ap-mm-entree:focus-visible{background:var(--fond);border-left-color:var(--accent)}
.ap-mm-entree:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}
.ap-mm-entree:hover .ap-mm-entree-nom,.ap-mm-entree:focus-visible .ap-mm-entree-nom{color:var(--accent)}

.ap-mm-vignette{width:44px;height:44px;flex:none;background:var(--fond);border:1px solid var(--filet);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ap-mm-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.ap-mm-vignette--picto svg{width:20px;height:20px;stroke:var(--sourde);fill:none;stroke-width:1.5}

.ap-mm-entree-texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-mm-entree-nom{font-family:var(--police-boitier);font-size:15px;color:var(--encre);transition:color .15s ease}
.ap-mm-entree-desc{
  font-size:13px;color:var(--sourde);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.ap-mm-colonne{grid-column:1/-1;list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:12px 0 0;padding:12px 10px 0;border-top:1px solid var(--filet)}
.ap-mm-colonne a{font-size:13px;color:var(--argon);min-height:24px;display:inline-flex;align-items:center}

/* ---- Bande basse ---- */
.ap-mm-bande{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;background:var(--fond);border-top:1px solid var(--filet)}
.ap-mm-bande-texte{font-size:13.5px;color:var(--sourde)}
.ap-mm-bande-actions{display:flex;gap:10px}
.ap-mm-bande-actions .ap-bouton,.ap-mm-bande-actions .ap-bouton--fantome{font-size:13.5px;padding:11px 18px}

/* ---- Panneau spécial "Logos" ---- */
.ap-mm-vitrine--logos .ap-mm-vitrine-kicker{font-family:var(--police-boitier);font-size:17px;color:var(--encre);line-height:1.25}
.ap-mm-marques{list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0 0;padding:0}
.ap-mm-marques a{display:flex;align-items:center;gap:10px;min-height:44px;padding:2px 0}
.ap-mm-marques a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ap-mm-marques img{width:36px;height:36px;object-fit:cover;flex:none;background:var(--fond);border:1px solid var(--filet)}
.ap-mm-marques span{font-size:14px;color:var(--encre)}
.ap-mm-marques a:hover span,.ap-mm-marques a:focus-visible span{color:var(--accent)}
/* Toujours 4 colonnes, indépendamment de --2/--3 (correction orchestrateur,
   4e passage : en 2 colonnes les tuiles secteur devenaient géantes et la 2e
   rangée débordait du panneau). */
.ap-mm-grille--tuiles{grid-template-columns:repeat(4,1fr);gap:14px 12px}
.ap-mm-toutvoir--secteurs{display:block;margin-top:14px}
.ap-mm-tuile{display:flex;flex-direction:column;gap:6px;min-height:44px}
.ap-mm-tuile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ap-mm-tuile-photo{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--fond);border:1px solid var(--filet)}
.ap-mm-tuile-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.ap-mm-tuile:hover .ap-mm-tuile-photo img{transform:scale(1.04)}
.ap-mm-tuile-nom{font-family:var(--police-boitier);font-size:14px;color:var(--encre)}
.ap-mm-tuile:hover .ap-mm-tuile-nom,.ap-mm-tuile:focus-visible .ap-mm-tuile-nom{color:var(--accent)}
.ap-mm-tuile-compte{font-size:12px;color:var(--sourde)}

/* ---- Apparition : opacité + translateY(-6px), 200ms ; stagger 40ms sur les
   entrées/tuiles (jusqu'à 9, au-delà le dernier délai est repris). ---- */
.ap-mm-panel.est-ouvert .ap-mm-entree,
.ap-mm-panel.est-ouvert .ap-mm-tuile,
.ap-mm-panel.est-ouvert .ap-mm-marques li{
  animation:ap-mm-entree-in .2s ease both;
}
.ap-mm-grille .ap-mm-entree:nth-child(1),.ap-mm-grille .ap-mm-tuile:nth-child(1),.ap-mm-marques li:nth-child(1){animation-delay:0ms}
.ap-mm-grille .ap-mm-entree:nth-child(2),.ap-mm-grille .ap-mm-tuile:nth-child(2),.ap-mm-marques li:nth-child(2){animation-delay:40ms}
.ap-mm-grille .ap-mm-entree:nth-child(3),.ap-mm-grille .ap-mm-tuile:nth-child(3),.ap-mm-marques li:nth-child(3){animation-delay:80ms}
.ap-mm-grille .ap-mm-entree:nth-child(4),.ap-mm-grille .ap-mm-tuile:nth-child(4){animation-delay:120ms}
.ap-mm-grille .ap-mm-entree:nth-child(5),.ap-mm-grille .ap-mm-tuile:nth-child(5){animation-delay:160ms}
.ap-mm-grille .ap-mm-entree:nth-child(6),.ap-mm-grille .ap-mm-tuile:nth-child(6){animation-delay:200ms}
.ap-mm-grille .ap-mm-entree:nth-child(n+7),.ap-mm-grille .ap-mm-tuile:nth-child(n+7){animation-delay:240ms}
@keyframes ap-mm-entree-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .ap-mm-panel,.ap-mm-panel.est-ouvert,.ap-mm-bouton::after,.ap-mm-chevron,
  .ap-mm-entree,.ap-mm-tuile,.ap-mm-marques li,.ap-mm-tuile-photo img{
    transition:none!important;animation:none!important;
  }
}

/* Nav collante qui ne masque pas le contenu (ancres #az, #fiches-secteur). */
html{scroll-padding-top:var(--entete-h,132px)}

/* ---- Mobile (<960px, même seuil que le burger existant) : le menu existant
   reste, chaque rubrique s'ouvre en accordéon avec les MÊMES vignettes et
   descriptions (pas une liste nue). ---- */
@media (max-width:960px){
  /* Bug pré-existant du site découvert le 23/09 (hors méga-menu, jamais vu
     jusqu'ici) : style.css masque .ap-entete-basse en display:none sous
     960px, et un ancêtre display:none empêche TOUJOURS le rendu d'un
     descendant même position:fixed — le menu mobile ouvert (.ap-ouvert)
     restait donc invisible (aria-expanded correct, mais rien à l'écran).
     Corrigé ici (jamais dans style.css) : on ne réaffiche l'ancêtre QUE
     quand le menu est effectivement ouvert. */
  .ap-entete-basse:has(#ap-nav-primaire.ap-ouvert){display:block}
  .ap-mm-item{width:100%}
  .ap-mm-bouton{width:100%;display:flex;justify-content:space-between;padding:14px 4px}
  .ap-mm-panel{
    position:static;transform:none;width:auto;max-height:none;overflow:visible;
    opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border-top:0;border-left:3px solid var(--accent);background:var(--plaque);
    transition:none;
  }
  /* .ap-mm-panel.est-ouvert (hors media query, transform:translateX(-50%)
     translateY(0)) a la MÊME spécificité que .ap-mm-panel seul ci-dessus et
     gagnait quand même sur mobile (règle plus spécifique que le simple reset
     transform:none) : le panneau ouvert partait ~150px hors écran à gauche,
     large bande vide à droite — correction orchestrateur/Mathias 23/09. */
  .ap-mm-panel.est-ouvert{transform:none}
  .ap-mm-panel[hidden]{display:none}
  .ap-mm-panel-corps{grid-template-columns:1fr;gap:18px;padding:16px}
  .ap-mm-vitrine-photo{aspect-ratio:16/9}
  .ap-mm-grille--2,.ap-mm-grille--3,.ap-mm-grille--tuiles{grid-template-columns:1fr 1fr}
  .ap-mm-bande{flex-direction:column;align-items:flex-start;padding:16px;gap:10px}
  .ap-mm-panel .ap-mm-entree,.ap-mm-panel .ap-mm-tuile,.ap-mm-panel .ap-mm-marques li{animation:none}
}
@media (max-width:480px){
  .ap-mm-grille--2,.ap-mm-grille--3,.ap-mm-grille--tuiles{grid-template-columns:1fr}
}