/* Troyes Mille Pages — menu unique « La casse » (navbar à tiroirs)
   Chargé sur TOUT le site : autonome, ne dépend que des tokens --tmp-* de custom.css.
   Classes préfixées (tiroir-, casse-, tsp-) pour ne pas croiser home-imprimerie.css. */

@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/courier-prime-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/courier-prime-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.nav-casse {
    --casse-mono: "Courier Prime", ui-monospace, "Courier New", monospace;
    --casse-filet: 2px;
    position: sticky; top: 0; z-index: 1030;
    background: var(--tmp-papier);
    border-bottom: var(--casse-filet) solid var(--tmp-encre);
}
body.admin-bar .nav-casse { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar .nav-casse { top: 0; } }
/* Home : la nav est DANS .zone-une (header-imprimerie.php) — sticky le temps de la une,
   puis poussée par la fin de la zone quand la planche rubriques arrive et s'épingle */

/* La barre reste AU-DESSUS du voile dans le contexte d'empilement du nav — sans ça,
   le voile actif intercepte le survol des boutons → mouseleave → oscillation ouvre/ferme */
.nav-casse-barre { position: relative; z-index: 1031; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.logo-casse img { display: block; height: 72px; width: auto; }

.nav-entrees { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-entrees > li { position: relative; }
.nav-casse .declencheur {
    appearance: none; background: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: baseline; gap: .5em;
    padding: 1rem .9rem; color: var(--tmp-encre);
    font-family: var(--casse-mono); font-weight: 700; text-transform: uppercase; font-size: .875rem; letter-spacing: .05em;
    text-decoration: none;
}
.nav-casse .declencheur .num { color: var(--tmp-rouge); font-weight: 700; }
.nav-casse .declencheur .plus {
    font-weight: 700; display: inline-block; translate: 0 -1px;
    transition: rotate .25s cubic-bezier(.22, 1, .36, 1), color .2s ease-out;
}
.nav-casse .declencheur:hover { background: var(--tmp-jaune); color: var(--tmp-encre); }
.nav-casse .declencheur.actif { box-shadow: inset 0 -3px 0 var(--tmp-rouge); }
.nav-casse .declencheur:focus-visible { outline: 3px solid var(--tmp-encre); outline-offset: -3px; }
.nav-casse .declencheur[aria-expanded="true"] { background: var(--tmp-encre); color: var(--tmp-papier); }
.nav-casse .declencheur[aria-expanded="true"] .num { color: var(--tmp-jaune); }
.nav-casse .declencheur[aria-expanded="true"] .plus { rotate: 45deg; color: var(--tmp-jaune); }

/* ————— Le tiroir (méga-panneau) ————— */
.tiroir {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1029;
    background: var(--tmp-papier); border-bottom: 4px solid var(--tmp-encre);
    box-shadow: 0 22px 44px -18px rgba(35, 39, 70, .35);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
}
.tiroir.ouvert { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.tiroir .container { padding-top: 1.4rem; padding-bottom: 1.6rem; }
.tiroir .tiroir-planche { translate: 0 -14px; opacity: .4; transition: translate .34s cubic-bezier(.22, 1, .36, 1), opacity .28s ease-out; }
.tiroir.ouvert .tiroir-planche { translate: 0 0; opacity: 1; }

.casse-voile { position: fixed; inset: 0; z-index: 1020; background: rgba(35, 39, 70, .28); opacity: 0; pointer-events: none; transition: opacity .3s ease-out; }
.casse-voile.actif { opacity: 1; pointer-events: auto; }

/* ————— Planche à filets du tiroir ————— */
.tiroir-planche { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--casse-filet); background: var(--tmp-encre); border: var(--casse-filet) solid var(--tmp-encre); }
.tiroir-planche > * { background: var(--tmp-papier); padding: 1.5rem; min-width: 0; }
.tsp-2 { grid-column: span 2; }
.tsp-4 { grid-column: span 4; }
.tsp-6 { grid-column: span 6; }

.nav-casse .etiquette { font-family: var(--casse-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; }
.nav-casse .tampon {
    display: inline-block; font-family: var(--casse-mono); font-weight: 700; text-transform: uppercase;
    font-size: .75rem; letter-spacing: .1em; color: var(--tmp-rouge);
    border: 2px solid var(--tmp-rouge); border-radius: 6px; padding: .25em .6em;
    transform: rotate(-4deg);
}

/* aplat de rubrique : la couleur porte, pas d'illustration */
.tiroir .aplat { display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.tiroir .aplat .folio-rub { font-family: var(--casse-mono); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; opacity: .8; }
.tiroir .aplat h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.08; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.tiroir .aplat p { margin: 0; font-size: .9375rem; line-height: 1.45; max-width: 30ch; }
.tiroir .aplat-bleu { background: var(--tmp-bleu); color: #fff; }
.tiroir .aplat-bleu h2, .tiroir .aplat-vert h2 { color: #fff; }
.tiroir .aplat-vert { background: var(--tmp-vert); color: #fff; }
.tiroir .aplat-cyan { background: var(--tmp-cyan); color: var(--tmp-encre); }
.tiroir .aplat-cyan h2, .tiroir .aplat-rose h2 { color: var(--tmp-encre); }
.tiroir .aplat-rose { background: var(--tmp-rose-vif); color: var(--tmp-encre); }

/* aplat cliquable : le tiroir 04/05 pointe vers UNE page, l'aplat y mène en entier */
.tiroir .aplat-lien { text-decoration: none; }
.tiroir .aplat-lien .toute-la-page { font-family: var(--casse-mono); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .5rem; }
.tiroir .aplat-lien .toute-la-page span { display: inline-block; transition: translate .2s ease-out; }
.tiroir .aplat-lien:hover .toute-la-page span { translate: 4px 0; }
.tiroir .aplat-lien:focus-visible { outline: 3px solid var(--tmp-encre); outline-offset: -6px; }

/* listes d'entrées : le tiret d'imprimeur, aucun pictogramme (sauf .lien-reseau, exception assumée) */
.nav-casse .entrees { list-style: none; margin: 0; padding: 0; }
.nav-casse .entrees li { border-bottom: var(--casse-filet) solid var(--tmp-encre); }
.nav-casse .entrees li:last-child { border-bottom: 0; }
.nav-casse .entrees a {
    display: flex; align-items: baseline; gap: .55em; padding: .8rem 0;
    color: var(--tmp-encre); font-weight: 700; text-decoration: none;
    transition: color .2s ease-out, padding-left .2s ease-out;
}
.nav-casse .entrees a::before { content: "—"; color: var(--tmp-rouge); font-family: var(--casse-mono); }
.nav-casse .entrees a:hover { color: var(--tmp-bleu); padding-left: .4em; }
.nav-casse .entrees a:focus-visible { outline: 3px solid var(--tmp-encre); outline-offset: 2px; }
.nav-casse .entrees .adjoint { font-family: var(--casse-mono); font-weight: 400; font-size: .75rem; letter-spacing: .04em; opacity: .65; }

/* Réseaux sociaux : pictogramme à la place du tiret, plus parlant que le texte seul */
.nav-casse .entrees a.lien-reseau { align-items: center; }
.nav-casse .entrees a.lien-reseau::before { content: none; }
.nav-casse .entrees a.lien-reseau .reseau-ic {
    width: 1.1em; height: 1.1em; flex: none; display: inline-flex;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.nav-casse .entrees a.lien-reseau .reseau-ic svg { width: 100%; height: 100%; display: block; }
.nav-casse .entrees a.lien-reseau:hover .reseau-ic,
.nav-casse .entrees a.lien-reseau:focus-visible .reseau-ic { transform: scale(1.2) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) {
    .nav-casse .entrees a.lien-reseau:hover .reseau-ic,
    .nav-casse .entrees a.lien-reseau:focus-visible .reseau-ic { transform: none; }
}

/* sous-catégories (Festival > invités / animations) */
.nav-casse .sous-entrees { list-style: none; margin: 0 0 .35rem; padding: 0 0 0 1.35em; }
.nav-casse .sous-entrees a { display: inline-flex; align-items: baseline; gap: .5em; padding: .3rem 0; color: var(--tmp-encre); text-decoration: none; font-weight: 500; transition: color .2s ease-out; }
.nav-casse .sous-entrees a::before { content: "›"; color: var(--tmp-rouge); font-family: var(--casse-mono); font-weight: 700; }
.nav-casse .sous-entrees a:hover { color: var(--tmp-bleu); }

/* case mise en avant (le festival dans Nos actions) */
.tiroir .case-forte { background: var(--tmp-jaune); display: flex; flex-direction: column; gap: .5rem; }
.tiroir .case-forte .etiquette { opacity: .75; }
.tiroir .case-forte h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.15; margin: 0; }
.tiroir .case-forte h3 a { color: var(--tmp-encre); text-decoration: none; }
.tiroir .case-forte h3 a:hover { color: var(--tmp-bleu); }
.tiroir .case-forte .tampon { align-self: flex-start; margin-top: auto; }

/* pied de tiroir */

/* ————— Burger + menu mobile ————— */
.casse-burger { appearance: none; background: none; border: var(--casse-filet) solid var(--tmp-encre); padding: .55rem .6rem; cursor: pointer; display: none; flex-direction: column; gap: 5px; }
.casse-burger span { display: block; width: 22px; height: 3px; background: var(--tmp-encre); }
.casse-burger:focus-visible { outline: 3px solid var(--tmp-encre); outline-offset: 2px; }

.casse-menu-mobile { display: none; border-top: var(--casse-filet) solid var(--tmp-encre); background: var(--tmp-papier); max-height: calc(100dvh - 110px); overflow-y: auto; }
.casse-menu-mobile.ouvert { display: block; }
.casse-menu-mobile .accordeon { border-bottom: var(--casse-filet) solid var(--tmp-encre); }
.casse-menu-mobile .accordeon:last-child { border-bottom: 0; }
.casse-menu-mobile .accordeon > button, .casse-menu-mobile .lien-direct {
    appearance: none; background: none; border: 0; width: 100%; cursor: pointer;
    display: flex; align-items: baseline; gap: .6em; padding: 1rem 1.25rem;
    font-family: var(--casse-mono); font-weight: 700; text-transform: uppercase; font-size: .9375rem; letter-spacing: .05em;
    color: var(--tmp-encre); text-decoration: none; text-align: left;
}
.casse-menu-mobile .num { color: var(--tmp-rouge); }
.casse-menu-mobile .accordeon > button .plus { margin-left: auto; transition: rotate .25s cubic-bezier(.22, 1, .36, 1); }
.casse-menu-mobile .accordeon > button[aria-expanded="true"] { background: var(--tmp-encre); color: var(--tmp-papier); }
.casse-menu-mobile .accordeon > button[aria-expanded="true"] .num,
.casse-menu-mobile .accordeon > button[aria-expanded="true"] .plus { color: var(--tmp-jaune); }
.casse-menu-mobile .accordeon > button[aria-expanded="true"] .plus { rotate: 45deg; }
.casse-menu-mobile .contenu { display: none; padding: .4rem 1.25rem 1rem; }
.casse-menu-mobile .contenu.ouvert { display: block; }
.casse-menu-mobile .entrees a { padding: .65rem 0; }

/* l'ancre newsletter du menu ne doit pas glisser sous la nav sticky */
#courrier { scroll-margin-top: 110px; }

/* ————— Responsive ————— */
@media (max-width: 991.98px) {
    .nav-entrees { display: none; }
    .casse-burger { display: inline-flex; }
    .logo-casse img { height: 52px; }
}
@media (max-width: 767.98px) {
    .tiroir-planche { grid-template-columns: repeat(2, 1fr); }
    .tsp-4, .tsp-6 { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
    .tiroir, .tiroir .tiroir-planche, .casse-voile, .nav-casse .declencheur .plus,
    .casse-menu-mobile .accordeon > button .plus, .nav-casse .entrees a { transition: none; }
}