/* Bouton mode clair / sombre et logo adapté au thème (toutes les pages, voir theme.js). */
.theme-toggle {
  flex: none; width: 38px; height: 38px; padding: 0; margin: 0;
  display: inline-grid; place-items: center; cursor: pointer;
  border-radius: 4px; border: 1px solid #C9D3D8; background: #FFFFFF; color: #1E2B33;
}
.theme-toggle:hover { border-color: #EA690B; color: #EA690B; }
.theme-toggle:focus-visible { outline: 2px solid #EA690B; outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle { background: #293945; border-color: #3B4C57; color: #FFFFFF; }
:root[data-theme="dark"] .theme-toggle:hover { border-color: #EA690B; color: #EA690B; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* Logo : couleur en clair, inversé (blanc) en sombre. */
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

/* Bloc du logo (lien vers l'accueil) : du bord gauche de l'écran jusqu'au filet qui précède le titre,
   sur toute la hauteur de la barre. Au survol, le bloc passe en orange et le logo en blanc,
   en clair comme en sombre (le logo blanc reprend la forme exacte du logo, masque PNG). */
:root { --logo-h: 30px; }
.ct-brand, .topbar .brand { align-self: stretch; margin-block: -10px; gap: 0; }
.logo-block {
  position: relative; align-self: stretch; display: flex; align-items: center;
  margin-left: -20px; padding: 0 12px 0 20px;
  text-decoration: none; transition: background-color .3s ease;
}
a.logo-block:hover, a.logo-block:focus-visible, a:hover > .logo-block, a:focus-visible > .logo-block { background: #EA690B; }
a.logo-block:focus-visible, .topbar .brand:focus-visible { outline: none; }
.logo-hover {
  position: absolute; left: 20px; right: 12px; top: 50%; height: var(--logo-h); transform: translateY(-50%);
  pointer-events: none; opacity: 0; transition: opacity .3s ease; background: #FFFFFF;
  -webkit-mask: url("img/crosslog-couleur.png") left center / auto 100% no-repeat;
          mask: url("img/crosslog-couleur.png") left center / auto 100% no-repeat;
}
:root[data-theme="dark"] .logo-hover {
  -webkit-mask-image: url("img/crosslog-inverse.png");
          mask-image: url("img/crosslog-inverse.png");
}
a.logo-block:hover .logo-hover, a.logo-block:focus-visible .logo-hover,
a:hover > .logo-block .logo-hover, a:focus-visible > .logo-block .logo-hover { opacity: 1; }
@media (max-width: 760px) { :root { --logo-h: 24px; } }
@media (prefers-reduced-motion: reduce) { .logo-block, .logo-hover { transition: none; } }

/* Menu des outils (bouton ⋮ tout à gauche de la barre du haut, avant le logo) :
   même bloc pleine hauteur que le logo, orange au survol et quand le menu est ouvert. */
.ct-menu { position: relative; align-self: stretch; display: flex; margin-left: -20px; flex: none; padding: 0; border: 0; border-radius: 0; }
.topbar .ct-menu { margin-block: -10px; }
.topbar .topbar-inner { justify-content: flex-start; column-gap: 0; }
.topbar .theme-toggle { margin-left: auto; }
.ct-menu > summary {
  list-style: none; display: flex; align-items: center; justify-content: center; width: 48px;
  cursor: pointer; color: #1E2B33; transition: background-color .3s ease, color .3s ease;
}
.ct-menu > summary::-webkit-details-marker { display: none; }
.ct-menu > summary svg { width: 20px; height: 20px; display: block; }
.ct-menu > summary:hover, .ct-menu[open] > summary, .ct-menu > summary:focus-visible { background: #EA690B; color: #FFFFFF; outline: none; }
:root[data-theme="dark"] .ct-menu > summary { color: #FFFFFF; }
/* Le logo suit directement le bouton de menu. */
.ct-menu + .logo-block, .ct-menu + .brand > .logo-block { margin-left: 0; padding-left: 8px; }
.ct-menu + .logo-block .logo-hover, .ct-menu + .brand > .logo-block .logo-hover { left: 8px; }
.ct-menu-panel {
  position: absolute; left: 0; top: 100%; z-index: 60; min-width: 230px; margin-top: 1px;
  display: grid; gap: 2px; padding: 6px; border-radius: 0 0 4px 4px;
  background: #FFFFFF; border: 1px solid #C9D3D8; border-top: 0;
  font-family: "Satoshi", sans-serif;
}
.ct-menu-panel a:not([hidden]) { display: flex; align-items: center; gap: 12px; }
.ct-menu-panel .ct-menu-ico { flex: none; width: 22px; height: 22px; display: block; }
.ct-menu-panel a {
  display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: #1E2B33;
}
.ct-menu-panel a:hover, .ct-menu-panel a:focus-visible { background: #F4F6F8; color: #EA690B; outline: none; }
.ct-menu-panel a[aria-current="page"] { color: #EA690B; font-weight: 700; }
:root[data-theme="dark"] .ct-menu-panel { background: #293945; border-color: #3B4C57; }
:root[data-theme="dark"] .ct-menu-panel a { color: #FFFFFF; }
:root[data-theme="dark"] .ct-menu-panel a:hover, :root[data-theme="dark"] .ct-menu-panel a:focus-visible { background: #22323C; color: #EA690B; }
:root[data-theme="dark"] .ct-menu-panel a[aria-current="page"] { color: #EA690B; }
@media (prefers-reduced-motion: reduce) { .ct-menu > summary { transition: none; } }

/* Bouton ⋮ + logo = un seul bloc : mêmes marges, pas de coupure, un seul survol orange.
   Espacements : bord → points 18 px, points → logo 16 px, logo → filet 12 px. */
.ct-menu > summary { width: auto; padding: 0 0 0 10px; }
.ct-menu > summary svg { transform: translateY(-1px); } /* centré sur le mot « Crosslog », au-dessus de « international » */
.ct-menu + .logo-block, .ct-menu + .brand > .logo-block { padding-left: 8px; }
.ct-brand:has(> .ct-menu:hover, > .ct-menu[open], > .ct-menu > summary:focus-visible, > .logo-block:hover, > .logo-block:focus-visible) > .ct-menu > summary,
.ct-brand:has(> .ct-menu:hover, > .ct-menu[open], > .ct-menu > summary:focus-visible, > .logo-block:hover, > .logo-block:focus-visible) > .logo-block,
.topbar-inner:has(> .ct-menu:hover, > .ct-menu[open], > .ct-menu > summary:focus-visible, > .brand:hover, > .brand:focus-visible) > .ct-menu > summary,
.topbar-inner:has(> .ct-menu:hover, > .ct-menu[open], > .ct-menu > summary:focus-visible, > .brand:hover, > .brand:focus-visible) > .brand > .logo-block {
  background: #EA690B; color: #FFFFFF;
}
.ct-brand:has(> .ct-menu:hover, > .ct-menu[open], > .ct-menu > summary:focus-visible, > .logo-block:hover, > .logo-block:focus-visible) > .logo-block .logo-hover,
.topbar-inner:has(> .ct-menu:hover, > .ct-menu[open], > .ct-menu > summary:focus-visible, > .brand:hover, > .brand:focus-visible) > .brand > .logo-block .logo-hover { opacity: 1; }

/* Logo inversé (mode sombre) : le fichier a des marges transparentes ; on les rogne pour que le logo
   ait exactement la taille et la position du logo couleur (lettres de --logo-h de haut). */
.ct-logo img.logo-dark, .topbar .brand img.logo-dark {
  height: calc(var(--logo-h) * 181 / 111); width: auto;
  margin: calc(var(--logo-h) * -33 / 111) calc(var(--logo-h) * -35 / 111) calc(var(--logo-h) * -38 / 111) calc(var(--logo-h) * -28 / 111);
}
:root[data-theme="dark"] .logo-hover {
  -webkit-mask-size: auto calc(var(--logo-h) * 181 / 111);
          mask-size: auto calc(var(--logo-h) * 181 / 111);
  -webkit-mask-position: calc(var(--logo-h) * -28 / 111) calc(var(--logo-h) * -33 / 111);
          mask-position: calc(var(--logo-h) * -28 / 111) calc(var(--logo-h) * -33 / 111);
}
.ct-logo img.logo-light, .topbar .brand img.logo-light { height: var(--logo-h); width: auto; }
/* Jamais de logo déformé : aucune largeur maximale ne doit le comprimer (l'accueil a une règle img { max-width: 100% }). */
.ct-logo img, .topbar .brand img { max-width: none; flex: none; }

/* Respiration autour du filet qui sépare le logo du titre de la page : 24 px de chaque côté. */
.logo-block { padding-right: 24px; }
.logo-hover { right: 24px; }
.ct-title, .topbar .brand-tag { padding-left: 24px; }

/* « Se déconnecter » en bas du menu ⋮, séparé des pages par un filet. Masqué hors serveur (test local). */
.ct-menu-panel .ct-menu-sortie { margin-top: 4px; border-top: 1px solid #E6EBEE; border-radius: 0 0 4px 4px; padding-top: 12px; color: #5A6E78; font-weight: 500; }
:root[data-theme="dark"] .ct-menu-panel .ct-menu-sortie { border-top-color: #33434E; color: #A9B8C0; }
html.sans-connexion [data-logout] { display: none; }

/* Bouton « Se déconnecter » de la barre du haut, juste après le bouton de thème (même format). */
.ct-logout {
  flex: none; width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 4px; border: 1px solid #C9D3D8; background: #FFFFFF; color: #1E2B33; text-decoration: none;
}
.ct-logout:hover { border-color: #EA690B; color: #EA690B; }
.ct-logout:focus-visible { outline: 2px solid #EA690B; outline-offset: 2px; }
.ct-logout svg { width: 18px; height: 18px; display: block; }
:root[data-theme="dark"] .ct-logout { background: #293945; border-color: #3B4C57; color: #FFFFFF; }
:root[data-theme="dark"] .ct-logout:hover { border-color: #EA690B; color: #EA690B; }
.topbar .ct-logout { margin-left: 8px; }

/* Titres en Dax (design system Crosslog) : titre de page, titres de bloc bleus, titres de cartes,
   titre de la barre du haut. Dax n'a qu'une graisse : jamais de gras sur un titre. */
:root .hero h1, :root .head h1, :root .carte h1,
:root .sec, :root .option-head h3, :root .block-title,
:root .tool-card h2, :root .help-head h2, :root .dlg h3,
:root .ct-title, :root .topbar .brand-tag {
  font-family: "Dax", sans-serif; font-weight: 400; font-style: normal;
}
:root .sec button { font-weight: inherit; }

/* Éléments masqués avec l'attribut hidden (ex. Charting document, gardé de côté) : toujours cachés, même sur un composant en flex ou grid. */
[hidden] { display: none !important; }