/* ============================================================
   SITE V2 — étape 3 : formulaires
   Chargée par _partials/site-v2.tpl (jamais sur le tunnel de commande).

   Champs, listes déroulantes, cases à cocher, boutons radio, libellés, aides,
   erreurs, groupe « mot de passe + MONTRER », cadre des pages connexion /
   inscription / mot de passe oublié / contact / compte client.
   Sélecteurs repris du thème (theme.css, ps_searchbar.css) à spécificité égale
   ou un cran au-dessus : chargée après eux, cette feuille l'emporte.

   Exclusions sans changer la spécificité (:not(:where(…)) compte pour 0) :
   - .home-v2 *  : blocs de l'accueil (home-v2.css y remet ses valeurs en inherit) ;
   - #header *   : la recherche du header garde son style (leosearch.css + header-v2.css) ;
   - .bootstrap-touchspin * : sélecteurs de quantité (hauteurs calées sur leurs flèches),
     réglés à part plus bas pour le panier ; celui de la fiche produit relève de fiche.css.

   Couleurs (contrastes WCAG calculés) :
   - bordure des champs #9C8A70 : 3,3:1 sur blanc, 3,1:1 sur crème (interface ≥ 3:1) ;
   - texte saisi #332720 : 14,5:1 ; aide #6B5B4E : 6,5:1 ; indication (placeholder) #7A6A5C : 5,2:1 ;
   - focus et cases cochées terracotta #B05315 : 5,1:1 ;
   - erreur rouge brique #9B2C22 : 7,6:1 sur blanc, 6,6:1 sur son fond #FBEDEA.
   ============================================================ */

/* ---------- Champs texte, e-mail, mot de passe, nombre, zone de texte ----------
   Thème : fond gris #ebebeb, texte gris clair #acaaa6, sans bordure. */

.form-control:not(:where(.home-v2 *, #header *, .bootstrap-touchspin *)) {
  height: auto;
  min-height: 2.75rem;                 /* 44 px : cible tactile */
  padding: 0.5625rem 0.875rem;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;                     /* 16 px : pas de zoom automatique sur iOS */
  line-height: 1.5;
  color: #332720;
  background-color: #FFFFFF;
  border: 1px solid #9C8A70;
  border-radius: 2px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:not(:where(.home-v2 *, #header *, .bootstrap-touchspin *)):hover {
  border-color: #6B5B4E;
}

.form-control:not(:where(.home-v2 *, #header *, .bootstrap-touchspin *)):focus {
  color: #332720;
  background-color: #FFFFFF;
  border-color: #B05315;
  outline: none;
  box-shadow: 0 0 0 1px #B05315, 0 0 0 4px rgba(176, 83, 21, 0.16);
}

textarea.form-control:not(:where(.home-v2 *, #header *)) {
  min-height: 8rem;
  resize: vertical;
}

/* Indication dans le champ (thème : #999 et #acaaa6, contraste insuffisant) */
.form-control:not(:where(.home-v2 *, #header *))::placeholder,
input:not(:where(.home-v2 *, #header *))::placeholder,
textarea:not(:where(.home-v2 *, #header *))::placeholder {
  color: #7A6A5C;
  opacity: 1;
}

/* Désactivé et lecture seule */
.form-control:not(:where(.home-v2 *, #header *, .bootstrap-touchspin *)):disabled,
.form-control:not(:where(.home-v2 *, #header *, .bootstrap-touchspin *))[readonly] {
  color: #6B5B4E;
  background-color: #F3EADA;
  border-color: #E2D6C2;
}

.form-control:not(:where(.home-v2 *, #header *, .bootstrap-touchspin *)):disabled {
  cursor: not-allowed;
}

/* Champ invalide, seulement après saisie (navigateurs récents ; ignoré ailleurs) */
.form-control:not(:where(.home-v2 *, #header *, .bootstrap-touchspin *)):user-invalid {
  border-color: #9B2C22;
}

/* ---------- Listes déroulantes ----------
   Thème : fond gris + flèche PNG noire (.form-control-select), hauteur 38 px. */

select.form-control:not([size]):not([multiple]):not(:where(.home-v2 *, #header *)) {
  height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
}

.form-control-select:not(:where(.home-v2 *, #header *)),
.custom-select:not(:where(.home-v2 *, #header *)) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2.75rem;
  padding: 0 2.5rem 0 0.875rem;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: #332720;
  background: #FFFFFF 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='%236B5B4E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 12px 8px;
  border: 1px solid #9C8A70;
  border-radius: 2px;
  cursor: pointer;
}

.custom-select:not(:where(.home-v2 *, #header *)):focus {
  border-color: #B05315;
  outline: none;
  box-shadow: 0 0 0 1px #B05315, 0 0 0 4px rgba(176, 83, 21, 0.16);
}

.custom-select:not(:where(.home-v2 *, #header *)):disabled {
  color: #6B5B4E;
  background-color: #F3EADA;
  cursor: not-allowed;
}

/* ---------- Libellés et textes d'aide ---------- */

label:not(:where(.home-v2 *, #header *)) {
  color: #332720;
}

.form-control-label:not(:where(.home-v2 *, #header *)) {
  font-weight: 600;
  color: #332720;
}

@media (min-width: 768px) {
  /* Centrage vertical face aux champs de 44 px */
  .form-group .form-control-label:not(:where(.home-v2 *, #header *)) {
    padding-top: 0.6875rem;
  }
}

/* Thème : #878787 (3,6:1, insuffisant) */
.form-control-comment:not(:where(.home-v2 *, #header *)) {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #6B5B4E;
}

/* ---------- Groupe de champs : mot de passe + « MONTRER » ----------
   Thème : bouton gris #acaaa6, et #878787 sur connexion / inscription (#authentication). */

.input-group.focus {
  outline: none;                       /* thème : contour gris clair posé par JS sur le groupe */
}

.input-group .input-group-btn > .btn[data-action="show-password"],
#authentication .input-group-btn > [data-action="show-password"] {
  height: 2.75rem;
  min-width: 5.5rem;
  padding: 0 1rem;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A1480F;                      /* 5,1:1 sur le sable */
  background: #F3EADA;
  border: 1px solid #9C8A70;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.input-group .input-group-btn > .btn[data-action="show-password"]:hover,
#authentication .input-group-btn > [data-action="show-password"]:hover {
  color: #8F4210;
  background: #EADFCB;
}

.input-group .input-group-btn > .btn[data-action="show-password"]:focus-visible,
#authentication .input-group-btn > [data-action="show-password"]:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

.input-group-addon:not(:where(.home-v2 *, #header *)) {
  color: #6B5B4E;
  background-color: #F3EADA;
  border-color: #9C8A70;
  border-radius: 2px;
}

/* Pièce jointe (contact) : bouton « Choisir le fichier » du plugin filestyle (thème : jaune).
   Le plugin pose aussi .input-group-btn : il faut battre « .input-group .input-group-btn > .btn »
   (texte blanc), d'où le préfixe .input-group. */
.input-group .group-span-filestyle > .btn-default {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding: 0 1rem;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #A1480F;
  background: #F3EADA;
  border: 1px solid #9C8A70;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}

.input-group .group-span-filestyle > .btn-default:hover {
  color: #8F4210;
  background: #EADFCB;
}

.group-span-filestyle:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

/* Le champ texte du plugin est désactivé par construction : il garde l'aspect d'un champ */
.bootstrap-filestyle .form-control:disabled {
  color: #332720;
  background-color: #FFFFFF;
  border-color: #9C8A70;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  cursor: default;
}

/* ---------- Cases à cocher (formulaires, consentements, filtres de catégorie) ----------
   Thème : carré de 15 px bordé #414141, coche grise. Les cases de couleur (span.color)
   des filtres ne sont pas touchées. */

.custom-checkbox input[type="checkbox"] + span:not(.color) {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  background: #FFFFFF;
  border: 2px solid #6B5B4E;           /* 6,5:1 */
  border-radius: 2px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* La vraie case (transparente, posée par le thème dans le coin du carré dessiné, ~13 px)
   doit couvrir tout le carré agrandi à 20 px : sinon une partie du carré ne coche rien
   (constaté sur les conditions générales du tunnel, 28/10). Reste transparente et cliquable. */
.custom-checkbox input[type="checkbox"] {
  top: 0;
  left: 0;
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.custom-checkbox input[type="checkbox"] + span:not(.color) .checkbox-checked {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  color: #FFF8F0;
}

.custom-checkbox input[type="checkbox"]:checked + span:not(.color) {
  background: #B05315;
  border-color: #B05315;
}

.custom-checkbox input[type="checkbox"]:hover + span:not(.color),
.custom-checkbox label:hover input[type="checkbox"] + span:not(.color) {
  border-color: #B05315;
}

/* Clavier : la vraie case est invisible, le contour est porté par le carré dessiné */
.custom-checkbox input[type="checkbox"]:focus + span:not(.color) {
  border-color: #6B5B4E;               /* thème : gris clair #acaaa6 au focus */
}

.custom-checkbox input[type="checkbox"]:checked:focus + span:not(.color) {
  border-color: #B05315;
}

.custom-checkbox input[type="checkbox"]:focus-visible + span:not(.color) {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

/* Filtres de catégorie : le lien voisin occupe 100 % - 30 px (ps_facetedsearch) ;
   case + espace doivent tenir dans ces 30 px, sinon le libellé passe à la ligne */
#search_filters .facet .facet-label .custom-checkbox input[type="checkbox"] + span:not(.color) {
  margin-right: 0.125rem;
}

.custom-checkbox label:not(:where(.home-v2 *, #header *)) {
  color: #332720;
  line-height: 1.45;
}

/* ---------- Boutons radio (civilité) ----------
   Thème : cercle bordé #acaaa6 (2,3:1), point jaune #FFC600. */

.custom-radio {
  background: #FFFFFF;
  border-color: #6B5B4E;
  transition: border-color 0.15s ease;
}

.custom-radio input[type="radio"]:checked + span {
  background-color: #B05315;
}

.custom-radio:has(input[type="radio"]:checked),
.radio-inline:hover .custom-radio {
  border-color: #B05315;
}

.custom-radio:has(input[type="radio"]:focus-visible) {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

.radio-inline:not(:where(.home-v2 *, #header *)) {
  color: #332720;
  cursor: pointer;
}

/* ---------- Erreurs et confirmations de formulaire ----------
   Thème : contour rouge vif #ff4c4c de 3 px, bandeaux rouges et verts saturés. */

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  outline: none;
  border-color: #9B2C22;
  box-shadow: 0 0 0 1px #9B2C22;
}

.has-danger .form-control:not(:where(.home-v2 *, #header *)) {
  border-color: #9B2C22;
}

.has-danger .form-control-label,
.has-danger .form-control-feedback {
  color: #9B2C22;
}

.form-group .help-block ul {
  margin: 0;
  padding: 0;
}

.form-group .help-block .alert-danger,
.form-group.has-error .help-block {
  color: #9B2C22;
}

.form-group .help-block .alert-danger {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  background: #FBEDEA;
  border: 0;
  border-left: 3px solid #9B2C22;
  border-radius: 2px;
}

/* Mot de passe oublié : message d'erreur ou de confirmation après envoi */
.ps-alert-error .item,
.ps-alert-success .item {
  background-color: #9B2C22;
  border: 1px solid #9B2C22;
  border-radius: 2px;
  overflow: hidden;
}

.ps-alert-error .item i,
.ps-alert-success .item i {
  border-color: #9B2C22;
}

.ps-alert-error .item i svg,
.ps-alert-success .item i svg {
  background-color: #9B2C22;
}

.ps-alert-error .item p,
.ps-alert-success .item p {
  color: #9B2C22;
  background-color: #FBEDEA;
}

.ps-alert-success .item,
.ps-alert-success .item i,
.ps-alert-success .item i svg {
  background-color: #3F6B45;
  border-color: #3F6B45;
}

.ps-alert-success .item p {
  color: #2F5434;                      /* 8,4:1 sur son fond */
  background-color: #EEF3EA;
}

/* ---------- Cadre des formulaires ----------
   Connexion, inscription, mot de passe oublié, pages du compte, contact.
   Thème : carte blanche avec ombre portée. */

.page-authentication #content,
.page-customer-account #content,
.page-contact #content.card {
  padding: 1.5rem 1rem;
  color: #6B5B4E;
  background: #FBF7EF;
  border: 1px solid #E2D6C2;
  border-radius: 2px;
  box-shadow: none;
}

@media (min-width: 768px) {
  .page-authentication #content,
  .page-customer-account #content,
  .page-contact #content.card {
    padding: 2.25rem 2rem;
  }
}

.page-authentication #content hr,
.page-customer-account #content hr {
  border-top-color: #E2D6C2;
}

.contact-form {
  color: #6B5B4E;                      /* thème : #878787 */
}

/* ---------- Tri des catégories : liste « Sélectionner » et son libellé ---------- */

.products-selection .sort-by {
  color: #6B5B4E;                      /* custom.css : jaune #ffc600 via span.hidden-sm-down */
}

.products-sort-order .select-title {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: #332720;
  background: #FFFFFF;
  border: 1px solid #9C8A70;
  border-radius: 2px;
  transition: border-color 0.15s ease;
}

.products-sort-order .select-title:hover,
.products-sort-order.open .select-title {
  border-color: #B05315;
}

.products-sort-order .select-title:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

.products-sort-order .select-title .material-icons {
  margin-left: 0.5rem;
  color: #6B5B4E;
}

.products-sort-order .dropdown-menu {
  padding: 0.25rem 0;
  background: #FFFFFF;
  border: 1px solid #E2D6C2;
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(51, 39, 32, 0.08);
}

.products-sort-order .select-list {
  font-size: 1rem;
  color: #332720;
}

.products-sort-order .select-list:hover,
.products-sort-order .select-list:focus {
  color: #332720;
  background: #F3EADA;                 /* thème : jaune #FFC600, texte blanc */
  outline: none;
}

.products-sort-order .select-list:focus-visible {
  box-shadow: inset 3px 0 0 #B05315;
}

/* ---------- Recherche hors header (page introuvable…) ----------
   ps_searchbar.css : fond gris #f1f1f1, sans bordure. Le champ du header n'est pas concerné. */

#search_widget form input[type="text"]:not(:where(#header *)) {
  min-height: 2.75rem;
  padding: 0.5625rem 3rem 0.5625rem 0.875rem;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: #332720;
  background: #FFFFFF;
  border: 1px solid #9C8A70;
  border-radius: 2px;
}

/* Page introuvable / recherche sans résultat : le formulaire hérite du décalage d'un menu
   déroulant (.popup-over .popup-content : left -100px) et le champ sortait du cadre, rogné.
   Il reste affiché à toutes les largeurs : !important et position static contre le thème, qui
   le masque sous 576 px (menu déroulant) et le repasse en display: block !important au survol
   dès 992 px (.popup-over:hover .popup-content : le bouton tombait sous le champ). */
.page-not-found #search_widget form {
  position: static;
  left: 0;
  display: flex !important;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

/* Icône d'ouverture du menu déroulant : inutile, le formulaire est toujours affiché
   (elle doublait la loupe du bouton) */
.page-not-found #search_widget > .popup-title {
  display: none;
}

.page-not-found #search_widget form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* Le bouton d'envoi, jusque-là hors cadre, redevient visible : sa loupe était positionnée
   en absolu par rapport au formulaire (ps_searchbar.css), on la remet dans le bouton */
.page-not-found #search_widget form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.page-not-found #search_widget form button[type="submit"] i {
  position: static;
  padding: 0;
}

#search_widget form input[type="text"]:not(:where(#header *))::placeholder {
  text-indent: 0;                      /* thème : retrait qui rogne l'indication */
  color: #7A6A5C;
}

#search_widget form input[type="text"]:not(:where(#header *)):focus {
  border-color: #B05315;
  outline: none;
  box-shadow: 0 0 0 1px #B05315, 0 0 0 4px rgba(176, 83, 21, 0.16);
}

/* ---------- Newsletter du pied de page (ps_emailsubscription) ---------- */

.block_newsletter form input[type="email"] {
  min-height: 2.75rem;
  font-size: 1rem;
  color: #332720;
  background: #FFFFFF;
  border: 1px solid #9C8A70;
  border-radius: 2px;
}

.block_newsletter form input[type="email"]:focus {
  border-color: #B05315;
  outline: none;
  box-shadow: 0 0 0 1px #B05315, 0 0 0 4px rgba(176, 83, 21, 0.16);
}

/* ---------- Quantité dans le panier ----------
   Couleurs seulement : les hauteurs restent celles du thème (calées sur les flèches). */

.product-line-grid-right .bootstrap-touchspin {
  box-shadow: none;
}

.product-line-grid-right .bootstrap-touchspin > .form-control {
  font-size: 1rem;
  color: #332720;
  border: 1px solid #9C8A70;
}

.product-line-grid-right .bootstrap-touchspin > .form-control:focus {
  border-color: #B05315;
  outline: none;
}

.product-line-grid-right .bootstrap-touchspin .btn-touchspin {
  color: #332720;
  border-color: #9C8A70;
}

.product-line-grid-right .bootstrap-touchspin .btn-touchspin:hover {
  background-color: #F3EADA;
}

/* ---------- Animations réduites ---------- */

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .custom-checkbox input[type="checkbox"] + span,
  .custom-radio,
  .input-group-btn > .btn,
  .products-sort-order .select-title {
    transition: none;
  }
}