form.wpcf7-form {

    /* ===== Palette du thème — à surcharger par projet ===== */
    --color-primary:          #7A6962;   /* brun (fond du formulaire) */
    --color-secondary:        #E5D7CC;   /* beige (bouton, liens, checkbox) */
    --color-secondary-hover:  #CCB1A3;   /* beige foncé (survol) */
    --color-accent:           #EEC530;   /* jaune (menu actif, succès) */
    --color-light:            #FFFFFF;
    --color-dark:             #231F20;
    --color-error:            #C0392B;   /* sur fond blanc (bordure champ) */
    --color-error-light:      #FFC2B5;   /* sur fond brun (texte erreur) */

    --font-body:              "Titillium Web", sans-serif;
    --font-ui:                "DM Sans", sans-serif;

    /* ===== Formulaire ===== */
    --main-gap:               10px;
    --form-bg:                var(--color-primary);
    --form-padding:           0;
    --form-color:             var(--color-light);

    /* ===== Champs ===== */
    --input-padding:          12px 14px;
    --input-font-size:        15px;
    --input-bg:               var(--color-light);
    --input-border:           1px solid #ccc;
    --input-border-radius:    3px;
    --input-color:            #222;
    --input-placeholder:      #aaa;
    --input-focus-border:     var(--color-primary);
    --input-focus-shadow:     0 0 0 3px rgba(238, 197, 48, 0.45);
    --input-error-border:     var(--color-error);
    --input-error-shadow:     0 0 0 3px rgba(192, 57, 43, 0.15);
    --error-tip-color:        var(--color-error-light);

    /* ===== Bouton ===== */
    --btn-bg:                 var(--color-secondary);
    --btn-bg-hover:           var(--color-secondary-hover);
    --btn-color:              var(--color-light);
    --btn-font:               var(--font-ui);

    /* ===== RGPD / acceptance ===== */
    --label-color:            var(--color-light);
    --label-font:             var(--font-ui);
    --link-color:             var(--color-secondary);
    --link-hover:             var(--color-accent);
    --check-border:           var(--color-secondary);
    --check-bg:               var(--color-secondary);
    --check-mark:             var(--color-primary);

    /* ===== Messages de réponse ===== */
    --msg-bg:                 rgba(255, 255, 255, 0.08);
    --msg-color:              var(--color-light);
    --msg-font:               var(--font-body);
    --msg-border:             var(--color-secondary);
    --msg-success:            var(--color-accent);
    --msg-error:              var(--color-error-light);
    --msg-warning:            var(--color-secondary-hover);

    display: flex;
    flex-wrap: wrap;
    column-gap: var(--main-gap);
    row-gap: var(--main-gap);
    padding: var(--form-padding);
    background-color: var(--form-bg);
    color: var(--form-color);
    font-family: var(--font-body);
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */

}

/* 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 sous les champs */
form.wpcf7-form .wpcf7-not-valid-tip {
    font-size: 0.8em;
    color: var(--error-tip-color);
}

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 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,
form.wpcf7-form p select.wpcf7-not-valid {
    border-color: var(--input-error-border);
    box-shadow:   var(--input-error-shadow);
}


/* 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 */
form.wpcf7-form .wpcf7-submit,
form.wpcf7-form .wpcf7-submit:hover {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 10px 18px !important;
    margin: 0;
    border: 0 !important;
    background-color: var(--btn-bg) !important;
    color: var(--btn-color) !important;
    font-family: var(--btn-font);
    font-size: 12px !important;
    font-weight: 700;
    line-height: 23.8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form.wpcf7-form .wpcf7-submit:hover,
form.wpcf7-form .wpcf7-submit:focus-visible {
    background-color: var(--btn-bg-hover) !important;
}

/* Suppression de l'icône Divi (.et_pb_button) */
form.wpcf7-form .wpcf7-submit::before,
form.wpcf7-form .wpcf7-submit::after,
form.wpcf7-form .wpcf7-submit:hover::before,
form.wpcf7-form .wpcf7-submit:hover::after {
    content: none !important;
    display: none !important;
}


/* Messages de réponse CF7 (succès / erreur / validation)
   Spécificité volontairement > à celle de contact-form-7/styles.css */
form.wpcf7-form div.wpcf7-response-output {
    width: 100%;
    box-sizing: border-box;
    margin: var(--main-gap) 0 0;
    padding: 14px 18px;
    background-color: var(--msg-bg);
    color: var(--msg-color);
    font-family: var(--msg-font);
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid var(--msg-border);
    border-left-width: 4px;
    border-radius: var(--input-border-radius);
}

form.wpcf7-form.sent div.wpcf7-response-output {
    border-color: var(--msg-success);
}

form.wpcf7-form.failed div.wpcf7-response-output,
form.wpcf7-form.aborted div.wpcf7-response-output,
form.wpcf7-form.spam div.wpcf7-response-output {
    border-color: var(--msg-error);
}

form.wpcf7-form.invalid div.wpcf7-response-output,
form.wpcf7-form.unaccepted div.wpcf7-response-output,
form.wpcf7-form.payment-required div.wpcf7-response-output {
    border-color: var(--msg-warning);
}


/* Partie RGPD sur le bloc "acceptance" */
.wpcf7-form .wpcf7-acceptance { display: block; margin: 18px 0; }
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

.wpcf7-form input[name="rgpd-acceptation"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  border: 2px solid var(--check-border);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease, border-color .2s ease;
}
.wpcf7-form input[name="rgpd-acceptation"]:hover { border-color: var(--link-hover); }
.wpcf7-form input[name="rgpd-acceptation"]:checked { background-color: var(--check-bg); border-color: var(--check-bg); }
.wpcf7-form input[name="rgpd-acceptation"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--check-mark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wpcf7-form input[name="rgpd-acceptation"]:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 2px; }

.wpcf7-form .wpcf7-list-item-label {
  font-family: var(--label-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--label-color);
}
.wpcf7-form .wpcf7-list-item-label a {
  color: var(--link-color);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-color);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.wpcf7-form .wpcf7-list-item-label a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}