/* ORBIS : page de l'app, dans la DA du film 1.1 (bleu identité, verre, titres blancs).
   Couleurs de la charte ; espaces sur l'échelle 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
   Aussi utilisée par les CGV ORBIS et la page de clé (espace/orbis-cle.php). */
:root {
  /* Couleurs de marque */
  --bleu: #405DE6; --bleu-vif: #408CFA; --lavande: #A59AF4; --cyan: #75D7F2; --rose: #E6B8DD;
  --encre: #0B0D16; --porcelaine: #F5F4FC;
  /* Rôles : le texte se pose sur les bleus profonds, la lavande reste dans les lumières et les vitrines */
  --fond: #2B43C8;
  --fond-2: #3550DC;
  --scene: #717FE2;                     /* fond des captures de l'app (même bleu que le film) */
  --texte: #FFFFFF;
  --texte-2: rgba(255,255,255,.86);     /* 5,8:1 sur le fond */
  --texte-3: rgba(255,255,255,.72);     /* 4,6:1 sur le fond */
  --verre: rgba(255,255,255,.085);
  --verre-fort: rgba(255,255,255,.15);
  --trait: rgba(255,255,255,.18);
  --trait-fort: rgba(255,255,255,.32);
  --succes: #3DBE74;
  --erreur: #FFC2C5;
  /* Espace et forme : même grille que le site H30 */
  --marge: clamp(18px, 4vw, 48px);
  --largeur: 1184px;
  --gouttiere: max(var(--marge), calc((100% - var(--largeur)) / 2));
  --rayon: 24px;
  --rayon-grand: 32px;
  --section: clamp(96px, 11vw, 160px);
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ressort: cubic-bezier(.2, .9, .3, 1.15);
  --doux: cubic-bezier(.25, .1, .25, 1);
  --ombre-verre: inset 0 1px 0 rgba(255,255,255,.28), 0 24px 64px rgba(14,22,110,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; background: var(--fond); }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
i { font-style: normal; color: #fff; font-weight: 600; }
.o-cache { position: absolute; width: 0; height: 0; overflow: hidden; }
.o-cache-visuel { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
.o-evitement { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: #fff; color: var(--fond); font-weight: 600; text-decoration: none; transition: top .2s var(--doux); }
.o-evitement:focus { top: 12px; }

/* ---------- Barre ORBIS : du verre sur le bleu ---------- */
.o-barre { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 var(--gouttiere);
  background: rgba(43,67,200,.72); -webkit-backdrop-filter: saturate(170%) blur(20px); backdrop-filter: saturate(170%) blur(20px);
  border-bottom: 1px solid var(--trait); }
.o-marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.o-marque svg { width: 22px; height: 22px; color: #fff; flex: none; }
.o-marque span { font-family: var(--titre); font-weight: 300; letter-spacing: .32em; margin-right: -.32em; font-size: 15px; }
.o-barre nav { display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: 14px; }
.o-barre nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: var(--texte-2); transition: color .2s, background .2s; }
.o-barre nav a:hover { color: #fff; }
.o-barre nav a[aria-current="true"] { color: #fff; background: var(--verre-fort); }
.o-barre .o-lien-fort { color: #fff; font-weight: 600; }
.o-barre .o-lien-plein { margin-left: 6px; min-height: 36px; padding: 0 16px; background: #fff; color: var(--bleu); font-weight: 600; }
.o-barre .o-lien-plein:hover { color: var(--bleu); background: var(--porcelaine); }

/* ---------- Boutons ---------- */
.o-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: #fff; color: var(--bleu); font: 600 17px/1 var(--police); text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(14,22,110,.28); transition: background .2s var(--doux), transform .2s var(--doux), box-shadow .2s; touch-action: manipulation; }
.o-bouton:hover { background: var(--porcelaine); box-shadow: 0 12px 34px rgba(14,22,110,.36); }
.o-bouton:active { transform: scale(.97); }
.o-bouton svg { width: 18px; height: 18px; flex: none; }
.o-secondaire, .o-verre { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px var(--trait-fort); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
.o-secondaire:hover, .o-verre:hover { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.o-petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.o-bouton[disabled] { opacity: .5; cursor: default; box-shadow: none; }

/* ---------- Typographie ---------- */
.o-sur { display: block; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 16px; }
.o-sur b { color: #fff; font-weight: 700; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(46px, 7.4vw, 112px); }
h2 { font-size: clamp(36px, 5.4vw, 72px); }
h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.025em; line-height: 1.1; }
.o-h2-moyen { font-size: clamp(32px, 4.2vw, 56px); }
h1 span, h2 span { color: rgba(255,255,255,.7); }
.o-chapo { font-size: clamp(18px, 1.9vw, 23px); line-height: 1.45; color: var(--texte-2); max-width: 680px; margin: 24px auto 0; text-wrap: pretty; }
.o-texte { color: var(--texte-2); margin-top: 20px; max-width: 62ch; text-wrap: pretty; }
.o-large { font-size: clamp(17px, 1.6vw, 20px); }
.o-note { font-size: 14px; color: var(--texte-3); margin-top: 16px; max-width: 72ch; }
.o-note a, .o-texte a, details a { color: #fff; text-underline-offset: 3px; }

/* ---------- Ouverture : le film ---------- */
.o-hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(56px, 8vw, 104px) var(--marge) clamp(64px, 8vw, 112px);
  background:
    radial-gradient(42% 30% at 50% 72%, rgba(165,154,244,.7), transparent 72%),
    radial-gradient(40% 34% at 88% 12%, rgba(117,215,242,.32), transparent 72%),
    radial-gradient(36% 30% at 8% 58%, rgba(230,184,221,.26), transparent 72%),
    linear-gradient(180deg, #2B43C8 0%, #3A55E0 26%, #405DE6 52%, #3650DA 78%, var(--fond) 100%); }
.o-version { display: inline-flex; align-items: baseline; gap: .5em; margin-bottom: 24px; font-family: var(--titre); font-weight: 300; font-size: clamp(18px, 2vw, 24px); }
.o-version .o-mot { letter-spacing: .32em; margin-right: -.12em; }
.o-version .o-num { letter-spacing: .12em; opacity: .9; }
.o-version::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(117,215,242,.25); margin-right: 4px; }
.o-hero h1 { text-shadow: 0 2px 30px rgba(20,30,130,.3); }
.o-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.o-meta-hero { margin-top: 16px; font-size: 14px; color: var(--texte-3); }

.o-film { position: relative; width: min(100%, 1184px); margin: clamp(48px, 6vw, 80px) auto 0; aspect-ratio: 16 / 9; border-radius: var(--rayon-grand);
  overflow: hidden; background: var(--encre); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 40px 120px rgba(14,20,100,.5), 0 12px 32px rgba(14,20,100,.3); }
.o-film video { width: 100%; height: 100%; object-fit: cover; }
.o-film-commandes { position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); display: flex; gap: 8px; }
.o-film-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px;
  border: 0; color: #fff; font: 600 14px/1 var(--police); cursor: pointer; background: rgba(20,26,90,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); transition: background .2s var(--doux), transform .2s var(--doux); }
.o-film-bouton:hover { background: rgba(20,26,90,.55); }
.o-film-bouton:active { transform: scale(.95); }
.o-film-bouton svg { width: 20px; height: 20px; flex: none; }
.o-film-son { padding: 0 16px 0 12px; }
.o-film-bouton .o-si-actif { display: none; }
.o-film-bouton[aria-pressed="true"] .o-si-actif { display: block; }
.o-film-bouton[aria-pressed="true"] .o-si-inactif { display: none; }

/* ---------- Sections ---------- */
.o-section { position: relative; width: min(100% - 2 * var(--marge), var(--largeur)); margin: var(--section) auto 0; }
.o-hero + .o-section { margin-top: clamp(72px, 8vw, 120px); }
.o-tete { max-width: 860px; }
.o-tete-centre { max-width: 900px; margin: 0 auto; text-align: center; }
.o-tete-centre .o-texte { margin-left: auto; margin-right: auto; }

/* Bande pleine largeur, pour les plans du film */
.o-bande { position: relative; margin-top: var(--section); padding: var(--section) 0; overflow: hidden;
  background: radial-gradient(45% 30% at 78% 38%, rgba(117,215,242,.2), transparent 72%), linear-gradient(180deg, var(--fond) 0%, #3D5AE5 30%, #405DE6 60%, var(--fond) 100%); }
.o-bande > .o-section:first-child { margin-top: 0; }

/* Vitrines : les vraies captures, posées sur le bleu où elles ont été prises */
.o-vitrine { margin: 0; border-radius: var(--rayon-grand); overflow: hidden; background: var(--scene); box-shadow: 0 0 0 1px var(--trait), 0 30px 80px rgba(14,20,100,.3); }
.o-vitrine img { width: 100%; }
.o-legende { margin-top: 12px; font-size: 14px; color: var(--texte-3); }

/* ---------- Nouveautés ---------- */
.o-nouv { display: grid; gap: 24px; margin-top: 48px; padding: clamp(24px, 3vw, 40px); border-radius: var(--rayon-grand); background: var(--verre); border: 1px solid var(--trait); box-shadow: var(--ombre-verre); }
.o-nouv-large { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.o-nouv h3 { margin-bottom: 12px; }
.o-nouv p { color: var(--texte-2); }
.o-nouv .o-vitrine { box-shadow: 0 0 0 1px var(--trait); border-radius: 20px; }
.o-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.o-deux .o-nouv { margin-top: 24px; grid-template-rows: auto 1fr; align-content: start; }
.o-nouv-image-haute { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.o-nouv-image-haute img { width: auto; max-height: 100%; }
.o-barre-image { padding-top: 24px; }
.o-barre-image img { width: 64%; margin: 0 auto; border-radius: 0; }
.o-notif-image { padding: 0 clamp(12px, 3vw, 40px); }
.o-notif-image img { width: 100%; }
.o-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
.o-puces li { padding: 6px 12px; border-radius: 999px; background: var(--verre-fort); font-size: 14px; font-weight: 600; }
.o-puces .o-puce-langues { font-weight: 500; border-radius: 16px; }
.o-puce-langues b { font-weight: 700; margin-right: 4px; }

/* ---------- L'encoche ---------- */
.o-encoche-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.o-mac { margin: 0; border-radius: var(--rayon-grand); overflow: hidden; box-shadow: 0 0 0 1px var(--trait), 0 40px 100px rgba(14,20,100,.4); }
.o-mac img { width: 100%; }
.o-etapes-encoche { list-style: none; counter-reset: etape; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.o-etapes-encoche li { counter-increment: etape; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--rayon); background: var(--verre); border: 1px solid var(--trait); }
.o-etapes-encoche .o-vitrine { border-radius: 16px; box-shadow: none; }
.o-etapes-encoche b { display: flex; align-items: center; gap: 10px; font-size: 19px; letter-spacing: -.01em; }
.o-etapes-encoche b::before { content: counter(etape); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--bleu); font-size: 14px; font-weight: 700; flex: none; }
.o-etapes-encoche p { color: var(--texte-2); font-size: 15px; }
.o-converti { display: grid; place-items: center; aspect-ratio: 1424 / 484; border-radius: 16px; background: var(--scene); }
.o-converti span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: rgba(43,67,200,.6); font-weight: 600; font-size: 15px; }
.o-converti span::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--succes) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* ---------- Et aussi : Verre, plein écran ---------- */
.o-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.o-galerie figure { margin: 0; }
.o-galerie figcaption { margin-top: 16px; color: var(--texte-2); font-size: 16px; }
.o-galerie figcaption b { display: block; color: #fff; font-size: 20px; letter-spacing: -.01em; margin-bottom: 4px; }
.o-galerie .o-vitrine { aspect-ratio: 3 / 2; }
.o-galerie .o-vitrine img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Le geste : la sphère vivante ---------- */
.o-geste { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.o-scene { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--rayon-grand); min-height: 520px; display: grid; place-items: center;
  background: radial-gradient(60% 50% at 20% 10%, rgba(64,93,230,.9), transparent 70%), radial-gradient(50% 50% at 100% 40%, rgba(117,215,242,.5), transparent 70%),
              radial-gradient(60% 60% at 80% 100%, rgba(230,184,221,.7), transparent 70%), #A9A2EF;
  box-shadow: 0 0 0 1px var(--trait), 0 30px 80px rgba(14,20,100,.3); }
.o-nappe { position: absolute; border-radius: 50%; will-change: transform; z-index: -1; }
.o-nappe-1 { width: 80%; height: 60%; left: -20%; top: -16%; background: radial-gradient(closest-side, rgba(64,93,230,.55), rgba(64,93,230,0)); animation: nappe-a 26s ease-in-out infinite alternate; }
.o-nappe-2 { width: 70%; height: 55%; right: -18%; bottom: -10%; background: radial-gradient(closest-side, rgba(230,184,221,.6), rgba(230,184,221,0)); animation: nappe-b 31s ease-in-out infinite alternate; }
@keyframes nappe-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8%,4%,0) scale(1.08); } }
@keyframes nappe-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(-7%,3%,0); } }
.o-etapes-geste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
.o-etapes-geste li { padding: 18px 20px; border-radius: 20px; background: var(--verre); border: 1px solid var(--trait); }
.o-etapes-geste b { display: block; font-size: 18px; margin-bottom: 4px; }
.o-etapes-geste p { color: var(--texte-2); font-size: 15px; }

/* La zone réserve la place des bulles (rayon 0,86 × le diamètre) autour de la sphère */
.o-orbe-zone { --d: clamp(140px, 13vw, 190px); position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--d) * .36 + 48px) 0 40px; }
.o-orbe { position: relative; width: var(--d); height: var(--d); }
.o-orbe-bouton { position: relative; z-index: 2; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--ra, 0deg)) scale(var(--sx, 1), var(--sy, 1)) rotate(calc(-1 * var(--ra, 0deg))); }
.o-orbe-bouton:focus-visible { outline-offset: 10px; border-radius: 50%; }
.o-orbe-flotte { position: absolute; inset: 0; animation: flotte 7s ease-in-out infinite; }
/* Le verre : clair, givré, bord fin, reflet en haut à gauche, lumière qui remonte du bas */
.o-orbe-corps { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 50% 108%, rgba(255,255,255,.65), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 46% 40%, #ECE8FF 0%, #DFD9FD 46%, #CFC7F8 74%, #BCB2F1 100%);
  box-shadow: inset 0 0 0 1px rgba(110,96,210,.38), inset -14px -20px 36px rgba(134,118,226,.22), inset 12px 14px 28px rgba(255,255,255,.55);
  animation: penche 10s ease-in-out infinite; transition: background .3s var(--doux), box-shadow .3s var(--doux); }
.o-orbe-ombre { position: absolute; left: 14%; right: 14%; bottom: -16%; height: 20%; border-radius: 50%; z-index: 1;
  background: radial-gradient(closest-side, rgba(30,24,100,.38), rgba(30,24,100,0)); animation: ombre 7s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ombre { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .75; } }
/* Au repos, comme dans l'app : une inclinaison du contour de quelques secondes, puis le calme */
@keyframes penche {
  0%, 58%, 100% { transform: rotate(32deg) scale(1, 1) rotate(-32deg); }
  70% { transform: rotate(32deg) scale(1.045, .955) rotate(-32deg); }
  84% { transform: rotate(32deg) scale(.985, 1.015) rotate(-32deg); }
}
.o-orbe-bouton:hover .o-orbe-corps { box-shadow: inset 0 0 0 1px rgba(110,96,210,.5), inset -14px -20px 36px rgba(134,118,226,.26), inset 12px 14px 28px rgba(255,255,255,.65), 0 0 0 6px rgba(255,255,255,.18); }
.o-orbe-coche { width: 38%; height: 38%; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ressort); }
.o-orbe.est-succes .o-orbe-corps { background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 45%, #6ED595, #3DBE74 70%, #2FA562);
  box-shadow: inset 0 0 0 1px rgba(20,110,60,.4), inset -12px -18px 32px rgba(20,90,50,.25); }
.o-orbe.est-succes .o-orbe-coche { opacity: 1; transform: scale(1); }
/* Logo vectoriel net, séparé du calque de verre qui se déforme */
.o-orbe-logo { position: absolute; inset: 25%; width: 50%; height: 50%; color: #fff; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(70,50,160,.3)); transition: opacity .25s var(--doux); }
.o-orbe.est-succes .o-orbe-logo { opacity: 0; }
/* Bulles de formats, comme le menu radial de l'app */
.o-bulles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.o-bulle { --r: calc(var(--d) * .86); position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  color: #1B1D35; font: 700 13px/1 var(--police); letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 18px rgba(30,24,100,.18);
  opacity: 0; transform: rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))) scale(.4);
  transition: transform .32s var(--ressort), opacity .2s var(--doux), background .2s; }
.o-bulle:hover { background: rgba(255,255,255,.85); }
.o-orbe.est-ouverte .o-bulles { pointer-events: auto; }
.o-orbe.est-ouverte .o-bulle { opacity: 1; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(1); }
.o-orbe.est-ouverte .o-bulle:nth-child(2) { transition-delay: .03s; }
.o-orbe.est-ouverte .o-bulle:nth-child(3) { transition-delay: .06s; }
.o-orbe.est-ouverte .o-bulle:nth-child(4) { transition-delay: .09s; }
.o-orbe.est-ouverte .o-bulle:nth-child(5) { transition-delay: .12s; }
.o-orbe.est-ouverte .o-bulle:nth-child(6) { transition-delay: .15s; }
.o-orbe.est-ouverte ~ .o-essai { opacity: 0; }
.o-essai { margin-top: 44px; min-height: 22px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 8px rgba(40,30,110,.5); transition: opacity .3s; }

/* ---------- Formats ---------- */
.o-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.o-familles { margin: 0; display: grid; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: var(--rayon-grand); background: var(--verre); border: 1px solid var(--trait); }
.o-familles > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--trait); }
.o-familles > div:last-child { border-bottom: 0; padding-bottom: 0; }
.o-familles dt { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.o-familles dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.o-familles span { padding: 6px 12px; border-radius: 999px; background: var(--verre-fort); font-size: 14px; font-weight: 600; }

/* ---------- Blocs en verre ---------- */
.o-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.o-bloc { padding: 24px; border-radius: var(--rayon); background: var(--verre); border: 1px solid var(--trait); }
.o-bloc b { display: block; font-size: 20px; letter-spacing: -.01em; margin: 16px 0 8px; }
.o-bloc p { color: var(--texte-2); font-size: 15px; }
.o-tuile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.o-tuile svg { width: 22px; height: 22px; }
.o-t-bleu { background: linear-gradient(180deg, #6F8AF7, #4A66EC); }
.o-t-violet { background: linear-gradient(180deg, #B6ACF7, #8E80EC); }
.o-t-cyan { background: linear-gradient(180deg, #8FE0F5, #4FB8DA); }
.o-t-vert { background: linear-gradient(180deg, #5FD08C, #2FA562); }
.o-t-rose { background: linear-gradient(180deg, #F0C6E6, #CF8DC3); }
.o-raccourcis { margin-top: 48px; }

/* ---------- Cartes ---------- */
.o-carte { border-radius: var(--rayon-grand); padding: clamp(24px, 4vw, 48px); border: 1px solid var(--trait); box-shadow: var(--ombre-verre);
  background: radial-gradient(70% 120% at 0% 0%, rgba(117,215,242,.18), transparent 70%), radial-gradient(60% 100% at 100% 100%, rgba(165,154,244,.26), transparent 70%), var(--verre); }
.o-titre-carte { font-size: clamp(32px, 3.8vw, 52px); }
.o-telecharger { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.o-icone { width: 96px; height: 96px; filter: drop-shadow(0 12px 28px rgba(14,20,100,.45)); }
.o-meta { color: var(--texte-2); margin-top: 12px; }
.o-notes-version { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--texte-2); font-size: 15px; }
.o-notes-version li { display: flex; gap: 10px; }
.o-notes-version li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; border-radius: 50%; background: var(--cyan); }
.o-telecharger-bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--trait); }
.o-telecharger-bas .o-note { margin: 0; }

.o-etapes { list-style: none; counter-reset: etape; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.o-etapes li { counter-increment: etape; position: relative; padding: 24px 24px 24px 80px; border-radius: var(--rayon); background: var(--verre); border: 1px solid var(--trait); }
.o-etapes li::before { content: counter(etape); position: absolute; left: 24px; top: 24px; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--bleu); display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.o-etapes b { display: block; font-size: 19px; margin-bottom: 8px; }
.o-etapes p { color: var(--texte-2); font-size: 15px; }

/* ---------- Alpha ---------- */
.o-alpha { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.o-places { margin-top: 16px; font-weight: 600; color: var(--cyan); min-height: 1.5em; }
.o-form { display: flex; flex-direction: column; gap: 12px; }
.o-form label { font-size: 14px; color: var(--texte-2); }
.o-form input:is([type=email], [type=text]) { height: 52px; border-radius: 14px; border: 1px solid var(--trait-fort); background: rgba(20,28,120,.45); color: #fff; padding: 0 16px; font: 17px var(--police); transition: border-color .2s; }
.o-form input:is([type=email], [type=text]):hover { border-color: rgba(255,255,255,.5); }
.o-form input:is([type=email], [type=text]):focus { border-color: #fff; outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.o-form input:is([type=email], [type=text])::placeholder { color: rgba(255,255,255,.55); }
.o-form input[aria-invalid="true"] { border-color: var(--erreur); }
.o-form-noms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.o-champ { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.o-case { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; cursor: pointer; }
.o-case input { margin: 2px 0 0; accent-color: #fff; width: 20px; height: 20px; flex: none; cursor: pointer; }
.o-form .o-bouton { align-self: flex-start; margin-top: 8px; }
.o-message { min-height: 1.5em; font-size: 15px; }
.o-message.ok { color: #9CF0C0; }
.o-message.err { color: var(--erreur); }
.o-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Questions ---------- */
.o-questions { max-width: 880px; }
.o-questions h2 { margin-bottom: 32px; }
details { border-top: 1px solid var(--trait); }
details:last-of-type { border-bottom: 1px solid var(--trait); }
summary { cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--doux); }
details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
details p { color: var(--texte-2); padding: 0 0 20px; max-width: 70ch; }

/* ---------- Démonstrations : des fichiers réels ---------- */
.o-demo-intro { margin: 64px 0 24px; max-width: 760px; }
.o-demo-intro > span { color: var(--cyan); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.o-demo h3 { font-size: clamp(26px, 4vw, 40px); line-height: 1.15; margin: 12px 0 16px; letter-spacing: -.03em; }
.o-demo-intro p { color: var(--texte-2); }
.o-demo-intro + .o-note { margin-bottom: 24px; }
.o-demo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.o-demo figure { margin: 0; min-width: 0; }
.o-demo figcaption { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.o-demo-pair figcaption { min-height: 128px; }
.o-demo-pair figcaption > :first-child { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.o-demo figcaption > span, .o-demo figcaption label { color: var(--texte-2); font-size: 15px; }
.o-demo figcaption strong { font-family: var(--titre); font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; line-height: 1.15; font-weight: 600; }
.o-demo figcaption strong, .o-demo td { font-variant-numeric: tabular-nums; }
.o-demo video { width: 100%; aspect-ratio: 16 / 9; background: #18205e; border-radius: 16px; }
.o-demo select { display: inline-block; max-width: 100%; min-height: 44px; font: inherit; color: #fff; background: rgba(20,28,120,.6); border: 1px solid var(--trait-fort); padding: 8px; border-radius: 10px; }
.o-demo #demoSync { padding-block: 14px; line-height: 1.35; text-align: center; }
#demoStatus:empty { display: none; }
.o-demo-table { overflow-x: auto; margin: 32px 0; padding: 8px 24px; border-radius: var(--rayon); background: var(--verre); border: 1px solid var(--trait); }
.o-demo table { border-collapse: collapse; width: 100%; text-align: left; font-size: 15px; }
.o-demo caption { text-align: left; color: var(--texte-2); padding: 16px 0 8px; }
.o-demo th, .o-demo td { padding: 16px 12px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.o-demo tr:last-child th, .o-demo tr:last-child td { border-bottom: 0; }
.o-demo-image { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; --reveal: 50%; }
.o-demo-image img { width: 100%; height: 100%; object-fit: cover; }
.o-demo-image-source { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.o-demo-before, .o-demo-after { position: absolute; bottom: 16px; background: rgba(20,26,90,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 14px; }
.o-demo-before { left: 16px; }
.o-demo-after { right: 16px; }
.o-demo-divider { position: absolute; top: 0; bottom: 0; left: var(--reveal); width: 2px; background: rgba(255,255,255,.85); box-shadow: 0 0 8px rgba(0,0,0,.4); transform: translateX(-1px); pointer-events: none; z-index: 2; }
.o-demo-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.o-demo-handle svg { width: 26px; height: 26px; }
.o-demo-overlay-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; touch-action: pan-y; }
.o-demo-image:focus-within { outline: 3px solid #fff; outline-offset: 5px; }
.o-demo-image:focus-within .o-demo-handle { background: rgba(64,93,230,.55); }
.o-demo-audio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.o-demo-audio figure { padding: 24px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--verre); }
.o-demo audio { display: block; width: 100%; margin: 20px 0; }
.o-demo-gif-card { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: center; margin: 40px 0; padding: 32px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--verre); }
.o-demo-gif-card h3 { font-size: 28px; margin: 12px 0; }
.o-demo-gif-card .o-bouton { margin-top: 24px; }
.o-demo-gif-card .o-note { margin-top: 12px; }
.o-demo-micro { justify-self: center; width: 240px; max-width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(14,20,100,.4); }
.o-demo-micro img { width: 100%; }
.o-demo :is(button, select, input, a):focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

/* ---------- Pied de page ---------- */
.o-footer { width: min(100% - 2 * var(--marge), var(--largeur)); margin: clamp(64px, 8vw, 112px) auto 0; padding: 24px 0 20px; border-top: 1px solid var(--trait); color: var(--texte-3); font-size: 14px; }
.o-footer-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.o-footer .o-marque { color: var(--texte); }
.o-footer-tagline { margin: 0; }
.o-footer-studio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: auto; text-decoration: none; }
.o-footer-studio svg { width: 55px; height: 16px; color: var(--porcelaine); }
.o-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 24px; margin-top: 12px; }
.o-footer-copy { font-size: 13px; line-height: 1.5; }
.o-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.o-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: none; transition: color .2s; }
.o-footer :is(nav a, .o-footer-studio):hover { color: var(--texte); }

/* ---------- CGV ORBIS ---------- */
.o-legal { max-width: 800px; margin: 0 auto; padding: 64px var(--marge); }
.o-legal h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -.04em; }
.o-legal h2 { font-size: 26px; line-height: 1.2; margin-top: 48px; }
.o-legal p, .o-legal li { color: var(--texte-2); }
.o-legal a { color: #fff; }
.o-legal .o-legal-key { padding: 24px; border: 1px solid var(--trait); border-radius: 16px; background: var(--verre); }

/* ---------- Page de clé (espace/orbis-cle.php) ---------- */
.o-simple { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px;
  background: radial-gradient(900px 600px at 30% 0%, rgba(117,215,242,.22), transparent 70%), radial-gradient(700px 500px at 90% 100%, rgba(165,154,244,.32), transparent 70%), var(--fond); }
.o-page-carte { width: min(560px, 100%); padding: clamp(28px, 5vw, 48px); border-radius: var(--rayon-grand); background: var(--verre); border: 1px solid var(--trait); box-shadow: var(--ombre-verre); }
.o-page-carte .o-marque { display: flex; width: max-content; margin-bottom: 32px; }
.o-page-carte h1 { font-size: clamp(32px, 6vw, 44px); margin: 8px 0 0; }
.o-page-carte .o-intro { color: var(--texte-2); margin: 16px 0 24px; }
.o-page-carte form { margin: 0; }
.o-pastille { display: block; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.o-cle { display: flex; gap: 12px; margin: 8px 0 24px; }
.o-cle input { flex: 1 1 auto; min-width: 0; height: 48px; border-radius: 12px; border: 1px solid var(--trait-fort); background: rgba(20,28,120,.45); color: #fff; padding: 0 14px; font: 15px ui-monospace, Menlo, monospace; }
.o-etapes-courtes { margin: 0 0 24px; padding-left: 20px; color: var(--texte-2); }
.o-etapes-courtes li { margin-bottom: 8px; }
.o-etapes-courtes a { color: #fff; }
.o-page-signature { display: inline-flex; align-items: center; gap: 10px; color: var(--texte-3); font-size: 14px; }
.o-page-signature a { display: inline-flex; align-items: center; min-height: 44px; color: var(--porcelaine); }
.o-page-signature svg { width: 55px; height: 16px; display: block; }

/* ---------- Écrans moyens et petits ---------- */
@media (max-width: 1080px) {
  .o-barre nav a.o-lien-section { display: none; }
}
@media (max-width: 1024px) {
  .o-colonnes, .o-encoche-grille, .o-geste, .o-nouv-large { grid-template-columns: 1fr; gap: 40px; }
  .o-telecharger { grid-template-columns: auto 1fr; }
  .o-telecharger > .o-bouton { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 860px) {
  .o-deux, .o-galerie, .o-grille, .o-etapes, .o-alpha, .o-etapes-encoche { grid-template-columns: 1fr; }
  .o-demo-pair, .o-demo-audio { grid-template-columns: 1fr; }
  .o-demo-pair { gap: 32px; }
}
@media (max-width: 700px) {
  .o-film { aspect-ratio: 4 / 5; border-radius: var(--rayon); }
  .o-film-son span { display: none; }
  .o-film-son { padding: 0 12px; }
  .o-demo-gif-card { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .o-demo-before, .o-demo-after { font-size: 11px; padding: 5px 8px; bottom: 8px; }
  .o-demo-before { left: 8px; }
  .o-demo-after { right: 8px; }
}
@media (max-width: 600px) {
  .o-scene { min-height: 420px; }
  .o-orbe-zone { --d: 128px; padding: calc(var(--d) * .36 + 48px) 0 32px; }
  .o-bulle { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 12px; }
  .o-familles > div { grid-template-columns: 1fr; gap: 8px; }
  .o-telecharger { grid-template-columns: 1fr; }
  .o-etapes li { padding: 72px 20px 20px; }
  .o-etapes li::before { left: 20px; top: 20px; }
  .o-cle { flex-direction: column; }
  .o-cle input { flex: none; }
  .o-footer-main { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; }
  .o-footer-tagline { grid-column: 1 / -1; grid-row: 2; }
  .o-footer-studio { grid-column: 2; grid-row: 1; margin: 0; }
  .o-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; }
  .o-footer nav { gap: 0 16px; }
}
@media (max-width: 520px) {
  .o-barre { gap: 8px; }
  .o-barre .o-marque span { display: none; }
  .o-form-noms { grid-template-columns: 1fr; }
  .o-actions .o-bouton { width: 100%; }
}

/* Réduire les animations : la sphère, le décor et le film restent immobiles */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .o-nappe, .o-orbe-flotte, .o-orbe-corps, .o-orbe-ombre { animation: none; }
  .o-bulle, .o-bouton, .o-orbe-coche, .o-evitement, .o-film-bouton { transition-duration: .01s; }
}