/* ========================================================= SITE PATCH — Sophie Coiffure FIX RÉEL du bug mobile-nav : `.site-header` a un `backdrop-filter`, ce qui crée un nouveau "containing block" pour `.main-nav` (position:fixed). Résultat : le panneau mobile se retrouve coincé dans les 82px du header au lieu de couvrir tout l'écran → un seul lien visible ("Accueil"). On déplace le flou sur un ::before, le header garde le même rendu visuel mais n'est plus un containing block. Ajoute ce fichier dans /assets/css/, lié dans le JUSTE APRÈS main.css : ========================================================= */ /* ---- FIX RESPONSIVE IMAGES ---- Les attributs width/height HTML (ajoutés pour éviter le CLS) deviennent une règle CSS implicite height:XXXpx si aucune règle ne la remplace. Cette règle globale corrige tous les endroits où l'image doit garder son ratio naturel (masonry, article-hero...). Les composants avec un style dédié (.hcard img, .intro-images img) restent inchangés car leur sélecteur est plus spécifique. */ img{ height: auto; max-width: 100%; } .site-header{ background: none !important; backdrop-filter: none !important; isolation: isolate; } .site-header::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(251,245,238,.86); backdrop-filter: blur(10px); } /* Filet de sécurité : si jamais un autre style venait encore limiter la hauteur du panneau mobile, on la force. */ @media (max-width:980px){ .main-nav{ top: 82px !important; bottom: 0 !important; height: auto !important; } } /* ---- ACCESSIBILITÉ : respecte la préférence "réduire les animations" ---- */ @media (prefers-reduced-motion: reduce){ .hero-video{ display: none !important; } .hero{ background-size: cover; background-position: center; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- ACCESSIBILITÉ : focus visible au clavier (souvent oublié) ---- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--terracotta, #b5622f); outline-offset: 2px; } /* ---- ACCESSIBILITÉ : lien "aller au contenu" pour clavier/lecteurs d'écran ---- */ .skip-link{ position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 12px 20px; z-index: 10000; border-radius: 0 0 8px 0; } .skip-link:focus{ left: 0; } /* ---- SÉLECTEUR DE LANGUE (dans le header) ---- */ .lang-switcher-wrap{ position:relative; } .lang-btn.is-open{ border-color:var(--terracotta); color:var(--terracotta); } .lang-dropdown{ position:absolute; top:calc(100% + 10px); right:0; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; gap:2px; min-width:170px; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:500; } .lang-dropdown.open{ opacity:1; transform:translateY(0); pointer-events:auto; } .lang-dropdown button{ display:flex; align-items:center; gap:10px; border:none; background:none; text-align:left; padding:10px 12px; border-radius:9px; font-size:.92rem; color:var(--ink); cursor:pointer; transition:background .15s; font-family:var(--sans); } .lang-dropdown button:hover, .lang-dropdown button:focus-visible{ background:var(--cream-deep); } .lang-dropdown button.is-active{ background:var(--cream); font-weight:600; } .lang-dropdown .flag{ font-size:1.1rem; line-height:1; } @media (max-width:980px){ .lang-dropdown{ right:auto; left:50%; transform:translate(-50%,-6px); } .lang-dropdown.open{ transform:translate(-50%,0); } } /* Nettoyage de l'UI par défaut de Google Translate */ .goog-te-banner-frame, .skiptranslate iframe{ display:none !important; } body{ top: 0 !important; } #google_translate_element{ display:none !important; }