/* LA LUMIÈRE — feuille de style (mobile d'abord, sans dépendance) */
:root {
  --nuit: #14213D;
  --nuit-2: #22335A;
  --lampe: #F2B33D;
  --fond: #F3F5F9;
  --carte: #FFFFFF;
  --texte: #17203A;
  --texte-doux: #4A5573;
  --action: #0E6B5A;
  --action-fonce: #0A5446;
  --bord: #D5DBE8;
  --rayon: 14px;
  --titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --corps: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hauteur-nav: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.55 var(--corps);
  color: var(--texte);
  background: var(--fond);
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 6px; }
.faisceau :focus-visible, .entete :focus-visible { outline-color: var(--lampe); }
#contenu:focus { outline: none; }

.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--lampe); color: var(--nuit); font-weight: 700;
  padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.lien-evitement:focus { top: 12px; }

/* ---------- Connexion : le faisceau de lumière ---------- */
.vue-connexion { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.faisceau {
  position: relative; overflow: hidden;
  padding: 56px 24px 96px; text-align: center; color: #fff;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(242,179,61,.34) 0%, rgba(242,179,61,0) 60%),
    var(--nuit);
}
.logo {
  display: block; width: 140px; height: 140px; margin: 0 auto 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(242,179,61,.28), 0 0 0 18px rgba(242,179,61,.10), 0 0 60px 18px rgba(242,179,61,.38);
}
.surtitre { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #C9D2E6; }
.faisceau h1 { font: 400 1.7rem/1.2 var(--titre); margin-top: 8px; }
.faisceau h1 span { display: block; font-weight: 700; letter-spacing: .06em; color: var(--lampe); font-size: 2.2rem; }
.accroche { margin-top: 12px; color: #DCE3F2; font-style: italic; font-family: var(--titre); }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); }
.formulaire {
  width: calc(100% - 32px); max-width: 420px; margin: -56px auto 0; padding: 24px 20px;
  display: grid; gap: 16px; position: relative;
  box-shadow: 0 18px 40px -18px rgba(20,33,61,.35);
}
.formulaire h2 { font: 700 1.3rem/1.2 var(--titre); }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ input {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--texte);
  background: #fff; border: 1.5px solid #8A94AD; border-radius: 10px;
}
.champ input:focus-visible { outline: 3px solid var(--action); outline-offset: 1px; }
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 96px; }
.bouton-texte {
  position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 12px;
  font: inherit; font-weight: 600; color: var(--action-fonce); background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.bouton {
  min-height: 48px; padding: 10px 18px; font: inherit; font-weight: 700; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; transition: background-color .15s, transform .1s;
}
.bouton:active { transform: translateY(1px); }
.bouton-principal { background: var(--action); color: #fff; }
.bouton-principal:hover { background: var(--action-fonce); }
.bouton-secondaire { background: #fff; color: var(--nuit); border-color: var(--nuit); }
.bouton-secondaire:hover { background: var(--fond); }
.etat { min-height: 1.5em; font-size: .92rem; color: var(--texte-doux); }
.etat.est-alerte { color: #9B1C1C; font-weight: 600; }

.pied { padding: 28px 16px; text-align: center; font-size: .85rem; color: var(--texte-doux); margin-top: auto; }

/* ---------- Application ---------- */
.application { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--hauteur-nav) + 8px + env(safe-area-inset-bottom)); }
.entete {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); background: var(--nuit); color: #fff;
}
.marque { display: flex; align-items: center; gap: 12px; }
.marque-lampe { width: 22px; height: 22px; border-radius: 50%; background: var(--lampe); box-shadow: 0 0 0 5px rgba(242,179,61,.2), 0 0 18px 4px rgba(242,179,61,.5); flex: none; }
.marque-nom { font: 700 1.05rem/1.1 var(--titre); letter-spacing: .06em; }
.marque-lieu { font-size: .75rem; color: #C9D2E6; }
.reseau { font-size: .78rem; padding: 4px 10px; border-radius: 999px; background: var(--nuit-2); color: #E6ECF8; white-space: nowrap; }
.reseau::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #6FD3A8; }
.reseau.est-hors-ligne::before { background: var(--lampe); }

.application .vue { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
.titre-vue { font: 700 1.6rem/1.2 var(--titre); }
.intro { margin-top: 6px; color: var(--texte-doux); }

.indicateurs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.indicateur { padding: 14px; display: grid; gap: 2px; }
.indicateur-valeur { font: 700 1.8rem/1 var(--titre); color: #8A94AD; }
.indicateur-nom { font-weight: 600; font-size: .92rem; }
.indicateur-note { font-size: .78rem; color: var(--texte-doux); }
.bloc-vide { padding: 20px; display: grid; gap: 10px; justify-items: start; }
.bloc-vide h3 { font: 700 1.1rem var(--titre); }
.bloc-vide p { color: var(--texte-doux); }

.groupe { margin: 24px 0 10px; font: 700 .8rem var(--corps); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.roles { display: grid; gap: 10px; }
.role summary {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; cursor: pointer; list-style: none;
}
.role summary::-webkit-details-marker { display: none; }
.role summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--texte-doux); border-bottom: 2px solid var(--texte-doux); transform: rotate(45deg); transition: transform .2s; }
.role[open] summary::after { transform: rotate(-135deg); }
.role[open] { border-color: var(--nuit); }
.pastille {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--nuit); color: var(--lampe); font: 700 1rem var(--titre);
}
.role-nom { font-weight: 600; }
.modules { padding: 4px 16px 16px 66px; display: grid; gap: 6px; color: var(--texte-doux); font-size: .95rem; }
.modules li::before { content: "› "; color: var(--action); font-weight: 700; }

.pied-application { margin-top: 0; }

.navigation {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex;
  padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--bord);
}
.onglet {
  flex: 1; min-height: var(--hauteur-nav); display: grid; place-items: center; align-content: center; gap: 2px;
  font: 600 .75rem var(--corps); color: var(--texte-doux); background: none; border: 0; cursor: pointer;
}
.onglet svg { width: 24px; height: 24px; fill: currentColor; }
.onglet[aria-current="page"] { color: var(--action-fonce); box-shadow: inset 0 3px 0 var(--lampe); }

.sans-script { padding: 24px; text-align: center; }

@media (min-width: 720px) {
  .faisceau { padding-bottom: 110px; }
  .indicateurs { grid-template-columns: repeat(4, 1fr); }
  .roles { grid-template-columns: 1fr 1fr; }
  .application { padding-bottom: 0; }
  .navigation { position: sticky; top: 64px; bottom: auto; justify-content: center; border-top: 0; border-bottom: 1px solid var(--bord); }
  .onglet { flex: 0 0 140px; min-height: 52px; grid-auto-flow: column; gap: 8px; }
  .onglet[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--lampe); }
  .navigation { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .onglet[aria-current="page"] { outline: 2px solid; }
}