/* =========================================================================
   Widget SCANDY — Gravity Forms Styler
   Base de normalisation. Le gros du style vient des controls Elementor
   (injectés inline, scopés sous {{WRAPPER}}).
   ========================================================================= */

.scandy-gf-styler .gform_wrapper {
  margin: 0;
}

/* Les champs occupent toute la largeur par défaut (cohérent avec la charte). */
.scandy-gf-styler .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.scandy-gf-styler .gform_wrapper textarea,
.scandy-gf-styler .gform_wrapper select {
  width: 100%;
  font-family: var(--font-sans, 'Inter', sans-serif);
}

/* Bouton submit : réplique exacte du .btn.filled-gold des maquettes
   (pleine largeur centrée, angles droits, dégradé or, flèche animée). */
.scandy-gf-styler .gform_footer input[type=submit],
.scandy-gf-styler .gform_footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--onyx, #0b0b0b);
  background: var(--gold-grad, linear-gradient(135deg, #fff0aa 0%, #fbbf52 35%, #ba710e 70%, #fbbf52 100%));
  transition: .4s var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.scandy-gf-styler .gform_footer input[type=submit]:hover,
.scandy-gf-styler .gform_footer button:hover {
  filter: brightness(1.08);
}

/* Flèche des maquettes (trait + chevron, s'allonge au survol) : disponible
   parce que le submit est reconverti en <button> par le filtre PHP du widget. */
.scandy-gf-styler .gform_footer button .arrow {
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width .35s var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.scandy-gf-styler .gform_footer button .arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.scandy-gf-styler .gform_footer button:hover .arrow {
  width: 22px;
}

/* Liens à l'intérieur du formulaire (case RGPD, descriptions de champ) :
   couleur de la charte au lieu du bleu par défaut du navigateur. */
.scandy-gf-styler .gform_wrapper a {
  color: var(--champagne, #fbbf52);
  text-decoration: underline;
}
.scandy-gf-styler .gform_wrapper a:hover {
  color: var(--cream, #F4EFE4);
}

/* Placeholder en italique, comme le formulaire d'origine */
.scandy-gf-styler .gform_wrapper input::placeholder,
.scandy-gf-styler .gform_wrapper textarea::placeholder {
  font-style: italic;
}

/* Les textarea gardent une bordure complète (les autres champs n'ont
   qu'un soulignement) — le contrôle Elementor "Champs" garde la main s'il
   est explicitement modifié, cette règle ne fixe qu'un point de départ. */
.scandy-gf-styler .gform_wrapper textarea {
  border: 1px solid var(--line-dark, rgba(244, 239, 228, .16));
  padding: 14px;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 16px;
  resize: vertical;
}
.scandy-gf-styler .gform_wrapper textarea:focus {
  border-color: var(--champagne, #fbbf52);
}

/* Flèche de select personnalisée, comme le formulaire d'origine.
   Géométrie imposée en !important : le padding du contrôle Elementor
   « Champs » (12px 0, pensé pour les inputs soulignés) collait le texte
   au bord gauche, et la hauteur fixe héritée (38px) tronquait le bas
   des lettres. Le select gère sa propre boîte. */
.scandy-gf-styler .gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23fbbf52' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 36px 12px 12px !important;
  line-height: 1.4 !important;
  cursor: pointer;
}
.scandy-gf-styler .gform_wrapper select option {
  background: var(--onyx, #0b0b0b);
  color: var(--cream, #F4EFE4);
}

/* Notice éditeur quand aucun formulaire / GF inactif */
.scandy-gf-notice {
  padding: 24px;
  border: 1px dashed var(--champagne, #fbbf52);
  color: var(--grey, #8A8276);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  text-align: center;
  border-radius: 4px;
}

/* Autofill navigateur (Chrome/Safari) : jamais de bleu, on impose onyx + creme.
   L'astuce box-shadow inset est la seule façon fiable d'écraser le fond autofill. */
.scandy-gf-styler .gform_wrapper input:-webkit-autofill,
.scandy-gf-styler .gform_wrapper input:-webkit-autofill:hover,
.scandy-gf-styler .gform_wrapper input:-webkit-autofill:focus,
.scandy-gf-styler .gform_wrapper textarea:-webkit-autofill,
.scandy-gf-styler .gform_wrapper select:-webkit-autofill {
  -webkit-text-fill-color: var(--cream, #F4EFE4);
  -webkit-box-shadow: 0 0 0 1000px var(--onyx, #0b0b0b) inset;
  box-shadow: 0 0 0 1000px var(--onyx, #0b0b0b) inset;
  caret-color: var(--champagne, #fbbf52);
  transition: background-color 99999s ease-in-out 0s;
}

/* Couleur de saisie par défaut (si les controls Elementor ne la fixent pas)
   + curseur champagne, comme les maquettes. */
.scandy-gf-styler .gform_wrapper input:not([type=submit]):not([type=button]),
.scandy-gf-styler .gform_wrapper textarea,
.scandy-gf-styler .gform_wrapper select {
  color: var(--cream, #F4EFE4);
  caret-color: var(--champagne, #fbbf52);
}

/* Sélection du texte : champagne sur onyx, au lieu du bleu navigateur. */
.scandy-gf-styler ::selection {
  background: var(--champagne, #fbbf52);
  color: var(--onyx, #0b0b0b);
}

/* =========================================================================
   GF 2.7+ (thème « Orbital ») : ses variables CSS imposent un bleu
   (--gf-color-primary #204ce5) et un marine sur labels, choix radio/checkbox,
   consentement RGPD et descriptions. On écrase les variables dans le scope
   du widget, puis on force les couleurs texte par texte : plus rien ne peut
   ressortir en bleu.
   ========================================================================= */

.scandy-gf-styler .gform_wrapper,
.scandy-gf-styler .gform-theme,
.scandy-gf-styler .gform-theme.gform-theme--framework,
.scandy-gf-styler .gform-theme.gform-theme--foundation,
.scandy-gf-styler .gform-theme.gform-theme--orbital {
  --gf-color-primary: var(--cream, #F4EFE4);
  --gf-color-primary-contrast: var(--onyx, #0b0b0b);
  --gf-color-primary-darker: var(--cream, #F4EFE4);
  --gf-color-off-black: var(--cream, #F4EFE4);
  --gf-color-dark-grey: var(--grey-2, #B8B0A1);
  --gf-ctrl-label-color-primary: var(--cream, #F4EFE4);
  --gf-ctrl-label-color-secondary: var(--cream, #F4EFE4);
  --gf-ctrl-label-color-tertiary: var(--grey-2, #B8B0A1);
  --gf-ctrl-desc-color: var(--grey-2, #B8B0A1);
  --gf-ctrl-color: var(--cream, #F4EFE4);
  --gf-ctrl-choice-check-bg-color: var(--champagne, #fbbf52);
  --gf-ctrl-checkbox-check-color: var(--onyx, #0b0b0b);
  --gf-ctrl-radio-check-bg-color: var(--champagne, #fbbf52);
}

/* Labels de champs, choix radio/checkbox, consentement, sections : creme. */
.scandy-gf-styler .gform_wrapper .gform-field-label,
.scandy-gf-styler .gform_wrapper .gfield_label,
.scandy-gf-styler .gform_wrapper legend.gfield_label,
.scandy-gf-styler .gform_wrapper .gchoice label,
.scandy-gf-styler .gform_wrapper .gfield_radio label,
.scandy-gf-styler .gform_wrapper .gfield_checkbox label,
.scandy-gf-styler .gform_wrapper .gfield_consent_label,
.scandy-gf-styler .gform_wrapper .ginput_complex label,
.scandy-gf-styler .gform_wrapper .gsection_title {
  color: var(--cream, #F4EFE4) !important;
}

/* Descriptions, RGPD, compteurs, légende « champs requis » : gris perle. */
.scandy-gf-styler .gform_wrapper .gfield_description:not(.validation_message),
.scandy-gf-styler .gform_wrapper .gfield_consent_description,
.scandy-gf-styler .gform_wrapper .gform_required_legend,
.scandy-gf-styler .gform_wrapper .ginput_counter {
  color: var(--grey-2, #B8B0A1) !important;
}

/* Coches et radios : champagne au lieu du bleu. */
.scandy-gf-styler .gform_wrapper input[type=checkbox],
.scandy-gf-styler .gform_wrapper input[type=radio] {
  accent-color: var(--champagne, #fbbf52);
}

/* Astérisque des champs requis : champagne. */
.scandy-gf-styler .gform_wrapper .gfield_required {
  color: var(--champagne, #fbbf52) !important;
}

/* =========================================================================
   Sélecteur segmenté « .scandy-seg » (maquettes : .seg avec boutons).
   Usage : dans Gravity Forms, ajouter la classe CSS « scandy-seg » à un champ
   Boutons radio (Apparence > Classe CSS personnalisée). Aucun JS : le radio
   est masqué, son label devient le bouton, l'état coché prend le dégradé or.
   ========================================================================= */

.scandy-gf-styler .scandy-seg .gfield_radio {
  /* Neutralise les layouts « colonnes » de Gravity (grid/columns/gouttières) :
     dans un seg, c'est ce CSS qui commande, quel que soit le réglage GF. */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0 !important;
  column-count: unset !important;
  columns: unset !important;
  grid-template-columns: none !important;
  border: 1px solid var(--line-dark, rgba(244, 239, 228, .16));
}

.scandy-gf-styler .scandy-seg .gchoice {
  /* Largeurs égales sur toute la ligne, segments collés : aucune marge possible. */
  flex: 1 1 0 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Radio masqué mais focusable (accessibilité clavier préservée). */
.scandy-gf-styler .scandy-seg .gchoice input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.scandy-gf-styler .scandy-seg .gchoice label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 14px 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey-2, #B8B0A1) !important;
  cursor: pointer;
  transition: .3s var(--ease, cubic-bezier(.22, .61, .36, 1));
}

.scandy-gf-styler .scandy-seg .gchoice label:hover {
  color: var(--cream, #F4EFE4) !important;
}

/* Choix actif : le bouton or des maquettes (.seg button.active). */
.scandy-gf-styler .scandy-seg .gchoice input[type=radio]:checked + label {
  background: var(--gold-grad, linear-gradient(135deg, #fff0aa 0%, #fbbf52 35%, #ba710e 70%, #fbbf52 100%));
  color: var(--onyx, #0b0b0b) !important;
  font-weight: 600;
}

/* Focus clavier visible sur le segment. */
.scandy-gf-styler .scandy-seg .gchoice input[type=radio]:focus-visible + label {
  outline: 1px solid var(--champagne, #fbbf52);
  outline-offset: -1px;
}

@media (max-width: 520px) {
  .scandy-gf-styler .scandy-seg .gfield_radio { flex-direction: column !important; }
}

/* =========================================================================
   Select : la valeur choisie doit TOUJOURS être lisible.
   Fond onyx solide + texte creme imposés, plus fort que tout réglage
   Elementor enregistré ou variable GF.
   ========================================================================= */

.scandy-gf-styler .gform_wrapper select {
  color: var(--cream, #F4EFE4) !important;
  background-color: var(--onyx-2, #121212) !important;
  padding-left: 12px;
}

/* « Interface améliorée » Gravity (Chosen) : GF remplace le select natif par
   des <div> ; on leur applique les mêmes couleurs, sinon texte invisible. */
.scandy-gf-styler .gform_wrapper .chosen-container .chosen-single,
.scandy-gf-styler .gform_wrapper .chosen-container .chosen-choices {
  background: var(--onyx-2, #121212) !important;
  color: var(--cream, #F4EFE4) !important;
  border: 1px solid var(--line-dark, rgba(244, 239, 228, .16));
  border-radius: 0;
  box-shadow: none;
  height: auto;
  padding: 10px 12px;
}
.scandy-gf-styler .gform_wrapper .chosen-container .chosen-single span {
  color: var(--cream, #F4EFE4) !important;
}
.scandy-gf-styler .gform_wrapper .chosen-container .chosen-drop,
.scandy-gf-styler .gform_wrapper .chosen-container .chosen-results {
  background: var(--onyx-2, #121212);
  color: var(--cream, #F4EFE4);
  border-color: var(--line-dark, rgba(244, 239, 228, .16));
}
.scandy-gf-styler .gform_wrapper .chosen-container .chosen-results li.highlighted {
  background: var(--champagne, #fbbf52);
  color: var(--onyx, #0b0b0b);
}

/* Correctif : valeur du select invisible.
   Gravity Forms impose line-height = hauteur du champ (38px) via son thème
   natif. Combiné au padding vertical SCANDY, le texte sortait de la zone
   visible du select (qui, contrairement à un input, rogne son contenu).
   color-scheme: dark : la liste native s'ouvre en sombre (options creme
   lisibles) au lieu du panneau blanc de Windows. */
.scandy-gf-styler .gform_wrapper select {
  line-height: normal;
  color-scheme: dark;
}

/* Focus : jamais l'anneau bleu du navigateur. Comme les maquettes,
   le champ actif s'allume en champagne (bordure/soulignement). */
.scandy-gf-styler .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus,
.scandy-gf-styler .gform_wrapper textarea:focus,
.scandy-gf-styler .gform_wrapper select:focus {
  outline: none !important;
  border-color: var(--champagne, #fbbf52) !important;
  box-shadow: none;
}
.scandy-gf-styler .gform_wrapper input[type=checkbox]:focus-visible,
.scandy-gf-styler .gform_wrapper input[type=radio]:focus-visible {
  outline: 1px solid var(--champagne, #fbbf52);
  outline-offset: 2px;
}
.scandy-gf-styler .gform_footer input[type=submit]:focus-visible,
.scandy-gf-styler .gform_footer button:focus-visible {
  outline: 1px solid var(--cream, #F4EFE4);
  outline-offset: 2px;
}