/* FRVO - Funnel candidature panel de voix. Deltas au-dessus du socle partage
   mu-plugins/frvo-devis/assets/funnel.css (charge en dependance, jamais modifie).
   Toutes les classes propres au panel sont prefixees wp- pour ne jamais collisionner
   avec les wd-* du socle. Version 1.1.0 - 2026-07-28. */

/* ---- Le CF7 est masque pendant tout le parcours. A la derniere etape on ne laisse
   visibles que le bouton d'envoi natif, la mention legale et la zone de reponse :
   les questions, elles, sont posees par le funnel. ---- */
.wp-shell .wd-cf7 form > p,
.wp-shell .wd-cf7 form > h3,
.wp-shell .wd-cf7 form > ul,
.wp-shell .wd-cf7 form > div.wd-file-slot { display: none; }
.wp-shell .wd-cf7 form > p.wp-slot { display: block; }
.wp-shell .wd-cf7 form > p.wp-slot-legal { margin: 18px 0 0; }
.wp-shell .wd-cf7 { margin-top: 26px; }
.wp-shell .wpcf7-response-output { display: block; }

/* ---- Etape 1 : les conditions d'admission ---- */
.wp-gate { margin: 0 0 26px; }
.wp-gate-list { list-style: none; margin: 0; padding: 0; }
.wp-gate-list li {
  position: relative; margin: 0 0 12px; padding: 0 0 0 26px;
  font-size: 14.5px; line-height: 1.6; color: var(--muted); list-style: none;
}
.wp-gate-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
}
.wp-gate-list li strong { color: var(--txt); font-weight: 600; }
.wp-gate-note {
  margin: 18px 0 0; padding: 13px 15px; border-left: 3px solid var(--acc);
  background: var(--optbg); border-radius: 0 10px 10px 0;
  font-size: 14px; line-height: 1.6; color: var(--txt);
}

/* ---- Case d'acceptation : element de filtrage, pas un champ ordinaire.
   Case a GAUCHE du texte qu'elle valide, grande, ligne entiere cliquable.
   La case native reste dans le DOM, seulement masquee visuellement, pour
   garder le focus clavier et l'annonce par les lecteurs d'ecran. ---- */
.wp-field-accept { margin: 0 0 18px; }
.wp-shell .wp-accept {
  position: relative; display: flex; align-items: flex-start; gap: 15px;
  margin: 0; padding: 17px 19px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--optbg);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.wp-shell .wp-accept:hover { border-color: var(--acc); background: var(--card); }
.wp-shell .wp-accept.is-checked { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(0, 119, 217, .18); }
.wp-shell .wp-accept.is-err { border-color: #ff6b5e; background: rgba(255, 107, 94, .06); }
.wp-shell .wp-accept-input {
  position: absolute; left: 19px; top: 20px;
  width: 26px; height: 26px; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.wp-shell .wp-accept-box {
  flex: 0 0 auto; position: relative; width: 26px; height: 26px;
  border: 2px solid var(--muted); border-radius: 7px; background: transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.wp-shell .wp-accept:hover .wp-accept-box { border-color: var(--acc); }
.wp-shell .wp-accept-box::after {
  content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.wp-shell .wp-accept-input:checked ~ .wp-accept-box { background: #0077D9; border-color: #0077D9; }
.wp-shell .wp-accept-input:checked ~ .wp-accept-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.wp-shell .wp-accept-input:focus-visible ~ .wp-accept-box {
  border-color: var(--acc); box-shadow: 0 0 0 4px rgba(0, 119, 217, .5);
}
.wp-shell .wp-accept-txt { font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--txt); }
.wp-shell .wp-field-accept .wp-err { margin-left: 2px; }

/* ---- Marqueur « Facultatif » ---- */
.wp-shell .wp-chip {
  display: inline-block; margin-left: 9px; vertical-align: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px;
}

/* ---- Saisie : le theme colore input[type=text] en #303030 (specificite 0,1,1) et bat la
   regle .wd-text du socle (0,1,0), ce qui rend le texte saisi illisible sur fond sombre.
   On repasse devant avec .wp-shell .wd-text (0,2,0).
   Le texte d'exemple est volontairement plus clair que --muted et force a opacity:1 :
   certains themes sombres appliquent une opacite par defaut qui ecrase le contraste.
   Il reste nettement moins lumineux que le texte saisi, pour qu'on voie d'un coup d'oeil
   si le champ est rempli. ---- */
.wp-shell .wd-text { color: var(--txt); background: var(--optbg); }
.wp-shell .wd-text::placeholder,
.wp-shell .wd-textarea::placeholder,
.wp-shell .wd-cf7 .wd-input::placeholder { color: #b6b6c0; opacity: 1; }
body.scheme-light .wp-shell .wd-text::placeholder,
body.scheme-light .wp-shell .wd-textarea::placeholder,
body.scheme-light .wp-shell .wd-cf7 .wd-input::placeholder { color: #5f5f6b; opacity: 1; }

/* ---- Erreur de format ou manque, designee sous le champ concerne
   (le CF7 la signalerait dans un bloc masque) ---- */
.wp-shell .wp-err { display: none; margin: 8px 0 0; font-size: 13px; line-height: 1.5; font-weight: 500; color: #ff6b5e; }
.wp-shell .wd-text.wp-invalid, .wp-shell .wd-textarea.wp-invalid { border-color: #ff6b5e; }
.wp-shell .wd-opts.wp-opts-err .wd-opt { border-color: rgba(255, 107, 94, .55) !important; }

/* ---- Le parcours est long : on ne casse jamais la largeur en mobile ---- */
.wp-shell, .wp-shell .wd-card { max-width: 100%; overflow-wrap: break-word; }
.wp-shell .wd-opt-lb { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  /* Listes a libelles courts : on reste sur deux colonnes la ou le socle passerait a une seule.
     Sans cela, les ecrans langues, logiciels, paiements et delais font plus de deux hauteurs
     d'ecran sur un telephone. */
  .wp-shell .wd-opts.wp-opts-short { grid-template-columns: 1fr 1fr; gap: 9px; }
  .wp-shell .wp-opts-short .wd-opt { padding: 13px 12px; font-size: 14px !important; gap: 7px; }
  .wp-gate-list li { font-size: 14px; }
  .wp-shell .wp-accept { padding: 15px 16px; gap: 13px; }
  .wp-shell .wp-accept-input { left: 16px; top: 18px; }
  .wp-shell .wp-accept-txt { font-size: 14px; }
  .wp-shell .wd-cf7 { margin-top: 20px; }
}