/* =====================================================================
   METOD · SHARED CSS · v1.0
   =====================================================================
   SOURCE DE VÉRITÉ UNIQUE pour TOUS les frontends METOD.
   Règles complètes dans CLAUDE.md à la racine du projet.

   ── CHARGEMENT (obligatoire dans CET ordre) ──
     <link href="../metod-tokens.css">     ← tokens (1 seule copie, racine)
     <link href="../metod_shared.css">     ← ce fichier
     <link href="styles.css">              ← styles spécifiques au frontend

   ── RÈGLES ABSOLUES ──
   1. Une seule copie de metod-tokens.css et metod_shared.css (à la racine).
      Aucun frontend n'a sa propre copie.
   2. Un composant utilisé par ≥2 frontends vit ICI, pas dupliqué localement.
   3. Aucun frontend ne doit overrider les classes définies ici.
      Les variantes se créent ICI (ex: .chip--green, .btn-primary--large).
   4. Aucun <style> inline dans les HTML. Tout va dans styles.css ou ici.
   5. Les tokens (--space-*, --font-*, --metod-*) viennent de metod-tokens.css.
      Jamais redéfinis ailleurs.

   ── PATTERN HTML OBLIGATOIRE POUR CHAQUE PAGE ──
     <body class="app-body">
       <div class="app-shell">
         <nav class="app-sidebar">…</nav>
         <div class="app-column">
           <header class="app-topbar">…</header>
           <main class="app-main">
             <div class="dash">                       ← padding 40/32/48
               <div class="page__head">               ← titre canonique
                 <div>
                   <h1 class="page__title">Titre</h1>
                 </div>
               </div>
               <!-- contenu -->
             </div>
           </main>
         </div>
       </div>
     </body>

   ── RÈGLE TITRE ──
     UNIQUEMENT .page__title (pas de .page__eyebrow, pas de .page__subtitle).
     ✗ Pas de salutation personnalisée ("Bonjour Marie")
     ✗ Pas de date du jour
     Le titre décrit la PAGE, pas l'utilisateur.

   ── BOÎTES DE SYNTHÈSE (KPI / STATS) ──
     display: grid; gap: var(--space-4); (16px entre chaque boîte)
     Pas de bordure/background sur le wrapper.
     Chaque cellule = carte indépendante (background, border, radius).
     Pas de border-right entre cellules — le gap suffit.

   ── LAYOUTS INTERDITS ──
     ✗ Sidebar droite sur les dashboards (Actions rapides / Notifications / Bureau)
     ✗ Tabs horizontaux qui répètent les liens de la sidebar (ex: dash__tabs)
     ✗ Label de groupe ("Navigation", "Aide") au-dessus des items de la sidebar
     La sidebar gauche est la seule source de navigation principale.
     Les actions secondaires vont dans la sidebar gauche ou en tête de page.

   ── AUTH (connexion / inscription) ──
     Chaque frontend a : connexion.html + inscription.html
     Pattern : <body class="auth-page"><form class="auth-card">…</form></body>
     Fond mesh orange + carte centrée (voir section AUTH PAGES dans ce fichier).
     Tout bouton id="logoutBtn" doit rediriger vers ./connexion.html.

   ── TABLE OF CONTENTS ──
     A. Reset & base
     B. App shell (sidebar, topbar, main)
     C. Buttons
     D. Chips (status badges)
     E. Cards (.pcard)
     F. Page head (.page__head) + wrapper (.dash)
   ===================================================================== */

@import url('./metod-tokens.css');

/* =====================================================================
   A. RESET & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-body);
  line-height: 1.55;
  color: var(--metod-ink);
  background: var(--metod-bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* Focus — accessibilité WCAG AA */
*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 90, 16, 0.3);
  border-radius: var(--radius-sm);
}

/* Chiffres : toujours JetBrains Mono */
.mono, .num, time, .metric-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: -0.01em;
}

/* Grain texture overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}


/* =====================================================================
   A. LAYOUT GLOBAL — APP SHELL
   =====================================================================
   Structure : .app-shell > .app-sidebar + .app-column
   .app-column > .app-topbar + .app-main
   ===================================================================== */

body.app-body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.app-shell {
  display: flex;
  height: calc(100vh / 1.08);
  overflow: hidden;
  background: var(--metod-bone);
}


/* =====================================================================
   B. SIDEBAR — VERROUILLÉE
   =====================================================================
   Largeur : 240px ouvert, 56px collapsed.
   Logo : SVG METOD inline, 16px de haut.
   Nav items : 14px, icônes 18×18 stroke 1.5.
   Profil : avatar 32px + nom + rôle.
   Toggle : bouton rond orange 32px.
   ===================================================================== */

.app-sidebar {
  width: var(--shell-sidebar-width);
  flex-shrink: 0;
  background: var(--metod-bone);
  border-right: var(--border-hairline);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-base) var(--ease-out);
  position: relative;
  z-index: 20;
  overflow: hidden;
}
.app-sidebar.is-collapsed {
  width: var(--shell-sidebar-collapsed);
  overflow: visible;
}

/* ── Sidebar header (logo) ── */
.app-sidebar__header {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  height: var(--shell-topbar-height);
  border-bottom: var(--border-hairline);
  flex-shrink: 0;
}
.app-sidebar__brand {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.app-sidebar__logo-full {
  height: 16px;
  width: auto;
  display: block;
  fill: var(--metod-ink);
  flex-shrink: 0;
}
.app-sidebar__logo-mono {
  height: 16px;
  width: auto;
  display: none;
  fill: var(--metod-ink);
  flex-shrink: 0;
}
.app-sidebar.is-collapsed .app-sidebar__logo-full { display: none; }
.app-sidebar.is-collapsed .app-sidebar__logo-mono { display: block; }

/* ── Sidebar navigation ── */
.app-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar__group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--metod-stone);
  padding: var(--space-2);
  margin-top: var(--space-3);
}
.app-sidebar__group-label:first-child { margin-top: 0; }
.app-sidebar.is-collapsed .app-sidebar__group-label { display: none; }

/* ── Nav items ── */
.app-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--metod-ash);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.app-nav-item:hover {
  background: var(--metod-mist);
  color: var(--metod-ink);
}
.app-nav-item.is-active {
  background: var(--metod-mist);
  color: var(--metod-ink);
  font-weight: 500;
}
.app-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: var(--metod-orange);
  border-radius: 0 2px 2px 0;
}

/* Nav item icons — VERROUILLÉ : 18×18, stroke 1.5 */
.app-nav-item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: block;
}

.app-nav-item__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge on nav item */
.app-nav-item__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--metod-brick);
  background: var(--metod-brick-soft);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.app-sidebar.is-collapsed .app-nav-item__badge { display: none; }

/* ── Tooltip (sidebar collapsed) ── */
.app-nav-item__tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--metod-ink);
  color: var(--metod-bone);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: 50;
}
.app-nav-item__tooltip::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--metod-ink);
}

/* ── Sidebar collapsed states ── */
.app-sidebar.is-collapsed .app-nav-item {
  justify-content: center;
  padding: 10px 0;
}
.app-sidebar.is-collapsed .app-nav-item__label { display: none; }
.app-sidebar.is-collapsed .app-nav-item.is-active::before { display: none; }
.app-sidebar.is-collapsed .app-nav-item.is-active {
  background: var(--metod-ink);
  color: var(--metod-bone);
}
.app-sidebar.is-collapsed .app-nav-item:hover .app-nav-item__tooltip { opacity: 1; }

/* ── Sidebar toggle button ── */
.app-sidebar__nav-bottom {
  padding: var(--space-3);
  border-top: var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-sidebar__toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--metod-orange);
  color: var(--metod-bone);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.app-sidebar__toggle-btn:hover {
  background: var(--metod-orange-deep);
  transform: scale(1.05);
}
.app-sidebar__toggle-btn svg {
  width: 13px;
  height: 13px;
  stroke: var(--metod-bone);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  transition: transform var(--duration-base) var(--ease-out);
}
.app-sidebar.is-collapsed .app-sidebar__toggle-btn svg {
  transform: rotate(180deg);
}

/* ── Sidebar footer (profil) ── */
.app-sidebar__footer {
  border-top: var(--border-hairline);
  padding: var(--space-3);
  position: relative;
  flex-shrink: 0;
}

.app-profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}
.app-profile:hover { background: var(--metod-mist); }

.app-profile__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--metod-ink);
  color: var(--metod-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0;
}

.app-profile__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-profile__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--metod-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-profile__role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--metod-ash);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-profile__chevron { color: var(--metod-ash); flex-shrink: 0; }

.app-sidebar.is-collapsed .app-profile { justify-content: center; padding: var(--space-1); }
.app-sidebar.is-collapsed .app-profile__info,
.app-sidebar.is-collapsed .app-profile__chevron { display: none; }

/* ── Profile popover ── */
.app-profile-popover {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: var(--space-3);
  right: var(--space-3);
  background: var(--metod-bone);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 40;
  display: none;
}
.app-profile-popover.is-open { display: block; }
.app-sidebar.is-collapsed .app-profile-popover {
  position: fixed;
  left: 64px;
  bottom: var(--space-3);
  right: auto;
  top: auto;
  min-width: 220px;
  z-index: 200;
}
.app-profile-popover__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: var(--border-hairline);
  margin-bottom: var(--space-2);
}
.app-profile-popover__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--metod-ink);
  margin-bottom: 2px;
}
.app-profile-popover__email {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--metod-ash);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-profile-popover__separator {
  height: 1px;
  background: var(--metod-mist);
  margin: var(--space-2) 0;
}
.app-profile-popover__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--metod-ash);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.app-profile-popover__item:hover { background: var(--metod-mist); }
.app-profile-popover__item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.app-profile-popover__item--danger { color: var(--metod-brick); }
.app-profile-popover__item--danger:hover { background: var(--metod-brick-soft); }


/* =====================================================================
   C. HEADER / TOPBAR — VERROUILLÉE
   =====================================================================
   Hauteur : 52px (--shell-topbar-height).
   Breadcrumb mono 12px à gauche.
   Search 260px + cloche notification à droite.
   ===================================================================== */

.app-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.app-topbar {
  height: var(--shell-topbar-height);
  flex-shrink: 0;
  background: var(--metod-bone);
  border-bottom: var(--border-hairline);
  display: flex;
  align-items: center;
  padding: 0 var(--shell-content-padding);
  gap: var(--space-5);
}

.app-topbar__breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.app-topbar__commune { color: var(--metod-ash); }
.app-topbar__sep { color: var(--metod-fog); }
.app-topbar__page { color: var(--metod-ink); font-weight: 500; }

/* Search bar */
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}
.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3);
  background: var(--metod-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  width: 260px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.topbar-search:focus-within { border-color: var(--metod-ash); }
.topbar-search svg {
  width: 14px;
  height: 14px;
  stroke: var(--metod-stone);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.topbar-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--metod-ink);
  min-width: 0;
}
.topbar-search__input::placeholder { color: var(--metod-stone); }
.topbar-search__input:focus { outline: none; }

/* Notification bell */
.topbar-notif {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: var(--border-hairline);
  background: transparent;
  color: var(--metod-ash);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.topbar-notif:hover {
  background: var(--metod-mist);
  color: var(--metod-ink);
}
.topbar-notif svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.topbar-notif__badge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--metod-orange);
  border: 1.5px solid var(--metod-bone);
}


/* =====================================================================
   MAIN CONTENT AREA
   ===================================================================== */

.app-main {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  background: var(--metod-bone);
  display: flex;
  flex-direction: column;
}


/* =====================================================================
   D. TITRE DE PAGE — VERROUILLÉ
   =====================================================================
   RÈGLE : tous les H1 du produit utilisent .page-title.
   Aucun style custom autorisé sur les titres de page.
   ===================================================================== */

.page-title-block {
  padding: var(--space-8) var(--shell-content-padding) var(--space-6);
  border-bottom: var(--border-hairline);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.page-title-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--metod-ash);
  margin-bottom: var(--space-3);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--metod-ink);
}

.page-subtitle {
  font-size: 14px;
  color: var(--metod-ash);
  margin-top: var(--space-2);
  max-width: 520px;
  line-height: 1.5;
}


/* =====================================================================
   E. CARDS — VERROUILLÉES
   =====================================================================
   RÈGLE : toutes les cards du produit utilisent .card.
   Aucun radius custom, aucun padding custom.
   border-radius: 8px (--radius-md).
   border: 1px solid --metod-mist.
   padding: 24px (--space-6).
   ===================================================================== */

.card {
  background: var(--metod-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.card:hover {
  box-shadow: var(--shadow-sm);
}

.card-compact {
  background: var(--metod-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: var(--border-hairline);
}

/* Card grid — gap FIXE, responsive */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}

/* Card clickable */
.card[onclick],
.card-clickable {
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.card[onclick]:hover,
.card-clickable:hover {
  border-color: var(--metod-fog);
  box-shadow: var(--shadow-md);
}


/* =====================================================================
   F. BADGES / PILLS — VERROUILLÉS
   =====================================================================
   RÈGLE : tous les badges de statut utilisent .badge.
   Pill shape (radius-full), padding 4px 10px, font-size eyebrow.
   ===================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.badge--warning  { background: var(--metod-caramel-soft); color: var(--metod-caramel); }
.badge--danger   { background: var(--metod-brick-soft);   color: var(--metod-brick); }
.badge--success  { background: var(--metod-forest-soft);  color: var(--metod-forest); }
.badge--info     { background: var(--metod-plum-soft);    color: var(--metod-plum); }
.badge--neutral  { background: var(--metod-mist);         color: var(--metod-ash); }
.badge--neutral::before { background: var(--metod-stone); }
.badge--orange   { background: var(--metod-orange-soft);  color: var(--metod-orange); }
.badge--slate    { background: var(--metod-slate-soft);   color: var(--metod-slate); }

/* Pastille (dot + label inline, sans background) */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-caption);
  font-weight: 500;
  color: var(--metod-ink);
  white-space: nowrap;
}
.pastille::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--metod-stone);
  flex-shrink: 0;
}
.pastille--danger::before  { background: var(--metod-brick); }
.pastille--warning::before { background: var(--metod-caramel); }
.pastille--success::before { background: var(--metod-forest); }
.pastille--info::before    { background: var(--metod-plum); }
.pastille--slate::before   { background: var(--metod-slate); }


/* =====================================================================
   G. BOUTONS — VERROUILLÉS
   =====================================================================
   RÈGLE : même radius, même padding, même font-size sur toutes
   les variantes. Primary = 44px, Secondary = 36px.
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform 60ms ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Primary — orange, 44px */
.btn--primary {
  height: 44px;
  padding: 0 var(--space-6);
  font-size: 14px;
  background: var(--metod-orange);
  color: var(--metod-bone);
}
.btn--primary:hover { background: var(--metod-orange-deep); }

.btn--primary-ink {
  height: 44px;
  padding: 0 var(--space-6);
  font-size: 14px;
  background: var(--metod-ink);
  color: var(--metod-bone);
}
.btn--primary-ink:hover { background: var(--metod-graphite); }

.btn--primary-green {
  height: 44px;
  padding: 0 var(--space-6);
  font-size: 14px;
  background: var(--metod-forest);
  color: var(--metod-bone);
}
.btn--primary-green:hover { background: var(--metod-forest); filter: brightness(0.85); }

.btn--primary-danger {
  height: 44px;
  padding: 0 var(--space-6);
  font-size: 14px;
  background: var(--metod-brick);
  color: var(--metod-bone);
}
.btn--primary-danger:hover { background: var(--metod-brick); filter: brightness(0.85); }

/* Secondary — outline, 36px */
.btn--secondary {
  height: 36px;
  padding: 0 var(--space-4);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--metod-ink);
  border-color: var(--metod-mist);
}
.btn--secondary:hover {
  background: var(--metod-mist);
  border-color: var(--metod-fog);
}

/* Ghost — minimal, no border */
.btn--ghost {
  height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-caption);
  font-weight: 500;
  color: var(--metod-ash);
  border-radius: var(--radius-sm);
}
.btn--ghost:hover {
  background: var(--metod-mist);
  color: var(--metod-ink);
}

/* Size modifiers */
.btn--sm {
  height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-caption);
}
.btn--full { width: 100%; }


/* =====================================================================
   H. STAT BLOCKS — VERROUILLÉS
   =====================================================================
   RÈGLE : tous les blocs de stats ont la même hauteur et le même
   padding. Taille chiffre : 44px (--font-size-stat).
   ===================================================================== */

/* Stat grid (row of stat cards, no gap, internal borders) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--metod-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stat-block {
  padding: var(--space-6) var(--space-8);
  border-right: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stat-block:last-child { border-right: 0; }

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--metod-ash);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.stat-label__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.stat-label__dot--danger  { background: var(--metod-brick); }
.stat-label__dot--warning { background: var(--metod-caramel); }
.stat-label__dot--success { background: var(--metod-forest); }
.stat-label__dot--info    { background: var(--metod-plum); }
.stat-label__dot--orange  { background: var(--metod-orange); }
.stat-label__dot--slate   { background: var(--metod-slate); }

.stat-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-stat);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--metod-ink);
}
.stat-value--orange { color: var(--metod-orange); }
.stat-value--danger { color: var(--metod-brick); }

.stat-meta {
  font-size: var(--font-size-caption);
  color: var(--metod-ash);
  font-family: var(--font-mono);
}

.stat-delta {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.stat-delta--up   { color: var(--metod-forest); }
.stat-delta--down { color: var(--metod-brick); }

/* Stat grid interactive (clickable cells, active state) */
.stat-block--clickable {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.stat-block--clickable:hover { background: var(--metod-bone); }
.stat-block--clickable.is-active {
  background: var(--metod-ink);
  color: var(--metod-bone);
}
.stat-block--clickable.is-active .stat-label,
.stat-block--clickable.is-active .stat-meta { color: var(--metod-bone); opacity: 0.8; }
.stat-block--clickable.is-active .stat-value { color: var(--metod-bone); }


/* =====================================================================
   I. TABS — VERROUILLÉS
   =====================================================================
   RÈGLE : texte actif = noir (--metod-ink), underline orange.
   ===================================================================== */

.tabs-bar {
  display: flex;
  border-bottom: var(--border-hairline);
  padding: 0 var(--shell-content-padding);
  background: var(--metod-bone);
}

.tab {
  padding: var(--space-4) 0;
  margin-right: var(--space-8);
  font-size: 13px;
  font-weight: 500;
  color: var(--metod-ash);
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
  text-decoration: none;
  background: none;
  border: none;
  font-family: var(--font-body);
}
.tab:hover { color: var(--metod-ink); }
.tab.is-active {
  color: var(--metod-ink);
  font-weight: 600;
}
.tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--metod-orange);
  border-radius: 2px 2px 0 0;
}

.tab__count {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  background: var(--metod-mist);
  color: var(--metod-ash);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  font-weight: 600;
}


/* =====================================================================
   J. PROGRESS BARS — VERROUILLÉES
   =====================================================================
   Hauteur : 4px. Radius : 2px.
   ===================================================================== */

.progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  color: var(--metod-ash);
}
.progress__bar {
  height: 4px;
  background: var(--metod-mist);
  border-radius: 2px;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--metod-orange);
  transition: width 300ms var(--ease-out);
}
.progress__fill--success { background: var(--metod-forest); }
.progress__fill--warning { background: var(--metod-caramel); }
.progress__fill--danger  { background: var(--metod-brick); }

/* Gauge (wider, 6px, for delay indicators) */
.gauge {
  margin-top: 6px;
}
.gauge__bar {
  height: 6px;
  background: var(--metod-mist);
  border-radius: 3px;
  overflow: hidden;
}
.gauge__fill {
  height: 100%;
  background: var(--metod-caramel);
  transition: width 300ms var(--ease-out);
}
.gauge__fill--danger  { background: var(--metod-brick); }
.gauge__fill--warning { background: var(--metod-caramel); }
.gauge__fill--success { background: var(--metod-forest); }
.gauge__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  color: var(--metod-ash);
}


/* =====================================================================
   K. SECTIONS & LABELS
   ===================================================================== */

.section {
  margin-bottom: var(--space-8);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--metod-ash);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--metod-orange);
  border-radius: 1px;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--metod-ink);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.section-title__count {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  background: var(--metod-mist);
  color: var(--metod-ash);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-weight: 600;
}

.divider {
  height: 1px;
  background: var(--metod-mist);
  border: 0;
  margin: var(--space-6) 0;
}


/* =====================================================================
   L. TIMELINE
   ===================================================================== */

.timeline {
  position: relative;
  padding-left: var(--space-5);
  margin-top: var(--space-2);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--metod-mist);
}
.timeline__item {
  position: relative;
  margin-bottom: 18px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--metod-paper);
  border: 2px solid var(--metod-fog);
}
.timeline__item--current::before {
  background: var(--metod-ink);
  border-color: var(--metod-ink);
}
.timeline__item--past::before {
  background: var(--metod-fog);
  border-color: var(--metod-fog);
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  color: var(--metod-ash);
}
.timeline__title {
  font-size: 13px;
  color: var(--metod-ink);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.35;
}


/* =====================================================================
   M. UTILITAIRES
   ===================================================================== */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4  { gap: var(--space-1); }
.gap-8  { gap: var(--space-2); }
.gap-12 { gap: var(--space-3); }
.gap-16 { gap: var(--space-4); }
.gap-24 { gap: var(--space-6); }
.mt-4   { margin-top: var(--space-1); }
.mt-8   { margin-top: var(--space-2); }
.mt-16  { margin-top: var(--space-4); }
.mt-24  { margin-top: var(--space-6); }
.mt-32  { margin-top: var(--space-8); }
.mb-16  { margin-bottom: var(--space-4); }
.mb-24  { margin-bottom: var(--space-6); }
.mb-32  { margin-bottom: var(--space-8); }
.muted  { color: var(--metod-ash); }
.strong { font-weight: 600; }
.small  { font-size: var(--font-size-caption); }
.tiny   { font-size: var(--font-size-eyebrow); }
.text-right { text-align: right; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--metod-ash);
}

/* Link inline */
.link-inline {
  color: var(--metod-ink);
  border-bottom: 1px solid var(--metod-fog);
  font-weight: 500;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.link-inline:hover { border-color: var(--metod-ink); }

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-eyebrow);
  color: var(--metod-ash);
  font-weight: 500;
}

/* Disclaimer */
.disclaimer {
  font-size: var(--font-size-eyebrow);
  color: var(--metod-ash);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-hairline);
  font-style: italic;
  background: var(--metod-bone);
}


/* =====================================================================
   N. PAGINATION
   ===================================================================== */

.pagination {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-caption);
  color: var(--metod-ash);
  font-family: var(--font-mono);
}
.pagination__pages { display: flex; gap: 2px; }
.pagination__page {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  color: var(--metod-ash);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pagination__page:hover { background: var(--metod-mist); color: var(--metod-ink); }
.pagination__page.is-active {
  background: var(--metod-ink);
  color: var(--metod-bone);
}


/* =====================================================================
   O. TABLES
   ===================================================================== */

.data-table {
  font-size: 13px;
  width: 100%;
  table-layout: fixed;
}
.data-table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--metod-ash);
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--border-hairline);
  white-space: nowrap;
  background: var(--metod-bone);
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--border-hairline);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.data-table tbody tr:hover { background: var(--metod-paper); }


/* =====================================================================
   P. MODALS
   ===================================================================== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(10, 10, 10, 0.5);
  align-items: center;
  justify-content: center;
}
.modal-overlay.is-active { display: flex; }

.modal {
  background: var(--metod-bone);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.modal__header {
  padding: var(--space-6) var(--space-8);
  border-bottom: var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h3);
  letter-spacing: -0.01em;
}
.modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--metod-ash);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
}
.modal__close:hover { background: var(--metod-mist); color: var(--metod-ink); }
.modal__body { padding: var(--space-6) var(--space-8); }
.modal__footer {
  padding: var(--space-4) var(--space-8);
  border-top: var(--border-hairline);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}


/* =====================================================================
   BACKWARD-COMPATIBLE ALIASES
   =====================================================================
   Ces aliases garantissent que le HTML existant (qui utilise les anciens
   noms de classes) fonctionne immédiatement avec metod_shared.css.
   Pour les NOUVEAUX développements, utiliser les classes canoniques
   définies ci-dessus.
   ===================================================================== */

/* Chips → Badges */
.chip              { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-1) 10px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--font-size-eyebrow); font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.chip::before      { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.chip--red         { background: var(--metod-brick-soft);   color: var(--metod-brick); }
.chip--orange      { background: var(--metod-caramel-soft); color: var(--metod-caramel); }
.chip--yellow      { background: var(--metod-plum-soft);    color: var(--metod-plum); }
.chip--green       { background: var(--metod-forest-soft);  color: var(--metod-forest); }
.chip--plum        { background: var(--metod-plum-soft);    color: var(--metod-plum); }
.chip--blue        { background: var(--metod-slate-soft);   color: var(--metod-slate); }
.chip--neutral     { background: var(--metod-mist);         color: var(--metod-ash); }
.chip--neutral::before { background: var(--metod-stone); }

/* Legacy button classes → btn system */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: 44px; padding: 0 var(--space-6);
  background: var(--metod-orange); color: var(--metod-bone);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em; border-radius: var(--radius-sm);
  border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), transform 60ms ease;
}
.btn-primary:hover { background: var(--metod-orange-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary--ink   { background: var(--metod-ink); }
.btn-primary--ink:hover { background: var(--metod-graphite); }
.btn-primary--green { background: var(--metod-forest); }
.btn-primary--green:hover { filter: brightness(0.85); }
.btn-primary--red   { background: var(--metod-brick); }
.btn-primary--red:hover { filter: brightness(0.85); }
.btn-primary--full  { width: 100%; }
.btn-primary--large { font-size: 15px; padding: 0 var(--space-8); }
.btn-primary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: 36px; padding: 0 var(--space-4);
  background: transparent; color: var(--metod-ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  border: var(--border-hairline); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.btn-secondary:hover { background: var(--metod-mist); border-color: var(--metod-fog); }
.btn-secondary--full { width: 100%; }
.btn-secondary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }

.btn-ghost {
  display: inline-flex; align-items: center;
  gap: 6px; padding: 6px var(--space-2);
  font-size: var(--font-size-caption); font-weight: 500;
  color: var(--metod-ash); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; background: none; border: none;
}
.btn-ghost:hover { color: var(--metod-ink); background: var(--metod-mist); }

.btn-sm { height: 30px; padding: 0 var(--space-3); font-size: var(--font-size-caption); }


/* =====================================================================
   Q. PROJECT / DOSSIER CARDS — VERROUILLÉES (pcard)
   =====================================================================
   Card unifiée pour tous les frontends.
   Date orange en haut, nom en vedette, progression segmentée,
   meta en chips au hover.
   RÈGLE : toutes les cards dossier/projet utilisent .pcard.
   ===================================================================== */

.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.pcard {
  background: var(--metod-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
}
.pcard:hover {
  border-color: var(--metod-fog);
  box-shadow: var(--shadow-md);
}

/* ── Header : date orange + badge ── */
.pcard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.pcard__date {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--metod-orange);
  letter-spacing: -0.01em;
}

/* ── Nom + adresse ── */
.pcard__name {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--metod-ink);
  line-height: 1.3;
}
.pcard__address {
  font-size: 13px;
  color: var(--metod-ash);
  margin-top: 2px;
}

/* ── Detail rows (verdict, avis, etc.) ── */
.pcard__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}
.pcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-caption);
}
.pcard__row-label { color: var(--metod-ash); }
.pcard__row-value { color: var(--metod-ink); font-weight: 500; }

/* ── Progression segmentée ── */
.pcard__progress {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}
.pcard__progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}
.pcard__progress-phase {
  font-size: var(--font-size-caption);
  color: var(--metod-ash);
}
.pcard__progress-step {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: 700;
  color: var(--metod-ink);
}

/* Track segmenté — 6 segments, un par étape */
.pcard__track {
  display: flex;
  gap: 3px;
  height: 6px;
}
.pcard__track-seg {
  flex: 1;
  border-radius: 3px;
  background: var(--metod-mist);
  transition: background var(--duration-base) var(--ease-out);
}
.pcard__track-seg.is-done { background: var(--metod-ash); }
.pcard__track-seg.is-current { background: var(--metod-orange); }

/* Couleurs par statut */
.pcard--danger .pcard__track-seg.is-done  { background: var(--metod-brick); opacity: 0.5; }
.pcard--danger .pcard__track-seg.is-current { background: var(--metod-brick); }
.pcard--success .pcard__track-seg.is-done   { background: var(--metod-forest); }
.pcard--success .pcard__track-seg.is-current { background: var(--metod-forest); }

/* ── Hover reveal : chips meta ── */
.pcard__hover-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out),
              margin-top var(--duration-base) var(--ease-out),
              padding-top var(--duration-base) var(--ease-out);
  margin-top: 0;
  padding-top: 0;
}
.pcard:hover .pcard__hover-reveal {
  max-height: 60px;
  opacity: 1;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}
.pcard__hover-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--metod-mist);
  color: var(--metod-ash);
}
.pcard__hover-chip--ref {
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--metod-fog);
  color: var(--metod-ink);
}
.pcard__hover-chip--zone {
  font-family: var(--font-mono);
}

/* ── Footer (actions) ── */
.pcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}
.pcard__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-caption);
  font-weight: 500;
  color: var(--metod-ash);
  transition: color var(--duration-fast) var(--ease-out);
}
.pcard__action:hover { color: var(--metod-ink); }
.pcard__action svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2;
}
.pcard__action--warning { color: var(--metod-caramel); }

/* ── Variante opacité (dossiers finalisés) ── */
.pcard--muted { opacity: 0.7; }
.pcard--muted:hover { opacity: 1; }


/* =====================================================================
   DASHBOARD · wrapper de contenu unifié (padding outer)
   RÈGLE : tout contenu principal d'une page (dashboard, liste, détail)
   est enveloppé dans .dash pour garantir le même padding partout.
   ===================================================================== */

.dash {
  padding: var(--space-10) var(--space-8) var(--space-12);
}


/* =====================================================================
   PAGE HEAD · titre canonique pour TOUTES les pages de TOUS les frontends
   Pattern : eyebrow (contexte) + title (nom de la page) + subtitle (description).
   RÈGLE : chaque page principale commence par un .page__head.
   ===================================================================== */

.page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  border-bottom: var(--border-hairline);
  padding-bottom: var(--space-6);
}
.page__head-text { flex: 1; min-width: 0; }

.page__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--metod-ash);
  margin: 0 0 10px 0;
}

.page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--metod-ink);
  margin: 0;
}

.page__subtitle {
  font-size: 14px;
  color: var(--metod-ash);
  margin: 10px 0 0 0;
  max-width: 520px;
}

.dash-section {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--metod-ash);
  margin: var(--space-6) 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dash-section::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--metod-orange);
  border-radius: 1px;
}


/* =====================================================================
   AUTH PAGES · connexion + inscription (unifié pour tous les frontends)
   Pattern 2 colonnes : brand panel sombre à gauche + formulaire à droite.
   Chaque frontend adapte juste le contenu du brand panel (titre, desc, role).
   ===================================================================== */

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 45% 1fr;
}

/* ── Brand panel (gauche) ── */
.auth-brand {
  background: var(--metod-ink);
  padding: 48px 48px 40px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: calc(100vh / 1.08);
}
.auth-brand__logo {
  margin-bottom: 48px;
}
.auth-brand__logo svg {
  height: 28px;
  width: auto;
  display: block;
  fill: var(--metod-bone);
}
.auth-brand__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--metod-bone);
  margin: 0 0 20px 0;
}
.auth-brand__desc {
  font-size: 14px;
  color: rgba(250, 250, 245, 0.55);
  line-height: 1.6;
  max-width: 320px;
  flex: 1;
  margin: 0;
}
.auth-brand__commune {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid rgba(250, 250, 245, 0.12);
}
.auth-brand__commune-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 250, 245, 0.4);
  margin: 0 0 8px 0;
}
.auth-brand__commune-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--metod-bone);
}

/* ── Form side (droite) ── */
.auth-form-side {
  background: var(--metod-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  min-height: 100vh;
}
.auth-form-inner {
  width: 100%;
  max-width: 400px;
}
.auth-form-side__back {
  align-self: flex-start;
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--metod-ash);
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-out);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-decoration: none;
}
.auth-form-side__back:hover { color: var(--metod-ink); }
.auth-form-side__back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

.auth-form-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.015em;
  color: var(--metod-ink);
  margin: 0 0 8px 0;
}
.auth-form-sub {
  font-size: 14px;
  color: var(--metod-ash);
  margin: 0 0 32px 0;
  line-height: 1.5;
}

/* ── Form fields ── */
.form-group {
  margin-bottom: 20px;
}
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--metod-ink);
  margin-bottom: 8px;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--metod-bone);
  border: 1px solid var(--metod-fog);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--metod-ink);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.form-input::placeholder { color: var(--metod-stone); }
.form-input:focus {
  border-color: var(--metod-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

/* Form divider ("ou") */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--metod-stone);
  font-size: 12px;
  font-weight: 500;
}
.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--metod-fog);
}

.auth-link-row {
  text-align: center;
  font-size: 13px;
  color: var(--metod-ash);
  margin-top: 20px;
}
.auth-link-row a {
  color: var(--metod-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-secure {
  text-align: center;
  font-size: 11px;
  color: var(--metod-stone);
  margin-top: 16px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.auth-secure svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

/* Responsive : 1 colonne en dessous de 900px, brand en petit header */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    position: relative;
    height: auto;
    padding: 32px;
  }
  .auth-brand__logo { margin-bottom: 24px; }
  .auth-brand__title { font-size: 28px; }
  .auth-brand__desc { display: none; }
  .auth-brand__commune { padding-top: 20px; margin-top: 20px; }
  .auth-form-side { padding: 40px 24px; min-height: auto; }
}


/* =====================================================================
   PROFIL v2 · Composants partagés
   ── 1. Identity header (3 zones : identité · rôle · organisation)
   ── 2. Health card (bandeau santé du compte)
   ── 3. Activity timeline
   ── 4. Context switcher (topbar)
   ── 5. Role switcher (démo visibilité par rôle)
   ===================================================================== */

/* ── 1. Identity header ─────────────────────────────────────────── */
.identity-header {
  display: grid;
  grid-template-columns: auto 1px 1fr 1px 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) var(--space-8);
  background: var(--metod-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.identity-header__sep {
  width: 1px;
  height: 64px;
  background: var(--metod-fog);
}
.identity-header__zone-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--metod-ash);
  margin-bottom: 6px;
}
.identity-header__avatar {
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--metod-ink);
  color: var(--metod-bone);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.identity-header__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--metod-ink);
}
.identity-header__detail {
  font-size: 13px;
  color: var(--metod-ash);
  margin-top: 2px;
}
.identity-header__role {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--metod-ink);
  line-height: 1.3;
}
.identity-header__role-sub {
  font-size: 12px;
  color: var(--metod-ash);
  margin-top: 4px;
  font-family: var(--font-mono);
}
.identity-header__org {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--metod-ink);
  line-height: 1.3;
}
.identity-header__org-sub {
  font-size: 12px;
  color: var(--metod-ash);
  margin-top: 4px;
}

/* ── 2. Health card ─────────────────────────────────────────────── */
.health-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--metod-bone);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.health-card--alert { border-color: var(--metod-caramel); background: var(--metod-caramel-soft); }
.health-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--metod-forest-soft);
  color: var(--metod-forest);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.health-card--alert .health-card__icon {
  background: var(--metod-caramel);
  color: #fff;
}
.health-card__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.health-card__list {
  display: flex;
  gap: var(--space-6);
  font-size: 13px;
  flex-wrap: wrap;
}
.health-card__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--metod-ink);
}
.health-card__item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--metod-forest);
  flex-shrink: 0;
}
.health-card__item--warn::before { background: var(--metod-caramel); }
.health-card__item--danger::before { background: var(--metod-brick); }
.health-card__item strong { font-weight: 500; }
.health-card__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--metod-ink);
  background: none;
  border: 1px solid var(--metod-ink);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.health-card__cta:hover { background: var(--metod-ink); color: var(--metod-bone); }

/* ── 3. Activity timeline ───────────────────────────────────────── */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-2);
}
.activity-row {
  display: grid;
  grid-template-columns: 120px 32px 1fr;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--metod-mist);
  font-size: 13px;
  align-items: baseline;
}
.activity-row:last-child { border-bottom: 0; }
.activity-row__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metod-ash);
}
.activity-row__icon {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--metod-mist);
  color: var(--metod-ash);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: center;
}
.activity-row__icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.activity-row__icon--orange { background: var(--metod-orange-soft); color: var(--metod-orange); }
.activity-row__icon--green  { background: var(--metod-forest-soft); color: var(--metod-forest); }
.activity-row__icon--red    { background: var(--metod-brick-soft); color: var(--metod-brick); }
.activity-row__desc { color: var(--metod-ink); line-height: 1.45; }
.activity-row__desc strong { font-weight: 500; }
.activity-row__meta { color: var(--metod-ash); font-size: 12px; margin-left: 6px; }

/* ── 4. Context switcher (topbar) ───────────────────────────────── */
.context-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px 6px 12px;
  background: var(--metod-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--metod-ink);
  cursor: pointer;
  margin-left: var(--space-3);
}
.context-switch:hover { background: var(--metod-mist); }
.context-switch__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metod-ash);
  margin-right: 4px;
}
.context-switch__value { font-weight: 500; }
.context-switch svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; margin-left: 2px; }

/* ── 5. Role switcher (démo) ────────────────────────────────────── */
.role-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  background: var(--metod-orange-glow);
  border: 1px dashed var(--metod-orange);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  font-size: 12px;
}
.role-switch__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metod-orange-deep);
  font-weight: 600;
}
.role-switch__label { color: var(--metod-ink); margin-left: var(--space-2); }
.role-switch__select {
  padding: 4px 10px;
  border: 1px solid var(--metod-orange);
  border-radius: var(--radius-sm);
  background: var(--metod-bone);
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--metod-ink);
  cursor: pointer;
}

/* Sections conditionnelles selon rôle — cachées par défaut */
[data-role-required] { display: none; }
[data-role-required].is-visible { display: block; }
.form-section[data-role-required].is-visible { display: block; }

/* Badge "Visible selon ton rôle" */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--metod-orange-glow);
  color: var(--metod-orange-deep);
  border-radius: var(--radius-full);
  font-weight: 600;
  margin-left: var(--space-2);
}


/* =====================================================================
   PROFIL v2 · Sections pliables (progressive disclosure)
   Usage :
     <div class="form-section is-collapsible is-collapsed" data-summary="résumé court">
       <div class="form-section__title">Titre</div>
       ... contenu ...
     </div>
   Le JS injecte le chevron + rend le titre cliquable.
   ===================================================================== */
.form-section.is-collapsible > .form-section__title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  user-select: none;
  -webkit-user-select: none;
  transition: margin var(--duration-fast) var(--ease-out),
              padding var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.form-section.is-collapsible > .form-section__title:hover { color: var(--metod-ink); }

.form-section.is-collapsible > .form-section__title::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--metod-ash);
  border-bottom: 1.5px solid var(--metod-ash);
  transform: rotate(45deg);
  margin-left: var(--space-2);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
  position: relative;
  top: -2px;
}
.form-section.is-collapsible.is-collapsed > .form-section__title::after {
  transform: rotate(-45deg);
  top: 0;
}

.form-section.is-collapsible.is-collapsed > *:not(.form-section__title) {
  display: none !important;
}
.form-section.is-collapsible.is-collapsed > .form-section__title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}

/* Résumé discret à droite du titre quand plié */
.form-section__summary {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--metod-ash);
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
  margin-right: var(--space-2);
  text-align: right;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
/* Cache le résumé quand la section est ouverte (moins de bruit) */
.form-section.is-collapsible:not(.is-collapsed) .form-section__summary {
  display: none;
}

/* Le role-badge reste toujours visible, pas aligné à droite */
.form-section.is-collapsible > .form-section__title .role-badge {
  margin-left: 0;
}
