/* =============================================================================
 * mod_flatnav_j6 — menu plat responsive natif (alternative légère à Maximenu CK
 * + Mobile Menu CK pour des menus Joomla à un seul niveau)
 *
 * API CSS STABLE (volontairement) — toute personnalisation avancée se fait en
 * ciblant ces classes/variables depuis plg_system_csscustomcode ou une
 * surcharge de template, JAMAIS en modifiant ce module.
 *
 *   .mfn6-desktop        barre horizontale desktop (flex-wrap, tous les items visibles)
 *   .mfn6-mobilebar       barre mobile (étiquette + bouton hamburger)
 *   .mfn6-mobilebar.mfn6-fixed   posée par JS quand la barre devient fixe au scroll
 *   .mfn6-panel           panneau mobile (liste complète des items)
 *   .mfn6-panel-dropdown  variante : déroule sous la barre
 *   .mfn6-panel-fullscreen variante : recouvre tout l'écran
 *   .mfn6-current         item actif (desktop et dans le panneau)
 *
 * Variable par instance (posée sur [data-mfn6-id]) : --mfn6-accent
 * ========================================================================== */

.mfn6 *{box-sizing:border-box}
/* Sans-serif explicite pour les boutons/liens de nav, indépendamment de la
   police (souvent serif) utilisée par le site pour les titres/logo. */
.mfn6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* ---------- Barre desktop ---------- */
/* Couleur de texte explicite (pas "inherit") : la barre desktop est posée sur
   le même bandeau sombre que la barre mobile — sans ça le texte hérite de la
   couleur de lien globale du site (souvent sombre), illisible sur fond foncé. */
.mfn6-desktop{color:var(--mfn6-bar-text,#fff)}
.mfn6-desktop ul{list-style:none;margin:0;padding:.5rem 1rem;display:flex;flex-wrap:wrap;gap:.25rem .5rem;justify-content:center}
.mfn6-desktop li{display:flex}
.mfn6-desktop a{text-decoration:none;color:inherit;padding:.4rem .7rem;border-radius:6px;border-bottom:2px solid transparent;transition:background-color .15s ease,color .15s ease}
/* Survol : changement de fond ET de couleur (pas seulement un contour) pour
   un retour clairement visible, pas juste "discret". */
.mfn6-desktop a:hover,.mfn6-desktop a:focus-visible{background:rgba(255,255,255,.22);color:#fff}
.mfn6-desktop li.mfn6-current a{border-bottom-color:var(--mfn6-bar-text,#fff);font-weight:600;color:var(--mfn6-bar-text,#fff)}
.mfn6-desktop .mfn6-label{padding:.4rem .7rem;font-weight:600;opacity:.75}

/* ---------- Barre mobile ---------- */
/* Fond opaque explicite (pas "inherit") : indispensable une fois la barre
   passée en position:fixed, sinon le contenu de la page défile visible au
   travers et rend l'étiquette illisible. */
.mfn6-mobilebar{display:none;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;background:var(--mfn6-bar-bg,var(--mfn6-accent,#016576));color:var(--mfn6-bar-text,#fff)}
.mfn6-mobilebar.mfn6-fixed{position:fixed;top:0;left:0;right:0;z-index:9500;box-shadow:0 2px 6px rgba(0,0,0,.15)}
/* Même taille que le texte des items du panneau (16px) pour que le rappel
   d'item courant dans la barre lise comme un prolongement du menu, pas comme
   un élément de taille différente. */
.mfn6-mobilelabel{font-size:16px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Cible tactile 44px (accessibilité). Au repos (fermé) : pas de fond, barres
   blanches. Quand ouvert (X) : fond clair + barres/X en vert. Piloté UNIQUEMENT
   par [aria-expanded] (état réel du panneau), jamais par :hover — un simple
   :hover restait actif juste après le clic de fermeture (le curseur/doigt ne
   "quitte" pas le bouton du seul fait de cliquer), ce qui laissait un fond
   visible en boucle après fermeture. :focus-visible (navigation clavier
   uniquement, jamais déclenché par un clic/tap) donne le même repère aux
   utilisateurs clavier sans ce problème. */
.mfn6-toggle{flex-shrink:0;background:transparent;border:0;border-radius:50%;cursor:pointer;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease}
.mfn6-toggle[aria-expanded="true"],.mfn6-toggle:focus-visible{background:#DBFBF8}
/* Barres du burger = couleur du texte de la barre (pas #fff en dur) : sur une
   barre à fond clair (ex. menu principal en ton pastel), des barres blanches
   seraient invisibles. En suivant --mfn6-bar-text, le burger contraste toujours
   son propre fond. */
.mfn6-toggle span,.mfn6-toggle span::before,.mfn6-toggle span::after{content:"";display:block;width:20px;height:2px;background:var(--mfn6-bar-text,#fff);border-radius:2px;transition:transform .25s ease,opacity .25s ease,background-color .15s ease}
.mfn6-toggle span{position:relative}
.mfn6-toggle span::before{position:absolute;top:-6px}
.mfn6-toggle span::after{position:absolute;top:6px}
.mfn6-toggle:focus-visible span,.mfn6-toggle:focus-visible span::before,.mfn6-toggle:focus-visible span::after,
.mfn6-toggle[aria-expanded="true"] span::before,.mfn6-toggle[aria-expanded="true"] span::after{background:var(--mfn6-accent,#016576)}
/* Doit venir après les règles de couleur ci-dessus pour gagner en cas de
   focus simultané à l'ouverture : la barre du milieu doit rester invisible. */
.mfn6-toggle[aria-expanded="true"] span{background:transparent}
.mfn6-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.mfn6-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Panneau : variante déroulante (menus service) ---------- */
/* Révélation de gauche à droite (clip-path, composité GPU) — signature propre
   aux menus SERVICE, qui la distingue du fondu du menu PRINCIPAL plein écran
   (.mfn6-panel-fullscreen plus bas). Hauteur gérée par overflow-y:auto avec un
   plafond fixe. pointer-events:none tant que fermé pour ne pas intercepter les
   clics sur le contenu de la page en dessous. */
/* max-height:0 + overflow:hidden quand FERMÉ : sans ça, ce panneau absolu — même
   invisible (clip-path/visibility) — garde toute sa hauteur de boîte et, ancré en
   bas de page (menu principal), ALLONGE la zone défilable du document → grande
   bande vide sous le pied de page en mobile. Le collapse de hauteur est retardé
   (transition-delay = durée du wipe) pour que l'animation de fermeture gauche→
   droite reste visible avant que la boîte ne se réduise. */
.mfn6-panel-dropdown{position:absolute;left:0;right:0;z-index:9400;max-height:0;overflow:hidden;background:var(--mfn6-panel-bg,#016576);color:var(--mfn6-panel-text,#fff);clip-path:inset(0 100% 0 0);visibility:hidden;pointer-events:none;transition:clip-path .35s ease,visibility .35s,max-height 0s linear .35s}
.mfn6-panel-dropdown.mfn6-open{max-height:80vh;overflow-y:auto;clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;transition:clip-path .35s ease,visibility .35s,max-height 0s linear 0s}
/* Posée en JS quand la barre associée est en position:fixed (voir flatnav.js
   syncPanelToBar) — sinon le panneau reste ancré à l'ancienne position de la
   barre dans le flux et s'ouvre hors écran une fois la page scrollée. */
.mfn6-panel-dropdown.mfn6-panel-follow-fixed{position:fixed}
.mfn6-panel-dropdown ul{list-style:none;margin:0;padding:0}
.mfn6-panel-dropdown li{border-bottom:1px solid rgba(255,255,255,.08)}
/* Barre d'accent à gauche pour l'item actif (hiérarchie par la couleur/le
   poids, pas seulement le gras) + léger décalage au survol/tap comme retour
   tactile — échelle de tailles/espacements standard (16px/20px). */
.mfn6-panel-dropdown a,.mfn6-panel-dropdown .mfn6-label{display:flex;align-items:center;padding:16px 20px;font-size:16px;font-weight:400;line-height:1.3;color:inherit;text-decoration:none;border-left:3px solid transparent;transition:background-color .15s ease,border-color .15s ease,padding-left .15s ease,color .15s ease}
.mfn6-panel-dropdown li.mfn6-current a{font-weight:600;border-left-color:var(--mfn6-panel-text,#fff);background:rgba(255,255,255,.1)}
/* Survol/focus bien visible : fond nettement plus clair + texte qui passe en
   blanc pur (au lieu d'un simple assombrissement à peine perceptible). */
.mfn6-panel-dropdown a:hover,.mfn6-panel-dropdown a:focus-visible{background:rgba(255,255,255,.22);color:#fff;padding-left:24px}

/* Entrée en cascade des items quand le panneau s'ouvre (--mfn6-i posé en PHP,
   plafonné à 10 pour ne pas allonger l'animation sur les longs menus). */
.mfn6-panel-dropdown li,.mfn6-panel-fullscreen li{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.mfn6-panel-dropdown.mfn6-open li,.mfn6-panel-fullscreen.mfn6-open li{opacity:1;transform:translateY(0);transition-delay:calc(var(--mfn6-i,0) * 30ms)}

/* ---------- Panneau : variante plein écran ---------- */
/* z-index au-dessus de .mfn6-mobilebar.mfn6-fixed (9500) : une AUTRE instance
   du module (ex. la barre service en haut) peut être fixe au moment où celle-ci
   ouvre son panneau plein écran — celui-ci doit passer devant, pas être caché
   dessous. */
.mfn6-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9600;opacity:0;visibility:hidden;transition:opacity .25s ease}
.mfn6-overlay.mfn6-open{opacity:1;visibility:visible}

.mfn6-panel-fullscreen{position:fixed;inset:0;z-index:9601;background:var(--mfn6-panel-bg,#fff);color:var(--mfn6-panel-text,#1c1c1c);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility .3s}
.mfn6-panel-fullscreen.mfn6-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mfn6-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.1)}
.mfn6-panel-header .mfn6-panel-title{font-weight:600;font-size:20px}
/* Bouton de fermeture circulaire (icône SVG, pas le glyphe "×" — rendu
   inconsistant selon les polices) : fond blanc + icône verte (couleur
   d'accent) en permanence, pas seulement au survol. */
.mfn6-close{background:#fff;border:0;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mfn6-accent,#016576);box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:box-shadow .15s ease,transform .1s ease}
.mfn6-close:hover,.mfn6-close:focus-visible{box-shadow:0 0 0 3px rgba(1,101,118,.18)}
.mfn6-close:active{transform:scale(.92)}
.mfn6-panel-fullscreen ul{list-style:none;margin:0;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.mfn6-panel-fullscreen li{margin:0}
.mfn6-panel-fullscreen a,.mfn6-panel-fullscreen .mfn6-label{display:flex;align-items:center;padding:16px 20px;border-radius:10px;font-size:16px;font-weight:400;background:rgba(0,0,0,.04);color:inherit;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}
.mfn6-panel-fullscreen li.mfn6-current a{background:var(--mfn6-accent,#016576);color:#fff;font-weight:600}
/* Survol : couleur d'accent nette (pas juste un fond à peine plus foncé). */
.mfn6-panel-fullscreen a:hover,.mfn6-panel-fullscreen a:focus-visible{background:rgba(1,101,118,.12);color:var(--mfn6-accent,#016576)}
.mfn6-panel-fullscreen li.mfn6-current a:hover,.mfn6-panel-fullscreen li.mfn6-current a:focus-visible{color:#fff}
.mfn6-panel-fullscreen a:active{transform:scale(.98)}

@media (prefers-reduced-motion: reduce){
	.mfn6-panel-dropdown,.mfn6-panel-fullscreen,.mfn6-overlay,.mfn6-toggle span,.mfn6-toggle span::before,.mfn6-toggle span::after,.mfn6-close{transition:none}
	.mfn6-panel-dropdown li,.mfn6-panel-fullscreen li{transition:none;transition-delay:0s;opacity:1;transform:none}
}