/* =========================================================
   SNTS — forms.css (Contact Form 7)
   Objectifs :
   - 1 grand panel blanc qui contient tout le form
   - labels dans l'input puis flottants au-dessus (focus + rempli)
   - desktop : nom + email (2 colonnes), puis objet, puis message
   - mobile : 1 colonne (nom > email > objet > message)
   - bouton submit full width sous le message
   - pas de contour bleu focus (outline)
   ========================================================= */

   #contact .wpcf7{
    /* max-width: 980px; */
    margin-top: 10px;
    font-family: var(--font-sans);
  }
  
  /* ===== Panel blanc global ===== */
  #contact .wpcf7 form{
    background: #fff;
    border: var(--bd);
    border-radius: 26px;
    box-shadow: var(--shadow-strong);
    padding: clamp(18px, 2.2vw, 28px);
  }
  
  /* Si tu utilises mon wrapper .ls-cf7-panel */
  #contact .ls-cf7-panel{
    width: 100%;
  }
  
  /* ===== Grid layout ===== */
  #contact .ls-cf7-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  
  /* largeur contrôlée via classes */
  #contact .ls-half{ grid-column: span 1; }
  #contact .ls-full{ grid-column: 1 / -1; }
  
  @media (max-width: 700px){
    #contact .ls-cf7-grid{
      grid-template-columns: 1fr;
      gap: 14px;
    }
    #contact .ls-half,
    #contact .ls-full{
      grid-column: 1 / -1;
    }
  }
  
  /* CF7 met souvent des <p> autour : on neutralise pour que la grille marche */
  #contact .ls-cf7-grid > p{
    margin: 0 !important;
  }
  #contact .ls-cf7-grid br{
    display: none !important;
  }
  
  /* ===== Champ + floating label ===== */
  #contact .ls-field{
    position: relative;
    display: block;
  }
  
  /* Inputs / textarea / select */
  #contact .wpcf7 input[type="text"],
  #contact .wpcf7 input[type="email"],
  #contact .wpcf7 input[type="tel"],
  #contact .wpcf7 input[type="url"],
  #contact .wpcf7 input[type="number"],
  #contact .wpcf7 textarea,
  #contact .wpcf7 select{
    width: 100%;
    border-radius: 18px;
    border: var(--bd);
    background: #fffdf7;
    color: var(--text);
    font-weight: 800;
  
    /* padding “floating label” (label à l’intérieur) */
    padding: 18px 14px 12px;
  
    box-shadow: 4px 4px 0 rgba(11,11,15,.10);
    transition: transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed);
  }
  
  /* Message plus grand */
  #contact .wpcf7 textarea{
    min-height: 190px;
    resize: vertical;
    padding-top: 22px;
  }
  
  /* Le label flottant */
  #contact .ls-field .ls-label{
    position: absolute;
    left: 14px;
    top: 32px;
    display: inline-block;
      font-weight: 1000;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
  
    color: rgba(11,11,15,.62);
    pointer-events: none;
  
    transform-origin: left top;
    transition: transform var(--speed), top var(--speed), opacity var(--speed), color var(--speed), background var(--speed);
  }
  
  /* Quand focus : label monte */
  #contact .ls-field:focus-within .ls-label{
    top: -10px;
    transform: scale(.88);
    color: var(--text);
    opacity: 1;
  }
  
  /* Quand rempli : label reste en haut
    - placeholder " " requis (un espace)
    - fallback : valid (utile si placeholder-shown est capricieux)
  */
  #contact .wpcf7 input:not(:placeholder-shown) + .ls-label,
  #contact .wpcf7 textarea:not(:placeholder-shown) + .ls-label,
  #contact .wpcf7 input:valid + .ls-label,
  #contact .wpcf7 textarea:valid + .ls-label{
    top: -10px;
    transform: scale(.88);
    color: var(--text);
    opacity: 1;
  }

/* état flottant : focus OU rempli (placeholder-shown) */
#contact .ls-field:focus-within .ls-label,
#contact .ls-field:has(input:not(:placeholder-shown)) .ls-label,
#contact .ls-field:has(textarea:not(:placeholder-shown)) .ls-label,
#contact .ls-field:has(input:-webkit-autofill) .ls-label{
  top: 10px;
  transform: scale(.88);
  color: var(--text);
  opacity: 1;
  background: linear-gradient(180deg,#fff 0%, #fff 50%, #fffdf7 50%, #fffdf7 100%);;
  padding: 0 8px;
  /* border: var(--bd-soft); */
  /* border-radius: 999px; */
  /* box-shadow: 3px 3px 0 rgba(11,11,15,.10); */
}
/* état flottant : focus  */
#contact .ls-field:focus-within .ls-label{
  background: #fff ;
}

  
  /* ===== Focus champ (SANS outline bleu) ===== */
  #contact .wpcf7 input:focus,
  #contact .wpcf7 textarea:focus,
  #contact .wpcf7 select:focus{
    outline: none !important;         /* <= supprime le contour bleu */
    box-shadow: 7px 7px 0 rgba(11,11,15,.14);
    transform: translate(-1px,-1px);
    background: #fff;
    border-color: rgba(11,11,15,.9);  /* léger renfort visuel */
  }
  
  /* (Optionnel) si tu veux aussi virer le ring WebKit sur mobile */
  #contact .wpcf7 input,
  #contact .wpcf7 textarea,
  #contact .wpcf7 select{
    -webkit-tap-highlight-color: transparent;
  }
  
  /* ===== Actions ===== */
  #contact .ls-cf7-actions{
    grid-column: 1 / -1;
    display:flex;
    margin-top: 6px;
  }

  #contact .ls-cf7-actions p{
    width: 100%;
  }
  
  /* Bouton submit FULL WIDTH */
  #contact .wpcf7 input[type="submit"]{
    appearance: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 999px;        /* plus “bloc” que pill */
    background: var(--page-accent);
    color: var(--text);
    border: var(--bd);
    font-size: 16px !important;
    font-weight: 1000;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
  }
  
  #contact .wpcf7 input[type="submit"]:hover{
    transform: translate(-2px,-2px);
    box-shadow: var(--shadow-strong);
    filter: saturate(1.05);
  }
  
  /* ===== Messages CF7 ===== */
  #contact .wpcf7 .wpcf7-response-output{
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 18px;
    border: var(--bd);
    box-shadow: var(--shadow);
    background: #fff;
    font-weight: 900;
  }
  
  #contact .wpcf7 .wpcf7-not-valid-tip{
    display:block;
    margin-top: 5px;
    margin-left: 10px;
    font-weight: 900;
    font-size: 10px;
    color: #d4002a;
    text-transform: none;
    letter-spacing: normal;
  }
  
  #contact .wpcf7 form.invalid .wpcf7-response-output{ background: #ffe3e8; }
  #contact .wpcf7 form.sent .wpcf7-response-output{ background: #dbffe9; }
  
  /* Spinner CF7 plus discret */
  #contact .wpcf7 .wpcf7-spinner{
    margin-left: 10px;
  }
  

/* ===== Select (Objet) — SNTS (corrigé) ===== */
#contact .wpcf7 select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;

  width: 100%;
  border-radius: 18px;
  border: var(--bd);
  background: #fffdf7;
  color: var(--text);
  font-weight: 800;

  padding: 18px 46px 12px 14px;
  box-shadow: 4px 4px 0 rgba(11,11,15,.10);
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed);

  /* flèche custom */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%),
    linear-gradient(to right, rgba(11,11,15,.10), rgba(11,11,15,.10));
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 44px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 18px;
  background-repeat: no-repeat;
}

/* Etat "pas choisi" => placeholder (donc invalid) : texte plus discret */
#contact .wpcf7 select:invalid{
  color: rgba(11,11,15,.55);
}

/* Focus : pas de contour bleu */
#contact .wpcf7 select:focus{
  outline: none !important;
  box-shadow: 7px 7px 0 rgba(11,11,15,.14);
  transform: translate(-1px,-1px);
  background: #fff;
  border-color: rgba(11,11,15,.9);
}

/* Cache l'option vide dans la liste déroulante (plus de "choix vide" moche) */
#contact .wpcf7 select option[value=""]{
  display: none;
}

/* Label flottant SEULEMENT si focus OU si une vraie option est choisie */
#contact .ls-field:has(select:focus) .ls-label,
#contact .ls-field:has(select:valid) .ls-label{
  top: 10px;
  transform: scale(.88);
  color: var(--text);
  opacity: 1;
  background: linear-gradient(180deg,#fff 0%, #fff 50%, #fffdf7 50%, #fffdf7 100%);
  padding: 0 8px;
}

/* Quand focus, pastille bien blanche */
#contact .ls-field:has(select:focus) .ls-label{
  background: #fff;
}