/* ═══════════════════════════════════════════════════════════════
   BREATH.CSS — Sud Web Project
   La respiration éditoriale.

   Un plein écran : pas de titre, pas d'image, pas de bouton.
   Une seule phrase dont les mots s'éclairent à mesure que le
   visiteur descend. C'est le moment où le site arrête de vendre —
   et c'est précisément ce qui produit le sentiment du luxe : la
   preuve qu'on peut se permettre dix secondes de silence.

   Aucun <h> : votre structure de titres reste intacte.
   À CHARGER après why.css, avant type.css.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1 · LA SECTION
   ─────────────────────────────────────────────────────────────── */
.breath {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 10rem var(--gutter, 2.5rem);
    overflow: hidden;
}

/* Un souffle de lumière, très large, très faible */
.breath::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(59, 130, 246, .07), transparent 70%);
}

.breath-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
}

/* ───────────────────────────────────────────────────────────────
   2 · LA PHRASE
   Grande, fine, aérée. Le corps fait tout le travail.
   ─────────────────────────────────────────────────────────────── */
.breath-line {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.9vw, 3.7rem);
    line-height: 1.28;
    letter-spacing: -.012em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

.breath-line em {
    font-style: italic;
    color: var(--blue-l);
}

/* Chaque mot part éteint et s'allume au passage du scroll.
   Sans JavaScript, tout reste lisible : on n'éteint jamais en CSS. */
.breath-word {
    display: inline-block;
    transition: opacity .3s linear;
}

/* ───────────────────────────────────────────────────────────────
   3 · LE REPÈRE
   Un filet vertical, à gauche de la phrase. Il indique une prise
   de parole, comme une citation, sans en avoir la lourdeur.
   ─────────────────────────────────────────────────────────────── */
.breath-mark {
    display: block;
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, var(--blue-l), rgba(147, 196, 253, 0));
    margin-bottom: 2.75rem;
    transition: height 1.1s var(--ease);
}

.breath.is-marked .breath-mark {
    height: 72px;
}

/* ───────────────────────────────────────────────────────────────
   4 · LA SIGNATURE
   Discrète, à droite. Elle ancre la phrase dans une voix.
   ─────────────────────────────────────────────────────────────── */
.breath-sign {
    display: block;
    margin-top: 3.5rem;
    font-family: var(--ff-body);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #4E5A6C;
}

/* ───────────────────────────────────────────────────────────────
   5 · RESPONSIVE
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .breath {
        min-height: 64vh;
        padding: 7rem var(--gutter, 2rem);
    }

    .breath-mark {
        margin-bottom: 2rem;
    }

    .breath.is-marked .breath-mark {
        height: 56px;
    }
}

@media (max-width: 768px) {
    .breath {
        min-height: 58vh;
        padding: 5.5rem var(--gutter, 1.5rem);
    }

    .breath-line {
        font-size: clamp(1.5rem, 6.4vw, 2.1rem);
        line-height: 1.34;
    }

    .breath-sign {
        margin-top: 2.5rem;
        letter-spacing: .18em;
    }
}