:root{
  --anth:#17191b;
  --paper:#f5f6f3;
  --gold:#dfb84d;
  --navy:#0b2b48;
  --green:#4ea63f;
  --ink:#10233a;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--anth);
}
button{font:inherit}

.screen{
  position:fixed;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .42s ease;
}
.screen.is-active{
  opacity:1;
  pointer-events:auto;
}

.screen--dark{
  background:radial-gradient(circle at 46% 48%, #1f2225 0%, #17191b 65%);
}
.screen--stage{
  background:var(--anth);
  transition:background 1s ease, opacity .42s ease;
}
.screen--stage.is-light{
  background:radial-gradient(circle at 48% 42%, #ffffff 0%, #f5f6f3 55%, #ecefea 100%);
}

.portrait{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:auto;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}
.portrait--intro{opacity:.82}
.portrait--stage{opacity:.20}

.enter-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:0;
  background:none;
  color:var(--gold);
  font-size:clamp(2rem,4.2vw,4.8rem);
  font-weight:800;
  letter-spacing:.24em;
  cursor:pointer;
  text-shadow:0 0 20px rgba(223,184,77,.22);
  transition:transform .2s ease, text-shadow .2s ease;
}
.enter-btn:hover{
  transform:translate(-50%,-50%) scale(1.08);
  text-shadow:0 0 28px rgba(223,184,77,.5);
}

.sequence{
  position:absolute;
  inset:0;
  transition:opacity .28s ease;
}

.wheel-box{
  position:absolute;
  left:50%;
  top:41%;
  width:min(620px,52vw);
  aspect-ratio:940/520;
  transform:translate(-50%,-50%);
}

.wheel, .trace{
  position:absolute;
  inset:0;
}

.wheel{
  opacity:0;
  transform-origin:50% 50%;
}
.wheel.is-spinning{
  opacity:1;
  animation:wheelSpin 1.5s cubic-bezier(.35,.04,.08,1) forwards;
}
@keyframes wheelSpin{
  0%   {transform:rotate(0deg) scale(.93)}
  45%  {transform:rotate(360deg) scale(.98)}
  100% {transform:rotate(1440deg) scale(1)}
}
.wheel.is-fading{
  animation:wheelFade .34s ease forwards;
}
@keyframes wheelFade{
  to{opacity:0}
}

.wheel-glow{
  position:absolute;
  border-radius:50%;
  inset:15% 18%;
  filter:blur(16px);
  opacity:.0;
}
.wheel.is-spinning .wheel-glow{
  opacity:.55;
}
.wheel-glow--outer{
  background:conic-gradient(from 15deg, rgba(11,43,72,.0), rgba(17,110,125,.55), rgba(78,166,63,.55), rgba(145,208,72,.35), rgba(11,43,72,.0));
}
.wheel-glow--inner{
  inset:21% 24%;
  background:conic-gradient(from 180deg, rgba(11,43,72,.0), rgba(20,93,115,.35), rgba(78,166,63,.35), rgba(11,43,72,.0));
  filter:blur(10px);
}

.wheel-arch{
  position:absolute;
  left:0;
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 8px rgba(61,165,87,.35));
}
.wheel-arch--top{top:0}
.wheel-arch--bottom{
  top:100%;
  transform:rotate(180deg);
  transform-origin:50% 0;
}

.trace{
  opacity:0;
  overflow:hidden;
  clip-path:inset(0 100% 0 0);
}
.trace.is-revealed{
  opacity:1;
  animation:traceReveal .45s ease-out forwards;
}
@keyframes traceReveal{
  to{clip-path:inset(0 0 0 0)}
}
.trace-arch{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
}

.sparks{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.spark{
  position:absolute;
  right:8%;
  top:20%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 9px currentColor;
  opacity:0;
}
.spark.is-live{
  animation:sparkFly .52s ease-out forwards;
}
@keyframes sparkFly{
  0%{opacity:1; transform:translate(0,0) scale(1)}
  100%{opacity:0; transform:translate(var(--x),var(--y)) scale(.14)}
}

.logo-build{
  position:absolute;
  left:50%;
  top:64%;
  width:min(810px,66vw);
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.wordmark,
.formation{
  opacity:0;
  transform:translateY(10px);
}
.wordmark{
  width:96%;
  margin-top:0;
}
.formation{
  width:78%;
  margin-top:30px;
}
.wordmark.is-visible,
.formation.is-visible{
  animation:fadeUp .42s ease-out forwards;
}
@keyframes fadeUp{
  to{opacity:1; transform:none}
}

.final-logo{
  position:absolute;
  left:50%;
  top:60%;
  width:min(810px,66vw);
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  border:0;
  background:none;
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  transition:opacity .28s ease, transform .2s ease;
}
.final-logo.is-ready{
  opacity:1;
  pointer-events:auto;
}
.final-logo:hover{
  transform:translate(-50%,-50%) scale(1.02);
}
.final-arch{width:76%}
.final-wordmark{width:96%; margin-top:20px}
.final-formation{width:78%; margin-top:30px}


/* ===== NAVIGATION RECONSTRUITE AU PROPRE ===== */
.contact-rail{
  position:absolute; left:clamp(16px,2.4vw,34px); bottom:clamp(16px,3vh,30px);
  z-index:60; display:flex; flex-direction:column; gap:.65rem; opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.screen--stage.is-light .contact-rail{opacity:1;pointer-events:auto}
.contact-pill{
  width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--navy),#145e73 52%,var(--green));
  box-shadow:0 9px 24px rgba(11,48,65,.20);color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.contact-pill:hover,.contact-pill:focus-visible{transform:scale(1.09);box-shadow:0 12px 28px rgba(11,48,65,.30);outline:none}
.contact-pill svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.portrait-hotspot{
  position:absolute;right:0;top:0;width:min(28vw,430px);height:100%;z-index:6;border:0;background:transparent;cursor:pointer;
}
.portrait-hotspot span{
  position:absolute;right:22px;bottom:24px;padding:.48rem .72rem;border-radius:999px;background:rgba(11,43,72,.82);
  color:#fff;font-size:.72rem;font-weight:800;opacity:0;transform:translateY(5px);transition:.18s ease;pointer-events:none;
}
.screen--stage.is-light .portrait-hotspot:hover span,.screen--stage.is-light .portrait-hotspot:focus-visible span{opacity:1;transform:none}

.arc-menu{
  position:absolute;left:50%;top:45%;width:min(1100px,88vw);height:min(520px,54vh);
  transform:translate(-50%,-64%);opacity:0;pointer-events:none;z-index:20;
  transition:opacity .35s ease,transform .42s ease;
}
.arc-menu.is-open{opacity:1;pointer-events:none;transform:translate(-50%,-66%)}
.arc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arc-path{fill:none;stroke:rgba(42,111,108,.36);stroke-width:2}
.arc-node{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:210px;border:0;background:none;
  color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:.65rem;font-weight:800;
  text-align:center;cursor:pointer;transition:transform .2s ease,filter .2s ease;z-index:2;pointer-events:none;
}
.arc-menu.is-open .arc-node,.branch-view .arc-node{pointer-events:auto}
.arc-node:hover{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 10px 18px rgba(12,64,74,.16))}
.node-icon{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--navy),#145e73 52%,var(--green));box-shadow:0 12px 30px rgba(11,48,65,.18);
}
.node-icon svg{width:39px;height:39px;fill:none;stroke:white;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.node-label{font-size:1rem;line-height:1.15}

.panel{
  position:absolute;inset:0;z-index:40;background:rgba(245,246,243,.985);opacity:0;pointer-events:none;visibility:hidden;
  transform:scale(.965);transition:opacity .32s ease,transform .42s cubic-bezier(.2,.78,.2,1);
}
.panel.is-open{opacity:1;pointer-events:auto;visibility:visible;transform:scale(1)}
.back-btn{position:absolute;left:clamp(18px,3.5vw,52px);top:clamp(18px,4vh,42px);z-index:55;border:0;background:none;color:var(--ink);font-weight:800;cursor:pointer;opacity:.72}
.back-btn:hover{opacity:1}
.branch-view{
  position:absolute;left:50%;top:46%;width:min(1100px,88vw);height:min(520px,54vh);
  transform:translate(-50%,-50%);opacity:1;pointer-events:auto;
}
.branch-view.is-hidden{display:none}
#branchNodes{position:absolute;inset:0}
.branch-center{position:absolute;left:50%;top:84%;transform:translate(-50%,-50%);width:min(800px,84vw);text-align:center}
.branch-title{margin:0;color:var(--ink);font-size:clamp(2rem,3.8vw,4rem);line-height:1;text-transform:uppercase;letter-spacing:.04em}
.branch-subtitle{margin:.5rem 0 0;color:rgba(16,35,58,.62);font-size:.94rem}
.branch-feature{margin-top:.95rem;border:1px solid rgba(16,35,58,.15);border-radius:999px;padding:.64rem 1rem;background:#fff;color:var(--ink);font-weight:800;cursor:pointer;box-shadow:0 5px 16px rgba(16,35,58,.06)}
.branch-feature:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,35,58,.1)}

.content-view{position:absolute;inset:0;display:none;overflow:auto;padding:7vh 5vw 9vh}
.content-view.is-visible{display:block}
.content-card{width:min(1040px,90vw);margin:auto;padding:1.2rem 0 5rem}
.detail-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:end}
.detail-kicker{margin:0 0 .5rem;color:#3b8457;font-size:.75rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.detail-title{margin:0;color:var(--ink);font-size:clamp(2.1rem,4.5vw,4.6rem);line-height:.99;letter-spacing:-.02em}
.detail-level{align-self:center;white-space:nowrap;padding:.52rem .8rem;border:1px solid rgba(16,35,58,.15);border-radius:999px;font-size:.82rem;font-weight:800}
.detail-lead{max-width:880px;margin:1.15rem 0 1.35rem;color:var(--ink);font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.56}
.evidence-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1.1rem 0 1.3rem}
.evidence{padding:1rem;background:#fff;border-left:4px solid var(--green);box-shadow:0 5px 16px rgba(16,35,58,.05)}
.evidence strong{display:block;color:var(--ink);font-size:1.02rem}.evidence span{display:block;margin-top:.25rem;color:rgba(16,35,58,.72);font-size:.82rem;line-height:1.35}
.approach-box{margin:1rem 0 1.25rem;padding:1.05rem 1.15rem;border-radius:14px;background:linear-gradient(90deg,rgba(11,43,72,.055),rgba(78,166,63,.08));color:var(--ink);font-size:.92rem;line-height:1.52}
.approach-box strong{display:block;margin-bottom:.25rem}
.detail-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:1rem}
.detail-block{padding:1.12rem;background:rgba(255,255,255,.74);border:1px solid rgba(16,35,58,.08);border-radius:14px}
.detail-block h2{margin:0 0 .7rem;font-size:1rem;color:var(--ink)}.detail-block p,.detail-block li{font-size:.91rem;line-height:1.5;color:var(--ink)}.detail-block ul{margin:.2rem 0 0;padding-left:1.15rem}
.case-card{margin:1rem 0;padding:1.08rem 1.15rem;background:#fff;border:1px solid rgba(16,35,58,.1);border-radius:14px}
.case-label{font-size:.71rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#3b8457}.case-card h3{margin:.4rem 0 .5rem;color:var(--ink);font-size:1.1rem}.case-card p{margin:.25rem 0;color:var(--ink);font-size:.9rem;line-height:1.5}

.process{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin:1rem 0}.process span{padding:.7rem .6rem;background:#fff;border-radius:10px;text-align:center;font-size:.76rem;font-weight:800;box-shadow:0 4px 14px rgba(16,35,58,.045)}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin:1rem 0 1.25rem}.timeline div{padding:.85rem;background:#fff;border-top:3px solid var(--green);box-shadow:0 4px 14px rgba(16,35,58,.045)}.timeline strong{display:block;font-size:.82rem}.timeline span{display:block;margin-top:.24rem;font-size:.74rem;line-height:1.3;opacity:.7}
.detail-cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.35rem}.detail-cta a{padding:.74rem .95rem;border-radius:999px;text-decoration:none;font-weight:800}.detail-cta .primary{background:var(--ink);color:#fff}.detail-cta .secondary{border:1px solid rgba(16,35,58,.16);background:#fff;color:var(--ink)}
.small-note{margin-top:.9rem;color:rgba(16,35,58,.56);font-size:.75rem;line-height:1.38}

body.panel-active .main-menu,body.panel-active .final-logo{opacity:0!important;pointer-events:none!important}

@media(max-width:800px){
  .contact-rail{left:12px;bottom:12px;flex-direction:row}
  .contact-pill{width:44px;height:44px}
  .arc-menu,.branch-view{width:98vw;height:55vh}
  .arc-node{width:132px}.node-icon{width:62px;height:62px}.node-icon svg{width:28px;height:28px}.node-label{font-size:.75rem}
  .branch-center{top:89%;width:90vw}.branch-title{font-size:clamp(1.55rem,7vw,2.5rem)}
  .detail-head{grid-template-columns:1fr;align-items:start}.detail-level{justify-self:start}.detail-grid{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:1fr}.content-view{padding:7vh 5vw 13vh}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ===== V21 : navigation Retour fiabilisée ===== */
.back-btn{
  min-width:112px;
  min-height:48px;
  padding:12px 16px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 5px 18px rgba(16,35,58,.10);
  opacity:1 !important;
  z-index:1000 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.back-btn:hover,
.back-btn:focus-visible{
  background:#fff !important;
  box-shadow:0 8px 22px rgba(16,35,58,.16);
  outline:none;
}

/* Le retour doit paraître instantané : pas d'animation longue du panneau. */
.panel{
  transition:opacity .16s ease, transform .18s ease !important;
}
.branch-view,
.content-view{
  pointer-events:auto;
}


/* ===== V22 : Retour : correction d'événement + bouton indépendant ===== */
.back-btn{
  position:fixed !important;
  left:clamp(18px,3.5vw,52px) !important;
  top:clamp(18px,4vh,42px) !important;
  z-index:2147483647 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}


/* ===== V25 : hiérarchie éditoriale, miniatures et équilibre ===== */
.branch-feature{display:none!important}
.node-label{width:210px;max-width:210px;line-height:1.08}
.node-title{display:block;font-size:.98rem;font-weight:900;line-height:1.08}
.node-meta{display:block;margin-top:.28rem;font-size:.70rem;line-height:1.12;font-weight:800;letter-spacing:.035em;color:rgba(16,35,58,.58)}

.detail-lead{max-width:900px;font-size:clamp(1.02rem,1.42vw,1.18rem);line-height:1.62}
.approach-box{border-left:4px solid var(--green);border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(11,43,72,.045),rgba(78,166,63,.055))}

.thumb-rack{display:flex;flex-wrap:wrap;gap:.85rem;margin:1.05rem 0 1.35rem;align-items:flex-start;position:relative;z-index:5}
.thumb-card{position:relative;width:124px;height:82px;margin:0;border-radius:12px;overflow:hidden;z-index:1;transform-origin:center center;transition:transform .22s ease, box-shadow .22s ease;box-shadow:0 6px 14px rgba(16,35,58,.12);background:#dfe5df}
.thumb-card img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .22s ease, transform .22s ease;filter:saturate(.96) contrast(1.02)}
.thumb-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .58rem .48rem;font-size:.58rem;line-height:1.24;color:#fff;background:linear-gradient(transparent,rgba(8,19,31,.86));opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease;pointer-events:none}
.thumb-card:hover,.thumb-card:focus-within{z-index:20;box-shadow:0 10px 22px rgba(16,35,58,.22)}
.thumb-card:hover img,.thumb-card:focus-within img{filter:saturate(1.03) contrast(1.03)}
.thumb-card:hover figcaption,.thumb-card:focus-within figcaption{opacity:1;transform:translateY(0)}



.profile-strip{display:grid;grid-template-columns:160px minmax(0,1fr);gap:1rem;align-items:center;margin:1rem 0 1.25rem;padding:.85rem;background:rgba(255,255,255,.68);border:1px solid rgba(16,35,58,.08);border-radius:14px}
.profile-strip img{width:160px;height:118px;object-fit:cover;object-position:center 24%;border-radius:11px;box-shadow:0 5px 14px rgba(16,35,58,.08)}
.profile-strip p{margin:0;font-size:.91rem;line-height:1.55}

.serious-card{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;margin:1rem 0;padding:1rem 1.05rem;background:#fff;border:1px solid rgba(16,35,58,.1);border-radius:14px}
.serious-mark{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy),#145e73 52%,var(--green));color:#fff;font-size:1.65rem;font-weight:900;box-shadow:0 7px 18px rgba(11,48,65,.15)}
.serious-card h3{margin:.05rem 0 .4rem;font-size:1.08rem}
.serious-card p{margin:.25rem 0;font-size:.90rem;line-height:1.52}

@media(max-width:800px){
  .node-label{width:132px;max-width:132px}.node-title{font-size:.77rem}.node-meta{font-size:.61rem}
  .thumb-card{width:116px;height:78px}.thumb-card img{width:116px;height:78px}.thumb-card figcaption{width:116px;font-size:.62rem}
  .thumb-card:hover img,.thumb-card:focus-within img{filter:saturate(1.03) contrast(1.03)}
  .profile-strip{grid-template-columns:1fr}.profile-strip img{width:132px;height:100px}
}

@media(max-width:800px){
  .thumb-card{width:108px;height:74px}
  .thumb-card:hover,.thumb-card:focus-within{z-index:20;box-shadow:0 10px 22px rgba(16,35,58,.22)}
}


/* ===== V27 : prévisualisation photo presque plein écran ===== */
.image-preview{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  padding:5vh 5vw;
  background:rgba(8,20,31,.58);
  backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, visibility .16s ease;
}
.image-preview.is-visible{
  opacity:1;
  visibility:visible;
}
.image-preview__frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(90vw,1400px);
  height:min(86vh,920px);
}
.image-preview__frame img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}
.image-preview__caption{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  max-width:min(82vw,1050px);
  padding:.68rem .9rem;
  border-radius:10px 10px 0 0;
  background:rgba(7,19,31,.82);
  color:#fff;
  font-size:.82rem;
  line-height:1.35;
  text-align:center;
}
.thumb-card{
  cursor:zoom-in;
}
.thumb-card figcaption{
  display:none;
}
@media(max-width:800px){
  .image-preview{padding:4vh 4vw}
  .image-preview__frame{width:92vw;height:82vh}
  .image-preview__caption{font-size:.74rem}
}

/* ===== V28 : hiérarchie éditoriale ===== */
.detail-reference{
  margin:.35rem 0 1rem;
  padding:.62rem .8rem;
  border-left:2px solid rgba(78,166,63,.75);
  color:rgba(16,35,58,.68);
  font-size:.76rem;
  line-height:1.42;
  background:rgba(255,255,255,.36);
  border-radius:0 8px 8px 0;
}
.profile-strip--portrait{
  grid-template-columns:140px minmax(0,1fr);
}
.profile-strip--portrait img{
  width:140px;
  height:132px;
}
.detail-block p{
  margin:.15rem 0 0;
}
.case-card h3{
  line-height:1.25;
}


/* ===== V30 : identité, accès directs, catalogue et lisibilité ===== */
body.nav-active .screen--stage.is-light{
  background:
    radial-gradient(circle at 18% 14%, rgba(11,43,72,.075), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(78,166,63,.09), transparent 30%),
    linear-gradient(135deg,#fafbf9 0%,#f1f5f2 52%,#edf2f4 100%);
}
body.nav-active .screen--stage.is-light::after,
.panel.is-open::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(16,35,58,.055) .7px,transparent .7px);
  background-size:18px 18px;opacity:.42;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 72%);
}
.main-menu,.main-aux,.final-logo,.contact-rail,.portrait-hotspot{z-index:20}

.main-aux{
  position:absolute;left:50%;bottom:clamp(28px,5vh,58px);transform:translate(-50%,18px);
  width:min(850px,78vw);display:grid;grid-template-columns:1.16fr .84fr;gap:.8rem;
  opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease;z-index:24;
}
body.nav-active .main-aux{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.main-aux-card{
  min-height:78px;border:1px solid rgba(16,35,58,.11);border-radius:18px;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(16,35,58,.10);padding:.72rem .82rem;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;text-align:left;color:var(--ink);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.main-aux-card:hover,.main-aux-card:focus-visible{transform:translateY(-3px);box-shadow:0 18px 42px rgba(16,35,58,.15);border-color:rgba(78,166,63,.45);outline:none}
.main-aux-card--profile{border-left:4px solid var(--green)}
.main-aux-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 25%;box-shadow:0 5px 16px rgba(16,35,58,.14)}
.main-aux-icon{width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,var(--navy),#145e73 55%,var(--green));display:grid;place-items:center;color:#fff}
.main-aux-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.main-aux-copy strong{display:block;font-size:.96rem;line-height:1.1}.main-aux-copy small{display:block;margin-top:.3rem;color:rgba(16,35,58,.62);font-size:.69rem;line-height:1.25}
.main-aux-arrow{font-size:1.25rem;font-weight:800;color:var(--green)}
body.panel-active .main-aux{opacity:0!important;pointer-events:none!important}

/* Le niveau est une information, pas un onglet. */
.detail-level{border:0;border-left:3px solid var(--green);border-radius:0;padding:.2rem 0 .2rem .75rem;background:transparent;color:rgba(16,35,58,.72);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;cursor:default;user-select:text}

.panel{background:linear-gradient(135deg,rgba(247,249,247,.99),rgba(237,243,240,.99))}
.content-view,.branch-view,.back-btn{z-index:3}
.content-card{position:relative;z-index:3}
.detail-block,.case-card,.profile-strip,.catalogue-section{box-shadow:0 10px 30px rgba(16,35,58,.045)}

.editorial-visual{margin:1rem 0 1.25rem;width:min(520px,100%);border-radius:18px;overflow:hidden;background:#eef3f1;border:1px solid rgba(16,35,58,.08);box-shadow:0 12px 30px rgba(16,35,58,.08)}
.editorial-visual img{display:block;width:100%;height:auto}

.profile-references{margin:1rem 0;padding:1rem 1.1rem;border-radius:14px;background:#fff;border:1px solid rgba(16,35,58,.09);display:flex;flex-wrap:wrap;gap:.55rem .8rem;align-items:center}
.profile-references strong{width:100%;font-size:.82rem;color:var(--ink)}
.profile-references a{font-size:.75rem;color:#285d54;text-decoration:none;border-bottom:1px solid rgba(40,93,84,.25);padding-bottom:1px}
.profile-references a:hover,.profile-references a:focus-visible{color:var(--navy);border-color:var(--navy)}

.catalogue-section{margin:1rem 0 1.3rem;padding:1rem 1.05rem;border-radius:18px;background:rgba(255,255,255,.68);border:1px solid rgba(16,35,58,.08)}
.catalogue-section>h2{margin:.1rem 0 .8rem;color:var(--ink);font-size:1.15rem}
.catalogue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.program-card{background:#fff;border:1px solid rgba(16,35,58,.09);border-radius:14px;overflow:hidden;box-shadow:0 5px 18px rgba(16,35,58,.045)}
.program-card summary{list-style:none;cursor:pointer;padding:.9rem 1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.program-card summary::-webkit-details-marker{display:none}
.program-card summary strong{display:block;color:var(--ink);font-size:.9rem;line-height:1.2}.program-card summary small{display:block;margin-top:.25rem;color:rgba(16,35,58,.58);font-size:.66rem;line-height:1.25}
.program-open{font-size:.68rem;font-weight:800;color:#2d7357;white-space:nowrap}.program-card[open] .program-open{font-size:0}.program-card[open] .program-open::after{content:'Fermer';font-size:.68rem}
.program-body{padding:.1rem 1rem 1rem;border-top:1px solid rgba(16,35,58,.07)}
.program-facts{display:grid;grid-template-columns:1fr;gap:.45rem;margin:.75rem 0}.program-facts p{margin:0;color:var(--ink);font-size:.78rem;line-height:1.43}.program-facts b{display:block;margin-bottom:.05rem;color:#3b8457;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}
.program-body h3{margin:.8rem 0 .35rem;font-size:.78rem;color:var(--ink)}.program-body ul{margin:.2rem 0 .7rem;padding-left:1.05rem}.program-body li{font-size:.76rem;line-height:1.42;color:var(--ink)}
.program-ref{display:inline-block;font-size:.69rem;color:#285d54;text-decoration:none;border-bottom:1px solid rgba(40,93,84,.3)}.program-ref--static{border-bottom:0;color:rgba(16,35,58,.55)}
.program-card summary:focus-visible{outline:3px solid rgba(78,166,63,.25);outline-offset:-3px}

.arc-node:focus-visible{outline:none}.arc-node:focus-visible .node-icon{box-shadow:0 0 0 5px rgba(78,166,63,.22),0 12px 30px rgba(11,48,65,.18)}

@media(max-width:800px){
  .main-aux{width:92vw;grid-template-columns:1fr;bottom:68px}.main-aux-card{min-height:64px}.main-aux-card img{width:46px;height:46px}.main-aux-icon{width:44px;height:44px}
  .catalogue-grid{grid-template-columns:1fr}.editorial-visual{width:100%}
}

body.nav-active .portrait-hotspot span{opacity:.78;transform:none;font-size:.70rem}


/* ===== V31 : visuels validés, profil mis en avant, images statiques ===== */
.main-aux{width:min(920px,82vw);grid-template-columns:1.32fr .68fr}
.main-aux-card--profile{min-height:88px;border-left:5px solid var(--green);background:rgba(255,255,255,.94)}
.main-aux-card--profile img{width:66px;height:66px}
.main-aux-card--profile .main-aux-copy strong{font-size:1.12rem;letter-spacing:.01em}
.main-aux-card--profile .main-aux-copy small{font-size:.73rem;line-height:1.38;max-width:470px}

.thumb-card--static{cursor:default;box-shadow:0 5px 14px rgba(16,35,58,.10)}
.thumb-card--static:hover,.thumb-card--static:focus-within{transform:none;box-shadow:0 5px 14px rgba(16,35,58,.10)}
.thumb-card--static img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.thumb-card--static figcaption{display:none!important}

.case-card--game{padding:1.15rem 1.2rem}
.game-showcase{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:1.1rem;align-items:center;margin-top:.8rem}
.thumb-card--game{width:100%;height:auto;aspect-ratio:4/3;border-radius:14px}
.thumb-card--game img{width:100%;height:100%;object-fit:cover}

@media(max-width:800px){
  .main-aux{width:92vw;grid-template-columns:1fr}
  .main-aux-card--profile img{width:52px;height:52px}
  .game-showcase{grid-template-columns:1fr}
  .thumb-card--game{width:100%;height:auto}
}


/* ===== V32 : modifications demandées uniquement ===== */
/* Les visuels générés validés restent des illustrations statiques, mais ne sont plus des timbres-poste. */
.thumb-rack:has(.thumb-card--static){align-items:flex-start}
.thumb-card--static{
  width:clamp(300px,34vw,370px);
  height:auto;
  aspect-ratio:4/3;
  border-radius:14px;
}
.thumb-card--static img{
  width:100%!important;
  height:100%!important;
  object-fit:cover;
}
/* Le résumé du jeu doit rester lisible face au visuel. */
.case-card--game .game-showcase p{
  font-size:1rem;
  line-height:1.62;
}
/* Les cartes de prestations sont déjà des éléments <details> : un simple repère visuel suffit. */
.program-card summary::after{
  content:'+';
  flex:0 0 auto;
  color:#2d7357;
  font-size:1.05rem;
  font-weight:800;
  line-height:1;
}
.program-card[open] summary::after{content:'−'}
.program-open{display:none!important}

@media(max-width:800px){
  .thumb-card--static{
    width:min(92vw,420px);
    max-width:100%;
    height:auto;
  }
  .thumb-card--static img{
    width:100%!important;
    height:100%!important;
  }
  .case-card--game .game-showcase p{font-size:.96rem;line-height:1.58}
}