/* Carnet d'élevage El Feth — interface mobile (FR / AR RTL)
   Un seul système : jetons → base → composants → responsive.
   Palette du site : vert #13803c (actions), vert foncé #0c5a29, menthe #eef7f1 / #dcefe3, doré #f4b82a (décor seulement).
   Jamais de fond sombre : le noir ne sert qu'au texte. */

/* ------------------------------------------------------------------ 1. Jetons */
:root {
  color-scheme: light;
  /* couleurs */
  --leaf: #13803c;          /* action principale (texte blanc dessus : 5,4:1) */
  --leaf-deep: #0c5a29;     /* survol, texte vert */
  --mint: #eef7f1;          /* fond général */
  --mint-2: #dcefe3;        /* filets, fonds tonals */
  --mint-3: #c3dfcc;        /* bordures de champs */
  --paper: #ffffff;
  --ink: #15241b;           /* texte */
  --muted: #4f6356;         /* texte secondaire (6,4:1 sur blanc) */
  --line: var(--mint-2);
  --grain: #f4b82a;         /* doré décoratif */
  --gold: #8f6300;          /* texte doré lisible */
  --warn-bg: #fff6dc;
  --warn-ink: #6e4d00;
  --red: #c8231f;
  --bad-bg: #fdeceb;
  --bad-ink: #8d1a17;
  --info-bg: var(--mint);
  /* typographie */
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: var(--f-body);
  --lh: 1.5;
  /* rayons */
  --r-lg: 20px;   /* barres, cartes, panneaux, boîte de dialogue */
  --r-md: 14px;   /* champs, lignes de liste, alertes, onglets de bande */
  --r-sm: 10px;   /* petits blocs */
  --r-pill: 999px;
  /* espacements */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --gutter: 16px;
  --app-w: 640px;
  /* ombres (très douces, teintées de vert) */
  --sh-1: 0 1px 2px rgb(12 90 41 / .06);
  --sh-2: 0 8px 24px -12px rgb(12 90 41 / .35);
  --sh-3: 0 14px 30px -10px rgb(12 90 41 / .45);
  /* cibles tactiles */
  --tap: 44px;
  --ctl: 50px;
  /* teinte par défaut (bande) */
  --t-bg: var(--paper); --t-ac: var(--leaf); --t-ink: var(--leaf-deep);
}
[dir="rtl"] {
  --f-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-display: "Alexandria", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --lh: 1.7;
}

/* Teintes de bande : fond clair + accent + encre lisible (AA sur le fond) */
.t1 { --t-bg: #e3f2e8; --t-ac: #13803c; --t-ink: #0c5a29; }
.t2 { --t-bg: #eaf3fb; --t-ac: #2f6fa8; --t-ink: #1e4f7d; }
.t3 { --t-bg: #fbf5e4; --t-ac: #c48f12; --t-ink: #7a5300; }
.t4 { --t-bg: #f1eefa; --t-ac: #6a55a8; --t-ink: #4a3a80; }
.t5 { --t-bg: #fdefe8; --t-ac: #c2633a; --t-ink: #8a3f1e; }
.t6 { --t-bg: #f1f5e6; --t-ac: #6b8c2e; --t-ink: #44601a; }
.t0 { --t-bg: #f1f2f0; --t-ac: #a3aba6; --t-ink: #55605a; }

/* ------------------------------------------------------------------ 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgb(19 128 60 / .12); }
body { margin: 0; min-height: 100dvh; background: var(--mint); color: var(--ink); font: 400 16px/var(--lh) var(--f-body); }
a { color: inherit; }
a, button, input, select, label, summary { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; }
h2 { font-size: 1.1rem; }
p { margin: 0; }
b { font-weight: 700; }
small { font-size: .8rem; font-weight: 500; color: var(--muted); }
em { font-style: normal; }
[hidden] { display: none !important; }
::selection { background: var(--mint-2); color: var(--ink); }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; border-radius: var(--r-sm); }
svg.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.i--lg { width: 1.5rem; height: 1.5rem; }
[dir="rtl"] .i--flip { transform: scaleX(-1); }
.ico { display: inline-flex; flex: none; line-height: 1; }
.muted { color: var(--muted); font-size: .95rem; }
.muted--ink { color: var(--muted); }

/* ------------------------------------------------------------------ 3. Coquille : barre du haut, vue, barre du bas */
#app { max-width: var(--app-w); margin-inline: auto; padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.view { display: grid; gap: var(--sp-4); padding: var(--sp-4) var(--gutter); }
.h2 { margin-top: var(--sp-2); padding-inline: var(--sp-1); }

.bar {
  position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 10;
  display: flex; align-items: center; gap: var(--sp-3);
  margin: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.bar__logo { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.bar__back { display: grid; flex: none; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--mint); color: var(--leaf-deep); text-decoration: none; }
.bar__back:hover { background: var(--mint-2); }
.bar__title { flex: 1; min-width: 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__lang { flex: none; min-width: var(--tap); height: var(--tap); padding: 0 var(--sp-3); border: 1.5px solid var(--mint-3); border-radius: var(--r-pill); background: var(--paper); color: var(--leaf-deep); font: 700 .95rem var(--f-body); cursor: pointer; }
.bar__lang:hover { background: var(--mint); }

.tabbar {
  position: fixed; inset: auto var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1);
  max-width: calc(var(--app-w) - 2 * var(--gutter)); margin-inline: auto; padding: var(--sp-1);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: var(--sp-1); border-radius: calc(var(--r-lg) - var(--sp-1)); text-decoration: none; font-size: .78rem; font-weight: 600; color: var(--muted); }
.tabbar a .i { width: 1.4rem; height: 1.4rem; }
.tabbar a[aria-current="page"] { color: var(--leaf-deep); background: var(--mint); }

/* Bannières (sous la barre du haut) */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) var(--gutter) 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-weight: 600; font-size: .95rem; }
.banner--ok { background: var(--mint-2); color: var(--leaf-deep); }
.banner--bad { background: var(--bad-bg); color: var(--bad-ink); }
.banner--info { background: var(--warn-bg); color: var(--warn-ink); }
.banner--update { display: block; width: calc(100% - 2 * var(--gutter)); border: 0; text-align: start; font: 700 .95rem var(--f-body); background: var(--leaf); color: #fff; cursor: pointer; }
.banner--update:hover { background: var(--leaf-deep); }

/* ------------------------------------------------------------------ 4. Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl); padding: var(--sp-2) 20px; border: 1.5px solid transparent; border-radius: var(--r-pill); font: 700 1rem/1.25 var(--f-body); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn--main { background: var(--leaf); color: #fff; }
.btn--main:hover { background: var(--leaf-deep); }
.btn--grain { background: var(--mint-2); color: var(--leaf-deep); }          /* bouton tonal (secondaire mis en avant) */
.btn--grain:hover { background: var(--mint-3); }
.btn--line { background: var(--paper); border-color: var(--mint-3); color: var(--leaf-deep); }
.btn--line:hover { background: var(--mint); }
.btn--danger { background: var(--paper); border-color: #f0b4b1; color: var(--red); }
.btn--danger:hover { background: var(--bad-bg); }
.stack { display: grid; gap: var(--sp-2); }
.file { position: relative; overflow: hidden; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.linkbtn { padding: 0; border: 0; background: none; font: 700 .95rem var(--f-body); color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.chipbtn { min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: var(--leaf); color: #fff; font: 700 .85rem var(--f-body); cursor: pointer; }
.chipbtn:hover { background: var(--leaf-deep); }
.iconbtn { display: grid; flex: none; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.iconbtn:hover { background: var(--mint); color: var(--leaf-deep); }
.iconbtn .i { width: 1.25rem; height: 1.25rem; }
.fab { position: fixed; z-index: 9; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); inset-inline-end: max(var(--gutter), calc(50vw - var(--app-w) / 2 + var(--gutter))); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--leaf); color: #fff; text-decoration: none; box-shadow: 0 12px 28px -8px rgb(12 90 41 / .6); }
.fab:hover { background: var(--leaf-deep); }
.fab .i { width: 1.75rem; height: 1.75rem; }

/* ------------------------------------------------------------------ 5. Surfaces : panneaux, formulaires, statistiques */
.panel, .form { display: grid; gap: var(--sp-4); padding: var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.panel--slim { gap: var(--sp-3); font-weight: 600; }
.panel--ink { background: linear-gradient(180deg, #f5faf7, var(--paper) 70%); }
.form h2, .panel h2, .withico, .kpi__label, .more summary, .field__label { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.form h2 .i, .panel h2 .i { color: var(--leaf); width: 1.3rem; height: 1.3rem; }
.lbl { display: inline-flex; align-items: center; gap: var(--sp-2); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); margin: 0; }
.stats div { min-width: 0; }
.stats dt { font-size: .8rem; font-weight: 600; color: var(--muted); }
.stats dd { margin: 0; font: 700 1.3rem/1.2 var(--f-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats dd small { font-size: .78rem; font-weight: 600; }
.stats .dd--txt { font-size: 1rem; overflow-wrap: normal; hyphens: auto; }
.stats--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--hero dd { font-size: 1.5rem; }
.kpi__label { font-size: .85rem; font-weight: 700; color: var(--muted); }
.kpi__label .i { color: var(--leaf); }
.kpi__big { font: 700 2.4rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--leaf-deep); letter-spacing: -.02em; }
.kpi__big small { font-size: 1rem; }
.kpi__big.good { color: var(--leaf-deep); }
.kpi__big.bad { color: var(--red); }

/* Formulaires */
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.form small, .field small { font-weight: 400; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 600; font-size: .92rem; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
input, select { width: 100%; min-height: var(--ctl); padding: 10px 14px; font: inherit; font-weight: 500; color: var(--ink); background: var(--paper); border: 1.5px solid var(--mint-3); border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #8d9b92; font-weight: 400; }
input:focus, select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgb(19 128 60 / .2); }
input[type="date"] { min-width: 0; }
input { caret-color: var(--leaf); }
select { appearance: none; -webkit-appearance: none; padding-inline-end: 38px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230c5a29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
[dir="rtl"] select { background-position: left 12px center; }
.stepper { display: grid; grid-template-columns: 64px 1fr 64px; gap: var(--sp-2); }
.stepper button { display: grid; place-items: center; min-height: 56px; border: 1.5px solid var(--mint-3); border-radius: var(--r-md); background: var(--mint); color: var(--leaf-deep); cursor: pointer; }
.stepper button:hover { background: var(--mint-2); }
.stepper input { min-height: 56px; text-align: center; font: 700 1.6rem var(--f-display); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.unitrow { display: grid; grid-template-columns: 1fr 120px; gap: var(--sp-2); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); padding: var(--sp-1); background: var(--mint); border-radius: var(--r-pill); }
.seg button { min-height: var(--tap); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--leaf-deep); font: 700 1rem var(--f-body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--leaf); color: #fff; }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); font-weight: 700; font-size: .85rem; cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 22px; margin: 0; padding: 0; accent-color: var(--leaf); }
.check--big { font-size: 1rem; font-weight: 600; }
.more { padding: 0 var(--sp-3); background: var(--mint); border-radius: var(--r-md); }
.more summary { min-height: var(--tap); padding: var(--sp-3) 0; font-weight: 700; cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary .i { color: var(--leaf); }
.more[open] { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-3); }
.form--edit { border-color: var(--leaf); box-shadow: 0 0 0 3px rgb(19 128 60 / .15); }

/* ------------------------------------------------------------------ 6. Bandes : cartes, en-tête, onglets */
.cards { display: grid; gap: var(--sp-3); }
.card { position: relative; overflow: hidden; background: var(--t-bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--t-ac); }
.card__link { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-4) 20px; text-decoration: none; }
[dir="rtl"] .card__link { padding: var(--sp-4) 20px var(--sp-4) var(--sp-4); }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.card__top h2 { font-size: 1.2rem; color: var(--t-ink); }
.card__sub { margin-top: -6px; color: var(--muted); font-size: .9rem; }
.pill { flex: none; padding: 4px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / .75); color: var(--muted); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.pill--on { color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--t-ac); }
.card .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
.card--closed .card__top h2, .card--closed .stats dd { color: var(--muted); }
.card .alerts { padding: 0 var(--sp-3) var(--sp-3) 20px; }
[dir="rtl"] .card .alerts { padding: 0 20px var(--sp-3) var(--sp-3); }

.hero { position: relative; display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--t-bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--t-ac); }
.hero__sub { font-weight: 600; color: var(--t-ink); }
.alertbox { background: rgb(255 255 255 / .7); border-radius: var(--r-md); }
.alertbox summary { display: flex; justify-content: space-between; align-items: center; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); font-weight: 700; list-style: none; cursor: pointer; }
.alertbox summary::-webkit-details-marker { display: none; }
.alertbox summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline-end: 4px; margin-top: -4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.alertbox[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.alertbox .alerts { padding: 0 var(--sp-2) var(--sp-2); }

.subtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.subtabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: var(--sp-2) var(--sp-1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); text-align: center; text-decoration: none; font-size: .82rem; font-weight: 700; line-height: 1.2; color: var(--leaf-deep); }
.subtabs a .i { width: 1.25rem; height: 1.25rem; }
.subtabs a:hover { background: var(--mint); }
.subtabs a[aria-current="page"] { background: var(--leaf); border-color: var(--leaf); color: #fff; }

/* ------------------------------------------------------------------ 7. Alertes */
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--r-md); font-size: .9rem; font-weight: 600; }
.alert a { flex: 1 1 200px; text-decoration: none; }
.alert .i { width: 1.2rem; height: 1.2rem; }
.alert--info { background: var(--info-bg); color: var(--ink); }
.alert--info .i { color: var(--leaf); }
.alert--warn, .alert--order { background: var(--warn-bg); color: var(--warn-ink); }
.alert--warn .i, .alert--order .i { color: var(--gold); }
.alert--bad { background: var(--bad-bg); color: var(--bad-ink); }
.alert--bad .i { color: var(--red); }
.prev { display: grid; gap: 6px; padding: var(--sp-3) 14px; border-radius: var(--r-md); background: var(--warn-bg); }
.prev .kpi__label { color: var(--warn-ink); }
.prev .kpi__label .i { color: var(--gold); }

/* ------------------------------------------------------------------ 8. Listes */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-3) 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.rows li > span:not(.rows__date) { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.rows__date { flex: 0 0 100%; font-size: .78rem; font-weight: 700; color: var(--muted); }
.rows li.is-done { opacity: .6; }
.rows li.is-late { border-color: #f0b4b1; background: #fffafa; }
.rows li.is-late .check span { color: var(--red); }
.rows .iconbtn + .iconbtn { margin-inline-start: -6px; }
.rows .check { flex: 0 0 auto; }
.due { color: var(--red); font-weight: 700; }
.rows.rows--plain li { flex-wrap: nowrap; gap: var(--sp-3); padding-block: var(--sp-3); }
.rows--plain li span { flex: 1; min-width: 0; }
.rows--plain li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel .rows li { box-shadow: none; background: var(--mint); border-color: transparent; }

/* ------------------------------------------------------------------ 9. Tableaux */
.tablewrap { overflow-x: auto; margin-inline: calc(-1 * var(--sp-1)); padding-inline: var(--sp-1); scrollbar-width: thin; }
.plan, .cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.plan th, .plan td, .cmp th, .cmp td { padding: 10px 6px; text-align: start; vertical-align: middle; }
.plan thead th, .cmp thead th { font-size: .78rem; font-weight: 700; color: var(--muted); }
.plan tbody th, .cmp tbody th { font-weight: 700; }
.plan tbody th small, .cmp tbody th small { display: block; font-weight: 500; }
.plan th, .plan td { border-bottom: 1px solid var(--line); }
.plan tbody tr:last-child > * { border-bottom: 0; }
.plan tr.is-cur > * { background: var(--mint); }
.plan tr.is-cur > :first-child { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.plan tr.is-cur > :last-child { border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); }
.plan tr.is-past { opacity: .55; }
.plan .ok { color: var(--leaf-deep); font-weight: 700; font-size: .85rem; }
.plan .chipbtn { min-height: 36px; padding-inline: var(--sp-3); }
/* Comparaison : une ligne arrondie par bande, à sa teinte */
.cmp { border-collapse: separate; border-spacing: 0 var(--sp-2); font-size: .88rem; }
.cmp th, .cmp td { padding-inline: 5px; }
.cmp thead th { padding-block: 0 2px; }
.cmp tbody tr > * { background: var(--t-bg); border-block: 1px solid var(--line); }
.cmp tbody tr > :first-child { border-inline-start: 5px solid var(--t-ac); border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); padding-inline-start: 10px; }
.cmp tbody tr > :last-child { border-inline-end: 1px solid var(--line); border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.cmp tbody th a { color: var(--t-ink); text-decoration: none; }
.cmp td.pos { color: var(--leaf-deep); font-weight: 700; }
.cmp td.neg { color: var(--red); font-weight: 700; }

/* ------------------------------------------------------------------ 10. Graphiques */
.chart { width: 100%; height: auto; }
.chart text { font: 600 9px var(--f-body); fill: var(--muted); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ref { fill: none; stroke: #9fb3a6; stroke-width: 2; stroke-dasharray: 5 4; }
.chart .mine { fill: none; stroke: var(--leaf); stroke-width: 2.5; stroke-linejoin: round; }
.chart .proj { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .8; }
.chart .dot { fill: var(--leaf); stroke: var(--paper); stroke-width: 2; }
.legend { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.lg { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--leaf); }
.lg--ref { border-top: 2px dashed #9fb3a6; margin-inline-start: var(--sp-2); }
.lg--proj { border-top: 3px dotted var(--leaf); margin-inline-start: var(--sp-2); }
.spark { width: 100%; height: 70px; }
.spark rect { fill: var(--leaf); }

/* ------------------------------------------------------------------ 11. Accueil vide, boîte de dialogue */
.empty { display: grid; justify-items: center; gap: 14px; padding: 32px 12px; text-align: center; }
.empty img { border-radius: 50%; background: var(--paper); box-shadow: var(--sh-2); }
.empty h2 { font-size: 1.5rem; }
.empty p { max-width: 30em; color: var(--muted); }

.dialog { max-width: min(92vw, 420px); padding: 20px; border: 0; border-radius: var(--r-lg); color: var(--ink); background: var(--paper); box-shadow: var(--sh-3); overscroll-behavior: contain; }
.dialog::backdrop { background: rgb(21 36 27 / .45); }
.dialog p { margin-bottom: var(--sp-4); font-weight: 600; }
.dialog input { margin-bottom: var(--sp-4); }
.dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

/* ------------------------------------------------------------------ 12. Responsive */
@media (max-width: 400px) {
  .card .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper { grid-template-columns: 56px 1fr 56px; }
  .unitrow { grid-template-columns: 1fr 104px; }
  .kpi__big { font-size: 2.1rem; }
}
@media (max-width: 480px) { .cmp th:nth-child(5), .cmp td:nth-child(5) { display: none; } }
@media (min-width: 560px) { .subtabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
}

/* marque UAB : sous-titre de la barre, sélecteur de langue en toutes lettres, encadré sous la liste */
.bar__head { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.bar__head .bar__title { flex: none; }
.bar__sub { font-size: .78rem; font-weight: 600; color: var(--leaf-deep); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__sub:hover { text-decoration: underline; }
.bar__lang { font-weight: 700; font-size: .9rem; }
.uab { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; padding: 16px; background: var(--paper); border: 1px solid var(--mint-3); border-radius: 20px; }
.uab img { flex: none; border-radius: 50%; }
.uab h2 { font-size: 1.05rem; color: var(--leaf-deep); }
.uab p { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.uab__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.uab__cta .btn { min-height: 44px; padding-inline: 16px; font-size: .9rem; }