:root {
	--marine: #0B2545;
	--marine-2: #123660;
	--orange: #EA611E;
	--orange-pale: #FAD3B8;
	--creme: #F5F2ED;
	--creme-2: #ECE3D6;
	--blanc: #FFFFFF;
	--encre: #1B1F24;
	--gris: #5B6570;
	--bord: #E4DDD3;
	--vert: #2F7D4F;
	--vert-pale: #DDF0E3;
	--ambre: #B45309;
	--ambre-pale: #FDEBD0;
	--gouttiere: clamp(18px, 5vw, 72px);
	--contenu: 1320px;
	--titres: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
	--texte: "Onest", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--texte);
	font-size: 17px;
	line-height: 1.55;
	color: var(--encre);
	background: var(--blanc);
}
a { color: var(--marine); }
a:hover { color: var(--orange); }
h1, h2, h3 { font-family: var(--titres); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; margin-bottom: 28px; }
h3 { font-size: 22px; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
dl { margin: 0; }
.cadre { max-width: var(--contenu); margin: 0 auto; padding-inline: var(--gouttiere); }

/* En-tête : marine, rond plein en décor dans le coin */
.entete {
	position: relative;
	overflow: hidden;
	color: var(--blanc);
	background: var(--marine);
	padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px);
}
.entete::before {
	content: "";
	position: absolute;
	right: -140px;
	top: -180px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: var(--marine-2);
	pointer-events: none;
}
.entete::after {
	content: "";
	position: absolute;
	left: -60px;
	bottom: -90px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(234, 97, 30, 0.35);
	pointer-events: none;
}
.entete .cadre { position: relative; }
.sur { font-weight: 500; color: #FFB58A; margin-bottom: 14px; }
.chapo { max-width: 760px; margin-top: 18px; font-size: 18px; color: #D9E2EE; }
.chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 14px;
	margin-top: 36px;
	max-width: 900px;
}
.chiffres li {
	background: var(--blanc);
	color: var(--marine);
	border-radius: 14px;
	padding: 16px 18px;
}
.chiffres strong { display: block; font-family: var(--titres); font-size: 36px; font-weight: 800; line-height: 1; }
.chiffres span { display: block; margin-top: 6px; font-size: 14px; color: var(--gris); }

/* Sites */
.sites { background: var(--creme); padding: clamp(48px, 6vw, 80px) 0; }
.grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 24px;
}
.grille > * { min-width: 0; }
.site {
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.site-tete { padding: 24px 26px 20px; }
.lieu { color: var(--gris); margin-top: 4px; }
.liens { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-weight: 500; }
.liens a { text-decoration: none; }
.liens a:first-child::before { content: "\2197\00A0"; color: var(--orange); }
.bloc { padding: 20px 26px 24px; border-top: 1px solid var(--bord); }
.bloc.fiche { background: var(--creme); flex: 1; }
.bloc-titre {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--titres);
	font-weight: 700;
	font-size: 18px;
	color: var(--marine);
	margin-bottom: 12px;
}
.pastille {
	display: inline-block;
	font-family: var(--texte);
	font-size: 13px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.4;
}
.pastille.ok { background: var(--vert-pale); color: var(--vert); }
.pastille.attention { background: var(--ambre-pale); color: var(--ambre); }
.bloc dl { display: grid; gap: 4px; }
.bloc dl div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px; }
.bloc dt { color: var(--gris); font-size: 15px; }
.bloc dd { margin: 0; font-weight: 500; }
.controles { margin-top: 14px; display: grid; gap: 6px; font-size: 15px; }
.controles li { padding-left: 26px; position: relative; }
.controles li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--creme-2);
}
.controles li.ok::before { background: var(--vert); }
.controles li.attention::before { background: var(--orange); }
.notes { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bord); display: grid; gap: 8px; font-size: 15px; color: var(--gris); }
.note { font-size: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.note strong { font-family: var(--titres); font-size: 26px; color: var(--marine); }
.etoiles { color: var(--orange); letter-spacing: 1px; }
.note a { margin-left: auto; font-size: 15px; font-weight: 500; }
.compte { margin-top: 8px; font-size: 15px; color: var(--gris); }
.fiche dl { margin-top: 12px; }
.afaire-titre { margin-top: 16px; font-weight: 700; color: var(--marine); font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.afaire { margin-top: 6px; display: grid; gap: 6px; font-size: 15px; }
.afaire li { padding-left: 18px; position: relative; }
.afaire li::before { content: "\2192"; position: absolute; left: 0; color: var(--orange); }

/* Reste à faire */
.suite { background: var(--blanc); padding: clamp(48px, 6vw, 80px) 0; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 32px; }
.colonnes > * { min-width: 0; }
.colonnes h3 { margin-bottom: 14px; color: var(--marine); }
.colonnes h3 + ul + h3 { margin-top: 28px; }
.colonnes ul { display: grid; gap: 10px; }
.colonnes li { padding: 12px 16px; background: var(--creme); border-radius: 12px; font-size: 16px; }

/* Pied */
.pied { background: var(--marine); color: #D9E2EE; padding: 28px 0; font-size: 15px; }
.pied a { color: var(--blanc); }

@media (max-width: 600px) {
	body { font-size: 16px; }
	.site-tete, .bloc { padding-inline: 18px; }
	.bloc dl div { grid-template-columns: 1fr; gap: 0; }
	.note a { margin-left: 0; }
}

/* Connexion */
body.connexion { background: var(--marine); min-height: 100vh; display: grid; place-items: center; }
body.connexion::before { content: ""; position: fixed; z-index: 0; right: -140px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: var(--marine-2); }
body.connexion::after { content: ""; position: fixed; z-index: 0; left: -60px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(234, 97, 30, 0.35); }
.connexion-cadre { position: relative; z-index: 1; width: 100%; padding: 24px var(--gouttiere); }
.connexion-carte { max-width: 460px; margin: 0 auto; background: var(--blanc); border-radius: 18px; padding: 32px 30px 30px; display: grid; gap: 14px; }
.connexion-carte .sur { color: var(--orange); margin: 0; }
.connexion-carte h1 { font-size: clamp(26px, 4vw, 34px); color: var(--marine); }
.connexion-carte .chapo { color: var(--gris); font-size: 16px; margin: 0; }
.connexion-carte label { display: grid; gap: 6px; font-weight: 500; color: var(--marine); margin-top: 6px; }
.connexion-carte input { font: inherit; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 10px; background: var(--creme); }
.connexion-carte input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.connexion-carte button { font: inherit; font-weight: 700; color: var(--blanc); background: var(--orange); border: 0; border-radius: 999px; padding: 13px 22px; cursor: pointer; }
.connexion-carte button:hover { background: var(--marine); }
.connexion-carte .erreur { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--ambre-pale); color: var(--ambre); font-weight: 500; }