/*
 * Variables de couleurs — SICTOM-Haut-Jura-Logo-Couleur.svg
 * Couleurs extraites directement du fichier SVG du logo.
 */

:root {
	/* Couleurs brutes du logo */
	--sictom-bleu: #489ecb;       /* flèche bleue */
	--sictom-vert: #568a30;       /* flèche verte */
	--sictom-jaune: #f2c33e;      /* flèche jaune */
	--sictom-gris-bleu: #6a8293;  /* "Sictom" / élément gris-bleu clair */
	--sictom-gris-fonce: #485161; /* "Sictom" / élément gris-bleu foncé */

	/* Alias sémantiques, pour un usage plus lisible dans les feuilles de style */
	--sictom-primary: var(--sictom-vert);
	--sictom-secondary: var(--sictom-gris-bleu);
	--sictom-accent: var(--sictom-jaune);
	--sictom-text: var(--sictom-gris-fonce);
	--sictom-text-muted: var(--sictom-gris-bleu);

	/* Hauteur de l'en-tête collé du site (mesurée dynamiquement par
	   cf7-wizard.js quand l'en-tête Astra devient "sticky" au scroll) : sert
	   à décaler la colonne de sommaire du questionnaire pour qu'elle ne
	   passe pas dessous. 90px = valeur de secours si le script ne tourne
	   pas (JS désactivé) ou sur un thème sans en-tête collé détecté. */
	--sictom-fixed-header-offset: 90px;
}

/* ------------------------------------------------------------------ */
/* Exemple d'application aux formulaires Contact Form 7 de l'enquête. */
/* À adapter / supprimer selon les besoins.                           */
/* ------------------------------------------------------------------ */

.wpcf7-form h3 {
	color: var(--sictom-primary);
	border-bottom: 2px solid var(--sictom-accent);
	padding-bottom: 0.3em;
}

.wpcf7-form h4 {
	color: var(--sictom-text);
	font-size: 1.05em;
	margin: 1.4em 0 0.4em;
}

.wpcf7-form .cf7-question {
	border: 1px solid rgba(106, 130, 147, 0.35); /* dérivé de --sictom-gris-bleu */
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(72, 81, 97, 0.08); /* dérivé de --sictom-gris-fonce */
	padding: 1em 1.2em;
	margin-bottom: 1.2em;
	background: #fff;
}

.wpcf7-form .cf7-question h4:first-child {
	margin-top: 0;
}

.wpcf7-form .cf7-question .cf7-conditionnel {
	margin-top: 0.8em;
}

.wpcf7-form .cf7-requis {
	color: #d94f4f;
	font-weight: bold;
}

.wpcf7-form .cf7-note {
	font-style: italic;
	font-weight: normal;
	color: var(--sictom-text-muted);
}

.wpcf7-form,
.wpcf7-form label {
	color: var(--sictom-text);
}

.wpcf7-form em {
	color: var(--sictom-text-muted);
}

.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
	accent-color: var(--sictom-secondary);
}

.wpcf7-form select,
.wpcf7-form input[type="text"],
.wpcf7-form textarea {
	border: 1px solid var(--sictom-text-muted);
	border-radius: 4px;
}

.wpcf7-form select:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--sictom-secondary);
	box-shadow: 0 0 0 2px rgba(72, 158, 203, 0.25); /* halo bleu, dérivé de --sictom-bleu */
}

.wpcf7-form input[type="submit"] {
	background-color: var(--sictom-primary);
	color: #fff;
	border: none;
	padding: 0.7em 1.6em;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	width:100%;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: var(--sictom-secondary);
}

/* Remplacé par le voile de chargement ci-dessous (.cf7-envoi-en-cours,
   voir spinner-envoi.js), trop discret pour signaler un envoi qui peut
   prendre plusieurs secondes. */
.wpcf7-form .wpcf7-spinner {
	display: none !important;
}

.wpcf7-response-output {
	border-color: var(--sictom-accent) !important;
	color: var(--sictom-text);
}

/* ------------------------------------------------------------------ */
/* Voile de chargement affiché pendant l'envoi du formulaire            */
/* (voir spinner-envoi.js).                                             */
/* ------------------------------------------------------------------ */

.wpcf7-form {
	position: relative;
}

.wpcf7-form .cf7-envoi-en-cours {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 20;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 8px;
	font-weight: bold;
	color: var(--sictom-text);
	text-align: center;
	padding: 1em;
}

.wpcf7-form .cf7-envoi-en-cours.is-visible {
	display: flex;
}

.wpcf7-form .cf7-envoi-spinner {
	width: 2.4em;
	height: 2.4em;
	border: 4px solid rgba(86, 138, 48, 0.25); /* dérivé de --sictom-vert */
	border-top-color: var(--sictom-primary);
	border-radius: 50%;
	animation: cf7-envoi-spin 0.8s linear infinite;
}

@keyframes cf7-envoi-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------------------ */
/* Questionnaire "pas à pas" : colonne de sommaire + barre de           */
/* progression + une étape affichée à la fois (voir cf7-wizard.js).     */
/* ------------------------------------------------------------------ */

.wpcf7-form .cf7-wizard {
	display: flex;
	align-items: flex-start;
	gap: 2em;
}

.wpcf7-form .cf7-wizard-nav {
	flex: 0 0 240px;
	position: sticky;
	top: calc(var(--sictom-fixed-header-offset) + 1em);
}

.wpcf7-form .cf7-wizard-content {
	flex: 1 1 auto;
	min-width: 0;
}

.wpcf7-form .cf7-wizard-step-heading {
	color: var(--sictom-text);
	font-size: 1em;
	font-weight: bold;
	border-bottom: none;
	margin: 0 0 0.6em;
	padding-bottom: 0;
}

.wpcf7-form .cf7-wizard-progress {
	height: 6px;
	border-radius: 3px;
	background: rgba(106, 130, 147, 0.2); /* dérivé de --sictom-gris-bleu */
	overflow: hidden;
	margin-bottom: 1.2em;
}

.wpcf7-form .cf7-wizard-progress-bar {
	height: 100%;
	width: 0;
	background: var(--sictom-primary);
	transition: width 0.3s ease;
}

.wpcf7-form .cf7-wizard-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.wpcf7-form .cf7-wizard-step-item {
	color: var(--sictom-text-muted);
	font-size: 0.92em;
	line-height: 1.3;
	padding: 0.3em 0;
}

/* Le sélecteur cible ".cf7-wizard-step-row p" et NON ".cf7-wizard-step-row"
   directement : même à l'intérieur de notre <div>, CF7 réinsère quand même
   un <p> autour du numéro et du libellé (constaté sur le site en ligne :
   <div class="cf7-wizard-step-row"><p><span>...</span><span>...</span></p></div>).
   Le <div> ne suffit donc pas à lui seul à "protéger" son contenu ; il faut
   appliquer le flex directement sur ce <p> généré automatiquement. */
.wpcf7-form .cf7-wizard-step-row p {
	display: flex;
	margin: 0;
	/* flex-start (et non center) : quand le libellé passe sur 2 lignes, le
	   numéro reste calé en haut, aligné avec la 1re ligne, au lieu de se
	   retrouver centré entre les deux lignes (ce qui donnait l'impression
	   que le retour à la ligne passait sous le numéro). */
	align-items: flex-start;
	gap: 0.7em;
}

.wpcf7-form .cf7-wizard-step-number {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	border: 2px solid var(--sictom-text-muted);
	font-weight: bold;
	font-size: 0.9em;
}

.wpcf7-form .cf7-wizard-step-item.is-active {
	color: var(--sictom-text);
	font-weight: bold;
}

.wpcf7-form .cf7-wizard-step-item.is-active .cf7-wizard-step-number {
	border-color: var(--sictom-primary);
	background: var(--sictom-primary);
	color: #fff;
}

.wpcf7-form .cf7-wizard-step-item.is-done {
	color: var(--sictom-text);
	cursor: pointer;
}

.wpcf7-form .cf7-wizard-step-item.is-done .cf7-wizard-step-number {
	border-color: var(--sictom-primary);
	background: #fff;
	color: var(--sictom-primary);
}

/* Le masquage des étapes est géré en JS (cf7-wizard.js), pas ici : si le
   script ne charge pas (JS désactivé, erreur réseau...), toutes les étapes
   restent visibles à la suite et le formulaire reste utilisable normalement
   sur une seule page. */
.wpcf7-form .cf7-step.is-active {
	animation: cf7-step-fade-in 0.25s ease;
}

@keyframes cf7-step-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wpcf7-form .cf7-wizard-buttons {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	margin-top: 1.5em;
}

/* Chaque bouton est enveloppé dans son propre <div class="cf7-wizard-btn-wrap">
   dans le formulaire : Contact Form 7 réencapsule le contenu "en vrac" avec
   sa propre moulinette (façon wpautop), et sans ce wrapper il fusionnait les
   2 boutons dans un même <p> avec un <br /> entre eux, ce qui les empilait
   verticalement et rendait "justify-content: space-between" inopérant
   (plus qu'un seul élément flex direct). Les <div> ne sont pas retouchés
   par cette moulinette, contrairement au contenu nu. */
.wpcf7-form .cf7-wizard-btn-wrap {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* display n'est PAS forcé en !important ici (contrairement à width) : le JS
   (cf7-wizard.js) bascule .style.display = 'none' / '' sur ces boutons pour
   les afficher/masquer selon l'étape (ex: "Précédent" masqué sur l'étape 1).
   Un "display: ... !important" en CSS l'emporterait sur ce style en ligne et
   empêcherait le bouton de se masquer. */
.wpcf7-form .cf7-wizard-prev,
.wpcf7-form .cf7-wizard-next,
.wpcf7-form .cf7-wizard-restart {
	width: auto !important;
	border: none;
	border-radius: 4px;
	padding: 0.7em 1.6em;
	font-weight: bold;
	cursor: pointer;
	background: var(--sictom-primary);
	color: #fff;
}

/* Le thème applique un style de survol global aux boutons (constaté : il
   repasse en gris au survol) ; !important garantit que notre couleur de
   survol l'emporte. */
.wpcf7-form .cf7-wizard-prev:hover,
.wpcf7-form .cf7-wizard-next:hover,
.wpcf7-form .cf7-wizard-restart:hover {
	background: var(--sictom-secondary) !important;
	color: #fff !important;
}

/* Écran affiché à la place du questionnaire après un envoi réussi (voir
   wpcf7mailsent dans cf7-wizard.js). Masqué par défaut : sans JS, ce bloc ne
   s'affiche jamais et le message de confirmation standard de Contact Form 7
   reste visible à la place. */
.wpcf7-form .cf7-wizard-thankyou {
	text-align: center;
	padding: 2.5em 1em;
}

.wpcf7-form .cf7-wizard-thankyou h3 {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1.2em;
}

.wpcf7-form .cf7-wizard-thankyou .cf7-wizard-buttons {
	justify-content: center;
}

.wpcf7-form .cf7-wizard-error-message {
	color: #d94f4f;
	font-weight: bold;
	margin: 1em 0 0;
}

.wpcf7-form .cf7-question.cf7-wizard-invalid {
	border-color: #d94f4f;
	box-shadow: 0 0 0 2px rgba(217, 79, 79, 0.25);
}

.wpcf7-form .cf7-question-error-message {
	color: #d94f4f;
	font-weight: bold;
	font-size: 0.9em;
	margin: 0.8em 0 0;
}

@media (max-width: 700px) {
	.wpcf7-form .cf7-wizard {
		flex-direction: column;
		gap: 1em;
	}

	.wpcf7-form .cf7-wizard-nav {
		position: static;
		flex-basis: auto;
		width: 100%;
	}

	/* Le sommaire détaillé (liste des étapes) est masqué sur mobile : trop
	   encombrant sur petit écran. Il ne reste que le titre "Étape n sur N"
	   et la barre de progression, déjà suffisants pour se repérer. */
	.wpcf7-form .cf7-wizard-steps {
		display: none;
	}
}