/* Portail commercial · Koenig & Bauer Coding (FRA)
   Couleurs des logotypes : bleu #001C67, bleu profond #002355, blanc.
   Principe : la couleur seulement là où elle informe ; l'état normal reste sans couleur. */

:root {
  --bleu: #001C67;
  --bleu-survol: #0B2C7F;
  --bleu-profond: #002355;
  --bleu-50: #F0F1F6;
  --bleu-100: #E0E4ED;
  --bleu-300: #94A0BF;
  --encre: #161D2E;
  --encre-2: #4A5367;
  --muet: #5F687B;
  --trait: #D5DAE3;
  --trait-doux: #E6E9EF;
  --trait-fort: #8C95A7;
  --fond: #F3F5F8;
  --entete-tableau: #FAFBFC;
  --ok: #1D6B40;
  --ok-fond: #E3F2E8;
  --attente: #875100;
  --attente-fond: #FCEFD6;
  --non: #A1252B;
  --non-fond: #FBE7E7;
  --interne: #5B3B96;
  --interne-fond: #EFEAF8;
  --police: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, Menlo, "DejaVu Sans Mono", monospace;
  --ligne: 32px;
  --rayon: 6px;
  --ecart: 16px;
  --menu: 236px;
  --barre-h: 60px;
  --ancres-h: 44px;
  --courbe: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--police); font-size: 14px; line-height: 1.45;
  color: var(--encre); background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: 22px; font-weight: 600; line-height: 1.25; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 2px; }
.icone { flex: none; width: 18px; height: 18px; }
.muet { color: var(--muet); }
.petit { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.nombre { text-align: right; font-variant-numeric: tabular-nums; }

.aller-au-contenu { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: var(--rayon); background: var(--bleu); color: #fff; }
.aller-au-contenu:focus { top: 12px; }

/* ---------- Menu latéral : se range avec ☰, revient quand la souris s'approche du bord ---------- */
.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--menu);
  display: flex; flex-direction: column; gap: 4px; padding: 14px 10px;
  background: var(--bleu-profond); color: #fff; overflow: auto;
  transition: transform .24s var(--courbe), box-shadow .24s var(--courbe), visibility 0s;
}
.menu :focus-visible { outline-color: #fff; }
.menu-marque { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; color: #fff; white-space: nowrap; }
.menu-marque:hover { text-decoration: none; }
.menu-marque .esperluette { width: auto; height: 32px; flex: none; }
.menu-marque b { display: block; font-size: 14px; line-height: 1.2; }
.menu-marque small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .66); }
.menu-liens { display: grid; gap: 2px; }
.menu-liens a, .menu-liens .a-venir {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 6px;
  color: rgba(255, 255, 255, .84); font-size: 13.5px; white-space: nowrap; transition: background-color .15s;
}
.menu-liens a:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.menu-liens a[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.menu-liens .icone { opacity: .9; }
.menu-liens .a-venir { color: rgba(255, 255, 255, .45); cursor: default; }
/* Serveur : quelque chose est à voir (sauvegarde, mise à jour, disque) ; pour les administrateurs seulement */
.point-alerte { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: #ff6b5e; box-shadow: 0 0 0 3px rgba(255, 107, 94, .28); }
.menu-liens .a-venir em { margin-left: auto; font-style: normal; font-size: 11px; }
.aujourdhui { margin-top: auto; display: grid; gap: 8px; padding: 12px 10px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; color: rgba(255, 255, 255, .84); }
.aujourdhui-date { font-weight: 600; color: #fff; }
.aujourdhui-ligne { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.35; }
.aujourdhui-ligne .icone { width: 16px; height: 16px; margin-top: 1px; opacity: .85; }
.aujourdhui-message { padding: 8px 10px 8px 8px; border-radius: var(--rayon); background: rgba(255, 255, 255, .08); color: #fff; }
.aujourdhui-message .signature { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, .66); }
.aujourdhui-message > div { display: grid; gap: 7px; min-width: 0; }
/* Dans le menu, un message tient sur quatre lignes au plus ; il se lit en entier sur la page Messages */
.aujourdhui-message > div > p { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* En allemand, la signature (« Veröffentlicht von … ») prend souvent deux lignes : une ligne de plus, pour ne pas la couper */
.aujourdhui-message > div > p:lang(de) { -webkit-line-clamp: 5; line-clamp: 5; }
.aujourdhui-bonjour { line-height: 1.35; }
.aujourdhui-bonjour b { display: block; font-size: 13.5px; color: #fff; }
/* « Lu » : chacun pour soi ; le message quitte son menu et reste sur la page Messages. Quand les deux libellés ne
   tiennent pas côte à côte dans une autre langue (« Details » et « Gelesen »), « Lu » passe dessous, toujours à droite */
.message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 24px; }
/* « + Détail » : discret, sans soulignement ; il répond au « ✓ Lu » de l'autre côté */
.lien-detail {
  display: inline-flex; align-items: center; gap: 3px; height: 24px; margin-left: -6px; padding: 0 9px 0 6px; border-radius: 999px;
  color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 500; transition: background-color .12s, color .12s;
}
.lien-detail:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.aujourdhui-ligne .lien-detail .icone { width: 13px; height: 13px; margin: 0; opacity: 1; }
.message-actions form { margin-left: auto; }
.bouton-lu {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .42); background: transparent; color: #fff; font-size: 12px; font-weight: 600;
  transition: background-color .12s, color .12s;
}
.bouton-lu:hover { background: #fff; border-color: #fff; color: var(--bleu-profond); }
.aujourdhui-ligne .bouton-lu .icone { width: 13px; height: 13px; margin: 0; opacity: 1; }
/* En allemand, un peu moins d'espace entre « Details » et « Gelesen » : ils restent sur une ligne */
.message-actions:lang(de) { column-gap: 6px; }
.lien-detail:lang(de) { padding-right: 6px; }
.aujourdhui-tous {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 5px 8px 5px 12px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--rayon); color: #fff; font-weight: 600; line-height: 1.25;
}
.aujourdhui-tous:hover, .aujourdhui-tous[aria-current="page"] { background: rgba(255, 255, 255, .12); text-decoration: none; }
.aujourdhui-tous .icone { width: 15px; height: 15px; }
.menu-bas { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); }
.menu-version { padding: 6px 10px 0; font-size: 11px; color: rgba(255, 255, 255, .45); }

.principal { margin-left: var(--menu); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .24s var(--courbe); }

.menu-ferme .menu {
  transform: translateX(-100%); visibility: hidden;
  transition: transform .24s var(--courbe), box-shadow .24s var(--courbe), visibility 0s linear .24s;
}
.menu-ferme .principal { margin-left: 0; }
.menu-ferme.menu-survol .menu {
  transform: none; visibility: visible; box-shadow: 10px 0 30px rgba(8, 18, 45, .22);
  transition: transform .24s var(--courbe), box-shadow .24s var(--courbe), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-ferme .menu, .menu-ferme.menu-survol .menu, .principal { transition: none; }
}

/* ---------- Barre du haut : recherche et filtres, sur toutes les pages, en haut seulement ---------- */
.barre {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 12px; height: var(--barre-h); padding: 0 20px 0 12px;
  background: #fff; border-bottom: 1px solid var(--trait);
}
.bouton-menu {
  flex: none; width: 38px; height: 38px; display: inline-grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--encre-2);
}
.bouton-menu:hover { background: var(--bleu-50); color: var(--bleu); }
.bouton-menu .icone { width: 22px; height: 22px; }
.recherche { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; }
.recherche-texte { flex: 1 1 380px; max-width: 560px; min-width: 220px; display: flex; gap: 6px; }
.recherche-texte .champ-recherche { flex: 1; }
.recherche-texte .champ-recherche input, .recherche-texte .bouton { height: 38px; }
.filtres { display: flex; gap: 8px; align-items: center; min-width: 0; }
.filtres select {
  height: 38px; width: 220px; min-width: 110px; flex: 0 1 220px; padding: 0 8px;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: #fff; color: var(--encre);
}

.champ-recherche { position: relative; display: block; }
.champ-recherche .icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--encre-2); pointer-events: none; }
.champ-recherche input {
  width: 100%; height: 36px; padding: 0 12px 0 35px; border-radius: var(--rayon);
  border: 1px solid var(--trait-fort); background: #fff; color: var(--encre);
}
.champ-recherche input::placeholder { color: var(--muet); }
.champ-recherche input:focus-visible, .filtres select:focus-visible {
  outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 28, 103, .14);
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: var(--rayon);
  border: 1px solid var(--trait-fort); background: #fff; color: var(--encre);
  font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
.bouton:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }
.bouton-principal { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bouton-principal:hover { background: var(--bleu-survol); border-color: var(--bleu-survol); color: #fff; }
.bouton-discret { border-color: transparent; background: transparent; color: var(--bleu); padding: 0 8px; }
.bouton-discret:hover { background: var(--bleu-50); border-color: transparent; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.bouton.est-occupe { opacity: 1; cursor: progress; }
.roue { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourner .75s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 2.5s; } }
.bouton-icone { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--rayon); color: var(--encre-2); }
a.bouton-icone:hover { background: var(--bleu-50); color: var(--bleu); text-decoration: none; }
span.bouton-icone { opacity: .35; }
.bouton-icone .icone { width: 16px; height: 16px; }

/* ---------- Contenu ---------- */
.contenu { width: 100%; max-width: 1480px; padding: 20px 24px 40px; display: grid; gap: var(--ecart); align-content: start; }
.colonne { width: 100%; max-width: 900px; margin: 0 auto; display: grid; gap: 18px; align-content: start; }
.tete .chapo { margin-top: 2px; color: var(--muet); }
/* Anglais et allemand : sous l'en-tête de l'éditeur d'une proposition, la ligne « la page de présentation est toujours
   en français ». Ce paragraphe n'existe pas en français et ne porte donc aucune classe : il se reconnaît à sa place,
   dans l'éditeur seulement (ailleurs, un paragraphe peut suivre le chapeau d'une page) */
.editeur-formulaire > .tete > .chapo + p:not([class]) { margin-top: 4px; font-size: 13px; color: var(--encre-2); }
.fil { font-size: 12.5px; color: var(--muet); }
.encart { padding: 12px 16px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; }
.encart-alerte { border-color: #F0C2C4; background: var(--non-fond); color: var(--non); }
.vide { padding: 20px; color: var(--muet); text-align: center; }
.note { display: flex; gap: 8px; align-items: flex-start; color: var(--encre-2); font-size: 13px; }
.note .icone { width: 16px; height: 16px; margin-top: 2px; color: var(--bleu); }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }

.panneau { min-width: 0; background: #fff; border: 1px solid var(--trait-doux); border-radius: var(--rayon); box-shadow: 0 1px 2px rgba(22, 29, 46, .06); }
.panneau-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 46px; padding: 6px 16px; border-bottom: 1px solid var(--trait-doux); }
.panneau-tete h2 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.panneau-corps { padding: 16px; }
.panneau-pied { display: flex; justify-content: flex-end; padding: 8px 16px; border-top: 1px solid var(--trait-doux); }
.a-droite { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.groupe { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2); margin: 2px 0 6px; }

.compte {
  display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; line-height: 1.45; text-align: center;
  background: var(--bleu-50); color: var(--encre-2); font-variant-numeric: tabular-nums;
}

/* ---------- Étiquettes : une couleur, un sens ---------- */
.etiquette {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  padding: 4px 7px; border-radius: 3px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--bleu-50); color: var(--encre-2);
}
.etiquette .icone { width: 12px; height: 12px; }
.etiquette-ok { background: var(--ok-fond); color: var(--ok); }
.etiquette-attente { background: var(--attente-fond); color: var(--attente); }
.etiquette-non { background: var(--non-fond); color: var(--non); }
.etiquette-interne { background: var(--interne-fond); color: var(--interne); }
.etiquette-brouillon { background: transparent; color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--trait); }

/* ---------- N° article et copie ---------- */
.numero { position: relative; display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); letter-spacing: .01em; white-space: nowrap; }
.numero > a, .numero > span { color: var(--bleu); font-weight: 400; }
.copier {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--muet); opacity: .45;
  transition: opacity .12s, background-color .12s, color .12s;
}
.copier .icone { width: 14px; height: 14px; }
tr:hover .copier, li:hover > .numero .copier, .numero:hover .copier, .copier:focus-visible { opacity: 1; }
.copier:hover { background: var(--bleu-50); color: var(--bleu); }
.icone-coche { display: none; }
.est-copie .icone-copier { display: none; }
.est-copie .icone-coche { display: block; }
.copier.est-copie { opacity: 1; color: var(--ok); }
/* La bulle « Copié » : son texte vient de la page, dans la langue de la personne (portail.js le pose dans data-copie) */
.copier.est-copie::after {
  content: attr(data-copie); position: absolute; left: 100%; top: 50%; z-index: 5; transform: translate(6px, -50%);
  padding: 3px 8px; border-radius: 4px; background: var(--encre); color: #fff;
  font: 600 11.5px var(--police); letter-spacing: 0; white-space: nowrap; pointer-events: none;
  animation: bulle 1.6s ease forwards;
}
@keyframes bulle { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .copier.est-copie::after { animation: none; } }
.copier-texte {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; vertical-align: middle;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; color: var(--encre-2);
  font-size: 12.5px; font-weight: 600;
}
.copier-texte .icone { width: 14px; height: 14px; }
.copier-texte:hover { border-color: var(--bleu); color: var(--bleu); }
.copier-texte.est-copie { border-color: var(--ok); color: var(--ok); }

/* ---------- Tableaux (lignes de 32 px) ---------- */
.tableau-cadre { overflow: visible; }
.tableau { width: 100%; border-collapse: collapse; background: #fff; }
.tableau th, .tableau td { height: var(--ligne); padding: 0 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--trait-doux); }
.tableau thead th {
  position: sticky; top: var(--haut-entete, 0); z-index: 2;
  font-size: 12px; font-weight: 600; color: var(--encre-2); white-space: nowrap;
  background: var(--entete-tableau); border-bottom: 1px solid var(--trait);
}
.tableau tbody tr:hover > * { background: var(--bleu-50); }
.tableau tbody th { font-weight: 600; }
.tableau td { white-space: nowrap; }
.tableau td.texte { white-space: normal; min-width: 220px; padding-top: 6px; padding-bottom: 6px; }
.tableau td.codes { white-space: normal; font-family: var(--mono); font-size: 12.5px; color: var(--encre-2); }
.tableau .nombre { text-align: right; }
.tableau thead .tri {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; white-space: nowrap; cursor: pointer;
}
.tableau thead .tri:hover { color: var(--bleu); text-decoration: none; }
.tableau thead .tri.est-actif { color: var(--encre); }
.tri .icone { width: 14px; height: 14px; opacity: .45; }
.tri.est-actif .icone { opacity: 1; color: var(--bleu); }
button.tri .icone-tri-haut, button.tri .icone-tri-bas, button.tri.est-actif .icone-tri { display: none; }
button.tri.est-actif:not(.est-inverse) .icone-tri-haut, button.tri.est-actif.est-inverse .icone-tri-bas { display: block; }
.tableau .sous { display: block; font-size: 12px; font-weight: 400; color: var(--muet); }
.tableau tr.ligne-interne > * { background: var(--interne-fond); }
.panneau > .tableau-cadre:last-child tr:last-child > * { border-bottom: 0; }
.panneau > .tableau-cadre:last-child tr:last-child > :first-child { border-bottom-left-radius: var(--rayon); }
.panneau > .tableau-cadre:last-child tr:last-child > :last-child { border-bottom-right-radius: var(--rayon); }
.tableau-cles th { width: 44%; }
.tableau-cles td.etats { width: 1%; white-space: nowrap; text-align: right; }
/* Anglais et allemand : les états sont plus longs (« To be validated », « Freigabe ausstehend »). Deux états sur une
   même ligne se rangent l'un sous l'autre au lieu de pousser le tableau hors de sa colonne */
.tableau-cles td.etats:not(:lang(fr)) { white-space: normal; }
.tableau-cles td.etats:not(:lang(fr)) .etiquette { margin: 2px 0; }
/* Fenêtre moins large, en anglais et en allemand : ces libellés plus longs demandent de la place, et chaque tableau
   doit rester dans son cadre. Sur la fiche, la colonne des noms et celle des valeurs en cèdent à celle des états. Au
   catalogue, les colonnes « Fiche » et « Offre » (« Produktblatt », « Angebot Frankreich ») ne prennent que la largeur
   de leur contenu, l'en-tête sur deux lignes : la désignation garde la place. Dans les listes larges (propositions,
   devis, comptes, questions à l'assistant), la colonne de texte peut être un peu plus étroite ; l'écran Fichiers
   règle lui-même ses largeurs, plus bas. En allemand, un en-tête long de ces listes et de l'écran Fichiers
   (« Erkannte Produktblätter », « Mit dem Angebot ») passe sur deux lignes quand le tableau est à l'étroit */
@media (max-width: 1400px) {
  .tableau-cles th:not(:lang(fr)) { width: 35%; }
  .tableau-cles td.texte:not(:lang(fr)) { min-width: 150px; }
  #references thead th:nth-child(4):not(:lang(fr)), #references thead th:nth-child(5):not(:lang(fr)) { width: 1%; white-space: normal; padding-top: 4px; padding-bottom: 4px; }
  .colonne-large .tableau:not(.tableau-fichiers) td.texte:not(:lang(fr)) { min-width: 160px; }
  .colonne-large .tableau thead th:lang(de) { white-space: normal; padding-top: 4px; padding-bottom: 4px; }
}
.tableau-bilan td.zero { color: var(--muet); }
.tableau-bilan td.alerte { color: var(--attente); font-weight: 700; }
.pagination { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muet); font-variant-numeric: tabular-nums; }
.pagination > span:first-child { margin-right: 6px; }

/* Clé / valeur */
.cles { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; }
.cles dt { color: var(--muet); }
.cles dd { min-width: 0; overflow-wrap: anywhere; }
.texte-long { white-space: pre-line; }

/* ---------- Photos : cadre réservé, rien ne saute au chargement ---------- */
.photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-radius: calc(var(--rayon) - 1px); color: var(--muet); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.photo > .icone { width: 22px; height: 22px; opacity: .6; }

/* ---------- Catalogue : en-tête de l'accueil, une bande fine (titre, photo en détail, repères) ---------- */
.vitrine {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 56px; padding: 9px 12px 9px 18px;
  border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(22, 29, 46, .05);
}
.vitrine-texte { position: relative; z-index: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
.vitrine h1 { font-size: 19px; font-weight: 700; color: var(--bleu-profond); }
.vitrine-texte .muet { font-size: 12px; }
/* La photo : un détail derrière le titre, qui s'efface des deux côtés (le cadre la coupe aux coins arrondis) */
.vitrine-fond { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; pointer-events: none; }
.vitrine-photo {
  position: absolute; top: 0; left: 24%; width: 34%; height: 100%; object-fit: cover; opacity: .42;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 62%, transparent 100%);
}
.apercu-rapide { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tuile { position: relative; display: block; border-radius: 999px; background: var(--bleu-50); color: var(--encre); font-size: 12px; }
a.tuile, .tuile > summary {
  display: flex; align-items: baseline; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; line-height: 28px;
  white-space: nowrap; transition: background-color .12s;
}
a.tuile:hover, .tuile > summary:hover, .tuile[open] > summary { background: var(--bleu-100); text-decoration: none; }
a.tuile > b, .tuile > summary > b { font-size: 12.5px; font-weight: 700; color: var(--bleu); font-variant-numeric: tabular-nums; }
a.tuile > span, .tuile > summary > span { display: inline-flex; align-items: center; gap: 1px; color: var(--encre-2); }
.tuile > summary { cursor: pointer; list-style: none; }
.tuile > summary::-webkit-details-marker { display: none; }
.tuile > summary .icone { width: 14px; height: 14px; }
.tuile-liste {
  position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; width: max-content; min-width: 100%; max-width: min(340px, 86vw);
  max-height: 330px; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(22, 29, 46, .16);
}
.tuile-liste-droite { left: auto; right: 0; }
.tuile-liste a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 7px 10px; border-radius: 6px; color: var(--encre); font-size: 13px; }
.tuile-liste a:hover { background: var(--bleu-50); text-decoration: none; }
.tuile-liste a b { font-size: 12.5px; font-weight: 600; color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tuile-liste a small { display: block; font-size: 11.5px; color: var(--muet); }
/* Fenêtre moins large : la date (redite en bas de page) s'efface pour que tout tienne sur une ligne */
@media (max-width: 1180px) { .vitrine-texte .muet { display: none; } }
@media (max-width: 900px) { .vitrine-fond { display: none; } .apercu-rapide { margin-left: 0; } .tuile-liste-droite { left: 0; right: auto; } }

/* ---------- Catalogue : cartes des fiches (sans bordure : la carte blanche se détache du fond) ---------- */
.fiches-catalogue { display: grid; gap: 10px; scroll-margin-top: 12px; }
.titre-section { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; }
.titre-section h2 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.carte {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 10px 10px 12px;
  border-radius: 12px; background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(22, 29, 46, .05);
  transition: box-shadow .16s, transform .16s;
}
.carte:hover, .carte:focus-visible { box-shadow: 0 10px 24px rgba(0, 28, 103, .15); transform: translateY(-2px); text-decoration: none; }
.carte .photo { border-radius: 8px; margin-bottom: 4px; }
.carte-nom { font-size: 14px; font-weight: 700; }
.carte-techno { font-size: 12px; color: var(--muet); }
.carte .etiquette { align-self: flex-start; margin-top: 2px; }
/* Les chiffres en bas de la carte : ils s'alignent d'une carte à l'autre */
.carte-chiffres { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 8px; }
.pastille { padding: 2px 8px; border-radius: 999px; background: var(--bleu-50); color: var(--bleu); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* Un libellé plus long dans une autre langue reste dans la carte, coupé s'il le faut (« 13 Verbrauchsmittel », le plus
   long aujourd'hui, y tient en entier) */
.carte-chiffres .pastille { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#references { scroll-margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .carte { transition: none; } .carte:hover, .carte:focus-visible { transform: none; } }

/* ---------- Assistant : la question, puis ce que dit la base, élément par élément, avec sa source ---------- */
.formulaire-assistant .formulaire-ligne { flex-wrap: nowrap; align-items: stretch; }
.champ-question {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: #fff; color: var(--encre); font-size: 15px;
}
.champ-question:focus-visible { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 28, 103, .14); }
.formulaire-assistant .bouton-principal { height: 42px; margin-left: 0; }
/* Anglais et allemand : sous le champ, la ligne « la base produits est en français ». Ce paragraphe n'existe pas en
   français et ne porte donc aucune classe : il se reconnaît à sa place, juste après le champ */
.formulaire-assistant > .formulaire-ligne + p:not([class]) { margin-top: -4px; font-size: 13px; color: var(--encre-2); }
.exemples-assistant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reponse-message { font-size: 14.5px; }
.reponse-inconnue .reponse-message { font-size: 16px; }
.reponse-inconnue .panneau-corps { display: grid; gap: 8px; }
.passages { display: grid; gap: 10px; margin-top: 12px; padding: 0; list-style: none; }
.passage { display: grid; gap: 3px; padding: 11px 14px; border-radius: 8px; background: var(--bleu-50); border-left: 3px solid var(--bleu); }
.passage-a-valider { border-left-color: var(--attente); background: #fdf8ee; }
.passage-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12.5px; }
.passage-genre { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2); }
.passage-texte { font-size: 14.5px; overflow-wrap: anywhere; }
.passage-titre { color: var(--encre-2); }
.passage-texte .sous { display: block; font-size: 12.5px; color: var(--encre-2); }
.passage-source { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 12px; color: var(--muet); }
.passage-source .mono { color: var(--encre-2); }
a.puce { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tableau-comparaison th[scope="row"] { width: 30%; }
.tableau-comparaison thead th a { color: inherit; }
.valeur-comparee { display: block; }
.valeur-comparee + .valeur-comparee { margin-top: 6px; }

/* ---------- Langue du portail : la langue en cours et un petit menu, en haut à droite (et sur les pages de connexion) ---------- */
.choix-langue { position: relative; flex: none; margin: 0 0 0 auto; font-size: 13px; font-weight: 600; color: var(--encre-2); }
.choix-langue details { position: relative; }
/* La langue en cours : le drapeau et le sigle, comme l'indicateur « FR » d'avant les langues, et rien d'autre (pas de
   flèche). Le curseur et le fond au survol disent que l'on peut cliquer */
.langue {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px; border-radius: 8px;
  cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; transition: background-color .12s, color .12s;
}
.langue::-webkit-details-marker { display: none; }
.langue:hover, .choix-langue details[open] > .langue { background: var(--bleu-50); color: var(--bleu); }
.drapeau { width: 22px; height: 15px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(22, 29, 46, .16); }
/* Les autres langues : une petite fenêtre juste dessous. Elle dépasse la langue en cours de 6 px de chaque côté (son
   trait et sa marge intérieure) : chaque ligne a ainsi la place exacte de la langue en cours, et son drapeau et son
   sigle tombent juste sous les siens */
.choix-langue-menu {
  position: absolute; z-index: 8; top: calc(100% + 6px); left: -6px; min-width: calc(100% + 12px); display: grid; gap: 2px; padding: 5px;
  background: #fff; border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 10px 28px rgba(22, 29, 46, .16);
}
.choix-langue-menu button, .choix-langue-menu a {
  display: flex; align-items: center; gap: 7px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--encre-2); font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.choix-langue-menu button:hover, .choix-langue-menu a:hover { background: var(--bleu-50); color: var(--bleu); text-decoration: none; }
/* Fenêtre étroite : le choix de la langue passe sur une ligne à lui, sous la recherche et les filtres, qui gardent
   ainsi toute la largeur */
@media (max-width: 900px) {
  .barre { flex-wrap: wrap; height: auto; min-height: var(--barre-h); padding-top: 11px; padding-bottom: 3px; row-gap: 1px; }
  .barre .choix-langue { flex-basis: 100%; display: flex; justify-content: flex-end; }
}
/* Pages d'avant la connexion : en haut à droite du cadre, dans sa marge. Rien d'autre ne bouge : le nom du
   portail garde toute sa ligne, comme avant les langues */
.connexion-cadre { position: relative; }
.connexion-cadre > .choix-langue { position: absolute; top: 8px; right: 12px; margin: 0; padding: 0; }
@media (max-width: 720px) { .connexion-cadre > .choix-langue { top: 0; } }

/* ---------- Fiche : en-tête (photos + informations) ---------- */
.fiche-tete { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 22px; }
.fiche-medias { display: grid; gap: 14px; align-content: start; }
.visionneuse { display: grid; gap: 10px; }
.visionneuse:focus { outline: none; }
.visionneuse-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-photo { display: grid; overflow: hidden; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: #F7F8FA; }
.fiche-photo figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--trait-doux); font-size: 13px; }
.fiche-photo figcaption .position { color: var(--bleu); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiche-photo figcaption [data-legende-texte] { color: var(--encre-2); }
.legende-original { margin-left: auto; font-size: 12px; }
.fiche-photo .photo { border-radius: 0; background: #F7F8FA; }
.fleche {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px;
  border: 1px solid var(--trait); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--encre);
  box-shadow: 0 1px 4px rgba(22, 29, 46, .12); opacity: .8; transition: opacity .15s, border-color .15s, color .15s;
}
.fleche-precedente { left: 10px; }
.fleche-suivante { right: 10px; }
.fiche-photo:hover .fleche, .fleche:focus-visible { opacity: 1; }
.fleche:hover { border-color: var(--bleu); color: var(--bleu); }
.fleche .icone { width: 20px; height: 20px; }
.sans-photo { gap: 6px; align-content: center; border: 1px dashed var(--trait-fort); font-size: 12.5px; }
.miniatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.miniatures button {
  display: block; padding: 0; overflow: hidden; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.miniatures button:hover { border-color: var(--bleu); }
.miniatures button[aria-pressed="true"] { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.miniatures .photo { border-radius: 0; }
.apercu-photos { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--trait-doux); }
.apercu-groupe h3 { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2); }
.apercu-miniatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.apercu-miniatures button {
  display: grid; align-content: start; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.apercu-miniatures button:hover { border-color: var(--bleu); }
.apercu-miniatures button[aria-pressed="true"] { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.apercu-miniatures .photo { border-radius: 0; }
.apercu-texte {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 4px 6px 5px; font-size: 10.5px; line-height: 1.3; color: var(--encre-2);
}

.fiche-infos { display: grid; gap: 12px; align-content: start; min-width: 0; }
.fiche-infos h1 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.fiche-infos .identite { margin-top: -4px; color: var(--muet); }
.accroche { max-width: 56ch; font-size: 17px; font-weight: 600; line-height: 1.35; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquettes:empty { display: none; }
.description { max-width: 70ch; color: var(--encre-2); }
.limites { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--rayon); background: var(--interne-fond); }
.limites .etiquette { justify-self: start; background: #fff; }
.fiche-bloc { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--trait-doux); }
.fiche-bloc h2 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.famille { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--bleu); }
.variantes li { display: grid; gap: 1px; padding: 7px 0; border-bottom: 1px solid var(--trait-doux); }
.variantes li:last-child { border-bottom: 0; }
.variantes .libelle { font-weight: 600; }
.variantes .libelle .etiquette { margin-left: 6px; }
.variantes .details { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 12px; color: var(--muet); }
.variantes .designation { min-width: 0; }
.numero-discret { font-size: 12px; letter-spacing: 0; }
.numero-discret > a, .numero-discret > span { color: var(--muet); font-weight: 400; }
.numero-discret > a:hover { color: var(--bleu); }
.numero-discret .copier { width: 22px; height: 22px; }
.variantes .libelle a { color: var(--encre); }
.variantes .libelle a:hover { color: var(--bleu); }
.variantes li.est-choisie { margin: 0 -8px; padding-left: 6px; padding-right: 8px; border-left: 2px solid var(--bleu); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--bleu-50); }
.variantes li.est-choisie .libelle a { color: var(--bleu); }
.variante-choisie {
  display: grid; gap: 4px; justify-items: start; padding: 10px 12px;
  border: 1px solid var(--bleu-100); border-left: 3px solid var(--bleu); border-radius: var(--rayon); background: var(--bleu-50);
}
.variante-choisie-titre { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2); }
.variante-choisie b { font-size: 15px; }
.variante-choisie-numero { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.variante-choisie-numero .copier { opacity: 1; }
.variante-choisie .bouton-discret { padding-left: 0; height: 28px; }
.note-variante { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--rayon); background: var(--bleu-50); font-size: 12.5px; color: var(--encre-2); }
.note-variante .icone { width: 16px; height: 16px; margin-top: 1px; color: var(--bleu); }
.filtre-variantes { max-width: 380px; }
.voir-plus { justify-self: start; padding-left: 0; }
.voir-plus .icone { width: 14px; height: 14px; transition: transform .15s; }
.voir-plus[aria-expanded="true"] .icone { transform: rotate(-90deg); }
.voir-plus:not([aria-expanded="true"]) .icone { transform: rotate(90deg); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stats div { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border-radius: var(--rayon); background: var(--bleu-50); }
.stats b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats small { font-size: 13px; font-weight: 600; color: var(--muet); }
.stats span { font-size: 12px; line-height: 1.3; color: var(--muet); overflow-wrap: anywhere; }
.stats span:lang(de) { hyphens: auto; } /* les mots composés de l'allemand (« Verkaufsargumente ») se coupent proprement */
.verdict-fiche { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--encre-2); }
.verdict-fiche .icone { width: 16px; height: 16px; margin-top: 2px; color: var(--attente); }
.verdict-fiche.est-ok .icone { color: var(--ok); }

/* Barre des sections : elle suit la lecture */
.ancres {
  position: sticky; top: 0; z-index: 10; display: flex; gap: 2px; height: var(--ancres-h); padding: 0 12px; overflow-x: auto;
  background: #fff; border: 1px solid var(--trait-doux); border-radius: var(--rayon); box-shadow: 0 2px 6px rgba(22, 29, 46, .06);
}
.ancres a { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--encre-2); font-weight: 600; white-space: nowrap; }
.ancres a:hover { color: var(--bleu); text-decoration: none; }
.ancres a.est-active { color: var(--bleu); border-bottom-color: var(--bleu); }
.section-fiche { --haut-entete: var(--ancres-h); scroll-margin-top: calc(var(--ancres-h) + 12px); }
.section-fiche .panneau-corps { display: grid; gap: 12px; }

/* Arguments rangés par enjeu */
.enjeux { display: grid; gap: var(--ecart); }
.enjeu > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 6px; border-bottom: 1px solid var(--trait); }
.enjeu h3 { font-size: 14px; font-weight: 700; }
.enjeu q { color: var(--muet); font-style: italic; quotes: "« " " »"; }
.enjeu > header .compte { margin-left: auto; }
.argument { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--trait-doux); }
.argument .formulation { max-width: 78ch; }
.argument .meta { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.argument .source { grid-column: 1 / -1; font-size: 12px; color: var(--muet); }
/* Repères vendeur (D72) : le sujet, puis l'explication, dans la largeur de lecture */
.reperes { display: grid; }
.repere { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--trait-doux); }
.repere:last-child { border-bottom: 0; }
.repere p { margin: 0; max-width: 78ch; }
.repere-sujet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.repere .source { font-size: 12px; color: var(--muet); }

/* Compatibilités : filtre et puces */
.barre-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.barre-filtre .champ-recherche { flex: 1 1 280px; max-width: 420px; }
/* Écran Fichiers : la recherche et trois listes, qui s'appliquent dès qu'on les change */
.filtre-fichiers select {
  height: 36px; flex: 0 1 200px; min-width: 130px; max-width: 240px; padding: 0 8px;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: #fff; color: var(--encre);
}
.filtre-fichiers select:focus-visible { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 28, 103, .14); }
.tableau-fichiers td.texte { min-width: 0; }
.tableau-fichiers td:first-child { width: 36%; min-width: 240px; }
.tableau-fichiers .fiches-du-document { width: 22%; }
.tableau-fichiers .type-du-document { width: 16%; }
.tableau-fichiers th, .tableau-fichiers td { padding-left: 10px; padding-right: 10px; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--trait); border-radius: 15px; background: #fff; color: var(--encre-2); font-size: 12.5px; font-weight: 600;
}
.puce:hover { border-color: var(--bleu); color: var(--bleu); }
.puce[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.puce[aria-pressed="true"] .compte { background: rgba(255, 255, 255, .2); color: #fff; }
.affichees { margin-left: auto; font-size: 12px; color: var(--muet); font-variant-numeric: tabular-nums; }
.lien-document { display: inline-flex; align-items: flex-start; gap: 6px; }
.lien-document .icone { width: 15px; height: 15px; margin-top: 2px; }

/* Contenu repliable */
details.replie > summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-weight: 600; cursor: pointer; list-style: none; }
details.replie > summary::-webkit-details-marker { display: none; }
details.replie > summary > .icone { width: 14px; height: 14px; transition: transform .15s; }
details.replie[open] > summary > .icone { transform: rotate(90deg); }
details.replie.panneau > summary { padding: 12px 16px; color: var(--encre-2); }
details.replie.panneau[open] > summary { border-bottom: 1px solid var(--trait-doux); }

/* ---------- Article ---------- */
.tete-article h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tete-article.avec-photo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: center; }
.article-photo { display: grid; gap: 6px; }
.article-photo .photo { border: 1px solid var(--trait-doux); background: #fff; }
.article-photo figcaption { font-size: 12px; color: var(--muet); }
.variante-article { margin-top: 4px; font-weight: 600; color: var(--encre-2); }
.numero-grand { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--bleu); letter-spacing: .01em; }

/* ---------- Administration et imports ---------- */
.etat { display: grid; gap: 12px; }
.ligne-etat { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.ligne-etat > .icone { margin-top: 2px; color: var(--bleu); }
.ligne-etat.a-voir > .icone { color: var(--attente); }
.ligne-etat b { display: block; font-weight: 600; }
.ligne-etat span { display: block; font-size: 12.5px; color: var(--muet); }
.carte-import { display: grid; gap: 12px; padding: 20px 22px; background: #fff; border: 1px solid var(--trait-doux); border-radius: var(--rayon); box-shadow: 0 1px 2px rgba(22, 29, 46, .06); }
.carte-import h2 { font-size: 17px; font-weight: 700; }
.carte-import form { display: grid; gap: 10px; }
.fichier { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); background: #fff; cursor: pointer; }
.fichier:hover { border-color: var(--bleu); }
.fichier > .icone { width: 22px; height: 22px; color: var(--bleu); }
.fichier > span { display: grid; gap: 6px; min-width: 0; }
.fichier b { font-weight: 600; }
.fichier input[type="file"] { max-width: 100%; font-size: 13px; color: var(--encre-2); }
.fichier input[type="file"]::file-selector-button {
  height: 30px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: #fff; color: var(--encre); font: 600 13px var(--police); cursor: pointer;
}
.fichier input[type="file"]::file-selector-button:hover { border-color: var(--bleu); color: var(--bleu); }

.liste-messages { display: grid; gap: 6px; }
.liste-messages li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--rayon); background: var(--bleu-50); }
.liste-messages li > .icone { color: var(--bleu); }
.liste-messages b { display: block; font-weight: 600; }
.liste-messages span { font-size: 12.5px; color: var(--muet); }
.liste-modeles { display: grid; gap: 2px; padding: 4px 0 4px 22px; }
.liste-modeles li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--trait-doux); }
.liste-modeles li:last-child { border-bottom: 0; }
.options-message .options-corps { display: grid; gap: 8px; padding: 2px 0 4px 22px; }
.formulaire-message label.case { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--encre); }
.formulaire-message label.case input { margin-top: 3px; accent-color: var(--bleu); }
.formulaire-message label.case-inactive { color: var(--muet); }
.formulaire-message select { height: 36px; padding: 0 8px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: #fff; color: var(--encre); font: 400 14px var(--police); }
.formulaire-message { display: grid; gap: 10px; }
.formulaire-message label { display: grid; gap: 4px; font-weight: 600; }
.formulaire-message label .muet { font-weight: 400; }
.formulaire-message textarea, .formulaire-message input[type="date"] {
  padding: 8px 10px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: #fff; color: var(--encre); font: 400 14px var(--police);
}
.formulaire-message textarea { resize: vertical; min-height: 58px; }
.formulaire-ligne { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.formulaire-ligne .bouton-principal { margin-left: auto; }
.formulaire-ligne label { font-weight: 400; color: var(--encre-2); }

.etapes { display: flex; }
.etapes li { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muet); font-weight: 600; }
.etapes li::after { content: ""; flex: 1; height: 1px; margin: 0 12px; background: var(--trait); }
.etapes li:last-child::after { display: none; }
.pastille-etape { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--trait-fort); border-radius: 50%; background: #fff; font-size: 12.5px; }
.pastille-etape .icone { width: 14px; height: 14px; }
.etapes li.est-faite { color: var(--encre-2); }
.etapes li.est-faite .pastille-etape { background: var(--ok); border-color: var(--ok); color: #fff; }
.etapes li.est-courante { color: var(--bleu); }
.etapes li.est-courante .pastille-etape { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.etapes small { display: block; font-size: 12px; font-weight: 400; color: var(--muet); }

.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; }
.verdict > .icone { width: 26px; height: 26px; }
.verdict > div:not(.verdict-actions) { flex: 1 1 320px; min-width: 0; }
.verdict h2 { font-size: 16px; }
.verdict p { color: var(--encre-2); }
.verdict.est-ok { border-color: #B9DEC7; background: var(--ok-fond); }
.verdict.est-ok > .icone { color: var(--ok); }
.verdict.est-non { border-color: #F0C2C4; background: var(--non-fond); }
.verdict.est-non > .icone { color: var(--non); }
.verdict-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.groupe-anomalies + .groupe-anomalies { margin-top: 14px; }
.groupe-anomalies > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2); }
.anomalies { display: grid; gap: 6px; }
.anomalie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 12px; background: #fff; border: 1px solid var(--trait-doux); border-left: 3px solid var(--trait-fort); border-radius: 2px; }
.anomalie.niveau-bloquant { border-left-color: var(--non); }
.anomalie.niveau-corriger { border-left-color: var(--attente); }
.anomalie.niveau-info { border-left-color: var(--bleu-300); }
.anomalie-onglet { font-size: 12px; font-weight: 600; color: var(--muet); }
.anomalie-message { font-weight: 600; }
.anomalie-nombre { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.anomalie-exemples { grid-column: 1 / -1; font: 12px var(--mono); color: var(--encre-2); overflow-wrap: anywhere; }

.exemples { display: grid; gap: 2px; }
.liste-exemples { display: grid; gap: 8px; padding: 4px 0 10px 22px; }
.liste-exemples ul { margin-top: 4px; padding-left: 14px; list-style: disc; color: var(--encre-2); }

.barre-actions {
  position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 20px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 12px rgba(22, 29, 46, .06);
}
.barre-actions .note { flex: 1 1 260px; font-size: 12.5px; }

/* ---------- Propositions (étape 3) ---------- */
.colonne-large { max-width: 1100px; }
.tete-avec-action { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.tete-avec-action .bouton .icone { width: 16px; height: 16px; }
.editeur { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 20px; align-items: start; }
.editeur-formulaire { display: grid; gap: 16px; min-width: 0; }
.editeur-apercu { position: sticky; top: 12px; display: grid; gap: 8px; min-width: 0; }
.grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.grille-champs label, .ajout-ligne label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre); }
.grille-champs label .muet { font-weight: 400; }
.grille-champs .large { grid-column: 1 / -1; }
.editeur-formulaire input:not([type="checkbox"]):not([type="radio"]) {
  height: 36px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: #fff; color: var(--encre); font: 400 14px var(--police);
}
.editeur-formulaire input:focus-visible { outline: 2px solid var(--bleu); outline-offset: 0; border-color: var(--bleu); }
.editeur-formulaire input.quantite:not([type="checkbox"]):not([type="radio"]) { width: 72px; text-align: right; }
.bordure-haut { border-top: 1px solid var(--trait-doux); }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; }
label.case { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--encre); cursor: pointer; }
label.case input { flex: none; margin-top: 3px; accent-color: var(--bleu); }
.lignes-proposition td { vertical-align: middle; }
.actions-ligne { white-space: nowrap; text-align: right; }
/* Place d'une ligne : une pastille à deux chevrons (monter, descendre) */
.ordre-ligne { display: inline-flex; vertical-align: middle; margin-right: 4px; border: 1px solid var(--trait); border-radius: 999px; background: #fff; overflow: hidden; }
.ordre-ligne button { display: grid; place-items: center; width: 27px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--encre-2); cursor: pointer; transition: background-color .12s, color .12s; }
.ordre-ligne button + button { border-left: 1px solid var(--trait-doux); }
.ordre-ligne button:hover:not(:disabled), .ordre-ligne button:focus-visible { background: var(--bleu-50); color: var(--bleu); }
.ordre-ligne button:disabled { color: var(--trait); cursor: default; }
.ordre-ligne .icone { width: 16px; height: 16px; }
.actions-ligne .bouton-icone { vertical-align: middle; }
/* Bloc 1 de la proposition : le côté du client à gauche, le nôtre à droite */
.cote { display: grid; gap: 12px; align-content: start; min-width: 0; }
.cote > .groupe { margin: 0; }
.cases-usage { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cases-usage .sous { display: block; font-size: 12px; color: var(--muet); }
/* Ce qui est retenu et que la page ne montre pas */
.hors-page { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--attente-fond); color: var(--attente); font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; vertical-align: 1px; }
.choix-photo-legende .hors-page { margin: 2px 0 0; }
.absences { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid #EBCB8B; border-left-width: 3px; border-radius: var(--rayon); background: #FFF9EC; font-size: 13px; }
.absences-titre { display: flex; align-items: center; gap: 8px; color: var(--attente); }
.absences-titre .icone { width: 17px; height: 17px; }
.absences ul { display: grid; gap: 3px; }
.absences li { padding-left: 12px; position: relative; }
.absences li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--attente); }
.absences-deborde { color: var(--non); font-weight: 600; }
/* D74 : la page ne se fait pas tant qu'une fiche n'est pas prête pour la page 1 */
.page-bloquee { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid #EBCB8B; border-left-width: 3px; border-radius: var(--rayon); background: #FFF9EC; font-size: 13px; }
.page-bloquee p { margin: 0; }
.page-bloquee-titre { display: flex; align-items: center; gap: 8px; color: var(--attente); }
.page-bloquee-titre .icone { width: 17px; height: 17px; }
.page-bloquee ul, .manques-page-1 { display: grid; gap: 3px; margin: 0; }
.page-bloquee li, .manques-page-1 li { padding-left: 12px; position: relative; }
.page-bloquee li::before, .manques-page-1 li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--attente); }
.seulement-avec-js { display: none; }
.js .seulement-avec-js { display: inline; }
.actions-ligne .bouton-icone { border: 0; background: transparent; cursor: pointer; }
.actions-ligne .bouton-icone:hover { background: var(--bleu-50); color: var(--bleu); }
.ajout-ligne { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.ajout-ligne label:first-child { flex: 1 1 200px; }
.ajout-ligne .bouton .icone { width: 16px; height: 16px; }
.machine-contenu { border-top: 1px solid var(--trait-doux); }
.machine-contenu > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 16px; cursor: pointer; }
.machine-contenu > summary .etiquette { margin-left: auto; }
.numeros-machine { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; font-weight: 400; }
.numero-copie-visible .copier { opacity: 1; }
.etat-selection-court { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muet); }
.etat-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 13px; color: var(--encre-2); }
.grille-contenu { display: grid; gap: 16px; padding-top: 4px; }
.grille-contenu > div { display: grid; gap: 6px; align-content: start; }
.petit-groupe { margin-top: 8px; }
.choix-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.choix-photo { display: grid; gap: 3px; align-content: start; padding: 6px; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: #fff; }
.choix-photo-image { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; background: #F7F8FA; cursor: zoom-in; }
.choix-photo-image .photo { background: #F7F8FA; border-radius: 4px; }
.choix-photo-image:hover, .choix-photo-image:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; }
.choix-photo-loupe {
  position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--encre); box-shadow: 0 1px 3px rgba(22, 29, 46, .15);
}
.choix-photo-loupe .icone { width: 14px; height: 14px; }
.choix-photo-legende { display: grid; gap: 1px; margin: 2px 0; font-size: 11.5px; line-height: 1.3; color: var(--encre-2); }
.choix-photo-legende b { color: var(--encre); font-size: 12px; }

/* Photo en grand, dans la proposition : flèches, légende de la fiche, place sur la page */
.dialogue-photo {
  width: min(1080px, 94vw); max-height: 94vh; padding: 0; border: 0; border-radius: 10px; background: #fff; color: var(--encre);
  box-shadow: 0 20px 60px rgba(10, 16, 35, .35); overflow: hidden;
}
.dialogue-photo[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.dialogue-photo::backdrop { background: rgba(10, 16, 35, .72); }
.dialogue-photo-tete { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--trait-doux); }
.dialogue-photo-tete p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; }
.dialogue-photo-tete .position { color: var(--bleu); font-variant-numeric: tabular-nums; }
.dialogue-fermer { margin-left: auto; border: 0; background: transparent; cursor: pointer; }
.dialogue-fermer:hover { background: var(--bleu-50); color: var(--bleu); }
.dialogue-photo-image { position: relative; display: grid; place-items: center; min-height: 0; height: min(70vh, 720px); background: #F4F6F9; }
.dialogue-photo-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dialogue-photo-image .fleche { opacity: .9; }
.dialogue-photo-pied { display: grid; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--trait-doux); }
.dialogue-photo-texte { margin: 0; color: var(--encre-2); font-size: 13.5px; }
.dialogue-photo-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dialogue-photo-choix .bouton .icone { width: 16px; height: 16px; display: none; }
.dialogue-photo-choix .bouton[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.dialogue-photo-choix .bouton[aria-pressed="true"] .icone { display: block; }
.dialogue-photo-choix .legende-original { margin-left: auto; }
.dialogue-message { margin: 0; padding: 6px 10px; border-radius: var(--rayon); background: var(--attente-fond); color: var(--attente); font-size: 13px; font-weight: 600; }
.barre-enregistrer {
  position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px;
  padding: 10px 14px; border: 1px solid var(--trait); border-radius: var(--rayon); background: rgba(255, 255, 255, .97);
  box-shadow: 0 -4px 12px rgba(22, 29, 46, .06);
}
.barre-enregistrer .bouton .icone { width: 16px; height: 16px; }
.etat-enregistrement { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; color: var(--encre-2); }
.etat-enregistrement > .icone { width: 18px; height: 18px; flex: none; }
.etat-enregistrement.est-ok { color: var(--ok); }
.etat-enregistrement.est-attente { color: var(--muet); }
.etat-enregistrement.est-erreur { color: var(--non); font-weight: 600; }
.bouton-defaut { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.js .seulement-sans-js { display: none; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.encart-info, .encart-ok { display: flex; gap: 8px; align-items: flex-start; }
.encart-info { border-color: var(--bleu-100); background: var(--bleu-50); color: var(--encre); }
.encart-ok { border-color: #BFE0CB; background: var(--ok-fond); color: var(--encre); }
.encart-info .icone, .encart-ok .icone { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.encart-ok .icone { color: var(--ok); }
.ligne-mise-en-avant > td { background: var(--ok-fond); }
.texte-non.bouton-discret { color: var(--non); }

/* Devis enrichi (étape 4) : le PDF du devis et les lignes lues */
.devis-pdf { display: grid; gap: 8px; }
.devis-charge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.devis-charge > .icone { width: 20px; height: 20px; color: var(--bleu); }
.devis-charge .sous { display: block; font-size: 12px; color: var(--muet); }
.actions-devis, .actions-lecture, .ajout-devis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ajout-devis input[type="file"], .editeur-formulaire .ajout-devis input[type="file"] { height: auto; padding: 6px 0; border: 0; background: none; width: auto; }
.ajout-devis .bouton .icone, .actions-lecture .bouton .icone { width: 16px; height: 16px; }
.choix-fichier { position: relative; cursor: pointer; }
.choix-fichier input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.lecture-devis { display: grid; gap: 10px; background: #FBFCFE; border-bottom: 1px solid var(--trait-doux); }
.lignes-lues td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
.lignes-lues td.texte { min-width: 200px; }
.lignes-lues td:last-child { white-space: normal; min-width: 150px; }
.editeur-formulaire .lignes-lues input.numero-lu:not([type="checkbox"]) { width: 170px; height: 32px; font-family: var(--mono); font-size: 13px; }
.editeur-formulaire .lignes-lues input.quantite:not([type="checkbox"]) { height: 32px; }
.lignes-lues input[type="checkbox"] { width: 16px; height: 16px; margin-top: 8px; accent-color: var(--bleu); }
.lignes-lues .etiquette + .sous, .lignes-lues .sous + .sous { margin-top: 2px; }
.apercu-corps { display: grid; gap: 10px; }
.tete-action { margin-left: auto; }
.apercu-perime { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--bleu-100); border-radius: var(--rayon); background: var(--bleu-50); }
.apercu-perime p { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--encre); }
.apercu-perime .icone { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--bleu); }
.apercu-perime .bouton { justify-self: start; }
.apercu-pages.est-en-cours img { opacity: .45; transition: opacity .2s; }
.apercu-pages { display: grid; gap: 10px; }
.apercu-pages img { display: block; width: 100%; height: auto; border: 1px solid var(--trait); border-radius: 3px; box-shadow: 0 2px 8px rgba(22, 29, 46, .10); background: #fff; }
.telechargements { display: flex; flex-wrap: wrap; gap: 8px; }
.telechargements .bouton .icone { width: 16px; height: 16px; }
.supprimer-proposition { justify-self: end; }
.supprimer-proposition .bouton-discret { color: var(--non); }

/* Portail d'essai : bandeau en haut de chaque page */
.bandeau-essai { padding: 6px 24px; background: var(--non-fond); color: var(--non); font-size: 12.5px; font-weight: 600; border-bottom: 1px solid #F0C2C4; }

/* ---------- Message temporaire ---------- */
.message {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: 420px; padding: 10px 14px;
  border-radius: var(--rayon); background: var(--encre); color: #fff; font-weight: 600;
  box-shadow: 0 8px 24px rgba(22, 29, 46, .25); opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.message.est-visible { opacity: 1; transform: none; }

/* ---------- Écrans plus étroits ---------- */
@media (max-width: 1180px) {
  .fiche-tete { grid-template-columns: minmax(0, 1fr); }
  .editeur { grid-template-columns: minmax(0, 1fr); }
  .editeur-apercu { position: static; }
  .filtres select { width: 170px; flex-basis: 170px; }
}
@media (max-width: 900px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .grille-champs { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contenu { padding: 16px; }
}

/* ---------- Étape 5 : connexion, comptes, mon compte ---------- */
.page-connexion { background: var(--fond); }
.connexion-cadre { width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 16px 32px; display: grid; gap: 16px; }
.connexion-marque { display: flex; align-items: center; gap: 12px; padding: 0 4px; color: var(--bleu-profond); }
.connexion-marque .esperluette { width: auto; height: 38px; flex: none; color: var(--bleu); }
.connexion-marque b { display: block; font-size: 16px; line-height: 1.2; color: var(--encre); }
.connexion-marque small { display: block; font-size: 12px; color: var(--muet); }
.connexion-corps { display: grid; gap: 14px; padding: 22px 24px 20px; }
.connexion-corps h1 { font-size: 20px; line-height: 1.25; }
.connexion-corps p { line-height: 1.5; }
.connexion-etape { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
.connexion-pied { font-size: 12px; color: var(--muet); text-align: center; line-height: 1.5; }
.connexion-corps .bouton-discret { justify-self: start; padding-left: 0; }
.formulaire-connexion { display: grid; gap: 12px; }
.formulaire-connexion label:not(.case) { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre); }
.formulaire-connexion label small { font-weight: 400; font-size: 12px; }
.formulaire-connexion .bouton-principal { height: 38px; }
.formulaire-connexion input:not([type="checkbox"]):not([type="hidden"]),
.formulaire-compte input:not([type="checkbox"]):not([type="hidden"]), .formulaire-compte select,
.formulaire-ligne input.champ-code, .formulaire-gestion input {
  height: 38px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: #fff; color: var(--encre); font: 400 14px var(--police);
}
.formulaire-connexion input:focus-visible, .formulaire-compte input:focus-visible, .formulaire-compte select:focus-visible,
.formulaire-ligne input:focus-visible, .formulaire-gestion input:focus-visible, .profil-compte select:focus-visible {
  outline: 2px solid var(--bleu); outline-offset: 0; border-color: var(--bleu);
}
input.champ-code { font-family: var(--mono) !important; font-size: 18px !important; letter-spacing: .18em; text-align: center; max-width: 230px; }
.formulaire-ligne input.champ-code { width: 200px; }
.etapes-inscription { display: grid; gap: 10px; margin: 0; padding-left: 22px; line-height: 1.5; list-style: decimal; }
.etapes-inscription li::marker { font-weight: 700; color: var(--bleu); }
.etapes-inscription .muet { margin-top: 6px; }
.etapes-inscription .muet .cle-secrete { display: inline-block; margin-top: 4px; font-size: 13px; white-space: nowrap; }
.qr-code { display: block; width: max-content; margin-top: 10px; padding: 8px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); line-height: 0; }
.qr-code svg { width: 184px; height: 184px; }
.cle-secrete { font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; background: var(--bleu-50); color: var(--encre); word-break: break-all; user-select: all; }
.codes-secours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0; padding: 12px 16px; list-style: none; border-radius: var(--rayon); background: var(--bleu-50); }
.codes-secours code { font-family: var(--mono); font-size: 15px; letter-spacing: .06em; color: var(--encre); user-select: all; }
.code-activation .cle-secrete { display: inline-block; margin: 6px 0; font-size: 16px; padding: 4px 8px; background: #fff; border: 1px solid var(--bleu-100); }

/* Menu : le compte connecté et la déconnexion */
.menu-compte { display: flex; align-items: center; gap: 2px; }
.menu-compte a { flex: 1; min-width: 0; height: auto !important; min-height: 44px; padding-top: 5px !important; padding-bottom: 5px !important; }
.menu-compte a > span { display: grid; min-width: 0; line-height: 1.25; }
.menu-compte b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.menu-compte small { font-size: 11.5px; color: rgba(255, 255, 255, .62); overflow: hidden; text-overflow: ellipsis; }
.menu-compte form { flex: none; }
.bouton-deconnexion {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: rgba(255, 255, 255, .84); cursor: pointer; transition: background-color .15s;
}
.bouton-deconnexion:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Administration > Comptes */
.tableau-comptes td { vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
.tableau-comptes .sous { display: block; }
.profil-compte { display: flex; gap: 6px; align-items: center; }
.profil-compte select { height: 30px; padding: 0 6px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: #fff; font: 400 13px var(--police); }
.tableau td.actions-compte { text-align: right; }
.boutons-compte { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 2px; }
.actions-compte .bouton { height: 30px; }
.gestion-compte { position: relative; }
.gestion-compte > summary { list-style: none; cursor: pointer; }
.gestion-compte > summary::-webkit-details-marker { display: none; }
.gestion-compte[open] > summary { background: var(--bleu-50); }
.formulaire-gestion {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; width: 320px; display: grid; gap: 8px; padding: 14px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 10px 28px rgba(22, 29, 46, .16);
  white-space: normal; text-align: left;
}
.formulaire-gestion label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--encre); }
.formulaire-gestion label .muet { font-weight: 400; }
.formulaire-gestion .bouton { justify-content: flex-start; width: 100%; height: 34px; }
/* Un libellé plus long dans une autre langue (« Telefon verloren: alles zurücksetzen ») passe à la ligne dans son bouton */
.formulaire-gestion .bouton:not(:lang(fr)) { height: auto; min-height: 34px; padding-top: 5px; padding-bottom: 5px; white-space: normal; text-align: left; }
.ligne-alerte > td { background: #FFF8F8; }
.ligne-alerte > td:first-child { box-shadow: inset 3px 0 0 var(--non); }
.colonne-etroite { max-width: 560px; }
.formulaire-ligne .libelle-code { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre); }
.panneau-corps > p + .formulaire-ligne { margin-top: 12px; }
.panneau-corps > .formulaire-ligne + .muet { margin-top: 10px; }
.liens-securite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.liens-securite .muet { flex: 1 1 260px; }
.actions-formulaire { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .connexion-cadre { padding-top: 24px; }
  .codes-secours { grid-template-columns: 1fr; }
  .etapes-inscription .muet .cle-secrete { white-space: normal; }
  .formulaire-gestion { position: static; width: auto; margin-top: 6px; box-shadow: none; }
}

/* Profil : photo, anniversaire */
.avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; background: var(--bleu-100); }
.avatar-grand { width: 96px; height: 96px; }
.avatar-initiales { display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--bleu); text-transform: uppercase; }
.avatar-grand.avatar-initiales { font-size: 30px; }
.menu-compte .avatar { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.menu-compte .avatar-initiales { background: rgba(255, 255, 255, .92); color: var(--bleu-profond); font-size: 12px; letter-spacing: .02em; }
.profil { display: grid; gap: 18px; }
.profil-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.formulaire-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.formulaire-photo label.bouton { cursor: pointer; }
.formulaire-photo label.bouton:focus-within { outline: 2px solid var(--bleu); outline-offset: 2px; }
.formulaire-photo .muet { flex-basis: 100%; }
.champ-anniversaire { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.champ-anniversaire legend { margin-bottom: 4px; padding: 0; font-size: 13px; font-weight: 600; color: var(--encre); }
.champ-anniversaire legend .muet { font-weight: 400; }
.champ-anniversaire select { height: 38px; padding: 0 8px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: #fff; font: 400 14px var(--police); }
.double-verification { display: grid; gap: 10px; }
.double-verification details.replie > summary { padding: 4px 0; color: var(--bleu); font-weight: 600; }
.double-verification details .formulaire-ligne { margin-top: 6px; }
.personne-compte { display: flex; align-items: flex-start; gap: 10px; }
.personne-compte .avatar { width: 28px; height: 28px; margin-top: 1px; }
.aujourdhui-anniversaire { color: #fff; font-weight: 600; }

/* ---------- Messages : tous les messages, détail d'une mise à jour du catalogue ---------- */
.fil-messages > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--trait-doux); }
.fil-messages > li:last-child { border-bottom: 0; }
.fil-messages > li.non-lu { background: #FAFBFE; box-shadow: inset 3px 0 0 var(--bleu); }
.fil-icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bleu-50); color: var(--bleu); }
.fil-icone .icone { width: 15px; height: 15px; }
.fil-corps { display: grid; gap: 4px; min-width: 0; }
.fil-texte { font-weight: 600; }
.est-lu .fil-texte { font-weight: 400; color: var(--encre-2); }
.fil-detail { white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
.fil-actions { display: flex; align-items: center; gap: 6px; }
.fil-actions .bouton { height: 30px; }
.fil-actions .bouton .icone, .tete-avec-action .bouton .icone { width: 15px; height: 15px; }
.liste-changements { padding: 6px 0; }
.liste-changements li { position: relative; padding: 5px 16px 5px 34px; line-height: 1.45; overflow-wrap: anywhere; }
.liste-changements li::before { content: ""; position: absolute; left: 19px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--bleu-300); }
.liste-references li { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 12px; }
.panneau-tete h2.titre-fiche { font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--encre); }
.panneau-tete h2.titre-fiche + .etiquette { margin-left: auto; }
@media (max-width: 720px) { .fil-messages > li { grid-template-columns: 28px minmax(0, 1fr); } .fil-actions { grid-column: 2; } }

/* ---------- Dossiers et stratégies (étape 7, agent commercial) ---------- */
/* Peu de couleur : le retard en ambre, le reste en gris. */
.menu-liens .compte-menu {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .18);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.boutons-tete { display: flex; flex-wrap: wrap; gap: 8px; }
.boutons-tete .icone { width: 16px; height: 16px; }
.filtre-fichiers label.case { align-items: center; color: var(--encre-2); }
.tableau tr.ligne-groupe th { padding-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--encre-2); background: var(--entete-tableau); }
.tableau tr.ligne-groupe.en-retard th, .tache.en-retard .tache-date, .revue-date.en-retard { color: var(--attente); }
.tableau-taches td:first-child { width: 110px; }
.formulaire-dossier { display: grid; gap: 16px; }
.formulaire-dossier input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .formulaire-dossier select, .formulaire-dossier textarea,
.dossier input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .dossier select, .dossier textarea {
  width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: #fff; color: var(--encre); font: 400 14px var(--police);
}
.formulaire-dossier textarea, .dossier textarea { resize: vertical; }
.formulaire-dossier :is(input, select, textarea):focus-visible, .dossier :is(input, select, textarea):focus-visible {
  outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 28, 103, .14);
}
.formulaire-dossier fieldset, .dossier fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 4px; min-width: 0; }
.formulaire-dossier legend, .dossier legend { padding: 0; font-size: 13px; font-weight: 600; }
.choix-statut { align-content: start; }
.choix-statut label.case, .cases-ligne label.case { display: inline-flex; margin-right: 16px; }
.cases-ligne { display: flex; flex-wrap: wrap; gap: 6px 0; }
.liste-doublons { margin: 6px 0; padding-left: 18px; }
.encart-alerte p + p, .encart-alerte .case { margin-top: 6px; }
.dossier .formulaire-ligne label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre); }
.dossier .formulaire-ligne label.large { flex: 1 1 280px; }
.dossier .formulaire-ligne .bouton-principal { margin-left: 0; }
.dossier .formulaire-ligne + .formulaire-ligne, .dossier .bordure-haut { margin-top: 12px; padding-top: 12px; }
.taches { list-style: none; padding: 0; }
.tache { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 10px 16px; border-bottom: 1px solid var(--trait-doux); }
.tache-date { font-variant-numeric: tabular-nums; font-weight: 600; }
.tache .sous, .revue .sous, .reference-strategies .sous { display: block; font-size: 12px; font-weight: 400; color: var(--muet); }
.tache-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px; }
.action-tache > summary { list-style: none; cursor: pointer; }
.action-tache > summary::-webkit-details-marker { display: none; }
.action-tache[open] { flex-basis: 100%; }
.action-tache form { display: grid; gap: 8px; min-width: 260px; margin-top: 8px; padding: 10px; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: var(--entete-tableau); }
.action-tache label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.action-tache .bouton { justify-self: start; }
.actions-ligne .action-tache { display: inline-block; text-align: left; }
.actions-ligne .action-tache form.grille-champs { grid-template-columns: repeat(2, minmax(160px, 1fr)); min-width: 420px; }
.panneau-pied.ajout-tache, .panneau-pied.ajout-personne, .panneau-pied.faites { display: block; }
.ajout-tache > summary, .ajout-personne > summary, .ajout-parcours > summary, .faites > summary, .reference-strategies > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--bleu); font-weight: 600;
}
.ajout-tache > summary .icone, .ajout-personne > summary .icone, .ajout-parcours > summary .icone { width: 16px; height: 16px; }
.ajout-tache form, .ajout-personne form, .ajout-parcours form { margin-top: 10px; }
.faites .tableau-cadre { margin-top: 8px; }
.suivi { display: grid; gap: 10px; }
.reference-strategies dl { display: grid; gap: 6px; margin-top: 8px; }
.reference-strategies dd { margin: 0 0 4px; color: var(--encre-2); font-size: 13px; }
.liste-partages { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.liste-partages li { display: flex; align-items: center; gap: 8px; }
.tableau-grille td.texte { min-width: 0; }
.tableau-grille td { white-space: normal; }
.tableau-grille tr.ligne-bloc th { padding-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2); background: var(--entete-tableau); }
.tableau-grille label.case { font-size: 12.5px; }
.formulaire-dossier .tableau-rythme input.jplus { width: 80px; }
.tableau-rythme td.texte { width: 62%; }
.tableau-rythme td { padding-top: 4px; padding-bottom: 4px; }
.texte-lu { max-height: 320px; overflow: auto; margin: 8px 0 0; padding: 10px; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: var(--entete-tableau); white-space: pre-wrap; font: 400 12.5px var(--police); }
.revue { list-style: none; padding: 0; }
.revue li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--trait-doux); }
.revue li:last-child { border-bottom: 0; }
.revue-date { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 900px) {
  .tache { grid-template-columns: minmax(0, 1fr); }
  .tache-actions { justify-content: flex-start; }
  .actions-ligne .action-tache form.grille-champs { grid-template-columns: minmax(0, 1fr); min-width: 0; }
}

/* ---------- Mises à jour des produits (0.12.0) ---------- */
/* Le script montre et cache des éléments qui ont leur propre « display » (étiquettes, formulaires) */
.maj [hidden] { display: none !important; }
.maj-page { max-width: 1480px; }
.maj input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .maj select, .maj textarea {
  min-width: 0; padding: 7px 10px; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: #fff; color: var(--encre); font: 400 14px var(--police);
}
.maj textarea { resize: vertical; }
.maj .champ-recherche input { padding-left: 34px !important; }
.maj :is(input, select, textarea):focus-visible { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 28, 103, .14); }
.maj .formulaire-ligne label { display: grid; gap: 4px; font-size: 13px; }
.maj .formulaire-ligne label.large { flex: 1 1 280px; }
.maj-ouverte { display: grid; gap: 14px; }
.maj-etapes li { align-items: flex-start; }
.maj-etapes small + small { margin-top: 1px; }
.maj-a-faire h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.maj-a-faire ul { margin: 0; padding-left: 18px; }
.maj-texte { display: grid; gap: 8px; }
.maj-texte .action-tache { justify-self: start; }
.maj-onglets { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 10px 0; border-bottom: 1px solid var(--trait-doux); }
.maj-onglets a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px 8px; border-bottom: 2px solid transparent; color: var(--encre-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.maj-onglets a:hover { color: var(--bleu); text-decoration: none; }
.maj-onglets a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--bleu); }
.compte.compte-a-valider { background: var(--attente-fond); color: var(--attente); }
.maj-filtre { padding: 10px 16px; border-bottom: 1px solid var(--trait-doux); }
.maj-filtre .etat-grille { margin-left: auto; }
.maj-cadre { overflow-x: auto; }
.maj-grille thead th { white-space: nowrap; vertical-align: bottom; padding-top: 6px; padding-bottom: 6px; }
.maj-grille td { white-space: normal; vertical-align: top; min-width: 130px; max-width: 280px; padding-top: 5px; padding-bottom: 5px; overflow-wrap: anywhere; }
.maj-grille td.maj-longue { min-width: 260px; }
.maj-grille td.maj-etat, .maj-grille td.maj-validation { min-width: 0; white-space: nowrap; }
.maj-grille input, .maj-grille textarea { width: 100%; padding: 3px 6px !important; font-size: 13px !important; border-color: var(--trait) !important; }
.maj-grille textarea { min-height: 32px; }
.maj-grille tr.maj-base > td { color: var(--encre-2); }
.maj-grille tr.maj-archivage .maj-valeur { text-decoration: line-through; color: var(--muet); }
.maj-grille td.maj-change, .maj-champ.maj-change { background: var(--bleu-50); }
.maj-grille td.maj-non-enregistre { box-shadow: inset 0 0 0 2px var(--non); }
.maj-avant { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muet); }
.maj-vide { font-style: italic; }
.maj-val + .maj-val { margin-left: 4px; }
.maj-val form { display: inline; }
.maj-etat .sous { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px; }
.maj-etat .sous .icone { width: 14px; height: 14px; }
.bouton.bouton-petit { min-height: 26px; padding: 0 8px; font-size: 12px; }
.maj-pied { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.maj-outils { display: grid; gap: 10px; justify-content: stretch; }
.maj-coller { display: grid; gap: 8px; margin-top: 10px; max-width: 760px; }
.maj-coller .bouton { justify-self: start; }
.maj-pied-texte { justify-content: flex-start; }
.maj-decision { display: flex; flex-wrap: wrap; gap: 6px; }
.maj-problemes, .maj-historique, .maj-commentaires, .maj-validations { list-style: none; margin: 0; padding: 0; }
.maj-problemes li, .maj-historique li { padding: 6px 16px; border-bottom: 1px solid var(--trait-doux); font-size: 13px; }
.maj-problemes li:last-child, .maj-historique li:last-child, .maj-commentaires li:last-child, .maj-validations li:last-child { border-bottom: 0; }
.maj-historique del, .maj-champ del { color: var(--muet); }
.maj-historique .sous, .maj-problemes .sous { display: block; margin-top: 2px; font-size: 12.5px; color: var(--encre-2); }
.maj-commentaires li { display: grid; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--trait-doux); }
.maj-commentaires .formulaire-ligne { margin-top: 4px; }
.maj-validations li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--trait-doux); }
.maj-en-ligne { display: inline-flex; }
.maj-fichier { display: grid; gap: 8px; justify-items: start; }
.maj-fichier p { margin: 0; }
.maj-apercu { display: block; max-width: 320px; max-height: 240px; border: 1px solid var(--trait-doux); border-radius: var(--rayon); }
.maj-formulaire-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.maj-champ { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 4px 6px; border-radius: var(--rayon); }
.maj-champ label { font-size: 13px; font-weight: 600; }
.maj-champ .texte-long { min-height: 20px; margin: 0; overflow-wrap: anywhere; }
.maj-champ p { margin: 0; }
.maj-commenter { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; }
.maj-commenter label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.maj-annuler { justify-self: start; }
@media (max-width: 900px) {
  .maj-formulaire-ligne, .maj-commenter { grid-template-columns: minmax(0, 1fr); }
}
.tableau-roles th.centre, .tableau-roles td.centre { text-align: center; white-space: normal; }
.tableau-roles thead th.centre { font-size: 12px; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }
.tableau-roles input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bleu); }
/* Allemand : « Produktaktualisierungen » ne tient pas sur une ligne du menu ; le mot se coupe (trait d'union invisible) */
.menu-liens a:lang(de) { white-space: normal; height: auto; min-height: 38px; padding-top: 4px; padding-bottom: 4px; line-height: 1.25; }