#diagnosticForm.diagnostic-form {
    all: unset; /* Désactive la grande majorité des héritages CSS globaux de l'ancien formulaire */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Masque les étapes inactives */
.diagnostic-step[hidden] {
    display: none !important;
}

/* Arrière-plan (Overlay) */
.diagnostic-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.diagnostic-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

/* Conteneur principal (Hauteur fixe unifiée, position relative pour ancrer le footer) */
.diagnostic-modal__content {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 650px;
    height: 900px; /* Hauteur fixe souhaitée sur grand écran */
    max-height: 90vh; /* Sécurité si l'écran est plus petit */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 10;
    overflow: hidden; /* Empêche les éléments de dépasser des coins arrondis */
}

/* Bouton de fermeture (Croix) */
.diagnostic-modal__close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    z-index: 15;
    line-height: 1;
}
.diagnostic-modal__close:hover {
    color: #000;
}

/* En-tête (Header) */
.diagnostic-modal__header {
    padding: 20px 25px 10px 25px;
    flex-shrink: 0;
}
.diagnostic-modal__header h2 {
    margin: 0 0 5px 0;
    font-size: 1.25rem;
    color: #1e1e1e;
}
.diagnostic-modal__header p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* Barre de progression */
.diagnostic-modal__progress {
    padding: 0 25px 15px 25px;
    flex-shrink: 0;
}
.diagnostic-modal__progress-track {
    background: #e0e0e0;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.diagnostic-modal__progress-track span {
    display: block;
    height: 100%;
    background: var(--bs-primary, #f6ee1e);
    transition: width 0.3s ease;
}
.diagnostic-modal__progress-text {
    font-size: 0.8rem;
    color: #888;
    text-align: right;
}

/* Zone des étapes */
.diagnostic-step {
    padding: 0 25px 110px 25px; 
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

.diagnostic-step h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #1e1e1e;
}

.diagnostic-step__question {
    margin: 0 0 20px 0;
    font-size: 0.95rem;
    color: #444;
}

/* Grille des choix en 2 colonnes */
.diagnostic-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin-bottom: 20px;
}

.diagnostic-option {
    display: flex;
    cursor: pointer;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 0;
    transition: all 0.2s ease;
    background: #fafafa;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    height: 140px;
}

.diagnostic-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: 3;
}

.diagnostic-option:hover {
    border-color: var(--bs-primary, #f6ee1e);
}

.diagnostic-option input[type="radio"]:checked ~ .diagnostic-option__content,
.diagnostic-option:has(input[type="radio"]:checked) {
    border-color: var(--bs-primary, #f6ee1e);
}

.diagnostic-option input[type="radio"]:checked + .diagnostic-option__content::after,
.diagnostic-option:has(input[type="radio"]:checked)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.diagnostic-option__content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centré verticalement */
    align-items: center;     /* Centré horizontalement */
    width: 100%;
    height: 100%;
    position: relative;
}

.diagnostic-option__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    z-index: 0;
}

.diagnostic-option__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Label centré et agrandi à 1rem */
.diagnostic-option__label {
    position: relative;
    z-index: 2;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   AJUSTEMENT : OPTION SANS IMAGE (TOUJOURS CENTRÉE)
   ========================================================= */
.diagnostic-option:not(:has(.diagnostic-option__image)) {
    height: auto;
    min-height: 80px; /* Conserve une belle présence verticale */
    padding: 12px;
    background: #fafafa;
}
.diagnostic-option:not(:has(.diagnostic-option__image)) .diagnostic-option__content {
    justify-content: center;
    align-items: center;
}
.diagnostic-option:not(:has(.diagnostic-option__image)) .diagnostic-option__label {
    background: none;
    color: #333;
    text-shadow: none;
    padding: 0;
    text-align: center; /* Alignement centré garanti */
}

/* Champs de texte, textarea et adresses */
.diagnostic-fields, .diagnostic-field {
    width: 100%;
    margin-bottom: 15px;
}

.diagnostic-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.diagnostic-field input[type="text"],
.diagnostic-field input[type="tel"],
.diagnostic-field input[type="email"],
.diagnostic-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.diagnostic-field input:focus,
.diagnostic-field textarea:focus {
    outline: none;
    border-color: #000;
}

.diagnostic-fields__row {
    display: flex;
    gap: 10px;
}

/* =========================================================
   RÉSUMÉ & CAPTCHA
   ========================================================= */
.diagnostic-summary {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 15px;
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.diagnostic-summary__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
}

.diagnostic-summary__item:last-child {
    border-bottom: none;
}

.diagnostic-summary__item span {
    color: #666;
}

.diagnostic-summary__item strong {
    color: #111;
    text-align: right;
}

.diagnostic-rgpd__text { font-size: .65rem; color: #6c757d; margin: 0 0 .75rem; }
.diagnostic-rgpd__optout {
    display: flex; gap: .5rem; align-items: flex-start;
    font-size: .65rem;  
    padding: .5rem; background: #fff; cursor: pointer; margin-bottom: .75rem;
}
.diagnostic-captcha__image { text-align: left; font-size: .70rem; background: #fff;   }

.diagnostic-captcha label[for="diagnostic_kode"] {
    flex: 1 1 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.diagnostic-field-error, .diagnostic-alert--error {
    color: #d9534f;
    font-size: 0.8rem;
    margin-top: 5px;
}

/* =========================================================
   PIED DE PAGE (FOOTER)
   ========================================================= */
.diagnostic-modal__footer,
.diagnostic-actions {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    z-index: 20;
}

#diagnosticBack,
.diagnostic-button--secondary {
    width: 40% !important;
}

#diagnosticNext,
#diagnosticSubmit,
.diagnostic-button--primary {
    width: 40% !important;
}

.diagnostic-button {
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.2s;
    display: inline-block;
}

.diagnostic-button--secondary {
    background: #e0e0e0;
    color: #333;
}
.diagnostic-button--secondary:hover {
    background: #d0d0d0;
}

.diagnostic-button--primary {
    background: var(--bs-primary, #f6ee1e);
    color: var(--text-on-primary, #000);
}
.diagnostic-button--primary:hover {
    background: var(--hover, #f70202);
    color: var(--text-on-hover, #fff);
}

.diagnostic-honeypot {
    display: none;
}

/* =========================================================
   CONTRAINTES MOBILE
   ========================================================= */
@media (max-width: 768px) {
    .diagnostic-modal {
        padding: 20px 5px;
        align-items: stretch;
    }

    .diagnostic-modal__content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 8px;
    }

    .diagnostic-modal__footer,
    .diagnostic-actions {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .diagnostic-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .diagnostic-option {
        height: 120px;
    }

    .diagnostic-option:not(:has(.diagnostic-option__image)) {
        height: auto;
        min-height: 60px;
    }
}

/* =========================================================
   FORMULAIRE AFFICHE DANS LA PAGE (remplace la modale)

   La modale imposait une boite de 900px de haut, un defilement
   interne et une barre de boutons en position absolue. Dans une
   page, ce decoupage ne tient pas : des que l'etape est haute
   (coordonnees, validation), qu'un message d'erreur s'ajoute ou
   que le clavier du mobile s'ouvre, le bas du formulaire sort de
   la zone visible ou se retrouve coupe par overflow: hidden.

   Ici on suit le flux normal : la boite s'adapte a son contenu,
   la barre de boutons suit le contenu, et c'est la page qui
   defile. Aucun calcul de hauteur d'ecran, donc rien a casser.

   Toutes les regles sont prefixees par .diagnostic-inline : la
   modale encore utilisee par les autres sites n'est pas modifiee.
   ========================================================= */
.diagnostic-inline {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 650px;
    margin: 0 auto 2rem;
    height: auto;
    max-height: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    scroll-margin-top: calc(var(--diagnostic-offset, 90px) + 15px);
}

/* Le formulaire ne fait plus 100% d'une boite a hauteur fixe */
.diagnostic-inline #diagnosticForm.diagnostic-form {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Plus de defilement interne ni de reserve pour la barre flottante */
.diagnostic-inline .diagnostic-step {
    overflow: visible;
    min-height: 0;
    padding-bottom: 20px;
    width: 100%;
}

/* La barre de boutons devient le dernier element du formulaire */
.diagnostic-inline .diagnostic-actions {
    position: static;
    width: auto;
    padding: 14px 25px 18px;
    border-top: 1px solid #ececec;
    gap: 10px;
}

/* Des la premiere reponse, l'entete et le contenu SEO se replient.
   --diagnostic-offset est la hauteur reelle du menu fixe, mesuree
   par diagnostic.js, pour que le formulaire ne passe pas dessous. */
body.diagnostic-encours .diagnostic-avant-demarrage {
    display: none;
}

body.diagnostic-encours .diagnostic-inline {
    margin-top: calc(var(--diagnostic-offset, 90px) + 15px);
}

@media (max-width: 575px) {
    .diagnostic-inline {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

/* =========================================================
   OPTIONS AVEC ICONE ET DESCRIPTION (etape "taille du projet")
   ========================================================= */
.diagnostic-option__icon {
    display: block;
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 4px;
}

.diagnostic-option__description {
    display: block;
    font-size: .75rem;
    color: #6c757d;
    margin-top: 4px;
}

/* =========================================================
   CARTES AVEC IMAGE EN FOND (etape "votre projet")
   ========================================================= */
.diagnostic-option--carte {
    height: 160px;
}

.diagnostic-option--carte .diagnostic-option__image,
.diagnostic-option--carte .diagnostic-option__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diagnostic-option--carte .diagnostic-option__label--overlay {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}