.bg-light {
  background-color: rgba(21, 209, 236, 0.5);
  padding: 25px;
  color: #FFF;
  border-radius: 15px;
}

.bg-light p {
  color: #FFF;
  font-size: 20px;
}

.alert-success-sonoklip {
    color: #ffffff;
    background-color: #0acbe7!important;
    border-color: #d6e9c6;
}

.bac {
  color: #FFF;
  font-size: 18px;
}

/* 1) Réserver la place des messages d’erreur pour éviter le "jump" */
#contactForm .invalid-feedback{
  display:block;           /* on garde le flux */
  visibility:hidden;       /* invisible par défaut */
  min-height:18px;         /* réserve ~1 ligne (ajuste 16–20px si besoin) */
  margin-top:6px;
  font-size:12px;
  color:#d9534f;           /* rouge BS3 */
}
#contactForm .is-invalid ~ .invalid-feedback{ visibility:visible; }

/* 2) Espacement vertical régulier entre les "rangées" (colonnes BS3) */
#contactForm .row.g-3 > [class^="col-"],
#contactForm .row.g-3 > [class*=" col-"]{
  margin-bottom:22px;      /* espace entre lignes visuelles */
}

/* 3) Unifier l’espace interne de chaque bloc label+champ+feedback */
#contactForm .mb-3{ margin-bottom:6px; }  /* petit espace entre le champ et la réserve du feedback */
#contactForm .form-label{ display:block; margin-bottom:6px; }

/* 4) Zone Commentaires - même “rythme” que les autres */
#contactForm #commentaires{
  min-height:200px;        /* assez haut sans "dépasser visuellement" */
  resize:vertical;
}

.btn-primary {
  color:#000;
  background-color:#15D1EC;
  border-color:#15D1EC;
}

/* Survol / focus (desktop) */
.btn-primary:hover,
.btn-primary:focus {
  color:#000;
  background-color:#13BDD4;   /* léger foncé */
  border-color:#13BDD4;
}

/* Clic (actif) */
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color:#000;
  background-color:#11AABF;
  border-color:#11AABF;
  background-image:none;
}

/* Désactivé (pendant l'envoi) */
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus {
  color:#000;
  background-color:#15D1EC;
  border-color:#15D1EC;
  opacity:.65; /* optionnel: effet grisé */
  cursor:not-allowed;
}

.content-lg h1.titre-formulaire{
  font-size: clamp(30px, 4.5vw, 40px); /* min 20px, max 36px */
  line-height: 1.25;
}

@media (max-width: 991px){
  h1.titre-formulaire { font-size: 34px; }
}

/* Optionnel: si tu veux réduire un chouïa l’impact visuel du grand textarea */
@media (min-width: 768px){
  #contactForm #commentaires{ min-height:180px; }
}

@media (max-width: 767px){
  #contactForm #commentaires{ min-height:120px; }
  #submitBtn{ width:250px; display:inline-block; }
  #submitBtn{
    display:block;
    width:250px;
    margin:16px auto 0;
  }
  .content-lg {
  padding-top: 40px;
  padding-bottom: 40px;
  }
  .content-lg h1.titre-formulaire { 
    margin-bottom: 45px;
    font-size: 30px !important; 
    line-height: 1.25;
  }
}

/* 5) Bouton un peu plus bas, décollé des commentaires */
#contactForm .row.g-3 > .col-12:last-child{ margin-top:12px; }

/* 6) (facultatif) Simuler .mb-4 / .mt-4 si tu gardes ces classes dans le HTML */
.mb-2{ margin-bottom:10px !important; }
.mt-2{ margin-top:10px !important; }