/* ==========================================================================
   PURAL.DE — animations.css
   Couche additive : micro-interactions, reveals, focus, accessibilité.
   GPU only (transform / opacity). Respecte prefers-reduced-motion.
   Chargé après styles.css et responsive.css.
   ========================================================================== */

/* --- Variables (fallback si le JS n'a pas encore injecté les couleurs) --- */

:root {
--mainColorA:#90b71c;
--mainColorB:#97bf21;
--subColorA:#0081c9;
--subColorB:#6fd3e7;
--anim-dur:.3s;
--anim-dur-slow:.55s;
--anim-ease:cubic-bezier(.22,.61,.36,1);
--anim-ease-out:cubic-bezier(.16,1,.3,1);
--focus-ring:color-mix(in srgb, var(--subColorA) 70%, #000 0%)
}

html { scroll-behavior:smooth }

/* Décale les ancres sous le header collant */
:target { scroll-margin-top:120px }

#content { scroll-margin-top:100px }

/* ==========================================================================
   ACCESSIBILITÉ — skip-link + focus visible
   ========================================================================== */

.skip-link {
position:absolute;
z-index:9999;
background:var(--mainColorA);
border-radius:0 0 8px 0;
color:#fff;
text-decoration:none;
font-size:15px;
font-weight:700;
top:-60px;
left:8px;
transition:top var(--anim-dur) var(--anim-ease);
padding:12px 20px
}

.skip-link:focus { top:0 }

:focus-visible {
outline:3px solid var(--focus-ring);
outline-offset:3px
}

a:focus-visible,
button:focus-visible {
border-radius:4px
}

/* ==========================================================================
   BOUTONS — lift + reflet lumineux au survol
   ========================================================================== */

.btnNormal {
position:relative;
overflow:hidden;
backface-visibility:hidden;
transition:transform var(--anim-dur) var(--anim-ease), box-shadow var(--anim-dur) var(--anim-ease)
}

.btnNormal::after {
content:"";
position:absolute;
z-index:1;
top:0;
left:0;
width:60%;
height:100%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
pointer-events:none;
transform:translate3d(-160%,0,0) skewX(-18deg);
transition:transform var(--anim-dur-slow) var(--anim-ease-out)
}

.btnNormal:hover,
.btnNormal:focus-visible {
box-shadow:0 12px 26px -10px color-mix(in srgb, var(--mainColorA) 65%, transparent);
transform:translate3d(0,-3px,0)
}

.btnNormal:hover::after,
.btnNormal:focus-visible::after { transform:translate3d(260%,0,0) skewX(-18deg) }

.btnNormal:active { transform:translate3d(0,-1px,0) }

/* ==========================================================================
   CARTES CATÉGORIES — zoom image + révélation de l'overlay
   ========================================================================== */

.category-image-container { overflow:hidden }

.category-image {
backface-visibility:hidden;
transition:transform var(--anim-dur-slow) var(--anim-ease-out)
}

.category-card:hover .category-image { transform:translate3d(0,0,0) scale(1.07) }

.category-overlay {
opacity:0;
transition:opacity var(--anim-dur) var(--anim-ease)
}

.category-card:hover .category-overlay,
.category-card:focus-within .category-overlay { opacity:1 }

.category-title { transition:color var(--anim-dur) var(--anim-ease) }

.category-card:hover .category-title,
.category-card:focus-within .category-title { color:var(--mainColorA) }

/* ==========================================================================
   CARTES MARQUES — lift + halo à la couleur de la marque
   ========================================================================== */

.marques_card {
backface-visibility:hidden;
transition:transform var(--anim-dur) var(--anim-ease), box-shadow var(--anim-dur) var(--anim-ease)
}

.marques_card:hover,
.marques_card:focus-within {
box-shadow:0 20px 44px -14px color-mix(in srgb, var(--marqueAccent) 60%, transparent);
transform:translate3d(0,-6px,0)
}

.marques_logo img {
backface-visibility:hidden;
transition:transform var(--anim-dur) var(--anim-ease)
}

.marques_card:hover .marques_logo img { transform:translate3d(0,0,0) scale(1.06) }

/* ==========================================================================
   ÉQUIPE — lift discret des cartes membres
   ========================================================================== */

.team_member {
backface-visibility:hidden;
transition:transform var(--anim-dur) var(--anim-ease), box-shadow var(--anim-dur) var(--anim-ease)
}

.team_member:hover {
box-shadow:0 16px 34px -16px rgba(0,0,0,.28);
transform:translate3d(0,-5px,0)
}

/* ==========================================================================
   LIENS — soulignement animé (contact, footer, mentions légales)
   ========================================================================== */

.contact-info a,
.footer_legal a,
.team_links a {
position:relative;
text-decoration:none
}

.contact-info a::after,
.footer_legal a::after,
.team_links a::after {
content:"";
position:absolute;
width:100%;
height:1px;
background:currentColor;
opacity:.85;
bottom:-2px;
left:0;
transform:scale3d(0,1,1);
transform-origin:right center;
transition:transform var(--anim-dur) var(--anim-ease)
}

.contact-info a:hover::after,
.footer_legal a:hover::after,
.team_links a:hover::after,
.contact-info a:focus-visible::after,
.footer_legal a:focus-visible::after,
.team_links a:focus-visible::after {
transform-origin:left center;
transform:scale3d(1,1,1)
}

/* ==========================================================================
   SOCIAL STICKY + RETOUR HAUT — micro-interactions
   ========================================================================== */

#socialSticky a {
backface-visibility:hidden;
transition:transform var(--anim-dur) var(--anim-ease), background-color var(--anim-dur) var(--anim-ease)
}

#socialSticky a:hover { transform:translate3d(-4px,0,0) scale(1.12) }

#goTop {
backface-visibility:hidden;
transition:transform var(--anim-dur) var(--anim-ease), opacity var(--anim-dur) var(--anim-ease)
}

#goTop:hover { transform:translate3d(0,-4px,0) }

/* ==========================================================================
   LOGOS PARTENAIRES / MARQUES FOOTER — révélation au survol
   ========================================================================== */

.footer_brand img {
opacity:.9;
transition:transform var(--anim-dur) var(--anim-ease), opacity var(--anim-dur) var(--anim-ease)
}

.footer_brand img:hover {
opacity:1;
transform:translate3d(0,-2px,0) scale(1.04)
}

/* ==========================================================================
   PRÉFÉRENCE RÉDUCTION DES ANIMATIONS — coupe tout mouvement
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {
	html { scroll-behavior:auto }

	*,
	*::before,
	*::after {
	animation-duration:.001ms !important;
	animation-iteration-count:1 !important;
	transition-duration:.001ms !important
	}
}