/* ============================================================
   PAGE PRO (autoecole.php, portage de la maquette, étape 17). Classes
   bd-ae-*. Refaite le 24/09 sur le modèle de l'accueil élève : le haut
   de page vient de pages/accueil.css, la carte « Comment ça marche »,
   les colonnes « ce qui est gratuit / ce qu'on ne demande jamais » et la
   grille des villes viennent aussi de pages/accueil.css (classes
   bd-acc-*), le reste du socle assets/style/socle.css. Ce fichier
   n'ajoute que ce qui est propre à la page : la photo pro, les deux
   boutons du haut, la fiche en exemple, la liste des villes.
   Chargée après pages/accueil.css (ordre du tableau « css » passé à
   bdPageDebut) : les règles du haut de page portent donc
   .bd-accueil-hero.bd-ae-hero pour passer devant.
   ============================================================ */

/* ── 1. Le haut de page : la photo de la page pro à la place de celle de l'accueil ── */

.bd-ae-hero.ed-home__hero--photo .ed-home__hero-media {
  background: url('../../img/hero-autoecole.jpg') center center / cover no-repeat;
  background-image: image-set(
    url('../../img/hero-autoecole.webp') type('image/webp'),
    url('../../img/hero-autoecole.jpg') type('image/jpeg')
  );
}

/* Le titre laisse la place à une phrase d'explication, absente de l'accueil. */
.bd-accueil-hero.bd-ae-hero .ed-home__title {
  margin-bottom: 18px;
}

.bd-ae-hero__texte {
  max-width: 30em;
  margin: 0 0 28px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
  color: #1F2937;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Deux boutons à la place du champ ville : le plein à l'encre, le clair sur une plaque dépolie.
   Préfixés .ed-home : pages/accueil.css y remet la couleur des liens à « inherit ». */
.bd-ae-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ed-home .bd-ae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 30px;
  border: 1px solid #0B1220;
  border-radius: 999px;
  background: #0B1220;
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 18px 36px -18px rgba(11, 18, 32, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ed-home .bd-ae-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 40px -18px rgba(11, 18, 32, 0.6);
}

.ed-home .bd-ae-btn:focus-visible {
  outline: 3px solid #0EA5E9;
  outline-offset: 3px;
}

.ed-home .bd-ae-btn--clair {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.78);
  color: #0B1220;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 36px -24px rgba(11, 18, 32, 0.35);
}

.ed-home .bd-ae-btn--clair:hover {
  background: #FFFFFF;
}

/* Inscription des écoles fermée (AE_ONBOARDING_ENABLED) : le bouton reste, éteint. */
.ed-home .bd-ae-btn.is-ferme,
.rf-btn.is-ferme,
.rf-lien-fleche.is-ferme {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.bd-accueil-hero.bd-ae-hero .ed-hero-proof {
  margin-top: 22px;
}

/* ── 2. Sous la carte « Comment ça marche », la fiche arrive plus vite ── */

.bd-acc-marche + .bd-ae-exemple {
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

/* ── 3. La fiche en exemple : le texte à gauche, la carte sur un fond clair à droite ── */

.bd-ae-exemple__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}

.bd-ae-exemple__texte .rf-texte {
  margin-bottom: 20px;
}

.bd-ae-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.bd-ae-points li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  line-height: 1.45;
}

.bd-ae-points svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--rf-lien);
}

.bd-ae-ordre {
  max-width: 60ch;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rf-ligne);
  font-size: var(--rf-t-petit);
  color: var(--rf-gris);
}

.bd-ae-exemple__scene {
  margin: 0;
  padding: clamp(28px, 1rem + 3vw, 56px);
  border-radius: var(--rf-rayon);
  background: var(--rf-accent-doux);
}

.bd-ae-exemple__scene .bd-carte {
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  box-shadow: 0 36px 64px -40px rgba(11, 18, 32, 0.5);
}

.bd-ae-exemple__legende {
  margin: 20px 0 0;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  text-align: center;
}

/* ── 4. Les villes : le texte et le bouton à gauche, les pastilles à droite ── */

.bd-ae-villes .bd-acc-villes__grille {
  align-items: center;
}

.bd-ae-villes__titre {
  margin: 0 0 16px;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris-clair);
}

/* ── 5. L'appel final suit une section teintée : un écart de section au-dessus ── */

.bd-ae-final {
  padding-top: var(--rf-marge-section);
}

/* ── Tablette ── */

@media (max-width: 1023px) {
  .bd-ae-exemple__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ── Téléphone ── */

@media (max-width: 768px) {
  /* La photo mobile de la page pro a sa voiture aux deux tiers de la hauteur (celle de
     l'accueil l'a en haut) : en « cover », le texte calé en bas la cachait entière.
     Calée sur la largeur puis remontée de 0,84 largeur, elle garde la tête du moniteur
     sous l'en-tête et les roues au-dessus du texte ; le sol se prolonge par sa couleur. */
  .bd-ae-hero.ed-home__hero--photo .ed-home__hero-media {
    background-color: #E2DBE6;
    background-image: url('../../img/hero-autoecole-mobile.jpg');
    background-image: image-set(
      url('../../img/hero-autoecole-mobile.webp') type('image/webp'),
      url('../../img/hero-autoecole-mobile.jpg') type('image/jpeg')
    );
    background-position: center calc(100vw * -0.84);
    background-size: 100% auto;
  }

  .bd-accueil-hero.bd-ae-hero .ed-home__title {
    margin-bottom: 10px;
  }

  .bd-ae-hero__texte {
    margin-bottom: 18px;
    font-size: 0.9375rem;
    text-wrap: balance;
  }

  .bd-ae-hero__actions {
    justify-content: center;
    gap: 8px;
  }

  .ed-home .bd-ae-btn {
    min-height: 46px;
    padding: 0 18px;
    font-size: 0.875rem;
  }

  .bd-accueil-hero.bd-ae-hero .ed-hero-proof {
    margin-top: 16px;
  }
}

/* Petit téléphone : le fond teinté rognait la carte et tronquait son prix (« 1… ») ;
   la carte prend toute la largeur, comme dans les listes. */
@media (max-width: 640px) {
  .bd-ae-exemple__scene {
    padding: 0;
    background: none;
  }
}