form.wpcf7-form {

    /* ===== Palette du thème — Olivier Urbano Photography ===== */
    --color-primary:          #8D7152;   /* brun (lignes, bouton, case) */
    --color-primary-dark:     #6F5940;   /* brun foncé (placeholders) */
    --color-text:             #5C4A36;   /* brun texte (labels, RGPD) */
    --color-bg:               #E5D7CC;   /* beige du module (sert à neutraliser l'autofill) */
    --color-light:            #FFFFFF;
    --color-dark:             #1E1E1E;
    --color-error:            #B03A2E;
    --color-success:          #3E7B4F;

    --font-body:              "Lato", Helvetica, Arial, sans-serif;
    --font-ui:                "Lato", Helvetica, Arial, sans-serif;

    /* ===== Formulaire ===== */
    --main-gap:               28px;
    --form-bg:                transparent;
    --form-padding:           0;
    --form-color:             var(--color-text);

    /* ===== Champs (style ligne fine) ===== */
    --input-padding:          10px 0 8px;
    --input-font-size:        15px;
    --input-font-weight:      300;
    --input-bg:               transparent;
    --input-line:             rgba(141, 113, 82, 0.45);
    --input-line-hover:       var(--color-primary);
    --input-line-focus:       var(--color-dark);
    --input-color:            var(--color-dark);
    --input-placeholder:      var(--color-primary-dark);
    --input-error:            var(--color-error);
    --textarea-height:        110px;
    --error-tip-color:        var(--color-error);

    /* ===== Bouton (contour fin) ===== */
    --btn-color:              var(--color-primary);
    --btn-border:             var(--color-primary);
    --btn-bg-hover:           var(--color-primary);
    --btn-color-hover:        var(--color-light);
    --btn-font:               var(--font-ui);

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

    /* ===== Messages de réponse ===== */
    --msg-bg:                 transparent;
    --msg-color:              var(--color-dark);
    --msg-font:               var(--font-body);
    --msg-border:             var(--color-primary);
    --msg-success:            var(--color-success);
    --msg-error:              var(--color-error);
    --msg-warning:            var(--color-primary);

    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);
}

/* 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;
}

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;
}


/* 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 — style ligne fine
   !important nécessaires : Divi impose fond, bordure et police sur les inputs */
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) !important;
    font-family:      var(--font-body) !important;
    font-size:        var(--input-font-size);
    font-weight:      var(--input-font-weight);
    letter-spacing:   0.02em;
    background:       var(--input-bg) !important;
    border:           0 !important;
    border-bottom:    1px solid var(--input-line) !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    color:            var(--input-color);
    outline:          none;
    transition:       border-color 0.3s ease, box-shadow 0.3s ease;
    appearance:       none;
}

/* La case RGPD est aussi un .wpcf7-form-control : pas de ligne dessous */
form.wpcf7-form p .wpcf7-form-control.wpcf7-acceptance,
form.wpcf7-form p .wpcf7-form-control.wpcf7-checkbox {
    border-bottom: 0 !important;
    padding: 0 !important;
}

form.wpcf7-form p textarea.wpcf7-form-control {
    height: var(--textarea-height);
    min-height: 44px;
    resize: vertical;
}

/* Placeholders en petites capitales espacées */
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);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 1;
}

form.wpcf7-form p input.wpcf7-form-control:not([type="submit"]):hover,
form.wpcf7-form p textarea.wpcf7-form-control:hover,
form.wpcf7-form p select.wpcf7-form-control:hover {
    border-bottom-color: var(--input-line-hover) !important;
}

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-bottom-color: var(--input-line-focus) !important;
    box-shadow: 0 1px 0 0 var(--input-line-focus) !important;
}

/* 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-bottom-color: var(--input-error) !important;
    box-shadow: 0 1px 0 0 var(--input-error) !important;
}

/* Neutralise le fond bleu/jaune de l'autofill Chrome sur les champs transparents */
form.wpcf7-form input:-webkit-autofill,
form.wpcf7-form input:-webkit-autofill:hover,
form.wpcf7-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--color-bg) inset !important;
    -webkit-text-fill-color: var(--input-color);
}

/* Messages de validation sous les champs */
form.wpcf7-form .wpcf7-not-valid-tip {
    font-family: var(--font-body) !important;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--error-tip-color);
}


/* 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 — contour fin, remplissage au survol */
form.wpcf7-form .wpcf7-submit,
form.wpcf7-form .wpcf7-submit:hover {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 12px 34px !important;
    margin: 0;
    border: 1px solid var(--btn-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--btn-color) !important;
    font-family: var(--btn-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.6;
    letter-spacing: 0.25em !important;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

form.wpcf7-form .wpcf7-submit:hover,
form.wpcf7-form .wpcf7-submit:focus-visible {
    background: var(--btn-bg-hover) !important;
    color: var(--btn-color-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: 0;
    padding: 8px 0 8px 14px;
    background-color: var(--msg-bg);
    color: var(--msg-color);
    font-family: var(--msg-font);
    font-size: 13px;
    line-height: 1.5;
    border: 0 solid var(--msg-border);
    border-left-width: 2px;
    border-radius: 0;
}

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: 0; }
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }

.wpcf7-form input[name="rgpd-acceptation"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 3px 0 0 0;
  border: 1px solid var(--check-border);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease, border-color .2s ease;
}
.wpcf7-form input[name="rgpd-acceptation"]:hover { border-color: var(--color-dark); }
.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: 4px; top: 0;
  width: 4px; height: 9px;
  border: solid var(--check-mark);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.wpcf7-form input[name="rgpd-acceptation"]:focus-visible { outline: 1px solid var(--color-dark); outline-offset: 3px; }

.wpcf7-form .wpcf7-list-item-label {
  font-family: var(--label-font) !important;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--label-color);
}
.wpcf7-form .wpcf7-list-item-label a {
  color: var(--link-color);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  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);
}