:root{
  /* A2Zen — Palette: Bleu marine / Blanc / Rouge */
  --navy:#0b1b3a;
  --navy-2:#0f2a58;

  --red:#DC143C;      /* Crimson */
  --red-2:#B0102E;    /* Darker red for hover */
  --red-rgb:220, 20, 60;

  --bg:#ffffff;
  --card:#ffffff;

  --text:var(--navy);
  --muted:rgba(11, 27, 58, .72);
  --line:rgba(11, 27, 58, .14);

  --shadow:0 12px 28px rgba(9, 20, 41, .10);
  --radius:14px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
a{color:inherit;}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  height:96px;
  background:linear-gradient(90deg, var(--navy), var(--navy-2));
  color:white;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-bottom:3px solid var(--red);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.topbar__left{display:flex;align-items:center;gap:14px;min-width:0;flex:1;}
.topbar__right{display:flex;align-items:center;gap:12px;}

.icon-btn{
  height:38px;width:38px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:white;
  border-radius:10px;
  cursor:pointer;
}

.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand__logo{
  width:38px;height:38px;
  border-radius:12px;
  display:grid;place-items:center;
  background:transparent;
  border:none;
  padding:0;
}
.brand__logo .a2z-mark{width:38px;height:38px;display:block;}
.brand__text{display:flex;flex-direction:column;min-width:0;}
.brand__name{font-weight:900;letter-spacing:.2px;}
.brand__tagline{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.signature{font-weight:700;opacity:.95;white-space:nowrap;}

/* Layout */
.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  min-height:calc(100vh - 96px);
}

.sidebar{
  background:linear-gradient(180deg, var(--navy), var(--navy-2));
  color:white;
  padding:14px;
  border-right:1px solid rgba(255,255,255,.10);
}
.sidebar__header{
  padding:10px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
  box-shadow: inset 0 -2px 0 rgba(var(--red-rgb), .85);
}
.sidebar__brand{display:flex;align-items:flex-start;gap:12px;}
.sidebar__logo{width:34px;height:34px;flex:0 0 34px;opacity:.95;}
.sidebar__logo .a2z-mark{width:34px;height:34px;display:block;}
.sidebar__suite-name{font-weight:900;letter-spacing:.2px;}
.sidebar__suite-tagline{font-size:12px;opacity:.9;margin-top:2px;}
.sidebar__suite-sign{font-size:12px;opacity:.9;margin-top:6px;font-weight:700;}
.sidebar__footer{
  margin-top:18px;
  padding:10px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
}
.muted-on-navy{opacity:.85;font-size:12px;}

/* Breadcrumb */
.breadcrumb{margin-left:10px;min-width:0;}
.breadcrumb ol{list-style:none;display:flex;align-items:center;gap:8px;margin:0;padding:0;}
.breadcrumb li{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.breadcrumb li+li::before{content:"›";opacity:.9;}
.breadcrumb a{color:rgba(255,255,255,.92);text-decoration:none;}
.breadcrumb a[aria-current="page"]{font-weight:900;color:white;}

/* Side nav */
.snav{display:flex;flex-direction:column;gap:6px;}
.snav__item,
.snav__sub,
.snav__summaryLink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:rgba(255,255,255,.92);
}
.snav__item:hover,
.snav__sub:hover,
.snav__summaryLink:hover{background:rgba(255,255,255,.10);}

.snav__group{border-radius:12px;}
.snav__group > summary{
  list-style:none;
  cursor:pointer;
  padding:0;

  /* Séparateur rouge entre section (summary) et fonctionnalités (sous-liens) */
  border-bottom:1px solid rgba(var(--red-rgb), .75);
  padding-bottom:8px;
  margin-bottom:6px;
}
.snav__sumIcon{display:none;}
.snav__summaryLink{width:100%;}

.snav__sub{padding-left:42px;font-size:13px;}
.snav__sub.is-active,
.snav__item.is-active{background:rgba(var(--red-rgb), .22);color:white;font-weight:900;}

/* Main */
.main{padding:22px;}
.page-head h1{margin:0 0 6px 0;}
.muted{color:var(--muted);margin:0;}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;}
.card__title{font-weight:900;margin-bottom:10px;}

/* Cards “chapitres” (mêmes codes couleurs que topbar/sidebar) */
.card--chapter{padding:0;overflow:hidden;}
.card__head{
  background:linear-gradient(90deg, var(--navy), var(--navy-2));
  color:#fff;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 -2px 0 rgba(var(--red-rgb), .85);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.card__head .card__title{margin:0;color:#fff;}
.card__head .card__subtitle{margin:6px 0 0;color:rgba(255,255,255,.86);font-size:12px;}
.card__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.card__body{padding:16px;}

.stack{display:flex;flex-direction:column;gap:10px;}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(15,42,88,.18);background:#fff;text-decoration:none;font-weight:800;}
.btn:hover{border-color:var(--red);}

.page-footer{margin-top:22px;color:var(--muted);font-size:12px;}

@media (max-width:980px){
  .layout{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .signature{display:none;}
}

.btn--primary{background:var(--red);color:#fff;border-color:var(--red);}
.btn--primary:hover{background:var(--red-2);border-color:var(--red-2);}

.accent{color:var(--red);}

/* v1.1 – critères par impact + criticité */
.heatmap{display:grid;gap:6px;align-items:stretch;justify-content:start;margin-top:12px}
.heatmap__cell{border:1px solid rgba(255,255,255,.14);border-radius:10px;min-width:42px;min-height:38px;display:flex;align-items:center;justify-content:center;font-weight:800}
.heatmap__cell small{font-weight:700;opacity:.9}

.matrix-grid{overflow:auto}
.matrix-grid table{min-width:980px}
.matrix-grid th{white-space:nowrap}
.matrix-grid textarea{min-height:56px;resize:vertical}

.table .input--color{padding:0;height:36px;width:44px}

/* =========================================================
   A2Zen — Volets / sous-parties (v1)
   Utilisation: encadrer une sous-zone dans un chapitre
   ========================================================= */

.a2z-volet{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.a2z-volet__head{
  background:rgba(11,27,58,.06);
  border-bottom:1px solid var(--line);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.a2z-volet__title{margin:0;font-weight:900;}
.a2z-volet__meta{font-size:12px;color:var(--muted);}
.a2z-volet__body{padding:12px 14px;}

/* Sous-titres de sections (visuel “sidebar separator”) */
.a2z-section-label{
  margin:18px 0 10px;
  font-weight:900;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.a2z-section-label::after{
  content:"";
  height:2px;
  flex:1;
  background:rgba(var(--red-rgb), .65);
  border-radius:999px;
}

/* Liste d’actions rapide */
.a2z-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.a2z-actions .btn{flex:0 0 auto;}

/* Tables plus “dashboard” */
.table{width:100%;border-collapse:separate;border-spacing:0;}
.table thead th{
  position:sticky;
  top:0;
  background:rgba(11,27,58,.06);
  border-bottom:1px solid var(--line);
}
.table tbody td{border-bottom:1px solid rgba(11,27,58,.10);}
.table tbody tr:hover td{background:rgba(11,27,58,.03);}

/* A2Zen — stack vertical (page processus-modeliser) */
.a2z-stack{display:flex;flex-direction:column;gap:16px;}


/* A2Zen — logo fix */
.navbar-brand{display:flex;align-items:center;gap:10px}
.navbar-brand .regular-logo{height:28px;width:auto;display:block}
.topbar__left{display:flex;align-items:center;gap:14px}
.brand__text{display:flex;flex-direction:column;line-height:1.1}