/* CSS spécifique à la page index (accueil) */

/* Hero gradient (accueil) */
.hero-gradient { position: relative; background: linear-gradient(125deg,#021b55 0%, #003ea9 40%, #ff8b1a 115%); }
/* Extension du gradient de .hero-gradient jusqu'en haut sous le header fixé */
.hero-gradient-interieur { align-items:center; }
.hero-gradient .titre-principal { font-size: clamp(64px,8vw,120px); line-height:.9; text-transform:uppercase; color:#fff; }
.hero-gradient .stroke-outline { color:transparent; -webkit-text-stroke: 3px #ffffff; }
@media (max-width:700px){ .hero-gradient .stroke-outline { -webkit-text-stroke:2px #fff; } }
.hero-gradient .date-hero { color:#ffffffdd; font-size: clamp(34px,4.2vw,60px); font-style:italic; }
.hero-gradient .rang-cta .bouton-contour { border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }
.hero-gradient .rang-cta .bouton-contour:hover { background:#fff; color:var(--ccl-blue); }
.hero-gradient .banniere-illustration.hero-media { box-shadow:0 25px 60px -18px rgba(0,0,0,.45),0 6px 18px -4px rgba(0,0,0,.35); }
.hero-gradient .banniere-illustration.hero-media video { filter:brightness(.9) saturate(1.2); }
.hero-gradient .banniere-illustration.hero-media .media-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,50,160,.3),rgba(255,131,0,.35)); mix-blend-mode:overlay; }

/*Packs et options*/
.options{ display:flex; flex-direction:column}




/* Carrousel partenaires */
.carrousel { overflow-x: hidden; overflow-y: visible; position: relative; padding-block: 30px; margin-block: -30px; }
.carrousel-piste { display:flex; gap:16px; will-change: transform; animation:defile-partenaires 100s linear infinite; overflow: visible; }
.carrousel-piste .partenaire { filter:none; min-width:200px; }
.carrousel-piste .partenaire img { height:100px; width:auto; max-width:100%; object-fit:contain; }
/* Utilise translate3d pour de meilleures performances (GPU) */
@keyframes defile-partenaires { from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-500%,0,0);} }


@media (max-width: 900px) {
	.carrousel-piste { animation-duration: 30s; }
}