/* Salle Carmin : une salle de cinéma en CSS. Rouge velours, noir, or, billets perforés, pellicule et rideau. Piles de polices système uniquement. */
:root {
  --bg: #12060a; --bg2: #1f0a11; --vel: #7a0f1e; --vel2: #a3192e; --gold: #d9a93a; --gold2: #f0d68a;
  --cream: #fbf3dd; --cream2: #f0dfae; --ink: #2a0a10; --text: #f6ead2; --mut: #cdbb9c; --c: #d9a93a;
  --serif: Georgia, "Times New Roman", serif; --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; }
body {
  margin: 0; max-width: 100%; overflow-x: clip; background: var(--bg); color: var(--text); font: 16px/1.65 var(--serif);
  background-image: radial-gradient(ellipse at 50% -10%, #3d0a16 0, transparent 55%);
  background-repeat: no-repeat;
}
img, canvas, svg { max-width: 100%; }
a { color: var(--gold2); }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; margin: 0 0 .6rem; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Guirlande d'ampoules et en-tête */
.bulbs { height: 16px; background: radial-gradient(circle at 12px 8px, #ffe9a6 0 3px, rgba(255, 220, 120, .35) 4px, transparent 6px) 0 0 / 26px 16px repeat-x, #240a11; border-bottom: 1px solid #5a1a24; }
@media (prefers-reduced-motion: no-preference) { .bulbs { animation: glow 4s ease-in-out infinite alternate; } @keyframes glow { from { filter: brightness(.85); } to { filter: brightness(1.15); } } }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; padding: .7rem 1rem; background: linear-gradient(180deg, #2a0a11, #17070c); border-bottom: 3px double var(--gold); position: relative; z-index: 5; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--gold2); font: 700 1.45rem/1 var(--serif); letter-spacing: .02em; }
.logo img { display: block; }
.logo em { font-style: italic; color: #ff7b8a; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font: 600 .82rem var(--ui); text-transform: uppercase; letter-spacing: .08em; }
.top nav a, .menu summary { color: var(--text); text-decoration: none; padding: .35rem .2rem; border-bottom: 2px solid transparent; cursor: pointer; }
.top nav a:hover, .menu summary:hover { color: var(--gold2); border-bottom-color: var(--gold); }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; }
.menu-panel { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 220px; max-width: min(92vw, 320px); display: grid; gap: .1rem; padding: .6rem; background: #1b080e; border: 1px solid var(--gold); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.menu-panel a { padding: .45rem .6rem; border-radius: 6px; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.menu-panel a:hover { background: var(--vel); }
@media (max-width: 760px) { .menu { flex-basis: 100%; } .menu-panel { position: static; margin-top: .4rem; max-width: none; } }

/* Scène d'accueil : rideau, faisceau du projecteur */
.hero { position: relative; padding: 2rem 1rem 1.6rem; text-align: center; }
.hero h1 { font-size: clamp(1.7rem, 5vw, 2.7rem); color: var(--gold2); text-shadow: 0 2px 0 #000; overflow-wrap: break-word; }
.hero mark { background: none; color: #ff8d9a; font-style: italic; }
.hero .lead { max-width: 60ch; margin: .4rem auto 1rem; color: var(--text); font-size: 1.05rem; }
.hero.stage { isolation: isolate; overflow: hidden; padding: 4.2rem 1rem 3rem; background: radial-gradient(ellipse at 50% 0, #4d0d1a 0, #12060a 72%); border-bottom: 3px double var(--gold); }
.hero.stage::before { content: ""; position: absolute; top: 0; left: 50%; width: 54px; height: 24px; transform: translateX(-50%); background: #0b0306; border: 2px solid var(--gold); border-top: 0; border-radius: 0 0 26px 26px; z-index: 2; }
.curtain { position: absolute; top: 0; bottom: 0; width: clamp(34px, 12vw, 170px); z-index: 1; background: repeating-linear-gradient(90deg, #8c1428 0 12px, #5a0b1a 12px 26px, #a3192e 26px 38px); box-shadow: inset -18px 0 34px rgba(0, 0, 0, .55); }
.curtain.l { left: 0; border-bottom-right-radius: 70% 12%; }
.curtain.r { right: 0; transform: scaleX(-1); border-bottom-right-radius: 70% 12%; }
.beam { position: absolute; top: 20px; left: 50%; width: min(760px, 92%); height: calc(100% - 20px); transform: translateX(-50%); z-index: 0; background: linear-gradient(180deg, rgba(255, 236, 170, .4), rgba(255, 236, 170, 0) 90%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.hero-in { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding-inline: clamp(34px, 12vw, 170px); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 0 0 1rem; }
.pill { display: inline-block; margin: 0 0 .8rem; padding: .3rem .9rem; border: 1px dashed var(--gold); border-radius: 999px; background: rgba(0, 0, 0, .35); color: var(--gold2); font: 600 .85rem var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.hero.small { max-width: 1140px; margin: 1.2rem auto 0; padding: 1.4rem 1.2rem 1.6rem; text-align: left; background: linear-gradient(135deg, #2b0c14, #170509); border-left: 6px solid var(--c); border-radius: 6px; position: relative; }
.hero.small::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(90deg, transparent 0 6px, rgba(240, 214, 138, .8) 6px 14px, transparent 14px 22px) 0 2px / 22px 6px repeat-x; opacity: .7; }
.hero.small h1 { font-size: clamp(1.5rem, 4.5vw, 2.3rem); }
.hero.small .lead { margin-left: 0; max-width: 70ch; }
.hero.small .portrait { float: right; margin: 0 0 .6rem 1rem; border-radius: 50%; border: 3px solid var(--gold); }
.count { margin: .2rem 0 .6rem; color: var(--mut); font: 500 .95rem var(--ui); }
.count b { color: var(--gold2); font-size: 1.3rem; }
.byline { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 0; font: .85rem/1.4 var(--ui); color: var(--mut); }
.hero:not(.small) .byline { justify-content: center; }
.byline img { border-radius: 50%; border: 2px solid var(--gold); }
.crumbs { display: flex; flex-wrap: wrap; gap: .2rem .4rem; margin-bottom: .6rem; font: .85rem var(--ui); color: var(--mut); }
.crumbs a { color: var(--gold2); }
.crumbs i { font-style: normal; opacity: .6; }

/* Boutons */
.btn { display: inline-block; padding: .7rem 1.3rem; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ecc864, #c4902a); color: #2a0a10; font: 700 1rem var(--ui); text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 #8a6414; }
.btn:hover { color: #2a0a10; filter: brightness(1.08); }
.btn.alt { background: transparent; color: var(--gold2); border: 1.5px solid var(--gold); box-shadow: none; }
.btn.alt:hover { background: rgba(217, 169, 58, .15); color: #fff; }
.btn.small { padding: .4rem .9rem; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--gold2); font: inherit; text-decoration: underline; cursor: pointer; margin-right: 1rem; }

/* Sections */
.cats, .directory, .faq { max-width: 1140px; margin: 0 auto; padding: 2rem 1rem 1rem; }
.cats h2, .directory h2, .faq h2 { color: var(--gold2); font-size: 1.6rem; display: flex; align-items: center; gap: .6rem; }
.cats h2::after, .directory h2::after, .faq h2::after { content: ""; flex: 1; min-width: 20px; height: 8px; background: linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px) 0 0 / 16px 8px repeat-x; opacity: .6; }
.family { scroll-margin-top: 1rem; }
.plan { align-items: start; }
.note { color: var(--mut); margin: 0 0 1rem; }
.prose .note { color: #6b4a3f; }
.status { font: .9rem var(--ui); color: var(--gold2); min-height: 1.2em; }
.prose .status { color: #7a0f1e; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.grid > li { display: flex; min-width: 0; }
.sites { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* Affiches de catégories et d'outils */
.cat { flex: 1; min-width: 0; display: grid; align-content: start; gap: .2rem; padding: 1.3rem 1rem 1rem; text-decoration: none; color: var(--text); background: linear-gradient(180deg, #2d0e17, #1a070c); border: 1px solid rgba(217, 169, 58, .4); border-radius: 6px; position: relative; overflow: hidden; transition: transform .15s ease, border-color .15s ease; }
.cat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: repeating-linear-gradient(90deg, var(--c) 0 7px, transparent 7px 15px); opacity: .85; }
.cat:hover { transform: translateY(-3px); border-color: var(--c); color: var(--text); }
.cat i { font-style: normal; font-size: 1.9rem; line-height: 1.1; }
.cat b { color: var(--gold2); font-size: 1.05rem; line-height: 1.25; overflow-wrap: break-word; }
.cat span { color: var(--mut); font: .88rem/1.4 var(--ui); }
.cat.tool { border-radius: 16px 4px 16px 4px; border-style: dashed; }
.prose a.cat { color: var(--text); }
.guide-card .cat { border-style: solid; }

/* Billets de séance : les cartes de sites */
.site { flex: 1; min-width: 0; display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 2.1rem; align-items: stretch; min-height: 78px; position: relative; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, var(--cream), var(--cream2)); border-top: 4px solid var(--c); border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); transition: transform .15s ease; }
.site::before, .site::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bg); z-index: 1; }
.site::before { left: -7px; }
.site::after { right: -7px; }
.site:hover { transform: translateY(-2px) rotate(-.4deg); color: var(--ink); }
.site i { display: grid; place-items: center; font-style: normal; font-size: 1.5rem; border-right: 2px dashed rgba(122, 15, 30, .4); }
.site b { align-self: end; padding: .6rem .5rem 0 .7rem; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; color: #5a0b17; }
.site span { grid-column: 2; align-self: start; padding: 0 .5rem .6rem .7rem; font: .78rem/1.3 var(--ui); color: #6b4a3f; }
.site em { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .62rem var(--ui); letter-spacing: .25em; text-transform: uppercase; color: var(--vel); border-right: 2px dashed rgba(122, 15, 30, .4); }
.sites > li { position: relative; }
.fav { position: absolute; right: 2.4rem; bottom: 6px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(122, 15, 30, .1); color: #7a0f1e; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fav[aria-pressed="true"] { color: #b8860b; background: rgba(217, 169, 58, .3); }
.has-fav .site b { padding-right: 2rem; }

/* Annuaire : recherche, filtres, favoris */
.finder { margin-bottom: 1.2rem; }
.finder-row { position: relative; display: flex; max-width: 520px; }
.finder input { width: 100%; padding: .75rem 2.4rem .75rem 1rem; border: 2px solid var(--gold); border-radius: 999px; background: #fffaf0; color: var(--ink); font: 1rem var(--ui); }
.finder-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--vel); font-size: 1rem; cursor: pointer; }
.finder-count { margin: .6rem 0; color: var(--mut); font: .9rem var(--ui); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: .9rem 0 0; }
.chips button { padding: .35rem .8rem; border: 1.5px solid var(--c, var(--gold)); border-radius: 999px; background: transparent; color: var(--text); font: .85rem var(--ui); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--c, var(--gold)); color: #1a0509; font-weight: 700; }
.favbox { margin: 0 0 1.5rem; padding: 1rem; border: 1px dashed var(--gold); border-radius: 10px; background: rgba(217, 169, 58, .07); }
.favbox h3 { color: var(--gold2); }
.favbox-actions { margin: .8rem 0 .4rem; }
.empty { text-align: center; padding: 2rem 1rem; }
.empty-emoji { font-size: 2.4rem; }

/* Pages de contenu sur papier crème */
.prose { width: min(100% - 2rem, 880px); margin: 1.6rem auto; padding: 1.5rem 1.4rem; background: var(--cream); color: var(--ink); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.prose h2 { color: var(--vel); font-size: 1.35rem; margin-top: 1.6rem; padding-bottom: .25rem; border-bottom: 2px dotted rgba(122, 15, 30, .35); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: #5a0b17; margin-top: 1.2rem; }
.prose a { color: #8a0f22; overflow-wrap: anywhere; }
.prose a.btn { color: #2a0a10; }
.prose p, .prose li { overflow-wrap: break-word; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose .plain { columns: 2 260px; list-style: none; padding: 0; }
.prose .plain li { break-inside: avoid; padding: .15rem 0; }
.faq details { margin: .5rem 0; padding: .7rem 1rem; border: 1px solid rgba(217, 169, 58, .45); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--gold2); }
.faq p { margin: .5rem 0 0; }
.prose .faq details { background: #fff7e2; border-color: #d9b868; }
.prose .faq summary { color: #5a0b17; }
.chiplist { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0 !important; }
.chiplist a { display: inline-block; padding: .35rem .8rem; border: 1.5px solid #c9a24a; border-radius: 999px; background: #fff7e2; text-decoration: none; font: .88rem/1.35 var(--ui); }
.chiplist a:hover { background: var(--vel); color: #fff; }
.checklist ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
.checklist li { padding: .5rem .7rem .5rem 2.2rem; position: relative; background: #fff7e2; border: 1px dashed #c9a24a; border-radius: 6px; }
.checklist li::before { content: "✓"; position: absolute; left: .75rem; top: .45rem; color: var(--vel); font-weight: 700; }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.5rem 0; padding: 1rem 1.2rem; border-left: 6px solid var(--c); border-radius: 6px; background: #2a0c14; color: var(--text); }
.callout p { margin: 0; flex: 1 1 240px; }
.cats .callout { max-width: 1100px; margin-inline: auto; }
.guide-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.guide-nav a { display: block; min-width: 0; padding: .8rem 1rem; border: 1.5px solid #c9a24a; border-radius: 8px; background: #fff7e2; text-decoration: none; }
.guide-nav a span { display: block; font: .75rem var(--ui); text-transform: uppercase; letter-spacing: .08em; color: #6b4a3f; }
.facts { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: .4rem 1rem; }
.facts dt { font-weight: 700; color: var(--vel); }
.facts dd { margin: 0; overflow-wrap: break-word; }
.crit-list { grid-template-columns: minmax(0, 1fr); }
.crit-list dd { margin-bottom: .6rem; }
.links { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .6rem; }
.links a { display: grid; padding: .6rem .8rem; border: 1.5px solid #c9a24a; border-radius: 8px; background: #fff7e2; text-decoration: none; }
.links span { font: .8rem var(--ui); color: #6b4a3f; }
.example { padding: 1rem; border: 1px dashed #c9a24a; border-radius: 8px; background: #fff7e2; }

/* Formulaires et résultats */
.toolbox { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; width: min(100% - 2rem, 1020px); margin: 1.6rem auto; align-items: start; }
.toolbox > * { min-width: 0; }
.toolbox form, .regie, .modele-form { background: var(--cream); color: var(--ink); padding: 1.2rem; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); display: grid; gap: .85rem; }
.field { min-width: 0; display: grid; gap: .25rem; }
.field label { font: 700 .88rem var(--ui); color: #5a0b17; }
.field input, .field select, .field textarea, .names input, .crit input, .crit select { width: 100%; max-width: 100%; min-width: 0; padding: .6rem .7rem; border: 1.5px solid #c9a24a; border-radius: 8px; background: #fffaf0; color: var(--ink); font: 1rem var(--ui); }
.field textarea { resize: vertical; min-height: 5rem; font-family: var(--ui); }
.field.check { display: flex; align-items: center; gap: .6rem; }
.field.check input { width: auto; }
.result { min-width: 0; padding: 1.1rem 1.2rem; border-radius: 10px; background: linear-gradient(160deg, #8c1428, #5a0b1a); color: var(--cream); border: 2px solid var(--gold); }
.result:empty { display: none; }
.res { margin: 0; }
.res > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1rem; padding: .5rem 0; border-bottom: 1px dashed rgba(240, 214, 138, .35); }
.res > div:last-child { border-bottom: 0; }
.res dt { font: .9rem var(--ui); color: #f0d6b8; }
.res dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: break-word; font-weight: 700; }
.res .main { padding-bottom: .8rem; }
.res .main dt { color: var(--gold2); }
.res .main dd { flex-basis: 100%; text-align: left; font-size: clamp(1.3rem, 4.5vw, 1.75rem); color: #fff3c9; }
.rnote { margin: .8rem 0 0; font: .82rem/1.45 var(--ui); opacity: .9; }
.err { margin: 0; color: #ffd0d0; font: 600 1rem var(--ui); }
.conv-main { margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 700; color: #fff3c9; overflow-wrap: break-word; }
.swap { align-self: end; padding: .55rem .9rem; border: 1.5px solid var(--vel); border-radius: 999px; background: transparent; color: var(--vel); font: 700 .9rem var(--ui); cursor: pointer; }
.fallback { padding: .8rem 1rem; border: 1px dashed #c9a24a; border-radius: 8px; background: #fff7e2; color: var(--ink); font: .95rem var(--ui); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.row3, .ticket-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .8rem; }
.addrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.addrow .field { flex: 1 1 200px; }
.embedbox textarea { width: 100%; max-width: 100%; font: .85rem/1.4 ui-monospace, Menlo, monospace; padding: .6rem; border: 1.5px solid #c9a24a; border-radius: 8px; background: #fffaf0; color: var(--ink); }
.embedbox .btn { margin-top: .5rem; }

/* Tableaux : toujours dans un conteneur qui défile */
.tablewrap { overflow-x: auto; max-width: 100%; position: relative; margin: .8rem 0; }
.evlist { border-collapse: collapse; width: 100%; font: .9rem/1.4 var(--ui); }
.evlist th, .evlist td { padding: .5rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(240, 214, 138, .3); }
.evlist thead th { color: var(--gold2); border-bottom: 2px solid var(--gold); white-space: nowrap; }
.evlist tbody th { font-weight: 700; }
.prose .evlist th, .prose .evlist td { border-bottom-color: #d9b868; }

/* Papiers de séance */
.modele-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; width: min(100% - 2rem, 1120px); margin: 1.6rem auto; align-items: start; }
.modele-grid > * { min-width: 0; }
.modele-side h2 { color: var(--gold2); font-size: 1.2rem; }
.paper { min-width: 0; padding: 1.4rem 1.5rem; background: #fffefa; color: #1a1a1a; border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .55); font: 1rem/1.55 var(--serif); overflow-wrap: anywhere; background-image: linear-gradient(90deg, rgba(122, 15, 30, .15) 0 2px, transparent 2px) 2.4rem 0 / 100% 100% no-repeat; padding-left: 3.2rem; }
.paper p { margin: 0 0 .3em; }
.dl-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* Régie */
.regie { width: min(100% - 2rem, 1000px); margin: 1.6rem auto; }
.regie [data-live] { display: grid; gap: .9rem; }
.history { margin: 0; padding-left: 1.4rem; }
.clockface { padding: 1.2rem; text-align: center; border-radius: 12px; background: #12060a; border: 2px solid var(--gold); color: var(--text); }
.phase { margin: 0; font: 700 1.1rem var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold2); }
.clock { margin: .3rem 0 .6rem; font: 700 clamp(3rem, 15vw, 6rem)/1 ui-monospace, Menlo, "Courier New", monospace; color: #fff3c9; }
.meter { height: 10px; border-radius: 5px; background: #3a1018; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #ff7b8a); }
.wheel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.wheel-grid > * { min-width: 0; }
.wheelbox { position: relative; max-width: 480px; width: 100%; margin: 0 auto; }
.wheelbox canvas { display: block; width: 100%; height: auto; background: transparent; border-radius: 50%; }
.pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 26px solid var(--vel); z-index: 2; filter: drop-shadow(0 2px 0 var(--gold)); }
.votes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.votes li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .6rem .8rem; border: 1px dashed #c9a24a; border-radius: 8px; background: #fff7e2; }
.votes li b { flex: 1 1 140px; min-width: 0; overflow-wrap: break-word; }
.vbtn { display: inline-flex; gap: .4rem; }
.rk { display: inline-block; min-width: 2.2rem; font: 700 .9rem var(--ui); color: var(--vel); }
.sc { font: .9rem var(--ui); color: #5a0b17; }
.empty-line { color: #6b4a3f; font: .95rem var(--ui); }
.sheetwrap { overflow-x: auto; max-width: 100%; position: relative; background: #fff; border-radius: 6px; }
.sheetwrap canvas { display: block; width: 100%; height: auto; }

/* Matrice de décision */
.matrix { width: min(100% - 2rem, 980px); margin: 1.6rem auto; padding: 1.2rem; background: var(--cream); color: var(--ink); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.matrix [data-live] { display: grid; gap: .9rem; }
.matrix h2 { color: var(--vel); font-size: 1.3rem; }
.matrix-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.matrix-top > * { min-width: 0; }
.help { margin: 0; font: .9rem/1.45 var(--ui); color: #6b4a3f; }
.names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .8rem; }
.names > * { min-width: 0; }
.crit { min-width: 0; margin: 0 0 .8rem; padding: .8rem; border: 1.5px solid #c9a24a; border-radius: 8px; display: grid; gap: .6rem; }
.crit legend { padding: 0 .4rem; font: 700 .85rem var(--ui); color: var(--vel); }
.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .6rem; }
.scores > * { min-width: 0; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ranking li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: center; }
.ranking li b { overflow-wrap: break-word; }
.ranking .bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.ranking .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ffe9a6); }
.ranking .sc { color: var(--cream); }
.matrix .result .rk, .matrix .result .sc { color: var(--cream); }
.verdict { margin: .8rem 0 0; font-weight: 700; }

/* Pied de page : pellicule et colonnes */
.foot { margin-top: 3rem; background: #0b0306; color: var(--mut); }
.filmstrip { height: 30px; background: linear-gradient(90deg, transparent 0 8px, var(--gold2) 8px 20px, transparent 20px 32px) 0 4px / 32px 6px repeat-x, linear-gradient(90deg, transparent 0 8px, var(--gold2) 8px 20px, transparent 20px 32px) 0 20px / 32px 6px repeat-x, #1a0a0e; }
.foot-grid { max-width: 1140px; margin: 0 auto; padding: 2rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.5rem; }
.foot-grid > * { min-width: 0; }
.foot h3 { color: var(--gold2); font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.foot a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.foot a:hover { color: var(--gold2); text-decoration: underline; }
.foot-about p { font: .9rem/1.5 var(--ui); }
.foot-bottom { padding: 1rem; text-align: center; border-top: 1px solid #2a1218; font: .78rem/1.5 var(--ui); }
.foot-bottom p { margin: 0; overflow-wrap: break-word; }

/* Pages intégrables */
body.embed { background: var(--cream); color: var(--ink); background-image: none; }
.embed-wrap { max-width: 640px; margin: 0 auto; padding: 1rem; }
.embed h1 { color: var(--vel); font-size: 1.35rem; }
.embed .toolbox { grid-template-columns: minmax(0, 1fr); width: 100%; margin: 1rem 0; }
.embed .toolbox form { box-shadow: none; border: 1.5px solid #c9a24a; background: #fffaf0; }
.embed-credit { margin: 1rem 0 0; font: .85rem var(--ui); text-align: right; }
.embed-credit a { color: var(--vel); }

/* Adaptation mobile */
@media (max-width: 760px) {
  .toolbox, .modele-grid, .wheel-grid, .matrix-top { grid-template-columns: minmax(0, 1fr); }
  .guide-nav, .facts { grid-template-columns: minmax(0, 1fr); }
  .hero.small .portrait { float: none; display: block; margin: 0 0 .8rem; }
  .prose { padding: 1.1rem; }
  .paper { padding-left: 2.6rem; }
}

/* Impression */
@media print {
  body { background: #fff !important; color: #000; }
  .bulbs, .top, .foot, .hero, .crumbs, .toolbox, .actions, .dl-actions, .prose, .cats, .directory, .faq, .matrix { display: none !important; }
  body.modele .modele-grid { display: block; width: 100%; margin: 0; }
  body.modele .modele-form, body.modele .modele-side h2 { display: none !important; }
  body.modele .prose { display: none !important; }
  body.modele .paper { box-shadow: none; padding: 0 0 0 1rem; background: #fff; }
  body.print-sheet .regie { display: block !important; box-shadow: none; padding: 0; background: #fff; }
  body.print-sheet .regie > .fallback, body.print-sheet .regie .ticket-form, body.print-sheet .regie .actions, body.print-sheet .regie .status { display: none !important; }
  body.print-sheet .sheetwrap { overflow: visible; }
}