/* La stratégie d'archivage (strategie.js) : la carte de Paramètres ›
   Réglages et la section « Score d'archivage » de la fiche. Reprise de
   maquettes/strategie/strategie.css ; toute couleur passe par une variable. */

/* La carte ouverte */
.sg-corps{grid-template-columns:minmax(0,1fr) 360px}
.sg-valeurs .t-paire b{white-space:nowrap}
.sg-champs{gap:16px}
.sg-mode{display:inline-flex;align-self:flex-start;padding:3px;gap:2px;background:var(--fond);border:1px solid var(--filet);border-radius:var(--r-btn)}
.sg-mode button{height:30px;padding:0 16px;border:1px solid transparent;border-radius:6px;background:none;
  font:500 13px var(--texte);color:var(--doux);cursor:pointer}
.sg-mode button:hover{color:var(--encre)}
.sg-mode button.on{background:var(--carte);border-color:var(--filet);color:var(--encre);box-shadow:0 1px 2px var(--ombre)}

/* Un groupe de conditions */
.sg-groupe{border:1px solid var(--filet);border-radius:10px;padding:12px 14px 14px;background:var(--carte)}
.sg-g-t{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:13px}
.sg-g-t b{font-weight:600}
.sg-g-n{color:var(--doux);font-variant-numeric:tabular-nums}
.sg-g-t .btn{margin-left:auto}
.sg-entetes,.sg-ligne{display:grid;grid-template-columns:28px minmax(150px,1.3fr) minmax(130px,1fr) minmax(170px,1.4fr) 92px 28px;
  gap:8px;align-items:center}
.sg-entetes{font-size:11.5px;color:var(--pale);padding:2px 0 4px}
.sg-ligne{padding:4px 0}
/* Sous « Dernière lecture » : la date n'est pas relevée partout (strategie.js, releve). */
.sg-releve{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:0 0 6px 36px;font-size:12px;line-height:1.35}
.sg-releve:empty{display:none}
.sg-releve span{color:var(--pale)}
.sg-releve b{font-weight:500;color:var(--doux)}
.sg-et{font:600 10.5px var(--texte);color:var(--pale);letter-spacing:.04em;text-align:center}
.sg-ligne select,.sg-ligne input,.sg-seuil input{height:34px;padding:0 10px;background:var(--champ);border:1px solid var(--filet);
  border-radius:var(--r-btn);font:13px var(--texte);color:var(--encre);width:100%;min-width:0}
.sg-ligne select:focus,.sg-ligne input:focus,.sg-seuil input:focus{outline:none;border-color:var(--a3);box-shadow:0 0 0 3px var(--vert-pale)}
.sg-ligne input.t-mono{font-family:var(--mono);font-size:12px}
.sg-v{display:flex;align-items:center;gap:6px;min-width:0}
.sg-v em,.sg-pts em{font-style:normal;color:var(--doux);font-size:12.5px;white-space:nowrap}
.sg-v input[type=number]{width:76px;flex:none;text-align:right}
.sg-v select{flex:0 0 auto;width:auto}
.sg-ch input{flex:1}
.sg-ch .btn{flex:none;height:34px}
.sg-fixe{font-size:13px;color:var(--encre);padding-left:2px}
.sg-pts{display:flex;align-items:center;gap:6px}
.sg-pts input{width:60px;flex:none;text-align:right}
.sg-x{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:6px;background:none;color:var(--pale);cursor:pointer}
.sg-x:hover{background:var(--survol-ligne);color:var(--encre)}
.sg-plus{margin-top:8px;gap:6px}
.sg-ou{display:flex;align-items:center;gap:10px;margin:-4px 0}
.sg-ou::before,.sg-ou::after{content:"";flex:1;border-top:1px dashed var(--filet-fort)}
.sg-ou span{font:600 10.5px var(--texte);letter-spacing:.06em;color:var(--doux);border:1px solid var(--filet);border-radius:999px;padding:3px 10px;background:var(--carte)}
.sg-ou-b{align-self:flex-start;margin-top:0}
.sg-seuil{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--filet2);padding-top:14px}
.sg-seuil>span:first-child{font-weight:600!important;color:var(--encre)!important}
.sg-seuil input{width:76px;text-align:right}

/* Le mode Durée légale */
.sg-legal{display:flex;flex-direction:column}
.sg-legal .sg-seuil{border-top:0;padding-top:0;margin-bottom:6px}
.sg-h3{font-size:12px;font-weight:600;color:var(--doux);margin:16px 0 4px}
.sg-durees .t-paire{align-items:center}

/* Les compteurs */
.sg-valeurs .t-paire b{font-variant-numeric:tabular-nums}
.sg-hist{position:relative;display:flex;align-items:flex-end;gap:3px;height:60px;margin-top:8px}
.sg-hist i{flex:1;background:var(--filet);border-radius:2px 2px 0 0}
.sg-hist i.on{background:var(--pale)}
.sg-hist-s{position:absolute;top:-4px;bottom:0;width:2px;margin-left:-1px;background:var(--encre)}
.sg-hist-a{display:flex;justify-content:space-between;font-size:11.5px;color:var(--pale);margin-top:5px}
/* Un compte en route : les chiffres d'avant restent, pâles. */
.sg-valeurs .t-paire b,.sg-hist{transition:opacity .2s}
.sg-calcul .t-paire b,.sg-calcul .sg-hist{opacity:.4}

/* La fiche : le score d'archivage */
.sg-carte-score .x-det-s.x-th{flex:none}
.sg-s-ent,.sg-s-l{display:grid;grid-template-columns:24px minmax(140px,1.1fr) minmax(160px,1.3fr) minmax(160px,1.6fr) 90px;gap:12px;align-items:center}
.sg-s-ent{font-size:11.5px;color:color-mix(in srgb,var(--th) var(--mix-libelle),var(--texte-fort));padding:4px 0 6px}
.sg-s-ent span:last-child,.sg-s-p{text-align:right}
.sg-s-g{border-radius:8px;padding:2px 10px 6px;margin:0 -10px}
.sg-s-g.meilleur{background:color-mix(in srgb,var(--carte) 70%,transparent)}
.sg-s-gt{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:8px 0 4px}
.sg-s-gt b{font-weight:600}
.sg-s-m{font-size:11.5px;font-weight:500;color:var(--a5);background:var(--vert-pale);border-radius:999px;padding:2px 8px}
.sg-s-tot{margin-left:auto;color:var(--doux)}
.sg-s-l{font-size:13px;padding:6px 0;border-top:1px solid color-mix(in srgb,var(--th) 14%,var(--carte))}
.sg-s-l small{display:none}
.sg-s-i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%}
.sg-s-l.oui .sg-s-i{background:var(--a4);color:var(--sur-encre)}
.sg-s-l.non .sg-s-i{background:var(--filet);color:var(--doux)}
.sg-s-l.non .sg-s-c,.sg-s-l.non .sg-s-p{color:var(--doux)}
.sg-s-o{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-s-o bdi.t-mono{display:block;direction:rtl;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-s-d{color:var(--doux)}
.sg-s-p{font-weight:500}
.sg-s-ou{font:600 10.5px var(--texte);letter-spacing:.06em;color:var(--doux);padding:6px 0 2px}
.sg-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin-top:10px;padding-top:6px;
  border-top:1px solid color-mix(in srgb,var(--th) 22%,var(--carte))}
.sg-res .t-paire{align-items:center;min-height:32px}
.sg-res .t-paire b{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.sg-cert{font-weight:500;color:var(--doux)}
.g-fi-k em.sg-barre{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--doux)}

@media(max-width:1100px){
  .sg-corps{grid-template-columns:minmax(0,1fr)}
  .sg-valeurs{border-left:0;border-top:1px solid var(--filet2)}
}
@media(max-width:900px){
  .sg-entetes{display:none}
  .sg-ligne{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px;grid-template-areas:"et et et" "c c x" "cmp v v" "pts pts pts";
    row-gap:8px;padding:10px 0;border-top:1px solid var(--filet2)}
  .sg-ligne:first-of-type{border-top:0}
  .sg-et{grid-area:et;text-align:left}
  .sg-v em{white-space:normal;line-height:1.2;min-width:0}
  .sg-ligne .sg-et:empty{display:none}
  .sg-releve{padding:0 0 10px;margin-top:-2px}
  .sg-c{grid-area:c}.sg-cmp{grid-area:cmp}.sg-ligne>.sg-v{grid-area:v}.sg-pts{grid-area:pts}.sg-x{grid-area:x}
  .sg-ligne:has(.sg-et:empty){grid-template-areas:"c c x" "cmp v v" "pts pts pts"}
  .sg-s-ent{display:none}
  .sg-s-l{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"i c p" ". d d" ". o o";row-gap:2px}
  .sg-s-i{grid-area:i}.sg-s-c{grid-area:c;font-weight:500}.sg-s-p{grid-area:p}.sg-s-d{grid-area:d}.sg-s-o{grid-area:o}
  .sg-s-gt{flex-wrap:wrap;row-gap:4px}.sg-s-m{white-space:nowrap}.sg-s-tot{flex-basis:100%;margin-left:0}
  .sg-s-l small{display:inline;color:var(--pale);margin-right:6px}
  .sg-res{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .sg-champs{padding:16px}
  .sg-groupe{padding:10px 12px 12px}
  .sg-mode{align-self:stretch}.sg-mode button{flex:1}
  .sg-g-t{flex-wrap:wrap}
  .pr-etape .in-pied{flex-wrap:wrap;padding:14px 16px}
  .pr-etape .in-pied .in-e{display:none}
  .pr-etape .in-pied .btn{flex:1 1 auto;justify-content:center}
  .sg-res .t-paire{flex-wrap:wrap}
  .sg-res .t-paire b{text-align:right}
  .g-fi-k b em.num{font-size:16px}
}