/*
 * Feuille de calcul : styles alignés sur les formulaires WPForms du site (relevé de l'étape 16).
 * Les polices et la couleur du texte sont héritées du thème. Les valeurs propres au formulaire
 * sont regroupées dans les variables ci-dessous : un changement de charte se fait ici seulement.
 */


.fdc-feuille {
	/* Palette de l'entreprise (couleurs globales d'Elementor), avec une valeur de secours. */
	--fdc-couleur-1: var(--e-global-color-f3fb168, #1B3C68);   /* bleu foncé */
	--fdc-couleur-2: var(--e-global-color-accent, #EA2A61);    /* framboise */
	--fdc-couleur-3: var(--e-global-color-55a7665, #969CA8);   /* gris moyen */
	--fdc-couleur-4: var(--e-global-color-cd88fb4, #291B68);   /* indigo */
	--fdc-fond-entete: var(--e-global-color-a1ac1cb, #F4F4F4); /* gris très clair */

	--fdc-bordure: #ccc;            /* champs */
	--fdc-bordure-focus: #999;
	--fdc-fond-champ: #fff;
	--fdc-texte-champ: #333;
	--fdc-rayon-champ: 2px;
	--fdc-fond-bouton: #eee;        /* boutons */
	--fdc-fond-bouton-survol: #ddd;
	--fdc-bordure-bouton: #ddd;
	--fdc-bordure-bouton-survol: #ccc;
	--fdc-texte-bouton: #333;       /* texte des boutons */
	--fdc-erreur: #900;             /* messages d'erreur */
	--fdc-bordure-erreur: #c00;
	--fdc-focus: var(--fdc-couleur-1);  /* contour de focus, visible au clavier (accessibilité) */
	--fdc-largeur-champ: 100%;      /* largeur des champs ; 60 % = taille « moyenne » de WPForms */
	--fdc-largeur-saisie: 10em;     /* largeur minimale des champs du formulaire de calcul */

	--fdc-requis: #f00;             /* astérisque des champs obligatoires, comme WPForms */

	--fdc-largeur-formulaire: 36em; /* largeur maximale du bloc de saisie */
	--fdc-largeur-saisie-max: 10em; /* largeur maximale des champs du formulaire de calcul */

	--fdc-couleur-reference: #555;  /* séries en pointillés (ligne de référence, ex. charge statique) */

	--fdc-graphique-police: 12px;   /* texte des graphiques : graduations, titres d'axes, légende */
	--fdc-graphique-titre: oui;     /* titre au-dessus de chaque graphique : oui ou non */
}

/* Un élément masqué le reste, même si le thème impose un affichage aux paragraphes. */
.fdc-feuille [hidden] {
	display: none !important;
}

/* ---------- Champs ---------- */

.fdc-feuille .fdc-champ {
	margin: 0 0 10px;
}

.fdc-feuille .fdc-champ label {
	display: block;
	font-weight: 700;
	margin: 0 0 4px;
}

.fdc-feuille input[type="number"],
.fdc-feuille input[type="text"],
.fdc-feuille input[type="email"],
.fdc-feuille input[type="tel"],
.fdc-feuille select {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--fdc-largeur-champ);
	height: 38px;
	padding: 6px 10px;
	font: inherit;
	font-size: 16px;
	color: var(--fdc-texte-champ);
	background-color: var(--fdc-fond-champ);
	border: 1px solid var(--fdc-bordure);
	border-radius: var(--fdc-rayon-champ);
}

.fdc-feuille input:focus,
.fdc-feuille select:focus {
	border-color: var(--fdc-bordure-focus);
}

/* Contour visible à la navigation au clavier, comme le demandent les règles d'accessibilité. */
.fdc-feuille input:focus-visible,
.fdc-feuille select:focus-visible,
.fdc-feuille button:focus-visible {
	outline: 2px solid var(--fdc-focus);
	outline-offset: 2px;
}

/* Cases à cocher : la case, puis son libellé sur la même ligne, en graisse normale. */
.fdc-feuille input[type="checkbox"] {
	margin: 0 6px 0 0;
	vertical-align: middle;
}

.fdc-feuille input[type="checkbox"] + label {
	display: inline;
	font-weight: normal;
}

/* Champs numériques : pas de flèches d'incrément, inadaptées aux ordres de grandeur saisis. */
.fdc-feuille input[type="number"] {
	-moz-appearance: textfield;     /* Firefox */
	appearance: textfield;
}

.fdc-feuille input[type="number"]::-webkit-outer-spin-button,
.fdc-feuille input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;       /* Chrome, Edge, Safari */
	margin: 0;
}

.fdc-feuille .fdc-requis {
	color: var(--fdc-requis);
	margin-left: 0.15em;
}

.fdc-feuille .fdc-mention-requis {
	margin: 0 0 15px;
	font-size: 0.875em;
}

/* Libellé à gauche, champ à droite, erreur sous le champ : divise la hauteur du formulaire. */
.fdc-feuille .fdc-champ-ligne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
}

.fdc-feuille .fdc-champ-ligne label {
	margin: 0;
}

.fdc-feuille .fdc-champ-ligne .fdc-erreur {
	grid-column: 2;                 /* message d'erreur sous le champ */
}

.fdc-feuille .fdc-champ-ligne input,
.fdc-feuille .fdc-champ-ligne select {
	max-width: 100%;
}

/* Formulaire de calcul : une seule grille. Colonne 1 = libellés, aussi large que le plus long
   (au plus 60 % du formulaire) ; colonne 2 = champs, alignés juste à droite, de largeur limitée. */
.fdc-feuille .fdc-calcul {
	display: grid;
	/* Libellés : la largeur du plus long (au plus 60 %) ; champs : entre leur largeur minimale et maximale. */
	grid-template-columns: fit-content(60%) minmax(var(--fdc-largeur-saisie), var(--fdc-largeur-saisie-max));
	column-gap: 12px;
	justify-content: start;         /* l'espace restant reste à droite des champs */
}

/* Tout ce qui n'est pas une ligne de champ occupe toute la largeur : mention, cases, boutons. */
.fdc-feuille .fdc-calcul > * {
	grid-column: 1 / -1;
}

/* Chaque ligne de champ reprend les colonnes du formulaire (subgrid) : tous les champs s'alignent. */
.fdc-feuille .fdc-calcul .fdc-champ-ligne {
	display: grid;
	grid-template-columns: subgrid;
}

.fdc-feuille .fdc-calcul .fdc-champ-ligne .fdc-erreur {
	grid-column: 1 / -1;
	text-align: right;              /* sous le champ, sur une seule ligne */
}

/* Très petits écrans : libellé au-dessus du champ. */
@media (max-width: 480px) {
	.fdc-feuille .fdc-champ-ligne {
		grid-template-columns: minmax(0, 1fr);
	}

	.fdc-feuille .fdc-champ-ligne .fdc-erreur {
		grid-column: 1;
	}
	
	.fdc-feuille .fdc-calcul {
		display: block;             /* très petits écrans : libellé au-dessus du champ */
	}

	.fdc-feuille .fdc-calcul .fdc-champ-ligne {
		grid-template-columns: minmax(0, 1fr);
	}

	.fdc-feuille .fdc-calcul .fdc-champ-ligne .fdc-erreur {
		text-align: left;
	}	

}

/* ---------- Erreurs ---------- */

.fdc-feuille .fdc-erreur {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--fdc-erreur);
}

.fdc-feuille .fdc-erreur:empty {
	display: none;                  /* pas d'espace réservé quand il n'y a pas d'erreur */
}

.fdc-feuille input[aria-invalid="true"],
.fdc-feuille select[aria-invalid="true"] {
	border-color: var(--fdc-bordure-erreur);
}

/* ---------- Boutons ---------- */
/* « button[type] » : un degré de priorité de plus que les règles de boutons du thème et
   d'Elementor (texte blanc au survol), sans dépendre de l'ordre de chargement des feuilles. */

.fdc-feuille button[type] {
	padding: 10px 15px;
	font: inherit;
	font-size: 16px;
	color: var(--fdc-texte-bouton);
	background-color: var(--fdc-fond-bouton);
	border: 1px solid var(--fdc-bordure-bouton);
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
}

.fdc-feuille button[type]:hover,
.fdc-feuille button[type]:focus {
	color: var(--fdc-texte-bouton);
	background-color: var(--fdc-fond-bouton-survol);
	border-color: var(--fdc-bordure-bouton-survol);
}

.fdc-feuille button[type]:disabled {
	opacity: 0.6;
	cursor: wait;                   /* calcul en cours */
}

.fdc-feuille button[type].fdc-remplir-exemple {
	border-style: dashed;           /* bouton exemple : donne les valeurs d'exemple */
}

/* ---------- Blocs du parcours ---------- */

.fdc-feuille .fdc-coordonnees {
	margin-top: 15px;
	padding-top: 20px;
	border-top: 1px solid var(--fdc-bordure);   /* sépare le calcul des coordonnées */
}

.fdc-feuille .fdc-statut:not(:empty) {
	margin: 10px 0;
	font-weight: bold;                           /* message d'attente ou d'erreur générale */
}

.fdc-feuille .fdc-resultats {
	margin-top: 25px;
}

/* Hauteur fixe du graphique : lisible sur mobile, où un rapport 2:1 le rendrait trop plat. */
.fdc-feuille .fdc-graphique {
	position: relative;
	height: 320px;
	margin-top: 20px;
}

/* ---------- Disposition : saisie à gauche, résultats à droite, graphique en dessous ---------- */

/* Formulaire à gauche, à sa largeur limitée ; colonne des résultats à droite, sur toute la place restante. */
.fdc-feuille .fdc-disposition {
	display: grid;
	grid-template-columns: minmax(0, var(--fdc-largeur-formulaire)) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* Avant le premier calcul : la colonne de droite s'étire jusqu'en bas de la colonne de gauche, en gris. */
.fdc-feuille:not(.fdc-avec-resultats) .fdc-colonne-resultats {
	align-self: stretch;
	position: static;               /* rien à faire suivre au défilement */
	background-color: var(--fdc-fond-entete);
}

/* Phrase d'attente des résultats : même encart que les résultats, en pointillés. */
.fdc-feuille .fdc-attente-resultats {
	background-color: var(--fdc-gris-clair);
	border: 1px dashed var(--fdc-gris-bleute);
	border-left: 4px solid var(--fdc-marine);
	color: var(--fdc-marine);
	opacity: 1;
}

.fdc-feuille .fdc-colonne-resultats .fdc-resultats {
	margin-top: 0;                  /* la colonne commence en haut, à hauteur du formulaire */
}

/* Graphiques : côte à côte s'il y a la place (au moins 420 px chacun), l'un sous l'autre sinon. */
.fdc-feuille .fdc-graphiques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 15px;
	margin-top: 20px;
}

.fdc-feuille .fdc-graphiques .fdc-graphique {
	margin-top: 0;                  /* l'espacement est porté par le conteneur */
}

/* La colonne des résultats suit le défilement, tant que le formulaire de gauche est plus haut. */
.fdc-feuille .fdc-colonne-resultats {
	position: sticky;
	top: var(--fdc-decalage-haut, 20px);
}

/* Écran étroit : une seule colonne, dans l'ordre saisie, résultats, graphique. */
@media (max-width: 900px) {
	.fdc-feuille .fdc-disposition {
		grid-template-columns: minmax(0, 1fr);
	}
	.fdc-feuille .fdc-colonne-resultats {
		position: static;           /* une seule colonne : pas de suivi du défilement */
	}
	.fdc-feuille:not(.fdc-avec-resultats) .fdc-colonne-resultats {
		display: none;              /* une seule colonne : pas de bloc d'attente sous le formulaire */
	}
}

/* Aucun espace parasite sous les deux colonnes : paragraphe d'état vide masqué,
   et pas de marge basse sur le dernier élément de chaque colonne. */
.fdc-feuille .fdc-statut:empty {
	display: none;
}

.fdc-feuille .fdc-disposition,
.fdc-feuille .fdc-colonne-saisie > :last-child,
.fdc-feuille .fdc-colonne-resultats > :last-child {
	margin-bottom: 0;
}

/* ---------- Résultats ---------- */

.fdc-feuille .fdc-valeurs {
	display: grid;
	/* Libellés : la place restante, avec retour à la ligne ; valeurs : leur largeur, sans coupure. */
	grid-template-columns: minmax(0, 1fr) max-content;
	gap: 0.25em 1em;
}

.fdc-feuille .fdc-valeurs dt {
	font-weight: bold;
	overflow-wrap: anywhere;        /* un mot très long peut aussi être coupé, plutôt que de déborder */
}

.fdc-feuille .fdc-valeurs dd {
	margin: 0;
	white-space: nowrap;            /* une valeur et son unité restent sur une ligne */
	text-align: right;
}

/* Tableaux de résultats : toute la largeur de la colonne, défilement horizontal en dernier recours. */
.fdc-feuille .fdc-tableau {
	overflow-x: auto;
	margin: 1em 0;
}

.fdc-feuille .fdc-tableau table {
	width: 100%;
	border-collapse: collapse;
}

.fdc-feuille .fdc-tableau caption {
	text-align: left;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.fdc-feuille .fdc-tableau th,
.fdc-feuille .fdc-tableau td {
	border: 1px solid var(--fdc-bordure);
	padding: 6px 8px;
}

.fdc-feuille .fdc-tableau thead th {
	background-color: var(--fdc-fond-entete);
	text-align: center;
}

.fdc-feuille .fdc-tableau tbody th {
	background-color: var(--fdc-fond-entete);
	text-align: left;
	font-weight: bold;
}

.fdc-feuille .fdc-tableau td {
	text-align: center;
	white-space: nowrap;            /* une valeur n'est jamais coupée */
	font-variant-numeric: tabular-nums; /* chiffres de même largeur : valeurs alignées d'une ligne à l'autre */
}

/* Note en fin de résultats : avertissement sur le modèle de calcul. */
.fdc-feuille .fdc-note-resultats {
	margin: 8px 0 0;
	font-size: 0.9em;
	font-style: italic;
}

/* ---------- Petits écrans ---------- */

@media (max-width: 600px) {
	.fdc-feuille input[type="number"],
	.fdc-feuille input[type="text"],
	.fdc-feuille input[type="email"],
	.fdc-feuille input[type="tel"],
	.fdc-feuille select {
		max-width: 100%;
	}
}