/* ============================================================
   app.css — socle visuel v4 « Suivi d'orientation » (Saint Elme)
   ------------------------------------------------------------
   Chargé sur TOUTES les pages par header.php, après Bootstrap.
   Contient : jetons clair/sombre, polices locales, coquille
   (rail + zone de contenu), rail de navigation, primitives ui-*,
   pied de page, bouton de retour, et l'habillage des composants
   Bootstrap (modales, formulaires) aux couleurs de la charte.
   Les feuilles de page vivent dans assets/css/pages/.
   ============================================================ */

/* ------------------------------------------------------------
   1. Polices (copies locales des Google Fonts, fichiers variables)
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/spline-sans-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/spline-sans-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------
   2. Jetons — clair par défaut, sombre via html[data-theme="dark"]
   ------------------------------------------------------------ */
:root {
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Quicksand', 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bg: #F2F2F9; --card: #FFFFFF; --inner: #F5F5FB; --border: #E4E4F0;
  --ink: #232250; --sub: #5D5C80; --faint: #7A799D; /* --faint assombri (#8F8EAE dans la maquette) : 4,3:1 sur blanc pour les petits libellés */
  --prim: #3E3A9D; --prim-btn: #3E3A9D; --prim-ink: #37338D; --prim-soft: #EDEDFA; --prim-brd: #D8D7F3;
  --teal-ink: #177F8B; --teal-soft: #E2F5F7; --teal-brd: #BCE6EA; /* liens : 4,6:1 sur blanc (#1F98A4 dans la maquette) */
  --green-ink: #0F7A47; --green-soft: #E4F4EB; --green-brd: #C2E5D2; --green-solid: #188653;
  --amber-ink: #96660D; --amber-soft: #FBF1DB; --amber-brd: #EED9A8;
  --red-ink: #D2543C; --red-soft: #FDECE7; --red-brd: #F3C9BE;
  --rail: #3E3A9D; --rail-ink: #BDBBE8; --rail-pill: rgba(255,255,255,.16); --rail-hover: rgba(255,255,255,.09);
  --white-btn: #FFFFFF; --btn-brd: #D8D7EA; --btn-hover: #F2F2FA;
  --shadow: 0 1px 2px rgba(35,32,90,.05), 0 12px 32px -16px rgba(35,32,90,.12);
  --shadow-pop: 0 24px 64px -24px rgba(10,8,40,.5);
  --scrim: rgba(24,21,60,.5);
  --coral: #E8654F;
  --rail-w: 94px;

  /* Bootstrap : on aligne ses variables sur la charte pour que les pages
     non encore refondues (et les modales) suivent le thème. */
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: .875rem;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--sub);
  --bs-tertiary-color: var(--faint);
  --bs-tertiary-bg: var(--inner);
  --bs-border-color: var(--border);
  --bs-heading-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-link-color: var(--teal-ink);
  --bs-link-hover-color: var(--prim-ink);
  --bs-link-color-rgb: 31,152,164;
  --bs-link-hover-color-rgb: 55,51,141;
  --bs-primary: #3E3A9D;
  --bs-primary-rgb: 62,58,157;
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
  --bs-modal-bg: var(--card);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #100F26; --card: #191838; --inner: #201F45; --border: #2D2B58;
  --ink: #ECEBF8; --sub: #ACABCC; --faint: #7C7BA0;
  --prim: #8D89F0; --prim-btn: #5B57D6; --prim-ink: #B4B1F8; --prim-soft: #282660; --prim-brd: #3B3884;
  --teal-ink: #5BCAD4; --teal-soft: #0F3438; --teal-brd: #1C5257;
  --green-ink: #5BCB93; --green-soft: #132E20; --green-brd: #1F4A33; --green-solid: #157A49;
  --amber-ink: #E2B45F; --amber-soft: #332A12; --amber-brd: #4D3F1D;
  --red-ink: #F0846D; --red-soft: #3D1F19; --red-brd: #5A2E25;
  --rail: #141232; --rail-ink: #9E9CCE;
  --white-btn: #211F4A; --btn-brd: #343267; --btn-hover: #2A2858;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 34px -16px rgba(0,0,0,.55);
  --shadow-pop: 0 24px 64px -24px rgba(0,0,0,.8);
  --scrim: rgba(0,0,0,.6);
  --bs-primary: #8D89F0;
  --bs-primary-rgb: 141,137,240;
  --bs-link-color-rgb: 91,202,212;
  --bs-link-hover-color-rgb: 180,177,248;
  color-scheme: dark;
}

/* ------------------------------------------------------------
   3. Base
   ------------------------------------------------------------ */
html, body { margin: 0; padding: 0; }
/* Le fond de html déborde dans les zones sûres (barre d'état, indicateur de
   retour) d'une application installée sur l'écran d'accueil : on le met aux
   couleurs du rail pour qu'aucun liseré clair ne le surplombe. Le corps peint
   --bg par-dessus, sur toute sa boîte. */
html { -webkit-text-size-adjust: 100%; background: var(--rail); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--teal-ink); text-decoration: none; }
a:hover { color: var(--prim-ink); }
h1, h2, h3, .ui-display { font-family: var(--font-display); color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
svg.ui-i { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.15em; }
::selection { background: var(--prim-soft); color: var(--prim-ink); }

/* Transitions de couleur (180 ms), jamais de mouvement */
.ui-card, .ui-btn, .ui-chip, .ui-tag, .rail__item, .rail__menu-item, .ui-input, .ui-select,
.ui-tile, .ui-row, .ui-navbtn, .ui-cell {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Lecteurs d'écran (Bootstrap 5 n'a plus .sr-only) */
.sr-only, .visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
mark.hl { background: var(--amber-soft); color: inherit; padding: 0 .1em; border-radius: 3px; }

/* ------------------------------------------------------------
   4. Coquille : rail fixe à gauche + contenu
   ------------------------------------------------------------ */
.app { min-height: 100vh; min-height: 100dvh; display: flex; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: calc(22px + env(safe-area-inset-top)) calc(26px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) 26px; }
.app-main > .app-body { flex: 1; }
/* Pages non encore refondues : elles gardent le .container Bootstrap
   ouvert par header.php et fermé par footer.php. */
.app-main--legacy > .app-body > .container { margin-top: 0 !important; }
.app-main--legacy .container { max-width: 1320px; }

/* ------------------------------------------------------------
   5. Rail de navigation
   ------------------------------------------------------------ */
.rail {
  width: var(--rail-w); flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  background: var(--rail);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  gap: 4px;
  z-index: 1040;
}
.rail__logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.rail__logo img { width: 76px; height: 76px; display: block; }
.rail__group { position: relative; width: 74px; }
.rail__item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 74px; padding: 10px 0 8px; border-radius: 14px;
  color: var(--rail-ink); background: none; border: 0; text-align: center;
}
.rail__item:hover, .rail__item:focus-visible { background: var(--rail-hover); color: #FFFFFF; outline: none; }
.rail__item.is-active { background: var(--rail-pill); color: #FFFFFF; }
.rail__item .ui-i { width: 21px; height: 21px; }
.rail__label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.rail__spacer { flex: 1; }
.rail__espace {
  display: flex; align-items: center; justify-content: center; gap: 5px; width: 74px; height: 26px; margin-bottom: 4px;
  border-radius: 9px; font-family: var(--font-ui); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
}
a.rail__espace:hover { background: rgba(255,255,255,.3); color: #fff; }
.rail__espace--college { background: #188653; border-color: #1FA366; }
a.rail__espace--college:hover { background: #1FA366; }
.rail__context {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 4px;
  width: 74px; padding: 5px 4px; border-radius: 10px; background: var(--rail-hover); color: var(--rail-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2;
}
.rail__context-year { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rail__context-year .ui-i { width: 11px; height: 11px; }
.rail__context-term { font-family: var(--font-ui); font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.14); }
a.rail__context:hover { color: #FFFFFF; }
.rail__iconbtn {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: var(--rail-ink); background: none; border: 0; margin-top: 8px;
}
.rail__iconbtn:hover, .rail__iconbtn:focus-visible { background: var(--rail-hover); color: #FFFFFF; outline: none; }
.rail__iconbtn .ui-i { width: 20px; height: 20px; }
.rail__user {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px;
  background: none; border: 0; padding: 4px 6px; border-radius: 14px; color: var(--rail-ink);
}
.rail__user:hover, .rail__user:focus-visible { background: var(--rail-hover); outline: none; }
.rail__avatar {
  width: 42px; height: 42px; border-radius: 21px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
}
.rail__avatar--admin { background: var(--coral); }
.rail__avatar--direction { background: #1F98A4; }
.rail__avatar--prof { background: #188653; }
.rail__user-role { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Menus déroulants du rail (ancrés à droite de l'item) */
.rail__menu {
  display: none; position: absolute; left: calc(100% + 12px); top: 0;
  min-width: 250px; max-width: 320px; padding: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-pop); z-index: 1050; color: var(--ink);
  text-align: left; list-style: none; margin: 0;
}
.rail__group.is-open .rail__menu { display: block; }
.rail__group--up .rail__menu { top: auto; bottom: 0; }
.rail__menu-title { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.rail__menu-identity { padding: 10px 12px 8px; }
.rail__menu-identity strong { display: block; font-size: 14px; font-weight: 800; }
.rail__menu-identity span { display: block; font-size: 12px; color: var(--faint); font-weight: 600; margin-top: 1px; }
.rail__menu-item, .rail__menu a.dropdown-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border-radius: 10px; color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none;
  background: none; border: 0; width: 100%; text-align: left;
}
.rail__menu-item:hover, .rail__menu-item:focus-visible, .rail__menu a.dropdown-item:hover { background: var(--inner); color: var(--ink); outline: none; }
.rail__menu-item .ui-i { width: 16px; height: 16px; color: var(--faint); }
.rail__menu-item:hover .ui-i { color: var(--prim-ink); }
.rail__menu-item.is-danger { color: var(--red-ink); }
.rail__menu-item.is-danger .ui-i { color: var(--red-ink); }
.rail__menu-meta { margin-left: auto; font-size: 11px; color: var(--faint); font-weight: 700; }
.rail__menu-sep { height: 1px; background: var(--border); margin: 6px 4px; border: 0; }
/* Entrées générées par components/role_switcher.php (bascule rôle/compte) */
.rail__menu .dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; border: 0; opacity: 1; }
.rail__menu .dropdown-header { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.rail__menu .dropdown-header .badge { margin-left: 6px; }
.rail__menu .dropdown-item.active { background: var(--green-soft); }
.rail__menu .dropdown-item .fw-semibold { font-size: 13.5px; }
.rail__menu .dropdown-item small { font-size: 11.5px; }

/* Mode impersonation : bandeau au-dessus du contenu */
.impersonate-notice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  background: var(--amber-soft); border: 1px solid var(--amber-brd); color: var(--amber-ink); font-size: 13px; font-weight: 600;
}
.impersonate-notice .btn, .impersonate-notice__form { margin-left: auto; }
.impersonate-notice .ui-i { flex-shrink: 0; }

/* ------------------------------------------------------------
   6. Primitives ui-*
   ------------------------------------------------------------ */
.ui-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); padding: 20px 22px;
}
.ui-card--tight { padding: 16px 18px; border-radius: 16px; }
.ui-card--prim { border: 1.5px solid var(--prim-brd); }
.ui-card--amber-top { border-top: 3px solid var(--amber-ink); }

/* En-tête de carte : icône carrée + titre + lien à droite */
.ui-hd { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.ui-hd__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-hd__icon .ui-i { width: 17px; height: 17px; }
.ui-hd__icon--prim { background: var(--prim-soft); color: var(--prim-ink); }
.ui-hd__icon--teal { background: var(--teal-soft); color: var(--teal-ink); }
.ui-hd__icon--green { background: var(--green-soft); color: var(--green-ink); }
.ui-hd__icon--amber { background: var(--amber-soft); color: var(--amber-ink); }
.ui-hd__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ui-hd__title--bold { font-weight: 800; }
.ui-hd__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--faint); font-weight: 600; }
.ui-hd__spacer, .ui-spacer { flex: 1; }
.ui-hd__link { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* Intertitre de section : libellé + trait + info à droite */
.ui-sect { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ui-sect__label { font-size: 12px; font-weight: 800; letter-spacing: .07em; color: var(--faint); text-transform: uppercase; white-space: nowrap; }
.ui-sect__label--teal { color: var(--teal-ink); }
.ui-sect__label--prim { color: var(--prim-ink); }
.ui-sect__label--red { color: var(--red-ink); }
.ui-sect__rule { flex: 1; height: 1px; background: var(--border); }
.ui-sect__meta { font-size: 12px; color: var(--faint); font-weight: 600; white-space: nowrap; }

/* Boutons (≥ 44 px) */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 12px;
  background: var(--white-btn); border: 1.5px solid var(--btn-brd);
  color: var(--ink); font-weight: 700; font-size: 13.5px; white-space: nowrap; text-decoration: none;
}
.ui-btn:hover, .ui-btn:focus-visible { background: var(--btn-hover); color: var(--ink); outline: none; }
.ui-btn .ui-i { width: 15px; height: 15px; }
.ui-btn--lg { height: 46px; }
.ui-btn--sm { height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.ui-btn--primary { background: var(--prim-btn); border-color: var(--prim-btn); color: #fff; }
.ui-btn--primary:hover, .ui-btn--primary:focus-visible { background: var(--prim-btn); color: #fff; filter: brightness(1.12); }
.ui-btn--green { background: var(--green-solid); border-color: var(--green-solid); color: #fff; }
.ui-btn--green:hover, .ui-btn--green:focus-visible { background: var(--green-solid); color: #fff; filter: brightness(1.08); }
.ui-btn--outline { background: transparent; border-color: var(--prim-brd); color: var(--prim-ink); }
.ui-btn--outline:hover, .ui-btn--outline:focus-visible { background: var(--prim-soft); color: var(--prim-ink); }
.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--prim-ink); }
.ui-btn--ghost:hover, .ui-btn--ghost:focus-visible { background: var(--prim-soft); color: var(--prim-ink); }
.ui-btn--soft { background: var(--inner); border-color: var(--border); color: var(--sub); }
.ui-btn--soft:hover { color: var(--ink); }
.ui-btn--icon { width: 44px; padding: 0; }
.ui-btn:disabled, .ui-btn[disabled] { opacity: .45; cursor: default; filter: none; }
.ui-btn--danger { color: var(--red-ink); border-color: var(--red-brd); }
.ui-btn--danger:hover { background: var(--red-soft); color: var(--red-ink); }

/* Champs */
.ui-input, .ui-select {
  height: 46px; border-radius: 12px; border: 1.5px solid var(--btn-brd); background: var(--white-btn);
  padding: 0 14px; font-size: 14px; color: var(--ink); outline: none; width: 100%;
}
.ui-input:focus, .ui-select:focus { border-color: var(--prim); }
.ui-input::placeholder { color: var(--faint); }
.ui-select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238F8EAE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; font-weight: 700; font-size: 13.5px; }
.ui-select--sm { height: 40px; }
.ui-search { position: relative; display: flex; align-items: center; }
.ui-search .ui-i { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.ui-search .ui-input { padding-left: 40px; }
.ui-kbd {
  padding: 2px 8px; border-radius: 6px; border: 1px solid var(--btn-brd);
  font-family: var(--font-mono); font-size: 11px; color: var(--faint); background: transparent;
}

/* Puces et badges */
.ui-tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--inner); border: 1px solid var(--border); color: var(--sub);
}
.ui-tag--lg { padding: 4px 10px; border-radius: 8px; letter-spacing: .08em; }
.ui-tag--prim { background: var(--prim-soft); border-color: var(--prim-brd); color: var(--prim-ink); }
.ui-tag--teal { background: var(--teal-soft); border-color: var(--teal-brd); color: var(--teal-ink); }
.ui-tag--green { background: var(--green-soft); border-color: var(--green-brd); color: var(--green-ink); }
.ui-tag--amber { background: var(--amber-soft); border-color: var(--amber-brd); color: var(--amber-ink); }
.ui-tag--red { background: var(--red-soft); border-color: var(--red-brd); color: var(--red-ink); }
.ui-tag--solid-green { background: var(--green-solid); border-color: var(--green-solid); color: #fff; }
.ui-tag--flat { border-color: transparent; }

/* Code mono (spécialités, options, compteurs) */
.ui-code {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 8px; border-radius: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--prim-soft); color: var(--prim-ink);
}
.ui-code--teal { background: var(--teal-soft); color: var(--teal-ink); }
.ui-code--amber { background: var(--amber-soft); color: var(--amber-ink); }
.ui-code--green { background: var(--green-soft); color: var(--green-ink); }
.ui-code--red { background: var(--red-soft); color: var(--red-ink); }
.ui-code--muted { background: var(--card); border: 1px solid var(--border); color: var(--sub); }
.ui-code--dropped { text-decoration: line-through; opacity: .55; }
.ui-code--lg { padding: 4px 9px; font-size: 12px; }
.ui-code--md { padding: 4px 10px; font-size: 12.5px; }

/* Grande puce tactile (44 px) pour spécialités / options */
.ui-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px;
  font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; white-space: nowrap;
  background: var(--prim-soft); border: 1.5px solid var(--prim-brd); color: var(--prim-ink); position: relative;
}
.ui-chip .ui-i { width: 13px; height: 13px; }
.ui-chip--soft { background: var(--inner); border-color: var(--border); color: var(--sub); }
.ui-chip--teal { background: var(--teal-soft); border-color: var(--teal-brd); color: var(--teal-ink); }
.ui-chip--amber { background: var(--amber-soft); border-color: var(--amber-brd); color: var(--amber-ink); }
.ui-chip--sm { height: 36px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
button.ui-chip { cursor: pointer; }
button.ui-chip:hover { border-color: var(--prim); }
.ui-chip.is-dropped { background: var(--red-soft); border: 2px solid var(--red-ink); color: var(--red-ink); }
.ui-chip.is-dropped::after { content: ''; position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; background: var(--red-ink); }

/* Avatar carré initiales */
.ui-avatar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px; background: var(--prim-soft); border: 1px solid var(--prim-brd);
  color: var(--prim-ink); font-weight: 800; font-size: 12.5px; letter-spacing: .02em;
}
.ui-avatar--lg { width: 62px; height: 62px; border-radius: 18px; font-size: 21px; }
.ui-avatar--md { width: 40px; height: 40px; font-size: 13px; }

/* Encart pointillé (état vide) */
.ui-empty {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; background: var(--inner); border: 1px dashed var(--btn-brd);
  font-size: 13px; color: var(--sub);
}
.ui-empty .ui-i { width: 15px; height: 15px; color: var(--faint); }
.ui-empty__meta { font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* Note d'information en bas de carte */
.ui-note { display: flex; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ui-note .ui-i { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; margin-top: 1px; }
.ui-note p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); text-wrap: pretty; }

/* Messages (succès / erreur / info) */
.ui-alert {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--inner); color: var(--sub);
}
.ui-alert .ui-i { width: 15px; height: 15px; flex-shrink: 0; }
.ui-alert--success { background: var(--green-soft); border-color: var(--green-brd); color: var(--green-ink); }
.ui-alert--error { background: var(--red-soft); border-color: var(--red-brd); color: var(--red-ink); }
.ui-alert--amber { background: var(--amber-soft); border-color: var(--amber-brd); color: var(--amber-ink); }
.ui-alert--info { background: var(--teal-soft); border-color: var(--teal-brd); color: var(--teal-ink); }
.ui-alert a { font-weight: 800; color: inherit; }

/* Pastille ronde (état, point) */
.ui-dot { display: inline-block; width: 9px; height: 9px; border-radius: 5px; }
.ui-dot--green { background: var(--green-solid); }
.ui-dot--prim { background: var(--prim); }
.ui-dot--amber { background: var(--amber-ink); }
.ui-dot--red { background: var(--red-ink); }
.ui-dot--hollow { border: 2px solid var(--faint); }

/* Grille responsive : passe en 1 colonne sous 1020 px (iPad portrait) */
@media (max-width: 1020px) {
  [data-grid] { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   7. Bootstrap : modales, formulaires, boutons aux couleurs de la charte
   ------------------------------------------------------------ */
.modal-content {
  background: var(--card); color: var(--ink); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-pop);
}
.modal-header { border-bottom: 1px solid var(--border); padding: 18px 22px 14px; }
.modal-header .modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 22px 18px; gap: 10px; }
.modal-backdrop { background-color: #18153C; }
.modal-backdrop.show { opacity: .5; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.btn-close { width: 44px; height: 44px; padding: 0; border-radius: 12px; background-size: 16px; opacity: .6; }
.btn-close:hover { background-color: var(--inner); opacity: 1; }

.form-control, .form-select {
  background-color: var(--white-btn); color: var(--ink); border: 1.5px solid var(--btn-brd); border-radius: 12px;
  min-height: 44px; font-size: 14px;
}
.form-control:focus, .form-select:focus { background-color: var(--white-btn); color: var(--ink); border-color: var(--prim); box-shadow: 0 0 0 3px var(--prim-soft); }
.form-control::placeholder { color: var(--faint); }
.form-control-sm, .form-select-sm { min-height: 38px; }
.form-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.form-check-input { width: 20px; height: 20px; margin-top: .1em; border: 1.5px solid var(--btn-brd); background-color: var(--white-btn); }
.form-check-input:checked { background-color: var(--prim); border-color: var(--prim); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--prim-soft); border-color: var(--prim); }
.form-check-label { font-size: 13.5px; font-weight: 600; }
.form-text, .text-muted { color: var(--sub) !important; }
.alert { border-radius: 12px; font-size: 13px; }
.alert-info { background: var(--teal-soft); border-color: var(--teal-brd); color: var(--teal-ink); }
.alert-warning { background: var(--amber-soft); border-color: var(--amber-brd); color: var(--amber-ink); }
.alert-danger { background: var(--red-soft); border-color: var(--red-brd); color: var(--red-ink); }
.alert-success { background: var(--green-soft); border-color: var(--green-brd); color: var(--green-ink); }
.alert-light, .alert-secondary { background: var(--inner); border-color: var(--border); color: var(--sub); }

.btn { border-radius: 12px; font-weight: 700; font-size: 13.5px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-sm { min-height: 38px; border-radius: 10px; font-size: 13px; }
.btn-primary { --bs-btn-bg: var(--prim-btn); --bs-btn-border-color: var(--prim-btn); --bs-btn-hover-bg: var(--prim-ink); --bs-btn-hover-border-color: var(--prim-ink); --bs-btn-active-bg: var(--prim-ink); --bs-btn-active-border-color: var(--prim-ink); --bs-btn-disabled-bg: var(--prim); --bs-btn-disabled-border-color: var(--prim); }
.btn-secondary, .btn-light { --bs-btn-bg: var(--white-btn); --bs-btn-border-color: var(--btn-brd); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--btn-hover); --bs-btn-hover-border-color: var(--btn-brd); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--btn-hover); --bs-btn-active-border-color: var(--btn-brd); --bs-btn-active-color: var(--ink); }
.btn-outline-primary { --bs-btn-color: var(--prim-ink); --bs-btn-border-color: var(--prim-brd); --bs-btn-hover-bg: var(--prim-soft); --bs-btn-hover-color: var(--prim-ink); --bs-btn-hover-border-color: var(--prim); --bs-btn-active-bg: var(--prim-soft); --bs-btn-active-color: var(--prim-ink); }
.btn-outline-secondary { --bs-btn-color: var(--sub); --bs-btn-border-color: var(--btn-brd); --bs-btn-hover-bg: var(--btn-hover); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--btn-brd); }
.btn-success { --bs-btn-bg: var(--green-solid); --bs-btn-border-color: var(--green-solid); --bs-btn-hover-bg: var(--green-ink); --bs-btn-hover-border-color: var(--green-ink); }
.btn-danger { --bs-btn-bg: var(--red-ink); --bs-btn-border-color: var(--red-ink); }
.btn-outline-danger { --bs-btn-color: var(--red-ink); --bs-btn-border-color: var(--red-brd); --bs-btn-hover-bg: var(--red-soft); --bs-btn-hover-color: var(--red-ink); --bs-btn-hover-border-color: var(--red-ink); }
.badge { font-weight: 700; }
.card { background: var(--card); border-color: var(--border); border-radius: 18px; color: var(--ink); }
.card-header { background: var(--inner); border-bottom-color: var(--border); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--inner); --bs-table-hover-bg: var(--inner); }
.dropdown-menu { background: var(--card); border-color: var(--border); border-radius: 14px; box-shadow: var(--shadow-pop); }
.dropdown-item { color: var(--ink); }
.dropdown-item:hover { background: var(--inner); color: var(--ink); }
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--sub); border-radius: 12px 12px 0 0; }
.nav-tabs .nav-link.active { background: var(--card); color: var(--prim-ink); border-color: var(--border) var(--border) var(--card); }
.list-group-item { background: var(--card); color: var(--ink); border-color: var(--border); }
.bg-light { background-color: var(--inner) !important; }
.border, .border-top, .border-bottom { border-color: var(--border) !important; }
.spinner-border.text-primary { color: var(--prim) !important; }

/* Éditeur Quill (dossier pédagogique) */
.ql-toolbar.ql-snow { border: 1.5px solid var(--btn-brd); border-radius: 12px 12px 0 0; background: var(--inner); }
.ql-container.ql-snow { border: 1.5px solid var(--btn-brd); border-top: 0; border-radius: 0 0 12px 12px; background: var(--white-btn); color: var(--ink); font-family: var(--font-ui); font-size: 14px; }
.ql-snow .ql-stroke { stroke: var(--sub); }
.ql-snow .ql-fill { fill: var(--sub); }
.ql-snow .ql-picker { color: var(--sub); }

/* ------------------------------------------------------------
   8. Pied de page + bouton de retour
   ------------------------------------------------------------ */
.app-footer {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding: 18px 70px 0 0; border-top: 1px solid var(--border);
}
.app-footer__logo { width: 38px; height: 38px; border-radius: 12px; background: var(--rail); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-footer__logo img { width: 32px; height: 32px; display: block; }
.app-footer__brand { display: block; font-weight: 800; font-size: 13.5px; }
.app-footer__motto { display: block; font-size: 12px; color: var(--faint); font-weight: 600; }
.app-footer__meta { font-size: 12.5px; color: var(--sub); font-weight: 600; }
.app-footer__legal { font-size: 12.5px; font-weight: 700; }
.app-footer a { font-size: 12.5px; font-weight: 700; }

.feedback-float-btn {
  position: fixed; z-index: 1030;
  right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  width: 50px; height: 50px; border-radius: 16px; border: 0;
  background: var(--prim-btn); color: #fff; box-shadow: 0 12px 28px -10px rgba(35,32,90,.55);
  display: flex; align-items: center; justify-content: center;
}
.feedback-float-btn .ui-i { width: 20px; height: 20px; }
.feedback-float-btn:hover { filter: brightness(1.12); }

/* ------------------------------------------------------------
   9. Écrans étroits : rail réduit (icônes seules)
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  :root { --rail-w: 64px; }
  .rail { padding: calc(10px + env(safe-area-inset-top)) 6px calc(10px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); }
  .rail__logo img { width: 44px; height: 44px; }
  .rail__group, .rail__item { width: 52px; }
  .rail__label, .rail__context-term, .rail__user-role { display: none; }
  .rail__context { width: auto; padding: 5px 6px; font-size: 10px; }
  .app-main { padding: calc(16px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 14px; }
  .rail__menu { min-width: 220px; }
}
/* Écrans peu hauts (Split View, téléphone en paysage) : le rail se compacte
   pour que le thème et le menu du compte restent atteignables. */
@media (max-height: 640px) {
  .rail { padding: calc(8px + env(safe-area-inset-top)) 6px calc(8px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); gap: 2px; }
  .rail__logo { margin-bottom: 4px; }
  .rail__logo img { width: 44px; height: 44px; }
  .rail__item { padding: 7px 0 6px; gap: 3px; }
  .rail__label { font-size: 9px; }
  .rail__context { width: auto; padding: 4px 8px; }
  .rail__context-term { display: none; }
  .rail__iconbtn { width: 40px; height: 40px; margin-top: 4px; }
  .rail__user { margin-top: 4px; }
  .rail__avatar { width: 36px; height: 36px; font-size: 14px; }
}
@media print {
  .rail, .feedback-float-btn, .app-footer { display: none !important; }
  .app-main { padding: 0; }
  html, body { background: #fff; }
}

/* Overlay de bascule de rôle (role_switcher.js ajoute .show) */
#roleTransitionOverlay.show { display: flex !important; }