/* ===========================================
   SAFIR 2027 · Template Styles
   Built on Webvolution (Tailwind + Flux)

   Reprend scrupuleusement la charte de la refonte du site SAFIR
   (/var/www/html/safir/refonte26) : palette, typographies, formes des
   champs, boutons, notices et transitions. Toutes les valeurs ci-dessous
   sont relevées dans css-additionnel.css et account-charteV1.css, pas
   réinventées · le but est qu'un membre passant de safir.org à la
   plateforme ne voie pas la couture.
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Tenor+Sans&display=swap');

/* --- Palette de la charte -------------------------------------------------
   #1a2c4d navy      texte principal, survol des boutons
   #00aca9 teal      accent, focus, filet supérieur des cartes
   #e94f35 orange    action · c'est LUI le bouton, pas le navy
   #6b7d93 ardoise   texte secondaire
   -------------------------------------------------------------------------- */
:root {
	--safir-navy: #1a2c4d;
	--safir-navy-deep: #0b2653;
	--safir-teal: #00aca9;
	--safir-teal-dark: #009895;
	--safir-orange: #e94f35;
	--safir-orange-light: #f26a2e;
	--safir-slate: #6b7d93;
	--safir-slate-dark: #3d4f66;
	--safir-surface: #f0f4f8;
	--safir-surface-soft: #f7f9fb;
	--safir-border: #dde3ed;
	--safir-border-strong: #d0dae6;
	--safir-success-bg: #edfaf9;

	/* Le moteur peint le filet des titres de bloc avec --accent-color, en ligne sur
	   l'élément : une règle de feuille de style ne passerait pas devant, c'est donc
	   la variable qu'on fixe. L'orange est la couleur d'action de la charte. */
	--accent-color: var(--safir-orange);

	--safir-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--safir-serif: "Tenor Sans", Georgia, "Times New Roman", serif;

	--safir-radius-card: 12px;
	--safir-radius-btn: 8px;
	--safir-radius-field: 6px;
	--safir-shadow-card: 0 4px 32px rgba(26, 44, 77, 0.1);
	/* Les deux durées de la charte, et rien d'autre. */
	--safir-t-fast: 0.15s;
	--safir-t-base: 0.2s;
}

/* Le corps porte template-safir-2027 : tout est cantonné à ce congrès. */
.template-safir-2027 {
	font-family: var(--safir-sans);
	color: var(--safir-navy);
}

.template-safir-2027 ::selection {
	background: var(--safir-teal);
	color: #fff;
}
.template-safir-2027 ::-moz-selection {
	background: var(--safir-teal);
	color: #fff;
}

/* ===========================================
   TYPOGRAPHIE · Tenor Sans pour les titres, Montserrat pour tout le reste
   =========================================== */
/* La couleur n'est PAS imposée ici : un titre posé sur un fond sombre — le panneau
   gestionnaire, un encart d'appel — héritait du navy et disparaissait. Le corps porte
   déjà le navy, les titres sur fond clair l'héritent, ceux sur fond coloré gardent la
   couleur de leur contexte. */
.template-safir-2027 h1,
.template-safir-2027 h2,
.template-safir-2027 .auth-h1,
.template-safir-2027 .congress-content h1,
.template-safir-2027 .congress-content h2 {
	font-family: var(--safir-serif);
	font-weight: 400;
	letter-spacing: 0;
}

.template-safir-2027 h1,
.template-safir-2027 .auth-h1 {
	font-size: 34px;
	line-height: 1.15;
}

.template-safir-2027 h3,
.template-safir-2027 h4 {
	font-family: var(--safir-sans);
	font-weight: 600;
}

/* L'étiquette de champ de la charte : petite, grasse, capitales espacées. */
/* Cantonnée au formulaire : une étiquette vit dans un champ, pas dans un panneau
   latéral où elle hériterait du navy sur fond sombre. */
.template-safir-2027 .congress-container label,
.template-safir-2027 .congress-auth-form label {
	font-family: var(--safir-sans);
	font-size: 11px;
	font-weight: 700;
	color: var(--safir-navy);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* Les étiquettes en toutes lettres (cases à cocher, mentions) gardent leur casse :
   une phrase en capitales serait illisible. */
.template-safir-2027 .congress-container label.safir-label-plain,
.template-safir-2027 .congress-container label:has(input[type="checkbox"]),
.template-safir-2027 .congress-container label:has(input[type="radio"]) {
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--safir-slate-dark);
}

/* ===========================================
   CHAMPS
   La charte donne la robe — fond, bordure, rayon, typographie — mais PAS la géométrie :
   le moteur loge son libellé flottant À L'INTÉRIEUR du champ grâce à un padding
   asymétrique (pt-5 pb-2.5), là où la charte du site WordPress met le libellé au-dessus.
   Imposer « padding: 11px 16px » écrasait cette place.
   =========================================== */
.template-safir-2027 input[type="text"],
.template-safir-2027 input[type="email"],
.template-safir-2027 input[type="password"],
.template-safir-2027 input[type="number"],
.template-safir-2027 input[type="date"],
/* Le champ téléphone : c'est son CONTENEUR qui porte la robe, l'input intérieur
   restant transparent et sans bordure — sinon on dessine une boîte dans la boîte. */
.template-safir-2027 .congress-tel-wrapper,
.template-safir-2027 select,
.template-safir-2027 textarea,
/* Le select du moteur est un bouton + une liste Alpine, pas un <select> · sans ce
   sélecteur il gardait le fond blanc de Tailwind à côté de champs bleutés. */
.template-safir-2027 .congress-select-trigger {
	font-family: var(--safir-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--safir-navy);
	background: var(--safir-surface-soft);
	border: 1px solid var(--safir-border);
	border-radius: var(--safir-radius-field);
	box-shadow: none;
	transition: border-color var(--safir-t-base), background var(--safir-t-base),
		box-shadow var(--safir-t-base);
}

/* Restreint aux MÊMES types que la règle de repos. « input:focus » tout court attrapait
   les cases à cocher et les boutons radio, dont le fond porte la coche : l'écraser la
   faisait disparaître. */
.template-safir-2027 input[type="text"]:focus,
.template-safir-2027 input[type="email"]:focus,
.template-safir-2027 input[type="password"]:focus,
.template-safir-2027 input[type="number"]:focus,
.template-safir-2027 input[type="date"]:focus,
.template-safir-2027 .congress-tel-wrapper:focus-within,
.template-safir-2027 select:focus,
.template-safir-2027 textarea:focus,
.template-safir-2027 .congress-select-trigger:focus,
.template-safir-2027 .congress-select-outer:focus-within .congress-select-trigger {
	border-color: var(--safir-teal);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 172, 169, 0.12);
	outline: none;
}

.template-safir-2027 input:not([type="checkbox"]):not([type="radio"])::placeholder,
.template-safir-2027 textarea::placeholder {
	color: var(--safir-slate);
	opacity: 0.8;
}

/* Une case à cocher ne reçoit QUE sa couleur et sa bordure · son fond est l'image de la
   coche, posée par Tailwind, et rien ici ne doit y toucher. */
/* La bordure de la charte s'arrête aux champs VALIDES · sans l'exception, elle écrasait le
   rouge que le moteur pose sur un champ en erreur (border-red-500), et le cercle restait
   gris sous un message d'erreur rouge. */
.template-safir-2027 input[type="checkbox"]:not(.border-red-500),
.template-safir-2027 input[type="radio"]:not(.border-red-500) {
	color: var(--safir-teal);
	border-color: var(--safir-border-strong);
}

/* L'anneau de focus ne s'applique pas à un champ EN ERREUR · il remplacerait l'anneau
   rouge du moteur au moment précis où l'on vient corriger la faute. */
.template-safir-2027 input[type="checkbox"]:focus:not(.border-red-500),
.template-safir-2027 input[type="radio"]:focus:not(.border-red-500) {
	box-shadow: 0 0 0 3px rgba(0, 172, 169, 0.12);
}

/* La liste ouverte · bordure et rayon de la charte, fond blanc pour détacher les
   options du champ, qui est lui bleuté. */
.template-safir-2027 .congress-select-outer > div[x-show] {
	border-color: var(--safir-border);
	border-radius: var(--safir-radius-field);
	box-shadow: var(--safir-shadow-card);
}

/* L'intérieur du champ téléphone ne porte aucune robe propre · le conteneur s'en charge. */
.template-safir-2027 .congress-tel-input,
.template-safir-2027 .congress-tel-dial-btn {
	background: transparent;
	color: var(--safir-navy);
	font-family: var(--safir-sans);
}

.template-safir-2027 .congress-tel-dial-btn {
	border-right-color: var(--safir-border);
}

/* ===========================================
   ETAT D ERREUR
   Le moteur signale un champ fautif en lui posant « border-red-500 ». C'est une simple
   utilitaire Tailwind, que la feuille d'un template — chargée après, et plus spécifique
   dès qu'elle vise un type de champ — recouvre sans le vouloir. On lui rend la main.
   =========================================== */
.template-safir-2027 input.border-red-500,
.template-safir-2027 select.border-red-500,
.template-safir-2027 textarea.border-red-500,
.template-safir-2027 .congress-select-trigger.border-red-500,
.template-safir-2027 .congress-tel-wrapper.border-red-500 {
	border-color: #ef4444;
}

/* ===========================================
   BOUTONS · l'action est ORANGE, et vire au navy au survol
   =========================================== */
/* Restreint au FORMULAIRE. Un `button[type="submit"]` nu attrapait tout : la
   déconnexion de la barre latérale, qui est un submit discret du moteur
   (text-white/35, sans fond), se retrouvait en gros bouton orange en capitales. */
.template-safir-2027 .congress-container button[type="submit"],
.template-safir-2027 .congress-auth-form button[type="submit"],
.template-safir-2027 .congress-btn,
.template-safir-2027 .safir-btn {
	font-family: var(--safir-sans);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	line-height: 1;
	color: #fff;
	background: var(--safir-orange);
	border: none;
	border-radius: var(--safir-radius-btn);
	padding: 12px 32px;
	cursor: pointer;
	transition: background var(--safir-t-base), transform var(--safir-t-fast);
}

.template-safir-2027 .congress-container button[type="submit"]:hover,
.template-safir-2027 .congress-auth-form button[type="submit"]:hover,
.template-safir-2027 .congress-btn:hover,
.template-safir-2027 .safir-btn:hover {
	background: var(--safir-navy);
	transform: translateY(-1px);
}

/* Bouton secondaire : contour navy, fond transparent. */
.template-safir-2027 .safir-btn-ghost {
	background: transparent;
	color: var(--safir-navy);
	border: 2px solid var(--safir-navy);
	border-radius: var(--safir-radius-btn);
	padding: 10px 22px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	transition: background var(--safir-t-base), border-color var(--safir-t-base),
		color var(--safir-t-base);
}
.template-safir-2027 .safir-btn-ghost:hover {
	background: var(--safir-teal);
	border-color: var(--safir-teal);
	color: #fff;
}

/* Lien discret · vire à l'orange au survol, comme « mot de passe oublié ». */
.template-safir-2027 .safir-link,
.template-safir-2027 .congress-content a {
	color: var(--safir-slate);
	text-decoration: none;
	transition: color var(--safir-t-base);
}
.template-safir-2027 .safir-link:hover,
.template-safir-2027 .congress-content a:hover {
	color: var(--safir-orange);
}

/* ===========================================
   CARTES
   La carte d'authentification (.congress-auth-form) appartient au MOTEUR : bandeau
   pleine largeur collé aux arêtes, panneau latéral bord à bord. On n'y touche pas,
   comme les autres templates · lui poser le padding et le filet de la charte
   décollerait le bandeau et détacherait le panneau. La charte s'applique à ce qui
   est dedans : typographies, champs, boutons, notices.
   =========================================== */
/* Le filet teal sur l'arête supérieure de la carte · c'est la signature de la charte.
   Seulement la bordure : ni padding ni rayon, qui décolleraient le bandeau et
   détacheraient le panneau latéral. */
.template-safir-2027 .congress-auth-form {
	border-top: 3px solid var(--safir-teal);
}

.template-safir-2027 .safir-card {
	background: #fff;
	border-radius: var(--safir-radius-card);
	box-shadow: var(--safir-shadow-card);
	border: none;
	border-top: 3px solid var(--safir-teal);
	padding: 48px 40px 56px;
}

/* Une carte de contenu courant : plus sobre, sans le filet. */
.template-safir-2027 .safir-panel {
	background: #fff;
	border: 1px solid var(--safir-border);
	border-radius: var(--safir-radius-card);
	padding: 24px;
	transition: border-color var(--safir-t-base), box-shadow var(--safir-t-base),
		transform var(--safir-t-base);
}
.template-safir-2027 .safir-panel:hover {
	border-color: var(--safir-border-strong);
	box-shadow: var(--safir-shadow-card);
}

/* ===========================================
   NOTICES · filet à gauche, fond très clair, jamais de bloc plein
   =========================================== */
.template-safir-2027 .safir-notice {
	font-family: var(--safir-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--safir-navy);
	background: var(--safir-success-bg);
	border: none;
	border-left: 3px solid var(--safir-teal);
	border-radius: var(--safir-radius-btn);
	padding: 14px 20px;
}
.template-safir-2027 .safir-notice--warning {
	background: #fff6f3;
	border-left-color: var(--safir-orange);
}
.template-safir-2027 .safir-notice--muted {
	background: var(--safir-surface);
	border-left-color: var(--safir-slate);
	font-weight: 500;
	color: var(--safir-slate-dark);
}

/* ===========================================
   BANDEAU DES ÉCRANS DE CONNEXION
   La charte pose l'image en titlebar de 175 px, titre centré en Tenor Sans
   blanc de 34 px. Ici l'image est servie par le template.
   =========================================== */
.template-safir-2027 .safir-titlebar {
	position: relative;
	min-height: 175px;
	width: 100%;
	background-image: url("../images/hero.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.template-safir-2027 .safir-titlebar__title {
	font-family: var(--safir-serif);
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 12px rgba(11, 38, 83, 0.45);
}

/* ===========================================
   MARQUE À CÔTÉ DU TITRE
   Le moteur pose la marque carrée du congrès à gauche du titre des écrans
   d'authentification. Celle de SAFIR est un trait fin : à côté d'un titre en
   Tenor Sans, elle encombre plus qu'elle ne signe. Le bandeau porte déjà le
   logo juste au-dessus, l'identité ne manque à personne.

   On masque le CONTENEUR et non l'image : masquer l'image seule laisserait
   l'élément de rangée en place, et son espacement décalerait le titre.
   =========================================== */
.template-safir-2027 .congress-auth-mark-wrap {
	display: none;
}

/* ===========================================
   RESPIRATION DU CONTENU
   En accès direct, le moteur rend le contenu à nu dans <main> · le mode site, lui,
   l'enveloppe dans .congress-container avec py-8. Le tableau de bord se retrouvait
   donc collé à la barre latérale et au bandeau. On lui rend cette respiration ici,
   sans toucher au moteur, et on neutralise le padding horizontal du conteneur des
   formulaires pour ne pas le compter deux fois.
   =========================================== */
.template-safir-2027 main {
	padding: 2.5rem 1.75rem;
}

.template-safir-2027 main > .congress-container {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 640px) {
	.template-safir-2027 main {
		padding: 1.5rem 1rem;
	}

	/* Le titre descend d'un cran sur un téléphone · 34 px tenaient sur la page d'accueil,
	   mais un titre de communication y passait en trois lignes hautes et écrasait tout ce
	   qui le suit. La charte garde sa serif et son navy, elle ne change que de taille. */
	.template-safir-2027 h1,
	.template-safir-2027 .auth-h1 {
		font-size: 26px;
	}
}

/* ===========================================
   CARTES DE L'ESPACE PERSONNEL
   Le moteur les rend avec une bordure grise et une ombre au survol. La charte SAFIR
   les reprend : filet teal à gauche qui se révèle, pastille d'icône qui s'inverse,
   et un soulèvement discret · les deux durées de la charte, rien de plus.
   =========================================== */
.template-safir-2027 .congress-card-link {
	position: relative;
	/* Un fond très légèrement dégradé plutôt qu'un blanc plat · la carte se détache du
	   fond de page sans qu'on puisse nommer ce qui a changé. */
	background: linear-gradient(170deg, #fff 0%, var(--safir-surface-soft) 100%);
	border: 1px solid var(--safir-border);
	border-radius: var(--safir-radius-card);
	/* Au repos aussi · une ombre d'un pixel suffit à poser la carte sur la page. Sans
	   elle, tout le relief n'existait qu'au survol, donc jamais au premier regard. */
	box-shadow: 0 1px 2px rgba(26, 44, 77, 0.04);
	transition: border-color var(--safir-t-base), box-shadow var(--safir-t-base),
		transform var(--safir-t-fast), background var(--safir-t-base);
}

/* Le filet de la charte, posé à gauche et révélé au survol. */
.template-safir-2027 .congress-card-link::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--safir-teal);
	opacity: 0;
	transition: opacity var(--safir-t-base);
}

.template-safir-2027 .congress-card-link:hover {
	border-color: var(--safir-border-strong);
	box-shadow: var(--safir-shadow-card);
	transform: translateY(-2px);
}

.template-safir-2027 .congress-card-link:hover::before {
	opacity: 1;
}

.template-safir-2027 .congress-card-link__icon {
	border-radius: var(--safir-radius-field);
	/* Dégradé et filet intérieur · la pastille devient un objet plutôt qu'un aplat. */
	background: linear-gradient(145deg, #fff 0%, var(--safir-surface) 100%) !important;
	box-shadow: inset 0 0 0 1px var(--safir-border);
	color: var(--safir-navy) !important;
	transition: background var(--safir-t-base), color var(--safir-t-base),
		box-shadow var(--safir-t-base);
}

.template-safir-2027 .congress-card-link:hover .congress-card-link__icon {
	background: linear-gradient(145deg, var(--safir-teal) 0%, var(--safir-teal-dark) 100%) !important;
	box-shadow: inset 0 0 0 1px var(--safir-teal-dark);
	color: #fff !important;
}

.template-safir-2027 .congress-card-link__label {
	font-family: var(--safir-serif);
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--safir-navy);
}

.template-safir-2027 .congress-card-link__arrow {
	color: var(--safir-border-strong);
	transition: color var(--safir-t-base), transform var(--safir-t-fast);
}

.template-safir-2027 .congress-card-link:hover .congress-card-link__arrow {
	color: var(--safir-teal);
}

/* Le titre de page et son chapeau · même famille que les titres du formulaire. */
.template-safir-2027 main h1 {
	font-family: var(--safir-serif);
	font-weight: 400;
	color: var(--safir-navy);
}

/* Le filet sous le titre vient du moteur · la charte n'en reprend que la couleur. */
.template-safir-2027 .congress-direct-main > h1:first-child::after {
	background: linear-gradient(90deg, var(--safir-teal) 0%, var(--safir-navy) 100%);
}

/* Le fond de la zone de contenu, à la teinte de la charte. */
.template-safir-2027 .congress-direct-main {
	background: var(--safir-surface-soft);
}

/* ===========================================
   NAVIGATION
   =========================================== */
.template-safir-2027 .congress-nav-link {
	font-family: var(--safir-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--safir-slate);
	padding: 8px 14px;
	border-radius: var(--safir-radius-field);
	transition: color var(--safir-t-base), background var(--safir-t-base);
}
.template-safir-2027 .congress-nav-link:hover {
	background: var(--safir-surface);
	color: var(--safir-navy);
}
.template-safir-2027 .congress-nav-link--active {
	color: var(--safir-navy);
	background: var(--safir-surface);
}

/* ===========================================
   ANIMATIONS
   Une seule animation dans la charte · le point qui respire. Les autres
   mouvements sont des transitions de 0,15 s et 0,2 s, jamais davantage.
   =========================================== */
@keyframes safir-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.6);
		opacity: 0.55;
	}
}

.template-safir-2027 .safir-pulse {
	animation: safir-pulse 1s ease-in-out infinite;
}

/* Entrée à l'arrivée sur la page · discrète, et une seule fois. */
@keyframes safir-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.template-safir-2027 .safir-animate-in {
	animation: safir-fade-up 0.4s ease-out both;
}
.template-safir-2027 .safir-animate-in-delay-1 {
	animation-delay: 0.08s;
}
.template-safir-2027 .safir-animate-in-delay-2 {
	animation-delay: 0.16s;
}

/* La charte coupe les animations quand le système le demande. */
@media (prefers-reduced-motion: reduce) {
	.template-safir-2027 .safir-pulse,
	.template-safir-2027 .safir-animate-in {
		animation: none;
	}
	.template-safir-2027 * {
		transition-duration: 0.01ms !important;
	}
}

/* ===========================================
   PROGRESSION DE LECTURE ET RETOUR EN HAUT
   =========================================== */
.template-safir-2027 .congress-scroll-progress-fill {
	background: linear-gradient(90deg, var(--safir-teal) 0%, var(--safir-navy) 100%);
}
.template-safir-2027 .congress-back-top {
	background: var(--safir-navy);
	color: #fff;
	border-radius: var(--safir-radius-btn);
	transition: background var(--safir-t-base), transform var(--safir-t-fast);
}
.template-safir-2027 .congress-back-top:hover {
	background: var(--safir-teal);
	transform: translateY(-1px);
}

/* ===========================================
   BOUTONS PEINTS EN DUR PAR LE MOTEUR
   Plusieurs écrans du moteur posent `style="background: var(--primary-color)"`
   directement sur le bouton (connexion, inscription, paiement). Un style en
   ligne l'emporte sur toute règle de feuille : il faut donc !important pour
   rendre l'action à l'orange de la charte, qui procède du même principe sur
   le site WordPress.
   =========================================== */
.template-safir-2027 .congress-container button[type="submit"][style*="--primary-color"],
.template-safir-2027 .congress-auth-form button[type="submit"],
.template-safir-2027 .congress-container a[style*="--primary-color"][href] {
	background: var(--safir-orange) !important;
	border-radius: var(--safir-radius-btn) !important;
	font-family: var(--safir-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.07em !important;
	color: #fff !important;
	box-shadow: none !important;
	transition: background var(--safir-t-base), transform var(--safir-t-fast) !important;
}

.template-safir-2027 .congress-container button[type="submit"][style*="--primary-color"]:hover,
.template-safir-2027 .congress-auth-form button[type="submit"]:hover,
.template-safir-2027 .congress-container a[style*="--primary-color"][href]:hover {
	background: var(--safir-navy) !important;
	transform: translateY(-1px) !important;
	filter: none !important;
	box-shadow: none !important;
}

/* ===========================================
   HORS PÉRIMÈTRE DE LA CHARTE
   La barre d'aperçu (.webvo-preview-bar) et la barre latérale sont des outils du
   moteur, pas du congrès. Aucune règle ci-dessus ne les atteint : les boutons sont
   cantonnés à .congress-container et .congress-auth-form, dont elles sont dehors.
   Ne RIEN y écrire · une contre-règle « background: transparent » effacerait le
   rouge du bouton « Retour à l'espace administrateur », qui appartient à webvo.
   =========================================== */

/* --- Liste d'ordre et fiche du répéteur ------------------------------------
   Deux blocs du moteur, repris aux formes de la charte : même rayon que les
   cartes, même filet, et le fond bleuté des champs pour les entêtes.
   Porté par deux classes dédiées, jamais par un sélecteur d'élément.
   -------------------------------------------------------------------------- */
.template-safir-2027 .congress-repeater-rail,
.template-safir-2027 .congress-repeater-pane {
	border-radius: var(--safir-radius-card);
	border-color: var(--safir-border);
}

.template-safir-2027 .congress-repeater-rail > p:first-child,
.template-safir-2027 .congress-repeater-pane > div:first-child {
	background: var(--safir-surface-soft);
	border-color: var(--safir-border);
}

/* --- Titre de section de formulaire ---------------------------------------
   Le moteur le rend en 16 px graisse 600. La règle h2 ci-dessus le repasse en
   Tenor Sans graisse 400, qui paraît bien plus discret à taille égale : on lui
   rend sa présence en taille plutôt qu'en graisse, la romaine de la charte
   n'existant qu'en un seul poids. Cantonné à l'attribut du moteur, jamais à h2.
   -------------------------------------------------------------------------- */
.template-safir-2027 h2[data-form-title] {
	font-size: 19px;
	line-height: 1.3;
}