/* Démonstration « Soumissions » (Atelier Boréal, rénovation).
   Repris de maquettes/maquette.css + 4-soumissions.html + tel-soumissions.html, en mise en page fluide.
   Tailles en rem (base 16 px) : commentaires = px équivalents. */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 600; font-display: swap; src: url(/assets/fonts/newsreader-latin-600-italic.woff2) format("woff2"); }

:root {
	--fond: #f7f3e8;
	--carte: #fffdf8;
	--encre: #2a2a10;
	--gris: #6b6a4a;
	--pale: #8a8870;
	--trait: #ebe4d1;
	--grille: #efe9d9;
	--olive: #47461b;
	--c1: #e0701a;
	--c2: #0f8aa0;
	--c3: #7b7f12;
	--c4: #b0409a;
	--c5: #8a6d3b;
	--an-prec: #b9b59a;
	--bon: #3b7d2a;
	--attention: #b7791f;
	--rouge: #b3261e;
	--serif: "Newsreader", Georgia, serif;
	--police: "Atkinson Hyperlegible", system-ui, sans-serif;

	/* Noyau commun */
	--d-surface: #fffdf8;
	--d-encre: #2a2a10;
	--d-trait: #ebe4d1;
	--d-accent: #e0701a;
	--d-accent-texte: #fff;
	--d-pale: #6b6a4a;
	--d-champ: #fff;
	--d-survol: #faf6ec;
	--g-grille: #efe9d9;
	--g-base: #d9d1bb;
	--g-axe: #9a987c;
	--g-surface: #fffdf8;
	--g-encre: #2a2a10;
	--g-vide: #f4efe2;
	--g-chiffres: "Newsreader", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
	background: var(--fond);
	color: var(--encre);
	font: 400 0.875rem/1.45 var(--police); /* 14 */
	-webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }

.cadre { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); min-height: calc(100vh - 2.2rem); } /* 232 */

/* Barre latérale */
.lat { background: var(--carte); border-right: 1px solid var(--trait); }
/* Contenu du menu collé en haut à l'écran ; hauteur = écran moins le bandeau de démonstration */
.lat-in {
	position: sticky; top: 0;
	height: calc(100vh - 2.7rem); min-height: 30rem;
	padding: 1.375rem 1rem; /* 22 / 16 */
	display: flex; flex-direction: column; gap: 0.25rem;
	overflow-y: auto;
}
.marque { display: flex; align-items: center; gap: 0.625rem; margin: 0 0.375rem 1.5rem; font-weight: 700; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; } /* 10 / 15 */
.marque i { width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; display: grid; place-items: center; color: #fff; background: var(--c1); font-style: normal; font-size: 1rem; flex: none; }
.marque small { display: block; font-weight: 400; color: var(--pale); font-size: 0.75rem; }
.nav { display: flex; flex-direction: column; gap: 0.25rem; }
.nav a {
	display: flex; align-items: center; gap: 0.625rem;
	padding: 0.5625rem 0.75rem; border-radius: 0.625rem; /* 9 / 12 */
	color: var(--gris); text-decoration: none;
}
.nav a:hover { background: #faf6ec; color: var(--encre); }
.nav a svg, .onglets svg, .ico-btn svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav a.actif { background: var(--fond); color: var(--encre); font-weight: 700; }
.pastille { margin-left: auto; background: var(--c1); color: #fff; font-size: 0.6875rem; font-weight: 700; border-radius: 1.25rem; padding: 0.0625rem 0.4375rem; } /* 11 */
.lat-bas { margin-top: auto; display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.375rem 0; border-top: 1px solid var(--trait); font-size: 0.8125rem; text-decoration: none; }
.lat-bas small { display: block; color: var(--pale); font-size: 0.75rem; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; color: #fff; background: var(--olive); flex: none; }

/* Haut du téléphone (caché à l'ordinateur) */
.haut-tel { display: none; }
.onglets, .feuille { display: none; }

/* Zone principale */
#vue { padding: 1.625rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; } /* 26 / 32 / 18 */
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tete h1 { margin: 0; font-size: 1.625rem; letter-spacing: -0.02em; line-height: 1.1; } /* 26 */
.tete p { margin: 0.25rem 0 0; color: var(--gris); }
.fil { font-size: 0.8125rem; color: var(--gris); margin: 0 0 0.3rem; }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.outils { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--carte); border: 1px solid var(--trait); border-radius: 0.625rem; padding: 0.1875rem; }
.seg button, .seg a { padding: 0.3125rem 0.75rem; border: 0; border-radius: 0.4375rem; background: none; color: var(--gris); font-size: 0.8125rem; cursor: pointer; text-decoration: none; }
.seg button:hover, .seg a:hover { color: var(--encre); }
.seg .on { background: var(--olive); color: #fff; font-weight: 700; }
.seg .on:hover { color: #fff; }
.btn { padding: 0.5rem 0.875rem; border-radius: 0.625rem; border: 1px solid var(--trait); background: var(--carte); font-size: 0.8125rem; color: var(--encre); display: inline-flex; gap: 0.375rem; align-items: center; cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { border-color: #d9d1bb; background: #fff; }
.btn.plein { background: var(--c1); border-color: var(--c1); color: #fff; font-weight: 700; }
.btn.plein:hover { filter: brightness(1.05); }
.btn.olive { background: var(--olive); border-color: var(--olive); color: #fff; font-weight: 700; }
.btn.danger { color: var(--rouge); }
.btn.petit { padding: 0.25rem 0.625rem; font-size: 0.75rem; }
select.btn { appearance: none; -webkit-appearance: none; padding-right: 1.9rem; background: var(--carte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%232a2a10'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 0.5rem; }
.champ-cherche { position: relative; }
.champ-cherche input { padding: 0.5rem 0.875rem 0.5rem 2.1rem; border-radius: 0.625rem; border: 1px solid var(--trait); background: var(--carte); font-size: 0.8125rem; color: var(--encre); width: 15rem; max-width: 100%; }
.champ-cherche svg { position: absolute; left: 0.7rem; top: 50%; width: 0.95rem; height: 0.95rem; transform: translateY(-50%); stroke: var(--pale); fill: none; stroke-width: 2; }

/* Tuiles de chiffres */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
.tuile { background: var(--carte); border: 1px solid var(--trait); border-radius: 0.875rem; padding: 0.875rem 1rem 0.75rem; position: relative; overflow: hidden; min-width: 0; text-decoration: none; display: block; }
a.tuile:hover { border-color: #d9d1bb; }
.tuile .lib { color: var(--gris); font-size: 0.8125rem; }
.tuile .val { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 2.125rem; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; } /* 34 */
.tuile .val small { font-size: 1.125rem; font-weight: 400; color: var(--gris); } /* 18 */
.tuile .ecart { font-size: 0.75rem; color: var(--gris); }
.tuile .ecart b { color: var(--bon); }
.tuile .ecart b.bas { color: var(--attention); }
.tuile .ecart b.rouge { color: var(--rouge); }
.tuile .spark { position: absolute; right: 0.875rem; bottom: 0.875rem; width: 6rem; height: 2.125rem; } /* 96 × 34 */
.tuile .spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Cartes */
.grille { display: grid; gap: 0.875rem; min-width: 0; }
.g-ventes { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.g-deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-fiche { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 0.875rem; padding: 1rem 1.125rem; display: flex; flex-direction: column; min-width: 0; } /* 16 / 18 */
.carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.625rem; margin-bottom: 0.625rem; flex-wrap: wrap; }
.carte-tete h2 { margin: 0; font-size: 0.9375rem; } /* 15 */
.carte-tete > span, .carte-tete .note { color: var(--pale); font-size: 0.75rem; }
.carte-tete a.note { text-decoration: none; }
.carte-tete a.note:hover { color: var(--encre); text-decoration: underline; }
.graph { position: relative; min-height: 0; }
.graph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.h-valeur { height: 19rem; }
.h-types { height: 17rem; }
.h-moyen { height: 14rem; }
.legende { display: flex; gap: 0.875rem; font-size: 0.75rem; color: var(--gris); flex-wrap: wrap; }
.legende i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; margin-right: 0.3125rem; vertical-align: -1px; }
.legende i.ligne { height: 0.1875rem; border-radius: 0.125rem; vertical-align: 3px; width: 0.875rem; }
.vide-txt { color: var(--pale); font-size: 0.8125rem; padding: 1rem 0; text-align: center; }

/* Infobulle */
.bulle {
	position: absolute; z-index: 5; background: var(--encre); color: #fff; border-radius: 0.5625rem;
	padding: 0.4375rem 0.625rem; font-size: 0.75rem; line-height: 1.4; white-space: nowrap;
	box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
}
.bulle b { font-size: 0.8125rem; }
.bulle i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 2px; margin-right: 0.3125rem; }

/* Entonnoir */
.entonnoir { display: flex; flex-direction: column; gap: 0.625rem; justify-content: center; flex: 1; padding: 1rem 0; }
.etape { display: grid; grid-template-columns: 6rem 1fr 3.625rem; align-items: center; gap: 0.625rem; font-size: 0.8125rem; } /* 96 / 58 */
.etape .barre { height: 1.875rem; border-radius: 0.25rem; background: var(--c2); display: flex; align-items: center; padding-left: 0.625rem; color: #fff; font-weight: 700; transition: width .3s; } /* 30 */
.etape .taux { color: var(--gris); text-align: right; font-size: 0.75rem; }

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
th { text-align: left; font-weight: 400; color: var(--pale); font-size: 0.75rem; padding: 0 0.5rem 0.5rem 0; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: 0.4375rem 0.5rem 0.4375rem 0; border-bottom: 1px solid var(--grille); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.large { white-space: normal; min-width: 10rem; }
.d-table th:last-child, .d-table td:last-child { padding-right: 0.25rem; }
.etiq { display: inline-block; padding: 0.125rem 0.5625rem; border-radius: 1.25rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.etiq.ok { background: #e6f0dc; color: #2f6422; }
.etiq.att { background: #fbeed7; color: #8a5a12; }
.etiq.neu { background: #ece9dd; color: var(--gris); }
.etiq.bleu { background: #dcf0f3; color: #0b6474; }
.etiq.rouge { background: #f8e1de; color: #a3221b; }
.etiq.prune { background: #f4e2f0; color: #8a2f78; }
.pers { display: flex; align-items: center; gap: 0.5rem; }
.pers .avatar { width: 1.625rem; height: 1.625rem; font-size: 0.6875rem; } /* 26 / 11 */
.lien { color: inherit; text-decoration: none; }
.lien:hover { text-decoration: underline; }
.discret { color: var(--pale); }

/* Barres horizontales simples */
.hbar { display: grid; grid-template-columns: 1fr auto; gap: 0.1875rem 0.625rem; font-size: 0.8125rem; margin-bottom: 0.5rem; }
.hbar .piste { grid-column: 1 / -1; height: 0.5rem; background: var(--grille); border-radius: 0.25rem; overflow: hidden; }
.hbar .piste span { display: block; height: 100%; border-radius: 0.25rem; }
.hbar .n { color: var(--gris); font-variant-numeric: tabular-nums; }
a.hbar { text-decoration: none; border-radius: 0.375rem; }
a.hbar:hover span:first-child { text-decoration: underline; }

/* Liste compacte (téléphone, fiches) */
.liste > .ligne { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0; border-bottom: 1px solid var(--grille); font-size: 0.875rem; text-decoration: none; color: inherit; }
.liste > .ligne:last-child { border-bottom: 0; }
.liste .qui { line-height: 1.25; min-width: 0; }
.liste .qui small { display: block; color: var(--pale); font-size: 0.75rem; }
.liste .mt { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.liste .mt .etiq { font-size: 0.6875rem; margin-top: 0.1875rem; }
.liste .avatar { width: 1.875rem; height: 1.875rem; font-size: 0.75rem; }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filtres .compte { margin-left: auto; color: var(--gris); font-size: 0.8125rem; }
.puces { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.puce { padding: 0.3125rem 0.75rem; border-radius: 1.25rem; border: 1px solid var(--trait); background: var(--carte); color: var(--gris); font-size: 0.8125rem; cursor: pointer; }
.puce:hover { color: var(--encre); border-color: #d9d1bb; }
.puce[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #fff; font-weight: 700; }
.puce b { font-weight: 700; margin-left: 0.25rem; }

/* Fiches */
.infos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.875rem 1.25rem; margin: 0; }
.infos div { min-width: 0; }
.infos dt { color: var(--pale); font-size: 0.75rem; }
.infos dd { margin: 0.125rem 0 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.infos dd.gros { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.gestes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.etapes li { display: grid; grid-template-columns: 0.75rem 1fr auto; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.etapes li::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 2px solid var(--trait); background: var(--carte); }
.etapes li.fait::before { background: var(--c2); border-color: var(--c2); }
.etapes li.fin-ok::before { background: var(--bon); border-color: var(--bon); }
.etapes li.fin-non::before { background: var(--rouge); border-color: var(--rouge); }
.etapes li span:last-child { color: var(--gris); }
.note-txt { white-space: pre-wrap; color: var(--gris); margin: 0; font-size: 0.8125rem; }
.total-lignes { font-size: 0.8125rem; margin: 0.5rem 0 0; }
.total-lignes div { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--grille); font-variant-numeric: tabular-nums; }
.total-lignes div:last-child { border: 0; font-weight: 700; }
.avance { display: flex; align-items: center; gap: 0.75rem; }
.avance input[type=range] { flex: 1; accent-color: var(--c2); min-width: 0; }
.avance output { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.2rem; text-align: right; }

/* Calendrier des chantiers (bandes par semaine) */
.cal { overflow-x: auto; }
.cal-grille { display: grid; min-width: 44rem; font-size: 0.75rem; }
.cal-tete { color: var(--pale); padding: 0 0 0.375rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.cal-nom { padding: 0.375rem 0.5rem 0.375rem 0; border-bottom: 1px solid var(--grille); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8125rem; }
.cal-nom a { text-decoration: none; }
.cal-nom a:hover { text-decoration: underline; }
.cal-piste { position: relative; border-bottom: 1px solid var(--grille); background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--sem) - 1px), var(--grille) calc(100% / var(--sem) - 1px), var(--grille) calc(100% / var(--sem))); }
.cal-piste .bande { position: absolute; top: 0.4rem; bottom: 0.4rem; border-radius: 0.3rem; color: #fff; font-weight: 700; font-size: 0.6875rem; padding: 0 0.4rem; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-decoration: none; }
.cal-piste .auj { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c1); }

/* Réglages */
.regl-ligne { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0; border-bottom: 1px solid var(--grille); }
.regl-ligne:last-child { border-bottom: 0; }
.regl-ligne .qui { flex: 1; min-width: 0; line-height: 1.25; }
.regl-ligne .qui small { display: block; color: var(--pale); font-size: 0.75rem; }
.regl-ligne.retire .qui { color: var(--pale); }

/* Tablette / portable */
@media (max-width: 80em) {
	#vue { padding: 1.5rem 1.5rem 2.5rem; }
}
@media (max-width: 72em) {
	.tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-ventes, .g-fiche { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 60em) {
	.cadre { grid-template-columns: 12.5rem minmax(0, 1fr); }
	.g-deux { grid-template-columns: minmax(0, 1fr); }
}

/* Téléphone : barre du haut, onglets en bas (maquette tel-soumissions) */
@media (max-width: 48em) {
	body { font-size: 0.9375rem; } /* 15 */
	.cadre { display: block; min-height: 0; }
	.lat { display: none; }
	.haut-tel { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.875rem 1.125rem 0.75rem; }
	.haut-tel .marque { margin: 0; }
	.haut-tel .ico-rang { display: flex; gap: 0.5rem; }
	.ico-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--carte); border: 1px solid var(--trait); display: grid; place-items: center; position: relative; color: var(--encre); cursor: pointer; padding: 0; text-decoration: none; }
	.ico-btn.point::after { content: ""; position: absolute; top: 0.6rem; right: 0.65rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c1); border: 2px solid var(--carte); }
	#vue { padding: 0 1rem 7rem; gap: 0.75rem; }
	.tete { align-items: flex-start; }
	.tete h1 { font-size: 1.375rem; } /* 22 */
	.tete p { font-size: 0.8125rem; margin-top: 0.125rem; }
	.tete .outils { width: 100%; }
	.cacher-tel { display: none !important; }
	.seg button, .seg a { padding: 0.5rem 0.75rem; font-size: 0.8125rem; min-height: 2.5rem; }
	.btn { min-height: 2.75rem; }
	.btn.petit { min-height: 2.25rem; }
	.puce { min-height: 2.5rem; }
	.champ-cherche, .champ-cherche input { width: 100%; }
	.champ-cherche input { min-height: 2.75rem; font-size: 1rem; }
	.tuiles { gap: 0.625rem; }
	.tuile { padding: 0.75rem 0.875rem 0.625rem; }
	.tuile .val { font-size: 1.75rem; } /* 28 */
	.tuile .val small { font-size: 0.9375rem; }
	.tuile .spark { display: none; }
	.carte { padding: 0.875rem 1rem; }
	.carte-tete { margin-bottom: 0.375rem; }
	.legende { gap: 0.625rem; }
	.h-valeur { height: 10rem; } /* 160 */
	.h-types, .h-moyen { height: 12rem; }
	.etape { grid-template-columns: 5.5rem 1fr 3rem; }
	.infos { grid-template-columns: 1fr 1fr; }
	.filtres .compte { margin-left: 0; width: 100%; }
	.liste > .ligne { min-height: 2.75rem; }

	.onglets {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		height: 4.625rem; padding-bottom: env(safe-area-inset-bottom); /* 74 */
		background: var(--carte); border-top: 1px solid var(--trait);
		display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding-top: 0.625rem;
		font-size: 0.6875rem; color: var(--pale); text-align: center;
	}
	.onglets a { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; text-decoration: none; color: var(--gris); min-height: 2.75rem; }
	.onglets svg { width: 1.375rem; height: 1.375rem; } /* 22 */
	.onglets a.on { color: var(--olive); font-weight: 700; }
	.onglets a.plus svg { width: 2.75rem; height: 2.75rem; padding: 0.6875rem; margin-top: -1.125rem; border-radius: 50%; background: var(--c1); stroke: #fff; stroke-width: 2.4; box-shadow: 0 6px 14px -6px rgba(224,112,26,.8); }

	/* Menu « Plus » */
	.feuille { position: fixed; inset: 0; z-index: 45; background: rgba(20, 22, 18, .4); display: flex; align-items: flex-end; }
	.feuille[hidden] { display: none; }
	.feuille nav { width: 100%; background: var(--carte); border-radius: 1.125rem 1.125rem 0 0; padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
	.feuille .poignee { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0.375rem 0.625rem; font-weight: 700; }
	.feuille .nav a { padding: 0.75rem; min-height: 2.75rem; }
	.feuille .fermer-f { width: 2.75rem; height: 2.75rem; border: 0; background: none; font-size: 1.5rem; cursor: pointer; color: var(--encre); }
}
@media (max-width: 23em) {
	.tuile .val { font-size: 1.5rem; }
	.infos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .etape .barre { transition: none; } }
/* Téléphone : « À relancer » passe avant l'entonnoir, comme dans la maquette */
@media (max-width: 48em) {
	.o-entonnoir { order: 3; }
	.o-types { order: 4; }
}
/* Les libellés cachés (position absolue) restent dans leur tableau qui défile */
.d-table, .carte { position: relative; }