/* =========================================================================
   header.css — barre de menu du site (include/header-chalet.php).

   JC20260928 : extrait du bloc <style> inline de include/header-chalet.php
   (~910 lignes, 34,7 Ko renvoyes a chaque page vue et jamais mis en cache ;
   place dans le <body>, il repeignait le menu apres le premier rendu).

   CHARGEMENT — a mettre en DERNIER dans le <head>, apres main.css et apres
   toutes les autres feuilles de la page. Le bloc inline se trouvait dans le
   <body>, donc apres tout le <head> : cette position reproduit exactement la
   meme cascade. Le monter plus haut peut changer le rendu des regles qui ne
   portent pas de !important.

   Selecteurs a forte specificite et ~415 !important : ils sont la pour passer
   par-dessus les regles de nav de main.css sans modifier ce fichier. Le jour ou
   header-chalet.php remplacera include/header.php partout, il faudra fondre ces
   regles dans main.css et supprimer ces !important, en corrigeant les regles
   d'origine plutot qu'en les surchargeant.
   ========================================================================= */

/* ── Conteneur de droite : CTA + compte ─────────── */
#header .nav-collapse ul#nav-second {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    gap: 14px;
    float: right;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#header .nav-collapse ul#nav-second > li,
#header .nav-collapse ul#nav-second > li.extra {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    float: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    line-height: 1 !important;
}

/* Gap de secours si le navigateur ignore `gap` en flex */
#header .nav-collapse ul#nav-second > li + li { margin-left: 14px !important; }
@supports (gap: 1px) {
    #header .nav-collapse ul#nav-second > li + li { margin-left: 0 !important; }
}

/* ── Lien « Se connecter » (visiteur) ───────────── */
#header .nav-collapse ul#nav-second > li.lq-account > a.lq-login-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    float: none !important;
    height: 36px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    line-height: 1 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}
#header .nav-collapse ul#nav-second > li.lq-account > a.lq-login-link:hover { opacity: .85; }

/* ── Rond d'initiales ───────────────────────────── */
#header .nav-collapse ul#nav-second .lq-avatar {
    -webkit-box-sizing: border-box;
    box-sizing: border-box !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center !important;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    float: none !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid rgba(255,255,255,1) !important;
    border-radius: 50% !important;
    color: #fff;
    background: var(--brand-dark) !important;
    line-height: 1 !important;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: background-color .30s ease, border-color .30s ease;
    transition: background-color .30s ease, border-color .30s ease;
}
/* Centrage optique : compense l'écart de jambage des capitales.
   :not(.lq-avatar__caret) -> la pastille chevron porte elle aussi
   aria-hidden ; sans cette exclusion elle heritait de display:block,
   font-size:1rem et translateY(.5px), ce qui cassait son centrage. */
#header .nav-collapse ul#nav-second .lq-avatar > span[aria-hidden]:not(.lq-avatar__caret) {
    display: block;
    font-size: .85rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    padding: 0;
    -webkit-transform: translateY(.5px);
    transform: translateY(.5px);
}
#header .nav-collapse ul#nav-second .lq-avatar:hover,
#header .nav-collapse ul#nav-second .lq-avatar[aria-expanded="true"] {
    background: rgba(255, 255, 255, .22) !important;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
}
#header .nav-collapse ul#nav-second .lq-avatar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Pastille chevron (coin bas-droit du rond) ───────────────────
   Le rond d'initiales portait overflow:hidden, qui découpait toute
   pastille débordante : on repasse en overflow visible et on rend le
   bouton positionnant pour y ancrer la pastille.                  */
#header .nav-collapse ul#nav-second .lq-avatar {
    position: relative !important;
    overflow: visible !important;
}
/* Le disque blanc, le liseré orange et le chevron sont dessines DANS le SVG
   (cf. markup plus bas). Aucun centrage CSS n'entre donc en jeu : ni flex, ni
   line-height, ni metriques de police. Le span ne fait que positionner.
   Tout est en !important : ce bouton est deja cible par des regles a deux id
   (#header ... ul#nav-second), plus specifiques qu'une simple classe.        */
/* ── Element de compte marque « active » ────────────
   header.php ajoute la classe .active sur <li class="extra lq-account"> des que
   l'URL contient /membre/. Or main.css (ligne ~4909) dessine, pour tout
   .nav-collapse li.active, un triangle en ::after cale sous l'element — le
   repere d'onglet courant du menu. Sous l'avatar, ce triangle ressemble a une
   fleche parasite posee sous le rond. On le neutralise pour ce seul <li> ;
   la classe .active est conservee, elle sert au surlignage du compte. */
#header .nav-collapse li.lq-account.active::after {
    content: none !important;
}

#header .nav-collapse ul#nav-second .lq-avatar > span.lq-avatar__caret {
    position: absolute !important;
    right: -3px !important;
    bottom: -3px !important;
    z-index: 2;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
    pointer-events: none;            /* le clic appartient au bouton */
}
#header .nav-collapse ul#nav-second .lq-avatar > span.lq-avatar__caret svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    -webkit-transition: -webkit-transform .18s ease;
    transition: transform .18s ease;
}
/* Menu ouvert : le chevron se retourne */
#header .nav-collapse ul#nav-second .lq-avatar[aria-expanded="true"] > span.lq-avatar__caret svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
/* Libellé lecteur d'écran */
#header .nav-collapse ul#nav-second .lq-avatar .lq-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Conteneur du bloc compte ────────────────────
   Desktop : se comporte comme le bouton qu'il enveloppe (flex centré),
   reste statique -> le panneau flottant continue de se positionner par
   rapport au <li>. Le fond propre n'est posé que dans le tiroir mobile. */
#header .nav-collapse ul#nav-second .lq-account-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: static;
    padding: 0;
    margin: 0;
    background: none;
}

/* ── Panneau du sous-menu compte ────────────────── */
#header .nav-collapse ul#nav-second .lq-account-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1200;
    width: 280px;                   /* 250 -> 280 : un courriel tient sur 2 lignes sans être coupé */
    margin-top: 12px;
    padding: 0;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
    box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
    overflow: hidden;
    text-align: left;
}
#header .nav-collapse ul#nav-second .lq-account-menu[hidden] { display: none !important; }

/* En-tête du panneau : rond + identité.
   Tout est en !important : main.css cible les <span> du nav (majuscules,
   float, line-height) et gagne sinon sur ces sélecteurs. Les symptômes
   observés — nom en capitales, texte débordant du panneau, rond passé
   sous le nom — venaient tous de là.                                    */
#header .nav-collapse ul#nav-second .lq-account-head {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 16px 18px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ececec !important;
    float: none !important;
    overflow: hidden !important;
}
/* Rond d'initiales du panneau (plus grand que celui de la barre) */
#header .nav-collapse ul#nav-second .lq-account-pic {
    -webkit-box-sizing: border-box;
    box-sizing: border-box !important;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 12px 0 0 !important;
    border-radius: 50% !important;
    background: #f26c4f !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;      /* centrage : pas d'interligne parasite */
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    float: none !important;
    position: static !important;
}
/* Bloc texte : min-width 0 -> la troncature fonctionne dans un conteneur flex */
#header .nav-collapse ul#nav-second .lq-account-ident {
    display: block !important;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    text-align: left !important;
}
/* Sans nom connu : le courriel seul, centré horizontalement */
#header .nav-collapse ul#nav-second .lq-account-head--mailonly .lq-account-ident {
    text-align: center !important;
}
/* Nom : une seule ligne, tronquée proprement si trop long */
#header .nav-collapse ul#nav-second .lq-account-name {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #1f1f1f !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;   /* main.css met le nav en capitales */
    float: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Courriel : jamais tronqué par des points de suspension — une adresse
   coupée n'est pas lisible. Il passe à la ligne, au maximum sur 2 lignes. */
#header .nav-collapse ul#nav-second .lq-account-mail {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 3px 0 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #888 !important;         /* couleur marque, comme la maquette */
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    float: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

/* La liste du panneau : une entrée par ligne, pleine largeur.
   Les liens doivent aussi être « défloatés » : main.css float les <a> du nav. */
#header .nav-collapse ul#nav-second .lq-account-menu ul {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none !important;
    float: none !important;
}
#header .nav-collapse ul#nav-second .lq-account-menu ul > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    line-height: normal !important;
    white-space: normal !important;
}
#header .nav-collapse ul#nav-second .lq-account-menu a {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;        /* icône + libellé sur une ligne, alignés */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box !important;
    padding: 7px 20px !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #2b2b2b !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    -webkit-transition: background-color .12s ease;
    transition: background-color .12s ease;
}
#header .nav-collapse ul#nav-second .lq-account-menu a:hover,
#header .nav-collapse ul#nav-second .lq-account-menu a:focus {
    background: #f6f2f0 !important;
    color: #000 !important;
}
/* Icône de chaque entrée : gouttière de largeur fixe -> les libellés
   restent alignés entre eux, quelle que soit la largeur du glyphe. */
#header .nav-collapse ul#nav-second .lq-account-menu a > i {
    -ms-flex: 0 0 18px;
    flex: 0 0 18px;
    width: 18px !important;
    margin-right: 11px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #666 !important;      /* discrète : le libellé reste le repère */
    -webkit-transition: color .12s ease;
    transition: color .12s ease;
}
#header .nav-collapse ul#nav-second .lq-account-menu a:hover > i,
#header .nav-collapse ul#nav-second .lq-account-menu a:focus > i {
}

#header .nav-collapse ul#nav-second .lq-account-foot {
    border-top: 1px solid #ececec;
    padding: 8px 0;
    overflow: hidden; /* contient un éventuel float résiduel */
}
#header .nav-collapse ul#nav-second .lq-account-foot a { color: #8a8a8a !important; }

/* ── Hamburger : icône Font Awesome au lieu de hamburger.gif ─────
   main.css masque le libellé avec text-indent:-9999px et pose l'image
   en background : les deux doivent sauter, sinon l'icône est invisible
   et le GIF reste derrière.

   ATTENTION : ne JAMAIS toucher au `display` de .nav-toggle hors media query.
   responsive-nav.js teste le display calculé du hamburger pour décider s'il
   replie la navigation : le forcer en flex au desktop fait disparaître tout
   le menu. Le centrage flex est donc posé dans le bloc mobile plus bas.   */
#header .nav-toggle {
    -webkit-box-sizing: border-box;
    box-sizing: border-box !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: #fff !important;
    text-decoration: none !important;
}
#header .nav-toggle i {
    display: block !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* ── Rond d'initiales mobile (barre, à gauche du hamburger) ──────
   Masqué au-dessus de 800px : à cette taille, le rond du nav et son
   sous-menu prennent le relais.                                    */
#header .lq-avatar-mobile { display: none !important; }

/* ── Mobile : menu replié par responsiveNav ─────── */
@media screen and (max-width: 800px) {
    /* Centrage de l'icône : uniquement ici, là où le hamburger est visible.
       Centrage vertical : la hauteur de la barre est donnée par le logo
       (#logo = 12px + 24px d'image + 8px = 44px, cf. main.css). Le bouton
       fait 40px -> 2px de marge haute le place au milieu. */
    #header .nav-toggle {
        margin: 4px 0 0 0 !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center !important;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center !important;
    }
    #header .lq-avatar-mobile {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center !important;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center !important;
        -webkit-box-sizing: border-box;
        box-sizing: border-box !important;
        float: right !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 6px 4px 0 0 !important;   /* 3px : recale sur les 40px du hamburger */
        /* Valeurs reprises telles quelles du rond desktop (.lq-avatar) :
           fond --brand-dark, initiales blanches en 900 / .85rem, liseré
           blanc de 2px, et la même transition de 300 ms. */
        border: 2px solid rgba(255,255,255,1) !important;
        border-radius: 50% !important;
        background: var(--brand-dark, #d9563b) !important;
        color: #fff !important;
        font-size: .8rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        -webkit-transition: background-color .30s ease, border-color .30s ease;
        transition: background-color .30s ease, border-color .30s ease;
    }
    /* Même survol que le rond desktop */
    #header .lq-avatar-mobile:hover,
    #header .lq-avatar-mobile:focus {
        background: rgba(255, 255, 255, .22) !important;
        border-color: #fff !important;
        color: #fff !important;
        -webkit-box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
        text-decoration: none !important;
    }
}
/* Libellé lecteur d'écran du rond mobile : la règle .lq-sr-only existante est
   limitée au nav, et ce rond vit en dehors -> sans ceci, le texte s'afficherait. */
#header .lq-avatar-mobile .lq-sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media screen and (max-width: 800px) {
    .nav-collapse.opened{
        margin: 0 !important;
    }

    #header .nav-collapse ul#nav-second {
        display: block !important;
        float: none;
        padding: 0 !important;
    }
    #header .nav-collapse ul#nav-second > li,
    #header .nav-collapse ul#nav-second > li.extra {
        display: block !important;
        margin: 0 !important;
        width: 100%;
    }
    #header .nav-collapse ul#nav-second > li + li { margin-left: 0 !important; }
    #header .nav-collapse ul#nav-second > li.subscription > a {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center !important;
    }
    #header .nav-collapse ul#nav-second .lq-account-menu {
        position: static;
        width: auto;
        margin-top: 8px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid #e3ddda;
        border-radius: 6px;
    }
}

/* ══ Tiroir mobile : entrées de menu et sous-menu Ressources ═════
   Reprend la maquette : lignes pleine largeur, filets discrets,
   entrée active soulignée d'un filet blanc à gauche, chevron à
   droite pour Ressources, sous-menu indenté sur fond plus soutenu. */
@media screen and (max-width: 800px) {

    /* Lignes du menu. Les <li> RESTENT flottants (main.css) : les
       déflotter les ferait remonter les uns sur les autres. On force
       seulement la pleine largeur (92% par défaut) et le retour à la
       ligne, et on remplace le pointillé blanc par un filet discret. */
    #header .nav-collapse ul#nav-main > li {
        float: left !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,.18) !important;
    }
    #header .nav-collapse ul#nav-main > li > a {
        -webkit-box-sizing: border-box;
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        padding: 16px 18px !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        text-decoration: none !important;
    }
    #header .nav-collapse ul#nav-main > li > a:hover {
        background: rgba(0,0,0,.10) !important;
    }

    /* Entrée active : fond plus soutenu + filet blanc à gauche.
       box-shadow inset plutôt que border-left : aucun décalage du texte. */
    #header .nav-collapse ul#nav-main > li.active > a {
        background: rgba(0,0,0,.16) !important;
        -webkit-box-shadow: inset 4px 0 0 #fff;
        box-shadow: inset 4px 0 0 #fff !important;
    }

    /* Ressources : libellé à gauche, chevron collé à droite */
    #header .nav-collapse ul#nav-main > li.dropdown-guide > a {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center !important;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between !important;
    }
    #header .nav-collapse ul#nav-main > li.dropdown-guide > a i.fa-chevron-down {
        font-size: 12px !important;
        -webkit-transition: -webkit-transform .18s ease;
        transition: transform .18s ease;
    }
    #header .nav-collapse ul#nav-main > li.dropdown-guide.open > a i.fa-chevron-down {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg) !important;
    }

    /* Sous-menu Ressources : fond plus soutenu, entrées indentées.
       main.css lui donne, en mobile, un margin-left de 4rem et, en
       desktop, une carte blanche flottante avec flèche : on remet tout
       à plat ici. */
    #header .nav-collapse ul#nav-main > li.dropdown-guide > ul.submenu-guide {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,.14) !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        position: static !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
    #header .nav-collapse ul#nav-main > li.dropdown-guide.open > ul.submenu-guide {
        display: block !important;
    }
    #header .nav-collapse ul#nav-main .submenu-guide::before { display: none !important; }
    #header .nav-collapse ul#nav-main .submenu-guide > li {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    #header .nav-collapse ul#nav-main .submenu-guide > li > a {
        -webkit-box-sizing: border-box;
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        padding: 13px 18px 13px 34px !important;   /* 34px = décrochage sous le libellé parent */
        color: rgba(255,255,255,.92) !important;
        background: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
    }
    #header .nav-collapse ul#nav-main .submenu-guide > li > a:hover {
        background: rgba(0,0,0,.12) !important;
        color: #fff !important;
    }
}

/* ══ Tiroir mobile : CTA en bouton + bloc membre déplié ══════════ */
@media screen and (max-width: 800px) {

    /* ── 0. Le tiroir doit contenir ses flottants ────────────────
       .nav-collapse li / a sont flottants dans main.css. Sans
       confinement, ul#nav-main retombe à une hauteur de 0 : ses
       entrées débordent et le bloc compte vient se superposer à
       elles. overflow:hidden referme le conteneur sur ses flottants,
       clear:both pose la section membre dessous. Aucune règle
       d'apparence n'est touchée sur À louer → Ressources.        */
    #header .nav-collapse ul#nav-main {
        overflow: hidden !important;
        width: 100% !important;
        float: none !important;
    }
    #header .nav-collapse ul#nav-second {
        clear: both !important;
        width: 100% !important;
    }

    /* ── 1. « Placer une annonce » : bouton blanc pleine largeur ── */
    #header .nav-collapse ul#nav-main > li.subscription {
        padding: 0 !important;
        border: 0 !important;
    }
    #header .nav-collapse ul#nav-main > li.subscription > a {
        display: block !important;
        float: none !important;
        -webkit-box-sizing: border-box;
        box-sizing: border-box !important;
        width: auto !important;
        margin: 14px 16px !important;
        padding: 15px 16px !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: #D13210 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .06em !important;
        line-height: 1 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }
    #header .nav-collapse ul#nav-main > li.subscription > a:hover {
        background: var(--brand-light, #f7d9d1) !important;
        color: #D13210 !important;
    }

    /* ── 2. Membre connecté : le panneau compte est toujours ouvert ──
       Dans le tiroir, le rond d'initiales ferait doublon avec celui de
       la barre, et son chevron ouvrirait un menu déjà déplié : on le
       masque et on force le panneau visible malgré l'attribut [hidden]. */
    #header .nav-collapse ul#nav-second .lq-avatar { display: none !important; }

    /* Fond propre à la section membre du tiroir.
       Une seule valeur à changer ici (ou définir --lq-account-bg ailleurs).
       Le fond est posé sur .lq-account-box ET sur le panneau : le premier
       couvre la zone quand le rond est masqué, le second garantit la
       couleur même si un style tiers remet un fond sur le panneau.      */
    #header .nav-collapse ul#nav-second .lq-account-box {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: var(--lq-account-bg, #c1512f) !important;
    }

    #header .nav-collapse ul#nav-second .lq-account-menu,
    #header .nav-collapse ul#nav-second .lq-account-menu[hidden] {
        display: block !important;
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
/*        border-top: 1px solid rgba(255,255,255,.28) !important;*/
        border-radius: 0 !important;
        background-color: var(--lq-account-bg, #c1512f) !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* En-tête : rond blanc à initiales colorées, nom blanc, courriel atténué */
    #header .nav-collapse ul#nav-second .lq-account-head {
        padding: 16px 16px 14px !important;
        border-bottom: 1px solid rgba(255,255,255,.22) !important;
    }
    #header .nav-collapse ul#nav-second .lq-account-pic {
        background: #fff !important;
        color: #D13210 !important;
    }
    #header .nav-collapse ul#nav-second .lq-account-name { color: #fff !important; }
    #header .nav-collapse ul#nav-second .lq-account-mail { color: rgba(255,255,255,.78) !important; }

    /* Entrées : pleine largeur, texte blanc, sans icône (cf. maquette) */
    #header .nav-collapse ul#nav-second .lq-account-menu ul { padding: 4px 0 !important; }
    #header .nav-collapse ul#nav-second .lq-account-menu a {
        padding: 13px 16px !important;
        color: #fff !important;
        font-size: 14.5px !important;
        background: none !important;
    }
    #header .nav-collapse ul#nav-second .lq-account-menu a:hover,
    #header .nav-collapse ul#nav-second .lq-account-menu a:focus {
        background: rgba(255,255,255,.12) !important;
        color: #fff !important;
    }
    #header .nav-collapse ul#nav-second .lq-account-menu a > i { display: none !important; }

    #header .nav-collapse ul#nav-second .lq-account-foot {
        padding: 4px 0 !important;
        border-top: 1px solid rgba(255,255,255,.22) !important;
    }
    #header .nav-collapse ul#nav-second .lq-account-foot a { color: rgba(255,255,255,.72) !important; }

    /* ── 3. Visiteur non connecté : « Se connecter » en bouton ───────
       Même gabarit que « Placer une annonce » juste au-dessus, mais en
       version secondaire : contour blanc sur fond transparent, pour que
       les deux actions se lisent comme une paire hiérarchisée.        */
    #header .nav-collapse ul#nav-second > li.lq-account > a.lq-login-link {
        display: block !important;
        -webkit-box-sizing: border-box;
        box-sizing: border-box !important;
        width: auto !important;
        height: auto !important;
        margin: 0 16px 14px !important;
        padding: 13px 16px !important;
        border: 2px solid #fff !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .06em !important;
        line-height: 1 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        -webkit-transition: background-color .15s ease;
        transition: background-color .15s ease;
    }
    #header .nav-collapse ul#nav-second > li.lq-account > a.lq-login-link:hover,
    #header .nav-collapse ul#nav-second > li.lq-account > a.lq-login-link:focus {
        background: rgba(255,255,255,.16) !important;
        color: #fff !important;
    }
    /* Le <li> ne doit plus ajouter d'écart : le bouton porte sa marge, et
       la section membre (connecté) se cale bord à bord avec son fond. */
    #header .nav-collapse ul#nav-second > li.lq-account { margin: 0 !important; }

    /* ── Gabarit commun aux deux boutons ─────────────────────────
       « Placer une annonce » et « Se connecter » vivent dans deux <ul>
       distincts, dont les <li> héritent de retraits différents
       (.nav-collapse li { padding: 0 10px } dans main.css). On remet
       tous les retraits à zéro et on laisse les 16px de marge du bouton
       seuls maîtres de la largeur : les deux deviennent identiques et
       centrés, quel que soit le conteneur.                          */
    #header .nav-collapse ul#nav-main,
    #header .nav-collapse ul#nav-second {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #header .nav-collapse ul#nav-main > li.subscription,
    #header .nav-collapse ul#nav-second > li.lq-account {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Le flottement se règle par liste, pas en commun :
       - nav-main : ses <li> sont flottants (main.css). Déflotter celui-ci
         le remonterait en haut du conteneur, par-dessus les entrées, et le
         fond du bouton s'étirerait jusqu'à sa ligne de texte. On le garde
         donc flottant, en pleine largeur et avec clear:both -> il occupe
         sa propre ligne.
       - nav-second : ses <li> sont déjà en display:block, sans flottement. */
    #header .nav-collapse ul#nav-main > li.subscription {
        float: left !important;
        clear: both !important;
    }
    #header .nav-collapse ul#nav-second > li.lq-account {
        float: none !important;
        clear: both !important;
    }
    #header .nav-collapse ul#nav-main > li.subscription > a,
    #header .nav-collapse ul#nav-second > li.lq-account > a.lq-login-link {
        -webkit-box-sizing: border-box;
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
        width: auto !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}

/* ── Alignement vertical de la barre + CTA poussé à droite (desktop) ── */
@media screen and (min-width: 801px) {
    #header .nav-collapse {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center !important;
    }
    #header .nav-collapse ul#nav-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center !important;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        float: none !important;
        margin: 0 !important;
    }
    #header .nav-collapse ul#nav-main > li {
        float: none !important;
        position: relative;
    }
    /* Pousse « Placer une annonce » au bout de la rangée, juste avant le rond */
    #header .nav-collapse ul#nav-main > li.subscription {
        margin-left: auto !important;
        margin-right: 14px !important;
    }
    #header .nav-collapse ul#nav-second {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        float: none !important;
    }
}

@media screen and (min-width: 980px) {
    .nav-collapse li.subscription a {
        background-color: #fff;
        color: #D13210;
        font-weight: 700;
        margin-top: 0;
    }

    .nav-collapse li.subscription a:hover {
        background-color: var(--brand-light) !important;
        color: #D13210;
    }
}
