/* ===========================================================================
   palette.css — extension colorée du socle visuel.

   design-system.css avait volontairement ramené le site à UN seul rose sur un
   noir chaud : il en comptait dix auparavant, d'où une impression de
   bric-à-brac. Cette discipline est conservée — on n'ajoute pas une dixième
   teinte, on donne de la matière à celles qui restent.

   Trois moyens, dans cet ordre d'importance :

   1. Les fonds sont teintés. Le noir était presque neutre (#0D0B0C) : entre
      deux vignettes, la page se lisait comme un vide gris. Ils virent vers le
      prune, famille du rose de la marque.

   2. De la lumière d'ambiance. De larges dégradés radiaux très dilués, posés
      derrière les sections. C'est ce qui apporte le plus de couleur perçue
      pour le moins d'encombrement : aucun élément de plus à l'écran.

   3. UN accent secondaire, un violet, qui ne s'emploie qu'en dégradé avec le
      rose — jamais seul. Il donne du relief aux surfaces roses sans créer une
      seconde couleur concurrente. L'or reste réservé aux économies et au
      « premium ».

   Chargée après design-system.css, dont elle redéfinit les variables.
   =========================================================================== */

:root {
  /* --- Fonds, virés vers le prune -----------------------------------------
     La teinte est faible (moins de 4 % de saturation sur les plus profonds) :
     assez pour que l'œil ne lise plus du gris, pas assez pour concurrencer les
     vignettes, qui doivent rester le seul vrai foyer de couleur de la page. */
  --fond-0: #0E0A0E;
  --fond-1: #18131A;
  --fond-2: #241C27;
  --fond-3: #332839;

  /* Le texte suit le même virage, sinon il tire au vert par contraste. */
  --texte:        #F6F0F5;
  --texte-doux:   #B8AAB6;
  --texte-faible: #83757F;

  /* --- Accent principal, inchangé ---------------------------------------- */
  --rose:        #E8336D;
  --rose-clair:  #FF5C8D;
  --rose-sombre: #B31F4F;
  --rose-voile:  rgba(232, 51, 109, 0.14);

  /* --- Accent secondaire : ne s'emploie qu'AVEC le rose ------------------- */
  --violet:       #8B3FD6;
  --violet-clair: #A964F0;
  --violet-voile: rgba(139, 63, 214, 0.14);

  /* Le dégradé de marque. Toutes les surfaces roses pleines y passent : un
     aplat uni sur une grande surface fait carton, un dégradé fait matière. */
  --degrade-marque: linear-gradient(135deg, #FF5C8D 0%, #E8336D 45%, #A03FD6 100%);
  --degrade-marque-survol: linear-gradient(135deg, #FF7BA3 0%, #F2477E 45%, #B355E6 100%);

  --or:       #E0A33C;
  --or-voile: rgba(224, 163, 60, 0.14);

  --bord:      rgba(246, 240, 245, 0.10);
  --bord-fort: rgba(246, 240, 245, 0.20);

  /* Halo coloré des cartes au survol : c'est ce qui fait « vivre » une grille
     sombre sans rien y ajouter au repos. */
  --halo-rose:   0 18px 46px rgba(232, 51, 109, 0.22);
  --halo-violet: 0 18px 46px rgba(139, 63, 214, 0.20);
}

/* ---------------------------------------------------------------------------
   Lumière d'ambiance de la page.

   Deux foyers très dilués — rose en haut à droite, violet plus bas à gauche —
   fixés au fond de page. `background-attachment: fixed` fait que la lumière ne
   défile pas avec le contenu : les sections passent devant, ce qui donne
   l'impression d'un éclairage de studio plutôt que d'un motif imprimé.
   --------------------------------------------------------------------------- */

body { background-color: var(--fond-0); }

/* La lumière est portée par une couche FIXE posée derrière la page, et non par
   `background-attachment: fixed` sur le body.
   
   Deux raisons. La première : `fixed` force le navigateur à repeindre le fond
   à chaque image du défilement, ce qui saccade sur téléphone. La seconde, plus
   gênante encore : le repli en `scroll` calait les dégradés sur la HAUTEUR DU
   DOCUMENT — sur un écran étroit, où la page fait cinq ou six fois la hauteur
   de l'écran, les trois foyers se retrouvaient loin en bas et l'on ne voyait
   plus aucune couleur.
   
   Une couche fixe se compose une fois et suit l'écran, quelle que soit la
   longueur de la page. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(70% 55% at 88% -8%, rgba(232, 51, 109, 0.28), transparent 62%),
    radial-gradient(65% 55% at 2% 30%, rgba(139, 63, 214, 0.24), transparent 64%),
    radial-gradient(60% 50% at 75% 104%, rgba(232, 51, 109, 0.20), transparent 62%);
}

/* Sur un écran étroit, les foyers sont resserrés et un peu plus francs : la
   même intensité étalée sur 400 px de large ne se lit pas. */
@media (max-width: 900px) {
  body::before {
    background-image:
      radial-gradient(90% 40% at 95% 0%, rgba(232, 51, 109, 0.34), transparent 62%),
      radial-gradient(90% 45% at 0% 42%, rgba(139, 63, 214, 0.3), transparent 64%),
      radial-gradient(95% 40% at 80% 100%, rgba(232, 51, 109, 0.26), transparent 62%);
  }
}

/* ---------------------------------------------------------------------------
   Surfaces roses : dégradé plutôt qu'aplat.
   --------------------------------------------------------------------------- */

.bouton--plein,
.formule-bouton:not(.formule-bouton--inactif),
.heros-badge,
.formule-badge,
.btn-subscribe,
.bouton--principal {
  background: var(--degrade-marque);
  border: none;
}

.bouton--plein:hover,
.formule-bouton:not(.formule-bouton--inactif):hover,
.btn-subscribe:hover,
.bouton--principal:hover {
  background: var(--degrade-marque-survol);
}

/* ---------------------------------------------------------------------------
   Titres de section : un filet coloré plutôt qu'un titre blanc isolé.
   --------------------------------------------------------------------------- */

.rangee-entete h2 {
  position: relative;
  padding-left: 16px;
}

.rangee-entete h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 999px;
  background: var(--degrade-marque);
}

/* La deuxième rangée porte le filet doré : deux rangées identiques à la suite
   se confondent au défilement. */
.rangee:nth-of-type(even) .rangee-entete h2::before {
  background: linear-gradient(180deg, #F0C063, #E0A33C);
}

.catalogue-titre,
.abonnements-titre,
.achat-unitaire h2 {
  /* Dégradé appliqué au texte lui-même : le blanc pur sur un fond sombre est
     ce qui donnait à la page son air de gabarit non fini. */
  background: linear-gradient(100deg, #FFFFFF 20%, #FFC9DC 60%, #D9A8F5 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------------
   Cartes : halo coloré au survol.
   --------------------------------------------------------------------------- */

.video-card:hover {
  border-color: rgba(232, 51, 109, 0.38);
  box-shadow: var(--halo-rose);
}

.videos-grid > .video-card:nth-child(3n + 2):hover,
.rangee-piste > .video-card:nth-child(3n + 2):hover {
  border-color: rgba(139, 63, 214, 0.38);
  box-shadow: var(--halo-violet);
}

/* ---------------------------------------------------------------------------
   Pilules de tags : elles n'étaient que des contours gris.
   --------------------------------------------------------------------------- */

.pilule {
  border-color: var(--bord);
  background: rgba(246, 240, 245, 0.03);
}

.pilule:hover {
  border-color: rgba(232, 51, 109, 0.5);
  background: var(--rose-voile);
  color: #fff;
}

.pilule--accent {
  border-color: rgba(232, 51, 109, 0.45);
  background: var(--rose-voile);
}

/* ---------------------------------------------------------------------------
   Blocs de vente : un fond qui n'est plus noir.
   --------------------------------------------------------------------------- */

.achat-unitaire {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(232, 51, 109, 0.16), transparent 58%),
    radial-gradient(100% 80% at 100% 100%, rgba(139, 63, 214, 0.14), transparent 60%),
    var(--fond-1);
  border-color: rgba(232, 51, 109, 0.16);
}

.achat-carte { background: rgba(14, 10, 14, 0.72); }

.formule { background: rgba(24, 19, 26, 0.72); }

.formule--avant {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(232, 51, 109, 0.16), transparent 62%),
    rgba(24, 19, 26, 0.86);
}

.reassurance {
  background: rgba(24, 19, 26, 0.5);
  border-color: var(--bord);
}

.reassurance-icone { background: var(--rose-voile); }
.reassurance-point:nth-child(2) .reassurance-icone { background: var(--violet-voile); }
.reassurance-point:nth-child(2) .reassurance-icone svg { fill: var(--violet-clair); }
.reassurance-point:nth-child(3) .reassurance-icone { background: var(--or-voile); }
.reassurance-point:nth-child(3) .reassurance-icone svg { fill: var(--or); }

/* ---------------------------------------------------------------------------
   Barre de navigation et bandeau : ils étaient noirs sur noir.
   --------------------------------------------------------------------------- */

.bandeau-haut {
  background: linear-gradient(90deg, rgba(232, 51, 109, 0.16), rgba(139, 63, 214, 0.14) 60%, transparent);
  border-bottom: 1px solid var(--bord);
}

.navbar { background: rgba(14, 10, 14, 0.92); }

.footer { border-top: 1px solid var(--bord); }

/* ===========================================================================
   Le reste du site.

   La couleur ne pouvait pas s'arrêter à l'accueil : les autres pages sont
   bâties sur les classes historiques (.page-tags, .cat-entete, .blog-*,
   .container, .compte…), restées en gris sur noir. On les rattache ici aux
   mêmes variables, sans toucher aux feuilles d'origine.
   =========================================================================== */

/* --- Titres de page ------------------------------------------------------- */

.page-tags-entete h1,
.cat-entete h1,
.blog-title,
.titre-section,
.compte-entete h1,
.message-central h1,
.page-erreur h1,
.achat h1,
.vente-entete h1,
.chat-entete h1,
.container h1 {
  background: linear-gradient(100deg, #ffffff 20%, #ffc9dc 60%, #d9a8f5 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Panneaux et blocs ---------------------------------------------------- */

/* Toutes ces classes désignaient la même chose — un panneau posé sur le fond —
   avec cinq noirs différents selon la page. */
.bloc,
.container,
.admin-connexion-carte,
.form-container,
.rappel-video,
.categorie,
.blog-article,
.chat-fil {
  background: var(--fond-1);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg, 20px);
}

.bloc h2,
.container h2 { color: var(--texte); }

/* --- Pastilles de tags ---------------------------------------------------- */

.tag-pastille {
  border: 1px solid var(--bord);
  background: rgba(246, 240, 245, 0.03);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.tag-pastille:hover {
  border-color: rgba(232, 51, 109, 0.5);
  background: var(--rose-voile);
}

/* Les plus fournis prennent la couleur de marque : le nuage indiquait la
   popularité par la seule taille du texte, ce qui se voit mal. */
.tag-pastille--grand {
  border-color: rgba(232, 51, 109, 0.45);
  background: linear-gradient(135deg, rgba(232, 51, 109, 0.22), rgba(139, 63, 214, 0.18));
  color: #fff;
}

.tag-pastille--moyen { border-color: rgba(139, 63, 214, 0.32); background: var(--violet-voile); }
.tag-nombre { color: var(--rose-clair); }

/* --- Liens ---------------------------------------------------------------- */

.footer-liens a:hover,
.blog-lien,
.lien-discret,
.cat-titre-lien:hover,
.rangee-tout,
.h3boutonvoirtous { color: var(--rose-clair); }

/* --- Boutons hérités ------------------------------------------------------ */

.bouton-abonne,
.cat-vide-btn,
.page-tags-btn,
.vente-entete-btn,
.chat-link,
.form-section button[type="submit"],
.commentaire-form button,
.chat-form button {
  background: var(--degrade-marque);
  border: none;
  color: #fff;
}

.bouton-abonne:hover,
.cat-vide-btn:hover,
.page-tags-btn:hover,
.vente-entete-btn:hover,
.chat-link:hover,
.form-section button[type="submit"]:hover,
.commentaire-form button:hover,
.chat-form button:hover { background: var(--degrade-marque-survol); }

.bouton--neutre,
.btn-login {
  border: 1px solid var(--bord-fort);
  background: rgba(246, 240, 245, 0.04);
  color: var(--texte);
}

.bouton--neutre:hover,
.btn-login:hover { border-color: rgba(232, 51, 109, 0.5); background: var(--rose-voile); }

/* --- Titres de rangée des catégories -------------------------------------- */

.h3themevideo {
  position: relative;
  padding-left: 16px;
}

.h3themevideo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: 999px;
  background: var(--degrade-marque);
}

.categorie:nth-of-type(even) .h3themevideo::before {
  background: linear-gradient(180deg, #f0c063, #e0a33c);
}

.cat-titre-compte {
  background: var(--rose-voile);
  color: var(--rose-clair);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
}

/* --- Étiquettes d'état ---------------------------------------------------- */

.etiquette--actif   { background: rgba(46, 160, 87, 0.2);  color: #74e0a0; }
.etiquette--inactif { background: rgba(246, 240, 245, 0.08); color: var(--texte-doux); }
.etiquette--attente { background: var(--or-voile); color: #f0c063; }

/* --- Espace membre -------------------------------------------------------- */

.avis--attention {
  border: 1px solid rgba(224, 163, 60, 0.4);
  background: var(--or-voile);
  border-radius: var(--r-md, 12px);
  padding: var(--e-4, 16px);
}

.compte-video { border-radius: var(--r-md, 12px); overflow: hidden; background: var(--fond-2); }
.factures li { border-bottom: 1px solid var(--bord); }
.montant { color: var(--rose-clair); font-weight: 600; }

.chat-message--user { background: var(--degrade-marque); }
.chat-message--admin { background: var(--fond-2); }

/* --- Pages légales -------------------------------------------------------- */

/* Elles n'avaient que du texte gris sur noir sur des écrans entiers. */
.wrap .card,
.block {
  border: 1px solid var(--bord);
  border-radius: var(--r-md, 12px);
  background: rgba(24, 19, 26, 0.55);
  padding: var(--e-4, 16px) var(--e-5, 24px);
  margin-bottom: var(--e-4, 16px);
}

.wrap h2,
.block h2 { color: var(--rose-clair); }
.wrap a, .block a { color: var(--rose-clair); }

/* --- Back-office ---------------------------------------------------------- */

/* Le back-office restait entièrement gris : la couleur y sert de repère entre
   les sections, pas de décoration. */
.admin { background-color: var(--fond-0); }

.admin-barre {
  background: linear-gradient(180deg, rgba(232, 51, 109, 0.07), transparent 40%), var(--fond-1);
  border-right: 1px solid var(--bord);
}

.admin-menu a[aria-current="page"] {
  background: var(--rose-voile);
  color: #fff;
  border-left: 3px solid var(--rose);
}

.admin-barre-entete .role { color: var(--rose-clair); }
.carte-chiffre { background: var(--fond-1); border-color: var(--bord); }
.carte-chiffre--accent {
  background: linear-gradient(135deg, rgba(232, 51, 109, 0.16), rgba(139, 63, 214, 0.12)), var(--fond-1);
  border-color: rgba(232, 51, 109, 0.4);
}
.carte-chiffre .valeur { color: var(--texte); }
.admin-tableau thead th { color: var(--texte-doux); border-bottom: 1px solid var(--bord); }
.admin-message--succes { background: rgba(46, 160, 87, 0.16); border: 1px solid rgba(46, 160, 87, 0.35); }
.admin-message--erreur { background: rgba(214, 40, 60, 0.16); border: 1px solid rgba(214, 40, 60, 0.4); }
.admin-message--info   { background: var(--or-voile); border: 1px solid rgba(224, 163, 60, 0.35); }
.histo .barre { background: var(--degrade-marque); }