/*
Theme Name: C66
Theme URI: https://collectif66.fr
Author: Thomas
Author URI: https://collectif66.fr
Description: Thème dark pour collectifs (conçu pour le Collectif 66). Conçu pour fonctionner avec Elementor et le plugin WP Drive Gallery. Galerie d'événements avec filtres, overlay FLIP animation, design minimal sombre.
Version: 1.8.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: collectif66
Tags: dark, custom-menu, custom-logo, featured-images, elementor, full-width-template
*/

/* ============================================================
   Reset / base
   ============================================================ */

:root {
    /* Couleurs : palette globale écrite par inc/palette.php (Apparence → Personnaliser → Couleurs du site),
       <style id="c66-palette"> en tête de <head>. Ne pas les redéfinir ici. */
    --c66-radius:    8px;
    --c66-radius-sm: 4px;
    --c66-header-h:  64px;
    --c66-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* Base color lives on body::before so the radial gradient (also there) is
       not hidden behind a solid body background. */
    background: transparent;
    color: var(--c66-text);
    font-family: var(--c66-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html { background: var(--c66-bg); }

/* Ambient animated purple gradient — three radial blobs whose positions are
   updated via CSS custom properties from JS (scroll + time). mix-blend-mode:
   screen brightens the colors against the dark html background instead of
   compositing onto a solid black, so the blobs read clearly. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 70% 55% at var(--c66-bg-x1, 25%) var(--c66-bg-y1, 30%), color-mix(in srgb, var(--c66-blob1) 85%, transparent), transparent 60%),
        radial-gradient(ellipse 65% 50% at var(--c66-bg-x2, 75%) var(--c66-bg-y2, 60%), color-mix(in srgb, var(--c66-blob2) 55%, transparent), transparent 60%),
        radial-gradient(ellipse 80% 65% at var(--c66-bg-x3, 50%) var(--c66-bg-y3, 90%), color-mix(in srgb, var(--c66-blob3) 75%, transparent), transparent 65%);
    mix-blend-mode: screen;
}

/* Fond animé (1.5.1) : calque .c66-bgfx ajouté par theme.js (body::before reste le repli sans
   JavaScript). Chaque tache = un dégradé peint une fois, centrée sur la position de départ de
   body::before ; theme.js ne fait que la déplacer (transform), 10 fois par seconde. */
html.c66-bgfx-on body::before { display: none; }
html.c66i-fond .c66-bgfx { display: none; } /* intro c66-intro « galaxie en fond » */
.c66-bgfx {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
}
.c66-bgfx i { position: absolute; display: block; mix-blend-mode: screen; will-change: transform; }
/* tache 1 : centre 25 % / 30 %, rayons 70 vw × 55 vh */
.c66-bgfx-1 { left: -45vw; top: -25vh; width: 140vw; height: 110vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--c66-blob1) 85%, transparent), transparent 60%); }
/* tache 2 : centre 75 % / 60 %, rayons 65 vw × 50 vh */
.c66-bgfx-2 { left: 10vw; top: 10vh; width: 130vw; height: 100vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--c66-blob2) 55%, transparent), transparent 60%); }
/* tache 3 : centre 50 % / 90 %, rayons 80 vw × 65 vh */
.c66-bgfx-3 { left: -30vw; top: 25vh; width: 160vw; height: 130vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--c66-blob3) 75%, transparent), transparent 65%); }

@media (prefers-reduced-motion: reduce) {
    body::before {
        background-image:
            radial-gradient(ellipse at 30% 25%, color-mix(in srgb, var(--c66-blob1) 70%, transparent), transparent 60%),
            radial-gradient(ellipse at 70% 75%, color-mix(in srgb, var(--c66-blob3) 65%, transparent), transparent 65%);
    }
}

img, picture, svg, video { display: block; max-width: 100%; }

a {
    color: var(--c66-text);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--c66-accent); }

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    letter-spacing: 0.04em;
    margin: 0 0 .5em;
    color: var(--c66-text);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 200; text-transform: uppercase; letter-spacing: 0.06em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 400; }

p { margin: 0 0 1em; }

button {
    font-family: inherit;
    cursor: pointer;
}

::selection { background: var(--c66-accent); color: var(--c66-accent-fg); }

/* ============================================================
   Header
   ============================================================ */

.c66-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--c66-header-h);
    background: color-mix(in srgb, var(--c66-bg) 85%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c66-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
}

.c66-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--c66-text);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.95rem;
}
.c66-header-logo img {
    height: 38px;
    width: auto;
    display: block;
}
.c66-header-logo .c66-sitename { line-height: 1; }

.c66-header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.c66-header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}
.c66-header-nav a {
    padding: 8px 14px;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--c66-text) 82%, var(--c66-bg));
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.c66-header-nav a:hover,
.c66-header-nav .current-menu-item > a,
.c66-header-nav .current_page_item > a {
    color: var(--c66-accent);
    background: color-mix(in srgb, var(--c66-accent) 8%, transparent);
}

/* --- Sous-menus (dropdown desktop) --- */
.c66-header-nav li { position: relative; }

.c66-header-nav .menu-item-has-children > a { padding-right: 28px; }
.c66-header-nav .menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .7;
}

.c66-header-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    margin-top: 6px;
    background: color-mix(in srgb, var(--c66-bg-elev) 97%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--c66-border);
    border-radius: var(--c66-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 10;
}
.c66-header-nav li:hover > .sub-menu,
.c66-header-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.c66-header-nav .sub-menu a {
    display: block;
    white-space: nowrap;
    font-size: 0.78rem;
}
.c66-header-nav .sub-menu .sub-menu {
    top: -7px;
    left: 100%;
    margin: 0 0 0 4px;
}

/* Dernier item : dropdown aligné à droite pour ne pas déborder */
.c66-header-nav > ul > li:last-child > .sub-menu { left: auto; right: 0; }

/* Bouton d'ouverture des sous-menus — mobile uniquement */
.c66-sub-toggle { display: none; }

.c66-burger {
    display: none;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;
    color: var(--c66-text);
    align-items: center;
    justify-content: center;
}
.c66-burger svg { width: 22px; height: 22px; stroke: currentColor; }

@media (max-width: 760px) {
    .c66-header { padding: 0 16px; gap: 12px; }
    .c66-header-logo .c66-sitename { font-size: 0.85rem; }
    .c66-header-logo img { height: 32px; }
    .c66-burger { display: flex; }
    .c66-header-nav {
        /* Positioned relative to the sticky .c66-header — no admin-bar math needed */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        background: color-mix(in srgb, var(--c66-bg) 98%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--c66-border);
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        overflow-y: auto;
        transition: max-height .3s ease;
    }
    .c66-header-nav.is-open { max-height: 80vh; }
    .c66-header-nav ul {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        padding: 14px 16px;
    }
    .c66-header-nav li { margin: 0; }
    .c66-header-nav a {
        display: block;
        padding: 13px 16px;
        font-size: 1rem;
        text-align: center;
        border-radius: var(--c66-radius);
        border-bottom: 0;
    }

    /* Sous-menus : accordéon inline, plus de dropdown absolu */
    .c66-header-nav .menu-item-has-children > a { padding-right: 16px; padding-left: 16px; }
    .c66-header-nav .menu-item-has-children > a::after { content: none; }
    /* Espaceur gauche = largeur du chevron -> le libelle reste centre dans le li */
    .c66-header-nav li.menu-item-has-children::before {
        content: '';
        flex: 0 0 46px;
        order: -1;
    }

    /* Le parent devient une rangee flex : lien + chevron cote a cote,
       le sous-menu passe a la ligne. Le chevron reste donc colle a SA
       categorie meme quand le sous-menu est deplie. */
    .c66-header-nav li.menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .c66-header-nav li.menu-item-has-children > a { flex: 1 1 auto; }
    .c66-header-nav li.menu-item-has-children > .sub-menu { flex: 0 0 100%; }

    .c66-sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        flex: 0 0 46px;
        width: 46px;
        height: auto;
        align-self: stretch;
        padding: 0;
        background: transparent;
        border: 0;
        color: color-mix(in srgb, var(--c66-text) 82%, var(--c66-bg));
        cursor: pointer;
    }
    .c66-sub-toggle svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }
    .c66-header-nav li.is-open > .c66-sub-toggle { color: var(--c66-accent); }
    .c66-header-nav li.is-open > .c66-sub-toggle svg { transform: rotate(180deg); }

    .c66-header-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height .25s ease;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        gap: 6px;
    }
    .c66-header-nav li.is-open > .sub-menu {
        max-height: 1200px;
        padding: 8px 0 2px;
    }
    .c66-header-nav .sub-menu a {
        font-size: 0.88rem;
        padding: 11px 16px;
        color: var(--c66-muted);
        background: rgba(255, 255, 255, 0.03);
        white-space: normal;
    }
    .c66-header-nav .sub-menu a:hover,
    .c66-header-nav .sub-menu .current-menu-item > a {
        color: var(--c66-accent);
        background: color-mix(in srgb, var(--c66-accent) 10%, transparent);
    }
}

/* ============================================================
   Main content
   ============================================================ */

.c66-main { min-height: 60vh; }

.c66-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px;
}

.c66-page-title {
    text-align: center;
    margin: 24px 0 32px;
}
/* Titre de page gras en capitales, comme les titres de /links et de la page Événements (1.4.1). */
.c66-page-title h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.95;
    text-wrap: balance;
}

/* When page uses Elementor — let Elementor control width entirely */
.c66-main.is-elementor > .c66-container { padding: 0; max-width: none; }

/* WordPress generated content (blog posts, default pages without Elementor) */
.c66-prose {
    max-width: 760px;
    margin: 0 auto;
}
/* Contenu pleine largeur (ex. page Événements [c66_events]) : un bloc marqué .c66-wide élargit la colonne. */
.c66-prose:has(.c66-wide) { max-width: none; }
.c66-prose img { border-radius: var(--c66-radius-sm); margin: 1em 0; }
.c66-prose a { color: var(--c66-accent); text-decoration: underline; text-underline-offset: 3px; }
.c66-prose blockquote {
    border-left: 2px solid var(--c66-accent);
    padding-left: 16px;
    color: var(--c66-muted);
    margin: 1.5em 0;
    font-style: italic;
}
.c66-prose code {
    background: var(--c66-bg-elev);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* ============================================================
   Footer
   ============================================================ */

.c66-footer {
    border-top: 1px solid var(--c66-border);
    padding: 30px 24px;
    text-align: center;
    color: var(--c66-muted);
    font-size: 0.85rem;
    margin-top: 60px;
}
.c66-footer a { color: var(--c66-muted); }
.c66-footer a:hover { color: var(--c66-accent); }
.c66-footer-row {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* ============================================================
   404 / empty
   ============================================================ */

.c66-empty {
    text-align: center;
    padding: 100px 20px;
}
.c66-empty h1 {
    font-size: 6rem;
    color: var(--c66-accent);
    margin: 0;
    font-weight: 200;
    line-height: 1;
}
.c66-empty p { color: var(--c66-muted); margin-top: 12px; }

/* ============================================================
   Login screen tweaks (optional, harmless if user keeps default)
   ============================================================ */

body.login {
    background: var(--c66-bg) !important;
}