/* InstantLCAi, nouvelle version de l'application (proposition du 01.11.2026, refonte/PROPOSITION.md).
   Disposition et gestes de l'ACV produit de CarbonLab (barre du haut, en-tête de fiche avec le total en grand à
   droite, onglets soulignés, cartes, arbre), couleurs et police d'InstantLCAi (encre #183550, bleu #1e88e5,
   Plus Jakarta Sans). Clair et sombre ; les six étapes gardent les teintes du module analytique.
   Code écrit pour InstantLCAi : aucun fichier de CarbonLab n'est repris. */
/* En-tête commun au site et à l'application (03.11.2026) : géométrie dans /entete.css, couleurs du thème plus bas. */
@import url("/entete.css");

:root {
  color-scheme: light;
  --fond: #f3f8fd;
  --fond-image: radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.9), transparent 50%),
    radial-gradient(circle at 85% 0%, rgba(56, 189, 149, 0.10), transparent 55%),
    linear-gradient(135deg, #e8f3ff 0%, #f6f9fc 50%, #ebfbf4 100%);
  --barre: rgba(255, 255, 255, 0.82);
  --surface: #ffffff;
  --surface-2: #f5f9fd;
  --surface-3: #eaf2fa;
  --encre: #183550;
  --encre-2: #4d6680;
  --encre-3: #71879d;
  --trait: #dce7f2;
  --trait-fort: #c2d4e6;
  --bleu: #1e88e5;
  --bleu-fonce: #1669c1;
  --bleu-texte: #1565c0;
  --bleu-pale: #e7f1fc;
  --sur-bleu: #ffffff;
  --vert: #157f61;
  --vert-pale: #e2f5ee;
  --alerte: #8f5208;
  --alerte-pale: #fdf3e2;
  --alerte-trait: #f0cf98;
  --erreur: #b3261e;
  --erreur-pale: #fdeceb;
  --ombre: 0 1px 2px rgba(24, 53, 80, 0.05), 0 10px 28px -18px rgba(24, 53, 80, 0.28);
  --ombre-forte: 0 24px 60px -24px rgba(24, 53, 80, 0.45);
  --voile: rgba(16, 35, 54, 0.42);
  --mp: #e89712;
  --fab: #25aff3;
  --tr: #5661e1;
  --dis: #01bf87;
  --uti: #cd4f94;
  --fdv: #91a7c4;
  --t-facteur: #0f766e;
  --t-facteur-fond: #dcf5f1;
  --t-rapide: #1565c0;
  --t-rapide-fond: #e3effc;
  --t-iso: #6d28d9;
  --t-iso-fond: #eee8fd;
  --barre-a: #8fa6bd;
  --rayon: 18px;
  --rayon-petit: 10px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234d6680' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Mode sombre seulement sur choix explicite (bouton lune, data-theme="dark") : le mode clair est celui de base, même si le
   système est en sombre (demande d'Edouard du 05.11.2026). Le bloc @media (prefers-color-scheme: dark) qui suivait est retiré. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0c1724;
  --fond-image: radial-gradient(circle at 10% 0%, rgba(30, 136, 229, 0.10), transparent 50%),
    radial-gradient(circle at 90% 0%, rgba(20, 184, 166, 0.07), transparent 55%),
    linear-gradient(160deg, #0c1724 0%, #0e1a28 60%, #0b1820 100%);
  --barre: rgba(14, 26, 40, 0.86);
  --surface: #132131;
  --surface-2: #182a3d;
  --surface-3: #1d3349;
  --encre: #e5eef7;
  --encre-2: #aabdd0;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23aabdd0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --encre-3: #8299b0;
  --trait: #23384e;
  --trait-fort: #314d68;
  --bleu: #3d97ea;
  --bleu-fonce: #2b84d6;
  --bleu-texte: #8cc4f6;
  --bleu-pale: rgba(61, 151, 234, 0.16);
  --sur-bleu: #ffffff;
  --vert: #5ad3a6;
  --vert-pale: rgba(90, 211, 166, 0.14);
  --alerte: #f3c27a;
  --alerte-pale: rgba(243, 194, 122, 0.12);
  --alerte-trait: rgba(243, 194, 122, 0.35);
  --erreur: #ff8a80;
  --erreur-pale: rgba(255, 138, 128, 0.12);
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -20px rgba(0, 0, 0, 0.7);
  --ombre-forte: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --voile: rgba(2, 8, 15, 0.62);
  --t-facteur: #5eead4;
  --t-facteur-fond: rgba(20, 184, 166, 0.16);
  --t-rapide: #90c6f7;
  --t-rapide-fond: rgba(30, 136, 229, 0.18);
  --t-iso: #c4b5fd;
  --t-iso-fond: rgba(139, 92, 246, 0.2);
  --barre-a: #5b7690;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre);
  background-color: var(--fond);
  background-image: var(--fond-image);
  background-attachment: fixed;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.22; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--bleu-texte); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(30, 136, 229, 0.5); outline-offset: 2px; border-radius: 8px; }
.cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chiffre { font-variant-numeric: tabular-nums; }
.doux { color: var(--encre-2); }
.petit { font-size: 13px; color: var(--encre-2); }
.tres-petit { font-size: 12px; color: var(--encre-3); }
svg.ico { width: 16px; height: 16px; flex: none; stroke-width: 2; vertical-align: -3px; }
sub { font-size: 0.7em; vertical-align: -0.2em; line-height: 0; }

/* ------------------------------------------------------------------ barre du haut */
.barre {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; min-height: 60px;
  background: var(--barre); border-bottom: 1px solid var(--trait);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.marque { display: inline-flex; align-items: center; gap: 9px; color: var(--encre); text-decoration: none; font-weight: 700; font-size: 17px; }
.marque img { width: 30px; height: 27px; }
.marque b { color: var(--bleu); font-weight: 700; }
.barre-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.solde {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--surface);
  color: var(--encre); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap;
}
.solde:hover { border-color: var(--bleu); }
.solde svg.ico { color: var(--bleu); }
.btn-icone {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 10px; border: 1px solid var(--trait-fort); background: var(--surface);
  color: var(--encre-2); cursor: pointer; padding: 0;
}
.btn-icone:hover { color: var(--encre); border-color: var(--bleu); }
.compte-bouton {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--trait-fort); background: var(--bleu-pale); color: var(--bleu-texte);
  font-weight: 700; cursor: pointer; padding: 0;
}
.menu-compte {
  position: absolute; right: 16px; top: 58px; z-index: 45; min-width: 240px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-forte);
  padding: 8px;
}
.menu-compte p { padding: 8px 10px 10px; border-bottom: 1px solid var(--trait); margin-bottom: 6px; overflow-wrap: anywhere; }
.menu-compte a, .menu-compte button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; background: none;
  border-radius: 8px; color: var(--encre); text-decoration: none; cursor: pointer; text-align: left; font-size: 14px;
}
.menu-compte a:hover, .menu-compte button:hover { background: var(--surface-2); }

/* En-tête commun (03.11.2026) : la barre de l'application prend la géométrie de /entete.css (celle des pages
   publiques : logo, Accueil, Impact Engine, Tarifs, au pixel près) ; ici, seulement ce qui est propre à l'application :
   fond et trait du thème, couleurs des liens en clair et en sombre, menus ouverts sous les boutons. La barre du
   tableau de contrôle (.tdc-barre, sans la classe entete) garde les règles de .barre ci-dessus. */
.barre.entete {
  display: block; padding: 0; min-height: 0; gap: 0; z-index: 50;
  --entete-lien: var(--encre-2); --entete-lien-survol: var(--encre); --entete-actif: var(--bleu-texte);
  --entete-actif-fond: var(--bleu-pale); --entete-actif-trait: rgba(30, 136, 229, 0.45);
}
.barre.entete > .nav { position: relative; }
.barre.entete .menu-compte, .barre.entete .en-cours-liste { top: calc(100% - 8px); right: 32px; }
@media (max-width: 1023.98px) {
  .barre.entete .menu-compte, .barre.entete .en-cours-liste { right: 16px; }
}

/* Langue (05.11.2026) : le drapeau de la langue choisie, à droite de la barre comme sur le site, et la liste des quatre
   langues dessous (socle.js, App.choisirLangue). Le texte d'attente des pages reste caché le temps que le dictionnaire
   de la langue arrive (attribut posé par socle.js, retiré au démarrage de la page). */
.langue-bouton {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--trait-fort); background: var(--surface); cursor: pointer;
}
.langue-bouton:hover, .langue-bouton[aria-expanded="true"] { border-color: var(--bleu); }
.langue-bouton img, .menu-langue img { display: block; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.menu-langue {
  position: absolute; z-index: 45; min-width: 190px; padding: 8px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-forte);
}
.barre.entete .menu-langue { top: calc(100% - 8px); right: 32px; }
.menu-langue button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none;
  border-radius: 8px; color: var(--encre); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.menu-langue button:hover, .menu-langue button:focus-visible { background: var(--surface-2); }
.menu-langue button[aria-checked="true"] { font-weight: 700; color: var(--bleu-texte); }
.menu-langue button img { width: 22px; height: 22px; }
@media (max-width: 1023.98px) {
  .barre.entete .menu-langue { right: 16px; }
}
html[data-langue-attente] #contenu > .chargement { visibility: hidden; }
.menu-compte .aide-etroit { display: none; }
/* Les quatre liens du site (« What's next » depuis le 05.11.2026) dépassent de 6 px à 390 px en anglais : la rangée
   défile en elle-même plutôt que d'élargir la page. Mêmes places au pixel que sur le site (contrôlé par verifier_app.js). */
@media (max-width: 1023.98px) {
  .barre.entete .liens-site { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .barre.entete .liens-site::-webkit-scrollbar { display: none; }
}
/* Téléphone : le drapeau prend sa place dans la première ligne de l'en-tête (logo à gauche, boutons à droite) ; les
   boutons passent de 36 à 32 px et se resserrent pour que le logo reste entier à 390 px. */
@media (max-width: 480px) {
  .barre.entete .barre-droite { gap: 4px; }
  /* l'aide passe dans le menu du compte ; avec une analyse en cours, le solde garde son nombre sans l'icône */
  .barre.entete .barre-droite > [data-action="aide"] { display: none; }
  .barre.entete .barre-droite:has(.en-cours:not([hidden])) .solde svg { display: none; }
  .menu-compte .aide-etroit { display: flex; }
  .barre.entete .barre-droite .btn-icone, .barre.entete .langue-bouton, .barre.entete .compte-bouton,
  .barre.entete .barre-droite .en-cours { width: 32px; height: 32px; }
  .barre.entete .solde { height: 32px; padding: 0 8px; gap: 5px; }
  .barre.entete .langue-bouton img { width: 22px; height: 22px; }
}

.sous-barre { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--trait); }
.pilule {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 10px;
  border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre); text-decoration: none;
  font-weight: 600; font-size: 14px;
}
.pilule:hover { border-color: var(--bleu); }
.pilule[aria-current="page"] { background: var(--bleu-pale); border-color: rgba(30, 136, 229, 0.45); color: var(--bleu-texte); }

.page { max-width: 1320px; margin: 0 auto; padding: 28px 24px 96px; }
.page-etroite { max-width: 980px; }

/* ------------------------------------------------------------------ boutons et champs */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px;
  padding: 7px 14px; border-radius: 10px; border: 1px solid var(--trait-fort); background: var(--surface);
  color: var(--encre); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--bleu); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-plein { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.btn-plein:hover:not(:disabled) { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.btn-danger { color: var(--erreur); }
.btn-danger:hover:not(:disabled) { border-color: var(--erreur); }
.btn-danger-plein { background: var(--erreur); border-color: var(--erreur); color: #fff; }
.btn-lien { border: 0; background: none; padding: 4px 6px; min-height: 0; color: var(--bleu-texte); font-weight: 600; cursor: pointer; font-size: 14px; }
.btn-lien:hover { text-decoration: underline; }
.btn-petit { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn-long { white-space: normal; max-width: 100%; text-align: left; justify-content: flex-start; overflow-wrap: anywhere; }

.champ { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.champ input, .champ select, .champ textarea, .saisie {
  width: 100%; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); padding: 10px 12px;
  background-color: var(--surface); font-weight: 400; color: var(--encre);
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .saisie:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.18); }
.champ .aide { font-weight: 400; font-size: 13px; color: var(--encre-2); }
select.saisie, .champ select { padding-right: 32px; }
/* Menus déroulants dans la charte : chevron dessiné à la place de la flèche du système, mêmes bords, couleurs et
   survol que les champs. Là où le navigateur sait la dessiner (Chrome, Edge et Brave récents : appearance base-select),
   la liste qui s'ouvre suit aussi la charte ; ailleurs, elle reste celle du système. */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right 11px center;
  background-size: 12px 12px;
}
select:hover:not(:disabled) { border-color: var(--bleu); }
select:disabled { cursor: not-allowed; opacity: 0.6; }
select option { background-color: var(--surface); color: var(--encre); }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { background-image: none; align-items: center; gap: 10px; }
  select.saisie, .champ select { padding-right: 12px; }
  select::picker-icon {
    content: ""; width: 12px; height: 12px; flex: none; margin-inline-start: auto;
    background: var(--chevron) center / 12px 12px no-repeat; transition: rotate 0.15s ease;
  }
  .tableau select.saisie { padding-right: 10px; }
  select:open { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.18); }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) {
    border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--surface);
    color: var(--encre); box-shadow: var(--ombre-forte); padding: 6px; margin-block: 6px; min-width: anchor-size(width);
  }
  select option { padding: 8px 10px; border-radius: 8px; font-size: 14px; background-color: transparent; gap: 8px; }
  select option:hover, select option:focus-visible { background-color: var(--bleu-pale); color: var(--bleu-texte); outline: none; }
  select option:checked { font-weight: 600; color: var(--bleu-texte); }
  select option::checkmark { color: var(--bleu); }
}
@media (prefers-reduced-motion: reduce) { select::picker-icon { transition: none; } }

.message { border-radius: 12px; padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.message svg.ico { margin-top: 2px; }
.message-info { background: var(--bleu-pale); color: var(--encre); }
.message-alerte { background: var(--alerte-pale); border: 1px solid var(--alerte-trait); color: var(--encre); }
.message-alerte svg.ico { color: var(--alerte); }
.message-erreur { background: var(--erreur-pale); color: var(--encre); }
.message-erreur svg.ico { color: var(--erreur); }
.message-ok { background: var(--vert-pale); color: var(--encre); }
.message-ok svg.ico { color: var(--vert); }
.message p + p { margin-top: 4px; }
.texte-erreur { color: var(--erreur); font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------------------ cartes, pastilles */
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 22px; }
.carte + .carte { margin-top: 16px; }
.carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.carte-tete h2, .carte-tete h3 { font-size: 17px; }
.carte-tete .note { font-size: 13px; color: var(--encre-3); }

.type {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.type svg.ico { width: 13px; height: 13px; }
.type-facteur { color: var(--t-facteur); background: var(--t-facteur-fond); }
.type-rapide { color: var(--t-rapide); background: var(--t-rapide-fond); }
.type-iso { color: var(--t-iso); background: var(--t-iso-fond); }
.etiquette { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); white-space: nowrap; }
.etiquette-alerte { background: var(--alerte-pale); color: var(--alerte); }
.etiquette-ok { background: var(--vert-pale); color: var(--vert); }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

.vide { text-align: center; padding: 34px 18px; color: var(--encre-2); }
.vide h3 { color: var(--encre); font-size: 16px; margin-bottom: 6px; }
.vide .btn { margin-top: 14px; }
.chargement { padding: 28px; text-align: center; color: var(--encre-3); }

/* ------------------------------------------------------------------ connexion */
.connexion { max-width: 440px; margin: 48px auto; }
.connexion h1 { font-size: 24px; margin-bottom: 6px; }
.connexion form { display: grid; gap: 14px; margin-top: 18px; }
.connexion .btn-plein { min-height: 44px; }

/* ------------------------------------------------------------------ tableau de bord */
.accueil-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.accueil-tete h1 { font-size: clamp(26px, 3.4vw, 34px); }
.accueil-tete p { color: var(--encre-2); margin-top: 6px; }
.tuiles { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuile {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px;
}
.tuile:hover:not(.tuile-fermee) { border-color: var(--trait-fort); }
.tuile-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tuile-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.tuile-icone svg.ico { width: 22px; height: 22px; }
.tuile-facteur .tuile-icone { background: var(--t-facteur-fond); color: var(--t-facteur); }
.tuile-rapide .tuile-icone { background: var(--t-rapide-fond); color: var(--t-rapide); }
.tuile-iso .tuile-icone { background: var(--t-iso-fond); color: var(--t-iso); }
.prix { font-weight: 700; font-size: 14px; white-space: nowrap; text-align: right; }
.prix small { display: block; font-weight: 600; font-size: 12px; color: var(--t-iso); }
.tuile h3 { font-size: 18px; }
.tuile p { color: var(--encre-2); font-size: 14px; }
.tuile .btn { justify-self: start; }
.tuile-fermee { background: var(--surface-2); }
.tuile-fermee h3, .tuile-fermee > p { color: var(--encre-3); }
.raison { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--encre); background: var(--alerte-pale); border: 1px solid var(--alerte-trait); border-radius: 12px; padding: 9px 11px; }
.raison svg.ico { color: var(--alerte); margin-top: 2px; }
.raison a { font-weight: 600; }
.gratuit { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--encre-2); }
.gratuit svg.ico { color: var(--vert); }

.reprendre { margin-top: 30px; }
.reprendre h2, .historique h2 { font-size: 20px; }
.reprendre-liste { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.reprendre-liste a {
  display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--trait);
  background: var(--surface); color: var(--encre); text-decoration: none; box-shadow: var(--ombre);
}
.reprendre-liste a:hover { border-color: var(--bleu); }
.reprendre-liste b { overflow-wrap: anywhere; }

.historique { margin-top: 34px; }
.histo-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.histo-tete .petit { margin-left: auto; }
.histo-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre-2); font-weight: 600; font-size: 14px;
}
.filtre .nb { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--surface); border-color: var(--encre); }
.filtre[aria-pressed="true"] .nb { background: rgba(255, 255, 255, 0.18); color: inherit; }
.recherche-boite { position: relative; flex: 1 1 240px; min-width: 0; }
.recherche-boite svg.ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--encre-3); pointer-events: none; }
.recherche-boite input { padding-left: 36px; }
.tri { display: flex; gap: 6px; align-items: center; }
.tri select { width: auto; }

.histo-liste { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.histo-ligne, .histo-entete {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 34px 112px minmax(0, 1fr) 150px 110px 84px 84px;
  padding: 12px 16px; border-top: 1px solid var(--trait);
}
.histo-entete { border-top: 0; background: var(--surface-2); font-size: 13px; color: var(--encre-2); font-weight: 600; padding-top: 9px; padding-bottom: 9px; }
/* allemand (05.11.2026) : « Schnell-Ökobilanz » ne tient pas dans les 112 px de la colonne du type */
@media (min-width: 1100.02px) {
  html[lang="de"] .histo-ligne, html[lang="de"] .histo-entete { grid-template-columns: 34px 150px minmax(0, 1fr) 150px 110px 84px 84px; }
}
@media (min-width: 720.02px) and (max-width: 1100px) {
  html[lang="de"] .histo-ligne, html[lang="de"] .histo-entete { grid-template-columns: 30px 146px minmax(0, 1fr) 140px 96px 70px; }
}
.histo-ligne:hover { background: var(--surface-2); }
.histo-ligne.choisie { background: var(--bleu-pale); }
.histo-ligne input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bleu); cursor: pointer; }
.histo-nom { min-width: 0; }
.histo-nom a { color: var(--encre); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.histo-nom a:hover { color: var(--bleu-texte); text-decoration: underline; }
.histo-nom .petit { display: block; overflow-wrap: anywhere; }
.copie-de { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--encre-2); margin-top: 2px; }
.copie-de svg.ico { width: 13px; height: 13px; }
.histo-total { text-align: right; font-weight: 700; white-space: nowrap; }
.histo-total small { display: block; font-weight: 500; font-size: 12px; color: var(--encre-3); white-space: normal; }
.histo-date, .histo-credits, .histo-versions { font-size: 13px; color: var(--encre-2); white-space: nowrap; text-align: right; }
.histo-vide { padding: 36px 18px; text-align: center; color: var(--encre-2); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--encre-2); }
.pagination div { display: flex; gap: 8px; }

.barre-comparer {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 35;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); padding: 10px 12px 10px 18px; border-radius: 16px;
  background: var(--encre); color: var(--surface); box-shadow: var(--ombre-forte); font-size: 14px; font-weight: 600;
}
.barre-comparer .btn { background: var(--surface); color: var(--encre); border-color: var(--surface); }
.barre-comparer .btn-lien { color: inherit; opacity: 0.85; }

/* ------------------------------------------------------------------ fiche : en-tête */
.fiche-tete { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.fiche-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fiche-titre h1 { font-size: clamp(25px, 3.4vw, 36px); overflow-wrap: anywhere; min-width: 0; }
.renommer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; }
.renommer input { flex: 1 1 280px; min-width: 0; font-size: 22px; font-weight: 700; border: 1px solid var(--bleu); border-radius: 12px; padding: 6px 12px; background: var(--surface); }
.fiche-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 14px; color: var(--encre-2); }
.fiche-meta b { color: var(--encre); font-weight: 600; }
.fiche-desc { margin-top: 8px; color: var(--encre-2); max-width: 80ch; font-size: 14px; }
.fiche-source { margin-top: 8px; font-size: 14px; }
.fiche-total { text-align: right; }
.fiche-total .valeur { font-size: clamp(38px, 5.4vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.fiche-total .unite { font-size: 14px; color: var(--encre-2); margin-top: 6px; max-width: 34ch; margin-left: auto; }
.fiche-total .etiquette { margin-top: 8px; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.menu-export { position: relative; }
.menu-export .menu-liste {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre-forte);
}
.menu-liste button { display: flex; gap: 9px; align-items: center; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 14px; }
.menu-liste button:hover { background: var(--surface-2); }

.enregistrement {
  position: sticky; top: 60px; z-index: 25; margin-top: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 14px; background: var(--alerte-pale); border: 1px solid var(--alerte-trait);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.enregistrement .etat { font-weight: 600; font-size: 14px; }
.enregistrement input { flex: 1 1 240px; min-width: 0; padding: 8px 10px; }
.enregistrement.propre { background: var(--surface); border-color: var(--trait); }

.onglets { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--trait); overflow-x: auto; scrollbar-width: thin; }
.onglet {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border: 0; background: none; cursor: pointer;
  color: var(--encre-2); font-weight: 600; font-size: 15px; border-bottom: 3px solid transparent; white-space: nowrap; margin-bottom: -1px;
}
.onglet:hover { color: var(--encre); }
.onglet[aria-selected="true"] { color: var(--bleu-texte); border-bottom-color: var(--bleu); }
.onglet .nb { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); }
.onglet .nb-alerte { background: var(--alerte-pale); color: var(--alerte); }
.vue { margin-top: 18px; }

/* ------------------------------------------------------------------ synthèse */
.cycle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.cycle::before { content: ""; position: absolute; left: 8%; right: 8%; top: 30px; border-top: 2px solid var(--trait); }
.cycle-etape { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center; padding: 0 4px; }
.cycle-etape .num { font-size: 11px; color: var(--encre-3); font-weight: 600; letter-spacing: 0.04em; }
.cycle-etape .rond { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; box-shadow: 0 0 0 5px var(--surface); }
.cycle-etape .rond svg.ico { width: 16px; height: 16px; }
.cycle-etape .rond.zero { opacity: 0.4; }
.cycle-etape b { font-size: 13px; margin-top: 4px; }
.cycle-etape .kg { font-weight: 700; font-size: 15px; }
.cycle-etape .pct { font-size: 12px; color: var(--encre-3); }

.repartition { display: grid; gap: 10px; }
.rep-ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr) 160px; gap: 12px; align-items: center; font-size: 14px; }
.rep-nom { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rep-piste { height: 12px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.rep-piste span { display: block; height: 100%; border-radius: 6px; min-width: 2px; transition: width 0.25s ease; }
.rep-val { text-align: right; white-space: nowrap; }
.rep-val small { color: var(--encre-3); margin-left: 6px; }

/* Répartition des réponses d'une ACV rapide : courbe de Gauss en SVG étiré, points et repères en HTML pour garder
   des ronds ronds et un texte lisible à toutes les largeurs. */
.gauss > .petit { margin-bottom: 12px; }
.gauss-zone { position: relative; height: 180px; }
.gauss-zone svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gauss .g-2s { fill: var(--bleu); opacity: 0.10; }
.gauss .g-1s { fill: var(--bleu); opacity: 0.20; }
.gauss .g-courbe { fill: none; stroke: var(--bleu); stroke-width: 2.5; stroke-linejoin: round; }
.gauss .g-moy { stroke: var(--encre); stroke-width: 2; }
.gauss .g-sig { stroke: var(--encre-3); stroke-width: 1.25; stroke-dasharray: 5 5; }
.gauss .g-axe { stroke: var(--trait-fort); stroke-width: 1; }
.g-pt { position: absolute; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--t-rapide); box-shadow: 0 0 0 1.5px var(--surface); }
.gauss-facteur .g-pt { background: var(--t-facteur); }
.gauss-axe { position: relative; height: 22px; margin-top: 4px; }
.g-etiq { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--encre-3); white-space: nowrap; }
.g-etiq.g-fort { color: var(--encre); font-weight: 600; }
.gauss-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 14px 0 10px; }
.gauss-chiffres dt { font-size: 12px; color: var(--encre-3); }
.gauss-chiffres dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }

.deux-colonnes { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; margin-top: 16px; }
.deux-colonnes > .carte, .deux-colonnes > div > .carte:first-child { margin-top: 0; }
.deux-colonnes + .carte { margin-top: 16px; }
.carte h2 + p, .carte h2 + ul { margin-top: 8px; }
.syn-grille { display: grid; gap: 16px; margin-top: 16px; align-items: start; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr; grid-template-areas: "rep points" "cadre points" "source points"; }
.syn-grille > .carte { margin-top: 0; }
.syn-rep { grid-area: rep; } .syn-points { grid-area: points; } .syn-cadre { grid-area: cadre; } .syn-source { grid-area: source; }
.liste-simple { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.liste-simple li span { color: var(--encre-2); }
.points { display: grid; gap: 10px; }
.point { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; }
.point svg.ico { margin-top: 2px; }
.point-alerte svg.ico { color: var(--alerte); }
.point-ok svg.ico { color: var(--vert); }
.point-erreur svg.ico { color: var(--erreur); }
.point ul { margin: 4px 0 0; padding-left: 18px; color: var(--encre-2); }
.point li + li { margin-top: 2px; }

.facteur-grand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.facteur-grand .valeur { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.grille-infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin-top: 16px; }
.grille-infos dt { font-size: 13px; color: var(--encre-3); font-weight: 600; }
.grille-infos dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ tableaux */
.tableau-cadre { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-size: 13px; font-weight: 600; color: var(--encre-2); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 10px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .num { text-align: right; white-space: nowrap; }
.tableau tr.groupe td { background: var(--surface-2); font-weight: 700; }
.tableau input.saisie { width: 120px; padding: 6px 8px; text-align: right; }
.tableau input.saisie[aria-invalid="true"], .champ-valeur[aria-invalid="true"] { border-color: var(--erreur); background: var(--erreur-pale); }
.tableau select.saisie { width: auto; padding: 5px 28px 5px 8px; font-size: 14px; }
.lien-element { border: 0; background: none; padding: 0; color: var(--bleu-texte); cursor: pointer; font-size: 13px; font-weight: 600; text-align: left; }
.lien-element:hover { text-decoration: underline; }
.tableau-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.origine { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 9px; border: 1px solid; white-space: nowrap; }
.origine-fichier { color: var(--bleu-texte); border-color: rgba(30, 136, 229, 0.4); background: var(--bleu-pale); }
.origine-ia { color: var(--encre-2); border-color: var(--trait-fort); background: var(--surface-2); }
.origine-utilisateur { color: var(--vert); border-color: rgba(21, 127, 97, 0.4); background: var(--vert-pale); }
.confiance { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.confiance i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; }
.confiance-haute { color: var(--vert); }
.confiance-haute i { background: currentColor; }
.confiance-moyenne { color: var(--bleu-texte); }
.confiance-moyenne i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.confiance-faible { color: var(--alerte); }
.influence { display: grid; grid-template-columns: 64px auto; gap: 8px; align-items: center; white-space: nowrap; }
.influence-piste { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.influence-piste span { display: block; height: 100%; background: var(--bleu); }

/* ------------------------------------------------------------------ arbre */
.arbre-bascule { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 10px; overflow: hidden; }
.arbre-bascule button { border: 0; background: var(--surface); padding: 6px 12px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--encre-2); }
.arbre-bascule button[aria-pressed="true"] { background: var(--bleu-pale); color: var(--bleu-texte); }
.arbre-defile { overflow-x: auto; padding-bottom: 6px; }
.arbre-racine {
  width: min(340px, 100%); margin: 0 auto; padding: 14px 18px; text-align: center; border-radius: 16px;
  border: 2px solid var(--bleu); background: var(--bleu-pale); cursor: default;
}
.arbre-racine .nom { font-weight: 700; overflow-wrap: anywhere; }
.arbre-racine .kg { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.arbre-racine .kg small { font-size: 13px; font-weight: 500; color: var(--encre-2); margin-left: 4px; letter-spacing: 0; }
.frise { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.frise span { height: 100%; min-width: 3px; border-radius: 3px; }
.arbre-racine .frise { margin-top: 10px; }
.arbre-colonnes { display: grid; grid-template-columns: repeat(6, minmax(168px, 1fr)); gap: 12px; position: relative; padding-top: 30px; margin-top: 0; }
.arbre-colonnes::before { content: ""; position: absolute; top: 14px; left: calc(100% / 12); right: calc(100% / 12); border-top: 2px solid var(--trait-fort); }
.arbre-lien { width: 2px; height: 16px; background: var(--trait-fort); margin: 0 auto; }
.colonne { position: relative; min-width: 0; }
.colonne::before { content: ""; position: absolute; top: -16px; left: 50%; height: 16px; border-left: 2px solid var(--trait-fort); }
.etape-boite { border: 1px solid var(--trait); border-top: 4px solid var(--c); border-radius: 14px; background: var(--surface); padding: 11px 12px 10px; }
.etape-boite .haut { display: flex; align-items: center; gap: 9px; }
.etape-boite .rond { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; flex: none; }
.etape-boite .rond svg.ico { width: 15px; height: 15px; }
.etape-boite b { font-size: 14px; line-height: 1.2; display: block; }
.etape-boite .kg { font-weight: 700; font-size: 16px; }
.etape-boite .kg small { font-size: 12px; font-weight: 500; color: var(--encre-2); }
.etape-boite .ligne-pct { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; font-weight: 700; }
.mini-piste { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.mini-piste span { display: block; height: 100%; background: var(--c); border-radius: 4px; }
.etape-boite .nb-lignes { font-size: 12px; color: var(--encre-3); margin-top: 4px; }
.flux-liste { list-style: none; margin: 8px 0 0 12px; padding: 0 0 0 12px; border-left: 2px solid var(--trait-fort); display: grid; gap: 6px; }
.flux-liste li { position: relative; }
.flux-liste li::before { content: ""; position: absolute; left: -12px; top: 20px; width: 10px; border-top: 2px solid var(--trait-fort); }
.flux-carte {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer; color: var(--encre);
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--trait); border-left: 4px solid var(--c); background: var(--surface-2);
}
.flux-carte:hover { border-color: var(--trait-fort); border-left-color: var(--c); background: var(--surface); }
.flux-carte[aria-current="true"] { box-shadow: 0 0 0 2px var(--bleu); background: var(--surface); }
.flux-carte:disabled { cursor: default; }
.flux-carte .nom { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.flux-carte .bas { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--encre-2); }
.flux-carte .bas b { color: var(--encre); white-space: nowrap; }
.flux-carte .bas b.alerte, .flux-carte .alerte { color: var(--alerte); font-weight: 600; }
.flux-carte .bas b.erreur, .flux-carte .erreur { color: var(--erreur); font-weight: 600; }
.colonne-vide { font-size: 12px; color: var(--encre-3); margin: 8px 0 0 14px; }

.genealogie { display: inline-block; min-width: 100%; text-align: center; padding-top: 8px; }
.genealogie ul { display: flex; justify-content: center; margin: 0; padding: 22px 0 0; position: relative; list-style: none; }
.genealogie li { position: relative; padding: 22px 6px 0; text-align: center; }
.genealogie > ul { padding-top: 0; }
.genealogie > ul > li { padding-top: 0; }
.genealogie li::before, .genealogie li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid var(--trait-fort); }
.genealogie li::after { right: auto; left: 50%; border-left: 2px solid var(--trait-fort); }
.genealogie li:only-child::before, .genealogie li:only-child::after { display: none; }
.genealogie li:only-child { padding-top: 0; }
.genealogie li:first-child::before, .genealogie li:last-child::after { border: 0; }
.genealogie li:last-child::before { border-right: 2px solid var(--trait-fort); border-radius: 0 8px 0 0; }
.genealogie li:first-child::after { border-radius: 8px 0 0 0; }
.genealogie > ul > li::before, .genealogie > ul > li::after { display: none; }
.genealogie ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid var(--trait-fort); }
.g-boite { display: inline-block; width: 196px; vertical-align: top; text-align: left; }
.g-noeud {
  display: grid; gap: 3px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre);
}
.g-noeud:hover { border-color: var(--trait-fort); }
.g-noeud[aria-current="true"] { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu) inset; }
.g-noeud .nom { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.g-noeud .sorte { font-size: 12px; color: var(--encre-3); font-weight: 600; }
.g-noeud .kg { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
.g-noeud .kg span { color: var(--encre-3); font-weight: 600; }
.g-racine .g-noeud { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.g-racine .g-noeud .sorte, .g-racine .g-noeud .kg span { color: inherit; opacity: 0.75; }
.g-flux { margin-top: 4px; display: grid; gap: 3px; }
.g-groupe { display: inline-grid; gap: 2px; padding: 7px 14px; border-radius: 999px; border: 2px dashed var(--trait-fort); background: var(--surface); font-size: 13px; }

/* ------------------------------------------------------------------ panneau d'édition (tiroir) */
.tiroir-voile { position: fixed; inset: 0; z-index: 50; background: var(--voile); }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; width: min(480px, 100vw);
  display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--trait); box-shadow: var(--ombre-forte);
}
.tiroir-tete { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--trait); }
.tiroir-tete h2 { font-size: 18px; overflow-wrap: anywhere; }
.tiroir-tete .btn-icone { margin-left: auto; }
.tiroir-corps { flex: 1; overflow-y: auto; padding: 16px 18px 28px; display: grid; gap: 18px; align-content: start; }
.tiroir-corps h3 { font-size: 15px; margin-bottom: 8px; }
.tiroir-pied { padding: 12px 18px; border-top: 1px solid var(--trait); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; }
.param { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 6px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); }
.param:first-of-type { border-top: 0; }
.param-nom { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.param-val { display: flex; align-items: center; gap: 6px; }
.param-val input { width: 100%; min-width: 0; padding: 6px 8px; text-align: right; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--surface); }
.param-val .u { font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.param-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.param-meta select { border: 1px solid var(--trait); border-radius: 8px; padding: 2px 24px 2px 8px; font-size: 13px; background-color: var(--surface); background-position: right 7px center; background-size: 10px 10px; }
@supports (appearance: base-select) { .param-meta select { padding-right: 8px; gap: 6px; } }
.param-just { grid-column: 1 / -1; width: 100%; font-size: 13px; color: var(--encre-2); border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 4px 6px; resize: vertical; min-height: 30px; }
.param-just:hover, .param-just:focus { border-color: var(--trait); background: var(--surface-2); color: var(--encre); }
.flux-bloc { border: 1px solid var(--trait); border-left: 5px solid var(--c); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.flux-bloc.actif { box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.4); }
.flux-bloc .tete { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flux-bloc .tete b { flex: 1 1 160px; overflow-wrap: anywhere; }
.flux-bloc label { font-size: 13px; font-weight: 600; color: var(--encre-2); display: grid; gap: 4px; }
.flux-bloc input.formule { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; padding: 7px 9px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--surface); }
.flux-bloc .res { font-size: 13px; color: var(--encre-2); }
.flux-bloc .err { font-size: 13px; color: var(--erreur); font-weight: 600; }
.facteur-court { font-size: 13px; display: grid; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.facteur-court b { overflow-wrap: anywhere; }
.facteur-court .perso { color: var(--vert); font-weight: 700; }
.flux-bloc .bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.reprises { font-size: 13px; color: var(--encre-2); }
.reprises button { border: 0; background: var(--bleu-pale); color: var(--encre); border-radius: 999px; padding: 2px 9px; margin: 3px 4px 0 0; cursor: pointer; font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------------ fenêtres */
.modale { position: fixed; inset: 0; z-index: 60; background: var(--voile); display: grid; place-items: center; padding: 16px; }
.modale-boite { background: var(--surface); border-radius: 18px; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 22px; box-shadow: var(--ombre-forte); border: 1px solid var(--trait); }
.modale-petite { width: min(460px, 100%); }
.modale-tete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.modale-tete h2 { font-size: 19px; }
.modale-tete p { margin-top: 4px; color: var(--encre-2); font-size: 14px; }
.modale-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.liste-choix { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste-choix li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; border: 1px solid var(--trait); border-radius: 12px; padding: 9px 11px; }
.liste-choix li.courant { border-color: var(--bleu); background: var(--bleu-pale); }
.liste-choix .lib { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.liste-choix .meta { grid-column: 1; font-size: 12px; color: var(--encre-2); }
.liste-choix .btn { grid-column: 2; grid-row: 1 / span 2; }
.modale-boite h3 { font-size: 14px; margin: 16px 0 8px; }
.perso { margin-top: 16px; border-top: 1px solid var(--trait); padding-top: 12px; }
.perso summary { cursor: pointer; font-weight: 600; }
.perso-champs { display: grid; gap: 10px; margin-top: 10px; grid-template-columns: 2fr 1fr 1.5fr; align-items: end; }

.annonces { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); pointer-events: none; }
.annonce { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; background: var(--encre); color: var(--surface); box-shadow: var(--ombre-forte); font-size: 14px; font-weight: 600; }
.annonce svg.ico { margin-top: 2px; }
.annonce-erreur { background: var(--erreur); color: #fff; }

.secours { margin-top: 28px; font-size: 13px; }

/* ------------------------------------------------------------------ nouvelle analyse */
.choix-type { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 20px; }
.choix-type a {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--trait-fort); background: var(--surface);
  color: var(--encre); text-decoration: none;
}
.choix-type a:hover { border-color: var(--bleu); }
.choix-type a[aria-current="page"] { border: 2px solid var(--bleu); padding: 11px 13px; background: var(--bleu-pale); }
.choix-type b { font-size: 15px; }
.choix-type span { font-size: 13px; color: var(--encre-2); }
.formulaire { display: grid; gap: 16px; }
.cout { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--bleu-pale); font-size: 14px; }
.cout b { font-weight: 700; }
.depot {
  position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 16px; cursor: pointer;
  border: 2px dashed var(--trait-fort); border-radius: 16px; background: var(--surface-2);
}
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.depot svg.ico { width: 30px; height: 30px; color: var(--bleu); }
.depot:hover, .depot.survol { border-color: var(--bleu); background: var(--bleu-pale); }
.depot:focus-within { outline: 3px solid rgba(30, 136, 229, 0.5); outline-offset: 2px; }
.depot b { overflow-wrap: anywhere; }
.resultat-facteur { display: grid; gap: 10px; }
.autre-facon { scroll-margin-top: 80px; }
.autre-facon .carte-tete h2 { display: flex; align-items: center; gap: 8px; }
.attente { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--bleu-pale); font-size: 14px; }
.attente-piste { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.attente-piste span { display: block; height: 100%; width: 35%; border-radius: 6px; background: var(--bleu); animation: va-et-vient 1.6s ease-in-out infinite; }
@keyframes va-et-vient { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }

/* ------------------------------------------------------------------ comparaison */
.cmp-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: end; }
.cmp-cote .tres-petit { font-weight: 600; }
.cmp-cote .nom { font-weight: 700; overflow-wrap: anywhere; }
.cmp-cote .total { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.cmp-cote .total small { font-size: 13px; font-weight: 500; color: var(--encre-2); letter-spacing: 0; margin-left: 4px; }
.cmp-cote-b { text-align: right; }
.ecart { text-align: center; padding: 10px 16px; border-radius: 14px; background: var(--surface-3); font-weight: 700; white-space: nowrap; }
.ecart .kg { font-size: 20px; }
.ecart.baisse { background: var(--vert-pale); color: var(--vert); }
.ecart.hausse { background: var(--erreur-pale); color: var(--erreur); }
.cmp-phrase { margin-top: 14px; font-size: 15px; }
.cmp-barres { display: grid; gap: 12px; margin-top: 16px; }
.cmp-ligne { display: grid; grid-template-columns: 160px minmax(0, 1fr) 190px; gap: 14px; align-items: center; font-size: 14px; }
.cmp-pistes { display: grid; gap: 4px; }
.cmp-piste { height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.cmp-piste span { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.cmp-val { text-align: right; white-space: nowrap; font-size: 13px; }
.cmp-val b { display: inline-block; min-width: 64px; }
.delta-baisse { color: var(--vert); }
.delta-hausse { color: var(--erreur); }
.cmp-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: var(--encre-2); }
.cmp-legende span { display: inline-flex; align-items: center; gap: 6px; }
.choix-cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }

/* ------------------------------------------------------------------ versions et scénarios */
.scenarios { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.scenario { border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); padding: 16px; display: grid; gap: 8px; align-content: start; }
.scenario.origine-carte { border: 2px solid var(--bleu); padding: 15px; background: var(--bleu-pale); }
.scenario .sorte { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--bleu-texte); }
.scenario h3 { font-size: 16px; overflow-wrap: anywhere; }
.scenario h3 a { color: inherit; text-decoration: none; }
.scenario h3 a:hover { text-decoration: underline; }
.scenario .total { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.scenario .total small { font-size: 13px; font-weight: 500; color: var(--encre-2); letter-spacing: 0; margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rep-piste span, .attente-piste span { transition: none; animation: none; }
  .attente-piste span { width: 100%; opacity: 0.6; }
}

/* ------------------------------------------------------------------ tablette */
@media (max-width: 1100px) {
  .histo-ligne, .histo-entete { grid-template-columns: 30px 104px minmax(0, 1fr) 140px 96px 70px; }

  .histo-versions { display: none; }
  .histo-entete .histo-versions { display: none; }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .syn-grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "rep" "points" "cadre" "source"; }
}
@media (max-width: 900px) {
  .tuiles, .reprendre-liste { grid-template-columns: minmax(0, 1fr); }
  .tuile { grid-template-rows: auto; }
  .fiche-tete { grid-template-columns: minmax(0, 1fr); }
  .fiche-total { text-align: left; }
  .fiche-total .unite { margin-left: 0; }
  .grille-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 720px) {
  .barre { padding: 10px 16px; gap: 8px; }
  .marque span { display: none; }
  .solde .libelle { display: none; }
  .sous-barre { padding: 10px 16px; }
  .page { padding: 20px 16px 110px; }
  .carte { padding: 16px; }
  .histo-entete { display: none; }
  .histo-ligne { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "case type total" "case nom nom" "case date credits"; gap: 4px 10px; padding: 12px; }
  .histo-ligne > :nth-child(1) { grid-area: case; align-self: start; margin-top: 2px; }
  .histo-ligne > :nth-child(2) { grid-area: type; }
  .histo-ligne > :nth-child(3) { grid-area: nom; }
  .histo-ligne > :nth-child(4) { grid-area: total; }
  .histo-ligne > :nth-child(5) { grid-area: date; text-align: left; }
  .histo-ligne > :nth-child(6) { grid-area: credits; }
  .histo-ligne > :nth-child(7) { display: none; }
  .tri { flex: 1 1 100%; }
  .tri select { flex: 1; }
  .cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .cycle::before { display: none; }
  .rep-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .rep-piste { grid-column: 1 / -1; grid-row: 2; }
  .arbre-colonnes { grid-template-columns: minmax(0, 1fr); padding-top: 12px; gap: 14px; }
  .arbre-colonnes::before, .colonne::before { display: none; }
  .arbre-lien { display: none; }
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { padding: 10px 12px; border-bottom: 1px solid var(--trait); }
  .tableau tr.groupe { padding: 0; }
  .tableau td { border: 0; padding: 3px 0; }
  .tableau td.num { text-align: left; }
  .tableau td[data-libelle]::before { content: attr(data-libelle) " : "; color: var(--encre-3); font-size: 12px; font-weight: 600; }
  html:not([lang="fr"]) .tableau td[data-libelle]::before { content: attr(data-libelle) ": "; }  /* deux-points sans espace avant, hors français */
  .tableau input.saisie { width: 130px; }
  .grille-infos { grid-template-columns: minmax(0, 1fr); }
  .cmp-tete { grid-template-columns: minmax(0, 1fr); }
  .cmp-cote-b { text-align: left; }
  .ecart { justify-self: start; }
  .cmp-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .cmp-pistes { grid-column: 1 / -1; grid-row: 2; }
  .choix-cmp { grid-template-columns: minmax(0, 1fr); }
  .choix-type { grid-template-columns: minmax(0, 1fr); }
  .perso-champs { grid-template-columns: minmax(0, 1fr); }
  .param { grid-template-columns: minmax(0, 1fr) 118px; }
  .barre-comparer { left: 16px; right: 16px; transform: none; max-width: none; bottom: 12px; }
  .enregistrement { top: 56px; }
}

/* ---------------------------------------------------------------- durée estimée et barre d'avancement */
.duree { display: grid; gap: 8px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bleu-pale); font-size: 14px; }
.duree-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; align-items: baseline; }
.duree-tete b { font-weight: 700; }
.duree-reste { color: var(--encre-2); }
.duree-piste { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.duree-piste span { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--bleu); transition: width 0.9s linear; }
.duree-note { margin: 0; color: var(--encre-2); }
.duree[data-etat="depasse"] { background: var(--alerte-pale); border: 1px solid var(--alerte-trait); }
.duree[data-etat="depasse"] .duree-piste span { background: repeating-linear-gradient(45deg, var(--alerte), var(--alerte) 6px, #b8741d 6px, #b8741d 12px); }
.duree[data-etat="depasse"] .duree-note { color: var(--encre); }
.duree[data-etat="fini"] .duree-piste span { background: var(--vert); }
.duree-avant { margin: 0; font-size: 13px; color: var(--encre-2); display: flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- mode groupé */
.modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-3); margin-bottom: 14px; max-width: 100%; }
.modes a { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--encre-2); text-decoration: none; white-space: nowrap; }
.modes a[aria-current="page"] { background: var(--surface); color: var(--bleu-texte); box-shadow: var(--ombre); }
.lot-apercu { display: grid; gap: 10px; }
.lot-defile { overflow-x: auto; max-width: 100%; }
.lot-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lot-table th, .lot-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; overflow-wrap: anywhere; }
.lot-table th { font-size: 12px; color: var(--encre-2); font-weight: 600; }
.lot-statut { font-weight: 600; white-space: nowrap; }
tr[data-statut="attente"] .lot-statut { color: var(--encre-2); }
tr[data-statut="encours"] .lot-statut { color: var(--bleu-texte); }
tr[data-statut="ok"] .lot-statut { color: var(--vert); }
tr[data-statut="vide"] .lot-statut, tr[data-statut="arret"] .lot-statut { color: var(--alerte); }
tr[data-statut="echec"] .lot-statut { color: var(--erreur); }
.lot-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .duree-piste span { transition: none; } }
.modele-lot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--trait-fort); font-size: 14px; }
.modele-lot svg.ico { color: var(--bleu-texte); }

/* ---------------------------------------------------------------- analyse en cours (barre du haut, 02.11.2026) */
.en-cours { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 290px; padding: 4px 12px 4px 10px;
  border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--bleu-pale); color: var(--bleu-texte);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; cursor: pointer; text-align: left; }
.en-cours:hover { border-color: var(--bleu); }
.en-cours-texte { min-width: 0; }
.en-cours small { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--encre-2); }
.en-cours .tourne { animation: en-cours-tourne 1.1s linear infinite; }
.en-cours[data-etat="reussie"] { border-color: var(--vert); background: var(--vert-pale); color: var(--vert); }
.en-cours[data-etat="echouee"] { border-color: var(--erreur); background: var(--erreur-pale); color: var(--erreur); }
@keyframes en-cours-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .en-cours .tourne { animation: none; } }
/* Icône seule sous 1180 px (03.11.2026, en-tête commun : logo et liens du site à gauche) : le nom de l'analyse ferait
   déborder la barre (1 129 px de contenu à 1 100 px) ; il reste dans l'infobulle et l'étiquette du bouton. */
@media (max-width: 1179.98px) {
  .en-cours { width: 36px; height: 36px; min-height: 0; padding: 0; justify-content: center; flex: none; }
  .en-cours-texte { display: none; }
}
@media (max-width: 720px) {
  /* 390 px ne suffisent pas à tout : l'aide laisse sa place au bouton tant qu'il est visible */
  .barre-droite:has(.en-cours:not([hidden])) [data-action="aide"] { display: none; }
}
/* Plusieurs analyses en parallèle (03.11.2026) : nombre sur l'icône (téléphone) et petite liste sous le bouton */
.en-cours { position: relative; }
.en-cours-nombre { display: none; }
.en-cours-liste {
  position: absolute; right: 16px; top: 58px; z-index: 46; width: min(340px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-forte);
  padding: 8px;
}
.en-cours-liste-tete { padding: 6px 10px 8px; border-bottom: 1px solid var(--trait); margin-bottom: 6px; font-size: 13px;
  font-weight: 600; color: var(--encre-2); }
.en-cours-liste button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none;
  border-radius: 8px; color: var(--encre); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.en-cours-liste button:hover, .en-cours-liste button:focus-visible { background: var(--surface-2); }
.en-cours-liste button svg { flex: none; color: var(--bleu-texte); }
.en-cours-liste button[data-etat="reussie"] svg { color: var(--vert); }
.en-cours-liste button[data-etat="echouee"] svg { color: var(--erreur); }
.en-cours-ligne-texte { flex: 1 1 auto; min-width: 0; }
.en-cours-ligne-texte b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.en-cours-ligne-texte small { display: block; font-size: 12px; color: var(--encre-2); }
.en-cours-liste .tourne { animation: en-cours-tourne 1.1s linear infinite; }
.en-cours-liste-note { padding: 8px 10px 4px; border-top: 1px solid var(--trait); margin-top: 6px; color: var(--encre-2); }
@media (prefers-reduced-motion: reduce) { .en-cours-liste .tourne { animation: none; } }
@media (max-width: 1179.98px) {
  .en-cours-nombre { display: block; position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: var(--bleu-texte); color: var(--surface); font-size: 11px;
    font-weight: 700; line-height: 18px; text-align: center; }
}
@media (max-width: 720px) {
  .en-cours-liste { left: 16px; width: auto; }
}

/* ---------------------------------------------------------------- assemblages (chantier C, 02.11.2026)
   Explorateur du tableau de bord (tableau.js) et page d'un assemblage (assemblage.js). */
.type-asm { color: var(--bleu-texte); background: var(--bleu-pale); }
.champ input[aria-invalid="true"], .saisie[aria-invalid="true"] { border-color: var(--erreur); background: var(--erreur-pale); }
.explo { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 34px; }
.explo .historique { margin-top: 0; }
.explo-cote { position: sticky; top: 16px; padding: 12px; }
.explo-titre { margin: 14px 8px 6px; font-size: 12px; font-weight: 700; color: var(--encre-3); }
.explo-lien { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none;
  color: var(--encre); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.explo-lien:hover { background: var(--surface-2); }
.explo-lien[aria-current="true"] { background: var(--bleu-pale); color: var(--bleu-texte); }
.explo-lien svg.ico { width: 17px; height: 17px; flex: none; color: var(--encre-3); }
.explo-lien[aria-current="true"] svg.ico { color: var(--bleu); }
.explo-lien svg.ico.explo-alerte { width: 14px; height: 14px; color: var(--alerte); }
.explo-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explo-kg { font-size: 12px; font-weight: 600; color: var(--encre-3); white-space: nowrap; }
.explo-sous { margin: 0 0 4px 16px; padding-left: 8px; border-left: 2px solid var(--trait); }
.explo-sous .explo-lien { font-weight: 500; padding: 6px 10px; }
.explo-vide { margin: 2px 8px 0; }
.explo-nouveau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 4px 2px; }
.explo-nouveau input { flex: 1 1 140px; min-width: 0; }
.explo-nouveau .texte-erreur { flex: 1 1 100%; margin: 0; }
.dans-asm { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--encre-3); overflow-wrap: anywhere; }
.dans-asm svg.ico { width: 12px; height: 12px; flex: none; }
.asm-ariane { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--encre-3); margin-bottom: 8px; }
.asm-ariane a { color: var(--encre-2); }
.asm-ariane b { color: var(--encre-2); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.asm-ariane .btn-lien { padding: 0; font-size: 13px; font-weight: 500; color: var(--encre-2); text-decoration: underline; }
.asm-apercu-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 14px; }
.asm-apercu-tete h2 { font-size: clamp(22px, 3vw, 28px); overflow-wrap: anywhere; }
.asm-apercu-total { text-align: right; }
.asm-apercu-total .chiffre { display: block; font-size: clamp(28px, 4vw, 38px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.asm-apercu-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.asm-parents { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; }
.asm-parents svg.ico { flex: none; margin-top: 2px; }
.asm-bandeau { margin-top: 16px; }
.asm-bandeau > div { flex: 1; min-width: 0; }
.asm-bandeau-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.asm-bandeau-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--alerte-trait); }
.asm-bandeau-liste li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.asm-bandeau-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.asm-cycle { margin-top: 18px; }
.asm-section { margin-top: 22px; }
.asm-section > .carte-tete h2 { font-size: 20px; }
.asm-table td { vertical-align: middle; }
.asm-nom { display: grid; gap: 2px; min-width: 190px; }
.asm-nom a, .asm-nom .asm-sans-lien, .asm-nom .btn-lien { font-weight: 600; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; text-align: left; }
.asm-nom a:hover { color: var(--bleu-texte); text-decoration: underline; }
.asm-nom .etiquette { justify-self: start; margin-top: 2px; }
.asm-nom .btn-lien { padding: 0; justify-self: start; font-size: 14px; }
.asm-plan .cout { flex-wrap: nowrap; align-items: flex-start; }
.asm-plan .cout span { flex: 1; min-width: 0; }
.asm-plan .asm-champ-qte input { max-width: 180px; }
.asm-qte { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.asm-qte .u { font-size: 13px; color: var(--encre-2); margin-left: 2px; }
.tableau input.saisie.asm-qte-champ { width: 76px; }
.btn-icone.asm-pas { width: 30px; height: 30px; border-radius: 8px; }
.btn-icone.asm-pas svg.ico { width: 14px; height: 14px; }
.asm-qte .btn-icone:disabled { opacity: 0.4; cursor: default; }
.asm-part { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--surface-3); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.asm-part span { display: block; height: 100%; background: var(--bleu); border-radius: 3px; }
.asm-groupe { display: flex; justify-content: space-between; gap: 12px; }
.asm-pied td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--trait); }
.asm-top { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.asm-top li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.asm-top li:last-child { border-bottom: 0; }
.asm-top li::before { counter-increment: rang; content: counter(rang); font-size: 12px; font-weight: 600; color: var(--encre-3); }
.asm-top li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.asm-top small { display: block; color: var(--encre-3); font-size: 12px; }
.asm-pile { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-3); gap: 2px; margin: 6px 0 14px; }
.asm-pile span { display: block; height: 100%; }
.asm-sources { display: grid; gap: 8px; }
.asm-sources div { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.asm-sources i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.asm-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.asm-journal li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.asm-journal li:last-child { border-bottom: 0; padding-bottom: 0; }
.asm-modes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-3); margin-bottom: 14px; }
.asm-modes button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--encre-2); cursor: pointer; }
.asm-modes button[aria-selected="true"] { background: var(--surface); color: var(--bleu-texte); box-shadow: var(--ombre); }
.asm-recherche { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; align-items: end; }
.asm-grille-niveau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.asm-modale .texte-erreur:empty { display: none; }
.asm-modale .liste-choix { margin-top: 12px; }
.asm-modale .liste-choix .lib .type { margin-right: 4px; vertical-align: 1px; }
.liste-choix li.asm-aucun { display: block; color: var(--encre-2); font-size: 14px; }
.asm-exclus { margin-top: 10px; }
.asm-creer { display: flex; flex-wrap: wrap; gap: 8px; }
.asm-creer input { flex: 1 1 200px; min-width: 0; }
@media (max-width: 960px) {
  .explo { grid-template-columns: minmax(0, 1fr); }
  .explo-cote { position: static; }
}
@media (max-width: 720px) {
  .asm-apercu-total { text-align: left; }
  .asm-table tfoot { display: block; }
  .asm-table tr.asm-ligne { position: relative; padding-right: 54px; }
  .asm-table td.asm-c-retirer { position: absolute; top: 8px; right: 10px; width: auto; padding: 0; }
  .asm-table td.asm-c-repartie { display: none; }
  .asm-table tr.groupe td { padding: 8px 12px; }
  .asm-table tfoot tr.asm-pied { padding: 0; }
  .asm-table tfoot tr.asm-pied td { padding: 10px 12px; }
  .asm-nom { min-width: 0; }
  .tableau input.saisie.asm-qte-champ { width: 76px; }
  .asm-recherche, .asm-grille-niveau { grid-template-columns: minmax(0, 1fr); }
}

/* Chantier D (02.11.2026) : le total provisoire se cache quand la règle 4 ne joue plus. */
.etiquette[hidden] { display: none; }

/* Arbre d'un assemblage (02.11.2026) : deux vues, nœuds repliables (details), sous-total à chaque nœud ;
   sur téléphone, les six étapes s'empilent au lieu de défiler de côté. */
.arbre-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.asm-arbre summary { list-style: none; cursor: pointer; }
.asm-arbre summary::-webkit-details-marker { display: none; }
.asm-arbre .pli { position: absolute; top: 13px; right: 12px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; opacity: .6; }
.asm-arbre details[open] > summary .pli { transform: rotate(45deg); }
.asm-arbre-elements { min-width: 0; }
.asm-arbre-elements summary.g-noeud { position: relative; padding-right: 32px; }
.asm-arbre-elements .g-noeud .etiquette svg.ico { width: 12px; height: 12px; }
.asm-arbre-elements .asm-racine > summary.g-noeud { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.asm-arbre-elements .asm-racine > summary .sorte, .asm-arbre-elements .asm-racine > summary .kg span { color: inherit; opacity: .75; }
.asm-arbre-elements .g-pile { display: grid; gap: 6px; margin: 8px 0 0 6px; padding-left: 10px; border-left: 2px solid var(--trait-fort); }
.asm-arbre-elements .g-flux { margin: 6px 0 0 16px; }
.asm-flux { cursor: default; }
.asm-flux .etiquette { white-space: normal; }
.asm-flux .bas { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.asm-flux .bas > * { white-space: nowrap; }
.asm-arbre-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--alerte); margin: 6px 0 0 8px; }
.asm-arbre-note svg.ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.asm-arbre-etapes { min-width: 0; }
.asm-arbre-etapes .colonne > summary { display: block; }
.asm-arbre-etapes .etape-boite .haut { position: relative; padding-right: 22px; }
.asm-arbre-etapes .etape-boite .pli { top: 10px; right: 2px; }
@media (max-width: 720px) {
  .asm-arbre .arbre-outils { margin-left: 0; }
  .asm-arbre .arbre-colonnes { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .asm-arbre .arbre-colonnes::before, .asm-arbre .colonne::before, .asm-arbre .arbre-lien { display: none; }
  .asm-arbre-elements .g-pile { margin-left: 2px; padding-left: 7px; }
  .asm-arbre-elements .g-flux { margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .asm-arbre .pli { transition: none; } }

/* Modifier les pièces dans l'assemblage (03.11.2026) : la fiche de l'ACV ISO dans une fenêtre de la page, cadre
   intégré de la même origine (fiche.js en mode « dans l'assemblage » : ni barre du haut ni navigation) ; plein écran
   au téléphone. Actions de chaque ligne de la nomenclature : Modifier, Changer le facteur, Ouvrir. */
html.asm-edition-ouverte { overflow: hidden; }
.asm-edition-fond { position: fixed; inset: 0; z-index: 57; background: var(--voile); display: grid; place-items: center; padding: 16px; }
.asm-edition { display: flex; flex-direction: column; width: min(1240px, 100%); height: min(960px, calc(100vh - 32px)); height: min(960px, calc(100dvh - 32px));
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre-forte); overflow: hidden; }
.asm-edition-tete { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--trait); background: var(--surface); }
.asm-edition-tete > div { flex: 1; min-width: 0; }
.asm-edition-tete h2 { font-size: 18px; overflow-wrap: anywhere; }
.asm-edition-tete p { margin-top: 4px; max-width: 92ch; }
.asm-edition-cadre { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: var(--fond); }
.asm-ligne-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.asm-ligne-actions .btn { text-decoration: none; }
.dans-assemblage .barre, .dans-assemblage .sous-barre { display: none; }
.dans-assemblage .page { padding-top: 18px; }
.dans-assemblage .enregistrement { top: 8px; }
@media (max-width: 720px) {
  .asm-edition-fond { padding: 0; }
  .asm-edition { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .asm-edition-tete { padding: 10px 12px; }
  .asm-edition-tete h2 { font-size: 16px; }
  .asm-edition-tete p { display: none; }
  .dans-assemblage .page { padding-top: 12px; }
}