/* ==============================================================================
 * concurrence.css — l'habillage du module Concurrence.
 *
 * PORTÉ du labo `labos/labo-fiche-concurrent/`, déclaration pour déclaration.
 * La seule transformation est le CONFINEMENT : chaque sélecteur est préfixé de
 * `#view-concurrence`. Ce n'est pas de la coquetterie —
 *   • vers l'extérieur : le labo emploie `.btn`, `.page`, `.actions`, `.intro`,
 *     `.fin` … des noms que toute l'application emploie aussi. Sans confinement,
 *     ouvrir Concurrence repeindrait le CRM.
 *   • vers l'intérieur : un ID plus une classe (0,1,1,0) l'emporte sur la classe
 *     seule de Bootstrap (0,0,1,0) — donc `.btn` du labo gagne contre `.btn` de
 *     Bootstrap, sans un seul `!important`.
 *
 * RETIRÉ, et rien d'autre : le fond aurora et le reset du `body`. L'application
 * les porte déjà (`.upme-bg`) ; les garder empilerait deux aurora.
 * ============================================================================== */

  /* ── Fond aurora ─────────────────────────────────────────────────
     Reproduit ici : la page est autonome, elle ne voit pas le .upme-bg
     de l'application. Deux blobs FLOUS, jamais de radial-gradient
     (ses bords nets rendent le fond plat). */
  #view-concurrence *,#view-concurrence *::before,#view-concurrence *::after { box-sizing: border-box; }
  #view-concurrence {
    font: 15px/1.55 -apple-system, "Segoe UI", Roboto, system-ui, Helvetica, Arial, sans-serif;
    color: var(--up-color-text);
    -webkit-font-smoothing: antialiased;
    padding: 14px 20px 60px;
  }
  /* ── Verre : le token, le flou et le bord exacts du dashboard ── */
  #view-concurrence .verre {
    background: var(--up-card-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
            backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15,20,40,.07), inset 0 1px 0 rgba(255,255,255,.5);
  }
  html[data-theme="dark"] #view-concurrence .verre {
    background: var(--vz-card-bg, rgba(30,28,50,.6));
    border-color: rgba(180,170,230,.14);
    box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  }
  #view-concurrence .page { max-width: 1280px; margin: 0 auto; }
  /* Anneau de mise au point pour la navigation au CLAVIER seulement.
     `:focus-visible` ne se déclenche pas au clic de souris : celui qui clique
     garde l'écran calme, celui qui tabule sait toujours où il est. Les champs
     du tableau avaient bien un signe — bordure indigo, fond blanc — mais trop
     fin pour suivre une tabulation à travers quarante cases. */
  #view-concurrence :focus-visible {
    outline: 2px solid var(--vz-primary, #6366f1);
    outline-offset: 1px;
    border-radius: 6px;
  }
  html[data-theme="dark"] #view-concurrence :focus-visible { outline-color: #818cf8; }
  /* ── En-tête mince : le contenu domine ───────────────────────── */
  #view-concurrence .tete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  #view-concurrence .tete h1 { font-size: 19px; font-weight: 640; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
  #view-concurrence .tete .quoi { color: var(--up-color-text-muted); font-size: 13.5px; }
  #view-concurrence .tete .theme {
    border: 1px solid var(--up-color-border); background: transparent;
    color: var(--up-color-text-muted); border-radius: 9px; padding: 5px 11px;
    font: inherit; font-size: 12.5px; cursor: pointer;
  }
  #view-concurrence .tete .theme:hover { color: var(--up-color-text); border-color: rgba(99,102,241,.34); }
  /* ── Mesures : UNE ligne, pas trois cartes ────────────────────
     Ce sont les instruments du labo, pas le produit. En cartes elles
     mangeaient 103 px et repoussaient le tableau à 407 px du haut —
     l'habillage occupait la moitié de l'écran. Règle de la maison :
     en-tête minimale, le contenu domine. */
  #view-concurrence .tete .outils-labo { margin-left: auto; display: flex; gap: 6px; align-items: center; }
  /* ── Barre d'actions ─────────────────────────────────────────── */
  #view-concurrence .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
  #view-concurrence .btn {
    border: 1px solid var(--up-color-border); background: rgba(255,255,255,.45);
    color: var(--up-color-text); border-radius: 11px; padding: 9px 15px;
    font: inherit; font-size: 13.5px; font-weight: 560; cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  #view-concurrence .btn:hover { border-color: rgba(99,102,241,.34); color: #4f46e5; }
  #view-concurrence .btn.fort { background: var(--vz-primary, #6366f1); border-color: transparent; color: #fff; }
  #view-concurrence .btn.fort:hover { background: #5457e0; color: #fff; }
  #view-concurrence .btn.discret { background: transparent; color: var(--up-color-text-muted); }
  #view-concurrence .btn.mini { padding: 5px 10px; font-size: 12.5px; border-radius: 9px; }
  #view-concurrence .btn[disabled] { opacity: .5; cursor: not-allowed; }
  #view-concurrence .btn[disabled]:hover { border-color: var(--up-color-border); color: var(--up-color-text); }
  html[data-theme="dark"] #view-concurrence .btn { background: rgba(255,255,255,.06); }
  html[data-theme="dark"] #view-concurrence .btn:hover { color: #c7d2fe; border-color: rgba(129,140,248,.38); }
  #view-concurrence .note-suite { font-size: 12.5px; color: var(--up-color-text-subtle); }
  /* ── Onglets ─────────────────────────────────────────────────── */
  /* Les onglets s'alignent sur le BAS comme tout le reste de la barre. En
     `align-self: center` ils flottaient 8 px plus haut que le sélecteur et les
     boutons — la barre porte un champ avec étiquette, donc elle est plus haute
     que ses boutons, et un centrage vertical ne tombe jamais sur la même ligne. */
  #view-concurrence .onglets { display: inline-flex; gap: 4px; padding: 3px; border-radius: 13px;
             background: rgba(120,110,170,.08); margin: 0 4px 0 0; align-self: flex-end; }
  #view-concurrence .onglets button {
    border: 0; background: transparent; color: var(--up-color-text-muted);
    font: inherit; font-size: 13.5px; font-weight: 580; padding: 8px 16px;
    border-radius: 10px; cursor: pointer; transition: .16s; line-height: 1.15;
  }
  #view-concurrence .onglets button.on { background: rgba(99,102,241,.16); color: #4f46e5; }
  html[data-theme="dark"] #view-concurrence .onglets button.on { background: rgba(129,140,248,.22); color: #c7d2fe; }
  /* (07/08) Une « mise en avant » de l'onglet VS par liseré au repos a vécu
     quelques minutes ici : l'onglet actif et l'onglet souligné devenaient
     jumeaux — deux autorités sur la même rangée. Retirée. */
  /* ── Champs ──────────────────────────────────────────────────── */
  #view-concurrence input[type=text],#view-concurrence input[type=url],#view-concurrence input[type=number],#view-concurrence textarea,#view-concurrence select {
    border: 1px solid var(--up-color-border); border-radius: 11px;
    padding: 9px 12px; font: inherit; font-size: 14px;
    color: var(--up-color-text); background: rgba(255,255,255,.45);
    transition: background-color .18s ease; outline: none; width: 100%;
  }
  #view-concurrence input:focus,#view-concurrence textarea:focus,#view-concurrence select:focus {
    background: #fff; transition: none; border-color: rgba(99,102,241,.42);
  }
  html[data-theme="dark"] #view-concurrence input,html[data-theme="dark"] #view-concurrence textarea,html[data-theme="dark"] #view-concurrence select {
    background: rgba(255,255,255,.06);
  }
  html[data-theme="dark"] #view-concurrence input:focus,html[data-theme="dark"] #view-concurrence textarea:focus,html[data-theme="dark"] #view-concurrence select:focus { background: rgba(255,255,255,.10); }
  #view-concurrence textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
  #view-concurrence .champ { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; }
  #view-concurrence .champ label { font-size: 12px; color: var(--up-color-text-muted); font-weight: 560; }
  #view-concurrence .panneau { padding: 18px 20px; margin-bottom: 16px; display: none; }
  #view-concurrence .panneau.ouvert { display: block; }
  #view-concurrence .panneau h3 { font-size: 14.5px; font-weight: 620; margin: 0 0 4px; }
  #view-concurrence .panneau .intro { font-size: 13px; color: var(--up-color-text-muted); margin: 0 0 14px; max-width: 68ch; }
  #view-concurrence .panneau .intro b { color: var(--up-color-text); font-weight: 600; }
  #view-concurrence .entete-panneau { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  #view-concurrence .entete-panneau h3 { margin: 0; }
  #view-concurrence .entete-panneau .fin { margin-left: auto; display: flex; gap: 7px; align-items: center; }
  /* Une sortie visible. Le panneau ne se refermait qu'en recliquant le bouton
     qui l'avait ouvert — rien à l'écran ne le disait, et Fabrice a demandé
     comment on revient. Une croix en tête, un bouton en pied. */
  #view-concurrence .fermer-panneau {
    border: 1px solid var(--up-color-border); background: transparent;
    color: var(--up-color-text-muted); border-radius: 9px;
    width: 30px; height: 30px; line-height: 1; font-size: 17px;
    cursor: pointer; padding: 0;
  }
  #view-concurrence .fermer-panneau:hover { color: var(--up-color-text); border-color: rgba(99,102,241,.34); }
  /* Compteur de critères sur le bouton : il dit d'un coup d'œil que cette
     grille est la sienne et combien il y a mis. */
  #view-concurrence .pastille-n {
    display: inline-block; min-width: 19px; padding: 1px 6px; border-radius: 999px;
    background: rgba(99,102,241,.16); color: #4f46e5;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    margin-left: 5px; vertical-align: 1px;
  }
  html[data-theme="dark"] #view-concurrence .pastille-n { background: rgba(129,140,248,.22); color: #c7d2fe; }
  #view-concurrence .trait-vide {
    font-size: 13px; color: var(--up-color-text-subtle);
    padding: 12px 14px; border-radius: 11px;
    background: repeating-linear-gradient(-45deg, rgba(120,110,170,.07) 0 6px, transparent 6px 12px);
  }
  #view-concurrence .trait-ligne .ordre { display: inline-flex; gap: 2px; }
  #view-concurrence .trait-ligne .ordre button {
    border: 0; background: transparent; color: var(--up-color-text-subtle);
    cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 5px; border-radius: 6px;
  }
  #view-concurrence .trait-ligne .ordre button:hover { color: #4f46e5; background: rgba(99,102,241,.10); }
  #view-concurrence .trait-ligne .ordre button[disabled] { opacity: .3; cursor: default; }
  #view-concurrence .trait-ligne .ordre button[disabled]:hover { color: var(--up-color-text-subtle); background: transparent; }
  #view-concurrence .lignes { display: flex; gap: 10px; flex-wrap: wrap; }
  #view-concurrence .pied { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
  /* ── Éditeur de grille ───────────────────────────────────────── */
  #view-concurrence .traits-liste { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
  #view-concurrence .trait-ligne {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 11px; background: rgba(120,110,170,.06);
  }
  #view-concurrence .trait-ligne .socle {
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--up-color-text-subtle); padding: 2px 7px; border-radius: 6px;
    background: rgba(120,110,170,.10); white-space: nowrap;
  }
  #view-concurrence .trait-ligne input[type=text] { flex: 1 1 180px; width: auto; }
  #view-concurrence .trait-ligne select { flex: 0 0 178px; width: auto; }
  #view-concurrence .trait-ligne input.unite { flex: 0 0 90px; width: auto; }
  #view-concurrence .trait-ligne .sup {
    border: 0; background: transparent; color: var(--up-color-text-subtle);
    cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 7px;
  }
  #view-concurrence .trait-ligne .sup:hover { color: #b91c1c; background: rgba(185,28,28,.10); }
  /* ── Objets ──────────────────────────────────────────────────── */
  #view-concurrence .groupes { display: flex; flex-direction: column; gap: 14px; }
  #view-concurrence .groupe { padding: 0; overflow: hidden; }
  #view-concurrence .groupe > header {
    display: flex; align-items: center; gap: 11px; padding: 13px 18px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(120,110,170,.14);
  }
  #view-concurrence .groupe h2 { font-size: 15.5px; font-weight: 620; margin: 0; letter-spacing: -.015em; }
  #view-concurrence .groupe .moi {
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 620;
    padding: 3px 9px; border-radius: 7px; background: rgba(99,102,241,.16); color: #4f46e5;
  }
  html[data-theme="dark"] #view-concurrence .groupe .moi { background: rgba(129,140,248,.22); color: #c7d2fe; }
  #view-concurrence .groupe .fin { margin-left: auto; display: flex; gap: 7px; align-items: center; }
  #view-concurrence .produit { border-bottom: 1px solid rgba(120,110,170,.12); }
  #view-concurrence .produit:last-child { border-bottom: 0; }
  #view-concurrence .produit > .chef {
    display: flex; align-items: center; gap: 10px; padding: 11px 18px; cursor: pointer;
    flex-wrap: wrap;
  }
  #view-concurrence .produit > .chef:hover { background: rgba(120,110,170,.05); }
  #view-concurrence .produit .nom { font-weight: 580; font-size: 14px; }
  #view-concurrence .produit .gamme {
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--up-color-text-subtle); padding: 2px 8px; border-radius: 6px;
    background: rgba(120,110,170,.10); white-space: nowrap;
  }
  /* Le nom et la gamme sont désormais des CHAMPS — ils gardent l'apparence du
     texte tant qu'on ne les touche pas, et se révèlent au survol. Un cadre
     permanent transformerait la liste en formulaire ; l'absence totale de
     signe cacherait qu'on peut corriger. */
  #view-concurrence .produit input.nom-produit {
    font: inherit; font-weight: 580; font-size: 14px; color: inherit;
    border: 1px solid transparent; background: transparent;
    border-radius: 7px; padding: 3px 7px; width: 17ch; min-width: 8ch;
    cursor: text;
  }
  #view-concurrence .produit > .chef:hover input.nom-produit { border-color: rgba(120,110,170,.28); }
  #view-concurrence .produit input.nom-produit:focus {
    background: var(--up-color-surface, #fff); border-color: var(--vz-primary, #6366f1);
  }
  html[data-theme="dark"] #view-concurrence .produit input.nom-produit:focus { background: rgba(255,255,255,.10); }
  #view-concurrence .produit select.gamme-produit {
    font: inherit; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--up-color-text-subtle); padding: 3px 7px; border-radius: 6px;
    background: rgba(120,110,170,.10); border: 1px solid transparent;
    white-space: nowrap; cursor: pointer; appearance: none; text-align: center;
  }
  #view-concurrence .produit > .chef:hover select.gamme-produit { border-color: rgba(120,110,170,.28); }
  html[data-theme="dark"] #view-concurrence .produit select.gamme-produit { background: rgba(255,255,255,.07); }
  html[data-theme="dark"] #view-concurrence .produit select.gamme-produit option { background: #1e1c32; color: #f3f4f6; }
  #view-concurrence .produit .cat { font-size: 12.5px; color: var(--up-color-text-subtle); }
  #view-concurrence .produit .compte { margin-left: auto; font-size: 12.5px; color: var(--up-color-text-muted);
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
  #view-concurrence .produit .fleche { color: var(--up-color-text-subtle); font-size: 12px; }
  #view-concurrence .grille { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  #view-concurrence .grille th {
    text-align: left; font-weight: 560; font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--up-color-text-subtle);
    padding: 8px 18px; border-top: 1px solid rgba(120,110,170,.12);
    border-bottom: 1px solid rgba(120,110,170,.10);
  }
  #view-concurrence .grille td { padding: 8px 18px; border-bottom: 1px solid rgba(120,110,170,.17); vertical-align: middle; }
  html[data-theme="dark"] #view-concurrence .grille td { border-bottom-color: rgba(180,170,230,.14); }
  #view-concurrence .grille tr:last-child td { border-bottom: 0; }
  #view-concurrence .grille .trait { font-weight: 560; width: 200px; }
  #view-concurrence .grille .trait small { display: block; font-weight: 400; color: var(--up-color-text-subtle); font-size: 11.5px; }
  #view-concurrence .grille td.preuve { text-align: center; }
  #view-concurrence .grille td.valeur .avec-unite { display: flex; align-items: center; gap: 6px; }
  #view-concurrence .grille td.valeur .avec-unite .u { color: var(--up-color-text-subtle); font-size: 12.5px; white-space: nowrap; }
  /* Les quatre états. « Inconnu » est un TROU (hachuré pâle),
     « sans objet » est un RETRAIT (barré) — deux choses différentes,
     qu'on doit distinguer d'un coup d'œil. */
  #view-concurrence .etats { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px;
           background: rgba(120,110,170,.08); }
  #view-concurrence .etats button {
    border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 560;
    padding: 4px 9px; border-radius: 8px; cursor: pointer; color: var(--up-color-text-subtle);
    transition: .14s; white-space: nowrap;
  }
  #view-concurrence .etats button[data-e="oui"].on { background: rgba(5,150,105,.16); color: #047857; }
  #view-concurrence .etats button[data-e="non"].on { background: rgba(191,139,28,.18); color: #a8780f; }
  #view-concurrence .etats button[data-e="inconnu"].on {
    background: repeating-linear-gradient(-45deg, rgba(120,110,170,.16) 0 4px, transparent 4px 8px);
    color: var(--up-color-text-subtle);
  }
  #view-concurrence .etats button[data-e="sans_objet"].on {
    background: rgba(120,110,170,.14); color: var(--up-color-text-subtle);
    text-decoration: line-through;
  }
  /* Critère à valeur : un seul bouton, discret tant qu'il n'est pas armé. */
  #view-concurrence .bascule-so {
    border: 1px solid var(--up-color-border); background: transparent;
    color: var(--up-color-text-subtle); border-radius: 9px; padding: 5px 11px;
    font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  #view-concurrence .bascule-so:hover { color: var(--up-color-text); border-color: rgba(99,102,241,.34); }
  #view-concurrence .bascule-so.on {
    background: rgba(120,110,170,.14); color: var(--up-color-text-subtle);
    border-color: transparent; text-decoration: line-through;
  }
  html[data-theme="dark"] #view-concurrence .etats button[data-e="oui"].on { background: rgba(52,211,153,.18); color: #6ee7b7; }
  html[data-theme="dark"] #view-concurrence .etats button[data-e="non"].on { background: rgba(251,191,36,.18); color: #fcd34d; }
  /* Le jeton de preuve porte un VERBE : « Ajouter » quand la citation
     manque, « Voir » quand elle est là. Un glyphe se décode, un mot se lit. */
  #view-concurrence .jeton-preuve {
    border: 0; border-radius: 8px; padding: 4px 10px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: background-color .15s ease;
  }
  #view-concurrence .jeton-preuve.manque { background: rgba(191,139,28,.18); color: #a8780f; }
  #view-concurrence .jeton-preuve.manque:hover { background: rgba(191,139,28,.30); }
  #view-concurrence .jeton-preuve.ok { background: rgba(5,150,105,.14); color: #047857; font-weight: 500; }
  #view-concurrence .jeton-preuve.ok:hover { background: rgba(5,150,105,.24); }
  html[data-theme="dark"] #view-concurrence .jeton-preuve.manque { background: rgba(251,191,36,.18); color: #fcd34d; }
  html[data-theme="dark"] #view-concurrence .jeton-preuve.ok { background: rgba(52,211,153,.18); color: #6ee7b7; }
  #view-concurrence .grille td.preuve { width: 96px; }
  #view-concurrence .citation { padding: 0 18px 12px; }
  #view-concurrence .citation textarea { min-height: 62px; font-size: 13px; }
  #view-concurrence .citation .aide { font-size: 12px; color: var(--up-color-text-subtle); margin: 0 0 5px; }
  #view-concurrence .cit-pied { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
  #view-concurrence .cit-pied label { font-size: 12px; color: var(--up-color-text-muted); font-weight: 560; white-space: nowrap; }
  #view-concurrence .cit-pied select { width: auto; min-width: 168px; font-size: 12.5px; padding: 6px 9px; }
  /* Ajout d'un critère depuis la vue finale : on ne quitte pas la lecture
     pour aller chercher ce qui manque. */
  /* Bandeau d'ajout de critère : AU-DESSUS du tableau et bordé de pointillés
     indigo, pour qu'il se lise comme une zone d'action et non comme une ligne
     de données de plus. */
  #view-concurrence .bandeau-critere {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 14px; margin-bottom: 10px;
    border-style: dashed !important; border-color: rgba(99,102,241,.38) !important;
  }
  #view-concurrence .bandeau-critere .titre {
    font-size: 13.5px; font-weight: 620; color: #4f46e5; white-space: nowrap;
  }
  html[data-theme="dark"] #view-concurrence .bandeau-critere { border-color: rgba(129,140,248,.42) !important; }
  html[data-theme="dark"] #view-concurrence .bandeau-critere .titre { color: #c7d2fe; }
  #view-concurrence .zone-ajout input[type=text] { width: auto; flex: 1 1 240px; min-width: 190px; }
  #view-concurrence .zone-ajout select { width: auto; flex: 0 0 178px; }
  /* Le mot qui relie le nom du critère à sa nature : « rayon de braquage
     attend une réponse chiffrée ». La phrase se lit, la liste ne se devine plus. */
  #view-concurrence .mot-liant { font-size: 13px; color: var(--up-color-text-muted); white-space: nowrap; }
  #view-concurrence .zone-ajout input.unite { width: auto; flex: 0 0 92px; }
  #view-concurrence .zone-ajout .btn { white-space: nowrap; }
  /* Le second exemplaire, sous le tableau : même verre, marge du haut. */
  #view-concurrence .bandeau-critere.bas { margin: 10px 0 0; }
  /* Un champ hors sujet DISPARAÎT, il ne devient pas transparent.
     En `visibility:hidden` il gardait ses 190 px : on voyait un trou à la
     place d'un champ, et ça se lit comme un champ qui n'a pas su s'afficher. */
  #view-concurrence .masque { display: none !important; }
  /* ── Glisser-déposer des critères ──────────────────────────────
     La poignée dit que la ligne se prend ; le trait indigo dit où elle
     va tomber. Sans repère d'insertion, un glisser-déposer est un pari. */
  #view-concurrence .poignee {
    display: inline-block; margin-right: 9px; cursor: grab;
    color: var(--up-color-text-subtle); font-size: 13px; line-height: 1;
    user-select: none; vertical-align: 1px;
  }
  #view-concurrence .poignee:active { cursor: grabbing; }
  #view-concurrence .cmp tbody tr[draggable],#view-concurrence .trait-ligne[draggable] { cursor: default; }
  #view-concurrence .drag { opacity: .38; }
  #view-concurrence .cmp tbody tr.cible-haut td { box-shadow: inset 0 2px 0 0 var(--vz-primary, #6366f1); }
  #view-concurrence .cmp tbody tr.cible-bas  td { box-shadow: inset 0 -2px 0 0 var(--vz-primary, #6366f1); }
  #view-concurrence .trait-ligne.cible-haut { box-shadow: inset 0 2px 0 0 var(--vz-primary, #6366f1); }
  #view-concurrence .trait-ligne.cible-bas { box-shadow: inset 0 -2px 0 0 var(--vz-primary, #6366f1); }
  html[data-theme="dark"] #view-concurrence .cmp tbody tr.cible-haut td,html[data-theme="dark"] #view-concurrence .cmp tbody tr.cible-bas td,html[data-theme="dark"] #view-concurrence .trait-ligne.cible-haut,html[data-theme="dark"] #view-concurrence .trait-ligne.cible-bas { box-shadow: inset 0 2px 0 0 #818cf8; }
  /* ── Comparaison ─────────────────────────────────────────────── */
  /* En-tête figé. Le tableau défile DANS son cadre plutôt que la page : c'est
     la seule façon d'obtenir un en-tête collant ici, parce qu'un ancêtre en
     `overflow` devient lui-même la zone de référence du `sticky` — le coller
     à la fenêtre est impossible tant qu'on garde le défilement horizontal,
     nécessaire dès qu'on aligne beaucoup de concurrents. */
  /* UN SEUL défilement : celui de la page. Le cadre avait son propre
     ascenseur, qui se disputait avec celui du navigateur — deux barres
     côte à côte, on ne sait plus laquelle on tient. Le tableau est donc
     DÉPLOYÉ, et l'en-tête se colle directement à la fenêtre : c'est
     précisément ce que l'overflow du cadre empêchait. */
  #view-concurrence .cmp-bloc { position: static; }
  #view-concurrence .cmp-wrap { padding: 0; overflow: visible; }
  /* SUR ÉCRAN ÉTROIT, le confinement horizontal revient. Un tableau de
     4 concurrents fait ~1 250 px : sur un téléphone de 390 px, sans cadre
     qui le retient, c'est la PAGE qui part en travers — le titre et les
     boutons se décalent avec. Le compromis est assumé : sur grand écran,
     aucun cadre (donc un seul ascenseur et l'en-tête collé à la fenêtre) ;
     sur mobile, le tableau défile dans son cadre et l'en-tête se colle à
     lui, ce qui n'a aucune importance à cette taille. */
  /* CONFINEMENT HORIZONTAL CONDITIONNEL — décidé sur MESURE, pas sur une
     largeur d'écran devinée. Avec 8 produits le tableau fait ~1 950 px : sans
     cadre pour le retenir, c'est la PAGE qui part en travers, titre et boutons
     compris. Avec un cadre systématique, on retombe sur le double ascenseur.
     Donc : le cadre ne devient une zone de défilement QUE si le tableau
     dépasse réellement (classe posée par ajusterConfinement après chaque
     rendu). Le prix est assumé : dans ce cas seulement, l'en-tête se colle au
     cadre et non plus à la fenêtre. Une page qui défile de côté n'est jamais
     acceptable ; un en-tête qui suit le cadre, si. */
  #view-concurrence .cmp-wrap.deborde { overflow-x: auto; overscroll-behavior-x: contain; }

  @media (max-width: 900px) {
  #view-concurrence .cmp { min-width: 680px; }
  /* Sur téléphone, l'habillage occupait 725 px sur 844 — 14 % de contenu.
       On resserre tout ce qui n'est pas le tableau, et on retire le
       formulaire d'ajout du HAUT : celui du BAS suffit, il est même mieux
       placé quand on vient de faire défiler toute la comparaison. */
  #view-concurrence { padding: 10px 12px 40px; }
  #view-concurrence .tete h1 { font-size: 17px; }
  #view-concurrence .tete .quoi { display: none; }
  #view-concurrence .tete .outils-labo .btn { font-size: 12px; padding: 6px 9px; }
  #view-concurrence .mesures { gap: 10px 16px; padding: 8px 12px; margin: 8px 0; font-size: 12.5px; }
  #view-concurrence .mesures .m b { font-size: 14px; }
  #view-concurrence .mesures .m i { display: none; }
  #view-concurrence .actions { gap: 6px; margin-bottom: 8px; }
  #view-concurrence .onglets button { padding: 7px 11px; font-size: 12.5px; }
  #view-concurrence .actions .champ { flex: 1 1 100% !important; }
  #view-concurrence .bandeau-critere:not(.bas) { display: none; }
  #view-concurrence .cmp-bloc { position: static; }}
  #view-concurrence .cmp thead th {
    /* 57px = hauteur de `header#page-topbar` (fixe, constante desktop et
       mobile, mesurée le 07/08). À top:0, l'en-tête collait bien à la
       fenêtre… DERRIÈRE la barre de l'application, qui coupait les noms
       des concurrents. */
    position: sticky; top: 57px; z-index: 3;
    background: rgba(250,250,252,.985);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
            backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: inset 0 -1px 0 rgba(120,110,170,.20);
  }
  html[data-theme="dark"] #view-concurrence .cmp thead th { background: rgba(20,18,34,.985); }
  #view-concurrence .cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 680px; }
  #view-concurrence .cmp th {
    text-align: left; font-weight: 560; font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--up-color-text-subtle);
    padding: 11px 10px; border-bottom: 1px solid rgba(120,110,170,.30); white-space: nowrap;
  }
  #view-concurrence .cmp th.mien { color: #4f46e5; }
  html[data-theme="dark"] #view-concurrence .cmp th.mien { color: #c7d2fe; }
  /* Séparateurs assombris : à .09 on perdait la ligne en la suivant du
     regard jusqu'à la colonne de droite. Sur un comparateur, suivre une
     ligne EST le geste de base. */
  #view-concurrence .cmp td { padding: 9px 10px; border-bottom: 1px solid rgba(120,110,170,.19); position: relative; }
  html[data-theme="dark"] #view-concurrence .cmp td { border-bottom-color: rgba(180,170,230,.16); }
  /* Marqueur de jugement : deux pastilles en haut à droite de la case.
     Au repos, seule celle qu'on a choisie est visible ; les deux
     apparaissent au survol de la case. En position absolue pour ne jamais
     décaler le contenu quand elles se montrent. */
  /* UNE pastille par case, toujours visible, toujours au même endroit.
     Rien ne se déclenche au survol : deux ronds qui apparaissaient sous la
     souris faisaient du bruit à chaque passage, et le repère se déplaçait
     selon la couleur. Un rond vide est une case à cocher — il se comprend
     sans qu'on ait à le survoler. */
  #view-concurrence .cmp td .pt {
    position: absolute; top: 6px; right: 7px;
    width: 12px; height: 12px; border-radius: 50%; padding: 0; cursor: pointer;
    background: transparent; z-index: 1;
  }
  #view-concurrence .cmp td .pt.vide { border: 1.5px solid rgba(120,110,170,.34); }
  #view-concurrence .cmp td .pt.vert { border: 1.5px solid #059669; background: #059669; }
  #view-concurrence .cmp td .pt.rouge { border: 1.5px solid #dc2626; background: #dc2626; }
  html[data-theme="dark"] #view-concurrence .cmp td .pt.vide { border-color: rgba(180,170,230,.30); }
  html[data-theme="dark"] #view-concurrence .cmp td .pt.vert { border-color: #34d399; background: #34d399; }
  html[data-theme="dark"] #view-concurrence .cmp td .pt.rouge { border-color: #f87171; background: #f87171; }
  /* La case garde de l'air à droite pour que les pastilles ne chevauchent
     jamais une valeur longue. */
  #view-concurrence .cmp td .cel-edit,#view-concurrence .cmp td .cel-nb { padding-right: 12px; }
  #view-concurrence .cmp tr:last-child td { border-bottom: 0; }
  #view-concurrence .cmp .trait { font-weight: 560; white-space: normal; width: 215px; }
  /* Poignée + nom + croix sur UNE ligne, le nom prenant la place restante. */
  /* 🔴 Le flex vit sur un conteneur INTERNE, jamais sur le <td>. Posé sur la
     cellule, `display:flex` lui retire son comportement de cellule de
     tableau : elle cesse de s'étirer à la hauteur de la ligne (49 px mesurés
     dans une ligne de 77) et son contenu se cale en haut. Le nom du critère
     se retrouvait 14 px au-dessus de ses propres valeurs. */
  #view-concurrence .cmp td.trait { vertical-align: middle; }
  #view-concurrence .cmp td.trait > .trait-in { display: flex; align-items: center; gap: 2px; }
  /* Le nom se renomme sur place : il a l'air d'un texte, il devient un champ
     dès qu'on clique. Un bouton « modifier » de plus aurait chargé la ligne
     pour dire ce que le curseur dit déjà. */
  #view-concurrence .cmp .nom-critere {
    flex: 1 1 auto; width: auto; min-width: 0; max-width: none;
    border: 1px solid transparent; background: transparent; padding: 4px 6px;
    font: inherit; font-weight: 560; color: inherit; border-radius: 8px;
    cursor: text; transition: border-color .15s ease, background-color .15s ease;
  }
  #view-concurrence .cmp .nom-critere:hover { border-color: rgba(120,110,170,.24); }
  #view-concurrence .cmp .nom-critere:focus {
    border-color: rgba(99,102,241,.42); background: #fff; cursor: text;
  }
  html[data-theme="dark"] #view-concurrence .cmp .nom-critere:focus { background: rgba(255,255,255,.10); }
  #view-concurrence .cmp .sup-critere {
    border: 0; background: transparent; color: var(--up-color-text-subtle);
    font-size: 15px; line-height: 1; padding: 3px 6px; border-radius: 7px;
    cursor: pointer; margin-left: 2px;
  }
  #view-concurrence .cmp .sup-critere:hover { color: #b91c1c; background: rgba(185,28,28,.10); }
  /* Colonne de référence : le voile indigo suffit à la désigner. Le gras
     par-dessus faisait deux signaux pour une seule information, et alourdissait
     la colonne qu'on lit le plus souvent. */
  #view-concurrence .cmp td.mien { background: rgba(99,102,241,.07); }
  html[data-theme="dark"] #view-concurrence .cmp td.mien { background: rgba(129,140,248,.10); }
  #view-concurrence .cmp .cel { font-variant-numeric: tabular-nums; }
  #view-concurrence .cmp .cel.vide { color: var(--up-color-text-subtle); }
  /* Cases modifiables : elles ont l'air de texte, elles s'encadrent au survol,
     elles deviennent des champs quand on écrit. Le même geste que le nom du
     critère — un seul vocabulaire d'édition dans tout le tableau. */
  #view-concurrence .cmp .cel-edit {
    width: 100%; min-width: 0; border: 1px solid transparent; background: transparent;
    padding: 4px 6px; font: inherit; color: inherit; border-radius: 8px;
    font-variant-numeric: tabular-nums; cursor: text;
    transition: border-color .15s ease, background-color .15s ease;
  }
  #view-concurrence .cmp .cel-edit:hover { border-color: rgba(120,110,170,.24); }
  #view-concurrence .cmp .cel-edit:focus { border-color: rgba(99,102,241,.42); background: #fff; outline: none; }
  html[data-theme="dark"] #view-concurrence .cmp .cel-edit:focus { background: rgba(255,255,255,.10); }
  #view-concurrence .cmp .cel-edit::placeholder { color: var(--up-color-text-subtle); }
  #view-concurrence .cmp .cel-edit.precision { font-size: 12.5px; margin-top: 3px; }
  /* Les zones de texte se comportent comme du texte : pas de barre de
     redimensionnement, pas d'ascenseur, elles grandissent d'elles-mêmes. */
  #view-concurrence .cmp textarea.cel-edit {
    resize: none; overflow: hidden; display: block;
    line-height: 1.42; min-height: 0; font-family: inherit;
  }
  #view-concurrence .cmp .cel-nb { display: flex; align-items: center; gap: 5px; }
  #view-concurrence .cmp .cel-nb .u { color: var(--up-color-text-subtle); font-size: 12.5px; white-space: nowrap; }
  /* On retire les flèches du champ nombre : elles volent la moitié de la case
     et personne n'incrémente un prix d'un en un. */
  #view-concurrence .cmp input[type=number]::-webkit-outer-spin-button,#view-concurrence .cmp input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #view-concurrence .cmp input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  /* L'état d'un critère fermé : un vrai sélecteur, teinté de la couleur qu'il
     portait quand ce n'était qu'une pastille — on garde la lecture au coup
     d'œil ET on peut corriger. */
  /* L'état d'un critère fermé se lit comme du TEXTE une fois répondu : ni
     cadre, ni pavé de couleur, ni chevron. Le mot garde sa teinte — c'est elle
     qui permet de balayer la colonne du regard. Le sélecteur ne réapparaît
     qu'au survol ou à la mise au point : même geste que le nom du critère et
     que les cases de valeur, un seul vocabulaire d'édition dans le tableau. */
  #view-concurrence .cmp .cel-etat {
    width: auto; max-width: 100%; border: 1px solid transparent; border-radius: 8px;
    padding: 3px 22px 3px 6px; font: inherit; font-size: 12.5px; font-weight: 580;
    cursor: pointer; background-color: transparent;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: none; background-repeat: no-repeat;
    background-position: right 6px center; background-size: 10px;
    transition: background-color .15s ease, border-color .15s ease;
  }
  #view-concurrence .cmp .cel-etat.etat-oui { color: #047857; }
  #view-concurrence .cmp .cel-etat.etat-non { color: #a8780f; }
  /* « On ne sait pas » GARDE ses hachures au repos : ce n'est pas une réponse
     qu'on a donnée, c'est un trou — il doit se voir de loin, c'est le principe
     du module. Seuls oui et non s'effacent une fois répondus. */
  #view-concurrence .cmp .cel-etat.etat-inconnu {
    color: var(--up-color-text-subtle);
    background-image: repeating-linear-gradient(-45deg, rgba(120,110,170,.16) 0 4px, transparent 4px 8px);
    background-size: auto; background-position: 0 0;
  }
  html[data-theme="dark"] #view-concurrence .cmp .cel-etat.etat-oui { color: #6ee7b7; }
  html[data-theme="dark"] #view-concurrence .cmp .cel-etat.etat-non { color: #fcd34d; }
  /* Au survol / à la mise au point : le contrôle revient. */
  #view-concurrence .cmp .cel-etat:hover,#view-concurrence .cmp .cel-etat:focus {
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b5872' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  #view-concurrence .cmp .cel-etat.etat-oui:hover,#view-concurrence .cmp .cel-etat.etat-oui:focus { background-color: rgba(5,150,105,.16); }
  #view-concurrence .cmp .cel-etat.etat-non:hover,#view-concurrence .cmp .cel-etat.etat-non:focus { background-color: rgba(191,139,28,.18); }
  /* Au survol de « on ne sait pas » : le chevron s'ajoute AUX hachures, on ne
     les remplace pas — sinon le trou disparaîtrait juste quand on le vise. */
  #view-concurrence .cmp .cel-etat.etat-inconnu:hover,#view-concurrence .cmp .cel-etat.etat-inconnu:focus {
    background-color: rgba(120,110,170,.10);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b5872' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
      repeating-linear-gradient(-45deg, rgba(120,110,170,.16) 0 4px, transparent 4px 8px);
    background-repeat: no-repeat, repeat;
    background-position: right 6px center, 0 0;
    background-size: 10px, auto;
  }
  html[data-theme="dark"] #view-concurrence .cmp .cel-etat.etat-oui:hover,html[data-theme="dark"] #view-concurrence .cmp .cel-etat.etat-oui:focus { background-color: rgba(52,211,153,.18); }
  html[data-theme="dark"] #view-concurrence .cmp .cel-etat.etat-non:hover,html[data-theme="dark"] #view-concurrence .cmp .cel-etat.etat-non:focus { background-color: rgba(251,191,36,.18); }
  #view-concurrence .cmp .cel-so {
    border: 1px dashed rgba(120,110,170,.30); background: transparent;
    color: var(--up-color-text-subtle); text-decoration: line-through;
    border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 12.5px; cursor: pointer;
  }
  #view-concurrence .cmp .cel-so:hover { text-decoration: none; border-color: rgba(99,102,241,.34); color: var(--up-color-text); }
  #view-concurrence .pastille { display: inline-block; width: 15px; height: 15px; border-radius: 5px; vertical-align: -2px; }
  #view-concurrence .pastille.oui { background: rgba(5,150,105,.55); }
  #view-concurrence .pastille.non { background: rgba(191,139,28,.55); }
  #view-concurrence .pastille.inconnu {
    background: repeating-linear-gradient(-45deg, rgba(120,110,170,.30) 0 3px, transparent 3px 6px);
    box-shadow: inset 0 0 0 1px rgba(120,110,170,.22);
  }
  #view-concurrence .pastille.sans_objet { background: rgba(120,110,170,.16); box-shadow: inset 0 0 0 1px rgba(120,110,170,.24); }
  /* MON JUGEMENT — le seul endroit du tableau où c'est l'utilisateur qui
     tranche, et le seul contrôle d'une ligne. Vierge, il doit APPELER le
     clic : contour tireté et le mot « À qualifier ». Posé, il prend sa
     couleur et se lit d'un balayage vertical. */
  #view-concurrence .jug { -webkit-appearance: none; appearance: none; cursor: pointer;
         border: 1px solid transparent; padding: 3px 9px; border-radius: 8px;
         font-family: inherit; font-size: 12px; font-weight: 620;
         max-width: 100%; line-height: 1.5; }
  #view-concurrence .jug:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
  #view-concurrence .jug.vierge { background: transparent; font-weight: 500;
                color: var(--up-color-text-subtle);
                border-color: rgba(120,110,170,.5); border-style: dashed; }
  #view-concurrence .jug.vierge:hover { color: var(--up-color-text); border-color: rgba(99,102,241,.75); }
  #view-concurrence .jug.fort { background: rgba(5,150,105,.15);   color: #047857; }
  #view-concurrence .jug.faible { background: rgba(190,30,45,.13);   color: #b91c1c; }
  #view-concurrence .jug.surveiller { background: rgba(191,139,28,.18);  color: #92600e; }
  #view-concurrence .jug.neutre { background: rgba(120,110,170,.14); color: var(--up-color-text-muted); }
  html[data-theme="dark"] #view-concurrence .jug.fort { background: rgba(16,185,129,.22);  color: #a7f3d0; }
  html[data-theme="dark"] #view-concurrence .jug.faible { background: rgba(248,113,113,.22); color: #fecaca; }
  html[data-theme="dark"] #view-concurrence .jug.surveiller { background: rgba(251,191,36,.22);  color: #fde68a; }
  #view-concurrence .jug option { background: #fff; color: #1b1a2e; font-weight: 500; }
  html[data-theme="dark"] #view-concurrence .jug option { background: #201f33; color: #e7e5f2; }
  #view-concurrence .cmp .jug-col { width: 152px; }
  #view-concurrence .cmp .detail { color: var(--up-color-text-subtle); font-size: 12.5px;
                 font-variant-numeric: tabular-nums; min-width: 140px; max-width: 210px; }
  #view-concurrence .cmp .detail .position { color: #4f46e5; font-weight: 600; }
  html[data-theme="dark"] #view-concurrence .cmp .detail .position { color: #c7d2fe; }
  /* Ce qu'il reste à aller chercher : présent sur chaque ligne concernée,
     mais jamais au même rang visuel que ce qu'on sait déjà. */
  #view-concurrence .cmp .detail .manque { color: var(--up-color-text-subtle); font-style: italic; }
  #view-concurrence .lecture { margin-top: 10px; padding: 12px 16px; font-size: 13px; color: var(--up-color-text-muted); line-height: 1.65; }
  #view-concurrence .lecture b { color: var(--up-color-text); font-weight: 600; }
  /* PAUL — le bouton porte l'action, pas un symbole. Il ne s'affiche que si
     le Companion est là : proposer une lecture qu'on ne peut pas faire est
     pire que ne rien proposer. */
  #view-concurrence .btn.paul { border-color: rgba(99,102,241,.45); color: #4f46e5; font-weight: 600; }
  #view-concurrence .btn.paul:disabled { opacity: .45; cursor: default; }
  html[data-theme="dark"] #view-concurrence .btn.paul { color: #c7d2fe; }
  /* Une réponse posée par Paul et jamais relue par un humain. Discrète mais
     LISIBLE : c'est la frontière entre ce qui est deviné et ce qui est su. */
  #view-concurrence .par-paul { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
              font-size: 10.5px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase;
              background: rgba(99,102,241,.13); color: #4f46e5; vertical-align: 2px; }
  #view-concurrence .par-paul.corrige { background: rgba(191,139,28,.18); color: #92600e; }
  html[data-theme="dark"] #view-concurrence .par-paul { background: rgba(129,140,248,.22); color: #c7d2fe; }
  /* Compte rendu de lecture, dans le bandeau de mesure : il dit ce que Paul a
     posé ET ce qu'il a fallu corriger. La seconde moitié est le vrai sujet. */
  /* Le fil d'état est le SEUL retour pendant la chaîne. Autonome depuis
     que le bandeau de mesures est parti : il portait son fond, restait à
     l'écran vide, et donnait une barre de verre qui ne disait rien. */
  #view-concurrence #paul-etat {
    display: none; margin: 12px 0 10px; padding: 9px 15px;
    border-radius: 14px; font-size: 12.5px; line-height: 1.6;
    color: var(--up-color-text-muted);
    background: var(--up-card-glass, rgba(255,255,255,.46));
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.5);
  }
  #view-concurrence #paul-etat.visible { display: block; }
  #view-concurrence #paul-etat b { color: var(--up-color-text); font-weight: 620; }
  #view-concurrence #paul-etat .rouge { color: #b91c1c; font-weight: 620; }
  html[data-theme="dark"] #view-concurrence #paul-etat .rouge { color: #fecaca; }
  /* 🔴 L'accès à la fiche est un VRAI BOUTON dans l'en-tête de colonne.
     Il a d'abord été un nom souligné en pointillé dans un sous-titre gris :
     présent dans le DOM, invisible à l'écran. Fabrice ne l'a pas vu, et il a
     raison — « si je ne le vois pas, mes clients ne le verront pas ». Une
     ligne à lui, un fond, une flèche : on ne peut plus le manquer. */
  #view-concurrence .btn-fiche-col {
    display: inline-block; margin-top: 7px; padding: 3px 10px;
    font-family: inherit; font-size: 11px; font-weight: 640;
    letter-spacing: .04em; text-transform: none; white-space: nowrap;
    color: #4f46e5; background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.3); border-radius: 7px; cursor: pointer;
  }
  #view-concurrence .btn-fiche-col:hover { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.55); }
  #view-concurrence .btn-fiche-col:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
  html[data-theme="dark"] #view-concurrence .btn-fiche-col {
    color: #c7d2fe; background: rgba(129,140,248,.2); border-color: rgba(129,140,248,.4);
  }
  /* ══ LA FICHE CONCURRENT ══════════════════════════════════════
     Sept parties, et la démarcation est le sujet : sept cadres empilés
     font un mur, sept traits pleins font un formulaire administratif.
     Ici chaque partie s'annonce par un intitulé en petites capitales
     espacées, suivi d'un filet qui NAÎT du texte et s'éteint avant le
     bord. L'œil sait où il est sans qu'on lui pose une boîte autour. */
  #view-concurrence .fiche { max-width: 1100px; }
  #view-concurrence .fiche-tete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
                padding: 22px 26px 18px; }
  #view-concurrence .fiche-tete h2 { margin: 0; font-family: var(--up-font-display, Georgia, serif);
                   font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
  #view-concurrence .fiche-tete .type { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
                      font-weight: 640; color: #4f46e5; }
  html[data-theme="dark"] #view-concurrence .fiche-tete .type { color: #c7d2fe; }
  #view-concurrence .fiche-tete .retour { margin-left: auto; }
  #view-concurrence .bloc-fiche { padding: 4px 26px 26px; }
  #view-concurrence .bloc-fiche > header { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
  #view-concurrence .bloc-fiche > header .titre {
    font-size: 11px; font-weight: 680; text-transform: uppercase; letter-spacing: .14em;
    color: var(--up-color-text); white-space: nowrap;
  }
  #view-concurrence .bloc-fiche > header .ou {
    font-size: 11.5px; color: var(--up-color-text-subtle); white-space: nowrap;
  }
  /* Le filet : il part du texte et se dissout. Un trait plein d'un bord à
     l'autre découpe la page en tiroirs ; celui-ci sépare sans cloisonner. */
  #view-concurrence .bloc-fiche > header::after {
    content: ''; flex: 1 1 auto; height: 1px; align-self: center;
    background: linear-gradient(90deg, rgba(120,110,170,.34), rgba(120,110,170,0));
  }
  #view-concurrence .champs-fiche { display: flex; flex-wrap: wrap; gap: 14px 22px; }
  #view-concurrence .champs-fiche .cf { flex: 0 1 auto; min-width: 130px; }
  #view-concurrence .champs-fiche .cf > label {
    display: block; font-size: 11px; color: var(--up-color-text-subtle);
    margin-bottom: 3px; letter-spacing: .02em;
  }
  #view-concurrence .champs-fiche .cf input,#view-concurrence .champs-fiche .cf select {
    width: 100%; font-family: inherit; font-size: 13.5px; color: var(--up-color-text);
    background: transparent; border: 0; border-bottom: 1px solid rgba(120,110,170,.32);
    padding: 3px 0 4px;
  }
  #view-concurrence .champs-fiche .cf input:focus,#view-concurrence .champs-fiche .cf select:focus {
    outline: none; border-bottom-color: #6366f1;
  }
  #view-concurrence .champs-fiche .cf input::placeholder { color: var(--up-color-text-subtle); opacity: .65; }
  /* Ce que la fiche SAIT sans qu'on le saisisse — jamais un champ, sinon on
     laisse croire que ça se corrige à la main. */
  #view-concurrence .faits { display: flex; flex-wrap: wrap; gap: 10px 30px; }
  #view-concurrence .faits .f { min-width: 110px; }
  #view-concurrence .faits .f b { display: block; font-size: 17px; font-weight: 640;
                font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  #view-concurrence .faits .f span { font-size: 11.5px; color: var(--up-color-text-subtle); }
  #view-concurrence .dit { display: flex; flex-direction: column; gap: 12px; }
  #view-concurrence .dit .d { display: flex; gap: 14px; align-items: baseline; }
  #view-concurrence .dit .d > i { flex: 0 0 118px; font-style: normal; font-size: 11.5px;
                color: var(--up-color-text-subtle); }
  #view-concurrence .dit .d > q { font-size: 14px; line-height: 1.55; quotes: '« ' ' »'; }
  #view-concurrence .dit .d > q.vide { color: var(--up-color-text-subtle); font-style: italic; quotes: none; }
  #view-concurrence .prods-fiche { display: flex; flex-direction: column; gap: 8px; }
  #view-concurrence .prods-fiche .p { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
  #view-concurrence .prods-fiche .p .nm { font-weight: 560; }
  #view-concurrence .prods-fiche .p .rr { margin-left: auto; font-size: 12px; color: var(--up-color-text-subtle);
                        font-variant-numeric: tabular-nums; }
  #view-concurrence .frise { display: flex; flex-direction: column; gap: 0; }
  #view-concurrence .frise .ev { display: flex; gap: 14px; align-items: baseline; padding: 8px 0;
               border-bottom: 1px solid rgba(120,110,170,.14); }
  #view-concurrence .frise .ev:last-of-type { border-bottom: 0; }
  #view-concurrence .frise .ev time { flex: 0 0 92px; font-size: 12px; font-variant-numeric: tabular-nums;
                    color: var(--up-color-text-subtle); }
  #view-concurrence .frise .ev p { margin: 0; font-size: 13.5px; flex: 1 1 auto; }
  #view-concurrence .frise .ev button { flex: 0 0 auto; }
  /* Une partie qui attend son branchement le DIT, et dit d'où viendra la
     donnée. Un bloc vide sans explication se lit « il n'y a rien à savoir ». */
  #view-concurrence .attente-bloc { font-size: 13px; color: var(--up-color-text-muted); line-height: 1.6;
                  padding: 10px 14px; border-radius: 10px;
                  background: repeating-linear-gradient(-45deg,
                    rgba(120,110,170,.07) 0 6px, transparent 6px 12px); }
  #view-concurrence .attente-bloc b { color: var(--up-color-text); font-weight: 600; }
  #view-concurrence .jug-lus { display: flex; flex-wrap: wrap; gap: 8px; }
  #view-concurrence .jug-lus .jl { font-size: 12.5px; padding: 4px 10px; border-radius: 8px; font-weight: 560; }
  #view-concurrence .jug-lus .jl.fort { background: rgba(5,150,105,.15);   color: #047857; }
  #view-concurrence .jug-lus .jl.faible { background: rgba(190,30,45,.13);   color: #b91c1c; }
  #view-concurrence .jug-lus .jl.surveiller { background: rgba(191,139,28,.18);  color: #92600e; }
  #view-concurrence .jug-lus .jl.neutre { background: rgba(120,110,170,.14); color: var(--up-color-text-muted); }
  html[data-theme="dark"] #view-concurrence .jug-lus .jl.fort { background: rgba(16,185,129,.22);  color: #a7f3d0; }
  html[data-theme="dark"] #view-concurrence .jug-lus .jl.faible { background: rgba(248,113,113,.22); color: #fecaca; }
  html[data-theme="dark"] #view-concurrence .jug-lus .jl.surveiller { background: rgba(251,191,36,.22);  color: #fde68a; }
  #view-concurrence .notes-fiche { width: 100%; min-height: 74px; font-family: inherit; font-size: 13.5px;
                 line-height: 1.6; color: var(--up-color-text); background: transparent;
                 border: 1px solid rgba(120,110,170,.28); border-radius: 10px; padding: 10px 12px;
                 resize: vertical; }
  #view-concurrence .notes-fiche:focus { outline: none; border-color: #6366f1; }

  @media (max-width: 900px) {
  #view-concurrence .fiche-tete,#view-concurrence .bloc-fiche { padding-left: 16px; padding-right: 16px; }
  #view-concurrence .dit .d { flex-direction: column; gap: 2px; }
  #view-concurrence .dit .d > i { flex: none; }}
  /* ══ LA SYNTHÈSE ══════════════════════════════════════════════
     Quatre parties, même démarcation que la fiche : intitulé en petites
     capitales, filet qui se dissout. Chaque partie répond à UNE question
     et se termine par ce qu'il y a à faire. */
  #view-concurrence .synth { max-width: 1060px; }
  #view-concurrence .synth-tete { padding: 22px 26px 6px; }
  #view-concurrence .synth-tete h2 { margin: 0 0 4px; font-family: var(--up-font-display, Georgia, serif);
                   font-size: 25px; font-weight: 600; letter-spacing: -.01em; }
  #view-concurrence .synth-tete p { margin: 0; font-size: 13.5px; color: var(--up-color-text-muted); line-height: 1.6; }
  #view-concurrence .ecart { display: flex; flex-direction: column; }
  #view-concurrence .ecart .l {
    display: grid; grid-template-columns: 190px 1fr 150px; gap: 16px;
    align-items: baseline; padding: 11px 0;
    border-bottom: 1px solid rgba(120,110,170,.14);
  }
  #view-concurrence .ecart .l:last-child { border-bottom: 0; }
  #view-concurrence .ecart .cr { font-weight: 560; font-size: 14px; }
  #view-concurrence .ecart .dt { font-size: 13px; color: var(--up-color-text-muted); font-variant-numeric: tabular-nums; }
  #view-concurrence .ecart .dt b { color: var(--up-color-text); font-weight: 620; }
  #view-concurrence .ecart .vs { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
  #view-concurrence .ecart .vs.retard { color: #b91c1c; font-weight: 620; }
  #view-concurrence .ecart .vs.avance { color: #047857; font-weight: 620; }
  html[data-theme="dark"] #view-concurrence .ecart .vs.retard { color: #fecaca; }
  html[data-theme="dark"] #view-concurrence .ecart .vs.avance { color: #a7f3d0; }
  /* La décision par critère : Éliminer · Atténuer · Renforcer · Créer.
     C'est la couche ACTE — ce que la comparaison n'avait pas. Elle est
     posée par l'utilisateur, jamais déduite. */
  #view-concurrence .dec { -webkit-appearance: none; appearance: none; cursor: pointer;
         border: 1px solid transparent; padding: 3px 9px; border-radius: 8px;
         font-family: inherit; font-size: 12px; font-weight: 620; max-width: 100%; }
  #view-concurrence .dec:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
  #view-concurrence .dec.vierge { background: transparent; font-weight: 500; color: var(--up-color-text-subtle);
                border-color: rgba(120,110,170,.5); border-style: dashed; }
  #view-concurrence .dec.vierge:hover { color: var(--up-color-text); border-color: rgba(99,102,241,.75); }
  #view-concurrence .dec.creer { background: rgba(99,102,241,.16);  color: #4f46e5; }
  #view-concurrence .dec.renforcer { background: rgba(5,150,105,.15);   color: #047857; }
  #view-concurrence .dec.attenuer { background: rgba(191,139,28,.18);  color: #92600e; }
  #view-concurrence .dec.eliminer { background: rgba(190,30,45,.13);   color: #b91c1c; }
  #view-concurrence .dec.rien { background: rgba(120,110,170,.14); color: var(--up-color-text-muted); }
  html[data-theme="dark"] #view-concurrence .dec.creer { background: rgba(129,140,248,.22); color: #c7d2fe; }
  html[data-theme="dark"] #view-concurrence .dec.renforcer { background: rgba(16,185,129,.22);  color: #a7f3d0; }
  html[data-theme="dark"] #view-concurrence .dec.attenuer { background: rgba(251,191,36,.22);  color: #fde68a; }
  html[data-theme="dark"] #view-concurrence .dec.eliminer { background: rgba(248,113,113,.22); color: #fecaca; }
  #view-concurrence .dec option { background: #fff; color: #1b1a2e; font-weight: 500; }
  html[data-theme="dark"] #view-concurrence .dec option { background: #201f33; color: #e7e5f2; }
  #view-concurrence .synth-vide { font-size: 13.5px; color: var(--up-color-text-muted); line-height: 1.6;
                padding: 10px 14px; border-radius: 10px;
                background: repeating-linear-gradient(-45deg,
                  rgba(120,110,170,.07) 0 6px, transparent 6px 12px); }
  #view-concurrence .synth-vide b { color: var(--up-color-text); font-weight: 600; }

  @media (max-width: 900px) {
  #view-concurrence .synth-tete,#view-concurrence .synth .bloc-fiche { padding-left: 16px; padding-right: 16px; }
  #view-concurrence .ecart .l { grid-template-columns: 1fr; gap: 3px; }
  #view-concurrence .ecart .vs { text-align: left; }}
  /* Le sens du chiffre : même discrétion que l'unité, et masqué de la même
     façon sur les critères qui ne sont pas chiffrés. */
  #view-concurrence .trait-ligne .sens {
    flex: 0 1 200px; font-family: inherit; font-size: 12.5px;
    color: var(--up-color-text-muted); background: transparent;
    border: 1px solid rgba(120,110,170,.3); border-radius: 8px; padding: 5px 8px;
  }
  #view-concurrence .trait-ligne .sens:focus { outline: none; border-color: #6366f1; }
  /* ══ RECHERCHE DANS LES 29 MILLIONS ═══════════════════════════
     Le geste fondateur de la fiche : on ne saisit pas une entreprise, on
     la TROUVE. Le champ est donc large et seul dans son bloc. */
  #view-concurrence .rech29 { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
  #view-concurrence .rech29 .cf { flex: 1 1 320px; }
  #view-concurrence .rech29-res { margin-top: 14px; display: flex; flex-direction: column;
                border: 1px solid rgba(120,110,170,.2); border-radius: 12px; overflow: hidden; }
  #view-concurrence .rech29-res button {
    display: grid; grid-template-columns: 1fr 150px 130px; gap: 14px; align-items: baseline;
    text-align: left; width: 100%; background: none; border: 0; cursor: pointer;
    padding: 11px 14px; font: inherit; color: inherit;
    border-bottom: 1px solid rgba(120,110,170,.14);
  }
  #view-concurrence .rech29-res button:last-child { border-bottom: 0; }
  #view-concurrence .rech29-res button:hover { background: rgba(99,102,241,.07); }
  #view-concurrence .rech29-res button:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
  #view-concurrence .rech29-res .d { font-weight: 600; font-size: 14px; }
  #view-concurrence .rech29-res .d small { display: block; font-weight: 400; font-size: 12px;
                         color: var(--up-color-text-subtle); margin-top: 2px; }
  #view-concurrence .rech29-res .v { font-size: 12.5px; color: var(--up-color-text-muted);
                   font-variant-numeric: tabular-nums; }
  #view-concurrence .rech29-res .v.r { text-align: right; }
  /* La fiche V2 rendue ici : son CSS est scopé .intel-fiche-v2, il ne
     déteint pas sur le labo. On lui rend juste un fond neutre — elle est
     dessinée pour le thème clair de l'app, pas pour l'aurore du labo. */
  #view-concurrence .hote-fiche-v2 { background: #fff; border-radius: 14px; overflow: hidden;
                   border: 1px solid rgba(120,110,170,.18); }
  html[data-theme="dark"] #view-concurrence .hote-fiche-v2 { background: #faf9fc; }
  #view-concurrence .rien { padding: 44px 24px; text-align: center; color: var(--up-color-text-muted); }
  #view-concurrence .rien p { margin: 0 0 6px; }
  #view-concurrence .rien .gros { font-size: 15.5px; color: var(--up-color-text); font-weight: 560; }

  @media (max-width: 800px) {
  #view-concurrence .grille .trait { width: auto; }}

/* ══ LE 10ᵉ ONGLET DE LA FICHE ENTREPRISE ════════════════════════════════
   Ces règles-ci NE SONT PAS confinées à #view-concurrence : le panneau vit
   dans la fiche de Data. Les noms en `conc-fiche-` sont assez distincts pour
   n'attraper rien d'autre — vérifié : aucune occurrence ailleurs dans l'app. */
.conc-fiche-carte { padding: 18px 20px; line-height: 1.55; }
.conc-fiche-tete { font-size: 15px; margin-bottom: 6px; }
.conc-fiche-quoi,
.conc-fiche-vide { color: var(--up-color-text-muted, #6b7280); font-size: 13.5px; margin: 0 0 14px; }
.conc-fiche-liste { list-style: none; margin: 10px 0 16px; padding: 0; display: grid; gap: 6px; }
.conc-fiche-liste li {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(120,110,170,.06);
}
.conc-fiche-liste .cf-produit { font-weight: 600; }
.conc-fiche-liste .cf-cmp { color: var(--up-color-text-muted, #6b7280); font-size: 13px; }
.conc-fiche-liste .cf-avance { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.conc-fiche-form { display: grid; gap: 4px 12px; grid-template-columns: max-content 1fr; align-items: center; margin-bottom: 14px; }
.conc-fiche-form label { font-size: 12.5px; color: var(--up-color-text-muted, #6b7280); }
.conc-fiche-form select,
.conc-fiche-form input {
  font: inherit; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--up-color-border, rgba(120,110,170,.25));
  background: rgba(255,255,255,.75); color: inherit; width: 100%;
}
.conc-fiche-pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conc-fiche-pied .btn.fort {
  font: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: 11px;
  border: 0; cursor: pointer; color: #fff; background: var(--vz-primary, #6366f1);
}
.conc-fiche-pied .btn.fort:hover { filter: brightness(1.06); }
.conc-fiche-msg { font-size: 12.5px; color: var(--up-color-text-muted, #6b7280); }
.conc-fiche-msg.rouge { color: #dc2626; }
html[data-theme="dark"] .conc-fiche-liste li { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .conc-fiche-form select,
html[data-theme="dark"] .conc-fiche-form input { background: rgba(255,255,255,.06); border-color: rgba(180,170,230,.18); }
@media (max-width: 700px) {
  .conc-fiche-form { grid-template-columns: 1fr; }
  .conc-fiche-liste .cf-avance { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   PLUSIEURS PAGES PAR CONCURRENT, ET CE QUE PAUL PROPOSE   (2026-08-06)
   Porté du labo labo-fiche-concurrent après mesure sur 7 essais.
   ══════════════════════════════════════════════════════════════════════ */

/* Une ligne PAR PAGE, numérotée : le numéro n'est pas décoratif, il dit
   l'ordre de lecture — et l'ordre décide quelle réponse gagne quand deux
   pages se contredisent. Un champ d'une seule ligne disait le contraire de
   ce qu'il attend. */
#view-concurrence .adresses { flex: 1 1 100%; margin: -2px 0 12px; }
#view-concurrence .adresses > label {
  display: block; margin-bottom: 6px;
  font-size: 13px; color: var(--up-color-text-subtle);
}
#view-concurrence .adr-l { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
#view-concurrence .adr-n {
  flex: 0 0 20px; text-align: center; font-size: 11.5px;
  color: var(--up-color-text-subtle); font-variant-numeric: tabular-nums;
}
#view-concurrence .adr-l input { flex: 1 1 auto; width: auto; }
#view-concurrence .adr-sup {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--up-color-text-subtle); font-size: 16px; line-height: 1;
  padding: 5px 8px; border-radius: 7px;
}
#view-concurrence .adr-sup:hover { color: #b91c1c; background: rgba(185,28,28,.10); }
#view-concurrence .adr-add { margin-left: 27px; }

/* Ce que Paul propose est VOLONTAIREMENT distinct des critères déjà posés :
   tant que ce n'est pas coché, ça n'appartient pas encore à la grille. La
   citation est au même rang que le libellé — c'est elle qui permet de juger. */
#view-concurrence #paul-propositions:not(:empty) {
  margin: 4px 0 14px; padding: 12px 13px; border-radius: 13px;
  background: rgba(99,91,255,.05); border: 1px solid rgba(99,91,255,.16);
}
#view-concurrence .prop-entete { margin-bottom: 9px; font-size: 14px; }
#view-concurrence .prop-coupe {
  display: block; margin-top: 4px; font-size: 12.5px;
  color: var(--up-color-text-subtle);
}
#view-concurrence .prop-l {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  align-items: baseline; padding: 8px 9px; border-radius: 10px; cursor: pointer;
}
#view-concurrence .prop-l:hover { background: rgba(120,110,170,.07); }
#view-concurrence .prop-l input { grid-row: 1 / span 3; align-self: center; }
#view-concurrence .prop-nom { font-weight: 600; }
#view-concurrence .prop-meta { font-size: 12px; color: var(--up-color-text-subtle); grid-column: 2; }
#view-concurrence .prop-cit { grid-column: 2; font-size: 12.5px; font-style: italic; }
#view-concurrence .prop-pied { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

html[data-theme="dark"] #view-concurrence #paul-propositions:not(:empty) {
  background: rgba(120,110,255,.09); border-color: rgba(150,140,240,.22);
}

/* Le bouton qui détruit doit se voir comme tel, sans hurler : il vit à côté de
   « Renommer » et « Dupliquer », il ne doit pas être cliqué par inadvertance. */
#view-concurrence .btn.mini.danger { color: #b91c1c; }
#view-concurrence .btn.mini.danger:hover {
  color: #fff; background: #b91c1c; border-color: #b91c1c;
}

/* ══════════════════════════════════════════════════════════════════════
   LE PREMIER ÉCRAN   (2026-08-06)
   Une question à la fois. Le contenu domine, l'en-tête s'efface, et le
   geste fondateur — « Paul construit la grille » — est le plus visible de
   la page, pas un lien discret en bout de barre.
   ══════════════════════════════════════════════════════════════════════ */
#view-concurrence .dem { max-width: 760px; margin: 6px auto 0; }
#view-concurrence .dem-quoi {
  margin: 0 0 26px; font-size: 16px; line-height: 1.5;
  color: var(--up-color-text-subtle);
}
#view-concurrence .dem-etape {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; margin-bottom: 12px; border-radius: 16px;
  background: rgba(120,110,170,.05); border: 1px solid transparent;
}
#view-concurrence .dem-etape.on {
  background: rgba(99,91,255,.06); border-color: rgba(99,91,255,.18);
}
#view-concurrence .dem-n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  background: rgba(99,91,255,.14); color: #4f46e5;
}
#view-concurrence .dem-etape.fait .dem-n { background: rgba(22,163,74,.14); color: #16a34a; }
#view-concurrence .dem-corps { flex: 1 1 auto; min-width: 0; }
#view-concurrence .dem-corps > label {
  display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600;
}
#view-concurrence .dem-aide {
  margin: 0 0 12px; font-size: 13px; line-height: 1.5;
  color: var(--up-color-text-subtle);
}
#view-concurrence .dem-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#view-concurrence .dem-ligne input { flex: 1 1 200px; width: auto; }
#view-concurrence .dem-fait { margin-top: 6px; font-size: 15px; }
#view-concurrence .dem-fait .btn.mini { margin-left: 8px; }

#view-concurrence .dem-conc { list-style: none; margin: 14px 0 0; padding: 0; }
#view-concurrence .dem-conc li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.5);
  margin-bottom: 6px;
}
#view-concurrence .dem-url {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px;
  color: var(--up-color-text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-concurrence .dem-x {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--up-color-text-subtle); font-size: 16px; line-height: 1;
  padding: 3px 7px; border-radius: 7px;
}
#view-concurrence .dem-x:hover { color: #b91c1c; background: rgba(185,28,28,.10); }

/* LE bouton. Il porte sa propre explication : ce qu'il va faire est trop
   inhabituel pour tenir dans un verbe. */
#view-concurrence .dem-go {
  display: block; width: 100%; margin-top: 18px;
  padding: 16px 20px; border-radius: 14px;
  font-size: 17px; font-weight: 600; text-align: center;
}
#view-concurrence .dem-go-sous {
  display: block; margin-top: 3px;
  font-size: 13px; font-weight: 400; opacity: .82;
}
#view-concurrence .dem-go[disabled] { opacity: .55; cursor: default; }
#view-concurrence .dem-pied { margin-top: 18px; text-align: center; }
#view-concurrence .dem-pied .btn {
  background: transparent; border: 0; color: var(--up-color-text-subtle);
  text-decoration: underline; font-size: 13px;
}

html[data-theme="dark"] #view-concurrence .dem-conc li { background: rgba(255,255,255,.06); }

@media (max-width: 640px) {
  #view-concurrence .dem-ligne input { flex: 1 1 100%; }
  #view-concurrence .dem-etape { padding: 14px 15px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LISIBILITÉ DE L'EN-TÊTE   (2026-08-06)
   Trois défauts corrigés : un titre qui nommait l'outil au lieu de dire ce
   qu'on regarde, un menu « Ce que je compare » posé à côté de sa propre
   réponse, et cinq boutons de même poids sans ordre de lecture.
   ══════════════════════════════════════════════════════════════════════ */

/* Le nom de la comparaison EST le titre, et il se déroule. Un select nu :
   pas de faux titre superposé à un menu invisible — ce qui se lit se clique. */
#view-concurrence .tete-cmp { display: flex; flex-direction: column; gap: 1px; }
#view-concurrence .tete-cmp .eyebrow {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--up-color-text-subtle);
}
#view-concurrence .sel-titre {
  width: auto; max-width: 100%;
  border: 0; background: transparent; padding: 0 26px 0 0;
  font-family: inherit; font-size: 27px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--up-color-text, #1b1a2e);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e8ba6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right center;
}
#view-concurrence .sel-titre:hover { color: #4f46e5; }
#view-concurrence .sel-titre:focus-visible { outline: 2px solid rgba(99,91,255,.5); outline-offset: 4px; border-radius: 6px; }

/* Un seul bouton plein — celui qui remplit la grille. Les autres sont des
   réglages : même taille, poids typographique moindre, fond effacé. */
#view-concurrence .actions-outils {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  width: 100%; margin-top: 10px;
}
#view-concurrence .actions-sep {
  flex: 0 0 1px; align-self: stretch; margin: 2px 4px;
  background: rgba(120,110,170,.20);
}
#view-concurrence .btn.calme {
  background: transparent; border-color: rgba(120,110,170,.22);
  color: var(--up-color-text-subtle); font-weight: 500;
}
#view-concurrence .btn.calme:hover {
  background: rgba(120,110,170,.08); color: var(--up-color-text, #1b1a2e);
}
/* 🔴 TEXTE VIOLET SUR FOND VIOLET. `.btn.fort` pose le blanc (ligne 80), mais
   `.btn.paul` repose du violet 500 lignes plus bas, à spécificité égale — donc
   c'est lui qui gagne, et le libellé disparaissait dans son propre fond. On
   tranche ici, avec trois classes, et on le redit pour le survol et le sombre :
   une règle de couleur qui ne couvre pas ses états se fait reprendre au premier
   :hover. */
#view-concurrence .btn.paul.fort {
  font-weight: 600;
  background: var(--vz-primary, #6366f1);
  border-color: transparent;
  color: #fff;
}
#view-concurrence .btn.paul.fort:hover { background: #5457e0; color: #fff; }
html[data-theme="dark"] #view-concurrence .btn.paul.fort { color: #fff; }

html[data-theme="dark"] #view-concurrence .sel-titre { color: #ece9ff; }
html[data-theme="dark"] #view-concurrence .btn.calme { border-color: rgba(180,170,230,.20); }

@media (max-width: 700px) {
  #view-concurrence .sel-titre { font-size: 21px; }
  #view-concurrence .actions-sep { display: none; }
}

/* Le titre déroulant doit SE VOIR comme un menu. Un chevron discret ne
   suffisait pas : le sélecteur a été cru disparu. On lui donne un fond au
   survol, et un compte à côté quand il y a vraiment un choix à faire. */
#view-concurrence .tete-ligne { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#view-concurrence .sel-titre {
  padding: 2px 30px 2px 8px; margin-left: -8px; border-radius: 9px;
  transition: background .12s ease;
}
#view-concurrence .sel-titre:hover { background: rgba(99,91,255,.08); }
#view-concurrence .tete-compte {
  font-size: 12.5px; color: var(--up-color-text-subtle);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(120,110,170,.10); white-space: nowrap;
}
html[data-theme="dark"] #view-concurrence .tete-compte { background: rgba(255,255,255,.08); }

/* Bouton armé : le second clic supprime. Il doit se voir comme un danger
   pendant les 5 secondes où il l'est — sinon on rejoue le confirm() muet,
   avec un bouton qui a juste changé de texte sans qu'on le remarque. */
#view-concurrence .sup-arme,
#view-concurrence .btn.sup-arme {
  background: #b91c1c !important; border-color: #b91c1c !important;
  color: #fff !important; font-weight: 600;
}
#view-concurrence .btn.mini.danger.sup-arme { color: #fff !important; }
#view-concurrence .trait-ligne .sup.sup-arme {
  background: #b91c1c; color: #fff; border-radius: 7px;
}

/* Les actions de la comparaison, contre son nom. Discrètes au repos — on ne
   renomme pas tous les jours — mais présentes : les enterrer dans un panneau
   « Mes critères » revenait à les cacher, personne ne les y cherchait. */
#view-concurrence .tete-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#view-concurrence .tete-actions .btn.mini {
  background: transparent; border-color: transparent;
  color: var(--up-color-text-subtle); padding: 3px 9px;
}
#view-concurrence .tete-actions .btn.mini:hover {
  background: rgba(120,110,170,.10); border-color: rgba(120,110,170,.22);
  color: var(--up-color-text, #1b1a2e);
}
#view-concurrence .tete-actions .btn.mini.danger:hover {
  background: rgba(185,28,28,.10); border-color: rgba(185,28,28,.30); color: #b91c1c;
}

/* Un concurrent, plusieurs pages — visible DÈS le guide. Sans ça il fallait
   deviner qu'on complétait plus tard depuis la fiche. */
#view-concurrence .dem-conc-tete { display: flex; align-items: center; gap: 10px; width: 100%; }
#view-concurrence .dem-conc li { display: block; }
#view-concurrence .dem-addpage {
  flex: 0 0 auto; background: transparent; border-color: transparent;
  color: #4f46e5; font-size: 12.5px; padding: 3px 8px;
}
#view-concurrence .dem-addpage:hover { background: rgba(99,91,255,.10); border-color: rgba(99,91,255,.25); }
#view-concurrence .dem-plus-n {
  padding: 1px 6px; border-radius: 999px; font-size: 11.5px;
  background: rgba(99,91,255,.12); color: #4f46e5;
}
#view-concurrence .dem-pages { list-style: none; margin: 6px 0 0 0; padding: 0 0 0 14px; }
#view-concurrence .dem-pages li {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 12.5px; color: var(--up-color-text-subtle);
  border-left: 2px solid rgba(120,110,170,.20); padding-left: 10px; margin-bottom: 2px;
}
#view-concurrence .dem-ligne-page { margin-top: 8px; padding-left: 14px; }

/* Ceinture et bretelles sur la ligne d'un produit : même tronqué, un libellé
   long ne doit plus pouvoir chasser les actions hors de l'écran. Les deux
   boutons sont poussés à droite et ne rétrécissent jamais. */
#view-concurrence .produit > .chef .cat {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 1 auto;
}
#view-concurrence .produit > .chef .compte { margin-left: auto; white-space: nowrap; }
#view-concurrence .produit > .chef .btn.mini { flex: 0 0 auto; }
#view-concurrence .produit > .chef .nom { min-width: 0; }

/* ── Intertitres de bloc ─────────────────────────────────────────────
   Le nom que Paul donne au groupe lors du rangement (2026-08-06). Discret :
   il structure la lecture, il ne rivalise pas avec les données. Même
   registre que le bandeau de gamme — petite capitale, gris, un filet. */
#view-concurrence tr.bloc-titre td {
  padding: 14px 12px 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--up-color-text-subtle);
  background: transparent; border-bottom: 1px solid rgba(120,110,170,.16);
}
html[data-theme="dark"] #view-concurrence tr.bloc-titre td {
  border-bottom-color: rgba(180,170,230,.18);
}

/* ── Modale de lecture (« Remplir depuis leurs sites », 07/08) ──
   Les messages d'état se SUIVENT ici — un journal — au lieu de
   s'écraser dans le bandeau. Le dernier est le présent, les
   précédents s'estompent. */
#view-concurrence #paul-modale {
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 20, 40, .38);
}
#view-concurrence .pm-boite {
  width: min(560px, 92vw); max-height: 70vh;
  display: flex; flex-direction: column;
  padding: 18px 22px 20px;
}
#view-concurrence .pm-tete {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
#view-concurrence .pm-titre { font-weight: 600; flex: 1; }
#view-concurrence .pm-tourne {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--up-color-text-subtle, #888);
  border-top-color: transparent;
  animation: pm-rotation .9s linear infinite;
}
@keyframes pm-rotation { to { transform: rotate(360deg); } }
#view-concurrence #pm-fermer {
  border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 2px 6px;
  color: var(--up-color-text-subtle, #777);
}
#view-concurrence .pm-journal {
  overflow: auto; min-height: 56px;
  font-size: 13.5px; line-height: 1.55;
}
#view-concurrence .pm-journal p { margin: 0 0 7px; opacity: .62; }
#view-concurrence .pm-journal p:last-child { opacity: 1; margin-bottom: 0; }

/* ── Indicateur d'extension (3 états, 07/08) ──────────────────
   Vert = active (discret) · orange = à mettre à jour · rouge = à
   installer (déplié par défaut). Toujours au-dessus du pli. */
#view-concurrence .ext-ind { margin: 4px 0 10px; }
#view-concurrence .ext-ligne {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 560;
  border: 1px solid transparent;
}
#view-concurrence .ext-pastille {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
#view-concurrence .ext-active  .ext-ligne { background: rgba(34,160,90,.10); color: #15803d; border-color: rgba(34,160,90,.22); }
#view-concurrence .ext-active  .ext-pastille { background: #22a05a; box-shadow: 0 0 0 3px rgba(34,160,90,.16); }
#view-concurrence .ext-vieille .ext-ligne { background: rgba(210,140,20,.12); color: #b45309; border-color: rgba(210,140,20,.28); }
#view-concurrence .ext-vieille .ext-pastille { background: #e69016; box-shadow: 0 0 0 3px rgba(230,144,22,.18); }
#view-concurrence .ext-absente .ext-ligne { background: rgba(220,60,60,.10); color: #b91c1c; border-color: rgba(220,60,60,.26); }
#view-concurrence .ext-absente .ext-pastille { background: #dc3c3c; box-shadow: 0 0 0 3px rgba(220,60,60,.16); }
html[data-theme="dark"] #view-concurrence .ext-active  .ext-ligne { background: rgba(34,160,90,.16); color: #6ee7a8; }
html[data-theme="dark"] #view-concurrence .ext-vieille .ext-ligne { background: rgba(230,144,22,.18); color: #fbbf74; }
html[data-theme="dark"] #view-concurrence .ext-absente .ext-ligne { background: rgba(220,60,60,.18); color: #fca5a5; }
#view-concurrence .ext-bascule {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 600; text-decoration: underline; padding: 0 0 0 4px; color: inherit; opacity: .85;
}
#view-concurrence .ext-bascule:hover { opacity: 1; }
#view-concurrence .ext-detail {
  margin-top: 10px; max-width: 640px; padding: 14px 16px;
  border-radius: 14px; background: rgba(120,110,170,.06);
  border: 1px solid rgba(120,110,170,.16); font-size: 13px;
}
html[data-theme="dark"] #view-concurrence .ext-detail { background: rgba(255,255,255,.04); border-color: rgba(180,170,230,.14); }
#view-concurrence .ext-intro { margin: 0 0 10px; color: var(--up-color-text-muted); }
#view-concurrence .ext-etapes { margin: 0; padding-left: 20px; line-height: 1.7; }
#view-concurrence .ext-etapes li { margin-bottom: 2px; }
#view-concurrence .ext-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: rgba(120,110,170,.12); padding: 2px 7px; border-radius: 6px;
  user-select: all;
}
#view-concurrence .ext-dl { font-weight: 600; color: #4f46e5; }
html[data-theme="dark"] #view-concurrence .ext-dl { color: #a5b4fc; }
#view-concurrence .ext-copier {
  border: 1px solid rgba(99,102,241,.35); background: rgba(99,102,241,.08);
  color: #4f46e5; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 7px; cursor: pointer; vertical-align: middle;
}
#view-concurrence .ext-copier:hover { background: rgba(99,102,241,.16); }
#view-concurrence .ext-copier.ok { border-color: rgba(34,160,90,.5); color: #15803d; background: rgba(34,160,90,.12); }
html[data-theme="dark"] #view-concurrence .ext-copier { color: #a5b4fc; }
#view-concurrence .ext-note { margin: 10px 0 0; font-size: 12px; color: var(--up-color-text-subtle); }
/* Deux extensions détectées séparément → un bloc chacune (08/08). */
#view-concurrence .ext-bloc { margin-bottom: 8px; }
#view-concurrence .ext-bloc:last-child { margin-bottom: 0; }
#view-concurrence .ext-recharge { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--up-color-text-muted); }
#view-concurrence .ext-recharger { border: 0; background: #4f46e5; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; cursor: pointer; }
#view-concurrence .ext-recharger:hover { filter: brightness(1.05); }