/* ============================================================================ minecraft.fr — NAVIGATION « DRAWER » (réf. The Verge) — PRÉVERSION ADMIN Portage de la maquette export-drawer (Claude Design) dans le thème enfant. Chargé UNIQUEMENT quand la préversion est active (functions.php §4 : connecté + ?drawer=1, cookie 30 j, ?drawer=0 pour couper). Le public garde le menu Extra actuel. - Top-bar : liens slashés + burger injectés dans #main-header (header.php), menu Extra (#et-navigation) masqué sous body.mcfr-drw. - Panneau + overlay : markup PHP en fin de (wp_footer), position fixed, piloté par assets/drawer.js (accordéon localStorage, focus trap). Le header reste SOMBRE dans les 2 thèmes ; le drawer SUIT le thème. ============================================================================ */ /* ---- masque la navigation Extra (préversion uniquement) ---- */ body.mcfr-drw #et-navigation, body.mcfr-drw #et-mobile-nav-button, body.mcfr-drw .mobile_menu_bar{ display:none !important; } /* ---- verrou de scroll quand le drawer est ouvert ---- */ html.mcfr-drw-open, html.mcfr-drw-open body{ overflow:hidden !important; } /* la gouttière de scrollbar reste RÉSERVÉE même quand le verrou supprime l'ascenseur → plus de glissement horizontal de ~17px à l'ouverture (constat Clément : « tout le fond glisse »). Quasi toutes les pages ont une scrollbar : aucun changement en navigation normale. */ html{ scrollbar-gutter:stable; } /* sûreté : [hidden] gagne toujours (certains resets le neutralisent). Doublé ici pour le panneau P2 (.mr-full) : si une copie cache périmée de menuriche.css traîne (constaté : menu ouvert d'office, infermable), ce fichier-ci garde la main. */ .drw-scrim[hidden], .drw-panel[hidden], .mr-full[hidden], #mcfr-drawer[hidden]{ display:none !important; } /* ====================================================================== TOP-BAR — « phrase continue » (export-topbar, validée) : logo + liens forment UN SEUL groupe qui se lit comme une phrase (premier slash collé au logo), l'espace libre est rejeté à droite où seul le burger est ancré. Le .container d'Extra passe en flex (les floats internes deviennent des flex items, #et-navigation est masqué). ====================================================================== */ body.mcfr-drw #main-header .container{ display:flex; align-items:center; position:relative; z-index:2; /* la segbar glisse DERRIÈRE */ /* ⚠️ COULEUR FIXE (pas var(--mc-dark) !) : le header ne suit pas le thème, et en dark la variable devient #0F1412 → le container faisait une bande plus sombre que le header full-width #161D1B (cassure constatée). */ background:#161D1B; } /* ⚠️ Extra pose des `order` flex sur les enfants du header (logo order:1, nav order:3) : sans order explicite (0) la topnav passait DEVANT le logo (constaté en live). Ordres verrouillés. */ body.mcfr-drw #main-header .logo{ flex:0 0 auto; order:1; } .mcfr-drw-topnav{ flex:1 1 auto; min-width:0; order:2; display:flex; align-items:center; gap:13px; margin-left:13px; } /* tailles AGRANDIES (retour Clément) — clamp pour ne pas déborder entre 1025 et 1200px de large */ .mcfr-drw-links{ display:flex; align-items:center; gap:14px; min-width:0; } .mcfr-drw-links a{ font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important; font-weight:600 !important; font-size:clamp(14.5px, 1.3vw, 17.5px) !important; color:#C7D3CF !important; text-decoration:none !important; padding:6px 2px !important; position:relative; white-space:nowrap; line-height:1.2 !important; } .mcfr-drw-links a:hover{ color:#fff !important; } .mcfr-drw-links a.active{ color:#fff !important; } .mcfr-drw-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--mc-tq,#1AA995); } .mcfr-drw-links .sl{ color:#46554F; font-weight:400; user-select:none; font-size:clamp(15px, 1.4vw, 19px); /* police EXPLICITE : les slashs héritaient d'Open Sans (corps Extra) → micro-flash au chargement (constat Clément). Plex est preloadée. */ font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif); } /* ---- ligne de PROGRESSION DE LECTURE : surimpression très légère PAR-DESSUS le liseré turquoise (#main-header::after, 3px) — articles et pages uniquement, fin = bas du contenu à lire. drawer.js. ---- */ .mcfr-scrollline{ position:absolute; left:0; bottom:0; height:3px; width:0; background:rgba(255,255,255,.35); z-index:6; pointer-events:none; } /* RAIL FIXE de relais : quand le header (et son liseré) est sorti de l'écran (desktop non-sticky, ou header mobile replié), un liseré fixe en haut de fenêtre reprend la progression — sinon elle disparaissait avec le header (constat Clément). */ .mcfr-scrollrail{ position:fixed; top:0; left:0; right:0; height:3px; background:var(--mc-tq,#1AA995); z-index:99980; pointer-events:none; display:none; } .mcfr-scrollrail.on{ display:block; } .mcfr-scrollrail .fill{ height:100%; width:0; background:rgba(255,255,255,.35); } body.admin-bar .mcfr-scrollrail{ top:32px; } @media only screen and (max-width:782px){ body.admin-bar .mcfr-scrollrail{ top:46px; } } @media only screen and (max-width:600px){ body.admin-bar .mcfr-scrollrail{ top:0; } } @media (prefers-reduced-motion: no-preference){ .mcfr-scrollline, .mcfr-scrollrail .fill{ transition:width .08s linear; } } .drw-burger{ width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; background:var(--mc-tq,#1AA995) !important; color:#06231E !important; border:0 !important; border-radius:0 !important; padding:0 !important; cursor:pointer; box-shadow:var(--mc-sh-sm,3px 3px 0 #1E2422) !important; transition:transform .08s ease, box-shadow .08s ease; } .drw-burger .bars{ display:grid; gap:4px; } .drw-burger .bars i{ display:block; width:19px; height:3px; background:currentColor; } .drw-burger:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--mc-shadow,#1E2422) !important; } .drw-burger:focus-visible{ outline:3px solid var(--mc-tq-l,#34CBB2); outline-offset:2px; } /* le burger est calé sur le bord du conteneur : on le rentre (ombre 3px, 4px au hover, + respiration demandée par Clément). */ .mcfr-drw-topnav .drw-burger{ margin-left:auto; margin-right:12px; } /* libellé « MENU » (desktop uniquement) : burger élargi ≡ + texte — discoverabilité (NN/g), icône seule conservée en mobile */ .drw-burger .lab{ display:inline-block; font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; line-height:1; color:#06231E; } /* TOGGLE ouvrir/fermer (menu riche P2 sous le header) : .is-open posée par drawer.js — ≡ MENU devient ✕ FERMER, même position */ .drw-burger .xx{ display:none; } .drw-burger .lab-c{ display:none; } .drw-burger.is-open .bars{ display:none; } .drw-burger.is-open .xx{ display:block; } @media only screen and (min-width:1025px){ .drw-burger.is-open .lab-o{ display:none; } .drw-burger.is-open .lab-c{ display:inline-block; } } @media only screen and (min-width:1025px){ .mcfr-drw-topnav .drw-burger{ width:auto; padding:0 14px !important; display:inline-flex; align-items:center; gap:9px; } } @media only screen and (max-width:1024px){ .drw-burger .lab{ display:none; } } /* ====================================================================== MOBILE ≤1024px — BARRE SEGMENTÉE « MALIGNE » (export-topbar, M6) Rangée de 6 cases égales bord à bord SOUS la rangée logo+burger (markup PHP : mcfr_drawer_segbar(), dans #main-header après .container). Traitement 1 retenu : case active turquoise plein. Comportement (drawer.js) : visible en haut de page et au scroll ↑, repliée pendant la lecture (scroll ↓) — glisse SOUS la rangée logo (.container z-index:2 opaque), liseré turquoise du header conservé comme séparateur bas dans les deux états. ====================================================================== */ .mcfr-segbar{ display:none; } /* ---- header STICKY PARTOUT (demande Clément : il ne doit pas partir au scroll en desktop). Le repli « malin » (scroll ↓/↑) reste MOBILE uniquement : la transform .mcfr-hdr-hidden est scopée ≤1024px. En desktop, le liseré (et la progression de lecture) restent donc toujours visibles — le rail fixe ne sert plus qu'au mobile replié. */ body.mcfr-drw #page-container > header.header{ position:sticky; top:0; z-index:9990; } body.mcfr-drw.admin-bar #page-container > header.header{ top:32px; } @media only screen and (max-width:1024px){ .mcfr-drw-links{ display:none; } /* couleurs FIXES (zone header, ne suit pas le thème — les vars --mc-dark* changent de valeur en dark et casseraient l'uniformité du bandeau) */ .mcfr-segbar{ position:relative; z-index:1; display:flex; height:40px; background:#202A27; border-top:1px solid #2E3A36; transition:transform .2s ease, margin-bottom .2s ease; will-change:transform; } .mcfr-segbar a{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; padding:0 2px !important; font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif) !important; font-weight:600 !important; font-size:10px !important; letter-spacing:.04em !important; text-transform:uppercase; color:#C7D3CF !important; text-decoration:none !important; white-space:nowrap; overflow:hidden; } .mcfr-segbar a + a{ border-left:1px solid #2E3A36; } .mcfr-segbar a:hover{ background:#2E3A36; color:#fff !important; } .mcfr-segbar a:active{ background:var(--mc-tq-d,#11796A); color:#06231E !important; } .mcfr-segbar a:focus-visible{ outline:3px solid var(--mc-tq-l,#34CBB2); outline-offset:-3px; z-index:2; } .mcfr-segbar a.on{ background:var(--mc-tq,#1AA995); color:#06231E !important; } /* ---- repli « malin » MOBILE : le header sticky se replie pendant la lecture (scroll ↓) via .mcfr-hdr-hidden (drawer.js), réapparaît au scroll ↑ et en haut de page. Modèle The Verge mobile. ---- */ body.mcfr-drw #page-container > header.header{ transition:transform .2s ease; will-change:transform; } body.mcfr-drw #page-container > header.header.mcfr-hdr-hidden{ transform:translateY(-100%); } } @media only screen and (max-width:782px){ body.mcfr-drw.admin-bar #page-container > header.header{ top:46px; } } @media only screen and (max-width:600px){ /* ≤600px l'admin-bar WP est absolute (part au scroll) */ body.mcfr-drw.admin-bar #page-container > header.header{ top:0; } } @media (prefers-reduced-motion: reduce){ .mcfr-segbar, body.mcfr-drw #page-container > header.header{ transition:none; } } /* ====================================================================== OVERLAY + PANNEAU (fixed, au-dessus de tout — modal) ====================================================================== */ .drw-scrim{ position:fixed; inset:0; background:rgba(15,19,18,.55); z-index:100000; } .drw-scrim.enter{ animation:drwFade .2s ease both; } @keyframes drwFade{ from{ opacity:0; } to{ opacity:1; } } .drw-panel{ position:fixed; top:0; right:0; bottom:0; width:380px; z-index:100001; background:var(--mc-surface,#FFFFFF); border-left:2px solid var(--mc-edge,#1E2422); box-shadow:-5px 0 0 var(--mc-shadow,#1E2422); display:flex; flex-direction:column; overflow:hidden; } /* l'état visible (resting) est le style de base ; on n'anime QUE pendant l'ouverture (.enter posée 240 ms par drawer.js) */ .drw-panel.enter{ animation:drwSlide .22s cubic-bezier(.2,.7,.3,1) both; } @keyframes drwSlide{ from{ transform:translateX(100%); } to{ transform:translateX(0); } } @media (prefers-reduced-motion: reduce){ .drw-panel.enter, .drw-scrim.enter{ animation:none; } } @media only screen and (max-width:600px){ .drw-panel{ width:100%; border-left:0; } } /* admin connecté : le panneau démarre sous l'admin-bar */ body.admin-bar .drw-panel{ top:32px; } @media only screen and (max-width:782px){ body.admin-bar .drw-panel{ top:46px; } } /* filigrane vertical géant (turquoise très faible) */ .drw-mark{ position:absolute; right:-14px; top:0; bottom:0; z-index:0; pointer-events:none; display:flex; align-items:center; overflow:hidden; } .drw-mark span{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif); font-weight:700; font-size:150px; line-height:.8; letter-spacing:-.03em; color:var(--mc-tq,#1AA995); opacity:.07; white-space:nowrap; } /* le contenu passe au-dessus du filigrane */ .drw-top, .drw-switch-wrap, .drw-acc{ position:relative; z-index:1; } /* ---- a) recherche + fermeture ---- */ .drw-top{ display:flex; align-items:stretch; gap:10px; padding:16px; border-bottom:2px solid var(--mc-line,#DCD7CC); flex:0 0 auto; } .drw-search{ display:flex; flex:1 1 auto; min-width:0; margin:0 !important; } .drw-search input[type="search"]{ flex:1 1 auto; min-width:0; width:auto; font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.06em !important; text-transform:uppercase; padding:0 12px !important; height:42px !important; border:2px solid var(--mc-edge,#1E2422) !important; border-right:0 !important; border-radius:0 !important; box-shadow:none !important; background:var(--mc-bone,#F4F1EA) !important; color:var(--mc-ink,#1E2422) !important; } .drw-search input::placeholder{ color:var(--mc-muted,#6E7A75); letter-spacing:.08em; } .drw-search button{ flex:0 0 auto; width:44px; height:42px; border:2px solid var(--mc-edge,#1E2422) !important; border-radius:0 !important; background:var(--mc-tq,#1AA995) !important; color:#06231E !important; cursor:pointer; display:grid; place-items:center; padding:0 !important; box-shadow:none !important; } .drw-search button:hover{ background:var(--mc-tq-l,#34CBB2) !important; } .drw-search button svg{ display:block; fill:currentColor; } .drw-close{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border:2px solid var(--mc-edge,#1E2422) !important; border-radius:0 !important; background:var(--mc-surface,#FFFFFF) !important; color:var(--mc-ink,#1E2422) !important; cursor:pointer; padding:0 !important; box-shadow:var(--mc-sh-sm,3px 3px 0 #1E2422) !important; } .drw-close:hover{ background:var(--mc-bone,#F4F1EA) !important; } .drw-close svg{ display:block; } .drw-close:focus-visible, .drw-search button:focus-visible{ outline:3px solid var(--mc-tq-l,#34CBB2); outline-offset:2px; } /* ---- b) switch de thème segmenté (fond sombre dans les 2 thèmes) ---- */ .drw-switch-wrap{ display:flex; justify-content:center; padding:14px 16px; border-bottom:2px dotted var(--mc-line-2,#CDC6B8); flex:0 0 auto; } .drw-switch{ display:inline-flex; border:2px solid var(--mc-tq-d,#11796A); background:var(--mc-dark-2,#202A27); box-shadow:3px 3px 0 #000; } .drw-switch .seg{ display:inline-flex; align-items:center; gap:7px; padding:9px 18px !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; cursor:pointer; font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif) !important; font-weight:600 !important; font-size:11px !important; text-transform:uppercase; letter-spacing:.06em !important; color:#C7D3CF !important; line-height:1 !important; } .drw-switch .seg svg{ width:13px; height:13px; flex:0 0 13px; fill:currentColor; display:block; } .drw-switch .seg + .seg{ border-left:2px solid var(--mc-tq-d,#11796A) !important; } .drw-switch .seg:hover{ color:#fff !important; } .drw-switch .seg.on{ background:var(--mc-tq,#1AA995) !important; color:#06231E !important; } .drw-switch .seg.on:hover{ color:#06231E !important; } .drw-switch .seg:focus-visible{ outline:3px solid var(--mc-tq-l,#34CBB2); outline-offset:2px; } /* ---- c) accordéon (replié par défaut, état en localStorage) ---- */ .drw-acc{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; } .drw-sec{ border-bottom:1px dotted var(--mc-line-2,#CDC6B8); } .drw-sec-h{ display:flex; align-items:stretch; } .drw-sec-h .ttl{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:11px; padding:15px 8px 15px 16px; font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif) !important; font-weight:700 !important; font-size:16px !important; letter-spacing:.02em; text-transform:uppercase; color:var(--mc-ink,#1E2422) !important; text-decoration:none !important; } .drw-sec-h .ttl .sq{ width:11px; height:11px; flex:0 0 auto; box-shadow:inset -3px -3px 0 rgba(0,0,0,.22); } .drw-sec-h .ttl .sq.tq{ background:var(--mc-tq,#1AA995); } .drw-sec-h .ttl .sq.gold{ background:var(--mc-gold,#E8A93B); } .drw-sec-h .ttl .sq.green{ background:var(--mc-green,#5C9E3C); } .drw-sec-h .ttl .sq.violet{ background:var(--mc-violet,#7A5BB0); } .drw-sec-h .ttl .sq.muted{ background:var(--mc-line-2,#CDC6B8); box-shadow:inset -3px -3px 0 rgba(0,0,0,.12); } .drw-sec-h .ttl:hover{ color:var(--mc-tq-d,#11796A) !important; } .drw-sec.open > .drw-sec-h .ttl{ color:var(--mc-tq-d,#11796A) !important; } .drw-sec-h .tog{ flex:0 0 auto; width:52px; border:0 !important; border-radius:0 !important; border-left:1px dotted var(--mc-line-2,#CDC6B8) !important; background:none !important; box-shadow:none !important; padding:0 !important; cursor:pointer; color:var(--mc-muted,#6E7A75) !important; display:grid; place-items:center; } .drw-sec-h .tog svg{ width:16px; height:16px; display:block; } .drw-sec-h .tog:hover{ background:var(--mc-bone,#F4F1EA) !important; color:var(--mc-tq-d,#11796A) !important; } .drw-sec-h .ttl:focus-visible, .drw-sec-h .tog:focus-visible{ outline:3px solid var(--mc-tq-l,#34CBB2); outline-offset:-3px; } /* icônes + / − : les deux dans le DOM, l'état .open choisit */ .drw-sec .tog .ic-minus{ display:none; } .drw-sec.open .tog .ic-plus{ display:none; } .drw-sec.open .tog .ic-minus{ display:block; } /* liste repliée par défaut */ .drw-sec:not(.open) .drw-list{ display:none; } /* liste dépliée */ .drw-list{ background:var(--mc-bone,#F4F1EA); border-top:1px dotted var(--mc-line-2,#CDC6B8); padding:4px 0 8px; } .drw-li{ display:flex; align-items:center; gap:11px; padding:10px 16px 10px 40px; font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important; font-weight:600 !important; font-size:14.5px !important; color:var(--mc-ink-2,#3D4742) !important; text-decoration:none !important; } .drw-li .bullet{ width:7px; height:7px; flex:0 0 auto; background:var(--mc-tq,#1AA995); } .drw-li:hover{ color:var(--mc-tq-d,#11796A) !important; } .drw-li:hover .bullet{ background:var(--mc-tq-d,#11796A); } .drw-li:focus-visible{ outline:3px solid var(--mc-tq-l,#34CBB2); outline-offset:-3px; } /* chips versions (groupes « Par version » du menu BO) */ .drw-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 16px 10px 40px; } .drw-chip{ font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif) !important; font-weight:700 !important; font-size:11px !important; line-height:1 !important; padding:5px 7px !important; background:var(--mc-surface,#FFFFFF) !important; border:2px solid var(--mc-line-2,#CDC6B8) !important; text-decoration:none !important; } .drw-chip.tq{ color:var(--mc-tq-d,#11796A) !important; } .drw-chip.gold{ color:var(--mc-gold-d,#B57E1E) !important; } .drw-chip.tq:hover{ background:var(--mc-tq,#1AA995) !important; color:#06231E !important; border-color:var(--mc-edge,#1E2422) !important; } .drw-chip.gold:hover{ background:var(--mc-gold,#E8A93B) !important; color:#2A1D02 !important; border-color:var(--mc-edge,#1E2422) !important; } .drw-chip:focus-visible{ outline:3px solid var(--mc-tq-l,#34CBB2); outline-offset:2px; } /* entrées directes (Le Film · Boutique…) : même niveau que les catégories */ .drw-sec.flat .ttl{ width:100%; }