/* ============================================================
   BLOCS DE TEXTE entre les sections
   numero + titre a gauche, texte a droite ; empile sur mobile
   ============================================================ */

.texte{
    width: 90%;
    margin: 6% auto;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    column-gap: 4vw;
    row-gap: 0;
    align-items: start;
    color: #000;
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
}

/* le numero a sa propre ligne ; le titre et le texte demarrent a la meme hauteur */
.texte-tete{ display: contents; }
.texte-num { grid-column: 1; grid-row: 1; }
.texte-titre{ grid-column: 1; grid-row: 2; }
.texte-corps{ grid-column: 2; grid-row: 2; }

.texte-num{
    display: block;
    font-family: "suisse_intl_monoregular", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .2em;
    margin-bottom: 1.2rem;
}

.texte-titre{
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 56px);
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0;
}

.texte-corps{
    max-width: 40em;
}
.texte-corps p{
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.4;
    margin: 0 0 1em;
}
.texte-corps p:last-child{ margin-bottom: 0; }

@media (max-width: 700px){
    .texte{
        grid-template-columns: minmax(0, 1fr);
        margin: 12% auto;
    }
    .texte-num  { grid-row: 1; }
    .texte-titre{ grid-column: 1; grid-row: 2; margin-bottom: 1rem; }
    .texte-corps{ grid-column: 1; grid-row: 3; }
}