/*
Theme Name: Aux frontières du savoir
Theme URI: http://localhost:8888/arriere-cour/ferney-voltaire
Description: Thème enfant sur-mesure pour "Aux frontières du savoir", le journal lycéen du Lycée Ferney-Voltaire. Un design créatif et chaleureux basé sur une alliance de tons mauves/violets et d'accents chauds (ambre coucher de soleil, crème champagne, lin sablé). Cartes d'actualités avec lévitations douces et lettrines prestigieuses.
Author: Thomas (Antigravity AI)
Author URI: https://github.com/google-deepmind
Template: twentytwentythree
Version: 1.2.0
Text Domain: frontieres-savoir
Tags: full-site-editing, one-column, custom-colors, custom-typography, editorial, creative, warm, purple, sunset-accent, school-press
*/

/* ==========================================================================
   Design Éditorial Créatif & Chaleureux - Aux frontières du savoir
   ========================================================================== */

/* 1. Transitions globales fluides */
a,
.wp-block-post-title a,
.wp-block-button__link {
    transition: color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        background-color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.wp-block-post-title {
    font-size: 4rem !important;
}

/* 2. Doubles bordures d'en-tête (en couleur sable lin chaleureux) */
.journal-double-border {
    border-top: 3px double var(--wp--preset--color--borders) !important;
    border-bottom: 3px double var(--wp--preset--color--borders) !important;
    padding: 12px 0;
    margin-top: 16px;
    margin-bottom: 24px;
    width: 100%;
}

.journal-top-bar {
    font-family: var(--wp--preset--font-family--system-font);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wp--preset--color--secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 3. Lettrine de Presse Mauve & Ombre Champagne (Drop Cap) */
.single-post-content p:first-of-type::first-letter,
.wp-block-post-content p:first-of-type::first-letter,
.has-drop-cap:not(:focus)::first-letter {
    font-family: "Source Serif Pro", Georgia, serif !important;
    font-size: 4.8rem !important;
    line-height: 0.82 !important;
    float: left !important;
    margin: 0.08em 0.12em 0 0 !important;
    color: var(--wp--preset--color--primary) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-shadow: 3px 3px 0px #FFEEDD;
    /* Ombre pêche/or clair pour la chaleur */
}

/* 4. Encadré pédagogique du Lycée en bas de page */
.lycee-signature-box {
    border: 1px solid var(--wp--preset--color--borders);
    background-color: white;
    padding: 32px;
    margin-top: 56px;
    margin-bottom: 48px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(217, 119, 6, 0.05);
    /* Ombre chaude ambrée */
}

.lycee-signature-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent-warm) 100%);
}

.lycee-signature-tag {
    font-family: var(--wp--preset--font-family--system-font);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wp--preset--color--accent-warm);
    margin-bottom: 12px;
    display: inline-block;
}

/* 5. Badges de Catégories (dans l'article et sur les cartes) */
.journal-post-category a {
    font-family: var(--wp--preset--font-family--system-font) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    text-decoration: none !important;
    background-color: var(--wp--preset--color--tertiary) !important;
    border: 1px solid rgba(217, 119, 6, 0.1) !important;
    padding: 6px 14px !important;
    border-radius: 100px !important;
    display: inline-block !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.journal-post-category a:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: white !important;
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Métadonnées de l'article (sans date de parution) */
.journal-post-meta {
    font-family: var(--wp--preset--font-family--system-font);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--secondary);
    border-bottom: 1px solid var(--wp--preset--color--borders);
    padding-bottom: 16px;
    margin-bottom: 32px;
}

/* 6. Bloc de Citation (Blockquote) stylisé en tons chauds et vaporeux */
blockquote.wp-block-quote,
.wp-block-quote {
    border-left: 4px solid var(--wp--preset--color--accent-warm) !important;
    font-family: "Source Serif Pro", Georgia, serif !important;
    font-style: italic;
    font-size: 1.3rem !important;
    line-height: 1.65;
    color: var(--wp--preset--color--contrast) !important;
    margin: 40px 0 !important;
    background-color: var(--wp--preset--color--tertiary);
    padding: 24px 24px 24px 32px !important;
    border-radius: 0 16px 16px 0;
    box-shadow: inset 3px 0 0 rgba(217, 119, 6, 0.05);
}

blockquote.wp-block-quote cite,
.wp-block-quote cite {
    font-family: var(--wp--preset--font-family--system-font);
    font-style: normal;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--accent-warm);
    display: block;
    margin-top: 12px;
    font-weight: 700;
}

/* ==========================================================================
   Grille de Cartes Élégantes - home.html
   ========================================================================== */

@media (min-width: 782px) {

    /* Grille de cartes générale (3 colonnes sur desktop) */
    ul.wp-block-post-template {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Tablette (2 colonnes) */
    @media (max-width: 1024px) {
        ul.wp-block-post-template {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
}

/* Structure unitaire de la Carte Élégante et chaleureuse */
ul.wp-block-post-template>li {
    background-color: #ffffff !important;
    border: 1px solid var(--wp--preset--color--borders) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    /* Ombre combinée ambrée/violette (Twilight Glow) */
    box-shadow: 0 10px 30px -10px rgba(217, 119, 6, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    margin-top: 0;
}

/* Effet de lévitation interactive et réchauffement au survol */
ul.wp-block-post-template>li:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px -15px rgba(217, 119, 6, 0.1),
        0 4px 12px -2px rgba(109, 40, 217, 0.04) !important;
    border-color: var(--wp--preset--color--accent-warm) !important;
    /* Bordure s'allume en ambre */
}

/* Image à la une rognée et étirée au sommet de la carte */
ul.wp-block-post-template>li .wp-block-post-featured-image {
    margin: -24px -24px 20px -24px !important;
    border-radius: 15px 15px 0 0 !important;
    overflow: hidden !important;
    height: 200px !important;
    background-color: var(--wp--preset--color--tertiary);
}

ul.wp-block-post-template>li .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Zoom de l'image au survol */
ul.wp-block-post-template>li:hover .wp-block-post-featured-image img {
    transform: scale(1.06) !important;
}

/* Contenu interne de la carte */
.journal-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: flex-start !important;
}

/* Badges de catégories dans les cartes */
.journal-card-content .journal-card-category a {
    font-family: var(--wp--preset--font-family--system-font) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background-color: var(--wp--preset--color--tertiary) !important;
    color: var(--wp--preset--color--primary) !important;
    border: 1px solid rgba(217, 119, 6, 0.1) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.journal-card-content .journal-card-category a:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: white !important;
    border-color: var(--wp--preset--color--primary) !important;
}

/* Titre d'article dans la carte avec soulignement progressif ambré au survol */
ul.wp-block-post-template>li .wp-block-post-title {
    font-family: "Source Serif Pro", Georgia, serif !important;
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
}

ul.wp-block-post-template>li .wp-block-post-title a {
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none !important;
    background: linear-gradient(to right, var(--wp--preset--color--accent-warm), var(--wp--preset--color--accent-warm)) no-repeat left bottom !important;
    background-size: 0px 2px !important;
    transition: background-size 0.3s ease, color 0.3s ease !important;
}

ul.wp-block-post-template>li:hover .wp-block-post-title a {
    color: var(--wp--preset--color--accent-warm) !important;
    background-size: 100% 2px !important;
}

/* Extrait d'article */
ul.wp-block-post-template>li .wp-block-post-excerpt {
    font-size: 0.9rem !important;
    color: var(--wp--preset--color--secondary) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* ==========================================================================
   11. Categories List Menu Styling (Header Secondary Menu Chaleureux)
   ========================================================================== */
ul.wp-block-categories,
.wp-block-categories-list,
.wp-block-categories.wp-block-categories-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 !important;
    width: 100% !important;
}

ul.wp-block-categories li,
.wp-block-categories-list li,
.wp-block-categories.wp-block-categories-list li {
    margin: 0 !important;
    display: inline-block !important;
}

ul.wp-block-categories li a,
.wp-block-categories-list li a,
.wp-block-categories.wp-block-categories-list li a {
    font-family: var(--wp--preset--font-family--system-font) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--wp--preset--color--primary) !important;
    background-color: var(--wp--preset--color--tertiary) !important;
    border: 1px solid var(--wp--preset--color--borders) !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: inline-block !important;
    box-shadow: 0 2px 5px rgba(217, 119, 6, 0.03) !important;
}

ul.wp-block-categories li a:hover,
.wp-block-categories-list li a:hover,
.wp-block-categories.wp-block-categories-list li a:hover {
    background-color: var(--wp--preset--color--accent-warm) !important;
    color: white !important;
    border-color: var(--wp--preset--color--accent-warm) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   12. Archive / Category Query Title Styling (Warm Banner)
   ========================================================================== */
.wp-block-query-title,
h1.wp-block-query-title {
    font-family: "Source Serif Pro", Georgia, serif !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--contrast) !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--wp--preset--color--tertiary) 0%, #ffffff 100%) !important;
    border: 1px solid var(--wp--preset--color--borders) !important;
    padding: 40px 24px !important;
    border-radius: 16px !important;
    margin-bottom: 48px !important;
    margin-top: 0 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 10px 30px -10px rgba(217, 119, 6, 0.05) !important;
    text-transform: capitalize !important;
}

/* ==========================================================================
   13. Sélecteur de Langue Premium (Polylang)
   ========================================================================== */
.frontieres-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background-color: var(--wp--preset--color--tertiary);
    border: 1px solid var(--wp--preset--color--borders);
    padding: 8px 18px;
    border-radius: 100px;
    margin-top: 8px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.03);
    font-family: var(--wp--preset--font-family--system-font);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--secondary);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.frontieres-lang-switcher__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wp--preset--color--primary);
    font-weight: 800;
}

.frontieres-lang-switcher__label svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: inline-block;
}

.frontieres-lang-switcher__list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.frontieres-lang-switcher__item {
    position: relative;
    display: flex;
    align-items: center;
}

.frontieres-lang-switcher__link {
    display: block;
    line-height: 0;
    border-radius: 50%;
    padding: 2px;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.frontieres-lang-switcher__link:hover {
    transform: scale(1.18);
    border-color: var(--wp--preset--color--accent-warm);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2);
}

.frontieres-lang-switcher__flag {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Langue active stylisée */
.frontieres-lang-switcher__item.is-active .frontieres-lang-switcher__link {
    border-color: var(--wp--preset--color--primary);
    background-color: rgba(109, 40, 217, 0.06);
    pointer-events: none;
}

.frontieres-lang-switcher__item.is-active .frontieres-lang-switcher__flag {
    opacity: 0.8;
}

/* Tooltip premium au survol */
.frontieres-lang-switcher__item::after {
    content: attr(data-lang-name);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: var(--wp--preset--color--contrast);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

/* Flèche du tooltip */
.frontieres-lang-switcher__item::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: var(--wp--preset--color--contrast) transparent;
    display: block;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.frontieres-lang-switcher__item:hover::after,
.frontieres-lang-switcher__item:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}