/* Viralo — couleurs, polices et éléments communs (page d'accueil + appli) */
:root {
  --violet: #6633F5;
  --violet-fonce: #4E1FD6;
  --violet-clair: #EEE8FF;
  --violet-doux: #B9A4FF;
  --encre: #111014;
  --encre-2: #3B3946;
  --gris: #6E6B7B;
  --trait: #E4E1EC;
  --papier: #F7F6FB;
  --blanc: #FFFFFF;
  --jaune: #FFE14D;
  --vert: #18B26B;
  --rouge: #E5484D;
  --nuit: #0E0D13;
  --nuit-2: #1A1824;
  --nuit-3: #262335;
  --rayon: 16px;
  --ombre: 0 1px 2px rgba(17, 16, 20, .06), 0 8px 24px rgba(17, 16, 20, .06);
  --titre: "Archivo", system-ui, sans-serif;
  --police: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--violet-doux); outline-offset: 2px; border-radius: 6px; }

.titre, h1, h2, h3 {
  font-family: var(--titre);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 6px 20px rgba(102, 51, 245, .35); }
.btn-violet:hover { background: var(--violet-fonce); }
.btn-blanc { background: #fff; color: var(--encre); }
.btn-blanc:hover { background: var(--violet-clair); }
.btn-ligne { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ligne:hover { background: rgba(127, 127, 127, .1); }
.btn-doux { background: var(--violet-clair); color: var(--violet-fonce); }
.btn-doux:hover { background: #E2D9FF; }
.btn-grand { min-height: 54px; padding: 0 28px; font-size: 17px; }
.btn-petit { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: var(--violet-clair); color: var(--violet-fonce);
}

/* Réseaux : couleurs repères (pas les logos officiels) */
.reseau { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.logo-r { flex: none; display: inline-block; vertical-align: middle; }

/* Téléphone (maquettes de clips) */
.tel {
  position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: #222; box-shadow: 0 0 0 6px #0B0A10, 0 30px 60px -20px rgba(0, 0, 0, .6);
  isolation: isolate;
}
.tel .scene { position: absolute; inset: 0; z-index: -1; }
.tel .st {
  position: absolute; left: 8%; right: 8%; top: 62%;
  text-align: center; font-family: var(--titre); font-weight: 900; font-style: italic;
  font-size: 8.6cqw; line-height: 1.12; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .5);
  -webkit-text-stroke: 1px #000; paint-order: stroke fill;
}
.tel .st b { color: var(--jaune); font-weight: 900; }
.tel .barre { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.tel .barre i { display: block; height: 100%; width: var(--p, 40%); background: #fff; border-radius: 2px; }

/* Scènes abstraites (remplacent de vraies vidéos dans les maquettes) : un fond + une silhouette */
.tel { container-type: inline-size; }
.tel .scene::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(16cqw 18cqw at 50% 33%, var(--peau, #E8B08C) 98%, transparent 100%),
    radial-gradient(9cqw 6cqw at 50% 47%, var(--peau-ombre, #C98E6B) 98%, transparent 100%),
    radial-gradient(48cqw 40cqw at 50% 82%, var(--haut, #2C2A55) 98%, transparent 100%); }
.tel .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.sc-studio { --haut: #1E1A3D; background: radial-gradient(70% 40% at 80% 20%, rgba(255, 255, 255, .25), transparent), linear-gradient(160deg, #7B5CFF, #2A1B6B); }
.sc-podcast { --haut: #3B2A1E; --peau: #D9A07A; background: radial-gradient(14cqw 30cqw at 82% 64%, #1A1A1A 98%, transparent 100%), linear-gradient(180deg, #FF8A3D, #8C2F1B); }
.sc-stream { --haut: #10102A; --peau: #EBC1A0; background: conic-gradient(from 200deg at 50% 70%, #00D4FF, #6633F5, #FF3DA5, #00D4FF); }
.sc-sport { --haut: #F5F5F5; --peau: #B98060; --peau-ombre: #9A664A; background: linear-gradient(180deg, #7FD6FF 0 40%, #1DB386 40% 100%); }
.sc-cuisine { --haut: #FFFFFF; --peau: #E7A982; background: linear-gradient(180deg, #FFD36E, #F07C2A); }

[hidden] { display: none !important; }
.cache-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}