/* Cases a cocher, boutons radio et listes deroulantes aux couleurs du site.
   Feuille globale (public, espaces, back-office), chargee APRES news.css et
   legal.css. Le suffixe :not(.controle-natif) remonte la specificite au-dessus
   des regles de contexte existantes (.case-confirmation input, .visibility-options
   input, .news-toolbar select... dont certaines sont dans un <style> de page) ;
   la classe .controle-natif rend son aspect natif a un champ si besoin. */

/* Couleurs des controles : --controle-bord, --controle-bord-survol et
   --controle-fond-inactif, definies avec la palette dans style.css (clair et sombre). */

/* --- Cases a cocher et boutons radio -------------------------------------- */
input[type="checkbox"]:not(.controle-natif),
input[type="radio"]:not(.controle-natif) {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-width: 20px;
  /* Seule la marge de fin reste au contexte (.visibility-options, .vitrine-photo). */
  margin-block: 0;
  margin-inline-start: 0;
  padding: 0;
  vertical-align: -4px;
  background: var(--surface) no-repeat center / 14px 14px;
  border: 1.5px solid var(--controle-bord);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="radio"]:not(.controle-natif) { border-radius: 50%; }

input[type="checkbox"]:not(.controle-natif):hover:not(:disabled),
input[type="radio"]:not(.controle-natif):hover:not(:disabled) {
  border-color: var(--controle-bord-survol);
  box-shadow: 0 0 0 4px rgba(104, 26, 45, .08);
}

input[type="checkbox"]:not(.controle-natif):checked {
  background-color: var(--wine, #681a2d);
  border-color: var(--wine, #681a2d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not(.controle-natif):indeterminate {
  background-color: var(--wine, #681a2d);
  border-color: var(--wine, #681a2d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
input[type="radio"]:not(.controle-natif):checked {
  border-color: var(--wine, #681a2d);
  background-image: radial-gradient(circle, var(--wine, #681a2d) 0 4.5px, var(--surface) 5px);
  background-size: 100% 100%;
}

input[type="checkbox"]:not(.controle-natif):focus-visible,
input[type="radio"]:not(.controle-natif):focus-visible {
  outline: 2px solid var(--vin-texte);
  outline-offset: 2px;
}

input[type="checkbox"]:not(.controle-natif):disabled,
input[type="radio"]:not(.controle-natif):disabled {
  cursor: not-allowed;
  background-color: var(--controle-fond-inactif);
  border-color: var(--ligne-forte);
}
input[type="checkbox"]:not(.controle-natif):checked:disabled,
input[type="radio"]:not(.controle-natif):checked:disabled { opacity: .5; }

/* Un champ invalide apres interaction (case obligatoire non cochee). */
input[type="checkbox"]:not(.controle-natif):user-invalid,
input[type="radio"]:not(.controle-natif):user-invalid { border-color: #962d32; }

/* Libelle d'une case : la main suit toute la ligne cliquable. */
label:has(> input[type="checkbox"]:not(:disabled)),
label:has(> input[type="radio"]:not(:disabled)),
label:has(> span > input[type="checkbox"]:not(:disabled)) { cursor: pointer; }

/* --- Listes deroulantes --------------------------------------------------- */
/* Les listes a choix multiple ou a hauteur fixe gardent leur aspect natif.
   Seul padding-right est pose a cette specificite : les rembourrages et
   largeurs de contexte (.news-toolbar select, .formule-limites select) sont
   conserves, le chevron gardant toujours sa place. */
select:not([multiple]):not([size]):not(.controle-natif) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23681a2d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  color: var(--encre);
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:not([multiple]):not([size]):not(.controle-natif):hover:not(:disabled) {
  border-color: var(--controle-bord-survol);
}
select:not(.controle-natif):focus-visible {
  outline: 2px solid var(--vin-texte);
  outline-offset: 1px;
  border-color: var(--wine, #681a2d);
}
select:not([multiple]):not([size]):not(.controle-natif):disabled {
  cursor: not-allowed;
  color: var(--inactif-texte);
  background-color: var(--controle-fond-inactif);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3999a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:where(:root[data-theme="dark"]) select:not([multiple]):not([size]):not(.controle-natif) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23eba3b5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Ancien Edge : masque la fleche native. */
select::-ms-expand { display: none; }
select option { color: var(--encre); }

/* --- Contraste eleve (Windows) : on rend la main au systeme --------------- */
@media (forced-colors: active) {
  input[type="checkbox"]:not(.controle-natif),
  input[type="radio"]:not(.controle-natif),
  select:not([multiple]):not([size]):not(.controle-natif) {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"]:not(.controle-natif),
  input[type="radio"]:not(.controle-natif),
  select:not(.controle-natif) { transition: none; }
}