/* Centre Sahélien pour la Biodiversité - page « Inscription » (partials/inscription/*), préfixe .csb-in-
   Chargé après csb.css, csb-formation.css (variables --fo-*, bandeau, FAQ, formulaire) et csb-anime.css. */

body main.csb-in p:not(#csb) { max-width: none; }

/* --- Deux colonnes : coordonnées 5/12, formulaire 7/12, filet vertical, colonne gauche collante --- */
.csb-in-principal { padding: var(--fo-section) 0; background: #fff; }
.csb-in-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: stretch; }
.csb-in-colonne-contact { padding-right: clamp(28px, 4vw, 64px); border-right: 1px solid var(--fo-filet); }
.csb-in-colonne-form { padding-left: clamp(28px, 4vw, 64px); }
.csb-in-colle.is-collant { position: sticky; top: 110px; }
.csb-in-contact > p { max-width: 42ch; }

/* --- Coordonnées : lignes séparées par un filet, sans carte ni ombre --- */
.csb-in-lignes { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--fo-filet); }
.csb-in-ligne { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--fo-filet); }
.csb-in-ligne-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fo-jaune); color: var(--fo-vert); font-size: 16px; }
.csb-in-ligne-txt { display: grid; gap: 2px; min-width: 0; }
body main.csb-in .csb-in-ligne-lib:not(#csb) { margin: 0; font-size: 13px; font-weight: 600; color: var(--fo-doux); }
.csb-in-ligne-lien { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; color: var(--fo-vert); overflow-wrap: anywhere; text-decoration: none; background-image: linear-gradient(var(--fo-jaune), var(--fo-jaune)), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - 8px), 0 calc(100% - 8px); background-size: 100% 2px, 0 2px; }
.csb-in-ligne-lien:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 3px; border-radius: 3px; }
body main.csb-in .csb-in-ligne-note:not(#csb) { margin: 0; font-size: 14px; color: var(--fo-doux); }
.csb-in-lieu { margin-top: 24px; }
body main.csb-in .csb-in-lieu-adresse:not(#csb) { margin: 2px 0 4px; font-size: 17px; font-weight: 600; color: var(--fo-texte); }

/* --- Formulaire --- */
.csb-in-form form { margin-top: 24px; }
.csb-in-champ { margin-bottom: 18px; }
.csb-in-champ label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--fo-vert); }
.csb-in-fac { font-weight: 500; color: var(--fo-doux); }
.csb-in-champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
body main.csb-in .csb-in-champ :is(input, textarea, select):not(#csb) { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid rgba(0, 69, 64, .32); border-radius: 6px; background-color: #fff; color: var(--fo-texte); font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
body main.csb-in .csb-in-champ select:not(#csb) { padding-right: 40px; }
body main.csb-in .csb-in-champ textarea:not(#csb) { resize: vertical; min-height: 110px; }
body main.csb-in .csb-in-champ :is(input, textarea, select):focus-visible:not(#csb) { outline: 3px solid var(--fo-vert); outline-offset: 1px; border-color: var(--fo-vert); box-shadow: 0 0 0 4px rgba(0, 69, 64, .1); }
body main.csb-in .csb-in-champ [aria-invalid="true"]:not(#csb) { border-color: #B3261E; }
body main.csb-in .csb-in-aide:not(#csb) { margin: 6px 0 0; font-size: 14px; color: var(--fo-doux); }
body main.csb-in .csb-in-erreur:not(#csb) { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #B3261E; }
.csb-in-erreur:empty { display: none; }
.csb-in-form button[type="submit"][disabled] { opacity: .65; cursor: progress; }
.csb-in-form .csb-fo-message:not(:empty) { animation: csbInFondu .3s ease both; }
@keyframes csbInFondu { from { opacity: 0; } to { opacity: 1; } }

/* --- Comment ça se passe : trois étapes en ligne, séparées par un filet --- */
.csb-in-etapes { padding: var(--fo-section) 0; background: var(--fo-creme); }
.csb-in-etapes-liste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: etape; }
.csb-in-etape { padding-top: 20px; border-top: 3px solid var(--fo-jaune); }
.csb-in-etape-num { display: block; margin-bottom: 8px; font-family: var(--csb-font-titre, Georgia, serif); font-size: 40px; font-weight: 600; line-height: 1; color: var(--fo-vert); }
body main.csb-in .csb-in-etape h3:not(#csb) { margin: 0 0 8px; font-size: 20px; }
body main.csb-in .csb-in-etape p:not(#csb) { margin: 0; max-width: 34ch; font-size: 16px; color: var(--fo-texte); }

/* --- Survols (souris seulement) --- */
@media (hover: hover) {
	.csb-in-ligne-lien { transition: background-size .3s cubic-bezier(.2, .7, .2, 1); }
	.csb-in-ligne-lien:hover, .csb-in-ligne-lien:focus-visible { background-size: 100% 2px, 100% 2px; }
	.csb-in-form .e-primary-btn .icon { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
	.csb-in-form .e-primary-btn:hover .icon { transform: translateX(4px); }
}

/* --- Tablette et mobile : une colonne, le formulaire avant les coordonnées --- */
@media (max-width: 991px) {
	.csb-in-grille { grid-template-columns: minmax(0, 1fr); }
	.csb-in-colonne-form { order: 1; padding-left: 0; }
	.csb-in-colonne-contact { order: 2; margin-top: 48px; padding: 40px 0 0; border-right: 0; border-top: 1px solid var(--fo-filet); }
	.csb-in-etapes-liste { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 575px) { .csb-in-champs-2 { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
	.csb-in-ligne-lien, .csb-in-champ :is(input, textarea, select), .csb-in-form .e-primary-btn .icon { transition: none; }
	.csb-in-form .csb-fo-message:not(:empty) { animation: none; }
	.csb-in-form .e-primary-btn:hover .icon { transform: none; }
}