/*
 * heros-e3650.css — [E3650, 26/09/2026] LE HÉROS DE TOUT LE SITE : une seule structure, déclinée par type de page.
 * Feuille posée par sitegen/heros-e3650/campagne-heros-e3650.php, juste avant </head>, sur les pages dont le héros porte le marqueur `mas-hero-e3650`. Le thème (hors dépôt) n'est ni copié ni modifié :
 * retirer cette feuille rend le rendu d'avant. Aucune couleur de la charte n'est inventée ici : le vert profond du bouton principal (#173d42), l'encre (#2b3740) et le corail (#ff4f45, celui du thème) sont
 * ceux que le thème pose déjà ; le blanc et un fond sombre ne servent qu'à tenir le contraste.
 *
 * SECTIONS (dans l'ordre du fichier) : 1. ce qui vaut à TOUTE largeur (bouton devis, bande « conseiller » sous le héros) · 2. l'accueil · 3. animation du H1 (fondu montant, une fois, CSS pur).
 */

/* ── 1. À toute largeur ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.MoveAndStudyCore .mas-hero-e3650__devis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1.25rem;
  border: 1px solid #173d42;
  border-radius: 8px;
  background: #173d42;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms, border-color 160ms, transform 160ms;
}
.MoveAndStudyCore .mas-hero-e3650__devis:hover,
.MoveAndStudyCore .mas-hero-e3650__devis:focus-visible {
  background: #0e8978;
  border-color: #0e8978;
  color: #fff;
}
.MoveAndStudyCore .mas-hero-e3650__apres {
  padding-block: .9rem;
  background: var(--mas-color-surface, #fff);
  border-bottom: 1px solid var(--mas-color-border, #d8dee4);
}
.MoveAndStudyCore .mas-hero-e3650__apres a {
  font-size: .95rem;
  color: var(--mas-color-link, #236b73);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.MoveAndStudyCore .mas-hero-e3650__apres:has(+ .mas-home-main-profile) { padding-bottom: calc(.9rem + 3.4rem); } /* le bloc de profils du thème remonte de 2 à 3,4 rem sur le héros : la bande ne doit pas passer dessous */
.MoveAndStudyCore .mas-hero-e3650__apres a:hover,
.MoveAndStudyCore .mas-hero-e3650__apres a:focus-visible { color: var(--mas-color-link-hover, #17484d); }

/* La ligne de faits d'une école (posée seulement quand la fiche donne au moins trois faits solides) : une liste à plat, séparée par des points médians ; les libellés sont ceux de la page, dans sa langue. */
.MoveAndStudyCore .mas-hero-e3650__faits {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 0;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
  line-height: 1.4;
}
.MoveAndStudyCore .mas-hero-e3650__faits li { margin: 0; padding: 0; }
.MoveAndStudyCore .mas-hero-e3650__faits li:not(:last-child)::after { content: "·"; margin-inline: .6rem; opacity: .7; }

/* ── 2. L'accueil ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* le sous-titre (« titre : clause » → la clause) : le corail de la fin de titre du thème, dans la teinte de TEXTE que la feuille d'accessibilité E3595 pose partout ailleurs (#CA2D21 : 4,67:1 au pire) — un texte de 20 px n'est pas un « grand texte » */
.MoveAndStudyCore .mas-hero-e3650--accueil .mas-hero-e3650__sous {
  margin: 0;
  color: #CA2D21;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.35;
}
.MoveAndStudyCore .mas-hero-e3650--accueil .mas-hero-e3650__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .75rem 1.25rem; align-items: center; margin-top: .75rem; }
@media (max-width: 759.98px) {
  /* la bande « conseiller » sous le héros : le marquage `mas-container` du thème ne met aucune marge intérieure sur mobile */
  .MoveAndStudyCore .mas-hero-e3650__apres .mas-container { width: 100%; padding-inline: 1rem; box-sizing: border-box; }
}

/* le fondu : à partir de 768 px et sans `prefers-reduced-motion` seulement (le script ne charge rien sinon) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .MoveAndStudyCore .mas-hero-e3650__fond { animation: mas-hero-e3650-zoom 36s ease-in-out infinite alternate; }
  .MoveAndStudyCore .mas-hero-e3650__fondu { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
  .MoveAndStudyCore .mas-hero-e3650__couche {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--mas-home-main-hero-focus, 44% 50%);
    opacity: 0;
    animation: mas-hero-e3650-fondu 36s linear infinite;
    animation-delay: calc(var(--k) * 6s - 1.6s);
  }
  /* pendant qu'on survole une carte de profil, le thème montre la photo de CE profil : le fondu s'efface, il ne la recouvre pas */
  .MoveAndStudyCore .mas-home-main:has(.mas-home-main-profile-card:hover, .mas-home-main-profile-card:focus-visible) .mas-hero-e3650__fondu { opacity: 0; transition: opacity 200ms; }
}
@keyframes mas-hero-e3650-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
/* une couche entre en 1,6 s, tient jusqu'à ce que la suivante soit entièrement entrée (7,6 s après son départ), puis disparaît d'un coup sous elle ; 6 couches × 6 s = 36 s */
@keyframes mas-hero-e3650-fondu {
  0% { opacity: 0; }
  4.444% { opacity: 1; }
  21.111% { opacity: 1; }
  21.2% { opacity: 0; }
  100% { opacity: 0; }
}
/* [E3662] la vidéo (posée par la campagne quand HEROS_VIDEO_ACCUEIL n'est pas vide) : elle recouvre le fondu, qui reste dessous en SECOURS (si la vidéo ne peut pas jouer, le script la retire et le fondu redevient visible).
   Avant et sans lecture (mouvement réduit, économie de données) : l'élément n'affiche que son image de garde (attribut `poster`) — désormais LA PHOTO CHOISIE (E3874), jamais la première image brute du clip. */
.MoveAndStudyCore .mas-hero-e3650__video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: var(--mas-home-main-hero-focus, 44% 50%); pointer-events: none; }
/* comme le fondu : pendant qu'on survole une carte de profil, le thème montre la photo de CE profil — la vidéo s'efface, elle ne la recouvre pas */
.MoveAndStudyCore .mas-home-main:has(.mas-home-main-profile-card:hover, .mas-home-main-profile-card:focus-visible) .mas-hero-e3650__video { opacity: 0; transition: opacity 200ms; }

/* [E3874, 27/09/2026] SUR MOBILE (< 768 px), ni la vidéo ni le fondu ne jouent JAMAIS (heros-e3650.js, déjà vrai avant ce chantier — `petitEcran` coupe les deux avant tout téléchargement) : le HTML ne
   montrait donc là, en permanence, QUE l'image de garde de la vidéo — la première image brute du clip (cadrage de dos, sombre), jamais choisie ; z-index:2 ci-dessus la posait en plus PAR-DESSUS la
   vraie photo du profil actif, à TOUTE largeur, sans jamais la laisser passer. Un second visuel prend sa place sous 768 px : un bandeau photo dédié (même photo que l'image de garde, dérivé LÉGER,
   recadré sur le HAUT — les trois visages restent au-dessus du panneau de titre), posé EN BLOC juste après la scène plein écran (jamais superposé, jamais un texte par-dessus des visages). */
.MoveAndStudyCore .mas-hero-e3650__photo-mobile { display: none; }
@media (max-width: 767.98px) {
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-home-main-hero__media { display: none; }
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-hero-e3650__photo-mobile { display: block; }
  .MoveAndStudyCore .mas-hero-e3650__photo-mobile picture,
  .MoveAndStudyCore .mas-hero-e3650__photo-mobile img { display: block; width: 100%; height: auto; }
  /* la scène plein écran (masquée ci-dessus) forçait le panneau de titre à 520px de haut, calé dessus : le bandeau étant maintenant un bloc SÉPARÉ, le panneau reprend sa hauteur naturelle */
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-home-main-hero__inner { min-height: auto; }
}

@media (min-width: 1200px) {
  /* le titre sur UNE ligne : la colonne de texte prend la largeur du conteneur, le titre reste sur une ligne */
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-home-main-hero__content { width: min(100%, 1180px); max-width: none; }
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-hero-e3650__titre { max-width: none; font-size: clamp(2rem, 2.9vw, 2.5rem); white-space: nowrap; }
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-hero-e3650__titre span { display: inline; }
  /* la ligne de titre traverse une partie de la photo, et la photo change : la ligne (et le sous-titre) reposent sur une pastille crème translucide — la teinte du voile du thème — qui garde le texte lisible sur
     n'importe quelle photo et se fond dans le voile à gauche */
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-hero-e3650__titre,
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-hero-e3650__sous {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: .2em .55em;
    margin-inline: -.55em;
    border-radius: .5em;
    background: rgba(251, 250, 247, .84);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .MoveAndStudyCore .mas-hero-e3650--accueil .mas-home-main-hero__lead { max-width: 520px; }
}

/* ── 2 bis. Pays, villes, écoles, programmes ─────────────────────────────────────────────────────────────────────────────────────────── */
/* Une seule structure : la MÊME photo en fond, floutée et assombrie, pleine largeur (variable `--mas-hero-photo` = l'adresse déjà chargée par la page : un seul fichier, aucune requête de plus) ; par-dessus, la photo
   nette, ENTIÈRE (jamais recadrée), bornée au conteneur du thème (`mas-container` : la règle du thème, une seule valeur de largeur) ; titre, sous-titre, badge d'avis et bouton par-dessus, sur un panneau sombre :
   le contraste du texte ne dépend pas de la photo. Grand écran seulement (≥ 1200 px) : dessous, le rendu du thème n'est pas touché. */
.MoveAndStudyCore .mas-hero-e3650__apres { padding-block: .75rem; }

/* Sous 1200 px, la classe `mas-container` que la campagne ajoute (au bloc média du héros et aux sections de présentation des écoles) ne doit RIEN changer : largeur, marges et marge intérieure d'avant — la tablette et le
   mobile ne bougent pas (mesuré, comparaison de rectangles avant/après). */
@media (max-width: 1199.98px) {
  .MoveAndStudyCore .mas-hero-e3650__media.mas-container,
  .MoveAndStudyCore .mas-hero-e3650-cadre.mas-container {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 1200px) {
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) {
    position: relative;
    display: block;
    min-height: 0;
    padding-block: clamp(1.25rem, 2.4vw, 2.25rem);
    overflow: hidden;
    background: #0f1720;
  }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--mas-hero-photo) center / cover no-repeat, #0f1720;
    filter: blur(34px) brightness(.5) saturate(1.15);
    transform: scale(1.25);
  }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil)::after { display: none; }
  /* pays / villes / écoles : la section porte la photo et le contenu dans la même cellule de grille */
  .MoveAndStudyCore .mas-hero-e3650:is(.mas-hero-e3650--pays, .mas-hero-e3650--ville, .mas-hero-e3650--ecole) { display: grid; }
  /* programmes : c'est la coque (`__cadre`), dans le conteneur du thème, qui porte la cellule commune. Le thème y pose une carte arrondie à fond clair, ombre, rapport d'image fixe (16/6,6) et des éléments en
     position absolue : chacun est remis à plat ici (`!important`, borné à ce marqueur — les sélecteurs du thème sont plus spécifiques et portent le préfixe `html`). */
  .MoveAndStudyCore .mas-hero-e3650:is(.mas-hero-e3650--programme, .mas-hero-e3650--junior) .mas-hero-e3650__cadre {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .MoveAndStudyCore .mas-hero-e3650:is(.mas-hero-e3650--programme, .mas-hero-e3650--junior) .mas-hero-e3650__cadre::before,
  .MoveAndStudyCore .mas-hero-e3650:is(.mas-hero-e3650--programme, .mas-hero-e3650--junior) .mas-hero-e3650__cadre::after { display: none !important; }
  .MoveAndStudyCore .mas-hero-e3650:is(.mas-hero-e3650--programme, .mas-hero-e3650--junior) .mas-hero-e3650__media :is([class*="__image"], [class*="__media-composition"], .Synergee-Web-Page-Component-Image-Container, picture) {
    position: static !important;
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .MoveAndStudyCore .mas-hero-e3650:is(.mas-hero-e3650--programme, .mas-hero-e3650--junior) .mas-hero-e3650__media img { position: static !important; width: 100%; height: auto !important; max-height: min(72vh, 700px) !important; object-fit: contain; }

  /* la photo nette, entière, dans le conteneur */
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__media {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-area: 1 / 1;
    display: block;
    min-height: 0;
    height: auto;
    border-radius: 0;
    background: transparent;
    opacity: 1;
  }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__media :is([class*="__media-primary"], [class*="__media-composition"], [class*="__image"], .Synergee-Web-Page-Component-Image-Container, picture) {
    display: block;
    height: auto;
    min-height: 0;
    background: transparent;
  }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(72vh, 700px);
    object-fit: contain;
  }

  /* titre, sous-titre, badge, bouton : par-dessus la photo, en bas à gauche, sur un panneau sombre */
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil):not(.mas-hero-e3650--programme):not(.mas-hero-e3650--junior) .mas-hero-e3650__inner {
    position: relative;
    grid-area: 1 / 1;
    z-index: 2;
    min-height: 0;
    padding-block: 0 1.25rem;
    padding-inline: 1.25rem;
    align-items: end;
    justify-items: start;
    box-sizing: border-box;
  }
  .MoveAndStudyCore .mas-hero-e3650:is(.mas-hero-e3650--programme, .mas-hero-e3650--junior) .mas-hero-e3650__content {
    position: relative !important;
    inset: auto !important;
    grid-area: 1 / 1;
    z-index: 2;
    align-self: end;
    justify-self: start;
    max-width: min(100%, 720px);
    margin: 0 0 1.25rem 1.25rem;
    align-content: start;
  }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__content {
    padding: clamp(1.1rem, 1.8vw, 1.6rem);
    border-radius: 18px;
    background: rgba(10, 16, 24, .72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  /* le texte du titre, du sous-titre et des paragraphes passe au blanc (et ce qu'ils contiennent : gras, portée) ; le badge d'avis et l'encart de promotion ont leurs propres couleurs, on n'y touche pas */
  .MoveAndStudyCore .mas-main .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__content :is(h1, h2, p, .mas-course-type-hero__eyebrow, h1 *, h2 *, p *, .mas-hero-e3650__faits, .mas-hero-e3650__faits *) { color: #fff !important; }
  .MoveAndStudyCore .mas-hero-e3650--junior .mas-hero-e3650__content :is(div, span, strong, p):not(.mas-school-google-rating-badge, .mas-school-google-rating-badge *) { color: #fff !important; }
  .MoveAndStudyCore .mas-hero-e3650--junior .mas-hero-e3650__content *::after { color: #fff !important; }
  /* le conteneur du héros junior (le thème lui donne toute la largeur) : celui du thème, comme partout — le bloc média « entier » se borne dessus */
  .MoveAndStudyCore .mas-hero-e3650--junior > .mas-container { width: min(100% - 2rem, 1180px) !important; max-width: 1180px !important; margin-inline: auto !important; padding-inline: 0 !important; }
  /* le badge d'avis (pastille claire, texte sombre du thème) : fond BLANC PLEIN sur le panneau sombre — sa translucidité laissait passer le fond et faisait tomber le libellé sous 4,5:1 */
  .MoveAndStudyCore .mas-hero-e3650 .mas-school-google-rating-badge { background: #fff; }
  /* le panneau d'une école qui porte une ligne de faits s'élargit un peu (720 px : les faits tiennent sur deux lignes au lieu de quatre, sans recouvrir la photo) */
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__content:has(.mas-hero-e3650__faits) { width: min(100%, 720px); max-width: none; }
  /* le lien « prix » qui accompagne le devis : lien clair sur le panneau sombre */
  .MoveAndStudyCore .mas-hero-e3650 .mas-hero-e3650__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem 1.25rem; }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__actions a:not(.mas-hero-e3650__devis) { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil) .mas-hero-e3650__devis { border-color: #fff; }
  .MoveAndStudyCore .mas-hero-e3650:not(.mas-hero-e3650--accueil):not(.mas-hero-e3650--guide) .mas-hero-e3650__actions { margin-top: .75rem; }
  /* sous un héros à photo entière : plus de chevauchement (il masquerait le bas de la photo) */
  .MoveAndStudyCore .mas-hero-e3650 + .mas-template-lifted-intro,
  .MoveAndStudyCore .mas-hero-e3650 + .mas-hero-e3650__apres + .mas-template-lifted-intro { margin-top: 0; padding-top: clamp(1.25rem, 2.4vw, 2rem); }
  /* SANS photo : bande sobre, sans panneau — le texte repose sur le fond sombre de la bande */
  .MoveAndStudyCore .mas-hero-e3650--sans-photo:not(.mas-hero-e3650--accueil) { background: #1f2c34; }
  .MoveAndStudyCore .mas-hero-e3650--sans-photo:not(.mas-hero-e3650--accueil) [class*="__media"] { display: none; }
  .MoveAndStudyCore .mas-hero-e3650--sans-photo:not(.mas-hero-e3650--accueil)::before { display: none; }
  .MoveAndStudyCore .mas-hero-e3650--sans-photo:not(.mas-hero-e3650--accueil) .mas-hero-e3650__content { padding: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .MoveAndStudyCore .mas-hero-e3650--sans-photo:not(.mas-hero-e3650--accueil):not(.mas-hero-e3650--programme) .mas-hero-e3650__inner { padding-block: clamp(1.25rem, 2.5vw, 2.25rem); }
}

/* ── 2 ter. Guides : un héros SANS photo, neuf sur toutes les largeurs ───────────────────────────────────────────────────────────────────── */
.MoveAndStudyCore .mas-hero-e3650--guide {
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
  background: #1f2c34;
  color: #fff;
}
.MoveAndStudyCore .mas-hero-e3650--guide .mas-hero-e3650__content { display: grid; gap: 1rem; justify-items: start; }
.MoveAndStudyCore .mas-main .mas-hero-e3650--guide h1 { margin: 0; color: #fff !important; max-width: 24ch; }
.MoveAndStudyCore .mas-hero-e3650--guide .mas-hero-e3650__actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.MoveAndStudyCore .mas-hero-e3650--guide .mas-hero-e3650__devis { border-color: #fff; }

/* ── 3. Le H1 : arrivée en fondu montant léger, UNE fois ────────────────────────────────────────────────────────────────────────────────── */
/* Le texte est dans la page dès le chargement (jamais injecté par script) : lisible et indexable sans animation. Coupé sous `prefers-reduced-motion`. */
@media (prefers-reduced-motion: no-preference) {
  .MoveAndStudyCore .mas-hero-e3650 h1 { animation: mas-hero-e3650-h1 360ms ease-out 1 both; }
}
@keyframes mas-hero-e3650-h1 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }