/* ============================================================
   SEN MEDIAFLIX — style.css
   Cinéma sombre · néons rouge & bleu · liquid glass
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
/* La règle ci-dessus écrase le « display: none » natif de l'attribut hidden
   (une règle d'auteur bat toujours la feuille du navigateur). Sans cette ligne,
   un <video hidden> ou un <img hidden> reste visible — d'où l'icône de média
   cassé. On rétablit le comportement attendu pour tout le site. */
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Design tokens ---------- */
:root {
  --bg:        #0A0E1A;
  --bg-2:      #0d1424;
  --red:       #E50914;
  --red-soft:  #ff2d3a;
  --blue:      #2563EB;
  --blue-deep: #1E3A8A;
  --blue-lite: #3B82F6;
  --ink:       #F4F6FF;
  --muted:     #B7C0DD;
  --muted-2:   #8b95b8;

  --glass-bg:  linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  --glass-brd: rgba(255,255,255,0.15);
  --glass-blur: blur(18px) saturate(160%);

  --radius:    24px;
  --radius-sm: 16px;
  --radius-lg: 28px;

  --shadow:    0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.20);
  --glow-red:  0 0 20px rgba(229,9,20,0.55);
  --glow-blue: 0 0 28px rgba(37,99,235,0.45);

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --maxw:      1180px;

  /* échelle z-index sémantique */
  --z-bg: 0; --z-parallax: 1; --z-content: 2; --z-nav: 40;
  --z-backdrop: 90; --z-modal: 100; --z-splash: 200;
}

/* ---------- Base ---------- */
/* Garde-fou : aucun défilement horizontal possible, quelle que soit la largeur */
html { overflow-x: hidden; max-width: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh; /* évite le saut dû à la barre d'URL mobile */
  overflow-x: hidden;
  max-width: 100%;
}
body.is-loading, body.locked { overflow: hidden; height: 100vh; height: 100dvh; }

h1, h2, h3, h4, .brand-text { font-family: "Poppins", "Inter", sans-serif; line-height: 1.1; }

/* Fond très sombre + vignettage cinéma par-dessus le canvas */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-parallax);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(37,99,235,0.10), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(229,9,20,0.08), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---------- Canvas de fond ---------- */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  z-index: var(--z-bg);
  pointer-events: none;
}

/* ---------- Parallaxe (blobs, faisceau, grille) ---------- */
.parallax { position: fixed; inset: 0; z-index: var(--z-parallax); pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.5; will-change: transform;
  transition: transform 0.25s ease-out;
}
.blob--red    { width: 46vw; height: 46vw; top: -8vw;  left: -6vw;  background: radial-gradient(circle, rgba(229,9,20,0.55), transparent 68%); }
.blob--blue   { width: 52vw; height: 52vw; bottom: -14vw; right: -10vw; background: radial-gradient(circle, rgba(37,99,235,0.50), transparent 68%); }
.blob--violet { width: 34vw; height: 34vw; top: 42%; left: 55%; background: radial-gradient(circle, rgba(124,58,237,0.35), transparent 70%); }

.light-beam {
  position: absolute; top: -30%; left: 8%;
  width: 42vw; height: 160vh;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(180,205,255,0.06) 45%, rgba(180,205,255,0.10) 50%, rgba(180,205,255,0.06) 55%, transparent);
  filter: blur(6px); opacity: 0.7; will-change: transform;
}
.grid-overlay {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%);
  opacity: 0.5;
}

/* ============================================================
   LIQUID GLASS
   ============================================================ */
.glass-card, .modal-glass, #navbar .nav-inner {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Force ces panneaux « verre dépoli » sur leur propre calque GPU. Sans ça,
     certains GPU/pilotes Windows recalculent le flou en même temps que le fond
     animé (canvas) juste en dessous et laissent une image précédente non
     effacée à l'écran → effet de texte dédoublé/fantôme, surtout visible sur
     PC (rarement sur mobile, dont le pipeline de rendu est différent). */
  transform: translateZ(0);
  isolation: isolate;
}
/* Reflet lumineux qui balaye la carte au survol */
.glass-card { position: relative; overflow: hidden; }
.glass-card::before {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg); transition: left 0.7s var(--ease-out);
  pointer-events: none;
}
.glass-card:hover::before { left: 130%; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  --grad: linear-gradient(120deg, var(--red), var(--blue));
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.4rem;
  border: none; border-radius: 999px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.98rem;
  cursor: pointer; position: relative; overflow: hidden;
  color: #fff; text-align: center;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, filter 0.35s ease;
}
.btn svg { flex: none; }
.btn-neon { background: var(--grad); background-size: 180% 180%; box-shadow: 0 6px 22px rgba(229,9,20,0.30), 0 6px 22px rgba(37,99,235,0.22); }
.btn-neon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform 0.6s var(--ease-out);
}
.btn-neon:hover { transform: scale(1.06) rotate(-1.5deg); box-shadow: 0 0 20px rgba(229,9,20,0.70), 0 0 45px rgba(37,99,235,0.35); }
.btn-neon:hover::after { transform: translateX(120%); }
.btn-neon:active { transform: scale(0.99); }

.btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { transform: scale(1.04); box-shadow: var(--glow-blue); border-color: rgba(59,130,246,0.6); }

.btn-wa {
  background: linear-gradient(120deg, #1faa53, #25D366);
  box-shadow: 0 6px 20px rgba(37,211,102,0.30);
}
.btn-wa:hover { transform: scale(1.04); box-shadow: 0 0 22px rgba(37,211,102,0.65); }

.btn-lg { min-height: 54px; padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.btn-sm { min-height: 48px; padding: 0.6rem 1.05rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

.link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--blue-lite); font-weight: 600; padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(59,130,246,0.5); min-height: 48px;
}
.link-btn:hover { color: #93b4ff; }

/* ============================================================
   TEXTE : dégradé animé + apparitions
   ============================================================ */
.gradient-text {
  background: linear-gradient(100deg, var(--red-soft), #ff7a8a, var(--blue-lite), var(--red-soft));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradient-shift 8s ease infinite;
}
.blur-in { animation: blur-in 1s var(--ease-out) both; }
.split-letters .ltr {
  display: inline-block;
  opacity: 0; transform: translateY(0.6em);
  background: linear-gradient(100deg, var(--red-soft), #ff8a97, var(--blue-lite), var(--red-soft));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Les lettres n'entrent en scène qu'une fois le chargement cinématique terminé */
#splash.ready .split-letters .ltr {
  animation: letter-up 0.6s var(--ease-out) both, gradient-shift 8s ease infinite;
  animation-delay: calc(var(--i, 0) * 0.045s + 0.2s), 0s;
}

/* ============================================================
   SPLASH
   ============================================================ */
#splash {
  position: fixed; inset: 0; z-index: var(--z-splash);
  display: grid; place-items: center;
  padding: calc(1.5rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));
  background: radial-gradient(120% 100% at 50% 30%, rgba(13,20,36,0.55), rgba(10,14,26,0.92));
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), visibility 0.8s;
  overflow-y: auto; /* paysage court : le contenu reste accessible */
}
#splash.hide { opacity: 0; transform: scale(1.06); visibility: hidden; }
.splash-inner { text-align: center; max-width: 760px; }
.splash-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1.2rem; margin-bottom: 1.6rem;
  border: 1px solid var(--glass-brd); border-radius: 999px;
  background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);
  font-family: "Poppins"; letter-spacing: 0.28em; font-size: 0.72rem; color: var(--muted);
}
.badge-ring { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: var(--glow-red); }
.splash-title { font-size: clamp(2.1rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; margin-bottom: 1rem; }
.splash-sub { font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--muted); margin-bottom: 2rem; animation-delay: 0.5s; }
.splash-hint { margin-top: 1.5rem; color: var(--muted-2); font-size: 0.85rem; letter-spacing: 0.05em; animation-delay: 0.9s; }
#continue-btn { font-size: 1.15rem; }

/* ============================================================
   SITE (masqué tant que le splash est actif)
   ============================================================ */
#site { opacity: 0; transition: opacity 0.9s var(--ease-out) 0.15s; position: relative; z-index: var(--z-content); }
body.entered #site { opacity: 1; }

/* ---------- NAVBAR ---------- */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: calc(0.7rem + env(safe-area-inset-top)) calc(clamp(0.8rem, 3vw, 1.5rem) + env(safe-area-inset-right)) 0.7rem calc(clamp(0.8rem, 3vw, 1.5rem) + env(safe-area-inset-left));
  transform: translateY(-120%); transition: transform 0.6s var(--ease-out);
}
body.entered #navbar { transform: translateY(0); }
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.9rem; border-radius: 18px;
}
#navbar.scrolled .nav-inner { box-shadow: 0 10px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18); }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.brand-mark { display: grid; place-items: center; animation: pulse-soft 4s ease-in-out infinite; }
.brand-text { font-weight: 800; letter-spacing: 0.02em; font-size: 1.05rem; color: var(--ink); }
.brand-accent { color: var(--red); }
.nav-links { display: flex; align-items: center; gap: 0.4rem; }
.nav-link {
  position: relative; padding: 0.55rem 0.85rem; border-radius: 10px;
  color: var(--muted); font-weight: 500; font-size: 0.96rem; min-height: 48px; display: inline-flex; align-items: center;
  transition: color 0.25s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--red), var(--blue-lite));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
  box-shadow: 0 0 10px rgba(229,9,20,0.6);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--ink); }
.nav-cta { margin-left: 0.4rem; }

.hamburger { display: none; width: 48px; height: 48px; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.hamburger span { width: 24px; height: 2.4px; background: var(--ink); border-radius: 2px; transition: transform 0.35s var(--ease-out), opacity 0.25s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 7rem clamp(1rem, 4vw, 2rem) 4rem; text-align: center;
}
.hero-content { max-width: 900px; }
.hero-eyebrow {
  display: inline-block; padding: 0.4rem 1rem; margin-bottom: 1.3rem;
  border: 1px solid var(--glass-brd); border-radius: 999px; background: rgba(255,255,255,0.05);
  font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em;
}
.hero-title { font-size: clamp(2.2rem, 6.5vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; margin-bottom: 1.3rem; }
.hero-sub { font-size: clamp(1rem, 2.3vw, 1.22rem); color: var(--muted); max-width: 60ch; margin: 0 auto 2rem; animation-delay: 0.3s; }
.hero-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.hero-chips { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 2.6rem; }
.chip {
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd); color: var(--muted);
  backdrop-filter: blur(8px);
}

/* ---------- Sections génériques ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem); scroll-margin-top: 90px; }
.section-head { text-align: center; margin-bottom: 3rem; }
.section-title { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.9rem; text-wrap: balance; }
.section-desc { color: var(--muted); max-width: 62ch; margin: 0 auto; font-size: 1.02rem; }

/* ============================================================
   ABONNEMENTS — grille de cartes
   ============================================================ */
.services-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.service-card {
  padding: 1.5rem; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 0.7rem;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover { border-color: rgba(255,255,255,0.28); box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 26px var(--card-glow, rgba(229,9,20,0.35)); }
.service-card:focus-visible { outline: 2px solid var(--blue-lite); outline-offset: 3px; }
.svc-top { display: flex; align-items: center; gap: 0.9rem; }
.svc-logo {
  width: 58px; height: 58px; flex: none; border-radius: 16px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--tile, rgba(255,255,255,0.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 20px rgba(0,0,0,0.35);
  animation: float 6s ease-in-out infinite;
}
.svc-logo svg, .svc-logo img { width: 34px; height: 34px; }
/* Logo image déposé dans images/<id>.png (etc.) — remplace le dessin SVG s'il existe.
   Contrairement aux logos dessinés (qui ont leur propre marge interne), une photo doit
   remplir toute la tuile pour ne pas avoir l'air perdue au milieu d'un fond vide. */
.svc-img { display: block; border-radius: 6px; }
.svc-logo .svc-img, .op-logo .svc-img, .ci-logo .svc-img, .ar-icon .svc-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.svc-name { font-family: "Poppins"; font-weight: 700; font-size: 1.2rem; }
.svc-tag { font-size: 0.82rem; color: var(--muted-2); }
.svc-desc { color: var(--muted); font-size: 0.92rem; flex: 1; }
.svc-price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.2rem; }
.svc-price .from { font-size: 0.8rem; color: var(--muted-2); }
.svc-price .amount { font-family: "Poppins"; font-weight: 700; font-size: 1.35rem; color: var(--ink); }
.svc-price .per { font-size: 0.8rem; color: var(--muted-2); }
.svc-note { align-self: flex-start; font-size: 0.72rem; color: #ffcf8a; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.32); padding: 0.15rem 0.55rem; border-radius: 8px; }
.svc-cta {
  margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.92rem; color: var(--blue-lite);
}
.service-card:hover .svc-cta { color: #9dc0ff; }
.svc-cta svg { transition: transform 0.3s var(--ease-out); }
.service-card:hover .svc-cta svg { transform: translateX(4px); }

/* ============================================================
   MODALE
   ============================================================ */
.modal { border: none; padding: 0; background: transparent; color: var(--ink); max-width: 520px; width: min(92vw, 520px); }
.modal::backdrop { background: rgba(4,7,15,0.66); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in 0.4s var(--ease-out); }
.modal-glass {
  position: relative; padding: 1.8rem clamp(1.2rem, 4vw, 2rem);
  background: linear-gradient(155deg, rgba(24,30,48,0.92), rgba(12,16,30,0.94));
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
}
.modal-wide { width: min(96vw, 880px); max-width: 96vw; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd); color: var(--muted);
  transition: transform 0.25s var(--ease-out), color 0.25s ease, background 0.25s ease;
}
.modal-close:hover { transform: rotate(90deg); color: #fff; background: rgba(229,9,20,0.25); }
.modal-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; padding-right: 2.5rem; }
.order-logo { width: 54px; height: 54px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: var(--tile, rgba(255,255,255,0.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.order-logo svg { width: 32px; height: 32px; }
.order-title { font-size: 1.4rem; font-weight: 700; }
.order-tag { color: var(--muted); font-size: 0.9rem; }
.modal-section { margin-bottom: 1.3rem; }
.modal-section h4 { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.7rem; font-weight: 600; }
.pill-group { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pill {
  min-height: 48px; padding: 0.55rem 1rem; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); color: var(--muted);
  font-weight: 600; font-size: 0.9rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform 0.2s var(--ease-out), border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.pill .pill-price { font-size: 0.76rem; font-weight: 500; color: var(--muted-2); }
.pill:hover { transform: translateY(-2px); color: var(--ink); border-color: rgba(255,255,255,0.3); }
.pill.is-active { color: #fff; border-color: transparent; background: linear-gradient(120deg, rgba(229,9,20,0.9), rgba(37,99,235,0.9)); box-shadow: var(--glow-red); }
.pill.is-active .pill-price { color: rgba(255,255,255,0.85); }
.order-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px dashed var(--glass-brd);
}
.order-total span { color: var(--muted); }
.order-total strong { font-family: "Poppins"; font-size: 1.5rem; background: linear-gradient(100deg, var(--red-soft), var(--blue-lite)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   J'AI UN PROBLÈME — accordéons
   ============================================================ */
.problem-list { display: flex; flex-direction: column; gap: 1.1rem; }
.accordion { overflow: hidden; }
.accordion-head {
  width: 100%; display: flex; align-items: center; gap: 0.9rem; text-align: left;
  padding: 1.2rem 1.4rem; background: none; border: none; cursor: pointer; min-height: 62px;
}
.acc-icon { font-size: 1.4rem; flex: none; }
.acc-icon svg { display: block; }
.device-tab svg, .link-btn svg, .pill svg { vertical-align: -3px; }
.acc-title { flex: 1; font-family: "Poppins"; font-weight: 600; font-size: 1.05rem; }
.acc-chev { flex: none; color: var(--muted); transition: transform 0.4s var(--ease-out); }
.accordion.open .acc-chev { transform: rotate(180deg); color: var(--ink); }
.accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
.accordion.open .accordion-body { grid-template-rows: 1fr; }
.accordion-inner { overflow: hidden; }
.accordion.open .accordion-inner { padding: 0 1.4rem 1.5rem; }

.hint { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.8rem; }
.device-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.device-tab {
  min-height: 48px; padding: 0.6rem 1rem; border-radius: 11px; cursor: pointer; font-weight: 600; font-size: 0.88rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); color: var(--muted);
  transition: transform 0.2s var(--ease-out), color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.device-tab:hover { transform: translateY(-2px); color: var(--ink); }
.device-tab.is-active { color: #fff; border-color: transparent; background: linear-gradient(120deg, rgba(229,9,20,0.85), rgba(37,99,235,0.85)); }
.device-panel { animation: fade-soft 0.4s var(--ease-out); }
.device-panel[hidden] { display: none; }

.proc { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 0.9rem; color: var(--ink); }
.proc strong { color: #ffd7db; }
.proc-or { text-align: center; color: var(--muted-2); font-size: 0.85rem; margin: 0.5rem 0 0.9rem; letter-spacing: 0.05em; }

.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0.7rem; margin: 0.4rem 0 1rem; }
.steps li { position: relative; padding-left: 2.6rem; color: var(--ink); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; font-family: "Poppins"; font-weight: 700; font-size: 0.85rem; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--blue)); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.steps strong { color: #cfe0ff; }

/* Timeline (renouvellement) */
.timeline { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding-left: 0.5rem; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--red), var(--blue)); opacity: 0.5; }
.tl-item { display: flex; gap: 1rem; position: relative; }
.tl-dot { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: "Poppins"; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--red), var(--blue)); box-shadow: var(--glow-red); z-index: 1; }
.tl-content h4 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.tl-content p { color: var(--muted); margin-bottom: 0.7rem; }
.pay-methods { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.4rem; }
.pay-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); transition: transform 0.25s var(--ease-out), border-color 0.25s ease; }
.pay-card.wave:hover { transform: translateY(-2px); border-color: rgba(59,130,246,0.6); box-shadow: var(--glow-blue); }
.pay-icon { font-size: 1.5rem; }
.pay-info { display: flex; flex-direction: column; }
.pay-info strong { font-family: "Poppins"; }
.pay-info span { font-size: 0.85rem; color: var(--muted); }

/* Champ code TV */
.code-send { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd); border-radius: 14px; padding: 1rem 1.1rem; margin: 0.4rem 0 1.1rem; }
.code-send label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.6rem; }
.code-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.code-row input { flex: 1; min-width: 150px; min-height: 48px; padding: 0.6rem 1rem; border-radius: 12px; background: rgba(0,0,0,0.25); border: 1px solid var(--glass-brd); color: var(--ink); }
.code-row input:focus-visible { outline: 2px solid var(--blue-lite); outline-offset: 1px; border-color: transparent; }
.field-note { font-size: 0.8rem; color: var(--muted-2); margin-top: 0.6rem; }

/* Vidéos / images placeholder */
.video-wrap { margin: 1rem 0; }
.video-wrap video { width: 100%; height: auto; max-height: 70vh; display: block; border-radius: 16px; background: #05070f; border: 1px solid var(--glass-brd); }
.video-wrap figcaption, .image-ph figcaption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted-2); text-align: center; }
.image-ph { margin: 1rem 0; }
.ph-box { aspect-ratio: 16/9; border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 1rem; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 12px, rgba(255,255,255,0.05) 12px, rgba(255,255,255,0.05) 24px); border: 1px dashed var(--glass-brd); color: var(--muted); font-size: 0.88rem; }
/* Photo réelle déposée dans images/<clé>.jpg (etc.) — remplace l'encart pointillé */
.ph-photo { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 16px; display: block; border: 1px solid var(--glass-brd); background: #05070f; }

.forgot-link { margin-top: 0.8rem; }

/* Carte infos de connexion */
.info-card { padding: 1.6rem clamp(1.2rem, 4vw, 1.8rem); }
.info-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.info-head h3 { font-size: 1.2rem; font-weight: 700; }
.warn-band { background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.45); color: #ffd98a; padding: 0.7rem 1rem; border-radius: 12px; font-weight: 600; margin-bottom: 1.1rem; }
.creds { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 1rem 0; }
.cred { display: flex; flex-direction: column; padding: 0.75rem 1rem; border-radius: 12px; background: rgba(0,0,0,0.25); border: 1px solid var(--glass-brd); }
.cred-k { font-size: 0.78rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; }
.cred-v { font-family: "Poppins"; font-weight: 600; font-size: 1.02rem; }
.end-band { background: rgba(229,9,20,0.14); border: 1px solid rgba(229,9,20,0.45); color: #ffc2c7; padding: 0.7rem 1rem; border-radius: 12px; font-weight: 600; margin: 1rem 0 0.8rem; }
.renew-band { color: var(--muted); font-size: 0.95rem; }

/* Modale mot de passe oublié */
.forgot-form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field span { font-size: 0.9rem; color: var(--muted); }
.field input { min-height: 50px; padding: 0.7rem 1rem; border-radius: 12px; background: rgba(0,0,0,0.25); border: 1px solid var(--glass-brd); color: var(--ink); }
.field input:focus-visible { outline: 2px solid var(--blue-lite); outline-offset: 1px; border-color: transparent; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 3rem; padding: 3rem 1.5rem 2.5rem; text-align: center; background: linear-gradient(transparent, rgba(5,8,16,0.6)); }
.footer-inner { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.brand--footer .brand-text { font-size: 1.4rem; }
.footer-tag { color: var(--muted); }
.footer-copy { color: var(--muted-2); font-size: 0.85rem; margin-top: 0.5rem; cursor: pointer; user-select: none; -webkit-user-select: none; }

/* ============================================================
   FADE-UP au scroll
   ============================================================ */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s var(--ease-out); }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
/* Cascade des révélations groupées */
.problem-list > .fade-up:nth-child(2) { transition-delay: 0.08s; }
.problem-list > .fade-up:nth-child(3) { transition-delay: 0.16s; }
.problem-list > .fade-up:nth-child(4) { transition-delay: 0.24s; }
.problem-list > .fade-up:nth-child(5) { transition-delay: 0.32s; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes bounce-soft { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.02); } 60% { transform: translateY(-4px); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 15px rgba(229,9,20,0.4); } 50% { box-shadow: 0 0 35px rgba(229,9,20,0.8), 0 0 60px rgba(30,58,138,0.4); } }
@keyframes pulse-soft { 0%,100% { filter: drop-shadow(0 0 4px rgba(229,9,20,0.4)); } 50% { filter: drop-shadow(0 0 12px rgba(59,130,246,0.7)); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes blur-in { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes letter-up { to { opacity: 1; transform: translateY(0); } }
@keyframes fade-soft { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.pulse-glow { animation: pulse-glow 2.6s ease-in-out infinite; }
.float { animation: float 6s ease-in-out infinite; }

/* ============================================================
   CATÉGORIES
   ============================================================ */
.category-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2rem; }
.cat-btn {
  min-height: 48px; padding: 0.6rem 1.15rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); color: var(--muted);
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.92rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: transform 0.2s var(--ease-out), color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cat-btn:hover { transform: translateY(-2px); color: var(--ink); }
.cat-btn.is-active { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--red), var(--blue)); box-shadow: var(--glow-red); }
.services-empty { text-align: center; color: var(--muted); padding: 2rem; }

/* ============================================================
   MODALE : image des tarifs, offres, séparateur
   ============================================================ */
.tariff-img { margin: 0 0 1.3rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-brd); }
.tariff-photo { width: 100%; height: auto; display: block; }
.pill-group.offers { max-height: 220px; overflow-y: auto; padding: 2px; }
.modal-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.4rem 0 1rem; color: var(--muted-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.modal-divider::before, .modal-divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-brd); }

/* ============================================================
   ESPACE CLIENT — résultat de la vérification d'ID
   ============================================================ */
.access-result { margin-top: 1.2rem; padding: 1.2rem; border-radius: 16px; border: 1px solid var(--glass-brd); animation: fade-soft 0.4s var(--ease-out); }
.access-result.invalid { background: rgba(229,9,20,0.12); border-color: rgba(229,9,20,0.5); text-align: center; }
.access-result.invalid .ar-icon { font-size: 2rem; display: block; margin-bottom: 0.4rem; }
.access-result.invalid strong { display: block; font-size: 1.25rem; color: #ff9aa2; margin-bottom: 0.3rem; }
.access-result.invalid p { color: var(--muted); font-size: 0.9rem; }
.access-result.ok { background: rgba(37,99,235,0.10); border-color: rgba(59,130,246,0.4); }
.ar-title { font-family: "Poppins", sans-serif; font-weight: 700; margin-bottom: 0.6rem; }
.ar-svc { display: inline-block; font-weight: 600; font-size: 0.82rem; padding: 0.2rem 0.7rem; border-radius: 999px; color: #fff; background: linear-gradient(120deg, var(--red), var(--blue)); margin-bottom: 0.9rem; }
.ar-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.ar-field { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: rgba(0,0,0,0.28); border: 1px solid var(--glass-brd); border-radius: 12px; padding: 0.6rem 0.8rem; }
.ar-field > span { font-size: 0.78rem; color: var(--muted-2); min-width: 96px; }
.ar-field code { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink); word-break: break-all; flex: 1; }
.copy-btn { min-height: 38px; padding: 0.3rem 0.75rem; border-radius: 9px; background: rgba(255,255,255,0.08); border: 1px solid var(--glass-brd); color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.copy-btn:hover { color: #fff; }
.exp-badge { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 7px; background: rgba(229,9,20,0.25); color: #ffb3b8; }
.ar-warn { margin-top: 0.8rem; color: #ffcf8a; font-size: 0.86rem; }
.field-error { color: #ff9aa2; font-size: 0.86rem; }

/* ============================================================
   NAV / FOOTER — extras
   ============================================================ */
button.nav-link { background: none; border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   ADMIN — tableau de bord
   ============================================================ */
.file-lbl { display: inline-flex; align-items: center; cursor: pointer; }
.admin-form { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd); border-radius: 14px; padding: 1rem; margin-bottom: 1.2rem; }
.af-row { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 0.8rem; }
.mini { display: flex; flex-direction: column; gap: 0.3rem; }
.mini > span { font-size: 0.76rem; color: var(--muted-2); text-align: center; }
.mini input, .mini select { min-height: 46px; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(0,0,0,0.28); border: 1px solid var(--glass-brd); color: var(--ink); width: 100%; }
.mini input:focus-visible, .mini select:focus-visible { outline: 2px solid var(--blue-lite); outline-offset: 1px; }
.admin-list { display: flex; flex-direction: column; gap: 0.7rem; }
.admin-note { font-size: 0.84rem; color: var(--muted); margin-bottom: 0.9rem; line-height: 1.6; }
.admin-note strong { color: var(--ink); }

/* ---------- Ligne compacte partagée : Comptes / Identifiants / Codes promo ---------- */
.admin-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd); }
.admin-row.is-expired { border-color: rgba(229,9,20,0.4); background: rgba(229,9,20,0.06); }
.ar-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd); display: grid; place-items: center; overflow: hidden; font-size: 1.1rem; }
.ar-icon svg, .ar-icon img { width: 24px; height: 24px; }
.ar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ar-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.94rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-sub { font-size: 0.8rem; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-status { flex: none; font-size: 0.82rem; font-weight: 600; color: #ffcf8a; white-space: nowrap; }
.admin-row.is-expired .ar-status { color: #ff9aa2; }

/* ---------- Bouton « + Ajouter » (ambre) ---------- */
.btn-add {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.6rem 1.3rem; margin-top: 0.8rem; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(120deg, #f5a623, #f7c15c); color: #241400;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 6px 18px rgba(245,166,35,0.3);
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-add:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(245,166,35,0.4); }
.btn-add:active { transform: translateY(0) scale(0.98); }

/* ---------- Bouton « Supprimer » (rouge, seule action de la ligne) ---------- */
.btn-del {
  flex: none; min-height: 40px; padding: 0.5rem 1.1rem; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(120deg, #b30510, #e11d2a); color: #fff;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(229,9,20,0.3);
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-del:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-del:active { transform: translateY(0) scale(0.97); }

/* ---------- Bouton « Renouveler » (ID) : ouvre un calendrier pour choisir la nouvelle date ---------- */
.renew-pick { flex: none; display: inline-block; }
.renew-pick .date-btn {
  width: auto; min-height: 40px; padding: 0.5rem 1.1rem; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(120deg, #1a8a4a, #22c55e); color: #fff;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(34,197,94,0.3);
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, filter 0.25s ease;
}
.renew-pick .date-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.renew-pick .date-btn:active { transform: translateY(0) scale(0.97); }
.empty { color: var(--muted); text-align: center; padding: 1rem; }
.admin-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); z-index: 300; background: linear-gradient(120deg, var(--red), var(--blue)); color: #fff; padding: 0.7rem 1.2rem; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s var(--ease-out); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.admin-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   ADMIN — page plein écran (sidebar façon SaaS)
   ============================================================ */
.admin-page {
  position: relative;
  width: 100%; min-height: 100vh; min-height: 100dvh;
  padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
  animation: op-in 0.4s var(--ease-out) both;
}
.admin-page[hidden] { display: none; }
body.admin-open main, body.admin-open .footer { display: none; }

.adm-shell {
  max-width: 1360px; margin: 0 auto;
  height: calc(100vh - 2rem); height: calc(100dvh - 2rem);
  display: flex; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--shadow);
}

/* ---------- Sidebar ---------- */
.adm-sidebar {
  width: 264px; flex: none; display: flex; flex-direction: column;
  padding: 1.1rem 0.9rem; gap: 1rem;
  background: rgba(0,0,0,0.16); border-right: 1px solid var(--glass-brd);
  overflow-y: auto;
}
.adm-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0.4rem; }
.adm-brand-mark {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 0.8rem; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--blue)); box-shadow: var(--glow-red);
}
.adm-brand-text { display: flex; flex-direction: column; overflow: hidden; }
.adm-brand-text strong { font-family: "Poppins", sans-serif; font-size: 0.9rem; color: var(--ink); line-height: 1.25; }
.adm-brand-text span { font-size: 0.72rem; color: var(--muted-2); }

.adm-search-btn {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 44px;
  padding: 0.55rem 0.8rem; border-radius: 11px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); color: var(--muted-2);
  font-family: "Inter", sans-serif; font-size: 0.85rem;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.adm-search-btn:hover { color: var(--ink); border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); }
.adm-search-btn span:nth-child(2) { flex: 1; }
.adm-search-btn kbd {
  font-family: "Poppins", sans-serif; font-size: 0.66rem; font-weight: 600; color: var(--muted-2);
  padding: 0.15rem 0.4rem; border-radius: 5px; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd);
}

.adm-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.adm-nav-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 44px;
  padding: 0.6rem 0.7rem; border-radius: 10px; cursor: pointer; text-align: left;
  background: none; border: none; color: var(--muted); font-family: "Inter", sans-serif; font-size: 0.87rem; font-weight: 500;
  transition: color 0.2s ease, background 0.2s ease;
}
.adm-nav-item:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.adm-nav-item.is-active { color: var(--ink); font-weight: 600; background: linear-gradient(120deg, rgba(229,9,20,0.22), rgba(37,99,235,0.22)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.adm-nav-icon { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.adm-nav-label { flex: 1; }
.adm-nav-badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,0.08);
}
.adm-nav-item.is-active .adm-nav-badge { color: #fff; background: rgba(255,255,255,0.18); }

.adm-sidebar-bottom { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--glass-brd); display: flex; flex-direction: column; gap: 0.2rem; }
.adm-sidebar-bottom .adm-nav-item { font-size: 0.83rem; }
.adm-logout:hover { color: #ff9aa2; background: rgba(229,9,20,0.12); }

/* ---------- Zone principale ---------- */
.adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-topbar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.1rem; min-height: 60px; border-bottom: 1px solid var(--glass-brd);
}
.adm-topbar-left { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.adm-menu-toggle { display: none; width: 40px; height: 40px; border-radius: 9px; background: none; border: 1px solid var(--glass-brd); color: var(--muted); cursor: pointer; align-items: center; justify-content: center; flex: none; }
.adm-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted-2); overflow: hidden; white-space: nowrap; }
.adm-crumb strong { color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 600; }
.adm-topbar > .modal-close { position: static; }

.adm-content { flex: 1; overflow-y: auto; padding: 1.3rem 1.1rem 2rem; }
.adm-panel[hidden] { display: none; }

/* ---------- Tableau de bord : cartes de stats ---------- */
.adm-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1.3rem; }
.adm-stat-card {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.3rem; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd);
}
.adm-stat-icon { width: 20px; height: 20px; color: var(--blue-lite); opacity: 0.9; }
.adm-stat-num { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--ink); }
.adm-stat-label { font-size: 0.82rem; color: var(--muted-2); }

/* ---------- Recherche rapide ---------- */
.adm-search-overlay {
  position: absolute; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh; background: rgba(4,7,15,0.66); backdrop-filter: blur(6px);
}
.adm-search-overlay[hidden] { display: none; }
.adm-search-panel {
  width: min(92vw, 560px); max-height: 70vh; display: flex; flex-direction: column;
  background: linear-gradient(155deg, rgba(24,30,48,0.96), rgba(12,16,30,0.97));
  border: 1px solid var(--glass-brd); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden; animation: modal-in 0.3s var(--ease-out);
}
.adm-search-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--glass-brd); color: var(--muted); }
.adm-search-row input { flex: 1; min-height: 40px; background: none; border: none; color: var(--ink); font-size: 0.95rem; }
.adm-search-row input:focus-visible { outline: none; }
.adm-search-close { width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.adm-search-results { overflow-y: auto; padding: 0.5rem; }
.adm-search-empty { padding: 1.3rem; text-align: center; color: var(--muted-2); font-size: 0.86rem; }
.adm-search-result {
  display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left;
  padding: 0.65rem 0.8rem; border-radius: 10px; cursor: pointer; background: none; border: none; color: var(--ink);
}
.adm-search-result:hover, .adm-search-result.is-focus { background: rgba(255,255,255,0.07); }
.adm-search-result strong { font-family: "Poppins", sans-serif; font-size: 0.88rem; }
.adm-search-result span { font-size: 0.78rem; color: var(--muted-2); }

/* ---------- Commandes ---------- */
.adm-stats--today .adm-stat-card--hot { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.08); }
.adm-stats--today .adm-stat-card--hot .adm-stat-num {
  background: linear-gradient(100deg, var(--red-soft), var(--blue-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.adm-stats--today .adm-stat-card--hot .adm-stat-num { font-size: 1.7rem; }

.adm-alert {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1.1rem; margin-bottom: 1.1rem;
  border-radius: 14px; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.45);
  font-size: 0.86rem; line-height: 1.6;
}
.adm-alert[hidden] { display: none; }
.adm-alert strong { font-family: "Poppins", sans-serif; color: #fbbf24; }
.adm-alert b { color: var(--ink); }

.adm-toolbar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.adm-chip {
  min-height: 36px; padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); color: var(--muted);
  font-size: 0.82rem; font-weight: 600; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.adm-chip:hover { color: var(--ink); border-color: rgba(255,255,255,0.3); }
.adm-chip.is-active { color: #fff; background: rgba(59,130,246,0.24); border-color: rgba(59,130,246,0.7); }
.adm-toolbar-right { display: flex; gap: 0.5rem; align-items: center; flex: 1; min-width: 240px; justify-content: flex-end; }
.adm-search-inline { flex: 1; max-width: 340px; min-height: 40px; }

.cmd-card {
  border-radius: 14px; margin-bottom: 0.7rem; overflow: hidden;
  background: rgba(255,255,255,0.035); border: 1px solid var(--glass-brd);
}
.cmd-card.is-alert { border-color: rgba(229,9,20,0.5); background: rgba(229,9,20,0.07); }
.cmd-head { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; flex-wrap: wrap; }
.cmd-ident { display: flex; flex-direction: column; gap: 0.1rem; min-width: 118px; }
.cmd-ident strong { font-family: "Poppins", sans-serif; font-size: 0.95rem; }
.cmd-ident span { font-size: 0.74rem; color: var(--muted-2); }
.cmd-who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 150px; flex: 1; }
.cmd-who strong { font-size: 0.88rem; font-weight: 600; }
.cmd-who a { font-size: 0.78rem; color: var(--blue-lite); text-decoration: none; }
.cmd-who a:hover { text-decoration: underline; }
.cmd-amount { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.cmd-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cmd-badge {
  padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
button.cmd-badge { cursor: pointer; }
.cmd-badge--ok   { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.5); color: #6ee7b7; }
.cmd-badge--wait { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.5); color: #fbbf24; }
.cmd-badge--ko   { background: rgba(229,9,20,0.18);  border-color: rgba(229,9,20,0.55);  color: #ff9aa2; }
.cmd-badge--soft { background: rgba(255,255,255,0.07); border-color: var(--glass-brd);   color: var(--muted); }
.cmd-toggle {
  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd); color: var(--muted); font-size: 0.9rem;
}
.cmd-toggle:hover { color: var(--ink); }

.cmd-body { padding: 0 1rem 1rem; border-top: 1px solid rgba(255,255,255,0.07); }
.cmd-body[hidden] { display: none; }
.cmd-loading, .cmd-none { color: var(--muted-2); font-size: 0.84rem; padding: 0.7rem 0; }
.cmd-error { color: #ff9aa2; font-size: 0.84rem; padding: 0.6rem 0; }
.cmd-items { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.8rem; }
.cmd-item h5 { font-family: "Poppins", sans-serif; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.cmd-code {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.7rem; margin-bottom: 0.35rem; border-radius: 9px;
  background: rgba(0,0,0,0.25); border: 1px solid var(--glass-brd);
}
.cmd-code strong { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85rem; }
.cmd-code span { font-size: 0.76rem; color: var(--muted-2); }
.cmd-meta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.8rem; font-size: 0.76rem; color: var(--muted-2); }
.cmd-meta b { color: var(--muted); }
.cmd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.cmd-actions .btn-add, .cmd-actions .btn-del { width: auto; }

/* ---------- Tarifs ---------- */
.tarif-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-bottom: 1rem; }

/* ---------- Section Emails ---------- */
.emails-board { display: flex; flex-direction: column; gap: 1rem; }
.mail-card {
  padding: 0.9rem 1rem; border-radius: 14px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--glass-brd);
}
.mail-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
/* L'adresse email complète tient lieu de titre du compte : elle peut être
   longue, donc elle occupe l'espace disponible et passe à la ligne si besoin. */
.mail-label {
  flex: 1; min-width: 150px; overflow-wrap: anywhere;
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 0.95rem;
}
.mail-count {
  flex: none; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
  color: var(--muted); background: rgba(255,255,255,0.07); border: 1px solid var(--glass-brd);
}
.mail-lines { display: flex; flex-direction: column; }
.mail-line { display: flex; align-items: center; gap: 0.6rem; padding: 0.22rem 0; }
/* white-space: pre-wrap → les espaces du format « ———-» » sont respectés */
.mail-txt {
  flex: 1; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.86rem; color: var(--ink);
}
.mail-pin { color: var(--blue-lite); letter-spacing: 0.02em; }
.mail-edit { flex: none; background: none; border: none; cursor: pointer; color: var(--muted-2); font-size: 0.76rem; text-decoration: underline; }
.mail-edit:hover { color: var(--ink); }
.mail-editor[hidden] { display: none; }
.mail-editor-in {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.75rem 0.85rem; margin: 0.3rem 0 0.6rem; border-radius: 10px;
  background: rgba(0,0,0,0.25); border: 1px solid var(--glass-brd);
}
.mail-pin-row { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.mail-pin-row .mini { max-width: 170px; }
.mail-pin-row .btn-add { width: auto; min-height: 38px; padding: 0 0.9rem; font-size: 0.8rem; }
.mail-occ { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.mail-occ-code { min-width: 74px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; color: var(--blue-lite); }
.mail-occ input { flex: 1; min-width: 110px; min-height: 36px; }
.mail-occ .btn-add, .mail-occ .btn-del { width: auto; min-height: 36px; padding: 0 0.8rem; font-size: 0.78rem; }

/* ---------- Import du tableau manuscrit ---------- */
.import-box {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; margin-bottom: 1.2rem;
  border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd);
}
.import-box[hidden] { display: none; }
.import-box h4 { font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 700; }
.import-box textarea {
  width: 100%; min-height: 190px; resize: vertical; padding: 0.7rem 0.9rem; border-radius: 10px;
  background: rgba(0,0,0,0.32); border: 1px solid var(--glass-brd); color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem; line-height: 1.55;
}
.import-opt { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.import-opt input { margin-top: 0.2rem; flex: none; }
.import-opt em { font-style: normal; color: var(--muted-2); }
.import-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.import-actions .btn-add, .import-actions .btn-del { width: auto; min-height: 40px; padding: 0 1rem; }
.import-summary {
  padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 0.88rem;
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.4);
}
.import-summary.import-done { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.45); }
.import-warn-inline { margin-top: 0.4rem; font-size: 0.8rem; color: #fbbf24; }
.import-warn { margin-top: 0.6rem; font-size: 0.82rem; color: #fbbf24; }
.import-warn summary { cursor: pointer; }
.import-warn ul { margin: 0.5rem 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; color: var(--muted); }
.import-preview-list { max-height: 320px; overflow-y: auto; margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
.import-acc {
  padding: 0.6rem 0.8rem; border-radius: 10px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--glass-brd);
}
.import-acc strong { font-family: "Poppins", sans-serif; font-size: 0.86rem; }
.import-prof { font-size: 0.78rem; color: var(--muted-2); margin-top: 0.2rem; }

/* ---------- Bouton TV — verre liquide ---------- */
.tv-btn {
  position: relative; overflow: hidden; flex: none;
  min-width: 56px; min-height: 34px; padding: 0.25rem 0.9rem; border-radius: 999px; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--muted);
  background: linear-gradient(140deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
              inset 0 -7px 14px rgba(255,255,255,0.06),
              0 6px 18px rgba(0,0,0,0.35);
  transition: color 0.35s ease, background 0.5s var(--ease-out), border-color 0.35s ease,
              box-shadow 0.5s ease, transform 0.3s var(--ease-out);
}
/* Reflet qui traverse le verre au clic */
.tv-btn::after {
  content: ""; position: absolute; inset: -50% -70%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%);
  transform: translateX(-130%);
}
.tv-btn:active::after { animation: tv-sheen 0.6s ease-out; }
@keyframes tv-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.tv-btn:hover { transform: translateY(-1px); color: var(--ink); border-color: rgba(255,255,255,0.42); }
.tv-btn.is-on {
  color: #04121a;
  background: linear-gradient(140deg, rgba(110,231,183,0.95), rgba(56,189,248,0.88));
  border-color: rgba(110,231,183,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65),
              0 0 18px rgba(56,189,248,0.5), 0 0 34px rgba(110,231,183,0.28);
}
.tv-btn.is-busy { opacity: 0.55; pointer-events: none; }

/* ---------- Renouvellement ---------- */
.renew-box {
  display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd);
}
.renew-box .btn-add { width: auto; align-self: flex-start; margin-top: 0.5rem; }
.renew-next { font-size: 0.86rem; color: var(--muted); }
.renew-next strong { color: #6ee7b7; }
.renew-done { border-color: rgba(52,211,153,0.5); background: rgba(52,211,153,0.1); }
.renew-done span { display: block; font-size: 0.8rem; color: var(--muted-2); }

/* Repère bref sur la ligne ciblée depuis la recherche */
.arow.is-flash, .idrow.is-flash, .prow.is-flash, .cmd-card.is-flash { animation: adm-flash 1.6s ease-out; }
@keyframes adm-flash {
  0%   { box-shadow: 0 0 0 2px rgba(59,130,246,0.9), 0 0 24px rgba(59,130,246,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

@media (max-width: 860px) {
  .admin-page { padding: 0; }
  .adm-shell { height: 100vh; height: 100dvh; border-radius: 0; max-width: none; }
  .adm-menu-toggle { display: inline-flex; }
  .adm-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-backdrop);
    width: min(84vw, 300px); transform: translateX(-100%); transition: transform 0.3s var(--ease-out);
    box-shadow: 20px 0 50px rgba(0,0,0,0.5);
  }
  .adm-sidebar.is-open { transform: translateX(0); }
}

/* ============================================================
   ADMIN — listes déroulantes façon « combobox » (menu contextuel)
   ============================================================ */
:root {
  --combo-field: #18181b;
  --combo-field-hover: #202024;
  --combo-border: #3f3f46;
  --combo-border-hover: #52525b;
  --combo-foreground: #fafafa;
  --combo-placeholder: #9a9aa2;
  --combo-overlay: #18181b;
  --combo-item-hover: #27272a;
  --combo-muted: #a1a1aa;
  --combo-focus: #60a5fa;
  --combo-shadow-overlay: 0 18px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.32);
}
.combo-box { position: relative; display: block; width: 100%; }
.combo-box__input-group { position: relative; display: flex; align-items: center; }
.combo-box .input {
  width: 100%; min-width: 0; border-radius: 10px; border: 1px solid var(--combo-border);
  background: var(--combo-field); color: var(--combo-foreground);
  outline: none; padding: 0.5rem 1.9rem 0.5rem 0.7rem; font-size: 0.86rem;
  min-height: 46px; font-family: "Inter", sans-serif;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.combo-box .input::placeholder { color: var(--combo-placeholder); }
.combo-box .input:hover { border-color: var(--combo-border-hover); background: var(--combo-field-hover); }
.combo-box .input:focus { border-color: var(--combo-focus); box-shadow: 0 0 0 3px rgba(96,165,250,0.22); }
.combo-box__trigger {
  position: absolute; inset-inline-end: 0; top: 0; height: 100%; width: 2.1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 0; background: transparent; color: var(--combo-placeholder); padding: 0;
  transition: color 150ms ease, transform 150ms ease;
}
.combo-box__trigger:hover { color: var(--combo-foreground); }
.combo-box__trigger[data-open="true"] svg { transform: rotate(180deg); }
.combo-box__trigger svg { transition: transform 150ms ease; }
.combo-box__popover {
  position: absolute; z-index: 60; top: calc(100% + 0.3rem); inset-inline-start: 0;
  width: max(100%, 220px); max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 14px; border: 1px solid var(--combo-border);
  background: var(--combo-overlay); color: var(--combo-foreground);
  box-shadow: var(--combo-shadow-overlay); padding: 0.35rem;
  animation: combo-popover-in 150ms ease both;
}
.combo-box__popover[hidden] { display: none; }
@keyframes combo-popover-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.list-box { display: flex; flex-direction: column; gap: 0.15rem; }
.list-box-item {
  position: relative; display: flex; min-height: 2.1rem; width: 100%; cursor: pointer;
  align-items: center; justify-content: space-between; gap: 0.6rem;
  border: 0; border-radius: 9px; background: transparent; color: var(--combo-foreground);
  padding: 0.4rem 0.6rem; text-align: start; font-size: 0.85rem; font-family: "Inter", sans-serif;
  transition: background-color 120ms ease;
}
.list-box-item:hover, .list-box-item[aria-selected="true"] { background: var(--combo-item-hover); }
.list-box-item[hidden] { display: none; }
.list-box-item__indicator { display: flex; width: 1rem; height: 1rem; flex: none; align-items: center; justify-content: center; color: var(--combo-focus); opacity: 0; }
.list-box-item__indicator[data-visible="true"] { opacity: 1; }
.combo-empty { padding: 0.6rem; text-align: center; color: var(--combo-muted); font-size: 0.82rem; }

/* ---------- Logos de service dans le combobox « Service » ---------- */
.lbi-main { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.list-item-icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.list-item-icon svg, .list-item-icon img { width: 100%; height: 100%; }
.lbi-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-box__icon { flex: none; width: 22px; height: 22px; margin-inline-start: 0.7rem; display: grid; place-items: center; pointer-events: none; }
.combo-box__icon svg, .combo-box__icon img { width: 100%; height: 100%; }
.combo-box__input-group.has-icon .input { padding-inline-start: 0.5rem; }

/* ---------- Boutons « liquid glass » (actions générales) ---------- */
.btn-liquid {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 1px 1px 0.5px -1px rgba(255,255,255,0.6),
    inset -1px -1px 0.5px -1px rgba(255,255,255,0.5),
    inset 0 0 6px 6px rgba(255,255,255,0.05),
    0 4px 14px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(10px) url(#container-glass);
  backdrop-filter: blur(10px) url(#container-glass);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.25s ease;
}
.btn-liquid:hover { background: rgba(255,255,255,0.11); transform: translateY(-1px); box-shadow: inset 1px 1px 0.5px -1px rgba(255,255,255,0.7), inset -1px -1px 0.5px -1px rgba(255,255,255,0.6), inset 0 0 6px 6px rgba(255,255,255,0.07), 0 6px 20px rgba(0,0,0,0.4); }
.btn-liquid:active { transform: translateY(0) scale(0.98); }

/* ---------- Boutons « gradient » : Enregistrer / Supprimer ---------- */
.btn-gradient {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 40px; padding: 0.5rem 1.1rem;
  border: none; border-radius: 11px; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.86rem; color: #fff;
  background: linear-gradient(120deg, var(--blue), #60a5fa);
  box-shadow: 0 6px 16px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-gradient:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-gradient:active { transform: translateY(0) scale(0.97); }
.btn-gradient--danger { background: linear-gradient(120deg, #b30510, #e11d2a); box-shadow: 0 6px 16px rgba(229,9,20,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-gradient--danger:hover { box-shadow: 0 8px 22px rgba(229,9,20,0.45), inset 0 1px 0 rgba(255,255,255,0.3); }

/* ---------- Bouton « + ID » (révélation au survol) ---------- */
.btn-addid {
  position: relative; overflow: hidden; cursor: pointer;
  min-height: 40px; padding: 0.4rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7); background: #fff; color: #111;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.82rem;
  transition: border-color 0.3s ease;
}
.btn-addid span { display: block; transition: transform 0.3s var(--ease-out), opacity 0.3s ease; }
.btn-addid .aid-fill {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(120deg, #1faa53, #25D366); color: #fff;
  transform: translateY(100%); opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}
.btn-addid:hover .aid-label { transform: translateY(-140%); opacity: 0; }
.btn-addid:hover .aid-fill { transform: translateY(0); opacity: 1; }

/* ============================================================
   RESPONSIVE
   Le menu complet ne s'affiche qu'au-delà de 1024px (là où il rentre
   confortablement). En dessous — tablette, petit laptop, vue zoomée —
   on bascule sur le menu hamburger : aucune barre coupée à droite.
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links {
    position: fixed; top: 74px; right: clamp(0.8rem, 3vw, 1.5rem); left: clamp(0.8rem, 3vw, 1.5rem);
    flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 1rem;
    background: linear-gradient(155deg, rgba(20,26,44,0.96), rgba(10,14,26,0.97));
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-brd); border-radius: 18px; box-shadow: var(--shadow);
    transform: translateY(-12px) scale(0.98); opacity: 0; pointer-events: none;
    transition: transform 0.35s var(--ease-out), opacity 0.3s ease;
  }
  .nav-links.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .nav-link { padding: 0.85rem 0.9rem; }
  .nav-link::after { left: 0.9rem; bottom: 0.5rem; }
  .nav-cta { margin: 0.4rem 0 0; }
  .hamburger { display: flex; }
}
@media (max-width: 520px) {
  .modal-glass { padding: 1.5rem 1.1rem; }
  .pill-group { gap: 0.45rem; }
  .pill { flex: 1 1 calc(50% - 0.45rem); }
  .device-tab { flex: 1 1 100%; text-align: center; }
  .btn-lg { padding: 0.85rem 1.2rem; font-size: 1rem; }
}

/* Écrans TV / très larges */
@media (min-width: 1600px) { :root { --maxw: 1360px; } html { font-size: 18px; } }

/* ============================================================
   ACCESSIBILITÉ — mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .glass-card::before, .btn-neon::after { display: none; }
  .split-letters .ltr { opacity: 1; transform: none; }
  .fade-up { opacity: 1; transform: none; }
  .blur-in { filter: none; }
  #bg-canvas { display: none; }
  .float, .pulse-glow, .svc-logo, .brand-mark, .gradient-text { animation: none !important; }
  .gradient-text { background-position: 0 50%; }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  V2 — EXPÉRIENCE CINÉMATIQUE                              ║
   ║  Typographie éditoriale · loader · curseur · glow ·       ║
   ║  panier · social · calendrier · reveal                    ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ---------- 1. Typographie éditoriale (Playfair Display) ---------- */
.splash-title, .hero-title, .section-title {
  font-family: "Playfair Display", "Poppins", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.hero-eyebrow { font-family: "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; }

/* ---------- 2. Chargement cinématique (splash loader) ---------- */
.splash-loader {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 1.5rem;
  padding: 1.5rem; text-align: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}
#splash.ready .splash-loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark svg { filter: drop-shadow(0 0 16px rgba(229,9,20,0.45)); }
.ld-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ld-draw 1.4s var(--ease-out) forwards; }
.ld-2 { animation-delay: 0.35s; }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
.loader-track {
  width: min(320px, 70vw); height: 3px; border-radius: 99px;
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.loader-bar {
  display: block; height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red), var(--blue-lite));
  box-shadow: 0 0 14px rgba(229,9,20,0.8);
}
.loader-meta {
  display: flex; align-items: baseline; justify-content: center; gap: 0.85rem;
  width: min(320px, 70vw); text-align: center;
}
.loader-label { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-2); }
.loader-pct {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.95rem;
  background: linear-gradient(100deg, var(--red-soft), var(--blue-lite));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Contenu du splash retenu tant que le loader n'a pas fini (retard de révélation) */
#splash .splash-inner {
  opacity: 0; transform: translateY(18px) scale(0.985);
  transition: opacity 0.8s var(--ease-out) 0.15s, transform 0.8s var(--ease-out) 0.15s;
}
#splash.ready .splash-inner { opacity: 1; transform: none; }
#splash .blur-in { animation-play-state: paused; }
#splash.ready .blur-in { animation-play-state: running; }

/* ---------- 3. Utilitaires ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.svg-defs { position: absolute; width: 0; height: 0; }

/* ---------- 4. Bordure lumineuse des cartes (suit le curseur) ---------- */
.service-card { --start: 0; --active: 0; }
.service-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 2px; pointer-events: none;
  background: conic-gradient(from calc((var(--start) - 50) * 1deg),
    transparent 0deg,
    rgba(229,9,20,0.95) 25deg,
    rgba(124,58,237,0.95) 50deg,
    rgba(59,130,246,1) 75deg,
    transparent 100deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: var(--active, 0);
  transition: opacity 0.35s ease;
}

/* ---------- 5. Panier — bouton navbar + badge ---------- */
.nav-side { display: flex; align-items: center; gap: 0.55rem; }
.nav-cart {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.45rem 1.05rem; border-radius: 999px; cursor: pointer;
  color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.05em;
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
              linear-gradient(120deg, var(--red), var(--blue-lite)) border-box;
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.nav-cart:hover { box-shadow: 0 0 18px rgba(229,9,20,0.45), 0 0 32px rgba(37,99,235,0.30); transform: translateY(-1px); }
.nav-cart svg { flex: none; transition: transform 0.45s var(--ease-out); }
.nav-cart:hover svg { transform: scale(1.22) rotate(-10deg); }
.nav-cart .cart-label { transition: transform 0.45s var(--ease-out); }
.nav-cart:hover .cart-label { transform: translateX(3px); }
.cart-count {
  position: absolute; top: -7px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--red), #ff5b64);
  box-shadow: 0 0 12px rgba(229,9,20,0.7);
}
.cart-count[hidden] { display: none; }
.nav-cart.bump { animation: cart-bump 0.55s var(--ease-out); }
@keyframes cart-bump {
  0% { transform: scale(1); } 35% { transform: scale(1.16) rotate(-4deg); }
  70% { transform: scale(0.96); } 100% { transform: scale(1); }
}

/* ---------- 6. Bouton « Ajouter au panier » (états animés) ---------- */
.btn-cart {
  display: grid; margin-bottom: 0.8rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.btn-cart:hover { transform: scale(1.02); border-color: rgba(255,255,255,0.3); }
.btn-cart .ac {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}
.btn-cart .ac-load, .btn-cart .ac-done { opacity: 0; transform: translateY(12px); pointer-events: none; }
.btn-cart.is-adding .ac-idle, .btn-cart.is-added .ac-idle { opacity: 0; transform: translateY(-12px); }
.btn-cart.is-adding .ac-load { opacity: 1; transform: none; }
.btn-cart.is-added .ac-load { opacity: 0; }
.btn-cart.is-added .ac-done { opacity: 1; transform: none; }
.btn-cart.is-adding { background: linear-gradient(120deg, #1d4ed8, #3b82f6); border-color: transparent; }
.btn-cart.is-added {
  background: linear-gradient(120deg, #15803d, #22c55e); border-color: transparent;
  box-shadow: 0 0 24px rgba(34,197,94,0.5);
}
.ac-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 8. Modale panier ---------- */
.cart-items { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1rem; }
.cart-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.8rem; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd);
  animation: fade-soft 0.35s var(--ease-out);
}
.ci-logo {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.2rem; overflow: hidden;
  background: var(--tile, rgba(255,255,255,0.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.ci-logo svg, .ci-logo img { width: 26px; height: 26px; }
.ci-info { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ci-info strong { font-family: "Poppins", sans-serif; font-size: 0.98rem; }
.ci-info span { font-size: 0.8rem; color: var(--muted-2); }
.ci-price { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.ci-rm {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 0.85rem;
  background: rgba(229,9,20,0.12); border: 1px solid rgba(229,9,20,0.4); color: #ff9aa2;
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-out);
}
.ci-rm:hover { background: rgba(229,9,20,0.45); color: #fff; transform: rotate(90deg); }
.cart-empty { text-align: center; color: var(--muted); padding: 1.4rem 0.5rem; line-height: 1.8; }
.cart-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.cart-actions .btn-neon { flex: 1; }
/* L'attribut hidden doit toujours gagner sur les display utilitaires */
.cart-actions .btn[hidden], .cart-empty[hidden] { display: none; }

/* ---------- 9. Bouton aurora (« Accéder à mes identifiants ») ---------- */
.btn-aurora {
  position: relative; isolation: isolate; overflow: visible;
  background: #12151f; border: 1px solid rgba(255,255,255,0.16);
}
.btn-aurora::before {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from 0deg, #ff4d3d, #7c3aed, #3b82f6, #ff4d3d);
  filter: blur(14px); opacity: 0.3;
  transition: opacity 0.35s ease;
}
.btn-aurora:hover { border-color: rgba(255,255,255,0.35); transform: scale(1.03); }
.btn-aurora:hover::before { opacity: 0.95; animation: aurora-hue 2.5s linear infinite; }
@keyframes aurora-hue { to { filter: blur(14px) hue-rotate(360deg); } }

/* ---------- 10. Boutons copier (icône → coche) ---------- */
.copy-btn {
  display: inline-grid; place-items: center;
  width: 40px; min-height: 40px; padding: 0; border-radius: 10px;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.2s var(--ease-out);
}
.copy-btn:hover { transform: translateY(-1px); }
.copy-btn svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity 0.25s ease, transform 0.3s var(--ease-out); }
.copy-btn .ic-check { opacity: 0; transform: scale(0.4); color: #34d399; }
.copy-btn.copied .ic-copy { opacity: 0; transform: scale(0.4); }
.copy-btn.copied .ic-check { opacity: 1; transform: scale(1); }
.copy-btn.copied { border-color: rgba(52,211,153,0.6); }

/* ---------- 11. Contact — panneau social lumineux ---------- */
.social-panel {
  max-width: 840px; margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3rem);
  text-align: center;
  box-shadow: 0 0 50px rgba(124,58,237,0.22), 0 0 90px rgba(37,99,235,0.14), var(--shadow);
}
.social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 4vw, 2.6rem); }
.social-icon {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  min-width: 110px;
}
.s-orb {
  width: 82px; height: 82px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform 0.3s var(--ease-out), background 0.3s ease, box-shadow 0.3s ease;
}
.social-icon:hover .s-orb, .social-icon:focus-visible .s-orb { transform: translateY(-10px) scale(1.1); }
.social-icon:hover .s-orb svg { animation: shake 0.5s; }
.s-name { margin-top: 0.7rem; font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ink); opacity: 0.9; }
.s-val { font-size: 0.8rem; color: var(--muted-2); }
.s-wa:hover .s-orb { background: linear-gradient(135deg, #1faa53, #25D366); box-shadow: 0 0 26px rgba(37,211,102,0.6); }
.s-tk:hover .s-orb { background: #010101; box-shadow: 0 0 14px rgba(37,244,238,0.55), 0 0 28px rgba(254,44,85,0.5); }
.s-ig:hover .s-orb { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 0 26px rgba(225,48,108,0.6); }
.s-ph:hover .s-orb { background: linear-gradient(135deg, var(--red), var(--blue)); box-shadow: 0 0 26px rgba(229,9,20,0.55); }
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-4px) rotate(-5deg); }
  40% { transform: translateX(4px) rotate(5deg); }
  60% { transform: translateX(-4px) rotate(-5deg); }
  80% { transform: translateX(4px) rotate(5deg); }
}
.social-addr {
  margin-top: 2.2rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--muted); font-size: 0.92rem;
  padding: 0.55rem 1.15rem; border-radius: 999px;
  border: 1px dashed var(--glass-brd); background: rgba(255,255,255,0.03);
}
.social-addr svg { color: var(--blue-lite); flex: none; }

/* ---------- 12. Espace client — canvas de révélation ---------- */
.reveal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.5; }
.has-reveal > :not(.reveal-canvas) { position: relative; z-index: 1; }

/* ---------- 13. Admin — calendrier ---------- */
.date-pick { position: relative; display: block; }
.date-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; width: 100%;
  min-height: 46px; padding: 0.5rem 0.8rem; border-radius: 10px; cursor: pointer;
  background: rgba(0,0,0,0.28); border: 1px solid var(--glass-brd); color: var(--muted);
  font-size: 0.92rem; text-align: left;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.date-btn:hover { color: var(--ink); border-color: rgba(255,255,255,0.3); }
.date-btn.has-date { color: var(--ink); border-color: rgba(59,130,246,0.55); }
.cal-pop {
  /* Ancré sur le bord DROIT du bouton (pas la gauche) : dans les formulaires admin,
     ce champ est presque toujours la dernière colonne, donc côté droit de l'écran —
     l'ouvrir vers la gauche évite qu'il ne déborde hors de la page et force un
     défilement horizontal. */
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 272px; max-width: calc(100vw - 2rem); padding: 0.8rem; border-radius: 16px;
  background: linear-gradient(155deg, rgba(26,32,52,0.98), rgba(12,16,30,0.98));
  border: 1px solid var(--glass-brd);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  animation: fade-soft 0.25s var(--ease-out);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.cal-head strong { font-family: "Poppins", sans-serif; font-size: 0.92rem; text-transform: capitalize; }
.cal-nav {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer; font-size: 1.05rem;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd); color: var(--muted);
  transition: background 0.25s ease, color 0.25s ease;
}
.cal-nav:hover { color: #fff; background: linear-gradient(120deg, rgba(229,9,20,0.8), rgba(37,99,235,0.8)); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { display: grid; place-items: center; height: 26px; font-size: 0.68rem; font-weight: 700; color: var(--muted-2); }
.cal-cell { height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 0.82rem; }
.cal-cell.day {
  cursor: pointer; background: rgba(255,255,255,0.04);
  border: 1px solid transparent; color: var(--ink);
  transition: background 0.2s ease, transform 0.15s var(--ease-out);
}
.cal-cell.day:hover { background: rgba(59,130,246,0.3); transform: scale(1.08); }
.cal-cell.day.today { border-color: rgba(59,130,246,0.6); }
.cal-cell.day.sel {
  background: linear-gradient(135deg, var(--red), var(--blue)); color: #fff; font-weight: 700;
  box-shadow: 0 0 12px rgba(229,9,20,0.5);
}
.cal-cell.empty { background: none; }

/* ---------- 14. Toile vivante — les couleurs évoluent au scroll ---------- */
.parallax { filter: hue-rotate(calc(var(--scroll-p, 0) * 60deg)); }

/* ---------- 15. Titres animés lettre par lettre ---------- */
/* Groupes de mots insécables (le retour à la ligne se fait entre les mots) */
.split-letters .w, .section-title .w { display: inline-block; white-space: nowrap; }

.section-title .stl {
  display: inline-block;
  opacity: 0; transform: translateY(0.45em) rotate(4deg) scale(0.96);
  transition: opacity 0.5s ease, transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 32ms);
  background: linear-gradient(100deg, var(--red-soft), #ff7a8a, var(--blue-lite), var(--red-soft));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* Un dégradé qui s'anime À L'INFINI, séparément sur CHAQUE lettre, force le
     navigateur à repeindre le texte masqué (background-clip: text) en continu.
     Avec un titre de section entier (plusieurs dizaines de lettres) sur plusieurs
     sections visibles en même temps, ça peut suffire à faire « trembler »/dédoubler
     le rendu du texte sur les GPU les moins puissants. Un seul passage suffit :
     le dégradé reste visible, il ne tourne simplement plus en boucle. */
  animation: gradient-shift 3s ease 1 both;
}
.section-head.is-visible .section-title .stl { opacity: 1; transform: none; }
/* Une fois les lettres séparées par le JS, le titre lui-même n'a plus de texte
   direct à dégrader : on coupe son animation (désormais portée par .stl) pour
   ne pas la faire tourner en double, à vide, indéfiniment. */
.section-title[data-split] { animation: none; }

/* ---------- 16. Confettis ---------- */
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 600; }

/* ---------- 17. Boutons magnétiques (translate pilotée par JS) ---------- */
.btn { transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, filter 0.35s ease, translate 0.3s var(--ease-out); }

/* ---------- 18. Responsive V2 ---------- */
@media (max-width: 860px) {
  .nav-side { gap: 0.4rem; }
}
@media (max-width: 560px) {
  .nav-cart .cart-label { display: none; }
  .nav-cart { padding: 0.45rem 0.75rem; }
  .cart-actions { flex-direction: column; }
  .cart-actions .btn { width: 100%; }
  .social-row { gap: 1.3rem; }
  .s-orb { width: 70px; height: 70px; }
  .social-icon { min-width: 92px; }
}

/* ---------- 19. Mouvement réduit — V2 ---------- */
@media (prefers-reduced-motion: reduce) {
  .section-title .stl { opacity: 1 !important; transform: none !important; animation: none !important; }
  .service-card::after { display: none; }
  #splash .splash-inner { opacity: 1; transform: none; }
  .splash-loader { display: none; }
  #splash .blur-in { animation-play-state: running; }
  .parallax { filter: none; }
  .reveal-canvas, .confetti-canvas { display: none; }
  .btn-aurora:hover::before { animation: none; }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  V3 — SPLASH SHADER · COMMANDE GAMSGO · ESPACE CLIENT     ║
   ║       SMOKEY · PANIER CHECKOUT                            ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ═══ 1. SPLASH — fond shader mesh gradient ═══ */
#splash { background: #05060d; overflow: hidden; }
.splash-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Vignette + lisibilité par-dessus le shader */
#splash::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(5,6,13,0.10), rgba(5,6,13,0.72) 100%),
    linear-gradient(180deg, rgba(5,6,13,0.55), transparent 30%, transparent 65%, rgba(5,6,13,0.65));
}
#splash .splash-inner { position: relative; z-index: 2; }
/* Le bloc de chargement se superpose au splash et reste centré à l'écran */
#splash .splash-loader { position: absolute; inset: 0; z-index: 3; }

/* Badge « verre dépoli » */
.splash-badge.glassy {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
@supports (filter: url(#glass-effect)) {
  .splash-badge.glassy { filter: url(#glass-effect); }
}
.badge-sheen {
  position: absolute; top: 0; left: 4px; right: 4px; height: 1px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
}

/* Bouton « gooey » : Continuer + flèche qui se détache au survol */
.gooey-group {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  margin: 0.4rem 0 0.2rem; isolation: isolate;
}
@supports (filter: url(#gooey-filter)) {
  .gooey-group { filter: url(#gooey-filter); }
}
.gooey-main {
  position: relative; z-index: 2;
  min-height: 56px; padding: 0.9rem 2.4rem; border: none; border-radius: 999px; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.06rem; color: #0a0d18;
  background: linear-gradient(180deg, #ffffff, #dfe3f2);
  transition: transform 0.3s var(--ease-out), background 0.3s ease;
}
.gooey-main:hover { background: linear-gradient(180deg, #ffffff, #ffffff); }
.gooey-main:active { transform: scale(0.97); }
.gooey-arrow {
  position: absolute; right: 8px; z-index: 1;
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center; color: #0a0d18;
  background: linear-gradient(180deg, #ffffff, #dfe3f2);
  transform: translateX(0);
  transition: transform 0.42s var(--ease-out);
  pointer-events: none;
}
.gooey-group:hover .gooey-arrow, .gooey-group:focus-within .gooey-arrow { transform: translateX(56px); }
#splash.ready .gooey-group { animation: pulse-soft 3.2s ease-in-out infinite; }

/* ═══ 1 bis. LOGO DE MARQUE (images/logo.png) ═══
   Le fichier est carré (500×500) et contient une accroche sous l'emblème.
   Mesures relevées sur l'image : médaillon doré x 106→392, y 110→397
   (centre 49,8 % / 50,7 %) et texte à partir de y = 415.
   On zoome à 164 % : la fenêtre visible fait 305 px de côté, donc elle
   contient tout le médaillon et s'arrête avant le texte. */
[data-logo-slot].has-logo {
  --logo-zoom: 164%;
  --logo-x: -49.8%;
  --logo-y: -50.7%;
  position: relative; flex: none;
  display: block; overflow: hidden;
  border-radius: 50%;
  background: #0b0b12;
  isolation: isolate;
}
[data-logo-slot].has-logo .brand-img {
  position: absolute; top: 50%; left: 50%;
  width: var(--logo-zoom); height: var(--logo-zoom);
  max-width: none; /* neutralise le max-width:100% du reset, sinon pas de recadrage */
  transform: translate(var(--logo-x), var(--logo-y));
  object-fit: cover;
}

/* --- Écran de chargement : grand médaillon avec halo qui respire --- */
[data-logo-slot="splash"].has-logo {
  width: clamp(126px, 30vw, 168px); aspect-ratio: 1;
  box-shadow:
    0 0 0 2px rgba(212,175,55,0.45),
    0 0 26px rgba(212,175,55,0.30),
    0 0 60px rgba(229,9,20,0.30),
    0 0 96px rgba(59,130,246,0.24);
  animation: logo-in 1.2s var(--ease-out) both, logo-breathe 5s ease-in-out 1.2s infinite;
}
@keyframes logo-in {
  from { opacity: 0; transform: scale(0.82) translateY(10px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes logo-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(212,175,55,0.45), 0 0 26px rgba(212,175,55,0.30), 0 0 60px rgba(229,9,20,0.30), 0 0 96px rgba(59,130,246,0.24); }
  50%      { box-shadow: 0 0 0 2px rgba(212,175,55,0.70), 0 0 34px rgba(212,175,55,0.48), 0 0 78px rgba(229,9,20,0.42), 0 0 120px rgba(59,130,246,0.34); }
}

/* --- Navbar / panier : pastille ronde qui s'illumine au survol --- */
[data-logo-slot="nav"].has-logo,
[data-logo-slot="cart"].has-logo { width: 36px; height: 36px; }
[data-logo-slot="footer"].has-logo { width: 46px; height: 46px; }
[data-logo-slot="nav"].has-logo,
[data-logo-slot="cart"].has-logo,
[data-logo-slot="footer"].has-logo {
  box-shadow: 0 0 0 1px rgba(212,175,55,0.35), 0 2px 12px rgba(0,0,0,0.45);
  transition: box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.brand:hover [data-logo-slot="nav"].has-logo,
.brand:hover [data-logo-slot="footer"].has-logo {
  transform: scale(1.07) rotate(-4deg);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.75), 0 0 18px rgba(212,175,55,0.45), 0 0 32px rgba(229,9,20,0.30);
}
/* Le logo remplace le monogramme : on coupe son animation de teinte */
[data-logo-slot].has-logo.brand-mark { animation: none; }

.brand-mark--footer { display: grid; place-items: center; }
.brand--footer { display: inline-flex; align-items: center; gap: 0.6rem; }
.ck-brand { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ═══ 2. PAGE ABONNEMENT — pleine largeur façon GamsGo ═══ */
.order-page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    clamp(5.6rem, 9vw, 7.2rem)
    calc(clamp(1rem, 3vw, 2.6rem) + env(safe-area-inset-right))
    calc(clamp(3rem, 6vw, 5rem) + env(safe-area-inset-bottom))
    calc(clamp(1rem, 3vw, 2.6rem) + env(safe-area-inset-left));
  animation: op-in 0.45s var(--ease-out) both;
}
.order-page[hidden] { display: none; }
@keyframes op-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Le reste du site s'efface pendant la consultation d'une fiche */
body.order-open main, body.order-open .footer { display: none; }

/* Barre retour + fil d'ariane */
.op-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.op-back {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.5rem 1.1rem 0.5rem 0.85rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); color: var(--muted);
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.88rem;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out), background 0.25s ease;
}
.op-back:hover { color: var(--ink); border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.09); transform: translateX(-3px); }
.op-crumb { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted-2); }
.op-crumb strong { color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 600; }
.op-crumb-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--muted-2); }
.op-crumb-link:hover { color: var(--ink); text-decoration: underline; }

/* Grille pleine largeur : visuel · configuration · résumé */
.op-grid {
  display: grid; width: 100%; align-items: start;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  grid-template-columns: minmax(230px, 0.85fr) minmax(0, 2.1fr) minmax(300px, 1fr);
}

/* Colonne visuel */
.op-visual { min-width: 0; }
.op-poster {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  aspect-ratio: 3 / 4; padding: 1.4rem;
  border-radius: 22px; text-align: center;
  background: var(--tile, linear-gradient(160deg, #151a2c, #0c1020));
  border: 1px solid var(--glass-brd);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.14);
}
.op-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent 45%, rgba(0,0,0,0.35));
}
.op-logo { position: relative; z-index: 1; display: grid; place-items: center; width: 46%; max-width: 130px; aspect-ratio: 1; overflow: hidden; border-radius: 18px; }
.op-logo svg, .op-logo img { width: 100%; height: 100%; }
.op-poster-name { position: relative; z-index: 1; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
.op-poster-badge {
  position: relative; z-index: 1;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  padding: 0.25rem 0.7rem; border-radius: 999px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.14);
}
.op-desc { margin: 1.1rem 0 0.9rem; color: var(--muted); font-size: 0.92rem; line-height: 1.65; }

/* Colonne configuration */
.op-config { min-width: 0; }
.op-title {
  font-family: "Playfair Display", "Poppins", serif; font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.02em; margin-bottom: 1.6rem;
  background: linear-gradient(100deg, var(--red-soft), #ff8a97, var(--blue-lite), var(--red-soft));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-shift 8s ease infinite;
}
.op-section { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.op-section h4 {
  font-size: 0.95rem; color: var(--ink); margin-bottom: 0.85rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.5rem;
}
.op-section h4::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: linear-gradient(var(--red), var(--blue-lite)); }

/* Grilles d'options (durées / profils) */
.opt-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.opt-grid.profiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 62px; padding: 0.55rem 0.5rem; border-radius: 14px; cursor: pointer; text-align: center;
  background: rgba(255,255,255,0.04); border: 1.5px solid var(--glass-brd); color: var(--muted);
  transition: transform 0.2s var(--ease-out), border-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.opt:hover { transform: translateY(-2px); color: var(--ink); border-color: rgba(255,255,255,0.35); }
.opt .opt-main { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.95rem; line-height: 1.15; }
.opt .opt-sub { font-size: 0.74rem; color: var(--muted-2); }
.opt.is-active {
  color: #fff; border-color: var(--red-soft);
  background: linear-gradient(135deg, rgba(229,9,20,0.20), rgba(37,99,235,0.20));
  box-shadow: 0 0 0 1px rgba(229,9,20,0.35), 0 0 18px rgba(229,9,20,0.30);
}
.opt.is-active .opt-sub { color: rgba(255,255,255,0.85); }
/* Ruban « meilleur prix » / « populaire » */
.opt .opt-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.1rem 0.45rem; border-radius: 999px; color: #fff; white-space: nowrap;
  background: linear-gradient(120deg, #06b6d4, #ec4899);
  box-shadow: 0 0 12px rgba(236,72,153,0.5);
}
.opt-hint { margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted-2); }

/* Liste des atouts */
.feat-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 1.2rem; }
.feat-list li { font-size: 0.82rem; color: var(--muted); }

/* Panneau résumé — colle sous la navbar au défilement */
.order-summary {
  position: sticky; top: clamp(5.4rem, 8vw, 6.6rem);
  padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.16);
}
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.55rem; font-size: 0.88rem; }
.sum-row span { color: var(--muted); }
.sum-row strong { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--ink); white-space: nowrap; }
.sum-row.sum-note { display: block; }
.sum-row.sum-note span { font-size: 0.78rem; color: var(--muted-2); }
#sum-discount.has-disc { color: #34d399; }
.sum-sep { height: 1px; margin: 0.85rem 0; background: var(--glass-brd); }
.sum-total span { font-size: 1rem; color: var(--ink); font-weight: 600; }
.sum-total strong {
  font-size: 1.6rem;
  background: linear-gradient(100deg, var(--red-soft), var(--blue-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sum-per { text-align: right; font-size: 0.76rem; color: var(--muted-2); margin-bottom: 0.9rem; }

/* Code promo */
.promo-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-height: 46px; padding: 0.5rem 0.2rem; cursor: pointer;
  background: none; border: none; border-top: 1px solid var(--glass-brd);
  color: var(--muted); font-size: 0.85rem; text-align: left;
  transition: color 0.25s ease;
}
.promo-toggle:hover { color: var(--ink); }
.promo-toggle svg { flex: none; transition: transform 0.35s var(--ease-out); }
.promo-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.promo-box { padding-bottom: 0.8rem; animation: fade-soft 0.3s var(--ease-out); }
.promo-box[hidden] { display: none; }
.promo-row { display: flex; gap: 0.45rem; }
.promo-row input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0.5rem 0.8rem; border-radius: 11px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--glass-brd); color: var(--ink);
  font-size: 0.9rem; text-transform: uppercase;
}
.promo-row input:focus-visible { outline: 2px solid var(--blue-lite); outline-offset: 1px; }
.promo-row .btn { flex: none; }
.promo-msg { margin-top: 0.5rem; font-size: 0.8rem; }
.promo-msg.ok { color: #34d399; }
.promo-msg.ko { color: #ff9aa2; }
.promo-msg[hidden] { display: none; }

.order-summary .btn { margin-bottom: 0.55rem; }
.order-summary .modal-divider { margin: 1rem 0 0.7rem; }

/* ═══ 3. ESPACE CLIENT — shader smokey + carte glass ═══ */
.modal-access { width: min(96vw, 460px); max-width: 96vw; }
.access-stage {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: #070b18; border: 1px solid var(--glass-brd);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  padding: 1.4rem clamp(0.9rem, 3vw, 1.4rem);
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
}
.smokey-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.smokey-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(7,11,24,0.20), rgba(7,11,24,0.70));
}
.access-card {
  position: relative; z-index: 2;
  padding: 1.6rem clamp(1rem, 4vw, 1.7rem);
  border-radius: 20px;
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 25px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
}
.access-head { text-align: center; margin-bottom: 1.6rem; padding-right: 2rem; }
.access-head h3 { font-family: "Playfair Display", "Poppins", serif; font-size: 1.9rem; font-weight: 800; color: #fff; }
.access-head p { margin-top: 0.4rem; font-size: 0.86rem; color: rgba(255,255,255,0.72); }

/* Champs à label flottant */
.float-form { display: flex; flex-direction: column; gap: 1.5rem; }
.float-field { position: relative; }
.float-field input {
  display: block; width: 100%;
  padding: 0.62rem 0 0.5rem; min-height: 44px;
  background: transparent; border: 0; border-bottom: 2px solid rgba(255,255,255,0.32);
  color: #fff; font-size: 0.95rem;
  transition: border-color 0.3s ease;
}
.float-field input:focus { outline: none; border-bottom-color: var(--blue-lite); }
.float-field label {
  position: absolute; left: 0; top: 0.62rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.92rem; color: rgba(255,255,255,0.65);
  transform-origin: 0 0; pointer-events: none;
  transition: transform 0.3s var(--ease-out), color 0.3s ease;
}
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label { transform: translateY(-1.35rem) scale(0.75); }
.float-field input:focus + label { color: #93b4ff; }
.float-field label svg { flex: none; }

.access-links { display: flex; justify-content: flex-end; margin-top: -0.6rem; }
.link-sm { font-size: 0.78rem; padding: 0.3rem 0; min-height: 34px; border-bottom-color: rgba(59,130,246,0.4); }

.btn-signin {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 50px; border: none; border-radius: 12px; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.98rem; color: #fff;
  background: linear-gradient(120deg, var(--red), var(--blue));
  box-shadow: 0 8px 24px rgba(37,99,235,0.32);
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-signin:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(229,9,20,0.55), 0 0 40px rgba(37,99,235,0.35); }
.btn-signin svg { transition: transform 0.3s var(--ease-out); }
.btn-signin:hover svg { transform: translateX(4px); }

.access-sep { display: flex; align-items: center; gap: 0.8rem; }
.access-sep::before, .access-sep::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.18); }
.access-sep span { font-size: 0.68rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }

.btn-wa-alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 46px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.92); color: #0f2c1b; font-weight: 600; font-size: 0.9rem;
  transition: background 0.25s ease, transform 0.25s var(--ease-out);
}
.btn-wa-alt:hover { background: #fff; transform: translateY(-1px); }
.btn-wa-alt svg { color: #1faa53; }

.access-foot { margin-top: 1.2rem; text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.link-inline { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: #93b4ff; }
.link-inline:hover { color: #b9cfff; }
.modal-access .modal-close { top: 0.6rem; right: 0.6rem; background: rgba(255,255,255,0.10); }
.modal-access .access-result { margin-top: 1.3rem; }

/* ═══ 3.5 PAGE COMPTE — fiche de connexion (carte premium noire) ═══ */
.account-page {
  width: 100%; min-height: 100vh; min-height: 100dvh;
  padding:
    clamp(5.6rem, 9vw, 7.2rem)
    calc(clamp(1rem, 3vw, 2.6rem) + env(safe-area-inset-right))
    calc(clamp(3rem, 6vw, 5rem) + env(safe-area-inset-bottom))
    calc(clamp(1rem, 3vw, 2.6rem) + env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  animation: op-in 0.45s var(--ease-out) both;
}
.account-page[hidden] { display: none; }
body.account-open main, body.account-open .footer { display: none; }

.acct-card {
  position: relative; overflow: hidden; width: min(94vw, 420px);
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(160deg, #010101, #0a0a0a 55%, #010101);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  padding: 2.4rem 1.8rem 2.2rem; text-align: center;
  animation: modal-in 0.4s var(--ease-out);
}
.acct-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.acct-blob {
  position: absolute; left: -25%; bottom: -30%; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
  filter: blur(34px); animation: acct-bounce 3s ease-in-out infinite;
}
.acct-dot { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05); filter: blur(6px); animation: acct-ping 2.4s ease-out infinite; }
.acct-dot--a { top: 12%; left: 10%; width: 60px; height: 60px; }
.acct-dot--b { bottom: 18%; right: 12%; width: 44px; height: 44px; animation-delay: 0.6s; }
@keyframes acct-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes acct-ping { 0% { transform: scale(1); opacity: 0.6; } 75%, 100% { transform: scale(1.9); opacity: 0; } }

.acct-badge { position: relative; z-index: 1; width: 92px; height: 92px; margin: 0 auto 1.4rem; display: grid; place-items: center; }
.acct-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); }
.acct-ring--1 { animation: acct-ping 2s ease-out infinite; }
.acct-ring--2 { border-color: rgba(255,255,255,0.10); animation: acct-glow 2.6s ease-in-out infinite; }
@keyframes acct-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,255,255,0.15); }
  50%      { box-shadow: 0 0 26px rgba(255,255,255,0.35); }
}
.acct-logo {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(20,20,20,0.9), rgba(0,0,0,0.7));
  border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.acct-logo svg { width: 34px; height: 34px; }

.acct-title {
  position: relative; z-index: 1; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.5rem;
  margin-bottom: 0.35rem;
  background: linear-gradient(100deg, #fff, #cfcfcf, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acct-service { position: relative; z-index: 1; color: rgba(255,255,255,0.5); font-size: 0.85rem; margin-bottom: 1.6rem; }

.acct-card .ar-fields { position: relative; z-index: 1; text-align: left; }

.acct-warn { position: relative; z-index: 1; margin-top: 1.1rem; color: #ffcf8a; font-size: 0.85rem; }

.acct-underline {
  position: relative; z-index: 1; width: 33%; height: 2px; margin: 1.7rem auto 1rem; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}
.acct-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 0.4rem; }
.acct-dots span { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.55; animation: acct-bob 1s ease-in-out infinite; }
.acct-dots span:nth-child(2) { animation-delay: 0.1s; }
.acct-dots span:nth-child(3) { animation-delay: 0.2s; }
@keyframes acct-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ═══ 4. PANIER — checkout 2 colonnes ═══ */
.modal-cart { width: min(97vw, 1080px); max-width: 97vw; }
.checkout {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, rgba(16,20,34,0.97), rgba(9,12,22,0.98));
  border: 1px solid var(--glass-brd);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
}

/* Barre d'étapes */
.ck-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem clamp(0.9rem, 3vw, 1.6rem);
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ck-brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.ck-brand .brand-text { font-size: 0.92rem; }
.ck-steps { display: flex; align-items: center; gap: 0.5rem; flex: 1; justify-content: center; flex-wrap: wrap; }
.ck-step {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.86rem; color: var(--muted-2); white-space: nowrap;
}
.ck-step + .ck-step::before {
  content: ""; width: clamp(18px, 4vw, 58px); height: 1px; margin-right: 0.5rem;
  background: rgba(255,255,255,0.16);
}
.ck-num {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.76rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.2); color: var(--muted-2);
}
.ck-step.is-active { color: var(--ink); font-weight: 600; }
.ck-step.is-active .ck-num {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--red), var(--blue));
  box-shadow: 0 0 14px rgba(229,9,20,0.55);
}
.ck-secure { display: inline-flex; align-items: center; gap: 0.5rem; color: #34d399; }
.ck-secure span { display: flex; flex-direction: column; line-height: 1.25; }
.ck-secure strong { font-size: 0.8rem; color: var(--ink); font-weight: 600; }
.ck-secure em { font-style: normal; font-size: 0.72rem; color: var(--muted-2); }
.ck-close { position: static; width: 40px; height: 40px; flex: none; }

/* Corps */
.ck-body {
  display: grid; gap: 1.4rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
  padding: clamp(1.1rem, 3vw, 2rem);
}
.ck-title { font-family: "Playfair Display", "Poppins", serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.9rem; }
.ck-panel {
  padding: 1.1rem; border-radius: 16px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
}

/* État vide */
.ck-empty { text-align: center; padding: 2.2rem 1rem; }
.ck-empty[hidden] { display: none; }
.ck-empty-icon {
  display: inline-grid; place-items: center; margin-bottom: 0.9rem;
  color: #ff5b64;
  filter: drop-shadow(0 0 14px rgba(229,9,20,0.45));
  animation: cart-idle 3.4s ease-in-out infinite;
}
@keyframes cart-idle { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-4deg); } }
.ck-empty h4 { font-family: "Poppins", sans-serif; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.ck-empty p { color: var(--muted); font-size: 0.9rem; max-width: 46ch; margin: 0 auto 1.3rem; }

/* Résumé */
.ck-summary { position: sticky; top: 0; }
.ck-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.1rem; }
.ck-total-row span { font-size: 1.05rem; color: var(--ink); font-weight: 600; }
.ck-total-row strong {
  font-family: "Poppins", sans-serif; font-size: 1.6rem;
  background: linear-gradient(100deg, var(--red-soft), var(--blue-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Bouton « Suivant » avec dégradé animé cyan/rose */
.btn-next {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 54px; border-radius: 12px; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.98rem; color: #fff;
  background: linear-gradient(100deg, var(--red), #ec4899, #06b6d4, var(--blue));
  background-size: 300% 100%;
  animation: next-shift 6s ease infinite;
  box-shadow: 0 10px 30px rgba(236,72,153,0.28);
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s ease, filter 0.3s ease;
}
@keyframes next-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(6,182,212,0.5), 0 0 46px rgba(236,72,153,0.35); }
.btn-next svg { transition: transform 0.3s var(--ease-out); }
.btn-next:hover svg { transform: translateX(4px); }
.btn-next[aria-disabled="true"] { filter: grayscale(0.75) brightness(0.6); pointer-events: none; animation: none; box-shadow: none; }

.ck-or { display: flex; align-items: center; gap: 0.7rem; margin: 0.9rem 0; }
.ck-or::before, .ck-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.12); }
.ck-or span { font-size: 0.76rem; color: var(--muted-2); }
.ck-back {
  width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.9rem; font-weight: 500;
  transition: color 0.25s ease;
}
.ck-back:hover { color: var(--ink); }
.ck-clear {
  width: 100%; min-height: 40px; margin-top: 0.6rem; border-radius: 10px; cursor: pointer;
  background: none; border: 1px dashed rgba(229,9,20,0.4); color: #ff9aa2; font-size: 0.82rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.ck-clear:hover { background: rgba(229,9,20,0.14); color: #fff; }
.ck-clear[hidden] { display: none; }

/* ═══ TUNNEL DE COMMANDE — étapes coordonnées → paiement → livraison ═══ */

/* .ck-body est en display:grid : sans cette règle plus spécifique,
   l'attribut hidden serait ignoré et toutes les étapes s'empileraient. */
.ck-view[hidden] { display: none; }
.ck-view { animation: ck-fade 0.35s var(--ease-out) both; }
@keyframes ck-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Étapes centrées (paiement, attente, succès) : une seule colonne */
.ck-view--solo { grid-template-columns: minmax(0, 620px); justify-content: center; }
.ck-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.4rem 0; }

.ck-step.is-done { color: #34d399; }
.ck-step.is-done .ck-num { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.5); color: #34d399; }

.btn-next:disabled { filter: grayscale(0.75) brightness(0.6); pointer-events: none; animation: none; box-shadow: none; }

/* Lien de repli « commander via WhatsApp » (usage manuel, volontairement discret) */
.ck-wa-fallback {
  display: block; width: 100%; text-align: center; min-height: 40px; padding: 0.6rem;
  color: var(--muted-2); font-size: 0.85rem; text-decoration: none;
  border-radius: 10px; border: 1px solid var(--glass-brd);
  background: none; cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.ck-wa-fallback:hover { color: var(--ink); border-color: rgba(255,255,255,0.28); }
.ck-wa-fallback[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.ck-resume {
  width: 100%; min-height: 44px; margin-top: 0.7rem; border-radius: 10px; cursor: pointer;
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.4); color: #bfd8ff;
  font-size: 0.85rem; font-weight: 600;
}
.ck-resume:hover { background: rgba(59,130,246,0.2); color: #fff; }
.ck-resume[hidden] { display: none; }

/* --- Formulaire coordonnées --- */
#ck-form .field { margin-bottom: 0.9rem; }
.ck-phone { display: flex; align-items: stretch; gap: 0; }
.ck-phone-prefix {
  display: grid; place-items: center; padding: 0 0.6rem 0 0.85rem; flex: none; max-width: 130px;
  border-radius: 10px 0 0 10px; border: 1px solid var(--glass-brd); border-right: none;
  background: rgba(255,255,255,0.06); color: var(--muted); font-weight: 600; font-size: 0.85rem;
  cursor: pointer;
}
select.ck-phone-prefix option { background: #14141c; color: var(--ink); }
.ck-phone input { border-radius: 0 10px 10px 0 !important; flex: 1; min-width: 0; }
.ck-hint { color: var(--muted-2); font-size: 0.82rem; line-height: 1.6; margin-bottom: 1rem; }

.ck-pay-choice { border: none; padding: 0; margin: 0 0 1rem; }
.ck-pay-choice legend { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.6rem; padding: 0; }
.ck-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.ck-pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ck-pay-card {
  display: flex; align-items: center; gap: 0.55rem; min-height: 52px; padding: 0.6rem 0.8rem;
  border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--muted);
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-out);
}
.ck-pay-opt:hover .ck-pay-card { color: var(--ink); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
.ck-pay-opt input:checked + .ck-pay-card {
  color: var(--ink); border-color: rgba(59,130,246,0.75);
  background: rgba(59,130,246,0.14); box-shadow: 0 0 18px rgba(59,130,246,0.25);
}
.ck-pay-opt input:focus-visible + .ck-pay-card { outline: 2px solid var(--blue-lite); outline-offset: 2px; }
.ck-pay-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ck-pay-dot--wave { background: #1dc4e9; }
.ck-pay-dot--om   { background: #ff7900; }
.ck-pay-dot--free { background: #cd1719; }
.ck-pay-dot--same  { background: linear-gradient(135deg, #6ee7b7, #38bdf8); }
.ck-pay-dot--split { background: linear-gradient(135deg, #f59e0b, #ec4899); }

.ck-recap { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.ck-recap-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  font-size: 0.85rem; color: var(--muted); padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(255,255,255,0.09);
}
.ck-recap-row strong { color: var(--ink); font-family: "Poppins", sans-serif; white-space: nowrap; }

/* --- Étape paiement --- */
.ck-pay-panel { text-align: center; }
.ck-order-ref { font-size: 0.85rem; color: var(--muted-2); margin-bottom: 0.4rem; }
.ck-order-ref strong { color: var(--ink); font-family: "Poppins", sans-serif; letter-spacing: 0.04em; }
.ck-amount {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(2rem, 6vw, 2.8rem);
  background: linear-gradient(100deg, var(--red-soft), var(--blue-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 0.6rem;
}
.ck-pay-manual {
  display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; padding: 0.9rem;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px dashed var(--glass-brd);
}
.ck-pay-manual span { font-size: 0.82rem; color: var(--muted-2); }
.ck-pay-manual strong { font-family: "Poppins", sans-serif; font-size: 1.3rem; letter-spacing: 0.05em; }
.ck-pay-panel .btn { margin-bottom: 0.6rem; }

/* --- Étape vérification --- */
.ck-spinner {
  width: 54px; height: 54px; border-radius: 50%; margin-bottom: 0.4rem;
  border: 3px solid rgba(255,255,255,0.12); border-top-color: var(--blue-lite);
  animation: ck-spin 0.9s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }
/* Délai dépassé : le suivi s'arrête, l'animation aussi (et on rassure le client) */
.is-idle .ck-spinner { animation: none; border-top-color: #34d399; border-color: rgba(52,211,153,0.35); }
.ck-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1rem; }
.ck-actions .btn { min-height: 46px; }

/* --- Étape succès --- */
.ck-done-head { text-align: center; margin-bottom: 1.2rem; }
.ck-done-icon { font-size: 3rem; display: block; line-height: 1; margin-bottom: 0.5rem; animation: ck-pop 0.5s var(--ease-out) both; }
@keyframes ck-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ck-done-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.8rem;
  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.ck-done-meta > div { display: flex; flex-direction: column; gap: 0.2rem; }
.ck-done-meta span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); }
.ck-done-meta strong { font-family: "Poppins", sans-serif; font-size: 0.95rem; }

.ck-done-items { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; }
.ck-done-item h4 { font-family: "Poppins", sans-serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.6rem; }
.ck-cred {
  display: flex; flex-direction: column; gap: 0.45rem; padding: 0.85rem; margin-bottom: 0.6rem;
  border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid var(--glass-brd);
}
.ck-cred-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ck-cred-row > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); min-width: 92px; }
.ck-cred-row code {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.88rem; color: var(--ink);
}
.ck-done-item .ck-hint { margin: 0; }

/* Articles du panier dans le checkout */
.checkout .cart-item {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.1);
}
.checkout .cart-items:empty { display: none; }
.ci-qty { font-size: 0.74rem; color: #7dd3fc; }

/* ═══ 5. Responsive V3 ═══ */
/* Page abonnement : 3 colonnes → 2 → 1 */
@media (max-width: 1180px) {
  .op-grid { grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.6fr); }
  .op-grid .order-summary { grid-column: 1 / -1; position: static; }
}
@media (max-width: 760px) {
  .op-grid { grid-template-columns: 1fr; }
  .op-poster { aspect-ratio: 16 / 10; }
  .op-logo { width: auto; height: 64px; max-width: none; }
}
@media (max-width: 900px) {
  .order-summary { position: static; }
  .ck-body { grid-template-columns: 1fr; }
  .ck-summary { position: static; }
  .ck-steps { order: 3; width: 100%; justify-content: flex-start; }
  .ck-secure { order: 2; margin-left: auto; }
}
@media (max-width: 560px) {
  .ck-secure span { display: none; }
  .ck-step + .ck-step::before { width: 14px; margin-right: 0.3rem; }
  .ck-step { font-size: 0.78rem; }
  .opt-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .opt-grid.profiles { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .gooey-main { padding: 0.85rem 1.9rem; font-size: 1rem; }
}

/* ═══ 6. Mouvement réduit — V3 ═══ */
@media (prefers-reduced-motion: reduce) {
  .splash-shader, .smokey-canvas { display: none; }
  .ck-empty-icon, .btn-next, #splash.ready .gooey-group { animation: none !important; }
  [data-logo-slot="splash"].has-logo { animation: none !important; }
  .gooey-group { filter: none !important; }
  .gooey-group:hover .gooey-arrow { transform: translateX(56px); }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  V4 — SYSTÈME RESPONSIVE UNIFIÉ                            ║
   ║  Une seule interface qui se réorganise. Ladder cohérent : ║
   ║   • ≥1180  desktop        → grilles pleines               ║
   ║   • 1024   tablette large → réorg. fiche/panier           ║
   ║   • 768    tablette/phablette → menu hamburger + 2 col.   ║
   ║   • 560    téléphone      → 1 colonne, pleine largeur     ║
   ║   • 380    petit téléphone → densités réduites            ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ---- Menu mobile : s'ouvre SOUS la navbar (encoche comprise) ---- */
@media (max-width: 1024px) {
  .nav-links {
    top: calc(70px + env(safe-area-inset-top));
    right: calc(clamp(0.8rem, 3vw, 1.5rem) + env(safe-area-inset-right));
    left: calc(clamp(0.8rem, 3vw, 1.5rem) + env(safe-area-inset-left));
    max-height: calc(100dvh - 90px - env(safe-area-inset-top)); overflow-y: auto;
  }
}

/* ---- Tablette large (≤ 1024) : la fiche passe déjà en 2 colonnes
        à 1180 ; on cadre le résumé pour qu'il ne s'étire pas trop ---- */
@media (max-width: 1024px) {
  .op-grid .order-summary { max-width: 620px; margin-inline: auto; width: 100%; }
  /* Panier : résumé en pleine largeur mais borné et centré */
  .ck-body .ck-side { max-width: 640px; margin-inline: auto; width: 100%; }
}

/* ---- Tablette portrait / grande phablette (≤ 768) ---- */
@media (max-width: 768px) {
  /* Fiche abonnement : visuel en bandeau au-dessus, config pleine largeur */
  .op-grid { grid-template-columns: 1fr; }
  .op-visual { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 1.2rem; align-items: start; }
  .op-visual .op-poster { aspect-ratio: 3 / 4; }
  .op-visual .op-desc { margin-top: 0; }
  .op-visual .feat-list { grid-column: 1 / -1; }
  .op-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  /* Section « J'ai un problème » : onglets appareils sur toute la largeur */
  .device-tabs { flex-wrap: wrap; }
  /* Contact : orbes réparties en 2 rangées équilibrées */
  .social-row { gap: 1.6rem 2rem; }
}

/* ---- Téléphone (≤ 560) ---- */
@media (max-width: 560px) {
  /* Fiche : visuel repasse en pile simple (le bandeau 2-col serait trop serré) */
  .op-visual { grid-template-columns: 1fr; }
  .op-visual .op-poster { aspect-ratio: 16 / 10; max-width: 320px; margin-inline: auto; }
  .op-bar { gap: 0.6rem; }
  .op-crumb { display: none; } /* le bouton retour suffit sur petit écran */
  /* Résumé : boutons confortables au pouce */
  .order-summary, .ck-summary { max-width: none; }
  /* Sections plus compactes verticalement */
  .section { padding-block: clamp(3rem, 12vw, 5rem); }
}

/* ---- Petit téléphone (≤ 380) : on resserre les densités ---- */
@media (max-width: 380px) {
  .opt-grid { grid-template-columns: repeat(2, 1fr); }
  .opt-grid.profiles { grid-template-columns: 1fr; }
  .social-icon { min-width: 84px; }
  .s-orb { width: 62px; height: 62px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}

/* ---- TACTILE : neutralise le survol « collant » sur écrans sans souris.
        Les changements de couleur restent ; seuls les déplacements
        (lift/scale) qui resteraient figés après un tap sont annulés.
        Le retour au toucher passe par :active. ---- */
@media (hover: none) {
  .service-card:hover, .opt:hover, .nav-cart:hover, .contact-card:hover,
  .social-icon:hover .s-orb, .btn:hover, .btn-signin:hover, .btn-next:hover,
  .op-back:hover, .step-btn:hover, .cat-btn:hover, .pill:hover,
  .brand:hover [data-logo-slot].has-logo {
    transform: none;
  }
  .btn:active, .opt:active, .pill:active, .cat-btn:active,
  .service-card:active, .nav-cart:active, .btn-next:active, .btn-signin:active {
    transform: scale(0.97);
  }
  /* Sur mobile, le survol ne doit pas laisser un état visuel actif */
  .social-icon:hover .s-orb { box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
}

/* ---- Confort de saisie : pas de zoom auto iOS (police ≥ 16px sur les champs) ---- */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; }
}

/* ═══ V4 bis — SÉLECTEUR DE DURÉE REPLIABLE (façon GamsGo) ═══
   Un bouton propre affiche le choix courant ; le clic déplie la grille. */
.dur-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 56px; padding: 0.7rem 1rem; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1.5px solid var(--glass-brd); color: var(--ink);
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.dur-toggle:hover { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.06); }
.dur-toggle[aria-expanded="true"] {
  border-color: var(--red-soft);
  box-shadow: 0 0 0 1px rgba(229,9,20,0.3), 0 0 16px rgba(229,9,20,0.22);
}
.dur-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dur-cur-months { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.dur-cur-price { font-size: 0.85rem; color: var(--muted-2); }
.dur-chevron { flex: none; color: var(--muted); transition: transform 0.35s var(--ease-out); }
.dur-toggle[aria-expanded="true"] .dur-chevron { transform: rotate(180deg); color: var(--red-soft); }
/* La grille dépliée : petite apparition, marge au-dessus */
.dur-grid { margin-top: 0.6rem; animation: fade-soft 0.28s var(--ease-out); }
.dur-grid[hidden] { display: none; }

/* ═══ V4 ter — CARTES COMPACTES : 2 par ligne sur téléphone ═══
   Logo + nom + tag + prix. La carte entière est cliquable → pas de
   description ni de CTA verbeux (interface épurée). */
@media (max-width: 620px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .service-card { padding: 0.95rem 0.85rem; gap: 0.45rem; border-radius: 16px; }
  .svc-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .svc-logo { width: 44px; height: 44px; border-radius: 13px; }
  .svc-logo svg, .svc-logo img { width: 28px; height: 28px; }
  .svc-name { font-size: 1rem; line-height: 1.15; }
  .svc-tag { font-size: 0.74rem; }
  .svc-desc, .svc-cta { display: none; } /* tap = ouverture de la fiche */
  .svc-price { margin-top: auto; flex-wrap: wrap; gap: 0.15rem 0.35rem; align-items: baseline; }
  .svc-price .from { display: none; }
  .svc-price .amount { font-size: 1.14rem; }
  .svc-note { font-size: 0.66rem; padding: 0.1rem 0.4rem; line-height: 1.2; }
}
/* Très petit téléphone : toujours 2 par ligne, densités resserrées */
@media (max-width: 360px) {
  .services-grid { gap: 0.5rem; }
  .service-card { padding: 0.8rem 0.7rem; }
  .svc-name { font-size: 0.92rem; }
  .svc-price .amount { font-size: 1.02rem; }
}