/**
 * Fiche produit stage GDC.
 *
 * Tout est porté par .gdc-fiche : aucune règle ne fuit vers le reste du site.
 * Les polices sont celles déjà en place (corps hérité du kit Elementor, titres en
 * Bebas Neue qui est déjà chargé sur le site) — seules des couleurs sont ajoutées.
 */

.gdc-fiche {
	/* Les trois premières existent déjà dans le kit Elementor du site. */
	--gdc-navy: #11052c;
	--gdc-navy-fonce: #0c0320;
	--gdc-red: #d62630;
	--gdc-blue: #008fcc;
	/* Ajouts propres à cette fiche. */
	--gdc-orange: #ff4d1c;
	--gdc-amber: #d4890a;
	--gdc-teal: #00c2a8;
	--gdc-violet: #9b51e0;

	/*
	 * Couleur du stage mis en avant : celle du stage verrouillé pour un pack,
	 * celle de son cycle pour une fiche de stage. Le gabarit la pose en style
	 * en ligne sur .gdc-fiche et le JS la réécrit au changement de lieu, donc
	 * tout ce qui la lit suit sans autre intervention. L'orange n'est plus
	 * qu'un repli : il ne sert que si aucun stage n'est identifiable.
	 */
	--gdc-accent: var(--gdc-orange);

	--gdc-texte: #fff;
	--gdc-doux: #c9c2da;
	--gdc-terne: #9c93b4;
	--gdc-surface: rgba(255, 255, 255, 0.06);
	--gdc-surface-forte: rgba(255, 255, 255, 0.12);
	--gdc-bord: rgba(255, 255, 255, 0.12);
	--gdc-bord-fort: rgba(255, 255, 255, 0.18);

	--gdc-wrap: 1320px;
	--gdc-gouttiere: 32px;
	/*
	 * Recouvrement imposé par le gabarit d'en-tête Elementor du site (#1557) : sa
	 * section porte « margin-bottom: -150px », donc tout ce qui suit remonte de
	 * 150 px sous une barre de navigation en position fixed. C'est voulu sur les
	 * pages à grande image de fond ; ici, cela posait la navigation sur les photos
	 * du stage. Une seule valeur à ajuster si le client retouche son en-tête.
	 */
	--gdc-entete: 150px;
	--gdc-display: "Bebas Neue", "Oswald", "Haettenschweiler", Impact, sans-serif;

	background: var(--gdc-navy);
	color: var(--gdc-texte);
	overflow-x: hidden;
	/* Réserve la hauteur de la barre collante : évite le décalage de mise en page. */
	padding-bottom: 96px;
}

.gdc-fiche *,
.gdc-fiche *::before,
.gdc-fiche *::after {
	box-sizing: border-box;
}

/*
 * Les options masquées par lieu le sont via l'attribut [hidden]. Comme plusieurs
 * de nos règles imposent un display explicite (block, flex, grid), il faut le
 * rétablir ici : sans cela, [hidden] est sans effet et les dates d'un autre lieu
 * restent visibles.
 */
.gdc-fiche [hidden] {
	display: none !important;
}

.gdc-fiche a {
	color: var(--gdc-texte);
	text-decoration: none;
}

.gdc-fiche a:hover,
.gdc-fiche a:focus-visible {
	color: var(--gdc-red);
}

.gdc-fiche :focus-visible {
	outline: 2px solid var(--gdc-blue);
	outline-offset: 2px;
}

.gdc-wrap {
	max-width: var(--gdc-wrap);
	margin: 0 auto;
	padding-left: var(--gdc-gouttiere);
	padding-right: var(--gdc-gouttiere);
}

/* ------------------------------------------------------------------ Titres */

.gdc-titre {
	font-family: var(--gdc-display);
	text-transform: uppercase;
	font-weight: 400;
	/* Bebas Neue est plus étroite qu'Oswald : un peu d'interlettrage la rend lisible en grand. */
	letter-spacing: 0.015em;
	line-height: 1.04;
	margin: 0;
	text-wrap: pretty;
}

.gdc-titre--h1 {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	margin-bottom: 14px;
}

.gdc-titre--h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.35rem);
	margin-bottom: 16px;
}

.gdc-titre--h3 {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	display: flex;
	align-items: center;
	gap: 12px;
}

.gdc-soustitre {
	font-family: var(--gdc-display);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.gdc-label {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gdc-terne);
	margin: 0 0 10px;
	padding: 0;
}

.gdc-label--icone {
	display: flex;
	align-items: center;
	gap: 9px;
}

.gdc-label__indice {
	text-transform: none;
	letter-spacing: 0;
	color: var(--gdc-doux);
	margin-left: 6px;
}

.gdc-surtitre {
	font-family: var(--gdc-display);
	font-size: 0.875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gdc-blue);
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
}

.gdc-note {
	font-size: 0.8125rem;
	color: var(--gdc-terne);
	margin: 12px 0 0;
}

.gdc-note--alerte {
	color: var(--gdc-amber);
}

/* L'ancêtre .gdc-fiche est nécessaire : « .gdc-fiche a » colore tous les liens en
   blanc avec une spécificité (0,1,1) qui battait la classe seule — « Voir
   l'itinéraire » sortait donc en blanc, et non dans le bleu du téléphone. */
.gdc-fiche .gdc-lien-bleu {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--gdc-blue);
	margin-top: 8px;
}

.gdc-fiche .gdc-lien-bleu:hover {
	color: var(--gdc-texte);
}

.gdc-section {
	padding-top: 52px;
}

.gdc-section--fin {
	padding-bottom: 40px;
}

.gdc-section__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.gdc-section__meta {
	font-size: 0.875rem;
	color: var(--gdc-doux);
	margin: 0;
}

/*
 * Le fond de la fiche continue de remplir la zone reprise par l'en-tête — la
 * navigation se pose donc sur du navy, pas sur une photo — et c'est le contenu
 * seul qui redescend. Un padding et non une marge : une marge annulerait le
 * recouvrement et laisserait une bande blanche sous la navigation.
 *
 * Desktop uniquement, comme demandé : en tablette et en mobile l'en-tête garde
 * son recouvrement d'origine.
 */
@media (min-width: 1025px) {
	.gdc-fiche {
		padding-top: var(--gdc-entete);
	}
}

/* ------------------------------------------------------------ Retour catalogue */

/*
 * Remplace le fil d'Ariane, retiré. Un seul niveau suffit : la fiche n'est jamais
 * qu'à un pas du catalogue, et le fil répétait le titre du produit.
 */
.gdc-fiche .gdc-retour {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 8px 14px 8px 12px;
	font-family: var(--gdc-display);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdc-doux);
	background: var(--gdc-surface);
	border: 1px solid var(--gdc-bord);
	transition: background 0.15s ease, color 0.15s ease;
}

.gdc-fiche .gdc-retour:hover,
.gdc-fiche .gdc-retour:focus-visible {
	color: var(--gdc-texte);
	background: var(--gdc-surface-forte);
}

/* ------------------------------------------------------------------ Galerie */

.gdc-galerie {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(4, 1fr);
	/* La maquette fixe la bande à 460 px : sans plafond, une seule photo
	   pleine largeur donnerait une bande démesurée sur grand écran. */
	max-height: 460px;
	overflow: hidden;
}

.gdc-galerie--1 {
	grid-template-columns: 1fr;
}

.gdc-galerie--2 {
	grid-template-columns: repeat(2, 1fr);
}

.gdc-galerie--3 {
	grid-template-columns: repeat(3, 1fr);
}

.gdc-galerie__tuile {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--gdc-navy-fonce);
	/* aspect-ratio seul : il garantit la hauteur depuis la largeur, donc une image
	   manquante n'effondre pas la tuile. Y ajouter un min-height inverserait le
	   calcul et c'est la largeur qui serait déduite de la hauteur. */
	aspect-ratio: 23 / 20;
}

/* Moins de tuiles = tuiles plus larges : on aplatit pour rester dans le plafond. */
.gdc-galerie--1 .gdc-galerie__tuile {
	aspect-ratio: 32 / 9;
}

.gdc-galerie--2 .gdc-galerie__tuile {
	aspect-ratio: 16 / 9;
}

.gdc-galerie--3 .gdc-galerie__tuile {
	aspect-ratio: 4 / 3;
}

.gdc-galerie__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------- Haut de fiche (2 col) */

.gdc-fiche__haut {
	padding-top: 40px;
}

.gdc-fiche__haut-grille {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 64px;
	align-items: flex-start;
}

.gdc-fiche__colonne {
	flex: 1 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.gdc-avis-lien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--gdc-doux);
}

.gdc-avis-lien span:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------- Cartes infos parents */

.gdc-parents__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.gdc-carte-info {
	background: var(--gdc-surface);
	border: 1px solid var(--gdc-bord);
	padding: 18px;
}

.gdc-carte-info--large {
	grid-column: 1 / -1;
	padding: 18px 20px 20px;
}

.gdc-carte-info__icone {
	font-size: 1.625rem;
}

.gdc-carte-info .gdc-label {
	margin: 10px 0 4px;
}

.gdc-carte-info__valeur {
	font-family: var(--gdc-display);
	font-size: 1.3125rem;
	letter-spacing: 0.02em;
	margin: 0;
}

.gdc-carte-info__detail {
	font-size: 0.875rem;
	color: var(--gdc-doux);
	margin: 2px 0 0;
}

.gdc-lieux {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	margin-top: 14px;
}

.gdc-lieu {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	gap: 16px;
	align-items: center;
}

.gdc-lieu__nom {
	font-family: var(--gdc-display);
	font-size: 1.3125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}

.gdc-lieu__adresse {
	font-size: 0.875rem;
	color: var(--gdc-doux);
	margin: 4px 0 0;
}

.gdc-carte {
	flex: 0 0 88px;
	width: 88px;
	height: auto;
	display: block;
}

.gdc-carte polygon {
	fill: rgba(255, 255, 255, 0.07);
	stroke: rgba(255, 255, 255, 0.32);
	stroke-width: 0.11;
	stroke-linejoin: round;
}

.gdc-carte__halo {
	fill: rgba(214, 38, 48, 0.35);
}

.gdc-carte__point {
	fill: var(--gdc-red);
}

/* -------------------------------------------------------- Bloc de réservation */

.gdc-resa {
	flex: 0 0 440px;
	max-width: 100%;
	background: var(--gdc-surface);
	border: 1px solid var(--gdc-bord-fort);
	align-self: flex-start;
}

.gdc-resa__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: var(--gdc-red);
}

.gdc-resa__titre {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--gdc-display);
	font-size: 1.0625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gdc-places {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--gdc-display);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	background: #fff;
	color: var(--gdc-red);
	padding: 5px 12px;
	white-space: nowrap;
}

.gdc-resa__corps {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.gdc-groupe {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.gdc-groupe--attention {
	animation: gdc-attention 0.4s ease 3;
}

@keyframes gdc-attention {
	50% {
		box-shadow: 0 0 0 2px var(--gdc-amber);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdc-groupe--attention {
		animation: none;
		box-shadow: 0 0 0 2px var(--gdc-amber);
	}
}

/* ------------------------------------------------------- Options (cartes/puces) */

.gdc-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gdc-options--2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.gdc-options--3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/*
 * La rangée réunit une option et son bouton info, et porte la couleur du stage.
 * Le bouton est un frère de l'option, jamais son enfant : un <button> dans un
 * <label> détournerait le clic, et dans un <button> miroir il serait invalide.
 */
.gdc-rangee {
	position: relative;
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.gdc-rangee > .gdc-option {
	flex: 1 1 auto;
	min-width: 0;
}

/* La rangée qui porte un bouton info lui réserve sa place dans l'encart, pour
   que la coche de sélection ne vienne pas se poser dessous. */
.gdc-rangee--info .gdc-option__corps {
	padding-right: 40px;
}

/* --------------------------------------------------------- Session complète */

/*
 * Une date pleine reste affichée : la masquer ferait croire qu'elle n'existe
 * pas, alors qu'elle est simplement prise. Elle est donc montrée, atténuée, et
 * son input est réellement `disabled` — ni la souris, ni le clavier, ni un envoi
 * sans JavaScript ne peuvent la retenir.
 */
.gdc-rangee--complet {
	cursor: not-allowed;
}

.gdc-rangee--complet .gdc-option {
	pointer-events: none;
}

.gdc-rangee--complet .gdc-option__corps {
	opacity: 0.45;
	background: none;
}

.gdc-rangee--complet .gdc-option__date {
	text-decoration: line-through;
}

/*
 * Places restantes d'une date. Volontairement discret et sans fond : c'est une
 * information, pas une alarme — et il n'apparaît qu'en dessous du seuil, donc sa
 * seule présence dit déjà qu'il faut se décider.
 */
.gdc-places-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	font-family: var(--gdc-display);
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: var(--gdc-orange);
	white-space: nowrap;
}

/* La coche prend sa place à la sélection : les deux ne cohabitent pas. */
.gdc-option > input:checked + .gdc-option__corps .gdc-places-date {
	display: none;
}

.gdc-option--miroir.is-actif .gdc-places-date {
	display: none;
}

.gdc-etiquette-complet {
	flex-shrink: 0;
	font-family: var(--gdc-display);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gdc-texte);
	background: rgba(255, 255, 255, 0.14);
	padding: 3px 8px;
	white-space: nowrap;
}

/*
 * L'option est un <label> contenant un vrai radio/checkbox : le formulaire reste
 * fonctionnel sans JavaScript, et l'apparence de carte est purement CSS.
 */
.gdc-option {
	display: block;
	cursor: pointer;
	margin: 0;
}

.gdc-option > input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.gdc-option__corps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--gdc-bord-fort);
	transition: background 0.15s ease, border-color 0.15s ease;
}

.gdc-option:hover .gdc-option__corps {
	background: rgba(255, 255, 255, 0.09);
}

.gdc-option > input:checked + .gdc-option__corps {
	background: var(--gdc-surface-forte);
	border-color: var(--gdc-puce, var(--gdc-blue));
}

.gdc-option > input:focus-visible + .gdc-option__corps {
	outline: 2px solid var(--gdc-blue);
	outline-offset: 2px;
}

.gdc-option__label {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.gdc-option__texte {
	min-width: 0;
}

.gdc-option__date {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
}

.gdc-option__sous {
	display: block;
	font-size: 0.75rem;
	color: var(--gdc-doux);
}

.gdc-option__coche {
	font-size: 1.25rem;
	color: var(--gdc-puce, var(--gdc-blue));
	opacity: 0;
	flex-shrink: 0;
	transition: opacity 0.15s ease;
}

.gdc-option > input:checked + .gdc-option__corps .gdc-option__coche {
	opacity: 1;
}

.gdc-puce {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background: var(--gdc-puce, var(--gdc-accent));
	transform: skewX(-8deg);
}

/* Le lieu porte une icône, pas une puce : sa couleur d'accent reste le bleu. */
.gdc-option--lieu {
	--gdc-puce: var(--gdc-blue);
}

/*
 * La couleur du stage ne sort qu'à la sélection : une date non retenue porte le
 * même filet que toutes les autres boîtes de la page (cartes « infos parents »,
 * bonus, jours du programme). C'est ce filet neutre qui dit « à choisir » et la
 * couleur qui dit « choisi » — sans quoi quatre bordures colorées se disputent
 * l'attention et plus rien ne signale ce qui est effectivement retenu.
 */
.gdc-option--stage .gdc-option__corps {
	border-color: var(--gdc-bord);
}

/* Retenue : couleur du stage, plus un liseré intérieur pour l'épaissir sans
   décaler la carte d'un pixel (une bordure de 2 px déplacerait son contenu). */
.gdc-option--stage > input:checked + .gdc-option__corps,
.gdc-option--miroir.gdc-option--stage.is-actif .gdc-option__corps {
	box-shadow: inset 0 0 0 1px var(--gdc-puce, var(--gdc-blue));
}

/* Boutons miroirs de la barre : même apparence, état porté par aria-checked.
   L'ancêtre .gdc-fiche est nécessaire — le thème habille tout <button> en rouge
   plein arrondi par un sélecteur qui bat une classe seule, et les cartes du
   panneau de la barre en héritaient. */
.gdc-fiche .gdc-option--miroir {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	width: 100%;
}

.gdc-option--miroir.is-actif .gdc-option__corps {
	background: var(--gdc-surface-forte);
	border-color: var(--gdc-puce, var(--gdc-blue));
}

.gdc-option--miroir.is-actif .gdc-option__coche {
	opacity: 1;
}

/* ------------------------------------------------- Bouton info d'une option */

/*
 * Il n'ouvre la modale qu'avec JavaScript : tant que le script n'a pas pris la
 * main, il n'existe pas. Proposer une commande inopérante vaut moins que ne rien
 * proposer, et le programme reste de toute façon lisible plus bas dans la page.
 */
/*
 * Discret et posé dans l'encart de la date, pas à côté : il commente l'option,
 * il ne rivalise pas avec elle. Absolu plutôt qu'en flux, parce qu'il doit rester
 * frère du <label> — un <button> dans un <label> détournerait le clic — tout en
 * paraissant dedans. La rangée qui en porte un réserve sa place par
 * `--gdc-place-info`, ce qui évite un `:has()` et garde le calcul explicite.
 *
 * Le thème habille tout <button> en rouge plein arrondi via un sélecteur qui bat
 * une classe seule : d'où l'ancêtre .gdc-fiche, comme pour .gdc-cta.
 */
.gdc-fiche .gdc-info {
	display: none;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	color: var(--gdc-terne);
	background: none;
	border: 0;
	border-radius: 0;
	transition: color 0.15s ease;
}

.gdc-fiche.gdc-js .gdc-info {
	display: flex;
}

.gdc-fiche .gdc-info:hover,
.gdc-fiche .gdc-info:focus-visible {
	color: var(--gdc-texte);
}

.gdc-info > i {
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ Prix / CTA */

.gdc-prix {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 18px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.gdc-prix__actuel {
	font-family: var(--gdc-display);
	font-size: 2.625rem;
	line-height: 1;
	letter-spacing: 0.01em;
}

.gdc-prix__unitaire {
	font-size: 0.8125rem;
	color: var(--gdc-doux);
}

.gdc-fiche .gdc-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: 17px 20px;
	font-family: var(--gdc-display);
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--gdc-red);
	transition: background 0.15s ease;
}

.gdc-fiche .gdc-cta:hover:not([disabled]) {
	background: #b81f28;
}

.gdc-fiche .gdc-cta[disabled] {
	background: #4a3f63;
	color: var(--gdc-doux);
	cursor: not-allowed;
}

.gdc-reassurance {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	font-size: 0.8125rem;
	color: var(--gdc-doux);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gdc-reassurance li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.gdc-resa__tel {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 14px;
	font-size: 0.8125rem;
	color: var(--gdc-doux);
	margin: 0;
}

.gdc-resa__tel a {
	color: var(--gdc-blue);
	font-weight: 600;
}

/* ------------------------------------------------------ Section claire « en bref » */

.gdc-bref {
	background: #fff;
	color: var(--gdc-navy);
	margin-top: 56px;
}

.gdc-bref__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 48px;
	align-items: start;
	padding-top: 52px;
	padding-bottom: 52px;
}

.gdc-bref .gdc-titre {
	color: var(--gdc-navy);
}

.gdc-bref__texte {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #3a2e55;
	margin: 0 0 12px;
	text-wrap: pretty;
}

.gdc-piliers {
	display: grid;
	gap: 10px;
}

.gdc-pilier {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #f4f1fa;
	padding: 16px 18px;
	border-left: 3px solid var(--gdc-pilier, var(--gdc-red));
}

.gdc-pilier__icone {
	font-size: 1.625rem;
	margin-top: 2px;
}

.gdc-pilier__titre {
	font-family: var(--gdc-display);
	font-size: 1.125rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 4px;
	color: var(--gdc-navy);
}

.gdc-pilier__texte {
	font-size: 0.9375rem;
	color: #3a2e55;
	line-height: 1.5;
	margin: 0;
}

/* ---------------------------------------------------------------- Programme */

.gdc-jours {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
}

/* Le liseré et le nom du jour portent la couleur du stage : c'est le bloc
   .gdc-programme (ou la modale) qui la fournit, chacun ayant la sienne. */
.gdc-jour {
	background: var(--gdc-surface);
	border: 1px solid var(--gdc-bord);
	border-top: 3px solid var(--gdc-accent);
	padding: 18px 16px 20px;
}

.gdc-jour__nom {
	font-family: var(--gdc-display);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gdc-accent);
	margin: 0 0 10px;
}

.gdc-jour__titre {
	overflow-wrap: break-word;
	font-family: var(--gdc-display);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0 0 10px;
}

.gdc-jour__detail {
	font-size: 0.875rem;
	color: var(--gdc-doux);
	line-height: 1.55;
}

.gdc-jour__detail p {
	margin: 0 0 10px;
}

.gdc-jour__detail p:last-child {
	margin-bottom: 0;
}

.gdc-jour__detail strong {
	display: block;
	color: var(--gdc-texte);
	font-weight: 600;
}

/* -------------------------------------------------------------------- Bonus */

.gdc-bonus {
	background: rgba(0, 143, 204, 0.1);
	border: 1px solid rgba(0, 143, 204, 0.45);
	padding: 26px;
}

.gdc-bonus__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
	margin-top: 20px;
}

.gdc-bonus__liste {
	flex: 1 1 560px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gdc-bonus__item {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	background: var(--gdc-surface);
	border: 1px solid var(--gdc-bord);
	padding: 16px 18px;
}

.gdc-bonus__item > i {
	font-size: 1.5rem;
	margin-top: 2px;
}

.gdc-bonus__titre {
	font-family: var(--gdc-display);
	font-size: 1.0625rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 3px;
}

.gdc-bonus__texte {
	font-size: 0.875rem;
	color: var(--gdc-doux);
	line-height: 1.5;
	margin: 0;
}

.gdc-exclu {
	flex: 0 1 320px;
	border: 1px solid var(--gdc-bord);
	padding: 20px;
}

.gdc-exclu__liste {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 0.875rem;
	color: var(--gdc-doux);
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.gdc-exclu__liste li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.gdc-exclu__liste i {
	color: #6e6488;
}

/* ---------------------------------------------------------------------- FAQ */

.gdc-faq {
	border-top: 1px solid var(--gdc-bord);
	margin-top: 18px;
}

.gdc-faq__item {
	border-bottom: 1px solid var(--gdc-bord);
}

.gdc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 2px;
	font-family: var(--gdc-display);
	font-size: 1.0625rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.gdc-faq__question::-webkit-details-marker {
	display: none;
}

.gdc-faq__chevron {
	font-size: 1.25rem;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.gdc-faq__item[open] .gdc-faq__chevron {
	transform: rotate(180deg);
}

.gdc-faq__reponse {
	padding: 0 2px 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--gdc-doux);
}

.gdc-faq__reponse p {
	margin: 0;
}

/* ------------------------------------------------------------ Barre collante */

.gdc-barre {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	background: rgba(17, 5, 44, 0.97);
	border-top: 1px solid var(--gdc-bord-fort);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
	transform: translateY(110%);
	transition: transform 0.26s ease;
	pointer-events: none;
	color: var(--gdc-texte);

	/*
	 * Aucun jeton n'est redéclaré ici : la barre est un descendant DOM de
	 * .gdc-fiche et hérite donc de tout, gouttière responsive comprise. La
	 * redéclarer figerait la gouttière à 32 px sur mobile, et la largeur
	 * minimale de la ligne d'actions ferait alors déborder la page.
	 */
}

.gdc-barre--visible {
	transform: translateY(0);
	pointer-events: auto;
}

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

.gdc-barre__panneau {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	max-height: 60vh;
	overflow-y: auto;
}

.gdc-barre__panneau-grille {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 40px;
	align-items: flex-end;
	padding-top: 22px;
	padding-bottom: 22px;
}

.gdc-barre__groupe {
	flex: 0 1 220px;
}

.gdc-barre__groupe--large {
	flex: 1 1 480px;
	min-width: 0;
}

.gdc-fiche .gdc-barre__reduire {
	display: flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 0;
	color: var(--gdc-texte);
	padding: 10px 14px;
	font-family: var(--gdc-display);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.gdc-barre__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.gdc-barre__produit {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.gdc-barre__accent {
	width: 12px;
	height: 34px;
	background: var(--gdc-accent);
	flex-shrink: 0;
	transform: skewX(-8deg);
}

.gdc-barre__textes {
	min-width: 0;
}

.gdc-barre__nom {
	font-family: var(--gdc-display);
	font-size: 1.0625rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

.gdc-barre__note {
	font-size: 0.8125rem;
	color: var(--gdc-doux);
	margin: 0;
}

.gdc-barre__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
	/* min-width: auto ferait remonter la largeur mini du prix et du bouton
	   jusqu'à la barre, qui est en position fixed : la page déborderait. */
	min-width: 0;
}

.gdc-barre__places {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--gdc-display);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	color: var(--gdc-orange);
	white-space: nowrap;
}

.gdc-barre__prix {
	text-align: right;
	white-space: nowrap;
}

.gdc-barre__montant {
	font-family: var(--gdc-display);
	font-size: 1.625rem;
	letter-spacing: 0.01em;
}


.gdc-barre .gdc-cta--barre {
	width: auto;
	padding: 14px 24px;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	font-family: var(--gdc-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--gdc-red);
}

.gdc-barre .gdc-cta--barre[disabled] {
	background: #4a3f63;
	color: var(--gdc-doux);
	cursor: not-allowed;
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.gdc-resa {
		flex: 1 1 100%;
	}
}

@media (max-width: 900px) {
	.gdc-fiche {
		--gdc-gouttiere: 20px;
		padding-bottom: 150px;
	}

	.gdc-galerie--3,
	.gdc-galerie--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gdc-fiche__haut-grille {
		gap: 32px;
	}

	.gdc-bref__grille {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.gdc-barre__actions {
		gap: 12px;
	}

	.gdc-barre__places {
		display: none;
	}
}

@media (max-width: 600px) {
	.gdc-galerie__tuile {
		aspect-ratio: 4 / 3;
	}

	.gdc-options--2 {
		grid-template-columns: 1fr;
	}

	.gdc-reassurance {
		grid-template-columns: 1fr;
	}

	.gdc-bonus {
		padding: 18px;
	}

	.gdc-barre__ligne {
		flex-wrap: wrap;
		gap: 10px;
	}

	.gdc-barre__produit {
		flex: 1 1 100%;
	}

	.gdc-barre__actions {
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
	}

	.gdc-barre__prix {
		flex: 0 0 auto;
	}

	.gdc-barre .gdc-cta--barre {
		flex: 1 1 100%;
		padding: 13px 16px;
	}
}

/* ------------------------------------- Neutralisations WooCommerce / Elementor */

.gdc-fiche .woocommerce-breadcrumb {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* WooCommerce impose ses marges et ses fonds aux formulaires panier. */
.gdc-fiche form.cart::before,
.gdc-fiche form.cart::after {
	content: none;
}

.gdc-fiche .woocommerce-notices-wrapper,
.gdc-fiche .woocommerce-error,
.gdc-fiche .woocommerce-message,
.gdc-fiche .woocommerce-info {
	margin: 0 20px;
	font-size: 0.875rem;
}

.gdc-fiche .woocommerce-error {
	background: rgba(214, 38, 48, 0.18);
	border-top-color: var(--gdc-red);
	color: var(--gdc-texte);
	list-style: none;
}

.gdc-fiche .woocommerce-message {
	background: rgba(0, 194, 168, 0.16);
	border-top-color: var(--gdc-teal);
	color: var(--gdc-texte);
}

.gdc-fiche .woocommerce-error a,
.gdc-fiche .woocommerce-message a {
	color: var(--gdc-blue);
}

/* Le prix est reconstruit par la fiche : la mise en forme de Woo ne doit pas s'y appliquer. */
.gdc-fiche .gdc-prix .woocommerce-Price-amount,
.gdc-fiche .gdc-barre__prix .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* ------------------------------------------- Priorité sur les titres du kit Elementor */

/*
 * Le kit Elementor style les titres via « .elementor-kit-8 h1 » (spécificité
 * 0,1,1), qui l'emporte sur une classe seule (0,1,0) : nos h1/h2/h3 repassaient
 * donc en Poppins 65 px. Les règles portées par un élément de titre sont
 * redéclarées ici avec l'ancêtre .gdc-fiche (0,2,0), pour gagner par
 * spécificité plutôt qu'à coups de !important.
 */
.gdc-fiche .gdc-titre {
	font-family: var(--gdc-display);
	font-weight: 400;
	letter-spacing: 0.015em;
	line-height: 1.04;
	text-transform: uppercase;
	margin: 0;
}

.gdc-fiche .gdc-titre--h1 {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	margin-bottom: 14px;
}

.gdc-fiche .gdc-titre--h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.35rem);
	margin-bottom: 16px;
}

.gdc-fiche .gdc-titre--h3 {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.gdc-fiche .gdc-soustitre {
	font-family: var(--gdc-display);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin: 0 0 14px;
}

.gdc-fiche .gdc-jour__titre {
	font-family: var(--gdc-display);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0 0 10px;
}

.gdc-fiche .gdc-bref .gdc-titre {
	color: var(--gdc-navy);
}

/* ----------------------------------------------- Stage imposé (premier d'un pack) */

/*
 * Le premier stage d'un pack est le prochain au calendrier : il est affiché, pas
 * proposé. Ce n'est donc pas un champ de formulaire — d'où le trait discontinu et
 * le cadenas, qui le distinguent des cartes cliquables.
 *
 * Sa bordure porte la couleur pleine de son stage — le JS pose le jeton sur ce
 * bloc au changement de lieu. C'est le même code couleur que les options à
 * choisir, à ceci près qu'elles restent atténuées tant qu'on ne les retient pas :
 * le stage verrouillé, lui, est acquis.
 */
.gdc-impose {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px dashed var(--gdc-puce, var(--gdc-bord-fort));
}

.gdc-impose__texte {
	min-width: 0;
	flex: 1;
}

.gdc-impose__date {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
}

.gdc-impose__sous {
	display: block;
	font-size: 0.75rem;
	color: var(--gdc-doux);
}

.gdc-impose__cadenas {
	font-size: 0.875rem;
	flex-shrink: 0;
}

.gdc-impose--barre {
	border-style: solid;
}

/* --------------------------------------------------- Programme du stage imposé */

.gdc-programme__stage {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 0.9375rem;
	color: var(--gdc-doux);
}

.gdc-programme__stage strong {
	color: var(--gdc-texte);
	font-weight: 600;
}

/* ------------------------------------------ Modale « programme d'un stage » */

/*
 * Le <dialog> ouvert par showModal() apporte le piège de focus, la touche Échap
 * et le fond assombri. La règle ci-dessous ne fait que doubler le comportement
 * natif : sans elle, un navigateur qui ignore l'élément afficherait tous les
 * programmes en pleine page.
 */
.gdc-fiche dialog:not([open]) {
	display: none;
}

/*
 * Le dialogue occupe tout l'écran et centre sa boîte, plutôt que d'être lui-même
 * la boîte : le clic à côté atteint alors le <dialog>, ce qui suffit au JS pour
 * fermer sans avoir à mesurer quoi que ce soit.
 */
.gdc-modal {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 24px;
	border: 0;
	background: transparent;
	color: var(--gdc-texte);
	overflow: auto;
	overscroll-behavior: contain;
}

.gdc-modal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gdc-modal::backdrop {
	background: rgba(8, 2, 20, 0.78);
}

.gdc-modal__boite {
	width: 100%;
	max-width: 900px;
	max-height: 100%;
	overflow: auto;
	background: var(--gdc-navy);
	border: 1px solid var(--gdc-bord-fort);
	border-top: 3px solid var(--gdc-accent);
	padding: 24px;
}

.gdc-modal__entete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.gdc-fiche .gdc-modal__fermer {
	flex: 0 0 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	font-size: 1.125rem;
	color: var(--gdc-doux);
	background: var(--gdc-surface);
	border: 1px solid var(--gdc-bord-fort);
	border-radius: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.gdc-fiche .gdc-modal__fermer:hover {
	color: var(--gdc-texte);
	background: var(--gdc-surface-forte);
}

@media (max-width: 600px) {
	.gdc-modal {
		padding: 0;
	}

	.gdc-modal__boite {
		height: 100%;
		max-height: none;
		padding: 20px 16px;
	}
}