/* ========================================
   DOYA — Composants base globaux

   Ce fichier porte les primitives de composant
   réutilisables à l'échelle du thème :
   - containers
   - badges / labels
   - titres utilitaires
   - descriptions de section
   - notes / mentions meta de section
   ======================================== */

/* ----------------------------------------
   CONTAINERS
   ---------------------------------------- */

.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}
.container--narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ----------------------------------------
   BADGES / LABELS
   ---------------------------------------- */

.badge,
.hero-badge,
.hero-subtitle,
.section-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: var(--blur-sm);
    border-radius: var(--border-radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: var(--border-medium);
    color: var(--white);
    margin-bottom: var(--spacing-lg);
}

.label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--gray-500);
    margin-bottom: var(--spacing-md);
}

.label--line::before {
    content: "";
    width: var(--size-divider);
    height: 1px;
    background: var(--gray-600);
    border-radius: 2px;
}

/* ----------------------------------------
   TITRES
   ---------------------------------------- */

.title-hero,
h1.title-hero {
    font-family: var(--font-display);
    font-size: var(--font-size-hero);
    font-weight: 600;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-title-large);
    color: var(--white);
}

.title-section,
h1.title-section,
h2.title-section {
    font-family: var(--font-display);
    font-size: var(--font-size-title-section);
    font-weight: 600;
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing-title);
    color: var(--white);
    margin-bottom: var(--spacing-md);
}

.title-card,
h3.title-card {
    font-family: var(--font-display);
    font-size: var(--font-size-title-card);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--letter-spacing-title);
    color: var(--white);
    margin: 0;
}

.title-card--lg,
h3.title-card--lg {
    font-family: var(--font-display);
    font-size: var(--font-size-title-card-large);
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
    margin: 0;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-title);
    color: var(--white);
    margin: 0 0 var(--spacing-lg);
}

/* ----------------------------------------
   DESCRIPTIONS DE SECTION
   ---------------------------------------- */

.section-description {
    color: var(--gray-600);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: var(--max-width-section);
    margin: 0 auto;
}

.section-note {
    max-width: var(--max-width-section);
    margin: 0 auto;
    padding-top: var(--spacing-xl);
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--font-size-meta);
    font-weight: 500;
    line-height: var(--line-height-body);
    color: var(--gray-500);
}