/* =========================================================
   Extranet — shell type "Slack/TeamViewer"
   Topbar + Sidebar (icônes 1er niveau) + SubNav (2e niveau)
   + zone de rendu principale.
   ========================================================= */

:root {
  --gip-bleu-soft: #F3F6F6;
  --gip-red: #e30613;
  --gip-bleu: #E3ECEE;
  --gip-red-dark: #b30410;

  --accent-blue: #1f6feb;
  --accent-green: #16a34a;
  --accent-green-soft: #059669;

  --shell-bg: #ffffff;
  --topbar-bg: var(--gip-bleu-soft);
  --topbar-border: #e6e8eb;
  --topbar-height: 72px;

  --sidebar-bg: var(--gip-bleu-soft);
  --sidebar-border: #e6e8eb;
  --sidebar-width: 104px;
  --sidebar-fg: #6b7280;
  --sidebar-fg-active: #111827;

  --subnav-bg: #eef2f6;
  --subnav-fg: #1f2937;
  --subnav-muted: #6b7280;
  --subnav-width: 320px;
  --subnav-active-bg: rgba(17, 24, 39, 0.06);

  --main-bg: #ffffff;
  --main-fg: #111827;
  --main-muted: #6b7280;

  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --font-stack: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-stack);
  color: var(--main-fg);
  background: var(--shell-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500;
  /* La page elle-même ne scrolle pas : c'est .extranet-main qui prend la main */
  overflow: hidden;
}

/* ----- Shell ----- */
.extranet-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* mobile : exclut la barre de navigation iOS */
}

.extranet-body {
  display: flex;
  flex: 1;
  min-height: 0;        /* indispensable pour que les enfants flex puissent scroller */
  background: var(--gip-bleu-soft);
}

.extranet-topbar { flex-shrink: 0; }
/* Les navs ne scrollent jamais — elles tiennent dans le viewport.
   Si un débordement arrive, c'est à régler par le design (taille des items),
   pas par une scrollbar. */
.extranet-sidebar { overflow: hidden; flex-shrink: 0; }
.extranet-subnav  { overflow: visible; flex-shrink: 0; }
.extranet-main    { overflow-y: auto; overflow-x: hidden; }

/* ----- Topbar ----- */
.extranet-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--topbar-height);
  padding-right: 24px;
  background: var(--topbar-bg);
}
.extranet-topbar__brand {
  width: var(--sidebar-width);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.extranet-topbar__brand .extranet-topbar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 0;
}
.extranet-topbar__brand .extranet-topbar__logo img {
  display: block;
  height: 44px;
  width: auto;
}
.extranet-topbar__search {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.extranet-topbar__search input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 44px;
  border: 1px solid var(--topbar-border);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  color: var(--main-fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.extranet-topbar__search input:focus {
  border-color: var(--gip-red);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}
.extranet-topbar__search-label {
  position: absolute;
  left: 16px;
  display: inline-flex;
  color: var(--main-muted);
  pointer-events: none;
}
.extranet-topbar__search-clear {
  position: absolute;
  right: 12px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--main-muted);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.extranet-topbar__search-clear:hover { background: rgba(0, 0, 0, 0.08); color: var(--main-fg); }

/* =========================================================
   Search dropdown (autocomplete cross-modules)
   ========================================================= */
.extranet-topbar__search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--topbar-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  max-height: 480px;
  overflow-y: auto;
  z-index: 1000;
}
.extranet-topbar__search-dropdown[hidden] { display: none; }
.extranet-topbar__search-state {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--main-muted);
  text-align: center;
}
.extranet-topbar__search-state[hidden] { display: none; }
.extranet-topbar__search-groups[hidden] { display: none; }
.extranet-search-group { padding: 8px 0; border-bottom: 1px solid var(--topbar-border); }
.extranet-search-group:last-child { border-bottom: none; }
.extranet-search-group__label {
  margin: 0;
  padding: 6px 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--main-muted);
}
.extranet-search-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.extranet-search-item { padding: 0; }
.extranet-search-item__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--main-fg);
  text-decoration: none;
  transition: background 0.1s;
}
.extranet-search-item__link:hover,
.extranet-search-item.is-active .extranet-search-item__link {
  background: rgba(31, 111, 235, 0.08);
}
.extranet-search-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  color: var(--main-muted);
  flex-shrink: 0;
}
.extranet-search-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.extranet-search-item__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--main-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extranet-search-item__label mark {
  background: rgba(255, 213, 0, 0.45);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.extranet-search-item__sub {
  font-size: 12px;
  color: var(--main-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extranet-search-item__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.extranet-search-item__badge--success { background: rgba(40, 167, 69, 0.14); color: #1b6a30; }
.extranet-search-item__badge--warning { background: rgba(255, 153, 0, 0.18); color: #8a5200; }
.extranet-search-item__badge--neutral { background: rgba(0, 0, 0, 0.07); color: var(--main-muted); }
.extranet-search-item__badge--muted   { background: rgba(0, 0, 0, 0.05); color: #888; }
.extranet-topbar__actions {
  display: flex;
  gap: 8px;
}
.extranet-topbar__icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--main-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.extranet-topbar__icon:hover { background: rgba(0, 0, 0, 0.06); color: var(--main-fg); }
.extranet-topbar__icon--badge::after {
  content: attr(data-count);
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gip-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.extranet-topbar__icon--badge.has-unread::after { display: inline-flex; }

/* =========================================================
   Notifications dropdown
   ========================================================= */
.extranet-topbar__actions { position: relative; }
.extranet-notifications {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 70vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--topbar-border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.extranet-notifications[hidden] { display: none; }
.extranet-notifications__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--topbar-border);
  background: var(--gip-bleu-soft);
}
.extranet-notifications__header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--main-fg);
  flex: 1;
}
.extranet-notifications__enable-push {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--accent-blue, #1b4279);
  border-radius: 999px;
  color: var(--accent-blue, #1b4279);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.extranet-notifications__enable-push:hover { background: rgba(27, 66, 121, 0.08); }
.extranet-notifications__enable-push[hidden] { display: none; }

.extranet-notifications__mark-all {
  border: none;
  background: transparent;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms ease;
  flex-shrink: 0;
}
.extranet-notifications__mark-all:hover { background: rgba(31, 111, 235, 0.08); }
.extranet-notifications__mark-all:disabled {
  color: var(--main-muted);
  cursor: not-allowed;
  background: transparent;
}
.extranet-notifications__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--gip-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.extranet-notifications__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
.extranet-notifications__item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--topbar-border);
  font-size: 13px;
}
.extranet-notifications__item:last-child { border-bottom: none; }
.extranet-notifications__item.is-unread {
  background: rgba(31, 111, 235, 0.04);
}
.extranet-notifications__item.is-unread .extranet-notifications__subject { font-weight: 700; }
.extranet-notifications__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.extranet-notifications__item:has(> .extranet-notifications__link) { cursor: pointer; transition: background 120ms ease; }
.extranet-notifications__item:has(> .extranet-notifications__link):hover { background: rgba(31, 111, 235, 0.08); }
.extranet-notifications__item:has(> .extranet-notifications__link):hover .extranet-notifications__subject { color: var(--accent-blue); }
.extranet-notifications__archive {
  flex-shrink: 0;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--main-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.extranet-notifications__item:hover .extranet-notifications__archive { opacity: 1; }
.extranet-notifications__archive:hover { background: rgba(220, 53, 69, 0.12); color: #c00; }
.extranet-notifications__item.is-archiving {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.extranet-notifications__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gip-bleu-soft);
  color: var(--accent-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.extranet-notifications__content { flex: 1; min-width: 0; }
.extranet-notifications__subject {
  margin: 0 0 4px;
  color: var(--main-fg);
}
.extranet-notifications__body {
  margin: 0 0 4px;
  color: var(--main-muted);
  font-size: 12px;
  line-height: 1.4;
}
.extranet-notifications__date {
  font-size: 11px;
  color: var(--main-muted);
}
.extranet-notifications__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--main-muted);
  font-size: 13px;
}

/* ----- Sidebar (1er niveau, icônes) ----- */
.extranet-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}
.extranet-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.extranet-sidebar__item { position: relative; }
.extranet-sidebar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px;
  color: var(--sidebar-fg-active);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  opacity: 0.3;
  transition: opacity 0.15s, color 0.15s;
}
.extranet-sidebar__link:hover { opacity: 1; }
.extranet-sidebar__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: inherit;
}
/* Force le SVG des icônes à suivre la couleur du parent (pour l'état actif bleu).
   On laisse les `fill="none"` intacts (icônes en stroke). */
.extranet-sidebar__icon svg { color: inherit; }
.extranet-sidebar__icon svg *:not([fill="none"]) { fill: currentColor; }

.extranet-sidebar__item.is-active .extranet-sidebar__link { opacity: 1; font-weight: 600; }

/* .extranet-sidebar__item.is-active .extranet-sidebar__icon { color: var(--accent-blue); }*/

.extranet-sidebar__item.is-active::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid var(--gip-bleu);
}

.extranet-sidebar__user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 11px;
  color: var(--sidebar-fg);
}
.extranet-sidebar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #d1d5db;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #374151;
  margin-bottom: 4px;
}
.extranet-sidebar__name { font-weight: 600; color: var(--sidebar-fg-active); }
.extranet-sidebar__role { text-transform: uppercase; letter-spacing: 0.5px; font-size: 9px; color: var(--main-muted); }

.extranet-sidebar__logout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 10px;
  color: var(--main-muted);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.extranet-sidebar__logout:hover {
  background: rgba(227, 6, 19, 0.08);
  color: var(--gip-red);
}

/* ----- SubNav (2e niveau) ----- */
.extranet-subnav {
  width: var(--subnav-width);
  background: var(--gip-bleu);
  padding: 24px 16px 24px 24px;
  position: relative;
  border-top-left-radius: 20px;
  /* overflow visible : le toggle déborde à droite sans déclencher de scrollbar */
}
.extranet-subnav__toggle {
  position: absolute;
  top: 28px;
  right: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--topbar-border);
  background: #fff;
  color: var(--main-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 2;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.extranet-subnav__toggle:hover {
  color: var(--main-fg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.extranet-subnav__toggle svg {
  width: 16px;
  height: 16px;
}

.extranet-subnav__group { margin-bottom: 15px; }
/*
.extranet-subnav__group-header {
  margin: 0 0 8px;
}
*/

.extranet-subnav__group-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 -8px 4px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--subnav-fg);
  transition: background 0.15s, color 0.15s;
}
.extranet-subnav__group-link:hover { background: rgba(0, 0, 0, 0.04); }

.extranet-subnav__group.is-active .extranet-subnav__group-link h2{
  font-weight: 700;
}

.extranet-subnav__group-icon { 
  background-color: rgba(255,255,255,.3);
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--subnav-fg); 
  border-radius: 320px;
}

.extranet-subnav__group-title {
  margin: 0;
  font-size: 13px;
  color: var(--subnav-fg);
}
.extranet-subnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.extranet-subnav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--subnav-fg);
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.extranet-subnav__link:hover { background: rgba(0, 0, 0, 0.04); }

.extranet-subnav__icon { color: var(--subnav-muted); flex-shrink: 0; }

.extranet-subnav__group.is-active .extranet-subnav__group-icon{
  background: #FFF;
}

.extranet-subnav__group-icon svg {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* ----- SubNav repliée (icônes seules) ----- */
.extranet-subnav.is-collapsed {
  width: auto;
  /* padding-top élargi pour laisser passer le toggle absolute au-dessus du 1er item */
  padding: 76px 12px 24px;
}
.extranet-subnav.is-collapsed .extranet-subnav__group-link {
  margin: 0 0 8px;
  padding: 4px;
  justify-content: center;
}
.extranet-subnav.is-collapsed .extranet-subnav__group-title {
  display: none;
}
.extranet-subnav__toggle svg {
  transition: transform 0.2s ease;
}
.extranet-subnav.is-collapsed .extranet-subnav__toggle svg {
  transform: rotate(180deg);
}
.extranet-subnav { transition: width 0.2s ease, padding 0.2s ease; }

/* ----- Main content ----- */
.extranet-main {
  flex: 1;
  background: var(--main-bg);
  padding: 32px 40px;
  min-width: 0;
  min-height: 0;          /* idem : permet le scroll vertical interne */
}
.extranet-main__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.extranet-main__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--gip-red);
}
.extranet-main__intro {
  margin: -8px 0 18px;
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-muted, #6a727b);
}

.extranet-main__content > * + * { margin-top: 16px; }

/* =========================================================
   Buttons & toolbar
   ========================================================= */

/* L'attribut HTML5 [hidden] DOIT prévaloir sur display:inline-flex. Sans ce
 * sélecteur plus spécifique, .extranet-btn écrase la règle user-agent
 * [hidden]{display:none} et le bouton reste visible — bug constaté sur la
 * modal agenda où le bouton "Modifier" apparaissait sur les évènements hors
 * scope alors que le JS posait bien `hidden`. */
.extranet-btn[hidden] { display: none; }

.extranet-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 44px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.extranet-btn:disabled,
.extranet-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
/* État "loading" : le texte/icône devient transparent, un spinner prend la place */
.extranet-btn.is-loading {
  opacity: 1;
  cursor: progress;
  color: transparent !important;
}
.extranet-btn.is-loading > * { visibility: hidden; }
.extranet-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: inherit;
  /* `color: transparent` au-dessus s'applique au texte ; le border utilise une
     couleur fixe pour rester visible quelle que soit la variante du bouton. */
  border-color: rgba(255, 255, 255, 0.85);
  border-top-color: transparent;
  animation: extranet-spin 0.8s linear infinite;
}
.extranet-btn--ghost.is-loading::after,
.extranet-btn--ghost.is-loading {
  /* Pour les ghost (fond clair), le spinner doit être visible en sombre */
}
.extranet-btn--ghost.is-loading::after {
  border-color: rgba(31, 111, 235, 0.85);
  border-top-color: transparent;
}
@keyframes extranet-spin {
  to { transform: rotate(360deg); }
}

/* Overlay très léger pendant le submit pour bloquer l'interaction page */
body.extranet-is-submitting::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  cursor: progress;
  z-index: 1500;
  pointer-events: all;
  animation: extranet-overlay-fade-in 0.2s ease-out;
}
@keyframes extranet-overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.extranet-btn--primary {
  background: var(--gip-red);
  color: #fff;
}
.extranet-btn--primary:hover { background: var(--gip-red-dark); }
.extranet-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.extranet-btn--ghost {
  background: #fff;
  color: var(--main-fg);
  border: 1px solid var(--topbar-border);
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
}
.extranet-btn--ghost:hover { background: var(--gip-bleu-soft); }
.extranet-btn--pill { border-radius: 999px; }

.extranet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 16px;
  gap: 16px;
}
.extranet-toolbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--main-muted);
  text-decoration: none;
  font-size: 13px;
}
.extranet-toolbar__link:hover { color: var(--main-fg); }

/* =========================================================
   News list (Actualités)
   ========================================================= */
.extranet-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.extranet-news-list__item {
  position: relative;
  display: grid;
  grid-template-columns:
    48px                      /* vignette */
    minmax(0, 2fr)            /* titre */
    minmax(140px, 1fr)        /* région */
    minmax(180px, auto)       /* statut / linkedin */
    minmax(110px, auto)       /* date */
    auto;                     /* options */
  gap: 16px 32px;
  align-items: center;
  padding: 14px 24px;
  background: var(--gip-bleu-soft);
  border-radius: 12px;
}
.extranet-news-list__item.has-pending {
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.04) 0%, var(--gip-bleu-soft) 60%);
}
/* Loupiote sur le badge statut : petit point ambre pulsant qui signale
   qu'une demande (publication / suppression / modification) est en cours.
   Tooltip natif via data-pending-label posé sur l'article parent. */
.extranet-news-list__item.has-pending .extranet-status {
  position: relative;
  padding-right: 22px;
  cursor: help;
}
.extranet-news-list__item.has-pending .extranet-status::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b45309;
  box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.5);
  animation: extranet-pending-pulse 1.8s ease-in-out infinite;
}
@keyframes extranet-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); }
}
.extranet-news-list__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gip-bleu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.extranet-news-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.extranet-news-list__thumb-placeholder {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
}
.extranet-news-list__region,
.extranet-news-list__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--main-muted);
  font-size: 13px;
  white-space: nowrap;
}
.extranet-news-list__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--main-fg);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.4;
  /* Ellipsis serré : ~32 caractères */
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extranet-news-list__status-cell {
  white-space: nowrap;
}
.extranet-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  line-height: 1.4;
}
.extranet-status small {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  opacity: 0.85;
}
.extranet-status--published {
  background: rgba(16, 163, 74, 0.12);
  color: var(--accent-green-soft);
}
.extranet-status--pending {
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
}
.extranet-status--draft {
  background: rgba(107, 114, 128, 0.12);
  color: var(--main-muted);
}
.extranet-status--archived {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.extranet-status--linkedin {
  background: rgba(10, 102, 194, 0.1);
  color: #0a66c2;
  gap: 6px;
}

/* =========================================================
   Filters
   ========================================================= */
.extranet-btn--sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}
.extranet-btn.is-active {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}
.extranet-filters__badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  margin-left: 4px;
}

.extranet-filters {
  margin: 0 0 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--topbar-border);
  border-radius: 12px;
}
.extranet-filters__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.extranet-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.extranet-filters__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--main-muted);
}
.extranet-filters__field select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--topbar-border);
  border-radius: 8px;
  background: var(--gip-bleu-soft);
  font: inherit;
  font-size: 13px;
  color: var(--main-fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.extranet-filters__field select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}
.extranet-filters__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.extranet-news-list__actions {
  position: relative;
}
.extranet-news-list__menu-trigger {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--main-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.extranet-news-list__menu-trigger:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--main-fg);
}
.extranet-news-list__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 10;
}
.extranet-news-list__menu li { margin: 0; }
.extranet-news-list__menu a,
.extranet-news-list__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--main-fg);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.extranet-news-list__menu a > svg,
.extranet-news-list__menu button > svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.7;
}
.extranet-news-list__menu a:hover,
.extranet-news-list__menu button:hover {
  background: var(--gip-bleu-soft);
}
.extranet-news-list__menu li.is-danger a,
.extranet-news-list__menu li.is-danger button {
  color: var(--gip-red);
}
.extranet-news-list__menu li.is-danger a:hover,
.extranet-news-list__menu li.is-danger button:hover {
  background: rgba(227, 6, 19, 0.08);
}
.extranet-news-list__menu li.is-success a,
.extranet-news-list__menu li.is-success button {
  color: #15803d;
  font-weight: 600;
}
.extranet-news-list__menu li.is-success a:hover,
.extranet-news-list__menu li.is-success button:hover {
  background: rgba(22, 163, 74, 0.10);
}
.extranet-news-list__empty {
  margin: 24px 0;
  padding: 32px;
  background: var(--gip-bleu-soft);
  border-radius: 12px;
  text-align: center;
  color: var(--main-muted);
}

.extranet-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.extranet-pagination__link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  color: var(--main-fg);
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--topbar-border);
}
.extranet-pagination__link.is-current,
.extranet-pagination__link:hover {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}
.extranet-pagination__link--nav { font-size: 18px; font-weight: 600; line-height: 1; }
.extranet-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--main-muted);
  user-select: none;
}

/* =========================================================
   Modal de confirmation
   ========================================================= */
.extranet-btn--danger {
  background: var(--gip-red);
  color: #fff;
}
.extranet-btn--danger:hover { background: var(--gip-red-dark); }

.extranet-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.extranet-modal[hidden] { display: none; }
.extranet-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.extranet-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 480px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
  animation: extranet-modal-in 0.18s ease-out;
}
@keyframes extranet-modal-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.extranet-modal__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--main-fg);
}
.extranet-modal__body {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-muted);
}
.extranet-modal__body strong { color: var(--main-fg); }
.extranet-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Variantes pour la modal récap agenda */
.extranet-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--main-muted);
  padding: 6px;
  border-radius: 6px;
  line-height: 0;
}
.extranet-modal__close:hover { background: rgba(0,0,0,.05); color: var(--main-fg); }
.extranet-modal__meta {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.extranet-modal__meta-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline; }
.extranet-modal__meta-row[hidden] { display: none; }
.extranet-modal__meta dt { color: var(--main-muted); font-weight: 500; }
.extranet-modal__meta dd { margin: 0; color: var(--main-fg); font-weight: 500; }

.extranet-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #e5e7eb;
  color: #374151;
}
.extranet-status-pill[data-status="draft"]     { background: #fef3c7; color: #92400e; }
.extranet-status-pill[data-status="pending"]   { background: #dbeafe; color: #1e40af; }
.extranet-status-pill[data-status="published"] { background: #d1fae5; color: #065f46; }
.extranet-status-pill[data-status="archived"]  { background: #e5e7eb; color: #6b7280; }

body.extranet-modal-open { overflow: hidden; }

/* =========================================================
   Menu kebab/actions générique (toolbar/header)
   ========================================================= */
.extranet-actions-menu { position: relative; display: inline-block; }
.extranet-actions-menu__trigger { display: inline-flex; align-items: center; gap: 6px; }
.extranet-actions-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 100;
}
.extranet-actions-menu__list[hidden] { display: none; }
.extranet-actions-menu__list li { margin: 0; padding: 0; list-style: none; }
.extranet-actions-menu__list a,
.extranet-actions-menu__list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  color: var(--main-fg);
  font-family: inherit;
}
.extranet-actions-menu__list a:hover,
.extranet-actions-menu__list button:hover { background: #f3f4f6; }
.extranet-actions-menu__list svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--main-muted); }
.extranet-actions-menu__separator {
  height: 1px;
  margin: 6px 0;
  background: #e5e7eb;
  padding: 0 !important;
}
.extranet-actions-menu__list li.is-danger a,
.extranet-actions-menu__list li.is-danger button { color: var(--gip-red, #d3424b); }
.extranet-actions-menu__list li.is-danger a:hover,
.extranet-actions-menu__list li.is-danger button:hover { background: #fef0f1; }
.extranet-actions-menu__list li.is-danger svg { color: var(--gip-red, #d3424b); }
/* Barre « brouillon » sur la fiche d'édition (E12) */
.extranet-draft-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px dashed #d5dae1;
  border-radius: 10px;
  background: #fafbfc;
  font-size: 13px;
  color: #4b5563;
}
/* Entrée informative non cliquable (ex. participations avant publication) */
.extranet-actions-menu__list li.extranet-actions-menu__item--disabled > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--main-muted, #6a727b);
  cursor: not-allowed;
  flex-wrap: wrap;
}
.extranet-actions-menu__list li.extranet-actions-menu__item--disabled small { font-size: 11px; color: var(--main-muted, #6a727b); }

/* =========================================================
   Form (création / édition d'actualité)
   ========================================================= */
.extranet-form__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px 32px;
  margin-bottom: 24px;
}
.extranet-form__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(227, 6, 19, 0.08);
  color: var(--gip-red);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
}
.extranet-form__back:hover { background: rgba(227, 6, 19, 0.14); }
.extranet-form__title {
  grid-column: 1 / -1;
  margin: 0;
}
.extranet-form__header-actions {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
}

.extranet-form__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
.extranet-form__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.extranet-form__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
}

.extranet-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.extranet-form__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--main-fg);
}
.extranet-form__input,
.extranet-form__field select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--gip-bleu-soft);
  font: inherit;
  font-size: 14px;
  color: var(--main-fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.extranet-form__input:focus,
.extranet-form__field select:focus {
  border-color: var(--accent-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}
.extranet-form__input--textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

/* ---- Bandeau demande de modification (côté modo dans l'edit) ---- */
.extranet-modification-banner {
  padding: 16px 18px;
  margin: 0 0 20px;
  background: rgba(180, 83, 9, 0.06);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 10px;
  color: #78350f;
}
.extranet-modification-banner__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.extranet-modification-banner__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(180, 83, 9, 0.15);
  color: #b45309;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.extranet-modification-banner__title { flex: 1; min-width: 0; }
.extranet-modification-banner__title strong {
  display: block;
  font-size: 14px;
  color: #78350f;
}
.extranet-modification-banner__title p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #92400e;
  line-height: 1.45;
}
.extranet-modification-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

.extranet-modification-banner__diff {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(180, 83, 9, 0.25);
}
.extranet-modification-banner__diff h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.extranet-modification-banner__diff dl {
  margin: 0;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  align-items: start;
}
.extranet-modification-banner__diff dt {
  font-size: 12px;
  font-weight: 600;
  color: #78350f;
  padding-top: 4px;
}
.extranet-modification-banner__diff dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.extranet-modification-banner__diff .diff-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}
.extranet-modification-banner__diff .diff-row > span:last-child,
.extranet-modification-banner__diff .diff-html {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.extranet-modification-banner__diff .diff-html { font-size: 13px; }
.extranet-modification-banner__diff .diff-html p { margin: 0 0 4px; }
.extranet-modification-banner__diff .diff-row--before {
  background: rgba(220, 38, 38, 0.07);
  color: #7f1d1d;
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, 0.4);
}
.extranet-modification-banner__diff .diff-row--after {
  background: rgba(22, 163, 74, 0.08);
  color: #14532d;
}
.extranet-modification-banner__diff .diff-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  text-decoration: none;
  align-self: flex-start;
  white-space: nowrap;
}

/* Responsive : diff en pile sur mobile */
@media (max-width: 768px) {
  .extranet-modification-banner__header { flex-direction: column; }
  .extranet-modification-banner__actions { width: 100%; justify-content: flex-end; }
  .extranet-modification-banner__diff dl { grid-template-columns: 1fr; }
  .extranet-modification-banner__diff dt { padding-top: 0; }
}

/* ---- Bandeau demande de suppression (côté modo dans l'edit) ---- */
.extranet-deletion-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 10px;
  color: #7f1d1d;
}
.extranet-deletion-banner__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.15);
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.extranet-deletion-banner__content {
  flex: 1;
  min-width: 0;
}
.extranet-deletion-banner__content strong {
  display: block;
  font-size: 14px;
  color: #7f1d1d;
}
.extranet-deletion-banner__content p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #991b1b;
  line-height: 1.4;
}
.extranet-deletion-banner__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
/* Variante "dépublication" : jaune/ambre, moins alarmant que le rouge delete */
.extranet-deletion-banner--unpublish {
  background: rgba(180, 83, 9, 0.06);
  border-color: rgba(180, 83, 9, 0.25);
  color: #78350f;
}
.extranet-deletion-banner--unpublish .extranet-deletion-banner__icon {
  background: rgba(180, 83, 9, 0.15);
  color: #b45309;
}
.extranet-deletion-banner--unpublish .extranet-deletion-banner__content strong { color: #78350f; }
.extranet-deletion-banner--unpublish .extranet-deletion-banner__content p { color: #92400e; }

/* ---- Teaser avec indicateur de surplus (crop SEO 160 chars) ---- */
.extranet-form__teaser-wrap {
  position: relative;
}
.extranet-form__teaser-wrap .extranet-form__input--teaser {
  position: relative;
  z-index: 1;
  background: transparent;
}
.extranet-form__teaser-wrap:focus-within .extranet-form__input--teaser {
  background: transparent;
}
.extranet-form__teaser-overlay {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--gip-bleu-soft);
  z-index: 0;
  transition: background 0.15s;
}
.extranet-form__teaser-wrap:focus-within .extranet-form__teaser-overlay {
  background: #fff;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}
.extranet-form__teaser-overlay .is-overflow {
  background: rgba(220, 38, 38, 0.18);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25);
}
.extranet-form__teaser-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--main-muted);
}
.extranet-form__teaser-counter {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  flex-shrink: 0;
}
.extranet-form__teaser-counter.is-over {
  color: #b91c1c;
  font-weight: 700;
}
.extranet-form__teaser-hint {
  text-align: right;
  line-height: 1.4;
}
.extranet-form__input[readonly],
.extranet-form__input:disabled,
.extranet-form__field select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.extranet-form__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.extranet-form__input-wrap .extranet-form__input { padding-left: 44px; }
.extranet-form__icon {
  position: absolute;
  left: 14px;
  display: inline-flex;
  color: var(--main-muted);
  pointer-events: none;
}
.extranet-form__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--main-muted);
}

/* =========================================================
   Autocomplete adresse (Base Adresse Nationale)
   ========================================================= */
.extranet-form__autocomplete { position: relative; }
.extranet-form__autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--topbar-border);
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.extranet-form__autocomplete-list[hidden] { display: none; }
.extranet-form__autocomplete-item {
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 4px;
}
.extranet-form__autocomplete-item:hover,
.extranet-form__autocomplete-item.is-active {
  background: var(--gip-bleu-soft);
}
.extranet-form__autocomplete-item__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--main-fg);
  line-height: 1.3;
}
.extranet-form__autocomplete-item__context {
  font-size: 11px;
  color: var(--main-muted);
  line-height: 1.3;
}
.extranet-form__notice {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
}
.extranet-form__notice--info {
  background: rgba(10, 102, 194, 0.08);
  color: #0a66c2;
  border: 1px solid rgba(10, 102, 194, 0.2);
}

/* Chips (catégories / tags) */
.extranet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Chip "Proposer une catégorie" : même format que les .extranet-chip
   standards mais avec une variante visuelle pointillée bleu accent. */
.extranet-chip.extranet-chip--propose {
  border: 1px dashed rgba(31, 111, 235, 0.5);
  background: transparent;
  color: var(--accent-blue);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  transition: background 120ms ease, border-color 120ms ease;
}
.extranet-chip.extranet-chip--propose:hover {
  background: rgba(31, 111, 235, 0.08);
  border-color: var(--accent-blue);
}
.extranet-chip.extranet-chip--propose .extranet-chip__check {
  background: rgba(31, 111, 235, 0.12);
  color: var(--accent-blue);
  border: none;
}
.extranet-chip.extranet-chip--propose .extranet-chip__label { color: inherit; }

/* Bandeau "commentaire de l'auteur" affiché au modo en tête de l'edit */
.extranet-comment-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 20px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 10px;
  color: #713f12;
}
.extranet-comment-banner__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.18);
  color: #a16207;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.extranet-comment-banner__content { flex: 1; min-width: 0; }
.extranet-comment-banner__content strong {
  display: block;
  font-size: 13px;
  color: #713f12;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.extranet-comment-banner__content p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #422006;
  line-height: 1.5;
  white-space: pre-wrap;
}
.extranet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gip-bleu-soft);
  font-size: 13px;
  color: var(--main-fg);
  cursor: pointer;
  transition: background 0.15s;
}
.extranet-chip input { display: none; }
.extranet-chip__check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: #fff;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.extranet-chip:hover { background: var(--gip-bleu); }
.extranet-chip:has(input:checked) {
  background: rgba(16, 163, 74, 0.12);
}
.extranet-chip:has(input:checked) .extranet-chip__check {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #fff;
}

/* Drop zone (right side panel) */
.extranet-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 24px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  color: var(--main-muted);
}
.extranet-dropzone svg { color: var(--main-muted); }
.extranet-dropzone__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--main-fg);
}
.extranet-dropzone__hint {
  font-size: 12px;
  color: var(--main-muted);
  font-style: italic;
}
.extranet-dropzone--alt {
  min-height: 120px;
}
.extranet-dropzone__files {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--main-fg);
}
.extranet-dropzone {
  position: relative;    /* indispensable pour confiner l'input absolute */
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.extranet-dropzone:hover {
  border-color: var(--accent-blue);
  background: rgba(31, 111, 235, 0.04);
}
.extranet-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.extranet-dropzone__chosen:not(:empty) {
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent-blue);
  font-weight: 600;
}

.extranet-existing-files {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.extranet-existing-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  background: var(--gip-bleu-soft);
  border-radius: 8px;
  transition: opacity 0.15s, background 0.15s;
}
.extranet-existing-files img {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  transition: filter 0.15s;
}
.extranet-existing-files__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extranet-existing-files__remove {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
/* Checkbox visuellement invisible mais restant dans le DOM et soumis avec le form.
   `display:none` empêchait certains clics de propager correctement et la SVG
   interceptait l'event. */
.extranet-existing-files__remove input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.extranet-existing-files__remove-btn svg { pointer-events: none; }
.extranet-existing-files__remove-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--main-muted);
  border: 1px solid var(--topbar-border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.extranet-existing-files__remove:hover .extranet-existing-files__remove-btn {
  background: var(--gip-red);
  color: #fff;
  border-color: var(--gip-red);
}
/* État "marqué à supprimer" : barré + grisé.
   Class .is-marked-for-removal posée par JS (compat large : Firefox<121,
   Safari<15.4 ne supportent pas :has()). On garde :has() comme fallback. */
.extranet-existing-files li.is-marked-for-removal,
.extranet-existing-files li:has(input:checked) {
  background: rgba(227, 6, 19, 0.08);
}
.extranet-existing-files li.is-marked-for-removal img,
.extranet-existing-files li:has(input:checked) img {
  filter: grayscale(1);
  opacity: 0.5;
}
.extranet-existing-files li.is-marked-for-removal .extranet-existing-files__name,
.extranet-existing-files li:has(input:checked) .extranet-existing-files__name {
  text-decoration: line-through;
  color: var(--main-muted);
}
.extranet-existing-files li.is-marked-for-removal .extranet-existing-files__remove-btn,
.extranet-existing-files li:has(input:checked) .extranet-existing-files__remove-btn {
  background: var(--gip-red);
  color: #fff;
  border-color: var(--gip-red);
}

/* Image en attente de retrait par un modérateur : encadré rouge + badge
   "En attente de retrait". Diffère du :checked classique (qui marque un
   retrait demandé pendant la session courante). */
.extranet-existing-files li.is-pending-removal {
  border: 2px solid var(--gip-red);
  background: rgba(227, 6, 19, 0.06);
  position: relative;
}
.extranet-existing-files li.is-pending-removal img {
  filter: grayscale(0.6);
  opacity: 0.7;
}
.extranet-existing-files__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: var(--gip-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}

@media (max-width: 1024px) {
  .extranet-form__body { grid-template-columns: 1fr; }
  .extranet-form__side { position: static; }
}

/* =========================================================
   Login (page d'accueil extranet, sans navigation)
   ========================================================= */
.extranet-login {
  min-height: 100vh;
  background: var(--topbar-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 40px;
}
.extranet-login__inner {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.extranet-login__brand {
  display: flex;
  justify-content: center;
}
.extranet-login__logo {
  display: inline-block;
  line-height: 0;
}
.extranet-login__logo img {
  display: block;
  height: 80px;
  width: auto;
}

.login-card {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.login-card__header {
  background: var(--topbar-bg);
  padding: 18px 24px;
  border-bottom: 1px solid var(--topbar-border);
  text-align: center;
}
.login-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--main-fg);
}
.login-card__body {
  padding: 32px 32px 36px;
}

.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--main-fg);
}
.login-field__input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
  color: var(--main-fg);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-field__input::placeholder { color: #9ca3af; }
.login-field__input:focus {
  border-color: var(--gip-red);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}

.login-actions { display: flex; justify-content: center; margin-top: 8px; }
.login-button {
  height: 44px;
  padding: 0 28px;
  border: none;
  border-radius: 8px;
  background: var(--gip-red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.login-button:hover { background: var(--gip-red-dark); }

.login-forgot {
  margin: 0;
  font-size: 14px;
  color: var(--main-fg);
  text-align: center;
}
.login-forgot--inline {
  margin-top: 16px;
}
.login-forgot a {
  color: var(--main-fg);
  text-decoration: none;
}
.login-forgot a:hover { text-decoration: underline; }

.login-field--check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.login-field--check label { font-weight: 500; font-size: 14px; }

.login-message {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}
.login-message--error {
  background: rgba(227, 6, 19, 0.1);
  color: var(--gip-red-dark);
  border: 1px solid rgba(227, 6, 19, 0.25);
}
.login-message--info {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #bae6fd;
}

.login-button--secondary {
  background: #6b7280;
}
.login-button--secondary:hover { background: #4b5563; }

/* =========================================================
   Flash messages — rendus en toasts top-right
   v14 ListRenderer émet : <ul class="typo3-messages">
                              <li class="alert alert-ok|alert-notice|...">
                                <h4 class="alert-title">…</h4>
                                <p class="alert-message">…</p>
                              </li>
                           </ul>
   ========================================================= */

/* Footer du dropdown notif : lien vers la page Centre des notifications */
.extranet-notifications__footer {
  border-top: 1px solid var(--topbar-border);
  padding: 10px 16px;
  text-align: center;
  background: var(--gip-bleu-soft);
}
.extranet-notifications__see-all {
  display: inline-block;
  color: var(--accent-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.extranet-notifications__see-all:hover {
  background: rgba(31, 111, 235, 0.08);
}

.typo3-messages {
  position: fixed;
  bottom: 24px;
  right: 24px;
  top: auto;
  z-index: 1100;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 380px;
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
}
/* Card plein contraste type macOS — fond sombre, gros titre, sous-texte gris. */
.typo3-messages .alert {
  pointer-events: auto;
  position: relative;
  margin: 0;
  padding: 14px 40px 14px 44px;
  background: #1a1a1a;
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: extranet-toast-in 0.32s cubic-bezier(0.21, 1.02, 0.73, 1);
  overflow: hidden;
}
/* Pastille icône ronde discrète, alignée verticalement avec la 1re ligne de texte. */
.typo3-messages .alert::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08) center/11px no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.typo3-messages .alert-success::before,
.typo3-messages .alert-ok::before {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.typo3-messages .alert-info::before,
.typo3-messages .alert-notice::before {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
.typo3-messages .alert-warning::before {
  background-color: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fde047' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.typo3-messages .alert-danger::before,
.typo3-messages .alert-error::before {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.typo3-messages .alert-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.typo3-messages .alert-message {
  margin: 0;
  font-size: 12px;
  color: rgba(245, 245, 245, 0.65);
  line-height: 1.5;
}
.typo3-messages .alert__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 245, 245, 0.6);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.typo3-messages .alert__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.typo3-messages .alert.is-dismissing {
  animation: extranet-toast-out 0.35s ease-in forwards;
}

@keyframes extranet-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes extranet-toast-out {
  0%   { transform: translateY(0);    opacity: 1; max-height: 200px; padding-top: 16px; padding-bottom: 16px; margin-top: 10px; }
  60%  { transform: translateY(20px); opacity: 0; max-height: 200px; }
  100% { transform: translateY(20px); opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; }
}

/* ============================================================
   Responsive
   - Desktop  (>1024) : layout 3 colonnes (sidebar icônes + subnav + main)
   - Tablette (≤1024) : subnav réduite, paddings allégés
   - Mobile   (≤768)  : sidebar et subnav passent en rails horizontaux
                       scrollables (swiper natif via overflow-x + scroll-snap)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --subnav-width: 260px; }
  .extranet-main { padding: 24px; }
  .extranet-topbar__search { max-width: 240px; }
}

@media (max-width: 768px) {
  :root {
    --topbar-height: 56px;
    --sidebar-width: 100%;
    --subnav-width: 100%;
  }

  /* Le body devient une pile verticale : topbar / sidebar (rail h) / subnav (rail h) / main */
  .extranet-body { flex-direction: column; }

  /* --- Topbar mobile : compacte, sans champ de recherche --- */
  .extranet-topbar { padding: 0 12px; gap: 8px; }
  .extranet-topbar__search { display: none; }
  /* Le brand héritait de la largeur du sidebar (var = 100% en mobile) → on
     repasse à une largeur auto pour ne pas pousser le reste. */
  .extranet-topbar__brand { width: auto; }
  .extranet-topbar__brand .extranet-topbar__logo img { height: 32px; }
  .extranet-topbar__icon { width: 36px; height: 36px; }
  .extranet-topbar__actions { margin-left: auto; }

  /* --- Sidebar = rail horizontal scrollable (niveau 1) --- */
  .extranet-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid var(--sidebar-border);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--sidebar-bg);
  }
  .extranet-sidebar::-webkit-scrollbar { display: none; }
  .extranet-sidebar__list {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    padding: 4px 8px;
    gap: 4px;
  }
  .extranet-sidebar__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 76px;
  }
  .extranet-sidebar__link {
    flex-direction: column;
    padding: 8px 10px;
    gap: 2px;
    font-size: 11px;
    white-space: nowrap;
  }
  .extranet-sidebar__icon { width: 28px; height: 28px; }
  /* L'indicateur d'actif desktop (triangle à droite) devient un trait en bas */
  .extranet-sidebar__item.is-active::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 20%;
    transform: none;
    width: 60%;
    height: 3px;
    border: none;
    border-radius: 2px 2px 0 0;
    background: var(--gip-bleu);
  }
  /* Le bloc utilisateur du sidebar n'a plus sa place en rail horizontal : on
     le masque (l'avatar reste accessible via le topbar). */
  .extranet-sidebar__user { display: none; }

  /* --- SubNav = rail horizontal scrollable (niveau 2) --- */
  .extranet-subnav {
    width: 100%;
    padding: 8px 12px;
    border-top-left-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .extranet-subnav::-webkit-scrollbar { display: none; }
  /* Le toggle qui replie/déplie la subnav n'a pas de sens sur mobile */
  .extranet-subnav__toggle { display: none; }
  .extranet-subnav__group {
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin: 0;
  }
  .extranet-subnav__group-link {
    margin: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
  }
  .extranet-subnav__group.is-active .extranet-subnav__group-link {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  .extranet-subnav__group-icon {
    width: 24px;
    height: 24px;
    padding: 3px;
  }
  .extranet-subnav__group-title {
    font-size: 12px;
    font-weight: 600;
  }
  /* Les sous-listes (3e niveau) ne tiennent pas dans un rail h : on les masque
     sur mobile, l'utilisateur clique le pill pour accéder à la page parent. */
  .extranet-subnav__list { display: none; }

  /* --- Main : padding réduit + radius supprimé --- */
  .extranet-main {
    padding: 16px;
    border-radius: 0;
  }

  /* --- Notifications : ouverture fullscreen sur mobile --- */
  .extranet-notifications {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
    border: none;
    z-index: 1000;
    animation: extranet-notif-slide-in 0.22s ease-out;
  }
  .extranet-notifications__header {
    padding: 16px 16px;
    background: #fff;
    border-bottom: 1px solid var(--topbar-border);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .extranet-notifications__header h2 { font-size: 17px; }
  .extranet-notifications__list { padding: 0; }
  .extranet-notifications__item {
    padding: 14px 16px;
    gap: 14px;
  }
  .extranet-notifications__icon { width: 36px; height: 36px; }
  .extranet-notifications__subject { font-size: 14px; }
  .extranet-notifications__body { font-size: 13px; }
  /* Bouton ✕ d'archivage : toujours visible sur mobile (pas de hover) */
  .extranet-notifications__archive {
    opacity: 1;
    width: 28px;
    height: 28px;
  }
  /* Bouton "fermer" injecté en JS pour quitter le fullscreen */
  .extranet-notifications__close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--main-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .extranet-notifications__close:hover { background: rgba(0,0,0,0.06); color: var(--main-fg); }

  /* --- News list items en CARDS --- */
  .extranet-news-list { gap: 12px; }
  .extranet-news-list__item {
    /* Casse la grille desktop : retour à un layout en flex-column */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .extranet-news-list__item.has-pending {
    border-color: rgba(180, 83, 9, 0.3);
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.04) 0%, #fff 50%);
  }
  /* Vignette : grande au-dessus du contenu, format 16:9 */
  .extranet-news-list__thumb {
    width: 100%;
    height: 140px;
    border-radius: 10px;
  }
  .extranet-news-list__thumb-placeholder { font-size: 32px; }
  /* Titre : 2 lignes max, plus de troncature à 32ch */
  .extranet-news-list__title {
    max-width: none;
    white-space: normal;
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0;
    padding-right: 36px; /* espace pour le menu en absolute */
  }
  /* Bandeau meta : statut + région + date alignés en wrap */
  .extranet-news-list__status-cell,
  .extranet-news-list__region,
  .extranet-news-list__date {
    font-size: 12px;
    white-space: normal;
  }
  /* Une ligne meta unifiée */
  .extranet-news-list__region,
  .extranet-news-list__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .extranet-news-list__status-cell { display: inline-flex; }
  /* Menu d'actions positionné en haut à droite de la card */
  .extranet-news-list__actions {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .extranet-news-list__menu {
    /* Dropdown moins large mais lisible */
    right: 0;
    left: auto;
    min-width: 200px;
  }
  /* Sur mobile, la loupiote sur le badge statut reste visible — elle hérite
     du style desktop. Pas de styling spécifique nécessaire. */
}

@keyframes extranet-notif-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* Empêche le scroll de l'arrière-plan quand le panneau notif est ouvert en fullscreen mobile */
@media (max-width: 768px) {
  body.extranet-notifications-open { overflow: hidden; }
}

@media (max-width: 480px) {
  .extranet-main { padding: 12px; }
  .extranet-sidebar__item { min-width: 68px; }
  .extranet-sidebar__link { padding: 6px 8px; }
  .extranet-sidebar__icon { width: 24px; height: 24px; }
  .extranet-sidebar__link span:last-child { font-size: 10px; }
  /* Toast en bas plein écran sur très petit */
  .typo3-messages { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
}

/* =========================================================
   Centre des notifications (plugin "Notifications")
   ========================================================= */
.notifications-page__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notifications-page__item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 14px 20px;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: background 0.15s;
}
.notifications-page__item.is-unread {
  background: rgba(31, 111, 235, 0.04);
  border-color: rgba(31, 111, 235, 0.15);
}
.notifications-page__item.is-unread .notifications-page__subject { font-weight: 700; }
.notifications-page__item.is-archived { opacity: 0.65; }
.notifications-page__type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--main-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  align-self: start;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 160px;
}
.notifications-page__content { min-width: 0; }
.notifications-page__subject {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--main-fg);
}
.notifications-page__body {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--main-muted);
  line-height: 1.5;
}
.notifications-page__date {
  font-size: 11px;
  color: var(--main-muted);
}
.notifications-page__empty {
  margin: 32px 0;
  padding: 32px;
  text-align: center;
  color: var(--main-muted);
  background: var(--gip-bleu-soft);
  border-radius: 12px;
}

@media (max-width: 768px) {
  .notifications-page__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .notifications-page__type { justify-self: start; }
}

/* ============================================================
   Tableau de bord (page /mon-tableau-de-bord)
   ============================================================ */
.extranet-dashboard__title {
  color: var(--gip-red, #ed1c24);
}

.extranet-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.extranet-dashboard__widget {
  /* Retour recette (Conseil, Bureau, Rockwool — sept. 2026) : chaque widget
     porte une couleur d'identification (bandeau de titre teinté + liseré) et
     un cadre plus marqué, pour distinguer les catégories d'un coup d'œil. */
  --widget-accent: #6a727b;
  --widget-accent-soft: #f3f4f6;
  background: #fff;
  border: 1px solid #d5dae1;
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.extranet-dashboard__widget-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -20px -24px 0;
  padding: 12px 24px;
  background: var(--widget-accent-soft);
  border-bottom: 2px solid var(--widget-accent);
}

.extranet-dashboard__widget-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  color: var(--widget-accent);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Palette par widget (clé = data-widget, cf. DashboardWidgetService::getWidgetRegistry) */
.extranet-dashboard__widget[data-widget="shortcuts"]     { --widget-accent: #c8102e; --widget-accent-soft: #fdecef; }
.extranet-dashboard__widget[data-widget="agenda"]        { --widget-accent: #0f766e; --widget-accent-soft: #e6f4f2; }
.extranet-dashboard__widget[data-widget="notifications"] { --widget-accent: #d97706; --widget-accent-soft: #fef3e2; }
.extranet-dashboard__widget[data-widget="drafts"]        { --widget-accent: #7c3aed; --widget-accent-soft: #f1ecfe; }
.extranet-dashboard__widget[data-widget="reservations"]  { --widget-accent: #059669; --widget-accent-soft: #e6f7f1; }
.extranet-dashboard__widget[data-widget="contacts"]      { --widget-accent: #0284c7; --widget-accent-soft: #e5f3fb; }
.extranet-dashboard__widget[data-widget="evenements"]    { --widget-accent: #2563eb; --widget-accent-soft: #e9f0fe; }
.extranet-dashboard__widget[data-widget="reunions"]      { --widget-accent: #6d28d9; --widget-accent-soft: #efe9fd; }
.extranet-dashboard__widget[data-widget="actualites"]    { --widget-accent: #db2777; --widget-accent-soft: #fce8f1; }
.extranet-dashboard__widget[data-widget="chantiers"]     { --widget-accent: #ea580c; --widget-accent-soft: #fdeee4; }
.extranet-dashboard__widget[data-widget="favorites"]     { --widget-accent: #ca8a04; --widget-accent-soft: #fbf5df; }
.extranet-dashboard__widget[data-widget="recentDocs"]    { --widget-accent: #475569; --widget-accent-soft: #eef1f5; }

/* Le widget agenda a son propre en-tête (.extranet-agenda__header) : même traitement. */
.extranet-dashboard__widget--agenda .extranet-agenda__header {
  /* le widget agenda a un padding réduit (16px, cf. plus bas) */
  margin: -16px -16px 0;
  padding: 12px 16px;
  background: var(--widget-accent-soft);
  border-bottom: 2px solid var(--widget-accent);
}
.extranet-dashboard__widget--agenda .extranet-agenda__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  color: var(--widget-accent);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.extranet-dashboard__widget-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--main-fg, #1a1f24);
}

.extranet-dashboard__widget-count {
  color: #6a727b;
  font-weight: 400;
  margin-left: 2px;
}

.extranet-dashboard__widget-config {
  width: 28px;
  height: 28px;
  border: 1px solid #e3e6ea;
  background: #fafbfc;
  border-radius: 50%;
  color: #6a727b;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

.extranet-dashboard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.extranet-dashboard__list-item {
  border-top: 1px solid #f0f1f3;
}

.extranet-dashboard__list-item:first-child { border-top: 0; }

.extranet-dashboard__list-link,
.extranet-dashboard__list-item > span {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 10px 4px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}

.extranet-dashboard__list-link:hover {
  background: rgba(27, 66, 121, 0.04);
  border-radius: 6px;
}

.extranet-dashboard__item-title {
  font-weight: 500;
  color: var(--main-fg, #1a1f24);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.extranet-dashboard__item-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555c66;
  white-space: nowrap;
}

.extranet-dashboard__item-meta svg {
  flex: 0 0 14px;
  opacity: 0.7;
}

.extranet-dashboard__item-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.extranet-dashboard__empty {
  margin: 12px 0 0;
  padding: 20px;
  text-align: center;
  color: #6a727b;
  background: #fafbfc;
  border: 1px dashed #e3e6ea;
  border-radius: 10px;
  font-size: 14px;
}

.extranet-dashboard__add-widget {
  margin-top: 4px;
  padding: 16px 24px;
  background: transparent;
  border: 2px dashed #c8cdd3;
  border-radius: 14px;
  color: #6a727b;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.extranet-dashboard__add-widget:hover {
  border-color: var(--gip-blue, #1b4279);
  color: var(--gip-blue, #1b4279);
}

.extranet-dashboard__add-widget[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Grille unique de widgets : 3 cols sur >=1180 px, 2 sur >=768 px, 1 sinon.
 * Tous les widgets prennent une cellule, y compris l'agenda et les raccourcis.
 * Ces deux derniers ont leur propre CSS de mise en page interne adaptée à
 * cette contrainte de largeur (cf. plus bas). */
.extranet-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* Mode masonry : activé par JS (classe ajoutée au runtime). Utilise des
 * micro-rows de 8 px et un row-gap nul ; chaque cellule reçoit dynamiquement
 * un `grid-row: span N` calculé d'après sa hauteur réelle + un gap. Ça donne
 * un empilement « Pinterest » qui élimine les trous, tout en restant
 * compatible partout (le masonry natif `grid-template-rows: masonry` n'est
 * pas encore largement déployé en 2026). Fallback sans JS = grille rigide. */
.extranet-dashboard__grid--masonry {
  grid-auto-rows: 8px;
  row-gap: 0;
  column-gap: 16px;
  align-items: stretch;
}

/* Le gutter vertical entre widgets est obtenu en gonflant artificiellement le
 * span de chaque cellule (`Math.ceil((h + GAP) / ROW)` côté JS, avec GAP=16).
 * On ne peut PAS s'appuyer sur margin-bottom : un margin sur un grid item ne
 * crée pas d'espace entre pistes (le track suivant se place selon les rows
 * grid, pas l'extent du margin). */

/* Wrapper de chaque widget — porte le drag handle, le bouton supprimer,
 * et expose data-widget-key pour le JS de drag&drop. Le partial interne
 * (la <section.extranet-dashboard__widget>) est inchangé. */
.extranet-dashboard__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: grab;
}

.extranet-dashboard__cell.is-dragging {
  opacity: 0.35;
  cursor: grabbing;
}

.extranet-dashboard__cell.is-drop-target {
  outline: 2px dashed var(--gip-blue, #1b4279);
  outline-offset: 3px;
  border-radius: 16px;
}

.extranet-dashboard__cell-actions {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.extranet-dashboard__cell:hover .extranet-dashboard__cell-actions,
.extranet-dashboard__cell:focus-within .extranet-dashboard__cell-actions {
  opacity: 1;
}

.extranet-dashboard__cell-handle,
.extranet-dashboard__cell-remove {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 50%;
  color: #6a727b;
  cursor: pointer;
  padding: 0;
}

.extranet-dashboard__cell-handle {
  cursor: grab;
  pointer-events: none; /* le drag est géré sur la cellule entière */
}

.extranet-dashboard__cell-remove:hover {
  border-color: var(--gip-red, #ed1c24);
  color: var(--gip-red, #ed1c24);
}

.extranet-dashboard__cell-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Modal d'ajout — pattern aligné sur le drawer d'aide (Help.html). */
.extranet-dashboard__modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
}

.extranet-dashboard__modal[hidden] { display: none; }

.extranet-dashboard__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 30, 0.45);
  animation: dashboardFadeIn 0.15s ease;
}

.extranet-dashboard__modal-panel {
  position: relative;
  max-width: 560px;
  width: calc(100% - 32px);
  margin: 8vh auto 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  animation: dashboardSlideUp 0.2s ease;
}

@keyframes dashboardFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dashboardSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.extranet-dashboard__modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #eef0f3;
}

.extranet-dashboard__modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--main-fg, #1a1f24);
  flex: 1;
}

.extranet-dashboard__modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e6ea;
  background: #fafbfc;
  border-radius: 50%;
  color: #6a727b;
  cursor: pointer;
}

.extranet-dashboard__modal-close:hover { color: var(--main-fg); }

.extranet-dashboard__modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 22px;
}

.extranet-dashboard__modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.extranet-dashboard__modal-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: #fafbfc;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.extranet-dashboard__modal-item:hover,
.extranet-dashboard__modal-item:focus-visible {
  border-color: var(--gip-blue, #1b4279);
  background: #fff;
  outline: none;
}

.extranet-dashboard__modal-item-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--main-fg, #1a1f24);
}

.extranet-dashboard__modal-item-desc {
  font-size: 13px;
  color: #6a727b;
}

.extranet-dashboard__modal-empty {
  margin: 24px 0;
  text-align: center;
  color: #6a727b;
  font-size: 14px;
}

.extranet-dashboard__modal-footer {
  padding: 14px 22px;
  border-top: 1px solid #eef0f3;
  display: flex;
  justify-content: flex-end;
}

.extranet-dashboard__modal-reset {
  background: transparent;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #6a727b;
  cursor: pointer;
}

.extranet-dashboard__modal-reset:hover {
  border-color: var(--gip-red, #ed1c24);
  color: var(--gip-red, #ed1c24);
}

/* Widget Agenda compact (1 cellule de grille) — le calendrier rendu par
 * Agenda/Calendar utilise déjà la classe .extranet-agenda--compact (lettres
 * d'une seule lettre, cellules réduites). On donne juste un padding cohérent
 * avec les autres widgets. PAS d'overflow:hidden ni de min-width:0 : ça
 * écrase le calendrier qui a besoin de ses 7 colonnes lisibles. */
.extranet-dashboard__widget--agenda {
  padding: 16px;
}

/* En mode compact (widget dashboard), s'assure que les cellules de jour
 * restent carrées et lisibles même en colonne étroite (~300 px). */
.extranet-dashboard__widget--agenda .extranet-agenda__cell {
  min-height: 36px;
  padding: 4px;
}

.extranet-dashboard__widget--agenda .extranet-agenda__day-num {
  font-size: 12px;
}

.extranet-dashboard__widget--agenda .extranet-agenda__event-pill {
  font-size: 10px;
  padding: 1px 4px;
  line-height: 1.3;
}

.extranet-dashboard__widget-link {
  margin-left: auto;
  color: var(--gip-blue, #1b4279);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}

.extranet-dashboard__widget-link:hover { text-decoration: underline; }

.extranet-dashboard__widget-lede {
  margin: 0;
  padding: 8px 12px;
  background: #fafbfc;
  border-radius: 8px;
  font-size: 13px;
  color: #555c66;
}

/* Variante compacte (aside) — densité plus forte, sans la grille 4-cols */
.extranet-dashboard__widget--compact {
  padding: 16px 18px;
}

.extranet-dashboard__list--compact .extranet-dashboard__list-item {
  border-top-color: #f4f5f7;
}

.extranet-dashboard__empty--compact {
  margin: 4px 0 0;
  padding: 12px;
  font-size: 13px;
}

/* Notifications compactes (aside) */
.extranet-dashboard__notif {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

.extranet-dashboard__notif:hover {
  background: rgba(27, 66, 121, 0.04);
  border-radius: 6px;
}

.extranet-dashboard__notif-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gip-red, #ed1c24);
}

.extranet-dashboard__notif-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--main-fg, #1a1f24);
  font-weight: 500;
}

.extranet-dashboard__notif-date {
  font-size: 12px;
  color: #6a727b;
  white-space: nowrap;
}

/* Raccourcis rapides — tuiles d'action */
.extranet-dashboard__widget--shortcuts {
  background: linear-gradient(135deg, #fafbfc 0%, #fff 100%);
}

.extranet-dashboard__shortcuts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

/* Mode empilé : utilisé quand le widget Raccourcis est dans une cellule
 * étroite (1 colonne de la grille dashboard). Le bouton devient horizontal :
 * icône à gauche, label à droite — économise la hauteur. */
.extranet-dashboard__shortcuts--stack {
  grid-template-columns: 1fr;
}

.extranet-dashboard__shortcuts--stack .extranet-dashboard__shortcut-link {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  min-height: auto;
  padding: 12px 14px;
  gap: 12px;
}

.extranet-dashboard__shortcuts--stack .extranet-dashboard__shortcut-icon svg {
  width: 18px;
  height: 18px;
}

.extranet-dashboard__shortcut-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  color: var(--main-fg, #1a1f24);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  min-height: 88px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.extranet-dashboard__shortcut-link:hover {
  border-color: var(--gip-blue, #1b4279);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(27, 66, 121, 0.06);
}

.extranet-dashboard__shortcut-icon {
  color: var(--gip-blue, #1b4279);
  display: inline-flex;
}

.extranet-dashboard__shortcut-label {
  line-height: 1.25;
}

/* Breakpoints — grille uniforme, tous les widgets ont la même largeur de cellule. */
@media (max-width: 1180px) {
  .extranet-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .extranet-dashboard__grid {
    grid-template-columns: 1fr;
  }
  .extranet-dashboard__list-link,
  .extranet-dashboard__list-item > span {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   Page « Gérer les inscrits » / « Voir les inscriptions »
   ============================================================ */
.extranet-reservations {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.extranet-reservations__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: #555c66;
}

.extranet-reservations__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.extranet-reservations__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
}

.extranet-reservations__stat.is-pending  { border-color: #f0c14b; background: #fff8e6; }
.extranet-reservations__stat.is-success  { border-color: #15803d; background: #f0fdf4; }
.extranet-reservations__stat.is-danger   { border-color: #d3424b; background: #fef0f1; }

.extranet-reservations__stat-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--main-fg);
}

.extranet-reservations__stat-label {
  font-size: 13px;
  color: #555c66;
}

.extranet-reservations__table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
}

.extranet-reservations__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.extranet-reservations__table th,
.extranet-reservations__table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #f0f1f3;
}

.extranet-reservations__table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6a727b;
  background: #fafbfc;
}

.extranet-reservations__table tbody tr.is-status-1 { background: rgba(22, 163, 74, 0.04); }
.extranet-reservations__table tbody tr.is-status-2 { background: rgba(227, 6, 19, 0.04); }
.extranet-reservations__table tbody tr:last-child td { border-bottom: 0; }

.extranet-reservations__sub {
  font-size: 12px;
  color: #6a727b;
}

.extranet-reservations__actions {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
}

.extranet-reservations__actions .extranet-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.extranet-reservations__empty {
  padding: 32px;
  text-align: center;
  color: #6a727b;
  background: #fff;
  border: 1px dashed #e3e6ea;
  border-radius: 12px;
}

.extranet-btn--success {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}
.extranet-btn--success:hover { background: #15803d; }

@media (max-width: 768px) {
  .extranet-reservations__stats { grid-template-columns: repeat(2, 1fr); }
  .extranet-reservations__table thead { display: none; }
  .extranet-reservations__table,
  .extranet-reservations__table tbody,
  .extranet-reservations__table tr,
  .extranet-reservations__table td { display: block; width: 100%; }
  .extranet-reservations__table tr { padding: 12px 16px; border-bottom: 1px solid #f0f1f3; }
  .extranet-reservations__table td {
    padding: 4px 0;
    border-bottom: 0;
  }
  .extranet-reservations__table td::before {
    content: attr(data-label) " · ";
    font-weight: 600;
    color: #6a727b;
  }
  .extranet-reservations__actions { flex-wrap: wrap; padding-top: 8px; }
}

/* ============================================================
   Sections du formulaire évènement (fieldset)
   ============================================================ */
.extranet-form__section {
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  padding: 20px 24px 24px;
  margin: 0 0 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.extranet-form__section + .extranet-form__section {
  margin-top: 0;
}

.extranet-form__section-title {
  padding: 0 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gip-bleu, #1b4279);
  background: #fff;
}

.extranet-form__section-hint {
  margin: -8px 0 0;
  font-size: 13px;
  color: #6a727b;
}

.extranet-form__section .extranet-form__field {
  margin: 0; /* les fieldset gèrent l'espacement via gap */
}

/* ============================================================
   Repeater (Programme + Infos pratiques évènement)
   ============================================================ */
.extranet-form__field--repeater {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.extranet-repeater {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: repeater;
}

.extranet-repeater__item {
  position: relative;
  padding: 16px 16px 16px 44px;
  background: #fafbfc;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.extranet-repeater__item::before {
  counter-increment: repeater;
  content: counter(repeater);
  position: absolute;
  left: 12px;
  top: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #b3bac3;
  border-radius: 50%;
}

.extranet-repeater__row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.extranet-repeater__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.extranet-repeater__field--time { flex: 0 0 110px; }
.extranet-repeater__field--title { flex: 1; }

.extranet-repeater__label {
  font-size: 12px;
  font-weight: 500;
  color: #555c66;
}

.extranet-repeater__remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e6ea;
  background: #fff;
  border-radius: 50%;
  color: #d3424b;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 2px;
}

.extranet-repeater__remove:hover {
  background: #fef0f1;
  border-color: #d3424b;
}

@media (max-width: 640px) {
  .extranet-repeater__row { flex-wrap: wrap; }
  .extranet-repeater__field--time { flex: 1 1 100%; }
  .extranet-repeater__field--title { flex: 1 1 calc(100% - 44px); }
}

/* =========================================================
   Demandes de contact — bouton "Répondre" en listing
   ========================================================= */
.extranet-news-list__reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 111, 235, 0.1);
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.extranet-news-list__reply:hover {
  background: var(--accent-blue);
  color: #fff;
  transform: translateY(-1px);
}
.extranet-news-list__reply svg {
  width: 13px;
  height: 13px;
}

/* =========================================================
   Demandes de contact — vue "détail"
   ========================================================= */
.contact-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}
.contact-detail__main,
.contact-detail__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-detail__card {
  background: #fff;
  border: 1px solid var(--topbar-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.contact-detail__card-title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--main-muted);
}

.contact-detail__identity {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact-detail__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gip-red), var(--gip-red-dark));
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.contact-detail__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--main-fg);
}
.contact-detail__sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--main-muted);
}

.contact-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}
.contact-detail__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.contact-detail__field--full { grid-column: 1 / -1; }
.contact-detail__field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--main-muted);
}
.contact-detail__field-value {
  margin: 0;
  font-size: 14px;
  color: var(--main-fg);
  word-break: break-word;
}
.contact-detail__field-value a {
  color: var(--accent-blue);
  text-decoration: none;
}
.contact-detail__field-value a:hover { text-decoration: underline; }
.contact-detail__field-value em {
  color: #9ca3af;
  font-style: normal;
}

.contact-detail__region-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31, 111, 235, 0.08);
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
}
.contact-detail__region-pill--national {
  background: rgba(227, 6, 19, 0.08);
  color: var(--gip-red);
}

.contact-detail__recipients {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 10px;
}
.contact-detail__recipients--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.contact-detail__recipients--stacked + .contact-detail__recipients--stacked {
  margin-top: 14px;
}
.contact-detail__recipients--stacked .contact-detail__recipients-list {
  flex-direction: column;
  gap: 4px;
}
.contact-detail__recipients--stacked .contact-detail__recipients-list li {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  word-break: break-all;
}
.contact-detail__recipients--stacked .contact-detail__recipients-list li a {
  color: var(--accent-blue);
}
.contact-detail__recipients-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--main-muted);
  flex: 0 0 auto;
}
.contact-detail__recipients-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.contact-detail__recipients-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gip-bleu-soft);
  font-size: 13px;
}
.contact-detail__recipients-list li a {
  color: var(--main-fg);
  text-decoration: none;
}
.contact-detail__recipients-list li a:hover { color: var(--accent-blue); }
.contact-detail__recipients-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(31, 111, 235, 0.12);
  color: var(--accent-blue);
}

.contact-detail__message {
  margin: 0;
  padding: 16px 18px;
  background: var(--gip-bleu-soft);
  border-left: 3px solid var(--gip-red);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--main-fg);
  white-space: pre-wrap;
}

.contact-detail__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-detail__actions .extranet-btn {
  justify-content: center;
  width: 100%;
}

.contact-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}
.contact-detail__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--main-muted);
}
.contact-detail__meta-row svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--accent-blue);
}

@media (max-width: 900px) {
  .contact-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Agenda calendaire (page /mon-agenda + widget aside dashboard)
   ============================================================ */
.extranet-agenda__page-title { color: var(--gip-red, #ed1c24); }
.extranet-agenda-page { padding-top: 8px; }

.extranet-agenda {
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.extranet-agenda__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f1f3;
}

.extranet-agenda__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6a727b;
}

.extranet-agenda__title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--main-fg, #1a1f24);
}
.extranet-agenda__title-link {
  color: inherit;
  text-decoration: none;
}
.extranet-agenda__title-link:hover,
.extranet-agenda__title-link:focus-visible { color: var(--gip-red, #d3424b); text-decoration: underline; outline: none; }
.extranet-agenda__open-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--gip-blue, #1b4279);
  text-decoration: none;
  white-space: nowrap;
}
.extranet-agenda__open-link:hover { text-decoration: underline; }

.extranet-agenda__nav {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.extranet-agenda__nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #e3e6ea;
  background: #fafbfc;
  border-radius: 8px;
  color: #4a525c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.extranet-agenda__nav-btn:hover { background: #eef1f4; color: var(--main-fg); }

.extranet-agenda__month-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--main-fg, #1a1f24);
  min-width: 8em;
  text-align: center;
}

.extranet-agenda__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.extranet-agenda__weekdays,
.extranet-agenda__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.extranet-agenda__weekday {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a727b;
  padding: 4px 6px;
}

.extranet-agenda__cell {
  position: relative;
  background: #fafbfc;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 6px 8px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.extranet-agenda__cell.is-out { background: #fff; color: #b9bec4; }
.extranet-agenda__cell.is-today { border-color: var(--gip-red, #ed1c24); background: #fff5f5; }

.extranet-agenda__cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.extranet-agenda__day-num {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
}
.extranet-agenda__cell.is-today .extranet-agenda__day-num {
  color: var(--gip-red, #ed1c24);
  font-weight: 700;
}

.extranet-agenda__add {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #d8dde2;
  background: #fff;
  color: #6a727b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s ease-in, background .12s ease-in, color .12s ease-in;
}
.extranet-agenda__cell:hover .extranet-agenda__add { opacity: 1; }
.extranet-agenda__add:hover {
  background: var(--gip-red, #ed1c24);
  color: #fff;
  border-color: var(--gip-red, #ed1c24);
}

.extranet-agenda__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.extranet-agenda__event-pill {
  display: block;
  width: 100%;
  background: #7d9b96;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  border: 0;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.extranet-agenda__event-pill:hover,
.extranet-agenda__event-pill:focus-visible { background: #5e7c77; outline: none; }

/* E3 (retours Conseil / Bureau, sept. 2026) : national vs régional + couleur de catégorie */
.extranet-agenda__event-pill--national {
  background: #fdecef;
  color: #7f0a1d;
  border-left: 3px solid #c8102e;
}
.extranet-agenda__event-pill--national:hover,
.extranet-agenda__event-pill--national:focus-visible { background: #f9d5db; }
.extranet-agenda__event-pill--regional {
  background: #e6f4f2;
  color: #0b4f4a;
  border-left: 3px solid #0f766e;
}
.extranet-agenda__event-pill--regional:hover,
.extranet-agenda__event-pill--regional:focus-visible { background: #cfe8e3; }
.extranet-agenda__event-pill.has-category::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat-color, #64748b);
  margin-right: 5px;
  vertical-align: middle;
}

.extranet-agenda__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0f1f3;
  font-size: 12px;
  color: #4b5563;
}
.extranet-agenda__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.extranet-agenda__legend-item::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 3px;
  background: #e5e7eb;
  border-left: 3px solid #9ca3af;
}
.extranet-agenda__legend-item--national::before { background: #fdecef; border-left-color: #c8102e; }
.extranet-agenda__legend-item--regional::before { background: #e6f4f2; border-left-color: #0f766e; }
.extranet-agenda__legend-item--reunion::before { background: #ede9fe; border-left-color: #7c3aed; }
.extranet-agenda__legend-item--note::before { background: #e0f2fe; border-left-color: #0ea5e9; }
.extranet-agenda__legend-item--cat::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--cat-color, #64748b);
}
.extranet-agenda__legend-sep { width: 1px; height: 14px; background: #e5e7eb; }

/* ---- Variante compacte (widget aside dashboard) ---- */
.extranet-agenda--compact .extranet-agenda__cell {
  min-height: 52px;
  padding: 4px;
}
.extranet-agenda--compact .extranet-agenda__weekday {
  font-size: 10px;
  padding: 2px 4px;
  text-align: center;
}
.extranet-agenda--compact .extranet-agenda__weekday {
  /* Sur la version compacte on n'affiche que la 1re lettre du jour */
  visibility: hidden;
  position: relative;
}
.extranet-agenda--compact .extranet-agenda__weekday::before {
  visibility: visible;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.extranet-agenda--compact .extranet-agenda__weekdays > :nth-child(1)::before { content: 'L'; }
.extranet-agenda--compact .extranet-agenda__weekdays > :nth-child(2)::before { content: 'M'; }
.extranet-agenda--compact .extranet-agenda__weekdays > :nth-child(3)::before { content: 'M'; }
.extranet-agenda--compact .extranet-agenda__weekdays > :nth-child(4)::before { content: 'J'; }
.extranet-agenda--compact .extranet-agenda__weekdays > :nth-child(5)::before { content: 'V'; }
.extranet-agenda--compact .extranet-agenda__weekdays > :nth-child(6)::before { content: 'S'; }
.extranet-agenda--compact .extranet-agenda__weekdays > :nth-child(7)::before { content: 'D'; }

.extranet-agenda--compact .extranet-agenda__day-num { font-size: 12px; }
.extranet-agenda--compact .extranet-agenda__add { display: none; }
.extranet-agenda--compact .extranet-agenda__event-pill {
  font-size: 10px;
  padding: 2px 4px;
}

@media (max-width: 900px) {
  .extranet-agenda--full .extranet-agenda__cell { min-height: 64px; }
  .extranet-agenda--full .extranet-agenda__event-pill { font-size: 11px; }
}

/* Filter top-bar agenda */
.extranet-agenda__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}
.extranet-agenda__filter-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a727b;
}
.extranet-agenda__filter-select {
  padding: 6px 10px;
  border: 1px solid #d8dde2;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--main-fg, #1a1f24);
  min-width: 200px;
}
.extranet-agenda__filter-select:focus {
  outline: 2px solid var(--accent-blue, #1b4279);
  outline-offset: 1px;
}
.extranet-agenda--full .extranet-agenda__header { flex-wrap: wrap; }

/* ============================================================
   Pages sans subnav (notifications, agenda, dashboard, …)
   - la flèche active de la sidebar pointe dans le main (blanc) au
     lieu de la subnav (bleu)
   - le main reprend visuellement son rôle de carte en arrondissant
     son coin haut-gauche, là où la subnav venait normalement se coller
   ============================================================ */
.extranet-body--no-subnav .extranet-sidebar__item.is-active::after {
  border-right-color: var(--main-bg, #ffffff);
}
.extranet-body--no-subnav .extranet-main {
  border-top-left-radius: 16px;
}

/* ============================================================
   Module Bibliothèque (pid 138)
   - Subnav fictive : catégories métier + Mes favoris + bouton "Ajouter une catégorie"
   - Tableau de documents avec filtre, favoris, copie lien, partage email, download
   ============================================================ */
.extranet-subnav--library .extranet-subnav__group.is-favorites .extranet-subnav__group-icon { color: var(--accent-red, #e30613); }
.extranet-subnav--library .extranet-subnav__group.is-add-category { margin-top: 8px; }
.extranet-subnav--library .extranet-subnav__group.is-add-category .extranet-subnav__group-link {
  background: transparent;
  border: 1.5px dashed var(--gip-red, #e30613);
  border-radius: 10px;
  color: var(--gip-red, #e30613);
  transition: background 0.15s, border-color 0.15s;
}
.extranet-subnav--library .extranet-subnav__group.is-add-category .extranet-subnav__group-icon { color: var(--gip-red, #e30613); }
.extranet-subnav--library .extranet-subnav__group.is-add-category .extranet-subnav__group-title { color: var(--gip-red, #e30613); }
.extranet-subnav--library .extranet-subnav__group.is-add-category .extranet-subnav__group-link:hover {
  background: rgba(227, 6, 19, 0.06);
  border-color: var(--gip-red-dark, #b30410);
  border-style: solid;
}

.extranet-library { padding: 0; }

.extranet-library__panel {
  background: #f7f7f9;
  border: 1px solid #e5e5e8;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.extranet-library__panel-title { margin: 0 0 6px 0; font-size: 16px; font-weight: 600; }
.extranet-library__panel-help { margin: 0 0 16px 0; font-size: 13px; color: #666; }

.extranet-library__form,
.extranet-library__upload-form {
  display: grid;
  gap: 12px;
}
.extranet-library__field { display: flex; flex-direction: column; gap: 4px; }
.extranet-library__field[hidden] { display: none; }
.extranet-library__field-label { font-size: 12px; color: #666; font-weight: 500; }
.extranet-library__field input[type="text"],
.extranet-library__field input[type="file"],
.extranet-library__field textarea {
  padding: 8px 10px;
  border: 1px solid #d0d0d4;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.extranet-library__form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.extranet-library__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.extranet-library__search {
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f7f9;
  border: 1px solid #e5e5e8;
  border-radius: 999px;
  padding: 8px 16px;
}
.extranet-library__search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.extranet-library__table {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}
.extranet-library__row {
  display: grid;
  grid-template-columns: 1fr 80px 70px 96px 60px 160px;
  align-items: center;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid #ececef;
  font-size: 14px;
}
.extranet-library__row--head {
  font-size: 12px;
  color: #999;
  font-weight: 500;
  text-transform: none;
  border-bottom: 1px solid #ececef;
  padding: 6px 8px;
}
.extranet-library__row.is-favorite { background: rgba(227, 6, 19, 0.02); }
/* En vue "Mes favoris" toutes les lignes sont favorites par définition :
   pas la peine de surligner. */
.extranet-library[data-favorites-view="1"] .extranet-library__row.is-favorite { background: transparent; }
.extranet-library__col--title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.extranet-library__doc-title { font-weight: 500; }
.extranet-library__doc-cat { font-size: 12px; color: #999; }
.extranet-library__badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent-red, #e30613);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}
/* Badge « visibilité restreinte » : cadenas + profils autorisés (ambre, même
   code couleur que le dossier verrouillé du subnav). */
.extranet-library__badge--restricted {
  gap: 5px;
  background: #fef3e2;
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.28);
  font-weight: 600;
  letter-spacing: 0;
  padding: 2px 8px 2px 7px;
  white-space: nowrap;
  cursor: help;
}
.extranet-library__badge--restricted svg { flex: none; }

.extranet-library__col--size,
.extranet-library__col--type,
.extranet-library__col--date { color: #666; font-size: 13px; }
.extranet-library__col--date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* En-têtes triables : bouton sans habillage + chevron (bas = décroissant). */
.extranet-library__sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.extranet-library__sort:hover,
.extranet-library__sort.is-active { color: #333; }
.extranet-library__sort:focus-visible { outline: 2px solid var(--accent-red, #e30613); outline-offset: 3px; border-radius: 3px; }
.extranet-library__sort-arrow { opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.extranet-library__sort:hover .extranet-library__sort-arrow { opacity: .45; }
.extranet-library__sort.is-active .extranet-library__sort-arrow { opacity: 1; }
[aria-sort="ascending"] > .extranet-library__sort .extranet-library__sort-arrow { transform: rotate(180deg); }
.extranet-library__col--fav,
.extranet-library__col--actions { display: flex; gap: 6px; align-items: center; }
.extranet-library__col--actions { justify-content: flex-end; }

.extranet-library__action {
  background: transparent;
  border: none;
  color: #777;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.extranet-library__action:hover { background: #f0f0f3; color: #222; }
.extranet-library__action--fav.is-on { color: var(--accent-red, #e30613); }
.extranet-library__action--danger:hover { color: var(--accent-red, #e30613); }
.extranet-library__action.is-copied { background: #d6f5dd; color: #196a36; }
.extranet-library__action-form { display: inline-flex; margin: 0; }

.extranet-library__empty {
  padding: 32px 8px;
  color: #999;
  font-size: 14px;
  text-align: center;
}

.extranet-library__upload {
  background: #f7f7f9;
  border: 1px dashed #c8c8cf;
  border-radius: 12px;
  padding: 20px 24px;
}
.extranet-library__upload-title { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; }

.extranet-library__delete-cat { display: inline-flex; margin: 0; }
.extranet-btn--danger:hover { color: var(--accent-red, #e30613); border-color: var(--accent-red, #e30613); }

@media (max-width: 800px) {
  .extranet-library__row { grid-template-columns: 1fr 60px 60px; }
  .extranet-library__col--fav,
  .extranet-library__row--head .extranet-library__col--fav,
  .extranet-library__col--date { display: none; }
  .extranet-library__col--actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.extranet-library__toolbar-actions { display: inline-flex; gap: 8px; align-items: center; }
.extranet-library__index-form { display: inline-flex; margin: 0; }
.extranet-library__index-form .extranet-btn { display: inline-flex; align-items: center; }

/* Sous-catégories bibliothèque (niveau 2) */
.extranet-subnav__group-link { position: relative; }
.extranet-subnav__group-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--subnav-muted, #888);
  transition: transform 0.15s ease;
}
.extranet-subnav__group.is-expanded .extranet-subnav__group-caret { transform: translateY(-50%) rotate(0deg); }
.extranet-subnav__group:not(.is-expanded) .extranet-subnav__group-caret { transform: translateY(-50%) rotate(-90deg); }

.extranet-subnav__children {
  list-style: none;
  margin: 4px 0 8px 0;
  padding: 0 0 0 40px;
}
.extranet-subnav__child { margin: 0; padding: 0; }
.extranet-subnav__child-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
}
.extranet-subnav__child-link:hover { background: rgba(0, 0, 0, 0.04); color: #222; }
.extranet-subnav__child.is-active .extranet-subnav__child-link {
  color: var(--accent-red, #e30613);
  font-weight: 600;
}
.extranet-subnav__child-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.extranet-subnav__child-link:hover .extranet-subnav__child-icon { opacity: 0.85; }
.extranet-subnav__child.is-active .extranet-subnav__child-icon { opacity: 1; }

/* Menu contextuel des catégories (clic droit / long-press) */
.extranet-library__cat-menu { max-width: 460px; }
.extranet-library__cat-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0 0;
}
.extranet-library__cat-menu-help {
  margin: 6px 0 8px 0;
  font-size: 13px;
  color: #555;
}
.extranet-library__cat-menu-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0 0;
}
.extranet-library__cat-menu-btn-block {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.extranet-library__cat-menu-actions form { margin: 0; }
.extranet-library__cat-menu-footer { margin-top: 12px; display: flex; justify-content: flex-end; }

/* Modal "Restreindre les droits" — grille de cases à cocher (profils + régions) */
.extranet-library__check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 14px;
  margin-top: 6px;
}
.extranet-library__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0;
}
.extranet-library__check input[type="checkbox"] { margin: 0; }
.extranet-library__field-hint {
  font-weight: normal;
  color: #666;
  font-size: 12px;
  margin-left: 4px;
}
.extranet-subnav__cat-menu-badge {
  display: inline-block;
  margin-left: 6px;
  color: #d97706;
  font-size: 10px;
  vertical-align: middle;
}

/* ─── Modal "Restreindre les droits" — cartes profil + régions imbriquées */
.extranet-modal__dialog--wide { max-width: 640px; width: 100%; }

.extranet-restrict__summary {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 6px 0 12px 0;
  background: #f5f7fa; border-radius: 6px;
  font-size: 13px; color: #4b5563;
}
.extranet-restrict__summary-label { font-weight: 500; color: #6b7280; }
.extranet-restrict__summary-value { font-weight: 500; color: #6b7280; }
.extranet-restrict__summary-value.is-restricted { color: #d97706; }

.extranet-restrict__help {
  font-size: 13px; color: #555; line-height: 1.4; margin: 0 0 16px 0;
}

.extranet-restrict__profiles {
  list-style: none; padding: 0; margin: 0 0 18px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.extranet-restrict__profile {
  border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; transition: border-color .15s, background .15s;
  overflow: hidden;
}
.extranet-restrict__profile.is-active {
  border-color: #2563eb; background: #f5f8ff;
}
.extranet-restrict__profile-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  user-select: none;
}
.extranet-restrict__profile-header input[type="checkbox"] {
  margin: 0; width: 18px; height: 18px; flex: 0 0 auto;
}
.extranet-restrict__profile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #eef2f7; color: #4b5563; flex: 0 0 auto;
}
.extranet-restrict__profile.is-active .extranet-restrict__profile-icon {
  background: #dbeafe; color: #1d4ed8;
}
.extranet-restrict__profile-body { display: flex; flex-direction: column; gap: 2px; }
.extranet-restrict__profile-title { font-weight: 600; font-size: 14px; color: #111827; }
.extranet-restrict__profile-help { font-size: 12px; color: #6b7280; }

.extranet-restrict__regions {
  padding: 0 16px 14px 62px;
  border-top: 1px dashed #c7d2e0;
  margin-top: -1px;
}
.extranet-restrict__regions[hidden] { display: none; }
.extranet-restrict__regions-toolbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0 8px 0;
  font-size: 12px;
}
.extranet-restrict__regions-help { color: #6b7280; }
.extranet-restrict__regions-help em { font-style: normal; color: #9ca3af; }
.extranet-restrict__regions-actions { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; }
.extranet-restrict__regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 12px;
}

.extranet-restrict__link {
  background: none; border: 0; padding: 0;
  color: #2563eb; font: inherit; font-size: 12px;
  cursor: pointer; text-decoration: underline;
}
.extranet-restrict__link:hover { color: #1d4ed8; }
.extranet-restrict__link--danger { color: #b91c1c; }
.extranet-restrict__link--danger:hover { color: #991b1b; }

/* Modal "Envoyer par email" — picker du mode (self vs autres) */
.extranet-email__mode {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0 14px 0;
}
.extranet-email__mode-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.extranet-email__mode-option:has(input:checked) {
  border-color: #2563eb; background: #f5f8ff;
}
.extranet-email__mode-option input[type="radio"] { margin: 4px 0 0 0; flex: 0 0 auto; }
.extranet-email__mode-option strong { display: block; font-size: 14px; color: #111827; font-weight: 600; }
.extranet-email__mode-hint { display: block; font-style: normal; color: #6b7280; font-size: 12px; margin-top: 2px; }

.extranet-library__field textarea[data-email-recipients] {
  width: 100%; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px;
  font-family: inherit; font-size: 13px; resize: vertical; min-height: 56px;
}
.extranet-library__field textarea[data-email-recipients]:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.extranet-email__notice {
  font-size: 12px; color: #6b7280; margin: 6px 0 0 0; line-height: 1.4;
}

.extranet-modal__actions--split {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.extranet-modal__actions-spacer { display: inline-flex; gap: 8px; }

/* Modal "Supprimer un document" — icône d'alerte ronde + cible mise en avant */
.extranet-modal__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto 12px auto;
}
.extranet-modal__icon--danger { background: #fef2f2; color: #b91c1c; }

.extranet-doc-delete__target {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 10px 12px; margin: 6px 0 10px 0;
  font-size: 14px; line-height: 1.4;
  word-break: break-word;
}
.extranet-doc-delete__target strong { color: #111827; }
.extranet-doc-delete__filename { color: #6b7280; font-size: 12px; }

/* Dossier protégé : teinte ambrée sur l'icône cadenas (subnav superadmin) */
.extranet-subnav__icon--locked,
.extranet-subnav__group-icon .extranet-subnav__icon--locked,
.extranet-subnav__child-icon.is-locked svg {
  color: #d97706;
}

/* Indique visuellement qu'un item est cliquable-droit (superadmin) */
[data-cat-uid] { cursor: context-menu; }
.extranet-subnav__group.is-uncategorized .extranet-subnav__group-icon { color: #999; }

/* ============================================================
   Kebab dropdown sur les catégories du subnav (superadmin)
   Calqué sur le pattern .extranet-news-list__menu* des listings.
   ============================================================ */
.extranet-subnav__group-row {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.extranet-subnav__group-row .extranet-subnav__group-link {
  flex: 1;
  min-width: 0;
}
.extranet-subnav__child-row {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.extranet-subnav__child-row .extranet-subnav__child-link {
  flex: 1;
  min-width: 0;
}

.extranet-subnav__cat-actions {
  position: relative;
  flex-shrink: 0;
}
.extranet-subnav__cat-trigger {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--main-muted, #888);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.extranet-subnav__group-row:hover .extranet-subnav__cat-trigger,
.extranet-subnav__child-row:hover .extranet-subnav__cat-trigger,
.extranet-subnav__cat-trigger[aria-expanded="true"] {
  opacity: 1;
}
.extranet-subnav__cat-trigger:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--main-fg, #222);
}

.extranet-subnav__cat-menu {
  /* position: fixed via JS (positionCatMenu) — échappe au clipping du subnav scrollable */
  position: fixed;
  min-width: 260px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 100;
}
.extranet-subnav__cat-menu[hidden] { display: none; }
.extranet-subnav__cat-menu li { margin: 0; padding: 0; }
.extranet-subnav__cat-menu form { margin: 0; }
.extranet-subnav__cat-menu a,
.extranet-subnav__cat-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--main-fg, #222);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.extranet-subnav__cat-menu a > svg,
.extranet-subnav__cat-menu button > svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.7;
}
.extranet-subnav__cat-menu a:hover,
.extranet-subnav__cat-menu button:hover {
  background: var(--gip-bleu-soft, #f0f4fa);
}
.extranet-subnav__cat-menu li.is-danger a,
.extranet-subnav__cat-menu li.is-danger button {
  color: var(--gip-red, #e30613);
}
.extranet-subnav__cat-menu li.is-danger a:hover,
.extranet-subnav__cat-menu li.is-danger button:hover {
  background: rgba(227, 6, 19, 0.08);
}

/* Scroll vertical dans le subnav (module Bibliothèque : nb de catégories
   potentiellement long, > hauteur viewport). Le toggle reste hors du scroll. */
.extranet-subnav--library {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: visible; /* on garde l'overflow visible pour le toggle qui déborde à droite */
}
.extranet-subnav--library .extranet-subnav__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  /* Marges négatives + padding pour absorber les marges négatives des items
     (group-link a margin-left -8px) et éviter que les bordures soient clippées
     par le scroll. À droite : compense aussi le dropdown kebab visuel. */
  margin-left: -12px;
  padding-left: 12px;
  margin-right: -16px;
  padding-right: 16px;
  /* Scrollbar discrète */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.extranet-subnav--library .extranet-subnav__scroll::-webkit-scrollbar { width: 6px; }
.extranet-subnav--library .extranet-subnav__scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.extranet-subnav--library .extranet-subnav__scroll::-webkit-scrollbar-track { background: transparent; }

/* Espacement plus compact des catégories dans la library (gain de hauteur) */
.extranet-subnav--library .extranet-subnav__group { margin-bottom: 4px; }
.extranet-subnav--library .extranet-subnav__group-link { padding: 5px 8px; margin-bottom: 0; }
.extranet-subnav--library .extranet-subnav__children { margin: 2px 0 6px 0; }
.extranet-subnav--library .extranet-subnav__child-link { padding: 4px 10px; }

/* Breadcrumb bibliothèque (titre principal) */
.extranet-library__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 28px;
  line-height: 1.2;
}
.extranet-library__breadcrumb-link {
  color: var(--main-muted, #888);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.extranet-library__breadcrumb-link:hover { color: var(--accent-red, #e30613); }
.extranet-library__breadcrumb-sep {
  color: var(--main-muted, #aaa);
  font-weight: 400;
  font-size: 24px;
}
.extranet-library__breadcrumb-current {
  color: var(--accent-red, #e30613);
  font-weight: 600;
}

/* Favoris : micro-pulse à l'activation + fade-out de la ligne en vue "Mes favoris" */
@keyframes extranet-library-fav-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.extranet-library__action--fav.is-pulsing > svg {
  animation: extranet-library-fav-pulse 0.28s ease;
}
.extranet-library__row.is-leaving {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}

/* Toast discret pour les erreurs AJAX bibliothèque */
.extranet-library__toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 9999;
  pointer-events: none;
}
.extranet-library__toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.extranet-library__toast.is-error { background: var(--gip-red, #e30613); }

/* Modal de suppression de catégorie : 2 choix stackés */
.extranet-library__delete-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 16px 0;
}
.extranet-library__delete-choice { margin: 0; }
.extranet-library__delete-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: #f7f7f9;
  border: 1.5px solid #e5e5e8;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--main-fg, #222);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.extranet-library__delete-btn:hover {
  background: var(--gip-bleu-soft, #f0f4fa);
  border-color: #c8c8cf;
}
.extranet-library__delete-btn-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  color: var(--main-muted, #777);
}
.extranet-library__delete-btn-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.extranet-library__delete-btn-body strong { font-size: 14px; font-weight: 600; }
.extranet-library__delete-btn-help { font-size: 12px; color: var(--main-muted, #777); }

.extranet-library__delete-btn--danger { border-color: rgba(227, 6, 19, 0.25); }
.extranet-library__delete-btn--danger .extranet-library__delete-btn-icon { background: rgba(227, 6, 19, 0.1); color: var(--gip-red, #e30613); }
.extranet-library__delete-btn--danger:hover {
  background: rgba(227, 6, 19, 0.06);
  border-color: var(--gip-red, #e30613);
  color: var(--gip-red, #e30613);
}
.extranet-library__delete-btn--danger:hover .extranet-library__delete-btn-icon { background: var(--gip-red, #e30613); color: #fff; }

/* Kebab d'options page-level de la bibliothèque (toolbar) */
.extranet-library__page-actions { position: relative; display: inline-flex; }
.extranet-library__page-trigger {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--main-muted, #777);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.extranet-library__page-trigger:hover,
.extranet-library__page-trigger[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.06);
  color: var(--main-fg, #222);
}
.extranet-library__page-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 240px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 50;
}
.extranet-library__page-menu[hidden] { display: none; }
.extranet-library__page-menu li { margin: 0; padding: 0; }
.extranet-library__page-menu form { margin: 0; }
.extranet-library__page-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--main-fg, #222);
  text-align: left;
  cursor: pointer;
}
.extranet-library__page-menu button > svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.extranet-library__page-menu button:hover { background: var(--gip-bleu-soft, #f0f4fa); }

/* =========================================================
   Help drawer (panneau d'aide / FAQ topbar)
   ========================================================= */
.extranet-help-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 290;
  opacity: 0;
  transition: opacity 200ms ease;
}
.extranet-help-backdrop.is-visible { opacity: 1; }
.extranet-help-backdrop[hidden] { display: none; }

.extranet-help {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  background: #fff;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.extranet-help.is-open { transform: translateX(0); }
.extranet-help[hidden] { display: none; }

.extranet-help__header {
  flex-shrink: 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--topbar-border, #e6e8eb);
  background: var(--gip-bleu-soft, #f0f4fa);
}
.extranet-help__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.extranet-help__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--main-fg, #1a1a1a);
  flex: 1;
}
.extranet-help__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--main-muted, #5f6368);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.extranet-help__close:hover { background: rgba(0, 0, 0, 0.08); color: var(--main-fg, #1a1a1a); }
.extranet-help__subtitle {
  margin: 8px 0 12px;
  font-size: 13px;
  color: var(--main-muted, #5f6368);
  line-height: 1.4;
}
.extranet-help__search {
  position: relative;
  display: flex;
  align-items: center;
}
.extranet-help__search-icon {
  position: absolute;
  left: 12px;
  color: var(--main-muted, #5f6368);
  pointer-events: none;
}
.extranet-help__search-input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  border: 1px solid var(--topbar-border, #e6e8eb);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--main-fg, #1a1a1a);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.extranet-help__search-input:focus {
  outline: none;
  border-color: var(--accent-blue, #1f6feb);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
}
.extranet-help__search-clear {
  position: absolute;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--main-muted, #5f6368);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}
.extranet-help__search-clear:hover { background: rgba(0, 0, 0, 0.08); }
.extranet-help__search-clear[hidden] { display: none; }
.extranet-help__no-results {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--main-muted, #5f6368);
  font-style: italic;
}
.extranet-help__no-results[hidden] { display: none; }

.extranet-help__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 24px;
}

.extranet-help__module {
  border-bottom: 1px solid var(--topbar-border, #e6e8eb);
}
.extranet-help__module:last-child { border-bottom: none; }
.extranet-help__module-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--main-fg, #1a1a1a);
  transition: background 120ms ease;
}
.extranet-help__module-toggle:hover { background: rgba(31, 111, 235, 0.05); }
.extranet-help__module-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gip-bleu-soft, #f0f4fa);
  color: var(--accent-blue, #1f6feb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.extranet-help__module-title { flex: 1; }
.extranet-help__module-chevron {
  flex-shrink: 0;
  color: var(--main-muted, #5f6368);
  transition: transform 220ms ease;
}
.extranet-help__module-toggle[aria-expanded="true"] .extranet-help__module-chevron {
  transform: rotate(180deg);
}

.extranet-help__module-panel {
  padding: 4px 20px 14px;
  display: none;
}
.extranet-help__module-toggle[aria-expanded="true"] + .extranet-help__module-panel {
  display: block;
}

.extranet-help__qa {
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.extranet-help__qa[open] {
  background: #fafbfc;
  border-color: var(--topbar-border, #e6e8eb);
}
.extranet-help__qa[hidden] { display: none; }
.extranet-help__qa summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px 10px 36px;
  font-size: 13px;
  font-weight: 500;
  color: var(--main-fg, #1a1a1a);
  position: relative;
  line-height: 1.4;
  border-radius: 8px;
}
.extranet-help__qa summary::-webkit-details-marker { display: none; }
.extranet-help__qa summary::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--main-muted, #5f6368);
  border-bottom: 2px solid var(--main-muted, #5f6368);
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 180ms ease;
}
.extranet-help__qa[open] summary::before {
  transform: translateY(-25%) rotate(45deg);
}
.extranet-help__qa summary:hover { background: rgba(31, 111, 235, 0.06); }
.extranet-help__qa[open] summary { color: var(--accent-blue, #1f6feb); }
.extranet-help__answer {
  padding: 4px 16px 12px 36px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--main-fg, #1a1a1a);
}
.extranet-help__answer p { margin: 0 0 8px; }
.extranet-help__answer p:last-child { margin-bottom: 0; }
.extranet-help__answer ul,
.extranet-help__answer ol {
  margin: 4px 0 8px;
  padding-left: 20px;
}
.extranet-help__answer li { margin-bottom: 4px; }
.extranet-help__answer strong { font-weight: 700; }

.extranet-help mark {
  background: rgba(255, 217, 0, 0.55);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .extranet-help { width: 100vw; }
}

/* -- Help audience: filtrage par profil ----------------------
   Une Q/R sans data-help-audience est visible par tous les fe_users connectés.
   Sinon, audiences sémantiques (cumulatives) :
     editor          → .is-editor    (admin_regional, conseil, bureau, moderateur, superadmin)
     global          → .is-global    (conseil, bureau, moderateur, superadmin)
     moderator       → .is-moderator (moderateur seul)
     superadmin      → .is-superadmin (superadmin seul)
     admin_regional  → .is-regional-only (admin régional cloisonné, sans rôle global)
     member          → .is-member-only   (membre simple, sans aucun autre rôle)
   Cf. EXT:extranet/Documentation/12-aide.md.
   ----------------------------------------------------------- */
.extranet-help [data-help-audience] { display: none; }
.extranet-help.is-editor         [data-help-audience~="editor"]         { display: block; }
.extranet-help.is-global         [data-help-audience~="global"]         { display: block; }
.extranet-help.is-moderator      [data-help-audience~="moderator"]      { display: block; }
.extranet-help.is-superadmin     [data-help-audience~="superadmin"]     { display: block; }
.extranet-help.is-regional-only  [data-help-audience~="admin_regional"] { display: block; }
.extranet-help.is-member-only    [data-help-audience~="member"]         { display: block; }

/* Section module masquée entièrement si toutes ses Q/R sont filtrées */
.extranet-help__module.is-empty-for-audience { display: none; }

/* =========================================================
   Module "Mon compte" (/mon-compte) — auto-service fe_user
   ========================================================= */

.extranet-account-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px 32px;
    margin: 0 0 24px;
    background: linear-gradient(135deg, var(--gip-red), var(--gip-red-dark));
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px -16px rgba(227, 6, 19, 0.45);
}

.extranet-account-hero__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border: 2px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.extranet-account-hero__main { min-width: 0; }

.extranet-account-hero__name {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.extranet-account-hero__sub {
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
}
.extranet-account-hero__email,
.extranet-account-hero__role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.extranet-account-hero__email svg,
.extranet-account-hero__role svg { opacity: 0.85; }

.extranet-account-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.extranet-account-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.extranet-account-tag--region {
    background: rgba(255, 255, 255, 0.12);
    font-weight: 500;
}

.extranet-account-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: right;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    min-width: 0;
}
.extranet-account-hero__meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.extranet-account-hero__meta-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    opacity: 0.75;
}
.extranet-account-hero__meta-value {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}
code.extranet-account-hero__meta-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(0, 0, 0, 0.18);
    padding: 2px 8px;
    border-radius: 6px;
}

@media (max-width: 900px) {
    .extranet-account-hero {
        grid-template-columns: auto 1fr;
        padding: 20px;
    }
    .extranet-account-hero__meta {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        gap: 6px 16px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .extranet-account-hero__meta-row { align-items: flex-start; }
    .extranet-account-hero__name { font-size: 22px; }
}

/* Conteneur principal — stack des cartes */
.extranet-account {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.extranet-account-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 22px 26px 26px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
}
.extranet-account-card--password {
    border-color: #f3d6d8;
    background: linear-gradient(180deg, #fff7f7 0%, #ffffff 28%);
}
.extranet-account-card--password .extranet-account-card__icon { color: var(--gip-red); }

.extranet-account-card__header {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef0f3;
}
.extranet-account-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.extranet-account-card__icon {
    color: #6b7280;
    flex-shrink: 0;
}
.extranet-account-card__sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

/* Formulaire — groupes + grille */
.extranet-account-form__group {
    border: 0;
    padding: 0;
    margin: 0 0 22px;
}
.extranet-account-form__group:last-of-type { margin-bottom: 12px; }
.extranet-account-form__legend {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 12px;
    padding: 0;
}
.extranet-account-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.extranet-account-form__grid .extranet-form__field--wide {
    grid-column: 1 / -1;
}
@media (max-width: 720px) {
    .extranet-account-form__grid { grid-template-columns: 1fr; }
}

.extranet-account-form__req {
    color: var(--gip-red);
    font-weight: 700;
    margin-left: 2px;
}

.extranet-account-form__legend-hint {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.extranet-account-form__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    font-size: 13px;
    color: #7c2d12;
    line-height: 1.5;
}
.extranet-account-form__notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #c2410c;
}

.extranet-account-form__actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eef0f3;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.extranet-account-form__actions .extranet-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Variante input-wrap pour textarea : icône alignée en haut */
.extranet-form__input-wrap--textarea .extranet-form__icon {
    top: 14px;
    transform: none;
}
.extranet-form__input-wrap--textarea .extranet-form__input--textarea {
    padding-left: 44px;
}

/* Icône topbar "Mon compte" — héritage du style générique mais sans badge */
.extranet-topbar__icon--account { text-decoration: none; }
.extranet-topbar__icon--account:hover { color: var(--gip-red); }

/* Toggle "afficher / masquer" pour les champs mot de passe. Le wrap garde
   l'icône à gauche (extranet-form__icon) ; le bouton est en absolute à
   droite. On réserve 38px de padding à droite sur l'input pour ne pas que
   le texte passe sous le bouton. */
.extranet-form__input--password { padding-right: 42px; }

.extranet-form__password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.extranet-form__password-toggle:hover,
.extranet-form__password-toggle:focus-visible {
    background: rgba(17, 24, 39, 0.06);
    color: #111827;
    outline: none;
}
.extranet-form__password-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.25);
}

/* Bascule des deux icônes : on n'en montre qu'une selon l'état révélé.
   État par défaut (mdp caché) → on affiche l'œil "show" (regarde le mdp).
   État révélé → on affiche l'œil barré "hide" (clique pour masquer). */
.extranet-form__password-toggle-hide { display: none; }
.extranet-form__input-wrap--password.is-revealed .extranet-form__password-toggle-show { display: none; }
.extranet-form__input-wrap--password.is-revealed .extranet-form__password-toggle-hide { display: inline; }
.extranet-form__input-wrap--password.is-revealed .extranet-form__password-toggle { color: var(--gip-red); }

/* Widget force du mot de passe + checklist policy */
.extranet-pwd-strength {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    font-size: 13px;
}
.extranet-pwd-strength__bar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.extranet-pwd-strength__segment {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    transition: background-color 0.18s ease;
}
.extranet-pwd-strength.is-level-1 .extranet-pwd-strength__segment.is-on { background: #dc2626; }
.extranet-pwd-strength.is-level-2 .extranet-pwd-strength__segment.is-on { background: #ea580c; }
.extranet-pwd-strength.is-level-3 .extranet-pwd-strength__segment.is-on { background: #f59e0b; }
.extranet-pwd-strength.is-level-4 .extranet-pwd-strength__segment.is-on { background: #84cc16; }
.extranet-pwd-strength.is-level-5 .extranet-pwd-strength__segment.is-on { background: #16a34a; }

.extranet-pwd-strength__label {
    margin: 0 0 10px;
    font-size: 12px;
    color: #6b7280;
}
.extranet-pwd-strength__label [data-strength-label] {
    font-weight: 700;
    color: #374151;
}
.extranet-pwd-strength.is-level-1 [data-strength-label] { color: #dc2626; }
.extranet-pwd-strength.is-level-2 [data-strength-label] { color: #ea580c; }
.extranet-pwd-strength.is-level-3 [data-strength-label] { color: #d97706; }
.extranet-pwd-strength.is-level-4 [data-strength-label] { color: #65a30d; }
.extranet-pwd-strength.is-level-5 [data-strength-label] { color: #16a34a; }

.extranet-pwd-strength__rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.extranet-pwd-strength__rule {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
    transition: color 0.15s ease;
}
.extranet-pwd-strength__rule.is-ok {
    color: #15803d;
    font-weight: 500;
}
.extranet-pwd-strength__rule-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #9ca3af;
}
.extranet-pwd-strength__rule.is-ok .extranet-pwd-strength__rule-icon { color: #16a34a; }
.extranet-pwd-strength__rule-ok { display: none; }
.extranet-pwd-strength__rule.is-ok .extranet-pwd-strength__rule-pending { display: none; }
.extranet-pwd-strength__rule.is-ok .extranet-pwd-strength__rule-ok { display: inline; }

.extranet-pwd-strength__note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* Feedback d'égalité entre "nouveau" et "confirmation" */
.extranet-pwd-match {
    margin: 8px 0 0;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.extranet-pwd-match::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.extranet-pwd-match.is-ok { color: #16a34a; }
.extranet-pwd-match.is-error { color: #dc2626; }

/* ============================================================
   Invitations — onglets Inscrits/Invités + picker + page publique
   Cf. EXT:extranet/Documentation/15-invitations.md
   ============================================================ */

/* Onglets génériques (page reservationsAction). Pattern réutilisable
   si d'autres pages adoptent une vue à onglets plus tard. */
.extranet-tabs__list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.extranet-tabs__btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.extranet-tabs__btn:hover { color: #0b3a82; }
.extranet-tabs__btn.is-active {
    color: #0b3a82;
    border-bottom-color: #0b3a82;
    font-weight: 600;
}
.extranet-tabs__panel { padding-top: 18px; }
.extranet-tabs__panel[hidden] { display: none; }

/* Picker contacts (inviteAction). */
.extranet-invite-form__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: #f5f7fb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin: 8px 0 12px 0;
    position: sticky;
    top: 0;
    z-index: 5;
}
.extranet-invite-form__select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.extranet-invite-form__count {
    flex: 1;
    color: #6b7280;
    font-size: 13px;
}
.extranet-invite-table__check { width: 36px; text-align: center; }
.extranet-invite-table tr.is-already-invited {
    opacity: 0.55;
    background: #fafafa;
}

/* Page publique de réponse (/invitation, hors layout extranet). */
.invitation-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6fb;
    padding: 24px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #222;
    line-height: 1.5;
}
.invitation-page__inner {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 36px 40px;
    max-width: 620px;
    width: 100%;
}
.invitation-page__title {
    color: #0b3a82;
    margin: 0 0 16px 0;
    font-size: 26px;
}
.invitation-page__hello { font-size: 16px; margin: 0 0 18px 0; }
.invitation-page__event {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fafafa;
    padding: 18px 22px;
    margin: 0 0 24px 0;
}
.invitation-page__event-title { margin: 0 0 12px 0; font-size: 18px; color: #0b3a82; }
.invitation-page__event-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
.invitation-page__event-meta li { margin: 0 0 6px 0; }
.invitation-page__lead { margin: 0 0 22px 0; }

.invitation-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px 0;
}
.invitation-page__actions > form { margin: 0; }
.invitation-btn {
    appearance: none;
    border: 0;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}
.invitation-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.invitation-btn--accept { background: #16a34a; color: #fff; }
.invitation-btn--decline { background: #fff; color: #a02020; border: 1px solid #a02020; }

.invitation-page__state {
    border-radius: 6px;
    padding: 20px 22px;
    margin: 0 0 18px 0;
}
.invitation-page__state--accepted { background: #f0f8f0; border: 1px solid #16a34a; }
.invitation-page__state--declined { background: #fff5f5; border: 1px solid #a02020; }
.invitation-page__state-title { margin: 0 0 8px 0; font-size: 18px; }
.invitation-page__state--accepted .invitation-page__state-title { color: #1f7a3a; }
.invitation-page__state--declined .invitation-page__state-title { color: #a02020; }
.invitation-page__state-edit { margin: 12px 0 0 0; font-size: 13px; color: #6b7280; }

.invitation-link {
    appearance: none;
    background: transparent;
    border: 0;
    color: #0b3a82;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

/* =========================================================
   Page Import base de données — wizard didactique 3 étapes
   ========================================================= */

.extranet-import__intro {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--main-muted);
    line-height: 1.5;
    max-width: 820px;
}

/* Stepper */
.extranet-stepper {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex-wrap: wrap;
}
.extranet-stepper__step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f3f4f6;
    border-radius: 999px;
    font-size: 13px;
    color: var(--main-muted);
    font-weight: 500;
}
.extranet-stepper__step.is-active { background: rgba(227, 6, 19, 0.08); color: var(--gip-red, #d3424b); }
.extranet-stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}
.extranet-stepper__step.is-active .extranet-stepper__num { background: var(--gip-red, #d3424b); color: #fff; }

/* Layout 2 colonnes (main + side) */
.extranet-import {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 980px) { .extranet-import { grid-template-columns: 1fr; } }

.extranet-import__main { display: flex; flex-direction: column; gap: 20px; }
.extranet-import__side { display: flex; flex-direction: column; gap: 16px; }

/* Cards étape */
.extranet-import__step {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px 28px;
}
.extranet-import__step-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.extranet-import__step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gip-red, #d3424b);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.extranet-import__step-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--main-fg);
}
.extranet-import__step-sub {
    margin: 0;
    font-size: 13px;
    color: var(--main-muted);
}
.extranet-import__sub {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-fg);
}

/* Étape 1 : chips formats */
.extranet-import__formats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.extranet-import__format-chip {
    display: inline-flex;
    flex-direction: column;
    padding: 10px 16px;
    background: #eef2f7;
    border-radius: 8px;
    font-size: 13px;
    color: var(--main-fg);
    line-height: 1.3;
}
.extranet-import__format-chip strong { font-size: 14px; }
.extranet-import__format-chip small { color: var(--main-muted); font-size: 11px; margin-top: 2px; }

/* Étape 1 : tableau des colonnes */
.extranet-import__cols-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.extranet-import__cols-table thead { background: #f9fafb; }
.extranet-import__cols-table th,
.extranet-import__cols-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #f3f4f6; }
.extranet-import__cols-table tbody tr:last-child td { border-bottom: 0; }
.extranet-import__cols-table th { font-weight: 600; font-size: 12px; color: var(--main-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.extranet-import__cols-table td code { background: #eef2f7; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
.extranet-import__cols-table td small { color: var(--main-muted); display: block; margin-top: 4px; }

/* Mode d'application des droits (Super) : compléter / remplacer */
.extranet-import__mode {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}
.extranet-import__mode input { margin-top: 3px; flex-shrink: 0; }
.extranet-import__mode:has(input:checked) { border-color: #2563eb; background: #eff6ff; }

.extranet-import__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 13px;
    color: #1e3a8a;
}
.extranet-import__hint svg { flex-shrink: 0; color: #2563eb; margin-top: 1px; }
.extranet-import__inline-link {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 500;
}

/* Étape 2 : cards radio "mode" */
.extranet-import__modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 700px) { .extranet-import__modes { grid-template-columns: 1fr; } }

.extranet-import__mode {
    position: relative;
    cursor: pointer;
    display: block;
}
.extranet-import__mode input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.extranet-import__mode-inner {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    height: 100%;
}
.extranet-import__mode:hover .extranet-import__mode-inner { border-color: #cbd5e1; background: #f8fafc; }
.extranet-import__mode input[type="radio"]:checked + .extranet-import__mode-inner {
    border-color: var(--gip-red, #d3424b);
    background: rgba(227, 6, 19, 0.04);
}
.extranet-import__mode--danger input[type="radio"]:checked + .extranet-import__mode-inner {
    border-color: #b91c1c;
    background: #fef2f2;
}
.extranet-import__mode-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.extranet-import__mode-head strong { font-size: 15px; flex: 1; }
.extranet-import__mode-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
}
.extranet-import__mode-tag--danger { background: #fee2e2; color: #991b1b; }
.extranet-import__mode-desc {
    margin: 0;
    font-size: 13px;
    color: var(--main-muted);
    line-height: 1.5;
}

/* Étape 3 : dropzone */
.extranet-import__dropzone {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 24px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 16px;
    position: relative;
}
.extranet-import__dropzone:hover {
    border-color: var(--gip-red, #d3424b);
    background: #fff;
}
.extranet-import__dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.extranet-import__dropzone-icon {
    color: var(--main-muted);
    display: inline-flex;
    flex-shrink: 0;
}
.extranet-import__dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.extranet-import__dropzone-text strong {
    font-size: 14px;
    color: var(--main-fg);
}
.extranet-import__dropzone-text small {
    font-size: 12px;
    color: var(--main-muted);
}
.extranet-import__dropzone-chosen {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--gip-red, #d3424b);
}
.extranet-import__dropzone-chosen:empty { display: none; }

.extranet-import__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Sidebar */
.extranet-import__aside-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
}
.extranet-import__aside-card--info { border-left: 3px solid #2563eb; }
.extranet-import__aside-card--region { border-left: 3px solid #7c3aed; }
.extranet-import__aside-card--check { border-left: 3px solid #16a34a; }
.extranet-import__aside-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--main-fg);
}
.extranet-import__aside-title svg { color: var(--main-muted); }
.extranet-import__aside-card p {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--main-muted);
    line-height: 1.5;
}
.extranet-import__aside-card p:last-child { margin-bottom: 0; }
.extranet-import__aside-small { font-size: 12px !important; color: #94a3b8 !important; }
.extranet-import__check-list {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 13px;
    color: var(--main-muted);
    line-height: 1.5;
}
.extranet-import__check-list li { margin-bottom: 6px; }
.extranet-import__check-list li:last-child { margin-bottom: 0; }
.extranet-import__check-list code { background: #eef2f7; padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--main-fg); }

/* =========================================================
   Overlay loading page Import (affiché au submit)
   ========================================================= */
.extranet-import__loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.extranet-import__loading[hidden] { display: none; }
.extranet-import__loading-dialog {
    background: #fff;
    border-radius: 14px;
    padding: 36px 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    animation: extranet-import-loading-in .22s ease-out;
}
@keyframes extranet-import-loading-in {
    from { transform: translateY(10px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.extranet-import__loading-spinner {
    display: inline-flex;
    margin-bottom: 18px;
}
.extranet-import__loading-title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--main-fg);
}
.extranet-import__loading-msg {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--main-muted);
    line-height: 1.55;
}
.extranet-import__loading-bar {
    width: 100%;
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}
.extranet-import__loading-bar-fill {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #d3424b, #ef4444, #d3424b);
    border-radius: 999px;
    animation: extranet-import-loading-bar 1.4s ease-in-out infinite;
}
@keyframes extranet-import-loading-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.extranet-import__loading-stage {
    margin: 0;
    font-size: 12px;
    color: var(--main-muted);
    font-style: italic;
}

/* État disabled du bouton submit pendant l'import */
.extranet-btn[disabled],
.extranet-btn.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

body.extranet-import-busy { overflow: hidden; }

/* Banner progression envoi invitations (onglet Invités sur reservationsAction) */
.extranet-invite-progress {
    margin: 12px 0 18px 0;
    padding: 14px 18px;
    background: #f0f7ff;
    border: 1px solid #c3dbf5;
    border-radius: 6px;
}
.extranet-invite-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 10px 0;
    font-size: 14px;
}
.extranet-invite-progress__head strong { color: #0b3a82; }
.extranet-invite-progress__bar {
    height: 10px;
    background: #d8e6f8;
    border-radius: 5px;
    overflow: hidden;
}
.extranet-invite-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0b3a82, #1c5fc0);
    transition: width 0.4s ease;
}
.extranet-invite-progress__hint {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #6b7280;
}

/* =========================================================
   Carte de présentation évènement (page reservations)
   ========================================================= */
.extranet-event-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px 22px;
    align-items: start;
    padding: 18px 22px;
    background: #f7f9fc;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    margin: 0 0 22px 0;
}
.extranet-event-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(11, 58, 130, 0.08);
    color: #0b3a82;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.extranet-event-card__title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0b3a82;
    line-height: 1.3;
}
.extranet-event-card__meta {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 14px;
}
.extranet-event-card__row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 12px;
    align-items: baseline;
}
.extranet-event-card__row dt {
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}
.extranet-event-card__row dd {
    margin: 0;
    color: #222;
}
.extranet-event-card__actions {
    align-self: center;
}
@media (max-width: 720px) {
    .extranet-event-card { grid-template-columns: auto 1fr; }
    .extranet-event-card__actions { grid-column: 1 / -1; justify-self: start; }
}

/* Gap entre le bloc stats et le tableau dans l'onglet reservation/invité */
.extranet-reservations__stats {
    margin-bottom: 20px;
}
.extranet-reservations__table-wrap {
    margin-top: 0;
}

/* =========================================================
   Carte évènement : variante avec vignette image
   ========================================================= */
.extranet-event-card__thumb {
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(11, 58, 130, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.extranet-event-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.extranet-event-card__thumb .extranet-event-card__icon {
    width: auto;
    height: auto;
    background: transparent;
    color: #0b3a82;
}

/* On garde l'ancienne carte sans thumb fonctionnelle aussi : si le
   markup utilise .extranet-event-card__icon en direct (sans wrapper
   __thumb), on conserve les anciennes dimensions. Le nouveau partial
   wrapper avec __thumb prend le pas via spécificité. */

/* =========================================================
   Toolbar invitation (Invite.html)
   Recherche en clair + bouton « Filtres avancés » qui révèle
   les sélecteurs cible / région / priorité (cachés par défaut).
   ========================================================= */
.extranet-invite-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px 0;
}
.extranet-invite-toolbar__row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.extranet-invite-toolbar__search {
    position: relative;
    flex: 1 1 280px;
    display: flex;
    align-items: center;
}
.extranet-invite-toolbar__search svg {
    position: absolute;
    left: 12px;
    color: #6b7280;
    pointer-events: none;
}
.extranet-invite-toolbar__search input[type="text"] {
    flex: 1;
    padding: 9px 14px 9px 36px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.extranet-invite-toolbar__search input[type="text"]:focus {
    outline: none;
    border-color: #0b3a82;
    box-shadow: 0 0 0 3px rgba(11, 58, 130, 0.12);
}
.extranet-invite-toolbar__badge {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--gip-red, #ed1c24);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}
.extranet-invite-toolbar__advanced {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding: 14px 18px;
    background: #f7f9fc;
    border: 1px solid #e1e7f0;
    border-radius: 8px;
}
.extranet-invite-toolbar__advanced[hidden] { display: none; }
.extranet-invite-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    flex: 1 1 180px;
}
.extranet-invite-toolbar__field > span {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.extranet-invite-toolbar__field select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}

/* Bloc de texte d'aide en haut de page (instructions contextuelles).
   Espace généreux en dessous pour aérer la séparation avec la toolbar
   ou le tableau qui suit. */
.extranet-help-text {
    margin: 0 0 22px 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.55;
}

/* =========================================================
   Édition contact base de données
   Layout : hero + main/side + sticky footer
   ========================================================= */
.extranet-form-edit { padding-bottom: 80px; }

/* Hero */
.extranet-form-edit__hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.extranet-form-edit__hero-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #d3424b 0%, #b91c1c 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.5px;
}
.extranet-form-edit__hero-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--main-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.extranet-form-edit__hero-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--main-fg);
    line-height: 1.2;
}
.extranet-form-edit__hero-sub {
    margin: 0;
    color: var(--main-muted);
    font-size: 14px;
}

/* Layout 2 colonnes */
.extranet-form-edit__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1020px) { .extranet-form-edit__layout { grid-template-columns: 1fr; } }
.extranet-form-edit__main { display: flex; flex-direction: column; gap: 18px; }
.extranet-form-edit__side { display: flex; flex-direction: column; gap: 14px; }

/* Sections (fieldset) */
.extranet-form-edit__section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 26px 26px;
    margin: 0;
}
.extranet-form-edit__section-legend {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    padding: 0;
    width: 100%;
}
.extranet-form-edit__section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.08);
    color: var(--gip-red, #d3424b);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.extranet-form-edit__section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--main-fg);
    display: block;
}
.extranet-form-edit__section-legend small {
    display: block;
    font-size: 12px;
    color: var(--main-muted);
    font-weight: 400;
    margin-top: 2px;
}

/* Grille de champs */
.extranet-form-edit__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px 16px;
}
.extranet-form-edit__field { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; }
.extranet-form-edit__field--full { grid-column: 1 / -1; }
.extranet-form-edit__field--xs { grid-column: span 3; }
@media (max-width: 600px) {
    .extranet-form-edit__field,
    .extranet-form-edit__field--xs { grid-column: 1 / -1; }
}

.extranet-form-edit__field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--main-fg);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.extranet-form-edit__field label small {
    font-size: 11px;
    font-weight: 400;
    color: var(--main-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.extranet-form-edit__field input,
.extranet-form-edit__field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: var(--main-fg);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.extranet-form-edit__field input:focus,
.extranet-form-edit__field select:focus {
    outline: none;
    border-color: var(--gip-red, #d3424b);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}

/* Sidebar cards */
.extranet-form-edit__card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
}
.extranet-form-edit__card--info { border-left: 3px solid #2563eb; }
.extranet-form-edit__card--meta { border-left: 3px solid #7c3aed; }
.extranet-form-edit__card--danger { border-left: 3px solid #b91c1c; background: #fef2f2; }
.extranet-form-edit__card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--main-fg);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.extranet-form-edit__card--danger .extranet-form-edit__card-title { color: #991b1b; }
.extranet-form-edit__card-title svg { color: var(--main-muted); }
.extranet-form-edit__card--danger .extranet-form-edit__card-title svg { color: #b91c1c; }
.extranet-form-edit__card p,
.extranet-form-edit__card ul {
    margin: 0;
    font-size: 13px;
    color: var(--main-muted);
    line-height: 1.55;
}
.extranet-form-edit__card ul { padding-left: 18px; }
.extranet-form-edit__card li { margin-bottom: 6px; }
.extranet-form-edit__card li:last-child { margin-bottom: 0; }
.extranet-form-edit__card--danger p { color: #7f1d1d; margin-bottom: 12px; }

.extranet-form-edit__meta {
    margin: 0;
    display: grid;
    gap: 6px;
    font-size: 13px;
}
.extranet-form-edit__meta > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
}
.extranet-form-edit__meta dt { color: var(--main-muted); font-weight: 500; }
.extranet-form-edit__meta dd { margin: 0; color: var(--main-fg); font-weight: 500; }

/* Sticky footer (barre d'action en bas)
   Conteneur sticky = bandeau plein-largeur posé sur le bas du viewport,
   sans fond propre (laisse passer la page sur les côtés sur les larges écrans).
   La barre visible est portée par .__sticky-bar-inner : pill centré
   avec shadow marquée + border-top accentuée pour bien la détacher
   du contenu qui défile derrière. */
.extranet-form-edit__sticky-bar {
    position: sticky;
    bottom: 16px;
    left: 0;
    right: 0;
    z-index: 50;
    margin: 32px -16px 0;
    padding: 0 16px;
    pointer-events: none; /* clic seulement sur la pill */
}
.extranet-form-edit__sticky-bar-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 20px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 16px 48px rgba(15, 23, 42, 0.08);
}
.extranet-form-edit__sticky-bar-inner::before {
    /* Petit liseré rouge GIP sur le bord gauche pour signaler l'urgence d'action */
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 2px;
    background: var(--gip-red, #e30613);
    opacity: 0.75;
}
.extranet-form-edit__sticky-bar-inner {
    position: relative;
}
.extranet-form-edit__sticky-hint {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    padding-left: 12px; /* respire après le liseré rouge */
}
.extranet-form-edit__sticky-hint::before {
    content: "ⓘ ";
    color: var(--gip-red, #e30613);
    font-weight: 700;
    margin-right: 4px;
}
@media (max-width: 600px) {
    .extranet-form-edit__sticky-hint { display: none; }
}
.extranet-form-edit__sticky-actions {
    display: flex;
    gap: 10px;
}

/* =========================================================
   Widget priorité étoiles (0-3)
   ========================================================= */
.extranet-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
}
.extranet-rating__star,
.extranet-rating__reset {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    color: #d1d5db;
    line-height: 0;
    transition: color 0.15s, background 0.15s, transform 0.1s;
}
.extranet-rating__star:hover,
.extranet-rating__reset:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}
.extranet-rating__star:focus-visible,
.extranet-rating__reset:focus-visible {
    outline: 2px solid var(--gip-red, #d3424b);
    outline-offset: 2px;
}

/* Étoiles remplies selon data-value (cascade : value="2" → étoiles 1 et 2 colorées) */
.extranet-rating[data-value="1"] .extranet-rating__star[data-rating-btn="1"],
.extranet-rating[data-value="2"] .extranet-rating__star[data-rating-btn="1"],
.extranet-rating[data-value="2"] .extranet-rating__star[data-rating-btn="2"],
.extranet-rating[data-value="3"] .extranet-rating__star[data-rating-btn="1"],
.extranet-rating[data-value="3"] .extranet-rating__star[data-rating-btn="2"],
.extranet-rating[data-value="3"] .extranet-rating__star[data-rating-btn="3"] {
    color: #f59e0b;
}

/* Le bouton reset est plus discret, séparé visuellement */
.extranet-rating__reset {
    margin-left: 6px;
    color: #9ca3af;
    border-left: 1px solid #e5e7eb;
    padding-left: 10px;
    border-radius: 0;
}
.extranet-rating__reset:hover { color: #b91c1c; background: transparent; }

/* Label texte à droite (ex. "Basse" / "Normale" / "Haute") */
.extranet-rating__label {
    margin-left: 8px;
    font-size: 12px;
    color: var(--main-muted);
    font-weight: 500;
    min-width: 60px;
}

/* =========================================================
   Étoiles priorité en lecture seule (partial PriorityStars)
   Utilisé dans List, Show, etc. — non interactif.
   ========================================================= */
.extranet-priority-stars {
    display: inline-flex;
    gap: 1px;
    align-items: center;
    line-height: 0;
    vertical-align: middle;
}
.extranet-priority-stars__star { color: #e5e7eb; display: inline-flex; line-height: 0; }
.extranet-priority-stars[data-value="1"] .extranet-priority-stars__star[data-rank="1"],
.extranet-priority-stars[data-value="2"] .extranet-priority-stars__star[data-rank="1"],
.extranet-priority-stars[data-value="2"] .extranet-priority-stars__star[data-rank="2"],
.extranet-priority-stars[data-value="3"] .extranet-priority-stars__star[data-rank="1"],
.extranet-priority-stars[data-value="3"] .extranet-priority-stars__star[data-rank="2"],
.extranet-priority-stars[data-value="3"] .extranet-priority-stars__star[data-rank="3"] {
    color: #f59e0b;
}

/* =========================================================
   Module Adhérents — pills statuts, banner pending, side actions,
   checkbox group, page publique d'activation.
   ========================================================= */

/* Mapping des statuts adhérents sur les pills extranet-status existantes.
   On reprend la palette : vert published / ambre pending / gris draft /
   gris-barré archived — avec sémantique adhérent. */
.extranet-status--adherent-actif {
    background: rgba(16, 163, 74, 0.12);
    color: var(--accent-green-soft, #047857);
}
.extranet-status--adherent-en_attente_validation {
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
}
.extranet-status--adherent-en_attente_activation {
    background: rgba(37, 99, 235, 0.12);
    color: #1e40af;
}
.extranet-status--adherent-desactive {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Petit chip rôle (Membre / Admin régional / Superadmin / Modérateur / Conseil)
   — sobre, sans couleur, lisible inline dans une cell. */
.extranet-adherent-role {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.05);
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Banner « N adhérents en attente » au-dessus du listing. */
.extranet-pending-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.08), rgba(180, 83, 9, 0.02));
    border: 1px solid rgba(180, 83, 9, 0.2);
    border-radius: 10px;
    color: #78350f;
    font-size: 13px;
}
.extranet-pending-banner__icon {
    flex-shrink: 0;
    color: #b45309;
}
.extranet-pending-banner__body {
    flex: 1;
}
.extranet-pending-banner strong {
    color: #78350f;
}

/* Grille adhérents : on garde la 6-cols par défaut mais on assouplit
   la colonne « statut/rôles » (4e) pour qu'elle absorbe les rôles multiples. */
.extranet-news-list__item--adherent {
    grid-template-columns:
        48px                      /* vignette */
        minmax(0, 2fr)            /* identité */
        minmax(160px, 1fr)        /* région */
        minmax(120px, 1fr)        /* rôle(s) */
        minmax(120px, auto)       /* statut pill */
        auto;                     /* actions kebab */
}

/* Bouton plein-largeur dans une card side */
.extranet-btn--block {
    display: flex !important;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

/* Card actions dans la sidebar du Show */
.contact-detail__card--actions p.contact-detail__action-hint,
.contact-detail__card--danger p.contact-detail__action-hint,
.contact-detail__card--danger > p {
    margin: 8px 0 12px 0;
    font-size: 13px;
    color: var(--main-muted, #64748b);
    line-height: 1.5;
}
.contact-detail__card--danger {
    border: 1px solid rgba(220, 38, 38, 0.2);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.04), transparent 60%);
}
.contact-detail__card--danger .contact-detail__card-title {
    color: var(--gip-red, #dc2626);
}

/* Checkbox group dans une card side */
.extranet-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}
.extranet-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    transition: background 0.12s ease;
}
.extranet-checkbox:hover {
    background: rgba(15, 23, 42, 0.04);
}
.extranet-checkbox input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--gip-red, #dc2626);
    flex-shrink: 0;
}

/* Card list à puces dans les sides */
.extranet-form-edit__card-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}
.extranet-form-edit__card-list li + li { margin-top: 4px; }
.extranet-form-edit__card-hint {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: var(--main-muted, #64748b);
    line-height: 1.5;
}

/* =========================================================
   Page publique /activer-mon-compte — site GIP public.
   Carte centrée, sans dépendance à extranet shell.
   ========================================================= */
.account-activation {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
    font-family: var(--main-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: #0f172a;
}
.account-activation__panel {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 36px 36px 28px;
}
.account-activation__header {
    text-align: center;
    margin-bottom: 24px;
}
.account-activation__logo {
    color: #dc2626;
    margin-bottom: 8px;
}
.account-activation__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.account-activation__title {
    margin: 4px 0 0 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}
.account-activation__intro {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 18px 0;
}
.account-activation__identity {
    background: #f1f5f9;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
}
.account-activation__identity-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.account-activation__identity-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
}
.account-activation__form { margin: 0; }
.account-activation__field { margin-bottom: 18px; }
.account-activation__field > label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.account-activation__input-wrap {
    position: relative;
}
.account-activation__input-wrap input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 14px;
    font-size: 15px;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    transition: border 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.account-activation__input-wrap input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.account-activation__reveal {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-activation__reveal:hover { color: #475569; background: #f1f5f9; }
.account-activation__reveal .ac-eye-off { display: none; }
.account-activation__input-wrap.is-revealed .ac-eye { display: none; }
.account-activation__input-wrap.is-revealed .ac-eye-off { display: block; }

/* Widget de force du mot de passe */
.account-activation__strength {
    margin-top: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.account-activation__strength-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.account-activation__strength-bar > span {
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
    transition: background 0.2s ease;
}
.account-activation__strength[data-level="1"] .account-activation__strength-bar > span:nth-child(-n+1) { background: #ef4444; }
.account-activation__strength[data-level="2"] .account-activation__strength-bar > span:nth-child(-n+2) { background: #f97316; }
.account-activation__strength[data-level="3"] .account-activation__strength-bar > span:nth-child(-n+3) { background: #f59e0b; }
.account-activation__strength[data-level="4"] .account-activation__strength-bar > span:nth-child(-n+4) { background: #84cc16; }
.account-activation__strength[data-level="5"] .account-activation__strength-bar > span:nth-child(-n+5) { background: #16a34a; }
.account-activation__strength-label {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #475569;
}
.account-activation__strength-label span { font-weight: 700; }
.account-activation__strength-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-activation__strength-checks li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}
.account-activation__strength-checks li::before {
    content: "○";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    color: #cbd5e1;
}
.account-activation__strength-checks li.is-ok { color: #047857; }
.account-activation__strength-checks li.is-ok::before { content: "✓"; color: #16a34a; }
.account-activation__strength-note {
    margin: 8px 0 0 0;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

.account-activation__match-feedback {
    margin: 6px 0 0 0;
    min-height: 16px;
    font-size: 12px;
    font-weight: 600;
}
.account-activation__match-feedback.is-ok { color: #16a34a; }
.account-activation__match-feedback.is-ko { color: #ef4444; }

.account-activation__submit {
    margin-top: 8px;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease, transform 0.05s ease;
}
.account-activation__submit:hover { background: #b91c1c; }
.account-activation__submit:active { transform: translateY(1px); }
.account-activation__submit:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.account-activation__expiry {
    margin: 14px 0 0 0;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
}

.account-activation__notice {
    text-align: center;
    padding: 8px 0 12px;
    color: #475569;
}
.account-activation__notice svg {
    color: #f59e0b;
    margin-bottom: 8px;
}
.account-activation__notice h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #0f172a;
}
.account-activation__notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

.account-activation__flashes {
    margin-bottom: 18px;
}
.account-activation__flash {
    margin: 0 0 6px 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.account-activation__flash--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.account-activation__flash--info {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.account-activation__footer {
    text-align: center;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}
.account-activation__footer small {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.3px;
}

@media (max-width: 500px) {
    .account-activation__panel { padding: 28px 22px 22px; }
    .account-activation__title { font-size: 19px; }
}

/* =========================================================
   Module Adhérents — pipeline tabs + bulk assign
   ========================================================= */

/* Onglets pipeline en haut du listing */
.extranet-pipeline-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px 0;
    padding: 6px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 14px;
}
.extranet-pipeline-tab {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.extranet-pipeline-tab__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.extranet-pipeline-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 11px;
    font-weight: 700;
}
.extranet-pipeline-tab:hover {
    background: #ffffff;
    color: #0f172a;
}
.extranet-pipeline-tab.is-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.extranet-pipeline-tab.is-active .extranet-pipeline-tab__count {
    background: var(--gip-red, #e30613);
    color: #ffffff;
}
.extranet-pipeline-tab--imported.is-active .extranet-pipeline-tab__count { background: #b45309; }
.extranet-pipeline-tab--assigned.is-active .extranet-pipeline-tab__count { background: #1e40af; }
.extranet-pipeline-tab--ready.is-active .extranet-pipeline-tab__count    { background: #0891b2; }
.extranet-pipeline-tab--tracking.is-active .extranet-pipeline-tab__count { background: #16a34a; }
@media (max-width: 900px) {
    .extranet-pipeline-tab { min-width: 100%; }
}

/* Pills statut (étend les --adherent-* existantes avec les nouveaux buckets) */
.extranet-status--adherent-imported {
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
}
.extranet-status--adherent-assigned {
    background: rgba(37, 99, 235, 0.12);
    color: #1e40af;
}
.extranet-status--adherent-ready {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}

/* Grid des rows adhérents :
   ⚠ La colonne "régions" a été fusionnée avec "rôle" → 6 colonnes.
   Variante --no-bulk (AdminRégional sans droit de bulk assign) :
   on retire la colonne 28px de checkbox → 5 colonnes alignées. */
.extranet-news-list__item--adherent {
    grid-template-columns:
        28px                       /* checkbox */
        48px                       /* vignette */
        minmax(0, 2fr)             /* identité */
        minmax(200px, 1.6fr)       /* rôle (+ régions si admin régional) */
        minmax(120px, auto)        /* statut pill */
        auto;                      /* actions kebab */
}
.extranet-news-list--no-bulk .extranet-news-list__item--adherent {
    grid-template-columns:
        48px                       /* vignette */
        minmax(0, 2fr)             /* identité */
        minmax(200px, 1.6fr)       /* rôle (+ régions si admin régional) */
        minmax(120px, auto)        /* statut pill */
        auto;                      /* actions kebab */
}
/* Petit suffixe régions accolé après "Admin régional" — un cran plus petit
   et grisé pour rester sous-dominant par rapport au libellé du rôle. */
.extranet-news-list__role-regions {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.extranet-news-list__role-regions svg { color: #94a3b8; flex-shrink: 0; }
.extranet-bulk-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}
.extranet-bulk-cell input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--gip-red, #e30613);
}

/* Barre flottante (apparait quand >=1 row cochée) */
.extranet-bulk-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 60;
    pointer-events: none;
}
.extranet-bulk-bar[hidden] { display: none; }
.extranet-bulk-bar__inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-width: 460px;
    padding: 14px 20px;
    background: #0f172a;
    border-radius: 999px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 8px 28px rgba(15, 23, 42, 0.28);
    color: #f1f5f9;
}
.extranet-bulk-bar__count {
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
}
.extranet-bulk-bar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.extranet-bulk-bar .extranet-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 0;
}
.extranet-bulk-bar .extranet-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
@media (max-width: 600px) {
    .extranet-bulk-bar__inner {
        min-width: auto;
        flex-direction: column;
        gap: 12px;
        border-radius: 18px;
    }
}

/* Modal d'affectation : 2 colonnes (régions / rôles) */
.extranet-modal__dialog--wide { max-width: 720px; }
.extranet-bulk-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 16px 0;
}
@media (max-width: 600px) {
    .extranet-bulk-form { grid-template-columns: 1fr; }
}
.extranet-bulk-form__col {
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.extranet-bulk-form__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.extranet-bulk-form__title svg { color: var(--gip-red, #e30613); }
.extranet-bulk-form__hint {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.extranet-bulk-form__toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(16, 163, 74, 0.06);
    border: 1px solid rgba(16, 163, 74, 0.2);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #166534;
}
.extranet-bulk-form__toggle input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #16a34a;
}
.extranet-bulk-form__toggle small {
    color: #475569;
    font-size: 12px;
    font-weight: 400;
}

/* =========================================================
   Module Adhérents — page d'import
   ========================================================= */
.extranet-import {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
}
@media (max-width: 900px) {
    .extranet-import { grid-template-columns: 1fr; }
}
.extranet-import__intro {
    padding: 16px 18px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    font-size: 14px;
    color: #1e3a8a;
    line-height: 1.55;
}
.extranet-import__intro p { margin: 0 0 8px 0; }
.extranet-import__intro p:last-child { margin-bottom: 0; }
.extranet-import__columns {
    margin-top: 18px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.extranet-import__columns h3 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.extranet-import__cols-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.extranet-import__cols-table th,
.extranet-import__cols-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}
.extranet-import__cols-table th {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.extranet-import__cols-table tr:last-child td { border-bottom: 0; }
.extranet-import__cols-table code {
    background: rgba(15, 23, 42, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.extranet-import__hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}
.extranet-import__dropzone {
    margin-top: 18px;
    padding: 32px 20px;
    text-align: center;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.extranet-import__dropzone.is-drag {
    border-color: var(--gip-red, #e30613);
    background: #fef2f2;
}
.extranet-import__dropzone svg { color: #94a3b8; }
.extranet-import__dropzone-title {
    margin: 10px 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}
.extranet-import__dropzone-or {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.extranet-import__dropzone-selected {
    margin: 12px 0 0 0;
    font-size: 13px;
    color: #475569;
    font-style: italic;
}
.extranet-import__footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.extranet-import__side { display: flex; flex-direction: column; gap: 14px; }
.extranet-import__card {
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
}
.extranet-import__card h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.extranet-import__card ul { margin: 8px 0 0 0; padding-left: 18px; }
.extranet-import__card ul li + li { margin-top: 4px; }
.extranet-import__card--info { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.16); }
.extranet-import__card--info h4 { color: #1e3a8a; }
.extranet-import__card--scope { background: rgba(180, 83, 9, 0.05); border-color: rgba(180, 83, 9, 0.16); }
.extranet-import__card--scope h4 { color: #78350f; }
.extranet-import__card--rules { background: rgba(16, 163, 74, 0.05); border-color: rgba(16, 163, 74, 0.16); }
.extranet-import__card--rules h4 { color: #166534; }

/* =========================================================
   Module Adhérents — simplification V2 : filtre rapide à 3 chips
   ========================================================= */
.extranet-account-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px 0;
}
.extranet-account-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.extranet-account-chip:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}
.extranet-account-chip.is-active {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}
.extranet-account-chip.is-active .extranet-account-chip__count {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.extranet-account-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 11px;
    font-weight: 700;
}
.extranet-account-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.extranet-account-chip__dot--gray  { background: #94a3b8; }
.extranet-account-chip__dot--green { background: #16a34a; }

/* Pills statut détaillé (sur chaque ligne du listing) */
.extranet-status--mail-problem {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    margin-left: 6px;
}
.extranet-no-account-alert--problem { border-color: #fca5a5; background: #fff1f2; }
.extranet-no-account-alert--problem .extranet-no-account-alert__icon { color: #b91c1c; }
.contact-detail__action-hint--problem { border-left: 3px solid #dc2626; padding-left: 10px; }

.extranet-status--adherent-no_account {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}
.extranet-status--adherent-pending_activation {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}
.extranet-status--adherent-active {
    background: rgba(16, 163, 74, 0.12);
    color: #047857;
}
.extranet-status--adherent-disabled {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Pill « Toutes régions » (Super/Conseil/Modo = scope global) */
.extranet-region-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.extranet-region-pill--global {
    background: linear-gradient(180deg, rgba(16, 163, 74, 0.10), rgba(16, 163, 74, 0.04));
    color: #047857;
    border: 1px solid rgba(16, 163, 74, 0.25);
}
.extranet-bulk-form__hint--global {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(180, 83, 9, 0.06);
    border-left: 3px solid #b45309;
    color: #78350f;
    border-radius: 4px;
    font-size: 12px;
}
.extranet-bulk-form__hint--global strong { color: #78350f; }

/* =========================================================
   Module Adhérents — box d'alerte "Sans compte extranet"
   Affichée en haut du listing Super/Modo quand au moins 1 adhérent
   est sans compte BO. Clic = active le mode sélection (bulkMode=1)
   + filtre auto sur "Sans compte". Lien clickable plein largeur.
   ========================================================= */
.extranet-no-account-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin: 0 0 14px 0;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.04));
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-left: 4px solid #dc2626;
    border-radius: 12px;
    color: #7f1d1d;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.06);
}
.extranet-no-account-alert:hover {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.06));
    border-color: rgba(220, 38, 38, 0.35);
}
.extranet-no-account-alert:active { transform: translateY(1px); }

.extranet-no-account-alert__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.extranet-no-account-alert__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.extranet-no-account-alert__body strong {
    font-size: 14px;
    color: #7f1d1d;
    font-weight: 700;
}
.extranet-no-account-alert__count {
    display: inline-block;
    padding: 0 8px;
    background: #dc2626;
    color: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    vertical-align: 1px;
    margin: 0 2px;
}
.extranet-no-account-alert__sub {
    font-size: 12px;
    color: #991b1b;
    font-weight: 500;
}

.extranet-no-account-alert__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #dc2626;
    color: #ffffff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.extranet-no-account-alert:hover .extranet-no-account-alert__cta {
    background: #b91c1c;
}

@media (max-width: 600px) {
    .extranet-no-account-alert { flex-direction: column; align-items: flex-start; gap: 12px; }
    .extranet-no-account-alert__cta { align-self: stretch; justify-content: center; }
}

/* Variante "envoi des liens d'activation" : même structure que la rouge mais
   ton ambre, et le composant est un <button> donc on neutralise les défauts UA. */
.extranet-no-account-alert--send {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.10), rgba(217, 119, 6, 0.04));
    border-color: rgba(217, 119, 6, 0.28);
    border-left-color: #d97706;
    color: #92400e;
    cursor: pointer;
    width: 100%;
    font: inherit;
    text-align: left;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.06);
}
.extranet-no-account-alert--send:hover {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.16), rgba(217, 119, 6, 0.06));
    border-color: rgba(217, 119, 6, 0.4);
}
.extranet-no-account-alert--send .extranet-no-account-alert__icon {
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.25);
}
.extranet-no-account-alert--send .extranet-no-account-alert__body strong { color: #78350f; }
.extranet-no-account-alert--send .extranet-no-account-alert__sub { color: #92400e; }
.extranet-no-account-alert--send .extranet-no-account-alert__count { background: #d97706; }
.extranet-no-account-alert--send .extranet-no-account-alert__cta { background: #d97706; }
.extranet-no-account-alert--send:hover .extranet-no-account-alert__cta { background: #b45309; }

/* Progress bar — utilisée par la modal d'envoi en masse des liens d'activation.
   Conteneur en position relative pour superposer le label sur la barre remplie. */
.extranet-progress {
    position: relative;
    height: 28px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin: 14px 0 8px;
}
.extranet-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.18s ease;
}
.extranet-progress__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
}
.extranet-bulk-send-errors {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 12px;
    color: #7f1d1d;
}
.extranet-bulk-send-errors summary { cursor: pointer; font-weight: 600; }
.extranet-bulk-send-errors ul { margin: 8px 0 0; padding-left: 18px; }
.extranet-bulk-send-errors li { margin: 2px 0; word-break: break-word; }

/* Modal "Quel modèle ?" — Super only. Deux cards en pile pour les variantes. */
.extranet-template-variants {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 6px;
}
.extranet-template-variant {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.extranet-template-variant:hover {
    border-color: #93c5fd;
    background: #f8fafc;
}
.extranet-template-variant:active { transform: translateY(1px); }
.extranet-template-variant__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.extranet-template-variant__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.extranet-template-variant__body strong {
    font-size: 14px;
    color: #0f172a;
    font-weight: 700;
}
.extranet-template-variant__body small {
    font-size: 12px;
    color: #475569;
}
.extranet-template-variant__cols {
    flex: 0 0 auto;
    display: inline-block;
    padding: 4px 10px;
    background: #1e293b;
    color: #ffffff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* =========================================================
   Sélecteurs From / Reply-To dans le picker d'invitation
   ========================================================= */
.extranet-invite-senders {
    border: 1px solid #e1e7f0;
    background: #fafbfd;
    border-radius: 8px;
    padding: 14px 18px 16px;
    margin: 0 0 18px 0;
}
.extranet-invite-senders__legend {
    font-size: 12px;
    font-weight: 600;
    color: #0b3a82;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 6px;
}
.extranet-invite-senders__row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.extranet-invite-senders__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
    min-width: 200px;
}
.extranet-invite-senders__field[hidden] { display: none; }
.extranet-invite-senders__field > span {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}
.extranet-invite-senders__field select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    min-width: 0;
}
.extranet-invite-senders__hint {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: #6b7280;
    font-style: italic;
}

/* =========================================================
   Modale d'envoi invitations (uniformisée avec Réunions)
   ========================================================= */
.extranet-invite-modal .extranet-modal__dialog {
    width: min(720px, 100%);
    max-width: 720px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 24px 26px;
}
.extranet-invite-modal .extranet-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 -4px 16px;
    padding: 0 4px;
}

.extranet-invite-preview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    background: none;
    border: 0;
    color: #2563eb;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}
.extranet-invite-preview-toggle:hover { text-decoration: underline; }

/* Bandeau béta-test : info bloquante visible avant les boutons d'envoi. */
.extranet-invite-betabanner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: #78350f;
    font-size: 13px;
    line-height: 1.45;
}
.extranet-invite-betabanner svg { flex: 0 0 auto; color: #b45309; margin-top: 1px; }
.extranet-invite-betabanner strong { color: #7c2d12; }

/* Conteneur Aperçu + Faire un test sur la même ligne. */
.extranet-invite-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin: 12px 0 0;
}
.extranet-invite-preview-actions .extranet-invite-preview-toggle { margin: 0; }

/* Bouton « Faire un test » : pastille pleine, ton vert (action positive). */
.extranet-invite-test-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #15803d;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.extranet-invite-test-btn:hover { background: #166534; }
.extranet-invite-test-btn:disabled { background: #94a3b8; cursor: wait; }

/* Toast feedback du Test (créé dynamiquement par le JS). */
.extranet-invite-test-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    opacity: 1;
    transition: opacity 0.4s, transform 0.4s;
}
.extranet-invite-test-toast.is-success { background: #15803d; }
.extranet-invite-test-toast.is-error { background: #b91c1c; }
.extranet-invite-test-toast.is-hide { opacity: 0; transform: translateY(8px); }
.extranet-invite-preview {
    margin: 12px 0 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}
.extranet-invite-preview[hidden] { display: none; }
.extranet-invite-preview iframe {
    width: 100%;
    height: 480px;
    border: 0;
    background: #fff;
    display: block;
}

/* Saisie email custom dans le picker Reply-To (option « Autre adresse »). */
.extranet-invite-senders__custom {
    margin-top: 12px;
}
.extranet-invite-senders__custom[hidden] { display: none; }
.extranet-invite-senders__custom input[type="email"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}
.extranet-invite-senders__custom input[type="email"]:invalid:not(:placeholder-shown) {
    border-color: #dc2626;
}
.extranet-invite-senders__error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #dc2626;
}
.extranet-invite-senders__error[hidden] { display: none; }

/* Badge « Adhérent » dans le picker d'invitation (rows fe_users mixées
   avec les contacts CRM). Discret mais immédiatement repérable. */
.extranet-badge--adherent {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
    vertical-align: middle;
}
.extranet-invite-row.is-adherent {
    background: linear-gradient(90deg, rgba(220, 252, 231, 0.35) 0%, transparent 60%);
}

/* =========================================================
   Toggle Source (Tous / Adhérents GIP / Public) du picker invitations.
   Segmented control inline, toujours visible en tête de la toolbar.
   ========================================================= */
.extranet-invite-toolbar__sources {
    display: inline-flex;
    gap: 0;
    margin: 0 0 14px 0;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 3px;
    background: #f9fafb;
    overflow: hidden;
}
.extranet-invite-toolbar__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.extranet-invite-toolbar__source:hover {
    background: #fff;
    color: #0b3a82;
}
/* État actif : on ajoute le sélecteur [aria-selected="true"] en plus de
   `.is-active` pour garantir le rendu sélectionné quel que soit le mode
   (lien SSR pour Évènement, bouton JS pour Réunion). `!important` sur
   background/color pour neutraliser un éventuel :hover concurrent. */
.extranet-invite-toolbar__source.is-active,
.extranet-invite-toolbar__source[aria-selected="true"] {
    background: #0b3a82 !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(11, 58, 130, 0.25);
}
.extranet-invite-toolbar__source.is-active:hover,
.extranet-invite-toolbar__source[aria-selected="true"]:hover {
    background: #0b3a82 !important;
    color: #fff !important;
}
/* Variante adhérent : ton vert quand actif (cohérence avec le badge). */
.extranet-invite-toolbar__source--adherent.is-active,
.extranet-invite-toolbar__source--adherent[aria-selected="true"] {
    background: #16a34a !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25);
}
.extranet-invite-toolbar__source--adherent.is-active:hover,
.extranet-invite-toolbar__source--adherent[aria-selected="true"]:hover {
    background: #16a34a !important;
}

/* Quand le segmented Source est intégré dans une .extranet-invite-toolbar__row
   (et non plus standalone au-dessus), on retire la marge basse et on aligne
   verticalement avec les autres champs/boutons de la row. */
.extranet-invite-toolbar__row .extranet-invite-toolbar__sources {
    margin: 0;
    flex: 0 0 auto;
    align-self: center;
}

/* =========================================================
   Refonte UX page Invitations Évènement (Invite.html)
   - Layout 2 colonnes : main (filtres + table) + sidebar sticky (carte event)
   - Hero d'intro avec stats clés en bandeau
   - Toolbar encadrée dans une card distincte
   ========================================================= */
.extranet-invite-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
    margin-top: 16px;
}
.extranet-invite-layout__main {
    min-width: 0; /* essentiel pour que les tableaux ne débordent pas */
}
.extranet-invite-layout__aside {
    /* position: sticky ne marche que si le parent .extranet-invite-layout
       n'est pas en overflow:hidden — vérifier que les ancêtres laissent
       passer le sticky. */
}
.extranet-invite-layout__sticky {
    position: sticky;
    top: 16px;
}
@media (max-width: 1023px) {
    .extranet-invite-layout {
        grid-template-columns: 1fr;
    }
    .extranet-invite-layout__sticky { position: static; }
}

/* Hero d'intro (haut de la zone principale) ---------------------- */
.extranet-invite-hero {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: linear-gradient(135deg, #f7f9fc 0%, #eef2f7 100%);
    border: 1px solid #e1e7f0;
    border-radius: 12px;
    margin: 0 0 18px 0;
}
.extranet-invite-hero__intro {
    flex: 1 1 320px;
    min-width: 0;
}
.extranet-invite-hero__title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0b3a82;
}
.extranet-invite-hero__lead {
    margin: 0;
    font-size: 13.5px;
    color: #4b5563;
    line-height: 1.5;
}
.extranet-invite-hero__stats {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.extranet-invite-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e1e7f0;
    border-radius: 8px;
    min-width: 96px;
}
.extranet-invite-hero__stat strong {
    font-size: 22px;
    font-weight: 700;
    color: #0b3a82;
    line-height: 1.1;
}
.extranet-invite-hero__stat span {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 3px;
}
.extranet-invite-hero__stat.is-muted strong { color: #94a3b8; }
.extranet-invite-hero__stat.is-highlight {
    background: #dcfce7;
    border-color: #86efac;
}
.extranet-invite-hero__stat.is-highlight strong { color: #14532d; }

/* Toolbar encadrée (modifier `.extranet-invite-toolbar--boxed`) -- */
.extranet-invite-toolbar--boxed {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* Carte Évènement variante verticale (sidebar) -------------------
   Empilage simple en BLOC (pas de grid hérité de la version horizontale).
   `display: block` court-circuite le `display: grid` du parent, les 3
   enfants (thumb → body → actions) s'empilent naturellement dans le flux. */
.extranet-event-card--vertical {
    display: block;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e7f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* Thumb pleine largeur + ratio fixe — l'image cover s'adapte quelle que
   soit la largeur de la sidebar. */
.extranet-event-card--vertical .extranet-event-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    background: rgba(11, 58, 130, 0.05);
    display: block;
    overflow: hidden;
}
.extranet-event-card--vertical .extranet-event-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.extranet-event-card--vertical .extranet-event-card__thumb .extranet-event-card__icon {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.extranet-event-card--vertical .extranet-event-card__body {
    padding: 16px 18px 4px;
}
.extranet-event-card--vertical .extranet-event-card__title {
    font-size: 16px;
    margin: 0 0 12px;
    line-height: 1.3;
}
.extranet-event-card--vertical .extranet-event-card__meta {
    font-size: 13px;
    gap: 6px;
}
.extranet-event-card--vertical .extranet-event-card__row {
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: baseline;
}
.extranet-event-card--vertical .extranet-event-card__row dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #6b7280;
}
.extranet-event-card--vertical .extranet-event-card__row dd {
    font-size: 13px;
    color: #222;
    line-height: 1.4;
}
.extranet-event-card--vertical .extranet-event-card__actions {
    padding: 12px 18px 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
    /* En display:block, plus de align-self/justify-self à gérer — le bloc
       prend naturellement toute la largeur. */
}

/* =========================================================
   Hero plein largeur pour la page Inviter Évènement
   Image de l'évènement en background + overlay dégradé sombre
   pour la lisibilité du texte en blanc.
   ========================================================= */
.extranet-invite-hero-event {
    position: relative;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 22px 0;
    background: linear-gradient(135deg, #0b3a82 0%, #1c5fc0 100%);
    color: #fff;
    isolation: isolate; /* z-index ::before correctement scopé */
}
.extranet-invite-hero-event__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.extranet-invite-hero-event__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.65) saturate(0.9);
}
/* Overlay dégradé pour garantir la lisibilité quelle que soit l'image */
.extranet-invite-hero-event.has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(11, 58, 130, 0.85) 0%, rgba(11, 58, 130, 0.5) 60%, rgba(0, 0, 0, 0.45) 100%);
}
.extranet-invite-hero-event__inner {
    position: relative;
    z-index: 1;
    padding: 22px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.extranet-invite-hero-event__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}
.extranet-invite-hero-event__back:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.extranet-invite-hero-event__title-row {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
}
.extranet-invite-hero-event__eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}
.extranet-invite-hero-event__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.extranet-invite-hero-event__meta {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 13px;
    opacity: 0.95;
}
.extranet-invite-hero-event__meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.extranet-invite-hero-event__stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.extranet-invite-hero-event__stat {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 10px 16px;
    text-align: center;
    min-width: 110px;
    backdrop-filter: blur(6px);
}
.extranet-invite-hero-event__stat strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.extranet-invite-hero-event__stat span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.85;
}
.extranet-invite-hero-event__stat.is-highlight {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(134, 239, 172, 0.6);
}
.extranet-invite-hero-event__stat.is-muted {
    opacity: 0.75;
}

@media (max-width: 720px) {
    .extranet-invite-hero-event__title { font-size: 22px; }
    .extranet-invite-hero-event__title-row { align-items: stretch; }
    .extranet-invite-hero-event__stats { width: 100%; }
    .extranet-invite-hero-event__stat { flex: 1 1 100px; }
}

/* CTA principal sur le hero (ex. « Inviter des contacts » sur Reservations) */
.extranet-invite-hero-event__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.extranet-invite-hero-event__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    color: #0b3a82;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.extranet-invite-hero-event__cta:hover {
    background: #fff;
    color: #0b3a82;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   Complétude minimale avant publication (titre, date, description, photo)
   + bandeau modo « Publication demandée » (refus d'office avec motif).
   ========================================================================= */
.extranet-form__required {
  color: #b91c1c;
  font-weight: 700;
  margin-left: 2px;
}
.extranet-form__notice--requirements {
  margin: 0 0 18px;
}
.extranet-form__notice--error {
  background: rgba(220, 38, 38, 0.06);
  color: #7f1d1d;
  border: 1px solid rgba(220, 38, 38, 0.3);
  margin: 0 0 18px;
}
.extranet-form__notice--error ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.extranet-form__field.is-missing .extranet-form__input,
.extranet-form__field.is-missing .ck.ck-editor__editable,
.extranet-dropzone.is-missing {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.extranet-deletion-banner--moderation {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.3);
  color: #1e3a8a;
}
.extranet-deletion-banner--moderation .extranet-deletion-banner__icon { color: #2563eb; }
.extranet-deletion-banner--moderation .extranet-deletion-banner__content strong { color: #1e3a8a; }
.extranet-deletion-banner--moderation .extranet-deletion-banner__content p { color: #1e40af; }
.extranet-reject-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.extranet-reject-form .extranet-form__input--textarea {
  min-height: 56px;
  background: #fff;
}
.extranet-reject-form .extranet-deletion-banner__actions {
  justify-content: flex-start;
}

/* ----- Bandeau « Se connecter comme » (simulation de session) ----- */
/* Affiché au-dessus de la topbar sur toutes les pages du shell tant que la
   session porte la clé tx_extranet_impersonator. Ambre : distinct du futur
   bandeau « Mode démo ». */
.extranet-impersonation {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  background: #b45309;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  border-bottom: 2px solid #78350f;
}
.extranet-impersonation__text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.extranet-impersonation__text svg { flex-shrink: 0; }
.extranet-impersonation__text strong { font-weight: 700; }
.extranet-impersonation__form { margin: 0; flex-shrink: 0; }
.extranet-impersonation__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: #fff;
  color: #78350f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.extranet-impersonation__button:hover { background: #fef3c7; }
.extranet-impersonation__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) {
  .extranet-impersonation { padding: 8px 12px; flex-wrap: wrap; }
}

/* Bouton « Se connecter comme » dans la fiche adhérent : form POST en bloc. */
.extranet-impersonate-form { margin: 0; }
.extranet-impersonate-form .extranet-btn { width: 100%; }

/* ----- Mode démo : interrupteur topbar + bandeau ----- */
/* Violet : distinct du bandeau ambre « Se connecter comme ». */
.extranet-topbar__demo-form { margin: 0; display: flex; align-items: center; }
.extranet-topbar__demo-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #d8d2e6;
  border-radius: 999px;
  background: #fff;
  color: #4c1d95;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.extranet-topbar__demo-switch:hover { background: #f5f3ff; }
.extranet-topbar__demo-switch:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.extranet-topbar__demo-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.15s ease;
}
.extranet-topbar__demo-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.15s ease;
}
.extranet-topbar__demo-switch.is-on { border-color: #7c3aed; background: #ede9fe; }
.extranet-topbar__demo-switch.is-on .extranet-topbar__demo-track { background: #7c3aed; }
.extranet-topbar__demo-switch.is-on .extranet-topbar__demo-knob { left: 16px; }
@media (max-width: 720px) {
  .extranet-topbar__demo-label { display: none; }
}

.extranet-demo-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  background: #5b21b6;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  border-bottom: 2px solid #3b0764;
}
.extranet-demo-banner__text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.extranet-demo-banner__text svg { flex-shrink: 0; }
.extranet-demo-banner__form { margin: 0; flex-shrink: 0; }
.extranet-demo-banner__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: #fff;
  color: #3b0764;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.extranet-demo-banner__button:hover { background: #ede9fe; }
.extranet-demo-banner__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) {
  .extranet-demo-banner { padding: 8px 12px; flex-wrap: wrap; }
}
.extranet-demo-banner__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.extranet-demo-banner__button--ghost { background: transparent; color: #fff; }
.extranet-demo-banner__button--ghost:hover { background: rgba(255, 255, 255, 0.15); }
.extranet-demo-notice {
  flex-shrink: 0;
  padding: 8px 24px;
  background: #ede9fe;
  color: #3b0764;
  font-size: 14px;
  border-bottom: 1px solid #c4b5fd;
}