/* Pulsion Studio : études de cas (outils/source-etudes.py). S'ajoute à experience.css, pages.css et structure.css. */

/* ---------- Visuel et fiche du projet ---------- */
.etude-apercu { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
.etude-visuel { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(10, 30, 90, .45); }
.etude-visuel img { display: block; width: 100%; height: auto; }
.etude-fiche { display: flex; flex-direction: column; }
.etude-fiche > div { padding: 18px 0; border-top: 1px solid var(--line); }
.etude-fiche > div:last-child { border-bottom: 1px solid var(--line); }
.etude-fiche dt { margin-bottom: 4px; color: var(--muted); font-size: .85rem; }
.etude-fiche dd { margin: 0; font-family: var(--font-title); font-weight: 500; font-size: 1.1rem; line-height: 1.35; text-wrap: balance; }

/* ---------- Sections de récit : titre à gauche, texte à droite ---------- */
.etude-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 80px); }
.etude-grille .section-intro { position: sticky; top: calc(var(--nav-bottom, 90px) + 48px); margin-bottom: 0; }
.etude-blocs { display: flex; flex-direction: column; }
.etude-bloc { padding: 28px 0; border-top: 1px solid var(--line); }
.etude-bloc:first-child { padding-top: 0; border-top: 0; }
.etude-bloc h3 { margin-bottom: 10px; font-family: var(--font-title); font-weight: 500; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); letter-spacing: -0.02em; text-wrap: balance; }
.etude-bloc p { max-width: 62ch; color: var(--muted); line-height: 1.7; text-wrap: pretty; }
.etude-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.etude-liste li { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-strong); font-size: .95rem; }

/* ---------- Avis ---------- */
.etude-avis { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 80px); }
.etude-avis .section-intro { margin-bottom: 0; }

/* ---------- Pour aller plus loin ---------- */
.related-blocks { display: flex; flex-direction: column; gap: 36px; }
.etude-suivante { max-width: 420px; }
.etude-suivante .work a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.etude-suivante .work-media { aspect-ratio: 16 / 10; }
.etude-suivante .work a:hover .work-name { color: var(--blue); }

@media (max-width: 900px) {
  .etude-apercu, .etude-grille, .etude-avis { grid-template-columns: 1fr; }
  .etude-grille .section-intro { position: static; }
}