/* ============ THEME ============ */
:root{
  --shadow: 0 12px 40px rgba(0,0,0,.4);
  --anchor-offset: 88px;
}
@media (max-width: 767.98px){
  :root{ --anchor-offset: 72px; }
}

/* ======= Reset ======= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 600px at 10% -20%, #0f1730 0%, #0b0f17 50%, #06080f 100%);
  overflow-x:hidden;
  padding-top:72px;
}
@media (min-width:768px){ body{padding-top:84px} }

/* ======= Anchors ======= */
section[id], [id^="section-"], .section[id] { scroll-margin-top: var(--anchor-offset); }

/* ======= Grid Background ======= */
.grid-bg, .grid-fade{
  position:fixed; inset:0;
  z-index:-9999;
  pointer-events:none;
}
.grid-bg{
  background-image:
    linear-gradient(transparent 98%, rgba(255,255,255,.04) 99%),
    linear-gradient(90deg, transparent 98%, rgba(255,255,255,.04) 99%);
  background-size:40px 40px,40px 40px;
  animation:gridShift 30s linear infinite;
}
@keyframes gridShift{from{background-position:0 0,0 0}to{background-position:400px 400px,400px 400px}}
.grid-fade{
  background:radial-gradient(900px 400px at 80% 10%, rgba(0,229,255,.15), transparent 60%),
             radial-gradient(1200px 500px at 20% 80%, rgba(91,140,255,.12), transparent 60%);
}

/* ======= Containers & Sections ======= */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.section{padding:5.5rem 0}

/* ======= Header ======= */
.header{
  position:fixed; top:0; left:0; right:0;
  background:rgba(10,14,24,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:1000;
  transition:padding .25s ease, box-shadow .25s ease;
  padding:1rem 0;
}
.header.scrolled{padding:.6rem 0; box-shadow:0 8px 30px rgba(0,0,0,.35)}
.nav-container{display:flex;justify-content:space-between;align-items:center}

/* ======= Logo ======= */
.logo{
  display:flex;align-items:center;
  font-weight:800;font-size:1.25rem;
  letter-spacing:.4px;text-decoration:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:logoGradient 3s linear infinite;
}
@keyframes logoGradient{0%{background-position:0% center}100%{background-position:200% center}}
@supports not (-webkit-background-clip:text){ .logo{color:var(--accent)} }

/* ======= Navigation ======= */
.nav-menu{list-style:none;display:flex;gap:1.4rem}
.nav-link{color:var(--muted);text-decoration:none;font-weight:600;position:relative}
.nav-link:hover{color:var(--txt)}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .25s
}
.nav-link:hover::after{width:100%}

/* ======= Dropdown menu ======= */
/* Wrap dropdown relative container */
.nav-menu li.dropdown {
  position: relative;
}
/* Initially hide the dropdown menu */
.nav-menu li.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: rgba(11, 16, 32, 0.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,.4);
  z-index: 1000;
  padding: 0.4rem 0;
}
.nav-menu li.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu li {
  list-style: none;
}
.dropdown-menu li a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-menu li a:hover {
  background: rgba(255,255,255,.06);
  color: var(--txt);
}

/* Responsive dropdown for mobile: show sub-items under Support and remove absolute positioning */
@media (max-width: 768px){
  .nav-menu li.dropdown {
    position: static;
  }
  /* Hide dropdown menu by default on mobile */
  .nav-menu li.dropdown .dropdown-menu {
    display: none;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-left: 0;
  }
  /* Show the dropdown when parent has class open */
  .nav-menu li.dropdown.open .dropdown-menu {
    display: block;
  }
  .nav-menu li.dropdown .dropdown-menu li a {
    padding-left: 2rem;
    padding-right: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-menu li.dropdown .dropdown-menu li:last-child a {
    border-bottom: 0;
  }
}

/* ======= Language links ======= */
.lang-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 1rem;
  justify-content: flex-start;
}
.lang-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color .2s;
}
.lang-links a:hover {
  color: var(--txt);
}
.lang-links a.active {
  color: var(--txt);
}

/* Flags sizing within language links */
.lang-links .flag-icon{
  width: 22px;
  height: 14px;
  display: block;
}

/* Group nav and language links to keep them aligned to the right */
.nav-items {
  display: flex;
  align-items: center;
}
.nav-items .lang-links { margin-left: 1.5rem; }

/* Mobile: stack language flags above the hamburger and center them */
@media (max-width: 768px){
  .nav-items { display: flex; flex-direction: column; align-items: center; }
  .nav-items nav { order: 2; }
  .nav-items .lang-links {
    order: 1; margin-left: 0; margin-bottom: 0.4rem; margin-top: 0; justify-content: center;
  }
}

/* CTA */
.cta-button{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#07111f;font-weight:800;padding:.7rem 1.2rem;border-radius:10px;
  text-decoration:none;box-shadow: var(--shadow);
}

/* ======= Burger (button & icon) ======= */
.mobile-menu-button{
  display:none;background:transparent;border:0;color:var(--txt);cursor:pointer;width:40px;height:28px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 1002;
}
.mobile-menu-button .burger,
.mobile-menu-button .burger::before,
.mobile-menu-button .burger::after{
  display:block;width:24px;height:2px;background:var(--txt);border-radius:2px;position:relative;margin:0 auto;
  transition:transform .2s ease, opacity .2s ease;
}
.mobile-menu-button .burger{top:13px}
.mobile-menu-button .burger::before{content:"";position:absolute;top:-7px;left:0;width:24px;height:2px;background:inherit}
.mobile-menu-button .burger::after{content:"";position:absolute;top:7px;left:0;width:24px;height:2px;background:inherit}
.mobile-menu-button.is-open .burger{background:transparent}
.mobile-menu-button.is-open .burger::before{transform:translateY(7px) rotate(45deg)}
.mobile-menu-button.is-open .burger::after{transform:translateY(-7px) rotate(-45deg)}

/* ======= Hero ======= */
/*
 * The hero section covers the full viewport height minus the fixed header offset.
 * Adding a top padding equal to the anchor offset ensures consistent spacing across
 * all languages regardless of text length and header height. Without this,
 * languages with longer headings or multiple lines may appear closer to or further
 * from the header, which can look unbalanced.
 */
.hero {
  position: relative;
  /* occupy the full viewport height minus the header offset */
  min-height: calc(100dvh - var(--anchor-offset));
  /* push the content down so it never sits behind the fixed header */
  padding-top: var(--anchor-offset);
  display: flex;
  align-items: center;
}
/* Fallback for browsers that don't support the 100dvh unit */
@supports not (min-height:100dvh){
  .hero {
    min-height: calc(100vh - var(--anchor-offset));
  }
}
.hero-inner{text-align:center}
.hero-badge{
  display:inline-flex;gap:.5rem;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  padding:.4rem .8rem;border-radius:999px;color:var(--muted);font-weight:600;margin-bottom:1rem
}
.txt-gradient{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.hero h1{
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.1; margin-bottom: .7rem; font-weight:800;
}
.hero p{color:var(--muted);font-size:1.06rem}
.hero-cta{margin-top:1.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ======= Buttons ======= */
.btn-primary,.btn-secondary{
  padding:.9rem 1.4rem;border-radius:12px;font-weight:800;text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}
.btn-primary{
  background:#fff;color:#0e1420;
  box-shadow:0 10px 24px rgba(255,255,255,.1)
}
.btn-primary:hover{transform:translateY(-2px)}
/* Harmonisation : Refuser = même style que Accepter */
.btn-secondary{
  background:#fff;
  color:#0e1420;
  border:2px solid transparent;
  box-shadow:0 10px 24px rgba(255,255,255,.1);
}
.btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.25)
}

/* ======= Trust Strip ======= */
.trust-strip{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem;list-style:none;color:var(--muted)
}
.trust-strip li{
  position:relative;padding:.5rem .9rem .5rem 1.8rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:999px
}
.trust-strip li::before{
  content:""; position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow: 0 0 8px rgba(0,229,255,.6)
}

/* ======= Sections ======= */
.section-title{
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight:800;margin-bottom:.4rem;
  text-align:center;
}
.section-subtitle{
  color:var(--muted);
  max-width:720px;margin:0 auto 2rem auto;
  text-align:center;
}

/* ======= Cards ======= */
.cards-grid{
  display:grid;gap:1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.card{
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(0, 229, 255, 0.20);
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform: translateY(-6px); border-color: #00e5ff; box-shadow: 0 14px 32px rgba(0,229,255,0.22) }
.card h3{
  margin: 0 0 10px 0;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing:.2px;
  color:#fff;
  display:flex; align-items:center; gap:8px;
}
.card .bullet{
  margin: 0; padding: 0; list-style: none;
  color: var(--muted);
}
.card .bullet li{
  display:flex; align-items:center; gap:8px;
  padding: 6px 0;
  font-size: 0.98rem;
}
.card .bullet li::before{
  content:"✔";
  font-size:.9rem;
  color:#00e5ff;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.45));
}

/* ======= Contact ======= */
.contact-form{
  background: var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:1.2rem; box-shadow: var(--shadow)
}
.form-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom:1rem
}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-label{font-weight:700}
.form-input{
  background: rgba(255,255,255,.04); color:var(--txt);
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  padding:.9rem 1rem; transition: box-shadow .15s, border-color .15s
}
.form-input:focus{outline:none; border-color: var(--accent); box-shadow:0 0 0 3px rgba(0,229,255,.15)}
.submit-button{
  width:100%;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#06101c;
  font-weight:900;
  border:none;
  padding: .95rem 1.2rem;
  border-radius:12px;
  cursor:pointer;
  margin-top: 1.2rem; /* ajoute un espace entre le message et le bouton (augmenté) */
}

/* ======= Footer ======= */
.footer{
  background:#060910; border-top:1px solid rgba(255,255,255,.06);
  padding:3.5rem 0 2rem
}
.footer-content{
  display:grid;
  gap:1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom:1.2rem;
  text-align: center;
}

/* Center footer sections on larger screens */
@media (min-width: 768px) {
  .footer-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
  }
  .footer-section {
    text-align: center;
  }
  .footer-section h3 {
    text-align: center;
  }
  .footer-section p {
    margin-left: auto;
    margin-right: auto;
  }
}
.footer-section h3{font-size:1rem;margin-bottom:.4rem}
.footer-section p{color:var(--muted)}

/* Footer copyright (third column): add spacing and slightly darker color */
.footer-copy p{
  margin-top:1rem; /* increase spacing to create an extra line break */
  color:#748199; /* slightly darker tone for copyright text */
}

/* Style footer quick links: remove underline and dark blue color */
.footer-section a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer-section a:hover{
  color: var(--txt);
  text-decoration: none;
}
/* footer copy section (third column) inherits text alignment from parent */
/* Remove obsolete .footer-bottom style as copy is now part of footer-section */


/* ======= Alerts (contact form messages) ======= */
.alert{
  margin-bottom:1rem;
  padding:.8rem 1.2rem;
  border-radius:6px;
  font-weight:600;
  text-align:center;
}
.alert.success{
  background:rgba(0,229,255,.1);
  border:1px solid var(--accent);
  color:var(--accent);
}
.alert.error{
  background:rgba(255,59,48,.1);
  border:1px solid #FF3B30;
  color:#FF3B30;
}

/* ======= Animations ======= */
.fade-in{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.fade-in.visible{opacity:1;transform:none}

/* ======= Menu Mobile ======= */
@media (max-width: 768px){
  .nav-menu{display:none}
  .mobile-menu-button{display:block}
  .nav-menu.active{
    position:absolute; left:0; right:0;
    top:64px;
    background:#0b1020; border:1px solid rgba(255,255,255,.08);
    border-radius:0;
    display:flex; flex-direction:column; gap:0;
    min-width:100%;
    overflow:hidden; box-shadow: var(--shadow); z-index:1001;
    text-align:center;
  }
  .nav-menu.active .nav-link{
    padding:1rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-menu.active .nav-link:last-child{border-bottom:0}
  .hero-cta{flex-direction:column}
}

/* ======= Small Devices ======= */
@media (max-width: 480px){
  .section{padding:4.2rem 0}
}

/* ======= WhatsApp ======= */
.whatsapp-float{
  position:fixed; bottom:20px; right:20px; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.45) }

/* ======= Logo spacing ======= */
header .logo { margin-right: 25px; }

/* ======= Back-to-top ======= */
.back-to-top {
  position: fixed;
  bottom: 90px; right: 80px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color: #06101c;
  font-weight: 900;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: 18px;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 1001;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ======= Fix centrage Firefox/Chrome mobile ======= */
@media (max-width: 768px){
  .cards-grid {
    justify-items: center;
    text-align: center;
  }
  .card {
    margin: 0 auto;
    text-align: center;
  }
  .card .bullet li {
    justify-content: center;
  }
  .card h3{
    justify-content: center;
    text-align: center;
  }
  .card .bullet {
    text-align: center;
  }
}
/* ==== Menu mobile — look & feel amélioré (sans changer le JS) ==== */
@media (max-width: 768px){
  .nav-container { position: relative; }
  .nav-menu.active{
    position: absolute;
    top: 64px; left: 12px; right: 12px;
    min-width: auto;
    display: flex; flex-direction: column;
    background: rgba(13, 18, 32, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    overflow: hidden;
    z-index: 1002;
    transform-origin: top center;
    animation: menuPop .18s ease-out both;
  }
  .nav-menu.active .nav-link{
    display: block;
    padding: 1.1rem 1rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: .2px;
    color: #e6f0ff;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-menu.active .nav-link:last-child{ border-bottom: 0; }
  .nav-menu.active .nav-link:hover{
    background: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
  }
  .nav-menu.active .nav-link:active{
    background: linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.10));
  }
  .mobile-menu-button.is-open{
    box-shadow: 0 0 0 3px rgba(0,229,255,.18);
    border-radius: 10px;
  }
}

/* animation d’apparition du panneau */
@keyframes menuPop{
  from{ opacity: 0; transform: translateY(-6px) scale(.98); }
  to  { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ===== GDPR Cookie Banner ===== */
.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 780px;
  margin: 0 auto;
  background: rgba(13, 18, 32, 0.95);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  border-radius: 12px;
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: center;
  color: var(--txt);
  z-index: 2000;
  font-size: .95rem;
  animation: fadeIn .24s ease-out;
}
.cookie-consent p {
  margin: 0;
  text-align: center;
  color: var(--txt);
}
.cookie-consent .cookie-link{
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}
.cookie-consent .cookie-link:hover{
  text-decoration: underline;
}
.cookie-buttons {
  display: flex;
  gap: .6rem;
}
.cookie-buttons .btn-primary,
.cookie-buttons .btn-secondary {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: .6rem 1.2rem;
  font-weight: 800;
}
@media (max-width: 520px){
  .cookie-consent{
    left: 12px; right: 12px; padding: .9rem 1rem;
  }
}


/* Uniformiser le départ sous le header pour toutes les langues */
main > section:first-of-type,
.hero:first-of-type{
  margin-top: clamp(16px, 3.5vh, 48px);
}
/* Garantit que les ancres tombent bien sous un header fixe */
section[id], [id^="section-"], .section[id]{ scroll-margin-top: 84px; }

/* === Logo image + texte dégradé animé === */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  /* reset au cas où l'ancien effet était sur .logo */
  background:none; -webkit-background-clip:initial; background-clip:initial; color:inherit;
}

.logo img{ height:42px; width:auto; display:block; } /* ajuste la hauteur ici */

/* Le dégradé animé revient sur le texte seulement */
.logo-text{
  font-weight:800;
  font-size:1.25rem;        /* ajuste si tu veux plus gros/petit */
  letter-spacing:.4px;

  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;

  animation: logoGradient 3s linear infinite;
}

/* Fallback si -webkit-background-clip n'est pas dispo */
@supports not (-webkit-background-clip:text){
  .logo-text{ color: var(--accent); }
}

/* Animation du dégradé (si pas déjà déclarée) */
@keyframes logoGradient{
  0%   { background-position:   0% center; }
  100% { background-position: 200% center; }
}
/* === Forcer logo + texte complètement à gauche en mobile === */
@media (max-width: 768px){
  .nav-container {
    justify-content: space-between; /* menu reste à droite */
  }
  .logo {
    margin-left: 0 !important;   /* colle au bord gauche */
    justify-content: flex-start; /* logo + texte alignés à gauche */
  }
}
@media (max-width: 768px){
  .header .container{ padding-left: 2px; padding-right: 12px; } /* menu garde un petit souffle à droite */
  .logo{ margin-left: 0 !important; }
}
/* ======= Carrousels en bande continue (plus lent, pro) ======= */
.brand-carousel{
  overflow:hidden; position:relative; max-width:1200px; margin:1.2rem auto 0; padding:.6rem 0;
}
.brand-track{ display:flex; align-items:center; gap:3rem; }
.brand-track img{
  height:38px; width:auto; opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.brand-track img:hover{ 
  opacity:1; 
  transform:translateY(-2px); 
}

.photo-carousel{
  overflow:hidden; max-width:1200px; margin:1.2rem auto 0;
  border:1px solid rgba(255,255,255,.08); border-radius:14px;
  background:rgba(255,255,255,.03); box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.photo-track{ display:flex; align-items:center; gap:12px; padding:12px; }
.photo-track img{
  height:180px; width:auto; border-radius:10px; display:block; object-fit:cover;
  filter:saturate(1.05) contrast(1.02); background:#0b1020;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  opacity: 0; /* fade-in quand chargée */
}
.photo-track img.loaded{ opacity: 1; }
@media (min-width:768px){ .photo-track img{ height:220px; } }

/* Animation continue pilotée par variables CSS */
.is-looping{
  will-change: transform;
  animation: fbz-loop var(--duration, 36s) linear infinite; /* durée par défaut un peu plus lente */
}
@keyframes fbz-loop{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(calc(-1 * var(--loop-distance, 600px)), 0, 0); }
}

/* Respecte la préférence utilisateur sans stopper totalement */
@media (prefers-reduced-motion: reduce){
  .is-looping{ animation-duration: calc(var(--duration, 36s) * 2); }
}