/* Demande de formation — modules et calendrier. Metaconcept Core.
   Charte : OR #D5AE05, GRIS FONCÉ #4D4D4D. Les tokens du site priment,
   les valeurs de charte sont le repli. Aucun sélecteur Divi n'est ciblé :
   ce fichier survit au passage en Divi 5. */

.mc-form-modules,
.mc-cal {
	--mc-gold: var(--c-link, #D5AE05);
	--mc-gold-fonce: #B8940A;
	--mc-dark: var(--c-base, #4D4D4D);
	--mc-muted: #6E757C;
	--mc-border: rgba(77, 77, 77, 0.14);
	--mc-ease: 0.2s ease;
}

/* ------------------------------------------------------------------
   Les cartes de modules
   ------------------------------------------------------------------ */

.mc-form-modules {
	display: grid;
	grid-template-columns: repeat(var(--mc-cols, 3), minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 32px;
}

.mc-form-module {
	padding: 18px 20px;
	border: 1.5px solid var(--mc-border);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mc-dark);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--mc-ease), box-shadow var(--mc-ease), transform var(--mc-ease);
}

.mc-form-module:hover {
	border-color: #F2E6B0;
	transform: translateY(-2px);
}

/* L'état choisi ne repose pas sur la seule couleur : la bordure épaissit
   et une coche apparaît. Indispensable pour qui ne distingue pas l'or. */
.mc-form-module.is-on {
	border-color: var(--mc-gold);
	box-shadow: 0 0 0 1px var(--mc-gold), 0 8px 20px rgba(213, 174, 5, 0.14);
}

.mc-form-module.is-on::after {
	content: "✓";
	float: right;
	margin-left: 10px;
	color: var(--mc-gold-fonce);
	font-weight: 700;
}

.mc-form-module:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 2px;
}

/* La ligne d'aide sous les cartes : « jusqu'à 3 modules ». Elle porte
   aussi l'avertissement quand le plafond est atteint — un seul endroit
   où ce message peut apparaître, donc un seul à relire. */
.mc-form-modules__aide {
	margin: -20px 0 32px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mc-muted);
}

.mc-form-modules__aide.is-plein {
	color: var(--mc-dark);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Le rappel des modules retenus, en tête du formulaire
   ------------------------------------------------------------------

   Il n'est pas encadré comme une carte : c'est un rappel, pas un bloc
   de plus à lire. Une barre dorée à gauche suffit à le détacher du
   formulaire sans lui voler l'attention. */

.mc-form-choix {
	--mc-gold: var(--c-link, #D5AE05);
	--mc-dark: var(--c-base, #4D4D4D);
	--mc-muted: #6E757C;
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 3px solid var(--mc-gold);
	background: #FAF7EC;
	border-radius: 0 10px 10px 0;
}

.mc-form-choix.is-vide {
	background: #F6F6F6;
	border-left-color: rgba(77, 77, 77, 0.2);
}

/* Deux rappels, un seul bloc : modules puis dates, l'un sous l'autre.
   Côte à côte, ils se seraient serrés dès qu'un intitulé est long. */
.mc-form-choix__bloc + .mc-form-choix__bloc {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(77, 77, 77, 0.10);
}

.mc-form-choix__titre {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-dark);
}

.mc-form-choix__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Même précaution que pour la sous-navigation : le thème dessine ses
   propres puces en ::before sur les <li>, et elles réapparaissent entre
   les modules retenus. On éteint les deux. */
/* Pas de padding:0 ici, contrairement à la sous-navigation : c'est le
   <li> lui-même qui porte la pastille, et le remettre à zéro écraserait
   son rembourrage — la règle de reset est plus spécifique que celle qui
   le pose. */
.mc-form-choix__liste > li {
	margin: 0;
	list-style: none;
}

.mc-form-choix__liste > li::before,
.mc-form-choix__liste > li::marker {
	content: none;
	display: none;
}

.mc-form-choix__vide {
	font-size: 13.5px;
	font-style: italic;
	color: var(--mc-muted);
}

.mc-form-choix__ligne {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 14px;
	border: 1px solid rgba(77, 77, 77, 0.14);
	border-radius: 8px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mc-dark);
}

.mc-form-choix__retirer {
	border: none;
	background: none;
	padding: 0 2px;
	font-size: 17px;
	line-height: 1;
	color: var(--mc-muted);
	cursor: pointer;
}

.mc-form-choix__retirer:hover {
	color: #B32D2E;
}

/* ------------------------------------------------------------------
   Le calendrier
   ------------------------------------------------------------------ */

.mc-cal {
	max-width: 420px;
	padding: 22px;
	border: 1px solid var(--mc-border);
	border-radius: 14px;
	background: #fff;
}

.mc-cal__note {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--mc-muted);
}

.mc-cal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.mc-cal__mois {
	font-size: 15px;
	font-weight: 700;
	color: var(--mc-dark);
	text-transform: capitalize;
}

.mc-cal__nav {
	width: 34px;
	height: 34px;
	border: 1px solid var(--mc-border);
	border-radius: 50%;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	color: var(--mc-dark);
	cursor: pointer;
	transition: border-color var(--mc-ease), color var(--mc-ease);
}

.mc-cal__nav:hover {
	border-color: var(--mc-gold);
	color: var(--mc-gold-fonce);
}

.mc-cal__nav:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 2px;
}

.mc-cal__entetes,
.mc-cal__jours {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.mc-cal__entetes {
	margin-bottom: 6px;
}

.mc-cal__entetes span {
	padding: 4px 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--mc-muted);
	text-align: center;
}

.mc-cal__jour {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #FAFAFA;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--mc-dark);
	cursor: pointer;
	transition: background var(--mc-ease), border-color var(--mc-ease);
}

.mc-cal__jour.is-vide {
	background: none;
	cursor: default;
}

.mc-cal__jour:hover:not(:disabled) {
	border-color: var(--mc-gold);
}

/* Fermé : week-end ou délai des trois semaines. Le barré dit pourquoi,
   la couleur seule ne suffirait pas. */
.mc-cal__jour.is-ferme {
	background: none;
	color: #C9CCCF;
	cursor: not-allowed;
	text-decoration: line-through;
}

.mc-cal__jour.is-on {
	background: var(--mc-gold);
	border-color: var(--mc-gold);
	color: #fff;
	font-weight: 700;
}

/* Le rang de préférence, en pastille — l'ordre porte du sens. */
.mc-cal__jour.is-on::after {
	content: attr(data-rang);
	position: absolute;
	top: -5px;
	right: -5px;
	width: 17px;
	height: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mc-dark);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.mc-cal__jour:focus-visible {
	outline: 2px solid var(--mc-dark);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Les dates retenues
   ------------------------------------------------------------------ */

.mc-cal__choix {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Le thème repose ses puces sur les <li>, et une puce apparaissait
   devant « Sélectionnez 1 à 3 dates » (relevé le 01/10). Même
   extinction que pour les modules retenus — sans padding:0, qui
   écraserait le rembourrage des lignes de date. */
.mc-cal__choix > li {
	list-style: none;
}

.mc-cal__choix > li::before,
.mc-cal__choix > li::marker {
	content: none;
	display: none;
}

.mc-cal__vide {
	font-size: 13px;
	font-style: italic;
	color: var(--mc-muted);
}

.mc-cal__ligne {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--mc-border);
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--mc-dark);
}

.mc-cal__rang {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mc-gold);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.mc-cal__retirer {
	margin-left: auto;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--mc-muted);
	cursor: pointer;
	transition: color var(--mc-ease);
}

.mc-cal__retirer:hover {
	color: #B32D2E;
}

.mc-cal__alerte {
	margin: 12px 0 0;
	padding: 9px 12px;
	border-left: 3px solid var(--mc-gold);
	background: #FDF0DC;
	font-size: 13px;
	color: var(--mc-dark);
}

/* ------------------------------------------------------------------
   Petit écran
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.mc-form-modules {
		grid-template-columns: 1fr;
	}

	.mc-cal {
		max-width: none;
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-form-module,
	.mc-cal__jour,
	.mc-cal__nav,
	.mc-cal__retirer {
		transition: none;
	}

	.mc-form-module:hover {
		transform: none;
	}
}

/* ==================================================================
   LES CARTES DE MODULE AVEC VISUEL
   Actif quand le réglage « Visuels sur les cartes de module » est
   coché : le PHP ajoute alors .mc-form-module--visuel.
   ==================================================================

   Demande du 06/10 : « une image générique sur chaque module, dans le
   même style que les secteurs de la page d'accueil ». Le bouton reste
   un bouton — le clic, la sélection, la limite de trois modules et la
   coche de l'état choisi ne bougent pas. Seule sa composition change :
   le rembourrage passe du bouton au seul intitulé, et le visuel occupe
   toute la largeur au-dessus.

   LE FORMAT 16/10 est celui des cartes de secteurs. Il recadre sans
   déformer, ce qui compte ici : les images disponibles vont du
   720 × 530 au 2 560 × 1 708, et aucune n'a été prise pour cet usage.

   LA CARTE SANS IMAGE garde sa place dans la grille — un aplat discret
   plutôt qu'un trou. Relevé le 06/10 : deux modules sur sept n'ont
   aucune photo exploitable dans la médiathèque.
   ------------------------------------------------------------------ */

.mc-form-module--visuel {
	padding: 0;
	overflow: hidden;
}

.mc-form-module__visuel {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--mc-fond-doux, #FAFAFA);
	border-bottom: 1px solid var(--mc-border);
}

.mc-form-module__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-form-module__nom {
	display: block;
	padding: 13px 16px;
}

/* La coche de l'état choisi flottait à droite du texte du bouton ;
   avec le visuel, elle doit flotter dans la ligne de l'intitulé. */
.mc-form-module--visuel.is-on::after {
	display: none;
}

.mc-form-module--visuel.is-on .mc-form-module__nom::after {
	content: "✓";
	float: right;
	margin-left: 10px;
	color: var(--mc-gold-fonce);
	font-weight: 700;
}

@media (max-width: 600px) {

	.mc-form-module__visuel {
		aspect-ratio: 16 / 7;
	}
}

/* La photo de la section « Format et organisation ».

   Posée dans le module texte de la colonne de gauche, sous le
   paragraphe de prérequis — là où la colonne s'arrêtait après deux
   lignes et laissait un vide sous le titre.

   ELLE N'EST PAS EN BANDEAU, et c'est mesuré : le fichier fait
   800 × 533 px. Sur une colonne de 740 px il est rendu à 0,93 fois
   sa taille, donc net ; en pleine largeur il serait agrandi 1,8 fois
   et le verrait. Le cadre est celui des cartes du site. */
.mc-formation-photo {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 22px;
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-rayon-carte, 12px);
}

/* ==================================================================
   UN SEUL BLOC POUR CHOISIR, DATER ET ENVOYER
   Garde : body.mc-h-formation — réglage « 12. Harmonisation — le
   choix du module et la réservation en un seul bloc ».
   ==================================================================

   Remarque du 07/10 : « il serait plus malin de faire une seule
   section pour le choix du module, de la date et du formulaire ».
   Juste — c'est une seule action en trois temps, et la page la
   coupait en deux.

   CE QUI SÉPARAIT, mesuré : la section des modules ferme sur 88 px
   de rembourrage, celle de la réservation ouvre sur 88 autres, et le
   fond passe du blanc au #FAFAFA. Soit 176 px de vide et un
   changement de teinte au milieu du geste — le visiteur qui vient de
   cocher « Brasage fort » croit avoir fini.

   CE QU'ON NE FAIT PAS : fusionner les deux sections dans le
   constructeur. Le contenu ne bouge pas, les deux ancres de la
   sous-navigation — « Nos modules » et « Réserver » — continuent de
   pointer chacune sur sa section, et décocher rend la page exacte
   qu'elle était. C'est de la mise en page, pas une refonte.

   LA NUMÉROTATION EST UNE INFORMATION, PAS UN ORNEMENT. Les deux
   titres deviennent l'étape 1 et l'étape 2 parce que l'ordre compte
   vraiment : on ne peut pas proposer une date avant d'avoir choisi un
   module. Le compteur est posé en CSS, donc aucun mot n'est ajouté au
   contenu.

   LE FILET DU BAS remplace la césure qu'on vient de supprimer : sans
   lui, le bloc et la FAQ — tous deux sur fond blanc — se toucheraient
   sans rien pour dire où l'un finit.
   ------------------------------------------------------------------ */

body.mc-h-formation #main-content {
	counter-reset: mc-etape;
}

body.mc-h-formation #main-content .et_pb_section:has(.mc-form-modules),
body.mc-h-formation #main-content .et_pb_section:has(.mc-reserver) {
	background-color: #FFFFFF;
	background-image: none;
}

body.mc-h-formation #main-content .et_pb_section:has(.mc-form-modules) {
	padding-bottom: 36px;
}

body.mc-h-formation #main-content .et_pb_section:has(.mc-reserver) {
	padding-top: 0;
	border-bottom: 1px solid rgba(77, 77, 77, 0.12);
}

body.mc-h-formation #main-content .et_pb_section:has(.mc-form-modules) h2::before,
body.mc-h-formation #main-content .et_pb_section:has(.mc-reserver) h2::before {
	content: counter(mc-etape);
	counter-increment: mc-etape;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-right: 12px;
	vertical-align: 3px;
	border-radius: 100px;
	background: var(--mc-or, #D5AE05);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 600px) {

	body.mc-h-formation #main-content .et_pb_section:has(.mc-form-modules) h2::before,
	body.mc-h-formation #main-content .et_pb_section:has(.mc-reserver) h2::before {
		width: 26px;
		height: 26px;
		margin-right: 9px;
		font-size: 14px;
	}
}