@import url("./motion-v2.css?v=20261009r1");
:root {
  color-scheme: light;
  --ink: #16223d;
  --muted: #5c6672;
  --line: #dfe3ec;
  --surface: #ffffff;
  --canvas: #eef1f7;
  --accent: #e1000f;
  --accent-strong: #b40000;
  --dark: #001a4d;
  --danger: #d7302b;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow: 0 18px 50px rgba(0, 26, 77, .1);
  --surface-alt: #fafbfd;
  --surface-hover: #e7eaf1;
  --header-bg: rgba(244, 245, 248, .92);
  --bottomnav-bg: rgba(255, 255, 255, .92);
  --bottomnav-fg: var(--dark);
  --bottomnav-fg-muted: var(--muted);
  --bottomnav-active-bg: var(--dark);
  --bottomnav-active-fg: #ffffff;
  --bottomnav-shadow: 0 -8px 28px rgba(0, 26, 77, .14), 0 1px 2px rgba(0, 26, 77, .06);
}

/* Mode sombre : réservé au compte de Rémi Vasseur (js/auth.js bascule l'attribut data-theme). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8ecf5;
  --muted: #98a3b8;
  --line: #2a3450;
  --surface: #141d33;
  --canvas: #0a0f1c;
  --dark: #1c2c55;
  --danger: #ff5b56;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --surface-alt: #182440;
  --surface-hover: #202c4c;
  --header-bg: rgba(10, 15, 28, .92);
  --bottomnav-bg: rgba(20, 29, 51, .92);
  --bottomnav-fg: #e8ecf5;
  --bottomnav-active-bg: var(--accent);
  --bottomnav-active-fg: #ffffff;
  --bottomnav-shadow: 0 -8px 28px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; min-width: 0; }
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after { transition: none !important; }
.theme-toggle-btn,
.theme-toggle-btn:active { transform: none !important; transition: none; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--ink,#0b1b33);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;font-size:.85rem;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px}
.pwa-install-wrap{position:relative}
.pwa-popover{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;width:230px;z-index:30;font-size:.85rem;color:var(--ink);line-height:1.4;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96);transform-origin:top right;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.pwa-install-wrap.open .pwa-popover{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity .16s ease,transform .16s ease}
@keyframes pwa-icon-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.pwa-install-wrap .icon-btn{animation:pwa-icon-in .35s cubic-bezier(.34,1.56,.64,1) both}
@media (prefers-reduced-motion: no-preference) {
  .pwa-install-wrap .icon-btn.pwa-pulse{animation:pwa-icon-in .35s cubic-bezier(.34,1.56,.64,1) both, motion-breathe 1.7s ease-in-out .4s 3;}
}
@media (prefers-reduced-motion: reduce) {
  .pwa-install-wrap .icon-btn{animation:none}
  .pwa-popover{transition:none}
  .nav-dropdown-menu{transition:none}
}
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #c7cede; border-radius: 999px; border: 3px solid var(--canvas); }
  ::-webkit-scrollbar-thumb:hover { background: #a9b2c4; }
}

html, body { height: 100%; overscroll-behavior: none; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: -.012em;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

header.site-header { flex-shrink: 0; }
footer { flex-shrink: 0; }

header.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  border: 0;
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  /* Le fond du bandeau couvre toute la zone jusqu'à l'encoche/l'île dynamique (viewport-fit=cover),
     mais le contenu (logo, titre) reste sous la barre de statut grâce à ce coussin. */
  padding-top: env(safe-area-inset-top);
}
header.site-header::before {
  content: ""; display: block; height: 6px;
  background: linear-gradient(90deg, #001a4d 0% 33.33%, #ffffff 33.33% 66.66%, #e1000f 66.66% 100%);
}

.header-inner {
  max-width: 1440px;
  min-height: 72px;
  padding: 10px 28px;
  justify-content: flex-start;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.user-chip {
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.avatar-xs { width: 24px; height: 24px; border-radius: 8px; font-size: .62rem; flex-shrink: 0; }

.btn-logout {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}

.btn-logout:hover { border-color: var(--danger); color: var(--danger); }

.admin-link { color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--accent); }
.admin-link:hover { color: var(--accent-strong); }

.oauth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: .82rem; }
.oauth-sep::before, .oauth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }

.logo {
  color: var(--ink);
  font-size: .98rem;
  letter-spacing: -.02em;
}
.logo-trigger {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: none; border: 0; border-radius: 12px; padding: 4px 6px; margin: -4px -6px;
  font: inherit; color: inherit; text-align: left; letter-spacing: inherit; transition: background .15s;
}
.logo-trigger:hover, .logo-trigger:focus-visible { background: var(--surface-hover); }
.logo-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-user { font-size: .66rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 1px; }
.logo-countdown { font-size: .62rem; font-weight: 800; color: var(--accent); letter-spacing: .01em; margin-top: 1px; }

.logo .badge {
  width: 38px;
  height: 38px;
  background: linear-gradient(90deg, #001a4d 0% 33.33%, #ffffff 33.33% 66.66%, #e1000f 66.66% 100%);
  color: #001a4d;
  border-radius: 12px;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 1px #fff;
  border: 1px solid rgba(0,26,77,.15);
}

nav.main-nav { gap: 3px; }

.nav-legal-links { display: none; }
.nav-legal-label { display: none; }

nav.main-nav a {
  color: var(--muted);
  padding: 9px 13px;
  border-radius: 11px;
  font-size: .87rem;
  font-weight: 600;
}

nav.main-nav a:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

nav.main-nav a.active {
  background: var(--dark);
  color: #fff;
}

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--muted); padding: 9px 13px; border-radius: 11px;
  font-size: .87rem; font-weight: 600;
}
.nav-dropdown-trigger:hover { background: var(--surface-hover); color: var(--ink); }
.nav-dropdown .caret { font-size: .7em; display: inline-block; transition: transform .15s; }
.nav-dropdown.open .caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: flex; position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; min-width: 210px; flex-direction: column; gap: 2px; z-index: 30;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(.97); transform-origin: top left;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity .16s ease, transform .16s ease; }
.nav-dropdown-menu a { padding: 9px 12px; border-radius: 9px; color: var(--ink); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--surface-hover); }

.bottom-nav { display: none; }
.mobile-nav-frame { display: none; }
.mobile-native-bounds { display: none; }
.msheet-overlay { display: none; }
.mobile-top-actions { display: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); cursor: pointer; flex-shrink: 0;
  transition: transform .15s, color .15s;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--ink); }
.theme-toggle-btn:hover { transform: rotate(12deg); }
.mobile-theme-row { display: none; }

.search-overlay {
  display: none; position: fixed; inset: 0; z-index: 60;
  align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(0, 26, 77, .45);
}
.search-overlay.open { display: flex; animation: navBackdropIn .2s ease both; }
.search-modal {
  width: 100%; max-width: 560px; background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow); overflow: hidden; animation: mobileMenuIn .22s cubic-bezier(.22,.9,.32,1.1) both;
}
.search-input-row {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--line); color: var(--muted);
}
.search-input-row svg { width: 20px; height: 20px; flex-shrink: 0; }
.search-input-row input {
  flex: 1; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--ink); outline: none;
}
.search-input-row kbd {
  font-size: .72rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; font-family: inherit;
}
.search-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.search-result {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); cursor: pointer;
}
.search-result span { font-weight: 600; font-size: .92rem; }
.search-result small { color: var(--muted); font-size: .74rem; }
.search-result.active { background: var(--surface-hover); }
.search-empty { text-align: center; padding: 24px 10px; }
.msg-group-modal { display: flex; flex-direction: column; max-height: 80vh; }
.msg-group-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.msg-group-modal-head strong { font-size: 1rem; }
#msg-group-name { margin: 14px 18px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; font-size: 1rem; flex-shrink: 0; }
.msg-group-modal .search-input-row { margin-top: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.msg-group-members { flex: 1; min-height: 120px; }
.msg-group-option { cursor: pointer; }
.msg-group-option input[type="checkbox"] { width: auto; margin-right: 10px; accent-color: var(--accent-strong); }
.msg-group-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); flex-shrink: 0; }
.msg-group-modal .auth-error { margin: 0; padding: 0 18px; text-align: left; min-height: 0; }
.nav-backdrop { display: none; }
.mobile-nav-close { display: none; }
.notif-bell { position: fixed; bottom: 22px; right: 22px; z-index: 40; }
.header-actions .notif-bell { position: static; }
.header-actions .notif-trigger { width: 38px; height: 38px; font-size: 1.05rem; box-shadow: none; }
.icon-btn.messages-link { position: relative; text-decoration: none; }
.header-actions .notif-panel { position: absolute; top: calc(100% + 10px); bottom: auto; right: 0; transform-origin: top right; }
.notif-trigger {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-size: 1.35rem; box-shadow: var(--shadow);
  transition: transform .15s;
}
.notif-trigger:hover { transform: translateY(-2px); }
.notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px; padding: 0 4px;
  background: var(--accent); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--surface);
}
.notif-badge[hidden] { display: none; }
.notif-panel { left: auto; right: 0; top: auto; bottom: calc(100% + 12px); width: 320px; max-width: 90vw; padding: 0; max-height: 420px; overflow-y: auto; overflow-x: hidden; transform-origin: bottom right; transform: translateY(6px) scale(.97); }
.notif-bell.open .notif-panel { transform: translateY(0) scale(1); }
.notif-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.notif-panel-actions { display: flex; gap: 10px; }
.notif-panel-actions button { background: none; border: 0; color: var(--muted); font-size: .74rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.notif-panel-actions button:hover { color: var(--ink); text-decoration: underline; }
.notif-list { padding: 6px; }
.notif-empty { text-align: center; padding: 20px 10px; }
.notif-item { display: flex; align-items: flex-start; gap: 6px; padding: 10px 8px; border-radius: 10px; }
.notif-item.unread { background: var(--surface-alt); }
.notif-item:hover { background: var(--surface-hover); }
.notif-panel .notif-text { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; cursor: pointer; white-space: normal; }
.notif-text span { display: block; font-size: .84rem; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.notif-text small { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
.notif-delete { flex-shrink: 0; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 4px; border-radius: 6px; }
.notif-delete:hover { color: var(--danger); background: #fbe3e1; }
.nav-dropdown-menu a.active { background: var(--dark); color: #fff; }

main {
  /* Le conteneur qui défile occupe toute la largeur (la molette marche partout, les ombres ne sont plus coupées) ;
     le contenu reste centré grâce aux marges internes calculées depuis --content-max. */
  --content-max: 1440px;
  width: 100%;
  max-width: none;
  padding: 42px max(28px, calc((100% - var(--content-max)) / 2)) 80px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

h1, h2, h3 { letter-spacing: -.035em; }
h1 { color: var(--ink); font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; }
h2 { color: var(--ink); border: 0; padding: 0; }
p.lead { color: var(--muted); margin-top: 10px; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 24px;
}

.btn {
  background: var(--accent);
  border-radius: 12px;
  padding: 11px 16px;
  color: #fff;
  transition: transform .1s, background .15s;
}
.btn:hover { background: var(--accent-strong); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); transition: transform .1s, background .15s, border-color .15s; }
.btn-outline:hover { background: #eef1f6; color: var(--ink); border-color: #c7cedb; }
.btn:active, .btn-outline:active, .btn-logout:active, .btn-paypal:active { transform: scale(.96); }
.panel-accent .btn { background: #fff; color: var(--accent-strong); }
.panel-accent .btn:hover { background: #ffe3e3; }

@keyframes confettiBurst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) scale(.4); opacity: 0; }
}

input, textarea, select {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--surface-alt);
}
input:focus, textarea:focus, select:focus { border-color: #0055a4; box-shadow: 0 0 0 3px rgba(0,85,164,.2); }

/* Authentification */
.auth-shell { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; padding: 24px; background: var(--canvas); max-width: none; }
.auth-tile { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px 34px; text-align: center; }
.auth-mark { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 14px; background: linear-gradient(90deg, #001a4d 0% 33.33%, #ffffff 33.33% 66.66%, #e1000f 66.66% 100%); border: 1px solid rgba(0,26,77,.15); color: #001a4d; text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 1px #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; }
.auth-tile h1 { font-size: 1.7rem; margin: 0 0 6px; }
.auth-sub { color: var(--muted); font-size: .92rem; margin: 0 0 28px; }
.auth-form { display: grid; gap: 14px; text-align: left; }
.auth-field label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.auth-field input { width: 100%; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); cursor: pointer; }
.auth-check input { width: auto; accent-color: var(--accent-strong); }
.auth-form .btn { width: 100%; margin-top: 4px; }
.auth-error { min-height: 18px; color: var(--danger); font-size: .82rem; margin: 12px 0 0; text-align: center; }
.auth-footnote { color: var(--muted); font-size: .78rem; line-height: 1.5; margin: 18px 0 0; }
.auth-pilot { max-width: 400px; text-align: center; color: var(--muted); font-size: .78rem; }
.auth-tile .btn-outline { width: 100%; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 20px; text-align: center; }
.empty-state-icon {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  background: var(--surface-alt); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.empty-state-icon svg { width: 24px; height: 24px; }
.empty-state p { margin: 0; font-size: .88rem; color: var(--muted); max-width: 300px; line-height: 1.5; }
.empty-state-compact { padding: 22px 16px; gap: 8px; }
.empty-state-compact .empty-state-icon { width: 40px; height: 40px; border-radius: 12px; }
.empty-state-compact .empty-state-icon svg { width: 19px; height: 19px; }
.empty-state-compact p { font-size: .82rem; }
.duty-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.duty-group { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-alt); }
.duty-group h4 { margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.duty-group p { margin: 0; font-size: .84rem; }
.duty-group p + p { margin-top: 4px; }
.duty-panel { border-left: 4px solid var(--accent); }
.duty-panel .empty-state { padding: 20px 20px; }

/* « À faire » : regroupe annonces, sondages et scrutins à voter. Chaque zone se cache toute seule
   quand elle est vide (innerHTML vidé en JS) ; la carte entière disparaît si les trois le sont. */
.todo-panel:has(#announce-zone:empty):has(#poll-zone:empty):has(#election-zone:empty) { display: none; }
.todo-panel #poll-zone, .todo-panel #election-zone { margin-top: 14px; }
.panel-dark .duty-group { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.panel-dark .duty-group h4 { color: rgba(255,255,255,.55); }
.panel-dark .duty-group p { color: #fff; }
.panel-dark .empty-state-icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.panel-dark .empty-state p { color: rgba(255,255,255,.7); }

/* Dashboard */
.dashboard { --content-max: 1440px; max-width: none; position: relative; }
.dashboard::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 420px at 10% -8%, rgba(0, 38, 84, .07), transparent 62%),
    radial-gradient(560px 400px at 108% 6%, rgba(225, 0, 15, .05), transparent 60%),
    radial-gradient(500px 360px at 50% 115%, rgba(0, 38, 84, .04), transparent 65%);
}
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 34px; }
.eyebrow { margin: 0 0 10px; color: #52607a; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
:root[data-theme="dark"] .eyebrow { color: #93a0bd; }
.dash-head h1 { margin: 0; max-width: 760px; }
.dash-head .lead { margin: 12px 0 0; font-size: 1rem; }
.date-chip { flex: 0 0 auto; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-weight: 600; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: 20px; }
.stack { display: grid; gap: 20px; align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: 0 1px 2px rgba(0, 26, 77, .04); }
.panel-dark {
  background: radial-gradient(140% 140% at 0% 0%, #062559 0%, #00102b 55%, #000a1f 100%);
  color: #fff; border-color: #000a1f; box-shadow: 0 20px 44px rgba(0, 10, 31, .28);
}
.panel-accent {
  background: radial-gradient(140% 140% at 0% 0%, #b8121f 0%, #7a000d 55%, #4d0009 100%);
  border-color: #4d0009; color: #fff; box-shadow: 0 20px 44px rgba(77, 0, 9, .24);
}
.panel-accent .eyebrow, .panel-accent .muted, .panel-accent h2 { color: #fff; }
.panel-accent .pill { background: rgba(255,255,255,.22); color: #fff; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.panel-head h2 { margin: 0; font-size: 1.15rem; }
.panel-dark h2, .panel-dark .muted { color: #fff; }
.panel-dark .eyebrow { color: rgba(255,255,255,.65); }

.countdown-panel { margin-bottom: 20px; text-align: center; }
.countdown-panel .eyebrow { text-align: center; }
.countdown-grid { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 16px; }
.countdown-unit {
  display: flex; flex-direction: column; align-items: center; min-width: 84px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 16px 10px 14px;
}
.countdown-unit strong { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.countdown-unit span { margin-top: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.countdown-panel .muted { text-align: center; }
@media (max-width: 640px) {
  .countdown-unit { min-width: 60px; }
  .countdown-unit strong { font-size: 1.8rem; }
}
.text-link { color: inherit; text-decoration: none; font-size: .82rem; font-weight: 800; }
.text-link:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.next-event { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: stretch; }
.time-block { background: linear-gradient(160deg, #e1000f 0%, #9a000a 100%); color: #fff; border-radius: 20px; padding: 20px 12px; text-align: center; display: grid; place-content: center; }
.time-block strong { font-size: 1.8rem; line-height: 1; }
.time-block span { font-size: .75rem; margin-top: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.event-copy { padding: 7px 0; }
.event-copy h3 { margin: 5px 0 8px; font-size: 1.55rem; color: #fff; }
.event-copy p { margin: 0; color: #b7c3bd; }
.event-tag { display: inline-flex; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 9px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 62px 12px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline time { font-size: .83rem; font-weight: 800; }
.dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #b6bcc9; }
.dot.live { background: var(--accent-strong); box-shadow: 0 0 0 5px rgba(180,0,0,.15); }
.timeline strong { display: block; font-size: .92rem; }
.timeline small { color: var(--muted); }
.timeline li.timeline-past { opacity: .45; }
.timeline li.timeline-past .dot { background: #b6bcc9; }
.timeline li.timeline-next .dot { background: var(--accent-strong); box-shadow: 0 0 0 5px rgba(180,0,0,.15); }
.timeline li.timeline-next strong { color: var(--accent-strong); }
.timeline li.muted { display: block; border-top: 0; padding: 0; }

.meal-name { font-size: 1.55rem; line-height: 1.08; margin: 8px 0 14px; max-width: 340px; }
.meal-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.pill { display: inline-flex; padding: 7px 10px; background: rgba(16,32,25,.09); border-radius: 999px; font-size: .74rem; font-weight: 800; }
.panel-accent .btn { width: 100%; }

.notice { display: grid; grid-template-columns: 10px 1fr; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line); }
.notice:first-of-type { border-top: 0; }
.notice-mark { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--danger); }
.notice p { margin: 3px 0 0; color: var(--muted); font-size: .86rem; }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quick-action { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--surface-alt); transition: transform .16s ease, border-color .16s ease; }
.quick-action:hover { transform: translateY(-2px); border-color: #a9b3c4; }
.quick-action span { color: var(--muted); font-size: .78rem; }
.quick-action strong { font-size: .92rem; }
.favorite-tile { position: relative; }
.favorite-unpin { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--surface); color: var(--muted); font-size: .9rem; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 26, 77, .12); }
.favorite-unpin:hover { background: var(--danger); color: #fff; }
.favorite-option { cursor: default; }
.favorite-star { border: 0; background: none; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 6px; }
.favorite-star.is-pinned { color: #e3a008; }

/* Agenda / popote */
.page-shell { --content-max: 1180px; max-width: none; }
.page-title-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.page-title-row h1 { margin: 0; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr); gap: 20px; }
.day-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px; margin-bottom: 14px; }
.day-card.today { border-color: #e1000f; box-shadow: 0 0 0 3px rgba(225,0,15,.28); }
.day-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 17px; }
.day-label h2 { margin: 0; }
.agenda-item { display: grid; grid-template-columns: 70px 5px 1fr; gap: 15px; align-items: stretch; padding: 14px 0; border-top: 1px solid var(--line); }
.agenda-item time { font-size: .84rem; font-weight: 800; }
.agenda-bar { border-radius: 99px; background: #b5bdca; }
.agenda-bar.course { background: #83bd4a; }
.agenda-bar.sport { background: #e7ad41; }
.agenda-bar.demarche { background: #4a90d9; }
.agenda-bar.permission { background: #8c4ad9; }
.agenda-item h3 { margin: 0 0 4px; font-size: .98rem; }
.agenda-item p { margin: 0; color: var(--muted); font-size: .84rem; }
.kit-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.kit-item { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); cursor: pointer; }
.kit-item input { width: auto; margin: 0; }
.kit-item:has(input:checked) { color: var(--ink); text-decoration: line-through; }
.form-stack { display: grid; gap: 16px; }
.form-stack label { display: flex; flex-direction: column; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--ink); }
.form-stack label input, .form-stack label textarea, .form-stack label select { width: 100%; font-weight: 400; font-size: .92rem; }
.form-stack label input[type="file"] { padding: 9px 10px; font-size: .84rem; }
.form-stack .btn { margin-top: 5px; }
.booking-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.booking-row:first-of-type { border-top: 0; }
.booking-row strong { display: block; }
.booking-row small { color: var(--muted); }
.debt-row { flex-wrap: wrap; align-items: flex-start; }
.debt-info { min-width: 0; flex: 1 1 200px; }
.debt-info strong { word-break: break-word; }
.debt-actions { flex-basis: 100%; margin-top: 4px; }
.debt-actions small { display: block; margin-top: 6px; }
.status { display: inline-flex; border-radius: 999px; padding: 6px 9px; font-size: .72rem; font-weight: 800; background: #e8f4df; color: #385d20; }

footer { color: var(--muted); border-top: 1px solid var(--line); background: transparent; }

@media (max-width: 960px) {
  .dash-grid, .content-grid { grid-template-columns: 1fr; }
  .dash-head { align-items: flex-start; }
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform .15s, opacity .15s;
}

.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

.header-inner.nav-open .nav-toggle span { background: transparent; }
.header-inner.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); background: var(--ink); }
.header-inner.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); background: var(--ink); }

@media (max-width: 760px) {
  .header-inner { padding: 10px 16px; flex-wrap: wrap; position: relative; }
  .logo { width: auto; }
  .nav-toggle { display: none; }
  .mobile-top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; order: 2; }
  .mobile-top-actions .icon-btn { width: 42px; height: 42px; border-radius: 12px; }
  .mobile-top-actions .icon-btn svg { width: 20px; height: 20px; }
  .mobile-theme-row {
    order: 5;
    display: none;
    align-items: center; justify-content: space-between;
    padding: 10px;
    margin-top: 8px;
    font-size: .86rem; font-weight: 700; color: var(--ink);
  }
  .header-inner.nav-open .mobile-theme-row { display: flex; }
  .mobile-top-actions .notif-bell { position: static; }
  .mobile-top-actions .notif-trigger { width: 42px; height: 42px; font-size: 1.1rem; box-shadow: none; }
  .mobile-top-actions .notif-panel { position: absolute; top: calc(100% + 10px); bottom: auto; left: auto; right: 0; width: min(320px, calc(100vw - 32px)); }
  /* L'icône d'installation est la première (donc la plus à gauche) de la rangée mobile : son popover doit
     s'ouvrir vers la droite, pas vers la gauche (sinon il déborde hors de l'écran, à moitié coupé). */
  .mobile-top-actions .pwa-popover { left: 0; right: auto; width: min(230px, calc(100vw - 32px)); transform-origin: top left; }
  nav.main-nav, .header-actions, .mobile-nav-close {
    display: none;
    width: 100%;
    order: 4;
  }
  .header-inner.nav-open nav.main-nav,
  .header-inner.nav-open .header-actions,
  .header-inner.nav-open .mobile-nav-close {
    display: flex;
    animation: mobileMenuIn .32s cubic-bezier(.22, .9, .32, 1.1) both;
  }
  .header-inner.nav-open .mobile-nav-close { animation-delay: 0s; }
  .header-inner.nav-open nav.main-nav { animation-delay: .03s; }
  .header-inner.nav-open .header-actions { animation-delay: .07s; }
  .header-inner.nav-open { background: var(--surface); box-shadow: var(--shadow); max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mobile-nav-close {
    order: 3;
    align-items: center; gap: 8px;
    margin-top: 12px; padding: 12px 10px;
    border-top: 1px solid var(--line);
    background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer;
    color: var(--ink); font-family: inherit; font-size: .86rem; font-weight: 700;
  }
  .mobile-nav-close svg { width: 18px; height: 18px; flex-shrink: 0; }
  .header-actions .search-trigger-btn, .header-actions .theme-toggle-btn { display: none; }
  nav.main-nav {
    flex-direction: column;
    gap: 2px;
  }
  nav.main-nav a { padding: 12px 10px; border-radius: 10px; }
  nav.main-nav a[href$="index.html"],
  nav.main-nav a[href$="agenda.html"],
  nav.main-nav a[href$="popote.html"],
  nav.main-nav a[href$="organigramme.html"] { display: none; }
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 12px 10px; }
  .nav-dropdown-menu { display: none; position: static; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; }
  /* Le menu du logo (Mon compte / Déconnexion) se déclenche depuis la barre du haut, pas depuis le
     menu hamburger : il doit flotter par-dessus la page comme les autres popovers de cette rangée
     (notifications, installation), pas s'afficher en ligne comme les sous-menus repliés dans le volet. */
  .logo-profile-menu { position: absolute; display: flex; box-shadow: var(--shadow); border: 1px solid var(--line); padding: 6px; min-width: 180px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.97); }
  .logo-dropdown.open .logo-profile-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
  .nav-legal-links {
    display: flex; flex-direction: column; gap: 8px;
    order: 6;
    margin-top: 14px; padding: 14px 10px 4px;
    border-top: 1px solid var(--line);
  }
  .nav-legal-label {
    display: block;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); opacity: .75;
  }
  .nav-legal-links .legal-links-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .nav-legal-links a {
    font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: none;
    padding: 2px 0;
  }
  .nav-legal-links a:hover, .nav-legal-links a:active { color: var(--ink); text-decoration: underline; }
  .nav-backdrop { display: none; }
  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 15;
    background: rgba(0, 26, 77, .45);
    animation: navBackdropIn .3s ease both;
  }
  @keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes navBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  footer { display: none; }
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    row-gap: 10px;
  }
  .header-actions .btn-logout { margin-left: auto; }
  main { padding: 28px 16px calc(86px + env(safe-area-inset-bottom)); }
  .dash-head, .page-title-row { display: block; }
  .date-chip { display: inline-flex; margin-top: 18px; }
  .panel { padding: 20px; border-radius: 22px; }
  .next-event { grid-template-columns: 76px 1fr; gap: 15px; }
  .time-block { padding: 16px 8px; }
  .event-copy h3 { font-size: 1.25rem; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-action { min-height: 82px; }
  .agenda-item { grid-template-columns: 56px 4px 1fr; gap: 11px; }
}

/* Gestion popote */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.metric{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}.metric span{display:block;color:var(--muted);font-size:.76rem;font-weight:700}.metric strong{display:block;margin-top:8px;font-size:1.6rem;letter-spacing:-.04em}.metric.alert strong{color:var(--danger)}
.popote-tabs{display:flex;gap:6px;padding:5px;margin-bottom:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface-alt);overflow-x:auto}.popote-tab{flex:1;min-width:max-content;border:0;border-radius:10px;padding:10px 13px;background:transparent;color:var(--muted);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.popote-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 10px rgba(0,26,77,.08)}.popote-view[hidden]{display:none}
.purchase-list{list-style:none;padding:0;margin:0}.purchase-item{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.purchase-item:first-child{border-top:0}.purchase-check{width:24px;height:24px;accent-color:var(--accent-strong)}.purchase-item.done strong{text-decoration:line-through;color:var(--muted)}.purchase-item small{display:block;color:var(--muted);margin-top:3px}.amount{font-weight:800;white-space:nowrap}
.request-card{padding:18px;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;background:var(--surface-alt)}.request-card-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.request-card h3{margin:0 0 5px}.request-card p{margin:8px 0 0;color:var(--muted);font-size:.86rem}.request-card p a{color:#0055a4;font-weight:700;word-break:break-word}.request-card p a:hover{text-decoration:none}
.doc-item{display:flex;gap:14px;align-items:flex-start;border-left-width:4px}
.doc-item.is-pdf{background:rgba(225,0,15,.055);border-color:rgba(225,0,15,.22);border-left-color:var(--accent)}
.doc-item.is-image{background:rgba(0,26,77,.045);border-color:rgba(0,26,77,.2);border-left-color:var(--dark)}
.doc-item.is-note{background:var(--canvas);border-color:var(--line);border-left-color:#b7bfcf}
.doc-item-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.doc-item-icon svg{width:21px;height:21px}
.doc-item-icon.is-pdf{background:rgba(225,0,15,.1);color:var(--accent-strong)}
.doc-item-icon.is-image{background:rgba(0,26,77,.08);color:var(--dark)}
.doc-item-icon.is-note{background:var(--canvas);color:var(--muted)}
.doc-item-body{flex:1;min-width:0}
.doc-item-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-item-title-row h3{margin:0}

/* Galerie Photos & vidéos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-card { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0; background: var(--surface-alt); cursor: pointer; opacity: 0; transform: translateY(10px) scale(.97); animation: photo-card-in .5s cubic-bezier(.22,.9,.32,1.1) forwards; animation-delay: calc(var(--i, 0) * 45ms); transition: transform .25s ease, box-shadow .25s ease; }
.photo-card:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 28px -14px rgba(10,20,40,.35); z-index: 1; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,.9,.32,1.1); }
.photo-card:hover img { transform: scale(1.08); }
.photo-card-video { display: grid; place-items: center; background: var(--dark); color: #fff; }
.photo-card-play { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.18); display: grid; place-items: center; transition: transform .25s ease, background .25s ease; }
.photo-card:hover .photo-card-play { transform: scale(1.12); background: rgba(255,255,255,.3); }
.photo-card-play svg { width: 20px; height: 20px; }
.photo-card-tag { position: absolute; left: 8px; bottom: 8px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(0,0,0,.5); padding: 3px 7px; border-radius: 999px; }
@keyframes photo-card-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .photo-card { animation: none; opacity: 1; transform: none; } }

/* Bandeau "À la une" : fondu enchaîné plein format avec effet Ken Burns */
.photo-hero { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 21/9; background: var(--dark); box-shadow: 0 20px 44px -22px rgba(10,20,40,.45); }
.photo-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; cursor: pointer; }
.photo-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.photo-hero-slide img, .photo-hero-slide video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .photo-hero-slide.is-active img, .photo-hero-slide.is-active video { animation: photo-hero-kenburns 7s ease-out forwards; }
}
@keyframes photo-hero-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
.photo-hero-info { position: absolute; inset: auto 0 0 0; padding: 28px 24px 18px; background: linear-gradient(0deg, rgba(5,10,25,.82), transparent); color: #fff; }
.photo-hero-info p { margin: 0; font-weight: 700; font-size: 1rem; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.photo-hero-dots { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 7px; }
.photo-hero-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.photo-hero-dot.is-active { background: #fff; transform: scale(1.25); }
.photo-hero-nav { position: absolute; top: 0; bottom: 0; width: 15%; border: 0; background: transparent; cursor: pointer; opacity: 0; transition: opacity .2s ease; color: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.photo-hero:hover .photo-hero-nav, .photo-hero-nav:focus-visible { opacity: 1; }
.photo-hero-nav.prev { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent); }
.photo-hero-nav.next { right: 0; background: linear-gradient(-90deg, rgba(0,0,0,.25), transparent); }
@media (max-width: 760px) { .photo-hero { aspect-ratio: 4/3; } .photo-hero-nav { width: 20%; opacity: 1; } }

.photo-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; background: rgba(8, 12, 24, .92); }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox-media { max-width: min(92vw, 900px); max-height: 72vh; display: flex; align-items: center; justify-content: center; }
.photo-lightbox-media img, .photo-lightbox-media video { max-width: 100%; max-height: 72vh; border-radius: 12px; display: block; }
.photo-lightbox-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; color: #fff; text-align: center; max-width: 92vw; }
.photo-lightbox-info p { margin: 0; font-size: .86rem; opacity: .85; }
.photo-lightbox-info .btn-outline { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.photo-lightbox-info .btn-outline:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); color: #fff; }
.photo-lightbox-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; cursor: pointer; }
.photo-lightbox-close:hover { background: rgba(255,255,255,.22); }
.status.pending{background:#fff1d8;color:#805c16}.status.approved{background:#e8f4df;color:#385d20}
.org-tier { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 4px; }
.org-tier-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.org-connector { width: 2px; height: 24px; background: var(--line); margin: 0 auto; }
.org-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.org-row-small { margin-top: 8px; }
.org-person {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 14px 10px 10px; min-width: 190px; box-shadow: 0 1px 3px rgba(0,26,77,.06);
}
.org-person-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.org-person-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  background: var(--dark); display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 900; color: #fff;
}
.org-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.org-person-avatar-col .grade-badge { width: 20px; height: 20px; }
.org-person-avatar-col .grade-badge svg { width: 20px; height: 20px; }
.org-person-info { min-width: 0; }
.org-tier-cadres .org-person { background: var(--dark); border-color: var(--dark); color: #fff; }
.org-tier-cadres .org-person small, .org-tier-cadres .org-contact { color: rgba(255,255,255,.7); }
.org-tier-cadres .org-person-avatar { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.org-tier-cadres .org-role-pill { background: rgba(255,255,255,.16); color: #fff; }
.org-message-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 10px; margin-left: auto;
  background: rgba(0, 26, 77, .07); color: var(--dark); transition: background .15s, color .15s;
}
.org-message-btn:hover { background: var(--dark); color: #fff; }
.org-tier-cadres .org-message-btn { background: rgba(255,255,255,.16); color: #fff; }
.org-tier-cadres .org-message-btn:hover { background: #fff; color: var(--dark); }
.org-person strong { display: block; font-size: .88rem; overflow-wrap: anywhere; }
.org-contact { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.org-person-name { display: flex; align-items: center; gap: 6px; }
.org-role-pill {
  display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  background: rgba(0, 26, 77, .07); color: var(--dark); font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.grade-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; border-radius: 7px; box-shadow: 0 2px 5px rgba(10,20,40,.3); }
.grade-badge svg { display: block; }
.person-card h3 { display: flex; align-items: center; gap: 7px; }
.org-platoon-block { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; width: 100%; margin-bottom: 14px; }
.org-platoon-block:last-child { margin-bottom: 0; }
.org-platoon-block h3 { margin: 0 0 12px; font-size: 1rem; }
.org-plain-count { margin: 10px 0 0; font-size: .78rem; }
.org-general-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; width: 100%; text-align: center; }
.org-general-role { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.org-general-role h4 { margin: 0 0 10px; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.org-general-role .org-row { flex-direction: column; align-items: stretch; gap: 6px; }
.org-general-role .org-person { width: 100%; min-width: 0; }
.platoon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.platoon{padding:18px;border:1px solid var(--line);border-radius:18px}.platoon h3{margin:0 0 10px}.manager{padding:7px 0;color:var(--muted);font-size:.86rem}.manager::before{content:"•";color:var(--accent-strong);margin-right:8px}.stock-line{display:grid;grid-template-columns:1fr 100px;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}.stock-line:first-of-type{border-top:0}.stock-line input{width:100%}
@media(max-width:760px){.metric-grid,.platoon-grid{grid-template-columns:1fr}}

.demo-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.demo-banner strong{display:block}.demo-banner small{color:var(--muted)}.demo-label{display:inline-flex;padding:5px 8px;border-radius:999px;background:#fff1d8;color:#805c16;font-size:.68rem;font-weight:900;letter-spacing:.08em}
.command-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px}.command-card{background:var(--dark);color:#fff;border-radius:18px;padding:17px}.command-card.company{background:var(--accent);color:var(--dark)}.command-card span{display:block;font-size:.7rem;opacity:.68;text-transform:uppercase;letter-spacing:.08em}.command-card strong{display:block;margin-top:8px;font-size:.9rem}.directory-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.directory-tools input{flex:1;min-width:220px}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.person-card{padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.person-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.person-avatar-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}.person-avatar-col .grade-badge{width:20px;height:20px}.person-avatar-col .grade-badge svg{width:20px;height:20px}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--dark);color:#fff;font-size:.78rem;font-weight:900;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar-lg{width:84px;height:84px;border-radius:22px;font-size:1.6rem}
.avatar-editor{display:flex;align-items:center;gap:18px;margin:14px 0}
.avatar-editor-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.avatar-editor-actions label.btn-outline{cursor:pointer}.person-card h3{margin:10px 0 3px;font-size:1rem}.role-list{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0}.role-chip{padding:5px 7px;border-radius:999px;background:var(--surface-alt);color:var(--muted);font-size:.67rem;font-weight:800}.person-contact{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:.76rem;color:var(--muted)}.person-message-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;padding:9px;font-size:.82rem;font-weight:700;text-decoration:none}.test-account{width:100%;margin-top:8px}.permission-note{margin:0 0 16px;padding:12px 14px;border-radius:13px;background:#fff1d8;color:#725315;font-size:.82rem}
@media(max-width:960px){.command-grid{grid-template-columns:repeat(2,1fr)}.people-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.command-grid,.people-grid{grid-template-columns:1fr}.demo-banner{align-items:flex-start;flex-direction:column}}

.service-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;margin-bottom:20px}.duty-big{padding:26px;border-radius:24px;background:var(--dark);color:#fff}.duty-big h2{color:#fff;font-size:2rem;margin:8px 0}.duty-big p{color:#b9c5be}.duty-time{display:flex;gap:8px;flex-wrap:wrap}.duty-time .pill{background:rgba(255,255,255,.1);color:#fff}.rotation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.rotation-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.rotation-card.active{background:var(--accent);border-color:var(--accent)}.rotation-card h3{margin:7px 0}.task-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.task-column{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-alt)}.task-column h3{margin:0 0 13px}.task-person{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:.84rem}.task-person:first-of-type{border-top:0}.service-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media(max-width:960px){.service-hero{grid-template-columns:1fr}.rotation-grid{grid-template-columns:repeat(2,1fr)}.task-board{grid-template-columns:1fr}}@media(max-width:600px){.rotation-grid{grid-template-columns:1fr}}

.assistant-messages{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto;padding:4px 2px 12px;margin-bottom:14px}
.assistant-msg{max-width:80%;padding:12px 15px;border-radius:16px;font-size:.9rem;line-height:1.45}
.assistant-msg p{margin:0;white-space:pre-wrap}
.assistant-msg-bot{align-self:flex-start;background:var(--surface-alt);border:1px solid var(--line);border-bottom-left-radius:4px}
.assistant-msg-user{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:4px}
.assistant-msg a{
  display:inline-flex;align-items:center;gap:5px;margin:2px 0;padding:5px 10px;
  border-radius:999px;text-decoration:none;font-weight:700;font-size:.86em;
  background:rgba(0,85,164,.12);color:#0055a4;transition:background .15s;
}
.assistant-msg a:hover{background:rgba(0,85,164,.2)}
.assistant-msg a::before{content:"↗";font-weight:900}
.assistant-msg-user a{background:rgba(255,255,255,.18);color:#fff}
.assistant-msg-user a:hover{background:rgba(255,255,255,.28)}
.assistant-form{display:flex;gap:10px;align-items:flex-end}
.assistant-form textarea{flex:1;resize:vertical;min-height:44px}
@media(max-width:640px){.assistant-msg{max-width:92%}}

.assistant-widget-btn{
  position:fixed; right:20px; bottom:24px; z-index:55;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,26,77,.35); transition:transform .15s;
}
.assistant-widget-btn:hover{transform:scale(1.06)}
.assistant-widget-btn svg{width:26px;height:26px}
.assistant-widget-panel{
  position:fixed; right:20px; bottom:90px; z-index:55;
  width:min(360px, calc(100vw - 32px)); max-height:min(560px, calc(100vh - 140px));
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;
}
.assistant-widget-panel[hidden]{display:none}
.assistant-widget-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.assistant-widget-close{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:12px;background:none;
  color:var(--muted);font-size:1.1rem;cursor:pointer;flex-shrink:0;
}
.assistant-widget-close:hover,.assistant-widget-close:active{background:var(--surface-hover);color:var(--ink)}
.assistant-widget-panel .assistant-messages{flex:1;max-height:none;padding:14px}
.assistant-widget-panel .assistant-form{padding:12px 14px;border-top:1px solid var(--line);margin:0}
.assistant-widget-panel .assistant-form textarea{font-size:.9rem}
.assistant-widget-backdrop{display:none}
@media (max-width:760px){
  .assistant-widget-btn{bottom:calc(96px + env(safe-area-inset-bottom))}
  .assistant-widget-backdrop{
    display:none; position:fixed; inset:0; z-index:54;
    background:rgba(0,26,77,.45);
  }
  .assistant-widget-backdrop.open{display:block; animation:navBackdropIn .25s ease both}
  .assistant-widget-panel{
    position:fixed; z-index:55;
    left:12px; right:12px; bottom:calc(88px + env(safe-area-inset-bottom)); top:auto; width:auto;
    max-height:min(60vh, calc(100vh - 240px));
    border-radius:22px;
    animation:assistantSheetIn .25s cubic-bezier(.22,.9,.32,1.1) both;
  }
  .assistant-widget-panel[hidden]{display:none;animation:none}
  .assistant-widget-panel .assistant-form textarea{font-size:16px}
}
@keyframes assistantSheetIn{
  from{transform:translateY(24px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* ---- Annonces (tableau de bord) ---- */
.announce-panel { display: grid; gap: 10px; padding: 16px 18px; }
.announce { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-alt); }
.announce-row { display: flex; align-items: flex-start; gap: 10px; }
.announce-mark { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: .8rem; background: #dbe7fb; color: #0b3a8c; }
.announce-important { background: #fff1f1; border-color: #f3b9bd; }
.announce-important .announce-mark { background: var(--accent); color: #fff; }
.announce-message { flex: 1; min-width: 0; margin: 2px 0 0; font-weight: 600; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.announce-del { flex: 0 0 auto; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 8px; }
.announce-del:hover { background: var(--surface-hover); color: var(--accent-strong); }
.announce-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-left: 36px; }
.announce-meta-text { color: var(--muted); font-size: .84rem; }
.announce-form-wrap summary { cursor: pointer; font-weight: 700; font-size: .86rem; color: var(--accent-strong); padding: 4px 2px; }
.announce-form { display: grid; gap: 10px; margin-top: 10px; }
.announce-form textarea { width: 100%; resize: vertical; }
.announce-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.announce-notify { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.announce-notify input { width: auto; }
.announce-error { margin: 0; min-height: 0; }

/* ---- Appel ---- */
.appel-day { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.appel-day[hidden] { display: none; }
.appel-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.appel-chip { padding: 7px 12px; border-radius: 999px; font-size: .82rem; background: var(--surface-alt); border: 1px solid var(--line); }
.appel-chip b { font-size: 1rem; }
.appel-chip.st-present { background: #e6f6ec; border-color: #b6e0c5; color: #14602f; }
.appel-chip.st-retard { background: #fff4de; border-color: #f0d49a; color: #7a5200; }
.appel-chip.st-absent { background: #fdeaea; border-color: #f0b4b4; color: #9b1c1c; }
.appel-chip.st-excuse { background: #e8eefb; border-color: #bccaee; color: #1d3f8a; }
.appel-platoon { margin-top: 16px; }
.appel-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.appel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.appel-row:first-of-type { border-top: 0; }
.appel-name { font-weight: 700; overflow-wrap: anywhere; }
.appel-buttons { display: flex; gap: 6px; }
.appel-btn { display: grid; place-items: center; gap: 0; min-width: 52px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; line-height: 1.1; }
.appel-btn span { font-weight: 900; font-size: .95rem; }
.appel-btn small { font-size: .62rem; font-weight: 700; }
.appel-btn.st-present.on { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.appel-btn.st-retard.on { background: #e0a100; border-color: #e0a100; color: #fff; }
.appel-btn.st-absent.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.appel-btn.st-excuse.on { background: #2f5fc4; border-color: #2f5fc4; color: #fff; }
.appel-note { grid-column: 1 / -1; width: 100%; }
@media (max-width: 560px) {
  .appel-row { grid-template-columns: 1fr; }
  .appel-buttons { width: 100%; }
  .appel-btn { flex: 1; min-width: 0; padding: 10px 4px; }
}

/* ---- Sondages ---- */
.poll-meta { margin: 0 0 12px; font-size: .82rem; }
.poll-options { display: grid; gap: 8px; }
.poll-option { position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; cursor: pointer; overflow: hidden; }
.poll-option:disabled { cursor: default; }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(0, 26, 77, .08); transition: width .5s cubic-bezier(.2,.8,.2,1); z-index: 0; }
.poll-option.mine { border-color: var(--accent); }
.poll-option.mine .poll-bar { background: rgba(225, 0, 15, .14); }
.poll-label, .poll-count { position: relative; z-index: 1; }
.poll-label { font-weight: 700; overflow-wrap: anywhere; }
.poll-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.poll-hint { margin: 10px 0 0; font-size: .78rem; }
.poll-check { display: flex; align-items: center; gap: 8px; flex-direction: row !important; font-weight: 600 !important; }
.poll-check input { width: auto !important; }

/* ---- Administration ---- */
.admin-title-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-title-actions .btn-outline { text-decoration: none; display: inline-flex; align-items: center; }

/* ---- Hors connexion ---- */
.offline-banner { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 90; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: #1b2540; color: #fff; font-size: .8rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 26, 77, .3); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; pointer-events: none; text-align: center; opacity: 0; visibility: hidden; }
.offline-banner.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
@media (max-width: 760px) { .offline-banner { bottom: 96px; } }

.recap-details summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.recap-tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }

/* ---- Haut du tableau de bord : rythme vertical et blocs redessinés ---- */
.dashboard { display: grid; grid-auto-rows: max-content; gap: 22px; align-content: start; }
.dashboard > * { min-width: 0; }
.dash-head { margin-bottom: 4px; }
#announce-zone:empty { display: none; }
.countdown-panel { margin-bottom: 0; }

/* Annonces : cartes autonomes + bouton discret pour publier */
.announce-zone-inner { display: grid; gap: 12px; justify-items: start; }
.announce-zone-inner > .announce { width: 100%; }
.announce { background: var(--surface); box-shadow: 0 8px 22px rgba(0, 26, 77, .06); padding: 14px 16px; border-radius: 18px; }
.announce-important { background: linear-gradient(120deg, #fff2f3 0%, #ffffff 65%); border-color: #f1c4c8; }
.announce-mark { width: 30px; height: 30px; }
.announce-zone-inner .announce-meta { padding-left: 40px; }
.announce-add { width: 100%; }
.announce-add summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 16px; border: 1.5px dashed #bcc5d9; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: .84rem; transition: border-color .2s, color .2s, background .2s; user-select: none; }
.announce-add summary::-webkit-details-marker { display: none; }
.announce-add summary::before { content: "+"; font-size: 1.15rem; line-height: 1; color: var(--accent); font-weight: 900; }
.announce-add summary:hover { border-color: var(--accent); color: var(--accent-strong); background: #fff; }
.announce-add[open] summary { margin-bottom: 12px; border-style: solid; border-color: var(--line); background: #fff; }
.announce-add[open] summary::before { content: "–"; }
.announce-add .announce-form { margin: 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 34px rgba(0, 26, 77, .08); }

/* Élève de jour : cartes avec avatar */
.duty-panel { border-left: 1px solid var(--line); padding: 22px 24px 24px; }
.duty-panel .panel-head { margin-bottom: 16px; }
.duty-chip { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.duty-groups { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.duty-group { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 18px; }
.duty-group .avatar { width: 44px; height: 44px; border-radius: 15px; flex-shrink: 0; font-size: .82rem; }
.duty-group.is-company { background: linear-gradient(125deg, #fff2f3 0%, #ffffff 70%); border-color: #f1c4c8; }
:root[data-theme="dark"] .duty-group.is-company { background: linear-gradient(125deg, #2c1820 0%, #1c2c55 70%); border-color: #5a2d38; }
.duty-group.is-company .avatar { background: var(--accent); }
.duty-body { min-width: 0; }
.duty-group h4 { margin: 0 0 3px; }
.duty-group .duty-name { margin: 0; font-size: .96rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }

/* Compte à rebours : grand format, séparateurs, drapeau */
.countdown-panel { padding: 34px 28px 30px; }
.flag-bar { display: block; width: 56px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: linear-gradient(90deg, #4f7bd9 0 33.3%, #ffffff 33.3% 66.6%, #e1000f 66.6% 100%); }
.countdown-grid { gap: 28px; margin: 18px 0 22px; }
.countdown-unit { position: relative; min-width: 104px; padding: 18px 16px 14px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); }
.countdown-unit strong { font-size: 3.1rem; }
.countdown-unit:not(:last-child)::after { content: ":"; position: absolute; right: -20px; top: 15px; font-size: 2.3rem; font-weight: 900; line-height: 1.3; color: rgba(255, 255, 255, .32); }
.countdown-panel .muted { max-width: 660px; margin: 0 auto; color: rgba(255, 255, 255, .78); font-size: .92rem; line-height: 1.5; }
@media (max-width: 640px) {
  .dashboard { gap: 16px; }
  .countdown-panel { padding: 26px 16px 24px; }
  .countdown-grid { gap: 20px; }
  .countdown-unit { min-width: 62px; padding: 12px 8px 10px; border-radius: 16px; }
  .countdown-unit strong { font-size: 1.9rem; }
  .countdown-unit:not(:last-child)::after { right: -14px; top: 10px; font-size: 1.5rem; }
  .duty-panel { padding: 18px; }
}
@media (max-width: 640px) {
  .countdown-grid { flex-wrap: nowrap; gap: 16px; }
  .countdown-unit { min-width: 0; flex: 1 1 0; padding: 12px 4px 10px; }
  .countdown-unit strong { font-size: 1.75rem; }
  .countdown-unit:not(:last-child)::after { right: -12px; top: 12px; font-size: 1.3rem; }
}

/* ---- Prochain rendez-vous : disposition verticale sur téléphone ---- */
@media (max-width: 760px) {
  .next-event { grid-template-columns: 1fr; gap: 14px; }
  .time-block { grid-auto-flow: column; justify-content: space-between; align-items: center; text-align: left; padding: 14px 18px; border-radius: 18px; }
  .time-block strong { font-size: 2.1rem; }
  .time-block span { margin-top: 0; text-align: right; font-size: .72rem; }
  .event-copy { padding: 0; }
  .event-copy h3 { font-size: 1.2rem; overflow-wrap: anywhere; }
}

/* ---- Rappel des sondages et scrutins sans réponse (tableau de bord) ---- */
#poll-zone:empty, #election-zone:empty { display: none; }
.poll-nudge-list { display: grid; gap: 12px; }
.poll-nudge { padding: 18px 20px; border-radius: 22px; border: 1px solid #c9d6f2; background: linear-gradient(125deg, #eef3ff 0%, #ffffff 70%); box-shadow: 0 8px 22px rgba(0, 26, 77, .06); }
.poll-nudge-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.poll-nudge-tag { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1d3f8a; background: #dbe6fb; padding: 4px 10px; border-radius: 999px; }
.poll-nudge-left { font-size: .76rem; color: var(--muted); }
.poll-nudge h3 { margin: 6px 0 12px; font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.poll-nudge-options { display: flex; flex-wrap: wrap; gap: 8px; }
.poll-nudge-options button, .poll-nudge-more { font: inherit; font-weight: 700; font-size: .86rem; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #b8c7ea; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.poll-nudge-options button:hover, .poll-nudge-more:hover { border-color: var(--accent); color: var(--accent-strong); }
.poll-nudge-options button:disabled { opacity: .55; cursor: default; }
.poll-nudge-more { display: inline-block; border-style: dashed; color: var(--muted); }

.panel-head .text-link { white-space: nowrap; flex-shrink: 0; }

/* Photo de profil : boutons arrondis (au lieu de boutons carrés) */
.avatar-editor-actions label.btn-outline,
.avatar-editor-actions .btn-danger{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;font:inherit;font-size:.9rem;font-weight:700;line-height:1;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,border-color .2s,color .2s}
.avatar-editor-actions label.btn-outline{background:#0f1b3d;color:#fff;border:1.5px solid #0f1b3d;box-shadow:0 8px 20px rgba(15,27,61,.22)}
.avatar-editor-actions label.btn-outline::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat}
.avatar-editor-actions label.btn-outline:hover{background:#1b2a57;border-color:#1b2a57;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,27,61,.3)}
.avatar-editor-actions .btn-danger{background:#fff;color:#c0000e;border:1.5px solid #f1b8bd}
.avatar-editor-actions .btn-danger::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
.avatar-editor-actions .btn-danger:hover{background:#c0000e;border-color:#c0000e;color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(192,0,14,.28)}
.avatar-editor-actions .btn-danger[hidden]{display:none}
.avatar-editor-actions label.btn-outline:active,.avatar-editor-actions .btn-danger:active{transform:translateY(0) scale(.97)}

/* En-tête : tout sur une seule ligne sur ordinateur */
@media (min-width:961px){
  .header-inner{max-width:1760px;flex-wrap:nowrap;gap:12px}
  nav.main-nav{flex-wrap:nowrap;min-width:0}
  nav.main-nav a,.nav-dropdown-trigger{white-space:nowrap;padding-left:11px;padding-right:11px}
  /* Les entrées gardent leur nom entier (plus de « Organigramm » coupé) ; le logo reste sur une ligne. */
  nav.main-nav > a,nav.main-nav > .nav-dropdown{flex-shrink:0}
  .logo-title{white-space:nowrap}
  .header-actions{flex-shrink:0;gap:12px}
  .user-chip-dropdown .nav-dropdown-menu{left:auto;right:0;transform-origin:top right}
}
@media (min-width:961px) and (max-width:1699px){
  .header-actions .user-chip:not(.admin-link) > span:last-child{display:none}
}
@media (min-width:961px) and (max-width:1250px){
  nav.main-nav a,.nav-dropdown-trigger{padding-left:8px;padding-right:8px;font-size:.82rem}
  .header-actions .admin-link{font-size:.76rem}
}

/* Notifications push */
.push-state{margin-left:auto;padding:6px 12px;border-radius:999px;background:#eef1f6;color:var(--muted);font-size:.78rem;font-weight:700;white-space:nowrap}
.push-state.is-on{background:#e5f6ec;color:#12683a}
.push-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.push-actions .btn,.push-actions .btn-danger{border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer}
.push-actions [hidden]{display:none}

/* Avatar + nom cliquables vers « Mon compte » */
.user-chip-link{padding:5px 14px 5px 5px;border-radius:999px;border:1px solid transparent;color:var(--ink);text-decoration:none;font-weight:700;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;background:none;font:inherit;cursor:pointer}
.user-chip-dropdown{position:relative}
.user-chip-dropdown .nav-dropdown-menu{left:auto;right:0;min-width:180px;transform-origin:top right}
.user-chip-link .avatar-xs{width:34px;height:34px;border-radius:50%;font-size:.7rem;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(15,27,61,.14);transition:box-shadow .2s}
.user-chip-link:hover{background:var(--surface-hover,#eef1f6);border-color:var(--line);transform:translateY(-1px)}
.user-chip-link:hover .avatar-xs,.user-chip-link.is-current .avatar-xs{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #e1000f}
.user-chip-link.is-current{background:var(--surface-hover,#eef1f6)}
@media (min-width:961px) and (max-width:1699px){
  .header-actions a.user-chip.user-chip-link > span:last-child{display:inline}
  .header-actions .user-chip-link{padding-right:5px}
}
@media (min-width:961px) and (max-width:1499px){
  .header-actions a.user-chip.user-chip-link > span:last-child{display:none}
}

/* Logo de la 3e compagnie : l'écu remplace la pastille « C » partout (en-tête, connexion, inscription). */
.logo .badge, .auth-mark {
  background: url("/assets/logo/logo-patch-256.webp") center / contain no-repeat !important;
  color: transparent !important; font-size: 0 !important; text-shadow: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;

}
.logo .badge { width: 50px; height: 50px; flex-shrink: 0; }
.auth-mark { width: 104px; height: 104px; margin: 0 auto 14px; }
.fl-top .auth-mark { width: 60px; height: 60px; margin: 0; }

/* Page de connexion : formulaire « PIN oublié » masqué par défaut, boutons-liens propres */
.auth-form[hidden], form[hidden], [hidden].auth-form { display: none !important; }
.auth-tile a.btn { text-decoration: none; }
.auth-tile a.btn:not(.btn-google) { display: block; width: 100%; box-sizing: border-box; text-align: center; }

/* Pages de connexion : centrage « sûr » — si la carte est plus haute que l'écran, on peut remonter tout en haut (le logo n'est plus coupé) */
.auth-shell { justify-content: flex-start; overflow-y: auto; }
.auth-shell > :first-child { margin-top: auto; }
.auth-shell > :last-child { margin-bottom: auto; }

/* Annonces datées : date précise + mini compte à rebours */
.announce-when { color: var(--ink); text-transform: capitalize; }
.announce-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #eef2ff; color: #0f1b3d; font-size: .76rem; white-space: nowrap; transition: background .4s, color .4s; }
.announce-count-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.announce-count-label { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.announce-count-label:empty { display: none; }
.announce-count-value { font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.announce-count[data-state="soon"] { background: #fff0f1; color: #b10013; }
.announce-count[data-state="soon"] .announce-count-dot { animation: announce-dot-pulse 1.4s ease-in-out infinite; opacity: 1; }
.announce-count[data-state="now"] { background: #e5f6ec; color: #12683a; }
.announce-count[data-state="now"] .announce-count-dot { animation: announce-dot-pulse 1.4s ease-in-out infinite; opacity: 1; }
@keyframes announce-dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(2.1); opacity: .35; } }
.announce-datetime { display: grid; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--ink); }
.announce-datetime small { font-weight: 500; color: var(--muted); }
.announce-datetime input { max-width: 280px; }
@media (prefers-reduced-motion: reduce) { .announce-count-dot { animation: none !important; } }

/* ===== Infos pratiques, checklist, vie de promo ===== */
.info-panel { margin-bottom: 18px; }
.info-hero { display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 26px 28px; margin-bottom: 18px; border-radius: 24px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #1b3a8a 0%, #0c2160 55%, #050f33 100%); box-shadow: 0 18px 40px rgba(5, 15, 51, .28); position: relative; overflow: hidden; }
.info-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, #001a4d 0 33.3%, #fff 33.3% 66.6%, #e1000f 66.6%); }
.info-hero h2 { margin: 4px 0 10px; font-size: 1.5rem; color: #fff; }
.info-hero p { margin: 0 0 8px; color: rgba(255, 255, 255, .88); line-height: 1.55; max-width: 62ch; }
.info-hero .muted { color: rgba(255, 255, 255, .62); }
.info-hero .eyebrow { color: #e3bf5a; }
.info-count { flex: 0 0 auto; display: grid; place-items: center; min-width: 120px; padding: 14px 18px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); text-align: center; line-height: 1.1; }
.info-count strong { font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.info-count span { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 800; }

.check-progress { height: 10px; border-radius: 99px; background: #e6eaf3; overflow: hidden; margin: 6px 0 12px; }
.check-progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #0f1b3d, #3b63c9 55%, #e1000f); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.check-progress.is-complete i { background: linear-gradient(90deg, #12683a, #2fb26b); }
.check-total, .check-count { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: #eef1f6; color: var(--muted); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.check-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--surface); transition: border-color .2s, background .2s, transform .15s; }
.check-item:hover { border-color: #c5cbe0; background: #fafbff; }
.check-item input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid #9aa3b8; background: #fff; display: grid; place-items: center; transition: background .2s, border-color .2s, transform .25s; }
.check-box::after { content: ""; width: 7px; height: 13px; margin-top: -3px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.check-item input:checked + .check-box { background: #12683a; border-color: #12683a; animation: fl-pop .35s cubic-bezier(.2, .8, .2, 1); }
.check-item input:checked + .check-box::after { transform: rotate(45deg) scale(1); }
.check-item input:checked ~ .check-text b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(18, 104, 58, .5); }
.check-item input:focus-visible + .check-box { outline: 3px solid rgba(225, 0, 15, .35); outline-offset: 2px; }
.check-text b { display: block; font-weight: 700; color: var(--ink); line-height: 1.35; }
.check-text small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.4; }

.day-line { list-style: none; margin: 8px 0 12px; padding: 0 0 0 18px; border-left: 3px solid #dfe5f2; display: grid; gap: 4px; }
.day-line li { position: relative; display: flex; gap: 16px; padding: 7px 0; align-items: baseline; }
.day-line li::before { content: ""; position: absolute; left: -26px; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid #0f1b3d; }
.day-line time { flex: 0 0 150px; font-weight: 800; color: #0f1b3d; font-variant-numeric: tabular-nums; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.info-grid article { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-alt, #f7f9fc); }
.info-grid h3 { margin: 0 0 4px; font-size: .98rem; }
.info-grid p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.info-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.directory-actions { display: flex; gap: 4px; margin-top: 8px; }
.address-card { margin: 8px 0 12px; padding: 16px 18px; border-radius: 14px; background: #0f1b3d; color: #fff; font: inherit; font-weight: 600; line-height: 1.7; white-space: pre-wrap; }
.info-source { font-size: .8rem; margin-top: 4px; }

/* Vie de promo */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 5px; margin: 0 0 18px; border-radius: 999px; background: #eaeef6; width: fit-content; max-width: 100%; }
.tab { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--muted); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.tab:hover { color: var(--ink); }
.tab.is-active { background: #fff; color: #0f1b3d; box-shadow: 0 4px 12px rgba(15, 27, 61, .14); }
.promo-intro { margin: 0 0 14px; max-width: 80ch; }
.promo-add { margin-bottom: 18px; }
.promo-add > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 20px; border-radius: 999px; background: #e1000f; color: #fff; font-weight: 800; box-shadow: 0 8px 20px rgba(225, 0, 15, .28); user-select: none; }
.promo-add > summary::-webkit-details-marker { display: none; }
.promo-add > summary::before { content: "+"; font-size: 1.2rem; line-height: 1; }
.promo-add[open] > summary::before { content: "–"; }
.promo-form { display: grid; gap: 12px; margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.promo-form label { display: grid; gap: 5px; font-weight: 700; font-size: .84rem; color: var(--ink); }
.promo-form .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.promo-form .form-row > label { flex: 1 1 160px; }
.promo-form .grow { flex: 2 1 240px; }
.promo-form [hidden] { display: none !important; }
.promo-form button[type=submit] { justify-self: start; border-radius: 999px; padding: 11px 24px; }
.post-list { display: grid; gap: 12px; }
.post-card, .cagnotte-card { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 8px 22px rgba(0, 26, 77, .05); }
.cagnotte-card { display: block; }
.post-card.is-done, .cagnotte-card.is-done { opacity: .62; }
.post-main { flex: 1 1 320px; min-width: 0; }
.post-main h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.post-main p { margin: 0 0 6px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.post-message { font-weight: 600; font-size: 1rem; }
.post-main small { color: var(--muted); }
.post-when { margin-top: 6px; font-weight: 900; color: #b10013; text-transform: capitalize; font-size: .86rem; letter-spacing: .02em; }
.post-photo { display: block; max-width: 220px; max-height: 220px; width: 100%; height: auto; margin: 8px 0; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; }
.objet-contact { margin: 6px 0 0; font-weight: 700; }
.objet-contact a { color: var(--accent-strong, #b10013); text-decoration: none; }
.objet-contact a:hover { text-decoration: underline; }
.post-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.post-actions .btn, .post-actions .btn-outline, .post-actions .btn-danger, .cagnotte-pay .btn, .cagnotte-pay .btn-outline { border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .86rem; cursor: pointer; }
.chip { display: inline-block; margin: 0 6px 0 0; padding: 3px 10px; border-radius: 999px; background: #eef1f6; color: var(--muted); font-size: .72rem; font-weight: 800; }
.chip-kind { background: #e8eeff; color: #0f1b3d; }
.chip-offer, .chip-don, .chip-trouve { background: #e5f6ec; color: #12683a; }
.chip-request, .chip-recherche, .chip-perdu { background: #fff1d8; color: #8a5a00; }
.chip-vente { background: #e8eeff; color: #0f1b3d; }
.chip-done { background: #e6e8ee; color: #55607a; }
.vote-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .15s; }
.vote-btn b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.vote-btn:hover { border-color: #0f1b3d; transform: translateY(-1px); }
.vote-btn.is-on { background: #0f1b3d; border-color: #0f1b3d; color: #fff; }
.empty-state { padding: 28px; text-align: center; color: var(--muted); border: 1.5px dashed #c9d0e0; border-radius: 18px; }
.cagnotte-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cagnotte-card h3 { margin: 0; }
.cagnotte-total { margin: 8px 0 4px; font-size: 1rem; }
.cagnotte-total strong { font-size: 1.5rem; font-weight: 900; color: #0f1b3d; }
.cagnotte-pay { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0 6px; }
.pledge-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pledge-form label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .86rem; }
.pledge-form input { width: 90px; }
.link-btn { border: 0; background: none; padding: 4px 6px; color: var(--accent-strong, #b10013); font: inherit; font-size: .8rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.people { margin: 8px 0 4px; }
.people summary { cursor: pointer; font-weight: 700; font-size: .86rem; color: var(--muted); }
.people ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.people li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.election-vote-hint { margin: 10px 0 0; font-weight: 700; font-size: .86rem; color: #0f1b3d; }
.election-candidates { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.election-candidate { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); }
.election-candidate.is-mine { border-color: #0f1b3d; }
.election-candidate-name { font-weight: 700; }
.election-candidate em { color: var(--muted); font-style: normal; font-weight: 600; font-size: .82rem; }
.election-candidate-votes { display: block; margin-top: 4px; font-size: .9rem; }
.election-candidate p { margin: 6px 0 0; font-size: .86rem; }
.election-bar { margin: 8px 0 0; }
.election-expiry { margin: 2px 0 0; font-size: .84rem; }
.election-voted-note { margin: 10px 0 0; font-weight: 600; color: #12683a; }

.election-candidates.is-pickable li { opacity: 0; animation: vote-pick-in .32s cubic-bezier(.22, .9, .32, 1.1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.election-candidate-pick {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.election-candidate-pick > * { pointer-events: none; }
.election-candidate-pick .election-candidate-name { flex: 1; min-width: 0; }
.election-candidate-pick:hover, .election-candidate-pick:focus-visible { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 26, 77, .12); }
.election-candidate-pick:active { transform: translateY(0) scale(.99); }
.election-pick-arrow { flex: 0 0 auto; font-size: 1.1rem; color: var(--muted); transition: transform .15s ease, color .15s ease; }
.election-candidate-pick:hover .election-pick-arrow { transform: translateX(3px); color: var(--accent); }

.contact-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.contact-row:first-of-type { border-top: 0; padding-top: 0; }
.contact-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.contact-row-head strong { font-size: .88rem; }
.contact-status { font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.contact-status-pending { background: #fff3d6; color: #8a5a00; }
.contact-status-accepted { background: #dcf5e3; color: #1c7a3c; }
.contact-status-refused { background: #fde3e3; color: #b10013; }
.contact-decide-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .76rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s; }
.contact-decide-btn:hover { background: var(--surface-hover); border-color: #c7cedb; }
.contact-decide-btn:disabled { opacity: .5; cursor: default; }
.chip-full { background: #fde3e3; color: #b10013; }
.comment-block { margin-top: 10px; }
.comment-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: .78rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.comment-toggle:hover { border-color: var(--accent); color: var(--accent-strong); }
.comment-toggle svg { flex: 0 0 auto; opacity: .7; }
.comment-thread { margin-top: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-alt); display: grid; gap: 12px; }
.comment-thread[hidden] { display: none; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comment-empty { margin: 0; padding: 8px 0; text-align: center; color: var(--muted); font-size: .84rem; }
.comment-item { display: flex; gap: 10px; align-items: flex-start; }
.comment-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #dbe7fb; color: #0b3a8c; font-size: .66rem; font-weight: 800; }
.comment-item.is-mine .comment-avatar { background: var(--accent); color: #fff; }
.comment-bubble { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 2px 8px rgba(0, 26, 77, .05); }
.comment-bubble-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.comment-bubble-head strong { font-size: .82rem; color: #0f1b3d; }
.comment-bubble-head span { font-size: .72rem; color: var(--muted); }
.comment-bubble p { margin: 2px 0 0; font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.comment-avatar { overflow: hidden; position: relative; }
.comment-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; opacity: 0; transition: opacity .2s ease; }
.comment-avatar img.is-loaded { opacity: 1; }
.comment-form, .message-form { display: flex; gap: 8px; align-items: center; }
.comment-form input, .message-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .86rem; }
.comment-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accent); color: #fff; cursor: pointer; transition: background .15s, transform .1s; }
.comment-send:hover { background: var(--accent-strong, #b10013); }
.comment-send:active { transform: scale(.94); }
.comment-send:disabled { opacity: .5; cursor: default; }

/* Fenêtre de discussion privée ouvrable depuis n'importe quelle page (window.openChatPopup). */
.chat-popup-overlay { display: none; position: fixed; inset: 0; z-index: 70; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 26, 77, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.chat-popup-overlay.open { display: flex; animation: chat-popup-fade .2s ease; }
.chat-popup-card { width: 100%; max-width: 420px; max-height: min(620px, calc(100vh - 48px)); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; animation: vote-dialog-in .22s cubic-bezier(.22, .9, .32, 1.1) both; }
.chat-popup-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.chat-popup-head strong { flex: 1; min-width: 0; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-popup-close { flex-shrink: 0; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; }
.chat-popup-close:hover { background: var(--surface-hover); color: var(--ink); }
.chat-popup-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; margin: 0; align-content: start; }
.chat-popup-messages .comment-item { display: flex; }
.chat-popup-messages .comment-item .comment-bubble { max-width: 78%; flex: 0 1 auto; }
.chat-popup-messages .comment-item.is-mine { flex-direction: column; align-items: flex-end; }
.chat-popup-messages .comment-item.is-mine .comment-bubble { background: var(--accent); color: #fff; }
.comment-seen { font-size: .68rem; font-weight: 600; color: var(--muted); margin-top: 3px; padding-right: 2px; }
.chat-popup-form { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); margin: 0; flex-shrink: 0; }
.chat-popup-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .86rem; }
@keyframes chat-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .chat-popup-card { max-height: min(72vh, calc(100vh - 120px)); border-radius: 22px; }
  .chat-popup-form input { font-size: 16px; }
}

.vote-dialog { width: min(480px, 92vw); max-height: 86vh; border: 0; border-radius: 20px; padding: 28px 26px 26px; background: var(--surface, #fff); box-shadow: 0 30px 80px rgba(10, 20, 40, .35); animation: vote-dialog-in .28s cubic-bezier(.22, .9, .32, 1.1) both; }
.vote-dialog::backdrop { background: rgba(10, 20, 30, .55); }
.vote-dialog-close { position: absolute; top: 14px; right: 14px; border: 0; background: none; font-size: 1rem; line-height: 1; padding: 6px; cursor: pointer; color: var(--muted); }
.vote-step-warn { text-align: center; display: grid; gap: 10px; justify-items: center; }
.vote-dialog-icon { font-size: 2.4rem; margin: 0; }
.vote-step-warn h3 { margin: 0; }
.vote-step-warn p { margin: 0; color: var(--muted); }
.vote-step-warn .btn { margin-top: 6px; }
.vote-dialog-candidate-name { color: #0f1b3d; }
.vote-step-done { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 10px 0; }
.vote-dialog-check { margin: 0; font-size: 2.6rem; color: #12683a; animation: vote-check-pop .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vote-dialog-in { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vote-pick-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vote-check-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { transform: scale(1); } }
.vote-dialog [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .vote-dialog, .election-candidates.is-pickable li, .vote-dialog-check { animation: none; opacity: 1; } }
.people li > span { width: 20px; text-align: center; color: var(--muted); font-weight: 900; }
.people li.is-ok > span { color: #12683a; }
.people em { color: var(--muted); font-style: normal; }
.promo-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); z-index: 1200; max-width: min(520px, calc(100vw - 32px)); padding: 14px 20px; border-radius: 16px; background: #0f1b3d; color: #fff; font-weight: 600; line-height: 1.45; box-shadow: 0 16px 40px rgba(5, 15, 51, .4); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.promo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  .info-hero { padding: 20px; }
  .info-count { width: 100%; grid-auto-flow: column; gap: 10px; }
  .day-line time { flex-basis: 118px; }
  /* Onglets sur une seule ligne qu'on fait défiler, plutôt que plusieurs rangées dépareillées. */
  .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 12px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; font-size: .84rem; }
  .post-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .check-progress i, .check-box, .promo-toast { transition: none; } }

/* Abonnement du calendrier du téléphone (Mon compte) */
.cal-link { display: block; width: 100%; margin: 10px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #f7f9fc; color: #16223d; font: inherit; font-size: .82rem; word-break: break-all; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.cal-actions .btn, .cal-actions .btn-outline, .cal-actions .btn-danger { border-radius: 999px; padding: 10px 20px; font-weight: 700; cursor: pointer; }

/* Barre du bas (téléphone) : l'écu remplace la pastille « C » */

/* Menu « Vie de promo » : intitulés de groupes */
.nav-menu-label { display: block; padding: 10px 12px 4px; font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.nav-menu-label:first-child { padding-top: 6px; }
.nav-promo .nav-dropdown-menu { min-width: 210px; }

/* Écusson de la promo : légère ombre portée */
.logo .badge, .auth-mark { filter: drop-shadow(0 4px 10px rgba(5, 15, 51, .28)); }

/* ===== Page de connexion en largeur : l'écusson à gauche, le formulaire à droite (ordinateur) ===== */
.auth-shell.auth-wide .auth-tile.auth-split { max-width: 1020px; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); text-align: left; overflow: hidden; }
.auth-brand { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 44px 36px 50px; color: #fff; background: radial-gradient(120% 130% at 20% 0%, #061e4d 0%, #011538 55%, #010e28 100%); }
.auth-brand::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, #001a4d 0 33.3%, #fff 33.3% 66.6%, #e1000f 66.6%); }
.auth-brand .auth-mark { width: 200px; height: 200px; margin: 0 0 20px; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5)); animation: auth-float 6s ease-in-out infinite; }
.auth-brand .eyebrow { color: #e3bf5a; margin: 0 0 4px; }
.auth-brand h1 { margin: 0 0 6px; font-size: 2rem; color: #fff; }
.auth-brand-sub { margin: 0; font-weight: 700; opacity: .95; }
.auth-brand-promo { margin: 8px 0 18px; color: #e3bf5a; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .76rem; }
.auth-brand-note { max-width: 36ch; margin: 0; opacity: .82; font-size: .88rem; line-height: 1.55; }
.auth-panel { padding: 34px 40px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.auth-panel h2 { margin: 0 0 14px; font-size: 1.6rem; }
.auth-alt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.auth-alt-title { margin: 0 0 10px; text-align: center; color: var(--muted); font-size: .82rem; font-weight: 700; }
.auth-alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-alt-row .btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.auth-alt-row a.btn:not(.btn-google) { display: flex; }
.auth-panel .auth-footnote { margin: 14px 0 0; }
@keyframes auth-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 860px) {
  .auth-shell.auth-wide .auth-tile.auth-split { grid-template-columns: 1fr; max-width: 460px; }
  .auth-brand { padding: 26px 20px 30px; }
  .auth-brand .auth-mark { width: 120px; height: 120px; margin-bottom: 12px; }
  .auth-brand h1 { font-size: 1.5rem; }
  .auth-brand-promo { margin-bottom: 0; }
  .auth-brand-note { display: none; }
  .auth-panel { padding: 24px 22px; }
}
@media (max-width: 420px) { .auth-alt-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .auth-brand .auth-mark { animation: none; } }

/* Création de compte : champs sur deux colonnes dans le panneau de droite, par étape */
.auth-step.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: start; }
.auth-step[hidden] { display: none; }
.auth-grid .span-2 { grid-column: 1 / -1; }
.auth-grid .auth-field[hidden] { display: none !important; }
.auth-grid .auth-check { margin: 2px 0 0; }
.auth-grid .btn { margin-top: 2px; }
.auth-panel .auth-error { margin: 8px 0 0; }
@media (max-width: 560px) { .auth-step.auth-grid { grid-template-columns: 1fr; } }

.step-indicator { display: flex; gap: 6px; margin: 14px 0 6px; }
.step-dot { width: 24px; height: 4px; border-radius: 999px; background: var(--line); transition: background .2s, transform .2s; }
.step-dot.is-active, .step-dot.is-done { background: var(--accent); }
.step-dot.is-active { transform: scaleX(1.25); }
.step-label { margin: 0 0 16px; font-size: .82rem; font-weight: 700; color: var(--muted); overflow: hidden; }
.step-actions { display: flex; gap: 10px; margin-top: 18px; }
.step-actions .btn, .step-actions .btn-outline { flex: 1; }
.step-actions [hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .auth-step { animation: step-in-forward .32s cubic-bezier(.22, .9, .32, 1.1) both; }
  .auth-step.step-reverse { animation-name: step-in-back; }
  .step-label.pulse { animation: step-label-in .28s ease both; }
  .step-dot.is-active { animation: step-dot-pop .32s cubic-bezier(.22, .9, .32, 1.1) both; }
}
@keyframes step-in-forward { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes step-label-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes step-dot-pop { 0% { transform: scaleX(1); } 55% { transform: scaleX(1.5); } 100% { transform: scaleX(1.25); } }

/* ===== Pages « Vie de promo » : structure sobre (aucun liseré de couleur), simple filet gris sous les titres de section ===== */
.promo-zone .panel-head { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.promo-zone .poll .poll-option + .poll-option { margin-top: 6px; }
.promo-zone .promo-intro { padding: 12px 16px; border-radius: 14px; background: #f4f6fb; }

/* ===== Pages à carte centrée (connexion, inscription…) : défilement normal de la page, adapté au téléphone ===== */
body.auth-page { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; overscroll-behavior: auto; }
body.auth-page main.auth-shell { overflow: visible; flex: 1; padding: 24px 14px 18px; }
body.auth-page footer { position: static; }
.auth-footer { text-align: center; padding: 1.4rem 1rem; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.auth-footer-meta { margin: 0 0 12px; font-size: .78rem; color: var(--muted, #6b7280); }
.legal-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.legal-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted, #6b7280); font-size: .78rem; font-weight: 700; text-decoration: none; transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s, color .18s, border-color .18s, box-shadow .18s; }
.legal-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.legal-pill:hover { background: var(--ink, #0b1b33); color: #fff; border-color: var(--ink, #0b1b33); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11,27,51,.22); }
.legal-pill:active { transform: translateY(0) scale(.97); }
@media (prefers-reduced-motion: no-preference) {
  .legal-pill { opacity: 0; animation: legal-pill-in .45s cubic-bezier(.2,.8,.2,1) both; }
  .legal-pill:nth-child(1) { animation-delay: .05s; }
  .legal-pill:nth-child(2) { animation-delay: .12s; }
  .legal-pill:nth-child(3) { animation-delay: .19s; }
}
@keyframes legal-pill-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 860px) { body.auth-page main.auth-shell { padding: 14px 12px 12px; } }

/* ===== Animation d'ouverture : l'écusson apparaît, puis la page de connexion arrive ===== */
.splash { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; cursor: pointer;
  background: radial-gradient(90% 90% at 50% 38%, #06214f 0%, #011538 55%, #010b22 100%); animation: splash-out .75s cubic-bezier(.6, 0, .2, 1) 2.2s forwards; }
.splash::before { content: ""; position: absolute; width: min(110vw, 760px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(225, 0, 15, .22) 0%, rgba(1, 21, 56, 0) 62%); animation: splash-glow 2.2s ease-out both; }
.splash-patch { position: relative; width: min(64vw, 300px); aspect-ratio: 1; background: url("/assets/logo/logo-patch.webp") center / contain no-repeat; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); animation: splash-in 1.25s cubic-bezier(.2, .8, .2, 1) both; }
.splash-patch::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: splash-ring 1.6s ease-out .55s both; }
.splash-title { margin: 0; color: #fff; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; opacity: 0; animation: splash-text .8s ease 1s forwards; }
.splash-title::after { content: ""; display: block; width: 110px; height: 4px; margin: 12px auto 0; border-radius: 99px; background: linear-gradient(90deg, #1b4fc0 0 33.3%, #fff 33.3% 66.6%, #e1000f 66.6%); transform: scaleX(0); animation: splash-bar .7s cubic-bezier(.2, .8, .2, 1) 1.25s forwards; }
html.has-splash body.auth-page { overflow: hidden; }
html.has-splash .auth-tile { animation: card-in .9s cubic-bezier(.2, .8, .2, 1) 2.45s both; }
@keyframes splash-in { 0% { opacity: 0; transform: scale(.55) rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes splash-ring { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes splash-glow { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: .65; transform: scale(1); } }
@keyframes splash-text { to { opacity: .9; } }
@keyframes splash-bar { to { transform: scaleX(1); } }
@keyframes splash-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); visibility: hidden; pointer-events: none; } }
@keyframes card-in { 0% { opacity: 0; transform: translateY(34px) scale(.97); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } html.has-splash .auth-tile { animation: none; } }

/* ===== Boutons secondaires : boutons propres, au même arrondi que « + Ajouter » (contour, rouge pour supprimer) ===== */
.btn-outline, a.btn-outline, label.btn-outline, button.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 12px;
  border: 1.5px solid #c9d1e4; background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 27, 61, .07);
  transition: background .2s, border-color .2s, color .2s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
}
.btn-outline:hover, a.btn-outline:hover, label.btn-outline:hover, button.btn-outline:hover { background: #0f1b3d; border-color: #0f1b3d; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 27, 61, .22); text-decoration: none; }
.btn-outline:active { transform: translateY(0) scale(.98); }
.btn-outline:disabled { opacity: .55; cursor: default; transform: none; }
.btn-danger, button.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 12px; border: 1.5px solid #f1b8bd;
  background: #fff; color: #b10013; font: inherit; font-weight: 700; font-size: .84rem; line-height: 1.1; cursor: pointer; text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
}
.btn-danger:hover, button.btn-danger:hover { background: #c0000e; border-color: #c0000e; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(192, 0, 14, .28); }
.btn-danger:active { transform: translateY(0) scale(.98); }
.btn-danger:disabled { opacity: .55; cursor: default; transform: none; }

:root[data-theme="dark"] .btn-outline,
:root[data-theme="dark"] a.btn-outline,
:root[data-theme="dark"] label.btn-outline,
:root[data-theme="dark"] button.btn-outline {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
:root[data-theme="dark"] .btn-outline:hover,
:root[data-theme="dark"] a.btn-outline:hover,
:root[data-theme="dark"] label.btn-outline:hover,
:root[data-theme="dark"] button.btn-outline:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] button.btn-danger { background: var(--surface); border-color: #5a2d38; color: #ff8d88; }
:root[data-theme="dark"] .btn-danger:hover,
:root[data-theme="dark"] button.btn-danger:hover { background: #c0000e; border-color: #c0000e; color: #fff; }
:root[data-theme="dark"] .poll-nudge-more,
:root[data-theme="dark"] .org-open { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .push-state,
:root[data-theme="dark"] .check-total, :root[data-theme="dark"] .check-count,
:root[data-theme="dark"] .chip { background: var(--surface-alt); }

/* ===== Téléphone : en-tête de marque compact (petit écusson + titre sur une ligne) pour voir le formulaire tout de suite ===== */
.auth-brand-text { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 860px) {
  .auth-shell.auth-wide .auth-tile.auth-split { max-width: 480px; }
  .auth-brand { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; text-align: left; padding: 14px 18px 18px; }
  .auth-brand .auth-mark { width: 62px; height: 62px; margin: 0; flex: 0 0 62px; animation: none; }
  .auth-brand-text { align-items: flex-start; }
  .auth-brand .eyebrow, .auth-brand-promo, .auth-brand-note { display: none; }
  .auth-brand h1 { margin: 0; font-size: 1.3rem; }
  .auth-brand-sub { font-size: .84rem; opacity: .85; }
  .auth-brand::after { height: 4px; }
  .auth-panel { padding: 18px 20px 20px; }
  .auth-panel h2 { margin: 0 0 10px; font-size: 1.3rem; }
  .auth-panel .auth-form { gap: 10px; }
  .auth-panel .auth-field input, .auth-panel .auth-field select { padding-top: 11px; padding-bottom: 11px; }
  .auth-alt { margin-top: 12px; padding-top: 10px; }
  .auth-panel .auth-footnote { margin-top: 10px; font-size: .74rem; }
  body.auth-page main.auth-shell { padding-top: 10px; }
}

/* Menu déroulant « Vie de promo » : un bloc teinté par groupe, pastille de couleur devant le titre */
.nav-promo .nav-dropdown-menu { padding: 10px; gap: 8px; min-width: 250px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 6px; border-radius: 14px; background: #f3f5fb; }
.nav-menu-label { display: flex; align-items: center; gap: 9px; padding: 4px 8px 7px; font-size: .68rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.nav-menu-label::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #001a4d; box-shadow: 0 0 0 3px rgba(0, 26, 77, .14); }
.nav-group:nth-child(2) .nav-menu-label::before { background: #fff; box-shadow: 0 0 0 2px #001a4d; }
.nav-group:nth-child(3) .nav-menu-label::before { background: #e1000f; box-shadow: 0 0 0 3px rgba(225, 0, 15, .16); }
.nav-group a { border-radius: 9px; }
.nav-group a:hover { background: #fff; box-shadow: 0 3px 10px rgba(15, 27, 61, .08); }
.nav-group a.active { background: var(--dark); color: #fff; }
.nav-dropdown-menu a::after, .nav-dropdown-menu a::before { display: none !important; }


/* ===== Élève de jour : hiérarchie (compagnie au sommet, pelotons en dessous, reliés par des traits) ===== */
.duty-tree { --duty-line: #c3cde3; }
.duty-top { max-width: 400px; margin: 0 auto; }
.duty-top .duty-group { padding: 18px 22px; }
.duty-top .duty-group .avatar { width: 64px; height: 64px; border-radius: 20px; font-size: 1.1rem; }
.duty-top .duty-group .duty-name { font-size: 1.22rem; }
.duty-trunk { width: 2px; height: 24px; margin: 0 auto; background: var(--duty-line); }
.duty-branches { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 24px; }
.duty-branches::before { content: ""; position: absolute; top: 0; left: calc(12.5% - 1px); right: calc(12.5% - 1px); height: 2px; background: var(--duty-line); }
.duty-branch { position: relative; }
.duty-branch::before { content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: var(--duty-line); }
.duty-branch .duty-group { height: 100%; }
.duty-group.is-empty { opacity: .55; }
.duty-me { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: #e1000f; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.duty-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #e1000f; color: #fff; font-size: .6rem; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.user-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.user-chip-text .duty-tag { margin: 2px 0 0; }
@media (max-width: 900px) {
  .duty-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duty-branches::before { display: none; }
  .duty-branch::before { display: none; }
  .duty-trunk { display: none; }
  .duty-top { margin-bottom: 12px; }
}
@media (max-width: 520px) {
  .duty-top { max-width: none; }
  .duty-branches { grid-template-columns: 1fr; margin-left: 22px; padding: 0 0 0 20px; border-left: 2px solid var(--duty-line); }
  .duty-branch::before { display: block; top: 50%; left: -20px; width: 20px; height: 2px; margin: -1px 0 0; }
}


/* ===== Organigramme en arbre : encadrement, compagnie, puis quatre pelotons reliés par des traits ===== */
.org-tree { --org-line: #c3cde3; display: flex; flex-direction: column; align-items: stretch; }
.org-node { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px 20px; text-align: center; box-shadow: 0 8px 22px rgba(0, 26, 77, .05); }
.org-node-title { margin: 0 0 14px; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.org-node-title small { font-weight: 700; letter-spacing: 0; text-transform: none; }
.org-sub { margin-top: 16px; }
.org-sub h4 { margin: 0 0 9px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.org-none { margin: 0; font-size: .85rem; }
.org-trunk { width: 2px; height: 30px; margin: 0 auto; background: var(--org-line); }
.org-node-company .org-general-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.org-branches { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 30px; }
.org-branches::before { content: ""; position: absolute; top: 0; left: calc(12.5% - 1px); right: calc(12.5% - 1px); height: 2px; background: var(--org-line); }
.org-branch { position: relative; }
.org-branch::before { content: ""; position: absolute; top: -30px; left: 50%; width: 2px; height: 30px; margin-left: -1px; background: var(--org-line); }
.org-branch .org-node { height: 100%; padding: 16px 14px 18px; }
.org-branch .org-row { flex-direction: column; align-items: stretch; gap: 8px; }
.org-branch .org-person { width: 100%; min-width: 0; }
.org-branch .org-person strong { max-width: 100%; }
.org-branch .org-contact { overflow-wrap: anywhere; }
.org-node.org-tier-cadres .org-row { justify-content: center; }
@media (max-width: 1100px) {
  .org-branches { grid-template-columns: minmax(0, 1fr); margin-left: 18px; padding: 0 0 0 22px; border-left: 2px solid var(--org-line); gap: 14px; }
  .org-branches::before { display: none; }
  .org-branch::before { top: 34px; left: -22px; width: 22px; height: 2px; margin: 0; }
  .org-branch .org-row { flex-direction: row; flex-wrap: wrap; }
  .org-branch .org-person { width: auto; }
}
@media (max-width: 640px) {
  .org-node { padding: 16px 14px 18px; }
  .org-branch .org-row { flex-direction: column; }
  .org-branch .org-person { width: 100%; }
}


/* Organigramme : lisible avec une centaine d'élèves (pastilles compactes, listes repliables, annuaire par pages) */
.org-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.org-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--line); font-size: .78rem; }
.org-chip i { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0f1b3d; color: #fff; font-size: .58rem; font-style: normal; font-weight: 800; }
.org-chip b { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-chip small { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.org-general-role h4 span { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e8ecf6; color: var(--muted); font-size: .68rem; }
.org-more { margin-top: 14px; text-align: left; }
.org-more summary { cursor: pointer; list-style: none; padding: 8px 12px; border-radius: 12px; background: var(--surface-alt); border: 1px solid var(--line); font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; user-select: none; }
.org-more summary::-webkit-details-marker { display: none; }
.org-more summary::after { content: "▾"; float: right; transition: transform .2s; }
.org-more[open] summary::after { transform: rotate(180deg); }
.org-more summary span { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e8ecf6; font-size: .68rem; }
.org-more .org-chips { margin-top: 10px; justify-content: flex-start; }
.org-open { width: 100%; margin-top: 14px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid #c9d1e4; background: #fff; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.org-open:hover { background: #0f1b3d; border-color: #0f1b3d; color: #fff; }
.org-sub.org-tier-cadres .org-person { text-align: left; }
.people-more-wrap { display: flex; justify-content: center; margin-top: 18px; }

/* Organigramme : les niveaux de commandement s'ajustent à leur contenu (pas pleine largeur pour une seule carte) */
.org-tree > .org-node.org-tier-cadres { align-self: center; width: fit-content; min-width: min(380px, 100%); max-width: 100%; padding: 14px 20px 16px; }
.org-tree > .org-node.org-tier-cadres .org-sub:first-of-type { margin-top: 0; }

.contact-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.contact-link:hover { color: #0055a4; border-bottom-style: solid; }
#people-more[hidden] { display: none !important; }

/* ---------- Téléphone : barre du bas + menu en panneau ---------- */
@view-transition { navigation: none; }
@media (prefers-reduced-motion: reduce) {
  .bottom-nav.has-live-tabs::before { transition: none !important; }
}
@media (max-width: 760px) {
  html { height: auto; overscroll-behavior-y: auto; }
  /* La surface peinte doit couvrir le même écran que la navigation. Sur une
     page courte, WebKit peut garder dvh plus court que lvh après une navigation. */
  html:has(.mobile-nav-frame.is-installed) {
    height: 100lvh; min-height: 100lvh;
  }
  body:not(.app-page):not(.auth-page) {
    height: auto; min-height: 100dvh; overflow: visible;
    overscroll-behavior-y: auto;
  }
  body:not(.app-page):not(.auth-page):not(.messages-app):has(.mobile-nav-frame.is-installed) {
    min-height: 100lvh;
  }
  body:not(.app-page):not(.auth-page) > main {
    flex: none; overflow: visible;
  }
  header.site-header {
    position: sticky; top: 0; z-index: 40;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .header-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    flex-wrap: nowrap; gap: 8px;
  }
  .header-inner > .logo { flex: 1; min-width: 0; }
  .header-inner .logo-trigger { max-width: 100%; }
  .header-inner .logo .badge { width: 40px; height: 40px; }
  .header-inner .logo-title, .header-inner .logo-user {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .header-inner .logo-title { font-size: .88rem; }
  .mobile-top-actions { flex: 0 0 auto; gap: 6px; }
  .mobile-top-actions .icon-btn,
  .mobile-top-actions .notif-trigger { width: 44px; height: 44px; }
  .mobile-profile-trigger { padding: 0; }
  .mobile-profile-trigger .avatar { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; font-size: .7rem; }
  .mobile-profile-trigger .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mobile-profile-dropdown .nav-dropdown-menu {
    position: absolute; top: calc(100% + 8px); right: 0; left: auto;
    min-width: 180px; max-width: calc(100vw - 24px); padding: 6px;
    display: none; flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow); transform: none;
  }
  .mobile-profile-dropdown.open .nav-dropdown-menu { display: flex; }
  .mobile-profile-dropdown .nav-dropdown-menu a,
  .mobile-profile-dropdown .menu-logout,
  .mobile-profile-dropdown .profile-display-debug {
    display: block; min-height: 44px; padding: 12px;
    color: var(--ink); background: none; border: 0; border-radius: 9px;
    font: inherit; font-size: .86rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
  }
  .mobile-profile-dropdown .menu-logout { color: var(--danger); border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; }
  .mobile-profile-dropdown .nav-dropdown-menu a:hover,
  .mobile-profile-dropdown .menu-logout:hover { background: var(--surface-hover); }
  body:not(.app-page):not(.auth-page).msheet-open { overflow: hidden; }
  .mobile-nav-frame {
    /* Les bords fixes suivent le viewport natif du navigateur, même quand
       dvh tarde à refléter ses barres. Une hauteur dvh peut couper les labels. */
    display: block; position: fixed; inset: 0; width: 100%;
    height: auto; z-index: 45;
    transform: translateZ(0); isolation: isolate; pointer-events: none;
  }
  .mobile-nav-frame.is-installed { bottom: auto; height: 100vh; height: var(--portal-installed-height, 100lvh); }
  .mobile-native-bounds { display:block;position:fixed;inset:0;pointer-events:none;visibility:hidden; }
  .mobile-nav-frame > .bottom-nav, .msheet-overlay { pointer-events: auto; }
  .bottom-nav {
    display: flex; align-items: stretch;
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    padding: 8px 6px;
    background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(247,249,255,.72));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 26, 77, .13), 0 2px 6px rgba(0, 26, 77, .06), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.45);
  }
  .bottom-nav-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    min-height: 52px;
    padding: 2px; border: 0; border-radius: 16px; background: none; cursor: pointer;
    color: var(--bottomnav-fg-muted); font-family: inherit; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .msheet-theme-toggle, .msheet-utility-button {
    width: 100%; min-height: 44px; margin-bottom: 12px; padding: 10px 14px;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem;
  }
  .msheet-theme-toggle svg, .msheet-utility-button svg { width: 20px; height: 20px; flex-shrink: 0; }
  .msheet-install-slot .pwa-popover {
    position: static; display: none; width: 100%; margin: -4px 0 12px;
    transform: none; box-shadow: none;
  }
  .msheet-install-slot .open .pwa-popover { display: block; }
  .msheet-install-slot .icon-btn { animation: none; }
  .popote-page .pending-actions, .popote-page .recap-tools {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; gap: 10px;
  }
  .popote-page .pending-actions > button,
  .popote-page .recap-tools > button,
  .popote-page .recap-tools > select,
  .popote-page .debt-actions > button {
    width: 100%; min-height: 44px; margin: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: normal;
  }
  .popote-page .debt-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .popote-page .popote-payment-buttons {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch !important;
  }
  .popote-page .popote-payment-buttons > a {
    width: 100%; min-height: 48px; margin: 0; padding: 10px;
    display: flex; align-items: center; justify-content: center; text-align: center;
  }
  .popote-page .form-row-wrap { display: grid; grid-template-columns: 1fr; }
  .popote-page input, .popote-page select { font-size: 16px; }
  .popote-page #popote-request-in { width: 100%; white-space: normal; }
  :root[data-theme="dark"] .bottom-nav {
    background: linear-gradient(145deg, rgba(20,29,51,.88), rgba(10,15,28,.78));
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .bottom-nav.has-live-tabs::before {
    content: ""; position: absolute; top: 10px; left: 0;
    width: 48px; height: 30px; border-radius: 12px;
    background: var(--bottomnav-active-bg);
    transform: translateX(var(--tab-x, 0px));
    transition: transform 220ms cubic-bezier(.2,.9,.25,1.1);
    pointer-events: none;
  }
  .has-live-tabs .bottom-nav-item { position: relative; z-index: 1; }
  .has-live-tabs .bottom-nav-icon { transition: color 120ms ease; }
  .has-live-tabs.has-tab-pending .bottom-nav-item.active .bottom-nav-icon { color: var(--bottomnav-fg-muted); }
  .has-live-tabs .bottom-nav-item.tab-pending .bottom-nav-icon { color: var(--bottomnav-active-fg); }
  .has-live-tabs .bottom-nav-item.active .bottom-nav-icon,
  body.msheet-open .has-live-tabs .bottom-nav-menu-btn .bottom-nav-icon { background: transparent; }
  .bottom-nav-icon {
    display: grid; place-items: center;
    width: min(48px, 100%); height: 30px; flex-shrink:0; border-radius: 12px;
    transition: background .18s ease, color .18s ease;
  }
  .bottom-nav-icon svg { width: 22px; height: 22px; }
  .bottom-nav-label { max-width:100%;font-size:.68rem;font-weight:700;letter-spacing:.01em;line-height:1.3;white-space:normal;overflow-wrap:anywhere;text-align:center; }
  .bottom-nav-item.active, body.msheet-open .bottom-nav-menu-btn { color: var(--bottomnav-fg); }
  .bottom-nav-item.active .bottom-nav-icon, body.msheet-open .bottom-nav-menu-btn .bottom-nav-icon { background: var(--bottomnav-active-bg); color: var(--bottomnav-active-fg); }
  body.msheet-open .bottom-nav-item.active:not(.bottom-nav-menu-btn) { color: var(--bottomnav-fg-muted); }
  body.msheet-open .bottom-nav-item.active:not(.bottom-nav-menu-btn) .bottom-nav-icon { background: none; color: inherit; }
  .bottom-nav-item:active .bottom-nav-icon { background: var(--bottomnav-active-bg); color: var(--bottomnav-active-fg); }
  .bottom-nav-item:focus-visible { outline: 2px solid var(--bottomnav-fg); outline-offset: 2px; }
  main, .msg-page { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .assistant-widget-btn, .msg-thread-form { bottom: calc(112px + env(safe-area-inset-bottom)); }
  .assistant-widget-panel { bottom: calc(104px + env(safe-area-inset-bottom)); }
  /* Titre de carte + étiquette : l'étiquette passe à la ligne au lieu de déborder de la carte. */
  .panel-head { flex-wrap: wrap; row-gap: 8px; }

  .msheet-overlay {
    display: block; position: fixed;
    inset: 0; height: 100%; z-index: 44;
    background: rgba(0, 26, 77, 0); transition: background .22s ease;
  }
  .msheet-overlay[hidden] { display: none; }
  .msheet-overlay.open { background: rgba(0, 26, 77, .45); }
  .msheet {
    position: absolute;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px)); bottom: 0;
    max-width: 560px; margin-inline: auto;
    max-height: min(720px, calc(100% - max(12px, env(safe-area-inset-top, 0px)) - 12px));
    /* Les barres Safari/Brave ne doivent pas redimensionner le défilement
       pendant un geste. Le cadre de navigation garde son propre ancrage. */
    max-height: min(720px, calc(100svh - max(12px, env(safe-area-inset-top, 0px)) - 12px));
    min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--canvas);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 26, 77, .25);
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .26s cubic-bezier(.22, .9, .32, 1);
  }
  .mobile-nav-frame.is-installed .msheet, .messages-frame.is-installed .msheet {
    max-height: min(720px, calc(100lvh - max(12px, env(safe-area-inset-top, 0px)) - 12px));
  }
  .msheet-overlay.open .msheet { transform: none; }
  .msheet-handle { width: 40px; height: 4px; border-radius: 4px; background: #c7cede; margin: 10px auto 2px; flex-shrink: 0; }
  .msheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; flex-shrink: 0; }
  .msheet-head strong { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
  .msheet-close {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .msheet-close svg { width: 18px; height: 18px; }
  .msheet-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom; overflow-anchor: none;
    padding: 0 14px 12px;
  }
  .msheet-profile {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    color: var(--ink); text-decoration: none;
  }
  .msheet-profile .avatar { width: 44px; height: 44px; border-radius: 50%; font-size: .85rem; }
  .msheet-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .msheet-profile-text strong { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msheet-profile-text small { font-size: .78rem; color: var(--muted); font-weight: 600; }
  .msheet-profile-chevron { color: var(--muted); display: grid; }
  .msheet-profile-chevron svg { width: 18px; height: 18px; }
  .msheet-section { margin-bottom: 20px; }
  .msheet-section h3 {
    margin: 0 0 10px 2px; font-size: .72rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .msheet-sub { margin: 12px 0 8px 2px; font-size: .8rem; font-weight: 700; color: var(--ink); opacity: .75; }
  .msheet-section h3 + .msheet-sub { margin-top: 0; }
  .msheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .msheet-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    padding: 12px 6px 10px; min-height: 84px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    color: var(--ink); text-decoration: none; text-align: center;
    -webkit-tap-highlight-color: transparent; transition: background .12s ease;
  }
  .msheet-tile:active { background: var(--surface-hover); }
  .msheet-tile-icon {
    width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0;
    border-radius: 12px; background: #e6edfa; color: var(--dark);
  }
  .msheet-tile-icon svg { width: 20px; height: 20px; }
  .msheet-tile-label { font-size: .76rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
  .msheet-tile.active { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
  .msheet-tile.active .msheet-tile-icon { background: var(--dark); color: #fff; }
  .msheet-tile-danger { color: var(--danger); }
  .msheet-tile-danger .msheet-tile-icon { background: #fdeaea; color: var(--danger); }
  .msheet-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 6px; font-size: .78rem; color: var(--muted); }
  .msheet-legal a { color: var(--muted); text-decoration: none; font-weight: 600; }
  body.msheet-open { overflow: hidden; }
  body.msheet-open .assistant-widget-btn { visibility: hidden; }
}
/* En paysage très court, utiliser toute la hauteur disponible pour garder
   une zone de défilement entre le titre et la barre de navigation. */
@media (max-width: 760px) and (max-height: 480px) {
  .msheet { max-height: min(720px, calc(100% - max(12px, env(safe-area-inset-top, 0px)) - 12px)); }
}

#display-debug-dialog { width: min(480px, calc(100% - 24px)); max-height: 80dvh; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); overflow-y: auto; }
#display-debug-dialog::backdrop { background: rgba(0, 15, 45, .5); }
#display-debug-dialog h2 { margin: 0 0 12px; font-size: 1.15rem; }
#display-debug-dialog pre { max-height: 45dvh; overflow: auto; padding: 12px; background: var(--surface-alt); font-size: 12px; }
.display-debug-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .msheet, .msheet-overlay { transition: none; }
}

/* Fenêtres mobiles : borne commune au viewport visible, contenu défilant. */
@media (max-width: 760px) {
  body .search-overlay, body .chat-popup-overlay, body .popote-modal,
  body .pay-wizard-overlay, body .photo-lightbox {
    inset: var(--overlay-top, 0px) 0 auto;
    height: var(--overlay-height, 100dvh);
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
  }
  body .search-overlay { align-items: center; }
  body .search-modal { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
  body .search-input-row { flex-shrink: 0; }
  body .search-modal input, body .pay-wizard-card input, body .popote-modal-card input { font-size: 16px; }
  body .search-results, body .msg-group-members { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  body .msg-group-modal { overflow-y: auto; }
  body .msg-group-modal-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
  body .chat-popup-card { max-height: 100%; min-height: 0; }
  body .chat-popup-close { width: 44px; height: 44px; }
  body .chat-popup-messages { min-height: 0; }
  body .popote-modal-card, body .pay-wizard-card { max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 18px; }
  body .pay-wizard-close { position: sticky; top: 0; float: right; margin: -8px -4px 4px 8px; z-index: 1; min-width: 44px; min-height: 44px; }
  body .photo-lightbox { overflow-y: auto; justify-content: flex-start; }
  body .photo-lightbox-media { margin-top: 48px; flex: 0 1 auto; min-height: 0; width: 100%; max-width: 100%; max-height: calc(var(--overlay-height, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 140px); }
  body .photo-lightbox-info { max-width: 100%; }
  body .photo-lightbox-media img, body .photo-lightbox-media video { max-height: inherit; object-fit: contain; }
  body .photo-lightbox-close {
    position: sticky; top: calc(12px + env(safe-area-inset-top, 0px)); right: auto;
    align-self: flex-end; flex-shrink: 0; margin-bottom: -44px; z-index: 1;
    width: 44px; height: 44px;
  }
  body .vote-dialog {
    position: fixed; top: calc(var(--overlay-top, 0px) + env(safe-area-inset-top, 0px) + 12px); bottom: auto;
    left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); margin: 0 auto;
    width: min(480px, calc(100% - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px))));
    max-height: calc(var(--overlay-height, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere;
  }
  body .vote-dialog-close { position: sticky; top: 0; float: right; z-index: 1; min-width: 44px; min-height: 44px; background: var(--surface); border-radius: 50%; }
}

/* Ordinateur portable / tablette : les liens passent sur leur propre ligne sous le logo,
   au lieu de se chevaucher avec les icônes de droite. */
@media (min-width: 761px) and (max-width: 1250px) {
  .header-inner { flex-wrap: wrap; row-gap: 6px; }
  .header-inner nav.main-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .header-inner .header-actions { margin-left: auto; }
}
/* Menu du profil (Mon compte, Administration…) : liens lisibles, sans soulignement. */
.user-chip-dropdown .nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-size: .86rem; font-weight: 600; text-decoration: none; }
.user-chip-dropdown .nav-dropdown-menu a:hover { background: var(--surface-hover); }
.user-chip-dropdown .nav-dropdown-menu a.menu-logout { color: var(--danger); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 11px; }

/* Recherche compacte et champs de discussion accessibles sur iPhone. */
.logo-trigger { text-decoration: none; }
.global-search-overlay .search-close { flex: 0 0 44px; width: 44px; height: 44px; }
.global-search-overlay .search-close svg { width: 20px; height: 20px; }
.global-search-overlay .search-modal { display: flex; flex-direction: column; }
.global-search-overlay .search-input-row { flex-shrink: 0; }
.global-search-overlay .search-results { min-height: 0; max-height: 280px; }
@media (max-width: 760px) {
  body .global-search-overlay { padding: 24px; align-items: flex-start; padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  body .global-search-overlay .search-modal { max-height: min(440px, calc(var(--overlay-height, 100dvh) - 96px)); }
  body .chat-popup-form input { font-size: 17px; line-height: 1.4; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body .search-modal, body .chat-popup-card { animation: none; transform: none; }
}
.admin-admission-check { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; margin: 12px 0; }
.admin-admission-check label, .admin-admission-check [data-admission-manual] { display: grid; gap: 6px; }
.admin-admission-check .auth-check { display: flex; align-items: flex-start; }
.admin-admission-check input:not([type="checkbox"]), .admin-admission-check select, .admin-admission-check textarea { width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; }

.portal-update {
  position: fixed;
  z-index: 10000;
  top: calc(90px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  padding: 14px;
  border: 1px solid var(--border, #dce2ed);
  border-radius: 16px;
  background: var(--surface, #fff);
  color: var(--text, #18243e);
  box-shadow: 0 8px 32px #001a4d22;
  font-size: 16px;
}
.portal-update > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.portal-update button { font-size: 16px; }
.chat-popup-messages .msg-history-control { list-style: none; display: flex; justify-content: center; margin: 4px 0 12px; }
.chat-popup-messages [data-popup-older] { font-size: 16px; }

/* Deux emblèmes distincts : la promotion et la compagnie. La géométrie de
   navigation reste indépendante de cette identité visuelle. */
.brand-crests,.auth-crests{display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto}
.company-crest{display:block;flex:0 0 auto;width:50px;height:50px;aspect-ratio:1;background:url('/assets/logo/embleme-compagnie-ours.webp') center/contain no-repeat;filter:drop-shadow(0 4px 10px rgba(5,15,51,.28))}
.crest-separator{display:block;flex:0 0 auto;font-size:24px;line-height:1;font-weight:300;opacity:.5}
.logo-text{min-width:0}.logo-trigger{min-width:0}
.auth-crests{margin:0 auto 14px;gap:12px}.auth-crests .auth-mark{margin:0;width:104px;height:104px}
.auth-crests .company-crest{width:104px;height:104px}
.auth-brand .auth-crests{margin:0 0 22px;gap:14px}
.auth-brand .auth-crests :is(.auth-mark,.company-crest){width:clamp(90px,12vw,145px);height:clamp(90px,12vw,145px);margin:0;flex-basis:auto}
.fl-top .auth-crests{margin:0}.fl-top .auth-crests :is(.auth-mark,.company-crest){width:48px;height:48px;margin:0}
@media(prefers-reduced-motion:no-preference){
 .brand-crests{animation:crests-appear .45s ease-out both}
 .auth-brand .auth-crests{animation:auth-float 6s ease-in-out infinite}
 .auth-brand .auth-crests .auth-mark{animation:none}
 @keyframes crests-appear{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
}
@media(max-width:860px){
 .auth-brand .auth-crests{margin:0;gap:6px}
 .auth-brand .auth-crests :is(.auth-mark,.company-crest){width:44px;height:44px;flex:0 0 44px}
 .auth-brand .auth-crests .crest-separator{font-size:20px}
 .auth-brand .auth-brand-text{min-width:0}
 .auth-brand .auth-crests{animation:none}
}
@media(max-width:760px){
 .header-inner .brand-crests{gap:4px}
 .header-inner .brand-crests :is(.badge,.company-crest){width:30px;height:30px;flex:0 0 30px}
 .header-inner .brand-crests .crest-separator{font-size:18px}
 .header-inner .logo-trigger{gap:7px}
 .header-inner .logo-countdown{font-size:.54rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:360px){
 .header-inner .brand-crests :is(.badge,.company-crest){width:24px;height:24px;flex-basis:24px}
 .header-inner .brand-crests{gap:2px}.header-inner .logo-trigger{gap:5px}
 .header-inner .logo-title{font-size:.72rem}.header-inner .logo-user{font-size:.58rem}
 .auth-brand .auth-crests :is(.auth-mark,.company-crest){width:34px;height:34px;flex-basis:34px}
}
.company-crest{border-radius:50%;overflow:hidden}
.auth-crests .crest-separator{opacity:.75}