/* ==========================================================================
   MiStudio — compléments au thème (main.css)
   Classes utilisées dans les pages mais absentes de main.css (Tailwind
   pré-compilé). À charger APRÈS main.css sur toutes les pages.
   ========================================================================== */

:root {
  --color-warning: #f59e0b;
}

/* ---------- Warning (absent du thème) ---------- */
.bg-warning            { background-color: var(--color-warning); }
.text-warning          { color: var(--color-warning); }
.bg-warning\/5         { background-color: color-mix(in oklab, var(--color-warning) 5%, transparent); }
.bg-warning\/10        { background-color: color-mix(in oklab, var(--color-warning) 10%, transparent); }
.border-warning\/20    { border-color: color-mix(in oklab, var(--color-warning) 20%, transparent); }

/* ---------- Opacités de couleurs manquantes ---------- */
.bg-success\/5    { background-color: color-mix(in oklab, var(--color-success) 5%, transparent); }

/* ---------- États hover / focus ---------- */
@media (hover: hover) {
  .hover\:bg-black\/3:hover     { background-color: rgb(0 0 0 / .03); }
  .hover\:bg-black\/5:hover     { background-color: rgb(0 0 0 / .05); }
  .hover\:bg-black\/10:hover    { background-color: rgb(0 0 0 / .10); }
  .hover\:shadow-sm:hover       { box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .05); }
}
.focus\:border-info:focus { border-color: var(--color-info); }
.shadow-sm { box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .05); }

/* ---------- Layout / tailles ---------- */
.inset-3       { inset: .75rem; }
.my-4          { margin-top: 1rem; margin-bottom: 1rem; }
.min-w-48      { min-width: 12rem; }
.rounded-t-6   { border-top-left-radius: 6px; border-top-right-radius: 6px; }

/* ---------- Interrupteurs (paramètres, médiathèque, fiche client) ---------- */
.peer-checked\:bg-info { position: relative; display: inline-block; flex-shrink: 0; width: 36px; height: 20px; border-radius: 9999px;
  background-color: rgb(0 0 0 / .12); transition: background-color .2s; cursor: pointer; }
.peer-checked\:bg-info::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 9999px;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; translate: none !important; border: 0 !important; }
.peer:checked ~ .peer-checked\:bg-info { background-color: #040414; }
.peer:checked ~ .peer-checked\:bg-info::after { transform: translateX(16px); translate: none !important; }
.peer:focus-visible ~ .peer-checked\:bg-info { outline: 2px solid #5cd88a; outline-offset: 2px; }

/* ---------- Logo MiStudio (complet / marque seule quand la sidebar est repliée) ---------- */
.ms-logo img { height: 30px; width: auto; }
.ms-logo-mark { display: none; }
@media (width >= 80rem) {
  #sidebar.toggle:not(:hover) .ms-logo-full { display: none; }
  #sidebar.toggle:not(:hover) .ms-logo-mark { display: block; }
}

/* ---------- Utilitaires utilisés par les pages client (assets/js/pages) ---------- */
.p-10 { padding: 2.5rem; }
.text-black\/15 { color: rgb(0 0 0 / .15); }
@media (width >= 64rem) { .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Header : actions poussées à droite ---------- */
header > :first-child + * { margin-left: auto; }
@media (width >= 48rem) { .md\:col-span-2 { grid-column: span 2 / span 2; } }
.min-h-48 { min-height: 12rem; }
.first\:border-0:first-child { border-width: 0; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (width >= 48rem) { .md\:w-auto { width: auto; } }
@media (width >= 40rem) { .sm\:inline { display: inline; } }

/* ---------- GeoGrid : couleur des points selon le rang ---------- */
.geogrid-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  font-size: 11px; font-weight: 800; transition: all .15s; cursor: pointer; position: relative; }
.geogrid-cell:hover { transform: scale(1.1); z-index: 10; }
.rank-1  { background: #16a34a; color: #fff; }      /* top 3 : vert */
.rank-2  { background: #22c55e; color: #fff; }
.rank-3  { background: #4ade80; color: #14532d; }
.rank-4  { background: #fde047; color: #713f12; }   /* 4-5 : jaune */
.rank-5  { background: #facc15; color: #713f12; }
.rank-6  { background: #fdba74; color: #7c2d12; }   /* 6-7 : orange clair */
.rank-7  { background: #fb923c; color: #fff; }
.rank-8  { background: #f97316; color: #fff; }      /* 8-9 : orange */
.rank-9  { background: #ea580c; color: #fff; }
.rank-10 { background: #dc2626; color: #fff; }      /* 10-20 : rouge */
.rank-11 { background: #b91c1c; color: #fff; }
.rank-20 { background: #7f1d1d; color: #fff; }      /* hors top 20 */
.rank-center { box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor; }

.gg-pin { background: none; border: none; }
.gg-dot { width: 30px; height: 30px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  font: 800 11px/1 "Plus Jakarta Sans", sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3); cursor: pointer; transition: transform .15s; }
.gg-dot:hover { transform: scale(1.15); }
.gg-dot.gg-center { width: 36px; height: 36px; font-size: 15px; border: 3px solid #040414; }
.gg-tip { position: absolute; z-index: 5; pointer-events: none; background: #040414; color: #fff; font: 600 11px/1.3 "Plus Jakarta Sans", sans-serif; padding: 6px 9px; border-radius: 8px; white-space: nowrap; box-shadow: 0 6px 18px rgb(4 4 20 / .2); }
.gg-pt { cursor: pointer; }
.gg-pick-map { height: 340px; border-radius: 13px; overflow: hidden; border: 1px solid rgb(4 4 20 / .1); z-index: 0; }
.gg-pick-map .gg-dot.gg-center { width: 34px; height: 34px; }
@media (max-width: 480px) { .gg-pick-map { height: 220px; } }
.gg-pop { font-family: "Plus Jakarta Sans", sans-serif; min-width: 190px; }
.gg-pop-rank { font-size: 10px; color: #696d81; margin-bottom: 2px; }
.gg-pop-title { font-size: 13px; font-weight: 700; color: #040414; margin-bottom: 6px; }
.gg-pop-badge { display: inline-block; padding: 1px 7px; border-radius: 9999px; font-size: 11px; }
.gg-pop-sub { font-size: 10px; color: #696d81; margin-bottom: 4px; }
.gg-pop ol { margin: 0; padding-left: 18px; font-size: 12px; color: #040414; }
.gg-pop li { margin: 2px 0; }
.gg-pop ol.gg-pop-list { list-style: none; padding: 0; margin: 4px 0 0; }
.gg-pop-biz { display: flex; gap: 8px; align-items: flex-start; padding: 6px 6px; margin: 0 -6px !important; border-radius: 8px; }
.gg-pop-biz.is-me { background: rgb(22 163 74 / .1); }
.gg-pop-pos { flex: 0 0 20px; height: 20px; border-radius: 9999px; border: 1.5px solid #040414; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.gg-pop-biz.is-me .gg-pop-pos { background: #16a34a; border-color: #16a34a; color: #fff; }
.gg-pop-main { display: flex; flex-direction: column; min-width: 0; }
.gg-pop-name { font-size: 12px; font-weight: 700; color: #040414; line-height: 1.25; }
.gg-pop-name em { font-style: normal; font-size: 9px; font-weight: 700; background: #040414; color: #fff; padding: 1px 5px; border-radius: 4px; margin-left: 3px; vertical-align: 1px; }
.gg-pop-meta { font-size: 10px; color: #696d81; margin-top: 1px; }
.gg-pop-gap { text-align: center; color: #696d81; font-size: 11px; margin: 0 !important; }
.leaflet-top, .leaflet-bottom { z-index: 500; }
.leaflet-container { font-family: "Plus Jakarta Sans", sans-serif; }
.w-fit { width: fit-content; }

/* ---------- Vue Globale : bouton IA Auto ---------- */
@keyframes ia-spin { to { transform: rotate(360deg); } }
@keyframes ia-glow { 0%, 100% { box-shadow: 0 0 0 0 rgb(92 216 138 / .45); } 50% { box-shadow: 0 0 0 7px rgb(92 216 138 / 0); } }
.ia-auto { transition: transform .15s; }
.ia-auto:hover { transform: scale(1.04); }
.ia-auto:focus-visible { outline: 2px solid #5cd88a; outline-offset: 3px; }
.ia-ring { position: absolute; inset: 3px; border-radius: 9999px; pointer-events: none;
  background: conic-gradient(from 0deg, rgb(92 216 138 / .1) 0%, rgb(92 216 138 / .25) 35%, #5cd88a 70%, #5cd88a 78%, rgb(92 216 138 / .1) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: ia-spin 1.4s linear infinite; }
.ia-core { position: relative; animation: ia-glow 2.4s ease-in-out infinite; }
.ia-auto.is-paused .ia-ring { animation: none; background: rgb(164 168 186 / .55); }
.ia-auto.is-paused .ia-core { animation: none; color: #a4a8ba; }
@media (prefers-reduced-motion: reduce) { .ia-ring, .ia-core { animation: none !important; } }
.ms-confirm-backdrop { position: fixed; inset: 0; z-index: 3000; background: rgb(4 4 20 / .45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }

/* ---------- Cloche de notifications ---------- */
.ms-bell-badge { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9999px;
  background: #ee273a; color: #fff; font: 700 10px/1 "Plus Jakarta Sans", sans-serif; display: none; align-items: center; justify-content: center; border: 2px solid #fff; }
.ms-notifs { position: fixed; z-index: 2500; width: 380px; max-width: calc(100vw - 24px); box-shadow: 0 18px 50px rgb(4 4 20 / .16); overflow: hidden; }
.ms-notifs-list { max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain; }
.ms-notifs-list > a:last-child { border-bottom: 0; }

/* ---------- Menu du profil ---------- */
header .dropdown { position: relative; }
.ms-profile-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 2400; width: 270px; box-shadow: 0 18px 50px rgb(4 4 20 / .16); }
header .dropdown.open .ms-profile-menu { display: block; }
@media (width < 1200px) { .ms-profile-menu { right: auto; left: 0; } }
.min-h-28 { min-height: 7rem; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ms-weekend { background: #fcfcfd; }
/* la flèche du menu profil pivote sur elle-même (sinon elle sort du rond quand le menu est ouvert) */
header .dropdown svg path { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) { .hover\:bg-black:hover { background-color: #000; } }
@media (width >= 48rem) { .md\:inline { display: inline; } }

/* fond du document (anciennement calculé par le main.js du thème) */
:root { --bg-document: #ffffff; }

/* ---------- Authentification ---------- */
/* page masquée tant que la session n'est pas vérifiée (core/auth.js) */
html.ms-auth-pending body { visibility: hidden; }
html.ms-auth-pending body noscript { visibility: visible; }
.ms-auth-error { visibility: visible; position: fixed; inset: 0; z-index: 4000; background: #fff; display: flex; align-items: center; justify-content: center; padding: 16px; }

/* page de connexion */
.ms-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; position: relative; overflow: hidden; }
.ms-login::before { content: ''; position: absolute; top: -120px; left: -120px; width: 320px; height: 320px; border-radius: 9999px; background: #ee273a; filter: blur(160px); opacity: .35; z-index: -1; }
.ms-login-card { width: 100%; max-width: 420px; }
.ms-login input:focus { outline: none; border-color: #040414; }
.ms-login [data-view] { display: none; }
.ms-login [data-view].is-active { display: block; }
.ms-login button[disabled] { opacity: .6; cursor: wait; }

/* chargement des données */
.ms-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 80px 16px; font-size: 12px; color: #6b7280; }
.ms-spinner { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid rgb(4 4 20 / .12); border-top-color: #040414; animation: ms-spin .8s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* Médiathèque : vignettes au même format (4:5), recadrées à l'affichage uniquement */
.ms-media-frame { position: relative; width: 100%; padding-top: 125%; overflow: hidden; background: #f3f3f6; }
.ms-media-frame > img, .ms-media-frame > div:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-media-badge { box-shadow: 0 2px 8px rgb(4 4 20 / .18); z-index: 1; }

/* interrupteur on/off (outils Local Dominator) */
.ms-switch { position: relative; display: inline-block; flex-shrink: 0; width: 40px; height: 22px; border-radius: 999px; background: rgba(4, 4, 20, .12); transition: background .2s; }
.ms-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s; }
.ms-switch.is-on { background: #040414; }
.ms-switch.is-on::after { transform: translateX(18px); }
[data-tool]:focus-visible { outline: 2px solid #040414; outline-offset: 2px; }

/* impression / « Exporter PDF » : uniquement le contenu de la page */
@media print {
  #sidebar, header, #rp-month, #rp-pdf, #ms-page button, [data-ms-toast] { display: none !important; }
  body { background: #fff !important; }
  #ms-page { margin: 0 !important; }
  [data-ms-content] { padding: 0 !important; max-width: none !important; transition: none !important; }
  .app .blur-\[124px\] { display: none !important; }
  .app, .app > div { overflow: visible !important; min-height: 0 !important; }
  .rounded-20, .rounded-15 { break-inside: avoid; }
}

/* bouton « réglages » à côté du titre de page */
.ms-settings-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid rgba(4,4,20,.1); background: #fff; color: #8a8a99; font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.ms-settings-btn:hover, .ms-settings-btn:focus-visible { color: #040414; border-color: rgba(4,4,20,.3); }
.ms-settings-btn svg { flex: none; transition: transform .3s; }
.ms-settings-btn:hover svg { transform: rotate(45deg); }
html.dark .ms-settings-btn, .dark .ms-settings-btn { background: transparent; border-color: rgba(255,255,255,.12); color: #a0a0ad; }
html.dark .ms-settings-btn:hover, .dark .ms-settings-btn:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* Médiathèque : vignette cliquable et photo en grand */
.ms-media-frame > .ms-media-zoom { position: absolute; inset: 0; }
.ms-media-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ms-media-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-media-zoom:focus-visible { outline: 3px solid #040414; outline-offset: -3px; }
.ms-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(4,4,20,.88); display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px; }
.ms-lb-fig { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ms-lb-fig img { max-width: min(1400px, 100%); max-height: calc(100vh - 140px); object-fit: contain; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.ms-lb-cap { color: rgba(255,255,255,.85); font-size: 12px; text-align: center; }
.ms-lb-btn { position: absolute; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.ms-lb-btn:hover, .ms-lb-btn:focus-visible { background: rgba(255,255,255,.28); outline: none; }
.ms-lb-close { top: 12px; right: 12px; font-size: 18px; }
.ms-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); font-size: 30px; }
.ms-lb-next { right: 12px; top: 50%; transform: translateY(-50%); font-size: 30px; }