/* ═══════════════════════════════════════════════════════════════════════
   ÉCRAN D'ACCUEIL DE L'ASSISTANT · LA PRÉSENTATION
   assets/style/pages/matching-accueil.css

   Refonte de surface du 2026-09-08. Le constat, capture à l'appui : sur un
   écran de 1440 px, la page tenait dans une colonne de 720 px collée au
   centre, moitié droite vide, sans un seul visuel, et les quatre sections de
   l'argumentaire se suivaient au même rythme (sur-titre rose, titre serif,
   chapeau, contenu). Une page d'accueil d'assistant doit MONTRER le produit,
   pas seulement le décrire.

   CE QUE CETTE FEUILLE CHANGE
   1. La largeur. L'écran d'intro et l'argumentaire passent à 1180 px de
      contenu (--bd2-wrap du design system), le questionnaire reste à 720 px.
   2. Le hero devient une scène à deux colonnes : le discours à gauche, un
      APERÇU RÉEL de la première question à droite (mêmes illustrations que
      le questionnaire, servies par includes/matching-illustrations.php).
   3. Chaque section de l'argumentaire reçoit sa propre mise en page :
      duel large, étapes en trois cartes, parti pris en quatre colonnes,
      questions en deux colonnes avec un titre qui suit le défilement.

   PORTÉE, ET POURQUOI ELLE EST SÛRE
   Tout est conditionné soit à .matching-page:not(.matching-page--focus),
   c'est-à-dire l'écran d'intro et lui seul (matching.js pose --focus dès la
   question 1), soit à #bdmLanding, que le même showPanel() masque au même
   moment. Le questionnaire, les résultats, le formulaire de rappel et la
   fenêtre d'aperçu ne reçoivent AUCUNE règle de ce fichier.

   Purement additive : elle est liée APRÈS matching.css et ne modifie aucun
   de ses fichiers. Retirer la balise <link> et le bloc #bdmHeroAside de
   trouver-mon-auto-ecole.php ramène la page telle qu'elle était.

   @see trouver-mon-auto-ecole.php        le markup de présentation
   @see includes/matching-ecrans.php      les écrans, NON modifiés
   @see assets/js/matching-accueil.js     les entrées en scène (repli total)
   ═══════════════════════════════════════════════════════════════════════ */

.matching-page {
  /* Largeur de contenu des sections d'accueil, alignée sur --bd2-wrap du
     design system (l'accueil du site tient dans la même). Le questionnaire
     garde --bd2-wrap-form (720 px), fixé par matching.css. */
  --bdm-wrap: 1180px;
  --bdm-gutter: 20px;
}

@media (min-width: 700px) {
  .matching-page { --bdm-gutter: 32px; }
}

/* ═══════════════════════════════════════════════════════
   1. LE HERO
   ═══════════════════════════════════════════════════════ */

/* La lumière du fond. Deux taches très basses en opacité, aux couleurs du
   dégradé de la marque, posées derrière le hero seulement : sur le crème,
   la même valeur que sur fond sombre donnerait un aplat sale. */
.matching-page:not(.matching-page--focus) {
  position: relative;
  isolation: isolate;
}
.matching-page:not(.matching-page--focus)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 70% at 78% 8%,  rgba(14, 165, 233, .13), transparent 68%),
    radial-gradient(46% 60% at 12% 0%,  rgba(240, 115, 155, .10), transparent 70%);
}

.matching-page:not(.matching-page--focus) .bdm-container {
  max-width: calc(var(--bdm-wrap) + 2 * var(--bdm-gutter));
  padding-left: var(--bdm-gutter);
  padding-right: var(--bdm-gutter);
  padding-bottom: 8px;
}

/* L'aperçu ne vit que sur l'intro : dès la première question, matching.js
   pose --focus et il quitte la page avec l'argumentaire. Il est hors des
   .bdm-panel, c'est donc à cette feuille de le retirer. */
.matching-page--focus .bdm-hero-aside { display: none !important; }

/* L'aperçu entre avec le hero, et par la même mécanique que lui : le panneau
   d'intro porte déjà animation:bdUp dans matching.css. Un cran de retard
   suffit à ce que le regard aille d'abord au titre. Il n'est donc pas confié
   aux entrées en scène du bas de page : sans JavaScript, il est là. */
/* Ferré à gauche : sous 1000 px, l'aperçu passe sous le discours et doit
   tomber sur le même bord que le titre et le bouton. */
.matching-page .bdm-hero-aside {
  margin: 4px 0 0;
  display: flex;
  justify-content: flex-start;
  animation: bdUp .5s var(--bd2-ease-out) .12s both;
}
@media (prefers-reduced-motion: reduce) {
  .matching-page .bdm-hero-aside { animation: none; }
}

/* Deux colonnes à partir de 1000 px : le discours garde une ligne de lecture
   courte, l'aperçu occupe la moitié qui était vide. .bdm-container devient
   la grille ; les panneaux inactifs sont en display:none et ne prennent donc
   aucune cellule, seul #bdm-panel-intro en occupe une. */
@media (min-width: 1000px) {
  .matching-page:not(.matching-page--focus) .bdm-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 430px);
    column-gap: clamp(40px, 5vw, 72px);
    align-items: center;
    padding-top: 12px;
  }
  .matching-page:not(.matching-page--focus) .bdm-crumb { grid-column: 1 / -1; }
  .matching-page .bdm-hero-aside { margin: 0; }
}

/* ─── Le discours ──────────────────────────────────────── */
.matching-page .bdm-intro {
  padding: 34px 0 8px;
  max-width: 620px;
}
@media (min-width: 1000px) {
  .matching-page .bdm-intro { padding: 8px 0; }
}

.matching-page .bdm-intro__title {
  font-size: clamp(2.2rem, 5.4vw, 3.5rem);
  line-height: 1.04;
  margin-bottom: 20px;
}

.matching-page .bdm-intro__lead {
  font-size: clamp(16px, 1.1vw, 18px);
  max-width: 48ch;
  margin-bottom: 30px;
  color: var(--bdm-ink60);
}

/* Le bouton de départ pèse plus lourd que dans une page de formulaire : il
   est le seul geste attendu de l'écran. */
.matching-page .bdm-intro .bdm-btn--lg {
  box-shadow: var(--bd2-shadow-glow);
  transition: transform .18s var(--bd2-ease-out), box-shadow .18s var(--bd2-ease-out);
}
.matching-page .bdm-intro .bdm-btn--lg:hover:not(:disabled) {
  transform: translateY(-2px);
}

.matching-page .bdm-intro__reassurance { margin-top: 22px; }

/* ─── L'aperçu de l'assistant ──────────────────────────── */
/* Une carte cliquable qui rejoue la question 2 telle qu'elle sera affichée,
   avec les illustrations du questionnaire. Elle porte .bdm-start : le même
   écouteur que le bouton principal la démarre, sans une ligne de JS en plus
   (matching.js, « c'est la classe qui fait foi, pas l'id »). */
.matching-page .bdm-demo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 430px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.matching-page .bdm-demo__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 2px;
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  color: var(--bdm-ink40);
}
.matching-page .bdm-demo__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bdm-grad);
  flex: none;
}

.matching-page .bdm-demo__frame {
  display: block;
  padding: 20px 20px 18px;
  border-radius: var(--bdm-radius-lg);
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  box-shadow: var(--bd2-shadow-card);
  transition: transform .22s var(--bd2-ease-out), box-shadow .22s var(--bd2-ease-out);
}
.matching-page .bdm-demo:hover .bdm-demo__frame,
.matching-page .bdm-demo:focus-visible .bdm-demo__frame {
  transform: translateY(-3px);
  box-shadow: var(--bd2-shadow-deep);
}
.matching-page .bdm-demo:focus-visible .bdm-demo__frame {
  outline: 2px solid var(--bdm-blue);
  outline-offset: 3px;
}

/* La barre de progression de l'aperçu, copie de .bdm-stepper en réduction. */
.matching-page .bdm-demo__track {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--bdm-line2);
  overflow: hidden;
}
.matching-page .bdm-demo__fill {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: 999px;
  background: var(--bdm-grad);
}
.matching-page .bdm-demo__step {
  display: block;
  margin: 9px 0 14px;
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--bdm-ink40);
}

.matching-page .bdm-demo__q {
  display: block;
  margin-bottom: 14px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--bdm-ink);
}

.matching-page .bdm-demo__opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.matching-page .bdm-demo__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: var(--bdm-radius-sm);
  border: 1px solid var(--bdm-line);
  background: var(--bdm-card);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--bdm-ink80);
}
/* La réponse déjà choisie : mêmes signes que le vrai bouton sélectionné
   (bord cyan, fond bleu très pâle, pastille cochée dans le coin). */
.matching-page .bdm-demo__opt--on {
  position: relative;
  border-color: var(--bdm-blue);
  background: var(--bdm-blue-tint);
  color: var(--bdm-ink);
}
.matching-page .bdm-demo__opt--on::after {
  content: '\2713';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--bdm-blue);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
/* Les illustrations sont déjà cadrées à 88 px par matching-illustrations.css :
   on les réduit un peu, la carte d'aperçu est plus étroite qu'une vraie. */
.matching-page .bdm-demo__opt .bdm-option__illus { max-width: 62px; }

.matching-page .bdm-demo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--bdm-line2);
  font-family: var(--bdm-font-mono);
  font-size: 11.5px;
  color: var(--bdm-ink40);
}
.matching-page .bdm-demo__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--bdm-blue-deep);
}
.matching-page .bdm-demo:hover .bdm-demo__go svg { transform: translateX(3px); }
.matching-page .bdm-demo__go svg { transition: transform .18s var(--bd2-ease-out); }

@media (max-width: 999px) {
  .matching-page .bdm-hero-aside { margin-top: 30px; }
  .matching-page .bdm-demo { max-width: 520px; }
}
@media (max-width: 400px) {
  .matching-page .bdm-demo__opt { padding: 11px 5px 10px; font-size: 12px; }
  .matching-page .bdm-demo__opt .bdm-option__illus { max-width: 48px; }
}

/* ═══════════════════════════════════════════════════════
   2. L'ARGUMENTAIRE  (#bdmLanding)
   ═══════════════════════════════════════════════════════ */

.matching-page .bdm-lwrap {
  max-width: calc(var(--bdm-wrap) + 2 * var(--bdm-gutter));
  padding-left: var(--bdm-gutter);
  padding-right: var(--bdm-gutter);
}

/* Le bloc de titre d'une section. Ajouté par trouver-mon-auto-ecole.php
   autour du sur-titre, du titre et du chapeau : c'est lui qui permet aux
   sections de se poser en deux colonnes sans toucher aux écrans. */
.matching-page .bdm-lhead { max-width: 62ch; }
.matching-page .bdm-lhead .bdm-llead { margin-bottom: 0; }

/* La sortie de secours de la colonne de titre : la question du visiteur n'est
   pas toujours dans les cinq de la page. */
.matching-page .bdm-lhead__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bdm-blue-deep);
  text-decoration: none;
}
.matching-page .bdm-lhead__link:hover { text-decoration: underline; }
.matching-page .bdm-lhead__link svg { transition: transform .18s var(--bd2-ease-out); }
.matching-page .bdm-lhead__link:hover svg { transform: translateX(3px); }

.matching-page .bdm-ltitle { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }

@media (min-width: 1000px) {
  .matching-page .bdm-lsec { padding: 92px 0; }
  .matching-page .bdm-lsec--king { padding: 96px 0; }
}

/* ─── Le renversement (avant / après) ──────────────────── */
.matching-page .bdm-lsec--flip { padding-top: 46px; }
@media (min-width: 1000px) {
  .matching-page .bdm-lsec--flip { padding-top: 64px; }
}

.matching-page .bdm-lsec--flip .bdm-lhead { margin-bottom: 34px; }

@media (min-width: 1000px) {
  .matching-page .bdm-flip { grid-template-columns: 1fr 1fr; gap: 26px; }
  .matching-page .bdm-flip__col { padding: 34px 32px; border-radius: var(--bdm-radius-lg); }
  .matching-page .bdm-flip__list li { font-size: 15.5px; }
}

/* La colonne « avant » recule d'un cran : c'est le chemin qu'on ne propose
   pas. La colonne « après » prend la lumière de la marque. */
.matching-page .bdm-flip__col--avant {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.matching-page .bdm-flip__col--apres {
  background:
    linear-gradient(180deg, var(--bdm-blue-tint) 0%, var(--bdm-card) 58%);
  border-color: rgba(14, 165, 233, .38);
  box-shadow: var(--bd2-shadow-card);
}

/* ─── Comment ça marche ────────────────────────────────── */
/* Bande blanche, cartes crème : sans ce contraste inversé, trois cartes
   blanches posées sur une section blanche ne se voient pas. */
.matching-page .bdm-lsec--how .bdm-lhead { margin-bottom: 8px; }

@media (min-width: 960px) {
  .matching-page .bdm-how {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
    align-items: stretch;
  }
  /* Les trois cartes ont la hauteur de la plus haute (l'étape 2 et ses
     critères) : la ligne de temps de chacune est donc chassée en pied de
     carte, sinon deux d'entre elles finissent sur 120 px de vide. */
  .matching-page .bdm-how__step {
    display: flex;
    flex-direction: column;
    padding: 30px 28px 26px;
    border-radius: var(--bdm-radius-lg);
    background: var(--bdm-paper);
    border: 1px solid var(--bdm-line);
  }
  .matching-page .bdm-how__txt {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .matching-page .bdm-how__meta {
    margin-top: auto;
    padding-top: 18px;
  }
  .matching-page .bdm-how__num {
    display: block;
    margin-bottom: 16px;
    font-size: 30px;
  }
  .matching-page .bdm-how__h { font-size: 18.5px; margin-bottom: 9px; }
  .matching-page .bdm-how__txt p { font-size: 15px; }
}

/* Les critères de notation, sous l'étape 2 : des pastilles blanches sur la
   carte crème, l'inverse de la règle générale de .bdm-chipsrow. */
@media (min-width: 960px) {
  .matching-page .bdm-how .bdm-chipsrow li { background: var(--bdm-card); }
}

/* ─── L'élève est roi ──────────────────────────────────── */
.matching-page .bdm-lsec--king {
  position: relative;
  overflow: clip;
}
/* Une seule lumière dans la bande sombre, cyan, en haut à droite. */
.matching-page .bdm-lsec--king::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, .22), transparent 62%);
  pointer-events: none;
}
.matching-page .bdm-lsec--king .bdm-lwrap { position: relative; }
.matching-page .bdm-lsec--king .bdm-lhead { margin-bottom: 34px; }

@media (min-width: 1040px) {
  .matching-page .bdm-king { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .matching-page .bdm-king__item { padding: 26px 22px; }
}

/* Le filet de marque en tête de chaque carte du parti pris. */
.matching-page .bdm-king__item {
  position: relative;
  overflow: hidden;
}
.matching-page .bdm-king__item::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--bdm-grad);
  opacity: .55;
}

/* ─── Les questions fréquentes ─────────────────────────── */
@media (min-width: 1000px) {
  .matching-page .bdm-lsec--faq .bdm-lwrap {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 88px);
    align-items: start;
  }
  /* Pas de position:sticky sur ce bloc de titre : sa cellule de grille ne le
     retient pas jusqu'au bout, et il finissait par glisser PAR-DESSUS le
     rappel de fin, qui occupe la ligne suivante sur toute la largeur. */
  .matching-page .bdm-lsec--faq .bdm-lhead { align-self: start; }
  .matching-page .bdm-faq { margin-top: 0; }
  .matching-page .bdm-lcta { grid-column: 1 / -1; }
  .matching-page .bdm-faq__q { font-size: 16.5px; padding: 21px 40px 21px 0; }
  .matching-page .bdm-faq__a { font-size: 15px; }
}

/* ─── Le rappel de fin ─────────────────────────────────── */
.matching-page .bdm-lcta {
  margin-top: 56px;
  padding: 40px 26px 36px;
  border-radius: var(--bdm-radius-lg);
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  box-shadow: var(--bd2-shadow-soft);
}
.matching-page .bdm-lcta__txt {
  font-family: var(--bdm-font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  letter-spacing: var(--bd2-ls-title);
  line-height: var(--bd2-lh-title);
  margin-bottom: 22px;
}
.matching-page .bdm-lcta .bdm-btn--lg { box-shadow: var(--bd2-shadow-glow); }

/* ═══════════════════════════════════════════════════════
   3. L'ARRIVÉE PAR UN CTA DU SITE (?go=1)

   Le questionnaire s'ouvre à sa première question : l'écran d'accueil ne doit
   pas se montrer, même une fraction de seconde. html.bdm-go est posée par le
   script d'amorce du <head>, donc AVANT le premier rendu, et retirée par
   matching-accueil.js dans la foulée du démarrage — le temps que le navigateur
   ne peint jamais. Si le démarrage échoue (JS du questionnaire absent), la
   classe tombe aussi : la présentation revient, plutôt qu'une page vide.
   ═══════════════════════════════════════════════════════ */

.bdm-go .matching-page .bdm-crumb,
.bdm-go .matching-page #bdm-panel-intro,
.bdm-go .matching-page .bdm-hero-aside,
.bdm-go .matching-page .bdm-landing { display: none !important; }

/* Ni le halo du hero, ni la grille à deux colonnes : la page est déjà celle
   du questionnaire, elle doit en avoir la gouttière dès le premier pixel. */
.bdm-go .matching-page:not(.matching-page--focus)::before { content: none; }
@media (min-width: 1000px) {
  .bdm-go .matching-page:not(.matching-page--focus) .bdm-container {
    display: block;
    max-width: var(--bd2-wrap-form, 720px);
  }
}

/* ═══════════════════════════════════════════════════════
   4. LES ENTRÉES EN SCÈNE
   État de départ posé UNIQUEMENT sous html.bdm-scene, classe que
   assets/js/matching-accueil.js ajoute après avoir vérifié qu'il peut
   observer et que le visiteur n'a pas demandé l'arrêt des animations.
   Sans JavaScript, rien n'est masqué : la page est complète.
   ═══════════════════════════════════════════════════════ */

.bdm-scene .matching-page [data-bdm-rise] {
  opacity: 0;
  transform: translateY(26px);
}
.bdm-scene .matching-page [data-bdm-rise].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .78s var(--bd2-ease-out) var(--bdm-rise-delay, 0ms),
    transform .78s var(--bd2-ease-out) var(--bdm-rise-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .bdm-scene .matching-page [data-bdm-rise] { opacity: 1; transform: none; }
  .matching-page .bdm-demo__frame,
  .matching-page .bdm-intro .bdm-btn--lg { transition: none; }
}