/**
 * Rail latéral replié — Ange Canada.
 *
 * Le thème parent (`ange/src/assets/styles/components/_side-utils.scss`) pose le
 * rail en `position: fixed` avec `top: 16%` mais sans hauteur : il prend celle
 * de son contenu — trois blocs à 140px de hauteur minimale, plus la flèche de
 * remontée, soit ~650px avec la marge haute — et dépasse le bas de la fenêtre
 * dès que celle-ci est un peu courte. Le `overflow-y: scroll` du parent n'y
 * change rien : il ne fait défiler que ce qui déborde d'une hauteur bornée, or
 * ici c'est le rail lui-même qui sort du cadre. Le dernier bloc (« SOS ange »,
 * ses deux boutons) et la flèche devenaient donc inatteignables — l'élément
 * étant fixe, faire défiler la page ne les ramène pas.
 *
 * Le mode déplié n'est pas concerné : `common.js` lui pose `height: 100vh` en
 * même temps que la classe `open`, et il défile correctement. D'où le
 * `:not(.open)` sur chacune des règles ci-dessous.
 */

/* Filet de sécurité : le rail ne dépasse plus jamais la fenêtre, et défile s'il
   le faut. `auto` plutôt que le `scroll` du parent, qui réservait une barre
   permanente dans les 84px visibles du rail replié.
   84vh = les 100vh moins les 16% de `top`. */
.side-utils:not(.open) {
	max-height: calc(84vh - 1rem);
	overflow-y: auto;
}

/* En dessous de ~780px de haut, le compte n'y est plus. On récupère la place
   sur la marge haute et sur les espacements — un défilement dans une colonne de
   84px de large ne serait pas une réponse acceptable.
   `!important` parce que ces paddings viennent des classes utilitaires
   Bootstrap (`py-4`, `pt-2`, `pt-4`), qui en portent elles-mêmes. */
@media (max-height: 780px) {

	.side-utils:not(.open) {
		top: 3vh;
		max-height: calc(97vh - 1rem);
	}

	.side-utils:not(.open) .side-utils__contain {
		min-height: 0;
	}

	.side-utils:not(.open) .app-store,
	.side-utils:not(.open) .loyalty,
	.side-utils:not(.open) .store-finder {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	.side-utils:not(.open) .to-top {
		padding-top: 1rem !important;
	}
}

/**
 * « Créer ma carte » : le seul bouton du rail en `btn-outline-primary`.
 *
 * Le thème parent (`ange/src/assets/styles/components/_side-utils.scss`, lignes
 * 187-205) donne à `.store-finder__btn` un texte `#232323` et une icône blanche.
 * C'est cohérent avec ses propres boutons, tous en `btn-primary` (fond jaune) ou
 * `btn-secondary` : du texte sombre sur jaune se lit. Sur un bouton en contour,
 * le fond reste noir — le libellé disparaît, l'icône seule survit. Bootstrap
 * prévoyait bien `color: #cdd800` pour `.btn-outline-primary`, mais la règle du
 * parent, déclarée plus tard, l'emporte.
 *
 * On rétablit donc la couleur primaire sur le libellé ; l'icône la suit par
 * `inherit` plutôt que de rester blanche.
 *
 * Le survol du parent (fond blanc, texte `#232323`) doit être redéclaré : nos
 * sélecteurs sont plus spécifiques et laisseraient sinon du jaune sur blanc.
 * `:active` est traité de même — Bootstrap y pose un fond jaune. `:focus-visible`
 * en revanche n'est **pas** inclus : il n'ajoute qu'une ombre, le fond reste
 * noir, et forcer le texte sombre le rendrait de nouveau invisible au clavier.
 */
.loyalty-child .store-finder__btn.btn-outline-primary {
	color: var(--bs-primary, #cdd800);
}

.loyalty-child .store-finder__btn.btn-outline-primary i {
	color: inherit;
}

.loyalty-child .store-finder__btn.btn-outline-primary:hover,
.loyalty-child .store-finder__btn.btn-outline-primary:active {
	color: #232323;
}