/* Barometre Marches -- feuille de style unique
   Identite : outil de donnees pour artisans et TPE qui repondent aux marches publics.
   Sobriete administrative, chiffres lisibles, densite maitrisee. */

:root {
	--primary: #1f3a5f;
	--primary-clair: #2c4f7c;
	--accent: #b45309;
	--accent-clair: #96520f;
	--fond: #f6f5f1;
	--surface: #ffffff;
	--surface-2: #fbfbf8;
	--bordure: #e1ded6;
	--bordure-forte: #cfcbc0;
	--texte: #14171a;
	--texte-2: #4b5157;
	--texte-3: #6b7178;
	--succes: #15803d;
	--alerte: #b45309;
	--danger: #b91c1c;
	--rayon: 4px;
	--rayon-lg: 8px;
	--espace-1: 4px;
	--espace-2: 8px;
	--espace-3: 12px;
	--espace-4: 16px;
	--espace-5: 24px;
	--espace-6: 32px;
	--espace-7: 48px;
	--ombre: 0 1px 2px rgba(20, 23, 26, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 10;
}
.lien-evitement:focus { left: 8px; top: 8px; }

.conteneur {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- entete ---------- */

.entete {
	background: var(--surface);
	border-bottom: 1px solid var(--bordure);
}
.entete__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-5);
	min-height: 62px;
	flex-wrap: wrap;
}
.marque {
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -.01em;
	color: var(--primary);
	text-decoration: none;
}
.marque span { color: var(--texte-2); font-weight: 450; }
.marque:hover { text-decoration: none; }
.nav {
	display: flex;
	gap: var(--espace-5);
	font-size: 15px;
}
.nav a { color: var(--texte-2); }
.nav a:hover { color: var(--primary); }

/* ---------- titres et blocs ---------- */

main { padding-top: var(--espace-6); padding-bottom: var(--espace-7); }

h1 {
	font-size: 30px;
	line-height: 1.22;
	letter-spacing: -.015em;
	margin: 0 0 var(--espace-3);
	font-weight: 640;
}
h2 {
	font-size: 20px;
	line-height: 1.3;
	margin: var(--espace-7) 0 var(--espace-3);
	font-weight: 620;
}
h3 {
	font-size: 16px;
	margin: var(--espace-5) 0 var(--espace-2);
	font-weight: 620;
}
p { margin: 0 0 var(--espace-3); }
.chapo {
	font-size: 17px;
	color: var(--texte-2);
	max-width: 62ch;
}
.secondaire { color: var(--texte-3); font-size: 14px; }
.fil {
	font-size: 14px;
	color: var(--texte-3);
	margin-bottom: var(--espace-4);
}
.fil a { color: var(--texte-2); }
.fil span { margin: 0 6px; }

/* ---------- chiffres cles ---------- */

.kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-lg);
	background: var(--surface);
	overflow: hidden;
	margin: var(--espace-5) 0;
}
.kpi { padding: var(--espace-4) var(--espace-5); border-right: 1px solid var(--bordure); }
.kpi:last-child { border-right: 0; }
.kpi__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--texte-3);
	margin-bottom: 6px;
}
.kpi__valeur {
	font-size: 26px;
	font-weight: 640;
	line-height: 1.15;
	letter-spacing: -.02em;
}
.kpi__valeur--accent { color: var(--accent); }
.kpi__note { font-size: 13px; color: var(--texte-3); margin-top: 2px; }

/* ---------- bandeau de fourchette ---------- */

.fourchette { margin: var(--espace-5) 0 var(--espace-3); }
.fourchette__barre {
	position: relative;
	height: 34px;
	background: var(--surface-2);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
}
.fourchette__zone {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(31, 58, 95, .14);
	border-left: 1px solid var(--primary-clair);
	border-right: 1px solid var(--primary-clair);
}
.fourchette__mediane {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 2px;
	background: var(--accent);
}
.fourchette__legende {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--texte-3);
	margin-top: 6px;
	gap: var(--espace-4);
}

/* ---------- tableaux ---------- */

.tableau-enveloppe {
	overflow-x: auto;
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-lg);
	background: var(--surface);
}
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
th, td {
	padding: 9px 14px;
	text-align: left;
	border-bottom: 1px solid var(--bordure);
	vertical-align: top;
}
th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--texte-3);
	font-weight: 600;
	background: var(--surface-2);
	white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.nombre, th.nombre { text-align: right; white-space: nowrap; }
td.objet { max-width: 420px; }

/* ---------- listes de liens ---------- */

.liens-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--espace-2) var(--espace-5);
	list-style: none;
	padding: 0;
	margin: var(--espace-3) 0;
	font-size: 15px;
}
.liens-grille li { display: flex; justify-content: space-between; gap: var(--espace-3); border-bottom: 1px dashed var(--bordure); padding-bottom: 6px; }
.liens-grille .valeur { color: var(--texte-3); font-size: 14px; white-space: nowrap; }

/* ---------- formulaires ---------- */

.formulaire { max-width: 640px; }
.champ { margin-bottom: var(--espace-4); }
label { display: block; font-weight: 560; margin-bottom: 6px; }
.aide { font-size: 13px; color: var(--texte-3); margin-top: 4px; }
input[type="text"], input[type="email"], input[type="search"], select, textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: var(--texte);
	background: var(--surface);
	border: 1px solid var(--bordure-forte);
	border-radius: var(--rayon);
	min-height: 44px;
}
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 2px solid rgba(31, 58, 95, .18); outline-offset: 1px; }
.bouton {
	display: inline-block;
	padding: 11px 20px;
	font: inherit;
	font-weight: 560;
	color: #fff;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--rayon);
	cursor: pointer;
	min-height: 44px;
}
.bouton:hover { background: var(--accent-clair); border-color: var(--accent-clair); text-decoration: none; }
.bouton--secondaire { background: var(--surface); color: var(--primary); border-color: var(--bordure-forte); }
.bouton--secondaire:hover { background: var(--surface-2); border-color: var(--primary); }

.message { padding: 12px 16px; border-radius: var(--rayon); margin-bottom: var(--espace-4); font-size: 15px; }
.message--succes { background: #eef7f0; border: 1px solid #b7dcc1; color: #14532d; }
.message--erreur { background: #fdf0ef; border: 1px solid #f0c2bd; color: #7f1d1d; }
.message--info { background: #eef2f7; border: 1px solid #c6d3e2; color: var(--primary); }

/* ---------- etat vide ---------- */

.vide {
	background: var(--surface);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-lg);
	padding: var(--espace-6);
	text-align: left;
}
.vide h2 { margin-top: 0; }

/* ---------- resultat de l'estimateur ---------- */

.resultat {
	background: var(--surface);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-lg);
	padding: var(--espace-5);
	margin-bottom: var(--espace-5);
}
.resultat h3 { margin-top: 0; }
.resultat .kpis { margin-bottom: var(--espace-4); }
.resultat__verdict { font-size: 15px; padding-left: 14px; border-left: 3px solid var(--bordure-forte); }
.resultat__verdict--bas { border-left-color: var(--succes); }
.resultat__verdict--haut { border-left-color: var(--alerte); }
.resultat__verdict--info { border-left-color: var(--primary); }

.fiabilite {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 3px;
	font-size: 13px;
	border: 1px solid var(--bordure-forte);
	color: var(--texte-2);
}
.fiabilite--solide { background: #eef7f0; border-color: #b7dcc1; color: #14532d; }
.fiabilite--moyen { background: #fdf6e7; border-color: #e6d3a8; color: #7c4a03; }
.fiabilite--faible { background: #fdf0ef; border-color: #f0c2bd; color: #7f1d1d; }

/* ---------- pied ---------- */

.pied {
	background: var(--surface);
	border-top: 1px solid var(--bordure);
	padding: var(--espace-6) 0;
	font-size: 14px;
	color: var(--texte-3);
}
.pied p { max-width: 78ch; }
.pied__liens a { color: var(--texte-2); margin-right: 4px; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
	.kpis { grid-template-columns: repeat(2, 1fr); }
	.kpi:nth-child(2) { border-right: 0; }
	.kpi:nth-child(1), .kpi:nth-child(2) { border-bottom: 1px solid var(--bordure); }
	h1 { font-size: 26px; }
}

@media (max-width: 560px) {
	main { padding-top: var(--espace-5); }
	h1 { font-size: 23px; }
	.kpis { grid-template-columns: 1fr; }
	.kpi { border-right: 0; border-bottom: 1px solid var(--bordure); }
	.kpi:last-child { border-bottom: 0; }
	.nav { gap: var(--espace-4); font-size: 14px; }
	th, td { padding: 8px 10px; }
	.cache-mobile { display: none; }
	td.objet { max-width: none; }
}

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