/* ==========================================================================
   La création — maquette/Creation.dc.html
   crea-intro · crea-bloc (alternance) · crea-etapes (b-steps)
   ========================================================================== */

/* ----------------------------------------------------------------- Intro */
.crea-intro { padding: 40px 0 clamp(80px, 9vw, 128px); }
.crea-intro__inner { display: flex; flex-direction: column; gap: 48px; }
.crea-intro__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.crea-intro__script { font-family: var(--font-script); font-size: clamp(40px, 4vw, 60px); line-height: 1; color: var(--accent); }
.crea-intro__title { max-width: 900px; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.05; }
.crea-intro__text { max-width: 720px; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-soft); }

/* ----------------------------------------------------------------- Blocs */
.crea-bloc { padding-bottom: clamp(80px, 9vw, 128px); }
.crea-bloc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6.7vw, 96px); align-items: center; }
.crea-bloc--reverse .crea-bloc__media { order: 1; }
.crea-bloc__media .b-img, .crea-bloc__media .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.crea-bloc__body { display: flex; flex-direction: column; gap: 20px; }
.crea-bloc__num { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .24em; color: var(--accent); }
.crea-bloc__text { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-soft); }
.crea-bloc__details { font-size: 19px; line-height: 1.6; color: var(--ink-soft); }
.crea-bloc__btn { align-self: flex-start; padding-inline: 28px; }

/* ------------------------------------------------- Portrait à l'encre */
.crea-etapes { padding: clamp(80px, 9vw, 128px) 0; background: var(--bg-alt); }
.crea-etapes__inner { display: flex; flex-direction: column; gap: 48px; }
.crea-etapes__head { display: flex; flex-direction: column; gap: 10px; }
.crea-etapes__script { font-family: var(--font-script); font-size: clamp(32px, 3vw, 44px); line-height: 1; color: var(--accent); }
.b-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.b-steps__item { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ink); padding-top: 24px; }
.b-steps__num { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--accent); }
.b-steps__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; }
.b-steps__text { font-size: 19px; line-height: 1.55; color: var(--ink-soft); }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
	.crea-bloc__grid, .b-steps { grid-template-columns: minmax(0, 1fr); }
	.crea-bloc__media, .crea-bloc--reverse .crea-bloc__media { order: -1; }
}