/* Styles CSS améliorés */
  body {
    font-family: 'Segoe UI', Arial, sans-serif; 
    background: #f0f2f5; /* Fond légèrement gris pour un look moderne */
    margin: 0; 
    padding: 20px; 
    box-sizing: border-box;
    color: #333; /* Couleur de texte par défaut */
  }
  .form-container {
    max-width: 700px; /* Légèrement plus large pour le confort */
    margin: 20px auto; 
    background: #fff; 
    padding: 30px; 
    border-radius: 12px; /* Coins plus arrondis */
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Ombre plus douce */
  }
  
  /* Styles pour l'en-tête principal du simulateur */
  .form-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .form-header h1 {
    font-size: 2.2rem; /* Taille augmentée */
    color: #2c3e50; /* Bleu ardoise foncé */
    margin-bottom: 8px;
    font-weight: 600;
  }
  .form-header p {
    font-size: 1rem;
    color: #555; /* Gris foncé pour le sous-titre */
    margin-top: 0;
  }

  /* Styles pour le navigateur d'étapes */
  .step-navigator {
    display: flex;
    justify-content: space-around; /* Ou space-between pour étirer */
    margin-bottom: 35px; /* Plus d'espace en dessous */
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
  }
  .step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem; /* Taille du texte du libellé d'étape */
    color: #777; /* Couleur pour les étapes inactives */
    position: relative;
    padding: 5px;
    flex-basis: 0; /* Permet une distribution égale de l'espace */
    flex-grow: 1;
    text-align: center;
  }
  .step-number {
    width: 40px; /* Taille du cercle augmentée */
    height: 40px; /* Taille du cercle augmentée */
    border-radius: 50%;
    background-color: #ced4da; /* Gris clair pour les étapes inactives */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem; /* Taille du chiffre augmentée */
    font-weight: bold;
    margin-bottom: 8px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  }
  .step-label {
    font-weight: 500;
    transition: color 0.3s ease;
  }
  .step-indicator.active .step-number {
    background-color: #28a745; /* Couleur verte principale pour l'étape active */
    color: #fff;
    transform: scale(1.1); /* Effet de zoom léger */
  }
  .step-indicator.active .step-label {
    color: #28a745; /* Couleur verte pour le libellé actif */
    font-weight: 600;
  }
   /* Ligne décorative sous le numéro de l'étape active */
  .step-indicator.active::after {
    content: '';
    position: absolute;
    bottom: -16px; /* Positionné pour s'aligner avec la bordure du .step-navigator */
    left: 50%;
    transform: translateX(-50%);
    width: 70%; /* Largeur de la ligne */
    max-width: 60px; /* Largeur max pour la ligne */
    height: 3px;
    background-color: #28a745;
    border-radius: 2px;
  }


  .form-step h2 {
    text-align: center; 
    margin-top: 10px; /* Espace par rapport au navigateur d'étapes */
    margin-bottom: 30px; /* Espace avant les champs */
    color: #1c3a50; /* Nouvelle couleur pour les titres d'étape (plus foncé) */
    font-size: 1.7rem; /* Taille ajustée */
    font-weight: 600;
  }
  label { /* Style amélioré pour les libellés */
    display: block;
    margin-bottom: 6px; /* Espace réduit sous le label */
    font-weight: 600; /* Labels plus en évidence */
    color: #34495e; /* Couleur de label plus foncée et distincte */
    font-size: 0.95rem; /* Taille légèrement augmentée pour la lisibilité */
  }
  /* Libellés de section pour distinguer les étapes du formulaire */
  .section-label {
    font-size: 1.4rem; /* Taille plus grande pour mise en avant */
    color: #0069d9;    /* Couleur visible aidant à repérer l'étape */
    display: block;
    margin-bottom: 10px;
  }
  /* S'assurer que les labels dans les wrappers conditionnels cachés ne sont pas affectés par la logique de couleur */
  .hidden-by-logic label {
    color: #aaa; /* Reste grisé si caché par la logique JS */
  }

  input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select {
    width: 100%; 
    padding: 12px; /* Padding augmenté */
    margin-top: 4px; /* Espace réduit au-dessus */
    margin-bottom: 20px; 
    border: 1px solid #ced4da; /* Bordure plus claire */
    border-radius: 6px; /* Coins légèrement plus arrondis */
    box-sizing: border-box; 
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus {
    border-color: #28a745; 
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15); /* Ombre de focus plus subtile */
    outline: none; /* Supprimer l'outline par défaut du navigateur */
  }

  select option[disabled] {color: #aaa;} 
  select option:disabled { background-color: #f0f0f0; color: #999; } 

  .checkbox-group div {margin-bottom: 15px;}
  .checkbox-group label {display: block; margin-bottom: 8px; font-weight: normal; color: #333;}
  .checkbox-group input[type="checkbox"] {margin-right: 10px; width: auto; vertical-align: middle;}
  
  button {
    background: #28a745; 
    color: white; 
    border: none; 
    padding: 12px 20px; 
    border-radius: 6px; 
    margin-top: 20px; 
    margin-right: 10px; 
    cursor: pointer; 
    font-size: 1rem; 
    transition: background-color 0.3s ease, transform 0.1s ease; 
    font-weight: 500;
  }
  button:hover {background: #218838;}
  button:active { transform: translateY(1px); } /* Léger effet d'enfoncement */

  button[type="submit"] {background-color: #007bff;}
  button[type="submit"]:hover {background-color: #0056b3;}

  .form-step {display: none;} /* Caché par défaut, géré par JS */
  /* Zone de navigation entre les étapes */
  .form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  .prev-link {
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
  }

  .prev-link:hover { text-decoration: underline; }
  /* #form-step-1 est géré par JS pour être affiché au début */

  #property_usage_wrapper, #gaz_options, #pac_options {display: none; margin-left: 20px; border-left: 2px solid #eee; padding-left: 15px; margin-top: -10px; margin-bottom: 20px;}
  #heating_installation_year_wrapper, #ecs_installation_year_wrapper { display: block; }
  #double_glazing_age_wrapper { display: block; }


  .conditional-group {padding: 15px; margin-bottom: 15px; background-color: #fdfdfd; border: 1px dashed #eee; border-radius: 4px;}
  @media (max-width: 640px) {
    .form-container {padding: 20px;}
    button {width: 100%; margin-right: 0; margin-bottom: 10px;}
    button:last-of-type {margin-bottom: 0;}
    .form-navigation button {width: auto; margin-bottom: 0;}
  }
  label[for="rgpd_optin"] {display: flex; align-items: center; font-weight: normal;}
  input[name="rgpd_optin"] {width: auto; margin-right: 10px; margin-bottom: 0;}
  .hidden-by-logic { display: none !important; }
  .error-message { color: red; font-size: 0.9em; margin-top: -15px; margin-bottom: 10px; display: none; }
  input.input-error, select.input-error { border-color: red !important; }

  /* NOUVEAUX STYLES POUR LES BOUTONS SVG */
  .icon-button-group {
    display: grid;
    gap: 10px;
    margin-bottom: 20px; 
  }
  .icon-button-group.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .icon-button-group.cols-3 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
   .icon-button-group.cols-flexible {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
  }
  .icon-button-group.cols-even-taller { 
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }


  .icon-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 5px; 
    border: 2px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    font-size: 0.80rem; 
    color: #333;
    line-height: 1.2; 
    min-height: 70px; 
  }
  .icon-button svg {
    width: 26px; 
    height: 26px; 
    margin-bottom: 5px; 
    color: #28a745; 
  }
  .icon-button:hover {
    border-color: #28a745;
    background-color: #f0f9f3; 
  }
  .icon-button.selected {
    border-color: #28a745;
    background-color: #e9f7ef; 
    color: #1c6b39; 
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
  }
  .icon-button.disabled { 
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
    border-color: #e0e0e0;
  }
   .icon-button.disabled:hover {
    border-color: #e0e0e0; 
    background-color: #f8f9fa;
  }


  .hidden-select {
    display: none !important; 
  }
  .icon-button-group.input-error { 
    border: 1px solid red !important;
    padding: 5px;
    border-radius: 8px; 
  }

/* Styles pour la page de résultat (pour traitement.php) */
.result-container {max-width: 600px; width: 100%; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); text-align: center;}
.result-container h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.6rem; color: #2c3e50; }
.result-container p { margin-bottom: 10px; font-size: 1.1rem; color: #555; line-height: 1.5; }
.dpe-letter { font-size: 5rem; font-weight: bold; display: block; margin: 10px 0 15px 0; line-height: 1; }
.dpe-A { color: #319931; }
.dpe-B { color: #51b036; }
.dpe-C { color: #cadb2a; }
.dpe-D { color: #f5d527; }
.dpe-E { color: #f2a431; }
.dpe-F { color: #f0703e; }
.dpe-G { color: #ea3541; }
.note-box {
  display: inline-block;
  padding: 20px;
  border-radius: 8px;
  margin: 15px auto;
}
.note-box .dpe-letter {
  color: #fff;
}
.note-box.good { background-color: #28a745; }
.note-box.average { background-color: #fd7e14; }
.note-box.bad { background-color: #dc3545; }
#dpe-result { text-align: center; }
.error-container { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 20px; border-radius: 8px; }
.error-container ul { list-style: disc; padding-left: 20px; text-align: left; margin-top: 10px;}
.error-container li { margin-bottom: 5px; }
.error-container a { color: #721c24; text-decoration: underline; font-weight: bold;}
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }