:root{
  --bg: #05070f;
  --blue: #2f7dff;
  --blue-2: #4d9aff;
  --green: #1fa64a;
  --text: #ffffff;
  --muted: #c9d2e8;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* overflow-x: clip (et non hidden) : hidden transformerait body en
   conteneur de scroll, ce qui casse position: sticky sur le hero */
html{
  overflow-x:clip;
}

body{
  min-height:100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Sora", "Segoe UI", sans-serif;
  overflow-x:clip;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

/* ---------- SCROLL STAGE (gives room to scrub the video) ---------- */
.scroll-stage{
  height: 500vh;
  position: relative;
}

/* ---------- HERO SHELL (sticky fullscreen video) ---------- */
.hero{
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  width: 100%;
  overflow: hidden;
}

.hero__video{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
}

/* à l'accueil, la boucle animée est visible ; dès qu'on scrolle,
   la vidéo scrubbée fond par-dessus */
.hero__video--scrub{
  opacity: 1;
  transition: opacity .6s ease;
}
.hero.at-home .hero__video--scrub{
  opacity: 0;
}

/* darken the left side so text stays readable over the image */
.hero__shade{
  position:absolute;
  inset:0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4,6,14,0.92) 0%, rgba(4,6,14,0.78) 26%, rgba(4,6,14,0.35) 45%, rgba(4,6,14,0) 62%),
    linear-gradient(180deg, rgba(4,6,14,0.55) 0%, rgba(4,6,14,0) 18%);
}

/* ---------- NAVBAR ---------- */
.navbar{
  position: absolute;
  top:0; left:0; right:0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 56px;
}

.logo{
  display:flex;
  align-items:center;
  gap: 14px;
}
.logo__mark{
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(47,125,255,0.55));
}
.logo__text{ display:flex; flex-direction:column; line-height:1.1; }
.logo__name{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 3px;
  color:#fff;
}
.logo__name .b{ color: var(--blue-2); }
.logo__sub{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 7px;
  color: #d9e2f5;
  margin-top: 4px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 48px;
  font-size: 16px;
  font-weight: 500;
  color: #e6ebf7;
}
.nav-links a{ position:relative; padding-bottom: 8px; transition: color .2s ease; }
.nav-links a:hover{ color:#fff; }
.nav-links a.active::after,
.nav-links a:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: var(--blue);
  border-radius: 2px;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.08); }
.btn svg{ width: 18px; height: 18px; }

.btn--contact{
  padding: 13px 26px;
  font-size: 15px;
  background: var(--blue);
  color:#fff;
  box-shadow: 0 8px 28px rgba(47,125,255,0.45);
}

.btn--blue,
.btn--green{
  padding: 14px 22px;
  font-size: 16px;
  color:#fff;
}
.btn--blue{
  background: var(--blue);
  box-shadow: 0 10px 32px rgba(47,125,255,0.45);
}
.btn--green{
  background: var(--green);
  box-shadow: 0 10px 32px rgba(31,166,74,0.4);
}

.btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,0.18);
}
.btn__icon svg{ width: 16px; height: 16px; }
.btn__arrow{ margin-left: 4px; }

/* ---------- LEFT CONTENT ---------- */
.hero__content{
  position: relative;
  z-index: 5;
  height: 100%;
  max-width: 760px;
  padding: 120px 56px 40px;
  display:grid;
  align-items:center;
}

/* les 3 panneaux occupent la même cellule et se fondent l'un dans l'autre */
.panel{
  grid-area: 1 / 1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 22px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.panel.is-active{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* entrée élastique : chaque bloc du panneau rebondit en cascade */
@keyframes elasticIn{
  0%   { opacity: 0; transform: translateY(54px) scale(0.88); }
  45%  { opacity: 1; transform: translateY(-18px) scale(1.06); }
  65%  { transform: translateY(9px) scale(0.975); }
  80%  { transform: translateY(-5px) scale(1.015); }
  92%  { transform: translateY(2px) scale(0.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.panel.is-active > *{
  animation: elasticIn 1s cubic-bezier(.22,.9,.35,1) both;
}

/* les titres et mots-clés sont révélés mot par mot (mask split text),
   le conteneur ne bouge pas : seuls les mots sortent de leur masque */
.panel.is-active > .headline,
.panel.is-active > .keywords{
  animation: none;
  opacity: 1;
  transform: none;
}

.w{
  display:inline-block;
  overflow:hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.wi{
  display:inline-block;
  transform: translateY(130%);
  will-change: transform;
}
@keyframes maskWord{
  0%   { transform: translateY(130%) rotate(4deg); }
  45%  { transform: translateY(-16%) rotate(-1.5deg); }
  65%  { transform: translateY(8%) rotate(0.8deg); }
  82%  { transform: translateY(-4%) rotate(-0.3deg); }
  100% { transform: translateY(0) rotate(0); }
}
.panel.is-active .wi{
  animation: maskWord .95s cubic-bezier(.22,.9,.35,1) both;
  animation-delay: var(--d, 0s);
}
.panel.is-active > *:nth-child(1){ animation-delay: .00s; }
.panel.is-active > *:nth-child(2){ animation-delay: .08s; }
.panel.is-active > *:nth-child(3){ animation-delay: .16s; }
.panel.is-active > *:nth-child(4){ animation-delay: .24s; }
.panel.is-active > *:nth-child(5){ animation-delay: .32s; }
.panel.is-active > *:nth-child(6){ animation-delay: .40s; }
.panel.is-active > *:nth-child(7){ animation-delay: .48s; }
.panel.is-active > *:nth-child(8){ animation-delay: .56s; }

/* les tuiles/atouts rebondissent individuellement, après leur liste */
@keyframes elasticPop{
  0%   { opacity: 0; transform: translateY(30px) scale(0.6); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.08); }
  75%  { transform: translateY(2px) scale(0.97); }
  100% { opacity: 1; transform: none; }
}
.panel.is-active .feature{
  animation: elasticPop .7s cubic-bezier(.22,.9,.35,1) both;
}
.panel.is-active .feature:nth-child(1){ animation-delay: .45s; }
.panel.is-active .feature:nth-child(2){ animation-delay: .55s; }
.panel.is-active .feature:nth-child(3){ animation-delay: .65s; }
.panel.is-active .feature:nth-child(4){ animation-delay: .75s; }

.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
.badge__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px var(--blue);
}

.headline{
  font-size: clamp(38px, 3.7vw, 58px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.headline .blue{ color: var(--blue-2); }

.lede{
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
}
.app{ font-weight: 600; }
.app--rinvo{ color: var(--blue-2); }
.app--rinva{ color: var(--blue-2); }

.cta-row{
  display:flex;
  gap: 18px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ---------- FEATURES ---------- */
.features{
  display:flex;
  gap: 56px;
  margin-top: 34px;
}

.feature{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.feature__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 8px;
  color: var(--blue-2);
  background: rgba(47,125,255,0.12);
  border: 1px solid rgba(47,125,255,0.45);
  box-shadow: 0 0 22px rgba(47,125,255,0.25);
}
.feature__icon svg{ width: 24px; height: 24px; }

.feature__title{
  font-size: 17px;
  font-weight: 700;
  color:#fff;
}
.feature__desc{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- PANELS RINVO / RINVA ---------- */
.applogo{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.applogo__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-size: 32px;
  font-weight: 800;
  color:#fff;
}
.applogo__mark--blue{
  background: linear-gradient(135deg, #2f7dff, #1a5fe0);
  box-shadow: 0 0 24px rgba(47,125,255,0.5);
}
.applogo__mark--purple{
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 0 24px rgba(139,92,246,0.5);
}
.applogo__name{
  font-size: 38px;
  font-weight: 800;
  color:#fff;
  letter-spacing: 0.5px;
}
.applogo__suffix--vo{ color: #9cc4ff; }
.applogo__suffix--va{ color: #a78bfa; }

.offline-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-left: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color:#fff;
  background: rgba(255,255,255,0.06);
}
.offline-pill svg{ width: 18px; height: 18px; }
.offline-pill--blue{ border: 1px solid rgba(47,125,255,0.6); }
.offline-pill--blue svg{ color: #4d9aff; }
.offline-pill--purple{ border: 1px solid rgba(139,92,246,0.6); }
.offline-pill--purple svg{ color: #a78bfa; }

.headline--sm{
  font-size: clamp(30px, 2.9vw, 44px);
}
.headline .gold, .gold{ color: #ffb020; }

.divider{
  display:block;
  width: 340px;
  max-width: 70%;
  height: 2px;
  margin-top: -6px;
}
.divider--gold{
  background: linear-gradient(90deg, #ffb020, rgba(255,176,32,0));
}

.keywords{
  font-size: 19px;
  font-weight: 700;
}
.keywords i{ font-style: normal; opacity: 0.7; margin: 0 4px; }
.keywords--blue{ color: #4d9aff; }
.keywords--purple{ color: #a78bfa; }

.lede--sm{
  font-size: 17px;
  line-height: 1.65;
}
.lede--sm strong{ color:#fff; }

/* tuiles d'icônes colorées façon maquette */
.features--tiles{ margin-top: 6px; gap: 44px; }
.features--four{ gap: 26px; }
.features--four .feature{ max-width: 150px; }
.features--four .feature__desc{ font-size: 12.5px; }

.tile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  margin-bottom: 8px;
  color:#fff;
}
.tile svg{ width: 26px; height: 26px; }
.tile--blue{ background: linear-gradient(135deg, #2f7dff, #1a5fe0); box-shadow: 0 6px 20px rgba(47,125,255,0.4); }
.tile--purple{ background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 6px 20px rgba(139,92,246,0.4); }
.tile--green{ background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
.tile--orange{ background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 6px 20px rgba(249,115,22,0.4); }

/* boutons panneaux */
.btn--outline{
  padding: 15px 28px;
  font-size: 16px;
  color:#fff;
  background: rgba(255,255,255,0.04);
}
.btn--outline svg{ width: 20px; height: 20px; }
.btn--outline-blue{ border: 1.5px solid rgba(77,154,255,0.8); box-shadow: 0 0 18px rgba(47,125,255,0.25); }
.btn--outline-purple{ border: 1.5px solid rgba(167,139,250,0.8); box-shadow: 0 0 18px rgba(139,92,246,0.25); }

.btn--gold{
  padding: 11px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffc233, #f59e0b);
  color: #241a02;
  box-shadow: 0 10px 32px rgba(245,158,11,0.4);
}
.btn--gold svg{ width: 22px; height: 22px; }
.btn__lines{ display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.btn__lines strong{ font-size: 17px; font-weight: 800; }
.btn__lines small{ font-size: 12px; font-weight: 600; opacity: 0.85; }

.privacy-note{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}
.privacy-note svg{ width: 16px; height: 16px; color: #cbd5ea; }

/* ---------- POPUP / MODAL ---------- */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2,4,10,0.75);
  backdrop-filter: blur(8px);
}
.modal.open{ display: flex; }

@keyframes modalIn{
  0%   { opacity: 0; transform: translateY(60px) scale(0.92); }
  55%  { opacity: 1; transform: translateY(-10px) scale(1.015); }
  78%  { transform: translateY(4px) scale(0.997); }
  100% { opacity: 1; transform: none; }
}
.modal__box{
  width: 100%;
  max-width: 1000px;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0a0f1e 0%, #070b16 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  padding: 30px 34px 34px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
.modal.open .modal__box{
  animation: modalIn .65s cubic-bezier(.22,.9,.35,1) both;
}
.modal__box--blue{ box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 80px rgba(47,125,255,0.12); }
.modal__box--purple{ box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 80px rgba(139,92,246,0.12); }

.modal__toprow{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 16px;
  margin-bottom: 24px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color:#dbe6ff;
  background: rgba(255,255,255,0.04);
}
.chip svg{ width: 20px; height: 20px; }
.chip--blue{ border: 1px solid rgba(77,154,255,0.5); }
.chip--purple{ border: 1px solid rgba(167,139,250,0.5); }
.chip--secure{ border: 1px solid rgba(34,197,94,0.45); }
.chip__lines{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.chip__lines strong{ color:#22c55e; font-size: 13px; letter-spacing: 0.08em; }
.chip__lines small{ color:#9aa3c0; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform:none; }

.modal__identity{
  display:flex;
  align-items:center;
  gap: 20px;
  margin-bottom: 14px;
}
.modal__appicon{
  width: 72px;
  height: 72px;
  border-radius: 20px;
  font-size: 44px;
}
.modal__appname{
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  color:#fff;
}
.modal__tagline{
  font-size: 17px;
  color: #d7deef;
  margin-top: 4px;
}

.modal__meta{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 15px;
  color: #cbd5ea;
  margin-bottom: 22px;
}
.meta__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}
.meta__sep{ opacity: 0.5; }
.meta__version{
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #4d9aff;
  border: 1px solid rgba(77,154,255,0.4);
  background: rgba(47,125,255,0.08);
}
.meta__version--purple{
  color: #a78bfa;
  border-color: rgba(167,139,250,0.4);
  background: rgba(139,92,246,0.08);
}

/* ---------- CARROUSEL ---------- */
.carousel{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.07);
  background: #0b1224;
  overflow: hidden;
  margin-bottom: 26px;
}
.slide{
  display: none;
  grid-template-columns: 1fr 1.15fr;
  min-height: 340px;
}
.slide.is-current{ display: grid; }

@keyframes slideFade{
  from{ opacity: 0; transform: translateX(24px); }
  to{ opacity: 1; transform: none; }
}
.slide.is-current > *{ animation: slideFade .45s ease both; }

.slide__text{
  padding: 34px 20px 30px 34px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  justify-content:center;
}
.slide__title{
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color:#fff;
}
.slide__desc{
  font-size: 15px;
  line-height: 1.6;
  color: #b9c3dc;
}
.slide__tiles{
  display:flex;
  gap: 22px;
  margin-top: 10px;
}
.slide__tiles li{
  display:flex;
  flex-direction:column;
  gap: 3px;
  max-width: 120px;
}
.slide__tiles .tile{ width: 46px; height: 46px; border-radius: 12px; margin-bottom: 6px; }
.slide__tiles .tile svg{ width: 22px; height: 22px; }
.slide__tiles strong{ font-size: 14px; color:#fff; }
.slide__tiles small{ font-size: 11.5px; line-height: 1.45; color:#9aa3c0; }

.slide__img{
  position: relative;
  min-height: 260px;
}
.slide__img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}

.carousel__arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(5,9,20,0.75);
  color:#fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.carousel__arrow:hover{ background: rgba(47,125,255,0.5); }
.carousel__arrow svg{ width: 22px; height: 22px; }
.carousel__arrow--prev{ left: 14px; }
.carousel__arrow--next{ right: 14px; }

.carousel__dots{
  position:absolute;
  bottom: 14px;
  left: 62%;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 5;
}
.carousel__dots button{
  width: 26px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.carousel__dots button.on{ background: #4d9aff; width: 34px; }

/* ---------- SECTIONS BASSES DU POPUP ---------- */
.modal__section{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #4d9aff;
  margin-bottom: 14px;
}
.modal__section svg{ width: 20px; height: 20px; }
.modal__section--purple{ color: #a78bfa; }

.modal__desc{
  font-size: 17px;
  line-height: 1.65;
  color: #dbe2f2;
  margin-bottom: 24px;
}

.modal__perks{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  margin-bottom: 22px;
}
.modal__perks li{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.perk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 6px;
  color:#fff;
}
.perk svg{ width: 21px; height: 21px; }
.perk--purple{ background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.perk--blue{ background: linear-gradient(135deg,#2f7dff,#1a5fe0); }
.perk--green{ background: linear-gradient(135deg,#34d399,#059669); }
.perk--orange{ background: linear-gradient(135deg,#fb923c,#ea580c); }
.modal__perks strong{ font-size: 15px; color:#fff; }
.modal__perks small{ font-size: 12.5px; line-height: 1.45; color:#9aa3c0; }

.modal__pricebar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 18px 26px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(60% 120% at 95% 50%, rgba(34,197,94,0.16), transparent 60%),
    rgba(255,255,255,0.03);
  margin-bottom: 24px;
}
.modal__pricebar small{
  display:block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color:#8e99b8;
  margin-bottom: 4px;
}
.modal__pricebar .mono{
  font-family: "Consolas", monospace;
  font-size: 20px;
  color:#4d9aff;
}
.pricebar__right{ text-align: right; }
.modal__pricebar .price{
  font-size: 26px;
  font-weight: 800;
  color: #22c55e;
  text-shadow: 0 0 24px rgba(34,197,94,0.5);
}

.modal__actions{
  display:flex;
  gap: 16px;
}
.btn--close{
  flex: 0 0 auto;
  padding: 16px 36px;
  font-size: 16px;
  color:#e6ebf7;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
}
.btn--close svg{ width: 18px; height: 18px; }
.btn--dl-blue{
  flex: 1;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4d9aff, #1a5fe0);
  color:#fff;
  box-shadow: 0 12px 36px rgba(47,125,255,0.4);
}
.btn--dl-blue svg{ width: 22px; height: 22px; }
.btn--dl-purple{
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
  box-shadow: 0 12px 36px rgba(139,92,246,0.4);
}

@media (max-width: 860px){
  .slide{ grid-template-columns: 1fr; }
  .slide__img{ order: -1; min-height: 200px; }
  .carousel__dots{ left: 50%; }
  .modal__perks{ grid-template-columns: repeat(2, 1fr); }
  .modal__actions{ flex-direction: column; }
  .modal__box{ padding: 22px 20px 26px; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px){
  .nav-links{ gap: 30px; }
}

@media (max-width: 1000px){
  .nav-links{ display:none; }
  .hero__shade{
    background: linear-gradient(180deg, rgba(4,6,14,0.78) 0%, rgba(4,6,14,0.58) 55%, rgba(4,6,14,0.78) 100%);
  }
  .hero__content{ max-width: 100%; padding: 130px 32px 36px; }
  .features{ gap: 32px; flex-wrap: wrap; }
  /* recadre la vidéo pour garder le sujet (logo + mascotte) visible */
  .hero__video{ object-position: 68% center; }
}

/* ---------- TÉLÉPHONE ---------- */
@media (max-width: 700px){
  .hero{ min-height: 0; height: 100vh; height: 100svh; }

  /* navbar compacte, logo sur une seule ligne */
  .navbar{ padding: 14px 18px; gap: 12px; }
  .logo{ gap: 9px; }
  .logo__mark{ width: 36px; height: 36px; }
  .logo__name{ font-size: 19px; letter-spacing: 1.5px; white-space: nowrap; }
  .logo__sub{ font-size: 8px; letter-spacing: 3.5px; white-space: nowrap; margin-top: 2px; }
  .btn--contact{ padding: 9px 15px; font-size: 12.5px; gap: 7px; }
  .btn--contact svg{ width: 14px; height: 14px; }

  /* vidéo de fond : cadrage recentré + voile renforcé pour la lisibilité */
  .hero__video{ object-position: 62% center; }

  .hero__content{ padding: 86px 18px 20px; }
  .panel{ gap: 13px; }

  .badge{ padding: 6px 14px; font-size: 12.5px; }
  .badge__dot{ width: 7px; height: 7px; }

  /* textes nettement réduits, retours à la ligne naturels */
  .headline{ font-size: 25px; line-height: 1.2; letter-spacing: 0; }
  .headline br{ display: none; }
  .headline--sm{ font-size: 21px; }
  .lede{ font-size: 13.5px; line-height: 1.55; }
  .lede--sm{ font-size: 13px; }
  .lede--sm br{ display: none; }

  .divider{ width: 200px; }
  .keywords{ font-size: 14px; }

  /* logos d'app des panneaux rinVo / rinVa */
  .applogo{ gap: 10px; }
  .applogo__mark{ width: 40px; height: 40px; border-radius: 11px; font-size: 24px; }
  .applogo__name{ font-size: 26px; }
  .offline-pill{ margin-left: 0; padding: 6px 12px; font-size: 10px; gap: 6px; }
  .offline-pill svg{ width: 14px; height: 14px; }

  /* boutons compacts */
  .cta-row{ gap: 10px; margin-top: 2px; }
  .btn--blue, .btn--green{ padding: 10px 14px; font-size: 13px; gap: 7px; }
  .btn__icon{ width: 24px; height: 24px; border-radius: 7px; }
  .btn__icon svg{ width: 13px; height: 13px; }
  .btn__arrow{ width: 14px; height: 14px; }
  .btn--outline{ padding: 11px 18px; font-size: 13.5px; }
  .btn--outline svg{ width: 16px; height: 16px; }
  .btn--gold{ padding: 8px 16px; border-radius: 12px; }
  .btn--gold svg{ width: 17px; height: 17px; }
  .btn__lines strong{ font-size: 13.5px; }
  .btn__lines small{ font-size: 10px; }

  /* atouts / tuiles : grille serrée */
  .features{ gap: 14px 22px; margin-top: 8px; }
  .feature__icon{ width: 38px; height: 38px; border-radius: 10px; margin-bottom: 4px; }
  .feature__icon svg{ width: 18px; height: 18px; }
  .feature__title{ font-size: 13.5px; }
  .feature__desc{ font-size: 11px; }
  .feature__desc br{ display: none; }
  .features--tiles{ gap: 14px 20px; }
  .features--tiles .feature{ max-width: 104px; }
  .features--four{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .features--four .feature{ max-width: none; }
  .tile{ width: 38px; height: 38px; border-radius: 10px; margin-bottom: 4px; }
  .tile svg{ width: 18px; height: 18px; }

  .privacy-note{ font-size: 11.5px; }

  /* popups */
  .modal{ padding: 12px; }
  .modal__box{ border-radius: 18px; max-height: 94vh; }
  .modal__appicon{ width: 52px; height: 52px; border-radius: 14px; font-size: 30px; }
  .modal__appname{ font-size: 30px; }
  .modal__tagline{ font-size: 14px; }
  .modal__meta{ font-size: 12.5px; flex-wrap: wrap; gap: 8px; }
  .chip{ padding: 8px 14px; font-size: 11px; }
  .chip__lines small{ font-size: 9.5px; }
  .slide__text{ padding: 20px 18px; gap: 10px; }
  .slide__title{ font-size: 19px; }
  .slide__desc{ font-size: 13px; }
  .slide__tiles{ gap: 12px; flex-wrap: wrap; }
  .slide__tiles .tile{ width: 36px; height: 36px; }
  .slide__tiles strong{ font-size: 12.5px; }
  .slide__tiles small{ font-size: 10.5px; }
  .carousel__arrow{ width: 36px; height: 36px; }
  .modal__desc{ font-size: 14px; }
  .modal__perks strong{ font-size: 13px; }
  .modal__perks small{ font-size: 11px; }
  .modal__pricebar{ flex-direction: column; gap: 12px; align-items: flex-start; padding: 14px 18px; }
  .pricebar__right{ text-align: left; }
  .modal__pricebar .price{ font-size: 21px; }
}