/* ============================================
   STYLES COMMUNS - THEME ART DECO
   Chargé sur toutes les pages via l'entrypoint 'app'
   ============================================ */

/* Google Fonts chargé de manière non bloquante dans base.html.twig */

/* Override Bootstrap Icons font-display pour éviter FOIT (Flash of Invisible Text) */
@font-face {
    font-family: "bootstrap-icons";
    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff") format("woff");
    font-display: swap;
}

/* Variables CSS Art Déco - Accessibles globalement */
:root {
    /* Couleurs principales Art Déco */
    --azur-blue: #0077BE;
    --deep-blue: #003A70;
    --ochre: #D4A574;
    --deep-red: #8B1E3F;
    --cream: #F5EFE6;
    --gold: #C9A961;
    --dark-navy: #1A2332;
    --mint: #A7C4BC;

    /* Typographie */
    --font-primary: 'Poppins', 'Futura', sans-serif;
    --font-display: 'Montserrat', 'Gill Sans', sans-serif;

    /* Espacements */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;

    /* Bordures et ombres Art Déco */
    --border-width: 3px;
    --shadow-hard: 8px 8px 0px rgba(0, 0, 0, 0.2);
    --shadow-layered: 4px 4px 0px var(--ochre), 8px 8px 0px var(--azur-blue);
}

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--dark-navy);
    background-color: var(--cream);
    font-weight: 400;
}

/* Typographie Art Déco */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--deep-blue);
    transition: all 0.3s ease;
}

/* Motifs géométriques Art Déco - Utilisables partout */
.deco-border {
    border: var(--border-width) solid var(--dark-navy);
    position: relative;
}

.deco-border::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--gold);
    pointer-events: none;
}

.deco-line {
    height: 4px;
    background: linear-gradient(90deg,
        var(--gold) 0%,
        var(--azur-blue) 25%,
        var(--deep-red) 50%,
        var(--azur-blue) 75%,
        var(--gold) 100%
    );
    margin: var(--spacing-md) 0;
}

/* Buttons Art Déco - Styles de base communs */
.btn {
    display: inline-block;
    padding: 1rem 3rem;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 3px solid currentColor;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-hard);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transition: left 0.3s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background-color: var(--gold);
    color: var(--dark-navy);
    border-color: var(--dark-navy);
}

.btn-primary:hover {
    background-color: var(--ochre);
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px rgba(0,0,0,0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--cream);
    border-color: var(--cream);
}

.btn-secondary:hover {
    background-color: var(--cream);
    color: var(--dark-navy);
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px var(--gold);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 0.5px solid rgba(102, 126, 234, 0.4);
    color: #667eea;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
}

.btn-outline:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline::before {
    display: none;
}

/* Boutons de formulaire de recherche */
.search-form-card .btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    height: fit-content;
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.search-form-card .btn::before {
    display: none;
}

.search-form-card .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.search-form-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.search-form-card .btn-secondary {
    background: white;
    color: #718096;
    border: 0.5px solid rgba(113, 128, 150, 0.3);
}

.search-form-card .btn-secondary:hover {
    background: #f7fafc;
    color: #4a5568;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-form-card .btn-icon-only {
    padding: 0.6rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 38px;
    box-sizing: border-box;
}

.search-form-card .btn-icon-only i {
    position: relative;
    top: 1px;
}

/* Sections communes */
section {
    padding: var(--spacing-xl) 0;
    position: relative;
}

section:nth-child(even) {
    background-color: white;
}

section h2 {
    text-align: center;
    color: var(--dark-navy);
    margin-bottom: var(--spacing-sm);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--deep-red), var(--azur-blue));
}

.section-intro {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
    color: var(--deep-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* Animations communes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Page Header Row - Breadcrumb + Actions (favoris, like) */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1.5rem;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-header-row .breadcrumb {
    padding: 0;
}

.page-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: -0.25rem;
}

/* Responsive de base */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 3rem;
        --spacing-lg: 2rem;
        --spacing-md: 1.5rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }
}