/* ---------------------------------------------------------------------------
 * OxygenStage : page de présentation (oxygenstage.live), version de travail.
 * Construction reprise d'oxygenevent.fr (en-tête, héros à deux captures, chapitres, captures annotées, appel à l'action, pied de page).
 * Charte de la famille Oxygen : Poppins, bleus #326275 / #5797BB / #1AB2F0, marine #12202b (comme oxygencam.com et oxygencast.com).
 * Accent OxygenStage : le violet du logo (#493694), éclairci sur fond sombre.
 * Fonds dessinés au trait (images/fonds/*.svg) générés par OXYGENSTAGE SOURCES/# CLAUDE DEV/fonds/gen-fonds.js.
 * Boutons : rectangles aux bords arrondis, jamais en ovale.
 * Poppins auto-hébergée (dossier fonts/) : aucune ressource tierce. Aucun style en ligne dans la page.
 * ------------------------------------------------------------------------- */

@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/poppins-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/poppins-latin-ext-400.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins-latin-ext-700.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --primary:#326275; --secondary:#5797BB; --accent:#1AB2F0;
  --stage:#493694; --stage-d:#5a47b6; --stage-m:#7a68d8; --stage-l:#b5a8f4; --stage-soft:#ece9fb;
  --dark:#12202b; --ink:#212121; --muted:rgba(33,33,33,.68);
  --soft:#eff2f9; --line:#dbe3ee; --white:#fff;
  --grad:linear-gradient(to right,#5797BB,#326275);
  --grad-stage:linear-gradient(135deg,#7a68d8,#493694);
  --radius:20px; --shadow:0 10px 30px rgba(33,33,33,.10); --shadow-lg:0 24px 60px rgba(10,30,45,.28);
  --maxw:1280px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; font-family:"Poppins",system-ui,sans-serif; font-size:1.0625rem; line-height:1.65; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
img,svg { max-width:100%; }
img { display:block; height:auto; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--accent); }
h1,h2,h3,h4 { margin:0; line-height:1.15; font-weight:700; text-wrap:balance; }
p,li { text-wrap:pretty; }
p { margin:0 0 1em; }
ul,ol { margin:0; padding:0; list-style:none; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; border-radius:8px; z-index:100; }
.skip:focus { left:8px; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.draft { margin:0; padding:6px 16px; background:var(--stage); color:#fff; text-align:center; font-size:.82rem; font-weight:600; letter-spacing:.02em; }

/* ---------- boutons : rectangles aux bords arrondis ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; border-radius:12px; padding:.8em 1.7em; font:inherit; font-weight:700; font-size:1rem; line-height:1.2; white-space:nowrap; cursor:pointer; border:2px solid transparent; transition:box-shadow .25s, background-position .45s ease, background .15s, color .15s, padding .3s ease-in-out; }
/* dégradé sur toute la surface du bouton (origin border-box) ; au survol il glisse */
.btn-primary { background:linear-gradient(to right,#5797BB,#326275,#5797BB); background-size:200% 100%; background-position:0 0; background-origin:border-box; color:#fff; box-shadow:0 6px 18px rgba(50,98,117,.35); }
.btn-primary:hover { color:#fff; background-position:100% 0; box-shadow:0 10px 24px rgba(50,98,117,.45); }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.btn-ghost:hover { background:#fff; color:var(--primary); }
.btn-dark-ghost { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-dark-ghost:hover { background:var(--primary); color:#fff; }
.btn-sm { padding:.55em 1.3em; font-size:.95rem; }

/* ---------- en-tête (comme oxygenevent.fr : collant, il se compacte au défilement) ---------- */
.header { position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.08); transition:box-shadow .3s ease-in-out; }
/* ligne de l'en-tête calée comme sur oxygenstream.fr : jusqu'à 1800 px de large, marges de 24 px (16 px sous 768 px) ; le contenu des pages ne change pas */
.header .container { max-width:1800px; }
@media (max-width:767px) { .header .container { padding-left:16px; padding-right:16px; } }
.header-in { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:12px; padding-bottom:12px; transition:padding .3s ease-in-out; }
/* bloc de marque : le symbole, puis le logo avec slogan ; --lh = hauteur du bloc, les mêmes valeurs que le logo d'oxygenevent.fr.
   Le symbole a la hauteur du bloc ; le SVG du texte garde 9 unités vides autour des lettres (contenu 46,5 sur 61,66) :
   on l'agrandit d'autant et des marges négatives retirent ce vide, pour que lettres et slogan occupent toute la hauteur --lh. */
.logo { flex:none; line-height:0; display:inline-flex; align-items:center; gap:calc(var(--lh) * .2); --lh:clamp(22px,calc((100vw - 192px) / 7.1),40px); }
.logo img { width:auto; transition:height .3s ease-in-out, margin .3s ease-in-out; }
.logo .logo-text { height:calc(var(--lh) * 1.326); margin:calc(var(--lh) * -.189) calc(var(--lh) * -.185) calc(var(--lh) * -.137) calc(var(--lh) * -.198); }
/* le SVG anglais est déjà recadré au ras des lettres : ni agrandissement ni marges négatives */
.logo .logo-text[src*="-en-"] { height:var(--lh); margin:0; }
/* symbole rond un peu plus grand que le bloc pour peser autant que le symbole carré d'OxygenEvent, sans agrandir le bandeau */
.logo .logo-mark { height:calc(var(--lh) * 1.16); margin:calc(var(--lh) * -.08) 0; }
.nav { display:none; }
.nav ul { display:flex; gap:clamp(14px,1.2vw,24px); align-items:center; }
.nav a { color:var(--ink); font-size:.95rem; white-space:nowrap; padding:6px 0; }
.nav a:hover { color:var(--stage-d); }
.nav a[aria-current] { color:var(--stage-d); text-decoration:underline; text-decoration-color:var(--stage-m); text-decoration-thickness:2px; text-underline-offset:7px; }
.header-cta { display:flex; align-items:center; gap:clamp(8px,1vw,14px); }
.header-cta .btn { display:none; }
.header-cta a.btn-dark-ghost[aria-current] { background:var(--primary); color:#fff; }
.lang { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:.85rem; line-height:1; flex:none; }
.lang a, .lang b { display:block; padding:8px 12px; }
.lang b { background:var(--grad); color:#fff; }
.lang a { color:var(--ink); }
.lang a:hover { background:var(--soft); color:var(--primary); }
/* sur téléphone, FR/EN reste visible juste avant le burger, comme sur oxygenevent.fr et oxygenstream.fr ; resserré sur les petits écrans */
@media (max-width:379px) { .lang a, .lang b { padding:7px 9px; } .header-cta { gap:6px; } .header-in { gap:8px; } }
.burger { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; border-radius:10px; }
.burger span { display:block; width:24px; height:2px; background:var(--ink); position:relative; transition:background .2s; }
.burger span::before,.burger span::after { content:""; position:absolute; left:0; width:24px; height:2px; background:var(--ink); transition:transform .2s; }
.burger span::before { top:-8px; } .burger span::after { top:8px; }
.burger[aria-expanded="true"] span { background:transparent; }
.burger[aria-expanded="true"] span::before { transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform:translateY(-8px) rotate(-45deg); }
@media (min-width:640px) { .header-cta .btn-primary { display:inline-flex; } }
@media (min-width:860px) { .header-cta .btn-dark-ghost { display:inline-flex; } }
@media (min-width:768px) { .header-in { padding-top:16px; padding-bottom:16px; } .logo { --lh:44px; } }
@media (min-width:1024px) { .header-in { padding-top:20px; padding-bottom:20px; } .logo { --lh:clamp(42px,2.9vw,50px); } }
@media (min-width:1480px) { .nav { display:block; } .burger { display:none; } .nav a { font-size:15px; } }
@media (min-width:1700px) { .nav a { font-size:17px; } .nav ul { gap:26px; } }
.header.header-compact { box-shadow:0 2px 8px rgba(0,0,0,.12); }
.header.header-compact .header-in { padding-top:6px; padding-bottom:6px; }
.header.header-compact .logo { --lh:clamp(24px,calc((100vw - 192px) / 5.4),40px); }
@media (max-width:767px) { .header.header-compact .logo { --lh:clamp(22px,calc((100vw - 192px) / 7.1),40px); } }
.header.header-compact .header-cta .btn { padding-top:5px; padding-bottom:5px; }

/* menu burger : panneau qui glisse depuis la droite, voile sombre, croix */
.mobile-overlay { position:fixed; inset:0; background:rgba(18,32,43,.45); z-index:55; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.mobile-overlay.open { opacity:1; visibility:visible; }
.mobile-panel { position:fixed; top:0; right:0; height:100%; width:85%; max-width:384px; z-index:60; background:radial-gradient(90% 60% at 100% 0%, rgba(122,104,216,.28), transparent 70%) no-repeat, var(--dark); color:#fff; padding:20px 24px 32px; overflow-y:auto; transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility .3s; box-shadow:-10px 0 30px rgba(0,0,0,.25); }
.mobile-panel.open { transform:translateX(0); visibility:visible; }
.mp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.mp-logo { display:inline-flex; align-items:center; gap:8px; line-height:0; }
.mp-logo img { width:auto; display:block; }
.mp-logo .logo-mark { height:46px; }
.mp-logo .logo-text { height:30px; }
.mp-close { background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; padding:2px 10px; border-radius:10px; }
.mp-close:focus-visible { outline:2px solid var(--stage-l); }
.mobile-panel a:not(.btn) { display:block; padding:13px 0; color:#fff; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.16); }
.mobile-panel a.mp-logo { padding:0; border-bottom:0; display:inline-flex; }
.mobile-panel a:not(.btn):hover { color:var(--stage-l); }
.mobile-panel a:not(.btn)[aria-current] { padding:13px 8px 13px 10px; margin-left:-10px; border-radius:4px; background:rgba(255,255,255,.1); box-shadow:inset 3px 0 var(--stage-m); font-weight:600; }
.mobile-panel .btn { margin-top:18px; width:100%; }
.mobile-panel .btn-primary { background:#fff; color:var(--primary); box-shadow:none; }
.mobile-panel .btn-primary:hover { background:#eaf4fb; color:var(--primary); }
.mobile-panel .btn-dark-ghost { border-color:#fff; color:#fff; margin-top:12px; }
.mobile-panel .btn-dark-ghost:hover, .mobile-panel .btn-dark-ghost[aria-current] { background:#fff; color:var(--primary); }
body.menu-open { overflow:hidden; }
@media (min-width:1480px) { .mobile-panel, .mobile-overlay { display:none; } }

/* ---------- héros : pas de photo, des fonds dessinés au trait ----------
   Calques : la régie (à gauche) et la scène (à droite) en ::before / ::after, fondues vers le titre et vers le bas (mask-image) ;
   en dessous, les vagues de la famille Oxygen et deux halos (bleu en haut à droite, violet en bas à gauche) sur le marine. */
.hero { position:relative; color:#fff; overflow:hidden;
  background:url("../images/fonds/vagues.svg") center bottom/max(100%,1600px) auto no-repeat,
    radial-gradient(55% 60% at 84% 6%, rgba(63,127,166,.42), transparent 70%),
    radial-gradient(48% 50% at 10% 92%, rgba(122,104,216,.22), transparent 70%),
    var(--dark);
  --deco:clamp(380px, calc((100vw - 900px) / 2 + 150px), 620px); }
.hero::before, .hero::after { content:""; position:absolute; top:clamp(6px,1.6vw,28px); width:var(--deco); aspect-ratio:640 / 560; background:no-repeat 0 0 / 100% 100%; opacity:.88; pointer-events:none; }
.hero::before { left:0; background-image:url("../images/fonds/regie.svg");
  -webkit-mask-image:linear-gradient(to right,#000 56%,transparent 96%), linear-gradient(to bottom,#000 70%,transparent 97%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 56%,transparent 96%), linear-gradient(to bottom,#000 70%,transparent 97%); mask-composite:intersect; }
.hero::after { right:0; background-image:url("../images/fonds/scene.svg");
  -webkit-mask-image:linear-gradient(to left,#000 54%,transparent 94%), linear-gradient(to bottom,#000 72%,transparent 97%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 54%,transparent 94%), linear-gradient(to bottom,#000 72%,transparent 97%); mask-composite:intersect; }
/* tablette et téléphone : les deux dessins forment un bandeau en haut du héros, au-dessus du titre */
@media (max-width:1179px) {
  .hero { --deco:min(50vw, 380px); }
  .hero::before, .hero::after { top:0; opacity:.8; }
  .hero::before { -webkit-mask-image:linear-gradient(to right,#000 60%,transparent 100%), linear-gradient(to bottom,#000 52%,transparent 96%); mask-image:linear-gradient(to right,#000 60%,transparent 100%), linear-gradient(to bottom,#000 52%,transparent 96%); }
  .hero::after { -webkit-mask-image:linear-gradient(to left,#000 60%,transparent 100%), linear-gradient(to bottom,#000 52%,transparent 96%); mask-image:linear-gradient(to left,#000 60%,transparent 100%), linear-gradient(to bottom,#000 52%,transparent 96%); }
  .hero.hero2 .hero-in { padding-top:calc(var(--deco) * .875 * .66); }
}
.hero-in { position:relative; z-index:1; text-align:center; }
.hero .kicker { color:var(--stage-l); }
.hero h1 em { font-style:normal; color:var(--stage-l); }
.hero .lead { margin:0 auto; font-size:clamp(1.05rem,1.6vw,1.25rem); color:rgba(255,255,255,.92); }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.kicker { text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:.82rem; color:var(--stage-d); margin-bottom:14px; }
/* deux captures côte à côte dès l'arrivée (vous / vos clients) et les 16 fonctions en pastilles numérotées */
.hero.hero2 { padding-top:0; padding-bottom:clamp(20px,3vw,36px); }
.hero2 .hero-in { padding-top:clamp(34px,4.6vw,64px); }
.hero2 h1 { font-size:clamp(2.1rem,4.4vw,3.6rem); letter-spacing:-.02em; margin-bottom:16px; }
.hero2 .lead { max-width:780px; margin-bottom:24px; }
.hero2 .hero-cta { margin-bottom:clamp(26px,3.8vw,42px); }
/* trois captures : vous (Super Admin), vos clients (leur admin), les spectateurs (page de live) */
.hero-trio { display:grid; grid-template-columns:1fr; gap:26px; max-width:1240px; margin:0 auto clamp(24px,3.6vw,38px); text-align:left; }
@media (min-width:760px) { .hero-trio { grid-template-columns:repeat(3,1fr); gap:18px; align-items:end; } } /* captures alignées même si une légende tient sur une ligne */
@media (min-width:1100px) { .hero-trio { gap:26px; } }
.hero-fig { margin:0; min-width:0; }
.hero-lab { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:0 0 10px; font-size:.95rem; color:rgba(255,255,255,.92); font-weight:600; }
.hero-lab b { background:var(--stage-l); color:#1c1442; padding:3px 10px; border-radius:6px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.hero-fig .shot { box-shadow:0 24px 60px rgba(0,0,0,.45); }
.hero-fig .pw { aspect-ratio:1.5; overflow:hidden; }
.hero-fig .pw > img { height:100%; object-fit:cover; object-position:top left; }
.chips16 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:1240px; margin:0 auto 4px; }
@media (min-width:900px) { .chips16 { grid-template-columns:repeat(4,1fr); } }
.chips16 li { display:block; }
.chips16 a { display:flex; align-items:center; gap:9px; height:100%; padding:9px 12px 9px 11px; border-radius:10px; color:#fff; font-size:.9rem; font-weight:600; line-height:1.2; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:background .2s, border-color .2s; }
.chips16 a:hover, .chips16 a:focus-visible { background:rgba(255,255,255,.16); border-color:rgba(181,168,244,.55); color:#fff; }
.chips16 .n { flex:none; color:var(--stage-l); font-weight:700; font-size:.78rem; font-variant-numeric:tabular-nums; }
.chips16 svg { width:20px; height:20px; stroke:var(--stage-l); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
@media (max-width:560px) { .chips16 a { font-size:.82rem; padding:8px 9px; gap:7px; } .chips16 svg { width:18px; height:18px; } }

/* ---------- sections ---------- */
section { padding:clamp(56px,8vw,104px) 0; }
.sec-head { max-width:860px; margin-bottom:clamp(30px,5vw,52px); }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
h2 { font-size:clamp(1.8rem,3.6vw,3.1rem); letter-spacing:-.015em; margin-bottom:16px; }
.sec-head p { color:var(--muted); font-size:1.15rem; }
/* titres de chapitre et de section : nettement plus grands que les petits titres des sous-parties */
.sec-head p.kicker { color:var(--stage-d); font-size:clamp(1.1rem,2vw,1.5rem); font-weight:700; letter-spacing:.16em; margin-bottom:18px; }
.soft { background:var(--soft); }
.dark { background:radial-gradient(70% 90% at 85% 0%, rgba(63,127,166,.28), transparent 65%) no-repeat, var(--dark); color:#fff; }
.dark h2,.dark h3 { color:#fff; }
.dark .kicker, .dark .sec-head p.kicker { color:var(--stage-l); }
.dark .sec-head p,.dark p,.dark li { color:rgba(255,255,255,.82); }
.dark a { color:#9fd0ec; }
.chapter { padding-bottom:0; }
.chapter .sec-head { margin-bottom:0; }
.chapter .sec-head p:last-child { margin-bottom:0; }
.chapter + section { padding-top:clamp(36px,5vw,64px); }

/* ---------- cartes ---------- */
.grid { display:grid; gap:24px; }
.g2,.g3,.g4 { grid-template-columns:1fr; }
@media (min-width:640px) { .g2,.g3,.g4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .g3 { grid-template-columns:repeat(3,1fr); } .g4 { grid-template-columns:repeat(4,1fr); } }
.card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 28px; border:1px solid rgba(0,0,0,.04); }
.card h3 { font-size:1.3rem; margin:16px 0 8px; }
.card p { color:var(--muted); margin:0; font-size:1rem; }
.ico { width:54px; height:54px; border-radius:14px; background:var(--grad-stage); display:flex; align-items:center; justify-content:center; }
.ico svg { width:28px; height:28px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.more { display:inline-block; margin-top:14px; font-size:.98rem; }
p.more { color:var(--muted); font-size:.95rem; }

/* « Pour qui » : une carte par métier, coiffée de son dessin (la régie, la scène) */
.pq-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.pq-img { position:relative; aspect-ratio:640 / 400; background-color:var(--dark); background-repeat:no-repeat; }
.pq-img::after { content:""; position:absolute; inset:auto 0 0; height:38%; background:linear-gradient(to bottom,rgba(18,32,43,0),var(--dark)); }
.pq-regie { background-image:url("../images/fonds/regie.svg"), radial-gradient(70% 80% at 30% 20%, rgba(63,127,166,.35), transparent 70%); background-position:center 40%, 0 0; background-size:cover, 100% 100%; }
.pq-scene { background-image:url("../images/fonds/scene.svg"), radial-gradient(70% 80% at 60% 10%, rgba(122,104,216,.3), transparent 70%); background-position:center top, 0 0; background-size:cover, 100% 100%; }
.pq-txt { padding:26px 28px 30px; }
.pq-txt h3 { margin:0 0 10px; }
.tag { display:inline-block; margin:0 0 12px; padding:4px 10px; border-radius:6px; background:var(--stage-soft); color:var(--stage-d); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* « Vous et vos clients » : les trois niveaux, reliés par une flèche */
.levels { display:grid; grid-template-columns:1fr; gap:34px; max-width:1120px; margin:clamp(30px,4vw,48px) auto 0; }
@media (min-width:900px) { .levels { grid-template-columns:repeat(3,1fr); gap:46px; } }
.levels li { position:relative; }
.levels a { display:flex; flex-direction:column; gap:6px; height:100%; padding:24px 24px 22px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.04); color:var(--ink); transition:transform .2s, box-shadow .2s; }
.levels a:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(33,33,33,.14); color:var(--ink); }
.lv-ico { width:48px; height:48px; margin-bottom:8px; border-radius:14px; background:var(--grad-stage); display:flex; align-items:center; justify-content:center; }
.lv-ico svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lv-who { color:var(--stage-d); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.levels b { font-size:1.25rem; line-height:1.25; }
.lv-txt { color:var(--muted); font-size:.98rem; }
.levels li + li::before { content:""; position:absolute; left:50%; top:-24px; width:14px; height:14px; margin-left:-7px; border-right:2.5px solid var(--stage-m); border-bottom:2.5px solid var(--stage-m); transform:rotate(45deg); }
@media (min-width:900px) { .levels li + li::before { left:-30px; top:50%; margin:-7px 0 0; transform:rotate(-45deg); } }

/* ---------- blocs texte + capture ---------- */
.split { display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media (min-width:960px) { .split { grid-template-columns:1fr 1.15fr; } .split.rev { grid-template-columns:1.15fr 1fr; } .split.rev > :first-child { order:2; } }
.split h2 { font-size:clamp(1.7rem,3vw,2.5rem); }
.split > div { min-width:0; }
/* longue colonne de captures : le texte reste à l'écran pendant qu'on fait défiler les images */
@media (min-width:960px) and (min-height:760px) { .split.tall { align-items:start; } .split.tall > div:first-child { position:sticky; top:118px; } }
.ticks li { position:relative; padding-left:32px; margin:10px 0; }
.ticks li::before { content:""; position:absolute; left:0; top:.45em; width:18px; height:18px; border-radius:50%; background:var(--grad-stage); }
.ticks li::after { content:""; position:absolute; left:6px; top:.62em; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ticks b { color:var(--ink); }
.dark .ticks b { color:#fff; }
.pills { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.pill { background:var(--soft); color:var(--primary); border-radius:10px; padding:6px 16px; font-size:.92rem; font-weight:700; }
.dark .pills { justify-content:center; margin-top:28px; }
.dark .pill { background:rgba(255,255,255,.08); color:#d8d1fb; border:1px solid rgba(181,168,244,.22); }

/* ---------- fenêtre de navigateur (captures) ---------- */
.shot { position:relative; border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.12); box-shadow:var(--shadow-lg); }
.shot::before { content:""; display:block; height:26px; background:linear-gradient(#f5f7fa,#e5eaf0); border-bottom:1px solid #d3dbe5; }
.shot::after { content:""; position:absolute; left:12px; top:9px; width:8px; height:8px; border-radius:50%; background:#f87171; box-shadow:14px 0 0 #fbbf24,28px 0 0 #34d399; }
.shot.bare::before,.shot.bare::after { display:none; }
.shot img { width:100%; }
.shot.a4 { width:min(62%,340px); margin-left:auto; margin-right:auto; }
.split .shot + .shot { margin-top:22px; }
.cap { margin:12px 0 0; font-size:.9rem; color:var(--muted); text-align:center; }
.dark .cap { color:rgba(255,255,255,.6); }
.cap + .shot, .cap + .phones, .cap + .phone, .cap + .tm-states { margin-top:28px; }
.phones { display:flex; gap:18px; justify-content:center; align-items:flex-start; }
.phone { width:min(220px,42%); border-radius:30px; border:9px solid #14202b; overflow:hidden; background:#fff; box-shadow:var(--shadow-lg); }
.shot img, .phone img { cursor:zoom-in; }

/* captures annotées : point sur la zone visée, trait, étiquette numérotée dans la marge de l'image (repris d'oxygenevent.fr) ;
   pastilles et traits au violet d'OxygenStage */
.callout { position:relative; container-type:inline-size; padding-top:22px; padding-bottom:22px; }
.callout > .shot { overflow:visible; border-radius:14px; }
.callout .shot::before { border-radius:13px 13px 0 0; }
.pw { position:relative; display:block; }
.pw > img { display:block; width:100%; height:auto; border-radius:0 0 13px 13px; }
.ld { position:absolute; top:0; height:100%; max-width:none; overflow:visible; pointer-events:none; z-index:2; } /* max-width:none : le calque des traits déborde dans les marges des étiquettes (sinon img,svg le bride à l'image) */
.ld line { stroke:var(--stage-m); }
.ld circle { fill:var(--stage-m); }
.co { position:absolute; transform:translateY(-50%); display:flex; align-items:center; gap:.5em; font-size:clamp(10.5px,1.75cqw,28px); line-height:1.25; color:#1f2937; z-index:3; pointer-events:none; }
.co.cl { flex-direction:row-reverse; text-align:right; }
.co b { flex:none; width:1.9em; height:1.9em; border-radius:50%; background:var(--stage-m); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9em; font-weight:700; box-shadow:0 0 0 .2em rgba(122,104,216,.28); }
.co i { font-style:normal; font-weight:600; min-width:0; }
.tg { display:none; position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--stage-m); color:#fff; font-size:.72rem; font-weight:700; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(122,104,216,.35),0 2px 6px rgba(0,0,0,.3); z-index:3; pointer-events:none; }
.callout .legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; padding:0; list-style:none; }
.callout + .cap { margin-top:-10px; }
.cap + .callout { margin-top:6px; }
@media (max-width:620px) {
  .callout.callout { padding:0; }
  .co, .ld, .tg, .callout .legend { display:none; }
  .callout + .cap { margin-top:12px; } .cap + .callout { margin-top:28px; }
}

/* agrandissement d'une capture au clic (assets/site.js) */
.lb { position:fixed; inset:0; z-index:300; background:rgba(8,16,28,.9); display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:3vh 2vw; cursor:zoom-out; }
.lb-box { width:min(96vw,2100px); background:#fff; border-radius:12px; padding:1.6% 1.2%; box-shadow:0 20px 60px rgba(0,0,0,.5); margin:auto; }
.lb-box.lb-plain { width:min(96vw,1560px); }
.lb-box.lb-plain .shot { margin:0; }
.lb-box.lb-phone { width:min(92vw,520px); padding:0; background:transparent; box-shadow:none; }
.lb-box .callout { margin:0; }
.lb-box .shot { box-shadow:none; }
.lb-box img { width:100%; height:auto; cursor:zoom-out; }
.lb-x { position:fixed; top:14px; right:18px; z-index:301; width:44px; height:44px; border:0; border-radius:10px; background:#fff; color:#212121; font-size:1.7rem; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.4); }
@media (prefers-reduced-motion:no-preference) { .lb { animation:lbin .15s ease-out; } @keyframes lbin { from { opacity:0; } to { opacity:1; } } }

/* Timer : quatre états de l'écran de l'intervenant, en vignettes numérotées */
.tm-states { display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; }
.tm-st { margin:0; min-width:0; }
.tm-st .cap { text-align:left; font-size:.88rem; line-height:1.4; }
.tm-st .cap .n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-right:8px; border-radius:50%; background:var(--stage-m); color:#fff; font-size:.75rem; font-weight:700; vertical-align:1px; }
.tmd { position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:var(--stage-m); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(122,104,216,.4),0 2px 6px rgba(0,0,0,.4); z-index:2; pointer-events:none; }
.tmd.p1 { left:7%; top:27%; }
.tmd.p4 { left:95%; top:83%; }
@media (max-width:560px) { .tm-states { grid-template-columns:1fr; } }

/* pages pour l'antenne : deux rangées de vignettes 16/9 avec leur légende */
.rg-sub { margin:34px 0 14px; text-align:center; font-size:1.05rem; font-weight:700; }
.rg-grid .shot { margin:0; box-shadow:0 18px 40px rgba(0,0,0,.4); }
.rg-grid b { color:inherit; }

/* ---------- chapitre « Côté régie » : la salle vue depuis la régie, dessinée au trait ---------- */
.salle { overflow:hidden; background:radial-gradient(60% 70% at 50% 18%, rgba(122,104,216,.2), transparent 70%) no-repeat, radial-gradient(70% 90% at 85% 0%, rgba(63,127,166,.24), transparent 65%) no-repeat, var(--dark); }
.salle-img { width:max(100%,880px); max-width:1600px; margin:clamp(18px,3vw,40px) 0 0 50%; transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent), linear-gradient(to bottom,#000 78%,transparent); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent), linear-gradient(to bottom,#000 78%,transparent); mask-composite:intersect; }

/* ---------- étapes (les 16 fonctions, démarrer) ---------- */
.steps { counter-reset:s; display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:720px) { .steps { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px) { .steps { grid-template-columns:repeat(4,1fr); } }
.step { position:relative; padding:26px 24px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.04); }
.step::before { counter-increment:s; content:counter(s); display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--grad-stage); color:#fff; font-weight:700; margin-bottom:14px; }
.step h3 { font-size:1.2rem; margin-bottom:6px; }
.step h3 a { color:var(--ink); }
.step h3 a:hover { color:var(--stage-d); }
.step p { margin:0; color:var(--muted); font-size:.98rem; }

/* cas d'usage : chaque carte prend la couleur de sa page sur oxygenevent.fr (filet en haut, icône) */
#cas-usage .card { display:flex; flex-direction:column; }
.ucc { border-top:4px solid var(--ucc); }
.ucc .ico { background:var(--ucc-grad); }
.ucc-webinaire { --ucc:#c96f9b; --ucc-grad:linear-gradient(135deg,#d98bb0,#a8517c); }
.ucc-ag { --ucc:#d4a22a; --ucc-grad:linear-gradient(135deg,#e2b443,#9a7413); }
.ucc-qa { --ucc:#2bb59a; --ucc-grad:linear-gradient(135deg,#2bb59a,#16695c); }
.ucc-vote { --ucc:#8e63d9; --ucc-grad:linear-gradient(135deg,#9a72e0,#5e3aa6); }

/* ---------- questions fréquentes ---------- */
.faq { max-width:900px; margin:0 auto; }
.faq details { background:#fff; border-radius:16px; box-shadow:var(--shadow); margin-bottom:14px; border:1px solid rgba(0,0,0,.04); }
.faq summary { cursor:pointer; list-style:none; padding:20px 56px 20px 24px; font-weight:700; position:relative; font-size:1.08rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--stage-m); transition:transform .2s; }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq details p { padding:0 24px 22px; margin:0; color:var(--muted); }

/* ---------- appel à l'action : dégradé bleu pétrole → violet, la scène dessinée au trait blanc ---------- */
.cta { position:relative; color:#fff; text-align:center; overflow:hidden; background:url("../images/fonds/scene-cta.svg") center 40% / cover no-repeat, linear-gradient(120deg,#2f5f73 0%,#3a4f8b 55%,#493694 100%); }
.cta h2 { color:#fff; }
.cta p { color:rgba(255,255,255,.92); max-width:780px; margin:0 auto 28px; font-size:1.15rem; }
.cta p.kicker { color:#d8d1fb; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:700; letter-spacing:.16em; margin:0 auto 18px; }
.cform { max-width:720px; margin:0 auto 22px; text-align:left; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:18px; padding:26px 28px; }
.cform label { display:block; font-weight:600; font-size:.92rem; color:#fff; margin-bottom:14px; }
.cform .row2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform textarea { display:block; width:100%; margin-top:6px; padding:11px 14px; border:1px solid transparent; border-radius:10px; font:inherit; font-size:1rem; color:#212121; background:#fff; box-sizing:border-box; }
.cform textarea { resize:vertical; min-height:120px; }
.cform input:focus, .cform textarea:focus { outline:3px solid rgba(255,255,255,.55); outline-offset:1px; }
.cform .consent { display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.88rem; line-height:1.45; }
.cform .consent input { margin-top:3px; flex:none; width:18px; height:18px; }
.cform .consent a { color:#fff; text-decoration:underline; }
.cform .hp { position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
.cform .cf-ts { margin:0 0 12px; }
.cform .cf-ts:empty { margin:0; }
.cstatus { min-height:1.4em; margin:4px 0 12px !important; font-size:1rem !important; font-weight:700; text-align:left !important; }
.cstatus.ok { color:#b9f3cf; } .cstatus.err { color:#ffd2cc; }
.cform button { cursor:pointer; border:0; font:inherit; font-weight:700; }
.cform button:disabled { opacity:.6; cursor:wait; }
.cta .btn-light { background:#fff; color:var(--stage); }
@media (hover:hover) { .cta .btn-light:hover { background:var(--dark); color:#fff; } }
.cta .btn-light:active { background:var(--dark); color:#fff; }
@media (max-width:640px) { .cform { padding:20px 16px; } .cform .row2 { grid-template-columns:1fr; } .cform button[type=submit] { width:100%; } }
.quick { max-width:680px; margin:34px auto 0; display:grid; grid-template-columns:1fr; gap:16px; text-align:left; }
@media (min-width:1180px) { .quick { max-width:1040px; grid-template-columns:repeat(3,1fr); } }
.qcard { display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border-radius:18px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); transition:background .2s; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.qcard:hover { background:rgba(255,255,255,.18); }
.qi { flex:none; width:48px; height:48px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; }
.qi svg { width:26px; height:26px; stroke:var(--stage); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qb { min-width:0; }
.qb h3 { color:#fff; font-size:1.1rem; margin:2px 0 8px; }
.qtxt { display:block; color:rgba(255,255,255,.88); font-size:.95rem; line-height:1.45; margin-bottom:6px; }
.qlink { display:inline-flex; vertical-align:top; align-items:center; margin:4px 8px 0 0; padding:6px 14px; border-radius:10px; border:1.5px solid rgba(255,255,255,.75); color:#fff; font-weight:600; font-size:.92rem; line-height:1.3; white-space:nowrap; transition:background .2s, color .2s; }
.qlink:hover, .qlink:focus-visible { background:#fff; color:var(--stage); }
.qlink.fill { background:#fff; color:var(--stage); }
.qlink.fill:hover, .qlink.fill:focus-visible { background:rgba(255,255,255,.82); }
.qlink .qk { width:16px; height:16px; margin-right:7px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.qlink .qk.qk-fill { width:17px; height:17px; fill:currentColor; stroke:none; }

/* ---------- pied de page (même logique qu'oxygenevent.fr) ---------- */
.footer { background:radial-gradient(60% 100% at 8% 100%, rgba(122,104,216,.14), transparent 70%) no-repeat, var(--dark); color:#fff; padding:64px 0 22px; font-size:1rem; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:34px; }
@media (min-width:720px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px) { .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1.1fr; } }
.footer img { width:auto; }
.foot-brand { display:inline-flex; align-items:center; gap:12px; line-height:0; }
.foot-brand .logo-mark { height:76px; }
.foot-brand .logo-text { height:46px; }
.footer h4 { font-size:1.1rem; margin-bottom:12px; }
.footer ul + h4 { margin-top:22px; }
.footer li { margin:6px 0; }
.footer a { color:rgba(255,255,255,.8); }
.footer a:hover { color:#fff; }
.footer p { color:rgba(255,255,255,.7); font-size:.95rem; margin-top:14px; max-width:340px; }
.footer a.brand { font-weight:700; color:#fff; }
.footer a.brand .bo { color:#6fb0d6; }
.footer a.brand .be { color:#3a7f9b; } /* « event » : le bleu foncé du logo OxygenEvent (#275c71), éclairci pour rester lisible sur le fond sombre */
.footer a.brand .bc { color:#52c1b2; } /* « cam » : le vert du logo OxygenCam */
.footer a.brand:hover { text-decoration:underline; }
/* « Tester la démo » dans le violet clair d'OxygenStage, soulignement qui glisse au survol */
.footer a.demo-link { color:var(--stage-l); font-weight:600; background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 2px; padding-bottom:2px; transition:background-size .3s ease, color .2s; }
.footer a.demo-link:hover, .footer a.demo-link:focus-visible { color:#fff; background-size:100% 2px; }
.wa-link { white-space:nowrap; }
.wa-ic { width:1.05em; height:1.05em; fill:currentColor; stroke:none; vertical-align:-.16em; margin-right:.4em; }
.copy { border-top:1px solid rgba(255,255,255,.14); margin-top:42px; padding-top:18px; color:rgba(255,255,255,.62); font-size:.9rem; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
.copy a { color:rgba(255,255,255,.8); text-decoration:underline; }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* ---------- page 404 « hors antenne » : les fonds dessinés de l'accueil et un écran de régie sans signal ---------- */
.page-404 { min-height:100vh; color:#fff; overflow-x:hidden;
  background:url("../images/fonds/vagues.svg") center bottom/max(100%,1600px) auto no-repeat,
    radial-gradient(46% 42% at 50% 44%, rgba(122,104,216,.32), transparent 72%),
    radial-gradient(55% 60% at 84% 6%, rgba(63,127,166,.38), transparent 70%),
    radial-gradient(48% 50% at 10% 92%, rgba(122,104,216,.2), transparent 70%),
    var(--dark); }
.p404 { position:relative; isolation:isolate; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:clamp(28px,5vw,56px) 20px; text-align:center; --deco:clamp(280px, calc((100vw - 900px) / 2 + 150px), 560px); }
/* la régie à gauche, la scène à droite, comme en haut de l'accueil (plus discrètes) */
.p404::before, .p404::after { content:""; position:absolute; top:0; z-index:-1; width:var(--deco); aspect-ratio:640 / 560; background:no-repeat 0 0 / 100% 100%; opacity:.5; pointer-events:none; }
.p404::before { left:0; background-image:url("../images/fonds/regie.svg");
  -webkit-mask-image:linear-gradient(to right,#000 50%,transparent 95%), linear-gradient(to bottom,#000 58%,transparent 96%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 50%,transparent 95%), linear-gradient(to bottom,#000 58%,transparent 96%); mask-composite:intersect; }
.p404::after { right:0; background-image:url("../images/fonds/scene.svg");
  -webkit-mask-image:linear-gradient(to left,#000 50%,transparent 95%), linear-gradient(to bottom,#000 58%,transparent 96%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 50%,transparent 95%), linear-gradient(to bottom,#000 58%,transparent 96%); mask-composite:intersect; }
/* logo : hauteur seule, la largeur suit (le symbole reste rond) */
.p404-marque { display:inline-flex; align-items:center; gap:14px; line-height:0; }
.p404-marque img { width:auto; }
.p404-marque .logo-mark { height:64px; }
.p404-marque .logo-text { height:40px; }
/* l'écran : cadre lumineux, lignes de balayage, « 404 », voyant « hors antenne », mire aux couleurs Oxygen, pied */
.p404-ecran { width:min(540px,100%); margin:8px 0 6px; }
.p404-dalle { position:relative; aspect-ratio:16 / 9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:hidden;
  border:2px solid rgba(181,168,244,.6); border-radius:16px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px), radial-gradient(90% 80% at 50% 35%, #24385a, #0b141c 78%);
  box-shadow:0 0 0 7px rgba(10,20,28,.85), 0 0 0 9px rgba(122,104,216,.35), 0 0 70px rgba(122,104,216,.45), 0 30px 70px rgba(0,0,0,.55); }
.p404-dalle::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%); transform:translateX(-110%); animation:p404-reflet 7s ease-in-out infinite; pointer-events:none; }
.p404-rec { position:absolute; top:14px; left:16px; display:inline-flex; align-items:center; gap:8px; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.p404-rec i { width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 10px #ff3b30; animation:p404-rec 1.6s ease-in-out infinite; }
.p404-code { font-size:clamp(4.2rem,15vw,8rem); font-weight:700; line-height:.95; letter-spacing:.03em; color:transparent;
  background:linear-gradient(180deg,#fff 20%,var(--stage-l)); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 22px rgba(181,168,244,.5)); }
.p404-signal { font-size:clamp(.68rem,2vw,.85rem); font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.p404-mire { position:absolute; left:0; right:0; bottom:0; display:flex; height:10px; }
.p404-mire i { flex:1; }
.p404-mire i:nth-child(1) { background:#fff; } .p404-mire i:nth-child(2) { background:var(--stage-l); } .p404-mire i:nth-child(3) { background:var(--stage-m); }
.p404-mire i:nth-child(4) { background:var(--stage); } .p404-mire i:nth-child(5) { background:var(--accent); } .p404-mire i:nth-child(6) { background:var(--secondary); }
.p404-mire i:nth-child(7) { background:var(--primary); }
.p404-pied { display:block; width:28%; height:14px; margin:13px auto 0; border:1px solid rgba(181,168,244,.4); border-top:0; border-radius:0 0 12px 12px; background:linear-gradient(rgba(181,168,244,.3), rgba(122,104,216,.08)); box-shadow:0 12px 26px rgba(0,0,0,.45); }
.p404 h1 { margin:6px 0 0; font-size:clamp(1.9rem,4.6vw,3rem); letter-spacing:-.02em; }
.p404-txt { max-width:560px; margin:0; color:rgba(255,255,255,.86); font-size:clamp(1rem,1.5vw,1.15rem); }
.p404-en { margin:0; color:rgba(255,255,255,.6); font-size:.95rem; }
.p404-cta { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px; }
@keyframes p404-rec { 50% { opacity:.25; } }
@keyframes p404-reflet { 0%, 60% { transform:translateX(-110%); } 100% { transform:translateX(110%); } }
@media (prefers-reduced-motion:reduce) { .p404-rec i, .p404-dalle::after { animation:none; } }
@media (max-width:640px) {
  .p404 { --deco:50vw; }
  .p404::before, .p404::after { opacity:.3; }
  .p404-marque .logo-mark { height:52px; }
  .p404-marque .logo-text { height:32px; }
}

/* CALLOUTS:START (repris d'oxygenevent.fr par # CLAUDE DEV/inject-callouts.js) */
.cm-v-live{padding-left:18%;padding-right:18%}
.sv-v-live{left:-28.12%;width:156.25%}
.lb-v-live-1{top:13.09%;width:25.25%;right:calc(100% + 1.91%)}
.tg-v-live-1{left:7.58%;top:13.03%}
.lb-v-live-2{top:53.48%;width:25.25%;right:calc(100% + 1.91%)}
.tg-v-live-2{left:7.58%;top:39.44%}
.lb-v-live-3{top:35.76%;width:25.25%;right:calc(100% + 1.91%)}
.tg-v-live-3{left:24.14%;top:36.62%}
.lb-v-live-4{top:13.09%;width:25.25%;left:calc(100% + 1.91%)}
.tg-v-live-4{left:92.42%;top:10.56%}
.lb-v-live-5{top:71.19%;width:25.25%;right:calc(100% + 1.91%)}
.tg-v-live-5{left:7.58%;top:64.86%}
.lb-v-live-6{top:88.91%;width:25.25%;right:calc(100% + 1.91%)}
.tg-v-live-6{left:7.58%;top:78.87%}
.cm-c-regie{padding-left:18%;padding-right:18%}
.sv-c-regie{left:-28.12%;width:156.25%}
.lb-c-regie-1{top:14.24%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-regie-1{left:25.79%;top:14.24%}
.lb-c-regie-2{top:33.49%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-regie-2{left:26.61%;top:22.22%}
.lb-c-regie-3{top:52.74%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-regie-3{left:26.61%;top:37.71%}
.lb-c-regie-4{top:71.99%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-regie-4{left:26.61%;top:67.57%}
.lb-c-regie-5{top:91.13%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-regie-5{left:26.61%;top:94.79%}
.lb-c-regie-6{top:89.17%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-regie-6{left:86.84%;top:94.79%}
.cm-c-timer{padding-left:18%;padding-right:0%}
.sv-c-timer{left:-21.95%;width:121.95%}
.lb-c-timer-1{top:10.07%;width:19.71%;right:calc(100% + 1.49%)}
.tg-c-timer-1{left:26.11%;top:9.19%}
.lb-c-timer-2{top:31.11%;width:19.71%;right:calc(100% + 1.49%)}
.tg-c-timer-2{left:31.6%;top:31.11%}
.lb-c-timer-3{top:48.53%;width:19.71%;right:calc(100% + 1.49%)}
.tg-c-timer-3{left:31.6%;top:45.15%}
.lb-c-timer-4{top:65.94%;width:19.71%;right:calc(100% + 1.49%)}
.tg-c-timer-4{left:31.6%;top:58.08%}
.lb-c-timer-5{top:87.71%;width:19.71%;right:calc(100% + 1.49%)}
.tg-c-timer-5{left:31.6%;top:95.86%}
.cm-c-salle{padding-left:18%;padding-right:18%}
.sv-c-salle{left:-28.12%;width:156.25%}
.lb-c-salle-1{top:19.72%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-salle-1{left:26.92%;top:31.92%}
.lb-c-salle-2{top:25.56%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-salle-2{left:86.84%;top:25.56%}
.lb-c-salle-3{top:53.56%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-salle-3{left:86.84%;top:38.59%}
.lb-c-salle-4{top:50.56%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-salle-4{left:26.92%;top:48.79%}
.lb-c-salle-5{top:81.41%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-salle-5{left:26.92%;top:55.35%}
.cm-c-qa-mod{padding-left:18%;padding-right:18%}
.sv-c-qa-mod{left:-28.12%;width:156.25%}
.lb-c-qa-mod-1{top:12.91%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-qa-mod-1{left:25.85%;top:9.19%}
.lb-c-qa-mod-2{top:32.37%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-qa-mod-2{left:26.61%;top:23.43%}
.lb-c-qa-mod-3{top:31.31%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-qa-mod-3{left:86.84%;top:31.31%}
.lb-c-qa-mod-4{top:74.75%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-qa-mod-4{left:26.61%;top:74.75%}
.lb-c-qa-mod-5{top:56.47%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-qa-mod-5{left:86.84%;top:42.42%}
.cm-c-stats{padding-left:18%;padding-right:18%}
.sv-c-stats{left:-28.12%;width:156.25%}
.lb-c-stats-1{top:21.44%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-stats-1{left:26.92%;top:13.43%}
.lb-c-stats-2{top:18.59%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-stats-2{left:86.84%;top:17.98%}
.lb-c-stats-3{top:46.59%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-stats-3{left:26.92%;top:23.94%}
.lb-c-stats-4{top:68.91%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-stats-4{left:26.92%;top:28.28%}
.lb-c-stats-5{top:46.59%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-stats-5{left:86.84%;top:33.33%}
.cm-c-adresses{padding-left:18%;padding-right:18%}
.sv-c-adresses{left:-28.12%;width:156.25%}
.lb-c-adresses-1{top:25.41%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-adresses-1{left:26.61%;top:33.84%}
.lb-c-adresses-2{top:53.41%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-adresses-2{left:26.61%;top:52.22%}
.lb-c-adresses-3{top:68.69%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-adresses-3{left:86.84%;top:68.69%}
.lb-c-adresses-4{top:81.41%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-adresses-4{left:26.61%;top:79.7%}
.cm-c-droitimage{padding-left:18%;padding-right:18%}
.sv-c-droitimage{left:-28.12%;width:156.25%}
.lb-c-droitimage-1{top:21.72%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-droitimage-1{left:26.48%;top:21.72%}
.lb-c-droitimage-2{top:44.03%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-droitimage-2{left:26.61%;top:26.77%}
.lb-c-droitimage-3{top:80.31%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-droitimage-3{left:73.39%;top:62.63%}
.lb-c-droitimage-4{top:55.15%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-droitimage-4{left:86.97%;top:55.15%}
.cm-c-plateforme{padding-left:18%;padding-right:18%}
.sv-c-plateforme{left:-28.12%;width:156.25%}
.lb-c-plateforme-1{top:18.59%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-plateforme-1{left:26.61%;top:12.42%}
.lb-c-plateforme-2{top:24.55%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-plateforme-2{left:86.84%;top:24.55%}
.lb-c-plateforme-3{top:46.59%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-plateforme-3{left:26.61%;top:37.98%}
.lb-c-plateforme-4{top:71.75%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-plateforme-4{left:25.79%;top:55.35%}
.cm-s-modules{padding-left:18%;padding-right:18%}
.sv-s-modules{left:-28.12%;width:156.25%}
.lb-s-modules-1{top:20.96%;width:25.25%;right:calc(100% + 1.91%)}
.tg-s-modules-1{left:26.8%;top:20.96%}
.lb-s-modules-2{top:38.85%;width:25.25%;left:calc(100% + 1.91%)}
.tg-s-modules-2{left:56.35%;top:38.85%}
.lb-s-modules-3{top:66.54%;width:25.25%;right:calc(100% + 1.91%)}
.tg-s-modules-3{left:26.8%;top:66.54%}
.lb-s-modules-4{top:87.71%;width:25.25%;right:calc(100% + 1.91%)}
.tg-s-modules-4{left:26.8%;top:91.35%}
.cm-s-marque{padding-left:18%;padding-right:0%}
.sv-s-marque{left:-21.95%;width:121.95%}
.lb-s-marque-1{top:11.74%;width:19.71%;right:calc(100% + 1.49%)}
.tg-s-marque-1{left:0.43%;top:4.23%}
.lb-s-marque-2{top:41.35%;width:19.71%;right:calc(100% + 1.49%)}
.tg-s-marque-2{left:3.21%;top:41.35%}
.lb-s-marque-3{top:61.54%;width:19.71%;right:calc(100% + 1.49%)}
.tg-s-marque-3{left:3.21%;top:61.54%}
.lb-s-marque-4{top:81.84%;width:19.71%;right:calc(100% + 1.49%)}
.tg-s-marque-4{left:3.21%;top:81.73%}
.cm-a-anim{padding-left:18%;padding-right:18%}
.sv-a-anim{left:-28.12%;width:156.25%}
.lb-a-anim-1{top:7.85%;width:25.25%;left:calc(100% + 1.91%)}
.tg-a-anim-1{left:99.7%;top:2.94%}
.lb-a-anim-2{top:15.44%;width:25.25%;right:calc(100% + 1.91%)}
.tg-a-anim-2{left:9.9%;top:15.44%}
.lb-a-anim-3{top:36.03%;width:25.25%;right:calc(100% + 1.91%)}
.tg-a-anim-3{left:8.24%;top:36.03%}
.lb-a-anim-4{top:48.56%;width:25.25%;right:calc(100% + 1.91%)}
.tg-a-anim-4{left:8.24%;top:42.65%}
.lb-a-anim-5{top:40.22%;width:25.25%;left:calc(100% + 1.91%)}
.tg-a-anim-5{left:93.88%;top:40.22%}
.lb-a-anim-6{top:62.51%;width:25.25%;right:calc(100% + 1.91%)}
.tg-a-anim-6{left:8.24%;top:60.44%}
.lb-a-anim-7{top:90.74%;width:25.25%;right:calc(100% + 1.91%)}
.tg-a-anim-7{left:7.32%;top:95.74%}
.lb-a-anim-8{top:90.74%;width:25.25%;left:calc(100% + 1.91%)}
.tg-a-anim-8{left:94.35%;top:95.74%}
.cm-c-reglages-inscription{padding-left:18%;padding-right:18%}
.sv-c-reglages-inscription{left:-28.12%;width:156.25%}
.lb-c-reglages-inscription-1{top:15.75%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-reglages-inscription-1{left:25.97%;top:8.28%}
.lb-c-reglages-inscription-2{top:40.91%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-reglages-inscription-2{left:6.4%;top:20.71%}
.lb-c-reglages-inscription-3{top:68.91%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-reglages-inscription-3{left:27.68%;top:47.47%}
.lb-c-reglages-inscription-4{top:65.15%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-reglages-inscription-4{left:73.14%;top:65.15%}
.cm-c-ag-v5{padding-left:18%;padding-right:18%}
.sv-c-ag-v5{left:-28.12%;width:156.25%}
.lb-c-ag-v5-1{top:9.26%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-v5-1{left:0.89%;top:4.56%}
.lb-c-ag-v5-2{top:21.19%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-v5-2{left:1.25%;top:20.59%}
.lb-c-ag-v5-3{top:35.16%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-v5-3{left:1.77%;top:26.75%}
.lb-c-ag-v5-4{top:32.84%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-ag-v5-4{left:52.56%;top:32.84%}
.lb-c-ag-v5-5{top:57.57%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-v5-5{left:1.51%;top:57.57%}
.lb-c-ag-v5-6{top:58.05%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-ag-v5-6{left:98.59%;top:58.05%}
.lb-c-ag-v5-7{top:82.84%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-v5-7{left:1.51%;top:82.84%}
.cm-c-ag-en-v5{padding-left:18%;padding-right:18%}
.sv-c-ag-en-v5{left:-28.12%;width:156.25%}
.lb-c-ag-en-v5-1{top:9.26%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-en-v5-1{left:0.89%;top:4.56%}
.lb-c-ag-en-v5-2{top:21.19%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-en-v5-2{left:1.25%;top:20.59%}
.lb-c-ag-en-v5-3{top:35.16%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-en-v5-3{left:1.77%;top:26.75%}
.lb-c-ag-en-v5-4{top:32.84%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-ag-en-v5-4{left:52.56%;top:32.84%}
.lb-c-ag-en-v5-5{top:57.57%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-en-v5-5{left:1.51%;top:57.57%}
.lb-c-ag-en-v5-6{top:58.05%;width:25.25%;left:calc(100% + 1.91%)}
.tg-c-ag-en-v5-6{left:98.59%;top:58.05%}
.lb-c-ag-en-v5-7{top:82.84%;width:25.25%;right:calc(100% + 1.91%)}
.tg-c-ag-en-v5-7{left:1.51%;top:82.84%}
/* CALLOUTS:END */