/* En-tête du site — proposition A de la maquette /mockup-menu/.

   Une contrainte a guidé les hauteurs : l'en-tête du thème est en
   position absolue, il recouvre le contenu, et chaque page compense par
   une marge fixe. Le raccourcir décalerait tout le site. La barre garde
   donc la hauteur d'aujourd'hui (118 px, 76 px sur mobile) ; la refonte
   porte sur ce qu'il y a dedans, pas sur l'encombrement.

   Les paliers sont ceux mesurés sur la maquette : 1400 px la navigation
   se resserre, 1240 px elle passe au tiroir, 620 px l'appel à l'action
   passe en seconde ligne. */

.lpe,.lpe *,.lpe *::before,.lpe *::after{box-sizing:border-box}
.lpe{
 --h:118px;
 --ink:#0F181B;--ink2:#3B4E54;--mu:#6C7F85;--ln:#DCE5E7;--ln2:#EDF2F3;
 --sf:#fff;--ac:#0A7C91;--acs:#E4F4F8;
 position:relative;width:100%;
 /* Trait de séparation avec le fil d'actualités posé en dessous. */
 border-bottom:1px solid var(--ln);
 font:400 16px/1.5 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:var(--ink);
}
/* Contenu centré sur la largeur du site : la barre s'aligne sur les pages. */
.lpe .lpe-in{display:flex;align-items:center;gap:26px;height:var(--h);
 max-width:1590px;margin:0 auto;padding:0 24px}

.lpe .lpe-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.lpe .lpe-logo picture{display:block;line-height:0}
.lpe .lpe-logo img{height:56px;width:auto;display:block}

.lpe .lpe-nav{display:flex;align-items:center;flex:1 1 auto;min-width:0}
.lpe .lpe-nav ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.lpe .lpe-nav li{margin:0;padding:0;list-style:none}
.lpe .lpe-nav li::before,.lpe .lpe-nav li::marker{content:none}
.lpe .lpe-nav a{display:inline-block;font:500 14.5px/1 "IBM Plex Sans",sans-serif;
 color:var(--ink2);text-decoration:none;white-space:nowrap;padding:10px 13px;
 border-radius:9px;border:1px solid transparent;position:relative;
 transition:background .14s ease,border-color .14s ease,color .14s ease}
/* Le survol dessine un encadré : on voit ce qu'on s'apprête à cliquer. */
.lpe .lpe-nav a:hover,.lpe .lpe-nav a:focus-visible{color:var(--ac);background:var(--acs);
 border-color:rgba(10,124,145,.28);outline:none}
.lpe .lpe-nav .current-menu-item > a,
.lpe .lpe-nav .current_page_item > a,
.lpe .lpe-nav .current-menu-ancestor > a{color:var(--ac);font-weight:600}
.lpe .lpe-nav .current-menu-item > a::after,
.lpe .lpe-nav .current_page_item > a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;
 height:2px;background:var(--ac);border-radius:2px}
.lpe .lpe-nav .current-menu-item > a:hover::after{opacity:0}

.lpe .lpe-act{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto}
.lpe .lpe-ico{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
 width:44px;height:44px;border-radius:10px;border:1px solid var(--ln);background:var(--sf);
 color:var(--ink2);text-decoration:none;position:relative;cursor:pointer;
 transition:border-color .14s ease,color .14s ease}
.lpe .lpe-ico:hover{border-color:var(--ac);color:var(--ac)}
.lpe .lpe-ico:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.lpe .lpe-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round;stroke-linejoin:round}
.lpe .lpe-n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
 border-radius:10px;background:#E8552F;color:#fff;border:2px solid var(--sf);
 font:700 11px/1 "IBM Plex Sans",sans-serif;display:flex;align-items:center;justify-content:center;
 pointer-events:none}
.lpe .lpe-n.lpe-vide{background:#A8B8BC}

.lpe .lpe-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
 background:var(--ac);color:#fff;text-decoration:none;font:600 14.5px/1 "IBM Plex Sans",sans-serif;
 padding:14px 20px;border-radius:10px;border:1.5px solid var(--ac);white-space:nowrap;
 transition:background .16s ease,border-color .16s ease}
.lpe .lpe-cta:hover,.lpe .lpe-cta:focus-visible{background:#08697b;border-color:#08697b;color:#fff;outline:none}
.lpe .lpe-cta svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.1;
 stroke-linecap:round;stroke-linejoin:round}

.lpe .lpe-burger{display:none}

/* ---- tiroir ------------------------------------------------------------- */
.lpe .lpe-tiroir{position:absolute;left:0;right:0;top:var(--h);z-index:20;
 background:var(--sf);border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln);
 box-shadow:0 18px 36px -24px rgba(15,24,27,.5);padding:8px 24px 20px}
.lpe .lpe-tiroir[hidden]{display:none!important}
.lpe .lpe-tiroir ul{list-style:none;margin:0 auto;padding:0;max-width:1590px}
.lpe .lpe-tiroir li{margin:0;padding:0;list-style:none}
.lpe .lpe-tiroir li::before,.lpe .lpe-tiroir li::marker{content:none}
.lpe .lpe-tiroir a{display:block;font:500 16px/1.3 "IBM Plex Sans",sans-serif;color:var(--ink);
 text-decoration:none;padding:15px 12px;border-radius:10px;
 border:1px solid transparent;border-bottom:1px solid var(--ln2);
 transition:background .14s ease,border-color .14s ease,color .14s ease}
.lpe .lpe-tiroir a:hover,.lpe .lpe-tiroir a:focus-visible{background:var(--acs);
 border-color:rgba(10,124,145,.28);color:var(--ac);outline:none}
.lpe .lpe-tiroir .current-menu-item > a,
.lpe .lpe-tiroir .current_page_item > a{color:var(--ac);font-weight:600}
.lpe .lpe-cta-tiroir{display:flex;max-width:1590px;margin:16px auto 0;padding:15px}

/* ---- 1400 : la navigation se resserre ----------------------------------- */
@media (max-width:1400px){
 .lpe .lpe-in{gap:20px}
 .lpe .lpe-logo img{height:52px}
 .lpe .lpe-nav ul{gap:12px}
 .lpe .lpe-nav a{font-size:14px;padding:9px 8px}
 .lpe .lpe-nav .current-menu-item > a::after,
 .lpe .lpe-nav .current_page_item > a::after{left:8px;right:8px}
}
/* ---- 1240 : sept entrées ne tiennent plus, elles passent au tiroir ------- */
@media (max-width:1240px){
 .lpe{--h:96px}
 .lpe .lpe-nav{display:none}
 .lpe .lpe-in{gap:12px;padding:0 20px}
 .lpe .lpe-logo img{height:46px}
 .lpe .lpe-cta{padding:12px 16px;font-size:13.5px}
 .lpe .lpe-burger{display:inline-flex}
}
/* ---- 1024 : hauteur du bandeau mobile du thème -------------------------- */
@media (max-width:1024px){
 .lpe{--h:76px}
 .lpe .lpe-logo img{height:42px}
}
/* ---- 620 : l'appel à l'action passe en seconde ligne, entier ------------- */
@media (max-width:620px){
 .lpe{--h:auto}
 .lpe .lpe-in{flex-wrap:wrap;height:auto;padding:12px 16px 14px;row-gap:11px}
 .lpe .lpe-logo img{height:36px}
 .lpe .lpe-act{order:2}
 .lpe .lpe-cta{order:3;flex:1 0 100%;padding:13px;font-size:14.5px}
 .lpe .lpe-tiroir{position:static;top:auto;margin:0 -16px -14px;padding:4px 16px 16px;box-shadow:none}
}