/* Flore — Bandeau 1.24.0
   Huit carrés jointifs, cliquables : le menu principal du site.
   Grille CSS, aucun JavaScript. */

.flore-bandeau {
	--flore-bandeau-violet: 76, 58, 107;      /* #4C3A6B — le violet foncé du site */
	--flore-bandeau-violet-vif: #624885;      /* le violet dominant, assombri d'un cran :
	                                             à #7b5aa6 l'orange du survol ne tenait
	                                             que 3,5:1, ici il tient 4,8:1 */
	--flore-bandeau-creme: #f6f2e7;
	--flore-bandeau-rose: #ad717b;
	--flore-bandeau-orange: #ffc561;          /* l'orange du survol, poussé vers le jaune :
	                                             le plus loin du violet qu'un orange puisse
	                                             aller — 4,8:1 sur le fond de survol */
	--flore-bandeau-colonnes: 8;
	display: block;
	width: 100%;
}

/* Le nombre de colonnes suit le nombre de tuiles : c'est lui qui fixe la hauteur
   du bandeau, égale à la largeur du site divisée par ce nombre.
   Sur 1400 px : huit carrés font 175 px de haut, quatre en feraient 350. */
.flore-bandeau--n4 {
	--flore-bandeau-colonnes: 4;
}

.flore-bandeau--n5 {
	--flore-bandeau-colonnes: 5;
}

.flore-bandeau--n6 {
	--flore-bandeau-colonnes: 6;
}

.flore-bandeau--n7 {
	--flore-bandeau-colonnes: 7;
}

.flore-bandeau--n8 {
	--flore-bandeau-colonnes: 8;
}

.flore-bandeau__liste {
	display: grid;
	grid-template-columns: repeat(var(--flore-bandeau-colonnes), 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flore-bandeau__case {
	margin: 0;
	padding: 0;
	list-style: none;
}

.flore-bandeau__lien {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	line-height: 0;
	text-decoration: none;
	background: var(--flore-bandeau-creme);
}

.flore-bandeau__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.flore-bandeau__lien:hover .flore-bandeau__image,
.flore-bandeau__lien:focus-visible .flore-bandeau__image {
	transform: scale(1.1);
}

/* Le libellé : toujours affiché. Le bandeau est le menu principal — un menu
   dont les entrées ne se lisent qu'au survol n'existe ni sur un téléphone, ni
   pour qui arrive sur le site sans avoir encore bougé la souris.
   Fond violet plein, pas d'italique : c'est une entrée de menu, pas une légende. */
.flore-bandeau__libelle {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5em;
	padding: 0.35em 0.3em;
	background: rgba(var(--flore-bandeau-violet), 0.92);
	color: var(--flore-bandeau-creme);
	font-size: clamp(0.8rem, 1.15vw, 1.05rem);
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-wrap: balance;
	transition: background-color 0.25s ease;
}

.flore-bandeau__lien:hover .flore-bandeau__libelle,
.flore-bandeau__lien:focus-visible .flore-bandeau__libelle {
	background: var(--flore-bandeau-violet-vif);
	color: var(--flore-bandeau-orange);
}

/* Le cadre du survol : léger — deux pixels contre trois au focus clavier —,
   posé au-dessus de l'image et du libellé, et qui s'efface dès que la souris
   sort. Il double la couleur : le survol se voit aussi sans distinguer
   l'orange du crème. */
.flore-bandeau__lien::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	border: 3px solid var(--flore-bandeau-orange);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.flore-bandeau__lien:hover::after {
	opacity: 1;
}

/* Au clavier, le cadre rose du focus fait déjà ce travail : on n'en superpose
   pas deux. */
.flore-bandeau__lien:focus-visible::after {
	opacity: 0;
}

/* La page qu'on lit. Le menu texte surligne son entrée courante ; le bandeau
   le faisait pas. Filet rose — la couleur qui, sur ce site, dit où l'on est. */
.flore-bandeau__lien--actif .flore-bandeau__libelle {
	background: rgba(var(--flore-bandeau-violet), 0.98);
	box-shadow: inset 0 3px 0 var(--flore-bandeau-rose);
}

/* Focus clavier : visible sur les huit fonds, y compris les deux lavis pâles.
   Le contour seul est recouvert par l'image ; le cadre en ::before passe au-dessus. */
.flore-bandeau__lien:focus-visible {
	outline: 3px solid var(--flore-bandeau-rose);
	outline-offset: -3px;
}

.flore-bandeau__lien:focus-visible::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	border: 3px solid var(--flore-bandeau-rose);
	pointer-events: none;
}

/* Sous 600 px : quatre colonnes sur deux rangées. Les huit destinations restent
   toutes atteignables — c'est le menu principal, on n'en ampute pas la moitié —
   et les libellés restent lisibles. Sur 390 px, chaque carré fait 97 px et le
   bandeau 195 px de haut. */
@media (max-width: 600px) {
	.flore-bandeau {
		--flore-bandeau-colonnes: 4;
	}

	.flore-bandeau__libelle {
		min-height: 2.4em;
		padding: 0.3em 0.15em;
		font-size: 0.7rem;
		line-height: 1.15;
		letter-spacing: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flore-bandeau__image,
	.flore-bandeau__libelle,
	.flore-bandeau__lien::after {
		transition: none;
	}

	.flore-bandeau__lien:hover .flore-bandeau__image,
	.flore-bandeau__lien:focus-visible .flore-bandeau__image {
		transform: none;
	}
}