/*
 * Porte d'entrée de campagne — feuille de style.
 *
 * Reprise de la maquette validée par Michelot le 2026-08-15, RETOUCHÉE le
 * 2026-08-17 (`PROMPT-06` T7, D-P-04) pour deux registres visuels distincts,
 * un par institution, sur la MÊME ossature de gabarit (`gabarits/porte.php`,
 * inchangé au-delà du héros et du renvoi). Écarts volontaires, tous pour la
 * même raison : une maquette est une page entière, un greffon n'est qu'un
 * morceau de page.
 *
 *  1. TOUT est portée par « .camp-porte ». La maquette stylait « body », « * »,
 *     « button », « select », « input » et « form » sans portée : posé tel quel
 *     dans un greffon, cela repeindrait les formulaires du thème et des ~20
 *     sites clients de rektora-sites. Les noms de classe sont préfixés
 *     « camp- » pour la même raison.
 *  2. Les blocs de recette de la maquette (bandeau d'avertissement, étiquette
 *     de page, bilan, séparateur entre les deux pages) ne sont pas repris :
 *     ils servaient à la validation, pas au public.
 *  3. La palette n'est pas ici. Elle est posée en ligne par PHP depuis
 *     « camp_institution_config() » : une seule source de vérité pour les
 *     couleurs, et pas deux palettes concurrentes dans un même fichier. Le
 *     visuel de héros (`--camp-visuel`) suit la même règle, désormais posé
 *     UNIQUEMENT pour l'IUAC (`includes/porte.php`, `camp_palette_css()`).
 *
 * Les couleurs neutres, elles, sont bien ici, verbatim de la maquette, clair et
 * sombre. Le thème hôte ne fournit pas de palette utilisable pour cette page.
 *
 * TYPOGRAPHIE -- `PROMPT-06` T7 : Archivo (titres) et Source Sans 3 (corps),
 * mesurées en direct le 2026-08-17 dans les actifs de `rektora-sites`
 * (`includes/enqueue.php`, jetons `--f-heading` / `--f-body`) sur les DEUX
 * sites -- ce n'était donc pas la police qui divergeait entre les deux
 * gabarits, mais l'usage d'une police tierce (Georgia / system-ui) non
 * alignée sur le produit. Ces deux familles sont nommées ici en DUR, sans
 * référencer les variables internes de `rektora-sites` (`--f-heading` etc.) :
 * le greffon reste autonome de ses variables internes (D-P-01), comme il l'est
 * déjà de ses fonctions PHP. Aucun fichier de police n'est embarqué ici.
 */

.camp-porte {
	--camp-encre: #121a24;
	--camp-encre-douce: #41505f;
	--camp-gris: #6d7c8b;
	--camp-fond: #ffffff;
	--camp-surface: #f5f8fb;
	--camp-bord: #dde5ed;
	--camp-att-fond: #fdf4e3;
	--camp-att-bord: #dfb877;
	--camp-att-texte: #7a4d06;
	--camp-titres: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--camp-corps: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	background: var(--camp-fond);
	color: var(--camp-encre);
	font-family: var(--camp-corps);
	font-size: 17px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .camp-porte {
		--camp-encre: #e9eff6;
		--camp-encre-douce: #b6c4d2;
		--camp-gris: #8d9cab;
		--camp-fond: #070f19;
		--camp-surface: #0e1b29;
		--camp-bord: #1d2f42;
		--camp-att-fond: #2e2210;
		--camp-att-bord: #6b5220;
		--camp-att-texte: #f0cd8f;
	}
}

:root[data-theme="dark"] .camp-porte {
	--camp-encre: #e9eff6;
	--camp-encre-douce: #b6c4d2;
	--camp-gris: #8d9cab;
	--camp-fond: #070f19;
	--camp-surface: #0e1b29;
	--camp-bord: #1d2f42;
	--camp-att-fond: #2e2210;
	--camp-att-bord: #6b5220;
	--camp-att-texte: #f0cd8f;
}

.camp-porte *,
.camp-porte *::before,
.camp-porte *::after {
	box-sizing: border-box;
}

/*
 * DEFAUT TROUVE EN RECETTE, DEUX H1, DEPLOIEMENT PROMPT-07 SUR SITE REEL.
 *
 * `templates/variantes/page/standard.php` de `rektora-sites` (produit partage,
 * jamais modifie -- D-P-01) rend systematiquement
 * `<header class="rkt-section-titre"><h1><?php the_title(); ?></h1></header>`
 * pour toute page WordPress standard, y compris la page de campagne. Le
 * gabarit du greffon rend SON PROPRE h1 dans `.camp-hero` juste apres :
 * exactement le defaut « deux H1 » releve au `CONSTAT-03 §2` point 2 et cense
 * etre corrige par `PROMPT-06` T7, qui n'avait traite que la restructuration
 * INTERNE du hero sans donner le moyen de supprimer le bandeau natif du theme.
 *
 * Corrige ICI, dans le greffon, jamais dans `rektora-sites` : seul le theme
 * hote sait afficher ce bandeau, seul le greffon sait qu'il ne le veut pas
 * sur SA page. Cible uniquement le bandeau immediatement suivi d'un bloc
 * `.rkt-prose` qui contient `.camp-porte` -- aucune autre page du produit
 * partage n'est affectee.
 */
.rkt-section-titre:has(+ .rkt-prose .camp-porte) {
	display: none;
}

/*
 * DEFAUT TROUVE EN RECETTE, THEME SOMBRE, PROMPT-03.
 *
 * Ces trois regles ne posaient PAS de couleur : les titres heritaient donc de
 * celle du theme hote (#12263a sur generatepress + rektora-sites). En clair,
 * un fonce sur blanc, personne ne voyait rien. En SOMBRE, le greffon repeint
 * son fond en #070f19 et le theme, lui, garde son titre fonce : mesure a
 * 1,25:1 sur le fond de page et 1,13:1 dans le bloc de renvoi, contre 4,5:1
 * exiges. Les titres etaient illisibles.
 *
 * La correction n'invente aucune couleur : elle applique l'encre DEJA definie
 * plus haut dans ce fichier, verbatim de la maquette validee, et qui existait
 * precisement pour que cette page ne depende pas de la palette du theme.
 */
.camp-porte h1,
.camp-porte h2,
.camp-porte h3 {
	font-family: var(--camp-titres);
	text-wrap: balance;
	line-height: 1.2;
	margin: 0;
	color: var(--camp-encre);
}

.camp-porte p {
	margin: 0;
}

/*
 * PLEINE LARGEUR -- correctif du 2026-08-18, sur constat de Michelot devant les
 * deux pages en production : « tout doit être en pleine largeur et non encadré ».
 *
 * CE QUI SE PASSAIT, MESURÉ ET NON SUPPOSÉ. Le gabarit du thème rend la porte
 * dans `<main id="rkt-contenu" class="rkt-conteneur">` (`max-width: 1140px`),
 * lui-même contenant un `.rkt-prose` en `max-width: 720px`. `.camp-enveloppe`
 * déclarait `max-width: 1080px`, mais un enfant ne dépasse pas son parent : la
 * largeur réelle de la porte était donc **720 px** sur un écran de 1280. Le
 * héros -- fond noir côté INUFOCAD, photo côté IUAC -- se lisait comme une
 * bannière posée au milieu d'une page blanche, pas comme une page de campagne.
 *
 * La sortie de conteneur se fait ICI, sur `.camp-porte`, en un seul point :
 * chaque section garde ensuite son propre fond sur toute la largeur, et
 * `.camp-enveloppe` réaligne le texte sur la grille du thème (1140 px). Poser
 * la rupture section par section aurait multiplié les points de divergence.
 *
 * `width: auto` avec deux marges négatives égales : l'élément s'étend
 * exactement à la largeur de la fenêtre sans que `width: 100vw` ne s'ajoute à
 * ses propres marges. Le débordement horizontal reste vérifié par mesure
 * (`scrollWidth` contre `innerWidth`) après chaque déploiement.
 */
.camp-porte {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
}

/*
 * `width: 100%` n'est pas décoratif : `.camp-hero` est un conteneur flex, et un
 * enfant flex se dimensionne par défaut sur son CONTENU, pas sur la largeur
 * disponible. Mesuré après la mise en pleine largeur : l'enveloppe du héros
 * tombait à 555 px dans une section de 1280, et le texte se décalait hors de la
 * grille du site -- le titre ne s'alignait plus sur le logo de l'en-tête.
 */
.camp-enveloppe {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

/*
 * Le gabarit du thème réserve un espace au-dessus du contenu pour le bandeau
 * de titre natif que la porte masque plus haut dans ce fichier. Sans cette
 * règle, le héros démarre après ~51 px de blanc inexpliqué -- mesuré sur les
 * deux sites. Le premier bloc coloré de la page doit toucher le fil d'Ariane.
 */
.rkt-prose:has(.camp-porte) {
	max-width: none;
}

#rkt-contenu:has(.camp-porte) {
	padding-top: 0;
	max-width: none;
}

/*
 * FIL D'ARIANE MASQUÉ SUR LA PORTE -- 2026-08-18, demande de Michelot : « le H1
 * générique est désormais neutralisé, mais "Accueil › Campagne" maintient
 * encore un effet de page standard ».
 *
 * `.rkt-fil` n'est pas un ancêtre de la porte mais son FRÈRE PRÉCÉDENT, d'où
 * `:has(+ …)` plutôt que le `:has()` descendant utilisé juste au-dessus.
 *
 * ⚠️ Coût assumé, consigné pour qui relira : un fil d'Ariane est aussi un
 * repère de navigation. Le retirer d'une page de campagne se défend -- une page
 * d'atterrissage n'est pas une page de rubrique, et le candidat y arrive par
 * un lien direct, pas en descendant l'arborescence -- mais c'est un arbitrage,
 * pas une évidence. L'en-tête du site reste présent et ramène à l'accueil.
 */
.rkt-fil:has(+ #rkt-contenu .camp-porte) {
	display: none;
}

/*
 * ═══════════ MODULES 1 À 9 ═══════════
 *
 * Architecture du brief du 2026-08-17, maquette validée le 2026-08-18. Chaque
 * module est une bande de pleine largeur ; `.camp-enveloppe` réaligne le texte
 * sur la grille du thème. L'alternance des fonds fait le rythme de la page --
 * c'est elle qui remplace les encadrés, pas une bordure de plus.
 */

/* ---------- 1. héros-manifeste ---------- */

.camp-hero {
	background-color: var(--camp-p-sombre);
	background-size: cover;
	background-position: center 38%;
	background-repeat: no-repeat;
	color: #ffffff;
}

/*
 * VISUEL EN ARRIÈRE-PLAN -- demande de Michelot du 2026-08-18 : « mettre en
 * arrière-plan de préférence ».
 *
 * `--camp-visuel` n'est émise QUE si une image a été posée sur la fiche. La
 * règle est donc conditionnée par `@supports` sur la variable elle-même : sans
 * image, aucun dégradé ne s'applique, et le héros reste l'aplat de la couleur
 * d'institution. Un dégradé posé sur du vide assombrirait un aplat déjà sombre,
 * pour rien.
 *
 * Le dégradé n'est pas décoratif : sans lui, un texte blanc sur une photo
 * claire tombe sous le seuil de contraste. Il est plus dense à gauche, là où
 * vivent le titre, le chapeau et les boutons.
 */
/*
 * `--camp-visuel-voile` est émise par PHP, et SEULEMENT si une image est posée
 * sur la fiche : c'est PHP qui sait, pas la feuille de style. Le repli `none`
 * laisse alors le héros sur son aplat de couleur d'institution.
 *
 * Ne pas tenter de conditionner cela en CSS avec `@supports (… var(…))` : la
 * règle est vraie dès que la SYNTAXE est valide, que la variable soit définie
 * ou non -- elle ne teste donc rien ici.
 */
.camp-hero {
	background-image: var(--camp-visuel-voile, none);
}



/*
 * INUFOCAD, SANS PHOTO : fond noir, registre réel de l'accueil du site mesuré
 * le 2026-08-17 sur `.rkt-vi-hero`. Le cadre d'art à droite porte la
 * composition graphique -- c'est ce qui « incarne » le héros que le brief
 * demandait, tant qu'aucune photo n'est postée.
 *
 * BUG CORRIGÉ LE 2026-08-19 : cette règle posait aussi `background-image:
 * none`, plus spécifique que `.camp-hero { background-image: var(...) }`
 * ci-dessus -- elle gagnait donc TOUJOURS la cascade, même après qu'une image
 * soit posée depuis wp-admin. Résultat constaté : Michelot posait une photo,
 * le héros restait noir uni. Seule la couleur de repli reste ici ; l'image,
 * quand il y en a une, est à nouveau libre de s'afficher.
 */
.camp-porte-inufocad .camp-hero {
	background-color: #000000;
}

.camp-hero-grille {
	padding-top: 48px;
	padding-bottom: 48px;
}

.camp-hero-texte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 34rem;
}

.camp-surtitre {
	font-family: var(--camp-corps);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--camp-p-accent-pale);
}

.camp-porte .camp-hero h1 {
	font-size: clamp(30px, 5.4vw, 56px);
	line-height: 1.02;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: #ffffff;
}

.camp-porte.camp-porte-inufocad .camp-hero h1,
.camp-porte.camp-porte-inufocad .camp-surtitre {
	color: #f0c30f;
}

.camp-porte .camp-hero .camp-hero-chapeau {
	color: #e6ecf3;
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.55;
}

.camp-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

.camp-porte .camp-hero-cta a {
	font-family: var(--camp-corps);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	padding: 14px 26px;
	border: 2px solid transparent;
}

.camp-cta-primaire {
	background: var(--camp-p-accent);
	color: var(--camp-p-sur-accent);
	border-color: var(--camp-p-accent);
}

.camp-porte-inufocad .camp-cta-primaire {
	background: #f0c30f;
	border-color: #f0c30f;
	color: #1a1400;
}

/*
 * Spécificité portée depuis `.camp-porte` : une règle d'une seule classe perd
 * contre la règle de lien du thème hôte (0,1,1) et le bouton reprenait le
 * violet de marque sur un héros noir -- mesuré en production le 2026-08-18.
 */
.camp-porte .camp-hero-cta .camp-cta-secondaire {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, .6);
}



/* ---------- 2. bande d'orientation ---------- */

.camp-bande {
	background: var(--camp-surface);
	border-top: 1px solid var(--camp-bord);
	border-bottom: 1px solid var(--camp-bord);
}

.camp-bande-grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.camp-repere {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 22px 0;
	border-top: 1px solid var(--camp-bord);
}

.camp-repere:first-child {
	border-top: none;
}

.camp-repere-cle {
	font-family: var(--camp-corps);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--camp-gris);
}

.camp-repere-valeur {
	font-family: var(--camp-corps);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.camp-porte .camp-repere-lien {
	font-family: var(--camp-corps);
	font-size: 14px;
	font-weight: 700;
	color: var(--camp-p-primaire);
	align-self: flex-start;
	text-underline-offset: 3px;
}

/* ---------- 3. introduction ---------- */

.camp-intro {
	padding: 46px 0 8px;
}

.camp-porte .camp-intro p {
	font-size: clamp(18px, 2.4vw, 23px);
	line-height: 1.55;
	max-width: 44rem;
	color: var(--camp-encre);
}

/* ---------- 4. mosaïque des parcours ---------- */

.camp-bloc {
	padding: 44px 0 0;
}

.camp-bloc-titre {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.camp-porte .camp-bloc-titre h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	text-transform: uppercase;
	letter-spacing: -.01em;
}

.camp-compte {
	font-family: var(--camp-corps);
	font-size: 12px;
	color: var(--camp-gris);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.camp-mosaique {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

/*
 * CARTE PROGRAMME -- spécification du 2026-08-18. Composition en deux zones
 * côte à côte (image | texte) surmontant un pied d'information, exactement le
 * schéma de la spécification §2.
 *
 * TOUTE LA CARTE EST UN LIEN. C'est un `<a>` qui enveloppe les trois zones :
 * la cible de clic est donc la carte entière, y compris l'image, sans qu'aucun
 * script n'ait à simuler le clic. Le pied reste dans le lien -- « voir le
 * programme » vaut aussi depuis lui.
 */
.camp-tuile {
	background: var(--camp-surface);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.camp-porte .camp-tuile-lien {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"art"
		"corps"
		"pied";
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.camp-tuile:hover,
.camp-tuile:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -20px rgba(18, 26, 36, .42);
}

/*
 * ZONE IMAGE. Vide, elle reste un aplat neutre plutôt qu'un trou : les images
 * arriveront une à une depuis wp-admin, et une zone qui disparaîtrait quand
 * elle est vide déformerait la grille à chaque ajout.
 */
.camp-tuile-art {
	grid-area: art;
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--camp-p-pale);
}

.camp-tuile-art-vide {
	background:
		linear-gradient(135deg, var(--camp-p-pale) 0%, var(--camp-surface) 100%);
	border-bottom: 1px solid var(--camp-bord);
}

.camp-tuile-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.camp-tuile-corps {
	grid-area: corps;
	padding: 18px 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/*
 * Le porteur INFORME sans regrouper : ECO-D-0012 interdit toute rubrique ou
 * couleur qui séparerait les programmes par institution. Il est donc rendu
 * dans la MÊME encre discrète des deux côtés -- pas dans la couleur de marque
 * de son institution, qui recréerait la séparation que la décision retire.
 */
.camp-tuile-porteur {
	font-family: var(--camp-corps);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--camp-gris);
}

.camp-tuile-niveau {
	font-family: var(--camp-corps);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--camp-p-primaire);
}

.camp-porte .camp-tuile h3 {
	font-size: 18px;
	line-height: 1.3;
	color: var(--camp-encre);
}

.camp-tuile-charge {
	font-family: var(--camp-corps);
	font-size: 14px;
	font-weight: 600;
	color: var(--camp-encre-douce);
	font-variant-numeric: tabular-nums;
}

/* L'affordance de clic, exigée par la spécification §2 (pied de carte). */
.camp-tuile-voir {
	font-family: var(--camp-corps);
	font-size: 14px;
	font-weight: 700;
	color: var(--camp-p-primaire);
	margin-top: auto;
	padding-top: 8px;
}

.camp-tuile-pied {
	grid-area: pied;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 20px;
	background: var(--camp-p-pale);
	font-family: var(--camp-corps);
	font-size: 12.5px;
	color: var(--camp-encre-douce);
}

.camp-tuile-modalite {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	flex: none;
}

/* ---------- 5. réassurance ---------- */

.camp-rea {
	margin-top: 52px;
	padding: 52px 0;
	background: var(--camp-p-sombre);
	color: #ffffff;
}

.camp-porte-inufocad .camp-rea {
	background: #000000;
}

.camp-porte .camp-rea h2 {
	font-size: clamp(22px, 3vw, 31px);
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 28px;
}

.camp-porte.camp-porte-inufocad .camp-rea h2 {
	color: #f0c30f;
}

.camp-rea-grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}

.camp-porte .camp-rea-item h3 {
	font-size: 17px;
	color: #ffffff;
	margin-bottom: 7px;
}

.camp-porte .camp-rea-item p {
	font-size: 15px;
	line-height: 1.55;
	color: #dde5ee;
}

.camp-porte .camp-rea-lien {
	display: inline-block;
	margin-top: 30px;
	font-family: var(--camp-corps);
	font-size: 15px;
	font-weight: 700;
	color: var(--camp-p-accent-pale);
	text-underline-offset: 3px;
}

.camp-porte.camp-porte-inufocad .camp-rea-lien {
	color: #f0c30f;
}

/* ---------- 6. choix du parcours ---------- */

.camp-choix {
	padding: 52px 0 0;
}

.camp-porte .camp-choix h2 {
	font-size: clamp(22px, 3vw, 31px);
	text-transform: uppercase;
	margin-bottom: 22px;
}

.camp-choix-grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.camp-porte .camp-choix-bouton {
	font-family: var(--camp-corps);
	padding: 17px 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--camp-encre);
	color: var(--camp-encre);
	transition: background .15s ease, color .15s ease;
}

.camp-porte .camp-choix-bouton:hover,
.camp-porte .camp-choix-bouton:focus-visible {
	background: var(--camp-encre);
	color: var(--camp-fond);
}

/* ---------- 8. étapes ---------- */

.camp-etapes {
	padding: 52px 0;
}

.camp-porte .camp-etapes h2 {
	font-size: clamp(22px, 3vw, 31px);
	text-transform: uppercase;
	margin-bottom: 26px;
}

.camp-porte .camp-etapes-grille {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.camp-etape {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px;
	border: 2px solid var(--camp-bord);
}

.camp-etape-numero {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	flex: none;
	color: var(--camp-p-accent);
	font-variant-numeric: tabular-nums;
}

.camp-porte .camp-etape h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.camp-porte .camp-etape p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--camp-encre-douce);
}

/* ---------- 9. premier cycle à venir ---------- */

.camp-pc {
	padding: 48px 0;
	border-top: 2px solid var(--camp-encre);
	background: var(--camp-fond);
}

.camp-pc-surtitre {
	font-family: var(--camp-corps);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--camp-gris);
}

.camp-porte .camp-pc h2 {
	font-size: clamp(21px, 2.9vw, 30px);
	text-transform: uppercase;
	margin: 12px 0 20px;
}

.camp-porte .camp-pc-liste {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.camp-porte .camp-pc-liste li {
	font-family: var(--camp-corps);
	font-size: 16px;
	font-weight: 600;
	padding: 16px 18px;
	background: var(--camp-surface);
	border-left: 3px solid var(--camp-p-accent);
}

.camp-porte .camp-pc-note {
	font-family: var(--camp-corps);
	font-size: 15px;
	line-height: 1.55;
	color: var(--camp-encre-douce);
	max-width: 46rem;
}

/* ---------- renvoi vers l'institution partenaire ---------- */

/*
 * Renvoi croisé : bande pleine largeur, pas un encadré (consigne du
 * 2026-08-18). Le fond pâle suffit à distinguer le module ; la bordure sur
 * quatre côtés et le liseré épais à gauche en faisaient un « avertissement »
 * visuel, alors que ce module ne signale rien -- il oriente vers l'autre
 * institution, sur un pied d'égalité.
 */
.camp-renvoi {
	margin: 48px 0 0;
	border-top: 1px solid var(--camp-p-filet);
	border-bottom: 1px solid var(--camp-p-filet);
	background: var(--camp-p-pale);
	padding: 30px 0;
}

.camp-renvoi .camp-enveloppe {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.camp-porte .camp-renvoi h3 {
	font-size: 18px;
}

.camp-porte .camp-renvoi p {
	font-size: 15px;
	color: var(--camp-encre-douce);
}

.camp-porte .camp-renvoi ul {
	margin: 0;
	padding-left: 19px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 15px;
	color: var(--camp-encre-douce);
}

.camp-porte .camp-renvoi a {
	font-weight: 600;
	color: var(--camp-p-primaire);
}

/* ---------- formulaire ---------- */

.camp-demande {
	margin: 48px 0 0;
	background: var(--camp-surface);
	border-top: 1px solid var(--camp-bord);
	border-bottom: 1px solid var(--camp-bord);
	padding: 42px 0;
}

.camp-porte .camp-demande h2 {
	font-size: clamp(22px, 3.8vw, 29px);
	margin-bottom: 9px;
}

.camp-demande-chapeau {
	color: var(--camp-encre-douce);
	max-width: 56ch;
	margin-bottom: 24px;
}

.camp-porte .camp-formulaire {
	display: grid;
	grid-template-columns: 1fr;
	gap: 17px;
	max-width: 620px;
}

.camp-champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.camp-porte .camp-champ label {
	font-size: 14px;
	font-weight: 600;
}

.camp-aide {
	font-size: 13px;
	color: var(--camp-gris);
}

/*
 * Moyen de contact : DEUX CHAMPS, UNE SEULE QUESTION (PROMPT-03 T2).
 * Le fieldset porte l'intitulé unique, les deux etiquettes internes restent
 * discretes -- elles nomment les deux moitiees d'une meme reponse, pas deux
 * questions. Le fieldset est remis a plat : les navigateurs lui posent une
 * bordure et une marge par defaut, qui feraient un encadre de plus dans une
 * page qui n'en a pas.
 */

.camp-porte .camp-contact-groupe {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.camp-porte .camp-contact-groupe legend {
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.camp-porte .camp-contact-paire {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

.camp-porte .camp-champ label.camp-etiquette-fine {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--camp-gris);
}

.camp-porte .camp-formulaire select,
.camp-porte .camp-formulaire input[type="text"] {
	font: inherit;
	font-size: 16px;
	padding: 11px 12px;
	border: 1px solid var(--camp-bord);
	border-radius: 3px;
	background: var(--camp-fond);
	color: var(--camp-encre);
	width: 100%;
}

.camp-porte select:focus-visible,
.camp-porte input:focus-visible,
.camp-porte button:focus-visible,
.camp-porte a:focus-visible {
	outline: 3px solid var(--camp-p-accent);
	outline-offset: 2px;
}

/*
 * Bloc de consentement -- habillage NEUTRE, `PROMPT-06` T7 (D-P-04) : icône,
 * pas de bordure pointillée jaune. Reprend les tokens neutres du fichier
 * (`--camp-surface` / `--camp-bord` / `--camp-encre-douce`), déjà utilisés
 * ailleurs sur cette page, au lieu des tokens `--camp-att-*` d'ATTENTION
 * réservés au message d'erreur du formulaire (`.camp-message-erreur`,
 * inchangé -- une erreur reste signalée en rouge/ambre). Seul cet habillage
 * visuel change : le TEXTE du consentement ne change pas, il reste vide
 * (§13 du README), et le marquage `formulaire.php` n'est pas touché
 * (garde-fou n°7).
 */
.camp-consentement {
	border: 1px solid var(--camp-bord);
	background: var(--camp-surface);
	border-radius: 4px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.camp-consentement .camp-marque {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--camp-encre-douce);
}

.camp-consentement .camp-marque::before {
	content: "\24D8"; /* ⓘ -- icône neutre, pas une couleur d'alerte. */
	font-size: 14px;
	line-height: 1;
	flex: none;
}

.camp-porte .camp-consentement p,
.camp-porte .camp-consentement label {
	font-size: 14px;
	color: var(--camp-encre-douce);
}

.camp-consentement-case {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.camp-porte .camp-formulaire button {
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 3px;
	border: 0;
	background: var(--camp-p-accent);
	color: var(--camp-p-sur-accent);
	cursor: pointer;
	justify-self: start;
}

.camp-porte .camp-formulaire button[disabled] {
	background: var(--camp-bord);
	color: var(--camp-gris);
	cursor: not-allowed;
}

.camp-note-bouton {
	font-size: 13px;
	color: var(--camp-gris);
	max-width: 52ch;
}

/* ---------- messages de retour du formulaire ---------- */

.camp-message {
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 20px;
	max-width: 620px;
	font-size: 15px;
	border: 1px solid var(--camp-p-filet);
	background: var(--camp-p-pale);
	color: var(--camp-encre);
}

.camp-message-erreur {
	border: 2px solid var(--camp-att-bord);
	background: var(--camp-att-fond);
	color: var(--camp-att-texte);
}

.camp-message-succes {
	border-left: 4px solid var(--camp-p-primaire);
}

/* ---------- pied ---------- */

.camp-pied {
	padding: 30px 0 48px;
	font-size: 14px;
	color: var(--camp-gris);
}

.camp-porte .camp-pied p {
	max-width: 70ch;
}

@media (min-width: 768px) {
	/*
	 * MOBILE D'ABORD, comme l'exige le brief : jusqu'ici tout est en une
	 * colonne, boutons pleine largeur, héros court. Les grilles ne s'ouvrent
	 * qu'à partir d'ici.
	 */
	.camp-bande-grille {
		grid-template-columns: repeat(3, 1fr);
	}

	.camp-repere {
		padding: 26px 26px 26px 0;
		border-top: none;
		border-left: 1px solid var(--camp-bord);
		padding-left: 26px;
	}

	.camp-repere:first-child {
		border-left: none;
		padding-left: 0;
	}

	.camp-mosaique {
		grid-template-columns: 1fr 1fr;
		gap: 26px;
	}

	.camp-rea-grille {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}

	.camp-etapes-grille {
		grid-template-columns: repeat(3, 1fr);
	}

	.camp-pc-liste {
		grid-template-columns: repeat(3, 1fr);
	}

	.camp-choix-grille {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * Image à GAUCHE, texte à droite -- la composition de la spécification
	 * §2. En dessous de ce point, l'image passe au-dessus : sur un écran
	 * étroit, deux colonnes rendraient l'intitulé illisible.
	 */
	.camp-porte .camp-tuile-lien {
		grid-template-columns: 40% 1fr;
		grid-template-areas:
			"art corps"
			"pied pied";
	}

	.camp-tuile-art {
		aspect-ratio: auto;
		height: 100%;
	}

	.camp-porte .camp-formulaire {
		grid-template-columns: 1fr 1fr;
	}

	.camp-porte .camp-champ.camp-pleine,
	.camp-porte .camp-consentement,
	.camp-porte .camp-note-bouton {
		grid-column: 1 / -1;
	}

	.camp-porte .camp-contact-paire {
		grid-template-columns: 190px 1fr;
		column-gap: 14px;
	}

	.camp-porte .camp-contact-paire > *:nth-child(1) {
		grid-area: 1 / 1;
	}

	.camp-porte .camp-contact-paire > *:nth-child(2) {
		grid-area: 2 / 1;
	}

	.camp-porte .camp-contact-paire > *:nth-child(3) {
		grid-area: 1 / 2;
	}

	.camp-porte .camp-contact-paire > *:nth-child(4) {
		grid-area: 2 / 2;
	}
}

@media (min-width: 1024px) {
	.camp-hero-grille {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.camp-choix-grille {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.camp-porte * {
		transition: none !important;
		animation: none !important;
	}
}