/*
 * Nos ajouts au template Colorlib.
 *
 * `style.css` (264 Ko) est le fichier du template et ne doit pas être modifié : toute retouche
 * va ici, et cette feuille est chargée en dernier pour avoir le dernier mot.
 */

/* ------------------------------------------------------------------
 * Tiroir d'alerte — le message du magasin, sur le bord droit
 *
 * Remplace le bandeau pleine largeur : un panneau collé au bord droit, à mi-hauteur, qui glisse
 * depuis la droite au chargement. Il ne prend que la hauteur de son contenu.
 *
 * Fermé, il laisse une languette permettant de le rouvrir. La fermeture est mémorisée pour la
 * durée de la visite (sessionStorage, voir assets/js/tiroir-alerte.js).
 *
 * Les couleurs viennent des classes Bootstrap du template (`alert alert-danger`…), choisies par
 * le client dans l'administration : rien n'est codé en dur ici.
 * ------------------------------------------------------------------ */

.tiroir-alerte {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1040; /* au-dessus du contenu, sous les modales Bootstrap (1050) */
	width: 320px;
	max-width: calc(100vw - 40px);
	/* Le conteneur ne doit pas intercepter les clics à côté du panneau. */
	pointer-events: none;
}

.tiroir-alerte > * {
	pointer-events: auto;
}

/* --- Le panneau --- */

.tiroir-alerte__panneau {
	position: relative;
	width: 100%;
	/* Jamais toute la hauteur : au-delà, le contenu défile dans le panneau. */
	max-height: 70vh;
	overflow-y: auto;
	margin: 0;
	padding: 20px 40px 20px 20px;
	border-radius: 5px 0 0 5px;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.45s ease;
	/* État par défaut : sorti. Sans JavaScript, le message reste donc visible — il ne dépend
	   d'aucun script pour s'afficher. */
	transform: translateX(0);
}

/* Les deux états pilotés par le JavaScript. Deux classes explicites plutôt qu'une seule :
   revenir à « aucune classe » relançait l'animation d'entrée et le panneau restait bloqué
   hors de l'écran. */
.tiroir-alerte--ferme .tiroir-alerte__panneau {
	transform: translateX(100%);
}

.tiroir-alerte--ouvert .tiroir-alerte__panneau {
	transform: translateX(0);
}

/* Pose l'état initial sans l'animer : le JavaScript rentre le panneau, puis le fait glisser. */
.tiroir-alerte--sans-transition .tiroir-alerte__panneau,
.tiroir-alerte--sans-transition .tiroir-alerte__languette {
	transition: none;
}

.tiroir-alerte__contenu {
	line-height: 1.5;
}

/* --- Le bouton de fermeture --- */

.tiroir-alerte__fermer {
	position: absolute;
	top: 6px;
	right: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	opacity: 0.6;
	cursor: pointer;
}

.tiroir-alerte__fermer:hover,
.tiroir-alerte__fermer:focus {
	opacity: 1;
}

/* --- La languette, visible une fois le tiroir fermé --- */

/* Positionnée en absolu et non dans le flux : dans un conteneur en flex, elle se retrouvait à
   gauche du panneau et restait donc visible tiroir ouvert. Collée au bord droit, elle sort de
   l'écran quand le panneau est sorti, et réapparaît quand il rentre. */
.tiroir-alerte__languette {
	position: absolute;
	top: 50%;
	right: 0;
	width: 40px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px 0 0 5px;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
	font-size: 22px;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	transform: translate(100%, -50%);
	transition: transform 0.45s ease;
}

/* Elle ne se montre que lorsque le panneau est rentré. */
.tiroir-alerte--ferme .tiroir-alerte__languette {
	transform: translate(0, -50%);
}

.tiroir-alerte--ouvert .tiroir-alerte__languette {
	transform: translate(100%, -50%);
}

.tiroir-alerte__languette-icone {
	display: block;
}

/* --- Mobile : le tiroir descend en bas d'écran, plus lisible qu'un panneau collé au bord --- */

@media (max-width: 575.98px) {
	/* Sur mobile, le tiroir descend vers le bas de l'écran mais **reste ancré à droite** : c'est
	   un tiroir latéral, pas un bandeau. Une version antérieure l'étirait entre les deux bords,
	   ce qui le recentrait — Gérôme l'a signalé le 2026-07-20.
	   Il est simplement remonté du bas, où les navigateurs mobiles posent leur barre d'outils.
	   `env(safe-area-inset-bottom)` ajoute la marge des iPhone à encoche. */
	.tiroir-alerte {
		top: auto;
		bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		transform: none;
	}

	.tiroir-alerte__panneau {
		max-height: 50vh;
	}

	/* Alignée sur le bas de la carte plutôt qu'à mi-hauteur. */
	.tiroir-alerte__languette {
		top: auto;
		bottom: 0;
		transform: translate(100%, 0);
	}

	.tiroir-alerte--ferme .tiroir-alerte__languette {
		transform: translate(0, 0);
	}

	.tiroir-alerte--ouvert .tiroir-alerte__languette {
		transform: translate(100%, 0);
	}
}

/* Respecte le réglage système de ceux qui limitent les animations. */
@media (prefers-reduced-motion: reduce) {
	.tiroir-alerte__panneau,
	.tiroir-alerte__languette {
		transition: none;
		animation: none;
	}
}

/* ------------------------------------------------------------------
 * Cartes de forfaits d'atelier — hauteur égale
 *
 * Leur hauteur suivait la longueur du texte : selon le nombre de prestations et leur retour à la
 * ligne, les cartes d'une même rangée ne s'alignaient pas en bas.
 *
 * La colonne porte `d-flex` (Bootstrap), la carte s'étire sur toute sa hauteur, et la liste des
 * prestations occupe l'espace restant — le bas des cartes tombe donc au même niveau.
 * ------------------------------------------------------------------ */

.forfait-carte {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Pousse la liste à occuper la hauteur libre : c'est elle qui absorbe l'écart. */
.forfait-carte ul {
	flex-grow: 1;
	margin-bottom: 0;
}

/* En dessous de 768px les colonnes passent l'une sous l'autre : plus rien à égaliser,
   mais on garde un écart entre les cartes empilées. */
@media (max-width: 767.98px) {
	.forfait-carte {
		margin-bottom: 30px;
	}
}

/* ------------------------------------------------------------------
 * Carrousels de cartes (partenaires sur l'accueil, catalogue sur /vente) — hauteur égale
 *
 * L'image est déjà figée à 350px par le template : c'est le texte en dessous (nom, description,
 * prix) qui fait varier la hauteur. Mesuré avant correctif : jusqu'à 144 px d'écart entre les
 * cartes d'un même carrousel, donc des fonds gris qui ne s'alignent pas.
 *
 * Owl Carousel place les cartes dans .owl-stage > .owl-item. En rendant cette chaîne flex, toutes
 * les cartes d'une même vue prennent la hauteur de la plus haute.
 * ------------------------------------------------------------------ */

.carousel-team .owl-stage {
	display: flex;
}

.carousel-team .owl-item {
	display: flex;
	height: auto;
}

.carousel-team .item {
	display: flex;
	width: 100%;
}

/* .team est en `display: block` dans style.css : cette règle passe après et l'emporte. */
.carousel-team .team {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ------------------------------------------------------------------
 * Cadre d'image des cartes — proportions au lieu d'une hauteur fixe
 *
 * Le template fige `.team .img` à 350px de haut, quelle que soit la largeur de la carte. Mesuré :
 * un cadre de 269 x 350 (ratio 0.77) alors que toutes les images du site sont carrées — avec
 * `background-size: cover`, 23 % de la largeur était rognée. Sur un logo large comme MUC-OFF
 * (173x57), il ne restait qu'une tranche centrale : 75 % perdus.
 *
 * Le cadre suit désormais la largeur de la carte en restant carré, comme les images.
 * ------------------------------------------------------------------ */

.carousel-team .team .img {
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Fond blanc sous l'image, sur les deux carrousels : la carte est gris foncé (#333 dans le
   template), et un logo en `contain` laissait apparaître ce gris autour de lui. Le blanc donne
   une zone d'image homogène d'une carte à l'autre, quelles que soient les proportions du fichier. */
.carousel-team .team .img {
	background-color: #fff;
}

/* Les partenaires sont des logos, souvent très larges : `cover` les couperait même dans un cadre
   carré. `contain` les montre en entier — un logo doit rester lisible. Le catalogue, lui, garde
   `cover` : ce sont des photos de vélos, elles doivent remplir la carte. */
.carousel-partenaires .team .img {
	background-size: contain;
	padding: 20px;
}

/* ------------------------------------------------------------------
 * Fiche produit
 *
 * Le template Colorlib n'a pas de page produit : ces quelques règles suffisent à poser la
 * galerie et le bloc d'informations, en réutilisant ses couleurs et ses composants.
 * ------------------------------------------------------------------ */

.produit-galerie__principale {
	display: block;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
}

.produit-galerie__principale img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.produit-galerie__vignettes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.produit-galerie__vignette {
	display: block;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
}

.produit-galerie__vignette img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Sans photo, un cadre neutre plutôt qu'un trou dans la mise en page. */
.produit-galerie__vide {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: #f2f2f2;
	border-radius: 5px;
	color: #999;
}

.produit-details__prix {
	font-size: 28px;
	font-weight: bold;
}

.produit-details__description {
	margin-bottom: 30px;
	line-height: 1.7;
}

.produit-details__retour {
	font-size: 14px;
}

@media (max-width: 991.98px) {
	.produit-details {
		margin-top: 30px;
	}
}

/* --- Le prochain événement, dans le tiroir --- */

.tiroir-evenement--separe {
	margin-top: 16px;
	padding-top: 16px;
	/* Un filet dans la couleur du texte courant : il s'adapte au bandeau choisi par le client
	   (rouge, orange, bleu…) sans qu'on ait à prévoir chaque cas. */
	border-top: 1px solid currentColor;
	opacity: 0.95;
}

.tiroir-evenement__surtitre {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

.tiroir-evenement__titre {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.3;
}

.tiroir-evenement__quand {
	margin: 0 0 10px;
	font-size: 14px;
}

.tiroir-evenement__lien {
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	color: inherit;
}

.tiroir-evenement__lien:hover,
.tiroir-evenement__lien:focus {
	color: inherit;
	opacity: 0.8;
}

/* Mention d'information sur le formulaire d'inscription : présente sans capter l'attention. */
.formulaire-rgpd {
	margin: 16px 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.8;
}