/* ========================================================================== LogementLille — header unifié et responsive Remplace les 3 variantes de header qui coexistaient sur les 67 pages. Hauteur conservée à 68px pour que les spacers existants restent valides. Classes préfixées .lfh- pour ne heurter aucune règle des styles inline. IMPORTANT : le tiroir et le voile sont déplacés dans par site-header.js. Un élément portant backdrop-filter devient le bloc conteneur de ses descendants position:fixed ; restés dans .lfh, ils se dimensionnaient donc dans une boîte de 68px de haut au lieu du viewport. Leurs sélecteurs ne doivent par conséquent PAS être imbriqués sous .lfh. ========================================================================== */ .lfh{ position:fixed; top:0; left:0; right:0; z-index:300; height:68px; display:flex; align-items:center; background:rgba(250,248,244,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid #e5e1d8; font-family:'DM Sans',system-ui,sans-serif; } .lfh *{box-sizing:border-box;} .lfh .lfh-in{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; } /* Logo : le favicon renvoie à l'accueil */ .lfh .lfh-logo{ display:inline-flex; align-items:center; flex-shrink:0; border-radius:9px; line-height:0; text-decoration:none; transition:transform .18s ease, opacity .18s ease; } .lfh .lfh-logo:hover{transform:translateY(-1px);opacity:.85;} .lfh .lfh-logo img{width:36px;height:36px;display:block;border-radius:8px;} /* Navigation bureau */ .lfh .lfh-nav{display:flex;align-items:center;gap:22px;} .lfh .lfh-nav a{ font-size:.86rem; font-weight:500; color:#0f1117; opacity:.7; text-decoration:none; white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; transition:opacity .18s ease,border-color .18s ease; } .lfh .lfh-nav a:hover{opacity:1;border-bottom-color:#c63727;} .lfh .lfh-nav a[aria-current="page"]{opacity:1;border-bottom-color:#c63727;font-weight:600;} /* Menu deroulant « Par ville » Sept entrees saturaient deja la barre au-dessus de 901px : les trois pages ville sont regroupees sous un bouton plutot que posees a plat, ce qui aurait fait deborder la navigation sur les ecrans intermediaires. */ .lfh .lfh-drop{position:relative;display:flex;align-items:center;} .lfh .lfh-drop-btn{ display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:.86rem; font-weight:500; color:#0f1117; opacity:.7; background:none; border:0; cursor:pointer; white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; transition:opacity .18s ease,border-color .18s ease; } .lfh .lfh-drop-btn:hover{opacity:1;border-bottom-color:#c63727;} .lfh .lfh-drop-btn[aria-expanded="true"]{opacity:1;border-bottom-color:#c63727;} .lfh .lfh-drop-btn::after{ content:''; width:6px; height:6px; margin-top:-3px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; } .lfh .lfh-drop-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:2px;} .lfh .lfh-drop-menu{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px); min-width:210px; background:#fff; border:1px solid #e5e1d8; border-radius:12px; box-shadow:0 14px 40px rgba(15,17,23,.14); padding:8px; z-index:60; opacity:0; visibility:hidden; transition:opacity .18s ease,transform .18s ease,visibility .18s; } .lfh .lfh-drop-menu.is-open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} .lfh .lfh-drop-menu a{ display:block; padding:9px 12px; border-radius:8px; border-bottom:0; font-size:.85rem; opacity:.85; white-space:nowrap; } .lfh .lfh-drop-menu a:hover{background:#f3efe8;opacity:1;border-bottom-color:transparent;} .lfh .lfh-drop-menu a[aria-current="page"]{background:#f3efe8;opacity:1;font-weight:600;} @media (prefers-reduced-motion:reduce){ .lfh .lfh-drop-menu,.lfh .lfh-drop-btn::after{transition:none;} } /* Bouton burger */ .lfh .lfh-burger{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; padding:0; margin-right:-10px; background:none; border:none; cursor:pointer; } .lfh .lfh-burger span{ display:block; width:24px; height:2px; background:#0f1117; border-radius:2px; transition:transform .25s ease, opacity .2s ease; } .lfh .lfh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .lfh .lfh-burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .lfh .lfh-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* -------------------------------------------------------------------------- Voile et tiroir : enfants directs de , donc sélecteurs non imbriqués -------------------------------------------------------------------------- */ .lfh-scrim{ position:fixed; top:68px; left:0; right:0; bottom:0; z-index:1190; background:rgba(15,17,23,.45); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; } .lfh-scrim.is-open{opacity:1;visibility:visible;} .lfh-drawer{ position:fixed; top:68px; right:0; bottom:0; z-index:1200; width:min(88vw,340px); max-width:100%; background:#faf8f4; border-left:1px solid #e5e1d8; box-shadow:-14px 0 40px rgba(15,17,23,.18); font-family:'DM Sans',system-ui,sans-serif; display:flex; flex-direction:column; padding:10px 0 28px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; transform:translateX(100%); visibility:hidden; transition:transform .28s cubic-bezier(.4,0,.2,1), visibility .28s; } .lfh-drawer,.lfh-drawer *{box-sizing:border-box;} .lfh-drawer.is-open{transform:translateX(0);visibility:visible;} .lfh-drawer-top{ display:flex; align-items:center; justify-content:space-between; padding:6px 20px 12px; border-bottom:1px solid #e5e1d8; margin-bottom:8px; flex-shrink:0; } .lfh-drawer-title{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9a9490; } .lfh-close{ width:40px; height:40px; margin-right:-8px; flex-shrink:0; background:none; border:none; cursor:pointer; font-size:1.6rem; line-height:1; color:#5a5650; border-radius:8px; } .lfh-close:hover{color:#0f1117;background:#f3efe8;} .lfh-drawer a{ display:flex; align-items:center; min-height:48px; flex-shrink:0; padding:0 20px; font-size:.98rem; font-weight:500; color:#0f1117; text-decoration:none; border-bottom:1px solid rgba(229,225,216,.6); } .lfh-drawer a:last-child{border-bottom:none;} .lfh-drawer a:hover{background:#f3efe8;color:#c63727;} .lfh-drawer a[aria-current="page"]{color:#c63727;font-weight:600;background:#f3efe8;} /* -------------------------------------------------------------------------- Bascule responsive : sous 900px les 7 liens ne tiennent plus sur une ligne -------------------------------------------------------------------------- */ @media (max-width:900px){ .lfh .lfh-nav{display:none;} .lfh .lfh-burger{display:flex;} } @media (min-width:901px){ /* Au-dessus du point de bascule le tiroir ne doit jamais apparaître */ .lfh-drawer,.lfh-scrim{display:none;} } @media (max-width:420px){ .lfh .lfh-in{padding:0 16px;} .lfh .lfh-logo img{width:32px;height:32px;} } /* Verrou de défilement quand le tiroir est ouvert */ body.lfh-locked{overflow:hidden;} /* Mouvement réduit : on supprime les animations du tiroir */ @media (prefers-reduced-motion:reduce){ .lfh-drawer,.lfh-scrim,.lfh .lfh-burger span{transition:none!important;} } /* Impression : le header et ses surcouches n'ont pas à figurer sur le papier */ @media print{ .lfh,.lfh-drawer,.lfh-scrim{display:none!important;} } /* Etat au defilement (pilote par site-header.js) */ .lfh.lfh-scrolled{ background:rgba(250,248,244,.98); box-shadow:0 2px 18px rgba(15,17,23,.07); }