/* Démonstration « Ressourcerie du Vieux-Moulin » : clair et éditorial, rail d'icônes foncé,
   sections séparées par des filets, Inter Tight / Source Serif 4 (hébergées sur le site). */
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
	--fond: #fbfaf7;
	--blanc: #ffffff;
	--encre: #1c2427;
	--gris: #5f6a6d;
	--pale: #7f8a8c;
	--pale2: #98a2a4;
	--filet: #e6e3dc;
	--grisfond: #f2f0ea;
	--c1: #e0701a;
	--c2: #0f8aa0;
	--c3: #7b7f12;
	--c4: #b0409a;
	--serif: "Source Serif 4", Georgia, serif;
	/* Graphiques */
	--g-grille: #eeebe4;
	--g-base: #d6d2c8;
	--g-axe: #98a2a4;
	--g-surface: #fbfaf7;
	--g-encre: #1c2427;
	--g-vide: #f2f0ea;
	--g-chiffres: "Source Serif 4", Georgia, serif;
	/* Noyau commun */
	--d-surface: #ffffff;
	--d-encre: #1c2427;
	--d-trait: #e6e3dc;
	--d-accent: #1c2427;
	--d-accent-texte: #ffffff;
	--d-pale: #5f6a6d;
	--d-champ: #ffffff;
	--d-survol: #f7f5f0;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font: 400 0.875rem/1.45 "Inter Tight", system-ui, sans-serif; /* 14 */ font-variant-numeric: tabular-nums; overflow-x: hidden; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c2); outline-offset: 2px; }
.noscript { padding: 2em; text-align: center; }

/* ---------- Cadre : rail d'icônes + contenu ---------- */
.cadre { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); /* 68 */ min-height: calc(100vh - var(--bandeau, 2.7rem)); background: linear-gradient(to right, var(--encre) 4.25rem, var(--fond) 0); }
.rail { position: sticky; top: 0; height: calc(100vh - var(--bandeau, 2.7rem)); z-index: 20; background: var(--encre); display: flex; flex-direction: column; align-items: center; padding: 1.125rem 0; gap: 0.5rem; /* 18 / 8 */ }
.rail .mq, .mq-tel { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--c2); display: grid; place-items: center; color: #fff; font: 600 1.125rem var(--serif); /* 36 / 10 / 18 */ }
.rail .mq { margin-bottom: 1.125rem; }
.rail a { position: relative; width: 2.625rem; height: 2.625rem; border-radius: 0.75rem; display: grid; place-items: center; color: #8d9a9d; text-decoration: none; /* 42 / 12 */ }
.rail a:hover { color: #fff; }
.rail a.on { background: rgba(255, 255, 255, .1); color: #fff; }
.rail a:focus-visible { outline-color: #8cc6d1; }
.rail svg, .onglets svg, .plus-menu svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.infob { position: absolute; left: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%); padding: 0.35rem 0.6rem; border-radius: 0.5rem; background: var(--encre); color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 0.6rem 1.2rem -0.6rem rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .12s; }
.rail a:hover .infob, .rail a:focus-visible .infob { opacity: 1; }
.pastille { position: absolute; top: 0.1rem; right: 0.05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 1rem; background: var(--c1); color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center; }
.rail .bas { margin-top: auto; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--c1); color: #fff; font-weight: 600; font-size: 0.75rem; display: grid; place-items: center; /* 34 / 12 */ }
.onglets { display: none; }
.mq-tel { display: none; flex: none; }

/* ---------- Contenu ---------- */
.princ { padding: 1.625rem 2.5rem 2.5rem; min-width: 0; /* 26 / 40 */ }
.tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; flex-wrap: wrap; padding-bottom: 1.125rem; border-bottom: 1px solid var(--encre); }
.fil { font-size: 0.75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c2); }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.tete h1 { margin: 0.25rem 0 0; font: 600 2.125rem/1.1 var(--serif); letter-spacing: -0.01em; /* 34 */ }
.outils { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; justify-content: flex-end; }
.choix { position: relative; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.5rem 0.875rem; border: 1px solid var(--filet); border-radius: 1.875rem; background: var(--blanc); font-size: 0.8125rem; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; /* 8 / 14 / 13 */ }
.choix:hover { border-color: #cfcabe; }
.choix b { font-weight: 600; }
.choix.on { border-color: var(--encre); font-weight: 600; }
.choix-sel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; appearance: none; border: 0; }
.choix-sel:focus-within { outline: 2px solid var(--c2); outline-offset: 2px; }
.seg { display: inline-flex; gap: 0.25rem; }
.recherche input { border: 0; outline: 0; background: none; width: 9em; padding: 0; font-size: inherit; }
.recherche svg { width: 1rem; height: 1rem; stroke: var(--pale); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.recherche:focus-within { outline: 2px solid var(--c2); outline-offset: 2px; }
.action { padding: 0.5625rem 1.125rem; border: 0; border-radius: 1.875rem; background: var(--encre); color: #fff; font-weight: 600; font-size: 0.8125rem; cursor: pointer; white-space: nowrap; /* 9 / 18 / 13 */ }
.action:hover { background: #2f3b3f; }

/* Chiffres du mois */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--filet); }
.chiffres > div { padding: 1rem 1.5rem 1rem 0; min-width: 0; }
.chiffres > div + div { padding-left: 1.5rem; border-left: 1px solid var(--filet); }
.chiffres span { display: block; font-size: 0.8125rem; color: var(--gris); }
.chiffres strong { display: block; font: 400 2.5rem/1.15 var(--serif); letter-spacing: -0.02em; overflow-wrap: anywhere; /* 40 */ }
.chiffres strong small { font-size: 1.125rem; color: var(--pale2); letter-spacing: 0; }
.chiffres em { display: block; font-style: normal; font-size: 0.75rem; color: var(--gris); }
.chiffres em span { display: inline; font-size: inherit; }
.chiffres em b { color: #3b7d2a; font-weight: 600; }
.chiffres em b.att, b.att { color: #c25e0f; font-weight: 600; }
.att-lien { text-decoration: none; }
.att-lien:hover { text-decoration: underline; }
.court, .chiffres em .court { display: none; }

/* Grille des blocs */
.grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 2.5rem; }
.grille > .bloc:nth-child(n+3) { border-top: 1px solid var(--filet); margin-top: 1rem; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.deux > .bloc:nth-child(n+3) { border-top: 1px solid var(--filet); margin-top: 1rem; }
.bloc { padding-top: 1.125rem; min-width: 0; }
.bloc.sep { border-top: 1px solid var(--filet); margin-top: 1rem; }
.bloc h2 { margin: 0; font: 600 1.125rem var(--serif); /* 18 */ }
.bloc-tete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.625rem; }
.bloc-tete > span { font-size: 0.75rem; color: var(--pale); }
.legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.75rem; color: var(--gris); }
.legende i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 2px; margin-right: 0.375rem; vertical-align: -1px; }
.legende i.creux { background: none; border: 1.5px solid var(--g-base); }
.graph { position: relative; height: 16.5rem; }
.graph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bulle { position: absolute; z-index: 5; background: var(--encre); color: #fff; border-radius: 0.5rem; padding: 0.44rem 0.625rem; font-size: 0.75rem; line-height: 1.45; white-space: nowrap; pointer-events: none; box-shadow: 0 0.6rem 1.25rem -0.6rem rgba(0, 0, 0, .5); }
.note { margin: 0.75rem 0 0; font-size: 0.6875rem; color: var(--pale); }
.vide { color: var(--pale); font-size: 0.8125rem; }
.pale { color: var(--pale); }

/* Matières par catégorie : une case par 100 kg */
.etat { display: flex; height: 0.625rem; border-radius: 0.3125rem; overflow: hidden; gap: 2px; margin: 0.25rem 0 0.5rem; }
.etat span { display: block; }
.etat.barre { margin: 0; background: var(--grisfond); }
.immeubles { display: grid; gap: 0.5625rem; margin-top: 0.5rem; }
.imm { display: grid; grid-template-columns: 8.125rem minmax(0, 1fr) 2.75rem; align-items: center; gap: 0.75rem; font-size: 0.8125rem; /* 130 / 44 */ }
.imm small { display: block; color: var(--pale); font-size: 0.6875rem; }
.cases { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.cases i { aspect-ratio: 1; border-radius: 2px; background: var(--c2); }
.cases i.l { background: var(--c3); }
.cases i.r { background: #c9c4b8; }
.imm .taux { text-align: right; color: var(--gris); white-space: nowrap; }

/* Collectes en colonnes */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.col { background: var(--grisfond); border-radius: 0.75rem; padding: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; transition: box-shadow .12s, background .12s; }
.col.cible { background: #e3f0f2; box-shadow: inset 0 0 0 2px var(--c2); }
.col-tete { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 600; color: var(--gris); padding: 0.125rem 0.25rem; }
.col-tete b { background: var(--blanc); border-radius: 1.25rem; padding: 0 0.5rem; font-weight: 600; }
.col-liste { display: flex; flex-direction: column; gap: 0.5rem; max-height: 22rem; overflow-y: auto; scrollbar-width: thin; padding: 1px; margin: -1px; }
.col-vide { margin: 0.25rem; font-size: 0.75rem; color: var(--pale); }
.fiche { position: relative; display: block; background: var(--blanc); border-radius: 0.5625rem; padding: 0.5625rem 0.6875rem; box-shadow: 0 1px 2px rgba(28, 36, 39, .08); font-size: 0.8125rem; text-decoration: none; }
.kanban .fiche { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fiche strong { font-weight: 600; display: block; }
.fiche-lien { text-decoration: none; }
.fiche-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fiche-lien:focus-visible { outline: none; }
.fiche-lien:focus-visible::after { outline: 2px solid var(--c2); outline-offset: 1px; }
.fiche .meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.3125rem; color: var(--pale); font-size: 0.75rem; }
.fiche:hover { box-shadow: 0 1px 2px rgba(28, 36, 39, .08), 0 0 0 1px #d8d4ca; }
.kanban .fiche { padding-right: 1.9rem; }
.depl { position: absolute; z-index: 1; top: 0.3rem; right: 0.3rem; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 0.4rem; background: none; color: var(--pale2); font-size: 0.85rem; cursor: pointer; opacity: .55; }
.depl:hover, .depl:focus-visible, .fiche:hover .depl { opacity: 1; background: var(--grisfond); color: var(--encre); }
.fiche-vol { position: fixed; left: 0; top: 0; z-index: 80; margin: 0; pointer-events: none; box-shadow: 0 1rem 2rem -0.8rem rgba(28, 36, 39, .45); cursor: grabbing; }
.fiche-origine { opacity: .35; }
.prio { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 0.06rem 0.44rem; border-radius: 1.25rem; white-space: nowrap; }
.prio.urg { background: #fde7d6; color: #a14c0b; }
.prio.norm { background: #dcf0f3; color: #0b6474; }
.prio.bas { background: #ece9e1; color: var(--gris); }
.prio.rc { background: #ecedd3; color: #575a0b; }
.fait { opacity: .6; text-decoration: line-through; text-decoration-color: var(--pale); }
.fait .depl { text-decoration: none; }

/* Quarts de bénévolat */
.quarts { display: grid; grid-template-columns: 8.125rem repeat(6, minmax(0, 1fr)) 6.25rem; column-gap: 0.375rem; align-content: start; font-size: 0.8125rem; /* 130 / 100 */ }
.quarts .jour { font-size: 0.6875rem; color: var(--pale); text-align: center; padding-bottom: 0.375rem; border-bottom: 1px solid var(--filet); }
.jour.auj { color: var(--c2); font-weight: 600; }
.poste, .q, .q-etat { padding: 0.4375rem 0; border-bottom: 1px solid var(--g-grille); display: flex; align-items: center; min-width: 0; }
.q { justify-content: center; }
.q i { width: 100%; height: 1.375rem; border-radius: 0.375rem; background: var(--c2); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 0.6875rem; font-weight: 600; }
.q i.demi { background: #cfe6ea; color: #0b6474; }
.q i.vide { background: none; border: 1.5px dashed #e7b48a; color: #a14c0b; }
.q i.ferme { background: var(--grisfond); color: var(--pale); font-weight: 400; }
.q-btn { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0.375rem; }
.q-btn:hover i { filter: brightness(.94); box-shadow: 0 0 0 2px rgba(15, 138, 160, .25); }
.q-etat { justify-content: flex-end; }
.q-etat-tel { display: none; }

/* Calendrier des collectes */
.semaine { display: grid; grid-template-columns: 7.5rem repeat(7, minmax(0, 1fr)); column-gap: 0.375rem; font-size: 0.8125rem; }
.semaine .jour { font-size: 0.6875rem; color: var(--pale); text-align: center; padding-bottom: 0.375rem; border-bottom: 1px solid var(--filet); }
.semaine .poste { align-items: flex-start; gap: 0.4rem; padding-top: 0.625rem; font-weight: 600; }
.pt { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 2px; margin-top: 0.3rem; }
.case-j { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.5rem 0; min-height: 6rem; border-bottom: 1px solid var(--g-grille); min-width: 0; }
.case-j.auj { background: linear-gradient(#eef6f7, #eef6f7) center / calc(100% + 0.375rem) 100% no-repeat; }
.fiche.mini { padding: 0.4rem 0.5rem; font-size: 0.75rem; line-height: 1.3; }
.fiche.mini strong { overflow-wrap: anywhere; }
.fiche.mini .meta { display: block; margin-top: 0.15rem; font-size: 0.6875rem; }
.agenda { display: none; }
.jour-titre { margin: 1rem 0 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.agenda .fiche + .fiche { margin-top: 0.5rem; }
.mois-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--filet); border-top: 1px solid var(--filet); }
.mois-grille .jour { padding: 0.375rem; font-size: 0.6875rem; color: var(--pale); text-align: center; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.case-m { min-height: 6.5rem; padding: 0.3rem; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; background: var(--blanc); }
.case-m.hors { background: var(--grisfond); }
.case-m.hors .num { color: var(--pale2); }
.case-m .num { font-size: 0.75rem; color: var(--gris); }
.case-m.auj .num { color: #fff; background: var(--c2); border-radius: 1rem; align-self: flex-start; padding: 0 0.4rem; font-weight: 600; }
.puce { display: block; padding: 0.1rem 0.35rem; border-radius: 0.3rem; border-left: 3px solid var(--coul); background: var(--grisfond); font-size: 0.6875rem; line-height: 1.35; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce:hover { background: #e8e5dd; }
.liste-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.625rem; }
.liste-fiches .fiche { background: var(--blanc); padding-right: 6rem; }
.planif { position: absolute; z-index: 1; right: 0.6rem; top: 50%; transform: translateY(-50%); padding: 0.35rem 0.75rem; }

/* Fiches (détails) et listes */
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.25rem; margin: 0; font-size: 0.875rem; }
.details dt { color: var(--gris); font-size: 0.8125rem; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.rs-liste { list-style: none; margin: 0; padding: 0; }
.rs-liste li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--g-grille); }
.rs-liste li.vide { justify-content: flex-start; }
.rs-liste a { text-decoration: none; font-weight: 600; }
.rs-liste a:hover { text-decoration: underline; }
.poids-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.poids-form .d-champ { flex: 1 1 12rem; }
.poids-form label { font-size: 0.8125rem; font-weight: 600; color: var(--gris); }
.poids-form input { width: 100%; padding: 0.55em 0.7em; border: 1px solid var(--filet); border-radius: 0.6em; background: var(--blanc); }

/* Fenêtres propres à la démo */
.rs-dlg { padding: 1.2em 1.4em 1.3em; }
.rs-choix { display: flex; flex-direction: column; gap: 0.5rem; }
.rs-choix .d-btn { text-align: left; text-decoration: none; }
.rs-ajout { margin-top: 1rem; }
.rs-ligne { display: flex; gap: 0.5rem; }
.rs-ligne select { flex: 1; min-width: 0; }

/* Tableaux */
.d-table table { border-collapse: collapse; font-size: 0.8125rem; }
.d-table th { padding: 0 0.75rem 0.4rem; text-align: left; font-size: 0.6875rem; font-weight: 600; color: var(--pale); border-bottom: 1px solid var(--filet); white-space: nowrap; }
.d-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--g-grille); white-space: nowrap; }
.d-table th:first-child, .d-table td:first-child { padding-left: 0; }
.d-table .num { text-align: right; }
.d-table td a { text-decoration: none; font-weight: 600; }
.d-table td a:hover { text-decoration: underline; }
.d-table td .choix { padding: 0.3rem 0.7rem; }

/* ---------- Tablette et portable étroit ---------- */
@media (max-width: 75em) {
	.princ { padding: 1.5rem 1.75rem 2.5rem; }
	.quarts { grid-template-columns: 7rem repeat(6, minmax(0, 1fr)) 5.5rem; }
}
@media (max-width: 64em) {
	.grille, .deux { grid-template-columns: minmax(0, 1fr); }
	.grille > .bloc:nth-child(n+2), .deux > .bloc:nth-child(n+2) { border-top: 1px solid var(--filet); margin-top: 1rem; }
	.chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chiffres > div:nth-child(odd) { padding-left: 0; border-left: 0; }
	.chiffres > div:nth-child(n+3) { border-top: 1px solid var(--filet); }
	.tete { align-items: flex-start; }
	.outils { justify-content: flex-start; }
}

/* ---------- Téléphone (maquette tel-ressourcerie) ---------- */
@media (max-width: 48em) {
	body { font-size: 0.9375rem; padding-bottom: 5.5rem; /* 15 */ }
	.cadre { display: block; min-height: 0; background: none; }
	.rail { display: none; }
	.princ { padding: 0.75rem 1.25rem 1.5rem; /* 20 */ }
	.tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.75rem; align-items: start; padding-bottom: 0; border-bottom: 0; }
	.tete > div:first-child { padding-bottom: 0.875rem; border-bottom: 1px solid var(--encre); grid-column: 1 / -1; grid-row: 1; padding-right: 3rem; }
	.mq-tel { display: grid; grid-column: 2; grid-row: 1; margin-top: 0.1rem; }
	.fil { font-size: 0.6875rem; }
	.tete h1 { font-size: 1.6875rem; /* 27 */ }
	.outils { grid-column: 1 / -1; flex-wrap: nowrap; justify-content: flex-start; gap: 0.5rem; padding: 0.75rem 1.25rem 0.75rem 0; margin-right: -1.25rem; overflow-x: auto; scrollbar-width: none; }
	.outils::-webkit-scrollbar { display: none; }
	.choix { padding: 0.375rem 0.75rem; min-height: 2.75rem; }
	.action { min-height: 2.75rem; }
	.chiffres { border-top: 1px solid var(--filet); }
	.chiffres > div { padding: 0.75rem 0.75rem 0.75rem 0; }
	.chiffres > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--filet); }
	.chiffres span { font-size: 0.75rem; line-height: 1.3; }
	.chiffres strong { font-size: 2rem; /* 32 */ }
	.chiffres strong small { font-size: 1rem; }
	.long { display: none !important; }
	.court, .chiffres em .court { display: inline; }
	.long-i { display: none; }
	.bloc { padding-top: 1rem; }
	.graph { height: 10.625rem; /* 170 */ }
	.b-mat { border-top: 0 !important; margin-top: 0 !important; }
	.b-col { order: -1; }
	.b-mat { order: -2; }
	.grille { display: flex; flex-direction: column; }
	.indice { display: none; }
	.kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 15.625rem; gap: 0.625rem; margin-right: -1.25rem; padding-right: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; /* 250 */ }
	.col { scroll-snap-align: start; }
	.col-liste { max-height: 19rem; }
	.depl { width: 2.75rem; height: 2.75rem; top: 0; right: 0; opacity: .8; }
	.kanban .fiche { padding-right: 2.6rem; }
	.imm { grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem; gap: 0.5rem; }
	.cases { grid-template-columns: repeat(16, 1fr); gap: 2px; }
	.quarts { grid-template-columns: 6.5rem repeat(6, minmax(0, 1fr)); column-gap: 0.25rem; }
	.quarts > span:nth-child(8) { display: none; }
	.quarts .q-etat { display: none; }
	.quarts .poste { flex-direction: column; align-items: flex-start; gap: 0.2rem; font-size: 0.8125rem; line-height: 1.2; }
	.q-etat-tel { display: block; }
	.q-btn, .q i { min-height: 2.75rem; }
	.q i { height: 2.75rem; }
	.semaine { display: none; }
	.agenda { display: block; }
	.agenda .fiche .meta { flex-wrap: wrap; }
	.case-m { min-height: 3.2rem; padding: 0.2rem; }
	.puce { height: 0.45rem; padding: 0; border-left: 0; background: var(--coul); border-radius: 0.2rem; }
	.puce span { display: none; }
	.puce.fait { opacity: .45; }
	.liste-fiches { grid-template-columns: minmax(0, 1fr); }
	.details { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
	.details dd { margin-bottom: 0.5rem; }
	.recherche input { width: 7em; }

	/* Barre d'onglets du bas (le rail de l'ordinateur) */
	.onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 4.625rem; background: var(--encre); display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding-top: 0.75rem; /* 74 / 12 */ }
	.onglets > a, .plus-btn { position: relative; justify-self: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: grid; place-items: center; color: #8d9a9d; border: 0; background: none; cursor: pointer; }
	.onglets > a.on, .plus-btn.on, .plus-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
	.onglets svg { width: 1.3125rem; height: 1.3125rem; }
	.onglets .pastille { top: 0; right: -0.1rem; }
	.plus-menu { position: absolute; right: 0.75rem; bottom: calc(100% + 0.5rem); min-width: 15rem; padding: 0.4rem; background: var(--blanc); border: 1px solid var(--filet); border-radius: 0.875rem; box-shadow: 0 1.2rem 2.4rem -1rem rgba(28, 36, 39, .45); }
	.plus-menu[hidden] { display: none; }
	.plus-menu a { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.6rem; text-decoration: none; font-weight: 500; }
	.plus-menu a:hover, .plus-menu a.on { background: var(--grisfond); }
	.plus-menu a.on { font-weight: 600; }
	.plus-menu svg { color: var(--c2); }
}

@media print {
	.rail, .onglets, .d-bandeau, .outils { display: none !important; }
	.cadre { display: block; }
}
@media (prefers-reduced-motion: reduce) { .infob, .col { transition: none; } }