/* ============================================================
   DealFabric DS — Composant · Bloc contact et formulaire
   ------------------------------------------------------------
   MODE ALB : df-formbox se pose sur la COLOR SECTION. Son
   .entry-content-wrapper devient la boîte encadrée, et les deux
   colonnes qu il contient en forment les deux moitiés.

     Color Section : df df-sec df-rule df-formbox
     Colonne 1     : df-formbox-aside   (accroche + visuel)
     Colonne 2     : (rien)             (le formulaire)

   Le chapeau va dans sa propre section au-dessus, comme partout
   ailleurs : posé ici, il serait enfermé dans le cadre.

   Les champs sont ciblés par leur BALISE, pas par les classes du
   plugin. Le style tient donc aussi bien sur Gravity Forms que
   sur un formulaire écrit à la main.
   ============================================================ */


/* ------------------------------------------------------------
   La boîte
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Variante COLONNE — la boite sur une seule colonne
   ------------------------------------------------------------
   C est ce que produit formulaire() dans le generateur, et c est
   le motif .formbox des maquettes : un cadre unique, titre et
   champs a l interieur, sans decoupe en deux moities.

     Color Section : df df-sec
     Colonne 1/1   : df-formbox

   Le selecteur vise « .flex_column » et rien d autre : pose sur la
   COLOR SECTION, df-formbox garde le mode deux colonnes decrit
   plus haut, dont le cadre est porte par l entry-content-wrapper.
   ------------------------------------------------------------ */
#top .df .flex_column.df-formbox{
  background:var(--df-paper);
  border:1px solid var(--df-line);
  border-radius:var(--df-r-lg);
  padding:44px 42px 48px;
}

/* Le titre de la boite. Sans mesure il court sur toute la largeur
   du cadre et retombe en deux lignes tres desequilibrees.
   « text-wrap:balance » repartit les lignes sans coupure forcee —
   la maquette y arrivait avec un <br>, qui aurait saute au premier
   changement de largeur. */
#top #wrap_all .df .flex_column.df-formbox h2{
  max-width:30ch;
  text-wrap:balance;
}

@media (max-width:1050px){
  #top .df .flex_column.df-formbox{ padding:30px 24px 34px; }
}


#top .df-formbox .flex_column_table{ display:contents; }
#top .df-formbox .av-flex-placeholder{ display:none; }
#top .df-formbox .entry-content-wrapper::before,
#top .df-formbox .entry-content-wrapper::after{ display:none; }

#top .df-formbox .entry-content-wrapper{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:stretch;
  background:var(--df-paper);
  border:1px solid var(--df-line);
  border-radius:var(--df-r-lg);
  overflow:hidden;
}
#top .df-formbox .entry-content-wrapper .flex_column{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
  padding:40px 38px 44px;
}

/* Le volet d accroche : fond alterné, filet de séparation */
#top .df-formbox .entry-content-wrapper .flex_column.df-formbox-aside{
  background:var(--df-alt);
  border-right:1px solid var(--df-line);
  padding:44px 38px;
  --df-paper:var(--df-alt);
  --df-line:var(--df-line-alt);
}


/* ------------------------------------------------------------
   Les champs
   ------------------------------------------------------------ */

#top .df-formbox label,
#top .df-formbox .gfield_label{
  display:block;
  font-family:var(--df-font-ui);
  font-size:var(--df-eyebrow);
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--df-grey);
  margin:0 0 8px;
}

#top .df-formbox input[type="text"],
#top .df-formbox input[type="email"],
#top .df-formbox input[type="tel"],
#top .df-formbox input[type="url"],
#top .df-formbox input[type="number"],
#top .df-formbox select,
#top .df-formbox textarea{
  width:100%;
  margin:0;
  padding:12px 13px;
  border:1px solid var(--df-line);
  border-radius:var(--df-r-sm);
  background:var(--df-paper);
  font-family:var(--df-font-text);
  font-size:15px;
  line-height:1.4;
  color:var(--df-ink);
  outline:none;
  box-shadow:none;
  transition:border-color var(--df-t-fast);
}
#top .df-formbox input:focus,
#top .df-formbox select:focus,
#top .df-formbox textarea:focus{
  border-color:var(--df-link);
  box-shadow:none;
}
#top .df-formbox textarea{ min-height:94px; resize:vertical; }
#top .df-formbox input::placeholder,
#top .df-formbox textarea::placeholder{ color:var(--df-grey); }

/* Cases à cocher et boutons radio : largeur automatique, sinon la
   règle ci-dessus les étire sur toute la ligne. */
#top .df-formbox input[type="checkbox"],
#top .df-formbox input[type="radio"]{
  width:auto;
  margin-right:8px;
  accent-color:var(--df-gold);
}

/* Mentions sous un champ — compteur, aide, consentement */
#top .df-formbox .gfield_description,
#top .df-formbox .df-field-help{
  font-size:12px;
  line-height:1.5;
  color:var(--df-grey);
  margin-top:7px;
  padding:0;
}
#top .df-formbox .gfield_consent_label,
#top .df-formbox .df-consent{
  font-size:var(--df-xs);
  line-height:1.55;
  color:var(--df-ink-2);
  text-transform:none;
  letter-spacing:normal;
}

/* Bouton d envoi */
#top .df-formbox .gform_button,
#top .df-formbox button[type="submit"],
#top .df-formbox input[type="submit"]{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:auto;
  padding:12px 22px;
  border:1px solid var(--df-gold);
  border-radius:var(--df-r-btn);
  background:var(--df-gold);
  color:var(--df-ink);
  font-family:var(--df-font-ui);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  cursor:pointer;
  transition:background var(--df-t-fast), color var(--df-t-fast), border-color var(--df-t-fast);
}
#top .df-formbox .gform_button:hover,
#top .df-formbox button[type="submit"]:hover,
#top .df-formbox input[type="submit"]:hover{
  background:var(--df-gold-hover);
  border-color:var(--df-gold-hover);
  color:var(--df-gold-bg);
}


/* ------------------------------------------------------------
   Gravity Forms — on regle son theme, on ne le combat pas
   ------------------------------------------------------------
   Depuis la 2.7, GF rend ses formulaires avec un « theme
   framework » (ici orbital) entierement pilote par des variables
   CSS, injectees en <style> inline sur le wrapper.

   Les redefinir est bien plus sur que d ecrire des selecteurs
   concurrents : on herite de toute la mecanique du plugin —
   etats, validation, responsive — en n imposant que la charte.

   ATTENTION : GF gere DEJA sa grille, en 12 colonnes, avec les
   classes gfield--width-half et gfield--width-full reglees champ
   par champ dans l editeur de formulaire. Ne pas la remplacer :
   la largeur des champs se decide dans GF, pas ici.
   ------------------------------------------------------------ */

#top .df-formbox .gform_wrapper,
#top .df-formbox .gform-theme--framework{
  /* Couleurs d accent */
  --gf-color-primary:#173A5E;
  --gf-color-primary-rgb:23, 58, 94;
  --gf-color-primary-contrast:#FFFFFF;
  --gf-color-primary-darker:#0E1621;
  --gf-color-primary-lighter:#2E6899;
  --gf-color-in-ctrl-primary:#2E6899;
  --gf-color-in-ctrl-primary-rgb:46, 104, 153;
  --gf-color-in-ctrl-primary-contrast:#FFFFFF;

  /* Champs */
  --gf-ctrl-border-color:#DFE4E8;
  --gf-ctrl-border-color-focus:#2E6899;
  --gf-ctrl-bg-color:#FFFFFF;
  --gf-ctrl-color:#173A5E;

  /* Libelles et mentions */
  --gf-ctrl-label-color-primary:#6E7C8A;
  --gf-ctrl-label-color-secondary:#6E7C8A;
  --gf-ctrl-desc-color:#6E7C8A;

  --gf-radius:8px;
  --gf-font-size-secondary:12px;
  --gf-font-size-tertiary:12px;
}

/* Typographie : les variables du theme ne couvrent pas la fonte */
#top .df-formbox .gform_wrapper input,
#top .df-formbox .gform_wrapper textarea,
#top .df-formbox .gform_wrapper select{
  font-family:var(--df-font-text);
  font-size:15px;
  color:var(--df-ink);
}
#top .df-formbox .gform_wrapper .gfield_label,
#top .df-formbox .gform_wrapper legend.gfield_label{
  font-family:var(--df-font-ui);
  font-size:var(--df-eyebrow);
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--df-grey);
}

/* Compteur de caracteres et mentions sous un champ */
#top .df-formbox .gform_wrapper .ginput_counter,
#top .df-formbox .gform_wrapper .gfield_description{
  font-family:var(--df-font-text);
  font-size:12px;
  line-height:1.5;
  color:var(--df-grey);
}

/* Consentement RGPD : c est du texte courant, pas un libelle */
#top .df-formbox .gform_wrapper .gchoice label{
  font-family:var(--df-font-text);
  font-size:var(--df-xs);
  line-height:1.55;
  letter-spacing:normal;
  text-transform:none;
  color:var(--df-ink-2);
}
#top .df-formbox .gform_wrapper .gfield-choice-input{
  accent-color:var(--df-gold);
}

/* Le bouton d envoi reprend le bouton principal : fond ink.
   L or reste le CTA unique de la page, porte par le hero.

   La fleche est en background-image et non en ::after : un
   <input type="submit"> est un element remplace, il n accepte
   pas de pseudo-element. Le glissement au survol se fait donc
   par background-position, qui se transitionne aussi bien. */
#top .df-formbox .gform_wrapper .gform_button,
#top #wrap_all .df-formbox .gform_wrapper input[type="submit"]{
  display:inline-flex;
  align-items:center;
  width:auto;
  padding:12px 46px 12px 22px;
  border:1px solid transparent;
  border-radius:var(--df-r-btn);
  background-color:var(--df-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23EDF4F9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M9 4.5 12.5 8 9 11.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 20px center;
  background-size:15px 15px;
  color:var(--df-n-text);
  font-family:var(--df-font-ui);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  text-shadow:none;
  box-shadow:none;
  cursor:pointer;
  transition:background-color var(--df-t-fast),
             background-position var(--df-t) var(--df-ease),
             color var(--df-t-fast);
}
#top .df-formbox .gform_wrapper .gform_button:hover,
#top #wrap_all .df-formbox .gform_wrapper input[type="submit"]:hover{
  background-color:var(--df-night);
  background-position:right 16px center;
  color:var(--df-n-text);
}

@media (prefers-reduced-motion:reduce){
  #top .df-formbox .gform_wrapper .gform_button:hover,
  #top #wrap_all .df-formbox .gform_wrapper input[type="submit"]:hover{
    background-position:right 20px center;
  }
}

#top .df-formbox .gform_wrapper .gform_footer{
  margin:22px 0 0;
  padding:0;
}

/* La mention « (Required) » suit la langue de Gravity Forms, pas
   celle du site : elle se traduit dans Formulaires > Reglages. */
#top .df-formbox .gform_wrapper .gfield_required{
  color:var(--df-grey);
  font-weight:400;
}

/* ------------------------------------------------------------
   Ruptures
   ------------------------------------------------------------ */

@media (max-width:1050px){
  #top .df-formbox .entry-content-wrapper{ grid-template-columns:1fr; }
  #top .df-formbox .entry-content-wrapper .flex_column.df-formbox-aside{
    border-right:0;
    border-bottom:1px solid var(--df-line);
  }
}

@media (max-width:700px){
  #top .df-formbox .entry-content-wrapper .flex_column,
  #top .df-formbox .entry-content-wrapper .flex_column.df-formbox-aside{
    padding:30px 24px;
  }
}