/* ═══════════════════════════════════════════════════════════════════════
   BEP SA — PLATEFORME CHANTIER · COUCHE DE DESIGN
   ───────────────────────────────────────────────────────────────────────
   Feuille ADDITIVE, chargée après styles.css et maestro.css. Elle ne
   supprime rien : elle redéfinit les jetons et les primitives partagées
   (.card, .field, .btn, la coque Maestro). Comme les quatorze étapes sont
   toutes bâties avec ces mêmes primitives, les toucher ici les transforme
   toutes à la fois — sans réécrire un seul des quatorze modules de
   formulaire, et sans risquer d'en casser un.

   Retirer le <link> de index.html annule l'ensemble, immédiatement.

   ── Ce qui change, et pourquoi ────────────────────────────────────────

   IDENTITÉ. Le teal et l'orange sont ceux de la marque, ils restent. Ils
   étaient délavés : le teal virait au médical, l'orange servait de
   décoration. Ici le teal devient une matière profonde qui porte la
   structure (bandeau, rail), et le laiton redevient ce qu'un accent doit
   être — rare, et donc lisible : l'étape en cours, ce qui est terminé.

   HIÉRARCHIE. Tout était écrit entre 10,5 et 13 px : rien ne dominait,
   donc rien ne se lisait. On installe une vraie échelle, et un Cormorant
   Garamond pour les titres — la même serif que le studio Arboriparc, ce
   qui raccorde enfin les deux produits de la maison.

   CHIFFRES. Cette plateforme est pleine de prix, de quantités, de
   métrés : `tabular-nums` partout, sans exception. Des colonnes de
   chiffres qui ne s'alignent pas se relisent deux fois.

   PROFONDEUR. Une seule échelle d'ombres, teintées de teal — jamais du
   gris neutre, qui ferait sale sur un fond coloré.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   1 · JETONS
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Marque, approfondie ──
     Le teal foncé descend jusqu'à une valeur presque noire : c'est lui
     qui donne au rail sa densité. Les valeurs claires restent pour les
     fonds de section. */
  --bep-teal:        #12707d;
  --bep-teal-dark:   #0a3c45;
  --bep-teal-abyss:  #06232a;
  --bep-teal-bright: #1aa3b4;
  --bep-orange:      #e09a1a;
  --bep-brass:       #d9ad5c;
  --bep-brass-lit:   #f2cd82;
  --bep-anthrac:     #1e2a30;
  --bep-mist:        #eef6f7;
  --bep-mist-2:      #dcecef;

  /* ── Surfaces ── */
  --c-bg:            #eef2f3;
  --c-surface:       #ffffff;
  --c-surface-2:     #f7fafa;
  --c-surface-3:     #eff5f6;
  --c-border:        #dde7e9;
  --c-border-strong: #c3d5d8;
  --c-hairline:      rgba(10, 60, 69, .09);

  /* ── Texte ── */
  --c-text:          #16242a;
  --c-text-2:        #3d5158;
  --c-text-muted:    #64828b;
  --c-text-faint:    #93aab1;

  /* ── Rôles ── */
  --c-primary:       #12707d;
  --c-primary-2:     #0a3c45;
  --c-primary-soft:  #e2f1f3;
  --c-accent:        #e09a1a;
  --c-danger:        #c0392b;
  --c-success:       #17845a;
  --c-warning:       #b7791f;

  /* ── Profondeur : une seule échelle, teintée ── */
  --shadow-xs:   0 1px 2px rgba(10,60,69,.06);
  --shadow-sm:   0 1px 3px rgba(10,60,69,.07), 0 1px 1px rgba(10,60,69,.04);
  --shadow-card: 0 1px 2px rgba(10,60,69,.05), 0 4px 14px -6px rgba(10,60,69,.14);
  --shadow-md:   0 2px 6px rgba(10,60,69,.07), 0 12px 32px -12px rgba(10,60,69,.24);
  --shadow-lg:   0 4px 12px rgba(10,60,69,.09), 0 26px 60px -22px rgba(10,60,69,.34);
  --ring:        0 0 0 3px rgba(18,112,125,.16);

  --radius:      10px;
  --radius-sm:   7px;
  --radius-lg:   16px;

  /* ── Typographie ── */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  /* ── Mouvement : une seule courbe pour toute l'application.
     Deux courbes différentes se lisent comme deux matières. ── */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .16s;
  --t-base:    .28s;

  --sidebar-w: 260px;
}

/* ══════════════════════════════════════════════════════════════════════
   2 · BASE
   ══════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Les chiffres de cette plateforme s'alignent en colonnes. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
}

::selection { background: var(--bep-brass-lit); color: var(--bep-teal-abyss); }

/* Barres de défilement : discrètes, mais de la couleur de la maison. */
* { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border: 3px solid transparent;
  border-radius: 10px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-text-faint); background-clip: content-box; }

/* ══════════════════════════════════════════════════════════════════════
   3 · BANDEAU
   ──────────────────────────────────────────────────────────────────────
   Neuf commandes s'y alignaient au même poids : « Enregistrer » avait
   exactement l'air de « Réinitialiser ». On ne retire rien — on hiérarchise.
   ══════════════════════════════════════════════════════════════════════ */
.app-header {
  background:
    radial-gradient(120% 180% at 12% -40%, rgba(26,163,180,.34) 0%, transparent 58%),
    linear-gradient(118deg, var(--bep-teal-abyss) 0%, var(--bep-teal-dark) 46%, #0f5b66 100%);
  border-bottom: 1px solid rgba(0,0,0,.28);
  box-shadow: 0 1px 0 rgba(217,173,92,.34), var(--shadow-md);
  padding: 11px 24px;
  gap: 20px;
}
/* Le filet de laiton sous le bandeau : une ligne, pas une bordure de 2px
   qui écrasait le dégradé. */
.app-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(217,173,92,.55) 18%, rgba(242,205,130,.9) 50%,
    rgba(217,173,92,.55) 82%, transparent 100%);
  pointer-events: none;
}
.app-header { position: sticky; }

.brand { display: flex; align-items: center; gap: 13px; }
.brand .logo img,
.app-header .logo img {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.12);
}
.brand-text h1 {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: #fff;
  margin: 0;
}
.brand-text h1 .brand-sa { font-weight: 400; opacity: .72; }
.brand-text h1 .brand-pipe { color: var(--bep-brass); opacity: .8; margin: 0 3px; }
.brand-text p {
  margin: 2px 0 0;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: rgba(226,241,243,.62);
}

/* ── Le projet en cours : la seule information du bandeau, donc traitée
      comme telle — une plaque de verre, et non un bouton parmi neuf. ── */
.project-display {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  padding: 9px 16px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  cursor: pointer;
  max-width: 460px;
}
.project-display:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(242,205,130,.4);
}
.project-display .pd-main { display: flex; align-items: baseline; gap: 10px; }
.project-display .pd-num {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--bep-brass-lit);
}
.project-display .pd-titre {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; line-height: 1.1;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-display .pd-sub {
  display: flex; gap: 14px; margin-top: 3px;
  font-size: 10.5px; color: rgba(214,234,237,.68);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Les actions, en trois rangs ── */
.header-actions { gap: 7px; align-items: center; }

.app-header .btn {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.app-header .btn:active { transform: translateY(1px) scale(.985); }

/* Rang 1 — l'action du jour. */
.app-header .btn-teal,
.app-header #importDocs {
  background: linear-gradient(135deg, var(--bep-brass-lit), var(--bep-brass) 62%, #bf9448);
  color: var(--bep-teal-abyss);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 2px 10px -2px rgba(217,173,92,.5), inset 0 1px 0 rgba(255,255,255,.45);
  font-weight: 700;
}
.app-header .btn-teal:hover,
.app-header #importDocs:hover {
  box-shadow: 0 4px 18px -3px rgba(217,173,92,.7), inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateY(-1px);
}

/* Rang 2 — les outils, présents mais silencieux. */
.app-header .btn-ghost {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(233,245,246,.9);
}
.app-header .btn-ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.3);
  color: #fff;
  transform: translateY(-1px);
}

/* Rang 3 — ce qui détruit ne se met pas en rouge plein à côté du reste :
   il se tient à l'écart, en contour, et ne s'allume qu'au survol. */
.app-header .btn-danger {
  background: transparent;
  border: 1px solid rgba(228,138,120,.42);
  color: #f0b4a6;
}
.app-header .btn-danger:hover {
  background: rgba(192,57,43,.9);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

/* Badges d'état (utilisateur, consommation) : de l'information, pas des
   boutons. Ils perdent leur relief pour cesser d'entrer en concurrence. */
.user-badge, .usage-badge {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 10.5px;
  color: rgba(222,238,240,.8);
  box-shadow: none;
}
.user-badge .user-role-badge {
  background: var(--bep-brass);
  color: var(--bep-teal-abyss);
  font-weight: 800;
  font-size: 8.5px;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 100px;
  margin-left: 7px;
}
.usage-badge .usage-kpi-money { color: var(--bep-brass-lit); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   4 · LE RAIL D'ÉTAPES
   ──────────────────────────────────────────────────────────────────────
   La pièce la plus regardée de l'application. Elle gagne de la densité,
   une pastille qui porte sa propre progression, et un curseur de laiton
   qui GLISSE d'une étape à l'autre (voir motion.js) au lieu de clignoter.
   ══════════════════════════════════════════════════════════════════════ */
.m-stepper {
  width: 232px;
  min-width: 232px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(26,163,180,.2) 0%, transparent 60%),
    linear-gradient(180deg, var(--bep-teal-dark) 0%, var(--bep-teal-abyss) 100%);
  border-right: 1px solid rgba(0,0,0,.3);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.05);
  padding: 18px 0 16px;
  position: relative;
}
.m-stepper-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(242,205,130,.85);
  padding: 0 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

/* Le curseur qui voyage. Un seul élément, positionné par GSAP/Flip. */
.m-rail-cursor {
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--bep-brass-lit), var(--bep-brass));
  box-shadow: 0 0 14px rgba(242,205,130,.75), 0 0 3px rgba(242,205,130,.9);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.m-step {
  padding: 10px 18px 10px 17px;
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: background var(--t-base) var(--ease);
  gap: 12px;
}
.m-step:hover { background: rgba(255,255,255,.055); }
/* Le curseur de laiton remplace la bordure gauche : elle disparaît. */
.m-step.active { background: rgba(255,255,255,.09); border-left-color: transparent; }

.m-step-bubble {
  width: 30px; height: 30px; min-width: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.17);
  color: rgba(219,238,241,.75);
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.m-step.active .m-step-bubble {
  background: linear-gradient(140deg, var(--bep-brass-lit), var(--bep-brass));
  border-color: rgba(255,255,255,.5);
  color: var(--bep-teal-abyss);
  box-shadow: 0 0 0 4px rgba(217,173,92,.16), 0 3px 10px -2px rgba(217,173,92,.55);
}
.m-step-bubble.done {
  background: rgba(23,132,90,.24);
  border-color: rgba(64,196,142,.55);
  color: #6fe3ae;
}
.m-step.active .m-step-bubble.done {
  background: linear-gradient(140deg, var(--bep-brass-lit), var(--bep-brass));
  color: var(--bep-teal-abyss);
  border-color: rgba(255,255,255,.5);
}

.m-step-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.05px;
  color: rgba(232,244,246,.92);
}
.m-step.active .m-step-label { color: #fff; }
.m-step-sub {
  font-size: 10px;
  color: rgba(180,208,213,.5);
  letter-spacing: .01em;
  margin-top: 1px;
}
.m-step.active .m-step-sub { color: rgba(242,205,130,.72); }

.m-step-bar {
  height: 2px;
  background: rgba(255,255,255,.09);
  border-radius: 2px;
  margin-top: 7px;
  overflow: hidden;
}
.m-step-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bep-teal-bright), #55e0b4);
  box-shadow: 0 0 8px rgba(85,224,180,.5);
  transition: width .6s var(--ease-out);
}
.m-step.active .m-step-bar-fill {
  background: linear-gradient(90deg, var(--bep-brass), var(--bep-brass-lit));
  box-shadow: 0 0 8px rgba(242,205,130,.55);
}
.m-step-connector { display: none; }

.m-stepper-footer {
  margin-top: auto;
  padding: 14px 20px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 9.5px;
  letter-spacing: .05em;
  color: rgba(160,192,198,.45);
}

/* ══════════════════════════════════════════════════════════════════════
   5 · LA BARRE DE NAVIGATION
   ──────────────────────────────────────────────────────────────────────
   Quatorze pastilles rondes de 6 px ne se comptent pas et ne se visent
   pas. Elles deviennent les segments d'une seule règle continue : on lit
   d'un coup où l'on en est, et chaque segment reste cliquable — aucune
   cible perdue, une lisibilité gagnée.
   ══════════════════════════════════════════════════════════════════════ */
.m-content-nav {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--c-hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 4px 16px -8px rgba(10,60,69,.2);
  padding: 9px 26px;
  min-height: 56px;
  gap: 20px;
}
.m-content-nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.m-nav-step-label {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--bep-teal-dark);
  letter-spacing: 0;
  white-space: nowrap;
}
.m-nav-step-count {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-text-faint);
  background: var(--c-surface-3);
  border: 1px solid var(--c-hairline);
  border-radius: 100px;
  padding: 3px 9px;
}

.m-nav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 100px;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.m-nav-btn:hover:not(:disabled) {
  color: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm), var(--ring);
  transform: translateY(-1px);
}
.m-nav-btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.m-nav-btn:disabled { opacity: .34; cursor: not-allowed; box-shadow: none; }

/* La règle de progression */
.m-nav-center {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  justify-content: center;
  max-width: 560px;
}
.m-nav-dot {
  flex: 1;
  height: 4px;
  min-width: 0;
  border-radius: 100px;
  background: var(--c-border);
  cursor: pointer;
  position: relative;
  transition: background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
/* La cible de clic reste confortable, même si le trait est fin. */
.m-nav-dot::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
}
.m-nav-dot:hover { background: var(--c-border-strong); transform: scaleY(1.8); }
.m-nav-dot.done  { background: var(--bep-teal-bright); opacity: .5; }
.m-nav-dot.active {
  background: linear-gradient(90deg, var(--bep-brass), var(--bep-brass-lit));
  transform: scaleY(2.2);
  box-shadow: 0 0 10px rgba(217,173,92,.6);
}

/* ══════════════════════════════════════════════════════════════════════
   6 · LE CONTENU — CARTES
   ══════════════════════════════════════════════════════════════════════ */
.m-content-body {
  padding: 24px 28px 64px;
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(26,163,180,.07) 0%, transparent 70%),
    var(--c-bg);
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
/* Le filet de couleur en tête de carte se déploie au survol : la carte
   visée se distingue sans que rien ne bouge de place. */
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bep-teal-bright), var(--bep-teal) 45%, var(--bep-brass));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
  z-index: 1;
}
.m-content-body .card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-border);
  transform: translateY(-1px);
}
.m-content-body .card:hover::before { transform: scaleX(1); }

.card > h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bep-teal-dark);
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border-bottom: 1px solid var(--c-hairline);
  padding: 12px 18px 11px;
  gap: 10px;
}
.card > h3::before {
  width: 3px; height: 15px;
  background: linear-gradient(180deg, var(--bep-brass-lit), var(--bep-brass));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(217,173,92,.4);
}
.card-body { padding: 18px; }

/* Les sous-titres restent en petites capitales : c'est le seul niveau où
   elles servent — un intertitre court, qu'on balaye sans le lire. */
.m-content-body .card-body > h4,
.m-content-body .card > h4,
.card > .card-body > h4,
.card > h4 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bep-teal);
  opacity: 1;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-hairline);
}
.card-body > h4:first-child { margin-top: 0; }

.panel-header { border-bottom: 1px solid var(--c-hairline); padding-bottom: 16px; }
.panel-header h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}
.panel-header p { color: var(--c-text-muted); font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════════════
   7 · CHAMPS
   ══════════════════════════════════════════════════════════════════════ */
.grid { gap: 15px 18px; }

.field > label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea,
input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="tel"], select, textarea {
  font-family: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--c-border-strong);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--c-surface);
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-faint); }
.field textarea { min-height: 76px; line-height: 1.55; }

/* Un champ rempli se distingue d'un champ vide : c'est ce qu'on cherche
   du regard quand on reprend un dossier commencé la veille. */
.field input:not(:placeholder-shown):not(:focus) { background: var(--c-surface); }

/* ══════════════════════════════════════════════════════════════════════
   8 · BOUTONS (hors bandeau)
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }

.m-content-body .btn-primary,
.m-dock .btn-primary {
  background: linear-gradient(135deg, var(--bep-teal) 0%, var(--bep-teal-dark) 100%);
  color: #fff;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 1px 2px rgba(10,60,69,.2), inset 0 1px 0 rgba(255,255,255,.16);
}
.m-content-body .btn-primary:hover,
.m-dock .btn-primary:hover {
  box-shadow: 0 4px 16px -4px rgba(10,60,69,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.m-content-body .btn-secondary,
.m-dock .btn-secondary {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  box-shadow: var(--shadow-xs);
}
.m-content-body .btn-secondary:hover,
.m-dock .btn-secondary:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-soft);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════
   9 · LE DOCK DES RAPPORTS
   ══════════════════════════════════════════════════════════════════════ */
.m-dock {
  width: 286px;
  min-width: 286px;
  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
  border-left: 1px solid var(--c-hairline);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.8), -8px 0 24px -20px rgba(10,60,69,.4);
  padding: 18px 15px 22px;
  gap: 10px;
}
.m-dock-title,
.m-dock > .m-dock-title {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════
   10 · TABLEAUX, BADGES, DIVERS
   ══════════════════════════════════════════════════════════════════════ */
table { font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
thead th {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
tbody tr { transition: background var(--t-fast) var(--ease); }

.toast {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════════════════════
   11 · ÉTATS DE DÉPART DU MOUVEMENT
   ──────────────────────────────────────────────────────────────────────
   Ces classes ne sont posées QUE par motion.js, et seulement s'il a
   trouvé GSAP. Sans elles, ou si l'animation est coupée, tout s'affiche
   normalement : rien ici ne peut rendre un écran invisible.
   ══════════════════════════════════════════════════════════════════════ */
.fx-ready .fx-in { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  /* La règle est celle de motion-fx.js : le mouvement se coupe, le
     résultat visuel final ne change pas d'un pixel. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .m-rail-cursor { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   12 · REPRISES APRÈS PREMIER RENDU
   ───────────────────────────────────────────────────────────────────────
   Ce qui n'apparaît qu'une fois la plateforme regardée en vrai.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 12.1 · La colonne des actions écrasait le projet ──────────────────
   Mesuré : 1 157 px pour les neuf boutons, 34 px pour le nom du chantier.
   Le défaut préexistait — le fond de verre du bandeau n'a fait que le
   rendre visible. Deux corrections, aucune fonction retirée.        */

/* a) Le nom du chantier obtient un plancher, et les boutons le droit de
      passer à la ligne plutôt que de l'écraser. */
.app-header {
  grid-template-columns: auto minmax(220px, 1fr) auto;
}
.header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}

/* b) Sous 1700 px, les trois outils secondaires — Exporter, Importer,
      Réinitialiser — se réduisent à leur icône. Ils portent déjà un
      `title` qui dit ce qu'ils font, la légende ne se perd donc pas ;
      et l'action destructrice cesse d'avoir la même largeur, donc le
      même poids, que « Enregistrer ». Au-delà de 1700 px il y a la
      place : les mots reviennent. */
@media (max-width: 1699px) {
  .app-header #exportAll,
  .app-header #importAll,
  .app-header #resetAll {
    font-size: 0;
    padding: 8px 10px;
    gap: 0;
  }
  .app-header #exportAll svg,
  .app-header #importAll svg,
  .app-header #resetAll svg {
    margin-right: 0 !important;
    vertical-align: middle;
  }
}
@media (max-width: 1420px) {
  .usage-badge { display: none !important; }   /* information, pas commande */
}

/* Sans projet ouvert, la plaque ne doit pas ressembler à un défaut
   d'affichage : elle invite. */
.project-display { min-width: 0; }
.project-display .pd-titre { min-width: 0; }

/* ── 12.2 · L'autre convention de titre de carte ───────────────────────
   Cinq modules — offre complémentaire, PHSE, soumission, bordereau de
   séance, Maestro — n'écrivent pas `<h3>` mais `<div class="card-header">`,
   qui n'était stylé nulle part hors de deux sélecteurs très ciblés. Ces
   titres s'affichaient donc en texte nu. Les deux conventions reçoivent
   ici exactement le même traitement — c'est la même chose à l'écran, il
   n'y a aucune raison que ce soit deux choses à l'œil.               */
.m-content-body .card > .card-header,
.m-content-body .card-header,
.offc-controls .card-header,
.offc-table-card .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bep-teal-dark);
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border-bottom: 1px solid var(--c-hairline);
  padding: 12px 18px 11px;
  margin: 0;
}
.m-content-body .card > .card-header::before,
.m-content-body .card-header::before {
  content: '';
  display: inline-block;
  width: 3px; height: 15px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bep-brass-lit), var(--bep-brass));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(217,173,92,.4);
}

/* ── 12.3 · Tableaux ───────────────────────────────────────────────────
   Les en-têtes étaient des aplats de teal vif : sur une table de prix
   qu'on lit en colonne, la barre criait plus fort que les chiffres. Elle
   devient une surface sombre et calme, et les chiffres passent devant. */
.m-content-body thead th,
.offc-table thead th,
.soum-table thead th,
.cmp-table thead th,
.risques-tbl thead th,
.bs-th {
  background: linear-gradient(180deg, var(--bep-teal-dark), var(--bep-teal-abyss));
  color: rgba(232,244,246,.92);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(217,173,92,.3);
  border-right: 1px solid rgba(255,255,255,.07);
  padding: 10px 11px;
}
.m-content-body table.tbl th {
  background: var(--c-surface-3);
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
}
/* Une ligne sur deux, très légèrement teintée : sur vingt postes de prix
   l'œil ne saute plus d'une ligne à l'autre. */
.m-content-body tbody tr:nth-child(even) { background: rgba(18,112,125,.022); }
.m-content-body tbody tr:hover { background: var(--c-primary-soft); }

/* ── 12.4 · Boutons de carte sans variante ─────────────────────────────
   Beaucoup d'appels utilisent `.btn` seul. Plutôt que d'aller ajouter une
   classe dans quatorze modules, on donne à `.btn` nu, dans une carte, une
   tenue par défaut correcte. */
.m-content-body .card .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.btn-teal) {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  box-shadow: var(--shadow-xs);
}
.m-content-body .card .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.btn-teal):hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-soft);
  transform: translateY(-1px);
}

/* ── 12.5 · Le dock ────────────────────────────────────────────────────
   Six « Générer PDF » en teal plein alignés : six appels au clic pour un
   seul geste réel. Le bouton s'apaise et ne reprend sa couleur qu'au
   survol de sa carte — celle qu'on vise. */
.m-dock-title { margin-bottom: 4px; }
.m-dock-card {
  border-radius: var(--radius);
  border: 1px solid var(--c-hairline);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.m-dock-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--c-border-strong);
  transform: translateY(-1px);
}
.m-dock-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.m-dock-card-sub { font-size: 10.5px; color: var(--c-text-muted); }

.m-dock .btn-primary,
.m-dock-card .btn {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  box-shadow: none;
  font-weight: 600;
}
.m-dock-card:hover .btn-primary,
.m-dock-card:hover .btn {
  background: linear-gradient(135deg, var(--bep-teal) 0%, var(--bep-teal-dark) 100%);
  border-color: rgba(0,0,0,.1);
  color: #fff;
  box-shadow: 0 2px 10px -3px rgba(10,60,69,.55), inset 0 1px 0 rgba(255,255,255,.16);
}

.m-dock-progress-track {
  height: 3px;
  border-radius: 3px;
  background: var(--c-surface-3);
  overflow: hidden;
}
.m-dock-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bep-teal-bright), var(--bep-teal));
  transition: width .7s var(--ease-out);
}
.m-dock-progress-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ── 12.6 · Le bandeau, deuxième mesure ────────────────────────────────
   « Déconnexion » passait seule à la ligne, ce qui déséquilibrait tout le
   bandeau. Elle rejoint les outils réduits à leur icône : restent en
   toutes lettres les trois commandes qu'on cherche vraiment — Enregistrer,
   Projets, Importer docs. */
@media (max-width: 1699px) {
  .app-header #logoutBtn {
    font-size: 0;
    padding: 8px 10px;
    gap: 0;
  }
  .app-header #logoutBtn svg { margin-right: 0 !important; vertical-align: middle; }
}

/* ── 12.7 · Les six « Générer PDF » ───────────────────────────────────
   Six aplats de teal alignés dans une colonne de 286 px : chacun réclamait
   le clic, donc aucun ne l'obtenait. Le bouton se tient au repos et ne
   prend sa couleur qu'au survol de SA carte — celle qu'on vise vraiment.
   La vraie classe est `.m-dock-btn`, pas `.btn` : c'est elle qu'il fallait
   viser. */
.m-dock-btn {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: none;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease);
}
.m-dock-card:hover .m-dock-btn,
.m-dock-btn:hover,
.m-dock-btn:focus-visible {
  background: linear-gradient(135deg, var(--bep-teal) 0%, var(--bep-teal-dark) 100%);
  color: #fff;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 2px 10px -3px rgba(10,60,69,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
.m-dock-btn:active { transform: translateY(1px) scale(.99); }

/* ── 12.8 · Les pastilles de variante (Sécurité) ───────────────────────
   Trois choix exclusifs : celui qui est retenu doit se voir de loin. */
.m-variant-pill,
.m-variant-chip {
  border-radius: 100px;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.m-variant-pill:hover,
.m-variant-chip:hover { transform: translateY(-1px); }

/* ── 12.9 · Le foyer clavier ───────────────────────────────────────────
   Le contour du navigateur disparaissait sous les fonds colorés. Sur une
   plateforme de saisie parcourue à la tabulation toute la journée, savoir
   où l'on est n'est pas un détail d'accessibilité, c'est de la vitesse. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bep-brass);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.app-header :where(button, a):focus-visible { outline-color: var(--bep-brass-lit); }

/* ── 12.10 · Le chapeau de l'étape « Rapports » ────────────────────────
   Un troisième gabarit de titre (`.m-reports-head h3`), aligné sur les
   deux autres. Trois conventions pour la même chose dans le code, une
   seule à l'écran. */
.m-reports-head h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bep-teal-dark);
  margin: 0 0 4px;
}
.m-reports-head p { color: var(--c-text-muted); font-size: 12.5px; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   13 · LES QUATRE ONGLETS À BALISAGE PROPRE
   ──────────────────────────────────────────────────────────────────────
   Dix des quatorze étapes sont bâties avec `.card`, `.field` et `.btn` :
   les redéfinir plus haut les a toutes transformées d'un coup. Quatre ne
   le sont pas. Comparaison, WhatsApp, Canalisation et Réunions ont chacune
   son propre vocabulaire — `cmp-`, `wa-`, `rc-`, `velt-` — écrit avant que
   les primitives n'existent, avec ses hex en dur. Elles n'héritaient donc
   que des jetons et de la police, et se voyaient : quatre îlots dans une
   plateforme refaite.

   On ne réécrit pas ces quatre modules. On raccorde leur vocabulaire au
   nôtre, propriété par propriété : cette feuille étant chargée en dernier,
   à spécificité égale elle l'emporte. Aucun `!important`, aucun sélecteur
   gonflé — et le jour où l'un de ces modules est réécrit avec `.card`, il
   suffira de retirer sa sous-section.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 13.1 · COMPARAISON D'OFFRES ───────────────────────────────────────
   C'est le module le mieux dessiné des quatre : il avait déjà une bannière
   et une grille en deux temps. Ce qui clochait tenait à la teinte —
   un orange sodium (#ffb14a) là où la maison pose du laiton — et au fait
   que le titre de bannière était en Inter quand tous les autres titres de
   la plateforme sont passés au Cormorant. */

.cmp-hero {
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  color: #f2f8f9;
  background:
    radial-gradient(120% 150% at 88% -30%, rgba(26,163,180,.34) 0%, transparent 58%),
    linear-gradient(118deg, var(--bep-teal-abyss) 0%, var(--bep-teal-dark) 54%, #10606c 100%);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.07);
}
/* L'anneau décoratif du coin : plus discret, et teinté laiton pour que
   l'accent de la maison soit présent jusque dans l'ornement. */
.cmp-hero::after {
  width: 320px; height: 320px; right: -110px; top: -170px;
  border: 40px solid rgba(217,173,92,.07);
}
.cmp-eyebrow {
  color: var(--bep-brass-lit);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  margin-bottom: 11px;
}
.cmp-hero h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 11px;
}
.cmp-hero p {
  color: rgba(232,244,246,.72);
  font-size: 13.5px;
  line-height: 1.62;
}

/* Le schéma BEP → Δ → FOURNISSEURS. Trois pastilles de verre et un pivot
   en laiton : c'est la seule chose colorée de la bannière, donc l'œil y va. */
.cmp-hero-flow span {
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  letter-spacing: .1em;
}
.cmp-hero-flow i { background: rgba(217,173,92,.42); }
.cmp-hero-flow strong {
  width: 44px; height: 44px;
  color: var(--bep-teal-abyss);
  background: linear-gradient(150deg, var(--bep-brass-lit), var(--bep-brass));
  box-shadow: 0 0 0 6px rgba(217,173,92,.12), 0 6px 18px -6px rgba(217,173,92,.7);
  font-size: 19px;
}

/* Les deux cartes d'import reprennent exactement le traitement de `.card` :
   même filet, même ombre, même soulèvement au survol. */
.cmp-import-grid { gap: 18px; }
.cmp-import-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.cmp-import-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bep-teal-bright), var(--bep-teal) 45%, var(--bep-brass));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.cmp-import-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-border);
  transform: translateY(-1px);
}
.cmp-import-card:hover::before { transform: scaleX(1); }

.cmp-step-no {
  flex: 0 0 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--bep-teal), var(--bep-teal-dark));
  box-shadow: 0 3px 10px -3px rgba(10,60,69,.5), inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 14px;
}
/* Le second temps du flux prend le laiton : les deux dépôts se
   distinguent d'un coup d'œil, sans qu'on ait à lire les titres. */
.cmp-import-card--suppliers .cmp-step-no {
  background: linear-gradient(145deg, var(--bep-brass-lit), var(--bep-brass));
  color: var(--bep-teal-abyss);
  box-shadow: 0 3px 10px -3px rgba(217,173,92,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.cmp-import-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0;
  color: var(--bep-teal-dark);
}
.cmp-import-head p { color: var(--c-text-muted); font-size: 12px; }

/* La zone de dépôt : au survol, la flèche monte d'un pixel — le geste
   attendu est indiqué par le mouvement, pas par une phrase de plus. */
.cmp-dropzone {
  min-height: 140px;
  border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.cmp-dropzone:hover, .cmp-dropzone.is-over {
  border-color: var(--bep-teal);
  border-style: solid;
  background: var(--c-primary-soft);
  box-shadow: var(--ring);
  transform: none;
}
.cmp-dropzone svg {
  color: var(--bep-teal);
  transition: transform var(--t-base) var(--ease-out);
}
.cmp-dropzone:hover svg, .cmp-dropzone.is-over svg { transform: translateY(-3px); }
.cmp-dropzone strong { font-size: 14px; font-weight: 600; color: var(--bep-teal-dark); }
.cmp-dropzone span { color: var(--c-text-faint); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

.cmp-file-row { border-top: 1px solid var(--c-hairline); }
.cmp-file-main strong { color: var(--c-text); font-size: 12.5px; }
.cmp-file-main small { color: var(--c-text-muted); }
.cmp-file-type {
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--bep-teal-dark);
  font-size: 8.5px;
  letter-spacing: .07em;
}
.cmp-empty-files { color: var(--c-text-faint); }
.cmp-supplier-name {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cmp-supplier-name:focus { outline: none; border-color: var(--bep-teal); box-shadow: var(--ring); }
.cmp-remove {
  color: var(--c-danger);
  background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmp-remove:hover { background: rgba(192,57,43,.1); }

.cmp-action-bar {
  padding: 16px 20px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
  box-shadow: var(--shadow-card);
}
.cmp-action-bar strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}
.cmp-action-bar span { color: var(--c-text-muted); }

.cmp-status {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

/* Le tableau de comparaison : même traitement que les tableaux des dix
   autres étapes — tête sombre, lignes zébrées, chiffres tabulaires. */
.cmp-table-wrap {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: auto;
}
.cmp-table thead th {
  background: linear-gradient(180deg, var(--bep-teal-dark), var(--bep-teal-abyss));
  color: #eaf4f5;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.cmp-table tbody tr:nth-child(even) { background: var(--c-surface-2); }
.cmp-table tbody tr:hover { background: var(--c-primary-soft); }
.cmp-supplier-col small { color: rgba(234,244,245,.6); font-weight: 500; }
.cmp-bep-price, .cmp-number, .cmp-offer-cell strong { font-variant-numeric: tabular-nums; }
.cmp-no-match { color: var(--c-text-faint); font-style: italic; }
.cmp-summary { gap: 14px; }
.cmp-toolbar strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}


/* ── 13.2 · ARCHIVE WHATSAPP ───────────────────────────────────────────
   Ce module utilisait déjà les jetons : il a donc à moitié suivi tout
   seul. Restaient la bannière, plate, les trois compteurs — de très gros
   chiffres en Inter, qui écrasaient tout — et l'onglet actif souligné
   d'orange. */

.wa-view { max-width: 1180px; }

.wa-topbar {
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  background:
    radial-gradient(120% 160% at 85% -40%, rgba(26,163,180,.3) 0%, transparent 60%),
    linear-gradient(118deg, var(--bep-teal-abyss) 0%, var(--bep-teal-dark) 60%, #10606c 100%);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,.07);
}
.wa-title svg { color: rgba(217,173,92,.9); }
.wa-title h2 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.wa-title p { color: rgba(232,244,246,.68); font-size: 12.5px; }

/* Les trois compteurs. Le chiffre passe au Cormorant et descend d'un
   cran : il reste le plus gros élément de la carte, sans hurler. */
.wa-stats { gap: 14px; }
.wa-stat-card {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.wa-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.wa-stat-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--bep-teal-dark);
}
.wa-stat-lbl {
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Le Cormorant compose par défaut en chiffres elzéviriens — le 3, le 4,
   le 7 et le 9 descendent sous la ligne. C'est juste dans un texte
   suivi, et faux dans un compteur : 9317 y devient illisible. Partout où
   un titre en Cormorant peut contenir un nombre, on repasse aux chiffres
   bâtons, tabulaires comme le reste de la plateforme. */
.wa-stat-num,
.wa-title h2,
.wa-section-head h3,
.wa-album-name,
.wa-modal-head h3,
.cmp-hero h2,
.cmp-import-head h3,
.cmp-action-bar strong,
.cmp-toolbar strong,
.rc-header h2,
.rc-card h3 {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* Onglets : le trait actif est en laiton, et il glisse. */
.wa-tabs { border-bottom: 1px solid var(--c-hairline); gap: 2px; }
.wa-tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-base) var(--ease);
}
.wa-tab.active {
  color: var(--bep-teal-dark);
  border-bottom-color: var(--bep-brass);
}
.wa-section-head h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}

.wa-albums { gap: 16px; }
.wa-album-card {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.wa-album-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Un voile sombre en bas de la couverture : le compteur de photos reste
   lisible quelle que soit la photo tirée au sort comme vignette. */
.wa-album-cover {
  position: relative;
  background-color: var(--bep-mist-2);
  background-size: cover;
  background-position: center;
}
.wa-album-cover[style*="background-image"]::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(180deg, transparent, rgba(6,35,42,.55));
  pointer-events: none;
}
.wa-album-cover svg { color: var(--bep-teal); }
.wa-album-count {
  z-index: 1;
  background: rgba(6,35,42,.62);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.wa-album-name { font-size: 14px; color: var(--bep-teal-dark); }
.wa-album-sub { color: var(--c-text-muted); }

.wa-conv-list { border: 1px solid var(--c-hairline); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.wa-conv-item { border-bottom: 1px solid var(--c-hairline); }
.wa-conv-item:hover { background: var(--c-primary-soft); }
.wa-conv-avatar {
  background: linear-gradient(145deg, var(--bep-teal), var(--bep-teal-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.wa-conv-count {
  background: var(--c-primary-soft);
  color: var(--bep-teal-dark);
  font-variant-numeric: tabular-nums;
}
.wa-result { border: 1px solid var(--c-hairline); border-left: 3px solid var(--bep-brass); box-shadow: var(--shadow-xs); }
.wa-result-conv { color: var(--bep-teal-dark); }

.wa-btn { border-radius: var(--radius-sm); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.wa-btn:active { transform: translateY(1px) scale(.985); }
.wa-btn-teal {
  background: linear-gradient(135deg, var(--bep-teal), var(--bep-teal-dark));
  box-shadow: 0 1px 2px rgba(10,60,69,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.wa-btn-teal:hover {
  background: linear-gradient(135deg, var(--bep-teal-bright), var(--bep-teal));
  box-shadow: 0 4px 14px -4px rgba(10,60,69,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.wa-btn-orange {
  background: linear-gradient(135deg, var(--bep-brass-lit), var(--bep-brass));
  color: var(--bep-teal-abyss);
  box-shadow: 0 1px 2px rgba(140,100,20,.24), inset 0 1px 0 rgba(255,255,255,.4);
}
.wa-btn-orange:hover { background: linear-gradient(135deg, #ffdd9a, var(--bep-brass-lit)); }
.wa-profile-select select { border-radius: var(--radius-sm); }

/* L'état « service indisponible » : c'est un message d'erreur, il mérite
   une carte, pas du texte posé sur le fond. */
.wa-unavailable, .wa-empty-state, .wa-loading {
  max-width: 520px;
  margin: 48px auto;
  padding: 40px 32px;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.wa-unavailable h3, .wa-empty-state h3 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}
.wa-unavailable svg, .wa-empty-state svg { color: var(--bep-teal); opacity: .4; }
.wa-hint code { background: var(--c-surface-3); border: 1px solid var(--c-hairline); }
.wa-empty-inline {
  border: 1px dashed var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
}
.wa-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.wa-modal-head h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--bep-teal-dark); }


/* ── 13.3 · RAPPORT CAMÉRA DES CANALISATIONS ───────────────────────────
   Le plus éloigné des quatre. Tout y était écrit en hex — un teal
   (#1a8a96) qui n'est pas celui de la marque, un orange (#d88a00) et un
   violet (#5a3fc0) purs — et les trois boutons empilés du lot de vidéos
   faisaient feu tricolore. On garde les trois identités, parce qu'elles
   distinguent trois actions bien différentes, mais on les ramène dans la
   palette : teal de la maison, laiton, et une aubergine profonde. */

.rc-view { gap: 16px; }
.rc-header, .rc-card, .rc-next-bar, .rc-list, .rc-detail {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.rc-header { padding: 20px 22px; gap: 14px; }
.rc-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bep-teal-dark);
}
.rc-header p { color: var(--c-text-muted); font-size: 12.5px; line-height: 1.6; }
.rc-meta-field span, .rc-field > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Les cartes : le même filet de couleur au survol que partout ailleurs. */
.rc-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.rc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--bep-teal-bright), var(--bep-teal) 45%, var(--bep-brass));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
  z-index: 1;
}
.rc-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-border); transform: translateY(-1px); }
.rc-card:hover::before { transform: scaleX(1); }

/* La tête de carte reçoit exactement le traitement de `.card > h3` :
   fond dégradé, filet bas, et le petit repère laiton à gauche du titre. */
.rc-card-head {
  padding: 13px 18px;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border-bottom: 1px solid var(--c-hairline);
}
.rc-card-foot { border-top: 1px solid var(--c-hairline); padding: 13px 18px; }
.rc-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bep-teal-dark);
}
.rc-card h3::before {
  content: '';
  flex: 0 0 3px;
  width: 3px; height: 16px;
  background: linear-gradient(180deg, var(--bep-brass-lit), var(--bep-brass));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(217,173,92,.4);
}
.rc-fields { padding: 18px; }

/* Le chapeau du bloc « import en lot » mettait son titre et son
   paragraphe d'explication côte à côte : le titre se retrouvait cassé
   sur deux lignes, en 40 % de la largeur, à côté d'un paragraphe en
   gras qui le dominait. Le titre reprend sa ligne, l'explication passe
   dessous et en poids normal. */
.rc-batch .rc-card-head {
  display: block;
}
.rc-batch-hint {
  margin-top: 6px;
  font-weight: 400;
  color: var(--c-text-muted);
}
.rc-subtitle {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bep-teal);
}

/* Champs : mêmes hauteurs, même rayon, même anneau de focus que les dix
   autres étapes. C'est ce qui manquait le plus — on sentait au clavier
   qu'on avait changé de module. */
.rc-input, .rc-textarea {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 13px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.rc-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.6; }
.rc-input:hover, .rc-textarea:hover { border-color: var(--c-border-strong); }
.rc-input:focus, .rc-textarea:focus {
  outline: none;
  border-color: var(--bep-teal);
  box-shadow: var(--ring);
}
select.rc-input { padding-right: 30px; }

/* Boutons. Le teal devient celui de la marque ; l'orange devient laiton,
   texte foncé ; le violet devient une aubergine qui tient dans la palette.
   Trois actions toujours distinctes, mais qui ne se battent plus. */
.rc-btn {
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.rc-btn:hover { border-color: var(--bep-teal); color: var(--bep-teal); background: var(--c-primary-soft); transform: translateY(-1px); }
.rc-btn:active { transform: translateY(1px) scale(.985); }
.rc-btn-sm { height: 32px; font-size: 11.5px; }

.rc-btn-teal {
  background: linear-gradient(135deg, var(--bep-teal), var(--bep-teal-dark));
  border-color: rgba(0,0,0,.1);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10,60,69,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.rc-btn-teal:hover {
  background: linear-gradient(135deg, var(--bep-teal-bright), var(--bep-teal));
  color: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 4px 14px -4px rgba(10,60,69,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.rc-btn-orange {
  background: linear-gradient(135deg, var(--bep-brass-lit), var(--bep-brass));
  border-color: rgba(140,100,20,.28);
  color: var(--bep-teal-abyss);
  box-shadow: 0 1px 2px rgba(140,100,20,.22), inset 0 1px 0 rgba(255,255,255,.4);
}
.rc-btn-orange:hover {
  background: linear-gradient(135deg, #ffdd9a, var(--bep-brass-lit));
  color: var(--bep-teal-abyss);
  border-color: rgba(140,100,20,.28);
  box-shadow: 0 4px 14px -4px rgba(184,140,50,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.rc-btn-purple {
  background: linear-gradient(135deg, #4d3f70, #302650);
  border-color: rgba(0,0,0,.14);
  color: #f2eefb;
  box-shadow: 0 1px 2px rgba(30,20,60,.26), inset 0 1px 0 rgba(255,255,255,.14);
}
.rc-btn-purple:hover {
  background: linear-gradient(135deg, #5f4e89, #3b2f61);
  color: #f2eefb;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 4px 14px -4px rgba(48,38,80,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.rc-btn-ghost { background: var(--c-surface-2); }
.rc-empty-note { color: var(--c-text-muted); }

.rc-list-item {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.rc-list-item:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.rc-list-item.active {
  border-color: var(--bep-teal);
  background: var(--c-primary-soft);
  box-shadow: inset 3px 0 0 var(--bep-teal);
}

/* La liste des étapes du lot, numérotée : elle porte la séquence, ce qui
   permet aux trois boutons d'à côté de ne plus avoir à la crier. */
.rc-batch-steps {
  gap: 0;
  padding: 4px 14px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}
.rc-batch-step {
  padding: 11px 0;
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-text-2);
  font-size: 12.5px;
  line-height: 1.55;
}
.rc-batch-step:last-child { border-bottom: 0; }
/* Le message de résultat est une phrase entière : un rectangle, pas une
   gélule. Les états courts (ok / erreur) gardent la couleur. */
.rc-batch-status {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
}
.rc-ai-status { border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.rc-batch-status.ok  { color: var(--c-success); border-color: rgba(23,132,90,.28); background: rgba(23,132,90,.08); }
.rc-batch-status.err { color: var(--c-danger);  border-color: rgba(192,57,43,.28);  background: rgba(192,57,43,.07); }
.rc-ai-status.ok  { color: var(--c-success); }
.rc-ai-status.err { color: var(--c-danger); }

/* La zone du plan : même dépôt que celui de la comparaison, pour que
   « déposer un document » se présente partout de la même façon. */
.rc-plan-empty {
  border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.rc-plan-empty:hover { border-color: var(--bep-teal); background: var(--c-primary-soft); }
.rc-plan-empty svg { color: var(--bep-teal); opacity: .42; }
.rc-plan-empty p { color: var(--c-text-muted); font-size: 12.5px; }
/* ·· Le plan annoté ·······························································
   Trois blocs qui n'avaient presque aucun style. La synthèse produite
   par l'IA s'affichait en texte brut sur toute la largeur de la carte —
   une justification de mille pixels, qu'on relit deux fois — suivie
   d'une liste à puces par défaut. La ligne d'instruction (`.rc-plan-tip`)
   n'avait AUCUNE règle dans aucune feuille : elle tombait collée au bord
   de la carte, sans rôle visible. */

/* La synthèse est une lecture faite par une machine : elle porte un filet
   laiton sur sa gauche, comme tout ce qui vient de l'IA dans la maison. */
.rc-plan-ai {
  margin: 18px;
  padding: 15px 18px 16px 19px;
  border: 1px solid var(--c-hairline);
  border-left: 3px solid var(--bep-brass);
  border-top: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}
.rc-plan-ai h4 {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bep-teal);
  margin: 0 0 10px;
}
/* Une ligne de texte se lit mal au-delà de 75 caractères environ. */
.rc-plan-ai > p {
  max-width: 78ch;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.68;
  color: var(--c-text-2);
}
/* La légende n'est pas une énumération, c'est un relevé de faits : une
   grille qui se replie selon la largeur, un losange plutôt qu'une puce. */
.rc-plan-ai-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-hairline);
}
.rc-plan-ai-list li {
  position: relative;
  padding: 7px 0 7px 17px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-text-2);
}
.rc-plan-ai-list li::before {
  content: '';
  position: absolute;
  left: 1px; top: 13px;
  width: 5px; height: 5px;
  background: var(--bep-teal);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* La ligne d'instruction. Son point teal est le même que celui des
   repères posés juste en dessous : la phrase montre ce qu'elle décrit. */
.rc-plan-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 14px;
  padding: 10px 14px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.rc-plan-tip::before {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bep-teal);
  box-shadow: 0 0 0 3px rgba(18,112,125,.16);
}

/* Le plateau. Un plan d'exécution est un scan presque blanc : posé sur
   du blanc, il n'avait pas de bord. On lui donne un fond, et les bandes
   que laisse `object-fit: contain` cessent d'être du vide accidentel
   pour devenir un passe-partout.
   L'anneau est une ombre INTÉRIEURE et non une bordure : une bordure
   rétrécirait la boîte de deux pixels, et les repères enregistrés
   glisseraient d'autant. */
.rc-plan-stage {
  background: var(--c-surface-3);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
  overflow: hidden;
}
.rc-plan-img { background: transparent; }
/* Le texte dit « cliquez sur le plan » : le curseur le dit aussi. */
.rc-plan-overlay { cursor: crosshair; }

.rc-pin {
  width: 26px; height: 26px;
  background: linear-gradient(145deg, var(--bep-teal-bright), var(--bep-teal));
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(6,35,42,.34), 0 0 0 1px rgba(6,35,42,.1);
  font-size: 11.5px;
  font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.rc-pin:hover {
  transform: translate(-50%, -50%) scale(1.16);
  box-shadow: 0 5px 14px rgba(6,35,42,.44), 0 0 0 1px rgba(6,35,42,.12);
  z-index: 3;
}
/* Le repère sélectionné passe au laiton et se détache du groupe : dans
   une grappe de repères voisins, c'est la seule façon de le retrouver. */
.rc-pin.active {
  background: linear-gradient(145deg, var(--bep-brass-lit), var(--bep-brass));
  color: var(--bep-teal-abyss);
  box-shadow: 0 2px 9px rgba(140,100,20,.5), 0 0 0 4px rgba(217,173,92,.26);
  z-index: 2;
}

.rc-vid-cell, .rc-photo-item {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.rc-vid-cell:hover, .rc-photo-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rc-photo-cap, .rc-vid-meta { color: var(--c-text-muted); font-size: 11px; }
.rc-vid-name { color: var(--c-text); font-weight: 600; }

.rc-inline-note {
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-hairline);
  background: var(--c-surface-2);
  color: var(--c-text-2);
}
.rc-inline-note-warn {
  border-color: rgba(183,121,31,.3);
  background: rgba(224,154,26,.07);
  color: var(--c-warning);
}
.rc-modal-back { backdrop-filter: blur(3px); background: rgba(6,35,42,.42); }
.rc-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--c-hairline); }
.rc-modal-info { color: var(--c-text-muted); font-size: 12px; }


/* ── 13.4 · RÉUNIONS (VELT) ────────────────────────────────────────────
   Ici il n'y a rien à styler à l'intérieur : Velt est un Streamlit servi
   dans une iframe, sur un autre process, et la feuille de la plateforme
   ne franchit pas cette frontière. Ce qu'on peut faire, c'est le cadre —
   et un cadre bien fait suffit à rattacher la page au reste.

   L'ancienne barre était noire (#1A1A1C) : la seule surface vraiment
   noire de toute la plateforme. Elle passe au teal abyssal, comme le
   rail des étapes. */

.velt-iframe-wrap {
  /* La hauteur se déduit du bandeau réellement mesuré (--header-h, posé
     par js/core/motion.js) au lieu des 200 px devinés d'avant. */
  height: calc(100vh - var(--header-h, 72px) - 152px);
  min-height: 460px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
}
.velt-iframe-bar {
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--bep-teal-dark), var(--bep-teal-abyss));
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}
/* Le point vert dit « le service répond ». Il respire lentement : c'est
   un témoin d'état, pas une alarme. */
.velt-iframe-title::before {
  width: 7px; height: 7px;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.16), 0 0 10px rgba(74,222,128,.7);
  animation: velt-pulse 2.8s var(--ease) infinite;
}
@keyframes velt-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.16), 0 0 10px rgba(74,222,128,.7); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,.04), 0 0 14px rgba(74,222,128,.35); }
}
.velt-iframe-fullscreen {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(232,244,246,.72);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.velt-iframe-fullscreen:hover {
  color: var(--bep-teal-abyss);
  background: var(--bep-brass-lit);
  border-color: var(--bep-brass-lit);
}
.velt-iframe { border: 0; background: var(--c-surface); }


/* ── 13.5 · CE QUI EST DÉSACTIVÉ DOIT EN AVOIR L'AIR ─────────────────
   Défaut révélé par la refonte, pas créé par elle : aucun de ces trois
   vocabulaires n'avait d'état désactivé. « Créer les canalisations (0) »
   est inerte tant qu'aucune vidéo n'est sélectionnée, et s'affichait
   pourtant en laiton plein, exactement comme le bouton d'à côté qui,
   lui, marche. Le laiton attirait le clic vers le seul bouton qui ne
   répondait pas. Les dix autres étapes ont le même trou : `.btn:disabled`
   n'est défini nulle part. On ne le corrige pas ici — ces quatre onglets
   étaient la commande, et un changement d'apparence sur les dix autres
   mérite d'être vu avant d'être posé. */
.rc-btn:disabled,
.wa-btn:disabled,
.cmp-analyze-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.35);
}
.rc-btn:disabled:hover,
.wa-btn:disabled:hover,
.cmp-analyze-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ── 13.6 · IMMOBILITÉ DEMANDÉE ────────────────────────────────────────
   Rien à écrire ici, et c'est voulu. La section 11 coupe déjà les
   durées d'animation et de transition sur `*, *::before, *::after` —
   c'est la bonne méthode, parce qu'elle laisse les TRANSFORMATIONS
   intactes.

   Une première version de cette section neutralisait `transform` sur
   les éléments animés de ces quatre onglets. C'était faux : sur cette
   plateforme, `transform` ne sert pas qu'à bouger. `.rc-pin` porte un
   `translate(-50%, -50%)` qui le CENTRE sur sa coordonnée — le
   supprimer décalait chaque repère du plan d'un demi-repère vers le
   bas et la droite. Et le filet de couleur en tête de carte porte un
   `scaleX(0)` qui le REND INVISIBLE au repos — le supprimer l'allumait
   en permanence sur toutes les cartes.

   La leçon vaut pour la suite : pour respecter `prefers-reduced-motion`,
   on coupe la durée, jamais la transformation. */


/* ══════════════════════════════════════════════════════════════════════
   14 · LE TABLEAU DE BORD DES PROJETS
   ──────────────────────────────────────────────────────────────────────
   La fenêtre qui liste les dossiers enregistrés (`js/views/dashboard.js`,
   vocabulaire `db-`, styles dans maestro.css). C'est le premier écran de
   la journée : on y choisit le chantier sur lequel on va travailler.

   Trois choses n'allaient pas.

   LA HAUTEUR. `.db-overlay` est en `align-items: stretch` et `.db-panel`
   n'a aucune limite : la fenêtre prenait toute la hauteur de l'écran quel
   que soit le nombre de projets. Mesuré à six projets sur un écran de
   950 px : un panneau de 910 px pour un tableau de 368 px, soit
   444 px de vide sous la dernière ligne.

   LES COULEURS. Six teintes sans parenté : un bleu pour GC, un orange
   pour AMEX, un vert pour ENT, un gris pour le reste, plus un jaune et
   deux bleus pour l'avancement. Or ces deux familles ne disent pas la
   même chose. Le secteur est une CATÉGORIE — trois tons de la palette
   suffisent à les distinguer. L'avancement est une ÉCHELLE — quatre
   couleurs sans ordre ne se lisent pas ; une rampe d'intensité, si.

   L'ABSENCE. Un champ vide s'affichait en pastille grise. La ligne sans
   données en portait cinq : cinq objets gris qui ont l'air d'être
   quelque chose. Un vide doit avoir l'air vide.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 14.1 · La fenêtre ─────────────────────────────────────────────────
   Elle se centre et se limite à son contenu. Au-delà, c'est le tableau
   qui défile, pas la page. */
.db-overlay {
  align-items: center;
  padding: 28px;
  background: rgba(6, 35, 42, .58);
  backdrop-filter: blur(3px);
}
.db-panel {
  max-height: calc(100vh - 56px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.1);
  background: var(--c-bg);
  box-shadow: var(--shadow-lg);
}

.db-topbar {
  padding: 18px 26px;
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
  border-bottom: 1px solid var(--c-hairline);
}
.db-topbar-icon { color: var(--bep-teal); }
.db-topbar-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--bep-teal-dark);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.db-topbar-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 4px;
}
.db-body { padding: 22px 26px 26px; }

/* ── 14.2 · La barre d'outils ──────────────────────────────────────────
   Mêmes champs que les quatorze étapes : même hauteur, même rayon, même
   anneau au focus. On ne change pas de matière en changeant d'écran. */
.db-search, .db-filter {
  height: 38px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 13px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.db-search { padding: 0 13px; }
.db-search:hover, .db-filter:hover { border-color: var(--c-border-strong); }
.db-search:focus, .db-filter:focus {
  border-color: var(--bep-teal);
  box-shadow: var(--ring);
  background: var(--c-surface);
}
.db-action-btn {
  height: 38px;
  padding: 0 15px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.db-action-btn:active { transform: translateY(1px) scale(.985); }
.db-new-btn {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  box-shadow: var(--shadow-xs);
}
.db-new-btn:hover {
  background: var(--c-primary-soft);
  border-color: var(--bep-teal);
  color: var(--bep-teal);
  transform: translateY(-1px);
}
.db-save-btn {
  background: linear-gradient(135deg, var(--bep-teal), var(--bep-teal-dark));
  border: 1px solid rgba(0,0,0,.1);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10,60,69,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.db-save-btn:hover {
  background: linear-gradient(135deg, var(--bep-teal-bright), var(--bep-teal));
  box-shadow: 0 4px 14px -4px rgba(10,60,69,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.db-save-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; filter: grayscale(.35); }
/* Fermer n'est pas détruire : le bouton était rose, il devient neutre. */
.db-close-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text-muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.db-close-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

/* ── 14.3 · Le tableau ─────────────────────────────────────────────────
   Tête sombre, comme les tableaux des quatorze étapes. */
.db-table-wrap {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.db-table { font-family: var(--font); font-size: 12.5px; }
.db-table thead tr, .db-table thead th {
  background: linear-gradient(180deg, var(--bep-teal-dark), var(--bep-teal-abyss));
  color: #dcecee;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  border-bottom: 0;
  padding: 12px 14px;
}
.db-table tbody tr { border-bottom: 1px solid var(--c-hairline); }
.db-table tbody tr:nth-child(even) { background: var(--c-surface-2); }
.db-table tbody tr:hover { background: var(--c-primary-soft); }
.db-table td { padding: 12px 14px; color: var(--c-text); }

/* La ligne du projet ouvert : un repère laiton à gauche, la seule ligne
   qui en porte un. On la retrouve d'un coup d'œil dans une longue liste. */
.db-row-active,
.db-row-active:nth-child(even) { background: var(--c-primary-soft) !important; }
.db-row-active:hover { background: #d8ecef !important; }
.db-row-active td:first-child { box-shadow: inset 3px 0 0 var(--bep-brass); }
.db-active-tag {
  color: var(--bep-teal-abyss);
  background: linear-gradient(145deg, var(--bep-brass-lit), var(--bep-brass));
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 3px 9px;
}

/* Le numéro de chantier n'a pas besoin d'une police à chasse fixe : la
   plateforme compose déjà tous ses chiffres en tabulaire. */
.db-num {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bep-teal-dark);
  background: var(--c-primary-soft);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font-variant-numeric: lining-nums tabular-nums;
}
.db-titre { font-weight: 600; color: var(--c-text); }
.db-cell-amt {
  color: var(--bep-teal-dark);
  font-variant-numeric: lining-nums tabular-nums;
}
.db-cell-date {
  color: var(--c-text-muted);
  font-size: 11.5px;
  font-variant-numeric: lining-nums tabular-nums;
}
.db-cell-loc, .db-cell-tech { color: var(--c-text-2); }

/* ── 14.4 · Les deux familles de pastilles ─────────────────────────────
   SECTEUR : une catégorie. Trois tons de la maison suffisent à séparer
   les trois métiers, et le reste passe en neutre. */
.db-sect {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.db-sect-gc    { background: var(--bep-teal-dark); color: #dcecee; }
.db-sect-amex  { background: linear-gradient(145deg, var(--bep-brass-lit), var(--bep-brass)); color: var(--bep-teal-abyss); }
.db-sect-ent   { background: #d7ece0; color: #1b6344; }
.db-sect-other { background: var(--c-surface-3); color: var(--c-text-muted); border: 1px solid var(--c-hairline); }

/* AVANCEMENT : une échelle. Une seule teinte qui monte en intensité —
   on lit la progression sans lire les mots. « Complet » sort du teal
   pour le vert, parce que terminé n'est pas une étape de plus. */
.db-badge {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
}
.db-badge-start    { background: #e7f2f3; color: #33707a; }
.db-badge-progress { background: #c5e2e5; color: #135b66; }
.db-badge-advanced { background: #9ecfd5; color: #08343c; }
.db-badge-done     { background: #cfe9dc; color: #10603f; }

/* ── 14.5 · L'absence ──────────────────────────────────────────────────
   Un champ vide n'est pas une valeur : il perd sa pastille. */
.db-sect-none, .db-badge-none, .db-num-none {
  background: none;
  border: 0;
  padding: 0;
  color: var(--c-text-faint);
  font-weight: 400;
}

/* ── 14.6 · Les actions de ligne ───────────────────────────────────────
   Six lignes, c'était six boutons teal pleins qui criaient d'une seule
   voix. Ils s'apaisent, et se colorent sur la ligne survolée : à tout
   instant, un seul bouton est mis en avant — celui qu'on vise. */
.db-load-btn {
  padding: 7px 15px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.db-table tbody tr:hover .db-load-btn:not(:disabled) {
  background: linear-gradient(135deg, var(--bep-teal), var(--bep-teal-dark));
  border-color: rgba(0,0,0,.1);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(10,60,69,.5), inset 0 1px 0 rgba(255,255,255,.16);
}
.db-load-btn:hover:not(:disabled) { transform: translateY(-1px); }
.db-load-btn.db-load-active {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
}

/* Supprimer est irréversible : le bouton reste discret jusqu'à ce qu'on
   le vise vraiment, et ne prend sa couleur d'alerte qu'à cet instant. */
.db-del-btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-text-faint);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.db-table tbody tr:hover .db-del-btn { color: var(--c-text-muted); }
.db-del-btn:hover {
  background: rgba(192,57,43,.1);
  border-color: rgba(192,57,43,.28);
  color: var(--c-danger);
  transform: none;
}

/* ── 14.7 · Chargement et liste vide ───────────────────────────────────*/
.db-spinner { border-color: var(--c-border); border-top-color: var(--bep-teal); }
.db-loading, .db-empty { color: var(--c-text-muted); }
.db-empty svg { color: var(--bep-teal); opacity: .32; }
.db-empty p {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}
.db-empty span { color: var(--c-text-muted); font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════════════
   15 · RACCORD DE L'ONGLET « PHOTOS CHANTIER »
   ──────────────────────────────────────────────────────────────────────
   Le kit arrive avec sa feuille autonome (css/photos_chantier.css) et sa
   propre palette : on n'y touche pas. Il manque seulement le gabarit —
   sa section est voisine de .m-content-body dans un conteneur en colonne,
   elle doit donc défiler et occuper la place exactement comme lui.
   ══════════════════════════════════════════════════════════════════════ */
#view-photos {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 48px;
  background: linear-gradient(180deg, #eef7f8 0%, var(--c-bg) 100px);
}
#view-photos[hidden] { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   16 · « PHOTOS CHANTIER » DANS LA LANGUE DE LA MAISON
   ──────────────────────────────────────────────────────────────────────
   Cet onglet vient d'ailleurs : c'est un kit repris de ROOS, livré avec sa
   propre feuille et sa propre palette — une pierre chaude et un ambre, un
   Iowan Old Style, du monospace pour les métadonnées. Posé à côté de nos
   quatorze autres étapes, il se voyait.

   Sa feuille dit elle-même quoi faire : « Le module d'origine puise ses
   couleurs dans le design-system maison. Ce bloc les redéfinit ICI pour
   qu'il fonctionne dans N'IMPORTE quel site — ou, si votre site expose
   déjà ces variables, supprimez ce bloc pour hériter de VOTRE thème. »

   On ne supprime rien : tout y passe par des jetons, et il suffit de les
   redéfinir. `css/photos_chantier.css` reste intact à l'octet près — le
   jour où le kit est mis à jour depuis ROOS, on écrase le fichier sans
   rien perdre de ce qui suit.

   ── L'ambre et le laiton ──
   Le jeton `--gold` du kit sert presque toujours de couleur de TEXTE :
   l'intitulé, l'onglet actif, les compteurs, les liens. Le renvoyer au
   laiton de la maison (#d9ad5c) donnerait du texte illisible sur blanc.
   Il part donc au teal — qui porte l'interactif chez nous — et le laiton
   est réservé aux deux endroits où il dit la même chose qu'ailleurs sur
   la plateforme : « celui-ci est le courant » et « celui-ci est à moi ».
   ══════════════════════════════════════════════════════════════════════ */

/* ── 16.1 · Les jetons du kit, traduits ───────────────────────────────
   Un seul bloc, et les 400 règles du kit suivent. Même spécificité que
   les siennes (#view-photos), mais chargé après : c'est ce qui gagne. */
#view-photos,
.pc-modal-fond,
.pc-viewer {
  --sans:  var(--font);
  --serif: var(--font-display);
  /* Le monospace des métadonnées est un tic du kit d'origine : ici les
     chiffres s'alignent en tabulaire dans l'Inter de la maison. Il ne
     reste que là où c'est vraiment du code — le code d'appairage. */
  --mono:  var(--font);

  --text-0: var(--c-text);
  --text-1: var(--c-text-2);
  --text-2: var(--c-text-muted);
  --text-3: var(--c-text-faint);

  --bg-card:  var(--c-surface);
  --bg-card2: var(--c-surface-2);
  --ln-1: var(--c-hairline);
  --ln-2: var(--c-border);
  --ln-3: var(--c-border-strong);
  --sl-0: var(--c-surface);
  --sl-1: var(--c-surface-3);

  --gold:        var(--bep-teal);
  --gold-bd:     rgba(18,112,125,.24);
  --gold-bd-hi:  rgba(18,112,125,.55);
  --gold-dim:    var(--c-primary-soft);
  --au-bg:       rgba(18,112,125,.06);

  --ok:      var(--c-success);
  --ok-ln:   rgba(23,132,90,.4);
  --warn:    var(--c-warning);
  --warn-ln: rgba(183,121,31,.42);
  --warn-bg: rgba(224,154,26,.1);
  --err:     var(--c-danger);

  --r-3: var(--radius-sm);
  --r-4: var(--radius);
  --r-5: var(--radius-lg);

  --dur-fast: var(--t-fast);
  --sh-2:     var(--shadow-md);
  --sh-focus: var(--ring);
}
/* Les chiffres de cet onglet s'alignent comme partout ailleurs. */
#view-photos { font-variant-numeric: lining-nums tabular-nums; }
/* Le code d'appairage se recopie chiffre à chiffre sur un téléphone :
   lui seul garde une chasse fixe. */
.pc-code { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace; }

/* ── 16.2 · Le chapeau ────────────────────────────────────────────────
   Aligné sur les autres chapeaux d'étape : intitulé en petites capitales,
   titre en Cormorant, filet de séparation. */
/* Un seul filet sous le chapeau : celui des sous-onglets, juste en
   dessous, fait deja la separation. Deux traits a cinquante pixels
   d ecart se lisent comme une erreur. */
.pc-header {
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.pc-eyebrow {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--bep-teal);
  margin-bottom: 6px;
}
.pc-title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--bep-teal-dark);
}
/* Le témoin de flux : une gélule, comme les états d'avancement du
   tableau de bord. */
.pc-live {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── 16.3 · Les sous-onglets ──────────────────────────────────────────
   Exactement le traitement de l'onglet WhatsApp : trait actif en laiton,
   libellé en teal foncé. Deux modules voisins ne doivent pas avoir deux
   grammaires d'onglets. */
.pc-tabs { border-bottom: 1px solid var(--c-hairline); }
.pc-tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-muted);
}
.pc-tab.active {
  color: var(--bep-teal-dark);
  border-bottom-color: var(--bep-brass);
}
.pc-tab-compte {
  background: var(--c-primary-soft);
  color: var(--bep-teal-dark);
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-tab.active .pc-tab-compte {
  background: linear-gradient(145deg, var(--bep-brass-lit), var(--bep-brass));
  color: var(--bep-teal-abyss);
}

/* ── 16.4 · La liste des dossiers ─────────────────────────────────────
   Elle flottait sur le fond. Elle devient une carte, comme la liste des
   conversations de l'onglet WhatsApp : un filet, une ombre, des lignes
   séparées par des cheveux. */
.pc-grid.pc-liste {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--c-surface);
}
.pc-grid.pc-liste .pc-dossier { border-bottom: 1px solid var(--c-hairline); }
.pc-grid.pc-liste .pc-dossier:last-child { border-bottom: 0; }
.pc-dossier:hover { background: var(--c-primary-soft); border-left-color: var(--bep-brass); }
.pc-dossier-nom {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--bep-teal-dark);
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-dossier-meta {
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--c-text-muted);
}
.pc-dossier-compte { color: var(--bep-teal-dark); }
.pc-dossier-compte span { color: var(--c-text-faint); }

/* Le fil d'Ariane et le compte de tête : de l'Inter, pas du monospace. */
.pc-fil { font-family: var(--font); font-size: 12.5px; color: var(--c-text-muted); }
.pc-fil b { color: var(--c-text); font-weight: 600; }

/* ── 16.5 · La grille des médias ──────────────────────────────────────
   Même traitement que les vignettes vidéo de l'onglet Canalisation : la
   photo prime, le cadre s'efface, et la carte se soulève au survol. */
.pc-carte {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.pc-carte:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pc-nom { color: var(--c-text); font-weight: 600; font-size: 12.5px; }
.pc-meta {
  font-family: var(--font);
  color: var(--c-text-muted);
  font-size: 11px;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ── 16.6 · Les pastilles ─────────────────────────────────────────────
   « à moi » prend le laiton : c'est le second des deux seuls emplois
   réservés, et il dit la même chose que la ligne active du tableau de
   bord des projets. */
.pc-puce {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
/* Une pastille est une etiquette, pas un texte compressible. Dans une
   fiche au titre long, « moi » se reduisait a « m… » : le titre est
   passe au Cormorant, plus large, ce qui a revele le defaut. */
.pc-fiche-titre { align-items: baseline; flex-wrap: wrap; }
.pc-fiche-titre .pc-puce { flex: 0 0 auto; }

.pc-puce.pc-moi {
  background: linear-gradient(145deg, var(--bep-brass-lit), var(--bep-brass));
  color: var(--bep-teal-abyss);
  border-color: transparent;
}

/* ── 16.7 · Les fiches téléphone et les boutons ───────────────────────*/
.pc-fiche {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--c-surface);
}
.pc-fiche-titre {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}
.pc-chiffre {
  color: var(--bep-teal-dark);
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-chiffre span { color: var(--c-text-faint); }
.pc-statut { font-family: var(--font); font-size: 12px; color: var(--c-text-muted); }
.pc-groupes { font-family: var(--font); font-size: 12px; color: var(--c-text-2); }

#view-photos .btn-gold {
  background: linear-gradient(135deg, var(--bep-teal), var(--bep-teal-dark));
  border-color: rgba(0,0,0,.1);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(10,60,69,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
#view-photos .btn-gold:hover:not([disabled]) {
  background: linear-gradient(135deg, var(--bep-teal-bright), var(--bep-teal));
  filter: none;
  box-shadow: 0 4px 14px -4px rgba(10,60,69,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
#view-photos .btn-outline {
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}
#view-photos .btn-outline:hover:not([disabled]) {
  border-color: var(--bep-teal);
  color: var(--bep-teal);
  background: var(--c-primary-soft);
}
.pc-retour {
  border-radius: var(--radius-sm);
  border-color: var(--c-border);
  color: var(--c-text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
}
.pc-retour:hover { border-color: var(--bep-teal); color: var(--bep-teal); background: var(--c-primary-soft); }

/* ── 16.8 · L'état vide et les fenêtres ───────────────────────────────
   La visionneuse garde son fond sombre : le kit le pose exprès, parce
   qu'elle est une surface posée SUR le média, indépendante du thème.
   On ne touche qu'au reste. */
.pc-etat-vide-titre {
  font-size: 23px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}
.pc-etat-vide-txt { color: var(--c-text-muted); }
.pc-etat-vide-txt b {
  font-family: ui-monospace, 'SF Mono', monospace;
  color: var(--bep-teal-dark);
  background: var(--c-surface-3);
  border: 1px solid var(--c-hairline);
  border-radius: 4px;
  padding: 1px 5px;
}
.pc-modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-hairline);
}
.pc-fiche-titre, .pc-modal h3 { letter-spacing: 0; }

/* ══════════════════════════════════════════════════════════════════════
   17 · LE BANDEAU REPLIÉ, ET LA FICHE DE PROFIL
   ──────────────────────────────────────────────────────────────────────
   Section 3 avait hiérarchisé onze commandes sans en retirer aucune.
   C'était le bon geste au bon moment ; il a atteint sa limite. Onze
   objets alignés restent onze objets, et six d'entre eux ne servaient
   pas la journée de travail : un badge qui répète un nom, un compteur de
   trois chiffres sans échelle, trois outils de dossier qu'on ouvre une
   fois par mois, et une déconnexion — qui n'a rien à faire à côté de
   « Enregistrer ».

   Il en reste quatre : Enregistrer, Projets, Importer docs, et le
   visage de l'utilisateur. Le reste vit derrière ce visage.

   RIEN N'EST RETIRÉ DU DOM. Les nœuds masqués ici sont ceux que
   js/app.js remplit et écoute ; ils restent en place, il continue de
   travailler dessus, et rendre l'un d'eux visible tient en une ligne
   supprimée. Les trois outils de dossier, eux, DÉMÉNAGENT dans la
   fenêtre de profil (js/views/profil.js les adopte) — d'où des
   sélecteurs ancrés sur `.app-header` : masqués dans le bandeau,
   visibles dans la fenêtre.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 17.1 · Ce qui se replie ───────────────────────────────────────────
   `!important` n'est pas une facilité : js/app.js pose un `display` EN
   LIGNE sur ces trois-là (`flex`, `inline-flex`, `''`), qu'une règle
   ordinaire ne peut pas battre. La solution propre serait de modifier
   js/app.js — mais ce fichier tient le compteur, les crochets de fetch
   et l'en-tête d'action de la télémétrie. On ne le touche pas pour une
   question d'affichage. */
.app-header #userBadge,
.app-header #usageBadge,
.app-header #logoutBtn,
.app-header #exportAll,
.app-header #importAll,
.app-header #resetAll { display: none !important; }

/* ── 17.2 · Le bouton de profil ────────────────────────────────────────
   Ce n'est pas un bouton de plus : c'est la porte de tout ce qui vient
   d'être replié. Il porte donc une matière qu'aucun autre n'a — un
   médaillon de laiton — pour qu'on le trouve sans le chercher. */
.profil-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 5px;
  padding: 4px 12px 4px 5px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.profil-btn:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(242, 205, 130, .45);
  transform: translateY(-1px);
}
.profil-btn:active { transform: translateY(0) scale(.985); }
.profil-btn.actif {
  background: rgba(242, 205, 130, .16);
  border-color: rgba(242, 205, 130, .6);
}

.profil-btn-av {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--bep-brass-lit), var(--bep-brass) 58%, #bf9448);
  color: var(--bep-teal-abyss);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 4px rgba(0, 0, 0, .28);
}
.profil-btn-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.18;
  min-width: 0;
}
.profil-btn-nom {
  font-size: 11.5px;
  font-weight: 600;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profil-btn-role {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242, 205, 130, .82);
}
.profil-btn-chev { opacity: .5; flex: 0 0 auto; }
.profil-btn:hover .profil-btn-chev { opacity: .85; }

/* Sous 1420 px, le médaillon suffit : le nom est déjà dans la fenêtre
   qu'il ouvre, et le bandeau a mieux à faire de ses pixels. */
@media (max-width: 1419px) {
  .profil-btn { padding: 4px; gap: 0; }
  .profil-btn-txt, .profil-btn-chev { display: none; }
}

/* ── 17.3 · La fenêtre ─────────────────────────────────────────────────*/
.profil-fond {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(6, 35, 42, .62);
  backdrop-filter: blur(5px);
}
.profil-fond[hidden] { display: none; }

.profil-carte {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ── 17.4 · Le chapeau — la même matière que le bandeau ────────────────
   La fenêtre s'ouvre depuis le bandeau : elle en garde la matière, sinon
   on change d'application en cliquant. */
.pf-tete {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  background:
    radial-gradient(120% 180% at 12% -40%, rgba(26, 163, 180, .34) 0%, transparent 58%),
    linear-gradient(118deg, var(--bep-teal-abyss) 0%, var(--bep-teal-dark) 46%, #0f5b66 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .28);
  box-shadow: 0 1px 0 rgba(217, 173, 92, .34);
}
.pf-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--bep-brass-lit), var(--bep-brass) 58%, #bf9448);
  color: var(--bep-teal-abyss);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 12px rgba(0, 0, 0, .3);
}
.pf-ident { min-width: 0; }
.pf-nom {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: #fff;
}
.pf-sous {
  margin: 5px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
}
.pf-role {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--bep-brass);
  color: var(--bep-teal-abyss);
}
.pf-role-technicien,
.pf-role-compagnon {
  background: rgba(255, 255, 255, .2);
  color: #eaf6f7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.pf-mail {
  font-size: 11.5px;
  color: rgba(214, 234, 237, .72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-fermer {
  appearance: none;
  align-self: start;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: rgba(233, 245, 246, .9);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pf-fermer:hover { background: rgba(255, 255, 255, .17); color: #fff; }

/* ── 17.5 · Le corps ───────────────────────────────────────────────────*/
.pf-corps { overflow-y: auto; padding: 4px 0 0; }

.pf-bloc {
  padding: 20px 22px;
  border-bottom: 1px solid var(--c-hairline);
}
.pf-bloc:last-child { border-bottom: 0; }
.pf-bloc[hidden] { display: none; }

.pf-bloc-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pf-bloc-tete h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.pf-periode {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bep-teal);
  text-transform: capitalize;
}
.pf-bloc-intro {
  margin: -6px 0 13px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-text-muted);
}

/* ── 17.6 · La jauge ───────────────────────────────────────────────────
   Le pourcentage domine, en display : c'est la seule chose qu'on vient
   lire. Le détail est dessous, en corps de texte, pour qui veut le
   nombre exact. Une jauge qui met les deux au même poids ne répond à
   aucune des deux questions. */
.pf-bloc-conso {
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
}
.pf-jauge-chiffres {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 13px;
}
.pf-jauge-pct {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--bep-teal-dark);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.pf-jauge-pct span { font-size: 54px; }
.pf-jauge-pct i { font-size: 22px; font-style: normal; margin-left: 3px; opacity: .55; }
.pf-jauge-detail {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-text-muted);
  padding-bottom: 4px;
}
.pf-jauge-detail strong { color: var(--c-text); font-weight: 700; }
.pf-jauge-detail em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--c-text-faint);
  margin-top: 1px;
}

.pf-barre-piste {
  position: relative;
  height: 11px;
  border-radius: 100px;
  background: var(--c-surface-3);
  box-shadow: inset 0 1px 2px rgba(10, 60, 69, .1);
  overflow: hidden;
}
.pf-barre-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--bep-teal-dark), var(--bep-teal) 55%, var(--bep-teal-bright));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: background .3s var(--ease);
}
/* Les repères ne sont pas décoratifs : à 50 % on est à mi-mois, à 75 %
   il reste une semaine de marge. Deux traits, pas dix. */
.pf-barre-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .55);
  mix-blend-mode: overlay;
}
.pf-barre-legende {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text-faint);
}

/* Les trois seuils. La couleur ne décore pas : elle dit où l'on en est. */
.pf-jauge.pf-tendu    .pf-barre-fill { background: linear-gradient(90deg, #c99a3f, var(--bep-brass) 60%, var(--bep-brass-lit)); }
.pf-jauge.pf-tendu    .pf-jauge-pct  { color: #97701f; }
.pf-jauge.pf-critique .pf-barre-fill { background: linear-gradient(90deg, #c96f1a, var(--bep-orange) 65%, #f0b45a); }
.pf-jauge.pf-critique .pf-jauge-pct  { color: #a5620f; }
.pf-jauge.pf-depasse  .pf-barre-fill { background: linear-gradient(90deg, #9c2b1e, var(--c-danger) 60%, #e06a52); }
.pf-jauge.pf-depasse  .pf-jauge-pct  { color: var(--c-danger); }
.pf-jauge.pf-depasse  .pf-jauge-detail em { color: var(--c-danger); font-weight: 600; }

/* ── 17.7 · Les trois tuiles ───────────────────────────────────────────*/
.pf-tuiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.pf-tuile {
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  text-align: left;
}
.pf-tuile strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--bep-teal-dark);
  font-variant-numeric: lining-nums tabular-nums;
}
.pf-tuile span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--c-text-muted);
}

/* ── 17.8 · Où partent les tokens ──────────────────────────────────────*/
.pf-repartition { margin-top: 18px; }
.pf-repartition[hidden] { display: none; }
.pf-repartition h4 {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.pf-repartition ul { margin: 0; padding: 0; list-style: none; }
.pf-repartition li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 46px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
}
.pf-rep-nom {
  color: var(--c-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-rep-barre {
  height: 5px;
  border-radius: 100px;
  background: var(--c-surface-3);
  overflow: hidden;
}
.pf-rep-barre i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--bep-teal), var(--bep-teal-bright));
}
.pf-rep-val {
  text-align: right;
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

/* ── 17.9 · L'aveu ─────────────────────────────────────────────────────
   Un compteur qui n'est pas encore une mesure doit le dire lui-même,
   sinon c'est l'interface qui ment à la place du code. */
.pf-note {
  margin: 15px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--bep-brass);
  background: var(--c-surface);
  font-size: 11px;
  line-height: 1.55;
  color: var(--c-text-muted);
}
.pf-note-alerte {
  border-left-color: var(--c-danger);
  color: #8d3125;
  background: #fdf4f2;
}

/* ── 17.10 · Les champs du compte ──────────────────────────────────────*/
.pf-champs { margin: 0; display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.pf-champs > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 13px;
  background: var(--c-surface);
}
.pf-champs dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.pf-champs dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.pf-champs dd em { font-style: normal; color: var(--c-text-muted); font-size: 11.5px; }
.pf-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px !important;
  color: var(--c-text-muted) !important;
}

/* ── 17.11 · Les trois outils adoptés ──────────────────────────────────
   Ce sont les nœuds du bandeau, déménagés : ils arrivent avec les
   classes `.btn-ghost` et `.btn-danger`, écrites pour du texte blanc sur
   fond teal. Sur fond clair, elles seraient illisibles. On les rhabille
   ici, sans toucher au balisage. */
.pf-outils { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-outils .btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.pf-outils .btn-ghost {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-2);
}
.pf-outils .btn-ghost:hover {
  background: var(--c-primary-soft);
  border-color: var(--bep-teal);
  color: var(--bep-teal-dark);
}
.pf-outils .btn-danger {
  background: transparent;
  border: 1px solid rgba(192, 57, 43, .38);
  color: var(--c-danger);
  margin-left: auto;
}
.pf-outils .btn-danger:hover {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}

/* ── 17.12 · Le pied ───────────────────────────────────────────────────*/
.pf-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--c-hairline);
  background: var(--c-surface-2);
}
.pf-pied-txt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.pf-deco {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.pf-deco:hover {
  background: var(--bep-teal-dark);
  border-color: var(--bep-teal-dark);
  color: #fff;
}

@media (max-width: 620px) {
  .profil-fond { padding: 12px; }
  .pf-tuiles { grid-template-columns: 1fr; }
  .pf-champs > div { grid-template-columns: 1fr; gap: 2px; }
  .pf-repartition li { grid-template-columns: minmax(0, 1fr) 46px; }
  .pf-rep-barre { display: none; }
  .pf-outils .btn-danger { margin-left: 0; }
}

/* ── 17.13 · Le bloc de contact ────────────────────────────────────────
   Deux lignes de même forme — une icône, un libellé, une valeur — dont
   l'une seulement s'écrit. La différence entre les deux ne tient pas à
   la décoration mais au champ : l'adresse est du texte, le téléphone est
   une saisie. On ne déguise pas l'un en l'autre.

   L'adresse e-mail porte sa mention « identifiant de connexion » : elle
   explique en trois mots pourquoi elle ne se modifie pas ici, et évite
   la question. */
.pf-contact {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface);
}
.pf-contact-ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 13px 14px;
}
.pf-contact-ligne + .pf-contact-ligne { border-top: 1px solid var(--c-hairline); }

.pf-contact-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--c-primary-soft);
  color: var(--bep-teal);
  flex: 0 0 auto;
}
.pf-contact-corps { min-width: 0; }
.pf-contact-lab {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.pf-contact-val {
  display: block;
  font-size: 13.5px;
  color: var(--c-text);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
}
a.pf-contact-val:hover { color: var(--bep-teal-dark); border-bottom-color: var(--c-border-strong); }
.pf-contact-note {
  align-self: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  white-space: nowrap;
}

/* ── La saisie du téléphone ────────────────────────────────────────────
   Même hauteur, même rayon et même anneau au focus que les champs des
   treize étapes : le profil n'est pas un autre produit. */
.pf-tel-saisie { display: flex; gap: 7px; }
.pf-tel-saisie input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pf-tel-saisie input:hover:not(:disabled) { border-color: var(--bep-teal); }
.pf-tel-saisie input:focus { border-color: var(--bep-teal); box-shadow: var(--ring); }
.pf-tel-saisie input:disabled {
  background: var(--c-surface-3);
  color: var(--c-text-faint);
  border-color: var(--c-border);
  cursor: not-allowed;
}
.pf-tel-btn {
  appearance: none;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bep-teal);
  background: var(--bep-teal);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pf-tel-btn:hover:not(:disabled) { background: var(--bep-teal-dark); border-color: var(--bep-teal-dark); }
/* Éteint tant qu'il n'y a rien à enregistrer — et il en a l'air. */
.pf-tel-btn:disabled {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text-faint);
  cursor: default;
}

.pf-tel-etat {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-muted);
}
.pf-tel-etat[hidden] { display: none; }
.pf-tel-ok      { color: var(--c-success); font-weight: 600; }
.pf-tel-alerte  { color: var(--c-danger); }
.pf-tel-attente { color: var(--c-text-muted); }

@media (max-width: 620px) {
  .pf-contact-ligne { grid-template-columns: auto minmax(0, 1fr); }
  .pf-contact-note { grid-column: 2; margin-top: 4px; }
  .pf-tel-saisie { flex-wrap: wrap; }
  .pf-tel-btn { width: 100%; }
}

/* ── Les clés de l'agent ──────────────────────────────────────────────
   Elles reprennent les primitives du bloc « Contact » juste au-dessus
   (.pf-tel-btn, .pf-tel-etat) : une clé n'est pas un objet d'une autre
   nature, elle n'a pas à avoir l'air d'en être un. */

.pf-cles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pf-cle-vide { margin: 0; font-size: 12px; color: var(--c-text-muted); }

.pf-cle-ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}
/* Une clé révoquée reste listée — la trace de ce qu'elle a fait compte —
   mais elle doit se lire au premier coup d'œil comme éteinte. */
.pf-cle-morte { opacity: .55; }
.pf-cle-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-cle-nom { font-size: 13px; font-weight: 600; color: var(--c-text); }
.pf-cle-sous { font-size: 11px; color: var(--c-text-muted); }

.pf-cle-revoquer {
  appearance: none; flex: 0 0 auto;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text-muted);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pf-cle-revoquer:hover { color: var(--c-danger); border-color: var(--c-danger); }

.pf-cle-neuve { display: flex; gap: 7px; }
.pf-cle-neuve input {
  flex: 1; min-width: 0; height: 36px; padding: 0 11px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
  font-family: inherit; font-size: 13px;
}
.pf-cle-neuve input:focus { border-color: var(--bep-teal); box-shadow: var(--ring); outline: none; }

/* Le jeton, montré une fois et une seule : la base n'en garde que
   l'empreinte. D'où le fond ambré — c'est un moment à ne pas rater. */
.pf-cle-revele {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid #f0e0c0; border-radius: var(--radius-sm);
  background: #fffaf0;
}
.pf-cle-revele[hidden] { display: none; }
.pf-cle-avert { margin: 0 0 8px; font-size: 12px; font-weight: 640; color: var(--c-warning); }
.pf-cle-jeton { display: flex; align-items: center; gap: 8px; }
.pf-cle-jeton code {
  flex: 1; min-width: 0;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--c-text);
  overflow-wrap: anywhere;
}
.pf-cle-suite { margin: 10px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--c-text-2); }
.pf-cle-suite code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px;
}

@media (max-width: 620px) {
  .pf-cle-neuve { flex-wrap: wrap; }
  .pf-cle-neuve .pf-tel-btn { width: 100%; }
  .pf-cle-jeton { flex-wrap: wrap; }
  .pf-cle-jeton .pf-tel-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   18 · CANALISATION — LE DÉROULÉ EN QUATRE ÉTAPES
   ──────────────────────────────────────────────────────────────────────
   La section 13.3 avait rhabillé cet onglet sans toucher à sa structure.
   Le défaut était en dessous.

   MESURÉ : 2 272 px de contenu dans une fenêtre de 972. Tout — le plan,
   le lot de vidéos, la liste des tronçons, le formulaire du tronçon
   courant — était empilé sur un seul rouleau. On ne pouvait pas voir en
   même temps ce qu'on venait de faire et ce qu'il restait à faire.

   DEUX NUMÉROTATIONS SE CONTREDISAIENT. Les cartes annonçaient 1 à 5,
   mais 1 et 2 n'arrivent qu'une fois pour le chantier tandis que 3, 4 et
   5 se répètent pour chaque tronçon. Pire : la carte « 2 » contenait sa
   propre liste 1-2-3-4 dont le premier point disait « importer le plan
   ci-dessus ». L'étape 2 renvoyait à l'étape 1.

   DEUX BOUTONS JUMEAUX. « Importer un plan » et « Extraire les réseaux du
   plan PDF (IA) » se tenaient côte à côte, même taille, même place. Le
   premier pose une image à punaiser, le second FABRIQUE la liste des
   tronçons. Rien ne les distinguait, et la zone de dépôt vide ne parlait
   que du premier.

   TROIS BOUTONS EN FEU TRICOLORE, dont deux désactivés mais peints en
   aplat — ils avaient l'air pressés, pas éteints.

   La réponse tient en une phrase : quatre étapes, une seule à l'écran, et
   chacune ne s'ouvre que lorsque la précédente a donné son résultat.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 18.1 · Le chapeau, réduit ─────────────────────────────────────────*/
.rc-header { padding: 18px 22px 14px; }
.rc-header-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.rc-header-txt h2 { margin: 0; }
.rc-header-txt p { margin: 4px 0 0; max-width: 62ch; }

/* Un repli, pas une carte : ce qu'on ouvre une fois par rapport ne doit
   pas occuper la même surface que ce qu'on fait dix fois. */
.rc-repli {
  margin-top: 12px;
  border-top: 1px solid var(--c-hairline);
  padding-top: 10px;
}
.rc-repli > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color var(--t-fast) var(--ease);
}
.rc-repli > summary::-webkit-details-marker { display: none; }
.rc-repli > summary::before {
  content: '›';
  font-size: 15px;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.rc-repli[open] > summary::before { transform: rotate(90deg); }
.rc-repli > summary:hover { color: var(--bep-teal); }
.rc-repli-note { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--c-text-faint); }
.rc-header-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding-top: 12px;
}

/* ── 18.2 · Le rail des quatre étapes ──────────────────────────────────
   Il remplace le paragraphe « Flux recommandé : 1) … 2) … 3) … ». Une
   interface qui DÉCRIT son parcours en prose est une interface qui ne le
   montre pas. */
.rc-rail {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--c-hairline);
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.rc-rail-item {
  appearance: none;
  flex: 1 1 0;
  min-width: 152px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.rc-rail-item:hover:not(:disabled) { background: var(--c-surface-3); }
.rc-rail-item:disabled { cursor: not-allowed; opacity: .48; }

.rc-rail-pastille {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--c-border-strong);
  color: var(--c-text-muted);
  background: var(--c-surface);
  transition: all var(--t-base) var(--ease);
}
.rc-rail-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rc-rail-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
  white-space: nowrap;
}
.rc-rail-sous {
  font-size: 10.5px;
  color: var(--c-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Faite : le laiton, comme les étapes terminées du rail Maestro. */
.rc-rail-faite .rc-rail-pastille {
  background: var(--bep-brass);
  border-color: var(--bep-brass);
  color: var(--bep-teal-abyss);
}
.rc-rail-faite .rc-rail-titre { color: var(--c-text); }
.rc-rail-faite .rc-rail-sous { color: var(--bep-teal); font-weight: 600; }

/* Courante : la seule qui porte du fond. */
.rc-rail-courante {
  background: var(--c-primary-soft);
  border-color: rgba(18,112,125,.3);
}
.rc-rail-courante:hover { background: var(--c-primary-soft); }
.rc-rail-courante .rc-rail-pastille {
  background: var(--bep-teal-dark);
  border-color: var(--bep-teal-dark);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(18,112,125,.13);
}
.rc-rail-courante .rc-rail-titre { color: var(--bep-teal-dark); font-weight: 700; }
.rc-rail-courante .rc-rail-sous { color: var(--c-text-muted); }

/* Le trait entre deux étapes : plein quand le chemin est ouvert. */
.rc-rail-lien {
  flex: 0 0 20px;
  align-self: center;
  height: 1.5px;
  border-radius: 2px;
  background: var(--c-border);
}
.rc-rail-lien.ouvert { background: linear-gradient(90deg, var(--bep-brass), var(--c-border)); }

/* ── 18.3 · La scène : une étape à la fois ─────────────────────────────*/
.rc-scene { display: flex; flex-direction: column; gap: 16px; }

.rc-panneau {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.rc-panneau-tete {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--c-hairline);
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
}
.rc-panneau-tete h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--bep-teal-dark);
}
/* La phrase dit ce que l'étape PRODUIT, pas ce qu'il faut cliquer. */
.rc-panneau-tete p {
  margin: 6px 0 0;
  max-width: 74ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-text-muted);
}
.rc-panneau-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 18px; }

/* ── 18.4 · Les deux chemins de l'étape « plan » ───────────────────────
   Ils ne sont plus jumeaux : le principal porte le laiton et le poids,
   le second est une carte ordinaire. La différence de rang se voit avant
   qu'on ait lu le titre. */
.rc-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 14px; }
.rc-choix-carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.rc-choix-carte:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
.rc-choix-carte h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
}
.rc-choix-carte p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-text-muted);
}
.rc-choix-carte .rc-btn { margin-top: 4px; }
.rc-choix-ico {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--c-surface-3);
  color: var(--c-text-muted);
}
.rc-choix-ico svg { width: 20px; height: 20px; }

.rc-choix-primaire {
  border-color: rgba(217,173,92,.55);
  background: linear-gradient(165deg, #fffaf0, var(--c-surface) 62%);
  box-shadow: 0 2px 14px -6px rgba(217,173,92,.5);
}
.rc-choix-primaire:hover { border-color: var(--bep-brass); box-shadow: 0 4px 20px -6px rgba(217,173,92,.6); }
.rc-choix-primaire .rc-choix-ico { background: rgba(217,173,92,.18); color: #8a6516; }
.rc-choix-primaire h3 { color: var(--bep-teal-dark); }

/* La porte de sortie : un lien, jamais un bouton. Elle ne doit pas
   ressembler au chemin qu'on recommande. */
.rc-sans-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-top: 4px;
  font-size: 12px;
  color: var(--c-text-faint);
}
.rc-lien {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bep-teal);
  cursor: pointer;
  border-bottom: 1px solid rgba(18,112,125,.3);
}
.rc-lien:hover { color: var(--bep-teal-dark); border-bottom-color: var(--bep-teal-dark); }

/* ── 18.5 · Ce qui est fait ────────────────────────────────────────────
   Chaque étape rend compte de son résultat, en tête de la suivante. C'est
   ce qui remplace le fait de remonter voir si ça a marché. */
.rc-fait {
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(23,132,90,.24);
  border-left: 3px solid var(--c-success);
  background: rgba(23,132,90,.05);
}
.rc-fait-tete { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--c-text); }
.rc-fait-coche {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.rc-fait-note { margin: 7px 0 0; font-size: 11.5px; color: var(--c-text-muted); }
.rc-fait-attention { border-color: rgba(224,154,26,.3); border-left-color: var(--bep-orange); background: rgba(224,154,26,.06); }
.rc-fait-attention .rc-fait-coche { background: var(--bep-orange); }

.rc-fait-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.rc-jeton {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}
.rc-jeton-clic { cursor: pointer; border-color: rgba(224,154,26,.45); color: #8a5a0c; }
.rc-jeton-clic:hover { background: var(--bep-orange); border-color: var(--bep-orange); color: #fff; }

.rc-alerte {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(224,154,26,.34);
  border-left: 3px solid var(--bep-orange);
  background: rgba(224,154,26,.07);
}
.rc-alerte strong { font-size: 13.5px; color: #7a4d09; }
.rc-alerte p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: var(--c-text-muted); }

.rc-note-douce {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--c-border-strong);
  font-size: 12px;
  color: var(--c-text-muted);
}

/* ── 18.6 · Le dépôt des vidéos et la file d'attente ───────────────────*/
.rc-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px;
  border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  text-align: center;
}
.rc-depot-note { margin: 0; font-size: 12px; color: var(--c-text-muted); max-width: 52ch; }

.rc-attente { display: flex; flex-direction: column; gap: 10px; }
.rc-attente h4 {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.rc-attente-liste {
  max-height: 236px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
}
.rc-attente-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--c-hairline);
}
.rc-attente-item:last-child { border-bottom: 0; }
.rc-attente-nom { font-size: 12.5px; font-weight: 600; color: var(--c-text); overflow-wrap: anywhere; }
.rc-attente-sub { flex: 0 0 auto; font-size: 11px; color: var(--c-text-faint); }

/* ── 18.7 · L'analyse : la seule étape qui dure ────────────────────────*/
.rc-lancer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 2px; }
.rc-jauge {
  width: 100%;
  max-width: 480px;
  height: 7px;
  border-radius: 100px;
  background: var(--c-surface-3);
  box-shadow: inset 0 1px 2px rgba(10,60,69,.1);
  overflow: hidden;
}
.rc-jauge[hidden] { display: none; }
/* Une pastille vide reste une pastille : bordure, fond et rayon
   dessinaient un objet là où il n'y avait rien à lire. */
.rc-batch-status:empty { display: none; }
.rc-jauge i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--bep-teal-dark), var(--bep-teal-bright));
  transition: width .5s var(--ease);
}

/* ── 18.8 · La barre de passage ────────────────────────────────────────
   Une seule action forte, à droite, toujours au même endroit. Le retour
   est à gauche, en retrait : on ne le cherche que si on en a besoin. */
.rc-passage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--c-hairline);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}
.rc-passage-droite { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.rc-passage-note { font-size: 11.5px; color: var(--c-text-faint); }
.rc-btn-suite {
  background: var(--bep-teal-dark);
  border-color: var(--bep-teal-dark);
  color: #fff;
  font-weight: 700;
}
.rc-btn-suite:hover:not(:disabled) {
  background: var(--bep-teal);
  border-color: var(--bep-teal);
  color: #fff;
  transform: translateY(-1px);
}
/* Éteint veut dire éteint : pas d'aplat de couleur sur un bouton
   inopérant. C'était le défaut du feu tricolore. */
.rc-btn:disabled,
.rc-btn-suite:disabled {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text-faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.rc-btn-large { height: 44px; padding: 0 22px; font-size: 13.5px; }
.rc-btn-brass {
  background: linear-gradient(135deg, var(--bep-brass-lit), var(--bep-brass) 62%, #bf9448);
  border-color: rgba(0,0,0,.06);
  color: var(--bep-teal-abyss);
  font-weight: 700;
}
.rc-btn-brass:hover:not(:disabled) {
  box-shadow: 0 4px 16px -4px rgba(217,173,92,.6);
  transform: translateY(-1px);
  color: var(--bep-teal-abyss);
}
.rc-btn-aubergine { background: #4a2d6b; border-color: #4a2d6b; color: #fff; }
.rc-btn-aubergine:hover:not(:disabled) { background: #5c3a83; border-color: #5c3a83; color: #fff; transform: translateY(-1px); }

/* ── 18.9 · La sortie ──────────────────────────────────────────────────
   Le PDF n'était accessible que depuis le dock de droite, à côté de six
   autres. Il est maintenant AUSSI au bout du parcours, là où l'on arrive. */
.rc-sortie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(217,173,92,.4);
  background: linear-gradient(160deg, #fffaf0, var(--c-surface) 70%);
  box-shadow: var(--shadow-card);
}
.rc-sortie strong { display: block; font-size: 15px; color: var(--bep-teal-dark); }
.rc-sortie span { display: block; margin-top: 2px; font-size: 12px; color: var(--c-text-muted); }

/* ── 18.10 · Le pied d'archive ─────────────────────────────────────────*/
.rc-pied {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--c-hairline);
  background: var(--c-surface-2);
}
.rc-pied-lab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.rc-pied select { flex: 1 1 auto; min-width: 0; max-width: 340px; }

/* ── 18.11 · La relecture ──────────────────────────────────────────────
   La liste tient toute seule à gauche et défile ; le détail respire. */
.rc-etape-relecture .rc-grid { align-items: start; }
.rc-etape-relecture .rc-list { position: sticky; top: 0; max-height: calc(100vh - 220px); overflow-y: auto; }

@media (max-width: 1180px) {
  .rc-rail-sous { display: none; }
  .rc-rail-item { min-width: 118px; }
  .rc-etape-relecture .rc-list { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .rc-passage { flex-direction: column; align-items: stretch; }
  .rc-passage-droite { margin-left: 0; flex-direction: column; align-items: stretch; }
  .rc-sortie { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════
   19 · LA RELECTURE DES TRONÇONS
   ───────────────────────────────────────────────────────────────────────
   Deux constats, relevés à l'écran.

   La colonne de gauche montrait douze lignes rigoureusement identiques.
   Le repère de couleur censé les distinguer — `.rc-etat-dot`, avec ses
   variantes `.rc-etat-ok`, `.rc-etat-warn`, `.rc-etat-bad` — n'avait
   JAMAIS reçu la moindre déclaration CSS : ni taille, ni fond, ni forme.
   C'était un span vide. L'état revient donc ici, mais porté par le liseré
   gauche de la ligne : une couleur qui longe le texte se voit d'un coup
   d'œil, là où une pastille de six pixels se cherche.

   Le détail, lui, présentait dix commandes de même poids pour un tronçon
   que l'analyse avait déjà rédigé. Ce qui reste à faire — LIRE — n'avait
   aucune place particulière. Il l'a maintenant : le texte du rapport est
   le plus grand objet de l'écran, et un seul bouton en sort.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 19.1 · La colonne des tronçons ────────────────────────────────────*/
.rc-troncons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.rc-tr-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rc-tr-tete h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bep-teal-dark);
}
.rc-tr-tete-txt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rc-tr-compte {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
}

/* Une barre de deux pixels : elle dit l'avancement sans réclamer d'espace. */
.rc-tr-jauge {
  height: 3px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  overflow: hidden;
}
.rc-tr-jauge i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bep-teal), var(--bep-teal-bright, #1a9aa8));
  transition: width var(--t-base, .28s) var(--ease, ease);
}

.rc-troncons .rc-list-items { gap: 5px; }

.rc-tr {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px 8px 9px;
  border: 1px solid var(--c-hairline);
  border-left: 3px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast, .15s) var(--ease, ease),
              border-color var(--t-fast, .15s) var(--ease, ease);
}
.rc-tr:hover { background: var(--c-surface-2); }
.rc-tr.active {
  background: var(--c-primary-soft);
  border-color: rgba(18,112,125,.28);
}
.rc-tr.active .rc-tr-titre { color: var(--bep-teal-dark); }

/* L'état, en liseré. Seule couleur de la colonne : rien d'autre ne doit
   la concurrencer. */
.rc-tr-ok   { border-left-color: #17845a; }
.rc-tr-warn { border-left-color: #b7791f; }
.rc-tr-bad  { border-left-color: #c0392b; }
.rc-tr-crit { border-left-color: #7d1d17; }
.rc-tr-none { border-left-color: var(--c-border-strong); }

/* Ce qui réclame une main humaine se signale par le fond, pas par un
   symbole de plus. */
.rc-tr.alerte {
  background: #fff8ec;
  border-left-color: #b7791f;
}
.rc-tr.alerte:hover { background: #fdf2df; }

.rc-tr-num {
  justify-self: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
.rc-tr.relu .rc-tr-num { color: var(--c-success); }

.rc-tr-corps { min-width: 0; display: block; }
.rc-tr-ligne {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.rc-tr-badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c-primary-soft);
  color: var(--bep-teal-dark);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rc-tr-titre {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-1, #1f3339);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-tr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--c-text-faint);
}
/* Une seule séparation, discrète, entre les mentions. */
.rc-tr-meta > span + span::before {
  content: "·";
  margin-right: 7px;
  color: var(--c-border-strong);
}
.rc-tr-etat   { font-weight: 600; color: var(--c-text-muted); }
.rc-tr-alerte { font-weight: 700; color: #b7791f; }
.rc-tr-manque { color: #b7791f; }

.rc-tr-marque {
  justify-self: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-success);
}

.rc-tr-ajout {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: border-color var(--t-fast, .15s) var(--ease, ease), color var(--t-fast, .15s) var(--ease, ease);
}
.rc-tr-ajout:hover { border-color: var(--bep-teal); color: var(--bep-teal); }

/* ── 19.2 · Le chapeau du tronçon ──────────────────────────────────────
   Six champs de saisie ouvraient l'écran, pour des valeurs que l'analyse
   venait d'établir. Ils sont derrière un volet ; ce qui reste est une
   ligne de faits, qui se lit. */
.rc-tete-troncon {
  padding: 15px 17px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--c-hairline);
  background: linear-gradient(168deg, #f6fbfb, var(--c-surface) 62%);
  box-shadow: var(--shadow-card);
  margin-bottom: 10px;
}
.rc-tete-haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rc-tete-titres { min-width: 0; }
.rc-tete-titres h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bep-teal-dark);
}
.rc-tete-rang {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.rc-tete-faits {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--c-hairline);
  font-size: 12.5px;
  color: var(--c-text-2);
}

/* La pastille d'état — celle qui n'avait jamais existé. */
.rc-etat-pastille {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid;
}
.rc-etat-pastille.rc-etat-ok   { color: #0f6644; background: rgba(23,132,90,.09);  border-color: rgba(23,132,90,.26); }
.rc-etat-pastille.rc-etat-warn { color: #8c5c11; background: rgba(183,121,31,.10); border-color: rgba(183,121,31,.28); }
.rc-etat-pastille.rc-etat-bad  { color: #a02f23; background: rgba(192,57,43,.09);  border-color: rgba(192,57,43,.26); }
.rc-etat-pastille.rc-etat-crit { color: #fff;    background: #7d1d17;              border-color: #7d1d17; }
.rc-etat-pastille.rc-etat-none { color: var(--c-text-muted); background: var(--c-surface-2); border-color: var(--c-hairline); }

.rc-repli-identite { margin-top: 11px; }
.rc-repli-identite .rc-fields { padding: 12px 0 0; }
.rc-suppr { margin-top: 4px; justify-self: start; color: var(--c-danger); }
.rc-suppr:hover { border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.06); }

/* ── 19.3 · Les médias ─────────────────────────────────────────────────*/
.rc-medias .rc-card-head { flex-wrap: wrap; }
.rc-medias-compte {
  margin-right: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-faint);
}
.rc-medias .rc-vid { height: 118px; }
.rc-medias .rc-photo-img { height: 118px; }
.rc-medias .rc-vid-grid,
.rc-medias .rc-photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 9px;
}
.rc-photo-item { position: relative; }

/* Le bouton d'analyse ne revient qu'en cas de manque : il a donc droit à
   un encadré qui dit lequel. */
.rc-relance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 11px 14px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(183,121,31,.28);
  background: #fffaf0;
}
.rc-relance p { margin: 0; flex: 1 1 200px; font-size: 12px; color: #8c5c11; }

/* ── 19.4 · Le texte du rapport ────────────────────────────────────────
   C'est l'objet de l'étape : il occupe la place qui va avec. */
.rc-texte .rc-textarea-pro {
  min-height: 300px;
  font-size: 13px;
  line-height: 1.62;
  background: var(--c-surface);
}
.rc-redac {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}
/* `display: flex` bat la règle `[hidden] { display: none }` du navigateur :
   sans cette ligne, le bouton de rédaction reste affiché même quand il n'y
   a rien à rédiger. */
.rc-redac[hidden] { display: none; }

/* ── 19.5 · Le passage au suivant ──────────────────────────────────────*/
.rc-suite {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 13px 0 2px;
}
.rc-suite-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-success);
}

/* ── 19.6 · Le sélecteur : deux natures, deux affichages ───────────────*/
.rc-modal-types {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  padding-bottom: 1px;
}
.rc-modal-types-lab {
  margin-right: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
}
.rc-seg {
  padding: 0 12px;
  height: 34px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background var(--t-fast, .15s) var(--ease, ease), color var(--t-fast, .15s) var(--ease, ease);
}
.rc-seg:hover { background: var(--c-surface-2); }
.rc-seg.actif {
  background: var(--bep-teal);
  border-color: var(--bep-teal);
  color: #fff;
}

/* Une vignette de photo n'est pas une vignette de vidéo : on le dit, au
   lieu de laisser deviner à la forme du cadre. */
.rc-modal-name { display: flex; align-items: baseline; gap: 6px; }
.rc-modal-name > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-modal-type {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rc-modal-type.video { background: var(--c-primary-soft); color: var(--bep-teal-dark); }
.rc-modal-type.photo { background: rgba(217,173,92,.22); color: #8c5c11; }
.rc-modal-vid[src$=".jpeg"], .rc-modal-vid[src$=".jpg"], .rc-modal-vid[src$=".png"] { background: #eef3f5; }

.rc-modal-note {
  margin-right: auto;
  font-size: 11.5px;
  color: var(--c-text-faint);
}

@media (max-width: 900px) {
  .rc-modal-controls { grid-template-columns: 1fr; }
  .rc-modal-types { align-self: start; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════
   20 · LES REPÈRES DU PLAN
   ───────────────────────────────────────────────────────────────────────
   Un repère était une pastille numérotée, immobile, qu'on ne pouvait ni
   déplacer ni supprimer, et dont le seul lien avec son tronçon tenait dans
   l'attribut `title` — l'infobulle du navigateur, qui met une seconde à
   venir et disparaît au moindre mouvement.

   Trois choses ici : le repère se saisit (curseur, ombre, échelle), il
   porte le nom de son tronçon quand il est choisi, et une fiche s'ouvre
   sous lui. La légende sous le plan dit tout d'un coup, sans survol : qui
   est posé, et combien de tronçons ne le sont pas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 20.1 · Le repère se prend en main ─────────────────────────────────*/
.rc-pin {
  cursor: grab;
  /* Sans quoi, sur écran tactile, le glissement fait défiler la page au
     lieu de déplacer le repère. */
  touch-action: none;
  user-select: none;
}
.rc-pin.glisse {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.22);
  box-shadow: 0 8px 20px rgba(6,35,42,.5), 0 0 0 3px rgba(255,255,255,.75);
  z-index: 5;
  transition: none;
}
/* Survol depuis la légende : le repère se signale sans être sélectionné. */
.rc-pin.survol {
  transform: translate(-50%, -50%) scale(1.28);
  box-shadow: 0 6px 16px rgba(6,35,42,.46), 0 0 0 4px rgba(255,255,255,.8);
  z-index: 4;
}

/* L'étiquette du repère choisi : le nom du tronçon, en clair, sans survol
   et sans clic. C'est la réponse à « celui-là, c'est lequel ? ». */
.rc-pin-etiq {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  max-width: 148px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(6,35,42,.9);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(6,35,42,.3);
}

/* ── 20.2 · La fiche d'un repère ───────────────────────────────────────*/
.rc-fiche {
  position: absolute;
  z-index: 8;
  width: 274px;
  max-height: 260px;
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: 0 14px 34px -10px rgba(6,35,42,.4), 0 0 0 1px rgba(6,35,42,.05);
  cursor: default;
}
.rc-fiche-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 9px 13px;
  border-bottom: 1px solid var(--c-hairline);
  background: var(--c-surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.rc-fiche-tete strong {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.rc-fiche-fermer {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 17px;
  line-height: 1;
  color: var(--c-text-faint);
  cursor: pointer;
}
.rc-fiche-fermer:hover { color: var(--c-text-2); }

.rc-fiche-corps {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
}
.rc-fiche-nom {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bep-teal-dark);
}
.rc-fiche-nom > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-fiche-meta {
  margin: 0;
  font-size: 11.5px;
  color: var(--c-text-muted);
}
.rc-fiche-corps .rc-input { height: 32px; font-size: 12.5px; }

.rc-fiche-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 11px 13px;
  border-top: 1px solid var(--c-hairline);
}
.rc-fiche-pied .rc-btn { flex: 1 1 auto; }
.rc-fiche-note {
  flex: 1 1 100%;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--c-text-faint);
}
.rc-fiche-danger { color: var(--c-danger); }
.rc-fiche-danger:hover {
  border-color: rgba(192,57,43,.4);
  background: rgba(192,57,43,.06);
  color: var(--c-danger);
}

/* ── 20.3 · La légende ─────────────────────────────────────────────────
   Ce que l'infobulle disait un repère à la fois, et seulement au survol. */
.rc-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 7px;
  padding: 11px 16px 13px;
  border-top: 1px solid var(--c-hairline);
}
.rc-legende-lab {
  margin-right: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.rc-legende-jeton {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--c-hairline);
  background: var(--c-surface-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rc-legende-jeton:hover {
  border-color: var(--bep-teal);
  color: var(--bep-teal-dark);
  background: var(--c-primary-soft);
}
.rc-legende-jeton.actif {
  background: linear-gradient(145deg, var(--bep-brass-lit), var(--bep-brass));
  border-color: rgba(140,100,20,.34);
  color: var(--bep-teal-abyss);
}
.rc-legende-reste {
  margin-left: 4px;
  font-size: 11px;
  color: var(--c-text-faint);
}

/* ── 20.4 · Le chapeau de la carte du plan ─────────────────────────────
   « Remplacer l'image » mène désormais à la bibliothèque ; le fichier
   local reste offert, mais en lien, pas en bouton. */
.rc-carte-plan .rc-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   21 · L'OFFRE COMPLÉMENTAIRE
   ───────────────────────────────────────────────────────────────────────
   L'onglet s'ouvrait sur « Pilotage de l'offre » : quatre champs et cinq
   boutons pour nommer et versionner une offre qui n'existait pas encore.
   La seule chose à faire — dire ce qu'on veut ajouter au chantier —
   arrivait en troisième position, dans une carte grise de même poids que
   les autres.

   L'ossature vient de l'onglet Canalisation, classes `rc-` comprises : les
   deux écrans conduisent le même genre de travail et doivent se ressembler
   exactement. Ne sont définis ici que les objets propres à l'offre — la
   zone de demande, les deux groupes de lignes, et la preuve de recherche
   sous chaque prix estimé.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 21.1 · La demande ─────────────────────────────────────────────────
   C'est le seul champ de l'écran : il en a la taille. */
.offc-demande {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offc-demande-champ {
  min-height: 132px;
  font-size: 14px;
  line-height: 1.6;
}
.offc-exemples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 7px;
}
.offc-exemples-lab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-right: 2px;
}
.offc-exemple {
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed var(--c-border-strong);
  background: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--c-text-muted);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.offc-exemple:hover {
  border-style: solid;
  border-color: var(--bep-teal);
  color: var(--bep-teal-dark);
  background: var(--c-primary-soft);
}

/* La voie manuelle : elle existe encore, elle n'ouvre plus l'écran. */
.offc-repli-manuel .offc-picker-list { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.offc-repli-manuel .rc-input { margin-top: 10px; }
.offc-picker-meta { margin-top: 6px; font-size: 11.5px; color: var(--c-text-faint); }

/* ── 21.2 · Les deux groupes de lignes ─────────────────────────────────
   Un prix du marché et un prix inventé ne sont pas la même chose : ils ne
   sont plus mêlés dans un tableau unique, ils font deux blocs nommés. */
.offc-groupe { margin-top: 14px; }
.offc-groupe .rc-card-head { flex-wrap: wrap; }
.offc-groupe-somme {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.offc-groupe-estime {
  border-color: rgba(183,121,31,.32);
  background: linear-gradient(180deg, #fffaf0, var(--c-surface) 55%);
}
.offc-groupe-estime .rc-card-head h3 { color: #8c5c11; }

.offc-table-wrap {
  overflow-x: auto;
  padding: 0 4px 6px;
}
.offc-table { width: 100%; border-collapse: collapse; }
.offc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: top;
  font-size: 12.5px;
}
.offc-table tbody tr:last-child td { border-bottom: 0; }
.offc-table .soum-col-num { text-align: right; white-space: nowrap; }
.offc-table .soum-pos-cell {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
.offc-table .soum-desc-cell { min-width: 260px; }
.offc-table .offc-montant {
  font-weight: 700;
  color: var(--bep-teal-dark);
  font-variant-numeric: tabular-nums;
}

/* La désignation est un champ, toujours : la version d'avant la cachait
   derrière un aperçu qu'il fallait cliquer pour ouvrir. */
.offc-table .offc-desc-input {
  display: block;
  width: 100%;
  min-height: 46px;
  text-align: left;
  line-height: 1.4;
  font-size: 12.5px;
  border-color: transparent;
  background: transparent;
  resize: vertical;
}
.offc-table .offc-desc-input:hover { border-color: var(--c-border); background: var(--c-surface); }
.offc-table .offc-desc-input:focus {
  border-color: var(--bep-teal);
  background: var(--c-surface);
  outline: none;
}

/* Une quantité manquante ne compte pas dans le total : elle le montre. */
.offc-manque {
  border-color: rgba(183,121,31,.55) !important;
  background: #fffaf0 !important;
}

.offc-justif {
  margin-top: 2px;
  padding-left: 9px;
  border-left: 2px solid var(--c-border);
  font-size: 11px;
  line-height: 1.45;
  color: var(--c-text-muted);
}

/* ── 21.3 · La preuve, sous chaque prix estimé ─────────────────────────
   La question posée était : « est-ce qu'il cherche vraiment dans la
   soumission avant d'inventer ? ». La réponse est ici, ligne par ligne —
   les articles les plus proches trouvés dans la série de prix, ou la
   mention qu'il n'y en avait aucun. */
.offc-proches {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(183,121,31,.24);
  background: rgba(255,255,255,.7);
}
.offc-proches-lab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8c5c11;
  margin-bottom: 5px;
}
.offc-proches-vide {
  font-size: 11.5px;
  line-height: 1.45;
  color: #8c5c11;
}
.offc-proche {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--c-text-2);
}
.offc-proche + .offc-proche { border-top: 1px dotted var(--c-hairline); }
.offc-proche-txt { flex: 1 1 auto; min-width: 0; }
.offc-proche .rc-lien { flex: 0 0 auto; font-size: 11px; }

/* ── 21.4 · Le pied ────────────────────────────────────────────────────*/
.offc-repli-pied .rc-pied { margin-top: 10px; flex-wrap: wrap; }
.offc-repli-pied .rc-header-meta { padding-top: 10px; }

@media (max-width: 900px) {
  .offc-exemple { max-width: 100%; }
  .offc-table .soum-desc-cell { min-width: 180px; }
}

/* ── 21.5 · Les termes réellement cherchés ─────────────────────────────
   La question « est-ce qu'il a cherché avant d'inventer ? » se règle en
   montrant AVEC QUOI il a cherché. Ces mots sont la traduction de la
   demande dans le vocabulaire du bordereau ; sans eux, « route en enrobé »
   et « revêtement bitumineux AC 11 S » n'ont pas une lettre en commun. */
.offc-termes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--c-hairline);
}
.offc-termes-lab {
  margin-right: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.offc-terme {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--bep-teal-dark);
  font-size: 10.5px;
  font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════
   22 · LA FICHE DE RÉFÉRENCE
   ───────────────────────────────────────────────────────────────────────
   L'onglet s'ouvrait sur un bandeau de quatre boutons — dont un pour
   coller sa propre clé d'API — puis cinq cartes de même poids et
   dix-sept champs. Il se terminait sur un pavé orange en chasse fixe
   intitulé « données reprises dans le PDF », qui en montrait dix qui n'y
   étaient pas.

   L'ossature vient des onglets Canalisation et Offre complémentaire,
   classes `rc-` comprises : trois écrans qui conduisent le même genre de
   travail doivent se ressembler exactement. Ne sont définis ici que les
   objets propres à la fiche — l'état des trois sources, les prestations
   avec leur quantité citée, et les quatre emplacements de photo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 22.1 · Les trois sources ──────────────────────────────────────────
   Ce que l'écran sait déjà, dit avant qu'on clique. Une source absente
   se voit à sa pastille et porte le bouton qui mène là où la remplir. */
.fr-sources { padding-bottom: 4px; }
.fr-source {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px;
}
.fr-source + .fr-source { border-top: 1px solid var(--c-hairline); }
.fr-source-etat {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.fr-source-ok .fr-source-etat { background: var(--c-primary-soft); color: var(--bep-teal-dark); }
.fr-source-manque .fr-source-etat { background: #fdf1e3; color: #8c5c11; }
.fr-source-attente .fr-source-etat { background: var(--c-surface-2); color: var(--c-text-faint); }

.fr-source-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.fr-source-txt strong { font-size: 12.5px; color: var(--c-text); }
.fr-source-detail { font-size: 12px; line-height: 1.45; color: var(--c-text-2); }
.fr-source-note { font-size: 11px; line-height: 1.45; color: var(--c-text-faint); }
.fr-source-txt .rc-btn { margin-top: 5px; }

/* ── 22.2 · Les précisions ─────────────────────────────────────────────
   Le seul champ libre de l'étape, et il est facultatif : la soumission
   suffit à composer la fiche. Il en a donc la taille sans en avoir
   l'insistance. */
.fr-demande { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fr-demande-lab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.fr-demande-champ { min-height: 104px; font-size: 14px; line-height: 1.6; }

.fr-repli-manuel .fr-champ + .fr-champ { margin-top: 12px; }
.fr-champ { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.fr-champ-lab { font-size: 11.5px; font-weight: 600; color: var(--c-text-muted); }

/* ── 22.3 · Ce qui atteint le PDF, et ce qui ne l'atteint pas ──────────
   La distinction n'était nulle part : l'aperçu d'avant affichait les dix
   champs morts au milieu des sept vivants, sous un titre qui affirmait
   le contraire. */
.fr-tag {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fr-tag-pdf { background: var(--c-primary-soft); color: var(--bep-teal-dark); }

.fr-desc { min-height: 76px; font-size: 13px; line-height: 1.6; }

/* ── 22.4 · Les prestations ────────────────────────────────────────────
   Une ligne citée de la soumission et une ligne écrite à la main ne se
   valent pas sur un document commercial : elles ne se ressemblent donc
   pas. La quantité est montrée à côté du texte, pas dedans — c'est elle
   qu'on relit en premier. */
.fr-prest { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 4px; }
.fr-prest-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.fr-prest-item:hover { border-color: var(--c-border); background: var(--c-surface-2); }
.fr-prest-src { border-left: 2px solid var(--bep-teal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.fr-prest-champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px;
  line-height: 1.45;
  font-size: 12.5px;
  border-color: transparent;
  background: transparent;
  resize: vertical;
}
.fr-prest-champ:hover { border-color: var(--c-border); background: var(--c-surface); }
.fr-prest-champ:focus { border-color: var(--bep-teal); background: var(--c-surface); outline: none; }

.fr-prest-cote {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 7px;
}
.fr-prest-marque {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--bep-teal-dark);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.fr-prest-main { background: var(--c-surface-2); color: var(--c-text-faint); }
.fr-prest-add { align-self: flex-start; margin-top: 4px; }

/* Les nombres écrits en prose qu'on ne retrouve pas dans la soumission. */
.fr-douteux { margin: 8px 0 0; padding-left: 18px; }
.fr-douteux li { font-size: 12px; line-height: 1.6; color: var(--c-text-2); }
.fr-douteux-val {
  font-weight: 700;
  color: #8c5c11;
  font-variant-numeric: tabular-nums;
}

/* ── 22.5 · Les quatre photos ──────────────────────────────────────────
   La principale occupe la place qu'elle occupe sur le PDF : une bande
   large en tête, les trois autres en rang dessous. */
.fr-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 0 2px;
}
.fr-photo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fr-photo-grande { grid-column: 1 / -1; }
.fr-photo-lab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.fr-photo-cadre {
  position: relative;
  height: 108px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--c-border-strong);
  background: var(--c-surface-2);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--t-fast) var(--ease);
}
.fr-photo-grande .fr-photo-cadre { height: 196px; }
.fr-photo-cadre:hover { border-color: var(--bep-teal); }
.fr-photo-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fr-photo-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px;
  text-align: center;
  font-size: 11.5px;
  color: var(--c-text-faint);
}
.fr-photo-ico { font-size: 20px; line-height: 1; }

.fr-photo-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.fr-photo-cadre:hover .fr-photo-actions,
.fr-photo-cadre:focus-within .fr-photo-actions { opacity: 1; }
.fr-photo-act {
  padding: 3px 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(18, 24, 27, .78);
  color: #fff;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
.fr-photo-act:hover { background: rgba(18, 24, 27, .92); }
.fr-photo-act-suppr { padding: 3px 8px; background: rgba(160, 42, 34, .82); }
.fr-photo-act-suppr:hover { background: rgba(160, 42, 34, .95); }

/* ── 22.6 · Le pied ────────────────────────────────────────────────────*/
.fr-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 12px;
  margin-top: 4px;
}
.fr-pied { margin-top: 16px; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (max-width: 900px) {
  .fr-photos { grid-template-columns: repeat(2, 1fr); }
  .fr-prest-item { flex-wrap: wrap; }
  .fr-prest-cote { padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   23 · LA DEMANDE DE PRIX
   ───────────────────────────────────────────────────────────────────────
   Quatrième écran bâti sur l'ossature `rc-` — après Canalisation, Offre
   complémentaire et Référence. Ne sont définis ici que les objets qui
   n'existent nulle part ailleurs : le tableau de bord de ce qui est
   branché, la liste des fournisseurs avec leur distance, et surtout la
   citation sous chaque prix relevé.

   Cette citation n'est pas un ornement. Un prix affiché sans la phrase du
   fournisseur d'où il sort est une affirmation ; avec elle, c'est une
   lecture qu'on peut contredire. Elle a donc sa place, sa bordure et sa
   couleur, et la ligne dont la phrase n'a pas pu être recoupée ne
   ressemble pas à celle dont elle l'a été.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 23.1 · Ce qui est branché ─────────────────────────────────────────*/
.dp-etat-corps { display: flex; flex-direction: column; }
.dp-etat-ligne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px;
}
.dp-etat-ligne + .dp-etat-ligne { border-top: 1px solid var(--c-hairline); }
.dp-etat-pastille {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.dp-etat-ok .dp-etat-pastille { background: var(--c-primary-soft); color: var(--bep-teal-dark); }
.dp-etat-non .dp-etat-pastille { background: #fdf1e3; color: #8c5c11; }
.dp-etat-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-etat-txt strong { font-size: 12.5px; color: var(--c-text); }
.dp-etat-detail { font-size: 12px; line-height: 1.45; color: var(--c-text-2); }
.dp-etat-note { font-size: 11px; line-height: 1.45; color: var(--c-text-faint); }

/* ── 23.2 · Le besoin ──────────────────────────────────────────────────*/
.dp-besoin { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.dp-besoin-champ { min-height: 128px; font-size: 14px; line-height: 1.6; }

.dp-repli-soum .offc-picker-list { max-height: 320px; overflow-y: auto; margin-top: 8px; }
.dp-poste {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dp-poste:hover { background: var(--c-surface-2); }
.dp-poste input { margin-top: 3px; flex: 0 0 auto; }
.dp-poste-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-poste-desc { font-size: 12.5px; line-height: 1.4; color: var(--c-text-2); }
.dp-poste-qte { font-size: 11px; color: var(--c-text-faint); font-variant-numeric: tabular-nums; }

/* ── 23.3 · Les articles ───────────────────────────────────────────────*/
.dp-articles { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 4px; }
.dp-article {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.dp-article:hover { border-color: var(--c-border); background: var(--c-surface-2); }
.dp-article-des { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.dp-article-qte { flex: 0 0 92px; text-align: right; font-variant-numeric: tabular-nums; }
.dp-article-unite { flex: 0 0 78px; }
.dp-article-src {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-faint);
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
.dp-article-src-soum { background: var(--c-primary-soft); color: var(--bep-teal-dark); }

.dp-connu {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: -2px 0 6px 9px;
  padding-left: 9px;
  border-left: 2px solid var(--c-border);
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-muted);
}
.dp-connu-lab {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bep-teal-dark);
  white-space: nowrap;
}

.dp-corps { min-height: 132px; font-size: 13px; line-height: 1.6; }

/* ── 23.4 · Les fournisseurs ───────────────────────────────────────────*/
.dp-rayon { margin-left: auto; flex: 0 0 auto; width: auto; font-size: 11.5px; padding: 4px 8px; }
.dp-fournisseurs {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 360px; overflow-y: auto;
  padding: 2px 0;
}
.dp-four {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dp-four:hover { background: var(--c-surface-2); }
.dp-four input { flex: 0 0 auto; }
.dp-four-muet { opacity: .55; cursor: default; }
.dp-four-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.dp-four-nom { font-size: 12.5px; font-weight: 600; color: var(--c-text); }
.dp-four-sub {
  font-size: 11px; color: var(--c-text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-four-km {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.dp-four-barre { display: flex; gap: 7px; margin-top: 8px; }

/* ── 23.5 · Les réponses ───────────────────────────────────────────────*/
.dp-statut {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--c-surface-2); color: var(--c-text-faint);
}
.dp-statut-envoye { background: var(--c-primary-soft); color: var(--bep-teal-dark); }
.dp-statut-repondu { background: rgba(31,122,64,.14); color: #1a6b38; }
.dp-statut-repondu_sans_prix { background: #fdf1e3; color: #8c5c11; }
.dp-statut-echec { background: rgba(160,42,34,.14); color: #a02a22; }

.dp-resume {
  margin: 6px 0 2px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-text-2);
}

.dp-lignes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dp-lignes-tete { display: flex; align-items: center; gap: 9px; }
.dp-lignes-tete strong { font-size: 12px; color: var(--c-text); }

.dp-ligne {
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.dp-ligne-ok { border-left: 3px solid var(--bep-teal); }
.dp-ligne-doute {
  border-left: 3px solid rgba(183,121,31,.75);
  background: linear-gradient(180deg, #fffaf0, var(--c-surface) 60%);
}
.dp-ligne-haut { display: flex; align-items: center; gap: 7px; }
.dp-ligne-art { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.dp-ligne-pu { flex: 0 0 104px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dp-ligne-unite { flex: 0 0 90px; }
.dp-ligne-cond {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* La preuve : la phrase du fournisseur, telle quelle. */
.dp-extrait {
  margin: 7px 0 0;
  padding: 7px 11px;
  border-left: 2px solid var(--c-border-strong);
  background: rgba(255,255,255,.6);
  font-size: 11.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--c-text-2);
}
.dp-ligne-motif {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 600;
  color: #8c5c11;
}

.dp-conf {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
}
.dp-conf-ok { background: var(--c-primary-soft); color: var(--bep-teal-dark); cursor: help; }
.dp-conf-doute { background: #fdf1e3; color: #8c5c11; cursor: help; }
.dp-conf-main { background: var(--c-surface-2); color: var(--c-text-faint); cursor: help; }

/* ── 23.6 · La mémoire des prix ────────────────────────────────────────*/
.dp-table-wrap { overflow-x: auto; margin-top: 8px; }
.dp-table { width: 100%; border-collapse: collapse; }
.dp-table td {
  padding: 6px 9px;
  border-bottom: 1px solid var(--c-hairline);
  font-size: 12px;
  vertical-align: top;
}
.dp-table tr:last-child td { border-bottom: 0; }
.dp-td-art { min-width: 180px; color: var(--c-text-2); }
.dp-td-four { white-space: nowrap; color: var(--c-text-muted); }
.dp-td-pu {
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  color: var(--bep-teal-dark);
  font-variant-numeric: tabular-nums;
}
.dp-td-date { white-space: nowrap; color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.dp-td-conf { white-space: nowrap; text-align: right; }

.dp-envoi .rc-btn-large { margin-top: 10px; }

@media (max-width: 900px) {
  .dp-article { flex-wrap: wrap; }
  .dp-article-des { flex: 1 1 100%; }
  .dp-ligne-haut { flex-wrap: wrap; }
  .dp-ligne-art { flex: 1 1 100%; }
  .dp-td-art { min-width: 140px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   24 · LA MESSAGERIE CONNECTÉE
   ───────────────────────────────────────────────────────────────────────
   Deux boutons dans la fiche de profil, et l'état de la boîte reliée.

   Les marques Google et Microsoft sont dessinées en SVG dans profil.js et
   gardent leurs couleurs officielles : un bouton de connexion à un compte
   tiers doit être reconnaissable au premier coup d'œil, sans quoi on
   hésite avant de confier l'accès à sa boîte aux lettres. Le reste du
   bouton — fond, bordure, typographie — suit la maison.
   ═══════════════════════════════════════════════════════════════════════ */

.pf-msg { display: flex; flex-direction: column; gap: 10px; }

.pf-msg-attente {
  margin: 0;
  font-size: 12px;
  color: var(--c-text-faint, #8ba3ad);
}

.pf-msg-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pf-msg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.pf-msg-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .3);
}
.pf-msg-btn:active:not(:disabled) { transform: translateY(1px); }
.pf-msg-btn:disabled { opacity: .42; cursor: not-allowed; }

/* La marque garde sa pastille claire : les quatre couleurs de Google et
   les quatre carrés de Microsoft sont illisibles sur un fond sombre. */
.pf-msg-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: #fff;
  flex: 0 0 auto;
}
.pf-msg-ico svg { display: block; }

.pf-msg-attend { position: relative; }
.pf-msg-attend::after {
  content: '…';
  margin-left: 4px;
  opacity: .7;
}

/* ── La boîte reliée ───────────────────────────────────────────────────*/
.pf-msg-liee {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(94, 201, 138, .3);
  background: rgba(94, 201, 138, .09);
}
.pf-msg-liee-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.pf-msg-liee-txt strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-msg-liee-txt span {
  font-size: 11.5px;
  opacity: .72;
}

.pf-msg-delier {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.pf-msg-delier:hover { background: rgba(224, 92, 78, .16); border-color: rgba(224, 92, 78, .5); }
.pf-msg-delier:disabled { opacity: .5; cursor: not-allowed; }

/* ── Les mentions ──────────────────────────────────────────────────────*/
.pf-msg-etat {
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.55;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.pf-msg-etat.pf-msg-non {
  background: rgba(224, 163, 60, .12);
  border-color: rgba(224, 163, 60, .32);
}
.pf-msg-etat.pf-msg-ok {
  background: rgba(94, 201, 138, .12);
  border-color: rgba(94, 201, 138, .32);
}

.pf-msg-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  opacity: .62;
}

/* Le relevé des réponses, dans l'onglet Demande de prix. */
.dp-relever { margin-bottom: 6px; }


/* ═══════════════════════════════════════════════════════════════════════
   25 · LE RELAIS ET L'ÉQUIPE
   ───────────────────────────────────────────────────────────────────────
   Un dossier appartient à quelqu'un, et il se passe de main en main. Deux
   familles ici : ce qui se voit dans le rail et l'étape (rl-, m-voile,
   m-step-lecture), et les deux écrans à part — la passation et l'équipe.

   La couleur porte le sens et rien d'autre : vert quand le dossier est à
   vous, ambre quand on vous attend, gris quand vous ne faites que lire.
   Quatorze étapes se ressemblent toutes ; c'est précisément ce qui fait
   perdre du temps, et un point de couleur y répond mieux qu'un libellé.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La pastille de l'en-tête ─────────────────────────────────────────── */
.rl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rl-badge:hover { border-color: var(--c-primary); color: var(--c-primary); }
.rl-badge-vide { opacity: .7; }
.rl-badge-n {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--c-border);
  color: var(--c-text-2);
  font-size: 11px;
  text-align: center;
}
/* Un compte qu'on n'a pas encore ouvert se signale ; une fois lu, il
   redevient une simple information. */
.rl-badge-n.rl-neuf {
  background: var(--c-accent);
  color: #fff;
  animation: rl-pulse 2.4s ease-in-out 3;
}
@keyframes rl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 154, 26, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(224, 154, 26, 0); }
}
@media (prefers-reduced-motion: reduce) { .rl-badge-n.rl-neuf { animation: none; } }

/* ── Le bandeau, en tête de chaque étape ──────────────────────────────── */
.rl-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--c-border);
  border-left-width: 3px;
  background: var(--c-surface);
}
.rl-bandeau-txt { display: flex; flex-direction: column; gap: 3px; min-width: 240px; flex: 1 1 340px; }
.rl-bandeau-txt strong { font-size: 13.5px; font-weight: 650; color: var(--c-text); }
.rl-bandeau-txt span   { font-size: 12px; line-height: 1.5; color: var(--c-text-muted); }

.rl-moi    { border-left-color: var(--c-success); background: rgba(23, 132, 90, .05); }
.rl-attendu{ border-left-color: var(--c-accent);  background: rgba(224, 154, 26, .07); }
.rl-autre  { border-left-color: var(--c-text-faint); background: var(--c-surface-2); }
.rl-libre  { border-left-color: var(--c-primary); background: var(--c-primary-soft); }
.rl-clos   { border-left-color: var(--c-primary-2); background: var(--c-surface-2); }
.rl-absent { border-left-color: var(--c-warning); background: rgba(183, 121, 31, .08); }
.rl-neutre { border-left-color: var(--c-border-strong); }

.rl-actions { display: flex; flex-wrap: wrap; gap: 7px; }

.rl-btn {
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rl-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.rl-btn:disabled { opacity: .5; cursor: not-allowed; }
.rl-btn-fort {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.rl-btn-fort:hover:not(:disabled) { background: var(--c-primary-2); border-color: var(--c-primary-2); color: #fff; }
.rl-btn-discret { border-color: transparent; background: none; color: var(--c-text-muted); }
.rl-btn-discret:hover { background: var(--c-surface-2); }

/* ── Le voile : l'étape se lit, ne se remplit pas ─────────────────────────
   Le blocage est posé sur le CONTENEUR et non champ par champ. La fiche de
   référence, la demande de prix et le rapport caméra se redessinent
   eux-mêmes : un attribut `disabled` posé à la construction aurait disparu
   au premier redessin, une classe sur le parent tient.

   Trois exceptions, et elles comptent : les boutons du relais — qui vivent
   DANS le corps de l'étape et doivent rester cliquables, sans quoi on ne
   pourrait plus demander la main —, ceux qu'un module marque
   `data-lecture-ok` parce qu'ils ne font que montrer, et le texte, qui
   reste sélectionnable : lire un PHSE et en recopier une ligne est un
   usage légitime d'un dossier qui n'est pas le sien. */
.m-lecture-seule input:not([type="button"]):not([type="submit"]),
.m-lecture-seule select,
.m-lecture-seule textarea,
.m-lecture-seule button:not(.rl-btn):not([data-lecture-ok]) {
  pointer-events: none;
}
.m-lecture-seule input:not([type="button"]):not([type="submit"]),
.m-lecture-seule select,
.m-lecture-seule textarea {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border-style: dashed;
}
.m-lecture-seule button:not(.rl-btn):not([data-lecture-ok]) { opacity: .45; }

.m-voile-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius, 10px);
  border: 1px dashed var(--c-border-strong);
  background: var(--c-surface-2);
}
.m-voile-note strong { font-size: 12px; font-weight: 650; color: var(--c-text-2); }
.m-voile-note span   { font-size: 12px; color: var(--c-text-muted); }

/* ── Le rail ──────────────────────────────────────────────────────────── */
.m-step-lecture .m-step-label { color: var(--c-text-muted); }
.m-step-lecture .m-step-bubble { opacity: .55; }
.m-step-lecture:not(.active) { opacity: .78; }

/* Ce qu'on attend de vous sur ce dossier. Un point, pas un libellé : le
   rail est étroit et l'on doit pouvoir le lire d'un coup d'œil. */
.m-step-attendue { position: relative; }
.m-step-attendue::after {
  content: '';
  position: absolute;
  top: 12px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-bg);
}

/* ── Les fenêtres du relais ───────────────────────────────────────────── */
.rl-fond {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(6, 35, 42, .58);
  backdrop-filter: blur(3px);
}
.rl-fenetre {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(6, 35, 42, .28));
  overflow: hidden;
}
.rl-fenetre.rl-large { max-width: 760px; }

.rl-fenetre-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--c-hairline);
  background: var(--c-surface);
}
.rl-fenetre-tete h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--c-text); }
.rl-fermer {
  border: none; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--c-text-faint); padding: 4px 6px;
}
.rl-fermer:hover { color: var(--c-danger); }

.rl-fenetre-corps { padding: 18px; overflow-y: auto; }

.rl-bloc { margin-bottom: 18px; }
.rl-bloc h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.rl-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rl-role {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.rl-role-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.rl-destinataires { display: flex; flex-direction: column; gap: 5px; }
.rl-dest {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "r n" "r s";
  align-items: center;
  gap: 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
}
.rl-dest input { grid-area: r; }
.rl-dest-nom  { grid-area: n; font-size: 13px; font-weight: 600; color: var(--c-text); }
.rl-dest-sub  { grid-area: s; font-size: 11.5px; color: var(--c-text-muted); }
.rl-dest-on   { border-color: var(--c-primary); background: var(--c-primary-soft); }

.rl-copie, .rl-etape {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 2px; font-size: 12.5px; color: var(--c-text-2); cursor: pointer;
}
.rl-etapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.rl-mot {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font: inherit; font-size: 12.5px; color: var(--c-text);
  resize: vertical;
}

.rl-envoi {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.55;
}
.rl-envoi-ok  { background: rgba(23, 132, 90, .09); border: 1px solid rgba(23, 132, 90, .25); color: var(--c-text-2); }
.rl-envoi-non { background: rgba(183, 121, 31, .1); border: 1px solid rgba(183, 121, 31, .3); color: var(--c-text-2); }

.rl-pied { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.rl-rien, .rl-chargement { margin: 0; font-size: 12px; color: var(--c-text-faint); }
.rl-avert { margin: 6px 0; font-size: 12px; color: var(--c-warning); }
.rl-vide  { padding: 18px; text-align: center; color: var(--c-text-muted); font-size: 12.5px; }
.rl-vide strong { display: block; margin-bottom: 5px; color: var(--c-text); font-size: 13.5px; }

/* ── « Ce qui m'attend » ──────────────────────────────────────────────── */
.rl-moi-ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--c-hairline);
}
.rl-moi-ligne strong { font-size: 14px; color: var(--c-text); }
.rl-moi-sub { font-size: 11.5px; color: var(--c-text-muted); }
.rl-pastille-role {
  padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; color: #fff;
}

.rl-colonne { margin-bottom: 22px; }
.rl-colonne h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--c-text-faint);
}
.rl-compte {
  min-width: 18px; padding: 1px 6px; border-radius: 9px;
  background: var(--c-surface-3); color: var(--c-text-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0; text-align: center;
}
.rl-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 9px; }

.rl-carte {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.rl-carte-recu { border-left: 3px solid var(--c-accent); }
.rl-carte-envoye { border-left: 3px solid var(--c-text-faint); }
.rl-carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.rl-carte-num { font-size: 12px; font-weight: 700; color: var(--c-primary); }
.rl-carte-titre { font-size: 13px; font-weight: 600; color: var(--c-text); }
.rl-carte-sub, .rl-carte-etapes { font-size: 11.5px; color: var(--c-text-muted); }
.rl-carte-mot { font-size: 11.5px; font-style: italic; color: var(--c-text-2); }
.rl-carte-alerte {
  font-size: 11.5px; font-weight: 600; color: var(--c-warning);
}
.rl-carte-actions { display: flex; gap: 6px; margin-top: 4px; }

/* ── Le fil du dossier ────────────────────────────────────────────────── */
.rl-fil { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--c-border); }
.rl-fil-item { position: relative; padding: 0 0 16px 12px; }
.rl-fil-item::before {
  content: '';
  position: absolute; left: -23px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-border-strong); box-shadow: 0 0 0 3px var(--c-bg);
}
.rl-fil-refuse::before { background: var(--c-danger); }
.rl-fil-en_attente::before { background: var(--c-accent); }
.rl-fil-rendu::before  { background: var(--c-success); }
.rl-fil-quand { font-size: 11px; color: var(--c-text-faint); }
.rl-fil-qui   { font-size: 13px; font-weight: 600; color: var(--c-text); }
.rl-fil-det   { font-size: 11.5px; color: var(--c-text-muted); line-height: 1.55; }

/* ═══ L'ÉQUIPE ═══════════════════════════════════════════════════════════ */
.eq-fond {
  position: fixed; inset: 0; z-index: 960;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  background: rgba(6, 35, 42, .6);
  backdrop-filter: blur(3px);
}
.eq-carte {
  width: 100%; max-width: 900px; max-height: calc(100vh - 52px);
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(6, 35, 42, .28));
  overflow: hidden;
}
.eq-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-hairline);
  background: var(--c-surface);
}
.eq-tete h2 { margin: 0 0 2px; font-size: 16px; font-weight: 650; color: var(--c-text); }
.eq-tete p  { margin: 0; font-size: 12px; color: var(--c-text-muted); }
.eq-fermer {
  border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--c-text-faint); padding: 3px 6px;
}
.eq-fermer:hover { color: var(--c-danger); }
.eq-corps { padding: 18px 20px 24px; overflow-y: auto; }

.eq-avert {
  margin-bottom: 16px; padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid rgba(183, 121, 31, .35);
  background: rgba(183, 121, 31, .09);
}
.eq-avert strong { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--c-text); }
.eq-avert p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--c-text-2); }

.eq-identite { margin-bottom: 18px; }

/* Le refus, écrit et qui reste. Un message de deux secondes au bas de
   l'écran pour une barre restée en haut n'informe personne : il s'est
   affiché trois fois sans être lu une seule. */
.eq-refus {
  margin: 7px 0 0;
  padding: 9px 13px;
  border-radius: 8px;
  border: 1px solid rgba(192, 57, 43, .35);
  background: rgba(192, 57, 43, .09);
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-danger);
}

.eq-mdp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: 12px; color: var(--c-text-2);
}
.eq-mdp-ok { border-color: rgba(23, 132, 90, .35); background: rgba(23, 132, 90, .07); }

.eq-resume { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.eq-resume-item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-surface);
}
.eq-resume-item strong { font-size: 16px; font-weight: 700; color: var(--c-primary); }
.eq-resume-item span   { font-size: 11.5px; color: var(--c-text-muted); }
.eq-resume-zero strong { color: var(--c-text-faint); }
.eq-resume-zero        { border-style: dashed; }

.eq-manque {
  margin: 0 0 16px; font-size: 12px; line-height: 1.55; color: var(--c-warning);
}

.eq-liste { display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; }
.eq-ligne {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 9px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.eq-inactif { opacity: .55; }
.eq-autre   { background: var(--c-surface-2); border-style: dashed; }
.eq-qui { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eq-qui strong { font-size: 13px; font-weight: 600; color: var(--c-text);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-mail { font-size: 11px; color: var(--c-text-muted);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-role-fixe { font-size: 12px; color: var(--c-text-muted); }
.eq-hors { grid-column: 3 / -1; font-size: 11.5px; color: var(--c-text-faint); font-style: italic; }
.eq-actif-lbl { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--c-text-muted); }
.eq-ligne-actions { display: flex; gap: 6px; }

.eq-champ {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font: inherit; font-size: 12.5px; color: var(--c-text);
  min-width: 0;
}
.eq-champ:focus { outline: none; border-color: var(--c-primary); }
.eq-champ:disabled { background: var(--c-surface-3); color: var(--c-text-faint); }

.eq-btn {
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-2);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.eq-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.eq-btn:disabled { opacity: .5; cursor: not-allowed; }
.eq-btn-fort { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.eq-btn-fort:hover:not(:disabled) { background: var(--c-primary-2); border-color: var(--c-primary-2); color: #fff; }
.eq-btn-discret { border-color: transparent; background: none; color: var(--c-text-muted); }
.eq-btn-discret:hover { background: var(--c-surface-2); }

.eq-creer {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 2px 10px rgba(18, 112, 125, .08);
}
.eq-creer h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 650; color: var(--c-text); }
.eq-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.eq-grille + .eq-grille { margin-top: 10px; }
.eq-grille-mdp { grid-template-columns: minmax(240px, 340px); }
.eq-creer-pied { display: flex; justify-content: flex-end; margin-top: 4px; }
.eq-note { margin: 11px 0 13px; font-size: 11.5px; line-height: 1.55; color: var(--c-text-muted); }
.eq-note-avert { color: var(--c-warning); font-weight: 600; }
.eq-erreur { margin: 0; font-size: 12.5px; color: var(--c-danger); }
.eq-chargement { margin: 0; font-size: 12px; color: var(--c-text-faint); }
.eq-rien { margin: 0 0 16px; font-size: 12px; color: var(--c-text-faint); }

/* Une étiquette au-dessus de chaque champ. Le formulaire n'était fait que
   de placeholders : ils disparaissent dès qu'on saisit, et l'on ne sait
   plus, une fois rempli, ce qu'on est en train de relire. */
.eq-libelle { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eq-libelle > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c-text-faint);
}
.eq-mdp-tirage { display: flex; gap: 6px; }
.eq-mdp-tirage .eq-champ {
  flex: 1 1 auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

/* La barre d'identité qui se réclame. Un message au bas de l'écran pour
   une barre restée en haut est un message qu'on ne lit pas : elle remonte
   d'elle-même et se signale trois fois. */
.eq-mdp-reclame {
  border-color: var(--c-accent) !important;
  background: rgba(224, 154, 26, .12) !important;
  animation: eq-reclame .5s ease-in-out 3;
}
@keyframes eq-reclame {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 154, 26, .5); }
  50%      { box-shadow: 0 0 0 4px rgba(224, 154, 26, 0); }
}
@media (prefers-reduced-motion: reduce) { .eq-mdp-reclame { animation: none; } }

.eq-barre-ajout { display: flex; margin: 4px 0 18px; }

.eq-section {
  display: flex; align-items: center; gap: 9px;
  margin: 22px 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--c-text-faint);
}
.eq-compte {
  min-width: 18px; padding: 1px 6px; border-radius: 9px;
  background: var(--c-surface-3); color: var(--c-text-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0; text-align: center;
}

/* Ce qu'il faut transmettre. Un mot de passe provisoire qui s'efface dans
   un message fugace est un mot de passe perdu — la base n'en garde qu'une
   empreinte, et il faut tout recommencer. Il reste donc jusqu'à ce qu'on
   le referme soi-même. */
.eq-transmission {
  margin-bottom: 18px; padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(23, 132, 90, .4);
  background: rgba(23, 132, 90, .07);
}
.eq-transmission > strong { display: block; margin-bottom: 10px; font-size: 13px; color: var(--c-text); }
.eq-transmission p { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--c-text-2); }
.eq-transmission-champs { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
.eq-transmission-champs > div { display: flex; flex-direction: column; gap: 2px; }
.eq-transmission-champs dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c-text-faint);
}
.eq-transmission-champs dd { margin: 0; font-size: 13px; color: var(--c-text); }
.eq-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.eq-fort { font-weight: 700; font-size: 14.5px !important; letter-spacing: .04em; user-select: all; }
.eq-transmission-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Le tiroir d'une ligne : mot de passe et adresse. Deux gestes rares, qui
   allongeraient chaque ligne pour rien s'ils restaient à découvert. */
.eq-tiroir {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 9px; padding-top: 11px;
  border-top: 1px dashed var(--c-border);
}
.eq-tiroir-ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.eq-tiroir-ligne .eq-champ { flex: 1 1 200px; }

.eq-pied-note {
  margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--c-hairline);
  font-size: 11px; line-height: 1.6; color: var(--c-text-faint);
}

@media (max-width: 780px) {
  .eq-ligne { grid-template-columns: 1fr; }
  .rl-cartes { grid-template-columns: 1fr; }
  .eq-grille-mdp { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   26 · ATTRIBUER UN CHANTIER
   Le tableau de bord, côté responsable de secteur : la cellule
   « Technicien » cesse d'être un mot pour devenir un geste. La fenêtre,
   elle, emprunte tout au relais (.rl-fond, .rl-fenetre, .rl-dest…) —
   c'est le même acte, vu d'un autre écran, et il n'y a aucune raison
   qu'il n'en ait pas l'air.
═══════════════════════════════════════════════════════════════════════ */

/* ── La cellule ────────────────────────────────────────────────────────*/
/* Le nom garde toute la largeur de la colonne : la mention « main : … »
   passe DESSOUS. Sur la même ligne, elle rognait « JOBIN Marin » en
   « JOBIN … » — le tableau existe pour lire ces noms. */
.db-tech-btn,
.db-tech-fixe {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px;
  max-width: 100%;
}
.db-tech-main { flex: 1 0 100%; margin-top: 1px; }
.db-tech-fixe { color: var(--c-text-2); }

.db-tech-btn {
  font: inherit; color: var(--c-text-2);
  padding: 3px 7px; margin: -3px -7px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.db-tech-btn:hover,
.db-tech-btn:focus-visible {
  background: var(--c-surface); border-color: var(--c-border);
  color: var(--c-text); outline: none;
}
.db-tech-btn:focus-visible { box-shadow: var(--ring); }

.db-tech-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-tech-vide { color: var(--c-text-faint); font-style: italic; }
.db-tech-btn .db-tech-vide { color: var(--c-primary); font-style: normal; font-weight: 600; }

/* Où est le stylo, dit seulement quand ce n'est pas là où on le croit. */
.db-tech-main {
  font-size: 10.5px; color: var(--c-text-faint);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Le crayon ne se montre qu'au survol de la ligne : quatorze crayons
   alignés feraient un formulaire là où il n'y a qu'un tableau. */
.db-tech-crayon {
  width: 11px; height: 11px; flex: none;
  opacity: 0; transform: translateY(1px);
  transition: opacity var(--t-fast) var(--ease);
}
.db-table tbody tr:hover .db-tech-crayon,
.db-tech-btn:focus-visible .db-tech-crayon { opacity: .55; }

/* ── La fenêtre ────────────────────────────────────────────────────────*/
.db-att-quoi {
  margin: 0 0 4px; font-weight: 600; font-size: 13px; color: var(--c-text);
}
.db-att-bloc { margin-top: 16px; }
.db-att-bloc h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-muted);
}
.db-att-liste { display: flex; flex-direction: column; gap: 4px; max-height: 264px; overflow-y: auto; }

.db-att-coupure {
  margin: 9px 0 3px; padding-top: 8px;
  border-top: 1px dashed var(--c-border);
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text-faint);
}
.db-att-actuel {
  margin-left: auto; flex: none;
  padding: 1px 7px; border-radius: 20px;
  background: var(--c-primary-soft); color: var(--c-primary);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}

.db-att-main {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface-2); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--c-text);
}
.db-att-main input { flex: none; }

.db-att-note {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--c-text-2);
}
.db-att-note-attention {
  padding: 9px 11px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-warning); background: var(--c-surface-2);
}

/* Un refus reste à l'écran. Une passation ratée annoncée par un message
   de deux secondes en bas de la page, c'est une passation qu'on croit
   faite. */
.db-att-refus {
  margin: 14px 0 0; padding: 9px 11px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-danger);
  background: var(--c-surface-2);
  font-size: 12px; line-height: 1.55; color: var(--c-danger);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════
   27 · LA LECTURE D'UNE SOUMISSION
   Un tableau de chiffres a toujours l'air d'un tableau de chiffres. Cette
   carte dit d'où ils viennent, ce qui a été vérifié, ce qui a été supposé
   et ce qui n'a pas pu être lu.
═══════════════════════════════════════════════════════════════════════ */

.soum-rapport { margin-bottom: 14px; }
.soum-rap-corps { padding: 14px 16px 15px; }

.soum-rap-tete {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid var(--c-hairline);
}
.soum-rap-total {
  font-family: var(--font-display, var(--font));
  font-size: 21px; font-weight: 700; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.soum-rap-chiffres { font-size: 12px; color: var(--c-text-muted); }

.soum-rap-liste { display: flex; flex-direction: column; gap: 6px; }

.soum-av {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--c-text-2);
}
.soum-av-marque {
  flex: none; width: 14px; text-align: center;
  font-weight: 700; line-height: 1.55;
}

.soum-av-bon .soum-av-marque       { color: var(--c-success); }
.soum-av-info .soum-av-marque      { color: var(--c-text-faint); }
.soum-av-attention .soum-av-marque { color: var(--c-warning); }

/* Un avertissement grave ne se range pas sur la même ligne que les
   autres : il porte un fond, parce qu'il demande une décision avant
   qu'on se serve de ces chiffres. */
.soum-av-grave {
  padding: 8px 11px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-danger);
  background: var(--c-surface-2);
  color: var(--c-danger); font-weight: 600;
}
.soum-av-grave .soum-av-marque { color: var(--c-danger); }

/* ── Une position en réserve ────────────────────────────────────────────
   Elle reste dans le tableau — c'est une information du fournisseur — mais
   elle ne doit jamais se lire comme un poste ordinaire, puisqu'elle
   n'entre pas dans le total. */
.db-table .soum-row-reserve td,
.soum-row-reserve td {
  color: var(--c-text-muted);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px,
    rgba(0, 0, 0, .022) 7px, rgba(0, 0, 0, .022) 14px);
}
.soum-row-reserve .soum-total-cell::after {
  content: "réserve";
  display: inline-block; margin-left: 7px;
  padding: 1px 6px; border-radius: 20px;
  background: var(--c-surface-3); color: var(--c-text-faint);
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════════════
   28 · D'OÙ VIENT UNE LIGNE D'OFFRE
   Une ligne d'offre complémentaire n'est pas un texte libre : c'est un
   article du marché, avec un numéro et un prix contractuels. Comme la
   désignation est modifiable, une ligne réécrite ne disait plus de quel
   article elle venait. Ces règles rétablissent le lien — visible d'un
   coup d'œil, et consultable en entier d'un clic.
═══════════════════════════════════════════════════════════════════════ */

/* ── La pastille, dans la colonne du numéro ──────────────────────────── */
.offc-table .offc-art-cell { padding-top: 10px; }

.offc-art-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 4px 8px 5px;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--bep-teal);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.offc-art-chip:hover  { background: var(--c-primary-soft); border-color: var(--bep-teal); }
.offc-art-chip:focus-visible { outline: 2px solid var(--bep-teal-bright); outline-offset: 1px; }

.offc-art-lab {
  font-size: 8.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-text-faint);
  line-height: 1;
}
.offc-art-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700; color: var(--bep-teal-dark);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* Une ligne créée hors du marché ne se signale pas du même vert que
   celles qui en viennent : c'est la seule distinction qui compte ici. */
.offc-art-chip-hors {
  border-left-color: var(--c-warning);
  background: #fffaf0;
}
.offc-art-chip-hors:hover { background: #fff3dc; border-color: rgba(183,121,31,.5); }
.offc-art-chip-hors .offc-art-code { color: #8c5c11; font-family: inherit; font-size: 11px; }
.offc-art-chip-hors .offc-art-lab  { color: #a8792c; }

/* ── Le renvoi, sous la désignation ──────────────────────────────────── */
.offc-art-ref {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  width: 100%; margin-top: 3px; padding: 3px 0 0;
  border: 0; background: none; cursor: pointer;
  text-align: left; font-family: inherit;
  font-size: 11px; line-height: 1.45; color: var(--bep-teal);
}
.offc-art-ref:hover .offc-art-ref-txt { text-decoration: underline; }
.offc-art-ref:focus-visible { outline: 2px solid var(--bep-teal-bright); outline-offset: 2px; }
.offc-art-ref-marque { flex: none; opacity: .65; }
.offc-art-ref-txt { color: inherit; }

/* Une désignation réécrite est exactement le cas où le lien se perdait :
   elle se dit, elle ne se devine pas. */
.offc-art-ref-mod {
  flex: none;
  padding: 0 6px; border-radius: 20px;
  background: rgba(224,154,26,.16); color: #8c5c11;
  font-size: 9px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.offc-art-ref-hors { color: #8c5c11; }
.offc-art-ref-hors .offc-art-ref-marque { opacity: 1; }

/* ── Une ligne hors série, dans le tableau ───────────────────────────── */
.offc-table .offc-row-hors td:first-child { box-shadow: inset 3px 0 0 var(--c-warning); }
.offc-groupe-marque {
  flex: none; margin-right: 2px;
  color: var(--c-warning); font-size: 15px; line-height: 1;
}

/* ── La fiche ────────────────────────────────────────────────────────── */
.offc-fiche-back { z-index: 1300; }

.offc-fiche {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.offc-fiche-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-hairline);
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
}
.offc-fiche-titre { flex: 1; min-width: 0; }
.offc-fiche-head h3 {
  margin: 0;
  font-family: var(--font-display, var(--font));
  font-size: 17px; color: var(--bep-teal-dark);
}
.offc-fiche-chap {
  margin-top: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-faint);
}
.offc-fiche-hors .offc-fiche-head { background: linear-gradient(180deg, #fffaf0, var(--c-surface)); }
.offc-fiche-hors .offc-fiche-head h3 { color: #8c5c11; }

.offc-fiche-corps {
  padding: 4px 16px 16px;
  overflow-y: auto;
}

/* Un avertissement se lit avant le reste, ou il ne sert à rien. */
.offc-fiche-alerte {
  display: flex; flex-direction: column; gap: 4px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-warning);
  background: #fffaf0;
  font-size: 12px; line-height: 1.5; color: #7a5210;
}
.offc-fiche-alerte strong { color: #6b4409; }

.offc-fiche-bloc { margin-top: 16px; }
.offc-fiche-bloc h4 {
  margin: 0 0 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--c-hairline);
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--c-text-faint);
}

.offc-fiche-champ {
  display: flex; align-items: baseline; gap: 12px;
  padding: 4px 0;
  font-size: 12.5px; line-height: 1.5;
}
.offc-fiche-lab {
  flex: none; width: 178px;
  font-size: 11px; color: var(--c-text-muted);
}
.offc-fiche-val {
  flex: 1; min-width: 0;
  color: var(--c-text); font-variant-numeric: tabular-nums;
}

/* Une désignation de bordereau court sur trois lignes : elle a besoin de
   la largeur entière, pas d'une colonne de valeur. */
.offc-fiche-texte { padding: 4px 0 6px; }
.offc-fiche-texte .offc-fiche-lab { display: block; width: auto; margin-bottom: 3px; }
.offc-fiche-texte p {
  margin: 0;
  font-size: 12.5px; line-height: 1.55; color: var(--c-text);
}

.offc-fiche-just {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--c-border);
  font-size: 12px; line-height: 1.55; color: var(--c-text-2);
}

.offc-fiche-act { margin-top: 10px; }

@media (max-width: 620px) {
  .offc-fiche-champ { flex-direction: column; gap: 1px; }
  .offc-fiche-lab { width: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   29 · LE BANDEAU : PLUS BAS, ET ESCAMOTABLE
   ───────────────────────────────────────────────────────────────────────
   Le bandeau occupait près de quatre-vingts pixels en haut de l'écran,
   toute la journée, pour trois informations qu'on lit une fois le matin.
   Deux mesures : il maigrit — le logo, le titre du projet et ses trois
   sous-titres tiennent maintenant sur UNE ligne —, et il se replie quand
   on n'en a pas besoin.

   Le repli lui-même vit dans js/core/motion.js. Ici on ne décrit que les
   deux états ; c'est ce qui garantit qu'un navigateur sans GSAP, ou un
   utilisateur qui a demandé moins de mouvement, obtient exactement le
   même résultat — sans la traversée.
═══════════════════════════════════════════════════════════════════════ */

/* ── 29.1 · Le régime maigre ─────────────────────────────────────────── */
.app-header { padding: 6px 20px; gap: 14px; }

.brand { gap: 10px; }
.logo, .logo img, .app-header .logo img { height: 30px; }
.brand-text h1 { font-size: 13px; }

/* La carte du projet tenait sur deux lignes : le titre, puis l'adresse,
   le technicien et le secteur en dessous. Tout cela dit la même chose —
   quel dossier est ouvert — et n'a donc besoin que d'une ligne. */
.project-display {
  display: flex; align-items: baseline; gap: 11px;
  padding: 4px 13px;
  max-width: 620px;
  min-width: 0;
}
/* `styles.css` pose `flex-wrap: wrap` sur .pd-main : dès que la colonne
   du milieu se resserre — et elle se resserre, six boutons occupent la
   droite —, le numéro et le titre s'empilaient, et la carte reprenait la
   deuxième ligne qu'on venait de lui retirer. */
.project-display .pd-main {
  flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; gap: 8px;
}
.project-display .pd-num { font-size: 9.5px; padding: 1px 7px; }
.project-display .pd-titre { font-size: 15px; line-height: 1.25; max-width: 260px; }
/* En bloc et non en flex : c'est la seule façon d'obtenir de vraies
   petites capitales tronquées par « … » quand la place manque. Les
   séparateurs « · » existaient déjà (styles.css), et ils sautent tout
   seuls quand un champ est vide. */
.project-display .pd-sub {
  display: block;
  flex: 1 1 auto; min-width: 0;
  margin-top: 0;
  font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-display #sb-active-badge { flex: none; margin: 0; }

.app-header .btn { padding: 5px 10px; font-size: 11px; }
.app-header .user-badge { padding: 3px 9px; font-size: 10.5px; line-height: 1.25; }
.app-header .usage-badge { padding: 3px 8px; font-size: 10px; }

/* ── 29.2 · Le bouton qui replie ─────────────────────────────────────
   `order` plutôt qu'une position dans le DOM : plusieurs modules
   ajoutent leurs boutons au bandeau après le chargement, et celui-ci
   doit rester le dernier quoi qu'il arrive. */
.ah-bouton {
  order: 99;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0 !important;
  flex: none;
}
.ah-bouton svg { display: block; }

/* ── 29.3 · Les deux états ───────────────────────────────────────────── */
.app-header.ah-anime { overflow: hidden; }

/* L'état replié ne dépend d'aucune animation : c'est lui, et lui seul,
   qui décide de ce qu'on voit. GSAP ne fait que la traversée. */
.app-header.ah-replie {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  visibility: hidden;
  border-bottom-width: 0;
}

/* ── 29.4 · Le balayage de laiton ────────────────────────────────────
   Une barre qui disparaît sans qu'on ait vu par où laisse un doute. Le
   laiton traverse le bandeau juste avant qu'il ne bascule : on suit le
   geste, donc on sait où le retrouver. */
.ah-scan {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 150px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(242,205,130,.42) 38%, rgba(255,248,231,.92) 50%,
    rgba(242,205,130,.42) 62%, transparent 100%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

/* ── 29.5 · L'onglet de rappel ───────────────────────────────────────
   Replié, le bandeau doit rester RÉCUPÉRABLE sans qu'on ait à deviner :
   un onglet de laiton reste accroché au bord haut de l'écran, et il
   grandit sous le curseur pour dire qu'il se prend. */
#ah-onglet { display: none; }
html.bandeau-replie #ah-onglet {
  display: flex; align-items: center; gap: 7px;
  position: fixed; top: 0; left: 50%;
  z-index: 60;
  height: 16px; padding: 0 18px 2px;
  border: 0; border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, var(--bep-teal-dark) 0%, var(--bep-teal-abyss) 100%);
  box-shadow: 0 3px 12px rgba(6,35,42,.42),
              inset 0 -1px 0 rgba(242,205,130,.55),
              inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--bep-brass-lit);
  font-family: var(--font);
  font-size: 8.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: height .2s var(--ease), padding-bottom .2s var(--ease),
              color .2s var(--ease);
}
html.bandeau-replie #ah-onglet:hover,
html.bandeau-replie #ah-onglet:focus-visible {
  height: 25px; padding-bottom: 6px;
  color: #fff5dd;
  outline: none;
}
#ah-onglet svg { display: block; opacity: .9; }

/* Le contenu remonte tout en haut : sans le bandeau, la première ligne
   de l'étape se collerait au bord de l'écran. */
html.bandeau-replie .m-shell { padding-top: 6px; }

@media (max-width: 860px) {
  .project-display { flex-wrap: wrap; gap: 2px 10px; }
  .project-display .pd-sub { flex-basis: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   30 · L'ARCHIVE DES OFFRES COMPLÉMENTAIRES
   ───────────────────────────────────────────────────────────────────────
   La liste des offres enregistrées vivait dans un <select>, à l'intérieur
   d'un <details> replié, en bas de l'étape : on cliquait « Enregistrer
   l'offre », et rien de visible ne changeait nulle part. Elle est ici une
   carte, posée juste sous le bouton qui l'alimente.

   Une seule ligne y est marquée : celle que l'on a sous les yeux. Sans ce
   repère, deux versions au même nom sont indiscernables.
═══════════════════════════════════════════════════════════════════════ */

.offc-archive { margin-top: 14px; }
.offc-arch-corps { padding: 8px 10px 10px; }

.offc-arch-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.offc-arch-ligne + .offc-arch-ligne { margin-top: 3px; }
.offc-arch-ligne:hover { background: var(--c-surface-2); border-color: var(--c-hairline); }

/* Celle qui est chargée dans le tableau, au-dessus. */
.offc-arch-ligne.est-courante {
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
}

.offc-arch-nom {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.offc-arch-nom strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offc-arch-ver {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  padding: 1px 7px;
}
.offc-arch-ici {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bep-teal-dark, #0d6b76);
}

.offc-arch-meta {
  flex: none;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.offc-arch-act { flex: none; min-width: 74px; text-align: right; }

@media (max-width: 720px) {
  .offc-arch-ligne { flex-wrap: wrap; gap: 4px 10px; }
  .offc-arch-nom { flex-basis: 100%; }
}