/* ════════════════════════════════════════════════════════════ DECISIO.BE — nav.css Navigation, sélecteur de langue, menu burger, panneau de recherche et bandeau de repli linguistique. Ces règles vivaient en ligne dans le de includes/header.php : 12,7 Ko renvoyés à l'identique sur CHAQUE page, jamais mis en cache. Contrairement à ce qu'on pouvait croire, ce n'était pas un doublon de main.css — 48 des 88 sélecteurs n'existaient que là. Le fichier est donc déplacé tel quel, pas fusionné. Il est chargé APRÈS main.css, components.css et le CSS de page, comme l'était le bloc en ligne : l'ordre de cascade est identique. ════════════════════════════════════════════════════════════ */ /* ─── BANNER FALLBACK ─────────────────────────────────── */ .fallback-banner { background: #fff8e1; border-bottom: 1px solid #f5d76e; padding: 10px 20px; font-family: var(--font-body); font-size: 13px; color: #5d4e10; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; z-index: 99; } .fallback-banner-icon { font-size: 14px; flex-shrink: 0; } .fallback-banner-text { flex: 1; text-align: center; max-width: 800px; line-height: 1.4; } .fallback-banner-close { background: transparent; border: none; cursor: pointer; font-size: 18px; color: #5d4e10; min-width: 40px; min-height: 40px; padding: 4px 8px; border-radius: 4px; line-height: 1; flex-shrink: 0; transition: background 0.15s; } .fallback-banner-close:hover { background: rgba(93, 78, 16, 0.1); } .fallback-banner.hidden { display: none !important; } @media (max-width: 600px) { .fallback-banner { padding: 10px 12px; font-size: 12px; gap: 8px; } .fallback-banner-text { text-align: left; } } /* ─── NAV PRINCIPALE ──────────────────────────────────── */ .main-nav{position:sticky;top:0;left:0;right:0;z-index:var(--z-nav);background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:var(--border)} .main-nav .nav-container{max-width:var(--max-width,1400px);margin:0 auto;padding:0 28px;height:var(--nav-height,72px);display:flex;align-items:center;gap:24px} .main-nav .nav-logo{flex-shrink:0;text-decoration:none;color:inherit} .main-nav .logo-text{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px;color:var(--black,#1a1a1a)} .main-nav .logo-o{color:var(--accent,#e8462a)} .main-nav .nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex:1} .main-nav .nav-links li{list-style:none;margin:0;padding:0} .main-nav .nav-links li::before{display:none;content:none} .main-nav .nav-links a{display:inline-flex;align-items:center;padding:8px 14px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--black,#1a1a1a);text-decoration:none;border-radius:100px;transition:background .15s ease,color .15s ease} .main-nav .nav-links a:hover{background:var(--cream,#f5f0e8);color:var(--black,#1a1a1a)} .main-nav .nav-links a.active,.main-nav .nav-themes-btn.active{background:var(--cream,#f5f0e8);color:var(--accent-text,#c73d24);font-weight:600} .main-nav .nav-links a.active{box-shadow:inset 0 0 0 1.5px rgba(199,61,36,.25)} .main-nav .nav-burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:13px 9px;margin-left:0;border-radius:10px} .main-nav .nav-burger:hover{background:var(--cream,#f5f0e8)} .main-nav .nav-burger span{display:block;height:2px;width:100%;background:var(--black,#1a1a1a);border-radius:2px;transition:transform .25s ease,opacity .2s ease} .main-nav .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .main-nav .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .main-nav .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* Calque de fermeture : le menu mobile ne se fermait qu'en retouchant le burger. */ .nav-scrim{position:fixed;inset:var(--nav-height,72px) 0 0;z-index:var(--z-scrim);background:rgba(26,26,26,.45);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;-webkit-tap-highlight-color:transparent} .nav-scrim.active{opacity:1;visibility:visible} @media (min-width:901px){.nav-scrim{display:none}} /* ─── SÉLECTEUR DE LANGUE ─────────────────────────────── */ .lang-switcher{position:relative;flex-shrink:0;list-style:none} .lang-switcher *{list-style:none} .lang-current{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--black,#1a1a1a);background:transparent;border:1.5px solid rgba(0,0,0,.1);border-radius:100px;cursor:pointer;transition:all .2s ease;line-height:1} .lang-current:hover{background:var(--cream,#f5f0e8);border-color:rgba(0,0,0,.2)} .lang-current .lang-short{font-weight:700} .lang-current .lang-flag{display:inline-flex;align-items:center;line-height:1} .lang-current .lang-chevron{transition:transform .2s ease;opacity:.6} .lang-current[aria-expanded="true"] .lang-chevron{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:6px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:var(--z-dropdown)} .lang-menu.open{opacity:1;visibility:visible;transform:translateY(0)} .lang-menu li{list-style:none;margin:0;padding:0} .lang-menu li::before{display:none;content:none} .lang-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--black,#1a1a1a);text-decoration:none;border-radius:8px;transition:background .15s ease} .lang-menu a:hover,.lang-menu a:focus-visible{background:var(--cream,#f5f0e8);color:var(--black,#1a1a1a)} .lang-menu .lang-short{font-weight:700;font-size:12px;letter-spacing:.5px;min-width:22px;color:var(--muted,#6b6b6b)} .lang-menu .lang-flag{display:inline-flex;align-items:center;line-height:1} .lang-menu .lang-name{flex:1} /* ─── SOUS-MENU THÈMES ────────────────────────────────── */ .nav-item-themes{position:relative;list-style:none} .nav-item-themes::before{display:none;content:none} .nav-themes-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--black,#1a1a1a);background:transparent;border:none;cursor:pointer;border-radius:100px;transition:background .15s ease;line-height:1} .nav-themes-btn:hover{background:var(--cream,#f5f0e8)} .nav-themes-btn .nav-chevron{transition:transform .2s ease;opacity:.55} .nav-themes-btn[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)} .themes-submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:272px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:6px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:var(--z-dropdown)} .themes-submenu.open{opacity:1;visibility:visible;transform:translateY(0)} .themes-submenu li{list-style:none;margin:0;padding:0} .themes-submenu li::before{display:none;content:none} .themes-submenu a{display:flex;align-items:center;gap:10px;padding:10px 12px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--black,#1a1a1a);text-decoration:none;border-radius:8px;transition:background .15s ease} .themes-submenu a:hover,.themes-submenu a:focus-visible{background:var(--cream,#f5f0e8)} .themes-submenu .themes-emoji{font-size:16px;width:20px;text-align:center;flex-shrink:0} .themes-submenu-all{border-top:1px solid rgba(0,0,0,.08);margin-top:6px;padding-top:6px} .themes-submenu-all a{font-size:13px;color:var(--muted,#6b6b6b);font-weight:600} /* ─── RECHERCHE INTERNE ───────────────────────────────── */ /* Bouton dans la nav + panneau plein écran. Voir js/search.js. */ .search-open-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--muted,#6b6b6b);background:var(--cream,#f5f0e8);border:1px solid rgba(0,0,0,.08);border-radius:100px;cursor:pointer;transition:color .15s ease,border-color .15s ease;line-height:1} .search-open-btn:hover{color:var(--black,#1a1a1a);border-color:rgba(0,0,0,.24)} .search-open-btn svg{flex-shrink:0;opacity:.7} .search-open-label{white-space:nowrap} .search-kbd{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid rgba(0,0,0,.14);border-radius:5px;background:#fff;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--muted,#6b6b6b)} .search-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(26,26,26,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:clamp(24px,8dvh,96px) 20px 20px} .search-overlay[hidden]{display:none} body.search-open{overflow:hidden} .search-panel{width:100%;max-width:640px;background:#fff;border:1.5px solid var(--black,#1a1a1a);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.24);overflow:hidden} .search-field{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(0,0,0,.08)} .search-field svg{flex-shrink:0;opacity:.5} .search-field input{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:17px;color:var(--black,#1a1a1a);min-width:0} .search-field input::placeholder{color:var(--muted,#6b6b6b);opacity:1} .search-close{flex-shrink:0;min-height:36px;padding:8px 12px;background:var(--cream,#f5f0e8);border:1px solid rgba(0,0,0,.1);border-radius:7px;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--muted,#6b6b6b);cursor:pointer} .search-close:hover{color:var(--black,#1a1a1a)} .search-results{list-style:none;margin:0;padding:6px;max-height:min(52dvh,420px);overflow-y:auto} .search-results[hidden]{display:none} .search-results li{list-style:none;margin:0;padding:0} .search-results li::before{display:none;content:none} .search-result a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--black,#1a1a1a)} .search-result.is-active a{background:var(--cream,#f5f0e8)} .search-result-title{font-family:var(--font-body);font-size:14.5px;font-weight:500;line-height:1.4} .search-result-title mark{background:rgba(232,70,42,.16);color:inherit;padding:0 1px;border-radius:3px} .search-result-theme{flex-shrink:0;font-family:var(--font-body);font-size:11.5px;font-weight:600;color:var(--muted,#6b6b6b);white-space:nowrap} .search-status{padding:18px;font-family:var(--font-body);font-size:14px;color:var(--muted,#6b6b6b);text-align:center} .search-status[hidden]{display:none} .search-hint{padding:10px 18px;border-top:1px solid rgba(0,0,0,.08);background:var(--cream,#f5f0e8);font-family:var(--font-body);font-size:12px;color:var(--muted,#6b6b6b)} /* ─── MOBILE ──────────────────────────────────────────── */ @media (max-width:900px){ .main-nav .nav-container{padding:0 16px;gap:12px} .main-nav .nav-burger{display:flex} .main-nav .nav-links{position:fixed;top:var(--nav-height,72px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:12px 16px 24px;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow-pop);max-height:calc(100dvh - var(--nav-height,72px));overflow-y:auto;overscroll-behavior:contain;z-index:calc(var(--z-scrim) + 1);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s} .main-nav .nav-links.open{transform:translateY(0);opacity:1;visibility:visible} .main-nav .nav-links a{padding:14px 16px;font-size:16px;border-radius:10px} .lang-current{min-height:44px;padding:6px 12px;font-size:12px} .lang-menu{min-width:160px} /* Thèmes : sous-menu déplié en statique dans le panneau burger */ .nav-item-themes{width:100%} .nav-themes-btn{width:100%;justify-content:space-between;padding:14px 16px;font-size:16px;border-radius:10px} .nav-themes-btn .nav-chevron{display:none} /* `visibility:visible` reprenait la main sur le `visibility:hidden` du panneau burger fermé : les liens du sous-menu restaient cliquables par-dessus le contenu de la page. `inherit` suit l'état du panneau. */ .themes-submenu{position:static;opacity:1;visibility:inherit;transform:none;box-shadow:none;border:none;border-radius:0;padding:0 0 6px 10px;min-width:0} .themes-submenu a{font-size:15px;padding:10px 12px} /* Recherche : la loupe seule, le raccourci clavier n'a pas de sens ici */ .search-open-btn{margin-left:auto;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%} .search-open-label,.search-kbd{display:none} .lang-switcher{margin-left:0} .search-overlay{padding:0} .search-panel{max-width:none;height:100%;border:none;border-radius:0;display:flex;flex-direction:column} .search-results{max-height:none;flex:1} }