/* ==========================================================================
   ASTP — Page d'accueil (index.html) — deuxième passe
   Utilise les composants partagés de style.css (section-head, card, kpis,
   logo-chip, icon-btn, cta-band…) ; ne contient que la mise en page propre
   à l'accueil.

   1. Hero (photo + mission, H1)
   2. Chiffres clés (carte qui chevauche le hero)
   3. L'ASTP en bref
   4. Par où commencer ? (cartes)
   5. Mur de logos des 19 sociétés (défilement)
   6. Carrousel des projets
   7. Quelques exploits
   8. Parmi nos événements
   9. Ils nous soutiennent
   10. Bandeau partenaires + utilitaires
   11. Mouvement réduit
   ========================================================================== */


/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero {
  --hero-overlap: 4.5rem;          /* hauteur recouverte par la carte des chiffres */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 86vh, 800px);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--p-700);  /* repli si la photo ne charge pas */
  color: var(--c-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Voile violet (remplace l'ancien voile brun) : garantit le contraste du texte blanc */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(33, 4, 51, 0.25) 0%, rgba(69, 16, 101, 0.55) 50%, rgba(33, 4, 51, 0.9) 100%);
  pointer-events: none;
}

@media (min-width: 900px) {
  .hero::after {
    background:
      linear-gradient(90deg, rgba(33, 4, 51, 0.7) 0%, rgba(33, 4, 51, 0) 65%),
      linear-gradient(180deg, rgba(33, 4, 51, 0.25) 0%, rgba(69, 16, 101, 0.55) 50%, rgba(33, 4, 51, 0.9) 100%);
  }
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: calc(44rem + 2 * clamp(2rem, 4vw, 4.5rem));
  padding: clamp(2rem, 4vw, 4.5rem);
  padding-bottom: calc(var(--hero-overlap) + 4.5rem);  /* place pour le repère de défilement */
}

.hero .eyebrow {
  margin-bottom: var(--space-sm);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-white);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(33, 4, 51, 0.35);
}

/* « Techniques » souligné d'un trait miel courbe (décoratif) */
.hero__mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero__underline {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.22em;
  overflow: visible;
  pointer-events: none;
}

.hero__underline path {
  fill: none;
  stroke: var(--c-honey);
  stroke-width: 6px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero__lead {
  max-width: 40rem;
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-white);
  text-shadow: 0 1px 12px rgba(33, 4, 51, 0.45);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.hero .btn-light {
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
}

/* Repère de défilement : cercle de 40px centré, au-dessus de la zone recouverte */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hero-overlap) + 1.25rem);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-white);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: hero-bounce 1.6s ease-in-out 3;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hero__scroll svg {
  width: 20px;
  height: 20px;
}

.hero__scroll:hover {
  background: var(--c-white);
  color: var(--p-700);
}

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Téléphones : contenu centré, voile renforcé, pas de repère de défilement */
@media (max-width: 599.98px) {
  .hero {
    --hero-overlap: 3.5rem;
    min-height: min(80vh, 640px);
    min-height: min(80svh, 640px);
    justify-content: center;
    text-align: center;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(33, 4, 51, 0.62) 0%, rgba(69, 16, 101, 0.66) 45%, rgba(33, 4, 51, 0.92) 100%);
  }

  .hero__content {
    padding: 2.5rem 1.25rem calc(var(--hero-overlap) + 2rem);
  }

  .hero .eyebrow,
  .hero__actions {
    justify-content: center;
  }

  /* Sur-titre en blanc : contraste AA garanti sur le voile mobile */
  .hero .eyebrow--on-dark {
    color: var(--c-white);
  }

  .hero__lead {
    margin-inline: auto;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__scroll {
    display: none;
  }
}

/* ==========================================================================
   2. Chiffres clés
   ========================================================================== */
.stats-card {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 60rem);
  margin: calc(var(--hero-overlap, 4.5rem) * -1) auto 0;
  padding: var(--space-md) var(--space-sm);
  background: var(--c-white);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-lg);
}

.hero + .stats-card {
  margin-top: -4.5rem;
}

@media (max-width: 599.98px) {
  .hero + .stats-card {
    margin-top: -3.5rem;
  }
}

@media (min-width: 900px) {
  .stats-card {
    padding: var(--space-lg) var(--space-md);
  }
}

.stats-card .kpi__label {
  max-width: 18ch;
}

/* Le chiffre animé garde sa largeur finale (pas de saut pendant le décompte) */
.kpi__anim {
  display: inline-block;
  text-align: center;
}

/* « 19 sociétés techniques » : tout l'élément est cliquable */
.kpi--link {
  position: relative;
}

.kpi__link {
  color: var(--p-700);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--p-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.kpi__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.kpi--link:hover .kpi__link {
  color: var(--p-800);
  text-decoration-color: currentColor;
}

@supports selector(:has(*)) {
  .kpi--link:has(.kpi__link:focus-visible) {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .kpi__link:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

/* La boîte blanche suit la carte des chiffres */
.stats-card + .content-box {
  margin-top: var(--space-lg);
}

@media (max-width: 479.98px) {
  .stats-card {
    width: calc(100% - 1.5rem);
    padding: var(--space-2xs) var(--space-md);
  }

}


/* ==========================================================================
   3. L'ASTP en bref
   ========================================================================== */
.about {
  display: grid;
  gap: var(--space-lg);
}

.about__text .section-head {
  margin-bottom: var(--space-md);
}

.about__text > p + p {
  margin-top: var(--space-sm);
}

.about__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-text);
}

/* Surlignage miel pâle (texte foncé sur fond #fdf1d6 : contraste conservé) */
.about__mark {
  background: linear-gradient(transparent 60%, var(--c-honey-soft) 60%);
  color: inherit;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about__text > .about__more {
  margin-top: var(--space-md);
}

.about__media {
  position: relative;
  isolation: isolate;
  align-self: start;
  margin: 0 16px 16px 0;
}

/* Carré lavande décalé derrière la photo */
.about__media::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  z-index: -1;
  border-radius: var(--radius-xl);
  background: var(--p-200);
}

.about__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 70% 50%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.about__caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: var(--c-white);
  color: var(--p-700);
  box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  /* Texte d'abord dans le DOM, image d'abord à l'écran */
  .about__media {
    order: -1;
  }

  .about__media img {
    aspect-ratio: 4 / 5;
  }
}


/* ==========================================================================
   4. Par où commencer ?
   ========================================================================== */
.feature-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

@media (min-width: 900px) {
  .feature-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature-card {
  gap: var(--space-xs);
  padding: var(--space-md);
}

@media (min-width: 1200px) {
  .feature-card {
    padding: 2rem;
  }
}

/* Public visé : pastille en haut à droite, face à l'icône */
.feature-card > .pill {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
}

@media (min-width: 1200px) {
  .feature-card > .pill {
    top: 2rem;
    right: 2rem;
  }
}

.feature-card .card__icon {
  margin-bottom: var(--space-2xs);
}

.feature-card .card__title {
  font-size: 1.375rem;
}

.feature-card .card__link {
  margin-top: auto;
  padding-top: var(--space-2xs);
}


/* ==========================================================================
   5. Mur de logos (19 sociétés)
   ========================================================================== */
.logo-marquee {
  --marquee-gap: var(--space-sm);
}

/* Sans JS ou mouvement réduit : grille centrée qui passe à la ligne */
.logo-marquee__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--marquee-gap);
  list-style: none;
  padding: 0;
}

.logo-marquee:not(.is-animated) .logo-marquee__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.logo-marquee:not(.is-animated) .logo-marquee__track > li {
  display: flex;
}

.logo-marquee:not(.is-animated) .logo-chip {
  width: 100%;
  min-width: 0;
  height: 5.5rem;
}

.logo-marquee:not(.is-animated) .logo-chip img {
  max-width: 100%;
}

.logo-marquee .logo-chip {
  height: 100%;
  min-width: 7.5rem;
}

/* Exocet : logo très pâle ; on le ravive et l'assombrit pour qu'il reste lisible sur fond blanc */
.logo-marquee img[src*="exocet"] {
  filter: saturate(2.2) brightness(.75) contrast(1.3);
}

@media (max-width: 479.98px) {
  .logo-marquee .logo-chip {
    min-width: 0;
    padding: 0.625rem 0.875rem;
  }

  .logo-marquee .logo-chip img {
    height: 44px;
    max-width: 100px;
  }

  .logo-marquee:not(.is-animated) .logo-marquee__track {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  }

  .logo-marquee:not(.is-animated) .logo-chip {
    height: 4.5rem;
  }
}

/* Avec JS (home.js) : deux pistes identiques qui défilent en boucle */
.logo-marquee.is-animated {
  display: flex;
  overflow: hidden;
  margin-inline: calc(var(--box-padding) * -1);
  padding-block: 0.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee.is-animated .logo-marquee__track {
  flex: none;
  flex-wrap: nowrap;
  padding-right: var(--marquee-gap);
  animation: logo-marquee 60s linear infinite;
}

.logo-marquee.is-animated:hover .logo-marquee__track,
.logo-marquee.is-animated:focus-within .logo-marquee__track,
.logo-marquee.is-paused .logo-marquee__track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Bouton pause / lecture du défilement */
.marquee-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

.marquee-toggle__play,
.marquee-toggle[aria-pressed="true"] .marquee-toggle__pause {
  display: none;
}

.marquee-toggle[aria-pressed="true"] .marquee-toggle__play {
  display: block;
}

.societies .section-head__action {
  gap: var(--space-sm);
}


/* ==========================================================================
   6. Carrousel des projets
   ========================================================================== */
.carousel {
  position: relative;
}

.projects-head {
  margin-bottom: var(--space-lg);
}

/* La diapositive (et non chaque slide) porte l'apparence de carte */
.carousel__viewport {
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--p-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* Sans JS : les projets sont simplement empilés dans la carte */
.carousel__track {
  display: grid;
}

.carousel__slide + .carousel__slide {
  border-top: 1px solid var(--p-100);
}

.carousel__slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.carousel__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 12px 12px 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--p-100);
}

.carousel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zénith : image très large, affichée en entier sur fond violet foncé */
.carousel__media--contain {
  background: var(--p-900);
}

.carousel__media--contain img {
  object-fit: contain;
  background: none;
}

.carousel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

/* Compteur « 01 / 07 » (généré par home.js, décoratif) */
.carousel__count {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--p-500);
  font-variant-numeric: tabular-nums;
}

.carousel__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-ink);
}

.carousel__excerpt {
  color: var(--c-text);
}

.carousel__link {
  margin-top: var(--space-2xs);
}

.carousel__link .icon {
  width: 1.05em;
  height: 1.05em;
}

/* Mobile : extrait limité à 6 lignes (texte complet sur PolyÉlan) */
@media (max-width: 767.98px) {
  .carousel__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
  }
}

/* Bureau : image à gauche (44 %), texte à droite */
@media (min-width: 768px) {
  .carousel__slide {
    grid-template-columns: 44% minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 24rem;
  }

  .carousel__media {
    aspect-ratio: auto;
    min-height: calc(100% - 24px);
    margin: 12px;
  }

  .carousel__body {
    justify-content: center;
    padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-md);
  }
}

@media (min-width: 1200px) {
  .carousel__slide {
    min-height: 27rem;
  }

  .carousel__body {
    padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-lg);
  }
}

/* ---- Avec JS : piste horizontale ---- */
.js .carousel__track {
  display: flex;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

.js .carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  border-top: 0;
}

/* L'image de la diapositive active entre en douceur */
.js .carousel__slide.is-active .carousel__media img {
  animation: carousel-img-in 600ms var(--ease-out);
}

@keyframes carousel-img-in {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}

/* ---- Barre de progression (miel, décorative) ---- */
.carousel__progress {
  position: relative;
  height: 3px;
  margin: var(--space-sm) var(--space-md) 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--p-100);
}

.carousel__progress-bar {
  position: absolute;
  inset: 0;
  background: var(--c-honey);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: carousel-progress var(--carousel-delay, 6000ms) linear forwards;
  animation-play-state: paused;
}

.carousel.is-running .carousel__progress-bar {
  animation-play-state: running;
}

@keyframes carousel-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Contrôles ---- */
.carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
}

.carousel__btn svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
}

.carousel__pause svg {
  width: 1.125rem;
  height: 1.125rem;
}

.carousel__icon-play,
.carousel.is-paused .carousel__icon-pause {
  display: none;
}

.carousel.is-paused .carousel__icon-play {
  display: block;
}

/* Points : cible 28x44px, pastille visible de 10px (active : 24px violet) */
.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__dot {
  position: relative;
  width: 1.75rem;
  height: 2.75rem;
}

.carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 999px;
  background: #8578b0;         /* ≈ 4:1 sur blanc (WCAG 1.4.11) */
  transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease),
    margin var(--dur) var(--ease);
}

.carousel__dot:hover::before {
  background: var(--p-500);
}

.carousel__dot[aria-current="true"]::before {
  width: 24px;
  margin-left: -12px;
  background: var(--p-700);
}

/* ≥ 768px : contrôles sur une seule ligne, en haut à droite (points resserrés sur tablette) */
@media (min-width: 768px) {
  .carousel__controls {
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .carousel__dot {
    width: 1.5rem;
  }
}

/* < 768px : contrôles sous le titre, au-dessus de la diapositive (ordre visuel = ordre du DOM) */
@media (max-width: 767.98px) {
  .carousel__controls {
    justify-content: flex-start;
  }
}

/* Petits écrans : contrôles resserrés pour tenir sur une ligne, dans l'ordre du DOM
   (boutons 40px, points 24x44px ; 3 x 40 + 7 x 24 + 3 x 4 = 300px) */
@media (max-width: 479.98px) {
  .carousel__controls {
    gap: 0.25rem;
  }

  .carousel__btn.icon-btn--lg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .carousel__dot {
    width: 1.5rem;
  }
}

/* ≤ 374px (ex. 360px, boîte de 288px) : boutons 36px (3 x 36 + 7 x 24 + 3 x 3 = 285px) ;
   à 320px, « suivant » passe simplement à la ligne (flex-wrap) */
@media (max-width: 374.98px) {
  .carousel__controls {
    gap: 0.1875rem;
  }

  .carousel__btn.icon-btn--lg {
    width: 2.25rem;
    height: 2.25rem;
  }
}


/* ==========================================================================
   7. Quelques exploits
   ========================================================================== */
.teaser-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

@media (min-width: 900px) {
  .teaser-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.teaser-card {
  padding: var(--space-md);
}

.teaser-card__logo {
  align-self: flex-start;
  margin-bottom: var(--space-2xs);
}

.teaser-card__logo img {
  max-width: 132px;
}

.teaser-card__result {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--p-700);
}

.teaser-card .card__link {
  padding-top: var(--space-2xs);
}

.section-foot {
  margin-top: var(--space-lg);
}

.section-foot--center {
  text-align: center;
}


/* ==========================================================================
   8. Parmi nos événements
   ========================================================================== */
.event-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

@media (min-width: 900px) {
  .event-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

.event-card {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--p-50);
  box-shadow: none;
}

.event-card .card__icon {
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}

.event-card__body {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
  padding-top: 0;
}

.event-card__title {
  font-size: 1.125rem;
  line-height: 1.3;
}

.event-card__text {
  margin: 0;
  font-size: var(--fs-small);
}


/* ==========================================================================
   9. Ils nous soutiennent
   ========================================================================== */
/* Grille 2x2 sur téléphone, une rangée de 4 dès 768px (pas d'orphelin) */
.sponsor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--space-sm) var(--space-lg);
  list-style: none;
  padding: 0;
  max-width: 60rem;
  margin-inline: auto;
}

.sponsor-row > li {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .sponsor-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sponsor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 5rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.sponsor-logo:hover {
  background: var(--c-white);
  border-color: var(--p-100);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.sponsor-logo img {
  width: auto;
  height: 48px;
  max-width: 100%;
  object-fit: contain;
}

/* Creaform (logo très allongé) : occupe la largeur de sa cellule */
.sponsor-logo.sponsor-logo--wide img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
}

.sponsor-logo.sponsor-logo--wide {
  width: 100%;
  padding-inline: var(--space-2xs);
}

@media (max-width: 479.98px) {
  .sponsor-row {
    gap: var(--space-2xs) var(--space-sm);
  }

  .sponsor-logo {
    padding: var(--space-xs);
  }

  .sponsor-logo img {
    height: 40px;
    max-width: 100%;
  }

  .sponsor-logo.sponsor-logo--wide img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .sponsor-logo.sponsor-logo--wide {
    padding-inline: 0;
  }
}


/* ==========================================================================
   10. Bandeau partenaires
   ========================================================================== */
.home-cta {
  margin-top: 3rem;
}


/* ==========================================================================
   11. Mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll,
  .logo-marquee.is-animated .logo-marquee__track,
  .js .carousel__slide.is-active .carousel__media img {
    animation: none;
  }

  .carousel__progress {
    display: none;
  }

  .sponsor-logo:hover {
    transform: none;
  }

  .js .carousel__track {
    transition: none;
  }
}

/* ---- Impression ---- */
@media print {
  .hero__scroll,
  .carousel__controls,
  .carousel__progress,
  .marquee-toggle {
    display: none !important;
  }

  .carousel__viewport {
    overflow: visible;
    box-shadow: none;
  }

  .js .carousel__track {
    display: grid !important;
    transform: none !important;
  }

  .js .carousel__slide + .carousel__slide {
    border-top: 1px solid var(--p-100);
  }

  .carousel__slide {
    break-inside: avoid;
  }

  .logo-marquee.is-animated {
    display: block;
    overflow: visible;
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .logo-marquee__track--clone {
    display: none !important;
  }

  .logo-marquee.is-animated .logo-marquee__track {
    flex-wrap: wrap;
    padding-right: 0;
    animation: none !important;
  }
}