/*
 🖋️ SYSTÈME DE TYPOGRAPHIE - FMX 2025
 Styles pour les polices, titres, paragraphes et classes typographiques
 Dépend de: style.css (variables)
*/

/* ====================================
   DÉFINITION DES POLICES
==================================== */

/* Police scripturale Bayshore */
@font-face {
  font-family: 'Bayshore';
  src: url('../Bayshore.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2010-206F, U+20A0-20CF, U+2100-214F;
}

/* Styles de base du body restent dans style.css pour éviter les doublons */

/* Liens avec design moderne et subtil */
a {
    color: var(--primary);
    text-decoration: none;
    position: relative;
    transition: var(--transition-colors);
    font-weight: var(--font-weight-medium);
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width 0.3s var(--ease-in-out);
}

a:hover::after {
    width: 100%;
}

a:hover {
    color: var(--primary);
    transform: translateY(-1px);
}

a:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Liens dans le contenu avec style raffiné */
.content-area a,
.article-content a,
.widget a:not(.btn) {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(79, 172, 254, 0.08) 50%, 
        transparent 100%
    );
    background-size: 0% 100%;
    background-repeat: no-repeat;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: var(--transition-all);
}

.content-area a:hover,
.article-content a:hover,
.widget a:not(.btn):hover {
    background-size: 100% 100%;
    color: var(--text-primary);
}

/* Listes - Exclusion des menus de navigation */
ul:not(.menu):not(#primary-menu):not(.nav-wrapper ul), 
ol:not(.menu):not(#primary-menu):not(.nav-wrapper ol) {
    margin: var(--spacing-lg) 0;
    padding-left: 0;
    list-style: none;
}

ul:not(.menu):not(#primary-menu):not(.nav-wrapper ul) li:not(.menu-item), 
ol:not(.menu):not(#primary-menu):not(.nav-wrapper ol) li:not(.menu-item) {
    position: relative;
    padding: var(--spacing-sm) 0 var(--spacing-sm) 2rem;
    margin: var(--spacing-sm) 0;
    transition: all 0.3s ease;
}

/* Puces personnalisées modernes pour les listes non ordonnées (hors navigation) */
ul:not(.menu):not(#primary-menu):not(.nav-wrapper ul) li:not(.menu-item)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--gradient-primary);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
}

/* Numérotation pour les listes ordonnées (hors navigation) */
ol:not(.menu):not(#primary-menu):not(.nav-wrapper ol) {
    counter-reset: elegant-counter;
}

ol:not(.menu):not(#primary-menu):not(.nav-wrapper ol) li:not(.menu-item) {
    counter-increment: elegant-counter;
}

ol:not(.menu):not(#primary-menu):not(.nav-wrapper ol) li:not(.menu-item)::before {
    content: counter(elegant-counter);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

/* Hover sur les éléments de liste (hors navigation) */
ul:not(.menu):not(#primary-menu):not(.nav-wrapper ul) li:not(.menu-item):hover,
ol:not(.menu):not(#primary-menu):not(.nav-wrapper ol) li:not(.menu-item):hover {
    transform: translateX(5px);
    color: var(--text-primary);
}

ul:not(.menu):not(#primary-menu):not(.nav-wrapper ul) li:not(.menu-item):hover::before {
    box-shadow: 0 0 15px rgba(255, 25, 131, 0.5);
    transform: translateY(-50%) scale(1.2);
}

ol:not(.menu):not(#primary-menu):not(.nav-wrapper ol) li:not(.menu-item):hover::before {
    box-shadow: 0 4px 15px rgba(255, 25, 131, 0.4);
    transform: translateY(-50%) scale(1.1);
}

/* Listes imbriquées (hors navigation) */
ul:not(.menu):not(#primary-menu) ul:not(.menu), 
ol:not(.menu):not(#primary-menu) ol:not(.menu), 
ul:not(.menu):not(#primary-menu) ol:not(.menu), 
ol:not(.menu):not(#primary-menu) ul:not(.menu) {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

ul:not(.menu):not(#primary-menu) ul:not(.menu) li:not(.menu-item)::before,
ol:not(.menu):not(#primary-menu) ul:not(.menu) li:not(.menu-item)::before {
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, var(--accent-color), rgba(255, 25, 131, 0.7));
}

ol:not(.menu):not(#primary-menu) ol:not(.menu) li:not(.menu-item)::before,
ul:not(.menu):not(#primary-menu) ol:not(.menu) li:not(.menu-item)::before {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    background: linear-gradient(135deg, var(--accent-color), rgba(255, 25, 131, 0.7));
}

/* ====================================
   POLICE SCRIPTURALE BAYSHORE
==================================== */

/* Classe utilitaire principale */
.font-script {
    font-family: var(--font-script);
}

/* Titres décoratifs avec Bayshore */
.title-script {
    font-family: var(--font-script);
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--primary);
    text-shadow: 0 2px 8px rgba(255, 25, 131, 0.3);
    margin-bottom: var(--spacing-lg);
}

/* Modificateurs de taille pour une hiérarchie cohérente */
.title-script.title-hero {
    font-size: clamp(2.5rem, 8vw, 6rem);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 12px rgba(255, 25, 131, 0.4));
}

.title-script.title-section {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 2px 8px rgba(255, 25, 131, 0.3));
    position: relative;
}

.title-script.title-section::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

.title-script.title-widget {
    font-size: clamp(1.2rem, 3vw, 2rem);
    margin-bottom: var(--spacing-md);
}

/* Phrases d'accroche et citations */
.quote-script {
    font-family: var(--font-script);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    line-height: 1.4;
    color: var(--muted-foreground);
    font-style: italic;
    position: relative;
    padding: var(--spacing-lg) var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.quote-script::before {
    content: '"';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.3;
    line-height: 1;
    font-family: var(--font-script);
}

.quote-script::after {
    content: '"';
    position: absolute;
    bottom: -1rem;
    right: var(--spacing-md);
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.3;
    line-height: 1;
    font-family: var(--font-script);
}

/* Signatures et accents décoratifs */
.signature-script {
    font-family: var(--font-script);
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--primary);
    text-align: right;
    margin-top: var(--spacing-lg);
    position: relative;
}

.signature-script::before {
    content: '— ';
    opacity: 0.7;
}

/* Labels et catégories script */
.label-script {
    font-family: var(--font-script);
    font-size: var(--font-size-sm);
    color: var(--primary);
    background: var(--glass-bg-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-backdrop);
    display: inline-block;
    margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
}

/* Liens avec la police scripturale */
a.link-script {
    font-family: var(--font-script);
    color: var(--primary);
    text-decoration: none;
    position: relative;
    transition: all 0.3s var(--ease-out);
}

a.link-script::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width 0.3s var(--ease-out);
}

a.link-script:hover::after {
    width: 100%;
}

a.link-script:hover {
    color: var(--foreground);
    transform: translateY(-1px);
    text-shadow: 0 2px 8px rgba(255, 25, 131, 0.3);
}

/* ====================================
   RESPONSIVE TYPOGRAPHIE
==================================== */

@media (max-width: 768px) {
    .title-script.title-hero {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }
    
    .quote-script {
        padding: var(--spacing-md);
        font-size: clamp(1rem, 4vw, 1.3rem);
    }
    
    .quote-script::before,
    .quote-script::after {
        font-size: 2.5rem;
    }
}