/* ─────────────────────────────────────────────────────────────
   BERGER, couche application web mobile.
   Chargee APRES berger.css. Elle ne redefinit aucune couleur :
   toutes les valeurs viennent des variables de :root.

   Trois choses seulement :
   1. une entete qui ne deborde jamais a droite,
   2. une barre d'onglets en bas, a portee du pouce,
   3. des tableaux qui se transforment en fiches sous 760 px,
      au lieu de disparaitre dans un debordement horizontal.
   ───────────────────────────────────────────────────────────── */

/* ── Rien ne deborde, jamais ── */
/* clip et non hidden : hidden fabrique un conteneur de defilement, et toutes
   les entetes collantes de la page cessent de coller. clip rogne sans rien
   fabriquer. Repli en hidden pour les navigateurs qui ne connaissent pas clip. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }

/* Un bouton cache doit rester cache : .btn passe en inline-flex et ecrase
   sinon l'attribut hidden. */
[hidden] { display: none !important; }

/* .small sert de taille de texte dans le design d'origine, et impose une
   couleur grise. Sur un bouton, elle rendait le libelle illisible. */
.btn.small { color: var(--brand-ink); }
.btn.ghost.small, .btn.ghost { color: var(--ink); }
.btn.tagbtn.small { color: var(--tag-ink); }
img, svg, canvas, video { max-width: 100%; height: auto; }
.wrap { width: min(1200px, 100% - 2rem); }
@media (max-width: 700px) { .wrap { width: min(1200px, 100% - 1.5rem); } }

/* Le pouce a besoin de 44 px, partout. */
@media (pointer: coarse) {
  .btn, .tab, .modlist button, .mega-list button, .mega-list a, .tabbar a { min-height: 44px; }
}

/* ── Le lien d'evitement, pour le clavier et les lecteurs d'ecran ── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--brand-ink); padding: .6rem .9rem;
  font-family: "Archivo", sans-serif; font-size: .85rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ── Entete de l'application ─────────────────────────────────── */
.appbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
}
.appbar .in {
  width: min(1200px, 100% - 2rem); margin-inline: auto;
  display: flex; align-items: center; gap: .7rem; padding: .55rem 0;
  min-width: 0;
}
.appbar .brand { display: flex; align-items: center; gap: .55rem; color: var(--brand); text-decoration: none; min-width: 0; }
.appbar .brand .nm {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 112, "wght" 820;
  font-size: 1.02rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.appbar .sp { margin-left: auto; }
.appbar .act { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.iconbtn {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink);
  font-family: "Archivo", sans-serif; font-size: .78rem; cursor: pointer;
}
.iconbtn:hover { background: var(--surface-2); }
.iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Les liens de modules en clair, mais seulement quand la place existe. */
.appnav { display: none; gap: .1rem; margin-left: .4rem; min-width: 0; }
.appnav a {
  font-family: "Archivo", sans-serif; font-size: .82rem; font-variation-settings: "wght" 640;
  color: var(--ink-2); text-decoration: none; padding: .42rem .58rem; border-radius: 9px;
  white-space: nowrap;
}
.appnav a:hover { background: var(--surface-2); color: var(--ink); }
.appnav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
@media (min-width: 1120px) { .appnav { display: flex; } .appbar .menubtn { display: none; } }

/* ── Le tiroir de navigation ─────────────────────────────────── */
.drawer[hidden] { display: none !important; }
.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end;
}
.drawer .sheetnav {
  width: min(340px, 88vw); height: 100%; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: calc(.9rem + env(safe-area-inset-top)) 1rem calc(1.4rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .5rem;
  animation: slidein .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes slidein { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer h4 {
  font-family: "Archivo", sans-serif; font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); margin: .8rem 0 .1rem;
}
.drawer .row {
  display: flex; align-items: center; gap: .65rem;
  padding: .62rem .6rem; border-radius: 11px; text-decoration: none;
  color: var(--ink); border: 1px solid transparent; background: none;
  font-family: "Archivo", sans-serif; font-size: .95rem; text-align: left; cursor: pointer;
}
.drawer .row:hover { background: var(--surface-2); border-color: var(--line-soft); }
.drawer .row[aria-current="page"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.drawer .row .k {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2);
  font-family: "IBM Plex Mono", monospace; font-size: .7rem;
}
.drawer .row[aria-current="page"] .k { background: var(--brand); color: var(--brand-ink); }
.drawer .row .d { display: block; font-size: .74rem; color: var(--ink-3); line-height: 1.3; }
.drawer .top { display: flex; align-items: center; gap: .6rem; }
.drawer .top .t { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 800; text-transform: uppercase; font-size: .95rem; }

/* ── Le fil, et le retour en arriere ─────────────────────────── */
.crumb {
  position: sticky; top: calc(53px + env(safe-area-inset-top)); z-index: 50;
  background: var(--ground-2); border-bottom: 1px solid var(--line-soft);
}
.crumb .in {
  width: min(1200px, 100% - 2rem); margin-inline: auto;
  display: flex; align-items: center; gap: .5rem; padding: .5rem 0; min-width: 0;
}
.back {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
  font-family: "Archivo", sans-serif; font-size: .84rem; font-variation-settings: "wght" 660;
  color: var(--ink-2); text-decoration: none;
  padding: .4rem .62rem .4rem .46rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; min-height: 38px;
}
.back:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.crumb .here {
  font-family: "Archivo", sans-serif; font-size: .8rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.crumb .step { flex: 0 0 auto; color: var(--ink-3); }

/* ── Le titre du module ──────────────────────────────────────── */
.modhead { padding: 1.4rem 0 .2rem; }
.modhead .num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand); color: var(--brand-ink);
  font-family: "IBM Plex Mono", monospace; font-size: .82rem; margin-bottom: .7rem;
}
.modhead h1 { font-size: clamp(1.8rem, 6.2vw, 3rem); }
.modhead .lede { margin-top: .8rem; }

/* ── Sections d'une page module ──────────────────────────────── */
main.page { padding-bottom: 0; }
main.page > section { padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
main.page > section + section { border-top: 1px solid var(--line-soft); }
.secttl {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 108, "wght" 760;
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: -.01em;
  margin: 0 0 .2rem;
}

/* ── Tableaux : des fiches des que l'ecran retrecit ──────────── */
.scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .tablewrap { overflow: visible; max-height: none; }
  table.t, table.t tbody, table.t tr, table.t td { display: block; width: 100%; }
  table.t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: .55rem .7rem; margin-bottom: .55rem;
  }
  table.t td {
    border: 0; padding: .26rem 0; display: flex; gap: .8rem; align-items: baseline;
    justify-content: space-between; text-align: right;
  }
  table.t td + td { border-top: 1px dashed var(--line-soft); }
  table.t td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-family: "Archivo", sans-serif; font-size: .66rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); font-variation-settings: "wght" 700;
  }
  table.t td:empty { display: none; }
  /* Une premiere colonne qui sert de titre de fiche. */
  table.t td:first-child {
    font-family: "Archivo", sans-serif; font-variation-settings: "wght" 780;
    font-size: 1rem; padding-bottom: .4rem;
  }
  table.t td:first-child::before { color: var(--ink-3); font-size: .62rem; }
}

/* Le comparatif garde ses colonnes, il ne veut rien dire en fiches. */
@media (max-width: 760px) {
  .cmpwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmpwrap table.t, .cmpwrap table.t tbody, .cmpwrap table.t tr, .cmpwrap table.t td { display: revert; width: auto; }
  .cmpwrap table.t { display: table; width: 100%; min-width: 560px; }
  .cmpwrap table.t thead { position: static; width: auto; height: auto; clip: auto; }
  .cmpwrap table.t td::before { content: none; }
  .cmpwrap table.t tr { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .cmpwrap table.t td { border-bottom: 1px solid var(--line-soft); text-align: left; display: table-cell; }
}
.swipehint {
  display: none; font-family: "Archivo", sans-serif; font-size: .72rem; color: var(--ink-3);
  margin: .3rem 0 .5rem;
}
@media (max-width: 760px) { .swipehint { display: block; } }

/* ── La barre d'onglets du bas ───────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
  padding: .45rem .2rem .5rem; text-decoration: none; color: var(--ink-3);
  font-family: "Archivo", sans-serif; font-size: .63rem; letter-spacing: .02em;
  text-align: center; line-height: 1.15;
}
.tabbar a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--brand); }
.tabbar a:active { background: var(--surface-2); }
@media (min-width: 1120px) { .tabbar { display: none; } }
body.hasbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 1120px) { body.hasbar { padding-bottom: 0; } }

/* ── Le bandeau de lecture, commun a tous les modules ────────── */
/* Il reste dans le fil de la page : colle en bas, il recouvrait le contenu
   des que sa section etait courte, ce qui est le cas sur la plupart des pages. */
.scanbar { margin: 1.2rem 0; }
.scanbox {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad);
  padding: .8rem .85rem; box-shadow: var(--shadow);
}
.scanbox .hdr { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.scanbox .hdr .t { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 760; font-size: .88rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.warn { background: var(--tag); box-shadow: 0 0 0 3px rgba(245,197,24,.18); }
.srcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .4rem; }
.srcbtn {
  display: flex; align-items: center; gap: .5rem; text-align: left;
  padding: .55rem .6rem; border-radius: 11px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink);
  font-family: "Archivo", sans-serif; font-size: .82rem; min-height: 44px;
}
.srcbtn:hover { border-color: var(--brand); }
.srcbtn[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.srcbtn:disabled { opacity: .4; cursor: not-allowed; }
.srcbtn .s { display: block; font-size: .66rem; color: var(--ink-3); line-height: 1.25; }
.srcbtn[aria-pressed="true"] .s { color: var(--brand); }

/* ── Divers ──────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: .8rem; }
.rowbtns { display: flex; gap: .5rem; flex-wrap: wrap; }
.rowbtns .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 620px) { .rowbtns .btn { flex: 0 0 auto; } }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: .6rem; }
.kpi .b {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem;
}
.kpi .b .v {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 110, "wght" 830;
  font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.kpi .b .k {
  font-family: "Archivo", sans-serif; font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; line-height: 1.25;
}
.kpi .b.bad .v { color: var(--alert); }
.kpi .b.good .v { color: var(--brand); }
.emptyzone {
  border: 1px dashed var(--line); border-radius: 12px; padding: 1.2rem;
  text-align: center; color: var(--ink-3); font-family: "Archivo", sans-serif; font-size: .88rem;
}
/* L'appel a tester, au bas de chaque module. Il se voit sans crier. */
.card.compte {
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--surface) 62%);
  margin-bottom: 1rem;
}
.card.compte h3 { margin-bottom: .4rem; }
.card.compte p { max-width: 56ch; }

.nextmod {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--surface); text-decoration: none; color: var(--ink);
}
.nextmod:hover { border-color: var(--brand); }
.nextmod .k { font-family: "Archivo", sans-serif; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: block; }
.nextmod .t { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 760; }
.appfoot {
  border-top: 1px solid var(--line-soft); background: var(--ground-2);
  padding: 1.6rem 0 2rem; font-family: "Archivo", sans-serif; font-size: .82rem; color: var(--ink-3);
}
.appfoot a { color: var(--ink-2); text-decoration: none; }
.appfoot a:hover { color: var(--brand); }
.appfoot .l { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: .8rem; }

/* Le titre de section h2 reste lisible sur un petit ecran. */
@media (max-width: 520px) {
  h2 { font-size: 1.35rem; }
  .stat .v { font-size: 1.6rem; }
  .card { padding: .95rem 1rem; }
  .sheet { padding: 1rem 1.05rem; }
  .sheet .boxes, .sheet .sig { grid-template-columns: 1fr; }
}

/* ── Aides d'affichage, utilisees par la page d'accueil ──────── */
/* Sous 760 px, l'entete ne garde que la marque et le menu : c'est ce qui
   empechait la barre de deborder a droite sur un telephone. */
@media (max-width: 760px) { .hide-sm { display: none !important; } }
@media (min-width: 761px) { .hide-lg { display: none !important; } }

/* Le lanceur des sept modules, sur la page d'accueil. */
.launch { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.launch a {
  display: flex; align-items: flex-start; gap: .7rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad);
  padding: .85rem .9rem; color: var(--ink); min-height: 44px;
}
.launch a:hover { border-color: var(--brand); transform: translateY(-2px); }
.launch a .k {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  font-family: "IBM Plex Mono", monospace; font-size: .72rem;
}
.launch a .t { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 760; font-size: .96rem; display: block; }
.launch a .d { font-size: .78rem; color: var(--ink-3); font-family: "Archivo", sans-serif; line-height: 1.35; display: block; margin-top: .15rem; }

/* Une aide visible quand le navigateur ne sait pas faire. */
.nosupport {
  font-family: "Archivo", sans-serif; font-size: .78rem; color: var(--ink-3);
  border-left: 3px solid var(--tag); background: var(--surface-2);
  padding: .5rem .7rem; border-radius: 0 9px 9px 0; margin-top: .5rem;
}