/* OFF ZE WALL / V4 - Correctifs et variations d'animation sur V3.
   UI : Segoe UI comme la navigation. Identité et couleurs de la charte conservées. */
:root{--ozw-ui:'Segoe UI',Tahoma,Arial,sans-serif}
html{scroll-padding-top:155px}
.site-header{height:174px}
.site-header.scrolled{height:146px}
.site-brand,.site-header .site-brand{
  box-sizing:border-box; height:100%;align-self:stretch; padding-block:10px;
  display:flex;align-items:center;justify-content:flex-start;
}
.site-brand img,.site-header .site-brand img{height:auto;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:left center}
.site-header.scrolled .site-brand img{height:auto;max-height:100%}
/* Un seul jeu de polices pour les éléments de navigation et les actions. */
.nav-link-custom,.nav-dropdown-toggle,.nav-dropdown-menu a,.header-cta,
.btn-ozw,.text-link,.card-action,.video-trigger,.video-fallback-link,
.footer-talk a,.gallery-zoom,.experience-fx-label,.energy-ticker-stage>span,
.hero-arrow,.stat-label,.eyebrow{font-family:var(--ozw-ui)!important}
.btn-ozw{font-weight:750;letter-spacing:-.01em}
.hero-actions .btn-ozw{font-size:1.13rem}
.header-cta{font-size:19px;font-weight:750;gap:8px}
.header-cta .cta-arrow{font-size:21px}
/* 100 % : un ensemble blanc, sans pourcentage jaune. */
.stats-section .stat-plus{color:#fff}
/* Ticker V4 : succession de "coups" typographiques, rapide atterrissage,
   petit rebond, stabilité, projection en sortie; sans balayage latéral. */
.energy-ticker{height:106px;background:var(--yellow);border-bottom:0;isolation:isolate}
.energy-ticker::before,.energy-ticker::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(13px,4vw,52px);z-index:0;
  background:repeating-linear-gradient(125deg,#161616 0 10px,transparent 10px 24px);
  opacity:.9;pointer-events:none;
}
.energy-ticker::before{left:0}
.energy-ticker::after{right:0;transform:scaleX(-1)}
.energy-ticker-stage{isolation:isolate;z-index:1}
.energy-ticker-stage>span{
  font-weight:900;font-size:clamp(2rem,6vw,5.3rem);line-height:1.06;letter-spacing:-.05em;
  color:#151515;text-transform:uppercase;text-align:center;padding:0 48px;
  animation:ozw-word-impact 11.2s linear infinite;transform-origin:center;
  transform:translateY(140%) scale(.55) rotate(-8deg);
  will-change:transform,opacity,filter;
}
.energy-ticker-stage>span:nth-child(2){animation-delay:2.8s}
.energy-ticker-stage>span:nth-child(3){animation-delay:5.6s}
.energy-ticker-stage>span:nth-child(4){animation-delay:8.4s}
@keyframes ozw-word-impact{
  0%,1%{opacity:0;transform:translateY(125%) scale(.48) rotate(-12deg);filter:blur(13px)}
  4.2%{opacity:1;transform:translateY(-10%) scale(1.2) rotate(3deg);filter:blur(0)}
  6.4%{opacity:1;transform:translateY(3%) scale(.96) rotate(-1.3deg)}
  8.5%,19.8%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}
  24%{opacity:0;transform:translateY(-160%) scale(1.38) rotate(8deg);filter:blur(9px)}
  25%,100%{opacity:0;transform:translateY(-160%) scale(1.38) rotate(8deg);filter:blur(9px)}
}
/* Plus de labels de démo sur les cartes Valeur : la bascule 3D est retenue partout. */
.value-card .hover-effect-label{display:none!important}
.value-card .value-icon{margin-top:0}
.value-card.fx-tilt:hover,.value-card.fx-tilt:focus-visible{
  animation:ozw-tilt .45s ease-out both;
  box-shadow:0 22px 55px rgba(0,0,0,.38);
}
/* Cinq effets comparatifs pour les expériences : chaque carte reste cliquable. */
.experiences-grid>div{perspective:1100px}
.experience-card{
  transform:translateZ(0);transform-origin:center center;
  transition:transform .46s cubic-bezier(.2,.82,.28,1),box-shadow .4s ease;
}
.experience-card>img{transition:transform .55s cubic-bezier(.2,.85,.25,1),filter .5s ease}
.experience-card:focus-within{outline:2px solid var(--pink);outline-offset:3px}
.experience-fx-label{
  position:absolute;top:27px;right:19px;z-index:3;padding:7px 10px;
  color:#fff;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.33);
  font-size:11px;line-height:1.1;font-weight:700;letter-spacing:.02em;
  pointer-events:none;
}
.experience-card.fx-exp-cinema:hover>img,
.experience-card.fx-exp-cinema:focus-within>img{transform:scale(1.21);filter:saturate(1.15)}
.experience-card.fx-exp-cinema:hover .experience-card-body,
.experience-card.fx-exp-cinema:focus-within .experience-card-body{transform:translateY(-11px)}
.experience-card-body{transition:transform .42s cubic-bezier(.22,.8,.25,1)}
.experience-card.fx-exp-rise:hover>img,
.experience-card.fx-exp-rise:focus-within>img{transform:scale(1.14) translateY(-25px);filter:contrast(1.09)}
.experience-card.fx-exp-rise:hover .experience-card-body,
.experience-card.fx-exp-rise:focus-within .experience-card-body{transform:translateY(-17px)}
.experience-card.fx-exp-depth:hover,
.experience-card.fx-exp-depth:focus-within{transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) scale(1.025);box-shadow:24px 30px 30px rgba(0,0,0,.16)}
.experience-card.fx-exp-depth:hover>img,
.experience-card.fx-exp-depth:focus-within>img{transform:scale(1.11)}
.experience-card.fx-exp-wipe::after{
  content:'';position:absolute;z-index:1;inset:-25% -35%;pointer-events:none;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.23) 48%,transparent 68%);
  transform:translateX(-120%) skewX(-12deg);transition:transform .6s ease-out;
}
.experience-card.fx-exp-wipe:hover::after,
.experience-card.fx-exp-wipe:focus-within::after{transform:translateX(120%) skewX(-12deg)}
.experience-card.fx-exp-wipe:hover>img,
.experience-card.fx-exp-wipe:focus-within>img{transform:scale(1.12) translateX(10px)}
.experience-card.fx-exp-pop:hover>img,
.experience-card.fx-exp-pop:focus-within>img{animation:ozw-exp-pop .64s cubic-bezier(.18,.77,.26,1) both}
@keyframes ozw-exp-pop{0%{transform:scale(1)}30%{transform:scale(1.19)}55%{transform:scale(1.05)}78%{transform:scale(1.14)}100%{transform:scale(1.095)}}
.experience-card.fx-exp-pop:not(:hover):not(:focus-within)>img{animation:none}
/* Galerie : strict ratio 1/1 quelle que soit la largeur des grilles. */
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:12px}
.gallery-grid .gallery-item{
  display:block;position:relative;width:100%;height:auto;aspect-ratio:1/1;min-height:0;
}
.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La section de contact et son formulaire ont été retirés. Le lien #contact
   mène maintenant au footer (la page Contact sera créée plus tard). */
.site-footer{scroll-margin-top:155px}
@media(min-width:1200px) and (max-width:1399px){
  .site-header{height:148px}.site-header.scrolled{height:132px}
  .header-cta{font-size:18px}
}
@media(max-width:1199px){
  html{scroll-padding-top:156px}
  .site-header,.site-header.scrolled{height:156px}
  .site-brand,.site-header .site-brand{padding-block:8px}
  .primary-nav,.site-header.scrolled .primary-nav{top:156px;height:calc(100dvh - 156px)}
  .header-cta{font-size:16px}
  .site-footer{scroll-margin-top:156px}
}
@media(max-width:767px){
  .energy-ticker{height:82px}
  .energy-ticker-stage>span{font-size:clamp(2rem,7vw,3.7rem)}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:10px}
}
@media(max-width:575px){
  html{scroll-padding-top:144px}
  .site-header,.site-header.scrolled{height:144px}
  .site-brand,.site-header .site-brand{padding-block:8px}
  .primary-nav,.site-header.scrolled .primary-nav{top:144px;height:calc(100dvh - 144px)}
  .header-cta{font-size:14px}
  .hero-actions .btn-ozw{font-size:1.02rem}
  .energy-ticker{height:74px}
  .energy-ticker::before,.energy-ticker::after{width:11px}
  .energy-ticker-stage>span{font-size:clamp(1.85rem,7.8vw,2.8rem);padding:0 16px;letter-spacing:-.06em}
  .experience-fx-label{font-size:10px;top:23px;right:13px;padding:6px 8px}
  .gallery-grid{gap:8px}
  .site-footer{scroll-margin-top:144px}
}
@media(max-width:375px){
  .site-header,.site-header.scrolled{height:128px}
  .primary-nav,.site-header.scrolled .primary-nav{top:128px;height:calc(100dvh - 128px)}
  .site-footer{scroll-margin-top:128px}
}
@media(prefers-reduced-motion:reduce){
  .energy-ticker-stage>span{animation:none!important;opacity:0;transform:none;filter:none}
  .energy-ticker-stage>span:first-child{opacity:1}
  .experience-card,.experience-card>img,.experience-card-body{transition:none!important;animation:none!important}
  .experience-card:hover,.experience-card:focus-within{transform:none!important}
  .experience-card:hover>img,.experience-card:focus-within>img{transform:none!important}
  .experience-card.fx-exp-wipe::after{display:none}
}