:root{--bg:#080808;--surface:#101010;--surface-2:#171717;--text:#f4f3f1;--muted:#a4a3a2;--line:rgba(255,255,255,.11);--red:#e5242b;--red-soft:#ff4b51;--container:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}.container{width:min(var(--container),calc(100% - 48px));margin:auto}.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;padding:22px 0;transition:background .35s,padding .35s,border-color .35s;border-bottom:1px solid transparent}.site-header.scrolled{background:rgba(8,8,8,.86);backdrop-filter:blur(16px);border-color:var(--line);padding:14px 0}.nav-wrap{display:flex;align-items:center;justify-content:space-between}.brand{font:700 15px/1 "Manrope",sans-serif;letter-spacing:.08em;display:flex;align-items:center;gap:8px}.brand em{font-style:normal;color:var(--red)}.brand-mark{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--red);color:var(--red);font-size:12px;border-radius:7px}.nav-links{display:flex;gap:29px;align-items:center;color:#d5d4d3;font-size:13px}.nav-links>a:not(.button){transition:color .2s}.nav-links>a:not(.button):hover{color:white}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--red);color:white;padding:14px 21px;border-radius:7px;font-weight:600;font-size:13px;transition:transform .25s,background .25s,box-shadow .25s}.button:hover{transform:translateY(-2px);background:#f12c33;box-shadow:0 9px 25px rgba(229,36,43,.2)}.button span{font-size:16px}.button-small{padding:10px 15px;font-size:12px}.menu-toggle{display:none;background:none;border:0;width:40px;height:35px;padding:7px}.menu-toggle span{display:block;width:100%;height:1px;background:white;margin:6px 0}.hero{min-height:800px;position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 60% 85% at 100% 50%,#211015 0%,transparent 70%),#090909}.hero-grid{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(90deg,black,transparent 85%)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#090909 15%,rgba(9,9,9,.76) 48%,rgba(9,9,9,.08) 100%)}.hero-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(3px);pointer-events:none}.glow-one{width:520px;height:520px;right:-150px;top:120px;background:radial-gradient(circle,rgba(221,32,40,.24),rgba(221,32,40,0) 67%)}.glow-two{width:460px;height:200px;right:10%;bottom:-100px;background:radial-gradient(ellipse,rgba(158,13,25,.28),transparent 65%)}.hero-content{padding:160px 0 130px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--red-soft);font-weight:700;margin:0 0 20px}.hero h1,.section-heading h2,.experience h2,.faq h2{font:700 clamp(43px,5.7vw,76px)/1.06 "Manrope",sans-serif;letter-spacing:-.055em;margin:0}.hero h1 span,.section-heading h2 span,.experience h2 span,.faq h2 span{color:var(--red-soft)}.hero-copy{max-width:490px;color:#c0bebe;font-size:16px;margin:27px 0 31px}.hero-actions{display:flex;align-items:center;gap:29px}.text-link{font-size:13px;font-weight:600;display:inline-flex;gap:11px;align-items:center;color:#eee}.text-link i{font-style:normal;color:var(--red);font-size:18px;transition:transform .2s}.text-link:hover i{transform:translateY(3px)}.hero-points{display:flex;gap:34px;margin-top:74px}.hero-points div{display:flex;align-items:center;gap:9px;color:#b8b7b6;font-size:12px}.hero-points b{font:500 10px "Manrope";color:var(--red);border:1px solid rgba(229,36,43,.5);padding:3px 5px;border-radius:4px}.hero-orbit{position:absolute;width:610px;height:610px;right:4%;top:50%;transform:translateY(-50%);z-index:-1}.orbit-line{position:absolute;inset:50px;border:1px solid rgba(255,255,255,.11);border-radius:50%;transform:rotate(-25deg)}.orbit-line:after{content:"";position:absolute;inset:68px;border:1px solid rgba(229,36,43,.26);border-radius:50%}.orb{position:absolute;border-radius:50%;display:grid;place-items:center}.orb-main{width:170px;height:170px;top:190px;left:205px;background:linear-gradient(145deg,#e22c32,#751116);box-shadow:0 0 80px rgba(224,35,43,.43),inset 0 0 35px rgba(255,255,255,.15);font:700 32px "Manrope";letter-spacing:-.1em}.orb-small{width:22px;height:22px;background:#ed3a41;top:70px;right:130px;box-shadow:0 0 25px #e5242b}.signal{position:absolute;right:35px;bottom:145px;display:flex;align-items:flex-end;gap:5px}.signal i{width:3px;background:var(--red);display:block;border-radius:2px}.signal i:nth-child(1){height:8px}.signal i:nth-child(2){height:16px}.signal i:nth-child(3){height:25px}.scroll-cue{position:absolute;bottom:28px;left:max(24px,calc((100% - var(--container))/2));font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#838181;display:flex;gap:11px;align-items:center}.scroll-cue span{width:33px;height:1px;background:var(--red)}.section{padding:140px 0}.benefits{background:#0b0b0b}.section-heading h2{font-size:clamp(36px,4vw,57px)}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}.benefit-card{background:var(--surface);padding:31px 25px 28px;border:1px solid transparent;border-radius:13px;min-height:265px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s,background .3s}.benefit-card:hover{transform:translateY(-7px);background:#141414;border-color:rgba(229,36,43,.27)}.benefit-card:after{content:"";position:absolute;width:150px;height:100px;background:radial-gradient(ellipse,rgba(229,36,43,.13),transparent 70%);right:-50px;bottom:-35px}.icon-box{width:35px;height:35px;display:grid;place-items:center;color:var(--red-soft);background:rgba(229,36,43,.09);border-radius:8px;font-size:18px}.benefit-card h3{font:700 18px "Manrope";letter-spacing:-.03em;margin:30px 0 10px}.benefit-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.card-number{position:absolute;top:28px;right:25px;color:#555;font-size:11px}.experience{background:#101010}.experience-layout,.faq-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.experience-copy>p:not(.eyebrow),.faq-intro>p:not(.eyebrow){color:var(--muted);max-width:430px;font-size:15px;margin:24px 0}.device-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}.device-list span{font-size:11px;color:#d2d0cf;padding:7px 11px;border-radius:5px;background:#1d1d1d}.device-stage{height:420px;position:relative;background:radial-gradient(ellipse at center,rgba(157,19,25,.22),transparent 52%);border-radius:20px}.ambient-light{position:absolute;width:72%;height:12px;background:#db252c;filter:blur(30px);opacity:.4;bottom:62px;left:14%}.tv-device,.laptop-device,.tablet-device,.phone-device{position:absolute;background:#050505;border:2px solid #393939;box-shadow:20px 20px 38px rgba(0,0,0,.35)}.tv-device{width:330px;height:210px;right:70px;top:46px;border-radius:10px;padding:8px}.tv-screen,.laptop-screen,.tablet-screen,.phone-screen{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 25%,#a81820,transparent 33%),linear-gradient(135deg,#202020,#0b0b0b)}.tv-screen span{position:absolute;left:27px;bottom:43px;font:600 12px "Manrope";letter-spacing:.2em}.tv-screen b{position:absolute;left:27px;bottom:18px;color:var(--red);font:700 26px "Manrope"}.tv-screen i,.laptop-screen i,.phone-screen i{position:absolute;width:160px;height:1px;background:rgba(255,255,255,.45);left:27px;bottom:14px}.tv-stand{position:absolute;width:80px;height:15px;border-bottom:3px solid #313131;bottom:-17px;left:123px}.laptop-device{width:248px;height:153px;bottom:44px;left:26px;border-radius:7px;padding:5px;z-index:2}.laptop-screen span,.tablet-screen span,.phone-screen span{position:absolute;top:15px;left:17px;color:var(--red-soft);font:700 15px "Manrope"}.laptop-screen i{width:100px;left:17px;bottom:13px}.laptop-base{position:absolute;width:283px;height:7px;background:#555;bottom:-10px;left:-19px;border-radius:0 0 18px 18px}.tablet-device{width:104px;height:140px;right:24px;bottom:25px;border-radius:9px;padding:5px}.tablet-screen{border-radius:4px}.phone-device{width:63px;height:124px;right:136px;bottom:10px;border-radius:10px;padding:4px;z-index:3}.phone-screen{border-radius:6px}.phone-screen span{font-size:18px;left:20px}.phone-screen i{width:24px;left:16px;bottom:17px}.centered{text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:69px}.step{padding:8px 26px 20px;border-left:1px solid var(--line)}.step-index{font:700 50px/1 "Manrope";letter-spacing:-.08em;color:#2a2a2a;margin-bottom:42px;transition:color .25s}.step:hover .step-index{color:var(--red)}.step h3{font:700 19px "Manrope";letter-spacing:-.04em;margin:0 0 8px}.step p{font-size:13px;color:var(--muted);margin:0;max-width:250px}.pricing{background:#0d0d0d}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;align-items:center;max-width:1000px;margin:59px auto 0}.price-card{position:relative;background:#151515;border:1px solid transparent;border-radius:13px;padding:35px 33px;min-height:380px}.price-card.featured{background:linear-gradient(155deg,#211316,#151515 47%);border-color:rgba(229,36,43,.47);padding-top:47px;box-shadow:0 16px 42px rgba(0,0,0,.25)}.popular{position:absolute;right:18px;top:18px;color:var(--red-soft);font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.11em}.plan-label{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--red-soft);font-weight:700;margin:0 0 13px}.price-card h3{font:700 25px "Manrope";letter-spacing:-.05em;margin:0}.price{font-size:14px;color:#d0cdcc;margin:12px 0 26px}.price-card ul{padding:0;margin:0 0 32px;list-style:none;min-height:99px}.price-card li{font-size:12px;color:#aaa7a6;margin:10px 0}.price-card li:before{content:"✓";color:var(--red);margin-right:9px}.price-card .button{width:100%}.button-outline{background:transparent;border:1px solid #4c4b4b;color:#ededed}.button-outline:hover{border-color:var(--red);background:transparent;box-shadow:none}.faq{background:#090909}.faq h2{font-size:clamp(35px,3.7vw,53px)}.accordion{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item button{width:100%;background:none;border:0;color:var(--text);padding:21px 0;display:flex;justify-content:space-between;text-align:left;font:600 15px "Manrope";cursor:pointer}.faq-item button span{color:var(--red);font:400 24px "DM Sans";transition:transform .25s}.faq-item.open button span{transform:rotate(45deg)}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}.faq-answer p{overflow:hidden;margin:0;color:var(--muted);font-size:13px;line-height:1.7}.faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer p{padding-bottom:22px}footer{background:#070707;border-top:1px solid var(--line);padding:50px 0 22px}.footer-top{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:25px}.footer-top p{font-size:13px;color:#999;margin:0}.footer-top nav{display:flex;gap:21px;font-size:12px;color:#b4b2b1}.footer-top nav a:hover{color:var(--red-soft)}.footer-bottom{border-top:1px solid rgba(255,255,255,.07);margin-top:42px;padding-top:20px;display:flex;justify-content:space-between;color:#686766;font-size:11px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:800px){.nav-links{position:absolute;top:100%;left:0;width:100%;display:none;background:#101010;border-bottom:1px solid var(--line);padding:18px 24px 24px;flex-direction:column;align-items:flex-start;gap:18px}.nav-links.open{display:flex}.menu-toggle{display:block}.hero{min-height:760px}.hero-orbit{opacity:.45;right:-260px}.benefit-grid{grid-template-columns:repeat(2,1fr)}.experience-layout,.faq-layout{grid-template-columns:1fr;gap:50px}.device-stage{max-width:550px;width:100%;margin:auto}.steps{grid-template-columns:1fr;gap:20px}.step{padding-left:22px}.step-index{margin-bottom:15px}.pricing-grid{grid-template-columns:1fr;max-width:420px}.footer-top{grid-template-columns:1fr}.footer-top nav{flex-wrap:wrap}.footer-bottom{gap:10px;flex-direction:column}.section{padding:100px 0}}@media(max-width:500px){.container{width:min(100% - 36px,var(--container))}.hero-content{padding-top:138px}.hero h1{font-size:42px}.hero-points{gap:13px;flex-wrap:wrap;margin-top:55px}.hero-points div{font-size:11px}.scroll-cue{display:none}.benefit-grid{grid-template-columns:1fr}.benefit-card{min-height:220px}.device-stage{height:310px;transform:scale(.78);transform-origin:center;margin:-34px 0}.tv-device{right:20px}.tablet-device{right:-20px}.phone-device{right:80px}.laptop-device{left:-25px}.section-heading h2{font-size:37px}.hero-actions{gap:19px}.button{padding:13px 15px}.faq-layout{gap:35px}}
.brand--image{display:flex;align-items:center;height:46px}.brand-logo{display:block;width:138px;height:46px;object-fit:contain;object-position:left center}.brand--footer{height:38px}.brand--footer .brand-logo{width:112px;height:38px}.device-logo{position:absolute;inset:0;margin:auto;max-width:82%;max-height:76%;width:auto;height:auto;object-fit:contain}.device-logo--tv{max-width:62%;max-height:72%}.device-logo--laptop{max-width:68%;max-height:71%}.device-logo--tablet{max-width:83%;max-height:67%}.device-logo--phone{max-width:90%;max-height:55%}@media(max-width:800px){.brand--image{height:42px}.brand-logo{width:126px;height:42px}.brand--footer{height:36px}.brand--footer .brand-logo{width:106px;height:36px}}@media(max-width:500px){.brand--image{height:36px}.brand-logo{width:110px;height:36px}.brand--footer{height:34px}.brand--footer .brand-logo{width:100px;height:34px}}

/* Ajustements d'échelle : les images gardent toujours leur ratio natif. */
@media (min-width: 801px) {
  .site-header { padding: 22px 0; }
  .site-header.scrolled { padding: 16px 0; }
  .brand--image { height: 220px; }
  .brand-logo { width: 330px; height: auto; max-height: 220px; object-fit: contain; }
  .nav-links { gap: 34px; font-size: 15px; }
  .button-small { padding: 14px 21px; font-size: 14px; }
  .brand--footer { height: 120px; }
  .brand--footer .brand-logo { width: 180px; height: auto; max-height: 120px; }
  .footer-top { gap: 32px; }
}

/* Le téléphone utilise toute la largeur disponible sans sortir de son écran. */
.device-logo--phone { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }

@media (min-width: 501px) and (max-width: 800px) {
  .site-header { padding: 18px 0; }
  .brand--image { height: 174px; }
  .brand-logo { width: 260px; height: auto; max-height: 174px; }
  .brand--footer { height: 100px; }
  .brand--footer .brand-logo { width: 150px; height: auto; max-height: 100px; }
}

@media (min-width: 801px) and (max-width: 1020px) {
  .brand--image { height: 160px; }
  .brand-logo { width: 240px; max-height: 160px; }
  .nav-links { gap: 24px; font-size: 14px; }
  .button-small { padding: 12px 17px; }
}

@media (max-width: 500px) {
  .site-header { padding: 14px 0; }
  .site-header.scrolled { padding: 10px 0; }
  .brand--image { height: 120px; }
  .brand-logo { width: 180px; height: auto; max-height: 120px; }
  .brand--footer { height: 94px; }
  .brand--footer .brand-logo { width: 141px; height: auto; max-height: 94px; }
}

/* Header dans le flux de la page : aucun élément ne reste à l'écran au scroll. */
.site-header {
  position: relative;
  z-index: 1;
  background: transparent;
  border-bottom-color: transparent;
  transition: none;
}

.site-header.scrolled {
  background: transparent;
  border-bottom-color: transparent;
  padding: 22px 0;
}

.nav-links > a:not(.button) { font-weight: 700; }

@media (min-width: 801px) {
  .nav-links {
    transform: translateY(-34px);
    font-size: 16px;
  }
  .nav-links .button-small { padding: 15px 23px; font-size: 15px; }
  .hero-content { padding-top: 48px; }
}

@media (min-width: 501px) and (max-width: 800px) {
  .site-header.scrolled { padding: 18px 0; }
  .hero-content { padding-top: 48px; }
}

@media (max-width: 500px) {
  .site-header.scrolled { padding: 14px 0; }
  .hero-content { padding-top: 46px; }
}

/* Visuel photo du hero : la source sera ajoutée localement dans /images. */
.hero-media {
  position: absolute;
  z-index: 0;
  top: 55px;
  right: 0;
  bottom: 55px;
  width: 56%;
  overflow: hidden;
  border-radius: 24px 0 0 24px;
  box-shadow: -28px 0 55px rgba(229, 36, 43, .08);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #090909 0%, rgba(9, 9, 9, .82) 16%, rgba(9, 9, 9, .16) 52%, rgba(9, 9, 9, .28) 100%), linear-gradient(0deg, rgba(9, 9, 9, .55), transparent 42%);
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 801px) {
  .hero-media {
    top: 145px;
    right: 0;
    bottom: auto;
    width: min(56%, 900px);
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

.hero::after { z-index: 1; }
.hero-content { position: relative; z-index: 2; }
.scroll-cue { z-index: 2; }

@media (max-width: 800px) {
  .hero-media {
    top: auto;
    right: -10%;
    bottom: 36px;
    width: 82%;
    height: 270px;
    opacity: .62;
    border-radius: 18px 0 0 18px;
  }
  .hero-media::after { background: linear-gradient(90deg, #090909 0%, rgba(9, 9, 9, .72) 34%, rgba(9, 9, 9, .12) 100%), linear-gradient(0deg, rgba(9, 9, 9, .62), transparent 55%); }
}

@media (max-width: 500px) {
  .hero-media {
    right: -18%;
    bottom: 22px;
    width: 100%;
    height: 220px;
    opacity: .5;
  }
}

/* Navigation indépendante de la hauteur du logo, alignée en haut du header. */
@media (min-width: 801px) {
  .nav-wrap { position: relative; align-items: flex-start; }
  .nav-links {
    position: absolute;
    top: 0;
    right: 0;
    transform: none;
    align-items: center;
  }
}

/* Une surface d'écran légèrement plus grande rend le logo du téléphone lisible. */
.phone-device {
  width: 90px;
  height: 158px;
  right: 118px;
  bottom: 4px;
}

.device-logo--phone {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 500px) {
  .phone-device {
    width: 100px;
    height: 175px;
    right: 68px;
    bottom: 2px;
  }
}

/* Décalage léger pour mieux distinguer la tablette du téléphone. */
.tablet-device { transform: translateX(28px); }

/* Contact WhatsApp accessible depuis toute la page. */
.floating-contact {
  position: fixed;
  z-index: 30;
  right: 28px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 19px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .3), 0 5px 18px rgba(229, 36, 43, .28);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.floating-contact span { font-size: 16px; }
.floating-contact:hover { transform: translateY(-3px); background: #f12c33; box-shadow: 0 16px 34px rgba(0, 0, 0, .35), 0 8px 22px rgba(229, 36, 43, .34); }

@media (max-width: 500px) {
  .floating-contact { right: 16px; bottom: 16px; padding: 12px 16px; font-size: 12px; }
}

/* Hero rapproché du header, sans modifier sa composition interne. */
@media (min-width: 801px) {
  .hero-content { padding-top: 16px; }
  .hero-media { top: 72px; }
}

@media (min-width: 501px) and (max-width: 800px) {
  .hero-content { padding-top: 28px; }
  .hero-media { bottom: 58px; }
}

@media (max-width: 500px) {
  .hero-content { padding-top: 28px; }
  .hero-media { bottom: 42px; }
}

/* La composition du hero démarre désormais directement sous le header. */
.hero { align-items: flex-start; }

@media (min-width: 801px) {
  .hero { min-height: 690px; }
  .hero-content { padding-top: 12px; }
  .hero-media { top: 48px; }
}

@media (min-width: 501px) and (max-width: 800px) {
  .hero { min-height: 700px; }
  .hero-content { padding-top: 24px; }
}

@media (max-width: 500px) {
  .hero { min-height: 670px; }
  .hero-content { padding-top: 24px; }
}

/* Hiérarchie renforcée dans les cartes d'avantages. */
.benefit-card h3 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 27px;
  margin-bottom: 12px;
}

.benefit-card p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}

/* Lisibilité renforcée des trois étapes, sans modifier leur hiérarchie. */
.step h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.step p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}

/* Nouvelle grille d'offres : 4 cartes lisibles, avec l'offre annuelle mise en avant. */
.pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
}

.price-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 34px 25px 28px;
  border-color: rgba(255, 255, 255, .08);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(229, 36, 43, .34);
  background: #181818;
}

.price-card.featured {
  z-index: 1;
  transform: scale(1.035);
  background: linear-gradient(155deg, #2a1418 0%, #181112 45%, #151515 100%);
  border-color: rgba(229, 36, 43, .72);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34), 0 0 34px rgba(229, 36, 43, .18);
}

.price-card.featured:hover {
  transform: scale(1.035) translateY(-6px);
  border-color: rgba(255, 75, 81, .9);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .38), 0 0 42px rgba(229, 36, 43, .24);
}

.popular {
  right: 16px;
  top: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 75, 81, .42);
  border-radius: 999px;
  background: rgba(229, 36, 43, .12);
  color: #fff;
}

.price-card h3 {
  font-size: 29px;
  line-height: 1.12;
}

.price {
  color: #fff;
  font: 800 42px/1 "Manrope", sans-serif;
  letter-spacing: -.04em;
  margin: 16px 0 30px;
}

.price-card ul {
  flex: 1;
  min-height: 132px;
  margin-bottom: 34px;
}

.price-card li {
  color: #d0cdcc;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  margin: 12px 0;
}

@media (max-width: 1020px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }

  .price-card.featured {
    transform: none;
  }

  .price-card.featured:hover {
    transform: translateY(-6px);
  }
}

@media (max-width: 800px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }
}

@media (max-width: 560px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .price-card {
    min-height: 0;
  }

  .price-card ul {
    min-height: 0;
  }

  .price {
    font-size: 38px;
  }
}

/* Couche d'animations premium : visible sans JS, spectaculaire quand JS est actif. */
.reveal,
.hero-media,
.faq-item,
.tv-device,
.laptop-device,
.tablet-device,
.phone-device {
  opacity: 1;
}

.animations-ready .reveal,
.animations-ready .hero-media,
.animations-ready .faq-item,
.animations-ready .reveal-device {
  opacity: 0;
  transition-property: opacity, transform, filter, box-shadow;
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(.16, .84, .22, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.animations-ready .reveal-up {
  transform: translate3d(0, 140px, 0) scale(.86);
}

.animations-ready .reveal-left {
  transform: translate3d(max(-300px, -22vw), 0, 0) scale(.9);
}

.animations-ready .reveal-right {
  transform: translate3d(min(300px, 22vw), 0, 0) scale(.9);
}

.animations-ready .reveal-scale,
.animations-ready .reveal-pop {
  transform: translate3d(0, 120px, 0) scale(.84);
}

.animations-ready .reveal-heading-part {
  transition-duration: 1050ms;
}

.animations-ready .hero h1.reveal {
  transform: translate3d(max(-340px, -24vw), 36px, 0) scale(.9);
  transition-duration: 1120ms;
}

.animations-ready .hero-copy {
  transition-delay: 220ms;
}

.animations-ready .hero-actions {
  transition-delay: 420ms;
}

.animations-ready .hero-points {
  transition-delay: 640ms;
}

.animations-ready .hero-media {
  transform: translate3d(min(360px, 26vw), 0, 0) scale(1.08);
  filter: saturate(.72) brightness(.72) blur(1.5px);
  transition-duration: 1250ms;
  transition-delay: 260ms;
}

.animations-ready .benefit-card,
.animations-ready .step,
.animations-ready .price-card,
.animations-ready .faq-item {
  transform: translate3d(0, 145px, 0) scale(.84);
  transition-duration: 1080ms;
}

.animations-ready .device-stage {
  transform: translate3d(min(340px, 26vw), 0, 0) scale(.84);
  transition-duration: 1180ms;
}

.animations-ready .reveal-device-main {
  transform: translate3d(0, 120px, 0) scale(.82);
}

.animations-ready .reveal-device-left {
  transform: translate3d(max(-240px, -18vw), 110px, 0) scale(.82);
}

.animations-ready .reveal-device-right {
  transform: translate3d(min(240px, 18vw), 100px, 0) scale(.82);
}

.animations-ready .reveal-device-front {
  transform: translate3d(min(220px, 18vw), 130px, 0) scale(.8);
}

.animations-ready .price-card.featured.reveal-pop {
  transform: translate3d(min(320px, 24vw), 0, 0) scale(.8);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34), 0 0 72px rgba(229, 36, 43, .42);
  transition-duration: 1240ms;
}

.animations-ready .reveal-card-left {
  transform: translate3d(max(-320px, -24vw), 55px, 0) scale(.82);
}

.animations-ready .reveal-card-right {
  transform: translate3d(min(320px, 24vw), 55px, 0) scale(.82);
}

.animations-ready .reveal-card-bottom-left {
  transform: translate3d(max(-190px, -14vw), 150px, 0) scale(.84);
}

.animations-ready .reveal-card-bottom-right {
  transform: translate3d(min(190px, 14vw), 150px, 0) scale(.84);
}

.animations-ready .visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.animations-ready .tablet-device.visible {
  transform: translateX(28px);
}

.animations-ready .price-card.featured.visible {
  transform: scale(1.035);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34), 0 0 34px rgba(229, 36, 43, .18);
}

.animations-ready .price-card.featured.visible:not(:hover) {
  animation: featured-arrival 950ms cubic-bezier(.16, .84, .22, 1) both;
}

@keyframes featured-arrival {
  0% {
    transform: scale(.8);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34), 0 0 72px rgba(229, 36, 43, .42);
  }
  72% {
    transform: scale(1.075);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .42), 0 0 58px rgba(229, 36, 43, .34);
  }
  100% {
    transform: scale(1.035);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34), 0 0 34px rgba(229, 36, 43, .18);
  }
}

.benefit-card:hover,
.animations-ready .benefit-card.visible:hover {
  transform: translateY(-9px);
  border-color: rgba(229, 36, 43, .4);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22), 0 0 24px rgba(229, 36, 43, .08);
}

.price-card:hover,
.animations-ready .price-card.visible:hover {
  transform: translateY(-8px);
  border-color: rgba(229, 36, 43, .42);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .26), 0 0 25px rgba(229, 36, 43, .1);
}

.price-card.featured:hover,
.animations-ready .price-card.featured.visible:hover {
  transform: scale(1.035) translateY(-8px);
  border-color: rgba(255, 75, 81, .95);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .42), 0 0 48px rgba(229, 36, 43, .28);
}

.button:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
}

.button-outline:hover {
  border-color: var(--red);
  box-shadow: 0 0 18px rgba(229, 36, 43, .12);
}

.nav-links > a:not(.button) {
  position: relative;
}

.nav-links > a:not(.button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--red-soft);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .25s ease, transform .25s ease;
}

.nav-links > a:not(.button):hover::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 1020px) {
  .animations-ready .price-card.featured.visible,
  .animations-ready .price-card.featured.visible:hover {
    transform: none;
  }

  .animations-ready .price-card.featured.visible:hover {
    transform: translateY(-8px);
  }
}

@media (max-width: 800px) {
  .animations-ready .reveal-up,
  .animations-ready .benefit-card,
  .animations-ready .step,
  .animations-ready .price-card,
  .animations-ready .faq-item {
    transform: translate3d(0, 82px, 0) scale(.88);
  }

  .animations-ready .reveal-left {
    transform: translate3d(-24vw, 0, 0) scale(.9);
  }

  .animations-ready .reveal-right {
    transform: translate3d(24vw, 0, 0) scale(.9);
  }

  .animations-ready .hero h1.reveal {
    transform: translate3d(-24vw, 26px, 0) scale(.92);
  }

  .animations-ready .hero-media {
    transform: translate3d(24vw, 0, 0) scale(1.06);
  }

  .animations-ready .device-stage {
    transform: translate3d(22vw, 0, 0) scale(.88);
  }

  .animations-ready .reveal-device-main {
    transform: translate3d(0, 70px, 0) scale(.86);
  }

  .animations-ready .reveal-device-left {
    transform: translate3d(-20vw, 68px, 0) scale(.86);
  }

  .animations-ready .reveal-device-right {
    transform: translate3d(20vw, 64px, 0) scale(.86);
  }

  .animations-ready .reveal-device-front {
    transform: translate3d(18vw, 78px, 0) scale(.84);
  }

  .animations-ready .reveal-card-left {
    transform: translate3d(-25vw, 44px, 0) scale(.86);
  }

  .animations-ready .reveal-card-right {
    transform: translate3d(25vw, 44px, 0) scale(.86);
  }

  .animations-ready .reveal-card-bottom-left {
    transform: translate3d(-16vw, 84px, 0) scale(.88);
  }

  .animations-ready .reveal-card-bottom-right {
    transform: translate3d(16vw, 84px, 0) scale(.88);
  }
}

@media (max-width: 500px) {
  .animations-ready .device-stage.reveal-right {
    transform: translate3d(22vw, 0, 0) scale(.7);
  }

  .animations-ready .device-stage.reveal-right.visible {
    transform: scale(.78);
  }

  .animations-ready .tablet-device.visible {
    transform: translateX(28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .animations-ready .reveal,
  .animations-ready .hero-media,
  .animations-ready .faq-item,
  .animations-ready .reveal-device {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-delay: 0ms !important;
  }

  .animations-ready .tablet-device {
    transform: translateX(28px) !important;
  }

  .animations-ready .price-card.featured {
    transform: scale(1.035) !important;
  }
}

@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .animations-ready .price-card.featured {
    transform: none !important;
  }
}

@media (max-width: 500px) and (prefers-reduced-motion: reduce) {
  .animations-ready .device-stage.reveal-right {
    transform: scale(.78) !important;
  }
}
/* =========================================================
   CORRECTION POSITION DES TITRES + ANIMATIONS
   ========================================================= */

/* Les titres restent toujours au-dessus des cartes */
.section-heading {
  position: relative;
  z-index: 4;
  margin-bottom: 0;
}

/* Les cartes restent sous leurs titres */
.benefit-grid,
.steps,
.pricing-grid {
  position: relative;
  z-index: 1;
}

/* Empêche les grosses animations de provoquer des chevauchements */
.benefits,
.how,
.pricing {
  overflow: hidden;
}

/* HERO : stabilise la position du contenu */
.hero-content {
  position: relative;
  z-index: 2;
}

.hero h1 {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}

/* Les titres de section continuent à s'animer,
   mais sans partir latéralement derrière les cartes */
.animations-ready .section-heading .reveal-heading-part {
  transform: translate3d(0, 72px, 0) scale(.94);
}

.animations-ready .section-heading .reveal-heading-part.visible {
  transform: none;
}

/* Remet un espace propre entre les titres et les tuiles */
.benefits .benefit-grid {
  margin-top: 60px;
}

.how .steps {
  margin-top: 69px;
}

.pricing .pricing-grid {
  margin-top: 59px;
}

/* Le titre principal garde une grosse animation,
   mais uniquement horizontalement pour éviter
   qu'il touche le texte situé en dessous */
.animations-ready .hero h1.reveal {
  transform: translate3d(-18vw, 0, 0) scale(.94);
}

.animations-ready .hero h1.reveal.visible {
  transform: none;
}

/* Adaptation téléphone / tablette */
@media (max-width: 800px) {

  .animations-ready .section-heading .reveal-heading-part {
    transform: translate3d(0, 48px, 0) scale(.96);
  }

  .animations-ready .hero h1.reveal {
    transform: translate3d(-14vw, 0, 0) scale(.96);
  }

  .benefits .benefit-grid {
    margin-top: 48px;
  }

  .how .steps {
    margin-top: 52px;
  }

  .pricing .pricing-grid {
    margin-top: 48px;
  }
}/* =========================================================
   AJUSTEMENT FINAL POSITION VERTICALE DES TITRES
   ========================================================= */

/* PLUS QU'UN SERVICE, UNE EXPÉRIENCE SANS FRICTION */
.benefits .section-heading {
  transform: translateY(-70px);
}

/* VOTRE ACCÈS EN TROIS MOUVEMENTS */
.how .section-heading {
  transform: translateY(-70px);
}

/* CHOISISSEZ VOTRE EXPÉRIENCE */
.pricing .section-heading {
  transform: translateY(-70px);
}

/* On conserve suffisamment d'espace avant les cartes */
.benefits .benefit-grid {
  margin-top: 20px;
}

.how .steps {
  margin-top: 25px;
}

.pricing .pricing-grid {
  margin-top: 20px;
}

/* Sur téléphone, déplacement moins important */
@media (max-width: 800px) {

  .benefits .section-heading,
  .how .section-heading,
  .pricing .section-heading {
    transform: translateY(-35px);
  }

  .benefits .benefit-grid,
  .how .steps,
  .pricing .pricing-grid {
    margin-top: 25px;
  }
}/* =========================================================
   OFFRE 1 AN — SUPPRESSION DU MOUVEMENT AU SURVOL
   ========================================================= */

/* La meilleure offre reste parfaitement stable à la souris */
.price-card.featured:hover {
  transform: none !important;
}

/* Évite le petit rebond au moment où la souris quitte la carte */
.price-card.featured {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease !important;
}/* =========================================================
   CORRECTION DÉFINITIVE OFFRE 1 AN
   Supprime le rebond au retrait de la souris
   ========================================================= */

/* Désactive l'animation spéciale qui se relançait après le hover */
.animations-ready .price-card.featured.visible:not(:hover) {
  animation: none !important;
}

/* La carte reste parfaitement stable dans son état final */
.animations-ready .price-card.featured.visible {
  transform: scale(1.035) !important;
}

/* Aucun déplacement de la carte au passage de la souris */
.price-card.featured:hover,
.animations-ready .price-card.featured.visible:hover {
  transform: scale(1.035) !important;
}

/* On garde seulement les effets visuels au survol */
.animations-ready .price-card.featured.visible:hover {
  border-color: rgba(255, 75, 81, .95);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, .42),
    0 0 48px rgba(229, 36, 43, .28);
}/* =========================================================
   OFFRE 1 AN — HOVER DOUX SANS REBOND
   ========================================================= */

/* Empêche l'ancienne animation de se relancer
   quand la souris quitte la carte */
.animations-ready .price-card.featured.visible:not(:hover) {
  animation: none !important;
}

/* Position normale de la carte */
.animations-ready .price-card.featured.visible {
  transform: scale(1.035);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* Petit mouvement doux vers le haut au survol */
.price-card.featured:hover,
.animations-ready .price-card.featured.visible:hover {
  transform: scale(1.035) translateY(-8px) !important;
  border-color: rgba(255, 75, 81, .95);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, .42),
    0 0 48px rgba(229, 36, 43, .28);
}/* =========================================================
   OFFRES 1 / 3 / 6 MOIS — HOVER RAPIDE COMME L'OFFRE 1 AN
   ========================================================= */

/* Même vitesse de mouvement pour toutes les cartes */
.price-card {
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease !important;
}

/* 1 mois / 3 mois / 6 mois */
.price-card:not(.featured):hover,
.animations-ready .price-card:not(.featured).visible:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(229, 36, 43, .42);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .26),
    0 0 25px rgba(229, 36, 43, .10);
}/* =========================================================
   OFFRES — ARRIVÉE AU SCROLL PLUS DOUCE
   ========================================================= */

/* Ralentit et adoucit uniquement l'animation d'entrée */
.animations-ready .pricing-grid .price-card.reveal {
  transition:
    opacity 1.25s cubic-bezier(.16, .84, .22, 1),
    transform 1.25s cubic-bezier(.16, .84, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease !important;
}

/* Une fois les cartes arrivées, le hover reste rapide et réactif */
.animations-ready .pricing-grid .price-card.visible {
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease !important;
}/* =========================================================
   OFFRES — ANIMATION D'ENTRÉE VRAIMENT PLUS DOUCE
   ========================================================= */

/* État de départ des offres */
.animations-ready .pricing-grid .price-card.reveal:not(.visible) {
  transition-duration: 1.8s !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}

/* Les cartes arrivent avec une décélération longue et progressive */
.animations-ready .pricing-grid .price-card.reveal-card-left,
.animations-ready .pricing-grid .price-card.reveal-card-right,
.animations-ready .pricing-grid .price-card.reveal-card-bottom-left,
.animations-ready .pricing-grid .price-card.reveal-card-bottom-right {
  transition-duration: 1.8s !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}/* =========================================================
   NAVIGATION — PLUS GRANDE ET PLUS VISIBLE
   ========================================================= */

@media (min-width: 801px) {

  /* Accueil / Nos offres / Comment ça marche / FAQ */
  .nav-links {
    font-size: 17px !important;
    font-weight: 700;
    gap: 38px;
  }

  .nav-links > a:not(.button) {
    padding: 10px 2px;
    letter-spacing: 0.01em;
  }

  /* Bouton Nous contacter */
  .nav-links .button-small {
    font-size: 16px;
    font-weight: 700;
    padding: 15px 23px;
  }
}/* =========================================================
   NAVIGATION — LÉGER DÉCALAGE VERS LA DROITE
   ========================================================= */

@media (min-width: 600px) {
  .nav-links {
    position: relative;
    left: 300px;
  }
}/* =========================================================
   SÉLECTEUR DE LANGUE — PREMIUMTV
   ========================================================= */

.language-switcher {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 100;
}

/* Bouton FR principal */
.language-current {
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;

  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.language-current:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(229, 36, 43, 0.6);

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(229, 36, 43, 0.1);
}

.language-flag {
  font-size: 19px;
  line-height: 1;
}

.language-code {
  letter-spacing: 0.04em;
}

.language-arrow {
  font-size: 11px;
  opacity: 0.65;
  transition: transform 0.25s ease;
}

/* Menu déroulant */
.language-menu {
  position: absolute;

  top: calc(100% + 12px);
  right: 0;

  width: 190px;
  padding: 8px;

  background: rgba(13, 13, 15, 0.97);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(229, 36, 43, 0.06);

  backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-8px) scale(0.97);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
}

/* Chaque langue */
.language-menu button {
  width: 100%;
  padding: 11px 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 0;
  border-radius: 10px;

  background: transparent;

  color: rgba(255, 255, 255, 0.82);

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  text-align: left;
  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.language-menu button:hover {
  background: rgba(229, 36, 43, 0.13);
  color: #ffffff;
  transform: translateX(3px);
}

/* Le JavaScript ajoutera cette classe */
.language-switcher.open .language-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.language-switcher.open .language-arrow {
  transform: rotate(180deg);
}

/* Téléphone */
@media (max-width: 800px) {

  .language-switcher {
    width: 100%;
  }

  .language-current {
    width: 100%;
    justify-content: center;
  }

  .language-menu {
    width: 100%;
    right: auto;
    left: 0;
  }
}/* =========================================================
   MENU LANGUES — OUVERTURE À DROITE
   ========================================================= */

@media (min-width: 801px) {
  .language-menu {
    top: 50%;
    left: calc(100% + 12px);
    right: auto;

    transform:
      translateY(-50%)
      translateX(-8px)
      scale(0.97);

    transform-origin: left center;
  }

  .language-switcher.open .language-menu {
    transform:
      translateY(-50%)
      translateX(0)
      scale(1);
  }
}/* =========================================================
   MENU LANGUES — ALIGNEMENT CORRIGÉ À DROITE
   ========================================================= */

@media (min-width: 801px) {

  .language-menu {
    top: 0 !important;
    left: calc(100% + 12px) !important;
    right: auto !important;

    transform: translateX(-8px) scale(0.97) !important;
    transform-origin: left top !important;
  }

  .language-switcher.open .language-menu {
    transform: translateX(0) scale(1) !important;
  }
}/* =========================================================
   LOGO HEADER — TAILLE INDÉPENDANTE
   ========================================================= */

@media (min-width: 801px) {

  .site-header .brand--image {
    width: 330px;
    height: 220px;
    flex-shrink: 0;
  }

  .site-header .brand-logo {
    width: 330px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;

    transform: translate(-80px, -30px) scale(1.60);
    transform-origin: left top;
  }
}

/* =========================================================
   PREMIUMTV — BANDEAU DES CHAÎNES
   ========================================================= */

.channel-strip {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 48px 0;

  background: #0b0b0b;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.channel-track {
  display: flex;
  width: max-content;
  animation: premiumtv-channel-scroll 28s linear infinite;
  will-change: transform;
}

.channel-set {
  display: flex;
  align-items: center;
  gap: 75px;
  padding-right: 75px;
}

.channel-set img {
  display: block;
  width: 180px;
  height: 98px;
  object-fit: contain;
  flex-shrink: 0;

  opacity: 0.82;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.channel-set img:hover {
  transform: scale(1.15);
  opacity: 1;
}


/* DÉGRADÉ SUR LES CÔTÉS */

.channel-strip::before,
.channel-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.channel-strip::before {
  left: 0;
  background: linear-gradient(
    to right,
    #0b0b0b,
    transparent
  );
}

.channel-strip::after {
  right: 0;
  background: linear-gradient(
    to left,
    #0b0b0b,
    transparent
  );
}


/* DÉFILEMENT CONTINU */

@keyframes premiumtv-channel-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* TABLETTE */

@media (max-width: 800px) {

  .channel-strip {
    padding: 26px 0;
  }

  .channel-set {
    gap: 55px;
    padding-right: 55px;
  }

  .channel-set img {
    width: 100px;
    height: 55px;
  }

  .channel-track {
    animation-duration: 24s;
  }
}


/* TÉLÉPHONE */

@media (max-width: 500px) {

  .channel-strip {
    padding: 22px 0;
  }

  .channel-set {
    gap: 42px;
    padding-right: 42px;
  }

  .channel-set img {
    width: 82px;
    height: 46px;
  }

  .channel-track {
    animation-duration: 20s;
  }

  .channel-strip::before,
  .channel-strip::after {
    width: 50px;
  }
}


/* ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {

  .channel-track {
    animation: none;
  }
}

/* =========================================================
   OFFRE TEST 24H — INTÉGRATION À LA GRILLE DES OFFRES
   ========================================================= */

.price-card--trial {
  background: linear-gradient(155deg, rgba(229, 36, 43, .18), #181112 52%, #151515 100%);
  border-color: rgba(255, 75, 81, .48);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25), 0 0 28px rgba(229, 36, 43, .1);
}

.price-card--trial .plan-label {
  color: #fff;
}

.price--trial {
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 75, 81, .52);
}

.trial-commitment {
  margin: -20px 0 28px;
  color: #d0cdcc;
  font-size: 12px;
  font-weight: 600;
}

.price-card--trial .button-outline {
  border-color: rgba(255, 75, 81, .65);
  background: rgba(229, 36, 43, .1);
}

.price-card--trial .button-outline:hover {
  background: rgba(229, 36, 43, .18);
}

@media (min-width: 561px) and (max-width: 1020px) {
  .pricing-grid .price-card:nth-child(5) {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
  }
}

@media (min-width: 1100px) {
  .pricing .container {
    width: min(1340px, calc(100% - 48px));
  }

  .pricing-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    max-width: 1340px;
  }

  .pricing-grid .price-card {
    grid-column: auto;
    min-height: 410px;
    padding: 30px 20px 24px;
  }

  .pricing .price-card h3 {
    font-size: 27px;
  }

  .pricing .price-card .price {
    font-size: 38px;
    margin: 14px 0 26px;
  }

  .pricing .price-card ul {
    min-height: 126px;
    margin-bottom: 28px;
  }

  .pricing .price-card li {
    font-size: 12px;
    margin: 10px 0;
  }

  .pricing .trial-commitment {
    margin: -17px 0 24px;
  }
}

/* Footer : le slogan retiré laisse le logo et la navigation parfaitement équilibrés. */
@media (min-width: 801px) {
  .footer-top {
    grid-template-columns: 1fr auto;
  }
}

/* =========================================================
   RETOURS UTILISATEURS — PREUVE SOCIALE PREMIUM
   ========================================================= */

.reviews {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 65% at 50% 0%, rgba(229, 36, 43, .14), transparent 72%),
    #0b0b0b;
}

.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.reviews .container {
  position: relative;
  z-index: 1;
}

.reviews-intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.reviews-stars {
  margin-bottom: 18px;
  color: var(--red-soft);
  font-size: 22px;
  letter-spacing: .22em;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 75, 81, .45);
}

.reviews h2 {
  font: 700 clamp(38px, 4.5vw, 60px)/1.08 "Manrope", sans-serif;
  letter-spacing: -.055em;
  margin: 0;
}

.reviews h2 span {
  color: var(--red-soft);
}

.reviews-copy {
  max-width: 610px;
  margin: 23px auto 0;
  color: var(--muted);
  font-size: 15px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 62px;
}

.review-card {
  position: relative;
  min-height: 255px;
  padding: 34px 31px 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.review-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 120px;
  right: -65px;
  bottom: -68px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(229, 36, 43, .2), transparent 70%);
  pointer-events: none;
}

.review-accent {
  display: block;
  width: 35px;
  height: 35px;
  margin-bottom: 31px;
  border: 1px solid rgba(255, 75, 81, .34);
  border-radius: 9px;
  color: var(--red-soft);
  font-size: 16px;
  line-height: 33px;
  text-align: center;
  background: rgba(229, 36, 43, .1);
  box-shadow: 0 0 18px rgba(229, 36, 43, .08);
}

.review-card h3 {
  margin: 0 0 12px;
  font: 700 21px/1.25 "Manrope", sans-serif;
  letter-spacing: -.035em;
}

.review-card p {
  max-width: 300px;
  margin: 0;
  color: #b9b6b5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.review-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 75, 81, .5);
  background: linear-gradient(145deg, rgba(229, 36, 43, .13), rgba(255, 255, 255, .03));
  box-shadow: 0 24px 46px rgba(0, 0, 0, .3), 0 0 30px rgba(229, 36, 43, .12);
}

@media (max-width: 800px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }
}

@media (max-width: 560px) {
  .reviews-stars {
    font-size: 19px;
  }

  .review-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .review-card {
    min-height: 0;
    padding: 29px 25px;
  }

  .review-accent {
    margin-bottom: 24px;
  }
}

/* Retours utilisateurs : hiérarchie visuelle renforcée sans modifier les animations. */
.reviews-stars {
  margin-bottom: 14px;
  color: #ff5a61;
  font-size: 25px;
  letter-spacing: .25em;
  text-shadow: 0 0 22px rgba(255, 75, 81, .58);
}

.reviews-intro .eyebrow {
  margin-bottom: 18px;
  color: #ff7379;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-shadow: 0 0 14px rgba(229, 36, 43, .18);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red-soft);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .reviews-stars {
    font-size: 21px;
  }
}
/* =========================================================
   MENU LANGUES — ÉCRANS PLUS ÉTROITS
   OUVERTURE SOUS LE BOUTON
   ========================================================= */

@media (min-width: 801px) and (max-width: 2200px) {

  .language-menu {
    top: calc(100% + 12px) !important;
    left: auto !important;
    right: 0 !important;

    transform: translateY(-8px) scale(0.97) !important;
    transform-origin: right top !important;
  }

  .language-switcher.open .language-menu {
    transform: translateY(0) scale(1) !important;
  }
}/* =========================================================
   PREMIUMTV — CORRECTION MOBILE GLOBALE
   Ne touche pas au desktop
   ========================================================= */

@media (max-width: 560px) {

  /* ---------------------------------------------------------
     BASE / ANTI-DÉBORDEMENT
     --------------------------------------------------------- */

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .container {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section {
    overflow-x: hidden;
  }


  /* ---------------------------------------------------------
     ANIMATIONS MOBILE
     On garde du mouvement mais plus de grosses translations
     horizontales qui sortent de l'écran.
     --------------------------------------------------------- */

  .animations-ready .reveal-left,
  .animations-ready .reveal-right,
  .animations-ready .reveal-card-left,
  .animations-ready .reveal-card-right,
  .animations-ready .reveal-card-bottom-left,
  .animations-ready .reveal-card-bottom-right,
  .animations-ready .hero h1.reveal {
    transform: translate3d(0, 55px, 0) scale(.94);
  }

  .animations-ready .benefit-card,
  .animations-ready .step,
  .animations-ready .price-card,
  .animations-ready .faq-item,
  .animations-ready .review-card {
    transform: translate3d(0, 65px, 0) scale(.94);
  }

  .animations-ready .visible {
    transform: none;
  }


  /* ---------------------------------------------------------
     HERO
     --------------------------------------------------------- */

  .hero {
    width: 100%;
    min-height: auto;
    overflow: hidden;
  }

  .hero-content {
    width: 100%;
    padding-top: 28px;
    padding-bottom: 330px;
  }

  .hero h1,
  .hero-copy,
  .hero-actions,
  .hero-points {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(38px, 11vw, 48px);
  }

  .hero-media {
    right: 0 !important;
    left: auto !important;
    width: 92% !important;
    height: 245px !important;
    bottom: 28px !important;
    transform: none;
    border-radius: 18px 0 0 18px;
  }

  .animations-ready .hero-media {
    transform: translate3d(0, 35px, 0) scale(.96);
  }

  .animations-ready .hero-media.visible {
    transform: none;
  }


  /* ---------------------------------------------------------
     TITRES DE SECTIONS
     --------------------------------------------------------- */

  .section-heading,
  .benefits .section-heading,
  .how .section-heading,
  .pricing .section-heading {
    width: 100%;
    max-width: 100%;
    transform: none !important;
    text-align: center;
  }

  .section-heading h2,
  .experience h2,
  .faq h2,
  .reviews h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }


  /* ---------------------------------------------------------
     AVANTAGES
     --------------------------------------------------------- */

  .benefit-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .benefit-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }


  /* ---------------------------------------------------------
     APPAREILS
     --------------------------------------------------------- */

  .experience-layout {
    grid-template-columns: 1fr !important;
    gap: 35px;
  }

  .experience-copy {
    width: 100%;
    max-width: 100%;
  }

  .device-stage {
    width: 100% !important;
    max-width: 380px !important;
    height: 300px !important;

    margin: 0 auto !important;

    transform: scale(.82) !important;
    transform-origin: center center !important;
  }

  .animations-ready .device-stage,
  .animations-ready .device-stage.reveal-right,
  .animations-ready .device-stage.reveal-right.visible {
    transform: scale(.82) !important;
  }

  .tv-device {
    right: 18px;
  }

  .laptop-device {
    left: -18px;
  }

  .tablet-device {
    right: -8px;
  }

  .phone-device {
    right: 70px;
  }


  /* ---------------------------------------------------------
     TROIS ÉTAPES
     --------------------------------------------------------- */

  .steps {
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: 28px;
  }

  .step {
    width: 100%;
    max-width: 100%;
    padding: 10px 18px 22px;
    margin: 0;
  }

  .step p {
    max-width: 100%;
  }


  /* ---------------------------------------------------------
     OFFRES
     --------------------------------------------------------- */

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 22px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pricing-grid .price-card,
  .pricing-grid .price-card:nth-child(5),
  .price-card--trial {
    width: 100% !important;
    max-width: 100% !important;

    grid-column: auto !important;
    justify-self: stretch !important;

    margin: 0 !important;
  }

  .price-card {
    padding: 30px 24px 26px;
    min-height: 0;
  }

  .price-card.featured,
  .animations-ready .price-card.featured.visible,
  .animations-ready .price-card.featured.visible:hover {
    transform: none !important;
  }

  .price-card ul {
    min-height: 0;
  }


  /* ---------------------------------------------------------
     AVIS
     --------------------------------------------------------- */

  .reviews {
    overflow: hidden;
  }

  .reviews-intro {
    width: 100%;
    max-width: 100%;
  }

  .review-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: 18px;
  }

  .review-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }


  /* ---------------------------------------------------------
     FAQ
     --------------------------------------------------------- */

  .faq-layout {
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: 34px;
  }

  .faq-intro,
  .accordion,
  .faq-item {
    width: 100%;
    max-width: 100%;
  }

  .faq-item button {
    gap: 18px;
  }


  /* ---------------------------------------------------------
     FOOTER
     --------------------------------------------------------- */

  .footer-top {
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: 24px;
  }

  .footer-top nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  .footer-bottom {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }


  /* ---------------------------------------------------------
     BOUTON WHATSAPP FLOTTANT
     --------------------------------------------------------- */

  .floating-contact {
    right: 14px !important;
    bottom: 14px !important;

    padding: 11px 15px !important;

    font-size: 12px !important;
    gap: 8px;

    max-width: calc(100vw - 28px);
  }

  .floating-contact span {
    font-size: 14px;
  }


  /* ---------------------------------------------------------
     MENU MOBILE
     --------------------------------------------------------- */

  .nav-links {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .language-switcher,
  .language-current,
  .language-menu {
    max-width: 100%;
  }
}/* =========================================================
   PREMIUMTV — FINITIONS MOBILE FINALES
   ========================================================= */

@media (max-width: 560px) {

  /* ---------------------------------------------------------
     BOUTON WHATSAPP FLOTTANT — PLUS DISCRET
     --------------------------------------------------------- */

  .floating-contact {
    right: 12px !important;
    bottom: 12px !important;

    padding: 9px 13px !important;
    gap: 6px !important;

    font-size: 11px !important;
    border-radius: 999px;

    box-shadow:
      0 10px 24px rgba(0, 0, 0, .32),
      0 4px 14px rgba(229, 36, 43, .22) !important;
  }

  .floating-contact span {
    font-size: 13px !important;
  }


  /* ---------------------------------------------------------
     HERO — 3 PETITS AVANTAGES PLUS PROPRES
     --------------------------------------------------------- */

  .hero-points {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
    margin-top: 42px !important;
  }

  .hero-points div {
    min-width: 0;
    gap: 6px !important;
    font-size: 10px !important;
    line-height: 1.25;
    white-space: normal;
  }

  .hero-points b {
    flex-shrink: 0;
    font-size: 9px !important;
    padding: 3px 4px;
  }


  /* ---------------------------------------------------------
     ESPACEMENTS VERTICAUX — MOBILE PLUS DYNAMIQUE
     --------------------------------------------------------- */

  .section {
    padding-top: 82px !important;
    padding-bottom: 82px !important;
  }

  .benefits .benefit-grid,
  .how .steps,
  .pricing .pricing-grid {
    margin-top: 20px !important;
  }


  /* ---------------------------------------------------------
     APPAREILS — ÉVITE UN GROS VIDE SOUS LA COMPOSITION
     --------------------------------------------------------- */

  .experience-layout {
    gap: 24px !important;
  }

  .device-stage {
    margin-bottom: -15px !important;
  }


  /* ---------------------------------------------------------
     FOOTER — UN PEU PLUS COMPACT
     --------------------------------------------------------- */

  footer {
    padding-top: 38px;
  }

  .footer-top {
    gap: 20px !important;
  }

  .footer-bottom {
    margin-top: 30px;
  }
}