/* Grille Tarif & Devis — mini.css (mini-formulaire d'accroche) */

.gtd-mini {
    --gtd-mini-pink: #E21356;
    font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Ubuntu, Arial, sans-serif;
    max-width: 1100px;
    position: relative;
}

.gtd-mini-card {
    background: #fff;
    box-shadow: 0 14px 40px rgba(0,0,0,.2);
    display: flex;
    align-items: stretch;
    position: relative;
}

.gtd-mini-card-inner { flex: 1; padding: 26px 30px; min-width: 0; }

.gtd-mini-title { font-size: 17px; font-weight: 800; color: #222; margin-bottom: 18px; }
.gtd-mini-title-sep { color: #ccc; font-weight: 400; margin: 0 4px; }
.gtd-mini-title-sub { font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; color: #555; }

.gtd-mini-row { display: flex; flex-direction: column; gap: 14px; }
.gtd-mini-field { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
@media (max-width: 760px) { .gtd-mini-field { flex-direction: column; align-items: stretch; gap: 8px; } }

.gtd-mini-label {
    flex: none; width: 160px; font-weight: 800; font-size: 13px; color: #222;
    text-transform: uppercase; letter-spacing: .01em;
}
@media (max-width: 760px) { .gtd-mini-label { width: auto; } }

.gtd-mini-options { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }

.gtd-mini-option {
    appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
    flex: 1; min-width: 140px;
    border: none; background: #f1f2f3; border-radius: 6px;
    padding: 12px 16px; font-weight: 500; font-size: 14px; color: #444; cursor: pointer;
    font-family: inherit;
}
.gtd-mini-option-icon { width: 20px; height: 20px; display: inline-flex; flex: none; opacity: .55; }
.gtd-mini-option-icon svg { width: 100%; height: 100%; }
.gtd-mini-option.is-active { background: var(--gtd-mini-pink); color: #fff; }
.gtd-mini-option.is-active .gtd-mini-option-icon { opacity: 1; filter: brightness(0) invert(1); }

/* ---- Forme triangulaire "Étape suivante", fidèle à la maquette de
   référence : dépasse le bord droit de la carte, pointe vers la droite ---- */
.gtd-mini-cta-shape {
    appearance: none; flex: none;  margin-right: -45px;
    background: var(--gtd-mini-pink); border: none; color: #fff; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: 13px; text-transform: uppercase;
    letter-spacing: .01em; line-height: 1.3; text-align: center;
    display: flex; align-items: center; justify-content: center; padding: 0 28px 0 14px;
    clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%);
}
.gtd-mini-cta-shape:disabled {  cursor: not-allowed; }
@media (max-width: 760px) {
    .gtd-mini-cta-shape {
        width: 100%; margin: 0; clip-path: none; padding: 14px; flex-direction: row; gap: 8px;
    }
    .gtd-mini-card { flex-direction: column; }
}

/* ================================================================
   Correctif : hauteur de la bannière du thème ".ban" réduite sur la
   page où ce mini-formulaire est placé (ex. bannière d'accueil), pour
   laisser de la place au mini-formulaire sans page trop longue.
   Actif uniquement sur les pages contenant [grille_tarif_devis_mini].
   ================================================================ */
body.gtd-has-mini-form .ban {
    height: 150px !important;
}