/* Thème ConnectiCloudBase (voir DESIGN.md). Commun à toutes les chartes : ne pas modifier par client. */
:root {
  --cc-fond: color-mix(in srgb, var(--cc-accent) 6%, #fff);
  --cc-menu-fond: var(--cc-noir);
  --cc-surface: #fff;
  --cc-texte: var(--cc-noir);
  --cc-accent-lisible: var(--cc-accent);
  --cc-voile: var(--cc-accent);
  --cc-actif: #1f9463;
  --cc-attente: #b26a00;
  --cc-alerte: #b3261e;
  --cc-dose-fond: 12%;
  --cc-dose-avatar: 35%;
  --cc-dose-texte: 40%;
  --cc-dose-lueur: calc(22% * var(--cc-intensite-lueurs, 1));
  --cc-dose-reflet: 75%;
  --cc-dose-ombre: calc(14% * var(--cc-intensite-ombres, 1));
  --cc-mode-curseur: 3px;
  --cc-mode-soleil: var(--cc-sur-accent);
  --cc-mode-lune: var(--cc-texte-3);
  --cc-theme-position: 0;
  --cc-theme-curseur: var(--cc-accent);
  --cc-theme-icone: var(--cc-texte-3);
  --cc-theme-survol: var(--cc-accent-lisible);
  --cc-menu-halo: linear-gradient(transparent, transparent);
  --cc-ligne-espace: 10px;
  --cc-texte-2: color-mix(in srgb, var(--cc-texte) 86%, var(--cc-surface));
  --cc-texte-3: color-mix(in srgb, var(--cc-texte) 72%, var(--cc-surface));
  --cc-teinte: color-mix(in srgb, var(--cc-voile) 8%, transparent);
  --cc-survol: color-mix(in srgb, var(--cc-voile) 11%, transparent);
  --cc-ligne: color-mix(in srgb, var(--cc-voile) 6%, transparent);
  --cc-rail: color-mix(in srgb, var(--cc-voile) 18%, transparent);
  --cc-filet: color-mix(in srgb, var(--cc-voile) 12%, transparent);
  --cc-verre: color-mix(in srgb, var(--cc-surface) 54%, transparent);
  --cc-reflet: color-mix(in srgb, #fff var(--cc-dose-reflet), transparent);
  --cc-voile-ombre: color-mix(in srgb, var(--cc-accent) var(--cc-dose-ombre), transparent);
  --cc-bouton-survol: color-mix(in srgb, var(--cc-accent2) 86%, var(--cc-texte));
  --cc-avatar2: color-mix(in srgb, var(--cc-lueur) var(--cc-dose-avatar), var(--cc-surface));
  --cc-avatar2-texte: color-mix(in srgb, var(--cc-lueur) var(--cc-dose-texte), var(--cc-texte));
  --cc-statut: color-mix(in srgb, var(--cc-actif) var(--cc-dose-fond), var(--cc-surface));
  --cc-statut-texte: color-mix(in srgb, var(--cc-actif) 50%, var(--cc-texte));
  --cc-statut-attente: color-mix(in srgb, var(--cc-attente) var(--cc-dose-fond), var(--cc-surface));
  --cc-statut-attente-texte: color-mix(in srgb, var(--cc-attente) 50%, var(--cc-texte));
  --cc-actif-menu: color-mix(in srgb, var(--cc-accent) 80%, #fff);
  --cc-menu-lueurs: radial-gradient(360px 340px at 0% 100%, color-mix(in srgb, var(--cc-accent) 52%, transparent), transparent 72%);
  --cc-page-lueurs:
    radial-gradient(900px 460px at 96% -10%, color-mix(in srgb, var(--cc-lueur) var(--cc-dose-lueur), transparent), transparent 72%),
    radial-gradient(760px 520px at 100% 74%, color-mix(in srgb, var(--cc-accent2) var(--cc-dose-lueur), transparent), transparent 72%),
    radial-gradient(760px 480px at 42% 112%, color-mix(in srgb, var(--cc-accent) var(--cc-dose-lueur), transparent), transparent 72%);
  --cc-acces-lueurs:
    radial-gradient(720px 560px at 32% 34%, color-mix(in srgb, var(--cc-accent) var(--cc-dose-lueur), transparent), transparent 72%),
    radial-gradient(680px 540px at 68% 70%, color-mix(in srgb, var(--cc-accent2) var(--cc-dose-lueur), transparent), transparent 72%),
    radial-gradient(520px 420px at 72% 22%, color-mix(in srgb, var(--cc-lueur) var(--cc-dose-lueur), transparent), transparent 72%);

  /* Liaison Radzen */
  --rz-primary: var(--cc-accent);
  --rz-primary-light: color-mix(in srgb, var(--cc-accent) 75%, #fff);
  --rz-primary-lighter: color-mix(in srgb, var(--cc-accent) 15%, #fff);
  --rz-primary-dark: color-mix(in srgb, var(--cc-accent) 80%, #000);
  --rz-primary-darker: color-mix(in srgb, var(--cc-accent) 60%, #000);
  --rz-secondary: var(--cc-accent2);
  --rz-secondary-light: color-mix(in srgb, var(--cc-accent2) 75%, #fff);
  --rz-secondary-lighter: color-mix(in srgb, var(--cc-accent2) 15%, #fff);
  --rz-secondary-dark: color-mix(in srgb, var(--cc-accent2) 80%, #000);
  --rz-secondary-darker: color-mix(in srgb, var(--cc-accent2) 60%, #000);

  /* Champs : Radzen fixe ses états par variables, avec une priorité supérieure aux classes du projet. */
  --cc-champ-bord: color-mix(in srgb, var(--cc-texte) 55%, transparent);
  --rz-input-background-color: var(--cc-verre);
  --rz-input-hover-background-color: var(--cc-verre);
  --rz-input-focus-background-color: var(--cc-verre);
  --rz-input-value-color: var(--cc-texte);
  --rz-input-placeholder-color: var(--cc-texte-3);
  --rz-input-border: 1px solid var(--cc-champ-bord);
  --rz-input-border-block-end: 1px solid var(--cc-champ-bord);
  --rz-input-hover-border: 1px solid var(--cc-texte-3);
  --rz-input-hover-border-block-end: 1px solid var(--cc-texte-3);
  --rz-input-focus-border: 1px solid var(--cc-accent-lisible);
  --rz-input-focus-border-block-end: 1px solid var(--cc-accent-lisible);
  --rz-input-focus-outline: none;
  --rz-input-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent-lisible) 24%, transparent);

  /* Notifications : fond opaque, car elles passent au-dessus du contenu. */
  --rz-notification-container-background-color: transparent;
  --rz-notification-border-radius: 22px;
  --rz-notification-padding: 14px 16px;
  --rz-notification-shadow: inset 0 1px 0 var(--cc-reflet), 0 18px 44px var(--cc-voile-ombre);
  --rz-notification-success-background-color: var(--cc-statut);
  --rz-notification-success-color: var(--cc-statut-texte);
  --rz-notification-success-icon-color: var(--cc-statut-texte);
  --rz-notification-error-background-color: color-mix(in srgb, var(--cc-alerte) 12%, var(--cc-surface));
  --rz-notification-error-color: color-mix(in srgb, var(--cc-alerte) 60%, var(--cc-texte));
  --rz-notification-error-icon-color: color-mix(in srgb, var(--cc-alerte) 60%, var(--cc-texte));
  --rz-notification-warning-background-color: color-mix(in srgb, var(--cc-accent2) var(--cc-dose-fond), var(--cc-surface));
  --rz-notification-warning-color: color-mix(in srgb, var(--cc-accent2) 40%, var(--cc-texte));
  --rz-notification-warning-icon-color: color-mix(in srgb, var(--cc-accent2) 40%, var(--cc-texte));
  --rz-notification-info-background-color: color-mix(in srgb, var(--cc-accent) var(--cc-dose-fond), var(--cc-surface));
  --rz-notification-info-color: color-mix(in srgb, var(--cc-accent-lisible) 50%, var(--cc-texte));
  --rz-notification-info-icon-color: color-mix(in srgb, var(--cc-accent-lisible) 50%, var(--cc-texte));
}

[data-cc-mode="sombre"] {
  --cc-fond: var(--cc-noir);
  --cc-menu-fond: color-mix(in srgb, #fff 7%, var(--cc-noir));
  --cc-surface: color-mix(in srgb, #fff 7%, var(--cc-noir));
  --cc-texte: #f4f1f6;
  --cc-accent-lisible: color-mix(in srgb, var(--cc-accent2) 55%, #fff);
  --cc-voile: #fff;
  --cc-actif: #3dd598;
  --cc-attente: #ffb74d;
  --cc-alerte: #ff8a80;
  --cc-dose-fond: 28%;
  --cc-dose-texte: 25%;
  --cc-dose-lueur: calc(32% * var(--cc-intensite-lueurs, 1));
  --cc-dose-reflet: 16%;
  --cc-dose-ombre: calc(30% * var(--cc-intensite-ombres, 1));
  --cc-mode-curseur: 35px;
  --cc-mode-soleil: var(--cc-texte-3);
  --cc-mode-lune: var(--cc-sur-accent);
}

/* Sélecteur de thème à 3 positions : clair, clair avec menu sombre, sombre. */
[data-cc-theme="contraste"] {
  --cc-theme-position: 1;
}

[data-cc-theme="sombre"] {
  --cc-theme-position: 2;
}

/* Menu sombre : opaque, sur le noir de la marque. */
.cc-menu {
  --cc-menu-texte: #e9e6ec;
  --cc-menu-fort: #fff;
  --cc-menu-icone: #fff;
  --cc-menu-survol-texte: #fff;
  --cc-menu-accent: color-mix(in srgb, var(--cc-accent2) 55%, #fff);
  --cc-menu-actif: var(--cc-actif-menu);
  --cc-menu-actif-texte: #fff;
  --cc-menu-repere: transparent;
  --cc-menu-focus: #fff;
  --cc-menu-bord: rgb(255 255 255 / 14%);
  --cc-menu-arete: rgb(255 255 255 / 20%);
  --cc-menu-flou: none;
  --cc-menu-barre-fond: var(--cc-menu-fond);
  --cc-filet: rgb(255 255 255 / 12%);
  --cc-verre: rgb(255 255 255 / 9%);
  --cc-reflet: rgb(255 255 255 / 18%);
  --cc-survol: rgb(255 255 255 / 12%);
  --cc-rail: rgb(255 255 255 / 20%);
  --cc-theme-curseur: var(--cc-actif-menu);
  --cc-theme-icone: var(--cc-menu-texte);
  --cc-theme-survol: var(--cc-menu-survol-texte);
}

/* Fond de page du mode clair, identique avec le menu clair ou sombre. */
[data-cc-mode="clair"] {
  --cc-menu-halo:
    radial-gradient(420px 380px at 4% 16%, color-mix(in srgb, var(--cc-accent) 20%, transparent), transparent 70%),
    radial-gradient(400px 380px at 14% 92%, color-mix(in srgb, var(--cc-lueur) 26%, transparent), transparent 70%);
}

/* Menu clair, en mode clair seulement : verre translucide, neutres pour la structure, violet au survol. */
[data-cc-mode="clair"][data-cc-menu="clair"] .cc-menu {
  --cc-menu-fond: color-mix(in srgb, var(--cc-surface) 42%, transparent);
  --cc-menu-lueurs: linear-gradient(160deg, color-mix(in srgb, var(--cc-surface) 48%, transparent), transparent);
  --cc-menu-barre-fond: color-mix(in srgb, var(--cc-surface) 72%, transparent);
  --cc-menu-texte: var(--cc-texte-2);
  --cc-menu-fort: var(--cc-texte);
  --cc-menu-icone: var(--cc-texte-2);
  --cc-menu-survol-texte: color-mix(in srgb, var(--cc-accent) 70%, var(--cc-texte));
  --cc-menu-accent: var(--cc-accent);
  --cc-menu-actif: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-surface));
  --cc-menu-actif-texte: var(--cc-accent);
  --cc-menu-repere: var(--cc-accent);
  --cc-menu-focus: var(--cc-accent);
  --cc-menu-bord: color-mix(in srgb, var(--cc-surface) 75%, transparent);
  --cc-menu-arete: var(--cc-surface);
  --cc-menu-flou: blur(32px) saturate(190%);
  --cc-filet: color-mix(in srgb, var(--cc-accent) 10%, transparent);
  --cc-verre: color-mix(in srgb, var(--cc-surface) 55%, transparent);
  --cc-reflet: var(--cc-surface);
  --cc-survol: color-mix(in srgb, var(--cc-accent) 7%, transparent);
  --cc-rail: color-mix(in srgb, var(--cc-texte) 10%, transparent);
  --cc-theme-curseur: var(--cc-accent);
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--cc-fond);
  color: var(--cc-texte);
  font-family: var(--cc-police);
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  font-family: var(--cc-police-titre);
  font-weight: var(--cc-g-titre);
  letter-spacing: var(--cc-titre-espace);
}

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

/* Défini ici : la variable utilise une URL relative au dossier theme/. */
.cc-logo {
  background: var(--cc-logo) left center / contain no-repeat;
}

/* Page claire : version du logo pour fond clair. */
.cc-logo-page {
  background-image: var(--cc-logo-page);
}

[data-cc-mode="sombre"] .cc-logo-page {
  background-image: var(--cc-logo);
}

/*
 * Logo de l'éditeur (fenêtre À propos) : fixe, il ne suit pas la charte du client.
 * Copie dans editeur/ : charte-vers-theme peut remplacer le contenu de logos/.
 */
.cc-logo-editeur {
  background: url("editeur/logo connecti_cloud H quadri.svg") left center / contain no-repeat;
}

[data-cc-mode="sombre"] .cc-logo-editeur {
  background-image: url("editeur/logo connecti_cloud H fond transparent.svg");
}

/* Menu clair : version du logo pour fond clair. */
[data-cc-mode="clair"][data-cc-menu="clair"] .cc-menu .cc-logo {
  background-image: var(--cc-logo-page);
}

/* Menu clair : le compte devient une carte de verre, sans filet au-dessus. */
[data-cc-mode="clair"][data-cc-menu="clair"] .cc-menu .cc-compte {
  padding: 6px;
  border: 1px solid var(--cc-filet);
  border-radius: 26px;
  background: var(--cc-verre);
  box-shadow: inset 0 1px 0 var(--cc-reflet);
}

.cc-verre {
  border: 1px solid var(--cc-filet);
  background: var(--cc-verre);
  box-shadow: inset 0 1px 0 var(--cc-reflet);
  backdrop-filter: blur(22px) saturate(180%);
}

.cc-panneau {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--cc-filet);
  border-radius: 30px;
  background: var(--cc-verre);
  box-shadow: inset 0 1px 0 var(--cc-reflet), 0 18px 44px var(--cc-voile-ombre);
  backdrop-filter: blur(28px) saturate(180%);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}