:root {
	/*----------------------------------------------------------
		PALETTE DE MARQUE
		--brand      : la couleur EG Formations. Aplats, icônes,
		               éléments décoratifs, grands titres.
		--brand-ink  : même teinte, plus dense. À utiliser dès que
		               le rose porte du TEXTE (petites tailles) ou
		               sert de fond à du texte blanc.
		               #E756C8 ne fait que 3,2:1 sur blanc : il échoue
		               au WCAG AA (4,5:1). #B8329D atteint 5,27:1.
		--brand-tint : fond très pâle dérivé de la marque (teinte 324°).
		               Remplace l'ancien #f8edeb, qui était un beige
		               pêche (teinte 9°) étranger à la marque.
	----------------------------------------------------------*/
	--brand: #E756C8;
	--brand-ink: #B8329D;
	--brand-tint: #FBF1F7;

	/* Filet éditorial, texte secondaire, texte courant */
	--rule: rgba(184, 50, 157, .16);
	--muted: #6B6B6B;
	--prose: #3f3f3f;

	--first-color: #FFF;
	--second-color: #000;
	/* Alias historiques : tout le site existant continue de fonctionner. */
	--third-color: var(--brand);
	--fourth-color: var(--brand-tint);

	--white-color: #FFF;
	--black-color: #000;
	--grey-color: #808080;
	--red-color: #ff0000;
	--green-color: #008000;
	/* --bs-body-font-family: Brush Script MT; */
	--bs-body-font-family:  "Montserrat", sans-serif;

	--navbar-height: 5rem;
}


/*--------------------------------------------------------------
	IMAGES
--------------------------------------------------------------*/
.logo-complement {
    height: 150px;
    width: 150px;
}

@media screen and (min-width: 768px) {
    .logo-complement {
        height: 180px;
        width: 180px;
    }
}


/*--------------------------------------------------------------
	TITLES
--------------------------------------------------------------*/
h1 {
	color: var(--third-color);
	font-weight: 300;
	letter-spacing: 1px;
	margin-bottom: 3rem;
}


h3 {
	color: var(--second-color);
	font-weight: 300;
	margin-bottom: 1rem;
}



h4 {
	color: var(--third-color);
	letter-spacing: 2px;
	font-weight: 300;
}


p {
	font-weight: 300;
}


.bold {
	font-weight: 500;
}




/*--------------------------------------------------------------
	BORDER 
--------------------------------------------------------------*/

.border-fourth-color {
	border: 15px solid var(--fourth-color);
}


/*--------------------------------------------------------------
	LIST A PUCE
--------------------------------------------------------------*/


.custom-list {
    list-style-type: none; /* Supprime les puces par défaut */
    padding: 0; /* Supprime le padding par défaut */
}

.custom-list li {
    position: relative; /* Nécessaire pour positionner la pseudo-élément */
    padding-left: 20px; /* Espace pour la puce */
}

.custom-list li::before {
    content: ''; /* Crée une puce personnalisée */
    position: absolute;
    left: 0;
    top: 7px; /* Positionne la puce par rapport au texte */
    width: 8px; /* Largeur de la puce */
    height: 8px; /* Hauteur de la puce */
    background-color: var(--third-color); /* Couleur de la puce */
    border-radius: 50%; /* Forme ronde */
}


.custom-list-2 {
    list-style-type: none;
    padding: 0;
}

.custom-list-2 li {
    position: relative;
    padding-left: 4.5%;
}

.custom-list-2 li::before {
    content: '';
    position: absolute;
    left: 1%;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: var(--grey-color) !important;
	border-radius: 0% !important;
}



/*--------------------------------------------------------------
	BOUTONS .fbtn — primitive partagée (accueil + pages formation)
	Pilule, icône alignée, élévation. Seule primitive de bouton du site
	depuis que le formulaire de contact a abandonné l'ancien .my-btn.
--------------------------------------------------------------*/
.fbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-width: 220px;
	height: 48px;
	padding: 0 1.6rem;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	border-radius: 999px;
	cursor: pointer;
	transition: color .3s ease, background-color .3s ease,
	            transform .3s ease, box-shadow .3s ease;
}

/* Plein rose : action principale */
.fbtn-primary {
	color: var(--white-color);
	background: var(--brand-ink);
	border: 1px solid var(--brand-ink);
	box-shadow: 0 8px 22px rgba(231, 86, 200, .28);
}

.fbtn-primary:hover,
.fbtn-primary:focus {
	color: var(--white-color);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(231, 86, 200, .38);
}

/* Contour : action secondaire */
.fbtn-outline {
	color: var(--second-color);
	background: var(--white-color);
	border: 1px solid var(--brand);
}

.fbtn-outline:hover,
.fbtn-outline:focus {
	color: var(--white-color);
	background: var(--brand-ink);
	border-color: var(--brand-ink);
}

@media (prefers-reduced-motion: reduce) {
	.fbtn {
		transition: none;
	}
	.fbtn-primary:hover,
	.fbtn-primary:focus {
		transform: none;
	}
}


/*--------------------------------------------------------------
	SECTION
--------------------------------------------------------------*/
.card-partis-pris{
	border: 1px solid var(--third-color);
}



/*--------------------------------------------------------------
	COLORS
--------------------------------------------------------------*/
.first-color {
	color: var(--first-color) !important;
}

.second-color {
	color: var(--second-color) !important;
}

.third-color {
	color: var(--third-color) !important;
}

.fourth-color {
	color: var(--fourth-color) !important;
}

.white-color {
	color: var(--white-color) !important;
}

.black-color {
	color: var(--black-color) !important;
}

.grey-color {
	color: var(--grey-color) !important;
}

.red-color {
	color: var(--red-color) !important;
}

.green-color {
	color: var(--green-color) !important;
}

/*--------------------------------------------------------------
	BACKGROUND COLORS
--------------------------------------------------------------*/
.first-background-color {
	background-color: var(--first-color) !important;
}

.second-background-color {
	background-color: var(--second-color) !important;
}

.third-background-color {
	background-color: var(--third-color) !important;
}

.fourth-background-color {
	background-color: var(--fourth-color) !important;
}

.white-background-color {
	background-color: var(--white-color) !important;
}

.black-background-color {
	background-color: var(--black-color) !important;
}

.grey-background-color {
	background-color: var(--grey-color) !important;
}


/* HR */
.hr-first-background-color {
	background-color: var(--first-color);
	opacity: 0.80;
	height: 2px !important;
}



/*--------------------------------------------------------------
	BODY
--------------------------------------------------------------*/
/*
	La navbar est en position fixed : elle sort du flux et recouvrirait le haut
	du contenu. On compense par un padding sur le body plutôt que par un <div>
	cale-pied, qui se lisait comme une bande sous le menu.
	box-sizing: border-box (Bootstrap) => le padding est inclus dans le 100vh.
*/
body {
	font-family: var(--bs-body-font-family);
	color: var(--black-color);
	background-color: var(--white-color);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: var(--navbar-height);
}

.main-container {
	flex: 1;
}



/*--------------------------------------------------------------
	NABVAR
--------------------------------------------------------------*/
/* min-height et non height : le menu déplié sur mobile doit pouvoir
   agrandir la navbar, sinon il déborde hors du fond peint. */
/*
	Bordure basse volontairement visible : sur l'accueil le contenu blanc
	dessinait l'arête de la navbar, alors que sur les pages formation le hero
	prolonge la teinte et le menu semblait plus haut. Une bordure propre rend
	la barre identique quel que soit ce qu'il y a en dessous.
*/
.my-navbar {
	min-height: var(--navbar-height);
	border-bottom: 1px solid rgba(184, 50, 157, .13);
	background-color: var(--fourth-color);
	transition: box-shadow .3s ease, border-color .3s ease;
}

/* Décollement visuel dès qu'on quitte le haut de page */
.my-navbar.is-scrolled {
	border-bottom-color: transparent;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

/*
	Le logo était à opacity:0 et remis à 1 par jQuery sur window.load,
	donc invisible tant que TOUTES les images et polices n'étaient pas
	chargées. On le rend visible par défaut et on garde le fondu en CSS.
*/
.navbar-logo-img {
	height: auto;
	opacity: 1;
	animation: navbarLogoIn .9s ease-out both;
}

@keyframes navbarLogoIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.navbar-logo-img {
		animation: none;
	}
}

/* xs < 576px */
@media (min-width: 1px) {
	.navbar-logo-img {
		width: 70px;
		height: auto;
		margin-left: 10%;
	}

	.footer-logo-img {
		width: 80px;
		height: auto;
	}
}

/* md >= 768px */
@media (min-width: 768px) {
	.navbar-logo-img {
		width: 75px;
		height: auto;
		margin-left: 5%;
	}

	.footer-logo-img {
		width: 100px;
		height: auto;
	}
}

/* xl >= 1200px */
@media (min-width: 1200px) {
	.navbar-logo-img {
		width: 100px;
		height: auto;
	}

	.footer-logo-img {
		width: 100px;
		height: auto;
	}
}

/* Taille et graisse portées ici plutôt que par des utilitaires fs-5/ftw-500
   dans le template : c'est la typo de la navigation, pas de la mise en page. */
.my-navbar .nav-link {
	color: var(--second-color);
	font-size: 1.25rem;
	font-weight: 500;
	border-radius: 999px;
	padding: .45rem .95rem;
	transition: color .25s ease, background-color .25s ease;
}

.my-navbar .nav-link:hover,
.my-navbar .nav-link:focus {
	color: var(--brand-ink);
}

/* Page courante : pilule blanche sur le fond teinté de la navbar */
.my-navbar .nav-link.is-current {
	color: var(--brand-ink);
	background-color: var(--white-color);
}

/* Assez large pour que le plus long intitulé
   (« Le manager acteur de son écosystème ») tienne sur une seule ligne. */
.my-navbar .dropdown-menu {
	min-width: 21rem;
	border: 1px solid var(--brand-tint);
	border-radius: 14px;
	padding: .4rem;
	background-color: var(--white-color);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .10);
}

.my-navbar .dropdown-item {
	font-size: 1rem;
	font-weight: 500;
	border-radius: 10px;
	padding: .55rem .8rem;
	/* Certains intitulés de formation sont longs : on autorise le retour ligne */
	white-space: normal;
	color: var(--second-color);
}

.my-navbar .dropdown-item:focus,
.my-navbar .dropdown-item:hover,
.my-navbar .dropdown-item.active {
	background-color: var(--brand-tint);
	color: var(--brand-ink) !important;
}

/* Respiration entre les entrées. On l'obtient par un gap et non par du padding :
   le padding élargirait aussi la pilule de la page active. */
@media (min-width: 992px) {
	.my-navbar .navbar-nav {
		column-gap: .85rem;
	}
}

/* Menu déplié : on aplatit le sous-menu plutôt que de superposer une carte */
@media (max-width: 991.98px) {
	.my-navbar .navbar-collapse {
		padding-bottom: 1rem;
	}
	.my-navbar .navbar-nav {
		padding-top: .5rem;
	}
	/* min-width annulé : à plat dans le menu mobile, il provoquerait
	   un débordement horizontal sur les petits écrans. */
	.my-navbar .dropdown-menu {
		min-width: 0;
		border: 0;
		padding: 0 0 0 .6rem;
		background-color: transparent;
		box-shadow: none;
	}
}


/*--------------------------------------------------------------
	FOOTER
--------------------------------------------------------------*/
.footer {
	background-color: var(--brand-tint);
	border-top: 1px solid var(--brand-tint);
	padding: 3.5rem 0 1.5rem;
	font-weight: 300;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.footer-baseline {
	margin: 1rem 0 0;
	max-width: 28ch;
	color: #3f3f3f;
	line-height: 1.55;
}

.footer-title {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: var(--brand-ink);
	margin-bottom: 1.1rem;
}

.footer-links {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.footer-links li + li {
	margin-top: .6rem;
}

.footer-links a {
	color: #3f3f3f;
	text-decoration: none;
	line-height: 1.45;
	transition: color .25s ease;
}

.footer-links a:hover,
.footer-links a:focus {
	color: var(--brand-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer-links i {
	color: var(--brand-ink);
	margin-right: .4rem;
}

.footer-social {
	margin-top: 1.2rem;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--white-color);
	color: var(--brand-ink);
	font-size: 1.15rem;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.footer-social a:hover,
.footer-social a:focus {
	color: var(--brand-ink);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(231, 86, 200, .22);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(184, 50, 157, .14);
}

.footer-bottom p {
	margin-bottom: 0;
	font-size: .88rem;
	color: #6B6B6B;
}

.footer-credit a {
	color: #6B6B6B;
	text-decoration: none;
	transition: color .25s ease;
}

.footer-credit a:hover,
.footer-credit a:focus {
	color: var(--brand-ink);
}

/* md : 2 colonnes ; sm : empilement complet (l'ancien col-6 se tassait) */
@media (max-width: 991.98px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 575.98px) {
	.footer {
		padding-top: 2.5rem;
	}
	.footer-grid {
		grid-template-columns: 1fr;
	}
	.footer-bottom {
		margin-top: 2rem;
	}
}

/*--------------------------------------------------------------
	FONT
--------------------------------------------------------------*/
.ftz-10 {
	font-size: 10px;
}

.ftz-12 {
	font-size: 12px;
}

.ftz-15 {
	font-size: 15px;
}

.ftz-18 {
	font-size: 18px;
}

.ftz-20 {
	font-size: 20px;
}

.ftz-24 {
	font-size: 24px;
}

.ftz-30 {
	font-size: 30px;
}

.ftz-36 {
	font-size: 36px;
}

.ftz-50 {
	font-size: 55px;
}

.ftz-55 {
	font-size: 55px;
}

.ftz-75 {
	font-size: 75px;
}

.ftw-100 {
	font-weight: 100;
}

.ftw-300 {
	font-weight: 300;
}

.ftw-500 {
	font-weight: 500;
}

.ftw-700 {
	font-weight: 700;
}

.ftw-900 {
	font-weight: 900;
}

.ft-italic {
	font-style: italic;
}

.text-justify {
	text-align: justify;
}

.text-align-right {
	text-align: right;
}

.font-alt {
	text-transform: uppercase;
}

.text-deco-no {
	text-decoration: none;
}

.display-none {
	display: none;
}


/*--------------------------------------------------------------
	SORTABLE ITEMS
--------------------------------------------------------------*/
.sortable-items {
	cursor: pointer;
}


/*--------------------------------------------------------------
	MODALS
--------------------------------------------------------------*/
.modal-header {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}


.nav-pills .nav-link {
	border-radius: 0px;
}


.accordion-button:not(.collapsed) {
	color: var(--first-color);
	background-color: var(--white-color);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}




/*--------------------------------------------------------------
	MARGIN
--------------------------------------------------------------*/
.mt-6 {
	margin-top: 6rem !important;
}

.mb-6 {
	margin-bottom: 6rem !important;
}

.my-6 {
	margin-top: 6rem !important;
	margin-bottom: 6rem !important;
}

.mt-7 {
	margin-top: 8rem !important;
}

.mb-7 {
	margin-bottom: 8rem !important;
}

.my-7 {
	margin-top: 8rem !important;
	margin-bottom: 8rem !important;
}

.mt-8 {
	margin-top: 10rem !important;
}

.mb-8 {
	margin-bottom: 10rem !important;
}

.my-8 {
	margin-top: 10rem !important;
	margin-bottom: 10rem !important;
}



/*--------------------------------------------------------------
	Preloader
--------------------------------------------------------------*/
:root {
	--loader-logo-initial-width: 60px;
	--loader-logo-initial-margin: -30px 0 0 -30px;
	--loader-logo-initial-opacity: -0.3;

	--loader-logo-final-width: 120px;
	--loader-logo-final-margin: -60px 0 0 -60px;
	--loader-logo-final-opacity: 1;
}

.page-loader {
	position: fixed;
	background: var(--first-color);
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: 9998;
}

.loader {
	position: absolute;
	width: var(--loader-logo-initial-width);
	margin: var(--loader-logo-initial-margin);
	left: 50%;
	top: 40%;
	text-indent: -9999em;
	z-index: 9999;
	animation: load 2s infinite linear;
}

/* .loader,
.loader:after {
	border-radius: 50%;
} */


@-webkit-keyframes load {
	0% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}

	50% {
		opacity: var(--loader-logo-final-opacity);
		width: var(--loader-logo-final-width);
		margin: var(--loader-logo-final-margin);
	}

	100% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}
}

@keyframes load {
	0% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}

	50% {
		opacity: var(--loader-logo-final-opacity);
		width: var(--loader-logo-final-width);
		margin: var(--loader-logo-final-margin);
	}

	100% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}
}


/*--------------------------------------------------------------
	PROGRESS BAR
--------------------------------------------------------------*/
.progress-bar{
	background-color: var(--first-color);
}


/*--------------------------------------------------------------
	EN-TÊTES DE SECTION — primitive partagée

	Employée par les sections de l'accueil et par le bloc contact,
	lui-même inclus dans les quatre pages formation. D'où sa place
	ici plutôt que dans index.css.

	Ne pas confondre avec .fsection-title (formation.css), qui est
	le titre interne des pages formation.
--------------------------------------------------------------*/
.section-head {
	max-width: 46rem;
	margin-bottom: 2.75rem;
}

.section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section-eyebrow {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 500;
	font-size: .78rem;
	color: var(--brand-ink);
	margin-bottom: .9rem;
}

.section-title {
	font-size: 2.1rem;
	font-weight: 300;
	letter-spacing: .5px;
	color: var(--brand-ink);
	margin-bottom: 1rem;
}

.section-lead {
	font-size: 1.12rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--prose);
	/* Longueur de ligne confortable */
	max-width: 62ch;
	margin-bottom: 0;
}

.section-head--center .section-lead {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767.98px) {
	.section-title {
		font-size: 1.7rem;
	}
}


/*--------------------------------------------------------------
	BLOC CONTACT — colonne des coordonnées

	Le formulaire occupe la colonne de gauche ; celle-ci porte les
	moyens de me joindre directement. Chaque entrée est un lien
	actionnable, pas un texte à recopier.
--------------------------------------------------------------*/
/* Phrase d'accroche en tête de chacune des deux colonnes. Sans elle, le
   .fs-5 du conteneur les afficherait en 20px, hors d'échelle du reste. */
.contact-intro {
	font-size: 1rem;
	color: var(--prose);
	margin-bottom: 1.25rem;
}

.contact-aside-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .85rem;
}

.contact-aside-list a {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--rule);
	border-radius: 14px;
	background-color: var(--white-color);
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease,
	            transform .25s ease;
}

.contact-aside-list a:hover,
.contact-aside-list a:focus-visible {
	border-color: var(--brand);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(184, 50, 157, .14);
}

.contact-aside-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.2rem;
	color: var(--brand-ink);
	background-color: var(--brand-tint);
	transition: color .25s ease, background-color .25s ease;
}

.contact-aside-list a:hover .contact-aside-icon,
.contact-aside-list a:focus-visible .contact-aside-icon {
	color: var(--white-color);
	background-color: var(--brand-ink);
}

.contact-aside-body {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	/* L'adresse e-mail est longue : elle doit pouvoir se couper. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.contact-aside-label {
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--muted);
}

.contact-aside-value {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--second-color);
}


/*--------------------------------------------------------------
	APPARITION AU SCROLL
	Partagé par la page d'accueil et les pages formation.
	Les éléments .reveal sont masqués puis révélés par app-common.js ;
	.fstagger fait apparaître les enfants en cascade.
--------------------------------------------------------------*/
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.reveal .fstagger > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .5s ease, transform .5s ease;
}

.reveal.is-visible .fstagger > * {
	opacity: 1;
	transform: none;
}

.reveal.is-visible .fstagger > *:nth-child(1) { transition-delay: .10s; }
.reveal.is-visible .fstagger > *:nth-child(2) { transition-delay: .19s; }
.reveal.is-visible .fstagger > *:nth-child(3) { transition-delay: .28s; }
.reveal.is-visible .fstagger > *:nth-child(4) { transition-delay: .37s; }
.reveal.is-visible .fstagger > *:nth-child(n+5) { transition-delay: .46s; }

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal .fstagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
	Posé sur <html> par app-common.js quand l'apparition au scroll n'a pas
	lieu d'être (page plus courte que la fenêtre, capture pleine page,
	IntersectionObserver absent). Le contenu s'affiche sans transition :
	on ne veut à aucun moment d'une section vide à l'écran.
*/
.reveal-off .reveal,
.reveal-off .reveal .fstagger > * {
	opacity: 1;
	transform: none;
	transition: none;
}


/*--------------------------------------------------------------
	SCROLL UP BUTTON
--------------------------------------------------------------*/
/*
	L'affichage est piloté par titan/main.js (fadeIn/fadeOut sur le conteneur),
	on ne touche donc pas à display/opacity ici : uniquement l'apparence du bouton.
*/
.scroll-up {
	position: fixed;
	display: none;
	bottom: 24px;
	right: 24px;
	z-index: 999;
}

.scroll-up a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	font-size: 1.35rem;
	line-height: 1;
	text-decoration: none;
	color: var(--brand-ink);
	background-color: var(--white-color);
	border: 1px solid var(--brand-tint);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
	transition: color .25s ease, background-color .25s ease,
	            transform .25s ease, box-shadow .25s ease;
}

.scroll-up a:hover,
.scroll-up a:focus-visible {
	color: var(--white-color);
	background-color: var(--brand-ink);
	border-color: var(--brand-ink);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(184, 50, 157, .34);
}

.scroll-up a:active {
	transform: translateY(-1px);
}

@media (max-width: 575.98px) {
	.scroll-up {
		bottom: 16px;
		right: 16px;
	}
	.scroll-up a {
		width: 50px;
		height: 50px;
		font-size: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scroll-up a {
		transition: none;
	}
	.scroll-up a:hover,
	.scroll-up a:focus-visible,
	.scroll-up a:active {
		transform: none;
	}
}