/* ============================================================
   Thème des formulaires (.flexible-form) — popins, pages /contact,
   formulaires de bas de page. Chargé par base.html.twig APRÈS root.css :
   ces règles priment sur style.css / addons.css / objet.css.

   Charte : bleu primaire #00378b, accent lime #dce762, bleu pâle
   --ev-banner, Montserrat, radius 12-20px.
   ============================================================ */

/* ---------- 0bis. Bandeau /contact collé à la nav transparente ----------
   .flexible-form a un margin-block:10rem en desktop (style.min.css, prévu
   pour un formulaire inséré au milieu d'une page). Sur /contact (.form-page),
   .flexible-form est le TOUT PREMIER élément, juste sous la nav transparente
   (.navbar position:absolute) : ces 160px de marge écartent la bannière de
   la nav, qui se retrouve à flotter sur du blanc au lieu de l'image — d'où
   le logo/titre blancs invisibles. On annule seulement le haut ; l'espacement
   en bas de formulaire n'est pas concerné. */
.form-page .flexible-form {
  margin-top: 0;
}

/* form-layout.css force déjà `.form-page .flexible-form__title-wrapper > *`
   en blanc, mais le titre/chapô sont en réalité des petits-enfants (dans un
   `.container` intermédiaire) : le sélecteur ne les atteint pas, et h2/p ont
   leur propre couleur héritée du thème (texte gris foncé illisible sur la
   bannière sombre). On cible ici directement les bons éléments. */
.form-page .flexible-form__title-wrapper .flexible-form__title,
.form-page .flexible-form__title-wrapper .flexible-form__description {
  color: #fff !important;
}

/* Titre + chapô alignés à gauche sur la bannière /contact, comme le titre
   "Gammes de produits" (.intro__title) : le conteneur reste CENTRÉ dans la
   bannière (margin-inline:auto, même limite max-width que .container
   partout ailleurs sur le site) — seul le texte à l'intérieur est aligné à
   gauche (text-align:left). Un margin-inline:0 collerait le texte au bord
   réel de l'écran sur les grands moniteurs (>1620px), au lieu de suivre la
   même limite que le reste du site. Champs de saisie de l'étape restent
   resserrés (au lieu de pleine largeur) — spécifique à .form-page, les
   autres contextes (page produit, page générique) gardent leurs propres
   réglages déjà en place. */
.form-page .flexible-form__title-wrapper,
.form-page .flexible-form__title-wrapper .container,
.form-page .flexible-form__title-wrapper * {
  text-align: left;
}
/* form-layout.css impose déjà, en !important, `max-width:clamp(20rem,
   var(--ev-grid-preferred-width,80%), 62rem)` sur ce même sélecteur : une
   spécificité plus élevée ne suffit pas à passer devant un !important. On
   fournit donc la variable qu'il lit pour que ce clamp remplisse toute la
   largeur disponible (comme le .container standard de "Gammes de
   produits"), au lieu de se limiter à 80% de la bannière. */
.form-page .flexible-form__title-wrapper .container {
  --ev-grid-preferred-width: 100%;
  margin-inline: auto;
}
/* Spécificité relevée (3 classes) : bat volontairement les règles génériques
   .flexible-form__title::after / .flexible-form__description plus bas dans
   ce fichier, qui fixaient une largeur/alignement différents pour le tiret
   et le chapô. */
.form-page .flexible-form__title-wrapper .flexible-form__title::after {
  margin-inline: 0;
}
.form-page .flexible-form__title-wrapper .flexible-form__description {
  margin-inline: 0;
}
.form-page .flexible-form .form-control {
  max-width: 480px;
}
.form-page .flexible-form .form-control.ical-daterangepicker {
  max-width: none;
}
@media (max-width: 480px) {
  .form-page .flexible-form .form-control {
    max-width: none;
  }
}
/* Étape 2 (description des besoins, photos, choix illustrés) : mêmes
   proportions resserrées que l'étape 1, au lieu de s'étirer sur toute la
   largeur du formulaire. Le textarea et la zone de dépôt de fichiers
   suivent donc désormais .form-control ci-dessus (480px) au lieu d'en être
   exemptés ; la grille de cartes passe à une seule colonne pour rester
   lisible dans cette largeur resserrée. */
.form-page .flexible-form .form-check-group {
  max-width: 480px;
  grid-template-columns: 1fr;
}
/* Le bouton "Suivant"/"Enregistrer" reste sur .button-group{justify-content:
   space-between}, qui s'étend sur toute la largeur du pied de formulaire :
   une fois les champs resserrés à 480px ci-dessus, ça laissait un grand
   vide entre "Précédent" et "Suivant"/"Enregistrer". On resserre le groupe
   de boutons à la même largeur que les champs. */
.form-page .flexible-form .flexible-form__footer .button-group {
  max-width: 480px;
}


/* .flexible-form a margin-block:10rem en desktop (style.min.css) + son
   .flexible-form__container ajoute encore margin-block:3rem (--form-spacing) :
   les deux s'additionnent, d'où le très grand vide avant/après le formulaire
   (page produit) et avant l'objet suivant. Ramené à un espacement standard,
   une seule fois. */
.flexible-form {
  margin-block: var(--ev-space-xl, 3rem);
}
.flexible-form .flexible-form__container {
  margin-block: 0;
}

/* ---------- 1. La carte du formulaire ----------
   Hors page /contact (.form-page), un script existant (injectTitleWrapper,
   base.html.twig) déplace déjà .flexible-form__title-wrapper DANS
   .flexible-form__container au chargement (form-layout.css lui pose alors
   flex:1 0 100% + order:-1 — mais ce fichier n'est PAS chargé dans la popin
   iframe, donc on repose ici nos propres order/flex-basis, sans dépendre de
   form-layout.css, pour un résultat identique partout). Cet enfant passait
   seul sur sa ligne (flex-basis 100%) : on réduit sa largeur pour qu'il se
   place à côté du bloc étapes/champs au lieu d'être empilé — flex-wrap fait
   retomber en pile sur petit écran, sans media query supplémentaire côté
   largeur. Sur /contact (.form-page), le script ne déplace pas le titre : la
   bannière pleine largeur existante n'est pas affectée (sélecteur enfant
   direct). */
.flexible-form .flexible-form__container:has(> .flexible-form__title-wrapper) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* #flexibleFormWrapper n'a un flex-basis réduit (1 1 0 + min-width:0) que via
   form-layout.css, absent de la popin iframe : reposé ici pour ne pas en
   dépendre — sinon son width:100% (style.css) le fait occuper toute la ligne
   et repousser le bandeau titre sur la ligne suivante. */
.flexible-form .flexible-form__container:has(> .flexible-form__title-wrapper) > #flexibleFormWrapper {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
}
@media (max-width: 900px) {
  .flexible-form .flexible-form__container:has(> .flexible-form__title-wrapper) {
    flex-direction: column;
  }
  .flexible-form .flexible-form__container:has(> .flexible-form__title-wrapper) > #flexibleFormWrapper {
    flex-basis: auto;
    width: 100%;
  }
}
.flexible-form .flexible-form__container > .flexible-form__title-wrapper {
  order: -1;
  /* min/max relevés : à 380px max, "Demander un devis" passait sur 2 lignes
     (juste un peu trop étroit une fois le padding retiré). */
  flex: 0 1 clamp(300px, 34%, 440px);
  /* padding propre au bandeau (style.min.css ne pose que padding-block, 0 en
     inline) : le texte touchait le bord de l'encadré. Même traitement que
     .color-palette (objet "Une finition…") pour un cadrage cohérent. */
  padding: var(--ev-space-l, 1.75rem) var(--ev-space-m, 1.5rem);
  text-align: left;
}
.flexible-form .flexible-form__container > .flexible-form__title-wrapper .container,
.flexible-form .flexible-form__container > .flexible-form__title-wrapper p {
  text-align: left;
}
.flexible-form .flexible-form__container > .flexible-form__title-wrapper .container {
  max-width: none;
  margin-inline: 0;
}
.flexible-form .flexible-form__container > .flexible-form__title-wrapper .flexible-form__title::after {
  margin-inline: 0;
}
.flexible-form .flexible-form__container > .flexible-form__title-wrapper .flexible-form__description {
  max-width: 42ch;
  margin-inline: 0;
}

.flexible-form .flexible-form__container {
  background: #fff;
  padding: var(--ev-space-l) var(--ev-space-m-l);
}

/* titre + description d'intro du formulaire */
.flexible-form .flexible-form__title {
  font-weight: 700;
  letter-spacing: -0.015em;
}
.flexible-form .flexible-form__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--ev-space-2xs);
  margin-inline: auto;
  border-radius: 100vmax;
  background: var(--ev-secondary);
}
/* en pleine page le titre vit sur le bandeau bleu : tiret lime visible aussi */
.flexible-form .flexible-form__description {
  max-width: 70ch;
  margin-inline: auto;
}

/* ---------- 2. Étapes (multi-pages) ----------
   La barre horizontale à points (progression) est remplacée par un badge
   compact "Étape X sur Y" juste au-dessus du titre de l'étape (voir
   .flexible-form__step-subtitle plus bas). Markup conservé (utilisé par le
   JS pour marquer .active/.done) mais masqué visuellement. */

.flexible-form__steps {
  display: none;
}

/* Badge "Étape X sur Y" : point orange + libellé, réutilise le composant
   .subtitle déjà présent sur le site (style.css) pour la mécanique, mais
   habillé ici en point + texte plutôt qu'en pastille pleine. */
.flexible-form__step-subtitle {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.6rem;
}
/* .subtitle masque son ::before quand l'élément est :empty ; ici il l'est
   TOUJOURS par construction (le texte vient du ::after via attr()). */
.flexible-form__step-subtitle:empty::before {
  display: inline-block;
}
.flexible-form__step-subtitle::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ev-primary);
}
.flexible-form__step-subtitle::after {
  content: "Étape " attr(data-step-number);
  color: var(--ev-primary);
  font-weight: 700;
  font-size: var(--ev-step--1, 0.85rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- 3. Libellés & aides ---------- */

.flexible-form .form-label {
  font-weight: 600;
  font-size: var(--ev-step-0);
  color: var(--ev-heading-color);
}
.flexible-form .form-help {
  color: var(--ev-senary);
  font-size: var(--ev-step--1);
}

/* ---------- 4. Champs de saisie ---------- */

.flexible-form .form-control {
  --input-border-radius: 12px;
  --input-border-color: #dfe6f1;
  --input-bg: #fff;
  min-height: 48px;
  transition: border-color var(--ev-transition-fast) ease,
    box-shadow var(--ev-transition-fast) ease;
}
.flexible-form .form-control:hover:not(:focus):not(.invalid) {
  border-color: var(--ev-quaternary);
}
.flexible-form .form-control:focus {
  border-color: var(--ev-primary);
  box-shadow: 0 0 0 4px rgba(0, 55, 139, 0.12);
}
.flexible-form textarea.form-control {
  min-height: 120px;
}
/* champ invalide : liseré rouge + halo doux (cohérent avec le focus) */
.flexible-form .form-control.invalid,
.flexible-form .form-control.invalid:focus {
  border-color: var(--ev-danger);
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
}

/* tom-select au focus : même langage que les inputs */
.flexible-form .ts-wrapper.focus .ts-control,
.flexible-form .ts-wrapper.input-active .ts-control {
  border-color: var(--ev-primary);
  box-shadow: 0 0 0 4px rgba(0, 55, 139, 0.12);
}
.flexible-form .ts-control {
  border-radius: 12px;
  border-color: #dfe6f1;
}
.flexible-form .ts-dropdown {
  border-radius: 12px;
  border: 1px solid #e7ecf5;
  box-shadow: 0 18px 44px -18px rgba(2, 35, 78, 0.3);
  overflow: hidden;
}
.flexible-form .ts-dropdown .active {
  background: var(--ev-tertiary);
  color: var(--ev-primary);
}

/* FilePond (téléversement) : zone en pointillés, accent au survol */
.flexible-form .filepond--panel-root {
  background: var(--ev-tertiary);
  border: 2px dashed #c7d6ef;
  border-radius: 12px;
}
.flexible-form .filepond--root:hover .filepond--panel-root {
  border-color: var(--ev-quaternary);
}
.flexible-form .filepond--root .filepond--drop-label {
  background: transparent;
  color: var(--ev-primary);
  font-weight: 600;
}
.flexible-form .filepond--root::after {
  content: none; /* l'ancien filet bas n'a plus de raison d'être */
}

/* ---------- 5. Cartes radio / checkbox (choix illustrés) ----------
   .form-check-group{display:grid} de la source SCSS n'existe pas dans le
   style.min.css réellement servi (seule une variante mobile existe) : les
   cartes s'empilaient une par ligne.
   Liste verticale sur une seule colonne, quelle que soit la largeur d'écran. */
.flexible-form .form-check-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ev-space-s, 1rem);
}

.flexible-form .form-check-label {
  background: #fff;
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  /* .form-check est en display:flex ; sans ceci le label ne prend que la
     largeur de son texte et laisse un grand vide dans le reste de la
     colonne de la grille (illusion de gros espaces entre les cartes). */
  flex: 1;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease, background-color 0.2s ease;
}
.flexible-form .form-check:hover .form-check-label {
  border-color: var(--ev-quaternary);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(0, 55, 139, 0.3);
}
.flexible-form .form-check-text {
  padding: var(--ev-space-2xs) var(--ev-space-xs) var(--ev-space-xs);
}
.flexible-form .form-check-description {
  font-weight: 600;
}

/* état sélectionné : carte bleu primaire, texte blanc (langage existant),
   coche lime en haut à droite */
.flexible-form .form-check-input[type="radio"]:checked + .form-check-label,
.flexible-form .form-check-input[type="checkbox"]:checked + .form-check-label {
  background-color: var(--ev-primary);
  border-color: var(--ev-primary);
  box-shadow: 0 14px 32px -16px rgba(0, 55, 139, 0.5);
}

.flexible-form .form-check {
  position: relative;
  padding-left: 0;
}
.flexible-form .form-check-description {
  overflow-wrap: break-word;
}

/* Sélection simplifiée : le changement de couleur du bloc (blanc -> orange)
   suffit à indiquer la sélection — pas de case à cocher visible, pas de
   pastille ✓. Appliqué partout, y compris page produit et portfolio (qui
   avaient auparavant l'ancien indicateur case + pastille jaune). */
.flexible-form .form-check-input {
  position: absolute;
  opacity: 0;
  margin: 0;
  margin-right: -1rem;
  float: none;
}
/* navigation clavier : anneau visible quand la case cachée a le focus */
.flexible-form .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--ev-quaternary);
  outline-offset: 2px;
}

/* compteur de quantité dans les cartes */
.flexible-form .quantity-wrapper .quantity-btn {
  border: 1px solid #dfe6f1;
  background: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.flexible-form .quantity-wrapper .quantity-btn:hover {
  background: var(--ev-primary);
  border-color: var(--ev-primary);
  color: #fff;
}
.flexible-form .form-check-price {
  font-weight: 700;
}

/* ---------- 6. Récapitulatif ---------- */

.flexible-form .card--recap {
  background: var(--ev-tertiary);
  border: 1px solid #dbe7fb;
  border-radius: 16px;
  overflow: hidden;
}
.flexible-form .card--recap .card-header {
  background: transparent;
  border-bottom: 1px solid #dbe7fb;
  font-weight: 700;
  color: var(--ev-primary);
  padding: var(--ev-space-xs) var(--ev-space-s);
}
.flexible-form .card--recap .card-body {
  padding: var(--ev-space-s);
}
.flexible-form .card--recap .card-item + .card-item {
  border-top: 1px dashed #cdddf6;
  padding-top: var(--ev-space-2xs);
  margin-top: var(--ev-space-2xs);
}

/* ---------- 7. Pied de formulaire ---------- */

.flexible-form .flexible-form__footer {
  margin-top: var(--ev-space-m);
  padding-top: var(--ev-space-m);
}
.flexible-form .flexible-form__footer .btn-primary {
  padding-inline: var(--ev-space-l);
  box-shadow: 0 10px 24px -10px rgba(0, 55, 139, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.flexible-form .flexible-form__footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(0, 55, 139, 0.6);
}
.flexible-form .flexible-form__footer .button-group {
  display: flex;
  justify-content: space-between;
  gap: var(--ev-space-s);
}
.flexible-form .flexible-form__footer .button-group > :only-child {
  margin-left: auto;
}

/* mention reCAPTCHA discrète */
.flexible-form .flexible-form__recaptcha-info {
  margin-top: var(--ev-space-s);
  font-size: var(--ev-step--2);
  color: var(--ev-senary);
  text-align: left;
}

/* ---------- 8. Message de succès ---------- */

.flexible-form .alert-message--form {
  border: 1px solid #dbe7fb;
  border-radius: 16px;
  background: var(--ev-tertiary);
  padding: var(--ev-space-xl);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--ev-space-s);
}
.flexible-form .alert-message--form #circle {
  fill: var(--ev-primary);
}
.flexible-form .alert-message--form #check {
  fill: var(--ev-quaternary);
}

/* ---------- 9. Popin (modale iframe) ---------- */

[id^="formPopin"] .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(2, 35, 78, 0.55);
}
/* le bouton de fermeture flotte au-dessus de l'iframe, pastille blanche */
[id^="formPopin"] .modal-header {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  padding: 0;
  border: none;
  background: transparent;
}
[id^="formPopin"] .modal-header .btn-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e7ecf5;
  border-radius: 50%;
  box-shadow: 0 6px 18px -6px rgba(2, 35, 78, 0.35);
  opacity: 1;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
[id^="formPopin"] .modal-header .btn-close:hover {
  transform: rotate(90deg);
  background: #fff;
}
[id^="formPopin"] .modal-body {
  padding: 0;
}

/* loader d'iframe : spinner aux couleurs de la charte */
[id^="formPopin"] .modal-body.modal-loader {
  position: relative;
}
[id^="formPopin"] .modal-body.modal-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--ev-banner);
  border-top-color: var(--ev-primary);
  animation: ev-form-spin 0.8s linear infinite;
}
@keyframes ev-form-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 10. Responsive ---------- */

@media (max-width: 991.98px) {
  .flexible-form .flexible-form__container {
    padding: var(--ev-space-m) var(--ev-space-s);
    border-radius: 16px;
  }
  .flexible-form #recapCard {
    min-width: 100%;
  }
}