/* ==========================================================================
   QORSEC — Pages « Solutions » (site v3)
   Chargé APRÈS /assets/css/site.css par les six pages de /solutions/.
   Ne redéfinit aucun jeton : s'appuie sur les rôles (--fg, --surface, --data…)
   et sur les composants du système de design (STYLEGUIDE.md).
   Charte : l'orange ne sert qu'à la signalisation, jamais sur un bouton.

   SOMMAIRE
     1. Héros solution (méta, carte « En un coup d'œil »)
     2. Cadre marocain (cartes de texte de loi)
     3. Fonctionnalités : réel / prévu
     4. Modes de déploiement
     5. Outils gratuits liés, FAQ, appel à l'action
     6. Aperçus d'interface : compléments (.app-*)
     7. Vue d'ensemble : schéma de la suite, tableau des statuts, légende
     8. Mouvement réduit
   ========================================================================== */

/* ==========================================================================
   1. HÉROS SOLUTION
   ========================================================================== */
.sol-hero .breadcrumb { margin-bottom: clamp(20px, 2.4vw, 32px); }
.sol-hero .hero__grid { align-items: center; }
.sol-hero h1 { font-size: clamp(2.15rem, 1.2rem + 3.4vw, 3.95rem); max-width: 15ch; margin: 18px 0 18px; }
.sol-hero .lead { max-width: 56ch; }
.sol-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sol-code {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px;
  font-family: var(--mono); font-size: .82rem; font-weight: 800; letter-spacing: .04em;
  color: var(--cyan-300); background: rgba(14, 165, 233, .12); border: 1px solid rgba(125, 211, 252, .28);
}
.sol-tagline { font-size: .86rem; font-weight: 700; color: #c9d4ec; }

/* Carte « En un coup d'œil » : faits vérifiés, statut honnête */
.glance {
  position: relative; border-radius: var(--r-xl); padding: clamp(18px, 2vw, 26px);
  background: linear-gradient(180deg, rgba(20, 38, 86, .74), rgba(10, 22, 51, .84));
  border: 1px solid rgba(173, 196, 255, .18);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.glance::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-500), var(--blue-500), transparent); opacity: .8;
}
.glance__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.glance__title { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8fa3c9; }
.glance__list { margin: 0; display: grid; }
.glance__row { display: grid; grid-template-columns: minmax(0, 8.6em) minmax(0, 1fr); gap: 6px 14px; padding: 11px 0; border-bottom: 1px solid rgba(173, 196, 255, .1); }
.glance__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.glance__row dt { font-size: .8rem; font-weight: 700; color: #8fa3c9; padding-top: 2px; }
.glance__row dd { margin: 0; font-size: .92rem; color: #e6ecf8; line-height: 1.5; }
.glance__row dd .mono { font-size: .84rem; color: var(--cyan-300); }
.glance__row dd .no { color: var(--orange-400); font-weight: 700; }
.glance__foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(173, 196, 255, .18); font-size: .8rem; color: #93a4c8; }
@media (max-width: 460px) {
  .glance__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Chiffres-clés dans un héros sombre */
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.hero-stat { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(173, 196, 255, .14); }
.hero-stat b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hero-stat span { display: block; margin-top: 6px; font-size: .8rem; line-height: 1.4; color: #aab7d4; }
@media (max-width: 420px) { .hero-stats { grid-template-columns: minmax(0, 1fr); } .hero-stat { display: grid; grid-template-columns: 3.2em 1fr; align-items: center; gap: 10px; } .hero-stat span { margin: 0; } }

/* ==========================================================================
   2. CADRE MAROCAIN : cartes « texte de loi »
   ========================================================================== */
.law-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.law-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.law-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.section:not(.section--dark) .law-card { box-shadow: var(--sh-1); }
.law-card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--cyan-500), var(--blue-600)); }
.law-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.law-card p { margin: 0; color: var(--fg-muted); font-size: .95rem; line-height: 1.55; }
.law-ref { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 6px; font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--data); background: rgba(14, 165, 233, .08); border: 1px solid rgba(14, 165, 233, .22); }
.law-card__who { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-strong); font-size: .82rem; color: var(--fg-subtle); }
.law-card__who b { color: var(--fg); font-weight: 700; }
.legal-note { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-5) 0 0; font-size: .84rem; color: var(--fg-subtle); max-width: 90ch; }
.legal-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--data); }
@media (max-width: 1024px) { .law-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .law-grid, .law-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   3. FONCTIONNALITÉS : ce qui existe / ce qui est prévu
   ========================================================================== */
.feat-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--s-5); }
.feat-head h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.feat-head p { margin: 0; flex-basis: 100%; color: var(--fg-muted); font-size: .95rem; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.feat {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start;
  padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border);
}
.section:not(.section--dark) .feat { box-shadow: var(--sh-1); }
.feat__icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--blue-600); background: linear-gradient(140deg, rgba(29, 78, 216, .1), rgba(14, 165, 233, .12)); border: 1px solid rgba(29, 78, 216, .14); }
.section--dark .feat__icon { color: var(--cyan-300); background: rgba(14, 165, 233, .1); border-color: rgba(125, 211, 252, .2); }
.feat__icon svg { width: 21px; height: 21px; }
.feat h3, .feat h4 { margin: 1px 0 0; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; color: var(--fg); }
.feat p { margin: 0; color: var(--fg-muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 1024px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }

/* Bloc « Prévu » : pointillés, jamais confondu avec l'existant */
.plan-box { margin-top: var(--s-7); padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-xl); border: 1.5px dashed var(--border-strong); background: var(--surface-2); }
.plan-box .feat-head { margin-bottom: var(--s-4); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.plan-list li { position: relative; padding-left: 24px; color: var(--fg-muted); font-size: .95rem; line-height: 1.5; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed var(--fg-subtle); }
.plan-list li b { color: var(--fg); font-weight: 700; }
@media (max-width: 720px) { .plan-list { grid-template-columns: minmax(0, 1fr); } }

/* Ce que le produit ne fait pas (honnêteté explicite) */
.not-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.not-list li { position: relative; padding-left: 28px; color: var(--fg-muted); font-size: .95rem; line-height: 1.5; }
.not-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: rgba(220, 94, 9, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b84d06' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 10px no-repeat; }
.section--dark .not-list li::before { background-color: rgba(220, 94, 9, .18); }
.not-list li b { color: var(--fg); }

/* Encadré en deux colonnes (texte + panneau) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: stretch; }
.duo__panel { padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.section:not(.section--dark) .duo__panel { box-shadow: var(--sh-1); }
.duo__panel h3 { margin: 0 0 14px; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   4. MODES DE DÉPLOIEMENT
   ========================================================================== */
.deploy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.deploy {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
}
.section:not(.section--dark) .deploy { box-shadow: var(--sh-1); }
.deploy--on { border-color: rgba(29, 78, 216, .32); box-shadow: 0 0 0 1px rgba(29, 78, 216, .1), var(--sh-2); }
.section--dark .deploy--on { border-color: rgba(125, 211, 252, .32); box-shadow: 0 0 0 1px rgba(125, 211, 252, .1); }
.deploy--off { background: transparent; border-style: dashed; }
.deploy__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.deploy__name { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; color: var(--fg); }
.deploy__name svg { width: 22px; height: 22px; color: var(--data); flex: none; }
.deploy__what { margin: 0; color: var(--fg); font-weight: 600; font-size: .98rem; line-height: 1.45; }
.deploy .feature-list li { font-size: .92rem; }
.deploy__note { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--border-strong); font-size: .84rem; color: var(--fg-subtle); }
.deploy__note a { font-weight: 700; }
@media (max-width: 900px) { .deploy-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   5. OUTILS LIÉS, FAQ, APPEL À L'ACTION
   ========================================================================== */
.tools-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.tools-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tool-card .card__top { margin-bottom: 4px; }
.tool-card__flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
@media (max-width: 1024px) { .tools-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tools-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tools-row--4 { grid-template-columns: minmax(0, 1fr); } }

.tool-family { margin-top: var(--s-8); }
.tool-family:first-of-type { margin-top: 0; }
.tool-family__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.tool-family__head h3 { margin: 0; font-size: 1.2rem; }
.tool-family__head p { margin: 0; color: var(--fg-muted); font-size: .95rem; }

.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.faq-layout .section-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.accordion__body p { margin: 0 0 10px; }
.accordion__body ul { margin: 0 0 10px; padding-left: 20px; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } .faq-layout .section-head { position: static; } }

.cta-points { margin-top: var(--s-5); }

/* ==========================================================================
   6. APERÇUS D'INTERFACE : compléments aux composants .app-* de site.css
   ========================================================================== */
.app-window .app-mode { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-300); background: rgba(14, 165, 233, .14); border: 1px solid rgba(125, 211, 252, .28); }
.app-window .app-mode--mock { color: #a9b6d3; background: rgba(169, 182, 211, .08); border-style: dashed; border-color: rgba(169, 182, 211, .35); }

/* Main courante chaînée */
.app-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.app-timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0 8px; border-bottom: 1px solid var(--app-line); font-size: 12px; }
.app-timeline li:last-child { border-bottom: 0; }
.app-timeline time { font-family: var(--mono); font-size: 11px; color: var(--app-muted); padding-top: 1px; }
.app-timeline .t { color: #e6ecf8; font-weight: 600; min-width: 0; }
.app-timeline .s { display: block; color: var(--app-muted); font-size: 11px; font-weight: 500; }
.app-timeline .h { font-family: var(--mono); font-size: 10.5px; color: #7f93bb; white-space: nowrap; padding-top: 1px; }
.app-timeline .h::before { content: "#"; color: #4b5f8c; }
.app-chain { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(74, 222, 128, .06); border: 1px solid rgba(74, 222, 128, .18); font-size: 11.5px; color: #bbf7d0; }
.app-chain svg { width: 14px; height: 14px; flex: none; color: #4ade80; }
.app-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.app-roles li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--app-line); font-size: 12px; }
.app-roles .r { color: #fff; font-weight: 700; }
.app-roles .p { grid-column: 1; color: var(--app-muted); font-size: 11px; }
.app-roles .app-tag { grid-row: 1 / span 2; grid-column: 2; }

/* Étapes de migration (maquette QTS) */
.mig-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: mig; }
.mig-step { position: relative; padding: 10px 10px 10px 12px; border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid var(--app-line); font-size: 11.5px; color: var(--app-muted); }
.mig-step b { display: block; color: #fff; font-size: 12px; margin-bottom: 2px; }
.mig-step b::before { counter-increment: mig; content: counter(mig) ". "; color: var(--cyan-300); }
.mig-step.is-done { border-color: rgba(74, 222, 128, .25); }
.mig-step.is-now { border-color: rgba(125, 211, 252, .45); background: rgba(14, 165, 233, .08); box-shadow: inset 0 2px 0 var(--cyan-500); }
@media (max-width: 760px) { .mig-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Messagerie (maquette QSC) */
.msg-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 470px; }
.msg-list { border-right: 1px solid var(--app-line); background: rgba(3, 9, 26, .35); padding: 12px 8px; display: grid; align-content: start; gap: 2px; }
.msg-search { margin: 0 4px 10px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--app-line); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--app-muted); font-size: 11.5px; }
.msg-search svg { width: 13px; height: 13px; }
.msg-conv { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px; border-radius: 9px; }
.msg-conv.is-on { background: rgba(29, 78, 216, .26); box-shadow: inset 2px 0 0 var(--cyan-500); }
.msg-avatar { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--blue-600), var(--cyan-500)); }
.msg-avatar--b { background: linear-gradient(140deg, #4c1d95, var(--blue-600)); }
.msg-avatar--c { background: linear-gradient(140deg, var(--navy-600), #0f766e); }
.msg-avatar--g { background: linear-gradient(140deg, #334155, var(--navy-600)); }
.msg-conv .n { color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv .x { grid-column: 2; color: var(--app-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv time { grid-row: 1; grid-column: 3; font-size: 10.5px; color: var(--app-muted); }
.msg-conv .msg-badge { grid-row: 2; grid-column: 3; justify-self: end; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--blue-600); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.msg-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; }
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--app-line); flex-wrap: wrap; }
.msg-head .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msg-head .who b { display: block; color: #fff; font-size: 13.5px; }
.msg-head .who > div > span { display: block; color: var(--app-muted); font-size: 11px; }
.msg-head .msg-avatar { grid-row: auto; flex: none; }
.msg-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.msg-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #dfe6f5; background: rgba(255, 255, 255, .05); border: 1px solid var(--app-line); white-space: nowrap; }
.msg-pill svg { width: 13px; height: 13px; flex: none; }
.msg-pill--call small { color: var(--app-muted); font-weight: 600; }
.msg-e2e { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 16px 0; padding: 6px 10px; border-radius: 8px; font-size: 11px; color: #bae6fd; background: rgba(14, 165, 233, .08); border: 1px solid rgba(125, 211, 252, .2); text-align: center; }
.msg-e2e svg { width: 13px; height: 13px; flex: none; color: var(--cyan-300); }
.msg-thread { display: grid; align-content: start; gap: 10px; padding: 14px 16px; }
.msg-day { justify-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.msg-bubble { max-width: 74%; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: rgba(255, 255, 255, .06); border: 1px solid var(--app-line); color: #e6ecf8; font-size: 12.5px; line-height: 1.45; }
.msg-bubble small { display: block; margin-top: 3px; font-size: 10px; color: var(--app-muted); text-align: right; }
.msg-bubble--me { justify-self: end; border-radius: 12px 12px 4px 12px; background: rgba(29, 78, 216, .42); border-color: rgba(96, 165, 250, .3); }
.msg-file { display: flex; align-items: center; gap: 10px; }
.msg-file svg { width: 26px; height: 26px; flex: none; color: var(--cyan-300); }
.msg-file b { display: block; font-size: 12px; color: #fff; }
.msg-file span { font-size: 10.5px; color: var(--app-muted); }
.msg-compose { display: flex; align-items: center; gap: 8px; margin: 0 16px 14px; padding: 6px 6px 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--app-line); color: var(--app-muted); font-size: 12px; }
.msg-compose > svg { width: 16px; height: 16px; flex: none; }
.msg-compose .app-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none; }
.msg-compose .app-btn svg { width: 14px; height: 14px; }
.msg-compose span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-verify { margin: 0 16px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--app-muted); }
.msg-verify code { font-family: var(--mono); font-size: 10.5px; color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid var(--app-line); padding: 2px 6px; border-radius: 5px; }
@media (max-width: 1024px) { .msg-body { grid-template-columns: minmax(0, 1fr); } .msg-list { display: none; } }
@media (max-width: 760px) { .msg-body { min-height: 0; } .msg-bubble { max-width: 88%; } .msg-actions .msg-pill--hide-sm { display: none; } }

/* Journal chaîné (vue d'ensemble) */
.app-ledger { display: grid; gap: 6px; }
.app-ledger__row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--app-line); font-size: 12px; position: relative; }
.app-ledger__row + .app-ledger__row::before { content: ""; position: absolute; left: 34px; top: -7px; width: 2px; height: 8px; background: rgba(125, 211, 252, .35); }
.app-ledger__row time { font-family: var(--mono); font-size: 11px; color: var(--app-muted); }
.app-ledger__row .t { color: #e6ecf8; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-ledger__row .h { font-family: var(--mono); font-size: 10.5px; color: var(--cyan-300); white-space: nowrap; }
@media (max-width: 420px) { .app-ledger__row { grid-template-columns: minmax(0, 1fr) auto; } .app-ledger__row time { display: none; } .app-ledger__row + .app-ledger__row::before { left: 20px; } }

/* Petite échelle de maturité (aperçu DNSSI) */
.app-scale { display: flex; flex-wrap: wrap; gap: 4px; }
.app-scale span { padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; color: #c8d3ea; background: rgba(255, 255, 255, .05); border: 1px solid var(--app-line); }
.app-scale span.k { color: #fff; border-color: rgba(125, 211, 252, .4); background: rgba(14, 165, 233, .12); }

/* ==========================================================================
   7. VUE D'ENSEMBLE : schéma de la suite, tableau des statuts, légende
   ========================================================================== */
.suite-map { position: relative; margin-inline: auto; max-width: 1180px; }
.suite-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.suite-map .suite-map__v { display: none; }
@media (max-width: 760px) {
  .suite-map .suite-map__h { display: none; }
  .suite-map .suite-map__v { display: block; max-width: 420px; margin-inline: auto; }
}
.suite-map a { cursor: pointer; }
.suite-map a:focus { outline: none; }
.suite-map a:focus-visible .sm-node__box { stroke: #fff; stroke-width: 2.5; }
.suite-map a:hover .sm-node__box { stroke: rgba(125, 211, 252, .75); }
.sm-node__box { fill: rgba(14, 27, 59, .92); stroke: rgba(173, 196, 255, .22); stroke-width: 1.2; transition: stroke .2s; }
.sm-node--roadmap .sm-node__box { fill: rgba(10, 22, 51, .6); stroke-dasharray: 6 5; stroke: rgba(169, 182, 211, .45); }
.sm-code { font-family: var(--mono); font-size: 13px; font-weight: 800; letter-spacing: .04em; fill: var(--cyan-300); }
.sm-name { font-family: var(--font); font-size: 17px; font-weight: 800; fill: #fff; letter-spacing: -.01em; }
.sm-desc { font-family: var(--font); font-size: 12.5px; font-weight: 500; fill: #aab7d4; }
.sm-pill rect { stroke-width: 1; }
.sm-pill text { font-family: var(--font); font-size: 11.5px; font-weight: 800; }
.sm-pill--early rect { fill: rgba(14, 165, 233, .14); stroke: rgba(125, 211, 252, .4); } .sm-pill--early text { fill: var(--cyan-300); }
.sm-pill--beta rect { fill: rgba(59, 130, 246, .16); stroke: rgba(147, 197, 253, .4); } .sm-pill--beta text { fill: #93c5fd; }
.sm-pill--dev rect { fill: rgba(220, 94, 9, .16); stroke: rgba(251, 146, 60, .42); } .sm-pill--dev text { fill: var(--orange-400); }
.sm-pill--roadmap rect { fill: transparent; stroke: rgba(169, 182, 211, .5); stroke-dasharray: 4 3; } .sm-pill--roadmap text { fill: #a9b6d3; }
.sm-link { fill: none; stroke: rgba(125, 211, 252, .28); stroke-width: 1.6; }
.sm-link--roadmap { stroke: rgba(169, 182, 211, .32); stroke-dasharray: 5 6; }
.sm-flow { fill: none; stroke: var(--cyan-300); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 26; opacity: .85; animation: sm-flow 2.6s linear infinite; }
@keyframes sm-flow { to { stroke-dashoffset: -56; } }
.sm-hub__ring { fill: none; stroke: rgba(125, 211, 252, .22); stroke-width: 1.2; }
.sm-hub__ring--pulse { transform-origin: center; transform-box: fill-box; animation: sm-pulse 4.5s var(--ease) infinite; }
@keyframes sm-pulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.sm-hub__core { fill: url(#smHubGrad); stroke: rgba(125, 211, 252, .45); stroke-width: 1.4; }
.sm-hub__title { font-family: var(--font); font-size: 19px; font-weight: 800; fill: #fff; letter-spacing: -.01em; }
.sm-hub__sub { font-family: var(--font); font-size: 12px; font-weight: 600; fill: #b9c6e2; }
.sm-hub__sig { font-family: var(--font); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; fill: var(--cyan-300); }
.suite-map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: var(--s-5); font-size: .86rem; color: var(--fg-muted); }
.suite-map__legend span { display: inline-flex; align-items: center; gap: 8px; }
/* Légende : petits blocs (plein = existe, pointillés = prévu), comme les blocs du schéma. */
.suite-map__legend i { display: inline-block; width: 22px; height: 14px; border: 1.5px solid rgba(173, 196, 255, .55); border-radius: 4px; background: rgba(14, 27, 59, .92); }
.suite-map__legend i.d { border-style: dashed; border-color: rgba(169, 182, 211, .6); background: transparent; }

/* Tableau des statuts */
.status-table { min-width: 880px; }
.status-table th:first-child, .status-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
.status-table th:first-child { background: var(--surface-2); }
.status-table td { font-size: .9rem; color: var(--fg-muted); }
.status-table tbody th { min-width: 200px; text-transform: none; letter-spacing: 0; white-space: normal; font-size: .95rem; font-weight: 400; color: var(--fg); background: var(--surface); }
.status-table tbody th b { display: block; font-weight: 700; }
.status-table tbody th small { display: block; font-family: var(--mono); font-size: .74rem; color: var(--data); font-weight: 700; margin-bottom: 2px; }
.status-table .status { white-space: nowrap; }
.status-table tr.is-sub td, .status-table tr.is-sub th { background: var(--paper-50); }
.status-table tr.is-sub th { padding-left: 28px; }
.status-table .dash { color: var(--fg-subtle); }
.table-hint { display: none; margin: 10px 0 0; font-size: .8rem; color: var(--fg-subtle); }
@media (max-width: 900px) { .table-hint { display: block; } }

/* Légende des statuts (définitions exactes) */
.status-defs { display: grid; gap: 12px; }
.status-def { display: grid; grid-template-columns: 9.6em minmax(0, 1fr); gap: 6px 14px; align-items: start; }
.status-def p { margin: 0; color: #c9d4ec; font-size: .9rem; line-height: 1.5; }
@media (max-width: 460px) { .status-def { grid-template-columns: minmax(0, 1fr); } }

/* Cartes solution de la vue d'ensemble */
.sol-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.sol-cards > .card { grid-column: span 2; }
.sol-cards > .card--wide { grid-column: span 3; }
.sol-cards .card__foot { justify-content: space-between; }
@media (max-width: 1024px) { .sol-cards > .card, .sol-cards > .card--wide { grid-column: span 3; } }
@media (max-width: 680px) { .sol-cards { grid-template-columns: minmax(0, 1fr); } .sol-cards > .card, .sol-cards > .card--wide { grid-column: auto; } }

/* Correspondance texte → aide Qorsec */
.map-table td:nth-child(3) a { font-weight: 700; }
.map-table { min-width: 720px; }

/* Petits écrans : les deux tableaux deviennent des fiches empilées (aucun défilement latéral,
   aucun texte coupé). Les libellés des colonnes d'offres sont fournis en FR / EN par le CSS. */
@media (max-width: 640px) {
  .table-wrap:has(.status-table) + .table-hint,
  .table-wrap:has(.map-table) + .table-hint { display: none; }
  .status-table, .map-table { min-width: 0; display: flex; flex-direction: column; }
  .status-table thead, .map-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .status-table tbody, .map-table tbody, .map-table tr, .map-table td { display: block; }
  .status-table caption { order: 2; display: block; border-top: 1px solid var(--border); }

  .map-table tr { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .map-table tr:last-child { border-bottom: 0; }
  .map-table td { padding: 0; border: 0; }
  .map-table td:first-child, .map-table td.sol-nw { white-space: normal; font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--data); margin-bottom: 4px; }
  .map-table td:nth-child(3) { margin-top: 8px; }
  .map-table tbody tr:hover td { background: none; }

  .status-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .status-table tbody tr:last-child { border-bottom: 0; }
  .status-table th, .status-table td { display: block; padding: 0; border: 0; position: static; box-shadow: none; background: none; }
  .status-table tbody th, .status-table tbody th:first-child, .status-table tr.is-sub th { min-width: 0; padding: 0; background: none; box-shadow: none; position: static; }
  .status-table tr.is-sub { background: var(--paper-50); }
  .status-table tr.is-sub td, .status-table tr.is-sub th { background: none; }
  .status-table td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: start; }
  .status-table td:nth-child(n+3) { grid-column: 1 / -1; }
  .status-table td:nth-child(3) { margin: 4px 0 6px; color: var(--fg); }
  .status-table td:nth-child(n+4) { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; font-size: .86rem; }
  .status-table td:nth-child(n+4)::before { font-weight: 700; color: var(--fg); }
  .status-table td:nth-child(4)::before { content: "Gratuit"; }
  .status-table td:nth-child(5)::before { content: "Cloud Maroc"; }
  .status-table td:nth-child(6)::before { content: "On-premise"; }
  html[lang="en"] .status-table td:nth-child(4)::before { content: "Free"; }
  html[lang="en"] .status-table td:nth-child(5)::before { content: "Morocco cloud"; }
  .status-table td.dash { display: none; }
  .status-table tbody tr:hover td { background: none; }
}

/* ==========================================================================
   8. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sm-flow { animation: none !important; stroke-dasharray: none; opacity: .35; }
  .sm-hub__ring--pulse { animation: none !important; opacity: 0; }
}

/* Mini-liste d'outils dans la carte du héros (page SOC) */
.mini-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.mini-tools li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(173, 196, 255, .1); transition: border-color var(--t), background var(--t); }
.mini-tools li:hover, .mini-tools li:focus-within { border-color: rgba(125, 211, 252, .4); background: rgba(14, 165, 233, .06); }
.mini-tools a { display: inline-flex; align-items: center; gap: 10px; color: #e6ecf8; font-weight: 700; text-decoration: none; min-width: 0; }
.mini-tools a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mini-tools__ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: var(--cyan-300); background: rgba(14, 165, 233, .12); }
.mini-tools__ico svg { width: 16px; height: 16px; }

/* Référence de texte à ne pas couper (tableau du cadre marocain) */
@media (min-width: 761px) { .sol-nw { white-space: nowrap; } }

/* Note de statut du héros sur plusieurs lignes (mobile) : la pastille reste sur la 1re ligne */
.hero__note { align-items: flex-start; }
.hero__note::before { margin-top: calc(.75em - 3.5px); }

/* Héros : un bouton long passe à la ligne au lieu de dépasser de l'écran (390 px) */
@media (max-width: 480px) { .hero .btn { white-space: normal; text-align: center; } }

/* Vue d'ensemble : la carte de la suite (sombre, plus profonde) se détache du héros sombre qui la précède */
.hero + .section--deep { border-top: 1px solid rgba(173, 196, 255, .1); }