/* ============================================================
   MATERIAL 3 — Site Personnel Jean-Charles Lantheaume
   ============================================================ */

:root {
  /* Couleurs — thème clair (seed: #1565C0 blue) */
  --md-primary:                #1A5CA8;
  --md-on-primary:             #FFFFFF;
  --md-primary-container:      #D6E3FF;
  --md-on-primary-container:   #001B3E;
  --md-secondary:              #565E71;
  --md-on-secondary:           #FFFFFF;
  --md-secondary-container:    #DAE2F9;
  --md-on-secondary-container: #131C2C;
  --md-tertiary:               #715573;
  --md-on-tertiary:            #FFFFFF;
  --md-tertiary-container:     #FBD7FC;
  --md-on-tertiary-container:  #29132C;
  --md-error:                  #BA1A1A;
  --md-on-error:               #FFFFFF;
  --md-error-container:        #FFDAD6;
  --md-on-error-container:     #410002;
  --md-background:             #FAFCFF;
  --md-on-background:          #1A1C1E;
  --md-surface:                #FAFCFF;
  --md-on-surface:             #1A1C1E;
  --md-surface-variant:        #E1E2EC;
  --md-on-surface-variant:     #44474F;
  --md-outline:                #74777F;
  --md-outline-variant:        #C4C6D0;
  --md-surface-1:              #EEF2FB;
  --md-surface-2:              #E8EEFA;

  /* Typographie */
  --md-font: 'Roboto', sans-serif;

  /* Formes (border-radius) */
  --shape-xs:   4px;
  --shape-sm:   8px;
  --shape-md:   12px;
  --shape-lg:   16px;
  --shape-xl:   28px;
  --shape-full: 9999px;

  /* Élévations */
  --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);

  /* Layout */
  --app-bar-height:  64px;
  --drawer-width:    280px;
  --page-padding:    24px;
  --content-max:     1200px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--md-font); background: var(--md-background); color: var(--md-on-background); min-height: 100vh; overflow-x: hidden; }
a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; user-select: none; vertical-align: middle; }

/* ---- Typographie ---- */
.display-large  { font-size: 57px; font-weight: 400; line-height: 1.12; letter-spacing: -.25px; }
.display-medium { font-size: 45px; font-weight: 400; line-height: 1.16; }
.display-small  { font-size: 36px; font-weight: 400; line-height: 1.22; }
.headline-large  { font-size: 32px; font-weight: 400; line-height: 1.25; }
.headline-medium { font-size: 28px; font-weight: 400; line-height: 1.29; }
.headline-small  { font-size: 24px; font-weight: 400; line-height: 1.33; }
.title-large   { font-size: 22px; font-weight: 400; line-height: 1.27; }
.title-medium  { font-size: 16px; font-weight: 500; line-height: 1.5;  letter-spacing: .15px; }
.title-small   { font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: .1px; }
.body-large    { font-size: 16px; font-weight: 400; line-height: 1.5;  letter-spacing: .5px; }
.body-medium   { font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: .25px; }
.body-small    { font-size: 12px; font-weight: 400; line-height: 1.33; letter-spacing: .4px; }
.label-large   { font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: .1px; }

/* ---- Top App Bar ---- */
.top-app-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--app-bar-height);
  background: var(--md-surface);
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 4px;
  z-index: 100;
  box-shadow: var(--elev-2);
  transition: box-shadow 200ms;
}
.app-title {
  flex: 1; font-size: 22px; font-weight: 500;
  color: var(--md-on-surface); padding-left: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-bar-actions { display: flex; align-items: center; }
.lang-switch {
  font-size: 13px; font-weight: 700;
  color: var(--md-on-surface-variant);
  padding: 6px 14px; border-radius: var(--shape-full);
  letter-spacing: .5px; transition: background 150ms;
}
.lang-switch:hover { background: var(--md-surface-variant); text-decoration: none; }

/* ---- Icon Button ---- */
.icon-button {
  width: 48px; height: 48px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 150ms; flex-shrink: 0;
}
.icon-button:hover  { background: rgba(0,0,0,.08); }
.icon-button:active { background: rgba(0,0,0,.12); }

/* ---- Navigation Drawer ---- */
.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity 250ms;
}
.nav-scrim.open { opacity: 1; pointer-events: all; }

.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--drawer-width);
  background: var(--md-surface);
  z-index: 300;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(.2,0,0,1);
  box-shadow: var(--elev-3);
  border-radius: 0 var(--shape-xl) var(--shape-xl) 0;
  overflow: hidden;
}
.nav-drawer.open { transform: translateX(0); }

.nav-header {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 20px 20px;
  background: var(--md-primary-container);
  flex-shrink: 0;
}
.nav-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.nav-user-info { display: flex; flex-direction: column; min-width: 0; }
.nav-user-name  { font-size: 16px; font-weight: 500; color: var(--md-on-primary-container); }
.nav-user-email { font-size: 12px; color: var(--md-on-primary-container); opacity: .8; }

.nav-list { list-style: none; padding: 12px 0; flex: 1; overflow-y: auto; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  color: var(--md-on-surface-variant);
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  border-radius: 0 var(--shape-full) var(--shape-full) 0;
  margin-right: 12px;
  transition: background 150ms, color 150ms;
  cursor: pointer;
}
.nav-item:hover { background: rgba(0,0,0,.05); color: var(--md-on-surface); text-decoration: none; }
.nav-item.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.nav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
}

.nav-footer { padding: 8px 0 24px; border-top: 1px solid var(--md-outline-variant); flex-shrink: 0; }
.nav-item-logout { color: var(--md-error); }
.nav-item-logout:hover { background: var(--md-error-container); color: var(--md-on-error-container); }

/* ---- Main Content ---- */
.main-content { padding-top: calc(var(--app-bar-height) + 24px); min-height: 100vh; }
.page-container { max-width: var(--content-max); margin: 0 auto; padding: var(--page-padding); }
.page-header { margin-bottom: 32px; }
.page-header h2 { color: var(--md-on-background); }
.page-header p  { color: var(--md-on-surface-variant); margin-top: 8px; }

/* ---- Cards ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.card {
  background: var(--md-surface); border-radius: var(--shape-lg);
  padding: 24px; position: relative;
}
.card-elevated { box-shadow: var(--elev-1); transition: box-shadow 200ms, transform 200ms; }
.card-elevated:hover { box-shadow: var(--elev-2); }

.card-link {
  display: flex; align-items: center; gap: 16px;
  color: var(--md-on-surface); cursor: pointer;
}
.card-link:hover { background: var(--md-surface-1); transform: translateY(-2px); text-decoration: none; }

.card-icon {
  width: 56px; height: 56px; border-radius: var(--shape-lg);
  background: var(--md-primary-container);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-icon .material-symbols-outlined { font-size: 28px; color: var(--md-primary); }
.card-content { flex: 1; }
.card-content h3 { color: var(--md-on-surface); margin-bottom: 4px; }
.card-content p  { color: var(--md-on-surface-variant); }
.card-arrow { color: var(--md-on-surface-variant); flex-shrink: 0; }

.coming-soon-card {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 56px; gap: 16px; color: var(--md-on-surface-variant);
}
.coming-soon-icon { font-size: 64px; color: var(--md-outline); }

/* ---- Bouton rempli ---- */
.btn-filled {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--shape-full); border: none;
  background: var(--md-primary); color: var(--md-on-primary);
  font-family: var(--md-font); font-size: 14px; font-weight: 500; letter-spacing: .1px;
  cursor: pointer; transition: box-shadow 200ms, opacity 150ms; text-decoration: none;
}
.btn-filled:hover  { box-shadow: var(--elev-1); opacity: .92; color: var(--md-on-primary); text-decoration: none; }
.btn-filled:active { box-shadow: none; opacity: .88; }
.btn-large { padding: 14px 32px; font-size: 15px; width: 100%; margin-top: 8px; }

/* ---- Champs de saisie ---- */
.text-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.text-field label { font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); }
.text-field-inner {
  display: flex; align-items: center;
  background: var(--md-surface-variant);
  border-radius: var(--shape-sm) var(--shape-sm) 0 0;
  border-bottom: 2px solid var(--md-outline);
  transition: border-color 200ms;
}
.text-field-inner:focus-within { border-color: var(--md-primary); }
.field-icon { color: var(--md-on-surface-variant); padding: 12px 12px 12px 16px; font-size: 20px; flex-shrink: 0; }
.text-field input {
  flex: 1; padding: 14px 16px 14px 0; border: none; background: transparent;
  font-family: var(--md-font); font-size: 16px; color: var(--md-on-surface); outline: none;
}
.text-field input::placeholder { color: var(--md-on-surface-variant); opacity: .6; }
.pw-toggle {
  padding: 12px; border: none; background: transparent;
  color: var(--md-on-surface-variant); cursor: pointer;
  border-radius: 50%; display: flex; align-items: center;
  transition: background 150ms;
}
.pw-toggle:hover { background: rgba(0,0,0,.06); }

/* ---- Page Connexion ---- */
body.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: var(--md-background);
}
.login-container { width: 100%; max-width: 400px; }
.login-card {
  background: var(--md-surface); border-radius: var(--shape-xl);
  padding: 40px 32px; box-shadow: var(--elev-2); text-align: center;
}
.login-logo { margin-bottom: 20px; }
.login-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; margin: 0 auto; box-shadow: var(--elev-1);
}
.login-card h1    { font-size: 24px; color: var(--md-on-surface); margin-bottom: 4px; }
.login-subtitle   { color: var(--md-on-surface-variant); margin-bottom: 28px; }
.login-form       { text-align: left; }

.error-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--md-error-container);
  color: var(--md-on-error-container); border-radius: var(--shape-sm);
  font-size: 14px; margin-bottom: 16px; text-align: left;
}
.error-banner .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }

.login-lang {
  margin-top: 24px; display: flex; align-items: center;
  justify-content: center; gap: 8px;
  font-size: 12px; color: var(--md-on-surface-variant);
}
.login-lang a       { color: var(--md-on-surface-variant); font-weight: 500; }
.login-lang a.active { color: var(--md-primary); font-weight: 700; }
.login-lang a:hover  { color: var(--md-primary); text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  :root { --page-padding: 16px; }
  .display-small { font-size: 28px; }
  .login-card { padding: 32px 20px; border-radius: var(--shape-lg); }
  .coming-soon-card { padding: 40px 24px; }
}
@media (min-width: 1024px) {
  :root { --page-padding: 32px; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}