/* v1.0.1 */
/* Les Fenetres du Midi - navigation principale.
   Reprend exactement le style valide : liens Source Sans 3 14/600 en
   anthracite, gouttiere fluide, hauteur d'en-tete de 81px inchangee. */

.lfd-nav{ display:flex; align-items:center; width:100%; min-width:0; }

.lfd-nav__liste{
  display:flex; flex-wrap:nowrap; align-items:center;
  justify-content:flex-end; gap:clamp(0px, .35vw, 6px);
  list-style:none; margin:0; padding:0; width:100%; min-width:0;
}
.lfd-nav__item{ position:relative; flex:0 0 auto; }

.lfd-nav__lien{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Source Sans 3', system-ui, sans-serif;
  font-size:clamp(14px, .104vw + 12.5px, 14.5px);
  font-weight:600; line-height:23.8px; letter-spacing:normal;
  color:#2E3338; text-decoration:none; white-space:nowrap;
  padding:10px clamp(3px, .55vw, 9px);
  background:none; border:0; cursor:pointer; font-variation-settings:normal;
  transition:color 200ms cubic-bezier(.23,1,.32,1);
}
.lfd-nav__lien:hover,
.lfd-nav__lien:focus-visible,
.lfd-nav__item.est-actif > .lfd-nav__lien{ color:#9E4A2A; }
.lfd-nav__lien:focus-visible{ outline:2px solid #F2A93B; outline-offset:3px; }

.lfd-nav__chevron{
  width:6px; height:6px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform 200ms cubic-bezier(.23,1,.32,1);
}
.lfd-nav__item--parent[data-ouvert="true"] .lfd-nav__chevron{ transform:rotate(-135deg); margin-top:2px; }

.lfd-nav__burger{ display:none; }

/* Sous-menu : panneau flottant, plat et sobre, aux couleurs de la marque.
   Fond calcaire, texte bleu Peyrou, soulignement terracotta au survol.
   Aucun aplat bleu, aucun remplissage de fond au survol. */
@media (min-width:1181px){
  .lfd-nav__sous{
    position:absolute; top:100%; left:0; z-index:70;
    width:270px; min-width:270px; max-width:270px;
    margin:0; padding:6px 0; list-style:none;
    background:#F6F2EA;
    border:1px solid rgba(18,64,95,.16);
    box-shadow:0 24px 48px -28px rgba(18,64,95,.42);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1), visibility 180ms;
  }
  .lfd-nav__item--parent[data-ouvert="true"] > .lfd-nav__sous{ opacity:1; visibility:visible; transform:none; }

  .lfd-nav__sous .lfd-nav__lien{
    position:relative; display:block; width:100%;
    padding:10px 18px; background:none;
    color:#12405F;
  }
  /* Survol et element courant : soulignement terracotta, pas d'aplat. */
  .lfd-nav__sous .lfd-nav__lien::after{
    content:''; position:absolute; left:18px; right:18px; bottom:6px;
    height:1.5px; background:#C4643C;
    transform:scaleX(0); transform-origin:left;
    transition:transform 200ms cubic-bezier(.23,1,.32,1);
  }
  .lfd-nav__sous .lfd-nav__lien:hover::after,
  .lfd-nav__sous .lfd-nav__lien:focus-visible::after,
  .lfd-nav__sous .lfd-nav__item.est-actif > .lfd-nav__lien::after{ transform:scaleX(1); }
  .lfd-nav__sous .lfd-nav__lien:hover,
  .lfd-nav__sous .lfd-nav__lien:focus-visible{ background:none; color:#12405F; }
  .lfd-nav__sous .lfd-nav__lien:focus-visible{ outline:2px solid #F2A93B; outline-offset:-2px; }
}
/* Menu mobile : tiroir lateral et accordeon. */
@media (max-width:1180px){
  .lfd-nav{ justify-content:flex-end; }
  .lfd-nav__burger{
    display:inline-flex; align-items:center; gap:10px;
    min-height:44px; min-width:44px; padding:10px 14px;
    background:none; border:1px solid #D3DCE3;
    font-family:'Archivo', system-ui, sans-serif; font-weight:600; font-size:14px;
    color:#2E3338; cursor:pointer;
  }
  .lfd-nav__burger:focus-visible{ outline:2px solid #F2A93B; outline-offset:3px; }
  .lfd-nav__traits{ display:inline-flex; flex-direction:column; gap:4px; width:18px; }
  .lfd-nav__traits i{ display:block; height:2px; background:currentColor; }

  .lfd-nav__liste{
    /* L'en-tete porte un backdrop-filter : il devient le bloc conteneur
       des elements fixes. bottom:0 se resolvait contre ses 81px, d'ou un
       tiroir de 40px. On pose donc une hauteur explicite. */
    position:fixed; top:100%; right:0; bottom:auto;
    height:calc(100dvh - 81px);
    width:min(360px, 88vw); z-index:65;
    flex-direction:column; flex-wrap:nowrap; justify-content:flex-start;
    align-items:stretch; gap:0; overflow-y:auto;
    padding:16px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    background:#F6F2EA;
    border-left:1px solid #D3DCE3;
    /* Ferme : retire du rendu. Un element fixe translate hors ecran
       allonge la zone defilable, on ne s'appuie donc pas dessus. */
    display:none;
  }
  .lfd-nav[data-menu="ouvert"] .lfd-nav__liste{ display:flex; }

  .lfd-nav__item{ width:100%; border-bottom:1px solid #D3DCE3; }
  .lfd-nav__liste > .lfd-nav__item > .lfd-nav__lien{
    display:flex; width:100%; justify-content:space-between;
    font-family:'Archivo', system-ui, sans-serif; font-weight:700;
    font-size:25px; font-variation-settings:'wdth' 112; letter-spacing:-.018em;
    min-height:52px; padding:10px 0;
  }
  .lfd-nav__sous{
    list-style:none; margin:0; padding:0 0 0 14px;
    max-height:0; overflow:hidden;
    transition:max-height 280ms cubic-bezier(.23,1,.32,1);
  }
  .lfd-nav__item--parent[data-ouvert="true"] > .lfd-nav__sous{ max-height:60vh; }
  .lfd-nav__sous .lfd-nav__item{ border-bottom:0; }
  .lfd-nav__sous .lfd-nav__lien{ min-height:44px; font-size:17px; padding:8px 0; }
}
@media (max-width:600px){
  .lfd-nav__liste > .lfd-nav__item > .lfd-nav__lien{ font-size:22px; }
}
/* Sous-menu mobile : meme charte, texte bleu Peyrou. */
@media (max-width:1180px){
  .lfd-nav__sous .lfd-nav__lien{ color:#12405F; }
  .lfd-nav__sous .lfd-nav__lien:hover,
  .lfd-nav__sous .lfd-nav__lien:focus-visible{ color:#12405F; box-shadow:inset 0 -1.5px 0 #C4643C; }
  .lfd-nav__sous .lfd-nav__lien:focus-visible{ outline:2px solid #F2A93B; outline-offset:-2px; }
}