/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Mon compte : modèle maître-détail, formulaires Blazor statiques habillés en CSS (pas de Radzen interactif). */

.cc-compte-zone[b-ljc7tcw8b8] {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Rubriques */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-nav {
  position: sticky;
  top: 16px;
  gap: 2px;
  padding: 10px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  color: var(--cc-texte);
  font-size: 15px;
  font-weight: var(--cc-g-moyen);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique:hover {
  background: var(--cc-survol);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique-icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cc-teinte);
  color: var(--cc-accent-lisible);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique-icone .rzi {
  font-size: 20px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique[aria-current="page"],
.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique[aria-current="page"]:hover {
  background: var(--cc-accent);
  color: var(--cc-sur-accent);
  font-weight: var(--cc-g-fort);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique[aria-current="page"] .cc-compte-rubrique-icone {
  background: color-mix(in srgb, var(--cc-sur-accent) 18%, transparent);
  color: var(--cc-sur-accent);
}

/* Rubrique choisie */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-detail {
  gap: 22px;
  min-width: 0;
  padding: 26px 28px 28px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-titre h2 {
  margin: 0;
  font-family: var(--cc-police-titre);
  font-size: 22px;
  font-weight: var(--cc-g-titre);
  line-height: 1.2;
  letter-spacing: var(--cc-titre-espace);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-titre p {
  margin: 4px 0 0;
  color: var(--cc-texte-3);
  font-size: 15px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-bloc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-bloc + .cc-compte-bloc {
  padding-top: 22px;
  border-top: 1px solid var(--cc-ligne);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-bloc-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-bloc p,
.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-bloc ol {
  margin: 0;
  color: var(--cc-texte-2);
}

/* Formulaires */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-form .cc-grille {
  gap: 18px 20px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-saisie {
  position: relative;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-champ input:not([type="checkbox"], [type="hidden"]) {
  display: block;
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: var(--cc-verre);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-texte) 55%, transparent);
  color: var(--cc-texte);
  font: inherit;
  font-size: 15px;
  transition: box-shadow 0.2s ease;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-champ input:hover {
  box-shadow: inset 0 0 0 1px var(--cc-texte-3);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-champ input:focus {
  box-shadow: inset 0 0 0 2px var(--cc-accent-lisible);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-champ input.invalid {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cc-alerte);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-champ input.valid.modified {
  outline: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-champ input:is([readonly], :disabled) {
  background: var(--cc-teinte);
  box-shadow: none;
  color: var(--cc-texte-2);
  cursor: default;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-champ-mdp input:not([type="checkbox"], [type="hidden"]) {
  padding-right: 52px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-oeil {
  position: absolute;
  top: 1px;
  right: 2px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-oeil-ferme,
.cc-compte-zone[b-ljc7tcw8b8]  .cc-oeil[aria-pressed="true"] .cc-oeil-ouvert {
  display: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-oeil[aria-pressed="true"] .cc-oeil-ferme {
  display: block;
}

.cc-compte-zone[b-ljc7tcw8b8]  .validation-message {
  color: color-mix(in srgb, var(--cc-alerte) 60%, var(--cc-texte));
  font-size: 13px;
}

/* Jauge du nouveau mot de passe (cc-connexion.js) */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-jauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--cc-texte-3);
  font-size: 13px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-jauge-barres {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-jauge-barre {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-texte) 18%, transparent);
  transition: background-color 0.2s ease;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-jauge-pleine {
  background: var(--cc-accent-lisible);
}

/* Boutons : pastille de 46 px, action principale en second accent */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-actions form {
  margin: 0;
}

.cc-compte-zone[b-ljc7tcw8b8]  :is(.cc-bouton, .cc-bouton-secondaire, .cc-bouton-danger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: var(--cc-g-fort);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-bouton {
  background: var(--cc-accent2);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc-accent2) 60%, var(--cc-noir));
  color: var(--cc-sur-accent2);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-bouton:hover {
  background: var(--cc-bouton-survol);
  color: var(--cc-sur-accent2);
  transform: translateY(-1px);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-bouton-secondaire {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--cc-filet);
  color: var(--cc-texte);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-bouton-secondaire:hover {
  background: var(--cc-survol);
  color: var(--cc-texte);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-bouton-danger {
  background: var(--cc-alerte);
  color: var(--cc-surface);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-bouton-danger:hover {
  background: color-mix(in srgb, var(--cc-alerte) 86%, var(--cc-texte));
  color: var(--cc-surface);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-bouton[aria-busy="true"] {
  cursor: progress;
  transform: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-sablier {
  display: none;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cc-tour-b-ljc7tcw8b8 0.7s linear infinite;
}

.cc-compte-zone[b-ljc7tcw8b8]  [aria-busy="true"] .cc-sablier {
  display: block;
}

.cc-compte-zone[b-ljc7tcw8b8]  a.cc-danger {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-actions .cc-danger {
  margin-left: 0;
}

/* Messages et encarts */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-message,
.cc-compte-zone[b-ljc7tcw8b8]  .cc-encart {
  margin: 0;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-message-ok {
  background: var(--cc-statut);
  color: var(--cc-statut-texte);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-message-ko,
.cc-compte-zone[b-ljc7tcw8b8]  .cc-encart-alerte {
  background: color-mix(in srgb, var(--cc-alerte) 12%, var(--cc-surface));
  color: color-mix(in srgb, var(--cc-alerte) 60%, var(--cc-texte));
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-encart {
  background: var(--cc-teinte);
  color: var(--cc-texte-2);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-encart strong {
  display: block;
  margin-bottom: 2px;
  color: inherit;
  font-weight: var(--cc-g-fort);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-encart p {
  margin: 0;
  color: inherit;
}

/* Étapes de l'application d'authentification */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-etapes {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cc-etape;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-etapes > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 46px;
  counter-increment: cc-etape;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-etapes > li::before {
  position: absolute;
  top: -3px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cc-accent);
  color: var(--cc-sur-accent);
  content: counter(cc-etape);
  font-size: 14px;
  font-weight: var(--cc-g-fort);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-etapes p {
  margin: 0;
  color: var(--cc-texte-2);
}

/* Clé à saisir et codes de récupération */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-cle {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 14px;
  background: var(--cc-teinte);
  color: var(--cc-texte);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 16px;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  user-select: all;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-codes li {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--cc-teinte);
  color: var(--cc-texte);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  user-select: all;
}

/* Listes (clés d'accès, connexions externes) */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 60px;
  padding: 8px 4px;
  border-top: 1px solid var(--cc-ligne);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-ligne:first-child {
  border-top: 0;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-ligne > b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--cc-g-fort);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-ligne form {
  display: flex;
  gap: 4px;
  margin: 0;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-ligne .cc-danger {
  align-self: center;
  margin-left: 0;
}

/* Photo du compte */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-photo-bloc {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cc-ligne);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-photo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--cc-accent2);
  color: var(--cc-sur-accent2);
  font-family: var(--cc-police-titre);
  font-size: 34px;
  font-weight: var(--cc-g-fort);
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-photo-texte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-photo-texte .cc-compte-actions {
  margin-top: 6px;
}

/* Le champ fichier reste atteignable au clavier ; son libellé fait office de bouton. */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-photo-fichier {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-photo-fichier:focus-visible + label {
  outline: 2px solid var(--cc-accent-lisible);
  outline-offset: 2px;
}

.cc-compte-zone[b-ljc7tcw8b8]  label[aria-busy="true"] {
  cursor: progress;
}

/* Suppression confirmée sur place, sans script (page statique) */
.cc-compte-zone[b-ljc7tcw8b8]  .cc-confirmer summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-confirmer summary::-webkit-details-marker {
  display: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-confirmer[open] summary {
  display: none;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-confirmer-corps {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-texte-2);
  font-size: 14px;
}

.cc-compte-zone[b-ljc7tcw8b8]  .cc-confirmer-corps .cc-bouton-danger {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

@keyframes cc-tour-b-ljc7tcw8b8 {
  to {
    transform: rotate(360deg);
  }
}

@media (width <= 860px) {
  .cc-compte-zone[b-ljc7tcw8b8] {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* Les rubriques deviennent une rangée de pastilles qui défile. */
  .cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-nav {
    position: static;
    flex-direction: row;
    gap: 4px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique {
    flex: none;
    min-height: 44px;
    white-space: nowrap;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-rubrique-icone {
    width: 32px;
    height: 32px;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-detail {
    padding: 20px;
    border-radius: 28px;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-photo-bloc {
    align-items: flex-start;
    gap: 16px;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-photo {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-champ input:not([type="checkbox"], [type="hidden"]) {
    font-size: 16px;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-actions > :is(.cc-bouton, .cc-bouton-secondaire, .cc-bouton-danger),
  .cc-compte-zone[b-ljc7tcw8b8]  .cc-compte-form > :is(.cc-bouton, .cc-bouton-danger) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-compte-zone[b-ljc7tcw8b8]  :is(.cc-bouton, .cc-bouton-secondaire, .cc-bouton-danger, .cc-compte-rubrique) {
    transition: none;
  }

  .cc-compte-zone[b-ljc7tcw8b8]  .cc-sablier {
    animation-duration: 2s;
  }
}
/* /Components/Layout/PAGEMOD_Connexion.razor.rz.scp.css */
.cc-page[b-ib3ek1p0s9] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 16px;
  background: var(--cc-acces-lueurs), var(--cc-fond);
  color: var(--cc-texte);
  font-size: 15px;
  line-height: 1.5;
}

/* Barre du haut */
.cc-haut[b-ib3ek1p0s9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 8px;
}

.cc-logo[b-ib3ek1p0s9] {
  display: block;
  flex: none;
  width: 190px;
  height: 40px;
}

.cc-options[b-ib3ek1p0s9] {
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
}

.cc-mode[b-ib3ek1p0s9] {
  position: relative;
  display: flex;
  width: 68px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cc-teinte);
  cursor: pointer;
}

.cc-mode-curseur[b-ib3ek1p0s9] {
  position: absolute;
  top: 3px;
  left: var(--cc-mode-curseur);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cc-accent);
  transition: left 0.3s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.cc-mode-soleil[b-ib3ek1p0s9],
.cc-mode-lune[b-ib3ek1p0s9] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  transition: color 0.2s ease;
}

.cc-mode-soleil[b-ib3ek1p0s9] {
  color: var(--cc-mode-soleil);
}

.cc-mode-lune[b-ib3ek1p0s9] {
  color: var(--cc-mode-lune);
}

.cc-centre[b-ib3ek1p0s9] {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

/* Pied de page */
.cc-bas[b-ib3ek1p0s9] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 0 8px 4px;
  color: var(--cc-texte-2);
  font-size: 13px;
}

.cc-bas a[b-ib3ek1p0s9],
.cc-centre[b-ib3ek1p0s9]  a:not(.cc-onglet) {
  color: var(--cc-accent-lisible);
  font-weight: var(--cc-g-fort);
  text-underline-offset: 3px;
}

/* Sélecteur Connexion ou Créer un compte */
.cc-centre[b-ib3ek1p0s9]  .cc-onglets {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cc-teinte);
}

.cc-centre[b-ib3ek1p0s9]  .cc-onglet {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--cc-texte-2);
  font-size: 14px;
  font-weight: var(--cc-g-moyen);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-onglet:hover {
  background: var(--cc-survol);
}

.cc-centre[b-ib3ek1p0s9]  .cc-onglet[aria-current="page"],
.cc-centre[b-ib3ek1p0s9]  .cc-onglet[aria-current="page"]:hover {
  background: var(--cc-actif-menu);
  color: #fff;
  font-weight: var(--cc-g-fort);
}

/* Panneau et formulaires des pages d'accès */
.cc-centre[b-ib3ek1p0s9]  .cc-acces {
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
  gap: 14px;
  padding: 32px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-secousse {
  animation: cc-secousse-b-ib3ek1p0s9 0.36s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-titre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-titre h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
}

.cc-centre[b-ib3ek1p0s9]  .cc-titre p {
  margin: 0;
  color: var(--cc-texte-2);
  font-size: 15px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-alerte,
.cc-centre[b-ib3ek1p0s9]  .cc-message {
  display: block;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cc-alerte) 12%, var(--cc-surface));
  color: color-mix(in srgb, var(--cc-alerte) 60%, var(--cc-texte));
  font-size: 14px;
  font-weight: var(--cc-g-moyen);
}

.cc-centre[b-ib3ek1p0s9]  .cc-message-ok {
  background: var(--cc-statut);
  color: var(--cc-statut-texte);
}

.cc-centre[b-ib3ek1p0s9]  .cc-alerte ul {
  margin: 0;
  padding-left: 18px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-champ {
  position: relative;
  display: block;
}

.cc-centre[b-ib3ek1p0s9]  .cc-champ input {
  display: block;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  padding: 22px 20px 6px;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: var(--cc-verre);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-texte) 55%, transparent);
  color: var(--cc-texte);
  font: inherit;
  font-size: 15px;
  transition: box-shadow 0.2s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-champ label {
  position: absolute;
  top: 19px;
  left: 20px;
  color: var(--cc-texte-2);
  font-size: 15px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-champ input:focus + label,
.cc-centre[b-ib3ek1p0s9]  .cc-champ input:not(:placeholder-shown) + label,
.cc-centre[b-ib3ek1p0s9]  .cc-champ input:autofill + label {
  color: var(--cc-accent-lisible);
  transform: translateY(-10px) scale(0.8);
}

.cc-centre[b-ib3ek1p0s9]  .cc-en-erreur input,
.cc-centre[b-ib3ek1p0s9]  .cc-champ input.invalid {
  box-shadow: inset 0 0 0 2px var(--cc-alerte);
}

.cc-centre[b-ib3ek1p0s9]  .validation-message {
  margin: 4px 0 0 20px;
  color: color-mix(in srgb, var(--cc-alerte) 60%, var(--cc-texte));
  font-size: 13px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-champ-mdp input {
  padding-right: 56px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cc-texte-2);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-rond:hover {
  background: var(--cc-survol);
}

.cc-centre[b-ib3ek1p0s9]  .cc-oeil {
  position: absolute;
  top: 7px;
  right: 7px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-oeil-ferme,
.cc-centre[b-ib3ek1p0s9]  .cc-oeil[aria-pressed="true"] .cc-oeil-ouvert {
  display: none;
}

.cc-centre[b-ib3ek1p0s9]  .cc-oeil[aria-pressed="true"] .cc-oeil-ferme {
  display: block;
}

.cc-centre[b-ib3ek1p0s9]  .cc-repli {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -14px;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, margin-top 0.3s ease, visibility 0.3s;
}

.cc-centre[b-ib3ek1p0s9]  .cc-repli-ouvert {
  grid-template-rows: 1fr;
  margin-top: 0;
  visibility: visible;
}

.cc-centre[b-ib3ek1p0s9]  .cc-repli-interne {
  min-height: 0;
  overflow: hidden;
}

.cc-centre[b-ib3ek1p0s9]  .cc-note {
  margin: 0;
  color: var(--cc-texte-2);
  font-size: 13px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-jauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--cc-texte-2);
  font-size: 13px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-jauge-barres {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-jauge-barre {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-texte) 18%, transparent);
  transition: background-color 0.2s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-jauge-pleine {
  background: var(--cc-accent-lisible);
}

.cc-centre[b-ib3ek1p0s9]  .cc-ligne-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: 14px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-interrupteur {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--cc-texte-2);
  cursor: pointer;
}

.cc-centre[b-ib3ek1p0s9]  .cc-interrupteur input {
  position: absolute;
  left: 0;
  width: 40px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.cc-centre[b-ib3ek1p0s9]  .cc-champ input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cc-accent-lisible);
}

.cc-centre[b-ib3ek1p0s9]  .cc-en-erreur input:focus {
  box-shadow: inset 0 0 0 2px var(--cc-alerte);
}

.cc-centre[b-ib3ek1p0s9]  .cc-piste {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-texte) 34%, transparent);
  transition: background-color 0.2s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-piste::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: left 0.22s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.cc-centre[b-ib3ek1p0s9]  .cc-interrupteur input:checked + .cc-piste {
  background: var(--cc-accent);
}

.cc-centre[b-ib3ek1p0s9]  .cc-interrupteur input:checked + .cc-piste::after {
  left: 19px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-interrupteur input:focus-visible + .cc-piste {
  outline: 2px solid var(--cc-accent-lisible);
  outline-offset: 2px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-primaire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--cc-accent2);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc-accent2) 60%, var(--cc-noir));
  color: var(--cc-sur-accent2);
  font: inherit;
  font-weight: var(--cc-g-fort);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-primaire:hover {
  background: var(--cc-bouton-survol);
  transform: translateY(-1px);
}

.cc-centre[b-ib3ek1p0s9]  .cc-primaire:active {
  transform: scale(0.98);
}

.cc-centre[b-ib3ek1p0s9]  .cc-primaire[aria-busy="true"] {
  cursor: progress;
  transform: none;
}

.cc-centre[b-ib3ek1p0s9]  .cc-sablier {
  display: none;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cc-tour-b-ib3ek1p0s9 0.7s linear infinite;
}

.cc-centre[b-ib3ek1p0s9]  .cc-primaire[aria-busy="true"] .cc-sablier {
  display: block;
}

.cc-centre[b-ib3ek1p0s9]  .cc-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cc-texte-2);
  font-size: 13px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-ou::before,
.cc-centre[b-ib3ek1p0s9]  .cc-ou::after {
  flex: 1;
  height: 1px;
  background: var(--cc-filet);
  content: "";
}

.cc-centre[b-ib3ek1p0s9]  .cc-externes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-secondaire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--cc-filet);
  border-radius: 999px;
  background: var(--cc-verre);
  box-shadow: inset 0 1px 0 var(--cc-reflet);
  color: var(--cc-texte);
  font: inherit;
  font-weight: var(--cc-g-fort);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cc-centre[b-ib3ek1p0s9]  .cc-secondaire:hover {
  background: var(--cc-survol);
}

@keyframes cc-secousse-b-ib3ek1p0s9 {
  20% {
    transform: translateX(-6px);
  }

  45% {
    transform: translateX(5px);
  }

  70% {
    transform: translateX(-3px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes cc-tour-b-ib3ek1p0s9 {
  to {
    transform: rotate(360deg);
  }
}

@media (width <= 860px) {
  .cc-page[b-ib3ek1p0s9] {
    gap: 8px;
    padding: 12px;
  }

  .cc-haut[b-ib3ek1p0s9] {
    padding: 2px 4px;
  }

  .cc-logo[b-ib3ek1p0s9] {
    width: 156px;
    height: 34px;
  }

  .cc-bas[b-ib3ek1p0s9] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }

  .cc-centre[b-ib3ek1p0s9]  .cc-acces {
    padding: 20px;
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-centre[b-ib3ek1p0s9]  .cc-secousse {
    animation: none;
  }

  .cc-centre[b-ib3ek1p0s9]  .cc-sablier {
    animation-duration: 2s;
  }
}

/* Lien présenté comme le bouton principal (pages de confirmation) */
.cc-centre[b-ib3ek1p0s9]  a.cc-primaire {
  color: var(--cc-sur-accent2);
  text-decoration: none;
}

.cc-centre[b-ib3ek1p0s9]  .cc-lien-retour {
  margin: 4px 0 0;
  font-size: 14px;
  text-align: center;
}

.cc-centre[b-ib3ek1p0s9]  .cc-alerte-action {
  margin: 6px 0 0;
}

/* Champ pré-rempli et non modifiable (e-mail du compte sur Nouveau mot de passe) */
.cc-centre[b-ib3ek1p0s9]  .cc-champ input[readonly] {
  background: var(--cc-teinte);
  box-shadow: none;
  color: var(--cc-texte-2);
  cursor: default;
}

/* Encart d'information neutre (lien de confirmation en développement) */
.cc-centre[b-ib3ek1p0s9]  .cc-encart {
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--cc-teinte);
  color: var(--cc-texte-2);
  font-size: 14px;
}

.cc-centre[b-ib3ek1p0s9]  .cc-encart strong {
  display: block;
  color: var(--cc-texte);
  font-weight: var(--cc-g-fort);
}

.cc-centre[b-ib3ek1p0s9]  .cc-encart p {
  margin: 0;
}
/* /Components/Layout/PAGEMOD_Principal.razor.rz.scp.css */
.cc-racine[b-5zk99d63if] {
  display: flex;
  gap: 16px;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 16px;
  background: var(--cc-menu-halo), var(--cc-page-lueurs), var(--cc-fond);
  color: var(--cc-texte);
  font-size: 15px;
  line-height: 1.5;
}

/* Menu flottant : sombre et opaque, ou clair en verre (voir cc-theme.css). */
.cc-menu[b-5zk99d63if] {
  position: sticky;
  top: 16px;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 14px;
  width: 244px;
  height: calc(100dvh - 32px);
  box-sizing: border-box;
  padding: 22px 10px 10px;
  border: 1px solid var(--cc-menu-bord);
  border-radius: 34px;
  background: var(--cc-menu-lueurs), var(--cc-menu-fond);
  box-shadow: inset 0 1px 0 var(--cc-menu-arete), 0 18px 44px var(--cc-voile-ombre);
  color: var(--cc-menu-fort);
  interpolate-size: allow-keywords;
}

/* Le flou passe par un pseudo-élément : sur le menu lui-même, il casserait le tiroir fixe du mobile. */
.cc-menu[b-5zk99d63if]::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: var(--cc-menu-flou);
  content: "";
  pointer-events: none;
}

.cc-menu-barre[b-5zk99d63if] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-menu-bascule[b-5zk99d63if] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cc-menu .cc-burger[b-5zk99d63if],
.cc-menu .cc-avatar-barre[b-5zk99d63if],
.cc-voile-fond[b-5zk99d63if],
.cc-tiroir-haut[b-5zk99d63if],
.cc-tiroir-reglage[b-5zk99d63if] {
  display: none;
}

.cc-menu-bascule:focus-visible + .cc-burger[b-5zk99d63if] {
  outline: 2px solid var(--cc-menu-focus);
  outline-offset: 2px;
}

.cc-burger-ligne[b-5zk99d63if],
.cc-burger-ligne[b-5zk99d63if]::before,
.cc-burger-ligne[b-5zk99d63if]::after {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.cc-burger-ligne[b-5zk99d63if]::before,
.cc-burger-ligne[b-5zk99d63if]::after {
  position: absolute;
  left: 0;
  content: "";
}

.cc-burger-ligne[b-5zk99d63if]::before {
  top: -6px;
}

.cc-burger-ligne[b-5zk99d63if]::after {
  top: 6px;
}

.cc-menu-bascule:checked + .cc-burger .cc-burger-ligne[b-5zk99d63if] {
  background: transparent;
}

.cc-menu-bascule:checked + .cc-burger .cc-burger-ligne[b-5zk99d63if]::before {
  transform: translateY(6px) rotate(45deg);
}

.cc-menu-bascule:checked + .cc-burger .cc-burger-ligne[b-5zk99d63if]::after {
  transform: translateY(-6px) rotate(-45deg);
}

.cc-menu-panneau[b-5zk99d63if] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.cc-logo[b-5zk99d63if] {
  display: block;
  flex: none;
  width: 180px;
  height: 38px;
  margin: 0 14px 6px;
}

.cc-nav[b-5zk99d63if] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}

/* Ascenseur du menu : fin, arrondi, sans rail ni flèches ; discret au repos, plus marqué au survol. */
.cc-nav[b-5zk99d63if]::-webkit-scrollbar {
  width: 10px;
}

.cc-nav[b-5zk99d63if]::-webkit-scrollbar-track {
  background: transparent;
}

.cc-nav[b-5zk99d63if]::-webkit-scrollbar-button {
  display: none;
}

.cc-nav[b-5zk99d63if]::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-menu-accent) 22%, transparent) padding-box;
}

.cc-nav:hover[b-5zk99d63if]::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--cc-menu-accent) 45%, transparent);
}

.cc-nav[b-5zk99d63if]::-webkit-scrollbar-thumb:hover,
.cc-nav[b-5zk99d63if]::-webkit-scrollbar-thumb:active {
  background-color: color-mix(in srgb, var(--cc-menu-accent) 70%, transparent);
}

/* Firefox : pas de pseudo-éléments, seulement la largeur et les couleurs. */
@supports not selector(::-webkit-scrollbar) {
  .cc-nav[b-5zk99d63if] {
    scrollbar-color: color-mix(in srgb, var(--cc-menu-accent) 35%, transparent) transparent;
    scrollbar-width: thin;
  }
}

.cc-entree[b-5zk99d63if] {
  display: flex;
  flex-direction: column;
}

.cc-menu[b-5zk99d63if]  :focus-visible {
  outline-color: var(--cc-menu-focus);
  outline-offset: -2px;
}

/* Recherche dans le menu (cc-recherche-menu.js) */
.cc-recherche-menu[b-5zk99d63if] {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  box-sizing: border-box;
  padding: 0 6px 0 12px;
  border: 1px solid var(--cc-filet);
  border-radius: 999px;
  background: var(--cc-verre);
  box-shadow: inset 0 1px 0 var(--cc-reflet);
  color: var(--cc-menu-texte);
  cursor: text;
  transition: box-shadow 0.2s ease;
}

.cc-recherche-menu:focus-within[b-5zk99d63if] {
  box-shadow: inset 0 1px 0 var(--cc-reflet), 0 0 0 2px var(--cc-menu-focus);
}

.cc-recherche-menu .cc-icone[b-5zk99d63if] {
  flex: none;
  width: 18px;
  height: 18px;
}

.cc-recherche-menu input[b-5zk99d63if] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-menu-fort);
  font: inherit;
  font-size: 14px;
}

.cc-recherche-menu input[b-5zk99d63if]::placeholder {
  color: var(--cc-menu-texte);
  opacity: 1;
}

.cc-recherche-menu input:focus-visible[b-5zk99d63if] {
  outline: none;
}

.cc-raccourci[b-5zk99d63if] {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--cc-survol);
  color: var(--cc-menu-texte);
  font: inherit;
  font-size: 12px;
  font-weight: var(--cc-g-fort);
  transition: opacity 0.2s ease;
}

.cc-recherche-menu:focus-within .cc-raccourci[b-5zk99d63if] {
  opacity: 0;
}

.cc-recherche-vide[b-5zk99d63if] {
  margin: 0;
  padding: 8px 12px;
  color: var(--cc-menu-texte);
  font-size: 14px;
}

/* Entrées écartées par la recherche : l'emporte sur les display des liens et des groupes. */
.cc-nav[b-5zk99d63if]  [data-cc-masque] {
  display: none !important;
}

.cc-menu[b-5zk99d63if]  .cc-lien {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--cc-menu-texte);
  font-size: 14px;
  font-weight: var(--cc-g-moyen);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cc-menu[b-5zk99d63if]  .cc-lien:hover {
  background: var(--cc-survol);
  color: var(--cc-menu-survol-texte);
}

.cc-menu[b-5zk99d63if]  .cc-lien.active,
.cc-menu[b-5zk99d63if]  .cc-sous-lien.active {
  background: var(--cc-menu-actif);
  color: var(--cc-menu-actif-texte);
  font-weight: var(--cc-g-fort);
}

.cc-module[b-5zk99d63if] {
  padding-right: 12px;
  list-style: none;
}

.cc-module[b-5zk99d63if]::-webkit-details-marker {
  display: none;
}

.cc-menu[b-5zk99d63if]  .rzi {
  font-size: 21px;
}

.cc-module-icone[b-5zk99d63if],
.cc-chevron[b-5zk99d63if] {
  display: inline-flex;
}

.cc-chevron[b-5zk99d63if] {
  margin-left: auto;
  transition: transform 0.25s ease;
}

.cc-groupe[open] .cc-chevron[b-5zk99d63if] {
  transform: rotate(90deg);
}

.cc-groupe[b-5zk99d63if]::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.28s ease, content-visibility 0.28s ease allow-discrete;
}

.cc-groupe[open][b-5zk99d63if]::details-content {
  block-size: auto;
  overflow: visible;
}

.cc-menu .cc-groupe-actif .cc-module[b-5zk99d63if] {
  color: var(--cc-menu-fort);
  font-weight: var(--cc-g-fort);
}

.cc-groupe-actif .cc-module-icone[b-5zk99d63if] {
  color: var(--cc-menu-accent);
}

.cc-sous-liste[b-5zk99d63if] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 21px;
  padding-left: 9px;
  border-left: 1px solid var(--cc-rail);
}

.cc-menu[b-5zk99d63if]  .cc-sous-lien {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--cc-menu-texte);
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cc-menu[b-5zk99d63if]  .cc-sous-lien:hover {
  background: var(--cc-survol);
  color: var(--cc-menu-survol-texte);
}

/* Repère de la page active sur le rail : visible avec le menu clair seulement. */
.cc-menu[b-5zk99d63if]  .cc-sous-lien.active::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -11px;
  width: 3px;
  border-radius: 3px;
  background: var(--cc-menu-repere);
  content: "";
}

.cc-compte[b-5zk99d63if] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0 0;
  border-top: 1px solid var(--cc-filet);
}

.cc-compte-avatar[b-5zk99d63if] {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cc-accent2);
  color: var(--cc-sur-accent2);
  font-size: 13px;
  font-weight: var(--cc-g-fort);
  overflow: hidden;
}

.cc-compte-avatar img[b-5zk99d63if] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le compte mène à Mon compte : avatar et nom forment un seul lien. */
.cc-compte-lien[b-5zk99d63if] {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  color: var(--cc-menu-texte);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cc-compte-lien:hover[b-5zk99d63if] {
  background: var(--cc-survol);
  color: var(--cc-menu-survol-texte);
}

.cc-compte-lien[aria-current="page"][b-5zk99d63if] {
  background: var(--cc-menu-actif);
  color: var(--cc-menu-actif-texte);
}

.cc-compte-texte[b-5zk99d63if] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.cc-compte-nom[b-5zk99d63if] {
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--cc-g-fort);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-compte-sous[b-5zk99d63if] {
  font-size: 12px;
  opacity: 0.8;
}

.cc-menu .cc-avatar-barre[b-5zk99d63if] {
  text-decoration: none;
}

.cc-menu .cc-avatar-barre[aria-current="page"][b-5zk99d63if] {
  box-shadow: 0 0 0 2px var(--cc-menu-focus);
}

.cc-compte form[b-5zk99d63if] {
  margin: 0;
}

/* Boutons ronds */
.cc-rond[b-5zk99d63if] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cc-texte-2);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cc-rond:hover[b-5zk99d63if] {
  background: var(--cc-survol);
}

.cc-rond-menu[b-5zk99d63if] {
  color: var(--cc-menu-icone);
}

/* Zone de contenu : pas de feuille, les panneaux flottent sur la page. */
.cc-feuille[b-5zk99d63if] {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 16px 4px;
}

.cc-entete[b-5zk99d63if] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.cc-ariane[b-5zk99d63if] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--cc-texte-3);
  font-size: 14px;
}

.cc-ariane a[b-5zk99d63if] {
  color: inherit;
  text-decoration: none;
}

.cc-ariane a:hover[b-5zk99d63if] {
  color: var(--cc-texte);
}

.cc-ariane-courant[b-5zk99d63if] {
  color: var(--cc-texte);
  font-weight: var(--cc-g-fort);
}

.cc-ariane-separateur[b-5zk99d63if] {
  display: inline-flex;
}

.cc-ariane-separateur .cc-icone[b-5zk99d63if] {
  width: 14px;
  height: 14px;
}

.cc-options[b-5zk99d63if] {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
}

/* Sélecteur de thème à 3 positions : clair, clair avec menu sombre, sombre. */
.cc-theme[b-5zk99d63if] {
  position: relative;
  display: flex;
  flex: none;
  padding: 3px;
  border-radius: 999px;
  background: var(--cc-teinte);
}

.cc-menu .cc-theme[b-5zk99d63if] {
  background: var(--cc-survol);
}

.cc-theme-curseur[b-5zk99d63if] {
  position: absolute;
  top: 3px;
  left: calc(3px + var(--cc-theme-position) * 36px);
  width: 36px;
  height: 30px;
  border-radius: 999px;
  background: var(--cc-theme-curseur);
  box-shadow: 0 4px 12px -4px var(--cc-voile-ombre);
  transition: left 0.32s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.cc-theme-choix[b-5zk99d63if] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cc-theme-icone);
  cursor: pointer;
  transition: color 0.2s ease;
}

.cc-theme-choix:hover[b-5zk99d63if] {
  color: var(--cc-theme-survol);
}

:root[data-cc-theme="clair"] .cc-theme-choix[data-cc-choisir-theme="clair"][b-5zk99d63if],
:root[data-cc-theme="contraste"] .cc-theme-choix[data-cc-choisir-theme="contraste"][b-5zk99d63if],
:root[data-cc-theme="sombre"] .cc-theme-choix[data-cc-choisir-theme="sombre"][b-5zk99d63if] {
  color: var(--cc-sur-accent);
}

.cc-theme-choix .cc-icone[b-5zk99d63if] {
  width: 17px;
  height: 17px;
}

/* Contenu et pied, dans la zone défilante : le pied reste en bas quand la page est courte. */
.cc-defilement[b-5zk99d63if] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
}

.cc-contenu[b-5zk99d63if] {
  flex-grow: 1;
  align-self: center;
  width: 100%;
  max-width: 1160px;
}

/* Au-delà de 860 px : la page garde la hauteur de la fenêtre ; seule la zone sous l'en-tête défile. */
@media (width > 860px) {
  /*
   * position: relative et overflow: clip : rien ne doit dépasser de la fenêtre, sinon la page entière
   * gagne un second ascenseur (éléments en position absolue, défilement automatique vers un champ focalisé).
   * clip, contrairement à hidden, ne peut pas défiler par programme.
   */
  .cc-racine[b-5zk99d63if] {
    position: relative;
    height: 100dvh;
    min-height: 0;
    overflow: clip;
  }

  .cc-feuille[b-5zk99d63if] {
    min-height: 0;
  }

  /*
   * Ascenseur au bord de la feuille, pas contre le contenu.
   * Marges négatives et marges internes compensées : l'ombre des panneaux n'est pas coupée.
   * position: relative : les éléments en position absolue du contenu défilent avec lui et restent dans la zone.
   */
  .cc-defilement[b-5zk99d63if] {
    position: relative;
    min-height: 0;
    margin: -8px -16px -4px;
    padding: 8px 16px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cc-defilement[b-5zk99d63if]::-webkit-scrollbar {
    width: 12px;
  }

  .cc-defilement[b-5zk99d63if]::-webkit-scrollbar-track {
    background: transparent;
  }

  .cc-defilement[b-5zk99d63if]::-webkit-scrollbar-button {
    display: none;
  }

  .cc-defilement[b-5zk99d63if]::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cc-texte) 18%, transparent) padding-box;
  }

  .cc-defilement[b-5zk99d63if]::-webkit-scrollbar-thumb:hover,
  .cc-defilement[b-5zk99d63if]::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--cc-accent-lisible) 60%, transparent);
  }

  @supports not selector(::-webkit-scrollbar) {
    .cc-defilement[b-5zk99d63if] {
      scrollbar-color: color-mix(in srgb, var(--cc-texte) 25%, transparent) transparent;
      scrollbar-width: thin;
    }
  }
}

/* Pied : même largeur que le contenu, séparé par un filet. */
.cc-pied[b-5zk99d63if] {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-self: center;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  width: 100%;
  max-width: 1160px;
  box-sizing: border-box;
  padding: 14px 4px 6px;
  border-top: 1px solid var(--cc-filet);
  color: var(--cc-texte-2);
  font-size: 13px;
}

.cc-pied-droite[b-5zk99d63if],
.cc-pied-version[b-5zk99d63if] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cc-pied-droite[b-5zk99d63if] {
  gap: 8px 16px;
}

.cc-pied-version[b-5zk99d63if] {
  gap: 8px;
}

.cc-pied-pastille[b-5zk99d63if] {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cc-teinte);
  color: var(--cc-texte);
  font-size: 12px;
  font-weight: var(--cc-g-fort);
}

.cc-pied-bouton[b-5zk99d63if] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--cc-filet);
  border-radius: 999px;
  background: var(--cc-verre);
  color: var(--cc-texte-2);
  font: inherit;
  font-weight: var(--cc-g-moyen);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cc-pied-bouton:hover[b-5zk99d63if] {
  background: var(--cc-survol);
  color: var(--cc-accent-lisible);
}

.cc-pied-bouton:focus-visible[b-5zk99d63if] {
  outline: 2px solid var(--cc-accent-lisible);
  outline-offset: 2px;
}

.cc-pied-bouton .cc-icone[b-5zk99d63if] {
  width: 16px;
  height: 16px;
}

/* Erreur Blazor */
#blazor-error-ui[b-5zk99d63if] {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 1.25rem 0.7rem;
  background: var(--cc-accent2);
  color: var(--cc-sur-accent2);
}

#blazor-error-ui a[b-5zk99d63if] {
  color: inherit;
}

#blazor-error-ui .dismiss[b-5zk99d63if] {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  cursor: pointer;
}

/* Sous 860 px : barre flottante et tiroir */
@media (width <= 860px) {
  .cc-racine[b-5zk99d63if] {
    flex-direction: column;
    gap: 12px;
    padding: 10px;
  }

  .cc-menu[b-5zk99d63if] {
    top: 10px;
    z-index: 10;
    flex-direction: row;
    width: auto;
    height: 60px;
    padding: 0 8px;
    border-radius: 30px;
    background: var(--cc-menu-barre-fond);
    box-shadow: inset 0 1px 0 var(--cc-menu-arete), 0 12px 30px var(--cc-voile-ombre);
  }

  .cc-menu-barre[b-5zk99d63if] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cc-menu .cc-burger[b-5zk99d63if] {
    display: inline-flex;
  }

  .cc-logo[b-5zk99d63if] {
    width: 150px;
    height: 32px;
    margin: 0;
  }

  .cc-menu .cc-avatar-barre[b-5zk99d63if] {
    display: flex;
    width: 40px;
    height: 40px;
    margin-left: auto;
  }

  .cc-voile-fond[b-5zk99d63if] {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    background: rgb(10 8 12 / 42%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  .cc-menu-panneau[b-5zk99d63if] {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    width: min(318px, calc(100vw - 52px));
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--cc-menu-bord);
    border-radius: 32px;
    background: var(--cc-menu-lueurs), var(--cc-menu-fond);
    box-shadow: inset 0 1px 0 var(--cc-menu-arete), 0 24px 50px rgb(0 0 0 / 35%);
    backdrop-filter: var(--cc-menu-flou);
    overscroll-behavior: contain;
    transform: translateX(-112%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.34, 1.1, 0.5, 1), visibility 0.32s;
  }

  .cc-menu:has(.cc-menu-bascule:checked) .cc-voile-fond[b-5zk99d63if] {
    opacity: 1;
    pointer-events: auto;
  }

  .cc-menu:has(.cc-menu-bascule:checked) .cc-menu-panneau[b-5zk99d63if] {
    transform: translateX(0);
    visibility: visible;
  }

  .cc-tiroir-haut[b-5zk99d63if] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 8px;
  }

  .cc-tiroir-reglage[b-5zk99d63if] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 6px 0 8px;
    border-top: 1px solid var(--cc-filet);
    font-size: 14px;
  }

  .cc-compte[b-5zk99d63if] {
    padding-top: 0;
    border-top: 0;
  }

  .cc-menu[b-5zk99d63if]  .cc-lien {
    min-height: 48px;
    font-size: 15px;
  }

  .cc-menu[b-5zk99d63if]  .cc-sous-lien {
    min-height: 44px;
  }

  .cc-recherche-menu[b-5zk99d63if] {
    min-height: 46px;
  }

  /* 16 px : évite le zoom automatique d'iOS. Pas de raccourci clavier sur téléphone. */
  .cc-recherche-menu input[b-5zk99d63if] {
    font-size: 16px;
  }

  .cc-raccourci[b-5zk99d63if] {
    display: none;
  }

  .cc-feuille[b-5zk99d63if],
  .cc-defilement[b-5zk99d63if] {
    gap: 14px;
  }

  .cc-feuille[b-5zk99d63if] {
    flex: 1 1 auto;
    padding: 4px;
  }

  .cc-options[b-5zk99d63if] {
    display: none;
  }
}

@media (width <= 520px) {
  .cc-ariane[b-5zk99d63if] {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .cc-ariane > :nth-child(-n + 2):not(.cc-ariane-courant)[b-5zk99d63if] {
    display: none;
  }

  .cc-ariane-courant[b-5zk99d63if] {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cc-pied[b-5zk99d63if],
  .cc-pied-droite[b-5zk99d63if] {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-racine *[b-5zk99d63if],
  .cc-racine *[b-5zk99d63if]::before,
  .cc-racine *[b-5zk99d63if]::after {
    transition: none !important;
  }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-muancbhabt],
.components-reconnect-repeated-attempt-visible[b-muancbhabt],
.components-reconnect-failed-visible[b-muancbhabt],
.components-pause-visible[b-muancbhabt],
.components-resume-failed-visible[b-muancbhabt],
.components-rejoining-animation[b-muancbhabt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-muancbhabt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-muancbhabt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-muancbhabt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-muancbhabt],
#components-reconnect-modal.components-reconnect-retrying[b-muancbhabt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-muancbhabt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-muancbhabt],
#components-reconnect-modal.components-reconnect-failed[b-muancbhabt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-muancbhabt] {
    display: block;
}


#components-reconnect-modal[b-muancbhabt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgb(0 0 0 / 30%);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-muancbhabt 0.5s both;

    &[open]

{
    animation: components-reconnect-modal-slideUp-b-muancbhabt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-muancbhabt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-muancbhabt]::backdrop {
    background-color: rgb(0 0 0 / 40%);
    animation: components-reconnect-modal-fadeInOpacity-b-muancbhabt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-muancbhabt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-muancbhabt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-muancbhabt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-muancbhabt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-muancbhabt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-muancbhabt] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-muancbhabt] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-muancbhabt] {
        background-color: #6b9ed2;
    }

/* stylelint-disable-next-line no-descending-specificity -- ordre du modèle Microsoft conservé */
.components-rejoining-animation[b-muancbhabt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-muancbhabt] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-muancbhabt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-muancbhabt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-muancbhabt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CNFG/PAGE_CNFG_Apparence.razor.rz.scp.css */
/*
  Page Apparence. Les couleurs du thème édité arrivent en variables locales (--a, --sa, --a2, --sa2, --l, --n),
  déjà contrôlées : elles servent uniquement aux aperçus. Tout le reste suit le thème actif.
*/

/* Pastilles des couleurs du thème, dans la liste. */
.cc-pastilles[b-ynuhepn1h9] {
  display: inline-flex;
  flex: none;
}

.cc-pastilles i[b-ynuhepn1h9] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--cc-surface);
  border-radius: 50%;
}

.cc-pastilles i + i[b-ynuhepn1h9] {
  margin-left: -6px;
}

/* Sections : titre et explication à gauche, champs à droite. */
.cc-bloc[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cc-filet);
}

.cc-bloc-titre[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-pile[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Couleurs */
.cc-couleurs-zone[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.cc-couleurs[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.cc-tuile-couleur[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--cc-filet);
  border-radius: 18px;
  background: var(--cc-teinte);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cc-tuile-couleur:hover[b-ynuhepn1h9],
.cc-tuile-couleur:focus-within[b-ynuhepn1h9] {
  border-color: var(--cc-rail);
  background: var(--cc-survol);
}

/* La pastille est le sélecteur : le champ natif la recouvre, invisible. */
.cc-pastille-couleur[b-ynuhepn1h9] {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--cc-filet), 0 6px 16px -8px var(--cc-voile-ombre);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.cc-pastille-couleur:hover[b-ynuhepn1h9] {
  transform: scale(1.05);
}

.cc-pastille-couleur:focus-within[b-ynuhepn1h9] {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

.cc-pastille-couleur input[b-ynuhepn1h9] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.cc-tuile-couleur[b-ynuhepn1h9]  .cc-code-couleur {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-transform: lowercase;
}

/* Aperçu en direct : un menu et une page miniatures, aux couleurs saisies. */
.cc-apercu-theme[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--cc-filet);
  border-radius: 20px;
  background:
    radial-gradient(260px 160px at 100% 0%, color-mix(in srgb, var(--l) 22%, transparent), transparent 70%),
    radial-gradient(240px 160px at 30% 120%, color-mix(in srgb, var(--a) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--a) 6%, var(--cc-surface));
}

.cc-apercu-menu[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 12px;
  background: var(--n);
}

.cc-apercu-menu span[b-ynuhepn1h9] {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-surface) 22%, transparent);
}

.cc-apercu-menu .cc-apercu-actif[b-ynuhepn1h9] {
  background: var(--a);
}

.cc-apercu-page[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  color: var(--n);
}

.cc-apercu-page b[b-ynuhepn1h9] {
  font-size: 20px;
}

.cc-apercu-page span[b-ynuhepn1h9] {
  font-size: 13px;
}

.cc-apercu-page u[b-ynuhepn1h9] {
  color: var(--a);
  text-underline-offset: 3px;
}

.cc-apercu-boutons[b-ynuhepn1h9] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.cc-apercu-boutons span[b-ynuhepn1h9] {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--cc-g-fort);
}

.cc-apercu-principal[b-ynuhepn1h9] {
  background: var(--a2);
  color: var(--sa2);
}

.cc-apercu-accent[b-ynuhepn1h9] {
  background: var(--a);
  color: var(--sa);
}

/* Typographie */
.cc-apercu-police[b-ynuhepn1h9] {
  padding: 18px 20px;
  border: 1px solid var(--cc-filet);
  border-radius: 18px;
  background: var(--cc-teinte);
}

.cc-apercu-police p[b-ynuhepn1h9] {
  margin: 0;
  color: var(--cc-texte-2);
}

.cc-apercu-police .cc-apercu-titre[b-ynuhepn1h9] {
  margin-bottom: 6px;
  color: var(--cc-texte);
  font-size: 26px;
  line-height: 1.2;
}

/* Curseurs : libellé et valeur sur la même ligne. */
.cc-curseur-entete[b-ynuhepn1h9] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cc-curseur-entete label[b-ynuhepn1h9] {
  font-size: 13px;
  font-weight: var(--cc-g-fort);
  color: var(--cc-texte-2);
}

.cc-curseur-entete output[b-ynuhepn1h9] {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cc-teinte);
  color: var(--cc-accent-lisible);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--cc-g-fort);
}

/* Logos et icônes */
.cc-fichiers-theme[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.cc-fichier-theme[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--cc-filet);
  border-radius: 18px;
  transition: border-color 0.2s ease;
}

.cc-fichier-theme:hover[b-ynuhepn1h9],
.cc-fichier-theme:focus-within[b-ynuhepn1h9] {
  border-color: var(--cc-rail);
}

/* L'aperçu est la zone d'envoi : un clic ouvre le sélecteur, le champ natif la recouvre. */
.cc-fichier-apercu[b-ynuhepn1h9] {
  position: relative;
  display: grid;
  place-items: center;
  height: 84px;
  padding: 10px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cc-teinte);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cc-fichier-apercu:hover[b-ynuhepn1h9] {
  background: var(--cc-survol);
}

.cc-fichier-apercu:focus-within[b-ynuhepn1h9] {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

.cc-fichier-apercu.cc-fichier-sombre[b-ynuhepn1h9] {
  background: var(--n, var(--cc-noir));
}

.cc-fichier-apercu.cc-fichier-vide[b-ynuhepn1h9] {
  border: 1.5px dashed var(--cc-rail);
  background: transparent;
  color: var(--cc-texte-3);
  font-size: 13px;
  font-weight: var(--cc-g-moyen);
}

.cc-fichier-apercu.cc-fichier-vide span[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cc-fichier-apercu img[b-ynuhepn1h9] {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cc-fichier-apercu[b-ynuhepn1h9]  .cc-envoi-champ {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cc-fichier-texte[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cc-fichier-texte b[b-ynuhepn1h9] {
  font-size: 14px;
}

.cc-fichier-nom[b-ynuhepn1h9] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--cc-texte-3);
}

@media (width <= 1100px) {
  .cc-bloc[b-ynuhepn1h9] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 560px) {
  .cc-apercu-theme[b-ynuhepn1h9] {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .cc-fichier-theme[b-ynuhepn1h9] {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-tuile-couleur[b-ynuhepn1h9],
  .cc-pastille-couleur[b-ynuhepn1h9],
  .cc-fichier-theme[b-ynuhepn1h9],
  .cc-fichier-apercu[b-ynuhepn1h9] {
    transition: none;
  }
}

/* Thème à l'ouverture : trois cartes avec une vignette (menu à gauche, page à droite). */
.cc-choix-themes[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cc-choix-theme[b-ynuhepn1h9] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--cc-filet);
  border-radius: 18px;
  background: transparent;
  color: var(--cc-texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-choix-theme:hover[b-ynuhepn1h9] {
  border-color: var(--cc-rail);
  background: var(--cc-survol);
}

.cc-choix-theme:focus-visible[b-ynuhepn1h9] {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

.cc-choix-theme[aria-checked="true"][b-ynuhepn1h9] {
  border-color: var(--cc-accent);
  background: var(--cc-teinte);
  box-shadow: inset 0 0 0 1px var(--cc-accent);
}

.cc-choix-theme b[b-ynuhepn1h9] {
  margin-top: 8px;
  font-size: 14px;
}

.cc-choix-theme small[b-ynuhepn1h9] {
  color: var(--cc-texte-3);
  font-size: 12px;
}

.cc-choix-vignette[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 4px;
  width: 100%;
  height: 54px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 12px;
  background: color-mix(in srgb, var(--a) 8%, #fff);
}

.cc-v-menu[b-ynuhepn1h9],
.cc-v-page[b-ynuhepn1h9] {
  border-radius: 8px;
}

.cc-v-page[b-ynuhepn1h9] {
  background: #fff;
}

.cc-v-menu[b-ynuhepn1h9] {
  background: color-mix(in srgb, var(--a) 14%, #fff);
}

.cc-choix-contraste .cc-v-menu[b-ynuhepn1h9] {
  background: var(--n);
}

.cc-choix-sombre .cc-choix-vignette[b-ynuhepn1h9] {
  background: var(--n);
}

.cc-choix-sombre .cc-v-page[b-ynuhepn1h9] {
  background: color-mix(in srgb, #fff 8%, var(--n));
}

.cc-choix-sombre .cc-v-menu[b-ynuhepn1h9] {
  background: color-mix(in srgb, #fff 4%, var(--n));
}

/* Aides : pas de mot isolé en fin de paragraphe. */
.cc-aide[b-ynuhepn1h9] {
  text-wrap: pretty;
}

/* Bouton Importer : le champ fichier le recouvre. */
.cc-importer[b-ynuhepn1h9] {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.cc-importer:focus-within[b-ynuhepn1h9] {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

.cc-importer[b-ynuhepn1h9]  .cc-envoi-champ {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Contrastes : résumé repliable, une ligne par couple de couleurs. */
.cc-contrastes[b-ynuhepn1h9] {
  border: 1px solid var(--cc-filet);
  border-radius: 18px;
  background: var(--cc-teinte);
}

.cc-contrastes summary[b-ynuhepn1h9] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.cc-contrastes summary[b-ynuhepn1h9]::-webkit-details-marker {
  display: none;
}

.cc-contrastes summary[b-ynuhepn1h9]::after {
  margin-left: auto;
  color: var(--cc-texte-3);
  content: "▾";
  transition: transform 0.2s ease;
}

.cc-contrastes[open] summary[b-ynuhepn1h9]::after {
  transform: rotate(180deg);
}

.cc-contrastes ul[b-ynuhepn1h9] {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 10px 10px;
  list-style: none;
}

.cc-contrastes li[b-ynuhepn1h9] {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 64px;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 12px;
  font-size: 14px;
}

.cc-contrastes li:hover[b-ynuhepn1h9] {
  background: var(--cc-survol);
}

.cc-contrastes li b[b-ynuhepn1h9] {
  font-variant-numeric: tabular-nums;
}

.cc-contrastes li small[b-ynuhepn1h9] {
  color: var(--cc-statut-texte);
  font-weight: var(--cc-g-fort);
  text-align: right;
}

.cc-contrastes li.cc-contraste-faible small[b-ynuhepn1h9] {
  color: var(--cc-statut-attente-texte);
}

.cc-contraste-exemple[b-ynuhepn1h9] {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--cc-filet);
  font-weight: var(--cc-g-fort);
}

/* Liste des polices : nom à gauche, origine à droite. */
.cc-police-option[b-ynuhepn1h9] {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}

.cc-police-option em[b-ynuhepn1h9] {
  flex: none;
  font-style: normal;
  color: var(--cc-texte-3);
  font-size: 12px;
}
/* /Components/Pages/TDB/PAGE_TDB_Accueil.razor.rz.scp.css */
.cc-tdb[b-f2o1mtnjzh] {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}

.cc-tdb-indicateurs[b-f2o1mtnjzh] {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.cc-tdb-indicateur[b-f2o1mtnjzh] {
  gap: 6px;
  padding: 18px 20px;
}

.cc-tdb-libelle[b-f2o1mtnjzh] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-texte-3);
  font-size: 14px;
}

.cc-tdb-libelle[b-f2o1mtnjzh]  .rzi {
  color: var(--cc-accent-lisible);
  font-size: 20px;
}

.cc-tdb-valeur[b-f2o1mtnjzh] {
  font-family: var(--cc-police-titre);
  font-size: 32px;
  font-weight: var(--cc-g-titre);
  font-variant-numeric: tabular-nums;
  color: var(--cc-texte);
}

.cc-tdb-evolution[b-f2o1mtnjzh] {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cc-tdb-hausse[b-f2o1mtnjzh] {
  color: var(--cc-statut-texte);
}

.cc-tdb-baisse[b-f2o1mtnjzh] {
  color: var(--cc-statut-attente-texte);
}

.cc-tdb-bloc[b-f2o1mtnjzh] {
  gap: 12px;
  padding: 20px;
}

.cc-tdb-large[b-f2o1mtnjzh] {
  grid-column: 1 / -1;
}

.cc-tdb-graphique[b-f2o1mtnjzh] {
  --rz-series-1: var(--cc-accent);
  --rz-chart-axis-label-color: var(--cc-texte-3);
  --rz-chart-axis-color: var(--cc-filet);
  --rz-chart-grid-line-color: var(--cc-filet);
}

.cc-tdb-graphique[b-f2o1mtnjzh]  .rz-chart {
  height: 260px;
}

.cc-tdb-taches[b-f2o1mtnjzh] {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-tdb-taches li[b-f2o1mtnjzh] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 6px;
  box-shadow: inset 0 1px 0 var(--cc-filet);
  font-size: 14px;
}

.cc-tdb-taches li:first-child[b-f2o1mtnjzh] {
  box-shadow: none;
}

.cc-tdb-taches[b-f2o1mtnjzh]  .rzi {
  color: var(--cc-accent-lisible);
  font-size: 20px;
}

.cc-tdb-taches strong[b-f2o1mtnjzh] {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--cc-g-fort);
}

@media (width <= 1100px) {
  .cc-tdb[b-f2o1mtnjzh] {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc-tdb-indicateurs[b-f2o1mtnjzh] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 520px) {
  .cc-tdb-indicateurs[b-f2o1mtnjzh] {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* /Components/Shared/CC_APropos.razor.rz.scp.css */
/* Fenêtre À propos : <dialog> natif en verre dépoli, plus opaque que les panneaux pour rester lisible sur le voile. */
.cc-a-propos[b-hg7ionfwdy] {
  width: calc(100% - 32px);
  max-width: 600px;
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--cc-filet);
  border-radius: 30px;
  background:
    linear-gradient(160deg, var(--cc-verre), transparent 55%),
    color-mix(in srgb, var(--cc-surface) 68%, transparent);
  box-shadow: inset 0 1px 0 var(--cc-reflet), 0 24px 60px var(--cc-voile-ombre);
  color: var(--cc-texte);
  backdrop-filter: blur(28px) saturate(180%);
  font-size: 15px;
  line-height: 1.5;
}

.cc-a-propos[open][b-hg7ionfwdy] {
  display: flex;
  flex-direction: column;
  animation: cc-a-propos-entree-b-hg7ionfwdy 0.22s ease;
}

.cc-a-propos[b-hg7ionfwdy]::backdrop {
  background: rgb(10 8 12 / 28%);
  backdrop-filter: blur(3px);
}

@keyframes cc-a-propos-entree-b-hg7ionfwdy {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.cc-a-propos-logo[b-hg7ionfwdy] {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
}

.cc-a-propos form[b-hg7ionfwdy] {
  margin: 0;
}

.cc-a-propos-corps[b-hg7ionfwdy] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 24px;
  align-items: center;
}

.cc-a-propos-infos[b-hg7ionfwdy] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.cc-a-propos-infos div[b-hg7ionfwdy] {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.cc-a-propos-infos dt[b-hg7ionfwdy] {
  color: var(--cc-texte-3);
  font-size: 14px;
}

.cc-a-propos-infos dd[b-hg7ionfwdy] {
  margin: 0;
  font-weight: var(--cc-g-fort);
  overflow-wrap: anywhere;
}

.cc-a-propos-pastille[b-hg7ionfwdy] {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cc-teinte);
  font-size: 13px;
}

.cc-a-propos-editeur[b-hg7ionfwdy] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 18px 14px 14px;
  border: 1px solid var(--cc-filet);
  border-radius: 22px;
  background: var(--cc-verre);
  box-shadow: inset 0 1px 0 var(--cc-reflet);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cc-a-propos-editeur:hover[b-hg7ionfwdy] {
  background: var(--cc-survol);
  box-shadow: inset 0 1px 0 var(--cc-reflet), 0 10px 24px -12px var(--cc-voile-ombre);
  transform: translateY(-1px);
}

.cc-a-propos-site[b-hg7ionfwdy] {
  color: var(--cc-accent-lisible);
  font-size: 13px;
  font-weight: var(--cc-g-fort);
}

.cc-a-propos-mention[b-hg7ionfwdy] {
  color: var(--cc-texte-3);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-a-propos-logo-editeur[b-hg7ionfwdy] {
  width: 150px;
  height: 34px;
  background-position: center;
}

.cc-a-propos-fermer[b-hg7ionfwdy] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--cc-accent2);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc-accent2) 60%, var(--cc-noir));
  color: var(--cc-sur-accent2);
  font: inherit;
  font-weight: var(--cc-g-fort);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.cc-a-propos-fermer:hover[b-hg7ionfwdy] {
  background: var(--cc-bouton-survol);
  transform: translateY(-1px);
}

@media (width <= 600px) {
  .cc-a-propos[b-hg7ionfwdy] {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 30px 30px 0 0;
  }

  .cc-a-propos-corps[b-hg7ionfwdy] {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc-a-propos-infos div[b-hg7ionfwdy] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cc-a-propos-fermer[b-hg7ionfwdy] {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-a-propos[open][b-hg7ionfwdy] {
    animation: none;
  }

  .cc-a-propos-fermer[b-hg7ionfwdy],
  .cc-a-propos-editeur[b-hg7ionfwdy] {
    transition: none;
  }
}