/* ============================================================
   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);

  /* Animation d'apparition sur l'en-tête complet */
  opacity   : 0;
  animation : fadeIn 1s ease-out forwards;
}

.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 ─────────────────────────────────
   Texte seul, pleine largeur : titre + description.
   ─────────────────────────────────────────────────────────── */

.etape {
  padding        : 4rem 0;
  border-bottom  : 1px solid var(--bordure);

  /* Animation Glissée (fadeUp) — chaque étape entre en cascade,
     après l'en-tête, grâce à un retard croissant (voir plus bas). */
  opacity   : 0;
  animation : fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Décalage progressif : les étapes apparaissent l'une après l'autre */
.etape:nth-child(1) { animation-delay : 0.15s; }
.etape:nth-child(2) { animation-delay : 0.25s; }
.etape:nth-child(3) { animation-delay : 0.35s; }
.etape:nth-child(4) { animation-delay : 0.45s; }
.etape:nth-child(5) { animation-delay : 0.55s; }
.etape:nth-child(6) { animation-delay : 0.65s; }
.etape:nth-child(7) { animation-delay : 0.75s; }



/* ── 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. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 900px) {

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

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

  .etape {
    padding : 3rem 0;
  }

  .etape-titre {
    font-size : 1.7rem;
  }

  .etape-texte {
    font-size : 1.5rem;
  }

}

/* ── 7. KEYFRAMES (ANIMATIONS) ─────────────────────────────
   Identiques à celles de style.css / style-contact.css.
   ─────────────────────────────────────────────────────────── */

/* Fondu simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fondu + glissement du bas vers le haut */
@keyframes fadeUp {
  from {
    opacity   : 0;
    transform : translateY(30px);
  }
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}