/* ============================================================
   provider-register.css - styles spécifiques à provider-register.php
   ----------------------------------------------------------
   La page réutilise TELS QUELS les composants du projet (multistep -
   barre de progression comprise, rendu identique au SOS -, multiselect,
   autocomplete, phone). Ne restent ici que les quelques règles que le
   markup ne peut pas porter seul.

   §1 - Visibilité des blocs conditionnels de l'étape « Votre activité »
   §2 - Card du formulaire dans le hero sombre
   §3 - Rappel de la formule choisie sur /nos-abonnements
   §4 - Colonne gauche du hero : sticky au scroll
   ============================================================ */

/* ---------- §1 - Blocs conditionnels ----------
   provider-register.js révèle / masque ces trois blocs avec l'attribut
   `hidden` selon l'activité choisie. Le rappel multi-marques est un
   `.login-hint`, dont le `display: flex` (styles.css) l'emporterait sinon
   sur le `display: none` du user-agent : la règle le rétablit. Le panel de
   la question « autre univers » et celui des immatriculations DJ suivent la
   même règle par symétrie (et pour survivre à un futur display sur leur
   conteneur). */
.register-form [data-duplicate-panel][hidden],
.register-form [data-dj-panel][hidden],
.register-form [data-multi-brand-hint][hidden] {
	display: none;
}

/* ---------- §2 - Card du formulaire ----------
   La card vit DANS le hero sombre, en colonne d'une grille : ses actions
   n'ont pas besoin de la marge que le composant leur donne sur les pages
   pleine largeur. */
.register-form .multistep-actions {
	margin-top: 5px;
}

/* ---------- §3 - Rappel de la formule choisie ----------
   Le bloc est enfant DIRECT du multistep (comme le bandeau `.login-hint`) pour
   rester affiché aux deux étapes - seul le fieldset actif l'est. Mais
   enterSuccessState() (main.js §14) ne masque que steps / actions / progress /
   titre : on masque le rappel sur l'écran de succès en CSS, même pattern
   `:has()` que styles.css pour le bandeau de connexion. Le `gap` du form gère
   l'espacement, aucune marge propre. */
.register-form:has([data-multistep-success]:not(.hidden)) > [data-subs-choice] {
	display: none;
}

/* ---------- §4 - Colonne gauche du hero, sticky au scroll ----------
   Même pattern que #provider-sidebar / #blog-sidebar-sticky (styles.css) : le
   bloc est `lg:sticky lg:top-[100px]` (header 85 + air 15) et, quand le header
   se replie au scroll vers le bas (`#site-header.is-hidden`), on baisse son top
   à 15px pour qu'il suive au lieu de laisser un trou. Transition alignée sur
   les 0.3s ease du header. Desktop seulement : sous lg les colonnes s'empilent
   et le sticky n'aurait aucun sens. La course s'arrête en bas du hero, seul
   conteneur du bloc - c'est voulu, le reste de la page a son propre contenu. */
@media (min-width: 1024px) {
	#register-hero-aside {
		transition: top 0.3s ease;
	}
	body:has(#site-header.is-hidden) #register-hero-aside {
		top: 15px;
	}
}
@media (prefers-reduced-motion: reduce) {
	#register-hero-aside {
		transition: none;
	}
}