/* Feuille unique de la famille « parcours » Academy. * * Tout est importé ici pour qu'Astro produise **un seul fichier**, mis en cache * une fois et réutilisé par toutes les pages de parcours — au lieu des ~13 Ko * de CSS recopiés dans chaque document en production. * * L'ordre compte : le tronc commun d'abord, les thèmes ensuite (ils portent les * variables que le tronc consomme), le reliquat, puis les accents. * * Les thèmes sont portés par [data-theme="…"], donc ils cohabitent sans * conflit. Le gabarit pose l'attribut sur . * * Les accents viennent en dernier parce qu'ils remplacent des styles en ligne, * qui l'emportaient sur tout dans la page de production. Leur sélecteur est * assez spécifique pour ne pas en dépendre — aucune règle des feuilles * précédentes ne déclare les propriétés qu'ils portent, vérifié — mais l'ordre * dit la même chose que la cascade, et un lecteur ne devrait pas avoir à * compter les points de spécificité pour s'en assurer. */ /* Design system des parcours Academy — DÉRIVÉ, ne pas éditer à la main. * * Généré par tools/factorise-parcours.py depuis reference/html/, c'est-à-dire * depuis ce que la production sert réellement. Toute correction se fait dans * le générateur, jamais ici : une retouche manuelle serait écrasée au * prochain passage et invaliderait la garantie G2. * * 108 règles communes aux 4 parcours de la famille. * Les accents sont exprimés en --ac* ; chaque thème les mappe sur sa palette. */ * { margin:0; padding:0; box-sizing:border-box } *::before { margin:0; padding:0; box-sizing:border-box } *::after { margin:0; padding:0; box-sizing:border-box } body { font-family:'Geist',sans-serif; background:var(--body-background); color:var(--ink); -webkit-font-smoothing:antialiased } nav { position:sticky; top:0; z-index:100; background:var(--nav-background); backdrop-filter:blur(16px); border-bottom:var(--nav-border-bottom); padding:0 32px; display:flex; align-items:center; justify-content:space-between; height:54px } .nav-logo { font-family:'Newsreader',serif; font-weight:700; font-size:17px; color:var(--paper); text-decoration:none; letter-spacing:-.02em } .nav-logo .dot { color:var(--red) } .nav-logo .ac { color:var(--nav-logo-ac-color); font-style:italic; font-weight:400 } .nav-links { display:flex; align-items:center; gap:24px } .nav-link { font-size:12px; color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s } .nav-link:hover { color:rgba(255,255,255,.8) } .nav-cta { font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:var(--nav-cta-background); color:white; border:none; padding:8px 16px; border-radius:5px; cursor:pointer } .wrap { max-width:1060px; margin:0 auto; padding:0 24px 100px } .hero-dark { background:var(--ink); margin:0 -24px; padding:64px 24px 56px; position:relative; overflow:hidden } .hero-dark::before { content:''; position:absolute; right:-120px; top:-120px; width:var(--hero-dark-before-width); height:var(--hero-dark-before-height); border-radius:50%; background:var(--hero-dark-before-background); pointer-events:none } .hero-inner { max-width:1060px; margin:0 auto; display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:start; position:relative; z-index:1 } .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:'Geist Mono',monospace; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--hero-eyebrow-color); background:var(--hero-eyebrow-background); border:var(--hero-eyebrow-border); padding:5px 12px; border-radius:3px; margin-bottom:20px } .hero-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--hero-eyebrow-before-background); flex-shrink:0 } .hero-title { font-family:'Newsreader',serif; font-weight:700; font-size:var(--hero-title-font-size); line-height:1.0; letter-spacing:-.04em; color:var(--paper); margin-bottom:10px } .hero-title em { font-style:italic; font-weight:300; color:var(--hero-title-em-color) } .hero-subtitle { font-family:'Newsreader',serif; font-style:italic; font-weight:300; font-size:var(--hero-subtitle-font-size); color:rgba(255,255,255,.45); margin-bottom:24px; line-height:1.4 } .hero-desc { font-size:14px; line-height:1.7; color:rgba(255,255,255,.5); max-width:520px; margin-bottom:32px } .hero-chips { display:flex; gap:var(--hero-chips-gap); flex-wrap:wrap; margin-bottom:32px } .hero-chip:hover { opacity:.75 } .hero-actions { display:flex; gap:10px; flex-wrap:wrap } .btn-main { background:var(--btn-main-background); color:white; border:none; padding:13px 22px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity .2s; text-decoration:none; display:inline-block } .btn-main:hover { opacity:.85 } .btn-ghost { background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); border:1.5px solid rgba(255,255,255,.12); padding:12px 20px; border-radius:7px; font-size:13px; cursor:pointer; transition:all .2s; text-decoration:none; display:inline-block } .btn-ghost:hover { background:rgba(255,255,255,.1); color:white } .hero-card { background:rgba(255,255,255,.04); border:var(--hero-card-border); border-radius:14px; overflow:hidden } .hc-stripe { height:4px; background:var(--hc-stripe-background) } .hc-body { padding:22px 20px } .hc-title { font-family:'Geist Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:16px } .hc-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px } .hc-val { font-family:'Geist Mono',monospace; font-size:22px; font-weight:600; color:var(--paper); line-height:1 } .hc-key { font-size:9.5px; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.08em; margin-top:3px } .hc-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin-bottom:16px } .hc-modules { display:flex; flex-direction:column; gap:6px } .hc-mod:hover { opacity:.75 } .hc-mod-dur { font-family:'Geist Mono',monospace; font-size:9px; margin-left:auto; opacity:.55 } .sec { padding-top:60px } .sec-eye { font-family:'Geist Mono',monospace; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-f); margin-bottom:6px } .sec-title { font-family:'Newsreader',serif; font-weight:700; font-size:30px; letter-spacing:-.025em; color:var(--ink); line-height:1.15; margin-bottom:8px } .sec-title em { font-style:italic; font-weight:300; color:var(--sec-title-em-color) } .sec-sub { font-size:14px; color:var(--ink-m); line-height:1.65; max-width:640px; margin-bottom:36px } .path-container { display:flex; flex-direction:column; gap:0; margin-top:8px; position:relative } .path-container::before { content:''; position:absolute; left:38px; top:56px; bottom:56px; width:2px; background:var(--path-container-before-background); opacity:.3; pointer-events:none } .module-card { display:grid; grid-template-columns:78px 1fr; gap:0; position:relative } .path-arrow { display:flex; align-items:center; justify-content:flex-start; padding:10px 0 10px 28px } .pa-inner { display:flex; flex-direction:column; align-items:center; gap:2px } .pa-line { width:2px; height:22px; background:var(--rule) } .pa-tip { font-size:10px; color:var(--ink-ff) } .pa-label { font-family:'Geist Mono',monospace; font-size:8px; letter-spacing:.1em; color:var(--ink-f); background:var(--white); border:1px solid var(--rule-l); padding:2px 8px; border-radius:10px; margin-top:2px } .mc-num { display:flex; flex-direction:column; align-items:center; padding-top:20px; position:relative; z-index:2 } .mc-body { background:var(--white); border:1px solid var(--rule); border-radius:14px; margin-left:16px; overflow:hidden; transition:var(--mc-body-transition); cursor:pointer } .mc-body:hover { box-shadow:0 8px 32px rgba(0,0,0,.09) } .mc-body.open { box-shadow:0 8px 32px rgba(0,0,0,.1) } .mc-header { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px } .mc-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap } .mc-title { font-family:'Newsreader',serif; font-weight:700; font-size:19px; color:var(--ink); line-height:1.2; margin-top:3px } .mc-tagline { font-size:12px; color:var(--ink-m); margin-top:4px; line-height:1.45 } .mc-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0 } .mc-dur { font-family:'Geist Mono',monospace; font-size:11px; color:var(--ink-f) } .mc-chevron { font-size:14px; color:var(--ink-ff); transition:transform .25s } .mc-body.open .mc-chevron { transform:rotate(180deg) } .tag { font-family:'Geist Mono',monospace; font-size:9px; padding:2px 8px; border-radius:3px; font-weight:500; display:inline-block } .mc-content { display:none; border-top:1px solid var(--rule-l); padding:24px 24px 28px } .mc-body.open .mc-content { display:block } .self-learning-cta { display:flex; align-items:center; gap:12px; margin-top:20px; padding:14px 18px; border-radius:10px; border:1.5px dashed rgba(4,120,87,.35); background:linear-gradient(135deg,#ecfdf5 0%,#f0fdfa 100%); text-decoration:none; transition:all .25s } .self-learning-cta:hover { border-color:var(--self-learning-cta-hover-border-color); background:linear-gradient(135deg,#d1fae5 0%,#ccfbf1 100%); box-shadow:0 4px 16px rgba(4,120,87,.12) } .self-learning-cta .sl-icon { width:36px; height:36px; border-radius:8px; background:var(--self-learning-cta-sl-icon-background); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; color:white; box-shadow:0 2px 8px rgba(4,120,87,.3) } .self-learning-cta .sl-body { flex:1 } .self-learning-cta .sl-label { font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--self-learning-cta-sl-label-color); font-weight:600; margin-bottom:2px } .self-learning-cta .sl-title { font-size:13px; font-weight:700; color:var(--self-learning-cta-sl-title-color); line-height:1.3 } .self-learning-cta .sl-arrow { font-family:'Geist Mono',monospace; font-size:18px; color:var(--self-learning-cta-sl-arrow-color); flex-shrink:0; transition:transform .2s } .self-learning-cta:hover .sl-arrow { transform:translateX(4px) } .content-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px } .col-title { font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-f); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--rule-l) } .prog-block { margin-bottom:14px } .prog-head { display:flex; align-items:center; gap:8px; margin-bottom:8px } .prog-name { font-size:12.5px; font-weight:700; color:var(--ink) } .prog-items { list-style:none; display:flex; flex-direction:column; gap:4px } .prog-items li { font-size:11.5px; color:var(--ink-s); display:flex; gap:8px; align-items:flex-start; line-height:1.45; padding:3px 0; border-bottom:1px solid var(--rule-l) } .prog-items li:last-child { border-bottom:none } .prog-items li::before { content:'→'; font-size:9px; color:var(--ink-ff); flex-shrink:0; margin-top:3px } .livrable-list { list-style:none; display:flex; flex-direction:column; gap:8px } .livrable-icon { font-size:15px; flex-shrink:0 } .livrable-body { flex:1 } .livrable-title { font-size:12px; font-weight:700; color:var(--ink); margin-bottom:2px } .livrable-desc { font-size:11px; color:var(--ink-m); line-height:1.5 } .recap-bar::before { content:''; position:absolute; inset:0; background:var(--recap-bar-before-background); pointer-events:none } .rb-name { font-size:var(--rb-name-font-size); font-weight:600; color:white } .rb-code { font-family:'Geist Mono',monospace; font-size:var(--rb-code-font-size); color:rgba(255,255,255,.35); display:block; margin-bottom:2px } .rb-arrow { font-size:14px; color:rgba(255,255,255,.2); margin:var(--rb-arrow-margin); flex-shrink:0 } .rb-total { margin-left:auto; text-align:right; position:relative; z-index:1; flex-shrink:0; padding-left:var(--rb-total-padding-left); border-left:1px solid rgba(255,255,255,.1) } .rb-total-val { font-family:'Geist Mono',monospace; font-size:20px; font-weight:600; color:var(--rb-total-val-color) } .rb-total-key { font-size:9.5px; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.08em; margin-top:2px } .cta-box { background:var(--cta-box-background); border-radius:14px; padding:40px 48px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; margin-top:52px } .cta-eye { font-family:'Geist Mono',monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:10px } .cta-title { font-family:'Newsreader',serif; font-weight:700; font-size:24px; color:white; margin-bottom:8px } .cta-desc { font-size:13px; color:rgba(255,255,255,.55); line-height:1.6 } .cta-btns { display:flex; flex-direction:column; gap:8px; min-width:180px } .btn-cta1 { background:white; color:var(--btn-cta1-color); border:none; padding:12px 20px; border-radius:7px; font-size:13px; font-weight:700; cursor:pointer } .btn-cta2 { background:transparent; color:rgba(255,255,255,.7); border:1.5px solid rgba(255,255,255,.25); padding:11px 20px; border-radius:7px; font-size:12.5px; cursor:pointer } footer { max-width:1060px; margin:0 auto; padding:20px 24px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center } .ft-logo { font-family:'Newsreader',serif; font-weight:700; font-size:15px; color:var(--ink) } .ft-logo .dot { color:var(--red) } .ft-copy { font-family:'Geist Mono',monospace; font-size:10px; color:var(--ink-f) } /* Thème « souverainete-numerique » — DÉRIVÉ, voir tools/factorise-parcours.py */ [data-theme="souverainete-numerique"] { --paper:#faf9f7; --white:#fff; --ink:#0f0e17; --ink-s:#2e2c3a; --ink-m:#6b6880; --ink-f:#9896aa; --ink-ff:#c5c0b8; --rule:#e4e1ec; --rule-l:#f0eef8; --red:#b8390e; --p3:#92400e; --p3-m:#b45309; --p3-l:#d97706; --p3-s:#fef7ed; --p3-xs:#fffbf0; scroll-behavior:smooth; /* rôle d'accentuation : --p3* pour ce parcours */ --ac: var(--p3); --ac-l: var(--p3-l); --ac-m: var(--p3-m); --ac-s: var(--p3-s); --ac-xs: var(--p3-xs); /* Divergences propres à ce parcours, extraites déclaration par déclaration depuis la page de production. */ --body-background: #f5ede0; --nav-background: rgba(15,14,23,.95); --nav-border-bottom: 1px solid rgba(180,83,9,.2); --nav-logo-ac-color: var(--ac-l); --nav-cta-background: var(--ac-m); --hero-dark-before-width: 520px; --hero-dark-before-height: 520px; --hero-dark-before-background: radial-gradient(circle,rgba(180,83,9,.14) 0%,transparent 70%); --hero-eyebrow-color: var(--ac-l); --hero-eyebrow-background: rgba(180,83,9,.12); --hero-eyebrow-border: 1px solid rgba(180,83,9,.25); --hero-eyebrow-before-background: var(--ac-l); --hero-title-font-size: 46px; --hero-title-em-color: var(--ac-l); --hero-subtitle-font-size: 19px; --hero-chips-gap: 6px; --btn-main-background: var(--ac-m); --hero-card-border: 1px solid rgba(180,83,9,.22); --hc-stripe-background: linear-gradient(to right,var(--ac),var(--ac-m),var(--ac-l)); --sec-title-em-color: var(--ac-m); --path-container-before-background: linear-gradient(to bottom,var(--ac) 0%,var(--ac-m) 50%,var(--ac-l) 100%); --mc-body-transition: box-shadow .25s; --self-learning-cta-hover-border-color: #047857; --self-learning-cta-sl-icon-background: #047857; --self-learning-cta-sl-label-color: #047857; --self-learning-cta-sl-title-color: #0f0e17; --self-learning-cta-sl-arrow-color: #047857; --recap-bar-before-background: linear-gradient(135deg,rgba(180,83,9,.12) 0%,transparent 60%); --rb-name-font-size: 11px; --rb-code-font-size: 8.5px; --rb-arrow-margin: 0 6px; --rb-total-padding-left: 20px; --rb-total-val-color: var(--ac-l); --cta-box-background: linear-gradient(135deg,var(--ac) 0%,var(--ac-m) 100%); --btn-cta1-color: var(--ac-m); } [data-theme="souverainete-numerique"] body { background:#f5ede0; } /* Thème « comprendre » — DÉRIVÉ, voir tools/factorise-parcours.py */ [data-theme="comprendre"] { --paper:#faf9f7; --white:#fff; --ink:#0f0e17; --ink-s:#2e2c3a; --ink-m:#6b6880; --ink-f:#9896aa; --ink-ff:#c5c0b8; --rule:#e4e1ec; --rule-l:#f0eef8; --red:#b8390e; --p1:#047857; --c1:#0d9488; --c1-m:#14b8a6; --c1-s:#f0fdfa; --c2:#5b21b6; --c2-m:#7c3aed; --c2-s:#f3f0ff; --c3:#c2410c; --c3-m:#ea580c; --c3-s:#fff7ed; --c4:#4c1d95; --c4-m:#7c3aed; --c4-s:#f5f3ff; scroll-behavior:smooth; /* rôle d'accentuation : --c1* pour ce parcours */ --ac: var(--c1); --ac-l: var(--c1-l); --ac-m: var(--c1-m); --ac-s: var(--c1-s); --ac-xs: var(--c1-xs); /* Divergences propres à ce parcours, extraites déclaration par déclaration depuis la page de production. */ --body-background: #e8f5f2; --nav-background: rgba(15,14,23,.94); --nav-border-bottom: 1px solid rgba(13,148,136,.2); --nav-logo-ac-color: var(--ac-m); --nav-cta-background: var(--ac); --hero-dark-before-width: 500px; --hero-dark-before-height: 500px; --hero-dark-before-background: radial-gradient(circle,rgba(13,148,136,.15) 0%,transparent 70%); --hero-eyebrow-color: var(--ac-m); --hero-eyebrow-background: rgba(13,148,136,.12); --hero-eyebrow-border: 1px solid rgba(13,148,136,.25); --hero-eyebrow-before-background: var(--ac-m); --hero-title-font-size: 50px; --hero-title-em-color: var(--ac-m); --hero-subtitle-font-size: 20px; --hero-chips-gap: 8px; --btn-main-background: var(--ac); --hero-card-border: 1px solid rgba(13,148,136,.25); --hc-stripe-background: linear-gradient(to right,var(--ac),var(--c2),var(--c3),var(--c4)); --sec-title-em-color: var(--ac); --path-container-before-background: linear-gradient(to bottom,var(--ac) 0%,var(--c2) 33%,var(--c3) 66%,var(--c4) 100%); --mc-body-transition: box-shadow .25s,border-color .25s; --self-learning-cta-hover-border-color: var(--p1); --self-learning-cta-sl-icon-background: var(--p1); --self-learning-cta-sl-label-color: var(--p1); --self-learning-cta-sl-title-color: var(--ink); --self-learning-cta-sl-arrow-color: var(--p1); --recap-bar-before-background: linear-gradient(135deg,rgba(13,148,136,.15) 0%,transparent 60%); --rb-name-font-size: 11.5px; --rb-code-font-size: 9px; --rb-arrow-margin: 0 8px; --rb-total-padding-left: 24px; --rb-total-val-color: var(--ac-m); --cta-box-background: var(--ac); --btn-cta1-color: var(--ac); } [data-theme="comprendre"] body { background:#e8f5f2; } /* Thème « gouvernance-data-ia » — DÉRIVÉ, voir tools/factorise-parcours.py */ [data-theme="gouvernance-data-ia"] { --paper:#faf9f7; --white:#fff; --ink:#0f0e17; --ink-s:#2e2c3a; --ink-m:#6b6880; --ink-f:#9896aa; --ink-ff:#c5c0b8; --rule:#e4e1ec; --rule-l:#f0eef8; --red:#b8390e; --p1:#047857; --p1-m:#059669; --p1-l:#10b981; --p1-s:#ecfdf5; scroll-behavior:smooth; /* rôle d'accentuation : --p1* pour ce parcours */ --ac: var(--p1); --ac-l: var(--p1-l); --ac-m: var(--p1-m); --ac-s: var(--p1-s); --ac-xs: var(--p1-xs); /* Divergences propres à ce parcours, extraites déclaration par déclaration depuis la page de production. */ --body-background: #e6f4ed; --nav-background: rgba(15,14,23,.94); --nav-border-bottom: 1px solid rgba(4,120,87,.2); --nav-logo-ac-color: var(--ac-l); --nav-cta-background: var(--ac); --hero-dark-before-width: 500px; --hero-dark-before-height: 500px; --hero-dark-before-background: radial-gradient(circle,rgba(4,120,87,.15) 0%,transparent 70%); --hero-eyebrow-color: var(--ac-l); --hero-eyebrow-background: rgba(4,120,87,.12); --hero-eyebrow-border: 1px solid rgba(4,120,87,.25); --hero-eyebrow-before-background: var(--ac-l); --hero-title-font-size: 50px; --hero-title-em-color: var(--ac-l); --hero-subtitle-font-size: 20px; --hero-chips-gap: 8px; --btn-main-background: var(--ac); --hero-card-border: 1px solid rgba(4,120,87,.25); --hc-stripe-background: linear-gradient(to right,var(--ac),var(--ac-l)); --sec-title-em-color: var(--ac); --path-container-before-background: linear-gradient(to bottom,var(--ac) 0%,var(--ac-m) 50%,var(--ac-l) 100%); --mc-body-transition: box-shadow .25s; --self-learning-cta-hover-border-color: #047857; --self-learning-cta-sl-icon-background: #047857; --self-learning-cta-sl-label-color: #047857; --self-learning-cta-sl-title-color: #0f0e17; --self-learning-cta-sl-arrow-color: #047857; --recap-bar-before-background: linear-gradient(135deg,rgba(4,120,87,.15) 0%,transparent 60%); --rb-name-font-size: 11.5px; --rb-code-font-size: 9px; --rb-arrow-margin: 0 8px; --rb-total-padding-left: 24px; --rb-total-val-color: var(--ac-l); --cta-box-background: var(--ac); --btn-cta1-color: var(--ac); } [data-theme="gouvernance-data-ia"] body { background:#e6f4ed; } /* Thème « gouvernance-bancaire » — DÉRIVÉ, voir tools/factorise-parcours.py */ [data-theme="gouvernance-bancaire"] { --paper:#faf9f7; --white:#fff; --ink:#0f0e17; --ink-s:#2e2c3a; --ink-m:#6b6880; --ink-f:#9896aa; --ink-ff:#c5c0b8; --rule:#e4e1ec; --rule-l:#f0eef8; --red:#b8390e; --p2:#0e7490; --p2-m:#0891b2; --p2-l:#06b6d4; --p2-s:#ecfeff; scroll-behavior:smooth; /* rôle d'accentuation : --p2* pour ce parcours */ --ac: var(--p2); --ac-l: var(--p2-l); --ac-m: var(--p2-m); --ac-s: var(--p2-s); --ac-xs: var(--p2-xs); /* Divergences propres à ce parcours, extraites déclaration par déclaration depuis la page de production. */ --body-background: #e5f4f8; --nav-background: rgba(15,14,23,.94); --nav-border-bottom: 1px solid rgba(14,116,144,.2); --nav-logo-ac-color: var(--ac-l); --nav-cta-background: var(--ac); --hero-dark-before-width: 500px; --hero-dark-before-height: 500px; --hero-dark-before-background: radial-gradient(circle,rgba(14,116,144,.15) 0%,transparent 70%); --hero-eyebrow-color: var(--ac-l); --hero-eyebrow-background: rgba(14,116,144,.12); --hero-eyebrow-border: 1px solid rgba(14,116,144,.25); --hero-eyebrow-before-background: var(--ac-l); --hero-title-font-size: 46px; --hero-title-em-color: var(--ac-l); --hero-subtitle-font-size: 19px; --hero-chips-gap: 6px; --btn-main-background: var(--ac); --hero-card-border: 1px solid rgba(14,116,144,.25); --hc-stripe-background: linear-gradient(to right,var(--ac),var(--ac-l)); --sec-title-em-color: var(--ac); --path-container-before-background: linear-gradient(to bottom,var(--ac) 0%,var(--ac-l) 100%); --mc-body-transition: box-shadow .25s; --self-learning-cta-hover-border-color: #047857; --self-learning-cta-sl-icon-background: #047857; --self-learning-cta-sl-label-color: #047857; --self-learning-cta-sl-title-color: #0f0e17; --self-learning-cta-sl-arrow-color: #047857; --recap-bar-before-background: linear-gradient(135deg,rgba(14,116,144,.15) 0%,transparent 60%); --rb-name-font-size: 11px; --rb-code-font-size: 8.5px; --rb-arrow-margin: 0 6px; --rb-total-padding-left: 20px; --rb-total-val-color: var(--ac-l); --cta-box-background: var(--ac); --btn-cta1-color: var(--ac); } [data-theme="gouvernance-bancaire"] body { background:#e5f4f8; } /* Règles propres à « souverainete-numerique » — DÉRIVÉ. * Ce fichier doit rétrécir : chaque règle ici est une occasion de * factorisation manquée, ou une divergence de design assumée. */ [data-theme="souverainete-numerique"] .hero-dark::after { content:''; position:absolute; left:-80px; bottom:-80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(146,64,14,.1) 0%,transparent 70%); pointer-events:none } [data-theme="souverainete-numerique"] .hero-chip { display:flex; align-items:center; gap:6px; font-family:'Geist Mono',monospace; font-size:9.5px; font-weight:500; padding:5px 11px; border-radius:4px; text-decoration:none; transition:opacity .2s; background:rgba(180,83,9,.18); color:rgba(251,191,36,.9); border:1px solid rgba(180,83,9,.28) } [data-theme="souverainete-numerique"] .hc-mod { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; background:rgba(180,83,9,.12); color:var(--ac-l); font-size:11.5px; font-weight:500; text-decoration:none; transition:opacity .2s } [data-theme="souverainete-numerique"] .hc-mod-dot { width:7px; height:7px; border-radius:50%; background:var(--ac-l); flex-shrink:0 } [data-theme="souverainete-numerique"] .mc-badge { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Geist Mono',monospace; font-size:12px; font-weight:700; flex-shrink:0; box-shadow:0 4px 16px rgba(0,0,0,.15); background:var(--ac-s); color:var(--ac); border:2px solid var(--ac-m) } [data-theme="souverainete-numerique"] .mc-stripe { height:4px; background:linear-gradient(to right,var(--ac-m),var(--ac-l)) } [data-theme="souverainete-numerique"] .mc-step-label { font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ac-m) } [data-theme="souverainete-numerique"] .tag-p3 { background:var(--ac-s); color:var(--ac-m); border:1px solid rgba(180,83,9,.2) } [data-theme="souverainete-numerique"] .tag-reg { background:rgba(184,57,14,.08); color:#b8390e; border:1px solid rgba(184,57,14,.2) } [data-theme="souverainete-numerique"] .tag-new { background:rgba(16,185,129,.1); color:#047857; border:1px solid rgba(4,120,87,.2) } [data-theme="souverainete-numerique"] .livrable-item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px; background:var(--ac-xs) } [data-theme="souverainete-numerique"] .recap-bar { background:var(--ink); border-radius:14px; padding:24px 28px; display:flex; align-items:center; gap:0; margin-top:60px; overflow:hidden; position:relative; flex-wrap:wrap; row-gap:12px } [data-theme="souverainete-numerique"] .rb-step { display:flex; align-items:center; gap:10px; position:relative; z-index:1 } [data-theme="souverainete-numerique"] .rb-dot { width:9px; height:9px; border-radius:50%; background:var(--ac-l); flex-shrink:0 } /* Règles propres à « comprendre » — DÉRIVÉ. * Ce fichier doit rétrécir : chaque règle ici est une occasion de * factorisation manquée, ou une divergence de design assumée. */ [data-theme="comprendre"] .hero-chip { display:flex; align-items:center; gap:6px; font-family:'Geist Mono',monospace; font-size:9.5px; font-weight:500; padding:5px 11px; border-radius:4px; text-decoration:none; transition:opacity .2s; letter-spacing:.04em } [data-theme="comprendre"] .chip-c1 { background:rgba(13,148,136,.2); color:rgba(45,212,191,.9); border:1px solid rgba(13,148,136,.3) } [data-theme="comprendre"] .chip-c2 { background:rgba(91,33,182,.2); color:rgba(167,139,250,.9); border:1px solid rgba(91,33,182,.3) } [data-theme="comprendre"] .chip-c3 { background:rgba(194,65,12,.2); color:rgba(253,186,116,.85); border:1px solid rgba(194,65,12,.3) } [data-theme="comprendre"] .chip-c4 { background:rgba(124,58,237,.15); color:rgba(196,181,253,.9); border:1px solid rgba(124,58,237,.3) } [data-theme="comprendre"] .hc-mod { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; font-size:11.5px; font-weight:500; text-decoration:none; transition:opacity .2s } [data-theme="comprendre"] .hc-mod-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0 } [data-theme="comprendre"] hr.divider { border:none; border-top:1px solid var(--rule-l) } [data-theme="comprendre"] .mc-badge { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Geist Mono',monospace; font-size:13px; font-weight:700; flex-shrink:0; box-shadow:0 4px 16px rgba(0,0,0,.15) } [data-theme="comprendre"] .mc-stripe { height:4px } [data-theme="comprendre"] .mc-step-label { font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500 } [data-theme="comprendre"] .tag-c1 { background:rgba(13,148,136,.1); color:var(--ac); border:1px solid rgba(13,148,136,.2) } [data-theme="comprendre"] .tag-c2 { background:rgba(91,33,182,.1); color:var(--c2); border:1px solid rgba(91,33,182,.18) } [data-theme="comprendre"] .tag-c3 { background:rgba(194,65,12,.1); color:var(--c3); border:1px solid rgba(194,65,12,.18) } [data-theme="comprendre"] .tag-c4 { background:var(--c4-s); color:var(--c4-m); border:1px solid rgba(124,58,237,.2) } [data-theme="comprendre"] .tag-new { background:rgba(16,185,129,.1); color:#047857; border:1px solid rgba(4,120,87,.2) } [data-theme="comprendre"] .tag-all { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb } [data-theme="comprendre"] .livrable-item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px } [data-theme="comprendre"] .recap-bar { background:var(--ink); border-radius:14px; padding:28px 36px; display:flex; align-items:center; gap:0; margin-top:60px; overflow:hidden; position:relative } [data-theme="comprendre"] .rb-step { display:flex; align-items:center; gap:12px; flex:1; position:relative; z-index:1 } [data-theme="comprendre"] .rb-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 } /* Règles propres à « gouvernance-data-ia » — DÉRIVÉ. * Ce fichier doit rétrécir : chaque règle ici est une occasion de * factorisation manquée, ou une divergence de design assumée. */ [data-theme="gouvernance-data-ia"] .hero-chip { display:flex; align-items:center; gap:6px; font-family:'Geist Mono',monospace; font-size:9.5px; font-weight:500; padding:5px 11px; border-radius:4px; text-decoration:none; transition:opacity .2s; letter-spacing:.04em; background:rgba(4,120,87,.2); color:rgba(52,211,153,.9); border:1px solid rgba(4,120,87,.3) } [data-theme="gouvernance-data-ia"] .hc-mod { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; background:rgba(4,120,87,.1); color:var(--ac-l); font-size:11.5px; font-weight:500; text-decoration:none; transition:opacity .2s } [data-theme="gouvernance-data-ia"] .hc-mod-dot { width:7px; height:7px; border-radius:50%; background:var(--ac-l); flex-shrink:0 } [data-theme="gouvernance-data-ia"] .mc-badge { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Geist Mono',monospace; font-size:13px; font-weight:700; flex-shrink:0; box-shadow:0 4px 16px rgba(0,0,0,.15); background:var(--ac-s); color:var(--ac); border:2px solid var(--ac) } [data-theme="gouvernance-data-ia"] .mc-stripe { height:4px; background:linear-gradient(to right,var(--ac),var(--ac-l)) } [data-theme="gouvernance-data-ia"] .mc-step-label { font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ac) } [data-theme="gouvernance-data-ia"] .tag-p1 { background:var(--ac-s); color:var(--ac); border:1px solid rgba(4,120,87,.2) } [data-theme="gouvernance-data-ia"] .tag-all { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb } [data-theme="gouvernance-data-ia"] .tag-reg { background:rgba(184,57,14,.08); color:#b8390e; border:1px solid rgba(184,57,14,.2) } [data-theme="gouvernance-data-ia"] .livrable-item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px; background:var(--ac-s) } [data-theme="gouvernance-data-ia"] .recap-bar { background:var(--ink); border-radius:14px; padding:28px 36px; display:flex; align-items:center; gap:0; margin-top:60px; overflow:hidden; position:relative } [data-theme="gouvernance-data-ia"] .rb-step { display:flex; align-items:center; gap:12px; flex:1; position:relative; z-index:1 } [data-theme="gouvernance-data-ia"] .rb-dot { width:10px; height:10px; border-radius:50%; background:var(--ac-m); flex-shrink:0 } /* Règles propres à « gouvernance-bancaire » — DÉRIVÉ. * Ce fichier doit rétrécir : chaque règle ici est une occasion de * factorisation manquée, ou une divergence de design assumée. */ [data-theme="gouvernance-bancaire"] .hero-chip { display:flex; align-items:center; gap:6px; font-family:'Geist Mono',monospace; font-size:9.5px; font-weight:500; padding:5px 11px; border-radius:4px; text-decoration:none; transition:opacity .2s; background:rgba(14,116,144,.2); color:rgba(103,232,249,.9); border:1px solid rgba(14,116,144,.3) } [data-theme="gouvernance-bancaire"] .hc-mod { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; background:rgba(14,116,144,.1); color:var(--ac-l); font-size:11.5px; font-weight:500; text-decoration:none; transition:opacity .2s } [data-theme="gouvernance-bancaire"] .hc-mod-dot { width:7px; height:7px; border-radius:50%; background:var(--ac-l); flex-shrink:0 } [data-theme="gouvernance-bancaire"] .mc-badge { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Geist Mono',monospace; font-size:13px; font-weight:700; flex-shrink:0; box-shadow:0 4px 16px rgba(0,0,0,.15); background:var(--ac-s); color:var(--ac); border:2px solid var(--ac) } [data-theme="gouvernance-bancaire"] .mc-stripe { height:4px; background:linear-gradient(to right,var(--ac),var(--ac-l)) } [data-theme="gouvernance-bancaire"] .mc-step-label { font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ac) } [data-theme="gouvernance-bancaire"] .tag-p2 { background:var(--ac-s); color:var(--ac); border:1px solid rgba(14,116,144,.2) } [data-theme="gouvernance-bancaire"] .tag-reg { background:rgba(184,57,14,.08); color:#b8390e; border:1px solid rgba(184,57,14,.2) } [data-theme="gouvernance-bancaire"] .livrable-item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px; background:var(--ac-s) } [data-theme="gouvernance-bancaire"] .prereq-box { background:rgba(14,116,144,.06); border:1px solid rgba(14,116,144,.15); border-radius:8px; padding:12px 14px; margin-bottom:14px } [data-theme="gouvernance-bancaire"] .prereq-label { font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac); margin-bottom:7px } [data-theme="gouvernance-bancaire"] .prereq-items { display:flex; flex-direction:column; gap:5px } [data-theme="gouvernance-bancaire"] .prereq-item { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-s) } [data-theme="gouvernance-bancaire"] .prereq-item::before { content:'✓'; color:var(--ac); font-size:10px; font-weight:700; flex-shrink:0 } [data-theme="gouvernance-bancaire"] .recap-bar { background:var(--ink); border-radius:14px; padding:24px 28px; display:flex; align-items:center; gap:0; margin-top:60px; overflow:hidden; position:relative; flex-wrap:wrap; row-gap:12px } [data-theme="gouvernance-bancaire"] .rb-step { display:flex; align-items:center; gap:10px; position:relative; z-index:1 } [data-theme="gouvernance-bancaire"] .rb-dot { width:9px; height:9px; border-radius:50%; background:var(--ac-m); flex-shrink:0 } /* Accentuation par module — seul « comprendre » en porte une aujourd'hui. */ /* Accentuation par module de « comprendre » — DÉRIVÉ, ne pas éditer. * * Généré par tools/factorise-parcours.py depuis les styles en ligne de * reference/html/. Chaque règle ci-dessous remplace un attribut `style` * de la production, à valeur identique : c'est G2 qui en fait foi. * * 4 accents × 7 sites. */ [data-theme="comprendre"] [data-accent="c1"] { --acm: var(--c1); --acm-l: var(--c1-l); --acm-m: var(--c1-m); --acm-s: var(--c1-s); --acm-xs: var(--c1-xs); --acm-hc-mod-background: rgba(13,148,136,.08); --acm-hc-mod-color: var(--c1); --acm-hc-mod-dot-background: var(--c1); --acm-mc-badge-color: var(--c1); --acm-mc-badge-border: 2px solid var(--c1); --acm-mc-step-label-color: var(--c1); --acm-rb-dot-background: var(--c1) } [data-theme="comprendre"] [data-accent="c2"] { --acm: var(--c2); --acm-l: var(--c2-l); --acm-m: var(--c2-m); --acm-s: var(--c2-s); --acm-xs: var(--c2-xs); --acm-hc-mod-background: rgba(91,33,182,.07); --acm-hc-mod-color: var(--c2); --acm-hc-mod-dot-background: var(--c2); --acm-mc-badge-color: var(--c2); --acm-mc-badge-border: 2px solid var(--c2); --acm-mc-step-label-color: var(--c2); --acm-rb-dot-background: var(--c2) } [data-theme="comprendre"] [data-accent="c3"] { --acm: var(--c3); --acm-l: var(--c3-l); --acm-m: var(--c3-m); --acm-s: var(--c3-s); --acm-xs: var(--c3-xs); --acm-hc-mod-background: rgba(194,65,12,.07); --acm-hc-mod-color: var(--c3); --acm-hc-mod-dot-background: var(--c3); --acm-mc-badge-color: var(--c3); --acm-mc-badge-border: 2px solid var(--c3); --acm-mc-step-label-color: var(--c3); --acm-rb-dot-background: var(--c3) } [data-theme="comprendre"] [data-accent="c4"] { --acm: var(--c4); --acm-l: var(--c4-l); --acm-m: var(--c4-m); --acm-s: var(--c4-s); --acm-xs: var(--c4-xs); --acm-hc-mod-background: rgba(124,58,237,.07); --acm-hc-mod-color: var(--c4-m); --acm-hc-mod-dot-background: var(--c4-m); --acm-mc-badge-color: var(--c4-m); --acm-mc-badge-border: 2px solid var(--c4-m); --acm-mc-step-label-color: var(--c4-m); --acm-rb-dot-background: var(--c4-m) } [data-theme="comprendre"] .hc-mod[data-accent] { background:var(--acm-hc-mod-background); color:var(--acm-hc-mod-color) } [data-theme="comprendre"] .hc-mod[data-accent] .hc-mod-dot { background:var(--acm-hc-mod-dot-background) } [data-theme="comprendre"] .module-card[data-accent] .mc-badge { background:var(--acm-s); color:var(--acm-mc-badge-color); border:var(--acm-mc-badge-border) } [data-theme="comprendre"] .module-card[data-accent] .mc-stripe { background:linear-gradient(to right,var(--acm),var(--acm-m)) } [data-theme="comprendre"] .module-card[data-accent] .mc-step-label { color:var(--acm-mc-step-label-color) } [data-theme="comprendre"] .module-card[data-accent] .livrable-item { background:var(--acm-s) } [data-theme="comprendre"] .rb-step[data-accent] .rb-dot { background:var(--acm-rb-dot-background) } /* Décorations à l'unité — écrites à la main, tenues par G2. Voir l'en-tête du fichier : elles viennent après les accents, dont elles consomment --acm*. */ /* Décorations propres à « comprendre » — ÉCRIT À LA MAIN, et c'est assumé. * * Les autres feuilles de ce répertoire sont dérivées par * tools/factorise-parcours.py. Celle-ci ne l'est pas, pour une raison de fond : * son générateur ne plie que ce dont la **régularité** prouve le sens — un * style présent une fois par accent, aux mêmes propriétés. Ces trois blocs-là * n'apparaissent qu'une fois chacun, sur un seul module d'un seul parcours. * Rien dans la page ne dit qu'ils forment un motif ; les plier automatiquement * reviendrait à deviner. * * Ce qui les tient à la place d'une dérivation, c'est G2 : il compare les * styles calculés de ces nœuds à ceux de la production, propriété par * propriété, tolérance zéro. Une faute de recopie ici sort en rouge en nommant * le nœud fautif — et si la production change une de ces valeurs, G2 le dit * aussi. C'est la garantie qu'une feuille dérivée apporterait, obtenue par le * harnais plutôt que par le générateur. * * Les données correspondantes sont, elles, extraites : `ruban`, * `pour_aller_plus_loin` et `marqueur` viennent de la page de production. Seule * leur mise en forme est écrite ici. */ /* ── Le bandeau « MODULE NOUVEAU · 2026 », sur la carte C4 ── * La couleur vient de l'accent du module (--acm-m), pas d'une valeur en dur : * la carte est déjà sous [data-accent="c4"], le bandeau en hérite. */ [data-theme="comprendre"] .module-card.a-ruban { position:relative } [data-theme="comprendre"] .mc-ruban { position:absolute; top:-1px; left:94px; background:var(--acm-m); color:white; font-family:'Geist Mono',monospace; font-size:8px; letter-spacing:.1em; padding:3px 11px; border-radius:0 0 5px 5px; z-index:3; display:flex; align-items:center; gap:5px; } [data-theme="comprendre"] .mc-ruban-puce { width:5px; height:5px; border-radius:50%; background:#10b981; flex-shrink:0; } /* ── L'encart « Pour aller plus loin », en pied de colonne des livrables ── */ [data-theme="comprendre"] .mc-plus { margin-top:14px; padding:12px 14px; background:#1e1b4b; border-radius:8px; border:1px solid rgba(99,102,241,.25); } [data-theme="comprendre"] .mc-plus-eye { font-family:'Geist Mono',monospace; font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:rgba(165,180,252,.6); margin-bottom:5px; } [data-theme="comprendre"] .mc-plus-txt { font-size:12px; color:rgba(255,255,255,.75); line-height:1.5; } [data-theme="comprendre"] .mc-plus-txt strong { color:#a5b4fc } [data-theme="comprendre"] .mc-plus-lien { display:inline-block; margin-top:8px; font-family:'Geist Mono',monospace; font-size:9px; color:#a5b4fc; text-decoration:none; } /* ── Le marqueur « nouveau » sur la puce C4 de la carte d'accroche ── */ [data-theme="comprendre"] .hc-mod-neuf { font-family:'Geist Mono',monospace; font-size:8px; background:rgba(16,185,129,.2); color:#34d399; border:1px solid rgba(16,185,129,.3); padding:1px 6px; border-radius:3px; margin-left:4px; }