/* Grille Tarif & Devis — styles front-end : formulaire par étapes */

.gtd-wizard {
    --gtd-pink: #E21356;
    --gtd-dark: #323232;
    --gtd-teal: #1a5b79;
    --gtd-navy: #1e3a8a;
    --gtd-note-bg: #dbeafe;
    --gtd-note-border: #2f507d;
    --gtd-border: #d6d6d6;
    --gtd-text: #222;
    --gtd-text-muted: #6b6b6b;
    --gtd-radius: 14px;
    --gtd-radius-sm: 10px;

    font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Ubuntu, Arial, sans-serif;
    color: var(--gtd-text);
    max-width: 1100px;
    margin: 0 auto;
}

.gtd-wizard-card {
    background: #fff;
    border-radius: var(--gtd-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    padding: 28px 32px 90px;
    position: relative;
    min-height: 360px;
}

/* ---------- Barre supérieure : titre + étapes sur la même ligne ---------- */
.gtd-wizard-topbar { margin-bottom: 26px; }
.gtd-wizard-header-row {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid #eee; margin-bottom: 4px;
}
.gtd-wizard-heading { font-size: 19px; font-weight: 800; color: #222; margin: 0; flex: none; }

.gtd-steps {
    display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
    overflow-x: auto;
}
.gtd-step-item { display: flex; align-items: center; gap: 10px; flex: none; }
.gtd-step-item:not(:last-child)::after {
    content: ""; width: 36px; height: 1px; background: #ddd; margin: 0 6px; flex: none;
}
.gtd-step-circle {
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ccc; color: #999;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none;
    background: #fff; transition: border-color .2s, color .2s;
}
.gtd-step-label { font-size: 14px; font-weight: 600; color: #999; white-space: nowrap; }
.gtd-step-item.is-active .gtd-step-circle { border-color: var(--gtd-pink); color: var(--gtd-pink); }
.gtd-step-item.is-active .gtd-step-label { color: var(--gtd-pink); }
.gtd-step-item.is-done .gtd-step-circle { border-color: var(--gtd-pink); color: #fff; background: var(--gtd-pink); }
.gtd-step-item.is-done .gtd-step-label { color: #333; }

.gtd-required-note { font-size: 12.5px; color: var(--gtd-text-muted); font-style: italic; text-align: right; margin: 8px 0 0; }

/* ---------- Champs / grilles d'options ---------- */
.gtd-grid-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
@media (max-width: 760px) { .gtd-grid-fields { grid-template-columns: 1fr; } }

.gtd-field-group { margin: 0 0 22px; }
.gtd-label { display: block; font-weight: 700; font-size: 14.5px; color: #2b2b2b; margin-bottom: 10px; }

.gtd-option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#gtd-dossier, #gtd-category, #gtd-tier { grid-template-columns: 1fr; }

.gtd-toggle-row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: 22px; }
.gtd-toggle-inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gtd-toggle-inline-label { font-weight: 700; font-size: 14.5px; color: #2b2b2b; white-space: nowrap; }
.gtd-option-grid-compact { display: flex; gap: 8px; }
.gtd-option-grid-compact .gtd-option-btn { padding: 9px 20px; }

.gtd-option-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gtd-option-grid-icons { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .gtd-option-grid-3, .gtd-option-grid-icons { grid-template-columns: repeat(2, 1fr); } }

.gtd-option-btn {
    position: relative; display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--gtd-border); border-radius: var(--gtd-radius-sm); background: #fff;
    padding: 13px 14px; font-weight: 600; font-size: 14.5px; color: #555; cursor: pointer; user-select: none;
    transition: background .15s, color .15s, border-color .15s;
}
.gtd-option-btn input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.gtd-option-icon { width: 20px; height: 20px; flex: none; display: inline-flex; opacity: .75; }
.gtd-option-icon svg { width: 100%; height: 100%; }
.gtd-option-btn.is-active { background: var(--gtd-pink); border-color: var(--gtd-pink); color: #fff; }
.gtd-option-btn.is-active span { color: #fff; }
.gtd-option-btn.is-active .gtd-option-icon { opacity: 1; filter: brightness(0) invert(1); }
.gtd-option-btn.is-disabled { background: #f2f2f2; color: #b3b3b3; border-color: #e2e2e2; cursor: not-allowed; }
.gtd-option-btn.is-disabled input { cursor: not-allowed; }

.gtd-option-grid-icons .gtd-option-btn { flex-direction: column; text-align: center; gap: 6px; padding: 16px 10px; }
.gtd-option-grid-icons .gtd-option-icon { width: 24px; height: 24px; }

.gtd-mandatory-badge {
    position: absolute; top: -8px; right: 8px; background: var(--gtd-pink); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; line-height: 1.4;
}
.gtd-option-grid-icons .gtd-mandatory-badge { top: -8px; right: 50%; transform: translateX(50%); white-space: nowrap; }

/* ---------- Champs texte ---------- */
.gtd-field-group input[type="text"], .gtd-field-group input[type="email"], .gtd-field-group input[type="tel"], .gtd-field-group textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--gtd-border); border-radius: var(--gtd-radius-sm);
    box-sizing: border-box; font-size: 14.5px; font-family: inherit;
}
.gtd-field-group input:focus, .gtd-field-group textarea:focus { outline: none; border-color: var(--gtd-pink); }
.gtd-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gtd-req-phone, .gtd-req-address, .gtd-req-message { color: var(--gtd-pink); }

/* ---------- Navigation bas de carte ---------- */
.gtd-wizard-nav {
    position: absolute; left: 32px; right: 32px; bottom: 24px;
    display: flex; justify-content: space-between; gap: 12px;
}
.gtd-wizard-nav[hidden] { display: none !important; }
.gtd-btn {
    appearance: none; border-radius: var(--gtd-radius-sm); padding: 12px 22px; font-weight: 700; font-size: 14.5px;
    cursor: pointer; border: 1.5px solid var(--gtd-border); background: #fff; color: #444;
}
.gtd-btn-dark { background: var(--gtd-dark); border-color: var(--gtd-dark); color: #fff; }
.gtd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Bandeau(x) de prix (étape "Le tarif") ---------- */
.gtd-price-bar { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.gtd-price-box {
    flex: 1; min-width: 140px; background: var(--gtd-teal); color: #fff; font-weight: 800; font-size: 16px;
    text-align: center; padding: 12px 10px; border-radius: var(--gtd-radius-sm);
}

.gtd-recap-sentence { font-size: 15px; color: #222; margin: 0 0 18px; }
.gtd-recap-label { font-size: 12.5px; font-weight: 800; color: #555; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 14px; }
.gtd-recap-diags { display: flex; flex-direction: column; gap: 10px; }
.gtd-recap-diag-item { padding-bottom: 10px; border-bottom: 1px dashed #eee; }
.gtd-recap-diag-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.gtd-recap-diag-icon { width: 20px; height: 20px; flex: none; display: inline-flex; }
.gtd-recap-diag-icon svg { width: 100%; height: 100%; }
.gtd-recap-diag-label { font-weight: 800; font-size: 15px; }
.gtd-recap-badge { display: inline-block; background: var(--gtd-navy); color: #fff; font-weight: 700; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }
.gtd-recap-note {
    display: flex; gap: 8px; align-items: flex-start; background: var(--gtd-note-bg);
    border: 1px solid var(--gtd-note-border); border-radius: var(--gtd-radius-sm);
    padding: 9px 12px; font-size: 13px; line-height: 1.4; color: #1f2937;
}
.gtd-recap-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #2f507d; }
.gtd-recap-note strong { font-weight: 800; }

/* ---------- Succès / erreurs ---------- */
.gtd-success-icon { width: 60px; height: 60px; border-radius: 50%; background: #fde8ee; color: var(--gtd-pink); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.gtd-form-title { text-align: center; margin: 0 0 6px; font-size: 20px; }
.gtd-form-intro { text-align: center; color: var(--gtd-text-muted); }

.gtd-feedback { margin: 16px 0; padding: 12px 14px; border-radius: var(--gtd-radius-sm); font-size: 14px; }
.gtd-feedback.gtd-success { background: #d4edda; color: #1d6b34; }
.gtd-feedback.gtd-error { background: #f8d7da; color: #842029; }

@media (max-width: 600px) {
    .gtd-wizard-card { padding: 20px 18px 90px; }
    .gtd-wizard-nav { left: 18px; right: 18px; }
}

/* ================================================================
   Correctif précis (classes confirmées via l'inspecteur du thème
   "domudia") : la grille à 2 colonnes de la section .presentation
   réserve une colonne de 380px pour l'image mise en avant de la page
   (.imgbox-wrap), avec un accent décoratif rose en ::before. Comme la
   page "Demande de devis" n'a pas d'image mise en avant, on repasse en
   1 seule colonne et on masque la boîte vide + son accent décoratif.
   On masque aussi le titre de page (h1) et tout autre élément ajouté
   par le thème autour du simulateur, pour ne garder que le formulaire.
   Actif uniquement sur les pages contenant le shortcode [grille_tarif_devis].
   ================================================================ */
body.gtd-has-simulator .presentation {
    padding: 20px 0 20px;
}
body.gtd-has-simulator .presentation .container.wrap {
    grid-template-columns: 1fr !important;
}
body.gtd-has-simulator .presentation .imgbox-wrap {
    display: none !important;
}
body.gtd-has-simulator .presentation h1 {
    display: none !important;
}
/* Masque tout élément du thème placé autour du simulateur dans la même
   colonne (ex: l'eyebrow "Diagnostic immobilier"), sans toucher au
   simulateur lui-même ni à ce qu'il contient. */
body.gtd-has-simulator .presentation .container.wrap > div > *:not(#gtd-simulator):not(:has(#gtd-simulator)) {
    display: none !important;
}