/* Pourquoi (/pourquoi/), la page de Jean-Marc du 29/09/2026. Feuille de la
   famille pourquoi (DESIGN.md §12), importée par src/pages/pourquoi/index.astro
   après la mise en page : elle passe après tokens.css, accueil.css et
   pages.css. Jetons seulement, seuils de l'accueil seulement, classes
   préfixées.

   Deux squelettes (DESIGN.md §14), aucun de /solutions/. Depuis le retour
   de Jean-Marc du 29/09 (18 h 06), plus de slogan : la page démarre par le
   constat.
   - l'ouverture est le constat, sur la crème : la phrase et son texte
     ensemble sur cinq douzièmes, la photo sur les sept autres dès 1024 px ;
   - les quatre raisons sur la brume, deux colonnes sous filet dès 768 px,
     puis l'ancien chapô juste avant le lien vers /solutions/. */

/* ============================================================ ouverture */
/* L'entête du site est fixe et hors du flux : l'ouverture réserve sa hauteur,
   comme EnTetePage. */
.pourquoi__ouverture { padding-top: calc(var(--h-entete) + var(--e7)); }

/* Posé à même la crème, le libellé de l'ouverture reprend la brume de
   l'étiquette par défaut ; sur la brume des raisons, il prend la crème (même
   remède que le contact et /solutions/). */
.pourquoi__slogan .libelle { background: var(--fond-alterne); }
.pourquoi__raisons .libelle { background: var(--fond-page); }

/* ================================================================ slogan */
/* Le slogan, sa ligne des ayants droit et son sous-titre forment un seul
   bloc. La photo vient dessous, puis à côté dès 1024 px. */
.pourquoi__slogan {
  display: grid;
  gap: var(--e7);
  margin-top: var(--e8);
}
.pourquoi__slogan-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
}
.pourquoi__slogan-titre { max-width: 26ch; }
.pourquoi__slogan-texte { max-width: 48ch; }
/* La note de l'astérisque colle à la ligne des ayants droit. */
.pourquoi__slogan-note { margin-top: calc(var(--e2) - var(--e5)); }
.pourquoi__slogan-photo { aspect-ratio: 2000 / 1342; }

/* À partir de 1024 : le bloc sur cinq douzièmes, centré en hauteur contre la
   photo, qui prend les sept autres. */
@media (min-width: 1024px) {
  .pourquoi__slogan {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    align-items: center;
  }
}

/* =============================================================== constat */
/* Sous le slogan, dans la même ouverture, après un filet : la phrase à
   gauche, son texte et sa note à droite dès 1024 px, calés en bas. */
.pourquoi__constat {
  display: grid;
  gap: var(--e6);
  margin-top: var(--e9);
  padding-top: var(--e7);
  border-top: 1px solid var(--filet);
}
.pourquoi__constat-titre { max-width: 24ch; }
.pourquoi__constat-suite {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.pourquoi__constat-texte { max-width: 48ch; }
/* La question du 04/10 : au corps d'un titre de bloc, au-dessus de sa réponse. */
.pourquoi__constat-question { max-width: 30ch; }

@media (min-width: 1024px) {
  .pourquoi__constat {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e8);
    align-items: end;
  }
}

/* Les deux notes de la page, au format d'une mention. */
.pourquoi__note {
  font-size: var(--t-mention);
  line-height: var(--lh-mention);
  color: var(--texte-attenue);
}

/* =============================================================== raisons */
.pourquoi__raisons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e8);
}

.pourquoi__liste {
  display: grid;
  gap: var(--e7);
  width: 100%;
}

.pourquoi__raison {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}

.pourquoi__num {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-normale);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  color: var(--accent);
}
.pourquoi__raison .h3 { max-width: 24ch; }

/* À partir de 768 : deux colonnes, deux rangées. */
@media (min-width: 768px) {
  .pourquoi__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e8);
  }
}

/* L'ancien chapô de l'ouverture, juste avant le lien vers /solutions/. */
.pourquoi__suite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e4);
}
.pourquoi__phrase { max-width: 48ch; }

/* Le texte de bas de page de Jean-Marc, sous un filet. */
.pourquoi__fin {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  width: 100%;
  padding-top: var(--e7);
  border-top: 1px solid var(--filet);
}
.pourquoi__fin-texte { max-width: 64ch; }