/* ═══════════════════════════════════════════════════════════════════════
   PASSEPORT POUR L'ART 2025-2026 — REPRODUCTION FIDÈLE DU CATALOGUE
   Mairie de Toulouse · 220 pages

   Cette version ne réinterprète RIEN : chaque page est un <svg> dont le
   viewBox reprend les coordonnées du PDF (445,92 × 341,04 pt). Les images et
   les textes sont posés à leurs positions exactes par tools/build_exact.py.
   Ce fichier ne fait donc que deux choses :
     1. charger les bonnes polices et mettre la page à l'échelle ;
     2. habiller le deck (navigation, sommaire, impression).
   Il n'y a volontairement AUCUN style de contenu ici : tout vient du PDF.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #FFFFFF;
  --color-text: #1D1D1B;
  --color-accent: #E30613;
  --color-muted: #6E6E6E;
  --color-rule: #D8D8D6;
  --font-ui: "Roboto", system-ui, sans-serif;   /* interface : cf. la webpublication */

  --pad: clamp(1rem, 2.5vw, 2rem);
  --rail-w: clamp(12px, 2vw, 30px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.3s;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* l'attribut hidden gagne toujours (sinon display:grid l'écrase) */
* { margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #F2F1EF;          /* le fond derrière la page, comme une table */
}
body {
  font-family: var(--font-ui);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Deck ──────────────────────────────────────────────────────────── */
.deck-wrapper { position: fixed; inset: 0; overflow: hidden; }
.deck {
  display: flex;
  height: 100dvh;
  width: max-content;
  will-change: transform;
  transition: transform 0.6s var(--ease-out);
}

.slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad) calc(var(--rail-w) + var(--pad)) var(--pad) var(--pad);
}

/* Perf : 220 pages dans le DOM, chacune avec des dizaines d'éléments SVG.
   Le navigateur saute la mise en page de celles qui ne sont pas à l'écran. */
.slide:not(.is-active) {
  content-visibility: auto;
  contain-intrinsic-size: 100vw 100vh;   /* vh (pas dvh) : Firefox refuse dvh ici */
}

/* LA PAGE — le viewBox porte le rapport exact du papier, donc pas de calcul
   ici : on la laisse remplir ce qu'elle peut sans jamais se déformer. */
.page {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .16);
}
@supports (aspect-ratio: 1) {
  .page { width: min(100%, calc((100dvh - 2 * var(--pad)) * var(--ratio, 1.30754))); }
}

/* TYPOGRAPHIE DES PAGES — celle du catalogue, pas celle de l'interface.
   Barlow Condensed / Barlow Semi Condensed : ce sont les noms des polices
   embarquées dans le PDF, et la webpublication officielle de référence charge
   exactement les mêmes (Roboto, chez elle, n'habille que le visualiseur).
   Roboto est donc réservé au chrome — voir --font-ui. */
.page text {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  white-space: pre;
}
/* Texte des polices Type3 : ses lettres sont dessinées par les tracés (ce sont
   de vrais contours du PDF). On le garde invisible mais sélectionnable,
   cherchable et lisible par les lecteurs d'écran — jamais display:none.
   Ces lettres-là ne changent PAS de police : ce sont des formes, pas du texte. */
text.inv { fill: transparent; }
.page text.c { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
.page text.s { font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif; }
.page image { image-rendering: auto; }

/* ─── Chrome ────────────────────────────────────────────────────────── */
.chrome { position: fixed; z-index: 30; pointer-events: none; }

body { --chrome-fg: var(--color-text); --chrome-badge-bg: var(--color-accent); --chrome-badge-fg: #FFF; }
body[data-chrome="dark"] { --chrome-fg: #FFFFFF; --chrome-badge-bg: #FFFFFF; --chrome-badge-fg: var(--color-text); }

.deck-head {
  top: 0; left: 0;
  display: flex; align-items: center; gap: .7rem;
  padding: clamp(.5rem, 1.2vw, 1rem) var(--pad);
}
.deck-head__mark {
  font-weight: 600; font-size: clamp(.62rem, .75vw, .78rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrome-fg); transition: color var(--dur-fast);
}
.deck-head__badge {
  font-weight: 600; font-size: clamp(.62rem, .75vw, .78rem);
  letter-spacing: .1em;
  background: var(--chrome-badge-bg); color: var(--chrome-badge-fg);
  padding: .2em .6em .28em;
  transition: background var(--dur-fast), color var(--dur-fast);
}

/* Rail : la tranche colorée du catalogue, une bande par page */
.deck-rail {
  top: 0; right: 0; bottom: 0; width: var(--rail-w);
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.deck-rail__tab {
  flex: 1 1 0;
  position: relative;
  background: var(--tab);
  opacity: .4;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  transform-origin: right center;
}
.deck-rail__tab:hover { opacity: .85; }
.deck-rail__tab[aria-current="true"] { opacity: 1; transform: scaleX(1.6); }
.deck-rail__tab span {
  position: absolute; right: calc(100% + .5rem); top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  background: #FFF; color: var(--color-text);
  padding: .1em .4em;
  box-shadow: 0 1px 6px rgba(0,0,0,.14);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast);
}
.deck-rail__tab:hover span { opacity: 1; }

/* Navigation : flèche page ± et saut première/dernière page, empilés (réf.) */
.deck-nav {
  position: fixed; z-index: 40; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  background: rgba(78,78,78,.62);
  border-radius: clamp(18px, 2vw, 26px);
  box-shadow: 0 2px 14px rgba(0,0,0,.22);
  overflow: hidden;
}
.deck-nav--left { left: clamp(.4rem, 1vw, 1rem); }
.deck-nav--right { right: calc(var(--rail-w) + clamp(.4rem, 1vw, 1rem)); }
.deck-arrow {
  width: clamp(38px, 3.2vw, 48px); height: clamp(34px, 2.8vw, 42px);
  display: grid; place-items: center;
  transition: background var(--dur-fast);
}
.deck-arrow + .deck-arrow { border-top: 1px solid rgba(255,255,255,.22); }
.deck-arrow svg { width: 44%; height: 44%; fill: none; stroke: #FFF; stroke-width: 2.2; }
.deck-arrow:hover:not([disabled]) { background: var(--color-accent); }
.deck-arrow[disabled] { opacity: .3; pointer-events: none; }

.burger {
  position: fixed; z-index: 60;
  top: clamp(.5rem, 1.2vw, 1rem);
  right: calc(var(--rail-w) + clamp(.5rem, 1.2vw, 1rem));
  width: 40px; height: 40px;
  display: grid; place-content: center; gap: 5px;
  background: var(--chrome-badge-bg);
  transition: background var(--dur-fast);
}
.burger span { display: block; width: 17px; height: 2px; background: var(--chrome-badge-fg); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
body:has(.deck-menu:not([hidden])) .burger { background: var(--color-accent); }
body:has(.deck-menu:not([hidden])) .burger span { background: #FFF; }

/* ─── Sommaire ──────────────────────────────────────────────────────── */
.deck-menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--color-text); color: #FFF;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow-y: auto;
  display: grid; align-content: start; gap: 1.1rem;
}
.deck-menu[hidden] { display: none; }
.deck-menu__title { font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 2.2rem); text-transform: uppercase; }
.deck-menu__count { font-size: .42em; letter-spacing: .12em; color: var(--color-accent); margin-left: .6rem; vertical-align: middle; }
.deck-menu__search input {
  width: min(100%, 440px);
  font: inherit; font-size: .95rem; color: #FFF;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  padding: .5rem .8rem;
}
.deck-menu__search input::placeholder { color: rgba(255,255,255,.45); }
.deck-menu__search input:focus { border-color: var(--color-accent); outline: none; }

.deck-menu__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: .1rem 2.2rem;
  align-content: start;
}
.deck-menu__groupe {
  grid-column: 1 / -1;
  font-weight: 600; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent);
  padding: 1rem 0 .25rem;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.deck-menu__groupe:first-child { padding-top: 0; }
.deck-menu__list button {
  width: 100%;
  display: flex; align-items: baseline; gap: .8rem;
  padding: .42rem .3rem;
  text-align: left;                /* les <button> sont centrés par défaut (UA) */
  font-size: clamp(.92rem, 1.4vw, 1.14rem);
  text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid rgba(255,255,255,.13);
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}
.deck-menu__list button:hover { color: var(--color-accent); padding-left: .9rem; }
.deck-menu__list li[aria-current="true"] button { color: var(--color-accent); }
.deck-menu__num { font-size: .7em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.deck-menu__dot { width: 9px; height: 9px; flex: none; align-self: center; }
.deck-menu__lib { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.deck-menu__foot { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .5rem; }
.deck-menu__pdf, .deck-menu__close {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.deck-menu__pdf { background: var(--color-accent); border-color: var(--color-accent); }
.deck-menu__pdf:hover, .deck-menu__close:hover { background: #FFF; color: var(--color-text); }
.icon { width: 1em; height: 1em; }

/* ─── Barre de navigation (top-bar façon visualiseur officiel) ───────── */
:root { --topbar-h: 3.1rem; }
.deck-topbar {
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
  padding: .5rem clamp(.5rem, 1.5vw, 1rem);
  pointer-events: none;                 /* seuls les boutons captent le clic */
}
.deck-topbar__nav, .deck-topbar__actions {
  display: flex; align-items: center; gap: .45rem;
  pointer-events: auto; flex-wrap: wrap;
}

.tb {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem;
  font-weight: 600; font-size: clamp(.62rem, .8vw, .76rem);
  letter-spacing: .08em; text-transform: uppercase;
  color: #FFF; background: #333; border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  transition: filter var(--dur-fast), transform var(--dur-fast);
}
.tb:hover { filter: brightness(1.15); }
.tb:active { transform: translateY(1px); }
.tb--red { background: var(--color-accent); }
.tb--gold { background: #E4A413; }
.tb__ico { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tb--gold .tb__ico { fill: currentColor; stroke: none; }
.tb__badge {
  min-width: 1.35em; padding: 0 .35em; margin-left: .1rem;
  font-size: .82em; font-weight: 700; line-height: 1.5; text-align: center;
  color: #333; background: #FFF; border-radius: 1em; font-variant-numeric: tabular-nums;
}

.tb-ico {
  display: inline-grid; grid-auto-flow: column; place-items: center; gap: .4rem;
  width: 2.2rem; height: 2.2rem; padding: 0;
  color: #FFF; background: rgba(30,30,27,.72); border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  transition: background var(--dur-fast);
}
.tb-ico:hover { background: var(--color-accent); }
.tb-ico .tb__ico { width: 1.15rem; height: 1.15rem; }
.tb-ico--sommaire { width: auto; padding: 0 .85rem;
  font-weight: 600; font-size: clamp(.62rem, .8vw, .76rem); letter-spacing: .08em; text-transform: uppercase; }

/* étoile « ajouter cette page à ma sélection » */
.deck-fav {
  pointer-events: auto;
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  color: #FFF; background: rgba(30,30,27,.72); border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.deck-fav:hover { transform: scale(1.07); }
.deck-fav__star { width: 1.2rem; height: 1.2rem; display: block; }
.deck-fav__star path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.deck-fav[aria-pressed="true"] { background: #E4A413; }
.deck-fav[aria-pressed="true"] .deck-fav__star path { fill: #FFF; stroke: #FFF; }

/* la tranche colorée (rail) démarre sous la barre */
.deck-rail { top: var(--topbar-h); }

/* ─── Couverture : boutons cliquables (page 1) ──────────────────────── */
.cover-hot { fill: #FFF; fill-opacity: 0; pointer-events: all; cursor: pointer;
  transition: fill-opacity var(--dur-fast); }
.cover-hot:hover { fill-opacity: .16; }
.cover-hot:focus-visible { outline: none; fill-opacity: .28; stroke: #FFF; stroke-width: 1; }

/* petit message flottant (partage…) */
.deck-toast {
  position: fixed; z-index: 80; left: 50%; bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  padding: .6rem 1.1rem; font-size: .85rem; letter-spacing: .04em;
  color: #FFF; background: var(--color-text); border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.deck-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ─── Barre d'onglets du menu ────────────────────────────────────────── */
.deck-menu {
  padding: 0;                          /* les panneaux gèrent leur propre marge */
  gap: 0; grid-template-rows: auto 1fr auto;
}
.deck-menu__bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: stretch; gap: 1rem;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1.5rem, 4vw, 3rem) 0;
  background: var(--color-text);
}
.deck-menu__tabs { display: flex; gap: clamp(.6rem, 2vw, 1.6rem); flex-wrap: wrap; }
.deck-menu__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem 0 .7rem;
  font-weight: 600; font-size: clamp(.9rem, 1.5vw, 1.15rem);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  border-bottom: 3px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.deck-menu__tab:hover { color: #FFF; }
.deck-menu__tab[aria-selected="true"] { color: #FFF; border-color: var(--color-accent); }
.deck-menu__badge {
  min-width: 1.4em; padding: 0 .4em;
  font-size: .62em; font-weight: 700; line-height: 1.6;
  text-align: center; color: #FFF; background: var(--color-accent);
  border-radius: 1em; font-variant-numeric: tabular-nums;
}
.deck-menu__bar .deck-menu__close {
  margin-left: auto; align-self: flex-start;
  padding: .2rem .5rem; font-size: 1.3rem; line-height: 1;
  color: rgba(255,255,255,.7); border: 0;
}
.deck-menu__bar .deck-menu__close:hover { color: #FFF; background: none; }

.deck-menu__panel {
  overflow-y: auto;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.5rem, 4vw, 3rem);
  display: grid; align-content: start; gap: 1.1rem;
}
.deck-menu__panel[hidden] { display: none; }
.deck-menu__search { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.deck-menu__foot {
  padding: 1rem clamp(1.5rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 0;
}

/* ─── Panneau « JE RECHERCHE PAR » : carte claire, comme la référence ─── */
.recherche {
  background: #FFF; color: var(--color-text);
  max-width: 720px; width: 100%;
  justify-self: center; margin: 0 auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.deck-menu__search .deck-menu__count { font-size: .78rem; margin-left: 0; }
.recherche__head {
  padding: .85rem 1rem; margin: 0;
  text-align: center; font-weight: 700;
  font-size: clamp(.85rem, 1.5vw, 1.05rem); letter-spacing: .14em; text-transform: uppercase;
  color: #FFF; background: #333;
}
.recherche__acc { border-bottom: 1px solid var(--color-rule); }
.recherche__acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 3vw, 1.7rem);
  font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.1rem);
  letter-spacing: .04em; text-transform: uppercase; text-align: left;
  color: var(--color-text);
}
.recherche__acc-head[aria-expanded="false"] { color: var(--color-muted); }
.recherche__chev { width: 22px; height: 22px; color: var(--color-muted); transition: transform var(--dur-fast) var(--ease-out); }
.recherche__acc-head[aria-expanded="true"] .recherche__chev { transform: rotate(180deg); }
.recherche__body {
  padding: .2rem clamp(1rem, 3vw, 1.7rem) 1.2rem;
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
}
.recherche__body[hidden] { display: none; }

.recherche__opt {
  display: inline-flex; align-items: center; gap: .5rem;
  cursor: pointer; line-height: 1.15;
}
.recherche__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.recherche__box {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid #B9B9B9; background: #FFF;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.recherche__opt input:checked + .recherche__box {
  border-color: var(--c, var(--color-accent));
  background: var(--c, var(--color-accent));
  box-shadow: inset 0 0 0 3px #FFF;
}
.recherche__opt input:focus-visible + .recherche__box { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Facette à CHOIX MULTIPLE (les niveaux) : case CARRÉE avec une coche, pour
   qu'on voie au premier coup d'œil qu'on peut en cocher plusieurs — le rond
   des autres facettes annonce, lui, un choix unique. */
.recherche__opt--multi .recherche__box { border-radius: 3px; position: relative; }
.recherche__opt--multi input:checked + .recherche__box { box-shadow: none; }
.recherche__opt--multi input:checked + .recherche__box::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #FFF; border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.recherche__multi {
  margin-left: .6rem; font-weight: 500; font-size: .72em;
  letter-spacing: .02em; text-transform: none; opacity: .72;
}
.recherche__lbl {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: clamp(.8rem, 1.4vw, .95rem);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--c, var(--color-text));
}
.recherche__ico { width: 1.15em; height: 1.15em; flex: none; }

.recherche__no { display: flex; gap: 0; padding: 1rem clamp(1rem, 3vw, 1.7rem) 1.3rem; flex-wrap: wrap; }
.recherche__field {
  flex: 1 1 12rem; display: flex; align-items: center; gap: .6rem;
  padding: .1rem .9rem; background: #B7B7B7;
}
.recherche__field svg { width: 18px; height: 18px; color: #FFF; flex: none; }
.recherche__field input {
  flex: 1; min-width: 0; font: inherit; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: #FFF; background: none; border: 0; padding: .7rem 0;
}
.recherche__field input::placeholder { color: rgba(255,255,255,.8); }
.recherche__field input:focus { outline: none; }
.recherche__valider {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.5rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #FFF; background: var(--color-accent);
  transition: filter var(--dur-fast);
}
.recherche__valider:hover { filter: brightness(1.1); }
.recherche__valider span { font-size: 1.2em; }

/* ─── Résultats de recherche ─────────────────────────────────────────── */
.recherche__results { color: #FFF; }
.recherche__count {
  font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: .5rem;
}
.recherche__empty { color: rgba(255,255,255,.6); font-size: .95rem; }
.res__list, .selection__list { display: grid; gap: .1rem; max-width: 720px; margin: 0 auto; }
.res, .sel__item { display: flex; align-items: stretch; gap: .3rem; border-bottom: 1px solid rgba(255,255,255,.13); }
.res__go, .sel__go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .8rem;
  padding: .55rem .3rem; text-align: left;
  transition: padding-left var(--dur-fast) var(--ease-out);
}
.res__go:hover, .sel__go:hover { padding-left: .6rem; }
.res__code, .sel__code {
  flex: none; min-width: 3.4em; padding: .15em .4em;
  font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-align: center;
  color: #FFF; font-variant-numeric: tabular-nums;
}
.sel__dot { flex: none; width: 12px; height: 12px; border-radius: 2px; align-self: center; }
.res__body { min-width: 0; display: flex; flex-direction: column; }
.res__titre, .sel__lib {
  font-size: clamp(.9rem, 1.4vw, 1.05rem); text-transform: uppercase; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res__meta { font-size: .72rem; letter-spacing: .06em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.sel__lib { flex: 1; }
.sel__pg { flex: none; font-size: .72rem; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }

.res__star, .sel__rm {
  flex: none; display: grid; place-items: center; width: 2.4rem;
  color: rgba(255,255,255,.5); transition: color var(--dur-fast), transform var(--dur-fast);
}
.res__star svg { width: 20px; height: 20px; }
.res__star svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.res__star:hover { color: #FFF; transform: scale(1.12); }
.res__star.is-on { color: #F5B301; }
.res__star.is-on svg path { fill: #F5B301; stroke: #F5B301; }
.sel__rm { font-size: 1rem; }
.sel__rm:hover { color: var(--color-accent); }

/* ─── Ma sélection ───────────────────────────────────────────────────── */
.selection__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.selection__export, .selection__clear {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3);
  transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.selection__export { background: var(--color-accent); border-color: var(--color-accent); }
.selection__export:hover:not(:disabled), .selection__clear:hover:not(:disabled) { background: #FFF; color: var(--color-text); }
.selection__export:disabled, .selection__clear:disabled { opacity: .35; cursor: not-allowed; }
.selection__msg { font-size: .9rem; color: rgba(255,255,255,.8); }
.selection__msg.is-error { color: #FF9B93; }
.selection__empty { color: rgba(255,255,255,.6); font-size: .95rem; max-width: 42ch; line-height: 1.5; }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tb__lbl { display: none; }             /* pastilles en icônes seules */
  .tb { padding: .55rem; }
  .tb-ico--sommaire { width: 2.2rem; padding: 0; }
  .deck-topbar { gap: .4rem; padding: .45rem .5rem; }
  .deck-topbar__nav, .deck-topbar__actions { gap: .35rem; }
  .recherche { box-shadow: 0 4px 20px rgba(0,0,0,.4); }
  .recherche__body { gap: .5rem 1rem; }
}
@media (max-width: 768px) {
  :root { --rail-w: 10px; }
  .deck-rail__tab span { display: none; }
  .deck { flex-direction: column; height: auto; width: 100vw; }
  .slide { flex: 0 0 100dvh; width: 100vw; }
  .deck-nav { top: auto; bottom: .6rem; transform: none; flex-direction: row; }
  .deck-nav--left { left: .5rem; right: auto; }
  .deck-nav--right { right: calc(var(--rail-w) + .5rem); left: auto; }
  .deck-arrow + .deck-arrow { border-top: 0; border-left: 1px solid rgba(255,255,255,.22); }
  .deck-arrow svg { transform: rotate(90deg); }   /* défilement vertical → haut/bas */
  .deck-menu__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ─── Impression : une page du catalogue = une page PDF ─────────────── */
@media print {
  html, body { overflow: visible !important; height: auto !important; background: #FFF; }
  .deck-wrapper { position: static !important; overflow: visible !important; }
  .deck {
    display: block !important;
    transform: none !important;
    width: auto !important; height: auto !important;
    transition: none !important;
  }
  .slide {
    width: 100% !important; height: 100vh !important;
    padding: 0 !important;
    page-break-after: always; break-after: page; break-inside: avoid;
    /* Sans ça, les pages hors écran ne sont pas rendues et le PDF sort vide
       dès la 2ᵉ page (optimisation perf ci-dessus). */
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .slide:last-child { page-break-after: auto; break-after: auto; }
  .page { width: 100% !important; height: 100% !important; max-width: none; max-height: none; box-shadow: none; }
  .burger, .deck-menu, .deck-rail, .deck-nav, .deck-topbar, .skip-link, .deck-head { display: none !important; }
  @page { size: landscape; margin: 0; }
}

/* ═══ Accessibilité (RGAA) ════════════════════════════════════════════════ */
.skip-link {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  transform: translateY(-180%);
  padding: .7rem 1.2rem; border-radius: 4px;
  background: var(--color-text); color: #FFF;
  font-weight: 600; letter-spacing: .04em;
  transition: transform var(--dur-fast);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--color-accent); outline-offset: 2px; }
#contenu:focus { outline: none; }

/* Bouton « Contraste renforcé » + lien Accessibilité (pied du menu) */
.deck-menu__a11y {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  color: #FFF; border: 1px solid rgba(255,255,255,.3);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.deck-menu__a11y:hover { background: rgba(255, 255, 255, .16); }
.deck-menu__a11y[aria-pressed="true"] { background: #FFF; color: var(--color-text); border-color: #FFF; }
.deck-menu__a11y[aria-pressed="true"]:hover { background: #E6E6E6; }
.deck-menu__a11y[aria-pressed="true"]::after { content: "✓"; font-weight: 700; margin-left: .1rem; }
.deck-menu__lien {
  display: inline-flex; align-items: center; padding: .55rem .4rem;
  color: #FFF; text-decoration: underline; font-size: .92rem; letter-spacing: .04em;
}
.deck-menu__lien:hover { color: var(--color-accent); }

/* Mode contraste renforcé : les bandes de couleur sont assombries par les règles
   générées dans <head> ; ici, un cerne sombre de secours sur le texte et les
   glyphes blancs (utile là où le blanc n'est pas sur une bande mais sur une photo). */
body.a11y-contrast .page text[fill="#FFFFFF"],
body.a11y-contrast .page path[fill="#FFFFFF"] {
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .9);
  stroke-width: .4px;
  stroke-linejoin: round;
}

/* ─── Cartes de résultats (façon webpublication officielle) ───────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.2rem;
}
.card {
  position: relative;
  background: var(--cc, #333);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;               /* le contenu suit l'arrondi */
}
.card__go {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left; padding: 1.1rem;
  color: #FFF;
}
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.card__badge {
  background: #FFF; color: var(--cc, #333);
  font-weight: 600; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .4em .65em; white-space: nowrap;
}
.card__badge b { font-weight: 800; font-size: 1.25em; letter-spacing: .02em; }
.card__type svg { width: 1.9rem; height: 1.9rem; display: block; }
.card__titre {
  margin-top: .8rem; padding-bottom: .5rem; padding-right: 1.7rem;
  color: #111; font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .02em;
  border-bottom: 2.5px solid #111;
  overflow-wrap: anywhere;
}
.card__meta {
  margin-top: auto; padding-right: 2.8rem;
  display: grid; gap: .35rem;
  font-weight: 600; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
}
.card__row { display: inline-flex; align-items: center; gap: .45rem; line-height: 1.2; }
.card__pic { width: 1.1rem; height: 1.1rem; flex: none; fill: currentColor; }
.card__pic--trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.card__arrow {
  position: absolute; right: .8rem; bottom: .8rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: #111; color: #FFF;
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.card__arrow svg { width: 55%; height: 55%; }
.card__go:hover .card__arrow, .card__go:focus-visible .card__arrow { transform: scale(1.14); }
.card__go:focus-visible { outline: 3px solid #FFF; outline-offset: -3px; }
.card__star {
  position: absolute; z-index: 2; right: .8rem; top: 3.4rem;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  color: #FFF; opacity: .85;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.card__star svg { width: 1.35rem; height: 1.35rem; }
.card__star svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.card__star:hover { transform: scale(1.15); opacity: 1; }
.card__star.is-on { opacity: 1; }
.card__star.is-on svg path { fill: #F5B301; stroke: #F5B301; }

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
  .card__go { padding: .7rem; }
  .card__titre { font-size: .82rem; }
  .card__star { top: 2.6rem; }
}

/* carte à fond sombre (pages hors fiches) : titre et filet en blanc */
.card--sombre .card__titre { color: #FFF; border-color: #FFF; }

/* ─── Miniatures de pages (Ma sélection & Toutes les pages) ──────────── */
.selection__vues { display: flex; gap: .6rem; flex-wrap: wrap; }
.selection__vue {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.25); border-radius: 4px;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.selection__vue:hover { color: #FFF; }
.selection__vue.is-on { color: #FFF; background: rgba(255,255,255,.1); border-color: #FFF; }

.minis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.2rem 1rem;
}
.mini__go { display: block; width: 100%; padding: 0; }
.mini__go img {
  display: block; width: 100%; height: auto;
  background: #FFF;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  border-radius: 3px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.mini__go:hover img, .mini__go:focus-visible img {
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.mini__bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .45rem;
}
.mini__num {
  min-width: 2.1em; padding: .12em .5em;
  font-size: .78rem; font-weight: 700; text-align: center;
  color: var(--color-text); background: #FFF; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.mini__star {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  color: rgba(255,255,255,.65);
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.mini__star svg { width: 1.25rem; height: 1.25rem; }
.mini__star svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.mini__star:hover { transform: scale(1.15); color: #FFF; }
.mini__star.is-on { color: #F5B301; }
.mini__star.is-on svg path { fill: #F5B301; stroke: #F5B301; }

@media (max-width: 700px) {
  .minis { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .9rem .7rem; }
}

/* « Tout retirer » armé : l'étape de confirmation est portée par le bouton */
.selection__clear.is-arme {
  background: var(--color-accent); border-color: var(--color-accent); color: #FFF;
}

/* ─── Table des matières (menu Sommaire) ─────────────────────────────── */
.toc { max-width: 780px; width: 100%; margin: 0 auto; display: grid; }
.toc__tete {
  font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent);
  padding: 1.3rem 0 .4rem;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.toc__item {
  display: flex; align-items: baseline; gap: 1rem; justify-content: space-between;
  padding: .6rem .2rem;
  text-align: left; letter-spacing: .04em;
  font-size: clamp(.95rem, 1.5vw, 1.1rem); text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.13);
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}
.toc__item:hover { color: var(--color-accent); padding-left: .8rem; }
.toc__num { color: var(--color-accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─── Résultats de la recherche plein-texte ──────────────────────────── */
.res-texte { max-width: 780px; width: 100%; margin: 0 auto; display: grid; }
.res-texte__section {
  font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  padding: 1.3rem 0 .4rem;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.res-txt {
  display: grid; gap: .2rem;
  padding: .7rem .2rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.13);
  transition: background var(--dur-fast);
}
.res-txt:hover { background: rgba(255,255,255,.06); }
.res-txt__page { font-weight: 700; letter-spacing: .04em; }
.res-txt__ex { font-size: .92rem; line-height: 1.45; color: rgba(255,255,255,.75); }
.res-txt__ex b { color: #FFF; background: rgba(227,6,19,.55); padding: 0 .15em; }
.res-texte__fin {
  text-align: center; padding: 1.4rem 0 .6rem; font-size: 1.05rem;
}
.res-texte__fin span { font-size: .82rem; color: rgba(255,255,255,.6); }

/* le champ de recherche du sommaire, centré comme sa colonne */
[data-panel="sommaire"] .deck-menu__search { justify-content: center; }