/* ==========================================================================
   IT LAND — Design System (thème CLAIR)
   Centre de formation IT & Digital — Tunisie
   Feuille de style autonome. Dépendance externe: Google Fonts uniquement.
   Palette dérivée du logo (bleu clair, fonds blancs, texte foncé).
   ========================================================================== */

/* ---------------------------------------------------------------- Variables */
:root {
  /* Fonds & surfaces */
  --bg: #f4f8fc;
  --surface: #ffffff;
  --surface-2: #eef4fb;
  --border: #e2e9f2;

  /* Texte */
  --text: #243244;
  --ink: #494644;
  --muted: #5a6879;

  /* Primaire (bleu logo) */
  --primary: #0d96d2;
  --primary-600: #007daf;
  --primary-050: #e7f5fc;
  --primary-300: #6ec8f2;
  --accent: #37a9e1;

  /* Sémantique */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --success-050: #eafaf0;
  --warning-050: #fdf3e6;
  --danger-050: #fdeaea;

  /* Ombres douces bleutées */
  --shadow-xs: 0 1px 2px rgba(36, 50, 68, .06);
  --shadow-sm: 0 2px 6px rgba(36, 50, 68, .07);
  --shadow-md: 0 8px 24px rgba(13, 150, 210, .08);
  --shadow-lg: 0 18px 46px rgba(13, 150, 210, .12);
  --shadow-primary: 0 10px 26px rgba(13, 150, 210, .28);

  /* Dégradés */
  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-soft: linear-gradient(135deg, #e7f5fc 0%, #f4f8fc 100%);
  --grad-vignette: linear-gradient(135deg, #0d96d2 0%, #37a9e1 55%, #6ec8f2 100%);

  /* Rayons */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Typo */
  --font-title: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1320px;
  --header-h: 74px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;

  /* Transitions */
  --t: .22s cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------- Reset base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--primary-600); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--primary); }
button { font-family: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  color: var(--text);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
:focus-visible {
  outline: 3px solid var(--primary-300);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: var(--primary-050); color: var(--primary-600); }

/* --------------------------------------------------------- Grilles & layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--tight { padding: 44px 0; }
.section--alt { background: var(--surface-2); }

.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-title { margin-bottom: .5rem; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-600);
  background: var(--primary-050);
  padding: .35rem .85rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.items-center { align-items: center; }
.wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; }
.w-full { width: 100%; }

/* --------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  padding: .82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; }

/* Un bouton désactivé ressemblait EXACTEMENT à un bouton actif : même dégradé,
   même curseur, même effet d'enfoncement au clic. On cliquait, rien ne se
   passait, et l'on concluait que le bouton était cassé. Il ne l'était pas — il
   était fermé, et rien ne le disait. La règle vaut pour tout le back-office. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  background-image: none;
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .75;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: var(--surface-2); color: var(--muted); transform: none; }
.btn:disabled:active,
.btn[disabled]:active { transform: none; }

/* Un message de validation qui s'affiche à la couleur du corps de page ne se
   distingue pas d'une explication. Cette classe était posée sur cinq champs et
   définie nulle part. */
.form-error {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--danger);
}
.form-error::before { content: "!"; flex: none; font-weight: 800; }

.btn-primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(13, 150, 210, .38); }

.btn-outline {
  background: var(--surface);
  color: var(--primary-600);
  border-color: var(--primary-300);
}
.btn-outline:hover { background: var(--primary-050); color: var(--primary-600); border-color: var(--primary); }

.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); color: var(--primary-600); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { color: #fff; background: #c11f1f; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { color: #fff; background: #128a3f; }

.btn-sm { padding: .55rem 1rem; font-size: .85rem; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: .6rem; border-radius: var(--r-md); }
.btn-xs { padding: .3rem .6rem; font-size: .76rem; }

/* Actions de ligne dans les tableaux (boutons compacts a libelles) */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.row-actions form { display: inline; margin: 0; }
.row-actions .btn {
  padding: .4rem .75rem;
  font-size: .8rem;
  border-radius: var(--r-md);
  white-space: nowrap;
  box-shadow: none;
}
.row-actions .btn-primary:hover {
  transform: none;
  box-shadow: 0 6px 16px rgba(13, 150, 210, .25);
}

.btn-danger-ghost { background: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: rgba(220, 38, 38, .09); color: #c11f1f; }

/* Menu d'actions "kebab" (menu-list positionne en fixed via JS -> jamais coupe par .table-wrap) */
.actions-menu { position: relative; display: inline-block; }
.menu-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.menu-trigger:hover, .actions-menu.open .menu-trigger {
  color: var(--primary-600); border-color: var(--primary-300); background: var(--primary-050);
}
.menu-trigger svg { width: 18px; height: 18px; }
.menu-list {
  display: none; position: fixed; min-width: 186px; max-width: 250px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 1200;
}
.actions-menu.open .menu-list { display: block; }
.menu-list form { margin: 0; display: block; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; color: var(--text);
  font-size: .88rem; font-weight: 500; line-height: 1.2;
  background: transparent; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; text-decoration: none; white-space: nowrap;
}
.menu-item:hover { background: var(--surface-2); color: var(--primary-600); }
.menu-item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.menu-item--danger { color: var(--danger); }
.menu-item--danger:hover { background: var(--danger-050); color: #c11f1f; }
.menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* Cellule d'actions de tableau */
td.actions, th.actions, .cell-actions {
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

/* --------------------------------------------------------------- Cartes */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card-body { padding: 22px; }
.card-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-head h3 { margin: 0; font-size: 1.1rem; }
.card-foot { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-300); }

/* Carte formation */
.formation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.formation-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-300); }
.formation-card .vignette {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--grad-vignette);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  overflow: hidden;
}
.formation-card .vignette::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px 120px at 80% 20%, rgba(255,255,255,.35), transparent 70%);
}
.formation-card .vignette .ico { font-size: 2.6rem; position: relative; z-index: 1; }
/* Placeholder « sans image » branché : monogramme + catégorie (évite l'aplat vide). */
.formation-card .vignette-ph { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; }
.formation-card .vignette-ph .mono { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; color: rgba(255,255,255,.95); letter-spacing: .02em; text-shadow: 0 6px 22px rgba(0,0,0,.22); }
.formation-card .vignette-ph .lbl { font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.formation-card .vignette .cat-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--primary-600);
  font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: var(--r-pill);
}
.formation-card .fc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.formation-card h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.formation-card .fc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: .6rem 0 1rem; color: var(--muted); font-size: .82rem; }
.formation-card .fc-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.formation-card .fc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); }
.formation-card .price { font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; color: var(--text); }
.formation-card .price small { font-size: .72rem; color: var(--muted); font-weight: 400; }

/* Stat / KPI */
.stat-card, .kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-xs);
  display: flex; align-items: center; gap: 16px;
}
.stat-card .stat-ico, .kpi .kpi-ico {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  background: var(--grad-primary);
  box-shadow: var(--shadow-md);
}
.stat-card .stat-val, .kpi .kpi-val { font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--text); }
.stat-card .stat-lbl, .kpi .kpi-lbl { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.kpi .kpi-trend { font-size: .8rem; font-weight: 600; }
.kpi .kpi-trend.up { color: var(--success); }
.kpi .kpi-trend.down { color: var(--danger); }

/* --------------------------------------------------------- Badges / tags */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600;
  padding: .28rem .7rem; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border);
}
.badge-primary { background: var(--primary-050); color: var(--primary-600); border-color: var(--primary-300); }
.badge-success { background: var(--success-050); color: var(--success); border-color: #b6e6c6; }
.badge-warning { background: var(--warning-050); color: var(--warning); border-color: #f2d59b; }
.badge-danger  { background: var(--danger-050); color: var(--danger); border-color: #f2b6b6; }
.badge-cert {
  background: linear-gradient(135deg, #fff7e0, #fdefc4);
  color: #a56d00; border-color: #f0d99a;
}
.badge-cert::before { content: "🏅"; }

.tag {
  display: inline-block; font-size: .78rem; color: var(--muted);
  background: var(--surface-2); padding: .3rem .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  padding: .5rem 1rem; border-radius: var(--r-pill); cursor: pointer;
  transition: all var(--t);
}
.chip:hover { border-color: var(--primary-300); color: var(--primary-600); }
.chip.active { background: var(--primary-050); border-color: var(--primary); color: var(--primary-600); font-weight: 600; }
.chip .x { opacity: .6; }

/* ------------------------------------------------------------- Header public */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }
.site-header .brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.site-header .brand img { height: 38px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .9rem; border-radius: var(--r-md);
  color: var(--text); font-weight: 500; font-size: .95rem;
  transition: all var(--t);
}
.main-nav a:hover, .main-nav a.active { background: var(--primary-050); color: var(--primary-600); }

.has-dropdown { position: relative; }
.has-dropdown > a::after { content: "▾"; font-size: .7rem; opacity: .7; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 240px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--t); z-index: 950;
}
.has-dropdown:hover .dropdown, .has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a { display: block; padding: .6rem .8rem; border-radius: var(--r-sm); font-weight: 500; }
.dropdown a:hover { background: var(--surface-2); }
.dropdown a small { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.header-actions .admin-link { font-size: .82rem; color: var(--muted); }
.header-actions .admin-link:hover { color: var(--primary-600); }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-md); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px; position: relative;
  transition: all var(--t);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.site-header.open .nav-toggle span { background: transparent; }
.site-header.open .nav-toggle span::before { transform: rotate(45deg); top: 0; }
.site-header.open .nav-toggle span::after { transform: rotate(-45deg); top: 0; }

/* ------------------------------------------------------------- Footer clair */
/* ------------------------------------------------------------- Footer (sombre premium) */
.site-footer {
  position: relative;
  color: #eaf3fb;
  background:
    radial-gradient(1200px 380px at 12% -10%, rgba(13,150,210,.26), transparent 60%),
    linear-gradient(160deg, #0d2c47, #0a2136);
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-300), transparent);
}
.site-footer::after {
  content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(110,200,242,.13), transparent 65%);
}

/* --- bandeau newsletter --- */
.site-footer .ft-news { position: relative; border-bottom: 1px solid rgba(255,255,255,.10); }
.site-footer .ft-news-in { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding-block: 34px; }
.site-footer .ft-news-copy h3 { font-family: var(--font-title); font-size: 1.3rem; color: #fff; line-height: 1.25; }
.site-footer .ft-news-copy p { color: #9db4c9; font-size: .93rem; margin-top: .35rem; max-width: 48ch; }
.site-footer .ft-news-form { flex: none; }
.site-footer .ft-news-field { display: flex; gap: 10px; }
.site-footer .ft-news-field input {
  width: 290px; max-width: 52vw; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
  color: #fff; font-size: .95rem; font-family: inherit;
}
.site-footer .ft-news-field input::placeholder { color: #8aa2b8; }
.site-footer .ft-news-field input:focus { outline: none; border-color: var(--primary-300); background: rgba(255,255,255,.10); }
.site-footer .ft-news-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border: 0; border-radius: var(--r-md);
  cursor: pointer; background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff; font-weight: 700; font-size: .95rem; font-family: inherit; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13,150,210,.35); transition: transform var(--t);
}
.site-footer .ft-news-btn:hover { transform: translateY(-2px); }
.site-footer .ft-news-err { display: block; margin-top: .5rem; color: #ffb4b4; font-size: .85rem; }
.site-footer .ft-news-ok {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: var(--r-md);
  background: rgba(46,204,113,.14); border: 1px solid rgba(46,204,113,.35); color: #b6f0cf; font-size: .92rem; font-weight: 600;
}

/* --- grille principale --- */
.site-footer .ft-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.05fr; gap: 44px; padding: 52px 0 40px; }
.site-footer .ft-logo { height: 38px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.site-footer .ft-about p { color: #9db4c9; font-size: .9rem; line-height: 1.7; max-width: 40ch; }
.site-footer .ft-social { display: flex; gap: 10px; margin-top: 20px; }
.site-footer .ft-social a {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  color: #cfe3f3; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); transition: all var(--t);
}
.site-footer .ft-social a:hover {
  color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-600));
  border-color: transparent; transform: translateY(-3px);
}
.site-footer .ft-social svg { width: 18px; height: 18px; }

.site-footer .ft-col h4 {
  font-family: var(--font-title); font-size: .82rem; text-transform: uppercase; letter-spacing: .09em;
  color: #fff; margin-bottom: 18px; position: relative; padding-bottom: 10px;
}
.site-footer .ft-col h4::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-300));
}
.site-footer .ft-col ul { list-style: none; }
.site-footer .ft-col li { margin-bottom: 11px; }
.site-footer .ft-col a { color: #9db4c9; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; transition: color var(--t); }
.site-footer .ft-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary-300); opacity: 0; transform: translateX(-4px); transition: all var(--t); }
.site-footer .ft-col a:hover { color: #fff; }
.site-footer .ft-col a:hover .ft-dot { opacity: 1; transform: translateX(0); }

/* colonne contact = cartes icône */
.site-footer .ft-contact li { display: flex; gap: 12px; margin-bottom: 16px; color: #9db4c9; font-size: .88rem; line-height: 1.5; }
.site-footer .ft-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(13,150,210,.16); color: var(--primary-300); border: 1px solid rgba(110,200,242,.22);
}
.site-footer .ft-contact b { display: block; color: #dfeaf4; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.site-footer .ft-contact a { color: #9db4c9; }
.site-footer .ft-contact a:hover { color: #fff; }

/* --- barre de bas --- */
.site-footer .ft-bottom { border-top: 1px solid rgba(255,255,255,.10); }
.site-footer .ft-bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; flex-wrap: wrap; }
.site-footer .ft-bottom p { color: #8aa2b8; font-size: .82rem; }
.site-footer .ft-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer .ft-legal a { color: #8aa2b8; font-size: .82rem; }
.site-footer .ft-legal a:hover { color: #fff; }

/* ------------------------------------------------------------- Partenaires (bande logos) */
.partners-grid { margin-top: 8px; padding: 6px 0 10px; }
/* Les cartes gardent leur taille : c'est la piste qui les fait défiler.
   `overflow:hidden` sur la fenêtre rognerait l'ombre portée au survol, d'où le
   peu de rembourrage vertical ci-dessus. */
.partners-grid .partner-card { width: 190px; }
@media (max-width:640px){ .partners-grid .partner-card { width: 150px; } }
.partner-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 104px; padding: 20px 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 12px 28px rgba(20,40,70,.10)); border-color: var(--primary-300); }
.partner-card img {
  max-height: 48px; max-width: 82%; object-fit: contain;
  /* Les logos etaient desatures et attenues, la couleur ne revenant qu'au
     survol : sur mobile, ou il n'y a pas de survol, ils restaient gris.
     Un logo d'organisme certificateur est une preuve — il doit se voir. */
  transition: transform var(--t);
}
.partner-card:hover img { transform: scale(1.04); }
.partner-mono {
  font-family: var(--font-title); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--primary-600); letter-spacing: .02em;
}
.partner-name { font-size: .82rem; color: var(--muted); font-weight: 600; }
.partner-card:hover .partner-name { color: var(--text); }

/* ------------------------------------------------------------- Layout admin */
.admin-layout { display: flex; min-height: 100vh; background: var(--bg); }

.admin-sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width var(--t);
  z-index: 800;
}
.admin-sidebar .sb-brand {
  height: var(--header-h); display: flex; align-items: center; gap: .6rem;
  padding: 0 22px; border-bottom: 1px solid var(--border);
}
.admin-sidebar .sb-brand img { height: 34px; }
.admin-sidebar .sb-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.admin-sidebar .sb-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 14px 12px 6px; }
.admin-sidebar .sb-nav a {
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem .85rem; border-radius: var(--r-md);
  color: var(--ink); font-weight: 500; font-size: .93rem;
  margin-bottom: 2px; transition: all var(--t);
}
.admin-sidebar .sb-nav a .ico { width: 20px; text-align: center; flex: none; font-size: 1.05rem; }
.admin-sidebar .sb-nav a:hover { background: var(--surface-2); color: var(--primary-600); }
.admin-sidebar .sb-nav a.active {
  background: var(--primary-050); color: var(--primary-600); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}
.admin-sidebar .sb-foot { padding: 14px 12px; border-top: 1px solid var(--border); }
.admin-sidebar .sb-label { transition: opacity var(--t); }

/* Marque carrée affichée uniquement en mode replié */
.admin-sidebar .sb-brand-mark { display: none; }

/* Sidebar repliée */
.admin-layout.collapsed .admin-sidebar { width: var(--sidebar-w-collapsed); }
/* Libellés : masqués visuellement mais gardés pour les lecteurs d'écran (sr-only) */
.admin-layout.collapsed .admin-sidebar .sb-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.admin-layout.collapsed .admin-sidebar .sb-section { display: none; }
.admin-layout.collapsed .admin-sidebar .sb-brand-logo { display: none; }
.admin-layout.collapsed .admin-sidebar .sb-brand { justify-content: center; padding: 0; }
.admin-layout.collapsed .admin-sidebar .sb-brand-mark { display: block; }
/* Icônes centrées en carré, sans « bavure » de l'état actif */
.admin-layout.collapsed .admin-sidebar .sb-nav a {
  position: relative; justify-content: center;
  width: 46px; height: 44px; margin: 2px auto; padding: 0; border-radius: 10px;
}
.admin-layout.collapsed .admin-sidebar .sb-nav a.active { box-shadow: none; background: var(--primary-050); }
/* Badges compteurs → pastille d'angle (ne débordent plus du rail 76px) */
.admin-layout.collapsed .admin-sidebar .sb-nav a .badge {
  position: absolute; top: 5px; right: 8px; margin: 0;
  min-width: 9px; width: 9px; height: 9px; padding: 0;
  font-size: 0; line-height: 0; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--surface);
}
/* Boutons du pied centrés en replié (bat le style inline flex-start) */
.admin-layout.collapsed .admin-sidebar .sb-foot .btn { justify-content: center !important; gap: 0; }
/* Tooltip du libellé au survol / focus clavier */
.admin-layout.collapsed .admin-sidebar .sb-nav a[data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); background: var(--text); color: #fff; font-size: .8rem;
  font-weight: 500; padding: .34rem .6rem; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 1200; box-shadow: var(--shadow-md); transition: opacity .12s;
}
.admin-layout.collapsed .admin-sidebar .sb-nav a:hover::after,
.admin-layout.collapsed .admin-sidebar .sb-nav a:focus-visible::after { opacity: 1; }

.admin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
  height: var(--header-h); flex: none;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; position: sticky; top: 0; z-index: 700;
}
.admin-topbar .sb-collapse {
  width: 42px; height: 42px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-md); cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 1.1rem;
}
.admin-topbar .sb-collapse:hover { background: var(--surface-2); color: var(--primary-600); }
.admin-topbar .topbar-search { flex: 1; max-width: 420px; position: relative; }
.admin-topbar .topbar-search input {
  width: 100%; padding: .6rem 1rem .6rem 2.5rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font-size: .9rem;
}
.admin-topbar .topbar-search input:focus { background: var(--surface); border-color: var(--primary-300); outline: none; }
.admin-topbar .topbar-search .s-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.admin-topbar .spacer { flex: 1; }
.admin-topbar .bell {
  position: relative; width: 42px; height: 42px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.admin-topbar .bell:hover { background: var(--surface-2); }
.admin-topbar .bell .dot {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px;
  background: var(--danger); border-radius: 50%; border: 2px solid var(--surface);
}
.admin-topbar .admin-user { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.admin-topbar .admin-user .name { font-size: .9rem; font-weight: 600; color: var(--text); }
.admin-topbar .admin-user .role { font-size: .75rem; color: var(--muted); }

.admin-main { flex: 1; padding: 28px; background: var(--bg); }
.admin-main .page-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.admin-main .page-head h1 { font-size: 1.6rem; margin-bottom: .2rem; }
.admin-main .page-head p { color: var(--muted); margin: 0; }

/* --------------------------------------------------------- Formulaires */
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-label { display: block; font-size: .88rem; font-weight: 600; color: var(--text); margin-bottom: .4rem; }
.form-label .req { color: var(--danger); }
.form-control {
  width: 100%; padding: .72rem .95rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: .95rem;
  font-family: inherit; transition: border-color var(--t), box-shadow var(--t);
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); }
textarea.form-control { min-height: 120px; resize: vertical; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a90' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; }
.form-hint { font-size: .8rem; color: var(--muted); margin-top: .35rem; }

.input-icon { position: relative; }
.input-icon .form-control { padding-left: 2.6rem; }
.input-icon .ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }

.checkbox { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .92rem; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--primary); }

.switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .92rem; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 44px; height: 24px; background: var(--border); border-radius: var(--r-pill); position: relative; transition: background var(--t); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--t); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(20px); }

/* --------------------------------------------------------------- Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
/* Mobile : le tableau défile horizontalement (dans .table-wrap) au lieu de tasser les colonnes sur plusieurs lignes. */
@media (max-width: 640px) {
  .table-wrap .table { min-width: 560px; }
  .table-wrap .table th, .table-wrap .table td { white-space: nowrap; }
}
.table th {
  text-align: left; font-family: var(--font-title); font-weight: 600;
  color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  white-space: nowrap;
}
.table td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.table tbody tr:nth-child(even) { background: #fafcff; }
.table tbody tr:hover { background: var(--primary-050); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-main { font-weight: 600; }
.table .cell-sub { color: var(--muted); font-size: .82rem; }
.table td.actions { text-align: right; white-space: nowrap; }

.pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; padding: .28rem .7rem; border-radius: var(--r-pill); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-paid { background: var(--success-050); color: var(--success); }
.pill-pending { background: var(--warning-050); color: var(--warning); }
.pill-unpaid { background: var(--danger-050); color: var(--danger); }

/* --------------------------------------------------------------- Hero clair */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-soft);
  padding: 90px 0;
}
.hero .glow {
  position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none;
}
.hero .glow.g1 { width: 420px; height: 420px; background: rgba(13,150,210,.18); top: -120px; right: -80px; }
.hero .glow.g2 { width: 340px; height: 340px; background: rgba(110,200,242,.22); bottom: -140px; left: -60px; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 1rem; }
.hero p.lead { font-size: 1.15rem; color: var(--ink); max-width: 560px; }
.hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.8rem; }
.hero .hero-stats { display: flex; gap: 28px; margin-top: 2.4rem; flex-wrap: wrap; }
.hero .hero-stats .hs strong { font-family: var(--font-title); font-size: 1.7rem; color: var(--primary-600); display: block; }
.hero .hero-stats .hs span { color: var(--muted); font-size: .85rem; }
.hero .hero-visual {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 24px;
}

/* ------------------------------------------------------ Steps / Timeline */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
.steps .step { position: relative; text-align: center; }
.steps .step .num {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 700; font-size: 1.2rem;
  box-shadow: var(--shadow-md);
}
.steps .step h4 { margin-bottom: .3rem; font-size: 1.05rem; }
.steps .step p { color: var(--muted); font-size: .9rem; margin: 0; }
.timeline { border-left: 2px solid var(--border); padding-left: 24px; margin-left: 8px; }
.timeline .tl-item { position: relative; padding-bottom: 26px; }
.timeline .tl-item::before {
  content: ""; position: absolute; left: -32px; top: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--primary-300);
}
.timeline .tl-item .tl-date { font-size: .8rem; color: var(--primary-600); font-weight: 600; }

/* --------------------------------------------------------------- Accordéon */
.accordion { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.accordion .acc-item { border-bottom: 1px solid var(--border); }
.accordion .acc-item:last-child { border-bottom: 0; }
.accordion .acc-head {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 22px; font-family: var(--font-title); font-weight: 600; font-size: 1.02rem;
  color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.accordion .acc-head:hover { color: var(--primary-600); }
.accordion .acc-head .chev { transition: transform var(--t); color: var(--muted); flex: none; }
.accordion .acc-item.open .acc-head .chev { transform: rotate(180deg); color: var(--primary); }
.accordion .acc-body { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.accordion .acc-item.open .acc-body { max-height: 600px; }
.accordion .acc-body .inner { padding: 0 22px 20px; color: var(--ink); }

/* --------------------------------------------------------------- Onglets */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; }
.tabs [data-tab] {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .8rem 1.1rem; cursor: pointer; font-family: var(--font-title);
  font-weight: 600; font-size: .95rem; color: var(--muted); transition: all var(--t);
  margin-bottom: -1px;
}
.tabs [data-tab]:hover { color: var(--primary-600); }
.tabs [data-tab].active { color: var(--primary-600); border-bottom-color: var(--primary); }
[data-pane] { display: none; }
[data-pane].active { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- Progression */
.progress { height: 10px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.progress-bar { height: 100%; background: var(--grad-primary); border-radius: var(--r-pill); transition: width .5s ease; }
.progress-lbl { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; }

/* --------------------------------------------------------------- Avatars */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 700; font-size: .9rem; color: #fff;
  background: var(--grad-primary); overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; font-size: .75rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid var(--surface); margin-left: -10px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* --------------------------------------------------------------- Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary-600); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------- Pagination */
.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 28px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); font-weight: 500; background: var(--surface); transition: all var(--t);
}
.pagination a:hover { border-color: var(--primary-300); color: var(--primary-600); background: var(--primary-050); }
.pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------- Alertes */
.alert { display: flex; gap: .8rem; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid; font-size: .92rem; align-items: flex-start; }
.alert .a-ico { flex: none; font-size: 1.1rem; }
.alert-info { background: var(--primary-050); border-color: var(--primary-300); color: var(--primary-600); }
.alert-success { background: var(--success-050); border-color: #b6e6c6; color: var(--success); }
.alert-warning { background: var(--warning-050); border-color: #f2d59b; color: var(--warning); }
.alert-danger { background: var(--danger-050); border-color: #f2b6b6; color: var(--danger); }

/* --------------------------------------------------------------- Calendrier */
.calendar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.calendar .cal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.calendar .cal-head h3 { margin: 0; text-transform: capitalize; }
.calendar .cal-nav { display: flex; gap: 8px; }
.calendar .cal-nav button { width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); cursor: pointer; color: var(--text); }
.calendar .cal-nav button:hover { background: var(--surface-2); color: var(--primary-600); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-grid .cal-dow { text-align: center; padding: 12px 4px; font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-day {
  min-height: 108px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 8px; position: relative; background: var(--surface);
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.other { background: #fafcff; color: var(--muted); }
.cal-day.today { background: var(--primary-050); }
.cal-day .d-num { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.cal-day.today .d-num { color: var(--primary-600); }
.cal-event {
  display: block; font-size: .74rem; padding: .28rem .5rem; border-radius: 6px;
  margin-bottom: 4px; color: #fff; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--primary); transition: filter var(--t);
}
.cal-event:hover { filter: brightness(1.06); }
.cal-event.cat-dev { background: #0d96d2; }
.cal-event.cat-cyber { background: #dc2626; }
.cal-event.cat-data { background: #7c3aed; }
.cal-event.cat-reseau { background: #0891b2; }
.cal-event.cat-design { background: #d97706; }
.cal-event.cat-office { background: #16a34a; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--border); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--muted); }
.cal-legend .lg .sw { width: 12px; height: 12px; border-radius: 4px; }

/* ------------------------------------------------- Graphiques CSS purs */
.bar-chart { display: flex; align-items: flex-end; gap: 14px; height: 220px; padding: 16px 0; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar-chart .bar {
  width: 100%; max-width: 46px; border-radius: 8px 8px 0 0;
  background: var(--grad-primary); position: relative; transition: height .6s ease;
}
.bar-chart .bar .val { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: .78rem; font-weight: 700; color: var(--text); }
.bar-chart .bar-lbl { font-size: .78rem; color: var(--muted); }

.donut {
  --p: 68; --c: var(--primary);
  width: 150px; height: 150px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.donut::before { content: ""; position: absolute; width: 104px; height: 104px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.donut .donut-lbl { position: relative; text-align: center; font-family: var(--font-title); font-weight: 700; font-size: 1.5rem; color: var(--text); }
.donut-wrap { position: relative; display: inline-flex; }

.line-chart { position: relative; height: 200px; padding: 12px; }
.line-chart svg { width: 100%; height: 100%; overflow: visible; }
.line-chart .lc-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line-chart .lc-area { fill: url(#lcgrad); opacity: .5; }
.line-chart .lc-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 3; }

/* --------------------------------------------------------- Drawer / Modal */
.overlay {
  position: fixed; inset: 0; background: rgba(36,50,68,.35);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: all var(--t); z-index: 1000;
}
.overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 440px; max-width: 92vw;
  background: var(--surface); z-index: 1010; visibility: hidden;
  transform: translateX(100%); transition: transform var(--t), visibility 0s linear var(--t); display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); box-shadow: var(--shadow-lg); visibility: visible; transition: transform var(--t), visibility 0s; }
.drawer .drawer-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.drawer .drawer-head h3 { margin: 0; }
.drawer .drawer-body { padding: 24px; overflow-y: auto; flex: 1; }
.drawer .drawer-foot { padding: 18px 24px; border-top: 1px solid var(--border); display: flex; gap: 12px; justify-content: flex-end; }

.modal {
  position: fixed; inset: 0; z-index: 1010; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.modal.open { display: flex; }
.modal .modal-card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;
  animation: modalIn .25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal .modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal .modal-head h3 { margin: 0; }
.modal .modal-body { padding: 24px; overflow-y: auto; }
.modal .modal-foot { padding: 18px 24px; border-top: 1px solid var(--border); display: flex; gap: 12px; justify-content: flex-end; }
.modal-close, .drawer-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-close:hover, .drawer-close:hover { color: var(--danger); }

/* --------------------------------------------------------- Témoignages */
.testimonial {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--shadow-xs); position: relative;
}
.testimonial::before { content: "\201C"; position: absolute; top: 10px; right: 22px; font-size: 4rem; color: var(--primary-050); font-family: var(--font-title); line-height: 1; }
.testimonial .quote { font-size: 1rem; color: var(--ink); position: relative; z-index: 1; }
.testimonial .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial .who .name { font-weight: 700; font-family: var(--font-title); font-size: .95rem; }
.testimonial .who .role { color: var(--muted); font-size: .82rem; }
.testimonial .stars { color: #f5b301; margin-bottom: 10px; letter-spacing: 2px; }

/* --------------------------------------------------------- Logos / certifs */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; opacity: .8; }
.logo-row .logo-item { height: 40px; display: flex; align-items: center; color: var(--muted); font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; filter: grayscale(1); transition: all var(--t); }
.logo-row .logo-item:hover { filter: none; color: var(--primary-600); opacity: 1; }

/* --------------------------------------------------- Certificat imprimable */
.certificate {
  background: var(--surface);
  border: 2px solid var(--primary-300);
  border-radius: var(--r-lg);
  padding: 54px 60px; text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg); max-width: 860px; margin: 0 auto;
}
.certificate::before {
  content: ""; position: absolute; inset: 12px; border: 1px solid var(--primary-050);
  border-radius: var(--r-md); pointer-events: none;
}
.certificate .cert-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(13,150,210,.1), transparent 70%); top: -100px; right: -80px; }
.certificate .cert-logo { height: 46px; margin: 0 auto 18px; position: relative; }
.certificate .cert-eyebrow { font-family: var(--font-title); letter-spacing: .3em; text-transform: uppercase; color: var(--primary-600); font-size: .82rem; font-weight: 600; }
.certificate .cert-title { font-family: var(--font-title); font-size: 2.2rem; margin: 10px 0 6px; color: var(--text); }
.certificate .cert-sub { color: var(--muted); }
.certificate .cert-name { font-family: var(--font-title); font-size: 2rem; color: var(--primary-600); margin: 22px 0 6px; border-bottom: 2px solid var(--primary-050); display: inline-block; padding: 0 24px 8px; }
.certificate .cert-course { font-size: 1.15rem; font-weight: 600; margin-top: 14px; }
.certificate .cert-foot { display: flex; justify-content: space-between; margin-top: 44px; align-items: flex-end; }
.certificate .cert-sign { text-align: center; }
.certificate .cert-sign .line { width: 180px; border-top: 1px solid var(--ink); margin-bottom: 6px; }
.certificate .cert-sign small { color: var(--muted); }
.certificate .cert-seal {
  width: 92px; height: 92px; border-radius: 50%; background: var(--grad-primary);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem;
  box-shadow: var(--shadow-primary);
}
.certificate .cert-id { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: .74rem; color: var(--muted); }

/* --------------------------------------------------------------- Login */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-visual { position: relative; overflow: hidden; background: var(--grad-vignette); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.auth-visual .glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.14); filter: blur(60px); top: -80px; right: -80px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg); }
.auth-form .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-md); }
.auth-form .auth-card img.logo { height: 40px; margin-bottom: 20px; }

/* --------------------------------------------------------------- Utilities */
.empty-state { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty-state .es-ico { font-size: 3rem; margin-bottom: 12px; opacity: .5; }
.divider-text { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .85rem; margin: 18px 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.list-check { list-style: none; }
.list-check li { display: flex; gap: .6rem; padding: .35rem 0; color: var(--ink); }
.list-check li::before { content: "✓"; color: var(--success); font-weight: 700; flex: none; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg); padding: 12px;
    transform: translateY(-120%); opacity: 0; visibility: hidden;
    transition: all var(--t); max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .site-header.open .main-nav { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a { padding: .9rem 1rem; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 12px; display: none; }
  .has-dropdown.open .dropdown { display: block; }
  .header-actions .admin-link { display: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .site-footer .ft-news-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .site-footer .ft-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .site-footer .ft-about { grid-column: 1 / -1; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }

  /* Sidebar admin repliable en overlay */
  .admin-sidebar {
    position: fixed; top: 0; left: 0; transform: translateX(-100%);
    transition: transform var(--t); box-shadow: var(--shadow-lg);
  }
  .admin-layout.sb-open .admin-sidebar { transform: translateX(0); }
  .admin-layout.collapsed .admin-sidebar { width: var(--sidebar-w); }
  .certificate { padding: 32px 24px; }
  .certificate .cert-foot { flex-direction: column; gap: 24px; align-items: center; }
}

@media (max-width: 560px) {
  .section { padding: 48px 0; }
  .steps { grid-template-columns: 1fr; }
  .site-footer .ft-grid { grid-template-columns: 1fr; }
  .site-footer .ft-bottom-in { flex-direction: column; text-align: center; }
  .hero { padding: 60px 0; }
  .admin-main { padding: 18px; }
  .cal-day { min-height: 72px; }
}

/* --------------------------------------------------------------- Print */
@media print {
  .site-header, .site-footer, .admin-sidebar, .admin-topbar, .no-print { display: none !important; }
  body { background: #fff; }
  .certificate { box-shadow: none; border-color: var(--primary); }
}

/* ================= Pipeline d'inscription (liste + stepper) ================= */
.pipe-row { display:flex; align-items:center; gap:26px; padding:22px 24px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.pipe-row:last-child { border-bottom:0; }
.pipe-who { min-width:210px; display:flex; align-items:center; gap:12px; }
.pipe-who .av { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex:0 0 auto; background:var(--primary-050); color:var(--primary-600); }
.pipe-who .n { font-weight:600; }
.pipe-who .s { color:var(--muted); font-size:.82rem; }
.stepper { flex:1; min-width:340px; display:flex; align-items:flex-start; }
.stepper .step { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.stepper .step .dot { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; z-index:1; background:#fff; border:2px solid var(--border); color:var(--muted); transition:.2s; }
.stepper .step .lbl { font-size:.76rem; margin-top:8px; color:var(--muted); font-weight:600; }
.stepper .step .sub { font-size:.7rem; color:var(--muted); }
.stepper .step::before { content:""; position:absolute; top:14px; left:-50%; width:100%; height:3px; background:var(--border); z-index:0; }
.stepper .step:first-child::before { display:none; }
.stepper .step.done .dot { background:var(--success); border-color:var(--success); color:#fff; }
.stepper .step.done::before { background:var(--success); }
.stepper .step.current .dot { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 5px var(--primary-050); }
.stepper .step.current .lbl { color:var(--primary-600); }
.stepper .step.current.after-done::before { background:var(--success); }
.stepper .step.cancel .dot { background:var(--danger-050); border-color:#f3b4b4; color:var(--danger); }
.pipe-act { min-width:190px; text-align:right; margin-left:auto; }
.pipe-act .when { display:block; font-size:.74rem; color:var(--muted); margin-top:8px; }

/* ============= Pipeline d'inscription — V1 liste enrichie (stepper premium) ============= */
/* L'appel : trois issues, et le numéro sous les yeux pendant qu'on parle. */
.ap-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 14px; margin-bottom: 14px;
}
.ap-tete .cell-sub { display: block; }
.ap-tete a[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.ap-issues { display: grid; gap: 7px; margin-bottom: 14px; }
.ap-issue {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 10px 13px;
  transition: border-color var(--t), background var(--t);
}
.ap-issue input { margin-top: 3px; flex: none; }
.ap-issue b { display: block; font-size: .93rem; }
.ap-issue small { display: block; font-size: .8rem; color: var(--muted); }
.ap-issue:hover { background: var(--surface-2); }
.ap-issue.est-choisi { background: var(--primary-050); border-color: var(--primary-600); }
.ap-ok { border-left-color: var(--success); }
.ap-att { border-left-color: var(--warning); }
.ap-ko { border-left-color: var(--danger); }
.ap-exige { font-size: .72rem; font-weight: 700; color: var(--danger); }

/* ==========================================================================
   LES FILES DE TRAVAIL DES DEMANDES — un onglet, une décision
   L'écran offrait TROIS façons de filtrer par état, empilées : l'entonnoir, le
   menu « État » et une partie des vues. Les onglets n'en laissent qu'une, et
   chaque file porte ses propres affinages, ses colonnes et son geste.
   ========================================================================== */
.dm-onglets { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; margin-bottom: -1px; }
.dm-onglet {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 11px 11px 0 0;
  padding: 11px 17px 13px; color: var(--muted); white-space: nowrap; text-decoration: none;
  transition: background var(--t), color var(--t);
}
.dm-onglet:hover { background: var(--surface-2); color: var(--text); }
.dm-onglet .t { font-size: .94rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.dm-onglet .c { font-size: .75rem; }
.dm-onglet .pastille {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 800;
}
.dm-onglet[aria-selected="true"] { background: var(--surface); border-color: var(--border); color: var(--text); }
.dm-onglet[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--surface);
}
.dm-onglet[aria-selected="true"] .pastille { background: var(--primary-600); color: #fff; }
.dm-onglet.f-stop .pastille { background: var(--danger-050); color: var(--danger); }
.dm-onglet.f-att .pastille { background: var(--warning-050); color: var(--warning); }
.dm-onglet[aria-selected="true"].f-stop .pastille,
.dm-onglet[aria-selected="true"].f-att .pastille { background: var(--primary-600); color: #fff; }
.dm-onglet.vide .t, .dm-onglet.vide .c { opacity: .55; }
/* L'archive n'est pas une étape : elle se détache du reste. */
.dm-onglet.sep { margin-left: auto; }

.dm-panneau {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0 14px 14px 14px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(18, 38, 64, .07);
}
.dm-bandeau {
  display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--border);
}
.dm-bandeau h2 { font-size: 1.04rem; margin: 0; }
.dm-quoi { font-size: .83rem; color: var(--muted); margin: 1px 0 0; max-width: 62ch; }
.dm-mesure b { font-size: 1.3rem; font-weight: 800; display: block; text-align: right; font-variant-numeric: tabular-nums; }
.dm-mesure span { font-size: .74rem; color: var(--muted); display: block; text-align: right; }

.dm-outils {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.dm-champ {
  flex: 1 1 250px; display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--border); border-radius: 9px; padding: 0 11px; background: var(--surface);
}
.dm-champ:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); }
.dm-champ input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .89rem; padding: 8px 0; color: inherit; outline: none; }
.dm-champ svg { flex: none; color: var(--muted); }
.dm-champ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dm-champ kbd {
  flex: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .66rem; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
}
.dm-sel { flex: 0 1 220px; font-size: .85rem; padding: 8px 11px; }

.dm-chips { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; padding: 11px 20px; border-bottom: 1px solid var(--border); }
.dm-chips .lbl { font-size: .71rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }
.dm-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 5px 13px; font-size: .82rem; font-weight: 650; text-decoration: none;
  display: inline-flex; gap: 7px; align-items: center; transition: all var(--t);
}
.dm-chip b { font-weight: 800; color: var(--muted); font-size: .76rem; }
.dm-chip:hover { border-color: var(--primary-300); background: var(--primary-050); }
.dm-chip.on { border-color: var(--primary-600); background: var(--primary-050); color: var(--primary-600); }
.dm-chip.on b { color: var(--primary-600); }
/* Une puce vide se voit vide : cliquer pour découvrir qu'il n'y a rien est une perte. */
.dm-chip.morte { opacity: .38; pointer-events: none; }

.dm-groupe {
  display: flex; gap: 11px; align-items: center; flex-wrap: wrap; padding: 11px 20px;
  background: var(--primary-050); border-bottom: 1px solid var(--primary-300); font-size: .87rem;
}
.dm-motif { flex: 1 1 260px; max-width: 380px; padding: 7px 11px; font-size: .85rem; }
.dm-aparte { color: var(--muted); font-size: .8rem; }

/* ---------- Les lignes : colonnes et geste changent avec la file ---------- */
.dm-liste { display: flex; flex-direction: column; }
.dm-entete, .dm-ligne {
  display: grid; gap: 16px; align-items: center;
  grid-template-columns: 44px 40px minmax(0, 1.45fr) minmax(0, 1.15fr) 150px auto;
}
.dm-entete {
  padding: 9px 20px 9px 0; border-bottom: 1px solid var(--border); background: var(--surface-2);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800;
}
.dm-entete .d { text-align: right; }
.dm-ligne { position: relative; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--border); transition: background var(--t); }
.dm-ligne:last-child { border-bottom: 0; }
.dm-ligne:hover { background: var(--surface-2); }
.dm-ligne.est-choisie { background: var(--primary-050); }
/* La bande d'état : l'urgence se lit avant même de lire. */
.dm-ligne::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.dm-ligne.u-stop::before { background: var(--danger); }
.dm-ligne.u-att::before { background: var(--warning); }
.dm-ligne.u-ok::before { background: var(--success); }

.dm-cocher { display: grid; place-items: center; padding-left: 20px; }
.dm-cocher input { width: 16px; height: 16px; accent-color: var(--primary-600); cursor: pointer; }
.dm-av {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; background: var(--surface-2); color: var(--ink);
}
.dm-ligne.u-stop .dm-av { background: var(--danger-050); color: var(--danger); }
.dm-ligne.u-att .dm-av { background: var(--warning-050); color: var(--warning); }
.dm-ligne.u-ok .dm-av { background: var(--success-050); color: var(--success); }

.dm-qui { min-width: 0; }
.dm-nom { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 650; font-size: .96rem; }
.dm-nom a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-nom a:hover { color: var(--primary-600); }
.dm-ref {
  flex: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px;
}
.dm-marques { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.dm-pill { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.dm-pill.p-stop { background: var(--danger-050); color: var(--danger); }
.dm-pill.p-att { background: var(--warning-050); color: var(--warning); }
.dm-pill.p-ok { background: var(--success-050); color: var(--success); }
.dm-pill.p-n { background: var(--surface-2); color: var(--muted); }

.dm-quoi2 { min-width: 0; font-size: .85rem; }
.dm-quoi2 .f, .dm-quoi2 .s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-quoi2 .f { color: var(--ink); }
.dm-quoi2 .s { color: var(--muted); font-size: .79rem; }

.dm-mes { text-align: right; }
.dm-mes .v { font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.dm-mes .k { font-size: .74rem; color: var(--muted); display: block; margin-top: 1px; }
.dm-jauge { display: block; height: 5px; border-radius: 999px; background: var(--surface-2); margin-top: 7px; overflow: hidden; }
.dm-jauge i { display: block; height: 100%; background: var(--success); border-radius: 999px; }

.dm-actes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding-right: 20px; }

@media (max-width: 1100px) {
  .dm-entete { display: none; }
  .dm-ligne { grid-template-columns: 44px 40px minmax(0, 1fr); row-gap: 9px; padding-bottom: 15px; }
  .dm-quoi2, .dm-mes, .dm-actes { grid-column: 3; }
  .dm-mes { text-align: left; }
  .dm-actes { justify-content: flex-start; padding-right: 0; }
}

.dm-vide { padding: 54px 24px; text-align: center; color: var(--muted); }
.dm-vide .rond {
  width: 52px; height: 52px; border-radius: 50%; background: var(--success-050); color: var(--success);
  display: grid; place-items: center; margin: 0 auto 14px;
}
.dm-vide .gros { font-size: 1.08rem; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.dm-vide .sortie { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.dm-pied {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); background: var(--surface-2);
}
.dm-pied .pagination { margin: 0; }

/* ==========================================================================
   LE PUPITRE DES DEMANDES — chercher, trier, et répondre à une question
   L'écran répondait « à quelle étape en est ce dossier ». Il ne répondait pas
   aux questions qu'on se pose en décrochant : qui n'a jamais été rappelé, qui
   doit encore de l'argent, quelles sessions sont parties sans leur candidat.
   Les VUES posent ces questions ; le MOTIF dit pourquoi chaque ligne est là.
   ========================================================================== */

/* Les vues : une question, un clic, et son compte en direct. */
.pu-vue .t { font-size: .86rem; font-weight: 650; color: var(--ink); }
.pu-vue .c { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pu-vue.on { background: var(--primary-050); border-color: var(--primary-600); }
.pu-vue.on .t { color: var(--primary-600); }

/* Le motif : la raison du classement, sur la ligne elle-même. */

/* L'état vide nomme ce qui l'a vidé, et propose de le lever un par un. */

.pl-fcard.s1::before{background:#0d96d2} .pl-fcard.s2::before{background:#7c3aed} .pl-fcard.s3::before{background:#d97706} .pl-fcard.s4::before{background:#16a34a}
.pl-fcard .lab { font-size:.78rem; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px; }
.pl-fcard .lab .d { width:9px; height:9px; border-radius:50%; background:var(--border); }
.pl-fcard.s1 .d{background:#0d96d2} .pl-fcard.s2 .d{background:#7c3aed} .pl-fcard.s3 .d{background:#d97706} .pl-fcard.s4 .d{background:#16a34a}
.pl-fcard .num { font-family:var(--font-title); font-size:1.9rem; font-weight:700; margin-top:6px; }
.pl-fcard .num small { font-size:.8rem; color:var(--muted); font-weight:500; }
.pl-chip.on { background:var(--primary-050); color:var(--primary-600); border-color:var(--primary-300); }
.pl-card .bar { width:5px; align-self:stretch; background:var(--border); }
.pl-card.s1 .bar{background:#0d96d2} .pl-card.s2 .bar{background:#7c3aed} .pl-card.s3 .bar{background:#d97706} .pl-card.s4 .bar{background:#16a34a}
.pl-who .av { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:#fff; flex:0 0 auto; background:#9aa7b8; }
.pl-card.s1 .av{background:#0d96d2} .pl-card.s2 .av{background:#7c3aed} .pl-card.s3 .av{background:#d97706} .pl-card.s4 .av{background:#16a34a}
.pl-who .n { font-weight:700; }
.pl-who .s { color:var(--muted); font-size:.8rem; }
.pl-who .ago { color:var(--muted); font-size:.72rem; margin-top:2px; }
.pl-steps .st { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; text-align:center; }
.pl-steps .st .ic { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:15px; z-index:1; background:#fff; border:2px solid var(--border); color:var(--muted); }
.pl-steps .st .t { font-size:.72rem; margin-top:7px; color:var(--muted); font-weight:600; }
.pl-steps .st::before { content:""; position:absolute; top:16px; left:-50%; width:100%; height:3px; background:var(--border); border-radius:2px; }
.pl-steps .st:first-child::before { display:none; }
.pl-steps .st.done .ic { background:#16a34a; border-color:#16a34a; color:#fff; }
.pl-steps .st.done::before { background:#16a34a; }
.pl-steps .st.cur.after::before { background:#16a34a; }
.pl-steps .st.cur.c1 .ic { background:#0d96d2; border-color:#0d96d2; color:#fff; box-shadow:0 0 0 5px #e7f5fc; }
.pl-steps .st.cur.c2 .ic { background:#7c3aed; border-color:#7c3aed; color:#fff; box-shadow:0 0 0 5px #f1ecfe; }
.pl-steps .st.cur.c3 .ic { background:#d97706; border-color:#d97706; color:#fff; box-shadow:0 0 0 5px #fdf3e6; }
.pl-steps .st.cur .t { color:var(--text); }
.pl-steps .st.cancel .ic { background:#fdeaea; border-color:#f3b4b4; color:#dc2626; }
.pl-act .amt { font-size:.78rem; color:var(--muted); display:block; margin-bottom:8px; }
.pl-cta.s1{background:#0d96d2} .pl-cta.s2{background:#7c3aed} .pl-cta.s3{background:#d97706}
@media (max-width:1100px){ .pl-funnel{ grid-template-columns:repeat(2,1fr);} .pl-steps{ min-width:100%; order:3; } .pl-act{ margin-left:0; } }

/* =====================================================================
   CALENDRIER SMART  (.cal2-*)  — refonte front page /calendrier
   ===================================================================== */

/* Palette categories : chaque .cat-<slug> expose --cc (couleur categorie). */
.cat-management            { --cc:#0d96d2; }
.cat-business-analysis     { --cc:#7c3aed; }
.cat-business-intelligence { --cc:#d97706; }
.cat-devops                { --cc:#0891b2; }
.cat-test-logiciel         { --cc:#16a34a; }
.cat-agile-scrum           { --cc:#e11d48; }

.cal2-hidden { display: none !important; }

/* -------------------------------------------------- A) HERO
   Les mini-stats (.cal2-stats) et la navigation de mois (.cal2-monthnav) ont
   été retirées : l'en-tête de page commun porte désormais les chiffres, et la
   navigation de mois vit dans l'en-tête plutôt que dans la barre collante. */

/* -------------------------------------------------- B) BARRE DE CONTROLE */
.cal2-controls { position: sticky; top: calc(var(--header-h) + 10px); z-index: 30; margin-bottom: 18px; }
.cal2-controls .card-body { display: flex; flex-direction: column; gap: 16px; }
.cal2-ctl-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Ne reste que la bascule Mois / Agenda : sans cette règle elle s'étalait
   toute seule à gauche d'une ligne vide. */
.cal2-ctl-top--seul { justify-content: flex-end; }

/* Toggle de vue Mois / Agenda */
.cal2-viewtoggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.cal2-vt { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .88rem; padding: .45rem .95rem; border-radius: var(--r-pill); cursor: pointer; transition: all var(--t); }
.cal2-vt svg { opacity: .85; }
.cal2-vt.is-active { background: var(--surface); color: var(--primary-600); box-shadow: var(--shadow-xs); }

/* Filtres */
.cal2-ctl-filters { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); padding-top: 16px; }
.cal2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cal2-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .42rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all var(--t);
}
.cal2-chip:hover { border-color: var(--primary-300); }
.cal2-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cal2-chip.is-active { color: #fff; border-color: transparent; background: var(--cc, var(--primary)); box-shadow: var(--shadow-sm); }
.cal2-chip.is-active .cal2-dot { background: rgba(255,255,255,.9) !important; }

.cal2-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* Segmented control format */
.cal2-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; }
.cal2-seg button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .82rem; padding: .4rem .85rem; border-radius: var(--r-pill); cursor: pointer; transition: all var(--t); }
.cal2-seg button.is-active { background: var(--surface); color: var(--primary-600); box-shadow: var(--shadow-xs); }

/* Toggle places disponibles */
.cal2-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.cal2-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal2-switch-track { width: 40px; height: 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); position: relative; transition: all var(--t); }
.cal2-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: all var(--t); }
.cal2-switch input:checked + .cal2-switch-track { background: var(--primary); border-color: var(--primary); }
.cal2-switch input:checked + .cal2-switch-track .cal2-switch-knob { transform: translateX(18px); }
.cal2-switch input:focus-visible + .cal2-switch-track { outline: 3px solid var(--primary-300); outline-offset: 2px; }
.cal2-switch-lbl { font-size: .85rem; font-weight: 600; color: var(--text); }

/* Recherche */
.cal2-search { position: relative; flex: 1 1 200px; min-width: 180px; }
.cal2-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.cal2-search input { width: 100%; padding: .55rem .8rem .55rem 2.2rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: .9rem; }
.cal2-search input:focus { outline: 0; border-color: var(--primary-300); box-shadow: 0 0 0 3px var(--primary-050); }

.cal2-count { font-size: .82rem; font-weight: 600; color: var(--muted); margin-left: auto; white-space: nowrap; }

/* -------------------------------------------------- C) VUE MOIS (grille) */
.cal2-view { display: none; }
.cal2-view.is-active { display: block; }

.cal2-monthwrap { padding: 14px; }
.cal2-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal2-dow { text-align: center; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-bottom: 4px; }

.cal2-day {
  position: relative; min-height: 108px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.cal2-day--out { background: var(--surface-2); opacity: .55; }
.cal2-day--today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal2-day--next::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); }
.cal2-daynum { font-size: .82rem; font-weight: 700; color: var(--text); }
.cal2-day--out .cal2-daynum { color: var(--muted); }
.cal2-todaytag { position: absolute; top: 6px; right: 8px; font-size: .6rem; font-weight: 700; color: var(--primary-600); text-transform: uppercase; }

/* Pastille evenement */
.cal2-event {
  display: flex; align-items: center; gap: 5px; width: 100%; text-align: left;
  border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent);
  border-left: 3px solid var(--cc);
  background: color-mix(in srgb, var(--cc) 10%, var(--surface));
  color: var(--text); border-radius: 6px; padding: 3px 6px; cursor: pointer;
  font-size: .72rem; line-height: 1.2; transition: all var(--t);
}
.cal2-event:hover { background: color-mix(in srgb, var(--cc) 20%, var(--surface)); transform: translateX(1px); }
.cal2-ev-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cc); flex: none; }
.cal2-ev-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cal2-ev-flag { margin-left: auto; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--warning); color: #fff; font-size: .62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.cal2-event.is-full { opacity: .6; }
.cal2-event.is-full .cal2-ev-txt { text-decoration: line-through; }
.cal2-event--extra { display: none; }
.cal2-day--open .cal2-event--extra { display: flex; }
.cal2-more { align-self: flex-start; border: 0; background: var(--surface-2); color: var(--primary-600); font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); cursor: pointer; }
.cal2-day--open .cal2-more { background: var(--primary-050); }

/* -------------------------------------------------- D) VUE AGENDA */
.cal2-group { margin-bottom: 26px; }
.cal2-group-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 0 0 14px; text-transform: capitalize; }
.cal2-group-count { font-size: .72rem; font-weight: 700; color: var(--primary-600); background: var(--primary-050); border-radius: var(--r-pill); padding: .15rem .6rem; }

.cal2-card {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--cc); border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), transform var(--t);
}
.cal2-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cal2-card--next { box-shadow: 0 0 0 1px var(--primary-300), var(--shadow-sm); }

.cal2-datebox { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: color-mix(in srgb, var(--cc) 8%, var(--surface-2)); border-radius: var(--r-sm); padding: 8px 4px; }
.cal2-date-day { font-family: var(--font-title); font-size: 1.7rem; font-weight: 700; color: var(--cc); line-height: 1; }
.cal2-date-mon { font-size: .74rem; font-weight: 700; text-transform: uppercase; color: var(--text); }
.cal2-date-dow { font-size: .66rem; color: var(--muted); text-transform: capitalize; }

.cal2-card-main { min-width: 0; }
.cal2-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.cal2-card-title { margin: 0 0 8px; font-size: 1.02rem; }
.cal2-tag { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: var(--r-pill); color: var(--cc); background: color-mix(in srgb, var(--cc) 13%, transparent); }

.cal2-meta { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cal2-meta li { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.cal2-meta svg { color: var(--primary-600); flex: none; }

.cal2-seatline { display: flex; align-items: center; gap: 12px; max-width: 460px; }
.cal2-seatline .progress { flex: 1; height: 8px; }

/* Badges */
.cal2-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; padding: .22rem .6rem; border-radius: var(--r-pill); white-space: nowrap; }
.cal2-badge--fmt  { background: var(--surface-2); color: var(--text); }
.cal2-badge--next { background: var(--primary); color: #fff; }
.cal2-badge--ok   { background: var(--success-050); color: var(--success); }
.cal2-badge--soon { background: var(--warning-050); color: var(--warning); }
.cal2-badge--full { background: var(--danger-050); color: var(--danger); }

.cal2-card-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cal2-price { font-family: var(--font-title); font-size: 1.35rem; font-weight: 700; color: var(--primary-600); white-space: nowrap; }
.cal2-price span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.cal2-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 140px; }
.cal2-actions .btn { justify-content: center; }

/* -------------------------------------------------- F) LEGENDE + vides */
.cal2-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.cal2-lg { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); }
.cal2-lg-sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.cal2-empty { text-align: center; padding: 40px 20px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-md); margin-top: 10px; }
.cal2-empty p { margin: 0; }

/* -------------------------------------------------- Drawer detail (.cal2-) */
.cal2-alert { border-radius: var(--r-sm); padding: 10px 14px; font-size: .85rem; font-weight: 600; margin-bottom: 14px; }
.cal2-alert--warn { background: var(--danger-050); color: var(--danger); }
.cal2-alert--soon { background: var(--warning-050); color: var(--warning); }
.cal2-drawer-meta { list-style: none; margin: 18px 0; padding: 0; }
.cal2-drawer-meta li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.cal2-drawer-meta li span { color: var(--muted); font-weight: 600; }
.cal2-seatbox { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin: 18px 0; }
.cal2-seatbox .progress { height: 10px; }
.cal2-seatbox-lbl { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.cal2-pricerow { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); }
.cal2-pricetag { font-family: var(--font-title); font-size: 1.4rem; color: var(--primary-600); }

/* -------------------------------------------------- Responsive */
@media (max-width: 900px) {
  .cal2-ctl-top { flex-direction: column; align-items: stretch; }
  .cal2-viewtoggle { align-self: center; }
  .cal2-card { grid-template-columns: 64px 1fr; }
  .cal2-card-side { grid-column: 1 / -1; flex-direction: row; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; }
  .cal2-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .contact-cta .card-body { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .cal2-controls { position: static; }
  .cal2-grid { gap: 5px; }
  .cal2-day { min-height: 66px; padding: 4px; }
  .cal2-daynum { font-size: .72rem; }
  .cal2-ev-txt { display: none; }
  .cal2-event { justify-content: center; padding: 4px; border-left-width: 0; border-radius: 50%; width: 14px; height: 14px; margin: 0 auto; }
  .cal2-ev-dot { width: 8px; height: 8px; }
  .cal2-ev-flag { display: none; }
  .cal2-count { margin-left: 0; }
}

/* =====================================================================
   FICHE FORMATION — Direction B (redesign)  [préfixes .fx- / .mi-]
   Réutilise les variables :root existantes ; alias locaux au besoin.
   ===================================================================== */
.fx-scope{
  --grad:var(--grad-primary);
  --grad-soft2:linear-gradient(135deg,#eaf6fd 0%,#dcefff 100%);
  --amber:#d97706; --amber-050:#fef3e2;
  --sh-sm:0 4px 14px rgba(13,120,175,.08);
  --sh-md:0 14px 38px rgba(13,120,175,.14);
  --sh-lg:0 26px 70px rgba(13,120,175,.22);
  color:var(--text);
}
.fx-scope h1,.fx-scope h2,.fx-scope h3,.fx-scope h4{font-family:var(--font-title);letter-spacing:-.02em;line-height:1.14;margin:0;}
.fx-wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 22px;}

/* ---- Hero ---- */
.fx-hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 520px at 85% -8%,rgba(55,169,225,.20),transparent 60%),
  radial-gradient(760px 460px at 8% 20%,rgba(13,150,210,.12),transparent 62%),
  linear-gradient(180deg,#f3f9ff 0%,#eaf4fd 100%);
  border-bottom:1px solid var(--border);padding-bottom:120px;}
.fx-hero::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(13,150,210,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(13,150,210,.05) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(70% 60% at 60% 20%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 60% 20%,#000,transparent 75%);pointer-events:none;}
.fx-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr .95fr;gap:56px;align-items:center;padding-top:40px;}
.fx-crumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:20px;}
.fx-crumb a{color:var(--muted);}
.fx-crumb a:hover{color:var(--primary-600);}
.fx-crumb .sep{opacity:.5;}
.fx-crumb b{color:var(--primary-600);font-weight:600;}
.fx-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:18px;align-items:center;}
.fx-badge{display:inline-flex;align-items:center;gap:.42rem;height:32px;padding:0 .95rem;border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap;border:1px solid transparent;
  text-decoration:none;transition:transform .15s, box-shadow .15s;}
.fx-badge svg{width:15px;height:15px;flex:none;}
a.fx-badge:hover{transform:translateY(-1px);}
.fx-badge.cat{background:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(13,150,210,.22);}
.fx-badge.cert{background:linear-gradient(135deg,#f7a823,#d97706);color:#fff;box-shadow:0 3px 10px rgba(217,119,6,.24);}
.fx-badge.warn{background:var(--warning-050);color:var(--warning);border:1px solid #f2d59b;}
.fx-h1{font-size:clamp(2rem,4.4vw,3.1rem);color:#16283c;margin-bottom:16px;}
.fx-rate{display:flex;align-items:center;gap:.7rem;margin-bottom:18px;flex-wrap:wrap;}
.fx-rate .fx-stars{color:#f5b301;letter-spacing:2px;font-size:1.05rem;}
.fx-rate b{font-size:1.02rem;color:#16283c;}
.fx-rate span{color:var(--muted);font-size:.9rem;}
.fx-dot{width:4px;height:4px;border-radius:50%;background:#c4d2e3;display:inline-block;}
.fx-lead{font-size:1.08rem;line-height:1.6;color:#455165;max-width:560px;margin-bottom:26px;}
.fx-stats{display:flex;flex-wrap:wrap;gap:10px;}
.fx-stat{display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.72);border:1px solid var(--border);border-radius:999px;padding:.55rem .95rem;box-shadow:var(--sh-sm);}
.fx-stat .ico{display:inline-flex;width:30px;height:30px;border-radius:9px;background:var(--grad-soft2);color:var(--primary-600);align-items:center;justify-content:center;font-size:.95rem;}
.fx-stat .tx{line-height:1.15;}
.fx-stat .tx small{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.fx-stat .tx b{font-size:.86rem;color:#243244;font-weight:600;}

/* poster */
.fx-poster-wrap{position:relative;}
.fx-poster{position:relative;z-index:2;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-lg);border:6px solid #fff;display:block;}
.fx-poster.ph{display:flex;align-items:center;justify-content:center;background:var(--grad-vignette);color:#fff;font-family:var(--font-title);font-weight:700;font-size:2.4rem;text-align:center;padding:24px;}
.fx-poster-ring{position:absolute;inset:-18px;border:2px dashed rgba(13,150,210,.35);border-radius:34px;z-index:1;}
.fx-poster-chip{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:.7rem .9rem;box-shadow:var(--sh-md);display:flex;align-items:center;gap:.6rem;}
.fx-poster-chip .k{font-family:var(--font-title);font-size:1.15rem;color:var(--primary-600);font-weight:700;}
.fx-poster-chip small{font-size:.68rem;color:var(--muted);display:block;line-height:1.2;}
.fx-poster-chip.pc1{top:26px;left:-30px;}
.fx-poster-chip.pc2{bottom:34px;right:-26px;}
.fx-poster-chip .pin{width:34px;height:34px;border-radius:10px;background:var(--grad-soft2);display:flex;align-items:center;justify-content:center;color:var(--primary-600);font-size:1.05rem;}

/* ---- Floating price card ---- */
.fx-float{position:relative;z-index:20;margin-top:-96px;}
.fx-price-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start;}
.fx-price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:28px;}
.fx-price-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.fx-price-amt{font-family:var(--font-title);font-size:2.5rem;font-weight:700;color:#16283c;line-height:1;}
.fx-price-amt span{font-size:1rem;color:var(--muted);font-weight:500;font-family:var(--font-body);}
.fx-price-sub{font-size:.85rem;color:var(--muted);margin-top:6px;}
.fx-acompte{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface-2);color:var(--primary-600);border-radius:999px;padding:.4rem .8rem;font-size:.8rem;font-weight:600;}
.fx-session{margin:22px 0;padding:18px;border-radius:var(--r-lg);background:linear-gradient(180deg,#f6fbff,#eef6fd);border:1px solid #dcebf8;}
.fx-session-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.fx-session-head .when{display:flex;align-items:center;gap:.55rem;font-weight:600;color:#16283c;}
.fx-session-head .city{font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem;}
.fx-progress{height:9px;border-radius:999px;background:#dbe8f5;overflow:hidden;}
.fx-progress i{display:block;height:100%;border-radius:999px;background:var(--grad);}
.fx-progress-lab{display:flex;justify-content:space-between;font-size:.78rem;margin-top:8px;color:var(--muted);}
.fx-progress-lab b{color:#c2410c;}
.fx-cta-col{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.3rem;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;border:1px solid transparent;transition:.2s;text-align:center;}
.fx-btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 28px rgba(13,150,210,.34);}
.fx-btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(13,150,210,.44);}
.fx-btn-outline{background:#fff;color:var(--primary-600);border-color:var(--primary-300);}
.fx-btn-outline:hover{background:var(--primary-050);color:var(--primary-600);}
.fx-btn-link{background:none;color:var(--muted);font-weight:500;font-size:.88rem;padding:.5rem;}
.fx-btn-link:hover{color:var(--primary-600);}
.fx-trust{border-top:1px dashed var(--border);margin-top:16px;padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fx-trust .t{display:flex;align-items:flex-start;gap:.6rem;font-size:.83rem;color:#39485c;}
.fx-trust .t .ok{color:var(--success);flex-shrink:0;font-weight:700;}
.fx-aside{display:flex;flex-direction:column;gap:16px;}
.fx-mini{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:20px;}
.fx-mini h4{font-size:.95rem;margin-bottom:12px;color:#16283c;}
.fx-mini .line{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;font-size:.88rem;color:#3a4a5e;border-bottom:1px solid var(--surface-2);}
.fx-mini .line:last-child{border-bottom:0;}
.fx-mini .line .i{color:var(--primary-600);flex-shrink:0;}
.fx-help{background:var(--grad-soft2);border:1px solid #cfe8f8;border-radius:var(--r-lg);padding:20px;}
.fx-help h4{font-size:.95rem;margin-bottom:6px;color:#16283c;}
.fx-help p{font-size:.85rem;color:#3a4a5e;margin-bottom:12px;}
.fx-help a{font-weight:600;color:var(--primary-600);display:flex;align-items:center;gap:.4rem;}

/* ---- Sections ---- */
.fx-sec{padding:56px 0;}
.fx-sec.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.fx-eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-600);margin-bottom:12px;}
.fx-eyebrow::before{content:"";width:22px;height:2px;background:var(--primary);border-radius:2px;}
.fx-sec h2{font-size:clamp(1.5rem,3vw,2rem);color:#16283c;margin-bottom:10px;}
.fx-sec .fx-sub{color:var(--muted);font-size:1rem;max-width:640px;margin-bottom:32px;}
.fx-prose p{color:#3a4a5e;line-height:1.7;margin-bottom:14px;}
.fx-prose p:last-child{margin-bottom:0;}

.fx-obj{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fx-obj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;display:flex;gap:16px;box-shadow:var(--sh-sm);transition:.2s;}
.fx-sec.alt .fx-obj-card{background:var(--bg);}
.fx-obj-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--primary-300);}
.fx-obj-card .chk{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--grad-soft2);color:var(--primary-600);display:flex;align-items:center;justify-content:center;font-weight:700;}
.fx-obj-card p{font-size:.94rem;line-height:1.55;color:#3a4a5e;}

.fx-prog{display:flex;flex-direction:column;gap:14px;}
.fx-mod{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;}
.fx-mod summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 22px;}
.fx-mod summary::-webkit-details-marker{display:none;}
.fx-mod .num{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;font-family:var(--font-title);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 8px 18px rgba(13,150,210,.3);}
.fx-mod .mt{flex:1;}
.fx-mod .mt b{display:block;font-family:var(--font-title);font-size:1.05rem;color:#16283c;}
.fx-mod .mt small{color:var(--muted);font-size:.82rem;}
.fx-mod .caret{color:var(--muted);transition:transform .25s;font-size:1.1rem;}
.fx-mod[open] .caret{transform:rotate(180deg);}
.fx-mod .body{padding:0 22px 20px 80px;}
.fx-mod .body ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.fx-mod .body li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:#3a4a5e;}
.fx-mod .body li .ok{color:var(--primary);flex-shrink:0;font-weight:700;}

.fx-trainer{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:32px;}
.fx-avatar{width:120px;height:120px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-title);font-size:2.4rem;font-weight:700;box-shadow:var(--sh-md);}
.fx-trainer h3{font-size:1.4rem;color:#16283c;margin-bottom:4px;}
.fx-trainer .role{color:var(--primary-600);font-weight:600;font-size:.95rem;margin-bottom:12px;}
.fx-trainer p{color:#3a4a5e;line-height:1.6;font-size:.95rem;max-width:660px;}
.fx-trainer-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:16px;}
.fx-tg{background:var(--surface-2);color:var(--primary-600);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:600;}

.fx-sess-list{display:flex;flex-direction:column;gap:12px;}
.fx-sess-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 22px;box-shadow:var(--sh-sm);}
.fx-sess-row .date{font-family:var(--font-title);font-weight:700;color:#16283c;font-size:1.05rem;display:flex;flex-direction:column;line-height:1.1;}
.fx-sess-row .date small{font-family:var(--font-body);font-weight:500;color:var(--muted);font-size:.78rem;margin-top:3px;}
.fx-sess-row .meta{color:#3a4a5e;font-size:.9rem;display:flex;gap:1.2rem;flex-wrap:wrap;}
.fx-sess-row .meta span{display:inline-flex;align-items:center;gap:.35rem;}
.fx-left{font-size:.82rem;font-weight:600;color:var(--success);background:var(--success-050);padding:.35rem .7rem;border-radius:999px;white-space:nowrap;}
.fx-left.full{color:var(--danger);background:var(--danger-050);}

.fx-final{position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:var(--r-xl);padding:48px;text-align:center;box-shadow:var(--sh-lg);}
.fx-final::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 70%);mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 70%);}
.fx-final *{position:relative;z-index:2;}
.fx-final h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:12px;}
.fx-final p{color:rgba(255,255,255,.9);font-size:1.05rem;max-width:560px;margin:0 auto 26px;}
.fx-final-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.fx-final .fx-btn-primary{background:#fff;color:var(--primary-600);}
.fx-final .fx-btn-primary:hover{background:#f0f8ff;color:var(--primary-600);}
.fx-final .fx-btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);}
.fx-final .fx-btn-ghost:hover{background:rgba(255,255,255,.24);color:#fff;}

/* ---- Drawer latéral inscription / devis (mi-*) ----
   Réutilise .drawer (position/animation/overlay via main.js) ; .mi-drawer surcharge
   la largeur, la transformation fermée et la mise en page interne. */
.mi-drawer{width:560px;max-width:94vw;transform:translateX(105%);
  box-shadow:-24px 0 60px rgba(20,40,60,.22);}
.mi-drawer.open{transform:translateX(0);}

.mi-head{padding:0 24px;flex:none;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.mi-tabs{display:flex;gap:6px;}
.mi-tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  padding:18px 6px 15px;font-family:var(--font-body);font-size:1rem;font-weight:700;
  color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s;}
.mi-tab:hover{color:var(--primary-600);}
.mi-tab.is-active{color:var(--primary);border-bottom-color:var(--primary);}
.mi-x{align-self:center;flex:none;width:34px;height:34px;border:0;background:var(--surface-2);
  border-radius:10px;color:var(--muted);font-size:1.35rem;line-height:1;cursor:pointer;transition:color .18s;}
.mi-x:hover{color:var(--danger);}

/* Chaque formulaire = colonne (corps scrollable + pied collant) ; l'inactif est masqué. */
.mi-form{display:none;flex:1;min-height:0;}
.mi-form.is-active{display:flex;flex-direction:column;}
.mi-body{flex:1;overflow-y:auto;padding:22px 24px;}
.mi-body h3{margin:0 0 6px;font-size:1.35rem;}
.mi-foot{flex:none;padding:16px 24px;border-top:1px solid var(--border);background:var(--surface-2);
  display:flex;gap:12px;justify-content:flex-end;align-items:center;}

/* Sélecteur de session en cartes-radio */
.mi-sess-list{display:flex;flex-direction:column;gap:10px;}
.mi-sess{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--border);border-radius:12px;padding:13px 14px;cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s;}
.mi-sess:hover{border-color:var(--primary-300);}
.mi-sess:has(input:checked){border-color:var(--primary);background:var(--primary-050);
  box-shadow:0 0 0 3px var(--primary-050);}
.mi-sess input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.mi-sess-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mi-sess-d{font-weight:700;}
.mi-sess-m{color:var(--muted);font-size:.85rem;}
.mi-sess-pl{font-size:.78rem;font-weight:700;color:#d97706;white-space:nowrap;text-align:right;}
.mi-sess-pl.ok{color:#0d7a4e;}

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

/* ---- Responsive ---- */
@media (max-width:920px){
  .fx-hero-in{grid-template-columns:1fr;gap:36px;padding-top:26px;}
  .fx-poster-wrap{max-width:340px;margin:0 auto;}
  .fx-poster-chip.pc1{left:-14px;}
  .fx-poster-chip.pc2{right:-14px;}
  .fx-price-grid{grid-template-columns:1fr;}
  .fx-obj{grid-template-columns:1fr;}
  .fx-trainer{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .fx-trainer-tags{justify-content:center;}
  .fx-sess-row{grid-template-columns:1fr;gap:12px;text-align:left;}
}
@media (max-width:560px){
  .fx-hero{padding-bottom:90px;}
  .fx-float{margin-top:-64px;}
  .fx-trust{grid-template-columns:1fr;}
  .fx-mod .body{padding-left:22px;}
  .fx-final{padding:34px 22px;}
  .mi-tab{padding:.75rem .7rem;font-size:.86rem;}
}

/* ================================================================ AVIS GOOGLE (.fxg-) */
:root{ --fxg-gold:#f5b400; }

/* -- Widget de note globale -- */
.fxg-hero{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  max-width:520px; margin:0 auto 40px; padding:26px 30px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-md); text-align:center;
}
.fxg-hero-logo{ display:block; width:44px; height:44px; margin-bottom:2px; }
.fxg-hero-logo svg{ width:100%; height:100%; display:block; }
.fxg-hero-score{ display:flex; align-items:baseline; gap:4px; line-height:1; }
.fxg-hero-num{
  font-family:var(--font-title); font-weight:700; font-size:3.2rem;
  color:var(--text); letter-spacing:-1px;
}
.fxg-hero-max{ font-size:1.1rem; font-weight:700; color:var(--muted); }
.fxg-hero-stars{ color:var(--fxg-gold); font-size:1.5rem; letter-spacing:3px; }
.fxg-hero-count{ margin:2px 0 0; color:var(--muted); font-size:.9rem; }

/* -- Grille -- */
.fxg-grid{ align-items:stretch; }

/* -- Carte d'avis -- */
.fxg-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 22px 24px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fxg-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg); border-color:var(--primary-300);
}
.fxg-top{ display:flex; align-items:center; gap:12px; }
.fxg-avatar{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-title); font-weight:700; font-size:1.05rem;
  box-shadow:var(--shadow-xs);
}
.fxg-id{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.fxg-name{
  font-family:var(--font-title); font-weight:700; font-size:.98rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fxg-sub{ font-size:.8rem; color:var(--muted); }
.fxg-cardg{ flex:0 0 auto; width:20px; height:20px; opacity:.95; }
.fxg-cardg svg{ width:100%; height:100%; display:block; }
.fxg-stars{ color:var(--fxg-gold); font-size:1.05rem; letter-spacing:2px; }
.fxg-text{
  position:relative; margin:0; color:var(--ink); font-size:.96rem; line-height:1.6;
}
.fxg-text::before{
  content:"\201C"; position:absolute; top:-14px; left:-4px;
  font-family:var(--font-title); font-size:2.4rem; line-height:1;
  color:var(--primary-050); z-index:0;
}

/* -- Etat vide -- */
.fxg-empty{
  grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:38px 24px; text-align:center;
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--r-lg);
}
.fxg-empty-logo{ width:40px; height:40px; opacity:.85; }
.fxg-empty-logo svg{ width:100%; height:100%; display:block; }

/* -- CTA -- */
.fxg-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:40px;
}
.fxg-btn-g{
  display:inline-flex; width:1.1em; height:1.1em;
  background:#fff; border-radius:50%; padding:1px; margin-right:.15em;
}
.fxg-btn-g svg{ width:100%; height:100%; display:block; }

@media (max-width:640px){
  .fxg-hero-num{ font-size:2.6rem; }
  .fxg-cta .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   Système d'icônes IT LAND (Lucide inline) — composant <x-icon>
   ========================================================================== */
.ico{
  display:inline-block;
  vertical-align:middle;
  flex:none;                 /* ne rétrécit jamais dans un flex-container */
  width:1em; height:1em;     /* fallback: suit la taille du texte si size non transmis */
  color:currentColor;        /* hérite la couleur du texte parent */
  overflow:visible;
}
/* Quand width/height sont posés par l'attribut size, ils priment sur le 1em. */
.ico[width]{ width:auto; }
.ico[height]{ height:auto; }
.ico[stroke]{ stroke:currentColor; }   /* état neutre : couleur héritée */
/* Alignement dans un bouton/lien avec texte */
.btn .ico, a .ico, .badge .ico{ margin-top:-.1em; }

/* ==========================================================================
   ACCUEIL — Design moderne edtech (préfixe .hm-) — APPEND 2026-07-02
   Reproduction fidèle de la maquette /maquette/home. Palette charte bleue.
   ========================================================================== */
.hm-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.hm-grad-text{background:linear-gradient(120deg,#0d96d2,#37a9e1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-center{text-align:center}
.hm-mt-lg{margin-top:34px}

/* -- Titres -- */
.hm-h1,.hm-h2,.hm-dtitle,.hm-ftitle{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em;line-height:1.06}
.hm-h1{font-size:clamp(2.3rem,5vw,3.8rem);font-weight:700;margin:16px 0 16px;color:#0c1a2b}
.hm-h2{font-size:clamp(1.85rem,3.4vw,2.6rem);font-weight:700;margin:0;color:#0c1a2b}

/* -- Eyebrow pilule -- */
.hm-eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#0a7fb4;background:#e7f5fc;padding:7px 14px;border-radius:999px}

/* -- Boutons -- */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Inter',system-ui,sans-serif;font-weight:600;border-radius:999px;padding:13px 24px;cursor:pointer;border:0;font-size:.98rem;transition:.2s;line-height:1;text-decoration:none}
.hm-btn-sm{padding:9px 18px;font-size:.9rem}
.hm-btn-block{width:100%;margin-top:16px}
.hm-btn-p{background:linear-gradient(120deg,#0d96d2,#37a9e1);color:#fff;box-shadow:0 12px 30px rgba(13,150,210,.32)}
.hm-btn-p:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(13,150,210,.42);color:#fff}
.hm-btn-ghost{background:#fff;color:#0c1a2b;border:1px solid #e6edf5}
.hm-btn-ghost:hover{border-color:#0d96d2;color:#0a7fb4}
.hm-btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.hm-btn-glass:hover{background:rgba(255,255,255,.24);color:#fff}
.hm-btn-white{background:#fff;color:#0a7fb4}
.hm-btn-white:hover{transform:translateY(-2px);color:#0a7fb4}

/* -- HERO -- */
.hm-hero{position:relative;overflow:visible;padding:60px 0 44px;background:#f5f9fd url('/assets/img/hero-bg.svg') center/cover no-repeat}
.hm-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,rgba(245,249,253,.92) 0%,rgba(245,249,253,.62) 40%,rgba(245,249,253,.10) 72%,rgba(245,249,253,0) 100%)}
.hm-hero-fx{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hm-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none}
.hm-b1{width:520px;height:520px;background:#9fe0fb;top:-160px;right:-120px}
.hm-b2{width:420px;height:420px;background:#c9b8ff;bottom:-180px;left:-120px;opacity:.35}
.hm-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center}
.hm-lead{font-size:1.14rem;color:#5b6b7f;max-width:560px;line-height:1.55}
.hm-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 22px}
.hm-hero-stats{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid #e6edf5;padding-top:20px;margin-top:4px}
.hm-hs strong{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;color:#0c1a2b;display:flex;align-items:center;gap:.1rem}
.hm-hs span{font-size:.85rem;color:#5b6b7f}
.hm-star-inline{color:#fbbf24}

/* Hero carte glass */
.hm-visual{position:relative}
.hm-glass{background:rgba(255,255,255,.78);border:1px solid #fff;border-radius:26px;box-shadow:0 30px 70px rgba(13,60,90,.16);backdrop-filter:blur(10px);padding:22px}
/* ---- Carte de session (piste A : la fiche) --------------------------------
   L'affiche porte la date et le lieu ; le corps porte le titre, les faits et le
   prix — sorti du bouton, où il se comparait mal d'une carte à l'autre. */
.hm-vc-visuel{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#cfe3f1;margin:-4px -4px 14px}
.hm-vc-visuel img{width:100%;height:100%;object-fit:cover;display:block}
.hm-vc-visuel-repli{display:block;width:100%;height:100%;background:linear-gradient(120deg,#0d96d2,#37a9e1)}
.hm-vc-voile{position:absolute;inset:auto 0 0 0;height:64%;background:linear-gradient(to top,rgba(6,26,40,.9),rgba(6,26,40,0));pointer-events:none}
.hm-vc-cat{position:absolute;top:10px;left:10px;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:rgba(6,26,40,.62);padding:4px 9px;border-radius:999px}
.hm-vc-urgence{position:absolute;top:10px;right:10px;font-size:.66rem;font-weight:800;color:#7a3d00;background:#ffd79a;padding:4px 9px;border-radius:999px}
.hm-vc-quand{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;color:#fff}
.hm-vc-jour{background:#fff;color:#0d3c5a;border-radius:11px;padding:5px 9px;text-align:center;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.hm-vc-jour b{display:block;font-size:1.22rem;font-weight:800}
.hm-vc-jour span{display:block;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.72;margin-top:2px}
.hm-vc-lieu{font-size:.82rem;font-weight:650;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.hm-vc-title{font-weight:750;color:#0c1a2b;line-height:1.28;font-size:1.02rem}
.hm-vc-faits{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 13px}
.hm-vc-fait{font-size:.76rem;font-weight:650;color:#5b6b7f;background:#f1f6fa;border:1px solid #e2ecf4;border-radius:999px;padding:3px 9px}
.hm-vc-fait-ok{color:var(--success,#10804f);background:#e4f5ec;border-color:transparent}
.hm-vc-pied{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hm-vc-prix{line-height:1.1}
.hm-vc-prix b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:#0c1a2b}
.hm-vc-prix span{display:block;font-size:.7rem;color:#7b90a3;font-weight:650;margin-top:2px}
.hm-vc-pied .hm-btn{width:auto;padding:11px 20px}
.hm-vc-suite{border-top:1px solid #e2ecf4;margin-top:13px;padding-top:10px;font-size:.79rem;color:#7b90a3}
.hm-vc-suite b{color:#5b6b7f;font-weight:700}
/* Sous 380 px, prix et bouton ne tiennent plus côte à côte. */
@media (max-width:380px){
  .hm-vc-pied{flex-direction:column;align-items:stretch;gap:10px}
  .hm-vc-pied .hm-btn{width:100%;text-align:center}
}

/* Puces flottantes — repositionnées hors du titre de la carte */
.hm-chip{position:absolute;background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(13,60,90,.16);padding:11px 15px;display:flex;align-items:center;gap:9px;font-weight:600;font-size:.88rem;color:#0c1a2b;z-index:2}
.hm-chip-tr{top:-22px;right:-14px}     /* en haut à DROITE, loin du badge+titre à gauche */
.hm-chip-bl{bottom:-22px;left:-14px}
.hm-chip-ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;color:#fff}
.hm-chip-green{background:#16a34a}
.hm-chip-blue{background:#0d96d2}

/* ============================================================================
   BANDE DÉFILANTE — écrite une seule fois, utilisée par les deux bandeaux de
   logos (le bandeau de confiance du hero et la section « Nos partenaires »).
   Sans puce ni flèche : le défilement est continu.

   À neuf organismes, le retour à la ligne cassait chaque bande sur deux rangs
   dont le second n'en portait que deux. La bande devient une fenêtre, et les
   logos défilent derrière. Les bords s'estompent au lieu d'être tranchés net.
   ========================================================================= */
.bande-defile{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* Largeur d'une copie = n x (élément + marge). L'écart est porté par les
   ÉLÉMENTS et non par `gap` : avec `gap`, la piste mesure une marge de moins que
   la somme des copies, et la translation de 50 % tombe à côté — la boucle saute
   visiblement à chaque tour. */
.bande-piste{
  display:flex;align-items:center;width:max-content;
  animation:bandeDefile var(--hm-duree,40s) linear infinite;
  will-change:transform;
}
.bande-piste > *{margin-inline-end:40px;flex:none}
@keyframes bandeDefile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Un visiteur qui veut lire un logo, ou l'atteindre au clavier, arrête la bande. */
.bande-defile:hover .bande-piste,
.bande-defile:focus-within .bande-piste{animation-play-state:paused}
/* Mouvement refusé : la bande redevient une grille centrée, et les copies
   décoratives disparaissent — mieux vaut deux rangs qu'une animation imposée. */
@media (prefers-reduced-motion: reduce){
  .bande-defile{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .bande-piste{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:18px}
  .bande-piste > [aria-hidden="true"]{display:none}
}

/* Bandeau de confiance du hero : ce qui lui est propre. */
.hm-trust{padding:30px 0 6px;margin-top:14px}

/* Hauteur commune plutot que largeur : les logos d'organismes ont des rapports
   tres differents (PMI est presque carre, Scaled Agile tres large). Caler la
   hauteur les aligne optiquement sans en ecraser aucun. */
.hm-trust-item{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;transition:transform var(--t)}
.hm-trust-item:hover{transform:translateY(-2px)}
.hm-trust-item:focus-visible{outline:2px solid var(--primary);outline-offset:6px;border-radius:6px}
.hm-trust-item img{height:38px;width:auto;max-width:170px;object-fit:contain;display:block}

/* Repli quand le logo n'a pas encore ete depose : un nom lisible, pas un gris efface. */
.hm-trust-txt{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#5b6b7f;font-size:1.05rem;letter-spacing:.01em}

@media (max-width:640px){
  .bande-piste > *{margin-inline-end:26px}
  .hm-trust-item img{height:30px;max-width:130px}
}
@media (prefers-reduced-motion: reduce){
  .hm-trust-item,.hm-trust-item:hover{transition:none;transform:none}
}

/* -- Sections génériques -- */
.hm-blk{padding:70px 0;background:#f5f9fd}
.hm-blk-tight{padding:36px 0}
.hm-sec-head{text-align:center;max-width:660px;margin:0 auto 40px}
.hm-sec-head .hm-eyebrow{margin-bottom:14px}
.hm-sec-head h2{margin:14px 0 10px}
.hm-sec-head p{color:#5b6b7f;font-size:1.05rem}

/* -- Bento domaines -- */
.hm-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hm-dcard{background:#fff;border:1px solid #e6edf5;border-radius:22px;padding:24px;transition:.22s;position:relative;overflow:hidden;display:block;color:inherit}
.hm-dcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(13,60,90,.1);border-color:transparent}
.hm-di{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:14px}
.hm-dtitle{font-size:1.18rem;margin:0 0 6px;color:#0c1a2b}
.hm-dcard p{color:#5b6b7f;font-size:.94rem;margin:0}
.hm-dtag{position:absolute;top:18px;right:18px;font-size:.72rem;font-weight:700;color:#0a7fb4;background:#e7f5fc;padding:4px 10px;border-radius:999px}
.hm-span2{grid-column:span 2}

/* -- Cartes formations -- */
.hm-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hm-fcard{background:#fff;border:1px solid #e6edf5;border-radius:22px;overflow:hidden;transition:.22s;display:flex;flex-direction:column;color:inherit}
.hm-fcard:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(13,60,90,.14)}
.hm-poster{aspect-ratio:4/5;background:#e9f1f8;background-size:cover;background-position:center top;background-repeat:no-repeat;position:relative}
.hm-fchip{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:#0a7fb4;font-weight:700;font-size:.73rem;padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.hm-fcert{position:absolute;top:12px;right:12px;background:#fef3e2;color:#b5670a;font-weight:700;font-size:.72rem;padding:5px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:.25rem}
.hm-fb{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.hm-ftitle{font-size:1.06rem;margin:0 0 10px;min-height:2.4em;color:#0c1a2b}
.hm-fmeta{display:flex;gap:16px;color:#5b6b7f;font-size:.83rem;margin-bottom:14px}
.hm-fmeta span{display:inline-flex;align-items:center;gap:.3rem}
.hm-ffoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.hm-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.18rem;color:#0c1a2b}
.hm-price s{font-size:.72rem;color:#5b6b7f;font-weight:500;text-decoration:none}

/* -- Bandeau chiffres foncé -- */
.hm-band{background:radial-gradient(60rem 30rem at 20% -20%,#125e86,transparent),#081726;color:#fff;border-radius:32px;padding:52px;position:relative;overflow:hidden}
.hm-band-head{margin:0 0 30px}
.hm-band-title{color:#fff}
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1}
.hm-stat b{font-family:'Space Grotesk',sans-serif;font-size:2.5rem;display:block;background:linear-gradient(120deg,#fff,#a9e4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-stat span{color:#a9c3d6;font-size:.92rem}

/* -- Comment ça marche -- */
.hm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hm-step{background:#fff;border:1px solid #e6edf5;border-radius:22px;padding:24px;position:relative}
.hm-step .hm-num{width:40px;height:40px;border-radius:12px;background:linear-gradient(120deg,#0d96d2,#37a9e1);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;display:grid;place-items:center;margin-bottom:14px}
.hm-step h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;margin:0 0 6px;color:#0c1a2b}
.hm-step p{color:#5b6b7f;font-size:.9rem;margin:0}

/* -- CTA final -- */
.hm-final{background:linear-gradient(120deg,#0d96d2,#37a9e1);border-radius:32px;padding:56px;text-align:center;color:#fff;position:relative;overflow:hidden}
.hm-final-title{color:#fff;margin-bottom:10px}
.hm-final p{opacity:.94;max-width:560px;margin:0 auto 24px}
.hm-final-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* -- Responsive -- */
@media(max-width:940px){
  /* minmax(0,1fr) : autorise la colonne à passer sous le min-content d'un enfant (évite le débordement mobile du hero). */
  .hm-hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hm-hero-copy{min-width:0}
  .hm-visual{max-width:460px;margin:0 auto;width:100%}
}
@media(max-width:900px){
  .hm-bento{grid-template-columns:1fr 1fr}
  .hm-fgrid{grid-template-columns:1fr 1fr}
  .hm-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .hm-stats{grid-template-columns:1fr 1fr;gap:20px}
  .hm-band{padding:38px 26px}
  .hm-final{padding:44px 26px}
}
@media(max-width:560px){
  .hm-bento{grid-template-columns:1fr}
  .hm-span2{grid-column:span 1}
  .hm-fgrid{grid-template-columns:1fr}
  .hm-steps{grid-template-columns:1fr}
  .hm-hero{padding:44px 0 36px}
  .hm-blk{padding:52px 0}
  .hm-hero-stats{gap:22px}
}

/* ============================ Avis Google — carousel + carte soignée ============================ */
.fxg-carousel{ position:relative; padding:0 6px; }
.fxg-viewport{ overflow:hidden; padding:16px 6px 10px; }
.fxg-track{ display:flex; gap:22px; transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform; }
.fxg-track > .fxg-card{ flex:0 0 calc((100% - 44px) / 3); box-sizing:border-box; }
.fxg-track > .fxg-empty{ flex:0 0 100%; }

.fxg-nav{ position:absolute; top:calc(50% + 3px); transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border,#e6edf5); background:#fff;
  color:var(--primary,#0d96d2); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 26px rgba(13,60,90,.14); transition:.18s; }
.fxg-nav:hover{ background:var(--primary,#0d96d2); color:#fff; border-color:transparent; transform:translateY(-50%) scale(1.06); }
.fxg-nav:disabled{ opacity:.32; cursor:default; box-shadow:none; transform:translateY(-50%); }
.fxg-prev{ left:-14px; } .fxg-next{ right:-14px; }

.fxg-dots{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.fxg-dots button{ width:8px; height:8px; border-radius:999px; border:0; background:#c9d8e6; padding:0; cursor:pointer; transition:.25s; }
.fxg-dots button.on{ width:26px; background:var(--primary,#0d96d2); }

/* Carte avis retravaillée (surcharge les regles precedentes) */
.fxg-card{ position:relative; background:#fff; border:1px solid var(--border,#e6edf5); border-radius:20px;
  padding:26px 24px 22px; box-shadow:0 10px 30px rgba(13,60,90,.06);
  transition:transform .22s, box-shadow .22s, border-color .22s; height:auto; display:flex; flex-direction:column; overflow:hidden; }
.fxg-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335); opacity:0; transition:opacity .22s; }
.fxg-card:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(13,60,90,.14); border-color:transparent; }
.fxg-card:hover::before{ opacity:1; }
.fxg-quote{ position:absolute; top:2px; right:20px; font-family:Georgia,"Times New Roman",serif; font-size:4.4rem; line-height:1; color:#e9f4fb; z-index:0; pointer-events:none; }
.fxg-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; position:relative; z-index:1; }
.fxg-avatar{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.98rem; flex:0 0 auto; box-shadow:0 4px 12px rgba(13,60,90,.16); }
.fxg-id{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.fxg-name{ font-weight:700; font-size:1rem; color:var(--text,#243244); }
.fxg-sub{ font-size:.8rem; color:var(--muted,#6b7a90); }
.fxg-cardg{ margin-left:auto; }
.fxg-stars{ color:var(--fxg-gold,#f5b400); font-size:1.1rem; letter-spacing:3px; margin-bottom:10px; position:relative; z-index:1; }
.fxg-text{ color:#43566a; font-size:.94rem; line-height:1.62; margin:0 0 14px; position:relative; z-index:1; }
.fxg-verified{ margin-top:auto; display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600; color:#188038; }
.fxg-verified .ico{ color:#188038; }

@media (max-width:900px){
  .fxg-track > .fxg-card{ flex-basis:calc((100% - 22px) / 2); }
  .fxg-prev{ left:-6px; } .fxg-next{ right:-6px; }
}
@media (max-width:600px){
  .fxg-track > .fxg-card{ flex-basis:100%; }
  .fxg-nav{ width:40px; height:40px; }
  .fxg-prev{ left:-2px; } .fxg-next{ right:-2px; }
}

/* ===================================================================
   MÉGA-MENU « Formations » (préfixe .mm-)  — APPEND
   Reprend la maquette public/maquette/megamenu (SANS la barre du bas).
   Ouverture : survol (:hover), clavier (:focus-within) et clic (.open via JS).
   =================================================================== */

/* Le caret <x-icon> remplace l'ancienne flèche ::after du dropdown. */
.has-dropdown > a::after { content: none; }
.mm-caret { flex: none; transition: transform var(--t); }
.has-dropdown:hover .mm-caret,
.has-dropdown:focus-within .mm-caret,
.has-dropdown.open .mm-caret { transform: rotate(180deg); }

/* Panneau */
.mm-mega {
  position: absolute; left: 50%; top: calc(100% + 12px);
  transform: translateX(-50%) translateY(8px);
  width: min(980px, 94vw);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6edf5);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(13, 60, 90, .20);
  padding: 22px;
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px;
  z-index: 950;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.mm-mega.mm-single { grid-template-columns: 1fr; width: min(620px, 94vw); }
.mm-mega::before {
  content: ""; position: absolute; top: -8px; left: calc(50% - 8px);
  width: 16px; height: 16px; background: var(--surface, #fff);
  border-left: 1px solid var(--border, #e6edf5);
  border-top: 1px solid var(--border, #e6edf5);
  transform: rotate(45deg);
}
/* Pont de survol invisible : comble l'espace déclencheur↔panneau pour que
   le méga-menu ne se ferme pas quand la souris traverse le vide. */
.mm-mega::after {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 18px;
}
.has-dropdown:hover .mm-mega,
.has-dropdown:focus-within .mm-mega,
.has-dropdown.open .mm-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mm-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 2px 4px 12px;
}

/* Grille des domaines */
.mm-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-cat {
  display: flex; gap: 12px; padding: 12px; border-radius: 14px;
  align-items: flex-start; transition: background var(--t);
}
.mm-cat:hover { background: var(--primary-050, #f2f8fd); }
.mm-cat:hover .mm-ci { transform: scale(1.06); }
.mm-ci {
  width: 42px; height: 42px; border-radius: 12px; display: grid;
  place-items: center; color: #fff; flex: none; transition: transform var(--t);
}
.mm-ci .ico { width: 20px; height: 20px; }
/* Icône téléversée : contenue, jamais déformée, quelle que soit sa forme. */
.mm-ci-img { width: 22px; height: 22px; object-fit: contain; display: block; }
.mm-ct { min-width: 0; }
.mm-n {
  font-weight: 700; font-size: .95rem; display: flex;
  align-items: center; gap: 6px; color: var(--text);
}
.mm-cnt {
  font-size: .68rem; font-weight: 700; color: var(--primary-600, #0d96d2);
  background: var(--primary-050, #e7f5fc); border-radius: 999px; padding: 2px 7px;
}
.mm-d { font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.mm-go { margin-left: auto; color: #c4d2e0; flex: none; align-self: center; }
.mm-cat:hover .mm-go { color: var(--primary-600, #0d96d2); }
.mm-go .ico { width: 18px; height: 18px; }

/* Sortie vers le catalogue complet, sous la grille des domaines. */
.mm-tout {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 11px 14px; border-radius: 14px; font-weight: 700; font-size: .9rem;
  color: var(--primary-600, #0d96d2); background: var(--primary-050, #f2f8fd);
  border: 1px dashed #bcdcf1; transition: background var(--t), border-color var(--t);
}
.mm-tout:hover { background: #e4f2fb; border-color: var(--primary-600, #0d96d2); }
.mm-tout .ico { width: 17px; height: 17px; flex: none; }
.mm-tout-cnt { margin-left: auto; font-weight: 600; font-size: .78rem; color: var(--muted); }

/* ---------- Carrousel des prochaines formations -------------------------
   Le défilement est porté par `scroll-snap` : le JavaScript ne fait que
   pousser la piste. Sans lui — script bloqué, erreur ailleurs — le carrousel
   reste feuilletable au doigt, à la molette et au clavier. */
.mm-carrousel { display: flex; flex-direction: column; min-width: 0; }
.mm-carrousel-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; min-height: 26px;
}
.mm-nav { display: inline-flex; gap: 6px; }
.mm-fleche {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface, #fff); color: var(--primary-600, #0d96d2);
  border: 1px solid #dcebf7; transition: background var(--t), color var(--t), opacity var(--t);
}
.mm-fleche:hover:not(:disabled) { background: var(--primary-600, #0d96d2); color: #fff; }
.mm-fleche:disabled { opacity: .35; cursor: default; }
.mm-fleche .ico { width: 16px; height: 16px; }

.mm-piste {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  /* La piste ne doit pas hériter de la largeur de son contenu, sinon la
     colonne s'élargit au lieu de défiler. */
  min-width: 0;
}
.mm-piste::-webkit-scrollbar { display: none; }
.mm-piste:focus-visible { outline: 2px solid var(--primary-600, #0d96d2); outline-offset: 3px; border-radius: 18px; }
.mm-piste > .mm-feat { flex: 0 0 100%; scroll-snap-align: start; }

.mm-points { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.mm-point {
  width: 7px; height: 7px; border-radius: 999px; padding: 0; cursor: pointer;
  border: 0; background: #cfe0ee; transition: background var(--t), width var(--t);
}
.mm-point:hover { background: #a9c8de; }
.mm-point[aria-current="true"] { background: var(--primary-600, #0d96d2); width: 18px; }

@media (prefers-reduced-motion: reduce) {
  .mm-piste { scroll-behavior: auto; }
}

/* Colonne « Formation en avant » */
.mm-feat {
  background: linear-gradient(160deg, #f4fbff, #eaf5fd);
  border: 1px solid #dcebf7; border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column;
}
.mm-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary-600, #0d96d2);
}
.mm-mega .mm-feat { display: flex; flex-direction: column; }
.mm-poster {
  display: block; width: 100%; margin: 10px 0 12px; border-radius: 12px;
  aspect-ratio: 16 / 10; min-height: 160px;
  background-color: #dcecf8; background-position: center; background-size: cover; background-repeat: no-repeat;
  box-shadow: 0 10px 24px rgba(13, 60, 90, .14);
}
.mm-poster-fallback { background-image: linear-gradient(120deg, #0d96d2, #37a9e1); }
.mm-feat h3 { font-size: 1.02rem; margin: 0 0 4px; color: var(--text); }
.mm-meta {
  font-size: .8rem; color: var(--muted); display: flex; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.mm-meta span { display: inline-flex; gap: 4px; align-items: center; }
.mm-meta .ico { width: 14px; height: 14px; }
.mm-price { font-weight: 700; font-size: 1.15rem; margin-bottom: 12px; color: var(--text); }
.mm-price small { font-size: .72rem; color: var(--muted); font-weight: 500; }
.mm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: auto;
}

/* ---------- Mobile : accordéon simple dans le menu déroulant ------------- */
@media (max-width: 900px) {
  .mm-mega {
    position: static; width: auto; transform: none;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    grid-template-columns: 1fr; gap: 2px;
    padding: 4px 0 4px 12px; border: 0; border-radius: 0; box-shadow: none; z-index: auto;
  }
  .mm-mega::before { display: none; }
  .has-dropdown.open .mm-mega { display: block; }
  .has-dropdown:hover .mm-mega,
  .has-dropdown:focus-within .mm-mega,
  .has-dropdown.open .mm-mega { transform: none; }
  .mm-eyebrow { display: none; }
  .mm-cats { display: block; }
  .mm-cat { padding: .7rem .6rem; }
  /* Colonne vedette masquée en mobile.
     Spécificité .mm-mega .mm-feat (0,2,0) pour battre .main-nav a (0,1,1),
     sinon le display:inline-flex du lien de nav réafficherait la vedette. */
  .mm-mega .mm-feat,
  .mm-mega .mm-carrousel { display: none; }
  /* Le raccourci vers le catalogue reste : c'est en mobile qu'il sert le plus. */
  .mm-tout { margin: 8px 6px 4px; }
  .mm-caret { transition: none; }
}

/* ---------- Mobile : menu déroulant plus soigné ------------------------- */
@media (max-width: 900px) {
  .mm-mega::after { display: none; } /* pas de pont de survol en mobile */

  .main-nav { padding: 10px 10px 14px; gap: 0; }

  /* Entrées de 1er niveau : pleine largeur, alignées, séparateurs discrets */
  .main-nav > a,
  .has-dropdown > a {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 14px; border-radius: 12px;
    font-weight: 600; color: var(--text); background: transparent;
  }
  .has-dropdown { display: block; width: 100%; }
  .main-nav > a.active,
  .has-dropdown.open > a { background: var(--primary-050); color: var(--primary-600); }
  .main-nav > a:not(:first-child),
  .main-nav > .has-dropdown { border-top: 1px solid var(--border); }

  /* Liste des domaines : compacte, sans descriptions, sur une ligne */
  .mm-mega { padding: 2px 0 8px 4px; }
  .mm-mega .mm-cat { display: flex; width: 100%; padding: 11px 10px; align-items: center; gap: 11px; border-radius: 10px; }
  .mm-mega .mm-ci { width: 34px; height: 34px; border-radius: 9px; }
  .mm-mega .mm-ci .ico { width: 17px; height: 17px; }
  .mm-mega .mm-ct { flex: 1; }          /* pousse la flèche à droite */
  .mm-mega .mm-d { display: none; }
  .mm-mega .mm-n { font-size: .92rem; }
  .mm-mega .mm-go { color: #c9d5e2; }
}

/* ============================================================
   HERO — Recherche smart (accueil)
   ============================================================ */
.hm-search { position: relative; margin: 22px 0 14px; max-width: 560px; }
.hm-search-bar {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--border); border-radius: 16px;
  padding: 8px 8px 8px 16px; box-shadow: 0 18px 40px rgba(13, 60, 90, .12);
  transition: box-shadow .18s, border-color .18s;
}
.hm-search-bar:focus-within { border-color: var(--primary-300); box-shadow: 0 20px 46px rgba(13, 60, 90, .18); }
.hm-search-bar .ic { flex: none; color: var(--muted); display: flex; }
.hm-search-bar input {
  flex: 1; border: 0; outline: 0; background: none; font-family: inherit;
  font-size: 1.02rem; color: var(--text); min-width: 0; padding: 8px 4px;
}
.hm-search-bar input::placeholder { color: #9db0c4; }
.hm-search-btn {
  flex: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 700;
  font-size: .95rem; color: #fff; padding: 12px 22px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.hm-search-btn:hover { filter: brightness(1.05); }

/* Panneau de suggestions */
.hm-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(13, 60, 90, .22);
  overflow: hidden auto; max-height: min(60vh, 460px);
}
.hm-suggest[hidden] { display: none; }
.hm-sg-group { padding: 8px 8px 4px; }
.hm-sg-group + .hm-sg-group { border-top: 1px solid var(--border); }
.hm-sg-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; }
.hm-sg-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text); cursor: pointer; }
.hm-sg-item:hover, .hm-sg-item.is-active { background: var(--primary-050); }
.hm-sg-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; }
.hm-sg-ic svg { width: 18px; height: 18px; }
.hm-sg-t { flex: 1; min-width: 0; }
.hm-sg-n { font-weight: 600; font-size: .95rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-sg-n mark { background: #fff3cd; color: inherit; padding: 0 1px; border-radius: 3px; }
.hm-sg-s { font-size: .8rem; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-sg-meta { font-size: .78rem; color: var(--muted); flex: none; font-weight: 600; }
.hm-sg-cat .hm-sg-ic { width: 26px; height: 26px; border-radius: 8px; font-size: .72rem; font-weight: 700; }
.hm-sg-foot { border-top: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-sg-foot .hm-sg-all { color: var(--primary-600); font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.hm-sg-foot .hm-sg-all:hover { text-decoration: underline; }
.hm-sg-keys { font-size: .74rem; color: #9db0c4; white-space: nowrap; }
.hm-sg-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: .9rem; }

/* Chips « Populaire » */
.hm-pop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hm-pop-lbl { font-size: .82rem; color: var(--muted); }
.hm-pop a { font-size: .82rem; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); text-decoration: none; transition: border-color .15s, color .15s; }
.hm-pop a:hover { border-color: var(--primary); color: var(--primary-600); }

@media (max-width: 640px) {
  .hm-search-btn { padding: 12px 16px; }
  .hm-sg-keys { display: none; }
}

/* ============================================================
   FICHE FORMATION EN LIGNE — compléments au design .fx-*
   ============================================================ */
.fx-badge.online{background:linear-gradient(135deg,#0ea5a4,#0d9488);color:#fff;box-shadow:0 3px 10px rgba(13,148,136,.22)}
.fx-badge.online .dot{width:7px;height:7px;border-radius:50%;background:#8ef7e6;box-shadow:0 0 0 3px rgba(142,247,230,.4);animation:fxDotPulse 2.2s ease-in-out infinite}
@keyframes fxDotPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.fx-badge.online .dot{animation:none}}

/* aperçu vidéo dans le poster du hero */
.fx-poster-link{position:relative;display:block;border-radius:inherit}
.fx-poster-play{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none}
.fx-poster-play > span{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.94);color:#0d9488;display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.28);transition:.2s}
.fx-poster-link:hover .fx-poster-play > span{transform:scale(1.06)}
.fx-poster-play svg{width:26px;height:26px;margin-left:3px}
.fx-vbadge{position:absolute;left:14px;top:14px;z-index:4;background:rgba(15,23,42,.72);color:#fff;padding:5px 11px;border-radius:999px;font-size:.74rem;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.fx-vbadge svg{width:14px;height:14px}

/* résumé compact du curriculum */
.fx-curmeta{display:flex;gap:18px;flex-wrap:wrap;margin:-14px 0 24px;color:var(--muted);font-size:.9rem}
.fx-curmeta b{color:#16283c}

/* leçons dans l'accordéon du curriculum */
.fx-lesson{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--border);text-decoration:none;color:inherit}
.fx-lesson:first-child{border-top:0}
.fx-lesson[href]:hover{background:var(--primary-050);border-radius:8px;margin:0 -6px;padding-left:10px;padding-right:10px}
.fx-lesson .lic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--primary-050);color:var(--primary-600)}
.fx-lesson .lic svg{width:17px;height:17px}
.fx-lesson .lic.quiz{background:#efe9fc;color:#7c3aed}
.fx-lesson .lic.article{background:#fff3d9;color:#c98a00}
.fx-lesson .lt{flex:1;min-width:0;font-weight:500;color:#1f2d3d}
.fx-lesson .ldur{font-size:.82rem;color:var(--muted);flex:none;white-space:nowrap}
.fx-lesson .lprev{font-size:.7rem;font-weight:700;letter-spacing:.02em;color:#0d9488;background:#d7f2ee;padding:3px 9px;border-radius:999px;flex:none;text-transform:uppercase;white-space:nowrap}
.fx-lesson .llock{flex:none;display:flex;color:#c2ccd8}
.fx-lesson .llock svg{width:16px;height:16px}

/* "comment ça marche en ligne" */
.fx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.fx-step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--sh-sm)}
.fx-step .sn{width:36px;height:36px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:12px}
.fx-step h3{font-size:1rem;margin:0 0 6px;color:#16283c}
.fx-step p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.5}

.fx-incl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px;max-width:820px}
.fx-incl .it{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-weight:500;color:#22303f}
.fx-incl .it .i{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:#d7f2ee;color:#0d9488}
.fx-incl .it .i svg{width:18px;height:18px}

@media(max-width:820px){.fx-steps{grid-template-columns:repeat(2,1fr)}.fx-incl{grid-template-columns:1fr}}

/* ============================================================
   Accessibilité — lien d'évitement (skip to content)
   ============================================================ */
.skip-link {
  position: absolute; left: 8px; top: -52px; z-index: 2000;
  background: var(--primary-600); color: #fff; padding: 10px 16px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 24px rgba(13,60,90,.28);
  transition: top .16s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }

/* Crédit back-office */
.admin-sidebar .sb-credit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); text-align: center; font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
.admin-sidebar .sb-credit strong { color: var(--text); font-weight: 600; }
.admin-layout.collapsed .sb-credit { display: none; }

/* ===================== Avis vérifiés par formation ===================== */
.rv-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.rv-score { display:flex; align-items:center; gap:.7rem; }
.rv-score-num { font-size:2.4rem; font-weight:800; line-height:1; color:var(--text); }
.rv-score-num span { font-size:1rem; font-weight:600; color:var(--muted); }
.rv-score .stars { color:#f5a623; font-size:1.1rem; letter-spacing:2px; }
.rv-score-count { font-size:.82rem; color:var(--muted); margin-top:.15rem; }
.rv-breakdown { max-width:420px; margin:0 0 1.6rem; display:grid; gap:.35rem; }
.rv-bar-row { display:grid; grid-template-columns:34px 1fr 26px; align-items:center; gap:.55rem; font-size:.8rem; color:var(--muted); }
.rv-bar { height:8px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden; }
.rv-bar > span { display:block; height:100%; background:#f5a623; border-radius:99px; }
.rv-bar-n { text-align:right; }
.rv-card .rv-title { font-weight:700; color:var(--text); margin:.15rem 0 .4rem; }
.rv-verified { display:inline-block; font-size:.68rem; font-weight:700; color:#0a7d33; background:rgba(16,163,74,.12); padding:.05rem .4rem; border-radius:99px; vertical-align:middle; margin-left:.25rem; }
.rv-reply { margin-top:.8rem; padding:.6rem .8rem; border-left:3px solid var(--brand, #b4002d); background:rgba(0,0,0,.03); border-radius:0 8px 8px 0; font-size:.86rem; color:var(--text); }
.rv-empty { color:var(--muted); margin:.2rem 0 1.4rem; }
.rv-login-hint { margin-top:1.4rem; color:var(--muted); }
.rv-login-hint a { color:var(--brand, #b4002d); font-weight:600; }

/* Formulaire de dépôt d'avis */
.rv-form-wrap { margin-top:2rem; padding:1.5rem; border:1px solid var(--border, #e5e7eb); border-radius:14px; background:var(--card, #fff); max-width:640px; }
.rv-form-title { margin:0 0 .6rem; font-size:1.15rem; }
.rv-lbl { display:block; font-size:.85rem; font-weight:600; color:var(--muted); margin-bottom:.2rem; }
.rv-form .rv-input { width:100%; margin:.6rem 0; padding:.6rem .75rem; border:1px solid var(--border, #e5e7eb); border-radius:9px; font:inherit; background:var(--bg, #fff); color:var(--text); }
.rv-form textarea.rv-input { resize:vertical; }
.rv-err { color:#c11; font-size:.82rem; margin:.1rem 0 .4rem; }
.rv-status { font-size:.85rem; padding:.5rem .75rem; border-radius:9px; margin-bottom:.8rem; }
.rv-status-publie { background:rgba(16,163,74,.12); color:#0a7d33; }
.rv-status-en_attente { background:rgba(245,166,35,.15); color:#9a6a00; }
.rv-status-rejete { background:rgba(200,20,20,.1); color:#b01; }
/* Sélecteur d'étoiles (radios inversés + flex row-reverse => affichage 1→5) */
.rv-stars-input { display:inline-flex; flex-direction:row-reverse; gap:.1rem; }
.rv-stars-input input { position:absolute; opacity:0; width:0; height:0; }
.rv-stars-input label { font-size:1.9rem; line-height:1; color:#d4d4d8; cursor:pointer; transition:color .12s; }
.rv-stars-input label:hover, .rv-stars-input label:hover ~ label,
.rv-stars-input input:checked ~ label { color:#f5a623; }
.rv-stars-input input:focus-visible + label { outline:2px solid var(--brand, #b4002d); outline-offset:2px; border-radius:4px; }

@media (prefers-color-scheme: dark) {
  .rv-bar { background:rgba(255,255,255,.12); }
  .rv-reply { background:rgba(255,255,255,.05); }
  .rv-stars-input label { color:#52525b; }
}

/* Liste de définitions (fiche entreprise 360°) */
.def-list { display:grid; gap:.55rem; margin:0; }
.def-list > div { display:grid; grid-template-columns:150px 1fr; gap:.6rem; align-items:baseline; }
.def-list dt { color:var(--muted); font-size:.85rem; margin:0; }
.def-list dd { margin:0; color:var(--text); font-weight:500; word-break:break-word; }
@media (max-width:520px){ .def-list > div { grid-template-columns:1fr; gap:.1rem; } }

/* Tranche de paiement inline (pipeline demandes) */

/* ============ Améliorations page Demandes + pipeline (audit 07-04) ============ */
/* Ancres/titres ne passent plus sous la topbar collante (74px) */
.admin-main :where(h1, h2, .page-head, .card) { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Funnel : sous-libellé sur sa ligne + rythme aligné sur les chips */
.pl-fcard .num small { display: block; margin-top: 2px; }

/* Montant réglé / reste : hiérarchie financière lisible */
.pl-act .amt .paid { color: var(--text); }
.pl-act .amt .reste { color: #b45309; font-weight: 700; }

/* Stepper : libellés plus lisibles, connecteur centré, étapes futures contrastées */
.pl-steps .st .t { font-size: .75rem; }
.pl-steps .st::before { top: 16px; }
.pl-steps .st .ic { color: #64748b; border-color: #cdd7e4; }

/* CTA / actions : anneau de focus clavier + « Annuler » limité au texte */
.pl-cta:focus-visible, .pl-annuler:focus-visible, .pl-donepill:focus-visible,

/* Mobile : carte empilée alignée à gauche */
@media (max-width: 1100px) {
}

/* ============ Pipeline Demandes v2 — zone d'action pleine largeur + acompte/échéancier ============ */
/* La zone d'action passe sous who+stepper, sur toute la largeur (fini le tassement 210px) */
.pl-act .amt { font-size: .84rem; }
.pl-act-row .grow { flex: 1; }

/* Ligne prix / total dû */
.pl-payline .k { color: var(--muted); font-size: .82rem; }
.pl-payline .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-payline .reste { color: #b45309; }

/* Échéancier : barre de progression + versements */
.pl-ech-top .paid { color: var(--text); font-weight: 600; }
.pl-ech-top .reste { color: #b45309; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-vlist .vd { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--success-050); }
.pl-vlist .vm { color: var(--muted); font-size: .76rem; }
.pl-vlist .va { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Ajouter une tranche (ligne) */
.pl-tranche .add { border: 1px solid transparent; background: var(--primary-050); color: var(--primary-600);
  font-weight: 700; border-radius: 99px; padding: .45rem .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pl-tranche .add:hover { border-color: var(--primary); }

/* ===== Modale Encaisser — version moderne (segmented + presets + reste live) ===== */
.enc-total { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 14px; }
.enc-total .k { color: var(--muted); font-size: .84rem; }
.enc-total .v { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.enc-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 3px; margin-bottom: 14px; }
.enc-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: .85rem; padding: 7px 16px; border-radius: 99px; cursor: pointer; }
.enc-seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.enc-presets { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.enc-pre { border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .84rem; padding: 7px 13px; border-radius: 9px; cursor: pointer; }
.enc-pre[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-050); color: var(--primary-600); }
.enc-amt { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.enc-amt input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 1.3rem; padding: 11px 12px; outline: none; font-variant-numeric: tabular-nums; }
.enc-amt .cur { padding: 0 13px; color: var(--muted); font-weight: 600; border-left: 1px solid var(--border); align-self: stretch; display: grid; place-items: center; }
.enc-methods { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.enc-mtd { border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-weight: 600; font-size: .82rem; padding: 6px 13px; border-radius: 99px; cursor: pointer; }
.enc-mtd[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-050); color: var(--primary-600); }
.enc-money { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-top: 14px; }
.enc-money .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.enc-money .k { color: var(--muted); font-size: .84rem; }
.enc-money .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.enc-money .v.reste { color: #b45309; }
.enc-money .v.ok { color: var(--success); }
.enc-money .bar { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 10px 0 4px; }
.enc-money .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #16a34a); transition: width .3s; }
.enc-money .note { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-acompte-only].hide { opacity: .4; pointer-events: none; }

/* Funnel cliquable (filtres) */
.pl-fcard.on { box-shadow: 0 0 0 2px var(--primary-050); }
.pl-fcard.s1.on{ border-color:#0d96d2 } .pl-fcard.s2.on{ border-color:#7c3aed } .pl-fcard.s3.on{ border-color:#d97706 } .pl-fcard.s4.on{ border-color:#16a34a }
.pl-fcard.on::after { content:""; position:absolute; top:10px; right:12px; width:9px; height:9px; border-radius:50%; background:var(--c-on,var(--primary)); }
.pl-fcard.s1{ --c-on:#0d96d2 } .pl-fcard.s2{ --c-on:#7c3aed } .pl-fcard.s3{ --c-on:#d97706 } .pl-fcard.s4{ --c-on:#16a34a }
/* Les cartes sont devenues des liens : le filtre vit dans l'URL, plus dans le DOM. */

/* Barre de filtres des demandes */
.pl-filtres .form-control { width: 100%; }
@media (max-width: 900px) { .pl-filtres { grid-template-columns: 1fr 1fr; } .pl-filtres-act { grid-column: 1 / -1; } }

/* ---------------------------------------------- Accueil : sessions en rotation */
/* Une seule diapositive est dans le flux : les cartes n'ont pas la meme hauteur
   selon la longueur du titre, et un positionnement absolu imposerait une hauteur
   fixe qui rognerait les intitules longs. */
.hm-glass .hm-vc { display: none; }
.hm-glass .hm-vc.est-active { display: block; animation: hm-vc-apparait .32s ease-out; }

@keyframes hm-vc-apparait {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.hm-rota {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.hm-rota-pt {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(36, 50, 68, .22);
  cursor: pointer;
  transition: width var(--t), background var(--t);
}
.hm-rota-pt:hover { background: rgba(36, 50, 68, .4); }
.hm-rota-pt.est-active { width: 22px; background: var(--primary); }
.hm-rota-pt:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hm-glass .hm-vc.est-active { animation: none; }
  .hm-rota-pt { transition: none; }
}

/* ------------------------------------- Disponibilite d'une session (public) */
/* Le decompte exact et la barre de remplissage ont ete remplaces par un etat :
   le visiteur sait s'il peut s'inscrire, sans qu'on lui annonce le nombre
   d'inscrits. Les effectifs restent visibles en back-office. */


/* Chaîne commerciale : devis → commande → facture → règlement.
   Une frise, pas un badge : ce qui compte est de voir d'où l'affaire vient et
   où elle va, pas seulement où elle est. */
.dv-chaine{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:.7rem 0 0;padding:0;counter-reset:dvc}
.dv-chaine li{
  position:relative;font-size:.78rem;font-weight:600;color:var(--muted);
  padding:.28rem .8rem .28rem 1.9rem;border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface);counter-increment:dvc;
}
.dv-chaine li::before{
  content:counter(dvc);position:absolute;left:.42rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;background:var(--surface-2);color:var(--muted);
  font-size:.64rem;display:grid;place-items:center;font-weight:700;
}
.dv-chaine li.faite{color:var(--success);border-color:#c7ead4;background:var(--success-050)}
.dv-chaine li.faite::before{background:var(--success);color:#fff}
.dv-chaine li.courante{color:var(--primary-600);border-color:var(--primary-300);background:var(--primary-050)}
.dv-chaine li.courante::before{background:var(--primary);color:#fff}


/* ==========================================================================
   SOCLE DES ÉCRANS DE LISTE  (composant <x-liste>)
   --------------------------------------------------------------------------
   Huit modules affichaient huit écrans pour faire la même chose. Ces classes
   portent la chrome commune ; elles s'appuient sur .table, .pill, .kpi et
   .card déjà en place plutôt que d'ouvrir un vocabulaire parallèle.
   ========================================================================== */

/* 2 · Mesures — trois ou quatre, jamais vingt. */
.liste-mesures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.liste-mesure.est-alerte .kpi-val { color: var(--danger); }

/* 3 · Filtres — même barre, même place, sur tous les écrans. */
.liste-filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.liste-champ {
  flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface);
}
.liste-champ .ico { flex: none; color: var(--muted); }
.liste-champ input { border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: .9rem; width: 100%; }
.liste-select { width: auto; min-width: 170px; }
.liste-export { margin-left: auto; }

/* 4 · Puces d'état — le compte dit s'il y a quelque chose à voir. */
.liste-puces { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.liste-puce {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px;
  font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--surface);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.liste-puce:hover { background: var(--primary-050); border-color: var(--primary-600); color: var(--primary-600); }
.liste-puce b { font-variant-numeric: tabular-nums; opacity: .55; font-weight: 700; }
.liste-puce[aria-current="true"] { background: var(--primary-600); border-color: transparent; color: #fff; }
.liste-puce[aria-current="true"] b { opacity: .75; }

/* 5 · Tableau */
.liste-tablo { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.liste-tablo .table-wrap { border: 0; border-radius: 0; }
.liste-table th.liste-n, .liste-table td.liste-n { text-align: right; }

.liste-ident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.liste-past {
  width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .74rem; letter-spacing: .02em;
}
.liste-past .ico { width: 18px; height: 18px; }
.liste-ident-txt { min-width: 0; display: block; }
.liste-ident-txt .cell-main { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem; letter-spacing: -.02em; }

/* Les chiffres s'alignent, sinon deux colonnes de montants cessent de se comparer. */
.liste-mesure-cell { display: block; }
.liste-chiffre { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.liste-chiffre.est-ok { color: var(--success); }
.liste-chiffre.est-att { color: var(--warning); }
.liste-chiffre.est-ko { color: var(--danger); }

/* Le quatrième ton, qui manquait : rien à signaler. */
.pill-neutre { background: var(--surface-2); color: var(--muted); }
.pill-neutre::before { opacity: .45; }

/* L'état vide dit ce qui est vide, pourquoi, et le geste suivant. */
.liste-vide { padding: 44px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.liste-vide strong { color: var(--ink); font-size: 1rem; }
.liste-vide span { max-width: 46ch; }
.liste-vide .btn { margin-top: 8px; }

/* 6 · Pied — le compte, puis la pagination. Jamais ailleurs. */
.liste-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted);
}
.liste-pied .pagination { margin: 0; }

/* Une échéance dépassée se voit sans avoir à lire la date. */
.liste-echue { color: var(--danger); font-weight: 600; }

/* Colonne de coche : étroite, centrée, elle ne vole pas d'espace au contenu. */
.liste-coche, .liste-table td.liste-coche { width: 38px; text-align: center; padding-right: 0; }


/* ==========================================================================
   ÉCRAN DE CRÉATION D'UNE FACTURE — trois questions, une à la fois
   L'écran précédent ouvrait quatre panneaux simultanés, dont DEUX listes
   déroulantes avec chacune sa recherche. Ici chaque étape se referme en une
   ligne de résumé, et le document se compose à droite.
   Les étapes sont des <details> natifs : le clavier et le sans-JavaScript
   fonctionnent sans une ligne de code de notre part.
   ========================================================================== */
/* L'attribut « hidden » n'est appliqué que par la feuille du NAVIGATEUR. La
   moindre déclaration `display` d'auteur l'emporte sur elle, quelle que soit la
   spécificité — et cet écran en pose sur .fx-item, .fx-repris, .fx-tiers et
   .fx-doc-vide. Sans cette règle, filtrer la liste ne masquait AUCUN dossier,
   la fiche du destinataire s'affichait vide au chargement, et le message
   « le document se compose ici » restait empilé sur le document composé. */
.fx-grille [hidden] { display: none !important; }

.fx-grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .fx-grille { grid-template-columns: 1fr; } }
.fx-flux { display: grid; gap: 12px; align-content: start; }

/* ---------- Une étape ---------- */
.fx-etape {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(36, 50, 68, .06)); overflow: hidden;
  transition: border-color var(--t);
}
.fx-etape[open] { border-color: var(--primary-300); }

.fx-tete {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer;
  list-style: none; user-select: none;
}
.fx-tete::-webkit-details-marker { display: none; }
.fx-tete:hover { background: var(--surface-2); }
.fx-etape[open] .fx-tete:hover { background: transparent; }
.fx-tete:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.fx-puce {
  flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 800;
}
.fx-etape[open] .fx-puce { background: var(--primary-600); color: #fff; border-color: var(--primary-600); }
.fx-etape.est-faite:not([open]) .fx-puce { background: var(--success-050); color: var(--success); border-color: var(--success); }

.fx-titre { flex: 1; min-width: 0; }
.fx-titre b { display: block; font-size: .98rem; }
.fx-option { font-weight: 400; color: var(--muted); }
.fx-resume {
  display: block; font-size: .83rem; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-etape.est-faite:not([open]) .fx-resume { color: var(--ink); }
.fx-chevron { flex: none; color: var(--muted); transition: transform var(--t); }
.fx-etape[open] .fx-chevron { transform: rotate(90deg); }

.fx-corps { padding: 16px 18px 18px; border-top: 1px solid var(--border); }

/* ---------- La source : dossier ou saisie libre ---------- */
.fx-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px;
  background: var(--surface-2); padding: 4px; border-radius: 11px; }
.fx-segment {
  display: block; text-align: center; cursor: pointer; border-radius: 8px; padding: 8px 10px;
  color: var(--muted); transition: background var(--t), color var(--t);
}
.fx-segment input { position: absolute; opacity: 0; width: 0; height: 0; }
.fx-segment b { display: block; font-size: .9rem; font-weight: 650; }
.fx-segment small { display: block; font-size: .74rem; }
 /* Deux règles et non une liste : un sélecteur inconnu invalide la RÈGLE
    ENTIÈRE, si bien qu'un navigateur sans :has() perdait aussi .est-choisi,
    la classe que le script pose à la main. */
.fx-segment.est-choisi { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(36, 50, 68, .1); }
.fx-segment:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(36, 50, 68, .1); }
.fx-segment:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.fx-segment:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Sans JavaScript, cocher « Facture libre » ne révélait rien : le panneau était
   masqué par le serveur et seul le script le rouvrait. C'est le bouton radio
   lui-même qui commande, ici. Un navigateur sans :has() montre les DEUX
   panneaux — tout reste utilisable, ce qui est la bonne dégradation. */
.fx-corps:has(input[name="source"][value="dossier"]:checked) [data-fx-vue="libre"] { display: none; }
.fx-corps:has(input[name="source"][value="libre"]:checked) [data-fx-vue="dossier"] { display: none; }

.fx-champ { margin-bottom: 10px; }

/* ---------- La liste des dossiers ---------- */
.fx-liste { max-height: 330px; overflow-y: auto; display: grid; gap: 6px; padding: 3px; }
.fx-item {
  display: block; cursor: pointer; border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px;
  transition: border-color var(--t), background var(--t);
}
.fx-item:hover { border-color: var(--primary-300); background: var(--primary-050); }
.fx-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.fx-item.est-choisi {
  border-color: var(--primary-600); background: var(--primary-050);
  box-shadow: inset 3px 0 0 var(--primary-600);
}
.fx-item:has(input:checked) {
  border-color: var(--primary-600); background: var(--primary-050);
  box-shadow: inset 3px 0 0 var(--primary-600);
}
.fx-item:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.fx-item-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.fx-item-ref { font-size: .78rem; color: var(--muted); grid-column: 1; }
.fx-item-montant {
  grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right;
  font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fx-item-nom { grid-column: 1; font-weight: 650; font-size: .93rem; color: var(--ink); }
.fx-item-objet { grid-column: 1; font-size: .83rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-item-etats { grid-column: 1 / -1; display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.fx-item-etats .pill { font-size: .71rem; padding: 2px 8px; }
.fx-rien { text-align: center; color: var(--muted); padding: 20px 8px; font-size: .89rem; margin: 0; }

/* ---------- Les lignes d'une facture libre ---------- */
/* `.table` pose des zébrures et un survol bleu : sur un tableau de SAISIE, la
   ligne survolée se colorait comme une ligne de données. */
.fx-lignes { margin-bottom: 10px; }
.fx-lignes tbody tr,
.fx-lignes tbody tr:hover,
.fx-lignes tbody tr:nth-child(even) { background: transparent; }
.fx-lignes td { padding: 3px 6px 3px 0; vertical-align: top; }
.fx-lignes th { padding: 0 6px 6px 0; }
.fx-lignes .form-control { padding: 7px 10px; font-size: .89rem; }
.fx-lignes .liste-n { text-align: right; }
.fx-oter { border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: 7px; line-height: 0; }
.fx-oter:hover { color: var(--danger); background: var(--danger-050); }

/* ---------- Le destinataire repris du dossier ---------- */
.fx-repris {
  display: flex; gap: 12px; align-items: center; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.fx-repris-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: #0d3c5a; color: #fff; font-size: .8rem; font-weight: 800;
}
.fx-repris-corps { flex: 1; min-width: 0; }
.fx-repris-corps b { display: block; font-size: .94rem; }
.fx-repris-corps .cell-sub { display: block; }
.fx-lien {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .82rem;
  color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; text-align: right;
}
.fx-lien:hover { color: var(--primary); }

/* ---------- L'annuaire : un remplisseur de champs, pas un champ ---------- */
.fx-annuaire-bloc { margin-bottom: 14px; }
.fx-annuaire { max-height: 210px; overflow-y: auto; display: grid; gap: 6px; padding: 3px; }
.fx-tiers {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  transition: border-color var(--t), background var(--t);
}
.fx-tiers:hover { border-color: var(--primary-300); background: var(--primary-050); }
.fx-tiers.est-choisi { border-color: var(--primary-600); background: var(--primary-050); }
.fx-tiers-nom { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: .9rem; }
.fx-tiers-nom .badge { font-size: .66rem; }
.fx-tiers .cell-sub { display: block; }

.fx-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.fx-exige { font-size: .72rem; font-weight: 700; color: var(--danger); }

/* ---------- Le côté : le document, le contrôle, l'action ---------- */
/* La barre supérieure de l'admin est elle-même collante sur 74 px : coller à
   18 px faisait passer le bandeau « FACTURE » DESSOUS. Et sans plafond de
   hauteur, une colonne plus haute que la fenêtre rendait le bouton d'envoi
   — tout en bas — définitivement inatteignable. */
.fx-cote {
  position: sticky;
  top: calc(var(--header-h, 74px) + 14px);
  max-height: calc(100vh - var(--header-h, 74px) - 28px);
  overflow-y: auto;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 3px;
  margin: -3px;
}
@media (max-width: 1200px) { .fx-cote { position: static; max-height: none; overflow: visible; } }

.fx-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.fx-doc-bande {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #0d3c5a; color: #fff; padding: 13px 18px;
}
.fx-doc-bande b { font-size: .95rem; letter-spacing: 2px; }
.fx-doc-num { font-size: .82rem; opacity: .9; }
.fx-doc-vide {
  display: grid; justify-items: center; gap: 10px; padding: 42px 22px;
  color: var(--muted); font-size: .88rem; text-align: center;
}
.fx-doc-vide svg { opacity: .35; }
.fx-doc-corps { padding: 16px 18px; }
.fx-doc-parties {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.fx-doc-parties h4 {
  font-size: .67rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 0 0 4px; font-weight: 800;
}
.fx-doc-parties p { margin: 0; font-size: .83rem; line-height: 1.45; word-break: break-word; }
.fx-doc-parties strong { font-size: .9rem; }
.fx-doc-objet {
  font-size: .85rem; margin: 0 0 14px; padding: 9px 12px;
  background: var(--surface-2); border-radius: 8px; color: var(--ink);
}
.fx-doc-tot { width: 100%; border-collapse: collapse; font-size: .87rem; font-variant-numeric: tabular-nums; }
.fx-doc-tot td { padding: 5px 0; }
.fx-doc-tot td:last-child { text-align: right; font-weight: 600; }
.fx-doc-grand td { border-top: 2px solid #0d3c5a; padding-top: 9px; font-size: 1.05rem; font-weight: 800; }
.fx-doc-lettres {
  font-size: .79rem; color: var(--muted); font-style: italic;
  margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--border);
}

/* Une case par condition d'émission : un seul avertissement n'en montrait
   qu'une, et l'on corrigeait le matricule pour découvrir ensuite l'adresse. */
.fx-avant-titre {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 800; margin: 0 0 10px;
}
.fx-controle { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.fx-controle li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; color: var(--ink); }
.fx-controle li svg { flex: none; margin-top: 2px; }
.fx-controle li.est-ok svg { color: var(--success); }
.fx-controle li.est-att svg { color: var(--warning); }
.fx-controle li.est-ko svg { color: var(--danger); }
.fx-controle li.est-ko span { font-weight: 600; color: var(--danger); }

.fx-apres { font-size: .78rem; color: var(--muted); text-align: center; margin: 9px 0 0; }

/* ---------- Étape 2 : la confirmation ---------- */
/* Ces trois règles servent AUSSI l'écran de confirmation : elles étaient
   rangées avec l'écran de création, et sa réécriture les a emportées. */
.fc-ventilation { margin-top: 14px; font-size: .9rem; }
.fc-ventilation td { padding: 7px 0; border-bottom: 1px solid var(--border); }
.fc-ventilation .fc-total td { font-weight: 800; font-size: 1.02rem; border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 10px; }
.fc-alerte {
  margin: 14px 0 0; padding: 10px 13px; border-radius: 10px; font-size: .86rem;
  background: var(--warning-050); color: var(--warning); border-left: 3px solid currentColor;
}

.fc-jalons { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 18px; flex-wrap: wrap; }
.fc-jalons li {
  display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 650; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 15px 6px 6px;
}
.fc-jalons li span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
  background: var(--border); color: var(--muted); font-size: .75rem; font-weight: 800;
}
.fc-jalons li.est-fait { color: var(--success); border-color: var(--success-050); }
.fc-jalons li.est-fait span { background: var(--success); color: #fff; }
.fc-jalons li.est-ici { color: var(--primary-600); border-color: var(--primary-600); }
.fc-jalons li.est-ici span { background: var(--primary-600); color: #fff; }

.fc-confirme { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .fc-confirme { grid-template-columns: 1fr; } }

/* Le document, présenté comme un document : c'est ce qu'on va produire. */
.fc-doc { overflow: hidden; }
.fc-doc-bandeau {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--primary-700, #0d3c5a); color: #fff; padding: 20px 22px;
}
.fc-doc-titre { font-size: 1.5rem; font-weight: 800; letter-spacing: 2px; }
.fc-doc-num { margin-top: 5px; font-size: .95rem; }
.fc-doc-date { font-size: .8rem; opacity: .78; }
.fc-doc-emetteur { font-size: .8rem; line-height: 1.7; opacity: .85; text-align: right; }
.fc-doc-emetteur b { opacity: 1; }
.fc-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 620px) { .fc-doc-parties { grid-template-columns: 1fr; } }
.fc-doc-nom { font-weight: 700; font-size: 1.02rem; }
.liste-puce-lbl { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.fc-doc-lignes { font-size: .9rem; }
.fc-doc-lignes th { padding-bottom: 8px; }
.fc-doc-lignes td { padding: 9px 0; border-bottom: 1px solid var(--border); }
.fc-doc-totaux { margin-top: 4px; max-width: 340px; margin-left: auto; }
.fc-doc-lettres { font-style: italic; font-size: .9rem; color: var(--ink); margin: 16px 0 0; }

.fc-decision { position: sticky; top: 18px; }
.fc-consequences { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fc-consequences li { position: relative; padding-left: 22px; font-size: .9rem; color: var(--muted); }
.fc-consequences li::before {
  content: ""; position: absolute; left: 5px; top: .55em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--primary-600);
}
.fc-consequences b { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   EN-TÊTE DE PAGE — squelette commun à /formations, /calendrier et /contact
   Voir resources/views/components/page-hero.blade.php. Les trois pages
   partagent ces classes : une retouche ici les corrige toutes les trois.
   ========================================================================== */
/* .hero impose 90px ; une page intérieure n'est pas la page d'accueil. */
.page-hero { padding: 62px 0; }
.page-hero .breadcrumb { margin-bottom: 1rem; }
/* Une page peut poser un objet à droite (Contact : son formulaire). */
.ph-split { display: grid; grid-template-columns: 1fr 1.02fr; gap: 44px; align-items: start; }
@media (max-width: 980px) { .ph-split { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.ph-corps { min-width: 0; }
.ph-aside { min-width: 0; }
.page-hero h1 { margin-bottom: .65rem; }
.ph-lead { margin-bottom: 0; }
.ph-action { margin-top: 1.5rem; }

.ph-faits {
  display: flex; flex-wrap: wrap; gap: 14px 38px;
  margin-top: 1.9rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(13, 150, 210, .16);
}
.ph-fait { display: flex; flex-direction: column; }
.ph-fait strong {
  font-family: var(--font-title); font-size: 1.55rem; font-weight: 700;
  color: var(--primary-600); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ph-fait span { font-size: .82rem; color: var(--muted); margin-top: .15rem; }

/* ---- Recherche en ligne (catalogue) : elle était enterrée dans les filtres */
.ph-search {
  display: flex; align-items: center; gap: .6rem; max-width: 620px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: .42rem .42rem .42rem 1.15rem;
  box-shadow: var(--shadow-md);
}
.ph-search:focus-within { border-color: var(--primary-300); box-shadow: var(--shadow-lg); }
.ph-search .ic { color: var(--primary); display: flex; flex: none; }
.ph-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: .98rem; color: var(--text); appearance: none;
}
.ph-search input::placeholder { color: var(--muted); }
.ph-search input::-webkit-search-cancel-button { appearance: none; }

.ph-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
/* Sous 980 px le catalogue sort SA barre de catégories collante (.mf-chips) :
   afficher les deux donnerait deux rangées de pastilles identiques. Même
   point de bascule que .mf-bar, pour qu'aucune largeur n'en soit privée. */
@media (max-width: 980px) { .page-hero .ph-chips { display: none; } }
.ph-chip {
  font-size: .84rem; font-weight: 500; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: .4rem .9rem;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.ph-chip:hover { border-color: var(--primary-300); color: var(--primary-600); }
.ph-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* ---- Prochaine session (calendrier) : « c'est quand ? » répondu d'entrée */
.ph-next {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 700px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--primary); border-radius: var(--r-lg);
  padding: .85rem 1.1rem; box-shadow: var(--shadow-sm);
}
.ph-next-k {
  font-family: var(--font-title); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary-600);
}
.ph-next-v { font-size: .98rem; font-weight: 500; color: var(--text); }
.ph-next-v em { font-style: normal; font-weight: 400; color: var(--muted); }
.ph-next .btn { margin-left: auto; }

/* ---- Navigation de mois remontée dans l'en-tête */
.ph-monthbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.ph-month-hint { font-size: .85rem; color: var(--muted); }
.ph-month {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: .32rem .45rem; box-shadow: var(--shadow-sm);
}
.ph-month b { font-family: var(--font-title); font-size: .97rem; font-weight: 600; min-width: 132px; text-align: center; }
.ph-month a {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--primary-050); color: var(--primary-600);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.ph-month a:hover { background: var(--primary); color: #fff; }

/* ---- Contact : un canal prioritaire, puis le reste en une ligne */
.ph-canaux { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn-whatsapp { background: #25D366; color: #fff; box-shadow: 0 10px 24px rgba(37, 211, 102, .3); }
.btn-whatsapp:hover { background: #1fb855; color: #fff; }
.ph-inline { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.2rem; font-size: .9rem; color: var(--muted); }
.ph-inline span { display: inline-flex; align-items: center; gap: .4rem; }
.ph-inline a { color: var(--text); font-weight: 600; }
.ph-inline a:hover { color: var(--primary-600); }

.ph-horaires {
  display: flex; flex-direction: column; gap: .3rem; max-width: 400px; margin-top: 1.4rem;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: .9rem 1.1rem;
}
.ph-horaires dt {
  font-family: var(--font-title); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--primary-600); margin-bottom: .2rem;
}
.ph-horaires dd { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-size: .88rem; color: var(--muted); }
.ph-horaires dd b { color: var(--text); font-weight: 600; }
.ph-horaires dd.est-ferme b { color: var(--muted); font-weight: 500; }

/* Une adresse e-mail ou une adresse postale n'a pas d'espace où se couper :
   sans ça, la plus longue des deux pousse la page en largeur. */
.ph-inline { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .page-hero { padding: 40px 0; }
  .ph-faits { gap: 14px 26px; }
  .ph-next .btn { margin-left: 0; }
  .ph-month b { min-width: 108px; }
}

@media (max-width: 560px) {
  /* `.btn` est en `white-space: nowrap` : « WhatsApp — réponse immédiate » en
     taille `lg` mesure ~320 px et ne peut pas se réduire. Sur un écran de
     360 px, container compris, il dépassait et faisait défiler la page en
     largeur. Empilés et pleine largeur, les canaux ne peuvent plus déborder. */
  .ph-canaux { flex-direction: column; align-items: stretch; }
  .ph-canaux .btn { width: 100%; white-space: normal; }

  /* Le bouton de recherche mange la moitié de la barre : on lui rend de la
     place plutôt que de réduire le champ à un timbre-poste. */
  .ph-search { padding-left: .85rem; }
  .ph-search .btn { padding-left: .85rem; padding-right: .85rem; }

  /* Trois nombres sur une ligne de 320 px : un cran plus bas et ils tiennent
     en deux lignes plutôt qu'en trois. */
  .ph-faits { gap: 12px 22px; }
  .ph-fait strong { font-size: 1.35rem; }

  .ph-horaires { max-width: none; }
}

/* Le cachet du centre, dans les Paramètres. */
.pm-cachet { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pm-cachet-vue {
  flex: none; width: 150px; height: 96px; display: grid; place-items: center;
  border: 1px dashed var(--border-fort, #cfdcea); border-radius: 11px;
  background: var(--surface-2); padding: 8px;
}
.pm-cachet-vue img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Un logo est large là où un cachet est carré : même cadre, plus de place. */
.pm-cachet-vue--large { width: 230px; }
.pm-cachet-vide { font-size: .78rem; color: var(--muted); }
.pm-cachet-champs { flex: 1 1 280px; min-width: 0; }
.pm-cachet-retirer { display: flex; align-items: center; gap: 7px; font-size: .85rem; margin: 8px 0; }
.pm-cachet-retirer input { width: 15px; height: 15px; accent-color: var(--danger); }

/* ==========================================================================
   LA BULLE WHATSAPP
   Un lien, rien d'autre : ni WebSocket, ni cookie, ni script. Elle marche donc
   là où le chat maison ne marchait pas, et le visiteur repart avec la
   conversation dans SON téléphone plutôt que dans un onglet qu'il va fermer.
   ========================================================================== */
.wa-bulle {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 13px 20px 13px 16px;
  box-shadow: 0 6px 22px rgba(18, 140, 70, .35);
  font-weight: 650; font-size: .93rem; line-height: 1;
  transition: transform .15s, box-shadow .15s;
}
.wa-bulle:hover, .wa-bulle:focus-visible {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(18, 140, 70, .45);
}
.wa-bulle svg { flex: none; }
@media (max-width: 560px) {
  /* Sur un téléphone, l'icône suffit : le texte volerait la place au contenu. */
  .wa-bulle { right: 16px; bottom: 16px; padding: 14px; }
  .wa-bulle .wa-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-bulle, .wa-bulle:hover { transition: none; transform: none; }
}