/* Cupidex — site vitrine. Styles partagés (charte graphique : docs/design/charte-graphique.md). */

:root {
  color-scheme: light;
  --color-primary: #6331ff;
  --color-primary-dark: #4a1fd1;
  --color-secondary: #ffd9fe;
  --color-ink: #1c1330;
  --color-surface: #ffffff;
  --color-bg: #f5f3ff;
  --color-border: #d7cffb;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui: 'Poppins', var(--font);

  /* --- DA « verre liquide » de l'appli (maquettes v2) — portée ici pour la
     page d'accueil (body.home), seul endroit du site qui reprend l'écran
     de lancement de l'appli. Les pages de contenu (contact, mentions
     légales) restent sur le fond clair ci-dessus, pour la lisibilité. --- */
  --nappes:
    radial-gradient(75% 55% at 82% 6%,   rgba(139,102,255,.8),  transparent 70%),
    radial-gradient(60% 45% at 8% 68%,   rgba(255,92,200,.5),   transparent 70%),
    radial-gradient(80% 60% at 55% 112%, rgba(99,49,255,.95),   transparent 70%),
    radial-gradient(55% 45% at 28% 22%,  rgba(42,24,159,.95),   transparent 70%),
    #150b47;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  --glass-bg: rgba(255, 255, 255, .13);
  --glass-blur: blur(4px) saturate(135%) brightness(1.07);
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 14px 20px -16px rgba(255, 255, 255, .38),
    inset 0 -18px 24px -18px rgba(255, 255, 255, .28),
    0 3px 12px rgba(255, 255, 255, .13),
    0 8px 22px rgba(18, 8, 48, .16);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --on-fog: #fff;
  --on-fog-soft: rgba(255, 255, 255, .72);
  --on-fog-line: rgba(255, 255, 255, .16);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
}

a { color: var(--color-primary); }

img, svg { max-width: 100%; }

/* ---- Page d'accueil : le fond en nappes de l'écran de lancement de
   l'appli, fixe derrière tout le contenu qui défile par-dessus, grain
   compris — même recette que splash.html dans les maquettes. ---- */
body.home {
  background: var(--nappes);
  color: var(--on-fog);
}

body.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: .5;
  mix-blend-mode: overlay;
}

body.home > * { position: relative; z-index: 1; }

/* En-tête commun à toutes les pages */
.site-header {
  background: var(--color-primary);
  color: #fff;
}

/* Sur l'accueil, l'en-tête flotte sur les nappes plutôt que de les couper
   d'une bande pleine — la marque reste la seule chose posée dessus. */
body.home .site-header { background: transparent; }

/* Trois zones : l'icône cœur garde sa place d'origine à gauche, le mot
   grossit au centre — c'est lui qui doit se voir en arrivant sur le site —
   et le nav se pousse dans sa propre colonne à droite plutôt que de se
   battre avec le mot pour le centre. Le mot a besoin de plus de place que
   la petite barre d'origine : la marge verticale grandit avec lui. */
.site-header .header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

body.home .site-header .header-inner { padding: 34px 24px 30px; }

.site-header .brand-icon {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
}

.site-header .brand-icon img { width: 30px; height: auto; }

/* le cœur s'allume comme dans les maquettes (brandMark o.glow) */
body.home .site-header .brand-icon img {
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, .5))
    drop-shadow(0 0 12px rgba(158, 150, 255, .6));
}

.site-header .brand-word {
  grid-column: 2;
  justify-self: center;
  text-decoration: none;
  color: #fff;
}

/* le logotype : la grasse italique de la charte, en minuscules — même
   recette que .logo-mot dans les maquettes */
.site-header .brand-word span {
  font-family: var(--font-ui);
  font-weight: 800;
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.5px;
  color: #fff;
}

/* sur l'accueil, le mot s'allume comme sur l'écran de lancement : même
   halo que .logo-mot, et un format de vrai titre — c'est la seule marque
   de la page, elle peut se permettre de se faire voir */
body.home .site-header .brand-word span {
  font-size: 42px;
  letter-spacing: -1.5px;
  text-shadow:
    0 0 12px rgba(255, 255, 255, .55),
    0 0 30px rgba(158, 150, 255, .7),
    0 0 54px rgba(255, 120, 225, .4);
}

.site-header nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 20px;
}

.site-header nav a {
  color: #f5ecff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.9;
}

.site-header nav a:hover { opacity: 1; text-decoration: underline; }

/* Pied de page commun */
.site-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: center;
  color: #5b4a86;
  font-size: 13px;
  text-align: center;
}

.site-footer a { color: #5b4a86; text-decoration: underline; }

body.home .site-footer,
body.home .site-footer a { color: var(--on-fog-soft); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: #fff;
  color: var(--color-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 8px 22px rgba(18, 8, 48, .22);
}

.btn-primary:hover { background: #ffd9fe; }

/* porte secondaire, pas l'action principale — en blanc comme le reste des
   cases, mais en contour plutôt qu'en plein : à côté d'un bouton principal
   déjà blanc plein, deux pastilles pleines identiques ne se distingueraient
   plus l'une de l'autre. */
.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}

.btn-outline:hover { background: rgba(255, 255, 255, .12); }

/* Bouton plein violet, utilisable sur fond clair (pages de contenu) */
.btn-solid {
  background: var(--color-primary);
  color: #fff;
}

.btn-solid:hover { background: var(--color-primary-dark); }

@media (max-width: 640px) {
  .site-header .header-inner { padding: 14px 18px; }
  .site-header .brand-icon img { width: 24px; }
  .site-header .brand-word span { font-size: 16px; }
  .site-header nav { gap: 14px; }

  body.home .site-header .header-inner { padding: 24px 18px 20px; }
  body.home .site-header .brand-word span { font-size: 28px; }
}

/* ---- Pages de contenu (légal / contact) ---- */
.content-page main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.content-page h1 { font-size: 26px; margin: 0 0 6px; }
.content-page .lead { color: #5b4a86; margin: 0 0 28px; }
.content-page h2 { font-size: 16px; color: var(--color-primary); margin: 28px 0 8px; }
.content-page p { margin: 0 0 10px; font-size: 15px; }

.placeholder {
  color: #8a6d00;
  background: #fff8e1;
  border: 1px solid #f3d98a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}

.disclaimer { margin-top: 32px; font-size: 12.5px; color: #5b4a86; font-style: italic; }

/* ---- Page d'accueil ----
   Pas de fond propre : .hero repose sur les nappes de body.home, comme le
   splash de l'appli — un seul dégradé continu derrière toute la page, pas
   une bande qui s'arrête à la hauteur du hero. Deux lueurs floues en plus,
   façon « aurora », pour donner un vrai point focal au-dessus des nappes —
   purement décoratif, sous le contenu (z-index). */
.hero {
  position: relative;
  text-align: center;
  padding: 88px 24px 84px;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero::before {
  top: -160px;
  left: 50%;
  transform: translateX(-72%);
  background: radial-gradient(circle, rgba(255, 92, 200, .4), transparent 70%);
}

.hero::after {
  top: -100px;
  left: 50%;
  transform: translateX(-28%);
  background: radial-gradient(circle, rgba(139, 102, 255, .45), transparent 70%);
}

.hero > * { position: relative; z-index: 1; }

/* entrée douce, échelonnée — respecte la préférence système */
.hero .badge      { animation: hero-in .6s var(--spring) both; }
.hero h1          { animation: hero-in .6s .08s var(--spring) both; }
.hero p.lead      { animation: hero-in .6s .16s var(--spring) both; }
.hero .cta-row    { animation: hero-in .6s .24s var(--spring) both; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .badge, .hero h1, .hero p.lead, .hero .cta-row { animation: none; }
}

/* en retrait, pas en blanc plein : le blanc plein est réservé au CTA
   principal — un badge de statut qui attire autant l'œil qu'un bouton
   d'action fait concurrence à ce qui compte vraiment sur la page */
.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px;
}

.hero .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd9fe;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* une phrase courte, un seul bloc de texte — même grasse italique que le
   logotype, en très grand, avec un dégradé continu sur tout le texte (pas
   de halo flou cette fois, juste le remplissage) : c'est la signature de
   la marque qui porte le style, pas un effet posé dessus. */
.hero h1 {
  max-width: 640px;
  margin: 0 auto 18px;
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #fff 10%, #ffd9fe 55%, #c9b6ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  max-width: 540px;
  margin: 0 auto 36px;
  font-size: clamp(15.5px, 3.2vw, 18px);
  line-height: 1.6;
  color: var(--on-fog-soft);
}

.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.section {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 24px;
}

/* un peu plus large que le reste : 4 cartes sur une ligne ont besoin de
   place pour respirer, sinon elles s'écrasent */
#concept { max-width: 1120px; }

.section h2 {
  text-align: center;
  font-size: clamp(22px, 4vw, 30px);
  margin: 0 0 8px;
}

.section p.section-lead {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
  color: var(--on-fog-soft);
  font-size: 15px;
}

/* les 4 cartes sur une seule ligne en desktop — ça se resserre en 2 puis 1
   colonne plutôt que de laisser la 4e isolée sur sa propre ligne */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
}

/* plus de verre du tout ici : un fond plein, une ombre simple — une carte
   « classique », pas de teinte translucide ni de liserés en relief. */
.card {
  background: #241454;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 24px 20px 22px;
  box-shadow: 0 14px 30px rgba(8, 4, 30, .35);
  transition: transform .35s var(--spring), box-shadow .35s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(8, 4, 30, .45);
}

/* pastille d'icône — le seul accent de couleur de la carte, en dégradé
   rose/violet de marque pour qu'il ressorte */
.card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ff5cc8, #8b66ff);
  color: #fff;
}

.card .icon svg { width: 21px; height: 21px; }

.card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #fff; }
.card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--on-fog-soft); }

.tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tier-chip {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}

.tier-chip.violet  { background: #6331ff; }
.tier-chip.bronze  { background: #cd7f32; }
.tier-chip.argent  { background: #8f97a6; }
.tier-chip.or      { background: #c99a1a; }
.tier-chip.platine { background: #2fa9a5; }

.stores { border-top: 1px solid var(--on-fog-line); border-bottom: 1px solid var(--on-fog-line); }

.stores .section { padding: 48px 24px; text-align: center; }

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 20px;
}

/* même retrait que le badge du hero : juste des indications, pas des
   actions — le blanc plein reste au seul CTA */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--on-fog-soft);
  font-size: 13px;
  font-weight: 600;
}

.final-cta {
  text-align: center;
  padding: 64px 24px 72px;
}

.final-cta h2 { font-size: clamp(22px, 4vw, 28px); margin: 0 0 10px; }
.final-cta p { color: var(--on-fog-soft); margin: 0 0 26px; }