/* ═══════════════════════════════════════════════════════════════════════════
   EvSh Comptes — Material You (M3)
   Palettes tonales générées depuis les seeds : primary #4f46e5, tertiary
   #10b981 (positif/épargne), warning #f59e0b, error #b3261e.
   Tone = L* (CIE Lab), chroma clampée au gamut sRGB — approximation fidèle
   du système HCT de Material 3.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Palette primaire (indigo de marque) ───────────────────────────────── */
  --p0:#010003;  --p4:#000144;  --p6:#02074a;  --p10:#101054; --p12:#171459;
  --p17:#261f65; --p20:#2e256c; --p22:#332972; --p24:#392e77; --p30:#483b86;
  --p40:#6252a1; --p50:#7d6bbc; --p60:#9884d8; --p70:#b49ef5; --p80:#cfbdff;
  --p87:#e0d4ff; --p90:#e8ddff; --p92:#ece4ff; --p94:#f1ebff; --p95:#f4eeff;
  --p96:#f6f1ff; --p98:#fbf8ff; --p99:#fdfcff; --p100:#ffffff;

  /* ── Palette secondaire ────────────────────────────────────────────────── */
  --s10:#1d1830; --s20:#332c46; --s30:#4a435e; --s40:#625a77; --s60:#958cab;
  --s70:#b0a6c7; --s80:#cbc2e3; --s90:#e8ddff; --s95:#f4eeff; --s100:#ffffff;

  /* ── Palette tertiaire (vert : positif, épargne) ───────────────────────── */
  --t10:#002113; --t20:#003824; --t30:#005236; --t40:#006c49; --t50:#18875f;
  --t60:#3ca278; --t70:#59bd91; --t80:#75daac; --t90:#92f6c7; --t95:#bbffdd;
  --t100:#fefffe;

  /* ── Palette warning (ambre : rattrapage partiel, alertes douces) ──────── */
  --w10:#281900; --w20:#462a00; --w30:#653e00; --w40:#855300; --w50:#a76a00;
  --w60:#c58324; --w70:#e39d3f; --w80:#ffb860; --w90:#ffddb9; --w95:#ffeedd;
  --w100:#fffffe;

  /* ── Palette erreur ────────────────────────────────────────────────────── */
  --e10:#390c00; --e20:#690000; --e30:#8f0f0f; --e40:#ae3025; --e50:#cd4c3b;
  --e60:#ec6753; --e70:#ff8a75; --e80:#ffb4a5; --e90:#ffdad2; --e95:#ffede9;
  --e100:#ffffff;

  /* ── Palette neutre ────────────────────────────────────────────────────── */
  --n0:#010003;  --n4:#100d15;  --n6:#151219;  --n10:#1c1b21; --n12:#211f25;
  --n17:#2b2930; --n20:#312f36; --n22:#36343b; --n24:#3a383f; --n30:#48464d;
  --n40:#605d65; --n50:#78767e; --n60:#928f98; --n70:#adaab3; --n80:#c8c5ce;
  --n87:#dbd9e2; --n90:#e4e1ea; --n92:#eae7f0; --n94:#efecf6; --n95:#f2eff9;
  --n96:#f5f2fc; --n98:#fbf8ff; --n99:#fdfcff; --n100:#ffffff;

  /* ── Palette neutre variante ───────────────────────────────────────────── */
  --nv30:#494454; --nv50:#7a7585; --nv60:#938e9f; --nv80:#c9c4d6; --nv90:#e5e0f2;
}

/* ═══ Rôles — thème clair ══════════════════════════════════════════════════ */
:root{
  --m-primary:var(--p40);            --m-on-primary:var(--p100);
  --m-primary-container:var(--p90);  --m-on-primary-container:var(--p10);
  --m-secondary:var(--s40);          --m-on-secondary:var(--s100);
  --m-secondary-container:var(--s90);--m-on-secondary-container:var(--s10);
  --m-tertiary:var(--t40);           --m-on-tertiary:var(--t100);
  --m-tertiary-container:var(--t90); --m-on-tertiary-container:var(--t10);
  --m-warning:var(--w40);            --m-on-warning:var(--w100);
  --m-warning-container:var(--w90);  --m-on-warning-container:var(--w10);
  --m-error:var(--e40);              --m-on-error:var(--e100);
  --m-error-container:var(--e90);    --m-on-error-container:var(--e10);

  --m-surface:var(--n98);            --m-on-surface:var(--n10);
  --m-surface-dim:var(--n87);        --m-surface-bright:var(--n98);
  --m-surface-c-lowest:var(--n100);  --m-surface-c-low:var(--n96);
  --m-surface-c:var(--n94);          --m-surface-c-high:var(--n92);
  --m-surface-c-highest:var(--n90);
  --m-on-surface-variant:var(--nv30);
  --m-outline:var(--nv50);           --m-outline-variant:var(--nv80);
  --m-inverse-surface:var(--n20);    --m-inverse-on-surface:var(--n95);
  --m-inverse-primary:var(--p80);
  --m-scrim:0,0,0;

  --el1:0 1px 2px rgba(0,0,0,.09), 0 1px 3px 1px rgba(0,0,0,.05);
  --el2:0 1px 2px rgba(0,0,0,.09), 0 2px 6px 2px rgba(0,0,0,.06);
  --el3:0 4px 8px 3px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.10);
  --el4:0 6px 10px 4px rgba(0,0,0,.08), 0 2px 3px rgba(0,0,0,.10);
  color-scheme:light;
}

/* ═══ Rôles — thème sombre ════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --m-primary:var(--p80);            --m-on-primary:var(--p20);
    --m-primary-container:var(--p30);  --m-on-primary-container:var(--p90);
    --m-secondary:var(--s80);          --m-on-secondary:var(--s20);
    --m-secondary-container:var(--s30);--m-on-secondary-container:var(--s90);
    --m-tertiary:var(--t80);           --m-on-tertiary:var(--t20);
    --m-tertiary-container:var(--t30); --m-on-tertiary-container:var(--t90);
    --m-warning:var(--w80);            --m-on-warning:var(--w20);
    --m-warning-container:var(--w30);  --m-on-warning-container:var(--w90);
    --m-error:var(--e80);              --m-on-error:var(--e20);
    --m-error-container:var(--e30);    --m-on-error-container:var(--e90);

    --m-surface:var(--n6);             --m-on-surface:var(--n90);
    --m-surface-dim:var(--n6);         --m-surface-bright:var(--n24);
    --m-surface-c-lowest:var(--n4);    --m-surface-c-low:var(--n10);
    --m-surface-c:var(--n12);          --m-surface-c-high:var(--n17);
    --m-surface-c-highest:var(--n22);
    --m-on-surface-variant:var(--nv80);
    --m-outline:var(--nv60);           --m-outline-variant:var(--nv30);
    --m-inverse-surface:var(--n90);    --m-inverse-on-surface:var(--n20);
    --m-inverse-primary:var(--p40);

    --el1:0 1px 3px rgba(0,0,0,.45);
    --el2:0 2px 6px rgba(0,0,0,.50);
    --el3:0 4px 12px rgba(0,0,0,.55);
    --el4:0 8px 20px rgba(0,0,0,.60);
    color-scheme:dark;
  }
}

/* ═══ Alias hérités — les pages existantes continuent de fonctionner ═══════ */
:root{
  --pr:var(--m-primary);      --prl:var(--m-primary-container);
  --prd:var(--m-primary);     --on-pr:var(--m-on-primary);
  --gn:var(--m-tertiary);     --gnl:var(--m-tertiary-container);
  --rd:var(--m-error);        --rdl:var(--m-error-container);
  --am:var(--m-warning);      --aml:var(--m-warning-container);
  --bg:var(--m-surface);      --card:var(--m-surface-c-low);
  --tx:var(--m-on-surface);   --mu:var(--m-on-surface-variant);
  --br:var(--m-outline-variant);

  /* Formes M3 */
  --sh-xs:4px; --sh-s:8px; --sh-m:12px; --sh-l:16px; --sh-xl:28px; --sh-full:999px;
  --rad:var(--sh-l);
  --sb:240px;
  --ease:cubic-bezier(.2,0,0,1);
}

/* ═══ Échelle de formes — Material 3 Expressive ═══════════════════════════
   Des rayons nettement plus généreux qu'en M3 « classique » : c'est le
   marqueur visuel le plus immédiat de la génération 2025/2026.            */
:root{
  --sh-xs:8px; --sh-s:12px; --sh-m:16px; --sh-l:20px;
  --sh-xl:28px; --sh-2xl:36px; --sh-full:999px;
  --rad:var(--sh-xl);
  --sb:264px;

  /* Mouvement : ressort plutôt que courbe plate */
  --ease:cubic-bezier(.2,0,0,1);
  --spring:cubic-bezier(.34,1.42,.64,1);
  --spring-fort:cubic-bezier(.34,1.7,.64,1);
}

/* ═══ Reset & typographie ═════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Roboto Flex','Roboto','Inter',system-ui,-apple-system,sans-serif;
  background:var(--m-surface);color:var(--m-on-surface);
  font-size:.9375rem;line-height:1.5;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'opsz' 20;
}
a{text-decoration:none;color:inherit}
::selection{background:var(--m-primary-container);color:var(--m-on-primary-container)}
:focus-visible{outline:3px solid var(--m-primary);outline-offset:2px;border-radius:var(--sh-xs)}

/* ═══ Layout ══════════════════════════════════════════════════════════════ */
.layout{display:flex;min-height:100vh}
.main{margin-left:var(--sb);flex:1;padding:1.75rem;overflow-x:hidden;min-height:100vh}
/* Au-delà d'une certaine largeur, on cesse d'étirer : les cartes se centrent
   plutôt que de s'allonger, sinon les lignes deviennent illisibles et les
   valeurs de droite partent à l'autre bout de l'écran. */
.main > *{max-width:1140px;margin-left:auto;margin-right:auto}

/* ═══ Drawer de navigation (bureau) ═══════════════════════════════════════ */
.sidebar{
  width:var(--sb);background:var(--m-surface-c-low);
  position:fixed;top:0;left:0;height:100vh;
  display:flex;flex-direction:column;z-index:200;padding:.75rem;
}
.s-logo{padding:1.25rem 1rem 1.5rem}
.s-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}
.s-item{
  display:flex;align-items:center;gap:1rem;
  height:56px;padding:0 1.25rem;cursor:pointer;
  border-radius:var(--sh-full);font-weight:600;font-size:.9375rem;
  color:var(--m-on-surface-variant);
  transition:background .2s var(--ease),color .2s var(--ease),border-radius .3s var(--spring);
}
.s-item:hover{background:color-mix(in srgb,var(--m-on-surface) 8%,transparent)}
.s-item.active{
  background:var(--m-secondary-container);color:var(--m-on-secondary-container);font-weight:700;
}
.s-item .ico{display:flex;align-items:center;justify-content:center;width:24px;flex-shrink:0}
.s-item svg{width:24px;height:24px;fill:currentColor}

/* ═══ En-tête de page ═════════════════════════════════════════════════════ */
.ph{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;flex-wrap:wrap;gap:.6rem}
.pt{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-variation-settings:'opsz' 40}

/* ═══ Cartes ══════════════════════════════════════════════════════════════ */
.card{
  background:var(--m-surface-c-low);border-radius:var(--sh-xl);
  border:1px solid transparent;padding:1.35rem;margin-bottom:.85rem;
}
.card-title{
  font-weight:700;font-size:1rem;margin-bottom:1rem;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  color:var(--m-on-surface);
}
.card-outlined{border-color:var(--m-outline-variant);background:transparent}

/* ═══ Ligne unifiée ═══════════════════════════════════════════════════════
   Pas de filet entre les lignes : la séparation se fait par la respiration
   et par l'état survolé, comme dans les listes M3 Expressive.             */
.li-row{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;
  position:relative;transition:background .2s var(--ease)}
.li-row + .li-row::before{content:'';position:absolute;top:0;left:4.25rem;right:1rem;
  height:1px;background:var(--m-outline-variant);opacity:.5}
.li-clic{cursor:pointer;border-radius:var(--sh-m)}
.li-clic:hover{background:color-mix(in srgb,var(--m-primary) 9%,transparent)}
.li-clic:hover::before,.li-clic:hover + .li-row::before{opacity:0}
.li-clic:active{transform:scale(.985);transition:transform .1s var(--ease)}
.li-ico{display:flex;align-items:center;flex-shrink:0}
.li-main{flex:1;min-width:0}
.li-titre{font-weight:700;font-size:.9375rem;line-height:1.35;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-sous{font-size:.8125rem;color:var(--m-on-surface-variant);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-tags{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;flex-shrink:0;max-width:45%}
.li-val{flex-shrink:0;display:flex;align-items:center;gap:.5rem;
  font-variant-numeric:tabular-nums;text-align:right}

/* ═══ Montants ════════════════════════════════════════════════════════════ */
.amount{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap;letter-spacing:-.01em}
.pos{color:var(--m-tertiary)}
.neg{color:var(--m-error)}
.mu{color:var(--m-on-surface-variant);font-size:.8125rem}

/* ═══ Tables (statistiques uniquement) ════════════════════════════════════ */
table{width:100%;border-collapse:collapse}
th{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--m-on-surface-variant);padding:.6rem .75rem;white-space:nowrap;text-align:left}
td{padding:.75rem;vertical-align:middle}
tr + tr td{border-top:1px solid color-mix(in srgb,var(--m-outline-variant) 50%,transparent)}

/* ═══ Chips ═══════════════════════════════════════════════════════════════ */

/* ═══ Boutons ═════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:48px;padding:0 1.6rem;border-radius:var(--sh-full);
  font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  border:none;cursor:pointer;white-space:nowrap;font-family:inherit;
  text-decoration:none;position:relative;overflow:hidden;
  transition:border-radius .35s var(--spring),background .2s var(--ease),transform .1s var(--ease);
}
.btn::after{content:'';position:absolute;inset:0;background:currentColor;opacity:0;
  transition:opacity .2s var(--ease);pointer-events:none}
.btn:hover::after{opacity:.08}
.btn:active{transform:scale(.96);border-radius:var(--sh-m)}
.btn-pr{background:var(--m-primary);color:var(--m-on-primary)}
.btn-gh{background:transparent;color:var(--m-primary);
  box-shadow:inset 0 0 0 1px var(--m-outline)}
.btn-rd{background:var(--m-error-container);color:var(--m-on-error-container)}
.btn-gn{background:var(--m-tertiary-container);color:var(--m-on-tertiary-container)}
.btn-tonal{background:var(--m-secondary-container);color:var(--m-on-secondary-container)}
.btn-text{background:transparent;color:var(--m-primary);padding:0 1rem;height:44px}
.btn-sm{height:40px;padding:0 1.15rem;font-size:.875rem}
.btn-ico{
  background:none;border:none;cursor:pointer;font-size:1.1rem;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--sh-m);transition:background .2s var(--ease),border-radius .3s var(--spring);
  font-family:inherit;color:var(--m-on-surface-variant);flex-shrink:0;
}
.btn-ico:hover{background:color-mix(in srgb,var(--m-on-surface) 10%,transparent);
  border-radius:var(--sh-full)}
.btn-ico:active{transform:scale(.92)}

/* ═══ Champs ══════════════════════════════════════════════════════════════ */
.fg{display:flex;flex-direction:column;gap:.4rem;flex:1;min-width:0;margin-bottom:1rem}
label{font-size:.8125rem;font-weight:600;color:var(--m-on-surface-variant);letter-spacing:0}
input[type=text],input[type=number],input[type=date],input[type=color],input[type=password],
textarea,select{
  padding:.9rem 1.1rem;border:none;border-radius:var(--sh-m);
  font-size:1rem;background:var(--m-surface-c-highest);color:var(--m-on-surface);
  outline:none;transition:box-shadow .2s var(--ease),background .2s var(--ease);
  font-family:inherit;font-weight:500;width:100%;-webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--m-on-surface-variant);opacity:.65}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23938e9f' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:11px 8px;padding-right:36px
}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 0 0 2px var(--m-primary)}
input[type=color]{padding:.3rem;height:52px;cursor:pointer}
.form-err{
  color:var(--m-on-error-container);font-size:.875rem;min-height:1.2rem;margin-bottom:.6rem;
  background:var(--m-error-container);border-radius:var(--sh-m);padding:.65rem 1rem;display:none
}
.form-err:not(:empty){display:block}
.form-acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem}

/* ═══ Dialogue ════════════════════════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(var(--m-scrim),.45);
  z-index:500;align-items:center;justify-content:center;padding:2rem 1rem;overflow-y:auto;
  backdrop-filter:blur(2px);
}
.modal-overlay.open{display:flex;animation:fondu .2s var(--ease)}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.modal-card{
  background:var(--m-surface-c-high);border-radius:var(--sh-2xl);padding:1.75rem;
  width:100%;max-width:500px;margin:auto;color:var(--m-on-surface);
  animation:surgit .35s var(--spring);
}
@keyframes surgit{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.modal-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.modal-close{
  background:none;border:none;font-size:1.2rem;cursor:pointer;
  color:var(--m-on-surface-variant);width:44px;height:44px;border-radius:var(--sh-m);
  line-height:1;font-family:inherit;flex-shrink:0;
  transition:background .2s var(--ease),border-radius .3s var(--spring)
}
.modal-close:hover{background:color-mix(in srgb,var(--m-on-surface) 10%,transparent);
  border-radius:var(--sh-full)}

/* ═══ Onglets — groupe de boutons segmentés ═══════════════════════════════ */

/* ═══ Barres de progression ═══════════════════════════════════════════════ */
.m-bar{background:var(--m-surface-c-highest);border-radius:var(--sh-full);
  height:16px;overflow:hidden;padding:2px}
.m-bar>span{display:block;height:100%;border-radius:var(--sh-full);
  background:var(--m-primary);transition:width .6s var(--spring)}

/* ═══ Barre d'application (mobile) ════════════════════════════════════════ */
.mob-header{
  display:none;background:var(--m-surface);
  padding:.5rem .75rem;padding-top:calc(.5rem + env(safe-area-inset-top));
  position:sticky;top:0;z-index:150;
  align-items:center;justify-content:center;
  height:calc(64px + env(safe-area-inset-top));width:100%;
  transition:background .25s var(--ease);
}
.mob-header.scrolled{background:var(--m-surface-c)}
.mob-logo{display:flex;align-items:center}

/* ═══ Barre de navigation basse (mobile) ══════════════════════════════════ */
.navbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--m-surface-c);
  padding:.75rem .5rem calc(.75rem + env(safe-area-inset-bottom));
  justify-content:space-around;align-items:flex-start;
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  flex:1;min-width:0;text-decoration:none;padding:0 .25rem;
  color:var(--m-on-surface-variant);
}
.nav-pill{
  width:64px;height:32px;border-radius:var(--sh-full);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--spring);
}
.nav-item svg{width:24px;height:24px;fill:currentColor}
.nav-lbl{font-size:.6875rem;font-weight:600;letter-spacing:.01em}
.nav-item.on{color:var(--m-on-surface)}
.nav-item.on .nav-pill{background:var(--m-secondary-container);
  color:var(--m-on-secondary-container)}
.nav-item.on .nav-lbl{font-weight:700}

/* ═══ Responsive ══════════════════════════════════════════════════════════ */
@media(max-width:700px){
  body{overflow-x:hidden}
  .layout{display:block}
  .sidebar{display:none}
  .main{margin-left:0;width:100%;padding:.85rem;
    padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
  .mob-header{display:flex}
  .navbar{display:flex}
  .mob-hide{display:none !important}
  .duo{grid-template-columns:1fr !important}
  .pt{font-size:1.5rem}
  .card{padding:1.15rem;border-radius:var(--sh-l)}
  .modal-overlay{padding:0;align-items:flex-end}
  .modal-card{
    border-radius:var(--sh-2xl) var(--sh-2xl) 0 0;max-width:100%;margin:0;
    max-height:92dvh;overflow-y:auto;padding:1.5rem 1.15rem 2rem;
    background:var(--m-surface-c-low);animation:monte .35s var(--spring);
  }
  @keyframes monte{from{transform:translateY(100%)}to{transform:none}}
  .li-row{padding:.8rem .35rem}
  .li-row + .li-row::before{left:3.6rem;right:.35rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::after,*::before{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ═══ Titres de page — même grammaire que la navigation ═══════════════════ */
.pt-bloc{display:flex;align-items:center;gap:.85rem;min-width:0}
.pt-ico{
  width:44px;height:44px;border-radius:var(--sh-m);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--m-secondary-container);color:var(--m-on-secondary-container);
}
.pt-sous{font-size:.8125rem;color:var(--m-on-surface-variant);line-height:1.35}

/* ═══ En-têtes de carte ═══════════════════════════════════════════════════ */
.ct-lbl{display:inline-flex;align-items:center;gap:.55rem;min-width:0}
.ct-ico{display:inline-flex;align-items:center;color:var(--m-on-surface-variant);flex-shrink:0}

/* Icônes dans les onglets et les boutons */
.btn svg{flex-shrink:0}

/* Deux colonnes qui se replient sur mobile */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}

/* ═══ Pastilles neutres ═══════════════════════════════════════════════════ */
.cpt-ico{
  width:38px;height:38px;border-radius:var(--sh-s);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--m-surface-c-high);color:var(--m-on-surface-variant);
}
/* Jour d'échéance : calendrier monochrome, même emprise que .cpt-ico pour
   que les lignes s'alignent, mais sans fond — le dessin porte le sens. */
.jour-cal{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;color:var(--m-on-surface-variant)}
.cal text{letter-spacing:-.02em;font-style:normal}
.jour-vide{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;color:var(--m-on-surface-variant);opacity:.5}

/* Étiquette compacte (compte, catégorie, personne sur une ligne) */
.tag{font-size:.75rem;font-weight:600;color:var(--m-on-surface-variant);
  background:var(--m-surface-c-high);border-radius:var(--sh-xs);
  padding:.15rem .5rem;white-space:nowrap}

/* ═══ Formulaires : sections et lignes ═══════════════════════════════════ */
.fs{
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--m-on-surface-variant);
  margin:1.5rem 0 .9rem;padding-top:1.25rem;
  border-top:1px solid var(--m-outline-variant);
}
.fs:first-child{margin-top:.25rem;padding-top:0;border-top:none}
.form-row{display:flex;gap:.7rem;align-items:flex-end}
.form-row > .fg{margin-bottom:1rem}
.form-acts{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  margin-top:1.75rem;padding-top:1.25rem;
  border-top:1px solid var(--m-outline-variant);
}
.form-acts .btn-suppr{
  margin-left:auto;background:transparent;color:var(--m-error);
  width:48px;height:48px;padding:0;border-radius:var(--sh-m);
  display:inline-flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-family:inherit;
  transition:background .2s var(--ease),border-radius .3s var(--spring);
}
.form-acts .btn-suppr:hover{background:var(--m-error-container);
  color:var(--m-on-error-container);border-radius:var(--sh-full)}
.fs-aide{font-size:.8125rem;color:var(--m-on-surface-variant);
  margin:-.35rem 0 .9rem;line-height:1.45}

/* ═══ Sélecteur d'icône ═══════════════════════════════════════════════════ */
.ico-grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:.4rem;
  max-height:184px;overflow-y:auto;padding:.5rem;
  background:var(--m-surface-c-high);border-radius:var(--sh-m);
}
.ico-choix{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;background:transparent;color:var(--m-on-surface-variant);
  border-radius:var(--sh-s);font-family:inherit;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-radius .3s var(--spring),transform .1s var(--ease);
}
.ico-choix:hover{background:color-mix(in srgb,var(--m-on-surface) 10%,transparent)}
.ico-choix:active{transform:scale(.9)}
.ico-choix.ico-on{background:var(--m-primary);color:var(--m-on-primary);
  border-radius:var(--sh-full)}

/* ═══ Titre de section dans une page longue ═══════════════════════════════ */
.sec-titre{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  margin:2rem 0 .85rem;padding-top:1.5rem;
  border-top:1px solid var(--m-outline-variant);
  scroll-margin-top:5rem;
}
.sec-titre:first-of-type{margin-top:1rem;padding-top:0;border-top:none}
.sec-titre svg{color:var(--m-on-surface-variant);flex-shrink:0}

/* ═══ Sous-menu vertical (onglet Période) ════════════════════════════════
   Colonne de navigation à gauche sur grand écran. Sur mobile elle occupe
   toute la largeur, et s'efface dès qu'une section est ouverte : on ne
   veut pas faire défiler cinq entrées avant d'atteindre le contenu.      */
.sous-layout{display:grid;grid-template-columns:288px 1fr;gap:1.25rem;align-items:start}
.sous-nav{display:flex;flex-direction:column;gap:.25rem;
  background:var(--m-surface-c-low);border-radius:var(--sh-xl);padding:.6rem}
.sous-item{
  display:flex;align-items:center;gap:.9rem;padding:.7rem 1rem;
  border-radius:var(--sh-l);color:var(--m-on-surface-variant);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.sous-item:hover{background:color-mix(in srgb,var(--m-on-surface) 8%,transparent)}
.sous-item.on{background:var(--m-secondary-container);color:var(--m-on-secondary-container)}
.sous-ico{display:flex;align-items:center;flex-shrink:0}
.sous-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.sous-lbl{font-weight:700;font-size:.9375rem;letter-spacing:-.01em}
.sous-desc{font-size:.78rem;opacity:.75;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sous-chev{font-size:1.15rem;opacity:.45;flex-shrink:0}
.sous-item.on .sous-chev{opacity:.8}
.sous-contenu{min-width:0}
.retour{display:none;align-items:center;gap:.35rem;height:40px;padding:0 1rem;
  border-radius:var(--sh-full);background:var(--m-surface-c);
  color:var(--m-on-surface-variant);font-weight:600;font-size:.875rem;
  margin-bottom:.85rem}

@media(max-width:900px){
  /* Maître-détail : le menu seul, ou la section seule avec un retour. */
  .sous-layout{grid-template-columns:1fr;gap:.85rem}
  .sous-layout.defaut  .sous-contenu{display:none}
  .sous-layout.ouverte .sous-nav{display:none}
  .sous-layout.ouverte .retour{display:inline-flex}
  .sous-item .sous-chev{margin-left:auto}
}