/* ==========================================================================
   Page « Pourquoi c'est moins cher » (/pourquoi-ce-prix) · vague 2
   --------------------------------------------------------------------------
   Feuille de PAGE, chargée par templates/methode.html seulement (même pattern
   que static/exemples.css). Deux raisons de ne pas la mettre dans style.css :
   le contrat de poids de l'accueil (tests/test_refonte.py) compte la charte
   entière, et cette page est la plus textuelle du site alors que l'accueil est
   la plus lue.

   Tout est en jetons de la charte (`--fg`, `--muted`, `--line`, `--card`,
   `--font-display`…) : le thème sombre suit sans bloc dédié, comme la strate
   « Page Applications métier » corrigée dans le même lot. L'ossature (hero,
   section-head, included-grid, faq-list, cta-final) vient de style.css : ne
   rien redéclarer ici.
   ========================================================================== */

/* Deux grilles de cette page portent QUATRE cartes. `.included-grid` est un
   `auto-fit` sur 300 px : au-delà de 1000 px il donne trois colonnes, donc une
   rangée de trois et une orpheline en dessous (le défaut mesuré sur la section
   « Par où commencer ? » de l'accueil, corrigé de la même façon). Deux colonnes
   au-delà de 900 px : deux rangées pleines. */
@media (min-width: 900px) {
  .page-methode .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La thèse, seule sur sa ligne sous le chapô du hero : c'est la phrase que le
   lecteur doit pouvoir répéter à quelqu'un d'autre sans avoir l'air d'un
   pigeon. Elle porte donc la police de titrage, pas celle du corps. */
.methode-these {
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg);
}

/* Colonne de prose : la page explique, elle ne liste pas. Largeur de lecture
   bornée (l'échelle du dépôt pour du texte suivi), à plat gauche sous le titre
   de sa section.

   `margin: 0 auto` la centrait dans la colonne de contenu : mesuré à 1440 px,
   la prose commençait à 340 px quand son propre titre commençait à 212, soit
   128 px de décalage sur les quatre sections de texte, pendant que la FAQ de la
   même page, large de 760 px elle aussi, restait calée à 212. Deux bords
   gauches sur une page qui n'a qu'une colonne, c'est la marque de la mise en
   page qui n'a été regardée nulle part. */
.methode-prose {
  max-width: 760px;
  margin: 0;
}
.methode-prose p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--fg-soft);
}
.methode-prose p:last-child { margin-bottom: 0; }
.methode-prose strong { color: var(--fg); }
.methode-prose a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.methode-prose a:hover { border-bottom-color: var(--fg); }

/* Le paragraphe de franchise (« à qui on ne cherche pas à vendre ») : c'est le
   passage qui coûte quelques départs immédiats et qui gagne les autres. Il se
   détache sans crier, par un filet de marge plutôt que par un encadré. */
.methode-franchise {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
}

/* Les trois preuves ouvrables. Elles cohabitent avec des `.included-item` de
   la charte à environ six cents pixels d'écart sur la même page (section
   « L'atelier »), même fond, même bordure : ce ne sont donc pas deux
   composants, c'est le même, avec une action en bas. On ne redéclare ici que
   ce qui DIFFÈRE (la colonne flex et le lien poussé au bas de la carte) ; le
   reste vient de `.included-item`, appliquée en plus dans le gabarit.

   L'audit avait mesuré quatre écarts entre les deux cartes voisines, tous nés
   d'une redéclaration à la main : graisse de titre 700 contre 600, pas de
   `letter-spacing`, rayon et couleur de paragraphe différents. Une carte
   recopiée finit toujours par diverger de celle qu'elle recopiait. */
.methode-preuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.methode-preuve {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}
/* Le titre suit la carte de la charte : c'est `.included-item h3` qui fait
   foi, on ne pose ici que la marge (la carte de la charte pousse son titre de
   16 px sous l'icône ; ici la colonne flex s'en charge). */
.methode-preuve h3 { margin: 4px 0 0; }
.methode-preuve p { margin: 0; }
/* Le lien est la seule action de la carte : cible tactile de 44 px, poussée en
   bas par `margin-top: auto` pour que les trois s'alignent. */
.methode-preuve-link {
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.methode-preuve-link:hover { color: var(--accent-azur); }

/* Aucun champ sur cette page, donc pas de bloc « 16 px minimum » : la règle
   mobile du dépôt ne s'applique qu'aux feuilles qui portent des contrôles. */
@media (max-width: 640px) {
  .methode-these { font-size: 20px; }
  .methode-prose p { font-size: 15.5px; }
  .methode-preuve { padding: 22px 20px 18px; }
}

/* Sur un appareil sans souris, iOS garde l'état de survol jusqu'au tap suivant
   ailleurs : le lien resterait bleu au retour sur la page. Bloc en FIN de
   feuille, une media query n'ajoutant aucune priorité (seul l'ordre tranche). */
@media (hover: none) {
  .methode-preuve-link:hover { color: var(--fg); }
  .methode-prose a:hover { border-bottom-color: var(--line-strong); }
}