/**
 * Block: bloc_text_01
 * Description: Simple text block with tagline, headline, paragraph and CTA buttons
 *
 * Figma Specs:
 * - Container: 1440px wide, bg white, padding 64px/80px
 * - Content: 1312px wide, gap 40px
 * - Text gap: 24px
 * - Button gap: 16px
 * - Colors: #232425 (text), #2464D1 (brand primary)
 */

/* ========================================
   CONTAINER
   ======================================== */

.bloc-text-01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 80px 64px;
}

.bloc-text-01__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    max-width: 1312px;
}

.bloc-text-01--longform .bloc-text-01__container {
    max-width: min(var(--section-max-width, 1312px), 1110px);
}

/* ========================================
   CONTENT (Text Area)
   ======================================== */

.bloc-text-01__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    color: #232425;
}

.bloc-text-01__content--wrapped {
    padding: var(--bloc-text-01-intro-wrapper-padding, 48px);
}

.bloc-text-01__content--horizontal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    row-gap: 24px;
    align-items: end;
}

.bloc-text-01__copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.bloc-text-01__content:not(.bloc-text-01__content--horizontal) .bloc-text-01__copy {
    width: 100%;
}

/* Width variants */
.bloc-text-01__content--boxed {
    max-width: 800px;
    margin: 0 auto;
}

.bloc-text-01__content--fullwidth {
    max-width: 100%;
}

/* Tagline */
.bloc-text-01__tagline {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

/* Headline */
.bloc-text-01__headline {
    font-family: inherit;
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    /* TEXT01-WORDBREAK-001 : `anywhere` + `hyphens: auto` coupaient en plein mot
       ("ren-dez-vous"). `break-word` ne casse que les mots plus longs qu'une ligne. */
    overflow-wrap: break-word;
    hyphens: none;
    width: 100%;
}

/* Paragraph */
.bloc-text-01__paragraph {
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    width: 100%;
}

/* ========================================
   BUTTONS (rendered via usine_render_button)
   ======================================== */

.bloc-text-01__buttons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

/* TEXT01-BUTTONS-ALIGN-001: the authored text alignment lives on the content
   wrapper, but a flex row ignores text-align — mirror it on the button row. */
/* The content column is `align-items: flex-start`, so the button row shrinks to its
   content — it needs align-self as well as justify-content to actually move. */
.bloc-text-01__content[style*="text-align: center"] .bloc-text-01__buttons {
    align-self: center;
    justify-content: center;
}

.bloc-text-01__content[style*="text-align: right"] .bloc-text-01__buttons {
    align-self: flex-end;
    justify-content: flex-end;
}

/* ========================================
   WRAPPED-SHELL MODE
   ======================================== */

.bloc-text-01--wrapped-shell {
    padding-top: 0;
    padding-bottom: 0;
}

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

/* Tablet (1024px) */
@media (max-width: 1024px) {
    .bloc-text-01 {
        padding: 60px 40px;
    }

    .bloc-text-01__headline {
        font-size: 40px;
    }

    .bloc-text-01__content--boxed {
        max-width: 600px;
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    .bloc-text-01 {
        padding: 48px 24px;
    }

    .bloc-text-01__container {
        gap: 32px;
    }

    .bloc-text-01__content {
        gap: 16px;
    }

    .bloc-text-01__content--wrapped {
        padding: var(--bloc-text-01-intro-wrapper-padding-mobile, 24px);
    }

    .bloc-text-01__content--horizontal {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .bloc-text-01__headline {
        font-size: 32px;
    }

    .bloc-text-01__paragraph {
        font-size: 16px;
    }

    .bloc-text-01__buttons {
        flex-direction: column;
        width: 100%;
    }

    .bloc-text-01__content--boxed {
        max-width: 100%;
    }
}

/* ==========================================================================
   TEXT01-MOBILE-001 : bandeau CTA sur mobile
   Le titre se coupait en plein mot ("ren-dez-vous"), les marges internes
   étaient trop larges pour un petit écran et les boutons flottaient.
   ========================================================================== */
@media (max-width: 768px) {
    /* Même retrait que les autres blocs. */
    .bloc-text-01 {
        padding-inline: 16px;
    }

    .bloc-text-01__content {
        padding: 32px 20px;
        gap: 20px;
    }

    .bloc-text-01__headline {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
        font-size: clamp(26px, 7.5vw, 34px);
        line-height: 1.15;
    }

    .bloc-text-01__buttons {
        flex-direction: column;
        align-self: stretch;
        width: 100%;
        gap: 12px;
    }

    .bloc-text-01__buttons .btn {
        width: 100%;
        justify-content: center;
    }
}


/* MOBILE-BLOCK-SPACING-001 : le render écrit padding-top/bottom directement dans
   l'attribut style du bloc, ce qui prend le pas sur la variable mobile globale
   (--usine-block-padding-*-mobile). D'où 80px conservés sur petit écran. */
@media (max-width: 768px) {
    .bloc-text-01 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/* ==========================================================================
   TEXT01-PANEL-WIDTH-001
   Le panneau « Prenez votre rendez-vous » doit s'aligner sur la pastille de
   navigation, qui fait 1312px : c'est la mesure de reference du site, et tout
   panneau plus large se voit immediatement deborder d'elle.

   Le bloc texte respecte deja cette mesure par defaut. La regle ne fait donc
   que la reaffirmer, pour que le panneau reste cale sur la navbar meme si le
   socle venait a changer.
   ========================================================================== */
.bloc-text-01:has(.bloc-text-01__content--wrapped) > .bloc-text-01__container {
    max-width: var(--section-max-width, 1312px);
    margin-inline: auto;
}