/* ==========================================================================
   design-system.css — socle visuel commun
   --------------------------------------------------------------------------
   Chargé EN DERNIER dans partials/head.php : il reprend la main sur les
   anciennes feuilles sans qu'il faille les réécrire d'un bloc.

   Intention : sortir du look « plateforme vidéo générique » (fond noir plat,
   grille dense de vignettes, badges criards) pour aller vers quelque chose de
   plus éditorial et personnel — c'est le site d'UNE créatrice, pas un annuaire.

   Trois décisions structurantes :
   1. Un seul rose. Le site en comptait dix (#ff3399, #f5068c, #e60073,
      #d500ff, #ff69b4…) plus un violet, d'où l'impression de bric-à-brac.
   2. Un noir chaud plutôt que le gris-noir #111, qui fait « thème sombre par
      défaut ». Les surfaces montent par paliers au lieu d'être toutes noires.
   3. Un display à empattements pour les titres. C'est ce qui différencie le
      plus : aucun site de tube n'utilise de serif.
   ========================================================================== */

:root {
    /* --- Fonds, du plus profond au plus clair --- */
    --fond-0:        #0D0B0C;   /* fond de page */
    --fond-1:        #161315;   /* cartes, barres */
    --fond-2:        #211C1F;   /* survol, champs */
    --fond-3:        #2E282B;   /* bordures pleines */

    /* --- Texte --- */
    --texte:         #F5F0F2;
    --texte-doux:    #B3A8AD;   /* secondaire, méta */
    --texte-faible:  #7C7176;   /* désactivé */

    /* --- Accent unique --- */
    --rose:          #E8336D;
    --rose-clair:    #FF5C8D;   /* survol */
    --rose-sombre:   #B31F4F;   /* pressé */
    --rose-voile:    rgba(232, 51, 109, 0.14);  /* fonds teintés */

    /* --- Accent secondaire, réservé aux mises en avant éditoriales --- */
    --or:            #E0A33C;
    --or-voile:      rgba(224, 163, 60, 0.14);

    /* --- Bordures --- */
    --bord:          rgba(245, 240, 242, 0.10);
    --bord-fort:     rgba(245, 240, 242, 0.18);

    /* --- Typographie --- */
    --police-titre:  'Fraunces', Georgia, 'Times New Roman', serif;
    --police-texte:  'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

    /* Échelle typographique (ratio 1.25) */
    --t-xs:   0.75rem;    /* 12px — badges, méta */
    --t-sm:   0.875rem;   /* 14px — texte secondaire */
    --t-base: 1rem;       /* 16px — corps */
    --t-md:   1.125rem;   /* 18px */
    --t-lg:   1.375rem;   /* 22px — titre de carte */
    --t-xl:   1.875rem;   /* 30px — titre de section */
    --t-2xl:  2.5rem;     /* 40px */
    --t-3xl:  3.5rem;     /* 56px — héro */

    /* --- Espacements (base 4px) --- */
    --e-1: 0.25rem;   --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;    --e-6: 2rem;     --e-8: 3rem;     --e-10: 4rem;
    --e-12: 6rem;

    /* --- Rayons : trois valeurs, pas huit --- */
    --r-sm:   6px;    /* badges, petits boutons */
    --r-md:   12px;   /* cartes, champs */
    --r-lg:   20px;   /* panneaux, modales */
    --r-plein: 999px; /* pastilles */

    /* --- Ombres --- */
    --ombre-1: 0 1px 3px rgba(0,0,0,.4);
    --ombre-2: 0 6px 24px rgba(0,0,0,.45);
    --ombre-3: 0 18px 48px rgba(0,0,0,.55);

    /* --- Mouvement --- */
    --transition: 180ms cubic-bezier(.4, 0, .2, 1);

    /* --- Largeur de lecture ---
       Avant : 1320px. Sur un écran large (1920px et plus), la grille de
       vidéos restait plafonnée à 3 colonnes quelle que soit la place
       disponible — tout l'espace au-delà de 1320px ne servait à rien. */
    --largeur-max: 1680px;
}

/* --------------------------------------------------------------------------
   Réglages de base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--fond-0);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--texte);
}

h1 { font-size: clamp(var(--t-2xl), 5vw, var(--t-3xl)); }
h2 { font-size: clamp(var(--t-xl), 3.5vw, var(--t-2xl)); }
h3 { font-size: var(--t-lg); }

a { color: var(--rose); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--rose-clair); }

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

/* Accessibilité : un anneau de focus visible, il n'y en avait aucun.
   Sans ça, le site est inutilisable au clavier. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--rose-clair);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* Respect des préférences système : certains utilisateurs sont gênés par les
   animations (vertiges, troubles vestibulaires). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Conteneur
   -------------------------------------------------------------------------- */

.ds-conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--e-5);
}

@media (max-width: 640px) {
    .ds-conteneur { padding-inline: var(--e-4); }
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-5);
    border: 1px solid transparent;
    border-radius: var(--r-plein);
    font-family: var(--police-texte);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition);
    /* Cible tactile confortable (44px recommandés) */
    min-height: 44px;
}

.ds-btn--primaire {
    background: var(--rose);
    color: #fff;
}
.ds-btn--primaire:hover { background: var(--rose-clair); color: #fff; }
.ds-btn--primaire:active { background: var(--rose-sombre); transform: translateY(1px); }

.ds-btn--fantome {
    background: transparent;
    border-color: var(--bord-fort);
    color: var(--texte);
}
.ds-btn--fantome:hover { background: var(--fond-2); border-color: var(--rose); color: var(--texte); }

/* Action secondaire, volontairement discrète : sert aux sorties de parcours
   (« je n'ai pas 18 ans », « annuler »), qui ne doivent jamais attirer l'œil
   plus que l'action principale. */
.ds-btn--discret {
    background: transparent;
    color: var(--texte-doux);
    padding-inline: var(--e-3);
}
.ds-btn--discret:hover { color: var(--texte); background: var(--fond-2); }

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: var(--e-1) var(--e-2);
    border-radius: var(--r-sm);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.4;
    backdrop-filter: blur(8px);
}

.ds-badge--premium   { background: var(--or-voile);   color: var(--or);   border: 1px solid rgba(224,163,60,.35); }
.ds-badge--exclusif  { background: var(--rose-voile); color: var(--rose-clair); border: 1px solid rgba(232,51,109,.4); }
.ds-badge--neutre    { background: rgba(13,11,12,.72); color: var(--texte); border: 1px solid var(--bord); }

/* --------------------------------------------------------------------------
   Titres de section
   -------------------------------------------------------------------------- */

.ds-section-titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-4);
    margin: var(--e-10) 0 var(--e-5);
}

.ds-section-titre h2 { margin: 0; }

.ds-section-titre .ds-section-lien {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texte-doux);
    white-space: nowrap;
}
.ds-section-titre .ds-section-lien:hover { color: var(--rose-clair); }