/* ── Layout ─────────────────────────────────────────────────────────────── */
.cc-cf-wrap {
    width: 100%;
    font-family: var(--bde-body-font-family, "Inter", sans-serif);
    font-size: var(--bde-body-font-size, 16px);
    color: var(--bde-body-text-color, #0C0B0A);
}

.cc-cf-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cc-cf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bde-form-gap, 16px) 24px;
}

/* Textarea, select et champs larges = pleine largeur */
.cc-cf-field--full {
    grid-column: 1 / -1;
}

/* Si un champ est seul sur sa ligne (dernier champ impair avant un full),
   il prend aussi toute la largeur */
.cc-cf-field:last-child:not(.cc-cf-field--full):nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .cc-cf-grid {
        grid-template-columns: 1fr;
    }
    .cc-cf-field--full,
    .cc-cf-field:last-child:not(.cc-cf-field--full):nth-child(odd) {
        grid-column: 1;
    }
}

/* ── Champ ──────────────────────────────────────────────────────────────── */
.cc-cf-field {
    display: flex;
    flex-direction: column;
    gap: var(--bde-form-after-label, 8px);
}

/* ── Label ──────────────────────────────────────────────────────────────── */
.cc-cf-label {
    font-family: var(--bde-body-font-family, "Inter", sans-serif);
    font-size: 13px;
    font-weight: var(--bde-form-label-font-weight, 500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bde-form-label-color, var(--bde-headings-color, #0C0B0A));
    line-height: 1;
}

.cc-cf-required {
    color: var(--bde-form-label-required-color, #b91c1c);
    margin-left: 3px;
}

/* ── Input / Textarea / Select ──────────────────────────────────────────── */
.cc-cf-input {
    width: 100%;
    padding:
        var(--bde-form-input-padding-top, 12px)
        var(--bde-form-input-padding-right, 16px)
        var(--bde-form-input-padding-bottom, 12px)
        var(--bde-form-input-padding-left, 16px);
    background-color: var(--bde-form-input-background-color, #fff);
    border-top:    var(--bde-form-input-border-top,    1px solid #d1d5db);
    border-right:  var(--bde-form-input-border-right,  1px solid #d1d5db);
    border-bottom: var(--bde-form-input-border-bottom, 1px solid #d1d5db);
    border-left:   var(--bde-form-input-border-left,   1px solid #d1d5db);
    border-radius: var(--bde-form-input-border-radius, 3px);
    font-family: var(--bde-body-font-family, "Inter", sans-serif);
    font-size: var(--bde-form-font-size, var(--bde-body-font-size, 16px));
    color: var(--bde-form-text-color, #374151);
    box-shadow: var(--bde-form-input-input-shadow, none);
    box-sizing: border-box;
    transition: border-color var(--bde-transition-duration, 300ms) ease,
                box-shadow   var(--bde-transition-duration, 300ms) ease,
                background   var(--bde-transition-duration, 300ms) ease;
    -webkit-appearance: none;
    appearance: none;
}

.cc-cf-input::placeholder {
    color: var(--bde-form-input-placeholder-color, #787e8b);
}

.cc-cf-input:focus {
    outline: none;
    background-color: var(--bde-form-input-focused-background-color, #fff);
    border-color: var(--bde-form-input-focused-border-color, #14123A);
    box-shadow: var(--bde-form-input-focused-shadow, #14123A 0 0 2px);
}

.cc-cf-input.cc-cf-input--error {
    border-color: var(--red-700, #b91c1c);
    box-shadow: var(--red-700, #b91c1c) 0 0 2px;
}

textarea.cc-cf-input {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

/* Select avec chevron natif */
.cc-cf-select-wrap {
    position: relative;
}

.cc-cf-select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-color: var(--bde-form-text-color, #374151);
    pointer-events: none;
    -webkit-mask-image: var(--chevron-svg-icon);
    mask-image: var(--chevron-svg-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

select.cc-cf-input {
    cursor: pointer;
    padding-right: 44px;
}

/* ── Erreur inline ──────────────────────────────────────────────────────── */
.cc-cf-error {
    font-size: 13px;
    color: var(--red-700, #b91c1c);
    line-height: 1.3;
    min-height: 1.3em;
}

/* ── Pied de formulaire ─────────────────────────────────────────────────── */
.cc-cf-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ── Bouton — copie exacte du primary button du site ───────────────────── */
.cc-cf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--bde-button-padding-base, 14px 24px);
    background-color: var(--bde-palette-color-1-8a652bc0-1e6d-496a-a84f-6ad8ecb7e700, #CB9A41);
    color: var(--bde-palette-color-1-7bfe1246-16fa-4bd0-b2ee-5b13296cdbab, #fff);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--bde-body-font-family, "Inter", sans-serif);
    font-size: var(--bde-button-font-size, 16px);
    font-weight: var(--bde-button-font-weight, 500);
    line-height: var(--bde-button-line-height, 1);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--bde-transition-duration, 300ms) ease-in-out;
    overflow: hidden;
}

/* Flèche → identique aux boutons du site */
.cc-cf-submit::after {
    content: '';
    display: block;
    background-color: currentColor;
    width: 0.9em;
    height: 0.9em;
    margin-left: 20px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M438.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L338.8%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l306.7%200L233.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M438.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L338.8%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l306.7%200L233.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition: transform var(--bde-transition-duration, 300ms) ease-in-out,
                background-color var(--bde-transition-duration, 300ms) ease-in-out;
    flex-shrink: 0;
}

.cc-cf-submit:hover {
    background-color: var(--bde-palette-color-1-8a652bc0-1e6d-496a-a84f-6ad8ecb7e700, #CB9A41);
    opacity: 0.88;
}

.cc-cf-submit:hover::after {
    transform: translateX(4px);
}

.cc-cf-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Spinner pendant l'envoi */
.cc-cf-submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cc-cf-spin 0.65s linear infinite;
    margin-left: 12px;
    flex-shrink: 0;
}

.cc-cf-submit.cc-cf-loading::after {
    display: none;
}

.cc-cf-submit.cc-cf-loading .cc-cf-submit-spinner {
    display: block;
}

@keyframes cc-cf-spin {
    to { transform: rotate(360deg); }
}

/* ── Note sous le bouton ────────────────────────────────────────────────── */
.cc-cf-notice {
    font-size: 13px;
    color: var(--grey-500, #6b7280);
    margin: 0;
    line-height: 1.4;
}

/* ── Messages de retour ─────────────────────────────────────────────────── */
.cc-cf-success {
    padding: 16px 20px;
    background: var(--emerald-100, #d1fae5);
    border-left: 3px solid var(--emerald-700, #047857);
    color: var(--emerald-700, #047857);
    font-size: 15px;
    line-height: 1.5;
}

.cc-cf-global-error {
    padding: 16px 20px;
    background: var(--red-50, #fef2f2);
    border-left: 3px solid var(--red-500, #ef4444);
    color: var(--red-700, #b91c1c);
    font-size: 15px;
    line-height: 1.5;
}