/* ═══════════════════════════════════════════════════════════════ bw-nav.css — sidebar de navigation globale (toutes les pages) Chargé dans ; états posés par le snippet bw-nav-boot (html.bw-nav-on + html.bw-sb-open) puis gérés par bw-nav.js. Palette autonome (préfixe --bwn-) : cohérente site, clair + sombre. ═══════════════════════════════════════════════════════════════ */ :root{ --bwn-w:268px; --bwn-bg:#FAF9F6; --bwn-line:#ECEAE3; --bwn-text:#16161A; --bwn-mut:#6B6B74; --bwn-acc:#5F9424; --bwn-acc-bg:rgba(106,165,41,.1); --bwn-red:#B31B1B; --bwn-red-bg:rgba(200,30,30,.08); --bwn-red-line:rgba(200,30,30,.32); } :root[data-theme="dark"]{ --bwn-bg:#16171D; --bwn-line:#2C2E36; --bwn-text:#ECEBE6; --bwn-mut:#9A9AA2; --bwn-acc:#8FCC52; --bwn-acc-bg:rgba(124,189,63,.14); --bwn-red:#FF8F7D; --bwn-red-bg:rgba(224,73,43,.14); --bwn-red-line:rgba(224,73,43,.45); } /* ── anciennes navigations masquées (6 gabarits de header) ── */ html.bw-nav-on #header nav.main-nav, html.bw-nav-on #menu-toggle, html.bw-nav-on #mobile-menu, html.bw-nav-on header.site nav.main, html.bw-nav-on .mnav, html.bw-nav-on .mnav-toggle, html.bw-nav-on .mnav-backdrop, html.bw-nav-on #bw-header nav.bw-nav, html.bw-nav-on .bw-mm-nav, /* Le contenu du menu legacy de ressources.html etait masque, mais pas son bouton ni son voile : sous 860 px il restait un DEUXIEME hamburger a droite qui ouvrait un panneau vide et assombrissait l'ecran. Mesure : deux ☰ visibles a x=28 et x=288. Au-dessus de 860 px le bouton est deja masque par le CSS de la page — desktop inchange. */ html.bw-nav-on .bw-menu-toggle, html.bw-nav-on .bw-mobile-menu, html.bw-nav-on .bw-mm-backdrop, html.bw-nav-on header.site-header nav.nav{display:none!important} /* header compacté (la nav de section vit dans la sidebar) */ html.bw-nav-on #header .header-inner{gap:14px} @media(max-width:1150px){html.bw-nav-on.bw-sb-open #header .logo-name{display:none}} /* header d'article de blog : le space-between éparpillait ☰/marque/actions une fois la nav masquée → regrouper ☰+marque à gauche, actions à droite */ html.bw-nav-on header.site-header .wrap{justify-content:flex-start;gap:14px} html.bw-nav-on header.site-header .brand{margin-right:auto;min-width:0} /* mobile : ce header n'a pas de compression propre → masquer le texte de la marque (le logo reste) pour laisser la place aux contrôles + FR/EN */ @media(max-width:768px){html.bw-nav-on header.site-header .brand b{display:none}} /* ── décalage du contenu (desktop, sidebar ouverte) ── */ html.bw-nav-on body{transition:padding-left .22s ease} html.bw-nav-on.bw-sb-open body{padding-left:var(--bwn-w)} @media(max-width:768px){html.bw-nav-on.bw-sb-open body{padding-left:0}} html.bw-motion-off body{transition:none!important} /* ── ☰ (dans le header, ou flottant si la page n'a pas de header de nav) ── */ .bw-sb-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;background:transparent;border:1px solid var(--bwn-line);border-radius:11px;cursor:pointer;color:var(--bwn-text);margin-right:6px;transition:background .15s,border-color .15s,color .15s} .bw-sb-toggle:hover{background:var(--bwn-acc-bg)} .bw-sb-toggle[aria-expanded="true"]{background:var(--bwn-acc-bg);border-color:var(--bwn-acc);color:var(--bwn-acc)} .bw-sb-toggle:focus-visible{outline:2px solid var(--bwn-acc);outline-offset:2px} .bw-sb-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .bw-sb-toggle--float{position:fixed;top:14px;left:14px;z-index:99870;background:var(--bwn-bg);box-shadow:0 2px 12px rgba(0,0,0,.1)} /* pages sans en-tête (404, urgence, suivi) : le ☰ flottant occupe top/left 14px. On pousse les contrôles bw-core à sa droite pour qu'ils restent accessibles. */ html.bw-sb-float body > .bw-ctrls{left:68px} @media(max-width:360px){html.bw-sb-float body > .bw-ctrls{left:64px}} html.bw-motion-off .bw-sb-toggle{transition:none!important} /* mobile : tiroir ouvert → le ☰ (devenu ») remonte au-dessus du voile, en haut à droite ; c'est le seul bouton de fermeture, donc il doit rester atteignable */ @media(max-width:768px){html.bw-sb-open .bw-sb-toggle{position:fixed;top:12px;right:12px;left:auto;margin:0;z-index:99901;background:var(--bwn-bg);box-shadow:0 4px 16px rgba(0,0,0,.28)}} /* ── Sidebar ── */ #bw-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--bwn-w);z-index:99900;display:flex;flex-direction:column;background:var(--bwn-bg);border-right:1px solid var(--bwn-line);transform:translateX(-100%);transition:transform .22s ease;font-family:'Inter',system-ui,sans-serif;overflow:hidden} html.bw-sb-open #bw-sidebar{transform:none} html.bw-motion-off #bw-sidebar{transition:none!important} .bw-sb-head{display:flex;align-items:center;gap:10px;padding:12px 12px 8px 16px;flex:none} .bw-sb-brand{display:inline-flex;align-items:center;min-height:44px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--bwn-text);text-decoration:none;min-width:0} .bw-sb-close{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;background:transparent;border-radius:10px;color:var(--bwn-mut);cursor:pointer} .bw-sb-close:hover{background:var(--bwn-acc-bg);color:var(--bwn-acc)} .bw-sb-close:focus-visible{outline:2px solid var(--bwn-acc);outline-offset:2px} .bw-sb-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* urgence épinglée (jamais dans un sous-menu) */ .bw-sb-sos{flex:none;margin:2px 12px 10px;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 13px;border-radius:12px;background:var(--bwn-red-bg);border:1.5px solid var(--bwn-red-line);color:var(--bwn-red);font-weight:700;font-size:14px;text-decoration:none;line-height:1.25;min-width:0} .bw-sb-sos:hover{filter:brightness(1.02);background:var(--bwn-red-bg)} .bw-sb-sos svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* zone défilante (verticale UNIQUEMENT — jamais de barre horizontale) */ .bw-sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:2px 12px 12px;scrollbar-width:thin;min-width:0} /* sections */ .bw-sb-sec{margin:2px 0;min-width:0} /* Section sans sous-menu : pas de chevron, mais on reserve sa largeur (40 px + 2 px de gap). Sans cela, sa pastille de survol depasserait celle des autres rangees et la colonne paraitrait de travers. */ .bw-sb-seul .bw-sb-link{margin-right:42px} .bw-sb-row{display:flex;align-items:stretch;gap:2px;min-width:0} .bw-sb-link{position:relative;flex:1;display:flex;align-items:center;gap:11px;min-height:44px;padding:9px 11px;border-radius:11px;color:var(--bwn-text);text-decoration:none;font-weight:600;font-size:14.5px;line-height:1.25;min-width:0} .bw-sb-link>span{min-width:0;overflow-wrap:anywhere} .bw-sb-link:hover{background:var(--bwn-acc-bg)} .bw-sb-link:focus-visible{outline:2px solid var(--bwn-acc);outline-offset:-2px} .bw-sb-link svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--bwn-mut)} .bw-sb-link:hover svg{color:var(--bwn-acc)} .bw-sb-link[aria-current="page"]{background:var(--bwn-acc-bg);color:var(--bwn-text)} .bw-sb-link[aria-current="page"]::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--bwn-acc)} .bw-sb-link[aria-current="page"] svg{color:var(--bwn-acc)} .bw-sb-caret{flex:none;width:40px;min-height:44px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:10px;cursor:pointer;color:var(--bwn-mut)} .bw-sb-caret:hover{background:var(--bwn-acc-bg);color:var(--bwn-acc)} .bw-sb-caret:focus-visible{outline:2px solid var(--bwn-acc);outline-offset:-2px} .bw-sb-caret svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s} .bw-sb-caret[aria-expanded="true"] svg{transform:rotate(180deg)} html.bw-motion-off .bw-sb-caret svg{transition:none} .bw-sb-subs{display:none;padding:1px 0 4px 18px;position:relative;min-width:0} .bw-sb-subs::before{content:"";position:absolute;left:19px;top:4px;bottom:8px;width:2px;border-radius:2px;background:var(--bwn-line)} .bw-sb-sec.open .bw-sb-subs{display:block} .bw-sb-sub{display:flex;align-items:center;min-height:44px;padding:8px 10px 8px 20px;border-radius:10px;color:var(--bwn-mut);text-decoration:none;font-weight:500;font-size:13.8px;line-height:1.3;min-width:0;overflow-wrap:anywhere} .bw-sb-sub:hover{background:var(--bwn-acc-bg);color:var(--bwn-text)} .bw-sb-sub:focus-visible{outline:2px solid var(--bwn-acc);outline-offset:-2px} .bw-sb-sub[aria-current="page"]{color:var(--bwn-text);font-weight:700;background:var(--bwn-acc-bg)} /* à venir (jamais un lien mort) */ .bw-sb-soonrow{opacity:.5;cursor:default} .bw-sb-soonrow:hover{background:transparent} .bw-sb-soonrow:hover svg{color:var(--bwn-mut)} .bw-sb-badge{margin-left:auto;flex:none;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--bwn-mut);border:1px solid var(--bwn-line);border-radius:99px;padding:2px 7px;white-space:nowrap} /* bas de sidebar */ .bw-sb-bottom{flex:none;padding:10px 12px 14px;border-top:1px solid var(--bwn-line);min-width:0} .bw-sb-don{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 13px;border-radius:12px;border:1.5px solid var(--bwn-line);color:var(--bwn-text);font-weight:700;font-size:14px;text-decoration:none;min-width:0} .bw-sb-don:hover{border-color:var(--bwn-acc);color:var(--bwn-acc)} .bw-sb-don:focus-visible{outline:2px solid var(--bwn-acc);outline-offset:2px} .bw-sb-don svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .bw-sb-small{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:12px;padding:0 3px} .bw-sb-small a{font-size:12px;color:var(--bwn-mut);text-decoration:none;min-height:24px;display:inline-flex;align-items:center} .bw-sb-small a:hover{color:var(--bwn-text);text-decoration:underline} /* backdrop (tiroir mobile) */ #bw-sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99890;opacity:0;visibility:hidden;transition:opacity .2s} html.bw-sb-open #bw-sb-backdrop{opacity:1;visibility:visible} @media(min-width:769px){#bw-sb-backdrop{display:none}} html.bw-motion-off #bw-sb-backdrop{transition:none} @media(max-width:768px){html.bw-sb-open body{overflow:hidden}} /* ═══════════════════════════════════════════════════════════════════════ SURCHARGES MOBILES — ajoutées APRÈS tout le reste, sous point de rupture uniquement. Aucune de ces règles ne peut s'appliquer au desktop. ═══════════════════════════════════════════════════════════════════════ */ @media(max-width:768px){ /* urgence.html/404/suivi n'ont pas d'en-tête reconnu : le ☰ flotte en fixed 14/14 et recouvrait le logo du topbar (mesuré : logo à x≈18, y≈15 sous un bouton de 44 px). On dégage la place à gauche. */ html.bw-sb-float .topbar .wrap{padding-left:72px} /* Cibles du tiroir : les 6 petits liens du bas étaient à 24 px au milieu d'une colonne entièrement à 44 px. */ .bw-sb-small a{min-height:40px} } /* ═══════════════════════════════════════════════════════════════════════ BARRE BASSE — n'existe QUE sous 768 px. Injectee sur les 46 pages par bw-nav.js, mais display:none par defaut : au-dessus du point de rupture elle n'a aucune geometrie, donc aucun effet possible sur le rendu desktop. ═══════════════════════════════════════════════════════════════════════ */ #bw-tabbar{display:none} @media(max-width:768px){ #bw-tabbar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99880; background:var(--bwn-bg);border-top:1px solid var(--bwn-line); box-shadow:0 -2px 14px rgba(0,0,0,.07); padding-bottom:env(safe-area-inset-bottom,0); font-family:'Inter',system-ui,sans-serif; /* On anime « bottom » et non « transform » : sur un element fixed, iOS recalcule mal un transform quand le clavier virtuel redimensionne la fenetre, et la barre reste parfois collee au milieu de l'ecran. Pour une barre de 58 px basculee rarement, le cout d'un reflow est nul. */ transition:bottom .18s ease; } /* Le contenu ne doit jamais finir SOUS la barre : on rend sa hauteur au document. 58 px + la zone sure de l'appareil. */ html.bw-tabbar-on body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))} .bw-tab{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;min-height:58px;padding:7px 2px 8px;border:0;background:transparent; color:var(--bwn-mut);text-decoration:none;font:inherit;font-weight:600; font-size:11px;line-height:1.1;cursor:pointer;-webkit-tap-highlight-color:transparent; } .bw-tab svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .bw-tab:hover{color:var(--bwn-text)} .bw-tab:focus-visible{outline:2px solid var(--bwn-acc);outline-offset:-3px;border-radius:8px} .bw-tab[aria-current="page"]{color:var(--bwn-acc)} .bw-tab[aria-current="page"]::before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--bwn-acc)} .bw-tab{position:relative} /* SOS : la seule couleur de la barre. Il doit se voir sans etre lu. */ .bw-tab-sos{color:var(--bwn-red);font-weight:800} .bw-tab-sos svg{stroke-width:2.1} .bw-tab-sos:hover{color:var(--bwn-red)} /* Tiroir ouvert : la barre s'efface. Sinon elle flotterait au-dessus du voile, et « Menu » ferait doublon avec le ☰ de fermeture. */ html.bw-sb-open #bw-tabbar{bottom:-100px;pointer-events:none} /* Clavier virtuel ouvert (classe posee par bw-nav.js au focus d'un champ) */ html.bw-tabbar-off #bw-tabbar{bottom:-100px;pointer-events:none} html.bw-motion-off #bw-tabbar{transition:none} /* La pastille de gamification vivait a 20 px du bas : elle se serait posee sur la barre. Elle remonte au-dessus. (Absente en zone aide de toute facon — data-zone="aide" la neutralise.) */ #bwg-fab{bottom:calc(78px + env(safe-area-inset-bottom,0))} .bw-toast{bottom:calc(76px + env(safe-area-inset-bottom,0))} } /* A l'impression, aucune barre de navigation. */ @media print{#bw-tabbar{display:none !important}html.bw-tabbar-on body{padding-bottom:0}}