/* ════════════════════════════════════════════════════════════════════
   UNIVERS THEME — transposition de la charte lead-adns (gnetresa)
   ════════════════════════════════════════════════════════════════════

   PRINCIPE (hérité de gnetresa/lead-adns-theme.css) :
   surcharger les variables CSS de Bootstrap 5 (--bs-*) et exposer les
   tokens --adns-* ; aucune valeur en dur dans les templates.

   SOURCE : gnetresa/WebServerResources/backoffice/css/lead-adns-theme.css
   CDC    : docs/CDC_UNIVERS_ESPACE_CRM_CONSULTATION.md §5
   Toute évolution est consignée dans docs/DECISIONS_FRONT.md.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');


/* ─────────────────────────────────────────────────────────────────────
   1. SURCHARGES BOOTSTRAP 5 (--bs-*) — palette lead-adns
   ───────────────────────────────────────────────────────────────────── */
:root {

  /* Couleurs sémantiques */
  --bs-primary:        #0055cc;
  --bs-primary-rgb:    0, 85, 204;
  --bs-secondary:      #6b8caa;
  --bs-secondary-rgb:  107, 140, 170;
  --bs-success:        #1a8c4e;
  --bs-success-rgb:    26, 140, 78;
  --bs-info:           #6b3fa0;
  --bs-info-rgb:       107, 63, 160;
  --bs-warning:        #b45a00;
  --bs-warning-rgb:    180, 90, 0;
  --bs-danger:         #c41e3a;
  --bs-danger-rgb:     196, 30, 58;
  --bs-light:          #f0f4f8;
  --bs-light-rgb:      240, 244, 248;
  --bs-dark:           #0f2744;
  --bs-dark-rgb:       15, 39, 68;

  /* Body */
  --bs-body-bg:        #f0f4f8;
  --bs-body-color:     #0f2744;
  --bs-body-color-rgb: 15, 39, 68;

  /* Bordures & rayons */
  --bs-border-color:        #dce6f0;
  --bs-border-color-translucent: rgba(15, 39, 68, .08);
  --bs-border-radius:       10px;
  --bs-border-radius-sm:    6px;
  --bs-border-radius-lg:    14px;
  --bs-border-radius-xl:    18px;

  /* Liens */
  --bs-link-color:        #0055cc;
  --bs-link-color-rgb:    0, 85, 204;
  --bs-link-hover-color:  #003d99;

  /* Typographie */
  --bs-body-font-family:  'DM Sans', system-ui, -apple-system, sans-serif;
  --bs-body-font-size:    .875rem;
  --bs-body-line-height:  1.6;
  --bs-font-monospace:    'DM Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --bs-heading-color: #0f2744;
}


/* ─────────────────────────────────────────────────────────────────────
   2. TOKENS ADNS (repris de la surcouche gnetresa)
   ───────────────────────────────────────────────────────────────────── */
:root {

  --adns-text-strong:         #0f2744;
  --adns-text-muted:          #6b8caa;
  --adns-accent-soft-bg:      #ddeeff;
  --adns-accent-soft-success: #e6f7ee;
  --adns-accent-soft-info:    #f0e8ff;
  --adns-accent-soft-warning: #fff3e0;
  --adns-font-numeric:        'DM Mono', SFMono-Regular, monospace;

  /* Layout (charte ux-system §3). Plafond contenu 1880px (audit espace
     14/07) : calibré pour que le repli du rail (260→92px, D-F10) rende
     100 % de l'espace au contenu jusqu'à ~1970px de viewport — 1560
     datait du rail fixe et confisquait le bénéfice du repli en marges
     de centrage. Au-delà (4K), le plafond évite les lignes sans fin. */
  --univers-header-height:   56px;
  /* Largeur du rail : portée par le thème Front depuis D-F10
     (16.25rem déplié / 5.75rem replié) — pas de token ici. */
  --univers-content-max:     1880px;
  /* Gouttière du contenu : 24px collaient le premier caractère au rail sombre
     du menu (le contenu n'a pas de bordure gauche pour l'en séparer). */
  --univers-gutter:          40px;
  --univers-header-bg:       #0f2744;
  --univers-sidebar-bg:      #16345a;
}


/* ─────────────────────────────────────────────────────────────────────
   3. WIRING BODY / CARDS / BADGES (repris de lead-adns-theme.css)
   ───────────────────────────────────────────────────────────────────── */
body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
}

.card {
  --bs-card-border-color:  var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-cap-bg:        transparent;
  --bs-card-cap-padding-y: .85rem;
  --bs-card-cap-padding-x: 1.1rem;
  --bs-card-spacer-y:      1.1rem;
  --bs-card-spacer-x:      1.1rem;
  background: #ffffff;
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

.card-header {
  background: transparent;
  border-bottom-color: var(--bs-border-color);
  display: flex;
  align-items: center;
  gap: .6rem;
}

.card-header-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--adns-text-muted);
  text-transform: uppercase;
  letter-spacing: .2px;
  margin: 0;
  flex: 1;
}

/* Socle Front Dashboard (D-F9) : le thème compile ses couleurs de boutons
   en dur (#377dff) — on ramène le primaire sur la palette charte via les
   tokens --bs-btn-*. Les variantes soft/ghost restent aux teintes Front
   tant que la charte ne les redéfinit pas. */
.btn-primary {
  --bs-btn-bg:            var(--bs-primary);
  --bs-btn-border-color:  var(--bs-primary);
  --bs-btn-hover-bg:      #003d99;
  --bs-btn-hover-border-color: #003d99;
  --bs-btn-active-bg:     #003d99;
  --bs-btn-active-border-color: #003d99;
  --bs-btn-disabled-bg:   var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.badge {
  border-radius: var(--bs-border-radius-pill);
}


/* ─────────────────────────────────────────────────────────────────────
   4. UTILITAIRES CHARTE (repris tels quels de lead-adns-theme.css)
   ───────────────────────────────────────────────────────────────────── */

/* Pastille d'icône colorée dans card-header */
.card-header-icon {
  width: 24px; height: 24px;
  border-radius: var(--bs-border-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.icon-blue   { background: var(--adns-accent-soft-bg);      color: var(--bs-primary); }
.icon-green  { background: var(--adns-accent-soft-success); color: var(--bs-success); }
.icon-orange { background: var(--adns-accent-soft-warning); color: var(--bs-warning); }
.icon-purple { background: var(--adns-accent-soft-info);    color: var(--bs-info); }
.icon-muted  { background: var(--bs-body-bg); color: var(--adns-text-muted); border: 1px solid var(--bs-border-color); }

/* Badges pill colorés */
.bl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--bs-border-radius-pill);
  font-size: 12px; font-weight: 500;
  border: 1px solid; white-space: nowrap; line-height: 1.4;
  text-decoration: none;
}
.bl-badge-score  { background: var(--adns-accent-soft-bg);      border-color: var(--bs-primary); color: var(--bs-primary); }
.bl-badge-green  { background: var(--adns-accent-soft-success); border-color: var(--bs-success); color: var(--bs-success); }
.bl-badge-purple { background: var(--adns-accent-soft-info);    border-color: var(--bs-info);    color: var(--bs-info); }
.bl-badge-muted  { background: var(--bs-body-bg);               border-color: var(--bs-border-color); color: var(--adns-text-muted); }
.bl-badge-blue   { background: var(--adns-accent-soft-bg);      border-color: var(--bs-primary); color: var(--bs-primary); }
.bl-badge-orange { background: var(--adns-accent-soft-warning); border-color: var(--bs-warning); color: var(--bs-warning); }
.bl-badge:hover  { text-decoration: none; }

/* Chips Qualifications (onglet Tags, vivier 4D) */
.qualif-chip        { cursor: default; }
.qualif-chip-mesure { background: var(--adns-accent-soft-info); border-color: var(--bs-info); color: var(--bs-info); }
.qualif-chip-val    {
  font-weight: 600;
  padding: 0 6px;
  border-radius: var(--bs-border-radius-pill);
  background: rgba(0, 0, 0, .06);
}

/* Champs en lecture (spec AdnsFieldFront mode display — COMPOSANTS.md §8) */
.adns-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.adns-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--adns-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.adns-field-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--adns-text-strong);
  line-height: 1.5;
}

/* Tuile KPI (pattern AdnsKpiTile) */
.kpi-tile-value {
  font-family: var(--adns-font-numeric);
  font-size: 2rem;
  font-weight: 700;
  color: var(--adns-text-strong);
  line-height: 1.1;
}
.kpi-tile-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--adns-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kpi-tile-meta {
  font-size: 11px;
  color: var(--adns-text-muted);
}


/* ─────────────────────────────────────────────────────────────────────
   5. LAYOUT E0 — header / sidebar / breadcrumb / contenu (charte §3)
   ───────────────────────────────────────────────────────────────────── */
.univers-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--univers-header-height);
  background: var(--univers-header-bg);
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  z-index: 1030;
}
.univers-header .brand {
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
.univers-header .brand small {
  font-weight: 400;
  color: rgba(255, 255, 255, .65);
}
.univers-header .header-spacer { flex: 1; }
.univers-header .user-zone {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
}

.badge-readonly {
  background: var(--adns-accent-soft-warning);
  color: var(--bs-warning);
  border: 1px solid var(--bs-warning);
  border-radius: var(--bs-border-radius-pill);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Sidebar = navbar-vertical-aside Front (D-F10) : le composant porte la
   structure et les comportements (repli mini-mode, tiroir mobile) ; ici,
   uniquement la charte sombre lead-adns par-dessus. L'aside démarre SOUS
   le header maison (le thème le pose à top:0). */
.navbar-vertical-aside {
  top: var(--univers-header-height);
  background: var(--univers-sidebar-bg);
  border-right: 0;
}
.navbar-vertical-aside .navbar-vertical-content { padding-top: .75rem; }
.navbar-vertical-aside .nav-link {
  color: rgba(255, 255, 255, .75);
  font-size: 13.5px;
}
.navbar-vertical-aside .nav-link .nav-icon { color: inherit; }
.navbar-vertical-aside .nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, .06); }
.navbar-vertical-aside .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, .10);
  font-weight: 600;
}
.navbar-vertical-aside .nav-link.disabled {
  color: rgba(255, 255, 255, .75);
  opacity: .4;
  cursor: not-allowed;
}
.navbar-vertical-aside .dropdown-header,
.navbar-vertical-aside .nav-subtitle-replacer {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
}
.navbar-vertical-aside .navbar-vertical-footer {
  border-top-color: rgba(255, 255, 255, .12);
  padding: .75rem 1.25rem;
}
.navbar-vertical-aside .sidebar-version {
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
}
/* En mini-mode le pied (version longue) n'a plus la place : masqué,
   comme le fait Front avec ses propres footers. */
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .sidebar-version { display: none; }
/* En mini-mode, le plugin remplace chaque titre de section par « … »
   (bi-three-dots) : six lignes de points qui n'informent pas (audit UI
   14/07). Un filet fin sépare aussi bien — l'icône vit dans ::before,
   on la retire et l'élément devient le filet. */
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-subtitle-replacer::before { content: none; }
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-subtitle-replacer {
  height: 0;
  padding: 0;
  margin: .5rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.univers-main {
  /* ATTENTION : le thème Front réserve la place du rail avec
     `.main{padding-left:16.25rem}` — un PADDING, pas une marge, et d'une
     spécificité (0,4,0) qu'aucune règle `.univers-main` ne peut battre.
     Tout padding horizontal posé ici est donc ignoré à gauche : le contenu
     démarrait pile au bord du rail, sans une once de gouttière.
     La gouttière se pose à l'intérieur, sur .univers-content. */
  margin-top: var(--univers-header-height);
  padding: 24px 0;
}
.univers-content {
  max-width: var(--univers-content-max);
  margin: 0 auto;
  /* max() : la gouttière ne descend jamais sous l'encoche (iPhone paysage). */
  padding-left: max(var(--univers-gutter), env(safe-area-inset-left));
  padding-right: max(var(--univers-gutter), env(safe-area-inset-right));
}

.univers-breadcrumb {
  font-size: 12px;
  margin-bottom: 1rem;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--adns-text-strong);
  margin-bottom: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────────────
   6. FEEDBACK DE CHARGEMENT (UX-1, charte §2.3)
   Overlay affiché à toute navigation ; l'animation retarde son
   apparition de 350 ms : invisible sur les pages rapides, rassurant
   sur les recherches planner (2-3 s).
   ───────────────────────────────────────────────────────────────────── */
#univers-loading {
  position: fixed;
  inset: 0;
  background: rgba(240, 244, 248, .55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 25vh;
  z-index: 2000;
}
#univers-loading.actif {
  display: flex;
  opacity: 0;
  animation: univers-loading-in .2s ease .35s forwards;
}
@keyframes univers-loading-in {
  to { opacity: 1; }
}
#univers-loading .box {
  background: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: .9rem 1.4rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 13.5px;
  color: var(--adns-text-muted);
  box-shadow: 0 8px 24px rgba(15, 39, 68, .10);
}

/* Séparateur de période dans les timelines (UX-4) */
.periode-separator td {
  background: var(--bs-body-bg);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--adns-text-muted);
  padding: .35rem 1.1rem;
}

/* Cahier d'appel (F-17) — séparateur journalier façon registre papier */
.cahier-jour-separator td {
  background: var(--bs-body-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-danger);
  padding: .5rem 1.1rem .25rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.cahier-appel-table td {
  vertical-align: top;
  font-size: .8125rem;
}
.cahier-ligne-inconnue td {
  background: var(--adns-accent-soft-warning);
}

/* Page de login chartée (UX-2) */
/* Le login porte le pied du socle public (D-P7) : le body devient une colonne,
   la zone de connexion prend l'espace restant, le footer s'ancre en bas. */
.login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg);
}
.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-body-bg);
  padding: 24px 16px;
}
.login-card {
  width: 100%;
  max-width: 400px;
}
.login-brand {
  font-weight: 700;
  font-size: 20px;
  color: var(--adns-text-strong);
}
.login-brand small {
  font-weight: 400;
  color: var(--adns-text-muted);
}


/* ─────────────────────────────────────────────────────────────────────
   7. RESPONSIVE — MOBILE & TABLETTE (D-F6, 2026-07-12)
   Breakpoint < 992px (lg Bootstrap 5.2, seuil du framework en place ;
   les media queries ne peuvent pas consommer de variable CSS).
   Sidebar en tiroir, cibles tactiles ≥ 44px (loi de Fitts),
   champs 16px (anti-zoom iOS), safe-areas iPhone (encoche).
   ───────────────────────────────────────────────────────────────────── */

/* Bouton menu (hamburger) — VISIBLE À TOUTES LES LARGEURS (D-F12).
   Il porte js-navbar-vertical-aside-toggle-invoker : le plugin Front lui fait
   replier le rail en desktop (mini-mode) et ouvrir le tiroir en mobile. Il
   était masqué au-dessus de 992px, ce qui laissait le repli desktop sans
   aucune commande atteignable (le bouton rond du rail est en opacity:0). */
.sidebar-toggle {
  display: inline-flex;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 22px;
  width: 44px;
  height: 44px;
  border-radius: var(--bs-border-radius-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible { background: rgba(255, 255, 255, .10); }

/* Bouton rond du rail (composant Front) : le thème le laisse en opacity:0 et
   ne le révèle qu'en JS, au survol du rail — un contrôle invisible n'existe
   pas. On lui donne une présence au repos ; il reste secondaire (le hamburger
   du header est la commande principale, D-F12).
   Desktop uniquement : en mobile le rail est hors-champ, et ce bouton flottait
   alors en cercle fantôme sur le bord gauche du contenu. */
@media (min-width: 992px) {
  .navbar-aside-toggler { opacity: .55; }
  .navbar-vertical-aside:hover .navbar-aside-toggler,
  .navbar-aside-toggler:hover,
  .navbar-aside-toggler:focus-visible { opacity: 1; }
}

/* ─── Infobulles (D-F13) ───
   Posées automatiquement par univers-tooltips.js sur tout `title`. Bootstrap les
   habille en noir générique : on les aligne sur le bleu profond de la charte. */
.tooltip-inner {
  background-color: var(--univers-header-bg);
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  max-width: 320px;          /* au-delà, ce n'est plus une infobulle : c'est de la doc */
  padding: 6px 10px;
  border-radius: var(--bs-border-radius-sm);
}
.tooltip .tooltip-arrow::before { border-top-color: var(--univers-header-bg); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--univers-header-bg); }

/* Une icône devenue focusable (nom accessible posé par le module) doit montrer
   son focus : sinon l'utilisateur au clavier ne sait pas où il est. */
[role="img"]:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Déconnexion : texte au-dessus du breakpoint, icône seule en dessous */
.univers-header .logout-icon { display: none; }

@media (max-width: 991.98px) {
  /* .sidebar-toggle est désormais visible partout (D-F12) — plus rien à faire ici. */

  /* Tiroir mobile : géré par le composant Front (D-F10). On garde
     l'aside sous le header (le thème le met à top:0 plein écran). */
  .navbar-vertical-aside { z-index: 1040; }

  /* Cibles tactiles ≥ 44px dans le menu */
  .navbar-vertical-aside .nav-link {
    padding-top: .8rem;
    padding-bottom: .8rem;
    font-size: 15px;
  }

  /* Sur mobile le rail disparaît : la gouttière se resserre, mais elle reste
     posée sur .univers-content (cf. plus haut) — pas sur .univers-main, sinon
     les deux s'additionnent. */
  :root { --univers-gutter: 12px; }

  .univers-main {
    margin-left: 0;
    padding: 16px 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Header compact : le hamburger + la marque + la zone user doivent
     tenir sur 390px. Le badge lecture seule est rappelé à la connexion. */
  .univers-header {
    gap: .6rem;
    padding: 0 .75rem;
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
  .univers-header .badge-readonly { display: none; }
  .univers-header .user-zone > span { display: none; }
  .univers-header .logout-label { display: none; }
  .univers-header .logout-icon { display: inline; }

  /* iOS zoome au focus sur tout champ < 16px : imposer 16px */
  .form-control, .form-select { font-size: 16px; }
}

@media (max-width: 575.98px) {
  .univers-header .brand small { display: none; }
  .page-title { font-size: 18px; }
}


/* ─────────────────────────────────────────────────────────────────────
   V7 — HOME PUBLIQUE (D-V7, 2026-07-11)
   Première interface commerciale (templates/public/home.html).
   Règle D-F1 conservée : variables --bs-* / --adns-* uniquement.
   ───────────────────────────────────────────────────────────────────── */
.v7-body { background: var(--bs-body-bg); }
.v7-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.v7-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 10px 0;
}
.v7-brand { font-weight: 700; font-size: 18px; color: var(--adns-text-strong); }
.v7-brand small { font-weight: 400; color: var(--adns-text-muted); }
.v7-tag {
  font-family: var(--adns-font-numeric);
  font-size: 11px;
  font-weight: 500;
  color: var(--bs-primary);
  background: var(--adns-accent-soft-bg);
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}
.v7-nav-link {
  color: var(--adns-text-strong);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--bs-border-radius-sm);
}
.v7-nav-link:hover { background: var(--adns-accent-soft-bg); color: var(--bs-link-hover-color); }

.v7-hero {
  padding: 88px 0 72px;
  background: linear-gradient(180deg, var(--adns-accent-soft-bg), var(--bs-body-bg) 78%);
}
.v7-hero .v7-wrap, .v7-section .v7-wrap { display: block; }
.v7-eyebrow {
  font-family: var(--adns-font-numeric);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-primary);
  margin-bottom: 14px;
}
.v7-h1 {
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--adns-text-strong);
}
.v7-h2 { font-weight: 700; font-size: 26px; letter-spacing: -.01em; color: var(--adns-text-strong); }
.v7-h3 { font-weight: 600; font-size: 17px; color: var(--adns-text-strong); }
.v7-lede { font-size: 17px; line-height: 1.65; color: var(--bs-body-color); max-width: 640px; margin-top: 16px; }
.v7-p { font-size: 14px; line-height: 1.7; color: var(--bs-body-color); margin-bottom: 0; }
.v7-mono { font-family: var(--adns-font-numeric); }
.v7-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.v7-hero-note { font-size: 12.5px; color: var(--adns-text-muted); margin-top: 14px; }

.v7-section { padding: 56px 0; }
.v7-section-alt { background: #fff; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }
.v7-section-alt .card { border: 1px solid var(--bs-border-color); }

.v7-badge {
  display: inline-block;
  font-family: var(--adns-font-numeric);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 4px 9px;
}
.v7-badge-dispo { background: var(--adns-accent-soft-success); color: var(--bs-success); }
/* « en service chez nous » — 4e état du catalogue (D-V7-4) : livré et en prod, hors démo */
.v7-badge-prod { background: var(--adns-accent-soft-bg); color: var(--bs-primary); }
.v7-badge-dev { background: var(--adns-accent-soft-warning); color: var(--bs-warning); }
.v7-badge-futur { background: var(--adns-accent-soft-info); color: var(--bs-info); }

.v7-fonctions { list-style: none; margin: 14px 0 0; padding: 0; }
.v7-fonctions li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bs-body-color);
  padding: 5px 0;
}
.v7-fonctions li i { color: var(--bs-primary); flex: 0 0 auto; }

.v7-plan-star { border: 2px solid var(--bs-primary); }
.v7-price { font-size: 32px; font-weight: 700; color: var(--adns-text-strong); margin-top: 6px; }
.v7-price small { font-size: 13px; font-weight: 400; color: var(--adns-text-muted); }
.v7-price-alt { font-size: 12.5px; color: var(--adns-text-muted); }

.v7-demo-card { border: 1px solid var(--bs-border-color); }
.v7-demo-access {
  background: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 18px;
}

.v7-footer {
  padding: 28px 0 40px;
  font-size: 13px;
  color: var(--adns-text-muted);
}
.v7-footer a { color: var(--bs-link-color); text-decoration: none; }
.v7-brand-footer { font-weight: 600; color: var(--adns-text-strong); }
.v7-brand-footer small { font-weight: 400; color: var(--adns-text-muted); }

/* ── v7 V1.1 : bandeau de confiance + frise histoire (CDC_LANDING_V7 §4 S2/S5) ── */
.v7-band {
  background: #fff;
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 34px 0;
}
.v7-band-accroche {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bs-body-color);
  max-width: 720px;
  margin: 0 0 22px;
}
.v7-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.v7-stat {
  border-left: 2px solid var(--adns-accent-soft-bg);
  padding-left: 14px;
}
.v7-stat-val {
  font-family: var(--adns-font-numeric);
  font-size: 26px;
  font-weight: 500;
  color: var(--bs-primary);
  line-height: 1.1;
}
.v7-stat-lbl {
  font-size: 12.5px;
  color: var(--adns-text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

.v7-frise {
  list-style: none;
  margin: 28px 0 20px;
  padding: 0;
  max-width: 720px;
}
.v7-frise li {
  display: flex;
  gap: 18px;
  padding: 0 0 22px 0;
  position: relative;
}
.v7-frise li::before {
  content: "";
  position: absolute;
  left: 63px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--adns-accent-soft-bg);
}
.v7-frise li:last-child::before { display: none; }
.v7-frise-annee {
  font-family: var(--adns-font-numeric);
  font-size: 15px;
  font-weight: 500;
  color: var(--bs-primary);
  flex: 0 0 46px;
  text-align: right;
}
.v7-frise li::after {
  content: "";
  position: absolute;
  left: 58px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bs-primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--bs-border-color);
}
.v7-frise-fait {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-body-color);
  padding-left: 26px;
}

/* ─────────────────────────────────────────────────────────────────────
   Tri de colonnes — fragment sort-link (équivalent en-têtes AdnsListe).
   Le caret ne s'allume que sur la colonne active ; l'icône neutre reste
   discrète pour signaler que la colonne est triable sans bruit visuel.
   ───────────────────────────────────────────────────────────────────── */
th .sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
th .sort-link i { font-size: 10px; opacity: .35; }
th .sort-link:hover i { opacity: .7; }
th .sort-link.active i { opacity: 1; color: var(--bs-primary); }