:root {
  --bleu: #0079AD;
  --bleu-clair: #6FC0E4;
  --bleu-fond: #E8F4FA;
  --texte: #1F2937;
  --texte-doux: #6B7280;
  --trait: #E5E7EB;
  --fond: #F5F7FA;
  --blanc: #FFFFFF;
  --rail: 248px;
  --rail-replie: 64px;
  --haut: 52px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Arimo", Arial, Helvetica, sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- marque ---------- */
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); min-width: 0; }
.marque-pastille {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--bleu); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 17px; letter-spacing: -.5px;
}
.marque-nom { font-weight: 700; font-size: 17px; letter-spacing: -.2px; white-space: nowrap; }
.marque-nom small { display: block; font-weight: 400; font-size: 12px; color: var(--texte-doux); letter-spacing: 0; }

/* ---------- connexion ---------- */
.connexion { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.carte {
  width: 100%; max-width: 380px; background: var(--blanc); border-radius: 16px;
  padding: 32px 28px; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}
.carte .marque { margin-bottom: 28px; }
.carte h1 { font-size: 20px; margin: 0 0 4px; }
.carte p.sous { margin: 0 0 22px; color: var(--texte-doux); font-size: 14px; }
.qui { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.qui label {
  border: 1.5px solid var(--trait); border-radius: 10px; padding: 12px; text-align: center;
  cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s;
}
.qui input { position: absolute; opacity: 0; pointer-events: none; }
.qui input:checked + span { color: var(--bleu); }
.qui label:has(input:checked) { border-color: var(--bleu); background: var(--bleu-fond); }
.qui label:has(input:focus-visible) { outline: 2px solid var(--bleu-clair); outline-offset: 2px; }
.champ { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.saisie {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--trait); border-radius: 10px;
  font: inherit; font-size: 16px; outline: none; background: #fff;
}
.saisie:focus { border-color: var(--bleu); }
.bouton {
  margin-top: 20px; width: 100%; padding: 12px; border: 0; border-radius: 10px;
  background: var(--bleu); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
}
.bouton:hover { background: #006a98; }
.erreur { background: #FEF2F2; color: #B42318; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 16px; }
.erreur[hidden] { display: none; }

/* ---------- application ---------- */
.appli { display: grid; grid-template-columns: var(--rail) 1fr; height: 100vh; height: 100dvh; }
.appli.replie { grid-template-columns: var(--rail-replie) 1fr; }

.rail {
  background: var(--blanc); border-right: 1px solid var(--trait);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.rail-tete { height: 64px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--trait); }
.rail nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.rail-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); padding: 6px 10px 8px; }
.item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 2px;
  border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left;
  color: var(--texte); position: relative;
}
.item:hover { background: var(--fond); }
.item.actif { background: var(--bleu-fond); color: var(--bleu); }
.item.actif::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bleu); }
.item-texte { flex: 1; min-width: 0; overflow: hidden; }
.item-nom { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.item-desc { display: block; font-size: 12px; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.actif .item-desc { color: #3b8fb8; }
.item-ext { width: 13px; height: 13px; opacity: .55; }
.rail-pied { border-top: 1px solid var(--trait); padding: 10px; display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bleu-fond); color: var(--bleu); display: grid; place-items: center; font-weight: 700; flex: none; }
.moi { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icone-bouton { border: 0; background: none; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--texte-doux); display: grid; place-items: center; }
.icone-bouton:hover { background: var(--fond); color: var(--texte); }

.appli.replie .marque-nom, .appli.replie .item-texte, .appli.replie .rail-titre, .appli.replie .moi, .appli.replie .rail-pied form { display: none; }
.appli.replie .rail-tete { justify-content: center; padding: 0; }
.appli.replie .item { justify-content: center; }
.appli.replie .rail-pied { flex-direction: column; }

.scene { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.barre {
  height: var(--haut); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--blanc); border-bottom: 1px solid var(--trait);
}
.barre h2 { font-size: 15px; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre h2 span { font-weight: 400; color: var(--texte-doux); margin-left: 8px; font-size: 13px; }
.lien-onglet { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bleu); text-decoration: none; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.lien-onglet:hover { background: var(--bleu-fond); }
.menu-mobile { display: none; }

.cadres { position: relative; flex: 1; min-height: 0; background: var(--blanc); }
.cadres iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; background: #fff; }
.cadres iframe.visible { display: block; }
.chargement { position: absolute; top: 0; left: 0; height: 2px; background: var(--bleu-clair); width: 0; transition: width 1.2s ease; z-index: 2; }
.chargement.en-cours { width: 70%; }
.chargement.fini { width: 100%; opacity: 0; transition: width .2s, opacity .4s .2s; }

.accueil { position: absolute; inset: 0; overflow: auto; padding: 32px 24px; background: var(--fond); }
.accueil[hidden] { display: none; }
.accueil h1 { font-size: 22px; margin: 0 0 4px; }
.accueil p { margin: 0 0 24px; color: var(--texte-doux); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-width: 900px; }
.tuile {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 18px;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s;
}
.tuile:hover { border-color: var(--bleu-clair); box-shadow: 0 4px 16px rgba(0,121,173,.08); }
.tuile .pastille { width: 40px; height: 40px; border-radius: 10px; background: var(--bleu-fond); color: var(--bleu); display: grid; place-items: center; }
.tuile strong { font-size: 15px; }
.tuile small { color: var(--texte-doux); font-size: 13px; line-height: 1.4; }

.voile { display: none; }

/* ---------- t\u00E9l\u00E9phone ---------- */
@media (max-width: 760px) {
  .appli, .appli.replie { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 20;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.15);
  }
  .appli.tiroir .rail { transform: none; }
  .appli.tiroir .voile { display: block; position: fixed; inset: 0; background: rgba(17,24,39,.35); z-index: 10; }
  .appli.replie .marque-nom, .appli.replie .item-texte, .appli.replie .rail-titre, .appli.replie .moi, .appli.replie .rail-pied form { display: revert; }
  .appli.replie .item { justify-content: flex-start; }
  .appli.replie .rail-pied { flex-direction: row; }
  .replier { display: none !important; }
  .menu-mobile { display: grid; }
  .lien-onglet span { display: none; }
  .accueil { padding: 24px 16px; }
}