/* Shared platform shell and reference-inspired visual design. */
:root {
  --ink:#102c50;
  --muted:#526a86;
  --blue:#0662cd;
  --line:#dce7f1;
  --light:#f2f7fc;
  --sidebar:246px;
  --header:88px
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  font-family:'Segoe UI',Arial,sans-serif;
  background:#f2f7fc
}
button,.button,.field input,.field select,.field textarea {
  font-family:inherit
}
.ui-icon {
  width:24px;
  height:24px;
  flex-shrink:0
}
a {
  transition:color .2s,background .2s
}
.header {
  position:sticky;
  top:0;
  z-index:30;
  height:var(--header);
  padding:0 28px;
  gap:28px;
  flex-wrap:nowrap;
  box-shadow:0 2px 12px #173c6010
}
.header>.brand:first-child {
  width:218px;
  height:82px
}
.header>.brand:first-child img {
  width:232px;
  height:232px;
  left:-10px;
  top:-72px
}
.menu-toggle {
  display:none;
  padding:10px;
  background:#eef4fa;
  color:#14375b
}
.sidebar {
  position:fixed;
  left:0;
  top:var(--header);
  bottom:0;
  width:var(--sidebar);
  z-index:25;
  padding:28px 20px 22px;
  background:linear-gradient(155deg,#092338,#173a5c);
  color:#c5d7ed;
  display:flex;
  flex-direction:column;
  overflow:auto
}
.platform-brand {
  display:flex;
  align-items:center;
  gap:17px;
  color:#fff;
  margin:0 10px 30px
}
.platform-brand .ui-icon {
  width:43px;
  height:43px;
  color:#56adff;
  stroke-width:2
}
.platform-brand strong {
  font-size:35px;
  letter-spacing:-1px
}
.nav-caption {
  font-size:9px;
  letter-spacing:.16em;
  font-weight:600;
  color:#819fbe;
  margin:0 13px 12px
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:8px
}
.sidebar nav a,.sidebar nav button {
  display:flex;
  align-items:center;
  gap:15px;
  min-height:50px;
  padding:12px 14px;
  border-radius:9px;
  color:#c7d8ed;
  background:transparent;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
  justify-content:flex-start
}
.sidebar nav a[aria-current=page] {
  background:linear-gradient(110deg,#0068d7,#0755ab);
  color:#fff;
  font-weight:600;
  box-shadow:0 6px 18px #001a352a
}
.sidebar nav a:hover,.sidebar nav button:hover {
  background:#ffffff13;
  color:#fff;
  transform:none
}
.nav-divider {
  height:1px;
  background:#52708a70;
  margin:20px 12px 12px
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#57c899;
  border-radius:50%;
  margin-right:7px
}
.platform-body {
  margin-left:var(--sidebar);
  min-height:calc(100vh - var(--header));
  background:radial-gradient(ellipse at 85% 0,#dceefe 0,transparent 65%),#f3f8fc
}
main {
  position:relative;
  max-width:1440px;
  padding:45px 44px 36px;
  min-height:calc(100vh - var(--header) - 64px);
  isolation:isolate
}
.eyebrow {
  font-size:11px;
  letter-spacing:.2em;
  font-weight:700;
  color:#174879;
  margin-bottom:17px
}
h1 {
  font-size:clamp(31px,3.05vw,48px);
  font-weight:750;
  line-height:1.15;
  letter-spacing:-.04em
}
h1 em {
  font-style:normal;
  color:#0763c3
}
.cards {
  gap:22px
}
.card::before {
  display:none
}
.button:hover,button:hover {
  filter:brightness(.97)
}
.platform-body footer {
  padding:20px 24px;
  background:transparent;
  border-color:#e1eaf2;
  font-size:11px;
  color:#62758b
}
.platform-body footer a {
  font-weight:600
}
.intro {
  max-width:760px;
  margin-bottom:30px
}
.platform-inner main {
  max-width:1150px
}
.platform-inner .intro h1 {
  font-size:36px
}
.panel {
  border:1px solid #dce6ef;
  border-radius:15px;
  box-shadow:0 4px 24px #1b416206;
  padding:30px
}
.field {
  font-size:13px;
  gap:8px
}
.field input,.field select,.field textarea {
  font-size:15px;
  background:#fbfdff;
  border-color:#d1deea;
  border-radius:8px
}
.form-grid {
  gap:22px 24px
}
.notice {
  border-left:3px solid #6ca7d9;
  background:#edf5fc;
  color:#436582;
  line-height:1.7
}
.notice.success {
  background:#eff9f2;
  border-color:#4e9d69;
  color:#286a3e
}
.about-dialog {
  width:min(560px,calc(100% - 32px));
  padding:35px;
  border:1px solid #d6e5f1;
  border-radius:20px;
  color:var(--ink);
  box-shadow:0 25px 100px #08213e40
}
.about-dialog::backdrop {
  background:#051c36a3;
  backdrop-filter:blur(4px)
}
.about-dialog .close-about {
  position:absolute;
  right:14px;
  top:12px;
  background:#edf4fa;
  color:#23476a;
  padding:2px 12px;
  font-size:26px
}
.about-dialog p {
  font-size:14px;
  color:#526982
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  background:#fff;
  padding:12px 20px;
  z-index:100
}
.skip:focus {
  top:8px
}
.sidebar-shade {
  position:fixed;
  inset:var(--header) 0 0;
  z-index:24;
  background:#061a3590
}
#main:focus {
  outline:none
}
.platform-inner summary {
  font-size:19px;
  color:#154c82
}
section[id],#member-contribution {
  scroll-margin-top:115px
}
.badge {
  font-size:11px
}
button:disabled {
  filter:none
}
@media(min-width:1600px) {
  main {
    padding:50px 60px
  }
}
@media(max-width:1200px) {
  :root {
    --sidebar:220px
  }
  .header {
    padding-inline:20px;
    gap:20px
  }
  .header>.brand:first-child {
    width:195px
  }
  main {
    padding:35px 28px
  }
  .sidebar {
    padding-inline:14px
  }
}
@media(max-width:950px) {
  :root {
    --header:80px;
    --sidebar:220px
  }
  .header>.brand:first-child {
    width:190px;
    height:75px
  }
  .header>.brand:first-child img {
    width:210px;
    height:210px;
    top:-66px;
    left:-8px
  }
  .cards {
    grid-template-columns:1fr
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .full {
    grid-column:auto
  }
  .platform-inner .intro h1 {
    font-size:30px
  }
  .panel {
    padding:24px
  }
}
@media(max-width:760px) {
  :root {
    --header:76px
  }
  .header {
    padding:0 16px;
    gap:12px
  }
  .header>.brand:first-child {
    width:175px;
    height:70px
  }
  .header>.brand:first-child img {
    width:190px;
    height:190px;
    top:-59px;
    left:-8px
  }
  .menu-toggle {
    display:flex;
    padding:8px
  }
  .menu-toggle .ui-icon {
    width:22px;
    height:22px
  }
  .sidebar {
    transform:translateX(-100%);
    transition:transform .25s;
    width:260px
  }
  .menu-open .sidebar {
    transform:translateX(0)
  }
  .platform-body {
    margin-left:0
  }
  main {
    padding:30px 22px;
    min-height:calc(100vh - 140px)
  }
  .panel {
    padding:23px 20px
  }
  .intro>p:last-child {
    font-size:15px
  }
  .platform-inner .intro h1 {
    font-size:31px
  }
  .platform-body footer {
    font-size:10px
  }
}
@media(max-width:400px) {
  .header {
    gap:8px;
    padding-inline:12px
  }
  .header>.brand:first-child {
    width:145px;
    height:64px
  }
  .header>.brand:first-child img {
    width:166px;
    height:166px;
    top:-51px;
    left:-8px
  }
  main {
    padding:27px 17px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .sidebar,* {
    transition:none!important
  }
}
@media(max-width:760px) {
  body.menu-open {
    overflow:hidden
  }
}
/* SHARED SIDEBAR */
.sidebar-account {
  margin-top:auto;
  padding-top:28px;
  color:#eaf3ff
}
.sidebar-person {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 5px;
  border-block:1px solid #a6bed44d;
  color:#f1f6ff;
  font-size:13px;
  min-width:0
}
.sidebar-person>span:nth-child(2) {
  min-width:0;
  flex:1
}
.sidebar-person strong {
  display:block;
  font-size:13px;
  font-weight:500
}
.sidebar-person small {
  display:block;
  font-size:12px;
  line-height:1.65;
  margin-top:3px;
  overflow-wrap:anywhere
}
.person-avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:43px;
  height:43px;
  border-radius:50%;
  background:#8395a8;
  color:white;
  overflow:hidden
}
.person-avatar .ui-icon {
  height:34px;
  width:34px
}
.person-avatar img {
  width:100%;
  height:100%;
  object-fit:cover
}
.theme-controls {
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  padding:20px 8px 1px;
  gap:16px
}
.theme-controls>.ui-icon {
  width:25px;
  height:25px
}
.theme-toggle {
  display:block;
  position:relative;
  width:55px;
  height:30px;
  min-height:0;
  border:0;
  border-radius:30px;
  background:#72849a;
  padding:3px;
  box-shadow:none
}
.theme-toggle[aria-checked=true] {
  background:#0085ff
}
.theme-toggle>span {
  display:block;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s;
  box-shadow:0 1px 4px #00172c55
}
.theme-toggle[aria-checked=true]>span {
  transform:translateX(25px)
}
.theme-toggle:hover {
  transform:none;
  background:#687c92
}
.theme-toggle[aria-checked=true]:hover {
  background:#0074eb
}
/* Shared application header and workspace controls. */
html body .header {
  background:#edf4fb;
  border-bottom:1px solid #d7e4f1
}
.back-to-site {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  padding:10px 15px;
  border:1px solid #c4d7ea;
  border-radius:9px;
  background:#fff;
  color:#173d65;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap
}
.back-to-site:hover {
  background:#dcecff
}
.back-to-site .ui-icon {
  width:18px;
  height:18px
}
.workspace-logout {
  position:relative;
  z-index:1;
  margin-top:14px
}
.photo-actions {
  position:relative;
  display:flex;
  justify-content:center;
  margin-top:10px
}
#photo-options {
  font-size:25px;
  line-height:1;
  padding:7px 15px
}
#photo-button:not([hidden]) {
  position:absolute;
  top:100%;
  left:0;
  z-index:5;
  white-space:nowrap;
  background:#194b75;
  box-shadow:0 7px 20px #00162650
}
#photo-button[hidden] {
  display:none
}
@media(max-width:600px) {
  .back-to-site {
    padding:8px;
    font-size:11px;
    gap:4px
  }
  .header {
    gap:8px
  }
  .back-to-site .ui-icon {
    width:14px;
    height:14px
  }
}
html body[class] .header {
  background:#edf4fb!important
}
@media(max-width:600px) {
  html body .header>.brand:first-child {
    width:105px;
    min-width:105px
  }
  .back-to-site {
    white-space:normal;
    max-width:95px;
    line-height:1.2
  }
  .header {
    padding-inline:8px
  }
}
/* Application toolbar: paired controls,clear hierarchy and keyboard focus. */
html body[class] .header {
  background:linear-gradient(110deg,#f6f9fd,#eaf2fb)!important;
  border-bottom:1px solid #cfdfef;
  box-shadow:0 3px 18px #082c4c09;
  gap:16px
}
html body .header .back-to-site {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  gap:12px;
  min-height:46px;
  padding:6px 18px 6px 7px;
  border:1px solid #254f7d;
  border-radius:12px;
  background:linear-gradient(120deg,#214e7c,#123859);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 #ffffff20,0 4px 10px #173e6420;
  transition:background .18s,box-shadow .18s,transform .18s;
  max-width:none;
  white-space:nowrap
}
html body .header .back-to-site>.ui-icon {
  height:32px;
  width:32px;
  padding:8px;
  border-radius:8px;
  background:#ffffff15;
  color:#d8ebff;
  border:1px solid #ffffff18
}
html body .header .back-to-site:hover {
  background:linear-gradient(120deg,#2b6197,#19476f);
  box-shadow:0 5px 14px #173e6430;
  transform:translateY(-1px)
}html body .header .back-to-site:focus-visible {
  outline:3px solid #82b9ef;
  outline-offset:3px
}
html body .header .menu-toggle {
  border:1px solid #c6d7e9;
  background:#fff;
  color:#234e76;
  border-radius:10px;
  min-height:42px
}
@media(max-width:760px) {
  html body[class] .header {
    gap:8px;
    flex-wrap:nowrap;
    padding-inline:12px
  }
  html body .header .back-to-site {
    font-size:11px;
    padding-right:10px;
    gap:6px
  }
}
@media(max-width:520px) {
  html body .header>.brand:first-child {
    width:82px;
    min-width:82px;
    height:53px
  }
  html body .header>.brand:first-child img {
    width:160px;
    height:160px;
    left:0;
    top:-49px
  }
  html body .header .back-to-site {
    min-height:40px;
    padding:6px 9px;
    gap:5px;
    font-size:10px;
    white-space:normal;
    max-width:102px;
    line-height:1.2
  }
  html body .header .back-to-site>.ui-icon {
    width:21px;
    height:25px;
    padding:3px;
    background:transparent;
    border:0
  }
  html body .header .menu-toggle {
    padding:6px;
    min-height:38px
  }
  html body[class] .header {
    gap:6px;
    padding-inline:8px
  }
}
@media(max-width:520px) {
  html body[class] .header>.brand:first-child {
    width:82px!important;
    min-width:82px!important;
    height:53px!important
  }
  html body[class] .header>.brand:first-child img {
    width:150px!important;
    height:150px!important;
    left:0!important;
    top:-46px!important
  }
  html body[class] .header .menu-toggle {
    display:flex;
    flex-shrink:0
  }
}

/* Readable credit with the same treatment in both themes. */
html body .platform-body footer a.bluememo-credit {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #48a9ff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
html body .platform-body footer a.bluememo-credit:hover { color: #83c5ff; }
html body .platform-body footer a.bluememo-credit:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
html[data-accueil-theme=light] body .platform-body footer a.bluememo-credit { color: #075bbb; }
html[data-accueil-theme=light] body .platform-body footer a.bluememo-credit:hover { color: #003e85; }

/* Compact language control with keyboard-accessible choices. */
.header .app-language { position:relative; flex-shrink:0; color:#163d66; }
.app-language summary { display:flex; align-items:center; gap:8px; min-height:38px; padding:7px 11px; border:1px solid #b8cee5; border-radius:9px; background:#fff; box-shadow:0 2px 5px #143d6010; cursor:pointer; list-style:none; font:600 13px Arial,sans-serif; transition:background .16s,border-color .16s,box-shadow .16s; }
.app-language summary::-webkit-details-marker { display:none; }
.app-language summary .ui-icon { width:18px; height:18px; color:#0969c7; }
.app-language summary:hover,.app-language[open] summary { background:#dcecff; border-color:#4d95df; box-shadow:0 3px 9px #105bad22; }
.app-language summary:active { background:#c5dfff; }
.language-chevron { font-size:17px; line-height:1; transition:transform .16s; }
.app-language[open] .language-chevron { transform:rotate(180deg); }
.app-language-options { position:absolute; z-index:100; top:calc(100% + 7px); right:0; width:162px; padding:5px; border:1px solid #cbdcec; border-radius:11px; background:#fff; box-shadow:0 12px 30px #092f5429; }
.app-language-options button { display:flex; justify-content:space-between; width:100%; min-height:40px; padding:9px 11px; border-radius:7px; background:transparent; color:#183b60; font:600 13px Arial,sans-serif; transform:none; }
.app-language-options button[aria-pressed=true] { background:#eaf3ff; color:#075bbb; }
.app-language-options button:hover { background:#0969d2; color:#fff; }
.app-language-options button:active { background:#004a9d; }
.app-language summary:focus-visible,.app-language-options button:focus-visible { outline:2px solid #0878ef; outline-offset:2px; }
@media(max-width:520px) { .app-language summary { gap:5px; padding:7px 8px; font-size:12px; } }