/* Nations'ONU - Style principal */
/* Inspiré du style newspaper avec palette crème/papier et encre foncée */

/* Variables CSS personnalisées */
:root {
    --radius: 0.5rem;
    
    /* Newspaper palette: cream paper + deep ink */
    --paper: oklch(0.965 0.02 85);
    --ink: oklch(0.18 0.02 60);
    --sepia: oklch(0.55 0.08 55);
    
    --background: oklch(0.965 0.02 85);
    --foreground: oklch(0.18 0.02 60);
    --card: oklch(0.98 0.015 85);
    --card-foreground: oklch(0.18 0.02 60);
    --popover: oklch(0.98 0.015 85);
    --popover-foreground: oklch(0.18 0.02 60);
    --primary: oklch(0.18 0.02 60);
    --primary-foreground: oklch(0.965 0.02 85);
    --secondary: oklch(0.92 0.025 80);
    --secondary-foreground: oklch(0.18 0.02 60);
    --muted: oklch(0.93 0.02 82);
    --muted-foreground: oklch(0.45 0.03 65);
    --accent: oklch(0.68 0.16 40);
    --accent-foreground: oklch(0.98 0.015 85);
    --destructive: oklch(0.55 0.22 27);
    --destructive-foreground: oklch(0.98 0.015 85);
    --border: oklch(0.85 0.025 75);
    --input: oklch(0.88 0.02 78);
    --ring: oklch(0.68 0.16 40);
    
    /* Polices */
    --font-serif: "Playfair Display", "Times New Roman", serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    
    /* Calculs pour les radius */
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
}

/* Reset de base */
* {
    border-color: var(--color-border, var(--border));
}

body {
    background-color: var(--color-background, var(--background));
    color: var(--color-foreground, var(--foreground));
    font-family: var(--font-sans);
    background-image: 
        radial-gradient(oklch(0.85 0.03 75 / 0.15) 1px, transparent 1px);
    background-size: 4px 4px;
}

/* Typography */
h1, h2, h3, h4, .font-serif {
    font-family: var(--font-serif);
    letter-spacing: -0.01em;
}

/* Utility classes - Masthead */
.masthead {
    font-family: var(--font-serif);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
}

/* Utility classes - Paper card */
.paper-card {
    background-color: var(--color-card, var(--card));
    border: 1px solid var(--color-border, var(--border));
    box-shadow: 0 1px 0 var(--color-border, var(--border)), 
                0 8px 24px -12px oklch(0.18 0.02 60 / 0.15);
}

/* Utility classes - Ink button */
.ink-btn {
    background-color: var(--color-primary, var(--ink));
    color: var(--color-primary-foreground, var(--paper));
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: opacity 0.15s;
}

.ink-btn:hover {
    opacity: 0.85;
}

/* Style pour les cartes de recaps */
.recap-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.recap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Style pour les images des recaps */
.recap-image {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--paper);
}

/* Style pour les badges de rôle */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge-admin {
    background-color: oklch(0.55 0.22 27);
    color: var(--paper);
}

.badge-manager {
    background-color: oklch(0.68 0.16 40);
    color: var(--paper);
}

.badge-journalist {
    background-color: oklch(0.55 0.08 55);
    color: var(--paper);
}

/* Style pour la barre de navigation */
.navbar {
    background: linear-gradient(to bottom, 
        oklch(0.98 0.015 85) 0%, 
        oklch(0.965 0.02 85) 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Style pour le footer */
.footer {
    background-color: var(--card);
    border-top: 1px solid var(--border);
}

/* Style pour les boutons secondaires */
.secondary-btn {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: background-color 0.15s;
    border: 1px solid var(--border);
}

.secondary-btn:hover {
    background-color: oklch(0.90 0.03 80);
}

/* Style pour les liens */
a {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.15s;
}

a:hover {
    color: oklch(0.55 0.16 40);
}

/* Style pour les tableaux */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    background-color: var(--muted);
    font-weight: 600;
    color: var(--muted-foreground);
}

tr:hover {
    background-color: var(--paper);
}

/* Style pour les formulaires */
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--input);
    color: var(--foreground);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(174, 134, 82, 0.2);
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

/* Style pour les cartes d'information */
.info-card {
    background-color: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

/* Animation pour les messages flash */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.flash-message {
    animation: slideIn 0.3s ease-out;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .masthead {
        font-size: 2rem;
    }
    
    .recap-card {
        box-shadow: none;
    }
}

/* Responsive - Tablette */
@media (min-width: 769px) and (max-width: 1024px) {
    .masthead {
        font-size: 3rem;
    }
}

/* Responsive - Desktop */
@media (min-width: 1025px) {
    .masthead {
        font-size: 4rem;
    }
}