/*
    Thème du site, chargé après portal.css (gabarit Portal / Bootstrap 5).
    Les couleurs et dimensions sont des variables: changer --mc-primaire suffit pour changer l'accent.
*/

:root {
    --mc-primaire: #ea580c;
    --mc-primaire-fonce: #c2410c;
    --mc-primaire-pale: #fff4ed;
    --mc-primaire-anneau: rgba(234, 88, 12, .18);

    --mc-fond: #f4f5f7;
    --mc-surface: #ffffff;
    --mc-bordure: #e4e7ec;
    --mc-bordure-legere: #eef0f3;
    --mc-texte: #1d2433;
    --mc-texte-2: #475467;
    --mc-texte-pale: #667085;
    --mc-danger: #d92d20;

    --mc-menu-fond: #111827;
    --mc-menu-texte: #a7afbe;
    --mc-menu-texte-actif: #ffffff;
    --mc-menu-survol: rgba(255, 255, 255, .06);
    --mc-menu-titre: #6b7385;

    --mc-largeur-menu: 260px;
    --mc-hauteur-entete: 60px;
    --mc-rayon: 10px;
    --mc-rayon-petit: 8px;
    --mc-ombre: 0 1px 2px rgba(16, 24, 40, .05);
    --mc-ombre-haute: 0 12px 32px rgba(16, 24, 40, .12);

    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-link-color: var(--mc-primaire);
    --bs-link-hover-color: var(--mc-primaire-fonce);
}

body, .app {
    font-family: var(--bs-body-font-family);
    color: var(--mc-texte-2);
    -webkit-font-smoothing: antialiased;
}

.app {
    background: var(--mc-fond);
    padding-top: var(--mc-hauteur-entete);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--mc-texte);
}

a {
    color: var(--mc-primaire);
}

    a:hover {
        color: var(--mc-primaire-fonce);
    }

/* ===== En-tête ===== */

.app-header {
    height: var(--mc-hauteur-entete);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--mc-bordure);
    box-shadow: none;
}

.app-header-inner {
    height: 100%;
}

@media (min-width: 1200px) {
    .app-header-inner {
        margin-left: var(--mc-largeur-menu);
    }
}

.mc-entete {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--mc-hauteur-entete);
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .mc-entete {
        padding: 0 1.5rem;
    }
}

.mc-entete .sidepanel-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -.5rem;
    border-radius: var(--mc-rayon-petit);
    color: var(--mc-texte);
}

    .mc-entete .sidepanel-toggler:hover {
        background: var(--mc-fond);
    }

    .mc-entete .sidepanel-toggler svg {
        width: 24px;
        height: 24px;
    }

.mc-entete-compagnie {
    font-weight: 600;
    color: var(--mc-texte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mc-utilisateur {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-left: auto;
    min-width: 0;
}

.mc-utilisateur-texte {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
    min-width: 0;
}

.mc-utilisateur-nom {
    font-weight: 600;
    color: var(--mc-texte);
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-utilisateur-role {
    font-size: .75rem;
    color: var(--mc-texte-pale);
}

.mc-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mc-primaire-pale);
    color: var(--mc-primaire-fonce);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .02em;
}

/* ===== Menu latéral ===== */

.app-sidepanel {
    border-right: 0;
}

    .app-sidepanel .sidepanel-inner {
        width: var(--mc-largeur-menu);
        background: var(--mc-menu-fond);
        box-shadow: none;
    }

    .app-sidepanel.sidepanel-hidden {
        left: calc(-1 * var(--mc-largeur-menu) - 40px);
    }

    .app-sidepanel .sidepanel-close {
        right: -2.5rem;
        top: .5rem;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        text-decoration: none;
    }

    .app-sidepanel .app-nav-main {
        scrollbar-color: rgba(255, 255, 255, .15) transparent;
    }

        .app-sidepanel .app-nav-main::-webkit-scrollbar {
            background-color: transparent;
        }

        .app-sidepanel .app-nav-main::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, .15);
        }

@media (min-width: 1200px) {
    .app-wrapper {
        margin-left: var(--mc-largeur-menu);
    }
}

.mc-marque {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.mc-marque-icone {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mc-rayon-petit);
    background: var(--mc-primaire);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .02em;
}

.mc-marque-texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.mc-marque-nom {
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-marque-sous {
    color: var(--mc-menu-titre);
    font-size: .75rem;
}

.app-sidepanel .app-nav-main {
    padding: .75rem 0;
}

.app-nav .mc-nav-titre {
    padding: 1rem 1.25rem .375rem;
    color: var(--mc-menu-titre);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .app-nav .mc-nav-titre:first-child {
        padding-top: .25rem;
    }

.app-nav .nav-item {
    padding: 0 .625rem;
    background: transparent;
    color: inherit;
}

.app-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5625rem .75rem;
    margin: 1px 0;
    border-left: 0;
    border-radius: var(--mc-rayon-petit);
    color: var(--mc-menu-texte);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .app-nav .nav-link:hover {
        color: var(--mc-menu-texte-actif);
        background: var(--mc-menu-survol);
    }

    .app-nav .nav-link.active {
        color: var(--mc-menu-texte-actif);
        background: rgba(234, 88, 12, .16);
        border-left: 0;
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--mc-primaire);
    }

        .app-nav .nav-link.active .nav-icon {
            color: var(--mc-primaire);
        }

.app-nav .nav-icon {
    position: static;
    display: inline-flex;
    width: 18px;
    justify-content: center;
}

    .app-nav .nav-icon svg {
        width: 16px;
        height: 16px;
    }

.app-sidepanel-footer {
    padding: .5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: transparent;
}

    .app-sidepanel-footer .nav-link {
        background: none;
    }

/* Fond assombri derrière le menu ouvert sur mobile */
.sidepanel-visible .sidepanel-drop {
    background: rgba(16, 24, 40, .5);
}

/* ===== Contenu ===== */

.app-content {
    padding: 1.25rem 1rem 2rem;
}

@media (min-width: 768px) {
    .app-content {
        padding: 1.75rem 1.5rem 2.5rem;
    }
}

@media (min-width: 1200px) {
    .app-content {
        padding: 2rem 2rem 3rem;
    }
}

.mc-entete-page {
    margin-bottom: 1.25rem;
}

.app-page-title {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    color: var(--mc-texte);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Bouton « + » placé dans le titre des pages de liste */
.app-page-title a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: var(--mc-rayon-petit);
    background: var(--mc-primaire);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    transition: background-color .15s;
}

    .app-page-title a:hover {
        background: var(--mc-primaire-fonce);
        color: #fff;
    }

    .app-page-title a svg {
        width: 18px;
        height: 18px;
    }

.page-utilities .form-control,
.page-utilities .form-select {
    min-width: 220px;
}

@media (max-width: 767.98px) {
    .app-page-title {
        font-size: 1.25rem;
    }

    .page-utilities,
    .page-utilities > .row,
    .page-utilities .col-auto {
        width: 100%;
    }

        .page-utilities .form-control,
        .page-utilities .form-select {
            min-width: 0;
            width: 100%;
        }

        .page-utilities .table-search-form > .col-auto {
            flex: 1 1 auto;
        }
}

/* ===== Cartes ===== */

.app-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-bordure);
    border-radius: var(--mc-rayon);
    box-shadow: var(--mc-ombre) !important;
}

    .app-card.border-left-decoration {
        border-left: 3px solid var(--mc-primaire);
    }

    .app-card .app-card-header {
        border-bottom: 1px solid var(--mc-bordure-legere);
    }

    .app-card .app-card-title {
        color: var(--mc-texte);
        font-weight: 600;
    }

.app-card-orders-table .app-card-body {
    border-radius: var(--mc-rayon);
    overflow: hidden;
}

/* ===== Tableaux ===== */

.table {
    --bs-table-color: var(--mc-texte-2);
    --bs-table-hover-bg: #f9fafb;
    margin-bottom: 0;
    font-size: .875rem;
    /* GridView ajoute border="1" rules="all": la carte autour suffit */
    border: 0 !important;
}

    .table > :not(caption) > * > * {
        padding: .75rem .75rem;
        border-bottom-color: var(--mc-bordure-legere);
        vertical-align: middle;
    }

        .table > :not(caption) > * > *:first-child {
            padding-left: 1rem;
        }

        .table > :not(caption) > * > *:last-child {
            padding-right: 1rem;
        }

    /* Colonne des boutons d'action: les icônes restent côte à côte */
    .table td:has(> a > svg) {
        width: 1%;
        white-space: nowrap;
    }

    /* Valeurs courtes (C-1003, (819) 555-0199, dates): jamais coupées (classe posée par theme.js) */
    .table td.mc-court {
        white-space: nowrap;
    }

    .table th {
        padding-top: .625rem !important;
        padding-bottom: .625rem !important;
        background: #f9fafb;
        color: var(--mc-texte-pale);
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        white-space: nowrap;
        border-bottom: 1px solid var(--mc-bordure) !important;
    }

        .table th a {
            color: inherit;
            text-decoration: none;
        }

            .table th a:hover {
                color: var(--mc-texte);
            }

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

.app-table-hover > tbody > tr:hover > td {
    background: #f9fafb;
}

/* Boutons d'action (crayon, corbeille...) dans les lignes */
.table td > a:has(svg),
.table td > span > a:has(svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: var(--mc-rayon-petit);
    color: var(--mc-texte-pale);
    transition: background-color .15s, color .15s;
}

    .table td > a:has(svg):hover,
    .table td > span > a:has(svg):hover {
        background: var(--mc-primaire-pale);
        color: var(--mc-primaire);
    }

    .table td > a[id*="Delete"]:hover,
    .table td > a[id*="Effacer"]:hover,
    .table td > a[id*="Supprimer"]:hover {
        background: #fef3f2;
        color: var(--mc-danger);
    }

.table td > a svg,
.table td > span > a svg {
    width: 17px;
    height: 17px;
}

.table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mc-primaire);
    vertical-align: middle;
}

/* Pagination des GridView */
.table tr.pager > td {
    padding: .75rem 1rem;
    background: var(--mc-surface);
    border-top: 1px solid var(--mc-bordure-legere);
}

.table tr.pager table {
    margin: 0;
}

    .table tr.pager table td {
        padding: 0 .125rem;
        border: 0;
    }

        .table tr.pager table td a,
        .table tr.pager table td span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 .5rem;
            border-radius: var(--mc-rayon-petit);
            border: 1px solid var(--mc-bordure);
            color: var(--mc-texte-2);
            text-decoration: none;
            font-weight: 500;
        }

        .table tr.pager table td span {
            background: var(--mc-primaire);
            border-color: var(--mc-primaire);
            color: #fff;
        }

        .table tr.pager table td a:hover {
            background: var(--mc-fond);
        }

/* Grilles en cartes sur mobile (étiquettes posées par theme.js) */
@media (max-width: 767.98px) {
    .app-card-orders-table,
    .app-card-orders-table .app-card-body {
        background: transparent;
        border: 0;
        box-shadow: none !important;
        overflow: visible;
    }

    table.mc-cartes,
    table.mc-cartes > tbody {
        display: block;
        width: 100% !important;
        background: transparent;
    }

        table.mc-cartes > tbody > tr,
        table.mc-cartes > thead > tr {
            display: block;
            position: relative;
            margin-bottom: .75rem;
            padding: .375rem 1rem;
            background: var(--mc-surface);
            border: 1px solid var(--mc-bordure);
            border-radius: var(--mc-rayon);
            box-shadow: var(--mc-ombre);
        }

            table.mc-cartes > tbody > tr.mc-entete-ligne,
            table.mc-cartes > thead {
                display: none;
            }

            table.mc-cartes > tbody > tr > td {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                gap: 1rem;
                width: auto !important;
                padding: .4375rem 0 !important;
                border: 0;
                border-bottom: 1px solid var(--mc-bordure-legere);
                text-align: right;
                background: transparent !important;
                word-break: break-word;
            }

                table.mc-cartes > tbody > tr > td:last-child {
                    border-bottom: 0;
                }

                table.mc-cartes > tbody > tr > td[data-label]::before {
                    content: attr(data-label);
                    flex: none;
                    max-width: 45%;
                    color: var(--mc-texte-pale);
                    font-size: .6875rem;
                    font-weight: 600;
                    letter-spacing: .06em;
                    text-transform: uppercase;
                    text-align: left;
                }

                table.mc-cartes > tbody > tr > td.mc-vide {
                    display: none;
                }

                table.mc-cartes > tbody > tr > td.mc-actions {
                    justify-content: flex-end;
                    gap: .25rem;
                    padding-top: .5rem !important;
                }

                    table.mc-cartes > tbody > tr > td.mc-actions::before {
                        display: none;
                    }

        table.mc-cartes > tbody > tr.pager {
            padding: .5rem;
        }

            table.mc-cartes > tbody > tr.pager > td {
                justify-content: center;
                border: 0;
            }
}

/* ===== Formulaires ===== */

.form-control,
.form-select {
    min-height: 40px;
    border-color: #d0d5dd;
    border-radius: var(--mc-rayon-petit);
    color: var(--mc-texte);
    font-size: .9375rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--mc-primaire);
        box-shadow: 0 0 0 4px var(--mc-primaire-anneau);
    }

    .form-control::placeholder {
        color: #98a2b3;
    }

.form-label,
label.form-label {
    margin-bottom: .375rem;
    color: var(--mc-texte);
    font-size: .8125rem;
    font-weight: 600;
}

/* Listes de recherche (Tom Select, assets/js/recherche.js): même allure que .form-control */
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control {
    min-height: 40px;
    padding: .5rem .75rem;
    border-color: #d0d5dd;
    border-radius: var(--mc-rayon-petit);
    color: var(--mc-texte);
    font-size: .9375rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--mc-primaire);
    box-shadow: 0 0 0 4px var(--mc-primaire-anneau);
}

.ts-wrapper.is-invalid .ts-control {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.ts-wrapper.disabled .ts-control {
    background-color: #f2f4f7;
    opacity: 1;
}

.ts-wrapper.text-uppercase .ts-control,
.ts-wrapper.text-uppercase .ts-dropdown {
    text-transform: uppercase;
}

.ts-dropdown {
    margin-top: 4px;
    border: 1px solid var(--mc-bordure);
    border-radius: var(--mc-rayon-petit);
    box-shadow: var(--mc-ombre-haute);
    font-size: .9375rem;
    overflow: hidden;
}

    .ts-dropdown .option,
    .ts-dropdown .create,
    .ts-dropdown .no-results {
        padding: .5rem .75rem;
    }

    .ts-dropdown .active {
        background: var(--mc-primaire-pale);
        color: var(--mc-texte);
    }

    .ts-dropdown .no-results,
    .ts-dropdown .create {
        color: var(--mc-texte-pale);
    }

    .ts-dropdown .highlight {
        background: rgba(234, 88, 12, .18);
        border-radius: 2px;
    }

/* Sélecteur d'heure natif (feuilles de temps) et durée calculée sous les heures */
input[type="time"].form-control {
    font-variant-numeric: tabular-nums;
}

.mc-duree {
    min-height: 1.25rem;
    color: var(--mc-texte-pale);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

    .mc-duree.mc-duree-erreur {
        color: var(--mc-danger);
    }

.form-check-input:checked {
    background-color: var(--mc-primaire);
    border-color: var(--mc-primaire);
}

.form-check-input:focus {
    border-color: var(--mc-primaire);
    box-shadow: 0 0 0 4px var(--mc-primaire-anneau);
}

/* ===== Boutons ===== */

.btn {
    border-radius: var(--mc-rayon-petit);
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem 1rem;
}

.app-btn-primary,
.btn-primary {
    background: var(--mc-primaire);
    border-color: var(--mc-primaire);
    color: #fff;
}

    .app-btn-primary:hover,
    .app-btn-primary:focus,
    .btn-primary:hover,
    .btn-primary:focus {
        background: var(--mc-primaire-fonce);
        border-color: var(--mc-primaire-fonce);
        color: #fff;
    }

.app-btn-secondary,
.btn-secondary {
    background: #fff;
    border: 1px solid #d0d5dd;
    color: var(--mc-texte);
}

    .app-btn-secondary:hover,
    .btn-secondary:hover {
        background: var(--mc-fond);
        border-color: #d0d5dd;
        color: var(--mc-texte);
    }

.btn:focus-visible {
    box-shadow: 0 0 0 4px var(--mc-primaire-anneau);
}

@media (max-width: 575.98px) {
    .app-content .btn {
        padding: .625rem 1rem;
    }
}

/* ===== Alertes, modales ===== */

.alert {
    border-radius: var(--mc-rayon);
    font-size: .875rem;
}

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--mc-ombre-haute);
}

.modal-header,
.modal-footer {
    border-color: var(--mc-bordure-legere);
}

.mc-modal-sous-titre {
    margin-top: .125rem;
    color: var(--mc-texte-pale);
    font-size: .8125rem;
}

/* ===== Arbre à cases (asp:TreeView avec CssClass="mc-arbre", ex. étapes rapides) ===== */

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

.mc-arbre td {
    padding: 0;
    white-space: normal !important;
    vertical-align: middle;
}

    /* Cellules d'indentation (un div de NodeIndent px par niveau): largeur fixe, le libellé prend le reste */
    .mc-arbre td:not(:last-child) {
        width: 1%;
    }

/* Catégorie principale: titre de section */
.mc-arbre .mc-arbre-groupe.mc-niveau-0 td {
    padding: .875rem .5rem .25rem;
    color: var(--mc-texte-pale);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mc-arbre > table:first-child.mc-arbre-groupe.mc-niveau-0 td {
    padding-top: .25rem;
}

/* Sous-catégorie */
.mc-arbre .mc-arbre-groupe.mc-niveau-1 td,
.mc-arbre .mc-arbre-groupe.mc-niveau-2 td {
    padding: .5rem .5rem .125rem;
    color: var(--mc-texte);
    font-size: .8125rem;
    font-weight: 600;
}

/* Étape: toute la ligne est cliquable */
.mc-arbre .mc-arbre-etape {
    margin: 1px 0;
    border-radius: var(--mc-rayon-petit);
    cursor: pointer;
    transition: background-color .12s;
}

    .mc-arbre .mc-arbre-etape td:last-child {
        display: flex;
        align-items: center;
        gap: .625rem;
        padding: .5rem .625rem;
        color: var(--mc-texte-2);
    }

    .mc-arbre .mc-arbre-etape:hover {
        background: var(--mc-fond);
    }

    .mc-arbre .mc-arbre-etape.mc-coche {
        background: var(--mc-primaire-pale);
    }

        .mc-arbre .mc-arbre-etape.mc-coche td:last-child {
            color: var(--mc-texte);
        }

    .mc-arbre .mc-arbre-etape .form-check-input {
        flex: none;
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
    }

/* Petite image d'espacement que le TreeView laisse devant les feuilles */
.mc-arbre img {
    display: none;
}

/* ===== Pages d'accès (connexion, inscription) ===== */

.mc-acces {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--mc-surface);
    color: var(--mc-texte-2);
}

.mc-acces-grille {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .mc-acces-grille {
        grid-template-columns: minmax(0, 1.1fr) minmax(440px, 1fr);
    }
}

.mc-acces-visuel {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    color: #fff;
    background: linear-gradient(160deg, rgba(17, 24, 39, .55) 0%, rgba(17, 24, 39, .88) 75%), url("../../img/truck.webp") no-repeat center center;
    background-size: cover;
}

@media (min-width: 992px) {
    .mc-acces-visuel {
        display: flex;
    }
}

.mc-acces-visuel h2 {
    max-width: 30rem;
    margin-bottom: 1rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.mc-acces-visuel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mc-acces-visuel li {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: .5rem;
    color: rgba(255, 255, 255, .85);
}

    .mc-acces-visuel li::before {
        content: "";
        flex: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--mc-primaire);
    }

.mc-produit {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    color: inherit;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
}

    .mc-produit:hover {
        color: inherit;
    }

.mc-produit-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mc-rayon-petit);
    background: var(--mc-primaire);
    color: #fff;
}

    .mc-produit-icone svg {
        width: 20px;
        height: 20px;
    }

.mc-acces-panneau {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.mc-acces-boite {
    width: 100%;
    max-width: 400px;
}

    .mc-acces-boite .mc-produit {
        margin-bottom: 2.5rem;
        color: var(--mc-texte);
    }

@media (min-width: 992px) {
    .mc-acces-boite .mc-produit {
        display: none;
    }
}

.mc-acces-boite h1 {
    margin-bottom: .375rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mc-acces-sous-titre {
    margin-bottom: 2rem;
    color: var(--mc-texte-pale);
}

.mc-acces-boite .form-control {
    min-height: 44px;
}

.mc-acces-boite .btn {
    width: 100%;
    min-height: 44px;
    margin-top: .5rem;
    font-size: .9375rem;
    letter-spacing: 0;
    text-transform: none;
}

.mc-acces-pied {
    margin-top: 1.75rem;
    color: var(--mc-texte-pale);
    font-size: .9375rem;
    text-align: center;
}

.mc-acces-lien-secondaire {
    font-size: .875rem;
    color: var(--mc-texte-pale);
}