/* Coque d'application unifiée (sidebar + topbar) — cohérence sur tout le back-office. */
/* Back-office en thème clair : empêche les contrôles natifs (select/input) de
   passer en texte blanc sur fond blanc quand l'OS est en mode sombre. */
html { color-scheme: light; }
.m360-shell { display: flex; min-height: 100vh; background: #f1f5f9; }

.m360-side {
  width: 248px; flex: 0 0 248px; background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.m360-side__brand {
  padding: 16px 18px; font-weight: 800; color: #fff; font-size: 15px; line-height: 1.2;
  border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: 10px;
}
.m360-side__brand-logo {
  width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg,#2563eb,#7c3aed);
  display: grid; place-items: center; color: #fff; font-size: 16px; flex: 0 0 auto;
}
.m360-side__nav { flex: 1; overflow-y: auto; padding: 8px 10px 24px; }
.m360-side__group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: #64748b; padding: 16px 12px 5px; font-weight: 700; }
.m360-side__link {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
  color: #cbd5e1; text-decoration: none; background-image: none; font-size: 14px; margin-bottom: 1px;
  transition: background-color .18s ease, color .18s ease, transform .16s cubic-bezier(.16,1,.3,1);
}
.m360-side__link:hover { background: #1e293b; color: #fff; transform: translateX(3px); }
.m360-side__link:active { transform: translateX(1px) scale(.99); }
.m360-side__link.is-active { background: #2563eb; color: #fff; font-weight: 600; }
.m360-side__link i { font-size: 18px; width: 20px; text-align: center; transition: transform .18s cubic-bezier(.16,1,.3,1); }
.m360-side__link:hover i { transform: scale(1.14); }
.m360-side__link.is-active i { transform: scale(1.06); }
/* Logo de marque : petit clin d'œil au survol de l'en-tête. */
.m360-side__brand-logo { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.m360-side__brand:hover .m360-side__brand-logo { transform: rotate(-7deg) scale(1.07); }

/* ===== Navigation en accordéon ===== */
/* Liens « solo » (Tableau de bord, Configuration commune) : espacés des modules. */
.m360-side__top:first-child { margin-bottom: 14px; }
.m360-side__top:last-child { margin-top: 14px; }
.m360-side__acc { margin: 1px 0; }
/* En-tête de module : se comporte comme un lien mais déplie/replie le groupe. */
.m360-side__head {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border-radius: 9px;
  background: none; border: none; cursor: pointer; color: #e2e8f0; font-family: inherit; font-size: 14px; text-align: left;
  transition: background-color .18s ease, color .18s ease;
  /* DSFR applique `background-color: var(--hover-tint)` (fond clair) sur tout <button>
     au survol/clic, avec une spécificité qui bat nos règles → en-tête « tout blanc ».
     On redéfinit les teintes DSFR vers le sombre de la coque pour rester cohérent. */
  --hover-tint: #1e293b; --active-tint: #1e293b;
}
.m360-side__head:hover { background: #1e293b; color: #fff; }
.m360-side__head > i:first-child { font-size: 18px; width: 20px; text-align: center; color: #94a3b8; transition: color .18s ease; }
.m360-side__head:hover > i:first-child, .m360-side__head.is-current > i:first-child { color: #fff; }
.m360-side__head > span { flex: 1; }
.m360-side__head.is-current { color: #fff; font-weight: 600; }
.m360-side__chev { font-size: 15px; color: #64748b; transition: transform .22s cubic-bezier(.16,1,.3,1); }
.m360-side__acc.is-open .m360-side__chev { transform: rotate(180deg); }
/* Corps replié/déplié : animation de hauteur via grid-template-rows (0fr → 1fr). */
.m360-side__accbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.16,1,.3,1); }
.m360-side__acc.is-open .m360-side__accbody { grid-template-rows: 1fr; }
.m360-side__accinner { overflow: hidden; margin: 2px 0 4px 21px; padding-left: 8px; border-left: 1px solid #1e293b; }

.m360-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m360-topbar {
  height: 54px; background: #fff; border-bottom: 1px solid #e2e8f0; display: flex;
  align-items: center; justify-content: space-between; padding: 0 22px; position: sticky; top: 0; z-index: 400;
}
.m360-topbar__commune { font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 9px; }
.m360-topbar__logo { height: 30px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.m360-topbar__right { display: flex; align-items: center; gap: 14px; color: #475569; font-size: 13.5px; }
.m360-topbar__badge { background: #eef2ff; color: #4338ca; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.m360-topbar__badge:hover { transform: scale(1.05); }
.m360-viewas { position: relative; }
.m360-viewas__btn { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; font-family: inherit; line-height: 1.4; }
.m360-viewas__btn:hover { transform: none; background: #e0e7ff; }
.m360-viewas__btn.is-impersonating { background: #fef3c7; color: #92400e; }
.m360-viewas__btn.is-impersonating:hover { background: #fde68a; }
.m360-viewas__caret { font-size: 13px; }
.m360-viewas__pop { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,.16); padding: 8px; z-index: 60; }
.m360-viewas__reset { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin-bottom: 6px; border: 1px solid #fde68a; background: #fffbeb; color: #92400e; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.m360-viewas__reset:hover { background: #fef3c7; }
.m360-viewas__search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; }
.m360-viewas__search input { border: none; outline: none; flex: 1; font-size: 13px; background: transparent; color: #1d2327; }
.m360-viewas__list { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.m360-viewas__hint { margin: 0; padding: 12px 10px; color: #94a3b8; font-size: 13px; text-align: center; }
.m360-viewas__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; text-align: left; }
.m360-viewas__item:hover { background: #f1f5f9; }
.m360-viewas__item:disabled { opacity: .6; cursor: default; }
.m360-viewas__ava { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: #e0e7ff; color: #4338ca; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.m360-viewas__id { display: flex; flex-direction: column; min-width: 0; }
.m360-viewas__id strong { font-size: 13.5px; color: #1d2327; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m360-viewas__id span { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m360-topbar__user { display: flex; align-items: center; gap: 8px; }
.m360-topbar__avatar { width: 30px; height: 30px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; overflow: hidden; flex: 0 0 auto; }
/* Doublon volontaire de la règle dans m360/extra.css : celle-ci n'est chargée que
   page par page (plugin signalements), alors que l'avatar est dans le topbar global
   (shell.css, chargé sur toutes les pages dès le <head>). Sans ça, entre le moment où
   shell.css s'applique et celui où extra.css arrive, la <img> s'affiche un instant à sa
   taille native (photo en grand qui flashe en haut à droite) avant d'être recadrée. */
.m360-topbar__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.m360-content { flex: 1; min-width: 0; }
.m360-setupbar { display: flex; align-items: center; gap: 10px; padding: 10px 22px; background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; font-size: 14px; text-decoration: none; }
.m360-setupbar i { font-size: 18px; }
.m360-setupbar strong { margin-left: auto; color: #b45309; white-space: nowrap; }
.m360-setupbar:hover { background: #fef3c7; }

@media (max-width: 900px) {
  .m360-side { width: 64px; flex-basis: 64px; }
  .m360-side__brand span, .m360-side__link span, .m360-side__group,
  .m360-side__head span, .m360-side__chev { display: none; }
  .m360-side__link, .m360-side__head { justify-content: center; }
  .m360-side__accinner { margin-left: 0; padding-left: 0; border-left: none; }
}

/* ===== Menu utilisateur (déconnexion) ===== */
.m360-userbtn {
  appearance: none; border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; color: #1e293b; padding: 4px 8px 4px 4px; border-radius: 999px;
  display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.m360-userbtn:hover { background: #f1f5f9; }
.m360-userbtn.is-open { background: #eef2ff; border-color: #c7d2fe; }
.m360-userbtn__name { font-weight: 600; font-size: 13.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m360-userbtn__caret { font-size: 15px; color: #94a3b8; transition: transform .15s ease; }
.m360-userbtn.is-open .m360-userbtn__caret { transform: rotate(180deg); }

.m360-usermenu { position: relative; }
.m360-usermenu__pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 270px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 14px 40px rgba(2,6,23,.18);
  padding: 6px; z-index: 600; transform-origin: top right;
  animation: m360-menu-in .28s cubic-bezier(.34, 1.42, .5, 1);
}
.m360-usermenu__pop.is-closing { animation: m360-menu-out .16s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
/* Ouverture de menu nettement visible : descente + zoom avec léger rebond. */
@keyframes m360-menu-in {
  0%   { opacity: 0; transform: translateY(-16px) scale(.88); }
  55%  { opacity: 1; transform: translateY(3px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes m360-menu-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(.94); }
}
@keyframes m360-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.m360-usermenu__head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px; }
.m360-usermenu__head .m360-topbar__avatar { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }
.m360-usermenu__id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.m360-usermenu__id strong { font-size: 13.5px; line-height: 1.3; color: #0f172a; }
.m360-usermenu__id span { font-size: 11.5px; line-height: 1.3; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m360-usermenu__role { margin-top: 2px; align-self: flex-start; background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 600; }
/* Même survol que les lignes .mc2-row de la page Mon compte (ex. « Ma place dans la
   mairie ») : fond plein-largeur, pas de coin arrondi flottant. */
.m360-usermenu__item {
  width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 2px; padding: 8px 10px;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px;
  font-weight: 600; color: #334155; text-decoration: none; transition: background .15s ease;
}
.m360-usermenu__item i { font-size: 17px; color: #94a3b8; }
.m360-usermenu__item:hover { background: #f8fafc; }
/* Plus discret que l'item ci-dessus (façon réglages Apple : « Déconnexion » en simple
   ligne de texte rouge, pas un bloc pleine largeur) — le survol fonce juste le rouge,
   PAS de fond/bloc autour. */
.m360-usermenu__logout {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 2px 10px; padding: 4px;
  background: none; border: none; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 500; color: #b91c1c; transition: color .15s ease;
}
.m360-usermenu__logout i { font-size: 13px; }
.m360-usermenu__logout:hover { background: none; color: #7f1414; }
.m360-usermenu__logout:disabled { opacity: .6; cursor: default; }

.m360-spin { animation: m360-spin 0.8s linear infinite; display: inline-block; }
@keyframes m360-spin { to { transform: rotate(360deg); } }

/* ===== Page de connexion (popup centrée) ===== */
.m360-auth-bg {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 20% -10%, #1e3a8a 0%, transparent 60%),
              radial-gradient(1000px 500px at 110% 110%, #6d28d9 0%, transparent 55%),
              #0f172a;
  overflow: auto;
}
.m360-auth-overlay { position: fixed; inset: 0; backdrop-filter: blur(2px); background: rgba(15,23,42,.35); }
.m360-auth-card {
  position: relative; z-index: 1; width: min(420px, 100%); background: #fff; border-radius: 18px;
  padding: 30px 30px 24px; box-shadow: 0 30px 80px rgba(2,6,23,.5); display: flex; flex-direction: column;
  animation: m360-pop .18s ease;
}
/* Formulaires à plusieurs champs par étape (ex : inscription citoyenne) — un peu plus large
   que la carte de connexion standard pour respirer, sans devenir un mur de texte. */
.m360-auth-card--wide { width: min(480px, 100%); }
.m360-auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.m360-auth-logo {
  width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg,#2563eb,#7c3aed);
  display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 800; flex: 0 0 auto;
}
.m360-auth-brand-name { font-weight: 800; font-size: 17px; color: #0f172a; line-height: 1.1; }
.m360-auth-brand-sub { font-size: 12.5px; color: #64748b; }
.m360-auth-title { font-size: 21px; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.m360-auth-desc { font-size: 13.5px; color: #64748b; margin: 0 0 20px; line-height: 1.45; }
.m360-auth-error {
  display: flex; align-items: flex-start; gap: 9px; background: #fef2f2; border: 1px solid #fecaca;
  color: #b91c1c; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 16px;
}
.m360-auth-error i { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.m360-auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.m360-auth-label { font-size: 13px; font-weight: 600; color: #334155; }
.m360-auth-hint { font-size: 12px; color: #94a3b8; line-height: 1.4; }
/* Contenu de l'étape active d'un formulaire en plusieurs temps (ex : inscription citoyenne) —
   un léger fondu/glissement à chaque changement d'étape (le conteneur est remonté via sa `key`
   React = `step`, ce qui rejoue l'animation à chaque fois). Respecte prefers-reduced-motion. */
.m360-auth-stepbody { animation: m360-step-in .22s ease; }
@keyframes m360-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m360-auth-stepbody { animation: none; } }
.m360-auth-input-wrap {
  display: flex; align-items: center; gap: 9px; border: 1px solid #cbd5e1; border-radius: 11px;
  padding: 0 12px; background: #fff; transition: border-color .12s, box-shadow .12s;
}
.m360-auth-input-wrap:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
.m360-auth-input-wrap > i { font-size: 19px; color: #94a3b8; flex: 0 0 auto; }
.m360-auth-input-wrap input {
  flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit;
  font-size: 14.5px; padding: 11px 0; color: #0f172a;
}
.m360-auth-eye { border: none; background: none; cursor: pointer; color: #94a3b8; padding: 4px; display: grid; place-items: center; }
.m360-auth-eye:hover { color: #475569; }
.m360-auth-eye i { font-size: 19px; }
.m360-auth-submit {
  margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #4f46e5; color: #fff; border: none; border-radius: 11px; padding: 13px 18px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.m360-auth-submit:hover:not(:disabled) {
  background: #4338ca; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79,70,229,.32);
}
/* Retour tactile au clic : le bouton reprend sa place, plus vite qu'il ne s'est levé. */
.m360-auth-submit:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px rgba(79,70,229,.28); transition-duration: .06s; }
.m360-auth-submit:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.m360-auth-submit:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.m360-auth-submit i { font-size: 19px; }
/* Navigation entre étapes (ex : inscription en 3 temps) : Précédent + Suivant/Valider côte à
   côte, chacun prenant la moitié de la largeur quand les deux sont présents. */
.m360-auth-nav { display: flex; gap: 10px; margin-top: 8px; }
.m360-auth-nav .m360-auth-submit { flex: 1; margin-top: 0; }
.m360-auth-back {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #f1f5f9; color: #475569; border: none; border-radius: 11px; padding: 13px 16px;
  font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .12s;
}
.m360-auth-back:hover:not(:disabled) { background: #e2e8f0; color: #0f172a; }
.m360-auth-back:active:not(:disabled) { transform: translateY(1px); }
.m360-auth-back:focus-visible { outline: 3px solid #cbd5e1; outline-offset: 2px; }
.m360-auth-back:disabled { opacity: .55; cursor: not-allowed; }
.m360-auth-back i { font-size: 17px; }
.m360-auth-foot {
  display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid #f1f5f9; font-size: 12.5px; color: #94a3b8; line-height: 1.45;
}
.m360-auth-foot i { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }

/* Règles de validation du mot de passe (écran de 1ʳᵉ connexion). */
.m360-auth-rules { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.m360-auth-rules li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #94a3b8; transition: color .15s; }
.m360-auth-rules li i { font-size: 15px; }
.m360-auth-rules li.is-ok { color: #16a34a; }
/* Lien d'action discret dans le pied (ex : se déconnecter). */
.m360-auth-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
  font-size: 12.5px; color: #4f46e5; font-weight: 600; cursor: pointer;
}
.m360-auth-link { border-radius: 7px; padding: 4px 7px; margin: -4px -7px; transition: background .14s ease, color .14s ease; }
.m360-auth-link:hover:not(:disabled) { background: #eef2ff; color: #3730a3; }
.m360-auth-link:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 1px; }
/* Attente d'un renvoi : le bouton reste lisible et cesse d'inviter au clic. */
.m360-auth-link:disabled { opacity: 1; color: #94a3b8; cursor: default; background: none; }
.m360-auth-link i { font-size: 15px; }

/* Pied à deux actions : retour à GAUCHE, renvoi du code à DROITE, chacun dans son coin —
   centrés, ils se lisaient comme une seule phrase et l'on ne savait plus où cliquer. */
.m360-auth-foot--row { align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Confirmation discrète, pendant du bloc d'erreur. */
.m360-auth-ok {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 12px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
  font-size: 13px; color: #15803d;
}
.m360-auth-ok i { font-size: 16px; }

/* Champ de saisie du code PIN (écrans /set-pin et /verrou). */
.m360-pin {
  width: 100%; text-align: center; font-size: 30px; letter-spacing: 16px; font-weight: 700;
  padding: 12px 0 12px 16px; border: 1px solid #cbd5e1; border-radius: 12px;
  background: #fff; color: #0f172a; outline: none; transition: border-color .12s, box-shadow .12s;
}
.m360-pin:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
.m360-pin::placeholder { letter-spacing: 12px; color: #cbd5e1; }

/* Accessibilité : neutralise toutes les animations/transitions de la coque. */
@media (prefers-reduced-motion: reduce) {
  .m360-shell *, .m360-shell *::before, .m360-shell *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
}