/* Pages /devis et /contact : formulaire (QuoteForm du design system) et, à côté, les téléphones des dépôts. */

.request {
    padding: var(--space-12) 0 var(--space-16);
    background: var(--surface-subtle);
}

.request__inner {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 960px) {
    .request__inner {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }

    .request__inner--single {
        grid-template-columns: minmax(0, 760px);
    }
}

.request__main {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.request__title {
    font: var(--type-h1);
}

.request__lead {
    font: var(--type-body-lg);
    color: var(--text-secondary);
}

.request__form {
    margin-top: var(--space-4);
    padding: var(--space-6);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

@media (min-width: 600px) {
    .request__form {
        padding: var(--space-8);
    }
}

.request__row {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 600px) {
    .request__row {
        grid-template-columns: 1fr 1fr;
    }
}

.request__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-1);
}

.request__note {
    font: var(--type-body-sm);
    color: var(--text-tertiary);
}

.request__aside {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-inverse);
    color: var(--steel-300);
}

.request__aside-title {
    font: var(--type-h4);
    color: var(--text-inverse);
}

.request__phones {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.request__phones li {
    display: grid;
    gap: var(--space-1);
    color: var(--text-inverse);
    font: var(--type-label);
}

.request__address {
    font: var(--type-body-sm);
    color: var(--steel-300);
}

.request__phones a {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--text-inverse);
    font: var(--type-mono);
    font-size: var(--text-md);
    text-decoration: none;
}

.request__phones a:hover {
    color: var(--text-inverse);
    text-decoration: underline;
}

.request__phones svg {
    color: var(--red-500);
}

/* Confirmation : succès affirmé, référence en évidence, puis l'espace client */
.request__done {
    padding: var(--space-8);
    border: var(--border-width) solid var(--border-default);
    border-top: 4px solid var(--status-stock);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.request__done-icon {
    color: var(--status-stock);
}

.request__done-icon svg {
    width: 48px;
    height: 48px;
}

.request__done-reference {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: baseline;
    justify-self: start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    font: var(--type-label);
    color: var(--text-secondary);
}

.request__done-reference strong {
    font: var(--weight-bold) var(--text-xl) / 1.2 var(--font-mono);
    color: var(--text-primary);
}

.request__done-space {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-2);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border-default);
}

.request__done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
}

/* Récapitulatif de la demande envoyée : à droite de la confirmation sur grand écran, dessous sur mobile */
.request-summary {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.request-summary__title {
    font: var(--type-h4);
}

.request-summary__section {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border-default);
}

.request-summary__heading {
    font: var(--type-overline);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.request-summary__muted {
    font: var(--type-body-sm);
    color: var(--text-secondary);
}

.request-summary__lines {
    display: grid;
    gap: var(--space-3);
}

.request-summary__lines li {
    display: grid;
    gap: 2px;
}

.request-summary__lot {
    font: var(--type-body-sm);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.request-summary__total {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--space-2);
    font: var(--type-label);
}

.request-summary__total strong {
    font: var(--weight-bold) var(--text-lg) / 1.2 var(--font-display);
}

.request-summary__facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font: var(--type-body-sm);
}

.request-summary__facts dt {
    color: var(--text-secondary);
}

.request-summary__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.request-summary__message {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    font: var(--type-body-sm);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.request-summary__contact {
    display: grid;
    gap: 2px;
    font: var(--type-body-sm);
    overflow-wrap: anywhere;
}

/* Précisions facultatives : un panneau replié sous le titre « Ajouter des précisions techniques » */
.request__extra {
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-default);
}

.request__extra-title {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    min-height: 44px;
    font: var(--type-h4);
    cursor: pointer;
    list-style: none;
}

.request__extra-title::-webkit-details-marker {
    display: none;
}

.request__extra-title svg {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform var(--duration-fast) var(--ease-out);
}

.request__extra[open] .request__extra-title svg {
    transform: rotate(180deg);
}

.request__extra-body {
    display: grid;
    gap: var(--space-5);
    padding-top: var(--space-4);
}

.request__extra-title span span,
.quote-lots__title span {
    font: var(--type-body);
    color: var(--text-tertiary);
}

.request__extra-hint {
    font: var(--type-body-sm);
    color: var(--text-secondary);
}

/* Lots de la demande : le projet du visiteur, au-dessus du formulaire */
.quote-lots {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-6);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

@media (min-width: 600px) {
    .quote-lots {
        padding: var(--space-6) var(--space-8);
    }
}

#devis-lots {
    display: grid;
    gap: var(--space-3);
}

.quote-lots__title {
    font: var(--type-h4);
}

.quote-lots__text {
    color: var(--text-secondary);
}

.quote-lots__notice,
.quote-lot__notice {
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--status-order);
    border-radius: var(--radius-sm);
    background: var(--status-order-bg);
    font: var(--type-body-sm);
}

.quote-lots__list {
    display: grid;
}

.quote-lot {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-top: var(--border-width) solid var(--border-default);
}

@media (min-width: 600px) {
    .quote-lot {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
}

.quote-lot--unavailable .quote-lot__title {
    color: var(--text-secondary);
}

.quote-lot__main {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.quote-lot__title {
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.quote-lot__meta {
    font: var(--type-body-sm);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.quote-lot__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
}

.quote-lot__quantity {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.quote-lot__quantity .control {
    width: 6.5rem;
}

.quote-lot__unit {
    font: var(--type-body-sm);
    color: var(--text-secondary);
}

.quote-lot__remove {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    font: var(--type-body-sm);
}

.quote-lot__remove svg {
    width: 16px;
    height: 16px;
}

.quote-lots__total {
    display: grid;
    gap: 2px;
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-default);
}

.quote-lots__total-note {
    font: var(--type-body-sm);
    color: var(--text-tertiary);
}

/* Fenêtre « Ajouter des lots du stock » : plein écran sur mobile, centrée ailleurs */
.stock-dialog {
    width: min(960px, 100vw);
    max-width: 100vw;
    height: min(90dvh, 900px);
    max-height: 100dvh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-page);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.stock-dialog[open] {
    display: flex;
    flex-direction: column;
}

.stock-dialog::backdrop {
    background: rgb(23 27 30 / 0.6);
}

@media (max-width: 599px) {
    .stock-dialog {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
}

.stock-dialog__head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--border-default);
}

.stock-dialog__title {
    font: var(--type-h4);
}

.stock-dialog__close {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    min-height: var(--control-h-sm);
    padding: 0 var(--space-3);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    font: var(--type-label);
    cursor: pointer;
}

.stock-dialog__close svg {
    width: 16px;
    height: 16px;
}

.stock-dialog__lead {
    padding: var(--space-3) var(--space-5) 0;
    font: var(--type-body-sm);
    color: var(--text-secondary);
}

.stock-dialog__loading {
    padding: var(--space-5);
    color: var(--text-secondary);
}

.stock-dialog turbo-frame {
    display: block;
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-6);
}

/* Contenu de la fenêtre (cadre devis-stock) : recherche compacte et lots */
.stock-picker {
    display: grid;
    gap: var(--space-4);
}

.stock-picker__search {
    display: grid;
    gap: var(--space-3);
    align-items: end;
}

@media (min-width: 600px) {
    .stock-picker__search {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    }
}

/* Les lots ajoutés rejoignent la demande : pas de lien vers le projet ni vers /devis, qui feraient quitter le formulaire */
.stock-picker .lot-project__in a,
.stock-picker .lot-project__quote {
    display: none;
}

.stock-picker__count {
    font: var(--type-label);
    color: var(--text-secondary);
}

/* Les cartes du catalogue (components/lot-card.css), à la largeur de la fenêtre */
.stock-picker__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    container: lots / inline-size;
}

.stock-picker .catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
    justify-content: center;
    font: var(--type-body-sm);
}

.stock-picker .catalog-pagination a {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}

.stock-picker .catalog-pagination svg {
    width: 16px;
    height: 16px;
}