/* ============================================================
   CUSTOM FIXES — Apple One clone for Netwa inspiration
   Compatible avec Apple One CSS d'origine
   ============================================================ */

/* ============================================================
   NETWA NEO — font globale
   ============================================================ */
@font-face {
  font-family: 'Netwa Neo';
  src: url('fonts/SwileNova-Bold.woff2') format('woff2'),
       url('fonts/NetwaNeo-Bold.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Netwa Neo';
  src: url('fonts/SwileNova-Black.woff2') format('woff2'),
       url('fonts/NetwaNeo-Black.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik Netwa';
  src: url('fonts/Graphik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik Netwa';
  src: url('fonts/Graphik-Medium.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

/* Application globale : Netwa Neo partout (dimensions inchangées, juste swap de font) */
html, body,
html *, body * {
  font-family: 'Netwa Neo', 'Graphik Netwa', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
/* Exceptions : icônes (pseudo-element font-icons Apple) — laisser leur font privée */
html *::before, html *::after, body *::before, body *::after {
  /* On garde Netwa Neo aussi sur les pseudo-elements texte */
  font-family: 'Netwa Neo', 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* ============================================================
   NETWA HERO — remplace le hero Apple
   Variables NETWA + classes essentielles importées de marketing.css
   ============================================================ */
:root {
  --netwa-teal: #00D4AA;
  --netwa-pink: #EC4899;
  --netwa-purple: #8B5CF6;
  --netwa-ink: #202124;
  --netwa-ink-2: #3C4043;
  --netwa-cream: #F0F4F9;
  --netwa-gray-5: #5F6368;
}

/* Dimensions alignées sur .section-hero Apple :
   padding-top 118px (35px small), width 980px (692px medium, 87.5% small),
   pas de min-height — la hauteur suit le contenu. */
.netwa-hero,
html[data-netwa-persona="landing"] .netwa-hero {
  position: relative;
  text-align: center;
  background: #fff !important;
  background-image: none !important;
  padding-top: 118px !important;
  padding-bottom: 71px !important;
  min-height: 621px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Fond blanc continu du hero jusqu'à la section juste au-dessus d'Abonnements NETWA
   (= hero + carousel river + section router "world-class entertainment") */
.section-river,
.section-router,
.section-river .section-content,
.section-router .section-content {
  background: #fff !important;
}
body.netwa-marketing { background: #fff !important; }

/* Anti-flicker : seam GPU entre hero et carousel.
   - overflow hidden ferme le carousel
   - background solide masque tout subpixel
   - chevauchement -1px évite la ligne de couture */
.section-river { overflow: hidden !important; background: #fff !important; margin-top: -1px !important; }
.river-gallery-container { background: #fff !important; }
.netwa-hero { margin-bottom: 0 !important; }
.netwa-personabar,
.netwa-personabar * { box-shadow: none !important; border-bottom: 0 !important; }

/* Section "Abonnements NETWA" : fond gris plus marqué + reveal forcé visible
   (Netwa CSS applique opacity:0 + translateY(48px) en attendant un scroll-trigger
   qui n'existe pas sans le React runtime — on neutralise) */
.netwa-pricing-block {
  background: #f5f5f7 !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.netwa-hero > .netwa-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 980px;
  max-width: 100%;
  padding: 0;
  z-index: 1;
}
@media (max-width: 1068px) {
  .netwa-hero > .netwa-container { width: 692px; }
}
@media (max-width: 734px) {
  .netwa-hero {
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .netwa-hero > .netwa-container { width: 87.5%; }
}

.netwa-hero__logo {
  display: block;
  margin: 0 auto 18px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
@media (max-width: 734px) {
  .netwa-hero__logo { width: 44px; height: 44px; margin-bottom: 14px; }
}

/* Sauts de ligne responsives du titre */
.br-mobile { display: none; }
.br-desktop { display: inline; }
@media (max-width: 734px) {
  .br-mobile { display: inline; }
  .br-desktop { display: none; }
}

.netwa-hero__title {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: clamp(44px, 7.5vw, 92px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--netwa-ink);
  margin: 0 auto 28px;
  max-width: 1100px;
  text-wrap: balance;
  transform-origin: center center;
  animation: netwa-hero-zoom 1.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes netwa-hero-zoom {
  from { transform: scale(0.15); opacity: 0; filter: blur(40px); }
  to   { transform: scale(1);    opacity: 1; filter: blur(0); }
}
.netwa-hero .hnetwa-h1-line { display: inline; }
.netwa-hero .hnetwa-h1-word {
  display: inline-block;
  white-space: nowrap;
}

/* Gradient text (Aurora) — appliqué au mot "révolution." */
.hnetwa-h1-word--gradient {
  position: relative;
  background: linear-gradient(135deg, var(--netwa-pink), var(--netwa-purple), var(--netwa-teal), var(--netwa-purple), var(--netwa-pink));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hnetwa-aurora 8s ease-in-out infinite alternate;
  isolation: isolate;
}
@keyframes hnetwa-aurora {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}

.netwa-hero__sub {
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 600;
  letter-spacing: .00022em;
  color: var(--netwa-ink-2);
  max-width: 605px;
  margin: 0 auto 35px;
}
@media (max-width: 1068px) {
  .netwa-hero__sub {
    font-size: 21px;
    line-height: 1.19048;
    letter-spacing: .00023em;
  }
}
@media (max-width: 734px) {
  .netwa-hero__sub {
    font-size: 19px;
    line-height: 1.21053;
    letter-spacing: .012em;
  }
}

.netwa-hero__cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.netwa-hero__cta-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Pills CTA — alignées sur la taille de la pill Apple "Try Apple One free"
   (padding 12px 22px, font-size 17px, border-radius 22px, font-weight 400) */
.netwa-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 12px 22px;
  border-radius: 22px;
  font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 17px;
  line-height: 1.17648;
  font-weight: 400;
  letter-spacing: -0.022em;
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, filter .25s ease;
  cursor: pointer;
  border: none;
}
.netwa-pill::after {
  content: "›";
  display: inline-block;
  margin-left: 8px;
  font-size: 1.1em;
  transform: translateY(-1px);
  transition: transform .25s ease;
}
.netwa-pill:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.1);
}
.netwa-pill:hover::after { transform: translate(4px, -1px); }

.netwa-pill {
  background: #1d1d1f !important;
  color: #fff !important;
}
.netwa-pill--teal { color: var(--netwa-teal) !important; }
.netwa-pill--pink { color: var(--netwa-pink) !important; }
.netwa-pill--purple { color: var(--netwa-purple) !important; }
.netwa-pill, .netwa-pill:hover { box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  .netwa-hero__title { animation: none; }
  .hnetwa-h1-word--gradient { animation: none; background-position: 0% 50%; }
}

/* ============================================================
   Fin du bloc NETWA HERO
   ============================================================ */

/* ------------------------------------------------------------
   1) Flèche "Learn more" + pluscircle
   La font "SF Pro Icons" privée d'Apple n'est pas chargée.
   On remplace par des SVG inline en mask.
   ------------------------------------------------------------ */
.more::after,
.icon-after.more::after {
  content: "" !important;
  display: inline-block !important;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.3em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M5.3 2.3L11 8l-5.7 5.7-1.4-1.4L8.2 8 3.9 3.7z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M5.3 2.3L11 8l-5.7 5.7-1.4-1.4L8.2 8 3.9 3.7z'/></svg>") no-repeat center / contain;
  font-family: inherit;
  transition: transform .25s ease;
}
.icon-wrapper:hover .more::after { transform: translateX(3px); }

.icon-pluscircle::after {
  content: "" !important;
  display: inline-block !important;
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.5A5.5 5.5 0 1113.5 8 5.5 5.5 0 018 13.5zM11 7.5H8.5V5h-1v2.5H5v1h2.5V11h1V8.5H11z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.5A5.5 5.5 0 1113.5 8 5.5 5.5 0 018 13.5zM11 7.5H8.5V5h-1v2.5H5v1h2.5V11h1V8.5H11z'/></svg>") no-repeat center / contain;
  font-family: inherit;
}

/* ------------------------------------------------------------
   2) Marquee — 3 rangées qui défilent à vitesses différentes
   L'animation est appliquée en JS sur .marquee-list. Le CSS
   ne fait que neutraliser le transform statique inline et
   définir le keyframe.
   ------------------------------------------------------------ */
.river-gallery .marquee.row-gallery {
  transform: none !important;
  overflow: hidden;
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}
.river-gallery .marquee.row-gallery .marquee-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  width: max-content !important;
  will-change: transform;
}
.river-gallery .marquee.row-gallery .tile-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}
/* Animation sur .marquee-list (width: max-content), -50% = exactement la moitié dupliquée */
.river-gallery .marquee.row-gallery .marquee-list {
  animation-name: marqueeScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
/* Vitesses calibrées par mesure live sur apple.com/apple-one/ :
   row-1 (factor 0.8) = 132 px/s, row-2 (factor 0.9) = 148.5 px/s, row-3 (factor 1.0) = 165 px/s.
   Durations = original list width / px_per_sec. */
.river-gallery .marquee.row-gallery[data-row-1] .marquee-list { animation-duration: 24.5s; }
.river-gallery .marquee.row-gallery[data-row-2] .marquee-list { animation-duration: 18s; }
.river-gallery .marquee.row-gallery[data-row-3] .marquee-list { animation-duration: 11s; }

@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause global */
.river-gallery.is-paused .marquee.row-gallery .marquee-list {
  animation-play-state: paused !important;
}

/* Hover : stop UNIQUEMENT la rangée survolée (pas les autres) */
.river-gallery .marquee.row-gallery:hover .marquee-list {
  animation-play-state: paused !important;
}

/* Pill "Voir détails" centrée dans la card au hover */
.river-gallery .marquee-hover-container { position: relative !important; }
.river-gallery .marquee-hover-content {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  background: rgba(0, 0, 0, .45) !important;
  border-radius: 10px !important;
  z-index: 2 !important;
}
.river-gallery .marquee-link:hover .marquee-hover-content,
.river-gallery .tile-container:hover .marquee-hover-content,
.river-gallery .marquee-hover-container:hover .marquee-hover-content {
  opacity: 1 !important;
}
.river-gallery .marquee-cta { transform: none !important; opacity: 1 !important; }
.netwa-detail-pill,
.river-gallery .marquee-cta.netwa-detail-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 980px;
  background: #fff;
  color: #1d1d1f !important;
  font-family: 'Graphik Netwa', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.river-gallery .marquee-cta.netwa-detail-pill::before,
.river-gallery .marquee-cta.netwa-detail-pill::after { content: none !important; display: none !important; }

/* Tiles : pattern L-L-X-L-L-X avec couleurs Netwa par forme.
   landscape → teal, square → purple, portrait → pink */
.river-gallery .marquee-picture {
  border-radius: 10px;
  overflow: hidden;
  display: inline-flex !important;
}
.river-gallery .marquee-picture-img { display: none !important; }
.river-gallery .marquee-picture-landscape {
  width: 345px !important; height: 195px !important;
  background: var(--netwa-teal) !important;
}
.river-gallery .marquee-picture-default {
  width: 195px !important; height: 195px !important;
  background: var(--netwa-purple) !important;
}
.river-gallery .marquee-picture-portrait {
  width: 135px !important; height: 195px !important;
  background: var(--netwa-pink) !important;
}
@media (max-width: 1068px) {
  .river-gallery .marquee-picture-landscape { width: 266px !important; height: 150px !important; }
  .river-gallery .marquee-picture-default { width: 150px !important; height: 150px !important; }
  .river-gallery .marquee-picture-portrait { width: 104px !important; height: 150px !important; }
}
@media (max-width: 734px) {
  .river-gallery .marquee-picture-landscape { width: 191px !important; height: 108px !important; }
  .river-gallery .marquee-picture-default { width: 108px !important; height: 108px !important; }
  .river-gallery .marquee-picture-portrait { width: 75px !important; height: 108px !important; }
}

/* Bouton Play/Pause : bottom-right du carousel */
.marquee-controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  justify-content: flex-end;
  z-index: 5;
}
.river-gallery-container { position: relative; }
.marquee-toggle {
  appearance: none;
  border: none;
  background: rgba(0,0,0,.06);
  color: #1d1d1f;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.marquee-toggle:hover { background: rgba(0,0,0,.12); transform: scale(1.05); }
.marquee-toggle:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.marquee-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.marquee-toggle .icon-play { display: none; }
.marquee-toggle .icon-pause { display: block; }
.river-gallery.is-paused + .marquee-controls .marquee-toggle .icon-play,
.river-gallery.is-paused ~ .marquee-controls .marquee-toggle .icon-play { display: block; }
.river-gallery.is-paused + .marquee-controls .marquee-toggle .icon-pause,
.river-gallery.is-paused ~ .marquee-controls .marquee-toggle .icon-pause { display: none; }

/* ------------------------------------------------------------
   3) Accordion FAQ — animation + → ×
   Structure Apple : .question > h3 > button.accordion-item-button
   contient .plus-icon (toggle visuel).
   ------------------------------------------------------------ */
.section-faq .question button.accordion-item-button {
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: inherit;
}
.section-faq .question .plus-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* On surcharge les ::before/::after Apple (qui pointent vers SF Pro Icons absente)
   et on crée un + visuel avec deux barres. */
.section-faq .question button .plus-icon::before,
.section-faq .question button .plus-icon::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  border-radius: 1px;
  display: block !important;
  padding: 0 !important;
  font-size: 0 !important;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.section-faq .question button .plus-icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.section-faq .question button .plus-icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
/* En state expanded : la barre verticale rotate 90deg → les deux barres
   forment un × (après rotation conjointe de 45deg sur le wrapper). */
.section-faq .question .plus-icon {
  transform: rotate(0deg) !important;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1) !important;
}
.section-faq .question[aria-expanded="true"] .plus-icon,
.section-faq .question.expanded .plus-icon {
  transform: rotate(45deg) !important;
}

/* Toggle du contenu (.transition-container)
   Apple force height:0 — on l'override avec !important. */
.section-faq .transition-container {
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  transition: height .4s ease-in-out, opacity .3s ease !important;
}
.section-faq .question[aria-expanded="true"] + .transition-container,
.section-faq .question.expanded + .transition-container,
.section-faq li:has(.question[aria-expanded="true"]) .transition-container {
  height: auto !important;
  opacity: 1;
  overflow: visible !important;
}

/* ------------------------------------------------------------
   4) Pricing breakdown — Apple JS gère .expanded nativement.
   Le CSS Apple a un bug responsive : .cost-breakdown reste
   opacity:0 + translateY(50%) même après .expanded à cause
   d'un override de media query. On force la révélation.
   ------------------------------------------------------------ */
.plan-tile.expanded .fade-text,
.plan-tile.expanded .fade-text .cost-breakdown,
.plan-tile.expanded .fade-text.service-item,
.plan-tile.expanded .price-strikethrough,
.plan-tile.expanded .price-total {
  opacity: 1 !important;
  transform: translateY(0%) !important;
  transition: opacity .8s ease, transform .8s ease !important;
}
.plan-tile.expanded .fade-delay-1,
.plan-tile.expanded .fade-delay-1 .cost-breakdown { transition-delay: .15s !important; }
.plan-tile.expanded .fade-delay-2,
.plan-tile.expanded .fade-delay-2 .cost-breakdown { transition-delay: .25s !important; }
.plan-tile.expanded .fade-delay-3,
.plan-tile.expanded .fade-delay-3 .cost-breakdown { transition-delay: .35s !important; }
.plan-tile.expanded .fade-delay-4,
.plan-tile.expanded .fade-delay-4 .cost-breakdown { transition-delay: .45s !important; }
.plan-tile.expanded .fade-delay-5,
.plan-tile.expanded .fade-delay-5 .cost-breakdown { transition-delay: .55s !important; }
.plan-tile.expanded .fade-delay-6,
.plan-tile.expanded .fade-delay-6 .cost-breakdown { transition-delay: .65s !important; }
.plan-tile.expanded .fade-delay-7,
.plan-tile.expanded .fade-delay-7 .cost-breakdown { transition-delay: .75s !important; }
.plan-tile.expanded .fade-delay-8,
.plan-tile.expanded .fade-delay-8 .cost-breakdown { transition-delay: .85s !important; }

/* Style des service-item dans la back-face */
.plan-tile.expanded .back-face .service-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
}
.plan-tile.expanded .back-face .cost-breakdown {
  font-weight: 400;
  font-size: 17px;
  color: #1d1d1f;
  text-align: right;
  white-space: nowrap;
}
.close-tile.tile-close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  border-radius: 50%;
  transition: background .2s ease;
}
.close-tile.tile-close-button:hover { background: rgba(0,0,0,.06); }
.close-tile.tile-close-button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #86868b;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.5A5.5 5.5 0 1113.5 8 5.5 5.5 0 018 13.5zM11 7.5H5v1h6z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.5A5.5 5.5 0 1113.5 8 5.5 5.5 0 018 13.5zM11 7.5H5v1h6z'/></svg>") no-repeat center / contain;
}

/* ============================================================
   FIX 2026-05-18 — flickering marquee + bouton play/pause
   ============================================================ */

/* Stabilize marquee tiles : ensure they always have a solid color background
   even if the source image is missing/broken (fixes flickering between hero & carousel). */
.marquee-picture {
  background: linear-gradient(135deg, rgba(0,212,170,.18), rgba(139,92,246,.18)) !important;
  border-radius: 16px;
  overflow: hidden;
  min-width: 191px;
  min-height: 108px;
}
.marquee-picture-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-row tinting (subtle persona accent) */
.marquee[data-row-1] .marquee-picture { background: linear-gradient(135deg, rgba(0,212,170,.28), rgba(0,212,170,.12)) !important; }
.marquee[data-row-2] .marquee-picture { background: linear-gradient(135deg, rgba(236,72,153,.28), rgba(236,72,153,.12)) !important; }
.marquee[data-row-3] .marquee-picture { background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(139,92,246,.12)) !important; }

/* Hide loading skeleton/placeholder lines that flicker before images resolve */
.river-gallery-container.images-loading::before,
.river-gallery-container.images-loading::after { display: none !important; }
.river-gallery-container { opacity: 1 !important; }

/* ============================================================
   FIX 2026-05-18 v2 — traits parasites entre hero et carousel
   Le clone Apple a beaucoup de pseudo-éléments qui peuvent apparaître
   comme des lignes/dashes pendant le chargement. On nettoie agressivement.
   ============================================================ */

/* Force tile dimensions avec valeur fixe (pas de var CSS qui pourrait être unset) */
.section-river .marquee-picture,
.section-river .marquee-picture-landscape,
.section-river .marquee-link,
.section-river .marquee-hover-container {
  min-height: 195px !important;
  height: 195px !important;
}
@media (max-width: 1068px) {
  .section-river .marquee-picture,
  .section-river .marquee-picture-landscape,
  .section-river .marquee-link,
  .section-river .marquee-hover-container {
    min-height: 150px !important;
    height: 150px !important;
  }
}
@media (max-width: 735px) {
  .section-river .marquee-picture,
  .section-river .marquee-picture-landscape,
  .section-river .marquee-link,
  .section-river .marquee-hover-container {
    min-height: 108px !important;
    height: 108px !important;
  }
}

/* Tile width force aussi (pour qu'elles ne collapsent pas en lignes) */
.section-river .marquee-picture-landscape {
  width: 345px !important;
}
@media (max-width: 1068px) {
  .section-river .marquee-picture-landscape { width: 266px !important; }
}
@media (max-width: 735px) {
  .section-river .marquee-picture-landscape { width: 191px !important; }
}

/* Force opacity:1 sur le marquee (Apple démarre à opacity:0 et JS le passe à 1) */
.section-river .marquee {
  opacity: 1 !important;
  transition: none !important;
}

/* Nuke tous les pseudo-éléments potentiellement parasites dans section-river
   (sauf ceux qu'on définit nous-mêmes plus haut) */
.section-river *::before,
.section-river *::after {
  display: none !important;
  content: none !important;
}

/* Réduire le padding-top de section-river pour rapprocher du hero */
.section-river { padding-top: 32px !important; padding-bottom: 32px !important; }

/* ============================================================
   FIX 2026-05-18 v3 — trait persistant + bouton play/pause
   ============================================================ */

/* Hide ANY <style> element if mistakenly rendered as content */
style { display: none !important; }

/* Hide any orphan <source> from <picture> in case they render */
.section-river source { display: none !important; }

/* Nuke borders/box-shadows on seam between hero and carousel */
.netwa-hero,
.section-river,
.river-gallery-container,
.river-gallery,
.overflow-container,
.marquee,
.marquee-list,
.tile-container,
.marquee-link,
.marquee-picture {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ============================================================
   FIX 2026-05-18 v4 — barre sub-pixel entre hero et carousel
   Cause : le translateX(-50%) sur la marquee-list crée des
   artefacts sub-pixel au render qui apparaissent comme une fine
   ligne horizontale au-dessus du carousel. Solution : forcer
   composition GPU séparée + backface-visibility hidden.
   ============================================================ */
.section-river,
.river-gallery-container,
.river-gallery,
.overflow-container,
.marquee,
.marquee-list,
.tile-container,
.marquee-link,
.marquee-picture {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

/* Recouvre le seam entre hero et section-river avec un overlay solide
   (au cas où le hero ait une bordure-bottom non maîtrisée par notre CSS). */
.section-river::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: #fff !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.section-river { position: relative !important; }

/* Empêche le marquee-list de déborder verticalement (parfois les tiles
   en transform créent un sliver de 1px qui dépasse en haut/bas) */
.river-gallery .marquee.row-gallery {
  overflow: hidden !important;
}

/* ============================================================
   FIX 2026-05-18 v5 — contour bleu de focus sur clic souris
   On retire l'outline au focus souris (focus standard) mais on
   garde pour focus-visible (navigation clavier) → reste accessible.
   ============================================================ */
.netwa-tarif-toggle__btn:focus,
.netwa-tarif-toggle__btn:focus-within,
.section-faq .accordion-item-button:focus,
.section-faq .accordion-item-button:focus-within,
.section-faq .question:focus,
.section-faq summary:focus,
.netwa-faq__q:focus,
button:focus,
summary:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Accessibilité : restaure un focus ring discret pour navigation clavier
   (uniquement via Tab, pas au clic souris) */
.netwa-tarif-toggle__btn:focus-visible,
.section-faq .accordion-item-button:focus-visible,
.netwa-faq__q:focus-visible {
  outline: 2px solid var(--netwa-teal, #00D4AA) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   FIX 2026-05-20 — bouton play/pause retiré du DOM (JS).
   Cette règle hide tout reste éventuel (anti-FOUC pendant injection).
   `.play-pause-button` = bouton hardcoded dans le clone HTML (Apple).
   ============================================================ */
.marquee-controls,
.marquee-toggle,
.play-pause-button,
.play-pause-marquees-button {
  display: none !important;
}

/* ============================================================
   FIX 2026-05-20 — bascule animation marquee de CSS keyframe vers
   RAF JS pour matcher EXACTEMENT le marquee Apple (frame-rate
   dependent, formule speeds.XL × hoverFactor × elSpeedFactor).
   On désactive l'animation CSS pour ne pas écraser le transform
   inline injecté par le RAF.
   ============================================================ */
.river-gallery .marquee.row-gallery .marquee-list {
  animation: none !important;
}
.river-gallery .marquee.row-gallery:hover .marquee-list,
.river-gallery.is-paused .marquee.row-gallery .marquee-list {
  animation: none !important;
}

/* ============================================================
   LOGO NETWA — "NET" en Netwa Neo + image SVG du W (2026-05-30)
   ============================================================ */
.netwa-personabar__logo,
.netwa-personabar__logo:link,
.netwa-personabar__logo:visited {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  transition: opacity .2s ease;
  color: inherit;
}
.netwa-personabar__logo:hover { opacity: .8; }
/* Spécificité élevée pour battre l'ancienne règle `.netwa-personabar__logo span { color:#fff }` */
.netwa-personabar__logo span.netwa-personabar__logo-text,
.netwa-personabar .netwa-personabar__logo-text {
  display: inline-block;
  font-family: 'Netwa Neo', Graphik, system-ui, sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: .8;
  letter-spacing: -0.04em;
  color: #FF2CB2;
}
.netwa-personabar__logo-img {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* Fond blanc cassé : base de page (html/body/wrapper marketing) → la zone status bar /
   safe-area (mobile) prend la même teinte, plus de bande noire/blanche au-dessus de la navbar. */
html, body,
.netwa-marketing,
html[data-netwa-persona="landing"] .netwa-marketing {
  background: #F5F5F7 !important;
}

/* "Tout en blanc cassé" : fonds de SECTIONS de la landing → #F5F5F7.
   Les cards, pills et composants gardent leur blanc pur pour le contraste. */
html[data-netwa-persona="landing"] .netwa-hero,
.section-river,
.section-router,
.section-river .section-content,
.section-router .section-content,
.section-river::before,
.netwa-pricing-block {
  background: #F5F5F7 !important;
}

/* Mobile notch : la navbar se cale SOUS la safe-area et son fond blanc cassé remplit
   la zone du notch → plus de bande blanche, le contenu n'est plus coupé en haut. */
.netwa-personabar {
  padding-top: env(safe-area-inset-top, 0px) !important;
  background: #F5F5F7 !important;
}