/* StudyCanada — portail interne, thème sombre.
 * Charger APRÈS la feuille de style du portail. Aucun changement HTML requis.
 * Palette et pile typographique du site public, relevées le 21 octobre 2026.
 * Aucune dépendance, police distante, image CSS ou JavaScript.
 */
:root {
  color-scheme: dark;
  --sc-bg: #151720;
  --sc-surface: #1d202b;
  --sc-raised: #252836;
  --sc-ink: #f3f0fa;
  --sc-text: #d2d8ed;
  --sc-muted: #bdbbcb;
  --sc-border: #414152;
  --sc-pink: #ff99bd;
  --sc-purple: #c5b7ff;
  --sc-primary: #b51350;
  --sc-green: #8be1b5;
  --sc-orange: #ffd08a;
  --sc-red: #ffadb5;
  --sc-width: 1240px;
  --sc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sc-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; background: var(--sc-bg); scroll-padding-top: 1.5rem; }
body {
  margin: 0; min-height: 100vh; background: var(--sc-bg); color: var(--sc-text);
  font: 400 16px/1.65 var(--sc-font); -webkit-text-size-adjust: 100%;
}
::selection { background: #594364; color: #fff; }
a { color: var(--sc-pink); text-underline-offset: .22em; overflow-wrap: anywhere; }
a:hover { color: #ffbfd6; }
:where(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--sc-purple); outline-offset: 4px;
}
[hidden] { display: none !important; }

/* L'entête et le contenu partagent exactement le même axe. */
header.entete {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.1rem; row-gap: 1rem;
  padding: 1.25rem max(1.5rem, calc((100% - var(--sc-width)) / 2));
  background: var(--sc-surface); color: var(--sc-ink);
  border-bottom: 1px solid #333644; box-shadow: none;
}
.entete .logo {
  display: block; height: 36px; width: auto; max-width: 100%; flex: 0 0 auto;
  object-fit: contain; background: transparent; border: 0; border-radius: 0;
}
.entete .marque {
  font-size: .82rem; font-weight: 650; color: var(--sc-muted);
  letter-spacing: .065em; line-height: 1.35;
  padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--sc-border);
}
.entete:not(:has(.logo)) .marque { border: 0; padding: 0; color: var(--sc-ink); }
.entete .compte {
  margin-inline-start: auto; color: var(--sc-muted); opacity: 1;
  font-size: .82rem; font-weight: 400; line-height: 1.5;
}
.entete .compte a { color: var(--sc-text); font-weight: 500; text-decoration: underline; }
.entete .menu {
  order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .3rem;
  margin: 0; padding: 0; min-width: 0;
}
.entete .menu a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .58rem .9rem; border: 1px solid transparent;
  border-radius: 12px; font-size: .88rem; font-weight: 600;
  line-height: 1.25; color: var(--sc-muted); text-decoration: none;
}
.entete .menu a:hover { background: var(--sc-raised); color: var(--sc-ink); }
.entete .menu a.actif, .entete .menu a[aria-current="page"] {
  color: var(--sc-pink); background: #342531; border-color: #795269;
  box-shadow: inset 0 -2px 0 var(--sc-pink);
}

main.contenu {
  width: calc(100% - 3rem); max-width: var(--sc-width);
  min-width: 0; margin: 2.5rem auto 5rem; padding: 0;
}
.contenu h1, .contenu h2, .contenu h3 { color: var(--sc-ink); overflow-wrap: anywhere; }
.contenu h1 {
  font-size: clamp(1.95rem, 3.8vw, 2.8rem); line-height: 1.15;
  font-weight: 750; letter-spacing: -.045em; margin: 0 0 1.65rem;
}
.contenu h1::before {
  content: ""; display: block; width: 46px; height: 4px; margin-bottom: 1rem;
  border-radius: 4px; background: linear-gradient(90deg, var(--sc-pink), var(--sc-purple));
}
.contenu h2 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.02em; margin: 1.8rem 0 .85rem; }
.contenu h3 { font-size: 1.08rem; line-height: 1.4; margin: 1.4rem 0 .7rem; }
.contenu p { margin: .8rem 0; }
.contenu strong, .contenu b { font-weight: 700; }
.contenu small { color: var(--sc-muted); font-size: .82rem; line-height: 1.55; }
.contenu hr { border: 0; border-top: 1px solid var(--sc-border); margin: 1.5rem 0; }
.contenu .card {
  padding: clamp(1.15rem, 2.5vw, 1.8rem); margin: 1.15rem 0;
  color: var(--sc-text); background: var(--sc-surface);
  border: 1px solid #353847; border-radius: 20px;
  box-shadow: 0 8px 26px #00000012; min-width: 0;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card .card { background: #202330; border-color: #3c3e50; box-shadow: none; }
.contenu > .card:first-of-type {
  background: radial-gradient(ellipse at 100% 0%, #30283b 0, transparent 55%), var(--sc-surface);
}

/* États : les couleurs gardent leur sens, y compris dans les tableaux. */
.ok { color: var(--sc-green); }
.warn { color: var(--sc-orange); }
.err { color: var(--sc-red); }
p.ok, p.warn, p.err, .msg {
  padding: .85rem 1.05rem; border: 1px solid; border-inline-start-width: 3px;
  border-radius: 12px; font-size: .95rem; line-height: 1.55;
}
p.ok, .msg { color: #a3edc6; background: #1b302a; border-color: #487663; }
p.warn { color: #ffd89d; background: #352b20; border-color: #92734c; }
p.err { color: #ffbec4; background: #38242c; border-color: #985563; }

/* Les journaux conservent leurs espaces, se replient et restent sélectionnables. */
.contenu pre {
  font: 400 14px/1.75 var(--sc-mono); color: var(--sc-text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  tab-size: 4; margin: 1rem 0; padding: 1.15rem 1.25rem;
  border: 1px solid #343847; border-radius: 14px; background: #11141c;
  max-width: 100%; max-height: 65vh; overflow: auto;
  scrollbar-color: #67647c #11141c; scrollbar-width: thin;
}
.contenu code { font: .88em/1.65 var(--sc-mono); color: #d7cbff; background: #2a263c; padding: .16em .38em; border-radius: 5px; overflow-wrap: anywhere; }
.contenu pre code { font: inherit; color: inherit; background: transparent; padding: 0; }
.contenu table {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  margin: 1rem 0; font-size: .9rem; line-height: 1.55;
  border: 1px solid #3b3e4e; border-radius: 14px; background: var(--sc-surface);
}
.contenu th, .contenu td {
  padding: .9rem 1rem; text-align: start; vertical-align: top;
  border: 0; border-bottom: 1px solid #363947; overflow-wrap: anywhere;
}
.contenu th { color: var(--sc-ink); background: #2a2b3c; font-size: .83rem; font-weight: 700; }
.contenu th:first-child { border-start-start-radius: 13px; }
.contenu th:last-child { border-start-end-radius: 13px; }
.contenu tr:last-child td { border-bottom: 0; }
.contenu tbody tr:nth-child(even) td { background: #222532; }
.contenu tbody tr:hover td { background: #2b2c3b; }
.contenu td .btn, .contenu td button { margin: 0; }

/* Contrôles natifs, sans dépendre de nouveaux wrappers ou classes. */
.contenu form { margin: 1rem 0 0; min-width: 0; }
.contenu label { display: block; margin: .95rem 0 .4rem; color: var(--sc-text); font-size: .94rem; font-weight: 600; }
.contenu :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea) {
  box-sizing: border-box; color: var(--sc-ink); background: #151821;
  border: 1px solid #656077; border-radius: 10px; padding: .72rem .85rem;
  font: 400 1rem/1.5 var(--sc-font); min-height: 46px;
  max-width: 100%; margin: .25rem .4rem .65rem 0;
}
.contenu input[type=text], .contenu input[type=password], .contenu input[type=email], .contenu input[type=search] { width: 100%; max-width: 30rem; }
.contenu textarea { display: block; width: 100%; min-height: 22rem; resize: vertical; font: 14px/1.75 var(--sc-mono); }
.contenu :is(input,textarea)::placeholder { color: #a5a8bb; opacity: 1; }
.contenu select { min-width: min(15rem, 100%); cursor: pointer; }
.contenu option { color: var(--sc-ink); background: var(--sc-surface); }
.contenu input[type=file] { width: 100%; padding: .55rem; overflow: hidden; }
.contenu input[type=file]::file-selector-button {
  font: 600 .85rem/1.4 var(--sc-font); padding: .65rem .9rem; margin-inline-end: .8rem;
  color: var(--sc-purple); background: #2a263c; border: 1px solid #66607c;
  border-radius: 8px; cursor: pointer;
}
.contenu :is(input[type=checkbox],input[type=radio]) { width: 18px; height: 18px; accent-color: var(--sc-primary); vertical-align: middle; }
.contenu label:has(input[type=checkbox]), .contenu label:has(input[type=radio]) { font-weight: 400; }
.contenu fieldset { min-width: 0; border: 1px solid var(--sc-border); border-radius: 14px; padding: 1rem; margin: 1rem 0; }
.contenu legend { padding-inline: .5rem; color: var(--sc-purple); font-weight: 650; }
button, .btn, input[type=submit], input[type=button] {
  font: 650 .94rem/1.4 var(--sc-font); color: #fff;
  background: var(--sc-primary); border: 1px solid transparent;
  border-radius: 12px; padding: .75rem 1.25rem; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center; cursor: pointer;
  margin: .3rem .45rem .3rem 0; max-width: 100%; white-space: normal;
  transition: background-color .16s, border-color .16s;
}
button:hover, .btn:hover, input[type=submit]:hover { background: #ce1b60; color: #fff; }
button.sec, .btn.sec { background: #2a263c; color: var(--sc-purple); border-color: #71678e; }
button.sec:hover, .btn.sec:hover { background: #38314e; border-color: var(--sc-purple); }
button.danger, .btn.danger { background: #a93041; color: #fff; border-color: #d36272; }
button.danger:hover, .btn.danger:hover { background: #c13a4d; }
:is(button,input,select,textarea):disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.contenu input[readonly], .contenu textarea[readonly] { background: #202330; color: var(--sc-muted); }
.contenu details {
  margin: 1rem 0; padding: 0 1.1rem; border: 1px solid var(--sc-border);
  border-radius: 14px; background: #1b1d29;
}
.contenu summary { padding: .95rem 0; color: var(--sc-purple); cursor: pointer; font-weight: 650; }
.contenu summary::marker { color: var(--sc-pink); }
.contenu details[open] { padding-bottom: 1rem; }
.contenu details[open] > summary { margin-bottom: .8rem; border-bottom: 1px solid var(--sc-border); }

/* Connexion : détectée par l'absence du menu, sans classe à ajouter au HTML. */
body:has(> .entete):not(:has(> .entete .menu)) main.contenu { max-width: 540px; margin-block-start: clamp(2.5rem, 8vh, 6rem); }
body:has(> .entete):not(:has(> .entete .menu)) .card button { width: 100%; margin-inline: 0; margin-top: 1rem; }
body:has(> .entete):not(:has(> .entete .menu)) .card input { max-width: 100%; }

@media (max-width: 700px) {
  header.entete { padding: 1rem; gap: .8rem; }
  .entete .logo { order: 0; }
  .entete .compte { order: 1; font-size: .75rem; }
  .entete .marque { order: 2; flex-basis: 100%; padding: 0; border: 0; font-size: .75rem; }
  .entete .menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .entete .menu a { font-size: .8rem; padding: .55rem .45rem; min-width: 0; }
  main.contenu { width: calc(100% - 2rem); margin-top: 1.8rem; }
  .contenu .card { border-radius: 16px; padding: 1.1rem; }
  .contenu pre { font-size: 13px; padding: .9rem; max-height: 60vh; }
  .contenu table { display: block; overflow-x: auto; table-layout: auto; scrollbar-color: #67647c #1d202b; }
  .contenu th, .contenu td { min-width: 9rem; padding: .8rem; }
  .contenu th:first-child, .contenu td:first-child { min-width: 12rem; }
  .contenu :is(input[type=text],input[type=password],input[type=email],select) { width: 100%; margin-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media (forced-colors: active) {
  .entete .menu a.actif { outline: 2px solid Highlight; }
  button, .btn, .card { border: 1px solid ButtonText; }
}
@media print {
  :root { color-scheme: light; }
  body, header.entete, .contenu .card, .contenu pre, .contenu table, .contenu td, .contenu th { background: #fff !important; color: #111 !important; box-shadow: none; }
  .contenu h1, .contenu h2, .contenu h3, .contenu small { color: #111; }
  .entete .menu, .entete .compte, .entete .logo, button { display: none; }
  .entete .marque { color: #111; border: 0; padding: 0; }
  main.contenu { width: 100%; margin: 1.5rem 0; }
  .contenu pre { max-height: none; overflow: visible; }
  .contenu table { display: table; table-layout: fixed; }
}