/*
 * La feuille du Pilotage RME : la coquille commune, puis les trois vues reprises de
 * l'Atelier (taux de freinte, déclaration Ecomaison, valeur du stock et FAE), telles
 * qu'elles étaient dans `pwa/style.css` de l'Atelier RME 3.27.0 le 20/10/2026.
 */

@import url("coquille.css");

/* ======================= Pilotage : la vue « Taux de freinte » =======================
   Portée de la maquette validée le 07/10/2026 (version 3). 🔴 Ordinateur d'abord
   [William : *« Cette vue sera surtout utilisée sur l'ordinateur, plutôt que sur le
   téléphone »*] : c'est la SEULE vue qui sort de la colonne de 640 px sur grand écran,
   parce que trois graphiques côte à côte et un tableau de onze colonnes n'y tiennent pas.
   L'en-tête et le bandeau gardent leur colonne ; le téléphone reste lisible, sans plus.
   ⚠️ Les couleurs de la cible sont celles de la maquette, en jetons préfixés : `--alerte`
   existe déjà ici, en rouge, quand la maquette l'employait pour l'orange. Deux écarts au
   nom du contraste que l'Atelier tient (docs/04, « c'est le choix esthétique qui cède ») :
   le texte des pastilles d'état prend une teinte foncée de sa couleur (au-dessus de 4,5:1
   sur son fond pâle), et les graduations comme les lignes soldées prennent `--texte-doux`
   au lieu du gris clair de la maquette. */
.vue-freinte {
  --freinte-ok: #0CA30C;
  --freinte-ok-fond: #E1F4E1;
  --freinte-ok-texte: #0A6B0A;
  --freinte-attention: #C98500;
  --freinte-attention-fond: #FBEFD3;
  --freinte-attention-texte: #8A5B00;
  --freinte-mauvais: #D03B3B;
  --freinte-mauvais-fond: #FAE1E1;
  --freinte-mauvais-texte: #A82828;
  --freinte-confirmer: #6F5FC4;
  --freinte-muet: #86928C;
  --freinte-grille: #E6EBE8;
  --freinte-trait: #D8E0DC;
  --freinte-surface: #EAEFEC;
  /* La couleur du site, posée par `app.js` sur la carte, la puce ou la cellule du site. */
  --freinte-site: var(--gris-absent);
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
}

@media (min-width: 680px) {
  main.vue-freinte { max-width: 1240px; }
}

.freinte-etat {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--rayon);
  background: var(--bandeau);
  color: var(--bandeau-texte);
}

.freinte-etat.freinte-alerte {
  border-left: 4px solid var(--chantier);
  background: var(--chantier-fond);
  color: #7A4806;
}

.freinte-contenu { display: flex; flex-direction: column; gap: 28px; }

.freinte-reglages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: flex-end;
  padding: 10px 14px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.freinte-param { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.freinte-lib {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-weight: 600;
}
.freinte-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.freinte-puce-site {
  font: inherit;
  font-size: 14px;
  min-height: 36px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--freinte-trait);
  border-radius: 99px;
  background: var(--carte);
  color: var(--texte);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.freinte-puce-site i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--freinte-site);
}
.freinte-puce-site[aria-pressed="true"] {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: #fff;
}
.freinte-puce-site[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff; }

.vue-freinte .freinte-champ {
  font: inherit;
  font-size: 15px;
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid var(--freinte-trait);
  border-radius: 8px;
  background: var(--carte);
  color: var(--texte);
}
.vue-freinte input[type="number"].freinte-champ { width: 4.5em; }
/* Dans une colonne, un champ s'étirerait sur toute la largeur du bloc (date du stock). */
.freinte-param > .freinte-champ { align-self: flex-start; }
.freinte-profs { display: flex; flex-wrap: wrap; gap: 10px; }
.freinte-profs label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--texte-doux);
}

/* Tout se plie [William 08/10/2026 : *« Menus et sous menus doivent être pliables »*] :
   les trois sections, leurs sous-sections, et les sites du bloc 3. Même chevron que les
   volets de la fiche de pointage, le marqueur du navigateur retiré. Les sous-sections des
   blocs 2 et 3 portent leur numéro sur un bandeau de couleur [même jour : *« plus lisible
   avec la numérotation X.1 et un bandeau de couleur »*], le vert du bandeau de la charte,
   déjà celui des volets de constat, et le numéro en vert profond (blanc à 11:1). */
.freinte-section > summary,
.freinte-volet > summary,
.freinte-volet-site > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.freinte-section > summary::-webkit-details-marker,
.freinte-volet > summary::-webkit-details-marker,
.freinte-volet-site > summary::-webkit-details-marker { display: none; }
.freinte-section > summary::before,
.freinte-volet > summary::before,
.freinte-volet-site > summary::before {
  content: "▸";
  flex: 0 0 auto;
  width: 14px;
  color: var(--texte-doux);
}
.freinte-section[open] > summary::before,
.freinte-volet[open] > summary::before,
.freinte-volet-site[open] > summary::before { content: "▾"; }
.freinte-section > summary:focus-visible,
.freinte-volet > summary:focus-visible,
.freinte-volet-site > summary:focus-visible { outline: 2px solid var(--vert-vif); outline-offset: 2px; }

.freinte-bloc { min-width: 0; }
.freinte-section > summary { min-height: 44px; }
.freinte-section > summary::before { font-size: 20px; color: var(--vert-profond); }
.freinte-section > summary h2 {
  margin: 0;
  font-size: 20px;
  color: var(--vert-profond);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.freinte-section-corps { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.freinte-nb { font-size: 14px; font-weight: 500; color: var(--texte-doux); }
.freinte-pile { display: flex; flex-direction: column; gap: 14px; }

/* La carte : un volet (le bloc 1 par site, les sous-sections des blocs 2 et 3). Le corps
   porte la mise en page que portait la carte avant d'être pliable. */
.freinte-carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  min-width: 0;
}
.freinte-volet > summary { min-height: 48px; padding: 10px 16px; }
.freinte-volet-corps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 4px 16px 14px;
}
.freinte-bandeau > summary {
  background: var(--bandeau);
  border-left: 6px solid var(--vert-profond);
  padding-left: 12px;
}
.freinte-bandeau > summary::before { color: var(--vert-profond); font-size: 16px; }
.freinte-bandeau > summary h3 { color: var(--vert-profond); font-size: 17px; font-weight: 700; }
.freinte-bandeau > .freinte-volet-corps { padding-top: 12px; }
.freinte-numero {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--vert-profond);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Un site dans une sous-section du bloc 3 : un trait à sa couleur, sans carte de plus. */
.freinte-volet-site { border-top: 1px solid var(--freinte-trait); min-width: 0; }
.freinte-volet-site:first-child { border-top: 0; }
.freinte-volet-site > summary {
  min-height: 44px;
  padding: 8px 10px;
  border-left: 4px solid var(--freinte-site);
}
.freinte-volet-site > .freinte-volet-corps { padding: 4px 0 12px 6px; }
.freinte-volet-site > summary .freinte-pastille { flex: 0 0 auto; }
.freinte-carte h3,
.freinte-volet-site h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.freinte-pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--freinte-site);
  display: inline-block;
}
.freinte-sous { font-size: 13px; font-weight: 400; color: var(--texte-doux); }
.freinte-note,
.freinte-vide { margin: 0; padding: 6px 0; font-size: 14px; color: var(--texte-doux); }

/* La légende du bloc 1. */
.freinte-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--texte-doux);
}
.freinte-legende span { display: inline-flex; align-items: center; gap: 6px; }
.freinte-legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.freinte-puce-ok { background: var(--freinte-ok); }
.freinte-puce-attention { background: var(--freinte-attention); }
.freinte-puce-mauvais { background: var(--freinte-mauvais); }
.freinte-puce-neutre { background: var(--freinte-muet); }
.freinte-legende .freinte-puce-bandes {
  width: 20px;
  background: linear-gradient(90deg, rgba(12, 163, 12, .25) 50%, rgba(201, 133, 0, .22) 50%);
}
.freinte-puce-cadre { border: 2px dashed var(--freinte-confirmer); }
.freinte-puce-pale { background: var(--freinte-muet); opacity: .45; }

/* Les graphiques : une barre par période, de gauche à droite. */
.freinte-ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 22px; }
.freinte-graphe { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.freinte-graphe-titre { font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.freinte-graphe svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.freinte-grille { stroke: var(--freinte-grille); stroke-width: 1; }
.freinte-zero { stroke: var(--freinte-trait); stroke-width: 1; }
.freinte-graduation { fill: var(--texte-doux); font-size: 10px; font-variant-numeric: tabular-nums; }
.freinte-etiquette { fill: var(--texte-doux); font-size: 10.5px; }
.freinte-valeur { fill: var(--texte); font-size: 10.5px; font-weight: 600; }
.freinte-bande-ok { fill: var(--freinte-ok); opacity: .12; }
.freinte-bande-attention { fill: var(--freinte-attention); opacity: .10; }
.freinte-zone { fill: transparent; }
.freinte-barre { outline: none; }
.freinte-barre:focus-visible path { stroke: var(--vert-vif); stroke-width: 2; }
.freinte-en-cours path { opacity: .45; }
.freinte-trace-ok { fill: var(--freinte-ok); }
.freinte-trace-attention { fill: var(--freinte-attention); }
.freinte-trace-mauvais { fill: var(--freinte-mauvais); }
.freinte-trace-neutre { fill: var(--freinte-muet); }
.freinte-cadre {
  fill: none;
  stroke: var(--freinte-confirmer);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

/* Les tuiles des cumuls, bordées de la couleur de leur lecture. */
.freinte-cumuls { display: flex; flex-wrap: wrap; gap: 10px; }
.freinte-tuile {
  flex: 1 1 150px;
  min-width: 150px;
  padding: 10px 14px;
  border-radius: 10px;
  border-top: 3px solid var(--freinte-muet);
  background: var(--freinte-surface);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.freinte-tuile:focus-visible { outline: 2px solid var(--vert-vif); outline-offset: 2px; }
.freinte-bord-ok { border-top-color: var(--freinte-ok); }
.freinte-bord-attention { border-top-color: var(--freinte-attention); }
.freinte-bord-mauvais { border-top-color: var(--freinte-mauvais); }
.freinte-tuile-lib { font-size: 12px; font-weight: 600; color: var(--texte-doux); }
.freinte-tuile-val { font-size: 26px; font-weight: 600; line-height: 1.1; }
.freinte-pastille-etat {
  width: max-content;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: var(--freinte-surface);
  color: var(--texte-doux);
}
.freinte-pastille-etat.freinte-ok {
  background: var(--freinte-ok-fond);
  color: var(--freinte-ok-texte);
}
.freinte-pastille-etat.freinte-attention {
  background: var(--freinte-attention-fond);
  color: var(--freinte-attention-texte);
}
.freinte-pastille-etat.freinte-mauvais {
  background: var(--freinte-mauvais-fond);
  color: var(--freinte-mauvais-texte);
}

/* Les tableaux : ils défilent dans leur carte plutôt que d'élargir la page. */
.freinte-defil { overflow-x: auto; max-width: 100%; }
.freinte-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.freinte-table th,
.freinte-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--freinte-trait);
  text-align: left;
  vertical-align: top;
}
/* L'en-tête peut passer à la ligne (« Détenu pour autrui (t) ») : le tableau du stock porte
   jusqu'à onze colonnes, et un en-tête d'un seul tenant le faisait défiler sur un écran de
   bureau. Les nombres, eux, ne se coupent jamais. */
.freinte-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: bottom;
  color: var(--texte-doux);
}
.freinte-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.freinte-table .freinte-date,
.freinte-table .freinte-code { white-space: nowrap; font-variant-numeric: tabular-nums; }
.freinte-total td { font-weight: 600; border-top: 2px solid var(--freinte-trait); }
.freinte-solde td,
.freinte-solde td a { color: var(--texte-doux); }
.freinte-categorie {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--freinte-surface);
  color: var(--texte-doux);
}
.freinte-site { white-space: nowrap; }
.freinte-site i {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--freinte-site);
  display: inline-block;
}
.vue-freinte a { color: var(--vert-fonce); }
/* Un texte de l'analyse plus long qu'une ligne : sa première ligne, le reste d'un clic. */
.freinte-repli > summary { cursor: pointer; }
.freinte-repli > p { margin: 4px 0 0; }
.freinte-deplier {
  align-self: flex-start;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--vert-fonce);
  border-radius: 8px;
  background: var(--carte);
  color: var(--vert-fonce);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* La bulle : posée par le CSSOM (`left`, `top`), jamais par un style en ligne. */
.freinte-bulle {
  position: fixed;
  z-index: 20;
  max-width: 300px;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: var(--ombre);
  background: var(--texte);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}
.freinte-bulle b,
.freinte-bulle-titre { font-weight: 600; }
.freinte-bulle-lib { color: rgba(255, 255, 255, .78); }

/* ===================== Pilotage · la déclaration Ecomaison (bloc 18) =====================
   La vue reprend les classes de la freinte (`vue-freinte` sur son `main`) : cartes, tableaux,
   pastilles d'état, réglages. Ce qui suit ne porte que ce qu'elle a en propre : le bandeau de
   l'échéance, les gestes d'une déclaration, la correction motivée et la boîte de l'envoi. */
.ecomaison-echeance {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--rayon);
  border-left: 4px solid var(--chantier);
  background: var(--chantier-fond);
  color: #7A4806;
  font-weight: 600;
}
.ecomaison-echeance.ecomaison-echeance-depassee {
  border-left-color: var(--freinte-mauvais);
  background: var(--freinte-mauvais-fond);
  color: var(--freinte-mauvais-texte);
}
.ecomaison-preparation { justify-content: flex-end; }
.ecomaison-preparation .bouton-principal,
.ecomaison-actions .bouton-principal {
  width: auto;
  min-height: 44px;
  padding: 0 18px;
  font-size: 16px;
}
.ecomaison-preparation .bouton-principal[disabled],
.ecomaison-actions .bouton-principal[disabled] { opacity: .45; cursor: not-allowed; }
.ecomaison-manque { color: var(--freinte-attention-texte); }

/* Le bandeau d'un site : le sommaire de son volet, sur le vert des volets du Taux de freinte
   [William 08/10/2026 : « mettre en avant le bandeau »]. Le total y est la valeur forte. */
.ecomaison-tete {
  flex-wrap: wrap;
  gap: 8px 12px;
}
.ecomaison-tete h3 { margin: 0; }
.ecomaison-total {
  margin-left: auto;
  font-weight: 700;
  font-size: 17px;
  color: var(--vert-profond);
  font-variant-numeric: tabular-nums;
}
.ecomaison-alerte,
.ecomaison-message {
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.ecomaison-alerte {
  background: var(--freinte-attention-fond);
  color: var(--freinte-attention-texte);
}
.ecomaison-alerte-forte {
  background: var(--freinte-mauvais-fond);
  color: var(--freinte-mauvais-texte);
}
.ecomaison-message { background: var(--freinte-surface); color: var(--texte); }

/* La valeur retenue à la place du calcul : en gras, son motif sur la ligne d'en dessous. */
.freinte-table td.ecomaison-corrige { font-weight: 700; color: var(--freinte-confirmer); }
.freinte-table .ecomaison-motif td {
  padding-top: 0;
  font-size: 13px;
  color: var(--texte-doux);
}
.freinte-table td.ecomaison-action { width: 1%; white-space: nowrap; }

.ecomaison-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.ecomaison-formulaire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 6px 0;
}
.vue-freinte .ecomaison-formulaire input[type="number"].freinte-champ { width: 7em; }
.vue-freinte .ecomaison-motif-champ { flex: 1 1 220px; min-width: 0; }
.ecomaison-formulaire .ecomaison-message { flex-basis: 100%; }

.ecomaison-volet > summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--texte-doux);
}
.ecomaison-journal {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 14px;
}

/* La boîte de l'envoi : plus large que celle du quai, elle porte onze valeurs. */
.confirmation-boite.ecomaison-boite { max-width: 460px; max-height: 90vh; overflow-y: auto; }
.ecomaison-rappel { margin: 0 0 16px; }
.ecomaison-rappel th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--texte); }
/* Un texte assemblé se pose en lignes courtes, une idée par ligne (`lignesEcomaison`). */
.ecomaison-ligne { display: block; }
.ecomaison-borne a { color: inherit; text-decoration: underline; }

/* La valeur du stock et la FAE (Pilotage, 11/10/2026) : la mise en page de la freinte, plus
   les vignettes de la synthèse, le tableau société puis site, le sommaire et les montants
   négatifs. Ordinateur d'abord ; les tableaux défilent dans leur carte sur un téléphone. */
.valeur-tuiles { display: flex; flex-wrap: wrap; gap: 10px; }
.valeur-tuile { flex: 1 1 230px; border-top-color: var(--vert-profond); }
/* La pastille d'incomplétude d'une vignette reste dans sa carte et revient à la ligne [William
   15/10/2026] : `freinte-pastille-etat` prend la largeur de son texte, que la carte ne contient pas. */
.valeur-tuile .valeur-pastille-tuile {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  align-self: flex-start;
  white-space: normal;
  overflow-wrap: anywhere;
}
.vue-valeur .freinte-table .freinte-pastille-etat { white-space: nowrap; }
.valeur-principale { background: var(--carte); border: 1px solid var(--bordure); border-top: 3px solid var(--vert-profond); }
.valeur-tuile-tete { display: flex; flex-direction: column; }
.valeur-chiffres {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 6px 0 0;
  font-size: 14px;
}
.valeur-chiffres dt { color: var(--texte-doux); }
.valeur-chiffres dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.valeur-chiffres .valeur-fort { font-size: 18px; font-weight: 600; }
.valeur-chiffres .valeur-second { font-size: 13px; }
.valeur-neg { color: var(--freinte-mauvais-texte); }
.valeur-gris { color: var(--texte-doux); }
/* La valorisation se lit d'un tenant [William 15/10/2026] : la colonne prend la largeur de son
   texte ; sur téléphone, le tableau défile à l'horizontale. */
.freinte-table td.valeur-valorisation { white-space: nowrap; }
.valeur-recap,
.valeur-sommaire { padding: 12px 16px; }
.valeur-recap h2 { margin: 0 0 8px; font-size: 17px; }
.valeur-societe td { font-weight: 600; background: var(--freinte-surface); }
.valeur-retrait { padding-left: 14px; }
.valeur-sommaire { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.valeur-liste { margin: 0; padding-left: 22px; }
.valeur-lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--vert-fonce);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.valeur-titre { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.valeur-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.aide-survol { text-decoration: underline dotted; cursor: help; }
.valeur-actions .freinte-deplier[disabled] { opacity: .5; cursor: not-allowed; }
.valeur-passe p { margin: 0; }