/* ============================================
   TEXT COLUMNS - Bloc texte 2 colonnes
   ============================================ */

.text-columns {
    width: 100%;
    padding-top: 160px;
    padding-bottom: 240px;
}

/* Wrapper fullwidth pour le titre */
.text-columns__title-wrapper {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto 100px;
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right));
}

/* Titre optionnel - TT Commons Thin 64px */
.text-columns__title {
    font-family: 'tt-commons-pro-thin', 'TT Commons Pro', sans-serif;
    font-size: 64px;
    font-weight: 100;
    line-height: 1.2;
    text-align: left;
    margin: 0;
    color: var(--color-noir);
}

.text-columns__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: max(var(--marge-laterale), env(safe-area-inset-left));
    padding-right: max(var(--marge-laterale), env(safe-area-inset-right));
}

.text-columns__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.text-columns__column {
    font-family: 'tt-commons-pro', 'TT Commons Pro', sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 42px;
    color: var(--color-noir);
}

.text-columns__column p {
    margin-bottom: var(--space-xs);
}

.text-columns__column p:last-child {
    margin-bottom: 0;
}

/* #34227 (25/09) — h3 des sous-parties (ex: page Nous) : rendu compact, titre
   collé a son paragraphe suivant, et separe visuellement de la section
   precedente par un espace au-dessus. Graisse renforcee (medium, dans la meme
   famille body — deja utilise ailleurs sur le site, cf. .legal-page__content h2
   dans design-system.css) pour faire ressortir le titre sans grossir la taille
   ni changer de police — iteration precedente (typo custom "hero") rejetee par
   Fabrice le 2026-09-22 (commit 8e0e638), a ne pas repeter. */
/* #34227 (30/09, run2) — le titre se comporte comme une ligne de plus du
   paragraphe qu'il introduit : marge sous le titre calibree (Puppeteer,
   getClientRects) pour egaler exactement l'interligne du texte courant
   (42px desktop / 34px mobile), au lieu du writeaway --space-xs (10px)
   qui laissait un ecart superieur a l'interligne (mesure : ~45px). Marge
   au-dessus conservee superieure a l'interligne (+10px, ecart deja en place
   avant ce changement) pour marquer le debut de la sous-partie. */
.text-columns__column h3 {
    font-weight: var(--fw-medium);
    margin-top: 16px;
    margin-bottom: 6.6px;
}

.text-columns__column h3:first-child {
    margin-top: 0;
}

/* #34227 (30/09) — bloc 3 sous-parties (page Nous) : suppression de l'espace
   entre les paragraphes d'une meme sous-partie (ils s'enchainent), le seul
   espace restant est desormais au-dessus de chaque titre (regle h3 ci-dessus,
   passee de --space-xl a --space-xs, valeur mesuree de l'ancien espacement
   entre paragraphes avant ce changement). Scope strictement aux colonnes
   contenant un h3 (:has(h3)) : seul ce bloc en a sitewide (intro page Nous et
   "Notre reseau" n'ont que des <p>, verifie de premiere main sur le DOM rendu),
   donc n'affecte ni le bloc d'intro ni "Notre reseau" ni aucun autre
   text-columns du site. */
.text-columns__column:has(h3) p {
    margin-bottom: 0;
}

/* Texte souligné dans le contenu */
.text-columns__column u {
    text-decoration: underline;
    text-decoration-color: var(--color-noir);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* #34227 (30/09) — jonction bloc 3 sous-parties (page Nous) / section Equipe :
   espace mesure a 320px desktop (text-columns padding-bottom 240 + team padding-top 80),
   juge trop grand par Fabrice. Divise par deux (160px), scope strictement a CETTE
   jonction via :has(+ .team) (deja utilise ailleurs dans le theme, ex. theme-block.css,
   press-cards.css) pour ne toucher ni l'espacement d'ouverture de page ni les autres
   sections. team.css garde ses paddings inchanges (80px desktop / 60px mobile) : c'est
   text-columns qui absorbe toute la reduction. */
.text-columns:has(+ .team) {
    padding-bottom: 80px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .text-columns {
        padding-top: 120px;
        padding-bottom: 180px;
    }

    .text-columns:has(+ .team) {
        padding-bottom: 50px;
    }

    .text-columns__title-wrapper {
        margin-bottom: 60px;
    }

    .text-columns__title {
        font-size: 52px;
    }

    .text-columns__grid {
        gap: 40px;
    }

    .text-columns__column {
        font-size: 20px;
        line-height: 38px;
    }
}

/* Mobile */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .text-columns {
        padding-top: 80px;
        padding-bottom: 120px;
    }

    .text-columns:has(+ .team) {
        padding-bottom: 30px;
    }

    .text-columns__title-wrapper {
        margin-bottom: 40px;
    }

    .text-columns__title {
        font-size: 40px;
    }

    .text-columns__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .text-columns__column {
        font-size: 18px;
        line-height: 34px;
        text-align: justify; /* #645 — justification mobile sur tous les text-columns */
        padding-left: 5px; /* #647 — +5px padding horizontal pour lisibilité */
        padding-right: 5px; /* #647 — +5px padding horizontal pour lisibilité */
    }

    /* #34227 (30/09, run2) — memes marges h3 recalibrees qu'en desktop, mais
       valeurs propres a cette taille de police/interligne mobile (18px/34px) :
       marge sous le titre = interligne mobile exact (mesure ~40px avant, cible
       34px), marge au-dessus = interligne mobile + 10px. */
    .text-columns__column h3 {
        margin-top: 15px;
        margin-bottom: 3.8px;
    }

    .text-columns__column p,
    .text-columns__column p strong,
    .text-columns__column p em {
        text-align: justify !important; /* #645 — force justify sur les <p> générés par wpautop() */
    }
}

/* ============================================
   PAYSAGE TACTILE - Tablette et téléphone en paysage
   Titre réduit
   ============================================ */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 769px) and (max-width: 1376px) {
    .text-columns__title {
        font-size: 52px;
    }
}