/* Échelle typographique et espacements du site vitrine (DESIGN.md, section 3).
   Chargée en dernier : trois niveaux de lecture, mêmes valeurs sur toutes les sections. */
:root{--titre-dominant:clamp(40px,10vw,52px);--titre-section:30px;--texte:16px;--respiration:60px}
@media (min-width:1024px){:root{--titre-dominant:clamp(60px,4.6vw,76px);--titre-section:clamp(38px,3.1vw,52px);--texte:17px;--respiration:88px}}

/* Titre dominant, puis le paragraphe à 20 px */
.intro h1{font-size:var(--titre-dominant);line-height:1.02;max-width:none}
.intro h1+p{margin-top:20px;font-size:var(--texte);line-height:1.55}

/* Titres de section : même taille partout, deux lignes au plus */
.cinema-section h2,#pricing .circle-heading h2,.closing-invitation h2{font-size:var(--titre-section);line-height:1.08;max-width:30ch}
.section-heading h2+p,.circle-heading h2+p,.closing-invitation h2+p{margin-top:20px;font-size:var(--texte);line-height:1.6}

/* Respiration verticale des sections */
.cinema-section,.regards-section,.pricing-section,.closing-invitation{padding-block:var(--respiration)}


/* Opacité : titre à 100 %, texte d'accompagnement à 70 % */
:root{--texte-accompagnement:rgb(247 245 240 / .7)}
.intro h1,.cinema-section h2,#pricing .circle-heading h2,.closing-invitation h2{color:#f7f5f0}
.intro h1+p,.section-heading h2+p,.circle-heading h2+p,.closing-invitation h2+p{color:var(--texte-accompagnement)}