/**
 * animations.css — Transitions et effets visuels.
 *
 * Garde ce fichier léger : uniquement les effets non critiques.
 * Les transitions fonctionnelles (btn hover, nav active) sont dans leur fichier respectif.
 *
 * @package lafetecontinue-allianz
 */

/* ==========================================================================
   CARTE CONCOURS — Hover
   ========================================================================== */

.concours-card {
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.concours-card:hover {
	transform:  translateY(-4px);
	box-shadow: 0 8px 24px rgba(18, 43, 84, 0.25);
}

/* ==========================================================================
   LIENS FOOTER — Hover
   ========================================================================== */

.footer-nav__link {
	transition: opacity var(--transition-base), text-decoration var(--transition-base);
}

/* ==========================================================================
   IMAGES — Zoom doux au hover
   ========================================================================== */

.section-presentation__image,
.laureats-bloc__image,
.section-proximite__image {
	overflow: hidden;
}

.section-presentation__img,
.laureats-bloc__image img,
.section-proximite__image img {
	transition: transform var(--transition-slow);
}

.section-presentation__image:hover .section-presentation__img,
.laureats-bloc:hover .laureats-bloc__image img,
.section-proximite__cols:hover .section-proximite__image img {
	transform: scale(1.03);
}

/* ==========================================================================
   MODAL — Fenêtre modale (.lafete-modal)
   ========================================================================== */

/* Body bloqué quand une modal est ouverte */
body.modal-open {
	overflow: hidden;
}

/* Conteneur global — positionné en fixed sur tout l'écran */
.lafete-modal {
	display: none; /* Masqué par défaut — aucune interaction possible */
}

/* État ouvert : display flex d'abord, puis transition opacity via is-open */
.lafete-modal.is-open {
	position:        fixed;
	inset:           0;
	z-index:         var(--z-modal, 1000);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         1.5rem;
	opacity:         1;
	animation:       modal-fade-in 0.3s ease both;
}

@keyframes modal-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Backdrop semi-transparent */
.lafete-modal__backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(18, 43, 84, 0.7);
	cursor:     pointer;
}

/* Boîte blanche centrale */
.lafete-modal__box {
	position:       relative;
	z-index:        1;
	background:     var(--color-white);
	border-radius:  var(--btn-radius);
	width:          100%;
	max-width:      680px;
	max-height:     85dvh;
	display:        flex;
	flex-direction: column;
	box-shadow:     0 24px 64px rgba(18, 43, 84, 0.25);
	animation:      modal-slide-in 0.3s ease both;
}

@keyframes modal-slide-in {
	from {
		transform: translateY(16px);
	}
	to {
		transform: translateY(0);
	}
}

/* En-tête : titre + bouton fermeture */
.lafete-modal__header {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             1rem;
	padding:         1.75rem 1.75rem 1.25rem;
	border-bottom:   1px solid var(--color-grey);
	flex-shrink:     0;
}

.lafete-modal__title {
	font-size:   var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	color:       var(--color-blue-dark);
	line-height: 1.3;
	margin:      0;
}

/* Bouton × */
.lafete-modal__close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           2.25rem;
	height:          2.25rem;
	background:      transparent;
	border:          none;
	border-radius:   var(--btn-radius);
	color:           var(--color-blue-dark);
	cursor:          pointer;
	transition:      background-color var(--transition-base);
}

.lafete-modal__close:hover,
.lafete-modal__close:focus-visible {
	background-color: var(--color-cyan-pale);
}

.lafete-modal__close:focus-visible {
	outline:        3px solid var(--color-yellow);
	outline-offset: 2px;
}

/* Corps scrollable */
.lafete-modal__content {
	padding:    1.75rem;
	overflow-y: auto;
	color:      var(--color-blue-dark);
	line-height: var(--line-height-body);
}

/* Responsive — mobile */
@media (max-width: 425px) {

	.lafete-modal {
		padding:    0;
		align-items: flex-end; /* Sheet du bas sur mobile */
	}

	.lafete-modal__box {
		max-width:     100%;
		max-height:    92dvh;
		border-radius: var(--btn-radius) var(--btn-radius) 0 0;
	}
}

/* ==========================================================================
   SCROLL REVEAL — Fade in au scroll (optionnel, non bloquant)
   Utilise CSS uniquement via @starting-style si supporté.
   Désactivé si l'utilisateur préfère les animations réduites.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration:   0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:  0.01ms !important;
		scroll-behavior:      auto !important;
	}
}