/*
  Pascale.ai V7 : coque de l'application (layouts.wordpress)
  Barre latérale claire translucide, barre mobile (logo + menu), entête des pages sans barre latérale,
  sélecteur de profils famille, flamme et notifications. Dépend de tokens.css et pascale-v7.css.
*/

/* ============================================================
   1. Hauteur de la barre mobile (utilisée par les pages plein écran, ex. chat)
   ============================================================ */
@media (max-width: 991.98px) {
  body.v7-has-sidebar { --topbar-height: 64px; }
}

/* ============================================================
   2. Barre latérale
   Repli fluide : seule la largeur change (transition), les icônes gardent leur abscisse
   (centre à 36px du bord dans les deux états) et les libellés s'effacent au lieu de disparaître.
   ============================================================ */
.app-sidebar.v7-sidebar {
  --v7-sidebar-speed: .34s;
  --v7-wordmark-h: 24px;
  --v7-wordmark-w: 149px;
  --v7-mark-w: 19px;
  --lte-sidebar-color: var(--ink-2);
  --lte-sidebar-hover-color: var(--ink);
  --lte-sidebar-hover-bg: var(--hover-wash);
  --lte-sidebar-menu-active-bg: transparent;
  --lte-sidebar-menu-active-color: #fff;
  overflow: visible;
  background: var(--sidebar-surface);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-right: 1px solid var(--tile-border);
  box-shadow: var(--sidebar-shadow);
  color: var(--ink);
  transition:
    min-width var(--v7-sidebar-speed) var(--ease),
    max-width var(--v7-sidebar-speed) var(--ease),
    margin-left var(--v7-sidebar-speed) var(--ease),
    margin-right var(--v7-sidebar-speed) var(--ease);
}
@media (min-width: 992px) {
  .app-sidebar.v7-sidebar { box-shadow: none; }
  body.sidebar-mini.sidebar-collapse .app-sidebar.v7-sidebar { box-shadow: var(--sidebar-shadow); }
}
.app-sidebar.v7-sidebar.is-resizing { overflow: hidden; }

@media (max-width: 991.98px) {
  .app-sidebar.v7-sidebar {
    background: var(--sidebar-surface-solid);
    box-shadow: 24px 0 60px -30px var(--backdrop);
  }
}

.v7-sidebar__top {
  position: relative;
  flex: none;
  padding: 18px 14px 12px 0;
  transition: padding-bottom var(--v7-sidebar-speed) var(--ease);
}

.v7-sidebar__logo {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: var(--touch-target);
  margin-left: 21px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--logo-ground);
}
.v7-sidebar__logo:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.v7-sidebar__wordmark {
  display: block;
  width: var(--v7-wordmark-w);
  height: var(--v7-wordmark-h);
  overflow: hidden;
  transition: width var(--v7-sidebar-speed) var(--ease);
}
.v7-sidebar__wordmark img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--v7-wordmark-h);
}

.app-sidebar.v7-sidebar .btn-sidebar-toggle {
  position: absolute;
  top: 20px;
  right: 14px;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--muted);
  transition:
    top var(--v7-sidebar-speed) var(--ease),
    right var(--v7-sidebar-speed) var(--ease),
    background-color .2s var(--ease),
    border-color .2s var(--ease),
    box-shadow .2s var(--ease),
    color .2s var(--ease);
}
.app-sidebar.v7-sidebar .btn-sidebar-toggle:hover,
.app-sidebar.v7-sidebar .btn-sidebar-toggle:focus,
.app-sidebar.v7-sidebar .btn-sidebar-toggle:active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  transform: none;
}
.app-sidebar.v7-sidebar .btn-sidebar-toggle:hover { background: var(--hover-wash); color: var(--ink); }
.v7-sidebar__toggle-icon { display: block; width: 20px; height: 20px; }
.v7-sidebar__toggle-chevron {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--v7-sidebar-speed) var(--ease);
}

@media (min-width: 992px) {
  .app-sidebar.v7-sidebar .btn-sidebar-toggle { display: inline-grid; }
}

.v7-sidebar__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  margin: 0 0 6px;
  padding-left: 7px;
  overflow: hidden;
  color: var(--muted);
  font: 700 11.5px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    height var(--v7-sidebar-speed) var(--ease),
    margin var(--v7-sidebar-speed) var(--ease),
    opacity .2s var(--ease) .12s;
}
.v7-sidebar__eyebrow .pa-eyebrow__dash { width: 24px; }
.v7-sidebar__eyebrow-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .22s var(--ease) .1s;
}
.v7-sidebar__space { flex: none; margin: 2px 12px 4px; }

.app-sidebar.v7-sidebar .sidebar-wrapper {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  padding: 4px 12px 12px;
}

.v7-sidebar .sidebar-menu { width: 100%; min-width: 0; gap: 2px; padding-top: 4px; }
.v7-sidebar .sidebar-menu > .nav-item { width: 100%; min-width: 0; }

.v7-sidebar .sidebar-menu .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px !important;
  width: 100%;
  min-height: 48px;
  margin: 0 0 2px;
  padding: 0 14px 0 7px;
  overflow: hidden;
  border-radius: var(--radius-pill) !important;
  background: transparent;
  color: var(--ink-2) !important;
  font: 700 15px/1.2 var(--font-sans);
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.v7-sidebar .sidebar-menu .nav-link > .v7-nav-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--brand-purple);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.v7-nav-icon .v7-icon { display: block; width: 20px; height: 20px; }
.v7-sidebar .sidebar-menu .nav-link:hover {
  background-color: var(--hover-wash);
  color: var(--ink) !important;
}
.v7-sidebar .sidebar-menu .nav-link:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.v7-sidebar .sidebar-menu .nav-link.active:focus:not(:focus-visible) { box-shadow: 0 14px 26px -14px rgba(146, 63, 192, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.v7-sidebar .sidebar-menu .nav-link:active { transform: scale(.98); }
.v7-sidebar .sidebar-menu .nav-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.v7-sidebar .sidebar-menu .nav-link.active {
  background: var(--grad-btn) !important;
  color: var(--on-primary) !important;
  box-shadow: 0 14px 26px -14px rgba(146, 63, 192, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.v7-sidebar .sidebar-menu .nav-link.active > .v7-nav-icon {
  background: rgba(255, 255, 255, 0.2);
  color: var(--on-primary);
}
[data-theme="dark"] .v7-sidebar .sidebar-menu .nav-link:not(.active) > .v7-nav-icon { color: var(--violet-ink); }
.v7-sidebar .menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .22s var(--ease) .1s;
}

/* Pied de la barre : série (flamme), thème et Déconnexion dans une seule zone */
.v7-sidebar__foot {
  flex: none;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--tile-border);
  background: var(--sidebar-foot-surface);
}
.v7-sidebar__foot-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 0 0 8px;
}
/* Notifications de l'élève, au-dessus de la flamme : mêmes boutons ronds que la bascule de thème */
.v7-sidebar__foot-notifs { padding: 0 0 8px; }
.v7-sidebar__foot-notifs .v7-notifs { gap: 6px; }
.v7-sidebar__foot-notifs .v7-notifs__btn { color: var(--ink-2); }
.v7-sidebar__foot-notifs .v7-notifs__btn:hover { color: var(--ink); background-color: var(--tint); }
.v7-sidebar__foot-notifs .v7-notifs__btn .v7-icon { display: block; }
.v7-sidebar__foot .sidebar-menu { padding-top: 0; }
.v7-sidebar__foot .sidebar-menu .nav-link { margin: 0; color: var(--muted) !important; }
.v7-sidebar__foot .sidebar-menu .nav-link > .v7-nav-icon { color: var(--muted); }
.v7-sidebar__foot .sidebar-menu .nav-link:hover { color: var(--ink) !important; }
.v7-sidebar__foot .sidebar-menu .nav-link:hover > .v7-nav-icon { color: var(--ink); }

/* Pas d'animation au chargement de la page (état replié restauré) ni pendant un redimensionnement */
body:not(.app-loaded) .v7-sidebar,
body:not(.app-loaded) .v7-sidebar *,
body.hold-transition .v7-sidebar,
body.hold-transition .v7-sidebar * {
  transition: none !important;
}

/* ============================================================
   3. Barre latérale repliée (mode mini, bureau)
   ============================================================ */
body.sidebar-mini.sidebar-collapse .v7-sidebar__top { padding-bottom: 60px; }
body.sidebar-mini.sidebar-collapse .v7-sidebar__wordmark { width: var(--v7-mark-w); }
body.sidebar-mini.sidebar-collapse .app-sidebar.v7-sidebar .btn-sidebar-toggle {
  top: 70px;
  right: calc(50% - 20px);
}
body.sidebar-mini.sidebar-collapse .v7-sidebar__toggle-chevron { transform: rotate(180deg); }

body.sidebar-mini.sidebar-collapse .v7-sidebar .menu-label,
body.sidebar-mini.sidebar-collapse .v7-sidebar__eyebrow-text,
body.sidebar-mini.sidebar-collapse .v7-sidebar .family-profile-text,
body.sidebar-mini.sidebar-collapse .v7-sidebar .family-profile-check,
body.sidebar-mini.sidebar-collapse .v7-sidebar .family-profile-trial__text {
  opacity: 0;
  text-overflow: clip;
  transition-delay: 0s;
}
body.sidebar-mini.sidebar-collapse .v7-sidebar__eyebrow {
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  transition:
    height var(--v7-sidebar-speed) var(--ease),
    margin var(--v7-sidebar-speed) var(--ease),
    opacity .14s var(--ease);
}
body.sidebar-mini.sidebar-collapse .app-sidebar.v7-sidebar .sidebar-menu .nav-link { width: 100% !important; }

body.sidebar-mini.sidebar-collapse .v7-sidebar__foot-notifs .v7-notifs,
body.sidebar-mini.sidebar-collapse .v7-sidebar__foot-tools {
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
}
body.sidebar-mini.sidebar-collapse .v7-sidebar .sidebar-menu .nav-link.active > .v7-nav-icon { background: transparent; }
body.sidebar-mini.sidebar-collapse .v7-sidebar .family-profile-tab:not(.is-active) {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
body.sidebar-mini.sidebar-collapse .v7-sidebar .family-profile-tab:not(.is-active):not(:disabled):hover { background-color: var(--hover-wash); transform: none; }
body.sidebar-mini.sidebar-collapse .v7-sidebar .family-profile-tab.is-active { box-shadow: none; }
body.sidebar-mini.sidebar-collapse .v7-streak { padding: 0 8px; flex-direction: column; gap: 0; min-height: 52px; justify-content: center; font-size: 12px; }

body.sidebar-mini.sidebar-collapse .v7-sidebar .family-profile-trial {
  max-height: 40px;
  padding-left: calc(50% - 10px);
}

/* ============================================================
   4. Sélecteur de profils famille (selection-profils.navigation)
   Ordre fixe (profils enfants puis compte principal) ; l'espace ouvert porte le contour dégradé et une coche.
   ============================================================ */
.v7-sidebar__profiles { flex: none; padding: 0 12px 12px; }

.v7-sidebar .family-profile-navigation,
.v7-header .family-profile-navigation {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.v7-sidebar .family-profile-tabs {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
}
.v7-sidebar .family-profile-tabs form,
.v7-sidebar .family-profile-tabs .family-profile-main-account {
  display: block;
  flex: none;
  width: 100%;
  margin: 0;
}

.family-profile-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px 6px 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--button-bg);
  color: var(--ink);
  font: 700 14.5px/1.2 var(--font-sans);
  text-align: left;
  box-shadow: var(--shadow-button);
}
.family-profile-tab:hover,
.family-profile-tab:focus,
.family-profile-tab:focus-visible {
  border-color: var(--line);
  background-color: var(--button-bg);
  color: var(--ink);
  box-shadow: var(--shadow-button);
}
.family-profile-tab:not(:disabled):hover { background-color: var(--tint); }
.family-profile-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.family-profile-tab.is-active,
.family-profile-tab.is-active:hover,
.family-profile-tab.is-active:focus {
  border: 2px solid transparent;
  padding: 5px 11px 5px 5px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
  color: var(--ink);
  cursor: default;
  opacity: 1;
  box-shadow: var(--shadow-button);
}
.family-profile-tab.is-unavailable,
.family-profile-tab.is-unavailable:hover {
  border-color: var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}
.family-profile-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  transition: opacity .22s var(--ease) .1s;
}
.family-profile-name,
.family-profile-role { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-profile-role { color: var(--muted); font: 600 12px/1.25 var(--font-sans); }
.family-profile-tab.is-active .family-profile-role { color: var(--primary-deep); }
.family-profile-check {
  flex: none;
  color: var(--primary-deep);
  transition: opacity .22s var(--ease) .1s;
}

.family-profile-initial {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-round);
  background: var(--grad-btn);
  color: var(--on-primary);
  font: 800 14px/1 var(--font-sans);
  text-transform: uppercase;
}
.family-profile-initial .v7-icon { display: block; }
.family-profile-initial--main {
  background: var(--chip-bg);
  border: 0;
  color: var(--chip-ink);
  font-size: 16px;
}
[data-theme="dark"] .family-profile-initial--main { color: var(--ink); }
/* Sélecteur de profils sans animation : bouton et pastille d'icône changent d'état d'un coup */
.v7-sidebar .family-profile-tab,
.v7-sidebar .family-profile-tab * { transition: none; }
.family-profile-tab.is-unavailable .family-profile-initial {
  background: var(--line-soft);
  border-color: var(--line);
  color: var(--muted);
}

.family-profile-trial {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-height: 120px;
  margin-top: 10px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid var(--chip-border);
  border-radius: 16px;
  background: var(--tint);
  color: var(--ink-2);
  font: 500 13px/1.4 var(--font-sans);
  transition: max-height var(--v7-sidebar-speed, .34s) var(--ease), padding var(--v7-sidebar-speed, .34s) var(--ease);
}
.family-profile-trial strong { color: var(--primary-deep); font-weight: 800; }
.family-profile-trial__icon { flex: none; margin-top: 1px; color: var(--primary-deep); }
.v7-sidebar .family-profile-trial__text { min-width: 168px; transition: opacity .22s var(--ease) .1s; }

/* Variante entête (pages sans barre latérale) */
.v7-header .family-profile-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.v7-header .family-profile-tabs { flex-wrap: wrap; gap: 6px; }
.v7-header .family-profile-tab { width: auto; }
.v7-header .family-profile-role { display: none; }
.v7-header .family-profile-tabs .family-profile-main-account { margin-left: 0; }
.v7-header .family-profile-trial { margin-top: 0; }

/* ============================================================
   5. Flamme et notifications
   ============================================================ */

.v7-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch-target);
  padding: 0 14px 0 10px;
  border-radius: var(--radius-pill);
  background: var(--button-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-button);
  color: var(--ink);
  font: 800 15px/1 var(--font-sans);
}
.v7-streak .v7-streak__icon { display: block; flex: none; width: 20px; height: 20px; color: var(--primary-deep); }
.v7-streak span { font-variant-numeric: tabular-nums; }
button.v7-streak { position: relative; cursor: help; -webkit-appearance: none; appearance: none; }
button.v7-streak:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* Infobulle légère (survol ou focus au clavier sur desktop, appui sur mobile via la classe is-tip-open) */
.v7-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 1060;
  width: max-content;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--page);
  box-shadow: var(--shadow-pop);
  font: 600 13px/1.35 var(--font-sans);
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
  pointer-events: none;
}
@media (hover: hover) {
  [data-v7-tip]:hover .v7-tip { opacity: 1; visibility: visible; transform: none; }
}
[data-v7-tip]:focus-visible .v7-tip,
[data-v7-tip].is-tip-open .v7-tip { opacity: 1; visibility: visible; transform: none; }

.v7-notifs { display: flex; align-items: center; gap: var(--space-2); }
.v7-notifs__item { position: relative; }
.v7-notifs__btn { color: var(--ink-2); }
.v7-notifs__btn[aria-expanded="true"] { background: var(--tint); border-color: var(--chip-border); color: var(--primary-deep); }

.eleve-notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--primary-deep);
  color: var(--ink-inverse);
  font: 800 11px/1 var(--font-sans);
  box-sizing: border-box;
}
.pedagogical-notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: var(--radius-round);
  background: var(--primary-deep);
}

.eleve-notification-dropdown,
.pedagogical-notification-dropdown {
  width: min(22rem, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  z-index: 1060;
}
.eleve-notification-dropdown .dropdown-header,
.pedagogical-notification-dropdown .dropdown-header,
.pedagogical-notification-dropdown .dropdown-footer {
  margin: 0;
  padding: 14px 16px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}
.pedagogical-notification-dropdown .dropdown-footer { border-top: 1px solid var(--tile-border); }
.eleve-notification-dropdown .dropdown-header,
.pedagogical-notification-dropdown .dropdown-header { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
.eleve-notification-dropdown .dropdown-header .fw-semibold,
.pedagogical-notification-dropdown .dropdown-header .fw-semibold { color: var(--ink) !important; }
.pedagogical-notification-dropdown #btn-mark-all-read { color: var(--primary-deep); font-weight: 700; }
.eleve-notification-list { max-height: 26rem; overflow-y: auto; }
.eleve-notification-item,
.pedagogical-notification-item {
  display: block;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--tile-border);
  white-space: normal;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.eleve-notification-item:last-child { border-bottom: 0; }
.eleve-notification-item:hover,
.eleve-notification-item:focus,
.pedagogical-notification-item:hover,
.pedagogical-notification-item:focus { background: var(--hover-wash); }
.eleve-notification-item--read { background: var(--paper); opacity: .85; }
.eleve-notification-item--expired { background: var(--danger-bg); opacity: 1; }
.eleve-notification-title,
.pedagogical-notification-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.eleve-notification-meta { font-size: 13.5px; line-height: 1.4; }
.eleve-notification-preview,
.pedagogical-notification-preview { color: var(--muted); font-size: 14px; line-height: 1.45; }
.eleve-notification-preview { white-space: pre-line; }
.eleve-notification-toggle { gap: .4rem; padding-left: 2.6em; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.eleve-notification-toggle .form-check-input { margin-top: 0; cursor: pointer; }

/* ============================================================
   6. Barre mobile (logo + bouton menu) quand la barre latérale existe
   ============================================================ */
.app-header.v7-topbar {
  position: sticky;
  top: 0;
  z-index: 1034;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--tile-border);
  background: var(--page-bg);
  background-attachment: fixed;
}
.app-header.v7-topbar,
.app-header.v7-header { transition: none; }
.v7-topbar__logo { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 4px 8px; margin-left: -8px; border-radius: var(--radius-pill); background: var(--logo-ground); }
.v7-topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.v7-topbar__logo img { display: block; height: 28px; width: auto; }
.v7-topbar__burger i { font-size: 22px; }
.v7-topbar__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: var(--radius-round);
  background: var(--primary-deep);
}
.v7-topbar__burger.has-unread .v7-topbar__dot { display: block; }

/* ============================================================
   7. Entête des pages sans barre latérale (public, inscription, connexion)
   ============================================================ */
.app-header.v7-header {
  position: relative;
  z-index: 1034;
  border-bottom: 0;
  background: transparent;
}
.v7-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--space-5);
  box-sizing: border-box;
}
.v7-header__logo { margin-left: -14px; }
.v7-header__logo img { display: block; height: clamp(28px, 3.6vw, 36px); width: auto; }
.v7-header__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.v7-header__account { min-height: var(--touch-target); }
.v7-no-sidebar .app-footer {
  padding-left: max(var(--space-5), calc((100% - var(--container)) / 2 + var(--space-5)));
  padding-right: max(var(--space-5), calc((100% - var(--container)) / 2 + var(--space-5)));
}

/* ============================================================
   8. Fenêtre "flamme du jour" (layout) aux couleurs V7
   ============================================================ */
.flamme-modal-overlay { background: var(--backdrop); }
.flamme-modal-card {
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.flamme-modal-title { color: var(--ink); font-weight: 900; letter-spacing: -0.015em; }
.flamme-modal-countdown { color: var(--muted); }

/* ============================================================
   9. Bascule clair / sombre (layouts.partials.v7-theme-toggle)
   ============================================================ */
/* Icônes moon / sun du design system (Icon, 24px, trait 2) superposées : bascule en fondu + rotation */
.v7-theme-toggle { position: relative; flex: none; color: var(--ink-2); transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.v7-theme-toggle:hover { color: var(--ink); background-color: var(--tint); }
.v7-theme-toggle svg {
  display: block;
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.v7-theme-toggle .v7-theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] .v7-theme-toggle .v7-theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="dark"] .v7-theme-toggle .v7-theme-toggle__sun { opacity: 1; transform: none; }

/* ============================================================
   10. Changement d'espace (enfant / compte principal) et navigation : fondu enchaîné
   La barre latérale reste en place, seuls le sélecteur, le menu et le contenu se fondent.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .v7-sidebar__top { view-transition-name: v7-sidebar-top; }
  .v7-sidebar__profiles { view-transition-name: v7-sidebar-profiles; }
  .v7-sidebar__space { view-transition-name: v7-sidebar-space; }
  .v7-sidebar__foot { view-transition-name: v7-sidebar-foot; }
  ::view-transition-group(*) { animation-duration: .28s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  /* Le sélecteur de profils bascule directement sur son nouvel état, sans fondu */
  ::view-transition-group(v7-sidebar-profiles),
  ::view-transition-new(v7-sidebar-profiles) { animation: none; }
  ::view-transition-old(v7-sidebar-profiles) { display: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .22s; }
}

/* ============================================================
   11. Mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar.v7-sidebar,
  .v7-sidebar *,
  .family-profile-tab,
  .v7-theme-toggle,
  .v7-theme-toggle svg {
    transition: none !important;
  }
  .family-profile-tab:hover,
  .v7-sidebar .sidebar-menu .nav-link:active,
  .pa-iconbtn:hover { transform: none !important; }
}