/* ========================================
   MIRVACOM PERFEX FORM REDESIGN - CUSTOM CSS
   Layout split-screen premium + interactions modernes
   ======================================== */

.mirvacom-header {
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  padding: 0.75rem 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* Le conteneur parent devient la référence de positionnement */
.header-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Force le contenu principal (le menu) au centre */
  position: relative !important; /* Crucial pour le positionnement du logo et du bouton */
  min-height: 50px !important;
}

/* 1. LOGO : Calé à gauche, indépendant du reste */
.header-logo {
  position: absolute !important;
  left: 2rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

.logo-link {
  display: flex !important;
  align-items: center !important;
}

.logo-link img {
  max-height: 40px !important;
  width: auto !important;
  display: block !important;
}

/* 2. MENU : Totalement centré dans la page */
.header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
  justify-content: center !important;
  margin: 0 auto !important;
  z-index: 1 !important;
}

.nav-link {
  font-size: 14px !important;
  color: #303030 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
  padding: 0.5rem 0 !important;
  border-bottom: 2px solid transparent !important;
}

.nav-link:hover {
  color: #e27f21 !important;
  border-bottom-color: #e27f21 !important;
}

/* 3. BOUTON : Calé tout à droite, indépendant du reste */
.header-cta {
  position: absolute !important;
  right: 2rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

.btn-client-account {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  background: #e27f21 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
}

.btn-client-account:hover {
  background: #e27f21 !important;
  text-decoration: none !important;
  color: #fff !important;
}

/* ─────────────────────────────────────
   1. PAGE & BODY - LAYOUT PRINCIPAL
   ───────────────────────────────────── */

body.estimate-request-form {
  background: #f8f7fc !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

body.estimate-request-form .container-fluid {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
}

body.estimate-request-form .row {
  display: contents !important;
}

/* ─────────────────────────────────────
   2. CONTENEUR PRINCIPAL - COL-MD-6
   ───────────────────────────────────── */

.col-md-6.col-md-offset-3 {
  grid-column: 2 / 3 !important;
  display: contents !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* ─────────────────────────────────────
   3. PANNEAU GAUCHE - HERO/BRANDING
   ───────────────────────────────────── */

body.estimate-request-form::before {
  content: '\A\A\A\A\AVotre projet mérite\Aune solution sur mesure\A\ADecrivez votre besoin en 2 minutes\ANous vous répondons avec une offre\Aclaire et adaptée à votre budget.\A\A✓ Réponse sous 24h garantie\A✓ Données confidentielles & sécurisées\A✓ Accompagnement dédié de A à Z\A\A+80 Projets\A\A98% Satisfaction\A\A24h Délai réponse' !important;
  white-space: pre-line !important;
  grid-column: 1 / 2 !important;
  background: linear-gradient(135deg, #0d0d14 0%, #12121e 60%, #0f1520 100%) !important;
  border-right: 0.5px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.6) !important;
  padding: 3rem 2.5rem !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 380px !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body.estimate-request-form::after {
  content: '' !important;
  position: fixed !important;
  top: -80px !important;
  left: -80px !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, rgba(110,70,220,0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ─────────────────────────────────────
   4. PANNEAU DROIT - FORMULAIRE
   ───────────────────────────────────── */

.form-col {
  grid-column: 2 / 3 !important;
  background: #f8f7fc !important;
  padding: 2.5rem !important;
  overflow-y: auto !important;
  z-index: 1 !important;
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* ─────────────────────────────────────
   5. TITRE & INTRO DU FORMULAIRE
   ───────────────────────────────────── */

.form-col h1 {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #12121e !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.3 !important;
}

.form-col > p {
  font-size: 13px !important;
  color: #888 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.6 !important;
}

.form-col > p em {
  color: #7c5ce9 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}



/* ─────────────────────────────────────
   6. GROUPES DE CHAMPS & LABELS
   ───────────────────────────────────── */

.form-group {
  margin-bottom: 1.5rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.form-group:last-of-type {
  margin-bottom: 25px !important;
  margin-right: 35px !important;
}

/* Label */
.control-label {
  font-size: 12px !important;
  color: #555 !important;
  font-weight: 500 !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.text-danger {
  color: #e24b4a !important;
}

/* ─────────────────────────────────────
   7. INPUTS & TEXTAREAS
   ───────────────────────────────────── */

.form-control {
  width: 100% !important;
  background: #fff !important;
  border: 0.5px solid rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: #12121e !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  appearance: none !important;
  height: auto !important;
}

.form-control:focus {
  border-color: #7c5ce9 !important;
  box-shadow: 0 0 0 3px rgba(124,92,233,0.1) !important;
}

.form-control[multiple],
textarea.form-control {
  min-height: 80px !important;
  resize: none !important;
  line-height: 1.5 !important;
}

/* Input disabled state */
.form-control:disabled {
  background: #f5f5f5 !important;
  color: #999 !important;
}

/* ─────────────────────────────────────
   8. SELECT BOOTSTRAP (DROPDOWN CUSTOMISÉ)
   ───────────────────────────────────── */

/* Dropdown wrapper */
.dropdown.bootstrap-select {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

.dropdown.bootstrap-select .btn {
  width: 100% !important;
  text-align: left !important;
  background: #fff !important;
  border: 0.5px solid rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  color: #12121e !important;
  font-size: 13px !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Conteneur bootstrap-select */
.bootstrap-select,
.bootstrap-select > .dropdown-toggle,
.bootstrap-select .btn{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Vrai select visible */
.bootstrap-select > .dropdown-toggle{
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    min-height: 56px !important;
    padding: 14px 18px !important;
}

.dropdown.bootstrap-select .btn:hover {
  background: #fff !important;
  border-color: #7c5ce9 !important;
  color: #12121e !important;
}

.dropdown.bootstrap-select .btn.focus,
.dropdown.bootstrap-select .btn:focus,
.dropdown.bootstrap-select .btn.active {
  background: #fff !important;
  border-color: #7c5ce9 !important;
  box-shadow: 0 0 0 3px rgba(124,92,233,0.1) !important;
  color: #12121e !important;
}

/* Dropdown menu */
.dropdown-menu {
  border: 0.5px solid rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  padding: 8px 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.dropdown-menu li a {
  padding: 8px 12px !important;
  color: #555 !important;
  font-size: 13px !important;
}

.dropdown-menu li a:hover,
.dropdown-menu li a.selected {
  background: rgba(124,92,233,0.08) !important;
  color: #7c5ce9 !important;
}

.dropdown-menu li.selected a {
  background: rgba(124,92,233,0.08) !important;
  color: #7c5ce9 !important;
}

/* Search input dans dropdown */
.bs-searchbox input {
  border: 0.5px solid rgba(0,0,0,0.12) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.bs-searchbox input:focus {
  border-color: #7c5ce9 !important;
  box-shadow: 0 0 0 3px rgba(124,92,233,0.1) !important;
}

/* Ligne Budget + Services */

.quote-card .form-group{
    position: relative;
}

/* Desktop uniquement */
@media (min-width: 992px){

    .quote-card .row{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:20px !important;
    }

    /* Service */
    .quote-card .form-group:has(label[for*="services"]),
    .quote-card .form-group:has(label:contains("services")){
        width:calc(50% - 10px);
    }

    /* Budget */
    .quote-card .form-group:has(label[for*="budget"]){
        width:calc(50% - 10px);
    }
}

/* ===========================
   FIX BOOTSTRAP SELECT PERFEX
   =========================== */

.bootstrap-select.form-control{
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    height:auto !important;
}

.bootstrap-select.form-control:hover{
    border:none !important;
}

.bootstrap-select > .dropdown-toggle{
    min-height:56px !important;
    border-radius:14px !important;
    border:1px solid #e5e7eb !important;
    background:#ffffff !important;
    padding:14px 18px !important;
    box-shadow:none !important;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:hover{
    border-color:#7c5ce9 !important;
    background:#ffffff !important;
}

.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select .dropdown-toggle:focus{
    box-shadow:0 0 0 4px rgba(124,92,233,.12) !important;
}



/* ─────────────────────────────────────
   9. RADIOS & CHECKBOXES
   ───────────────────────────────────── */

/* Radios inline */
.radio,
.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 12px 8px 0 !important;
  padding: 0 !important;
}

.radio label,
.checkbox label {
  margin: 0 !important;
  font-size: 12px !important;
  color: #555 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  user-select: none !important;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: #7c5ce9 !important;
}

.radio input[type="radio"]:checked + label,
.checkbox input[type="checkbox"]:checked + label {
  color: #7c5ce9 !important;
  font-weight: 500 !important;
}

/* Radio inline styling */
.radio-inline {
  display: inline-block !important;
  margin-right: 12px !important;
  margin-bottom: 8px !important;
}

.radio-inline input {
  margin-right: 5px !important;
}

/* ─────────────────────────────────────
   10. BOUTONS & CTA
   ───────────────────────────────────── */

.btn {
  font-family: inherit !important;
  transition: all 0.15s !important;
}

.submit-btn-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

#form_submit {
    width: 30% !important;
    padding: 13px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-left: 0 !important;
    margin-right: 35px !important;
}

#form_submit:active {
  opacity: 0.9 !important;
}

#form_submit:disabled,
#form_submit.disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ─────────────────────────────────────
   11. MESSAGES & INFOS
   ───────────────────────────────────── */

#response {
  margin-bottom: 1.5rem !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

#response.alert {
  border: 0.5px solid rgba(0,0,0,0.1) !important;
}

#response.alert-success {
  background: #e8f5e9 !important;
  border-color: #4caf50 !important;
  color: #2e7d32 !important;
}

#response.alert-danger {
  background: #ffebee !important;
  border-color: #f44336 !important;
  color: #c62828 !important;
}

#response.alert-info {
  background: #e3f2fd !important;
  border-color: #2196f3 !important;
  color: #1565c0 !important;
}

.clearfix {
  clear: both !important;
}

/* ─────────────────────────────────────
   12. RESPONSIVE - MOBILE & TABLET
   ───────────────────────────────────── */

@media (max-width: 992px) {
  .header-container {
    flex-wrap: wrap !important;
    padding: 0 1.5rem !important;
    gap: 1rem !important;
  }

  .header-logo {
    width: 100% !important;
    text-align: center !important;
  }
  
  .header-nav {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 1.5rem !important;
  }
  
  .header-cta {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Sur tablette/mobile : layout single-column */
  body.estimate-request-form .container-fluid {
    grid-template-columns: 1fr !important;
  }
  
  /* Masquer le panel gauche */
  body.estimate-request-form::before {
    display: none !important;
  }
  
  body.estimate-request-form::after {
    display: none !important;
  }
  
  .col-md-6.col-md-offset-3 {
    grid-column: 1 !important;
  }
  
  .form-col {
    padding: 1.5rem !important;
  }
  
  .form-col h1 {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  body.estimate-request-form {
    background: #fff !important;
  }
  
  .form-col {
    padding: 1rem !important;
  }
  
  .control-label {
    font-size: 11px !important;
  }
  
  .form-control {
    font-size: 16px !important;
    padding: 10px !important;
  }
  
  .radio-inline {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* ─────────────────────────────────────
   13. UTILITAIRES & OVERRIDES
   ───────────────────────────────────── */

/* Bootstrap default overrides */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[class*='col-'] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Focus visible pour accessibility */
.form-control:focus-visible {
  outline: 2px solid #7c5ce9 !important;
  outline-offset: 2px !important;
}

/* Animation submit button */
.btn.disable-on-submit.disabled {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

/* Icône spinner submit */
.fa-spinner {
  display: inline-block !important;
}

.fa-spinner.hide {
  display: none !important;
}

/* ===== MIRVACOM PREMIUM UPGRADE ===== */

body.estimate-request-form::before,
body.estimate-request-form::after{
display:none !important;
}

.quote-layout{
    display:flex;
    min-height:calc(100vh - 80px);
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.quote-sidebar {
    width: 500px;
    flex-shrink: 0;
    background: radial-gradient(circle at top left, rgba(226, 127, 33, .18), transparent 30%), 
                radial-gradient(circle at bottom right, rgba(255, 255, 255, .06), transparent 40%),
                #180740;
    color: #fff;
    position: sticky;
    top: 74px; /* <--- Changé de 80px à 74px pour coller au header */
    height: calc(100vh - 74px); /* <--- Mis à jour également ici */
}

.sidebar-content{
    padding:70px 50px;
}
.sidebar-badge{
    display:inline-block;
    padding:8px 16px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    margin-bottom:30px;
}
.sidebar-content h1{
    font-size:26px;
    font-weight: 600;
    line-height:1.2;
    color:#fff;
    margin-bottom:25px;
}
.sidebar-content p{
    font-size:15px;
    line-height:1.8;
    color:rgba(255,255,255,.75);
}
.benefit-item{
    margin-bottom:14px;
}
/* --- Version Desktop (Par défaut) --- */
.sidebar-stats {
    display: flex !important;
    flex-direction: row !important; /* Aligne sur une seule ligne sur PC */
    justify-content: space-between !important;
    gap: 15px !important;
    margin-top: 40px !important;
    width: 100% !important;
}

.sidebar-stats .stat-card {
    flex: 1 !important; /* Donne la même largeur aux 3 cartes */
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 18px 10px !important; /* Padding optimisé */
    border-radius: 8px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.stat-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    padding:18px;
    border-radius:16px;
}
.stat-card strong{
    display:block;
    font-size:28px;
    color:#e27f21;
}
.stat-card span{
    color:rgba(255,255,255,.75);
    font-size:12px;
}
.quote-main{
    flex:1;
    padding:50px;
    background:#f7f8fc;
}
.quote-header{
    max-width:900px;
    margin:0 auto 30px;
}
.quote-badge{
    display:inline-block;
    background:rgba(124,92,233,.08);
    color:#7c5ce9;
    padding:8px 16px;
    border-radius:30px;
    font-weight:600;
}
.quote-header h2{
    font-size:38px;
    font-weight:700;
    color:#1d1d1f;
}
.quote-card{
    max-width:900px;
    margin:auto;
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(24,7,64,.08);
    padding-right: 35px;
    padding-left: 65px;
}
.form-control {
    border-radius: 8px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
}
.radio-inline{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    margin-left:38px !important;
}

/* ─────────────────────────────────────
   12. RESPONSIVE - MOBILE & TABLET (MIS À JOUR)
   ───────────────────────────────────── */

@media (max-width: 991px) {
  /* --- MENU HAMBURGER (NOUVEAU) --- */
  
  /* Permet de positionner le bouton hamburger */
  .header-container {
    position: relative !important;
    flex-wrap: nowrap !important; /* Évite que le logo casse la ligne */
    justify-content: space-between !important;
    padding: 0 1.5rem !important;
    height: 60px !important;
  }

  .header-logo {
    width: auto !important;
    text-align: left !important;
  }

  /* Cache le CTA sur mobile pour faire de la place (Optionnel) 
     Ou ajustez sa position si vous souhaitez le garder visible */
  .header-cta {
    display: none !important; 
  }

  /* On transforme la navigation en menu déroulant masqué par défaut */
  .header-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    
    /* Masqué par défaut */
    display: none !important; 
    z-index: 999 !important;
  }

  /* CLASSE À ACTIVER EN JS (:target ou via une classe .open) */
  /* Si vous utilisez du JS simple, vous ajouterez la classe .open à .header-nav */
  .header-nav.open, 
  .header-nav:target {
    display: flex !important;
  }

  .nav-link {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem !important;
    border-bottom: 1px solid #f5f5f5 !important;
  }

  /* --- ADAPTATION DU BOUTON CONNEXION POUR LE MOBILE --- */
  /* On force l'affichage du bloc CTA et du bouton à l'intérieur de la navigation mobile */
  .header-nav .header-cta {
    display: block !important;
    width: 100% !important;
    padding: 1rem !important;
    text-align: center !important;
  }

  /* Transformation du bouton Connexion en lien classique ou bouton adapté */
  .header-nav .btn-client-account {
    display: inline-block !important;
    width: 80% !important; /* Ne prend pas toute la largeur pour garder un aspect bouton */
    max-width: 300px !important;
    text-align: center !important;
    padding: 12px 0 !important;
    background: #e27f21 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
  }

  /* Création visuelle de l'icône Hamburger (☰) */
  .header-container::after {
    content: "☰" !important;
    font-size: 28px !important;
    color: #303030 !important;
    cursor: pointer !important;
    display: block !important;
    order: 2 !important;
  }

  /* --- ALIGNEMENT DES RADIOS (CORRIGÉ) --- */
  .radio-inline {
    display: flex !important;
    align-items: center !important;
    margin-left: 35px !important; /* Force l'alignement à gauche comme les inputs */
    padding-left: 0 !important;
    margin-bottom: 12px !important;
    width: 100% !important; /* S'assure que le bloc prend la largeur disponible */
  }

  /* Ajustement de la boîte du formulaire pour éviter les padding fantômes */
  .quote-card {
    width: 100% !important;
    padding: 25px !important; /* Aligne le contenu interne */
    border-radius: 18px !important;
  }

  /* --- RESTE DU LAYOUT VERTICAL --- */
  .quote-layout {
    display: block !important;
  }

  .quote-sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
  }

  .sidebar-content {
    padding: 40px 25px !important;
  }

  .sidebar-content h1 {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }

  .sidebar-content p {
    font-size: 14px !important;
  }

  .sidebar-stats {
    grid-template-columns: 1fr !important;
  }

  .quote-main {
    padding: 20px !important;
  }

  .quote-header h2 {
    font-size: 28px !important;
  }

  .col-md-6 {
    width: 100% !important;
  }

  .submit-btn-wrapper {
    justify-content: center !important;
  }

  #form_submit {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .form-group:last-of-type {
    margin-right: 0 !important;
  }
}

/* Très petits mobiles */
@media (max-width: 576px) {
  .header-container {
    padding: 0 15px !important;
  }

  .sidebar-content {
    padding: 30px 20px !important;
  }

  .sidebar-content h1 {
    font-size: 24px !important;
    font-weight: 600;
  }

  .quote-main {
    padding: 15px !important;
  }

  .quote-card {
    padding: 20px !important;
  }

  .quote-header h2 {
    font-size: 24px !important;
  }

  .form-control {
    font-size: 16px !important;
  }

    .control-label {
        font-size: 14px !important;

    }

    .form-control {
        font-size: 14px !important;

    }

    /* ========================================================
   ALIGNEMENT MODERNE ET HORIZONTAL DES STATS (MOBILE)
   ======================================================== */

    .sidebar-stats {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 30px !important;
    }

    .sidebar-stats .stat-card {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 12px 5px !important; /* Moins de padding pour gagner de la place */
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }

    .sidebar-stats .stat-card strong {
        font-size: 20px !important; /* Chiffres légèrement plus petits sur mobile */
        margin-bottom: 4px !important;
    }

    .sidebar-stats .stat-card span {
        font-size: 11px !important; /* Texte compact et lisible */
        line-height: 1.2 !important;
        display: block !important;
    }
}

/* Ajustements fins pour les très petits mobiles (max 400px) */
@media (max-width: 400px) {
    .sidebar-stats {
        gap: 6px !important;
    }
    .sidebar-stats .stat-card strong {
        font-size: 18px !important;
    }
    .sidebar-stats .stat-card span {
        font-size: 10px !important;
    }
}