/* KIPIZY — champs de formulaire
   Même design que les champs du SaaS KIPIZY (kipizy-saas-client, docs/spec/design-system.md § 4.5 et 5.2) :
   hauteur 44 px, rayon 12 px, filet #CCCCCC (0,5 px sur ordinateur, 1 px sur mobile), texte noir 15 px,
   focus bordure azur + anneau azur clair, erreur bordure grenat + message 12 px, listes : fond blanc, rayon 20,
   survol bleu très clair, choix en bleu souverain avec coche.
   Chargé après les styles de page : il remplace les variantes des styles de page. */

:root {
  --kz-hairline: .5px;
  --k-field-border: #CCCCCC;          /* contrôle au repos */
  --k-field-border-focus: #00CCFF;    /* azur */
  --k-field-ring: 0 0 0 3px #CCF5FF;  /* azur 20 % */
  --k-field-danger: #E41D0D;          /* grenat */
  --k-field-danger-ring: 0 0 0 3px #FCE8E7;
  --k-field-placeholder: #999999;
  --k-field-text: #000000;
  --k-field-radius: 12px;
  --k-field-pad: 16px;
  --k-field-font: 15px;
  --k-menu-radius: 20px;
  --k-menu-border: #E6E6E6;
  --k-menu-shadow: 0 12px 32px rgba(0, 20, 168, .12);
  --k-option-hover: #E6E8F6;          /* souverain 10 % */
  --k-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 1 px sur mobile (0,5 px y est presque invisible) ; 16 px pour éviter le zoom automatique de Safari iOS */
@media (max-width: 768px) {
  :root { --kz-hairline: 1px; --k-field-font: 16px; }
}

/* ---- Champs texte, e-mail, téléphone, zone de texte */
input.k-el.Input,
input.k-input,
.iti input.iti__tel-input,
textarea.k-el,
textarea.k-input,
.k-select-btn {
  box-sizing: border-box;
  border: var(--kz-hairline) solid var(--k-field-border) !important;
  border-radius: var(--k-field-radius) !important;
  background-color: #fff !important;
  font-family: var(--font_default) !important;
  font-size: var(--k-field-font) !important;
  font-weight: 400 !important;
  color: var(--k-field-text) !important;
  outline: none;
  transition: border-color 140ms var(--k-ease), box-shadow 140ms var(--k-ease);
}
input.k-el.Input,
input.k-input,
textarea.k-el,
textarea.k-input { padding-left: var(--k-field-pad) !important; padding-right: var(--k-field-pad) !important; }
.iti input.iti__tel-input { width: 100%; height: 100%; padding-right: var(--k-field-pad) !important; }

textarea.k-el,
textarea.k-input {
  padding-top: 12px !important; padding-bottom: 12px !important;
  line-height: 1.55; resize: vertical;
}

input.k-el.Input::placeholder,
input.k-input::placeholder,
.iti input.iti__tel-input::placeholder,
textarea.k-el::placeholder,
textarea.k-input::placeholder { color: var(--k-field-placeholder); opacity: 1; }

input.k-el.Input:focus,
input.k-input:focus,
.iti input.iti__tel-input:focus,
textarea.k-el:focus,
textarea.k-input:focus,
.k-select-btn:focus-visible,
.k-select.is-open .k-select-btn {
  border-color: var(--k-field-border-focus) !important;
  box-shadow: var(--k-field-ring) !important;
}

/* ---- Erreur (champ vérifié par forms.js) : bordure grenat + message sous le champ */
input.k-field-invalid.k-field-invalid,
.iti.k-field-invalid input.iti__tel-input { border-color: var(--k-field-danger) !important; }
input.k-field-invalid.k-field-invalid:focus,
.iti.k-field-invalid input.iti__tel-input:focus { box-shadow: var(--k-field-danger-ring) !important; }
.k-field-error {
  position: absolute; z-index: 5; display: block; margin: 0; box-sizing: border-box;
  font-family: var(--font_default); font-size: 12px; font-weight: 400; line-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto;
  color: var(--k-field-danger); text-align: left; animation: k-field-error-in 160ms var(--k-ease);
}
.k-field-error[hidden] { display: none; }
.k-field-error.k-field-hint { color: #666666; }
.k-field-suggest {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 500; color: #0014A8; cursor: pointer;
  border-bottom: var(--kz-hairline) solid #00CCFF;
}
.k-field-suggest:hover { color: #3343B9; border-bottom-color: #0014A8; }
@keyframes k-field-error-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* Sélecteur de pays du champ téléphone : même arrondi que le champ */
.iti__country-container { border-radius: var(--k-field-radius) 0 0 var(--k-field-radius); }
.iti .iti__selected-country { border-radius: var(--k-field-radius) 0 0 var(--k-field-radius); padding-left: 8px; }

/* ---- Menus déroulants : liste des pays et listes KIPIZY */
.iti__dropdown-content,
.k-select-list {
  background: #fff;
  border: var(--kz-hairline) solid var(--k-menu-border);
  border-radius: var(--k-menu-radius);
  box-shadow: var(--k-menu-shadow);
  font-family: var(--font_default);
}
.iti__dropdown-content { margin-top: 6px; overflow: hidden; }
.iti__search-input { font-family: var(--font_default); font-size: var(--k-field-font); color: #000; padding: 12px 16px; border: 0; border-bottom: var(--kz-hairline) solid var(--k-menu-border); outline: none; }
.iti__search-input::placeholder { color: var(--k-field-placeholder); }
.iti__country-list { padding: 6px; }
.iti__country { border-radius: 12px; padding: 8px 12px; min-height: 40px; box-sizing: border-box; font-size: 14px; color: #000; }
.iti__country.iti__highlight { background: var(--k-option-hover); }
.iti__dial-code { color: var(--k-field-placeholder); }

/* les menus ouverts passent au-dessus des champs suivants (chaque élément a son propre z-index) */
.k-el:not(.Popup):has(.iti__dropdown-content:not(.iti__hide)),
.k-el:not(.Popup):has(.k-select.is-open) { z-index: 50 !important; }
/* téléphone : la liste plein écran des pays passe devant les popups (fond grisé à 2002) */
.iti--fullscreen-popup.iti--container { z-index: 3000; }

/* ---- Liste déroulante KIPIZY (remplace le menu natif du système, la liste d'origine reste en coulisse) */
.k-select {
  position: relative;
  border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important;
  overflow: visible !important;
}
.k-select > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.k-select-btn {
  width: 100%; height: 100%; min-height: 44px; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px 0 var(--k-field-pad); text-align: left; cursor: pointer; line-height: 1.3;
}
.k-select-value { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-select.is-empty .k-select-value { color: var(--k-field-placeholder); }
.k-select-chevron { flex: none; width: 18px; height: 18px; fill: none; stroke: #0014A8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s var(--k-ease); }
.k-select.is-open .k-select-chevron { transform: rotate(180deg); }

.k-select-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 6px; list-style: none; box-sizing: border-box;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  /* fermée : retirée de la mise en page (sinon elle agrandit la zone de défilement des popups sous le dernier champ) */
  display: none;
}
.k-select--up .k-select-list { top: auto; bottom: calc(100% + 6px); }
.k-select.is-open .k-select-list { display: block; animation: k-select-in .16s var(--k-ease); }
.k-select--up.is-open .k-select-list { animation-name: k-select-in-up; }
@keyframes k-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes k-select-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.k-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 8px 12px; box-sizing: border-box; border-radius: 12px;
  font-size: 14px; line-height: 1.4; color: #000; cursor: pointer; user-select: none;
}
.k-select-option.is-active { background: var(--k-option-hover); }
.k-select-option[aria-selected="true"] { color: #0014A8; font-weight: 600; }
.k-select-option[aria-selected="true"]::after {
  content: ''; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .k-select-list, .k-select-chevron, .k-field-error { transition: none; animation: none !important; }
}

/* ---- Bouton "Confirmer" des popups "Être rappelé" : l’état désactivé était figé (opacité 25 %) dans le style de base ;
   l'état est piloté par appel.js (classe is-disabled) */
body [id="btn-appel-confirm-test"] { opacity: 1 !important; cursor: pointer !important; transition: background-color .2s ease, opacity .2s ease !important; }
body [id="btn-appel-confirm-test"].is-disabled { opacity: .25 !important; cursor: default !important; }
/* Bouton "Envoyer mon message" (contact) : même correction, état piloté par contact.js */
body .baTaHvaS { opacity: 1; transition: background-color .2s ease, opacity .2s ease; }
body .baTaHvaS.is-disabled { opacity: .25; cursor: default; }

/* Mention de consentement sous les boutons d'envoi (forms.js) */
.k-mention{flex-basis:100%;width:100%;max-width:100%;margin:4px 0 16px;font-family:var(--font_default);box-sizing:border-box;text-align:left}
.k-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;position:relative}
.k-check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.k-check-box{flex:0 0 20px;width:20px;height:20px;border:0.5px solid #000;border-radius:4px;background:#fff center/14px no-repeat;box-sizing:border-box;transition:background-color .15s,border-color .15s}
.k-check input:checked+.k-check-box{background-color:#0014A8;border-color:#0014A8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.k-check input:focus-visible+.k-check-box{box-shadow:0 0 0 3px #CCF5FF;border-color:#00CCFF}
.k-check-label{font-size:13px;line-height:20px;color:#000}