/*
 * Styles de mise en page et de composants.
 * Les variables et fondations sont définies dans design-system.css.
 */

/* ---------- Accessibilité ---------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--ink);
    color: var(--surface);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 1rem;
    color: var(--surface);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Structure ---------- */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-main {
    padding: 2rem 0 3rem;
}

/* ---------- En-tête et navigation ---------- */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}

.site-header__brand {
    display: flex;
    align-items: center;
}

.site-header__brand {
    gap: 1rem;
}

.site-header__brand .logo {
    max-height: 48px;
    width: auto;
}

.site-header__separator {
    width: 1px;
    height: 32px;
    background: var(--border);
}

.logo--partenaire {
    max-width: 140px;
    object-fit: contain;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-toggle:hover {
    background: var(--accent-light);
}

.nav-toggle__icon {
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.nav-toggle__icon::before {
    top: -6px;
}

.nav-toggle__icon::after {
    top: 6px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
    font-size: 0.875rem;
    white-space: nowrap;
}

.user-menu__name {
    color: var(--ink-muted);
}

.main-nav__link {
    display: block;
    padding: 0.5rem 0.625rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius);
}

.main-nav__link:hover {
    color: var(--accent);
    background: var(--accent-light);
    text-decoration: none;
}

.main-nav__link[aria-current='page'] {
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--accent);
}

/*
 * Écran réduit (jusqu'à 1100 px, car avec le co-marquage le menu ne tient plus sur une ligne en dessous) :
 * le menu se replie uniquement si le contrôleur Stimulus est actif.
 */
@media (max-width: 1100px) {
    .site-header__inner {
        flex-wrap: wrap;
    }

    .site-header--enhanced .nav-toggle {
        display: inline-flex;
    }

    .site-header--enhanced .main-nav {
        display: none;
        width: 100%;
        padding-bottom: 1rem;
    }

    .site-header--enhanced .main-nav--open {
        display: block;
    }

    .main-nav,
    .main-nav__list {
        flex-direction: column;
        align-items: stretch;
    }

    .main-nav {
        gap: 0.75rem;
    }

    .user-menu {
        padding: 0.75rem 0.75rem 0;
        border-left: 0;
        border-top: 1px solid var(--border);
        justify-content: space-between;
    }
}

/* ---------- Pied de page ---------- */

.site-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

/* ---------- Composants ---------- */

.page-header {
    margin-bottom: 2rem;
}

.page-header__title {
    font-size: 2rem;
}

.page-header__lead {
    margin-top: 0.5rem;
    color: var(--ink-muted);
    max-width: 65ch;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.card__title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.card__text {
    color: var(--ink-muted);
}

.card__link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font: inherit;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}

.btn--primary,
.btn--primary:hover {
    color: var(--surface);
    text-decoration: none;
}

.btn--primary {
    background: var(--accent);
}

.btn--primary:hover {
    background: var(--ink);
}

.btn--link {
    padding: 0;
    font-weight: 400;
    color: var(--accent);
    background: none;
    text-decoration: underline;
}

.btn--link:hover {
    color: var(--pink);
}

.form {
    display: grid;
    gap: 1.25rem;
}

.form__field {
    display: grid;
    gap: 0.375rem;
}

.form__label {
    font-weight: 700;
}

.form__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.form__input:focus {
    border-color: var(--accent);
    background: var(--accent-light);
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid currentColor;
}

.alert--error {
    color: var(--error);
    background: var(--surface);
}

.alert--success {
    color: var(--success);
    background: var(--surface);
}

.site-main .alert {
    margin-bottom: 1.5rem;
}

.form__help {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.form__errors {
    list-style: none;
    font-size: 0.875rem;
    color: var(--error);
}

.form__field--error .form__input {
    border-color: var(--error);
}

.form__fieldset {
    border: 0;
}

.form__legend {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.form__fieldset [hidden] {
    display: none;
}

.form__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form__check input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--accent);
}

.form__check-label {
    font-weight: 400;
}

.form__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.form-card {
    max-width: 640px;
}

.form-card__title {
    font-size: 1.25rem;
}

.form-card__lead {
    margin: 0.25rem 0 1.5rem;
    color: var(--ink-muted);
}

.logo-preview {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.logo-preview img {
    max-width: 200px;
    max-height: 80px;
    object-fit: contain;
}

.breadcrumb {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.page-header--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.card--a-venir {
    background: transparent;
    border-style: dashed;
}

/* ---------- Tableaux ---------- */

.table-wrapper {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.table thead th {
    font-size: 0.875rem;
    color: var(--ink-muted);
    background: var(--bg);
}

.table tbody tr:last-child > * {
    border-bottom: 0;
}

.table__row--inactif {
    color: var(--ink-muted);
}

.table__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: var(--radius);
}

.badge--success {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

.badge--muted {
    color: var(--ink-muted);
    background: var(--bg);
    border: 1px solid var(--border);
}

.badge--error {
    color: var(--error);
    background: color-mix(in srgb, var(--error) 10%, var(--surface));
}

.auth-card {
    max-width: 420px;
    margin: 2rem auto;
}

.auth-card__title {
    font-size: 1.75rem;
}

.auth-card__lead {
    margin: 0.5rem 0 1.5rem;
    color: var(--ink-muted);
}

.auth-card .alert {
    margin-bottom: 1.25rem;
}

.notice {
    padding: 1rem 1.25rem;
    background: var(--accent-light);
    border-left: 4px solid var(--accent-tech);
    border-radius: var(--radius);
}

/* ---------- Référentiels ---------- */

.section-title {
    margin: 2rem 0 1rem;
    font-size: 1.25rem;
}

.page-header + .section-title {
    margin-top: 0;
}

.text-muted {
    color: var(--ink-muted);
}

.btn--secondary {
    color: var(--accent);
    background: var(--surface);
    border-color: var(--accent);
}

.btn--secondary:hover {
    color: var(--surface);
    background: var(--accent);
    text-decoration: none;
}

.layout-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.card__header .card__title {
    margin-bottom: 0;
}

.simple-list {
    list-style: none;
}

.simple-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}

.simple-list__item:last-child {
    border-bottom: 0;
}

.simple-list__item > span:first-child {
    flex: 1;
}

.simple-list__item--inactif > span:first-child {
    color: var(--ink-muted);
}

.table__detail {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ink-muted);
}

.table__cell--narrow {
    width: 4.5rem;
}

.table__group th {
    font-size: 0.875rem;
    color: var(--accent);
    background: var(--accent-light);
}

.table--matrice td {
    text-align: center;
}

.table--matrice thead th:not(:first-child) {
    text-align: center;
    min-width: 8.5rem;
}

.form__input--compact {
    padding: 0.375rem 0.5rem;
}

.form__actions--sticky {
    position: sticky;
    bottom: 0;
    margin-top: 1.5rem;
    padding: 1rem 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

/* Statuts de couverture : couleurs du design system uniquement. */
.badge--couverture-couverte {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

.badge--couverture-non_couverte {
    color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, var(--surface));
}

.badge--couverture-option {
    color: var(--accent);
    background: var(--accent-light);
}

.badge--couverture-a_verifier {
    color: var(--ink-muted);
    background: var(--bg);
    border: 1px dashed var(--border);
}

.table__non-concerne {
    color: var(--ink-muted);
}

/* ---------- Questionnaire ---------- */

.page-header__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.liste-problemes {
    margin: 0.5rem 0 0 1.25rem;
}

.note-version {
    margin-bottom: 1.5rem;
}

.questionnaire-section {
    margin-bottom: 1.5rem;
}

.questionnaire-section__condition {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.question-list {
    list-style: none;
    margin-bottom: 1rem;
}

.question-item {
    padding: 1rem 0;
    border-top: 1px solid var(--border);
}

.question-item__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
}

.question-item__libelle {
    font-weight: 700;
}

.question-item__meta,
.question-item__aide {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.question-item__aide {
    font-style: italic;
}

.option-list {
    margin: 0.5rem 0 0 1.25rem;
    font-size: 0.9375rem;
}

.option-list li {
    padding: 0.125rem 0;
}

.option-list__alerte {
    display: block;
    font-size: 0.8125rem;
    color: var(--accent);
}

.form-card--large {
    max-width: 860px;
}

.options-collection {
    gap: 0.75rem;
}

.option-row {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.option-row__fields {
    display: grid;
    grid-template-columns: 2fr 5rem;
    gap: 0.75rem 1rem;
}

.option-row__fields > :nth-child(3),
.option-row__fields > :nth-child(4) {
    grid-column: 1 / -1;
}

.option-row__remove {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

/* ---------- Diagnostic ---------- */

.progression {
    margin-bottom: 1.5rem;
}

.progression__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.progression__etape {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progression__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    font-weight: 700;
}

.progression__etape--terminee .progression__numero {
    color: var(--surface);
    background: var(--success);
    border-color: var(--success);
}

.progression__etape--courante {
    color: var(--ink);
    font-weight: 700;
}

.progression__etape--courante .progression__numero {
    color: var(--surface);
    background: var(--accent);
    border-color: var(--accent);
}

.alertes-commerciales {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--accent-light);
    border-left: 4px solid var(--pink);
    border-radius: var(--radius);
}

.alertes-commerciales__titre {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.alertes-commerciales ul {
    margin-left: 1.25rem;
}

.blocage {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--error);
    border-left-width: 4px;
    border-radius: var(--radius-lg);
}

.blocage__titre {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    color: var(--error);
}

.blocage__detail {
    margin-top: 0.5rem;
    color: var(--ink-muted);
}

.blocage__levee {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.suite {
    margin-bottom: 1.5rem;
}

.recap {
    margin-bottom: 1rem;
}

.recap__ligne {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--border);
}

.recap__ligne dt {
    color: var(--ink-muted);
}

.recap__ligne dd {
    font-weight: 700;
}

@media (max-width: 600px) {
    .recap__ligne {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

.form__input:disabled {
    color: var(--ink-muted);
    background: var(--bg);
    cursor: not-allowed;
}

.blocage__motifs {
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.blocage__cause {
    display: block;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.historique-blocages {
    margin-bottom: 1.5rem;
}

.historique-blocages__titre {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.historique-blocages ul {
    margin-left: 1.25rem;
}

.avertissements {
    margin-bottom: 1.5rem;
    border-left-color: var(--pink);
}

/* ---------- Résultats du diagnostic ---------- */

.resultats {
    margin-bottom: 2rem;
}

.solution {
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.solution--retenue {
    border: 2px solid var(--accent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

.solution__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.solution__nom {
    font-size: 1.25rem;
}

.solution--retenue .solution__nom {
    font-size: 1.5rem;
    color: var(--accent);
}

.solution__description {
    margin-top: 0.5rem;
    color: var(--ink-muted);
}

.solution__explication {
    margin-top: 0.75rem;
}

.solution__details {
    margin-top: 0.75rem;
}

.solution__details summary {
    color: var(--accent);
    cursor: pointer;
}

.synthese {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.synthese__groupe {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid currentColor;
    background: var(--bg);
}

.synthese__groupe--couverte {
    color: var(--success);
}

.synthese__groupe--option {
    color: var(--accent);
}

.synthese__groupe--non_couverte {
    color: var(--error);
}

.synthese__groupe--a_verifier {
    color: var(--ink-muted);
}

.synthese__titre {
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    color: inherit;
}

.synthese__liste {
    margin-left: 1.125rem;
    color: var(--ink);
    font-size: 0.9375rem;
}

.synthese__commentaire {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.choix-solution {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.choix-solution .form__field {
    flex: 1 1 260px;
}

.a-preciser {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px dashed var(--accent-tech);
    border-radius: var(--radius);
}

.a-preciser__titre {
    font-size: 1rem;
}

.a-preciser ul {
    margin: 0.25rem 0 0 1.25rem;
}

.resultats__trace {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
}

/* ---------- Catalogue ---------- */

.liste-tarifs {
    list-style: none;
    font-size: 0.875rem;
}

.ligne-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem 1rem;
}

.familles-entete {
    margin-top: 1rem;
    align-items: center;
}

.familles-entete .section-title {
    margin: 1rem 0;
}

.offre-logiciel {
    margin-top: 1.5rem;
}

.offre-logiciel__titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.25rem;
    font-size: 1rem;
}

.choix-offre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.choix-offre .form__input {
    width: auto;
}

.offre-logiciel__offre {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.offre-logiciel__groupe {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.ventes-complementaires {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--accent-tech);
    border-left-width: 4px;
    border-radius: var(--radius);
}

.ventes-complementaires__titre {
    font-size: 1rem;
}

.ventes-complementaires__liste {
    margin: 0.5rem 0 0 1.25rem;
    display: grid;
    gap: 0.375rem;
}

/* ---------- Promotions ---------- */

.prix--barre {
    color: var(--ink-muted);
}

.prix--promotion {
    color: var(--pink);
}

/* Texte foncé sur rose clair : le blanc sur --pink n'atteint pas un contraste suffisant pour un petit texte. */
.badge--promotion {
    color: var(--ink);
    background: color-mix(in srgb, var(--pink) 18%, var(--surface));
    border: 1px solid var(--pink);
}

/* ---------- Configurations ---------- */

.configurations-diagnostic {
    margin-bottom: 1.5rem;
}

.ecarts {
    margin-bottom: 1.5rem;
}

.ecarts ul {
    margin: 0.5rem 0 0 1.25rem;
}

.quantite-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ajout__quantite {
    width: 5rem;
}

.totaux {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.totaux__ligne {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.totaux__ligne dt {
    font-weight: 700;
}

.totaux__ligne dd {
    text-align: right;
}

.totaux__mention {
    font-size: 0.8125rem;
}

.ajouts {
    margin-bottom: 1rem;
}

.ajouts__liste {
    list-style: none;
}

.ajout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
}

.ajout--recommande {
    background: var(--accent-light);
    margin: 0 -0.75rem;
    padding: 0.75rem;
}

.ajout__infos {
    flex: 1 1 320px;
}

.ajout__prix {
    display: block;
    font-size: 0.9375rem;
}

.ajout__form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantite-form .btn--link {
    white-space: nowrap;
}

.ajout[hidden] {
    display: none;
}

/* ===== Édition du devis : lignes et totaux à gauche, panneau d'ajout à droite ===== */
.devis-edition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.5rem;
    align-items: start;
}

.devis-edition__bas {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.devis-edition__panneau {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.devis-edition__panneau .ajout__infos {
    flex-basis: 100%;
}

.ajouts__titre {
    margin: 1.25rem 0 0.25rem;
    font-size: 1rem;
}

.remise-discrete__bouton {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.remise-discrete .remise-form {
    margin-top: 0.5rem;
}

.remise-discrete .remise-form[hidden],
.remise-discrete .remise-ligne[hidden] {
    display: none;
}

/* Remise d'un article, sous sa désignation dans le tableau du devis. */
.remise-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    margin-top: 0.375rem;
    font-weight: 400;
}

.remise-ligne .form__input {
    width: 4.5rem;
    text-align: right;
}

.remise-ligne__unite {
    color: var(--ink-muted);
}

.remise-ligne .form__help {
    flex-basis: 100%;
    margin: 0;
}

.btn--compact {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.remise-discrete__aide {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.remise-form__ligne {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.25rem 0;
}

.remise-form__ligne .form__input {
    width: 6rem;
}

/* Remise commerciale par article (panneau du devis, remise exceptionnelle). */
.remises-lignes {
    width: 100%;
    margin: 0.5rem 0 0.75rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.remises-lignes th,
.remises-lignes td {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-weight: 400;
}

.remises-lignes thead th {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.remises-lignes .nombre {
    text-align: right;
    white-space: nowrap;
}

.remises-lignes .form__input {
    width: 5.5rem;
    text-align: right;
}

.devis-blocs {
    margin-top: 1.5rem;
}

.devis-blocs summary {
    cursor: pointer;
    font-weight: 700;
}

.devis-detail--texte {
    white-space: normal;
}

@media (max-width: 1000px) {
    .devis-edition,
    .devis-edition__bas {
        grid-template-columns: 1fr;
    }

    .devis-edition__panneau {
        position: static;
        max-height: none;
    }
}

/* ===== Devis (page) — le PDF a ses propres styles dans devis/pdf.html.twig ===== */
.devis-page {
    overflow-x: auto;
}

.devis-parties {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.devis-partie {
    flex: 1 1 240px;
}

.devis-partie__titre {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

.devis-partie__contact {
    color: var(--ink-muted);
    margin-top: 0.5rem;
}

.devis-lignes,
.devis-totaux {
    width: 100%;
    border-collapse: collapse;
}

.devis-lignes th,
.devis-lignes td {
    padding: 0.625rem 0.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.devis-lignes thead th {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.devis-lignes .nombre,
.devis-totaux .nombre {
    text-align: right;
    white-space: nowrap;
}

.devis-detail {
    display: block;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.devis-commentaire {
    font-style: italic;
}

/* Montant d'une ligne remisée : montant initial barré, montant remisé en dessous. */
.devis-montant-initial,
.devis-montant-remise {
    display: block;
}

.devis-montant-initial {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.devis-remise td {
    font-size: 0.9375rem;
    color: var(--accent);
}

.devis-totaux {
    max-width: 420px;
    margin: 1.5rem 0 0 auto;
}

.devis-totaux th,
.devis-totaux td {
    padding: 0.375rem 0.5rem;
    text-align: left;
    font-weight: 400;
}

.devis-totaux .devis-totaux__ht > * {
    border-top: 1px solid var(--ink);
    font-weight: 700;
}

.devis-totaux .devis-totaux__ttc > * {
    background: var(--accent-light);
    font-weight: 700;
    font-size: 1.125rem;
}

/* Location financée : encadrée en bas du devis, hors calcul (total HT, TVA, mensualisation). */
.devis-location {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--accent-tech);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.devis-location__titre {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.devis-location .devis-loyers {
    margin-top: 0.75rem;
}

.devis-mensualisation {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--accent-tech);
    background: var(--bg);
}

.devis-bloc {
    margin-top: 1.25rem;
}

.devis-bloc__titre {
    font-weight: 700;
    color: var(--accent);
}

.devis-bloc__contenu {
    font-size: 0.9375rem;
}

.devis-bloc__contenu p,
.devis-bloc__contenu ul {
    margin-bottom: 0.5rem;
}

.devis-bloc__contenu ul {
    padding-left: 1.25rem;
    list-style: disc;
}

/* Annexe location (sur une page à part dans le PDF). */
.devis-annexe {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--border);
}

/* Location seule (devis hors diagnostic) : le contrat suit directement les coordonnées. */
.devis-annexe--seule {
    margin-top: 1.5rem;
    padding-top: 0;
    border-top: 0;
}

.devis-annexe__surtitre {
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.devis-annexe__titre {
    margin: 0.25rem 0;
    color: var(--accent);
}

/* Dans l'annexe, la location n'est pas encadrée (présentée comme le devis). */
.devis-annexe .devis-location {
    margin-top: 1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* Encadré de signature du client. */
.devis-signature {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
}

.devis-signature__titre {
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.devis-signature__champs {
    width: 100%;
    border-collapse: collapse;
}

.devis-signature__champs td {
    width: 50%;
    height: 7rem;
    vertical-align: top;
}

.devis-signature__champs td + td {
    padding-left: 1rem;
    border-left: 1px solid var(--border);
}

.devis-signature__libelle {
    display: block;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* Variante compacte (à côté des totaux) : lignes à remplir et cadre de signature. */
.devis-signature__champ {
    height: 2rem;
    margin-bottom: 0.625rem;
    border-bottom: 1px solid var(--ink-muted);
}

.devis-signature__champ .devis-signature__libelle,
.devis-signature__zone .devis-signature__libelle {
    margin: 0;
}

.devis-signature__zone {
    height: 5rem;
    margin-top: 0.875rem;
    padding: 0.375rem 0.5rem;
    background: var(--surface);
    border: 1px dashed var(--ink-muted);
}

.devis-signature__mention {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

/* Signature du devis à gauche, synthèse des prix à droite ; empilées sur petit écran. */
.devis-recap {
    width: 100%;
    margin-top: 1.5rem;
    border-collapse: collapse;
}

.devis-recap__signature,
.devis-recap__totaux {
    width: 50%;
    vertical-align: top;
}

.devis-recap__signature {
    padding-right: 1.5rem;
}

.devis-recap .devis-signature,
.devis-recap .devis-totaux {
    margin: 0;
}

.devis-recap .devis-totaux {
    max-width: none;
}

@media (max-width: 640px) {
    .devis-recap__signature,
    .devis-recap__totaux {
        display: block;
        width: 100%;
    }

    .devis-recap__signature {
        padding: 0 0 1.5rem;
    }
}

/* Diagnostic : « Précisez le métier », masqué tant que le métier choisi n'est pas « à préciser ». */
[data-metier-filtre-target="precision"][hidden] {
    display: none;
}

/* Option affichée sous sa ligne parente (utilisateur supplémentaire sous le logiciel, poste supplémentaire sous l'offre cyber). */
.devis-ligne--option > :first-child {
    padding-left: 1.75rem;
    box-shadow: inset 3px 0 0 var(--accent-tech);
}

/* Suivi commercial (administration) : affaires par commercial et chiffre d'affaires. */
.suivi__periode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.suivi__types {
    display: flex;
    gap: 0.5rem;
    list-style: none;
}

.suivi__navigation {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.suivi__navigation a {
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}

.table .nombre {
    text-align: right;
    white-space: nowrap;
}

.suivi__montant {
    display: block;
    font-weight: 700;
}

.suivi__detail {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.suivi__vide {
    color: var(--ink-muted);
}

.suivi__selection > * {
    background: var(--accent-light);
}

.suivi__total > * {
    border-top: 2px solid var(--ink);
    font-weight: 700;
}

.suivi__affaires-titre {
    margin-top: 2rem;
    align-items: baseline;
}

/* Classement des commerciaux par total signé : barres horizontales proportionnelles (--part, de 0 à 100 %). */
.suivi__classement {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.classement {
    display: grid;
    gap: 0.75rem;
    list-style: none;
}

.classement__ligne {
    display: grid;
    grid-template-columns: 2rem minmax(8rem, 12rem) 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.classement__rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 700;
}

.classement__ligne:first-child .classement__rang {
    background: var(--accent);
    color: var(--surface);
}

.classement__nom {
    font-weight: 700;
}

.classement__barre {
    height: 0.875rem;
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
}

.classement__valeur {
    display: block;
    width: var(--part, 0%);
    height: 100%;
    background: var(--accent-tech);
    border-radius: var(--radius);
}

.classement__ligne:first-child .classement__valeur {
    background: var(--accent);
}

.classement__montant {
    min-width: 9rem;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .classement__ligne {
        grid-template-columns: 2rem 1fr auto;
    }

    .classement__barre {
        grid-column: 2 / -1;
        grid-row: 2;
    }
}

/* Journal d'activité (administration). */
.journal__aide {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.journal__historique {
    margin-top: 2rem;
}

.journal__filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.journal__filtres .form__field {
    margin-bottom: 0;
}

.journal__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Fiche client : coordonnées à gauche, synthèse des devis (tuiles qui filtrent la liste) à droite. */
.fiche-client {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.fiche-client__liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 1rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.9375rem;
}

.fiche-client__liste dt {
    color: var(--ink-muted);
}

.fiche-client__liste dd {
    overflow-wrap: anywhere;
}

.fiche-client__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.fiche-client__diagnostics {
    display: grid;
    gap: 0.375rem;
    list-style: none;
}

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tuile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    text-align: left;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tuile:hover {
    border-color: var(--accent);
}

.tuile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tuile[aria-pressed="true"] {
    background: var(--accent-light);
    border-color: var(--accent);
}

.tuile--ca {
    border-left-color: var(--accent);
}

.tuile--brouillon {
    border-left-color: var(--accent-tech);
}

.tuile--envoye {
    border-left-color: var(--pink);
}

.tuile--signe {
    border-left-color: var(--success);
}

.tuile__libelle {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.tuile__valeur {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.tuile__valeur small {
    font-size: 0.875rem;
    font-weight: 400;
}

.tuile__detail {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

@media (max-width: 900px) {
    .fiche-client {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tuile {
        transition: none;
    }
}