/* ASAPE Experience V9 · Concept B · Mur technologique interactif
   Un mur architectural de 8 surfaces de verre lumineux ; au clic, la surface devient l'écran. */

:root{
  --bleu:#034CAE; --profond:#02377F; --nuit:#01295F; --jaune:#FFB506;
  --b1:#6390CD; --b2:#B8CDE8; --b3:#EEF4FC; --creme:#FBEDCC;
  --texte:#0B2A57; --texte-doux:#3A5683;
  --f-titre:'Montserrat',system-ui,sans-serif;
  --f-texte:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.65,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --bandeau-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--b3)}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--f-texte);color:var(--texte);
  background:linear-gradient(180deg,#F7FAFE 0%,var(--b3) 55%,#DCE7F6 100%);overflow:hidden;overflow-x:hidden}
img{display:block;max-width:100%}
button,a{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:fixed;left:16px;top:-60px;z-index:100;background:var(--profond);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.evitement:focus{top:12px}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
.repli{display:none}

/* ---------- Architecture ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;transition:filter .7s var(--ease),transform .9s var(--ease)}
.scene-fond{position:absolute;inset:-4%;background:url(medias/acte-1-portail-desktop-variante-c.webp) center 40%/cover no-repeat;
  opacity:.5;transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-8px),0) scale(1.04);
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 42%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 50% 42%,#000 35%,transparent 80%)}
.scene-voute{position:absolute;left:0;right:0;top:0;height:38%;
  background:
    radial-gradient(ellipse 50% 90% at 50% -10%,rgba(255,255,255,.95),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 119px,rgba(99,144,205,.10) 119px 120px);
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.scene-pilastres i{position:absolute;top:0;bottom:22%;width:2px;background:linear-gradient(180deg,transparent,rgba(3,76,174,.55) 30%,rgba(3,76,174,.15) 85%,transparent);box-shadow:0 0 18px rgba(3,76,174,.35)}
.scene-pilastres i:nth-child(1){left:3.2%}
.scene-pilastres i:nth-child(2){left:5.2%;background:linear-gradient(180deg,transparent,rgba(255,181,6,.85) 35%,rgba(255,181,6,.2) 85%,transparent);box-shadow:0 0 22px rgba(255,181,6,.6)}
.scene-pilastres i:nth-child(3){right:5.2%;background:linear-gradient(180deg,transparent,rgba(255,181,6,.85) 35%,rgba(255,181,6,.2) 85%,transparent);box-shadow:0 0 22px rgba(255,181,6,.6)}
.scene-pilastres i:nth-child(4){right:3.2%}
.scene-rayons{position:absolute;inset:0;transform:translate3d(calc(var(--px,0)*22px),0,0)}
.scene-rayons i{position:absolute;top:-30%;width:16vw;height:150%;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(18px);opacity:.75;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,236,190,.35) 45%,transparent 80%);animation:rayon 14s ease-in-out infinite alternate}
.scene-rayons i:nth-child(1){left:8%;transform:rotate(-22deg);animation-delay:-3s}
.scene-rayons i:nth-child(2){left:30%;width:9vw;transform:rotate(-9deg);background:linear-gradient(180deg,rgba(255,214,120,.75),rgba(255,181,6,.18) 50%,transparent 85%);animation-delay:-7s}
.scene-rayons i:nth-child(3){left:46%;width:10vw;transform:rotate(0deg);animation-delay:-1s}
.scene-rayons i:nth-child(4){left:62%;width:8vw;transform:rotate(10deg);background:linear-gradient(180deg,rgba(255,214,120,.7),rgba(255,181,6,.15) 50%,transparent 85%);animation-delay:-5s}
.scene-rayons i:nth-child(5){left:78%;transform:rotate(22deg);animation-delay:-9s}
@keyframes rayon{0%{opacity:.35;translate:-1.5vw 0}100%{opacity:.85;translate:1.5vw 0}}
.scene-sol{position:absolute;left:-20%;right:-20%;bottom:0;height:30%;perspective:420px;perspective-origin:50% 0;
  background:linear-gradient(180deg,rgba(238,244,252,0),rgba(214,228,246,.85) 40%,#CFDDF2 100%)}
.scene-grille{position:absolute;inset:0 0 -40% 0;transform:rotateX(68deg);transform-origin:50% 0;
  background:
    repeating-linear-gradient(90deg,rgba(3,76,174,.16) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(0deg,rgba(3,76,174,.12) 0 1px,transparent 1px 90px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.scene-poussiere{position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 22%,#FFE6A8,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#fff,transparent),radial-gradient(1px 1px at 85% 55%,#fff,transparent),radial-gradient(1.2px 1.2px at 12% 72%,#FFE6A8,transparent),radial-gradient(1px 1px at 58% 12%,#fff,transparent);
  background-size:620px 520px;animation:poussiere 40s linear infinite}
@keyframes poussiere{to{background-position:0 -520px}}

/* ---------- Bandeau ---------- */
.bandeau{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--bandeau-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,40px);transition:opacity .5s,filter .6s}
.bandeau-logo{display:flex;align-items:center;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);border-radius:14px;padding:6px 12px;
  box-shadow:0 6px 24px -10px rgba(2,55,127,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bandeau-logo img{height:34px;width:auto}
.bandeau-nav{display:flex;align-items:center;gap:10px}
.lien-formations{font-weight:600;font-size:14px;color:var(--profond);text-decoration:none;padding:10px 14px;border-radius:999px;transition:background .25s}
.lien-formations:hover{background:rgba(255,255,255,.7)}
.bouton-rdv{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--bleu),var(--profond));padding:10px 18px;border-radius:999px;
  box-shadow:0 8px 22px -8px rgba(2,55,127,.6),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s var(--ease-out),box-shadow .25s}
.bouton-rdv:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(2,55,127,.7),0 0 0 3px rgba(255,181,6,.35)}
.rdv-point{width:7px;height:7px;border-radius:50%;background:var(--jaune);box-shadow:0 0 0 0 rgba(255,181,6,.7);animation:pouls 2.4s infinite}
.rdv-court{display:none}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(255,181,6,.7)}70%{box-shadow:0 0 0 8px rgba(255,181,6,0)}100%{box-shadow:0 0 0 0 rgba(255,181,6,0)}}
.bouton-pause{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--profond);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);transition:background .2s}
.bouton-pause:hover{background:#fff}
.bouton-pause svg path{fill:currentColor}
.bouton-pause .ic-play{display:none}
.pause .bouton-pause .ic-play{display:block}
.pause .bouton-pause .ic-pause{display:none}

/* ---------- Cockpit ---------- */
.cockpit{position:relative;z-index:10;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--bandeau-h) + 0px) clamp(16px,3vw,40px) 10px;transition:filter .7s var(--ease),opacity .7s}
.titre-bloc{text-align:center;margin-top:clamp(0px,1.2vh,14px)}
.surtitre{display:inline-flex;align-items:center;gap:12px;margin:0 0 6px;font:600 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--bleu)}
.surtitre .sep{width:28px;height:1px;background:linear-gradient(90deg,var(--jaune),transparent)}
h1{margin:0;font:800 clamp(28px,min(4.2vw,6.2vh),58px)/1.02 var(--f-titre);letter-spacing:-.025em;color:var(--profond);
  text-shadow:0 2px 30px rgba(255,255,255,.9)}
.sous-titre{margin:8px 0 0;font:500 clamp(14px,min(1.4vw,2.1vh),18px)/1.4 var(--f-texte);color:var(--texte-doux)}

.mur-zone{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0;padding-top:clamp(6px,1.6vh,20px)}
.mur{width:min(1180px,88vw);height:clamp(300px,58vh,560px);perspective:1500px;perspective-origin:50% 45%;
  -webkit-box-reflect:below 12px linear-gradient(180deg,transparent 80%,rgba(255,255,255,.2))}
.mur-rig{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(calc(var(--py,0)*-2.2deg)) rotateY(calc(var(--px,0)*3.4deg));
  display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:.86fr 1.08fr 1.42fr 1.08fr .86fr;
  grid-template-rows:repeat(6,1fr);
  grid-template-areas:
    "z-pilot z-manager z-agents z-mc z-perso"
    "z-pilot z-manager z-agents z-mc z-perso"
    "z-pilot z-manager z-agents z-mc z-perso"
    "z-pilot z-auto    z-agents z-suivi z-perso"
    "z-pilot z-auto    z-equipe z-suivi z-perso"
    "z-pilot z-auto    z-equipe z-suivi z-perso"}

/* ---------- Panneau de verre ---------- */
.pan{position:relative;display:block;min-width:0;min-height:0;transform-style:preserve-3d;text-align:left;
  transform:translateZ(var(--zc,0px)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease),opacity .6s,filter .6s}
.pan[data-col="1"]{--ry:22deg;--zc:48px}
.pan[data-col="2"]{--ry:11deg;--zc:22px}
.pan[data-col="4"]{--ry:-11deg;--zc:22px}
.pan[data-col="5"]{--ry:-22deg;--zc:48px}
.pan-3d{position:absolute;inset:0;border-radius:18px;overflow:hidden;isolation:isolate;
  transform:translateZ(var(--lift,0px)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .5s var(--ease-out),box-shadow .5s;
  background:var(--profond);
  box-shadow:0 30px 60px -28px rgba(2,55,127,.65),0 0 0 1px rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18)}
.pan-img{position:absolute;inset:-6%;transition:transform .9s var(--ease-out),filter .6s}
.pan-img img{width:100%;height:100%;object-fit:cover;transform:translate3d(calc(var(--ty,0deg)/1deg*-1.4px),calc(var(--tx,0deg)/1deg*1.4px),0)}
.pan-verre{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 22%),
    linear-gradient(0deg,rgba(1,41,95,.92) 0%,rgba(2,55,127,.62) 32%,rgba(3,76,174,.08) 62%,rgba(3,76,174,.12) 100%)}
.pan-teinte{position:absolute;inset:0;background:var(--c,#034CAE);mix-blend-mode:color;opacity:.18;transition:opacity .5s}
.pan-reflet{position:absolute;inset:-40%;pointer-events:none;mix-blend-mode:screen;opacity:.0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 48%,rgba(255,245,215,.25) 52%,transparent 60%);
  transform:translateX(var(--sx,-35%));transition:opacity .4s}
.pan-reflet-auto{position:absolute;inset:-40%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.32) 49%,transparent 54%);
  animation:reflet 9s var(--ease) infinite;animation-delay:calc(var(--i)*1.1s)}
@keyframes reflet{0%,70%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.pan-lampe{position:absolute;left:14%;right:14%;top:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  box-shadow:0 0 18px 4px rgba(255,255,255,.55),0 6px 40px 10px rgba(184,205,232,.35);transition:background .4s,box-shadow .4s}
.pan-cadre{position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(255,255,255,.35);transition:border-color .4s,box-shadow .4s}
.pan-num{position:absolute;top:14px;left:16px;font:600 11px/1 var(--f-mono);letter-spacing:.12em;color:rgba(255,255,255,.85)}
.pan-statut{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--f-texte);letter-spacing:.02em;
  color:#fff;background:rgba(1,41,95,.55);border:1px solid rgba(255,255,255,.28);padding:6px 9px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pan-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(12px,1.4vw,20px);transform:translateZ(30px)}
.pan-nom{display:block;font:700 clamp(15px,min(1.35vw,2.3vh),21px)/1.12 var(--f-titre);color:#fff;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(1,41,95,.6)}
.pan-acc{display:block;margin-top:5px;font:500 clamp(12px,min(.95vw,1.65vh),14px)/1.3 var(--f-texte);color:#DCE8F8}
.pan-entrer{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jaune);
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease-out)}
.pan[data-id="agents"] .pan-nom{font-size:clamp(20px,min(2vw,3.4vh),32px)}
.pan[data-id="agents"] .pan-acc{font-size:clamp(13px,min(1.1vw,1.9vh),16px)}
.pan[data-id="agents"] .pan-entrer{opacity:1;transform:none}
.pan[data-id="agents"] .pan-lampe{background:linear-gradient(90deg,transparent,var(--jaune),transparent);box-shadow:0 0 18px 4px rgba(255,181,6,.6),0 6px 50px 14px rgba(255,181,6,.25)}

/* statuts */
.st{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none}
.st-on{background:#5EE0A0;box-shadow:0 0 0 3px rgba(94,224,160,.22)}
.st-test{background:var(--jaune);box-shadow:0 0 0 3px rgba(255,181,6,.25)}
.st-demo{background:var(--b2);box-shadow:0 0 0 3px rgba(184,205,232,.3)}

/* survol / focus : la surface s'allume et s'avance */
.pan::before{content:"";position:absolute;inset:-10% -14%;border-radius:40%;pointer-events:none;opacity:0;transform:translateZ(-30px);
  background:radial-gradient(closest-side,rgba(255,196,60,.55),rgba(255,181,6,.18) 55%,transparent);filter:blur(16px);transition:opacity .5s}
.pan:hover::before,.pan:focus-visible::before{opacity:1}
.pan:hover,.pan:focus-visible{z-index:5}
.pan:focus-visible{outline:none}
.pan:hover .pan-3d,.pan:focus-visible .pan-3d{--lift:64px;box-shadow:0 50px 90px -30px rgba(2,55,127,.75),0 0 0 1px rgba(255,214,120,.9),0 0 60px -6px rgba(255,181,6,.55)}
.pan:hover .pan-img,.pan:focus-visible .pan-img{transform:scale(1.05)}
.pan:hover .pan-reflet,.pan:focus-visible .pan-reflet{opacity:1}
.pan:hover .pan-teinte{opacity:0}
.pan:hover .pan-cadre,.pan:focus-visible .pan-cadre{border-color:rgba(255,214,120,.95);box-shadow:inset 0 0 30px rgba(255,181,6,.25)}
.pan:focus-visible .pan-cadre{box-shadow:inset 0 0 0 3px var(--jaune)}
.pan:hover .pan-lampe,.pan:focus-visible .pan-lampe{background:linear-gradient(90deg,transparent,var(--jaune),transparent);box-shadow:0 0 22px 6px rgba(255,181,6,.7),0 10px 60px 18px rgba(255,181,6,.3)}
.pan:hover .pan-entrer,.pan:focus-visible .pan-entrer{opacity:1;transform:none}
.mur-rig.survol .pan:not(:hover):not(:focus-visible){filter:saturate(.6) brightness(.86)}

/* ouverture d'arrivée (< 1,2 s) */
.intro .titre-bloc > *{opacity:0;transform:translateY(14px)}
.intro .pan{opacity:0}
.intro .pan .pan-3d{transform:translateZ(-160px) rotateX(8deg)}
.pret .titre-bloc > *{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.pret .titre-bloc > :nth-child(2){transition-delay:.08s}
.pret .titre-bloc > :nth-child(3){transition-delay:.16s}
.intro .bandeau,.intro .legende{opacity:0}
.pret .bandeau,.pret .legende{opacity:1;transition:opacity .6s .35s}

/* légende */
.legende{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;padding:6px 0 4px;font-size:12.5px;color:var(--texte-doux);
  margin-top:clamp(36px,9vh,90px)}
.legende::before{content:"";position:absolute;inset:-6px -28px;z-index:-1;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 30px -18px rgba(2,55,127,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.legende p{margin:0}
.legende-aide{font-weight:600;color:var(--profond)}
.clavier{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:6px;background:#fff;border:1px solid var(--b2);font-size:11px}
.legende-statuts{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.legende-statuts li{display:flex;align-items:center;gap:7px}
.legende-statuts .st-on{background:#2FB679}
.legende-note{font-size:11.5px;opacity:.8}

/* ---------- Pénombre bleue à l'ouverture ---------- */
.ouvert .scene{filter:brightness(.42) saturate(1.3) hue-rotate(-6deg) blur(3px);transform:scale(1.04)}
.ouvert .cockpit{filter:brightness(.5) saturate(1.2) blur(2px)}
.ouvert .bandeau{opacity:0;pointer-events:none}
.ouvert .pan:not(.choisi){transform:translateZ(calc(var(--zc,0px) - 220px)) rotateY(var(--ry,0deg));opacity:.55}
.pan.choisi .pan-3d{visibility:hidden}
.pan.choisi{z-index:6}
.pan.arrive .pan-3d{animation:arrive 1.1s var(--ease-out)}
@keyframes arrive{0%{box-shadow:0 0 0 2px var(--jaune),0 0 80px 10px rgba(255,181,6,.7)}100%{box-shadow:0 30px 60px -28px rgba(2,55,127,.65),0 0 0 1px rgba(255,255,255,.55)}}

/* ---------- Vue module ---------- */
.vue{position:fixed;inset:0;z-index:50;color:#fff;overflow:hidden}
.vue[hidden]{display:none}
.vue-media{position:absolute;inset:0;overflow:hidden;background:var(--profond);will-change:clip-path}
.vue-media img{width:100%;height:100%;object-fit:cover;transform-origin:50% 40%}
.vue-media .pan-verre{transition:opacity .45s ease-in .1s}
.vue.voile-on .vue-media .pan-verre{opacity:0;transition:opacity .6s ease-out}
.vue-voile{opacity:0;transition:opacity .4s ease-in;position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(1,41,95,.96) 0%,rgba(2,55,127,.9) 34%,rgba(2,55,127,.62) 58%,rgba(2,55,127,.55) 100%),
    radial-gradient(ellipse 60% 50% at 75% 20%,rgba(255,181,6,.18),transparent 70%)}
.vue-contenu{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 clamp(16px,3.4vw,56px) 32px;display:flex;flex-direction:column}
.vue-barre{flex:none;position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:16px 0;margin-bottom:clamp(6px,2vh,24px)}
.bouton-retour{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 14px;border-radius:999px;font-weight:700;font-size:15px;color:var(--profond);
  background:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.18);transition:transform .2s var(--ease-out),box-shadow .2s}
.bouton-retour:hover{transform:translateX(-2px);box-shadow:0 10px 30px -10px rgba(0,0,0,.4),0 0 0 4px rgba(255,181,6,.55)}
.bouton-retour kbd{font:600 11px/1 var(--f-mono);padding:5px 7px;border-radius:6px;background:var(--b3);color:var(--bleu);margin-left:2px}
.vue-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.vue-fleche{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);transition:background .2s,border-color .2s}
.vue-fleche:hover{background:rgba(255,255,255,.18);border-color:var(--jaune)}
.vue-pos{font:600 12px/1 var(--f-mono);letter-spacing:.1em;color:#C9DAF1;min-width:58px;text-align:center}
.vue-rdv{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;color:var(--profond);background:var(--jaune);
  box-shadow:0 10px 30px -12px rgba(255,181,6,.8)}
.vue-rdv:hover{background:#FFC53A}

.vue-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3.6vw,64px);align-items:center;max-width:1400px;width:100%;margin:auto;padding-bottom:clamp(0px,4vh,48px)}
.vue-texte{padding-top:clamp(0px,2vh,30px)}
.vue-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pill-statut,.pill-illus,.pill-scenario{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--f-texte);padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff}
.pill-illus{color:#DCE8F8;font-weight:500;background:rgba(1,41,95,.5)}
.vue-nom{margin:0;font:800 clamp(32px,3.6vw,56px)/1.02 var(--f-titre);letter-spacing:-.025em;outline:none}
.vue-titre{margin:12px 0 22px;font:600 clamp(17px,1.5vw,22px)/1.35 var(--f-titre);color:var(--creme)}
.vue-bloc{padding:14px 0 14px 18px;border-left:2px solid rgba(255,181,6,.7);margin-bottom:14px;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent)}
.vue-bloc h3{margin:0 0 6px;font:700 12px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jaune)}
.vue-bloc p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:#EAF1FB}
.vue-preuve{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:#BFD2EE;padding:12px 14px;border-radius:12px;background:rgba(1,41,95,.45);border:1px solid rgba(255,255,255,.14)}
.vue-preuve::before{content:"Ce qui est vrai ici · ";font-weight:700;color:#fff}

.vue-demo{position:relative;border-radius:22px;padding:clamp(16px,1.8vw,26px);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.demo-titre{margin:0 0 14px;font:700 12px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jaune);display:flex;align-items:center;gap:10px}
.demo-titre::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,181,6,.6),transparent)}
.demo-note{margin:12px 0 0;font-size:12px;color:#BFD2EE}

.vue.voile-on .vue-voile{opacity:1;transition:opacity .55s ease-out}
/* entrée du contenu */
.vue .vue-barre,.vue .vue-texte > *,.vue .vue-demo{opacity:0;transform:translateY(16px)}
.vue.contenu-in .vue-barre,.vue.contenu-in .vue-texte > *,.vue.contenu-in .vue-demo{opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.vue.contenu-in .vue-texte > :nth-child(2){transition-delay:.04s}
.vue.contenu-in .vue-texte > :nth-child(3){transition-delay:.08s}
.vue.contenu-in .vue-texte > :nth-child(4){transition-delay:.12s}
.vue.contenu-in .vue-texte > :nth-child(5){transition-delay:.16s}
.vue.contenu-in .vue-texte > :nth-child(6){transition-delay:.2s}
.vue.contenu-in .vue-demo{transition-delay:.12s}
.vue.contenu-out .vue-barre,.vue.contenu-out .vue-texte > *,.vue.contenu-out .vue-demo{opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}

/* ---------- Démo Agents IA ---------- */
.ag{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px}
.ag-tete{grid-column:1/-1;display:flex;align-items:center;gap:18px}
.ag-orbe{position:relative;width:150px;height:150px;flex:none}
.ag-orbe canvas{width:100%;height:100%}
.ag-orbe-nom{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font:600 10.5px/1 var(--f-mono);letter-spacing:.14em;color:#DCE8F8}
.ag-cmd{display:flex;flex-direction:column;gap:10px;min-width:0}
.ag-boutons{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:700;font-size:14px;transition:background .2s,transform .2s}
.btn-or{background:var(--jaune);color:var(--profond);box-shadow:0 10px 26px -12px rgba(255,181,6,.9)}
.btn-or:hover{background:#FFC53A}
.btn-verre{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-verre:hover{background:rgba(255,255,255,.2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.pill-scenario{background:rgba(255,181,6,.14);border-color:rgba(255,181,6,.55);color:var(--creme);font-weight:600;line-height:1.3}
.ag-trans{min-height:0;height:clamp(220px,40vh,360px);overflow-y:auto;padding:14px;border-radius:16px;background:rgba(1,41,95,.55);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth}
.ag-vide{margin:auto;text-align:center;font-size:13.5px;color:#9FB8DC;max-width:30ch}
.rep{max-width:92%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45;animation:rep .35s var(--ease-out)}
.rep b{display:block;font:600 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;opacity:.8}
.rep-ia{align-self:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.rep-ia b{color:var(--jaune)}
.rep-hu{align-self:flex-end;background:rgba(99,144,205,.35);border:1px solid rgba(184,205,232,.35)}
.rep.alerte{background:rgba(255,181,6,.2);border-color:var(--jaune);box-shadow:0 0 0 3px rgba(255,181,6,.18),0 0 30px -6px rgba(255,181,6,.6)}
.curseur{display:inline-block;width:7px;height:1em;vertical-align:-2px;background:var(--jaune);margin-left:2px;animation:clign .8s steps(1) infinite}
@keyframes clign{50%{opacity:0}}
@keyframes rep{from{opacity:0;transform:translateY(6px)}}
.ag-cote{display:flex;flex-direction:column;gap:10px;min-width:0}
.ag-detect{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;border:1px dashed rgba(255,255,255,.3);font-size:13px;color:#9FB8DC;transition:all .5s}
.ag-detect i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25);flex:none;transition:all .4s}
.ag-detect.on{border-style:solid;border-color:var(--jaune);background:rgba(255,181,6,.16);color:#fff;box-shadow:0 0 34px -8px rgba(255,181,6,.8)}
.ag-detect.on i{background:var(--jaune);box-shadow:0 0 0 4px rgba(255,181,6,.3),0 0 14px var(--jaune)}
.ag-synth{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.95);color:var(--texte);opacity:.35;transition:opacity .5s}
.ag-synth.on{opacity:1}
.ag-synth h4{margin:0 0 8px;font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu)}
.ag-synth dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:13px;line-height:1.35}
.ag-synth dt{font-weight:700;color:var(--profond)}
.ag-synth dd{margin:0;color:var(--texte-doux)}
.ag-synth dd.vide{color:#A8B8D0}
.ag-synth .note{font:700 13px/1 var(--f-mono);color:var(--bleu)}
.ag-relais{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,var(--jaune),#FFCD55);color:var(--profond);
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease-out)}
.ag-relais.on{opacity:1;transform:none}
.ag-relais svg{flex:none;margin-top:2px}
.ag-relais strong{display:block;font:800 13px/1.2 var(--f-titre);margin-bottom:3px}
.ag-relais span{font-size:13px;line-height:1.4}

/* ---------- Démos des 7 autres modules ---------- */
.dm{position:relative}
.dm-carte{border-radius:16px;background:rgba(255,255,255,.95);color:var(--texte);padding:16px;box-shadow:0 20px 50px -24px rgba(0,0,0,.5)}
.dm-etiq{display:inline-block;margin-top:12px;font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#BFD2EE}
/* Pilot */
.lms{display:grid;grid-template-columns:150px 1fr;gap:14px}
.lms-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lms-nav li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--texte-doux);background:var(--b3)}
.lms-nav li.actif{background:var(--bleu);color:#fff}
.lms-nav li i{width:8px;height:8px;border-radius:2px;background:currentColor;opacity:.6}
.lms-main h4{margin:0 0 4px;font:700 15px/1.2 var(--f-titre);color:var(--profond)}
.lms-main p{margin:0 0 12px;font-size:12.5px;color:var(--texte-doux)}
.lms-video{position:relative;aspect-ratio:16/8;border-radius:12px;overflow:hidden;background:var(--profond)}
.lms-video img{width:100%;height:100%;object-fit:cover;opacity:.75}
.lms-video::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l9 6-9 6z' fill='%23034CAE'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 0 0 8px rgba(255,255,255,.25)}
.lms-prog{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--texte-doux)}
.lms-barre{flex:1;height:8px;border-radius:99px;background:var(--b3);overflow:hidden}
.lms-barre i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--bleu),var(--b1));transition:width 1.6s var(--ease-out)}
.lms-formateur{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:12.5px;padding:8px 10px;border-radius:10px;background:var(--creme);color:var(--profond);font-weight:600}
/* Manager / flux */
.flux{display:flex;flex-direction:column;gap:0;position:relative}
.flux-et{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-weight:600;font-size:14px;transition:all .4s}
.flux-et span{font:600 11px/1 var(--f-mono);color:#9FB8DC;width:22px}
.flux-lien{width:2px;height:14px;margin-left:22px;background:rgba(255,255,255,.25)}
.flux-et.on{background:#fff;color:var(--profond);border-color:var(--jaune);box-shadow:0 0 30px -6px rgba(255,181,6,.7)}
.flux-et.on span{color:var(--bleu)}
/* Automatisations : graphe n8n */
.wf{width:100%;height:auto;display:block}
.wf-lien{fill:none;stroke:rgba(184,205,232,.45);stroke-width:1.6}
.wf-lien.on{stroke:var(--jaune);stroke-width:2.4;filter:drop-shadow(0 0 4px rgba(255,181,6,.8))}
.wf-n rect{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.35);stroke-width:1;transition:fill .3s}
.wf-n text{fill:#fff;font:600 11.5px var(--f-texte)}
.wf-n .wf-t{fill:#9FB8DC;font:500 9.5px var(--f-mono)}
.wf-n.on rect{fill:#fff;stroke:var(--jaune);stroke-width:2}
.wf-n.on text{fill:var(--profond)}
.wf-n.on .wf-t{fill:var(--bleu)}
.wf-lbl{fill:var(--jaune);font:700 10px var(--f-mono);paint-order:stroke;stroke:#163F7E;stroke-width:4px;stroke-linejoin:round}
/* Masterclass */
.mc{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:stretch}
.mc-scene{position:relative;border-radius:14px;overflow:hidden;min-height:220px;background:var(--profond)}
.mc-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.mc-direct{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:7px;font:700 11px/1 var(--f-mono);letter-spacing:.1em;background:#fff;color:var(--profond);padding:7px 9px;border-radius:8px}
.mc-direct i{width:8px;height:8px;border-radius:50%;background:#E5484D;animation:pouls-r 1.6s infinite}
@keyframes pouls-r{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}
.mc-onde{position:absolute;left:12px;right:12px;bottom:12px;height:34px;display:flex;align-items:flex-end;gap:3px}
.mc-onde i{flex:1;background:linear-gradient(0deg,var(--jaune),#fff);border-radius:2px;animation:barre 1.1s ease-in-out infinite alternate;height:30%}
@keyframes barre{to{height:100%}}
.mc-cote{display:flex;flex-direction:column;gap:8px}
.mc-q{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:13px;opacity:0;transform:translateX(10px);animation:entre .6s var(--ease-out) forwards}
.mc-q b{display:block;font:600 10px/1 var(--f-mono);letter-spacing:.1em;color:var(--jaune);margin-bottom:5px;text-transform:uppercase}
.mc-q:nth-child(2){animation-delay:.8s}.mc-q:nth-child(3){animation-delay:1.6s}
@keyframes entre{to{opacity:1;transform:none}}
/* Suivi */
.tl{list-style:none;margin:0;padding:0 0 0 6px;position:relative}
.tl::before{content:"";position:absolute;left:15px;top:12px;bottom:12px;width:2px;background:rgba(255,255,255,.2)}
.tl-w{position:relative}
.tl-prog{position:absolute;z-index:1;left:15px;top:12px;width:2px;height:0;background:linear-gradient(180deg,var(--jaune),#fff);transition:height .7s var(--ease-out)}
.tl li{position:relative;display:flex;gap:14px;align-items:flex-start;padding:7px 0}
.tl li i{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;flex:none;background:var(--profond);border:2px solid rgba(255,255,255,.4);transition:all .4s}
.tl li.on i{background:var(--jaune);border-color:#fff;box-shadow:0 0 16px rgba(255,181,6,.8)}
.tl li.alerte i{background:#fff;border-color:var(--jaune)}
.tl strong{display:block;font-size:14px}
.tl span{font-size:12.5px;color:#BFD2EE}
.tl li{opacity:.5;transition:opacity .4s}
.tl li.on{opacity:1}
/* Personnalisation */
.pf-choix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pf{position:relative;border-radius:14px;overflow:hidden;min-height:44px;aspect-ratio:3/4;background:var(--profond);border:2px solid rgba(255,255,255,.25);text-align:left;transition:border-color .25s,transform .25s var(--ease-out)}
.pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .3s,transform .5s}
.pf::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,41,95,.92),transparent 60%)}
.pf span{position:absolute;left:8px;right:8px;bottom:8px;z-index:1;font:700 12.5px/1.2 var(--f-titre);color:#fff}
.pf:hover{transform:translateY(-2px)}
.pf[aria-pressed="true"]{border-color:var(--jaune);box-shadow:0 0 30px -6px rgba(255,181,6,.8)}
.pf[aria-pressed="true"] img{opacity:1;transform:scale(1.05)}
.pf-res{margin-top:12px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.pf-res .pf-lbl{grid-column:1/-1;font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bleu)}
.pf-res h4{grid-column:1/-1;margin:2px 0;font:800 17px/1.25 var(--f-titre);color:var(--profond)}
.pf-res p{grid-column:1/-1;margin:0;font-size:13px;color:var(--texte-doux)}
.pf-res .pf-cpf{display:inline-block;margin-top:6px;font-weight:600;color:var(--profond);background:var(--creme);padding:6px 9px;border-radius:8px;font-size:12.5px}
.pf-anim{animation:rep .4s var(--ease-out)}
/* Équipe */
.eq{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9.5;background:var(--profond)}
.eq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eq::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,41,95,.85),rgba(1,41,95,.1) 55%)}
.eq .pill-illus{position:absolute;top:10px;right:10px;z-index:2;font-size:11px;padding:6px 9px}
.eq-roles{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.eq-roles span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--profond);font-weight:700;font-size:12.5px;opacity:0;animation:entre .5s var(--ease-out) forwards}
.eq-roles span:nth-child(2){animation-delay:.25s}.eq-roles span:nth-child(3){animation-delay:.5s}
.eq-roles span.or{background:var(--jaune)}
.eq-phrase{margin:12px 0 0;font:700 16px/1.35 var(--f-titre);color:var(--creme)}

/* ---------- Pause et mouvement réduit ---------- */
.pause .scene-rayons i,.pause .scene-poussiere,.pause .pan-reflet-auto,.pause .rdv-point,.pause .mc-onde i,.pause .mc-direct i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .scene-rayons i,.scene-poussiere,.pan-reflet-auto,.rdv-point,.mc-onde i,.mc-direct i,.curseur{animation:none!important}
  .pan-reflet-auto{display:none}
  .pan,.pan-3d,.pan-img,.scene,.cockpit{transition-duration:.2s!important}
  .intro .pan .pan-3d{transform:none}
  .pan:hover .pan-3d,.pan:focus-visible .pan-3d{--lift:0px}
  .mur-rig{transform:none}
  .vue.contenu-in .vue-barre,.vue.contenu-in .vue-texte > *,.vue.contenu-in .vue-demo{transition:opacity .2s!important;transition-delay:0s!important;transform:none}
  .vue .vue-barre,.vue .vue-texte > *,.vue .vue-demo{transform:none}
}

/* ---------- Petits écrans d'ordinateur (1280×720) ---------- */
@media (min-width:761px) and (max-height:780px){
  :root{--bandeau-h:56px}
  .bandeau-logo img{height:28px}
  .surtitre{display:none}
  .mur{height:clamp(280px,60vh,560px)}
  .legende{margin-top:clamp(28px,7vh,70px);font-size:12px}
  .pan-entrer{display:none}
  .pan-statut{font-size:10px;padding:5px 8px}
  .ag-orbe{width:104px;height:104px}
  .ag-trans{height:clamp(180px,38vh,300px)}
}
@media (min-width:761px) and (max-width:1100px){
  .legende-note{display:none}
  .pan-statut{max-width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* contact mobile masqué sur ordinateur */
.contact-mobile{display:none}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  :root{--bandeau-h:60px}
  body{overflow:auto;overflow-x:hidden;background:var(--b3)}
  body.ouvert{overflow:hidden}
  .scene{position:absolute;height:520px;bottom:auto}
  .scene-fond{inset:0;background-image:url(medias/acte-1-portail-mobile.webp);background-position:center 30%;opacity:.95;transform:none;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);mask-image:linear-gradient(180deg,#000 55%,transparent 98%)}
  .scene-pilastres,.scene-sol,.scene-voute{display:none}
  .scene-rayons i{width:28vw}
  .bandeau{position:absolute;background:none}
  .bandeau-logo{padding:5px 9px}
  .bandeau-logo img{height:28px}
  .lien-formations{display:none}
  .bouton-rdv{padding:0 14px;min-height:44px;font-size:13.5px}
  .rdv-long{display:none}.rdv-court{display:inline}
  .bouton-pause{width:44px;height:44px}
  .cockpit{height:auto;min-height:100vh;padding:calc(var(--bandeau-h) + 150px) 16px 96px}
  .titre-bloc{margin:0 0 18px;padding:18px 8px 0;text-align:center;position:relative}
  .titre-bloc::before{content:"";position:absolute;inset:-40px -8px -10px;z-index:-1;background:radial-gradient(ellipse 70% 70% at 50% 60%,rgba(255,255,255,.92),rgba(255,255,255,0) 75%)}
  .surtitre{font-size:10px;gap:8px}
  h1{font-size:clamp(28px,8.4vw,36px)}
  .sous-titre{font-size:15px}
  .mur-zone{display:block;padding:0}
  .mur{width:100%;height:auto;perspective:none;-webkit-box-reflect:unset}
  .mur-rig{transform:none!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;grid-template-areas:none;gap:10px}
  .pan{grid-area:auto!important;transform:none!important;aspect-ratio:4/5}
  .pan[data-id="agents"],.pan[data-id="equipe"]{grid-column:1/-1!important;aspect-ratio:16/10}
  .pan[data-id="agents"]{order:-1}
  .pan[data-id="equipe"]{order:10}
  .pan-3d{border-radius:16px;transform:none!important}
  .pan::before{display:none}
  .pan-img img{transform:none}
  .pan-statut{top:8px;right:8px;font-size:10px;padding:5px 7px;max-width:calc(100% - 44px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pan-num{top:12px;left:12px;font-size:10px}
  .pan-txt{padding:12px}
  .pan-nom{font-size:16px}
  .pan-acc{font-size:12.5px}
  .pan[data-id="agents"] .pan-nom{font-size:24px}
  .pan[data-id="agents"] .pan-acc{font-size:14px}
  .pan-entrer{display:none}
  .pan[data-id="agents"] .pan-entrer{display:inline-flex}
  .pan:hover .pan-3d{--lift:0px}
  .mur-rig.survol .pan:not(:hover){filter:none}
  .legende{margin-top:18px;flex-direction:column;gap:10px;text-align:center}
  .legende::before{inset:-10px 0;border-radius:18px}
  .ouvert .scene{transform:none}
  .legende-aide{display:none}
  .legende-statuts{flex-wrap:wrap;justify-content:center;gap:12px}
  .intro .pan .pan-3d{transform:translateY(20px)!important}
  .contact-mobile{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(184,205,232,.8);transition:transform .5s var(--ease)}
  .contact-mobile a{flex:1;display:grid;place-items:center;min-height:48px;border-radius:14px;font-weight:700;font-size:14.5px;text-decoration:none}
  .cm-formations{color:var(--profond);background:var(--b3);border:1px solid var(--b2)}
  .cm-rdv{color:#fff;background:linear-gradient(135deg,var(--bleu),var(--profond))}
  .ouvert .contact-mobile{transform:translateY(110%)}
  .ouvert .pan:not(.choisi){transform:scale(.94)!important}

  .vue-voile{background:linear-gradient(180deg,rgba(2,55,127,.55) 0%,rgba(1,41,95,.94) 34%,rgba(1,41,95,.97) 100%)}
  .vue-contenu{padding:0 16px 28px}
  .vue-barre{gap:8px;padding:10px 0;margin:0 -16px 6px;padding-left:12px;padding-right:12px;background:linear-gradient(180deg,rgba(1,41,95,.97) 70%,rgba(1,41,95,0))}
  .bouton-retour{font-size:14px;padding:0 14px 0 10px}
  .bouton-retour kbd{display:none}
  .vue-rdv{display:none}
  .vue-pos{min-width:44px;font-size:11px}
  .vue-grille{grid-template-columns:1fr;gap:20px}
  .vue-texte{padding-top:22vh}
  .vue-nom{font-size:34px}
  .vue-titre{font-size:17px}
  .vue-demo{padding:14px;border-radius:18px}
  .ag{grid-template-columns:1fr}
  .ag-tete{flex-direction:column;align-items:stretch;gap:12px}
  .ag-orbe{width:112px;height:112px;margin:0 auto}
  .ag-trans{height:300px}
  .lms{grid-template-columns:1fr}
  .lms-nav{flex-direction:row;flex-wrap:wrap}
  .lms-nav li{flex:1 1 40%}
  .mc{grid-template-columns:1fr}
  .pf-choix{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf{aspect-ratio:4/3}
}
@media (max-width:420px){
  .vue-pos{display:none}
  .vue-nav{gap:6px}
}
@media (max-width:380px){
  .bouton-rdv .rdv-point{display:none}
  .surtitre .sep,.surtitre span:last-child{display:none}
}

/* WordPress : barre d'administration (visiteurs connectes seulement) */
.admin-bar .bandeau{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:760px){.admin-bar .bandeau{top:0}}