/*
  GSSIEP — header-mobile.css
  Version : 5.4.1
  Date    : 2026-01-24

  MOBILE UNIQUEMENT pour le header + menu burger.
  Compatible avec nav-mobile.js (état : .nav.is-open).

  Objectifs v5.4.0 :
  - Overlay plein écran : toujours au-dessus du contenu.
  - Menu mobile : centré, lisible, sans « boîte »/encadrement.
  - Correctif : le backdrop-filter sur .header (desktop) peut créer un
    contenant de positionnement/composition et « piéger » un descendant
    en position:fixed (menu). On déplace l'effet dans ::before en mobile.
*/

@media (max-width: 980px){

  /* =========================
     HEADER (mobile)
     ========================= */

  .header{
    /* conserve le comportement sticky */
    position: sticky;
    top: 0;

    /* au-dessus du contenu */
    z-index: 2147483644;

    /* IMPORTANT : ne pas appliquer backdrop-filter ici en mobile
       (sinon le menu fixed peut être « contenu » par le header) */
    background: transparent;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    isolation: isolate;
  }

  /* On recrée le rendu desktop via un pseudo-élément */
  .header::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #111827, #1f2937);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(250, 204, 21, 0.55);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.65);
    z-index: -1;
    pointer-events: none;
  }

  .nav-container{
    position: relative;
    z-index: 2147483645;
    justify-content: space-between;
    gap: .75rem;
  }

  /* Logo : neutralise le décalage desktop */
  .logo{
    margin-left: 0 !important;
    max-width: calc(100% - 56px);
    display: flex;
    align-items: center;
    gap: .6rem;
  }

  .logo img{
    width: 46px;
    height: 46px;
  }

  .logo-subtitle{ display: none; }

  /* Burger visible et toujours cliquable */
  .nav{
    position: relative;
    z-index: 2147483646;
  }

  .nav-toggle{
    display: flex !important;
    margin-left: auto;
    position: relative;
    z-index: 2147483647; /* au-dessus de l'overlay */
  }

  /* ===============================
     MENU MOBILE — style “panneau” (comme IONOS)
     - Fond de page visible (overlay léger)
     - Panneau centré (pas de plein écran)
     =============================== */

  .nav.is-open::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    background: rgba(2, 6, 23, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .nav-container .nav-links{
    display: none !important;

    /* Panneau centré (style IONOS actuel) */
    position: fixed;
    top: 5.15rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483646;

    width: min(420px, calc(100vw - 2rem));
    max-height: calc(100vh - 6.25rem);

    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .35rem;

    padding: 1.05rem 1rem 1.1rem;

    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(250, 204, 21, 0.45);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    /* évite les surprises de stacking avec des effets de blend ailleurs */
    isolation: isolate;
  }

  .nav.is-open .nav-links{
    display: flex !important;
    animation: menuFadeIn .12s ease-out;
  }

  /* Liste : pleine largeur, sans “cadre” */
  .nav-links{
    list-style: none;
    width: 100%;
  }

  .nav-links li{
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 44px 1fr 44px; /* colonne gauche “vide” pour centrer */
    align-items: center;
    justify-items: center;
  }

  .nav-links li::before{
    content: "";
    width: 44px;
    height: 44px;
    display: block;
  }

  /* Liens : centrés, sans encadrement */
  .nav-links a{
    grid-column: 2;
    justify-self: stretch;

    display: block;
    width: 100%;
    text-align: center;

    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 900;

    padding: .95rem .75rem;
    margin: 0;

    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .nav-links a:hover{
    text-decoration: underline;
    text-decoration-color: rgba(250, 204, 21, 0.85);
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
  }

  .nav-links a:focus-visible{
    outline: 2px solid rgba(250,204,21,0.55);
    outline-offset: 4px;
  }


  /* CTA (Contact) : conserve l'aspect bouton (centré) */
  .nav-links a.btn{
    display: inline-flex;
    justify-self: center;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: .85rem 1.15rem;
    border-radius: 999px;
    text-decoration: none !important;
  }
  .nav-links a.btn:hover{
    text-decoration: none !important;
  }

  /* Etat actif : sobre */
  .nav-container .nav-links a.active-tab{
    background: transparent;
    color: #f9fafb;
    text-decoration: underline;
    text-decoration-color: rgba(250, 204, 21, 0.95);
    text-underline-offset: 10px;
    text-decoration-thickness: 3px;
  }

  /* Dropdown toggle : dans la colonne droite, sans décaler le texte */
  .nav-links .dropdown-toggle{
    grid-column: 3;
    justify-self: end;

    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;

    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    z-index: 2;
  }

  .nav-links .dropdown-toggle .chev{
    opacity: .9;
    font-size: 1rem;
    line-height: 1;
  }

  /* Sous-menus : en bloc, sans cadres/pills */
  .nav-links li.has-dropdown .dropdown-menu{
    grid-column: 1 / -1;
    width: 100%;
    display: none;
    position: static !important;

    margin: .15rem 0 .6rem;
    padding: 0;

    background: transparent;
    border: none !important;
    box-shadow: none !important;
  }

  .nav-links li.has-dropdown.is-open .dropdown-menu{
    display: block;
  }

  .nav-container .nav-links .dropdown-menu li{
    display: block;
  }

  .nav-container .nav-links .dropdown-menu li::before{
    display: none;
  }

  .nav-container .nav-links .dropdown-menu li a{
    display: block;
    width: 100%;
    text-align: center;

    font-size: .98rem;
    font-weight: 800;
    /* IMPORTANT : components.css impose un texte sombre (#111827)
       sur les sous-menus. Sur l'overlay sombre mobile, cela rend
       les items invisibles si on ne surcharge pas la couleur. */
    color: #e5e7eb;
    opacity: .92;

    padding: .75rem .75rem;
    border-radius: 0;
  }

  .nav-container .nav-links .dropdown-menu li a:hover{
    text-decoration-color: rgba(250, 204, 21, 0.75);
  }

  @keyframes menuFadeIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
  }
}

@media (max-width: 520px){
  .logo img{
    width: 42px;
    height: 42px;
  }
}