/* =========================================================================
   FORMULAIRE DE DEVIS LICIEL : habillage aux couleurs du site
   Fichier : /css/override_erp_rdv_diag.css  (remplace l'ancien EN ENTIER)
   =========================================================================

   A LIRE AVANT DE TOUCHER A CE FICHIER

   1. Le formulaire n'est PAS une iframe. Le site recupere son HTML cote
      serveur et l'injecte dans <div id="rdv_diag_erp"> : tout le CSS de la
      page s'y applique.

   2. Les feuilles de Liciel sont inserees DANS le formulaire, donc APRES
      celle-ci. A specificite egale elles gagneraient. Tous les selecteurs
      commencent donc par #rdv_diag_erp#rdv_diag_erp : l'identifiant double
      compte deux fois. Ce n'est pas une coquille, ne pas le simplifier.

   3. Les couleurs viennent du theme du site (--c-accent, --c-text...) : le
      meme fichier habille chaque site a SA couleur. Les valeurs apres la
      virgule ne servent que si un theme ne les definit pas.

   4. Le site retire bootstrap.min.css. Deux consequences traitees ici :
      les fenetres modales (section MODALES, ne pas la supprimer) et la
      grille des diagnostics (section DIAGNOSTICS).

   5. ESPACEMENTS : uniquement 4, 8, 12, 16 et 20 px (variables --dv-s1 a
      --dv-s5), plus 32 px (--dv-s6) reserve a l'ecart entre deux grands
      blocs d'une etape. Ne pas reintroduire de valeur hors de cette echelle.

   7. COULEURS : aucune en dur hors des jetons (section 0). Tout decoule de la
      charte du site (--c-bg, --c-text, --c-accent...) : sur un fond sombre
      qui redefinit ces variables, le formulaire suit.

      INTEGRER UN SITE SOMBRE : rien a changer ici. Dans la feuille du site,
      donner des valeurs sombres aux variables et declarer color-scheme (listes
      deroulantes et selecteur de fichier du systeme en sombre) :
        :root {
            color-scheme: dark;
            --c-bg: #10151d;      fond de page ET des champs
            --c-surface: #1a212b; fonds doux, un cran plus clair
            --c-border: #2b3441;
            --c-text: #e6e9f0;
            --c-muted: #9aa4b4;
            --c-accent: ...;      version ECLAIRCIE de la couleur du client,
            --c-accent-ink: ...;  et le texte lisible dessus (souvent fonce)
        }
      Pour une seule section sombre, meme bloc sur la section au lieu de :root.

   8. VERSION ANIMEE ("gamifiee", section 15) : active quand le conteneur porte
      la classe dv-gamifie, soit <div id="rdv_diag_erp" class="dv-gamifie">.
      Sans la classe, le formulaire garde la version sobre des sections 0 a 14.

   6. GABARIT UNIQUE : champs, listes, adresse, tuiles de diagnostic et
      boutons partagent la meme hauteur (--dv-h) et le meme rayon (--dv-r).
      C'est ce qui les rend homogenes d'une etape a l'autre.
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. JETONS
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp {
    /* Couleur d'accent, dans cet ordre :
       1. --c-accent : la charte du site (sites 2026, generee par la Factory) ;
       2. --lw-main-color : la couleur principale reglee dans l'admin (onglet
          Devis), posee sur <html> par le proxy. Sert sur les sites qui n'ont
          pas le theme 2026 ;
       3. un bleu par defaut. */
    --dv-accent: var(--c-accent, var(--lw-main-color, #1b6ec2));
    --dv-accent-ink: var(--c-accent-ink, #ffffff);
    --dv-text: var(--c-text, #1f2430);
    --dv-muted: var(--c-muted, #5b6472);
    --dv-surface: var(--c-surface, #f4f6fa);
    --dv-border: var(--c-border, #e6e9f0);
    --dv-font: var(--font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    /* Fond des champs, tuiles, listes : le fond de la page. Aucun blanc en dur
       dans ce fichier : sur un fond sombre (theme ou section sombre qui
       redefinit --c-bg, --c-text...), le formulaire suit sans retouche. */
    --dv-bg: var(--c-bg, #ffffff);

    /* Derivees de l'accent : suivent la couleur du client. */
    --dv-soft: color-mix(in srgb, var(--dv-accent) 8%, var(--dv-bg));
    --dv-ring: color-mix(in srgb, var(--dv-accent) 24%, transparent);
    --dv-border-hover: color-mix(in srgb, var(--dv-accent) 40%, var(--dv-border));
    --dv-accent-hover: color-mix(in srgb, var(--dv-accent) 86%, #000000);

    /* Messages (succes, erreur). Fond = une touche de la teinte sur le fond de
       la page ; texte = la teinte melangee au texte de la page : rouge ou vert
       fonce sur fond clair, rouge ou vert clair sur fond sombre. */
    --dv-success: #1f9d55;
    --dv-danger: #d92d20;
    --dv-success-bg: color-mix(in srgb, var(--dv-success) 12%, var(--dv-bg));
    --dv-success-ink: color-mix(in srgb, var(--dv-success) 65%, var(--dv-text));
    --dv-danger-bg: color-mix(in srgb, var(--dv-danger) 10%, var(--dv-bg));
    --dv-danger-ink: color-mix(in srgb, var(--dv-danger) 65%, var(--dv-text));

    /* Echelle d'espacement : rien en dehors. */
    --dv-s1: 4px;
    --dv-s2: 8px;
    --dv-s3: 12px;
    --dv-s4: 16px;
    --dv-s5: 20px;
    /* Seul palier au-dela : l'ecart entre deux grands blocs d'une etape
       (description du bien / diagnostics). */
    --dv-s6: 32px;

    /* Gabarit commun a tous les elements de saisie et boutons. */
    --dv-h: 48px;
    --dv-r: 12px;
    --dv-icon: 20px;

    /* Coche : deux segments droits (le caractere coche des polices a une
       barre courbe, jugee datee). Utilisee en MASQUE : sa couleur est le fond
       de l'element qui la porte. */
    --dv-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* Texte pose sur l'accent, quand le site ne le fournit pas (anciens sites,
   sans --c-accent-ink) : choisi d'apres la clarte de la couleur principale
   reglee chez le client. Noir sur une couleur claire (vert anis, jaune,
   orange clair), blanc sinon. Sans cette regle, blanc partout : illisible
   sur #89B832 par exemple. Navigateurs trop anciens : blanc (valeur ci-dessus). */
@supports (color: oklch(from red l c h)) {
    #rdv_diag_erp#rdv_diag_erp {
        --dv-accent-ink: var(--c-accent-ink, oklch(from var(--dv-accent) clamp(0, (0.62 - l) * 1000, 1) 0 0));
    }
}

/* Les variables de Liciel, rebranchees sur nos jetons : l'orange disparait
   de toutes leurs regles d'un coup. Redefinies sur les ENFANTS et non sur le
   conteneur : --dv-accent ci-dessus lit encore la valeur de l'admin heritee
   de <html>, qu'une redefinition au meme niveau masquerait. */
#rdv_diag_erp#rdv_diag_erp > * {
    --lw-main-color: var(--dv-accent);
    --lw-secondary-color: var(--dv-text);
    --lw-tertiary-color: var(--dv-accent);
}


/* -------------------------------------------------------------------------
   1. CONTENEUR
   Incruste dans la page : ni fond, ni cadre, ni ombre, ni retrait. Le
   formulaire s'aligne ainsi sur le titre et le contenu de la page, qui
   gere deja ses marges (15 px en mobile compris).
   L'ancien fichier le decalait de 40 px vers le bas (top: 40px) : remis a 0.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp {
    position: relative;
    top: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--dv-text);
    font-family: var(--dv-font) !important;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp *,
#rdv_diag_erp#rdv_diag_erp input,
#rdv_diag_erp#rdv_diag_erp select,
#rdv_diag_erp#rdv_diag_erp textarea,
#rdv_diag_erp#rdv_diag_erp button {
    font-family: var(--dv-font) !important;
}


/* -------------------------------------------------------------------------
   2. NEUTRALISATIONS
   Des regles Liciel qui abimaient tout le formulaire, corrigees une fois
   pour toutes ici plutot que composant par composant.
   ------------------------------------------------------------------------- */

/* Survol qui faisait palir les textes. La regle Liciel est ".btn :hover"
   AVEC un espace : elle vise tout ce que CONTIENT un bouton. Survoler
   "Suivant", c'est survoler son libelle, qui passait a 80 %. */
#rdv_diag_erp#rdv_diag_erp .btn *,
#rdv_diag_erp#rdv_diag_erp .btn :hover,
#rdv_diag_erp#rdv_diag_erp .container-check > *,
#rdv_diag_erp#rdv_diag_erp .container-check:hover > * {
    opacity: 1;
}

/* Flash sombre en quittant une tuile. Au survol, la feuille du site pose
   "filter: brightness(1.08)" sur tout .btn, et Liciel un translate3d sur les
   tuiles : le bouton passe alors sur un calque graphique que le navigateur
   detruit a la sortie du survol, en peignant parfois une image sombre au
   passage. Nos survols jouent sur la couleur : filtre et deplacement ne
   servent a rien, on les coupe dans tous les etats. */
#rdv_diag_erp#rdv_diag_erp .btn,
#rdv_diag_erp#rdv_diag_erp .btn:hover,
#rdv_diag_erp#rdv_diag_erp .btn:focus,
#rdv_diag_erp#rdv_diag_erp .btn:active {
    filter: none !important;
    transform: none !important;
}

/* Grille Bootstrap absente : les colonnes gardaient les marges et retraits
   que Liciel leur ajoute (7,5 px, 15 px...). On les remet a zero, chaque
   composant gere son propre espacement. */
#rdv_diag_erp#rdv_diag_erp .row {
    margin: 0 !important;
    padding: 0 !important;
}
#rdv_diag_erp#rdv_diag_erp .row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}
#rdv_diag_erp#rdv_diag_erp .step-wizard { min-height: 0; margin: 0; }
#rdv_diag_erp#rdv_diag_erp .form-group { margin: 0; }
#rdv_diag_erp#rdv_diag_erp .clearfix { display: none; }

/* Icones Font Awesome : la police n'est pas chargee sur le site, ces
   balises ne dessinaient rien mais prenaient de la place. */
#rdv_diag_erp#rdv_diag_erp .fa { display: none !important; }

/* Une icone SVG de Liciel embarque dans son propre code une regle GLOBALE
   ".cls-1 { opacity: 0.2 }" : toute icone portant cette classe, n'importe ou
   dans la page, tombait a 20 %. Filet de securite pour toutes ; le fil
   d'etapes, plus specifique, garde son propre reglage. */
#rdv_diag_erp#rdv_diag_erp svg .cls-1,
#rdv_diag_erp#rdv_diag_erp svg path { opacity: 1 !important; }

/* Retrait ecrit EN LIGNE par Liciel (style="padding: 25px 0") : il creusait
   25 px de vide en haut de la carte. */
#rdv_diag_erp#rdv_diag_erp .panel,
#rdv_diag_erp#rdv_diag_erp .panel-body {
    padding: 0 !important;
    background: none !important;
    border: 0;
    box-shadow: none !important;
    text-align: left;
    text-transform: none !important;
}

#rdv_diag_erp#rdv_diag_erp h2,
#rdv_diag_erp#rdv_diag_erp h3,
#rdv_diag_erp#rdv_diag_erp h4,
#rdv_diag_erp#rdv_diag_erp h5 {
    margin: 0;
    color: var(--dv-text);
    font-family: var(--dv-font) !important;
    line-height: 1.3;
}
#rdv_diag_erp#rdv_diag_erp h2 {
    margin: 0 0 var(--dv-s3);
    font-size: 18px;
    font-weight: 700;
}
#rdv_diag_erp#rdv_diag_erp .control-label h4 {
    margin: 0 0 var(--dv-s2);
    font-size: 13px;
    font-weight: 600;
    color: var(--dv-muted);
}


/* -------------------------------------------------------------------------
   3. FIL D'ETAPES
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp #breadcrumbs {
    gap: var(--dv-s2);
    margin: 0 0 var(--dv-s5);
    padding: 0;
    background: transparent;
    border-radius: 0;
}
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--dv-s3);
    padding: var(--dv-s3);
    background: var(--dv-surface);
    border-radius: var(--dv-r) !important;
    opacity: 1;
    transition: background-color .15s ease, box-shadow .15s ease;
}
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep.active {
    background: var(--dv-soft);
    box-shadow: inset 0 0 0 1px var(--dv-accent);
}
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .imgStep {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: var(--dv-s2);
    background: var(--dv-bg);
    border-radius: 8px;
    line-height: 1;
}
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep.active .imgStep { background: var(--dv-accent); }
/* Le picto porte une regle .cls-1 posee en ligne par le site ET par Liciel :
   seul un !important plus specifique tranche. */
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .imgStep svg,
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .imgStep .cls-1 {
    fill: var(--dv-muted) !important;
    opacity: .75 !important;
}
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep.active .imgStep svg,
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep.active .imgStep .cls-1 {
    fill: var(--dv-accent-ink) !important;
    opacity: 1 !important;
}
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .contentStepTitle { font-weight: 600; line-height: 1.3; }
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .stepNumber {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dv-muted);
}
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep.active .stepNumber { color: var(--dv-accent); }
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .stepTitle,
#rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep.active .stepTitle {
    font-size: 13px;
    color: var(--dv-text);
}


/* -------------------------------------------------------------------------
   4. ETAPE 1 : TUILES DE CHOIX
   Libelles en capitales : ils le sont dans la source Liciel, et les passer en
   minuscules abimerait un sigle chez un autre client.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp .fancy-btn-list { gap: var(--dv-s4); }
#rdv_diag_erp#rdv_diag_erp .step1-col { gap: var(--dv-s3); align-items: center; }
#rdv_diag_erp#rdv_diag_erp .btn-label {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .06em;
    text-align: left;
    color: var(--dv-muted);
}
#rdv_diag_erp#rdv_diag_erp #type-transaction,
#rdv_diag_erp#rdv_diag_erp .step1-col > .d-flex:not(.btn-label) {
    flex-wrap: wrap;
    gap: var(--dv-s2);
}
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn {
    min-width: 96px;
    max-width: none;
    height: auto;
    min-height: 88px;
    margin: 0;
    padding: var(--dv-s3) var(--dv-s2);
    background-color: var(--dv-bg) !important;
    border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-r);
    box-shadow: none !important;
    color: var(--dv-text) !important;
    font-size: 12px;
    font-weight: 600 !important;
    letter-spacing: .02em;
    white-space: normal;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn:hover {
    background-color: var(--dv-soft) !important;
    border-color: var(--dv-border-hover) !important;
}
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dv-ring) !important;
}
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn.active {
    background-color: var(--dv-accent) !important;
    border-color: var(--dv-accent) !important;
    color: var(--dv-accent-ink) !important;
}
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn svg { width: 28px; height: 28px; }
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn .cls-1,
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn svg path {
    fill: var(--dv-accent) !important;
    opacity: 1 !important;
}
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn.active .cls-1,
#rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn.active svg path {
    fill: var(--dv-accent-ink) !important;
}
#rdv_diag_erp#rdv_diag_erp .btn.btn-block div > span {
    display: block;
    padding-top: var(--dv-s2);
    line-height: 1.25;
}


/* -------------------------------------------------------------------------
   5. CHAMPS : UN SEUL GABARIT
   Il y avait trois styles : le champ d'adresse (texte 50 % plus gros, sans
   picto), les listes (hautes, a deux lignes) et les champs a picto. Tous
   partagent maintenant hauteur, bordure, rayon, retrait et taille de picto.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp .input-wrapper,
#rdv_diag_erp#rdv_diag_erp #address-bien,
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header {
    box-sizing: border-box;
    min-height: var(--dv-h);
    margin: 0;
    background-color: var(--dv-bg);
    border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-r);
    box-shadow: none;
    color: var(--dv-text);
    font-size: 16px;
    opacity: 1;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper:hover,
#rdv_diag_erp#rdv_diag_erp #address-bien:hover,
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select:hover .wizard-custom-select-header {
    border-color: var(--dv-border-hover) !important;
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper:has(input:focus),
#rdv_diag_erp#rdv_diag_erp .input-wrapper:has(textarea:focus),
#rdv_diag_erp#rdv_diag_erp #address-bien:focus,
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select:has(select:focus) .wizard-custom-select-header {
    border-color: var(--dv-accent) !important;
    box-shadow: 0 0 0 3px var(--dv-ring);
    outline: none;
}

/* iPhone : Safari zoome sur la page des qu'on touche un champ dont le texte
   fait MOINS de 16 px. Tous les champs sont donc a 16 px, les listes aussi
   (le vrai <select>, invisible, est celui qui recoit le toucher). Filet
   general ici, pour tout champ que Liciel ajouterait plus tard. */
#rdv_diag_erp#rdv_diag_erp input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]),
#rdv_diag_erp#rdv_diag_erp select,
#rdv_diag_erp#rdv_diag_erp textarea {
    font-size: 16px !important;
}

/* Les champs a picto (coordonnees). */
#rdv_diag_erp#rdv_diag_erp .input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--dv-s3);
    padding: 0 var(--dv-s4);
    margin: 0 0 var(--dv-s3);
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper svg {
    flex: 0 0 auto;
    width: var(--dv-icon);
    height: var(--dv-icon);
    margin: 0;
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper svg > path,
#rdv_diag_erp#rdv_diag_erp .input-wrapper .cls-1 {
    fill: var(--dv-muted) !important;
    opacity: 1 !important;
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper:has(input:focus) svg > path,
#rdv_diag_erp#rdv_diag_erp .input-wrapper:has(textarea:focus) svg > path {
    fill: var(--dv-accent) !important;
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper input,
#rdv_diag_erp#rdv_diag_erp .input-wrapper textarea {
    width: 100%;
    height: calc(var(--dv-h) - 2px);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    color: var(--dv-text);
    font-size: 16px;
}
/* Etape des coordonnees : Liciel y force "#step3-1 input { font-size: 18px;
   font-weight: bold; color: black !important }", qui gagnait a egalite
   parce qu'elle arrive apres. Les indications y etaient donc plus grosses et
   en gras, a la difference de toutes les autres etapes. */
#rdv_diag_erp#rdv_diag_erp #step3-1 input[type="text"],
#rdv_diag_erp#rdv_diag_erp #step3-1 textarea {
    color: var(--dv-text) !important;
    font-size: 16px;
    font-weight: 400;
}
#rdv_diag_erp#rdv_diag_erp input::placeholder,
#rdv_diag_erp#rdv_diag_erp textarea::placeholder {
    color: var(--dv-muted);
    font-weight: 400;
    opacity: 1;
}
/* "Code postal" et "Ville" n'ont pas de picto dans la source : leur texte
   demarrait plus a gauche que celui des autres champs. On lui laisse la place
   du picto absent, pour qu'une seule colonne de texte traverse le formulaire. */
#rdv_diag_erp#rdv_diag_erp .input-wrapper:not(:has(svg)) {
    padding-left: calc(var(--dv-s4) + var(--dv-icon) + var(--dv-s3));
}

/* Commentaire : Liciel positionnait la zone en absolu, decalee de 45 px,
   par-dessus un grand picto de bulle. Remise dans le flux. */
#rdv_diag_erp#rdv_diag_erp .input-wrapper:has(textarea) {
    align-items: flex-start;
    padding: var(--dv-s3) var(--dv-s4);
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper .background-image { position: static; z-index: auto; }
#rdv_diag_erp#rdv_diag_erp .input-wrapper textarea {
    position: static;
    height: auto;
    min-height: 96px;
    margin: 0;
    line-height: 1.5;
    resize: vertical;
}

/* Piece jointe : le bouton natif devient un petit bouton du site. */
#rdv_diag_erp#rdv_diag_erp .input-wrapper:has(input[type="file"]) { padding: var(--dv-s2) var(--dv-s4); }
#rdv_diag_erp#rdv_diag_erp .input-wrapper input[type="file"] {
    height: auto;
    margin: 0;
    color: var(--dv-muted);
    font-size: 14px;
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper input[type="file"]::file-selector-button {
    margin-right: var(--dv-s3);
    padding: var(--dv-s2) var(--dv-s3);
    background: var(--dv-surface);
    border: 0;
    border-radius: 999px;
    color: var(--dv-text);
    font: 600 13px var(--dv-font);
    cursor: pointer;
    transition: background-color .15s ease;
}
#rdv_diag_erp#rdv_diag_erp .input-wrapper input[type="file"]::file-selector-button:hover {
    background: var(--dv-soft);
    color: var(--dv-accent);
}

/* "Je n'habite pas le bien" */
#rdv_diag_erp#rdv_diag_erp .checkbox { margin: 0 0 var(--dv-s3); }
#rdv_diag_erp#rdv_diag_erp .checkbox,
#rdv_diag_erp#rdv_diag_erp .checkbox label {
    font-size: 14px;
    color: var(--dv-text);
    cursor: pointer;
}
#rdv_diag_erp#rdv_diag_erp input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 var(--dv-s2) 0 0;
    vertical-align: -4px;
    accent-color: var(--dv-accent);
    cursor: pointer;
}
/* Case dessinee avec les jetons, comme celles des diagnostics : la case
   native restait blanche sur un site sombre. Limitee aux cases visibles
   (.checkbox) : celles des diagnostics sont masquees et ne doivent pas
   reapparaitre. */
#rdv_diag_erp#rdv_diag_erp .checkbox input[type="checkbox"] {
    -webkit-appearance: none;
            appearance: none;
    display: inline-grid;
    place-content: center;
    box-sizing: border-box;
    background: var(--dv-bg);
    border: 0;
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px var(--dv-border-hover);
}
#rdv_diag_erp#rdv_diag_erp .checkbox input[type="checkbox"]:checked {
    background: var(--dv-accent);
    box-shadow: none;
}
#rdv_diag_erp#rdv_diag_erp .checkbox input[type="checkbox"]:checked::before {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--dv-accent-ink);
    -webkit-mask: var(--dv-coche) center / contain no-repeat;
            mask: var(--dv-coche) center / contain no-repeat;
}
#rdv_diag_erp#rdv_diag_erp .checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--dv-accent), 0 0 0 3px var(--dv-ring);
}


/* -------------------------------------------------------------------------
   6. ADRESSE DU BIEN, SES SUGGESTIONS ET SA ROUE DE CHARGEMENT
   ------------------------------------------------------------------------- */
/* Picto de repere : le champ n'en a pas dans la source, et c'etait le seul
   champ du formulaire sans picto. Dessine par un pseudo-element (un <input>
   n'en accepte pas, d'ou #step2, dont le champ est le premier enfant) plutot
   qu'en image de fond : il prend ainsi la couleur des autres pictos, sur fond
   clair comme sombre, et passe a l'accent quand le champ a le focus. */
#rdv_diag_erp#rdv_diag_erp #step2 { position: relative; }
#rdv_diag_erp#rdv_diag_erp #step2::before {
    content: '';
    position: absolute;
    top: calc((var(--dv-h) - var(--dv-icon)) / 2);
    left: var(--dv-s4);
    z-index: 1;
    width: var(--dv-icon);
    height: var(--dv-icon);
    background: var(--dv-muted);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#rdv_diag_erp#rdv_diag_erp #step2:has(#address-bien:focus)::before { background: var(--dv-accent); }
#rdv_diag_erp#rdv_diag_erp #address-bien {
    display: block;
    width: 100%;
    height: var(--dv-h);
    margin: 0 0 var(--dv-s3);
    /* Retrait gauche = marge + picto + ecart : le texte s'aligne sur celui des
       champs a picto, au pixel. */
    padding: 0 var(--dv-s4) 0 calc(var(--dv-s4) + var(--dv-icon) + var(--dv-s3)) !important;
    font-size: 16px;
    line-height: normal;
}

/* La roue : une icone Font Awesome, police absente du site. Elle occupait
   quand meme de la place en apparaissant, ce qui faisait sauter le contenu
   pendant la recherche. Dessinee ici, a droite DANS le champ. */
#rdv_diag_erp#rdv_diag_erp #adresse-spinner {
    position: absolute;
    top: calc((var(--dv-h) - var(--dv-icon)) / 2);
    right: var(--dv-s4);
    left: auto;
    width: var(--dv-icon);
    height: var(--dv-icon);
    margin: 0;
    pointer-events: none;
}
#rdv_diag_erp#rdv_diag_erp #adresse-spinner::after {
    content: '';
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 2px solid var(--dv-border);
    border-top-color: var(--dv-accent);
    border-radius: 50%;
    animation: dv-spin .8s linear infinite;
}

/* Les suggestions.
   Liciel fermait la liste en animant max-height de 500 px a 0 en 0,25 s,
   pour une liste d'environ 200 px : rien ne bougeait pendant plus de la
   moitie du temps, puis tout disparaissait. C'est la saccade ressentie.
   On la remplace par un fondu court.
   ATTENTION : ne PAS masquer la liste instantanement a la perte de .active.
   Cliquer une suggestion fait d'abord perdre le focus au champ, ce qui
   retire .active AVANT que le clic n'arrive : une liste deja cachee a ce
   moment rendrait toute adresse impossible a choisir. Le script Liciel la
   masque lui-meme 250 ms plus tard ; le fondu reste donc cliquable jusque-la. */
#rdv_diag_erp#rdv_diag_erp .div-autocomplete {
    position: absolute;
    top: calc(var(--dv-h) + var(--dv-s1));
    left: 0;
    right: 0;
    z-index: 30;
    max-height: none;
    overflow: hidden;
    margin: 0;
    background: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
    box-shadow: 0 16px 32px -16px rgba(20, 28, 55, .3);
    font-size: 15px;
    opacity: 0;
    transform: translateY(calc(var(--dv-s1) * -1));
    transition: opacity .15s ease, transform .15s ease;
}
#rdv_diag_erp#rdv_diag_erp .div-autocomplete.active {
    max-height: none;
    opacity: 1;
    transform: none;
}
#rdv_diag_erp#rdv_diag_erp .div-autocomplete ul {
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: var(--dv-s1);
    list-style: none;
}
#rdv_diag_erp#rdv_diag_erp .div-autocomplete li {
    padding: var(--dv-s3);
    border-radius: 8px;
    color: var(--dv-text);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
#rdv_diag_erp#rdv_diag_erp .div-autocomplete li:hover {
    background: var(--dv-soft);
    color: var(--dv-accent);
    text-decoration: none;
}


/* -------------------------------------------------------------------------
   7. LISTES (annee, surface, copropriete, gaz, electricite)
   Chaque liste est un vrai <select> rendu INVISIBLE et pose par-dessus un
   en-tete decoratif. La liste qui s'ouvre au clic est donc celle du systeme,
   que le CSS ne peut pas habiller de facon fiable.
   Tant que rien n'est choisi, .selected-value est vide : le libelle sert
   alors d'indication, comme dans un champ texte. Une fois choisi, libelle
   en petit et valeur dessous, dans la meme hauteur.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp #infos-bien > .d-flex {
    gap: var(--dv-s3);
    margin: 0 0 var(--dv-s3);
}
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    font-size: 16px;
}
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dv-s3);
    height: var(--dv-h);
    /* A droite : la place du chevron (marge + chevron + ecart). */
    padding: 0 calc(var(--dv-s4) + var(--dv-s2) + var(--dv-s4)) 0 var(--dv-s4);
}
/* Chevron : l'icone d'origine est une icone Font Awesome, absente. */
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--dv-s4);
    width: var(--dv-s2);
    height: var(--dv-s2);
    border-right: 2px solid var(--dv-muted);
    border-bottom: 2px solid var(--dv-muted);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header svg {
    flex: 0 0 auto;
    width: var(--dv-icon);
    height: var(--dv-icon);
    fill: var(--dv-muted) !important;
}
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header svg path { fill: var(--dv-muted) !important; }
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header .text-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    width: auto;
    font-size: 16px;
    line-height: 1.25;
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header .label {
    display: block;
    overflow: hidden;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--dv-muted);
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
}
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header .label::first-letter { text-transform: uppercase; }
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header .selected-value {
    overflow: hidden;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dv-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Rien de choisi : une seule ligne, le libelle a la taille d'une indication. */
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header .selected-value:empty { display: none; }
#rdv_diag_erp#rdv_diag_erp .wizard-custom-select-header .text-container:has(.selected-value:empty) .label {
    font-size: 16px;
    font-weight: 400;
}
#rdv_diag_erp#rdv_diag_erp .wizard-classic-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* 7 BIS. QUESTIONS OUI / NON
   Les listes a deux choix Oui / Non recoivent deux boutons (script dans
   Devis.php, classe .dv-oui-non). Sans ce script, rien ne change : la liste
   classique ci-dessus reste en place.
   La liste invisible ne doit plus intercepter le toucher, sinon elle
   s'ouvrirait par-dessus les boutons. */
#rdv_diag_erp#rdv_diag_erp .dv-oui-non .wizard-classic-select { pointer-events: none; }
#rdv_diag_erp#rdv_diag_erp .dv-oui-non .wizard-custom-select-header {
    height: auto;
    padding: var(--dv-s1) var(--dv-s1) var(--dv-s1) var(--dv-s4);
    cursor: default;
}
#rdv_diag_erp#rdv_diag_erp .dv-oui-non .wizard-custom-select-header::after { content: none; }
#rdv_diag_erp#rdv_diag_erp .dv-oui-non .wizard-custom-select-header .selected-value { display: none; }
/* Libelle fixe, qu'une reponse soit choisie ou non : c'est la question. */
#rdv_diag_erp#rdv_diag_erp .dv-oui-non.wizard-custom-select .wizard-custom-select-header .text-container .label {
    overflow: visible;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dv-text);
    white-space: normal;
}
#rdv_diag_erp#rdv_diag_erp .dv-choix {
    display: flex;
    flex: 0 0 auto;
    gap: var(--dv-s1);
}
/* 38 px : la hauteur du champ (48) moins sa bordure et son retrait. */
#rdv_diag_erp#rdv_diag_erp .dv-choix-btn {
    min-width: 64px;
    height: 38px;
    margin: 0;
    padding: 0 var(--dv-s4);
    background: var(--dv-surface);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: var(--dv-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#rdv_diag_erp#rdv_diag_erp .dv-choix-btn:hover {
    background: var(--dv-soft);
    color: var(--dv-accent);
}
#rdv_diag_erp#rdv_diag_erp .dv-choix-btn[aria-pressed="true"] {
    background: var(--dv-accent);
    color: var(--dv-accent-ink);
}
#rdv_diag_erp#rdv_diag_erp .dv-choix-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dv-ring);
}


/* -------------------------------------------------------------------------
   8. DIAGNOSTICS (renvoyes par Liciel une fois le bien decrit)
   Avant : un titre sur deux lignes positionne en absolu sur une seule, dont
   la seconde passait sous les cartes ; un cadre gris autour ; et chaque
   diagnostic sur toute la largeur, la grille Bootstrap (4 par ligne) etant
   retiree. Apres : un titre de section, pas de cadre, une vraie grille.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp #prestations .form-group { margin: 0; }
/* Separateur entre la description du bien et les diagnostics. Inutile de
   le conditionner : tant qu'il n'y a rien, le bloc porte .hide. */
/* 32 px de part et d'autre du trait : 12 px sous les listes + 20 px ici au
   dessus, 32 px en dessous. */
#rdv_diag_erp#rdv_diag_erp #prestations {
    margin: var(--dv-s5) 0 0;
    padding: var(--dv-s6) 0 0;
    border-top: 1px solid var(--dv-border);
}
#rdv_diag_erp#rdv_diag_erp #prestations > .form-group:first-child > .fieldset-content { margin-top: 0 !important; }
/* margin/padding en !important : Liciel les ecrit EN LIGNE (60 px en haut). */
#rdv_diag_erp#rdv_diag_erp .fieldset-content {
    position: static;
    margin: var(--dv-s5) 0 0 !important;
    padding: 0 !important;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
}
/* Liciel fixe la largeur de ces titres (490, 410, 374 px en mobile) pour les
   centrer en absolu : le sous-titre passait a la ligne sans raison, et le
   titre pouvait deborder sur un petit telephone. */
#rdv_diag_erp#rdv_diag_erp .fieldset-title {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: var(--dv-s3);
    margin: 0 0 var(--dv-s3);
    padding: 0;
    background: none;
    color: var(--dv-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}
/* Titres en capitales dans la source : remis en casse de phrase. */
#rdv_diag_erp#rdv_diag_erp .fieldset-title > div { text-transform: lowercase; }
#rdv_diag_erp#rdv_diag_erp .fieldset-title > div::first-letter { text-transform: uppercase; }
#rdv_diag_erp#rdv_diag_erp .fieldset-title .subtitle {
    display: block;
    margin-top: var(--dv-s1);
    font-size: 13px;
    font-weight: 400;
    /* Liciel force line-height: 10px sous 992 px : lignes superposees. */
    line-height: 1.4;
    color: var(--dv-muted);
}
#rdv_diag_erp#rdv_diag_erp .fieldset-title .subtitle::first-letter { text-transform: uppercase; }
/* Sous-titre reecrit par le site (Devis.php), deja dans la bonne casse. */
#rdv_diag_erp#rdv_diag_erp .fieldset-title .subtitle.dv-explique { text-transform: none; }
#rdv_diag_erp#rdv_diag_erp .fieldset-title svg {
    flex: 0 0 auto;
    width: var(--dv-icon);
    height: var(--dv-icon);
}
#rdv_diag_erp#rdv_diag_erp .fieldset-title svg,
#rdv_diag_erp#rdv_diag_erp .fieldset-title svg path { fill: var(--dv-accent) !important; }
/* Le titre "complementaires" portait une icone Font Awesome, absente : son
   texte se retrouvait decale par rapport au titre "obligatoires", qui a un
   vrai picto. On redessine l'icone prevue (un plus) a la meme taille. */
#rdv_diag_erp#rdv_diag_erp .fieldset-title:not(:has(svg))::before {
    content: '';
    flex: 0 0 auto;
    width: var(--dv-icon);
    height: var(--dv-icon);
    background: var(--dv-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

#rdv_diag_erp#rdv_diag_erp .fieldset-content > .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: var(--dv-s2);
}
#rdv_diag_erp#rdv_diag_erp .fieldset-content > .row > [class*="col-"] { width: auto; }
#rdv_diag_erp#rdv_diag_erp .cb-rapport-type { height: 100%; }

#rdv_diag_erp#rdv_diag_erp .container-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dv-s3);
    box-sizing: border-box;
    height: 100%;
    min-height: var(--dv-h);
    margin: 0;
    padding: var(--dv-s2) var(--dv-s3);
    background: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
    box-shadow: none;
    color: var(--dv-text) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
#rdv_diag_erp#rdv_diag_erp .container-check span { color: var(--dv-text) !important; }
#rdv_diag_erp#rdv_diag_erp .container-check:hover { border-color: var(--dv-border-hover); box-shadow: none; }
#rdv_diag_erp#rdv_diag_erp .container-check::before {
    content: '';
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px var(--dv-border-hover);
    color: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
#rdv_diag_erp#rdv_diag_erp .container-check.checked {
    background: var(--dv-soft);
    border-color: var(--dv-accent);
}
#rdv_diag_erp#rdv_diag_erp .container-check.checked::before {
    background: var(--dv-accent);
    box-shadow: none;
}
/* La coche, posee par-dessus la case (::before), couleur du texte sur accent. */
#rdv_diag_erp#rdv_diag_erp .container-check.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--dv-s3);
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--dv-accent-ink);
    pointer-events: none;
    -webkit-mask: var(--dv-coche) center / 12px no-repeat;
            mask: var(--dv-coche) center / 12px no-repeat;
}
#rdv_diag_erp#rdv_diag_erp .container-check svg {
    flex: 0 0 auto;
    min-width: 0;
    width: var(--dv-icon);
    height: var(--dv-icon);
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
}
#rdv_diag_erp#rdv_diag_erp .container-check svg,
#rdv_diag_erp#rdv_diag_erp .container-check svg path { fill: var(--dv-muted) !important; }
#rdv_diag_erp#rdv_diag_erp .container-check.checked svg,
#rdv_diag_erp#rdv_diag_erp .container-check.checked svg path { fill: var(--dv-accent) !important; }
#rdv_diag_erp#rdv_diag_erp .container-check input { display: none; }


/* -------------------------------------------------------------------------
   9. RENDEZ-VOUS
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp .btn.btn-block.btn-rdv-select {
    box-sizing: border-box;
    height: var(--dv-h);
    margin: 0;
    padding: 0 var(--dv-s3);
    background: var(--dv-bg) !important;
    border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-r);
    box-shadow: none;
    color: var(--dv-text);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease;
}
#rdv_diag_erp#rdv_diag_erp .btn.btn-block.btn-rdv-select:hover { border-color: var(--dv-border-hover) !important; }
#rdv_diag_erp#rdv_diag_erp .btn.btn-block.btn-rdv-select.selected {
    background-color: var(--dv-accent) !important;
    border-color: var(--dv-accent) !important;
    color: var(--dv-accent-ink);
}
#rdv_diag_erp#rdv_diag_erp .btn.btn-block.btn-rdv-select.disable {
    border-color: var(--dv-border) !important;
    opacity: .45;
    cursor: not-allowed;
}
#rdv_diag_erp#rdv_diag_erp #date-rdv-selector,
#rdv_diag_erp#rdv_diag_erp .date-rdv-selector {
    padding: var(--dv-s3) var(--dv-s4);
    background: var(--dv-surface);
    background-image: none;
    border: 0;
    border-radius: var(--dv-r);
    color: var(--dv-text);
    font-weight: 600;
}


/* -------------------------------------------------------------------------
   9 BIS. VALIDATION : ORDRE DE MISSION ET TARIF
   HTML renvoye par Liciel au calcul du prix. Trois defauts d'origine :
   - pictos gris : la regle ".cls-1" ecrite en ligne par le site les teignait
     en gris-vert, par-dessus un carre de couleur ;
   - "Deplacement" affiche deux fois : Liciel l'ecrit en double et compte sur
     les classes d-lg-none / d-none d-lg-block de Bootstrap 4, absentes ici ;
   - grand vide en bas : la boite du tarif a une hauteur fixe de 300 px.
   Le recapitulatif devient une grille de cases, le tarif une colonne a
   droite (dessous sur tablette et mobile).
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp .result-tarif > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: var(--dv-s5);
    align-items: stretch;
}
#rdv_diag_erp#rdv_diag_erp .result-tarif > .row > [class*="col-"] { width: auto; }

/* Les rangees de Liciel s'effacent (display: contents) : toutes leurs cases
   se rangent dans UNE grille, donc s'alignent entre elles. */
#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dv-s2);
    margin: 0 !important;
}
#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content > .row { display: contents; }
#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-title {
    grid-column: 1 / -1;
    width: auto;
    left: auto;
    margin: 0 0 var(--dv-s1);
}
#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-title::before { content: none; }
#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content .d-lg-none { display: none !important; }
/* Adresse sur deux cases, diagnostics sur toute la largeur. */
#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content .col-lg-8 { grid-column: span 2; }
#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content .col-md-12:not(.col-lg-8) { grid-column: 1 / -1; }

#rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content > .row > [class*="col-"] {
    display: flex;
    align-items: center;
    gap: var(--dv-s3);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--dv-s3) !important;
    background: var(--dv-surface);
    border-radius: var(--dv-r);
}
#rdv_diag_erp#rdv_diag_erp #step5 .content-icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: var(--dv-s2);
    background: var(--dv-bg);
    border-radius: 8px;
}
#rdv_diag_erp#rdv_diag_erp #step5 .content-icone svg {
    display: block;
    width: 100%;
    height: 100%;
}
#rdv_diag_erp#rdv_diag_erp #step5 .content-icone svg,
#rdv_diag_erp#rdv_diag_erp #step5 .content-icone .cls-1,
#rdv_diag_erp#rdv_diag_erp #step5 .content-icone path {
    fill: var(--dv-accent) !important;
    opacity: 1 !important;
}
#rdv_diag_erp#rdv_diag_erp #step5 .rappel-mission-content {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp #step5 .rappel-mission-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dv-muted);
}
#rdv_diag_erp#rdv_diag_erp #step5 .rappel-mission-value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dv-text);
    overflow-wrap: anywhere;
}

/* Le tarif : un panneau teinte, a hauteur du recapitulatif. */
#rdv_diag_erp#rdv_diag_erp #step5 .tarif-box {
    display: flex;
    height: auto;
    margin: 0;
    padding: 0 !important;
    background: none;
}
#rdv_diag_erp#rdv_diag_erp #step5 .tarif-box > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: var(--dv-s1);
    margin: 0;
    padding: var(--dv-s5);
    background: var(--dv-soft);
    border-radius: var(--dv-r);
    color: var(--dv-muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}
#rdv_diag_erp#rdv_diag_erp #step5 .tarif-box h3 {
    margin: 0;
    color: var(--dv-text);
    font-size: 14px;
    font-weight: 600;
}
#rdv_diag_erp#rdv_diag_erp #step5 .tarif-box .tarif-presta {
    margin: var(--dv-s2) 0;
    color: var(--dv-accent);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#rdv_diag_erp#rdv_diag_erp #step5 .tarif-box .tarif-error-message {
    margin: var(--dv-s2) 0 0;
    color: var(--dv-text);
    font-size: 14px;
}

/* Pendant le calcul, Liciel affiche une icone Font Awesome (police absente) :
   zone vide. On y dessine la meme roue que partout ailleurs. */
#rdv_diag_erp#rdv_diag_erp .result-tarif > .text-center:has(> .fa-spinner) {
    display: flex;
    justify-content: center;
    padding: var(--dv-s5) 0;
}
#rdv_diag_erp#rdv_diag_erp .result-tarif > .text-center:has(> .fa-spinner)::after {
    content: '';
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 3px solid var(--dv-border);
    border-top-color: var(--dv-accent);
    border-radius: 50%;
    animation: dv-spin .8s linear infinite;
}


/* -------------------------------------------------------------------------
   10. BOUTONS : UN SEUL SYSTEME
   Meme hauteur que les champs, meme forme, meme retrait. Deux variantes :
   principal (avancer, valider) et secondaire (revenir, recommencer).
   :where() garde les exclusions sans alourdir la specificite, pour que les
   variantes plus bas puissent l'emporter simplement.
   Le texte reste dans la casse de la source : "DEMANDER LE DEVIS" suit une
   icone sans balise autour, et ne peut pas etre recase en CSS. Les trois
   boutons de navigation restent ainsi coherents entre eux.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp .btn:where(:not(.fancy-btn, .btn-rdv-select, .close)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dv-s2);
    box-sizing: border-box;
    width: auto !important;
    min-width: 120px;
    height: var(--dv-h);
    margin: 0;
    padding: 0 var(--dv-s5) !important;
    background-color: var(--dv-surface) !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: none !important;
    color: var(--dv-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
#rdv_diag_erp#rdv_diag_erp .btn:where(:not(.fancy-btn, .btn-rdv-select, .close)):hover {
    background-color: var(--dv-border) !important;
}
#rdv_diag_erp#rdv_diag_erp .btn:where(:not(.fancy-btn, .btn-rdv-select, .close)):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dv-ring) !important;
}
/* Principal : avancer et valider. Survol par assombrissement de la couleur,
   jamais par transparence : le texte reste net. */
#rdv_diag_erp#rdv_diag_erp .btn.front-wizard-next-step,
#rdv_diag_erp#rdv_diag_erp .btn.front-wizard-save-btn,
#rdv_diag_erp#rdv_diag_erp .btn.btn-primary,
#rdv_diag_erp#rdv_diag_erp #valid-proposed-address {
    background-color: var(--dv-accent) !important;
    color: var(--dv-accent-ink) !important;
}
#rdv_diag_erp#rdv_diag_erp .btn.front-wizard-next-step:hover,
#rdv_diag_erp#rdv_diag_erp .btn.front-wizard-save-btn:hover,
#rdv_diag_erp#rdv_diag_erp .btn.btn-primary:hover,
#rdv_diag_erp#rdv_diag_erp #valid-proposed-address:hover {
    background-color: var(--dv-accent-hover) !important;
}
#rdv_diag_erp#rdv_diag_erp .btn svg { width: 18px; height: 18px; }
/* Ecran de fin : le texte est dans un <h5> avec ses propres marges. */
#rdv_diag_erp#rdv_diag_erp .btn h5 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

/* Ecran de fin. Le message de Liciel arrive dans un <h3> entierement en gras,
   dans une boite sans style (classes Bootstrap absentes) : on en fait un
   bandeau de confirmation en texte normal, avec un picto de validation. */
#rdv_diag_erp#rdv_diag_erp #result.alert-success {
    position: relative;
    margin: 0 0 var(--dv-s4);
    padding: var(--dv-s4) var(--dv-s4) var(--dv-s4) calc(var(--dv-s4) + var(--dv-icon) + var(--dv-s3));
    background: var(--dv-success-bg);
    border: 0;
    border-radius: var(--dv-r);
    color: var(--dv-text);
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp #result.alert-success::before {
    content: '';
    position: absolute;
    top: var(--dv-s4);
    left: var(--dv-s4);
    width: var(--dv-icon);
    height: var(--dv-icon);
    background: var(--dv-success-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.5 2.5L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.5 2.5L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#rdv_diag_erp#rdv_diag_erp #result.alert-success h3 {
    margin: 0;
    color: var(--dv-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
#rdv_diag_erp#rdv_diag_erp #result.alert-success h3 * { font-weight: inherit !important; }

/* Boutons de fin : cote a cote, a la largeur de leur texte. */
#rdv_diag_erp#rdv_diag_erp .post-create-commandes-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dv-s3);
}
#rdv_diag_erp#rdv_diag_erp .post-create-commandes-options.hide { display: none !important; }
#rdv_diag_erp#rdv_diag_erp .post-create-commandes-options > [class*="col-"] {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}
#rdv_diag_erp#rdv_diag_erp #request-add-new-commande,
#rdv_diag_erp#rdv_diag_erp #retour-accueil {
    width: fit-content !important;
    max-width: 100%;
    height: auto;
    min-height: var(--dv-h);
    margin: 0;
    padding: var(--dv-s3) var(--dv-s5) !important;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}

/* Barre Precedent / Suivant */
#rdv_diag_erp#rdv_diag_erp #navig-wizard-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dv-s3);
    margin: var(--dv-s5) 0 0;
    padding: var(--dv-s5) 0 0;
    border-top: 1px solid var(--dv-border);
}
#rdv_diag_erp#rdv_diag_erp .btn.front-wizard-prev-step { margin-right: auto; }
#rdv_diag_erp#rdv_diag_erp #contentButtonSave { display: flex; }
#rdv_diag_erp#rdv_diag_erp #contentButtonSave.hide { display: none !important; }


/* -------------------------------------------------------------------------
   11. MESSAGES
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp .alert {
    margin: 0 0 var(--dv-s3);
    padding: var(--dv-s3) var(--dv-s4);
    border: 0;
    border-radius: var(--dv-r);
    font-size: 14px;
}
#rdv_diag_erp#rdv_diag_erp .alert-danger,
#rdv_diag_erp#rdv_diag_erp #label_global_errors .alert-danger {
    background: var(--dv-danger-bg);
    color: var(--dv-danger-ink);
    font-weight: 600;
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp .alert h3 { margin: 0; font-size: 15px; }

/* Adresse hors du perimetre. Liciel ecrit ce message dans la barre des
   boutons ; le site le remonte sous le champ d'adresse (Devis.php). Le style
   tient aux deux endroits, pour le cas ou ce deplacement n'est pas en place.
   Picto en position absolue et non en flex : le message peut contenir des
   titres, qui se mettraient sinon cote a cote. */
#rdv_diag_erp#rdv_diag_erp #distance-error-message { flex-basis: 100%; margin: 0 0 var(--dv-s3); }
#rdv_diag_erp#rdv_diag_erp #navig-wizard-btn > #distance-error-message { margin: 0; }
#rdv_diag_erp#rdv_diag_erp #distance-error-message .alert {
    position: relative;
    margin: 0;
    padding: var(--dv-s3) var(--dv-s4) var(--dv-s3) calc(var(--dv-s4) + var(--dv-icon) + var(--dv-s3));
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp #distance-error-message .alert * {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
#rdv_diag_erp#rdv_diag_erp #distance-error-message .alert::before {
    content: '';
    position: absolute;
    top: var(--dv-s3);
    left: var(--dv-s4);
    width: var(--dv-icon);
    height: var(--dv-icon);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* -------------------------------------------------------------------------
   12. MODALES
   Indispensable : le site retire bootstrap.min.css, et c'est lui qui cache
   les fenetres modales. Sans ces regles, la fenetre de validation d'adresse
   s'afficherait en permanence dans la page. Le script Bootstrap les ouvre en
   posant display:block en ligne, ce qui prime sur le display:none ici.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
    padding: var(--dv-s5) var(--dv-s4) !important;
    background: rgba(15, 20, 35, .5);
}
/* Le script pose display:block EN LIGNE : un centrage en flex serait
   ecrase. On descend donc la fenetre par sa marge, sous l'en-tete du site. */
#rdv_diag_erp#rdv_diag_erp .modal-dialog {
    position: relative;
    width: auto;
    max-width: 560px;
    margin: 12vh auto;
}
#rdv_diag_erp#rdv_diag_erp .modal-content {
    overflow: hidden;
    width: 100%;
    padding: 0;
    background: var(--dv-bg);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(15, 20, 35, .45);
}
#rdv_diag_erp#rdv_diag_erp .modal-header {
    position: relative;
    /* A droite : la place du bouton de fermeture (32 px) et de sa marge. */
    padding: var(--dv-s4) calc(32px + var(--dv-s4)) var(--dv-s4) var(--dv-s5);
    background: var(--dv-bg);
    border-bottom: 1px solid var(--dv-border);
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp .modal-header h4,
#rdv_diag_erp#rdv_diag_erp .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dv-text);
}
#rdv_diag_erp#rdv_diag_erp .modal-body {
    padding: var(--dv-s4) var(--dv-s5);
    color: var(--dv-text);
    font-size: 15px;
    text-align: left;
}
#rdv_diag_erp#rdv_diag_erp .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--dv-s3);
    padding: var(--dv-s4) var(--dv-s5);
    border-top: 1px solid var(--dv-border);
}
#rdv_diag_erp#rdv_diag_erp .modal .close {
    position: absolute;
    top: var(--dv-s3);
    right: var(--dv-s3);
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--dv-muted);
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
}
#rdv_diag_erp#rdv_diag_erp .modal .close:hover { background: var(--dv-surface); color: var(--dv-text); }
/* Bootstrap ajoute ce voile a la fin du <body>, donc HORS du formulaire : il
   ne peut pas etre confine. La modale porte deja son voile, on efface donc
   celui-ci pour ne pas assombrir deux fois. Le site n'utilise cette classe
   nulle part ailleurs. */
body > .modal-backdrop { display: none; }


/* -------------------------------------------------------------------------
   13. ECRAN DE CHARGEMENT (il appartient au site, pas a Liciel)
   Ce bloc vit dans #loader_rdv_diag (cache), et le site RECOPIE son HTML dans
   le formulaire pendant le chargement : d'ou les deux racines. Les variables
   --dv-* n'existent pas dans #loader_rdv_diag, d'ou les valeurs de repli.
   ------------------------------------------------------------------------- */
#loader_rdv_diag .info_screen_rdv_diag,
#rdv_diag_erp .info_screen_rdv_diag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dv-s3, 12px);
    min-height: 240px;
    padding: var(--dv-s5, 20px);
    background: var(--c-surface, #f4f6fa);
    border: 0;
    border-radius: 12px;
    text-align: center;
}
#loader_rdv_diag .info_screen_rdv_diag > .first,
#loader_rdv_diag .info_screen_rdv_diag > .second,
#rdv_diag_erp .info_screen_rdv_diag > .first,
#rdv_diag_erp .info_screen_rdv_diag > .second {
    flex: 0 0 auto;
    margin: 0;
    background: none;
    border: 0;
    font-size: 1em;
}
#loader_rdv_diag .info_screen_rdv_diag > .second h2,
#rdv_diag_erp .info_screen_rdv_diag > .second h2 {
    margin: 0;
    padding: 0;
    color: var(--c-text, #1f2430);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}
/* La roue est complete ICI, forme et animation comprises. Le site la definit
   pour #loader_rdv_diag seulement, mais son HTML est RECOPIE dans le
   formulaire, ou cette regle ne s'applique plus : le <span>, element en
   ligne, ignorait alors largeur et hauteur et ne montrait plus rien. */
#loader_rdv_diag .rdv-spinner,
#rdv_diag_erp .info_screen_rdv_diag .rdv-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 3px solid var(--c-border, #e6e9f0);
    border-top-color: var(--c-accent, #1b6ec2);
    border-radius: 50%;
    animation: dv-spin .8s linear infinite;
}
@keyframes dv-spin { to { transform: rotate(360deg); } }

/* Envoi de la demande ("Demander le devis").
   Liciel cree la commande, genere le devis et envoie l'e-mail AVANT de
   repondre : l'attente vient de son serveur, pas du formulaire. On la rend
   lisible : voile clair, la roue du site et une phrase qui dit ce qui se
   passe, au lieu d'un voile gris et d'une petite roue noire.
   Texte sans accent volontairement : il est ecrit dans le CSS. */
#rdv_diag_erp#rdv_diag_erp .liciel-loading {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dv-s4);
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--dv-s5);
    background: color-mix(in srgb, var(--dv-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}
#rdv_diag_erp#rdv_diag_erp .liciel-loading.hide { display: none !important; }
#rdv_diag_erp#rdv_diag_erp .liciel-loading::before {
    content: '';
    position: static;
    display: block;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    background: none;
    border: 3px solid var(--dv-border);
    border-top-color: var(--dv-accent);
    border-radius: 50%;
    animation: dv-spin .8s linear infinite;
}
#rdv_diag_erp#rdv_diag_erp .liciel-loading::after {
    content: 'Envoi de votre demande en cours\A Merci de patienter, cela peut prendre quelques secondes.';
    display: block;
    width: auto;
    height: auto;
    max-width: 400px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    color: var(--dv-text);
    font: 500 15px/1.5 var(--dv-font);
    text-align: center;
    white-space: pre-line;
}


/* -------------------------------------------------------------------------
   14. TABLETTE ET MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Fil d'etapes : pictos seuls, le numero suffit a se reperer. */
    #rdv_diag_erp#rdv_diag_erp #breadcrumbs .menuStep {
        flex-direction: column;
        gap: var(--dv-s2);
        padding: var(--dv-s2);
        text-align: center;
    }
    #rdv_diag_erp#rdv_diag_erp #breadcrumbs .stepTitle { display: none; }
    #rdv_diag_erp#rdv_diag_erp .fancy-btn-list { gap: var(--dv-s4); }
    /* stretch : sinon "Votre projet", qui n'a que deux tuiles, se cale sur
       son contenu et ne s'aligne plus sur les tuiles du bien. */
    #rdv_diag_erp#rdv_diag_erp .step1-col { flex-direction: column; align-items: stretch; gap: var(--dv-s2); }
    #rdv_diag_erp#rdv_diag_erp .step1-col > .d-flex:not(.btn-label) { width: 100%; }
    #rdv_diag_erp#rdv_diag_erp .btn-label { align-self: flex-start; }
    /* Validation : le tarif passe sous le recapitulatif, deux cases par
       ligne. dense : "Deplacement" remonte a cote de "Surface" au lieu de
       laisser un trou avant l'adresse. */
    #rdv_diag_erp#rdv_diag_erp .result-tarif > .row { grid-template-columns: minmax(0, 1fr); }
    #rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;
    }
    #rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content .col-lg-8 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    #rdv_diag_erp#rdv_diag_erp #breadcrumbs { gap: var(--dv-s1); margin-bottom: var(--dv-s4); }
    #rdv_diag_erp#rdv_diag_erp #breadcrumbs .imgStep { width: 32px; height: 32px; padding: var(--dv-s1); }
    #rdv_diag_erp#rdv_diag_erp #breadcrumbs .stepNumber { font-size: 10px; letter-spacing: .02em; }
    /* Deux tuiles par ligne : assez larges pour le doigt et pour le libelle. */
    #rdv_diag_erp#rdv_diag_erp #step1 .btn.fancy-btn { flex: 1 1 calc(50% - var(--dv-s1)); min-width: 0; }
    #rdv_diag_erp#rdv_diag_erp .fieldset-content > .row { grid-template-columns: 1fr; }
    #rdv_diag_erp#rdv_diag_erp #step5 .fieldset-content { grid-template-columns: minmax(0, 1fr); }
    #rdv_diag_erp#rdv_diag_erp #step5 .tarif-box .tarif-presta { font-size: 32px; }
    #rdv_diag_erp#rdv_diag_erp #navig-wizard-btn { gap: var(--dv-s2); }
    #rdv_diag_erp#rdv_diag_erp .btn:where(:not(.fancy-btn, .btn-rdv-select, .close)) { flex: 1 1 auto; min-width: 0; }
    /* Fin : les deux boutons empiles, pleine largeur, texte a la ligne. */
    #rdv_diag_erp#rdv_diag_erp .post-create-commandes-options > [class*="col-"] { flex: 1 1 100%; }
    #rdv_diag_erp#rdv_diag_erp #request-add-new-commande,
    #rdv_diag_erp#rdv_diag_erp #retour-accueil { width: 100% !important; }
    #rdv_diag_erp#rdv_diag_erp .modal-dialog { margin: 8vh auto; }
}

@media (prefers-reduced-motion: reduce) {
    #rdv_diag_erp#rdv_diag_erp *,
    #rdv_diag_erp#rdv_diag_erp *::before,
    #rdv_diag_erp#rdv_diag_erp *::after { transition: none !important; }
}


/* -------------------------------------------------------------------------
   15. COUCHE "GAMIFIEE" : animations, questions numerotees, cartes a picto
   Active uniquement si #rdv_diag_erp porte la classe dv-gamifie (posee par
   Devis.php). RETOUR ARRIERE : retirer cette classe, rien d'autre. Tout ce
   qui suit ne fait que s'ajouter aux sections 0 a 14.
   Deux ajouts vivent dans Devis.php et n'agissent qu'avec la classe : le
   compteur des diagnostics (.dv-compte) et la question oubliee de l'etape 1
   (.dv-manque) a la place de l'alerte du navigateur.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie {
    --dv-ease: cubic-bezier(.2, .8, .2, 1);
    --dv-rebond: cubic-bezier(.34, 1.56, .64, 1);
    --dv-ombre-carte: 0 10px 24px -16px rgba(20, 28, 55, .35);
}

@keyframes dv-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dv-pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes dv-pop-doux { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes dv-rebond { 0% { transform: scale(1); } 35% { transform: scale(.84); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes dv-secoue { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes dv-halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dv-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes dv-reflet { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }


/* -------------------------------------------------------------------------
   ETAPES : une coche sur les etapes deja faites.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step-wizard:not(.hide) {
    animation: dv-entree .4s var(--dv-ease) both;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .menuStep.active {
    box-shadow: none;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .imgStep { position: relative; }
/* Etape faite : toute etape placee AVANT l'etape active. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .menuStep:has(~ .menuStep.active) .imgStep::after,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .menuStep:has(~ .menuStep.active) .imgStep::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: dv-pop .45s var(--dv-rebond) both;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .menuStep:has(~ .menuStep.active) .imgStep::after {
    z-index: 1;
    background: var(--dv-accent);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .menuStep:has(~ .menuStep.active) .imgStep::before {
    z-index: 2;
    background: var(--dv-accent-ink);
    -webkit-mask: var(--dv-coche) center / 16px no-repeat;
            mask: var(--dv-coche) center / 16px no-repeat;
}
/* Typo des etapes un cran plus grande. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .stepNumber { font-size: 12px; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .stepTitle,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .menuStep.active .stepTitle { font-size: 15px; line-height: 1.3; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #breadcrumbs .menuStep:has(~ .menuStep.active) .stepNumber { color: var(--dv-accent); }


/* -------------------------------------------------------------------------
   ETAPE 1 : deux questions numerotees, grandes cartes a picto.
   ------------------------------------------------------------------------- */
/* Cote a cote sur ordinateur (empilees en mobile par la regle de base), et
   alignees en haut : un libelle sur deux lignes ne decale plus l'autre groupe. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fancy-btn-list {
    align-items: flex-start;
    gap: var(--dv-s6);
    counter-reset: dv-question;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col {
    flex-direction: column;
    align-items: stretch;
    gap: var(--dv-s4);
    counter-increment: dv-question;
}
/* En capitales dans la source : remis en casse de phrase. Le libelle passe en
   bloc, pastille en position absolue : ::first-letter ne s'applique pas a un
   conteneur flex. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col > .btn-label {
    position: relative;
    isolation: isolate;
    display: block;
    align-self: stretch;
    min-height: 28px;
    padding: 0 0 0 calc(28px + var(--dv-s3));
    color: var(--dv-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    text-align: left;
    text-transform: lowercase;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col > .btn-label::first-letter { text-transform: uppercase; }
/* Pastille : le numero de la question, puis une coche une fois repondue. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col > .btn-label::before {
    content: counter(dv-question);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    line-height: 1;
    width: 28px;
    height: 28px;
    background: var(--dv-surface);
    border-radius: 50%;
    color: var(--dv-muted);
    font-size: 13px;
    letter-spacing: 0;
    transition: background-color .2s var(--dv-ease), color .2s var(--dv-ease);
}
/* Repondue : la coche (masque, sur ::before) au-dessus d'un rond accent (::after). */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col:has(.fancy-btn.active) > .btn-label::before {
    content: '';
    background: var(--dv-accent-ink);
    -webkit-mask: var(--dv-coche) center / 14px no-repeat;
            mask: var(--dv-coche) center / 14px no-repeat;
    animation: dv-pop .45s var(--dv-rebond);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col:has(.fancy-btn.active) > .btn-label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 28px;
    height: 28px;
    background: var(--dv-accent);
    border-radius: 50%;
    animation: dv-pop .45s var(--dv-rebond);
}
/* Question oubliee au clic sur Suivant : elle tremble et le dit. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col.dv-manque { animation: dv-secoue .45s var(--dv-ease); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col.dv-manque > .btn-label::before {
    background: var(--dv-danger-bg);
    color: var(--dv-danger-ink);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col.dv-manque > .btn-label::after {
    content: 'Choisissez une r\E9ponse';
    margin-left: var(--dv-s3);
    color: var(--dv-danger-ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#rdv_diag_erp#rdv_diag_erp.dv-gamifie #type-transaction,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #type-logement {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--dv-s3);
    width: 100%;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #type-transaction { grid-template-columns: repeat(2, minmax(0, 180px)); }

#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 112px;
    padding: var(--dv-s3) var(--dv-s2);
    background-color: var(--dv-bg) !important;
    border: 0 !important;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--dv-border) !important;
    color: var(--dv-text) !important;
    font-size: 13px;
    transition: box-shadow .2s var(--dv-ease), background-color .2s var(--dv-ease);
    animation: dv-entree .45s var(--dv-ease) both;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .fancy-btn:nth-child(2) { animation-delay: .05s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .fancy-btn:nth-child(3) { animation-delay: .1s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .fancy-btn:nth-child(4) { animation-delay: .15s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .fancy-btn:nth-child(5) { animation-delay: .2s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .fancy-btn:nth-child(6) { animation-delay: .25s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .fancy-btn:nth-child(n+7) { animation-delay: .3s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn:hover {
    box-shadow: inset 0 0 0 1px var(--dv-border-hover), var(--dv-ombre-carte) !important;
}
/* Picto dans une pastille ; c'est lui qui bouge, jamais la carte (le
   deplacement de la carte provoquait un flash sombre sous Chrome). */
/* overflow visible : sinon l'arrondi pose sur le SVG rogne aussi le dessin
   (un cercle interieur masquait les coins du picto). */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn svg {
    box-sizing: content-box;
    overflow: visible;
    width: 24px;
    height: 24px;
    margin: 0 0 var(--dv-s2);
    padding: var(--dv-s2);
    background: var(--dv-soft);
    border-radius: 50%;
    transition: background-color .2s var(--dv-ease), transform .3s var(--dv-rebond);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn:hover svg {
    background: color-mix(in srgb, var(--dv-accent) 16%, var(--dv-bg));
    transform: scale(1.08);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn.active {
    background-color: var(--dv-soft) !important;
    box-shadow: inset 0 0 0 2px var(--dv-accent), 0 12px 24px -16px color-mix(in srgb, var(--dv-accent) 70%, transparent) !important;
    color: var(--dv-text) !important;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn.active svg {
    background: var(--dv-accent);
    animation: dv-rebond .5s var(--dv-rebond);
}
/* Coche du choix, en haut a droite de la carte. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn::after,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn::before {
    content: '';
    position: absolute;
    top: var(--dv-s2);
    right: var(--dv-s2);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .35s var(--dv-rebond);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn::after { background: var(--dv-accent); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn::before {
    z-index: 1;
    background: var(--dv-accent-ink);
    -webkit-mask: var(--dv-coche) center / 12px no-repeat;
            mask: var(--dv-coche) center / 12px no-repeat;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn.active::after,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn.active::before { transform: scale(1); }

/* Les deux reponses sont donnees : Suivant s'illumine deux fois. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie:has(#step1:not(.hide)):has(#type-transaction .fancy-btn.active):has(#type-logement .fancy-btn.active) .front-wizard-next-step {
    animation: dv-halo 1.2s var(--dv-ease) 2;
}


/* -------------------------------------------------------------------------
   ETAPE 2 : champs qui arrivent en cascade, reponses Oui/Non qui rebondissent.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #infos-bien:not(.hide) .wizard-custom-select { animation: dv-entree .4s var(--dv-ease) both; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #infos-bien .d-flex + .d-flex .wizard-custom-select { animation-delay: .12s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .dv-choix-btn[aria-pressed="true"] { animation: dv-pop-doux .35s var(--dv-rebond); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .wizard-custom-select-header:has(.selected-value:not(:empty)) svg,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .dv-oui-non:has([aria-pressed="true"]) .wizard-custom-select-header svg,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .wizard-custom-select-header:has(.selected-value:not(:empty)) svg path,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .dv-oui-non:has([aria-pressed="true"]) .wizard-custom-select-header svg path {
    fill: var(--dv-accent) !important;
}

/* Chargement des diagnostics : Liciel affiche une icone absente du site.
   On dessine des cartes fantomes avec un reflet qui passe. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #prestations > .text-center:has(> .fa-spinner) {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s4);
    margin: 0 !important;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #prestations > .text-center:has(> .fa-spinner)::before,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #prestations > .text-center:has(> .fa-spinner)::after {
    content: '';
    display: block;
    border-radius: var(--dv-r);
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--dv-bg) 70%, transparent), transparent) -60% 0 / 40% 100% no-repeat,
        var(--dv-surface);
    animation: dv-reflet 1.2s linear infinite;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #prestations > .text-center:has(> .fa-spinner)::before { width: 40%; height: 24px; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie #prestations > .text-center:has(> .fa-spinner)::after {
    height: 120px;
    -webkit-mask: linear-gradient(#000 0 56px, transparent 56px 64px) 0 0 / 100% 64px;
            mask: linear-gradient(#000 0 56px, transparent 56px 64px) 0 0 / 100% 64px;
}


/* -------------------------------------------------------------------------
   DIAGNOSTICS : sections a pastille et compteur, cartes a picto.
   Obligatoires : coche pleine. Decoche = "Deja valide" (le client en a un).
   Complementaires : un "+" qui devient coche.
   ------------------------------------------------------------------------- */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-title { gap: var(--dv-s3); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-title svg {
    box-sizing: content-box;
    overflow: visible;
    padding: var(--dv-s2);
    background: var(--dv-soft);
    border-radius: 12px;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-title:not(:has(svg))::before {
    width: 36px;
    height: 36px;
    -webkit-mask: none;
            mask: none;
    border-radius: 12px;
    background:
        linear-gradient(var(--dv-accent), var(--dv-accent)) center / 14px 2px no-repeat,
        linear-gradient(var(--dv-accent), var(--dv-accent)) center / 2px 14px no-repeat,
        var(--dv-soft);
}
/* Compteur (ajoute par le script du site). */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .dv-compte {
    flex: 0 0 auto;
    margin-left: auto;
    padding: var(--dv-s1) var(--dv-s3);
    background: var(--dv-surface);
    border-radius: 999px;
    color: var(--dv-muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .dv-compte.is-actif {
    background: var(--dv-soft);
    color: var(--dv-accent);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .dv-compte.dv-bump { animation: dv-pop-doux .35s var(--dv-rebond); }

#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row { gap: var(--dv-s3); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check {
    position: relative;
    min-height: 60px;
    padding: var(--dv-s2) var(--dv-s3) var(--dv-s2) var(--dv-s2);
    border: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--dv-border);
    background: var(--dv-bg);
    font-size: 14px;
    font-weight: 600;
    transition: box-shadow .2s var(--dv-ease), background-color .2s var(--dv-ease);
    animation: dv-entree .4s var(--dv-ease) both;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row > :nth-child(2) .container-check { animation-delay: .04s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row > :nth-child(3) .container-check { animation-delay: .08s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row > :nth-child(4) .container-check { animation-delay: .12s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row > :nth-child(5) .container-check { animation-delay: .16s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row > :nth-child(6) .container-check { animation-delay: .2s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row > :nth-child(7) .container-check { animation-delay: .24s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row > :nth-child(n+8) .container-check { animation-delay: .28s; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check:hover {
    box-shadow: inset 0 0 0 1px var(--dv-border-hover), var(--dv-ombre-carte);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check svg {
    box-sizing: content-box;
    overflow: visible;
    padding: var(--dv-s2);
    background: var(--dv-surface);
    border-radius: 12px;
    transition: background-color .2s var(--dv-ease), transform .3s var(--dv-rebond);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check:hover svg { transform: scale(1.06); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check.checked {
    background: var(--dv-bg);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--dv-border-hover);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check.checked svg { background: var(--dv-accent); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check.checked svg,
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check.checked svg path { fill: var(--dv-accent-ink) !important; }

/* La coche passe a droite de la carte, en rond. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check::before {
    order: 2;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--dv-border-hover);
    font-size: 12px;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check.checked::before {
    box-shadow: none;
    animation: dv-pop .4s var(--dv-rebond);
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .container-check.checked::after {
    left: auto;
    right: var(--dv-s3);
    width: 24px;
    height: 24px;
    margin-top: -12px;
    -webkit-mask-size: 14px;
            mask-size: 14px;
    animation: dv-pop .4s var(--dv-rebond);
}
/* Obligatoire decoche : le client en a deja un, on le dit plutot qu'un rond vide. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content:has(#diags-obligatoires) .container-check:not(.checked) {
    box-shadow: inset 0 0 0 1px var(--dv-border);
    background: var(--dv-surface);
    color: var(--dv-muted) !important;
}
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content:has(#diags-obligatoires) .container-check:not(.checked) span { color: var(--dv-muted) !important; }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content:has(#diags-obligatoires) .container-check:not(.checked) svg { background: var(--dv-bg); }
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content:has(#diags-obligatoires) .container-check:not(.checked)::before {
    content: 'D\E9j\E0  valide'; /* deux espaces : le premier termine le code \E0 */
    width: auto;
    height: auto;
    padding: var(--dv-s1) var(--dv-s2);
    border-radius: 999px;
    box-shadow: none;
    background: var(--dv-bg);
    color: var(--dv-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    animation: dv-pop-doux .3s var(--dv-rebond);
}
/* Complementaire non choisi : un "+" invite a l'ajouter. */
#rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content:not(:has(#diags-obligatoires)) .container-check:not(.checked)::before {
    content: '+';
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dv-accent) 35%, var(--dv-bg));
    color: var(--dv-accent);
    font-size: 16px;
    font-weight: 600;
}

/* Tablette et mobile : les deux questions s'empilent, elles reprennent toute
   la largeur (l'alignement en haut du mode ordinateur les retrecissait). */
@media (max-width: 991px) {
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie .fancy-btn-list { align-items: stretch; }
}
@media (max-width: 640px) {
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie #type-transaction { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie #type-logement { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--dv-s2); }
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn { min-height: 92px; padding: var(--dv-s2); font-size: 12px; }
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie #step1 .btn.fancy-btn svg { width: 20px; height: 20px; }
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie .step1-col > .btn-label { font-size: 15px; }
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie .fieldset-content > .row { gap: var(--dv-s2); }
}

@media (prefers-reduced-motion: reduce) {
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie *,
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie *::before,
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie *::after,
    #rdv_diag_erp#rdv_diag_erp.dv-gamifie { animation: none !important; }
}