/* =========================================================================
   static/css/style.css  —  Feuille de style principale
   =========================================================================

   Organisation :
     1. Variables CSS (palette, typographie, espacements)
     2. Reset & base
     3. Header & navigation
     4. Messages flash
     5. Contenu principal / pages
     6. Cartes (articles, événements)
     7. Formulaires
     8. Footer
     9. Utilitaires
    10. Responsive (mobile)
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. VARIABLES CSS
   ------------------------------------------------------------------------- */
:root {
    /* Palette principale — bleu nuit académique */
    --color-primary:      #1a3a5c;
    --color-primary-dark: #112640;
    --color-primary-light:#2a5a8c;
    --color-accent:       #c9a84c;   /* Or vieilli */
    --color-accent-light: #e8c97a;

    /* Neutres */
    --color-bg:           #faf9f6;   /* Blanc cassé parchemin */
    --color-bg-alt:       #f0ede6;
    --color-text:         #2c2c2c;
    --color-text-muted:   #6b6b6b;
    --color-border:       #d9d3c8;

    /* Typographie */
    --font-serif:   'EB Garamond', Georgia, serif;
    --font-sans:    'Source Sans 3', system-ui, sans-serif;

    /* Tailles */
    --nav-height:   58px;
    --radius:       6px;
    --radius-lg:    12px;
    --shadow-sm:    0 2px 8px rgba(26,58,92,.08);
    --shadow-md:    0 4px 20px rgba(26,58,92,.12);
    --shadow-lg:    0 8px 40px rgba(26,58,92,.16);

    /* Transitions */
    --transition:   .2s ease;
}


/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family:     var(--font-sans);
    font-size:       1rem;
    line-height:     1.7;
    color:           var(--color-text);
    background:      var(--color-bg);
    margin:          0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.3;
    color:       var(--color-primary);
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }

a {
    color:           var(--color-primary);
    text-decoration: none;
    transition:      color var(--transition);
}
a:hover { color: var(--color-accent); }

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

p { margin-bottom: 1rem; }

blockquote {
    border-left: 4px solid var(--color-accent);
    padding:     .75rem 1.25rem;
    margin:      1.5rem 0;
    background:  var(--color-bg-alt);
    font-style:  italic;
    border-radius: 0 var(--radius) var(--radius) 0;
}


/* -------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
    background: var(--color-primary);
    position:   sticky;
    top:        0;
    z-index:    1000;
    box-shadow: var(--shadow-md);
}

/* Logo */
.site-logo { gap: .75rem; }

.logo-text {
    display:        flex;
    flex-direction: column;
    line-height:    1.2;
}

.logo-title {
    font-family: var(--font-serif);
    font-size:   1.25rem;
    font-weight: 500;
    color:       #fff;
    letter-spacing: .01em;
}

.logo-subtitle {
    font-size:  .75rem;
    color:      var(--color-accent-light);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Boutons header utilisateur */
.user-nav .btn-outline-primary {
    border-color: rgba(255,255,255,.4);
    color:        #fff;
}
.user-nav .btn-outline-primary:hover,
.user-nav .btn-outline-secondary:hover {
    background: rgba(255,255,255,.15);
    color:      #fff;
}
.user-nav .btn-outline-secondary {
    border-color: rgba(255,255,255,.4);
    color:        rgba(255,255,255,.8);
}
.user-nav .btn-light {
    background: rgba(255,255,255,.15);
    border:     none;
    color:      rgba(255,255,255,.9);
}
.user-nav .text-muted { color: rgba(255,255,255,.6) !important; }

/* Barre de navigation */
.main-nav {
    background:   var(--color-primary-dark);
    border-top:   1px solid rgba(255,255,255,.1);
}

.nav-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    align-items: stretch;
    gap:        0;
}

.nav-item { position: relative; }

.nav-item > .nav-link {
    display:      block;
    padding:      .75rem 1.1rem;
    color:        rgba(255,255,255,.85);
    font-size:    .9rem;
    font-weight:  400;
    white-space:  nowrap;
    transition:   background var(--transition), color var(--transition);
}

.nav-item > .nav-link:hover,
.nav-item > .nav-link.active {
    color:      #fff;
    background: rgba(255,255,255,.1);
}

.nav-item > .nav-link.active {
    border-bottom: 2px solid var(--color-accent);
}

/* Dropdowns */
.dropdown-nav {
    display:    none;
    position:   absolute;
    top:        100%;
    left:       0;
    background: var(--color-primary);
    list-style: none;
    margin:     0;
    padding:    .5rem 0;
    min-width:  220px;
    box-shadow: var(--shadow-lg);
    border-top: 2px solid var(--color-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index:    999;
}

.has-dropdown:hover .dropdown-nav { display: block; }

.dropdown-nav li a {
    display:    block;
    padding:    .5rem 1.25rem;
    color:      rgba(255,255,255,.85);
    font-size:  .875rem;
    transition: background var(--transition), color var(--transition);
}

.dropdown-nav li a:hover {
    background: rgba(255,255,255,.1);
    color:      #fff;
}

/* Bouton mobile */
.nav-toggle {
    display:    none;
    background: none;
    border:     none;
    color:      #fff;
    font-size:  1.5rem;
    padding:    .5rem;
    cursor:     pointer;
}


/* -------------------------------------------------------------------------
   4. MESSAGES FLASH
   ------------------------------------------------------------------------- */
.flash-container {
    padding: .75rem 0 0;
}

.flash-container .alert {
    border-radius: var(--radius);
    border-left:   4px solid transparent;
}
.alert-success { border-left-color: #198754; }
.alert-danger  { border-left-color: #dc3545; }
.alert-warning { border-left-color: #ffc107; }
.alert-info    { border-left-color: #0dcaf0; }


/* -------------------------------------------------------------------------
   5. CONTENU PRINCIPAL
   ------------------------------------------------------------------------- */
.main-content {
    min-height: calc(100vh - var(--nav-height) - 200px);
    padding:    2.5rem 0 4rem;
}

/* Bandeau héro de page */
.page-hero {
    background:    var(--color-primary);
    color:         #fff;
    padding:       3rem 0;
    margin-bottom: 2.5rem;
    position:      relative;
    overflow:      hidden;
}

.page-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page-hero h1 {
    color:       #fff;
    font-family: var(--font-serif);
    font-size:   clamp(1.8rem, 4vw, 2.8rem);
    position:    relative;
}

.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a,
.page-hero .breadcrumb-item.active {
    color: rgba(255,255,255,.7);
    font-size: .875rem;
}
.page-hero .breadcrumb-item a:hover { color: var(--color-accent-light); }
.page-hero .breadcrumb-divider { color: rgba(255,255,255,.4); }

/* Contenu de page riche (CKEditor output) */
.page-content {
    font-family: var(--font-serif);
    font-size:   1.1rem;
    line-height: 1.8;
    max-width:   780px;
}

.page-content h2 { margin-top: 2rem; }
.page-content h3 { margin-top: 1.5rem; color: var(--color-primary-light); }

.page-content img {
    border-radius: var(--radius);
    box-shadow:    var(--shadow-sm);
    margin:        1rem 0;
}

/* Mise en valeur intro */
.intro-block {
    background:    var(--color-bg-alt);
    border-left:   4px solid var(--color-accent);
    padding:       1.5rem 2rem;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin-bottom: 2rem;
}

.intro-block h2,
.intro-block h3,
.intro-block p {
    font-family: var(--font-serif);
    font-size:   1.15rem;
}


/* -------------------------------------------------------------------------
   6. CARTES (articles, événements, photos)
   ------------------------------------------------------------------------- */
.card-article {
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    transform var(--transition), box-shadow var(--transition);
    height:        100%;
    display:       flex;
    flex-direction: column;
}

.card-article:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card-article-img {
    width:          100%;
    height:         200px;
    object-fit:     cover;
}

.card-article-img-placeholder {
    height:         200px;
    background:     linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--color-text-muted);
    font-size:      2rem;
}

.card-article-body {
    padding:   1.25rem;
    flex:      1;
    display:   flex;
    flex-direction: column;
}

.card-article-cat {
    font-size:      .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-accent);
    font-weight:    600;
    margin-bottom:  .5rem;
}

.card-article-title {
    font-family: var(--font-serif);
    font-size:   1.15rem;
    font-weight: 500;
    color:       var(--color-primary);
    margin-bottom: .5rem;
}

.card-article-meta {
    font-size:   .8rem;
    color:       var(--color-text-muted);
    margin-top:  auto;
    padding-top: .75rem;
    border-top:  1px solid var(--color-border);
}

/* Carte événement */
.card-event {
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
    display:       flex;
    gap:           1.5rem;
    align-items:   flex-start;
    transition:    box-shadow var(--transition);
}

.card-event:hover { box-shadow: var(--shadow-sm); }

.event-date-badge {
    background:    var(--color-primary);
    color:         #fff;
    border-radius: var(--radius);
    padding:       .5rem .75rem;
    text-align:    center;
    min-width:     60px;
    flex-shrink:   0;
}

.event-date-badge .day   { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.event-date-badge .month { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }


/* -------------------------------------------------------------------------
   7. FORMULAIRES
   ------------------------------------------------------------------------- */
.form-card {
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       2rem;
    box-shadow:    var(--shadow-sm);
    max-width:     580px;
    margin:        0 auto;
}

.form-label {
    font-weight: 600;
    font-size:   .875rem;
    color:       var(--color-text);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       .6rem .9rem;
    font-size:     .95rem;
    transition:    border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary-light);
    box-shadow:   0 0 0 3px rgba(26,58,92,.12);
    outline:      none;
}

.btn-primary {
    background:    var(--color-primary);
    border-color:  var(--color-primary);
    padding:       .6rem 1.5rem;
    font-weight:   600;
    letter-spacing: .02em;
    border-radius: var(--radius);
    transition:    background var(--transition), transform var(--transition);
}

.btn-primary:hover {
    background:   var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform:    translateY(-1px);
}

.btn-accent {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        var(--color-primary-dark);
    font-weight:  600;
}
.btn-accent:hover {
    background:   var(--color-accent-light);
    border-color: var(--color-accent-light);
    color:        var(--color-primary-dark);
}

/* Zone newsletter homepage */
.newsletter-banner {
    background:    var(--color-primary);
    color:         #fff;
    padding:       3rem 0;
    margin:        3rem 0;
}

.newsletter-banner h2 { color: #fff; }
.newsletter-banner p  { color: rgba(255,255,255,.8); }

.newsletter-banner .form-control {
    background:  rgba(255,255,255,.1);
    border:      1px solid rgba(255,255,255,.3);
    color:       #fff;
}
.newsletter-banner .form-control::placeholder { color: rgba(255,255,255,.5); }
.newsletter-banner .form-control:focus {
    background:  rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.6);
}


/* -------------------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-primary-dark);
    color:      rgba(255,255,255,.75);
    padding:    3rem 0 1.5rem;
    margin-top: 4rem;
}

.footer-title {
    font-family: var(--font-serif);
    color:       #fff;
    font-size:   1rem;
    margin-bottom: 1rem;
}

.footer-address {
    font-style: normal;
    font-size:  .875rem;
    line-height: 1.8;
}

.footer-links {
    list-style: none;
    padding:    0;
    margin:     0;
}

.footer-links li { margin-bottom: .4rem; }

.footer-links a {
    color:      rgba(255,255,255,.65);
    font-size:  .875rem;
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--color-accent-light); }

.footer-text { font-size: .875rem; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size:  .8rem;
    color:      rgba(255,255,255,.4);
}


/* -------------------------------------------------------------------------
   9. UTILITAIRES
   ------------------------------------------------------------------------- */

/* Badge statut */
.badge-statut {
    display:        inline-block;
    padding:        .25em .65em;
    border-radius:  50px;
    font-size:      .75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.badge-paye      { background: #d1fae5; color: #065f46; }
.badge-attente   { background: #fef3c7; color: #92400e; }
.badge-annule    { background: #fee2e2; color: #991b1b; }
.badge-expire    { background: #f3f4f6; color: #6b7280; }

/* Section séparateur */
.section-divider {
    height:      2px;
    background:  linear-gradient(to right, var(--color-accent), transparent);
    border:      none;
    margin:      2.5rem 0;
}

/* Image de galerie */
.gallery-img {
    width:         100%;
    aspect-ratio:  4/3;
    object-fit:    cover;
    border-radius: var(--radius);
    cursor:        pointer;
    transition:    transform var(--transition), box-shadow var(--transition);
}
.gallery-img:hover {
    transform:  scale(1.02);
    box-shadow: var(--shadow-md);
}

/* Pagination */
.pagination .page-link {
    color:        var(--color-primary);
    border-color: var(--color-border);
}
.pagination .page-item.active .page-link {
    background:  var(--color-primary);
    border-color: var(--color-primary);
}


/* -------------------------------------------------------------------------
   10. RESPONSIVE — MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {

    .nav-toggle { display: block; }

    .main-nav .container {
        display:        flex;
        flex-direction: column;
        align-items:    flex-start;
    }

    .nav-list {
        flex-direction: column;
        width:          100%;
        max-height:     0;
        overflow:       hidden;
        transition:     max-height .3s ease;
    }

    .nav-list.open { max-height: 600px; }

    .nav-item > .nav-link { padding: .65rem 1rem; }

    .dropdown-nav {
        position:  static;
        display:   block !important;
        box-shadow: none;
        background: rgba(0,0,0,.2);
        border-top: none;
        border-radius: 0;
        padding:   0;
    }

    .dropdown-nav li a { padding-left: 2rem; }
}

@media (max-width: 575px) {
    .main-content { padding: 1.5rem 0 3rem; }
    .form-card    { padding: 1.25rem; }
    .card-event   { flex-direction: column; gap: 1rem; }
}