/* ══════════════════════════════════════════════════════════════
   LDNR — Ajustements custom pour les formulaires Contact Form 7
   ══════════════════════════════════════════════════════════════ */

/* ── Ligne Prénom / Nom sur la même ligne ───────────────────────
   Enrober les deux champs [text] dans :
     <div class="ldnr-form-row">
       <label>Prénom [text* prenom] </label>
       <label>Nom [text* nom] </label>
     </div>
*/
.ldnr-form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
/* CF7 passe le contenu de l'onglet "Form" par wpautop : les <label>
   séparés par une ligne vide se retrouvent chacun enveloppés dans leur
   propre <p> — .ldnr-form-row n'a donc pas les <label> comme enfants
   directs, mais des <p>. On cible les deux cas pour rester robuste
   si jamais l'espacement du texte du formulaire change un jour. */
.ldnr-form-row > label,
.ldnr-form-row > p {
  flex: 1 1 220px;
  /* !important : le thème (Kadence) donne une marge basse aux <p>, avec un
     reset "dernier enfant = 0" qui ne s'applique qu'au 2ᵉ <p> de la paire —
     d'où l'écart visible uniquement entre le 1ᵉʳ champ (Prénom) et Email,
     jamais entre Nom et Email. Sans !important cette règle perdait la
     bataille de spécificité contre celle du thème. */
  margin: 0 !important;
}

/* ── Documents supplémentaires progressifs (branche Recrutement) ──
   Chaque emplacement de fichier est enrobé dans :
     <div class="ldnr-doc-slot" data-slot="1">...[file doc-1]...</div>
   cf7-custom.js affiche progressivement les emplacements suivants au
   fur et à mesure qu'un fichier est sélectionné dans le précédent. */
.ldnr-doc-slot.is-hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   Habillage visuel — inspiré de .cta-form / .field dans la maquette
   (LDNR-handoff/ldnr/project/LDNR.html). Ne modifie aucune structure
   HTML : s'appuie uniquement sur les classes que CF7 génère lui-même
   (wpcf7-form-control, wpcf7-form-control-wrap…) — donc zéro risque
   sur le formulaire déjà fonctionnel (groupes conditionnels compris).
   ═══════════════════════════════════════════════════════════════ */

/* ── Label — reprend le style "petit label mono majuscule" du champ
   de la maquette (voir .field label). Le texte du label est un nœud
   direct de <label> (CF7 place le champ dans un <span> à côté), donc
   ce style ne touche QUE le texte, jamais le champ lui-même. */
.wpcf7-form label {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wpcf7-form .ldnr-form-row > label {
  margin-bottom: 0; /* la marge est déjà portée par .ldnr-form-row */
}
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.55rem;
}

/* ── Champs texte / email / select / textarea ───────────────────── */
.wpcf7-form input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="file"]),
.wpcf7-form select.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.8em 1em;
  /* 65% opaque (au lieu de --color-nav-tint, trop translucide pour un champ
     de saisie) — suit quand même le thème dark/light via --color-surface. */
  background: color-mix(in srgb, var(--color-surface) 65%, transparent);
  border: 1px solid var(--color-nav-border);
  border-radius: 14px;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  outline: none;
  /* Pas de "background" dans la transition : sur un select, un focus/clic
     changeait le fond ET on l'animait, ce qui provoquait un flash visible
     (fond blanc natif du navigateur → transition vers le fond du thème).
     border-color/box-shadow restent animés (focus), tout le reste change
     instantanément. */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.wpcf7-form textarea.wpcf7-form-control {
  /* CF7 donne rows="10" par défaut à un [textarea], ce qui fixe une hauteur
     intrinsèque que min-height (un plancher) ne peut pas réduire — d'où la
     zone de texte "énorme" par défaut. Une vraie "height" prend le dessus. */
  height: 110px;
  min-height: 80px;
  resize: vertical;
}

/* Flèche custom sur les select (masque la flèche native) */
.wpcf7-form select.wpcf7-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.4em;

  /* La liste déroulante NATIVE (le popup d'options à l'ouverture) n'est
     pas stylable via background/color classiques — le navigateur la
     dessine avec ses couleurs système, d'où le fond blanc/texte noir
     malgré tout le CSS ci-dessus. color-scheme indique au navigateur
     dans quel thème on est : il peint alors le popup en clair/sombre
     directement, sans flash ni décalage. */
  color-scheme: dark;
}
[data-theme="light"] .wpcf7-form select.wpcf7-form-control {
  color-scheme: light;
}
/* Renfort pour les navigateurs qui respectent le style des <option>
   (Firefox notamment) — sans effet néfaste sur les autres. */
.wpcf7-form select.wpcf7-form-control option {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* ── Champ fichier — corrige le texte "Aucun fichier choisi" illisible
   (héritait de la couleur par défaut du navigateur, jamais du thème).
   ::file-selector-button est un standard CSS moderne (Chrome/Firefox/
   Safari ≥ 15.4) qui permet de restyler le bouton natif — le texte
   d'état ("Aucun fichier choisi") suit alors la couleur de l'input. */
.wpcf7-form input[type="file"].wpcf7-form-control {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.wpcf7-form input[type="file"]::file-selector-button {
  background: var(--color-nav-tint);
  border: 1px solid var(--color-nav-border);
  border-radius: 999px;
  color: var(--color-text);
  padding: 0.5em 1.1em;
  margin-right: 0.75em;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wpcf7-form input[type="file"]::file-selector-button:hover {
  background: var(--color-nav-hover);
  border-color: var(--color-accent);
}

/* ── Case RGPD (acceptance) ─────────────────────────────────────── */
.wpcf7-form .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin: 1.5rem 0;
}
.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: 0;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-muted);
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
  accent-color: var(--color-accent);
}
.wpcf7-form .wpcf7-acceptance a {
  color: var(--color-text);
  text-decoration: underline;
}

/* Deux cases consecutives (RGPD obligatoire + consentement commercial
   facultatif).

   CF7 enveloppe chaque case dans son propre <p> : la marge verticale de
   ce <p> s'ajoute aux 1.5rem de .wpcf7-acceptance, d'ou l'ecart
   demesure. Les deux cases n'etant pas freres directs, un selecteur
   .wpcf7-acceptance + .wpcf7-acceptance ne matche pas — il faut passer
   par le <p>.

   On neutralise donc la marge du <p>, et on refixe l'ecart sur la case
   elle-meme. Les trois selecteurs couvrent les formes de DOM possibles
   selon que CF7 wrappe dans un <p>, dans .wpcf7-form-control-wrap, ou
   ni l'un ni l'autre (auto-p desactive). */
.wpcf7-form p:has(.wpcf7-acceptance) {
  margin-block: 0;
}
.wpcf7-form p:has(.wpcf7-acceptance) + p:has(.wpcf7-acceptance) .wpcf7-acceptance,
.wpcf7-form .wpcf7-form-control-wrap:has(.wpcf7-acceptance) + .wpcf7-form-control-wrap:has(.wpcf7-acceptance) .wpcf7-acceptance,
.wpcf7-form .wpcf7-acceptance + .wpcf7-acceptance {
  margin-top: 0.7rem;
}

/* Solution deterministe : les deux cases sont encadrees a la main dans
   l'editeur CF7 par <div class="ldnr-consents">. On ne depend plus de
   la facon dont CF7 enveloppe ses champs (auto-<p>, control-wrap...),
   qui varie selon la version et les reglages du formulaire.

   Voir forms/README-consentement.md, section 1. */
.wpcf7-form .ldnr-consents {
  margin: 1.5rem 0;
}
/* Les <p> et <br> inseres automatiquement par CF7 sont neutralises.
   On masque les <br> plutot que de leur donner line-height: 0 : cette
   propriete est heritee, et elle ecrasait la hauteur de ligne du texte
   des cases, dont les lignes se chevauchaient. */
.wpcf7-form .ldnr-consents p {
  margin: 0;
}
.wpcf7-form .ldnr-consents br {
  display: none;
}
.wpcf7-form .ldnr-consents .wpcf7-acceptance {
  margin: 0;
}
/* Hauteur de ligne explicite : le texte est long et en petit corps,
   il lui faut de l'air pour rester lisible. */
.wpcf7-form .ldnr-consents .wpcf7-acceptance label {
  line-height: 1.5;
}
/* Ecart entre la 1re et la 2e case — la seule valeur a ajuster. */
.wpcf7-form .ldnr-consents .wpcf7-form-control-wrap ~ .wpcf7-form-control-wrap .wpcf7-acceptance,
.wpcf7-form .ldnr-consents p + p .wpcf7-acceptance,
.wpcf7-form .ldnr-consents .wpcf7-acceptance + .wpcf7-acceptance {
  margin-top: 0.75rem;
}

/* ── Bouton d'envoi — reprend .cta-submit de la maquette ────────── */
.wpcf7-form input[type="submit"] {
  margin-top: 0.5rem;
  padding: 0.7em 1.3em;
  background: var(--color-text);
  color: var(--color-bg);
  border: none;
  border-radius: 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
}
/* !important : Kadence (thème parent) réinitialise le fond des
   input[type=submit] au survol avec une règle plus spécifique que la
   nôtre — sans ça le fond retombait à transparent (d'où le bouton qui
   "disparaissait" au hover, sans aucune transition puisque rien ne
   pilotait ce changement côté cf7-custom.css). */
.wpcf7-form input[type="submit"]:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-bg) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-accent) 50%, transparent);
}
.wpcf7-form input[type="submit"].wpcf7-submit.has-spinner[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* ── États d'erreur / validation ─────────────────────────────────── */
.wpcf7-form .wpcf7-not-valid {
  border-color: #ff6b6b !important;
}
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #ff6b6b;
  text-transform: none;
  letter-spacing: normal;
}
.wpcf7-form .wpcf7-response-output {
  margin-top: 1.5rem;
  padding: 0.9em 1.2em;
  border-radius: 12px;
  font-size: 0.85rem;
  border: 1px solid var(--color-nav-border);
  color: var(--color-text-muted);
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-text);
}
/* « unaccepted » est l'etat renvoye par CF7 quand une case obligatoire
   n'est pas cochee — distinct de « invalid ». Sans lui, le message
   heritait du gris discret de la regle de base et passait inapercu. */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  border-color: color-mix(in srgb, #ff6b6b 40%, transparent);
  color: #ff6b6b;
}

/* Message d'erreur sous une case a cocher : .wpcf7-acceptance etant un
   conteneur flex, le repere doit passer en pleine largeur sous la case
   plutot que de se tasser a cote du texte. */
.wpcf7-form .ldnr-consents .wpcf7-not-valid-tip {
  flex-basis: 100%;
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
}