/**
 * Bloc « Recevoir le programme » — PLUS SEPT.
 *
 * Feuille jumelle de « ps7-inter-formulaire.css » : mêmes conventions, même
 * palette, même doctrine. Toutes les règles sont préfixées « ps7-inter-prog- »
 * et portées par le conteneur .ps7-inter-prog. Elles ne peuvent atteindre ni le
 * tableau des sessions, ni le formulaire d'inscription, qui peuvent tous deux
 * cohabiter avec ce bloc sur la même page.
 *
 * LA PALETTE EST REDÉCLARÉE ICI, et ce n'est pas une redite paresseuse : ce
 * bloc s'affiche sur la page d'une formation, où ni le tableau ni le formulaire
 * ne sont forcément présents. Hériter de leurs variables reviendrait à dépendre
 * d'une feuille qui n'est peut-être pas chargée.
 *
 * PRIORITÉ DES DÉCLARATIONS — même règle que la feuille jumelle : les
 * propriétés qui portent l'identité visuelle sont marquées « !important »,
 * parce que le thème et ses extensions posent les leurs sur les champs, les
 * boutons et les paragraphes. Espacements, dimensions et arrondis restent
 * ordinaires, pour rester ajustables sans lutte.
 *
 * @package PlusSept\Interentreprises
 */

.ps7-inter-prog {
	--ps7-marine: #011256;
	--ps7-bleu: #0D71C3;
	--ps7-encre: #1D1D1F;
	--ps7-trait: #E3EAF3;
	--ps7-page: #F5F5F7;
	--ps7-gris: #5A5A61;
	--ps7-lisere: #8E8E93;
	--ps7-rouge: #C0271C;
	--ps7-police-texte: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
	--ps7-police-titre: 'Plus Jakarta Sans', Helvetica, Arial, Lucida, sans-serif;

	color: var(--ps7-encre);
	font-family: var(--ps7-police-texte);
}

/* ------------------------------------------------------------------
   Le dépliant.

   Bâti sur <details>, et non sur un bloc masqué par script : sans
   JavaScript, un bloc masqué reste masqué et la fonction disparaît
   sans bruit. Voir l'en-tête de class-ps7-inter-programme.php.
   ------------------------------------------------------------------ */

.ps7-inter-prog__pli {
	margin: 0;
}

/*
 * Le déclencheur EST le <summary>, et il reprend LE BOUTON DIVI DE LA PAGE.
 *
 * MESURÉ, PAS APPROCHÉ. Relevé le 14.08.2026 sur le bouton « Voir les dates et
 * s'inscrire » de
 * /formations-interentreprises/formation-techniques-de-vente/, thème chargé :
 *
 *   background-color  rgb(13, 113, 195)      →  #0D71C3
 *   color             rgb(255, 255, 255)
 *   font-family       Montserrat, Helvetica, Arial, Lucida, sans-serif
 *   font-size         16px
 *   font-weight       600
 *   line-height       27.2px                 →  1.7 × 16px
 *   padding           12px 25px
 *   border            0
 *   border-radius     5px
 *   text-transform    none
 *   letter-spacing    normal
 *   transition        all 0.2s
 *
 * LE CORPS EST EN PIXELS, ET C'EST UNE ENTORSE ASSUMÉE à la règle « une seule
 * taille, 1em » du reste de l'extension. Le texte courant de ces pages est à
 * 17 px ; « 1em » donnerait donc 17 px, et le bouton ne serait plus identique à
 * son voisin. La demande était de reprendre EXACTEMENT sa mise en forme.
 *
 * Ce bouton n'est plus secondaire. Sur la page d'une formation, l'action
 * principale est « Voir les dates et s'inscrire » : les deux boutons se
 * ressemblent désormais, et c'est ce qui a été demandé.
 */
.ps7-inter-prog__declencheur {
	display: inline-block;
	padding: 12px 25px;
	background-color: var(--ps7-bleu) !important;
	color: #FFFFFF !important;
	font-family: var(--ps7-police-texte) !important;
	font-size: 16px;
	font-weight: 600 !important;
	line-height: 1.7;
	text-align: center;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: 0 !important;
	border-radius: 5px;
	cursor: pointer;
	list-style: none;
	transition: all 0.2s;
}

/* Le triangle natif du <summary>, retiré sur les deux moteurs : le déclencheur
   doit se lire comme un bouton, et un bouton n'a pas de chevron d'arborescence. */
.ps7-inter-prog__declencheur::-webkit-details-marker {
	display: none;
}

.ps7-inter-prog__declencheur::marker {
	content: '';
}

/*
 * LE SURVOL N'EST PAS RECOPIÉ DU BOUTON DIVI, et c'est délibéré.
 *
 * Les trois règles de survol qui s'appliquent à ce bouton sur le site donnent,
 * relevées dans les feuilles le 14.08.2026 :
 *
 *   background-color: rgba(110, 186, 1, 0.2);
 *   color: #FFFFFF !important;
 *   padding: 0.3em 2em 0.3em 0.7em;
 *
 * Deux raisons de ne pas les reprendre. Le fond vert à 20 % composé sur du
 * blanc donne rgb(226, 241, 204) ; du texte blanc dessus tient 1,25 : 1, très
 * en dessous des 4,5 : 1 exigés — le libellé disparaîtrait au survol. Et le
 * changement de remplissage ménage la place d'une flèche animée que Divi
 * dessine avec sa police ETmodules, que l'extension n'a pas : le bouton se
 * contenterait de sauter.
 *
 * On garde donc le survol de la maison — marine, lisible — et l'onglet
 * « Programmes » offre deux champs pour poser autre chose sans toucher au code.
 */
.ps7-inter-prog__declencheur:hover,
.ps7-inter-prog__declencheur:focus {
	background-color: var(--ps7-marine) !important;
	color: #FFFFFF !important;
}

.ps7-inter-prog__declencheur:focus-visible {
	outline: 2px solid var(--ps7-bleu);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Le formulaire.
   ------------------------------------------------------------------ */

.ps7-inter-prog__form {
	max-width: 34em;
	margin: 18px 0 0;
	padding: 26px;
	background-color: #FFFFFF !important;
	border: 1px solid var(--ps7-trait) !important;
	border-radius: 10px;
}

.ps7-inter-prog__cle {
	margin: 0 0 20px;
	font-size: 0.78em;
	color: var(--ps7-gris) !important;
}

/*
 * LE CHAMP PIÈGE N'EST PAS « display: none ».
 *
 * Une partie des robots ignorent les champs en display:none, précisément parce
 * que c'est le piège le plus connu. Le champ est donc rendu, mais sorti du
 * cadre visible et retiré du flux — il occupe zéro pixel et ne peut pas
 * recevoir le focus, mais il existe pour qui lit le HTML sans lire le CSS.
 */
.ps7-inter-prog__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ps7-inter-prog__champ {
	margin: 0 0 20px;
}

.ps7-inter-prog__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ps7-inter-prog__libelle {
	display: block;
	margin: 0 0 3px;
	font-size: 1em;
	font-weight: 600 !important;
	line-height: 1.3;
	color: var(--ps7-encre) !important;
}

/* L'astérisque des champs obligatoires est posée par le CSS, jamais dans la
   chaîne traduite : un libellé qui la porterait la ferait aussi lire aux
   lecteurs d'écran, où elle n'a aucun sens. */
.ps7-inter-prog__champ--requis .ps7-inter-prog__libelle::after {
	content: ' *';
}

/*
 * Champ de saisie : fond transparent, liseré BAS SEUL, aucun arrondi. La
 * déclaration de police est nécessaire — les contrôles de formulaire
 * n'héritent ni de la police ni de la taille du document.
 */
.ps7-inter-prog__saisie {
	display: block;
	width: 100%;
	padding: 6px 2px;
	background-color: transparent !important;
	color: var(--ps7-encre) !important;
	font-family: var(--ps7-police-texte) !important;
	font-size: 1em;
	font-weight: 400 !important;
	line-height: 1.3;
	border: none !important;
	border-bottom: 1px solid var(--ps7-lisere) !important;
	border-radius: 0;
	box-shadow: none;
}

.ps7-inter-prog__saisie:focus {
	outline: none;
	border-bottom: 2px solid var(--ps7-marine) !important;
	padding-bottom: 5px;
}

.ps7-inter-prog__saisie:focus-visible {
	outline: 2px solid var(--ps7-marine);
	outline-offset: 3px;
}

.ps7-inter-prog__aide {
	margin: 5px 0 0;
	font-size: 0.78em;
	font-weight: 400 !important;
	line-height: 1.45;
	color: var(--ps7-gris) !important;
}

/* ------------------------------------------------------------------
   La case de consentement.
   ------------------------------------------------------------------ */

.ps7-inter-prog__cases {
	margin: 24px 0 0;
	padding: 14px 16px;
	background-color: var(--ps7-page) !important;
	border-radius: 8px;
}

.ps7-inter-prog__case {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 11px;
	align-items: start;
	cursor: pointer;
}

.ps7-inter-prog__case input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
}

.ps7-inter-prog__case-texte {
	font-size: 1em;
	line-height: 1.35;
	color: var(--ps7-encre) !important;
}

.ps7-inter-prog__case-aide {
	display: block;
	margin-top: 4px;
	font-size: 0.78em;
	color: var(--ps7-gris) !important;
}

/* ------------------------------------------------------------------
   Boutons et avis.
   ------------------------------------------------------------------ */

.ps7-inter-prog__actions {
	margin-top: 24px;
}

.ps7-inter-prog__bouton {
	display: inline-block;
	padding: 14px 30px;
	background-color: var(--ps7-bleu) !important;
	color: #FFFFFF !important;
	font-family: var(--ps7-police-texte) !important;
	font-size: 1em;
	font-weight: 600 !important;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	border: 2px solid var(--ps7-bleu) !important;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Survol : marine de la charte, et RIEN D'AUTRE ne bouge. Un bouton qui se
   déplace sous le pointeur donne l'impression d'avoir été cliqué avant de
   l'être. Même règle que la feuille jumelle. */
.ps7-inter-prog__bouton:hover,
.ps7-inter-prog__bouton:focus {
	background-color: var(--ps7-marine) !important;
	border-color: var(--ps7-marine) !important;
	color: #FFFFFF !important;
}

.ps7-inter-prog__avis {
	max-width: 34em;
	margin: 0;
	padding: 18px 20px !important;
	background-color: var(--ps7-page) !important;
	border: 2px solid var(--ps7-gris);
	border-radius: 8px;
	font-size: 1em;
	line-height: 1.45;
	color: var(--ps7-encre) !important;
}

.ps7-inter-prog__avis p {
	margin: 0;
	padding: 0 !important;
	color: inherit !important;
}

.ps7-inter-prog__avis p + p {
	margin-top: 8px;
}

/* Succès : le fond #EAF6E4 garde 15,3 : 1 avec l'encre, la bordure #219A00
   donne 3,7 : 1 sur blanc — au-dessus des 3 : 1 exigés pour un contour. La
   couleur ne dit rien à elle seule : le texte annonce toujours ce qui s'est
   passé, en toutes lettres. */
.ps7-inter-prog__avis--succes {
	border-color: #219A00 !important;
	background-color: #EAF6E4 !important;
}

.ps7-inter-prog__avis--erreur {
	border-color: var(--ps7-rouge) !important;
	background-color: #FBECEB !important;
}

/* ------------------------------------------------------------------
   Sous 600 px, les deux champs de la ligne « Prénom / Nom » se
   superposent : côte à côte, ils tomberaient chacun sous les dix
   caractères visibles.
   ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.ps7-inter-prog__duo {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ps7-inter-prog__form {
		padding: 20px 16px;
	}

	.ps7-inter-prog__declencheur,
	.ps7-inter-prog__bouton {
		display: block;
		width: 100%;
	}
}