/* Seconde Ficelle : kraft, carton recyclé, étiquettes de tri ficelées. Polices système uniquement. */
:root {
  --kraft: #d9b98a; --kraft-clair: #ead6b3; --pale: #f6ecd9; --papier: #fffaf0; --carton: #c49a62;
  --brun: #4a3320; --brun2: #6b4a24; --encre: #2b1d10; --vert: #2f7d46; --jaune: #e0a800; --bleu: #2563a8; --rouille: #b5532f;
  --titre: "Rockwell", "Roboto Slab", "Cambria", "Georgia", serif;
  --tampon: "American Typewriter", "Courier New", ui-monospace, monospace;
  --texte: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rayon: 6px;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; color: var(--encre); font: 1rem/1.6 var(--texte); background-color: var(--kraft);
  background-image: radial-gradient(rgba(74, 51, 32, .07) 1px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 7px 7px, 13px 13px; background-position: 0 0, 3px 5px; min-height: 100vh; position: relative;
}
img, svg, canvas, video { max-width: 100% }
canvas { height: auto }
a { color: #1b4a80; text-underline-offset: 3px }
a:hover { color: var(--rouille) }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px}
h1, h2, h3 { font-family: var(--titre); line-height: 1.2; color: var(--brun); overflow-wrap: anywhere }
main { position: relative; display: block; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem }
.sr, .sr-file { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap }
.skip { position: absolute; left: .5rem; top: -4rem; background: var(--papier); padding: .5rem .8rem; border: 2px solid var(--brun); z-index: 20 }
.skip:focus { top: .5rem }
[hidden] { display: none !important }

/* En-tête : une bande de carton ondulé et un bout de ficelle */
.ent { position: relative; background: repeating-linear-gradient(90deg, #c79d66 0 7px, #bd925b 7px 14px); border-bottom: 4px solid var(--brun2); box-shadow: 0 3px 0 rgba(74, 51, 32, .25) }
.ent-in { max-width: 72rem; margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem }
.ficelle { height: 6px; background: repeating-linear-gradient(90deg, #8a5a2b 0 9px, #a8773f 9px 14px, #8a5a2b 14px 18px); opacity: .85 }
.marque { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--brun); min-width: 0 }
.marque img { flex: none; transform: rotate(-6deg) }
.marque-nom { font-family: var(--titre); font-weight: 800; font-size: 1.15rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase }
.rubans { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; margin-left: auto; min-width: 0 }
.rubans > a, .menu > summary { display: inline-block; font-family: var(--tampon); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brun); background: var(--papier); border: 2px solid var(--brun); border-radius: 3px; padding: .3rem .65rem; text-decoration: none; cursor: pointer; list-style: none; box-shadow: 2px 2px 0 var(--brun2) }
.menu > summary::-webkit-details-marker { display: none }
.rubans > a:hover, .menu > summary:hover, .menu[open] > summary { background: var(--jaune); color: var(--encre) }
.menu { position: relative }
.menu-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 15; width: min(22rem, calc(100vw - 2rem)); display: grid; gap: .1rem; background: var(--papier); border: 3px solid var(--brun); padding: .5rem; box-shadow: 5px 5px 0 rgba(74, 51, 32, .35) }
.menu-panel a { padding: .4rem .6rem; text-decoration: none; color: var(--encre); border-radius: 3px; overflow-wrap: anywhere }
.menu-panel a:hover { background: var(--kraft-clair) }

/* Fil d'Ariane */
.miettes ol { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .4rem; font-family: var(--tampon); font-size: .85rem }
.miettes li + li::before { content: "/"; margin-right: .4rem; color: var(--brun2) }
.miettes a { color: var(--brun2) }
.miettes span { overflow-wrap: anywhere }

/* En-tête de page : une étiquette de carton */
.entete { position: relative; background: var(--papier); border: 3px solid var(--brun); border-left: 14px solid var(--c, var(--vert)); border-radius: 4px 14px 4px 4px; padding: 1.2rem 1.2rem 1rem; margin-bottom: 1.6rem; box-shadow: 6px 6px 0 rgba(74, 51, 32, .28) }
.entete::after { content: ""; position: absolute; right: 16px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--kraft); border: 2px solid var(--brun); box-shadow: inset 2px 2px 0 rgba(74, 51, 32, .3) }
.entete-corps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start }
.entete-corps > * { min-width: 0 }
.tampon { display: grid; place-items: center; width: 4rem; height: 4rem; font-size: 2rem; border: 3px dashed var(--c, var(--vert)); border-radius: 50%; transform: rotate(-8deg); background: rgba(255, 255, 255, .6) }
.tampon:empty { display: none }
.entete h1 { margin: 0 1.6rem .4rem 0; font-size: clamp(1.5rem, 4.5vw, 2.3rem) }
.chapo { margin: 0 0 .6rem; font-size: 1.08rem; max-width: 62ch }
.compte { margin: .2rem 0 0; font-family: var(--tampon); color: var(--brun2) }
.signature { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 0; font-size: .88rem; color: var(--brun2); flex-wrap: wrap }
.signature > span:last-child { min-width: 0; overflow-wrap: anywhere }
.monogramme { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brun); color: var(--papier); font-family: var(--tampon); font-weight: 700; font-size: .8rem }

/* Accueil */
.accueil { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.5rem; align-items: center; margin-bottom: 2rem; padding: 1.5rem 0 .5rem }
.accueil > * { min-width: 0 }
.tampon-texte { display: inline-block; margin: 0 0 .8rem; padding: .25rem .7rem; border: 3px double var(--rouille); color: var(--rouille); font-family: var(--tampon); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-2deg); font-size: .85rem }
.accueil h1 { font-size: clamp(1.9rem, 5.5vw, 3.2rem); margin: 0 0 .8rem }
.accueil mark { background: linear-gradient(transparent 55%, var(--jaune) 55% 92%, transparent 92%); color: inherit; padding: 0 .1em }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 }
.accueil-art { background: var(--papier); border: 3px solid var(--brun); border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; padding: 1rem; box-shadow: 6px 6px 0 rgba(74, 51, 32, .28) }
.bins-art { display: block; width: 100%; height: auto }
.cycle { width: 100%; height: auto }
.trois { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem }
.trois li { background: var(--papier); border: 3px solid var(--brun); border-top: 14px solid var(--c); padding: .8rem 1rem; border-radius: 4px }
.trois b { display: block; font-family: var(--titre); font-size: 1.2rem; margin-bottom: .2rem }
.band { position: relative; margin: 0 0 2.2rem }
.band > h2 { display: inline-block; margin: 0 0 1rem; padding: .2rem .9rem; background: var(--brun); color: var(--papier); font-size: 1.3rem; border-radius: 3px; transform: rotate(-.6deg) }
.band > p.note { margin-top: 0 }

/* Rayons : des bacs de tri */
.bins, .tickets, .etiquettes, .trois { list-style: none; padding: 0 }
.bins { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem }
.bins > li { display: flex; min-width: 0 }
.bin { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; text-decoration: none; color: var(--encre); background: var(--papier); border: 3px solid var(--brun); border-radius: 6px 6px 14px 14px; overflow: hidden; box-shadow: 4px 4px 0 rgba(74, 51, 32, .28); transition: transform .12s }
.bin:hover { transform: translateY(-3px) rotate(-.6deg); color: var(--encre) }
.bin i { display: block; font-style: normal; font-size: 1.7rem; text-align: center; padding: .35rem; background: var(--c); border-bottom: 3px solid var(--brun) }
.bin b { padding: .6rem .8rem 0; font-family: var(--titre); line-height: 1.25; overflow-wrap: anywhere }
.bin span { padding: .2rem .8rem .7rem; font-family: var(--tampon); font-size: .8rem; color: var(--brun2); overflow-wrap: anywhere }

/* Tickets (outils, guides, éléments de menus) */
.tickets { margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .9rem }
.tickets > li { display: flex; min-width: 0 }
.ticket { flex: 1; min-width: 0; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: .7rem; align-items: start; padding: .8rem .9rem; text-decoration: none; color: var(--encre); background: var(--pale); border: 2px dashed var(--brun2); border-left: 10px solid var(--c); border-radius: 4px 12px 12px 4px }
.ticket:hover { background: var(--papier); border-style: solid; color: var(--encre) }
.ticket i { grid-row: 1 / 3; font-style: normal; font-size: 1.7rem; text-align: center; line-height: 1.2 }
.ticket b { font-family: var(--titre); line-height: 1.25; overflow-wrap: anywhere }
.ticket span { font-size: .88rem; color: #5a4430; overflow-wrap: anywhere }

/* Annuaire : étiquettes de carton ficelées */
.finder { background: var(--papier); border: 3px solid var(--brun); border-radius: 4px; padding: .9rem; margin-bottom: 1.2rem }
.finder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .5rem; align-items: center }
.finder-row label { grid-column: 1 / -1; font-family: var(--tampon); font-weight: 700; font-size: .85rem; text-transform: uppercase }
.finder-row input { min-width: 0 }
.finder-clear { border: 2px solid var(--brun); background: var(--pale); border-radius: 4px; padding: .5rem .7rem; cursor: pointer }
.chips { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem }
.chips button { font: inherit; font-size: .85rem; cursor: pointer; padding: .25rem .7rem; border: 2px solid var(--brun2); border-radius: 999px; background: var(--pale); color: var(--encre) }
.chips button[aria-pressed="true"] { background: var(--brun); color: var(--papier); border-color: var(--brun) }
.finder-count { margin: .6rem 0 0; font-family: var(--tampon); font-size: .85rem; color: var(--brun2) }
.etiquettes { margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 1.1rem .9rem }
.etiquettes > li { position: relative; display: flex; min-width: 0; padding-top: 12px }
.etiquette { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; padding: 1.5rem .8rem .8rem; text-decoration: none; color: var(--encre); background: linear-gradient(var(--papier), #f4e7cc); border: 2px solid var(--brun2); border-top: 8px solid var(--c); border-radius: 3px 3px 10px 10px; clip-path: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%); transition: transform .12s }
.etiquette:hover { transform: rotate(-1.2deg); color: var(--encre) }
.etiquette b { font-family: var(--tampon); font-size: 1rem; overflow-wrap: anywhere }
.etiquette span:last-child { font-size: .78rem; color: #5a4430; overflow-wrap: anywhere }
.trou { position: absolute; left: 16px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--kraft); border: 2px solid var(--brun2) }
.etiquettes > li::before { content: ""; position: absolute; left: 22px; top: -2px; width: 2px; height: 22px; background: #8a5a2b; transform: rotate(14deg); transform-origin: bottom; opacity: .8; z-index: 1 }
.fav { position: absolute; right: 6px; top: 16px; z-index: 2; border: 0; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--brun); padding: .2rem }
.fav[aria-pressed="true"] { color: #c98a00 }
.favbox { background: var(--pale); border: 3px dashed var(--brun2); padding: .8rem 1rem; margin-bottom: 1.2rem }
.favbox h3 { margin: 0 0 .6rem }
.favbox-actions { display: flex; flex-wrap: wrap; gap: .8rem }
.empty { text-align: center; padding: 1.5rem; background: var(--papier); border: 3px dashed var(--brun2) }

/* Boutons et liens */
.btn, button.btn { display: inline-block; font-family: var(--tampon); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer; padding: .6rem 1.1rem; color: var(--papier); background: var(--brun); border: 3px solid var(--brun); border-radius: 4px; box-shadow: 3px 3px 0 var(--brun2) }
.btn:hover { background: var(--vert); border-color: var(--vert); color: #fff }
.btn.alt { background: var(--papier); color: var(--brun); border-color: var(--brun) }
.btn.alt:hover { background: var(--jaune); color: var(--encre); border-color: var(--brun) }
.btn.small { padding: .35rem .75rem; font-size: .82rem }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.linkbtn { font: inherit; background: none; border: 0; padding: 0; color: #1b4a80; text-decoration: underline; cursor: pointer }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin: 1.5rem 0; padding: 1rem 1.2rem; background: var(--papier); border: 3px solid var(--brun); border-left: 14px solid var(--c, var(--vert)); border-radius: 4px }
.callout p { margin: 0; flex: 1 1 14rem; min-width: 0 }

/* Contenu rédigé */
.prose { position: relative; max-width: 50rem; margin: 0 auto 2rem; padding: 1.2rem 1.4rem; background: var(--papier); border: 3px solid var(--brun); border-radius: 4px; box-shadow: 5px 5px 0 rgba(74, 51, 32, .25); overflow-wrap: anywhere }
.prose.wide { max-width: none }
main > .prose, main > article.prose { margin-left: auto; margin-right: auto }
.prose h2 { margin: 1.6rem 0 .5rem; font-size: 1.35rem; padding-bottom: .25rem; border-bottom: 3px dotted var(--carton) }
.prose h2:first-child { margin-top: 0 }
.prose h3 { margin: 1.2rem 0 .4rem }
.prose p, .prose li { max-width: 68ch }
.prose ul, .prose ol { padding-left: 1.3rem }
.prose ul.plain { list-style: square }
.guide { counter-reset: etape }
.guide .intro { font-size: 1.1rem }
.guide > h2:not(:nth-last-of-type(-n+4)) { counter-increment: etape }
.guide > h2:not(:nth-last-of-type(-n+4))::before { content: counter(etape); display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-right: .6rem; border-radius: 50%; background: var(--vert); color: #fff; font-family: var(--tampon); font-size: 1rem }
.checklist { background: var(--pale); border: 2px dashed var(--brun2); padding: .6rem 1rem }
.checklist ul { list-style: none; padding: 0; margin: 0 }
.checklist li { position: relative; padding: .25rem 0 .25rem 1.8rem }
.checklist li::before { content: "☐"; position: absolute; left: 0; color: var(--vert); font-weight: 700 }
.note { font-size: .92rem; color: #5a4430; overflow-wrap: anywhere }
.rnote { font-size: .88rem; color: #5a4430; margin: .6rem 0 0 }
.help { font-size: .88rem; color: #5a4430 }
.status { min-height: 1.4em; font-family: var(--tampon) }
.facts { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .35rem 1rem }
.facts dt { font-family: var(--tampon); font-weight: 700 }
.facts dd { margin: 0; overflow-wrap: anywhere }
.links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .6rem }
.links a { display: block; padding: .6rem .8rem; border: 2px dashed var(--brun2); text-decoration: none; border-radius: 4px; overflow-wrap: anywhere }
.links b, .links span { display: block }
.chiplist { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .5rem }
.chiplist a { display: inline-block; padding: .3rem .8rem; border: 2px solid var(--brun2); border-radius: 999px; background: var(--pale); text-decoration: none; color: var(--encre); overflow-wrap: anywhere }
.chiplist a:hover { background: var(--jaune) }
.guide-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem }
.guide-nav a { display: block; padding: .7rem .9rem; border: 2px solid var(--brun2); border-radius: 4px; text-decoration: none; background: var(--pale); color: var(--encre); overflow-wrap: anywhere }
.guide-nav span { display: block; font-family: var(--tampon); font-size: .78rem; color: var(--brun2); text-transform: uppercase }
.faq details { background: var(--pale); border: 2px solid var(--brun2); border-radius: 4px; margin: 0 0 .5rem }
.faq summary { cursor: pointer; padding: .6rem .9rem; font-weight: 700; overflow-wrap: anywhere }
.faq details p { margin: 0; padding: 0 .9rem .8rem }
.band.faq { max-width: 50rem }

/* Outils et formulaires */
.toolbox { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin: 0 0 2rem }
.toolbox > * { min-width: 0 }
.toolbox form, .options, .modele-form, .matrix-top, .names, .scores { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem }
.toolbox form, .modele-form, .options { background: var(--papier); border: 3px solid var(--brun); border-radius: 4px; padding: 1rem }
.field { min-width: 0; display: grid; gap: .25rem }
.field label, .embedbox label { font-family: var(--tampon); font-weight: 700; font-size: .85rem; overflow-wrap: anywhere }
.field.check { display: flex; gap: .5rem; align-items: center }
input, select, textarea { width: 100%; max-width: 100%; min-width: 0; font: inherit; color: var(--encre); background: #fff; border: 2px solid var(--brun2); border-radius: 4px; padding: .5rem .6rem }
input[type="checkbox"], input[type="radio"] { width: auto }
input[type="range"], progress { width: 100%; padding: 0 }
textarea { resize: vertical }
.result { position: relative; min-width: 0; background: var(--papier); border: 3px dashed var(--brun); border-radius: 4px; padding: 1rem; overflow-wrap: anywhere }
.res { margin: 0; display: grid; gap: .5rem }
.res > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .35rem .5rem; border-bottom: 1px dotted var(--carton) }
.res dt { font-family: var(--tampon); font-size: .85rem }
.res dd { margin: 0; min-width: 0; font-weight: 700; text-align: right }
.res > div.main { background: linear-gradient(transparent 12%, rgba(224, 168, 0, .45) 12% 88%, transparent 88%); border-bottom: 0; font-size: 1.1rem }
.err { color: #8f2a12; font-weight: 700; margin: 0 }
.conv-main { font-family: var(--titre); font-size: 1.3rem; font-weight: 700; margin: 0 0 .6rem }
.example { background: var(--pale); border: 2px dashed var(--brun2); padding: .8rem 1rem }
.example .result { margin-top: .6rem }
.embedbox { background: var(--pale); border: 2px dashed var(--brun2); padding: .8rem 1rem; display: grid; gap: .5rem }
.embedbox textarea { font-family: ui-monospace, "Courier New", monospace; font-size: .82rem }
.fallback { padding: .6rem .8rem; background: var(--pale); border: 2px solid var(--rouille); margin: 0 0 1rem }
.tablewrap { position: relative; max-width: 100%; overflow-x: auto; margin: .6rem 0 }
.tablewrap pre, pre { max-width: 100%; overflow-x: auto; position: relative; background: #fff; padding: .6rem; border: 2px solid var(--brun2) }
table { border-collapse: collapse; width: 100%; font-size: .92rem }
th, td { text-align: left; padding: .4rem .6rem; border: 1px solid var(--carton); vertical-align: top }
thead th { background: var(--kraft-clair); font-family: var(--tampon) }
.evlist { min-width: 28rem }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 1rem 0 }
.month { min-width: 0; overflow-x: auto; position: relative }
.month table { font-size: .8rem; text-align: center }
.month caption { font-family: var(--tampon); font-weight: 700; text-align: left; padding: .2rem 0 }
.month td, .month th { text-align: center; padding: .2rem }
td.mk, .mk { background: var(--jaune); font-weight: 700 }
.controls { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin: .6rem 0 }
.controls select, .controls input { width: auto }

/* Fiches, aperçus, atelier */
.modele-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 2rem }
.modele-grid > *, .matrix-top > * { min-width: 0 }
.modele-side { background: var(--papier); border: 3px solid var(--brun); border-radius: 4px; padding: 1rem; min-width: 0 }
.modele-side h2 { margin-top: 0 }
.paper { background: #fff; border: 1px solid var(--carton); box-shadow: 0 0 0 6px var(--kraft-clair); padding: 1.2rem; font-family: Georgia, "Times New Roman", serif; max-width: 100%; overflow-wrap: anywhere; overflow-x: auto; position: relative }
.paper p { margin: 0 0 .35em }
.dl-actions, .img-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem }
.imgtool { position: relative; margin-bottom: 2rem; display: grid; gap: 1rem }
.imgtool > * { min-width: 0 }
.drop { position: relative; overflow: hidden; border: 3px dashed var(--brun2); background: var(--pale); border-radius: 6px; text-align: center }
.drop.over { background: var(--kraft-clair); border-color: var(--vert) }
.drop label { display: block; padding: 2rem 1rem; cursor: pointer; overflow-wrap: anywhere }
.drop small { display: block; color: #5a4430 }
.img-status { font-family: var(--tampon) }
.img-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem }
.img-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; background: var(--papier); border: 2px solid var(--brun2); padding: .8rem }
.img-item figure { margin: 0; min-width: 0 }
.img-item img { display: block; width: 100%; height: auto; max-height: 16rem; object-fit: contain; background: #fff }
.img-info { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere }
.img-info p { margin: .15rem 0 }
.options { margin: 0 }
.swap { justify-self: start }

/* Matrice de décision */
.matrix { position: relative; margin-bottom: 2rem; background: var(--papier); border: 3px solid var(--brun); padding: 1rem; border-radius: 4px }
.matrix [data-live] { display: grid; gap: .8rem }
.matrix-top { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) }
.names { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) }
.crit { min-width: 0; margin: 0 0 .8rem; padding: .8rem; border: 2px dashed var(--brun2); display: grid; gap: .6rem }
.crit legend { font-family: var(--tampon); font-weight: 700; padding: 0 .4rem }
.scores { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)) }
.ranking { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .5rem }
.ranking li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 8rem) auto; gap: .6rem; align-items: center; padding: .4rem .6rem; background: var(--pale); border: 2px solid var(--brun2) }
.ranking li > * { min-width: 0; overflow-wrap: anywhere }
.rk { font-family: var(--tampon); font-weight: 700 }
.bar { display: block; height: .8rem; background: #fff; border: 2px solid var(--brun2) }
.bar i { display: block; height: 100%; background: var(--vert) }
.sc { font-weight: 700; white-space: nowrap }
.verdict { font-weight: 700 }

/* Pied de page : carton foncé */
.pied { margin-top: 2rem; color: #f3e6cc; background: repeating-linear-gradient(90deg, #3b2a1a 0 8px, #342414 8px 16px); border-top: 6px solid var(--brun2) }
.pied a { color: #f3e6cc }
.pied a:hover { color: var(--jaune) }
.pied-in { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 1rem; display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 1.5rem }
.pied-in > * { min-width: 0 }
.pied h3 { margin: 0 0 .5rem; font-family: var(--tampon); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jaune) }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem }
.pied li { overflow-wrap: anywhere }
.pied .marque { color: #f3e6cc }
.pied-apropos p { font-size: .9rem }
.pied-bas { max-width: 72rem; margin: 0 auto; padding: .8rem 1rem 1.5rem; font-size: .8rem; opacity: .85; overflow-wrap: anywhere }

/* Pages intégrables */
.embed { background: var(--kraft) }
.embed-wrap { max-width: 40rem; padding: 1rem }
.embed-wrap h1 { font-size: 1.3rem; margin-top: 0 }
.embed .toolbox { grid-template-columns: minmax(0, 1fr) }
.embed-credit { font-family: var(--tampon); font-size: .85rem; text-align: right }

@media (max-width: 900px) {
  .pied-in { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pied-apropos { grid-column: 1 / -1 }
  .accueil, .toolbox, .modele-grid { grid-template-columns: minmax(0, 1fr) }
  .accueil-art { max-width: 24rem }
}
@media (max-width: 640px) {
  main { padding: 1rem .75rem 2.5rem }
  .ent-in { padding: .5rem .75rem }
  .rubans { margin-left: 0; width: 100% }
  .menu-panel { position: static; width: 100%; margin-top: .4rem }
  .menu { flex: 1 1 100% }
  .entete { padding: 1rem .9rem .8rem; border-left-width: 10px }
  .entete-corps { grid-template-columns: minmax(0, 1fr) }
  .tampon { width: 3rem; height: 3rem; font-size: 1.5rem }
  .facts, .guide-nav, .img-item { grid-template-columns: minmax(0, 1fr) }
  .res > div { grid-template-columns: minmax(0, 1fr); gap: .1rem }
  .res dd { text-align: left }
  .ranking li { grid-template-columns: auto minmax(0, 1fr) auto }
  .ranking .bar { grid-column: 1 / -1; grid-row: 2 }
  .prose { padding: 1rem .9rem }
  .pied-in { grid-template-columns: minmax(0, 1fr) }
  .etiquettes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem }
  .bins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem }
  .tickets { grid-template-columns: minmax(0, 1fr) }
  .evlist { min-width: 24rem }
}
@media print {
  body { background: #fff }
  .ent, .pied, .miettes, .skip, .entete, .dl-actions, .modele-form, .band, .prose, .menu, #contenu > section:not(.modele-grid) { display: none !important }
  .modele-grid { display: block }
  .modele-side { border: 0; padding: 0; box-shadow: none }
  .modele-side h2 { display: none }
  .paper { box-shadow: none; border: 0 }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }