@font-face {
    font-family: 'Aptos';
    src: url('fonts/aptos.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --appbar-bg: #333131;
    --appbar-height: clamp(4.6rem, 10.8vh, 7.3rem); /* desktop : doit couvrir logo + padding de la topbar (sinon décalages calc() → débordement) */
    --appbar-text: #ffffff;
    --appbar-text-muted: rgba(255, 255, 255, 0.75);
    --appbar-accent: #5ab2e0;
    /* Radzen RadzenHeader utilise ces variables (pas --appbar-bg) */
    --rz-header-background-color: #333131;
    --rz-header-color: #ffffff;
    --footer-bg: var(--color-ej);
    --footer-text: #ffffff;
    --footer-icon-bg: #333131;
    --footer-height: 3rem;
    --footer-content-max-width: 1320px;
    --footer-font-size: 0.8125rem; /* copyright */
    --footer-link-font-size: 0.75rem; /* liens de droite, plus petits que le copyright */
    --footer-link-icon-size: 1rem;
    --rz-footer-background-color: var(--footer-bg);
    --rz-footer-color: #ffffff;
    --rz-footer-padding: 0;
    --rz-footer-border: none;
    --app-body-bg: #F4F6F7;
    --content-font-size: clamp(0.86rem, 1.65vh, 1rem);
    --content-small-font-size: clamp(0.76rem, 1.35vh, 0.9rem);
    --content-title-font-size: clamp(1.1rem, 2.45vh, 1.55rem);
    --content-section-title-font-size: clamp(0.98rem, 1.95vh, 1.2rem);
    --content-padding-x: clamp(0.85rem, 2vw, 1.5rem);
    --content-padding-y: clamp(0.65rem, 1.7vh, 1.1rem);
    /* Respiration entre le dernier élément de la page et le bandeau du pied. Variable
       distincte de --content-padding-y, qui sert aussi de padding HAUT ailleurs. */
    --content-padding-bottom: clamp(1rem, 2.4vh, 1.75rem);
    --content-gap: clamp(0.6rem, 1.45vh, 1rem);
    --content-card-padding: clamp(0.75rem, 1.9vh, 1.25rem);
    --content-card-margin: clamp(0.85rem, 2.2vh, 1.5rem);
    --content-grid-max-height: calc(100vh - var(--appbar-height) - var(--footer-height) - 8rem);
    --rz-body-background-color: #F4F6F7;
    --sidebar-bg: #ffffff;
    --sidebar-icon-color: #53B358;
    --sidebar-text: #333131;
    --sidebar-border: #e5e5e5;
    --sidebar-hover-bg: rgba(83, 179, 88, 0.12);
    --rz-sidebar-background-color: #ffffff;
    --rz-input-focus-border: 1px solid #5ab2e0;
    --rz-input-focus-shadow: inset 0 0 0 1px #5ab2e0;

    /* Palette Emalec : source unique des couleurs des utilitaires .bg-* / .col-* / .bor-*.
       À réutiliser via var(--color-xxx) plutôt que de recopier l'hexadécimal. */
    --color-evc: #5ab358; /* vert clair : validation d'une action, urgence lente */
    --color-ev: #17802f; /* vert */
    --color-ebc: #5ab2e0; /* bleu clair : actions neutres, pastille d'information */
    --color-ebf: #0798c8; /* bleu foncé : en-têtes de carte, titres de page */
    --color-eb: #2097cf; /* bleu */
    --color-erc: #cf635e; /* rouge clair : refus et réactivation, urgence rapide, PDF */
    --color-er: #a6535e; /* rouge */
    --color-ejc: #f6a126; /* jaune/orange clair : message au service, urgence moyenne */
    --color-ej: #e87e20; /* orange */
    --color-en: #333131; /* noir */
    --color-eg: #cfcfcf; /* gris */
}

@media (max-width: 1024px) {
    :root {
        --appbar-height: clamp(5.7rem, 12.5vh, 8.5rem);
    }
}

@media (max-width: 960px) {
    :root {
        --appbar-height: clamp(6.7rem, 14.5vh, 10rem);
    }
}

@media (max-width: 480px) {
    :root {
        --appbar-height: clamp(7.7rem, 18.5vh, 12rem);
        --content-font-size: clamp(0.84rem, 3.2vw, 0.95rem);
        --content-title-font-size: clamp(1rem, 4.5vw, 1.25rem);
        --content-padding-x: clamp(0.65rem, 3.5vw, 1rem);
        --content-padding-y: clamp(0.55rem, 2vh, 0.85rem);
        --content-padding-bottom: clamp(0.85rem, 2.2vh, 1.35rem);
        --content-card-padding: clamp(0.65rem, 3vw, 0.95rem);
    }
}

/* 

    Ici on Ecrit les principales couleurs du projets:
    - 4 couleurs principales ( et la version claire 'c' ). Vert = 'v' ; Jaune = 'j' ; Rouge = 'r'; Bleu = 'b'
    - Noir = 'n' et Gris = 'g' de la charte.

*/

/*--Partie Style Background 'bg-' --*/

.bg-evc {
    background-color: var(--color-evc) !important;
}

.bg-ev {
    background-color: var(--color-ev) !important;
}

.bg-ebc {
    background-color: var(--color-ebc) !important;
}

.bg-eb {
    background-color: var(--color-eb) !important;
}

.bg-erc {
    background-color: var(--color-erc) !important;
}

.bg-er {
    background-color: var(--color-er) !important;
}

.bg-ejc {
    background-color: var(--color-ejc) !important;
}

.bg-ej {
    background-color: var(--color-ej) !important;
}


.bg-en {
    background-color: var(--color-en) !important;
}

.bg-eg {
    background-color: var(--color-eg) !important;
}

/*--Partie Style Color 'col-' --*/

.col-evc {
    color: var(--color-evc) !important;
}

.col-ev {
    color: var(--color-ev) !important;
}

.col-ebc {
    color: var(--color-ebc) !important;
}

.col-eb {
    color: var(--color-eb) !important;
}

.col-erc {
    color: var(--color-erc) !important;
}

.col-er {
    color: var(--color-er) !important;
}

.col-ejc {
    color: var(--color-ejc) !important;
}

.col-ej {
    color: var(--color-ej) !important;
}


.col-en {
    color: var(--color-en) !important;
}

.col-eg {
    color: var(--color-eg) !important;

}

/*--Partie Style Border 'bor-' --*/

.bor-evc {
    border-color: var(--color-evc) !important;
}

.bor-ev {
    border-color: var(--color-ev) !important;
}

.bor-ebc {
    border-color: var(--color-ebc) !important;
}

.bor-eb {
    border-color: var(--color-eb) !important;
}

.bor-erc {
    border-color: var(--color-erc) !important;
}

.bor-er {
    border-color: var(--color-er) !important;
}

.bor-ejc {
    border-color: var(--color-ejc) !important;
}

.bor-ej {
    border-color: var(--color-ej) !important;
}


.bor-en {
    border-color: var(--color-en) !important;
}

.bor-eg {
    border-color: var(--color-eg) !important;
}

/* 
    End partie couleur de base.
*/

html, body {
    font-family: 'Aptos', sans-serif;
    font-size: var(--content-font-size);
    width: 100%;
    height: 100%;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Portée par le seul <div class="main-content-body content px-4"> de MainLayout.
   Pas de height: 100% ici : la boîte serait figée à la hauteur du conteneur défilant,
   le contenu la déborderait (.main-content-body est en overflow: visible) et viendrait
   peindre par-dessus le padding bas, jusqu'au bandeau du pied. La hauteur doit suivre
   le contenu ; c'est le min-height: 100% de .main-content-body qui garantit que le fond
   couvre toute la zone quand la page est courte. */
.content {
    padding-top: var(--content-padding-y);
}

.main-content,
.main-content.rz-body {
    font-size: var(--content-font-size);
}

.main-content h1,
.main-content h2,
.main-content .form-title {
    font-size: var(--content-title-font-size);
    line-height: 1.2;
    margin-bottom: var(--content-gap);
}

.main-content h3,
.main-content h4,
.main-content .card-header-title,
.main-content .section-title {
    font-size: var(--content-section-title-font-size);
    line-height: 1.2;
}

.main-content .rz-data-grid,
.main-content .rz-grid-table,
.main-content .rz-inputtext,
.main-content .rz-dropdown,
.main-content .rz-button,
.main-content .rz-paginator {
    font-size: var(--content-font-size);
}

.main-content .rz-data-grid td,
.main-content .rz-data-grid th {
    padding-block: clamp(0.28rem, 0.85vh, 0.55rem);
    padding-inline: clamp(0.45rem, 0.9vw, 0.75rem);
}

.main-content .card,
.main-content .shared-card {
    margin-bottom: var(--content-card-margin) !important;
    padding: var(--content-card-padding) !important;
}

.main-content .card-header,
.main-content .card-body {
    padding: var(--content-card-padding) !important;
}

.main-content .default-container,
.main-content .sites-container,
.main-content .search-container,
.main-content .demandes-container {
    margin: var(--content-gap) !important;
}

.main-content .form-title,
.main-content .card-header-title {
    font-size: var(--content-title-font-size) !important;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.loading-dialog {
    overflow: hidden !important;
    min-width: unset !important;
    min-height: unset !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 150px !important;
    max-height: 144px !important;
    padding-left: 3px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================== */

.rz-dropdown-panel .rz-data-row:hover {
    background-color: #cfcfcf !important;
    color: #333131 !important;
    cursor: pointer;
}

.rz-dropdown-panel .rz-data-row.rz-state-focused,
.rz-dropdown-panel .rz-data-row.rz-state-focused td {
    background-color: #2097cf !important;
    color: #333131 !important;
}

    .rz-dropdown-panel .rz-data-row.rz-state-focused:hover,
    .rz-dropdown-panel .rz-data-row.rz-state-focused:hover td {
        background-color: #5ab2e0 !important;
        color: #333131 !important;
    }

.rz-dropdown-panel .rz-data-row mark,
.rz-dropdown-panel .rz-data-row strong,
.rz-dropdown-panel .rz-data-row b,
.rz-dropdown-panel .rz-data-row td * {
    background-color: transparent !important;
    color: inherit !important;
}

.rz-dropdown-panel thead {
    display: none !important;
}

.rz-dropdown-panel .rz-lookup-search button {
    display: none !important;
}

.rz-dropdown-panel .rz-lookup-search-input {
    width: 100% !important;
}

.rz-dropdown-panel .rz-pager-page,
.rz-dropdown-panel button.rz-pager-page {
    background-color: transparent !important;
    color: #2097cf !important;
    border-color: transparent !important;
}

    .rz-dropdown-panel .rz-pager-page:not(.rz-state-disabled):hover {
        background-color: #5ab2e0 !important;
        color: #333131 !important;
    }

    .rz-dropdown-panel .rz-pager-page.rz-state-active,
    .rz-dropdown-panel button.rz-pager-page.rz-state-active {
        background-color: #2097cf !important;
        color: #fff !important;
        border-color: #2097cf !important;
    }

.rz-datepicker-popup-container .rz-state-active,
.rz-datepicker-popup-container span.rz-state-active {
    background-color: #2097cf !important;
    color: #fff !important;
    border-color: #2097cf !important;
}

.rz-datepicker-popup-container td[role="button"]:hover span {
    background-color: #5ab2e0 !important;
    color: #333131 !important;
}

.rz-dropdown-item.rz-state-highlight {
    background-color: #2097cf !important;
    color: #fff !important;
}

.rz-dropdown-item:hover {
    background-color: #5ab2e0 !important;
    color: #333131 !important;
}

/* La CSS scopée (.razor.css) ne s'applique pas au rendu interne des composants
   Radzen enfants (ex: RadzenIcon) : cette règle globale est nécessaire pour
   positionner correctement l'icône loupe dans la barre de recherche du dashboard. */
.dashboard-search-icon {
    position: absolute !important;
    top: 50% !important;
    left: clamp(0.5rem, 1vw, 0.75rem) !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    color: #8a8a8a !important;
    pointer-events: none !important;
}

.dashboard-widget-placeholder-icon {
    font-size: clamp(1.75rem, 3vh, 2.25rem) !important;
    color: #c0c0c0 !important;
}


/* Hauteurs réservées à l'en-tête et au pied en format mobile. Elles étaient calées sur une
   barre empilée sur trois lignes (jusqu'à 12rem) : passées en version compacte (une seule
   ligne), ces réservations laisseraient un vide sous la barre et au-dessus du pied. */
@media (max-width: 900px) {
    :root {
        --appbar-height: 3.25rem;
        /* Pied de page : au plus la hauteur de la barre du haut en mobile (MobileTopBar). */
        --footer-height: 2.6rem;
    }
}

@media (max-width: 480px) {
    :root {
        --appbar-height: 3rem;
    }
}

/* Marges du corps en mobile : l'espace vertical et horizontal est compté, on garde juste
   de quoi détacher les cartes des bords. Ces variables pilotent le padding du corps, des
   cartes et les écarts entre blocs (cf. usages de --content-*). */
@media (max-width: 900px) {
    :root {
        --content-padding-x: clamp(0.4rem, 2vw, 0.65rem);
        --content-padding-y: clamp(0.3rem, 1vh, 0.5rem);
        --content-padding-bottom: clamp(0.5rem, 1.2vh, 0.8rem);
        --content-card-padding: clamp(0.45rem, 2vw, 0.7rem);
        --content-card-margin: clamp(0.5rem, 1.4vh, 0.8rem);
        --content-gap: clamp(0.35rem, 1vh, 0.6rem);
    }
}


/* Voile de chargement des pages, affiché par MainLayout tant qu'un chargement est en cours.
   Il couvre l'écran pour empêcher les clics sur un contenu encore incomplet, tout en laissant
   voir la page en dessous : l'utilisateur comprend que les données arrivent. */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
}


/* Pagination — tableaux, listes déroulantes paginées, calendriers.
   Les boutons de Radzen (2,25 rem de large, gros écarts, icônes en taille de titre) donnaient
   une barre de pagination plus voyante que les données qu'elle sert. On redéfinit les variables
   de Radzen plutôt que de forcer chaque bouton : la réduction vaut alors pour toute
   l'application, y compris les paginations rendues hors de la page (panneaux de listes
   déroulantes, popups). */
:root {
    --rz-pager-numeric-button-min-width: 1.75rem;
    --rz-pager-numeric-button-padding: 0.3rem 0.45rem;
    --rz-pager-numeric-button-selected-padding: 0.3rem 0.45rem;
    --rz-pager-padding: 0.25rem 0.5rem;
    --rz-pager-gap: 0.2rem;
    --rz-pager-summary-font-size: 0.75rem;
    --rz-pager-summary-padding: 0.35rem;
    --rz-pager-dropdown-width: 64px;
}

/* Flèches « première / précédente / suivante / dernière » : même réduction que les numéros. */
.rz-pager .rz-pager-element {
    padding: 0.3rem;
    font-size: 0.85rem;
    line-height: 1;
}

.rz-pager .rz-pager-element .rzi,
.rz-pager .rz-pager-element .notranslate,
.rz-pager .rz-pager-icon {
    font-size: 1rem;
}

.rz-pager .rz-pager-page {
    font-size: 0.8rem;
    line-height: 1.4;
}


/* Infobulle des graphiques : le libellé complet de la catégorie, au-dessus de la valeur.
   Il sert de complément aux libellés d'axe, coupés dans les vignettes de widget. */
.shared-bar-chart__tooltip-category,
.shared-column-chart__tooltip-category {
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
}


/* Listes déroulantes : plus de pagination, la liste défile. On borne la hauteur du panneau
   pour qu'une longue liste (sites, contrats) n'occupe pas tout l'écran, et le contenu
   défile à l'intérieur. */
.rz-dropdown-panel .rz-data-grid,
.rz-dropdown-panel .rz-datatable {
    max-height: min(18rem, 50vh);
    overflow-y: auto;
}

.rz-dropdown-panel .rz-data-grid-data {
    overflow-y: auto;
}


/* Pages légales (mentions légales, données personnelles) : texte suivi, en colonne étroite
   pour rester lisible, sur le modèle du plan du site. */
.legal-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
}

.legal-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--color-ebf);
}

.legal-intro {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.legal-section {
    margin-bottom: 1.75rem;
}

.legal-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-ebf);
    margin-bottom: 0.6rem;
}

.legal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 1rem 0 0.4rem;
}

.legal-container p {
    line-height: 1.55;
    margin-bottom: 0.7rem;
}

.legal-list {
    padding-left: 1.25rem;
    margin-bottom: 0.7rem;
}

.legal-list li {
    line-height: 1.55;
    margin-bottom: 0.35rem;
}

/* Les adresses de navigateurs sont longues : elles se coupent plutôt que de déborder. */
.legal-container a {
    color: var(--color-ebf);
    overflow-wrap: anywhere;
}

.legal-copyright {
    margin-top: 2rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .legal-container {
        padding: 1rem 0.9rem 2rem;
    }

    .legal-title {
        font-size: 1.4rem;
    }
}


/* Pastille d'information (RadzenBadge « Info ») : urgence non reconnue dans les détails.
   Radzen l'affiche dans son propre bleu ; on la ramène au bleu clair de la charte, celui
   des pastilles d'urgence et des boutons neutres. */
.rz-badge.rz-badge-info,
.rz-badge-info {
    background-color: var(--color-ebc) !important;
    color: #fff !important;
}