/* Delta — design D53 : thème selon le système, mobile d'abord, aucune dépendance externe. */
:root {
  --fond: #f4f7fb;
  --surface: rgba(255, 255, 255, .85);
  --bord: rgba(8, 145, 178, .20);
  --texte: #0b1220;
  --doux: #51607a;
  --a1: #0891b2;
  --a2: #7c3aed;
  --halo: rgba(8, 145, 178, .12);
  --trame: rgba(15, 23, 42, .05);
  --lueur: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(8, 145, 178, .08);
  /* dérivées pour le contraste AA : --a1 reste décoratif, le texte d'accent utilise --lien */
  --lien: #0e7490;
  --sur-accent: #ffffff;
  --voile-accent: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
  --fort: #e11d48;
  --moyen: #f59e0b;
  --faible: #15803d;
  --vert: #10b981;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --rayon: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #060a13;
    --surface: rgba(16, 24, 40, .72);
    --bord: rgba(94, 234, 212, .16);
    --texte: #e6edf7;
    --doux: #8a97ad;
    --a1: #22d3ee;
    --a2: #a78bfa;
    --halo: rgba(34, 211, 238, .18);
    --trame: rgba(148, 163, 184, .06);
    --lueur: 0 0 24px rgba(34, 211, 238, .25);
    --lien: #22d3ee;
    --sur-accent: #04111c;
    --voile-accent: linear-gradient(transparent, transparent);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color: var(--texte);
  background-color: var(--fond);
  background-image:
    radial-gradient(1100px 520px at 50% -140px, var(--halo), transparent 70%),
    linear-gradient(var(--trame) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  min-height: 100vh;
}
a { color: var(--lien); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .9em; background: color-mix(in srgb, var(--a1) 14%, transparent); padding: .05em .35em; border-radius: 6px; }
.saut { position: absolute; left: -999px; top: 0; }
.saut:focus { left: 8px; top: 8px; background: var(--surface); padding: .5rem; z-index: 20; }

/* ---------- en-tête ---------- */
/* mode standalone iOS (viewport-fit=cover, barre d'état translucide) : l'en-tête reste sous l'encoche */
.entete { position: sticky; top: 0; z-index: 10; padding: calc(.5rem + env(safe-area-inset-top, 0px)) calc(.5rem + env(safe-area-inset-right, 0px)) 0 calc(.5rem + env(safe-area-inset-left, 0px)); }
.entete-carte {
  max-width: 1000px; margin: 0 auto; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--lueur); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: .55rem .6rem .45rem;
}
.entete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem .8rem; }
.marque { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--texte); }
.logo { width: 30px; height: 30px; flex: none; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.05; }
.marque-nom { font-family: var(--mono); font-weight: 800; letter-spacing: .32em; font-size: 1.05rem; }
.marque-sous { font-family: var(--mono); font-size: .62rem; letter-spacing: .28em; color: var(--doux); margin-top: .15rem; }
.etat-agents { display: flex; flex-wrap: wrap; gap: .35rem; }
.agent { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .7rem; color: var(--doux); border: 1px solid var(--bord); border-radius: 999px; padding: .15rem .55rem; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.agent strong { color: var(--texte); font-weight: 600; }
.point { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: var(--vert); box-shadow: 0 0 8px var(--vert); }
.agent.orange .point { background: var(--moyen); box-shadow: 0 0 8px var(--moyen); }
.agent.rouge .point { background: var(--fort); box-shadow: 0 0 10px var(--fort); }
.agent.rouge { border-color: color-mix(in srgb, var(--fort) 55%, transparent); }
.onglets { display: flex; gap: .3rem; overflow-x: auto; padding: .5rem 0 .15rem; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a {
  flex: 0 0 auto; font-family: var(--mono); font-size: .76rem; letter-spacing: .02em; text-decoration: none; color: var(--doux);
  padding: .32rem .75rem; border-radius: 999px; border: 1px solid var(--bord); white-space: nowrap;
}
.onglets a:hover { color: var(--texte); }
.onglets a.actif { color: var(--sur-accent); font-weight: 700; border-color: transparent; background: var(--voile-accent), linear-gradient(90deg, var(--a1), var(--a2)); }

/* ---------- contenu ---------- */
.contenu { max-width: 1000px; margin: 0 auto; padding: .75rem .75rem 1rem; }
.contenu h2 { font-size: 1.15rem; margin: 1.3rem 0 .6rem; letter-spacing: .01em; }
.contenu h3 { font-size: 1.02rem; margin: .9rem 0 .35rem; }
.chargement, .vide, .erreur { color: var(--doux); padding: 1rem; text-align: center; }
.erreur { color: var(--fort); }
.sous-titre { color: var(--doux); font-size: .9rem; margin: 0 0 .6rem; }
.bandeau-alerte { border: 1px solid color-mix(in srgb, var(--fort) 50%, transparent); background: color-mix(in srgb, var(--fort) 10%, var(--surface)); border-radius: var(--rayon); padding: .6rem .9rem; margin: .5rem 0 1rem; }

.encart-nouveau { border: 1px solid color-mix(in srgb, var(--a1) 50%, transparent); background: color-mix(in srgb, var(--a1) 8%, var(--surface)); border-radius: var(--rayon); padding: .55rem .9rem; margin: .5rem 0 1rem; font-size: .92rem; }
.encart-nouveau a { color: var(--a1); font-weight: 600; white-space: nowrap; }
a.ref-lien { text-decoration-style: dotted; }
a.ref-lien code { color: inherit; }
.retour-ref { margin: .2rem 0 .9rem; font-size: .92rem; }

.carte, .synthese, .outils, .comptes {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--lueur); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.carte::before, .synthese::before, .outils::before, .comptes::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.synthese { padding: .85rem 1rem; margin: .6rem 0; }
.synthese h3 { margin: 0 0 .35rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: 1rem; }
.synthese .meta { font-family: var(--mono); font-size: .72rem; color: var(--doux); font-weight: normal; }
.synthese p { margin: 0; }
.echecs { font-size: .85rem; color: var(--doux); margin: .45rem 0 0; }

/* ---------- Tes outils (D56) ---------- */
.outils { padding: .75rem 1rem .6rem; margin: .6rem 0 1rem; }
.outils h3 { margin: 0 0 .4rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--doux); }
.outils table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.outils th { text-align: left; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); font-weight: 600; padding: .2rem .4rem .35rem 0; }
.outils td { padding: .35rem .4rem .35rem 0; border-top: 1px solid var(--bord); vertical-align: middle; }
.outils td.v { font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; }
.statut { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.statut.en_retard .point { background: var(--moyen); box-shadow: 0 0 8px var(--moyen); }
.statut.inconnu .point { background: var(--doux); box-shadow: none; }
.outils tr.avec-note td { padding-bottom: .1rem; }
.outils tr.ligne-note td { border-top: 0; padding: 0 .4rem .45rem 0; font-size: .74rem; line-height: 1.4; color: var(--doux); }
.statut.embarque .point, .statut.non_utilise .point { background: var(--doux); }
.outils .pied-outils { font-size: .75rem; color: var(--doux); margin: .45rem 0 0; }
@media (max-width: 520px) { .outils .col-derniere { display: none; } .outils td.v { font-size: .72rem; overflow-wrap: normal; } }

/* Compte et quotas (D93, D71) */
.comptes { padding: .75rem 1rem .6rem; margin: .6rem 0 1rem; }
.comptes h3 { margin: 0 0 .5rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--doux); }
.quotas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.quota { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; row-gap: .25rem; align-items: baseline; font-size: .88rem; }
.quota-pct { font-family: var(--mono); font-weight: 600; }
.barre { grid-column: 1 / -1; height: .5rem; border-radius: 999px; background: var(--trame); border: 1px solid var(--bord); overflow: hidden; }
.barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--a1), var(--a2)); border-radius: 999px; }
.quota.alerte .barre span { background: var(--fort); }
.quota.alerte .quota-pct { color: var(--fort); }
.quota.perimee .barre span { opacity: .35; }
.quota.ancien .quota-rz { font-style: italic; }
.quota-rz { grid-column: 1 / -1; font-size: .75rem; color: var(--doux); }
.credits { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--bord); display: grid; gap: .6rem; }
.credit { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; row-gap: .25rem; align-items: baseline; font-size: .88rem; }
.credit.alerte .quota-pct, .credit.alerte .quota-rz { color: var(--fort); }
.credit.alerte .quota-rz { font-weight: 600; }
.credit.perimee { opacity: .6; }
.alerte-d71 { margin: .6rem 0 0; padding: .45rem .7rem; border: 1px solid color-mix(in srgb, var(--fort) 50%, transparent); background: color-mix(in srgb, var(--fort) 10%, var(--surface)); border-radius: calc(var(--rayon) / 2); font-size: .85rem; }
.comptes .pied-comptes { font-size: .75rem; color: var(--doux); margin: .5rem 0 0; }

/* ---------- filtres ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.filtres button, .kb-filtres select {
  font: inherit; font-family: var(--mono); font-size: .74rem; border: 1px solid var(--bord); background: var(--surface); color: var(--texte);
  border-radius: 999px; padding: .3rem .75rem; cursor: pointer; max-width: 100%;
}
.filtres button[aria-pressed="true"] { color: var(--sur-accent); font-weight: 700; border-color: transparent; background: var(--voile-accent), linear-gradient(90deg, var(--a1), var(--a2)); }
.kb-filtres input[type="search"] { flex: 1 1 100%; font: inherit; padding: .5rem .8rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface); color: var(--texte); }

/* ---------- cartes ---------- */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.carte { padding: .95rem 1rem .85rem; }
.carte.impact-fort { border-color: color-mix(in srgb, var(--fort) 45%, var(--bord)); }
.carte.fait { opacity: .6; }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.badge { font-family: var(--mono); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-radius: 6px; padding: .12rem .45rem; border: 1px solid var(--bord); color: var(--doux); }
.badge.impact { border-color: transparent; }
.badge.impact.fort { background: var(--fort); color: #fff; box-shadow: 0 0 12px color-mix(in srgb, var(--fort) 55%, transparent); }
.badge.impact.moyen { background: var(--moyen); color: #1b1206; }
.badge.impact.faible { background: var(--faible); color: #fff; }
.badge.impact.nul { background: transparent; border-color: var(--bord); color: var(--doux); }
.badge.certitude.officiel { border-color: var(--a1); color: var(--lien); }
.badge.certitude.rapporte { border-color: var(--a2); color: var(--texte); }
.badge.certitude.non_confirme { border-style: dashed; }
.badge.revise { border-color: var(--moyen); color: var(--texte); }
.badge.attente { border-style: dashed; }
.badge.anterieur { border-style: dotted; }
.badge.perime { border-color: var(--moyen); color: var(--texte); border-style: dashed; }
.filtres button.bascule-nul { color: var(--doux); }
.filtres button.bascule-nul[aria-pressed="true"] { color: var(--texte); background: var(--surface); font-weight: 400; border-color: var(--a1); }
.badge.verdict.utiliser { background: var(--faible); color: #fff; border-color: transparent; }
.badge.verdict.tester { background: var(--moyen); color: #1b1206; border-color: transparent; }
.badge.verdict.ignorer { color: var(--doux); }
.carte h3, .carte h4 { margin: 0 0 .2rem; font-size: 1.03rem; line-height: 1.35; }
.carte h4 { font-size: .98rem; }
.carte .meta { font-family: var(--mono); font-size: .7rem; color: var(--doux); margin-bottom: .5rem; }
.carte .resume { margin: 0 0 .5rem; }
.pour-toi { border-radius: 10px; padding: .55rem .75rem; margin: .55rem 0; border: 1px solid var(--bord);
  background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 12%, transparent), color-mix(in srgb, var(--a2) 12%, transparent)); }
.pour-toi strong { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lien); margin-bottom: .15rem; }
.pour-toi p { margin: 0; }
.action { border: 1px dashed var(--bord); border-radius: 10px; padding: .55rem .75rem; margin: .55rem 0; }
.action strong { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.action ol { margin: .3rem 0 0; padding-left: 1.25rem; }
.action .effort { float: right; font-family: var(--mono); font-size: .7rem; color: var(--doux); }
.action label { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; font-size: .9rem; cursor: pointer; }
.action input { accent-color: var(--a1); width: 1.05rem; height: 1.05rem; }
.projets { font-size: .8rem; color: var(--doux); margin: .3rem 0 0; }
.sources { margin: .5rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; }
.sources .off::after { content: " ✓"; color: var(--lien); }
.ecartes { margin-top: 1rem; font-size: .85rem; color: var(--doux); }
.ecartes summary { cursor: pointer; }
.actions-faites { margin-top: 1.5rem; }
.actions-faites summary { cursor: pointer; font-weight: 600; }
.ecartes ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.jours { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.jours a { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; text-decoration: none; color: var(--texte); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .65rem .9rem; }
.jours .compteurs { font-family: var(--mono); font-size: .72rem; color: var(--doux); }

/* ---------- Référence ---------- */
.avancement { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: var(--mono); font-size: .78rem; margin: .5rem 0; }
.avancement progress { flex: 1 1 160px; height: .55rem; accent-color: var(--a1); }
.etiquette { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); margin-top: .5rem; }
pre.usage { margin: .3rem 0 .4rem; padding: .55rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--a1) 9%, transparent); border: 1px solid var(--bord); overflow-x: auto; font-size: .8rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
pre.usage code { background: none; padding: 0; }
pre.usage.etapes code { font-family: inherit; }
.carte.kb.attente::before { opacity: .35; }
.carte .source-en { color: var(--doux); font-style: italic; }
.methode-corps p { margin: 0 0 .55rem; }
.methode-corps ul { margin: 0 0 .55rem; padding-left: 1.2rem; }
.methode-corps h4 { margin: .7rem 0 .3rem; }
button.plus { font: inherit; font-family: var(--mono); font-size: .78rem; margin: 1rem auto; display: block; padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid var(--a1); background: var(--surface); color: var(--lien); cursor: pointer; }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--bord); }
button.envoi-delta, a.envoi-delta { font: inherit; font-family: var(--mono); font-size: .72rem; padding: .28rem .8rem; border-radius: 999px; border: 1px solid var(--a1); background: var(--surface); color: var(--lien); cursor: pointer; }
a.envoi-delta { text-decoration: none; }
button.envoi-delta:disabled { cursor: default; opacity: .7; }
.envoi-statut { font-size: .78rem; color: var(--doux); }
.avis-console { max-width: 1000px; margin: .5rem auto 0; padding: .5rem .9rem; font-size: .8rem; color: var(--doux); border: 1px solid var(--bord); border-radius: .5rem; background: var(--surface); }

.pied { max-width: 1000px; margin: 2rem auto; padding: 0 1rem calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: .78rem; color: var(--doux); }

@media (min-width: 720px) {
  body { font-size: 17px; }
  .entete { padding: calc(.75rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0 calc(1rem + env(safe-area-inset-left, 0px)); }
  .entete-carte { padding: .7rem 1rem .55rem; }
  .logo { width: 36px; height: 36px; }
  .marque-nom { font-size: 1.2rem; }
  .contenu { padding: 1rem 1rem 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .onglets a, .filtres button, .carte, button.plus, button.envoi-delta, a.envoi-delta { transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
  .carte:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ---------- Semaine (D98) ---------- */
.bloc-semaine { margin: 1.1rem 0; }
.bloc-semaine .liste { gap: .6rem; }
.ligne-semaine { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .7rem .9rem; }
.ligne-semaine.impact-fort { border-color: color-mix(in srgb, var(--fort) 45%, var(--bord)); }
.ligne-semaine h4 { margin: 0 0 .2rem; font-size: .98rem; line-height: 1.35; }
.ligne-semaine .meta { font-family: var(--mono); font-size: .7rem; color: var(--doux); margin-bottom: .4rem; }
.action-courte { margin: 0; overflow-wrap: anywhere; }
.doux { color: var(--doux); }
.bloc-semaine .badges .meta { margin: 0; align-self: center; }
.bloc-semaine details .liste { margin-top: .6rem; }
.filtres select { max-width: 100%; }

/* ---------- Aide (D112) ---------- */
.aide-bloc { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .75rem .95rem; margin: 0 0 .7rem; overflow-wrap: anywhere; }
.aide-bloc h3 { margin: 0 0 .35rem; font-size: 1rem; line-height: 1.35; }
.aide-ligne { margin: 0 0 .35rem; font-size: .92rem; line-height: 1.5; }
.aide-ligne:last-child { margin-bottom: 0; }
.aide-ligne strong { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); margin-right: .25rem; }
.aide-outils { margin: 0 0 .35rem; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; }
.pied a { color: inherit; }

/* ---------- Recherche dans toute la veille (D114) ---------- */
.recherche { margin: .5rem 0 1.25rem; }
.recherche .kb-filtres { margin-top: 0; }
.carte.resultat .extrait { margin: 0; font-size: .9rem; color: var(--texte); overflow-wrap: anywhere; }
mark { background: color-mix(in srgb, var(--a1) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 .1em; }