html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html, body {
    overflow-x: hidden;
    max-width: 100%;
    touch-action: manipulation;   /* supprime aussi le zoom au double-tap */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
    textarea,
    select,
    [contenteditable="true"] {
        font-size: 16px !important;
    }
}

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;
}

.content {
    padding-top: 1.1rem;
}

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;
}

.acces-verrouille {
    opacity: .4;
    filter: grayscale(1);
    cursor: not-allowed;
}
.acces-verrouille * {
    pointer-events: none;
}

.lang-switch { display: flex; gap: 2px; margin: 0 12px; }
.lang-btn { border: 1px solid rgba(0,0,0,.2); background: transparent; padding: 2px 8px;
            font-size: .75rem; font-weight: 600; cursor: pointer; border-radius: 16px; }
.lang-btn.active { background: #ee7f7f; color: #fff; border-color: #fd0d0d; }

/* ===========================
   Squelettes de chargement
   Classes partagées par tous les modules (cartes, listes, panneaux de détails).
   Une seule copie : ne pas dupliquer cette section.
   =========================== */

.skeleton {
    background: linear-gradient(90deg, #ececec 25%, #f6f6f6 37%, #ececec 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: 8px;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---- Éléments de base ---- */

.skeleton-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-line {
    height: 12px;
}

.skeleton-line-title {
    width: 70%;
    margin-bottom: 8px;
}

.skeleton-line-sub {
    width: 45%;
    height: 10px;
}

/* Panneaux de droite (onglets + blocs de texte) */
.skeleton-tab {
    width: 96px;
    height: 34px;
    border-radius: 999px;
}

.skeleton-block {
    height: 14px;
    margin-bottom: 12px;
}

.skeleton-w-160 { width: 160px; }
.skeleton-w-100 { width: 100%; }
.skeleton-w-95  { width: 95%; }
.skeleton-w-90  { width: 90%; }
.skeleton-w-80  { width: 80%; }
.skeleton-w-60  { width: 60%; }

/* Panneaux Installation / Intégration */
.skeleton-row {
    height: 32px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-panel {
    height: 160px;
    width: 100%;
}

/* ---- Cartes des listes (programmes, organismes, villes) : icône à gauche, texte à droite ---- */

.skeleton-card {
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.skeleton-card .procedure-content {
    flex: 1;
}

.skeleton-card .vc-content {
    flex: 1;
}

/* ---- Lignes de liste (demandes, outils) : icône à gauche, texte à droite ---- */

.skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.skeleton-item .demande-content {
    flex: 1;
}

.skeleton-item .outilsFinance-content {
    flex: 1;
}

.skeleton-item .outilsJuridique-content {
    flex: 1;
}

.skeleton-item .outilsLogement-content {
    flex: 1;
}

.skeleton-item .outilsRechercheEmploi-content {
    flex: 1;
}

.skeleton-item .outilsStrategieEmploi-content {
    flex: 1;
}

/* ---- Cartes des provinces : drapeau rond + code + nom, centrés ---- */

.skeleton-stat-card {
    pointer-events: none;
}

.skeleton-flag {
    width: 40px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
}

.skeleton-stat-card .skeleton-flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto;
}

.skeleton-stat-card .skeleton-code {
    width: 22px;
    height: 10px;
    margin: 0 auto 8px;
}

.skeleton-stat-card .skeleton-name {
    width: 64px;
    height: 12px;
    margin: 0 auto;
}

/* ---- Pastille de compteur (programmes / organismes) en cours de calcul ---- */

.programs-badge.skeleton-badge {
    background: linear-gradient(90deg, #ececec 25%, #f6f6f6 37%, #ececec 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    color: transparent;
    border-color: transparent;
    box-shadow: none;
    min-width: 22px;
    min-height: 22px;
}

/* ---- Cartes de catégories (Immigration, Juridique, Finance) : icône ronde, titre et 2 lignes, centrés ---- */

.immigration-card.skeleton-immigration,
.juridique-card.skeleton-juridique,
.finance-card.skeleton-finance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.skeleton-immigration .skeleton-icon,
.skeleton-juridique .skeleton-icon,
.skeleton-finance .skeleton-icon {
    width: 40px;
    height: 40px;
}

.skeleton-immigration .skeleton-line-title,
.skeleton-juridique .skeleton-line-title,
.skeleton-finance .skeleton-line-title {
    width: 75%;
    margin-bottom: 0;
}

.skeleton-immigration .skeleton-line-sub,
.skeleton-juridique .skeleton-line-sub,
.skeleton-finance .skeleton-line-sub {
    width: 55%;
}

/* ---- Panneaux pleine largeur des listes de catégories encore sur l'ancien skeleton ---- */

.logement-scroll .skeleton-panel,
.rechercheemploi-scroll .skeleton-panel,
.strategieemploi-scroll .skeleton-panel {
    height: 110px;
    margin-bottom: 10px;
}

/* ---- Dashboard (DossierStatusCharts) : sidebars gauche / droite ---- */

.skeleton-dfd-badge {
    width: 130px;
    height: 40px;
    border-radius: 999px;
}

.skeleton-dfd-pills {
    width: 100%;
    max-width: 360px;
    height: 46px;
    border-radius: 10px;
    margin-top: 18px;
}

.skeleton-dfd-bignumber {
    width: 220px;
    height: 56px;
    margin: 14px 0 10px;
}

.skeleton-dfd-spark {
    width: 100%;
    max-width: 350px;
    height: 70px;
    margin-top: 24px;
}

.skeleton-dfd-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-dfd-donut {
    width: 150px;
    height: 110px;
    border-radius: 50%;
    margin: 0 auto;
}

.skeleton-dfd-consultant,
.skeleton-dfd-draw {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

/* ---- Dashboard : réseau central (mêmes blocs shimmer que les autres squelettes) ---- */

.skeleton-dfd-network {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 760;
    max-height: 100%;
    margin: 0 auto;
    pointer-events: none;
}

.skeleton-dfd-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    border: 1.5px solid #f1f1f1;
    border-radius: 50%;
}

.skeleton-dfd-bubble {
    position: absolute;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    border-radius: 50%;
}

.skeleton-dfd-bubble--sm {
    width: 3.2%;
}

.skeleton-dfd-hub {
    left: 50%;
    top: 50%;
    width: 13%;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #ececec;
}

/* ---- Cartes de statistiques (StatsCards) : calquées sur la vraie carte ---- */

.skeleton-sc-card {
    pointer-events: none;
}

.skeleton-sc-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.skeleton-sc-label {
    width: 68px;
    height: 12px;
}

.skeleton-sc-number {
    width: 52px;
    height: 28px;
}

.skeleton-sc-trend {
    width: 78px;
    height: 12px;
    margin-left: auto;
}

.skeleton-sc-line {
    width: 92%;
    height: 11px;
    margin: 3px 0;
}

.skeleton-sc-line--short {
    width: 62%;
}

.skeleton-sc-code {
    width: 70px;
    height: 10px;
}

.skeleton-sc-period {
    width: 58px;
    height: 10px;
}

/* ---- Bandeau du bas (OutilsStatsCards) ---- */

.skeleton-ticker-item {
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}

/* Respecte « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .programs-badge.skeleton-badge {
        animation: none;
    }
}

/* ===================================
   Skeleton d'InfoReglementes
   À AJOUTER à la fin de votre feuille d'InfoReglementes.
   Les blocs de base (.skeleton, .skeleton-tab, .skeleton-block,
   .skeleton-w-*) viennent d'app.css.
=================================== */

/* Avatar du consultant (même taille que le vrai : 48px, à droite) */
.skeleton-reg-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
}

/* Libellé + valeur d'une ligne de champ */
.skeleton-reg-label {
    width: 38%;
    height: 8px;
    border-radius: 6px;
}

.skeleton-reg-value {
    width: 45%;
    height: 10px;
    border-radius: 6px;
}

/* Pastille du prix */
.skeleton-reg-pill {
    width: 64px;
    height: 24px;
    border-radius: 999px;
}

/* Graphique des statistiques (même hauteur que le vrai : 60px) */
.skeleton-reg-chart {
    width: 100%;
    height: 60px;
    border-radius: 8px;
}

/* Le squelette ne doit pas réagir aux clics */
.reglementes-details[aria-busy="true"] {
    pointer-events: none;
}

/* ===================================
   Skeleton d'InfoAgentService
   À AJOUTER dans la section « Squelettes de chargement » d'app.css,
   SEULEMENT si ces classes ne sont pas déjà définies dans la feuille
   de la page Agents/Services.
=================================== */

.skeleton-label {
    width: 42px;
    height: 12px;
    border-radius: 6px;
}

.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
}

.skeleton-line-full { width: 100%; }
.skeleton-line-70   { width: 70%; }

.skeleton-name {
    width: 70%;
    height: 16px;
}

.skeleton-meta {
    width: 60px;
    height: 12px;
}

.skeleton-btn {
    width: 120px;
    height: 36px;
    border-radius: 8px;
}

.outilsStatistique-card.skeleton-card { min-height: 56px; }
/* ===== Skeleton InfoServiceStatistiques (reprend la mise en page réelle) ===== */
.sk-title      { height: 16px; width: 55%; margin-bottom: 8px; }
.sk-label      { height: 10px; width: 35%; }
.sk-card-label { width: 28%; margin-bottom: 14px; }
.sk-value      { height: 12px; width: 28%; }
.sk-text       { height: 11px; margin-bottom: 8px; }
.sk-pill       { height: 18px; width: 54px; border-radius: 999px; }

.sk-w-40  { width: 40%; }
.sk-w-60  { width: 60%; }
.sk-w-80  { width: 80%; }
.sk-w-90  { width: 90%; }
.sk-w-95  { width: 95%; }
.sk-w-100 { width: 100%; }

/* lignes « libellé ........ valeur » */
.sk-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    margin: 12px 0;
}

/* 4 anneaux */
.sk-rings {
    display: flex;
    gap: 22px;
    margin-top: 6px;
}
.sk-ring-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100px;
}
.sk-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* disque + barres horizontales */
.sk-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 18px 0;
}
.sk-disc-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 190px;
}
.sk-disc {
    width: 190px;
    height: 190px;
    border-radius: 50%;
}
.sk-hbars {
    flex: 1;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sk-hbar {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sk-hbar .sk-label { width: 90px; flex-shrink: 0; }
.sk-track { flex: 1; height: 10px; border-radius: 999px; }

/* graphique */
.sk-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.sk-chart { height: 140px; width: 100%; border-radius: 10px; }
.sk-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.sk-month { height: 9px; }

/* agent */
.sk-agent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.sk-agent-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }

/* Skeleton InfoProgression */
.sk-prog-strip  { height: 70px; width: 100%; border-radius: 10px; }
.sk-prog-circle { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 14px; }
.sk-prog-phase  { height: 44px; width: 100%; border-radius: 10px; margin-bottom: 10px; }

/* ===== Skeleton InfoProgression (calqué sur la page réelle) ===== */

/* calendrier */
.sk2-calendar { padding: 12px 16px; }
.sk2-month    { width: 140px; margin: 0 auto 14px; height: 12px; }
.sk2-days     { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.sk2-day      { flex: 0 0 72px; height: 84px; border-radius: 12px; }
.sk2-arrow    { flex: 0 0 36px; height: 36px; border-radius: 50%; }

/* colonne étroite */
.sk2-circle { width: 76px; height: 76px; border-radius: 50%; margin: 6px auto; }

/* en-tête PROCESS */
.sk2-head  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sk2-tag   { width: 150px; height: 38px; border-radius: 4px; }
.sk2-icons { display: flex; gap: 14px; }
.sk2-icon  { width: 22px; height: 22px; border-radius: 4px; }

/* phases */
.sk2-phase {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.sk2-phase--open { padding-bottom: 14px; }
.sk2-phase-bar   { display: flex; align-items: center; gap: 14px; }
.sk2-phase-name  { width: 70px; height: 13px; }
.sk2-track       { flex: 1; max-width: 430px; height: 7px; border-radius: 999px; }
.sk2-badge       { width: 26px; height: 22px; border-radius: 999px; margin-left: auto; }

/* tâches */
.sk2-task        { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sk2-bullet      { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.sk2-task-title  { width: 160px; height: 12px; }
.sk2-status      { width: 90px; height: 18px; border-radius: 999px; margin-left: auto; }

/* colonne droite */
.sk2-service    { display: flex; align-items: center; gap: 10px; }
.sk2-service .sk-title { flex: 1; margin-bottom: 0; }
.sk2-pill       { width: 70px; height: 18px; border-radius: 999px; }
.sk2-consultant { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sk2-consultant .sk-card-label { margin-bottom: 0; }
.sk2-avatar     { width: 44px; height: 44px; border-radius: 50%; }
.sk2-flags      { display: flex; flex-wrap: wrap; gap: 8px; }
.sk2-flag       { width: 64px; height: 20px; border-radius: 999px; }

/* flèches du bas */
.sk2-arrows { display: flex; gap: 40px; padding: 12px 8px; }
.sk2-arrow-phase { flex: 1; height: 30px; border-radius: 4px; }

/* ===========================
   Skeleton Processus | Alertes
   À AJOUTER dans la section « Squelettes de chargement » d'app.css.
   Le panneau de détails réutilise tes classes existantes sk2-*, sk-* et skeleton-*.
   =========================== */

/* Cartes des clients (AlertesCards) : avatar rond centré au-dessus du nom, du rôle et du pays */
.alertes-card.skeleton-alertes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.skeleton-alertes .skeleton-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.skeleton-alertes .skeleton-line-title {
    width: 90px;
    height: 14px;
    margin-bottom: 0;
}

.skeleton-alertes .skeleton-line-sub {
    width: 60px;
}

.skeleton-alertes .skeleton-line-tiny {
    width: 40px;
    height: 8px;
}

/* Services du bas (OutilsAlertesCards) : cloche à gauche, nom, puis délai et coût */
.skeleton-card .outilsAlertes-content {
    flex: 1;
}

.skeleton-alertes-delai {
    width: 56px;
    height: 10px;
}

.skeleton-alertes-cout {
    width: 48px;
    height: 10px;
}
/* ===========================
   Skeleton Processus | Alertes
   À AJOUTER dans la section « Squelettes de chargement » d'app.css.
   Le panneau de détails réutilise tes classes existantes sk2-*, sk-* et skeleton-*.
   =========================== */

/* Cartes des clients (AlertesCards) : avatar rond centré au-dessus du nom, du rôle et du pays */
.alertes-card.skeleton-alertes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.skeleton-alertes .skeleton-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.skeleton-alertes .skeleton-line-title {
    width: 90px;
    height: 14px;
    margin-bottom: 0;
}

.skeleton-alertes .skeleton-line-sub {
    width: 60px;
}

.skeleton-alertes .skeleton-line-tiny {
    width: 40px;
    height: 8px;
}

/* Services du bas (OutilsAlertesCards) : cloche à gauche, nom, puis délai et coût */
.skeleton-card .outilsAlertes-content {
    flex: 1;
}

.skeleton-alertes-delai {
    width: 56px;
    height: 10px;
}

.skeleton-alertes-cout {
    width: 48px;
    height: 10px;
}

/* Calendrier (CalendarStrip, paramètre Loading) : mois centré + pastilles de jours */
.skeleton-calendar-month {
    width: 140px;
    height: 12px;
    margin: 0 auto 14px;
}

.calendarStrip-cards .skeleton-calendar-day {
    flex: 0 0 62px;
    height: 72px;
    border-radius: 12px;
}

/* ===========================
   Squelettes : page Processus | Rapports
   =========================== */

.rp-sk-card,
.rp-sk-card * {
    pointer-events: none;
}

/* --- Cartes des consultants (avatar rond, nom, type, pays, centrés) --- */
.rapportsProcessus-image.skeleton {
    border-radius: 50%;
}

.rp-sk-name    { width: 70%; height: 12px; margin: 10px auto 8px; }
.rp-sk-type    { width: 45%; height: 10px; margin: 0 auto 6px; }
.rp-sk-country { width: 30%; height: 8px;  margin: 0 auto; }

/* --- Cartes d'outils (icône ronde, nom, délai + coût) --- */
.outilsRapportsProcessus-icon.skeleton {
    border-radius: 50%;
}

.rp-sk-tool-name  { width: 60%; height: 12px; margin-bottom: 8px; }
.rp-sk-tool-delai { width: 28px; height: 10px; }
.rp-sk-tool-cout  { width: 60px; height: 10px; margin-left: auto; }

/* --- Bandeau calendrier --- */
.rp-sk-calendar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.rp-sk-month { width: 130px; height: 14px; }

.rp-sk-calendar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.rp-sk-days {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 10px;
    overflow: hidden;
}

.rp-sk-arrow { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.rp-sk-day   { width: 42px; height: 46px; border-radius: 12px; flex: 0 0 auto; }

/* --- Colonne étroite : pourcentage + type de demande --- */
.rp-sk-circle { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto; }
.rp-sk-line   { height: 10px; }
.rp-sk-mt     { margin-top: 8px; }
.rp-sk-w-60   { width: 60%; }
.rp-sk-w-80   { width: 80%; }
.rp-sk-w-90   { width: 90%; }

/* --- Barres de phase --- */
.rp-sk-tag { width: 90px; height: 26px; border-radius: 6px; }

.rp-sk-phase {
    margin-top: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .02);
    overflow: hidden;
}

.rp-sk-phase-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.rp-sk-bullet         { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.rp-sk-bullet--small  { width: 16px; height: 16px; }
.rp-sk-track          { flex: 1; min-width: 60px; height: 8px; border-radius: 999px; }
.rp-sk-select         { width: 96px; height: 28px; border-radius: 6px; flex: 0 0 auto; }
.rp-sk-select--small  { width: 100px; height: 22px; }
.rp-sk-date           { width: 110px; height: 12px; flex: 0 0 auto; }
.rp-sk-toggle         { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }

.rp-sk-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 18px;
}

.rp-sk-task-title { flex: 1; max-width: 40%; height: 12px; }
.rp-sk-pill       { width: 90px; height: 22px; border-radius: 6px; flex: 0 0 auto; margin-left: auto; }
.rp-sk-status     { width: 62px; height: 20px; border-radius: 999px; flex: 0 0 auto; }

.rp-sk-arrow-phase { flex: 1; height: 28px; border-radius: 4px; }

/* --- Colonne de droite --- */
.rp-sk-client {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.rp-sk-client-info   { flex: 1; min-width: 0; }
.rp-sk-client-name   { width: 65%; height: 18px; margin-bottom: 8px; }
.rp-sk-client-type   { width: 80px; height: 20px; border-radius: 999px; }
.rp-sk-client-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }

.rp-sk-service-name { width: 60%; height: 18px; margin-bottom: 10px; }
.rp-sk-service-meta { display: flex; gap: 8px; margin-bottom: 12px; }
.rp-sk-pill--meta   { width: 72px; margin-left: 0; }

.rp-sk-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.rp-sk-field-label { width: 55px;  height: 8px; }
.rp-sk-field-value { width: 110px; height: 12px; }

.rp-sk-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-sk-flag  { width: 58px; height: 20px; border-radius: 999px; }

/* ===========================
   Squelettes : page Téléversement
   =========================== */

.tv-sk-card,
.tv-sk-card * {
    pointer-events: none;
}

/* --- Cartes des consultants : avatar rond, nom, type, adresse, centrés --- */
.televersement-image.skeleton { border-radius: 50%; }

.tv-sk-name  { width: 80%; height: 13px; margin: 10px auto 8px; }
.tv-sk-type  { width: 45%; height: 10px; margin: 0 auto 7px; }
.tv-sk-ville { width: 65%; height: 8px;  margin: 0 auto; }

/* --- Cartes des services : nom + délai à gauche, coût à droite --- */
.tv-sk-tool-name  { width: 55%; height: 14px; margin-bottom: 9px; }
.tv-sk-tool-delai { width: 70px; height: 10px; }
.tv-sk-tool-cout  { width: 62px; height: 12px; }

/* --- Tableau des documents --- */
.tv-sk-step       { display: block; width: 28px; height: 28px; border-radius: 50%; }
.tv-sk-doc-name   { width: 45%; height: 13px; }
.tv-sk-doc-status { width: 55%; height: 12px; }

.tv-sk-actions { display: flex; justify-content: flex-end; gap: 10px; }
.tv-sk-icon    { width: 30px; height: 30px; border-radius: 50%; }

/* --- Cartes latérales --- */
.tv-sk-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }

.tv-sk-consultant-name { width: 85%; height: 16px; margin-bottom: 8px; }
.tv-sk-line            { height: 11px; margin-bottom: 7px; }
.tv-sk-w-30            { width: 30%; }
.tv-sk-w-40            { width: 40%; }

.tv-sk-field-label { width: 50px;  height: 8px; }
.tv-sk-field-value { width: 100px; height: 12px; }

.tv-sk-service-name  { width: 50%; height: 18px; margin-bottom: 12px; }
.tv-sk-service-delai { width: 70px; height: 16px; }
.tv-sk-service-cout  { width: 72px; height: 30px; border-radius: 999px; }

/* --- Statistiques : courbe + 7 valeurs --- */
.tv-sk-chart        { width: 100%; height: 56px; border-radius: 8px; margin-bottom: 8px; }
.tv-sk-chart-labels { display: flex; justify-content: space-between; padding: 0 6px; }
.tv-sk-chart-label  { width: 14px; height: 9px; }

/* ===========================
   Squelettes : page Paiements
   =========================== */

.pm-sk-card,
.pm-sk-card * {
    pointer-events: none;
}

/* --- Cartes utilisateurs : avatar rond, nom et sous-titre centrés --- */
.paiements-image.skeleton { border-radius: 50%; }

.pm-sk-name { width: 75%; height: 13px; margin: 10px auto 8px; }
.pm-sk-sub  { width: 40%; height: 10px; margin: 0 auto; }

/* --- Liste des services : icône, nom + montant, personne + statut --- */
.pm-sk-icon-dot   { width: 28px; height: 28px; border-radius: 50%; }
.pm-sk-svc-name   { width: 45%; height: 13px; }
.pm-sk-svc-amount { width: 62px; height: 13px; }
.pm-sk-svc-person { width: 38%; height: 10px; }
.pm-sk-svc-status { width: 80px; height: 10px; }

/* --- Carte principale --- */
.pm-sk-title        { width: 45%; height: 24px; margin-bottom: 10px; }
.pm-sk-delai        { width: 90px; height: 14px; }
.pm-sk-price        { width: 100px; height: 38px; border-radius: 999px; }
.pm-sk-head-icon    { width: 32px; height: 32px; border-radius: 50%; }
.pm-sk-section-title{ width: 80px; height: 10px; margin-bottom: 14px; }
.pm-sk-field-label  { width: 70px; height: 9px; margin-bottom: 8px; }
.pm-sk-field-value  { width: 110px; height: 16px; margin-bottom: 14px; }
.pm-sk-note         { width: 240px; height: 12px; }
.pm-sk-updated      { width: 190px; height: 12px; }
.pm-sk-pill         { width: 84px; height: 24px; border-radius: 999px; }

/* --- Carte de droite : prestataire --- */
.pm-sk-client-name { width: 65%; height: 18px; margin-bottom: 8px; }
.pm-sk-client-type { width: 70px; height: 12px; }
.pm-sk-avatar      { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; }
.pm-sk-row-label   { width: 70px;  height: 8px; }
.pm-sk-row-value   { width: 110px; height: 12px; }

/* Bouton d'action de la carte de droite (Paiements) */
.pm-sk-action {
    width: 170px;
    height: 36px;
    border-radius: 999px;
    margin-left: auto;
}

/* Liste des services Paiements : lignes du squelette */
.pm-sk-list { padding: 4px 0; }

.pm-sk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
}

.pm-sk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-sk-col--right { flex: 0 0 auto; align-items: flex-end; }

.pm-sk-row .pm-sk-svc-name,
.pm-sk-row .pm-sk-svc-person { width: 70%; }

.pm-sk-row .pm-sk-svc-person { height: 10px; }
.pm-sk-row .pm-sk-svc-amount { width: 70px; }
.pm-sk-row .pm-sk-svc-status { width: 80px; }

/* séparateur « Services validés » */
.pm-sk-sep {
    margin: 14px 0 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e5e5;
}
.pm-sk-sep-title { width: 130px; height: 10px; }

/* Skeleton AbonnementCards : mêmes cartes que la page réelle */
.abonnement-card.ab-sk-card,
.abonnement-card.ab-sk-card:hover {
    transform: none;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.ab-sk-badge { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.ab-sk-name  { width: 90px;  height: 16px; flex-shrink: 0; }
.ab-sk-price { width: 150px; height: 20px; flex-shrink: 0; }
.ab-sk-obj   { width: 75%;   height: 10px; flex-shrink: 0; }
.ab-sk-delai { width: 160px; height: 22px; border-radius: 999px; flex-shrink: 0; }

.ab-sk-row  { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.ab-sk-dot  { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.ab-sk-line { height: 10px; }

.ab-sk-cta  { width: 100%; height: 34px; border-radius: 999px; flex-shrink: 0; }

/* ===== Squelettes page Préférences (à coller dans app.css) ===== */
.pref-sk{display:block;border-radius:6px;background:linear-gradient(90deg,rgba(128,128,128,.14) 25%,rgba(128,128,128,.28) 50%,rgba(128,128,128,.14) 75%);background-size:200% 100%;animation:pref-sk-shimmer 1.3s ease-in-out infinite}
@keyframes pref-sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pref-sk-title{height:16px;width:55%}
.pref-sk-line{height:11px;margin:9px 0}
.pref-sk-line.w90{width:90%}.pref-sk-line.w70{width:70%}.pref-sk-line.w50{width:50%}.pref-sk-line.w30{width:30%}
.pref-sk-row{height:34px;margin:6px 0;border-radius:8px}
.pref-sk-trow{display:flex;align-items:center;gap:12px;padding:8px 10px}
.pref-sk-trow .pref-sk{height:12px}
.pref-sk-trow .grow{flex:1}
.pref-sk-chip{width:64px;height:20px!important;border-radius:999px}
.pref-sk-ico{width:22px;height:22px!important;border-radius:6px}
.pref-sk-toggle{width:38px;height:20px!important;border-radius:999px}
.pref-sk-phase{display:flex;gap:12px;align-items:flex-start;padding:10px}
.pref-sk-num{width:26px;height:26px!important;border-radius:50%;flex:none}
.pref-sk-phase .body{flex:1}
@media (prefers-reduced-motion:reduce){.pref-sk{animation:none}}

/* Languettes : cachées sur ordinateur */
.drawer-tab {
    display: none;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .drawer-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1600;
        width: 16px;
        height: 46px;
        padding: 0;
        border: none;
        background: rgba(240, 150, 150, .92);
        color: #fff;
        font-size: .55rem;
        cursor: pointer;
        transition: left .25s ease, right .25s ease, background-color .15s ease;
    }

    .drawer-tab:hover { background: rgba(225, 110, 110, .95); }
    .drawer-tab-left  { left: 0; border-radius: 0 12px 12px 0; }
    .drawer-tab-right { right: 0; left: auto; border-radius: 12px 0 0 12px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .drawer-tab { width: 14px; height: 38px; }
}

/* ===================================
   Fond uniforme = fond par défaut du navigateur / système
   (à garder en DERNIER : le !important bat les CSS isolés de Blazor)
=================================== */

:root { color-scheme: light; }

html, body, .login-layout, .app-layout {
    background: Canvas !important;
    color: CanvasText;
}

.accueil {
    --bg:    Canvas !important;
    --alt:   Canvas !important;
    --panel: Canvas !important;
    --ink:   CanvasText !important;
    --muted: color-mix(in srgb, CanvasText 60%, Canvas) !important;
    --line:  color-mix(in srgb, CanvasText 12%, transparent) !important;
    background: transparent !important;
    width: 100%;
    align-self: stretch;
}

.accueil .acc-section,
.accueil .acc-alt,
.accueil .acc-sitemap {
    background: transparent !important;
}

/* Logo : carré blanc aux coins arrondis */
.logo,
.acc-logo-img {
    background: #fff !important;
    border-radius: 10px !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) !important;
    object-fit: contain;
}

.brand-name,
.acc-brand-name {
    color: light-dark(#7f0303, #ee5b5b) !important;
}

/* Mode clair : le blanc se fond dans la page */
.logo,
.acc-logo-img { mix-blend-mode: multiply; }

/* Mode sombre : on inverse, puis on remet les couleurs, et le blanc devient noir puis disparaît via « screen » */
@media (prefers-color-scheme: dark) {
    .logo,
    .acc-logo-img {
        filter: invert(1) hue-rotate(180deg);
        mix-blend-mode: screen;
    }
}