/* ================================================================
   France Valley — Convention Form
   Charte graphique 2024
   Couleurs : Vert premium #1E343A | Bleu FV #0037AF | Amande 40 #E1F3E4
              Amande 60 #A4C1B1 | Beige foncé #C8B198 | Bleu variant #00206F
   Typo : Inter (Google Fonts)
   ================================================================ */

:root {
  --fv-vert: #1E343A;
  --fv-bleu: #0037AF;
  --fv-bleu-variant: #00206F;
  --fv-amande-40: #E1F3E4;
  --fv-amande-60: #A4C1B1;
  --fv-beige: #C8B198;
  --fv-cream: #FAF8F5;
  --fv-white: #FFFFFF;
  --fv-text: #1E343A;
  --fv-text-light: #5A6B6F;
  --fv-border: #D6DDD8;
  --fv-border-focus: #0037AF;
  --fv-error: #C0392B;
  --fv-radius: 8px;
}

/* ================================================================
   [ RESET & BASE ]
   ================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--fv-text);
  background: var(--fv-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fv-bleu);
  transition: all 0.3s ease;
  text-decoration: none;
}

a:focus { outline: none !important; }
a:hover { color: var(--fv-bleu-variant); text-decoration: underline; }

h1,h2,h3,h4,h5,h6 { margin: 0; }

p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fv-text);
  margin: 0;
}

ul, li {
  margin: 0;
  list-style-type: none;
}

/* ================================================================
   [ INPUTS ]
   ================================================================ */

input {
  outline: none;
  border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input::placeholder,
textarea::placeholder {
  color: #A0ADB0;
}

button {
  outline: none !important;
  border: none;
  background: transparent;
  cursor: pointer;
}

iframe { border: none !important; }

.container { max-width: 1200px; }

/* ================================================================
   [ MAIN LAYOUT ]
   ================================================================ */

.container-contact100 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 16px;
  background: var(--fv-cream);
}

.container-contact100::before {
  display: none;
}

.wrap-contact100 {
  width: 720px;
  max-width: 100%;
  background: var(--fv-white);
  border-radius: 16px;
  padding: 52px 48px 36px;
  box-shadow: 0 4px 32px rgba(30, 52, 58, 0.08);
}

/* ================================================================
   [ FORM HEADER ]
   ================================================================ */

.contact100-form {
  width: 100%;
}

.contact100-form-title {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--fv-vert);
  line-height: 1.2;
  text-align: center;
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--fv-border);
}

.contact100-form-title img {
  width: 200px !important;
  max-width: 55%;
  margin-bottom: 24px;
}

.contact100-form-title p {
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--fv-text);
  font-weight: 400;
}

/* Banner "ATTENTION CGP CIF" */
.contact100-form-title p[style*="color:blue"],
.contact100-form-title p[style*="color: blue"] {
  color: var(--fv-vert) !important;
  font-size: 12px !important;
  font-weight: 500;
  background: var(--fv-cream);
  border: 1px solid var(--fv-border);
  border-left: 4px solid var(--fv-bleu);
  border-radius: 0 var(--fv-radius) var(--fv-radius) 0 !important;
  padding: 14px 18px !important;
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.5;
}

.contact100-form-title p[style*="color:blue"] u,
.contact100-form-title p[style*="color: blue"] u {
  text-decoration: none;
  font-weight: 700;
  color: var(--fv-bleu);
}

.contact100-form-title p[style*="color:blue"] strong,
.contact100-form-title p[style*="color: blue"] strong {
  font-size: 14px !important;
  color: var(--fv-bleu);
}

/* Title box "Convention de Distribution" */
.contact100-form-title p[style*="border:"],
.contact100-form-title p[style*="border :"],
.contact100-form-title p[style*="border: 1px"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 0 0 !important;
  margin: 0 auto !important;
  color: var(--fv-vert) !important;
  font-size: 18px !important;
  font-weight: 600;
  background: transparent;
  letter-spacing: 0.2px;
  line-height: 1.4;
  max-width: 420px;
}

.contact100-form-title p[style*="border:"] br,
.contact100-form-title p[style*="border :"] br,
.contact100-form-title p[style*="border: 1px"] br {
  display: none;
}

.contact100-form-title p strong {
  font-size: 20px !important;
  color: var(--fv-vert);
}

/* ================================================================
   [ FORM FIELDS ]
   ================================================================ */

.form-group {
  margin-bottom: 12px;
}

.form-group .col-form-label,
.form-group label,
.label-input100 {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  color: var(--fv-text) !important;
}

.form-control-plaintext,
input[style*="border-bottom"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--fv-border) !important;
  border-radius: 6px !important;
  background: var(--fv-white) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  color: var(--fv-text) !important;
}

.form-control-plaintext:focus,
input[style*="border-bottom"]:focus {
  border-color: var(--fv-bleu) !important;
  box-shadow: 0 0 0 3px rgba(0, 55, 175, 0.1) !important;
  outline: none;
}

/* ================================================================
   [ SELECTS ]
   ================================================================ */

select,
.js-select3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid var(--fv-border);
  border-radius: 6px;
  background: var(--fv-white);
  color: var(--fv-text);
  appearance: auto;
  cursor: pointer;
  transition: border-color 0.25s ease;
  height: 40px;
}

select:focus,
.js-select3:focus {
  border-color: var(--fv-bleu);
  box-shadow: 0 0 0 3px rgba(0, 55, 175, 0.1);
  outline: none;
}

/* Align selects with inputs on same row */
.form-group.row {
  align-items: center;
}

/* Full-width selects inside containers */
select.col-md-12,
select.js-select3.col-md-12 {
  width: 100%;
}

/* Top-level form selects: match input width */
.contact100-form > .form-group.row > .col-md-6 > select,
.contact100-form > .form-group.row > .col-md-6 > .js-select3 {
  width: 100%;
  display: block;
}

/* ================================================================
   [ SECTION TITLES & DIVIDERS ]
   ================================================================ */

p[style*="text-align: center"][style*="font-size: 18px"],
p[style*="text-align:center"][style*="font-size:18px"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700;
  color: var(--fv-vert) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

hr {
  border: none;
  border-top: 1px solid var(--fv-border);
  margin: 28px 0;
}

/* Section boxes (contacts, TVA, etc.) */
div[style*="border: 1px solid #E0E0E0"] {
  border: 1px solid var(--fv-border) !important;
  border-radius: var(--fv-radius) !important;
  padding: 24px !important;
  background: var(--fv-white);
  margin-bottom: 12px;
}

/* Contact subtitles */
p[style*="text-decoration: underline"][style*="color:black"] {
  font-family: 'Inter', sans-serif !important;
  color: var(--fv-vert) !important;
  font-size: 15px !important;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 2px solid var(--fv-amande-60);
  padding-bottom: 6px;
  margin-bottom: 12px;
  display: inline-block;
}

/* Italic notes */
p[style*="font-style: italic"],
p[style*="font-style:italic"] {
  font-size: 12px !important;
  color: var(--fv-text-light) !important;
  font-style: italic;
}

/* "Ajouter un contact" links */
a[style*="text-decoration: underline"][style*="font-size: 20px"],
a[style*="text-decoration:underline"][style*="font-size:20px"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--fv-bleu) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  transition: color 0.2s ease;
}

a[style*="text-decoration: underline"][style*="font-size: 20px"]:hover,
a[style*="text-decoration:underline"][style*="font-size:20px"]:hover {
  color: var(--fv-bleu-variant) !important;
}

a[style*="text-decoration: underline"][style*="font-size: 20px"]::before,
a[style*="text-decoration:underline"][style*="font-size:20px"]::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fv-amande-40);
  color: var(--fv-vert);
  font-size: 16px;
  font-weight: 700;
}

/* ================================================================
   [ BUTTON ]
   ================================================================ */

.container-contact100-form-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 20px;
}

.contact100-form-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 48px;
  min-width: 260px;
  height: 52px;
  background: var(--fv-vert);
  border-radius: var(--fv-radius);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(30, 52, 58, 0.2);
}

.contact100-form-btn:hover {
  background: var(--fv-bleu);
  box-shadow: 0 6px 20px rgba(0, 55, 175, 0.3);
  transform: translateY(-2px);
}

/* ================================================================
   [ SUBMIT OVERLAY ]
   ================================================================ */

.submit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.submit-overlay-card {
  background: var(--fv-white);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(30, 52, 58, 0.15);
  padding: 28px 40px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--fv-vert);
  text-align: center;
}

/* ================================================================
   [ VALIDATION ]
   ================================================================ */

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  min-height: 40px;
  background: #FEF2F2;
  border-radius: 6px;
  top: 0;
  left: 0;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--fv-error);
  line-height: 1.2;
  pointer-events: none;
}

.btn-hide-validate {
  font-family: Material-Design-Iconic-Font;
  font-size: 15px;
  color: var(--fv-error);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 40px;
  top: 0;
  right: 12px;
}

/* ================================================================
   [ CONTACT MORE ]
   ================================================================ */

/* ================================================================
   [ FOOTER CONTACT ]
   ================================================================ */

.contact100-more {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--fv-text-light);
  line-height: 1.7;
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--fv-border);
}

.contact100-more-highlight {
  color: var(--fv-vert);
  font-weight: 600;
}

.contact100-more a {
  color: var(--fv-bleu) !important;
  font-weight: 500;
  border-bottom: none !important;
  text-decoration: none;
}

.contact100-more a:hover {
  text-decoration: underline;
}

/* ================================================================
   [ FILE UPLOAD SECTION ]
   ================================================================ */

.wrap-input100 {
  width: 100%;
  position: relative;
  background: var(--fv-cream);
  border: 1px dashed var(--fv-border);
  border-radius: var(--fv-radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.wrap-input100:hover {
  border-color: var(--fv-bleu);
  background: var(--fv-amande-40);
}

.wrap-input100 .label-input100 {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fv-vert) !important;
  margin-bottom: 8px;
}

.wrap-input100 input[type="file"] {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--fv-text-light);
  width: 100%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.wrap-input100 input[type="file"]::file-selector-button {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--fv-bleu);
  background: var(--fv-white);
  border: 1px solid var(--fv-border);
  border-radius: 6px;
  padding: 6px 16px;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wrap-input100 input[type="file"]::file-selector-button:hover {
  background: var(--fv-bleu);
  color: var(--fv-white);
  border-color: var(--fv-bleu);
}

/* ================================================================
   [ CONTACT SECTIONS LAYOUT ]
   ================================================================ */

/* Contact fields: label + input side by side */
div[style*="border: 1px solid #E0E0E0"] .form-group.row {
  margin-bottom: 10px;
  align-items: center;
}

/* Wider labels in contact grids */
div[style*="border: 1px solid #E0E0E0"] .col-md-3 {
  flex: 0 0 35%;
  max-width: 35%;
}

div[style*="border: 1px solid #E0E0E0"] .col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
}

/* Oui/Non selects: bigger and aligned */
div[style*="border: 1px solid #E0E0E0"] .col-md-7 {
  flex: 0 0 70%;
  max-width: 70%;
}

div[style*="border: 1px solid #E0E0E0"] select.col-md-1 {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto;
  min-width: 80px;
  float: none !important;
  margin-right: 0 !important;
}

/* Stack fields on mobile */
@media (max-width: 768px) {
  div[style*="border: 1px solid #E0E0E0"] .col-md-3,
  div[style*="border: 1px solid #E0E0E0"] .col-md-9,
  div[style*="border: 1px solid #E0E0E0"] .col-md-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ================================================================
   [ CONTACTS 4+ HIDDEN BY DEFAULT ]
   ================================================================ */

#contact4,
#contact5,
#contact6,
#contact7,
#contact8,
#contact9,
#contact10 {
  display: none;
}

/* ================================================================
   [ RESPONSIVE ]
   ================================================================ */

@media (max-width: 768px) {
  .container-contact100 {
    padding: 24px 12px;
  }
  .wrap-contact100 {
    width: 100%;
    padding: 32px 24px 24px;
    border-radius: 12px;
  }
  .contact100-form-title img {
    width: 180px !important;
  }
}

@media (max-width: 576px) {
  .wrap-contact100 {
    padding: 28px 16px 20px;
  }
  .alert-validate::before {
    padding: 0 10px;
  }
  .btn-hide-validate {
    right: 10px;
  }
}