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:   #231F20;
    --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 enveloppe les champs dans des <p> — on les rend flex containers */
form.wpcf7-form > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    column-gap: var(--main-gap);
    row-gap: var(--main-gap);
    margin: 0;
}

/* CF7 insère des <br> entre chaque champ — on les cache */
form.wpcf7-form > p > br {
    display: none;
}

/* Les spans wpcf7-form-control-wrap sont les flex items du <p>
   Leur largeur est contrôlée via :has() selon la classe col-xx de l'input enfant
   L'erreur de validation reste à l'intérieur du span, sans perturber le layout */
form.wpcf7-form > p > span.wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    width: 100%;
    min-width: 0;
}

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

/* Messages de validation — restent dans le span, pas besoin de flex-basis */
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 p 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()
   Nécessaire pour que l'erreur de validation reste dans son span sans casser le layout */
/* stylelint-disable */
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-10.duo)  {width: calc(10% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-10.trio)  {width: calc(10% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-10.quadra)  {width: calc(10% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-15.duo)  {width: calc(15% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-15.trio)  {width: calc(15% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-15.quadra)  {width: calc(15% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-20.duo)  {width: calc(20% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-20.trio)  {width: calc(20% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-20.quadra)  {width: calc(20% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-25.duo)  {width: calc(25% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-25.trio)  {width: calc(25% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-25.quadra)  {width: calc(25% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-30.duo)  {width: calc(30% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-30.trio)  {width: calc(30% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-30.quadra)  {width: calc(30% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-35.duo)  {width: calc(35% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-35.trio)  {width: calc(35% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-35.quadra)  {width: calc(35% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-40.duo)  {width: calc(40% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-40.trio)  {width: calc(40% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-40.quadra)  {width: calc(40% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-45.duo)  {width: calc(45% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-45.trio)  {width: calc(45% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-45.quadra)  {width: calc(45% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-50.duo)  {width: calc(50% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-50.trio)  {width: calc(50% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-50.quadra)  {width: calc(50% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-55.duo)  {width: calc(55% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-55.trio)  {width: calc(55% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-55.quadra)  {width: calc(55% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-65.duo)  {width: calc(65% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-65.trio)  {width: calc(65% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-65.quadra)  {width: calc(65% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-70.duo)  {width: calc(70% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-70.trio)  {width: calc(70% - (var(--main-gap)/3*2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-70.quadra)  {width: calc(70% - (var(--main-gap)/4*3));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-75.duo)  {width: calc(75% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-75.trio)  {width: calc(75% - (var(--main-gap)/3*2));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-80.duo)  {width: calc(80% - (var(--main-gap)/2));}   form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-80.trio)  {width: calc(80% - (var(--main-gap)/3*2));}
form.wpcf7-form > p > span.wpcf7-form-control-wrap:has(> .col-85.duo)  {width: calc(85% - (var(--main-gap)/2));}
form.wpcf7-form > p > 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 p input.wpcf7-form-control:not([type="submit"]),
form.wpcf7-form p textarea.wpcf7-form-control,
form.wpcf7-form p 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 p input.wpcf7-form-control:not([type="submit"])::placeholder,
form.wpcf7-form p textarea.wpcf7-form-control::placeholder {
    color: var(--input-placeholder);
}

form.wpcf7-form p input.wpcf7-form-control:not([type="submit"]):focus,
form.wpcf7-form p textarea.wpcf7-form-control:focus,
form.wpcf7-form p 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 p input.wpcf7-not-valid,
form.wpcf7-form p 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 > p > span.wpcf7-form-control-wrap {
        width: 100% !important;
    }
}


/* CSS du bouton de soumission
   Utilisation : [submit class:oaka-cf7-submit "Envoyer"] dans le shortcode CF7 */
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 input.wpcf7-submit.oaka-cf7-submit:hover {
    background-color: #FFF;
    color: #000;
}


/* Messages d'erreur/validation/succes */
form.wpcf7-form div.wpcf7-response-output {
    background-color: #FFFFFF;
}