/* ══════════════════════════════════════════════
   base.css
   Extrait depuis base.html
══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
        body { background-color: var(--bg-page); transition: background-color 0.35s ease; }

        /* MISC */
        .custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; }
        .lock-scroll { overflow: hidden; height: 100vh; }

        /* ── Navbar — hide on scroll down (mobile only) ── */
        @media (max-width: 767px) {
            #main-nav { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
            #main-nav.nav-scroll-hidden { transform: translateY(-110%); }
        }

        /* Tiroir ouvert : la barre et la barre basse s'effacent derrière lui. */
        body.mob-menu-open #main-nav { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
        body.mob-menu-open #mob-bottom-nav { display: none !important; }

        /* ================================================
           TOAST NOTIFICATIONS — Night Kitchen Cinematic
        ================================================ */
        @property --nk-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
        #toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 9999; pointer-events: none; }
        .nk-toast {
            --toast-accent: var(--g1);
            position: relative; display: flex; align-items: center; gap: 14px;
            padding: 16px 24px 16px 18px; min-width: 280px; max-width: 440px;
            border-radius: 18px; pointer-events: auto; cursor: default; isolation: isolate;
            background: rgba(6, 20, 12, 0.88);
            backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
            box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 1px 0 0 rgba(255,255,255,.06) inset, 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
            animation: nkToastEnter 0.6s cubic-bezier(0.16, 1.11, 0.3, 1) forwards;
            opacity: 0; transform: translateY(30px) scale(0.88); overflow: hidden;
        }
        [data-theme="light"] .nk-toast {
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 1px 0 0 rgba(255,255,255,.8) inset, 0 12px 40px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.05);
        }
        .nk-toast--success { --toast-accent: var(--g1); }
        .nk-toast--error { --toast-accent: var(--red); }
        .nk-toast--warning { --toast-accent: var(--amber); }
        .nk-toast--info { --toast-accent: var(--indigo); }
        .nk-toast::before {
            content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px;
            background: conic-gradient(from var(--nk-border-angle, 0deg), transparent 40%, var(--toast-accent) 50%, transparent 60%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
            opacity: 0; animation: nkBorderRotate 3s linear infinite, nkBorderFadeIn 0.6s ease 0.3s forwards; pointer-events: none;
        }
        .nk-toast::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
            background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 60%, transparent 80%);
            animation: nkSweepLight 0.8s ease 0.2s forwards; pointer-events: none; border-radius: 18px;
        }
        [data-theme="light"] .nk-toast::after { background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.3) 40%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.3) 60%, transparent 80%); }
        .nk-toast-grain { position: absolute; inset: 0; border-radius: 18px; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: overlay; }
        .nk-toast-icon { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; z-index: 1; }
        .nk-toast--success .nk-toast-icon { background: rgba(52,211,153,.1); }
        .nk-toast--error .nk-toast-icon { background: rgba(239,68,68,.1); }
        .nk-toast--warning .nk-toast-icon { background: rgba(251,191,36,.08); }
        .nk-toast--info .nk-toast-icon { background: rgba(129,140,248,.08); }
        .nk-toast-icon::before { content: ''; position: absolute; inset: -4px; border-radius: 14px; border: 2px solid var(--toast-accent); opacity: 0; animation: nkIconPulse 0.6s ease 0.35s forwards; }
        .nk-toast-icon svg { width: 17px; height: 17px; stroke-width: 2.5; fill: none; stroke: var(--toast-accent); stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; }
        .nk-toast-icon svg path, .nk-toast-icon svg polyline, .nk-toast-icon svg line, .nk-toast-icon svg circle { stroke-dasharray: 60; stroke-dashoffset: 60; animation: nkDrawIcon 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; }
        .nk-toast-msg { flex: 1; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin: 0; position: relative; z-index: 1; opacity: 0; transform: translateX(-6px); animation: nkTextReveal 0.4s ease 0.15s forwards; }
        /* Le libelle prend l'encre du theme, jamais l'accent : sur le fond clair
           du toast, --toast-accent tombe sous 2:1. C'est la bordure qui porte
           la couleur du type, elle n'a rien a lire. */
        .nk-toast-action { flex-shrink: 0; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--toast-accent); background: transparent; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-primary); cursor: pointer; position: relative; z-index: 1; transition: background .18s ease; }
        .nk-toast-action:hover { background: color-mix(in srgb, var(--toast-accent) 16%, transparent); }
        .nk-toast-action[disabled] { opacity: 0.5; cursor: default; }
        .nk-toast-progress { position: absolute; bottom: 0; left: 12px; right: 12px; height: 2.5px; border-radius: 2px; overflow: visible; z-index: 1; }
        .nk-toast-progress-fill { height: 100%; width: 100%; transform-origin: left; animation: nkProgressShrink 4.5s linear 0.5s forwards; border-radius: 2px; background: var(--toast-accent); box-shadow: 0 0 8px var(--toast-accent), 0 0 2px var(--toast-accent); position: relative; }
        .nk-toast-progress-fill::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--toast-accent); box-shadow: 0 0 10px var(--toast-accent), 0 0 4px var(--toast-accent); }
        .nk-toast-halo { position: absolute; bottom: -12px; left: 15%; right: 15%; height: 24px; border-radius: 50%; background: var(--toast-accent); filter: blur(16px); opacity: 0; animation: nkHaloFadeIn 0.5s ease 0.4s forwards; pointer-events: none; z-index: -1; }
        .nk-toast--exit { animation: nkToastExit 0.45s cubic-bezier(0.4, 0, 1, 1) forwards !important; }
        .nk-toast--exit::before, .nk-toast--exit::after { animation: none !important; opacity: 0 !important; }
        @keyframes nkToastEnter { 0% { opacity: 0; transform: translateY(30px) scale(0.88); } 50% { opacity: 1; transform: translateY(-6px) scale(1.02); } 75% { transform: translateY(2px) scale(0.995); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes nkToastExit { 0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 100% { opacity: 0; transform: translateY(14px) scale(0.92); filter: blur(2px); } }
        @keyframes nkDrawIcon { to { stroke-dashoffset: 0; } }
        @keyframes nkIconPulse { 0% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.3); } }
        @keyframes nkBorderRotate { to { --nk-border-angle: 360deg; } }
        @keyframes nkBorderFadeIn { from { opacity: 0; } to { opacity: 0.7; } }
        @keyframes nkSweepLight { 0% { left: -100%; opacity: 1; } 100% { left: 150%; opacity: 0; } }
        @keyframes nkHaloFadeIn { 0% { opacity: 0; transform: scaleX(0.6); } 100% { opacity: 0.15; transform: scaleX(1); } }
        @keyframes nkProgressShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
        @keyframes nkTextReveal { to { opacity: 1; transform: translateX(0); } }

        /* ──────────────────────────────────────────────────────────
           LOGO partagé (navbar + footer)
           .ft-logo / .ft-logo-icon / .ft-logo-text utilisés aussi
           par le bloc logo navbar — à conserver.
        ────────────────────────────────────────────────────────── */
        .ft-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; width: fit-content; }
        /* Symbole de marque en currentColor, sans tuile ni ombre (spec logo § 4, régime 2).
           La boîte de 44 px reste : la hauteur de pilule ne bouge pas ; le dessin fait 40 px. */
        .ft-logo-icon {
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            color: var(--text-accent);
        }
        .ft-logo-icon svg { width: 40px; height: 40px; display: block; }
        /* Survol et focus clavier : seul le couvercle se soulève. Dans un SVG, le px vaut une unité utilisateur : 5 u ≈ 2 px à 40 px, ≈ 1,2 px à 30 (menu.svg porte scale(0.82)). */
        .ft-logo .couvercle, .gz-marque .couvercle, .mn-marque .couvercle, .mn-rub .couvercle, .mn-tir-l .couvercle { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
        .ft-logo:hover .couvercle, .ft-logo:focus-visible .couvercle, .gz-marque:hover .couvercle, .gz-marque:focus-visible .couvercle, .mn-marque:hover .couvercle, .mn-marque:focus-visible .couvercle, .mn-rub:hover .couvercle, .mn-rub:focus-visible .couvercle, .mn-tir-l:hover .couvercle, .mn-tir-l:focus-visible .couvercle { transform: translateY(-5px); }
        /* Réduction de mouvement : le couvercle se pose encore, sans bouger — même spécificité que la transition, l'ordre tranche. */
        @media (prefers-reduced-motion: reduce) { .ft-logo .couvercle, .gz-marque .couvercle, .mn-marque .couvercle, .mn-rub .couvercle, .mn-tir-l .couvercle { transition: none; } }
        /* Icônes du menu : une pièce par icône bouge au survol et au focus clavier, même grammaire que le couvercle. */
        .ic .bouclier, .ic .croix, .ic .porte-haute, .ic .bouton, .ic .curseur-haut, .ic .curseur-bas,
        .ic .dome, .ic .couteau, .ic .fouet, .ic .etoile, .ic .toque-arriere, .ic .rabat,
        .ic .tour-de-cou { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
        .ic .bouclier { transform-origin: 50px 90px; }
        .ic .croix    { transform-origin: 50px 50px; }
        .ic .fouet    { transform-origin: 50px 8px; }
        .ic .etoile   { transform-origin: 50px 50px; }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .bouclier      { transform: rotate(-6deg); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .croix         { transform: rotate(90deg); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .porte-haute   { transform: translateY(-4px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .bouton        { transform: translateY(4px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .curseur-haut  { transform: translateX(8px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .curseur-bas   { transform: translateX(-8px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .dome          { transform: translateY(-4px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .couteau       { transform: translateY(-4px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .fouet         { transform: rotate(8deg); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .etoile        { transform: scale(1.1); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .toque-arriere { transform: translateY(-4px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .rabat         { transform: translateY(-5px); }
        :is(.mn-outil, .mn-rub, .mn-creer, .mn-som-l, .mn-pied-l, .mn-tir-l, .mn-tir-p):is(:hover, :focus-visible) .ic .tour-de-cou   { transform: translateY(-5px); }
        /* Réduction de mouvement : la pièce se pose encore, sans bouger. Même spécificité, l'ordre tranche. */
        @media (prefers-reduced-motion: reduce) {
          .ic .bouclier, .ic .croix, .ic .porte-haute, .ic .bouton, .ic .curseur-haut, .ic .curseur-bas,
          .ic .dome, .ic .couteau, .ic .fouet, .ic .etoile, .ic .toque-arriere, .ic .rabat,
          .ic .tour-de-cou { transition: none; }
        }
        /* Recettes et Courses n'ont que deux hôtes, la rubrique et le tiroir : ils restent hors du sélecteur partagé. */
        .ic .feuille, .ic .anse { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
        :is(.mn-rub, .mn-tir-l):is(:hover, :focus-visible) .feuille { transform: translateY(-4px); }
        :is(.mn-rub, .mn-tir-l):is(:hover, :focus-visible) .anse    { transform: translateY(-5px); }
        @media (prefers-reduced-motion: reduce) { .ic .feuille, .ic .anse { transition: none; } }
        /* Mot-symbole : Fraunces 600, réglage maison, corps optique figé à 72 (spec logo § 5). */
        .ft-logo-text {
            font-family: 'Fraunces', Georgia, serif;
            font-weight: 600;
            font-variation-settings: 'SOFT' 34, 'WONK' 1, 'opsz' 72;
            letter-spacing: -0.01em;
            line-height: 1;
            white-space: nowrap;
            font-size: 22px;
            color: var(--text-primary);
        }
        .ft-logo-text span { color: var(--text-accent); }

/* ════════════════════════════════════════════════
   GAZETTE — FOOTER
═══════════════════════════════════════════════ */
.gz-footer {
    background: var(--bg-footer);
    position: relative;
    padding: 36px 0 32px;
}

/* flex-wrap : sans lui, la nav-zone (largeur fixe, flex-shrink:0) ne
   laisse aucune place à l'identité dès que la ligne devient trop étroite
   pour les deux — l'identité est alors écrasée à 0px et son contenu
   déborde sous les liens. Le wrap fait passer la nav-zone seule à la
   ligne suivante avant d'en arriver là.
   Pas de justify-content : margin-left:auto sur .gz-nav-zone absorbe déjà
   tout l'espace libre de la ligne, ce qui rend justify-content inerte —
   inutile de garder une déclaration qui n'a plus d'effet.
   gap en row/column distincts : un row-gap de 20px (plutôt que le 48px
   hérité) resserre les deux lignes une fois le wrap actif, sans toucher
   au column-gap qui règle encore l'écart identité/nav-zone sur la ligne
   à 1280px. */
.gz-bande {
    max-width: 1280px; margin: 0 auto;
    padding: 0 32px;
    display: flex; align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px 48px;
}

.gz-identite { min-width: 0; }
/* Lien vers l'accueil. display:flex et non inline-flex : une boîte en ligne
   poserait une ligne de base parasite sous le bloc et décalerait l'accroche.
   width:fit-content empêche le lien de s'étirer sur toute la colonne. */
.gz-marque { display: flex; align-items: center; gap: 13px; text-decoration: none; width: fit-content; }
/* Symbole de marque en currentColor, sans tuile ni ombre (spec logo § 4, régime 2).
   Survol et focus clavier : le couvercle se soulève, même geste que la navbar (règle l.461-462). */
.gz-toque {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-accent);
}
.gz-toque svg { width: 40px; height: 40px; display: block; }
/* Mot-symbole : Fraunces 600, réglage maison, corps optique figé à 72 (spec logo § 5). */
.gz-wordmark {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-variation-settings: 'SOFT' 34, 'WONK' 1, 'opsz' 72;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    font-size: 24px;
    color: var(--text-primary);
}
.gz-accent { color: var(--text-accent); }
.gz-accroche {
    margin: 9px 0 0;
    font-family: 'DM Serif Display', serif;
    font-style: italic; font-size: 14px;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Hauteur calée sur .gz-marque (44px) : les liens se lisent alors sur la
   ligne du wordmark, au lieu de flotter entre lui et l'accroche.
   margin-left:auto pousse la nav-zone à droite dans les deux cas : ligne
   partagée avec l'identité ou ligne propre une fois le wrap déclenché.
   C'est ce margin, pas justify-content sur le parent, qui la maintient
   collée à droite. */
.gz-nav-zone {
    display: flex; align-items: center; gap: 26px;
    flex-shrink: 0; min-height: 44px;
    margin-left: auto;
}
.gz-liens ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0 9px;
}
.gz-liens li { display: flex; align-items: center; gap: 9px; }
/* Séparateurs volontairement neutres : en or ils devenaient plus saillants
   que les liens eux-mêmes. L'or ne sert plus qu'au filet. */
.gz-liens li + li::before {
    content: "·";
    color: var(--text-muted); opacity: .6; font-weight: 700;
}
.gz-liens a {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none; text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color .18s ease, text-decoration-color .18s ease;
}
.gz-liens a:hover {
    color: var(--text-accent);
    text-decoration: underline; text-decoration-color: var(--gold);
}

.gz-reseaux { display: flex; gap: 10px; }

/* Filet fin — seul trait de tout le footer. --gold-faint (.25) y était
   invisible sur fond sombre, mesuré sur capture : le trait part donc de
   --gold-soft en sombre. En clair, --gold-soft retombait à 2,26:1 sur le fond
   ivoire ; --gold, opaque et de même teinte, remonte à 3,08:1 (mesuré au
   navigateur, pas calculé).
   Un seul gradient, et les thèmes ne changent que --filet : deux gradients
   jumeaux finissaient par diverger, et toute surcharge de ::before ailleurs
   (media query mobile) pouvait ramener --gold-faint dans un seul thème. */
.gz-rule-fine {
    --filet: var(--gold-soft);
    max-width: 1280px; margin: 26px auto 0;
    padding: 0 32px;
    height: 1px;
    position: relative;
}
[data-theme="light"] .gz-rule-fine { --filet: var(--gold); }
.gz-rule-fine::before {
    content: "";
    position: absolute; left: 32px; right: 32px; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--filet) 22%,
                var(--filet) 78%, transparent 100%);
}

.gz-legal {
    max-width: 1280px; margin: 16px auto 0;
    padding: 0 32px;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px; font-weight: 500;
    letter-spacing: .2px;
    color: var(--text-muted);
}
.gz-signature {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'DM Serif Display', serif;
    font-style: italic; font-size: 13px;
}
.gz-heart { color: var(--footer-heart); flex-shrink: 0; }

.gz-social-link {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid var(--gold-faint);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
    text-decoration: none;
}
.gz-social-link:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(200,162,90,.06);
    transform: scale(1.08);
}
[data-theme="light"] .gz-social-link:hover {
    background: rgba(168,126,46,.06);
}

/* Mobile : la bande s'empile — et les liens deviennent enfin visibles.
   Avant ce lot, les colonnes étaient masquées sous 768px : aucun lien de
   footer n'était rendu sur téléphone.
   (Ne pas citer ici le nom de la classe supprimée : un test
   cherche son absence dans tout le fichier, commentaires compris.) */
@media (max-width: 767px) {
    .gz-footer {
        padding: 30px 0 calc(68px + env(safe-area-inset-bottom, 0px));
    }
    .gz-bande {
        flex-direction: column; align-items: flex-start;
        gap: 24px; padding: 0 20px;
    }
    /* Les réseaux passent sous les liens : côte à côte ils amputaient la
       grille d'environ 80px et cassaient « Toutes les recettes » en deux
       lignes, vérifié sur capture à 390px. */
    .gz-nav-zone {
        width: 100%; flex-direction: column; align-items: flex-start;
        gap: 20px; min-height: 0;
    }
    .gz-liens { width: 100%; }
    .gz-liens ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
    .gz-liens li + li::before { display: none; }
    /* Six liens (l'ajout de Cookies) : trois rangées pleines. La hauteur de
       cible vient désormais du lien lui-même (44px), plus de l'écart entre
       rangées - row-gap retombe à 0. */
    .gz-liens ul { row-gap: 0; }
    .gz-liens a { display: inline-flex; align-items: center; min-height: 44px; }
    .gz-rule-fine { margin-top: 22px; padding: 0 20px; }
    .gz-rule-fine::before { left: 20px; right: 20px; }
    .gz-legal {
        flex-direction: column; align-items: flex-start; gap: 5px;
        margin-top: 14px; padding: 0 20px; font-size: 11.5px;
    }
}

/* ── GAZETTE — Focus visible (a11y navigation clavier) ─── */
.gz-marque:focus-visible,
.gz-liens a:focus-visible,
.gz-social-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ════════════════════════════════════════════════════
   BOTTOM NAVIGATION MOBILE - ce que la page lui laisse
   La barre elle-même (.mn-basse) vit avec la manchette,
   plus bas dans ce fichier. Ici, la réserve de pied et
   les toasts qui passent au-dessus d'elle.
════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Le footer absorbe la barre du bas : 68 = 56 de barre plate + 12 px d'air,
       la même marge que les toasts. À 56 tout juste, la dernière ligne du pied
       venait toucher le filet. Cette règle vient après .gz-footer et gagne sur
       son raccourci padding : les deux portent donc la même valeur, pour
       qu'aucune des deux ne mente. */
    .site-footer {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    /* Les toasts remontent au-dessus de la barre (56 + 12 px d'air). */
    #toast-container {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }
}

/* Masquer l'élément sur mobile */
@media (max-width: 768px) {
    .hp-mobile-hide {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════
   Modale « recette sans étapes » — globale
   Classes propres nk-noetapes-* pour éviter
   tout conflit avec toutes_recettes.css
══════════════════════════════════════════════════ */
.nk-noetapes-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.nk-noetapes-overlay.active { opacity: 1; visibility: visible; }
.nk-noetapes-card {
  background: rgba(3,18,10,.98); border: 1px solid rgba(251,191,36,.25); border-radius: 28px;
  padding: 32px 24px; max-width: 400px; width: 100%; text-align: center;
  transform: scale(.9); transition: transform .3s;
}
.nk-noetapes-overlay.active .nk-noetapes-card { transform: scale(1); }
[data-theme="light"] .nk-noetapes-card {
  background: rgba(255,253,235,.98); border-color: rgba(217,119,6,.2);
}
.nk-noetapes-icon {
  width: 72px; height: 72px; margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fbbf24;
}
[data-theme="light"] .nk-noetapes-icon {
  background: linear-gradient(135deg, rgba(217,119,6,.14), rgba(245,158,11,.06));
  color: #d97706;
}
.nk-noetapes-title {
  font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700;
  color: #fbbf24; margin-bottom: 8px;
}
[data-theme="light"] .nk-noetapes-title { color: #b45309; }
.nk-noetapes-sub {
  font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.6;
}
[data-theme="light"] .nk-noetapes-sub { color: rgba(10,31,18,.65); }
.nk-noetapes-sub strong { color: #fbbf24; }
[data-theme="light"] .nk-noetapes-sub strong { color: #b45309; }
.nk-noetapes-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nk-noetapes-cancel {
  padding: 12px 20px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15); background: transparent;
  color: rgba(255,255,255,.7); font-weight: 600; cursor: pointer; transition: all .2s; font-size: 14px;
}
.nk-noetapes-cancel:hover { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="light"] .nk-noetapes-cancel { border-color: rgba(10,31,18,.15); color: rgba(10,31,18,.7); }
[data-theme="light"] .nk-noetapes-cancel:hover { background: rgba(10,31,18,.08); color: #0a1f12; }
.nk-noetapes-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 24px; border-radius: 12px; border: none; text-decoration: none;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1c0a00;
  font-weight: 700; cursor: pointer; transition: all .2s; font-size: 14px;
}
.nk-noetapes-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(251,191,36,.4); }

/* ── Trial Banner ─────────────────────────────── */
.trial-banner {
    background: linear-gradient(90deg, var(--g1, #10b981), var(--g2, #059669));
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trial-banner__icon {
    flex-shrink: 0;
}

.trial-banner__link {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

.trial-banner__link:hover {
    opacity: 0.85;
}
/* ── Bannière mode focus FMS ── */
.fms-focus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 50;
}

.fms-focus-banner__text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fms-focus-banner__cancel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  transition: background 0.15s;
}

.fms-focus-banner__cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

@media (max-width: 767px) {
  body.fms-active #mob-bottom-nav [data-bn="planning"],
  body.fms-active #mob-bottom-nav [data-bn="create"] {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════
   Le relevé de la recherche en direct (rs-)
   Maquette validée : design-drafts/2026-09-23-recherche/recherche.css.
   Une liste à l'encre sur l'ardoise 2 : filet d'encre, angles vifs, pas
   d'ombre. Chaque hôte ne règle que la position de .js-search-results.
══════════════════════════════════════════════ */
.rs {
  background: var(--ard-bg-2); color: var(--ard-ink);
  border: 1px solid var(--ard-rule-strong);
  font-family: var(--ard-sans); text-align: left;
}
/* Sous le souligné de la manchette le relevé pend : le trait du champ lui sert de bord haut. */
.mn-cherche .rs { border-top: 0; }
.rs-k {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 22px 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1.3;
  color: var(--ard-gold-text);
}
.rs-k::before { content: ""; flex: none; width: 16px; height: 1px; background: var(--ard-gold-text); opacity: .75; }
.rs-liste { list-style: none; margin: 0; padding: 0; }
.rs-l {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  padding: 12px 22px; border-top: 1px solid var(--ard-rule);
  color: var(--ard-ink); text-decoration: none;
  transition: background-color var(--ard-tr);
}
.rs-li:first-child .rs-l { border-top: 0; }
.rs-vign { display: block; width: 56px; height: 56px; border-radius: 2px; object-fit: cover; background: var(--ard-bg-3); }
.rs-vign--vide { display: grid; place-items: center; color: var(--ard-gold-text); }
.rs-vign--vide svg { display: block; width: 26px; height: 26px; opacity: .8; }
.rs-corps { min-width: 0; }
.rs-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 17px; line-height: 1.2; letter-spacing: -.01em;
  transition: color var(--ard-tr);
}
.rs-m { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--ard-ink-3); font-variant-numeric: tabular-nums; }
.rs-m i { font-style: normal; padding: 0 6px; }
/* Le Nutri-Score en tampon à l'encre : la lettre reste, la pastille de couleur part. */
.rs-ns {
  display: inline-flex; align-items: center; align-self: start; margin-top: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ard-ink-3);
}
.rs-ns b { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ard-rule-strong); font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--ard-ink); }
/* Survol, focus clavier et flèches : un seul état. Pas de :hover, search.js pose
   .rs-l--actif sous la souris comme sous les flèches : une seule ligne surlignée,
   celle qu'Entrée ouvrira. Filet d'or à gauche, titre à l'or. La classe vaut
   aussi pour le pied : chaque règle nomme donc son élément (.rs-l.rs-l--actif),
   sinon le filet absolu du ::before s'étend à tout le relevé depuis le pied. */
.rs-l:focus-visible, .rs-l.rs-l--actif { background: var(--ard-bg-3); outline: none; }
.rs-l:focus-visible::before, .rs-l.rs-l--actif::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--ard-gold-text);
}
.rs-l:focus-visible .rs-t, .rs-l.rs-l--actif .rs-t { color: var(--ard-gold-text); }

.rs-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; padding: 0 22px; border-top: 1px solid var(--ard-rule);
  font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.3;
  color: var(--ard-ink); text-decoration: none;
  transition: background-color var(--ard-tr);
}
.rs-pied:focus-visible, .rs-pied.rs-l--actif {
  background: var(--ard-bg-3); outline: none;
  box-shadow: inset 2px 0 0 var(--ard-gold-text); color: var(--ard-gold-text);
}
.rs-pied svg { width: 16px; height: 16px; flex: none; color: var(--ard-gold-text); }
.rs q { quotes: "«\00a0" "\00a0»"; }
.rs-pied q { text-transform: none; letter-spacing: .2px; font-family: var(--ard-serif); font-style: italic; font-weight: 400; font-size: 14px; }

/* Chargement : un filet d'or qui court sous l'en-tête. */
.rs-charge { position: relative; height: 1px; margin: 0 22px; background: var(--ard-rule); overflow: hidden; }
.rs-charge::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--ard-gold-text); animation: rs-court 1.1s cubic-bezier(.4,0,.2,1) infinite; }
.rs-charge-t { margin: 0; padding: 16px 22px 20px; font-family: var(--ard-serif); font-style: italic; font-size: 15px; color: var(--ard-ink-2); }
@keyframes rs-court { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .rs-charge::after { animation: none; left: 0; }
  .rs-l, .rs-t, .rs-pied { transition: none; }
}

/* Aucun résultat : une phrase, une piste, une sortie. */
.rs-vide { padding: 18px 22px 20px; }
.rs-k + .rs-vide { padding-top: 6px; }
.rs-vide-t { margin: 0; font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--ard-ink); }
.rs-vide-t q { font-style: italic; color: var(--ard-gold-text); }
.rs-vide-s { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ard-ink-3); }

/* ════════════════════════════════════════════════════════════════════
   LA MANCHETTE « LA UNE » (refonte du 22/09/2026)
   Transposée de la maquette validée (design-drafts/2026-09-22-navbar/b.css).
   Les sélecteurs d'état qui visent l'élément porteur lui-même
   (#main-nav, #user-menu-dropdown, #mobile-menu, body) exigent aussi sa
   classe mn- : l'identifiant seul ne dit pas quelle version du composant
   est là, et l'ancienne barre comme l'ancien menu mobile les ont portés.
═══════════════════════════════════════════════════════════════════════ */

/* La réserve de haut de page : le contenu commence sous la manchette dépliée. */
.mn-reserve { padding-top: var(--nav-h); }

/* Les icônes du jeu s'incluent sans taille (fichiers de brand/) : la boîte
   qui les accueille les dimensionne, le SVG la remplit. */
:is(.mn-cocotte, .mn-outil-ic, .mn-rub-ic, .mn-creer-ic, .mn-som-ic, .mn-pied-ic, .mn-tir-ic, .mn-tir-pic) { display: block; }
:is(.mn-cocotte, .mn-outil-ic, .mn-rub-ic, .mn-creer-ic, .mn-som-ic, .mn-pied-ic, .mn-tir-ic, .mn-tir-pic) > svg { display: block; width: 100%; height: 100%; }

/* ── La manchette « La une » ───────────────────────────────────────────
   Deux étages : un folio de 30 px (date, rubrique, outils) et un étage
   principal de 68 px (mot-logo, quatre rubriques, recherche, création,
   médaillon), séparés du contenu par un double filet de 5 px.
   30 + 68 + 5 = 103 px, la valeur de --nav-h en bureau.
   Au défilement la manchette se replie à 61 px : seuls transform et
   opacity sont animés, jamais une hauteur. */
.mn-manchette {
  --mn-folio-h: 30px;
  --mn-etage-h: 68px;
  --mn-gut: 32px;
  --mn-shell: 1440px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--ard-bg);
  color: var(--ard-ink);
  font-family: var(--ard-sans);
  transition: transform var(--ard-tr), background-color var(--ard-tr), color var(--ard-tr);
}

/* Le folio : la ligne fine du haut. */
.mn-folio {
  height: var(--mn-folio-h);
  border-bottom: 1px solid var(--ard-rule);
  transition: opacity var(--ard-tr), visibility 0s linear 0s;
}
.mn-folio-in {
  height: 100%; max-width: var(--mn-shell); margin: 0 auto; padding: 0 var(--mn-gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Deux corps différents (italique 13, capitales 11) : alignés sur la ligne de base, pas au centre. */
.mn-folio-g { display: flex; align-items: baseline; gap: 14px; min-width: 0; margin: 0; white-space: nowrap; }
.mn-date {
  font-family: var(--ard-serif); font-style: italic; font-weight: 400;
  font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 13px; line-height: 1; color: var(--ard-ink-2);
}
.mn-folio-rub {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1;
  color: var(--ard-gold-text);
}
.mn-folio-rub::before {
  content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 12px 0 0;
  vertical-align: 4px; background: var(--ard-gold-text); opacity: .75;
}

.mn-outils { display: flex; align-items: center; height: 100%; margin-right: -8px; }
.mn-outils li { display: flex; align-items: center; height: 100%; }
.mn-outils li:not(:last-child)::after { content: ""; width: 1px; height: 11px; margin: 0 8px; background: var(--ard-rule-strong); }
.mn-outil {
  display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 8px;
  font-family: var(--ard-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
  color: var(--ard-ink-2); white-space: nowrap; cursor: pointer;
  transition: color var(--ard-tr);
}
.mn-outil:hover { color: var(--ard-ink); }
.mn-outil-ic { width: 14px; height: 14px; flex: none; }

/* Le compteur : un petit tampon or à angles vifs, jamais une pastille rouge. */
.mn-tampon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 20px; height: 16px; padding: 0 4px;
  border: 1px solid var(--ard-gold-text);
  font-family: var(--ard-sans); font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: .3px; line-height: 1;
  font-variant-numeric: tabular-nums; text-transform: none;
  color: var(--ard-gold-text);
}
/* Le sondage de la modération éteint un tampon par .hidden : la classe utilitaire,
   rangée dans une couche Tailwind, perd contre cette feuille. */
.mn-tampon.hidden { display: none; }

/* L'étage principal. */
.mn-etage { height: var(--mn-etage-h); }
.mn-etage-in {
  position: relative; height: 100%; max-width: var(--mn-shell); margin: 0 auto; padding: 0 var(--mn-gut);
  display: flex; align-items: center;
  transition: transform var(--ard-tr);
}
.mn-carre {
  position: relative; display: none; place-items: center;
  width: 44px; height: 44px; color: var(--ard-ink); cursor: pointer;
}
.mn-carre svg { width: 22px; height: 22px; }

/* Deux mots-logos dans une même case. La une (bureau déployé) : 32 px. Le titre
   courant (bureau replié, mobile) : 22 px, la rubrique dessous et la cocotte
   centrée sur les deux lignes. La case garde la largeur de la une : au repli,
   rien ne bouge à l'horizontale. */
.mn-tete { position: relative; display: flex; align-items: center; flex: none; }
.mn-marque { display: grid; grid-template-columns: auto auto; align-items: center; }
.mn-marque--une { column-gap: 12px; transition: opacity var(--ard-tr), visibility 0s linear 0s; }
.mn-marque--courante {
  position: absolute; left: 0; top: 50%; column-gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-50%);
  transition: opacity var(--ard-tr), visibility 0s linear .22s;
}
.mn-cocotte { grid-column: 1; grid-row: 1; color: var(--ard-accent-text); }
.mn-marque--une .mn-cocotte { width: 44px; height: 44px; }
.mn-marque--courante .mn-cocotte { grid-row: 1 / span 2; width: 32px; height: 32px; }
.mn-mot {
  grid-column: 2; grid-row: 1;
  font-family: var(--ard-serif); font-weight: 600;
  font-variation-settings: 'SOFT' 34, 'WONK' 1, 'opsz' 72;
  line-height: 1; letter-spacing: -.01em; white-space: nowrap;
  color: var(--ard-ink);
}
.mn-marque--une .mn-mot { font-size: 32px; }
.mn-marque--courante .mn-mot { font-size: 22px; }
.mn-mot-accent { color: var(--ard-accent-text); }
.mn-tete-rub {
  grid-column: 2; grid-row: 2; margin: 4px 0 0;
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; line-height: 1;
  color: var(--ard-gold-text); white-space: nowrap;
}

/* Les rubriques : capitales d'ordonnance, icône du jeu, souligné or quand actif. */
.mn-rubriques { position: relative; display: flex; align-items: stretch; height: 100%; margin-left: 36px; padding-left: 36px; }
.mn-rubriques::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 28px; margin-top: -14px; background: var(--ard-rule-strong); }
.mn-rub-liste { display: flex; align-items: stretch; gap: 30px; height: 100%; }
.mn-rub-liste li { display: flex; }
.mn-rub {
  position: relative; display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
  color: var(--ard-ink); white-space: nowrap;
}
.mn-rub::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: transparent; transition: background-color var(--ard-tr);
}
.mn-rub:hover::after { background: var(--ard-rule-strong); }
.mn-rub[aria-current="page"]::after { background: var(--ard-gold-text); }
/* L'or des icônes du tiroir : le texte mène, l'icône accompagne. */
.mn-rub-ic { width: 18px; height: 18px; flex: none; color: var(--ard-gold-text); transition: color var(--ard-tr); }
.mn-cadenas { width: 12px; height: 12px; flex: none; color: var(--ard-gold-text); }

/* À droite : recherche soulignée, création, médaillon. */
.mn-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.mn-cherche {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 288px; height: 36px;
  border-bottom: 1px solid var(--ard-rule-strong);
  transition: border-color var(--ard-tr), box-shadow var(--ard-tr);
}
.mn-cherche:focus-within { border-bottom-color: var(--ard-gold-text); box-shadow: 0 1px 0 var(--ard-gold-text); }
.mn-cherche-ic { width: 17px; height: 17px; flex: none; color: var(--ard-ink-2); transition: color var(--ard-tr); }
.mn-cherche:focus-within .mn-cherche-ic { color: var(--ard-gold-text); }
.mn-cherche-champ {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  -webkit-appearance: none; appearance: none;
  font-family: var(--ard-sans); font-size: 13.5px; font-weight: 400; color: var(--ard-ink);
}
.mn-cherche-champ::placeholder { color: var(--ard-ink-2); opacity: 1; }
/* Chromium réserve la place de sa croix de recherche : elle rognait l'ellipse du placeholder. */
.mn-cherche-champ::-webkit-search-decoration,
.mn-cherche-champ::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
/* Même chose sur tous les champs de recherche en direct (le carnet de l'accueil) :
   la croix de Chromium, blanche ou bleue, sort de la palette. */
.js-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
/* L'anneau global des champs (night_kitchen.css, 0,1,1) battait l'outline:0 ci-dessus :
   le souligné qui passe à l'or reste le seul indicateur de focus. */
.mn-cherche-champ:focus-visible { outline: none; }
/* Effacer : dans le champ, à l'encre 2 et en 14 px, là où la croix carrée de
   l'écran mobile (22 px, encre pleine) ferme l'écran. Rien à effacer, rien à montrer. */
.mn-cherche-efface {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: -7px;
  padding: 0; border: 0; background: transparent; color: var(--ard-ink-2); cursor: pointer;
  transition: color var(--ard-tr);
}
.mn-cherche-efface svg { width: 14px; height: 14px; }
.mn-cherche-efface:hover { color: var(--ard-gold-text); }
.mn-cherche-efface:focus-visible { outline: 2px solid var(--ard-gold-text); outline-offset: -2px; }
.mn-cherche-champ:placeholder-shown + .mn-cherche-efface { display: none; }
/* Le relevé pend au double filet. 100 % s'arrête au-dessus du souligné (1 px) ; il descend
   ensuite du demi-étage restant (68 - 36) / 2 et des 5 px du filet. 460 px, bord droit
   calé sur celui du champ. */
.mn-cherche > .js-search-results {
  position: absolute; z-index: 60;
  top: calc(100% + (var(--mn-etage-h) - 36px) / 2 + 6px); right: 0; left: auto;
  width: 460px; margin: 0;
}

.mn-creer {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: none;
  height: 40px; padding: 0 18px 0 16px;
  background: var(--ard-accent); color: var(--ard-on-accent);
  border: 1px solid var(--ard-accent); border-radius: 2px;
  font-family: var(--ard-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: filter var(--ard-tr), transform var(--ard-tr);
}
.mn-creer:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mn-creer-ic { width: 12px; height: 12px; flex: none; }
.mn-creer-court { display: none; }
.mn-connexion {
  display: inline-flex; align-items: center; height: 40px; padding: 0 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
  color: var(--ard-ink);
  text-decoration: underline; text-decoration-color: var(--ard-rule-strong); text-underline-offset: 6px;
  transition: text-decoration-color var(--ard-tr);
}
.mn-connexion:hover { text-decoration-color: var(--ard-gold-text); }

/* Le médaillon seul : l'anneau d'or des portraits de la page (1 px + 3 px d'air + 1 px). */
.mn-medaillon {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: var(--ard-bg-2);
  border: 1px solid var(--ard-gold-text);
  box-shadow: 0 0 0 3px var(--ard-bg), 0 0 0 4px var(--hn-gold-18);
  cursor: pointer; transition: box-shadow var(--ard-tr);
}
.mn-medaillon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Le médaillon n'a pas overflow:hidden (c'était l'img qui portait son propre rayon) : .ini a besoin du sien. */
.mn-medaillon > .ini { border-radius: 50%; }
.mn-medaillon:hover,
.mn-manchette:has(#user-menu-dropdown:not(.hidden)) .mn-medaillon { box-shadow: 0 0 0 3px var(--ard-bg), 0 0 0 4px var(--ard-gold-text); }
/* Replié, le médaillon est à 8 px du haut de la fenêtre : top -3 laisse 6 px d'air au-dessus
   du tampon et pose son centre sur l'anneau, à côté du visage. */
.mn-tampon--pose { position: absolute; top: -3px; right: -10px; background: var(--ard-bg); }
.mn-medaillon .mn-tampon--pose { display: none; }

/* Le double filet maître : 1 + 3 + 1 px, net, pleine largeur. Or décoratif sur
   l'ardoise ; sur le papier il tombe à 2,12:1, d'où l'or assombri. */
.mn-filets, .gz-rule-double { height: 5px; border-top: 1px solid var(--ard-gold); border-bottom: 1px solid var(--ard-gold); }
[data-theme="light"] .mn-filets, [data-theme="light"] .gz-rule-double { border-color: var(--ard-gold-text); }

/* Le repli au défilement (bureau seulement) : transform et opacity, rien d'autre.
   La manchette monte de 42 px (folio 30 + 12 px d'étage) : restent visibles 56 px
   d'étage et le double filet. Le contenu de l'étage redescend de 6 px pour rester
   centré dans ces 56 px ; le souligné des rubriques remonte d'autant. */
@media (min-width: 1024px) {
  #main-nav.mn-manchette.is-scrolled { transform: translateY(-42px); }
  #main-nav.is-scrolled .mn-etage-in { transform: translateY(6px); }
  #main-nav.is-scrolled .mn-folio { opacity: 0; visibility: hidden; transition: opacity var(--ard-tr), visibility 0s linear .22s; }
  #main-nav.is-scrolled .mn-marque--une { opacity: 0; visibility: hidden; transition: opacity var(--ard-tr), visibility 0s linear .22s; }
  #main-nav.is-scrolled .mn-marque--courante { opacity: 1; visibility: visible; transition: opacity var(--ard-tr), visibility 0s; }
  #main-nav.is-scrolled .mn-rub::after { bottom: 6px; }
  /* Le champ est descendu de 6 px : le relevé remonte d'autant pour rester pendu au filet. */
  #main-nav.is-scrolled .mn-cherche > .js-search-results { top: calc(100% + (var(--mn-etage-h) - 36px) / 2); }
  /* Le folio parti, le compteur de notifications passe sur le médaillon. */
  #main-nav.is-scrolled .mn-medaillon .mn-tampon--pose { display: inline-flex; }
}

/* ── Le sommaire du compte (bureau) ─────────────────────────────────────
   Il pend au double filet de la manchette : top 100 %, calé à droite sur le médaillon. */
.mn-sommaire {
  display: none; position: absolute; top: 100%; z-index: 120;
  right: max(var(--mn-gut), calc((100% - var(--mn-shell)) / 2 + var(--mn-gut)));
  width: 680px;
  background: var(--ard-bg-2); color: var(--ard-ink);
  border: 1px solid var(--ard-rule-strong); border-top: 0;
  font-family: var(--ard-sans);
}
@media (min-width: 1024px) { #user-menu-dropdown.mn-sommaire:not(.hidden) { display: block; } }

.mn-som-tete {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 20px; align-items: center;
  padding: 24px 30px 22px;
}
.mn-som-portrait {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--ard-gold-text);
  box-shadow: 0 0 0 3px var(--ard-bg-2), 0 0 0 4px var(--hn-gold-18);
}
.mn-som-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mn-som-nom {
  display: inline-block;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 24px; line-height: 1.1; letter-spacing: -.015em; color: var(--ard-ink);
  transition: color var(--ard-tr);
}
.mn-som-nom:hover { color: var(--ard-gold-text); }
.mn-som-grade {
  margin: 7px 0 0;
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; line-height: 1.2;
  color: var(--ard-gold-text);
}

/* La progression, comme sur le profil : un filet, une part en or, un repère. */
.mn-xp { grid-column: 1 / -1; }
.mn-xp-piste { position: relative; display: block; height: 1px; background: var(--ard-rule-strong); }
.mn-xp-part { position: absolute; left: 0; top: -1px; display: block; height: 3px; background: var(--ard-gold-text); }
.mn-xp-part::after { content: ""; position: absolute; right: -1px; top: -3px; width: 2px; height: 9px; background: var(--ard-gold-text); }
.mn-xp-leg {
  display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 0;
  font-size: 12.5px; line-height: 1.3; color: var(--ard-ink-3); font-variant-numeric: tabular-nums;
}
.mn-xp-leg strong { font-weight: 600; color: var(--ard-ink); }

.mn-som-corps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px;
  padding: 20px 30px 14px; border-top: 1px solid var(--ard-rule);
}
.mn-som-k {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1;
  color: var(--ard-gold-text);
}
.mn-som-k::before { content: ""; width: 16px; height: 1px; background: var(--ard-gold-text); opacity: .75; }
.mn-som-l {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start;
  width: 100%; padding: 9px 0; text-align: left; color: var(--ard-ink); cursor: pointer;
}
.mn-som-ic { grid-row: 1 / 3; width: 20px; height: 20px; margin-top: 1px; color: var(--ard-gold-text); }
.mn-som-t {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 17px; line-height: 1.2; letter-spacing: -.01em;
  transition: color var(--ard-tr);
}
.mn-som-s { grid-column: 2; margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--ard-ink-3); }
.mn-som-l:hover .mn-som-t { color: var(--ard-gold-text); }
.mn-som-l[aria-current="page"] .mn-som-t {
  text-decoration: underline; text-decoration-color: var(--ard-gold-text);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}

.mn-som-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 6px 30px; border-top: 1px solid var(--ard-rule);
}
.mn-pied-l {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px;
  font-family: var(--ard-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1;
  color: var(--ard-ink-2); cursor: pointer; transition: color var(--ard-tr);
}
.mn-pied-l:hover { color: var(--ard-ink); }
.mn-pied-ic { width: 15px; height: 15px; flex: none; }
.mn-tablier { margin-left: auto; }

/* Tiroir, écran de recherche et barre basse : cachés en bureau. */
.mn-tiroir, .mn-recherche, .mn-basse { display: none; }

/* ── Paliers de l'étage principal ─────────────────────────────────────
   Mesuré au navigateur : en mode libellés écrits, l'air entre la
   dernière rubrique et la recherche vaut « largeur - 1226,3 px ». Il tombe
   à zéro vers 1227 px, donc 1250 est le plus bas seuil qui garde une
   gouttière d'air (23,7 px).
   Sous ce seuil, les actions prennent la place que les libellés
   libèrent et la recherche s'y étire jusqu'à 380 px : sans elle, la
   barre paraît vidée. Une marge fixe remplace la marge automatique,
   sinon rien ne garderait l'air quand la recherche s'étire. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .mn-rubriques { margin-left: 24px; padding-left: 24px; }
  .mn-rub-liste { gap: 22px; }
  .mn-actions { gap: 22px; }
  .mn-creer-long { display: none; }
  .mn-creer-court { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1249px) {
  /* Sur la manchette et non sur l'étage : le folio et le sommaire
     calent leur bord droit sur la même gouttière que le médaillon. */
  .mn-manchette { --mn-gut: 24px; }
  .mn-rub { justify-content: center; }
  .mn-rub-ic { width: 20px; height: 20px; }
  /* Le nom se pose sous l'icône, dans l'étage : 7 px au-dessus du
     souligné (1 px manchette repliée, mesuré), donc au-dessus du double filet. */
  .mn-rub-t {
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 1.2px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ard-tr);
  }
  .mn-rub:hover .mn-rub-t,
  .mn-rub:focus-visible .mn-rub-t { opacity: 1; }
  .mn-actions { flex: 1 1 auto; justify-content: flex-end; margin-left: var(--mn-gut); }
  .mn-cherche { flex: 1 1 auto; max-width: 380px; }
}

/* ── Mobile et tablette (< 1024) ──────────────────────────────────────── */
@media (max-width: 1023px) {
  .mn-folio, .mn-rubriques, .mn-actions { display: none; }
  .mn-etage { height: 56px; }
  /* 1fr auto 1fr : le mot-logo reste au centre exact, quelle que soit la largeur du burger. */
  .mn-etage-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px; }
  .mn-carre { display: grid; }
  .mn-burger { display: flex; align-items: center; gap: 7px; justify-self: start; width: auto; padding: 0 10px; }
  .mn-loupe { justify-self: end; }
  .mn-tete { justify-self: center; }
  .mn-marque--une { display: none; }
  .mn-marque--courante { position: static; transform: none; opacity: 1; visibility: visible; min-height: 44px; align-content: center; }

  /* Le tiroir « Sommaire » : plein écran, grands titres Fraunces. */
  .mn-tiroir {
    position: fixed; inset: 0; z-index: 300; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ard-bg); color: var(--ard-ink); font-family: var(--ard-sans);
  }
  #mobile-menu.mn-tiroir:not(.hidden) { display: block; }
  body:has(#mobile-menu.mn-tiroir:not(.hidden)) { overflow: hidden; }

  /* L'écran de recherche : le champ, le double filet, le relevé. Sa hauteur suit
     la zone visible (search.js) : sur iOS le clavier recouvre un panneau fixe. */
  .mn-recherche {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: var(--mn-rch-h, 100%);
    flex-direction: column;
    background: var(--ard-bg); color: var(--ard-ink); font-family: var(--ard-sans);
  }
  #mn-recherche.mn-recherche:not(.hidden) { display: flex; }
}

.mn-rch { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mn-rch-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 8px;
  flex: none; height: 64px; padding: 0 8px 0 20px;
}
.mn-rch-champ { width: 100%; height: 46px; }
/* 16 px : iOS ne zoome pas au focus. */
.mn-rch-champ .mn-cherche-champ { font-size: 16px; }
/* Cible tactile de 44 px pleine : aucune marge négative, elle chevaucherait « Fermer ». */
.mn-rch-champ .mn-cherche-efface { width: 44px; height: 44px; margin-right: 0; }
.mn-rch > .mn-filets { flex: none; }
.mn-rch-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Dans le flux, pas en liste déroulante : toutes_recettes.css place tout .js-search-results en absolu. */
.mn-rch-corps > .js-search-results { position: static; margin: 0; }
/* Sous trois lettres le relevé se cache : l'aide prend sa place. */
.mn-rch-corps > .js-search-results:not(.hidden) + .mn-rch-aide { display: none; }
.mn-rch-aide { padding: 26px 20px; }
.mn-rch-aide-t {
  margin: 0; font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: var(--ard-ink);
}
.mn-rch-aide-s { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ard-ink-2); }
/* Le relevé pleine largeur, sans cadre : l'écran lui sert de fond. */
.mn-rch .rs { background: transparent; border: 0; }
.mn-rch :is(.rs-k, .rs-l, .rs-pied, .rs-vide, .rs-charge-t) { padding-left: 20px; padding-right: 20px; }
.mn-rch .rs-charge { margin: 0 20px; }
.mn-rch .mn-rch-aide .rs-k { padding: 0 0 14px; }
.mn-rch .rs-l { grid-template-columns: 60px minmax(0, 1fr) auto; }
.mn-rch .rs-vign { width: 60px; height: 60px; }
.mn-rch .rs-t { font-size: 18px; }
/* Sans cadre, le filet d'or ne déborde plus sur un bord : il reste dans l'écran. */
.mn-rch .rs-l:is(:focus-visible, .rs-l--actif)::before { left: 0; }

.mn-tir-haut { position: sticky; top: 0; z-index: 1; background: var(--ard-bg); }
.mn-tir-tete { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 56px; padding: 0 8px; }
.mn-tir-tete .mn-carre { display: grid; }
.mn-tir-titre {
  display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 22px; line-height: 1; letter-spacing: -.01em; color: var(--ard-ink);
}
.mn-tir-date { font-style: italic; font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--ard-ink-2); }

.mn-tir-corps { max-width: 560px; margin: 0 auto; padding: 16px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }

.mn-tir-moi {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: center;
  margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ard-rule);
}
.mn-tir-portrait {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--ard-gold-text);
  box-shadow: 0 0 0 3px var(--ard-bg), 0 0 0 4px var(--hn-gold-18);
}
.mn-tir-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mn-tir-nom {
  display: block;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 22px; line-height: 1.1; letter-spacing: -.015em; color: var(--ard-ink);
}
.mn-tir-grade {
  display: block; margin-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; line-height: 1.2;
  color: var(--ard-gold-text);
}
.mn-tir-xp { grid-column: 1 / -1; display: block; }
.mn-tir-xp-leg { display: block; margin-top: 11px; font-size: 12.5px; line-height: 1.3; color: var(--ard-ink-3); font-variant-numeric: tabular-nums; }
.mn-tir-xp-leg strong { font-weight: 600; color: var(--ard-ink); }

.mn-tir-k {
  display: flex; align-items: center; gap: 10px; margin: 24px 0 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1;
  color: var(--ard-gold-text);
}
.mn-tir-k::before { content: ""; width: 18px; height: 1px; background: var(--ard-gold-text); opacity: .75; }
.mn-tir-une li { border-bottom: 1px solid var(--ard-rule); }
.mn-tir-l {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 0;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 28px; line-height: 1.1; letter-spacing: -.02em; color: var(--ard-ink);
}
.mn-tir-ic { width: 22px; height: 22px; flex: none; color: var(--ard-gold-text); }
.mn-tir-l .mn-cadenas { width: 16px; height: 16px; }

.mn-tir-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.mn-tir-p {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; text-align: left;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 17px; line-height: 1.15; letter-spacing: -.01em; color: var(--ard-ink); cursor: pointer;
}
.mn-tir-p .mn-tampon { margin-left: -2px; }
.mn-tir-pic { width: 18px; height: 18px; flex: none; color: var(--ard-gold-text); }
.mn-tir-p[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--ard-gold-text);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.mn-tir-reglages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.mn-tablier--tir { margin: 22px 0 0; min-height: 44px; }
.mn-tir-creer { display: none; }
@media (min-width: 768px) { .mn-tir-creer { display: grid; margin-top: 20px; } }

.mn-tir-accroche {
  margin: 10px 0 0;
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 32px; line-height: 1.05; letter-spacing: -.022em; color: var(--ard-ink);
}
.mn-tir-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ard-ink-2); }
.mn-tir-portes { display: grid; gap: 10px; margin-top: 20px; }
.mn-creer--large { width: 100%; height: 48px; }
.mn-tir-connexion {
  display: flex; align-items: center; justify-content: center; height: 48px;
  border: 1px solid var(--hn-gold-38); border-radius: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
  color: var(--ard-gold-text);
}
.mn-tir-atouts { display: grid; gap: 10px; margin-top: 18px; }
.mn-tir-atouts li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ard-ink-2); }
.mn-tir-atouts svg { width: 16px; height: 16px; flex: none; color: var(--ard-gold-text); }

/* ── La barre basse (< 768, membres) : plate, filet haut, icônes du jeu ── */
@media (max-width: 767px) {
  .mn-basse {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    /* Colonnes implicites et non repeat(5) : la sélection FMS masque deux
       liens, les trois restants se partagent la largeur sans laisser de trou. */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ard-bg); border-top: 1px solid var(--ard-rule-strong);
    font-family: var(--ard-sans);
  }
}
.mn-basse-l {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; color: var(--ard-ink-2); transition: color var(--ard-tr);
}
.mn-basse-ic { display: grid; place-items: center; height: 30px; }
.mn-basse-ic > svg { width: 22px; height: 22px; }
.mn-basse-t { font-size: 11px; font-weight: 500; letter-spacing: .2px; line-height: 1; white-space: nowrap; }
.mn-basse-l[aria-current="page"] { color: var(--ard-ink); }
.mn-basse-l[aria-current="page"] .mn-basse-ic { color: var(--ard-gold-text); }
.mn-basse-l[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; margin-left: -14px; background: var(--ard-gold-text); }
.mn-basse-carre {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 2px;
  background: var(--ard-accent); color: var(--ard-on-accent);
}
.mn-basse-carre svg { width: 13px; height: 13px; }

/* ── Focus clavier : anneau net, angles vifs ──────────────────────────── */
:is(.mn-marque, .mn-creer, .mn-connexion, .mn-carre, .mn-som-nom, .mn-som-l, .mn-pied-l,
    .mn-tir-l, .mn-tir-p, .mn-tir-moi, .mn-tir-connexion, .mn-basse-l):focus-visible {
  outline: 2px solid var(--ard-gold-text); outline-offset: 3px; border-radius: 0;
}
/* Le folio est haut de 30 px : l'anneau se pose à l'intérieur du lien. */
.mn-outil:focus-visible { outline: 2px solid var(--ard-gold-text); outline-offset: -3px; }
/* Une rubrique occupe toute la hauteur de l'étage (pour son souligné) : l'anneau
   entoure l'icône et le nom, sans toucher le folio ni le double filet. */
.mn-rub:focus-visible { outline: none; }
.mn-rub:focus-visible::before { content: ""; position: absolute; top: 50%; left: -9px; right: -9px; height: 38px; margin-top: -19px; border: 2px solid var(--ard-gold-text); }
.mn-medaillon:focus-visible { outline: 2px solid var(--ard-gold-text); outline-offset: 6px; }
/* En mode icônes seules le nom se révèle SOUS l'icône : l'anneau de
   38 px le barrerait. L'icône remonte de 5 px et l'anneau se resserre
   à 28 px autour d'elle, loin du nom. */
@media (min-width: 1024px) and (max-width: 1249px) {
  .mn-rub-ic { position: relative; top: -5px; }
  .mn-rub:focus-visible::before { top: calc(50% - 5px); height: 28px; margin-top: -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-manchette, .mn-manchette *, .mn-tiroir *, .mn-recherche *, .mn-basse * { transition-duration: .001ms !important; animation: none !important; }
}