/* La vue Cube : le Cube d’ATLAS en verre, l’orbe au centre et ses trois axes, le panneau éditorial à côté.
   Par-dessus tokens, composants, atlas. La scène est sombre ; le panneau garde l’encre sur le papier. */
.vue-cube { background: #050506; }
.vc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); min-height: 100svh; }

/* ---------- la scène ---------- */
.vc-scene-zone { --c: clamp(220px, min(28vw, 40vh), 390px); position: sticky; top: 0; height: 100svh; isolation: isolate; display: grid; justify-items: center; align-content: center; gap: var(--espace-3);
  padding: 92px var(--marge) 112px; color: var(--blanc); overflow: hidden; text-align: center; }
.vc-scene-zone::before { content: ''; position: absolute; inset: -10%; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .7;
  background: radial-gradient(24% 28% at 50% 55%, rgba(201,184,255,.42), transparent 70%), radial-gradient(18% 22% at 40% 70%, rgba(255,214,236,.22), transparent 70%), radial-gradient(18% 22% at 62% 36%, rgba(185,240,228,.2), transparent 70%); }
.vc-entete { display: grid; gap: 6px; max-width: 60ch; }
.vc-entete .surtitre { color: rgba(255,255,255,.65); }
.vc-titre { margin: 0; font-size: clamp(30px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.vc-aide { margin: 4px 0 0; font-size: 15px; color: rgba(255,255,255,.7); }
.vc-aide a { color: var(--blanc); text-underline-offset: 3px; }
.vc-scene { position: relative; width: var(--c); height: var(--c); margin: calc(var(--c) * .1) 0 calc(var(--c) * .16); perspective: calc(var(--c) * 3.2); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; border-radius: 12px; outline-offset: 30px; }
.vc-scene.glisse { cursor: grabbing; }
.vc-scene:focus-visible { outline: 2px solid var(--nacre-lilas); }
.vc-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.vc-etat { margin: 0; min-height: 1.5em; font-size: 15px; color: rgba(255,255,255,.85); }

/* les faces : du verre, une grille de fragments */
.vc-face { position: absolute; inset: 0; border-radius: 6px; transform-style: preserve-3d; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(201,184,255,.04) 50%, rgba(185,240,228,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); transition: opacity .4s; }
.vc-face-avant { transform: translateZ(calc(var(--c) / 2)); }
.vc-face-droite { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.vc-face-arriere { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.vc-face-gauche { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.vc-face-haut { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); }
.vc-face-bas { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
.vc-grille { position: absolute; inset: 7% 7% 17%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); gap: 5%; }
.vc-case { display: grid; place-items: center; min-width: 0; padding: 0 2px; border: 0; border-radius: 4px; overflow: hidden; pointer-events: auto; cursor: pointer;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); color: rgba(255,255,255,.9); font: 600 clamp(8px, .8vw, 11px)/1.1 var(--font-sans); transition: background .3s, box-shadow .3s, opacity .3s; }
.vc-case span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vc-case:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.vc-case.vide { pointer-events: none; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.vc-case[data-etat="En production"] { background: rgba(185,240,228,.2); } .vc-case[data-etat="En développement"] { background: rgba(217,232,255,.18); }
.vc-face-mot { position: absolute; left: 7%; right: 7%; bottom: 3%; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--blanc); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.vc-face-mot b { font-size: clamp(14px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.vc-face-mot small { font-size: clamp(10px, .85vw, 12px); color: rgba(255,255,255,.65); }
/* vue de dos à travers le verre : présente, mais en retrait ; on ne la touche pas */
.vc-face.de-dos { opacity: .38; } .vc-face.de-dos .vc-case { pointer-events: none; } .vc-face.de-dos .vc-face-mot { opacity: .5; }

/* le choix : la case choisie, celles qui la touchent, le reste s’efface */
.vc-cube.a-choix .vc-case { opacity: .35; }
.vc-cube.a-choix .vc-case.reliee { opacity: 1; background: rgba(201,184,255,.4); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 0 18px rgba(201,184,255,.6); }
.vc-cube.a-choix .vc-case.choisie { opacity: 1; background: var(--nacre); color: #0b0b0c; box-shadow: 0 0 24px rgba(255,255,255,.7); }
.vc-cube.a-choix .vc-face.de-dos { opacity: .7; }

/* le centre : trois axes, les fils, l’orbe */
.vc-axes, .vc-fils { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none; }
.vc-axe, .vc-fil { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 50%; }
.vc-axe { background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.08)); }
.vc-cube[data-axe="temps"] .vc-axe[data-axe="temps"], .vc-cube[data-axe="structure"] .vc-axe[data-axe="structure"], .vc-cube[data-axe="usage"] .vc-axe[data-axe="usage"] { height: 2px; background: linear-gradient(90deg, var(--nacre-lilas), rgba(201,184,255,.15)); }
.vc-fil { height: 1.5px; background: linear-gradient(90deg, rgba(255,255,255,.95), var(--nacre-lilas)); box-shadow: 0 0 8px rgba(201,184,255,.8); }
.vc-fil-choisi { height: 2.5px; }
.vc-orbe { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; margin: -9% 0 0 -9%; pointer-events: none; }
.vc-orbe span { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, var(--nacre-ciel) 30%, var(--nacre-lilas) 55%, var(--nacre-rose) 78%, rgba(185,240,228,.9));
  box-shadow: 0 0 50px 14px rgba(201,184,255,.4), inset -6px -10px 18px rgba(80,60,140,.35); transition: box-shadow .5s, transform .5s; }
.vc-cube.a-choix .vc-orbe span { box-shadow: 0 0 70px 26px rgba(201,184,255,.65), inset -6px -10px 18px rgba(80,60,140,.3); transform: scale(1.08); }

/* ---------- le panneau : l’encre sur le papier ---------- */
.vc-panneau { padding: 104px var(--espace-6) 120px; background: var(--fond); color: var(--encre); border-left: 1px solid var(--trait); display: grid; align-content: start; gap: var(--espace-6); }
.vc-panneau section { display: grid; gap: 8px; }
.vc-panneau h2 { margin: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.vc-panneau .surtitre { margin: 0; }
.vc-sous, .vc-axe-texte, .vc-relie { margin: 0; font-size: 15px; color: var(--encre-2); }
.vc-choix { padding: var(--espace-5); border-radius: var(--rayon-carte); background: var(--carte); border: 1px solid var(--encre); }
.vc-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.vc-item { width: 100%; min-height: 44px; display: grid; gap: 1px; padding: 8px 12px; border-radius: var(--rayon-md); border: 1px solid var(--trait); background: var(--carte); color: var(--encre); text-align: left; font: inherit; cursor: pointer; }
.vc-item b { font-size: 15px; font-weight: 600; } .vc-item small { font-size: 13px; color: var(--encre-3); }
.vc-item:hover, .vc-item:focus-visible { border-color: var(--encre); }
.vc-item.choisi { border-color: var(--encre); box-shadow: inset 3px 0 0 var(--nacre-lilas); }
.vc-lien { padding: 0; border: 0; background: none; color: var(--encre); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; }
.vc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.vc-ouvrir, .vc-centre { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--rayon-md); font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; }
.vc-ouvrir { background: var(--encre); color: var(--carte); border: 1px solid var(--encre); }
.vc-centre { background: transparent; color: var(--encre); border: 1px solid var(--trait-2); }

/* le dock du bas : la face en regard */
.lieu.en-face { box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 0 18px rgba(201,184,255,.45); }
.lieu.en-face::before { content: ''; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--nacre); }
button.lieu { font: inherit; font-size: 15px; font-weight: 500; }

@media (max-width: 960px) {
  .vc { grid-template-columns: minmax(0, 1fr); }
  .vc-scene-zone { --c: min(62vw, 340px); position: relative; height: auto; padding-bottom: var(--espace-7); }
  .vc-panneau { padding: var(--espace-7) var(--marge) 140px; border-left: 0; border-top: 1px solid var(--trait); }
}
@media (prefers-reduced-motion: reduce) { .vc-face, .vc-case, .vc-orbe span { transition: none; } }

/* ---------- la projection : derrière le Cube, la face en regard et la case choisie ---------- */
.vc-scene-zone::before { z-index: -1; }
.vc-projection { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #050506; }
.vc-proj { position: absolute; inset: 0; background: #070709; clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); animation: vc-projeter 1.1s cubic-bezier(.2,.8,.2,1) forwards;
  transition: opacity .9s, filter .9s, transform 1.4s cubic-bezier(.2,.8,.2,1); }
@keyframes vc-projeter { to { clip-path: circle(160% at var(--ox, 50%) var(--oy, 50%)); } }
.vc-proj > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.92); }
.vc-proj.avec-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,5,6,.92), rgba(5,5,6,.2) 55%, rgba(5,5,6,.55)); }
/* sans visuel : la grille d’ATLAS, et la date en géant derrière */
.vc-proj.en-texte { background-color: #08080a; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; }
.vc-proj-geant { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; font-size: clamp(90px, 16vw, 260px); font-weight: 600; letter-spacing: -0.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); font-variant-numeric: tabular-nums; }
.vc-proj-texte { position: absolute; z-index: 1; left: var(--marge); right: var(--marge); bottom: 168px; display: grid; gap: 8px; text-align: left; color: var(--blanc); }
.vc-proj-sur { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.vc-proj-date { margin: 0; font-size: clamp(18px, 1.8vw, 26px); font-weight: 600; color: var(--nacre-lilas); font-variant-numeric: tabular-nums; }
.vc-proj-titre { margin: 0; max-width: 15ch; font-size: clamp(44px, 6.6vw, 112px); font-weight: 600; letter-spacing: -0.045em; line-height: .95; text-wrap: balance; }
.vc-proj-fiche { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 0; }
.vc-proj-fiche div { display: grid; gap: 1px; max-width: 34ch; }
.vc-proj-fiche dt { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.vc-proj-fiche dd { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.9); }
.vc-proj-recit { margin: 4px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.78); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* les projections précédentes restent, en fantômes */
.vc-proj.fantome-1 { opacity: .26; filter: blur(2px); transform: scale(1.04) translate(-1.5%, 1%); }
.vc-proj.fantome-2 { opacity: .1; filter: blur(5px); transform: scale(1.09) translate(1.5%, -1%); }
.vc-proj.fantome-1 .vc-proj-texte, .vc-proj.fantome-2 .vc-proj-texte { opacity: 0; }
/* la face défile derrière le Cube */
.vc-defile { position: absolute; left: 0; right: 0; top: 30%; z-index: -1; overflow: hidden; pointer-events: none; opacity: .5; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.vc-defile-piste { display: flex; gap: 48px; width: max-content; animation: vc-defiler 70s linear infinite; }
.vc-defile span { white-space: nowrap; font-size: clamp(18px, 2vw, 28px); font-weight: 500; color: rgba(255,255,255,.22); }
.vc-defile b { font-weight: 600; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }
@keyframes vc-defiler { to { transform: translateX(-50%); } }
.vc-entete { position: relative; z-index: 1; }
@media (max-width: 960px) { .vc-etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .vc-proj-texte { bottom: var(--espace-6); } .vc-proj-titre { font-size: clamp(36px, 10vw, 64px); } .vc-proj-recit { display: none; } }
@media (prefers-reduced-motion: reduce) { .vc-proj { animation: none; clip-path: none; transition: none; } .vc-defile-piste { animation: none; } }


/* ATLAS : six faces, six lectures colorées — sans toucher au moteur 3D */
.vc-atlas-faces{grid-column:1/-1;width:100%;background:#faf9f7;color:#19181d;padding:clamp(22px,5vw,80px) clamp(16px,5vw,80px);display:grid;gap:16px}
.vc-faces-intro{max-width:1000px;margin:0 auto 35px;width:100%}
.vc-faces-intro h2{font-size:clamp(40px,7.5vw,108px);line-height:.96;letter-spacing:-.065em;margin:20px 0 24px}
.vc-faces-intro>p:last-child{font-size:clamp(16px,2vw,22px);max-width:52ch;line-height:1.45}
.vc-face-band{max-width:1500px;width:100%;margin:auto;min-height:360px;padding:clamp(25px,5vw,68px);border-radius:22px;display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:35px;align-items:center}
.vc-b-chrono{background:#e6ddf1}.vc-b-compo{background:#dce9e9}.vc-b-archives{background:#f1e6d8}.vc-b-liens{background:#efdde4}.vc-b-modules{background:#e4e9d6}.vc-b-ecosysteme{background:#e1e4ef}
.vc-band-head span{font-size:12px;letter-spacing:.18em;font-weight:650}
.vc-band-head h3{font-size:clamp(44px,5.5vw,84px);line-height:1;margin:15px 0;letter-spacing:-.06em}
.vc-band-head p{font-size:clamp(16px,1.5vw,20px);line-height:1.5;max-width:28ch}
.vc-band-head button{background:#18171c;color:white;border:0;border-radius:999px;padding:12px 20px;font:inherit;font-size:14px;cursor:pointer;margin-top:18px}
.vc-band-head button:focus-visible{outline:3px solid #765b83;outline-offset:3px}
.vc-mosaique{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-self:stretch;min-height:250px}
.vc-mosaique>div{display:flex;align-items:flex-end;padding:17px;background:#ffffffa8;border:1px solid #ffffffb0;border-radius:13px;font-size:clamp(12px,1.3vw,17px);font-weight:600;overflow-wrap:anywhere}
.vc-mosaique>div:nth-child(2),.vc-mosaique>div:nth-child(5){background:#ffffff65}
.vc-faces-note{max-width:1200px;width:100%;margin:15px auto 0;color:#56515b;font-size:13px}
@media(max-width:760px){.vc-face-band{grid-template-columns:1fr;gap:22px;min-height:auto}.vc-mosaique{min-height:210px}.vc-mosaique>div{padding:12px}.vc-faces-intro{margin-bottom:10px}}

/* CUBE — plein cadre, panneau lateral retire de la presentation (moteur conserve) */
body.vue-cube .vc{display:block!important;width:100%;min-width:0}
body.vue-cube .vc-scene-zone{position:relative!important;width:100%;height:min(100svh,950px);min-height:600px;--c:clamp(260px,min(49vw,65vh),630px);padding:115px 4vw 75px;overflow:hidden}
body.vue-cube #vc-panneau{display:none!important}
body.vue-cube .vc-atlas-faces{width:100%;max-width:none}
@media(max-width:720px){body.vue-cube .vc-scene-zone{--c:min(74vw,410px);min-height:580px;height:100svh;padding:95px 14px 75px}}