:root{
  --blue:#0B79B6;
  --red:#C21F3C;
  --green:#4FAE5A;
  --black:#0A0A0A;
  --white:#FFFFFF;
  --text:#101418;
  --muted:#2E3A44;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:"Titillium Web","Segoe UI",Arial,sans-serif;line-height:1.5;color:var(--text);background:#000}

.parallax-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:var(--black);transition:background-color .7s ease}
body.aligned .parallax-bg{background:var(--red)}
.parallax-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--white);
  opacity:0;
  transition:opacity .14s ease;
}
body.aligned .parallax-bg::after{opacity:.12}
.layer{position:absolute;left:50%;object-fit:contain;will-change:transform;transition:transform .12s linear;opacity:1;z-index:2}
.layer-blue{top:50%;width:50vw;transform:translate(-50%,-50%) translateY(var(--off-blue, -45vh))}
.layer-green{bottom:0;width:59vw;transform:translate(-50%,0) translateY(var(--off-green, 55vh))}
.layer-black{bottom:0;width:68vw;transform:translate(-50%,0) translateY(var(--off-black, 85vh))}
.float-card{
  position:absolute;
  width:56px;
  height:86px;
  border:4px solid var(--black);
  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  opacity:1;
  animation:drift 8s ease-in-out infinite;
  transform:translate(var(--jx, 0px), var(--jy, 0px)) rotate(calc(var(--rot, 0deg) + var(--rot-delta, 0deg)));
  transition:transform .22s ease-out, opacity .35s ease;
  z-index:1;
}
body:not(.cards-live) .float-card{opacity:0}
body.cards-live .float-card{opacity:1}
.fc-blue{background:var(--blue)}
.fc-red{background:var(--red)}
.fc-green{background:var(--green)}
.float-card.a{left:8%;top:18%;--rot:-14deg;animation-delay:.1s}
.float-card.b{left:18%;top:68%;--rot:11deg;animation-delay:.7s}
.float-card.c{left:77%;top:22%;--rot:9deg;animation-delay:1.2s}
.float-card.d{left:87%;top:72%;--rot:-10deg;animation-delay:1.8s}
.float-card.e{left:45%;top:12%;--rot:6deg;animation-delay:2.3s}
.float-card.f{left:56%;top:82%;--rot:-8deg;animation-delay:2.9s}
.float-card.g{left:6%;top:40%;--rot:-6deg;animation-delay:.2s}
.float-card.h{left:14%;top:86%;--rot:14deg;animation-delay:.9s}
.float-card.i{left:28%;top:24%;--rot:-13deg;animation-delay:1.5s}
.float-card.j{left:33%;top:74%;--rot:8deg;animation-delay:2.2s}
.float-card.k{left:49%;top:34%;--rot:-12deg;animation-delay:2.7s}
.float-card.l{left:62%;top:14%;--rot:10deg;animation-delay:3.1s}
.float-card.m{left:71%;top:58%;--rot:-9deg;animation-delay:3.6s}
.float-card.n{left:82%;top:8%;--rot:7deg;animation-delay:4s}
.float-card.o{left:90%;top:48%;--rot:-11deg;animation-delay:4.5s}
.float-card.p{left:40%;top:90%;--rot:9deg;animation-delay:5s}
.float-card.q{left:24%;top:54%;--rot:-7deg;animation-delay:5.4s}
.float-card.r{left:64%;top:88%;--rot:13deg;animation-delay:5.9s}
@keyframes drift{
  0%,100%{margin-top:0}
  50%{margin-top:-12px}
}

.container{max-width:1120px;margin:0 auto;padding:40px}

.hero{
  min-height:60vh;
  display:flex;
  align-items:center;
  text-align:center;
  background:
  url("../img/P1183441-scaled-e1751394701437.jpg") center/cover no-repeat,
  var(--blue);
  color:var(--white);
  position:relative;
  overflow:hidden
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.2);
  z-index:0;
}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:clamp(32px,5vw,64px);line-height:1.05;margin:0 0 14px;letter-spacing:-.02em}
.hero h1,.subtitle{text-shadow:0 0 40px rgba(0,0,0,1),0 0 84px rgba(0,0,0,.92),0 14px 56px rgba(0,0,0,.88)}
.subtitle{max-width:760px;margin:0 auto 20px;color:#eaf5ff;font-size:clamp(18px,2.1vw,24px)}

.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 17px;border-radius:12px;text-decoration:none;margin:6px;transition:transform .28s ease,box-shadow .28s ease,background .28s ease,color .28s ease,border-color .28s ease;font-weight:700;border:4px solid var(--black)}
.btn:hover{transform:translateY(-7px) scale(1.01);box-shadow:0 18px 34px rgba(0,0,0,.2);border-color:var(--green)}
.btn.large{padding:14px 22px}
.btn{color:var(--white);background:var(--red);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn.ghost{color:var(--white);background:transparent;border:4px solid rgba(255,255,255,.85)}
.hero .btn.ghost{background:var(--blue);border-color:var(--white);color:var(--white)}
.btn.blue{background:var(--blue);border-color:var(--black);color:var(--white)}

.section,.final-cta{padding:130px 0}
.section{margin:48px 0 96px}
.section .container,.final-cta .container{background:var(--white);border-radius:20px;border:12px solid #dbe6ef;box-shadow:0 10px 26px rgba(0,0,0,.08)}
.section .container,.final-cta .container{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.section .container:hover,.final-cta .container:hover{transform:translateY(-7px) scale(1.005);box-shadow:0 18px 34px rgba(0,0,0,.14)}

.section-blue .container{border-color:rgba(11,121,182,.85)}
.section-red .container{border-color:rgba(194,31,60,.85)}
.section-green .container{border-color:rgba(79,174,90,.85)}

h2{font-size:clamp(27px,3.4vw,42px);line-height:1.12;margin:0 0 18px;color:var(--black)}
h3{font-size:1.3rem;margin:0 0 8px;color:var(--blue)}
p{font-size:1.05rem;color:var(--muted)}
h1,h2,h3{text-align:center}

.video-wrap{position:relative;padding-top:56.25%;margin:16px 0 18px;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.25);border:12px solid var(--black)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--white);border:12px solid rgba(11,121,182,.35);border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(0,0,0,.08);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card:hover{transform:translateY(-7px) scale(1.01);box-shadow:0 18px 34px rgba(0,0,0,.14);border-color:var(--green)}

ol{padding-left:22px}
ol li{margin:8px 0;font-weight:700;color:var(--black)}
.uses{padding-left:20px}
.uses a{color:var(--black);font-weight:700}
blockquote{color:var(--black);border:12px solid var(--red);background:#eaf4fb;padding:12px 14px;border-radius:12px;margin:16px 0 12px}
blockquote strong{font-weight:800;letter-spacing:.01em}
blockquote{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease}
blockquote:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 18px 34px rgba(0,0,0,.16);border-color:var(--green);background:#fff}

.inline-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.photos-wide{grid-template-columns:1fr}
.section-photo{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:12px solid var(--black);box-shadow:0 8px 20px rgba(0,0,0,.14)}
.section-photo.wide{margin-top:14px;aspect-ratio:auto;height:auto;max-height:none;object-fit:contain;background:#fff}
.quote-cover{width:auto;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:8px 0 14px}

.final-cta{text-align:center}
.final-cta .container{background:var(--black);color:var(--white);border-color:var(--white)}
.final-cta h2{color:var(--white)}
.final-cta .btn{background:var(--green)}
.final-cta .btn.ghost{background:transparent;border-color:rgba(255,255,255,.75)}
.final-cta .btn.blue{background:var(--blue);border-color:var(--black);color:var(--white)}
.final-cta{padding-bottom:0;margin-bottom:0}

.logo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0 18px;background:#fff;padding:10px}
.logo-grid img{width:100%;height:68px;object-fit:contain;background:#fff;border:0;padding:8px;filter:grayscale(1) contrast(1.15);border-radius:0}
.logo-grid img[alt="CNAM"]{width:50%;justify-self:center}
.logo-grid img[alt="Université Paris 8"]{filter:grayscale(1) contrast(1.2);height:56px}
.site-footer{padding:0 0 14px;text-align:center;color:var(--black);margin-top:0}
.site-footer a{color:var(--black);font-weight:700}

a{color:var(--black)}
.sticky-buy{display:none}

.reveal{position:relative;z-index:2;overflow-x:clip;overflow-y:visible}
.reveal-panel{
  transition:transform .62s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
.reveal.side-left .reveal-panel{transform:translateX(calc(-1 * var(--travel-x, 140px)))}
.reveal.side-right .reveal-panel{transform:translateX(var(--travel-x, 140px))}
.reveal.is-visible .reveal-panel{transform:translateX(0)}
.reveal.side-left.exit .reveal-panel{transform:translateX(var(--travel-x, 140px))}
.reveal.side-right.exit .reveal-panel{transform:translateX(calc(-1 * var(--travel-x, 140px)))}

@media (max-width:980px){.grid-3{grid-template-columns:1fr}}

@media (max-width:800px){
  .container{padding:20px}
  h2{font-size:clamp(24px,8vw,32px)}
  .inline-photos,.photos-wide{grid-template-columns:1fr}
  .section-photo.wide{aspect-ratio:16/10}
  .sticky-buy{display:block;position:fixed;left:12px;right:12px;bottom:12px;text-align:center;background:var(--red);color:var(--white);padding:12px 16px;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.34);border:6px solid var(--black);z-index:9999}
  .float-card{width:38px;height:60px;border-width:3px}
  .logo-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:981px){
  .layer-blue{width:auto;height:50vh}
  .layer-green{width:auto;height:59vh}
  .layer-black{width:auto;height:68vh}
}