/* Portail, thème clair des maquettes (PortailConnexion, PortailSynthese). Polices auto-hébergées (OFL, fontsource 5.3.0). */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url(fonts/space-grotesk-latin-600-normal.woff2) format('woff2'); }
:root {
  --bg: #F5F6F8;
  --card: #FFFFFF;
  --line: #E3E7EC;
  --field: #C9D0D8;
  --ink: #16202B;
  --muted: #4A5663;
  --soft: #5B6875;
  --chip: #EEF1F4;
  --accent: #F4B942;
  --on-accent: #1A1406;
  --link: #8A5A0B;
  --link-hover: #6B4A0A;
  --error: #B42318;
  --rule: #EEF1F4;
  --here: #FFF4DB;
  --here-ink: #6B4A0A;
  --very-high: #6B4FC8;
  --high: #8E6FE0;
  --in-range: #0F9E80;
  --low: #E8743B;
  --very-low: #C93B3F;
  --target: #F1FAF7;
  --agp-outer: #D3EEE7;
  --agp-inner: #7FCDBA;
  --agp-median: #0B7A64;
  --meal: #B7791F;
  --rapid: #2F6FB8;
  --basal: #6A4FC0;
  --sugar: #D2601F;
  --activity: #9A5B12;
  --activity-band: #FCEBD0;
  --picked: #FFF8E8;
  --chosen: #E3EEFA;
  --chosen-ink: #1F4E85;
  --better: #0B7A64;
  --worse: #B4442A;
}
body { margin: 0; background: var(--bg); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
a { color: var(--link); text-decoration: none; font-weight: 600; }
a:hover { color: var(--link-hover); }
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 16px; box-sizing: border-box; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; }
.logo { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.cards { width: 100%; max-width: 1000px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.card { flex: 1 1 400px; max-width: 470px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.card h1 { margin: 0; font-size: 24px; font-weight: 700; }
.card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card strong { color: var(--ink); }
.card form { display: flex; flex-direction: column; gap: 8px; }
.info { background: var(--bg); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); }
.info svg { flex-shrink: 0; margin-top: 2px; color: var(--ink); }
.primary { min-height: 52px; border: none; border-radius: 14px; background: var(--accent); font-size: 16px; font-weight: 700; color: var(--on-accent); display: flex; align-items: center; justify-content: center; gap: 10px; }
.primary[hidden], .info[hidden], .or[hidden] { display: none; }
.primary:disabled { opacity: .6; cursor: progress; }
.secondary { min-height: 48px; padding: 0 18px; border: 1px solid var(--field); border-radius: 12px; background: var(--card); font-size: 15px; font-weight: 700; color: var(--ink); }
.secondary.wide { width: 100%; }
.link { border: none; background: none; padding: 4px; font-size: 14px; font-weight: 600; color: var(--link); }
.link:hover { color: var(--link-hover); }
.or { display: flex; align-items: center; gap: 12px; color: var(--soft); font-size: 13px; }
.or span { flex-grow: 1; height: 1px; background: var(--line); }
.mail label { font-size: 14px; font-weight: 600; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row input { flex: 1 1 220px; min-height: 48px; padding: 0 14px; border: 1px solid var(--field); border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--ink); }
.card .small { font-size: 13px; color: var(--soft); }
.card .error { color: var(--error); font-weight: 600; font-size: 14px; }
.note { margin: 0; max-width: 640px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--soft); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* Pages du suivi (après connexion). */
.top { background: var(--card); border-bottom: 1px solid var(--line); }
.bar { max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; box-sizing: border-box; }
.name { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
.small-logo { width: 32px; height: 32px; border-radius: 10px; }
.sections { display: flex; gap: 4px; flex-grow: 1; flex-wrap: wrap; }
.sections a, .periods a { padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.sections a.here, .periods a.here { background: var(--here); font-weight: 700; color: var(--here-ink); }
.who { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.link.quiet { color: var(--muted); font-size: 13px; }
.sheet { max-width: 1200px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.grow { flex-grow: 1; }
.heading h1 { margin: 0; font-size: 26px; font-weight: 700; }
.sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.periods { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.periods a { min-height: 38px; display: flex; align-items: center; box-sizing: border-box; }
.dates summary { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.dates[open] { flex-basis: 100%; order: 1; }
.dates form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 14px; }
.dates input { min-height: 40px; padding: 0 10px; border: 1px solid var(--field); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink); }
.save summary { gap: 8px; }
.pdf { min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--accent); font-size: 14px; font-weight: 700; color: var(--on-accent); display: inline-flex; align-items: center; gap: 8px; }
.pdf:hover { color: var(--on-accent); }
.save input { flex: 1 1 220px; }
.saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.kept { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.kept a { font-size: 13px; color: var(--ink); }
.kept.here { background: var(--here); border-color: var(--here); }
.kept.here a { font-weight: 700; color: var(--here-ink); }
.kept form { display: contents; }
.kept .link { min-width: 32px; min-height: 32px; font-size: 16px; line-height: 1; }
.heading > .grow { flex: 1 1 320px; min-width: 0; }
.split { display: flex; flex-wrap: wrap; gap: 20px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.panel p { margin: 0; }
.panel .small, .foot { font-size: 12px; color: var(--soft); }
.warn { font-size: 13px; font-weight: 600; color: var(--here-ink); background: var(--here); border-radius: 10px; padding: 8px 12px; }
.ranges { flex: 1 1 340px; }
.tir { display: flex; gap: 16px; }
.tir-bar { flex-shrink: 0; border-radius: 8px; }
.tir ul { flex-grow: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tir li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.tir strong, .tir small, .figure b, .figure small { display: block; }
.tir small, .figure small { color: var(--soft); font-size: 12px; font-weight: 400; }
.figure { text-align: right; }
.figure b, .tile .value, .line b { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.figure b { font-size: 18px; }
.dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dot.r-very-high { background: var(--very-high); } .dot.r-high { background: var(--high); } .dot.r-in-range { background: var(--in-range); }
.dot.r-low { background: var(--low); } .dot.r-very-low { background: var(--very-low); }
rect.r-very-high { fill: var(--very-high); } rect.r-high { fill: var(--high); } rect.r-in-range { fill: var(--in-range); }
rect.r-low { fill: var(--low); } rect.r-very-low { fill: var(--very-low); }
.tiles { flex: 2 1 560px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-content: start; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.tile .label, .tile .hint { font-size: 13px; color: var(--soft); }
.tile .hint { font-size: 12px; }
.tile .value { font-size: 28px; }
.tile .value small { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--soft); }
.tile .trend { font-size: 12px; font-weight: 600; color: var(--muted); }
.tile .trend.better { color: var(--better); }
.tile .trend.worse { color: var(--worse); }
.legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; font-size: 12px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 16px; height: 10px; }
.k-median { height: 3px; background: var(--agp-median); } .k-inner { background: var(--agp-inner); } .k-outer { background: var(--agp-outer); }
.chart { overflow-x: auto; }
.curve { width: 100%; min-width: 640px; height: auto; display: block; }
.curve .target { fill: var(--target); }
.curve .outer { fill: var(--agp-outer); } .curve .inner { fill: var(--agp-inner); }
.curve .median { fill: none; stroke: var(--agp-median); stroke-width: 2.5; stroke-linejoin: round; }
.curve line { stroke-width: 1; }
.curve .dashed { stroke-dasharray: 4 4; }
.curve .l-very-low { stroke: var(--very-low); } .curve .l-low { stroke: var(--low); } .curve .l-high { stroke: var(--high); } .curve .l-very-high { stroke: var(--very-high); }
.curve .axis { font-size: 11px; fill: var(--soft); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
/* Pages Jours et Événements (maquettes PortailJour, PortailEvenements) : couleurs de la légende par type d'événement. */
.t-meal, .f-repas { --tone: var(--meal); } .t-rapid, .f-insuline { --tone: var(--rapid); } .t-basal { --tone: var(--basal); }
.t-sugar, .f-resucrages { --tone: var(--sugar); } .t-activity, .f-activites { --tone: var(--activity); }
.t-other, .t-settings, .f-reglages { --tone: var(--soft); } .f-all { --tone: var(--ink); }
.dot[class*="t-"], .dot[class*="f-"] { border-radius: 50%; background: var(--tone); display: inline-block; }
.k-activity { background: var(--activity-band); }
.dayhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dayhead h1 { margin: 0; font-size: 26px; font-weight: 700; min-width: 280px; text-align: center; }
.step { width: 44px; height: 44px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.step.off { opacity: .35; }
.dayhead .dates summary { gap: 8px; }
.dayhead .dates[open] { flex-basis: auto; order: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: var(--muted); }
.chip strong { font-family: 'Space Grotesk', sans-serif; font-size: 15px; color: var(--ink); }
.curve .activity { fill: var(--activity-band); }
.curve .glucose { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.mark line { stroke: var(--tone); stroke-dasharray: 3 3; }
.mark circle { fill: var(--tone); stroke: var(--card); stroke-width: 2; }
.mark text { display: none; font-size: 11px; font-weight: 700; fill: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.mark.picked { --tone: var(--ink); }
.mark.picked circle { r: 12px; }
.mark.picked text { display: inline; }
.events { gap: 0; padding-top: 8px; }
.events h2 { margin: 12px 0 8px; }
.event { width: 100%; min-height: 60px; padding: 10px 12px; border: none; border-top: 1px solid var(--rule); background: transparent; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--ink); }
.event.picked { background: var(--picked); border-radius: 10px; }
.event .time, .day .time, .change .time { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; }
.event .time { width: 52px; }
.event .dot { width: 12px; height: 12px; }
.what { flex: 1 1 260px; }
.what strong, .what small { display: block; font-size: 14px; }
.what small { font-size: 13px; color: var(--muted); }
.doses { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 6px 10px; border-radius: 10px; background: var(--chip); font-size: 13px; color: var(--muted); }
.pill strong { color: var(--ink); }
.pill.chosen, .pill.chosen strong { background: var(--chosen); color: var(--chosen-ink); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters a { min-height: 38px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 19px; background: var(--card); font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.filters a.here { border-color: var(--ink); background: var(--ink); color: var(--card); font-weight: 700; }
.filters .f-all { --tone: currentColor; }
.day { gap: 0; padding: 4px 20px 8px; }
.dayline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0 8px; font-size: 13px; }
.dayline h2 { font-size: 15px; }
.table { overflow-x: auto; }
.day table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.day th { padding: 6px 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--soft); }
.day td { padding: 10px 8px; border-top: 1px solid var(--rule); }
.day .c-time { width: 64px; } .day .c-num { width: 120px; }
.day td .dot { margin-right: 8px; }
.muted { color: var(--muted); }
.dose { font-weight: 700; }
.dose.differs { color: var(--chosen-ink); }
.half { flex: 1 1 480px; min-width: 0; box-sizing: border-box; }
.more { margin-top: 12px; font-size: 14px; font-weight: 700; }
.line { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.line b { font-size: 17px; }
.foot { padding: 8px 0 24px; }
@media (max-width: 640px) { .bar, .sheet { padding-left: 16px; padding-right: 16px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dayhead h1 { order: -1; flex-basis: 100%; min-width: 0; text-align: left; font-size: 22px; } }

/* Réglages (maquette PortailReglages). */
.ratios { flex: 1 1 520px; gap: 4px; }
.setting { min-height: 52px; gap: 12px; }
.setting strong, .setting small { display: block; }
.setting small { font-size: 12px; color: var(--soft); }
.setting b { font-size: 22px; width: 56px; text-align: right; }
.tiles.settings { flex: 1 1 520px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tiles.settings .value { font-size: 22px; }
.changes { gap: 0; }
.changes h2 { margin-bottom: 8px; }
.change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--rule); }
.change .time { width: 64px; }
.badge { padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.b-app { background: var(--here); color: var(--here-ink); }
.b-hand { background: var(--chip); color: var(--muted); }
.b-start { background: var(--chosen); color: var(--chosen-ink); }
/* PDF de la vue d'ensemble (WeasyPrint) et impression du navigateur : la même page, sans ce qui ne sert qu'à l'écran. */
@page { size: A4; margin: 12mm; @bottom-right { content: counter(page) " / " counter(pages); font: 9px 'Plus Jakarta Sans', sans-serif; color: #5B6875; } }
@media print {
  body.suivi { background: var(--card); }
  .top { border-bottom: none; }
  .bar, .sheet { max-width: none; padding: 0; min-height: 0; }
  /* Les colonnes flex ne se coupent pas entre les pages dans WeasyPrint : blocs simples. */
  .sheet, .panel { display: block; }
  .name, .legend span { white-space: nowrap; }
  .small-logo { flex-shrink: 0; }
  /* Plages à gauche, chiffres à droite, comme à l'écran : le tout tient sur une page A4. */
  .split { flex-wrap: nowrap; gap: 12px; }
  .ranges { flex: 0 0 46%; box-sizing: border-box; }
  .half { flex: 1 1 0; }
  .change { min-height: 0; padding: 4px 0; font-size: 13px; }
  .change .time { width: 44px; font-size: 13px; }
  .tir { gap: 10px; }
  .tir-bar { height: 220px; }
  .tir ul { gap: 0; }
  .tir li { min-height: 44px; }
  .tiles { flex: 1 1 0; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { padding: 8px 10px; }
  .tile .value { font-size: 20px; }
  .line { min-height: 24px; font-size: 13px; }
  .line b { font-size: 14px; }
  .sheet > * { margin-top: 12px; }
  .panel > * + * { margin-top: 8px; }
  .panel > .line { margin-top: 0; }
  .sections, .who, .periods, .dates, .saved, .pdf, .more { display: none; }
  .panel, .tile { break-inside: avoid; }
  .panel { padding: 14px; }
  .chart { overflow: visible; }
  .foot { padding: 0; break-before: avoid; }
  .curve { min-width: 0; }
}