/* Charte ByoCare, mise en page à la manière de yakaps.ch :
   une barre claire d'un seul trait, des onglets soulignés, une colonne étroite,
   des surfaces plates. Les couleurs et le logo restent ceux de ByoCare —
   le vert sage tient le rôle que le teal tient chez yakaps, le lime celui de l'orange. */

:root {
  --t: #4f8c66;         /* vert d'action : boutons, liens, onglet actif */
  --t2: #3d6f51;        /* même vert, survolé */
  --tp: #e7f1ea;        /* vert très pâle : pastilles, fonds discrets */
  --a: #a4c868;         /* lime ByoCare : accent, sélection */
  --a-ink: #3c4a24;
  --ink: #1e2721; --mut: #626f66; --line: #dde4de;
  --ground: #f5f8f4; --paper: #ffffff;
  --ok: #2e7d4f; --okp: #e3f2e8;
  --warn: #8a6216; --warnp: #f7efdc;
  --crit: #a2432b; --critp: #fae9e3;
  --btn-ink: #ffffff;   /* texte sur le bouton plein */
  --dark: #1c3423;      /* vert ByoCare, réservé au logo et aux aplats rares */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t: #7cb890; --t2: #9ad0aa; --tp: #18291e; --btn-ink: #0f1511;
    --a: #a4c868; --a-ink: #10160f;
    --ink: #e5ebe5; --mut: #94a294; --line: #27332a;
    --ground: #0f1511; --paper: #171f19;
    --ok: #6fc492; --okp: #16301f;
    --warn: #e0b565; --warnp: #322715;
    --crit: #ef8a6d; --critp: #351f18;
  }
}
:root[data-theme="dark"] {
  --t: #7cb890; --t2: #9ad0aa; --tp: #18291e; --btn-ink: #0f1511;
  --a: #a4c868; --a-ink: #10160f;
  --ink: #e5ebe5; --mut: #94a294; --line: #27332a;
  --ground: #0f1511; --paper: #171f19;
  --ok: #6fc492; --okp: #16301f;
  --warn: #e0b565; --warnp: #322715;
  --crit: #ef8a6d; --critp: #351f18;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 16px/1.5 "Work Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .marque, .eyebrow, .btn, .btn-2 { font-family: "Jost", "Century Gothic", sans-serif; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
a { color: var(--t); text-decoration: none; }
a:hover { color: var(--t2); text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
::selection { background: var(--a); color: var(--a-ink); }
img { max-width: 100%; }

/* La colonne. Tout s'aligne dessus : barre, contenu, pied. */
.w { max-width: 980px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------- barre unique, claire ---- */
/* La barre respire un peu plus large que la colonne de contenu : les intitulés
   français sont longs et ne doivent jamais être tronqués. */
.barre { background: var(--paper); border-bottom: 1px solid var(--line); }
.barre .w { max-width: 1160px; display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: nowrap; }
.marque { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.marque:hover { text-decoration: none; color: var(--ink); }
.marque img { height: 30px; width: auto; display: block; }
.marque span { color: var(--mut); font-weight: 400; }

.onglets { display: flex; gap: 2px; margin-left: 4px; align-self: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a {
  display: flex; align-items: center; padding: 0 11px; white-space: nowrap;
  color: var(--mut); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent;
}
.onglets a:hover { color: var(--t); text-decoration: none; }
.onglets a[aria-current] { color: var(--ink); border-bottom-color: var(--t); }
.pastille {
  display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--tp); color: var(--t); font-size: .7rem; font-weight: 600; text-align: center;
}
.moi { margin-left: auto; flex: none; display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--mut); white-space: nowrap; }
/* Sur un écran étroit, le nom de la plateforme laisse la place aux onglets. */
/* Sur un écran plus étroit, on sacrifie d'abord le nom de la plateforme,
   puis les pastilles « à venir » : les intitulés d'onglets restent entiers. */
@media (max-width: 1100px) { .moi > span:not(.qui) { display: none; } }
@media (max-width: 1200px) { .onglets .pastille { display: none; } }
.moi .qui { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- contenu ---- */
.zone { max-width: 980px; margin: 0 auto; padding: 34px 24px 20px; }
.zone.etroite { max-width: 600px; }
.chapeau { margin-bottom: 24px; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 0 0 5px; }
.chapeau h1 { font-size: 1.6rem; }
.chapeau p { margin: 7px 0 0; color: var(--mut); font-size: .95rem; max-width: 62ch; }

.carte { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.pad { padding: 20px 22px; }
.carte h2 { font-size: 1.02rem; }

/* ---------------------------------------------------------- applications ---- */
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.app {
  display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  color: inherit; text-decoration: none; transition: border-color .15s ease;
}
a.app:hover { border-color: var(--t); color: inherit; text-decoration: none; }
.app .icone { width: 26px; height: 26px; color: var(--t); }
.app h2 { font-size: 1.05rem; }
.app p { margin: 0; color: var(--mut); font-size: .9rem; }
.app .etat { margin-top: auto; padding-top: 12px; font-size: .85rem; font-weight: 600; color: var(--t); }
.app.vide { border-style: dashed; }
.app.vide .icone, .app.vide .etat { color: var(--mut); }

/* ------------------------------------------------------------- éléments ---- */
.btn, .btn-2 {
  display: inline-block; font-weight: 600; font-size: .95rem; line-height: 1.2;
  padding: 10px 18px; border-radius: 8px; white-space: nowrap; text-decoration: none; border: 1px solid transparent;
}
.btn { background: var(--t); color: var(--btn-ink); }
.btn:hover { background: var(--t2); color: var(--btn-ink); text-decoration: none; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn-2 { background: none; color: var(--ink); border-color: var(--line); }
.btn-2:hover { border-color: var(--t); color: var(--t); background: none; text-decoration: none; }
.btn.large, .btn-2.large { display: block; width: 100%; text-align: center; }
.btn-2.petit, .btn.petit { padding: 6px 12px; font-size: .85rem; }

.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.champ label { font-size: .85rem; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ground); color: var(--ink);
}
.champ .aide { font-size: .8rem; color: var(--mut); }
.coche { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; font-size: .92rem; }
.coche small { display: block; color: var(--mut); font-size: .82rem; }

.avis { border-radius: 8px; padding: 11px 14px; margin-bottom: 18px; font-size: .92rem; }
.avis.ok { background: var(--okp); color: var(--ok); }
.avis.non { background: var(--critp); color: var(--crit); }
.avis.note { background: var(--warnp); color: var(--warn); }

table.liste { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.liste th, table.liste td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.liste thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); font-weight: 600; }
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste td.nb { color: var(--mut); }
.etiquette { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--ground); color: var(--mut); border: 1px solid var(--line); }
.etiquette.admin { background: var(--tp); color: var(--t); border-color: transparent; }
.mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; }

/* ------------------------------------------------------------- connexion ---- */
#connexion { min-height: 100vh; display: grid; place-items: center; padding: 30px 18px; }
#connexion .carte { width: 100%; max-width: 420px; padding: 30px 30px 26px; }
#connexion .logo { height: 46px; width: auto; display: block; margin-bottom: 16px; }
#connexion h1 { font-size: 1.4rem; margin-bottom: 4px; }
#connexion .sous { color: var(--mut); font-size: .92rem; margin: 0 0 20px; }
#connexion .code-saisi { text-align: center; font-size: 1.5rem; letter-spacing: .3em; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
.invite { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.invite .rangee { display: flex; gap: 8px; }
.invite input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ground); color: var(--ink);
  text-transform: uppercase; letter-spacing: .15em; font-family: ui-monospace, Menlo, monospace;
}

/* Le logo ByoCare est dessiné en vert foncé : on l'éclaircit sur fond sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marque img,
  :root:not([data-theme="light"]) #connexion .logo { filter: brightness(1.75) saturate(.9); }
}
:root[data-theme="dark"] .marque img,
:root[data-theme="dark"] #connexion .logo { filter: brightness(1.75) saturate(.9); }

/* ------------------------------------------------------------------ pied ---- */
.pied { max-width: 980px; margin: 0 auto; padding: 40px 24px 30px; color: var(--mut); font-size: .88rem; }
.pied p { margin: 0 0 4px; max-width: 62ch; }

/* ---------------------------------- application autonome dans son cadre ---- */
.cadre { width: 100%; border: 0; display: block; background: var(--ground); }

@media (max-width: 620px) {
  .barre .w { padding: 8px 16px; gap: 10px; flex-wrap: wrap; }
  .onglets { margin-left: 0; width: 100%; order: 3; }
  .onglets a { padding: 8px 10px; }
  .moi { margin-left: auto; }
  .zone { padding: 24px 16px 16px; }
  .pied { padding: 30px 16px 26px; }
}

/* ------------------------------------------- sous-onglets (administration) ---- */
.reglets { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.reglets a {
  padding: 9px 13px; margin-bottom: -1px; color: var(--mut); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.reglets a:hover { color: var(--t); text-decoration: none; }
.reglets a[aria-current] { color: var(--ink); border-bottom-color: var(--t); }