form.wpcf7-form {

    --main-gap: 10px;

    /* Variables de style des champs — à surcharger par projet */
    --input-padding:        12px 14px;
    --input-font-size:      15px;
    --input-bg:             #fff;
    --input-border:         1px solid #ccc;
    --input-border-radius:  3px;
    --input-color:          #222;
    --input-placeholder:    #aaa;
    --input-focus-border:   #FA4641;
    --input-focus-shadow:   0 0 0 3px rgba(35, 31, 32, 0.08);

    display: flex;
    flex-wrap: wrap;
    column-gap: var(--main-gap);
    row-gap: var(--main-gap);

}

/* CF7 6.x : fieldset des champs cachés — pas d'espace visuel */
form.wpcf7-form > fieldset.hidden-fields-container {
    margin: 0;
    padding: 0;
    border: none;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* CF7 6.x : les spans wpcf7-form-control-wrap sont enfants directs du <form> */
form.wpcf7-form > span.wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    width: 100%;
    min-width: 0;
}

/* Les inputs/textareas/selects remplissent toujours leur span à 100% */
form.wpcf7-form input.wpcf7-form-control:not([type="submit"]),
form.wpcf7-form textarea.wpcf7-form-control,
form.wpcf7-form select.wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
}

/* Messages de validation */
form.wpcf7-form .wpcf7-not-valid-tip {
    font-size: 0.8em;
}

form.wpcf7-form .oaka-cf7-rgpd .wpcf7-form-control-wrap span.wpcf7-list-item,
form.wpcf7-form .oaka-cf7-rgpd .wpcf7-form-control-wrap span.wpcf7-list-item label input,
form.wpcf7-form .oaka-cf7-brevo-acceptance .wpcf7-form-control-wrap span.wpcf7-list-item,
form.wpcf7-form .oaka-cf7-brevo-acceptance .wpcf7-form-control-wrap span.wpcf7-list-item label input {
    margin: 0px;
}

form.wpcf7-form .oaka-cf7-rgpd label > a {
    color: #000;
}

form.wpcf7-form textarea.wpcf7-form-control {
    box-sizing: border-box;
    resize: vertical;
}


/* DEBUT CSS des width ajustables */
.col-10.duo {width: calc(10% - (var(--main-gap)/2));}  .col-10.trio {width: calc(10% - (var(--main-gap)/3*2));}  .col-10.quadra {width: calc(10% - (var(--main-gap)/4*3));}
.col-15.duo {width: calc(15% - (var(--main-gap)/2));}  .col-15.trio {width: calc(15% - (var(--main-gap)/3*2));}  .col-15.quadra {width: calc(15% - (var(--main-gap)/4*3));}
.col-20.duo {width: calc(20% - (var(--main-gap)/2));}  .col-20.trio {width: calc(20% - (var(--main-gap)/3*2));}  .col-20.quadra {width: calc(20% - (var(--main-gap)/4*3));}
.col-25.duo {width: calc(25% - (var(--main-gap)/2));}  .col-25.trio {width: calc(25% - (var(--main-gap)/3*2));}  .col-25.quadra {width: calc(25% - (var(--main-gap)/4*3));}
.col-30.duo {width: calc(30% - (var(--main-gap)/2));}  .col-30.trio {width: calc(30% - (var(--main-gap)/3*2));}  .col-30.quadra {width: calc(30% - (var(--main-gap)/4*3));}
.col-35.duo {width: calc(35% - (var(--main-gap)/2));}  .col-35.trio {width: calc(35% - (var(--main-gap)/3*2));}  .col-35.quadra {width: calc(35% - (var(--main-gap)/4*3));}
.col-40.duo {width: calc(40% - (var(--main-gap)/2));}  .col-40.trio {width: calc(40% - (var(--main-gap)/3*2));}  .col-40.quadra {width: calc(40% - (var(--main-gap)/4*3));}
.col-45.duo {width: calc(45% - (var(--main-gap)/2));}  .col-45.trio {width: calc(45% - (var(--main-gap)/3*2));}  .col-45.quadra {width: calc(45% - (var(--main-gap)/4*3));}
.col-50.duo {width: calc(50% - (var(--main-gap)/2));}  .col-50.trio {width: calc(50% - (var(--main-gap)/3*2));}  .col-50.quadra {width: calc(50% - (var(--main-gap)/4*3));}
.col-55.duo {width: calc(55% - (var(--main-gap)/2));}  .col-55.trio {width: calc(55% - (var(--main-gap)/3*2));}  .col-55.quadra {width: calc(55% - (var(--main-gap)/4*3));}
.col-65.duo {width: calc(65% - (var(--main-gap)/2));}  .col-65.trio {width: calc(65% - (var(--main-gap)/3*2));}  .col-65.quadra {width: calc(65% - (var(--main-gap)/4*3));}
.col-70.duo {width: calc(70% - (var(--main-gap)/2));}  .col-70.trio {width: calc(70% - (var(--main-gap)/3*2));}  .col-70.quadra {width: calc(70% - (var(--main-gap)/4*3));}
.col-75.duo {width: calc(75% - (var(--main-gap)/2));}  .col-75.trio {width: calc(75% - (var(--main-gap)/3*2));}
.col-80.duo {width: calc(80% - (var(--main-gap)/2));}  .col-80.trio {width: calc(80% - (var(--main-gap)/3*2));}
.col-85.duo {width: calc(85% - (var(--main-gap)/2));}
.col-90.duo {width: calc(90% - (var(--main-gap)/2));}

.col-hiddden {display: none;}  .col-100 {width: 100%;}
/* FIN CSS des width ajustables */


/* DEBUT propagation des largeurs aux spans CF7 via :has()
   CF7 6.x : les spans sont enfants directs du <form> */
/* stylelint-disable */
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-10.duo)  {width: calc(10% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-10.trio)  {width: calc(10% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-10.quadra)  {width: calc(10% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-15.duo)  {width: calc(15% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-15.trio)  {width: calc(15% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-15.quadra)  {width: calc(15% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-20.duo)  {width: calc(20% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-20.trio)  {width: calc(20% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-20.quadra)  {width: calc(20% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-25.duo)  {width: calc(25% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-25.trio)  {width: calc(25% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-25.quadra)  {width: calc(25% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-30.duo)  {width: calc(30% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-30.trio)  {width: calc(30% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-30.quadra)  {width: calc(30% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-35.duo)  {width: calc(35% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-35.trio)  {width: calc(35% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-35.quadra)  {width: calc(35% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-40.duo)  {width: calc(40% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-40.trio)  {width: calc(40% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-40.quadra)  {width: calc(40% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-45.duo)  {width: calc(45% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-45.trio)  {width: calc(45% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-45.quadra)  {width: calc(45% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-50.duo)  {width: calc(50% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-50.trio)  {width: calc(50% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-50.quadra)  {width: calc(50% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-55.duo)  {width: calc(55% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-55.trio)  {width: calc(55% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-55.quadra)  {width: calc(55% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-65.duo)  {width: calc(65% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-65.trio)  {width: calc(65% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-65.quadra)  {width: calc(65% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-70.duo)  {width: calc(70% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-70.trio)  {width: calc(70% - (var(--main-gap)/3*2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-70.quadra)  {width: calc(70% - (var(--main-gap)/4*3));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-75.duo)  {width: calc(75% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-75.trio)  {width: calc(75% - (var(--main-gap)/3*2));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-80.duo)  {width: calc(80% - (var(--main-gap)/2));}   form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-80.trio)  {width: calc(80% - (var(--main-gap)/3*2));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-85.duo)  {width: calc(85% - (var(--main-gap)/2));}
form.wpcf7-form > span.wpcf7-form-control-wrap:has(> .col-90.duo)  {width: calc(90% - (var(--main-gap)/2));}
/* stylelint-enable */
/* FIN propagation des largeurs aux spans CF7 */


/* Apparence des champs */
form.wpcf7-form input.wpcf7-form-control:not([type="submit"]),
form.wpcf7-form textarea.wpcf7-form-control,
form.wpcf7-form select.wpcf7-form-control {
    padding:          var(--input-padding);
    font-size:        var(--input-font-size);
    background-color: var(--input-bg);
    border:           var(--input-border);
    border-radius:    var(--input-border-radius);
    color:            var(--input-color);
    outline:          none;
    transition:       border-color 0.2s ease, box-shadow 0.2s ease;
    font-family:      inherit;
    appearance:       none;
}

form.wpcf7-form input.wpcf7-form-control:not([type="submit"])::placeholder,
form.wpcf7-form textarea.wpcf7-form-control::placeholder {
    color: var(--input-placeholder);
}

form.wpcf7-form input.wpcf7-form-control:not([type="submit"]):focus,
form.wpcf7-form textarea.wpcf7-form-control:focus,
form.wpcf7-form select.wpcf7-form-control:focus {
    border-color: var(--input-focus-border);
    box-shadow:   var(--input-focus-shadow);
}

/* Champ invalide après soumission */
form.wpcf7-form input.wpcf7-not-valid,
form.wpcf7-form textarea.wpcf7-not-valid {
    border-color: #c0392b;
    box-shadow:   0 0 0 3px rgba(192, 57, 43, 0.1);
}


/* Mobile : tous les champs passent en pleine largeur */
@media (max-width: 767px) {
    form.wpcf7-form > span.wpcf7-form-control-wrap {
        width: 100% !important;
    }
}


/* CSS du bouton de soumission
   CF7 6.x : le submit est un <button>, non plus un <input type="submit">
   Utilisation : [submit class:oaka-cf7-submit "Envoyer"] dans le shortcode CF7 */
form.wpcf7-form button.wpcf7-submit.oaka-cf7-submit,
form.wpcf7-form input.wpcf7-submit.oaka-cf7-submit {
    border: none;
    background-color: #231F20;
    color: #FFF;
    padding: 7px 15px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    width: auto;
}
form.wpcf7-form button.wpcf7-submit.oaka-cf7-submit:hover,
form.wpcf7-form input.wpcf7-submit.oaka-cf7-submit:hover {
    background-color: #FFF;
    color: #000;
}


/* Champ acceptance (RGPD) */
form.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

form.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

form.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label input[type="checkbox"] {
    flex-shrink: 0;
    margin: 3px 0 0 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--input-focus-border);
}

form.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 14px;
    line-height: 1.5;
    color: #000064!important;
}


/* Texte statique [cf7_rgpd_text] */
form.wpcf7-form p.oaka-cf7-rgpd-text {
    width: 100%;
    margin: 0;
    font-size: 0.8em;
    line-height: 1.6;
    color: #333333;
}


/* Messages d'erreur/validation/succes — masqué, remplacé par oaka-cf7-success */
form.wpcf7-form div.wpcf7-response-output {
    display: none !important;
}


/* Transition succès : fade out du formulaire */
form.wpcf7-form.oaka-cf7-fading {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Bloc de succès affiché à la place du formulaire */
.wpcf7 .oaka-cf7-success {
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: center;
}

.wpcf7 .oaka-cf7-success.oaka-cf7-success--visible {
    opacity: 1;
    margin-top: 80px;
    margin-bottom: 60px;
}

.wpcf7 .oaka-cf7-success h3 {
    margin: 0 0 10px 0;
    font-size: 2.6em;
    color: #000063;
}

.wpcf7 .oaka-cf7-success p {
    margin: 0;
    font-size: 1em;
    color: #333333;
}
