/* NOVA Terrain — les composants (5-prototype/shell/index.html, « Composants NOVA.ui ») : mêmes classes, mêmes mesures.
   Propriété : équipe Téléphone. Les boutons de porte à 64 px, ‹ › à 56 px, le reste à 44 px au moins (§ 3.7). */
/* utilitaires de mise en page pour les écrans */
.pile { display: flex; flex-direction: column; gap: 12px; }
.pile-serree { display: flex; flex-direction: column; gap: 6px; }
.rangee { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rangee-fixe { display: flex; align-items: center; gap: 8px; }
.rangee > *, .rangee-fixe > * { min-width: 0; }
.pousse { margin-left: auto; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.t-titre { font-family: var(--f-titre); font-weight: 700; font-size: 24px; line-height: 1.1; }
.t-grand { font-family: var(--f-titre); font-weight: 800; font-size: 36px; line-height: 1; letter-spacing: -.005em; }
.t-chiffre { font-family: var(--f-titre); font-weight: 700; font-variant-numeric: tabular-nums; }
.t-petit { font-size: 14px; }
.t-mini { font-size: 12.5px; }
.t-gris { color: var(--gris); }
.t-gras { font-weight: 700; }
.t-centre { text-align: center; }
.t-maj { text-transform: uppercase; letter-spacing: .06em; }
.t-vert { color: var(--vert); } .t-ambre { color: var(--ambre-texte); } .t-ardoise { color: var(--ardoise); } .t-gris-ton { color: var(--gris); }
.t-accent { color: var(--accent-texte); } .t-sos { color: var(--sos); }
.separateur { height: 1px; background: var(--ligne); border: 0; margin: 4px 0; }
.etiquette-section { font-family: var(--f-titre); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin: 6px 2px -4px; }

/* bouton */
.nb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 16px;
  border: 2px solid transparent; border-radius: 12px; cursor: pointer; text-decoration: none; user-select: none; -webkit-user-select: none;
  font-family: var(--f-titre); font-weight: 700; font-size: 19px; letter-spacing: .02em; line-height: 1.1; text-align: center;
  transition: transform .06s, filter .12s; -webkit-tap-highlight-color: transparent; max-width: 100%;
}
.nb:active { transform: scale(.98); filter: brightness(.94); }
.nb svg { width: 22px; height: 22px; flex: none; }
.nb-sous { display: block; font-family: var(--f-texte); font-weight: 500; font-size: 13px; letter-spacing: 0; opacity: .85; text-transform: none; }
.nb-pile { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.nb--plein { width: 100%; }
.nb--porte { min-height: 64px; font-size: 20px; font-size: clamp(16px, 5cqi, 20px); text-transform: uppercase; letter-spacing: .02em; padding: 6px 6px; border-radius: 14px; hyphens: manual; }
.nb--grand { min-height: 56px; font-size: 21px; }
.nb--petit { min-height: 44px; min-width: 44px; font-size: 17px; padding: 4px 12px; border-radius: 10px; }
.nb--primaire { background: var(--accent); color: var(--sur-accent); }
.nb--secondaire { background: var(--surface); color: var(--encre); border-color: var(--encre); }
.nb--neutre { background: var(--surface-2); color: var(--encre); }
.nb--vert { background: var(--vert); color: #FFFFFF; }
:root[data-theme="dark"] .nb--vert { color: #0E161B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nb--vert { color: #0E161B; } }
.nb--sos { background: var(--sos); color: #FFFFFF; }
.nb--fantome { background: transparent; color: var(--accent-texte); padding-left: 8px; padding-right: 8px; }
.nb--contour { background: transparent; color: var(--accent-texte); border-color: var(--accent); }

/* carte (bloc) */
.nc {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; text-align: left; width: 100%; color: inherit;
}
.nc[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nc[role="button"]:active { background: var(--surface-2); }
.nc-tete { display: flex; align-items: flex-start; gap: 10px; }
.nc-titres { flex: 1; min-width: 0; }
.nc-titre { font-family: var(--f-titre); font-weight: 700; font-size: 20px; line-height: 1.15; }
.nc-sous { color: var(--gris); font-size: 14.5px; margin-top: 2px; }
.nc-chevron { flex: none; color: var(--gris); width: 22px; height: 22px; align-self: center; }
.nc-corps { display: flex; flex-direction: column; gap: 8px; }
.nc-pied { border-top: 1px solid var(--ligne); padding-top: 10px; margin-top: 2px; }
.nc--accent { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent), var(--ombre); }
.nc--vert { border-color: var(--vert); box-shadow: inset 4px 0 0 var(--vert), var(--ombre); }
.nc--ambre { border-color: var(--ambre); box-shadow: inset 4px 0 0 var(--ambre), var(--ombre); }
.nc--ardoise { box-shadow: inset 4px 0 0 var(--ardoise), var(--ombre); }
.nc--sos { border-color: var(--sos); box-shadow: inset 4px 0 0 var(--sos), var(--ombre); }
.nc--plat { box-shadow: none; }

/* liste */
.nl { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; }
.nl-ligne { border-top: 1px solid var(--ligne); }
.nl-ligne:first-child { border-top: 0; }
.nl-contenu {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 14px; width: 100%; text-align: left;
  border: 0; background: transparent; color: inherit; font: inherit;
}
.nl-contenu[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nl-contenu[role="button"]:active { background: var(--surface-2); }
.nl-gauche { flex: none; display: flex; align-items: center; }
.nl-textes { flex: 1; min-width: 0; }
.nl-titre { font-weight: 600; font-size: 16px; line-height: 1.25; }
.nl-sous { color: var(--gris); font-size: 14px; line-height: 1.3; margin-top: 1px; }
.nl-droite { flex: none; text-align: right; font-family: var(--f-titre); font-weight: 700; font-size: 17px; max-width: 45%; }
.nl-chevron { flex: none; width: 20px; height: 20px; color: var(--gris); }
.nl-ligne--sos .nl-titre { color: var(--sos); }
.nl-ligne--accent { box-shadow: inset 4px 0 0 var(--accent); }

/* jauge */
.nj { display: flex; flex-direction: column; gap: 6px; }
.nj-tete { display: flex; align-items: baseline; gap: 8px; }
.nj-libelle { font-family: var(--f-titre); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); flex: 1; min-width: 0; }
.nj-valeur { font-family: var(--f-titre); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nj-valeur b { font-size: 28px; font-weight: 800; }
.nj-piste { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); overflow: visible; }
.nj-rempli { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--gris-clair); }
.nj-proj { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(128, 144, 150, .35) 4px 7px); }
.nj-cible { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--encre); border-radius: 2px; }
.nj-cran { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--gris); opacity: .7; border-radius: 2px; }
.nj-phrase { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; color: var(--gris); }
.nj-phrase span:first-child { flex: 1; min-width: 0; }
.nj-mot { font-family: var(--f-titre); font-weight: 700; font-size: 15px; white-space: nowrap; }
.nj--vert .nj-rempli { background: var(--vert); } .nj--vert .nj-mot { color: var(--vert); }
.nj--ambre .nj-rempli { background: var(--ambre); } .nj--ambre .nj-mot { color: var(--ambre); }
.nj--ardoise .nj-rempli { background: var(--ardoise); } .nj--ardoise .nj-mot { color: var(--ardoise); }
.nj--gris .nj-mot { color: var(--gris); }

/* étoiles */
.ne { display: inline-flex; align-items: center; gap: 2px; }
.ne svg { width: var(--taille, 22px); height: var(--taille, 22px); }
.ne .pleine { fill: var(--etoile); stroke: var(--etoile); }
.ne .vide { fill: none; stroke: var(--gris-clair); }
.ne-legende { display: inline-flex; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--gris); }

/* avatar à anneau de rang */
.na { display: inline-block; flex: none; line-height: 0; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.na text { font-family: var(--f-titre); font-weight: 700; }

/* puce de statut en mots (C5) */
.np {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 8px; border-radius: 999px;
  font-weight: 600; font-size: 14px; line-height: 1.1; white-space: nowrap; background: var(--surface-2); color: var(--encre); max-width: 100%;
}
.np-symbole { font-size: 13px; line-height: 1; }
.np--vert { background: var(--vert-doux); color: var(--vert); }
.np--ambre { background: var(--ambre-doux); color: var(--ambre); }
.np--cyan { background: var(--cyan-doux); color: var(--cyan); }
.np--ardoise { background: var(--ardoise-doux); color: var(--ardoise); }
.np--gris { background: var(--surface-2); color: var(--gris); }
.np--encre { background: var(--encre); color: var(--fond); }
.np--bleu { background: #DCE9FB; color: #1D4F9C; }
:root[data-theme="dark"] .np--bleu { background: #172A44; color: #8EB8F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .np--bleu { background: #172A44; color: #8EB8F2; } }

/* statut de porte (pastille + mot) */
.ns { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; white-space: nowrap; max-width: 100%; }
.ns svg { width: 20px; height: 20px; flex: none; }
.ns span { overflow: hidden; text-overflow: ellipsis; }

/* bandeau des jauges */
.bd {
  display: block; width: 100%; text-align: left; cursor: pointer; border: 0; color: inherit; font: inherit;
  background: var(--surface); border-bottom: 1px solid var(--ligne); padding: 8px 12px 0; position: relative;
}
.bd:active { background: var(--surface-2); }
.bd-l1 { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.bd-chrono { margin-left: auto; font-family: var(--f-titre); font-size: 17px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 5px; }
.bd-chrono b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bd-chrono small { font-family: var(--f-texte); font-size: 13px; font-weight: 500; color: var(--gris); }
.bd-file { font-family: var(--f-titre); font-weight: 700; color: var(--ambre); white-space: nowrap; }
.bd-note { color: var(--gris); font-size: 14px; margin-left: auto; text-align: right; }
.bd-l2 { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; row-gap: 0; padding: 3px 0 7px; font-family: var(--f-titre); font-weight: 600; font-size: 17.5px; font-size: clamp(15px, 4.45cqi, 17.5px); line-height: 1.25; }
.bd-l2 > i { font-style: normal; color: var(--gris-clair); }
.bd-l2 b { font-weight: 800; font-size: 1.09em; font-variant-numeric: tabular-nums; }
.bd-m { white-space: nowrap; }
.bd-phrase { white-space: nowrap; color: var(--encre); }
.bd-barres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; }
.bd-barres span { background: var(--surface-2); position: relative; overflow: hidden; }
.bd-barres span i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gris-clair); }
.bd-barres .t-vert i { background: var(--vert); } .bd-barres .t-ambre i { background: var(--ambre); } .bd-barres .t-ardoise i { background: var(--ardoise); }
.bd .t-vert { color: var(--vert); } .bd .t-ambre { color: var(--ambre-texte); } .bd .t-ardoise { color: var(--ardoise); } .bd .t-gris { color: var(--encre); }

/* sous-onglets et segments */
.nso { display: flex; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.nso::-webkit-scrollbar { display: none; }
.nso button {
  flex: 1 0 auto; min-height: 44px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; color: var(--gris);
  font-family: var(--f-titre); font-weight: 700; font-size: 16px; white-space: nowrap;
}
.nso button[aria-selected="true"], .nso button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.nso--segments button { min-height: 48px; font-size: 17px; }

/* chiffre clé */
.nch { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.nch-valeur { font-family: var(--f-titre); font-weight: 800; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.nch-libelle { color: var(--gris); font-size: 13.5px; line-height: 1.25; }
/* trois tuiles dans une carte, sur un petit téléphone : on rogne le rembourrage, puis la taille, plutôt que de couper « présentations » en deux */
.grille-3 { container-type: inline-size; }
@container (max-width: 340px) { .grille-3 > .nch { padding-left: 7px; padding-right: 7px; } }
@container (max-width: 310px) { .grille-3 > .nch .nch-libelle { font-size: 12px; } .grille-3 > .nch .nch-valeur { font-size: 26px; } }

/* note, vide */
.nnote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--encre); font-size: 14.5px; }
.nnote--ambre { background: var(--ambre-doux); } .nnote--vert { background: var(--vert-doux); } .nnote--accent { background: var(--accent-doux); } .nnote--sos { background: var(--sos-doux); }
.nnote-icone { flex: none; font-size: 17px; line-height: 1.25; }
.nvide { padding: 28px 16px; text-align: center; color: var(--gris); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.nvide-titre { font-family: var(--f-titre); font-weight: 700; font-size: 22px; color: var(--encre); }
.nvide-code { font-family: var(--f-titre); font-weight: 700; font-size: 15px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--gris); }
.tr-rues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tr-rue { display: flex; gap: 10px; align-items: flex-start; }
.tr-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--vert); color: #FFFFFF; font-family: var(--f-titre); font-weight: 800; font-size: 15px; display: grid; place-items: center; margin-top: 1px; }
.tr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tr-t b { font-family: var(--f-titre); font-weight: 800; font-size: 19px; line-height: 1.15; }
.tr-t span { font-size: 14px; line-height: 1.3; }
.tr-mini { font-size: 13px; color: var(--gris); }
.tr-l { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; margin-top: 8px; }
.tr-l > span:first-child { flex: none; width: 24px; text-align: center; font-size: 18px; }
.tr-apercu { font-weight: 700; font-size: 13.5px; color: var(--ambre); margin-bottom: 6px; }
.tr-change { font-weight: 700; font-size: 14px; color: var(--accent-texte); margin-bottom: 6px; }
.tr-sr { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ambre-doux); border: 1px solid var(--ambre); font-size: 14.5px; line-height: 1.35; }
.tr-sr > span:first-child { flex: none; font-size: 18px; }
.tr-det { margin-top: 6px; }
.tr-det > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--accent-texte); list-style: none; }
.tr-det > summary::-webkit-details-marker { display: none; }
.tr-det > summary::before { content: '▸'; margin-right: 6px; }
.tr-det[open] > summary::before { content: '▾'; }
.tr-det ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.35; }
/* bouton d'action collé au-dessus de la barre du bas (« Je suis à l'auto », « Je commence ma journée ») */
.colle-bas { position: sticky; bottom: 0; z-index: 3; margin: 4px -16px -28px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--fond) 14px); }
.colle-bas .nb { box-shadow: 0 6px 18px rgba(21, 33, 42, .18); }
.colle-bas-note { font-size: 13px; color: var(--gris); text-align: center; margin-top: 6px; }

/* « Ta journée » : le score de l'éthique de travail (C24) — jamais de rouge */
.nsc { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--surface); }
.nsc-tete { display: flex; align-items: baseline; gap: 8px; }
.nsc-libelle { font-family: var(--f-titre); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); flex: 1; min-width: 0; }
.nsc-valeur { font-family: var(--f-titre); font-weight: 700; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nsc-valeur b { font-size: 34px; font-weight: 800; }
.nsc-piste { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); margin-right: 2px; }
.nsc-rempli { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--gris-clair); }
.nsc--vert .nsc-rempli { background: var(--vert); } .nsc--ambre .nsc-rempli { background: var(--ambre); } .nsc--ardoise .nsc-rempli { background: var(--ardoise); }
.nsc--vert .nsc-mot { color: var(--vert); } .nsc--ambre .nsc-mot { color: var(--ambre); } .nsc--ardoise .nsc-mot { color: var(--ardoise); }
.nsc-trait { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--gris); border-radius: 1px; }
.nsc-trait--100 { background: var(--encre); width: 3px; margin-left: -3px; }
.nsc-repere { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--surface); border: 2.5px solid var(--encre); transform: rotate(45deg); }
.nsc-echelle { position: relative; height: 14px; font-size: 11.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.nsc-echelle span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.nsc-echelle span:last-child { transform: translateX(-100%); }
.nsc-ligne { margin: 0; font-size: 14.5px; color: var(--gris); }
.nsc-ligne b { color: var(--encre); }
.nsc-mot { font-family: var(--f-titre); font-weight: 700; font-size: 15px; }
.nsc-losange { color: var(--encre); font-size: 12px; }
.nsc-monter { color: var(--encre); }
.nsc--sans .nsc-valeur { font-size: 15px; color: var(--gris); }
.nsc-cases { display: flex; flex-direction: column; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
.nsc-case { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-top: 1px solid var(--ligne); background: var(--surface); }
.nsc-case:first-child { border-top: 0; }
.nsc-case-i { width: 24px; text-align: center; flex-shrink: 0; }
.nsc-case-l { flex: 1; min-width: 0; font-weight: 600; display: flex; flex-direction: column; }
.nsc-case-l small { font-weight: 500; font-size: 13px; color: var(--gris); }
.nsc-case-p { font-family: var(--f-titre); font-weight: 700; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nsc-effort { margin: 6px 0 0; font-size: 14px; color: var(--gris); }
.nsc-effort b { color: var(--encre); }