/*
	Overrides pour le thème Gravity Forms

	But : définir ici les propriétés CSS personnalisées (custom properties)
	qui reflètent les variables utilisées par le framework thème de Gravity Forms.
	En surchargeant ces variables dans ce fichier (chargé après le CSS du plugin),
	vous pouvez changer couleurs / espacements / etc. sans dupliquer les règles du plugin.

	Consignes :
	- Conserver les noms de propriété identiques à ceux du plugin que vous souhaitez surcharger.
	- N'inclure que les variables nécessaires ; les autres utiliseront les valeurs par défaut du plugin.
	- Si une règle du plugin utilise une valeur littérale (pas une variable), il faudra surcharger la règle directement.

  Ce fichier contient les variables CSS personnalisées (custom properties) utilisées par Gravity Forms et exposées ici pour permettre aux designers de les modifier facilement. 
  Les sections ci-dessous sont ordonnées par thématiques : 
  - indicateurs d'étapes (progress), 
  - labels, 
  - boutons (next/prev/submit) avec leurs états, 
  - messages d'erreur/validation.

	Règles d'utilisation :
	 - Modifiez uniquement les variables nécessaires afin d'éviter des divergences majeures avec le framework du plugin.
   - Le bloc est scoped à ".gform-theme--api, .gform-theme--framework" pour n'affecter que le markup de Gravity Forms.
	 - Les commentaires en français expliquent que modifie chaque variable (texte / bordure / fond).
*/

.gform-theme--api, .gform-theme--framework {
    /* marqueur (évite bloc vide) */
    --gf-theme-scoped: 1;

    /* ------------------------------------------------------------------ */
    /* CHEAT‑SHEET : Modifier X => changer la variable Y (préférer style.css) */
    /* ------------------------------------------------------------------ */
    /* Indicateurs / progress */
    /* --gf-progressbar-bg           => var(--primary-default)      (barre remplie) */
    /* --gf-progressbar-track-bg     => var(--muted-1)              (track non rempli) */
    /* --gf-progress-step-bg         => var(--primary-default)      (pastille active) */
    /* --gf-progress-step-text       => var(--surface-color)        (texte pastille) */

    /* Labels & aides */
    /* --gf-label-color             => var(--text-color)           (texte des labels) */
    --gf-ctrl-label-font-weight-primary: bold; /* poids des labels des champs obligatoires */
    /* --gf-help-color              => var(--text-color) / fallback (texte d'aide) */

    /* Inputs / contrôles */
    /* --gf-input-bg                => var(--surface-color)        (fond des champs) */
    /* --gf-input-border            => var(--muted-2)              (bordure champ) */
    /* --gf-input-border-focus      => var(--primary-default)      (bordure au focus) */
    /* --gf-input-bg-disabled       => var(--muted-1)              (fond input désactivé) */

    /* Boutons (primaire / secondaire) */
    /* --gf-btn-primary-bg         => var(--primary-default)      (bg bouton primaire) */
    /* --gf-btn-primary-color      => var(--surface-color)        (texte bouton primaire) */
    /* --gf-btn-primary-bg-hover   => var(--primary-light)        (hover bouton primaire) */
    /* --gf-btn-secondary-bg       => var(--surface-color)        (bg bouton secondaire) */
    /* --gf-btn-secondary-border   => var(--muted-2)              (bordure secondaire) */

    /* Messages d'erreur / validation */
    /* --gf-error-bg               => var(--semantic-error)       (fond message d'erreur) */
    /* --gf-error-color            => var(--semantic-error)       (texte / bordure d'erreur) */
    /* --gf-success-bg             => var(--semantic-success)     (fond message réussite) */
    /* --gf-success-color          => var(--semantic-success-contrast) (texte réussite) */

    /* Remarques :
       - Modifiez les variables ci‑dessus dans style.css pour piloter globalement GF.
       - Chaque ligne ci‑dessous reprend les variables actives utilisées par GF
         et utilise en priorité les variables de style.css via var(--...).
    */
    /* ------------------------------------------------------------------ */
    --gf-color-primary: var(--primary-default);
    --gf-color-primary-rgb: 20, 64, 109;
    --gf-color-primary-contrast: var(--surface-color);
    --gf-color-primary-contrast-rgb: 255, 255, 255;
    --gf-color-primary-darker: var(--primary-dark);
    --gf-color-primary-lighter: var(--primary-light);

    --gf-color-secondary: var(--surface-color);
    --gf-color-secondary-rgb: 255, 255, 255;
    --gf-color-secondary-contrast: #112337;
    --gf-color-secondary-contrast-rgb: 17, 35, 55;
    --gf-color-secondary-darker: #f2f3f5;
    --gf-color-secondary-lighter: #f2f3f5;

    /* Variables actives mappées (utilisent les tokens du thème avec fallback) */
    --gf-progressbar-bg: var(--primary-default, #204ce5);
    --gf-progressbar-track-bg: var(--neutral-grey-inactive-bg, #f3f4f6);
    --gf-progress-step-text: var(--surface-color, #ffffff);
    --gf-progress-step-bg: var(--primary-default, #204ce5);
    --gf-progress-step-bg-active: var(--primary-default, #204ce5);
    --gf-progress-step-border: var(--muted-2, #d1d5db);
    --gf-field-pg-prog-bar-radius: 100px;
    --gf-field-pg-prog-bar-height: 20px;

    --gf-label-color: var(--text-color, #041625);
    --gf-help-color: var(--text-color, #6b7280);
    --gf-input-text-color: var(--text-color, #041625);

    --gf-input-bg: var(--surface-color, #ffffff);
    --gf-input-border: var(--muted-2, #d1d5db);
    --gf-input-border-focus: var(--primary-default, #204ce5);
    --gf-input-bg-disabled: var(--muted-1, #f3f4f6);
    --gf-input-text-disabled: var(--disabled-text, #9ca3af);

    --gf-ctrl-radio-check-size-md: 8px;

    --gf-ctrl-btn-text-transform: uppercase;
    --gf-ctrl-btn-font-weight: bold;
    --gf-ctrl-btn-letter-spacing: 0.125em;

    --gf-btn-primary-bg: var(--primary-default, #204ce5);
    --gf-btn-primary-color: var(--surface-color, #ffffff);
    --gf-btn-primary-bg-hover: var(--primary-light, #163ea6);
    --gf-btn-primary-focus-border: var(--primary-default, #204ce5);
    --gf-btn-primary-bg-disabled: var(--muted-3, #e5e7eb);
    --gf-btn-primary-color-disabled: var(--disabled-text, #9ca3af);

    --gf-btn-secondary-bg: var(--surface-color, #ffffff);
    --gf-btn-secondary-color: var(--text-color, #041625);
    --gf-btn-secondary-border: var(--muted-2, #d1d5db);
    --gf-btn-secondary-bg-hover: var(--muted-1, #f3f4f6);
    --gf-btn-secondary-color-hover: var(--text-color, #041625);
    --gf-btn-secondary-bg-disabled: var(--muted-1, #f3f4f6);

    --gf-error-bg: var(--semantic-error, #fff5f5);
    --gf-error-color: var(--semantic-error, #dc2626);
    --gf-error-border: var(--semantic-error, #dc2626);
    --gf-success-bg: var(--semantic-success, #f0fdf4);
    --gf-success-color: var(--semantic-success-contrast, #16a34a);

    --gf-field-padding: 0.75rem 1rem;
    --gf-field-border-radius: var(--control-radius, 5px);
    --gf-ctrl-size-md: 50px;

    /* ------------------------------------------------------------------ */
    /* 7) Mapping vers les variables master (valeurs par défaut)          */
    /*    — gardez ces lignes commentées ; décommentez si vous voulez     */
    /*    remplacer explicitement la valeur maître par une valeur thème.  */
    /* ------------------------------------------------------------------ */
    /* --gf-color-primary: #204ce5; */
    /* --gf-color-secondary: #ffffff; */
    /* --gf-ctrl-border-width: 1px; */
    /* --gf-ctrl-btn-font-size-md: 14px; */

    /* ------------------------------------------------------------------ */
    /* Rapatriement : variables pour les "image choices" (gf-field-img-choice) */
    /* Ces variables proviennent du fichier admin/theme-framework GF.       */
    /* Modifiez ici (ou dans style.css via les variables sémantiques) pour  */
    /* piloter largeur minimale/maximale, gap, bordures, radius, aspect-ratio */
    /* ------------------------------------------------------------------ */

    /* Largeurs / responsive */
    --gf-field-img-choice-min-width: var(--gf-field-img-choice-min-width, clamp(120px, 18vw, 220px));
    --gf-field-img-choice-max-width: var(--gf-field-img-choice-max-width, 420px);
    --gf-field-img-choice-gap: var(--gf-field-img-choice-gap, 1rem);

    /* Apparence des vignettes */
    --gf-field-img-choice-border: var(--gf-field-img-choice-border, var(--muted-2, #d1d5db)); /* couleur de bordure normale */
    --gf-field-img-choice-border-width: var(--gf-field-img-choice-border-width, 1px); /* épaisseur bordure */
    --gf-field-img-choice-border-radius: var(--gf-field-img-choice-border-radius, var(--control-radius, 5px)); /* arrondi */

    /* État sélectionné */
    --gf-field-img-choice-selected-border: var(--primary-default, #204ce5); /* bordure vignette sélectionnée */
    --gf-field-img-choice-selected-bg: var(--gf-field-img-choice-selected-bg, transparent); /* fond sélection (optionnel) */

    /* Image : ratio / comportement */
    --gf-field-img-choice-aspect-ratio: var(--gf-field-img-choice-aspect-ratio, 4 / 3); /* ratio affiché, utilisé dans aspect-ratio */
    --gf-field-img-choice-img-fit: var(--gf-field-img-choice-img-fit, cover); /* object-fit recommandé : cover | contain */

    /* Utilisation : override ciblé de la grille image-choice pour utiliser ces variables */
    /* (augmentez la priorité si nécessaire ou placez après les règles existantes) */
    /* ------------------------------------------------------------------ */

}
/* Legend / Label  */
.gform-theme--foundation legend { text-transform: uppercase; }

/* override + utilisation des variables ci‑dessus pour la grille et les images */
.gform-theme--framework .ginput_container_image_choice .gfield_radio,
.gform-theme--framework .ginput_container_image_choice .gfield_checkbox {
  display: grid; gap: var(--gf-field-img-choice-gap, 0.5rem);
  grid-template-columns: repeat( auto-fit, minmax( var(--gf-field-img-choice-min-width, clamp(120px,24vw,240px)), 1fr ) );
  align-items: start;
  /* garantit que la valeur 200px imposée par GF soit surchargée */
  width: 100%;
}

.gform-theme--framework .ginput_container_image_choice .gfield_radio .gchoice,
.gform-theme--framework .ginput_container_image_choice .gfield_checkbox .gchoice {
  width: 100%;
  justify-self: stretch;  align-self: stretch;
  border: var(--gf-field-img-choice-border-width, 1px) solid var(--gf-field-img-choice-border, var(--muted-2, #d1d5db));
  border-radius: var(--gf-field-img-choice-border-radius, var(--control-radius, 5px));
  background: var(--gf-field-img-choice-bg, transparent);
  overflow: hidden;
}

/* image sizing */
.gform-theme--framework .ginput_container_image_choice .gchoice img {
  display: block;
  width: 100%;
  aspect-ratio: var(--gf-field-img-choice-aspect-ratio, 6/3);
  object-fit: var(--gf-field-img-choice-img-fit, contain);
  object-position: center;
  height: auto;
}
.gform-theme--framework .gfield--type-image_choice .gfield-image-choice-wrapper-outer {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.gform-theme--framework .gfield--type-image_choice .gfield-image-choice-wrapper-inner input { display: none; }
.gform-theme--framework .gfield--type-image_choice .gfield-image-choice-wrapper-inner label { margin-left: 0; }
.gform-theme--framework .gfield--type-image_choice .gfield-image-choice-wrapper-inner {
  display: block;
}
/* état sélectionné (exemples) */
.gform-theme--framework .ginput_container_image_choice .gchoice.is-selected,
.gform-theme--framework .ginput_container_image_choice .gchoice input:checked + label,
.gform-theme--framework .ginput_container_image_choice .gchoice:has(input:checked) {
  /* border-color: var(--gf-field-img-choice-selected-border, var(--primary-default, #204ce5)); */
  background: var(--gf-field-img-choice-selected-bg, rgba(32,76,229,0.04));
}

/* fallback + spécificité si GF met une largeur inline ou règle forte */
.gform-theme--framework .ginput_container_image_choice .gchoice {
  max-width: 100% !important;
}

@media screen and (max-width: 1024px){
  .gform-theme--framework .ginput_container_image_choice .gfield_radio,
  .gform-theme--framework .ginput_container_image_choice .gfield_checkbox {
    display: grid; gap: var(--gf-field-img-choice-gap, 1rem);
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    /* garantit que la valeur 200px imposée par GF soit surchargée */
    width: 100%;
  }
  .gform-theme--framework .ginput_container_image_choice .gchoice img {
    aspect-ratio: 5 / 2;
  }
}
.gform_required_legend { display: none;}