@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@300;400;500;600&family=Outfit:wght@200;300;400;500&display=swap'); @font-face{font-family:'Noken Bold';src:url('https://muons.fr/projets/assets/Noken-Bold.woff2') format('woff2');font-weight:bold;font-style:normal;font-display:swap} html{font-size:clamp(16px,calc(12px + 0.25vw),20px);scroll-behavior:smooth} /* ========================================================================== THEME — sombre par défaut, clair en option (bascule via data-theme sur , gérée par site.js + persistée en localStorage). L'accent orange (#ff6400) est utilisé pour les actions primaires et les états sélectionnés/actifs, dans les deux thèmes. ========================================================================== */ :root{ --bg:#000; --surface:#0d0d0d; --surface-2:#161616; --ink:#f4f4ef; --dim:#828282; --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.07); --glass:rgba(255,255,255,.045); --grid-line:rgba(255,255,255,.045); --header-bg:rgba(0,0,0,.92); --shadow:rgba(0,0,0,.5); --overlay-bg:rgba(0,0,0,.55); --modal-overlay:rgba(0,0,0,.82); --accent:#ff6400; --accent-ink:#fff; --accent-line:rgba(255,100,0,.4); } :root[data-theme="light"]{ /* Miroir littéral du thème sombre (fond #000 / texte quasi blanc) : fond quasi blanc pur et texte quasi noir pur, pour un contraste équivalent — les surfaces de blocs (cartes, etc.) restent légèrement décalées du fond comme en sombre, sans devenir blanches à 100 % non plus. */ --bg:#ffffff; --surface:#f5f4f0; --surface-2:#ebeae4; --ink:#0d0d0d; --dim:#5a5a56; --line:rgba(0,0,0,.18); --line2:rgba(0,0,0,.11); --glass:rgba(0,0,0,.035); --grid-line:rgba(0,0,0,.06); --header-bg:rgba(255,255,255,.92); --shadow:rgba(20,18,15,.16); --overlay-bg:rgba(255,255,255,.7); --modal-overlay:rgba(20,18,15,.55); --accent:#ff6400; --accent-ink:#fff; --accent-line:rgba(255,100,0,.4); } *{margin:0;padding:0;box-sizing:border-box} /* Transition de thème coordonnée : sans règle par élément, seul (via sa propre transition) s'estompait en douceur pendant que le reste de la page (cartes, header, modales…) basculait instantanément — d'où l'effet "violent" et désynchronisé au clic sur le bouton clair/sombre. Un fallback universel fait fondre tous les éléments ensemble, à la même vitesse ; les éléments qui déclarent déjà leur propre transition (boutons au survol…) restent prioritaires et ne sont pas affectés. */ @media(prefers-reduced-motion:no-preference){ *,*::before,*::after{transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease} } body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} /* body est un flex column : sans ceci, un enfant (header/#pp-root/#fp-root/ #cart-root/footer) dont un descendant refuse de rétrécir sous son min-content (texte non-cassable, ligne flex sans wrap…) pousse toute la page plus large que le viewport — overflow-x:hidden ci-dessus masque alors silencieusement le débordement au lieu de laisser le contenu s'adapter. Même principe que minmax(0,1fr) plus bas pour les grilles. */ body>*{min-width:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} img,svg{display:block} ::selection{background:var(--accent);color:#fff} .wrap{max-width:96rem;margin:0 auto;padding:0 clamp(1.2rem,3vw,2.4rem)} .eyebrow{font-family:'Outfit',monospace;font-weight:300;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 50%,transparent)} .h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.05;letter-spacing:.01em} .lead{font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(.9rem,1.2vw,1.05rem);line-height:1.6;color:color-mix(in srgb,var(--ink) 62%,transparent)} .btn{display:inline-flex;align-items:center;gap:.6rem;font-family:'Outfit',monospace;font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:.85rem 1.6rem;border-radius:3rem;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap} .btn-primary{background:transparent;color:var(--accent);border:0.05rem solid var(--accent)} .btn-primary:hover{background:var(--accent);color:var(--accent-ink);transform:translateY(-0.125rem)} .btn-solid{background:var(--accent);color:var(--accent-ink);border:0.05rem solid var(--accent)} .btn-solid:hover{background:color-mix(in srgb,var(--accent) 85%,#000);border-color:color-mix(in srgb,var(--accent) 85%,#000);transform:translateY(-0.125rem)} .btn-ghost{border:0.05rem solid var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-0.125rem)} .btn-sm{padding:.55rem 1.1rem;font-size:.62rem} /* ── Bouton "shiny" (Échantillons, barre du haut) — porté depuis un composant React fourni par l'utilisateur (style jsx + @property), en CSS pur ici puisque le site n'a pas de framework. Couleur d'accroche remplacée par l'orange d'accent du site (--accent) ; les tons de fond/texte suivent les tokens de thème (--surface/--ink) pour s'adapter au clair comme au sombre, plutôt que le noir fixe du composant d'origine. ── */ @property --gradient-angle{syntax:"";initial-value:0deg;inherits:false} @property --gradient-angle-offset{syntax:"";initial-value:0deg;inherits:false} @property --gradient-percent{syntax:"";initial-value:20%;inherits:false} @property --gradient-shine{syntax:"";initial-value:#fff;inherits:false} @property --shiny-bg{syntax:"";initial-value:#0d0d0d;inherits:false} /* Version allégée : le composant d'origine ajoutait aussi un halo interne (span::before, un box-shadow qui "respire" en scale) qui se faisait mal découper par overflow:hidden selon le moteur de rendu — au survol, ça laissait échapper un bloc orange rectangulaire hors de la pilule. Ce halo est retiré, mais le motif de points est conservé (juste en dessous de 100% de large/haut avec un border-radius hérité, il reste bien dans les bords de la pilule). */ .shiny-cta{ --shiny-bg:var(--surface-2); --shiny-fg:var(--ink); --shiny-hl:var(--accent); --shiny-hl-subtle:color-mix(in srgb,var(--accent) 55%,#fff); --duration:3s; isolation:isolate;position:relative;overflow:hidden;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; font-family:'Outfit',monospace;font-weight:500;font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;line-height:1;white-space:nowrap; padding:.55rem 1.3rem;border:0.0625rem solid transparent;border-radius:3rem; color:var(--shiny-fg); background:linear-gradient(var(--shiny-bg),var(--shiny-bg)) padding-box, conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent,var(--shiny-hl) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-hl) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box; transition:translate .15s,color .2s,--shiny-bg .2s, --gradient-angle-offset 800ms cubic-bezier(.25,1,.5,1), --gradient-percent 800ms cubic-bezier(.25,1,.5,1), --gradient-shine 800ms cubic-bezier(.25,1,.5,1); animation:gradient-angle var(--duration) linear infinite; } .shiny-cta:active{translate:0 0.0625rem} .shiny-cta span{position:relative;z-index:1} /* Motif de petits points, masqué en dégradé conique pour ne montrer qu'un arc qui tourne avec la bordure — reste en retrait de 3px des bords (--size) et hérite le border-radius, donc toujours contenu dans la pilule. */ .shiny-cta::before{ content:"";pointer-events:none;position:absolute;inset-inline-start:50%;inset-block-start:50%; translate:-50% -50%;z-index:-1;border-radius:inherit; --size:calc(100% - 0.1875rem);--position:2px;--space:calc(var(--position) * 2); width:var(--size);height:var(--size); background:radial-gradient(circle at var(--position) var(--position),#fff calc(var(--position) / 4),transparent 0) padding-box; background-size:var(--space) var(--space);background-repeat:space; mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),#000,transparent 10% 90%,#000); -webkit-mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),#000,transparent 10% 90%,#000); opacity:.4; animation:gradient-angle var(--duration) linear infinite; } .shiny-cta:is(:hover,:focus-visible){--gradient-angle-offset:95deg;--gradient-shine:var(--shiny-hl-subtle);--shiny-bg:var(--accent);color:var(--accent-ink)} @keyframes gradient-angle{to{--gradient-angle:360deg}} @media(prefers-reduced-motion: reduce){.shiny-cta,.shiny-cta::before{animation:none}} .reveal{opacity:0;transform:translateY(1.5rem);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .reveal.on{opacity:1;transform:none} .reveal2{transition-delay:.08s}.reveal3{transition-delay:.16s}.reveal4{transition-delay:.24s} /* grille en fond — signature visuelle du site */ .gridbg{position:relative} .gridbg::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--grid-line) 0.0625rem,transparent 0.0625rem),linear-gradient(90deg,var(--grid-line) 0.0625rem,transparent 0.0625rem);background-size:3rem 3rem;-webkit-mask-image:radial-gradient(ellipse at 50% 20%,black 0%,transparent 68%);mask-image:radial-gradient(ellipse at 50% 20%,black 0%,transparent 68%)} .gridbg>.wrap{position:relative;z-index:1} /* emplacement photo — à remplacer */ .photo-slot{position:relative;aspect-ratio:4/3;background:var(--surface);border:0.0625rem dashed color-mix(in srgb,var(--ink) 16%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;overflow:hidden} .photo-slot img,.photo-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .photo-slot svg{width:1.4rem;height:1.4rem;stroke:color-mix(in srgb,var(--ink) 28%,transparent);flex:none} .photo-slot .ph-label{font-family:'Outfit',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 32%,transparent);text-align:center;padding:0 .6rem;line-height:1.4} /* bandeau promo — couleur de marque, en haut de chaque page */ #promo-strip{background:var(--accent);color:var(--accent-ink)} .promo-row{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.4rem);padding:.5rem 0;font-family:'Outfit',monospace;font-weight:500;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap;text-align:center} /* header */ #site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:blur(.6rem);border-bottom:0.0625rem solid var(--line2);flex:none} .main-row{display:flex;align-items:center;gap:1.4rem;padding:.9rem 0} .logo{font-family:'Noken Bold','Archivo Black',sans-serif;font-weight:bold;font-size:1.3rem;letter-spacing:0;text-transform:uppercase;flex:none} /* Survol du logo header — flip vertical lettre par lettre, voir logoSwapHtml() dans site.js. Chaque .lg-char masque une boîte de hauteur 1em ; .lg-c2 est positionné juste sous .lg-c1 (top:100%) et invisible tant que rien ne bouge. Au survol, les deux calques translatent de -100% (délai décalé par lettre via --d) : .lg-c1 sort par le haut pendant que .lg-c2 vient prendre sa place — l'utilisateur ne voit jamais l'espace vide entre les deux. */ .logo-swap{display:inline-flex} .lg-char{position:relative;display:inline-block;height:1em;overflow:hidden;vertical-align:top} .lg-c{display:block;transition:transform .5s cubic-bezier(.65,0,.35,1);transition-delay:var(--d,0s)} .lg-c2{position:absolute;left:0;top:100%} .logo-swap:hover .lg-c1,.logo-swap:hover .lg-c2{transform:translateY(-100%)} @media(prefers-reduced-motion:reduce){.lg-c{transition:none}} .main-row .logo{font-size:2rem;margin-right:.9rem} .mnav{display:flex;align-items:center;gap:.2rem;flex:1;min-width:0} @media(min-width:68.01rem){.mnav{gap:.5rem}} .nav-item{position:relative} .nav-trig{display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.5rem .8rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--accent-ink);background:var(--accent);border-radius:.4rem;transition:background .2s} .nav-trig:hover{background:color-mix(in srgb,var(--accent) 82%,black)} .nav-trig svg{width:.6rem;height:.6rem;stroke:currentColor;flex:none;transition:transform .2s;margin-top:0.0625rem} .nav-item:hover .nav-trig svg,.nav-item.open .nav-trig svg{transform:rotate(180deg)} .nav-drop{position:absolute;top:100%;left:0;margin-top:.4rem;width:max-content;max-width:min(92vw,58rem);background:var(--surface);border:0.0625rem solid var(--line);border-radius:.8rem;padding:.9rem;opacity:0;visibility:hidden;transform:translateY(.4rem);transition:opacity .18s,transform .18s,visibility .18s,background-color .35s ease,border-color .35s ease;box-shadow:0 1rem 2.5rem var(--shadow);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(8.5rem,10.5rem);gap:.4rem 1rem} .nav-item:hover .nav-drop,.nav-item.open .nav-drop{opacity:1;visibility:visible;transform:none} .nav-drop-fam h5{font-family:'Outfit',monospace;font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;padding:0 .4rem .4rem;border-bottom:0.0625rem solid var(--accent-line)} .nav-drop a{display:block;padding:.4rem .4rem;border-radius:.4rem;font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:300;color:color-mix(in srgb,var(--ink) 68%,transparent);transition:background .15s,color .15s} .nav-drop a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)} .hd-actions{display:flex;align-items:center;gap:.6rem;flex:none} .hd-social{display:flex;align-items:center;gap:.35rem} .hd-ico{width:1.85rem;height:1.85rem;border-radius:50%;border:0.05rem solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none;color:color-mix(in srgb,var(--ink) 60%,transparent);transition:border-color .2s,color .2s,transform .2s} .hd-ico:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-0.1rem)} .hd-ico svg{width:.72rem;height:.72rem;stroke:currentColor} .hd-sep{width:0.0625rem;height:1.3rem;background:var(--line2);flex:none} .hd-icon-btn{position:relative;width:1.85rem;height:1.85rem;border-radius:50%;border:0.05rem solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none;color:color-mix(in srgb,var(--ink) 60%,transparent);transition:border-color .2s,color .2s,transform .2s} .hd-icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-0.1rem)} .hd-icon-btn svg{width:.82rem;height:.82rem;stroke:currentColor} .hd-cart-badge{position:absolute;top:-.3rem;right:-.3rem;min-width:1.05rem;height:1.05rem;padding:0 .25rem;border-radius:1rem;background:var(--accent);color:var(--accent-ink);font-family:'Outfit',monospace;font-size:.6rem;align-items:center;justify-content:center;line-height:1} .hd-cart.bump{animation:cartBump .45s ease} /* Aperçu panier au survol — même logique d'ouverture que .nav-drop, mais ancré à droite (right:0) puisque le panier est tout près du bord droit du header : un ancrage left:0 comme .nav-drop déborderait de l'écran. */ .hd-cart-wrap{position:relative;display:flex;align-items:center} .cart-preview{position:absolute;top:100%;right:0;margin-top:.6rem;width:19rem;max-width:88vw;background:var(--surface);border:0.0625rem solid var(--line);border-radius:.9rem;padding:.7rem;opacity:0;visibility:hidden;transform:translateY(.4rem);transition:opacity .18s,transform .18s,visibility .18s,background-color .35s ease,border-color .35s ease;box-shadow:0 1rem 2.5rem var(--shadow);z-index:70} /* (hover:hover) and (pointer:fine) — pas juste "mobile" : sur tactile, un :hover simple sur un élément qui révèle du contenu peut forcer certains navigateurs (iOS Safari) à consommer le premier tap pour "activer" le survol plutôt que suivre le lien — le panier doit toujours amener directement à panier.html en un seul tap sur mobile, jamais d'aperçu. */ @media(hover:hover) and (pointer:fine){ .hd-cart-wrap:hover .cart-preview{opacity:1;visibility:visible;transform:none} } .cart-preview-empty{font-family:'Outfit',sans-serif;font-size:.8rem;color:var(--dim);padding:.6rem .3rem;text-align:center} .cart-preview-item{display:flex;align-items:center;gap:.6rem;padding:.4rem .3rem;border-radius:.5rem} .cart-preview-item+.cart-preview-item{border-top:0.0625rem solid var(--line2)} .cart-preview-photo{width:2.7rem;height:2.7rem;border-radius:.4rem;overflow:hidden;flex:none;background:var(--bg);position:relative} .cart-preview-photo img,.cart-preview-photo video{width:100%;height:100%;object-fit:cover} .cart-preview-photo svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1rem;height:1rem;stroke:color-mix(in srgb,var(--ink) 28%,transparent)} .cart-preview-text{min-width:0;display:flex;flex-direction:column;gap:.1rem} .cart-preview-text b{font-family:'Outfit',sans-serif;font-weight:600;font-size:.78rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cart-preview-text span{font-family:'Outfit',monospace;font-size:.64rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cart-preview-remove{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:background .15s,color .15s} .cart-preview-remove svg{width:.7rem;height:.7rem;stroke:currentColor} .cart-preview-remove:hover{background:var(--accent);color:var(--accent-ink)} .cart-preview-more{font-family:'Outfit',monospace;font-size:.62rem;color:var(--dim);text-align:center;padding:.4rem 0 .1rem} .cart-preview-btn{display:flex;justify-content:center;width:100%;margin-top:.6rem} @keyframes cartBump{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-16deg)} 45%{transform:rotate(13deg)} 70%{transform:rotate(-7deg)} 90%{transform:rotate(3deg)} } .drawer-cta .hd-icon-btn{width:2.1rem;height:2.1rem} .drawer-cta .hd-icon-btn svg{width:.9rem;height:.9rem} .theme-toggle{width:1.85rem;height:1.85rem;border-radius:50%;border:0.05rem solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none;transition:border-color .2s,background .2s,transform .25s} .theme-toggle:hover{border-color:var(--accent);transform:rotate(18deg) scale(1.1)} .theme-toggle:active{transform:scale(.85)} .theme-toggle.spin{animation:themeSpin .5s ease} @keyframes themeSpin{0%{transform:rotate(0)}100%{transform:rotate(1turn)}} .theme-toggle svg{width:.82rem;height:.82rem;stroke:var(--ink);fill:none} .theme-toggle .i-sun{display:none} :root[data-theme="light"] .theme-toggle .i-moon{display:none} :root[data-theme="light"] .theme-toggle .i-sun{display:block} .burger{display:none;flex-direction:column;gap:.28rem;padding:.5rem} .burger span{width:1.3rem;height:0.09rem;background:var(--ink)} @media(max-width:68rem){ /* Le menu déroulant complet (survol) laisse place au tiroir mobile pour le détail des familles/produits, mais les 2 boutons "Impression"/"Création" restent visibles, recentrés dans l'espace libre entre logo et actions — un raccourci direct sans ouvrir le tiroir. Leur sous-menu (.nav-drop, pensé pour un survol souris) est masqué : au tactile ça naviguerait directement vers print.html/creation.html, comme n'importe quel lien. */ .mnav{display:flex;justify-content:center} .nav-drop{display:none} .burger{display:flex} /* Le thème vit désormais dans l'en-tête du tiroir (drawer-top-actions, site.js) — inutile de le dupliquer ici. La recherche, elle, reste dans cette barre (voir plus bas : réordonnée juste avant le burger). */ #themeToggle{display:none} /* Recherche/panier/burger réordonnés (flex order) sans toucher au DOM — le panier garde sa position d'origine, la recherche vient se placer juste avant le burger, comme demandé, sans affecter l'ordre desktop. */ .hd-cart-wrap{order:1} .js-search-btn{order:2} .burger{order:3} /* Les pastilles Impression/Création gardent leur style desktop mais doivent tenir, à deux, dans l'espace libre entre logo et actions sur un petit écran — nettement plus compactes, et sans le chevron (qui suggère un sous-menu au survol, inutilisable au tactile ; voir .nav-drop{display:none} juste au-dessus). */ .main-row{gap:.6rem} .nav-trig{padding:.42rem .55rem;font-size:.6rem;letter-spacing:.01em;gap:0} .nav-trig svg{display:none} /* Logo resserré à la même taille que celui du tiroir (drawer-top) — 2rem (taille desktop) prenait trop de place à côté des pastilles Impression/ Création maintenant visibles ici aussi. */ .main-row .logo{font-size:1.3rem} } @media(max-width:40rem){.hd-social,.hd-sep{display:none}} /* Sous 40rem, le bouton "Échantillons" du header (recherche+panier+CTA+thème+ burger, tous côte à côte) fait déborder .main-row horizontalement — l'action reste accessible via le même bouton dans le tiroir mobile (#echBtnDrawer, voir drawerCtaHtml dans site.js), donc on le masque juste ici. */ @media(max-width:40rem){#echBtnTop{display:none}} /* Le padding standard (.wrap) est le même partout ; sur mobile on resserre légèrement à droite pour que le burger se rapproche du bord (son padding interne sert déjà de zone tactile confortable), et on assure explicitement une marge nette à gauche du logo pour qu'il ne semble jamais collé au bord. */ @media(max-width:40rem){.main-row{padding-left:1.4rem;padding-right:.75rem}} .drawer-social{gap:.6rem} .drawer-social .hd-ico{width:2.1rem;height:2.1rem} .drawer-social .hd-ico svg{width:.85rem;height:.85rem} /* tiroir mobile — 3 zones en colonne : en-tête fixe (logo+thème+fermer), zone du milieu qui centre verticalement familles+bouton Échantillons dans l'espace disponible, pied de page fixe (contacts) séparé par un filet. */ /* Ouverture du tiroir : fondu lent (opacity, .55s) plutôt qu'un slide sec — le léger translateX résiduel reste, mais l'effet dominant est le fade. Chaque .drawer-fam fait un fondu + léger décalage vertical, en cascade (transition-delay croissant par ordre d'apparition) une fois .open posé. */ .drawer{position:fixed;inset:0;z-index:90;background:var(--bg);opacity:0;transform:translateX(2.5rem);transition:opacity .55s ease,transform .55s ease,background-color .35s ease;pointer-events:none;overflow-y:auto;display:flex;flex-direction:column} .drawer.open{opacity:1;transform:none;pointer-events:auto} .drawer-top{display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1.2rem,4vw,3rem);border-bottom:0.0625rem solid var(--line2);flex:none} .drawer-top-actions{display:flex;align-items:center;gap:.6rem} /* overflow-y:auto est ce qui empêche .drawer-mid de déborder sur le header (drawer-top) et le footer (drawer-footer, tous deux flex:none donc de taille fixe) quand une famille dépliée rend son contenu plus haut que l'espace disponible : un flex:1 sans overflow explicite ne clippe rien, le contenu débordait alors symétriquement au-dessus ET en dessous (conséquence du justify-content:center) par-dessus les zones fixes. */ .drawer-mid{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow-y:auto} .drawer-mid nav{padding:1rem clamp(1.2rem,4vw,3rem) 1rem} .drawer-footer{border-top:0.0625rem solid var(--line2);border-bottom:none;justify-content:center;flex:none} /* Trait orange entre les familles Impression et les groupes Création. */ /* Titres de groupe (Impression / Création) — orange, avec un filet fin dessous plutôt qu'un simple trait plein pleine largeur entre les deux groupes (plus lisible, nomme explicitement chaque groupe). */ .drawer-group-title{font-family:'Outfit',monospace;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-bottom:.55rem;margin:.3rem 0 .2rem;border-bottom:0.05rem solid var(--accent-line)} .drawer-group-title:first-child{margin-top:0} .drawer-fam{padding:.9rem 0;border-bottom:0.0625rem solid var(--line2)} /* Cascade au survol de tous les enfants directs de