/* ─────────────────────────────────────────────────────────────────────────────
   Plateforme de formation — feuille de style unique.
   Parti pris : une seule couleur d'accent (vert profond), beaucoup de blanc,
   des séparations par bordures plutôt que par ombres, et une hiérarchie qui
   repose sur la taille et la graisse du texte. Mobile d'abord.
   ───────────────────────────────────────────────────────────────────────────*/

:root {
  --fond:          #fcfbf9;
  --surface:       #ffffff;
  --surface-creuse:#f5f3ee;
  --texte:         #1b1b19;
  --texte-doux:    #6c6b64;
  --texte-tenu:    #8f8d85;
  --bordure:       #e7e4dc;
  --bordure-forte: #d6d2c8;
  --accent:        #1d6355;
  --accent-clair:  #e7f0ed;
  --accent-texte:  #ffffff;
  --succes:        #1d6355;
  --alerte:        #9a3412;
  --alerte-fond:   #fdf1ea;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;

  --police: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition: 160ms cubic-bezier(.2, .6, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:          #131412;
    --surface:       #1b1c19;
    --surface-creuse:#212320;
    --texte:         #ecebe5;
    --texte-doux:    #a3a199;
    --texte-tenu:    #83817a;
    --bordure:       #2b2d29;
    --bordure-forte: #3a3c37;
    --accent:        #6fbfa9;
    --accent-clair:  #1b2a26;
    --accent-texte:  #10201c;
    --succes:        #6fbfa9;
    --alerte:        #f0a882;
    --alerte-fond:   #2a1d16;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0; font-weight: 600; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--accent); }

/* ── Bandeau permanent ─────────────────────────────────────────────────────
   Discret mais toujours là : petite hauteur, texte ténu, en haut de l'écran. */
.bandeau {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-creuse);
  border-bottom: 1px solid var(--bordure);
  color: var(--texte-tenu);
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .01em;
  padding: .4rem 1rem;
  text-align: center;
}
.bandeau b { font-weight: 600; color: var(--texte-doux); }

/* ── Ossature ──────────────────────────────────────────────────────────────*/
.enveloppe { max-width: 46rem; margin: 0 auto; padding: 0 1.1rem; }

.entete {
  padding: 1.4rem 0 .9rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.entete .titre {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--texte-tenu); font-weight: 600;
  /* Sur un téléphone, un titre de formation long passait sur deux lignes et
     poussait le lien de déconnexion : une seule ligne, coupée si besoin. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.entete .lien-sortie { font-size: .8rem; color: var(--texte-tenu); text-decoration: none; white-space: nowrap; flex: none; }
.entete .lien-sortie:hover { color: var(--texte-doux); text-decoration: underline; }

main { padding-bottom: 6rem; }

/* ── Cartes ────────────────────────────────────────────────────────────────*/
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  padding: 1.15rem 1.2rem;
  margin-bottom: .9rem;
}
.carte-titre { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-tenu); font-weight: 600; margin-bottom: .55rem; }

/* ── Barre de progression ──────────────────────────────────────────────────*/
.jauge { height: 7px; background: var(--surface-creuse); border-radius: 99px; overflow: hidden; }
.jauge > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; width: 0; transition: width 700ms cubic-bezier(.2,.7,.2,1); }
.jauge-legende { display: flex; justify-content: space-between; font-size: .82rem; color: var(--texte-doux); margin-top: .5rem; }

/* ── Boutons ───────────────────────────────────────────────────────────────*/
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.25rem;
  font: inherit; font-weight: 600; font-size: .97rem;
  color: var(--accent-texte); background: var(--accent);
  border: 1px solid transparent; border-radius: var(--r-m);
  cursor: pointer; text-decoration: none;
  transition: transform var(--transition), opacity var(--transition);
}
.bouton:hover { opacity: .92; }
.bouton:active { transform: scale(.985); }
.bouton[disabled] { opacity: .5; cursor: default; }
.bouton.pleine-largeur { width: 100%; }
.bouton.discret { background: transparent; color: var(--accent); border-color: var(--bordure-forte); }

/* ── Champs ────────────────────────────────────────────────────────────────*/
.champ {
  width: 100%; min-height: 52px; padding: .8rem .95rem;
  font: inherit; font-size: 1.05rem;
  color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure-forte); border-radius: var(--r-m);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ::placeholder { color: var(--texte-tenu); }
.champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }

:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Messages ──────────────────────────────────────────────────────────────*/
.message { border-radius: var(--r-m); padding: .75rem .9rem; font-size: .92rem; margin-top: .9rem; }
.message.erreur { background: var(--alerte-fond); color: var(--alerte); }
.message.succes { background: var(--accent-clair); color: var(--accent); }

/* ── Navigation basse (mobile d'abord) ─────────────────────────────────────*/
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--bordure);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .55rem .2rem .5rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .01em;
  color: var(--texte-tenu); text-decoration: none;
  transition: color var(--transition);
}
.nav a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current='page'] { color: var(--accent); }

@media (min-width: 860px) {
  .nav {
    position: sticky; top: 0; inset: auto;
    max-width: 46rem; margin: .4rem auto 1.4rem;
    grid-template-columns: repeat(5, auto);
    justify-content: start; gap: .2rem;
    background: transparent; backdrop-filter: none;
    border: 0; border-bottom: 1px solid var(--bordure); border-radius: 0;
  }
  .nav a { flex-direction: row; gap: .45rem; font-size: .88rem; padding: .5rem .8rem .7rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .nav a[aria-current='page'] { border-bottom-color: var(--accent); }
  main { padding-bottom: 3rem; }
}

/* ── Micro-animation d'apparition, discrète ────────────────────────────────*/
.apparait { animation: apparait 320ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Page de connexion ─────────────────────────────────────────────────────*/
.connexion { min-height: 100svh; display: flex; flex-direction: column; }
.connexion .centre { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1.1rem 3rem; }
.connexion .boite { width: 100%; max-width: 25rem; }
.connexion .marque { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 600; margin-bottom: .7rem; }
.connexion h1 { margin-bottom: .5rem; }
.connexion .intro { color: var(--texte-doux); font-size: .95rem; margin-bottom: 1.6rem; }
.connexion label { display: block; font-size: .84rem; font-weight: 600; color: var(--texte-doux); margin-bottom: .45rem; }
.connexion .champ + .bouton { margin-top: .85rem; }
.connexion .aide { font-size: .82rem; color: var(--texte-tenu); margin-top: 1.1rem; }