/**
 * Bloc CTA Banner 01 - CTA Banner with newsletter form, reviews, and contact form
 *
 * Figma Source: https://www.figma.com/design/I6wtq12NH17BottRCSlGff?node-id=9048:23378
 * Layout: 2-column (left content + right form card)
 */

/* ===== STATIC CLASSES (Figma-aligned) ===== */
.bloc-ctabanner-01 {
    box-sizing: border-box;
    padding: 112px var(--section-padding-x, 64px);
}

.bloc-ctabanner-01__container {
    --ctabanner-column-min: 22rem;
    max-width: var(--section-max-width, 1312px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ctabanner-column-min)), 1fr));
    gap: clamp(24px, 6vw, 80px);
    align-items: start;
    padding: clamp(24px, 5vw, 64px);
    border-radius: 24px;
    box-sizing: border-box;
}

.bloc-ctabanner-01__container--bare {
    padding: 0;
    border-radius: 0;
}

.bloc-ctabanner-01__container--stacked-contact-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 80px;
}

/* Position variant: vertical = single column, centered */
.bloc-ctabanner-01--vertical .bloc-ctabanner-01__container {
    grid-template-columns: 1fr;
    max-width: var(--section-max-width, 1312px);
    text-align: center;
}

/* Position variant: horizontal = default 2-column (explicit for clarity) */
.bloc-ctabanner-01--horizontal .bloc-ctabanner-01__container {
    --ctabanner-column-min: 22rem;
}

/* Left Content */
.bloc-ctabanner-01__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

.bloc-ctabanner-01__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bloc-ctabanner-01__tagline {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    margin: 0;
}

.bloc-ctabanner-01__headline {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    margin: 0;
    overflow-wrap: anywhere;
}

.bloc-ctabanner-01__description {
    font-size: 18px;
    line-height: 1.5;
    color: inherit;
    margin: 0;
}

/* Newsletter / About Section (in left column) */
.bloc-ctabanner-01__newsletter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.bloc-ctabanner-01__newsletter-name {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bloc-ctabanner-01__newsletter-label {
    font-size: 16px;
    font-weight: 400;
    color: inherit;
    margin: 0;
}

.bloc-ctabanner-01__newsletter .btn {
    border-radius: 9999px;
    align-self: flex-start;
}

.bloc-ctabanner-01__newsletter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.bloc-ctabanner-01__input {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #fff;
}

.bloc-ctabanner-01__input::placeholder {
    color: var(--ctabanner-newsletter-placeholder-color, #767676);
}

.bloc-ctabanner-01__legal {
    font-size: 12px;
    color: inherit;
    margin: 0;
}

/* Buttons */
.bloc-ctabanner-01__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid currentColor;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.bloc-ctabanner-01__button--primary {
    background-color: inherit;
    color: inherit;
    border-color: inherit;
}

.bloc-ctabanner-01__button--secondary {
    background-color: transparent;
    color: inherit;
    border-color: currentColor;
}

.bloc-ctabanner-01__button--secondary:hover {
    background-color: #fdf2f4;
}

/* Review Badge (wrapper) */
.bloc-ctabanner-01__review {
    display: inline-flex;
    align-items: center;
}

/* Review component rendered by usine_render_review() uses .review BEM classes */
.bloc-ctabanner-01__review .review {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: none;
    border-radius: 24px;
}

.bloc-ctabanner-01__review .review__brand-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.bloc-ctabanner-01__review .review__rating {
    font-size: 18px;
    font-weight: 400;
    color: inherit;
}

.bloc-ctabanner-01__review .review__stars {
    display: flex;
    gap: 2px;
}

.bloc-ctabanner-01__review .review__stars .star-icon {
    width: 20px;
    height: 20px;
}

.bloc-ctabanner-01__review .review__count {
    font-size: 18px;
    font-weight: 400;
    color: inherit;
}

/* Legacy BEM selectors (kept for backward compatibility) */
.bloc-ctabanner-01__review-icon {
    width: 32px;
    height: 32px;
}

.bloc-ctabanner-01__review-score {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
}

.bloc-ctabanner-01__review-count {
    font-size: 14px;
    color: inherit;
}

/* Features */
.bloc-ctabanner-01__features {
    display: flex;
    flex-wrap: wrap;
    column-gap: 32px;
    row-gap: 16px;
}

.bloc-ctabanner-01__feature {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 calc((100% - 32px) / 2);
    max-width: calc((100% - 32px) / 2);
    min-width: 260px;
}

.bloc-ctabanner-01__feature-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.bloc-ctabanner-01__feature-icon svg {
    width: 100%;
    height: 100%;
}

.bloc-ctabanner-01__feature-text {
    font-size: 16px;
    color: inherit;
}

.bloc-ctabanner-01__features .icon-text {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 calc((100% - 32px) / 2);
    max-width: calc((100% - 32px) / 2);
    min-width: 260px;
    color: inherit;
}

.bloc-ctabanner-01__features .icon-text__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: inherit;
}

.bloc-ctabanner-01__features .icon-text__icon svg,
.bloc-ctabanner-01__features .icon-text__icon img {
    width: 100%;
    height: 100%;
}

.bloc-ctabanner-01__features .icon-text__text {
    font-size: 16px;
    color: inherit;
}

/* Actions */
.bloc-ctabanner-01__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.bloc-ctabanner-01--vertical .bloc-ctabanner-01__content {
    align-items: center;
}

.bloc-ctabanner-01--vertical .bloc-ctabanner-01__actions {
    justify-content: center;
    align-items: center;
}

.bloc-ctabanner-01__actions .btn {
    border-radius: 9999px;
}

/* Right Form Card */
.bloc-ctabanner-01__form-card {
    background: #F7F6F2;
    padding: clamp(24px, 4vw, 32px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 16px;
    border-radius: 0;                  /* RC-26 T-37: form card has no border-radius */
    align-self: start;
    width: 100%;
    min-width: 0;
}

.bloc-ctabanner-01__form-card--stacked {
    background: var(--usine-form-card-bg, #FFFFFF);
    border: 1px solid var(--usine-form-card-border, #D0CECE);
    border-radius: var(--usine-form-card-radius, 16px);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 500px;
    justify-self: end;
}

/* CTABANNER-FORM-MAQUETTE-001: panel for a Contact Form 7 driven card. The panel
   itself sits outside the form markup, so its tokens are declared here; anything
   inside the form (fields, labels, button) reads variables authored in the CF7
   template and stays editable from the plugin. */
.bloc-ctabanner-01__form-card--source-submit {
    --usine-form-card-bg: #f3e4de;
    --usine-form-card-border: transparent;
    --usine-form-card-radius: 32px;

    /* CTABANNER-FORM-PANEL-001
       Ces trois valeurs n'etaient que declarees : seule la variante --stacked
       les consommait, et la carte du formulaire de contact ne la porte pas.
       Elle restait donc sur le blanc casse et l'angle droit du socle, alors
       que la maquette demande un panneau rose poudre arrondi. On applique les
       jetons ici meme, pour toutes les tailles d'ecran. */
    background: var(--usine-form-card-bg);
    border: 1px solid var(--usine-form-card-border);
    border-radius: var(--usine-form-card-radius);
}

/* Le bouton d'envoi est le seul a ne pas recevoir de couleur de bordure depuis
   ACF : il retombait sur --btn-primary-bg, un bordeaux tres sombre, qui
   dessinait un lisere noir autour du bouton dore. La bordure suit desormais
   le fond du bouton, comme sur tous les autres boutons du site. */
.bloc-ctabanner-01__form-card--source-submit .wpcf7-submit,
.bloc-ctabanner-01__form-card--source-submit input[type="submit"] {
    border-color: transparent;
}

/* Paired fields on one row, stacking on narrow screens. */
.bloc-ctabanner-01__form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
}

/* The submit button hugs its label instead of spanning the panel. */
.bloc-ctabanner-01__form-actions .wpcf7-submit,
.bloc-ctabanner-01__form-actions .btn {
    width: auto;
    align-self: flex-start;
}

.bloc-ctabanner-01__form-card--choice-shell {
    background: #FFFFFF;
    border: 1px solid #232425;
    border-radius: 0;
    padding: 32px;
    max-width: 500px;
}

.bloc-ctabanner-01__form-card--bare {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.bloc-ctabanner-01__form-card > input[type="hidden"] {
    display: none;
}

.bloc-ctabanner-01__plugin-form {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.bloc-ctabanner-01__form-card > .wpcf7 {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.bloc-ctabanner-01__form-card .wpcf7-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.bloc-ctabanner-01__form-card--stacked .wpcf7-form,
.bloc-ctabanner-01__form-card--stacked .bloc-ctabanner-01__wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bloc-ctabanner-01__plugin-form .bloc-ctabanner-01__wpcf7-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 16px;
    min-width: 0;
}

.bloc-ctabanner-01__form-card--stacked .bloc-ctabanner-01__plugin-form .bloc-ctabanner-01__wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bloc-ctabanner-01__form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    border: 0 !important;
}

.bloc-ctabanner-01__form-group:nth-of-type(n+3) {
    grid-column: 1 / -1;
}

.bloc-ctabanner-01__form-card--stacked .bloc-ctabanner-01__form-group:nth-of-type(n+3) {
    grid-column: auto;
}

.bloc-ctabanner-01__form-card .bloc-ctabanner-01__form-check {
    grid-column: 1 / -1;
}

.bloc-ctabanner-01__form-card .wpcf7-response-output,
.bloc-ctabanner-01__form-card .wpcf7-spinner {
    grid-column: 1 / -1;
}

/* CTABANNER-CF7-FEEDBACK-001: Contact Form 7 ships a plain 2px framed banner and
   red validation tips. Restyle them on the brand palette, and colour the banner by
   status so success and failure are distinguishable, not just by wording. */
.bloc-ctabanner-01__form-card .wpcf7-response-output {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--usine-form-feedback-border, #d6b28a);
    border-radius: 16px;
    background: var(--usine-form-feedback-bg, #fcf9f5);
    color: var(--usine-form-feedback-color, #574538);
    font-size: 15px;
    line-height: 1.5;
}

.bloc-ctabanner-01__form-card .wpcf7-form.sent .wpcf7-response-output {
    --usine-form-feedback-border: #7d9b6a;
    --usine-form-feedback-bg: #f1f6ee;
    --usine-form-feedback-color: #3f5733;
}

.bloc-ctabanner-01__form-card .wpcf7-form.invalid .wpcf7-response-output,
.bloc-ctabanner-01__form-card .wpcf7-form.unaccepted .wpcf7-response-output,
.bloc-ctabanner-01__form-card .wpcf7-form.failed .wpcf7-response-output,
.bloc-ctabanner-01__form-card .wpcf7-form.aborted .wpcf7-response-output {
    --usine-form-feedback-border: #c1795f;
    --usine-form-feedback-bg: #fbeee9;
    --usine-form-feedback-color: #8c4a32;
}

/* Per-field validation message, shown under the field it belongs to. */
.bloc-ctabanner-01__form-card .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #8c4a32;
    font-size: 14px;
    line-height: 1.4;
}

.bloc-ctabanner-01__form-card .wpcf7-form-control.wpcf7-not-valid {
    border-color: #c1795f;
}

.bloc-ctabanner-01__form-card .wpcf7-spinner {
    margin: 0 auto;
}

.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap {
    display: block;
}

/* CF7 form field styling */
.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap input[type="text"],
.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap input[type="email"],
.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap input[type="tel"],
.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap input[type="number"],
.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap select,
.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
    /* Field skin comes from the CF7 template's own custom properties, so colours
       stay editable in the plugin. Values below are the neutral fallback. */
    border: var(--usine-form-field-stroke-width, 1px) solid var(--usine-form-field-border, #E6E7E7);
    border-radius: 4px;
    background: var(--usine-form-field-bg, #FAFAFA);
    font-family: inherit;
}

.bloc-ctabanner-01__form-card--stacked .wpcf7-form-control-wrap input[type="text"],
.bloc-ctabanner-01__form-card--stacked .wpcf7-form-control-wrap input[type="email"],
.bloc-ctabanner-01__form-card--stacked .wpcf7-form-control-wrap input[type="tel"],
.bloc-ctabanner-01__form-card--stacked .wpcf7-form-control-wrap input[type="number"],
.bloc-ctabanner-01__form-card--stacked .wpcf7-form-control-wrap select,
.bloc-ctabanner-01__form-card--stacked .wpcf7-form-control-wrap textarea,
.bloc-ctabanner-01__form-card--stacked .bloc-ctabanner-01__form-input,
.bloc-ctabanner-01__form-card--stacked .bloc-ctabanner-01__form-select {
    border-radius: 8px;
}

.bloc-ctabanner-01__form-card--choice-shell .wpcf7-form-control-wrap input[type="text"],
.bloc-ctabanner-01__form-card--choice-shell .wpcf7-form-control-wrap input[type="email"],
.bloc-ctabanner-01__form-card--choice-shell .wpcf7-form-control-wrap input[type="tel"],
.bloc-ctabanner-01__form-card--choice-shell .wpcf7-form-control-wrap input[type="number"],
.bloc-ctabanner-01__form-card--choice-shell .wpcf7-form-control-wrap select,
.bloc-ctabanner-01__form-card--choice-shell .wpcf7-form-control-wrap textarea,
.bloc-ctabanner-01__form-card--choice-shell .bloc-ctabanner-01__form-input,
.bloc-ctabanner-01__form-card--choice-shell .bloc-ctabanner-01__form-select {
    min-height: 48px;
    border-radius: 0;
}

.bloc-ctabanner-01__form-card .wpcf7-form-control-wrap textarea {
    min-height: var(--ctabanner-textarea-height, 96px);
    height: var(--ctabanner-textarea-height, 96px);
    resize: none;
}

.bloc-ctabanner-01__form-card .btn {
    grid-column: 1 / -1;
    border-radius: 9999px;
    width: 100%;
    min-height: 48px;
}

.bloc-ctabanner-01__plugin-form > p {
    grid-column: 1 / -1;
    margin: 0;
}

.bloc-ctabanner-01__plugin-form > p .btn {
    width: 100%;
    border-radius: 9999px;
}

.bloc-ctabanner-01__form-card--choice-shell .btn,
.bloc-ctabanner-01__form-card--choice-shell input[type="submit"],
.bloc-ctabanner-01__form-card--choice-shell .wpcf7-submit {
    width: auto;
    min-height: 40px;
    align-self: flex-start;
    padding: 8px 24px;
    border-radius: 48px;
}

.bloc-ctabanner-01__form-card--compact-submit .btn,
.bloc-ctabanner-01__form-card--compact-submit input[type="submit"],
.bloc-ctabanner-01__form-card--compact-submit .wpcf7-submit {
    background: transparent;
    border: 1px solid #232425;
    color: #232425;
}

.bloc-ctabanner-01__form-card--source-submit .btn,
.bloc-ctabanner-01__form-card--source-submit input[type="submit"],
.bloc-ctabanner-01__form-card--source-submit .wpcf7-submit {
    width: auto;
    justify-self: start;
}

.bloc-ctabanner-01__form-card--reservation {
    background: #FAFAFA;
    padding: 24px 32px;
    gap: 12px 16px;
    align-self: center;
}

.bloc-ctabanner-01__form-card--reservation .wpcf7-form {
    gap: 12px 16px;
}

.bloc-ctabanner-01__form-card--reservation .bloc-ctabanner-01__wpcf7-form--reservation {
    gap: 12px 16px;
}

.bloc-ctabanner-01__form-card--reservation .bloc-ctabanner-01__form-group:nth-of-type(n+3) {
    grid-column: auto;
}

.bloc-ctabanner-01__form-card--reservation .bloc-ctabanner-01__form-label {
    font-size: 12px;
    font-weight: 700;
    color: #232425;
}

.bloc-ctabanner-01__form-card--reservation .bloc-ctabanner-01__form-input,
.bloc-ctabanner-01__form-card--reservation .bloc-ctabanner-01__form-select {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.bloc-ctabanner-01__form-card--reservation .btn {
    min-height: 48px;
    margin-top: 4px;
}

.bloc-ctabanner-01__form-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #232425;
    margin: 0;
}

.bloc-ctabanner-01__form-input,
.bloc-ctabanner-01__form-select {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #E6E7E7;
    border-radius: 4px;
    background: #FAFAFA;
    width: 100%;
    box-sizing: border-box;
}

.bloc-ctabanner-01__form-input::placeholder {
    color: var(--ctabanner-placeholder-color, #767676);
}

.bloc-ctabanner-01__form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    color: var(--ctabanner-placeholder-color, currentColor);
}

.bloc-ctabanner-01__form-textarea {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #E6E7E7;
    border-radius: 4px;
    background: #FAFAFA;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--ctabanner-textarea-height, 96px);
    height: var(--ctabanner-textarea-height, 96px);
    resize: none;
    font-family: inherit;
}

.bloc-ctabanner-01__form-group > p {
    margin: 0;
    min-width: 0;
}

.bloc-ctabanner-01__form-textarea::placeholder {
    color: var(--ctabanner-placeholder-color, #767676);
}

/* Checkbox and Radio */
.bloc-ctabanner-01__form-check {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bloc-ctabanner-01__form-check br {
    display: none;
}

.bloc-ctabanner-01__form-card .bloc-ctabanner-01__form-check .wpcf7-form-control-wrap {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
}

.bloc-ctabanner-01__form-check .wpcf7-form-control,
.bloc-ctabanner-01__form-check .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
}

.bloc-ctabanner-01__form-check .bloc-ctabanner-01__form-check-input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
}

.bloc-ctabanner-01__checkbox,
.bloc-ctabanner-01__radio {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #000;
}

.bloc-ctabanner-01__check-label {
    font-size: 16px;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

/* Static Responsive */
@media (max-width: 1024px) {
    .bloc-ctabanner-01 {
        padding: 80px var(--section-padding-x, 64px);
    }

    .bloc-ctabanner-01__container {
        gap: 48px;
        padding: 32px;
    }

    .bloc-ctabanner-01__container--stacked-contact-form {
        grid-template-columns: 1fr;
    }

    .bloc-ctabanner-01__form-card--stacked {
        max-width: none;
        justify-self: stretch;
    }

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

@media (max-width: 768px) {
    .bloc-ctabanner-01 {
        --usine-ctabanner-section-padding-x-mobile: 16px;
        padding: 64px var(--section-padding-x, 64px);
    }

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

    .bloc-ctabanner-01__container {
        padding: 24px;
    }

    .bloc-ctabanner-01__container--bare {
        padding: 0;
    }

    .bloc-ctabanner-01__form-card {
        padding: 16px;
    }

    .bloc-ctabanner-01__newsletter-row {
        flex-direction: column;
    }

    .bloc-ctabanner-01__actions {
        flex-direction: column;
    }

    .bloc-ctabanner-01__feature {
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .bloc-ctabanner-01__button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .bloc-ctabanner-01__form-card {
        grid-template-columns: 1fr;
    }

    .bloc-ctabanner-01__form-card .wpcf7-form {
        grid-template-columns: 1fr;
    }

    .bloc-ctabanner-01__plugin-form .bloc-ctabanner-01__wpcf7-form {
        grid-template-columns: 1fr;
    }

    .bloc-ctabanner-01__form-card--reservation {
        grid-template-columns: 1fr;
    }

    .bloc-ctabanner-01__form-group:nth-of-type(n+3) {
        grid-column: auto;
    }

    .bloc-ctabanner-01__form-card .bloc-ctabanner-01__form-check {
        grid-column: auto;
    }

    .bloc-ctabanner-01__form-card .btn {
        grid-column: auto;
    }
}

/* ===== DYNAMIC CLASSES (ACF-driven) ===== */
.usine-bloc_ctabanner_01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* padding driven by JSON via bloc_ctabanner_01_padding_top/bottom */
    /* background driven by JSON via bloc_ctabanner_01_background_color */
}

.usine-bloc_ctabanner_01 .container {
    max-width: var(--container-xl, 1312px);
    margin: 0 auto;
    padding: 0 var(--spacing-container-x, 64px);
}

.usine-bloc_ctabanner_01 .cta-banner-content {
    --cta-banner-column-min: 22rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cta-banner-column-min)), 1fr));
    gap: clamp(24px, 6vw, 80px);
    align-items: start;
}

/* Text Content */
.usine-bloc_ctabanner_01 .cta-banner-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.usine-bloc_ctabanner_01 .cta-tagline {
    font-size: 16px;
    font-weight: 600;
    color: currentColor;
    margin: 0;
}

.usine-bloc_ctabanner_01 .cta-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h2, 48px);
    font-weight: var(--font-weight-bold, 700);
    color: currentColor;
    margin: 0;
    line-height: var(--line-height-tight, 1.2);
}

.usine-bloc_ctabanner_01 .cta-description {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-p1, 18px);
    color: currentColor;
    margin: 0;
    line-height: var(--line-height-normal, 1.5);
}

/* Actions */
.usine-bloc_ctabanner_01 .cta-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Inline Form */
.usine-bloc_ctabanner_01 .cta-inline-form {
    width: 100%;
}

.usine-bloc_ctabanner_01 .form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.usine-bloc_ctabanner_01 .cta-email-input {
    font-family: var(--font-family-primary);
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid currentColor;
    background-color: transparent;
    color: currentColor;
    transition: var(--transition-all, 0.2s ease);
    flex: 1;
}

.usine-bloc_ctabanner_01 .cta-email-input::placeholder {
    color: currentColor;
    opacity: 0.6;
}

.usine-bloc_ctabanner_01 .cta-email-input:focus {
    outline: none;
    border-color: currentColor;
}

.usine-bloc_ctabanner_01 .el-primary-button {
    background-color: currentColor;
    color: #fff;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: var(--font-weight-medium, 500);
    border: 1px solid currentColor;
}

.usine-bloc_ctabanner_01 .el-primary-button:hover {
    opacity: 0.9;
}

.usine-bloc_ctabanner_01 .cta-form-note {
    font-size: 12px;
    color: currentColor;
    margin: 8px 0 0 0;
    opacity: 0.85;
}

/* Buttons Group */
.usine-bloc_ctabanner_01 .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.usine-bloc_ctabanner_01 .el-secondary-button {
    background-color: transparent;
    color: currentColor;
    border: 1px solid currentColor;
    padding: 12px 24px;
    font-size: 16px;
}

.usine-bloc_ctabanner_01 .el-secondary-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Icon Text */
.usine-bloc_ctabanner_01 .cta-icon-text {
    display: flex;
    align-items: center;
    gap: 16px;
}

.usine-bloc_ctabanner_01 .cta-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.usine-bloc_ctabanner_01 .cta-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.usine-bloc_ctabanner_01 .cta-detail-text {
    font-size: 16px;
    color: currentColor;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .usine-bloc_ctabanner_01 .cta-banner-content {
        gap: 48px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .usine-bloc_ctabanner_01 .form-group {
        flex-direction: column;
    }

    .usine-bloc_ctabanner_01 .cta-buttons {
        flex-direction: column;
    }
}

/* ==========================================================================
   CTABANNER-FORM-MOBILE-001
   Mesuré : la carte du formulaire ne faisait que 350px sur un écran de 430px,
   trois retraits s'additionnant (section 16px + conteneur 24px + carte 16px).
   On les resserre pour gagner ~48px de largeur de saisie, et les champs
   passent à une hauteur confortable au doigt.
   Le retrait du conteneur est posé en !important par usine-components.css
   (--usine-wrapper-container-mobile-padding) : il faut donc l'être aussi.
   ========================================================================== */
@media (max-width: 768px) {
    /* Le render écrit padding-inline dans l'attribut style : il faut !important
       pour récupérer ces 16px de chaque côté. */
    .bloc-ctabanner-01 {
        padding-inline: 8px !important;
    }

    .bloc-ctabanner-01__container {
        padding: 8px !important;
    }

    .bloc-ctabanner-01__form-card,
    .bloc-ctabanner-01__form-card--stacked {
        max-width: 100%;
        width: 100%;
        padding: 20px 16px;
    }

    .bloc-ctabanner-01__form-card .wpcf7-form-control-wrap input[type="text"],
    .bloc-ctabanner-01__form-card .wpcf7-form-control-wrap input[type="email"],
    .bloc-ctabanner-01__form-card .wpcf7-form-control-wrap input[type="tel"],
    .bloc-ctabanner-01__form-card .wpcf7-form-control-wrap select {
        min-height: 48px;
        font-size: 16px; /* évite le zoom automatique de Safari iOS à la saisie */
    }

    .bloc-ctabanner-01__form-card .wpcf7-form-control-wrap textarea {
        min-height: 120px;
        font-size: 16px;
    }

    /* La paire nom/téléphone tient sur une ligne en desktop ; sur mobile elle
       laissait deux champs de 174px, trop étroits pour une saisie au doigt. */
    .bloc-ctabanner-01__form-row {
        grid-template-columns: 1fr;
    }

    .bloc-ctabanner-01__form-actions .wpcf7-submit,
    .bloc-ctabanner-01__form-actions .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* ==========================================================================
   CTABANNER-FORM-LAYOUT-001
   La carte du formulaire était elle-même une grille de deux colonnes. La paire
   « Nom / Téléphone », qui forme déjà une rangée, occupait la première colonne
   et s'y empilait faute de place, pendant que l'adresse e-mail prenait la
   seconde : le formulaire se lisait « Nom | E-mail », puis « Téléphone » seul
   avec la moitié de la ligne vide.

   La carte repasse donc sur une seule colonne, et c'est la rangée qui porte le
   couple. L'ordre devient lisible de haut en bas — Nom et Téléphone côte à
   côte, puis l'e-mail, le message et le bouton, chacun sur toute la largeur.
   ========================================================================== */
/* La carte ne contient qu'un enfant, le conteneur du plugin : la grille qui
   place reellement les champs est le <form> lui-meme. */
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.bloc-ctabanner-01__form-card--source-submit .bloc-ctabanner-01__form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Une seule colonne quand la carte devient étroite : deux champs de moins de
   160px ne se remplissent plus confortablement. */
@media (max-width: 560px) {
    .bloc-ctabanner-01__form-card--source-submit .bloc-ctabanner-01__form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   CTABANNER-FORM-FIELD-001
   Les champs faisaient 38px de haut, avec un rayon de 4px et un fond quasi
   identique à celui de la carte : ils se distinguaient à peine du panneau et
   juraient avec les arrondis généreux du reste du site. On leur donne une
   hauteur confortable, le rayon de la charte, et un fond crème qui les
   détache franchement du rose. La taille de saisie passe à 16px : en dessous,
   iOS zoome automatiquement au premier appui.
   ========================================================================== */
.bloc-ctabanner-01__form-card--source-submit .bloc-ctabanner-01__form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bloc-ctabanner-01__form-card--source-submit .bloc-ctabanner-01__form-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.75;
    margin: 0;
}

/* La couleur des champs est saisie en back-office : le gabarit pose les jetons
   --usine-form-field-* en ligne sur chaque groupe. On ne touche donc qu'a la
   geometrie — hauteur, retrait, rayon, taille de saisie — pour que le reglage
   de teinte reste maitrise depuis l'interface.

   Meme forme de selecteur que la regle du socle — qui cible `input[type=...]`
   et l'emporte donc sur une simple classe — pour trancher par l'ordre. */
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap input[type="text"],
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap input[type="email"],
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap input[type="tel"],
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap input[type="number"],
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--usine-form-field-text, #574538);
    border-radius: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap textarea {
    min-height: 148px;
    resize: vertical;
}

.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap input::placeholder,
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap textarea::placeholder {
    color: #a08d7f;
}

/* Un anneau discret plutôt qu'un contour système : le champ actif doit se voir
   sans casser la douceur du bloc. */
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap input:focus,
.bloc-ctabanner-01__form-card--source-submit .wpcf7-form-control-wrap textarea:focus {
    outline: none;
    border-color: #c7945a;
    box-shadow: 0 0 0 3px rgba(199, 148, 90, 0.18);
}

/* Le bouton respire au-dessus, comme la maquette du reste des blocs. */
.bloc-ctabanner-01__form-card--source-submit .bloc-ctabanner-01__form-actions {
    margin-top: 4px;
}