/* [HOME-SCHOOLS-BAND-20260917] Deux lignes noires horizontales encadrant deux
   bandeaux défilants d'écoles (quatre sur téléphone), à la manière du ruban
   de drapeaux et de langues
   de fr.duolingo.com. Position : entre le téléphone virtuel et les quatre
   boutons de téléchargement. Les logos sont déjà noir et blanc ; ils prennent
   la taille des drapeaux (hauteur ~22px) et chaque nom remplace une langue.
   Chaque rangée est dédoublée dans le HTML pour un défilement sans à-coup ;
   la copie est masquée aux lecteurs d'écran (aria-hidden) et la piste inverse
   réutilise la même animation en sens contraire. */

.schools-band {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  /* [HOME-SCHOOLS-SPACING-20260917] plus d'air entre le téléphone virtuel et
     la première ligne noire (les rangées elles-mêmes restent resserrées).
     [HOME-SCHOOLS-SPACING-V2-20260917] nouvelle passe demandée par
     l'utilisateur : encore plus d'air sous le téléphone (nouveau palier
     maximal + souffle accru aux écrans intermédiaires). */
  margin-top: clamp(3.75rem, 9vw, 6rem);
}

.schools-band-line {
  height: 2px;
  background: #050505;
  border: 0;
}

.schools-band-marquee {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow: hidden;
}

/* [HOME-SCHOOLS-BAND-FAMILY-20260927] Un groupe par famille de filière (Prépa,
   Lycée) : la bascule Lycée/Prépa n'en affiche qu'un, et chaque groupe a les
   mêmes quatre pistes. Le groupe est en display:contents, donc ses pistes
   deviennent les enfants directs de .schools-band-marquee : la colonne flex,
   son écart et le défilement restent ceux d'avant, et le groupe n'est qu'une
   frontière de script. Sans display:contents, il faudrait reprendre toutes les
   règles de piste en les préfixant du groupe.
   La garde [hidden] est nécessaire : display:contents l'emporterait sinon sur
   l'attribut [hidden] du HTML, et les deux familles s'afficheraient ensemble. */
.schools-band-family {
  display: contents;
}

.schools-band-family[hidden] {
  display: none;
}

.schools-band-track {
  display: flex;
  width: max-content;
  /* [HOME-SCHOOLS-BAND-SLOW-20260918] 36s → 44s : défilement légèrement
     ralenti ; les quatre pistes (deux copies × deux sens) partagent la
     même animation, une seule passe suffit. */
  animation: schools-band-scroll 44s linear infinite;
}

/* [HOME-SCHOOLS-THIRD-ROW-20260920] Troisième ligne défilante, téléphone
   uniquement (demande de l'utilisateur) : mêmes écoles que la première
   piste, déphasée d'une demi-boucle pour ne pas la redoubler. Masquée sur
   ordinateur.
   [HOME-SCHOOLS-FOURTH-ROW-20260920] La même classe porte la quatrième
   ligne (combinée à .schools-band-track-reverse) : mêmes écoles que la
   deuxième piste, déphasée de la même demi-boucle. */
.schools-band-track-extra {
  display: none;
  animation-delay: -22s;
}

@media (max-width: 680px) {
  .schools-band-track-extra {
    display: flex;
  }
}

.schools-band-track-reverse {
  animation-direction: reverse;
}

@keyframes schools-band-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.schools-band-row {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.25rem);
  margin: 0;
  padding: 0 0 0 clamp(2rem, 4vw, 3.25rem);
  list-style: none;
}

.schools-band-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.schools-band-item img {
  width: auto;
  height: 22px;
  object-fit: contain;
}

.schools-band-item span {
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  color: #050505;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .schools-band {
    gap: 0.65rem;
    margin-top: clamp(2.25rem, 6vw, 3rem);
  }

  /* [HOME-SCHOOLS-BAND-TOP-CENTER-20260918] Mêmes moitiés sur téléphone :
     seuls les ingrédients changent (marges historiques + padding haut des
     stores à 680px) ; margin-top suit via --home-schools-centered-gap. */
  .schools-band:not(.schools-band--after-offers) {
    /* [HOME-HERO-MOBILE-GAPS-20260920] demande de l'utilisateur : sur
       téléphone, l'air filière → bandeau et bandeau → téléchargements se
       resserre un peu des deux côtés (le gap centré suit). Miroir tenu à
       jour dans styles.css (.benefits-section à 680px).
       [HOME-MOBILE-SPACING-20260920] 2e passe demandée : encore un peu
       moins d'air des deux côtés du bandeau haut sur téléphone. */
    --home-schools-hero-gap: clamp(1.25rem, 4vw, 2rem);
    --home-schools-store-gap: calc(
      var(--home-section-gap) + var(--home-phone-stage-lift) +
        clamp(3.5rem, 10vw, 4.5rem)
    );
    margin-bottom: calc(
      var(--home-schools-centered-gap) - clamp(3.5rem, 10vw, 4.5rem)
    );
  }

  .schools-band-marquee {
    gap: 0.5rem;
  }

  .schools-band-item img {
    height: 19px;
  }

  .schools-band-item span {
    font-size: 0.68rem;
  }

  /* [HOME-DOWNLOAD-SYMMETRIC-20260918] Sur téléphone, l'air entre la ligne
     basse du bandeau et « Télécharger dans l'App Store » égale l'air entre
     « Télécharger sur Windows » et l'étendue noire : la marge haute reprend
     celle du conteneur de l'étendue sur téléphone (footer-wave.css) et le
     padding haut celui du bas du bloc (styles.css) — valeurs reprises ici,
     à faire évoluer ensemble.
     [HOME-AFTER-OFFERS-MOBILE-EQUAL-20260919] l'ancienne égalité avec l'air
     offres → bandeau est abandonnée sur demande : l'air haut suit de nouveau
     l'air bas (étendue rehaussée, boutons légèrement décollés).
     [HOME-MOBILE-SPACING-20260920] demande de l'utilisateur : sur
     téléphone, l'air bandeau du bas → boutons grandit franchement
     (l'égalité avec l'air bas vers l'étendue est abandonnée).
     [HOME-BOTTOM-AIR-20260920] demande de l'utilisateur : encore
     davantage d'air bandeau du bas → boutons sur téléphone.
     [HOME-BAND-STORE-AIR-20260922] demande de l'utilisateur : encore
     plus d'air entre les boutons de téléchargement du bas et
     l'animation écoles, sur téléphone uniquement.
     [HOME-BAND-STORE-AIR-20260929] demande de l'utilisateur : un peu
     plus d'air encore, sur téléphone uniquement.
     La garde :not([hidden]) préserve le grand rythme en Lycée (bandeau
     masqué mais présent dans le DOM). */
  .schools-band--after-offers:not([hidden])
    + .store-buttons-section--after-offers {
    margin-top: clamp(4.5rem, 12vw, 6rem);
    padding-top: clamp(3rem, 7vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .schools-band-track {
    animation: none;
  }
}

/* [HOME-SCHOOLS-BAND-AFTER-OFFERS-20260917] Deuxième copie du bandeau, entre
   les trois offres et le second bloc de boutons de téléchargement : mêmes
   lignes noires et mêmes pistes. [HOME-SCHOOLS-BAND-AFTER-OFFERS-V2-20260918]
   demande de l'utilisateur : bien plus d'air entre les offres et le bandeau
   (var(--home-schools-gap)), et non plus une marge nulle.
   [HOME-FAQ-BAND-GAP-20260922] la FAQ s'intercale entre les offres et le
   bandeau : marge réduite sur ordinateur, téléphone inchangé. */
.schools-band--after-offers {
  margin-top: clamp(1rem, 3vw, 2rem); /* [HOME-FAQ-BAND-GAP-20260922] */
}

/* [HOME-OFFRES-GAPS-ORDI-20261004] [HOME-OFFRES-GAPS-ORDI-2-20261005]
   [HOME-OFFRES-GAPS-ORDI-3-20261005] Ordinateur uniquement : encore un peu
   plus d'air entre les offres et le bandeau écoles (demande utilisateur,
   3e passe : +3rem au total). Tablette et téléphone inchangés. */
@media (min-width: 1001px) {
  .schools-band--after-offers {
    margin-top: calc(clamp(1rem, 3vw, 2rem) + 3rem);
  }
}

@media (max-width: 680px) {
  /* [HOME-BAND-UP-20260919] Sur téléphone uniquement : le bandeau du bas
     remonte davantage (marge haute réduite de 6rem, 3e passe). L'air
     bandeau → boutons et l'égalité haut/bas autour des boutons sont
     inchangés.
     [HOME-BOTTOM-AIR-20260920] demande de l'utilisateur : davantage
     d'air offres → bandeau sur téléphone (marge haute réduite de 5rem
     au lieu de 6rem, on remonte encore un peu le bandeau). */
  .schools-band--after-offers {
    margin-top: calc(var(--home-schools-gap) - 5rem);
  }
}

/* [HOME-SCHOOLS-BAND-FAMILY-20260927] Avant le bandeau Lycée, le bandeau
   entier était masqué hors Prépa : les règles .schools-band[hidden] qui
   suivaient resserraient l'air bandeau → téléchargements en famille Lycée, et
   neutralisaient la marge haute des boutons. Les deux sont mortes depuis que
   chaque famille a son bandeau : le bandeau est toujours visible, la marge
   haute est donc toujours neutralisée par la règle :not([hidden]) plus bas, et
   l'air Lycée suit le même rythme centré que le Prépa. Elles ont été retirées
   plutôt que laissées en place : un sélecteur qui ne matche plus est une
   invite à le modifier au prochain changement de sans le savoir. */

/* [HOME-SCHOOLS-BAND-TOP-CENTER-20260918] La copie haute du bandeau
   (héros, visible seulement en Prépa) est centrée verticalement entre le
   bouton « Nos offres » (colonne filières du héros) et les boutons de
   téléchargement : l'air au-dessus égale l'air en dessous, à écart total
   inchangé. La marge haute historique (héros → bandeau) devient
   --home-schools-hero-gap ; l'air sous le bandeau reprend la marge haute
   de .store-buttons-section (styles.css : var(--home-section-gap) +
   var(--home-phone-stage-lift)) plus son padding haut (styles.css :
   clamp(2.75rem, 5vw, 4rem) sur ordinateur, clamp(3.5rem, 10vw, 4.5rem)
   à 680px — valeurs reprises ici, à faire évoluer ensemble). Chaque côté
   vaut la moitié du total ; la marge haute du bloc stores est neutralisée
   quand la copie haute visible le précède, l'air du dessous étant porté
   par le margin-bottom du bandeau. Le :not([hidden]) préserve le grand
   rythme en Lycée (bandeau masqué mais présent dans le DOM : le sélecteur
   adjacent + matche quand même) et la copie après-offres garde son propre
   rythme (modifieur exclu). */
.schools-band:not(.schools-band--after-offers) {
  --home-schools-hero-gap: clamp(3.75rem, 9vw, 6rem);
  --home-schools-store-gap: calc(
    var(--home-section-gap) + var(--home-phone-stage-lift) +
      clamp(2.75rem, 5vw, 4rem)
  );
  --home-schools-centered-gap: calc(
    (var(--home-schools-hero-gap) + var(--home-schools-store-gap)) / 2
  );
  margin-top: var(--home-schools-centered-gap);
  margin-bottom: calc(
    var(--home-schools-centered-gap) - clamp(2.75rem, 5vw, 4rem)
  );
}

.schools-band:not(.schools-band--after-offers):not([hidden])
  + .store-buttons-section {
  margin-top: 0;
}