/**
 * Interface des outils interactifs des fiches (S3).
 * Valeurs de la charte CADRENS (05-Marketing/00_CHARTE_CADRENS/02_cadrens_tokens.json) :
 * si la charte change, modifier ce bloc seulement. Aucun dégradé, aucune ombre de repos,
 * aucun mouvement au survol, transitions de couleur de 200 ms (charte, section 10).
 */
.cf-comp {
	--cf-vert: #1E3A32;
	--cf-vert-clair: #2A4C40;
	--cf-vert-pale: #B9C9C1;
	--cf-or: #C9A84C;
	--cf-or-fonce: #A8862F;
	--cf-creme: #FAF7F2;
	--cf-blanc: #FFFFFF;
	--cf-texte: #2C3A4A;
	--cf-doux: #5A6875;
	--cf-label: #8A97A3;
	--cf-bord: #E6E1D8;
	--cf-trait: #D6DCE1;
	--cf-negatif: #B4533C;
	--cf-titres: Georgia, 'Times New Roman', serif;
	--cf-corps: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	margin: 32px 0;
	color: var(--cf-texte);
	font-family: var(--cf-corps);
	font-size: 16px;
	line-height: 1.6;
}

.cf-comp *,
.cf-comp *::before,
.cf-comp *::after {
	box-sizing: border-box;
}

/* Repli : visible sans JavaScript et à l'impression ; masqué quand l'outil est monté à l'écran. */
.cf-comp-repli {
	background: var(--cf-creme);
	border-left: 3px solid var(--cf-or);
	padding: 16px 24px;
	margin: 0;
	color: var(--cf-doux);
}

.cf-comp.est-monte .cf-comp-repli {
	display: none;
}

.cf-comp-outil {
	display: none;
}

.cf-comp.est-monte .cf-comp-outil {
	display: block;
}

.cf-outil {
	background: var(--cf-blanc);
	border: 1px solid var(--cf-bord);
	border-left: 3px solid var(--cf-or);
	padding: 24px;
}

.cf-outil-surtitre {
	margin: 0 0 8px;
	color: var(--cf-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cf-outil-titre {
	margin: 0 0 16px;
	color: var(--cf-vert);
	font-family: var(--cf-titres);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.cf-outil-intro {
	margin: 0 0 24px;
	color: var(--cf-doux);
}

/* ---------- Formulaire ---------- */
.cf-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0 0 24px;
}

.cf-champ {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cf-champ label,
.cf-champ legend {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: var(--cf-vert);
	font-weight: 600;
}

.cf-champ input[type='text'] {
	width: 100%;
	min-height: 48px;
	padding: 8px 16px;
	border: 1px solid var(--cf-doux);
	border-radius: 2px;
	background: var(--cf-blanc);
	color: var(--cf-texte);
	font: inherit;
	font-size: 18px;
}

.cf-champ select {
	width: 100%;
	min-height: 48px;
	padding: 8px 16px;
	border: 1px solid var(--cf-doux);
	border-radius: 2px;
	background: var(--cf-blanc);
	color: var(--cf-texte);
	font: inherit;
	font-size: 18px;
}

.cf-champ input[type='text'][aria-invalid='true'],
.cf-champ select[aria-invalid='true'] {
	border-color: var(--cf-negatif);
	border-width: 2px;
}

.cf-aide {
	margin: 8px 0 0;
	color: var(--cf-doux);
	font-size: 14px;
}

.cf-choix {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
}

.cf-choix label {
	display: inline;
	margin: 0;
	font-weight: 400;
	color: var(--cf-texte);
}

.cf-choix input[type='radio'],
.cf-choix input[type='checkbox'] {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--cf-vert);
}

.cf-erreur {
	margin: 8px 0 0;
	color: var(--cf-negatif);
	font-size: 14px;
	font-weight: 600;
}

.cf-erreur:empty {
	display: none;
}

/* Anneau de focus visible pour tous les contrôles. */
.cf-comp input:focus-visible,
.cf-comp select:focus-visible,
.cf-comp button:focus-visible {
	outline: 3px solid var(--cf-or-fonce);
	outline-offset: 2px;
}

/* Bouton plein, or sur texte vert sapin ; survol : teinte seulement. */
.cf-bouton {
	display: inline-block;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	background: var(--cf-or);
	color: var(--cf-vert);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.cf-bouton:hover {
	background: var(--cf-or-fonce);
	color: var(--cf-blanc);
}

/* ---------- Résultat ---------- */
.cf-resultat {
	margin-top: 32px;
}

.cf-resultat:empty {
	display: none;
}

.cf-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	margin: 0 0 32px;
}

.cf-chiffre {
	margin: 0;
	padding: 16px;
	background: var(--cf-creme);
}

.cf-chiffre dt {
	margin: 0 0 8px;
	color: var(--cf-doux);
	font-size: 14px;
}

.cf-chiffre dd {
	margin: 0;
	color: var(--cf-vert);
	font-family: var(--cf-titres);
	font-size: 28px;
	line-height: 1.2;
}

.cf-chiffre--cle dd {
	color: var(--cf-or-fonce);
}

.cf-tableau-cadre {
	overflow-x: auto;
	margin: 0 0 24px;
}

.cf-tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.cf-tableau caption {
	padding: 0 0 8px;
	text-align: left;
	color: var(--cf-doux);
	font-size: 14px;
}

.cf-tableau th,
.cf-tableau td {
	padding: 8px 16px 8px 0;
	border-bottom: 1px solid var(--cf-bord);
	text-align: right;
	white-space: nowrap;
}

.cf-tableau th:first-child,
.cf-tableau td:first-child {
	text-align: left;
	white-space: normal;
}

/* Le thème colore parfois les en-têtes de tableau : on impose crème sur vert sapin. */
.cf-comp .cf-tableau thead th,
.cf-comp .cf-tableau thead th * {
	background: var(--cf-vert) !important;
	color: var(--cf-creme) !important;
	font-weight: 600;
	padding-left: 8px;
}

.cf-tableau tfoot th,
.cf-tableau tfoot td {
	font-weight: 600;
	color: var(--cf-vert);
}

.cf-tableau .cf-inactive {
	color: var(--cf-label);
}

.cf-lecture,
.cf-limites,
.cf-source {
	margin: 0 0 16px;
	font-size: 15px;
}

.cf-limites {
	color: var(--cf-doux);
}

.cf-lecture--alerte {
	padding: 12px 16px;
	background: var(--cf-creme);
	border-left: 3px solid var(--cf-or);
}

.cf-detail {
	margin: 0 0 24px;
}

.cf-detail summary {
	cursor: pointer;
	margin: 0 0 12px;
	color: var(--cf-vert);
	font-weight: 600;
}

.cf-source {
	color: var(--cf-label);
	font-size: 13px;
}

.cf-avertissement {
	margin: 24px 0 0;
	padding: 16px 24px;
	background: var(--cf-creme);
	border-left: 3px solid var(--cf-vert);
	color: var(--cf-texte);
	font-size: 14px;
}

.cf-message {
	margin: 0;
	padding: 16px 24px;
	background: var(--cf-creme);
	border-left: 3px solid var(--cf-negatif);
}

@media (max-width: 600px) {
	.cf-tableau th:first-child {
		min-width: 168px;
	}

	.cf-outil {
		padding: 16px;
	}

	.cf-outil-titre {
		font-size: 21px;
	}

	.cf-chiffre dd {
		font-size: 24px;
	}

	.cf-bouton {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cf-bouton {
		transition: none;
	}
}

/* Impression et PDF : les outils n'existent pas sur papier, seul le repli s'imprime. */
@media print {
	.cf-comp .cf-comp-outil,
	.cf-comp.est-monte .cf-comp-outil {
		display: none !important;
	}

	.cf-comp .cf-comp-repli,
	.cf-comp.est-monte .cf-comp-repli {
		display: block !important;
	}
}

/* ---------- Curseurs ---------- */
.cf-curseur input[type='range'] {
	width: 100%;
	min-height: 48px;
	margin: 0;
	accent-color: var(--cf-vert);
	cursor: pointer;
}

.cf-curseur-valeur {
	color: var(--cf-or-fonce);
	font-weight: 700;
}

/* ---------- Graphiques (S4) ---------- */
.cf-graphique {
	margin: 0 0 24px;
}

.cf-svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 640px;
}

.cf-g-grille {
	stroke: var(--cf-bord);
	stroke-width: 1;
}

.cf-g-axe {
	stroke: var(--cf-doux);
	stroke-width: 1.5;
}

.cf-g-texte {
	fill: var(--cf-doux);
	font-family: var(--cf-corps);
	font-size: 13px;
}

.cf-g-texte--axe {
	fill: var(--cf-label);
}

.cf-g-aire.cf-s1 {
	fill: var(--cf-vert);
	stroke: none;
}

.cf-g-aire.cf-s2 {
	fill: var(--cf-or);
	stroke: none;
}

.cf-g-ligne {
	fill: none;
	stroke-width: 2.5;
}

.cf-g-ligne.cf-s1 {
	stroke: var(--cf-vert);
}

.cf-g-ligne.cf-s2 {
	stroke: var(--cf-or-fonce);
}

.cf-g-ligne.cf-s3 {
	stroke: var(--cf-negatif);
	stroke-dasharray: 8 5;
}

.cf-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--cf-doux);
}

.cf-legende li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cf-legende-puce {
	width: 24px;
	height: 12px;
	flex: none;
}

.cf-legende-puce .cf-g-aire.cf-s1 { fill: var(--cf-vert); }
.cf-legende-puce .cf-g-aire.cf-s2 { fill: var(--cf-or); }

/* ---------- Frises (COMP-FRISE, tranche 4) ---------- */
.cf-frise-cadre {
	width: 100%;
	overflow: hidden;
}

.cf-frise .cf-frise-svg {
	max-width: none;
}

.cf-f-couloir {
	fill: var(--cf-vert);
	font-family: var(--cf-corps);
	font-size: 13px;
	font-weight: 600;
}

.cf-f-segment {
	stroke: var(--cf-blanc);
	stroke-width: 2;
}

.cf-f-segment.cf-f-decote { fill: #F2DFD8; }
.cf-f-segment.cf-f-plein { fill: var(--cf-vert-pale); }
.cf-f-segment.cf-f-surcote { fill: var(--cf-vert); }
.cf-f-hachures-fond { fill: var(--cf-creme); }

.cf-f-hachures-trait {
	stroke: var(--cf-trait);
	stroke-width: 3;
}

.cf-f-segment-texte {
	font-family: var(--cf-corps);
	font-size: 13px;
	fill: var(--cf-texte);
}

.cf-f-segment-texte.cf-f-decote { fill: #8A3A27; }
.cf-f-segment-texte.cf-f-surcote { fill: var(--cf-creme); }

.cf-f-etiquette {
	font-family: var(--cf-corps);
	font-size: 13px;
	font-weight: 600;
	fill: var(--cf-vert);
}

.cf-f-trait {
	stroke: var(--cf-doux);
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
}

.cf-f-repere--auto.cf-f-trait { stroke: var(--cf-vert); stroke-dasharray: none; }
.cf-f-repere--legal.cf-f-trait { stroke: var(--cf-vert); stroke-dasharray: none; stroke-width: 2.5; }
.cf-f-repere--vous.cf-f-etiquette { fill: var(--cf-doux); }

.cf-f-marqueur.cf-f-trait {
	stroke: var(--cf-or-fonce);
	stroke-width: 3;
	stroke-dasharray: none;
}

.cf-f-marqueur.cf-f-etiquette { fill: var(--cf-or-fonce); }
.cf-f-pointe { fill: var(--cf-or-fonce); }

.cf-frise-texte {
	margin: 12px 0 0;
	padding-left: 20px;
	font-size: 15px;
	color: var(--cf-doux);
}

.cf-frise-texte strong {
	color: var(--cf-vert);
}

.cf-champs-ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.cf-champs-ligne > .cf-champ {
	flex: 1 1 160px;
}

.cf-sous-titre {
	margin: 24px 0 8px;
	color: var(--cf-vert);
	font-family: var(--cf-titres);
	font-size: 19px;
	font-weight: 400;
}

/* Liseré blanc derrière les textes de la frise : un trait de repère ne les barre pas. */
.cf-f-couloir,
.cf-f-etiquette {
	paint-order: stroke;
	stroke: var(--cf-blanc);
	stroke-width: 5px;
	stroke-linejoin: round;
}