/* Menu mobile plein écran des Épavistes — composant de la maquette validée par Akim le 11/09/2026
   (output/design-menu-sommaire-cta-2026-09-11/01-menu-mobile.html, commit de4d1ac).
   Chargé seulement sous 981 px (voir lep-menu-mobile.php). */

/* Outfit est un fichier VARIABLE, mais le site (polices/polices-locales.css) ne le déclare qu'en 400 et 700 :
   la graisse 600 des entrées du menu tombait sur la face 700 (« Accueil » 66,3 px au lieu de 65,3 px, trait plus
   gras que la maquette). Le composant déclare, pour lui seul, le MÊME fichier sous un nom propre et sur toute sa
   plage de graisses, comme la maquette (font-weight:100 900). Même adresse de fichier : aucun téléchargement de plus,
   et les déclarations globales du site ne sont pas touchées. Contrôle DA ticket 35, 11/09/2026. */
@font-face{font-family:"LEP Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(../polices/fonts/outfit-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LEP Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(../polices/fonts/outfit-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.lep-entete,.lep-menu{
  --lep-bleu:#0D57CB;
  --lep-nuit:#001C47;
  --lep-case:#03214F;
  --lep-jaune:#F4C709;
  --lep-titre:"LEP Outfit","Outfit",Helvetica,Arial,sans-serif;
  --lep-texte:"Plus Jakarta Sans",Helvetica,Arial,sans-serif;
  --lep-matiere:linear-gradient(180deg,rgba(13,87,203,.30) 0,rgba(0,28,71,0) 40%),
                repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7px);
}
.lep-entete *,.lep-menu *{box-sizing:border-box}
.lep-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- en-tête mobile fermé : logo et bouton --- */
.lep-entete{display:flex;align-items:center;justify-content:space-between;width:100%}
.lep-entete__logo{display:block;line-height:0}
.lep-entete__logo img{width:170px;height:auto}
/* marge verticale négative : la section Divi porte déjà 15 px en haut et en bas, l'en-tête garde ses 70 px de la maquette */
.lep-burger{width:44px;height:44px;display:grid;place-items:center;padding:0;margin:-2px -7px -2px 0;border:0;border-radius:6px;
  background:transparent;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lep-burger:active{background:rgba(255,255,255,.12)}
.lep-burger:focus-visible{outline:2px solid var(--lep-jaune);outline-offset:1px}
.lep-burger__traits{position:relative;display:block;width:24px;height:16px}
.lep-burger__traits span{position:absolute;right:0;height:2px;border-radius:1px;background:currentColor}
.lep-burger__traits span:nth-child(1){top:0;width:24px}
.lep-burger__traits span:nth-child(2){top:7px;width:24px}
.lep-burger__traits span:nth-child(3){top:14px;width:15px}

/* --- le menu ouvert : tout l'écran, rien derrière ne défile --- */
/* 100000 et non 99999 : la barre d'administration WordPress (z-index 99999, écrite après le menu) recouvrait
   la croix de fermeture pour un utilisateur connecté (constaté par Akim le 11/09/2026) */
.lep-menu{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom,0px);
  color:#fff;background-color:var(--lep-nuit);background-image:var(--lep-matiere);
  font-family:var(--lep-texte);text-align:left;
  /* le thème impose au corps de page une graisse 500 et un interligne 1,7 : le composant reprend
     l'héritage de la maquette (400, normal), sans quoi la ligne d'agrément s'épaissit et le chiffre
     de la plaque descend de 3,5 px dans sa pastille */
  font-weight:400;line-height:normal}
.lep-menu[hidden]{display:none}
html.lep-menu-ouvert,html.lep-menu-ouvert body{overflow:hidden}

.lep-menu__barre{flex:0 0 70px;display:flex;align-items:center;justify-content:space-between;
  padding:0 13px 0 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.lep-fermer{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:#fff;cursor:pointer}
.lep-fermer::before,.lep-fermer::after{content:"";position:absolute;left:11px;top:21px;width:22px;height:2px;border-radius:1px;background:currentColor}
.lep-fermer::before{transform:rotate(45deg)}
.lep-fermer::after{transform:rotate(-45deg)}
.lep-fermer:active{background:rgba(255,255,255,.12)}
.lep-fermer:focus-visible{outline:2px solid var(--lep-jaune);outline-offset:1px}

/* Le CSS du modèle Divi impose « ul:not(.sub-menu){padding-left:30px!important} » à toutes les listes du
   site : sans ce contre-ordre, le menu et la grille des zones se décalent de 30 px vers la droite et
   perdent 30 px de large (noms de départements coupés). Le !important répond au !important de Divi ;
   la valeur reste celle de la maquette (0). Local à ce composant. */
.lep-menu .lep-menu__liste,.lep-menu .lep-zones{padding-left:0!important}
.lep-menu .lep-menu__liste{list-style:none;margin:0;padding:0}
.lep-menu__liste>li{border-bottom:1px solid rgba(255,255,255,.10);padding:0;margin:0}
.lep-menu__entree{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:52px;padding:0 16px 0 20px;border:0;background:transparent;text-align:left;cursor:pointer;
  font-family:var(--lep-titre);font-size:21px;font-weight:600;line-height:1.1;letter-spacing:-.005em;
  color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent}
.lep-menu__entree:active{background:rgba(255,255,255,.06)}
.lep-menu__entree:focus-visible{outline:2px solid var(--lep-jaune);outline-offset:-4px}
.lep-menu__entree small{font-family:var(--lep-texte);font-size:12.5px;font-weight:600;color:#AFC0D8;letter-spacing:.01em;margin-left:auto}
.lep-chevron{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.09);transition:transform .2s ease,background-color .2s ease}
.lep-chevron svg{width:14px;height:14px;display:block}
.lep-menu__entree[aria-expanded="true"]{color:var(--lep-jaune)}
.lep-menu__entree[aria-expanded="true"] .lep-chevron{transform:rotate(180deg);background:var(--lep-jaune);color:var(--lep-nuit)}

/* --- la grille des zones : deux colonnes, lue colonne par colonne --- */
.lep-zones-cadre{padding:2px 14px 14px}
.lep-zones-cadre[hidden]{display:none}
.lep-menu .lep-zones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(8,44px);grid-auto-flow:column;gap:1px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.lep-zones li{background:var(--lep-case);min-width:0;padding:0;margin:0}
.lep-zone{display:flex;align-items:center;gap:7px;height:100%;padding:0 6px;
  font-family:var(--lep-texte);font-size:14px;font-weight:500;color:#E6ECF5;text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.lep-zone:active{background:rgba(255,255,255,.08)}
.lep-zone:focus-visible{outline:2px solid var(--lep-jaune);outline-offset:-3px}
/* « .lep-menu » en tête : la feuille des pages refondues (lep-pages.css, chargée APRÈS ce fichier sur les villes et
   les départements) pose sa propre « .lep-plaque » du héros (inline-flex, 36 px, marge basse 16 px, fond blanc, font
   15px/1) ; à spécificité égale elle gagnait, et la pastille du menu montait à 25 × 36 px (maquette 25 × 20). Chaque
   propriété qu'elle touche est reposée ici à la valeur de la maquette. Ticket 47, 11/09/2026. */
.lep-menu .lep-plaque{flex:0 0 auto;display:inline-grid;place-items:center;min-width:25px;height:20px;margin:0;padding:0 3px;border-radius:2px;
  background:var(--lep-bleu);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  font-family:var(--lep-titre);font-size:12px;font-weight:700;line-height:normal;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.lep-zone.est-ici{color:var(--lep-jaune);font-weight:700;box-shadow:inset 3px 0 0 var(--lep-jaune)}
.lep-zone.est-ici .lep-plaque{background:var(--lep-jaune);color:var(--lep-nuit)}
.lep-zone--tous{justify-content:space-between;padding:0 10px;font-weight:700;color:var(--lep-jaune)}
.lep-zone--tous svg{width:16px;height:16px;flex:none}

/* --- le pied du menu : l'appel, à portée de pouce --- */
.lep-menu__pied{margin-top:auto;padding:14px 20px 16px}
.lep-appel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:6px;
  background:var(--lep-jaune);color:var(--lep-nuit);text-decoration:none;
  font-family:var(--lep-titre);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 10px 24px -14px rgba(244,199,9,.7)}
.lep-appel svg{width:20px;height:20px;flex:none}
.lep-appel:active{transform:translateY(1px)}
.lep-appel:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lep-menu__agrement{margin:9px 0 0;padding:0;text-align:center;font-size:12.5px;line-height:1.3;color:#AFC0D8}

@media (prefers-reduced-motion:reduce){.lep-chevron{transition:none}}