/* ============================================================
   AGENCE AUGUSTIN — Responsive par appareil (v1.0.131)

   Objectif :
   - les dimensions exactes saisies dans WordPress restent un réglage desktop ;
   - téléphone et tablette utilisent toujours la géométrie native du composant ;
   - les tablettes larges (y compris > 1023 px en paysage) ne récupèrent pas
     les verrous de retours à la ligne destinés aux ordinateurs ;
   - aucun texte, média ou bloc éditorial ne peut dépasser la largeur réelle
     du viewport ou empiéter sur la colonne voisine.

   La classe html.aa-non-computer est posée par main.js à partir du type
   d'appareil, et non d'une liste de largeurs d'écran. Cette feuille est chargée
   après text-flow.css afin d'être l'autorité finale pour ces appareils.
   ============================================================ */

html.aa-non-computer {
    --aa-device-safe-x: clamp(1.25rem, 4vw, 3rem);
}

html.aa-non-computer,
html.aa-non-computer body,
html.aa-non-computer #page,
html.aa-non-computer #main-content,
html.aa-non-computer .site-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

html.aa-non-computer body #main-content :is(
    section,
    article,
    div,
    figure,
    blockquote,
    header,
    footer,
    nav
),
html.aa-non-computer body .site-footer :is(div, nav, ul, li) {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

html.aa-non-computer body #main-content :is(
    .container,
    .aa-container,
    .aa-container-wide,
    .aa-container-narrow
) {
    width: 100% !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------------
   Retours WordPress : uniquement desktop.
   Sur téléphone/tablette, les retours manuels redeviennent des espaces et le
   navigateur compose selon la largeur effectivement disponible.
   ------------------------------------------------------------ */
html.aa-non-computer body .aa-authored-text {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    text-wrap: wrap !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    vertical-align: baseline !important;
}

html.aa-non-computer body #main-content br.aa-authored-break,
html.aa-non-computer body #main-content br.aa-manual-break,
html.aa-non-computer body .site-footer br.aa-authored-break,
html.aa-non-computer body .site-footer br.aa-manual-break {
    display: none !important;
    visibility: hidden !important;
}

html.aa-non-computer body #main-content .aa-manual-break-space,
html.aa-non-computer body .site-footer .aa-manual-break-space {
    display: inline !important;
    visibility: visible !important;
}

html.aa-non-computer body #main-content :is(
    h1, h2, h3, h4, h5, h6,
    p, li, dt, dd, blockquote, figcaption,
    a, strong, em, small, cite, span,
    .aa-rich-text,
    .aa-rich-text > *,
    .entry-content,
    .entry-content > *,
    .aa-article-copy__content,
    .aa-article-copy__content > *,
    .aa-article-image-text__content,
    .aa-article-image-text__content > *
),
html.aa-non-computer body .site-footer :is(
    h1, h2, h3, h4, h5, h6,
    p, li, dt, dd, blockquote, figcaption,
    a, strong, em, small, cite, span
) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-wrap: wrap !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Les wrappers éditoriaux ne peuvent jamais hériter d'un max-content desktop. */
html.aa-non-computer body #main-content :is(
    .hero__content,
    .hero__content-inner,
    .editorial__content,
    .editorial__content-inner,
    .editorial__text,
    .text-centered__inner,
    .text-centered__content,
    .section-heading,
    .process-card,
    .process-card__text,
    .process-home__head,
    .process-timeline__heading,
    .timeline-step__content,
    .triptych__head,
    .triptych__intro,
    .triptych-card__content,
    .cta-banner__heading,
    .cta-banner__content,
    .image-banner__content,
    .image-banner__content-inner,
    .large-image-text__content,
    .large-image-text__content-inner,
    .image-text-multiple__content,
    .image-text-multiple__content-inner,
    .full-width-banner__heading,
    .full-width-banner__body,
    .project-showcase__content-row,
    .project-showcase__content-column,
    .project-showcase__content,
    .founder__content,
    .founder__title,
    .founder__text,
    .quote-section blockquote,
    .contact-minimal__content,
    .journal-featured__content,
    .journal-card__content,
    .journal-list__heading,
    .gallery-free__heading,
    .aa-article,
    .aa-article-intro__inner,
    .aa-article-copy,
    .aa-article-copy__inner,
    .aa-article-image-text__frame,
    .aa-article-image-text__copy,
    .aa-article-gallery__grid,
    .aa-article-quote__figure,
    .aa-article-navigation
) {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------------
   Images : les valeurs exactes WordPress ont déjà été retirées du DOM par
   main.js sur ces appareils. Ces garde-fous empêchent tout ancien preset ou
   média intrinsèque de recréer un dépassement.
   ------------------------------------------------------------ */
html.aa-non-computer body #main-content :is(
    img,
    picture,
    video,
    iframe,
    svg,
    canvas
) {
    max-width: 100% !important;
}

html.aa-non-computer body #main-content :is(
    .editorial__media,
    .editorial__media-column,
    .image-banner__media,
    .large-image-text__media,
    .image-text-multiple__media,
    .founder__portrait,
    .timeline-step__media,
    .full-width-banner__media,
    .project-showcase__media,
    .triptych-card__media,
    .gallery-free__grid > figure,
    .contact-minimal__media,
    .journal-featured__media,
    .journal-card__media,
    .aa-article-media,
    .aa-article-gallery__item
) {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------------
   Grilles : les colonnes peuvent réellement rétrécir. Les espacements sont
   fluides et ne dépendent pas d'une résolution prédéfinie.
   ------------------------------------------------------------ */
html.aa-non-computer body #main-content :is(
    .editorial__grid,
    .image-banner__grid,
    .large-image-text__grid,
    .image-text-multiple__row,
    .founder__grid,
    .timeline-step,
    .journal-featured__grid,
    .journal-card__link,
    .contact-minimal__grid,
    .cta-banner__inner,
    .aa-article-image-text__grid,
    .aa-article-gallery__grid
) {
    min-width: 0 !important;
    max-width: 100% !important;
    column-gap: clamp(1.5rem, 4vw, 3.5rem) !important;
    row-gap: clamp(1.5rem, 4vw, 3rem) !important;
}

html.aa-non-computer body #main-content :is(
    .triptych-card,
    .triptych-card__content,
    .process-card,
    .journal-card,
    .journal-card__meta,
    .journal-card__content
) {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Le texte des cartes peut s'étendre uniquement dans sa propre colonne. */
html.aa-non-computer body #main-content :is(
    .triptych-card__content h3,
    .triptych-card__content p,
    .process-card h3,
    .process-card__text,
    .journal-card__title,
    .journal-card__excerpt,
    .journal-featured__title,
    .journal-featured__excerpt
) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ------------------------------------------------------------
   Journal / articles : aucune section ne peut sortir de l'écran.
   Les contenus riches (tableaux, embeds, images) restent consultables.
   ------------------------------------------------------------ */
html.aa-non-computer body.single-journal #main-content :is(
    .aa-article,
    .aa-article-section,
    .aa-article-section > .aa-container,
    .aa-article-intro,
    .aa-article-intro__inner,
    .aa-article-image__figure,
    .aa-article-image-text__frame,
    .aa-article-image-text__grid,
    .aa-article-image-text__media,
    .aa-article-image-text__copy,
    .aa-article-copy,
    .aa-article-copy__inner,
    .aa-article-gallery__grid,
    .aa-article-gallery__item,
    .aa-article-quote__figure,
    .aa-article-navigation
) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html.aa-non-computer body.single-journal #main-content :is(
    .aa-article-copy__content,
    .aa-article-image-text__content
) :is(img, video, iframe, table) {
    max-width: 100% !important;
}

html.aa-non-computer body.single-journal #main-content :is(pre, table) {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Smartphone et tablette portrait : une seule colonne. Le breakpoint reste
   dimensionnel, pas lié à une liste de modèles d'appareils. */
@media (max-width: 899px) {
    html.aa-non-computer body #main-content :is(
        .editorial__grid,
        .image-banner__grid,
        .large-image-text__grid,
        .image-text-multiple__row,
        .founder__grid,
        .timeline-step,
        .journal-featured__grid,
        .journal-card__link,
        .contact-minimal__grid,
        .cta-banner__inner,
        .aa-article-image-text__grid,
        .aa-article-gallery__grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.aa-non-computer body #main-content :is(
        .editorial__content,
        .editorial__media-column,
        .image-banner__media,
        .image-banner__content,
        .large-image-text__media,
        .large-image-text__content,
        .image-text-multiple__media,
        .image-text-multiple__content,
        .founder__portrait,
        .founder__content,
        .timeline-step__media,
        .timeline-step__content,
        .journal-featured__media,
        .journal-featured__content,
        .journal-card__meta,
        .journal-card__media,
        .journal-card__content,
        .contact-minimal__content,
        .contact-minimal__media,
        .cta-banner__heading,
        .cta-banner__content,
        .aa-article-image-text__media,
        .aa-article-image-text__copy
    ) {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.aa-non-computer body #main-content :is(
        .image-banner__media,
        .large-image-text__media,
        .image-text-multiple__media,
        .founder__portrait,
        .journal-featured__media,
        .aa-article-image-text__media
    ) {
        order: 1 !important;
    }

    html.aa-non-computer body #main-content :is(
        .image-banner__content,
        .large-image-text__content,
        .image-text-multiple__content,
        .founder__content,
        .journal-featured__content,
        .aa-article-image-text__copy
    ) {
        order: 2 !important;
    }

    html.aa-non-computer body #main-content :is(
        .image-banner__content,
        .large-image-text__content,
        .image-text-multiple__content,
        .founder__content,
        .journal-featured__content
    ) {
        padding-right: var(--aa-device-safe-x) !important;
        padding-left: var(--aa-device-safe-x) !important;
    }
}

/* Même garde-fou sous 1024 px si un navigateur ne fournit pas correctement
   les informations d'appareil à JavaScript. */
@media (max-width: 1023px) {
    body.single-journal #main-content :is(
        .aa-article,
        .aa-article-section,
        .aa-article-section > .aa-container,
        .aa-article-intro__inner,
        .aa-article-image__figure,
        .aa-article-image-text__frame,
        .aa-article-image-text__grid,
        .aa-article-image-text__media,
        .aa-article-image-text__copy,
        .aa-article-copy,
        .aa-article-copy__inner,
        .aa-article-gallery__grid,
        .aa-article-gallery__item,
        .aa-article-quote__figure,
        .aa-article-navigation
    ) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.single-journal #main-content :is(
        .aa-article-copy__content,
        .aa-article-image-text__content
    ) :is(img, video, iframe, table) {
        max-width: 100% !important;
    }
}

/* ============================================================
   V121 — Ajustements ciblés téléphone / tablette

   Base fonctionnelle : V1.0.120, elle-même issue de V1.0.118.
   - aucune règle de texte desktop n'est modifiée ;
   - aucune longueur de filet / barre / CTA n'est modifiée ;
   - le Hero Image est corrigé au niveau du composant, jamais d'une page ;
   - les compositions tablette conservent leur structure ; seuls leurs blocs
     texte sont bornés à la largeur réellement disponible.
   ============================================================ */

/* Hero Image réutilisable : le média remplit toujours le Hero sur un appareil
   non ordinateur. Le point de cadrage reste centré sur la zone principale du
   visuel au lieu de réduire l'image en portrait. */
html.aa-non-computer body #main-content .hero.hero--image {
    position: relative !important;
    min-height: 92svh !important;
    overflow: hidden !important;
}

html.aa-non-computer body #main-content .hero.hero--image .hero__media,
html.aa-non-computer body #main-content .hero.hero--image .hero__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 35% !important;
}

@media (orientation: landscape) {
    html.aa-non-computer body #main-content .hero.hero--image .hero__media,
    html.aa-non-computer body #main-content .hero.hero--image .hero__image {
        object-position: 50% 42% !important;
    }
}

/* Les règles V1.0.118 sous 899 px restent strictement intactes.
   À partir de 900 px, on ne change PAS la composition prévue par le composant :
   on borne seulement chaque texte à l’espace réellement disponible. */
@media (min-width: 900px) and (max-width: 1280px) {
    /* Cartes image + texte : le bloc éditorial a exactement la largeur de sa
       carte (donc de son image) et ne peut jamais empiéter sur la suivante. */
    html.aa-non-computer body #main-content :is(
        .process-home .process-card,
        .triptych .triptych-card,
        .triptych .triptych-card__content
    ) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.aa-non-computer body main#main-content :is(
        .process-home .process-card h3,
        .process-home .process-card__text,
        .process-home .process-card__text .aa-authored-text,
        .triptych .triptych-card__content h3,
        .triptych .triptych-card__content h3 .aa-authored-text,
        .triptych .triptych-card__content p,
        .triptych .triptych-card__content p .aa-authored-text
    ) {
        box-sizing: border-box !important;
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        white-space: normal !important;
        text-wrap: wrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* Compositions à colonnes : on conserve leur grille, mais chaque colonne
       devient réellement rétractable et son texte revient à la ligne avant
       d’atteindre la colonne ou le bord suivant. */
    html.aa-non-computer body #main-content :is(
        .founder__grid,
        .founder__content,
        .large-image-text__grid,
        .large-image-text__content,
        .large-image-text__content-inner,
        .image-banner__grid,
        .image-banner__content,
        .image-banner__content-inner,
        .image-text-multiple__row,
        .image-text-multiple__content,
        .image-text-multiple__content-inner,
        .journal-featured__grid,
        .journal-featured__content,
        .cta-banner__inner,
        .cta-banner__heading,
        .cta-banner__content
    ) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html.aa-non-computer body main#main-content :is(
        .founder .founder__title,
        .founder .founder__text,
        .founder .founder__text > p,
        .founder .founder__text .aa-authored-text,
        .founder blockquote,
        .founder blockquote .aa-authored-text,
        .large-image-text .large-image-text__title,
        .large-image-text .large-image-text__text,
        .large-image-text .large-image-text__text p,
        .large-image-text .large-image-text__text .aa-authored-text,
        .image-banner .image-banner__title,
        .image-banner .image-banner__text,
        .image-banner .image-banner__text p,
        .image-banner .image-banner__text .aa-authored-text,
        .image-banner .image-banner__quote,
        .image-banner .image-banner__quote .aa-authored-text,
        .image-text-multiple .image-text-multiple__title,
        .image-text-multiple .image-text-multiple__text,
        .image-text-multiple .image-text-multiple__text p,
        .image-text-multiple .image-text-multiple__text .aa-authored-text,
        .journal-featured .journal-featured__title,
        .journal-featured .journal-featured__title .aa-authored-text,
        .journal-featured .journal-featured__excerpt,
        .journal-featured .journal-featured__excerpt .aa-authored-text,
        .cta-banner .cta-banner__title,
        .cta-banner .cta-banner__title .aa-authored-text,
        .cta-banner .cta-banner__quote,
        .cta-banner .cta-banner__quote p,
        .cta-banner .cta-banner__quote .aa-authored-text,
        .cta-banner .cta-banner__content .aa-rich-text,
        .cta-banner .cta-banner__content .aa-rich-text p,
        .cta-banner .cta-banner__content .aa-authored-text
    ) {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-wrap: wrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
}

/* Les règles historiques React contiennent encore quelques width:max-content /
   nowrap très spécifiques. Sur un appareil non ordinateur, on les neutralise
   uniquement sur les blocs éditoriaux concernés, sans toucher au desktop et
   sans forcer de coupure de mot. */
html.aa-non-computer body main#main-content .process-home .process-home__subtitle,
html.aa-non-computer body main#main-content .process-home .process-card h3,
html.aa-non-computer body main#main-content .process-home .process-card__text,
html.aa-non-computer body main#main-content .triptych .triptych__intro,
html.aa-non-computer body main#main-content .triptych .triptych-card__content h3,
html.aa-non-computer body main#main-content .triptych .triptych-card__content p,
html.aa-non-computer body main#main-content .founder .founder__title,
html.aa-non-computer body main#main-content .founder .founder__text,
html.aa-non-computer body main#main-content .founder .founder__text > p,
html.aa-non-computer body main#main-content .founder blockquote,
html.aa-non-computer body main#main-content .large-image-text .large-image-text__title,
html.aa-non-computer body main#main-content .large-image-text .large-image-text__text,
html.aa-non-computer body main#main-content .large-image-text .large-image-text__text p,
html.aa-non-computer body main#main-content .image-banner .image-banner__title,
html.aa-non-computer body main#main-content .image-banner .image-banner__text,
html.aa-non-computer body main#main-content .image-banner .image-banner__text p,
html.aa-non-computer body main#main-content .image-banner .image-banner__quote,
html.aa-non-computer body main#main-content .image-banner .image-banner__signature,
html.aa-non-computer body main#main-content .image-text-multiple .image-text-multiple__title,
html.aa-non-computer body main#main-content .image-text-multiple .image-text-multiple__text,
html.aa-non-computer body main#main-content .image-text-multiple .image-text-multiple__text p,
html.aa-non-computer body main#main-content .journal-featured .journal-featured__title,
html.aa-non-computer body main#main-content .journal-featured .journal-featured__excerpt,
html.aa-non-computer body main#main-content .cta-banner .cta-banner__title,
html.aa-non-computer body main#main-content .cta-banner .cta-banner__quote,
html.aa-non-computer body main#main-content .cta-banner .cta-banner__quote p,
html.aa-non-computer body main#main-content .cta-banner .cta-banner__content .aa-rich-text,
html.aa-non-computer body main#main-content .cta-banner .cta-banner__content .aa-rich-text p,
html.aa-non-computer body main#main-content .text-centered .text-centered__content,
html.aa-non-computer body main#main-content .text-centered .text-centered__content > p {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-wrap: wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* ============================================================
   V123 — Contrainte éditoriale tablette fiable

   Le problème restant ne venait pas de la grille : les anciennes règles React
   donnent encore width:max-content / nowrap aux éléments texte. Quand Safari
   Responsive Design Mode n'était pas reconnu comme tablette, ces valeurs
   pouvaient survivre et faire traverser un texte dans la colonne suivante.

   Une fois l'appareil classé non-ordinateur, tous les blocs texte de niveau
   bloc sont désormais bornés à leur propre colonne sur les largeurs tablette.
   Le desktop n'est pas concerné.
   ============================================================ */
@media (min-width: 900px) and (max-width: 1368px) {
    html.aa-non-computer body main#main-content :is(
        h1, h2, h3, h4, h5, h6,
        p, blockquote, figcaption,
        .aa-rich-text,
        .aa-rich-text > p
    ) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        text-wrap: wrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    html.aa-non-computer body main#main-content :is(
        h1, h2, h3, h4, h5, h6,
        p, blockquote, figcaption,
        .aa-rich-text,
        .aa-rich-text > p
    ) > .aa-authored-text {
        display: inline !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-wrap: wrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* Pour les composants image + texte répétés, le texte a exactement la
       largeur de la carte qui porte son image. */
    html.aa-non-computer body main#main-content :is(
        .process-home .process-card,
        .triptych .triptych-card,
        .triptych .triptych-card__content
    ) {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.aa-non-computer body main#main-content :is(
        .process-home .process-card h3,
        .process-home .process-card__text,
        .triptych .triptych-card__content h3,
        .triptych .triptych-card__content p
    ) {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   V124 — Ajustements finaux téléphone / tablette

   Ces règles ne touchent jamais au rendu ordinateur.
   - cadrage gauche du Hero Image sur téléphone ;
   - marge de sécurité pour les blocs de texte plein écran ;
   - titres des cartes visuellement proportionnés au corps de texte ;
   - neutralisation CSS des dimensions d'images ACF sur les appareils non
     ordinateur, y compris si un ancien Safari n'exécute pas le JavaScript ;
   - fallback sans aspect-ratio pour les anciens iPad.
   ============================================================ */

/* Hero Image réutilisable : sur téléphone, privilégier la partie droite du
   visuel tout en revenant légèrement vers le centre afin de conserver les
   sujets proches du bord. La tablette conserve le cadrage défini plus haut. */
@media (max-width: 899px) {
    html.aa-non-computer body #main-content .hero.hero--image .hero__image {
        object-position: 85% 35% !important;
    }
}

/* Les blocs éditoriaux qui peuvent occuper toute la largeur gardent toujours
   une respiration latérale sur téléphone/tablette. Les cartes image + texte
   ne sont pas concernées afin de conserver l'alignement texte/image. */
html.aa-non-computer body #main-content .text-centered__inner,
html.aa-non-computer body #main-content .process-home__head,
html.aa-non-computer body #main-content .triptych__head,
html.aa-non-computer body #main-content .gallery-free__heading,
html.aa-non-computer body #main-content .journal-list__heading,
html.aa-non-computer body #main-content .full-width-banner__heading,
html.aa-non-computer body #main-content .full-width-banner__body,
html.aa-non-computer body #main-content .aa-article-intro__inner,
html.aa-non-computer body #main-content .aa-article-copy__inner,
html.aa-non-computer body #main-content .aa-article-navigation {
    box-sizing: border-box !important;
    padding-left: var(--aa-device-safe-x) !important;
    padding-right: var(--aa-device-safe-x) !important;
}

/* Les titres associés à une image restent clairement hiérarchisés par rapport
   au texte courant sur tous les appareils non ordinateur. */
html.aa-non-computer body #main-content .triptych--attached .triptych-card__content h3,
html.aa-non-computer body #main-content .triptych--spaced .triptych-card__content h3 {
    font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
    line-height: 1.25 !important;
}

/* Dimensions ACF = desktop uniquement, même sans JavaScript.
   Les sélecteurs sont volontairement simples (sans :is() / :has()) pour rester
   compris par les versions plus anciennes de Safari présentes sur certains iPad. */
html.aa-non-computer body #main-content .aa-image-exact-frame,
html.aa-non-computer body #main-content .aa-image-exact-frame--width,
html.aa-non-computer body #main-content .aa-image-exact-frame--height,
html.aa-non-computer body #main-content .aa-image-custom-parent,
html.aa-non-computer body #main-content .aa-image-custom-parent--width,
html.aa-non-computer body #main-content .aa-image-custom-parent--height {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
}

html.aa-non-computer body #main-content .aa-image-exact-frame > img,
html.aa-non-computer body #main-content .aa-image-exact-frame > .aa-image-resizable {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    transform: none !important;
}

html.aa-non-computer body #main-content .image-text-multiple__row--custom-width.image-text-multiple__row--left,
html.aa-non-computer body #main-content .image-text-multiple__row--custom-width.image-text-multiple__row--right {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.aa-non-computer body #main-content .image-text-multiple__row--custom-media .image-text-multiple__media,
html.aa-non-computer body #main-content .image-text-multiple__row--custom-width .image-text-multiple__media,
html.aa-non-computer body #main-content .image-text-multiple__row--custom-height .image-text-multiple__media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 31vw !important; /* fallback ancien Safari sans aspect-ratio */
    max-height: none !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    background: var(--aa-or-pale) !important;
    aspect-ratio: 16 / 10 !important;
}

html.aa-non-computer body #main-content .image-text-multiple__row--custom-media .image-text-multiple__image,
html.aa-non-computer body #main-content .image-text-multiple__row--custom-width .image-text-multiple__image,
html.aa-non-computer body #main-content .image-text-multiple__row--custom-height .image-text-multiple__image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

@media (max-width: 899px) {
    html.aa-non-computer body #main-content .image-text-multiple__row--custom-width.image-text-multiple__row--left,
    html.aa-non-computer body #main-content .image-text-multiple__row--custom-width.image-text-multiple__row--right {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.aa-non-computer body #main-content .image-text-multiple__row--custom-media .image-text-multiple__media,
    html.aa-non-computer body #main-content .image-text-multiple__row--custom-width .image-text-multiple__media,
    html.aa-non-computer body #main-content .image-text-multiple__row--custom-height .image-text-multiple__media {
        height: 62vw !important; /* fallback 16:10 en colonne unique */
    }
}

/* Les navigateurs modernes utilisent le ratio natif du composant. Les valeurs
   en vw ci-dessus ne servent que de fallback aux anciens Safari/iPad. */
@supports (aspect-ratio: 16 / 10) {
    html.aa-non-computer body #main-content .image-text-multiple__row--custom-media .image-text-multiple__media,
    html.aa-non-computer body #main-content .image-text-multiple__row--custom-width .image-text-multiple__media,
    html.aa-non-computer body #main-content .image-text-multiple__row--custom-height .image-text-multiple__media {
        height: auto !important;
    }
}

/* ============================================================
   V125 — Respiration latérale du layout Texte centré

   responsive.css neutralise volontairement le padding interne du composant
   Texte centré. Sur les lignes longues, cela pouvait visuellement coller le
   texte aux bords d'un téléphone malgré la marge de sécurité globale.

   La respiration est donc portée par la section elle-même : elle s'applique
   à toutes les utilisations réutilisables de ce layout sur téléphone/tablette
   et ne modifie ni les images ni le rendu ordinateur.
   ============================================================ */
html.aa-non-computer body main#main-content section.aa-section.text-centered {
    box-sizing: border-box !important;
    padding-left: var(--aa-device-safe-x) !important;
    padding-right: var(--aa-device-safe-x) !important;
}

/* ============================================================
   V129 — Correctifs ciblés des composants Journal / Contact / Portrait /
   CTA centré / Hero Signature / Process Timeline

   Les règles ci-dessous restent strictement attachées aux composants :
   aucune page n'est ciblée. Le desktop ordinateur n'est pas modifié.
   ============================================================ */

/* Contact sur téléphone : le layout ne réserve plus artificiellement un
   viewport entier lorsque l'image est masquée. Cela supprime le grand vide
   entre ce composant et la section suivante sans toucher à son contenu. */
@media (max-width: 767px) {
    html.aa-non-computer body #main-content .contact-minimal,
    html.aa-non-computer body #main-content .contact-minimal__grid,
    html.aa-non-computer body #main-content .contact-minimal--image-left .contact-minimal__grid,
    html.aa-non-computer body #main-content .contact-minimal--image-right .contact-minimal__grid {
        min-height: 0 !important;
        height: auto !important;
    }

    html.aa-non-computer body #main-content .contact-minimal__content,
    html.aa-non-computer body #main-content .contact-minimal--no-image .contact-minimal__content {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important;
    }
}

/* Portrait fondatrice sur tablette : le média devient réellement vertical en
   portrait comme en paysage. Le padding-top est le fallback des anciens Safari
   ne prenant pas en charge aspect-ratio. */
@media (min-width: 700px) and (max-width: 1368px) {
    html.aa-non-computer body #main-content .founder .founder__portrait {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        padding-top: 125% !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    html.aa-non-computer body #main-content .founder .founder__image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

@supports (aspect-ratio: 4 / 5) {
    @media (min-width: 700px) and (max-width: 1368px) {
        html.aa-non-computer body #main-content .founder .founder__portrait {
            height: auto !important;
            padding-top: 0 !important;
            aspect-ratio: 4 / 5 !important;
        }
    }
}

/* Bandeau CTA centré sur tablette paysage : même composition centrée, mais le
   texte ne peut plus conserver un max-content desktop et dispose toujours
   d'une respiration latérale. */
@media (min-width: 900px) and (max-width: 1368px) and (orientation: landscape) {
    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__inner {
        box-sizing: border-box !important;
        width: min(48rem, calc(100% - (var(--aa-device-safe-x) * 2))) !important;
        max-width: 100% !important;
        padding-right: var(--aa-device-safe-x) !important;
        padding-left: var(--aa-device-safe-x) !important;
    }

    html.aa-non-computer body #main-content .cta-banner--centered.cta-banner--title-quote .cta-banner__inner {
        width: min(42rem, calc(100% - (var(--aa-device-safe-x) * 2))) !important;
    }

    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__heading,
    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__content,
    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__title,
    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__quote,
    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__quote > p,
    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__content .aa-rich-text,
    html.aa-non-computer body #main-content .cta-banner--centered .cta-banner__content .aa-rich-text > p {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-wrap: wrap !important;
        overflow-wrap: normal !important;
    }
}

/* Tablette portrait : Contact conserve son texte et son image, empilés dans un
   ordre explicite. Déclarer les grid-areas évite aux anciens Safari de garder
   implicitement les deux colonnes desktop lorsque grid-template-columns passe
   à une colonne. */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
    html.aa-non-computer body #main-content .contact-minimal,
    html.aa-non-computer body #main-content .contact-minimal__grid {
        min-height: 0 !important;
        height: auto !important;
    }

    html.aa-non-computer body #main-content .contact-minimal:not(.contact-minimal--no-image) .contact-minimal__grid,
    html.aa-non-computer body #main-content .contact-minimal--image-left:not(.contact-minimal--no-image) .contact-minimal__grid,
    html.aa-non-computer body #main-content .contact-minimal--image-right:not(.contact-minimal--no-image) .contact-minimal__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "content"
            "media" !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    html.aa-non-computer body #main-content .contact-minimal--no-image .contact-minimal__grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "content" !important;
        row-gap: 0 !important;
    }

    html.aa-non-computer body #main-content .contact-minimal__content {
        grid-area: content !important;
        grid-column: 1 !important;
        display: flex !important;
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4rem max(var(--aa-device-safe-x), 2.5rem) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html.aa-non-computer body #main-content .contact-minimal__media {
        grid-area: media !important;
        grid-column: 1 !important;
        display: block !important;
        order: 2 !important;
        width: 100% !important;
        min-height: clamp(360px, 62vw, 620px) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hero Signature : sa hauteur vient du contenu en portrait tablette. Le
       min-height de 56svh créait une grande zone vide sous le texte. */
    html.aa-non-computer body #main-content .hero.hero--signature {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 4rem !important;
        padding-bottom: 2.75rem !important;
        margin-bottom: 0 !important;
    }

    /* Process Timeline : la ligne centrale et l'alternance image / texte sont
       conservées sur tablette portrait. Le mode empilé reste réservé au mobile. */
    html.aa-non-computer body #main-content .process-timeline__line {
        display: block !important;
        left: 50% !important;
        width: 4px !important;
        transform: translateX(-50%) !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step,
    html.aa-non-computer body #main-content .process-timeline .timeline-step:nth-child(n) {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: clamp(1.5rem, 3.5vw, 2.5rem) !important;
        width: 100% !important;
        padding: 0 !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step--image-right .timeline-step__media {
        grid-column: 7 / span 6 !important;
        grid-row: 1 !important;
        order: 2 !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step--image-right .timeline-step__content {
        grid-column: 2 / span 4 !important;
        grid-row: 1 !important;
        order: 1 !important;
        align-items: flex-end !important;
        padding: 0 !important;
        text-align: right !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step--image-left .timeline-step__media {
        grid-column: 1 / span 6 !important;
        grid-row: 1 !important;
        order: 1 !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step--image-left .timeline-step__content {
        grid-column: 8 / span 4 !important;
        grid-row: 1 !important;
        order: 2 !important;
        align-items: flex-start !important;
        padding: 0 !important;
        text-align: left !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step__media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 18 / 9 !important;
        overflow: hidden !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step__image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    html.aa-non-computer body #main-content .process-timeline .timeline-step__title,
    html.aa-non-computer body #main-content .process-timeline .timeline-step__text {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-wrap: wrap !important;
    }
}

/* ============================================================
   V130 — Retours responsives sémantiques sur appareils non-ordinateur

   Cette règle couvre notamment les iPad paysage dont le viewport peut être
   supérieur à 1023 px. Elle reste globale à tous les composants éditoriaux.
   ============================================================ */
html.aa-non-computer body #main-content br.aa-authored-break--semantic,
html.aa-non-computer body .site-footer br.aa-authored-break--semantic {
    display: initial !important;
    visibility: visible !important;
}

/* ============================================================
   V131 — Bandeau image grand + texte

   Corrections appliquées au Layout réutilisable, jamais à une page :
   - tablette paysage : conserver une respiration sur le bord extérieur de la
     colonne texte, y compris lorsque le viewport dépasse 1023 px ;
   - téléphone : lorsque deux instances du même Layout se suivent, réduire
     uniquement l'espace au début de la seconde pour éviter de cumuler les deux
     respirations verticales complètes.
   ============================================================ */

/* Tablettes larges / iPad paysage : la grille reste celle du composant, mais
   le texte ne peut jamais venir toucher le bord extérieur de l'écran. */
@media (min-width: 900px) and (max-width: 1368px) {
    html.aa-non-computer body #main-content .large-image-text--left .large-image-text__content {
        box-sizing: border-box !important;
        padding-right: var(--aa-device-safe-x) !important;
    }

    html.aa-non-computer body #main-content .large-image-text--right .large-image-text__content {
        box-sizing: border-box !important;
        padding-left: var(--aa-device-safe-x) !important;
    }
}

/* Deux bandeaux image grand + texte consécutifs sur téléphone : le premier
   conserve son espace de fin ; la seconde section ne rajoute pas 4rem de vide
   avant son image. */
@media (max-width: 767px) {
    html.aa-non-computer body #main-content .large-image-text.aa-layout-after--large_image_text {
        padding-top: 1rem !important;
    }
}


/* ============================================================
   V132 — Contact complet consécutif sur téléphone

   Correction uniquement pour deux Layouts `contact_minimal` qui se suivent :
   - aucun second décalage de hauteur du header entre les deux sections ;
   - respiration réduite à la jonction, sans modifier les autres Contact complet.
   ============================================================ */
@media (max-width: 767px) {
    html.aa-non-computer body #main-content .contact-minimal.aa-layout-before--contact_minimal .contact-minimal__content {
        padding-bottom: 1rem !important;
    }

    html.aa-non-computer body #main-content .contact-minimal.aa-layout-after--contact_minimal {
        margin-top: 0 !important;
    }

    html.aa-non-computer body #main-content .contact-minimal.aa-layout-after--contact_minimal .contact-minimal__content {
        padding-top: 1rem !important;
    }
}

/* ============================================================
   V133 — Bandeau image grand + texte tablette / Portrait fondatrice mobile

   Correctifs strictement limités aux deux Layouts réutilisables concernés :
   - Bandeau image grand + texte : sur les tablettes qui conservent la grille
     à deux colonnes, la colonne éditoriale commence au même niveau que l'image.
     Les respirations latérales V131 restent inchangées pour les deux positions.
   - Portrait fondatrice : sur téléphone, le média reprend le ratio portrait
     4:5 déjà utilisé sur tablette, avec recadrage object-fit: cover. Le
     padding-top assure le même ratio sur les anciens Safari sans aspect-ratio.
   ============================================================ */

/* Tablette : supprimer uniquement le décalage vertical hérité du desktop
   (padding-top: 6rem) lorsque l'image et le texte restent côte à côte. */
@media (min-width: 900px) and (max-width: 1368px) {
    html.aa-non-computer body #main-content .large-image-text__grid {
        align-items: start !important;
    }

    html.aa-non-computer body #main-content .large-image-text__content {
        padding-top: 0 !important;
    }
}

/* Téléphone : le portrait reste réellement vertical, sans étirement. */
@media (max-width: 767px) {
    html.aa-non-computer body #main-content .founder .founder__portrait {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        padding-top: 125% !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    html.aa-non-computer body #main-content .founder .founder__image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
    }
}

@supports (aspect-ratio: 4 / 5) {
    @media (max-width: 767px) {
        html.aa-non-computer body #main-content .founder .founder__portrait {
            height: auto !important;
            padding-top: 0 !important;
            aspect-ratio: 4 / 5 !important;
        }
    }
}


/* ============================================================
   V134 — Portrait fondatrice sur petits écrans d'ordinateur

   Entre 1024 et 1368 px, un ordinateur portable peut conserver la grille
   desktop à deux colonnes alors que text-flow.css impose encore aux textes
   saisis dans WordPress width:max-content / white-space:pre. Sur une colonne
   étroite, le texte peut alors dépasser puis être masqué par le composant.

   Le correctif reste strictement limité au Layout founder_portrait :
   - la grille desktop à deux colonnes est conservée ;
   - les retours manuels WordPress restent visibles ;
   - le navigateur peut ajouter un retour naturel si la ligne ne tient pas ;
   - aucun mot n'est coupé arbitrairement.
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1368px) {
    html body #main-content .founder .founder__grid,
    html body #main-content .founder .founder__content {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body #main-content .founder :is(
        .founder__title,
        .founder__text,
        .founder__text > p,
        blockquote
    ) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: pre-wrap !important;
        text-wrap: wrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    html body #main-content .founder :is(
        .founder__title,
        .founder__text,
        .founder__text > p,
        blockquote
    ) .aa-authored-text {
        display: inline !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: pre-wrap !important;
        text-wrap: wrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
}