/*
 * Section Texte / Image — Figma node 2644:67471.
 *
 * Cadrage de la maquette : bloc de 1490 centré, colonne de texte 737 et mosaïque 729,
 * séparées de 25px, alignées sur leur centre vertical (c'est la mosaïque, plus haute,
 * qui donne la hauteur de la section).
 *
 * Les proportions de chaque emplacement de la mosaïque sont exprimées en aspect-ratio
 * repris des dimensions de la maquette, et non en hauteurs fixes : la mosaïque reste
 * ainsi fidèle à n'importe quelle largeur, sans point de rupture intermédiaire.
 */

.section-text-image {
    /* La maquette pose 198px au-dessus, mais c'est l'écart sous le hero, pas une valeur
       propre à cette section : la réutiliser telle quelle s'additionnerait à l'espacement
       bas de la section précédente. On retombe donc sur les tokens, ajustables ici. */
    --text-image-padding-block-start: var(--section-space);
    --text-image-padding-block-end: var(--section-space);
    --text-image-gap: 25px;

    padding-block: var(--text-image-padding-block-start) var(--text-image-padding-block-end);
}

.section-text-image__inner {
    display: flex;
    align-items: center;
    gap: var(--text-image-gap);
    /* min() plutôt que max-width + padding-inline : combinés, ils rognaient les
       gouttières SUR la largeur cible (1490 - 128 = 1362 au lieu de 1490). Ici la largeur
       vaut exactement celle de la maquette dès qu'il y a la place. */
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
}

.section-text-image--media-left .section-text-image__inner {
    flex-direction: row-reverse;
}

/* ---- Colonne de texte ---- */

.section-text-image__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-list);
    /* 737 / 729 dans la maquette : les deux colonnes se partagent la largeur à parts
       quasi égales, la mosaïque ne devant jamais être écrasée par un texte long. */
    flex: 1 1 737px;
    min-width: 0;
}

.section-text-image__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary);
}

.section-text-image__text {
    color: var(--color-primary-950);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
}

/* Champ enrichi : l'éditeur peut produire plusieurs paragraphes et des listes. */
.section-text-image__text > * + * {
    margin-block-start: var(--space-list);
}

/* ---- Mosaïque ---- */

.section-text-image__gallery {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    flex: 1 1 729px;
    min-width: 0;
}

.section-text-image__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    /* Colonnes de largeur égale, comme l'auto-layout de la maquette. */
    flex: 1 1 0;
    min-width: 0;
}

.section-text-image__figure {
    margin: 0;
    /* Repli si aucune règle de proportion ne s'applique (nombre d'images inattendu). */
    aspect-ratio: 235 / 260;
    /*
     * Indispensable : les figures sont des éléments flex, dont la taille minimale
     * automatique vaut la hauteur intrinsèque de leur contenu. L'image l'emportait donc sur
     * la proportion demandée — une photo en portrait étirait sa case bien au-delà de ce que
     * la maquette prévoit (mesuré : 1168px de haut pour une proportion qui en voulait 499).
     */
    min-height: 0;
}

.section-text-image__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xxs);
}

/* ---- Variante vidéo ---- */

/*
 * La vidéo occupe la place de la mosaïque, au format de la source (16:9). position:
 * relative pour y ancrer le bouton pause.
 */
.section-text-image__figure--video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.section-text-image__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xxs);
    background-color: var(--color-primary);
}

/* Bouton pause / lecture : discret, en bas à gauche, cible de 44px. */
.section-text-image__video-toggle {
    position: absolute;
    inset-block-end: var(--space-s);
    inset-inline-start: var(--space-s);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-alpha-90);
    color: var(--color-neutral-50);
    cursor: pointer;
}

.section-text-image__video-toggle:hover {
    background-color: var(--color-primary);
}

.section-text-image__video-toggle[hidden] {
    display: none;
}

/*
 * L'icône est dessinée en CSS : un triangle « lecture » au repos, deux barres « pause »
 * pendant la lecture. Aucune image à charger, et la couleur suit currentColor.
 */
.section-text-image__video-icon {
    width: 14px;
    height: 14px;
    background-color: currentColor;
    clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

.section-text-image__video-toggle.is-playing .section-text-image__video-icon {
    clip-path: polygon(10% 0, 40% 0, 40% 100%, 10% 100%, 10% 0, 60% 0, 90% 0, 90% 100%, 60% 100%, 60% 0);
}

/*
 * Proportions par nombre d'images. Les valeurs du cas à 5 images sont celles de la
 * maquette au pixel ; les autres cas réemploient ces mêmes proportions pour garder le
 * même rythme, avec moins de colonnes.
 *
 * Regroupées sous min-width pour que la version étroite (plus bas) n'ait pas à les
 * annuler — aucune surcharge de spécificité, aucun !important.
 */
@media (min-width: 769px) {
    /* 5 images — agencement exact de la maquette */
    .section-text-image__gallery--5 .section-text-image__column:nth-child(1) .section-text-image__figure:nth-child(1) { aspect-ratio: 235 / 185; }
    .section-text-image__gallery--5 .section-text-image__column:nth-child(1) .section-text-image__figure:nth-child(2) { aspect-ratio: 120 / 127; }
    .section-text-image__gallery--5 .section-text-image__column:nth-child(2) .section-text-image__figure:nth-child(1) { aspect-ratio: 235 / 136; }
    .section-text-image__gallery--5 .section-text-image__column:nth-child(2) .section-text-image__figure:nth-child(2) { aspect-ratio: 235 / 296; }
    .section-text-image__gallery--5 .section-text-image__column:nth-child(3) .section-text-image__figure:nth-child(1) { aspect-ratio: 235 / 333; }

    /* 4 images — la paire décalée est conservée en 1re colonne */
    .section-text-image__gallery--4 .section-text-image__column:nth-child(1) .section-text-image__figure:nth-child(1) { aspect-ratio: 235 / 185; }
    .section-text-image__gallery--4 .section-text-image__column:nth-child(1) .section-text-image__figure:nth-child(2) { aspect-ratio: 120 / 127; }
    .section-text-image__gallery--4 .section-text-image__column:nth-child(2) .section-text-image__figure:nth-child(1) { aspect-ratio: 235 / 296; }
    .section-text-image__gallery--4 .section-text-image__column:nth-child(3) .section-text-image__figure:nth-child(1) { aspect-ratio: 235 / 333; }

    /* 3 images — une par colonne, hauteurs décalées */
    .section-text-image__gallery--3 .section-text-image__column:nth-child(1) .section-text-image__figure { aspect-ratio: 235 / 185; }
    .section-text-image__gallery--3 .section-text-image__column:nth-child(2) .section-text-image__figure { aspect-ratio: 235 / 296; }
    .section-text-image__gallery--3 .section-text-image__column:nth-child(3) .section-text-image__figure { aspect-ratio: 235 / 333; }

    /* 2 images — deux colonnes plus larges, même décalage */
    .section-text-image__gallery--2 .section-text-image__column:nth-child(1) .section-text-image__figure { aspect-ratio: 358 / 285; }
    .section-text-image__gallery--2 .section-text-image__column:nth-child(2) .section-text-image__figure { aspect-ratio: 358 / 444; }

    /* 1 image — occupe exactement la surface de la mosaïque de la maquette */
    .section-text-image__gallery--1 .section-text-image__figure { aspect-ratio: 729 / 444; }

    /* La petite image décalée : 120 de large sur 235, alignée à droite de sa colonne.
       C'est la signature de la mosaïque, on la garde dès qu'il y a 4 images ou plus. */
    .section-text-image__gallery--5 .section-text-image__column:nth-child(1) .section-text-image__figure:nth-child(2),
    .section-text-image__gallery--4 .section-text-image__column:nth-child(1) .section-text-image__figure:nth-child(2) {
        width: 51%;
        margin-inline-start: auto;
    }
}

/* ---- Variante encadrée ----
 *
 * Reproduit le traitement de la section « Espace professionnel » (Figma 2644:67558) : une
 * boîte bordée sur toute la largeur du conteneur, l'image venant affleurer le bord et non
 * s'arrêter à la colonne de contenu. C'est la même section avec une seule image, d'où une
 * simple variante plutôt qu'un layout de plus.
 */

.section-text-image--framed .section-text-image__inner {
    /* Largeur de la colonne de contenu (1490) et non du conteneur (1792) : à pleine largeur,
       le bandeau paraissait étiré et plat. L'image va toujours jusqu'au bord du cadre. */
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    gap: var(--space-hero);
    /* stretch, pas center : les deux colonnes doivent faire la hauteur du cadre pour que
       l'image le remplisse de haut en bas. */
    align-items: stretch;
    /* Découpe l'image sur les angles arrondis du cadre. */
    overflow: hidden;
    border: 1px solid var(--color-secondary-500);
    border-radius: var(--radius-xxs);
}

.section-text-image--framed .section-text-image__content {
    flex: 1 1 0;
    justify-content: center;
    max-width: none;
    /* Padding sur le bloc et sur le seul côté intérieur : côté bord du cadre, le texte
       garde ses 48, mais rien ne s'ajoute entre lui et l'image, dont l'écart est déjà
       donné par le gap. */
    /* 80 en hauteur et non 48 : le cadre gagne de la hauteur, l'image avec lui. */
    padding: var(--space-large) 0 var(--space-large) var(--space-xl);
}

/* Image à gauche : le texte passe à droite, son padding doit suivre. */
.section-text-image--framed.section-text-image--media-left .section-text-image__content {
    padding: var(--space-large) var(--space-xl) var(--space-large) 0;
}

.section-text-image--framed .section-text-image__gallery {
    /* 735 sur 1792 dans la maquette. En proportion, pour rester juste à toute largeur. */
    flex: none;
    width: 41%;
    align-items: stretch;
}

/*
 * Borné à 1201px et non à 769px : c'est la largeur à partir de laquelle le cadre est en
 * DEUX COLONNES. Sous 1200 il s'empile, la colonne d'image n'a plus de hauteur imposée par
 * le texte, et une image en absolu dans une figure en flex:1 s'effondrait à zéro — l'image
 * disparaissait purement et simplement entre 769 et 1200. En dessous, la règle de proportion
 * générale reprend la main, ce qui est le comportement voulu.
 */
@media (min-width: 1201px) {
    /*
     * Cas à une image, celui pour lequel la variante est faite : c'est le TEXTE qui donne sa
     * hauteur au cadre, et l'image qui s'y adapte en se faisant recadrer.
     *
     * L'image est donc sortie du flux. Avec une hauteur en pourcentage elle restait
     * dimensionnée par sa propre taille intrinsèque et imposait la hauteur du cadre — 1040px
     * au lieu de ~320 sur l'image de la maquette, qui est un très grand fichier. En absolu
     * dans un conteneur étiré par le flex, elle ne peut plus influencer la hauteur.
     *
     * Ces sélecteurs comptent trois classes contre deux pour la règle de proportion plus
     * haut : ils l'emportent sans qu'on ait à forcer la spécificité.
     */
    .section-text-image--framed .section-text-image__gallery--1 .section-text-image__figure {
        position: relative;
        /* Remplit la hauteur de la colonne, elle-même étirée par le cadre. */
        flex: 1;
        aspect-ratio: auto;
    }

    .section-text-image--framed .section-text-image__gallery--1 .section-text-image__image {
        position: absolute;
        inset: 0;
    }
}

/* Dans le cadre, l'image affleure le bord : ses angles sont ceux du cadre, pas les siens. */
.section-text-image--framed .section-text-image__image {
    border-radius: 0;
}

/* ---- Adaptations ---- */

/* Sous 1200px la mosaïque ne tient plus à côté du texte : on empile, texte d'abord. */
@media (max-width: 1200px) {
    .section-text-image {
        --text-image-padding-block-start: var(--section-space);
        --text-image-padding-block-end: var(--section-space);
        --container-gutter: var(--space-bloc);
    }

    .section-text-image__inner,
    .section-text-image--media-left .section-text-image__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xl);
    }

    .section-text-image__content,
    .section-text-image__gallery {
        flex-basis: auto;
    }

    /*
     * Cadre empilé : le texte n'est plus adossé à un seul bord, il reprend donc son padding
     * sur les quatre côtés, et l'image affleure les deux bords latéraux sous lui. Le gap du
     * cadre est annulé, l'image devant toucher le texte comme elle touche les bords.
     */
    .section-text-image--framed .section-text-image__inner,
    .section-text-image--framed.section-text-image--media-left .section-text-image__inner {
        gap: var(--space-xl);
    }

    .section-text-image--framed .section-text-image__content,
    .section-text-image--framed.section-text-image--media-left .section-text-image__content {
        padding: var(--space-bloc);
    }

    .section-text-image--framed .section-text-image__gallery {
        width: 100%;
    }
}

/*
 * Sur mobile, trois colonnes de mosaïque deviendraient illisibles. display: contents
 * fait disparaître les conteneurs de colonnes de la mise en page — leurs images
 * deviennent alors les enfants directs de la grille — sans toucher au HTML ni dupliquer
 * la boucle PHP. Les colonnes ne portent ni fond ni bordure, rien n'est perdu.
 */
@media (max-width: 768px) {
    .section-text-image {
        --container-gutter: var(--space-m);
    }

    .section-text-image__gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-compact);
    }

    .section-text-image__column {
        display: contents;
    }

    .section-text-image__figure {
        aspect-ratio: 1;
    }

    /* Une image seule reste pleine largeur plutôt que sur une demi-colonne. */
    .section-text-image__gallery--1 {
        grid-template-columns: 1fr;
    }

    .section-text-image__gallery--1 .section-text-image__figure {
        aspect-ratio: 3 / 2;
    }
}