/* ============================================================
   STYLE-METHODE.CSS — Styles propres à la page méthode
   ============================================================ */


/* ── 1. EN-TÊTE ────────────────────────────────────────────── */

.page-entete {
  padding       : 10rem 3rem 5rem;
  border-bottom : 1px solid var(--bordure);
}

.page-titre {
  font-family : var(--police-serif);
  font-size   : clamp(2.8rem, 5vw, 5rem);
  font-weight : 300;
  line-height : 1.1;
  color       : var(--texte);
}

.page-titre em {
  font-style : italic;
  color      : var(--or);
}


/* ── 2. CONTENU ────────────────────────────────────────────── */

.methode-contenu {
  padding : 0 3rem;
}


/* ── 3. LISTE DES ÉTAPES ───────────────────────────────────── */

.etapes-liste {
  display        : flex;
  flex-direction : column;
  list-style     : none;
}


/* ── 4. ÉTAPE INDIVIDUELLE ─────────────────────────────────
   Chaque étape est divisée en deux colonnes :
   - Gauche (1fr) : numéro + titre + texte
   - Droite (1fr) : image ou placeholder
   ─────────────────────────────────────────────────────────── */

.etape {
  display               : grid;
  grid-template-columns : 1fr 1fr;   /* Texte | Image — parts égales */
  gap                   : 6rem;
  align-items           : center;

  padding        : 5rem 0;
  border-bottom  : 1px solid var(--bordure);
}

.etape:first-child {
  border-top : 1px solid var(--bordure);
}


/* ── 5. BLOC TEXTE ─────────────────────────────────────────── */

.etape-texte-bloc {
  display        : flex;
  flex-direction : column;
  gap            : 1.5rem;
}

/* Titre de l'étape */
.etape-titre {
  font-family    : var(--police-sans);
  font-size      : 2.2rem;
  font-weight    : 600;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  color          : var(--or);
}

/* Texte de l'étape — volontairement grand et lisible */
.etape-texte {
  font-family : var(--police-serif);
  font-size   : 2rem;          /* Grand pour la lisibilité */
  font-weight : 300;
  font-style  : italic;
  color       : var(--texte);
  line-height : 1.6;
  max-width   : 60ch;            /* Limite la longueur de ligne */
}


/* ── 6. IMAGE ──────────────────────────────────────────────
   Placeholder gris sombre — remplacer par <img> quand prêt.
   ─────────────────────────────────────────────────────────── */

.etape-image {
  width        : 100%;
  aspect-ratio : 4 / 3;
  background   : var(--bg-carte);
  border       : 1px solid var(--bordure);
}

/* Quand on remplace par une vraie image */
.etape-image img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
}


/* ── 7. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 900px) {

  .page-entete {
    padding : 8rem 1.5rem 3rem;
  }

  .methode-contenu {
    padding : 0 1.5rem;
  }

  /* Sur mobile : texte au-dessus, image en dessous */
  .etape {
    grid-template-columns : 1fr;
    gap                   : 2rem;
    padding               : 3rem 0;
  }

}