/* 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 36px;
    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); }

.gtd-address-wrap { position: relative; }
.gtd-address-suggestions {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: -1px 0 0; padding: 6px;
    background: #fff; border: 1px solid var(--gtd-border); border-top: none;
    border-radius: 0 0 var(--gtd-radius-sm) var(--gtd-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.12); list-style: none; max-height: 220px; overflow-y: auto;
}
.gtd-address-suggestions[hidden] { display: none !important; }
.gtd-address-suggestion { padding: 9px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.gtd-address-suggestion:hover { background: #fdeef3; }

/* ---------- Navigation (déplacée en haut, sous la note d'astérisque) ---------- */
.gtd-wizard-nav {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid #eee;
}
.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; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.gtd-btn-dark:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.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-bar[hidden] { display: none !important; }
.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-heading { font-size: 20px; font-weight: 800; margin: 0 0 18px; line-height: 1.4; }
.gtd-recap-heading-sentence { display: inline; font-size: 15px; font-weight: 400; color: #555; }
.gtd-recap-heading-sep { color: #ccc; font-weight: 400; }
.gtd-recap-sentence { font-size: 15px; color: #222; line-height: 1.5; margin: 0; }

.gtd-recap-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .gtd-recap-grid { grid-template-columns: 1fr; } }

.gtd-recap-col-side { position: sticky; top: 20px; }
@media (max-width: 820px) { .gtd-recap-col-side { position: static; } }

.gtd-recap-summary {
    background: linear-gradient(160deg, #fff 0%, #fff7fa 60%, #fdeef3 100%);
    border: 1px solid rgba(226,19,86,.18);
    border-radius: var(--gtd-radius);
    padding: 22px 22px 24px;
    box-shadow: 0 10px 30px rgba(226,19,86,.08);
    margin-bottom: 18px;
}
.gtd-recap-summary .gtd-price-bar { margin-bottom: 18px; }
.gtd-recap-summary .gtd-price-box { font-size: 18px; }

.gtd-btn-cta {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
    background: var(--gtd-pink); border-color: var(--gtd-pink); color: #fff;
    font-size: 15px; padding: 15px 18px;
}
.gtd-btn-cta:hover { transform: translateY(-1px); }
.gtd-recap-summary-note { text-align: center; font-size: 12px; color: var(--gtd-text-muted); margin: 12px 0 0; }

.gtd-recap-card {
    background: #fafbfc; border: 1px solid #ececec; border-radius: var(--gtd-radius);
    padding: 18px 20px; margin-bottom: 18px;
}
.gtd-recap-card-head {
    display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px;
    letter-spacing: .02em; color: #222; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e8e8e8;
}
.gtd-recap-card-icon {
    width: 30px; height: 30px; border-radius: 9px; background: rgba(226,19,86,.1); color: var(--gtd-pink);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.gtd-recap-card-icon svg { width: 17px; height: 17px; }

.gtd-recap-contact { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; }
.gtd-recap-contact dt { font-weight: 700; color: #666; font-size: 13.5px; }
.gtd-recap-contact dd { margin: 0; font-size: 13.5px; color: #222; word-break: break-word; }
@media (max-width: 480px) { .gtd-recap-contact { grid-template-columns: 1fr; } .gtd-recap-contact dd { margin-bottom: 4px; } }
.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 26px; }
}

/* ================================================================
   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;
}