/* Shared palette for the site, including login and first setup. */
:root {
  color-scheme: light dark;
  --page: #f4f6fa;
  --surface: #ffffff;
  --surface-soft: #f9fbfe;
  --text: #172d46;
  --muted: #52677b;
  --border: #d2dce7;
  --link: #174d7b;
  --notice: #e6eef6;
  --button: #153e64;
  --button-text: #ffffff;
  color: var(--text);
  background: var(--page);
}
body { background: var(--page); color: var(--text); }
#useful-links .cards>div{padding:18px;background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;min-width:0}
#useful-links .cards>div>a{font-weight:700;display:block;padding:0;border:0;background:transparent}
#useful-links .link-credentials{overflow-wrap:anywhere;padding:10px;background:var(--notice);border-radius:8px}
:root a { color: var(--link); }
aside { background: #102943; color: #ffffff; overflow-y: auto; }
:root aside nav a, :root aside nav a:visited { color: #ffffff; white-space: nowrap; font-size: 14px; }
aside { padding-left: 16px; padding-right: 16px; }
:root aside nav a:hover { background: #234965; color: #ffffff; }
:root aside nav a.active { background: #284761; color: #ffffff; border-left: 3px solid #e2be64; }
.brand { align-items: center; }
.brand-logo { width: 62px; height: 80px; object-fit: contain; flex-shrink: 0; }
.login-brand { display: flex; align-items: center; gap: 18px; }
.login-brand .brand-logo { width: 56px; height: 72px; }
section { background: var(--surface); border-color: var(--border); }
.cards a { background: var(--surface-soft); border-color: var(--border); }
.cards a:hover { border-color: var(--link); }
.notice { background: var(--notice); }
.muted, footer, .eyebrow, th { color: var(--muted); }
td, th { border-color: var(--border); }
button, input, select, textarea { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
textarea { font: inherit; padding: 11px 14px; border-radius: 8px; max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.primary { background: var(--button); color: var(--button-text); }
.badge { background: #f9e9bc; color: #69541e; }
.errorlist, #message.error { color: #a52323; }
.helptext { font-size: 13px; color: var(--muted); line-height: 1.5; }
:focus-visible { outline: 3px solid #b08720; outline-offset: 3px; }
aside :focus-visible { outline-color: #f1cb70; }
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d1724;
    --surface: #162437;
    --surface-soft: #1c2d43;
    --text: #e8eef6;
    --muted: #b3c3d6;
    --border: #3d526b;
    --link: #9dceff;
    --notice: #213b54;
    --button: #a9d3ff;
    --button-text: #102943;
  }
  .badge { background: #514321; color: #ffe3a0; }
  .errorlist, #message.error { color: #ffb3b3; }
  #message { color: #a3e5bd; }
  section { box-shadow: none; }
  :focus-visible { outline-color: #f1cb70; }
}
@media (max-width: 750px) {
  .brand-logo { width: 42px; height: 54px; }
  aside { overflow-y: visible; }
  :root aside nav a { padding: 10px; }
}

/* Navigation follows the approved mockup: a drawer on mobile. */
#menu-toggle { display: none; }
#menu-backdrop { position: fixed; inset: 0; z-index: 90; border: 0; border-radius: 0; background: #07121cb3; }
:root aside nav { display: grid; margin: 24px 0; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.form-grid input,.form-grid select,.form-grid textarea { width: 100%; min-width: 0; }
.form-grid p { display: grid; gap: 8px; margin: 0; }
.tabs,.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.tabs a,.actions a { padding: 10px 14px; border: 1px solid var(--border); border-radius: 9px; text-decoration: none; background: var(--surface); }
.tabs a.active { background: var(--button); color: var(--button-text); }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.stat-grid section { margin: 0; }
@media (max-width:750px) {
  #menu-toggle { display: inline-flex; flex-shrink: 0; font-size: 22px; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  #site-menu { position: fixed; inset: 0 auto 0 0; width: min(280px,85vw); height: 100dvh; z-index: 100; overflow-y: auto; display: none; padding: 24px 18px; }
  body.menu-open #site-menu { display: block; }
  body.menu-open { overflow: hidden; }
  #site-menu p,#site-menu small { display: block; }
  main>header { gap: 12px; }
  main>header .eyebrow { font-size: 9px; }
  main>header h1 { font-size: 23px; margin-bottom: 16px; }
  .form-grid,.stat-grid { grid-template-columns: 1fr; }
}

:root a.primary, :root a.primary:visited { display:inline-flex; align-items:center; padding:11px 16px; border-radius:8px; background:var(--button); color:var(--button-text); text-decoration:none; }

.given-name{font-weight:400}.surname{font-weight:700}

input[name="last_name"]{font-weight:700}input[name="first_name"],input[name="all_first_names"]{font-weight:400}

input[name="last_name"]{font-weight:700}input[name="first_name"],input[name="all_first_names"]{font-weight:400}

.trombinoscope{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}.trainee-card{display:flex;flex-direction:column;gap:7px;text-decoration:none;border:1px solid var(--border);background:var(--surface-soft);border-radius:14px;padding:12px}.portrait{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}.student-portrait .portrait{width:150px}.trainee-card small{color:var(--muted)}
@media(max-width:600px){.trombinoscope{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.trainee-card{padding:8px;overflow-wrap:anywhere}.trainee-card small{font-size:.8rem}}
.student-overview{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:20px;align-items:start}
.student-overview .student-portrait .portrait{display:block;width:104px;margin:0 auto 8px}
.photo-tools,.photo-tools form{display:flex;align-items:center;justify-content:center;gap:4px;margin:0}
.photo-tools{gap:4px}.photo-browse{font-size:.75rem;border:1px solid var(--border);border-radius:7px;padding:10px 5px;cursor:pointer;background:var(--surface-soft);margin:0}
.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:38px;padding:6px;border-radius:7px}
.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.phone-field{display:flex;gap:6px;align-items:center}.phone-field input{min-width:0;flex:1}.student-call[hidden]{display:none!important}
.watch-tribord{--watch-color:#167246;--watch-bg:#e1f4e9}.watch-babord{--watch-color:#ae2934;--watch-bg:#fce7e9}.watch-none{--watch-color:var(--muted);--watch-bg:var(--surface-soft)}
.trainee-card.watch-tribord,.trainee-card.watch-babord{border-top:5px solid var(--watch-color)}
.watch-badge{display:inline-block;align-self:start;font-size:.8rem;font-weight:700;color:var(--watch-color);background:var(--watch-bg);border:1px solid var(--watch-color);border-radius:6px;padding:4px 7px}
dialog{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:14px;max-width:min(420px,85vw);padding:22px}dialog::backdrop{background:#091726a8}
@media(prefers-color-scheme:dark){.watch-tribord{--watch-color:#76daa5;--watch-bg:#153b2b}.watch-babord{--watch-color:#ff919b;--watch-bg:#49242a}}
@media(max-width:600px){.student-overview{grid-template-columns:minmax(0,1fr) 140px;gap:10px}.student-overview .stat-grid{gap:8px}.student-overview .stat-grid strong{font-size:1rem}.student-overview .stat-grid p{font-size:.8rem;margin:4px 0}.photo-tools .icon-button{min-height:44px}.watch-badge{font-size:.7rem}.student-overview .stat-grid{grid-template-columns:1fr}}
.portrait-open{padding:0;border:0;background:transparent;cursor:zoom-in;display:block;margin:auto;line-height:0}
.portrait-open:focus-visible{outline:3px solid #2583d9;outline-offset:4px}
.portrait-view{width:min(80vw,480px);max-width:92vw;padding:16px}
.portrait-view [data-portrait-close]{display:block;margin:0 0 10px auto}
.portrait-large{display:block;width:100%;max-width:100%;max-height:75dvh;object-fit:contain;margin:auto}
#action-confirm-dialog{max-width:min(90vw,520px)}
.document-batch{margin:12px 0 20px;border:1px solid var(--border,#8d9aaa);border-radius:10px;padding:12px}
.document-batch>summary{font-weight:600;cursor:pointer}
.document-queue-row{padding:12px 0;border-bottom:1px solid var(--border,#8d9aaa)}
.document-suggestion{font-size:.9rem}
.student-information-grid{width:100%}
.student-information-grid .full-width-field{grid-column:1/-1}
@media(min-width:1000px){.student-information-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.contact-status-form{margin:0 0 16px;align-items:center;gap:10px}
.contact-status-form label{display:flex;align-items:center;gap:8px}
.contact-status-form button{padding:6px 10px;font-size:.8rem}
.trainee-status-icons{display:flex;gap:10px}
.trainee-status-icons:empty{display:none}
.trainee-alert-icon{color:#c52236;display:inline-flex}
.trainee-alert-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-color-scheme:dark){.trainee-alert-icon{color:#ff7e8d}}

main>header .year-filter{margin-left:auto;margin-top:0;align-items:center;display:flex;gap:8px}main>header .year-filter label{margin:0}main>header .year-filter button{display:none}.environment-badge{display:inline-block;margin-top:18px}.call-day select{font-size:1.2rem;font-weight:700;min-height:48px}.call-day form{margin:8px 0;display:flex}.call-day label{margin:0}@media(max-width:700px){main>header{flex-wrap:wrap}main>header .year-filter{width:100%;margin-left:0}}

.environment-badge.environment-preprod{background:#b4232a;color:#fff;border:1px solid #f06a70}

main>header>div:has(.call-day){display:grid;grid-template-columns:auto auto;align-items:center;gap:8px 24px}main>header>div:has(.call-day)>.eyebrow{grid-column:1 / -1}.call-day form{margin:0}.call-day label{font-size:0}.call-day select{font-size:1.2rem}@media(max-width:700px){main>header>div:has(.call-day){grid-template-columns:1fr}}

.menu-picto{display:inline-block;width:24px;text-align:center;margin-right:5px;font-size:1rem}.space-icons{grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:14px}.space-icons .space-icon{position:relative;display:flex;align-items:center;justify-content:center;min-height:85px;padding:18px;font-size:2.2rem}.space-icons .space-icon>span{float:none}.space-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:8px;background:var(--text);color:var(--surface);font-size:.85rem;white-space:nowrap;z-index:5;pointer-events:none}@media(hover:hover){.space-icon:hover .space-tooltip,.space-icon:focus-visible .space-tooltip{display:block}}#effect-replace{margin-top:10px}
.space-icons{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:600px){.space-icons{gap:7px}.space-icons .space-icon{padding:8px;min-height:60px;font-size:1.6rem}}

:root aside nav a[href$="/univers/historique/"] { font-size: 12px; }

.generated-buttons{display:inline-flex;flex-wrap:wrap;gap:10px;margin:5px 8px;vertical-align:middle}
.generated-download,.generated-buttons a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 13px;border:1px solid var(--border);border-radius:8px;text-decoration:none!important;background:var(--surface);color:var(--text);box-sizing:border-box}
.generated-download{margin:5px 8px 5px 0;background:var(--button);color:var(--button-text)!important}
.generated-buttons a.generated-delete{border-color:#c94848;color:#c94848}
.generated-buttons a:hover,.generated-download:hover{filter:brightness(.92)}
@media(prefers-color-scheme:dark){.generated-buttons a.generated-delete{border-color:#f08d8d;color:#f08d8d}}

/* Keep offline import failures clearly visible in both colour schemes. */
.notice.offline-import-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #f4b4b4;
}

/* Link recipients remain aligned with their checkboxes at every screen size. */
.useful-link-form{display:grid;gap:18px;max-width:850px}
.useful-link-form fieldset{min-width:0;border:1px solid var(--border);border-radius:10px;padding:16px}
.useful-link-form .link-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.useful-link-form input:not([type=checkbox]),.useful-link-form select{width:100%}
.useful-link-form .inline-choice,.link-recipients label{display:flex;align-items:center;gap:10px;margin:9px 0}
.useful-link-form input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:0;padding:0}
.useful-link-form input[readonly]{background:var(--notice);cursor:default}
#create-account-dialog{width:calc(100% - 32px);max-width:540px;max-height:90vh;overflow:auto}
#create-account-dialog form{display:grid;gap:16px}
#create-account-dialog input,#create-account-dialog select{width:100%}
@media(max-width:650px){.useful-link-form .link-fields{grid-template-columns:1fr}}

.auth-shell{margin:35px auto;max-width:650px;width:100%;padding:20px}
.auth-form{display:grid;gap:16px}.auth-form input{width:100%}
.auth-form .inline-choice{display:flex;align-items:center;gap:10px;line-height:1.5}
.auth-form input[type=checkbox],.auth-form input[type=radio]{width:18px;height:18px;flex:0 0 18px;padding:0;margin:0}
.auth-form #id_access_mode label{display:flex;align-items:center;gap:10px;margin:10px 0}
.mfa-manual,.mfa-qr{padding:14px;border:1px solid var(--border);border-radius:10px;margin:15px 0}
.mfa-manual summary,.mfa-qr summary{font-weight:600;cursor:pointer}.mfa-manual ol{padding-left:22px}.mfa-manual li{padding:5px 0;line-height:1.5}
.mfa-manual input{width:100%;font-family:monospace;font-size:15px}.mfa-manual button{margin-top:8px}
.mfa-qr img{display:block;width:260px;max-width:100%;height:auto;margin:15px auto;background:white}
.backup-codes{width:100%;padding:12px;font:16px/1.8 monospace;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px}
.limited-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--notice);border:1px solid var(--border);padding:10px 14px;border-radius:10px;margin:10px 0}
.limited-banner form{margin:0}.limited-banner span{font-weight:600;font-size:14px}
.trusted-device{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}
@media(max-width:650px){.auth-shell{margin:0 auto;padding:16px}.limited-banner{display:block}.limited-banner form{margin-top:10px}.trusted-device{display:block}}