/* ============================================================================
   PRISME · la direction artistique
   Fond sauge, cartes claires aux grands arrondis, le noir pour ce qui est
   choisi, le citron pour montrer « ici », la lavande pour comparer.
   Une seule famille : Urbanist. Le grand chiffre fin, les décimales en gris.
   ========================================================================== */
:root {
  --fond: #E3E9E4;
  --carte: #EEF2EE;
  --blanc: #FAFBF9;
  --encre: #121512;
  --texte-2: #535D55;
  --texte-3: #7E8880;
  --filet: #D4DBD5;
  --filet-2: #C3CBC4;
  --marque: #C7CFC8;
  --marque-2: #A9B3AA;
  --accent: #2962FF;
  --accent-fonce: #1F4FD1;
  --accent-pale: #DCE5FF;
  --accent-texte: #FFFFFF;
  --lavande: #D6DCE9;
  --bon: #2457E6;
  --attention: #A86E09;
  --alerte: #C2373E;
  --rouge-badge: #E5484D;
  --r-carte: 26px;
  --ombre-carte: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 22px 44px -32px rgba(24, 34, 26, .42), 0 2px 6px -3px rgba(24, 34, 26, .08);
  --ombre-pop: 0 28px 70px -24px rgba(18, 26, 20, .42), 0 6px 18px rgba(18, 26, 20, .08);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --police: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --haut: 74px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 500 14px/1.4 var(--police); -webkit-font-smoothing: antialiased; overflow: hidden;
  background-image: radial-gradient(1200px 600px at 78% -10%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(214, 223, 233, .55), transparent 60%);
}
button { font: inherit; color: inherit; }
svg { flex: none; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.motifs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vide { flex: 1; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* ---- la charpente : bandeau, rail, têtière, grille -------------------------- */
#app {
  height: 100vh; display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: var(--haut) auto minmax(0, 1fr);
}
#haut { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 26px 0 22px; min-width: 0; }
#rail { grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 24px; }
#tetiere { grid-column: 2; grid-row: 2; display: flex; align-items: flex-end; gap: 16px; padding: 10px 28px 18px 6px; min-width: 0; }
#grille {
  grid-column: 2; grid-row: 3; min-height: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px; padding: 0 28px 24px 6px;
}

/* le logo */
.logo { display: flex; align-items: center; gap: 11px; color: var(--encre); text-decoration: none; font: 700 21px/1 var(--police); letter-spacing: -.02em; width: 156px; flex: none; }
.logo svg { width: 40px; height: 40px; }

/* les thèmes : des pastilles, la noire glisse vers celle qu'on choisit */
#themes { position: relative; display: flex; gap: 6px; isolation: isolate; min-width: 0; }
#themes .indic { position: absolute; top: 0; left: 0; height: 42px; width: 0; border-radius: 999px; background: var(--encre); z-index: 0;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); transition: transform .55s var(--ease), width .55s var(--ease); }
.th { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px 0 14px; border: 0; border-radius: 999px; background: transparent;
  font: 600 13.5px/1 var(--police); color: var(--encre); cursor: pointer; white-space: nowrap; transition: color .35s var(--ease); }
.th::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95); transition: background .2s; }
.th:hover::before { background: rgba(255, 255, 255, .92); }
.th.on { color: #fff; }
.th .ic { width: 17px; height: 17px; }
.pt-th { width: 7px; height: 7px; border-radius: 50%; margin-left: -2px; display: none; }
.pt-th.alerte { display: block; background: var(--rouge-badge); box-shadow: 0 0 0 2px rgba(229, 72, 77, .18); }
.pt-th.attention { display: block; background: #E3A43A; }
.th.on .pt-th { box-shadow: 0 0 0 2px var(--encre); }

.puce-info { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px #fff; font: 600 12.5px var(--police); color: var(--texte-2); white-space: nowrap; }
.puce-info .ic { width: 15px; height: 15px; }
.puce-info.demo { background: var(--accent); box-shadow: none; color: var(--accent-texte); }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #2B312C, #121512); color: #fff; font: 700 13px var(--police); letter-spacing: .04em; flex: none; }

/* les boutons ronds (réf. : filtre, commentaire, agrandir) */
.rond { position: relative; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.rond:hover { background: #fff; }
.rond:active { transform: scale(.94); }
.rond.petit { width: 32px; height: 32px; }
.rond.petit .ic { width: 15px; height: 15px; }
.rond.grand { width: 48px; height: 48px; }
.rond.noir { background: var(--encre); color: #fff; box-shadow: none; }
.badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rouge-badge); color: #fff;
  font: 700 10px/17px var(--police); text-align: center; box-shadow: 0 0 0 2px var(--fond); }
.rond.petit .badge { top: -4px; right: -4px; min-width: 15px; height: 15px; font-size: 9px; line-height: 15px; }

/* les bulles d'aide au survol, faites en CSS */
#bulle { position: fixed; left: 0; top: 0; z-index: 260; max-width: 280px; padding: 8px 11px; border-radius: 9px; background: var(--encre); color: #fff;
  font: 600 11.5px/1.4 var(--police); pointer-events: none; opacity: 0; transition: opacity .14s; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
#bulle.on { opacity: 1; }

/* le rail */
.rail-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease); }
.rail-btn:hover { background: #fff; }
.rail-btn:active { transform: scale(.94); }
.rail-btn.on { background: var(--encre); color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); }
.rail-btn .ic { width: 19px; height: 19px; }

/* la têtière : fil d'Ariane, titre, lecture, commandes */
.titres { min-width: 0; }
.fil { display: flex; align-items: center; gap: 6px; font: 600 12.5px var(--police); color: var(--texte-2); margin-bottom: 8px; }
.fil .ic { width: 15px; height: 15px; }
.fil .fl { width: 13px; height: 13px; color: var(--texte-3); margin: 0 2px; }
/* la place des jambages (g, p, j) sous la ligne, sans bouger la mise en page */
#titre { margin: 0 0 -.16em; padding-bottom: .16em; font: 400 42px/1.02 var(--police); letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-st { font-weight: 700; }
.nb-st b { font-weight: 800; font-variant-numeric: tabular-nums; }
.nb-st.alerte { color: #B02F36; } .nb-st.attention { color: #8F5D05; } .nb-st.bon { color: var(--bon); }
/* deux lignes, coupées là où le sens tourne (le 
 des phrases) */
#lecturePage { margin: 9px 0 0; font: 500 14px/1.38 var(--police); color: var(--texte-2); max-width: 860px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#titre.change, #lecturePage.change { animation: monte .65s var(--ease) both; }
#lecturePage.change { animation-delay: .06s; }
@keyframes monte { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
#retour { align-self: center; margin-top: 18px; }
.puce-scope { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-left: 8px; padding: 0 4px 0 9px; border-radius: 999px; background: #fff; color: var(--encre); font: 700 11.5px var(--police); }
.puce-scope i { width: 8px; height: 8px; border-radius: 50%; }
.puce-scope button { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--fond); display: grid; place-items: center; cursor: pointer; padding: 0; }
.puce-scope .ic { width: 11px; height: 11px; }
/* les commandes sur deux rangs : le mois, la plage, présenter, le rapport ; puis la frise */
.commandes { flex: none; width: clamp(520px, 45vw, 720px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mois plage pres rap" "frise frise frise frise"; gap: 8px; align-items: center; }
#btnMois { grid-area: mois; }
#btnPresenter { grid-area: pres; }
#btnRapport { grid-area: rap; }
.groupe-mois { display: flex; align-items: center; gap: 6px; }
#btnMois .ic { width: 16px; height: 16px; }
/* une largeur fixe : la frise ne bouge pas quand le nom du mois change */
#btnMois { width: 154px; padding: 0 12px; justify-content: center; }
/* la frise des mois : deux points qu'on glisse, les mois écrits */
.frise { grid-area: frise; height: 56px; padding: 4px 4px 0; border-radius: 20px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px #fff; }
.fr-svg { display: block; touch-action: none; cursor: pointer; }
/* glisser ne sélectionne pas le texte des mois */
.frise, .frise * { -webkit-user-select: none; user-select: none; }
.fr-an { font: 800 9px var(--police); fill: var(--texte-3); letter-spacing: .05em; }
.fr-sep { stroke: var(--filet-2); stroke-dasharray: 2 3; }
.fr-piste { stroke: var(--filet-2); stroke-width: 2; stroke-linecap: round; }
.fr-pt { fill: var(--marque-2); }
.fr-pt.a26 { fill: var(--texte-3); }
.fr-m { font: 600 10px var(--police); fill: var(--texte-3); pointer-events: none; transition: fill .2s; }
.fr-m.dans { fill: var(--texte-2); }
.fr-m.m { font-weight: 800; fill: var(--encre); }
.fr-m.r { font-weight: 800; fill: var(--accent-fonce); }
.fr-bande { fill: var(--accent-pale); cursor: grab; }
.fr-svg.tire .fr-bande, .fr-svg.tire { cursor: grabbing; }
.fr-h { cursor: grab; outline: none; }
.fr-h-m circle { fill: var(--encre); }
.fr-h-m .fr-coeur { fill: #fff; pointer-events: none; }
.fr-h-ref circle { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.fr-h circle { transition: r .2s var(--ease); }
.fr-h:hover circle:first-child, .fr-h:focus-visible circle:first-child { r: 11; }
.fr-h:focus-visible circle:first-child { stroke: var(--accent); stroke-width: 3; }
.frise.signale { animation: signale 1.4s var(--ease); }
@keyframes signale { 0%, 100% { box-shadow: inset 0 0 0 1px #fff; } 25%, 60% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px rgba(41, 98, 255, .16); } }
/* la plage, écrite : le mois comparé en bleu, le mois affiché en noir */
.plage { grid-area: plage; display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 600 13px var(--police); color: var(--texte-2); cursor: pointer; white-space: nowrap; }
.plage:hover { background: rgba(255, 255, 255, .62); }
.plage .pl-t { overflow: hidden; text-overflow: ellipsis; }
.plage b { font-weight: 800; }
.plage b.r { color: var(--accent-fonce); }
.plage b.m { color: var(--encre); }
.plage .ic { flex: none; width: 15px; height: 15px; color: var(--texte-3); }
.pas { width: 26px; height: 42px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte-2); border-radius: 10px; }
.pas:hover:not(:disabled) { color: var(--encre); background: rgba(255, 255, 255, .5); }
.pas:disabled { opacity: .25; cursor: default; }
.pas .ic { width: 16px; height: 16px; }
.pilule { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 0 0 1px #fff; font: 600 13px var(--police); cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s var(--ease); }
.pilule:hover { background: #fff; }
.pilule:active { transform: scale(.97); }
.pilule .ic { width: 16px; height: 16px; }
.pilule.noire { background: var(--encre); color: #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); }
.pilule.noire:hover { background: #000; }
.pilule.large { width: 100%; justify-content: center; height: 48px; margin-top: 14px; }
.pilule.large.second { margin-top: 8px; background: #fff; }
#impression.capture { left: 0; top: 0; z-index: -1; }
#attente { position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; background: rgba(32, 40, 34, .3); backdrop-filter: blur(4px); }
.att-boite { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 34px; border-radius: 24px; background: #fff; box-shadow: var(--ombre-pop); font: 600 13px var(--police); color: var(--texte-2); }
.att-boite b { font: 400 22px var(--police); letter-spacing: -.02em; color: var(--encre); }
.att-rond { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--accent-pale); border-top-color: var(--accent); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
#btnMois { min-width: 136px; justify-content: center; }

/* =============================================================================
   LES CARTES
   ========================================================================== */
.carte { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px 18px 14px;
  background: var(--carte); border-radius: var(--r-carte); border: 1px solid rgba(255, 255, 255, .96); box-shadow: var(--ombre-carte); overflow: hidden; }
.carte.lavande { background: linear-gradient(180deg, #DCE2EE 0%, #D2D9E7 100%); }
.carte.sauge { background: linear-gradient(168deg, #D4DFF6 0%, #E1E8F6 48%, #EAEFF6 100%); }
.carte.nu { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.c-tete { display: flex; align-items: center; gap: 11px; min-height: 36px; }
.c-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .78); display: grid; place-items: center; }
.c-ic .ic { width: 17px; height: 17px; }
.c-txt { flex: 1; min-width: 0; }
.c-txt h3 { margin: 0; font: 650 16.5px/1.15 var(--police); font-weight: 650; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-sous { margin: 3px 0 0; font: 500 12.5px/1.3 var(--police); color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-act { display: flex; gap: 6px; flex: none; }
.c-chiffre { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.c-chiffre .petit { display: block; font: 600 11px var(--police); color: var(--texte-3); margin-bottom: 3px; }
.c-chiffre .val { font: 500 36px/1 var(--police); letter-spacing: -.035em; white-space: nowrap; }
.c-chiffre .val .d { color: var(--texte-3); }
.c-chiffre .val .u { font-size: 15px; letter-spacing: 0; margin-left: 4px; color: var(--texte-2); }
.puce-c { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .78); font: 700 11.5px var(--police); color: var(--texte-2); white-space: nowrap; }
.puce-c.bon { color: var(--bon); } .puce-c.alerte { color: var(--alerte); } .puce-c.attention { color: var(--attention); }
.carte.lavande .puce-c { background: rgba(255, 255, 255, .7); }
.c-corps { position: relative; flex: 1; min-height: 0; margin-top: 10px; }

/* l'entrée des cartes, et leur sortie quand on change de thème */
.carte.entre { animation: entree .78s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.dir-g .carte.entre { animation-name: entreeG; }
.carte .tuile.entre { animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes entree { from { opacity: 0; transform: translate(26px, 10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes entreeG { from { opacity: 0; transform: translate(-26px, 10px) scale(.985); } to { opacity: 1; transform: none; } }
.carte.sort { animation: sortie .22s ease-in both; animation-delay: calc(var(--i, 0) * 18ms); }
.carte.sort.vers-d { animation-name: sortieD; }
@keyframes sortie { to { opacity: 0; transform: translateX(-18px) scale(.99); } }
@keyframes sortieD { to { opacity: 0; transform: translateX(18px) scale(.99); } }
.carte.repere { animation: repere 2s var(--ease); }
@keyframes repere { 0% { box-shadow: 0 0 0 0 rgba(41, 98, 255, .9), var(--ombre-carte); } 35% { box-shadow: 0 0 0 7px rgba(41, 98, 255, .45), var(--ombre-carte); } 100% { box-shadow: 0 0 0 0 rgba(41, 98, 255, 0), var(--ombre-carte); } }
body.annoter #grille .carte:not(.nu), body.annoter .tuile { outline: 2px dashed var(--accent); outline-offset: -7px; cursor: copy; }

/* =============================================================================
   LES GRAPHIQUES
   ========================================================================== */
.g { display: block; overflow: visible; }
.hit { fill: transparent; }
.axe-x text { font: 600 11px var(--police); fill: var(--texte-3); }
.axe-x text.choisi { fill: var(--encre); font-weight: 800; }
.axe-x text.futur { opacity: .45; }
.tag rect { fill: var(--accent); filter: drop-shadow(0 6px 12px rgba(41, 98, 255, .32)); }
.tag text { font: 800 12px var(--police); fill: var(--accent-texte); }
.tag .d { fill: #C9D7FF; font-weight: 600; }
.tag .u { font-weight: 600; }
.tag.clair rect { fill: #fff; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .1)); }
.tag.clair text { fill: var(--encre); }
.tag.clair .d { fill: var(--texte-3); }
.cible { stroke: var(--encre); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .55; }
.pastille-cible { cursor: pointer; }
.pastille-cible rect { fill: var(--encre); transition: fill .2s; }
.pastille-cible:hover rect { fill: var(--accent); }
.pastille-cible text { fill: #fff; font: 700 11px var(--police); }
.cible-chg { font: 800 10.5px var(--police); fill: var(--texte-2); paint-order: stroke; stroke: var(--carte); stroke-width: 3px; }
.cible-t:hover { fill: var(--accent); }

/* barres */
.g-barres .barre { fill: var(--marque); transition: fill .2s; }
.g-barres .barre.survol { fill: var(--marque-2); }
.g-barres .barre.choisie { stroke: rgba(255, 255, 255, .95); stroke-width: 1.5; }
.g-barres .barre.futur { fill: none; stroke: var(--filet-2); stroke-dasharray: 3 3; }
.g-barres .part { fill: var(--encre); opacity: .85; pointer-events: none; }
.g-barres .repere { stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; }
.g-barres .barre.ref { fill: #9EA8A0; }
.leg-svg text { font: 700 11px var(--police); fill: var(--texte-2); }
.leg-svg .cle-ref { fill: #9EA8A0; }
.leg-svg .cle-haut { fill: var(--encre); } .leg-svg .cle-bas { fill: #AAB3AB; } .leg-svg .cle-hach { fill: url(#h-gris-fonce); }
.leg-svg .cle-hors { fill: var(--alerte); }

/* comparaison */
.g-comp .bande { fill: url(#h-lavande); }
.g-comp .ligne { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.g-comp .ligne.a { stroke: var(--encre); }
.g-comp .ligne.b { stroke: #8792AF; stroke-width: 1.7; }
.g-comp .pt { stroke: #D6DCE9; stroke-width: 2.5; }
.g-comp .pt.a { fill: var(--encre); }
.g-comp .pt.b { fill: #8792AF; }
.g-comp .croix { stroke: var(--encre); stroke-width: 1; opacity: .35; }
.legende text { font: 700 11.5px var(--police); fill: var(--texte-2); }
.legende .cle { stroke-width: 2.4; stroke-linecap: round; }
.legende .cle.a { stroke: var(--encre); }
.legende .cle.b { stroke: #8792AF; }
.legende .cle-bande { fill: url(#h-lavande); stroke: #A9B2C9; }
.g-comp .axe-x text { fill: #6E7891; }

/* donut */
.g-donut { display: flex; align-items: center; gap: 6px; height: 100%; }
.g-donut .leg { list-style: none; margin: 0; padding: 0; flex: 0 0 46%; display: flex; flex-direction: column; gap: 4px; }
.g-donut .leg li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 12px; font: 600 13px var(--police); cursor: pointer; transition: background .2s; }
.g-donut .leg li:hover { background: rgba(255, 255, 255, .5); }
.g-donut .leg li.on { background: rgba(255, 255, 255, .85); }
.g-donut .leg i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.g-donut .leg span { flex: 1; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-donut .leg li.on span { color: var(--encre); }
.g-donut .leg b { font-weight: 700; }
.anneau-zone { flex: 1; min-width: 0; height: 100%; }
.g-donut .seg path.fond { stroke: var(--carte); stroke-width: 2; }
.g-donut .seg path.hachure { pointer-events: none; transition: opacity .3s; }
.g-donut .centre { font: 500 28px var(--police); letter-spacing: -.03em; fill: var(--encre); }
.g-donut .centre .d { fill: var(--texte-3); }
.g-donut .centre-l { font: 600 11px var(--police); fill: var(--texte-3); }

/* blocs */
.g-blocs { display: flex; height: 100%; }
.grp { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0 14px; border-left: 1px solid var(--filet); }
.grp:first-child { border-left: 0; padding-left: 2px; }
.grp:last-child { padding-right: 2px; }
.grp-t { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.grp-t .nom { font: 700 13px var(--police); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-grp { flex: none; font: 800 11px var(--police); padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--texte-2); }
.puce-grp:empty { display: none; }
.puce-grp.bon { color: var(--bon); } .puce-grp.alerte { color: var(--alerte); } .puce-grp.attention { color: var(--attention); }
.grp-b { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-height: 0; padding-top: 44px; }
.bloc { position: relative; flex: 1; min-width: 0; height: 0; border-radius: 16px; transition: height 1s var(--ease); }
.bloc.accent { background: var(--accent); }
.bloc.accent:not(.bas) .bloc-v, .bloc.accent:not(.bas) .bloc-l { color: #fff; }
.bloc.accent:not(.bas) .bloc-v .d { color: rgba(255, 255, 255, .62); }
.bloc.gris { background: #D1D8D2; }
.bloc.alerte { background: linear-gradient(135deg, #E6AAA5 25%, #F0C3BF 25%, #F0C3BF 50%, #E6AAA5 50%, #E6AAA5 75%, #F0C3BF 75%, #F0C3BF); background-size: 12px 12px; }
.bloc-txt { position: absolute; left: 10px; right: 6px; top: 10px; }
.bloc.bas .bloc-txt { top: auto; bottom: calc(100% + 6px); left: 2px; }
.bloc-v { font: 700 17px/1 var(--police); letter-spacing: -.02em; white-space: nowrap; }
.bloc-v .d { color: rgba(18, 21, 18, .42); }
.bloc-v .u { font-size: 11px; margin-left: 1px; letter-spacing: 0; }
/* l'étiquette passe à la ligne plutôt que de sortir du bloc quand il est étroit */
.bloc-l { font: 600 11px/1.15 var(--police); color: rgba(18, 21, 18, .58); margin-top: 3px; }

/* pilules */
.g-pilules .haut { fill: var(--encre); }
.g-pilules .bas { fill: #AAB3AB; }
.g-pilules .hach { fill: url(#h-gris-fonce); stroke: #fff; stroke-width: 1; }
.g-pilules rect.futur { fill: none; stroke: var(--filet-2); stroke-dasharray: 2 3; }
.g-pilules .c.survol .haut { fill: #000; }
.g-pilules .c.survol .bas { fill: #8F998F; }
.g-pilules .zero { stroke: var(--filet-2); stroke-width: 1; }
.g-pilules .col-choisie { fill: var(--accent-pale); opacity: .9; }
.g-pilules .nom-cote { font: 800 10px var(--police); letter-spacing: .16em; fill: var(--texte-3); }
.g-pilules .val { font: 800 12.5px var(--police); fill: var(--encre); }

/* jauge */
.g-jauge { display: flex; gap: 8px; height: 100%; }
.g-jauge .j-g { flex: 0 0 41%; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.g-jauge .liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.g-jauge .j-leg { margin: 0; font: 500 11.5px/1.4 var(--police); color: var(--texte-2); }
.g-jauge .bout { font: 700 10.5px var(--police); fill: var(--texte-3); }
.g-jauge .liste li { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.g-jauge .liste b { white-space: nowrap; }
.g-jauge .liste b { font: 500 23px/1 var(--police); letter-spacing: -.03em; }
.g-jauge .liste b .d { color: var(--texte-3); }
.g-jauge .liste b .u { font-size: 13px; letter-spacing: 0; color: var(--texte-2); }
.g-jauge .liste li > span { font: 600 12.5px/1.25 var(--police); color: var(--texte-2); }
.g-jauge .zone { flex: 1; min-width: 0; }
.g-jauge.colonne { flex-direction: column; gap: 4px; }
.g-jauge.colonne .j-g { flex: none; gap: 6px; }
.g-jauge.colonne .liste { flex-direction: row; justify-content: flex-start; gap: 26px; }
.g-jauge.colonne .liste li { flex-direction: column; gap: 4px; }
.g-jauge.colonne .liste b { font-size: 30px; }
.g-jauge.colonne .zone { min-height: 0; }
.g-jauge .tick { stroke: #C2CAC3; stroke-width: 1.4; stroke-linecap: round; }
.g-jauge .tick.on { stroke: var(--encre); }
.arc-v { fill: var(--encre); }
.g-jauge .arc-v.neutre { fill: #4A534C; }
.g-jauge .arc-v.attention { fill: #E2A43B; }
.g-jauge .arc-v.alerte { fill: #DD6A61; }
.cible-trait { stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; }
.cible-t { font: 700 11px var(--police); fill: var(--texte-2); }
.aiguille line { stroke: var(--encre); stroke-width: 3; stroke-linecap: round; }
.aiguille .pied { fill: var(--encre); }
.valeur { font-weight: 300; letter-spacing: -.045em; fill: var(--encre); }
.valeur .d { fill: var(--texte-3); }
.valeur .u { font-size: .4em; letter-spacing: 0; fill: var(--texte-2); font-weight: 500; }

/* sucettes */
.g-sucettes .tige { stroke: #8D968E; stroke-width: 1.7; stroke-linecap: round; }
.g-sucettes .tete { fill: #4A534C; stroke: var(--carte); stroke-width: 2.2; }
.g-sucettes .t.hors .tete { fill: var(--alerte); }
.g-sucettes .t.futur .tige { stroke: var(--filet-2); stroke-dasharray: 2 3; }
.g-sucettes .t.futur .tete { fill: var(--filet-2); }
.g-sucettes .t.choisi .tige { stroke: var(--encre); stroke-width: 2.6; }
.g-sucettes .t.survol .tige { stroke: var(--encre); }
.g-sucettes .coiffe circle { fill: var(--accent); stroke: var(--carte); stroke-width: 3; }
.g-sucettes .coiffe .coeur { fill: #fff; stroke: none; }
.g-sucettes .coiffe.hors circle:first-child { fill: var(--alerte); }
.g-sucettes .sol { stroke: var(--filet-2); }
.g-sucettes .n1, .leg-svg .n1 { fill: var(--carte); stroke: #7C867E; stroke-width: 1.8; }

/* classement */
.g-classement { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; }
.g-classement li { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.g-classement .nom { display: flex; align-items: center; gap: 5px; font: 600 12.5px var(--police); color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-classement .piste { height: 15px; border-radius: 8px; background: rgba(255, 255, 255, .6); overflow: hidden; }
.g-classement .barre { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--marque); transition: width 1s var(--ease); }
.g-classement li.choisie .barre { background: linear-gradient(135deg, #99A29A 25%, #E3E8E3 25%, #E3E8E3 50%, #99A29A 50%, #99A29A 75%, #E3E8E3 75%, #E3E8E3); background-size: 7px 7px; }
.g-classement li.choisie .nom { color: var(--encre); }
.g-classement .val { font: 800 12.5px var(--police); white-space: nowrap; padding: 3px 0; }
.g-classement li.choisie .val { background: var(--accent); color: #fff; padding: 3px 9px; border-radius: 8px; }
.g-classement li.controle .barre { background: linear-gradient(135deg, #E0AE4B 25%, #F5E6C4 25%, #F5E6C4 50%, #E0AE4B 50%, #E0AE4B 75%, #F5E6C4 75%, #F5E6C4); background-size: 7px 7px; }
.g-classement li.controle .nom { color: var(--attention); }
.ic-ctl { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* frise */
.g-frise { display: flex; flex-direction: column; height: 100%; }
.frise-leg { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin: -46px 120px 8px 0; min-height: 30px; position: relative; z-index: 1; }
.puce-leg { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .7); font: 700 11.5px var(--police); cursor: pointer; transition: background .2s, color .2s; }
.puce-leg:hover { background: #fff; }
.puce-leg.on { background: var(--encre); color: #fff; }
.puce-leg i, .leg-i i { width: 8px; height: 8px; border-radius: 50%; }
.leg-sep { width: 1px; height: 18px; background: var(--filet-2); margin: 0 4px; }
.leg-i { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--police); color: var(--texte-2); margin-left: 4px; }
.leg-i i.plein { background: var(--texte-2); }
.leg-i i.creux { border: 1.6px solid var(--texte-2); width: 9px; height: 9px; }
.frise-zone { flex: 1; min-height: 0; }
.g-frise .zone-vieux { fill: url(#h-zone); }
.g-frise .seuil { stroke: var(--encre); stroke-width: 1.3; stroke-dasharray: 4 4; opacity: .7; }
.g-frise line.v { stroke: #BCC5BD; stroke-dasharray: 1.5 4.5; }
.g-frise line.r { stroke: var(--filet); }
.g-frise .nom-rang { font: 700 12.5px var(--police); fill: var(--texte-2); }
.g-frise .compte .e { font: 400 24px var(--police); letter-spacing: -.03em; fill: var(--encre); }
.g-frise .compte-s { font: 600 10.5px var(--police); fill: var(--texte-3); }
.g-frise .pt { stroke-width: 1.7; cursor: pointer; transition: opacity .3s; }
.g-frise .pt.survol { stroke: var(--encre); stroke-width: 2.4; }
.g-frise .pt.pale, .g-frise .rang.pale { opacity: .16; }
.g-frise .axe-x text { font: 600 11px var(--police); }

/* anneau */
.g-anneau .arc-v { fill: var(--accent); }
.g-anneau .arc-v.alerte { fill: #F0B3AD; }
.g-anneau .tick { stroke: #AEB7AF; stroke-width: 1.4; stroke-linecap: round; }
.g-anneau .tick.on { stroke: rgba(255, 255, 255, .9); }
.g-anneau .tick.maj { stroke-width: 2.4; }
.g-anneau .grad { font: 700 10.5px var(--police); fill: var(--texte-3); }
.g-anneau .sous { font: 600 13px var(--police); fill: var(--texte-2); }
.g-anneau .serie-t { font: 800 10.5px var(--police); letter-spacing: .12em; text-transform: uppercase; fill: var(--texte-3); }
.g-anneau .sb { fill: var(--marque); }
.g-anneau .sb.on { fill: var(--accent); }
.g-anneau .sl { font: 600 10.5px var(--police); fill: var(--texte-3); }
.g-anneau .sl.on { fill: var(--encre); font-weight: 800; }

/* mètres */
.g-metres-w { display: flex; flex-direction: column; height: 100%; }
.g-metres { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
.m-leg { margin: 4px 0 0; font: 600 11px var(--police); color: var(--texte-3); }
.g-metres .m-t { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.g-metres .m-t i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.g-metres .nom { font: 700 13.5px var(--police); }
.g-metres .note { font: 600 11.5px var(--police); color: var(--texte-3); }
.g-metres .val { margin-left: auto; font: 600 17px var(--police); letter-spacing: -.02em; }
.g-metres .st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .78); font: 700 11px var(--police); white-space: nowrap; }
.g-metres .st:empty { display: none; }
.g-metres .st svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-metres li.bon .st { color: var(--bon); } .g-metres li.attention .st { color: var(--attention); } .g-metres li.alerte .st { color: var(--alerte); }
.g-metres .m-p { position: relative; height: 12px; border-radius: 6px; background: #D9DFD9; }
.g-metres .m-f { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: var(--encre); transition: width 1.1s var(--ease); }
.g-metres li.attention .m-f { background: #E2A43B; }
.g-metres li.alerte .m-f { background: #DD6A61; }
.g-metres .m-c { position: absolute; top: -5px; bottom: -5px; width: 2.5px; margin-left: -1px; border-radius: 2px; background: var(--encre); }

/* tendance */
.g-tendance { display: flex; flex-direction: column; height: 100%; }
.g-tendance .stats { display: flex; gap: 22px; flex-wrap: wrap; font: 600 12px var(--police); color: var(--texte-3); }
.g-tendance .stats b { font: 500 21px var(--police); letter-spacing: -.03em; color: var(--encre); margin-right: 3px; }
.g-tendance .stats em { font-style: normal; color: var(--texte-3); }
.t-zone { flex: 1; min-height: 0; }
.g-tendance .aire { fill: #D2D9D3; }
.g-tendance .ligne { fill: none; stroke: #535C55; stroke-width: 1.6; }
.g-tendance .ligne-n1 { fill: none; stroke: #7C867E; stroke-width: 1.6; stroke-dasharray: 4 4; }
.g-tendance .stats .cle-n1 { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; color: var(--texte-2); }
.g-tendance .stats .cle-n1 i { width: 16px; border-top: 2px dashed #7C867E; }
.g-tendance circle { fill: #535C55; stroke: var(--carte); stroke-width: 2; }
.g-tendance circle.on { fill: var(--encre); }
.g-tendance .bande-v { fill: url(#h-gris); stroke: rgba(255, 255, 255, .95); stroke-width: 1.2; }
.etat { position: relative; height: 32px; margin-top: 4px; cursor: ew-resize; touch-action: none; }
.etat-barre { position: absolute; left: 0; right: 0; top: 7px; height: 6px; border-radius: 3px; }
.etat-marque { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: left .45s var(--ease); }
.etat-marque i { width: 0; height: 0; margin-top: 3px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--encre); }
.etat-marque span { font: 700 10.5px var(--police); color: var(--texte-3); margin-top: 1px; white-space: nowrap; }
.etat-marque.droite { transform: translateX(calc(-100% + 8px)); align-items: flex-end; }
.etat-marque.gauche { transform: translateX(-8px); align-items: flex-start; }

/* héros */
.g-heros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr) auto; gap: 4px 16px; height: 100%; }
.h-gauche { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.h-val { font-weight: 300; letter-spacing: -.06em; line-height: .86; white-space: nowrap; }
.h-val .d { color: var(--texte-3); }
.h-val .u { font-size: .34em; letter-spacing: -.01em; margin-left: 5px; color: var(--texte-2); font-weight: 400; }
.h-avant { font: 600 12.5px/1.35 var(--police); color: var(--texte-2); margin-top: 12px; }
.h-avant b { color: var(--encre); }
.h-mini { position: relative; min-width: 0; min-height: 0; }
.h-mini .points-fond { pointer-events: none; }
.mini-ligne { fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; }
.mini-pt { fill: var(--accent); stroke: #fff; stroke-width: 2.6; }
.mini-barre { fill: #C3CBC4; }
.mini-barre.on { fill: url(#h-gris-fonce); stroke: #fff; }
.n1-ligne { fill: none; stroke: #7C867E; stroke-width: 1.8; stroke-dasharray: 4 4; }
.n1-trait { stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; }
.ref-pt { fill: var(--carte); stroke: var(--accent); stroke-width: 2.2; }
.mini-leg { font: 700 10.5px var(--police); fill: var(--texte-2); }
.h-mini .cible { opacity: .45; }
.mini-annee { stroke: var(--filet-2); stroke-width: 1; stroke-dasharray: 2 3; }
.mini-annee-t { font: 800 9px var(--police); fill: var(--texte-3); letter-spacing: .04em; }
.h-pied { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.h-phrase { margin: 0; font: 600 12.5px var(--police); color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat-puce { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 4px; border-radius: 999px; background: var(--encre); color: #fff; font: 700 12px var(--police); white-space: nowrap; flex: none; }
.rond-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--encre); }
.rond-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.etat-puce.bon .rond-ic { background: var(--accent); color: #fff; }
.etat-puce.attention .rond-ic { background: #F6D896; color: #6B4404; }
.etat-puce.alerte .rond-ic { background: #F6B7B2; color: #7A1D22; }
.etat-puce.neutre .rond-ic { background: #D5DCD6; }

/* chiffres */
.g-chiffres { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 100%; }
.g-chiffres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; }
.g-chiffres li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-chiffres li b { font: 400 34px/1 var(--police); letter-spacing: -.04em; white-space: nowrap; }
.g-chiffres li.accent b { font-size: 52px; font-weight: 300; }
.g-chiffres .d { color: var(--texte-3); }
.g-chiffres .u { font-size: .42em; letter-spacing: 0; margin-left: 2px; color: var(--texte-2); font-weight: 500; }
.g-chiffres .l { font: 600 12px var(--police); color: var(--texte-2); }
.ctl { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 16px; background: rgba(255, 255, 255, .7); font: 500 12px/1.38 var(--police); color: var(--texte-2); }
.ctl svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--attention); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.ctl.alerte svg { stroke: var(--alerte); }
.ctl b { display: block; color: var(--encre); font-weight: 800; margin-bottom: 1px; }

/* =============================================================================
   LA SYNTHÈSE : la lecture et les dix tuiles
   ========================================================================== */
.tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; height: 100%; }
.tuile { padding: 14px 15px 12px; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); text-align: left; }
.tuile:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 26px 44px -26px rgba(24, 34, 26, .45); }
.tuile:active { transform: translateY(-1px) scale(.99); }
.tu-tete { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tu-tete .c-ic { width: 32px; height: 32px; }
.tu-tete .c-ic .ic { width: 15px; height: 15px; }
.st-mini { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font: 800 10.5px var(--police); white-space: nowrap; background: rgba(255, 255, 255, .8); }
.st-mini .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.st-mini.bon { color: var(--bon); } .st-mini.attention { color: var(--attention); } .st-mini.alerte { color: #fff; background: var(--alerte); } .st-mini.neutre { color: var(--texte-3); }
.tu-nom { font: 700 14px/1.2 var(--police); letter-spacing: -.01em; margin-top: 12px; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tu-corps { flex: 1; min-height: 0; }
.g-tuile { display: flex; flex-direction: column; height: 100%; }
.tu-v { font: 400 36px/1 var(--police); letter-spacing: -.045em; margin-top: 8px; white-space: nowrap; }
.tu-v .d { color: var(--texte-3); }
.tu-v .u { font-size: 15px; letter-spacing: 0; color: var(--texte-2); margin-left: 2px; }
.tu-c { font: 600 11.5px var(--police); color: var(--texte-3); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-s { flex: 1; min-height: 34px; margin: 8px -2px 0; }
.tu-aire { fill: rgba(18, 21, 18, .055); }
.tu-ligne { fill: none; stroke: var(--encre); stroke-width: 1.9; stroke-linecap: round; }
.tu-pt { fill: var(--accent); stroke: #fff; stroke-width: 2.4; }
.tu-n1 { fill: none; stroke: #7C867E; stroke-width: 1.5; stroke-dasharray: 3 3; }
.tu-ref { fill: var(--carte); stroke: var(--accent); stroke-width: 2; }
.tu-pos { position: relative; height: 18px; margin-top: 8px; }
.tu-piste { position: absolute; left: 0; right: 0; top: 9px; height: 6px; border-radius: 3px; opacity: .9; }
.tu-marque { position: absolute; top: 0; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--encre); transition: left 1.1s var(--ease); }
.tu-delta { display: flex; align-items: center; gap: 4px; margin-top: 7px; font: 800 11px var(--police); color: var(--texte-2); white-space: nowrap; overflow: hidden; }
.tu-delta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tu-delta.mieux { color: var(--bon); } .tu-delta.moins { color: var(--alerte); }
.tu-delta span { font-weight: 600; color: var(--texte-3); }
.tuile[data-statut="alerte"] { background: linear-gradient(180deg, #F6E3E1 0%, var(--carte) 46%); }

.lecture { display: flex; flex-direction: column; }
.lec-forme { position: relative; flex: 1; min-height: 120px; margin: 0 -18px; }
.lec-forme canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lec-bulle { position: absolute; left: 14px; right: 14px; bottom: 6px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 15px; border: 0; border-radius: 18px;
  background: var(--accent); color: #fff; text-align: left; font: 700 13.5px/1.3 var(--police); cursor: pointer; box-shadow: 0 16px 30px -14px rgba(41, 98, 255, .7); transition: transform .3s var(--ease); }
.lec-bulle:hover { transform: translateY(-2px); }
.lec-bulle-t { flex: 1; }
.lec-bulle .go { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; transition: transform .3s var(--ease); }
.lec-bulle:hover .go { transform: translateX(3px); }
.lec-chiffres { display: flex; gap: 8px; margin: 14px 0 12px; }
.lec-chiffres .lc { flex: 1; padding: 10px 11px; border-radius: 16px; background: rgba(255, 255, 255, .62); }
.lec-chiffres b { display: block; font: 300 34px/1 var(--police); letter-spacing: -.04em; }
.lec-chiffres span { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 700 11px var(--police); color: var(--texte-2); white-space: nowrap; }
.lec-chiffres i { width: 7px; height: 7px; border-radius: 50%; }
.lc.alerte i { background: var(--alerte); } .lc.attention i { background: #E2A43B; } .lc.bon i { background: var(--bon); }
.lec-phrases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lec-phrases li { display: flex; gap: 9px; font: 600 13px/1.38 var(--police); }
.lec-phrases li i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.lec-phrases li.alerte i { background: var(--alerte); } .lec-phrases li.attention i { background: #E2A43B; } .lec-phrases li.bon i { background: var(--bon); }
.lec-q { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lec-q button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .72); font: 700 12px var(--police); cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.lec-q button:hover { background: #fff; transform: translateY(-1px); }

/* =============================================================================
   PAR-DESSUS : infobulle, pop, modale, tiroir, recherche, toasts, présentation
   ========================================================================== */
#infobulle { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; min-width: 120px; max-width: 280px; padding: 10px 12px; border-radius: 14px; background: #fff;
  box-shadow: var(--ombre-pop); opacity: 0; transition: opacity .14s; }
#infobulle.on { opacity: 1; }
.ib-t { font: 700 11.5px var(--police); color: var(--texte-3); margin-bottom: 6px; }
.ib-l { display: flex; align-items: center; gap: 8px; font: 600 12px var(--police); color: var(--texte-2); margin-top: 3px; }
.ib-l i { width: 12px; height: 3.5px; border-radius: 2px; flex: none; }
.ib-l i.vide { width: 0; }
.ib-l b { font: 800 14.5px var(--police); color: var(--encre); letter-spacing: -.01em; }
.ib-p { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--filet); font: 700 11px var(--police); color: var(--texte-2); }

#voile { position: fixed; inset: 0; z-index: 80; background: rgba(32, 40, 34, .28); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .3s; }
#voile.on { opacity: 1; pointer-events: auto; }
#voile.leger { background: rgba(32, 40, 34, .14); backdrop-filter: blur(2px); }

#pop { position: fixed; z-index: 150; width: 320px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--ombre-pop); display: none; }
#pop.on { display: block; animation: pop .26s var(--ease); }
#pop.large { width: 360px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.pop-t { display: flex; align-items: center; gap: 8px; font: 800 13.5px var(--police); }
.pop-t .ic { width: 16px; height: 16px; }
.pop-s { margin: 6px 0 10px; font: 500 12.5px/1.4 var(--police); color: var(--texte-2); }
#pop textarea { width: 100%; resize: vertical; min-height: 70px; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 14px; font: 500 13px/1.4 var(--police); background: #F6F8F5; }
#pop textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.pop-b { display: flex; justify-content: flex-end; margin-top: 10px; }
.pop-b .pilule { height: 36px; }
.lignes { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.ligne { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 11px; background: none; text-align: left; font: 600 13px var(--police); cursor: pointer; }
.ligne:hover { background: #F1F4F0; }
.ligne.on { font-weight: 800; }
.ligne span { flex: 1; }
.ligne em { font-style: normal; font: 600 11.5px var(--police); color: var(--texte-3); }
.ligne .ok { width: 16px; height: 16px; stroke-width: 2.6; }
.ligne .pt { width: 9px; height: 9px; border-radius: 50%; }
.choix { display: flex; flex-direction: column; gap: 4px; }
.ch { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: #F3F6F2; font: 700 13px var(--police); cursor: pointer; text-align: left; }
.ch span { flex: 1; }
.ch:hover { background: #E9EEE8; }
.ch.on { background: var(--encre); color: #fff; }
.notes { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.notes li { position: relative; padding: 9px 34px 9px 11px; border-radius: 12px; background: #F3F6F2; }
.notes p { margin: 0; font: 600 12.5px/1.4 var(--police); }
.notes span { font: 600 10.5px var(--police); color: var(--texte-3); }
.notes .suppr { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte-3); }
.notes .suppr:hover { background: #fff; color: var(--alerte); }
.notes .suppr .ic { width: 14px; height: 14px; }
.frise-j { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 8px; }
.frise-j span { display: flex; flex-direction: column; padding: 8px 9px; border-radius: 12px; background: #F3F6F2; font: 600 11px var(--police); color: var(--texte-2); }
.frise-j b { font: 400 20px/1 var(--police); color: var(--encre); letter-spacing: -.03em; margin-bottom: 3px; }
.frise-j .cible { background: var(--accent-pale); }

#modale { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#modale.on { pointer-events: auto; }
.mod-boite { position: fixed; display: flex; flex-direction: column; padding: 20px 22px 18px; border-radius: 30px; background: var(--carte); border: 1px solid #fff; box-shadow: var(--ombre-pop); transform-origin: 0 0; overflow: hidden; }
.mod-boite.lavande { background: linear-gradient(180deg, #DCE2EE, #D2D9E7); }
.mod-boite .c-txt h3 { font-size: 20px; }
.mod-boite .c-sous { font-size: 13px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px #fff; }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 700 12.5px var(--police); color: var(--texte-2); cursor: pointer; transition: background .25s var(--ease), color .25s; }
.seg button.on { background: var(--encre); color: #fff; }
.seg .ic { width: 15px; height: 15px; }
.seg i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rouge-badge); color: #fff; font: 800 10px/18px var(--police); }
.mod-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; margin-top: 14px; }
.mod-g { display: flex; flex-direction: column; min-height: 0; }
.mod-graphe { flex: 1; min-height: 0; position: relative; margin-top: 10px; }
.mod-table { flex: 1; min-height: 0; overflow: auto; margin-top: 10px; border-radius: 16px; background: rgba(255, 255, 255, .6); }
.mod-table table { width: 100%; border-collapse: collapse; font: 600 13px var(--police); font-variant-numeric: tabular-nums; }
.mod-table th, .mod-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.mod-table thead th { position: sticky; top: 0; background: #F4F7F3; font: 800 11.5px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .06em; }
.mod-table td { text-align: right; }
.mod-table tbody th { font-weight: 700; }
.mod-cote { min-height: 0; overflow: auto; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .62); }
.mod-cote h4 { margin: 0 0 6px; font: 800 11.5px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .08em; }
.mod-cote p { margin: 0 0 16px; font: 600 13.5px/1.45 var(--police); }
.mod-cote p.mut { color: var(--texte-2); font-weight: 500; font-size: 12.5px; margin-top: -10px; }
.mod-cote p.petit { margin-top: 10px; font-size: 11.5px; color: var(--texte-3); }
.mod-cote .notes { margin-bottom: 16px; max-height: none; }

/* ---- l'onglet Cible ------------------------------------------------------- */
.mod-cible { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.mod-boite.vue-cible .mod-corps { grid-template-columns: minmax(0, 1fr); }
.mod-boite.vue-cible .mod-cote { display: none; }
/* les périmètres */
.cb-peri { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.cb-p { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 11px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px #fff; font: 700 12.5px var(--police); color: var(--encre); cursor: pointer; transition: background .2s, color .2s; }
.cb-p:hover { background: #fff; }
.cb-p .pt { width: 8px; height: 8px; border-radius: 50%; }
.cb-p em { font: 600 11.5px var(--police); font-style: normal; color: var(--texte-3); }
.cb-p.on { background: var(--encre); color: #fff; box-shadow: none; }
.cb-p.on em { color: rgba(255, 255, 255, .62); }
.cb-regle { position: absolute; top: 3px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--carte); }
.cb-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; }
/* la scène : le graphique où l'on règle à la main */
.cb-scene { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px 12px; border-radius: 24px; background: rgba(255, 255, 255, .62); }
.cb-scene-t { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: none; }
.cb-titre h4 { margin: 0; font: 400 22px/1.15 var(--police); letter-spacing: -.02em; }
.cb-titre p { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font: 600 12px var(--police); color: var(--texte-2); }
.cb-titre p .ic { width: 14px; height: 14px; color: var(--accent); }
.cb-leg { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; max-width: 260px; padding-top: 4px; font: 700 11px var(--police); color: var(--texte-2); }
.cb-leg span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cb-leg i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--encre); }
.cb-leg i.l-c { border-top: 1.6px dashed var(--encre); opacity: .7; }
.cb-leg i.l-n { border-top: 3px solid var(--accent); border-radius: 2px; }
.cb-leg i.l-m { height: 9px; border: 0; border-radius: 2px; background: linear-gradient(135deg, rgba(168, 110, 9, .32) 25%, rgba(168, 110, 9, .12) 25%, rgba(168, 110, 9, .12) 50%, rgba(168, 110, 9, .32) 50%, rgba(168, 110, 9, .32) 75%, rgba(168, 110, 9, .12) 75%); background-size: 6px 6px; }
.cb-graphe { flex: 1; min-height: 220px; position: relative; margin-top: 6px; }
.cb-graphe .g { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* ce que ça change */
.cb-effet { display: flex; align-items: stretch; gap: 12px; flex: none; margin-top: 8px; }
.cb-cpt { display: flex; gap: 6px; flex: none; }
.cb-c3 { position: relative; width: 104px; padding: 9px 12px 8px; border-radius: 16px; background: #fff; transition: box-shadow .3s, transform .3s var(--ease); }
.cb-c3 b { display: block; font: 400 32px/1 var(--police); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cb-c3 span { display: block; margin-top: 3px; font: 700 11.5px var(--police); color: var(--texte-2); }
.cb-c3 em { display: block; min-height: 14px; font: 600 10.5px var(--police); font-style: normal; color: var(--texte-3); }
.cb-c3.alerte b { color: #B02F36; } .cb-c3.attention b { color: #8F5D05; } .cb-c3.bon b { color: var(--bon); }
.cb-c3.change { box-shadow: inset 0 0 0 2px var(--accent); }
.cb-dire { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 14px; border-radius: 16px; background: var(--accent-pale); }
.cb-cpt-t { font: 800 10.5px var(--police); color: #3A5BB8; text-transform: uppercase; letter-spacing: .07em; }
.cb-apercu { margin: 0; font: 600 12.5px/1.45 var(--police); color: #16306E; }
/* le graphique */
.cb-fond { opacity: .55; }
.cb-avenir { opacity: .5; }
.cb-avenir-t { font: 800 10.5px var(--police); fill: var(--texte-3); text-transform: uppercase; letter-spacing: .08em; }
.cb-grille { stroke: var(--filet); stroke-width: 1; }
.cb-axe, .cb-mois { font: 600 10.5px var(--police); fill: var(--texte-3); font-variant-numeric: tabular-nums; }
.cb-mois.choisi { font-weight: 800; fill: var(--encre); }
.cb-mois.futur { opacity: .6; }
.cb-annee { stroke: var(--filet-2); stroke-width: 1; stroke-dasharray: 2 3; }
.cb-bon { fill: rgba(41, 98, 255, .045); }
.cb-bon.neuve { fill: rgba(41, 98, 255, .1); }
.cb-marge { fill: rgba(168, 110, 9, .14); }
.cb-marge.neuve { fill: rgba(168, 110, 9, .2); }
.cb-surl { fill: rgba(18, 21, 18, .07); stroke: rgba(18, 21, 18, .25); stroke-dasharray: 3 3; pointer-events: none; }
.cb-c { stroke: var(--encre); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: .7; }
.cb-c.eteinte { stroke: var(--texte-3); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .6; }
.cb-poignee.eteinte rect { fill: #8A938B; }
.cb-c.neuve { stroke: var(--accent); stroke-width: 3; stroke-dasharray: none; stroke-linecap: round; opacity: 1; filter: drop-shadow(0 2px 4px rgba(41, 98, 255, .35)); }
.cb-ligne { fill: none; stroke: var(--encre); stroke-width: 2.2; }
.cb-pt { stroke: #fff; stroke-width: 1.8; transition: fill .2s; }
.cb-pt.bon { fill: var(--bon); } .cb-pt.attention { fill: #D89A2B; } .cb-pt.alerte { fill: var(--alerte); } .cb-pt.neutre { fill: var(--marque-2); }
.cb-pt.choisi { stroke: var(--encre); stroke-width: 2.5; }
.cb-tag-v rect { fill: var(--encre); }
.cb-tag-v text { fill: #fff; font: 800 11.5px var(--police); font-variant-numeric: tabular-nums; }
.g-cible .hit { fill: transparent; }
.cb-prise { fill: transparent; cursor: ns-resize; }
/* la pastille de la cible : on l'attrape */
.cb-poignee { cursor: grab; outline: none; }
.cb-poignee-i { transition: transform .2s var(--ease); transform-box: fill-box; transform-origin: center; }
.cb-poignee:hover .cb-poignee-i, .cb-poignee:focus-visible .cb-poignee-i { transform: scale(1.06); }
.cb-poignee rect { fill: var(--encre); filter: drop-shadow(0 6px 10px rgba(18, 21, 18, .35)); transition: fill .2s; }
.cb-poignee.neuve rect, .g-cible.tire .cb-poignee rect { fill: var(--accent); }
.cb-poignee:focus-visible rect { stroke: #fff; stroke-width: 2; }
.cb-poignee text { fill: #fff; font: 800 12.5px var(--police); font-variant-numeric: tabular-nums; pointer-events: none; }
.cb-grip { fill: rgba(255, 255, 255, .7); pointer-events: none; }
.g-cible.tire, .g-cible.tire .cb-poignee { cursor: grabbing; }
.cb-poignee-i.invite { animation: invite 1.3s var(--ease) .7s 2; }
@keyframes invite { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } 65% { transform: translateY(4px); } }
/* la pastille du début : on la glisse d'un mois à l'autre */
.cb-debut { cursor: ew-resize; outline: none; }
.cb-debut-l { stroke: var(--encre); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .5; }
.cb-debut.neuve .cb-debut-l { stroke: var(--accent); opacity: .9; }
.cb-debut rect { fill: #fff; stroke: var(--encre); stroke-width: 1.4; transition: fill .2s, stroke .2s; }
.cb-debut.neuve rect { stroke: var(--accent); }
.cb-debut:hover rect, .cb-debut:focus-visible rect, .g-cible.tire-x .cb-debut rect { fill: var(--accent); stroke: var(--accent); }
.cb-debut text { font: 800 11.5px var(--police); fill: var(--encre); pointer-events: none; }
.cb-debut:hover text, .cb-debut:focus-visible text, .g-cible.tire-x .cb-debut text { fill: #fff; }
.g-cible.tire-x { cursor: ew-resize; }
/* à droite : le réglage */
.cb-cote { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.cb-regler { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 14px; border-radius: 24px; background: #fff; box-shadow: 0 18px 36px -28px rgba(18, 26, 20, .45); }
.cb-vig { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--filet); }
.cb-vig-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cb-vig-h > span { font: 800 10.5px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .07em; }
.cb-vig.eteinte b { color: var(--texte-3); }
/* l'interrupteur : allumée, la cible compte ; éteinte, elle attend */
.cb-inter { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border: 0; border-radius: 999px; background: var(--fond); cursor: pointer; }
.cb-inter i { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--marque-2); transition: background .2s; }
.cb-inter i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.cb-inter.on i { background: var(--accent); }
.cb-inter.on i::after { transform: translateX(12px); }
.cb-inter span { font: 800 11px var(--police); color: var(--texte-2); }
.cb-inter.on span { color: var(--accent-fonce); }
.cb-vig b { font: 800 15px var(--police); }
.cb-vig em { justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--fond); font: 800 11px var(--police); font-style: normal; }
.cb-vig small { grid-column: 1 / -1; font: 600 11px var(--police); color: var(--texte-3); }
.cb-st.bon { color: var(--bon); } .cb-st.attention { color: #8F5D05; } .cb-st.alerte { color: #B02F36; }
.cb-big { display: flex; flex-direction: column; }
.cb-sens { font: 700 11.5px var(--police); color: var(--texte-3); }
.cb-nb { font: 300 46px/1 var(--police); letter-spacing: -.045em; font-variant-numeric: tabular-nums; transition: color .2s; }
.cb-nb .d { color: rgba(18, 21, 18, .38); }
.cb-nb .u { margin-left: 4px; font-size: .38em; font-weight: 600; letter-spacing: 0; color: var(--texte-2); }
.cb-nb.neuve { color: var(--accent); }
.cb-nb.neuve .d { color: rgba(41, 98, 255, .5); }
.cb-quand { margin-top: 2px; font: 600 12px var(--police); color: var(--texte-2); }
.cb-pas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; }
.cb-ch { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cb-ch > span:first-child { font: 700 11px var(--police); color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-step { display: flex; align-items: center; height: 40px; padding: 3px; border-radius: 999px; background: var(--fond); }
.cb-step button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; font: 600 17px/1 var(--police); color: var(--encre); cursor: pointer; transition: background .2s, color .2s; }
.cb-step button:hover { background: var(--encre); color: #fff; }
.cb-step input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; text-align: right; font: 800 15px var(--police); font-variant-numeric: tabular-nums; outline: none; }
.cb-step i { flex: none; margin: 0 6px 0 3px; font: 700 11.5px var(--police); font-style: normal; color: var(--texte-3); }
.cb-step:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.cb-depuis, .cb-motif { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--fond); font: 700 13px var(--police); color: var(--encre); }
.cb-motif { font-weight: 600; }
.cb-depuis:focus, .cb-motif:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.cb-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.cb-btns .pilule { justify-content: center; height: 42px; }
.cb-btns .pilule:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.cb-suivre { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; background: none; font: 700 12px var(--police); color: var(--texte-2); cursor: pointer; }
.cb-suivre:hover { color: var(--accent-fonce); }
.cb-suivre .ic { width: 14px; height: 14px; }
/* à droite : l'historique, en frise */
.cb-histo { flex: 1; min-height: 120px; display: flex; flex-direction: column; padding: 14px 14px 10px 16px; border-radius: 24px; background: rgba(255, 255, 255, .62); }
.cb-histo h4 { margin: 0 0 10px; font: 800 11px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .08em; }
.cb-liste { position: relative; list-style: none; margin: 0; padding: 0 2px 0 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.cb-liste li { position: relative; padding: 8px 34px 8px 24px; border-radius: 14px; transition: background .2s; }
.cb-liste li:hover { background: rgba(255, 255, 255, .85); }
.cb-liste li::before { content: ""; position: absolute; left: 8px; top: 0; bottom: -4px; border-left: 1.5px solid var(--filet-2); }
.cb-liste li:last-child::before { bottom: auto; height: 16px; }
.cb-noeud { position: absolute; left: 3px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--carte); border: 2px solid var(--marque-2); }
.cb-liste li.on .cb-noeud { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale); }
.cb-liste li.futur .cb-noeud { border-color: var(--encre); }
.cb-liste li.suit .cb-noeud { border-style: dashed; }
.cb-l1 { display: flex; align-items: center; gap: 8px; }
.cb-l1 b { font: 800 14px var(--police); }
.cb-liste li.passe .cb-l1 b { color: var(--texte-2); }
.cb-liste li.barree b { text-decoration: line-through; color: var(--texte-3); }
.cb-tag { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 10px var(--police); font-style: normal; letter-spacing: .02em; }
.cb-tag.futur { background: var(--encre); }
.cb-tag.eteinte { background: var(--marque-2); }
.cb-liste li.on .cb-noeud:has(+ .cb-l1 .cb-tag.eteinte) { background: var(--marque-2); border-color: var(--marque-2); box-shadow: none; }
.cb-per { margin-top: 1px; font: 700 11.5px var(--police); color: var(--texte-2); }
.cb-l2 { margin-top: 2px; font: 500 11px/1.4 var(--police); color: var(--texte-3); }
.cb-liste q { display: block; margin-top: 4px; font: italic 600 11.5px/1.4 var(--police); color: var(--texte-2); quotes: "« " " »"; }
.cb-liste li.vide-h { padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet); font: 600 12px/1.45 var(--police); color: var(--texte-3); }
.cb-liste li.vide-h::before { display: none; }
.cb-retirer { position: absolute; top: 6px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--texte-3); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.cb-liste li:hover .cb-retirer, .cb-retirer:focus-visible { opacity: 1; }
.cb-retirer:hover { background: #F6C3BF; color: #7A1D22; }
.cb-retirer .ic { width: 14px; height: 14px; }

#tiroir { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 95; width: 420px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; padding: 18px 18px 16px;
  border-radius: 28px; background: var(--carte); border: 1px solid #fff; box-shadow: var(--ombre-pop); transform: translateX(calc(100% + 24px)); transition: transform .45s var(--ease); }
#tiroir.on { transform: none; }
#tiroir header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
#tiroir h2 { margin: 0; font: 400 26px/1.1 var(--police); letter-spacing: -.03em; }
#tiroir .seg { margin-bottom: 12px; }
#tiroir .seg button { flex: 1; justify-content: center; padding: 0 8px; }
.t-corps { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.t-corps .intro { margin: 0 0 4px; font: 500 12.5px/1.45 var(--police); color: var(--texte-2); }
.t-corps .vide { margin: 20px 0; text-align: center; font: 600 13px var(--police); color: var(--texte-3); flex: none; }
.al { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 13px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .72); text-align: left; cursor: pointer; transition: background .2s, transform .25s var(--ease); }
.al:hover { background: #fff; transform: translateX(-2px); }
.al-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #F2D9B0; color: #6B4404; }
.al.alerte .al-ic { background: #F6C3BF; color: #7A1D22; }
.al.info .al-ic { background: #DCE2EE; color: #3B4664; }
.al-ic .ic { width: 16px; height: 16px; stroke-width: 2; }
.al > div { flex: 1; min-width: 0; }
.al b { display: block; font: 800 13.5px/1.25 var(--police); }
.al span { display: block; margin-top: 3px; font: 500 12.5px/1.4 var(--police); color: var(--texte-2); }
.al em { display: block; margin-top: 5px; font: 700 11px var(--police); font-style: normal; color: var(--texte-3); }
.al-go { width: 16px; height: 16px; color: var(--texte-3); margin-top: 9px; }
.note-g { padding: 12px 13px; border-radius: 18px; background: rgba(255, 255, 255, .72); }
.note-lien { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 0 0 6px; font: 800 12.5px var(--police); cursor: pointer; text-align: left; }
.note-lien .ic { width: 14px; height: 14px; margin-left: auto; }
.note-g p { margin: 6px 0 0; font: 600 12.5px/1.4 var(--police); }
.note-g p span { display: block; font: 600 10.5px var(--police); color: var(--texte-3); }
.cib-l { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .72); text-align: left; cursor: pointer; transition: background .2s, transform .25s var(--ease); }
.cib-l:hover { background: #fff; transform: translateX(-2px); }
.cib-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-pale); color: var(--accent-fonce); }
.cib-ic .ic { width: 15px; height: 15px; }
.cib-l > div { flex: 1; min-width: 0; }
.cib-l b { display: block; font: 800 12.5px/1.25 var(--police); }
.cib-l div span { display: block; margin-top: 2px; font: 600 11px/1.35 var(--police); color: var(--texte-3); }
.cib-l em { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 10.5px var(--police); font-style: normal; }
.cib-l .al-go { margin-top: 0; }
.cib-g { margin: 10px 2px 0; font: 800 11px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .08em; }
.cib-l.eteinte b { color: var(--texte-2); }
.cib-l.eteinte .cib-ic { background: #E4E9E5; color: var(--texte-3); }
#tiroir .pilule[data-retablir] { margin-top: 6px; align-self: flex-start; }
.rap-l { display: flex; flex-direction: column; gap: 6px; }
.rap { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .72); cursor: pointer; }
.rap input { width: 17px; height: 17px; accent-color: var(--encre); }
.rap b { display: block; font: 800 13px var(--police); }
.rap em { display: block; font: 600 11.5px var(--police); font-style: normal; color: var(--texte-3); }
.rap.opt { margin-top: 10px; background: var(--accent-pale); }
.aide { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; margin: 0; }
.aide dd { margin: 0; font: 600 13px var(--police); color: var(--texte-2); }
kbd { display: inline-block; min-width: 26px; padding: 4px 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 -2px 0 var(--filet); font: 800 12px var(--police); text-align: center; }

#palette { position: fixed; inset: 0; z-index: 120; display: none; place-items: start center; padding-top: 14vh; pointer-events: none; }
#palette.on { display: grid; }
.pal-boite { width: min(620px, 92vw); border-radius: 26px; background: #fff; box-shadow: var(--ombre-pop); overflow: hidden; pointer-events: auto; animation: pop .28s var(--ease); }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--filet); }
.pal-in .ic { width: 20px; height: 20px; color: var(--texte-3); }
.pal-in input { flex: 1; border: 0; outline: none; font: 500 17px var(--police); background: none; }
.pal-l { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.pal-l li { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 14px; cursor: pointer; }
.pal-l li.on { background: #F0F4EE; }
.pal-l li b { font: 700 14px var(--police); }
.pal-l li span { margin-left: auto; font: 600 12px var(--police); color: var(--texte-3); }
.pal-l li.vide { color: var(--texte-3); cursor: default; }

#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 210; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 11px 18px; border-radius: 999px; background: var(--encre); color: #fff; font: 700 13px var(--police); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); animation: toast .4s var(--ease); white-space: nowrap; }
.toast.part { opacity: 0; transform: translateY(8px); transition: all .45s var(--ease); }
.toast { display: flex; align-items: center; gap: 14px; }
.toast button { pointer-events: auto; border: 0; padding: 0; background: none; color: #9DB8FF; font: 800 13px var(--police); cursor: pointer; }
.toast button:hover { color: #fff; text-decoration: underline; }
@keyframes toast { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* présenter : plus de bandeau ni de commandes, le thème prend tout l'écran */
#pres { display: none; }
body.presenter #app { grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: 0 auto minmax(0, 1fr); }
body.presenter #haut, body.presenter #rail, body.presenter .commandes, body.presenter #retour { display: none !important; }
body.presenter #tetiere { padding: max(44px, 6vh) 48px 22px; }
body.presenter #grille { padding: 0 48px 96px; gap: 16px; }
body.presenter #titre { font-size: 52px; }
body.presenter .c-act { display: none; }
body.presenter #pres { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px;
  border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: var(--ombre-pop); backdrop-filter: blur(10px); }
.pt-pres { width: 9px; height: 9px; border: 0; padding: 0; border-radius: 50%; background: var(--marque); cursor: pointer; transition: width .4s var(--ease), background .3s; }
.pt-pres.on { width: 26px; border-radius: 5px; background: var(--encre); }
.pres-m { font: 800 12.5px var(--police); margin: 0 6px 0 10px; color: var(--texte-2); }
#pres .rond { width: 36px; height: 36px; background: #fff; }
#pres .pilule { height: 36px; background: #fff; }

/* l'impression se prépare hors de l'écran */
#impression { position: fixed; left: -30000px; top: 0; width: 1060px; }
.page-imp { width: 1060px; height: 730px; display: flex; flex-direction: column; gap: 10px; padding: 0; background: var(--fond); }
.imp-tete { display: flex; align-items: flex-start; gap: 18px; }
.imp-marque { display: flex; align-items: center; gap: 8px; font: 800 15px var(--police); width: 120px; flex: none; }
.imp-marque svg { width: 28px; height: 28px; }
.imp-t { flex: 1; min-width: 0; }
.imp-t span { font: 700 11px var(--police); color: var(--texte-2); }
.imp-t p { white-space: pre-line; }
.imp-t h2 { margin: 2px 0 0; font: 400 28px/1.05 var(--police); letter-spacing: -.03em; }
.imp-t p { margin: 4px 0 0; font: 500 11.5px/1.35 var(--police); color: var(--texte-2); }
.imp-demo { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 10.5px var(--police); }
.imp-grille { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9px; }
.imp-grille .carte { padding: 11px 12px 9px; border-radius: 18px; box-shadow: none; }
.imp-grille .c-ic { width: 28px; height: 28px; }
.imp-grille .c-txt h3 { font-size: 13.5px; }
.imp-grille .c-sous { font-size: 11px; }
.imp-grille .lec-q, .imp-grille .lec-bulle { display: none; }
.imp-grille .tuiles { gap: 8px; }
.imp-grille .lec-chiffres .lc { padding: 7px 8px; }
.imp-grille .lec-chiffres b { font-size: 24px; }
.imp-grille .lec-chiffres span { font-size: 9.5px; }
.imp-grille .lec-phrases li { font-size: 11px; }
.imp-grille .tu-v { font-size: 28px; }
.imp-grille .tu-nom { font-size: 12px; margin-top: 8px; }
.imp-notes { padding: 8px 12px; border-radius: 14px; background: #fff; font: 500 11px/1.4 var(--police); }
.imp-notes p { margin: 0; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  html, body { height: auto; overflow: visible; background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #app, #pres, #infobulle, #voile, #modale, #tiroir, #palette, #pop, #toast, #planBarre, #espace { display: none !important; }
  #impression { position: static; left: auto; }
  .page-imp { break-after: page; page-break-after: always; }
  .page-imp:last-child { break-after: auto; page-break-after: auto; }
}

/* =============================================================================
   LE MODE CIBLES : les cartes gardent leur place, leur contenu change
   ========================================================================== */
.c-cible, .tu-plan { display: none; }
body.cibler #grille .carte > .c-corps, body.cibler #grille .carte > .c-chiffre { display: none; }
body.cibler #grille .carte > .c-cible { display: flex; flex: 1; min-height: 0; flex-direction: column; margin-top: 10px; }
/* la carte ne défile jamais (un clic sur un bouton ne cache plus son titre) ;
   son contenu se resserre selon la place qu'elle a */
body.cibler #grille .carte { overflow: clip; }
body.cibler #grille .carte > .c-cible, body.cibler #grille .tuile .tu-plan { container-type: size; }
@container (max-height: 200px) {
  .pc { gap: 6px; }
  .pc-nb { font-size: 30px; }
  .pc-cb { font-size: 15px; }
  .pc-ecart-t, .pc-prevu { display: none; }
  /* la décision sur une seule rangée : le mois et l'état à gauche, le − + à droite */
  .pc-dec { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; }
  .pc-dec-t { flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; }
  .pc-dec .pc-garder { position: absolute; top: -10px; right: -6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
  .pc-dec-b { margin-top: 0; }
  .pc-step { height: 32px; width: 132px; }
  .pc-effet { display: none; }
  .pf-note { display: none; }
  .pc-divs .pc-dec-t { display: none; }
  .pc-step.mini { height: 24px; }
  .pc-step.mini button { width: 20px; height: 20px; font-size: 13px; }
}
@container (max-width: 430px) {
  .pc-divs .pc-q, .pc-divs thead th:nth-child(3) { display: none; }
  .pc-effet { font-size: 11.5px; }
}
@container (max-height: 175px) {
  .tp { gap: 4px; margin-top: 2px; }
  .tp-nb { font-size: 26px; }
  .tp .cb-inter { display: none; }
}
body.cibler #grille .tuile .tu-corps { display: none; }
body.cibler #grille .tuile .tu-plan { display: flex; flex: 1; min-height: 0; }
body.cibler #grille [data-act="facettes"] { display: none; }
body.cibler #grille .carte:not(.nu) { box-shadow: var(--ombre-carte), inset 0 0 0 1.5px rgba(41, 98, 255, .22); }
body.cibler #grille .tuile { cursor: default; }
body.cibler #grille { padding-bottom: 92px; }
body.cibler #toast { bottom: 90px; }
.rail-btn .badge.bleu, .badge.bleu { background: var(--accent); }
.c-act .badge.dec { background: var(--accent); }
/* une carte : régler sa cible */
.pc { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-l { font: 800 10.5px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .07em; }
.pc-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pc-bloc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-bloc.droite { align-items: flex-end; text-align: right; }
.pc-nb { font: 300 40px/1 var(--police); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pc-nb .d { color: rgba(18, 21, 18, .38); }
.pc-nb .u { margin-left: 3px; font-size: .4em; font-weight: 600; letter-spacing: 0; color: var(--texte-2); }
.pc-st { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: #fff; font: 800 11px var(--police); font-style: normal; color: var(--texte-2); }
.pc-st.bon { color: var(--bon); } .pc-st.attention { color: #8F5D05; } .pc-st.alerte { color: #B02F36; }
.pc-cb { font: 800 17px var(--police); }
.pc-cb.eteinte { color: var(--texte-3); }
.pc-ecart { display: flex; flex-direction: column; gap: 5px; }
.pc-ecart-t { font: 600 12px var(--police); color: var(--texte-2); }
.pc-barre { position: relative; height: 18px; }
.pc-barre.vide { height: 0; }
.pc-piste { position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; }
.pc-c { position: absolute; top: 1px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: var(--encre); }
.pc-c.avant { background: var(--texte-3); opacity: .6; }
.pc-v { position: absolute; top: -4px; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--encre); }
.pc-dec { margin-top: auto; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px #fff; transition: background .25s, box-shadow .25s; }
.pc.change .pc-dec { background: var(--accent-pale); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pc-dec-t { display: flex; align-items: center; gap: 8px; min-height: 18px; min-width: 0; }
.pc-dec-t .pc-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-attente { padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 10px var(--police); font-style: normal; text-transform: none; letter-spacing: 0; }
.pc-garder { flex: none; margin-left: auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--texte-2); cursor: pointer; }
.pc-garder .ic { width: 13px; height: 13px; }
.pc-garder:hover { color: var(--encre); }
.pc-dec-b { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pc-step { flex: none; width: 150px; height: 38px; background: #fff; }
.pc-step.mini { width: 108px; height: 28px; padding: 2px; }
.pc-step.mini button { width: 24px; height: 24px; font-size: 15px; }
.pc-step.mini input { font-size: 13px; }
.pc-step input { text-align: center; }
.pc.change .pc-step input, .change .pc-step input, .tp.change .pc-step input { color: var(--accent-fonce); }
.pc-effet { min-width: 0; font: 600 12px/1.35 var(--police); color: var(--texte-2); }
.pc.change .pc-effet { color: #16306E; }
.pc-prevu { margin: 0; font: 600 11px var(--police); color: var(--texte-3); }
/* une carte par division : un tableau */
.pc-divs table { width: 100%; border-collapse: collapse; font: 600 12.5px var(--police); font-variant-numeric: tabular-nums; }
.pc-divs { overflow: auto; }
.pc-divs th, .pc-divs td { padding: 2px 6px; text-align: left; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.pc-divs thead th { font: 800 10px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .06em; }
.pc-divs tbody th { font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.pc-divs tbody th .pt { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.pc-divs tr.groupe th, .pc-divs tr.groupe td { background: rgba(255, 255, 255, .5); }
.pc-divs tr.change td, .pc-divs tr.change th { background: var(--accent-pale); }
.pc-v-t.bon { color: var(--bon); } .pc-v-t.attention { color: #8F5D05; } .pc-v-t.alerte { color: #B02F36; }
.pc-q { color: var(--texte-2); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.pc-divs td:last-child { display: flex; align-items: center; gap: 4px; }
.pc-suit, .pc-suit-vide { flex: none; width: 24px; height: 24px; }
.pc-suit { border: 0; border-radius: 50%; background: none; color: var(--texte-3); display: grid; place-items: center; cursor: pointer; }
.pc-suit:hover { background: #fff; color: var(--accent-fonce); }
.pc-suit .ic { width: 13px; height: 13px; }
/* le fil de la cible, mois par mois */
.pf { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-mois { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.pf-c { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 8px; border-radius: 12px; background: rgba(255, 255, 255, .62); border-top: 3px solid var(--marque); min-width: 0; }
.pf-c.bon { border-top-color: var(--bon); } .pf-c.attention { border-top-color: #D89A2B; } .pf-c.alerte { border-top-color: var(--alerte); }
.pf-c.futur { background: none; box-shadow: inset 0 0 0 1px var(--filet); border-top-color: transparent; }
.pf-c.neuve { background: var(--accent-pale); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pf-c.choisi { outline: 2px solid var(--encre); outline-offset: -2px; }
.pf-m { font: 700 10px var(--police); color: var(--texte-3); white-space: nowrap; }
.pf-c b { font: 800 13px var(--police); font-variant-numeric: tabular-nums; min-height: 16px; }
.pf-c i { font: 700 11px var(--police); font-style: normal; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.pf-c.neuve i { color: var(--accent-fonce); }
.pf-c i.eteinte { color: var(--texte-3); opacity: .6; text-decoration: line-through; text-decoration-thickness: 1px; }
.pf.etroit .pf-mois { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pf-note { margin: auto 0 0; font: 500 11.5px/1.45 var(--police); color: var(--texte-3); }
/* la Lecture devient le plan */
.pp { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.pp h4 { margin: -4px 0 0; font: 400 28px/1.1 var(--police); letter-spacing: -.03em; }
.pp-n { display: flex; gap: 8px; }
.pp-n div { flex: 1; padding: 10px 11px; border-radius: 16px; background: rgba(255, 255, 255, .62); }
.pp-n b { display: block; font: 300 32px/1 var(--police); letter-spacing: -.04em; }
.pp-n span { font: 700 11px var(--police); color: var(--texte-2); }
.pp-n .att { background: var(--accent); }
.pp-n .att b, .pp-n .att span { color: #fff; }
.pp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.pp-liste li { position: relative; padding: 8px 34px 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .8); }
.pp-liste b { display: block; font: 800 12.5px var(--police); }
.pp-liste span { font: 600 11.5px var(--police); color: var(--texte-2); }
.pp-liste strong { color: var(--accent-fonce); }
.pp-liste button { position: absolute; top: 8px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte-3); }
.pp-liste button:hover { background: #fff; color: var(--alerte); }
.pp-liste .ic { width: 13px; height: 13px; }
.pp-aide { margin: 0; font: 500 13px/1.5 var(--police); color: var(--texte-2); }
/* une tuile de la synthèse */
.tp { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tp-nb { font: 300 34px/1 var(--police); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.tp-nb .d { color: rgba(18, 21, 18, .38); }
.tp-c { font: 700 12px var(--police); color: var(--texte-2); }
.tp .pc-l { margin-top: auto; }
.tp .pc-step { width: 100%; }
.tp .cb-inter { align-self: flex-start; }
.tp.change .pc-step { box-shadow: 0 0 0 1.5px var(--accent); }
/* la barre du bas */
#planBarre { display: none; }
body.cibler #planBarre { position: fixed; left: calc(50% + 44px); bottom: 18px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 140px); padding: 7px 8px 7px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: var(--ombre-pop), inset 0 0 0 1.5px rgba(41, 98, 255, .35); backdrop-filter: blur(12px); animation: monteBarre .45s var(--ease); }
@keyframes monteBarre { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pb-t { display: inline-flex; align-items: center; gap: 6px; font: 800 13px var(--police); color: var(--accent-fonce); white-space: nowrap; }
.pb-t .ic { width: 17px; height: 17px; }
.pb-l { font: 700 12px var(--police); color: var(--texte-3); }
.pb-mois { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fond); }
.pb-mois button { height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: none; font: 700 12px var(--police); color: var(--texte-2); cursor: pointer; white-space: nowrap; }
.pb-mois button.on { background: var(--encre); color: #fff; }
.pb-motif { width: 210px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fond); font: 600 12.5px var(--police); }
.pb-motif:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.pb-n { font: 700 12px var(--police); color: var(--texte-2); white-space: nowrap; }
.pb-annuler { height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 700 12px var(--police); color: var(--texte-2); cursor: pointer; white-space: nowrap; }
.pb-annuler:disabled, .pb-ok:disabled { opacity: .4; cursor: default; }
.pb-ok { height: 40px; white-space: nowrap; }
.pb-fermer { width: 38px; height: 38px; }
@media screen and (max-width: 1360px) { .pb-motif { width: 150px; } .pb-l, .pb-annuler { display: none; } }

/* =============================================================================
   L'ESPACE NOTES ET DÉCISIONS
   ========================================================================== */
#espace { position: fixed; inset: 0; z-index: 92; display: none; place-items: center; pointer-events: none; }
#espace.on { display: grid; }
.es-boite { pointer-events: auto; width: min(1320px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px)); display: flex; flex-direction: column; padding: 20px 22px; border-radius: 30px;
  background: var(--carte); border: 1px solid #fff; box-shadow: var(--ombre-pop); animation: ouvreEspace .45s var(--ease); }
@keyframes ouvreEspace { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.es-tete { display: flex; align-items: center; gap: 14px; }
.es-titre { flex: 1; min-width: 0; }
.es-titre h2 { margin: 0; font: 400 30px/1.1 var(--police); letter-spacing: -.03em; }
.es-titre p { margin: 4px 0 0; font: 500 13px/1.4 var(--police); color: var(--texte-2); max-width: 760px; }
.es-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.es-col { min-height: 0; display: flex; flex-direction: column; padding: 14px 12px 12px 14px; border-radius: 22px; background: rgba(255, 255, 255, .55); }
.es-col.es-c-cours { background: linear-gradient(180deg, rgba(220, 229, 255, .8), rgba(220, 229, 255, .45)); }
.es-col > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.es-col h3 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font: 800 12px var(--police); color: var(--texte-2); text-transform: uppercase; letter-spacing: .08em; }
.es-col h3 i { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--encre); color: #fff; font: 800 11px/20px var(--police); font-style: normal; text-align: center; letter-spacing: 0; }
.es-col.es-c-cours h3 i { background: var(--accent); }
.es-plus { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; cursor: pointer; }
.es-plus .ic { width: 15px; height: 15px; }
.es-ajout { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; }
.es-ajout label { display: flex; flex-direction: column; gap: 4px; }
.es-ajout label span, .es-l { font: 800 10.5px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .07em; }
.es-ajout select, .es-ajout textarea, .es-champs input, .es-champs select { width: 100%; border: 0; border-radius: 10px; background: var(--fond); font: 600 13px var(--police); color: var(--encre); padding: 9px 10px; }
.es-ajout textarea { resize: vertical; }
.es-ajout select:focus, .es-ajout textarea:focus, .es-champs input:focus, .es-champs select:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.es-liste { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.es-vide { margin: 8px 4px; font: 600 12.5px/1.5 var(--police); color: var(--texte-3); }
.es-carte { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 18px; background: #fff; box-shadow: 0 10px 22px -18px rgba(18, 26, 20, .45); }
.es-carte.dec { box-shadow: inset 3px 0 0 var(--accent), 0 10px 22px -18px rgba(18, 26, 20, .45); }
.es-carte.faite { opacity: .82; box-shadow: inset 3px 0 0 var(--bon); }
.es-carte.retard { box-shadow: inset 3px 0 0 var(--alerte), 0 10px 22px -18px rgba(18, 26, 20, .45); }
.es-ou { display: flex; align-items: center; gap: 8px; font: 600 11px var(--police); color: var(--texte-3); }
.es-ou .c-ic { width: 28px; height: 28px; flex: none; }
.es-ou .c-ic .ic { width: 14px; height: 14px; }
.es-ou b { display: block; font: 800 12.5px var(--police); color: var(--encre); }
.es-txt { margin: 0; font: 600 14px/1.45 var(--police); }
.es-champs { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.es-champs label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.es-champs label span { font: 800 10px var(--police); color: var(--texte-3); text-transform: uppercase; letter-spacing: .07em; }
.es-suivi { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border-radius: 12px; background: var(--fond); }
.es-suivi p { margin: 0; font: 600 12.5px var(--police); color: var(--texte-2); }
.es-suivi p b { color: var(--encre); }
.es-suivi em { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #fff; font: 800 11px var(--police); font-style: normal; color: var(--texte-2); }
.es-suivi em.mieux { color: var(--bon); } .es-suivi em.moins { color: #B02F36; }
.es-st { align-self: flex-start; font: 800 11px var(--police); color: var(--texte-2); }
.es-st.bon { color: var(--bon); } .es-st.attention { color: #8F5D05; } .es-st.alerte { color: #B02F36; }
.es-retard { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: #F6C3BF; color: #7A1D22; font: 800 11px var(--police); }
.es-retard .ic { width: 12px; height: 12px; }
.es-fait { font: 700 11px var(--police); color: var(--bon); }
.es-act { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.es-act button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--fond); font: 700 12px var(--police); color: var(--texte-2); cursor: pointer; transition: background .2s, color .2s; }
.es-act button:hover { background: #E2E8E3; color: var(--encre); }
.es-act button .ic { width: 13px; height: 13px; }
.es-act .es-prim { background: var(--encre); color: #fff; }
.es-act .es-prim:hover { background: #000; color: #fff; }
.es-carte.dec .es-act .es-prim { background: var(--accent); }
.es-act .es-suppr { margin-left: auto; width: 30px; padding: 0; justify-content: center; background: none; }
.es-act .es-suppr:hover { background: #F6C3BF; color: #7A1D22; }
#tiroir .es-ouvrir { align-self: flex-start; margin-bottom: 6px; }
.notes li.dec { box-shadow: inset 3px 0 0 var(--accent); }
.notes li em { display: block; font: 800 10.5px var(--police); font-style: normal; color: var(--accent-fonce); text-transform: uppercase; letter-spacing: .06em; }
.notes .decide { position: absolute; top: 6px; right: 32px; width: 24px; height: 24px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte-3); }
.notes .decide:hover { background: #fff; color: var(--accent-fonce); }
.notes .decide .ic { width: 14px; height: 14px; }
.imp-notes em { font-style: normal; font-weight: 800; color: #1F4FD1; }
@media screen and (max-width: 1100px) { .es-cols { grid-template-columns: minmax(0, 1fr); overflow: auto; } .es-col { min-height: 260px; } }
.notes li:has(.decide) { padding-right: 60px; }

/* =============================================================================
   LES ÉCRANS PLUS PETITS : on garde la page sans défiler aussi longtemps que
   possible, puis on laisse défiler (tablette, téléphone)
   ========================================================================== */
@media screen and (max-width: 1560px) { .puce-info:not(.demo) { display: none; } }
@media screen and (max-width: 1600px) { #btnPresenter { width: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; } }
@media screen and (max-width: 1360px) {
  .th:not(.on) .lib { display: none; }
  .th:not(.on) { padding: 0 13px; }
  #titre { font-size: 36px; }
  #retour { display: none; }
  #btnRapport { width: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  /* les boutons des cartes se montrent au survol : le titre garde toute la largeur */
  .c-act { position: absolute; top: 14px; right: 14px; padding: 4px; border-radius: 999px; background: rgba(238, 242, 238, .92);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .25s var(--ease); z-index: 2; }
  .carte:hover .c-act, .carte:focus-within .c-act, .carte.a-notes .c-act { opacity: 1; transform: none; }
}
@media screen and (max-width: 1280px) {
  #btnPresenter { width: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .logo span { display: none; }
  .logo { width: auto; }
  #lecturePage { -webkit-line-clamp: 1; }
}
@media screen and (max-width: 1180px), screen and (max-height: 660px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100vh; grid-template-rows: var(--haut) auto auto; }
  #tetiere { flex-wrap: wrap; align-items: flex-start; }
  .commandes { width: min(100%, 760px); }
  #grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(320px, auto); grid-auto-flow: row dense; }
  #grille > .carte { grid-column: auto !important; grid-row: auto !important; }
  #grille > .type-frise, #grille > .type-pilules, #grille > .type-tuiles, #grille > .type-lecture { grid-column: 1 / -1 !important; }
  #grille > .type-lecture { min-height: 560px; }
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 300px; }
}
@media screen and (max-width: 760px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #rail { display: none; }
  #haut { padding: 0 14px; gap: 8px; }
  #themes { overflow-x: auto; scrollbar-width: none; }
  .puce-info, .avatar { display: none; }
  #tetiere, #grille { grid-column: 1; padding-left: 16px; padding-right: 16px; }
  #titre { font-size: 30px; white-space: normal; }
  #grille { grid-template-columns: minmax(0, 1fr); }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #btnRapport { font-size: 0; gap: 0; width: 42px; padding: 0; justify-content: center; }
  .mod-corps { grid-template-columns: minmax(0, 1fr); }
  .cb-corps { grid-template-columns: minmax(0, 1fr); }
  .mod-cible { overflow: auto; }
  .mod-cote { display: none; }
}

/* le mouvement réduit : rien ne glisse, rien ne clignote */
.calme *, .calme *::before, .calme *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}
.calme #attente .att-rond { animation-duration: .8s !important; }