/* ============================================================================
   PRISMIA · assets/offres.css
   Styles communs des VISUELS PRODUIT anonymisés (SPEC-OFFRES.md O4, V1 à V7).
   Préfixe « of- ». Zéro dépendance JS. Chaque visuel vit dans un cadre fenêtre
   (pattern .window de la home, répliqué ici en autonome) et porte la légende
   « Données fictives, illustration du livrable » via .of-caption.
   Style : plateforme de restitution (fond clair, cartes arrondies, accent
   violet) fondu dans la DA du site (crème/blanc, encre, Geist, hairlines).
   Palette data validée (contraste et daltonisme, validateur dataviz) :
   violet #6d28d9 · vert #1f8f5f · ambre #c07f16 (trio OK) ; rouge sévérité
   #b2382c choisi car séparé de l'ambre (le corail du site ne l'est pas).
   Aucune page n'est modifiée par ce fichier : il n'expose que des classes.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TOKENS LOCAUX
   Posés sur les racines de composant (spécificité nulle grâce à :where) avec
   repli sur les variables du site quand la page les définit. Les pages qui
   incluent ce fichier n'ont rien d'autre à déclarer.
   ------------------------------------------------------------------------- */
:where(.of-figure, .of-window, .of-legend, .of-caption){
  /* surfaces et encre (repli sur la DA du site) */
  --of-canvas:var(--canvas,#ffffff);
  --of-canvas-2:var(--canvas-2,#fafafb);
  --of-canvas-3:var(--canvas-3,#f5f6f7);
  --of-canvas-4:var(--canvas-4,#eef0f2);
  --of-hairline:var(--hairline,#e7e9ec);
  --of-hairline-soft:var(--hairline-soft,#f0f1f3);
  --of-ink:var(--ink,#0e1113);
  --of-slate:var(--slate,#33393f);
  --of-steel:var(--steel,#5b636b);
  --of-mist:var(--mist,#646c74);

  /* typo (repli Geist du site) */
  --of-font:var(--font-display,'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif);
  --of-mono:var(--font-mono,'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace);

  /* accent violet plateforme (réservé aux visuels produit, jamais à la prose) */
  --of-violet:#6d28d9;
  --of-violet-bg:#f2edfc;
  --of-violet-ring:#ddd0f6;
  --of-violet-soft:#8b5cf6;

  /* data : sévérité et catégories */
  --of-red:#b2382c;      --of-red-bg:#fbecea;    --of-red-ring:#f0c8c2;
  --of-amber:#c07f16;    --of-amber-bg:#fbf1dd;  --of-amber-ring:#f0dcae;
  --of-green:#1f8f5f;    --of-green-bg:#e7f4ec;  --of-green-ring:#bfe3cd;
  --of-blue:#2f6fb0;     --of-blue-bg:#e9f1f9;   --of-blue-ring:#c6ddf0;
  --of-gray:#5b636b;     --of-gray-bg:#eef0f2;   --of-gray-ring:#dde1e5;

  /* géométrie */
  --of-r-window:var(--r-window,14px);
  --of-r-card:var(--r-card,12px);
  --of-r-chip:var(--r-chip,7px);
  --of-r-pill:var(--r-pill,9999px);
  --of-border:1px solid var(--of-hairline);
  --of-shadow:var(--shadow-window,0 1px 1px rgba(14,17,19,.03),0 6px 16px -6px rgba(14,17,19,.08),0 24px 48px -24px rgba(14,17,19,.10));
  --of-shadow-chip:0 1px 1px rgba(14,17,19,.04);
}

/* ---------------------------------------------------------------------------
   1. FIGURE + CADRE FENÊTRE PRODUIT
   Usage :
   <figure class="of-figure">
     <div class="of-window">
       <div class="of-window__bar">
         <span class="of-window__dots" aria-hidden="true"><i></i><i></i><i></i></span>
         <span class="of-window__url">app.prismia.be/nordmann/cartographie</span>
       </div>
       <div class="of-window__body of-scroll">
         … visuel (of-bpmn, of-bars, of-matrix, …) …
       </div>
     </div>
     <figcaption class="of-caption">
       <span class="lang-fr">Données fictives, illustration du livrable</span>
       <span class="lang-en">Fictional data, deliverable illustration</span>
     </figcaption>
   </figure>
   ------------------------------------------------------------------------- */
.of-figure{margin:0;}
.of-window{background:var(--of-canvas); border:var(--of-border); border-radius:var(--of-r-window);
  box-shadow:var(--of-shadow); overflow:hidden; isolation:isolate;
  font-family:var(--of-font); color:var(--of-ink);}
.of-window__bar{display:flex; align-items:center; gap:16px; height:40px; padding:0 16px;
  background:var(--of-canvas-2); border-bottom:var(--of-border);}
.of-window__dots{display:inline-flex; gap:7px; flex:0 0 auto;}
.of-window__dots i{width:10px; height:10px; border-radius:50%; background:var(--of-canvas-4);
  box-shadow:inset 0 0 0 1px var(--of-hairline);}
.of-window__url{font:400 0.8125rem/1 var(--of-mono); color:var(--of-mist);
  background:var(--of-canvas); border:var(--of-border); border-radius:var(--of-r-pill);
  padding:5px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw;}
.of-window__body{background:var(--of-canvas); padding:clamp(16px,2.5vw,28px);}
.of-window__body--flush{padding:0;}

/* Conteneur de défilement horizontal : à poser sur le body de fenêtre (ou un
   sous-bloc) quand le visuel est large (BPMN, SI, matrice). Sur mobile le
   contenu garde sa largeur minimale et défile DANS le cadre, jamais la page. */
.of-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
.of-scroll > *{min-width:0;}

/* Légende obligatoire sous chaque visuel (O4). Texte FR/EN dans le HTML. */
.of-caption{margin-top:10px; font:400 0.6875rem/1.4 var(--of-mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--of-mist); text-align:left;}

/* ---------------------------------------------------------------------------
   2. STAT TILES (V2 : zones de friction 9 · concernés 12/12 · sévérité 3,6/5
   · zones critiques 4). Grille auto-adaptative, tuiles carte.
   Usage :
   <div class="of-stats">
     <div class="of-stat"><span class="of-stat__label">…</span>
       <span class="of-stat__value">9</span>
       <span class="of-stat__hint">…</span></div> ×4
   </div>
   Modificateur .of-stat--alert : chiffre en rouge sévérité (zones critiques).
   ------------------------------------------------------------------------- */
.of-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px;}
.of-stat{background:var(--of-canvas); border:var(--of-border); border-radius:var(--of-r-card);
  padding:14px 16px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--of-shadow-chip);}
.of-stat__label{font:500 0.6875rem/1.3 var(--of-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--of-steel);}
.of-stat__value{font:600 clamp(1.5rem,1.2rem + 1vw,2rem)/1 var(--of-font);
  letter-spacing:-0.02em; color:var(--of-ink); font-variant-numeric:tabular-nums;}
.of-stat__value small{font-size:.55em; font-weight:500; color:var(--of-mist); letter-spacing:0;}
.of-stat__hint{font:400 0.8125rem/1.35 var(--of-font); color:var(--of-mist);}
.of-stat--alert .of-stat__value{color:var(--of-red);}
.of-stat--violet .of-stat__value{color:var(--of-violet);}

/* ---------------------------------------------------------------------------
   3. BAR CHART HORIZONTAL (V2 : 8 lignes de pain points, valeurs « X pers. »).
   Barres fines, bout arrondi côté donnée, base plate ; piste grise discrète.
   La largeur se règle inline : style="--w:85%". Sévérité :
   .of-bar--high (rouge) et .of-bar--med (ambre). Paire rouge/ambre validée
   daltonisme ; la position triée + la valeur chiffrée servent de redondance.
   Usage :
   <div class="of-bars" role="img" aria-label="…">
     <div class="of-bars__row">
       <span class="of-bars__label">Rupture Atlas vers Excel</span>
       <span class="of-bars__track"><i class="of-bar of-bar--high" style="--w:92%"></i></span>
       <span class="of-bars__value">11 pers.</span>
     </div> ×8
   </div>
   ------------------------------------------------------------------------- */
.of-bars{display:flex; flex-direction:column; gap:9px; min-width:480px;}
.of-bars__row{display:grid; grid-template-columns:minmax(150px,220px) 1fr auto;
  align-items:center; gap:12px;}
/* QA responsive : le libelle passe a la ligne au lieu d'etre coupe par une
   ellipse. Les libelles longs (« Analyse des ventes sans taux de rotation »,
   243px) etaient tronques a TOUTES les largeurs, y compris 1920px. */
.of-bars__label{font:400 0.8125rem/1.3 var(--of-font); color:var(--of-slate);
  white-space:normal; overflow-wrap:anywhere; hyphens:auto;}
.of-bars__track{position:relative; height:10px; border-radius:5px; background:var(--of-canvas-3);
  overflow:hidden;}
.of-bar{position:absolute; inset:0 auto 0 0; width:var(--w,50%);
  border-radius:0 5px 5px 0; background:var(--of-gray);}
.of-bar--high{background:var(--of-red);}
.of-bar--med{background:var(--of-amber);}
.of-bar--violet{background:var(--of-violet);}
.of-bars__value{font:500 0.75rem/1 var(--of-mono); color:var(--of-steel);
  font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ---------------------------------------------------------------------------
   4. CARTOGRAPHIE BPMN / SWIMLANES (V1 : 4 couloirs, nœuds arrondis, losanges
   de décision orange, badges douleur rouges, flèches pointillées violettes).
   Couloirs empilés : colonne label à gauche, piste de nœuds à droite.
   Les flèches entre nœuds : soit .of-flow-arrow entre deux nœuds d'une même
   piste, soit un SVG overlay (classes de trait §9) pour les liaisons
   inter-couloirs. Poser .of-scroll sur le body : min-width interne 720px.
   Usage :
   <div class="of-bpmn">
     <div class="of-bpmn__lane">
       <span class="of-bpmn__actor">Marc Peeters</span>
       <div class="of-bpmn__track">
         <span class="of-node">Réception fournisseur</span>
         <span class="of-flow-arrow" aria-hidden="true"></span>
         <span class="of-node of-node--pain">Encodage Atlas
           <span class="of-pain">douleur : 3/5</span></span>
         <span class="of-node of-node--decision"><i>Écart ?</i></span>
       </div>
     </div> ×4
   </div>
   ------------------------------------------------------------------------- */
/* QA responsive : la largeur suit le contenu (width:max-content) et non un
   min-width fige. Avec overflow:hidden, un min-width plus etroit que le
   couloir le plus large rognait definitivement le dernier noeud (778px de
   contenu dans 720px de cadre) sans que le defilement de .of-scroll puisse
   l'atteindre. min-width:100% garde le cadre pleine largeur sur grand ecran. */
.of-bpmn{display:flex; flex-direction:column; width:max-content; min-width:100%;
  border:var(--of-border); border-radius:var(--of-r-card); overflow:hidden;}
.of-bpmn__lane{display:grid; grid-template-columns:120px 1fr; align-items:stretch;
  border-bottom:1px solid var(--of-hairline-soft); background:var(--of-canvas);}
.of-bpmn__lane:last-child{border-bottom:0;}
.of-bpmn__lane:nth-child(even){background:var(--of-canvas-2);}
.of-bpmn__actor{display:flex; align-items:center; padding:14px 12px;
  font:500 0.6875rem/1.3 var(--of-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--of-steel); border-right:var(--of-border);
  writing-mode:horizontal-tb; word-break:break-word;}
.of-bpmn__track{display:flex; align-items:center; gap:10px; padding:16px 14px; flex-wrap:nowrap;}

/* nœud process arrondi ; position:relative pour ancrer le badge douleur */
.of-node{position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 13px; background:var(--of-canvas); border:var(--of-border);
  border-radius:9px; box-shadow:var(--of-shadow-chip);
  font:500 0.75rem/1.25 var(--of-font); color:var(--of-ink);
  text-align:center; max-width:170px; flex:0 0 auto;}
.of-node--pain{border-color:var(--of-red-ring);}
.of-node--system{background:var(--of-violet-bg); border-color:var(--of-violet-ring);
  color:var(--of-violet); font-family:var(--of-mono); font-size:0.6875rem;}
.of-node--start,.of-node--end{border-radius:var(--of-r-pill); background:var(--of-canvas-3);
  color:var(--of-steel); font-size:0.6875rem;}

/* losange de décision orange : carré tourné à 45°, label contre-tourné */
.of-node--decision{width:52px; height:52px; padding:0; background:var(--of-amber-bg);
  border:1px solid var(--of-amber-ring); border-radius:8px; transform:rotate(45deg);
  margin:0 6px;}
.of-node--decision i{transform:rotate(-45deg); font:500 0.625rem/1.1 var(--of-font);
  font-style:normal; color:var(--of-amber); text-align:center; max-width:56px;}

/* badge douleur rouge, posé en drapeau sur le coin du nœud */
.of-pain{position:absolute; top:-9px; right:-8px; padding:3px 7px;
  background:var(--of-red-bg); color:var(--of-red);
  box-shadow:inset 0 0 0 1px var(--of-red-ring);
  border-radius:var(--of-r-pill); font:500 0.625rem/1 var(--of-mono);
  letter-spacing:.02em; white-space:nowrap;}

/* flèche de flux inline entre deux nœuds (trait pointillé violet + pointe) */
.of-flow-arrow{flex:1 0 26px; height:0; min-width:26px; position:relative;
  border-top:2px dotted var(--of-violet-soft); opacity:.85;}
.of-flow-arrow::after{content:""; position:absolute; right:-1px; top:-4px;
  border-left:6px solid var(--of-violet-soft);
  border-top:3px solid transparent; border-bottom:3px solid transparent;}

/* ---------------------------------------------------------------------------
   5. CARTOGRAPHIE DU SI (V3 : 12-14 cartes outils reliées, Atlas au centre).
   Le graphe est un bloc position:relative de hauteur fixée par la page ;
   les cartes sont posées en absolu (style="left:…;top:…") au-dessus d'un
   SVG plein cadre qui porte les liens (classes de trait §9).
   Poser .of-scroll : min-width interne 640px.
   Usage :
   <div class="of-si" style="height:340px">
     <svg class="of-si__edges" aria-hidden="true">
       <line class="of-edge of-edge--crit" x1…/> …
     </svg>
     <span class="of-si-card of-si-card--core" style="left:44%;top:42%">Atlas
       <small>ERP</small></span>
     <span class="of-si-card" style="left:8%;top:12%">Excel<small>tableur</small></span>
     …
   </div>
   ------------------------------------------------------------------------- */
.of-si{position:relative; min-width:640px; font-family:var(--of-font);}
.of-si__edges{position:absolute; inset:0; width:100%; height:100%; display:block;}
.of-si-card{position:absolute; display:inline-flex; flex-direction:column; align-items:center;
  gap:1px; padding:8px 12px; background:var(--of-canvas); border:var(--of-border);
  border-radius:9px; box-shadow:var(--of-shadow-chip);
  font:500 0.75rem/1.2 var(--of-font); color:var(--of-ink); white-space:nowrap;
  transform:translate(-50%,-50%);}
.of-si-card small{font:400 0.625rem/1 var(--of-mono); color:var(--of-mist);
  letter-spacing:.04em; text-transform:uppercase;}
.of-si-card--core{background:var(--of-violet); border-color:var(--of-violet);
  color:#fff; padding:11px 16px; font-size:0.8125rem; z-index:1;}
.of-si-card--core small{color:rgba(255,255,255,.75);}
.of-si-card--warn{border-color:var(--of-amber-ring);}
.of-si-card--crit{border-color:var(--of-red-ring);}

/* ---------------------------------------------------------------------------
   6. MATRICE IMPACT × EFFORT (V4 : scatter, bulles numérotées cerclées Top 10).
   Plan quadrillé en fond ; bulles positionnées inline (style="left:…;top:…").
   Catégories : vert quick win, violet projet de fond, ambre facile, gris
   secondaire. Trio vert/violet/ambre validé daltonisme ; le numéro dans la
   bulle sert d'encodage secondaire. Légende via .of-legend (§8).
   Usage :
   <div class="of-matrix" style="height:320px" role="img" aria-label="…">
     <span class="of-matrix__axis of-matrix__axis--y">Impact</span>
     <span class="of-matrix__axis of-matrix__axis--x">Effort</span>
     <span class="of-dot of-dot--quickwin" style="left:22%;top:18%">1</span>
     <span class="of-dot of-dot--fond" style="left:70%;top:12%">2</span> …
   </div>
   ------------------------------------------------------------------------- */
.of-matrix{position:relative; min-width:520px; border:var(--of-border);
  border-radius:var(--of-r-card); background:
  linear-gradient(var(--of-hairline-soft) 1px,transparent 1px) 0 0/25% 25%,
  linear-gradient(90deg,var(--of-hairline-soft) 1px,transparent 1px) 0 0/25% 25%,
  var(--of-canvas);}
.of-matrix__axis{position:absolute; font:500 0.6875rem/1 var(--of-mono);
  letter-spacing:.08em; text-transform:uppercase; color:var(--of-mist);}
.of-matrix__axis--y{left:10px; top:10px;}
.of-matrix__axis--x{right:10px; bottom:10px;}
.of-dot{position:absolute; width:30px; height:30px; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  font:600 0.75rem/1 var(--of-mono); font-variant-numeric:tabular-nums;
  color:#fff; box-shadow:0 0 0 2px var(--of-canvas),0 0 0 3.5px currentColor;}
.of-dot--quickwin{background:var(--of-green); color:#fff;}
.of-dot--fond{background:var(--of-violet); color:#fff;}
.of-dot--facile{background:var(--of-amber); color:#fff;}
.of-dot--sec{background:var(--of-gray); color:#fff;}
/* l'anneau de cerclage prend la couleur de la bulle, pas du texte */
.of-dot--quickwin{box-shadow:0 0 0 2px var(--of-canvas),0 0 0 3.5px var(--of-green);}
.of-dot--fond{box-shadow:0 0 0 2px var(--of-canvas),0 0 0 3.5px var(--of-violet);}
.of-dot--facile{box-shadow:0 0 0 2px var(--of-canvas),0 0 0 3.5px var(--of-amber);}
.of-dot--sec{box-shadow:0 0 0 2px var(--of-canvas),0 0 0 3.5px var(--of-gray);}

/* ---------------------------------------------------------------------------
   7. MINI RADAR SVG 5 AXES (V7 : Processus, Pénibilité, Adoption IA, Outils,
   Collab.). Le pentagone est dessiné en SVG inline dans la page ; ces classes
   stylent grille, forme et libellés. Dimension conseillée : viewBox 0 0 120 120
   dans un conteneur .of-radar.
   Usage :
   <svg class="of-radar" viewBox="0 0 120 120" role="img" aria-label="…">
     <polygon class="of-radar__grid" points="…"/>  (2 à 3 anneaux)
     <line class="of-radar__spoke" …/>             (5 rayons)
     <polygon class="of-radar__shape" points="…"/> (la valeur)
     <text class="of-radar__label" …>Processus</text>
   </svg>
   ------------------------------------------------------------------------- */
.of-radar{width:100%; max-width:170px; height:auto; display:block; margin:0 auto;
  overflow:visible;}
.of-radar__grid{fill:none; stroke:var(--of-hairline,#e7e9ec); stroke-width:1;}
.of-radar__spoke{stroke:var(--of-hairline-soft,#f0f1f3); stroke-width:1;}
.of-radar__shape{fill:rgba(109,40,217,.14); stroke:#6d28d9; stroke-width:1.5;
  stroke-linejoin:round;}
.of-radar__label{font:500 7.5px var(--of-mono,ui-monospace,monospace);
  fill:var(--of-steel,#5b636b); letter-spacing:.03em;}

/* ---------------------------------------------------------------------------
   8. BADGES, CHIPS, LÉGENDE, ÉTOILES (transverses V1-V7)
   .of-badge : pilule teintée. Tons : --violet --red --amber --green --gray.
   .of-flag--high : badge « Élevée » rouge des cartes personne (V7).
   .of-chip : compétence violette des cartes formation (V6).
   .of-legend : légende à puces de la matrice et du SI.
   .of-stars : adoption IA sur 5 (étoiles pleines/creuses dans le HTML,
   ex. ★★☆☆☆, avec un aria-label chiffré).
   ------------------------------------------------------------------------- */
.of-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:var(--of-r-pill); font:500 0.6875rem/1.2 var(--of-mono);
  letter-spacing:.02em; white-space:nowrap;
  background:var(--of-gray-bg); color:var(--of-gray);
  box-shadow:inset 0 0 0 1px var(--of-gray-ring);}
.of-badge--violet{background:var(--of-violet-bg); color:var(--of-violet);
  box-shadow:inset 0 0 0 1px var(--of-violet-ring);}
.of-badge--red{background:var(--of-red-bg); color:var(--of-red);
  box-shadow:inset 0 0 0 1px var(--of-red-ring);}
.of-badge--amber{background:var(--of-amber-bg); color:var(--of-amber);
  box-shadow:inset 0 0 0 1px var(--of-amber-ring);}
.of-badge--green{background:var(--of-green-bg); color:var(--of-green);
  box-shadow:inset 0 0 0 1px var(--of-green-ring);}
.of-flag--high{background:var(--of-red-bg); color:var(--of-red);
  box-shadow:inset 0 0 0 1px var(--of-red-ring);}

.of-chip{display:inline-flex; align-items:center; padding:4px 9px;
  border-radius:var(--of-r-chip); background:var(--of-violet-bg);
  color:var(--of-violet); box-shadow:inset 0 0 0 1px var(--of-violet-ring);
  font:500 0.6875rem/1.2 var(--of-font);}

.of-legend{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px;
  font:400 0.75rem/1.3 var(--of-font); color:var(--of-steel); font-family:var(--of-font);}
.of-legend__item{display:inline-flex; align-items:center; gap:7px;}
.of-legend__swatch{width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
.of-legend__swatch--quickwin{background:var(--of-green);}
.of-legend__swatch--fond{background:var(--of-violet);}
.of-legend__swatch--facile{background:var(--of-amber);}
.of-legend__swatch--sec{background:var(--of-gray);}
.of-legend__swatch--crit{background:var(--of-red);}
.of-legend__swatch--blue{background:var(--of-blue);}

.of-stars{font-size:0.8125rem; letter-spacing:2px; color:var(--of-violet); white-space:nowrap;}
.of-stars .off{color:var(--of-canvas-4,#eef0f2); -webkit-text-stroke:.5px var(--of-mist);}

/* ---------------------------------------------------------------------------
   9. TRAITS SVG (liens du graphe SI, flèches inter-couloirs BPMN)
   À poser sur <line>/<path> d'un SVG overlay. Criticité : gris (neutre),
   bleu (flux normal), rouge (rupture/critique) ; violet pointillé pour les
   flux BPMN.
   ------------------------------------------------------------------------- */
.of-edge{fill:none; stroke:#b6bcc3; stroke-width:1.5; stroke-dasharray:3 4;
  stroke-linecap:round;}
.of-edge--blue{stroke:#2f6fb0;}
.of-edge--crit{stroke:#b2382c;}
.of-edge--violet{stroke:#8b5cf6; stroke-width:2;}

/* ---------------------------------------------------------------------------
   10. CARTES PERSONNE (V7 : mini radar + tags outils + étoiles + badge).
   Usage :
   <div class="of-people">
     <article class="of-person">
       <header class="of-person__head">
         <span class="of-person__name">Élise Moreau</span>
         <span class="of-person__role">Comptabilité</span>
         <span class="of-badge of-flag--high">Élevée</span>
       </header>
       <svg class="of-radar" …></svg>
       <div class="of-person__meta">
         <span class="of-tag">Atlas</span><span class="of-tag">Excel</span>
       </div>
       <p class="of-person__adoption"><span class="of-stars" aria-label="Adoption IA :
         2 sur 5">★★<span class="off">★★★</span></span></p>
     </article> ×2-3
   </div>
   ------------------------------------------------------------------------- */
.of-people{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;}
.of-person{background:var(--of-canvas); border:var(--of-border);
  border-radius:var(--of-r-card); padding:16px; display:flex; flex-direction:column;
  gap:12px; box-shadow:var(--of-shadow-chip); font-family:var(--of-font);}
.of-person__head{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px;}
.of-person__name{font:600 0.9375rem/1.2 var(--of-font); color:var(--of-ink);}
.of-person__role{font:400 0.75rem/1.2 var(--of-mono); color:var(--of-mist);
  letter-spacing:.03em; text-transform:uppercase; margin-right:auto;}
.of-person__meta{display:flex; flex-wrap:wrap; gap:6px;}
.of-tag{display:inline-flex; padding:3px 8px; border-radius:var(--of-r-chip);
  background:var(--of-canvas-3); color:var(--of-steel);
  font:500 0.6875rem/1.2 var(--of-mono);}
.of-person__adoption{margin:0; display:flex; align-items:center; gap:8px;
  font:400 0.75rem/1.2 var(--of-font); color:var(--of-steel);}

/* ---------------------------------------------------------------------------
   11. CARTES PARCOURS FORMATION (V6 : 4 cartes profil, badge « X modules »,
   chips compétences violettes, ligne cas d'usage en slugs mono).
   Usage :
   <div class="of-courses">
     <article class="of-course">
       <header class="of-course__head">
         <span class="of-course__profile">Direction</span>
         <span class="of-badge of-badge--violet">4 modules</span>
       </header>
       <p class="of-course__who">Claire Fontaine</p>
       <div class="of-course__skills"><span class="of-chip">…</span> ×2-3</div>
       <p class="of-course__cases">Cas d'usage : note-pilotage · veille-marche</p>
     </article> ×4
   </div>
   ------------------------------------------------------------------------- */
.of-courses{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;}
.of-course{background:var(--of-canvas); border:var(--of-border);
  border-radius:var(--of-r-card); padding:16px; display:flex; flex-direction:column;
  gap:10px; box-shadow:var(--of-shadow-chip); font-family:var(--of-font);}
.of-course__head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.of-course__profile{font:600 0.9375rem/1.2 var(--of-font); color:var(--of-ink);}
.of-course__who{margin:0; font:400 0.75rem/1.3 var(--of-mono); color:var(--of-mist);
  letter-spacing:.02em;}
.of-course__skills{display:flex; flex-wrap:wrap; gap:6px;}
.of-course__cases{margin:0; padding-top:8px; border-top:1px solid var(--of-hairline-soft);
  font:400 0.6875rem/1.5 var(--of-mono); color:var(--of-steel);
  overflow-wrap:anywhere;}

/* ---------------------------------------------------------------------------
   12. FICHE SOLUTION CONDENSÉE (V5 : en-tête, badge score, bénéfices 3
   colonnes, sprints avec barres, investissement).
   Usage :
   <div class="of-sheet">
     <header class="of-sheet__head">
       <span class="of-sheet__eyebrow">Prismia × Nordmann · Fiche solution · Top 1</span>
       <h4 class="of-sheet__title">Agent analyste Atlas et note de pilotage</h4>
       <span class="of-badge of-badge--violet">3-6 mois · Score 87.2</span>
     </header>
     <div class="of-benef">
       <div class="of-benef__col"><span class="of-benef__k">Prudent</span>
         <span class="of-benef__v">7 200 €<small>/an</small></span></div>
       <div class="of-benef__col of-benef__col--main">… 19 400 € …</div>
       <div class="of-benef__col">… 38 600 € …</div>
     </div>
     <div class="of-sprints">
       <div class="of-sprints__row"><span class="of-sprints__label">Sprint 1 ·
         Cadrage</span><span class="of-sprints__track"><i style="--a:0%;--b:25%">
         </i></span></div> ×4
     </div>
   </div>
   Les barres de sprint se règlent inline : --a (départ) et --b (fin), en %.
   ------------------------------------------------------------------------- */
.of-sheet{display:flex; flex-direction:column; gap:18px; font-family:var(--of-font);}
.of-sheet__head{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.of-sheet__eyebrow{font:500 0.6875rem/1.3 var(--of-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--of-mist);}
.of-sheet__title{margin:0; font:600 clamp(1.05rem,1rem + .5vw,1.35rem)/1.25 var(--of-font);
  letter-spacing:-0.011em; color:var(--of-ink);}
.of-benef{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.of-benef__col{display:flex; flex-direction:column; gap:4px; padding:12px 14px;
  background:var(--of-canvas-2); border:1px solid var(--of-hairline-soft);
  border-radius:var(--of-r-card); text-align:center;}
.of-benef__col--main{background:var(--of-violet-bg); border-color:var(--of-violet-ring);}
.of-benef__k{font:500 0.625rem/1.2 var(--of-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--of-mist);}
.of-benef__col--main .of-benef__k{color:var(--of-violet);}
.of-benef__v{font:600 1.125rem/1.1 var(--of-font); color:var(--of-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-0.011em;}
.of-benef__v small{font-size:.65em; font-weight:400; color:var(--of-mist);}
.of-sprints{display:flex; flex-direction:column; gap:8px;}
.of-sprints__row{display:grid; grid-template-columns:minmax(130px,180px) 1fr;
  align-items:center; gap:12px;}
/* QA responsive : idem .of-bars__label, le libelle s'enroule (« Sprint 3 ·
   Mise en service » etait coupe des 360px). */
.of-sprints__label{font:400 0.75rem/1.3 var(--of-font); color:var(--of-slate);
  white-space:normal; overflow-wrap:anywhere;}
.of-sprints__track{position:relative; height:10px; border-radius:5px;
  background:var(--of-canvas-3); overflow:hidden;}
.of-sprints__track i{position:absolute; top:0; bottom:0; left:var(--a,0%);
  width:calc(var(--b,25%) - var(--a,0%)); background:var(--of-violet);
  border-radius:5px;}
/* variante état : sprint de mesure/passation en violet clair */
.of-sprints__track i.soft{background:var(--of-violet-soft); opacity:.65;}

/* ---------------------------------------------------------------------------
   13. RESPONSIVE
   Les visuels larges (BPMN 720px, SI 640px, matrice 520px, bars 480px)
   gardent leur min-width et défilent dans .of-scroll ; le reste se replie
   en colonnes via auto-fit. Ajustements fins mobile ci-dessous.
   ------------------------------------------------------------------------- */
@media (max-width:640px){
  .of-window__body{padding:14px;}
  /* QA responsive : la barre d'adresse simulee n'affichait plus que
     « app.prismia… » a 360px. Corps plus petit + largeur utile plus large
     pour garder un chemin lisible. */
  .of-window__url{max-width:62vw; font-size:0.6875rem; padding:5px 9px;}
  .of-bars__row{grid-template-columns:minmax(120px,150px) 1fr auto; gap:8px;}
  .of-benef{grid-template-columns:1fr;}
  .of-benef__col{flex-direction:row; align-items:baseline; justify-content:space-between;
    text-align:left;}
  .of-sprints__row{grid-template-columns:minmax(96px,130px) 1fr;}
  .of-bpmn__lane{grid-template-columns:88px 1fr;}
}

/* Mouvement : aucun composant of- n'anime par défaut ; si une page ajoute des
   transitions d'apparition sur ces blocs, elles doivent respecter
   prefers-reduced-motion (garde-fou global ici). */
@media (prefers-reduced-motion:reduce){
  [class^="of-"],[class*=" of-"]{transition:none !important; animation:none !important;}
}